3.1.4.1. HTML5
HTML (HyperText Markup Language) é uma linguagem de marcação de texto que veio a evoluir ao longo dos tempos desde a sua criação, tendo a primeira versão surgido em 1991, sendo concebida originalmente por Tim Berners-Lee (W3C, Introduction to HTML 4, 2015). A primeira versão do HTML foi baseada na linguagem SGML (Standard Generalized Markup
Language). O SGML era utilizado para a estruturação de documentos e foi dele que o HTML
Capítulo 3 – Tecnologias
23
A maior diferença entre essas duas linguagens de marcação é que o HTML implementava a tag <a>3 com o atributo href4, permitindo assim ligações (links) entre páginas distintas. Esse conceito de interligação entre documentos é a base do funcionamento de toda a Web (William, 2015).
O HTML 1.0 foi a primeira versão do HTML. Nesta época a linguagem não era muito utilizada e por si só era muito limitada. Esta versão possuía apenas vinte elementos, em que treze dos quais ainda são utilizados no HTML 4.0 (Bartels, 2015).
Em 1994 surge o HTML 2.0, que incluía tudo, desde a especificação original do HTML 1.0 e com novas funcionalidades. Tornou-se o primeiro padrão para as normas vindouras do HTML e a base de construção para todos os navegadores até ao HTML 3.2. O HTML 2.0 foi usado como uma referência durante a explosão da Web (Shannon, 2015).
O HTML 3.0 foi baseado no HTML 2.0, trazendo consigo novos recursos tais como, tabelas, fluxos de texto em torno de figuras e a exibição de elementos matemáticos complexos (Raggett, 2015).
O HTML 3.2 não é uma variante/extensão direta do HTML 3.0, uma vez que esta nova versão contém elementos do HTML 2.0 e apenas algumas caraterísticas modificadas do HTML 3.0. Esta nova versão foi definida pela World Wide Web Consortium (W3C) com o intuito de padronizar a linguagem (William, 2015).
A linguagem HTML 4.0 trouxe consigo mecanismos para as folhas de estilo5, scripts, molduras, objetos integrados de suporte para texto à esquerda, à direita e em direções combinadas, tabelas mais complexas e melhorias nos formulários, oferecendo uma maior acessibilidade a todos aqueles que nunca usufruíram desta nova versão (W3C, Introduction to HTML 4, 2015).
Com o aparecimento do HTML 4.0 surgiu também o desenvolvimento das linguagens como o XHTML (eXtensible Hypertext Markup Language), XFORMS, MathML (Mathematical Markup Language) e outras especificações mais modernas da W3C (William, 2015).
3 A tag <a> significa “action” e indica que a área clicada pelo ponteiro do rato do computador efetuará uma ação quando clicada. 4 Atributo cujo valor é um endereço do website ao qual o link aponta.
5 O conceito de folhas de estilo apareceu em 1996 com a publicação pelo W3C de uma nova recomendação intitulada “Cascading StyleSheets”
24
Pouco tempo depois do aparecimento do HTML 4.0, surgiu o HTML 4.01. Esta nova versão surgiu unicamente para efeitos de revisão do HTML 4.0, na qual foram corrigidos alguns erros e efetuadas algumas alterações (W3C, Introduction to HTML 4 , 2015).
Perto do início do século 21, a W3C lançou o XHTML com uma recomendação. O XHTML é uma versão mais limpa e mais rigorosa do HTML 4.0 baseada em XML (eXtensible
Markup Language), combinando as tags de marcação do HTML com as regras impostas pelo
XML. Sendo assim, combinando os pontos fortes do HTML 4.01 e do XML, foi desenvolvido o XHTML (w3schools, HTML and XHTML, 2015).
Para além de ser suportado por todos os principais navegadores, também se tornou essencial para permitir a visualização de conteúdo Web em qualquer tipo de dispositivos, independentemente da plataforma utilizada.
Em 2009 surge o HTML 5. Este é a última evolução no padrão que define o HTML, sendo concebido para substituir o HTML 4.01, XHTML e o HTML DOM. Este herda da sua linguagem passada, HTML 4.01, alguns dos seus atributos e tags, trazendo consigo novas inovações, sendo elas (W3Schools, 2015):
Novos elementos; Novos atributos; Interoperabilidade; CSS3 Suporte completo; Vídeo e áudio; Gráficos 2D/3D; Local Storage; Local SQL Database; Armazenamento off-line;
Foi essencialmente concebido para proporcionar um conteúdo mais rico e dinâmico, sem que seja necessária a execução de plugins6 adicionais.
O HTML5 veio aumentar as capacidades dos browsers permitindo a execução de aplicações mais ricas na internet (Shah, 2012). Esta nova linguagem para além de ser executável
6 Os plug-ins ajudam o navegador a processar tipos especiais de conteúdo Web, como ficheiros Flash ou Windows Media (Christensson,
Capítulo 3 – Tecnologias
25
nos browsers mais modernos de hoje em dia, pode também ser executada nos dispositivos móveis mais recentes, tendo levado a uma adaptação dos mesmos para que permitam executar aplicações Web ou Nativas (Shah, 2012).
3.1.4.2. JavaScript e JQuery
JavaScript (JavaScript, 2015) é uma linguagem de programação criada pela Netscape em 1995. Foi concebida com o intuito de atender às necessidades de interação com a máquina no lado do cliente, tornando desnecessário o reenvio de informação para o servidor já que o tratamento da informação é feito diretamente no Browser, tornando a ação desejada muito mais rápida. O JavaScript tem como principal objetivo a manipulação dos elementos de uma página HTML, tornando-se ideal para o desenvolvimento de páginas dinâmicas (QuinStreet Inc., 2010).
JQuery (jQuery Foundation, 2015) é uma biblioteca de JavaScript de código aberto
desenvolvida por John Resig, de fácil utilização com uma curva de aprendizagem bastante curta. A sua principal função consiste em substituir as mais complexas tarefas do JavaScript por funções mais simples, diretas e compatíveis com a generalidade dos Browsers existentes hoje em dia. Desta forma o JQuery destina-se a adicionar interatividade e dinamismo às páginas Web, incrementando a usabilidade, a acessibilidade e o design. Desta forma é possível adicionar às páginas Web efeitos visuais, prover interatividade, alterar conteúdos e resolver problemas de incompatibilidade entre os navegadores (Miller-Francisco, 2010).
3.1.4.3. JSON
JSON (JavaScript Object Notification) é um formato de texto para a serialização de estruturas de dados (Figura 13). Foi desenhado para ser uma linguagem de transmissão de dados de uma forma estruturada e legível. Esta linguagem é suportada diretamente dentro do
JavaScript, sendo mais adequada o uso da mesma em aplicações JavaScript. Proporciona
ganhos de desempenho significativos sobre XML, o que requer bibliotecas adicionais para efetuar processamento de dados (Nurseitov, Paulson, Reynolds, & Izurieta, 2009).
26
3.1.4.4. JavaScript Infovis Toolkit
O JavaScript InfoVis Toolkit (Belmonte, JavaScript InfoVis Toolkit, 2015) foi desenvolvido por Nicolas Garcia Belmonte como sendo um package que deriva do JavaScript oferecendo uma API (Application Programming Interface) em padrões da Web para a criação e visualização de informação, a qual pode ser integrada numa plataforma de HTML5, pela integração de HTML e CSS3.
Este kit implementa recursos avançados de visualização de informação como
TreeMaps, uma visualização adaptada de árvores baseadas no SpaceTree, entre outros
exemplos tais como, area charts, bar charts, pie charts, sunburst, etc.
Como estrutura básica dos dados under the hood a visualizar é usado o JSON, o qual permite que os mesmos dados possam ser transformados em diferentes outputs gráficos.
{"widget": { "debug": "on",
"window": {
"title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": {
"data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center",
"onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" }
}}
Capítulo 3 – Tecnologias
27
Esta API permite adicionar alguns recursos adicionais na parte superior da biblioteca JIT (JavaScript InfoVis Toolkit) para permitir aos utilizadores uma maneira simples de adicionar características comuns à visualização JIT, tais como, entre outros:
Pesquisa personalizada de nós na visualização.
Fácil configuração de opções de visualização (opção de zoom).
Implementar eventos nos elementos.
Funcionalidades de adicionar e eliminar, arrastar e largar os elementos.
Figura 14 - Exemplo de uma representação de uma estrutura de dados através do package JIT (Belmonte, Demos,
28