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