Percurso Criação de

Sites
Luis Frias • 06.10.2020
 UFCD 9949
Construção de páginas web

UFCD 0154
Unidades Estilos em CSS (Cascading Style Sheets)

Modulares UFCD 9982

Programação de scripts

UFCD 0153
Finalização de um sítio para Internet
Objetivos - UFCD 9949
● Reconhecer o conceito de HyperText Markup Language/Linguagem de
Marcação de Hipertexto (HTML) na família de linguagens de descrição de
documentos.
● Distinguir entre a estrutura, conteúdos e estilos de uma página.
● Utilizar a HTML na construção de páginas para a web.
● Aplicar estilos a páginas web, usando a linguagem Cascading Style Sheets /
Folha de Estilos em Cascata (CSS) tendo em vista diferentes dispositivos.
● Publicar e gerir um sítio na Internet
Conteúdos - UFCD 9949
● Descrição de documentos
○ HyperText Markup Language/Linguagem de Marcação de Hipertexto – HTML
○ Extensible Markup Language/Linguagem Extensível de Marcação Genérica – XML
○ Outras especificações
● Construção base de páginas web
○ Estrutura de páginas web e organização de materiais
○ Etiquetas comuns, semântica, atributos e valores
○ Eventos e scripts aplicados a páginas web
○ Folhas de estilos - Cascading Style Sheets / Folha de Estilos em Cascata (CSS)
○ Seletores, propriedades e valores
○ Modelo de caixa
● Princípios e regras de webdesign
○ Ferramentas de produtividade e recursos na Net
○ Publicação de sítios e gestão de conteúdos
Objetivos - UFCD 0154
● Construir estilos em CSS (Cascading Style Sheets).
Conteúdos - UFCD 0154
● Ferramentas, Valor e limites do CSS
● Definição de estilos, Aplicação de estilos a etiquetas, Aplicação de estilos por
identificação, Aplicação de estilos por classes, Aplicação a um conteúdo ou bloco de
informação
● Medidas em CSS, Cores em CSS, Estilos de fundos, Estilos de cor
● Borders, Margens
● Estilos para tipos de letras (tipo, tamanho, estilo …), Estilos para paragrafos e
transformação de texto, Estilos especiais para Internet Explorer
● Cores de barras, filtros …
● Estilos especiais para Netscape/Mozilla
● Posicionamento, Introdução, Definição de capas, Propriedades de estilo de uma capa
● Tipos de posicionamento
● Localização de posição
● Visibilidade
Objetivos - UFCD 9982
● Caracterizar a linguagem de scripting.
● Caracterizar o modelo de objetos de documento.
● Integrar scripts em páginas web.
● Criar e personalizar páginas dinâmicas usando scripting.
Conteúdos - UFCD 9982
● Elementos básicos de uma linguagem de scripting - Norma ECMAScript
● Tipos de dados, estruturas de controlo e funções
● Modelo de objetos
● Eventos
● Cookies
● Programação de aplicações-cliente
● Controlo de funcionalidades em páginas web
● Animações
● Formulários
● Estilos
● Média
● Acessibilidade
● Jogos
● Segurança
Objetivos - UFCD 0153
● Finalizar um sítio para a Internet usando comandos.
Conteúdos - UFCD 0153
● Alteração de comandos criados automaticamente pelos editores de html
● Comandos para Head
● Comandos para Body
● Comandos para Text
● Comandos para links
● Comandos para imagens
● Comandos para tabelas
● Comandos para frames
● Criação de browsers safe pages
● Upload do sítio
Internet
1969 é a data de criação.

Inicialmente chamava-se ARPANET e interligava

laboratórios de pesquisa.

Rede preparada para continuar a funcionar mesmo

que ocorresse um bombardeamento num dos
pontos.

ARPANET - 1972
Internet
Sistema global de redes de computadores
interligadas que utilizam um conjunto próprio de
protocolos.

É uma rede constituída por outras redes.

Uma rede de computadores é basicamente um

conjunto de equipamentos ligados entre si que
permitem armazenar e partilhar informação.
Internet
O conjunto de protocolos TCP/IP são o pilar das
comunicações na Internet.

Este conjunto de protocolos foi desenvolvido de

forma a permitir a partilha de recursos entre os
vários equipamentos de uma rede.
Internet
TCP/IP

O TCP/IP é um protocolo estruturado por

camadas, estando a camada TCP (Transmission
Control Protocol) acima da camada IP (Internet
Protocol).

O TCP/IP usa o modelo cliente/servidor, onde uma

aplicação cliente pede um serviço a uma aplicação
servidor.
Internet
TCP (Transmission Control Protocol)

Gere o envio das mensagens ou ficheiros para um

destino específico, necessitando muitas vezes de
dividir os mesmos em pacotes.
Internet
Internet Protocol (endereço IP)

Tem a responsabilidade de fazer chegar o pacote

ao endereço IP de destino.

O pacote e o endereço de destino é entregue pela

camada TCP.
Internet
Internet Protocol (endereço IP)

Atualmente estamos a assistir à transição do IPv4

para o IPv6

Exemplo IPv4: 192.168.30.1

O mesmo em IPv6: 0:0:0:0:0:0:192.168.30.1

Internet
Protocolos de camada de aplicação

● DNS
● DHCP
● SMTP
● POP
● IMAP
● FTP
● HTTP
● WHOIS, Telnet, IRC, Gopher, ...
E-mail (electronic mail)

➔ SMTP (Simple Mail Transfer Protocol)

Permite a troca de correio entre 2 computadores sendo
responsável pelo envio das mensagens.

➔ POP3 (Post Office Protocol version 3)

Permite recuperar as mensagens que chegaram ao
ponto de destino.
E-mail - Exemplos

➔ Offline
Mozilla Thunderbird, Microsoft Outlook, Mailbird

➔ Online
Google Gmail, Hotmail, Hey, Mail.com
DNS (Domain Name System)
O Sistema de Nomes de Domínio é um sistema hierárquico e
distribuído de gestão de nomes para qualquer máquina
conectada à Internet ou a uma rede privada.

➔ Entidade Responsável Internacional

ICANN (https://www.icann.org/)

➔ Entidade Responsável Nacional

DNS.pt
DNS (Domain Name System)

➔ Registrars Internacionais
Dynadot, GoDaddy, NameSilo, Register.com,
NameCheap, ...

➔ Registrars Nacionais
Amen, WebHS, PTServidor, PTISP, Dominios.pt, ...
Nome de Domínio
Nome de domínio é um nome que serve para localizar e
identificar conjuntos de computadores na internet.

➔ Exemplo 1
google.com

➔ Exemplo 2
youtube.com

➔ Exemplo 3
sapo.pt
Subdomínio
Subdomínio são as ramificações do domínio principal, algo
muito utilizado em grandes sites.

➔ Exemplo 1
mail.google.com

➔ Exemplo 2
24.sapo.pt
Verificação de Domínios

➔ DNS Checker
https://dnschecker.org/

➔ Whatsmydns
https://www.whatsmydns.net/
WHOIS (Who Is)
Permite obter informações sobre a configuração de DNS e os
dados de contato do detentor de um domínio.

➔ Exemplo 1
https://www.whois.net/

➔ Exemplo 2
https://whois.domaintools.com/
ping e traceroute
Ambos utilizam o protocolo de comunicação ICMP.

➔ ping
Permite testar a conectividade entre equipamentos.

➔ traceroute
Ferramenta de diagnóstico que permite testar o
caminho realizado por um pacote de informação.
Hypertext Transfer Protocol
Protocolo de Transferência de Hipertexto é um protocolo de
comunicação cliente-servidor que permite o envio de
informação como documentos.

➔ HTTP
Hypertext Transfer Protocol

➔ HTTPS
Hypertext Transfer Protocol Secure
Hypertext Transfer Protocol

➔ Browser (navegador) - Exemplos

Microsoft Edge, Mozilla Firefox, Opera, Google Chrome,
...
URL
O Uniform Resource Locator (localizador uniforme de
recursos), é um protocolo de comunicação que permite o
envio de informação como documentos.

➔ HTTP
Hypertext Transfer Protocol

➔ HTTPS
Hypertext Transfer Protocol Secure
URL (Exemplos)

➔ Exemplo 1
https://www.google.com

➔ Exemplo 2
https://www.youtube.com

➔ Exemplo 3
https://www.publico.pt
Sites (sítio)
Um site é constituído por um conjunto de ficheiros
(documentos hipertexto, imagens, vídeos, ...).

O site está acessível 24 horas por dia e os ficheiros que

permitem construir o mesmo ficam armazenados num
servidor.

Um servidor é um computador que fornece serviços a outros

computadores.
Servidores
Um servidor é um computador que fornece serviços a outros
computadores.

Um servidor normalmente disponibiliza um servidor web (para

alojar sites), um servidor de correio (email) e um servidor de
FTP entre outros.

Este tipo de serviço utiliza normalmente o nome de

Alojamento de Sites.
Servidores
Sites (tipo de ficheiros)

➔ Documentos
.pdf, .html, .php, .js, .css, ...

➔ Imagem
.png, .jpg, .gif, ...

➔ Vídeo
.mp4, .avi, .mov, ...
Sites (tipo de sites)
➔ Simples
Desenvolvidos de raiz mas que não necessitam de
utilizar tecnologias disponíveis no servidor.

➔ Mais complexos
Sites que necessitam de utilizar bases de dados e
outras linguagens do lado do servidor para criar algo
mais avançado em termos de gestão de conteúdos e
serviços.

◆ O desenvolvimento deste tipo de sites pode ser

de raiz ou recorrendo a soluções gratuitas ou
pagas existentes no mercado.
Front Office / Back Office

➔ Front Office
Tudo o que o visitante pode ver.

➔ Back Office
Tudo o que o visitante não pode ver. Software
de suporte ao site presente no servidor.
Content Management
System (CMS) - Exemplos
➔ Prestashop

➔ Magento

➔ WordPress

➔ Drupal

➔ Django

➔ Joomla!

➔ ClassicPress
Profissões
➔ Front-End Development
HTML, CSS, JavaScript, jQuery, Bootstrap, Angular.js,

➔ Back-End Web Developer

Angular, Symfony, Ruby on Rails, Zend, Laravel, PHP,
SQL, Python, Go, Java, jQuery, ASP.net, ColdFusion, Perl,
Vue, React, LESS, SASS, Bootstrap, Node.js

➔ Full-Stack Web Developer

Tudo ...