Upload
bernard-de-luna
View
4.335
Download
0
Embed Size (px)
DESCRIPTION
Palestra dada dia 13/08/2011 no http://www.frontinbh.com.br
Citation preview
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/
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