Escolar Documentos
Profissional Documentos
Cultura Documentos
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 1
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
contribuíram para
isso.
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
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 regras necessárias
para a execução do sistema.
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
aplicativos
em dispositivos móveis (smartphones, tablets e notebooks).
“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
ricas”),
em que a interação do usuário se assemelha ao tipo de interação a que ele
estava
órgão
internacional que padroniza o ambiente web, chamado de W3C (W3C, 2021b).
e aplicações web em
ambiente móvel.
1.1 CLIENTE-SERVIDOR
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
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
Créditos: sergeyvasutin/Adobe
Stock.
A rede de
computadores cria um caminho padronizado para a troca de informações, mas
também
formas.
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
(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
Créditos: A
Stefanovska/Adobe Stock.
simultânea.
ou “protocolo de
transferência de hipertexto”) utilizados como base da comunicação entre os
respostas dos
servidores.
transferidos para o
cliente usando um aplicativo chamado browser (navegador) e a forma
básica de
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
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
o
sistema com um desempenho aceitável era muito grande.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 6/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
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
com este.
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.
navegador do smartphone.
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
avançados e
deve ser utilizável independentemente do tamanho da tela (responsivo).
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).
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 8/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
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
2.1 TIPOS
podem
também ser utilizado para o desenvolvimento de programas independentes.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 9/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
dependência).
marcações existentes.
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).
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 10/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
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
ser escritas em
maiúsculo ou minúsculo.
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.
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
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.
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.
<IMG
src=“figura.png”>, em que o atributo src com o valor figura.png
é utilizado para
<P
id=“alerta”>, em que o atributo id marca um parágrafo com
um texto alerta.
automatização na
tela, por exemplo, um clique com o botão direito do mouse em cima de uma
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 14/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
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.
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.
de
detalhes.
a necessidade de
tabelas na parte de diagramação são chamados de tableless (sem tabelas).
4.1 TABELAS
com linhas e
colunas que possam orientar o layout.
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
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.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 16/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Quadro 4 –
Estrutura de uma tabela
Fonte: Costa,
2021.
também
utilizadas configurações de alinhamento, cor, espaçamento e bordas usando CSS.
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.
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
href,
que indica qual recurso estará sendo vinculado. O texto que aparecer entre o
início e
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.
5.2 FORMULÁRIOS
tipos de interação do
usuário com o navegador, como digitação de texto, seleção única, seleção
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 19/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Fonte: Costa,
2021.
uma das
informações coletadas.
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>
Fonte: Costa,
2021.
descrito anteriormente,
apenas uma das escolhas será deixada ativada.
Tipo:
Fonte: Costa,
2021.
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.
Fonte: Costa,
2021.
Quadro 8 –
Envio das informações
<input
type=“submit” name=“grava” value=“Grava” >
Fonte: Costa,
2021.
o padrão do navegador
para cor, posicionamento, espaçamento e demais características usadas em
layout
de telas.
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 22/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
Fonte: Costa,
2021.
de tela.
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
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.
REFERÊNCIAS
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a1 24/26
10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/>. Acesso
em: 13 mar. 2021.
TANENBAUM, A. S.;WETHERALL,
D. J. Computer Networks. Boston: Prentice Hall, 2011.
[1]
Porta é a denominação do endereço do
protocolo TCP utilizado na comunicação de rede, em
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