5.3 Instanciation des valeurs num´eriques
5.3.1 Impr´ecision et optimalit´e
As linguagens de marcação (por exemplo, HTML, XML, etc. . . ), apresentam algumas limitações, nomeadamente: não permitem a ligação com uma base de dados; e não permi- tem interação com o utilizador, sem o uso de outras linguagens (por exemplo, JavaScript). Estas fornecem instruções de formatação para a renderização estática do conteúdo. Para obter a apresentação de uma página web, os servidores HTTP transmitem respostas que contêm documentos HTML, em que os browsers fazem a renderização dos documentos obtidos nessas respostas. O principal problema é que essa apresentação é estática, ou seja, o HTML não tem um mecanismo que suporte a modificação da página depois desta ter sido renderizada. A página renderizada matém-se inalterada até ao próximo pedido. Mesmo uma simples operação, como por exemplo a validação de um form, requer um processamento no lado do servidor, o que significa que é necessário uma nova conexão ao servidor.
O objetivo principal desta secção é a apresentação da interatividade dinâmica nas pá- ginas web, começando por apresentar os primeiros métodos usados para produzir essa interatividade, passando para o JavaScript, CSS, HTML5 e AJAX. As subsecções seguin- tes foram escritas com base nos seguintes artigos: [28], [25], [16].
Método “Meta-Refresh”
No início da web houve algumas aproximações para mudar o conteúdo da página depois desta ter sido carregada. O método “meta-refresh” usa a tag <META> do HTML, para simular a presença de um cabeçalho HTTP Refresh, que após um período de tempo espe- cífico, faz o carregamento da página a partir do URL corrente (efetivamente para atualizar conteúdo da página) ou redirecionar o browser para uma nova página. Este processo faz com que o conteúdo de toda a página seja recarregado, mesmo para pequenas alterações.
Figura 2.1: Tag <META> que exemplifica uma atualização de uma página
A diretiva representada na figura 2.1, quando inserida dentro tag <HEAD> num docu- mento HTML, redireciona o browser para um novo específico URL após cinco segundos a página ter sido carregada. Esta solução é uma técnica grosseira para a apresentação de conteúdo dinâmico, mas eficaz no início da web.
JavaScript
O método “meta-refresh” apresentado anteriormente não é um substituto para um com- portamento programável. Por isso é necessário ter uma funcionalidade verdadeiramente programática no browser. Ao longo do tempo, a especificação do HTML evoluiu para
suportar event handlers, isto é, código que é executado quando um evento ocorre no browser (por exemplo, quando um utilizador clica num link, quando o cursor do rato passa por cima de um elemento, ou quando são inserido dados num form). Implementar estes events handlers requer uma linguagem de programação que seja capaz de ser execu- tada no browser e na interface com o DOM (Document Object Model). Com base nestes princípios surgiu o JavaScript, uma linguagem de programação para a web executada no lado do cliente. Esta linguagem permite controlar o HTML (e mais tarde o CSS) para manipular comportamentos numa página.
Existem duas aproximações para usar JavaScript como mecanismo para manipular o conteúdo do documento. A primeira consiste no uso de declarações document.write. Esta função, como o próprio nome indica, permite escrever conteúdo dentro de um documento. Se esta declaração for invocada enquanto a página está a ser carregada, então o novo con- teúdo é inserido num determinado ponto do documento onde a declaração foi invocada. Caso, esta tenha sido invocada depois de a página ter sido carregada, o conteúdo existente é limpo e é carregada novamente a página.
A segunda aproximação usa métodos do JavaScript para manipular o DOM. Estes métodos podem ser empregues depois do browser carregar a página sem ser necessário que todo o documento seja limpo. O DOM é organizado como uma árvore, à semelhança do que acontece no XML. É uma representação hierárquica de uma página HTML, em que cada tag do HTML é equivalente a um nó num documento XML. Contudo, nem todos os documentos HTML estão formatados de acordo com as especificações do XML. Os browserstentam produzir uma árvore DOM a partir desses documentos que não estão bem formatados, e as árvores que são produzidas pelos diferentes browsers são inconsistentes. Este problema é resolvido com o HTML5, em que há mapeamentos bem definidos a partir de documentos HTML não formatados para estruturas DOM adequadas.
Com o JavaScipt podemos então manipular os elementos HTML que se encontram no DOM. Cada elemento no HTML pode estar identificado por um “id” único. O método getElementByIdpermite encontrar um elemento HTML no DOM, como mostra a figura 2.2.
Figura 2.2: Método getElementById
Após encontrar um elemento através do método representado na figura 2.2, podemos mudar o seu conteúdo com o uso do método innerHTML. A figura 2.3 representa a mu- dança do conteúdo de um elemento por “new text”.
Figura 2.3: Método innerHTML
Cada nó no HTML DOM (excepto a raiz do documento) tem a propriedade parent- Node, como mostra a figura 2.4.
Figura 2.4: Propriedade parentNode
A propriedade childNodes é um array que contém todos os nós filhos do nó pai. Neste exemplo, figura 2.5, a propriedade parent.childNodes refere-se ao nó corrente e a todos os seus filhos que dele descendem.
Figura 2.5: Propriedade childNodes
Para além destes exemplos, existem inúmeros métodos que o JavaScript fornece para a manipulação dos elementos HTML no DOM.
CSS
Folhas de estilo em cascata, do inglês Cascading Style Sheets (CSS), é um mecanismo para controlar estilos (por exemplo, cores, fontes, etc. . . ) no HTML. Uma folha de estilo é feita de regras que determinam como os elementos de uma página devem ser renderizados. As regras podem ser aplicadas a um elemento individual com um atributo “id” único, a um grupo de elementos que partilham o atributo “class”, ou elementos representados pela mesma tag HTML. A palavra "cascata” é usada porque várias regras podem ser aplicadas aos mesmos conjuntos e subconjuntos de elementos de uma página. O CSS é também responsável pela manipulação de elementos HTML no DOM. A figura 2.6 representa o efeito de transição de um elemento “div”, quando o cursor do rato paira sobre esse mesmo elemento.
Figura 2.6: Representação do efeito transição usando regras CSS
HTML5
O HTML5 é uma linguagem de marcação utilizada para estruturar e representar conteúdo para a World Wide Web. É a versão mais recente da linguagem HTML e com ela trouxe no- vas novidades que ajudam no desenvolvimento de aplicações web. O W3C desenvolveu o HTML5 com vários objetivos em mente: substituir plug-ins de propriedades multimédia com padrões abertos, permitir que as aplicações web tenham um comportamento pare- cido com as aplicações nativas, adicionando funcionalidades para serviços baseados em localização, e fazer alterações na sintaxe que separa o conteúdo da apresentação.
As funcionalidades mais abordadas no HTML5 é o suporte nativo dos browsers para a reprodução de áudio e vídeo. Isto veio permitir aos designers inserir as tags <video> e <audio> nas páginas HTML. Essas contêm a informação no qual o browser pode usar para interpretar e reproduzir o conteúdo de multimédia.
Outra funcionalidade importante no HTML5 é a possibilidade de desenvolver aplica- ções web que têm um comportamento parecido com as aplicações locais. Funcionalidades como o drag and drop e armazenamento local, dá a liberdade ao utilizador de poder in- teragir com o seu desktop. O HTML5 suporta no lado do cliente base de dados SQL e offline chaching, sendo particularmente importante para os utilizadores que usam dis- positivos móveis, uma vez que a maioria das conexões são limitadas. Um exemplo deste conceito é o uso do calendário, em que o utilizador é capaz de fazer o download dos dados do calendário para o seu dispositivo, fazer os ajustes de acordo com as suas necessidades e mais tarde fazer upload dessas modificações quando existisse uma conexão disponível. As aplicações podem armazenar gráficos e código localmente no dispositivo, garantindo tempos de carga rápidos e o mínimo de tráfego de rede.
O elemento Canvas é outra das funcionalidades do HTML5. Este elemento permite aos developers fazer a renderização dinâmica de gráficos, imagens, áudio e vídeo dentro de um espaço pré-definido na página web. Estes elementos podem ser programados em
JavaScript e assim os utilizadores são capazes de interagir com esses elementos através do rato e do teclado.
O HTML5 apresenta também o serviço de Geolocalização (do inglês Geolocation). Esta funcionalidade incluída nos browsers recentes, permite criar aplicações que neces- sitam da localização atual do utilizador. Dependendo da finalidade das aplicações, esta funcionalidade pode oferecer ao utilizador a possibilidade de obter direções para um de- terminado local a partir da sua posição corrente, como também ver o que o rodeia medi- ante a sua localização. Estas funcionalidades vieram melhorar a experiência do utilizador e o design das aplicações web.
Tecnologia Ajax
À medida que a Internet evoluiu, as aplicações web caracterizadas por interfaces de uti- lizador responsivas e capacidades interativas tornaram-se cada vez mais populares. Estas características representam um forma de desenvolver aplicações mais facilmente e mais funcionais, melhorando a experiência do utilizador.
Contudo as aplicações web apresentam problemas de performance lenta e de intera- tividade limitada, quando comparadas com aplicações nativas de desktop. Para resolver estes problemas as aplicações web usam a tecnologia Ajax (Asynchronous Javascript). Esta tecnologia permite adicionar ou receber dados numa área selecionada da página web sem que se faça o reload da página toda. Isto acontece por exemplo no Google Maps7, em que se um utilizador mantiver pressionado o botão esquerdo do rato sobre o mapa e mover o cursor do mesmo, parte do mapa que estava escondido é mostrado instantanea- mente sem fazer o reload da página toda. Caso não usasse essa tecnologia, os utilizadores teriam de esperar algum tempo para que a página fosse recarregada novamente, mesmo para pequenas alterações. O Ajax usa várias componentes tecnológicas web para obter uma boa experiência do utilizador. Essas componentes são: DHTML (que engloba ele- mentos HTML, CSS e JavaScript), XML e JSON.
A figura 2.7 ilustra a diferença entre uma aplicação que usa Ajax e outra em que não usa.
Figura 2.7: Diferença entre aplicações que usam e não usam Ajax
Na figura 2.7 (a) corresponde a uma aplicação web tradicional, em que representa a forma como os pedidos são executados. O utilizador faz um pedido HTTP ao servidor web, em que este processa o pedido e retorna uma página HTML ao cliente. Os pedidos adicionais são colocados em espera até que o sistema atualize a página. Na figura 2.7 (b) corresponde a uma aplicação web que usa a tecnologia Ajax. Estas aplicações criam um motor baseado em JavaScript que é executado no browser. O motor intercepta inputs do utilizador, exibe o material pedido, e lida com muitas interações no lado do cliente. Se o motor necessitar de mais dados, este solicita material a partir do servidor em background, permitindo ao utilizador continuar a interagir com a aplicação.