Embed Size (px)
DESCRIPTION
como ser um ninja do html 5, css, e usar as ferramentas adequadas para trabalho no desenvolvimento front end
Citation preview
Bernard De Luna @bernarddeluna Especialista em Sexy web projects, Palestrante sobre Front-end e Design funcional, e Coordenador de Produto da
Estante Virtual
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
Não utilize mais de 2 fontes
diferentes no projeto
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
Ninjas não poderão pegá-lo se você
estiver pegando fogo
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
Emmet!
Sublime Text 2
Quem disse que ferramenta não importa?
Documentação de código
Se o seu código não consegue ser
reutilizado, ele não está bom o bastante
Crie seu próprio Framework
Foque na função e não no estilo
Nem no conteúdo
Tooltip
<div class="tooltip”>
<hgroup class="tooltip-h">
<h2 class="tooltip-tt">Reason:</h2>
</hgroup>
<section class="tooltip-body”></section>
</div>
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?
CSS = Como Ser Sexy
Seu Photoshop em CSS3
http://layerstyles.org/builder.html
http://www.patternify.com
Criar um gradient CSS é tão fácil
quanto fazer suco de groselha
Suco de groselha
http://lea.verou.me/css3patterns/
As principais declarações CSS3 em uma
única página, CSS3 please!
http://css3please.com/
CSS media queries
http://www.alistapart.com/d/r
esponsive-web-
design/ex/ex-site-
FINAL.html
http://colly.com/
http://confboilerplate.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;
transform: rotate(60deg) scale(1.85);
}
50% {
background:#F60;
padding: 20px;
transform: rotate(120deg) scale(2.85);
}
80% {
background:#C09;
padding: 40px;
transform: rotate(260deg) scale(1);
}
}
http://codingonweekend.com.br/
https://developer.mozilla.org/en-
US/demos/detail/pure-css3-homer/launch
http://imasters.com.br/linguagens/css/de
safio-css-imasters-cube
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!
www.bernarddeluna.com
@bernarddeluna
