Html5 Final

Universidade Estadual de Maring Centro de Tecnologia Departamento de Informtica

Estudo de Viabilidade do HTML5 para Desenvolvimento Web Daniel Fuverki Hey

Maring 2010

Universidade Estadual de Maring Centro de Tecnologia Departamento de Informtica

Estudo de Viabilidade do HTML5 para Desenvolvimento Web Daniel Fuverki Hey

Trabalho de Concluso de Curso apresentado ao Curso de Cincia da Computao, do Centro de Tecnologia, da Universidade Estadual de Maring. Orientador: Prof. Msc. Munif Gebara Junior

Maring 2010

Daniel Fuverki Hey

Estudo de Viabilidade do HTML5 para Desenvolvimento Web

Este exemplar corresponde redao final da monografia aprovada como requisito parcial para obteno do grau de Bacharel em Cincia da Computao da Universidade Estadual de Maring, pela Banca Examinadora formada pelos seguintes membros:

________________________________________ Orientador: Prof. Msc. Munif Gebara Junior Departamento de Informtica, CTC, DIN

________________________________________ Prof. Msc. Flvio Arnaldo Braga da Silva Departamento de Informtica, CTC, DIN

________________________________________ Prof. Msc. Gcen Dacome de Marchi Departamento de Informtica, CTC, DIN

Maring 2010

AGRADECIMENTOS

Agradeo primeiramente a Deus, que est comigo em todos os momentos, me d foras, me concede luz e todas as oportunidades para evoluir nesta vida. Agradeo em especial aos queridos mentores, principalmente Lia, pelo carinho, ateno, preocupao, conselhos, presteza, entre outros diversos aspectos que auxiliam minha jornada. Agradeo minha famlia, pais e irmos, que me apoiaram em meus anos de estudo e forneceram suporte no dia-a-dia. Agradeo Regina, minha namorada e companheira de todas as horas, presente durante minhas conquistas e dificuldades enquanto acadmico, pelo amor que me motiva. Agradeo ao Professor Munif pela orientao deste trabalho, por suas sugestes, correes e constante troca de idias que fomentaram este estudo. Agradeo aos amigos da Incubadora Tecnolgica Maring e colegas diversos, pela confiana em meu trabalho, pelas oportunidades de desenvolvimento e pesquisa que enriqueceram minha experincia como desenvolvedor e estudante. Agradeo aos colegas de universidade, onde cabe citar: Leonardo, Alexandre, Cssio, Paula, Roberson, Menegazzo, talo, Luiz, Hissae, Rubens, e a muitos outros grandes companheiros que conheci e que estiveram junto comigo durante as horas de estudo, de diverso e em situaes adversas. Agradeo enfim a todos os que direta e indiretamente contriburam e me apoiaram desde a elaborao deste trabalho, at a obteno desta graduao.

Muito obrigado.

RESUMO

HTML5 est sendo desenvolvida sob expectativas de uma linguagem de marcao forte, trazendo um conjunto de novos elementos que visam facilitar a estruturao e desenvolvimento front-end, combinando tecnologias e agregando fatores como acessibilidade, compatibilidade, expressividade grfica e usabilidade para dispositivos que permitem acesso a web. Uma vez que a falta de mecanismos nativos HTML trouxe a necessidade do uso de tecnologias proprietrias, plausvel considerar uma anlise de viabilidade no desenvolvimento de futuras aplicaes, relevando as diferentes situaes para emprego de ferramentas de programao mais adequadas. Este estudo aborda os atributos gerais da linguagem HTML5, descrevendo o funcionamento dos novos elementos estruturais de marcao, contedo multimdia, e aplicaes disponveis nos navegadores. Atravs da anlise dos motores de renderizao web e caractersticas de aplicabilidade de cada ferramenta, realiza-se uma avaliao comparativa das tecnologias atuais, de modo a determinar pontos crticos em projetos web, buscando diferentes alternativas de implementao afim de realizar uma breve anlise com prs e contras das linguagens disponveis, instigando desenvolvedores a considerar HTML5 em futuros projetos.

Palavras-chave: HTML5, interoperabilidade, viabilidade

ABSTRACT

HTML5 is being developed under expectations of a strong markup language, bringing a set of new elements to facilitate the structuring and front-end development, combining technologies and adding factors such as accessibility, compatibility, graphical expressiveness and usability in devices that allow web access. Once the lack of native HTML mechanisms brought the need to use proprietary technologies, it is plausible to consider a feasibility study on future applications development, checking the different situations for a more appropriate use of programming tools. This study covers the main HTML5 language attributes, describing how the new structural markup, multimedia content and applications works on available browsers. By analyzing the web rendering engines and applicability of each tool, a comparative assessment of current technologies is done, in order to determine critical points in web projects, seeking different alternatives of implementation and aiming to conduct a brief review with pros and cons of the available technologies, encouraging developers to consider HTML5 benefits in future projects.

Keywords: HTML5, interoperability, sustainability

LISTA DE FIGURAS

Figura 1 Tipos de DTD (Document Type Definition) HTML ..............................................................................16 Figura 2 Estrutura bsica de um documento HTML5, com declarao Doctype ..............................................16 Figura 3 Sintaxe do elemento hgroup demonstrando nveis em ttulos ...........................................................18 Figura 4 Sintaxe do elemento section, ilustrando a diviso de sees .............................................................18 Figura 5 Uso do elemento de marcao article ..............................................................................................19 Figura 6 Marcao footer .............................................................................................................................20 Figura 7 Aplicao do elemento de marcao HTML5 nav .............................................................................20 Figura 8 Demonstrativo da marcao HTML5 aside relacionando itens ..........................................................21 Figura 9 - Elementos de marcao estruturais HTML5 ......................................................................................21 Figura 10 Sintaxe dos elementos figure e figcaption ......................................................................................22 Figura 11 Sintaxe HTML5 para lista de definies ..........................................................................................23 Figura 12 Aplicao do elemento meter com uso parmetros delimitadores min e max .................................24 Figura 13 Utilizao do elemento time na representao de datas ................................................................25 Figura 14 - Codificao utilizada em HTML 4.01 (1) e HTML5 (2).......................................................................25 Figura 15 - Dimenses e coordenadas em canvas .............................................................................................28 Figura 16 Utilizao de propriedade do elemento canvas na criao de imagem............................................28 Figura 17 Marcao udio e compatibilidade com formatos suportados ........................................................30 Figura 18 Comparativo de cdigos utilizados para insero de elementos de vdeo na web ............................31 Figura 19 Compatibilidade da API Geolocation entre os navegadores ............................................................34 Figura 20 - Compatibilidade dos navegadores com HTML5 ...............................................................................61

LISTA DE TABELAS

Tabela 1 - Codecs de udio suportados atualmente pelos navegadores ............................................................30 Tabela 2 - Previso de suporte a codecs de vdeo em navegadores ...................................................................32 Tabela 3 - Utilizao dos motores web nos aplicativos......................................................................................43 Tabela 4 - Legenda de compatibilidade entre os motores web ..........................................................................44 Tabela 5 - Compatibilidade dos elementos estruturais HTML5 por verso de motor web ...................................45 Tabela 6 - Suporte a APIs HTML5 ....................................................................................................................46 Tabela 7 - Comparativo HTML5 vs Flex vs Silverlight .........................................................................................58

LISTA DE ABREVIATURAS E SIGLAS

AAC ASP AIX AJAX API BSD CSS DHTML DRM DOM DTD GIF GPL HTML HTTP IE IIS JNLP JRE JSON LGPL MathML MPL MVC

- Advanced Audio Coding - Active Server Page - Advanced Interactive eXecutive - Asynchronous Javascript And XML - Application Programming Interface - Berkeley Software Distribution - Cascading Style Sheets - Dynamic HTML - Digital Rights Management - Document Object Model - Document Type Definiton - Graphics Interchange Format - General Public License - Hyper Text Markup Language - Hypertext Transfer Protocol - Internet Explorer - Internet Information Services - Java Network Launching Protocol - Java Runtime Environment - JavaScript Object Notation - Lesser General Public License - Mathematical Markup Language - Mozilla Public License - Model-view-controller

MXML PHP PNG RDF REST RIA RTE RTMP RTMFP SQL SVG SWF URL XAML XHTML XML XPath XSLT W3C WAI-ARIA WGS84 WML

- Minimal XML - PHP Hypertext Preprocessor - Portable Network Graphics - Resource Description Framework - Representational State Transfer - Rich Internet Application - Rich Text Editing - Real Time Messaging Protocol - Real Time Messaging Protocol Flow - Structured Query Language - Scalable Vectorial Graphics - Shockwave Flash - Uniform Resource Locator - eXtensible Application Markup Language - eXtensible Hypertext Markup Language - eXtensible Markup Language - XML Path Language - eXtensible Stylesheet Language for Transformation - World Wide Web Consortium - Web Accessibility Initiative - Accessible Rich Internet Applications - World Geodetic System - Wireless Markup Language

SUMRIO

INTRODUO ........................................................................................................... 13 ESTUDO DAS CARACTERSTICAS GERAIS HTML5 E APRESENTAO DOS ELEMENTOS

ESTRUTURAIS, DE CONTEDO E SEMNTICOS .................................................................... 152.1 2.2 CARACTERSTICAS GERAIS ......................................................................................................15 ELEMENTOS ESTRUTURAIS .....................................................................................................16

2.2.1 Elemento header ..................................................................................................................................17 2.2.2 Elemento hgroup ..................................................................................................................................17 2.2.3 Elemento section ..................................................................................................................................18 2.2.4 Elemento article ...................................................................................................................................19 2.2.5 Elemento footer....................................................................................................................................19 2.2.6 Elemento nav .......................................................................................................................................20 2.2.7 Elemento aside .....................................................................................................................................21

ELEMENTOS DE CONTEDO....................................................................................................22

2.3.1 Elemento figure ....................................................................................................................................22 2.3.2 Elemento dl ..........................................................................................................................................22 2.3.3 Elemento mark .....................................................................................................................................23 2.3.4 Elemento meter ....................................................................................................................................23 2.3.5 Elemento time ......................................................................................................................................24 2.3.6 Elementos diversos aprimorados ..........................................................................................................25

APRESENTAO DOS ELEMENTOS DE MARCAO MULTIMDIA............................. 27ELEMENTOS DE MARCAO MULTIMDA...............................................................................27

3.1.1 Elemento canvas ..................................................................................................................................27 3.1.2 Elemento audio ....................................................................................................................................29 3.1.3 Elemento video .....................................................................................................................................31 3.1.4 Elemento geolocation ...........................................................................................................................33 3.1.5 Elemento drag-and-drop.......................................................................................................................34

ANLISE DE COMPATIBILIDADE DOS RECURSOS HTML5 .......................................... 36MOTORES WEB .......................................................................................................................36

4.1.1 Gecko ...................................................................................................................................................37 4.1.2 Presto...................................................................................................................................................39 4.1.3 Webkit..................................................................................................................................................39

4.1.4 Trident .................................................................................................................................................40

MOTORES JAVASCRIPT ...........................................................................................................41

4.2.1 Spidermonkey.......................................................................................................................................42 4.2.2 V8.........................................................................................................................................................42

COMPARATIVO DOS ELEMENTOS DE MOTORES WEB ............................................................43

ANLISE DE TECNOLOGIAS WEB E COMPARATIVO DE VIABILIDADE ....................... 48CARACTERSTICAS DAS TECNOLOGIAS WEB ...........................................................................................48

5.1.1 Flash .....................................................................................................................................................48 5.1.2 Flex.......................................................................................................................................................49 5.1.3 JavaFX ..................................................................................................................................................50 5.1.4 Silverlight .............................................................................................................................................50 5.1.5 HTML5..................................................................................................................................................51 5.2 COMPARATIVOS ...................................................................................................................................52

5.2.1 HTML5 x Flash ......................................................................................................................................52 5.2.2 HTML5 x Outras tecnologias..................................................................................................................58

CONCLUSES............................................................................................................ 62

REFERNCIAS ....................................................................................................................... 64 APNDICES .......................................................................................................................... 68

1 INTRODUO

O HTML (Hyper Text Markup Language) a primeira camada do desenvolvimento client-side, responsvel por organizar e formatar pginas desde que foi introduzido internet no incio de 1990. A verso final mais recente da linguagem o HTML 4.0.1, aprovada em 1999 e tal verso no dispe de meios necessrios para incorporar com sucesso recursos que permitem mais expressividade e controle multimdia, sendo que muitos sites dependem de plugins para fornecer essa funcionalidade. Atualmente, a insero de recursos de enriquecimento de informaes feita por meio de plugins nos navegadores, as alternativas utilizadas so tecnologias como o Microsoft Silverlight, Adobe Flash, Sun JavaFX e Adobe Flex que fornecem uma soluo cross-browser compatvel para incorporao de aplicativos de internet rica (RIA). Porm, no depender de plugins externos para reproduzir elementos de mdia interessante para navegabilidade dos usurios e simplificao de codificao para programadores. Uma melhora da interoperabilidade visa reduzir os custos de desenvolvimento de sites e aplicaes web, e nesse quesito surge o HTML 5, que introduz um conjunto de novos elementos que facilitam a estruturao e desenvolvimento front-end, capaz de fornecer uma informao qualitativa sobre os diferentes elementos da pgina, uma vez que a falta de mecanismos criou a necessidade do uso de outras estruturas para criao destes elementos. A proposta do HTML5 simplificar a navegabilidade do usurio ao proporcionar pginas mais leves, dinmicas e seguras, com recursos sem a necessidade de plugins instalados. A especificao objetiva maior compatibilidade e transparncia aos usurios em tarefas como a exibio de vdeos via internet, o uso offline de aplicaes web, exibio de grficos interativos e indexao mais eficiente em mecanismos de busca, alm de facilitar a compreenso e manuteno do cdigo por parte dos desenvolvedores. Com estes recursos, os navegadores passam a desempenhar um papel alm da exibio de pginas, tornando-se renderizadores de web software (cdigo executado diretamente pelo navegador) ou at mesmo ambientes de desenvolvimento.

14 Um estudo dos recursos disponveis no HTML5 visa apresentar as caractersticas e funcionamento dos elementos disponveis na atual especificao e compar-los com as alternativas encontradas at o momento para suprir o desenvolvimento de aplicaes web mais complexas, levando em considerao fatores como complexidade de desenvolvimento, acessibilidade, satisfao dos anseios do cliente e manutenibilidade do sistema. O Captulo 2 traz as caractersticas gerais HTML5 e apresenta os novos elementos estruturais, de contedo e semnticos, introduzidos com a finalidade de facilitar a compreenso e a manuteno do cdigo. Alguns elementos correspondem a uma evoluo natural do elemento com nfase semntica, outros remetem necessidade de padronizao na publicao de contedo, pois apenas criar novas estruturas no uma soluo para aumentar a atribuio de significado a blocos de informao, sendo plausvel questionar a extensibilidade, organizao e padronizao do vocabulrio utilizado para fins semnticos. No que diz respeito s Interfaces de Programao de Aplicativos (APIs) e elementos de contedo, o HTML5 objetiva processamento nativo de udio, vdeo, localizao e posicionamento geogrfico, renderizao de grficos e contedo visual. A apresentao dos elementos de marcao multimdia e dados, so tratados no Captulo 3. O Captulo 4 traz uma anlise de compatibilidade dos recursos HTML5 nos navegadores e aplicaes disponveis, discorrendo sobre o estado de funcionamento dos navegadores por meio do estudo de seus motores de renderizao web - programas que combinam um motor HTML e um motor JavaScript para realizar a interpretao da marcao de cdigos e executar as funes programadas dentro das pginas web. Para que as inovaes da linguagem se apresentem corretamente, cabe aos navegadores o reconhecimento das novas estruturas. Este captulo trata tambm da preocupao com a compatibilidade dos novos elementos e necessidade do uso de conceitos como Degradao Harmoniosa e Melhoria Progressiva, uma vez que desenvolvedores no tm o direito de impor aos visitantes qual navegador deve ser utilizado para suportar novas tecnologias. Comparativos de recursos frente s novas funcionalidades do HTML5, caractersticas das tecnologias web atuais e uma anlise dos fatores pertinentes ao mercado de software, esto dispostos no Captulo 5. Finalmente, a concluso desta monografia encontra-se no Captulo 6, discorrendo sobre as contribuies desta pesquisa para futuras anlises e viabilidade do uso do HTML5.

2 ESTUDO DAS CARACTERSTICAS GERAIS HTML5 E APRESENTAO DOS ELEMENTOS ESTRUTURAIS, DE CONTEDO E SEMNTICOS

2.1 CARACTERSTICAS GERAIS

A primeira linha declarada no cdigo de um documento HTML o doctype, um remanescente dos primrdios da web que de acordo com Wright(2009), por razes histricas necessrio para garantir que os navegadores interpretem o documento corretamente ao invs de operarem em um modo de compatibilidade especial que reproduz o comportamento dos navegadores mais antigos. De acordo com Munzlinger (2010), o HTML 4.01 especifica trs tipos de doctype: Strict, Transitional e Frameset. A declarao DTD (Document Type Definition) HTML Strict utilizada para escrever cdigo livre de misturas entre estilo e contedos; DTD HTML Transitional utilizada para elementos estruturais junto com os elementos de apresentao; DTD HTML Frameset usada quando o documento contm molduras ou frames. HTML5 renova a declarao de doctype, aprimorando a legibilidade e compreenso do cdigo, alm de levar em considerao elementos que atualmente foram removidos pois prejudicam o quesito acessibilidade em sites, tomando como exemplo as marcaes: , e .

A Figura 1 apresenta, respectivamente, as DTD HTML para HTML5(1) e HTML 4.01 Strict (2), Transitional(3) e Frameset(4).

(1) (2) (3) (4) Figura 1 Tipos de DTD (Document Type Definition) HTMLFonte W3C Recommended list of Doctype declarations

Abaixo do doctype, seguem as declaraes dos metadados dentro do elemento, que correspondem informao sobre o documento em si, como o ttulo, autor,

scripts e vinculao ou declarao de folhas de estilo (CSS). A parte estrutural fica contida dentro do elemento como demonstrado na Figura 2: Exemplo Contedo Figura 2 Estrutura bsica de um documento HTML5, com declarao DoctypeFonte o Autor

2.2 ELEMENTOS ESTRUTURAIS

Os elementos contidos dentro da marcao representam o contedo principal do documento. At ento, a diviso da informao distribuda pela nomeao de elementos atravs do atributo id, mas meramente para efeito de estilizao e organizao do

17 programador. Apesar de todas estas divises apresentarem funes diferentes dentro da pgina, `s genricos so utilizados na marcao, j que o HTML 4 no dispe de outra maneira de codific-las. Cada elemento estrutural remete a um contexto do contedo dentro da marcao, e quando bem organizado facilita a indexao correta de informao em motores de busca, hierarquizao e relevncia dos contedos dispostos em um documento ou aplicao web e tambm facilita a estilizao das estruturas.

2.2.1 Elemento header

Define o cabealho da pgina ou de uma seo. Contm informaes introdutrias para uma seo ou pgina mas tambm pode apresentar outros contedos, tais como um sumrio, uma barra de pesquisa, logotipos ou qualquer item relevante para o contexto (W3C, 2010). Um ponto importante que no h restrio ao uso de apenas um elemento, podendo existir vrios cabealhos, cada qual referente ao escopo da seo do documento onde fora declarado.

2.2.2 Elemento hgroup

Corresponde ao ttulo de uma seo e utilizado para agrupar um conjunto de elementos -, quando o ttulo tem diversos nveis, como subttulos, ttulos alternativos, ou etiquetas, como exemplificado na Figura 3. A ordem tem relao com o esboo do documento, quando ttulos so agrupados em um elemento , a correspondncia semntica ir mascarar a partir do perfil do documento, todos os itens exceto o de mais alto nvel na posio do grupo. No h necessidade de uso deste elemento para ttulos simples.

18 Ttulo aqui Subttulo do artigo Figura 3 Sintaxe do elemento hgroup demonstrando nveis em ttulosFonte o Autor

2.2.3 Elemento section

Representa um documento genrico ou seo de aplicao. Neste contexto, uma seo um agrupamento de contedos temticos, normalmente com um cabealho, possivelmente com um rodap. Segundo W3C(2010), exemplos incluem captulos de um livro, vrias pginas com guias em uma caixa de dilogo ou sees numeradas de uma tese. A pgina inicial de um site poderia ser dividida em sees para uma introduo, notcias, informaes de contato, como demonstrado na Figura 4. Por via de regra, desaconselhvel a utilizao deste elemento a menos que haja, naturalmente, uma posio no incio da seo. Tambm no aconselhvel apenas para fins de estilizao. Nvel 1 Nvel 2 Nvel 3 Figura 4 Sintaxe do elemento section, ilustrando a diviso de seesFonte o Autor

19 2.2.4 Elemento article

O elemento tem um significado semntico mais especfico, e um tipo especializado de . Para contedo relacionado a um tema, utiliza-se , e caso no haja grau semntico, utiliza-se . Representa uma seo que consiste em uma composio ou itens que pertencem a uma parte independente de um documento, pgina ou site, como uma postagem de frum, uma revista ou artigo de jornal, uma entrada de log, um comentrio enviado pelo usurio, ou qualquer outro item de contedo no dependente que se apresente completo ou faa sentido por si s (W3C,2010). Componentes deste elemento podem apresentar sees e cabealhos, como demonstrado na Figura 5: Tecnologias Web Breve introduo Adobe Flex Lanada em Maro de 2004, utilizada para...

Microsoft Silverlight Aplicao que enriquece a sua experincia na Web... Figura 5 Uso do elemento de marcao articleFonte o Autor

2.2.5 Elemento footer

Representa o rodap de um documento ou seo de um documento, como apresentado na Figura 6, podendo ser utilizado mltiplas vezes em escopos referentes ao local onde fora declarado. O elemento de rodap geralmente contm metadados sobre o fechamento de sua seo, como autor, links para documentos relacionados, os dados de copyright, etc

20 (W3C,2010). No necessariamente devem aparecer no final de uma seo, embora geralmente sejam utilizados para este fim.

copyright

contato

Figura 6 Marcao footerFonte o Autor

pagina incial

2.2.6 Elemento nav

Responde pela seo de navegao em um documento HTML5. uma seo que contm links para outros documentos ou partes dentro do documento atual (W3C,2010). Nem todos os grupos de links em uma pgina necessitam pertencer a um elemento , apenas os grupos de links de navegao principal. Em particular, comum que os rodaps tenham uma lista de links para vrias peaschave de um site, enquanto a navegabilidade entre links de contedos principais fica a cargo do elemento , como exemplificado na Figura 7.

Nav Link 1

Nav Link 2 Nav Link 3

Figura 7 Aplicao do elemento de marcao HTML5 navFonte o Autor21 2.2.7 Elemento asideRepresenta a seo de uma pgina que consiste em contedo tangencialmente relacionado com as informaes em torno do elemento , e que poderia de certa forma, ser considerado separado do contedo (W3C, 2010). Essas sees so muitas vezes dispostas como barras laterais que apresentam assuntos que no tenham foco primrio, porm estejam relacionados com o contexto e/ou contedo do artigo ou pgina apresentados. A Figura 8 demonstra trecho com sintaxe e uso do elemento. Entradas Recentes em um blog

HTML5

Flash

Silverlight

Figura 8 Demonstrativo da marcao HTML5 aside relacionando itensFonte o Autor

Uma distribuio comum dos elementos estruturais descritos ilustrada na Figura 9:

Figura 9 - Elementos de marcao estruturais HTML5Fonte HTML5-and-the-future-of-the-web, Smashing Magazine

22 2.3 ELEMENTOS DE CONTEDO

2.3.1 Elemento figure

O elemento figure representa algum fluxo de contedo, opcionalmente com uma legenda, autnomo e normalmente referenciado como uma nica unidade do contedo principal do documento. Destina-se a ser usado em conjunto com o elemento para associar legendas diagramas, ilustraes, fotografias e exemplos de cdigo (entre outras coisas), que so referenciados no contedo principal do documento, entretanto poderiam tambm estar afastados do contedo principal sem afetar o fluxo do documento, como explicado por W3C(2010). Se o contedo simplesmente relacionado e no essencial, utiliza-se , caso seja essencial mas sua posio no fluxo de contedo no seja importante, utiliza-se , como observado na Figura 10. Figura 1. Esquema de uma pgina em HTML 5 Figura 10 Sintaxe dos elementos figure e figcaptionFonte o Autor

2.3.2 Elemento dl

O elemento indica uma lista de definies constituda de zero ou mais grupos de nomes associados a valores (uma lista descritiva). Cada grupo deve ser constitudo por um ou mais nomes (elementos ), seguido por um ou mais valores (elementos )(W3C, 2010).

23 Dentro de um nico elemento , no deve haver mais de um elemento para cada nome, segundo observa-se na Figura 11. Pode ser utilizada para marcao de termos em um glossrio e igualmente apropriado para marcao de contedo com metadados, como informaes sobre o tema. Autor: Daniel F. Hey Orientador: Munif Gebara Ttulo: Html5 Figura 11 Sintaxe HTML5 para lista de definiesFonte o Autor

2.3.3 Elemento mark

Tal elemento representa uma srie de texto em um documento, marcado ou em destaque para fins de referncia, devido a sua relevncia em outro contexto. Quando usado em uma citao ou outro bloco de texto, ele indica um destaque que no estava originalmente presente, mas que foi acrescentado para chamar a ateno do leitor para uma parte do texto que no poderia ter sido considerada importante pelo autor original, e que agora apresenta maior relevncia (W3C, 2010). Um bom exemplo de como utiliz-lo, para destacar um termo procurado por um usurio. Muitos motores de busca j fazem isso utilizando outros mtodos para marcar o texto, fato que demonstra a necessidade deste novo elemento.

2.3.4 Elemento meter

O elemento representa uma medida escalar dentro de um intervalo conhecido, ou um valor fracionrio, como por exemplo a relevncia do resultado de uma consulta, ou a frao de uma populao (W3C, 2010). No representa um valor escalar do intervalo

24 arbitrrio, sendo errado usar esse recurso para um relatrio de peso ou altura, a menos que haja um valor mximo determinado. Ainda segundo W3C(2010), existem seis atributos permitidos no elemento: o primeiro elemento Value, e corresponde ao valor real que ser exibido. Caso no utilizado, o primeiro nmero dentro da marcao considerado como o valor declarado; o segundo atributo Min, o valor mnimo permitido. Se no houver nenhum atributo min,ou caso no tenha sido especificado assume-se que o mnimo zero; Max o terceiro atributo, sendo valor mximo permitido. Se o valor mximo inferior ao valor mnimo, o valor mnimo utilizado como o Max e quando no especificado o valor assumido 1, no entanto, se possvel especificar o valor com um sinal de porcentagem, o valor mximo ser de 100%; Low o quarto atributo onde considera-se a parte inferior da escala de valores. Deve ser menor ou igual ao valor do atributo high e alm disso, nos casos onde o low inferior ao valor mnimo, assume o mesmo valor que min; o quinto atributo High, a parte mais alta da escala de valores. Quando inferior ao limite de low, assume o valor de low. Para as situaes onde o valor de high seja maior do que o valor mximo, assume o mesmo valor que max; por fim, o sexto atributo possvel Optimum, este considera que o valor ideal e deve estar em algum lugar entre min e max. Pode pode ser maior do que o atributo high. A Figura 12 exemplifica a sintaxe e uso do elemento. O Natal acontecer em 30 dias! Figura 12 Aplicao do elemento meter com uso parmetros delimitadores min e maxFonte o Autor

2.3.5 Elemento time

Representa uma data precisa e/ou tempo no calendrio gregoriano. O elemento de tempo codifica as datas e os tempos modernos em uma forma legvel por mquina, de modo que, por exemplo, os agentes poderiam oferecer para adicionar um evento para o calendrio do usurio. O elemento representa um relgio de 24 horas, uma data precisa para o calendrio gregoriano prolptico, e opcionalmente, representaes de hora para fuso horrio e tempo universal coordenado (W3C, 2010). A aplicao do elemento pode ser vista na Figura 13.

O5 de Novembro de 2010 entrega da Monografia as 12h!

Figura 13 Utilizao do elemento time na representao de datasFonte o Autor

2.3.6 Elementos diversos aprimorados

Alguns elementos j existentes nas verses anteriores foram aprimorados, segundo especificado por W3C (2010), como a simplificao do elemento meta com um atributocharset que especifica codificao do documento. Para fins de compatibilidade, ambas as

sintaxes apresentadas na Figura 14 sero reconhecidas. (1) (2) Figura 14 - Codificao utilizada em HTML 4.01 (1) e HTML5 (2)Fonte o Autor

O elemento html tem um novo atributo chamado manifest usado em conjunto com a API para aplicaes web offline, responsvel pelo armazenamento de dados da aplicao. O elemento iframe tem trs novos atributos chamados sandbox, seamless, esrcdoc, mecanismos de segurana que criam um espao separado para determinado

contedo, utilizado por exemplo, para delimitar um bloco reservado para comentrio ou postagens em um blog. O elemento foi redefinido para ser mais adequado para uma lista de comandos que sejam elementos interativos, sendo passveis de utilizao exclusivamente em aplicaes web. Elemento de tipografia , representa agora letras pequenas para comentrios laterais e impresso. O elemento agora representa importncia em nvel de

26 significado ao invs de apenas nfase tipogrfica, objetivando o melhor atrelamento da nfase dada ao texto e contedo da web. Outros elementos no existiro mais no HTML5 pois sua funo fora essencialmente visual, delegando tal objetivo para declaraes CSS, como: , , ,, , , e . Apesar de considerados antigos, e ainda seroreconhecidos e renderizados para fins de formatao, mas devem ser substitudos sempre que possvel pelos elementos e , respectivamente, que indicam tambm nfase semntica do contedo em destaque. Alguns atributos foram retirados pois caram em desuso ou podem ser substitudos semanticamente por declaraes em CSS. Os principais atributos retirados so: target no elemento ; align nos elementos de , , , , , ,, entre outros; background em ; bgcolor nos elementos de tabela e no ; border em e ; cellpadding e cellspacing em ;height em e ; width nos elementos , , , e ; hspace e vspace em e ; noshade e size em .No sero permitidos na especificao HTML5, dado seu carter confuso, desnecessariamente especfico e/ou obsoleto, os elementos , , e .273 APRESENTAO DOS ELEMENTOS DE MARCAO MULTIMDIAOs elementos de marcao multimdia em HTML5 correspondem s funcionalidades no implementadas em verses anteriores da linguagem, que criaram a necessidade de aplicaes externas, uma vez que a exibio de fluxos de vdeo, udio dentre outros recursos requisitados pelos usurios no seria possvel sem tais tecnologias. Neste captulo so demonstradas as funcionalidades e fatores que tornam promissor o uso de novos elementos.3.1 ELEMENTOS DE MARCAO MULTIMDAO suporte nativo ao processamento de grficos, contedo multimdia e jogos uma demanda crescente de mercado. Dotar de capacidade de renderizao elementos de internet rica nos navegadores, traz grande ganho de acessibilidade e comodidade aos usurios, eliminando o requisito de uso de tecnologias adicionais ou complementares para visualizao de contedo.3.1.1 Elemento canvasRepresenta uma tela bitmap, que pode ser usada para desenhar grficos, fazer composies de fotos, desenvolvimento de animaes, jogos ou renderizao de imagens em tempo real (W3C,2010), atravs de auxlio de scripting, usualmente JavaScript. A inovao reside no fato de no ser necessrio o uso de plugins para utilizao de recursos 2D e futuramente 3D, embora ainda nem todos os navegadores sejam capazes de usufruir deste recurso. Como explicado por Alvarez (2010), para posicionar elementos em considera-se o eixo de coordenadas em duas dimenses, que comea no canto superior esquerdo da tela. A tela produzida ter dimenses indicadas com os atributos width e height,28 e o tamanho do espao de coordenadas no necessariamente representa o tamanho do bitmap real que o agente ir utilizar internamente ou durante o processamento, como demonstrado na Figura 15. Em monitores de alta definio, por exemplo, o agente pode usar internamente um bitmap com dois pixels por unidade de dispositivo no espao de coordenadas, de modo que a representao se mantm em alta qualidade.Figura 15 - Dimenses e coordenadas em canvasFonte Manual de Canvas do HTML 5 - criarweb.comNormalmente para um cabealho, tecnologias de nfase visual ou outros elementos utilizando estilizao CSS so mais coerentes caso a representao desejada tenha intuito em ser destacada graficamente. Usufruindo da marcao possvel desenhar atravs de codificao. Segundo Shepherd (2010), na Figura 16 so utilizadas duas variveis i e j para gerar uma cor RGB nica para cada quadrado, juntamente com javascript e outras propriedades. O canal de cor azul mantm um valor fixo e ao modificar os demais canais, possvel gerar mais tipos de cores. O resultado pode ser observado no canto direito inferior da Figura16.function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (i=0;i podem variar e esto em processo de aprimoramento, como por exemplo, a determinao do carregamento de um arquivo de udio ou percorrer o fluxo em um arquivo, permitindo iniciar o download a partir de qualquer ponto na mdia, que no seja de fato seu incio. Caso as tendncias de suporte continuem e os usurios atualizem seus navegadores para as verses mais recentes disponveis, estima-se que em um futuro prximo uma fatia31 significativa do mercado no dependa mais de tecnologias proprietrias para usufruir de recursos multimdia. Em verdade, este fenmeno j ocorre graas ao impulso para uso de elementos de marcao HTML5 propiciado por dispositivos mveis,cujos navegadores tambm tem apresentado suporte aos novos recursos.3.1.3 Elemento videoUtilizado para vdeos ou filmes, tambm pode conter imagens e udio associados. O elemento apresenta as mesmas atributos que o elemento de . Um fator de destaque inicial a simplificao do cdigo necessrio para permitir a execuo de vdeos, como demonstrado na Figura 18 onde encontram-se, respectivamente, trechos de cdigo utilizando plugin Flash (1) e o cdigo correspondente especificao HTML5 (2).(1) (2) Figura 18 Comparativo de cdigos utilizados para insero de elementos de vdeo na webFonte o Autor32 De modo simplificado, de acordo com Pilgrim (2010), formatos contentores de arquivo de vdeo apenas definem a forma ou como so armazenados os arquivos dentro de si, no quais tipos de dados so armazenados. Ainda segundo Pilgrim (2010), codecs de vdeo so algoritmos pelos quais um fluxo de vdeo codificado, ou seja, ele especifica como fazer a interpretao dos fluxos de vdeo e udio, a fim de minimizar a quantidade de informaes necessrias para exibir um quadro aps o outro. A compatibilidade e padronizao dos formatos no foram definidos e provavelmente no o sero, dada as possibilidades de combinaes entre contentores e codecs. A Google demonstrou o uso do elemento atravs do Youtube, utilizando codec H.264 para vdeo e AAC (Advanced Audio Coding) para compresso de udio, mas tem trabalhado com um novo encodamento denominado WebM. Mozilla e Opera propuseram a incluso de decodificadores de cdigo livre OGG Theora (vdeo) e OGG Vorbis (udio) para qualquer navegador, que apesar de ser uma abordagem pragmtica, simples e sem custo, no foi aprovada por empresas como Apple e Nokia que prezam por um grau maior de qualidade de resoluo. A Microsoft possui diversos formatos de mdia em navegadores e conta com a tecnologia Silverlight para sua exibio, apenas anunciando suporte aos codecs H.264 e WebM . A Tabela 2 traz um comparativo dos codecs suportados por cada navegador.Tabela 2 - Previso de suporte a codecs de vdeo em navegadores* O IE9 apenas suportar WebM apenas se o usurio instalar codec VP8 # Suporte ao que for reconhecido pelo QuickTime, onde constam pr-instalados os codecs H.264/AAC/MP4 Suporte ao WebM prometido pela Google em verses futuras Fonte: Dive Into HTML5Segundo anncio do W3C(2010), agentes de usurio devem suportar quaisquer formatos e codecs de vdeo, portanto, desenvolvedores devem continuar acrescentando capacidades de compatibilidade atravs de fallbacks e plugins para todas as verses, em prol da melhoria progressiva e acessibilidade dos usurios.33 3.1.4 Elemento geolocationComo parte dos esforos de desenvolvimento do HTML5, a W3C desenvolveu um conjunto de Interfaces de Programao de Aplicativos (APIs) para permitir que um cliente efetivamente tenha informaes de posicionamento geogrfico com JavaScript atravs de um dispositivo de acesso. O objeto geolocation usado por scripts para determinar programaticamente as informaes de localizao associadas ao dispositivo de hospedagem, atravs de dados como longitude e latitude. A informao sobre a localizao adquirida atravs da aplicao de um algoritmo de agente especfico do usurio, criando um objeto de posio e preenchendo o objeto com os dados adequados. De acordo com Mirkazemi (2010), a tecnologia de base de um dispositivo pode determinar coordenadas atravs de tcnicas de GPS, IP, triangulao de torre de celular ou outros, porm a API de geolocalizao no identifica como a informao de localizao foi determinada, implicando em uma variao na preciso das informaes de localizao, dependendo da tcnica utilizada. Os atributos relativos localizao contm um conjunto de coordenadas geogrficas, bem como um conjunto de outros atributos opcionais, que de acordo com as especificaes W3C (2010) so: latitude e longitude, sendo coordenadas geogrficas especificadas em graus decimais; Accuracy que corresponde ao nvel de preciso das coordenadas, especificado em metros e deve ser comportado por todas as implementaes; o parmetro altitude denotando a altura do posicionamento, especificado em metros acima do elipside WGS84 (Sistema Geodsico Mundial - 1984). Se a implementao no pode fornecer informaes de altitude, o valor deste atributo deve ser nulo; um atributo altitudeAccuracy indica o nvel de preciso da altitude, tambm especificado em metros; um atributo heading determina a direo do curso do dispositivo de hospedagem e especificado em graus contados no sentido horrio em relao ao norte verdadeiro. O valor deste atributo deve ser nulo caso no possa fornecer informaes API. A velocidade atual do dispositivo de hospedagem em solo especificada em metros por segundo e corresponde ao atributo speed. A compatibilidade de geolocation descrita na Figura 19, e dentre os exemplos de uso, uma aplicao substancial que a utiliza o Google Maps.34Figura 19 Compatibilidade da API Geolocation entre os navegadoresFonte: Dive into HTML5Cabe ressaltar concernimento quanto privacidade da localizao do usurio, que deve explicitamente autorizar dispositivos a realizarem rastreamento e partilha destes dados.3.1.5 Elemento drag-and-dropDefine um evento inspirado em mecanismos de arrastar e soltar, baseado na implementao original da Microsoft de meados de 1999. De acordo com o Mozilla Developer Center (2010), aplicativos aceitam uma srie de caractersticas para a manipulao do recurso arrastar e soltar. Isto permite que o usurio clique e segure o boto do mouse pressionado sobre um elemento, arraste-o para outro local e solte o boto do mouse para soltar o elemento l, proporcionando uma interao mais intuitiva com a interface de algum aplicativo web. Quando um elemento comea a ser arrastado, algumas informaes podem ser fornecidas, como tipo dos dados a serem arrastados e imagem de feedback que aparece ao lado do ponteiro do mouse durante a operao de arrastar. Durante a operao de arrasto, efeitos podem ser modificados para indicar que certos comportamentos so permitidos em determinados locais, indicando permisses de soltura para o local. Uma srie de eventos utilizados so acionados durante as vrias etapas da operao de arrastar e soltar, sendo estes descritos por Mozilla Developer Center (2010) como: dragstart: disparado em um elemento quando a ao de arrastar iniciada. Ao solicitar o arrasto de um elemento, o conjunto de informaes como dados e imagem a ser associado com o arrasto so monitoradas; dragenter: acionado quando o mouse movido sobre um elemento, enquanto uma arrasto est ocorrendo. Um monitoramento para o evento deve indicar se uma soltura permitida sobre determinado local. Caso no exista candidatos aptos, no ser permitida a operao. dragover: disparado quando o mouse movido sobre um elemento ou quando uma soltura est ocorrendo. dragleave: evento disparado quando o mouse deixa um elemento, enquanto uma drag est ocorrendo, removendo tambm a nfase sob o local de soltura.35 dragend: a origem do arrasto receber um evento dragend quando a operao de arrastar for completada, independente se tenha sido bem sucedida ou no. Um exemplo de uso bem sucedido da funcionalidade pode ser visto no Gmail, onde possvel arrastar arquivos para anexar em emails ou arrastar conversas para categorias e sees diversas do sistema. Outra aplicao interessante baseia-se no conceito de carrinho de compras, onde o usurio pode arrastar itens desejados e solt-los numa rea especfica, criando assim sua lista de compras com funcionalidades nativas do navegador.Atualmente, um bom navegador tambm deve estar em conformidade com a WAIARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), que corresponde a recomendaes e especificaes tcnicas para acessibilidade a contedos dinmicos desenvolvidos em Ajax, HTML, JavaScript e tecnologias relacionadas. Cooper et al. (2010) cita que ARIA tem como foco o uso por parte de desenvolvedores web, tecnologias de apoio, navegadores e ferramentas de avaliao de acessibilidade, e descreve como adicionar semntica e metadados ao contedo HTML para tornar os controles e interface com o usurio mais dinmicos e acessveis.364 ANLISE DE COMPATIBILIDADE DOS RECURSOS HTML5A gerao de padres de codificao HTML5 conta com grande apoio, principalmente de empresas como Google e Apple, alm dos grupos que auxiliam seu desenvolvimento. Porm, como toda nova tecnologia, seu sucesso depende do quanto possvel ter acesso a seus recursos atravs dos navegadores. Atualmente, a marcao de vdeo HTML5 suportada apenas por navegadores considerados avanados, como as ltimas verses do Chrome, Firefox, Safari e a verso beta do Internet Explorer 9. Este captulo descreve as caractersticas principais dos motores de renderizao web, motores javascript e averigua a compatibilidade de recursos HTML5 disponveis.4.1 MOTORES WEBTambm conhecidos como mecanismos de layout ou motores de renderizao web, de acordo com Robbins (2006), so componentes de software que interpretam marcaes, informaes de formatao, links, cookies, scripts, carregamento de plugins, dentre outros, retornando a exibio do contedo formatado na tela. Navegadores so compostos por um motor web e um motor Javascript. Os principais motores dos navegadores so: o Gecko, da Mozilla e Netscape, usado no Firefox; o Presto, utilizado pelo Opera; WebKit, da Webkit Foundation (mantida pela Apple), utilizado no Chrome e no Safari; o Trident, que o motor do Internet Explorer. Os motores de renderizao web tambm so usados em editores HTML como o Amaya, o FrontPage, o Dreamweaver, e at o WindowsLive Writer. O motor de JavaScript, tambm conhecido como Mquina Virtual JavaScript, responsvel pela execuo e funcionamento dos scripts nas pginas de internet. Dentre os principais motores de JavaScript, cabe citar o Spider Monkey, da Mozilla e o V8, motor desenvolvido pela Google e em uso no Chrome.37 Antes de detalhar o funcionamento dos motores web, necessrio conhecer os elementos que estes renderizam, um elemento chave o DOM (Document Object Model). De acordo com Le Hgaret (2002), o DOM uma conveno de linguagem independente e multi-plataforma para representao e interao de objetos em documentos HTML, XHTML e XML. Os elementos do DOM podem ser endereados e manipulados dentro da sintaxe da linguagem de programao em uso. Facilidades como a deteco de eventos gerados pelo usurio e modificao do documento HTML caracterizou uma primeira gerao, denominada DOM nvel 0, que introduziu os elementos form, link e image, referenciados atravs de um nome hierrquico que comeasse no objeto do documento raiz. Estes atributos permitiram a validao de formulrios e o popular efeito rollover. Em 1997, adicionando suporte ao DHTML (Dynamic HTML), extenses do DOM propiciaram a manipulao de CSS (Cascading Style Sheet), trazendo acesso ao conceito de camadas para a estilizao. Com a interveno do W3C para criao de padres para a World Wide Web, houve tambm o surgimento do ECMAScript, padro para linguagens de script. Guisset (2009) explicita que a padronizao do DOM nveis 1 e 2 veio aps o ECMAScript, definindo o suporte a nomes XML, CSS e a funo getElementById. DOM nvel 3 a atual verso da especificao e conta com suporte a XPath e interface para serializao de documentos. Embora no haja obrigatoriedade para uso do DOM na renderizao HTML entre os navegadores, necessrio caso exista algum script que necessite inspecionar ou modificar uma pgina dinamicamente, uma vez que o DOM suporta navegao em qualquer direo e permite modificaes arbitrrias, como pelo menos disponibilizar um buffer para documentos que j foram abertos.4.1.1 GeckoO desenvolvimento do Gecko teve incio em 1997 e na poca era amplamente considerado um motor inferior ao utilizado no Microsoft Internet Explorer, por ser lento, no38 condizente com os padres W3C e oferecer suporte limitado a DHTML com falta de rearranjo dos elementos na tela quando novas informaes eram baixadas (refluxo incremental). Aps o advento do projeto Mozilla em meados de 1998, um novo cdigo para o motor web foi lanado com uma licena open-source. Originalmente denominado de Raptor e alterado para NGLayout (Next Generation layout) devido a problemas de marca registrada, posteriormente foi chamado de Gecko e tal nome permanece at ento. Gecko portanto um motor web atualmente desenvolvido pela Mozilla Corporation e utilizado nos navegadores Firefox, Camino, Flock, SeaMonkey, K-Meleon, Netscape 9, no editor HTML Nvu, gerenciador de emails Mozilla Thunderbird, dentre outros programas. Seu planejamento contempla suporte aos padres de internet e oferece APIs para RIAs, que se adequam a diversos papis em aplicaes voltadas a internet como navegao, apresentao de contedo, e comunicao cliente/servidor. Como descrito pela Mozilla Developer Center (2010), codificado em linguagem C++, sendo gratuito, de cdigo-aberto e multi-plataforma, rodando em diversos sistemas operacionais incluindo BSDs, Linux, Mac OS X, Solaris, OS/2, AIX, OpenVMS e Microsoft Windows. Possui ainda uma licena tripla da Mozilla Public License (MPL), GNU General Public License (GPL) e GNU Lesser General Public License (LGPL). Gecko hoje o segundo motor web mais popular, depois do Trident (utilizado pelo internet Explorer) e seguido pelo WebKit (utilizado no Safari e Google Chrome) e Presto (utilizado no Opera). Sua arquitetura foi planejada para atender aos padres da internet, incluindo suporte a fatores como: HTML4 (suporte parcial a HTML5); CSS nvel 2.1 (suporte parcial a CSS3); JavaScript 1.8 (ECMAScript 3, suporte parcial para o ECMAScript 5) implementado via SpiderMonkey; DOM Nveis 1 e 2 (suporte parcial ao DOM 3); XML 1.0, XHTML 1.0, XSLT e XPath, implementados em TransforMiiX; MathML; XForms (atravs de uma extenso oficial); RDF e suporte parcial a SVG 1.1 Para suprir a demanda dos navegadores desenhados para verses legadas do Netscape e Internet Explorer, o Gecko suporta troca de doctype, dessa maneira, documentos com umdoctype atual so renderizados em conformidade com os padres W3C e documentos antigossem doctype ou de verses antigas, so renderizados atravs do quirks mode (modo no estrito) que emula algumas das excees no padronizadas preconizadas em verses antigas.394.1.2 PrestoPresto o motor do navegador Opera, desenvolvido pela Opera Software, com cdigo fonte do motor no disponvel ao pblico. Quando lanado em janeiro de 2003, foi o mais rpido em termos de seu motor JavaScript, tem processamento dinmico, ou seja, a pgina ou parte dela pode ser reprocessada em resposta ao DOM e eventos script. Em 2008 uma nova gerao de motores superou seu desempenho. Segundo Opera (2010), atualmente o Presto verso 2.6 oferece bom suporte a funcionalidades de vdeo HTML5 e fatores comuns a navegadores, como: marcao HTML4; ARIA (Accessible Rich Internet Applications); CSS nvel 2.1 e suporte a seletores, web fonts, RGBA/HSLA CSS3 e backgrounds mltiplos ; DOM Nveis 1 e 2 (suporte parcial ao DOM 3); JavaScript 1.8 (ECMAScript 3, suporte parcial para o ECMAScript 5); suporte nativo ao JSON; XML/XSLT 1.1; XHTML 1.1; MathML; RDF; WML 2.0; suporte a SVG 1.1 e elementos canvas; suporte a Geolocation via reconhecimento de IP e WiFi; codec de vdeo WebM;4.1.3 WebkitO WebKit originalmente derivado da biblioteca de software KHTML do navegador Konqueror desenvolvido pela Apple. A codificao do motor teve incio em 1998 e o nome Webkit foi criado em 2002, permitindo desenvolvimento facilitado por ser leve, com design limpo e atendendo aos padres de internet. KHTML e KJS foram portados para o Mac OSX e renomeados para WebCore e JavaScriptCore respectivamente. Em Junho de 2005, a Apple anunciou que o Webkit tornarase cdigo aberto. Como descrito pelo WebKit Open Source Project, Webcore um motor de renderizao para o DOM mais a biblioteca para HTML e SVG, provido de uma API baseada40 em C++. O Webkit passa nos testes de renderizao de pixels sem tempo nem problemas de suavizao, e otimiza escopos dinmicos melhorando o acesso multi-escopo. O JavaScriptCore um framework que fornece um motor javascript para implementaes do Webkit. Em setembro de 2008 o cdigo foi reescrito e evoluiu para o denominado SquirrelFish Extreme ( SFX, veiculado sob o nome Nitro ), correspondendo a um incremento que realiza compilao em cdigo de mquina nativamente, eliminando a necessidade de um interpretador de bytecode e dessa forma, acelerando a execuo de scripts. O Webkit representa os esforos cumulativos individuais dos colaboradores de cdigo aberto e comercialmente das empresas que fomentam seu desenvolvimento, como Apple, Google, Nokia e Torch Mobile. Correes de falhas, melhorias na segurana, portabilidade e outros fatores contribuem para a disseminao do motor em navegadores como o Chrome e Safari, clientes de email como o Microsoft Entourage e Apple Mail, aplicativos de mensagens instantneas, leitores RSS, desenvolvimento de aplicaes web, visualizadores de multimdia e editores de blogs e textos. Traz como diferencial o suporte total a SVG 1.1 e recursos convencionais: HTML4 e suporte parcial a HTML5; ARIA (Accessible Rich Internet Applications); CSS nvel 2.1 e suporte a recursos CSS3 ; DOM Nveis 1 e 2 (suporte parcial ao DOM 3); JavaScript 1.8 (ECMAScript 3, suporte parcial para o ECMAScript 5), suporte nativo ao JSON; XPath; XML/XSLT; MathML; RTE (Rich Text Editing);4.1.4 TridentTrident (tambm conhecido como MSHTML) o nome do motor web introduzido na verso 4.0 do navegador Internet Explorer, em outubro de 1997. Aps constantes aprimoramentos nas verses subseqentes, almeja apresentar maior competitividade e modernidade, alm de cumprir com todos os padres de internet preconizados pela W3C, atualmente renderizados de forma singular pelo Trident. O Trident foi originalmente projetado como um componente para incrementar facilidades a desenvolvedores de software, como adio de funcionalidades de navegao web em aplicaes distintas atravs de eventos do navegador controlados e capturados por meio do41 vnculo do arquivo mshtml.ddl ao projeto de um software. Apresenta uma interface para edio de pginas em ambientes C++ e .NET. Todas as verses do Internet Explorer a partir do Windows 4.0, utilizam o Trident como motor web, que tambm consta no sistema de gerenciamento de arquivos, na ferramenta de adio e remoo de programas e no painel de controle de contas de usurio do sistema operacional Windows XP, entretanto, o Trident no utilizado na verso para Mac do Internet Explorer nem por verses anteriores do Internet Explorer Mobile. Embora as verses do IE tenham aprimorado seu suporte aos padres de internet, o ncleo utilizado na construo de pginas web (HTML e CSS) frequentemente implementado sob uma estilizao incompleta. Como explicitado pelo Microsoft Developer Network, alguns atributos CSS no so reconhecidos pelo Trident. A verso 9 do IE promete suporte integral a HTML5, CSS3 e SVG, como tambm atender aos padres de internet, embora o navegador ainda esteja em vias de desenvolvimento. Alguns elementos suportados pela verso atual so: HTML4; CSS nvel 2.1 e alguns recursos CSS3; DOM Nveis 1 e 2; JavaScript 1.8 (ECMAScript 3, suporte parcial para o ECMAScript 5); suporte nativo ao JSON; XML/XSLT e MathML. Trident hoje o mais disseminado motor web devido ao navegador Internet Explorer ser veiculado junto com o pacote do sistema operacional Windows, entretanto reconhece-se que no tem acompanhado estritamente os padres e tecnologias web, fato que implica em necessidade de alternativas durante a codificao de aplicativos web, quando no reconhecidos pelo navegador.4.2 MOTORES JAVASCRIPTSegundo White (2010), o recurso que interpreta todo o cdigo javascript regido pelo padro ECMAscript em uma pgina denominado Motor Javascript, que juntamente com um motor web, compe um navegador.42 4.2.1 Spidermonkey Codinome para o primeiro motor de Javascript escrito por Brendan Eich na Netscape Communications e liberado posteriormente como cdigo-aberto, atualmente mantido pela Mozilla Foundation. O SpiderMonkey escrito em C e contm um compilador, um interpretador, um decompilador, coletor de lixo e classes padro. No provm por si s um ambiente de hospedagem para elementos como o DOM e oferece suporte ao javascript 1.8. De acordo com Mozilla Developer Center, em junho de 2009 foi adicionada ao SpiderMonkey uma otimizao utilizando rvores de rastreamento, que oferece melhorias de performance, sendo a inteno acoplar o recurso em outras aplicaes que forneam um ambiente de hospedagem para Javascript. Aplicaes populares onde consta o uso do Spidermonkey, incluem o Adobe Reader, Konfabulator (widgets do Yahoo!) e o UOX3, um servidor emulador do jogo Ultima Online. Partes do SpiderMonkey so utilizadas no projeto Wine, no sistema de banco de dados CouchDB, na definio de mapas, filtros, reduo de funes e visualizao de dados em formato HTML.4.2.2 V8O motor Javascript V8 um motor de cdigo aberto sob licena BSD Open Source, desenvolvido pela Google e propagado pelo navegador Chrome. Segundo Ledford et al. (2009), o V8 aumenta a performance atravs da compilao dos scripts para uma mquina de cdigo nativa antes da execuo, ao invs de executar a converso em bytecode ou interpretao, alm de utilizar tcnicas como caching em linha. Levando em considerao o design de alguns elementos descritos pelo Google Code, cabe destacar o acesso rpido a propriedades, onde estruturas de dados na memria mantm rastreamento dos relacionamentos entre as propriedades dos objetos, semelhante a um dicionrio. O V8 capaz de executar buscas utilizando deslocamentos fixos, possibilitando o uso de caching em linha e trazendo maior eficincia nas aplicaes. A compilao do V8 em cdigo de mquina introduz um aspecto dinmico para acesso a propriedades, ou seja, eficincia no reuso de objetos.43 A gerao de cdigo de mquina dinmico traz independncia de plataformas e em parte responsvel pela popularidade do Javascript. Tal independncia alcanada atravs do uso de bytecodes, que no uma arquitetura otimizada e requisita um interpretador para executar, trazendo penalidades associadas sua necessidade de interpretao. Linguagens baseadas em objetos necessitam periodicamente requisitar por memria e o processo de coleta de lixo libera memria descartando objetos no mais utilizados. O V8 temporariamente suspende a execuo de cdigo para requerer memria associada a objetos em uso e esta aproximao reduz o impacto geral na execuo. A coleta evita desperdcio de memria e aprimora eficincia. O motor JavaScriptCore e o V8 ambos quando utilizados junto ao Webkit, diferem em seus modelos de execuo. Enquanto o JavaScriptCore executa uma rvore sinttica, o V8 acessa propriedades associadas a um objeto e compilados em cdigo de mquina para uma arquitetura especfica. O paradigma de acesso a propriedades integrado execuo de cdigo de mquina atravs de um mecanismo que conta com uma dinmica em tempo real de propriedade-objeto. Suas filosofias diferem tambm entre incorrer ou no em penalidades de interpretao.4.3 COMPARATIVO DOS ELEMENTOS DE MOTORES WEB Os elementos e APIs apresentados pela especificao HTML5 dependem de interpretao dos motores web para que a implantao da tecnologia efetivamente ocorra A Tabela 3 apresenta a nomenclatura dos navegadores e aplicativos em suas verses atuais e experimentais, com seus respectivos motores web.Tabela 3 - Utilizao dos motores web nos aplicativosMotor WebVerso avaliadaVerso de extenso ou experimentalAplicativos que utilizam Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-gecko, GNU IceCat, Debian, Iceweasel, Icedove, Iceape e Iceowl Opera, Opera Mobile, Navegadores do Nintendo DS e Nintendo DSi, Internet ChannelGecko1.9.22.0 (Firefox 4)Presto2.6-44 Internet Explorer e Internet Explorer shells (apenas para Windows) Apple Safari, Google Chrome, Shiira, iCab 4, OmniWeb 5.5+, Epiphany, Adobe AIR, Midori, Adobe Dreamweaver CS4, navegador do Google Android, Palm WebOS, Symbian S60, OWB, SteamTrident4.0 (IE 8)5.0 (IE 9)Webkit533Nightly buildFonte: WebKit Open Source Project, Opera Software, Mozilla Developer Center, MSDNA Tabela 4 apresenta a legenda utilizada em futuras comparaes, a nomenclatura dos elementos de marcao e sua compatibilidade. O suporte atualmente viabilizado atravs de javascript, garantindo o uso e compatibilidade com navegadores que de modo nativo no reconhecem tais elementos estruturais.Tabela 4 - Legenda de compatibilidade entre os motores webValor Sim No Depende Parcial Nightly buildSignificado Suporte total ao elemento/propriedade quando valores vlidos so utilizados Elemento/propriedade completamente ignorado Elemento/propriedade reconhecido em alguns casos se algumas medidas forem tomadas Indica que o elemento/propriedade reconhecido mas nem todos os valores so suportados Indica que o elemento/propriedade suportado em verso experimentalFonte: Elaborado pelo autorO suporte a elementos varia entre as verses dos motores web, com o Webkit liderando na compatibilidade estrutural segundo demonstrado na Tabela 5. Estima-se que em breve todos os comparativos apontem para suporte total em todos os motores.45Tabela 5 - Compatibilidade dos elementos estruturais HTML5 por verso de motor webTrident section nav article aside hgroup header footer time figure figcaption embed video audio source canvas MathML SVG No No No No No No No No Trident No No < 3.1 5.0 5.0 5.0 5.0 No 5.0GeckoWebkitPresto No No No No No No2.0533No No Gecko 2.0 2.0 1.7 1.9.1 1.9.2 2.0 2.0No No Webkit No No 85 525 Parcial Nightly buildNo No Presto No No 1.0 2.5 2.0 2.1 1.0Fonte: Adaptado de Holzschlag, M.; A Selection of Supported Features in HTML5A Tabela 6 traz uma lista das funcionalidades e APIs HTML5 em desenvolvimento e algumas j em uso, possibilitando funcionalidades nativas e estveis.46Tabela 6 - Suporte a APIs HTML5Trident Seletores API 4.0 Armazenamento web API de base de dados indexada Banco de dados Web SQL API de arquivos Media Capture API Server-sent Events Web Sockets Web Workers Geolocation API Aplicaes Web offline NoGeckoWebkitPresto 2.21.9.1525 2.52.0/ ParcialParcialNoNo No No No No No No NoNo 1.9.2 2.0/Parcial No 2.0 1.9.1 1.9.1 1.9.1Sim Parcial No Sim 533 Sim 533 Sim2.5 No No Experimental No 2.6 2.6 2.6Fonte: WebKit Open Source Project, Opera Software, Mozilla Developer Center, MSDNObserva-se que a aplicao de especificaes inacabadas funciona e passvel de implementao, mesmo antes de recomendao da W3C, neste ponto que cabe citar duas tcnicas de desenvolvimento que visam manter a acessibilidade de uma aplicao, garantindo o uso de novas tecnologias para os diversos nveis de compatibilidade quando emergem tendncias como o HTML5. As tcnicas chamam-se Degradao Harmoniosa1 e Melhoria Progressiva2. De acordo com Olsson (2007), degradao harmoniosa um termo amplamente utilizado cuja ideologia , basicamente, utilizar as ltimas tecnologias em primeiro lugar, e em seguida, corrigir alguma coisa que precise de adaptaes para navegadores mais antigos. A premissa para a tcnica consiste em primeiramente construir para a tecnologia mais recente e, em seguida, adicionar manipuladores e alternativas para dispositivos menos capazes.1 2Do ingls: Graceful Degradation Do ingls: Progressive Enhancement47 Como desenvolvedores no tm o direito de impor aos visitantes qual navegador deve ser utilizado para compatibilizar a tecnologia, frequentemente ocorre uso de JavaScript. Olsson (2007) ainda descreve outra alternativa para esta situao, que leva ao uso da Melhoria Progressiva, que refere-se ao hbito de prioritariamente desenvolver para navegadores menos capazes com tecnologias mais disseminadas e, em seguida, utilizar das ltimas tecnologias para realce do contedo. Scripts discretos so a chave para a tcnica, que ignorada pelos agentes que no suportam alguns recursos, mas aplicada em dispositivos atualizados que renderizam novos recursos . Ambas as tecnologias so aplicadas para fazer um web site ou aplicativo acessvel a qualquer agente do usurio, proporcionando melhor esttica e/ou utilidade para os navegadores mais robustos. Como descrito por W3C(2010), alguns elementos no existiro mais no HTML5, foram retirados porque sua funo puramente visual, e devem ser substitudos por uma declarao no CSS (Cascading Style Sheets), como: , , , ,, , e . Outros foram retirados porque afetam negativamente aacessibilidade do site: , e . Apesar de serem considerados antigos, e ainda sero reconhecidos e renderizados para fins de formatao, mas devem ser substitudos sempre que possvel pelos elementos e , respectivamente, uma vez que em testes de validao j no aceito seu uso. Tambm foram retirados alguns atributos, seja porque caram em desuso ou porque podem ser substitudos semanticamente por declaraes no CSS para definir o visual dos elementos. Os principais atributos retirados so: target no elemento ; align nos elementos e demais tags de tabelas, , , , , , , entre outros; background em e bgcolor nos elementos de tabela e no ;border em e ,cellpadding e cellspacing em ;height em e ;width nos elementos , , , e ;hspace e vspace em e;noshadeesizeem.485 ANLISE DE TECNOLOGIAS WEB E COMPARATIVO DE VIABILIDADEEste captulo traz informaes a respeito dos principais mecanismos web utilizados no desenvolvimento de aplicativos e pginas, e faz um comparativo com funcionalidades semelhantes incorporadas na especificao HTML5.5.1 CARACTERSTICAS DAS TECNOLOGIAS WEBO primeiro passo para julgar a viabilidade de implementao de novas tecnologias, averiguar as capacidades e caractersticas das tecnologias atuais mais utilizadas e questionar seus pontos fortes e linhas de atuao web.5.1.1 FlashFlash oferece exibio para aplicaes expressivas, como contedo e vdeos em navegadores, sendo focado na criao e publicao de animaes para sua plataforma. Para Santos (2009), Flash tende a ser utilizado em sites onde o cliente no se importa de prejudicar a indexao nos motores de busca em troca de uma apresentao visual que nunca outra plataforma capaz de fazer at hoje. O uso de flash para partes de design, propaganda e jogos tem sua presena garantida na web, porm cabe destacar duas reas de destaque para sua aplicao, a rea corporativa e recente mercado de plataformas mveis. Flash permite a indexao em motores de busca de algumas partes do contedo e uso de deeplinking, que propicia avanar e retroceder nos navegadores, quando as pginas so includas separadamente no histrico e buscadores.49 De acordo com Wright (2009), na rea corporativa o uso de mdias ricas para treinamento, solues em aprendizagem e aplicaes intranet liderado pelo desenvolvimento em Flash. A capacidade de interao com banco de dados, integrao com PHP, fornecimento de dados para XML, ActionScript 3, extensibilidade com plugins e funcionalidades de importao e exportao, tornam Flash uma ferramenta extremamente robusta. O ActionScript 3, uma linguagem de programao orientada objetos baseada em ECMAScript, trouxe melhorias para a estrutura e funcionalidade das aplicaes, permitindo aos desenvolvedores criar aplicativos consistentes. Padres web so suportados em todos os dispositivos mveis, embora no exista garantia de iseno de problemas de compatibilidade do mesmo calibre dos encontrados em desktops, dada a variedade de navegadores mveis e constante expanso deste segmento. A rea de plataformas mveis abrangente, e mesmo entre controvrsias, existem razes para crer que Flash garantir uma boa fatia de mercado. Wright (2009) considera a plataforma Android, que est lanando um framework habilitado Flash e contempla investimentos da Adobe em atualizaes para o Flash Player 10.1 em smartphones, e a adeso da Research in Motion ao projeto Open Screen da Adobe, sendo plausvel assumir um comprometimento da BlackBerry com a tecnologia Flash num futuro prximo.5.1.2 FlexFlex um framework multi-plataforma para desenvolvimento de aplicaes ricas. Oferece uma construo rpida e facilitada de layouts, mantm o estado do cliente onde mudanas significativas de visualizao no necessariamente requerem a carga de uma nova pgina, e apresenta todos os pontos inerentes ao flash, uma vez que um framework baseado na mesma plataforma Uma vez que Flash trabalha com uma linha de tempo e eventos determinados nesta, o modo de programao da ferramenta confunde programadores iniciantes. Flex remove esta barreira, fornecendo um novo caminho de programao aos desenvolvedores, provendo um fluxo de trabalho e um modelo de programao mais familiar. Utiliza MXML e XML, linguagens de marcao usadas principalmente para dispor declarativamente a interface de aplicativos. Santos (2009) reitera que a tecnologia trouxe50 melhorias na facilidade de utilizao e programao, mas mesmo sendo verstil e ainda sem rival no que diz respeito s RIAs, comunidade e suporte, no deve ser utilizada para todas as situaes pelos mesmos aspectos da tecnologia Flash, dentre estes, a dificuldade para indexao em motores de busca e necessidade de plugin para execuo em navegadores.5.1.3 JavaFXJavaFX uma plataforma atuante na mesma linha das RIAs, orientada a objetos, desenvolvida pela Sun Microsystems e baseada em Java, inclui plugins para Adobe Photoshop e Adobe Illustrator permitindo a integrao e criao de grficos mais aprimorados. De acordo com a Sun Microsystems (2010), uma aplicao JavaFX desenvolvida para ser executada dentro de um navegador web necessita da criao de um arquivo JNLP (Java Network Launching Protocol) e insero de uma chamada para a aplicao no cdigo HTML. Necessita do JRE (Java Runtime Environment) para executar em desktops, e em dispositivos mveis demanda o JavaME. A sintaxe de JavaFX utiliza declaraes de objetos e estilo funcional, onde as funes podem ser atribudas a variveis. Permite separao de modelos e visualizaes de interfaces, baseado no conceito de perfis comuns, que visa reuso de cdigo em todos os dispositivos mveis e desktop, permitindo aos desenvolvedores utilizarem modelos de programao comum, sendo este conceito a principal vantagem da linguagem.5.1.4 SilverlightMoroney (2007) descreve que Silverlight faz parte de um subconjunto do.NET Framework 3.0, disponvel como plugin de navegadores web. Processa XAML, expondo seu DOM interno e seu modelo de eventos ao navegador de forma programvel. Tal documento define a interface do usurio baseado em texto e amigvel a mecanismos de busca e firewalls, podendo ser montado e emitido em tempo de execuo por um aplicativo de servidor, o que proporciona uma experincia grfica avanada, personalizvel e dinmica.51 De acordo com a Microsoft(2010), Silverlight proporciona um contedo sofisticado e interativo perfeitamente adequado ao restante do ambiente de desenvolvimento na Web, inclusive o ASP.NET AJAX. Utiliza um arquivo XAML esttico para definir a interface de usurio e JavaScript para a manipulao de eventos. Atualmente em sua quarta verso, possui integrao com diversas linguagens, dentre elas: AJAX, C#, Python, Ruby e Visual Basic. Uma de suas caractersticas principais a qualidade de fluxo de carregamento de dados em alta definio. Existe uma alternativa opensource ao Silverlight, financiado pela Novell e pela prpria Microsoft, denominado Moonlight, que viabiliza a tecnologia para Linux e outros sistemas operacionais baseados Unix/X11.5.1.5 HTML5Uma pgina em HTML indiscutivelmente mais acessvel que uma desenvolvida em qualquer outra ferramenta, e as palavras de ordem para a verso 5 so: compatibilidade, utilidade e interoperabilidade. Keith (2010) ressalta que o design do HTML5 tem foco em evitar complexidade desnecessria, onde cabe citar como exemplo mais claro a simplificao na declarao de , suportar contedo j existente, resolver problemas recorrentes, como a definio de propriedades a blocos com diferentes elementos. A diviso de contedo em sees e atribuio de carter semntico, caracterizando o tipo de informao contido em cada bloco, visam padronizao das estruturas. Conceitos como degradao harmoniosa inerente ao design da linguagem, para garantir que funcionalidades eventualmente no interpretadas tenham uma alternativa compatvel e prioridade das necessidades tericas e diretrizes de desenvolvimento considerando a hierarquia em ordem decrescente: usurios, autores, implementadores, especificaes e por fim a pureza terica, so pontos fortes de acessibilidade. Se at ento o HTML carecia de recursos para uma melhor apresentao de contedo, um bom profissional ser capaz de produzir recursos visuais expressivos com HTML5, com pginas devidamente indexadas e maior eficincia nas situaes onde at ento Flash ou outros so utilizados .52 HTML5 est se consolidando no desenvolvimento voltado para vdeo e contedo mvel, enquanto para contedo rico e interativo Flash tem uma vantagem que no ser desbancada rapidamente, devido a sua penetrao no mercado. O fato que o HTML5 encontra-se em estgios de evoluo diferentes para diversos recursos, ainda existindo a necessidade de navegadores atualizados e compatveis com as novas funcionalidades, porm adaptaes que trazem compatibilidade atravs de javascript, calos e fallbacks, atuam efetivamente e de modo transparente ao usurio final.5.2 COMPARATIVOSCada projeto ou cliente apresenta necessidades diferentes, e cabe aos desenvolvedores analisarem as situaes com intuito de definir a melhor ferramenta de desenvolvimento. HTML5 apresenta recursos j utilizveis que podem se encaixar no perfil de determinados projetos.5.2.1 HTML5 x FlashQuando se comparam tecnologias to abrangentes, indispensvel delimitar sobre qual funcionalidade ocorre a anlise, pois no existem ferramentas e tecnologias cabveis a todas as situaes. Segundo Keith (2010), a disputa entre HTML5 e Flash ocorre mais especificamente no quesito visualizao de vdeo. O padro de configurao de vdeo na web para praticamente todos os servios online de vdeo, e tambm adotado como codec padro para o vdeo em formato puro (.raw), proveniente de cmeras de vdeo digital, o H.264. Isso significa que um upload de vdeo diretamente de uma cmera digital para o YouTube, no requere converso desse arquivo para um novo formato, o que exigiria mais tempo e recursos de processamento. Segundo Gilbertson (2010), a adoo de vdeo nativo entre os navegadores provida pelo HTML5, foi rapidamente disseminada, sendo que os navegadores Chrome, Firefox, Safari, Opera e brevemente o Internet Explorer 9, objetivam o suporte nativo.53 Como no existe um consenso entre navegadores, desenvolvedores HTML5 ainda necessitam codificar seus arquivos para suporte aos principais formatos de vdeo previstos na especificao: H.264: amplamente utilizado porm condicionado ao pagamento de royalties para sua implantao e uso. Abrange uma srie de recursos avanados que possibilitam vdeos de alta de qualidade com taxas de dados reduzidas. WebM: formato de vdeo aberto e livre de royalties, desenvolvido para fornecer vdeo de alta qualidade cujo desenvolvimento que consiste em um fluxo de vdeo VP8 e um fluxo de udio Ogg Vorbis num arquivo recipiente Matroska. Ogg Theora: codec de vdeo de compresso com perda de dados baseado no fluxo de vdeo VP3, semelhante aos formatos MPEG-4, XviD e DivX. A extenso de arquivo .ogv, e por ser frequentemente usado em um formato contentor ou arquivo recipiente Ogg, ento denominado de Ogg Theora. A Adobe comeou a apoiar o codec H.264 em 2007, essencialmente poupando tempo para a tecnologia Flash , que atuou como um recipiente de vdeo que no fora servios como o YouTube, a transcodificar o vdeo H.264 nativo em outro padro desconhecido para uso do Flash. O HTML5 facilita o processo de integrao de vdeo em mltiplas plataformas, tanto pela facilidade de codificao, quanto pela adoo de formatos que oferecem meios de converso gratuitos. Embora a natureza proprietria e licenciada do H.264 tenha afastado o apoio a este padro principalmente dos fabricantes de navegadores como Mozilla e Opera, dispositivos mveis o utilizaro pois j possuem licena paga por conta de fabricantes de hardware. A qualidade, experincia de exibio, transmisso ao vivo e capacidade de insero de anncios do HTML5 esto expandindo em velocidade considervel, em contrapartida, a verso Flash 10.1 do pressupe trazer a acelerao de hardware para que processadores possam lidar com vdeo de forma mais robusta. Usurios precisam estar cientes das restries tecnolgicas que impedem o progresso de cada tecnologia, considerando que ainda existem problemas de longa data com o Flash em computadores x86. Calore (2010) conta que recentemente a Adobe lanou seu prprio tocador de vdeo HTML5, integrando tambm outros aplicativos como o Illustrator e o Dreamweaver CS5 com uma srie de novas ferramentas de exportao HTML5. Uma vez que os formatos de arquivo de vdeo estejam adequados, o novo tocador da Adobe funcionar nativo em todos os novos54 browsers, e mudar para um modo de reproduo Flash quando os visitantes com navegadores no antigos ou inaptos solicitarem o vdeo, para garantir que todos os navegadores capazes de HTML5 podero executar seus vdeos. Para os demais recursos segue um comparativo adaptado de Hofmann (2010), entre itens utilizados em Flash e as capacidades estimadas do HTML5+JavaScript, apresentando primeiramente o nome da classe API Flash, namespace, ou recurso, a descrio do fator em questo e em seguida o funcionamento ou equivalncia do item em HTML5+Javascript. Accessibility, AccessibilityProperties : tipo de tecnologia assistiva para usurios deficientes visuais que oferece uma verso em udio do contedo da tela HTML5+JS: Est em processo de integrao WAI-ARIA.Vdeo, udio, SVG e Canvas podem ser usados de forma que ajudaro as pessoas com deficincias. BitmapData: Classe que permite manipulao dos dados (pixels) de um objeto Bitmap. HTML5+JS: a API Canvas contm mtodos semelhantes para manipulao de bitmap, embora o desempenho possa ser diferente. Graphics: Classe que contm um conjunto de mtodos para criar uma forma vetorial HTML5+JS: os recursos responsveis por estes mtodos envolvem as propriedades de SVG e Canvas Loader: classe usada para carregar arquivos SWF ou de imagem (JPG, PNG ou GIF) HTML5+JS: recursos URI e manipulao DOM flash.filters: conjunto de classes para efeitos de filtro de bitmap (convoluo brilho, nitidez, dentre outros) HTML5+JS: Emulvel possivelmente com menor desempenho. SVG contm especificao de efeitos de filtro que pode potencialmente ser aplicada a todos os elementos do documento. WebGL tambm permite shaders programveis Camera, Microphone: Captura de vdeo e udio a partir de uma webcam ou microfone local. HTML5+JS: existe uma proposta de ps implementao HTML5 para marcao de dispositivos. Sound: Carrega e reproduz udio MP3 e WAV a partir de arquivos ou fluxos . Alm de controles internos de pan e volume, inspeoe manipulao em tempo real via Actionscript so permitidos.55 HTML5+JS: A marcao de udio reproduz som e fluxos de udio, no entanto, a especificao atual no permite manipulao e inspeo. Uma extenso foi prototipada no Firefox para habilitar esses recursos. Video: Exibio de vdeo ao vivo ou gravado atravs de incorporao, streaming ou download progressivo. Codecs Sorenson Spark On2, vp6, H.264 so suportados para vdeo e ADPCM, HE-AAC e MP3 so suportados para udio. HTML5+JS: Reproduz vdeo e permite uma interface de usurio usando scripts HTML / JS equivalente a qualquer interface em Flash. Os codecs diferem entre as implementaes existentes devido a consideraes de patente, no entanto,h interesse no padro aberto WebM. FileReference: Classe que fornece um meio para upload e download de arquivos entre usurio e servidor. Uma caixa de dilogo do sistema operacional pede ao usurio para selecionar um arquivo para upload ou um local para download. Tambm pode ser usado para ler e escrever arquivos locais. HTML5+JS: o uso de file input type suporta upload com comportamento personalizado, e os elementos DOM agora suportam arrastar e soltar. Gatilhos de download de arquivos JS j existem tambm Formato SWF, LocalConnection, Security, ApplicationDomain: Os arquivos SWF so espaos independentes que podem rodar simultaneamente, em modo seguro, e podem, opcionalmente, se intercomunicarem. A. Interconectividade entre SWF usada principalmente em aplicaes para prover um front-end leve ou precarregamento de outros contedos. HTML5+JS: A natureza global do formato SWF um conceito estranho, mas iframes tm uma capacidade de acesso semelhante DisplayObject e Stage: Flash constri a sua exibio em tempo de execuo em torno do "Palco", que uma estrutura de rvore de DisplayObjects eDisplayObjectContainers; todos os tipos de coisas que Flash pode exibir (vdeo vetores, bitmaps, ...) so herdados de DisplayObject. Elementos do Palco podem anexar ouvintes de eventos de entrada e utilizar exibio visual para informar a funcionalidade (por exemplo,para elementos sobrepostos um clique de mouse seleciona a camada de nvel superior). DisplayObjects so capazes de acessar todos os efeitos e filtros disponveis, tornando mais fcil a aplicao de efeitos em elementos individuais e grupos profundamente aninhados.56 HTML5+JS: O DOM possui grande semelhana com o "Palco", ambas as estruturas so rvores que utilizam ouvintes de eventos ligados a ns, porm, por ser focado mais em documentos do que na visualizao, a implementao real torna-se muito diferente. Nada impede que a funcionalidade possa ser emulada Socket, XMLSocket: A classe Socket permite que o cdigo faa conexes de soquete, leitura e gravao de dados binrios raw. Socket uma conexo TCP / IP pura com destinos definveis pelo usurio. XMLSocket o precursor do Socket geral e permite envio de dados ASCII, delimitados por marcadores \ 00. Desde Flash 7, os arquivos de poltica server-side tm sido usados para controlar as interaes entre domnios; um arquivo de poltica usado para o carregamento de dados, e um segundo usado para sockets. O sistema geral chamado de sistema de meta-poltica. HTML5+JS: WebSocket mais semelhante ao XMLSocket, ou seja, baseada em texto, no em um socket TCP de baixo nvel.Domnios de controle de acesso esto sendo adicionados ao HTTP. ByteArray: A classe ByteArray fornece mtodos e propriedades para otimizar a leitura, escrita e trabalhar com dados binrios: controle de destino, converses de string, e assistncia em leitura e escrita de uma variedade de formatos (8, 16, 32-bit ints, floats, UTF, etc). HTML5+JS: A especificao atual no inclui uma array explcito de bytes.Strings e arrays numricos podem ser usados para obter resultados equivalentes, mas com alguma dificuldade.A especificao WebGL props um formato de array tipado, que englobaria a funcionalidade ByteArray do ncleo. PrintJob: Classe que permite criar contedo e envi-lo para impresso. HTML5+JS: Navegadores tm impresso de pgina incorporada e elementos Canvas podem salvar uma imagem com toDataUrl(). Funcionalidade semelhante API Flash possvel com o comando window.print() Shader, ShaderFilter, ShaderJob: Uma instncia Shader implementa algoritmos de processamento de imagem (filtros ou efeitos) de forma independente do hardware utilizando uma linguagem grfica baseado paralelizado baseada em XML. HTML5+JS: Os filtros e shaders podem ser emulados em JavaScript. SVG contm opes de filtragem. WebGL permite shaders programveis. WebWorkers fornecem um mtodo de propsito geral mais paralelizado.57 setClipboard: Copia strings de dados para a rea de transferncia do sistema. "GetClipboard" no permitido por razes de segurana. HTML5+JS: Firefox e WebKit fornecem APIs internas para a rea de transferncia. O atributo arrastvel inclui rotinas de linguagem para lidar com arrastar e soltar e eventos da rea de transferncia. O acesso a rea de transferncia um problema complicado por causa dos riscos de segurana ao redor do seu contedo e o potencial de roubo de dados de um usurio desavisado. HTML5 tambm tem uma proposta de API-Desfazer. TextField e Text Layout Framework: TextField fornece uma API para imprimir e entrada de texto com opes para formatao, seleo e texto em HTML. Text Layout Framework uma aplicao de texto em Flash, contendo novos recursos para o layout, os controles de interface do usurio, e internacionalizao. HTML5+JS: @font-face permitir fontes incorporadas, cobrindo deficincias de unicidade. Canvas e SVG esto disponveis como opes de ltimo recurso caso o texto necessite de transformaes e filtros elaborados. Formulrios de navegadores so editores de entrada mais confiveis, mas visualmente menos flexveis.A emulao de um texto mais estilizado vivel atravs de emulao via SVG e Canvas. RTMP, RTMFP, e Protected Streaming: O Real Time Messaging Protocol um protocolo proprietrio para fluxo de udio, vdeo e dados. Ele tem trs variaes: TCP simples usando a porta 1935; RTMPT, encapsulado em uma solicitao HTTP para atravessar restrioes e firewalls; RTMPS, que utiliza HTTPS. RTMP permite atransmisso de mltiplos canais de dados, e inclui mtodos de chamada de procedimento remoto. A Adobe tem vrias implementaes de servidores disponveis para a srie RTMP. O Real Time Messaging Protocol Flow uma verso baseada em UDP RTMP com funcionalidades adicionais peer-to-peer, permitindo que os usurios se conectem diretamente com microfone e webcam. Protected Streaming um termo da Adobe para a soluo de DRM fornecidos pela srie RTMP, Flash Media Server capaz de criptografar mdia em transferncia para prevenir uma variedade de ataques de roubo de dados. HTML5+JS: No h nenhum equivalente para tal funcionalidade. Alguns fatores podem ser emulados de alguma forma, mas no necessariamente com a mesmas caractersticas de desempenho devido a diferenas nas capacidades de protocolo entre uma implementao TCP/UDP de baixo nvel e que pode ser feito Web Sockets e58 HTTP. A principal fora do RTMP que ele projetado especificamente para a plataforma Flash e trabalha diretamente na sua API. Os recursos peer-to-peer de RTMFP so nicos.5.2.2 HTML5 x Outras tecnologias justificvel considerar que diversas aplicaes podem vir a ser dispensveis com o advento do HTML5. O armazenamento local e acesso a arquivos traz o potencial para tornar redundantes applets e componentes ActiveX. Flex no tem mesmo foco de aplicabilidade mesmo apresentando caractersticas similares a Flash. A programao server-side e facilidade de programao tem em contrapartida um alto custo de memria, sendo assim, segundo Santos (2009), recomenda-se que a tecnologia Flex no seja utilizada para desenvolvimento de sites, pois em nvel de

Html5 Final

Documents

Transcript of Html5 Final