Bernard De Luna   @bernarddelunaEspecialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Pro...
Eusou um ninja <br />
NINJA:  Agente secreto ou mercenário do Japão feudal especializado em artes de guerra não ortodoxas.<br />
Agente secreto<br />
Que design bonito!<br />
Quem fez essesistema?<br />
Nós construímos aquilo que ninguém vê,nós somos agentes secretos.<br />
Mercenário<br />
Qualquer pessoa pode ser um ninja<br />
Planejamento de Corte<br />
PNG nãopegaefeito multiply nem outros efeitos de camada.<br />
Íconesusadosna interface devemestarseparadosemuma pasta física<br />
Íconessãodivididosemfamílias, estilos e possuemtamanhosdefinidos<br />
Toda interface tem seufim<br />
@EddieSouza<br />1000px<br />1280px<br />
Se usarumafontediferente, coloque-a emuma pasta física<br />
Documentação do layout<br />
Designer conscientepensa no desenvolvedor<br />
Organizados<br />Comentados<br />Orientados<br />e Limpos<br />
Sejanecessáriopelasuaqualidade e nãopeloseuegoísmo.<br />Comente o seucódigo<br />
Sejarápidocomo um ninja<br />
Zen coding<br />A new way of writing HTML and CSS codeUm novo jeito de escrevercódigos HTML e CSS<br />
Documentação de código<br />
Se o seucódigonãoconsegueserreutilizado, elenãoestábom o bastante<br />
Modularização= Foco<br />
DiscussãoPensaremnavegadoresantigos?<br />
Do websites need to look exactly the same in every browser?Os websites precisamaparecerexatamenteiguaisemcadanavegador?<br />
http://dowebsitesneedtolookexactlythesameineverybrowser.com/<br />
www.modernizr.com<br />Nósnãoperguntamospara o browser<br />Quem é você?<br />E sim<br />Você pode fazer isso e aquilo?<br...
http://br.html5boilerplate.com/<br />
CSS = Como Ser Sexy<br />
CSSsprite<br />http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html<br />
http://layerstyles.org/builder.html<br />Seu Photoshop em CSS3<br />
http://css3please.com/<br />As principaisdeclarações CSS3 emumaúnicapágina, CSS3 please!<br />
CSS media queries<br />
Vamoscriar um botão<br />
CSS Transitions: O novo movimento da web<br />
CSS animation: O novo flash camuflado<br />
-webkit-animation-name: nomedaanimacao;<br />
@-webkit-keyframesnomedaanimacao {}<br />
@-webkit-keyframesnomedaanimacao{0% {	  background:#069;		}30% {	  background:#090;	  padding: 40px;		  -webkit-transform:...
Efeitos e animaçõesdevemserutilizados a favor do usuário e nãopara vender o profissional<br />
SejaemxHTML<br />
Sejaem HTML5<br />
Sejaem CSS3<br />
Sejaem CSS animation<br />
Qualquer pessoa pode ser um ninja<br />
GO NINJA GO!<br />
OBRIGADO :)<br />www.bernarddeluna.com  - @bernarddeluna<br />
Upcoming SlideShare
Loading in …5
×

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

6,901 views
6,733 views

Published on

Já sabe codificar? Quer chegar a um nível destacado no mercado? Práticas avançadas de documentação, velocidade de codificação, modularização. Tudo isso recheado a muitas dicas de corte de layouts e inovações em CSS3!

Published in: Technology, News & Politics
6 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
6,901
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
219
Comments
6
Likes
22
Embeds 0
No embeds

No notes for slide

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

  1. 1.
  2. 2. Bernard De Luna @bernarddelunaEspecialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Professor de WebDesign da Faculdade CCAA, Coordenador de front-end da Petrobras, 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.<br />
  3. 3. Eusou um ninja <br />
  4. 4. NINJA: Agente secreto ou mercenário do Japão feudal especializado em artes de guerra não ortodoxas.<br />
  5. 5. Agente secreto<br />
  6. 6. Que design bonito!<br />
  7. 7. Quem fez essesistema?<br />
  8. 8.
  9. 9. Nós construímos aquilo que ninguém vê,nós somos agentes secretos.<br />
  10. 10. Mercenário<br />
  11. 11. Qualquer pessoa pode ser um ninja<br />
  12. 12.
  13. 13. Planejamento de Corte<br />
  14. 14. PNG nãopegaefeito multiply nem outros efeitos de camada.<br />
  15. 15.
  16. 16. Íconesusadosna interface devemestarseparadosemuma pasta física<br />
  17. 17.
  18. 18. Íconessãodivididosemfamílias, estilos e possuemtamanhosdefinidos<br />
  19. 19.
  20. 20. Toda interface tem seufim<br />
  21. 21. @EddieSouza<br />1000px<br />1280px<br />
  22. 22. Se usarumafontediferente, coloque-a emuma pasta física<br />
  23. 23. Documentação do layout<br />
  24. 24.
  25. 25.
  26. 26. Designer conscientepensa no desenvolvedor<br />
  27. 27. Organizados<br />Comentados<br />Orientados<br />e Limpos<br />
  28. 28. Sejanecessáriopelasuaqualidade e nãopeloseuegoísmo.<br />Comente o seucódigo<br />
  29. 29. Sejarápidocomo um ninja<br />
  30. 30. Zen coding<br />A new way of writing HTML and CSS codeUm novo jeito de escrevercódigos HTML e CSS<br />
  31. 31.
  32. 32. Documentação de código<br />
  33. 33. Se o seucódigonãoconsegueserreutilizado, elenãoestábom o bastante<br />
  34. 34. Modularização= Foco<br />
  35. 35.
  36. 36. DiscussãoPensaremnavegadoresantigos?<br />
  37. 37. Do websites need to look exactly the same in every browser?Os websites precisamaparecerexatamenteiguaisemcadanavegador?<br />
  38. 38. http://dowebsitesneedtolookexactlythesameineverybrowser.com/<br />
  39. 39. www.modernizr.com<br />Nósnãoperguntamospara o browser<br />Quem é você?<br />E sim<br />Você pode fazer isso e aquilo?<br />http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/<br />
  40. 40. http://br.html5boilerplate.com/<br />
  41. 41. CSS = Como Ser Sexy<br />
  42. 42. CSSsprite<br />http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html<br />
  43. 43. http://layerstyles.org/builder.html<br />Seu Photoshop em CSS3<br />
  44. 44. http://css3please.com/<br />As principaisdeclarações CSS3 emumaúnicapágina, CSS3 please!<br />
  45. 45. CSS media queries<br />
  46. 46. Vamoscriar um botão<br />
  47. 47. CSS Transitions: O novo movimento da web<br />
  48. 48. CSS animation: O novo flash camuflado<br />
  49. 49. -webkit-animation-name: nomedaanimacao;<br />
  50. 50. @-webkit-keyframesnomedaanimacao {}<br />
  51. 51. @-webkit-keyframesnomedaanimacao{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); }}<br />
  52. 52. Efeitos e animaçõesdevemserutilizados a favor do usuário e nãopara vender o profissional<br />
  53. 53. SejaemxHTML<br />
  54. 54. Sejaem HTML5<br />
  55. 55. Sejaem CSS3<br />
  56. 56. Sejaem CSS animation<br />
  57. 57. Qualquer pessoa pode ser um ninja<br />
  58. 58. GO NINJA GO!<br />
  59. 59. OBRIGADO :)<br />www.bernarddeluna.com - @bernarddeluna<br />

×