Análise da Nova Linguagem HTML5 para o Desenvolvimento Web

Transcrição

1 Análise da Nova Linguagem HTML5 para o Desenvolvimento Web Sergio N. Ikeno¹, Késsia Rita da Costa Marchi¹ ¹Universidade Paranaense (Unipar) Paranavaí PR Brasil sergioikn@gmail.com, kessia@unipar.br Resumo. Este artigo constitui uma pesquisa, realizando uma abordagem geral sobre o HTML5, apresentando oque é, e como surgiu, as mudanças em relação a sua versão anterior, irá apresentar algumas das novas tags que compõe a estrutura básica do código, irá apresentar a função de cada uma, mostrar nova estrutura, e a preocupação em relação à compatibilidade com os browsers. 1. Introdução No ano de 1998, os programadores da empresa W3C (Word Wide Web Consortium) decidiram interromper o desenvolvimento do HTML porque acreditavam que o futuro estava no XML 1. O HTML parou na versão 4.01 quando surgiu uma nova versão chamada de XHTML que nada mais era que uma versão do HTML, pois adotava todos os padrões do XML[SILVA 2010]. Devido à junção das duas linguagens, levaram os desenvolvedores da W3C desenvolver os códigos de uma forma mais estruturada e organizada. Alguns desenvolvedores não eram a favor desta vinculação e decidiram continuar apenas com o XML. A partir dai, os trabalhos começaram a ser desenvolvidos paralelamente, e passado algum tempo, após a criação de uma especificação conhecida como Web Forms 2.0, seu nome foi alterado para HTML5, pelo grupo WHATWG (Web Hypertext Application Technology Working Group) liderado por Ian Hickson [SILVA 2010]. Em Outubro de 2006, a W3C e o WHATWG se uniram no desenvolvimento do HTML5 após o líder da W3C Tim Berners-Lee reconhecer o trabalho da WHATWG. A pesar disso tudo o XHTML foi mantido, sendo desenvolvido paralelamente ao HTML5. Em 2009 o grupo resolveu abandonar o desenvolvimento do XHTML2 [W3C 2010]. O objetivo deste trabalho é o estudo dessa nova Linguagem que vem sendo desenvolvida com a intenção de simplificar a vida dos desenvolvedores e usuários, através de novas tags entre outros, possibilitando a reprodução de áudio de vídeo, executados diretamente no código fonte da aplicação, sem a necessidade de instalações de plug-ins trazendo-lhe mais leveza e agilidade, e assim, evitando os incômodos erros de Plug-ins. 1 XML (Xtensible Markup Language) é uma linguagem de marcação recomendada pela W3C para criação de documentos [PEREIRA 2009].

2 2. O que é o HTML5? É considerada a versão aprimorada do HTML4. Esta nova versão é capaz de fornecer ferramentas tanto para Javascript quanto para CSS, possuem APIs capazes de fazer a permissão da própria manipulação dos elementos, de forma que eles continuem com o melhor desempenho possível [Ferreira et al 2011]. O Principal objetivo do HTML5 é facilitar para o desenvolvedor uma maneira em que o próprio possa desenvolver de uma forma simples e clara para o cliente final [Ferreira et al 2011]. O HTML5 possibilita a criação de novas Tags e modifica certas funções de outras, diferentes de suas versões anteriores, não continham um padrão para a criação de seções comuns e especificas exemplo: cabeçalho rodapé, menus entre outros. Modifica também o modo de organização das informações na página e a maneira de como escrever o código. Irá dispensar a instalação de Plug-ins e consequentemente amenizando a perda de desempenho [Ferreira et al 2011] Estrutura Básica do HTML5 A estrutura que o HTML5 utiliza é praticamente idêntica à suas versões anteriores, a diferença está na redução do código. Como podemos ver na Figura 1. Figura 1. Estrutura básica do HTML5 mostrada no programa NotePad++ O Doctype deve sempre estar na primeira linha do código antes da Tag do HMTL. O Doctype não é uma Tag do HTML e sim um tipo de instrução para que o Browser tenha informações suficientes sobre o código escrito.

3 A função do Doctype é fazer a indicação sobre qual especificação de código o navegador deve utilizar. Nas versões anteriores, obrigatoriamente preciso fazer a referencia do DTD (Document Type Definiton) do código do Doctype. No HTML5 esta referencia é de total responsabilidade do Browser [Ferreira et al 2011] Novas Tags Com desenvolvimento do HTML5 foram introduzido novos elementos, todos eles com o intuito de facilitar a compreensão do código. Algumas Tags são uma evolução do elemento <div> as demais foram desenvolvidas com o intuito de padronização [SARTI 2009] Elementos Estruturais A Figura 2 mostra 6 elementos que compõe a estrutura de uma pagina em HTML5. Figura 2. Estrutura básica de um pagina HTML5. (Fonte. Descrição das Tags de Estrutura: <header> - Cabeçalho da página ou de uma sessão; <section> - Cada sessão do conteúdo; <article> - Um item do conteúdo dentro da página ou da sessão; <footer> - O rodapé da pagina ou de uma sessão; <nav> - Conteúdo relacionado ao artigo Tags de Audio de Video Uma das novidades que mais se destacam nesta nova versão são as tags de <audio> e <video>, com esses novos recursos é possível que o usuário reproduza arquivos de

4 mídia diretamente do navegador sem a necessidade do uso de Plug-ins. Representação da utilização da tag <video> e <audio> representado no Quadro 1 e 2. <video width="400" height="300" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> Seu Navegador Não Suporta Vídeo em HTML5 </video> Quadro 1. Sintaxe da Tag <video>. (Fonte. <audio controls="controls"> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mp3" /> Seu Navegador Não Suporta Áudio em HTML5 </audio> Quadro 2. Sintaxe da Tag <audio>. (Fonte Compatibilidade com os Browsers Os desenvolvedores tem buscado manter um bom nível de compatibilidade com os navegadores levando em conta suas particularidades, e uma forma de manter o código sempre seguro é realizando um nivelamento do desenvolvimento de acordo com os motores de renderização de cada navegador, ou seja, são responsáveis pelo processamento do código na página. A Tabela 1 mostra os principais navegadores e seus motores [BOSSI 2012]. Tabela 1. Principais navegadores e seus motores. (Fonte: É indispensável que o código esteja compatível de acordo com cada motor para que os navegadores possam decifra-los. Segundo estudos realizados o motor Webkit é o que mais se mostrou compatível de acordo com os padrões HTML5 [BOSSI 2012].

5 4. Metodologia Para a realização deste artigo foi realizado uma vasta pesquisa em Artigos Científicos, sites da Web e Trabalhos de Conclusão de Curso. Todos os textos foram analisados e estudados detalhadamente, que ao final compôs o projeto. 5. Conclusão Com base no estudo realizado para a finalização deste projeto, pode-se notar que, esta nova tecnologia HTML5 trouxe novos recursos para facilitar o desenvolvimento web. No entanto, esta nova linguagem está encontrando dificuldades em relação a sua execução nos Browsers atuais, que no momento não suportam por completo esta nova linguagem. Este artigo abordou alguns dos novos recursos do HTML5, os quais foram desenvolvidos com o intuito de agilizar e trazer mais semântica ao projeto, no qual haverá uma pequena mudança na forma de implementação, através da utilização de novas tags. O próximo passo é continuar colocando em pratica esta nova tecnologia para que ela possa crescer, através de erros encontrados, e assim, possam ser buscadas as soluções e ser resolvidos, melhorado a cada dia. Referências Bossi, Maira, COMPATIBILIDADE DO HTML 5, Disponível em < Acesso em 21/junho/2013. Eduardo, Paulo, Tags Multimídia HTML5, Disponível em < Acesso em 22/junho/2013. Ferreira, Élcio e Eis, Diego, HTML5 Curso W3C Escritório Brasil, Disponível em < > Acesso em 26/Abril/2013. Sarti, Erika, Introdução ao HTLM5,2009. Disponível em < Acesso em 29/maio/2013. Silva, D. Felipe, USO DO HTML5 EM SUBSTITUIÇÃO AO ADOBE FLASH, Disponível em < Douglas-Felipe-Da-Silva>. Acesso em 25/Julho/2013. W3C, Cursos, A Visão Geral do HTML5, Disponível em < Acesso em 25/julho/2013.