HTML

Onde estamos, para onde vamos.

Criatividade, Inovação e Tecnologia

Década de 60: o início

Surgimento da ARPANet/Internet

Protocolos de comunicação

SGML – Standard Generalized Markup Language

Sintaxe abstrata usada para definir linguagens de

marcação

Criatividade, Inovação e Tecnologia

Década de 80

Ligações de hipertexto entre documentos com

propósito acadêmico

Criação de linguagem de marcação específica para

esse fim: HTML

CERN, Suíça: criação da World Wide Web, por Tim

Berners-Lee

Criatividade, Inovação e Tecnologia

Década de 90 adiante

Internet comercial traz novos usos e novas possibilidades para a Web

Limitações da especificação HTML não servem totalmente para essa nova Web

Marcação original é “retorcida” de forma “criativa” para fazer coisas não planejadas

Ferramentas WYSIWYG geram códigos imensos e praticamente ilegíveis em busca de boa estética

Criatividade, Inovação e Tecnologia

POG to the people!

Tags proprietárias

Versões de site: Explorer X Navigator

Uso de tabelas para definir grids

Uso de tabelas dentro de tabelas para definir grids ainda menores

Abuso de GIFs transparentes para espaçamento

Onipresença de tags <FONT>

<BLINK>, <MARQUEE> e outros monstros

Criatividade, Inovação e Tecnologia

Microsoft.com, Março de 2000

<!-- vertical line --><TD ROWSPAN=9 BGCOLOR="#FF3300"><IMG SRC="/library/images/gifs/homepage/1ptrans.gif" WIDTH=1 HEIGHT=1 ALT="" BORDER=0></TD>

<!-- spacer column --><TD ROWSPAN=9><IMG SRC="/library/images/gifs/homepage/1ptrans.gif" WIDTH=1 HEIGHT=1 ALT="" BORDER=0></TD>

<!--main content cell--><TD COLSPAN=5 VALIGN="TOP">

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR>

<TD WIDTH=117 VALIGN=TOP><A HREF="/windows2000/guide/default.asp" TARGET="_top"><IMG ALIGN="LEFT" HSPACE=0 SRC="/library/homepage/images/mscom_w2000.gif" WIDTH=117 HEIGHT=85 ALT="Windows 2000" BORDER=0></A></TD>

<TD WIDTH=10><IMG SRC='/library/homepage/images/1ptrans.gif' WIDTH=10 HEIGHT=85 ALT="" BORDER=0></TD>

<TD WIDTH=309 VALIGN=TOP><font face='verdana,arial,helvetica' size=1><A HREF="/windows2000/guide/default.asp" TARGET="_top"><B>Windows 2000: We Delivered. Now You Can, Too</B></A><BR>Sure, it was a long wait, but that's how Microsoft delivered the most thoroughly tested, reliable, and manageable business operating system in PC history. Check out our complete guide to evaluate and deploy Windows 2000, and you can help your business join the 24x7 digital economy.<BR></TD>

</TR></TABLE>

</TD>

<!-- spacer column --><TD ROWSPAN=9><IMG SRC="/library/images/gifs/homepage/1ptrans.gif" WIDTH=1 HEIGHT=1 ALT="" BORDER=0></TD></TR>

<!-- horizontal gray line --><TR><TD COLSPAN=5><HR COLOR="#CCCCCC" SIZE=1 NOSHADE></TD></TR>

Criatividade, Inovação e Tecnologia

Constatações

Cientistas não são futurólogos

Designers não entendem de programação

Programadores não entendem de design

Criatividade, Inovação e Tecnologia

Falando idiomas diferentes

Navegadores implementam o seu próprio tipo de HTML, levando em consideração o que acham ou não relevante

Falta de padronização gera: Custos de desenvolvimento

Insatisfação dos patrocinadores

Desinteresse dos clientes

Criatividade, Inovação e Tecnologia

Como mudar o horizonte?

Dividir para conquistar: Definição de padrões Web (HTML 4, CSS 2 etc.)

Um título sempre vai ser um título, independente da aparência.

HTML passa a marcar a função dos elementos e as folhas CSS definem a forma deles.

Em conjunto e dentro dos padrões, HTML e CSS devem ser suportados por todos os navegadores.

Criatividade, Inovação e Tecnologia

Melhorou sem resolver

Padrões hoje são cada vez mais adotados pelos desenvolvedores.

Pena que não são tão adotados pelos navegadores...

Sites agora não precisam de versões inteiras diferentes, mas ainda necessitam de hacks e workarounds

Dilema: até onde seguir o padrão (validar o código) ou satisfazer a necessidade do cliente?

Criatividade, Inovação e Tecnologia

Web em movimento

HTML por si só é totalmente estático

CSS só define aparência, não interações

Essas duas tecnologias dependem de outras para ter vida: JavaScript

Flash

Silverlight

Tecnologias de servidor (CGI, ASP, .Net, PHP...)

Criatividade, Inovação e Tecnologia

Web 2.0

Aplicações inteiras migrando dos desktops para a Internet

As informações relevantes para o cliente no momento importante para o cliente

Interação em tempo real entre clientes de diferentes plataformas

Interfaces dessas aplicações baseadas em HTML

HTML não foi pensado e não está adaptado para a realidade da Web de hoje

Criatividade, Inovação e Tecnologia

Há esperança?

Propostas de novos padrões sugerem algumas soluções para problemas atuais

HTML/XHTML5: <header>

<footer>

<canvas>

<nav>

<video>

<audio>

Criatividade, Inovação e Tecnologia

...sempre tem o “porém”

Novas tags quebram compatibilidade com páginas e navegadores existentes hoje

Comunidade ainda discute como algumas tags serão implementadas

Fabricantes planejam só “molhar os pés” com HTML5 nas próximas versões

Usuários normalmente demoram para atualizar navegadores

Criatividade, Inovação e Tecnologia

Que fazer então?

Conhecer as limitações impostas pela tecnologia

Abusar da criatividade para encontrar soluções úteis dentro das poucas ferramentas que temos

Ler muito, manter-se sempre atualizado no tema

Explorar o conceito de comunidades e participar ativamente das discussões dos novos padrões

Participar do desenvolvimento dos navegadores, oferecendo feedback e reclamando quando necessário

Criatividade, Inovação e Tecnologia

Obrigado!

Dúvidas? Questões? Comentários?