Quero ser um ninja em xHTML, HTML5 e CSS3

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://hicksdesign.co.uk/ http://teegallery.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://anthonycalzadilla.com/css3-ATAT/index.html

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