Bernard De Luna @bernarddeluna

Especialista em desenvolvimento front-end, padres e acessibilidade para projetos web. Coordenador Front-end da Ozonion, alm de consultor e palestrante em assuntos voltados a design funcional e tcnicas avanadas de front-end como xHTML, HTML5, jQuery e CSS3.

Eu sou um ninja

NINJA: Agente secreto ou mercenrio do Japo feudal especializado em artes de guerra no ortodoxas.

Agente secreto

Que design bonito!

Quem fez esse sistema?

Ns construmos aquilo que ningum v, ns somos agentes secretos.

Mercenrio

Qualquer pessoa pode ser um ninja

Planejamento de Corte

PNG no pega efeito multiply nem outros efeitos de camada.

cones usados na interface devem estar separados em uma pasta fsica

cones so divididos em famlias, estilos e possuem tamanhos definidos

Toda interface tem seu fim

@EddieSouza

1000px

1280px

Se usar uma fonte diferente, coloque-a em uma pasta fsica

Documentao do layout

Designer consciente pensa no desenvolvedor

Comentados

Organizados

Orientados e Limpos

Seja necessrio pela sua qualidade e no pelo seu egosmo. Comente o seu cdigo

Seja rpido como um ninja

Zen coding
A new way of writing HTML and CSS code
Um novo jeito de escrever cdigos HTML e CSS

Documentao de cdigo

Se o seu cdigo no consegue ser reutilizado, ele no est bom o bastante

Modularizao = Foco

Discusso

Pensar em navegadores antigos?

http://www.youtube.com/watch?v=lCPHbkb8J50

IE6: A Eulogy

Discusso

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

Ns no 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 = Como Ser Sexy

CSS sprite

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

http://layerstyles.org/builder.html

Seu Photoshop em CSS3

http://css3please.com/

As principais declaraes CSS3 em uma nica pgina, CSS3 please!

CSS media queries

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

http://www.alistapart.com/d/r esponsive-webdesign/ex/ex-siteFINAL.html

http://colly.com/

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

No me importa se voc no concorda com o que eu digo Eu t mostrando aonde eu t indo e no te obrigo a vir comigo
Ramon Bispo
http://soundcloud.com/ram onpage/devaneios-de-umincomodado

Efeitos e animaes devem ser utilizados a favor do usurio e no 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

OBRIGADO :)