Este documento apresenta um plano de ação para um workshop sobre conceitos básicos da Internet. O workshop irá explicar a arquitetura cliente-servidor da Internet, protocolos como HTTP e HTML, e como criar um website estático. O plano inclui demonstrações práticas de criação de páginas web e discussões sobre segurança e autenticação na Internet.

1. “The World of the Internet”, make it
simple, please!
By Jorge Silva

2. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

3. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Objetivos
Apreender os conceitos base da Internet, estrutura
e protocolos utilizados;
Adquirir conhecimento sobre a estrutura de páginas
HTML;
Entender os processos de registo e login;
Conhecer alguns conceitos de segurança, como
servidores seguros e o porquê de palavras-chave
fortes;

4. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Estratégia
Apresentar os conceitos chave de forma simplificada
e descomplexada através da criação de um website
estático e utilizando uma ferramenta de texto
(notepad/notepad++).

5. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Plano de ação
15 m - Introdução e expectativas;
15 m - Estrutura da Internet - Arquitetura cliente e
servidor;
15 m - WWW vs Internet;
30 m - Protocolos e linguagens na web (HTTP, FTP,
HTML);
1h - Demonstração, criação e colocação online de um
website estático desenvolvido pelos vários grupos no
workshop;
15 m - “Servidores seguros” e SSL;
15 m - Processo de registo, login e palavras-chave
fortes;
15 m - Q&A
Planning is Guessing!

6. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Axiomas
3h passam a correr!
Informática = Murphy’s law?
Emergent Learning

7. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

8. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
WWW (“mesh”)
"Information Management: A Proposal" - CERN
‘89

9. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
WWW(“mesh”)

10. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Internet: Arquitetura Cliente/Servidor
Software
?
<Left Blank to explain during class >

11. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
HTTP (Protocolo) /HTML (Linguagem)
<Left Blank to explain during class >

12. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

13. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
HTTP (Protocolo) /HTML (Linguagem)
Esquema & F12

14. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
HTML: A linguagem da web
(estrutura de documentos .html e Tags)
html
head body
p ul
li li
Um Dois
O meu a
website
title
O Titulo
<open>conteúdo<close>

15. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
A minha primeira página web!

16. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Coffee break!

17. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

18. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Desafio – O Nosso Website!
http://www.w3schools.com/tags/
1.Criar a proposta de página
2.Validar com o Formador
3.Criar um directório no ambiente de trabalho:
equipaX
4.Abrir notepad++
5.Criar um documento: equipaX.html
6.Estruturar o documento (Tags HTML)
7.Ver no browser

19. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Online: Alojamento/Domínios
(Exemplo
s)

20. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

21. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Login/Register (1/2)

22. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Login/Register (2/2)

23. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
What’s wrong with my pa$$w0rd? (1)

24. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
What’s wrong with my pa$$w0rd? (2)
Os sites dão pistas!?
Nome de utilizador:
Telefone (eg. Facebook)
Email (primeiro.ultimo@empresa.pt)
NIF (finanças)
Mensagens de validação;

25. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
What’s wrong with my pa$$w0rd? (3)
Força bruta /Ataque dicionário:
Repetição de palavras: eg. “jorgejorge”;
Username = password;
Exemplos típicos:
111111, Benfica, 123456, password, querty,
nome123, nome dos
filhos/cônjuge/namorado + ano nascimento;
Curioso!
40% das pessoas introduzem um “!” quando
se pede para introduzir um símbolo especial;

26. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
What’s wrong with my pa$$w0rd? (4)

27. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

28. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Servidores “Seguros”/Protocolo SSL (1/2)
HeartBleed = “When it is
exploited it leads to the
leak of memory contents
from the server to the
client and from the client
to the server.”
Truques ;)
http://heartbleed.com/

29. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

30. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Resources – find out more!
Tools
Notepad++, Komodo Edit, Aptana, Eclipse, Netbeans,
Visual Studio Express, ...
Sites
http://www.w3schools.com
25 years of WWW
http://www.webat25.org/
Internet!

31. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Retrospectiva - “Serious Game” (1/2)

32. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA
Retrospectiva - “Serious Game” (2/2)

33. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA

34. Nome da Formação | Nome do
Formador
Internet - make it Simple please! by @JMTSILVA