Bernard De Luna @bernarddelunaEspecialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Coord...
Eu sou um ninja
NINJA: Agente secreto ou mercenário doJapão feudal especializado em artes deguerra não ortodoxas.
Agente secreto
Que design bonito!
Quem fez esse sistema?
Nós construímos aquilo que ninguém vê,     nós somos agentes secretos.
Mercenário
Qualquer pessoa pode ser um ninja
Planejamento de Corte
PNG não pega efeito multiply nem   outros efeitos de camada.
Ícones usados na interface devemestar separados em uma pasta física
Ícones são divididos em famílias, estilos    e possuem tamanhos definidos
Toda interface tem seu fim
@EddieSouza1000px            1280px
Se usar uma fonte diferente,coloque-a em uma pasta física
Documentação do layout
Designer conscientepensa no desenvolvedor
Comentados   Organizados   Orientados e Limpos
Seja necessário pela sua qualidade     e não pelo seu egoísmo.      Comente o seu código
Seja rápido como um ninja
Zen codingA new way of writing HTML and CSS code   Um novo jeito de escrever códigos HTML e CSS
Documentação de código
Se o seu código não consegue serreutilizado, ele não está bom o bastante
Modularização = Foco
DiscussãoPensar em navegadores antigos?
http://www.youtube.com/watch?v=lCPHbkb8J50IE6: A Eulogy
DiscussãoPensar em navegadores novos?
Do websites need to look exactlythe same in every browser?Os websites precisam aparecer exatamente iguais emcada navegador?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
www.modernizr.comNós não perguntamos para o browser Quem é você?   E sim Você pode fazer isso e aquilo?      http://www.al...
http://br.html5boilerplate.com/
CSS = Como Ser Sexy
CSSsprite         http://www.shoutmeloud.com/9-             great-free-online-css-sprite-                           genera...
http://layerstyles.org/builder.htmlSeu Photoshop em CSS3
http://css3please.com/As principais declarações CSS3 em uma       única página, CSS3 please!
CSS media queries
http://trentrichardson.com/examples/css-media-query/
http://www.alistapart.com/d/responsive-web-                                http://colly.com/design/ex/ex-site-FINAL.html
http://hicksdesign.co.uk/   http://teegallery.com/
CSS Transitions: O novo  movimento da web
http://pehaa.com/wp-content/uploads/2011/07/contactform/contactform.html
CSS animation: O novo flash camuflado
-webkit-animation-name: nomedaanimacao;
@-webkit-keyframes nomedaanimacao {}
@-webkit-keyframes nomedaanimacao {      0% {        background:#069;      }      30% {        background:#090;        pad...
http://anthonycalzadilla.com/css3-ATAT/index.html
http://beta.theexpressiveweb.com/
Devaneios de um incomodadoNão me importa se você não concordacom o que eu digoEu tô mostrando aonde eu tô indo enão te obr...
Efeitos e animações devem ser utilizados a favor   do usuário e não para vender o profissional
Seja em xHTML
Seja em HTML5
Seja em CSS3
Seja em CSS animation
Qualquer pessoa pode ser um ninja
GO NINJA GO!
www.bernarddeluna.com - @bernarddeluna    OBRIGADO :)
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Upcoming SlideShare
Loading in …5
×

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

4,688 views

Published on

Palestra dada dia 13/08/2011 no http://www.frontinbh.com.br

Published in: Technology, Design
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
4,688
On SlideShare
0
From Embeds
0
Number of Embeds
369
Actions
Shares
0
Downloads
111
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide

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

  1. 1. Bernard De Luna @bernarddelunaEspecialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Coordenador Front-end daOzonion, além de consultor e palestrante em assuntos voltados a design funcional e técnicas avançadas de front-endcomo xHTML, HTML5, jQuery e CSS3.
  2. 2. Eu sou um ninja
  3. 3. NINJA: Agente secreto ou mercenário doJapão feudal especializado em artes deguerra 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 devemestar 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. @EddieSouza1000px 1280px
  16. 16. Se usar uma fonte diferente,coloque-a em uma pasta física
  17. 17. Documentação do layout
  18. 18. Designer conscientepensa 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 codingA 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 serreutilizado, ele não está bom o bastante
  25. 25. Modularização = Foco
  26. 26. DiscussãoPensar em navegadores antigos?
  27. 27. http://www.youtube.com/watch?v=lCPHbkb8J50IE6: A Eulogy
  28. 28. DiscussãoPensar em navegadores novos?
  29. 29. Do websites need to look exactlythe same in every browser?Os websites precisam aparecer exatamente iguais emcada navegador?
  30. 30. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  31. 31. www.modernizr.comNó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. CSSsprite http://www.shoutmeloud.com/9- great-free-online-css-sprite- generator.html
  35. 35. http://layerstyles.org/builder.htmlSeu 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/responsive-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 incomodadoNão me importa se você não concordacom o que eu digoEu tô mostrando aonde eu tô indo enã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 :)

×