HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira

Luiz Tiago Oliveira
http://www.luiztiago.com
Instrutor WebStandards @ iMedia Brasil
Front-End Engineer / Gerente de Projetos @ Agitz Web

O passado da Web...
A Web não tinha forma...
A W3C estava começando...
Os desenvolvedores estavam começando...
Os browsers estavam começando...

O passado da Web...
Era comum frases como:
“ Escolha o browser que você utiliza”
“ Qual resolução você utiliza?”

O crescimento...
Quantidade e qualidade dos browsers;
Qualidade e conhecimento dos desenvolvedores;
Reconhecimento da área no mercado.

O crescimento...
Falando mal do passado e com as limitações, todos voltaram a fazer o mesmo:
“ Este site só funciona no Internet Explorer”
“ É necessário utilizar a versão 3.0 do Firefox para melhor navegabilidade”

Melhoria Progressiva
O projeto é feito de baixo para cima
Em seguida o desenvolvedor adiciona funcionalidades e melhorias para o comportamento da página.
( Progressive Enhancement )

Melhoria Progressiva
As funcionalidades não são afetadas
A navegabilidade não é afetada
Apenas o layout e efeitos avançados podem sofrer pequenas alterações dependendo dos browsers
( Progressive Enhancement )

Navegadores ( Crescimento em % )

HTML 5
Anunciado no início de 2009
Versão final prometida para 2012

HTML 5 - Principais Novidades
Elementos que valorizam a semântica;
Elementos multimídia;
Facilidade para desenhos dinâmicos (canvas);
Drag and Drop de elementos;
Geolocation API;
Armazenamento de dados no cliente;

HTML 5 - Algumas novas tags
<article> <aside> <audio> <canvas> <command> <details> <dialog> <footer> <header> <hgroup> <nav> <section> <source> <video>

HTML 5 - Algumas tags removidas
<acronym> <applet> <basefont>
<big> <font> <frame> <frameset>
<noframes> <s> <tt> <u>

<div id="header"> <h1>Meu blog</h1> <p class="tagline">Várias informações sobre Web</p> <div id=“nav”> <ul> <li><a href=“home.html">home</a></li> <li><a href=“blog.html">blog</a></li> </ul> </div> </div> <div class="entry"> <p class="post-date“>22 de Outubro de 2009</p> <h2>Como ficar rico...</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan Aliq</p> </div> <header> <hgroup> <h1>Meu blog</h1> <h2>Várias informações sobre Web</h2> </hgroup> <nav> <ul> <li><a href=“home.html">home</a></li> <li><a href=“blog.html">blog</a></li> </ul> </nav> </header> <article> <header> <time datetime="2009-10-22”>22 de Outubro de 2009</time> <h2>Como ficar rico...</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan Aliq</p> </article>

HTML 5 - Exemplos
http://bit.ly/1Hw1ED (photos)
http://bit.ly/2F3i1K (tiger)
http://bit.ly/fPMxn (videos)
http://bit.ly/HkYnp (sticky)
http://www.html5gallery.com
http:// www.apple.com/br/safari
http:// www.tableless.com.br

HTML 5
Todos os browsers já possuem suporte?

HTML 5 - Está na hora de mudar?
Se existe solução cabível para o suporte dos navegadores desatualizados, por que não?
Se a especificação ainda é instável e sujeita a mudanças, por que começar ?

HTML 5 - Desenvolver ou não?
Análise do público-alvo;
Flexibilidade de manutenção conforme mudanças;
Orçamento flexível;
Interesse;

CSS 3 - Introdução
O CSS 3 está atualmente em desenvolvimento.
É modular e será composto de várias recomendações distintas.
É mais compacta e mais rica em semântica.

CSS 3 - Pontos Positivos
Novas funcionalidades podem ser adicionadas sem precisar criar uma nova versão completa.
Facilita o início do suporte de alguns browsers

CSS 3 - Alguns diferenciais
Layout multi-colunas mais práticos;
Suporte a WebFonts;
Bordas arredondadas sem usar imagens;
Possibilidade de vários backgrounds;

CSS 3 - Suporte Safari 4 (Win) Firefox 3.5 (Win) Google Chrome (Win) Internet Explorer 6, 7 & 8

DESAFIO
Sem scripts
Sem imagens
Sem tabelas (claro!)

Dúvidas ? @luiztiago [email_address] www.imediabrasil.com.br www.luiztiago.com www.agitz.com.br

http://www.slideshare.net	33
http://coderwall.com	9
http://webcache.googleusercontent.com	1
http://twitter.com	1
http://a0.twimg.com	1
http://us-w1.rockmelt.com	1

HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira

by Luiz Oliveira on Nov 15, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 46

Statistics

HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira — Presentation Transcript