Luiz Tiago Oliveira

http://www.luiztiago.comInstrutor 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 conhecimentodos 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 - SuporteSafari 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

luiztiago@luiztiago.com

www.imediabrasil.com.br www.luiztiago.com www.agitz.com.br