como ser um ninja do html 5, css, e usar as ferramentas adequadas para trabalho no desenvolvimento front end

2. Bernard De Luna @bernarddeluna Especialista em Sexy web projects, Palestrante sobre Front-end e Design funcional, e Coordenador de Produto da Estante Virtual

3. Eu sou um ninja

4. NINJA: Agente secreto ou mercenário do Japão feudal especializado em artes de guerra não ortodoxas.

5. Agente secreto

6. Que design bonito!

7. Quem fez esse sistema?

9. Nós construímos aquilo que ninguém vê, nós somos agentes secretos.

10. Mercenário

11. Qualquer pessoa pode ser um ninja

13. Planejamento de Corte

14. PNG não pega efeito multiply nem outros efeitos de camada.

16. Ícones usados na interface devem estar separados em uma pasta física

18. Ícones são divididos em famílias, estilos e possuem tamanhos definidos

20. Toda interface tem seu fim

21. 1000px
1280px
@EddieSouza

22. Se usar uma fonte diferente, coloque-a em uma pasta física

23. Não utilize mais de 2 fontes diferentes no projeto

24. Documentação do layout

27. Designer consciente pensa no desenvolvedor

28. Organizados
Comentados
Orientados
e Limpos

29. Seja necessário pela sua qualidade e não pelo seu egoísmo.
Comente o seu código

30. Ninjas não poderão pegá-lo se você estiver pegando fogo

31. Seja rápido como um ninja

32. Zen coding
A new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS
Emmet!

33. Sublime Text 2
Quem disse que ferramenta não importa?

35. Documentação de código

36. Se o seu código não consegue ser reutilizado, ele não está bom o bastante

37. Crie seu próprio Framework

38. Foque na função e não no estilo
Nem no conteúdo

39. Tooltip
<div class="tooltip”>
<hgroup class="tooltip-h">
<h2 class="tooltip-tt">Reason:</h2>
</hgroup>
<section class="tooltip-body”></section>
</div>

40. Modularização = Foco

42. Discussão Pensar em navegadores antigos?

43. http://www.youtube.com/watch?v=lCPHbkb8J50 IE6: A Eulogy

44. Discussão Pensar em navegadores novos?

47. CSS = Como Ser Sexy

48. Seu Photoshop em CSS3
http://layerstyles.org/builder.html

49. http://www.patternify.com

50. Criar um gradient CSS é tão fácil quanto fazer suco de groselha

51. Suco de groselha

52. http://lea.verou.me/css3patterns/

53. As principais declarações CSS3 em uma única página, CSS3 please!
http://css3please.com/

54. CSS media queries

55. http://www.alistapart.com/d/responsive-web- design/ex/ex-site- FINAL.html
http://colly.com/

56. http://hicksdesign.co.uk/
http://teegallery.com/

57. http://confboilerplate.com/

58. CSS Transitions: O novo movimento da web

59. http://pehaa.com/wp-content/uploads/2011/07/contactform/contactform.html

60. CSS animation: O novo flash camuflado

61. -webkit-animation-name: nomedaanimacao;

62. @-webkit-keyframes nomedaanimacao { }

63. @-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); } }

64. http://anthonycalzadilla.com/css3-ATAT/index.html

65. http://codingonweekend.com.br/

66. https://developer.mozilla.org/en- US/demos/detail/pure-css3-homer/launch

67. http://imasters.com.br/linguagens/css/desafio-css-imasters-cube

68. Efeitos e animações devem ser utilizados a favor do usuário e não para vender o profissional

69. Seja em xHTML

70. Seja em HTML5

71. Seja em CSS3

72. Seja em CSS animation

73. Qualquer pessoa pode ser um ninja

74. GO NINJA GO!

75. www.bernarddeluna.com
@bernarddeluna