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

NINJA: Agente secreto ou mercenário do
Japão feudal especializado em artes de
guerra não ortodoxas.

Nós construímos aquilo que ninguém vê,
nós somos agentes secretos.

Qualquer pessoa pode ser um ninja

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

@EddieSouza

1000px

1280px

Se usar uma fonte diferente,
coloque-a em uma pasta física

Designer consciente
pensa 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

Zen coding

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

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

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/

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

http://br.html5boilerplate.com/

CSS
sprite

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

http://layerstyles.org/builder.html

Seu Photoshop em CSS3

http://css3please.com/

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

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

http://www.alistapart.com/d/r
esponsive-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 incomodado

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

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

www.bernarddeluna.com - @bernarddeluna

OBRIGADO :)

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

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna (20)

Mais de Bunee.io - Hiring with Intelligence (18)

Último (19)

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