Tecnologias para
Internet
Thyago Maia Tavares de Farias
Aula 9
Sumário
Revisão para a prova do 1º estágio
Cliente
Software usado para comunicar-se e trocar
dados com o servidor, normalmente em outro
computador;
Exemplos:
Navegadores (Browsers): IE, Firefox, Chrome...;
Applets (pequenos programas Java);
Aplicações que acessam dados da WEB;
Servidor
Combinação
Software+Hardware
que fornece um ou
mais serviços de
provimento de
informações e
recursos
computacionais a
outros computadores
(clientes) ligados a
uma rede;
Uniform Resource Identifier
URI
Identificador Uniforme de Recursos;
Cadeia de caracteres compacta usada para identificar
ou denominar um recurso da Internet;
Permite a interação com representações do recurso
através de uma rede, usando protocolos específicos;
São identificadas em grupos, definindo uma sintaxe
específica e protocolos associados;
Uniform Resource Identifier
Tipos de recurso acessíveis através de URIs:
Páginas estáticas e dinâmicas:
Arquivos Multimídia:
Ex.: index.html, cadastro.jsp, institucional.php, etc.;
Ex.: song.mp3, imagem.jpg, animacao.swf, tec.;
Documentos:
Ex.: livro.pdf, planilha_gastos.xls, notas.doc, etc;
Saídas de programas;
Qualquer objeto disponível na Internet;
Uniform Resource Identifier
Estrutura de um URI:
Estruturada em 3 partes:
1ª parte: Descreve o protocolo de acesso de recurso;
2ª parte: Identifica a máquina hospedeira;
Ex.: http://www.thyagomaia.com/notas.pdf;
Ex.: https://www.banco.com/acessar_conta.jsp;
Ex.: http://www.thyagomaia.com/notas.pdf;
Ex.: https://www.banco.com/acessar_conta.jsp;
3ª parte: Indica o recurso a ser acessado;
Ex.: http://www.thyagomaia.com/notas.pdf;
Ex.: https://www.banco.com/acessar_conta.jsp;
Uniform Resource Identifier
Classificação das URIs:
Localizador (URL);
Nome (URN);
Uniform Resource Locator
URL
Localizador Uniforme de Recursos;
Identifica o endereço de um determinado recurso;
Estrutura:
Ex.:
protocolo://maquina/caminho/recurso
http://www.sportrecife.com.br/titulos/brasileiro87.
pdf
Identificador utilizado no curso;
Protocolos
Convenção ou padrão que controla e possibilita
uma conexão, comunicação ou transferência de
dados entre dois sistemas operacionais;
Exemplos de protocolos de comunicação em
rede:
HTTP (Hypertext Transfer Protocol);
FTP (File Transfer Protocol);
POP3 (Post Office Protocol);
Hypertext Transfer Protocol
O protocolo HTTP
Protocolo de comunicação;
Conjunto de padrões e regras que definem e
disciplinam determinadas trocas de informação;
Protocolo mais comum para transferência de dados
na Internet;
Hypertext Transfer Protocol
REQUISIÇÃO
RESPOSTA
Exercícios
Considere as seguintes afirmações:
I – Endereços de sites na Web são classificados como URIs
II – HTTP é um protocolo utilizado para a comunicação entre
servidores
III – Clientes são softwares usado na comunicação e transmissão de
dados com servidores;
Estão corretos:
a) I, II e III
b) I
c) I e III
d) II
e) III
Introdução ao HTML
HTML:
Hypertext Markup Language, ou Linguagem de
marcação de hipertexto;
Trata-se de uma linguagem para formatação de texto
(e não uma linguagem de programação!);
Comandos representados por TAGs:
Palavra-chave ou termo associado a uma informação;
Ex.: Imagem, artigo, vídeo, parágrafo, formatação;
Descreve e permite a classificação da informação;
Introdução ao HTML
HTML:
Ainda Sobre tags em HTML:
Uma tag HTML é formatada da seguinte maneira:
< + palavra-chave + > para iniciar o conteúdo da tag;
<\ + palavra-chave + > para finalizar o conteúdo da tag;
Introdução ao HTML
Corpo de uma página HTML:
<html>
<head></head>
<body>
</body>
</html>
Introdução ao HTML
Exemplo: Uma página com título no navegador,
título na página e conteúdo em negrito:
<html>
<head><title>Exemplo 1</title></head>
<body>
<h1>O primeiro exemplo do curso</h1>
<b>Texto em negrito</b>
</body>
</html>
Introdução ao HTML
A página deverá ser salva com as extensões
.html ou .htm;
Recomenda-se que o nome do arquivo HTML
não tenha caracteres especiais (ç,&,%),
caracteres acentuados ou espaços;
HTML não é case sensitive.
Exercícios
Considere a codificação
HTML abaixo:
<html>
<title>Site
exemplo</title>
<body>
Texto do site
</body>
</html>
O que há de errado?
a) O texto do site não está delimitado
por tags
b) As tags <title></title> devem ser
utilizadas dentro do corpo do site
(<body></body>)
c) As tags <title></title> devem ser
utilizadas dentro do cabeçalho do site
(<head></head>)
d) Todas as alternativas estão corretas
e) Todas as alternativas estão erradas
Extensible Markup Language
Linguagem de marcação para necessidades especiais;
Permite organizar e definir um conjunto de dados;
Criado para estruturar, armazenar e transportar
informação;
Similar ao HTML, pois:
Trata-se de uma linguagem de marcação;
Utiliza tags para identificação de dados;
Diferenças em relação ao HTML:
HTML apresenta dados;
XML transporta e armazena dados;
Extensible Markup Language
Exemplo:
<?xml version="1.0" encoding="ISO-8859-1"?>
<agenda>
<nome>Thyago Maia</nome>
<telefone>99999999</telefone>
<endereco>Rua tal, nº 145</endereco>
</agenda>
Exercício
Em relação ao XML, marque a alternativa
errada:
a) XML é uma linguagem de marcação
b) XML possui tags pré-definidas
c) Podemos formatar conteúdo através de XML
d) Não podemos estruturar dados via XML
e) Não há alternativas erradas
Arquiteturas de sistemas Web
Sistemas são compostos por três distintas
funcionalidades ou componentes funcionais:
A apresentação;
A lógica da aplicação;
O gerenciamento de dados;
A arquitetura de sistema determina se esses
componentes estarão em um único sistema
(camada) ou distribuídos em diversas camadas;
Arquitetura de duas camada
Também conhecida como arquitetura cliente-servidor;
Resolve o problema de custos de processamento da
arquitetura de uma camada;
Baseada na divisão de trabalho (componentes);
Tipos de divisão
Thin Client: Cliente implementa apenas a interface gráfica;
Servidor implementa a lógica e gerenciamento de dados;
Thick Client: Cliente implementa a interface gráfica e a lógica
de negócio; Servidor implementa o gerenciamento de dados;
Arquitetura de três camadas
Cada uma das camadas resolve e cuida de problemas
específicos;
Cada uma das camadas envolve um componente e sua
separação é facilmente identificável;
Camadas existentes:
Camada de apresentação: Cuida da interface do usuário;
Camada lógica: Ponte entre apresentação e dados;
Camada de gerenciamento de dados: representado por um
ou mais SGBDs;
Exercício
Em relação a arquiteturas de sistemas web, não
podemos afirmar que:
a) São úteis para resolver a sobrecarga de processamento
b) Banco de dados é um item pertencente a camada lógica na
arquitetura de três camadas
c) HTML é processada na camada de apresentação
d) Um programa cliente está situado na camada de apresentação
e) A arquitetura cliente-servidor também é conhecida como
arquitetura de duas camadas
JavaScript
Linguagem de script utilizada na camada de
apresentação;
Aplicações em JavaScript rodam NO
CLIENTE;
Utilizada para:
Comunicação com servidores;
Validar formulários;
Adicionar funcionalidades;
Entre outros...
JavaScript
JavaScript está usualmente embarcada em
páginas HTML;
Qualquer pessoa pode utilizar JavaScript. Não
há necessidade de se adquirir qualquer licença;
Lembre-se: JavaScript e Java não são a mesma
coisa!
JavaScript é Case Sensitive;
JavaScript
A tag HTML <script> é usada para inserir
código JavaScript em uma página HTML;
Exemplo:
<html>
<body>
<script type=“text/javascript”>
document.write(Date());
</script>
</body>
</html>
Stylesheets
Tem a função de separar a formatação da página de seu
conteúdo;
Facilita a adaptação da apresentação da página à
aplicações e clientes diferentes;
Principais vantagens:
Adaptação para o formato em diferentes displays;
Padronização da apresentação gráfica de uma apresentação;
Por exemplo, no caso de uma mudança de fonte
em várias páginas HTML, alteraríamos apenas o
documento de estilo;
Cascating Style Sheets (CSS)
Linguagem que define como os documentos
HTML serão exibidos;
Vários documentos HTML podem acessar um
único arquivo CSS (folha de estilo), facilitando a
padronização de aplicações;
Graças ao CSS, deixamos de utilizar atributos de
formatação em tags HTML, e passamos a
trabalha com formatação em um arquivo CSS;
Cascating Style Sheets (CSS)
Exemplo:
Seletor CSS que formata cor e alinhamento de fonte
em parágrafos HTML (<p>);
p
{
color: red;
text-align: center;
}
Exercício
Qual a vantagem de se utilizar CSS em uma ou
várias páginas HTML?
a) Podemos estruturar conteúdo, para que fique mais fácil utilizálo
b) Podemos classificar conteúdo, para que fique mais fácil
identificá-lo
c) Podemos separar o conteúdo (descrito em HTML) de sua
formatação
d) Podemos transportar informações rapidamente
e) Podemos definir conteúdo e formatação em um único arquivo
Download
