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