Tecnologia Web. Organização da Aula –Revisão dos fundamentos sobre a Internet e a Web –Revisão e conceitos-chave da linguagem HTML –Linguagens de marcas:

Apresentação em tema: "Tecnologia Web. Organização da Aula –Revisão dos fundamentos sobre a Internet e a Web –Revisão e conceitos-chave da linguagem HTML –Linguagens de marcas:"— Transcrição da apresentação:

1 Tecnologia Web

2 Organização da Aula –Revisão dos fundamentos sobre a Internet e a Web –Revisão e conceitos-chave da linguagem HTML –Linguagens de marcas: Problemas, Teorias, Sonhos... –Introdução à filosofia de XML

3 Alguns conceitos fundamentais sobre a Internet e a Web

4 Noção de Protocolo

5 A comunicação na prática

6 O navegador determina a URL desejada O navegador pergunta ao DNS o endereço IP da www.w3.org DNS responde 18.23.0.23 O navegador efetua uma conexão TCP na porta 80 da máquina 18.23.0.23 Envia o comando GET /hypertext/www/Project.htm O servidor www.w3.org envia Project.htm A conexão TCP é desfeita O navegador mostra o texto Project.htm O navegador carrega e mostra as imagens em Project.htm Cliente / Servidor em HTTP

7 Protocolos da Internet

8 Conexões Físicas à Internet Vários meios podem conectar computadores à Internet –Redes locais (ethernet, token ring, etc); –Linhas de telefone (PPP, Slip); –Fibra ótica; Canais de satélite; Ondas de rádio Protocolo de base TCP / IP

9 Organização Organização de uma rede de redes –baseada em DOMÍNIOS define a localização de uma rede na Internet eci.ufmg.br ibm.com … –dividem a rede mundial em áreas geográficas países: br, fr, de, ca, us, it … –e as subdividem por áreas de atuação com (comercial), edu (educacional), mil (militar)... –depois por instituições microsoft.com.br ufmg.br (???)

10 ...e ainda por computador na rede –cuba.eci.ufmg.br Cada instituição possui os usuários da rede –cada usuário possui seu endereço próprio usuário@domínio –bax@eb.ufmg.br URL (Uniform Resource Locator) –endereço único de um recurso (pagina, imagem,...) –formado de 3 partes: “protocolo://servidor/recurso” Organização (Cont)

11 Endereço do computador Todo computador conectado na Internet tem um número chamado IP –32 bits ou 4 bytes 150.164.98.214 = cuba.eci.ufmg.br InterNIC (Network Information Center), órgão que centraliza a alocação de números mantém uma BD com nomes, endereços … dos contatos para os vários domínios (comando whois)

12 Mapeando nomes -> números Nomes para os humanos ufmg.br Números para os softwares 150.164.98.214 O DNS - “Domain Name System” –faz a conversão domínio -> número IP Proxy servers ou Proxies –mantém todas as páginas que passam por ele –configura-se no navegador

13 Serviços de Informação na Internet Modelo Cliente/Servidor –Servidor: programa que executa o serviço –Cliente: programa que solicita o serviço Primeira geração: e-mail, FTP, telnet, finger Segunda geração: archie, netfind, whois, gopher, news, listservers Terceira geração: WWW

14 O Protocolo HTTP HyperText Transfer Protocol Interação Cliente/Servidor em ASCii –o cliente pode ser um humano: telnet www.w3.org 80 GET /hypertext/WWW/TheProject.html uma linha em branco indica o fim do pedido

15 Três ondas de evolução Internet de domínio público Intranets –gerência mais eficiente das organizações “por trás de um firewall”. 2/3 das 500 maiores corporações (Fortune) já estabeleceram suas Intranets usadas p/ gerenciar tarefas, informações e trabalho em grupo Lotus Notes (Domino), BackOffice, Oracle Extranets –ponte entre a Internet pública e a privada –fornecedores, distribuidores, clientes e outros parceiros que estão fora dos muros da empresa mas são cruciais para o sucesso dos negócios, compartilhando objetivos comuns

16 Intranets Utilização dos serviços Internet dentro das organizações Decréscimo do custo –acesso baseado em servidor distribuição e configuração de diferentes softs atualização imediata de novas funcionalidades –imagine uma empresa com milhares de desktops distribuídos em centenas de locais remotos –independência de plataforma –não há necessidade de versões diferentes de cada soft –pequenas larguras de banda (grosso proc. no servidor) volta aos mainframes ??? ;-) não exatamente!!!

17 Extranets = Empresas em Rede Melhora muito as relações com clientes. Produtos e serviços no mercado com mais rapidez.

18 Quem “manda” na Internet Totalmente livre quanto à informação Quanto à organização e expansão, existem alguns coordenadores –Brasil: Comité Gestor ( normativo ) RNP ( executivo ) –Mundo: Inter. Society (ISOC), em 1992, Virginia www.isoc.org Inter. Architecture Board / Advertising Bureau (IAB) Inter. Engineering Task Force (IETF) evol do TCP/IP Inter. Research Task Force (IRTF) Inter. Network Information Center (InterNIC)

19 Revisão  O Projeto WWW (CERN em 1992/93)  Implementar documentos em hipertexto através de uma linguagem simples  Objetivo: criar plataforma para a troca de documentos, com interface padrão  Protocolo para transferência de hipertextos é denominado http  Linguagem para a descrição de hipertextos é denominada html

20 Revisão e conceitos chave da linguagem HTML

21 Linguagem HTML Hypertext Markup Language Arquivos ASCII ( cada arquivo = 1 página no browser ) não sensível à caixa dos caracteres Elemento básico: TAG texto Teste Meu primeiro documento Só define a estrutura do documento Não diz nada quanto a sua aparência

22 até cores branco#FFFFFF Padrão RGB (0-255) vermelho#FF0000 <body bgcolor=#rrggbb text=#rrggbb link=#rrggbb alink=#rrggbb vlink=#rrggbb

23 listas links texto/imagem texto em doc.htm imagens

24 tabelas col1 col2 cel1.1 cel1.2 formulários –página que solicita os dados –programa que processa os dados entrados quadro de texto; linha de texto; password; checkbox; radio button; lista de seleção; envia; limpa.

25 … envia dados para url após submissão dos dados outro padrão

26 CGI - Common Gateway Interface Armazenados no diretório Cgi-Bin Métodos de envio: GET ou POST –GET (“var=valor” adicionados à URL) http://.../programa?cliente=João+Silva?endereco=Rua+Macau…” –POST (“var=valor” no corpo da mensagem) “cliente=João+Silva&endereco=Rua+Macau…” –envio de dados + atribuição de um conjunto padrão de variáveis ex: CONTENT_LENGTH (tamanho do string de dados)

27 XML: Problemas, Teorias, Sonhos 1- Alguns problemas de tratamento da informação 2- Teoria do “Markup” o que vem mudando… 3- Rápida introdução a XML 4- Sonhos utópicos !? 5- Como chegar lá dá-lhe padrões …

28 Alguns problemas no trato da informação Problemas de desempenho (Performance) Problemas de intercâmbio (Interchange) Problemas de recuperação (Retrieval) Problemas de “abertura, uso de padrões abertos” (Openness) Problema: desempenho Servidores fazem todo o trabalho, clientes apresentam (rendering) HTML Interação com usuários requer “viagem de ida e volta na rede”... seria bom ter mais processamento no lado do cliente!

29 Sistemas operacionais são heterogêneos Banco de dados são heterogêneos Aplicações são heterogêneas As línguas naturais são são heterogêneas... mas todos precisam conversar (comunicar) entre si! Problema: comunicação (Interchange)

30 Problema: recuperação (Retrieval) Todo o conhecimento humano está disponível...... se apenas pudessemos encontra-lo com facilidade. Antes da Web, usava-se metadados para a recuperar informação...... mas a Web não dispõe de nenhum. Então baseamo-nos em pesquisa em texto livre para tudo...... mas isso é lento, passível de erro, e anglocêntrico

31 Problema: uso de padrões abertos (Openness) Qtos de nós estaremos usando o mesmo processador de texto em 5 anos? Qtos de nós gerenciamos informações que ainda serão úteis em 5 anos? Lição: Conhecimento deve sobreviver à tecnologia

32 Sem “markup” THREEKINDSOFMARKUPPR ESENTATIONALMARKUPPR OCEDURALMARKUPDESCRI PTIVEMARKUP Procedimental (herança da editoração clássica) {\f1\fs48 Three Kinds of Markup\par }\pard \nowidctlpar \widctlpar\adjustright {\f1 \par {\pntext\pard\plain\f1 \fs28\cgrid \hich\af1\dbch\af0\loch\f1 1.\tab}}\pard \pnstart1\pnindent360\pnhang{\pntxta.}}\ls1\adjustright {\f1\fs28 Descriptive}{ \f1\fs28 \par }} Declarativo Three Kinds of Markup Presentational Markup Procedural Markup Descriptive Markup A teoria do “Markup” dois tipos de Markup: –Procedimental –Declarativo (descritivo) –Todo doc tem pelo menos 3 componetes: –Conteúdo/estrutura/estilo –Experiência mostrou: –O estilo deve ser marcado separadamente –Vide manutenção de grandes portais - CSS

33 Markup No passado (troff/TEX), markup procedimental era visível WP moderno, markup é procedimental e escondido WYSIWYG é uma mentira! Quem já editou arquivo com mais de 100 pgs sabe disso… Porquê marcação descritiva? Poder de reificação (transf. sequências de caractes em objetos e atributos) Servir a múltiplos usos (aumenta a reutilização e diminui a redundância) Pesquisa & recuperação mais eficiente Normalmente não-proprietário (padrões abertos internacionais)

34 História: a crise de HTML em 1996 e a origem de XML… Usuários avançados exigiam extensões: voz, e- commerce, ao mesmo tempo: surgiam dispositivos mais simples… celulares, palms… –HTML era tecnicamente e politicamente difícil de estender –O Navegador tinha que acompanhar a condecendência da linguagem com o usuário leigo >> programas cada vez maiores… HTML não é modular, fraca internacionalização (conjunto de caracteres) Solução do W3C >> XML (XHTML)

35 Isto não é XML intolerante com a sintaxe Suite in F This work of J.S. Bach is written to be played, not on the modern cello, but on the much softer-toned viola da gamba. An italian specimen of 1532:

36 XML bem formado (well-formed) Suite in F This work of J.S. Bach is written to be played, not on the modern cello, but on the much softer-toned viola da gamba. An italian specimen of 1532:

37 XML Válido <!DOCTYPE HTML [ ]> Suite in F This work of J.S. Bach is written to be played, not on the modern cello, but on the much softer-toned viola da gamba. An italian specimen of 1532:

38 XML válido, e mais conveniente Suite in F This work of J.S. Bach is written to be played, not on the modern cello, but on the much softer-toned viola da gamba. An italian specimen of 1532:

39 História de XML In 1986, ISO aprova padrão internacional markup descritivo, chamado SGML [ver apresentacao original sobre SGML encaixa aqui] In 1996, HTML em crise… O W3C lança a atividade "SGML on the Web" em Maio/1996 1996/11: primeira aparição pública 1997/03: Aceite pela Microsoft 1998/02: XML 1.0 completado

40 XML: objetivos oficiais de concepção Uso de XML na Internet deve ser trivial –Deve ser possível visualizar documentos tão fácil e rapidamente quanto em HTML XML deve suportar várias aplicações XML deve ser compatível com SGML Programas para processar documentos XML devem ser fáceis de implementar O número de recursos opcionais em XML deve ser mínimo, idealmente zero O projeto do padrão XML deve ser rápido O projeto de XML deve ser formal e conciso Documentos XML devem ser simples de criar Concisão na marcação não é importante

41 XML en passant meta-linguagem para markup descritivo: vc cria seus próprios tags Spec pequena: menos de 40 pgs Internacionalização embutida via Unicode error-handling embutida Otimizada para operar em redes Suporte dos maiores players Onde encontrar mais sobre XML: http://www.w3.org/xml http://www.xml.com http://www.sil.org/sgml/xml.html

42 Porquê navegadores são lentos hoje O futuro da Web O sonho do desempenho Para ter melhor desempenho, é preciso rodar mais código no navegador. Isso requer: –Rodar código: Java, JavaScript, ActiveX –Dados bons e limpos: XML –API boa e limpa: o “Document Object Model”

43 O sonho da RI Em bibliotecas usa-se metadados para gerenciar e recuperar infos em sistemas de gerenciamento de registros e documentos Deviamos usar metadados para gerenciar e recuperar infos na Internet Teremos diferentes vocabulários de metadados (ontologias) Model de dados flexivel + sintaxe baseada em XML = Resource Description Format (RDF) O sonho of Openness Conhecimento é caro Conhecimento mora na mente humana, e é cristalizado em documentos Deveríamos cuidar bem dos documentos Não devemos tranca-lo em formatos binários, proprietários, atrás de softwares de vida curta Com XML, podemos aumentar a proporção de conhecimentos disponíveis gratuitamente no mundo para o enriquecimento da vida

44 Como chegar lá… Padrões são pro-usuário, pro-cliente, mas não pro-vendedores de soluções Padrões protegem investimentos em conhecimento Padrões forçam os vendedores a competir no mesmo campo Padrões não facilitam a vida dos vendedores de soluções Padrões não vêm sem serem demandados