HTML5 E WEB SEMÂNTICA, A WEB COM SIGNIFICADO Djalma Gonçalves Costa Junior¹, Willian Barbosa Magalhães¹ ¹Universidade Paranaense (Unipar) Paranavaí - PR - Brasil djalma.g.costajr@gmail.com wmagalhaes@unipar.br Resumo. Este artigo constitui de uma breve descrição do HTML5 (HyperText Markup Language) e Web Semântica, apresentando seus conceitos e novidades, o porque da utilização da semântica no código, bem como a apresentação de alguns novos elementos do HTML5 que foram criados e/ou modificados para o desenvolvimento de web sites com semântica. 1. Introdução O HTML5 é uma linguagem que ainda está em desenvolvimento, porém sua forma de desenvolvimento modular, já nos permite utilizar alguns de seus poderosos recursos para o desenvolvimento de web sites. A Web Semântica por sua vez, é anterior ao HTML5, entretanto, a partir do desenvolvimento deste, o conceito de semântica no código passou a ganhar força, pois muito do que foi criado e/ou alterado, foi para atender o conceito de semântica e assim darmos significado às páginas desenvolvidas. 2. O que é o HTML5 e quais suas Novidades? O HTML5 começou a ser desenvolvido inicialmente em 2004, por um grupo de desenvolvedores de empresas privadas como Mozila e Apple, separados da W3C (World Wide Web Consortium), o WHATWG (Web Hypertext Application Technology Working Group). Estes desenvolvedores não estavam satisfeitos com a evolução da web e do HTML4 junto ao XHTML. Os principais assuntos no qual o WHATWG se focava era a criação de um padrão Web Forms 2.0, que modificaria a maneira e recursos de utilização dos formulários do HTML e o Web Controls 1.0, que foi abandonado (por enquanto) e não está sendo utilizado no HTML5. Em 2006 o trabalho que estava sendo desenvolvido pelo WHATWG, passou a ser reconhecido no mundo inteiro, e principalmente pelo W3C que logo depois anunciaria a parceria juntamente com o WHATWG no desenvolvimento do HTML5. O HTML5 tem como um dos principais objetivos facilitar a manipulação dos elementos para tornar o desenvolvimento mais simples e otimizado. Esta versão também trás um grande suporte e ferramentas para a utilização de CSS e JavaScript,
fazendo com que as aplicações ou web sites continuem sempre leves e funcionais sem necessitarem da criação de grandes scripts. Houve a criação de novas tags e a modificação da função de outras, além, também, da implementação de novas funções nativas da linguagem para que se desenvolva de forma mais interativa e sem a necessidade da instalação de plug-ins externos para a execução de tarefas como: rodar vídeos, renderização 3D, renderização de gráficos, geolocalização, dentre outros, possibilitando assim uma melhora significativa na performance. O HTML5 também modifica a forma de como escrever o código e a forma de organização das informações na página, sendo assim, mais semântica e menos código. 3. O que é Web Semântica? Gramaticalmente falando, semântica é o estudo das palavras no que diz respeito a seus significados, estudo do sentido das palavras. E o que tem haver este estudo dos sentidos com o desenvolvimento de web sites? O conceito de Web Semântica surgiu em 2001 com a publicação do artigo, "Web Semântica: um novo formato de conteúdo para web que tem significado para computadores e que vai iniciar uma revolução de novas possibilidades.", desenvolvido em parceria por Tim Berners-Lee, James Hendler e Ora Lassila e publicado pela revista Scientific American. Segundo Tim Berners-Lee, criador da web e impulsionador da web semântica no W3C, "A Web Semântica é uma extensão da web atual na qual a informação recebe um significado claro e bem definido, possibilitando uma melhor interação entre computadores e as pessoas" [Berners-Lee, 2001]. A web semântica tem por objetivo tornar as informações encontradas na web entendíveis, não apenas para as pessoas, mas também para as máquinas, permitindo que estas possam manipular informações de uma forma semelhante às que as pessoas utilizam. Desta forma, as pesquisas diárias tornar-se-ão muito mais rápidas e precisas no sentido de que, ao manipular informações baseadas no que estamos pesquisando, a própria web encarregar-se-á de "garimpar" as informações mais relevantes, ao invés de precisarmos fazer isto manualmente, como é feito hoje. A intenção da web semântica não é substituir pessoas e sim fazer com que as máquinas trabalhem de forma cooperativa e otimizada com os seres humanos. Figura 1 - Exemplo de funcionamento da Web Semântica [LUÍS 2011]
A Figura 1 acima, apresenta um exemplo perfeito do funcionamento da semântica na web. As máquinas serão capazes de analisar e identificar o tipo de informação de forma semelhante à de uma pessoa, assim, as informações apresentadas terão muito mais precisão, tornando o processo de busca mais ágil. 4. Recursos HTML voltados à Semântica O desenvolvimento da web semântica iniciou-se através da utilização de várias tecnologias, tais como: extensible Markup Language (XML), Resource Description Framework (RDF), arquitetura de metadados, ontologias, entre outras. Com a criação e desenvolvimento do HTML5, foram criadas novas tags, o conceito de microdata, dentre outras API's (Application Programming Interface) que visam simplificar e facilitar o desenvolvimento. A criação de sites com semântica depende não apenas da utilização de tags, microdatas ou qualquer outra API, mas também da forma como é organizada as informações na página, ou seja, torna-se necessária a criação de uma metodologia e padrões para o uso dos novos recursos, dar início à utilização da semântica no código. Alguns dos principais elementos semânticos apresentados para o HTML5 foram os elementos de seções do código: <HEADER>, <NAV>, <ARTICLE>, <ASIDE>, <SECTION>, <HGROUP>, <FOOTER>, estes elementos vieram para substituir as tags <DIV> que são utilizadas para o desenvolvimento dos layouts das páginas. Há também tags com semântica como: <P>, <H1 a H6>, <STRONG>, <CODE> e também a API Microdata, esta servirá para adicionarmos propriedades descritivas mais específicas para cada elemento. A Figura 2 apresenta as diferenças dos elementos de seção do XHTML (à esquerda) e do HTML5 (à direita), lembrando que o posicionamento do layout fica a cargo do CSS. Figura 2 - Diferença nas estruturas XHTML e HTML5 [DINIZ e CECCONI 2011] 4.1 Elementos de seção do HTML5 Neste tópico serão apresentados alguns dos novos elementos/tags do HTML5 que são usados para definição das principais seções da página no desenvolvimento com semântica. Antes do surgimento destas, er- F a difícil identificar de maneira automática
os elementos estruturais do código. 4.1.1. Header O elemento header define os elementos de cabeçalho. O grande diferencial deste elemento, é que não é apenas utilizado para determinar o cabeçalho da página e sim para qualquer característica de cabeçalho. Como podemos ver acima na Figura 2, o header serviu para definir o cabeçalho de layout da página, mas também podemos utilizar dentro do elemento article para definir o cabeçalho do conteúdo em questão, como no exemplo abaixo. 4.1.2. Footer O funcionamento do elemento footer é bem semelhante ao header, a diferença é que o footer é utilizada para determinar os elementos de rodapé, tanto da página como de outros elementos dentro da página. 4.1.3. Section O elemento section é mais específico em relação à tag div utilizada anteriormente, porém é menos específico que os demais elementos da seção, pois apenas divide, não especificando as seções, simplesmente separando por um determinado assunto. 4.1.4. Nav O elemento nav determina um bloco de links de navegação e pode estar presente dentro de outros elementos do HTML como o header, footer, aside, para criação de menus. A grande diferença semântica no uso da tag nav em relação à div, é a relação criada entre o grupo de navegação com os links do grupo, ou seja, sites de buscas poderão encontrar facilmente os links referentes ao assunto. Também é possível criar vários grupos de links dentro de uma única tag nav, conforme exemplo a seguir. 4.1.5. Aside O elemento aside define um bloco de informações referentes ao conteúdo principal. Podemos utilizá-lo como citações ou sidebars, agrupamento de publicidade ou grupos de navegação. Este elemento nos permite criar, por exemplo, um menu lateral com os grupos de informações do site. 4.1.6. Article O elemento article é onde colocamos o texto ou informação principal, ou seja, é um bloco de texto onde é definido o conteúdo principal do site e onde são inseridas todas as informações referentes ao conteúdo, como cabeçalho, autor, data de publicação, etc. Desta forma, o article se caracteriza como um elemento mais específico, diferente do section que apenas separa conteúdos distintos, e da tag div que não possuiu nenhum valor semântico. 4.1.7. Microdata A API Microdata é considerada uma semântica adicional para o código, tornando assim a estrutura semântica mais específica, sendo possível definir qual é o conteúdo de cada elemento utilizado e para isto, a API nos possibilita utilizar atributos especiais, como: itemprop, itemscope e itemtype. A API Microdata também fornece maneiras especiais de acesso aos dados através do JavaScript. É possível definir a propriedade de cada elemento utilizando o atributo itemprop e nomeá-lo da maneira que preferir, porém é
importante que haja uma globalização semântica, ou seja, uma linguagem comum para todos os sites da internet, sendo possível seguir um vocabulário global para nomenclatura das propriedades. Para isto acesse o site: http://www.datavocabulary.org/. 5. Metodologia Para o desenvolvimento deste trabalho foi realizada uma revisão bibliográfica em livros, artigos e publicações científicas e web sites da internet. 6. Conclusão O HTML5 é uma linguagem que veio para revolucionar a forma de desenvolvimento e agregar: semântica ao código, recursos nativos e ganho de performance na execução das aplicações. A Web Semântica ainda não é utilizada em grande escala pela necessidade da criação de novos padrões de desenvolvimento por parte dos desenvolvedores, porém, deve-se aumentar o seu uso gradativamente à medida que a forma de automatização e utilização da web continue a evoluir. Referências Diniz, V; Cecconi, C. W3C Futuro da Web - HTML5 - Web Semântica; Material W3C Escritório Brasil. Publicado por W3C Escritório Brasil, 2011. Eis, Diego; Ferreira, Elcio. HTML5 e CSS3 com farinha e pimenta. Publicado por Tableless.com.br, 2012. Ferreira. E.; Eis. D. HTML 5 Curso W3C Escritório Brasil. Disponível em: <www.w3c.br/pub/cursos/cursohtml5/html5-web.pdf>. Acesso em: 24 de julho de 2013. Flatschart, Flávio. HTML5 Embarque Imediato. 3ª Tiragem. Rio de Janeiro. Brasport, 2011. Luís, A. Lições Práticas de Semântica com HTML5 2º evento HTML5PT Disponível em: <http://www.slideshare.net/andr3/lies-prticas-de-semntica-com-html5-2-evento-html5pt>. Acessado em: 24 de julho de 2013. Padrões da Web Semântica. Disponível em: <http://www.w3c.br/padroes/websemantica>. Acesso em: 24 de julho de 2013. Silva, Mauricio Samy. HTML5 A Linguagem de marcação que revolucionou a Web. São Paulo. Novatec Editora, 2011. Tosing, Sergio Luiz. Aplicações na Nuvem como construir com HTML5, JavaScript, CSS, PHP e MYSQL. Rio de Janeiro. Editora Ciência Moderna Ltda., 2012.