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

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

Exemplos de endereos BBS

modem modem

BBS Sysop

Sua mquina

011 212-3860

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

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

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

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://line-mode.cern.ch/www/hypertext/WWW/TheProject.html

World Wide Web

Primeiro Site disponvel no CERN http://info.cern.ch/hypertext/WWW/TheProject.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/commons/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:

Conexo Internet

Cliente Servidor Web URL

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

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

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

Desenvolvendo para o ambiente Cliente/Servidor

O que preciso saber? Cliente Servidor

HTML/CSS JavaScript XML JSON ...

Banco de Dados Linguagens como JSP, PHP etc

As demais disciplinas do curso iro abordar

esse modelo.

Disciplina: Aplicaes para Internet

Programao Web

O que HTML?

Hypertext Markup Language ou Linguagem de Marcao de Hipertexto

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).

Tim Bernes-Lee

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

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

JS

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:

Ttulo do documento Todo o contedo da pgina vai aqui dentro dessas tags. 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.

Aplicaes para InternetIncio da HistriaBBSAgora sim, InternetInternetConexes da InternetConexes da InternetMapa da Internet (sites)Ranking de sites (global)Servidores DNS (root)Infraestrutura da InternetWorld Wide WebWorld Wide WebWorld Wide WebNavegadores (browsers)Links sobre a parte histricaAntes de iniciar...Ambiente Cliente/ServidorURLDesenvolvendo para o ambiente Cliente/ServidorO que HTML?Breve histrico da HTMLW3C e WHATWGLinguagensUm pequeno exemplo (site)Um pequeno exemplo (game)Um pequeno exemplo (sistema web)Um pequeno exemplo (aplicao mobile baseada em tecnologias web)Qual verso estaremos estudando?HTML5 est completo?HTML, alguns detalhesMotores de renderizaoVamos iniciar...