[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

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

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

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

Seja rápido como um ninja

Zen codingA new way of writing HTML and CSS code Um novo jeito de escrever códigos HTML e CSS

Documentação de código

Se o seu código não consegue serreutilizado, ele não está bom o bastante

Modularização = Foco

DiscussãoPensar em navegadores antigos?

http://www.youtube.com/watch?v=lCPHbkb8J50IE6: A Eulogy

DiscussãoPensar em navegadores novos?

Do websites need to look exactlythe same in every browser?Os websites precisam aparecer exatamente iguais emcada navegador?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

www.modernizr.comNó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/

http://br.html5boilerplate.com/

CSS = Como Ser Sexy

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

http://layerstyles.org/builder.htmlSeu Photoshop em CSS3

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

CSS media queries

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

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

http://hicksdesign.co.uk/ http://teegallery.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; -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); }}

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

http://beta.theexpressiveweb.com/

Devaneios de um incomodadoNão me importa se você não concordacom o que eu digoEu tô mostrando aonde eu tô indo enão te obrigo a vir comigo Ramon Bispo http://soundcloud.com/ram onpage/devaneios-de-um- incomodado

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 OBRIGADO :)

http://bernarddeluna.com	275
http://twitter.com	2
http://us-w1.rockmelt.com	2
https://twitter.com	1

[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

by Bernard De Luna on Aug 14, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 280

Statistics

[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna — Presentation Transcript