A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Internet - 1 World Wide Web m Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias.

Apresentações semelhantes


Apresentação em tema: "Internet - 1 World Wide Web m Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias."— Transcrição da apresentação:

1 Internet - 1 World Wide Web m Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias equipas m acesso à informação por pedido (pull) em vez de por envio (push) m no CERN (1991) definiu-se a linguagem HTML e no NCSA implementou-se o browser Mosaic m serviço mais importante: em 1995 o tráfego WWW ultrapassou o de FTP m responsável pela actual expansão da Internet

2 Internet - 2 Navegadores m Quem controla as normas da Web é o W3C - World Wide Web Consortium m em sentido estrito, WWW refere-se ao serviço de navegação que usa o protocolo http m os navegadores mais comuns são o Netscape Navigator e Microsoft Internet Explorer q para além de funcionarem como clientes WWW, também incluem clientes para os outros serviços (ftp, telnet, , gopher) q transferem ficheiros ASCII ou HTML que mostram e ficheiros binários que também mostram se a aplicação ajudante (helper) ou um software adicional (plug-in ou applet) estiverem definidos, caso contrário armazenam-nos em disco q interface universal, incluindo bases de dados

3 Internet - 3 URL m A localização de um qualquer recurso é definida num URL - Uniform Resource Locator serviço://computador/ficheiro q serviço indica o protocolo do servidor pretendido (http, ftp, gopher,...); se omisso, usa-se o http da Web q computador é a máquina onde corre o servidor q ficheiro é o nome completo do ficheiro pretendido; se omisso, usa-se habitualmente Welcome.html ou index.html m para facilitar a organização das áreas de trabalho q corresponde de facto ao ficheiro ~ei96023/public_html/casa.html q os directórios ~ei96023 e public_html têm que ter permissão x para todos e o ficheiro casa.html tem que ter permissão r

4 Internet - 4 Nota – Permissões em UNIX m Informação sobre ficheiros q ls -l q -rw-r--r-- 1 lmrdocentes 207 Fev 06 09:30 xpto.txt Owner, Group, Other r = read w = write x = execute - = empty q chmod lista de permissões lista de ficheiros u = owner (user) g = group o = other chmod u+x prog chmod g+rw prog chmod o+r prog chmod 544 prog –r = 4 (100) w = 2 (010) x = 1 (001)

5 Internet - 5 HTML m HyperText Markup Language q é uma linguagem de estruturação de documentos, incluindo recursos multimédia, e de especificação de ligações, com suporte para outros serviços, como o ftp e o gopher q é um caso particular da linguagem SGML (Standard General Markup Language) utilizada em processamento de texto q HTML é definida por um DTD (Document Type Definition) SGML q está na versão 4.0 m a concorrência entre navegadores origina o aparecimento de extensões à norma q podem amarrar a um navegador e dificultar o acesso através de outros navegadores q por vezes, as mais usadas acabam por ser incorporadas na versão seguinte da norma

6 Internet - 6 HTML não é m Não é uma ferramenta de processamento de texto m é uma linguagem de anotação de documentos, para evidenciar a sua estrutura e conteúdo, mais do que a forma, que pode variar entre navegadores q inclui contudo comandos que afectam a forma, tais como a fonte, os títulos e as mudanças de linha q não se devem usar os comandos de estrutura só pelo efeito gráfico que produzem m não existe q notas de rodapé, sumários e índices automáticos q cabeçalhos e rodapés q tabuladores q tratamento gráfico de equações matemáticas

7 Internet - 7 Ferramentas de desenvolvimento m Necessários um editor e um navegador m dois métodos de construção das páginas q primeiro escrever o texto e depois marcá-lo pode usar-se um processador de texto normal e respectivas ferramentas de correcção ortográfica, etc., e em seguida acrescentar as marcas sistematicamente (gravar em texto) pode recorrer-se à gravação em formato HTML de documentos MS Office, embora muitas vezes seja necessário afinar o resultado a ferramenta shareware HTML Author é útil para complementar o Word q escrita simultânea do conteúdo e das marcas editores que facilitam a geração de código HTML com visualização num navegador (HomeSite) editores WYSIWYG só interessam se for possível chegar facilmente ao código gerado (Adobe PageMill)

8 Internet - 8 Primeiro documento Documento inicial Exemplo Este documento mostra que os espaços no código fonte são ignorados pelo navegador. Introduzi um novo paragrafo.

9 Internet - 9 Estrutura de um documento m Documento HTML = texto + marcas q armazenado e transmitido como ficheiro de texto ASCII m partes : cabeçalho (título) + corpo Titulo Conteúdo anotado.

10 Internet - 10 Marcas m As anotações HTML são constituídas por marcas texto q indiferentes a maiúsculas q maior parte delimita uma região com um início e um fim há marcas sem fim (ex: ) nas marcas encaixadas convém manter o escopo hierárquico Exemplo Fica bold a meio. Deixa de estar bold aqui.

11 Internet - 11 Função das marcas m as marcas aconselham o navegador a mostrar o conteúdo segundo uma dada forma, mas não são imperativas q não se trata de definir disposição de página mas de transmitir conteúdos q redimensionar a janela muda o aspecto q mas ver CSS m os navegadores ignoram marcas desconhecidas e tentam ultrapassar erros q respeitar a sintaxe para facilitar o trabalho de analisadores de texto q embora não exigida, é boa prática incluir a marca

12 Internet - 12 Caracteres especiais m Só parte dos 256 caracteres ISO são representáveis e ainda menos são normalizados m entidade carácter com nome&nome; <<áá >>êê &&ìì ººõõ ××ÜÜ m entidade carácter numérica&#nnn; AA•

13 Internet - 13 Comentários m tudo entre as marcas m não visualizado mas passa no View Source m certos navegadores usam os comentários para incluir comandos específicos para o seu servidor que outros navegadores não entenderiam q CSS q inclusão de ficheiros do lado do servidor q geração dinâmica de conteúdo

14 Internet - 14 Cabeçalho m Descreve propriedades do documento, em marcas inclusas específicas q - título do documento; topo da janela; nome de bookmark única exigida no cabeçalho importante que descreva o conteúdo e eventualmente dê o contexto, pois pode-se chegar lá directamente e os indexadores muitas vezes só olham para o título q - informação extra; pares nome/conteúdo (não normalizada) faz com que o servidor envie no cabeçalho do documento MIME que vai para o navegador content/type: text/html(sempre) charset: iso automatização: motores de pesquisa, navegadores

15 Internet - 15 Divisões e parágrafos m Um texto pode estar estruturado em divisões q resumo, capítulos, secções, anexos, bibliografia, etc. q marca … permite individualizar essas unidades e tratá-las sistematicamente; por exemplo extrair automaticamente os resumos de todos os documentos q atributo align= left (omissão), center ou right, posiciona o texto q atributo class= nome permite definir um estilo para a classe nome e usá- lo sistematicamente q as marcas podem estar encaixadas, para subdivisões, prevalecendo a mais interior m o texto organiza-se em parágrafos q - muda de linha e adiciona espaço q … q limita-se a introduzir uma mudança de linha q é muitas vezes omitido; omitido no primeiro parágrafo

16 Internet - 16 Texto estruturado Introdução: O trabalho presente visa demonstrar a necessidade de os agricultores se actualizarem. Início do capítulo. Resumo: este é o primeiro capítulo e trata da actualização tecnológica. A utilização de … dimensão. Encostado à direita. Este é um parágrafo fechado. Encostado à esquerda por omissão. Novo parágrafo.

17 Internet - 17 Títulos de divisões m Separação visual de partes do texto feita com títulos, linhas, espaçamentos, … m seis níveis de títulos,, …, q tem o tamanho da fonte normal; escolher para a menor subdivisão q e muito pequenos; só para elementos extra q existem os atributos align e class q manter a consistência na escolha dos níveis q repetir o conteúdo da marca como primeiro título q marcam conteúdo; podem ser mostrados de várias maneiras; não devem ser usados só para mudar fontes; fim existe sempre q podem incluir texto, imagens, âncoras e mudanças de linha q não devem incluir parágrafos, listas e outros blocos

18 Internet - 18 Aparência do texto m Estilos baseados no conteúdo q são marcas que anotam a função especial do elemento e devem ser mostradas com aparência diferente do texto normal q actualmente são pouco diferenciadas (convertidas para itálico ou negrito) q sensíveis ao atributo class e têm sempre fim q exemplos mais usados - citação bibliográfica; incluir ligação, se existir; itálico - código para computador; monoespaçado - definição; útil para produzir índices; - enfatizar; itálico - forte; negrito

19 Internet - 19 Aparência do texto m Estilos físicos q são marcas que indicam directamente o aspecto pretendido, mas não transportam significado q redefiníveis na classe q exemplos,,, - negrito, itálico, traçado, sublinhado, - tamanho relativo; fonte seguinte; encaixável - pisca; realça e aborrece, - índice, expoente - monoespaçado

20 Internet - 20 Exemplo de fontes

21 Internet - 21 Código do exemplo Fontes Modelo O HTML usa um esquema de fontes virtuais com 7 tamanhos. O tamanho por omissão é o 3. A relação entre tamanhos adjacentes é de 20%. A especificação de tamanhos pode ser absoluta (1..7) ou relativa ( size=+1 ). Uso Realçar uma expressão com a marca <big> produz uma variação relativa encaixada. Diminuir tamanho do texto normal com <basefont size=-1> passa para 2. Aqui, <big> fica com 3, pois a variação é relativa. Realçar texto com <font size=7> indica tamanho absoluto. Este é o mínimo e não adianta tentar reduzir mais. Os expoentes x 2 e índices x 2 não mudam de tamanho automaticamente.

22 Internet - 22 Fontes m Tamanho de uma fonte q marca (muitas vezes sem fim) q marca (sempre com fim)... q e são encaixáveis m Escolha de fonte q a fonte escolhida é a primeira que exista no sistema do navegador m Côr q Sol ou Sol q #FFFF00 significa vermelho e verde no máximo (FF), sem azul (RGB)

23 Internet - 23 Côr m Nomes normalizados aqua (#00FFFF)gray (#808080)navy (#000080)silver (#C0C0C0) black (#000000)green (#008000)olive (#808000)teal (#008080) blue (#0000FF)lime (#00FF00)purple (#800080)yellow (#FFFF00) fuchsia (#FF00FF)maroon (#800000)red (#FF0000)white (#FFFFFF) m Mapa de cores normalizado q cada côr primária (vermelho, verde e azul) só pode tomar 6 valores de brilho (00, 33, 66, 99, CC, FF) q o mapa contém apenas 216 cores (6x6x6), mas que não precisam de ser convertidas: convém usar só estas, para garantir consistência em navegadores diferentes

24 Internet - 24 Controlo de quebras m q muda de linha, mas só recomeça abaixo de qualquer imagem ou tabela que esteja encostada à esquerda m q não muda de linha, mesmo que ultrapasse a margem q, dentro de um dá a oportunidade de quebrar, se já se tiver ultrapassado a margem m... q respeita os espaçamentos e quebras do texto preformatado q útil para quadros e código; monoespaçado q interpreta marcas que não impliquem quebras (fontes, ligações) m... q principal uso: centrar imagens e tabelas q outros usos: usar atributo align=center noutras marcas

25 Internet - 25 Exemplo de quebras Quebras Este texto aparece antes da imagem, a qual vai ser alinhada à esquerda. Esta frase está na mesma linha da imagem pelo que fica à sua direita. O parâmetro de limpeza faz ultrapassar a imagem. Este bocado de texto tem muitos espaços e mudanças de linha.

26 Internet - 26 Réguas Uma régua ( <hr> ) tem o efeito de uma quebra, não tem espaço antes nem depois, e funciona como um separador. Para retirar o efeito 3D, usa-se noshade. Parâmetros interessantes: size -- espessura width -- largura em pixel ou em % da janela align -- alinhamento Recomenda-se o uso da percentagem para tornar o aspecto relativo ao tamanho da janela. Pode-se mudar a côr.

27 Internet - 27 Formatos de imagem m GIF - graphical interchange format q 256 cores q comprime sem perda de informação q ícones e desenhos q visualização de imagem aproximada em 1/4 do tempo entrelaçamento de 4 em 4 linhas q transparência pixels da côr do fundo são ignorados pelo navegador q animação ficheiro GIF pode conter várias imagens mostradas em sequência m JPEG - joint photographic experts group q milhares de cores q maior compressão, com perdas q fotografias

28 Internet - 28 Regras de uso m Usar imagens que tenham conteúdo e não apenas para colorir a página m simplificar as imagens q reduzir tamanho, evitar dithering usando cores normalizadas m reutilizar imagens q ícones podem ficar na cache m dividir documentos grandes q manter cada documento abaixo dos 50KByte q colocar índices com ligações para os documentos relacionados m isolar imagens grandes q colocar uma versão reduzida no documento principal m especificar as dimensões

29 Internet - 29 Marca m Atributos q src - URL absoluto ou relativo da localização do ficheiro gráfico q lowsrc - URL de uma imagem de carregamento mais rápido q alt - texto a mostrar caso a imagem não o seja q align - posiciona o texto relativamente à sua linha top, middle, bottom - acerta a linha com o topo da imagem, o meio ou o fundo (varia do Netscape para o IE) left, right - encosta a imagem e põe o texto a envolvê-la q centrar - usa-se a marca ou o atributo de q border - espessura do caixilho; 0 elimina, o que pode prejudicar a identificação dos que possuem ligações q height e width - dimensão em pixel, acelera o carregamento; é usada para reservar espaço e para escalar as imagens q hspace, vspace - número de pixels extra na horizontal e vertical

30 Internet - 30 Exemplos de imagens Eis o dono do carro. Carro da direita Especificar a largura... a imagem.

31 Internet - 31 Mapas Mapa

32 Internet - 32 Mapa sensitivo m O atributo usemap faz com que uma imagem fique sensível à passagem do rato m definindo na marca correspondente as coordenadas de certas áreas e respectivas ligações, pode usar-se a imagem como índice gráfico q este processamento é da responsabilidade do cliente 70,140 30,70 150,130 90,30 0,0

33 Internet - 33 A marca m Cores q fundo: bgcolor q texto: text q ligação: link q ligação visitada: vlink q ligação activa: alink q Nota: mudar as cores pode confundir o leitor m Fundo q no atributo background indicar um URL de uma imagem pequena que é replicada automaticamente até preencher todo o fundo

34 Internet - 34 Atributos do corpo m Um mau exemplo de valores para os atributos do corpo, pois obscurece a leitura.

35 Internet - 35 Âncoras e ligações m Uma âncora identifica um ponto do documento q Revisão bibliográfica m Uma ligação permite indicar ao navegador qual o documento a mostrar a seguir... após o que se apresenta uma revisão bibliográfica sobre... q Neste formato indica-se, para além do documento, qual o fragmento que se pretende visualizar m O corpo da marca é a parte visível da ligação; apresenta-se realçada; deve ser suficientemente explicativa para se compreender o conteúdo desse documento, mesmo sem se ler o contexto

36 Internet - 36 Atributos da marca m onClick, onMouseOver, onMouseOut q valor é sequência de instruções JavaScript... caiu do barco e nadou... q mostra e apaga na barra de estado o conteúdo do link m atributo title pode ser usado pelo navegador para dar um título à janela que só mostra uma fotografia m atributos rel e rev definem significado das relações directa e inversa entre origem e destino da ligação q meta-informação, apoio à automatização

37 Internet - 37 Endereços relativos m Omitir partes de endereço completar com q as partes correspondentes do documento actual q a parte de endereço contida na marca m Exemplos: q refere-se ao fragmento com âncora morada no doc capa.html q permite mover o relatório 29 para outro directório ou servidor sem quebrar as ligações q se tiver só se define no cabeçalho e altera os endereços relativos q

38 Internet - 38 Estilos de ligações m Listas de ligações m listas de descrições de itens contendo ligações m ligações dispersas auto-descritivas m evitar chamadas do tipo CARREGUE AQUI! m usar imagens pode ser pouco descritivo q acrescentar mensagem explicativa na barra de estado m imagens sensíveis q ismap - processamento do lado do servidor pelo programa indicado em href implica ter a imagem no corpo de q usemap - processamento no cliente q circle, polygon, rectangle; href e nohref


Carregar ppt "Internet - 1 World Wide Web m Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias."

Apresentações semelhantes


Anúncios Google