Aplicaes para Internet

Contedo:
Introduo
Histria da Internet
Infraestrutura da Internet
Arquitetura Cliente/Servidor
Evoluo da HTML
Tecnologias web (cliente)
Aplicaes possveis com HTML
Primeiro exemplo com HTML

Professores:
Alcides Teixeira
Ana Paula
Cristiane Camilo
Manuel Ledn
Pedro Cacique

Incio da Histria

Necessidade de comunicao entre pessoas e posteriormente entre mquinas

Antes da WEB atual, tnhamos os chamados Bulletin Board System (BBS)
Primeira ferramenta colaborativa disponvel
Habilitava a comunicao entre um ou mais PCs
Comunicao feita atravs de MoDem e linha telefnica
Basicamente servia para troca de mensagens entre usurios, porm foi
aperfeioada para troca de arquivos, frum, entre outros.
Um operador de sistema (SysOp) criava em sua mquina o BBS e
disponibilizava para a comunidade
Comunicao era estabelecida (geralmente) entre mquinas do mesmo
territrio (devido ao custo)
Primeira BBS foi criada em 1978 por Walt Christensen em Chicago (modem
de 110Bits/s).
Era uma interface de texto puro
Comeou a perder popularidade a partir de 1990 com a criao da World
Wide Web (WWW)

BBS

Exemplos de endereos BBS

Emulador para mostrar como seria o
Google na poca da BBS (1989)
http://www.masswerk.at/googleBBS/

Sysop
BBS
011 212-3860

Sua mquina

modem

modem
http://www.bbscorner.com/
http://bbsx.thebbs.org/aboutbbs.html

Agora sim, Internet

Podemos dizer que sua histria comea em 1969, quando foi criada a ARPANet
com a necessidade de comunicao entre centros de pesquisa e governo
(Departamento de Defesa) nos EUA.
Com sua expanso, foi necessrio estabelecer uma linguagem comum entre as
diferentes redes, surge ento o protocolo TCP/IP (1973) - Vint Cerf e Robert Kahn
Em 1983 inventado o DNS (Domain Name Server) - Paul Mockapetris
Em 1984 o TCP/IP vira o padro da Internet (CERN)
Em 1988 comeou um movimento para tornar a Internet comercial, ou seja, seria
possvel usar fora dos centros de pesquisa
Em 1989 foram criados os primeiros ISP (Internet Service Provider).
ISP so empresas que fornecem acesso a Internet. Para se conectar a um ISP
usamos a linha telefnica (dial-up) ou banda larga. comum tambm essas
empresas fornecerem servio de e-mail, hospedagem de sites, etc.
Em 1993 a Internet torna-se de uso comercial de fato.

Definio de Internet: rede mundial de computadores, onde redes de todo o

planeta so interligadas e permitem a troca de dados e mensagem atravs de um
protocolo comum.

Internet

1993

http://www.vox.com/a/internet-maps

Conexes da Internet

2015

http://www.submarinecablemap.com/

Conexes da Internet

http://global-internet-map-2012.telegeography.com/

Mapa da Internet (sites)

http://internet-map.net/

Ranking de sites (global)

Servidores DNS (root)

http://www.root-servers.org/

Infraestrutura da Internet

http://quartsoft.com/sites/default/files/internet-structure-explained-by-illustrator.jpg

World Wide Web

Algumas datas importantes:

1989 Incio do projeto World Wide Web no CERN (Europa), iniciado
pelo cientista Tim Berners-Lee.
1990 Primeiro site e servidor WEB (computador NeXT)
Tim Berners-Lee cria o primeiro navegador chamado WorldWideWeb
1991 Primeiro servidor fora da Europa (SLAC) Califrnia
1992 Primeiro navegador multiplataforma (modo linha de comando)
1993 - O NCSA da Universidade de Illinois lana seu navegador
Mosaic 1.0
Neste mesmo ano, o CERN coloca a WEB em domnio pblico
1994 Comea a popularizao da WEB
A base para a comunicao da WWW o protocolo HTTP (Hypertext
Transfer Protocol) ou Protocolo de Transferncia de Hipertexto

World Wide Web

NeXT
Primeiro Servidor

Primeiro Navegador
WorldWideWeb, s
rodava no NeXT

Simulador do Primeiro Navegador (line-mode)

multiplataforma
http://linemode.cern.ch/www/hypertext/WWW/TheProject.html

World Wide Web

Primeiro Site disponvel no CERN

http://info.cern.ch/hypertext/WWW/Th
eProject.html

Navegadores (browsers)
Ferramentas necessrias para acessar as pginas na WEB
Breve linha do tempo:

1991 - WorldWideWeb
1993 - Mosaic
1994 - Netscape
1995 - Internet Explorer
1996 - Opera
2002 - Mozilla Navigator
2003 - Safari
2004 - Mozilla Firefox
2008 - Google Chrome

http://upload.wikimedia.org/wikipedia/com
mons/7/74/Timeline_of_web_browsers.svg

Links sobre a parte histrica

Mais informaes:
http://www.history.com/topics/inventions/invention-of-the-internet
http://www.w3.org/2012/08/history-of-the-web/origins.htm#c1p1
http://home.web.cern.ch/topics/birth-web
http://www.pewinternet.org/2014/03/11/world-wide-web-timeline/
http://www.computerhistory.org/internet_history/
http://www.infoplease.com/ipa/A0193167.html
http://www.internethalloffame.org/internet-history/timeline
http://meyerweb.com/eric/browsers/timeline-structured.html

Antes de iniciar...
O que preciso saber para desenvolver aplicaes completas
para a WEB?
Entender o funcionamento bsico da execuo dessa aplicao
Conhecer as linguagens (HTML, CSS, JavaScript)
Conhecer alguns frameworks (jQuery, bootstrap etc)
Conhecer alguma linguagem que rode no servidor (PHP, JSP etc)
Saber trabalhar com banco de dados (MySQL, Oracle etc)

Ambiente Cliente/Servidor
Pensando nos elementos bsicos para fornecer
informao atravs da Web e seu funcionamento
bsico, temos:
URL
Servidor Web

Cliente
Conexo
Internet

HTML/CSS/JS

URL

a abreviao de Uniform Resource Locator, seria o endereo para um recurso da

Internet
composto por:
1. Identificador do Protocolo
2. Nome do recurso

Pode conter
1. Nome do host
2. Nome do arquivo
3. Porta do servio
4. Referncia

protocolo://domnio:porta/caminho/recurso?query_string#referncia

Exemplos:
ftp://www.cruzeirodosul.edu.br/aula.exe
http://www.cruzeirodosul.edu.br/index.html
https://www.cruzeirodosul.edu.br/pesquisa.jsp?q=java
http://www.cruzeirodosul.edu.br/index.html#introducao

Desenvolvendo para o ambiente Cliente/Servidor

O que preciso saber?
Cliente

HTML/CSS
JavaScript
XML
JSON
...
Disciplina:
Aplicaes para Internet
Programao Web

Servidor

Banco de Dados
Linguagens como JSP,
PHP etc

As demais disciplinas
do curso iro abordar
esse modelo.

O que HTML?

Hypertext Markup Language

ou
Linguagem de Marcao de Hipertexto
Tim Bernes-Lee

O HTML uma linguagem que se prope em distribuir informao globalmente e pode ser
entendido por diversos meios de acesso.

Desenvolvido originalmente por Tim Bernes-Lee (criador da World Wide Web)

Um documento HTML um documento texto que pode ser produzido utilizando qualquer
editor de texto. utilizado por praticamente todas as pginas WEB disponveis na Internet.

O contedo HTML de uma pgina processado por um Navegador (Internet Explorer,

Chrome etc.)

O HTML define um conjunto de elementos para a marcao de uma pgina Web:

cabealho, pargrafo, lista, tabelas, entre outros. Cada elemento possui sua funo
especfica e so comumente chamados de tag (marca ou marcadores).

Breve histrico da HTML

HTML 1 1991 (Tim Bernes-Lee)
1994 - Criao do W3C (World Wide Web Consortium) com o objetivo de
padronizar as tecnologias WEB
HTML 2 1995
HTML 3.2 jan/1997
HTML 4 dez/1997, tornou-se oficial em 1998
HTML 4.01 1999
XHTML 1.1 tornou-se um padro em 2000 junto com o HTML 4.01
HTML 5 inicio da especificao em 2008
Em 28/10/2014 a W3C lanou a recomendao do HTML 5 (padro)
http://www.w3.org/TR/2014/REC-html5-20141028/ ou
https://html.spec.whatwg.org/, porm ainda esto trabalhando em novas
funcionalidades
http://www.w3c.br/cursos/html5/conteudo/

W3C e WHATWG

W3C (http://www.w3.org/)
O World Wide Web Consortium a principal organizao de padronizao da
WWW. Tem como finalidade estabelecer padres no desenvolvimento e
interpretao das aplicaes WEB.

WHATWG (https://whatwg.org/)
O Web Hypertext Application Technology Working Group um grupo de pessoas
e empresas interessadas no desenvolvimento da HTML e APIs necessrias para
aplicaes Web. Foi fundado por representantes da Apple, Mozilla e Opera em
2004, depois de um workshop do W3C. Esse grupo foi criado pois essas
empresas estavam se preocupando com o rumo da W3C em direo ao XHTML
e a falta de interesse em aprimorar o HTML.

Dois grupos com ideias diferentes para o futuro das tecnologias bsicas da WEB
Em 2008, a W3C parou de trabalhar na especificao do XHTML 2 e comeou a
trabalhar no HTML5, tendo como base, a especificao da WHATWG (um tipo
de aliana entre os dois grupos).

Linguagens
HTML (Hypertext Markup Language)
CSS (Cascading Style Sheet)
JavaScript

JS
http://www.w3.org/html/logo/

Um pequeno exemplo (site)

Pgina WEB

Cdigo Fonte
O cdigo fonte pode ser
exibido clicando na pgina
com o boto direito e
escolhendo a opo de
Cdigo Fonte.

Um pequeno exemplo (game)

http://www.iretrogames.com/gc/

Jogo visualizado no Chrome

Cdigo fonte

Um pequeno exemplo (sistema web)

Sistema (ambiente)
Blackboard

Cdigo fonte

Um pequeno exemplo (aplicao mobile baseada

em tecnologias web)

Cdigo Fonte

Qual verso estaremos estudando?

Estaremos estudando a verso 5 do HTML

Devemos conhecer o HTML4.01 pois a

base do HTML5.

HTML5 est completo?

http://html5readiness.com/

HTML, alguns detalhes

Quando abrimos uma pgina HTML em um navegador, o navegador ir

interpretar as tags, ou seja, ir fazer uma anlise sinttica, definindo
como cada parte do texto ser apresentada.

Um problema comum no desenvolvimento de pginas HTML desde o

seu surgimento e de outras tecnologias como CSS, a compatibilidade
entre os navegadores, ou seja, uma pgina desenvolvida em HTML5
pode rodar somente no Chrome, por exemplo, ou aparecer de um jeito
no Internet Explorer e de outro no Firefox. Tambm temos que tomar
cuidado quando falamos em dispositivos ou sistemas diferentes, como
visualizar nossa pgina em um celular.

Motores de renderizao
o mecanismo utilizado pelos navegadores para processar
o cdigo das pginas web, os principais motores dos
principais navegadores so:
Webkit ( o mais compatvel com HTML 5) Safari, Chrome
Gecko Firefox
Trident Internet Explorer

Devemos sempre procurar deixar nossos cdigos

compatveis com esses motores para que possamos atingir
o maior nmero possvel de usurios.

Vamos iniciar...
A estrutura bsica de um documento HTML5 seria:
<!DOCTYPE html>
<html>
<head>
<title>Ttulo do documento</title>
</head>
<body>
Todo o contedo da pgina vai aqui dentro dessas tags.
</body>
</html>
Vamos inserir esse cdigo no Bloco de Notas e depois o
mesmo cdigo em outra ferramenta mais sofisticada para
iniciarmos nosso contato com a linguagem e a ferramenta.
Lembre de salvar seu arquivo com a extenso HTML e
posteriormente teste seu arquivo em algum navegador.