HTML5

Criando aplicativos com o HTML5: o que você precisa saber

Brandon Satrom

O HTML5 chegou, e a Web nunca mais será a mesma.

Sem dúvida, você já ouviu isso antes, ou algo parecido. E acredito que, quando ouviu, ficou animado, revirou os olhos ou murmurou “por quê?” e franziu um pouco a testa. Talvez sua reação tenha sido uma mistura dessas três.

Eu não o culparia por nenhuma delas. O HTML5 é empolgante e tem o potencial de mudar a Web como a conhecemos hoje, mas também ganha uma dimensão exagerada. Além disso, seu real significado pode ser enganoso. Eu mesmo experimentei cada uma dessas reações ao criar aplicativos com o HTML5. Esse é um tópico muito amplo, de modo que é difícil compreender o HTML5 e muito menos saber por onde começar a lidar com esse empolgante novo conjunto de tecnologias.

Este é o primeiro de uma série de artigos para a MSDN Magazine e seu objetivo é oferecer uma visão completa de porque a primeira frase deste artigo é verdadeira e importante. Durante os próximos meses, eu quero ajudá-lo a entender o que o HTML5 significa para você — tanto como um desenvolvedor da Web, quanto como um desenvolvedor que usa ferramentas e tecnologias da Microsoft. Eu espero tornar simples para você um pouco da complexidade em torno do HTML5 e desmistificar bastante da empolgação. Vou, também, apresentar alguns dos recursos do HTML5 que se encontram disponíveis hoje, assim como algumas empolgantes tecnologias que, embora ainda um pouco distantes no tempo, merecem nossa atenção. Para terminar, vou deixá-lo com algumas dicas que o ajudarão a adotar tecnologias do HTML5 agora, enquanto você continua a fornecer excelentes experiências a usuários de navegadores mais antigos.

Se você está empolgado com o HTML5, eu quero ajudá-lo a transformar essa empolgação em ideias que poderá colocar em prática imediatamente. Se você está cético, eu quero ajudá-lo a entender exatamente porque o HTML5 é importante. E se você só estiver confuso até sobre o que o HTML5 significa, não tenha receio: essa é nossa primeira parada nesta série.

O que é HTML5?

Agora, você deve ter descoberto que o HTML5 significa coisas diferentes para pessoas diferentes. Para alguns, ele significa somente novas marcas como <header> e <footer> e um punhado de novos atributos disponíveis para marcação. Para outros, ele significa tudo o que há de novo e interessante na Web, inclusive tecnologias implementadas em apenas um único navegador ou outras especificações que, oficialmente, não fazem parte do HTML5. Na verdade, entender o real significado do HTML5 é, em geral, o primeiro obstáculo que muitos de nós enfrentamos.

E, sinceramente, há alguma justificativa para a quantidade de diferentes definições. O HTML5 é imenso! Formalmente definido por um grupo internacional de padronização como o World Wide Web Consortium (W3C), o HTML5 consiste em mais de 100 especificações relacionadas à próxima geração de tecnologias da Web. Colocando essas mais de 100 especificações sob o moniker HTML5, você poderia argumentar que o W3C exagerou ao simplificar as coisas. E mesmo sendo difícil tomar algo tão amplo quanto o HTML5 e defini-lo de maneira inequívoca, eu acredito que o W3C tentou abordar o escopo do que está mudando na Web introduzindo o HTML5 como um conceito unificador para essa mudança.

Na verdade, HTML5 é um termo síntese que descreve um conjunto de especificações do HTML, de CSS e de JavaScript, projetado para capacitar desenvolvedores a criar sites e aplicativos da próxima geração. O notável nessa definição são suas três partes: HTML, CSS e JavaScript. Elas definem o modo como desenvolvedores usam marcação aprimorada, recursos de estilo avançados e novas APIs de JavaScript para aproveitar ao máximo os novos recursos de desenvolvimento de Web. Simplificando, HTML5 = HTML + CSS + JavaScript.

E isso é tudo. O HTML5 diz respeito a alterações no HTML, em CSS e em JavaScript. Em vez de se preocuparem com aquelas mais de 100 especificações, esses três termos descrevem a amplitude e o escopo do HTML5. Ainda acha isso simples demais? Pode ser, mas como você logo verá, uma definição abrangente do HTML5 não importa tanto quanto as tecnologias escolhidas que valerão o tempo e esforço empregados ao adotá-las.

Com uma definição à mão, vamos gastar algum tempo discorrendo sobre onde a Microsoft se adapta ao espaço do HTML5.

HTML5 e o Internet Explorer

Como mencionei, o conjunto de especificações que formam o HTML5 é supervisionado pelo W3C. O W3C consiste em equipe, organizações e indivíduos responsáveis por auxiliar na condução e definição do futuro da Web. O WC3 é uma organização baseada em consenso e, geralmente, opera formando comitês (chamados de grupos de trabalho) para distribuir esforços dedicados a especificações relacionadas. Especificações podem ser propostas por qualquer associado e todas as especificações pertencentes ao W3C — mais especificações além daquelas que se enquadram na definição do HTML5 — percorrem um processo de cinco estágios, desde um esboço inicial até a recomendação oficial.

A Microsoft é membro do W3C e desempenha papel ativo no processo de especificação de muitos padrões do HTML5 e em grupos de trabalho. Assim como os principais fornecedores de navegadores, a Microsoft investe intensamente no HTML5 e trabalha com o W3C e outros fornecedores para garantir que desenvolvedores possam contar com uma implementação confiável e interoperável em todos os principais navegadores das tecnologias do HTML5.

No contexto da Microsoft como fornecedor de navegador, a abordagem consta de quatro pontos:

1. Fornecer o melhor HTML5 pronto para sites, via o Explorer 9.
2. Apresentar futuros recursos aos desenvolvedores via Visualizações da Plataforma do Internet Explorer.
3. Investir na interoperabilidade através de testes submetidos ao W3C.
4. Criar protótipos de padrões instáveis por meio de laboratórios do HTML5.

“HTML5 pronto para sites” é o termo usado pela Microsoft para descrever as tecnologias do HTML5 que você pode usar hoje, por terem amplo suporte por todos os principais navegadores. Tecnologias como novas marcas de HTML, Tela, Elementos Gráficos Vetoriais Escaláveis, Áudio e Vídeo, Localização Geográfica, Armazenamento na Web e vários novos módulos CSS3 enquadram-se nesse espaço e são implementadas no Internet Explorer 9, assim como em outros navegadores predominantes. Nessa série, vamos gastar um bom tempo discutindo essas tecnologias, assim como maneiras para adotá-las hoje.

Além do que se encontra disponível agora, a Microsoft está usando Visualizações de Plataforma públicas para informar os desenvolvedores sobre o que está por vir na próxima versão do navegador e, também, para receber comentários. Para o Internet Explorer 9, a Microsoft lançou Visualizações de Plataforma a cada 6 a 8 semanas, cada vez anunciando novos aprimoramentos, recursos e aperfeiçoamentos no desempenho do HTML5, para que os desenvolvedores pudessem experimentar e avaliar. O Internet Explorer 9 foi lançado em março e no início de julho a Microsoft lançou duas Visualizações de Plataforma para o Internet Explorer 10, sinalizando que a Microsoft continua em seu ritmo normal de visualizações para o Internet Explorer. Como desenvolvedor, você há de querer tirar proveito das mais recentes visualizações para entender, testar e influenciar o modo como os navegadores evoluem. Você pode baixar a mais recente Visualização de Plataforma do Internet Explorer em IETestDrive.com.

Para garantir que o HTML5 opere consistentemente com todos os navegadores, a Microsoft investiu pesadamente em interoperabilidade, criando e disponibilizando ao W3C o maior conjunto de casos de teste relacionados ao HTML5. Pela primeira vez, esse conjunto de casos de teste será usado pelo W3C como a fonte autoritativa para “prontidão” do HTML5 para cada navegador. O resultado final para você e eu como desenvolvedores é que podemos adotar e implementar tecnologias do HTML5 uma vez e confiar que elas irão funcionar consistentemente em todos os navegadores. Para obter mais informações sobre o trabalho da Microsoft em interoperabilidade, vá para bit.ly/dxB12S.

Embora algumas das tecnologias do HTML5 já existam no Internet Explorer 9, e outras estejam sendo anunciadas para o Internet Explorer 10 via as Visualizações da Plataforma do Internet Explorer, algumas especificações populares e dignas de nota necessitam de um pouco mais de trabalho por parte do W3C e dos fornecedores de navegadores antes que estejam prontas para implementação em nossos aplicativos. Um desses exemplos é o Web Sockets, uma especificação empolgante que permite que os desenvolvedores estabeleçam canais de comunicação bidirecional com servidores back-end, permitindo, dessa maneira, um nível de conectividade em “tempo real” não disponível anteriormente para aplicativos da Web. Como desenvolvedor, você pode sem dúvida imaginar as incontáveis utilizações de Web Sockets nos aplicativos que você está criando neste momento. Mas as especificações de Web Sockets ainda estão mudando a passo rápido, com aspectos importantes ainda em andamento e sendo discutidos no W3C. Devido a essa situação, seria difícil oferecer hoje esse recurso de maneira consistente e confiável a todos os navegadores.

Para especificações instáveis ou em evolução como Web Sockets (que abordaremos em detalhes em um futuro artigo), a Microsoft criou o HTML5 Labs, um site para desenvolvedores experimentarem implementações provisórias dessas tecnologias. O site oferece protótipos para você baixar e experimentar localmente, assim como demonstrações hospedadas de algumas especificações. O objetivo é lhe oferecer um local para que você mesmo possa testar essas especificações e fornecer comentários à Microsoft e ao W3C sobre essas especificações à medida que elas se estabilizem e se aproximem da implementação em navegadores. Para obter mais informações sobre o HTML5 Labs, visite html5labs.com.

Ferramentas do HTML5 e para o desenvolvedor Microsoft.

Além do envolvimento da Microsoft com o W3C e as tecnologias do HTML5 com suporte no navegador, existe outro aspecto relativo à abordagem da Microsoft ao HTML5 que é importante para os desenvolvedores: sua abordagem às ferramentas do HTML5.

No início de 2011 a Microsoft atualizou duas de suas ferramentas de desenvolvimento com service packs: Visual Studio 2010 e Expression Web 4. Os service packs para essas duas ferramentas ofereciam um tipo de documento do HTML5 para validação, assim como o IntelliSense para novas marcas e atributos do HTML5. Se você estiver usando o Visual Studio 2010 SP1, poderá habilitar o esquema do HTML5 clicando em Ferramentas | Opções | Editor de Texto | HTML | Validação e, em seguida, selecionando a opção HTML5 na lista suspensa Destino, conforme mostrado na Figura 1. Você pode também definir o HTML5 como o esquema padrão a partir da barra de ferramentas de edição do código-fonte de HTML em qualquer arquivo HTML, como mostrado na Figura 2.

Figura 1 Habilitando o esquema de HTML5 via caixa de diálogo Opções

Figura 2 Seleção do esquema de HTML5 na barra de ferramentas de edição de código-fonte HTML

Assim que seu esquema padrão for definido, você obterá suporte ao IntelliSense no Visual Studio para as 28 novas marcas semânticas em HTML, assim como novos atributos específicos de marcas e globais, como mostrado na Figura 3.

Figura 3 O IntelliSense do HTML5 no Visual Studio 2010 SP1

A Microsoft atualizou ainda mais seu suporte ao HTML5 com o lançamento, em junho de 2011, de atualizações de padrões da Web para o Microsoft Visual Studio 2010 SP1. Essa extensão, que funciona com todas as edições do Visual Studio 2010, acrescenta IntelliSense e validação do HTML5 ao Visual Studio, inclui IntelliSense do JavaScript para novos recursos como Localização Geográfica e Armazenamento DOM, e oferece IntelliSense e validação CSS3. Você pode baixar essa extensão, que será constantemente atualizada para oferecer ferramentas aprimoradas para o desenvolvimento em HTML5, de bit.ly/m7OB13.

Para o Expression Web 4 SP1, definir o esquema de HTML5 em Ferramentas | Opções de Página oferece o mesmo IntelliSense, e a ferramenta também fornece o IntelliSense do CSS3 para vários módulos provisórios do CSS3, como border-radius, box-shadow, transform e similares.

Se você estiver usando o WebMatrix (consulte web.ms/WebMatrix), pode ter notado que todos os novos documentos .html, .cshtml ou .vbhtml criados contêm uma marcação padrão semelhante ao que é mostrado na Figura 4. Como vou discutir no próximo artigo desta série, esse é um documento HTML5 válido. O que mais chama a atenção é que as marcas doctype e meta charset perderam bastante código inválido. O uso desse simples tipo de documento dispara o modo HTML5 por todos os navegadores modernos e o WebMatrix torna isso mais fácil ao fornecer um documento HTML5 por padrão.

Figura 4 Um documento HTML padrão em WebMatrix

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body></body>
</html>

Se isso não representa quantidade suficiente de novas ferramentas HTML5 para você — todas disponíveis desde janeiro de 2011, diga-se de passagem — o ASP.NET MVC entrou recentemente no jogo com a atualização das ferramentas do ASP.NET MVC 3 anunciadas durante a MIX11 em abril. Juntamente com uma série de outros excelentes recursos de ferramentas, a atualização das ferramentas do ASP.NET MVC 3 oferece a opção de uso do tipo de documento HTML5 para novos projetos — e fornece o Modernizr 1.7 no arquivo de Scripts de novos aplicativos. O Modernizr é uma biblioteca de JavaScript que facilita consideravelmente o desenvolvimento em HTML5; devo discutir isso em detalhe em um futuro artigo.

A vantagem aqui é que embora o HTML5 esteja ainda surgindo em nossos navegadores, o suporte oficial de ferramentas está sendo rapidamente disponibilizado e que a Microsoft também está acrescentando suporte a bibliotecas (como o Modernizr) a partir da comunidade. Você pode se direcionar ao HTML5 hoje, com alguma ajuda das ferramentas da Microsoft e confiar que o suporte ao HTML5 vai continuar a crescer e melhorar com o tempo.

‘Adotando’ o HTML5 em seus aplicativos

A essa altura, você deve ter percebido que o HTML5 não é uma entidade única que você pode adotar ou para a qual você possa migrar de uma só vez. A adoção do HTML5, em vez de ser uma escolha por atacado, consiste em avaliar tecnologia por tecnologia e determinar quais tecnologias são adequadas ao seu aplicativo. Para cada tecnologia do HTML5 que você avaliar, procure, pelo menos, pelos seguintes fatores ao decidir se ela está pronta para ser adotada por você:

1. Quão amplamente a tecnologia está implementada em todos os principais navegadores?
2. Como você poderia adotar essa tecnologia e oferecer “suporte retroativo” a navegadores que não suportam um determinado recurso?

O primeiro fator é o mais importante e, quando combinado a um entendimento dos navegadores comumente usados pelos visitantes de seu site, deveria lhe oferecer uma visão clara de que subconjunto das mais de 100 especificações vale a pena ser avaliado mais detalhadamente. O subconjunto deve consistir em um conjunto de especificações estáveis que você pode adotar hoje com confiança para seus usuários.

Entretanto, mesmo com um conjunto estável de tecnologias do HTML5, você não deverá ignorar seus usuários que não migraram para um navegador mais recente. Se você está bastante envolvido com o desenvolvimento dia-a-dia de seu site, sem dúvida deve ter uma ideia estimada das porcentagens de usuários que visitam seu site com um determinado navegador. Para a maioria de nós, seria fácil observar a porcentagem de usuários que visitam com um navegador mais antigo e chegar à conclusão que adotar quaisquer tecnologias do HTML5 iria impactar de maneira negativa aqueles usuários. Felizmente, existe o “suporte retroativo” para evitar que tenhamos que esperar por alguma data incerta no futuro para adotar o HTML5.

Paul Irish (um desenvolvedor nos projetos jQuery e Modernizr) define o suporte retroativo como “… um shim que imita uma API futura, oferecendo funcionalidade fallback a navegadores mais antigos”. Um suporte retroativo é como um reparo para seus sites da Web; é uma maneira de determinar se um determinado recurso do HTML5 encontra-se disponível para o usuário que atualmente navega por seu site e de oferecer um shim que preencha aquele suporte ou um curso de redução gradual que permita que seu site ainda funcione completamente.

A mais popular das bibliotecas associadas a suporte retroativo é o Modernizr, a biblioteca de JavaScript mencionada anteriormente. O Modernizr fornece alguns suportes retroativos para marcações semânticas, detecção de recurso para as principais tecnologias do HTML5 e suporte a CSS condicional baseado em recursos suportados. Com já foi dito, o Modernizr será assunto de um futuro artigo e terá grande destaque (juntamente com outras bibliotecas de suporte retroativo) por toda essa série. Para obter mais informações, baixe o Modernizr emmodernizr.com. 

Quando chegar a hora de escolher as tecnologias a serem adotadas, sua lista final pode ser uma combinação de especificações amplamente suportadas e outras especificações para as quais você deverá oferecer suporte retroativo a certos navegadores. Somente você saberá como montar exatamente essa lista, baseado em suas necessidades atuais e no contexto.

Nos próximos meses, vou discutir várias especificações importantes, de Localização Geográfica, Formulários e Tela a Web Workers, Web Sockets e IndexedDB. Algumas dessas são amplamente suportadas e “prontas para site” e outras, como Web Sockets, são muito pioneiras para serem ignoradas, independente do estágio em que se encontram hoje. Com cada especificação, vou discutir o suporte atual e futuro, algumas noções básicas sobre como você pode implementar os recursos da especificação em seus sites e como oferecer suporte retroativo a navegadores que não suportam um determinado recurso.

Caso você queira ir mais a fundo sobre o HTML5 hoje, recomendo dois livros sobre o assunto. Particularmente, recomendo “Introducing HTML5” (New Riders, 2010) por Bruce Lawson e Remy Sharp e “HTML5 Up and Running” (O’Reilly Media, 2010) por Mark Pilgrim. Visite também W3C.org para obter informações atualizadas sobre todas as especificações, assim como BeautyoftheWeb.com e IETestDrive.com para baixar o Internet Explorer 9 e a Visualização da Plataforma do Internet Explorer 10, respectivamente, e conhecer melhor excelentes experiências com o HTML5 que a Microsoft está disponibilizando através do navegador.

E, acima de tudo, comece adotando o HTML5 hoje. Na verdade, a Web nunca mais será a mesma, e você pode fazer parte dessa força impulsionadora criando os futuros grandes aplicativos da Web usando o HTML5.

Brandon Satrom trabalha como desenvolvedor e divulgador da Microsoft nos arredores de Austin, Texas. Ele mantém um blog em UserInexperience.com e pode ser seguido no Twitter em Twitter.com/BrandonSatrom.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Jon Box, Damian Edwards e Clark Sell