Quero ser um ninja em xHTML, HTML5 e CSS3

4.598 visualizações

Publicada em

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.

2 comentários
24 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.598
No SlideShare
0
A partir de incorporações
0
Número de incorporações
46
Ações
Compartilhamentos
0
Downloads
208
Comentários
2
Gostaram
24
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Quero ser um ninja em xHTML, HTML5 e CSS3

  1. 1. Bernard De Luna @bernarddelunaEspecialista em Sexy web projects, Palestrante sobre Front-end e Design funcional, e Coordenador de Produto da Estante Virtual
  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. Não utilize mais de 2 fontes diferentes no projeto
  18. 18. Documentação do layout
  19. 19. Designer conscientepensa no desenvolvedor
  20. 20. Comentados Organizados Orientados e Limpos
  21. 21. Seja necessário pela sua qualidade e não pelo seu egoísmo. Comente o seu código
  22. 22. Ninjas não poderão pegá-lo se você estiver pegando fogo
  23. 23. Seja rápido como um ninja
  24. 24. Emmet! Zen codingA new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS
  25. 25. Sublime Text 2Quem disse que ferramenta não importa?
  26. 26. Documentação de código
  27. 27. Se o seu código não consegue serreutilizado, ele não está bom o bastante
  28. 28. Crie seu próprio Framework
  29. 29. Foque na função e não no estilo Nem no conteúdo
  30. 30. Tooltip<div class="tooltip”> <hgroup class="tooltip-h"> <h2 class="tooltip-tt">Reason:</h2> </hgroup> <section class="tooltip-body”></section></div>
  31. 31. Modularização = Foco
  32. 32. DiscussãoPensar em navegadores antigos?
  33. 33. http://www.youtube.com/watch?v=lCPHbkb8J50IE6: A Eulogy
  34. 34. DiscussãoPensar em navegadores novos?
  35. 35. CSS = Como Ser Sexy
  36. 36. http://layerstyles.org/builder.htmlSeu Photoshop em CSS3
  37. 37. http://www.patternify.com
  38. 38. Criar um gradient CSS é tão fácil quanto fazer suco de groselha
  39. 39. Suco de groselha
  40. 40. http://lea.verou.me/css3patterns/
  41. 41. http://css3please.com/As principais declarações CSS3 em uma única página, CSS3 please!
  42. 42. CSS media queries
  43. 43. http://www.alistapart.com/d/responsive-web- http://colly.com/design/ex/ex-site-FINAL.html
  44. 44. http://hicksdesign.co.uk/ http://teegallery.com/
  45. 45. http://confboilerplate.com/
  46. 46. CSS Transitions: O novo movimento da web
  47. 47. http://pehaa.com/wp-content/uploads/2011/07/contactform/contactform.html
  48. 48. CSS animation: O novo flash camuflado
  49. 49. -webkit-animation-name: nomedaanimacao;
  50. 50. @-webkit-keyframes nomedaanimacao {}
  51. 51. @-webkit-keyframes nomedaanimacao { 0% { background:#069; } 30% { background:#090; padding: 40px; transform: rotate(60deg) scale(1.85); } 50% { background:#F60; padding: 20px; transform: rotate(120deg) scale(2.85); } 80% { background:#C09; padding: 40px; transform: rotate(260deg) scale(1); }}
  52. 52. http://anthonycalzadilla.com/css3-ATAT/index.html
  53. 53. http://codingonweekend.com.br/
  54. 54. https://developer.mozilla.org/en-US/demos/detail/pure-css3-homer/launch
  55. 55. http://imasters.com.br/linguagens/css/de safio-css-imasters-cube
  56. 56. Efeitos e animações devem ser utilizados a favor do usuário e não para vender o profissional
  57. 57. Seja em xHTML
  58. 58. Seja em HTML5
  59. 59. Seja em CSS3
  60. 60. Seja em CSS animation
  61. 61. Qualquer pessoa pode ser um ninja
  62. 62. GO NINJA GO!
  63. 63. www.bernarddeluna.com @bernarddeluna

×