Desenvolvimento de Aplicações para Internet Material Apoio AOL 1

Prévia do material em texto

Introdução à web
Tim Berners-Lee, cientista britânico, desenvolveu a World Wide Web (WWW ou simplesmente web) no ano de 1989, enquanto trabalhava no CERN – Organização Europeia para a Investigação Nuclear. A web foi originalmente concebida para atender à demanda de compartilhamento digital de informações entre cientistas de universidades e institutos em todo o mundo, segundo Barry M. Leiner, diretor do RIACS (Instituto de Pesquisa de Ciência da Computação Avançada), em parceria com outros oito autores e pesquisadores no artigo “A brief history of the internet”, publicado em 2009 no periódico ACM SIGCOMM Computer Communicaton Review.
Em dezembro de 1990, Berners-Lee já havia finalizado a versão inicial das ferramentas necessárias para o uso da web: o protocolo de transferência de hipertexto (HTTP), a linguagem de marcação de hipertextos (HTML), o primeiro navegador (browser), chamado WorldWideWeb, o primeiro servidor de HTTP e as primeiras páginas web descreviam o projeto todo.
Já em abril de 1993, o CERN declarou a WWW como domínio público. Assim, o número de servidores passou dos 500 daquele ano para mais de dez mil no ano seguinte e não parou mais de crescer, chegando a alcançar atualmente mais da metade da população mundial, revolucionando nossa comunicação.
Em 1994, é fundado o Consórcio World Wide Web (W3C), uma organização internacional no qual entidades filiadas, uma equipe operando em tempo integral e o público trabalham juntos para desenvolver padrões para a web. O W3C torna-se então o órgão oficial para a gestão da internet e seus padrões (gratuitos e abertos), que evoluem constantemente, trazendo novos recursos aos usuários.
CLIENT-SIDE E SERVER-SIDE
O modelo cliente/servidor é amplamente utilizado em redes de computadores nas quais as máquinas fornecem uma significativa gama de informações ou bases de dados, chamadas de servidores, para se comunicarem com máquinas de clientes. Nesse modelo, um único servidor pode cuidar de muitos clientes, utilizando uma rede de computadores para realizar a comunicação entre essas entidades, como afirma Andrew Tanenbaum no livro Redes de computadores, de 2003.
Esse modelo é adotado pelo fato de servidores serem tipicamente mais poderosos e confiáveis se comparados com dispositivos de usuários. Eles são alocados com hardwares que usam componentes em duplicidade, e são mantidos sob condições de segurança rígidas, com controle de acesso. Atualmente, com a utilização de computação em nuvem, os custos de implementação desse modelo foram reduzidos.
Na web, o cliente utiliza um navegador, constituindo o que chamamos de client-side (lado do cliente) para se conectar a um servidor no server-side (lado do servidor) por meio de um endereço ou URL (Uniform Resource Locator) que, em português, é conhecido como localizador padrão de recursos. O uso da URL foi a forma textual encontrada para facilitar o direcionamento a um endereço Internet Protocol (IP), sendo que essa tradução é feita por meio de servidores de DNS (Domain Name Server, ou sistema de nomes de domínio).
Os softwares, divididos nos chamados scripts, que compõem uma aplicação web, realizam execuções tanto no client-side como no server-side. A execução de verificações no lado do cliente diminui a necessidade de comunicação com o lado do servidor para itens simples, como para verificar se determinado campo obrigatório de um formulário foi preenchido. Desse modo, executar ações no lado do cliente diminui a latência de resposta, por dispensar a necessidade de enviar requisições ao servidor.
O desenvolvimento da interação no client-side é feito quase exclusivamente na linguagem JavaScript (JS), além do código de hipertexto HTML e da folha de estilos CSS. Tais códigos são recebidos pelo navegador, executando diferentes ações no lado do cliente após carregar uma página da web.
EXPLICANDO
Apesar da similaridade de nomes, JavaScript não faz parte da plataforma Java da Oracle, correspondendo a linguagens diferentes.
O client-side agrega os elementos que o usuário visualiza em uma página, como imagens, texto, botões, campos de formulário e as ações executadas na interação desses com o navegador.
O server-side, por sua vez, inclui tudo que acontece no servidor, o que, de modo geral, inclui receber requisições dos clientes, efetuar seu processamento, com interações com bases de dados, e enviar requisições de resposta aos clientes.
É importante ressaltar que a utilização de validações no lado do cliente não dispensa a implementação dessas verificações no lado do servidor; isso ocorre porque não é possível garantir consistência nos scripts do cliente, pois esses podem ser facilmente alterados pelo usuário junto ao navegador.
Funcionamento básico do protocolo HTTP
O Hypertext Transfer Protocol (HTTP) é o protocolo oficial de comunicação de dados da web, que permite a troca de dados padronizada, em nível de aplicação, entre um navegador cliente e o servidor.
O HTTP funciona a partir do protocolo de transporte Transmission Control Protocol (TCP), que realiza uma conexão ponto a ponto, geralmente utilizando a porta 80. Ele é um protocolo do tipo stateless, ou seja, que não armazena seu estado ou a memória sobre suas requisições e respostas recebidas.
O cliente envia uma solicitação HTTP para um servidor, chamada de requisição, e então o servidor responde a essa solicitação por meio de uma ou mais mensagens de resposta.
Tanto a requisição quanto a resposta são feitas em texto puro, seguindo a tabela ASCII, por meio de comandos simples escritos na língua inglesa.
Uma solicitação/requisição HTTP é basicamente composta por três componentes, conforme Budi Kurniawan em seu livro Java para a Web com Servlets, JSP e EJB, de 2002:
· Método – URI (Uniform Resource Identifier – identificador de recurso uniforme) – protocolo/versão;
· Cabeçalhos de solicitação;
· Corpo da entidade.
De modo análogo às solicitações, uma resposta HTTP também é formada por três componentes:
· Protocolo – código de status – descrição;
· Cabeçalhos de resposta;
· Corpo da entidade.
HTTPS
O Hyper Text Transfer Protocol Secure (HTTPS) se diferencia do HTTP principalmente por realizar a encriptação dos dados trafegados, requerendo para isso a autenticação dos servidores e o recebimento de um certificado de uma autoridade certificadora (AC). Para tanto, ele utiliza a tecnologia Transport Layer Security (TLS), ou seu antecessor Secure Sockets Layers (SSL), para realizar o processo de comunicação segura.
Para sua utilização, o usuário deve digitar “https://” antes do endereço do site e, geralmente, é utilizada a porta 443 com certificados validados nesse tipo de comunicação. Com a validação da comunicação segura, os navegadores são informados desse status normalmente por meio de um ícone de cadeado fechado ao lado da URL, na barra do navegador.
A utilização do HTTPS nos servidores é altamente recomendada, visto que o HTTP é inseguro e sujeito a ataques de escuta ilegais, que podem levar intrusos a terem acesso a informações alheias. Como modo de incentivo a esse uso, buscadores reconhecidos, como o Google, têm priorizado servidores que usam HTTPS nos seus resultados de pesquisa – conforme afirmado por Zineb Ait Bahajji e Gary Illyes, analistas de tendências para webmasters da Google, em 2014, no texto “HTTPS as a ranking signal”, disponível no Official Google Webmaster Central Blog.
DICA
Desde 2015, já é possível utilizar uma autoridade certificadora gratuita, a Let’s Encrypt, que permite a geração e renovação de certificados de modo automatizado e aberto. Esse projeto surgiu graças à organização sem fins lucrativos Internet Security Research Group (ISRG) e visa promover a popularização e difusão da utilização de criptografia na web.
COOKIES
Um cookie HTTP é um conjunto de informações que um servidor envia para o navegador do usuário para armazenar dados, e os recebe de volta na próxima requisição. Normalmente, ele é utilizado para identificar as diferentes requisições que vieram do mesmo navegador e resgatar informações anteriores acerca dele, mantendoum usuário logado, por exemplo. Assim, tem por objetivo guardar informações para o protocolo HTTP, que não faz esse papel, por ter a característica básica de não reter seu estado.
De modo geral, os cookies são utilizados pelos desenvolvedores com as seguintes finalidades:
Clique nos cards para saber mais
Gerenciar logins em áreas restritas e carrinhos de compra;
Registro de preferências de usuário, temas e outras configurações de utilização de um determinado sistema;
Gravação e análise de comportamento do usuário.
Existem dois tipos de cookies: os cookies de sessão e os transitórios. Os transitórios ficam em uma memória temporária e são apagados quando o usuário encerra a sessão do navegador; eles normalmente não identificam o usuário pessoalmente. Já o cookie persistente ou permanente fica armazenado no disco rígido do usuário até que expire, ou seja, após a data de validade definida pelo desenvolvedor, ou até que o usuário o exclua; os cookies persistentes são, então, utilizados para coletar informações de identificação do usuário, como comportamento de navegação ou de suas preferências para um site específico.
CURIOSIDADE
A inspiração para o nome cookie veio dos objetos do sistema operacional Unix, chamados de “cookies mágicos”, que são tokens associados a um usuário ou programa e que mudam de status, dependendo das áreas utilizadas por ele.
Os cookies têm seis atributos, a saber:
· Nome;
· Valor ou conteúdo;
· Data de validade;
· O caminho (URL) para o qual é válido, ou seja, páginas da web fora desse caminho não podem usá-lo;
· O domínio para o qual o cookie é válido, tornando-o acessível para páginas em qualquer um dos servidores de um site (o que é útil para quando um site usa vários servidores em um domínio);
· A necessidade de uma conexão segura, logo, ele pode ser usado apenas em conexões que utilizam o protocolo HTTPS.
Com a evolução da web, cada vez mais requisitos de segurança e privacidade têm sido demandados e, por isso, os navegadores estão mais rígidos em relação aos cookies, para proteger ao máximo o usuário e suas informações. Atualmente, os navegadores oferecem recursos de navegação anônima, que não registram cookies, e em seu modo de navegação normal também executam várias checagens para evitar acessos indevidos aos cookies, de acordo com Ben Galbraith e Justin Schuh, responsáveis da pela gestão e engenharia do Chrome no texto “Improving privacy and security on the web”, publicado em 2019 no Chromium Blog da Google.
Introdução à linguagem HTML
A Hypertext Markup Language (HTML) é uma linguagem de hipertexto para descrever e formar a estrutura de páginas web. A HTML fornece aos autores meios para:
· Publicar documentos com títulos, texto, tabelas, listas, fotos etc.;
· Recuperar informações, por meio de links (ligações) de hipertexto, com o clique de um botão;
· Criar formulários para a realização de transações com serviços remotos, para utilização na busca de informações, reservas, pedidos de produtos etc;
· Incluir planilhas, vídeos, arquivos de áudio e outros aplicativos diretamente em seus documentos.
Com HTML, os autores descrevem a estrutura das páginas usando marcações. Os elementos da linguagem rotulam partes do conteúdo, como "parágrafo", "lista", "tabela" e assim por diante.
Para realizar essa rotulagem, a HTML faz uso de tags, definindo sua abertura e fechamento. Por exemplo, <b> significa início de negrito e </b> significa fim do negrito. Embora seja possível escrever páginas HTML com qualquer editor simples de texto, também é possível utilizar editores especiais de HTML (inclusive alguns on-line), que auxiliam bastante na geração e validação do código, de acordo com Andrew Tanenbaum em seu já referido livro de 2003.
VERSÕES DA LINGUAGEM HTML
Entre os anos de 1993 e 1995, a linguagem HTML passou pelas versões HTML+, HTML 2.0 e HTML 3.0, sendo experimentadas melhorias para enriquecer as possibilidades da linguagem. Contudo, até então, a linguagem não era tratada como um padrão, o que dificultava o desenvolvimento de documentos que pudessem funcionar de modo semelhante nos mais diversos clientes, de acordo com o material preparado pela própria W3C para seu curso de HTML 5.
Como solução, em 1997, um grupo de trabalho do W3C produziu a versão 3.2 da linguagem, conseguindo fazer com que ela fosse tratada como padrão.
A partir do desenvolvimento da versão 3.5 da linguagem HTML, em 1997, esse grupo de trabalho do W3C focou no desenvolvimento da XHTML, uma especificação de sintaxe mais rigorosa, tida como possível sucessora da HTML. Esse desenvolvimento continuou para dar origem à XHTML 2, cuja proposta principal era a modularização e otimização da XHTML. Em paralelo foi lançada a versão 4.01 da linguagem HTML, no final de 1999, pelo W3C, mas que ainda não supria a demanda de melhor organização do extenso conteúdo já presente na web e a necessidade de melhorar a semântica (o significado) do código. Essa versão também não estava bem preparada para garantir a devida manipulação ágil e fácil dos elementos via JavaScript e com folhas de estilos CSS, novamente de acordo com a W3C no já mencionado material.
Em outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com um grupo de empresas que compunham o Web Hypertext Application Technology Working Group (WHATWG), que estava focado em desenvolver a HTML principalmente nas questões de interatividade. A parceria com o WHATWG foi então reconhecida pelo W3C, culminando na produção da versão 5 da HTML em detrimento da XHTML 2, descontinuada em 2009.
A versão 5 da HTML, disponibilizada em 2014, é uma significativa evolução do padrão, com novos elementos, atributos e comportamentos. Ela também foi desenvolvida para operar com um conjunto maior de tecnologias, permitindo o desenvolvimento de aplicações chamadas ricas, com melhor controle semântico, e websites mais diversos.
Na Tabela 1, temos a sintetização da evolução da HTML.
Tabela 1. Evolução da linguagem HTML.
A XHTML é uma variante da HTML que usa a sintaxe do XML, a EXtensible Markup Language. A XHTML possui os mesmos elementos da HTML, mas a sintaxe é um pouco diferente, mais rígida. Como a XHTML é um artefato XML, é possível ainda usar outras ferramentas XML (como a XSLT, uma linguagem para transformar o conteúdo XML).
A rigidez na codificação exigida na XHTML dificulta o trabalho, sobretudo para desenvolvedores inexperientes, diferentemente da HTML, em que não há tanta exigência na escrita do código da linguagem.
PRÁTICA DE EDIÇÃO BÁSICA DE DOCUMENTOS HTML
Partiremos, agora, para uma demonstração prática de como utilizar concretamente a linguagem HTML. Antes, faz-se necessário conhecer as marcações que a constituem e que dão origem às diferentes funcionalidades.
Na Tabela 2, dispomos as principais marcações ou tags da HTML e suas finalidades:
// Tabela 2. Principais marcações ou tags da HTML
Clique para fazer download da Tabela 2 abaixo:
Tabela 2. Principais marcações ou tags da HTML.pdf
106.5 KB
Para a edição básica de documentos HTML, além de conhecer tais tags, é necessário um editor de texto e um navegador, sendo este último para efetuar o teste de visualização do resultado. Ao final da edição, o desenvolvedor faz upload do arquivo para um servidor web que responde por uma determinada URL.
Na Figura 1, é demonstrado, na parte (a), um código-fonte de uma página simples desenvolvida em HTML, com as marcações destacadas em azul, e, na parte (b), sua visualização em um navegador.
Figura 1. Capturas de tela: (a) o código HTML de um exemplo de página da web; (b) a página formatada visualizada em um navegador.
Como pode ser visualizado no código da Figura 1, logo no início há a declaração do idioma da página sob a forma de metadado e a abertura de seu cabeçalho com a definição do tipo de caracteres utilizados, o charset, que, nesse caso, é o utf-8. Para funcionar bem a leitura dos caracteres textuais, sobretudo no que se refere à acentuação, é importante que o charset corresponda ao mesmo que foi salvo pelo editor de texto utilizado (nas opções avançadasde salvamento, geralmente é possível configurar o charset utilizado).
Fechando o cabeçalho, na linha 5 do código, podemos ver a definição do título, delimitado por <title> e </title>. Essa informação será utilizada por navegadores para definir o nome da página em suas abas. Mecanismos de busca como o Google também dão significativo valor a essa informação.
Já no corpo da página (linhas 7 a 16) encontra-se o conteúdo propriamente dito, elencando os elementos que são visíveis ao usuário. Nesse caso, há textos de destaque gerados pela tag <h n>, onde n é um número de hierarquia no intervalo 1 a 6 (sendo, portanto, <h1> o de maior importância). A página disposta como exemplo ainda faz uso da marcação <b> para texto em negrito, <i> para texto em itálico, <hr> para criar uma linha divisória horizontal e as tags <ul> e <li> para criar uma lista não numerada.
Note que, no exemplo apresentado, não houve preocupação com refinamento estético, por não utilizar referência alguma a uma determinada folha de estilos. Isso foi proposital, justamente para seguir a importante recomendação de separação de conteúdo e estilos, facilitando futuras manutenções. No início da tecnologia web, sem boas opções para gerenciamento de estilos dos elementos, era comum desenvolvedores utilizarem tabelas da HTML e marcações de formatação dos documentos para diagramarem as páginas. Tais práticas, apesar de ainda funcionarem, não são boas práticas de projeto.
GERAÇÃO DINÂMICA DE DOCUMENTOS HTML
No início da web os servidores entregavam ao usuário apenas arquivos de páginas estáticas. Atualmente existem verdadeiros sistemas de informação, entregando páginas web processadas aos usuários a partir de conexão com bases de dados. Esse processamento aumentou significativamente a importância da web na sociedade para a realização dos mais diversos serviços (cadastros, governo eletrônico, compras e serviços bancários são alguns dos exemplos mais conhecidos).
Para processamento web no lado do servidor, geralmente são utilizadas as seguintes tecnologias: Perl, Microsoft .Net, Node.js, PHP, Ruby on Rails e Java Servlets e JSP, sendo essa última a que abordaremos adiante.
Também é possível realizar a geração dinâmica de documentos no lado do cliente via JavaScript, porém essa geração normalmente necessita de chamadas a um servidor para obter arquivos de dados, usando XML ou JSON – JavaScript Object Notation, isto é, notação de objetos JavaScript. Esse modo de construção de aplicativos tem a vantagem de diminuir a quantidade de dados transmitidos na comunicação cliente-servidor, pois, em vez de receber a página toda em novas interações, apenas os novos dados são transmitidos. Na prática, geralmente boas aplicações web usam ambos os tipos de programação (no cliente e no servidor) para a geração dos documentos visualizados pelo usuário.
A Figura 2 demonstra as etapas para geração de páginas dinâmicas, desde a entrada inicial de informações do usuário, via requisição no navegador, até a consulta nas bases de dados e retorno do servidor.
Figura 2. Fluxo de processamento de páginas dinâmicas web. Fonte: TANENBAUM, 2003, p. 487. (Adaptado).
Conforme relatado, frequentemente a aplicação web precisa apenas atualizar os dados apresentados ao usuário no navegador, por exemplo, quando se avisa que chegou um novo e-mail. Nesses casos, não faz sentido receber toda uma página novamente, mas apenas as novas informações (neste contexto, o novo e-mail recebido) e, para tanto, o navegador receberá do servidor apenas os dados adicionais, em XML ou JSON.
Objetos em JSON fazem parte de uma tecnologia própria JavaScript, amplamente utilizada em aplicações web modernas. Tais objetos estruturam informações de modo compacto e simples e, por isso, o JSON tem sido adotado por empresas como Google e Yahoo.
A título de exemplificação e comparação, demonstramos, na Figura 3, dados fictícios de dois funcionários, armazenados em arquivos, respectivamente, na tecnologia JSON e em XML.
Figura 3. Exemplo simples de comparação de arquivos em JSON e XML.
Através da comparação apresentada na Figura 3, é possível perceber que a tecnologia JSON é mais leve (arquivo cerca de 50% menor, nesse caso) e apresenta a vantagem de alta interoperabilidade com os navegadores, que tradicionalmente já executam JavaScript, além de ser bem aceita no lado dos servidores.
No entanto, as duas tecnologias têm seu espaço, sendo que o XML tem uma gama grande de ferramentas no mercado, incluindo aquelas de alta complexidade, para transformações e buscas de informações, então cabe, ao desenvolver algo nesse sentido, decidir qual tecnologia mais deve agregar em sua pilha de desenvolvimento.
CSS
A Cascading Style Sheets (CSS) é a linguagem de estilo feita para descrever a apresentação dos elementos das páginas da web, incluindo cores, layout e fontes. Ela permite adaptar a apresentação a diferentes tipos de dispositivos, como telas grandes e pequenas ou impressoras.
A CSS é independente da linguagem HTML e pode ser utilizada com qualquer linguagem de marcação baseada em XML. A separação entre HTML e CSS facilita a manutenção de aplicações web, o compartilhamento de folhas de estilo entre páginas e a adaptação das páginas para diferentes ambientes. Isso é chamado de separação da estrutura (ou conteúdo) da apresentação.
DICA
Dispomos aqui os validadores on-line do W3C, que são gratuitos e podem ser usados para efetuar verificações, respectivamente, de CSS e de HTML. Isso permite que, posteriormente, possíveis correções necessárias sejam realizadas.
SAIBA MAIS
SAIBA MAIS
É possível utilizar estilos CSS em uma página web de três modos distintos: adicionar o texto de comandos CSS internamente no arquivo HTML, usar CSS em linha para aplicar regras em elementos específicos ou fazer um link para um arquivo .css externo. Este último modo é o mais aconselhado no desenvolvimento de sites por separar os estilos dos documentos HTML que contêm os elementos visuais e fazer com que um arquivo de estilos possa ser aplicado em diferentes páginas, facilitando a manutenção e conferindo estilos padrões a todas as páginas de um site.
A primeira versão do CSS foi lançada em dezembro de 1996 e definiu propriedades básicas para especificar cores, fontes, margens, bordas e outros estilos básicos. A segunda edição do padrão, CSS 2, foi adotada em maio de 1998, definindo recursos mais avançados, como o suporte para posicionamento absoluto de elementos. Para a versão 3, a especificação CSS foi dividida em vários módulos especializados, que estão passando pelo processo de padronização.
WEBFONTS
Antes da versão 3 do CSS, os desenvolvedores estavam limitados a utilizar apenas elementos de tipografia chamados de fontes, que são básicos dos dispositivos clientes. Como modo de desenvolver sites com diferentes tipos de fontes, os designers chegavam a usar imagens para escreverem textos, o que deixa geralmente mais pesado o carregamento da página e prejudica os aplicativos de leitura de tela, utilizados por pessoas com deficiência visual.
Para resolução da questão, foi desenvolvida então a regra de CSS @font-face, que é utilizada para indicar fontes fora do padrão do sistema nos sites, com o respectivo caminho para o arquivo da fonte. A sintaxe de utilização é simples e tem suporte à grande maioria dos navegadores atuais.
Existem ferramentas on-line gratuitas, como o Google Fonts e o Font Squirrel, que oferecem fontes e auxiliam na escrita do código CSS para utilização facilitada nos desenvolvimentos web.
Responsividade
A responsividade é um atributo de qualidade das interfaces das aplicações que as permite funcionar bem em diversos dispositivos clientes, o que se dá por meio da adaptação do conteúdo. O design responsivo para web evita que os desenvolvedores tenham que criar múltiplas versões do hipertexto para cada variação de tela ou de resoluções do mercado.
Esse atributo está cada vez mais em evidência pelo crescimento exponencial do acesso à web por dispositivos móveis, cujas telas são menores do que de desktops e notebooks. Um siteresponsivo reage às necessidades dos usuários e seus dispositivos. Por exemplo, em um smartphone, os usuários visualizam o conteúdo em uma só coluna, enquanto em um notebook o mesmo conteúdo pode ser visto em três colunas, pela largura maior de sua tela.
Um design com responsividade inclui:
· Adaptar o layout dos elementos web de acordo com a resolução do cliente;
· Redimensionar imagens para que caibam na tela;
· Simplificar elementos da tela para dispositivos móveis;
· Ocultar elementos desnecessários nos dispositivos com telas menores;
· Adaptar o tamanho de botões e links para interfaces sensíveis ao toque (touch screen).
Na Figura 4 é possível visualizar um projeto do tipo wireframe de um site considerando a responsividade, por prever a realocação dos elementos visuais em telas com a largura menor. Repare, portanto, que não só a fonte do título do site e a foto foram deixadas em menor tamanho, como as informações abaixo dela, em vez de se distribuírem em duas colunas lado a lado, assumiram uma forma vertical.
Figura 4. Projeto wireframe de site responsivo. Shutterstock. Acesso em: 11 set. 2019.
Projetos do tipo wireframe podem ser feitos manualmente em papel (com lápis ou caneta) ou em editores informatizados simples, e servem para representar o futuro produto, como um esqueleto, um protótipo ou uma versão bastante primitiva do visual de um projeto.
Assim, no wireframe há um auxílio ao designer na hora de prever a diagramação dos conteúdos e aplicar a identidade visual, facilitando a futura codificação, e ainda ser uma ferramenta de alinhamento da expectativa do cliente quanto ao que será produzido no layout.
Nesse contexto, considerando a grande proximidade atual das pessoas com seus smartphones, incluindo o aumento vertiginoso desses dispositivos, Luke Wroblewski, autor do livro Mobile First, de 2011, propôs uma técnica que está sendo bem aceita entre os desenvolvedores web: a mobile first ou, em tradução livre, dispositivo móvel primeiro. O conceito básico é o de criar um site pensando primeiro nos dispositivos móveis e só então ajustá-lo para o computador.
O desenvolvimento com a técnica mobile first apresenta a vantagem de mais fácil adaptação do que o processo inverso, isto é, do computador para o mobile. O conteúdo textual, por exemplo, quando pensado para ser apresentado em uma tela menor, tem de ser resumido, indo direto ao ponto desejado, e isso também se torna útil nas telas maiores, segundo o próprio Luke Wroblewski em seu livro de 2011.
A pilha de desenvolvimento HTML, CSS e JavaScript e os frameworks de apoio
Na área de Tecnologia da Informação ,em geral, há uma característica técnica muito perceptível no desenvolvimento para a web, que é a necessidade de uma soma de recursos de diferentes linguagens de marcação e programação para produzir o software final.
Essa característica é conhecida como pilha de desenvolvimento e tem desafiado os desenvolvedores a realizar uma integração transparente e adequada, dependendo de um estudo contínuo desses profissionais.
Assim, no mercado de trabalho, na busca por esses profissionais, surgiu inclusive um termo para defini-los: profissionais de pilha completa ou full-stack.
No desenvolvimento web, na parte de interface de usuário, ou front-end, a pilha de desenvolvimento geralmente envolve:
Clique nos cards para saber mais
Para escrita do conteúdo sob a forma de hipertexto;
Para formatação do conteúdo do hipertexto;
Para execução das ações de validação do client-side e chamadas dinâmicas ao servidor de modo assíncrono, angariando maior interatividade à aplicação web.
O FRAMEWORK BOOTSTRAP
Considerando que as aplicações comerciais têm necessidades em comum de integração da pilha de desenvolvimento, incluindo agregação plena de requisitos de acessibilidade, usabilidade e responsividade, surgiram frameworks para auxiliar o desenvolvedor.
Como exemplo de sucesso nessa área de frameworks para apoio ao desenvolvedor web é possível citar o Bootstrap, um framework front-end de uso gratuito voltado para criação de sites responsivos, que permite ao desenvolvedor chegar a resultados rápidos e confiáveis a partir do uso de componentes (plugins) usando HTML, CSS e JavaScript.
Os principais componentes básicos disponíveis são:
Alert
+
Card
+
Carousel
+
Modal
+
Navbar
+
Progress
+
Tooltip
+
No próprio portal do Bootstrap, é possível ter acesso a exemplos ilustrativos de tais componentes.
Além de componentes básicos, existem exemplos de casos corriqueiros do mercado já implementados no framework Bootstrap. Isso vem ao encontro da necessidade de desenvolvedores produzirem conteúdo de qualidade, de acordo com padrões de interação de sucesso, em curto espaço de tempo.
Dentre vários exemplos disponibilizados, destacam-se os seguintes:
· Album: página para galerias de fotos, portfólios, dentre outros;
· Blog: página em estilo de revista, com grande rolagem vertical, cabeçalho, navegação e conteúdo destacado;
· Checkout: página com formulário de checkout customizado para validar itens a serem comprados, mostrando componentes de formulário referentes a dados do cliente e informações para pagamento;
· Dashboard: painel de controle administrativo básico, com barras laterais e de navegação;
· Pricing: página de produtos e seus respectivos preços, feita com cards e incluindo cabeçalhos e rodapé personalizado;
· Product: página de marketing focada em apresentar detalhes de um produto de modo bem trabalhado, com grid, textos e imagens;
· Sign-in: página com layout e design de formulário customizado para um login em determinada área restrita.
No próprio portal do Bootstrap é possível ter acesso a exemplos ilustrativos de tais componentes. No site do Bootstrap também é possível encontrar mais explicações sobre cada um deles, bem como respectivos códigos, exemplos (que podem ser reutilizados livremente) e demonstração de funcionamento.
BIBLIOTECA PARA JAVASCRIPT: O jQUERY
O jQuery é uma biblioteca de componentes JavaScript criada em 2006 por John Resig muito utilizada por desenvolvedores, sendo pequena, rica em recursos e bem integrada ao Bootstrap (geralmente são utilizados em conjunto).
O uso do jQuery auxilia no processo de passagem e manipulação de documentos HTML, manipulação de eventos, animação e Ajax, com uma API que funciona em diversos navegadores.
Para sua utilização, basta incorporar seu código na página usando a tag <script> e depois utilizar seletores para acessar os objetos e realizar ações:
· Pela sua identificação única (cada elemento em HTML pode e deve ter um identificador chamado ID, nomeado pelo desenvolvedor na sua tag de abertura);
· Por sua classe CSS. Essa seleção e ação é feita com a sintaxe $(“#ID”).acao();.
Prática de layout com HTML e CSS
Para esta seção é apresentada uma prática para orientar os alunos a desenvolverem uma página web, utilizando HTML e CSS, em um padrão chamado landing page, ou página de aterrisagem em português. Esse padrão é bastante conhecido e amplamente utilizado atualmente para apresentação de uma empresa e venda de produtos e serviços.
A ideia é desenvolver uma página com grande rolagem vertical, permitindo fácil visualização das informações em dispositivos móveis. Isso se explica pelo fato de as pessoas estarem acostumadas a percorrer com rolagem vertical, em redes sociais, longos feeds, sendo uma experiência mais amigável do que fazer o usuário selecionar um link para ter de visualizar cada informação.
Esse tipo de página conta ainda com a característica de se iniciar com um título curto e de boa expressividade, textos pequenos e um destaque, logo no início, para a conversão desejada (conhecer a marca, entrar em contato com uma empresa ou mesmo comprar determinado produto ou serviço).
Fazem parte ainda desse padrão as seguintes características:
· Uso de frases curtas e claras em todos os textos, que devem ser separados por temas e objetivos;
· Destaque de termos relevantes em negrito;
· Grande uso de imagens e vídeos ilustrativos;
· Uso de mapas para indicar lugares (como o endereço do estabelecimento, do negócioetc.), geralmente no final da página.
Para desenvolvimento da página, o primeiro passo é obter o Bootstrap, que será responsável por oferecer os elementos de HTML, CSS e JavaScript necessários para um site de qualidade, com ótima usabilidade e responsividade. Para tanto, para facilitar o aprendizado, basta copiar o código de template inicial que apresenta um “Hello World”, ou “Olá mundo”, para um novo arquivo com extensão HTML em seu computador.
Com o texto “Olá mundo” aparecendo formatado em seu navegador, você pode ir incrementando-o com os elementos necessários para a landing page e testá-la aos poucos, até deixar o desenvolvimento melhor elaborado. Essa primeira versão da prática pode ser vista na Figura 5.
Figura 5. Captura de tela: (a) página simples com o código utilizando Bootstrap; (b) sua visualização no navegador.
Para chegar mais rápido ao resultado final, você deve utilizar o código exemplo Product do Bootstrap e realizar alterações dos textos de conteúdo e imagens (todas as programações de CSS e JavaScript podem ser mantidas).
No resultado exemplificado a seguir, os textos e imagens foram alterados para uma empresa fictícia chamada “Max CSS Limpeza”. É possível observar que o uso do Bootstrap permitiu que o site funcionasse bem, com responsividade, tanto em dispositivos desktop, com tela maior, quanto em smartphones.
É possível constatar ainda que a responsividade atingida vai além de uma simples organização dos elementos. Houve a alteração completa do menu no smartphone, mudando sua organização para o padrão menu sanduíche ou hambúrguer, em que um ícone, que lembra um sanduíche, serve como botão que, quando pressionado, abre uma caixa de opções, otimizando espaço na tela.
Figura 6. Página responsiva landing page de uma empresa fictícia feita com uso do Bootstrap.
Java EE e suas principais APIs
O Java Enterprise Edition (EE) é a especificação de uma plataforma amplamente utilizada para desenvolvimento de aplicações corporativas, incluindo as aplicações web, possuindo diversos recursos, como bibliotecas e funcionalidades implementadas. Esses recursos coordenados têm a intenção de reduzir significativamente o custo e a complexidade do desenvolvimento, implantação e gerenciamento de aplicações de várias camadas centradas no servidor, agregando maior padronização, portabilidade, robustez, escalabilidade, confiabilidade e segurança nos produtos desenvolvidos , de acordo com Budi Kurniawan na já mencionada obra de 2002.
CURIOSIDADE
O Java EE, em suas versões antigas (até a 1.4), era conhecido pelo nome J2EE.
Na Tabela 3 indicamos os marcos da evolução da especificação Java EE.
Tabela 3. Evolução da especificação Java EE.
Uma significativa mudança apresentada na versão 8 foi o anúncio da Oracle, proprietária (após a compra da Sun Microsystems) dos direitos sobre a linguagem Java, de ceder o Java EE para a organização sem fins lucrativos Eclipse Foundation. Isso foi feito com o objetivo de aumentar a colaboração entre indivíduos, pequenas empresas, empresas e os maiores fornecedores.
Nesse processo de transição de tecnologias para a Eclipse Foundation, um novo projeto foi iniciado, o Eclipse Enterprise para Java (EE4J), que utiliza o Java EE 8 e também outro projeto, chamado Jakarta, como base para a criação de novos padrões.
As principais APIs do Java EE, em sua versão 8, podem ser vistas na esquematização por grupos de perfis hierárquicos de distribuição (profiles) de acordo com o apresentado na Figura 7.
Figura 7. Esquema das APIs do Java de acordo com seus grupos de perfis hierárquicos de distribuição.
É possível compreender que a base de todos os perfis é o Java Standard Edition (SE), que possui apenas as funções e os recursos básicos da plataforma, como criação e gerenciamento de objetos e a conexão com sistemas gerenciadores de banco de dados (SGBDs). Por outro lado, o conjunto completo da plataforma é disponibilizado no Java EE com seus opcionais (visto na extremidade da Figura 7).
Fica evidente que o Java EE é deveras extenso, não sendo o foco desse material ensiná-lo em sua totalidade. Um resumo das funções e objetivos das principais APIs é apresentado a seguir:
· Java Server Pages (JSP), Java Servlets e Java Server Faces (JSF): para desenvolvimento web, com geração dinâmica de páginas no servidor;
· Enterprise JavaBeans Components (EJB) e Java Persistence API (JPA): para instanciação e persistência (gravação e recuperação, distribuída ou não, de seus dados em memória) de componentes de software. Por meio da JPA, é possível interagir com bases de dados relacionais encapsulando os códigos de consulta do tipo Structured Query Language (SQL);
· Java API para XML Web Services (JAX-WS) e Java API para XML Binding (JAX-B): gerenciamento de arquivos do tipo XML e utilização de web services;
· Java Autenthication and Authorization Service (JAAS): para controle de autenticação e acesso para segurança das aplicações;
· Java Transaction API (JTA): objetiva o controle de transações em container;
· Java Message Service (JMS): tem por finalidade gerenciar o intercâmbio de mensagens;
· Java Naming and Directory Interface (JNDI): objetiva o gerenciamento de espaço de nomes e objetos.
Servidores de aplicação e web containers
Um servidor de aplicação Java EE é o conjunto de softwares responsáveis por prover a infraestrutura de programação e a utilização dos aplicativos seguindo a especificação da tecnologia. Várias empresas podem fornecer um servidor de aplicação, no entanto os mantenedores do Java EE definem uma implementação de referência completa, que é de código aberto (open source), chamada GlassFish Server Open Source Edition. Existem ainda implantações de referência parciais (para algum serviço específico), como o Mojarra para a especificação do JSF.
Dentre servidores de aplicação desenvolvidos por outras empresas (não sendo a implementação de referência), é possível citar o JBoss, Wildfly, IBM WebSphere e Oracle WebLogic como implementações completas da plataforma Java EE.
A implementação parcial do Java EE, que disponibiliza criação, processamento e entrega de conteúdo dinâmico na web, é chamada de web container, sendo indicado para desenvolvimento de sistemas que utilizam apenas a parte Web do ambiente (geralmente para aplicações de pequeno e médio porte). O exemplo mais conhecido de web container é o Apache Tomcat, que implementa as tecnologias Java Servlet e JavaServer Pages (JSP) e não é um container Enterprise JavaBeans (EJB).
Os web containers não são tão completos quanto os servidores de aplicação, porém já realizam o processamento de páginas que os chamados servidores web não fazem. Essa última categoria tem como exemplo bem conhecido o Apache Web Server, que, em sua versão simples (sem complementos), apenas entrega conteúdo estático (hipertexto, imagens e vídeo) aos clientes.
Agora é a hora de sintetizar tudo o que aprendemos nessa unidade. Vamos lá?!
SINTETIZANDO
Essa unidade se iniciou com a apresentação de conceitos básicos de funcionamento das aplicações para internet na web, apresentando um pouco de sua história e da parte técnica do protocolo que rege toda a comunicação cliente-servidor, o HTTP. Foi visto ainda que a versão segura desse protocolo, o HTTPS, é a opção mais indicada para uso atual.
A partir da base de conceitos, foram feitas a apresentação teórica e a demonstração prática das linguagens e tecnologias para desenvolvimento de páginas web, do hipertexto simples à sua formatação com folhas de estilo e controles de ações utilizando JS. O conteúdo prosseguiu explorando detalhes de funcionamento da geração dinâmica das páginas nos servidores.
Como parte final dessa unidade, foram vistos conceitos iniciais da plataforma Java EE e suas principais APIs, explicitando seus detalhes de distribuição, com uma visão geral de sua quantidade de recursos existentes.
Nessa plataforma, considerando o foco em web da unidade, foram abordados também os detalhes e as diferenças entre servidores de aplicação para web containers.