Bernard De Luna @bernarddelunaEspecialista em Sexy web projects, Palestrante sobre Front-end e Design funcional, e Coorden...
Eu sou um ninja
NINJA: Agente secreto ou mercenário doJapão feudal especializado em artes deguerra não ortodoxas.
Agente secreto
Que design bonito!
Quem fez esse sistema?
Nós construímos aquilo que ninguém vê,     nós somos agentes secretos.
Mercenário
Qualquer pessoa pode ser um ninja
Planejamento de Corte
PNG não pega efeito multiply nem   outros efeitos de camada.
Ícones usados na interface devemestar separados em uma pasta física
Ícones são divididos em famílias, estilos    e possuem tamanhos definidos
Toda interface tem seu fim
@EddieSouza1000px            1280px
Se usar uma fonte diferente,coloque-a em uma pasta física
Não utilize mais de 2 fontes   diferentes no projeto
Documentação do layout
Designer conscientepensa no desenvolvedor
Comentados   Organizados   Orientados e Limpos
Seja necessário pela sua qualidade     e não pelo seu egoísmo.      Comente o seu código
Ninjas não poderão pegá-lo se você        estiver pegando fogo
Seja rápido como um ninja
Emmet!                 Zen codingA new way of writing HTML and CSS code   Um novo jeito de escrever códigos HTML e CSS
Sublime Text 2Quem disse que ferramenta não importa?
Documentação de código
Se o seu código não consegue serreutilizado, ele não está bom o bastante
Crie seu próprio Framework
Foque na função e não no estilo     Nem no conteúdo
Tooltip<div class="tooltip”>   <hgroup class="tooltip-h">       <h2 class="tooltip-tt">Reason:</h2>   </hgroup>   <section...
Modularização = Foco
DiscussãoPensar em navegadores antigos?
http://www.youtube.com/watch?v=lCPHbkb8J50IE6: A Eulogy
DiscussãoPensar em navegadores novos?
CSS = Como Ser Sexy
http://layerstyles.org/builder.htmlSeu Photoshop em CSS3
http://www.patternify.com
Criar um gradient CSS é tão fácil quanto fazer suco de groselha
Suco de groselha
http://lea.verou.me/css3patterns/
http://css3please.com/As principais declarações CSS3 em uma       única página, CSS3 please!
CSS media queries
http://www.alistapart.com/d/responsive-web-                                http://colly.com/design/ex/ex-site-FINAL.html
http://hicksdesign.co.uk/   http://teegallery.com/
http://confboilerplate.com/
CSS Transitions: O novo  movimento da web
http://pehaa.com/wp-content/uploads/2011/07/contactform/contactform.html
CSS animation: O novo flash camuflado
-webkit-animation-name: nomedaanimacao;
@-webkit-keyframes nomedaanimacao {}
@-webkit-keyframes nomedaanimacao {      0% {        background:#069;      }      30% {        background:#090;        pad...
http://anthonycalzadilla.com/css3-ATAT/index.html
http://codingonweekend.com.br/
https://developer.mozilla.org/en-US/demos/detail/pure-css3-homer/launch
http://imasters.com.br/linguagens/css/de         safio-css-imasters-cube
Efeitos e animações devem ser utilizados a favor   do usuário e não para vender o profissional
Seja em xHTML
Seja em HTML5
Seja em CSS3
Seja em CSS animation
Qualquer pessoa pode ser um ninja
GO NINJA GO!
www.bernarddeluna.com  @bernarddeluna
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Próximos SlideShares
Carregando em…5
×

Quero ser um ninja em xHTML, HTML5 e CSS3

4.705 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.705
No SlideShare
0
A partir de incorporações
0
Número de incorporações
46
Ações
Compartilhamentos
0
Downloads
209
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

×