APOSTILA DE HTML
AUTORA: Cássia de Jesus Ramos Teixeira
1ª PARTE
CAPÍTULO 1
Neste capítulo iremos abordar conceitos sobre:
1. Redes
2. Internet
3. Intranet
4. Extranet
5. Uma visão geral de como funciona a Internet.
REDES E INTERNET
Para que você possa entender o que é e como funciona a Internet é necessário primeiro compreender o que é uma rede de computadores.
Uma rede de computadores consiste, na forma mais simples de sua definição, na conexão de diversos computadores por meio de cabos e outros tipos de hardware.
Podendo trocar dados entre si.
A interação entre computadores envolve a movimentação de muitos dados, mas é difícil de se mover muitas coisas, incluindo-se dados, através de uma longa
distância. Então a interação de computadores normalmente começa com computadores no mesmo escritório ou no mesmo prédio conectados a uma rede local. O termo rede
de área local ou LAN, descreve um grupo de computadores geralmente conectados por mais de 300 metros de cabo, a qual interage e permite o compartilhamento de recursos.
As redes locais são: Ethernet, Token-ring e a rede remota (WAN). As redes Ethernet e Token-ring são dois tipos diferentes de redes que podem ser conectadas á
Internet.
Nas redes Token-ring os dados são transmitidos em "Tokens" de computador para computador, em uma configuração em anel ou estrela. Em redes Ethernet, os dados
passam de um servidor para um computador na rede. Alguns sistemas de rede não usam qualquer cabo. A aparelhagem de redes remotas (ou sem fio) estendem as redes além
do alcance dos cabos de cobre ou dos cabos de fibra ótica.
As redes locais são agrupadas em redes regionais. Que podem através dos Backbones ter acesso á outras redes regionais. Um Backbone é uma estrutura básica
para transmissão de dados na Internet extremamente veloz, são as espinhas dorsais do tráfego.
A Internet é uma interconexão de diversas redes através de linhas de alta capacidade chamadas Backbones, construídos para comportar o grande tráfego de informações
que circulam na Internet. É um local público e não pertence nem é operada por nenhuma empresa.
Agências governamentais ou companhias privadas são as responsáveis pela construção destas estruturas. As companhias de alcance de longa distância constróem
backbones e vendem o acesso a eles a outras companhias, os ISPs ( provedores de serviço da internet), é o que permite o acesso de seu computador a Internet, cobram
de ambos pelo tráfego de informações.
Vamos entender como funciona todo o processo desde ligar o computador até receber ou enviar uma mensagem para um computador do outro lado do mundo ou em
outro estado do nosso país.
Além do computador diversos outros tipos de hardware serão envolvidos ao se navegar na Internet. Esse hardware é projetado para transmitir dados entre redes
e forma grande parte do "elemento de coesão" que une a Internet. As cinco partes mais importantes são: Hubs, pontes, portas de comunicação(gateways), repetidores
e roteadores.
Os Hubs são importantes porque ligam grupos de computadores entre si e permitem que os computadores se comuniquem uns com os outros. As pontes ligam as
redes locais (LANs) umas ás outras. Permitem que os dados destinados á outra LAN sejam enviados a partis delas, enquanto mantêm simultaneamente dados locais dentro
de sua própria rede. As portas de comunicação (gateways) são semelhantes ás pontes, mas também traduzem dados de um tipo de rede para outro.
Os dados sempre atravessam grandes distâncias quando viajam através da Internet, o que pode criar um problema, pois o sinal que os envia pode enfraquecer
com a distância. Para evitar que isto ocorra, os repetidores amplificam os dados, em determinados intervalos, para que o sinal não enfraqueça.
Os dados para serem enviados de um local para outro são divididos em pacotes pelo TCP (Protocolo de Controle de Transmissão). Os roteadores garantem que
estes pacotes cheguem ao seu destino. E ,posteriormente, estes pacotes são montados formando a informação como foi enviada.
Agora que vimos o hardware envolvido, iremos entender todo o processo.
Os dados são divididos em pacotes pelo TCP. Pois a Internet é uma rede comutada, onde não existe uma conexão permanente entre o emissor e o receptor. Esses
pacotes são enviados de seu computador para a sua rede local, provedor de serviços Internet ou para um serviço comercial on-line, via modem. Caso o destino seja
uma outra rede local dentro da rede regional a qual as duas fazem parte, a transmissão terá um roteador captando estes dados do provedor, serviço comercial ou rede
local e transmitindo para o roteador da outra rede local.
No caso da transmissão entre várias redes regionais, os pacotes serão enviados a um ponto de acesso á rede (NAP) e depois através de um backbone enviado a
outro ponto de acesso próximo ao destino, a um roteador e em seguida ao computador de destino.
Esta divisão em pacotes é que faz a Internet ser conhecida como uma rede comutada em pacotes. É isto que os dois Protocolos (conjunto de regras) de comunicação
mais importantes fazem: o TCP e o IP. TCP é o Protocolo de Controle de Transmissão e o IP é o Protocolo Internet.
INTRANET E EXTRANET
Uma intranet é uma internet interna. O acesso a ela normalmente se restringe a funcionários da empresa. Como uma intranet pode abranger o globo, muitas organizações
consideram mais barato compartilhar informações corporativas dessa maneira. Os protocolos e as regras são os mesmos da Internet, com a diferença que se trata de
uma rede fechada da empresa, disponível somente aos funcionários conectados a ela. As informações disponíveis na intranet são informações corporativas, geralmente
de natureza proprietária.
Uma empresa estabelece uma intranet instalando o protocolo TCP/IP, um servidor Web (cujo conceito veremos no próximo capítulo) e navegadores Web, browsers.
Os documentos da empresa são convertidos para formato HTML e colocados no(s) servidor(es) Web da intranet. Assim, os funcionários da empresa usam seus navegadores
Web para visualizar esses documentos, basta digitar o endereço local do documento que desejam ver, de forma semelhante á inserção de um endereço Internet.
Fazer parte de uma intranet não impede necessariamente o acesso á Internet. É possível ter os dois ao mesmo tempo.
A EXTRANET é um grupo de intranets interconectadas. As empresas que fazem negócios entre si podem formar extranets para compartilhar determinados tipos de
informação.
COMO NASCEU A INTERNET
Em 1969, a ARPA, do departamento de defesa dos EUA, construiu uma rede experimental de computadores chamada ARPAnet. A ARPAnet uniu pesquisadores, militares
e universitários, permitindo que os recursos de seus computadores fossem compartilhados. A rede também permitiu que se fizesse pesquisas militares nas universidades
e que os militares se comunicassem, tanto entre si como com outros, via e-mail.
Com o tempo, a ARPAnet cresceu e se adaptou aos desenvolvimentos tecnológicos. Como resultado grandes companhias construíram redes baseadas na ARPAnet e
se conectaram a ARPAnet, em especial a NSF (Fundação Nacional para a Ciência).
O tráfego cresceu tanto que a rede foi dividida em militar e civil. Com a descentralização ela se tornou uma vasta rede de companhias, universidades, individuos,
pesquisadores e governo, ou seja, qualquer pessoa que dispusesse de um computador poderia se conectar. Antes era chamada de NSFnet e em 1987 passou a se chamar Internet.
Hoje diversos grupos orientam o crescimento da Internet, como o W3C, World Wide Web Consurtium, que orienta os padrões de evolução; o InterNIC, fundado pela
Fundação Nacional de Ciência, que controla o Sistema de Nomes de Domínio; etc. Mas isto não quer dizer que estas empresas controlam a Internet, elas orientam seu
crescimento e ajudam, como outras, a coordenar.
No início, foi o governo federal, as agências de pesquisas, os laboratórios e as universidades que deram forma a Internet. Mais recentemente, são os interesses
comerciais que têm determinado a forma de sua infra-estrutura.
Para solucionar problemas como nomes de domínio, velocidade, etc., e já está funcionando a "Internet 2". Uma rede altamente veloz que está sendo utilizada
somente por alguns orgãos governamentais e Instituições de nível Superior Federal.
Normalmente, para nós pobres mortais, a velocidade de conexão chega a 56 Kbps. Na Internet 2 a velocidade de conexão pode chegar a 2,4 Gigabytes por segundo.
Velocidades de conexão deste tipo também são utilizadas por usuários, felizardos, que possuem cable modem. Onde provedores como o Ajato já operam em São Paulo
e Rio de Janeiro.
EXERCÍCIOS
1. Defina Internet e redes locais.
2. O que uma rede comutada?
3. Conceitue:
A. Backbone
B. Hub
C. Roteador
D. Repetidor
4. De forma simples e concisa mostre como funciona, de maneira geral, o envio de informações pela Internet.
5. O que é uma Intranet?
6. Se estiver trabalhando em uma Intranet em uma empresa poderá ter acesso a Internet?
7. O que uma Extranet?
ANOTAÇÕES
AG8 Informática
2
1ª PARTE
CAPÍTULO 2
Este capítulo tratará :
1. O que é necessário para se criar páginas para a Web.
2. A diferença entre páginas Web, Home Page e apresentação Web
3. Navegadores
4. O que é site, Host, Provedor e Servidor Web
5. Protocolos
6. Serviços oferecidos na Web
A WORLD WIDE WEB
A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. Onde você
poderá percorrer partes do documento e outros documentos através de pontes chamadas de links.
A quantidade de informação que está disponível no universo da Internet é mais do que você poderia assimilar durante uma vida inteira, e ela se encontra das
mais variadas formas. Podendo se perder facilmente. Assim é muito importante o sistema de navegação, ou seja, a forma como as informações estão dispostas.
Poderia descrever a World Wide Web como um sistema de informação em hipertexto, gráfico, distribuído, independente de plataforma, dinâmico, interativo e
global, utilizado na internet.
O hipertexto permite que você leia um texto e navegue por ele e por informações visuais de forma não-linear, com base nas informações que deseja obter em
seguida. A Web fornece recursos de imagens e animação fantásticos.
É independente de plataforma pois você pode acessar as informações disponíveis na Web igualmente bem a partir de qualquer computador, sistema operacional
e monitor de vídeo.
Como o volume de informações é muito grande ela é distribuída por diversos sites (um Site da Web é um local que divulga algum tipo de informação. Quando
você exibe uma página Web, o seu navegador se conecta a esse site da Web para obter essas informações). Estas informações contidas nestes sites são encontradas através
de URLs (endereço na internet).
A Internet ainda é interativa, ou seja, ela interage com o usuário. Não é como a TV.
1. HOME PAGE, PÁGINA WEB, SITE E APRESENTAÇÃO WEB?
Vamos entender melhor o cada termo deste quer dizer, já que os pronunciamos tantas vezes acima.
Uma página Web é um elemento específico de uma apresentação da Web que está contido em uma estrutura. A primeira página de uma apresentação é chamada de
home page.
Uma apresentação da Web é um conjunto de páginas Web estruturadas sobre um determinado conteúdo, este conteúdo é aquilo que você está colocando na Web. Informações,
texto de ficção, imagens, ilustrações, programas, textos humorísticos, diagramas, jogos, etc. Tudo isso é conteúdo.
Esta apresentação, como outras, ficam armazenadas em um local chamado Site.
O Site é hospedado por computadores conectados permanentemente a Internet e recebem o nome de Host.
Para entrar na net é preciso fazer uma conexão direta ou usar o computador Host. O provedor de serviços Internet (ISP) atua como o computador Host (aquele
computador que fica conectado permanentemente na Internet para lhe prover o acesso a mesma). ISP é uma empresa que fornece o gateway necessário para acessar a Internet.
Os ISPs podem ser de vários tipos, oferecendo diversos níveis de serviço:
Acesso indireto
Você obtêm acesso através de um serviço on-line, como UOL, SBT On-Line e STI, entre outros, no Brasil. É necessário ser membro do serviço. A vantagem é que
estes serviços facilitam a navegação, oferecendo mecanismos de pesquisa personalizados e vínculos que levam a locais interessantes na Web. A desvantagem é que acessar
um serviço on-line por meio da Internet consome mais tempo do que adotar um caminho mais direto.
Acesso discado
A conexão é feita através de um modem. O ISP age como seu gateway para a Internet, mas não fornece serviços além de correio eletrônico e acesso á Internet.
A vantagem é o menor esforço para navegar e colher informações. A desvantagdem são os serviços de viagens, games e grupos de bate-papo entre os membros.
Conexão Permanente
Funciona por meio de uma rede de uma empresa. Nesse caso, a rede é conectada diretamente á Internet pelo gateway. Você efetuará um logon para entrar na rede
da empresa e poderá acessar a Internet. A vantagem é a quantidade de serviços oferecidos e a desvantagem é a questão da segurança e o valor pago ao ISP pelos serviços.
Como se cria uma página web?
Uma página Web é composta de textos e comandos especiais (tags) de HTML, um acrônimo de Hypertext Markup Language. Essa linguagem é bastante simples e tem
como finalidade básica formatar o texto exibido e criar ligações entre as páginas da Web, criando assim documentos com o conceito de hipertexto.
Para que o conteúdo de um documento HTML possa ser formatado e exibido na Internet demos usar um programa chamado browser, o navegador. Ele lê o conteúdo
do arquivo, interpreta os comandos e exibe sua página. Como já foi citado acima, existem diversos tipos de browsers disponíveis no mercado.
O código pode ser escrito usando o mais simples editor de texto, como o bloco de notas do Windows. Porém a forma mais prática e produtiva é utilizar um editor
HTML. Há vários no mercado como: HotDog Professional (www.sausage.com), o SiteAid (baixado do site www.siteaid.com), o FrontPage da Microsoft, etc.
É preciso estar conectado para visualizar a página que criei?
Não, o browser funciona independente de se estar conectado a Internet. A melhor forma de se trabalhar desenvolvendo uma página HTML é off-line, desconectado.
Primeiro você cria as páginas em seu computador e as testas por meio do browser. Depois, deve colocá-las em um servidor Web para que outras pessoas também
possam visualizá-la.
2. OS NAVEGADORES
Para visualizar toda informação disponível na Internet é necessário um Browser, navegador. Há vários disponíveis no mercado. Os mais conhecidos são o Internet
Explorer e Netscape Navigator.
Os navegadores podem acessar vários tipos de dados, não só do protocolo FTTP mas também FTP, Golpher, Usenet News, Telnet, etc.
O que um navegador faz com maior freqüência é lidar com a formatação e a apresentação de documentos da Web. Cada página é um arquivo, criado em uma linguagem
denominada HTML, que contém o texto da página, sua estrutura e vínculos para outros documentos, imagens ou outros meios. A recuperação de documentos a partir da
Web e a formatação desses no seu sistema são as duas tarefas que compõem a base da funcionalidade de um navegador.
3. SERVIDOR WEB
Para exibir páginas na Web e navegar por elas, você precisará apenas de um navegador da Web. Para divulgar páginas na Web, você precisará, na maioria dos
casos, de um servidor Web.
Servidor Web é o programa que é executado em um site da Web e que é responsável por atender ás solicitações de arquivos feitas pelo navegador da Web. Você
precisará de um servidor Web para divulgar documentos na Web.
4. PROTOCOLOS INTERNET
Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados protocolos. As pessoas que desenvolvem essas regras não foram apenas
inteligentes; elas criaram nomes interessantes, como Golpher (esquilo) e World Wide Web (teia mundial). Os extensos nomes descritivos e geralmente difíceis de lembrar
foram reduzidos a acrônicos como HTML.
Internet Protocol (IP)
Este é um dos protocolos mais básicos. O IP é o sistema que define o "local", ou endereço IP, das redes que compõem a Internet. E um certo sentido, o IP forma o
"mapa" da Internet e cada rede pode ser contatada em um ponto localizado nesse mapa.
Transmission Control Protocol (TCP)
TCP é o protocolo que define a estrutura dos dados transmitidos que já foi explicado num capítulo anterior, nº 01.
File Transfer Protocol (FTP)
Protocolo desenvolvido para a transmissão de mensagens longas entre duas pontas.
Hypertext Markup Language e Hypertext Transfer Protocol (HTML e HTTP) Juntos eles comandam a WWW, World Wide Web. O HTML define um método de incluir formatação em
arquivos de texto para que, quando exibidos com um browser. O HTTP define a maneira como os arquivos HTML devem ser enviados e recebidos.
Telnet
Um protocolo que define como um computador pode atuar como um terminal em outro. Usando um programa Telnet, é possível se conectar a outro computador e executar
programas nele, como se estivesse sentado diante de sua própria máquina.
Gopher
Os servidores que usam protocolo gopher apresentam seu conteúdo na forma de submenus.
NNTP (Network News Transfer Protocol)
Servidores UseNet armazenam mensagens e as encaminham usando o protocolo NNTP. Várias pessoas podem então ler notícias como o Outlook Express News.
EXERCÍCIOS
1. O que é um browser? E um editor HTML?
2. Defina:
a) Site
b) Home Page
c) Página Web
d) Apresentação Web
e) Servidor Web
f) Provedor
g) Host
3. O que é o protocolo TCP/IP? E por que ele é tão importante?
4. Que programas são necessários para se criar uma página HTML?
5. Qual a importância de um servidor Web?
6. Defina as formas de acesso e faça comentários das vantagens e desvantagens de cada caso.
ANOTAÇÕES
AG8 Informática
8
2ª PARTE
CAPÍTULO 3
Este capítulo têm como objetivo:
1. Organização do conteúdo
2. Formas de navegação
3. Storyboard
4. Diagramação
ORGANIZAÇÃO E NAVEGAÇÃO
1. O QUE PRETENDE DIVULGAR?
Que tipo de conteúdo você pode apresentar na Web? Praticamente o que quiser. Eis aqui alguns tipos de conteúdo mais comuns na Web, no momento:
* Informações pessoais: informações sobre você, por exemplo.
* Hobbies ou interesses especiais: filmes, motocicletas, etc.
* Publicações: como jornais, revistas.
* Perfis de empresa: o que uma empresa faz ou vende, etc
* Documentação On-line: desde manuais, guias de treinamento, dicionários, etc.
* Catálogos de compras: comercialização de artigos.
* Lojas on-line.
* Pesquisas de opinião: a interatividade com o usuário através de formulários, caixas de sugestões, etc.
* Educação On-line: numerosas universidades, escolas e empresas particulares oferecem o ensino a distância através da Web.
O único limite da Web é a sua própria vontade. Por isso, se a sua idéia não estiver nesta lista ou parecer meio maluca ou ainda não estiver amadurecida,
pare e navegue um pouco pela Internet. Com certeza encontra excelentes idéias e poderá amadurecer as suas e ter muitas outras.
2. ESTABELEÇA SEUS OBJETIVOS!
Você deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentação? Eles lerão a página inteira ou apenas uma parte dela?
Antes de começar entrar com códigos ou imagens você deve pensar o que quero colocar em minha página? Como será estruturada? Ela está adequada ou não ao meu
público alvo?
Os objetivos não precisam ser grandiosos, mas a determinação irá ajudá-lo a elaborar, organizar e codificar suas páginas com uma maior probabilidade de sucesso.
Caso vá desenvolver uma apresentação Web para uma empresa ou pessoas é importante que você colha junto ao seu cliente seus objetivos, idéias, a forma que
imagina sua página, etc. Assim, ficará bem mais fácil de começar seu trabalho.
3. DIVIDA SEU CONTEÚDO EM TÓPICOS
Crie uma lista com os principais tópicos, a princípio não importa a ordem. Esta é uma forma de começar a se organizar.
Sua lista poderá Ter quantos tópicos desejar, mas se perca listando uma quantidade enorme de tópicos (seu leitor poderá se cansar e se perder em meio a tantas
opções).
4. ORGANIZAÇÃO E NAVEGAÇÃO
Aqui descreverei algumas das estruturas e navegação e suas características e ainda considerações importantes como:
* Os tipos de informação que se adaptam melhor a cada estrutura.
* Como os leitores conseguem se deslocar pelo conteúdo de cada tipo de estrutura para encontrar as informações de que precisam .
* Como Ter certeza de que os leitores conseguem se localizar nos seus documentos (contexto) e achar o caminho de volta até uma posição conhecida.
Ao ler esta parte reflita como suas informações se encaixaria em cada uma. Você poderá combinar, até mesmo, duas estruturas e criar uma nova forma de navegação.
FORMAS DE ORGANIZAÇÃO
1. HIERARQUIAS
A maneira mais fácil e mais lógica de estruturar os seus documentos. As hierarquias e os menus adaptam-se especialmente bem aos documentos on-line e de hipertexto.
Exemplo: sistemas de ajuda.
HOME PAGE
Em uma organização hierárquica, é fácil para os leitores descobrir a posição em que se encontram na estrutura. Nas hierarquias, a home page fornece uma visão
geral do conteúdo que está subordinado a ela e ainda define os principais vínculos ás páginas dos níveis inferiores da hierarquia.
Este tipo de estrutura oferece um risco mínimo de ficar perdido, além de ser uma forma mais fácil de localizar informações. Mas procure não incluir muitos
níveis para não aborrecer os leitores. Pois estes, após ter de selecionar opções em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais
para prosseguir. Procure manter apenas dois ou três níveis na sua hierarquia.
2. LINEAR
Muito semelhante a forma como são organizados documentos impressos. Neste tipo de estrutura a home page é o título, ou introdução, e todas as outras páginas
acompanham-na em seqüência com vínculos que levam de uma página a outra, normalmente com opções de avançar e retroceder.
Uma organização linear é muito rígida e limita tanto a liberdade dos seus leitores de consultar as informações quanto a sua própria liberdade de apresentá-las.
As estruturas lineares são ideais para apresentar, no ambiente on-line, um material que já tenha esse tipo de estrutura no ambiente off-line. Como por exemplo: instruções
passo-a-passo ou treinamento baseado em computador.
3. ESTRUTURA LINEAR COM ALTERNATIVAS
Você pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com
ramificações alternativas que partam de um único tronco. As ramificações podem se reunir ao tronco principal em algum ponto mais adiante, em um nível mais baixo
da estrutura, ou continuar se ramificando em níveis inferiores seguindo caminhos próprios até chegar a um "fim".
Além de ramificar a estrutura linear, você pode também oferecer vínculos que permitam aos leitores avançar ou retroceder na cadeia, caso precicem rever alguma
etapa ou já conheçam alguma parte do conteúdo.
4. COMBINAÇÃO DAS ESTRUTURAS LINEAR E HIERÁQUICA
Uma forma comum de organizar um documento na Web consiste em obter uma combinação das estruturas linear e hierárquica. Essa estrutura combinada ocorre com
maior freqüência quando documentos de estrutura rígida, porém lineares, são apresentados no ambiente on-line. Um exemplo são os famosos FAQ ( Frequently Asked Questions).
A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto.
Como essa é uma estrutura linear e hierárquica, em cada página do roteiro você deve oferecer vínculos para o leitor avançar, retroceder, retornar ao início
e subir um nível.
O STORYBOARD
A próxima etapa do planejamento da sua apresentação da Web consiste em determinar o conteúdo que será apresentado em cada uma das páginas e criar alguns
vínculos simples que possibilitem a navegação por essas páginas.
O StoryBoard de uma apresentação é um conceito emprestado do cinema, em que cada cena e cda tomada de câmera é esboçada na ordem em que ocorre no filme.
O storyboard fornece uma estrutura e um plano globais para o filme, que permitem que o diretor e sua equipe tenham uma idéia clara de onde cada tomada se encaixa
no filme.
O uso de storyboard, uma técnica cinematográfica, consiste no processo de criação de um resumo com sketh (rascunho) da aparência final do seu trabalho antes de você
efetivamente pôr em prática suas idéias. O uso de storyboard ajuda-o a visualizar a apresentação como um todo e a prever sua forma final.
Esta técnica fornece um esboço geral de como a apresentação Web irá ficar quando estiver pronta, indicando os tópicos que serão incluídos em cada página,
os vínculos básicos e talvez até mesmo uma idéia conceitual do tipo de imagens gráficas que você usará e onde elas serão apresentadas. No caso de grande documentação,
o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. Para estruturas muito pequenas talvez não seja necessário criar um storyboard.
DICAS PARA SEU STORYBOARD
1. Coloque cada tópico em uma página, mas se tiver um grande número de tópicos, a manutenção e vinculação pode se tornar maçante.
2. Defina bem a forma de navegação entre as páginas. Se houver formas alternativas, torne a navegação para os leitores a mais intuitiva possível.
3. Tome cuidado com o que será incluindo na home page, lembre-se, ela será a porta da sua apresentação.
4. Tenha sempre em mente seus objetivos. Procure não se distanciar deles.
]
DIAGRAMAÇÃO
A disposição de imagens, textos, vídeos, etc. Tudo que você deseja colocar em sua página precisa ser colocado de forma agradável ao leitor. Daí abordarmos,
de forma geral, a diagramação. Esta palavra vêm do mundo dos impressos. Trata-se da disposição de elementos que compõem uma página.
Deve ser observado o tamanho das fontes, disposição das imagens, forma como o texto será apresentado, etc. Uma boa diagramação também garante o retorno do
internauta.
EXERCÍCIOS
1. Por que é tão importante, antes de começar a construir uma apresentação Web, definir objetivos e tópicos? O que mais é necessário?
2. Descreva cada forma de organização de páginas citada acima. Faça uma observação sobre o que você compreendeu de cada uma.
3. O que é storyboard e qual a sua utilidade?
4. Em que casos é aconselhável usar o storyboard?
5. Vamos começar a planejar sua Home Page pessoal. Pense no que gostaria de colocar em suas páginas, se haverá links para outras partes da mesma página e os links
para outras páginas, quais os tópicos abordados, etc. Faça um storyboard da sua apresentação web.
ANOTAÇÕES
AG8 Informática
14
2ª PARTE
CAPÍTULO 4
Este capítulo têm como objetivo:
1. Tratar das etapas do projeto de um Website
2. Quais os profissionais envolvidos
3. Administração do site
4. Dicas para não cometer erros graves na hora de projetar e construir um Website
PROJETO DE WEBSITE
1.HIPERTEXTO
É a utilização da HTML como linguagem para desenvolvimento da sua página. Dominá-la é importante para um bom desenvolvimento do seu projeto.
2.WEB DESIGN E VISÃO DO PROJETO
A maioria das pessoas associam Design unicamente ao projeto gráfico de um WebSite, o que é um erro.
O conceito de Web Design envolve todos os aspectos da construção de um site, desde o desenho de sua estrutura de navegação e forma de disponibilização da
informação até o desenvolvimento do projeto gráfico.
A construção de um Website deve, antes de mais nada, ser entendida como um projeto, composto de fases e desenvolvido por pessoas de backgrounds diferentes.
3.CONTEÚDO E FORMA
O que faz uma pessoa entrar em um site?
O faz a pessoa querer retornar?
Estas perguntas devem sempre estar na cabeça das pessoas de uma equipe de construção de sites.
A primeira muito relaciona-se ao público alvo. Para qual tipo de público você está disponibilizando informação? Quais são as prioridades e interesses deste
público? Que tipo de conexão é mais usada por ele?
As respostas para a segunda pergunta certamente envolvem três pontos: o 1º é o conteúdo. É o elemento central. O 2º ponto é o design do site (estrutura de
navegação e projeto gráfico).
Estruturar a informação de forma que a navegação seja o mais intuitiva possível faz com que sua apresentação Web tenha muito mais chance de sucesso, considerando
o tipo de informação disponibilizada conforme seu público alvo. Outro ponto é a atualização para que não perca uma das principais características da Internet: a
dinamicidade.
4.EQUIPE PARA CONSTRUÇÃO DE UM WEBSITE
A construção de um Website exige uma equipe com backgrounds diferentes.
A equipe de profissionais adequada seria composta:
a) Analistas de sistemas (com experiência em gerência de Informação), responsável pela organização da informação;
b) Design Gráfico, responsável pelo projeto gráfico;
c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML, Java, JavaScript, CGI, etc;
d) Assistentes, que auxiliam o trabalho do Analista de sistemas ou do Design Gráfico (ilustradores, digitadores, etc.).
A equipe deverá ter um coordenador, responsável em fazer o trabalho fluir de forma eficiente, dentro de um cronograma aproveitando o máximo de cada profissional.
Depois do site construído surgirá uma outra pessoa: o WebMaster, que será responsável pela administração do site.
É muito haver o acúmulo de funções por membros da equipe. Mas é importante definir o papel de cada na construção do site.
FASES NA CONSTRUÇÃO DE UM WEBSITE
1ª Fase : Organização da Informação
A primeira etapa é a organização da informação que irá compor seu site. O Analista de sistemas deverá colher toda informação e analisa-la, preparando-a para
a etapa seguinte, onde se iniciará o design do site.
Critérios de avaliação das informações:
Qualquer documento pode ser disponibilizado através da Web mas alguns se tornam mais úteis quando adequados as novas características dessa nova mídia. Aqui
estão alguns dos critérios que deverão ser observados para o projeto do site:
1. Material que tire vantagem da estrutura não linear de navegação do hiperdocumento.
Ex.: manuais, guias, grandes bases de dados textuais, etc...;
2. Material que é mais valoroso se atualizado freqüentemente e mais facilmente, ex.: agenda de reuniões, agenda telefônica, calendários, etc ...;
3. Material que possa ser totalmente substituído por uma impressão, ex.: gráficos e textos (imagens de alta qualidade não são recomendáveis);
4. Material que requer intercâmbio de informações, ex.: formulários de pesquisa, fichas de inscrição, etc ...
2ª Fase : Conceituação do site e definição da estrutura de navegação
Normalmente nesta etapa envolve uma ou mais reuniões de criação. Todos os membros da equipe devem participar das reuniões de criação, cujo objetivo é obter
o maior número de idéias possíveis para a criação da estrutura de navegação e do projeto gráfico. O Coordenador da equipe, o Design Gráfico e o Analista de Sistemas,
com suas respectivas visões de projeto, coordenam essas reuniões, para que as sugestões de áreas diferentes possam se integrar. Uma vez discutidas e analisadas todas
as sugestões de áreas diferentes possam se integrar. Uma vez discutidas e analisadas todas as sugestões, pode-se então, criar a estrutura de navegação. Nesta etapa,
desenhar fluxogramas de navegação, mostrando como as páginas estão linkadas (conectadas) entre si, ajudará a Ter uma visão geral do site. No futuro, isso facilitará
também o processo de modificar, acrescentar ou retirar páginas.
3ª Fase: Montagem do Site
Uma vez definida a estrutura de navegação, os membros da equipe poderão então trabalhar cada um em sua área: o Design Gráfico e seus Assistentes desenvolverão
o projeto gráfico, enquanto o Analista de Sistemas e programadores montarão a estrutura de navegação (seja em HTML, Java, JavaScript ou no que tiver sido escolhido
como mais adequado para a construção do site).
4ª Fase: Testes
Antes de ser disponibilizado para o público em geral é importante testar a navegação de todo o site, checando os links de texto e imagens. É importante entrar
no site a partir de várias plataformas e conexões diferentes, para testar a velocidade de carga e consertar falhas de diagramação, que pode mudar, de acordo com
o tamanho de monitor e resolução usada.
DICAS E CONSIDERAÇÕES IMPORTANTES
1. Na criação do projeto gráfico, tente sempre optar por soluções que melhor se adaptem a plataforma mais usada. Por exemplo: monitor 14 polegadas com resolução
de 640x480, faça com a melhor diagramação das páginas aconteça quando o site é visto nesse tipo de monitor e resolução. Caso o seu site deva ser diagramado para
uma resolução ou tamanho de monitor diferentes do mais usado, informe no site.
2. Num projeto gráfico deve sempre se perguntar se sua apresentação ficou adequada ou não ao que seu cliente desejava e ao seu público alvo.
3. Para ter uma garantia que suas imagens serão sempre bem visualizadas, procure trabalhar com imagens paletizadas (formato .gif). O melhor resultado para isso será
trabalhar suas imagens em RGB e depois indexá-las com o menor número de cores possível. Caso precise utilizar imagens True Color, salve-as em formato .jpeg, que
resultará em arquivos pequenos.
4. Sempre indique em que browser sua página será melhor visualizada.
5. A página de entrada de um site é muito importante. Ela deve ser projetada de forma que diga a que o site se destina, seja de forma textual, visual ou estrutural.
6. O conteúdo e forma como ele é apresentado serão os principais atrativos de suas páginas, a não ser que o ponto chave sejam as imagens. Por isso, não pense que
a net é igual a outras mídias.
7. Direitos autorais: A proteção de direitos autorais não costuma ser muito evidente na Web. O desejo original de uma página não é protegido. Mas qualquer texto,
gráfico, vídeo ou áudio originais deve ser protegido. Um link ou URL não é protegido mas uma lista de links(como no caso das bibliotecas virtuais) deve ser protegido
pelos direitos autorais.
8. A netiqueta e Domínio público: A Web foi criada com base em ser capaz de atar links de hipertexto de qualquer outra localização da rede. Consequentemente, quando
você disponibiliza um site, implica em você permitir a outros "linkar" sua página de Web, porém a netiqueta recomenda que se peça permissão aos Webmasters sempre
que possível.
ADMINISTRAÇÃO DE UM SITE
Todo WebSite deve ter um Webmaster, ele é a autoridade máxima no site e coordena tanto seu desenvolvimento quanto sua manutenção além de responder a toda
correspondência enviada ao site. Seu endereço eletrônico deve ser divulgado na primeira página e em todas as outras que exijam um processo interativo.
1. DIVULGAÇÃO
Com o potencial de audiência de milhões encontrados na Internet é necessário utilizarmos todos os recursos disponíveis nesta para conseguirmos atingir uma audiência
chave. As principais formas de divulgação on-line são:
a) E-mail: o envio de propaganda não solicitada pela Internet é uma prática não recomendada.
b) Search engines: as informações de seu site devem ser organizadas da melhor forma possível para a captura pelos inúmeros recursos de busca existentes na rede.
c) Banners: trata-se de uma tarja com informações promocionais sobre seu site que deve aparecer estrategicamente localizada nas páginas de sites que vendem espaço
publicitário. São na verdade imagens clicáveis para o site em promoção.
2. ESTATÍSTICAS
Mostram as páginas mais visitadas, horários mais visitados, dias mais visitados, etc. Assim é possível definir o perfil do usuário e desta forma atualizar o site
de forma a atrair sempre o maior número de visitantes.
3. CHECAGEM DE LINKS
É importante estabelecermos uma rotina periódica tanto para checagem dos links internos de sua página quanto para os externos. Essa rotina pode ser manual ou automatizada
dependendo do tamanho de seu site. Existem softwares específicos para essa tarefa.
4. ORGANIZAÇÃO DE ARQUIVOS E DIRETÓRIOS
Os diretórios devem ser estruturados de acordo com a própria estruturação da informação. Se as informações estão estruturadas por módulos e submódulos estas gerarão
diretórios e subdiretórios. Em um ambiente Unix o arquivo principal de cada módulo deve ser sempre chamado de "index.html", inclusive o arquivo correspondente a
primeira página do site (home). Isto, porque, quando chamarmos o endereço da página não precisaremos escrever o nome do arquivo. O sistema assume o arquivo "index.html"
como "default" para a página principal. Os arquivos e diretórios devem ter nomes que identifiquem seu conteúdo e as imagens devem ser colocadas em um diretório
específico. A cada nova atualização uma cópia backup da versão anterior de cada arquivo atualizado deve ser feita.
EXERCÍCIO
1. O que é um WebDesign?
2. Quais as principais preocupações no projeto de um WebSite?
3. Quais seriam os profissionais indicados para se compor uma equipe para projetar e construir um site?
4. Quais as fases na construção de um site? Dê as características e faça observações suas para cada uma.
5. Qual o melhor formato de arquivo para se trabalhar com imagens?
6. Quem é responsável pela administração e atualização de um site?
7. Quais as formas de divulgação de um site?
ANOTAÇÕES
AG8 Informática
22
3ª PARTE
CAPÍTULO 05
Este capítulo abrangerá :
1. Uma linguagem de marcação: HTML.
2. Tags ou comandos
3. Elementos que compõem uma página HTML
HTML: UMA LINGUAGEM DE MARCAÇÃO
A HTML é uma linguagem de marcação. Criar um documento em uma linguagem de marcação significa que você começa com o texto da sua página e inclui tags especiais
no início e no final de determinadas palavras ou parágrafos.
As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador.
Os arquivos recebem a extensão .html e possuem como ícone a seguinte imagem:
O ícone a esquerda pertence ao Netscape e o a direita ao Internet Explorer 5.
A primeira página a ser exibida geralmente recebe o nome de index.htm ou .html, dependendo do provedor que hospeda a página.
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As tags são identificadas por estarem entre os
sinais < > e < / >.
Entre os sinais < > são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se
a barra de divisão /, indicando que a tag está finalizando a marcação de um texto.
O formato genérico de uma tag é:
texto
Mas algumas tags não possuem finalização.
Vejamos agora alguns comandos e o tipo de efeito que estes causam ao texto quando interpretados pelo browser.
Assim como outras linguagens, a HTML possui uma estrutura básica para seus programas. Para que um browser interprete corretamente o programa, ele deve possuir
alguns comandos básicos que sempre deverão estar presentes. Alguns browsers até dispensam seu uso, porém é melhor assumir como parte fundamental do programa tais
comandos.
Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o corpo do programa. Todo programa deve iniciar com o comando, tag,
e ser encerrado com o comando . Esse par de comandos é essencial. A área de cabeçalho é opcional e é delimitada pelo par de comandos e . Estes
comandos para cabeçalho são usados para especificar alguns poucos comandos da linguagem. Eles são opcionais, ou seja, um programa HTML pode funcionar sem eles. Mas
é conveniente usá-los, pois o título da página é acrescentado através deles.E ainda temos as tags e , estes comandos delimitam o texto que irá aparecer
na barra de título do browser.
A maioria dos comandos será especificado no corpo do programa que é delimitado pelas tags e . É um comando obrigatório.
Esta tag marca o início do programa HTML
Esta tag marca início e fim de cabeçalho
Esta tag delimita o texto que irá ser visualizado na barra de título do browser.
Esta tag delimita o corpo do programa, aonde a maior parte do comando serão colocados
1. OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTML
Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela. Todos esses
elementos são posicionados na página por meio de comandos específicos da linguagem.
TÍTULO
É o texto que aparece na barra de título do browser.
IMAGEM
São figuras, desenhos e fotos usados para ilustrar a página.
TEXTO
É a informação mais comum dentro da página. Pode ser formatado através de vários comandos.
LINK
É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra região da página
atual ou uma página localizada em qualquer lugar da Internet. Uma figura também pode ser usada como um link, ou seja, clicando na figura saltamos para outro local.
CABEÇALHO
São linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabeçalho.
2. TÍTULO
O título de uma página web indica qual o assunto abordado e irá aparecer na barra de título do browser. Este título é utilizado por programas de lista (hotlist)
do seu navegador e também por outros programas que catalogam páginas da Internet. Para atribuir um título a página você deverá utilizar a tag:
.
Esta tag sempre será incluída no cabeçalho (entre as tags e descrevem a mesma).
Considerações sobre o título:
1. Você poderá ter apenas um título
2. texto deverá ser simples e não poderá ter outras tags
3. Escolha um texto curto e que descreva o conteúdo da página
3. CABEÇALHOS
Os cabeçalhos são usados para dividir seções do texto, como capítulos de um livro. A HTML divide seis tamanhos de cabeçalhos, de H1 a H6, que aplicam um
tamanho de fonte diferenciado no texto que envolvem, uma linha antes e depois e além disso dão um efeito de negrito. O maior tamanho é o H1 e o menor é o H6.
Texto
Experimente o seguinte código: