O Futuro e o Presente do

Transcrição

1 : : : : José Yoshiriro Ajisaka Ramos (jyoshiriro@gmail.com): Bacharel em Sistemas de Informação (IESAM) e mestrando em Ciência da Computação (UFPA). Possui as certificações SCJP 6, SCWCD 5, SCBCD 5 e OCUP Fundamental. Criador e colaborador de alguns projetos opensource para produtos da Apache.org. Desenvolvedor concursado do TJE/PA. Participante ativo em eventos do Beljug e nos fóruns guj.com.br. Professor de cursos de graduação em TI na FAZ e na UAB/IFPA e de cursos de Java na EquilibriumWeb. O Futuro e o Presente do HTML 5 Conheça o estado atual da nova versão da HTML, a qual promete revolucionar a maneira de desenvolver sistemas Web para desktop e dispositivos móveis. O HTML 5 está em processo de especificação desde 2007 e há uma grande movimentação da indústria acerca de seu uso. Elogios, críticas e polêmicas têm girado em torno dessa nova tecnologia. Ignorá-la é ficar fora de um iminente contexto de mudança no paradigma no desenvolvimento de aplicações para internet. Este artigo apresenta uma abordagem geral das funcionalidades e notícias em torno dessa tecnologia, a fim de ajudar o leitor na decisão de investir ou não nela. ste artigo fará uma abordagem geral sobre o estado da arte da versão 5 da HTML. O objetivo é fazer o leitor perceber a importância dessa tecnologia, cada vez mais presente em diversos tipos de sistemas Web. Não se trata de um tutorial ou guia de uso do HTML5 e sim de uma apresentação crítica dessa nova e emergente tecnologia. É apresentado um breve histórico dessa linguagem; uma seleção de notícias recentes sobre essa tecnologia; suas novas funcionalidades e estudos comparativos com browsers desktop e mobile sobre a compatibilidade de cada um com HTML5. A conturbada relação entre a Apple e Flash também é abordada antes de reflexões sobre o futuro de tecnologias RIA dependentes de plugin e baseadas em frameworks Javascript. Finalmente, são apresentadas listagens de IDEs e livros acerca da HTML5. 6

2 História do HTML 5 A HTML (HyperText Markup Language) foi criada por Tim Berners- Lee tendo sua primeira especificação formal em Desde então, ocorreram poucas evoluções que podem ser delimitadas por meio das versões especificadas pelo W3C (World Wide Web Consortium): 2.0 em 1995; 3.2 em 1997 e 4.01 em 1999 (com errata publicada em 2001). Paralelamente ao HTML, o W3C investiu na XHTML (extensible HyperText Markup Language), que combina HTML com regras de XML (extensible Markup Language), passando a indicar este como sucessor do HTML. Suas versões foram: 1.0, lançada em 2000; 1.1, lançada em 2001 e 2.0, lançada em Sem significativas evoluções no HTML e com a necessidade de mais produtividade e possibilidades no desenvolvimento de aplicações ricas para internet (RIA), Mozilla Foundation, Opera Software ASA e Apple criaram em 2004 o grupo WHATWG (Web Hypertext Application Technology Working Group), sem ligação com o W3C. Um dos principais objetivos dessa instituição era a modernização do HTML. Em 2007 o W3C inicia o processo de especificação do HTML 5, que prevê grandes avanços em relação aos seus antecessores ao ponto de ser apontado por alguns como um rival à altura do Adobe Flash, do Microsoft Silverlight e do Java FX. Se foi por coincidência ou por sofrer certa pressão pela criação do WHATWG, não se sabe, mas o início dos trabalhos para um novo e poderoso HTML passou a ser uma luz no fim do túnel para os desenvolvedores que achavam que havia algo de errado em ter que usar tantas tecnologias diferentes para se construir sistemas RIA. Até o fechamento desta edição, a versão mais recente do HTML5 era a Working Draft 19 October Está programada a versão Candidate Recommendation para 2012 e a especificação final está prevista para 2022 (isso mesmo, daqui a mais de 10 anos). Em outubro, o próprio W3C recomendou que ainda não se usasse o HTML5 em produção. Talvez seja uma recomendação a se seguir, mas ao verificar como a indústria tem adotado essa tecnologia, fica difícil ignorá-la e não começar os estudos nela desde já. A partir de 2009 vários exemplos de uso de HTML 5 são encontrados na internet e vários browsers lançam versões capazes de interpretálo. iphone é o principal protagonista dos produtos que adotaram o HTML 5 em produção. Em 2010 sites de grandes empresas anunciam a adoção de HTML 5 e eventos tecnológicos discutem e elogiam essa tecnologia. O que se falou sobre o HTML 5 em 2010? Será melhor eu esperar 2022 para investir (estudo e/ou dinheiro) em HTML5?, pode se perguntar o leitor. Para melhor ajudar a responder essa dúvida, pesquisou-se algumas notícias recentes sobre essa tecnologia. Bem ou mal, falem de mim. Tal frase poderia ser dita pelo HTML5 se ele fosse uma pessoa. Notícias boas, não tão boas, críticas e relatos de testes foram numerosos acerca dessa tecnologia no último ano. A linha do tempo apresenta algumas delas /2010: Youtube ganha versão em HTML5 (fonte: youtube-global.blogspot.com); Vimeo introduz suporte para HTML5 em todos os seus vídeos (fonte: vimeo.com/blog). 04/2010: Celular da LG terá navegador HTML5 (fonte: tecnologia.terra.com. br); Lançado plugin HTML 5 para MS Visual Studio 2008 e 2010 (fonte: visualstudiogallery.msdn.microsoft.com); Adobe não quer mais adaptar Flash para o iphone (fonte: mikechambers.com/blog). 05/2010: IE9 trocará Flash por HTML5 (fonte: blogs.msdn.com); Adobe anuncia que DreamWeaver CS5 terá suporte a HTML 5 (fonte: adobe.com). 06/2010: IE 9 Preview 3 com suporte a várias features HTML 5 (fonte: blogs. msdn.com); HTML5 pode substituir aplicativos para Smartphone, diz Opera (fonte: 07/2010: Intellij Idea lançado com suporte a HTML 5 (fonte: www. jetbrains.com); 08/2010: IE 9 Preview 4 com suporte a mais features HTML 5 (fonte: blogs. msdn.com); Yahoo!Mail se converte ao HTML5 (fonte: Apple x Adobe: seis motivos para que o Flash sobreviva na web (fonte: computerworld.com); HTML5 levanta preocupações de segurança (fonte: computerworld.com). 10/2010: 54% dos vídeos publicados na internet já estão disponíveis em formato HTML5 (fonte: blog.mefeedia.com); O HTML5 está ganhando cada vez mais espaço (fonte: infoq.com); Adobe mostra ferramenta de conversão de Flash para HTML5 (fonte: blogs.adobe.com); Google Developer Day destaca os avanços do HTML5 nos navegadores (fonte: g1.globo.com); Google diz que com HTML5 os aplicativos vão ser mais poderosos (fonte: oficinadanet.com.br); W3C recomenda não usar HTML5 ainda (fonte: infoworld.com). 11/2010: NetBeans 7 Beta lançado com suporte a HTML 5 (fonte: netbeans. org); Adobe: HTML5 gasta tanta ou mais bateria que Flash (fonte: 12/2010: Netflix divulga nota sobre experiências com HTML5 (fonte: techblog.netflix.com); Para Flipborad o futuro é HTML5, RSS e as novas publicidades online (fonte: money.cnn.com); Katalabs lança browser HTML 5 para ipad and iphone (fonte: hypergridbusiness.com); Pesquisa da NetCraft conclui que cerca de 1% dos sites já usa HTML5 (fonte: news.netcraft.com); Google lança e-book em HTML5 (fonte: goodereader.com). 7

3 : : : : Novas funcionalidades A principal promessa dessa nova versão do HTML é reduzir a dependência de Framworks Javscript como Jquery, Prototype, Ext etc. (o javscript frameworks hell ) e de tecnologias de terceiros que dependem de plugins como Adobe Flash, Microsoft Silverlight e Java FX (o plugins hell ). Para cumprir essa missão, as principais novidades do HTML 5 são novas APIs para desenvolvimento de recursos gráficos, controle embutido de conteúdo multimídia sem necessidade de plugins, possibilidade de acessos off-line padronizados e maior facilidade na depuração de erros. Há ainda um melhor dispositivo para alcançar a Web Semântica, proposta por Tim Berners-Lee. Nas listagens deste artigo e em exemplos que o leitor achar na internet, vai reparar que o HTML5 possui uma característica bem diferente do XTHML: os atributos das tags não precisam ter valores, sendo suficiente apenas sua presença. A seguir, alguns exemplos dessas novas funcionalidades, porém nem todos com código-fonte, o que deixaria este artigo deveras extenso. Manipulação de gráficos (CANVAS) Listagem 1. Exemplo de Canvas com HTML 5. //Listagem 1. Exemplo de Canvas com HTML 5. <canvas id= canvas-1 width= 300 height= 150 >Sem supporte a Canvas!</canvas> <canvas id= canvas-2 width= 300 height= 150 >Sem supporte a Canvas!</canvas> <script> (function(){ var elem = document.getelementbyid( canvas-1 ); var context = elem.getcontext( 2d ); context.fillstyle = #037 ; // preenchimento context.strokestyle = #f00 ; // borda context.linewidth = 4; // borda context.shadowblur = 10; // sombra context.shadowcolor = black ; // sombra context.beginpath(); // transformando o polígono... context.moveto(10, 10); context.lineto(100, 10); context.lineto(10, 100); context.lineto(10, 10); context.fill(); context.stroke(); context.closepath(); })(); (function(){ var elem = document.getelementbyid( canvas-2 ); var context = elem.getcontext( 2d ); context.fillstyle = #037 ; context.font = italic 30px sans-serif ; context.textbaseline = top ; context.filltext ( Zé Buduia!, 0, 0); // a figura será criada a partir // de um texto context.font = bold 30px sans-serif ; context.stroketext( Maria Bigodenha!, 0, 50); })(); </script> Antes do HTML5 para renderizar gráficos numa página, as principais opções sem a necessidade de plugins como Flash e Cia era fazer verdadeiras acrobacias com CSS e imagens. O HTML permite renderizar e manipular gráficos via javascript através de novas APIs. No HTML5 isso é chamado de CANVAS. As figuras geradas são interpretadas pelos browsers como imagens mesmo, como as renderizadas pela velha tag <img>. Aliás, este recurso permite renderirar polígonos com bordas arredondadas facilmente, algo que exige acrobacias com imagens e CSS no HTML atual. Na Listagem 1 é possível ver alguns exemplos simples de uso dessa nova funcionalidade com o resultado na figura 1. Figura 1. Canvas do HTML 5 com o código da Listagem 1 (Firefox 3.5 e Chrome 7.0). Esse foi um exemplo bem simples, mas com CANVAS é possível renderizar gráficos estatísticos (barras, pizza etc.) e até mesmo fazer animações em 2D e 3D (vide seção de sites com HTML 5 hardcore ). Para trabalhar com três dimensões, é necessário o uso de APIs como o O3D da Google e o WebGL, do WebGl Working Group, e o browser deverá possuir o mecanismo Webkit, que é utilizado, por exemplo, pelo Google Chrome. Tags de formulário mais poderosas Listagem 2. Tags de formulário do HTML 5. //Listagem 2. Tags de formulário do HTML 5. <form id= form1 > <fieldset> <legend>dados do Cliente</legend> <p> <label for=nome>nome</label> <input id=nome name=nome type=text placeholder= Nome completo required autofocus> </p> <p> <label for= > </label> <input id= name= type= placeholder= exemplo@dominio.com required> </p> <p> <label for=telefone>telefone</label> <input id=telefone name=telefone type=tel placeholder= Ex required> </p> <p> <label for=endereco>endereço</label><br/> <textarea id=endereco name=endereco rows=5 required placeholder= Informe o endereço detalhado ></textarea> </p> </fieldset> </form> Os mecanismos de criação de formulários é um dos principais problemas do HTML atual. É quase indispensável o uso de re- 8

4 cursos extra HTML para formulários com recursos como texto temporário, foco automático e obrigatoriedade. Com a versão 5, as tags de formulários estão com mais e melhores atributos. Na Listagem 2 há um pequeno exemplo de uso de algumas delas e na figura 2 é possível ver o formulário renderizado no browser. Os textos em cinza nos campos somem automaticamente quando ficam com o foco e a caixa de endereço pode ser redimensionada com uso do mouse. Ainda, o campo nome receberá o foco automaticamente quando a página for carregada. Tudo isso apenas com os atributos das tags. Local: lembra o uso de Cookies pela abordagem chave x valor, porém bem mais intenso. Informações definidas pelo programador ficam armazenadas localmente no cliente. Mesmo que o browser seja fechado, ao ser executado novamente, terá acesso a esses dados. Session: muito parecido com o Local, só que, como o nome sugere, mantém os dados disponíveis para o cliente seguindo a filosofia se sessão : Caso o browser seja fechado e, ao ser reaberto, não terá mais acesso a esses dados. Database (ou Web SQL Database): usa uma linguagem com sintaxe que lembra muito o SQL para consulta, alteração e exclusão de dados armazenados localmente. Aqui há os conceitos de tabelas e transações, como em SGBDs. Independentemente do tipo de armazenamento usado, seria possível deixar disponível off-line no cliente, por exemplo, as fotos de um álbum on-line ou informações sobre o histórico escolar de um sistema acadêmico on-line. Tags mais semânticas Figura 2. Formulário gerado com tags do HTML 5 (Chrome 7.0). Aplicações Off-line Uma das novidades mais poderosas do novo HTML é a possibilidade de trabalhar aplicações off-line de maneira padronizada e poderosa. Atualmente, temos que confiar no cache dos navegadores (tag <meta>) e servidores de Proxy e nos Cookies, mas nada realmente padronizado. A nova ideia é poder navegar por um site total ou parcialmente, mesmo estando desconectado de uma rede após um primeiro acesso. Para que recursos como páginas HTML, arquivos JS e CSS fiquem disponíveis off-line em um novo acesso do cliente, a HTML5 define um padrão de arquivo chamado cache manifest, no qual tais arquivos são informados. Um exemplo desse tipo de arquivo está na Listagem 3. Nesse exemplo, o arquivo alternativo-pagina2.html é uma versão alternativa para pagina2.html que deverá ser carregada quando a aplicação estiver rodando off-line. O número de tags do HTML 4.01 é grande, mas ainda insuficiente para manter uma boa semântica nas páginas. Uma pesquisa feita em mais de 1 milhão de páginas por um dos criadores da HTML5, Ian Hickson, mostrou quais os nomes de classes CSS eram mais usados na internet. A figura 3 contém o resultado dessa pesquisa. Baseado nessa pesquisa, teve-se a ideia de propor tags mais dinâmicas para a linguagem, para evitar o divs hell, onde existem inúmeras <div> umas dentro das outras. As novas tags para melhor organização de conteúdo são: <header>, <article>, <section>, <nav>, <aside> e <footer>. Considerando-se ainda que muitas vezes <div> era usado pra renderizar um polígono e que o HTML5 tem o CANVAS, tem-se a possibilidade de uma grande redução ou até eliminação de divs hell. Listagem 3. Exemplo de arquivo cache manifest do HTML 5. CACHE MANIFEST CACHE: index.html pagina1.html FALLBACK: pagina2.html alternativa-pagina2.html NETWORK: * # VERSION 1 Muitas vezes não são apenas arquivos que se deseja que fique disponível off-line para o cliente e sim dados. Com a nova versão será possível trabalhar com três tipos de armazenamento de dados: Local, Session e Database. Figura 3. Nomes de classes CSS mais usadas segundo pesquisa de Ian Hickson (fonte: Multimídia sem plugins Nas listagens 5 e 6 há exemplos de código que faz o browser renderizar players de vídeo e áudio, respectivamente, sem necessidade de plugins. O corpo da tag só será renderizado se o browser não conseguir interpretar essas tags. O atributo controls indica que serão renderizados os controles como play e pause e pode 9

5 : : : : ser escrito assim, sem valores mesmo. Os resultados dessas tags estão nas figuras 4 e 5, respectivamente. A aparência do player pode variar entre os browsers. jogo Quake II. Na verdade ele foi feito em GWT e compilado para código HTML5. O jogo foi batizado de GWTQuake. Na figura 6 há um screenshot deste jogo. Há instruções de como jogálo em Listagem 4. Tag para player de vídeo em HTML 5. <video src= video_mizuko.ogg controls width= 700 height= 340 >Seu navegador não entende HTML5.</video> Figura 6. GWTQuake da Google. O site benjoffe.com possui vários exemplos de implementações avançadas de HTML5, dentre elas, os jogos 3D Walker, ao estilo Duken Nuken (figura 7) e Torus, ao estilo Tetris (figura 8). Ambos podem ser jogados apenas com o uso do teclado. Figura 4. Player de vídeo gerado por HTML 5 (Chrome 8). Listagem 5. Tag para player de áudio em HTML 5. <audio src= musica_makoto.ogg controls>seu navegador não entende HTML5.</audio> Figura 5. Player de áudio gerado por HTML 5 (Firefox 3.5). Sem o HTML 5 era necessário usar algum plugin. Para embutir um vídeo do Youtube.com, por exemplo, era necessário um código como da Listagem 6 e ter o Flash Player Plugin instalado no browser. Figura 7. Jogo 3D Walker escrito em HTML5 + Javascript. Listagem 7. Exemplo de uso de vídeo em HTML <object width= 700 height= 340 ><param name= movie value= ></param><param name= allowfullscreen value= true ></param><embed src= type= application/x-shockwaveflash allowscriptaccess= always allowfullscreen= true width= 700 height= 340 ></embed></object> Sites com HTML 5 hardcore Jogos Em abril, a Google divulgou que criou uma versão em HTML do Figura 8. Jogo Torus escrito em HTML5 + Javascript. 10

6 Objetos embutidos dentro de outros A página de Paul Rouget no mozilla.com possui vários exemplos avançados de HTML5, dentre os quais pode-se destacar o Dynamic Content Injection no qual se pode escolher por uma figura, um texto e até um filme como parte de outra animação na página. Vide figura 9. O portfólio completo de aplicações em HTML5 está em people.mozilla.com/~prouget/demos. Animações 3D Figura 9. Animações dinâmicas com troca de conteúdo em HTML5. O site japonês gyu.que.jp possui excelentes exemplos implementados em HTML5 e Javascript, em 3D. Vide na figura 10 um dos exemplos (encontrado em gyu.que.jp/jscloth/miku.html). A garota na imagem pode girar em 360º e ainda mexe o braço ao clique. No Google Chrome 8 essa aplicação funciona muito bem, mas no Firefox 3.6 a performance fica a desejar. recentes em desenvolvimento e não com as versões em produção dos browsers. Resultados detalhados desse teste estão disponíveis em Funcionalidade Browsers Mobile IE 9 Beta Preview 9 Firefox 4 Beta 6 Chrome Opera alpha Safari attributes 100% 100% 100% 100% 100% audio 100% 100% 100% 100% 100% canvas 89,55% 75,32% 80,6% 85,35% 86,16% getelementsbyclassname 83,33% 94,12% 100% 94,4% 88,89% foreigncontent 100% 100% 100% 0% 10% video 100% 71,43% 92,86% 78,57% 71,43% xhtml5 100% 85,71% 42,86% 100% 42,86% Média 96,1% 89,5% 88,0% 79,8% 71,3% Tabela 1. Comparação entre o suporte a HTML 5 dos browsers desktop, segundo testes da W3C (02/11/2010). Na análise, o MS IE9 Beta Preview 9 teve desempenho de 100% de compatibilidade em cinco dos sete testes realizados com compatibilidade média de 96,1%. Em segundo lugar, apareceu o Firefox (89,5%)) seguido por Chrome (88%), Opera (79,8%) e Safari (71,3%). O W3C já está atualizando essa tabela, realizando uma nova bateria de testes ainda não concluída até o fechamento desta edição. A tabela 2 possui uma comparação resumida das funcionalidades HTML5 que os principais browsers para dispositivos móveis implementam total ou parcialmente. Essa tabela é resultado dos testes feitos pelo site caniuse.com e possui uma classificação diferente das funcionalidades em relação à do W3C. Funcionalidade Android Browser ios Safari Opera Mobile Opera Mini Contenteditable attribute 0% 0% 100% 0% Figura 10. Miniaplicativo 3D escrito em HTML5 + Javascript. O site effectgames.com possui uma lista de paisagens animadas implementadas em HTML5 e Javascript, em 3D. Na figura 11 há uma pequena coleção delas. O site com essas e outras paisagens animadas é Drag and Drop 100% 0% 0% 0% Canvas 100% 0% 0% 0% getelementsbyclassname 100% 100% 100% 100% Offline web applications 100% 100% 100% 100% audio 100% 100% 0% 0% video 100% 100% 0% 0% New semantic elements 100% 100% 33,5% 33,5% Session history management 100% 100% 0% 0% HTML5 form 0% 13,5% 100% 0% Form validation 0% 0% 100% 0% Figura 11. Paisagens 3D animadas feitas com HTML5 + Javascript. Que browsers já entendem HTML 5? Browsers Desktop A tabela 1 possui uma comparação resumida das funcionalidades HTML5 que os principais browsers implementam total ou parcialmente. Essa tabela é resultado dos testes feitos pelo próprio W3C e divulgados em 2 de novembro. Os testes foram com as versões mais Média 72,7% 55,8% 48,5% 21,2% Tabela 2. Comparação entre o suporte a HTML 5 dos browsers mobile, segundo testes da caniuse.com (24/11/2010). Nessa análise, com base em dados até 24 de novembro, o Android foi o mais bem colocado, dando suporte a 72,7% das funcionalidades listadas, seguido por Opera (48,5%), depois por ios Safari (55,8%) e, por fim, Opera Mini (21,2%). 11

7 : : : : Apple x Flash: relação conturbada No site oficial da Apple é possível encontrar algumas notícias que demonstram que a Apple não quer mais saber do Flash em seus iphone e ipad. Talvez a página que mais retrate isso seja hotnews/thoughts-on-flash (conteúdo assinado pelo próprio Steve Jobs), com fortes críticas ao Flash. Não é difícil achar outras páginas na internet com declarações de Jobs criticando fortemente o Flash com declarações como Flash é coisa do passado ou O Flash dá tantos problemas. E ninguém vai mais usá-lo, ou ainda que o Flash devora recursos da CPU. HTML5 é apontado pela Apple como a tecnologia certa para substituir o Flash. Em abril de 2010 a Adobe declarou que não vai adaptar o Flash para iphone. O anúncio foi feito pelo gerente de produto da Adobe, Mike Chambers, em um texto no seu blog oficial ( com/blog/2010/04/20/on-adobe-flash-cs5-and-iphone-applications). A Apple, por meio de seu porta-voz Trudy Muller, afirmou que os padrões aceitos pelo iphone e pelo ipad são abertos, como o HTML5, CSS, JavaScript e H.264 para vídeo, em oposição à Adobe que mantém um padrão fechado e proprietário com o Flash. Outros motivos que a Apple alega para preterir o Flash são: confiabilidade, segurança e performance; autonomia de bateria; incompatibilidade de touch com projetos em Flash; e finalmente, a barreira que uma ferramenta cross-platform poderia proporcionar no desenvolvimento e evolução de apps para a plataforma móvel da Apple. Apesar das críticas feitas pela Apple sobre o consumo de recursos do Flash, a Adobe, em um estudo divulgado em com/ /adobe-on-macbook-air-html5-flash-battery-problems-a-false-argument, afirma que HTML5 gasta tanta ou mais bateria que Flash. Flash sim, mas vestido de HTML5 Como os novos produtos da Apple já executam o HTML5, uma futura opção para abrir vídeos feitos em Flash nesses produtos será usar o conversor de Flash para HTML5 criado pela própria Adobe, o Wallaby. Até o fechamento desta edição, não havia sido lançado ainda, porém é possível encontrar vídeos com demonstrações facilmente na internet. Em comum, todas essas tecnologias têm a característica de usar o HTML como mero instrumento de invocação para seus respectivos plugins, pois vendem a ideia de que estão anos luz à frente do HTML na criação de RIA. E estão... mas do HTML E o ponto em comum entre elas é justamente seu ponto fraco: a necessidade de plugins. Isso provoca incompatibilidades e a inevitável necessidade de instalações e atualizações desses plugins nos browsers. A novidade é que o HTML5 oferece recursos antes só possíveis com algumas dessas tecnologias. Isso favorece uma tremenda padronização na criação de sites dos mais diversos tipos e favorece a criação de uma enorme comunidade de profissionais focados em uma única tecnologia. Com uma HTML mais poderosa, talvez seja possível dispensar o uso de tecnologias de terceiros, o que pode baratear a criação e ampliação de parques tecnológicos de empresas públicas e privadas, pois HTML não é fechada nem proprietária. Resta a essas tecnologias oferecer funcionalidades extremamente modernas e além do que o HTML5 promete oferecer para que o investimento nelas compense. Todavia o uso intenso dessas tecnologias ainda pode continuar por muito tempo, pois a adoção de HTML5 vai depender da atualização dos browsers em desktops e dispositivos móveis o que não será rápido em muitos lugares. JQuery, Prototype, Ext, GWT etc. como ficam? Essas tecnologias podem se tornar até mais fortes e ganhar mais espaço no desenvolvimento de RIA. Isso porque o HTML5 favorece mais ainda o uso de Javascript, que é o meio de usar a nova API HTML. E muitas das funcionalidades oferecidas por esses frameworks Javascript são nativas do HTML5, logo seus códigos podem ficar menores e mais eficientes. Todavia, para que a produtividade deles esteja à altura daquela que se tem com Flex, Silverlight e Java Fx, é necessário uma evolução mais aguda no suporte a Javascript das IDEs. É importante ainda destacar que o Javascript é a principal ferramenta na implementação de soluções de compatibilidade do HTML5 em browsers sem suporte a ele. Assim, os scripts podem assumir o papel que o HTML5 assumiria caso pudesse entrar em ação. IDEs para HTML5 Já existe um bom número de IDEs que prometem suporte para HTML5. Dentre elas estão: Flash, Flex, Silverlight e Java FX como ficam? A tecnologia Flash foi um grande divisor de águas no desenvolvimento de sistemas Web. Antes dele, as melhores alternativas para multimídia em páginas HTML eram ActiveX e Applets, ambos com restrições e limitações que nunca os permitiram emplacar. Assim, a partir 1996 o Flash passou a ser sinônimo de multimídia fácil de desenvolver (ótima IDE, abordagem RAD) e fácil de usar (disponibilização de plugins para quase todos os browsers). Sua popularização e volume de uso foram tão grandes que chegaram a surgir linguagens de programação que compilavam para Flash, como o Adobe Flex e o Open Lazlo. Como o Flex e o Flash são da mesma empresa, a Adobe, não são concorrentes e sim complementares. Mas foram surgindo algumas tecnologias candidatas à ameaça ao reinado do Flash, como Microsoft Silverlight e Java FX. IDE NetBeans 7 Beta Eclipse 3.5+ Microsoft Visual Studio 2008 e 2010 Adobe Dreamweaver CS5 WEB Premium Bespin CoffeCup The HTML Editor 2010 SE Sproutcore TopStyle Observações Suporte a HTML5, mas sem editor Visual (WYSIWYG). É necessária a instalação do plugin Aptana Studio 3 Beta. Também possibilita o desenvolvimento Ruby on Rails. É necessária a instalação do plugin HTML5 Intellisense. Editor Visual (WYSIWYG). Editor on-line de HTML5 com um console para execução de linhas de comando. Foi feito usando HTML5. Ferramenta para Windows com custo de U$49,00. IDE estilo linhas de comando. Ferramenta para Windows com custo de U$79, Tabela 3. Algumas das IDEs com suporte a HTML5.

8 Considerações finais Este artigo apresentou o HTML5, sua motivação, suas características, notícias sobre ele e exemplos de uso. Como foi apresentado, essa tecnologia ainda está em desenvolvimento, porém já possui bom nível de compatibilidade com os principais navegadores. Talvez ainda seja cedo pra usar essa tecnologia em produção como afirma o próprio W3C, mas, por ter o Google e Apple como grandes incentivadores e usuários dessa nova tecnologia, encoraja-se o leitor a investir no conhecimento dela, a fim de estar na vanguarda de uma nova etapa da história do desenvolvimento de sites. Referências Especificação HTML5 do W3C: Referências de tags HTML5: Vários exemplos de uso de HTML5 com código-fonte: html5demos.com people.mozilla.com/~prouget/demos/ Ótimos vídeos e apresentações sobre HTML5: Testador on-line das funcionalidades HTML5 que seu browser implementa: 13