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

4.699 visualizações

Publicada em

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

Publicada em: Tecnologia, Design
3 comentários
9 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.699
No SlideShare
0
A partir de incorporações
0
Número de incorporações
369
Ações
Compartilhamentos
0
Downloads
111
Comentários
3
Gostaram
9
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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 :)

×