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. Bernard De Luna @bernarddelunaEspecialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Professor de WebDesign da Faculdade CCAA, Coordenador de front-end da Petrobras, 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. Eusou 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 essesistema?

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ãopegaefeito multiply nem outros efeitos de camada.

16. Íconesusadosna interface devemestarseparadosemuma pasta física

18. Íconessãodivididosemfamílias, estilos e possuemtamanhosdefinidos

20. Toda interface tem seufim

21. @EddieSouza 1000px 1280px

22. Se usarumafontediferente, coloque-a emuma pasta física

23. Documentação do layout

26. Designer conscientepensa no desenvolvedor

27. Organizados Comentados Orientados e Limpos

28. Sejanecessáriopelasuaqualidade e nãopeloseuegoísmo. Comente o seucódigo

29. Sejarápidocomo um ninja

30. Zen coding A new way of writing HTML and CSS codeUm novo jeito de escrevercódigos HTML e CSS

32. Documentação de código

33. Se o seucódigonãoconsegueserreutilizado, elenãoestábom o bastante

34. Modularização= Foco

36. DiscussãoPensaremnavegadoresantigos?

37. Do websites need to look exactly the same in every browser?Os websites precisamaparecerexatamenteiguaisemcadanavegador?

38. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

39. www.modernizr.com Nósnãoperguntamospara 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/

40. http://br.html5boilerplate.com/

41. CSS = Como Ser Sexy

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

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

44. http://css3please.com/ As principaisdeclarações CSS3 emumaúnicapágina, CSS3 please!

45. CSS media queries

46. Vamoscriar um botão

47. CSS Transitions: O novo movimento da web

48. CSS animation: O novo flash camuflado

49. -webkit-animation-name: nomedaanimacao;

50. @-webkit-keyframesnomedaanimacao {}

51. @-webkit-keyframesnomedaanimacao{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); }}

52. Efeitos e animaçõesdevemserutilizados a favor do usuário e nãopara vender o profissional

53. SejaemxHTML

54. Sejaem HTML5

55. Sejaem CSS3

56. Sejaem CSS animation

57. Qualquer pessoa pode ser um ninja

58. GO NINJA GO!

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