AULA 01 - INTRODUÇÃO AO WWW e HTML

Prévia do material em texto

TECNOLOGIAS PARA INTERNET I
ARQUITETURA WWW & INTRODUÇÃO AO HTML
Prof. Paulo Henrique
World Wide Web
• Concebida em 1989 no CERN (Organização Europeia para a Pesquisa 
Nuclear)
• Objetivo inicial era o compartilhamento de documentos ligados à física nuclear.
• Crescimento exponencial entre décadas de 90 a 2000.
• 1994: W3C (World Wide Web Consortium)
• CERN e MIT
• Voltado para o desenvolvimento da web, padronização de protocolos e interoperabilidade entre 
sites.
Arquitetura
• Coleção de documentos virtuais (páginas ou hipertexto).
• Buscadas, Processadas e visualizadas geralmente através de navegadores 
(browsers).
• Páginas podem possuir conteúdo multimídia:
• Imagens, Áudio, Vídeo, programas e comandos de formatação de conteúdo.
Arquitetura
• Hiperlink – Componentes de uma página que remetem a outras páginas.
• Cada página é resultado de uma solicitação a um ou mais servidores, que 
retornam o conteúdo processado e exibido pelo browser.
• O protocolo de solicitação-resposta que é baseado em texto e roda sobre o 
TCP é o HTTP (HiperText Transfer Protocol).
Páginas
• Estática
• O conteúdo é sempre o mesmo toda vez que a página for solicitada.
• Dinâmica
• Gerada sob demanda por algum programa, ou pode conter um programa.
• Ex: Loja virtual, Jornais
Browser (Navegador)
• Localiza e acessa páginas através da URL (Uniform Resouce Locator).
• Toda URL possui:
• Protocolo
• Nome da máquina hospedeira
• Caminho que identifica a máquina.
• Geralmente é hierárquico, modelando uma estrutura de diretórios (pasta).
Browser
• Processo de busca a partir de hiperlink:
• Browser define a url.
• Solicita ao DNS (Domain Name System) o IP referente à máquina da url.
• Recebe o IP.
• Estabelece conexão TCP com o IP recebido na porta 80.
• Envia comando em HTTP solicitando a página da url.
• Recebe a página.
• Caso a página inclua outras URLs necessárias para exibição do conteúdo, todo o 
processo anterior se repete.
• Navegador exibe a página.
• Conexões TCP encerradas.
Protocolos mais comuns de URL
• HTTP
• FTP
• FILE
• MAILTO
• RTSP
• SIP
• ABOUT
Tipos MIME
• Cada página retornada para o browser possui um tipo de conteúdo.
• Caso o browser não consiga interpretar o conteúdo, poderá fazer uso de 
extensões (plugins) ou programas auxiliares.
Servidor WEB
• Passos de resposta de requisição:
• Aceita conexão TCP de cliente (browser).
• Obtém o caminho até a página, que é o nome do arquivo solicitado.
• Obtém o arquivo (do disco).
• Envia o conteúdo do arquivo.
• Encerra a conexão TCP.
Por que usar TCP e não UDP?
Problemas
• Acesso a arquivos no disco.
• Leituras lentas.
• Alguns servidores podem processar apenas uma requisição por vez.
Como solucionar?
Cache de servidores
• Os arquivos (páginas) mais solicitados são carregados diretamente para a 
memória.
• Antes de consultar o disco, o servidor consulta a memória.
• Requisitos:
• Grande capacidade de memória principal
• Rápido Processamento.
Servidores Multithread
Servidores Multithread
• Módulo front-end 
• Recebe todas as solicitações e entrega para um dos módulos de processamento.
• Módulos de processamento
• Consultam o cache:
• Se o arquivo estiver, é retornado.
• Se não, é buscado no disco e armazenado no cache.
Cookies
• Mecanismo de armazenamento de informações do servidor na máquina 
cliente.
• Servem para “identificar” um navegador no servidor sem a necessidade do 
usuário se autenticar a cada acesso.
• Aplicações:
• e-commerce
• redes sociais
• É o famoso “Manter-me Conectado”!
Cookies
Cookies
• Funcionamento
• Antes do envio de solicitação do browser, o mesmo verifica se existem cookies para 
o servidor.
• Se sim, o conteúdo dos cookies é enviado na requisição.
• Ao receber os cookies, o servidor os interpreta de maneira particular.
Ex: 
Jiils-
store.com
/ Cart = 1-00501; 1-
07031
11-1-11 14:22 Não
Cookies - Controvérsias
• Rastreamento
• Hábitos de navegação
• Atividades e comportamento de usuário
• Privacidade
Páginas WEB estáticas
• Arquivos com conteúdo fixo, sem alterações.
• Não são inertes, mesmo que estáticos.
• Uma página contendo vídeo pode ser estática.
• Escritas em HTML (HiperText Markup Language).
• HTML é linguagem de formatação e não de programação. Formata documentos.
• LaTeX e TeX são outras linguagem de marcação geralmente para uso acadêmico.
• O Browser é o interpretador da HTML.
Páginas WEB Dinâmicas
• Conteúdo muda conforme interação do usuário.
• Programas são executados no servidor, no browser ou nos dois.
• As requisições/respostas são fruto da interação do usuário com os 
programas.
• Ler sobre CGI, PHP, JavaScript, VBScript, AJAX, Applets.
HTTP
• Especificado na RFC (Request For Comments) 2616
• Simples do tipo solicitação-resposta
• Especifica as mensagens que podem ser enviadas e recebidas.
• Mesmo pertencente à camada de aplicação, está se tornando um protocolo 
de transporte.
• Pode ser usado em outros processos.
• Ex: player, antivírus, quadros de fotos digitais.
HTTP
• Na versão 1.0, após conexão e troca de dados entre cliente/servidor, a 
conexão TCP era encerrada.
• Ok para páginas HTML com apenas texto.
• Necessidade de transporte de vários componentes de uma página.
• Versão 1.1 com conexões persistentes.
HTTP
HTTP 1.0 HTTP 1.1 com
múltiplas solicitações
sequenciais
HTTP 1.1 com
múltiplas solicitações
paralelas
Solicitações de uma página e duas figuras. Método (c) reduz ociosidade.
HTTP
• Conexões persistentes possuem um problema:
• Quando encerrar a conexão?
• Tempo de ociosidade de servidor ou cliente.
• Número de conexões abertas.
• Múltiplas conexões TCP
• Aumentam o overhead e escondem a latência.
• TCP realiza controle de congestionamento.
• Conexões competem entre si.
• Perdas de pacotes
HTTP - Métodos
• Operações do protocolo.
• Para cada solicitação ao servidor, há uma operação.
• GET
• Solicita uma página ao servidor:
• GET nome_arquivo HTTP/1.1
• HEAD
• Solicita apenas o cabeçalho da mensagem.
• Útil para validação de URLs
HTTP - Métodos
• POST
• Envia dados para o servidor e retorna página como resultado.
• Dados podem ser conteúdos de um formulário ou parâmetros para execução de processos no 
servidor.
• Outros...
HTTP - Status
• Toda solicitação possui resposta com status.
HTTP - Cabeçalhos
• Informações adicionais que são passadas numa solicitação/resposta.
• São parâmetros enviados tanto pelo servidor quanto pelo usuário.
HTTP - Cabeçalhos
HTTP - CACHING
• Ato por parte do browser de salvar páginas que poderão ser utilizadas 
posteriormente.
• Vantagem:
• A transferência do conteúdo não precisa ser refeita.
• Redução de tráfego e latência na rede
• Desvantagem
• Navegador armazena páginas, porém o custo com armazenamento local é baixo.
HTTP - CACHING
• Questão:
• Como determinar que uma página em cache é a mesma que seria solicitada?
• Verificar validade no cache
• Cabeçalho Expires na página.
• GET condicional ao servidor.
• Cabeçalhos Last-Modified e If-Modified-Since
Exemplo HTTP
telnet www.ietf.org 80
GET /rfc.html HTTP/1.1
Host: www.ietf.org
http://telnet.browseas.com/
HTML
• Possui tags (comandos de formatação).
• Tags podem possuir atributos (parâmetros).
HTML
• O browser só entende HTML.
• Vamos a um exemplo (Ex 01):
• Abra um editor de texto, copie o conteúdo acima e salve como index.html
Exemplo extraído da Apostila de Desenvolvimento Web (Caelum)
HTML
• O mesmo exemplo, só que agora com tags (Ex 02).
HTML
• Sintaxe
• <nomeDaTag>
• Tags que possuemconteúdo, como <title>, <h1>, <h2>, precisam de fechamento 
após o conteúdo: </nomeDaTag>
• Tags podem possuir atributos, que são parâmetros com a sintaxe nome=valor.
• Quando o valor for texto, use aspas duplas: nome=“valor”
• Atributos podem pertencer a uma tag específica, ou podem ser globais, 
pertencendo a qualquer elemento (tag) html.
• Tags que não possuem conteúdo, não precisam de fechamento.
• Exemplo: Tag <meta>
HTML
• Estrutura
• Uma página HTML válida precisa obrigatoriamente das tags abaixo:
<!DOCTYPE>
<html>
<head></head> (cabeçalho)
<body></body> (corpo)
</html>
HTML
• Instrução <!DOCTYPE>
• Não é TAG.
• Instrução para o navegador acerca da versão do HTML.
• <!DOCTYPE html> Representa a versão 5 – mais recente.
HTML
• <HEAD>
• Possui informações que são de interesse do browser. 
• Pode conter título, scripts, estilos, metadados e etc.
• <TITLE></TITLE>
• Define o título de uma página. Aparece em resultados de mecanismos de busca.
• <META>
• Define metadados sobre a página html.
• Os browsers utilizam metadados para saber como exibir componentes, recarregar páginas, entre outros 
detalhes.
• Um de seus atributos mais utilizados é o charset. (UTF-8) (Ex 03)
• Outros atributos:
• Nota: O conteúdo (content) de um atributo só pode ser definido se o atributo for definido com nome 
(name) ou com o http-equiv.
.
HTML
• Viewport
• Área visível da página pelo usuário. 
• Varia de tamanho de acordo com o dispositivo.
• Fazendo uso deste valor, você indica ao browser como ele deve controlar as 
dimensões e escala da página.
• No exemplo acima, é indicado ao browser que a largura da página deve seguir a
largura de tela do dispositivo, e que o nível de zoom inicial é 1.0 quando a página for
carregada pelo navegador.
Leia mais em:
https://www.w3schools.com/css/css_rwd_viewport.asp
HTML
• <LINK>
• Tag utilizada para definir uma ligação entre a página em questão e um recurso externo. Veremos 
com mais frequência no decorrer da disciplina.
• Usada para referenciar arquivo de folha de estilos:
• Alguns Atributos:
• charset: para definir o encoding do documento externo.
• href: identificar a localização do documento externo.
• type: especifica o tipo de mídia contida no documento externo.
• rel: define o relacionamento entre a página html e o documento externo
HTML
• <BODY>
• É o corpo do documento html e nele deve conter ao menos uma tag dentro do seu 
escopo.
• No corpo de uma página pode haver texto, hiperlinks, imagens, tabelas, listas e 
outros conteúdos multimídia.
• Os atributos que pertenciam a esta tag tornaram-se obsoletos após o HTML5. 
• alink, background, bgcolor, link, text, vlink.
• A partir do HTML5 recomenda-se o uso de CSS para definir tais características do 
corpo do documento.
HTML
HTML
• Títulos
• Para adicionar títulos aos textos em uma página, as tags de heading são utilizadas.
• Vão de <h1> até <h6>, onde <h1> representa maior importância e <h6>, 
consequentemente, menor importância.
• Atributo: align (Obsoleto no HTML5).
.
HTML
• Parágrafos
• A marcação mais comum para textos é a tag de parágrafos <p>.
• Os navegadores adicionam espaços (margens) automaticamente antes e após cada 
parágrafo.
• As margens podem ser modificadas com propriedades específicas em CSS.
• Atributo: align (Obsoleto no HTML5).
• Exemplo de como não escrever poemas:
HTML
• Quebras de linha
• Para inserir uma quebra de linha simples, utilizamos a tag <br>.
• Por se tratar de uma tag vazia, ou seja, não possui conteúdo, a mesma não precisa 
ser fechada com </br>.
• Útil para escrever poemas.
• Não é recomendável utilizá-la para separar parágrafos.
• Exemplo de como escrever poemas:
HTML
• Ênfase em textos
• Quando há a necessidade de dar destaque a algumas partes de texto, podemos 
utilizar as tags de ênfase para renderizar textos com formatos diferentes. (Ex 03)
• São tags que não estão obsoletas. Porém, é possível obter melhores resultados com 
CSS.
• As tags <b> para negrito, e <i> para itálico também podem obter resultados 
semelhantes. No entanto, as tags acima possuem mais “significado”.
HTML
• Imagens
• Para adicionar imagens a uma página html, utilizamos a tag <img>. (Ex 04)
• Dois atributos devem ser obrigatoriamente informados:
• src & alt
• src refere-se à localização da imagem
• alt é um texto alternativo que aparece caso a imagem não possa ser 
exibida.
• Na prática, uma imagem não é inserida numa página html. O que
acontece é que a tag <img> cria um espaço para renderizar uma imagem
que é referenciada por sua url.
HTML
• Imagens
• Atributos como align, border, hspace, e vspace são obsoletos no HTML5.
• É possível ligar uma imagem a outra página html. Basta colocar a tag <img> dentro 
de uma tag <a> (será vista mais adiante).
• A tag de imagem não possui conteúdo, logo não precisa ser fechada.
• O HTML5 introduziu duas novas tags para trabalhar com imagens:
• <figure> e <figcaption>
• <figure> deve ser utilizada em conjunto com <figcaption>
HTML
• <FIGURE>
• Destina-se a marcar uma unidade de conteúdo e opcionalmente uma legenda para o 
conteúdo.
• <FIGCAPTION>
• Destina-se a marcar cabeçalho ou legenda para uma imagem.
• Se vir antes da tag <img> define um cabeçalho para a imagem.
• Caso venha após a tag <img> define uma legenda para a imagem.
HTML
• Imagens
• Exemplos:
• Figura sem legenda/cabeçalho Figura com cabeçalho
HTML
• Imagens
• Várias imagens agrupadas com legenda. (Ex 05)
HTML
• Imagens
• A partir das versões dos browsers a seguir, há suporte para a tag <figure>.
HTML – Atributos Globais
Fonte: www.w3schools.com
EX 03