Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

7,170 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

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 />

×