DECA, CTC: P3 e P4

Jorge Braz

Nuno Simaria

DECA, CTC: P3 e P4

Internet, como funciona?

· Como é a “nuvem”?

· Servidores identificados por um endereço, ou IP,único - 81.92.123.53

· Servidores “especiais” que associam alguns IPs a domínios - www.ua.pt,

campus.ua.sapo.pt

· Acedemos a toda a informação através de clientes - navegadores,

clientes FTP, dropbox, UDP para jogos, e muitos outros…

DECA, CTC: P3 e P4

O que é o HTTP?

· Hypertext Transfer Protocol

· Protocolo muito simples para transmissão de ficheiros numa rede… -

GET, POST, …

· O browser ou navegador, é um cliente de HTTP. - Chrome, IE, Firefox,

Safari, Opera, …

· Um browser interpreta HTML (linguagem de formatação) e uma

variedade de outros tipos de ficheiro - jpg, gif, swf, css, mp3, java

DECA, CTC: P3 e P4

Anatomia de uma página

· HTML - Abrir http://campus.ua.sapo.pt

· Imagens, sons e vídeos.

· Folha de estilo: CSS

· Linguagem de script: normalmente, e quase exclusivamente,

JavaScript

· Outros recursos - Filmes de flash (youtube, jogos), outras páginas web

(widgets), …

DECA, CTC: P3 e P4

HTML

· Hypertext Markup Language

· Não é mais do que um ficheiro de texto, cujo conteúdo está estructurado

de uma forma específica (e que definem o DOM).

· Organização em forma de árvore de etiquetas que se definem da

seguinte forma:<etiqueta id=“etiquetaespectacular”>

<subetiqueta nome=“eu sou uma subetiqueta” />

<outra class=“muitaclasse” >conteúdo de outra

subetiqueta</outra>

</etiqueta>

DECA, CTC: P3 e P4

CSS

· Cascading Style Sheets

· Servem para associarmos informação acerca do estilo visual do HTML

· O porquê do Cascading

· É também (normalmente) um ficheiro de texto, mas com uma sintaxe

diferente:

etiqueta {font-weight: bold;}

#etiquetaespectacular {background: #000000; color:

#00ff00;}

.muitaclasse {font-family: Courier New}

DECA, CTC: P3 e P4

JS

· JavaScript

· Serve para ampliar o comportamento por defeito do HTML

· Validação de formulários, manipulação do DOM, e muito mais…

· É também (normalmente) um ficheiro de texto, mas com uma sintaxe

diferente:

var elemento = document.getElementById

(“etiquetaespectacular”);

elemento.innerHTML = “Eu sou mesmo fixe”;