26
Curso Superior de Tecnologia em Design Gráfico 1 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web DWEB - Design para Web 3 Fundamentos Web E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus..Romanos 12:2

Unb 2012.1 - dweb - 03 - fundamentos web

Embed Size (px)

Citation preview

Page 1: Unb   2012.1 - dweb - 03 - fundamentos web

Curso Superior de Tecnologia em Design Gráfico

1 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

DWEB - Design para Web

3 Fundamentos Web

“E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus..” Romanos 12:2

Page 2: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

2 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n

Page 3: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

3 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Objetivo da Aula

n Descrever o que é, para que serve e porque adotar uma linguagem de marcação?

n Apresentar os fundamentos da linguagem de marcação HTML, bem como a sua origem.

n Apresentar os aspectos de servidor web

Page 4: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

4 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Agenda

n Introdução as linguagens de marcação.

n Conceitos de WWW n Conceitos de URL n Protocolos n DNS

Page 5: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

5 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n HTML î HTML (acrônimo para a expressão inglesa

HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.

î Documentos HTML são interpretados por navegadores. n  A tecnologia é fruto do "casamento" dos padrões

HyTime e SGML.

Page 6: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

6 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  SGML î O Standard Generalized Markup Language

(SGML) é uma metalinguagem através da qual se pode definir linguagens de marcação para documentos.

n  SGML é uma descendente da Generalized Markup Language (GML) da IBM, desenvolvida na década de 60 por Charles Goldfarg, Edward Mosher e Raymond Lorie (cujas iniciais dos sobrenomes por acaso coincidem com GML).

î  é um padrão de formatação de textos.

n  Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Page 7: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

7 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  História î Luz em meio as trevas...

n  Tim Berners-Lee criou o HTML original n  A linguagem foi definida em especificações formais na década

de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet.

n  A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicação formal para o SGML (com uma DTD (DocType Definition) em SGML definindo a gramática).

n  Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C).

Page 8: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

8 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

Sir Timothy John "Tim" Berners-Lee

Recentemente, Tim Berners-Lee foi considerado um dos maiores gênios vivos do mundo, segundo o levantamento "Top100 Living Geniuses", da consultoria Creators Synectics.

Berners-Lee usou este NeXTcube na CERN para criar o primeiro servidor web do mundo.

O primeiro website que Tim Berners-Lee construiu - inicialmente unicamente com página de texto - foi colocada online em 7 de agosto de 1991.

Oferecia uma explicação sobre o que a World Wide Web, como alguém poderia criar um navegador, como instalar e configurar um servidor web.

Page 9: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

9 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html

Page 10: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

10 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n História î As especificações

n  A última especificação HTML lançada pela W3C foi a recomendação HTML 4.01, publicada no final de 1999. Uma errata ainda foi lançada em 2001.

n  O grupo de trabalho da W3C desde 2002 a 2006, de forma exclusiva focado no desenvolvimento do XHTML, uma especificação HTML baseada em XML que é considerada pela W3C como um sucessor do HTML.

n  O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido.

Page 11: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

11 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n História î As especificações

n  Em maio de 2007 a W3C reconsiderou sua decisão de encerrar o desenvolvimento da HTML em favor da XHTML e tornou pública sua decisão de retomar os estudos para o desenvolvimento da HTML5

n  Em janeiro 2011, Ian Hickson, editor da HTML5, publicou no blog da WHATWG uma matéria informando que a especificação para a HTML5 continuaria a ser desenvolvida exclusivamente pelo W3C

Page 12: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

12 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  Importante î O mínimo que você precisa saber sobre HTML

n  O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que HTML não foi criado para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de página.

n  As tags apenas informam ao navegador o que são os elementos que estão na página.

n  Em compensação é muito simples criar uma página básica para colocar na Internet com HTML.

Page 13: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

13 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  Tag... î Como funcionam os tags

n  Esses códigos, chamados tags, são responsáveis pela marcação do texto em função de seu papel dentro do documento.

n  O título principal é marcado com as tags <h1> e </h1>, enquanto os parágrafos são separados pela tag <p> e </p>.

n  Existem dois tipos de tags î  Alguns são formados aos pares, indicando o início e o fim do

trecho afetado, como o par <h1> e </h1>. î  Outros podem ser colocados individualmente, como o

<br />

Page 14: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

14 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  Tag... î Tags básicas

n  Existem quatro pares de tags que devem ser sempre colocados na página.

n  O par de tags <html> e </html> deve englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao navegador que se trata de um documento HTML.

n  O documento, por sua vez, está dividido em duas partes:

î  o cabeçalho e o corpo do texto, cada um indicado por um par de tags diferente.

Page 15: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

15 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  Estrutura î Tags básicas

Estrutura documento HTML

início

fim

cabeçalho

corpo dodocumento

Estrutura documento HTML

<html>

</html>

<head>

</head><title></title>

<body>

</body>

Page 16: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

16 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n Decifrando as Tag’s î Tags básicas

n  Tudo que estiver entre o par <head> e </head> irá compor o cabeçalho, não aparecendo na página.

n  O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre o par <title> e </title>.

î  Os navegadores mostram o título na barra de título do programa.

n  Por fim, existe o par <body> e </body>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador.

Page 17: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

17 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação <head><title>Carlos José</title></head>

<body>tudo que você esta aqui!!!</body>

Page 18: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

18 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Introdução as linguagens de marcação

n  Importante î Apesar dessa aparente sofisticação, as páginas Web não

passam de documentos eletrônicos de texto simples. î Podem ser produzidas com qualquer editor de texto não

formatado como o bloco de notas do Windows. î Regras

n  Para garantir uma flexibilidade dos documentos HTML ao serem armazenados nos computadores, aplique sempre estes três princípios:

î  Nunca coloque acento nos nomes dos documentos î  Nunca utilize espaços em branco entre palavras nos nomes dos

documentos î  Nunca escreva os nomes dos documentos com letras maiúscula.

Page 19: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

19 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Conceitos

n WWW n  A World Wide Web é um conjunto de documentos

multimídia que estão conectados ou ligados por hiper-vínculos, de modo que você possa passar de um documento para outro com um clique do mouse.

î  Documento: é apenas um relatório que descreve alguma coisa. î  Multimídia: a criação e exibição de um documento não limitado às

palavras, pois tem som, imagem, vídeo e etc. î  Hiper-vínculos: são conexões a vários servidores ou no mesmo

servidor web, que permite ir de um documento para outro.

n  O navegador utiliza o código HTML para exibir o documento com os hipervínculos, estes por sua vez tem as URL´s que contém os endereços exatos de outros documentos HTML.

Page 20: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

20 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Conceitos

n URL n  As URL (Uniform Resource Locators) descrevem o

local exato de um recurso da internet ou intranet – por exemplo: vídeos, músicas, texto, aplicativos e etc.

n  Em geral, ao criar um hiper-vínculo especialmente àqueles que descrevem recursos da internet, você fornece três informações diferentes: protocolo – nome do servidor – caminho do documento.

n  Exemplo de uma URL para um documento Web: î  http://www.unibratec.com.br/noticias/index.html

Page 21: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

21 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Conceitos

n URL n  Tipos de URL:

î  Absoluta - este tipo de URL descreve o caminho absoluto informando desde a origem até chegar ao documento desejado. §  Ex: http://www.unibratec.com.br/noticias/index.htm

î  Relativa - este tipo de URL descreve o caminho relativo onde não há necessidade de informar o caminho desde a origem onde esta o documento. §  Ex: ../noticias/index.html

Page 22: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

22 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Protocolos

n  Alguns conceitos î Protocolos

n  Você pode usar a palavra protocolo em diversos sentidos, quando estiver falando sobre computadores e internet, é importante que você pense na palavra como um modo de se referir a um conjunto especifico de regras para transferir informações entre computadores.

n  Exemplos de protocolos: î  http:// - transfere documentos web entre computadores. î  https:// - transfere documentos web com segurança entre

computadores, de modo que eles não possam ser visualizados ou lidos por outros computadores durante a transmissão.

î  ftp:// - transfere arquivos entre computadores. î  news: - conecta o seu navegador a um servidor de grupos de

discussão.

Page 23: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

23 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

DNS

n  Alguns conceitos î DNS

n  Domain Name System – (Sistema de Nomes de Domínios) é um sistema de gerenciamento de nomes hierárquico e distribuído operando segundo duas definições:

î  Examinar e atualizar seu banco de dados. î  Resolver nomes de servidores em endereços de rede (IPs).

n  O sistema de distribuição de nomes de domínio foi introduzido em 1984 e com ele os nomes de hosts residentes em um banco de dados pôde ser distribuído entre servidores múltiplos, baixando assim a carga em qualquer servidor que provê administração no sistema de nomeação de domínios.

n  Cada computador possui um endereço na Internet chamado de endereço IP.

n  A atribuição de domínios na Internet visa a não utilização do mesmo nome de domínio por mais de uma instituição.

Page 24: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

24 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

DNS

n Alguns conceitos î DNS

n  Convencionou-se um domínio geográfico a cada país, com exceção dos EUA e a administração interna ficou a cargo de cada país.

n  No Brasil é a FAPESP: registro.br n  Exemplo de Domínios:

î  gov - indica endereço de governo; î  edu - indica endereço educacional; î  org - indica endereço de organizações não governamentais; î  mil - indica endereço de rede militar; î  net - indica endereço de organização da rede; î  com - indica endereço de rede comercial.

Page 25: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

25 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Perguntas

?

Page 26: Unb   2012.1 - dweb - 03 - fundamentos web

DWEB - Design para Web / Carlos José

26 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web

Considerações Finais

Fonte: Ramalho, J.A., HTML 4: Teoria e pratica, São Paulo, Berkeley Brasil, maio 2000; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição; http://pt.wikipedia.org