quero ser um ninja em xhtml, html5 e css3 - bernard de luna
DESCRIPTION
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!TRANSCRIPT
![Page 1: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/1.jpg)
![Page 2: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/2.jpg)
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.
![Page 3: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/3.jpg)
Eu sou um ninja
![Page 4: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/4.jpg)
NINJA: Agente secreto ou mercenário do Japão feudal especializado em artes de guerra não ortodoxas.
![Page 5: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/5.jpg)
Agente secreto
![Page 6: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/6.jpg)
Que design bonito!
![Page 7: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/7.jpg)
Quem fez esse sistema?
![Page 8: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/8.jpg)
![Page 9: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/9.jpg)
Nós construímos aquilo que ninguém vê,nós somos agentes secretos.
![Page 10: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/10.jpg)
Mercenário
![Page 11: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/11.jpg)
Qualquer pessoa pode ser um ninja
![Page 12: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/12.jpg)
![Page 13: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/13.jpg)
Planejamento de Corte
![Page 14: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/14.jpg)
PNG não pega efeito multiply nem outros efeitos de camada.
![Page 15: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/15.jpg)
![Page 16: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/16.jpg)
Ícones usados na interface devem estar separados em uma pasta física
![Page 17: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/17.jpg)
![Page 18: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/18.jpg)
Ícones são divididos em famílias, estilos e possuem tamanhos definidos
![Page 19: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/19.jpg)
![Page 20: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/20.jpg)
Toda interface tem seu fim
![Page 21: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/21.jpg)
1000px
1280px
@EddieSouza
![Page 22: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/22.jpg)
Se usar uma fonte diferente, coloque-a em uma pasta física
![Page 23: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/23.jpg)
Documentação do layout
![Page 24: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/24.jpg)
![Page 25: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/25.jpg)
![Page 26: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/26.jpg)
Designer consciente pensa no desenvolvedor
![Page 27: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/27.jpg)
OrganizadosComentados Orientados e Limpos
![Page 28: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/28.jpg)
Seja necessário pela sua qualidade e não pelo seu egoísmo.
Comente o seu código
![Page 29: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/29.jpg)
Seja rápido como um ninja
![Page 30: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/30.jpg)
Zen coding
A new way of writing HTML and CSS codeUm novo jeito de escrever códigos HTML e CSS
![Page 31: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/31.jpg)
![Page 32: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/32.jpg)
Documentação de código
![Page 33: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/33.jpg)
Se o seu código não consegue ser reutilizado, ele não está bom o bastante
![Page 34: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/34.jpg)
Modularização = Foco
![Page 35: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/35.jpg)
![Page 36: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/36.jpg)
Discussão
Pensar em navegadores antigos?
![Page 37: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/37.jpg)
Do websites need to look exactly the same in every browser?Os websites precisam aparecer exatamente iguais em cada navegador?
![Page 38: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/38.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
![Page 39: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/39.jpg)
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/
www.modernizr.com
![Page 40: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/40.jpg)
http://br.html5boilerplate.com/
![Page 41: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/41.jpg)
CSS = Como Ser Sexy
![Page 42: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/42.jpg)
CSSsprite
http://www.shoutmeloud.com/9-great-free-online-css-sprite-
generator.html
![Page 43: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/43.jpg)
Seu Photoshop em CSS3
http://layerstyles.org/builder.html
![Page 44: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/44.jpg)
As principais declarações CSS3 em uma única página, CSS3 please!
http://css3please.com/
![Page 45: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/45.jpg)
CSS media queries
![Page 46: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/46.jpg)
Vamos criar um botão
![Page 47: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/47.jpg)
CSS Transitions: O novo movimento da web
![Page 48: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/48.jpg)
CSS animation: O novo flash camuflado
![Page 49: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/49.jpg)
-webkit-animation-name: nomedaanimacao;
![Page 50: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/50.jpg)
@-webkit-keyframes nomedaanimacao {
}
![Page 51: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/51.jpg)
@-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);}
}
![Page 52: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/52.jpg)
Efeitos e animações devem ser utilizados a favor do usuário e não para vender o profissional
![Page 53: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/53.jpg)
Seja em xHTML
![Page 54: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/54.jpg)
Seja em HTML5
![Page 55: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/55.jpg)
Seja em CSS3
![Page 56: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/56.jpg)
Seja em CSS animation
![Page 57: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/57.jpg)
Qualquer pessoa pode ser um ninja
![Page 58: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/58.jpg)
GO NINJA GO!
![Page 59: Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna](https://reader036.vdocuments.com.br/reader036/viewer/2022062307/55560109d8b42a8a5f8b5491/html5/thumbnails/59.jpg)
OBRIGADO :)
www.bernarddeluna.com - @bernarddeluna