Tecnologias para Web Design

Transcrição

1 Tecnologias para Web Design Introdução Conceitos básicos World Wide Web (Web) Ampla rede mundial de recursos de informação e serviços Aplicação do modelo de hipertexto na Web Site Um conjunto de informações e serviços computacionais com um propósito específico, localiado em um ponto (site) específico da Página Uma unidade com informações num Web Site. Um Web Site é estruturado em páginas. Navegação Interação com as páginas de um hipertexto através dos elos, também conhecido como folhear (browsing), surfar,...! "

2 Visão geral da Web Usuário em casa Usuário em INTERNET Usuário em Site em Link Site em Sistema Web Sistema computacional implementado na plataforma Web. Conjunto de software e hardware necessários para o funcionamento de um Web Site Do ponto de vista do usuário é o Web Site. Usuário Browser Web

3 Modelos e tecnologias principais Arquitetura Cliente- Protocolo HTTP Linguagem HTML Endereçamento através da URI Usuário Browser (cliente) HTTP + URI HTML, GIF,... HTTP Documento (arquivos HTML) Aplicação (programa) Modelo Cliente- Solicita serviço Envia resultado Usuário Cliente Rede, * -.*/& 0 1! " " # $% & '()* & +*

4 O conceito de Modelo para estruturar documentos de maneira nãolinear usando os conceitos de nós, elos e âncoras. Nó Uma unidade de conteúdo do documento: uma página, um parágrafo, etc. Elo Ligação entre dois nós. Pode ser uni ou bidirecional. Âncora Ponto do documento onde inicia-se (âncora origem) ou termina (âncora destino) um elo. Exemplo de um hipertexto Neste documento você Neste documento você verá alguns verá alguns conceitos conceitos do do que que é é um um hipertexto hipertexto Mostraremos ainda Mostraremos ainda alguns alguns exemplos. exemplos. Caso queira ainda pode Caso queira ainda pode faer faer alguns alguns exercícios exercícios Conceitos básicos Conceitos básicos Âncora Âncora extremidades extremidades de de um elo um elo documento documento estruturado estruturado em em nós, elos nós, elos e e âncoras âncoras Elo Elo ligação ligação entre entre as as páginas páginas de de um um hipertexto hipertexto Nó parte de um hipertexto Nó parte de um hipertexto que que contém contém o o texto texto Página ver Página ver nó. nó. Exemplos Exemplos Os sistemas de ajuda Os sistemas de ajuda nas aplicações Win nas aplicações Win dows dows são são estruturados estruturados como s. como s. Exercício Exercício Índice Índice Exercício A Exercício A Exercício B Exercício B Exercício C Exercício C

5 Exemplo de um hipertexto Neste Neste documento documento você você verá verá alguns conceitos alguns conceitos do que é um hipertexto do que é um hipertexto Mostraremos ainda Mostraremos ainda alguns exemplos. alguns exemplos. Caso queira ainda pode Caso queira ainda pode faer alguns exercícios faer alguns exercícios Âncoras origem Âncoras destino Conceitos Conceitos básicos básicos Âncora Âncora extremidades extremidades de de um um elo elo documento documento estruturado estruturado em em nós, nós, elos elos e e âncoras âncoras Elo ligação entre as Elo ligação entre as páginas de um hipertexto páginas de um hipertexto Nó parte de um hipertexto Nó parte de um hipertexto que contém o texto que contém o texto Página Página ver ver nó. nó. Exemplos Exemplos Exercício Índice Exercício Índice Nós Os sistemas de ajuda Os sistemas de ajuda nas aplicações Win nas aplicações Win dows dows são são estruturados estruturados como como s. s. Elos Exercício Exercício A A Exercício Exercício B B Exercício Exercício C C Tecnologias que implementam estes modelos HyperText Markup Language (HTML) Linguagem que permite definir a estrutura de um documento a ser exibido por um browser Uniform Resource Identifiers (URI) Esquema pelo qual os recursos da internet são endereçados HyperText Transfer Protocol (HTTP) Protocolo que define a interação entre um browser (cliente) e um servidor de documentos hipertextuais.

6 Transação cliente-servidor na Web Browser Solicitação HTTP HTTP HTTP Resposta do servidor HTTP TCP Software de TCP/IP Software de TCP/IP TCP Ligação física Cliente Exemplo de uma sessão Web 1/2 1 Usuário solicita Usuário 2 DNS é consultado e fornece o endereço IP O browser fa a conexão e envia a solicitação em HTTP GET /arq.html HTTP / (seguem outras informações) Browser (cliente) DNS GET / HTTP /1.0

7 Exemplo de uma sessão Web 2/2 5 recebe solicitação e procura pelo recurso (arq.html) 6 : HTTP/ OK Date: Thu, 23 Oct :45:56 GMT... (após o cabeçalho segue o conteúdo de arq.html) 7 Browser apresenta o resultado na tela Browser (cliente) arq.html Cabeçalho + conteúdo de arq.html Usuário Tecnologias para Sistemas Web Software Interface de Usuário HTML (Forms) CSS Scripts Núcleo funcional: Programas utiliando CGI, API, etc. e Banco de dados Hardware Cliente

8 Tecnologias do lado cliente DOM Plug-in HTML Scripts Módulo Compilado (Applets, ActiveX) Cliente Tecnologias do lado servidor Sistema operacional Unix (Aix, Solaris, Linux), Windows NT HTTP Apache Information Server (IIS), Personal Web Server Programas Gateway Perl, C/C++, TCL/TK, Lua, PHP API Interface de programação de aplicações ISAPI, NSAPI Java Servlets Scripting Server-side JavaScript Active Server Pages - ASP Cold Fusion - CFM Banco de dados Oracle, Sybase, SQLServer, MSAccess Database Middleware Oracle Platform Informix Foundation.2000 Sybase web.sql

9 Tecnologias do lado servidor Solicitação HTTP Página HTML HTTP Arquivos HTML,GIF, Programas aplicativos Cliente Ferramentas de design de interface para Web Design Macromedia DreamWeaver MS Frontpage Adobe GoLive Imagens Adobe Illustrator Adobe Photoshop Macromedia Freehand Texto MS Word QuarkXPress Adobe Acrobat Diagramação Adobe Pagemaker Animações Macromedia Flash

10 Helpers e Plug-ins Ativados quando o browser não tem capacidade para exibir certos tipos de conteúdo. Helpers são aplicações auxiliares independentes que são ativadas pelo browser para exibir um conteúdo Plug-ins são incorporados ao browser Browsers de última geração possui plug-ins para as principais mídias. Definindo conteúdos com MIME Multipurpose Mail Extensions Tipos de conteúdo: Content-type: type/subtype Type pode ser: Image, audio, text, video, application, multipart, message e extension-token Subtype pode ser: Image: gif, jpeg, png, tiff, xbm, xpm, etc. Audio: x-wav, x-aiff, mpeg, ra, etc. Text: html, plain, etc. Video: mpeg, quicktime, x-msvideo (avi), etc. Application: msword, ip, x-tex, postscript, etc.

11 Applets Java São pequenos programas em Java Podem ser executados em browsers que possuem o interpretador Java Permitem funcionalidade do lado cliente Orientação a Objetos Programas Java não podem acessar recursos do sistema cliente Dynamic HTML (DHTML) Não é uma nova HTML com animação Uso de tecnologias HTML CSS (Cascading Style Sheets) JavaScript DOM (Document Object Model) O objetivo é permitir que todos os elementos possam ser manipulados pela linguagem script Páginas podem conter elementos modificados durante a leitura

12 URI Uniform Resource Indentifier Protocol Port Diretórios e Domain name detalhes do recurso Protocolos: HTTP, FTP, Gopher, WAIS, mailto, news, file Domain Name: Nome fantasia de um servidor de recursos na internet, Deve ser traduido num endereço IP Porta: número da porta do servidor a ser utiliada (opcional) Diretórios: utilia-se estilo Unix (/) qualquer que seja o sistema operacional. URI - variações Pode-se usar o endereço IP diretamente // :1234/ Pode-se incluir nome do usuário e senha quando necessário //usuario:senha@

13 URI parcial Seja um documento localiado em: Seja a seguinte âncora neste documento: <A HREF= exercicios.html > Indica que o arquivo está localiado no mesmo diretório ~jair/piws <A HREF=../index.html > Refere-se ao documento index.html no diretório ~jair