10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 1

Prof. Yanko Costa

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 1/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 2/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 3/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

(servidor).
Os dispositivos não precisam estar fisicamente na mesma localização: basta que
se tenha

um meio de 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).

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 4/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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, 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).

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 5/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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 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).

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 6/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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 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,

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 7/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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).

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,

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 8/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

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,

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 9/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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
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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 10/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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. É

importante salientar que as marcações (tags) no HTML podem

ser escritas em
maiúsculo ou minúsculo.

Quadro 1 – Exemplo de documento HTML

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 11/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

Figura 3 – Resultado do HTML no navegador

Fonte: Costa,
2021.

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 12/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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 documento: Tags de
parametrização de textos:
Criação de Tabelas = < TABLE > Negrito = < B >, < STRONG >
Parágrafos = < P > Itálico = < I >, < EM >
Títulos = < H > Monospace = < CODE >
Quebra de linha = < BR > Sobre/subscrito = < SUP >, < SUB
>
Listas = < OL >, < UL > Delete/Insert = < DEL
>, < INS >
Formulários = < FORM > Abreviação = < ABBR >
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.

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 13/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

<IMG
src=“figura.png”>, em que o atributo src com o valor figura.png
é utilizado para

informar qual arquivo de imagem será inserido no documento

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 14/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 15/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 16/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

Quadro 4 –
Estrutura de uma tabela

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.

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

Versão da
tabela com borda definida (a)

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 17/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

5.1 HIPERLINKS

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 18/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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 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.

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 19/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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 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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 20/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

<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).
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 21/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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).

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 22/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

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

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 23/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

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.

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.

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 24/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

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.

[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.

[3]
Editor de texto puro é aquele que não
acrescenta formatações no texto. Normalmente é usado

em programação.

[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.

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 25/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 26/26