unb 2012.1 - dweb - 03 - fundamentos web
TRANSCRIPT
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
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
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
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
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.
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.
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).
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.
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
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.
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
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.
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 />
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.
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>
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.
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>
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.
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.
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
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
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.
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.
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.
DWEB - Design para Web / Carlos José
25 Monday, 27 de February de 12 Capítulo 3 - Fundamentos Web
Perguntas
?
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