FERRAMENTAS DE

DESENVOLVIMENTO WEB
AULA 1

Prof. Yanko Costa

CONVERSA INICIAL

Em nossas aulas, serão abordados os conhecimentos necessários para a

utilização das tecnologias que envolvem o desenvolvimento de sistemas web e
a possibilidade de reaproveitamento dessas tecnologias no ambiente móvel. As
aulas buscam relacionar os aspectos principais do desenvolvimento de sistemas
que são acessados via navegador e disponibilizados na internet, como esses
sistemas têm evoluído sua interface com o usuário e quais tecnologias
contribuíram para isso.
Nesta aula, serão abordados importantes conceitos que facilitarão o
entendimento de algumas tecnologias incorporadas ao desenvolvimento dos
sistemas, as quais serão apresentadas nas aulas seguintes. Também será
apresentada a linguagem de marcação HTML, que será utilizada como base na
construção de interfaces nas demais aulas.

TEMA 1 – DESENVOLVIMENTO WEB

O desenvolvimento de sistemas foi se transformando à medida que as

interfaces usadas para o acesso às informações dos sistemas foram evoluindo:
de telas de texto puro para interfaces gráficas. A incorporação das redes de
computadores pelas empresas impulsionou a redistribuição do processamento
executado pelos programas, podendo ser feito em diferentes dispositivos e
retornando o resultado para o usuário que pode visualizá-lo, estando em uma
localização diferente de onde é feito esse processamento.
Esse novo contexto alterou o conjunto de conhecimentos que o
desenvolvedor precisava ter ao projetar um sistema. Agora é preciso avaliar o
ambiente em que será executado, como será a comunicação entre o usuário e a
interface e, também, a comunicação entre a interface e o conjunto de regras
necessárias para a execução do sistema.
Para desenvolver um sistema, uma das primeiras coisas que são
percebidas como necessárias pelo desenvolvedor é a linguagem de
programação. Apesar de uma linguagem de programação ser indispensável, o
entendimento e o uso de tecnologias de rede são a base de apoio para o uso da
maioria dos sistemas atualmente, principalmente ao considerar sistemas web,
como também aplicativos em dispositivos móveis (smartphones, tablets e
notebooks).
 Um sistema web utiliza as tecnologias e ferramentas associadas à internet
como base para seu desenvolvimento, e a navegação nesse tipo de sistema tem
como base o Uniform Resource Locator (URL), que possibilita a localização do
recurso que contém a informação, podendo esse recurso ser uma figura, uma
página com diferentes conteúdos, um vídeo ou um sistema de informação.
Como exemplo de localização de um recurso usando uma URL, temos
“http://www.empresa.com.br/pasta/programa.php?opcao=12”, em que o
recurso é um programa que receberá um parâmetro, vai ser executado e
retornará a informação; e “http://www.site.org/pasta/imagem.png”, em que,
nesse caso, o recurso é uma imagem que será retornada para o usuário.
A forma como o usuário interage com um sistema web foi evoluindo com
o tempo, e com a aplicação de novas características e componentes na criação
de interfaces, foi possível a implementação de aplicações padrão RIA (Rich
Internet Applications, ou “aplicações de internet ricas”), em que a interação do
usuário se assemelha ao tipo de interação a que ele estava acostumado nos
programas desktop (com isso, a interface fica mais “rica” em detalhes) (Deitel;
Deitel, 2009, p. 313). Essas aplicações são chamadas de “aplicações web” (web
applications) pelo órgão internacional que padroniza o ambiente web, chamado
de W3C (W3C, 2021b).
Para entender melhor a parte técnica que será apresentada futuramente,
devemos antes detalhar alguns conceitos específicos, como arquitetura cliente-
servidor, tipos de aplicações no ambiente web e aplicações web em ambiente
móvel.

1.1 Cliente-servidor

Tanenbaum e Bos (2015, p. 577) afirmam que “a web é fundamentalmente

um sistema cliente-servidor, no qual o usuário é um cliente e um website é o
servidor”. Considerando que a web é um ambiente cliente-servidor e que
trataremos de sistemas que vão trabalhar nesse ambiente, vamos entender
melhor esse mecanismo.
Uma arquitetura cliente-servidor estabelece de início uma forma de
comunicação entre duas entidades: uma que solicita uma informação (cliente)
e outra que responde a essa solicitação (servidor). Os dispositivos não precisam
estar fisicamente na mesma localização: basta que se tenha um meio de

3
 transmissão das informações que possibilitem que um dispositivo encontre o
outro (Tanenbaum; Bos, 2015, p. 68; Connolly; Begg, 2005, p. 58).

Figura 1 – Diferentes dispositivos em rede

Créditos: sergeyvasutin/Adobe Stock.

Como exemplificado na Figura 1, essa comunicação pode acontecer entre

diferentes dispositivos. A rede de computadores cria um caminho padronizado
para a troca de informações, mas também pode acontecer no mesmo dispositivo,
em que uma aplicação cliente solicita uma informação para uma aplicação
servidora que está em execução no mesmo dispositivo.
Segundo Connolly e Begg (2005, p. 57), a estruturação dessas aplicações
pode ser feita de duas formas.

a. Tier 2 (duas camadas): o aplicativo cliente (camada 1) recebe, processa

e apresenta os dados do resultado da solicitação e o armazenamento dos
dados e validação de acesso estão localizados no servidor (camada 2).
b. Tier 3 (três camadas): o processamento fica distribuído em três
componentes, podendo ser feito em parte pelo aplicativo no cliente
(camada 1) que fica responsável pela apresentação dos dados, por um
sistema intermediário (middleware) localizado em um servidor que realiza
o processamento das regras de negócio (camada 2) e pela base de dados
em outro servidor (camada 3).

4
 Figura 2 – Sistemas em 2 e 3 camadas

Créditos: A Stefanovska/Adobe Stock.

O uso de camadas depende do tipo de sistema que está sendo

desenvolvido, da capacidade de processamento requerida e da quantidade de
usuários que precisam acessar o sistema de forma simultânea.
Em nossa disciplina, a arquitetura cliente-servidor será utilizada associada
aos protocolos e às formas de comunicação utilizadas na internet, sendo o
protocolo HTTP (HyperText Transfer Protocol ou “protocolo de transferência de
hipertexto”) utilizados como base da comunicação entre os programas
exemplificados nas demais aulas.

1.1.1 Hypertext Transfer Protocol (HTTP)

O HTTP não é um conceito, mas um dos mais utilizados protocolos de

comunicação na internet. Ele é a base do ambiente web, sendo usado na
comunicação das solicitações dos navegadores e nas respostas dos servidores.
Conforme Tanenbaum e Wetherall (2011, p. 664), no início da web, os
conteúdos armazenados nos servidores eram estáticos, ou seja, arquivos
contendo páginas de texto ou figuras eram transferidos para o cliente usando um
aplicativo chamado browser (navegador) e a forma básica de construir esses
conteúdos era utilizando uma linguagem de marcação chamada HTML (a qual
veremos mais adiante).
Para disponibilizar um sistema web no servidor, um serviço HTTP precisa
ser instalado e configurado, para que seja executado indefinidamente,

5
 aguardando alguma solicitação via rede. Essa solicitação pode ser criptografada
ou não, e utiliza como padrão as portas 1 443 (criptografado) e 80 (normal).

1.1.2 Programação no servidor

Um dos sistemas que implementam o HTTP mais utilizados é o sistema

Apache 2, que, além de receber e responder às solicitações HTTP, também tem
mecanismos para incorporar uma linguagem de programação que pode ser
usada no desenvolvimento de sistemas no lado servidor. Outros serviços HTTP
também podem ser utilizados (por exemplo, Nginx, Nodejs), mas um fator que
vai tornar esses serviços propícios para o desenvolvimento de sistemas no lado
servidor é a integração com alguma linguagem de programação.
Com a utilização de uma linguagem de programação incorporada ou
integrada ao um serviço HTTP, o desenvolvedor terá acesso ao banco de dados,
a outros servidores, a sistemas de arquivos e demais recursos de forma
centralizada. Essa centralização pode ser muito importante para compartilhar
informações atualizadas entre vários clientes.

1.2 Aplicações web

No início da internet, ao desenvolver um sistema em um ambiente web, o

processamento era feito somente no servidor e o cliente apenas solicitava a nova
página que traria outras informações. Nesse método, tínhamos as “páginas
dinâmicas”: sites em que as páginas eram construídas na medida em que eram
solicitadas. Assim, o usuário navegava nos menus dos sistemas e clicava nas
opções. Ao selecioná-las (clicando em um hiperlink, por exemplo), uma
solicitação era enviada ao servidor e uma nova página chegava ao navegador
com todas as informações. Esse contexto era chamado de MultiPage
Applications – MPA (ou “aplicação de múltiplas páginas”).
Todo o processamento era feito no servidor, e conforme a quantidade de
usuários ia aumentando, multiplicava-se a capacidade do servidor. Em sistemas
menores, com poucos usuários, essa situação não chegava a impactar no

1
Porta é a denominação do endereço do protocolo TCP utilizado na comunicação de rede, em
que o HTTP é encapsulado. Cada programa, ao se comunicar na rede de computadores,
precisa estar associado a uma porta e um endereço IP.
2
O site Netcraft mantém um longo histórico de estatísticas sobre plataformas em uso nos sites
em atividade.
6
 ambiente do servidor e muitos sistemas ainda têm essa estrutura. No entanto,
em sistemas com milhões de acessos, a infraestrutura necessária para manter
o sistema com um desempenho aceitável era muito grande.
Uma questão que pesava nesse tipo de processamento é que toda a
página (layout, figuras, estrutura, dados) precisava ser refeita na tela do
navegador. Isso tinha um impacto no servidor (processava toda a tela
novamente), no cliente (redesenhava toda a tela novamente) e na comunicação
(todos os bytes da tela eram transmitidos novamente).
Para criar uma alternativa para essa estrutura e diminuir a crescente
demanda por mais processamento no servidor, a atenção voltou-se para a forma
como uma aplicação de desktop (em duas camadas) era desenvolvida. A tela e
o processamento eram manipulados pelo lado do cliente e apenas a informação
específica que precisava ser atualizada era solicitada ao servidor. Em um
sistema web, esse método é chamado de Single Pages Applications – SPA (ou
“aplicação de página única”).
Na SPA, o servidor envia para o cliente um código que será executado no
navegador e, quando a informação precisar ser atualizada, esse código no
cliente envia uma solicitação contendo apenas essa necessidade para o
servidor.
Dessa forma, a primeira transmissão enviada para o usuário conterá o
código principal e, assim, uma boa parte do processamento será transferida para
o cliente e o servidor centralizará os dados. Com o aumento da quantidade de
usuários acessando o servidor, como parte do processamento vai para cada
usuário (cliente), os recursos do servidor (memória, processamento) podem ser
menores.
Como vantagem adicional, esse código que será executado no cliente
poderá trabalhar as interações com o usuário de forma mais rápida e poderá
criar personalizações no layout de forma mais dinâmica.
Tanto as aplicações MPA quanto as aplicações SPA são consideradas
aplicações web (web applications), desde que tornem a experiência do usuário
semelhante ao uso de aplicações desktop.
Para desenvolver tanto uma aplicação MPA quanto uma aplicação SPA,
o desenvolvedor precisará conhecer ferramentas e tecnologias usadas no
navegador do cliente (por exemplo, HTML, CSS, JavaScript) e no servidor (por
exemplo, banco de dados, plataforma HTTP). Para aprofundar o contexto de

7
 processamento no lado cliente, incluiremos aqui, futuramente, um detalhamento
maior sobre o Cascading Style Sheets – CSS (ou “folha de estilo em cascata”),
criado com o propósito de prover um mecanismo mais flexível para organizar a
estética dos documentos HTML e do JavaScript, linguagem de programação
inserida no navegador para manipular o documento HTML e interagir com este.

1.3 Progressive web app (PWA)

Outro ambiente que tem sido alvo do desenvolvimento de sistemas atuais

é o móvel (mobile), em que o smartphone é o principal dispositivo. Esse ambiente
tem algumas características próprias, por exemplo, sensores, sistema
operacional e interface e, com isso, tem um desenvolvimento diferenciado.
No entanto, o desenvolvimento web tem também algumas tecnologias em
comum com o ambiente móvel, em que podemos citar: ambos usam a rede de
comunicação para acessar bases de dados, um navegador web também está
presente nos dispositivos móveis e as linguagens de programação são as
mesmas. Essa percepção vai orientar a possibilidade de poder reutilizar o
código dessas aplicações entre esses ambientes.
Uma opção que foi criada para o reaproveitamento de código de uma
aplicação web e que possibilita ter a experiência de uso semelhante a um
aplicativo usado em aparelhos móveis é o Progressive Web App – PWA (ou
“aplicativo web progressivo”). Com esse tipo de configuração da aplicação web,
o sistema pode ser instalado no smartphone de forma semelhante a um
aplicativo, podendo ser identificado na tela inicial do aparelho ou na lista de
aplicativos. Nesse caso, a instalação não é feita pela loja de aplicativos dos
sistemas Android ou IOS, mas por meio de uma interface no navegador do
smartphone.
Algumas características fazem esse tipo de configuração ser diferente de
um simples atalho para um site: a aplicação web deve ter um arquivo de
configuração chamado de manifesto, que indica diversos parâmetros a serem
utilizados na sua instalação (por exemplo, nome, ícone, local), deve poder
interceptar a conexão com a rede e desviar o acesso ao dispositivo local nos
casos de estar sem rede (off-line), o acesso externo deve ser criptografado
(https), deve ser usável tanto em navegadores com menos recursos (usando
menos funcionalidades) quanto em navegadores mais avançados e deve ser
utilizável independentemente do tamanho da tela (responsivo).
8
 Deve-se considerar que esse tipo de alternativa, apesar de melhor
integrada com o sistema operacional, continua sendo uma aplicação web, que é
instalada no dispositivo móvel e automatiza a execução de um navegador
reconfigurado para não mostrar seus controles e menus; entretanto, para o
usuário, a utilização é semelhante à de um aplicativo nativo (MDN Web Docs,
2021).

TEMA 2 – BIBLIOTECAS E FRAMEWORKS

Durante o desenvolvimento de um sistema, algumas tarefas são

genéricas a ponto de poderem ser necessárias em outros sistemas. É o caso de
leitura de banco de dados, compactação de dados, conversão de dados,
emissão de alertas etc. Nesses casos, o desenvolvedor que já tem alguma
experiência em programação e com bom nível de abstração percebe que poderá
utilizar essas tarefas novamente, cria um repositório dessas funções (muitas
vezes em arquivos separados) e inclui essas funções nos demais sistemas que
desenvolve.
Em alguns casos, tais funções são tão práticas e genéricas que o
desenvolvedor acaba divulgando para outros desenvolvedores e esse repositório
vai sendo disseminado. Um repositório desse tipo é chamado de biblioteca (em
inglês, library ou lib).
Quando todo um conjunto de funções do sistema pode ser reaproveitado
em outros sistemas, por exemplo, o processo de acesso (login e senha), a
navegação nos menus ou a consistência de formulários de usuários, essas
partes podem ser agrupadas em um framework que, por sua vez, pode conter
ou acessar bibliotecas. Os frameworks são usados como base para o
desenvolvimento de aplicações que têm funcionamento semelhante.

2.1 Tipos

Existem diversos tipos de bibliotecas e frameworks. As bibliotecas podem

se limitar a componentes específicos, como manipulação de imagens,
compactação, renderização 3D, protocolos de rede, para citar alguns. O próprio
sistema operacional apresenta um conjunto de bibliotecas que podem também
ser utilizado para o desenvolvimento de programas independentes.

9
 Os frameworks também podem compor um escopo específico, como
frameworks para layout, desenvolvimento de aplicações móveis,
desenvolvimento de sistemas corporativos ou desenvolvimento de sites
dinâmicos, por exemplo. Em muitos casos, é o framework que administra o fluxo
dos dados e a interação com o usuário.
Aqui vamos abordar o uso de framework no desenvolvimento de layout
(Bootstrap) e um caso no desenvolvimento de aplicação web (Angular).

TEMA 3 – HYPERTEXT MARKUP LANGUAGE (HTML)

A estruturação e apresentação das informações para o usuário é um ponto

fundamental para o sistema ser considerado útil. Da mesma forma que um livro,
artigo ou página de revista, alguma padronização é importante para facilitar a
identificação de partes importantes da informação. Títulos, parágrafos,
separadores de texto – como ponto-e-vírgula (;), vírgula (,) e ponto-final (.) – e
espaçamento são usados como auxiliares na apresentação das informações.
Em um sistema informatizado, as informações são também padronizadas
e facilitam a navegação entre as diferentes partes do sistema, bem como
auxiliam na apresentação de grandes volumes de dados e são criados
mecanismos para destacar certos tipos de dados (erros, valores, saldos,
dependência).
Cada sistema poderia ter sua própria padronização, mas isso resultaria
em um custo adicional de treinar o usuário para interpretar seu formato
diferenciado, assim como cada desenvolvedor teria que aprender a criar essas
estruturas conforme o sistema.
A linguagem de marcação HTML foi criada por Tim Berners-Lee, em 1989,
com o objetivo de facilitar o compartilhamento de informações científicas entre
grupos de pesquisadores de diferentes países, idiomas e sistemas de
computadores (W3C, 2021a).
Essa linguagem cria marcações para indicar que a informação é um texto,
um título, uma referência para outras informações, um conteúdo de uma tabela
ou uma lista de opções. Conforme o HTML vem evoluindo, são criadas novas
marcações ou variações na apresentação e interpretação de marcações
existentes.
Atualmente, o HTML está na versão 5 e sua criação, evolução e
padronização foi conduzida desde 1989 pelo centro de pesquisas do Conseil
10
 Européen pour la Recherche Nucléaire – Cern (ou Conselho Europeu de
Pesquisa Nuclear). Depois, em 1994, foi criado um consórcio de entidades
chamado W3C para promover sua evolução e, após acordo com o W3C, o
padrão HTML tem sido mantido pelo grupo web Hypertext Application
Technology Working Group – WHATWG (Jaffe, 2019).
A apresentação de informações estruturadas em marcações e outras
tecnologias web tem extrapolado a internet e tem sido utilizada também para
formatar textos em editores, planilhas (Microsoft Docs, 2021) e até mesmo em
interfaces de sistemas operacionais (Microsoft Docs, 2019).
Para implementar a estrutura de HTML no conteúdo de sites e sistemas,
vamos verificar como funciona a sintaxe e os principais marcadores.

3.1 Sintaxe HTML

A sintaxe de um marcador no HTML utiliza os símbolos < e > entre o nome

do identificador da marcação inicial e </ e > para indicar o fim da marcação.
Esses marcadores são chamados de tag.
As tags básicas <html>, <head> e <body> compõem a estrutura do
documento, informadas as partes visíveis e as reservadas para configuração.
As tags podem ser agrupadas e aninhadas dentro de outras tags. Os
navegadores que interpretam o documento HTML não fazem distinção se as tags
de início e fim estão na mesma linha ou em linhas separadas. O documento todo
poderia estar em uma linha apenas que o navegador conseguiria interpretar e
mostrar as informações de forma organizada.
Outra característica do navegador e do HTML é que se houver um erro no
documento (uma escrita errada de uma tag ou a falta de um finalizador) o
navegador não interrompe a leitura e mostra o erro: ele ignora a tag errada e
continua tentando interpretar o documento. O resultado final pode variar no caso
de algum erro no documento, podendo a informação não aparecer, o texto ou
figura ficar na posição errada, o layout da tela ficar confuso ou não mostrar nada.
De qualquer maneira, o navegador tentará mostrar algo e, em alguns casos, e
conforme o navegador, poderá perceber o erro e mostrar o resultado correto.
No Quadro 1, temos um exemplo de um documento HTML básico que
pode ser acessado via navegador, que por sua vez mostrará apenas o resultado
da interpretação das marcações, como pode ser visto na Figura 3 a seguir. É

11
 importante salientar que as marcações (tags) no HTML podem ser escritas em
maiúsculo ou minúsculo.

Quadro 1 – Exemplo de documento HTML

No documento HTML ao lado,

<!-- usado para comentários -->
temos a tag <html> iniciando o
<html> documento e a tag </html>
finalizando-o.
<head>
As tags foram dispostas em linhas
<title> página principal </title> separadas para melhor
visualização.
</head>
A tag <head> indica o início do
<body> cabeçalho de configuração do
documento.
<h1> Título visível </h1>
A tag <body> indica o corpo do
<p> Texto visível </p> texto a ser apresentado para o
usuário.
</body>
A tag <p> indica o início de um
</html> parágrafo e a tag </p> identifica o
fim desse parágrafo.

Fonte: Costa, 2021.

As informações que ficaram visíveis na Figura 3 estão usando a

formatação padrão do navegador. Nesse exemplo específico, o que fica mais
aparente é o fundo de texto em branco, a letra em cor preta e o tamanho
diferenciado entre a tag <h1>“ (título) e a tag <p>“ (parágrafo). Diversos outros
parâmetros associados com marcações do HTML têm uma formatação visual
padrão, que podem ser alteradas conforme veremos futuramente.

12
 Figura 3 – Resultado do HTML no navegador

Fonte: Costa, 2021.

No Quadro 2, temos a relação das principais tags do HTML e uma breve

descrição de sua função no documento. Nas aulas práticas, serão feitos roteiros
de uso das principais tags para a criação de documentos HTML e estas também
serão utilizadas nas aulas de CSS e programação mais adiante.

Quadro 2 – Resumo de tags do HTML

Tags de componentes e estruturação do Tags de parametrização de textos:

documento: Negrito = < B >, < STRONG >
Criação de Tabelas = < TABLE > Itálico = < I >, < EM >
Parágrafos = < P > Monospace = < CODE >
Títulos = < H > Sobre/subscrito = < SUP >, < SUB >
Quebra de linha = < BR > Delete/Insert = < DEL >, < INS >
Listas = < OL >, < UL > Abreviação = < ABBR >
Formulários = < FORM >
Link = < A >
Separador = < HR >
Botão = < BUTTON >
Sessão = < DIV >
Texto = < SPAN >
Imagem = < IMG >
Texto pré-formatado = < PRE >
Quadro de visualização = < IFRAME >
Fonte: Costa, 2021.

13
 Enquanto que na criação de páginas HTML estáticas para sites podem
ser utilizados editores específicos para HTML ou um editor de texto puro 3, no
desenvolvimento de sistemas web, essas tags que estruturam o documento e
formatam a informação são inseridas de forma automatizada. A linguagem de
programação escolhida imprime a tag entre as informações que serão buscadas
de uma base de dados, de um sistema de arquivos, de outro sistema ou da
entrada de dados do usuário (ver pseudocódigo no Quadro 3). Assim, a estrutura
e o conteúdo do documento HTML podem ter variações conforme a frequência
que os dados são alterados na sua origem. Por esse motivo, são chamadas de
páginas dinâmicas.

Quadro 3 – Exemplo de lógica para impressão de tag HTML

PROGRAMA TABUADA
IMPRIME <h1> Programa Tabuada de 5 </h1>“
VARIAVEL Y = 1;
REPETE 10 VEZES
IMPRIME <p> 5 x “, Y , “ = “, Y * 5 , </p>“
Y=Y+1
FIM-REPETE

Fonte: Costa, 2021.

O desenvolvedor necessita conhecer a linguagem de programação

escolhida, mas também como as tags HTML funcionam. A falta de uma
marcação final ou o uso de uma marcação trocada em uma tabela pode tornar a
informação do sistema ilegível ou confusa.
Como as tags vão estar sendo utilizadas em conjunto com uma linguagem
de programação, o acréscimo de variáveis, repetições e estruturas de decisão
vão aumentar os cuidados que devem ser tomados com os inícios e os
fechamentos de marcação, ou o aninhamento de tags.
As tags do HTML podem também ter parâmetros de configuração,
chamados de atributos. Em algumas tags, sem algum desses parâmetros, a
funcionalidade da tag pode ficar prejudicada.
Esses atributos têm o formato “nome=valor” e ficam dentro da tag a ser
configurada, como podemos ver nos exemplos a seguir.

3
Editor de texto puro é aquele que não acrescenta formatações no texto. Normalmente é usado
em programação.
14
 • <IMG src=“figura.png”>, em que o atributo src com o valor figura.png é
utilizado para informar qual arquivo de imagem será inserido no docu-
mento pela tag IMG.
• <P id=“alerta”>, em que o atributo id marca um parágrafo com um texto
alerta.

Esses atributos vão auxiliar na integração do documento HTML com

outras tecnologias, como CSS e JavaScript. Um atributo poderá indicar,
inclusive, um evento que será utilizado para criar uma automatização na tela,
por exemplo, um clique com o botão direito do mouse em cima de uma figura, o
apertar de uma tecla de direção (seta) no teclado, ou o toque do dedo em cima
de uma opção em uma tela touch screen 4.

TEMA 4 – HTML: CRIANDO LAYOUT

Um sistema tem várias funções que precisam de interação com o usuário.

Seja para apresentar um conjunto de informações, solicitar uma entrada de
dados, navegar entre partes do sistema ou possibilitar a transmissão de um
vídeo, a tela do navegador precisa ser organizada de forma que o máximo de
objetos possam ser utilizados pelo usuário de forma confortável e eficiente.
O menu de opções do sistema é uma peça-chave na organização da tela
principal do sistema, assim como a área em que serão atualizadas as
informações.
Uma característica na interpretação do HTML é que ele respeita somente
as marcações ao distribuir as informações na tela. Não adianta colocar
caracteres de espaço ou nova linha no texto, pois o navegador poderá deixar o
conteúdo agrupado na mesma linha. Dessa forma, se precisar quebrar a linha
de texto, criar colunas de informações ou posicionar imagens ao lado de uma
lista ordenada, será preciso inserir tags apropriadas que possam organizar essa
distribuição.
Ao iniciar a construção de páginas web com muitas informações, por falta
de alternativa, as tabelas (linhas e colunas) foram utilizadas para posicionamento
e diagramação. A possibilidade de inserir tabelas dentro de outras tabelas levou
à criação de layouts complexos e com diferentes níveis de detalhes.

4
Tipo de tela utilizada em smartphones e alguns notebooks em que, ao se encostar o dedo na
tela, o sistema consegue perceber a localização do toque.
15
 Com a criação e evolução do CSS (de que trataremos futuramente), novas
formas de posicionamento e diagramação foram criadas e, com isso, o uso das
tabelas na diagramação de sites diminuiu sensivelmente. Atualmente, sites (ou
telas de sistemas) que posicionam seus elementos sem a necessidade de
tabelas na parte de diagramação são chamados de tableless (sem tabelas).

4.1 Tabelas

Apesar de ter sido criada para listar dados tabulares (dispostos em linhas
e colunas), uma das primeiras formas de segmentar a tela para a inserção de
informações foi a construção de uma tabela com linhas e colunas que possam
orientar o layout.
Apesar de simples para iniciar a criação de áreas no documento HTML e
distribuir informações, a criação de layouts usando tabelas está caindo em
desuso em razão de problemas de desempenho em layouts complexos e da
necessidade de adaptação das telas para diferentes tamanhos (responsividade).
No entanto, ainda é uma forma didática de compreender como as informações
podem ser distribuídas inicialmente. À medida que formos evoluindo no
entendimento de CSS e dos frameworks de layout, poderemos usar o conceito
de linhas e colunas usado nas tabelas para também posicionar as informações
usando outros mecanismos.
Na Figura 4, temos dois exemplos de utilização de uma tabela com duas
linhas e duas colunas para separar quatro espaços que podem ser usados para
colocação de conteúdo. Em cada célula da tabela, foi identificada a linha e a
coluna específica. Na primeira versão (esquerda), verifica-se que a tabela tem
as bordas definidas, que podem ser identificadas as linhas e colunas. Na versão
seguinte (direita), a mesma tabela está sem a definição das bordas, mas as
áreas continuam separadas.

16
 Figura 4 – Uso de tabela em layout

Fonte: Costa, 2021.

No Quadro 4, é mostrada a estrutura em HTML dessa tabela com duas

linhas e duas colunas, com o seu código completo na lateral direita. No exemplo,
temos a tag <table>, que inicia a construção da tabela; a tag <tr>, que inicia a
linha e finaliza com </tr>; a tag <td>, que inicia a coluna e finaliza com </td>; e,
por fim, a tag </table”, que finaliza toda a tabela. No código HTML apresentado
na lateral direita, todo o documento é listado, inclusive as várias tags <br>
(quebra de linha) usadas para pular linhas em branco, para, com isso, mostrar a
frase area de texto mais abaixo na linha. Como o HTML não interpreta o enter
como um pulo de linha, é preciso colocar uma (ou mais) tags específicas para
isso.

17
 Quadro 4 – Estrutura de uma tabela

<html>
<head>
<title> pagina principal </title>
</head>
<body>
Tabela com duas linhas <tr> e
<h1> Titulo visivel </h1>
duas colunas <td> <table border=‘1’>
<tr>
<td style=‘width: 20%’>linha 1 / coluna 1
</td>
<table> <td>linha 1 / coluna 2 </td>
</tr>
<tr> <td> </td> <td> </td> </tr> <tr>
<td>linha 2 / coluna 1 </td>
<td>linha 2 / coluna 2 <br>
<tr> <td> </td> <td> </td> </tr>
<br>
<br>
<br>
</table>
<p> area de texto </p>
<br>
<br>
<br>
</td>
</tr>
</body>
</html>
Fonte: Costa, 2021.

Na Figura 5, há novamente um exemplo de utilização de uma tabela com

duas linhas e duas colunas, mas com um conteúdo mais próximo do real
(semelhante ao usado em sites e sistemas), facilitando ao leitor o entendimento
de como são diagramadas as interfaces dos sistemas web usando linhas e
colunas. Para atingir o tipo de formatação usado nesse exemplo da Figura 5,
foram também utilizadas configurações de alinhamento, cor, espaçamento e
bordas usando CSS.

18
 Figura 5 – Utilização de tabela em layout de página

Versão da tabela com borda definida (a)

Versão da tabela sem borda definida (b)

Fonte: Costa, 2021.

O exemplo da figura apresenta um campo de digitação para pesquisa, em

que o usuário deverá inserir informações que o programa vai coletar e usar no
processamento local ou no servidor. Esta é uma importante parte do HTML, em
que o usuário, ao invés de solicitar dados para o servidor, poderá enviar dados.
Veremos essa questão no tema seguinte.

TEMA 5 – HTML: COMUNICANDO-SE COM O USUÁRIO

Quando existe a necessidade de receber orientação ou informação do

usuário que está operando o sistema web, o HTML apresenta tags que
possibilitam agrupar o conteúdo digitado (ou selecionado pelo usuário) e enviá-
lo para ser processado por uma linguagem de programação.
O recebimento dessas informações passadas pelo usuário pode ser feito
no mesmo dispositivo, ou enviada pela rede para outro equipamento que vai
fazer o processamento. O mecanismo é o mesmo, e a localização do recebedor
da informação indicado nas tags do HTML é que definirá onde será feito o
processamento.

19
 5.1 Hiperlinks

Um mecanismo usado para facilitar o acesso a recursos e partes do

sistema é o hiperlink, definido pela tag <A>. Usa-se a tag e uma URL para
acessar o documento HTML, que pode estar no mesmo ou em outro servidor, e
pode ser um documento estático ou dinamicamente construído por uma
linguagem de programação.
O hiperlink no HTML tem o formato como <a
href=‘http://www.google.com.br’> Site do Google </a>. Isso indica que essa tag
exige início <a> e fechamento </a>, e apresenta um atributo essencial href, que
indica qual recurso estará sendo vinculado. O texto que aparecer entre o início
e fechamento da tag (“Site do Google”) será usado como palavra-chave para
chamar o recurso. Como padrão de visualização, os navegadores vão sublinhar
a palavra-chave, indicando que pode ser clicada para proceder com a solicitação.
Para a execução de um programa no servidor, o hiperlink pode indicar o
endereço e qual programa deve ser executado para retornar a informação
necessária. Para isso, no exemplo <a href=‘http://local-do-
servidor.com.br/programa.py’> Calcula Saldo </a>, o hiperlink (ou apenas link,
na sua forma abreviada) comunica-se com o navegador demandando que este
solicite ao servidor que execute o programa.py e transmita o resultado do
processamento.
O próprio documento que contém o hiperlink chamador pode ter sido
construído dinamicamente por um programa em momento anterior. Ainda, o
hiperlink pode conter variáveis e valores que serão enviados ao programa do
servidor que estará processando a solicitação. No último exemplo da situação
anterior, temos: <a href=‘http://local-do-
servidor.com.br/programa.py?debito=200’> Calcula Saldo </a>, em que o
“programa.py” vai receber a variável debito com um valor de 200. Na verdade,
na comunicação HTTP são enviados apenas texto (strings), e o programa que
recebe o parâmetro deverá fazer a conversão apropriada.

5.2 Formulários

Uma forma de coletar diferentes tipos de informações do usuário é o

mecanismo de formulário do HTML representado pela tag <FORM>. Nesse tipo
de estrutura, é possível capturar diferentes tipos de interação do usuário com o

20
 navegador, como digitação de texto, seleção única, seleção múltipla,
deslizamento, que podem ser utilizados para diferentes dispositivos de entrada,
como mouse, teclado, touch pad ou touch screen.
Na Figura 6, temos um exemplo didático de um formulário de cadastro de
produto, mostrando algumas formas de coleta de informações do usuário. Cada
forma de coleta tem uma tag que identifica tanto o formato quanto as informações
que serão extraídas para processamento posterior.

Figura 6 – Formulário de cadastro

Fonte: Costa, 2021.

Os formulários em HTML são estruturados com a tag inicial <form> e

finalizados com </form>. Dentro dessa estrutura podem ser incluídas outras tags
gerais, mas o mais importante para esse trecho são as tags associadas ao
formulário, como <input>, <textarea> e <select>. Em todas as opções usadas
em formulários, é necessário indicar uma variável em que os dados serão
armazenados para que um programa que vai processar o conteúdo possa
selecionar e acessar cada uma das informações coletadas.
No exemplo da Figura 6, temos um formulário que se inicia com a
solicitação de um código de produto para o usuário. Esse tipo de solicitação é
feito com uma tag <input>, como pode ser visto no Quadro 5. Essa tag tem
diferentes variações de forma de entrada de dados e a variação utilizada nesse
item é de digitação de texto (type=‘text’). Também foi indicada uma variável para
armazenar a informação (name=‘codigo’) e uma mensagem de orientação
(placeholder=‘ex. 1.23.456-8’). No Quadro 5 também está exposta uma tag que

21
 apresenta um texto auxiliar – <label> Código do produto: </label> – que serve
apenas para facilitar o entendimento da opção.

Quadro 5 – Uso da tag input

<label>Código do produto:</label>
<input type=‘text’ name=‘codigo’ placeholder=‘ ex. 1.23.456-8’>
Fonte: Costa, 2021.

No Quadro 6, temos outra variação da tag <input> como o uso do atributo

radio (type=“radio”). Nessa opção, o usuário vai selecionar entre duas
alternativas. Esse é um tipo de seleção única, pois o usuário não poderá
selecionar as duas opções simultaneamente; apenas uma alternativa fica
ativada. Apesar de serem duas alternativas, o nome de variável vai ser o mesmo
para as duas, pois, conforme descrito anteriormente, apenas uma das escolhas
será deixada ativada.

Quadro 6 – Uso da opção radio

Tipo:
<input type=“radio” name=‘tipo’> Importado
<input type=“radio” name=‘tipo’> Nacional
Fonte: Costa, 2021.

Outra variação da tag <input> pode ver vista no Quadro 7. Nesse caso, é
utilizado o atributo para datas (type=‘date’). Também nesse item foi
acrescentado um atributo para orientar o usuário do formato de data a ser
digitado (placeholder=‘ dd-mm-yyyy’).

Quadro 7 – Entrada de datas

<label >Data de recebimento:</label>

<input type=“date” name=“data_inicio” placeholder=“dd-mm-yyyy” >
Fonte: Costa, 2021.

Além de poder digitar a data completa, o usuário poderá (dependendo do

navegador utilizado) escolher uma data com base em um quadro de seleção tipo
calendário (Figura 7).

22
 Figura 7 – Seleção de data

Fonte: Costa, 2021.

No Quadro 8, temos uma opção da tag <input> que finaliza a entrada de

dados e envia todas as informações digitadas ou selecionadas pelo usuário para
o programa que vai processá-los. Essa opção (type=“submit”) normalmente
assume a forma de um botão que o usuário utiliza para finalizar o formulário.

Quadro 8 – Envio das informações

<input type=“submit” name=“grava” value=“Grava” >

Fonte: Costa, 2021.

A aparência do formulário utilizada nos exemplos não é a que o leitor vai

visualizar se utilizadas as tags apresentadas até esse ponto. Se não for feita uma
alteração na aparência das tags, elas usam o padrão do navegador para cor,
posicionamento, espaçamento e demais características usadas em layout de
telas.
No exemplo mostrado tanto na Figura 5 quanto na Figura 6, para deixá-lo
mais atrativo, foram feitas alterações na aparência das tags utilizando CSS e um
framework específico para layout, chamado de Bootstrap (os quais serão vistos
futuramente).
Para efeito de comparação, a Figura 8 mostra o mesmo documento HTML
sem nenhuma alteração visual diferente do padrão usado no navegador Firefox.

23
 Figura 8 – Formulário com visual padrão

Fonte: Costa, 2021.

A aparência não interfere na coleta das informações ou na funcionalidade

das tags do HTML. O formulário continua funcionando, e apenas pode haver um
impacto no estímulo em utilizar esse tipo de tela.
Muitos estudos de interface homem-computador valorizam cores e
agrupamento visual de dados na confecção de telas de sistemas, com o intuito
de melhorar e facilitar a navegação entre as partes do sistema e sua operação
(Barbosa; Silva, 2010). As considerações de usabilidade são indiferentes ao tipo
de sistema podendo ser aplicadas em sistemas desktop, MPA, SPA, PWA assim
como aplicativos móveis.
A última versão disponível do HTML (chamada HTML5) trouxe
componentes e recursos que tornaram o desenvolvimento de aplicações web
mais próximas das aplicações desktop: a possibilidade de utilização de gráficos
avançados (2D e 3D), o armazenamento off-line, a geolocalização e controles
multimídia sem a utilização de plugins. Essa versão reforça o uso da linguagem
Javascript para a manipulação do documento HTML de forma dinâmica.

FINALIZANDO

Nesta aula, foram apresentados conceitos usados na construção de

sistemas web, que podem ter seu processamento desenvolvido primariamente
no servidor, como no caso dos sistemas MPA, ou com a execução de código no
lado cliente, como no caso dos sistemas SPA.

24
 A possibilidade de reaproveitamento de tecnologias e sistemas
desenvolvidos para web em dispositivos móveis trouxe o desenvolvimento de
aplicativos PWA.
Em ambos os casos (desenvolvimento web ou desenvolvimento de
aplicativos móveis), o uso da rede de computadores como base para a
comunicação entre clientes (usuários) e servidores (bases de dados) é uma peça
importante no compartilhamento e processamento de informações e deve ser
avaliada pelo desenvolvedor ao estruturar a arquitetura do sistema.
Na parte final desta aula, foi apresentada a linguagem de marcação
HTML, que possibilitará criar a apresentação dos dados dos sistemas. Esse tipo
de marcação de conteúdo tem sido incluso em diferentes ambientes e
dispositivos em razão da facilidade de utilização em linguagens de programação
de diferentes tipos, uma vez que basta concatenar as tags HTML nos dados de
saída usando comandos de impressão próprios da linguagem.
Usando poucas Tags, foi possível montar exemplos de documentos HTML
que poderão servir de base para os roteiros práticos e as demais tecnologias
que serão expostas na disciplina.

25
 REFERÊNCIAS

BARBOSA, S.; SILVA, B. Interação humano-computador. Rio de Janeiro:

Elsevier Brasil, 2010.

BEM-VINDO ao Open XML SDK 2.5 para Office. Microsoft Docs, 1.º nov. 2017.
Disponível em: <https://docs.microsoft.com/pt-br/office/open-xml/open-xml-sdk>.
Acesso em: 13 mar. 2021.

CONNOLLY, T. M.; BEGG, C. E. Database systems: a practical approach to

design, implementation, and management. Londres: Pearson Education, 2005.

DEITEL, P. J.; DEITEL, H. M. Ajax, rich internet applications e

desenvolvimento web para programadores. São Paulo: Pearson Prentice Hall,
2009.

FACTS about W3C. W3C, 2021a. Disponível em <https://www.w3.org/

Consortium/facts>. Acesso em: 13 mar. 2021.

JAFFE, J. W3C and WHATWG to work together to advance the open web platform.
W3C, 28 May 2019. Disponível em <https://www.w3.org/blog/2019/05/
w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/>. Acesso
em: 13 mar. 2021.

PROGRESSIVE web apps (PWAs). MDN web Docs, 2021. Disponível em:
<https://developer.mozilla.org/en-US/docs/web/Progressive_web_apps>. Acesso
em: 13 mar. 2021.

STANDARDS. W3C, 2021b. Disponível em <https://www.w3.org/standards/>.

Acesso em: 13 mar. 2021.

TANENBAUM, A. S.; BOS, H. Modern operating systems. Londres: Pearson,

2015.

TANENBAUM, A. S.; WETHERALL, D. J. Computer Networks. Boston: Prentice

Hall, 2011.

WHAT is Windows Presentation Foundation (WPF.NET). Microsoft Docs, 18 jul.

2019. Disponível em <https://docs.microsoft.com/en-us/dotnet/desktop/wpf/over
view/?view=netdesktop-5.0>. Acesso em: 13 mar. 2021.

26