PADRÕES DE DESENVOLVIMENTO COM HTML5



DESENVOLVIMENTO WEB - PADRÕES DE DESENVOLVIMENTO COM HTML5

 

Jonathan Simon Prates

 

Resumo

O artigo apresenta os novos recursos e boas práticas da nova versão da linguagem de marcação padrão para Web, o HTML (Hypertext Markup Language), bem como sua motivação e contribuição para o formato multimídia utilizado na Internet atualmente. Através de pesquisa e análise crítica foi possível identificar os mais diversos pontos que tornam o HTML 4 defasado e deixar em evidencia a necessidade de uma nova versão para a linguagem. O texto também nos mostra a importância da Web Semântica, suas vantagens e como o HTML 5 pode contribuir com essa tecnologia e para o futuro do mercado de Internet.

 

Palavras-chave: HTML 5. Web Semântica. Multimídia. Sites.

 

 

Keywords: HTML 5. Semantic Web. Multimedia. Sites.

 

 

1 Introdução

Atualmente, a linguagem mais utilizada para marcação de hipertexto é o HTML (Hypertext Markup Language) em sua quarta versão. Sua documentação e especificação foram definidas no ano de 1999, pelo consórcio W3C (World Wide Web Consortium). É sabido que naquela época o contexto era totalmente diferente do contexto dos dias de hoje, com acessos limitados à Internet e recursos multimídias. A diferente demanda daquele ano fez com que o mercado de tecnologia contemporâneo considerasse essa linguagem defasada, tanto do ponto de vista estrutural, como no sentido interativo.

No início de 2008, uma outra especificação definiu a quinta versão da linguagem HTML. Nesta versão, novas funcionalidades foram introduzidas para auxiliar os desenvolvedores de aplicações Web. No HTML 5, elementos semânticos e multimídias foram incluídos, com base em pesquisas sobre adoção de práticas de criação e desenvolvimento (IKSON & HYATT, 2008).

 

2 Web Semântica

Neste artigo abordamos o fato de como o mundo tem presenciado um acelerado avanço no que diz respeito à tecnologia da informação, em que a Internet tem papel de destaque, especialmente por representar um dos maiores referenciais de pesquisa dos últimos tempos. É impossível negar a instauração da Web como fonte de informações e serviços para as gerações atuais, movimento cuja tendência provável é o crescimento ainda maior nas próximas décadas. Ainda assim, um dos aspectos que não pode ser ignorado, é a forma limitada como os conteúdos estão estabilizados e estruturados, já que muitas vezes essas informações não podem ser recuperadas e transformadas em dados realmente relevantes para o usuário (TOMAÉL & VALENTIM, 2004).

O modo como é feita a apresentação do conteúdo de um site é o principal ponto que irá determinar a sua importância e qualidade. Para o usuário é odioso ficar procurando e, muitas vezes, não encontrar em uma página da Web, uma informação que ele tem certeza que está lá. E isso só ratifica a fundamental importância de um projeto de arquitetura da informação do site da Web, em que dentre os seus objetivos principais, pode-se destacar a forma como as informações são estruturadas, facilitando o seu entendimento e modo de exibição para o usuário final. Assim, o conteúdo do site ficará disponível de uma maneira simplificada e relevante (ROSENFIELD & MORVILLE, 1998).

A Web Semântica foi projetada por Tim Berners-Lee, o mesmo criador do HTML e da World Wide Web (WWW). A intenção principal com esse projeto é fazer com que certos padrões e ferramentas aperfeiçoem os conteúdos da Web, deixando mais fácil o seu entendimento e a sua administração. A partir dessa ideia, a Web Semântica permite que uma página seja reconhecida e interpretada, tanto pelo homem, quanto pela máquina. Além disso, as páginas construídas nesse ambiente podem ser apresentadas através de gráficos, bem como é possível sua leitura por leitores de tela e por dispositivos móveis, como aparelhos celulares.

 O HTML tem como objetivo realizar a marcação adequada das informações em uma página, fazendo com que assim seja possível que a informação propriamente dita se diferencie através dos motores de busca ou outros aplicativos. Por exemplo, um título de um parágrafo pode ser diferenciado a partir da maneira como é formatado e disposto na página. Porém, é importante salientar que as aplicações computacionais não têm a capacidade de realizar essa distinção, logo elas precisam ter uma outra base, no caso, as tags HTML. Atualmente, com a versão da linguagem HTML utilizada, é permitido fazer a marcação de elementos de vários tipos, configurando-se a estrutura do conteúdo com as informações em suas respectivas áreas. Apesar disso, podemos classificar essa linguagem como ultrapassada, uma vez que não oferece marcação para várias estruturas, não sendo permitida simples marcações, como diferenciar um cabeçalho de um rodapé (IKSON, 2010a).

Berners-Lee et al (2001) ressalvam que "a Web Semântica não é uma Web separada, mas uma extensão da atual. Nela a informação é dada com um significado bem definido, permitindo melhor interação entre os computadores e as pessoas". De acordo com os autores, o projeto da Web Semântica irá implementar padrões tecnológicos que facilitarão as trocas de informações entre agentes pessoais, além de deixar a linguagem mais clara para a compartilhamento de dados entre dispositivos e sistemas de informação de uma maneira geral.

O projeto da Web Semântica, em sua essência, é a criação e a implantação de padrões (standards) tecnológicos para permitir esse panorama, que não somente facilite as trocas de informações entre agentes pessoais, mas principalmente estabeleça uma linguagem franca para o compartilhamento mais significativo de dados entre dispositivos e sistemas de informação de uma maneira geral.

 

3 Os novos recursos da Web

A ideia do HTML sempre foi ser uma linguagem de marcação independente de aspectos alheios, como sistemas operacionais, navegadores, dispositivos móveis etc. O objetivo era criar um código que pudesse ser lido por diferentes tecnologias, sem haver a necessidade de diversificar os dispositivos, o que representaria uma economia de tempo e dinheiro.

Na época em que foi lançado o HTML 4, a W3C informou aos profissionais da área de tecnologia da informação, as boas práticas de desenvolvimento que deveriam ser seguidas. Entretanto, essa versão não trazia diferenciação real à semântica do código, além de apresentar maior dificuldade para que os elementos de um site fossem manipulados. Além do que, naquele momento, pouco se pensava em recursos multimídias e interoperabilidade.

Com o objetivo de contornar essa questão, a alternativa encontrada pelas empresas de tecnologia da informação foi a criação e utilização de plugins[1]. Porém, embora esse tipo de programa seja definido como "pequeno e leve", há um problema porque o navegador precisa instalar um novo plugin para cada tipo novo de funcionalidade específica. Ou seja, considerando esses fatos, o conjunto de plugins instalado acaba tornando-se muito pesado e inflexível para o navegador.

Esse problema é só mais um aspecto que tende a confirmar a ideia de que a quarta versão do HTML já não é mais suficiente para oferecer o suporte necessário à demanda do mercado de tecnologia da informação nos dias de hoje.  Enfim, o HTML 4, com as suas especificações feitas de acordo com as necessidades do contexto da época em que foi elaborado, já não se adéqua para a atual realidade. Aí então surge o HTML 5, com modificações na maneira como os códigos são escritos e como as informações são organizadas dentro da página. Em resumo, é mais semântico e com menos códigos. Essa última versão utiliza códigos prontos para dispositivos futuros, o que torna  mais fácil a reutilização das informações de diversas maneiras e, ao mesmo tempo, favorece a interatividade e a performance, por dispensar a instalação de plugins.

 

3.1 Recursos de renderização de gráfico vetorial

As tags canvas são designadas para realizar a renderização de imagens em bitmap, e são especificadas para a breve edição de imagens através de JavaScript ou APIs, Application Programming Interface (Interface de Programação de Aplicações). Segundo Boulos et al (2010), esse tipo de edição tem uma maneira muito semelhante a outros geradores de imagens em duas dimensões (2D), além de as tags canvas serem compatíveis com as folhas Cascading Style Sheets (CSS).

 

3.2 Elementos para disponibilidade de conteúdo

A novas tags de disponibilidade de conteúdo têm como objetivo aumentar a semântica da página, evitando assim, a difícil localização de informações em um site da Web. No quadro 1, estão representadas as principais tags, bem como suas respectivas descrições.

Tags

Descrição

O elemento representa uma seção genérica de um documento ou aplicativo. A seção, neste contexto, é um agrupamento de conteúdos temáticos, tipicamente com um título.

Exemplos de seções seriam capítulos, as diversas páginas com abas em uma caixa de diálogo com guias, ou seções numeradas de uma tese.

O elemento representa um grupo de cabeçalhos auxiliares de apresentação ou de navegação.

O elemento representa uma seção de uma página com links para outras páginas ou partes dentro da página, ou seja, um menu.  Nem todos os grupos de links em uma página precisam estar em um elemento . Somente seções que consistem em blocos de navegação principais são adequadas para o elemento .

O elemento representa um conteúdo de um documento, página, aplicativo ou site e que são, em princípio, independentemente distribuíveis ou reutilizáveis. Poderia ser um post em um fórum, um artigo de revista ou jornal, um blog, comentário de usuário ou qualquer outro item de conteúdo independente.

O elemento representa o título de uma seção. Este elemento é usado para agrupar um conjunto de elementos

- quando o título tem vários níveis, como subtítulos e títulos alternativos. Para efeitos de resumos de documentos, esboços e assim por diante, dos textos de elementos dentro do , o

é definido como sendo o mais conceituado, passando por

,

, , até como menos conceituado.

O elemento representa um bloco lateral de conteúdo separado do conteúdo principal.

Essas seções são muitas vezes representadas como barras laterais em tipografia impressa. O elemento pode ser usado para áreas de publicidade, grupos de elementos de navegação ou até mesmo outros recursos relacionados ou não com o conteúdo principal.

O elemento representa um rodapé para a página. Normalmente um rodapé contém informações sobre a empresa ou blog, links para documentos relacionados, os dados de direitos autorais etc.

Quadro 1 ? Tags

Fonte: IKSON, 2010b

 

 

3.3 Recursos de caching de aplicações

Uma outra grande vantagem do HTML 5 é a possibilidade de acessar os aplicativos Web offline através do cache. Este processo acontece a partir do arquivamento desses aplicativos feitos pela Uniform Resource Locator (URL), onde cada um deles terá uma respectiva categoria.

 

As entradas mestre são aqueles documentos que foram adicionados ao cache por um contexto de navegação indicado por um atributo de manifesto. Já o manifesto é a fonte da URL indicada na entrada mestre do HTML. Esses arquivamentos ainda podem ser agrupados ou não (IKSON, 2010b).

 

3.4 Recursos de Base de dados

Na quinta versão do HTML, além do banco de dados Structured Query Languag (SQL), outras facilidades foram implementadas, como por exemplo, a possibilidade de entradas de valores ou palavra-chave. Embora os bancos de dados não sejam frequentemente utilizados pelos usuários não desenvolvedores, essas características são bastante importantes para os sites (IKSON, 2010a).

 

3.5  Elementos Multimídias

Certamente, uma das maiores limitações da versão atual do HTML é a falta de suporte para exibição de recursos gráficos e elementos multimídias. Como ressaltado por Andrade & Marchi (2010), deve-se considerar que no ano de 1999, quando foi feita a especificação do HTML 4, esses conteúdos não eram tão relevantes, então praticamente não se tinha preocupação com esses recursos. É importante lembrar que naquela época não havia infraestrutura da Web nem capacidade pelos meios de acesso para dar suporte ao desenvolvimento de aplicativos que usem esses tipos de recursos.

A proposta do HTML 5 é a inclusão de conteúdos através de novas tags que irão renderizar elementos específicos para cada um deles, de acordo com a sua informação. A tag , já amplamente divulgada,  destaca-se dentre esses elementos, especialmente por atender as tendências de mercado de vídeos na Web. O novo elemento é extremamente flexível, simples e robusto, permitindo ao desenvolvedor ganho na produtividade, uma vez que os vídeos são exibidos da mesma maneira de que uma simples imagem. A especificação desta linguagem possui diretrizes para que os navegadores Web disponham de controles nativos para exibição de vídeos.

 Semelhante ao elemento , temos o elemento , referente à execução de áudios. Do mesmo modo, esta tag possibilita a inserção de áudios de forma simplificada (IKSON, 2010ab).

 

3.6 Elementos para geolocalização

Saber onde as pessoas estão é um desejo que a cada dia se torna mais aguçado nos seres humanos. Através do HTML 5, é possível que a localização do usuário seja identificada e que esta informação seja repassada aos sites e serviços acessados. OS APIs serão fundamentais nesse processo de localizar um usuário.

A definição dada para esse recurso que irá permitir a geolocalização é geottaging. A partir disso, o usuário poderá ter acesso a conteúdos de interesse específico para o ponto onde ele se encontra. Essa tecnologia é de grande utilidade para aplicativos de dispositivos móveis, como por exemplo, os smartphones, que irão justamente servir para troca de dados e informações referentes à localização do usuário (BOULOS et al, 2010).

 

4 Os navegadores da Web

O HTML 5 ainda é um trabalho em desenvolvimento e seu término não está previsto para antes de 2012. Devido a este fato, não há urgência em alterar os códigos dos sites utilizados atualmente para as novas tags. Existe uma implementação parcial das tags feitas pelos navegadores Mozilla Firefox e Google Chrome.

O navegador mais utilizado pela população em geral é o Internet Explorer da Microsoft. Ele possui um suporte mínimo ao HTML 5 e pode ser o último navegador a implementar as especificações da nova linguagem. Até a implementação total do HTML 5 por todos os navegadores do mercado, os desenvolvedores terão de continuar a desenvolver com HTML 4 em seus sites. Isso evitará que os usuários tenham experiências frustrantes.

 

5 Conclusão

As demandas cada dia mais específicas do mercado, deixam explicita a defasagem do HTML 4 e a urgente necessidade de mudança.

A nova versão do HTML pretende viabilizar uma plataforma de desenvolvimento mais robusta para aplicações web, pois não irá implicar na falta de recursos e terá facilidades para resolver as necessidades atuais de mercado dos desenvolvedores, que por sua vez terão muito mais opções e recursos com a nova documentação e que com certeza irá continuar a crescer cada vez mais. Temos que lembrar que de nada valem os novos elementos da linguagem sem uma análise crítica do desenvolvedor com base nas diretrizes da Web Semântica.

Como a maioria dos navegadores suportam apenas parcialmente os elementos HTML 5, no momento, não faz sentido totalmente redesenhar um site usando a nova versão da linguagem. No entanto, quando HTML 5 se tornar o padrão recomendado pela W3C, sites desenvolvidos em HTML 4 terão seu conteúdo classificado como pouco relevante.

 

Referências

BERNERS-LEE, T. et al. The semantic Web. Scientific American, mai. 2001. Disponível em: . Acesso em: 25 nov. 2010.

 

BOULOS, K. N. M. et al. Web GIS in practice VIII: HTML5 and the canvas element for interactive online mapping. International Journal of Health Geographics, Estados Unidos, 2010.

 

ANDRADE, D. A. de; MARCHI, K. R. da C. HTML 5: Novos padrões para Web Semântica. Unipar: Paraná, 2010.

 

IKSON, I. HTML 5: A vocabulary and associated APIs for HTML and XHTML. W3C Working Draft, 16 nov. 2010a. Disponível em: . Acesso em: 01 dez. 2010.

 

______. Web SQL Database. W3C Working Group Note, 18 nov. 2010. Disponível em: . Acesso em: 01 dez. 2010b.

 

_____; HYATT, D. HTML 5: A vocabulary and associated APIs for HTML and XHTML. W3C Working Draft, 22 jan. 2008. Disponível em: . Acesso em: 10 nov. 2010.

 

ROSENFIELD, L.; MORVILE P. Information architecture for the World Wide Web: designing large-scale web sites. Cambridge: O?Reilly, 1998.

 

TOMAÉL, M. I.; VALENTIM, M. L. P. (Orgs). Avaliação de fontes de informação na Internet. Londrina: EDUEL, 2004.

 

WIKIPÉDIA. Plugin. Disponível em: . Acesso em: 27 nov. 2010.

 


[1] Um plugin é um programa de computador usado para adicionar funções a outros programas maiores, provendo alguma funcionalidade especial ou muito específica. Geralmente pequeno e leve, é usado somente sob demanda. [...] A aplicação hospedeira prove serviços que o plugin pode usar, incluindo uma forma da extensão registrar a si mesma na aplicação hospedeira e um protocolo para a troca de informações entre eles. Os plugins dependem de tais serviços e geralmente não trabalham por conta própria. Em contrapartida, a aplicação hospedeira é independente, de forma que é possível adicionar e atualizar os plugins dinamicamente, sem a necessidade de efetuar alterações na própria aplicação hospedeira (WIKIPÉDIA).


Autor: Jonathan Simon Prates


Artigos Relacionados


Xml: Como Linguagem De Marcação, Utilizada Principalmente Para Classificação E Organização De Dados

Xml

Otimização De Web Sites – Seo

Seo

7 Grandes Erros Na Criação De Sites

Dicas Para Quem Quer Ser Web Designer Ou é Iniciante.

Fórmulários Html, Php E Banco De Dados Mysql 1