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

Bernard De Luna @bernarddeluna Especialista em desenvolvimento front-end, padrões e acessibilidade para projetos web. Coordenador Front-end da

Ozonion, 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

Organizados Comentados 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 code Um 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?

http://www.youtube.com/watch?v=lCPHbkb8J50

IE6: A Eulogy

Discussão

Pensar em navegadores novos?

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

CSS

sprite

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

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

http://www.alistapart.com/d/r

esponsive-web-

design/ex/ex-site-

FINAL.html

http://colly.com/

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/

Não me importa se você não concorda com o que eu digo Eu tô mostrando aonde eu tô indo e não te obrigo a vir comigo

Devaneios de um incomodado

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!

OBRIGADO :)

www.bernarddeluna.com - @bernarddeluna