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. 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.

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

Documentação do layout

Designer consciente pensa no desenvolvedor

OrganizadosComentados 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 coding

A new way of writing HTML and CSS codeUm novo jeito de escrever códigos HTML e CSS

Documentação de código

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

Modularização = Foco

Discussão

Pensar em navegadores antigos?

Do websites need to look exactly the same in every browser?Os websites precisam aparecer exatamente iguais em cada navegador?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

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

http://br.html5boilerplate.com/

CSS = Como Ser Sexy

CSSsprite

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

generator.html

Seu Photoshop em CSS3

http://layerstyles.org/builder.html

As principais declarações CSS3 em uma única página, CSS3 please!

http://css3please.com/

CSS media queries

Vamos criar um botão

CSS Transitions: O novo movimento da web

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);}

}

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!

OBRIGADO :)

www.bernarddeluna.com - @bernarddeluna