Bernard De Luna @bernarddeluna Especialista em Sexy web projects, Palestrante sobre Front-end e Design funcional, e Coorde...
Eu sou um ninja
NINJA: Agente secreto ou mercenário do Japão feudal especializado em artes de guerra 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 devem estar separados em uma pasta física
Ícones são divididos em famílias, estilos e possuem tamanhos definidos
Toda interface tem seu fim
1000px 
1280px 
@EddieSouza
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 consciente pensa no desenvolvedor
Organizados 
Comentados 
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
Zen coding 
A new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS 
Emmet!
Sublime Text 2 
Quem disse que ferramenta não importa?
Documentação de código
Se o seu código não consegue ser reutilizado, 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 class...
Modularização = Foco
Discussão Pensar em navegadores antigos?
http://www.youtube.com/watch?v=lCPHbkb8J50 IE6: A Eulogy
Discussão Pensar em navegadores novos?
CSS = Como Ser Sexy
Seu Photoshop em CSS3 
http://layerstyles.org/builder.html
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/
As principais declarações CSS3 em uma única página, CSS3 please! 
http://css3please.com/
CSS media queries
http://www.alistapart.com/d/responsive-web- design/ex/ex-site- FINAL.html 
http://colly.com/
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; padding: 40px; transform: rotate(60deg)...
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/desafio-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
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Ninja html 5 css javascript
Próximos SlideShares
Carregando em…5
×

Ninja html 5 css javascript

403 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
403
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ninja html 5 css javascript

  1. 1. Bernard De Luna @bernarddeluna Especialista 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 do Japão feudal especializado em artes de guerra 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 devem estar 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. 1000px 1280px @EddieSouza
  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 consciente pensa no desenvolvedor
  20. 20. Organizados Comentados 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. Zen coding A new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS Emmet!
  25. 25. Sublime Text 2 Quem disse que ferramenta não importa?
  26. 26. Documentação de código
  27. 27. Se o seu código não consegue ser reutilizado, 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ão Pensar em navegadores antigos?
  33. 33. http://www.youtube.com/watch?v=lCPHbkb8J50 IE6: A Eulogy
  34. 34. Discussão Pensar em navegadores novos?
  35. 35. CSS = Como Ser Sexy
  36. 36. Seu Photoshop em CSS3 http://layerstyles.org/builder.html
  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. As principais declarações CSS3 em uma única página, CSS3 please! http://css3please.com/
  42. 42. CSS media queries
  43. 43. http://www.alistapart.com/d/responsive-web- design/ex/ex-site- FINAL.html http://colly.com/
  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/desafio-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

×