Bernard De Luna é um especialista em desenvolvimento front-end que coordena projetos web focados em padrões, acessibilidade e técnicas avançadas como HTML5, CSS3 e jQuery. O documento discute o planejamento de interfaces web, uso de ícones, comentários de código e modularização para tornar sites responsivos e de fácil manutenção.

2. Bernard De Luna @bernarddeluna
Especialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Coordenador Front-end da
Ozonion, além de consultor e palestrante em assuntos voltados a design funcional e técnicas avançadas de front-end
como xHTML, HTML5, jQuery e CSS3.

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. Documentação do layout

26. Designer consciente
pensa no desenvolvedor

27. Comentados Organizados Orientados e Limpos

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

29. Seja rápido como um ninja

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

32. Documentação de código

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

34. Modularização = Foco

36. Discussão
Pensar em navegadores antigos?

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

38. Discussão
Pensar em navegadores novos?

39. Do websites need to look exactly
the same in every browser?
Os websites precisam aparecer exatamente iguais em
cada navegador?

40. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

41. www.modernizr.com
Nó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/

42. http://br.html5boilerplate.com/

43. CSS = Como Ser Sexy

44. CSS
sprite
http://www.shoutmeloud.com/9-
great-free-online-css-sprite-
generator.html

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

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

47. CSS media queries

48. http://trentrichardson.com/examples/css-media-query/

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

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

51. CSS Transitions: O novo
movimento da web

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

53. CSS animation: O novo flash camuflado

54. -webkit-animation-name: nomedaanimacao;

55. @-webkit-keyframes nomedaanimacao {
}

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

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

58. http://beta.theexpressiveweb.com/

59. Devaneios de um incomodado
Não me importa se você não concorda
com o que eu digo
Eu tô mostrando aonde eu tô indo e
não te obrigo a vir comigo
Ramon Bispo
http://soundcloud.com/ram
onpage/devaneios-de-um-
incomodado

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

61. Seja em xHTML

62. Seja em HTML5

63. Seja em CSS3

64. Seja em CSS animation

65. Qualquer pessoa pode ser um ninja

66. GO NINJA GO!

67. www.bernarddeluna.com - @bernarddeluna
OBRIGADO :)