O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 67 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna (20)

Anúncio

Mais de Bunee.io - Hiring with Intelligence (19)

Mais recentes (20)

Anúncio

[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

  1. 1. Bernard De Luna @bernarddeluna Especialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Coordenador Front-end da Ozonion, além de consultor e palestrante em assuntos voltados a design funcional e técnicas avançadas de front-end como xHTML, HTML5, jQuery e CSS3.
  2. 2. Eu sou um ninja
  3. 3. NINJA: Agente secreto ou mercenário do Japão feudal especializado em artes de guerra não ortodoxas.
  4. 4. Agente secreto
  5. 5. Que design bonito!
  6. 6. Quem fez esse sistema?
  7. 7. Nós construímos aquilo que ninguém vê, nós somos agentes secretos.
  8. 8. Mercenário
  9. 9. Qualquer pessoa pode ser um ninja
  10. 10. Planejamento de Corte
  11. 11. PNG não pega efeito multiply nem outros efeitos de camada.
  12. 12. Ícones usados na interface devem estar separados em uma pasta física
  13. 13. Ícones são divididos em famílias, estilos e possuem tamanhos definidos
  14. 14. Toda interface tem seu fim
  15. 15. @EddieSouza 1000px 1280px
  16. 16. Se usar uma fonte diferente, coloque-a em uma pasta física
  17. 17. Documentação do layout
  18. 18. Designer consciente pensa no desenvolvedor
  19. 19. Comentados Organizados Orientados e Limpos
  20. 20. Seja necessário pela sua qualidade e não pelo seu egoísmo. Comente o seu código
  21. 21. Seja rápido como um ninja
  22. 22. Zen coding A new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS
  23. 23. Documentação de código
  24. 24. Se o seu código não consegue ser reutilizado, ele não está bom o bastante
  25. 25. Modularização = Foco
  26. 26. Discussão Pensar em navegadores antigos?
  27. 27. http://www.youtube.com/watch?v=lCPHbkb8J50 IE6: A Eulogy
  28. 28. Discussão Pensar em navegadores novos?
  29. 29. Do websites need to look exactly the same in every browser? Os websites precisam aparecer exatamente iguais em cada navegador?
  30. 30. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  31. 31. www.modernizr.com Nós não perguntamos para o browser Quem é você? E sim Você pode fazer isso e aquilo? http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
  32. 32. http://br.html5boilerplate.com/
  33. 33. CSS = Como Ser Sexy
  34. 34. CSS sprite http://www.shoutmeloud.com/9- great-free-online-css-sprite- generator.html
  35. 35. http://layerstyles.org/builder.html Seu Photoshop em CSS3
  36. 36. http://css3please.com/ As principais declarações CSS3 em uma única página, CSS3 please!
  37. 37. CSS media queries
  38. 38. http://trentrichardson.com/examples/css-media-query/
  39. 39. http://www.alistapart.com/d/r esponsive-web- http://colly.com/ design/ex/ex-site- FINAL.html
  40. 40. http://hicksdesign.co.uk/ http://teegallery.com/
  41. 41. CSS Transitions: O novo movimento da web
  42. 42. http://pehaa.com/wp-content/uploads/2011/07/contactform/contactform.html
  43. 43. CSS animation: O novo flash camuflado
  44. 44. -webkit-animation-name: nomedaanimacao;
  45. 45. @-webkit-keyframes nomedaanimacao { }
  46. 46. @-webkit-keyframes nomedaanimacao { 0% { background:#069; } 30% { background:#090; padding: 40px; -webkit-transform: rotate(60deg) scale(1.85); } 50% { background:#F60; padding: 20px; -webkit-transform: rotate(120deg) scale(2.85); } 80% { background:#C09; padding: 40px; -webkit-transform: rotate(260deg) scale(1); } }
  47. 47. http://anthonycalzadilla.com/css3-ATAT/index.html
  48. 48. http://beta.theexpressiveweb.com/
  49. 49. Devaneios de um incomodado Não me importa se você não concorda com o que eu digo Eu tô mostrando aonde eu tô indo e não te obrigo a vir comigo Ramon Bispo http://soundcloud.com/ram onpage/devaneios-de-um- incomodado
  50. 50. Efeitos e animações devem ser utilizados a favor do usuário e não para vender o profissional
  51. 51. Seja em xHTML
  52. 52. Seja em HTML5
  53. 53. Seja em CSS3
  54. 54. Seja em CSS animation
  55. 55. Qualquer pessoa pode ser um ninja
  56. 56. GO NINJA GO!
  57. 57. www.bernarddeluna.com - @bernarddeluna OBRIGADO :)

×