O documento aborda a importância do design funcional e da organização no desenvolvimento web, destacando o papel do designer como um 'ninja' que cria soluções invisíveis mas essenciais. Ele enfatiza a modularização do código, a documentação clara e a reutilização de componentes, além de mencionar ferramentas e boas práticas para o uso de CSS3. O autor promove uma abordagem prática e eficiente para construção de interfaces, respeitando o usuário e priorizando a funcionalidade.

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. @EddieSouza
1000px
1280px

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. Comentados Organizados 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. Emmet!
Zen coding
A new way of writing HTML and CSS code
Um novo jeito de escrever códigos HTML e CSS

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. http://layerstyles.org/builder.html
Seu Photoshop em CSS3

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. http://css3please.com/
As principais declarações CSS3 em uma
única página, CSS3 please!

54. CSS media queries

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

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