Curso de Design Gráfico em Tecnologia

Curso Superior de Tecnologia em Design Gráfico

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

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

DWEB - Design para Web / Carlos José

Contato

Carlos José

carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n



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


Agenda

n Introdução as linguagens de
marcação.
n Conceitos de WWW
n Conceitos de URL
n Protocolos
n DNS



Introdução as linguagens de marcação

n  HTML
î HTML (acrônimo para a expressão inglesa
HyperText Markup Language, que signiﬁca
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.




n  SGML
î O Standard Generalized Markup Language
(SGML) é uma metalinguagem através da qual
se pode deﬁnir 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.




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).




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 conﬁgurar um servidor
web.




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




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.




n  História
î As especiﬁcaçõ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 especiﬁcação para a HTML5
continuaria a ser desenvolvida exclusivamente pelo
W3C




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.




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 ﬁm do
trecho afetado, como o par <h1> e </h1>.
î  Outros podem ser colocados individualmente, como o
<br />




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
ﬁm 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.




n  Estrutura
Estrutura documento HTML Estrutura documento HTML
início <html>
cabeçalho <head>
<title></title>
</head>
corpo do <body>
documento

</body>
fim </html>




n  Decifrando as Tag’s
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>.
î  Osnavegadores mostram o título na barra de título do
programa.
n  Porﬁm, existe o par <body> e </body>, que serve
para indicar o corpo do texto, ou seja, a parte
mostrada na janela do navegador.



<head><title>Carlos José</title></head>

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




n  Importante
î  Apesar dessa aparente soﬁsticaçã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 ﬂexibilidade 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.



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.



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



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



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 especiﬁco 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.



DNS

î  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 deﬁniçõ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.



DNS

î DNS
n  Convencionou-se um domínio geográﬁco a cada país,
com exceção dos EUA e a administração interna ﬁcou
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.



Perguntas

?


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


Curso de Design Gráfico em Tecnologia

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (14)

Semelhante a Curso de Design Gráfico em Tecnologia

Semelhante a Curso de Design Gráfico em Tecnologia (20)

Mais de Claudenio Alberto

Mais de Claudenio Alberto (16)

Curso de Design Gráfico em Tecnologia