Servidores de Aplicação
Aula 03
Este material é parte integrante da disciplina oferecida pela UNINOVE.
O acesso às atividades, conteúdos multimídia e interativo, encontros virtuais, fóruns de discussão e a comunicação com o professor devem ser feitos diretamente no ambiente virtual de aprendizagem UNINOVE.
Uso consciente do papel.
Aula 03: HTML, CSS e JavaScript usados em servidores de
aplicação
Objetivo: Apresentar o que são arquivos HTML, CSS e JavaScript, e como eles são
usados em aplicações distribuídas usando Java EE.
Introdução
Todo aplicativo possui uma parte que é responsável pela interação com o usuário, chamada interface de usuário. Ao observar as aplicações mais usadas atualmente, é fácil notar que a maioria delas é executada através de navegadores de internet (browsers), mesmo sendo aplicativos que não foram desenvolvidos para o ambiente web.
A razão disso é que os aplicativos web possuem a forma mais simples de distribuição, uma vez que eles podem ser instalados em um servidor de aplicações web e seu número de usuários depende do número de pessoas capazes de acessar esse aplicativo através de um browser.
Logo, as corporações perceberam que poderiam aumentar rapidamente o número de usuários de suas aplicações ao usar uma estrutura semelhante à da web. Esse tipo de uso da internet é chamado de intranet, e pode ser usada pelas empresas dos mais diferentes tamanhos.
A consequência natural disso foi a migração das aplicações corporativas para o ambiente web, mas de uso interno, sem comunicação com a internet. Mais tarde, as empresas perceberam que o mesmo servidor de aplicações web poderia prover os aplicativos usados pelos seus usuários na intranet, quanto por seus usuários na internet, e quando necessário, os usuários da intranet poderiam usar os recursos dos aplicativos corporativos quando estivessem conectados remotamente à intranet.
Isso levou à divisão do aplicativo em partes que são executadas no lado do servidor, e no lado do cliente e, normalmente, é usada essa designação para diferenciar da arquitetura cliente-servidor, que é cada vez menos usada.
Assim, as operações centralizadas de processamento são executadas nos servidores de aplicação (lado servidor do aplicativo) enquanto que a interação com o
usuário (lado cliente do aplicativo) é executada por interfaces de usuário executadas através de browsers.
Neste momento, focaremos algumas tecnologias usadas para trabalhar com a interface de usuário sendo executada através de browsers.
Interfaces web
Praticamente todo o mundo está habituado a visitar sites na internet e ver vários tipos de interfaces de usuário. Alguns sites possuem conteúdo estático, por exemplo, os de fábricas, que apenas apresentam informações institucionais e os produtos que disponibilizam, sem haver comércio eletrônico. Normalmente, esse tipo de aplicativo é desenvolvido usando apenas HTML e CSS, para definir o layout das páginas, e JavaScript para alguns efeitos de transição de imagens, efeitos gráficos, etc., uma vez que é uma informação que normalmente é atualizada mais raramente.
Enquanto isso, os sites de e-commerce dependem do usuário digitar alguma informação para processá-la e apresentar o resultado do processamento, a partir de uma consulta em alguma base de dados. Por exemplo, o usuário costuma entrar na página inicial do site de e-commerce e procurar algum tipo de produto. O site procura em sua base de dados produtos que se encaixem no critério de pesquisa do usuário e monta uma lista com os resultados encontrados, de acordo com o número de itens encontrados. Depois disso, há as funções de cálculo de frete com base nos endereços de entrega, além da lista de itens comprados, cujo número varia de usuário para usuário.
Para fazer uma interface desse tipo, é necessário usar o HTML, CSS e JavaScript para o layout da página. O problema neste caso é que uma tela pode ter 10 ou 500 itens a serem exibidos, e o layout deve ser adaptado para comportar essas diferenças.
Aqui, aparece a necessidade de usar a formatação de layout com a programação que controla esse layout. A programação que controla qual conteúdo deve ser exibido no layout pode ser feito por algumas tecnologias relacionadas à linguagem Java, o que veremos nas próximas aulas. Neste momento, enfatizaremos apenas as tecnologias relacionadas ao layout.
HTML
HTML é uma sigla para Linguagem de Marcação de Hipertexto (tradução livre do inglês “HyperText Markup Language”). Essa linguagem é uma especificação desenvolvida pelo W3C (sigla de World Wide Web Consortium) a partir de algumas experiências de grupos de pesquisa que usavam as versões primordiais da web nos anos de 1970 para compartilhar o seu trabalho em grupo.
A HTML possui tags, palavras entre os sinais de menor e maior (< tag >), que são os comandos de formatação de conteúdo interpretados pelos browsers. Cada uma dessas tags pode ter seu próprio conjunto de atributos, valores e outras tags internas, sendo cada um deles definido pela especificação do W3C.
Em termos gerais, uma tag HTML é usada conforme a linha a seguir: <nome_tag nome_atributo=valor_atributo>Texto</nome_tag>
O navegador interpreta a tag <nome_tag> como sendo o início do comando e a tag </nome_tag> como sendo o fechamento do comando HTML. A relação de atributos, e seus valores, definidos dentro da tag, é que indica ao browser como ele deve renderizar os elementos relacionados ao conteúdo da página.
CSS
Em tradução livre, a sigla CSS significa Folhas de Estilo em Cascada (do inglês Cascade Style Sheets). Os comandos disponíveis em CSS definem a forma, em termos de cores, imagens de fundo, formatação de caracteres, com que o conteúdo das tags HTML deve ser apresentado aos usuários, ou seja, ela define a identidade visual do arquivo HTML.
Uma folha de estilos consiste de uma lista de regras definida por seletores e blocos de separação, e um exemplo disso é apresentado na Figura 1.
Os elementos correspondentes às tags HTML são denominados seletores, sendo representados na Figura 1 pelos comandos p, p.minhaclasse01 ou
#iddmeuelemento. Os blocos de instrução são definidos pelos comandos entre { e },
e, dentro das chaves, há a sintaxe nome_da_instrução, que recebe um valor atribuído por “:”.
JavaScript
Inicialmente, a linguagem de programação JavaScript foi desenvolvida para permitir que os desenvolvedores de aplicações pudessem fazer validações simples de dados informados pelos usuários, diretamente no browser, sem haver a necessidade de acessar o servidor para realizar essa tarefa.
Como ele permite processar informações diretamente no browser, os desenvolvedores de software começaram a usá-lo para realizar tarefas um pouco mais complexas de processamento, visando minimizar a consulta ao software sendo executado no servidor e, consequentemente, diminuindo o tráfego na rede e o processamento realizado nele.
Conclusão
Separadamente, cada uma dessas tecnologias possui uma função específica, mas, em conjunto, elas podem ser usadas para desenvolver uma interface de usuário, mantendo o conteúdo web dentro das tags HTML, sem nenhum tipo de formatação definido dentro dessas tags. A formatação deve ficar a cargo do CSS, que define a formatação do layout da página, e a programação em JavaScript pode ser usada para atualizar o conteúdo do site, sem acessar o servidor de aplicações web.
Na prática, esse é o procedimento usado pelos desenvolvedores quando o processamento de alguma informação implica em atualizar a interface de usuário, mas sem haver a necessidade de acessar o servidor de aplicações. Entretanto, dificilmente se usa a forma pura de JavaScript, mas, sim, frameworks, como o JQuery.
REFERÊNCIA
GONÇALVES, Antonio. Beginning Java EE 6 Platform with GlassFish 3: From Novice to Professional. United States of America: A Press, 2009.
SITES
CASCADING STYLE SHEETS HOME PAGE. Disponível em: <http://www.w3.org/Style/CSS/>. Acesso em: 13 mar. 2013.
DOCUMENT OBJECT MODEL (DOM). Disponível em: <http://www.w3.org/DOM/>. Acesso em: 13 mar. 2013.
W3C HTML. Disponível em: <http://www.w3.org/html/>. Acesso em: 13 mar. 2013. W3C RECOMMENDATION. Disponível em: <http://www.w3.org/TR/xhtml1/>. Acesso em: 13 mar. 2013.
