Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

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.

Eusou 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 essesistema?

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ãopegaefeito multiply nem outros efeitos de camada.

Íconesusadosna interface devemestarseparadosemuma pasta física

Íconessãodivididosemfamílias, estilos e possuemtamanhosdefinidos

Toda interface tem seufim

@EddieSouza
1000px
1280px

Se usarumafontediferente, coloque-a emuma pasta física

Documentação do layout

Designer conscientepensa no desenvolvedor

Organizados
Comentados
Orientados
e Limpos

Sejanecessáriopelasuaqualidade e nãopeloseuegoísmo.
Comente o seucódigo

Sejarápidocomo um ninja

Zen coding
A new way of writing HTML and CSS codeUm novo jeito de escrevercódigos HTML e CSS

Documentação de código

Se o seucódigonãoconsegueserreutilizado, elenãoestábom o bastante

Modularização= Foco

DiscussãoPensaremnavegadoresantigos?

Do websites need to look exactly the same in every browser?Os websites precisamaparecerexatamenteiguaisemcadanavegador?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

www.modernizr.com
Nósnãoperguntamospara 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

CSSsprite
http://www.shoutmeloud.com/9-great-free-online-css-sprite-generator.html

http://layerstyles.org/builder.html
Seu Photoshop em CSS3

http://css3please.com/
As principaisdeclarações CSS3 emumaúnicapágina, CSS3 please!

CSS media queries

Vamoscriar um botão

CSS Transitions: O novo movimento da web

CSS animation: O novo flash camuflado

-webkit-animation-name: nomedaanimacao;

@-webkit-keyframesnomedaanimacao {}

@-webkit-keyframesnomedaanimacao{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çõesdevemserutilizados a favor do usuário e nãopara vender o profissional

SejaemxHTML

Sejaem HTML5

Sejaem CSS3

Sejaem CSS animation

Qualquer pessoa pode ser um ninja

GO NINJA GO!

OBRIGADO :)
www.bernarddeluna.com - @bernarddeluna

http://bernarddeluna.com	194
http://blog.zenorocha.com	48
http://feeds.feedburner.com	19
http://paper.li	3
http://moodle.esenviseu.net	2
http://www.slideshare.net	1
url_unknown	1
http://twitter.com	1

Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna

by Bernard De Luna on Jun 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 269

Statistics

Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna — Presentation Transcript