Baixar

Transcrição

Baixar

APOSTILA 2016
LINGUAGEM DE PROGRAMAÇÃO
PROFESSOR: ALEXANDRE
SUMÁRIO .......................................................................... ERRO! INDICADOR NÃO DEFINIDO.
EMENTA .......................................................................................................................................9
1 - INTRODUÇÃO ......................................................................................................................10
1.1
INTERNET......................................................................................................................10
1.1.1
O QUE É A INTERNET? ................................................................................................10
1.1.2
HISTÓRICO DA INTERNET ............................................................................................10
1.1.3
COMO FUNCIONA A INTERNET .....................................................................................11
1.1.4
A INTERNET NO BRASIL ..............................................................................................12
1.2
ADMINISTRAÇÃO DA INTERNET ........................................................................................13
1.2.1
NO MUNDO ...............................................................................................................14
1.2.2
NO BRASIL ................................................................................................................14
1.3
QUEM CONTROLA A INTERNET? ......................................................................................15
2 - DOMÍNIO ...............................................................................................................................16
2.1
O QUE É UM DOMÍNIO? ...................................................................................................16
2.2.1
NÃO POSSUO SERVIDORES DNS, O QUE DEVO FAZER?.................................................17
2.2.2
VERIFIQUEI QUE UM DOMÍNIO NÃO ESTÁ SENDO UTILIZADO, POSSO REGISTRÁ-LO? ..........17
2.3.1
POSSO
REGISTRAR QUALQUER NOME OU TEM QUE SER A RAZÃO SOCIAL DA MINHA
EMPRESA OU MINHA MARCA REGISTRADA? .................................................................................. 17
2.3.2
POSSO REGISTRAR MINHA_CIDADE.GOV.BR? ............................................................17
2.3.3
POSSO REGISTRAR MINHA_EMPRESA.NET.BR ? .........................................................18
2.3.4
SE EU REGISTRAR UM NOME EM UMA CATEGORIA, OUTRA EMPRESA PODE REGISTRAR ....18
O MESMO NOME EM OUTRA CATEGORIA? ..................................................................................... 18
2.3.5
2.4
2.4.1
2.5
QUANTO TEMPO DEMORA EM SE OBTER O REGISTRO DE UM DOMÍNIO ? ..........................18
COMO FAÇO PARA SABER SE MEU REGISTRO DE DOMÍNIO FOI ACEITO? ..............................18
POR QUE MEU TICKET AINDA NÃO VIROU DOMÍNIO? .......................................................18
ESTOU TENTANDO REGISTRAR UM DOMÍNIO COM AS MESMAS MÁQUINAS DNS QUE UTILIZO EM
OUTRO DOMÍNIO JÁ REGISTRADO, PORÉM O SISTEMA DEVOLVE UM ERRO O QUE FAZER? .................19
2.5.1
JÁ TENHO UM OU MAIS DOMÍNIOS REGISTRADOS. COMO FAÇO PARA REGISTRAR OUTRO? 19
2.5.2
POSSO REGISTRAR QUALQUER NOME COMO UM DOMÍNIO .EDU.BR? ............................19
2.6
ANATOMIA DE UM URL ...................................................................................................19
2.6.1
HTTP:// ......................................................................................................................20
2.6.2
WWW ........................................................................................................................20
2.6.3
MAGNET ....................................................................................................................20
2.6.4
COM.......................................................................................................................... 20
2.6.7
EXEMPLO.HTM ...........................................................................................................21
2.7
TOP-LEVEL DOMAINS – DOMÍNIOS DE PRIMEIRO NÍVEL – DPN´S ......................................21
Linguagem de Programação – 3º PD
2.7.1
2.8
2.9
DICAS E REGRAS PARA O REGISTRO DE UM DOMÍNIO .................................................... 21
DEFINIÇÕES ................................................................................................................. 23
WEB DESIGNER ........................................................................................................... 24
2.9.1
RAIO X ..................................................................................................................... 24
2.9.2
CONHECIMENTOS ÚTEIS ............................................................................................ 24
2.9.2.1
SOFTWARE’S ............................................................................................................ 24
2.9.2.3
O NOVO PAPEL DO W EBDESIGNER.............................................................................. 25
2.9.3
O CLIENTE ................................................................................................................ 26
2.10
QUAIS OS PASSOS PARA O DESENVOLVIMENTO DE UM NOVO PROJETO? ...... 28
2.11
DEFINIÇÃO DO CONCEITO .............................................................................................. 28
2.11.1
PESQUISA ................................................................................................................ 28
2.11.2
ORGANIZAÇÃO .......................................................................................................... 28
2.11.3
PADRÃO DAS PÁGINAS ............................................................................................... 29
2.11.4
DESIGN .................................................................................................................... 29
2.11.5
CRIAÇÃO DO HTML .................................................................................................. 29
2.11.6
PROGRAMAÇÃO ........................................................................................................ 29
2.11.7
QUE POSSO FAZER PARA TORNAR MEU SITE MAIS MOVIMENTADO? ............ 29
2.11.8
ATUALIZE O CONTEÚDO ............................................................................................. 30
2.11.9
CUIDE DA PRIMEIRA TELA ........................................................................................... 30
2.11.10
TRABALHE COM INTERAÇÃO ................................................................................... 30
2.11.11
NAVEGAÇÃO ......................................................................................................... 30
2.11.12
GRÁFICOS PEQUENOS ........................................................................................... 30
2.11.13
NADA É ÓBVIO....................................................................................................... 31
2.11.14
FEEDBACK ............................................................................................................ 31
2.12
CUIDANDO DO SEU SERVIDOR ........................................................................................ 31
2.12.1
USE UM VERIFICADOR DE HTML ................................................................................ 31
2.12.2
RESPEITE O COPYRIGHT ............................................................................................ 31
2.12.3
CONHEÇA SEU SITE ................................................................................................... 32
2.12.4
DEFINA OS PADRÕES ................................................................................................. 33
2.12.5
MANTENHA E USE ESTATÍSTICA .................................................................................. 33
2.12.6
FACILITE A NAVEGAÇÃO ............................................................................................. 33
2.12.7
CRIE ÍNDICES ............................................................................................................ 34
2.12.8
PROMOVA A INFORMAÇÃO.......................................................................................... 34
2.12.9
COLOQUE MUITOS LINKS ............................................................................................ 34
2.12.10
SUPORTE A VÁRIOS BROWSERS.............................................................................. 35
2.12.11
TENHA UMA PARTE GRÁFICA EFICIENTE ................................................................... 35
2.12.12
PONHA O LINK PARA O W EBDESIGNER .....................................................................35
2.12.13
CRIE UMA BOA ESTRUTURA DE DIRETÓRIOS .............................................................35
2.12.14
MANTENHA SEUS LINKS ..........................................................................................36
2.13
COMO POSSO FAZER PROPAGANDA DO MEU SITE? ...........................................................36
2.14
O AMBIENTE NO FUTURO ................................................................................................36
3 - E – COMMERCE ...................................................................................................................39
3.1
DEFINIÇÃO .................................................................................................................39
3.2
COMO VENDER?............................................................................................................39
3.2.1
COMO COBRAR? .......................................................................................................40
3.2.2
REGRAS DO JOGO .....................................................................................................40
4 - HTML .....................................................................................................................................41
4.2
INICIANDO UM DOCUMENTO ............................................................................................42
4.2.1
TAGS USADOS NO INÍCIO DO DOCUMENTO ......................................................42
4.2.2
TÍTULOS E SUB-TÍTULOS .............................................................................................43
4.2.3
QUEBRA DE PARÁGRAFO E DE LINHA ...........................................................................45
4.2.4
FORMATAÇÃO DE TEXTOS...........................................................................................45
4.2.5
FORMATANDO FONTE.................................................................................................46
4.2.6
O CORPO DA PÁGINA .................................................................................................49
4.2.7
LINHA HORIZONTAL ....................................................................................................52
4.2.8
TEXTO PRÉ-FORMATADO E LONGAS CITAÇÕES ...........................................................52
5 - MULTIMÍDIA..........................................................................................................................54
5.1
IMAGENS .......................................................................................................................54
5.2.2
USANDO O COMANDO EMBED PARA INSERIR VÍDEOS....................................................56
5.2.3
O COMANDO NOEMBED ..............................................................................................58
5.3
MÚSICA ........................................................................................................................58
5.4
GRÁFICOS PARA A W EB .................................................................................................58
5.4.1
VETORES X MAPAS DE BITS ........................................................................................59
5.4.2
TAMANHO DO ARQUIVO ..............................................................................................59
5.4.3
CORES......................................................................................................................60
5.4.4
PALETTES .................................................................................................................60
5.4.4.1
A PALETTE DOS BROWSERS ........................................................................................61
5.4.5
GIF ..........................................................................................................................62
5.4.6
JPEG .......................................................................................................................62
5.4.7
FERRAMENTAS PARA COMPRESSÃO ............................................................................62
5.4.8
CONCLUSÃO..............................................................................................................63
5.5
O COMANDO MAERQUEE ...............................................................................................63
5.6
DICAS .......................................................................................................................... 65
5.7
CRIANDO LISTAS ORDENADAS ....................................................................................... 66
5.7.1
CRIANDO LISTAS NÃO ORDENADAS ............................................................................ 67
5.7.2
ATRIBUTOS ADICIONAIS DO ELEMENTO UL.................................................................. 67
5.8
LINKS ........................................................................................................................... 68
5.8.3
5.9
LINKS RELATIVOS E LINKS ABSOLUTOS ....................................................................... 71
TABELAS ...................................................................................................................... 71
5.9.1
CONSTRUINDO TABELAS COM O ELEMENTO TABLE ...................................................... 74
5.9.2
O TÍTULO DA TABELA (ELEMENTO CAPTION) ............................................................... 74
5.9.3
TABLE HEADINGS (ELEMENTO TH) ............................................................................. 74
5.9.4
TABLE DATA (ELEMENTO TD) .................................................................................... 75
5.9.5
END OF TABLE ROW (ELEMENTO TR) ........................................................................ 75
5.9.6
ATRIBUTOS PARA A TABELA ....................................................................................... 75
5.9.7
BORDER ................................................................................................................... 75
5.9.8
ALIGN ...................................................................................................................... 77
5.9.9
VALIGN..................................................................................................................... 78
5.10
O COMANDO META ....................................................................................................... 78
5.10.1
DOCUMENTOS DINÂMICOS ......................................................................................... 79
5.10.2
CARREGANDO OUTRO DOCUMENTO AUTOMATICAMENTE ............................................. 80
5.11
MECANISMOS DE BUSCA DA INTERNET E O COMANDO META ............................................ 80
5.12
FORMULÁRIOS .............................................................................................................. 80
5.12.1
CONSTRUINDO FORMULÁRIOS COM O FORM ............................................................... 81
5.12.2.
ATRIBUTOS PARA O FORM ......................................................................................... 81
5.12.2.1
GET ..................................................................................................................... 81
5.12.2.2
POST ................................................................................................................... 81
5.12.2.3
INPUT ................................................................................................................... 82
5.13
TIPOS DE ELEMENTOS TYPE .......................................................................................... 82
5.13.1
TYPE="RADIO" ......................................................................................................... 83
5.13.2
TYPE="PASSWORD" .................................................................................................. 83
5.13.3
TYPE="CHECKBOX" .................................................................................................. 83
5.13.4
TYPE="SUBMIT" ........................................................................................................ 84
5.13.5
TYPE="RESET" ......................................................................................................... 84
5.14
TEXTAREA .................................................................................................................... 84
5.15
SELECT ........................................................................................................................ 85
5.16
EXEMPLO COMPLETO .................................................................................................... 85
5.17
FRAMES ....................................................................................................................... 86
5.17.1
ESTRUTURA .............................................................................................................. 87
5.17.2
SINTAXE ................................................................................................................... 87
5.17.3
FRAMESET ................................................................................................................87
5.17.4
ROWS .......................................................................................................................87
5.17.5
COLS ........................................................................................................................88
5.18
FRAME..........................................................................................................................88
5.18.1
SRC .........................................................................................................................88
5.18.3
SCROLLING ...............................................................................................................89
5.18.4
NORESIZE .................................................................................................................89
5.18.5
TARGET ....................................................................................................................90
5.18.6
BORDER ...................................................................................................................91
5.19
HOSPEDAGEM ...............................................................................................................91
6 - ANEXO A ..............................................................................................................................93
6.1
LINKS RECOMENDADOS .................................................................................................93
6.1.1
E-COMMERCE NO BRASIL ...........................................................................................93
6.1.2
TUTORIAIS DIVERSOS .................................................................................................93
6.1.3
DICAS DE CGI ...........................................................................................................94
6.1.3
DICAS DA TAG <META> ...........................................................................................94
7 - DREAMWEAVER ..................................................................................................................94
7.1.1.
CONSIDERAÇÕES GERAIS ..........................................................................................95
7.1.2.
REQUISITOS DO SISTEMA ............................................................................................95
7.2.
VISÃO GERAL ................................................................................................................96
7.3.
PERSONALIZAÇÃO DO DREAMWEAVER ............................................................................99
7.3.1.
GENERAL ................................................................................................................ 100
7.3.2.
ACCESSIBILITY ........................................................................................................ 101
7.3.3.
CODE COLORING ..................................................................................................... 102
7.3.4.
CODE HINTS............................................................................................................ 102
7.3.5.
CODE REWRITING .................................................................................................... 103
7.3.6.
FILE TYPE/EDITORS ................................................................................................. 104
7.3.7.
FONTS .................................................................................................................... 104
7.3.8.
HIGHLIGHTING ......................................................................................................... 105
7.3.9.
INVISIBLE ELEMENTS ................................................................................................ 105
7.3.10.
PANELS .................................................................................................................. 106
7.3.11.
PREVIEW IN BROWSER ............................................................................................. 107
7.3.12.
STATUS BAR .......................................................................................................... 107
7.4.
CONFIGURAÇÃO DE UM SITE ......................................................................................... 107
7.4.1.
MODO BÁSICO - BASIC ............................................................................................. 108
7.4.2.
MODO AVANÇADO – ADVANCED ............................................................................... 110
7.4.3.
BACKUP DAS CONFIGURAÇÕES ................................................................................. 111
7.5.
LAYOUT ...................................................................................................................... 112
7.5.1.
PROPRIEDADES DA PÁGINA ...................................................................................... 114
7.5.2.
INSERÇÃO DE ELEMENTOS NA PÁGINA ....................................................................... 116
BARRAS DE FERRAMENTAS ..................................................................................................... 116
7.5.2.1.
COMMON ............................................................................................................ 116
7.5.2.2.
FORMS ............................................................................................................... 117
7.5.2.3.
LAYOUT .............................................................................................................. 118
7.5.2.4.
TEXT .................................................................................................................. 118
7.5.2.5.
HTML ................................................................................................................ 118
7.5.2.6.
APPLICATION ...................................................................................................... 119
7.5.2.7.
TEXTO................................................................................................................ 119
7.5.2.8.
EDIÇÃO DE IMAGENS EM FIREWORKS .................................................................... 120
7.5.2.9.
COMUNS ............................................................................................................ 120
ROLLOVER ............................................................................................................................. 120
IMAGENS ................................................................................................................................ 121
7.6.
TABELAS .................................................................................................................... 125
7.6.1.
LAYOUT VIEW ......................................................................................................... 127
7.6.2.
ORDENAR DADOS NUMA TABELAS ............................................................................. 127
7.7.
IMAGE TRACING / IMAGEM DE “DECALQUE”................................................................... 128
7.8.
TEMPLATES / MODELOS............................................................................................... 130
7.9.
LYBRARIES ................................................................................................................. 131
7.10.
FRAMES / MOLDURAS .............................................................................................. 132
7.10.1.
IFRAMES
7.11.
FORMULÁRIOS ........................................................................................................ 135
7.11.1.
VALIDAR UM FORMULÁRIO ........................................................................................ 138
7.11.2.
EXERCÍCIO - HELP EM FORMULÁRIOS ........................................................................ 139
7.12.
LAYERS / CAMADAS................................................................................................. 140
7.13.
ADICIONAR ELEMENTOS DE MEDIA (VIDEO E SOM)...................................................... 141
7.13.1.
VIDEO .................................................................................................................... 141
7.13.2.
SOM....................................................................................................................... 143
7.14.
TIMELINE / LINHA DE TEMPO ..................................................................................... 144
7.14.1.
EXERCÍCIO - ACÇÃO ONKEYPRESS .......................................................................... 146
7.15.
CSS - CASCADING STYLE SHEET ............................................................................. 146
7.16.
CONFIGURAÇÃO DE UM SITE COM PROGRAMAÇÃO ..................................................... 149
7.16.1.
LIGAÇÃO A UMA BASE DE DADOS .............................................................................. 151
7.16.2.
PÁGINA DE VISUALIZAÇÃO DE DADOS ........................................................................ 154
7.16.3.
PÁGINA DE INSERÇÃO DE DADOS .............................................................................. 156
7.16.4.
PÁGINA DE EDIÇÃO DE DADOS .................................................................................. 156
................................................................................................................ 134
Ementa
Informação na World Wide Web: páginas HTML; Planejamento e criação de um site; Ferramentas
de desenvolvimento; Editoração de documentos hipertexto; Ferramentas gráficas e manipulação
de imagens, áudio e vídeo; Recursos avançados de HTML; Técnicas de acesso a Banco de
Dados; Técnicas de Web Design; Tecnologias de Web Sites Interativos; Princípios da modalidade
de Comércio Eletrônico.
Linguagem de Programação – 3º PD - 2014
9
1 - Introdução
1.1
Internet
1.1.1
O que é a Internet?
A Internet é um conjunto de redes de computadores interligadas pelo mundo inteiro, que têm em
comum um conjunto de protocolos e serviços, de forma que os usuários a ela conectados podem
usufruir os serviços de informação e comunicação de alcance mundial.
1.1.2
Histórico da Internet
A Internet surgiu a partir de um projeto da agência norte-americana ARPA (Advenced Research
and Projects Agency) com o objetivo de conectar os computadores dos seus departamentos de
pesquisa. Essa conexão iniciou-se em 1969, entre 4 localidades (Universidades da Califórnia de
Los Angeles e Santa Barbara, Universidade de Utah e Instituto de Pesquisa de Stanford), e
passou a ser conhecida como a ARPANET.
Esse projeto inicial foi colocado à disposição de pesquisadores, o que resultou em uma intensa
atividade de pesquisa durante a década de 70, cujo principal resultado foi à concepção do
conjunto de protocolos que até hoje é a base da Internet, conhecido como TCP/IP.
No início da década de 80 a ARPA iniciou a integração das redes de computadores dos outros
centros de pesquisa à ARPANET; nessa mesma época foi feita na Universidade da Califórnia de
Berkeley, a implantação dos protocolos TCP/IP no Sistema Operacional UNIX, o que possibilitou
a integração de várias universidades à ARPANET.
Em
1985,
a
entidade
americana
NSF
(Nacional
Science
Foundation)
interligou
os
supercomputadores de seus centros de pesquisa, o que resultou na rede conhecida como
NSFNET, que em 1986 foi conectada a ARPANET; o conjunto de todos os computadores e redes
ligados a esses dois backbones (espinhas dorsais de uma rede) passou a ser conhecido
oficialmente como INTERNET.
10
Em 1988 a NSFNET passou a ser mantida com o apoio das organizações IBM, MCI (empresa de
telecomunicações) e MERIT (instituição responsável por uma rede de computadores de
instituições educacionais de Michigan), que formaram uma associação conhecida como ANS
(Advanced Network and Services).
Em 1990 o backbone ARPANET foi desativado, criando-se em seu lugar o backbone DRI
(Defense Research Internet); em 1991/1992 a ANS desenvolveu um novo backbone, conhecido
como ANSNET, que passou a ser o backbone principal da Internet; nessa mesma época iniciou-se
o desenvolvimento de um backbone europeu (EBONE), interligando alguns países da Europa à
Internet.
A partir de 1993 a Internet deixou de ser uma instituição de natureza apenas acadêmica e passou
a ser explorada comercialmente, tanto para construção de novos backbones por empresas
privadas (PSI, UUnet, Sprint,...) como para fortalecimento de serviços diversos, abertura essa a
nível mundial.
1.1.3
Como Funciona a Internet
Para que uma rede exista é preciso que muitos computadores possam ser interligados ao mesmo
tempo. É preciso instalar em cada computador um dispositivo chamado placa de rede. Ela
permitirá que muitos computadores sejam interligados simultaneamente, formando o que se
chama de uma rede local, ou LAN (do inglês Local Área Network). Se essa LAN for ligada à
Internet, todos os computadores conectados à LAN poderão ter acesso à Internet. É assim que
muitas empresas proporcionam acesso à Internet a seus funcionários.
Uma rede é formada por vários computadores interligados dentro de um estabelecimento (cidade,
estado).
A INTERNET é a "rede das redes". Ela é composta de pequenas redes locais (LANS), redes
estaduais e enormes redes nacionais que conectam computadores de diversas organizações
mundo afora.
Essas redes estão interligadas de diversas formas, desde uma simples linha telefônica discada até
malhas de fibras óticas. Estar na INTERNET significa participar de uma rede interconectada.
11
As redes que formam a Internet são Interligadas por outras redes de alta capacidade, chamadas
backbones (espinha dorsal). Os backbones são poderosos computadores conectados por linhas
de grande largura de banda como canais de fibra óptica, elos de satélite e elos de transmissão por
rádio.
Como já vimos, a Internet surgiu a partir da criação do backbone original, o ARPAnet, um projeto
militar para intercâmbio de informações estratégicas financiado pelo governo americano. Ao longo
dos anos a Internet passou por várias etapas, transformando-se numa rede de pesquisa
acadêmica e, finalmente, na grande rede que é.
A melhor forma de entender a Internet é pensar nela não como uma rede de computadores, mas
como uma rede de redes. Sendo assim, a Internet não tem um dono ou uma empresa
encarregada de administrá-la. A instituição que mais se aproxima de uma administração central é
a Internet Society. Trata –se de uma entidade que se baseia no trabalho voluntário de seus
integrantes com o objetivo de exercer o mínimo controle necessário para manter a Internet em
funcionamento.
O princípio básico de uma rede é a capacidade de "comunicação" entre dois computadores. Para
isso, utilizam-se protocolos, regras ou convenções que regem essa comunicação. Para que a
comunicação se efetive, dois computadores devem utilizar o mesmo protocolo, simultaneamente.
TCP/IP (Trasmission Control Protocol / INTERNET Protocol) é a família de protocolos da
INTERNET, desenvolvida nos anos 70 e utilizada pela primeira vez em 1983.É considerado um
protocolo aberto e "sem dono". O que significa dizer que não é produto de empresa nenhuma
específica.
Cada vez que ocorre uma transferência, o protocolo age quebrando a informação, formando
diversos pacotes e roteadores, que estão programados para enviá-los corretamente ao seu
destino.
As redes de nível captam o tráfego nos "Backbones” (redes de alta velocidade) e o distribuem para
suas próprias redes e vice-versa.
1.1.4
A Internet no Brasil
A Internet chegou ao Brasil em 1988 por iniciativa da comunidade acadêmica de São Paulo
(FAPESP - Fundação de Amparo à Pesquisa do Estado de São Paulo) e Rio de Janeiro (UFRJ -
12
Universidade Federal do Rio de Janeiro e LNCC - Laboratório Nacional de Computação
Científica).
Em 1989 foi criada, pelo Ministério de Ciência e Tecnologia, a Rede Nacional de Pesquisas (RNP),
uma instituição com o objetivo de iniciar e coordenar a disponibilização de serviços de acesso à
Internet no Brasil; como ponto de partida foi criado um backbone conhecido como o backbone
RNP, interligando instituições educacionais à Internet.
Esse backbone inicialmente interligava 11 estados a partir de Pontos de Presença (POP - Point of
Presence) em suas capitais; ligados a esses pontos foram criados alguns backbones regionais, a
fim de integrar instituições de outras cidades à Internet; como exemplos desses backbones temos
em São Paulo a ANSP (Academic Network at São Paulo) e no Rio de Janeiro a Rede Rio.
A exploração comercial da Internet foi iniciada em dezembro/1994 a partir de um projeto-piloto da
Embratel, onde foram permitidos acessos à Internet inicialmente através de linhas discadas, e
posteriormente (Abril/1995) através de acessos dedicadas via RENPAC ou linhas E1.
Em paralelo a isso, a partir de abril/1995 foi iniciado pela RNP um processo para a implantação
comercial da Internet no Brasil, com uma série de etapas, entre as quais a ampliação do backbone
RNP no que se refere à velocidade e número de POP's, a fim de suportar o tráfego comercial de
futuras redes conectadas a esses POP's; esse backbone a partir de então passou a se chamar
Internet/BR.
Uma primeira etapa de expansão desse backbone foi concluída em dezembro/1995, restando
ainda a criação de POP's em mais estados; além disso, algumas empresas (IBM, UNISYS, Banco
Rural) anunciam ainda para este ano (1996) a inauguração de backbones próprios.
1.2
Administração da Internet
Para que não seja um monopólio, a Internet pertence a várias empresas e a vários países onde as
diferentes partes pertencem a organizações diversas sendo que a rede em conjunto não pertence
a ninguém.
Por ser basicamente auto-regulada em conjunto, a Internet absorveu ao longo dos anos, regras e
regulamentos introduzidos pela INTERNET SOCIETY, constituição esta criada para estudo de
questões relacionadas à Internet. Estes regulamentos e regras são simples e não obrigatórios por
surgirem apenas um senso comum para impedir que os recursos da Internet sejam desperdiçados
e respeitados para melhor convívio entre os internautas.
13
Criada através de uma iniciativa não comercial, visando exclusivamente fins de segurança,
educação e pesquisa a Internet possui a INTERNET NETWORK INFORMATION CENTER
(INTERNIC), que funciona como central de registros para novos endereços, pois, a demanda e o
interesse por acessos comerciais é cada vez maior tanto para uso pessoal ou corporativo.
Em todo os continentes existem empresas que fornecem acessos comerciais a Internet e que são
denominadas INTERNET SEVICE PROVIDERS que são as conhecidas provedoras de serviços da
Internet. A primeira empresa, provedora de serviços da Internet do Brasil é a EMBRATEL até que
seja quebrado o monopólio das telecomunicações no país.
Conectar-se a Internet não é tão burocrático desde que se entre em contato com uma instituição
provedora de acesso onde no país existe a rede acadêmica (que é a pioneira), coordenada pela
RNP e a rede comercial, coordenada pela Embratel.
1.2.1
No Mundo
Tanto a administração quanto à operação da Internet são descentralizadas, sendo que apenas
algumas tarefas não o são, tais como a coordenação das pesquisas e padrões para
funcionamento da rede, e distribuição de endereços e registros de domínios para interligação a
essa rede.
As principais instituições responsáveis por essas tarefas são:
- The Internet Society (ISOC)
- The Internet Architecture Board (IAB)
- The Internet Research Task Force (IRTF)
- The Internet Engineering Task Force (IETF)
- The Internet Network Information Center (InterNIC)
- The Internet Assigned Numbers Authority (IANA)
1.2.2
No Brasil
No Brasil, a instância máxima conclusiva é o Comitê Gestor Internet; criado em junho/1995 por
iniciativa dos Ministérios das Comunicações e da Ciência e Tecnologia, é composto por membros
desses ministérios e representantes de instituições comerciais e acadêmicas, e tem como objetivo
a coordenação da implantação do acesso à Internet no Brasil.
14
Em nível de redes, a RNP administra o backbone Internet/BR, através do Centro de Operações da
Internet/BR; as redes ligadas a esse backbone são administradas por instituições locais, por
exemplo, a FAPESP, em São Paulo.
Ligado a RNP existe ainda o Centro de Informações da Internet/BR, cujo objetivo principal é o de
coletar e disponibilizar informações e produtos de domínio público, a fim de auxiliar a implantação
e conexão à Internet de redes locais.
1.3
Quem controla a Internet?
Pessoas. Este é o termo ideal neste caso. A Internet parece ser ao mesmo tempo institucional e
antiinstucional, geral e pessoal, organizada e caótica. De certa forma, a Internet é um esforço
cooperativista, com suas redes integrantes contribuindo com recursos financeiros, equipamentos,
manutenção e experiência técnica. O governo norte-americano exerce uma grande influência
sobre as partes da Internet patrocinadas por fundos federais. A NSF, por exemplo, fornece fundos
para apoiar a formação de redes acadêmicas e de pesquisa. A NSF forneceu fundos para a
formação da NSFNET, a rede central de distribuição nos Estados Unidos que estabelece a
conexão entre as redes de nível médio, que, por sua vez, fazem a conexão entre universidades e
outras organizações.
A coordenação técnica na Internet é harmoniosa. Por exemplo, a operação e o gerenciamento
técnicos da rede central NSFNET são feitos pela ANS (Advanced network & Sevices, Inc.), uma
empresa fundada em conjunto pelas empresas Meritm, Inc., IBM Corporation e MCI
Comunications & Corporations. Além disso, o desenvolvimento e o aperfeiçoamento dos
protocolos TCP/IP são sancionados pela Internet Society.
A EINet (Enterprise Intergration Network), utiliza a rede central nacional da UUNET - Alternet para oferecer serviços de aprimoramento e uma infra-estrutura de ligação entre redes dedicada
exclusivamente ao suporte a aplicações profissionais e comerciais.
15
2 - Domínio
2.1
O que é um domínio?
É um nome que serve para localizar e identificar conjuntos de computadores na Internet. O nome
de domínio foi concebido com o objetivo de facilitar a memorização dos endereços de
computadores na Internet. Sem ele, teríamos que memorizar uma seqüência grande de números.
2.1.1
Quem pode registrar um domínio?
Qualquer entidade legalmente estabelecida no Brasil como pessoa jurídica (instituições) ou física
(Profissionais Liberais e pessoas físicas) que possua um contato em território nacional.
Empresas estrangeiras que possuam um procurador legalmente estabelecido no Brasil, de acordo
com as regras descritas em: "Procedimentos para registro de estrangeiros".
2.1.2
Por que preciso registrar meu domínio no Registro.br ?
Domínios
que
não
estão
registrados,
não
podem
ser
encontrados
na
Internet;
Todos os domínios na Internet com extensão .BR são registrados, exclusivamente, no Registro.br.
2.1.3
Como faço para reservar um domínio?
Nenhum usuário do sistema de registro pode reservar um domínio. Reservas de domínios são
prerrogativas exclusivas do Comitê Gestor, de acordo com a regulamentação vigente: resoluções
número [1] e [2] e seus anexos [I] e [II].
2.1.3
Eu preciso de um provedor para registrar um domínio?
O que você precisa na verdade são dois servidores DNS já configurados para o seu domínio. Em
geral quem lhe fornecerá isto será o seu provedor de hospedagem, caso você não tenha infraestrutura própria.
16
Você pode solicitar o registro de seu domínio sem informar os nomes dos servidores DNS de
imediato. Você terá duas semanas, contados a partir da data de envio do formulário, para fornecer
ao menos dois servidores DNS configurados para o domínio.
2.1.4
Para que servem os servidores DNS?
O servidor DNS será o equipamento responsável por permitir que as demais máquinas conectadas
a Internet consigam acesso às máquinas de seu domínio. Sem um servidor DNS corretamente
configurado, o seu domínio não estará ativo na Internet.
2.2.1
Não possuo servidores DNS, o que devo fazer?
Se você não possui infra-estrutura própria, procure os serviços de um provedor de hospedagem.
Existem listas de provedores de hospedagem disponíveis no Yahoo e Cadê.
2.2.2
Verifiquei que um domínio não está sendo utilizado, posso registrá-lo?
Para caracterizar que um domínio está sendo utilizado, não existe a necessidade que o mesmo
possua páginas www; um domínio pode ser registrado somente para utilização com fins de correio
eletrônico. Nenhum domínio que já esteja registrado poderá ser solicitado. Somente podem ser
registrados domínios, cuja pesquisa, resultar em "domínio inexistente" ou em informações sobre
tickets ativos (com pendências).
2.3.1
Posso registrar qualquer nome ou tem que ser a razão social da minha empresa ou
minha marca registrada?
Pode-se registrar qualquer nome desde que a Pesquisa resulte "Domínio Inexistente" ou em
informações sobre tickets ativos (com pendências). Atenção: Não deixe de verificar as condições
do acordo do registro .br
2.3.2
Posso registrar minha_cidade.GOV.BR?
Não. Entidades dos governos estaduais e municipais registram-se abaixo de XX.GOV.BR, onde
XX é a sigla do seu estado. Consulte quais são os contatos responsáveis pelo registro em cada
um dos estados, através do sistema de pesquisa, executando para o domínio XX.GOV.BR. Envie
o pedido do registro para os responsáveis listados. Exemplo: Se for órgão do município de São
Paulo, consulte: SP.GOV.BR
17
2.3.3
Posso registrar minha_empresa.NET.BR ?
Somente se a sua empresa for detentora de autorização para o serviço de Rede e Circuito
Especializado da Anatel e/ou detentora de um Sistema Autônomo conectado a Internet conforme o
RFC1930.
2.3.4
Se eu registrar um nome em uma categoria, outra empresa pode registrar
o mesmo nome em outra categoria?
Sim.
2.3.5
Quanto tempo demora em se obter o registro de um domínio ?
Leia: Por que meu ticket ainda não virou domínio?
2.4
Como faço para saber se meu registro de domínio foi aceito?
Você será informado, via e-mail, quando o domínio for registrado. Durante o processo você poderá
acompanhar o estado do seu pedido diretamente na sua tela de administração. O seu pedido
aparecerá na lista de Tickets e após o processamento será colocado na lista de Tickets
processados. Esta lista pode ser acessada diretamente no menu da sua tela de administração.
2.4.1
Por que meu ticket ainda não virou domínio?
A fila de tickets é processada a cada 30 minutos. Verifique o status de seu ticket diretamente em
sua conta no sistema de registro. Caso seu ticket possua alguma pendência, este ficará
aguardando até um prazo determinado, ao fim do qual, caso a pendência não tenha sido resolvida,
o ticket será cancelado. Atenção: Pendências de tickets são comunicadas via e-mail durante a
geração dos mesmos, por favor, leia os comunicados com atenção.
Domínios registrados nas categorias.EDU.BR, .G12.BR, .MIL.BR, .GOV.BR, .NET.BR, .ORG.BR,
.PSI.BR, .AM.BR, .FM.BR E.TV.BR, somente são liberados após o recebimento e verificação da
documentação exigida, comprovando que a entidade solicitante está de acordo com a categoria na
18
qual deseja registrar o seu domínio. Para as demais categorias, o domínio é registrado em 24
horas.
2.5
Estou tentando registrar um domínio com as mesmas máquinas DNS que utilizo em
outro domínio já registrado, porém o sistema devolve um erro o que fazer?
Cada novo domínio deve ser previamente configurado nas máquinas que servirão como DNS para
o mesmo. Verifique se a máquina está devidamente configurada para o novo domínio que você
deseja. Caso o seu servidor DNS esteja corretamente configurado o sistema de verificação deve
retornar com a mensagem "Autoridade sobre o domínio".
2.5.1
Já tenho um ou mais domínios registrados. Como faço para registrar outro?
Se a empresa já possui algum domínio registrado, somente o contato da entidade poderá registrar
novos domínios abaixo deste CNPJ. O procedimento a ser seguido por este contato é o mesmo
efetuado quando do primeiro registro. Em caso de dúvidas, siga as instruções do tutorial
Cadastrando novos domínios.
2.5.2
Posso registrar qualquer nome como um domínio .EDU.BR?
Não. Nomes de domínios .EDU.BR não podem ser genéricos. Domínio genérico é aquele
composto por palavra ou acrônimo que defina conceito geral ou que não tenham ligação alguma
com a razão social, nome fantasia ou seus respectivos acrônimos.
Desta forma, caso a documentação descrita na questão 3.3 do FAQ não permita que se
classifique o nome como não genérico, deve-se encaminhar documentação adicional para
comprovação de não generalidade do nome.
2.6
Anatomia de um URL
A sigla URL significa Universal Resource Locator (Localizador Universal de Recursos).
Este é o nome de um esquema de endereços que permite "apontar" para qualquer documento ou
programa existente na Web.
19
O URL é composto de três partes fundamentais: protocolo, domínio e caminho. Vejamos em
detalhes os itens de cada uma dessas partes.
2.6.1
http://
Esse prefixo define o protocolo, ou seja, o tipo de conexão que o navegador deve usar para
acessar o documento. Outras alternativas incluem ftp://, mailto: e file:// (que indica arquivos locais).
Na falta de um protocolo, o navegador "pressupõe" que você quer usar o http.
2.6.2
www
Este é o chamado sub-domínio. Geralmente trata-se do nome de uma máquina, ou de um
departamento da empresa que opera o domínio. Um domínio pode ter muitos sub-domínios. É
comum que o servidor Web tenha o nome "www", mas nada impede que uma máquina seja
batizada de "www2", "vendas" ou "oscarito".
2.6.3
magnet
Este é o nome do domínio. No Brasil, os nomes de domínios só podem ser registrados por
pessoas físicas ou jurídicas com CPF ou CNPJ. Nos EUA não há qualquer restrição, exceto a taxa
de registro (US$ 35 por ano).
2.6.4
com
Este sufixo é o chamado DPN (domínio de primeiro nível). No Brasil os DPN estão associados a
categorias de pessoas físicas ou jurídicas. Por exemplo, o DPN "COM" serve para empresas
comerciais, e "ODO" serve para dentistas. Por tradição, as instituições de ensino superior e
pesquisas brasileiras não têm um DPN (ex.: http://www.usp.br).
2.6.5
br
20
Esta sigla designa o Brasil. Todos os países do mundo possuem siglas de duas letras como JP
(Japão), UK (Reino Unido), CA (Canadá) etc. Por motivos históricos a grande maioria dos
domínios americanos não utiliza o sufixo US.
2.6.6
/refs/
Entre as barras aparecem as pastas e sub-pastas onde se encontra o documento. Se essa parte
for omitida, o servidor busca o arquivo na chamada pasta-raiz de documentos (document root).
2.6.7
exemplo.htm
E finalmente, o nome do arquivo designado pela URL. Se você digitar um URL que não contém o
nome de um arquivo, o servidor poderá mostrar um arquivo padrão, chamado "index.html" ou
"Default.htm". Isso depende de como o servidor está configurado.
Top-Level Domains – Domínios de Primeiro Nível – DPN´s
2.7
São dois os tipos de DPN´s, genérico e código de país. Domínios genéricos foram criados para
serem usados na Internet pública, enquanto os domínios de código de país foram criados para
serem usados por cada pais individualmente, quando necessário.

Generic Domains – Domínios genéricos (.com, .org, .net, .edu, .gov, .mil, .int) – Anexo A,

Country Code Domains – Domínios de Código de País (.uk, .de, .jp, .us, etc.) – Anexo B.
2.7.1
Dicas e regras para o registro de um domínio
Antes de pedir o registro de um nome de domínio, leia o Acordo do Registro .br e a
regulamentação vigente: resoluções número [1] e [2] e seus anexos [I] e [II].
Tenha certeza de que o nome não esteja registrado, reservado pelo Comitê Gestor, ou se é uma
marca notória do INPI, verificando no sistema de Pesquisa. Se a pesquisa resultar em "Domínio
Inexistente" ou em informações sobre tickets ativos (com pendências), significa que o domínio
poderá ser registrado. Caso contrário, não poderá ser registrado.
Para qualquer operação no sistema de registro, é necessário que o usuário seja previamente
cadastrado e esteja IDentificado no sistema. Para isto, caso você ainda não tenha feito o cadastro
siga o tutorial Cadastrando-se como usuário do sistema de registro
21
Pelas atuais regras, para que o registro de um domínio seja efetivado, são necessários ao menos
dois servidores DNS conectados à Internet e já configurados para o domínio que está sendo
solicitado. Certifique-se disto através do sistema de verificação.
Para registrar um domínio, é necessário ser uma entidade legalmente representada ou
estabelecida no Brasil como pessoa jurídica (Instituições que possuam CNPJ) ou física (CPF) que
possua um contato em território nacional.
Instituições poderão registrar até 10 domínios por CNPJ em DPNs diferentes contanto que os
nomes não sejam similares. Por exemplo: poderão registrar XXX.COM.BR e YYY.IND.BR, mas
não poderão registrar XXX.COM.BR e XXX.IND.BR.
Profissionais Liberais poderão registrar um único domínio em um dos DPNs disponíveis e mais um
sobre o .NOM.BR:
Regras sintáticas que um domínio deve seguir:
O tamanho mínimo de 2 e máximo de 26 caracteres, não incluindo a categoria, por exemplo:
No domínio XXXX.COM.BR, esta limitação se refere ao XXXX.

Caracteres válidos são [A-Z; 0-9] e o hífen.

Nenhum tipo de acentuação é válido.

Não pode conter somente números.

O hífen vale como separador sintático interno de palavras, sendo que domínios já
registrados com ou sem o mesmo, só poderão ser registrados com esta diferença pelo
detentor do primeiro registro.
Observação
Especificamente para o domínio .NOM.BR é necessário a escolha de 2 nomes, ou seja:
NOME1.NOME2.NOM.BR.
Um nome de domínio não contém www. Ou seja, não peça o registro de www.xyz.com.br, o
correto será apenas xyz.com.br.
Para o registro de um domínio existem dois valores a serem retribuídos. Um que é cobrado
somente no ato do registro, e um de manutenção anual. No primeiro ano, o valor da manutenção é
22
cobrado proporcionalmente (base mensal) ao tempo de utilização até ao final do ano corrente. A
fórmula para o cálculo do fator de proporcionalidade é a seguinte [(13 - [MÊS DE REGISTRO]) /
12].
Atualmente os dois valores são de R$ 40,00 cada.
O valor é o mesmo para todos os DPNs, sejam para pessoas jurídicas, profissionais liberais ou
pessoas físicas.
2.8
Definições
TCP/IP (Transmission Control Protocol/Internet Protocol) - Protocolo, ou padrão, básico de
interconexão de redes utilizado pela Internet.
HOME PAGE - Página de apresentação de um endereço eletrônico.
FTP (File Transfer Protocol) - Nome do protocolo utilizado para transferência remota de arquivos
de um computador para outro.
FAQ (Frequently Asked Questions) - É o documento ou página onde empresas, ou listas ou
grupos de discussão costumam reunir respostas às perguntas feitas com maior freqüência pelos
usuários.
HACKER - Usuário com grande conhecimento de informática que costuma se infiltrar em
computadores onde seu acesso não é autorizado.
HTML (Hypertext Markup Language) - Linguagem de programação utilizada na elaboração de
documentos e páginas da Web.
PPP (Point to Point Protocol) - Protocolo serial usado na comunicação entre dois computadores
via modem e linha telefônica.
SITE - Local virtual de empresas, pessoas, universidades e entidades que fazem parte do
ciberespaço.
SLIP (Serial Line Internet Protocol) - Outro protocolo utilizado na conexão entre dois computadores
via modem e linha telefônica.
23
URL (Uniform Resouce Locator) - Endereço para localização e identificação de informações na
Web.
HTTP - Sigla do principal programa da rede WWW, que significa "Protocolo de transferência de
hipertexto". Para se acessar a Web com o mínimo de conforto, a velocidade mínima é de 14400
bps. O ideal é o dobro ou triplo disso. São conexões caras. Mesmo nos Estados Unidos, linhas
que permitem o SLIP, o tipo de conexão mais apropriado para a Web, custa no mínimo 50 dólares
por mês. Quem entra fica maravilhado. A Web abre na tela do computador uma página multimídia
- que contém texto e indicações de fotos, gráficos e até vídeos. A intrigante e sensacional
diferença é que o texto e as imagens estão sendo transmitidos de milhares de quilômetros de
distância e, em alguns casos, vindos das mais diferentes fontes. A outra vantagem é que essas
páginas se renovam todos os dias e seu conteúdo é gratuito.
2.9
2.9.1
Web Designer
Raio X
Descrição: Responsável pela estrutura, desenvolvimento, design e gerência de sites.
Formação recomendada: Curso Superior em Informática, Desenho Industrial, cursos de extensão
em universidades ou cursos técnicos.
2.9.2
Conhecimentos úteis
2.9.2.1 Software’s
Editores WEB - Dreamweaver, Home Site, FrontPage, GoLive!.
Editores gráficos – Fireworks, Photoshop, PaintShop Pro, PhotoPaint, CorelDRAW.
Banco de Dados na WEB: Dreamweaver Ultradev, ASP, PHP, SQL, MySQL.
Infra-estrutura - Servidores Web (Ambiente Windows: Internet Information Server - IIS, Personal
Web Server – PWS, Ambiente Unix/Linux - Apache, Ambiente SUN – Solaris, etc), servidores de
FTP e TCP/IP.
Ferramentas necessárias - Clientes de FTP - Cute FTP, Ws FTP e outros.
Linguagens de script - JavaScript, ActionScript, VBScript, etc.
Editores de som - Sound Forge
Certificações-Chave - Família Macromedia, Microsoft Front Page.
2.9.2.2 Principais atividades do webdesigner
24
Gerenciar uma equipe envolvida com o ambiente Web, desde a infra-estrutura até o
desenvolvimento de sites completos.
2.9.2.3 O novo papel do Webdesigner
Em algumas épocas da história, certos tipos de ocupação eram considerados extremamente
importantes. Já foi assim com os médicos, escribas, telegrafistas, pilotos de avião e várias outras.
Antigamente, um indivíduo que soubesse HTML, um pouco de programação, experiência em NT
ou Unix poderia assumir o papel de Webdesigner. O www era apenas um sistema de informação
não-linear, e o Webdesigner era a pessoa que entendia como colocar informação nesse sistema.
Há cinco anos atrás, não existia nem o nome dessa profissão.
Hoje em dia, essas atribuições mudaram. Ser um genuíno Webdesigner requer experiência em
várias áreas, desde computação até em economia. A maioria dos Webdesigners hoje não passa
seu dia programando em HTML.
Analisando friamente, um site nada mais é do que um computador executando um programa, mas
com alguns requisitos específicos. Qualquer pessoa que se intitule Webdesigner deve saber:

Sobre o funcionamento do sistema operacional do computador que opera, afinal, esse
sistema tem que estar funcionando perfeitamente para tudo dar certo.

Sobre os protocolos de rede, principalmente TCP/IP (principalmente se você trabalha num
provedor). Afinal, o web funciona na rede.

Sobre segurança. Você precisa saber como proteger seu sistema, como detectar invasões
e recuperar seus dados, caso isso ocorra. Para isso, e para que seu site funcione
ininterruptamente, deve haver um forte esquema de contenção, que deve ter como pontos
fortes à disciplina, a confiabilidade, a disponibilidade e facilidade de execução desses
procedimentos.

Sobre HTML. Principalmente os truques e as últimas novidades da linguagem. Não vale
saber como usa o editor de HTML; você deve saber a linguagem.

Sobre programação. Conteúdo dinâmico é feito em Java e Javascript, e CGI’s são
extremamente necessários.
25

Sobre conexão com Banco de Dados. Hoje em dia o serviço web está intimamente ligado
com o banco de dados.

Sobre o servidor. Você deve saber como fazer download, compilar (quando necessário),
configurar, executar e administrar o servidor.
OK, já fiz tudo isso. Agora eu sou um Webdesigner?
Ainda não. Agora você tem todos os elementos necessários, mas seu site está sem nenhum
conteúdo.
Você precisa aprender a criá-lo. Comece aprendendo a escrever. Demora muito para aprender a
escrever direito, e você precisa treinar bastante antes de colocar conteúdo no ar. Normalmente
você vai colocar textos de outras pessoas no ar, e apesar de ser “divertido” ver outras pessoas
cometendo erros, você não pode se dar esse luxo, além de ter que escrever bem.
Mais ainda, o web é um ambiente visual, então você vai achar interessante ter noções de design.
Bons designers nascem bons, mas um curso rápido vai te ajudar a não cometer muitos erros, e
ajuda a contratar um bom design. Bons conhecimentos de softwares de áudio e vídeo também são
desejáveis.
E por último, seria interessante que o Webdesigner também tivesse noções de Marketing, Direito,
Contabilidade... E até Psicologia. E se mantivesse informado das novidades em seu próprio
campo.
Pronto, agora você pode começar...
2.9.3
O cliente
Do outro lado de toda conexão www, existe um cliente. Isso pode ser dito explicitamente, se você
vende produtos, ou implicitamente, se você usa a divulgação da informação como parte da sua
estratégia. Seu site tem que ser desenhado para atender seus clientes, atendendo suas
necessidades e encorajando que eles voltem no futuro. Em suma fazendo da experiência de
navegar no seu site uma coisa marcante.
Mas manter os seus clientes felizes não é um trabalho trivial. Um dos pontos importantes é que o
Webdesigner esteja preparado para receber as mensagens mais estranhas, de clientes confusos
26
que não sabem nem por onde começar. Esses clientes são os que precisam de mais ajuda, a
partir daí os sites começam a fazer diferença.
O Webdesigner na verdade está cercado por clientes. Tem o pessoal que navega, tem o chefe, o
pessoal de vendas, e qualquer outra pessoa no seu local de trabalho que espera alguma forma de
retorno no www.
Enquanto o pessoal externo quer informações e produtos, o pessoal interno está de olho no
retorno do investimento, nos dados demográficos, nos clientes externos. Não conseguir agradar os
clientes externos é mortal para um site; não conseguir agradar os internos no mínimo vai te deixar
com fama de chato.
O cuidado com o cliente interno é uma coisa difícil de aprender e executar. Aprender como
preparar apresentações, mantendo um nível mais alto para seus gerentes, mais detalhado para os
técnicos. Aprender também a falar um pouco a linguagem das outras áreas, enfim, estar por
dentro da empresa.
Infelizmente, a maioria de nós não tem tempo de aprender tudo que precisamos. Se a meta é se
tornar o melhor Webdesigner possível (e não apenas um Webdesigner comum), uma sugestão é a
de reunir um time de pessoas que juntas reunam todas essas habilidades. Desta maneira, cada
um pode colocar suas especialidades em prática, usando como ponto de apoio as habilidades dos
outros.
Boas equipes não são ótimas desde o começo. Há uma evolução natural, que acontece com os
desafios, sucessos e fracassos. Eles aprendem a se comunicar, a esquecer os erros alheios e a
se fortalecer. O pessoal de informática é os que mais demoram a se adaptar (pois tem mania de
trabalhar sozinhos), mas quando aprendem a confiar nos parceiros, a satisfação do trabalho em
grupo é muito grande.
Outra coisa que provavelmente não irá funcionar são os cursos de graduação para computação
com especialização em Webdesigner. Um curso que dura 4 ou 5 anos, sendo que a tecnologia é
totalmente modificado em 8 ou 10 mês é uma coisa que não funciona. Há apenas 1 ano falávamos
de como seriam os frames; daqui a um ano, Style Sheet será coisa do passado. Não se pode
demorar 4 anos para aprender uma coisa que muda totalmente em 2.
E finalmente uma palavra sobre o título Webdesigner. Muita gente hoje que fez 3 ou 4 HTML’s na
vida se intitula Webdesigner, diluindo assim a força da palavra. Existe uma grande tendência de
unir todos os serviços numa única palavra, assim, o designer, o gerente de conteúdo, o gerente do
27
site, etc., todos se auto intitulam Webdesigner. No final, então, o nome não importa: a dedicação é
que faz a diferença.
2.10
Quais os passos para o desenvolvimento de um novo projeto?
A maioria dos profissionais do ramo de Webdesigner tem seu próprio método para a
implementação de um novo projeto ou site. Aqui, tentamos relacionar os tópicos mais importantes,
recomendados por alguns profissionais da área.
2.11
Definição do Conceito
O primeiro passo importante é definir os novos conceitos do produto. Procure trazer todo mundo
que de alguma maneira está envolvido com o assunto (designers, pesquisadores, programadores,
gerentes, etc.) para algumas reuniões, de modo que as idéias e sugestões da equipe sejam
debatidas, discutidas, anotadas. Inicialmente não devemos nos ater à realidade do assunto, mas
deixar as idéias voarem e tomarem forma.
2.11.1 Pesquisa
Uma vez que o conceito inicial foi definido, você deve “perder” tempo para reunir toda a
informação a respeito desse conceito. É essencial que você pesquise também na própria Internet
a respeito do assunto, para saber se alguém já fez alguma coisa semelhante. Se for necessário,
divida essa tarefa com a equipe. A Internet tem várias maneiras de ser pesquisada, e
normalmente leva tempo e muitos links inválidos para chegar à informação que você precisa. No
final desse processo, você deve ter informação suficiente para cobrir todos os pontos do conceito.
Lembre-se: Um site sem conteúdo não é nada.
2.11.2 Organização
Depois de ter reunido toda a informação, você tem que criar a estrutura na qual essa informação
será apresentada. Essa parte é muito importante, e grandes sites, com muitas informações são
prejudicados por uma estruturação deficiente. A informação tem que estar em local de fácil
acesso. Coloque-se no lugar do cliente, e veja se a estrutura está cumprindo seu papel. Mais uma
vez, aceite sugestões.
28
2.11.3 Padrão das páginas
Depois dos passos 2 e 3, é hora de definir os links, as funções de Search, os Fóruns, o conteúdo e
navegação de cada página. As cores, desenhos, etc., ficam para o próximo passo. Não subestime
o poder de navegação do site, e tente fazer as páginas de uma maneira que “uma leve a outra”. O
padrão das páginas é parte integrante da informação nela contida. Não deixe páginas “perdidas”,
sem seqüência, e sempre dê opção para links de Search ou de contato por e-mail em todas as
páginas.
2.11.4 Design
Nessa etapa, o visual do site é definido. Ele deve ser bem estudado, e o designer deve ter
liberdade para criar, sem imposições, mas deve estar consciente do objetivo do site.
Cores, imagens, ícones, setas, bullets, tudo deve ser implementado. Não é necessário criar tudo
do zero: Existe muita coisa disponível na própria Internet. Sites de qualidade geralmente fazem
suas próprias imagens.
2.11.5 Criação do HTML
Depois das informações na estrutura correta, e do design dos elementos pronto, é hora de montar
as páginas. Não esqueça de colocar tags para browsers que não suportam frames, tags de
imagens alternativas, e conferir se todos os links estão funcionando.
2.11.6 Programação
Depois do HTML implementado, o programador começa a trabalhar nas tarefas operacionais
automáticas, nos formulários, programas de cadastramento, etc. Se existir muito trabalho de
programação ou o site for muito interativo, considere em envolver o programador antes do final,
para já adiantar os pontos mais simples.
2.11.7 Que posso fazer para tornar meu site mais movimentado?
Uma das coisas que mais satisfaz um Webdesigner é ver seu site tornar-se popular. Mesmo com
planejamento e cuidado da execução do site, isso não acontece.
29
Existem muitos sites que são muito interessantes na rede, e se você não tiver alguma coisa que
diferencie seu site dos outros, você corre o risco de ter pouca gente interessada no que você tem
a mostrar. Abaixo temos algumas dicas interessantes para tornar seu site mais “quente”.
2.11.8 Atualize o conteúdo
Mesmo que as informações do seu site não sejam atualizadas todo dia, procure mudar pelo
menos sua home page regularmente. Seus clientes precisam de uma boa razão (de preferência na
primeira tela) para voltarem. Mude alguma coisa, nem que seja a cor.
2.11.9 Cuide da primeira tela
A primeira tela é a porta de entrada do seu site. Sempre mantenha alguma coisa engraçada, nova
ou informativa na primeira tela. Uma lista das novas páginas de seu site, com os respectivos links
para elas também é muito interessante.
2.11.10 Trabalhe com interação
Procure colocar seus usuários em contato. Faça com que eles tenham no seu site um ponto de
encontro. Isso pode ser feito com Fóruns. Não apenas ofereça o serviço de Fóruns puro e simples:
Marque encontros, discussões, traga pessoas famosas para conversar. Isso vai envolver seus
usuários.
2.11.11 Navegação
Faça da navegação parte da narrativa. Quando você estiver num site, você deve ser capaz de
acessar facilmente links de outra seção desse site, em poucos clicks. Barras de navegações em
cima ou embaixo da página resolvem o problema.
2.11.12 Gráficos pequenos
Se seu site utiliza muitas imagens, faça que a espera para carregá-las valha a pena. Muitos
usuários ainda utilizam modems 14.400. Não esqueça de colocar textos alternativos para as
imagens e perca tempo tentando reduzir o tamanho dos arquivos.
30
2.11.13 Nada é óbvio
As pessoas que chegam pela primeira vez no seu site às vezes podem não ter idéia do tipo de
serviço que você oferece. Mantenha sentenças descritivas, ou mesmo uma página com
informações sobre seus objetivos. As pessoas que navegam na Web geralmente são de dois
tipos: As que lêem tudo antes de clicar e as que clicam tudo antes de ler. Pense nisso quando
estiver montando suas páginas.
2.11.14 Feedback
Crie maneiras do usuário escrever dando suas opiniões. E SIGA as sugestões. Afinal, você fez o
site para eles.
2.12
Cuidando do seu servidor
A manutenção de um site é um trabalho constante e exigente. Um site exige manutenção
constante e uma grande dose de perseverança para estar sempre em ordem. A seguir,
apresentamos algumas dicas de como fazer isso.
2.12.1 Use um verificador de HTML
É muito fácil errar na hora de escrever seu HTML. A maioria dos browsers ignora as tags que eles
não entendem, e isso torna os Webdesigners preguiçosos. Infelizmente, um HTML errado pode
trazer problemas, principalmente com novos produtos que esperam uma codificação impecável.
Antigamente, os acentos não precisavam ser terminados por ponto-e-vírgula, mas hoje precisam.
E o mais importante, um HTML mal escrito é horrível de manter.
Esses problemas podem ser evitados com o uso de um verificador de HTML. É um pequeno
programa que examina seu HTML e aponta os erros do seu texto. Alguns realmente bons são o
CSE 3310, o W3C HTML Validation Service e o Weblint.
2.12.2 Respeite o copyright
OK, todo mundo copia imagens, textos, banners, e qualquer outra coisa que pareça interessante
na Internet. Afinal, está tudo lá, e é só clicar com o mouse para obter o que você deseja.
31
Mas o material que está na rede demandou trabalho, e deve ser protegido como qualquer outra
publicação. Isto não vai impedir as pessoas de usá-lo, mas vai lhe dar parâmetros legais para se
proteger se você for prejudicado.
Por isso, coloque anúncios de copyright em suas páginas, daqueles simples, do tipo:
© 2001 Your Name. Redistribution Prohibited.
Nos EUA, a lei do copyright é muito clara, e pune qualquer pessoa que se apossar da produção de
alguém sem permissão. A maneira mais educada de copiar algum texto ou imagem de alguém é
pedindo ANTES de fazer a cópia, por e-mail, por exemplo.
Caso a pessoa não libere o uso do texto, NÃO use. Apesar da lei brasileira ainda estar
engatinhando nesse tipo de assunto, nunca é bom facilitar. As leis americanas protegem esse tipo
de material mesmo que não exista nenhum aviso de copyright. E eles punem esse tipo de cópia
não-autorizada da mesma maneira que violação de correspondência.
2.12.3 Conheça seu site
Nunca se esqueça que seu site existe com um propósito. Um site não existe apenas por existir.
Cada Webdesigner tem que saber responder algumas questões básicas:

Por que esse site existe?

Quem são os meus clientes?

Como esse site se paga?

Qual a minha meta com ele?
A primeira questão não é muito difícil. Normalmente você sabe se seu site se destina à venda de
algum produto, à divulgação de informações, etc. Esse é o motivo pelo qual você colocou esse site
no ar. Se você não sabe, nem se dê ao trabalho de se perguntar o resto.
Assumindo que você saiba a resposta, veja a segunda pergunta. Quem é seu público alvo? Eles
sabem como encontrar seu site, nos índices de busca? Você está fazendo propaganda suficiente
do seu site?
O cliente é a coisa mais importante de um site, e o fato do seu estar de acordo com as
necessidades do seu é meio caminho andado.
Depois disso, vem à pergunta a respeito de dinheiro. Muitos sites são mantidos por fundações,
outros por empresas, mas todos eles custam dinheiro. Linhas, máquinas, profissionais, tudo isso
32
para colocar no ar um site, que TEM que gerar algum tipo de lucro. Defina logo de cara seus
objetivos em relação a isso. E por último, defina a meta desse site. Você está interessado em hits?
Em atender um certo número de clientes?
Em tirar lucro? Defina sua meta e se esforce para cumpri-la. Definindo a palavra “sucesso” para
esse site, você consegue saber exatamente até que ponto você vai crescer, e isso torna suas
expectativas mais realistas.
2.12.4 Defina os padrões
Nada pior do que um site inconsistente, confuso, difícil de entender. Normalmente esses
problemas são causados por falta de padronização. Principalmente em sites grandes, com
dezenas de designers. Defina as cores, os layouts de página, o estilo de escrita. Isso torna seu
site mais consistente.
Criar boas páginas demanda tempo. Mas uma vez que você tenha uma página padrão,
provavelmente muito do código dessa página vai ser usado em outras (barra de navegação,
copyright, links para contato, etc.). Uma das sugestões seria usar a tecnologia de server-side
includes, ou SSI. Essa tecnologia permite incluir texto em qualquer parte do seu HTML com um
simples comando.
2.12.5 Mantenha e use estatística
Números são perfeitos para provar as coisas. Um gráfico estatístico é uma forma maravilhosa de
mostrar que você está correto. Não se esqueça que seu site está gerando números o tempo todo:
hits, browsers, taxas de transferências, etc. Esses números provam a saúde do seu site, provam
que ele está indo bem, ou não.
Mostram as páginas mais visitadas, e que precisam estar sempre atualizadas, pois são os
chamarizes do seu site. Preste muita atenção neles, que são os verdadeiros indicadores do seu
serviço.
2.12.6 Facilite a navegação
Lembre-se que navegar significa cruzar, viajar, e não ficar estacionado. Muitos sites se esquecem
que muitos visitantes acontecem por acaso, vindos de outros sites que apontam os seus como
referência ou simplesmente numa pesquisa num índice. E quando eles chegam no seu site, isso
não é garantia de que eles vão ficar. Eles vão inicialmente “testar” seu conteúdo para saber se
vale à pena ficar ou não. Lembre-se como você mesmo navega, batendo aqui e ali e procurando o
33
que precisa. Faça então um site que você gostaria de encontrar na rede. Páginas pequenas, que
permitem rápido download e leitura. “Convide” o usuário a navegar no site, atraindo por onde ele
mais gosta: velocidade e informação.
2.12.7 Crie índices
Qualquer site com mais de 10 páginas deveria ter um link que permita ao usuário fazer uma
pesquisa em suas páginas utilizando uma palavra chave. Isso é importante por dois motivos
básicos: O usuário perde menos tempo navegando por páginas procurando a informação
desejada, que é bom para ele. E isso agiliza o uso da rede, que tem que transferir menos
informação “inútil”, o que é bom para todos. Existem produtos comerciais e gratuitos disponíveis
na rede para isso.
2.12.8 Promova a informação
Não faça do seu site um monte de páginas difíceis de entender. Ofereça páginas com informação
clara. Muitos Webdesigners são artistas, e cada página é uma obra de arte, com imagens de
fundo, layouts apurados, gráficos de alta definição e fontes perfeitas, mas nada disso muda a
informação que está representada nessa página. Tirando todo o “glamour” dessas páginas,
normalmente sobra menos texto do que o necessário para encher 10 linhas.
Perca menos tempo tentando fazer seu site parecer bonito; mostre mais conteúdo. A maioria dos
usuários não tem paciência de esperar uma página muita pesada carregar.
Então, remova os gráficos supérfluos. Aposente o ícone “Em Construção”. Ou a página está no ar
ou não. Quebre páginas longas em páginas menores. Disponibilize mecanismos de busca, de
modo que seu usuário não precise navegar por todo o site antes de encontrar o que precisa. Em
suma, o importante e’ o que está escrito.
2.12.9 Coloque muitos links
Links para suas próprias páginas, para o início da seção, para o início do seu site, para outros
sites com assuntos relacionados, para tudo. Às vezes esquecemos que nossos clientes não
entram a partir da página inicial, e que a Web só é o sucesso que é, pois há links de todos os
lugares para todos os lugares. Tudo bem, manter links é muito chato, mas um dos seus serviços
como Webdesigner é manter informações para seus clientes.
34
2.12.10 Suporte a vários browsers
Está provado: um dos browsers mais populares do mundo é a impressora. Além dela, muitos
usuários utilizam browsers alternativos. Então, procure não desenvolver uma página que funciona
apenas nos browsers mais modernos, como o Netscape ou Explorer. Você ficaria surpreso em
sabe que uma boa parte do pessoal na Internet navega com browsers alternativos. Já existem
PDA’s que permitem a navegação na rede. Já imaginou como seu site fica numa tela preto-ebranco de cristal líquido de 5x7?
2.12.11 Tenha uma parte gráfica eficiente
Todos gostamos de colocar gráficos em nossos sites. Gráficos são bons, se as imagens são
consistentes, atrativos e servem para melhorar a qualidade de seu conteúdo. Infelizmente poucos
de nós somos bons nisso, e existem pessoas que colocam o primeiro gráfico que encontram só
para a página não ficar sem nenhum. ANTES de escrever IMG=, veja se a imagem vai realmente
fazer diferença ou não.
2.12.12 Ponha o link para o Webdesigner
Muitos sites são tão mal feitos ou desatualizados que o próprio Webdesigner não assina seu
trabalho, não divulga seu e-mail, prefere não aparecer. Você, que tem orgulho do seu site, procure
arrumar um tempo para colocar seu nome em suas páginas. Não precisa ser algo elaborado, cheio
de links, apenas algumas palavras e um link para o seu e-mail. Seu cliente saberá assim quem
desenhou essa página e onde essa pessoa pode ser encontrada. Às vezes as pessoas estão
tentando se comunicar com sua empresa e a única pista que eles terão será o seu nome.
E mais uma coisa: se você colocar seu e-mail nas páginas, LEIA o e-mail, e RESPONDA a todos.
2.12.13 Crie uma boa estrutura de diretórios
A ferramenta mais importante para a organização de um site é a sua estrutura de diretórios.
Muitos sites exibem poucos níveis, mantendo muitas páginas, CGI’s e applets no mesmo diretório.
Agrupe suas páginas em diretórios, com links para os níveis acima.
Esse tipo de organização ajuda seus clientes a perceber onde estão indo, pela estrutura que seu
site está montado. E mais importante, esse tipo de organização vai manter seu site mais fácil de
entender e atualizar.
35
Você pode construir páginas intermediárias para subseções, que podem inclusive ser mantidas
por outros designers.
2.12.14 Mantenha seus links
Links que não funcionam são a marca registrada de um site que não tem uma boa manutenção. O
Webdesigner tem que ser um verdadeiro caçador de links errados.
Esse é um trabalho muito tedioso, e um bom produto que já forneça um relatório dos links errados
é imprescindível. Para minimizar esse problema dentro do seu próprio site, use links relativos
sempre que possível.
2.13
Como posso fazer propaganda do meu site?
Depois de colocar seu site no ar, existem várias coisas que você pode fazer para avisar seus
clientes que você tem uma página disponível. Uma das coisas que você NÃO deve fazer é mandar
um aviso para alguma lista não especializada nesse assunto. Isso é chamado SPAM, e não é vista
com bons olhos pela maioria das pessoas.
Existem locais apropriados para divulgação de novos sites. Segue uma lista dos mais indicados:
Mande uma mensagem para a lista Usenet COMP.INFOSYSTEMS.WWW.ANNOUNCE. Leia as
regras de envio, ANTES de mandar sua publicidade. Se você nunca mandou nada para nenhum
newsgroup, familiarize-se com o sistema primeiro.
Submeta a URL para algum serviço de índice, como o Yahoo ou o Lycos.
Submeta a URL para algum serviço de subscrição automática como o Submit it., ou o wURLd
Presence.
Peça publicidade paga a alguma revista de informática, de preferência àquelas que tem como
diferencial a Internet.
2.14
O ambiente no futuro
Basicamente, hoje, o servidor www se limita a receber pedidos e passar os arquivos.
Ele cumpre muito bem a função para o qual foi desenhado, mas seus idealizadores nunca
imaginaram que o ambiente iria se tornar o front-end para aplicações mais desejado do mercado.
Ainda existe uma série de detalhes a serem resolvidos, mas a tendência daqui para frente é que o
36
ambiente deve ser gradualmente integrado com serviços comuns de rede. Isso vai facilitar a
inclusão e recuperação de informações, e gradualmente o HTML irá desaparecer. Dessa maneira,
se tornará uma poderosa ferramenta de controle gerencial e de busca de informações, tudo
integrado na mesma interface. Tudo com controle de acesso, segurança da privacidade da
informação, workflow, etc.
A versão do HTTP (1.1) prevê a implementação de conexão persistente, compressão de dados em
tempo de envio, a integração de um cache de documentos mais acessados, e métodos para
acesso de dados, tanto para recebê-los quanto para carregá-los.
O protocolo vai ser mais rápido, eliminando o slow start, que faz com que a conexão www seja
lenta. Especialistas dizem que só de implementar clientes e servidores com o novo HTTP, já
teremos um aumento de performance de até quatro vezes. Veja as páginas do W3C para maiores
detalhes.
Se a tendência se confirmar, o ambiente resultante desses padrões vai exigir máquinas cada vez
maiores e Webdesigners cada vez mais especializados nesse ambiente, até que finalmente o
usuário local poderá ter toda sua área de trabalho num site www, que pode ser acessado via
cliente www de qualquer lugar do mundo, com toda a segurança e de qualquer plataforma.
Em 1996, 90% dos browsers eram Netscape, e sua versão 2.0 ainda estava em beta.
O Internet Explorer ainda estava em sua primeira versão, e o Windows95 estava no mercado há
apenas quatro meses. O HTML ainda estava na versão 2.0, que trouxe a tag <TABLE>. Falava-se
de HTML 3.0, que traria os frames. As maiorias das pessoas usavam servidor Apache e CERN, e
quase todos os clientes nem sabiam o que era uma URL.
Em 2 anos, Netscape e Explorer passaram para a versão 4.0, não se fala mais de frames e sim de
Style Sheets, a estamos no HTML 4.0. Existem dezenas de servidores no mercado, muitos em
ambiente NT/2000, Unix/Linux, SUN, mas a maioria oferecendo mais do que apenas páginas, mas
vendas on-line, acesso à banco de dados, e todo o mundo sabem o que é a web hoje em dia.
Isso prova que fazer previsões a respeito desse ambiente é bobagem. Mas existem algumas
considerações, obtidas de experiência de alguns “mestres” na web, sobre o que irá acontecer em
curto prazo.
Relacionamos algumas.
37
XML: O XML (Extensible Markup Language) é uma versão simplificada do SGML (Standardized
General Markup Language). O SGML é usado para criar linguagens específicas de apresentação.
O HTML, por exemplo, foi criado usando os padrões SGML. Quando o XML apareceu, muitos
disseram que ele irá substituir o HTML. Mas isso não irá acontecer, pois elas se prestam a coisas
diferentes, e o XML é muito mais difícil de usar. Diferentemente do HTML, você não pode criar
páginas com o XML, mas definir uma linguagem para então definir as páginas. Como as
linguagens são dependentes dos browsers, você teria que criar plug-ins para os browsers
reconhecerem sua linguagem. O processo todo é muito complicado para ser utilizado por um
usuário e um cliente comum.
HTML: Por muitos anos o padrão HTML foi lançado para alguns meses depois estar
desatualizado. No início a Netscape “puxava” o carro, introduzindo novas tags que eram depois
copiadas pelos outros browsers.
Há algum tempo não se criam novas tags, e agora a versão 4.0 com todas as tags existentes já
formalizadas e vai definir o que todos os browsers irão entender. Diz-se que essa versão irá trazer
como novidades algumas extensões de <TABLE> e formalizar os frames.
Ferramentas de autoria: Depois de alguns meses que o HTML foi lançado, surgiram os primeiros
editores para facilitar a vida das pessoas que trabalhavam com ele. Quase um ano depois, os
editores WYSIWYG prometiam que ninguém mais teria que aprender HTML para fazer suas
páginas. Mas esses editores quase sempre se desatualizavam em alguns meses, à medida que
novas tags iam sendo lançadas e eles não ofereciam uma visão global da estrutura do site. Hoje
em dia, existem produtos que realmente fazem a integração homem-site, oferecendo recursos
suficientes que realmente tornam a manutenção de um site e de seu conteúdo muito mais simples.
WAP - Wireless Application Protocol: É uma especificação para um conjunto de protocolos de
comunicação com o intuito de normalizar a forma como dispositivos sem fio (telefone celular, palm
tops, emissores/receptores de rádio, etc.) acessam a Internet.
Esse protocolo permite acesso móvel a informações a serviços disponíveis na Internet ou Intranets
provadas, assim como a outros sistemas de informação, por meio de dispositivos móveis. Em
outras palavras, em poucos dias você poderá conhecer pelo seu celular os filmes em cartaz no
cinema de sua cidade, ou ainda saber de antemão qual a programação de seu canal favorito de
TV.
É uma tecnologia que permite aos celulares navegarem de uma forma muito eficaz. As
informações são comprimidas para que possam circular mais rapidamente pela rede, apesar da
lenta conexão oferecida por esses aparelhos.
38
Style Sheets - Folhas de estilo: As Style Sheets surgiram em 1997, e são suportadas pelo
Netscape e pelo Explorer. Mas até hoje poucas pessoas usam essa técnica. Ela permite que um
cliente, mesmo utilize um browser incompatível com a tecnologia ainda visualize uma página
comum, permitindo que o usuário ainda tenha acesso à informação. E quando esse usuário fizer
um upgrade de seu browser, ele terá uma grata surpresa. As Style Sheets tornam a manutenção
do layout e das fontes uma coisa muito fácil, e são válidas por partes ou pelo seu site todo. Quer
mudar suas cores de fundo? Altere sua Style Sheet e todo seu site acompanhará a mudança. Mais
e mais designers irão estudar e implementar essa tecnologia, que apesar de chegar devagar, vai
chegar para ficar.
3 - E – Commerce
3.1
DEFINIÇÃO
É uma pratica de negócios on-line, realizados por uma empresa, utilizando-se de informação
digital com o objetivo de atender direta ou indiretamente a seu cliente. Em outras palavras, são
transações comerciais realizadas na internet.
A cada dia muitas empresas estão aderindo ao setor de comercio eletrônico e comercializando
uma gama bastante variada de produtos, que vão desde livros e CDs até automóveis. Não
estando restrito a grandes corporações, pois pequenas e medias empresas vêem nessa
modalidade uma forma bastante atraente de expandir os seus negócios.
Basicamente, o comercio eletrônico se divide em dois grandes segmentos:
B2B – Business to Business: Consiste no comércio eletrônico realizado entre empresas e
fornecedores.
B2C – Business to Consumer: Consiste no comércio eletrônico realizado entre empresas e
consumidores finais.
3.2
Como Vender?
A venda deve ser o mais amigável possível. Procure usar uma interface de fácil navegação, com
produtos distribuídos por categoria e mecanismos de busca eficientes e rápidos.
39
Nada de sites pesados, cheios de imagens piscando e cores que dispersem a atenção do leitor.
Dê preferência à simplicidade. Mais vale um site simples e operacional do que um site cheio de
penduricalhos carnavalescos e demorado para carregar.
3.2.1
Como Cobrar?
Defina as regras de cobrança e seja o mais claro possível. De modo geral existem duas
modalidades principais de cobrança:
Boleto Bancário: Uma forma bastante aceita nos dias de hoje. Os internautas sentem-se mais
seguros quando os pagamentos são feitos por meio de boleto do que o uso de cartão de crédito.
Cartão de Credito: O meio mais eficiente de cobrar. No entanto, a maioria das pessoas ainda se
sente vulnerável com essa modalidade de cobrança, devido ao risco que estarão se expondo ao
fornecerem o numero de seu cartão. Deixe claro ao internauta a técnica utilizada para a segurança
da transação.
3.2.2
Regras do Jogo
Deixe claro ao internauta todas as regras que definem seu negócio. Elas serão as responsáveis
pelo sucesso de sua loja virtual. Se as regras forem obscuras ou escritas “entre linhas”,
certamente sua loja estará fadada ao fracasso total. De um modo geral, os seguintes itens devem
ficar claros para o seu cliente:

Estoque: Os serviços e produtos fornecidos estão disponíveis no seu estoque para a
entrega imediata ou necessitam de uma intermediação com seus fornecedores para
serem entregues?

Prazo de entrega: Deixe bem claro qual será o prazo de entrega do produto. Sempre é
bom dar alguma margem de segurança, pois imprevistos podem ocorrer.

Falta do produto: Se o produto não estiver disponível no estoque, quais são os
procedimentos a serem seguidos.

Preços: A política de preços para produtos vendidos na internet é a mesma para produtos
vendidos nas lojas.

Frete: Diga sempre qual o valor cobrado no frete.
40

Entrega: Qual será a política adotada pela empresa, caso o produto não chegue ao seu
local de destino?
Leia mais sobre E-Commerce em:
http://www.terra.com.br/istoedinheiro/236/ecommerce/
http://www.e-commerce.org.br
http://www.revistaecommerce.com.br/apresenta2.php?edicao5=24&pag_id=146
4 - HTML
HTML significa Hypertext Markup Language e é a linguagem de descrição de documentos usada
na World Wide Web. As principais características são:
4.1

Orientada por marcadores ou TAGs.

Não é “sensitive case”
Interpretada
A princípio vamos utilizar o Bloco de Notas do Windows para editar as nossas páginas. Evite
utilizar processadores de textos, tipo Wordpad ou MS-Word.
TAGs são os comandos utilizados pela linguagem HTML.
Cada TAG informa ao programa visualizador ou Browser, como ele deverá formatar/exibir o texto e
deve estar dentro dos sinais de menor que (<) e maior que (>).
Exemplo:
<HTML>, <BODY>, etc.
Os TAGs podem ser únicos ou duplos, com início e fim.
Exemplos:
TAG único: <BR>
TAG duplo: <P>...</P>
41
4.2
Iniciando um Documento
Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Temos duas seções
básicas:
<HEAD>
Contém parâmetros de configuração do documento.
<BODY>
Contém o documento em si.
A estrutura de um documento HTML é:
<HTML>
<HEAD>
<TITLE> Título da Home Page </TITLE>
</HEAD>
<BODY>
*** Conteúdo da Home Page ***
</BODY>
</HTML>
4.2.1
TAGS USADOS NO INÍCIO DO DOCUMENTO
<HTML>...</HTML>
Envolvem todas as seções de um documento (HEAD e BODY).
<HEAD>...</HEAD>
Envolvem a seção de cabeçalho do documento.
<TITLE>...</TITLE>
Indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na
barra de título da sua Janela no Windows.
<BODY>...</BODY>
42
Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page.
Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando o atributo
BACKGROUND.
Então não se esqueça que as TAGs sempre deverão vir entre “<” e “>”. Devemos observar que
dentro de uma mesma TAG podemos inserir alguns auxiliares chamados atributos. Por exemplo: o
TAG <font> altera a formatação do texto, mas que tipo de formatação? Observe bem: o TAG
<font> tem três atributos: color, face, size. Color para mudar a cor do texto. Face para mudar o tipo
de fonte, e size para alterar o tamanho da fonte.
<font color=”blue” face=”verdana” size=”7”>
Atributos
Atributos
Valores
color – cor
“blue”
Face – tipo
“verdana”
Size - tamanho
“7”
TAG
Valores
4.2.2
Títulos e Sub-títulos
Para demarcar títulos e subtítulos, use os TAGs de HEADER (H). Este TAG varia seu tamanho de
1 a 6. Deve ser utilizado para destacar títulos de textos pois ele insere uma linha antes e depois do
comando.
Veja alguns exemplos:
<html>
<head>
<title> Títulos e sub-títulos </title>
</head>
<body>
<h1> Este texto esta usando h1 </h1>
43
<h1 align=”center”> Texto usando h1 e alinhamento centralizado </h1>
<h3 align=”right”> Texto usando h3 e alinhado à direita </h3>
<h2 align=”center”> Texto usando h2 e alinhamento centralizado </h2>
</body>
</html>
Vamos tentar? Experimente:

Abra o bloco de notas do windows (Iniciar, programas, acessórios, bloco de notas);

Digite o exemplo seguinte sempre pressionando ENTER no final de cada linha. Os
números no lado esquerdo de cada linha são para simples referência e NÃO DEVERÃO
SER DIGITADOS. OK? Ah!!! Tanto faz letras maiúsculas ou minúsculas. O importante é
adotar um padrão próprio.
Observe o meu:
1) <html>
2) <head>
3) <title> Primeira Home Page </title>
4) <body>
5) <h1> Título com tamanho h1 </h1>
8)<h4> Título com tamanho h4 </h4>
11) </body>
12) </html>
Se tudo estiver corretamente digitado, abra o menu Arquivo, salvar. Como nome do arquivo sugiro
testando titulo.htm
44
Observe que não devemos nos esquecer da extensão do arquivo que no nosso caso é html ou
htm. Se você esquecer disso estará gravando nosso código fonte como TXT e o browser não vai
reconhecer um texto do tipo TXT como uma página WEB.
Salve este primeiro exemplo bem como os demais.
Agora dê um duplo clique no arquivo que você acabou de salvar. O que aconteceu? Você deve
estar visualizando o resultado da sua primeira página. Não é emocionante?
Ah! Só mais uma coisa. Este será o roteiro que deverá ser seguido nos demais exemplos, ou seja,
abrir o bloco de notas, digitar, salvar e abrir a página. A cada alteração no código fonte da sua
página, atualize a exibição no browser para que as alterações tenham o efeito desejado.
4.2.3
Quebra de parágrafo e de linha
Para forçar o início de um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto
na segunda linha após o final do parágrafo anterior, deve ser usado o comando <p>. Um atributo
que acompanha o TAG <p> é o align que significa alinhamento. Os valores podem ser “right”,
“left”, “center” e “justify”.
Exemplo:
<p align=”center”> Texto com alinhamento centralizado com p align=”center” </p>
<p align=”right”>
Texto com alinhamento à direita com p align=”right” </p>
<p align=”justify”> Texto com alinhamento justificado com p align=”justify” </p>
Toda vez que o browser ler este comando irá proceder à quebra de parágrafo.
Toda vez que o browser ler o comando <br> vai inserir na página uma quebra de linha.
Concluindo: <p> quebra parágrafo e <br> quebra linha.
4.2.4
Formatação de textos
Os seguintes TAGs podem ser utilizados para a formatação de um texto.
<B>...</B> - Aplica o estilo negrito.
<I>...</I> - Aplica o estilo itálico.
<U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem).
<SUP>...</SUP> - Faz com que o texto fique
sobrescrito
45
<SUB>...</SUB> - Faz com que o texto fique subscrito
<STRIKE>...</STRIKE> - Efeito tachado
Abra o bloco de notas e digite o seguinte exemplo:
<html>
<head>
<title> Testando as formatações </title>
</head>
<body>
Este texto está em <b> negrito.
</b>
<br>
Este texto está em <I> itálico.
</I>
<br>
Este texto está em <u> sublinhado.
</u>
<br>
Este texto está
<sup> sobrescrito </sup>
<br>
Este texto está
<sub> subescrito </sub>
<br>
Este texto está
<strike> tachado
</strike> <br>
</body>
</html>
Após a digitação, salve como testando formatações.htm
Agora dê um duplo clique no arquivo que acabou de salvar e observe o resultado. Você notou que
no final de cada linha eu coloquei um TAG <br>. Este TAG é para provocar uma quebra de linha –
break line.
Lição para o lar.
Experimente montar uma página que utilize o TAG H, os TAGs de formatação de texto e um novo
TAG que acabou de apreender, que é br.
4.2.5
Formatando Fonte
Com o TAG <font> você pode mudar a cor, o tipo e o tamanho da fonte. Você lembra quais são os
atributos? Vamos fazer uma pequena recordação.
Color – Utiliza nome de cores em inglês ou o seu respectivo código RGB (Red, Green, Blue –
“#rrggbb”).
46
Exemplo: <font color= “blue”> ou <font color= “#0000ff”>
Observe a tabela abaixo:
TAG
Referência pelo nome
Código hexadecimal
<font color=
“white”>
“#ffffff”>
<font color=
“black”> - default
“#000000”>
<font color=
“red”>
“#ff0000”>
<font color=
“yellow”>
“#ffff00”>
<font color=
“blue”>
“#0000ff”>
<font color=
“green”>
“#00ff00”>
Exemplos:
<font
color=”red”>
Esta
linha
está
com
a
cor
da
fonte
em
vermelha
</font>
<font color=”#ff0000”> Advinhe qual a cor desta frase!!! </font>
Face – Define o estilo de fonte que vai ser aplicado.
E aqui uma observação importante. Evite usar fontes que a princípio são lindas, mas que só você
tem instalada. O usuário que estiver visitando sua página não vai conseguir observar o efeito que
a sua linda fonte causa. Portanto utiliza-la é pura perca de tempo. Via de regra, utilize as fontes
padrão do Windows.
Exemplos:
<font
face=”arial”>
Utilize
as
fontes
padrão
do
Windows
</font>
<font face=”times new roman, courier new, verdana”> Ou você vai se arrempeder </font>
No exemplo anterior se o usuário não tiver a fonte times new roman, o browser vai tentar utilizar a
courier new e se não tiver usa verdana. Se não tiver nenhuma destas três fontes vai utilizar as
fontes definidas no próprio browser.
Size – Define o tamanho da fonte. Este tamanho varia de 1 até 7 sendo que 1 é a menor de todas
e 7 a maior de todas.
Exemplos:
47
<font size=1> D </font> <br>
<font size=2> I </font> <br>
<font size=3> M </font> <br>
<font size=4> E </font> <br>
<font size=5> N </font> <br>
<font size=6> S </font> <br>
<font size=7> I </font> <br>
<font size=6> O </font> <br>
<font size=4> A </font> <br>
<font size=2> D </font> <br>
<font size=1> O </font> <br>
Agora vamos analisar um exemplo que emprega os três atributos.
<font
color=”red”
face=”arial”
size=4>
Cor vermelha, fonte arial, tamanho 4 </font> <br>
<font
color=”blue”
face=”times
new
roman”
size=5>
Cor azul, fonte times new roman, tamanho 5 </font> <br>
<font
color=”yellow”
face=”verdana”
size=6>
Cor amarela, fonte verdana, tamanho 6 </font> <br>
<font
color=”green”
face=”courier
new”
size=7>
Cor verde, fonte courier new, tamanho 7 </font> <br>
<font
color=”#ccee00”
face=”wingdings”
size=4>
Cor ??????, fonte wingdings, tamanho 4 </font>
Lições para o lar
<font color=”red”
face=”arial”
<font color=”blue”
face=”courier”
<font color=”green” face=”verdana”
<font color=”silver”
size=7> D </font> <br>
size=6>
I
</font> <br>
size=5> M </font> <br>
face=”comic sans ms” size=4> E </font> <br>
<font color=”orange” face=”Tahoma”
size=3> N </font> <br>
48
<font color=”gold”
face=”Garamond”
size=2> S </font> <br>
<font color=”teal”
face=”book antiqua”
size=1> I </font> <br>
<font color=”gold”
face=”Garamond”
size=2> O </font> <br>
<font color=”orange” face=”Tahoma”
<font color=”silver” face=”comic sans ms” size=4> A </font> <br>
<font color=”green” face=”verdana”
<font color=”blue”
face=”courier”
size=6> D </font> <br>
<font color=”red”
face=”arial”
size=7> O </font> <br>
Experimente criar o alfabeto (A, B, C, D,...,Z) com cor, tipo e tamanhos de letras diferentes.
4.2.6
O corpo da Página
Utilizada para a formatação do fundo da página ou links. Podemos usar cores ou imagens. A cor
de fundo deve ser especificada de modo a não atrapalhar a visualização dos vários elementos que
compõem sua página. A mesma regra vale para imagens de fundo.
Os TAGs de definição de cores e imagens podem ser utilizados também para fundos de tabelas,
marquees, etc.
Exemplos:
<body bgcolor=”nome ou código da cor”>
Define a cor de fundo da página
<body background=”caminho/nome da imagem”>
Define a imagem do fundo da página.
Recomendamos usar imagens com menos
de 10KB de tamanho.
Exemplo 1:
<html>
<head>
<title> Fundos </title>
</head>
<body background=”\Meus Documentos\Mat_PPW\Imagens\fundomarmore.jpg ”>
<font color=”red”> Testando fundo da página com uma imagem </font>
</body>
</html>
49
Observe o TAG abaixo:
<body background=”\Meus Documentos\Mat_PPW\Imagens\fundomarmore.jpg ”>
Caminho
Arquivo
Exemplo 2:
<html>
<head>
</head>
<body
background="\Meus
Documentos\Mat_PPW\Imagens\fundomarmore.jpg"
bgproperties="fixed">
<font color="red" size="7"> Testando fundo da página com uma imagem <p>
Neste exemplo
<p>
vamos observar
um efeito muito
<p>
<p>
interessante chamado <p>
de marca d´água
<p>
Observe que
<p>
os parágrafos
<p>
Estão deslizando
<p>
sobre a Imagem
<p>
de fundo.
</font>
</body> </html>
Neste segundo exemplo podemos observar o atributo bgproperties com seu valor “fixed”. Com
este atributo conseguimos o efeito marca d´água.
Exemplo 3
50
<html>
<head>
</head>
<body bgcolor=”blue”>
<font color=”red”> Testando fundo da página com uma cor de fundo </font>
</body>
</html>
No exemplo acima será colocada a cor azul como fundo da página.
Além dos atributos já vistos temos também:
Text
Especifica a cor do texto.
Link
Especifica a cor dos links não visitados. O padrão é azul.
Vlink
Especifica a cor dos links visitados. O padrão é magenta.
Alink
Especifica a cor do link que está ativo no momento. O padrão é lilás
Observe o exemplo abaixo:
<html>
<head>
<title> TAG body </title>
</head>
<body bgcolor=”gray” text=”blue” link=”red” vlink=”green” alink=”black”>
Provavelmente o texto será exibido na cor azul. <p>
A cor dos links você vai visualizar mais tarde.
</body>
</html>
No exemplo acima especificamos como fundo da página a cor cinza, a cor do texto azul, dos links
vermelho, dos links que estão sendo visitados com verde e links visitados na cor preta. Cores
estranhas, não?
Recomendo que na medida do possível, seja deixada a cor padrão para os links para não
confundir a leitura do usuário.
51
4.2.7
Linha Horizontal
O TAG <hr> (horizontal rule) nos permite inserir numa página WEB uma linha horizontal na
posição em que foi especificado. É utilizado para a separação de tópicos e assuntos distintos.
Exemplo:
<html>
<head>
<title> Linha horizontal </title>
</head>
<body>
Primeira linha de texto <br>
Segunda linha de texto <br>
Terceira linha de texto <br>
<hr>
Quarta linha de texto
Quinta linha de texto
<hr>
</body>
</html>
Possui ainda os seguintes atributos:
Size
Deve ser especificado em pixels – Define a altura da linha
Width
Especifica a largura em pixels ou porcentagem
Align
Especifica o alinhamento – “left” – “center” – “right”
Noshade
Indica que a linha não deve receber o efeito sombra.
Color
Define a cor da linha
Exemplo com os atributos:
<hr size=50px width=100px align="right" color=”#0000ff”>
<hr width=100pt align="center">
4.2.8
Texto Pré-Formatado e Longas Citações
52
O TAG <pre> é utilizado para inserirmos parágrafos de um texto qualquer pré-formatado. Por
exemplo: Você deseja inserir um texto que já foi formatado no MS-Word. Para que o browser
respeite estas formatações utilize o TAG <pre>. Observe o exemplo abaixo com as formatações
de parágrafo.
<pre>
Não sabes, criança?
S´tou louco de amores...
Prendi meus afetos, formosa Pepita.
Mas onde?
No templo
No espaço
Nas névoas?!
Não rias, prendi-me
Num laço de fita
Castro Alves
</pre>
Já o TAG <blockquote> é utilizado para citações de textos longas.
Exemplo:
<blockquote>
O coração é o colibri dourado <br>
Das veigas puras do jardim do céu <br>
Um – tem o mel da granadilha agreste <br>
Bebe os perfumes, que a bonita deu.
</blockquote>
<blockquote><blockquote><blockquote>
O outro – voa em mais virentes balças <br>
Pousa de um risco na rubente flor <br>
Vive do mel – a quem se chama – crenças -, <br>
Vive do aroma – que se diz – amor. –
</blockquote></blockquote></blockquote>
<b> Castro Alves </b>
53
Utilize o blockquote também para fazer recuos de parágrafo.
5 - Multimídia
A maioria dos usuários que acessa a internet a partir de um ambiente gráfico como o Windows
estão acostumados com programas com recursos multimídia. Portanto a inclusão de imagem,
áudio e vídeo em uma home page é uma tentação natural.
Os principais elementos de multimídia de uma aplicação qualquer são:
5.1

Fotos ou imagens estáticas

Animação

Áudio

Vídeo
Imagens
Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de
cuidado, para não onerara transmissão para o usuário.
Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels.
Para inserir uma imagem, uso o TAG: <IMG>, que é único, não exigindo um TAG finalizado.
Exemplo:
<img src="figura1.gif">
Os atributos do TAG <img> são:
*src=”url”
Especifica o caminho e o nome do arquivo que contém a imagem.
Alt=”texto”
Exibe uma legenda quando o mouse passar sobre a imagem.
Align=”top” ou “middle” ou “bottom”
Especifica o alinhamento da imagem relativamente à linha de texto
onde é exibida.
Align=”left” ou “right”
Especifica o alinhamento da imagem relativamente às bordas
laterais da janela.
Width= “número” ou “porcentagem”
Especifica a largura de exibição da imagem independente do seu
54
tamanho original.
Height= “número”
Especifica a altura de exibição da imagem independente do seu
tamanho original.
Border= “número”
Especifica em pixels a largura da borda da imagem.
Vspace=”número”
Determina em pixels o espaço que deve ser deixado em branco na
parte de cima e na parte de baixo da imagem.
Hspace=”número”
Determina em pixels o espaço que deve ser deixado em branco nas
laterais da imagem.
* - Obrigatório
Exemplos
<img src=”C:\Meus Documentos\Mat_PPW\Diversos\Imagens\BOLA11.GIF”
ALT=”Clique aqui”> desenho de uma bola com o texto exibido na parte inferior da imagem.
<img
src=”C:\Meus
Documentos\Mat_PPW\Diversos\Imagens\BOLA11.GIF”
ALIGN=”middle” ALT=”Clique aqui”> desenho de uma bola com o texto exibido no centro da
imagem.
<img
src=”C:\Meus
ALIGN=”top” ALT=”Clique aqui”> desenho de uma bola com o texto exibido na parte superior da
imagem.
<img
src=”C:\Meus
ALIGN=”left” ALT=”Clique aqui”> imagem alinhada a esquerda
<img
src=”C:\Meus
ALIGN=”right” ALT=”Clique aqui”> imagem alinhada a direita
<img
src=”C:\Meus
WIDHT=50 HEIGHT=2 BORDER=0 ALIGN=”left” ALT=”Clique aqui”> imagem com largura e altura
definidas e sem bordas.
Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente
com o documento HTML.
5.2
Vídeos
Existem diversos formatos de arquivos de vídeo disponíveis no mercado, sendo que os três
arquivos mais comuns são:
55

AVI. É o formato padrão de clipes de vídeos da Microsoft

MOV. É o formato padrão de clipes de vídeos da apple e é também compatível com o
Windows.

MPEG. É um formato de vídeo compactado que vem se tornando um padrão na industria.
Existem diversas maneiras de inserir um vídeo em sua pagina, como sob a forma de um link que
ao ser clicado, executa o programa responsável pela sua exibição.
5.2.1
Usando o Comando IMG Para Inserir Vídeos
A maneira mais simples de incluir um clipe de vídeo na sua pagina é utilizar as opções do
comando IMG. O principal parâmetro usado para inserir vídeo é a dynsrc. Esse comando funciona
no Internet Explorer 3.0 e não é reconhecido pelo Netscape 3 ou superior.
Exemplo:
<IMG
DYNSRC=”terra.avi”
SRC=”terra.gif”
WIDTH=50
HEIGHT=50
LOOP=INFINITE
ALIGN=RIGHT>
Esse comando diz para o browser exibir o arquivo terra.avi, a opção LOOP faz com que o vídeo
seja exibido continuamente quando o valor INFINITE for especificado, ou o número de vezes
determinado por um número.
Exemplos utilizando os atributos do comando IMG:
<IMG SRC=”terra.gif” DYNSRC=”terra.avi” START=MOUSEOVER> - Como padrão, a imagem
é executada assim que o arquivo é aberto, contudo você pode especificar através da opção
MOUSEOVER para que ele seja executado sempre que o mouse passar sobre a imagem.
<IMG SRC=”terra.gif” DYNSRC=”terra.avi” CONTROLS> - Para exibir um botão e barra de
execução abaixo da imagem.
5.2.2
Usando o Comando Embed para Inserir Vídeos
Esse comando permite a exibição não somente de vídeo, mas também de arquivos de diferentes
tipos em uma pagina HTML e que são executados por algum plug-in previamente instalado.
56
Os atributos do comando EMBED são:
ALING=
Especifica o alinhamento
BORDER=”pixels”
LEFT
– esquerda (padrão)
RIGHT
– direita
TOP
– parte superior do applet
BOTTOM – parte inferior do applet
Especifica o tamanho, em pixels, da borda do
applet
FRAMEBORDER=”NO”
Especifica que a moldura não tem bordas
HEIGHT=”pixels”
Especifica a altura, em pixels, requerida pelo
applet.
HIDDEN=”true” ou “false”
Especifica se o plug-in é visível na página
HSPACE=”pixels”
Especifica uma margem, entre as bordas esquerda
e direita do applet e o texto e as imagens
circundantes.
NAME=”applet name”
Especifica o nome do applet
PALLETE=”foreground” ou “background”
Só é relevante na plataforma Windows. Um valor
foreground faz a paleta usada pelo plug-in ser a
paleta de primeiro plano é o valor background faz a
paleta usada pelo plug-in ser a paleta de segundo
plano.
PLUGINSPACE=”endereço”
Especifica o URL que contém as instruções para a
instalação do plug-in. Esse URL é usado pelo
processo de instalação assistido, se o plug-in
registrado para o tipo de MIME dessa tag EMBED
não for encontrado
VSPACE=”pixels”
Especifica uma margem, em pixels, entre as bordas
superior e inferior do applet e o texto e as imagens
circundantes.
TYPE=”MIMEtype”
Especifica o tipo de MIME da tag EMBED, o que,
por sua vez, determina qual plug-in deve ser
carregado. Use TYPE em vez de SRC para pluginstrução que não exige dados ou que busque
todos os seus dados dinamicamente.
57
WIDTH=”pixels”
Especifica a largura, em pixels, em que o objeto
deve caber. O objeto tem sua escala alterada de
acordo com a altura e a largura especificadas.
5.2.3
O comando Noembed
Para manter a compatibilidade com browsers antigos, use o comando <NOEMBED> para exibir
uma mensagem indicando que o browser não tem capacidade para exibir o objeto.
5.3
Música
Existem duas maneiras de colocar músicas em sua home page. A primeira é com o TAG
<BGSOUND> que só é reconhecido pelo Internet Explorer.
Para utilizar este TAG siga o exemplo:
<BGSOUND SRC="arquivo.mid">
Onde arquivo.mid é o arquivo de música. Caso você queira que a música repita-se, adicione o
atributo loop="infinite".
A segunda maneira é com o TAG <EMBED> que, por ser reconhecido pelo Internet Explorer e
Netscape, é recomendado.
Para utilizá-lo, siga o exemplo:
<EMBED SRC=“arquivo.mid">
É recomendado usar arquivos midi por serem bem menores que os wavs.
5.4
Gráficos para a Web
Gráficos são elementos importantes na construção de sites web. Além das preocupações comuns
relativas à beleza e criatividade, este tipo de gráfico deve ser criado pensando nas limitações
relativas a cores e tamanho do arquivo gerado...
58
5.4.1
Vetores x Mapas de bits
Existem basicamente dois tipos de imagens feitas por computador: vetoriais e bitmaps. Vetores
são imagens definidas a partir de regras como "desenhe uma linha de 10,10 até 120,30", "desenhe
um círculo com centro em 50,60 e raio 10", "pinte a área em 20,20". Os bitmaps são diferentes:
você tem o desenho feito ponto a ponto, como se ele fosse pintado sobre papel quadriculado,
onde cada quadradinho pode ser pintado de apenas uma cor.
Uma imagem vetorial simples é um arquivo pequeno, que pode ser facilmente desenhada em
vários tamanhos sem perder qualidade. As extensões de gráficos vetoriais mais conhecidas são
WMF (Windows Metafile), CDR (Corel Draw), DWG, DXF (ambos do AutoCAD) e AI (Adobe
Illustrator).
Uma imagem em mapa de bits é mais detalhista, mas geralmente ocupa mais espaço que uma
imagem vetorial simples. Este formato é necessário quando se utiliza imagem digitalizada, mas
apresenta problemas para ser mostrada em diversos tamanhos. Este tipo de image perde
qualidade nos tamanho muito pequenos e fica grosseira em tamanhos muito grandes. As
extensões de gráficos mais comuns são BMP (Windows Paint), PCX (Paintbrush), PSD (Adobe
Photoshop), CPT (Corel Photopaint), TIF (usado em editoração), GIF e JPG (usados na Internet).
Na Web, a grande maioria dos gráficos é bitmaps com extensão GIF e JPG. A razão é que estes
formatos são bitmaps comprimidos. Os arquivos GIF e JPG são bem menores, por exemplo, que a
mesma imagem em formato BMP.
5.4.2
Tamanho do arquivo
Existe uma série de fatores que influenciam o tamanho de um arquivo gráfico para a Internet:

Número de pontos. Obviamente, a largura e a altura de um gráfico influenciam
diretamente o tamanho do arquivo.

Número de cores. É necessário guardar informação sobre cores para cada ponto de um
bitmap. Em um gráfico que usa cores realísticas, cada ponto ocupa 3 bytes e é possível
representar mais de 16 milhões de cores. O mais comum, na Internet, é usar arquivos
onde cada cor é guardada em um byte, permitindo usar até 256 cores.

Compressão. Os formatos GIF e JPG guardam os bits comprimidos. Esta compressão
consiste em achar repetições dentro do arquivo e eliminá-las.
59
A maioria das pessoas imagina que apenas a dimensão da figura (sua altura e largura em pontos)
modifica o tamanho. Como um desenvolvedor de gráficos para a Internet, você deve preocupar-se
bastante com a compressão e principalmente com o número de cores de cada figura. Uma
mudança nestes itens pode facilmente reduzir seu arquivo à metade do seu tamanho original. Em
alguns casos, o tamanho chega a ser reduzido a um décimo.
5.4.3
Cores
Como já dissemos, o número de cores influencia fortemente o tamanho do arquivo. Saber utilizálas corretamente pode ser muito trabalhoso, mas vale a pena. Não estou sugerindo que você faça
apenas figuras em preto e branco, de agora em diante. O uso de várias cores é fundamental para
a aparência do site. A mágica está em reduzir o tamanho do arquivo sem perder qualidade e
variedade de cores. Acredito, isto é possível!
Inicialmente você precisa entender em detalhes o quanto as cores influenciam o seu arquivo e
como elas são realmente armazenadas e tratadas pelo browser. Observe a tabela abaixo, que
mostra o tamanho de um arquivo de 100 x 300 pontos com diversos esquemas de cores:
Tipo de arquivo
Número de Cores
Bits por ponto
Tamanho arquivo*
Preto & Branco
2
1
1.250
Colorido, 16 cores
16
4
5.000
Colorido, 256 cores
256
8
10.000
Cor real, 16 bits
32.768
16
20.000
Cor real, 24 bits
16.777.216
24
30.000
* Bitmap de 100 x 100 pontos, sem compressão, sem cabeçalhos, sem palette, em bytes.
5.4.4
Palettes
Quando se utiliza cor real, cada ponto tem sua cor definida através dos componentes em vermelho
(red), verde (green) e azul (blue). Estas são as cores básicas para formação de todos os milhões
de cores no nosso monitor.
Se você já definiu cores de fundo para páginas, links ou tabelas em HTML, deve conhecer o
esquema RGB. Cada cor é definida como um número hexadecimal de 6 dígitos. São 2 dígitos para
vermelho, dois para verde e dois para o azul. O valor de cada cor vai de 00 até FF (255 em
decimal). Cada componente ocupa um byte e permite, portanto, 256 possibilidades.
60
Multiplicando 256 por 256 por 256, temos as 16.777.216 cores disponíveis.
Quando se utiliza um número menor de cores, não vale a pena gastar três bytes para definir a cor
de cada ponto. Nem tampouco se deve utilizar alguns poucos bits para definir a cor, o que deixaria
o número de opções muito restrito.
A solução é usar uma tabela de cores, adicionada ao início do arquivo, descrevendo as cores a
serem utilizadas no arquivo. Esta tabela é conhecida como "palette".
Observe alguns arquivos com palettes de 8 cores (3 bits) e a respectiva palette logo abaixo. Note
que, do total dos mais de 16 milhões de cores disponíveis, apenas algumas foram escolhidas para
fazer parte de cada palette.
O tipo de arquivo mais comum é o que o utiliza uma palette de 256 cores (8 bits). Isto permite uma
grande combinação de cores e uma razoável economia em bytes. Só é recomendável usar mais
que 256 cores quando o efeito final precisa ter uma aparência "fotográfica".
5.4.4.1 A palette dos browsers
Um dos problemas básicos dos gráficos na web é saber como as cores serão visualizadas pelos
usuários. Todo bom projetista de sites possui uma placa de vídeo capaz de mostrar milhões de
cores, mas será que o usuário também tem uma placa assim? A resposta, na maioria das vezes, é
não.
A maioria dos usuários utiliza sua placa de vídeo no modo de 256 cores. Alguns usuários possuem
placas simples, outros não sabem como instalar o driver mais sofisticado e outros preferem 256
cores para melhorar a performance do Windows, especialmente em jogos.
Mesmo usando 256 cores, seu usuário tem algumas destas cores reservadas para o uso do
sistema e do próprio browser. Assim, sobram em torno de 216 cores disponíveis para as suas
figuras. Se você utiliza gráficos com palettes com muitas cores, é provável que o usuário não
consiga ver o gráfico como você o projetou.
O Netscape e o Explorer possuem, inclusive, uma palette padronizada de 216 cores para usar nas
páginas e nos seus gráficos. Esta palette inclui todas as cores básicas (verde, vermelho, azul,
amarelo, ciano, magenta, preto e branco) e pelo menos 4 graduações entre cada uma destas
cores.
61
Se você utilizar somente as cores, todos os usuários com 256 cores no seu monitor (ou mais)
verão sua imagens exatamente como você projetou. Se você utilizar uma palette com mais cores
ou cores diferentes das mostradas acima (por exemplo, uma palette com 200 tons de azul), os
usuários verão os gráficos de forma diferente, com as cores adaptadas para a palette padrão.
Se você faz gráficos especificamente para a web, é melhor até configurar seu programa de
desenho com a palette dos browsers, para ter uma noção precisa de como os internautas comuns
verão seus gráficos.
5.4.5
GIF
O formato de arquivos GIF (Graphics Interchange Format) foi criado pela Compuserv, um dos
maiores serviços on-line dos EEUU (algo parecido com as antigas BBS). Ele é um formato de
bitmaps, trabalha com palettes e inclui uma conversão conhecida como LZW, que é muito eficiente
para determinados tipos de arquivos.
A compressão do arquivo GIF consiste em codificar linhas de pontos que possuem várias cores
repetidas em seqüência. Se uma linha, por exemplo, possui 10 bits na cor 30, ela pode ser
compactada. Normalmente, a linha seria gravada como "30, 30, 30, 30, 30, 30, 30, 30, 30, 30".
Depois de compactada, ela seria transformada em algo como "10 x 30". Obviamente, os bits
gravados no arquivo não são exatamente como no exemplo acima, mas a idéia é a mesma.
5.4.6
JPEG
O formato JPEG (Joint Photographic Experts Group) ou JPG, é adequado para a compressão de
arquivos com fotos ou desenhos com muitos detalhes. Ele pode ser configurado em diferentes
níveis de compressão que vão de 10 a 100. No nível 100, a
imagem obtida do arquivo JPG é idêntica ao original. Nos outros níveis, a imagem é ligeiramente
prejudicada, embora ainda seja muito semelhante.
5.4.7
Ferramentas para compressão
Existem diversas ferramentas para reduzir o tamanho de seu gráfico para a web. As mais
interessantes são:

Adobe Photoshop 4 - Este é, provavelmente, o software mais utilizado para editar
gráficos bitmap profissionais. Ele possui opção para ler a grande maioria dos formatos de
62
bitmap e gravá-los como GIF ou JPG. Para usar a compressão de JPG, basta usar o menu
que aparece quando você pode para salvar um JPG. Para comprimir um GIF, converta-o
inicialmente para RGB usando a opção de menu "Image > Mode > RGB". Em seguida, use a
opção de menu "Image > Mode > Indexed Colors...", selecione a palette "Adaptative" e o
número de bits (de 3 a 8). Depois salve como GIF.

Corel PhotoPaint 7- Este software, parte do pacote Corel Draw!, também é ótimo para
editar bitmaps. Ele pode gravar arquivos GIF ou JPG. O menu de compressão de arquivos
JPG aparece logo após o diálogo de "Salvar...", como no Photoshop. Para reduzir a palette de
um GIF, use o comando "Imagem > Converter para... > Cor da paleta", selecione a opção
"otimizada" e indique o número de cores (8, 16, 32, 64, 128, 256), salvando como GIF no final.

GIF Lube - Este site na Internet presta um serviço muito interessante. Acessando-o, você
pode fornecer a URL de uma imagem na web (ou no seu disco local) e convertê-la nas
diversas palettes reduzidas de GIF ou nos diverso nível de JPG. Tudo é muito simples e
prático. No final, você escolhe a imagem mais adequada e usa o próprio browser para salvar a
imagem reduzida. Se você anda sem paciência para ficar selecionando opções no Photoshop
ou no Photopaint, esta é a sua melhor opção...
5.4.8
Conclusão
Criar gráficos no computador é uma tarefa complicada. Na Internet, existem algumas dificuldades
extras, como as restrições de tamanho do arquivo e palette. Entretanto, grande parte da beleza de
um site vem de seus gráficos. Por isso, vale a pena estudar bem o tema e aplicar ao máximo os
recursos disponíveis...
5.5
O Comando Maerquee
O Internet Explorer introduziu um comando muito simpático chamado MARQUEE, que faz com
que m texto especificado fique rolando em uma determinada área da página.
A seguir a sintaxe completa do comando MARQUEE
<MARQUEE>
ALIGN= posição
BEHAVIOR = tipo
BGCOLOR = cor
63
DIRECTION = direção
HEIGHT = n
HSPACE = n
LOOP = n
SCROLLMOUNT = n
SCROLLDELAY = n
VSPACE = n
WIDTH = n>
ALINGN = posição
Especifica como o texto que envolve o MARQUEE
será alinhado. Pode conter os seguintes valores:
TOP – Alinhado pela parte superior
MIDDLE – Alinhado pelo meio
BOTTOM – Alinhado pela parte inferior
BEHAVIOR = tipo
Especifica o comportamento do texto, ou seja,
como será a sua rolagem pela janela. Pode conter
os seguintes valores:
SCROLL – Inicia a rolagem introduzindo o texto de
um lado e rola o texto até que ele saia
completamente da janela no lado oposto ao que
começou. Após a última letra Ter saído da tela, o
texto
reaparece
no
canto
inicial
repetindo
continuamente o processo.
SLIDE – Inicia a rolagem introduzindo o texto de
um lado e rola o texto até que ele atinja a borda
oposta. Quando a primeira letra do texto bater na
borda, o texto para de rolar e permanece naquela
posição.
ALTERNATE – Cria um efeito de movimento para o
texto, que inicia de um lado, entrando pela borda
da janela e, ao bater na outra borda, inverte seu
deslocamento voltando para a borda inicial.
64
BGCOLOR = cor
Especifica a cor do texto do segundo plano. Caso
não seja especificada uma cor, é assumida a cor
de segundo plano atual.
DIRECTION = direção
Especifica a direção que o texto usará para o
deslocamento. A direção padrão é LEFT, a outra
opção é RIGHT.
WIDTH = n
Especifica a largura do painel, ou área do
MARQUEE. Se for especificado um numero, ele é
considerado como quantidade de pixels. Se for
seguido
pelo
sinal
%,
indica
a largura
do
MARQUEE em porcentagem relativa à janela.
HSPACE = n
Especifica em pixel a largura da margem esquerda
e direita do MARQUEE.
LOOP = n
Especifica o numero de vezes que o MARQUEE
será executado, se o valor de n for -1 ou INFINITE
ele será executado indefinidamente.
SCROLLMOUNT = n
Indica a quantidade de pixels usada para deslocar
o MARQUEE a cada movimentação.
SCROLLDELAY = n
Especifica, em milissegundos, o tempo entre cada
deslocamento do texto.
VSPACE = n
Especifica, em pixels, as margens superior e
inferior do MARQUEE.
HEIGHT = n
Especifica a altura do painel ou a área do
MARQUEE. Se for especificado um número, ele é
considerado como quantidade de pixels. Se for
seguido do sinal %, indica a altura do MARQUEE
em porcentagem relativa à janela.
5.6
Dicas
Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido
com o do DOS. Existe uma grande diferença entre esses caminhos. Na WEB você deve inverter a
barra de espaços, usando a barra / no lugar da barra \, para separar diretórios.
65
O browser sempre assume o diretório atual como o inicial para procurar um arquivo especificado
em um link. Como exemplo vamos usar a seguinte estrutura de diretórios.
C:\
HTML
Exemplos
Teste
A partir do diretório raiz do drive C: temos um diretório chamado HTML. Dentro de HTML temos
um diretório chamado Exemplos e dentro deste outro chamado Teste.
Vamos tomar como referência que estamos trabalhando no diretório Exemplos.
Se desejo especificar uma imagem (imagem.gif) que esteja no mesmo diretório (Exemplos)
<img src=”imagem.gif”>
Se desejo especificar uma imagem (imagem.gif) que está no diretório abaixo que é Teste.
<img src=”Teste/imagem.gif”>
Se desejo especificar uma imagem (imagem.gif) que está no diretório acima que é HTML.
<img src=”../imagem.gif”>
Se desejo especificar uma imagem (imagem.gif) que está em outra unidade.
<img src=”file://d:/imagem.gif”>
5.7
Criando Listas Ordenadas
Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador
encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando
números, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas são iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente, </OL>.
Exemplo:
66
<OL>
<LI>É facil fazer uma Home Page
<LI>Tem que ter paciência
<LI>Bons recursos
<LI>E não exagerar em imagens
</OL>
Resultado:
1. É facil fazer uma Home Page
2. Tem que ter paciência
3. Bons Recursos
4.E não exagerar em imagens.
5.7.1
Criando Listas não Ordenadas
Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de elas
não definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por
símbolos, que podem ser bola, quadrado, e uma bola vazia. Elas são iniciadas com a TAG <UL> e
são respectivamente terminadas com </UL>. E seus elementos são que nem as numeradas com
<LI>
Exemplo:
<UL>
<LI>Internet
<LI>Intranet
<LI>BBS
</UL>
Resultado:
5.7.2

Internet

Intranet

BBS
Atributos Adicionais do Elemento UL
O Netscape introduziu o atributo TYPE também em listas ordenadas. Ele recebe o tipo do
marcador que será utilizado ao lado dos itens da lista, o qual pode ser CIRCLE, SQUARE OU
DISC.
67
5.8
Links
Os Links servem para criar atalhos que permitem a interligação entre documentos HTML e até
arquivos FTP.
Os links podem assumir o formato de:
Textos
<a href=http://www.google.com.br> Ir para o Google </a>
Imagens
<a href=”http://www.sp.senai.br”> <img src=”../imagens/senai.jpg”> </a>
5.8.1
Parte de imagens – imagens sensibilizadas
Exemplo: O menu superior ou esquerdo da Home Page da UOL.
Normalmente apresentam uma cor e sublinhado no caso dos textos. No caso das imagens
aparecem com uma borda ao redor da mesma. A cor varia conforme seu status.

Não visitado – Link

Ativo – ALink

Já visitado - VLink
Estes três atributos já foram vistos no TAG body.
E ainda os links podem ser:
Locais – Com dois tipos:
Conduzem o internauta a uma outra página
do mesmo site.
Conduzem o internauta para uma outra
parte da mesma página.
68
Topo
Vá para A
index.htm
compras.htm
Ponto A
A.htm
Volte para o topo
Este é o
info.htm
B.htm
ponto A
...
Observe agora o código fonte de cada situação
<html>
<html>
<head>
<head>
<title> Página Principal </title>
</head>
</head>
<body>
<a name=”topo”> Topo </a> <p>
<body>
<a href=”#pontoA”> Ponto A </a>
Para comprar clique em
...
<href=“compras.htm”> compras </a> <p>
<a name=”pontoA”> A </a> <p>
<a href=”#topo”> Topo </a>
Para informações clique em
<a href=”info.htm”> Informações </a>
</body>
</html>
</body>
</html>
5.8.2
Externos
São ligações que nossa página possui para outros sites.
Exemplo:
69
<html>
<head>
</head>
<body>
Para comprar nas lojas americanas clique em <href=“http://www.americanas.com”> lojas
americanas </a> <p>
Para comprar no submarino clique em <href=“http://www.submarino.com.br”> submarino </a> <p>
</body>
</html>
E-mail – Cria uma conexão direta com o software de correio do usuário, predefinindo o endereço
do destinatário automaticamente. Observe o código fonte abaixo.
<html>
<head>
<title> Link com E-mail </title>
</head>
<body>
Dúvidas, sugestões ou críticas escreva para
<a hef=”mailto:[email protected]”> [email protected] </a>
</body>
</html>
Obs: No lugar de fulano_de_tal coloque o seu e-mail.
Download – Você deseja disponibilizar para os internautas alguns arquivos para download.
Observe o código fonte:
<html>
<head>
<title> Downloads </title>
</head>
<body>
70
Para fazer o download do arquivo clique <a href=”arquivo.zip”> aqui </a>
</body>
</html>
5.8.3
Links Relativos e Links Absolutos
C:\
HTML
Exemplos
Imagens
Links relativos não incluem o caminho completo da localização do arquivo:
<img src=”imagens/imagem.gif”>
Links absolutos especificam todo o caminho até o arquivo:
<img src=”c:/HTML/Exemplos/imagens/imagem.gif”>
Se a pasta Exemplos for copiada para outra unidade com seus sub-diretórios, todos os links
relativos continuarão a funcionar sem alteração. Já os absolutos, terão que ser refeitos. Portanto
cuidado!!!
5.9
Tabelas
O uso de tabelas melhora muito a aparência de uma página, pois permite o alinhamento de textos
e imagens, além de ordenar as informações de forma ordenada.
Uma tabela é criada pelo comando <table> </table> e consiste em linhas e colunas. A intersecção
de uma linha com uma coluna é chamada de célula. As linhas são criadas pelo TAG <tr> </tr> e as
células pelo comando <td> </td>. O sentido de criação das tabelas é de cima para baixo, da
esquerda para a direita.
71
<tr>
<table>
</table>
</tr>
<td>
<td>
<td>
Linha1Coluna1
Linha1Coluna2
Linha1Coluna3
</td>
</td>
</td>
<td>
<td>
<td>
Linha2Coluna1
Linha2Coluna1
Linha2Coluna1
</td>
</td>
</td>
Agora ficou fácil! Observe o exemplo abaixo:
<html>
<head>
<title> Aprendendo a criar Tabela </title>
</head>
<body>
<table>
<tr>
<td> Linha1Coluna1 </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
72
Não se esqueça. Para:
Começar/Finalizar uma tabela
<table> ... </table>
Começar/Finalizar uma linha
<tr> ... </tr>
Começar/Finalizar uma célula
<td> ... </td>
Cada TAG da tabela possui alguns atributos que podem alterar o aspecto da tabela, deixando-a
mais bonita e estruturada.
Atributos para o TAG <table>
Atributo
Valor
Função
Border
n
Define a largura da borda.
Bordercolor
#cor
Define a cor de toda a borda da tabela.
Bordercolorlight
#cor
Define somente a cor da borda clara da tabela (borda
superior).
Bordercolordark
#cor
Define somente a cor da borda clara da tabela (borda
inferior).
Cellspacing
n
Define o espaço entre as células.
Cellpadding
n
Define o espaço entre o conteúdo e a borda da célula.
Width
n ou %
Especifica a largura da tabela em pixels ou em % em
relação à largura da tabela.
Align
left, center ou right
Define o alinhamento da tabela na página
Bgcolor
#nnnnnn ou cor
Define uma cor de fundo
Background
imagem
Define uma imagem de fundo
Atributos para o TAG <tr>
Atributo
Valor
Função
Align
Define o alinhamento horizontal do conteúdo da
left, right, center ou justify
linha.
Valign
top, middle, bottom ou baseline
Define o alinhamento vertical do conteúdo da linha.
Atributos para o TAG <td>
Atributo
Valor
Função
Align
left, right, center ou justify
Define o alinhamento horizontal
do conteúdo da célula.
Valign
top, middle, bottom, baseline
Define o alinhamento vertical do
conteúdo da célula.
73
Nowrap
Impede quebra de linha.
Colspan
n
Define a largura da célula em
número de colunas.
Rowspan
n
Define a largura da célula em
número de linhas.
Bgcolor
#cor
Define a cor de fundo da célula.
Background
Imagem
Define uma imagem de fundo da
célula.
Exemplos:
Atributos das tabelas
<html> <head> <title> Tabelas </title> </head>
<body>
5.9.1
Construindo Tabelas com o Elemento Table
O TAG <TABLE> é utilizada para a representação de dados tabulares. A estrutura e o conteúdo
da tabela devem ficar dentro das TAGs <TABLE> </TABLE>
5.9.2
O Título da Tabela (Elemento Caption)
A TAG <CAPTION> especifica o título de uma tabela. Por exemplo:
<CAPTION>Notas da primeira avaliação</CAPTION>
5.9.3
Table Headings (Elemento TH)
A TAG <TH> é usada para especificar as células de cabeçalho da tabela. Essas células são
diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento TH pode ser
apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas podem
ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum
elemento TH, isto é, não conter em nenhuma célula em destaque.
O TAG dela é:
<HT>texto em destaque</HT>
74
Observações:
Elas devem ficar, assim como todas, dentro da TAG <TABLE>.
5.9.4
Table Data (Elemento TD)
A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de dados comuns (e não
cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum
destaque e alinhamento à esquerda. Assim como o TH pode-se construir células em branco,
usando o elemento TD, como no exemplo a seguir:
<TD>Células de dados</TD>
Observações:
A TAG de terminação, <TD>, também é opcional.
5.9.5
End Of Table Row (Elemento TR)
A TAG <TR> indica o fim de uma linha na tabela. Cada linha da tabela pode conter várias células,
e portanto, é necessário que se faça uso de uma marcação que indique exatamente o ponto de
quebra de uma linha e início de outra. Toda linha deve terminar com um <TR>, com exceção da
última linha da tabela, que dispensa o TR porque o uso da própria marcação de fim de tabela
</TABLE> torna implícito o fim da linha.
5.9.6
Atributos para a Tabela
As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns
atributos. Os principais são:
5.9.7
Border
Um atributo opcional para ser usado com TABLE é o atributo BORDER. Se ele estiver presente, a
tabela será formatada com linhas de borda.
Atenção: Todas as explicações acima como as que estão por vir, foram feitas, para que você
possa saber o que significa a TAG em questão.
75
Exemplo:
<TABLE BORDER>
<CAPTION> Nota da primeira avaliação </CAPTION>
<TD>Notas/Alunos</TD>
<TH>Eduardo</TH>
<TH>Ana Lúcia</TH>
<TH>Andréa</TH>
<TR>
<TH>Notas</TH>
<TD>8,0</TD>
<TD>9.3<TD>
<TD>7.8</TD>
<TR>
<TH>No de Inscrição</TH>
<TD>376234809</TD>
<TD>387349048</TD>
<TD>502350432</TD>
</TABLE>
Veja o resultado:
O atributo BORDER pode também receber um valor que vai estabelecer qual a espessura (além
da existência)da linha de borda da tabela (BORDER="valor"). Se o valor atribuído for 0 (zero), o
BORDER funciona exatamente como o caso padrão, sem o BORDER. Dessa maneira, é possível
colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o BORDER.
<TABLE BORDER=5>
<TD>TESTE</TD>
<TD>TESTE2</TD>
<TD>TESTE3</TD>
<TR>
76
<TD>TESTE4</TD>
<TD>TESTE5</TD>
<TD>TESTE6</TD>
</TABLE>
Veja o resultado:
5.9.8
Align
Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro de uma
célula, com ralação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda
uma linha da tabela.
O exemplo abaixo, mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT, para
alinhar à esquerda, centralizar ou alinhar à direita, respectivamente.
<TABLE BORDER>
<TD>Primeira célula</TD>
<TD>Segunda célula</TD>
<TD>Terceira célula</TD>
<TR>
<TD ALIGN="CENTER">Centro</TD>
<TD ALIGN="LEFT">Esquerda</TD>
<TD ALIGN="RIGHT">Direita</TD>
<TR>
</TABLE>
77
Veja o resultado:
5.9.9
Valign
Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas superior e
inferior.
Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na parte de
baixo, respectivamente.
Veja o exemplo:
<TABLE BORDER>
<TD>Teste de alinhamento</TD>
<TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD>
<TD VALIGN="bottom">BOTTOM</TD>
</TABLE>
Veja o resultado:
5.10
O Comando Meta
Através deste comando, podemos criar documentos dinâmicos ou informações especificas que
serão usadas pelo servidor, em resposta a uma solicitação do usuário.
78
Para entender melhor o uso desse comando, você deve entender um pouco do funcionamento do
protocolo HTTP. Quando um browser solicita um documento contido em um servidor web, este
responde à requisição enviando o documento solicitado precedido de um cabeçalho, indicando
para o browser algumas informações para que ele possa exibir corretamente as informações que
serão enviadas. Esse cabeçalho é transparente para o usuário e não faz parte do documento
HTML.
Usando o comando META o desenvolvedor pode incluir informações nesse cabeçalho de modo
que o browser possa executar ações baseadas no conteúdo delas.
A sintaxe básica do comando é:
<META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição URL=url>
Onde:
HTTP-EQUIV=resposta
Permite ao desenvolvedor da página uma maneira de criar ou identificar informações que devem
ser inseridas nos cabeçalhos de um documento devolvido por um servidor em resposta a uma
solicitação de um browser.
CONTENT=descrição
Define a informação associada ao nome da variável ou metainformação.
NAME=descrição
É o nome da metainformação ou variável que está sendo criada, e que deve ser atribuído a um
conteúdo através da opção CONTENT.
5.10.1 Documentos Dinâmicos
A maioria dos browsers permite duas maneiras de carregar automaticamente outros documentos
sem a interferência do usuário. Uma das técnicas é chamada de Server push, na qual o servidor
envia informações para o browser periodicamente, nesse caso a conexão é mantida aberta o
tempo inteiro e o servidor tem total controle sobre quando e como enviará os dados. A outra
técnica é chamada de client pull, na qual o servidor, orientado por um comando META contido no
documento, envia informações em intervalos de tempo pré-definidos.
79
5.10.2 Carregando Outro Documento Automaticamente
Usar o recurso do autocarregamento é indicado quando você deseja exibir uma pagina inicial e
depois outra pagina. Isso é conseguido por meio do uso do comando META HTTP-EQUIV.
Veja o exemplo:
<HTML>
<HEAD><TITLE> Carregando outro documento automaticamente</TITLE>
<META HTTP-EQUIV=”refresh” CONTENT=”5; URL=nomedoarquivo.htm”>
</HEAD>
<BODY>
<H2>Este documento será exibido por 5 segundos, em seguida o documento nomedoarquivo.htm
será carregado automaticamente.</H2>
</BODY>
</HTML>
5.11
Mecanismos de Busca da Internet e o Comando Meta
Veja a seguir, encontraremos uma lista com os principais mecanismos e seus endereços:
Keywords – É a diretiva mais importante. Ela deve conter uma lista das palavras-chave associadas
ao documento separadas por virgula. Alguns mecanismos fazem diferenciação entre maiúsculas e
minúsculas.
Description – O conteúdo dessa diretiva é exibido para o usuário juntamente com o título da
pagina, como resultado de uma pesquisa
5.12
Formulários
A linguagem HTML também permite que o cliente (navegador) interaja com o servidor,
preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um
Guest Book (formulário) em meu site onde eu peço a todos os visitantes que dêem suas opiniões.
Essas informações devem ser tratadas por programas, denominados scripts, que podem
armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento
HTML, uma URL, ou algum outro tipo de dado para o cliente.
80
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê
uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários
com janelas de entrada de textos, botões, etc.
É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que
entendem os dados, como mencionado. É aí que entra a necessidade da interface CGI. Tal
interface permite que o servidor se comunique com o script que vai atuar sobre essas
informações, retornando os resultados para o navegador.
A confecção de scripts exige que se aprenda uma linguagem de programação chamada PERL.
Abaixo temos alguns endereços que processará os dados para você, e os retornará via e-mail.
Aqui estão as referências:

The Perl Language Home Page - http://www.perl.com/perl/

SCG Software Archive - http://iamwww.unibe.ch:80/~scg/Src/

Perl reference materials - http://www.geek-girl.com/perl/perl.html

Server Side Scripts - http://www.cosy.sbg.ac.at/www-doku/tools/bjscripts.html

Perl FAQ - http://www.cis.ohio-state.edu:80/text/faq/usenet/perl-faq/top.html
5.12.1 Construindo Formulários com o Form
Para fazer formulário, você tem que colocar as TAGs <FORM> </FORM>. Todos os outros
comandos, devem ficar dentro dessas TAGs. Ok?!
5.12.2. Atributos para o Form
O elemento FORM pode conter dois atributos que determinaram para onde será mandada a
entrada do FORM. Vejam como eles são:
5.12.2.1
Get
Esse atributo indica totalmente como o dado é passado para o script ou programa definido no
atributo ACTION.
5.12.2.2
Post
Passa os dados para a entrada padrão do sistema operacional.
81
Vale a pena lembrar, que será mostrado, abaixo, um exemplo completo, de como fazer sua página
com formulários. Também será dado um endereço, de um servidor, que processa os dados e os
retorna via e-mail. Aí poderá ser lido normalmente. Agora será explicado como colocar os campos
de dados, mas se não estiver entendendo, copie o exemplo, e só altere os dados, com o seu
nome, e suas informações.
5.12.2.3
Input
A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode
receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto,
etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valo
mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da entrada do
elemento. Por exemplo, quando você for receber os dados, já, processados, irá vir o name :
=resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo de
entradas de dados. Veja como se usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">
Para mudar o tamanho, da janela padrão, você tem que colocar o comando SIZE. Por exemplo:
<INPUT TYPE="TEXT" NAME="nome" SIZE=8>(ou número desejado)
Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à janela.
Por exemplo:
<INPUT TYPE"TEXT" NAME="nome" SIZE=8 VALUE="texto.">
Olhe como ficaria:
5.13
Tipos de Elementos Type
Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha,
que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o seguinte:
<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>
82
5.13.1 Type="Radio"
Quando o usuário deve escolher uma resposta em uma única alternativa, de um conjunto, utilizase o RADIOButtons. Um exemplo típico do uso de tais botões, é cuja resposta pode ser SIM ou
NÃO. É preciso que todos os rádios buttons es um mesmo grupo, ou seja, referentes a mesma
pergunta, tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME e
VALUE, são necessários. Veja a seguir:
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="sim">sim<p>
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="nao">não<p>
Repare:
5.13.2 Type="Password"
Este comando serve para fazer um campo de senhas! Quando a pessoa digitar, aparecerá o sinal
de "*"! O comando é:
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGTH=6>
5.13.3 Type="Checkbox"
Esse comando é válido quando apenas uma resposta, é esperada. Mas nem sempre está é a
situação...O tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa,
pode ser escolhida.
Definição dos checkboxs:
<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">Netscape<p>
<INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">Internet Explorer<p>
<INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">Mosaic<P>
<INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P>
83
Veja o resultado:
5.13.4 Type="Submit"
Esse é o botão que submete os dados do formulário quando pressionados, ou seja, possibilitam, o
envio, dos dados para o script que vai tratá-los. Veja como se adiciona o botão:
<INPUT TYPE="SUBMIT" VALUE="enviar">
Veja como ficará:
5.13.5 Type="Reset"
No caso dos botões RESET, quando o botão é clicado, ele automaticamente limpa todos
os campos já preenchidos no formulário, voltando à situação inicial.
<INPUT TYPE="RESET" VALUE="Limpar">
Veja como ficará:
5.14
Textarea
84
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS
que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar para o
usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será associada à
entrada do cliente (navegador)O atributo value não é aceito nesse elemento, mas você pode
colocar já um texto da seguinte maneira. Veja como ele é colocado:
<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>
5.15
Select
Embora os usuários não precisem digitar sempre suas respostas, mostrar cada opção através de
botões consegue um bom espaço, e facilidade. Veja como ele funciona:
<SELECT>
<OPTION>opção1
</SELECT>
Veja o resultado:
5.16
Exemplo Completo
Abaixo, temos um exemplo completo de uma página com um formulário.
<form action="http://www.uki.edu/cgi-bin/AnyForm.cgi" method="post">
<input type="Hidden" name="AnyFormModle" value="Mail">
<input type="Hidden" name="AnyFormDisplay" value="http://www.gun.com.br">
<input type="Hidden" name="AnyFormTo" value="DIGITE AQUI SEU E-MAIL">
85
<input type="Hidden" name="AnyFormSubject" value="Dados do Formulário de HTML">
Qual o seu nome?<input type="Text" name="Nome" size="40"><br>
Qual o seu E-mail?<input type="Text" name="E-mail" size="40"><p>
Você gostou da minha Home Page?<input type="Radio" name="Gostou" value="Sim">sim <input
type="Radio" name="Gostou" value="Mais ou Menos"CHECKED>
Mais ou Menos <input type="Radio" name="Gostou" value="Não">Nem um pouco!<P>
Qual
a
página
que
você
mais
gostou??<select
name="Melhor
Página"><option
value="Interface">Interface</option>
<option value="Imagens, som, etc.">Imagens, som, cores, comandos básicos, etc.</option>
<option value="Frames">Frames</option>
<option value="Ferramentas">Ferramentas</option>
<option value="Formulários">Formulários</option>
<option value="CGI">CGI</option>
<option value="JAVA">JAVA</option>
<option value="Java Script">Java Scipr</option>
<option value="VRML">VRML</option>
<option value="CHAT">CHAT</option>
<option value="Onde colocar">Onde colocar</option>
<option value="Onde divulgar">Onde Divulgar</option>
<option value="Bombas em Java Script">Bombas em Java Script</option>
<option value="Contadores de Acesso">Contadores de Acesso</option>
<option value="Organizando às informações">Organizando às informações</option>
</select><P> Deixe seus comentários sobre a minha Home Page:<textarea name="Comentários"
cols="28" rows="5"></textarea><br>
O que está faltando? <input type="Text" name="O que está faltando?"Value="o que falta?"><br>
Essa Home Page lhe ajudou?<input type="Radio" name="Ajudou?" value="sim">Sim <input
type="Radio" name="Ajudou?" value="Não!">Não!<p>
<input type="Submit" value="Enviar ">
<input type="Reset" value="Limpar Dados">
5.17
Frames
Os FRAMES são divisões de telas do seu browser que permite a utilização de vários documentos
no formato HTML.
Os FRAMES são visualizados pelo Netscape Navigator, e pelo Internet Explorer.
86
5.17.1 Estrutura
Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar do corpo,
substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>.
Exemplo:
<HTML>
<HEAD>
<TITLE> Título do Documento </TITLE>
</HEAD>
<FRAMESET>
Sintaxe dos Frames
</FRAMESET>
</HTML>
5.17.2 Sintaxe
Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de
FRAMES, no caso chamado de Frame1.htm.
<HTML>
<HEAD>
<TITLE> Frame 1 </TITLE>
</HEAD>
<BODY>
<FONT SIZE=+1> <B> Frame n1 </B> </FONT>
</BODY>
</HTML>
5.17.3 Frameset
A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.
5.17.4 Rows
Especifica o numero de FRAMES e a altura de cada um.
87
Exemplo:
<FRAMESET ROWS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM">
</FRAMESET>
Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º
com 50% da tela (ambos em altura).
5.17.5 Cols
Especifica o numero de FRAMES e a largura de cada um.
Exemplo:
<FRAMESET COLS="20%,30%,50%">
</FRAMESET>
Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º
com 50% da tela (ambos em largura).
5.18
Frame
A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME,
SCROLLING, NORESIZE, TARGET.
5.18.1 SRC
Especifica o documento de formato HTML chamado para o FRAME.
Indispensável, por que sem ele só o documento aparecerá vazio, só com as divisões.
Exemplo:
88
</FRAMESET>
5.18.2 Name
Especifica o nome do documento de formato HTML chamado para o FRAME.
É extremamente necessário para o uso do TARGET, que será visto a seguir.
Exemplo:
<FRAME SRC="FRAME1.HTM" NAME="Principal">
</FRAMESET>
5.18.3 Scrolling
Define se o Frame terá barra de rolagem, o default é Auto.
Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho
especificado.
Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada.
Exemplo:
<FRAMESET COLS="20%,30%,50%"
<FRAME SRC="FRAME1.HTM" SCROLLING="no">
<FRAME SRC="FRAME1.HTM" SCROLLING="yes">
<FRAME SRC="FRAME1.HTM" SCROLLING="auto">
</FRAMESET>
5.18.4 Noresize
89
Impossibilita o usuário de mudar o tamanho da área especificada do FRAME.
Por default o usuário pode mudar esta área.
Exemplo:
<FRAME SRC="FRAME1.HTM" NORESIZE>
</FRAMESET>
5.18.5 Target
Define qual a área (FRAME) que aparecerá o documento especificado pelo link.
Mais útil na utilização de Menus e índices. Os principais são:
Tipo
_blank
_parent
_top
_self
Efeito
Abre o documento em uma nova janela do navegador.
Abre o documento no frameset de nível superior.
Abre o documento seja aberto na mesma janela do navegador.
Abre o documento na mesma janela que está o link.
Necessita do NAME.
Exemplo:
<FRAME SRC="FRAME1.HTM" NAME="Principal">
</FRAMESET>
O Link:
<A HREF="http://www.microsoft.com" TARGET="Principal"> Microsoft </A>
Se você quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um
nome que não existe".
90
5.18.6 Border
Define qual a borda que o FRAME terá. Mais útil na utilização de BACKGROUNDS iguais.
Exemplo:
<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>
</FRAMESET>
5.19
Hospedagem
A Sede Internet (http://www.sede.com) fornece os melhores serviços de hospedagem de páginas
web. Pela Sede você pode adquirir todos os recursos necessários para manter uma home- page
no ar. Estes recursos podem ser: mais espaço para armazenagem da página (megabytes) e até a
possibilidade de rodar seus próprios cgis no ar ou até utilizar os cgis pré-configurados que a Sede
coloca ao seu dispor.
Outro recurso excepcional é o de domínio próprio. Com ele, você pode obter um novo,
personalizado e simplificado endereço no tipo www.nome.com ou www.nome.com.br. Para obter
mais informações sobre os outros serviços da Sede, consulte a sua home-page.

terràvista
A associação Terràvista e Ministério da Ciência e Tecnologia de Portugal, possibilitou este site
de hospedagem voltado para os países de Língua Portuguesa. São 12 MB de espaço gratuito,
com sistema de gerenciamento muito simples dos "arquivos" (arquivos). Não é necessário, e
não se permite, nenhum tipo de anúncio ( banner, pop-up window etc..).

terra / zaz
O site da Telefónica SP oferece espaços variados, desde 5 Mb no serviço para não
assinantes, até 50 Mb, no pacote padrão de uso ilimitado de horas de conexão. Tem o
ESTILOWEB, com bons tutoriais de construção de páginas. Tem uma página para gerenciar
seus arquivos e diretórios, fácil de usar (em Português).

yahoo / geocities
91
O mais conhecido site de hospedagem gratuita da Internet (em Inglês). O mais fácil de usar no
começo do aprendizado. Oferece 15 Mb de espaço (é um latifúndio para seu primeiro trabalho,
dá e sobra). Oferece também modelos pré-programados de páginas (PageWizard), destes em
que basta preencher um formulário com os dados que se quer publicar. Há também um editor
(PageBuilder) um pouco mais sofisticado, porém amigável para principiantes. Para os mais
experientes, oferece um File Manager e ligações diretas com ferramentas de edição da
Microsoft, como o FrontPage e o Office 2000. Você pode, por exemplo, fazer uma página no
Word ou Excell e salvar diretamente no geocities, do mesmo jeito que faria para um arquivo de
seu disco local. É muito conveniente.

xoom
Site de hospedagem gratuita (em Inglês), oferece espaço ilimitado para suas páginas, porém
requer um pouco de experiência e conhecimento de ferramentas de edição e publicação, já
que não tem muito apoio para principiantes. Bom para quem precisa de muito espaço, tem
experiência e não quer gastar com hospedagem.

tripod / lycos
Site em Inglês ou Português, 11 Mb gratuitos, oferece grande flexibilidade para Webdesigners,
com facilidades de CGI personalizado (programas especiais, acionados por um diálogo na
página. Exemplos: formulários de pesquisa ou captura de mensagens no site) e
hospedagem/divulgação global ou direcionada para determinada região ou país.
Bom para experientes, porém amigável o suficiente para não-programadores. Tem
compatibilidade com o FrontPage e o Office 2000. Oferece, sem custo, subdomínios de nome
fácil, do tipo "http://seunome.tripod.com".

worldzone
Site em Inglês, 25 Mb gratuitos grande flexibilidade de CGI personalizado, dirigido aos mais
experientes, porém com um ótimo suporte on-line, que o torna atraente também para nãoprogramadores.
Os servidores gratuitos têm diferentes configurações de serviço, desde o espaço fornecido, a
possibilidade de usar scripts, o modo como é feita a propaganda em sua página, se permite
conteúdo comercial em seu site ou não, se fornece ferramentas para loja virtual, análise de
visitas, etc., como você irá fazer para colocar sua página no servidor, entre outras
características.
A melhor forma é pesquisar! Visite vários servidores gratuitos e analise as características de
cada um antes de escolher aquele que se enquadra melhor nas necessidades de sua página.
92
Sugerimos uma visita ao site "The Free Web-page List" - http://freeweblist.freeservers.com/
(site em inglês), especializado em listar e comentar Servidores de Hospedagem Gratuita e
outros serviços gratuitos na Internet.

6 - ANEXO A
6.1
Links Recomendados
Netscape Enterprise Developer - http://www.ne-dev.com/
Sun On-line – http://www.sun.com/
Guia Internet para iniciantes - http://www.icmc.sc.usp.br/manuals/BigDummy/
Serviços diversos - www.servicosgratis.com.br
Registro de domínios para o Brasil - http://registro.br/
Agência Nacional de Telecomunicações - Anatel - http://www.anatel.gov.br
Fundação de Amparo à Pesquisa do Estado de São Paulo - FAPESP - http://www.fapesp.br/
Internic - http://www.internic.net
Dicas para Tecnologia da informação - TIMasters – www.timasters.com.br
6.1.1
E-Commerce no Brasil
www.e-commerce.org.br
http://www.revistaecommerce.com.br/apresenta2.php?edicao5=24&pag_id=146
6.1.2
Tutoriais diversos
Tutorial on-line - www.tol.pro.br
Imasters - www.imasters.com.br
Ambientes de Internet – http://www.ambientesdeinternet.com
Web masters On-line - www.wmonline.com.br
Downloads - www.superdonloads.com.br/programas/listagem
Dicas muito interessantes - http://www.vas-y.com/dicas/index.html
93
6.1.3
Dicas de CGI
www.infolink.com.br/linguagens/cgi
www.icmsc.sc.usp.br/manuals/html/cgi.html
www.guiagratis.com.br/sitcgi01.htm
www.unicamp.br/cgi/
www.cgi-net.com.br
www.abcdicas.com.br
www.towernet.com.br/cgi,htm
www.lipsil.hpg.ig.com.br/cursodecgi.htm
www.ime.usp.br/~glauber/perl/indice.htm
www.fastlink.com.br/suporte/cgiplanos.htm
www.penta.ufrgs.br/edu/forms/cgi.html
6.1.3
Dicas da TAG <META>
www.dee.ufpb.br/~rrbrandt/cursos/web/metatags.shtml
http://icompras.com.br/busca/tools_06.shtml
http://www.icmsc.sc.usp.br/manuals/html/
www.free-vibes.com/webmasters/tags.htm
www.buscas.com.br/meta-tags.shtml

7 - Dreamweaver
O Macromedia Dreamweaver é uma poderosa ferramenta para criação de páginas de Internet,
hoje na versão 7 (MX2004) na minha opinião o melhor programa WYSIWYG (what you see is
what you get) aquilo que vemos é aquilo que fazemos.
O cada vez mais exigente mundo da multimídia que envolve a Internet fez com que a equipe
do Dreamweaver dotasse o programa das mais variadas ferramentas que se interligam com as
diferentes linguagens de programação (ASP, PHP, XML, JSP, Cold Fusion, etc.) e com as
mais diversificadas ferramentas dinâmicas e de animação.
94
O Dreamweaver MX e MX 2004 tem a facilidade de se integrar com outras aplicações da
Macromedia como o Flash e o Shockwave.
Com o Dreamweaver podemos criar sites para a Web, graças à sua interface gráfica de fácil
utilização que mostra as modificações à medida que são efetuadas. Além disso, teremos a
certeza de que o código HTML gerado nos é consistentemente limpo, conciso e perfeitamente
editável, ao contrário do que acontece com a maioria dos programas de edição visual para
criação da Web, o Dreamweaver não altera o código HTML quando importa documentos
de um outro programa HTML.
7.1.1.
Considerações Gerais
O Macromedia Dreamweaver tem evoluído qualitativamente desde a versão 3. A cada nova
versão, implementações importantes são
incorporadas e, muitas delas, sabidamente
adicionadas, devido à "wish list", colocada à disposição dos utilizadores pela Macromedia para
este produto.
Versão 3
Versão 4
Neste manual vamos estudar as duas últimas versões do programa. A versão 6.0 ou Mx e a
versão 7.0 ou MX 2004.
7.1.2.
Requisitos do sistema
Intel Pentium III ou superior
Windows 98, 2000 ou XP
256 Mb Ram (mínimo), recomendado 512 Mb
800 Mb espaço disponível em disco.
95
7.2. Visão Geral
O Dreamweaver pode ser usado tanto por quem sabe, como por quem não sabe nada de
HTML. Na construção de sites apenas nos podemos guiar pelo conjunto de ferramentas
disponíveis, no entanto, e uma vez que convém saber o básico de HTML, o Dreamweaver
facilita a aprendizagem do mesmo porque podemos editar no layout ao mesmo tempo em que
vemos a inserção/alteração no código.
Para que se torne mais fácil à compreensão do Dreamweaver é importante conhecer, em
primeiro lugar, toda a configuração e distribuição da área de trabalho.
Na imagem seguinte pode-se ver a área de trabalho e barras de ferramentas que será
explicada agora numa abordagem geral, e mais adiante detalhadamente por temas, para
melhor os especificar.
Barras de Ferramentas
Ferramentas de inserção (Insert) – esta é uma das principais barras de ferramentas uma vez
que é nela que estão as principais ferramentas (e básicas) para a criação do layout de um site.
96
A versão MX 2004, ou 7, nos dá a possibilidade de criar ou personalizar a nossa própria barra
de ferramentas. Basta clicar com o botão direito do mouse sobre a barra e escolher Customize
Favorites…
Painel de Propriedades – neste painel encontram-se as propriedades da página e dos vários
elementos inseridos na mesma. Conforme o objeto selecionado o painel de propriedades
apresentará as suas características.
Visualização do código fonte:
Design: vista do layout, ou design da página;
Code: vista do código da página;
Split: vista conjunta do código fonte e do layout da
página; Live Data View: simulação da visão no browser.
Painel inspector de código:
Neste painel, dividido em camadas ficam localizados
os inspectores do código fonte. São nestes inspectores
que são criados os elementos dinâmicos como CSS,
Behaviors, Snnipets, ligação a bases de dados e muitos
outros.
97
Os painéis podem ser arrastados para outros locais do espaço de trabalho.
Site Map
Permite
a
visualização
de
toda
a
estrutura do site em forma de “árvore”
tornando assim mais fácil o acesso a
qualquer arquivo de uma forma fácil. Os
links são atualizados automaticamente.
98
O
Code
inspector
Inspector
de
HTML
ou
é
totalmente integrado com o
editor
WYSIWYG.
As
alterações feitas no layout
aparecem
automaticamente
no código.
Para
acessar
o
inspector
HTML, use a tecla F10 ou
menu Window > HTML.
Para melhor orientação também se pode seguir pelo rodapé do espaço de trabalho as
respectivas tags onde o cursor estiver localizado.
Tag inspector
7.3. Personalização do Dreamweaver
Todos trabalhamos de maneira diferente. Para melhor daptar o Dreamweaver às nossas
necessidades e métodos de trabalho, podemos personalizá-lo da melhor forma. Para isso
acedemos ao painel Properties (propriedades) no menu Edit > Preferences (Ctrl + U).
99
Este é o painel das Preferences (ou preferências). Do lado esquerdo estão as categorias e do
lado direito os aspectos que poderão ser modificados, acrescentados ou retirados. Várias
opções já vêm ativadas por padrão que poderão ser alteradas posteriormente. Segue abaixo a
descrição de algumas das principais categorias.
7.3.1.
General
Update links when Opening Read-Only Files é uma opção importante para actualização dos
links:
Prompt - alerta sobre o link alterado. Para redirecioná-lo clique em update e para não o
redirecionar, clique em don`t update;
Always - o Dreamweaver automaticamente redireciona os links alterados sem precisar de
confirmação;
Never - o Dreamweaver ignorará as alterações de links, tendo assim, que ser feito o
redireccionamento manualmente. (Aconselho o uso da opção prompt ou always).
Para mudar a visualização do espaço de trabalho basta accionar o botão Change
Workspace… e escolher entre a visualização Designer e Coder na versão 7 (2004), ou na
versão 6 entre a visualização do MX e da versão 4, esta mais “arrumada”, uma vez que
apenas estão visíveis as barras de ferramentas que estamos a utilizando.
100
Para quem trabalha com muitos textos a opção Allow multiple consecutive spaces é muito útil.
Por padrão no Dreamweaver só se consegue dar um espaço entre as palavras. Para dar mais
que um espaço temos duas hipótses: ou vamos ao código fonte e acrescentamos um  
ou então, muito mais cómodo, activamos esta opção.
Outra opção útil é o Maximum number of history steps permite definir o numero de vezes que
podmos voltar atráz nas ações, o Undo (Ctrl + Z). Este valor pode ir de 2 a 99999.
No Insert Panel pode-se definir a visão da barra de ferramentas Insert. Se queremos que
sejam visualizados os ícones – Ícones Only,
apenas texto Text Only, ou ambos – Icons and
Text.
7.3.2.
Accessibility
Ao ativar estes atributos, serão mostrados os mesmos automaticamente na inserção de
formulários, frames, vídeo ou áudio,
imagens e tabelas.
Por exemplo na inserção de uma
imagem aparece uma caixa de diálogo
para atribuição do texto que aparece quando o ponteiro do mouse está em cima da imagem.
101
7.3.3.
Code Coloring
Esta é uma opção muito útil não só para quem trabalha muito com o código fonte mas
sobretudo para quem faz alterações esporádicas no mesmo tempo que define a cor de cada
código (HTML, Cold Fusion, ASP, PHP, etc.) tornando mais fácil a sua identificação.
Para modificar ou atribuir uma cor ao respectivo código, basta escolher o tipo e acionar o
botão Edit Coloring Scheme e editar os vários parâmetros. Para modificar a cor de fundo da
página de código basta modificar o Default background.
7.3.4.
Code Hints
Continuando na edição do código fonte temos aqui mais opções úteis. Com Enable auto tag
completion marcado, aparecerá uma pequena janela (tipo pop-up) com uma lista de códigos
102
possíveis
ao
escrever
o
primeiro
caracter
e
que
pode
ser
completado
automaticamente, bastando para isso escolher na lista e dar enter.
Para que este “auto-completar” apareça, a opção Enable Code Hints terá que estar marcada.
Em baixo destas duas opções temos uma linha de tempo que corresponde ao espaço de
segundos que a lista de códigos demorará a aparecer. Em Menus temos o tipo de código
possível a aparecer nesta lista de opções do mesmo.
7.3.5.
Code Rewriting
Ainda no código fonte, o Code Rewriting personaliza a escrita do mesmo.
Em Rewrite code podemos escolher tags fixas inválidas; Renomear um form quando se
copia, remove ou se cola uma tag extra; ou remove uma tag quando se fecha o código.
Em Never rewrite code define-se que tipo de arquivo o Dreamweaver pode ou não reescrever
um código.
Para quem trabalha com programação no Dreamweaver a opção Spetial characters é
muito importante uma vez que activa a opção de subtituição de caracteres de um endereço
por símbolos “&”. Ao activar estas opções convem ter algum conhecimento de programação
uma vez que é alterado o código da página e por vezes poderam deixar de funcionar alguns
elementos.
103
7.3.6.
File Type/Editors
Os tipos de arquivos que serão abertos em modo de visualização de código definem-se
nesta categoria – Open in Code View – e pode ainda definir um editor externo do mesmo
código, caso esteja a ser utilizado.
Podem ainda definir-se os programas que editaram o tipo de arquivo (de imagem, flash,
media, etc.). Por exemplo os arquivos .gif estão definidos, por padrão, com o Fireworks, no
caso de não utilizar este programa poderá ser alterado para outro qualquer, como por exemplo
o Photoshop ou o Paint Shop Pro.
7.3.7.
Fonts
Em Fonts é possível determinar o tipo de fonte relativamente ao tipo de escrita de caracteres,
Europeu, Japonês, Árabe, etc., e o tipo de letra utilizada como opção principal no layout e no
código da página.
As fontes padrão disponibilizadas pelo Dreamweaver, são o Arial, Helvetica, Times NewRoman , Courier New , Courier , Georgia , Times , Verdana e Geneva. No entanto podemos
adicionar mais fontes para uso posterior. Menu Text > Font > Edit Font List.
104
Dica: É importante saber que as fontes de texto utilizadas nas páginas de Internet deveram
estar instaladas nos computadores dos usuários, para que estas sejam corretamente
visualizadas, e evitar discrepâncias no tipo de fonte utilizada. Por isto é conveniente
utilizar as fontes de texto padrão instaladas com o Windows. São elas o Arial,
Helvetica, Times New-Roman , Courier New , Courier , Georgia , Times , Verdana e
Geneva. No caso de utilizar-mos outro tipo de fonte de texto corre-se o risco de não ser
corretamente vizualizada no browser, utilizando-se muitas vezes para isso uma
imagem do texto (normalmente .gif).
7.3.8.
Highlighting
Esta é uma opção muito útil quando se utilizam
alguns elementos e recursos como os templates ou
as library. Aqui podem-se definir as cores por que
são
identificados
estes
elementos
no
layout
facilitando assim a identificação dos mesmos.
Em show, no caso dos elementos que aparecem no
layout, poder-se-à optar por deixa-los ou não visíveis.
7.3.9.
Invisible Elements
Alguns elementos quando inseridos na
página
só
seram
visíveis
quando
visualizados no browser. Para identificar
estes elementos no layout da página é
necessário
que
esteja
essa
função
habilitada na respectiva categoria.
Nesta janela podem-se ativar ou desativar
ações, ou propriedades (elementos). No
caso de Line breacks é desnecessário
activar uma vez que em cada quebra de
linha irá aparecer um ícone
, o que se
105
torna desnecessário. Na última opção activa a exibição do conteúdo de uma include – ServerSide, será explicado mais adiante.
7.3.10. Panels
Nesta Janela são configuradas todas as opções relacionadas com os painéis e barras de
tarefas.
Na primeira configuração temos o Always on Top, e como o próprio nome indica , são os
painéis que ficaram sempre acima de tudo. Ou seja tudo o que esteja marcado ficará acima da
janela principal. Em Icons é ativada a exibição dos ícones no roda-pé da área de trabalho
(layout).
Em Show in Launcher são definidos, em
,
quais os painéis que deveram aparecer por
baixo da página principal, e em baixo a ordem
dos painéis da direita. Estas duas últimas
opções não estão disponíveis na versão
2004.
106
7.3.11. Preview in Browser
O Preview in Browser define os browsers com os quais o Dreamweaver vai interagir para
testar a página, na qual estamos trabalhando, o chamado preview. Neste caso poderemos
definir o browser como primário ou secundário, sendo o primário, e conforme o nome indica, o
principal. Para acrescentar um browser aciona-se o botão do +. Nele podemos testar os vários
browsers existentes.
Em Options é ativado o uso de arquivos temporários para o preview. Se esta opção não
estiver ativa o Dreamweaver abrirá a página diretamente do arquivo original. Para realizar o
preview a página terá de ser gravada primeiro antes de ser testada.
7.3.12. Status Bar
As opções do Status Bar são
de
grande
quem
interesse
quer
visualização
para
testar
nas
a
várias
dimensões de ecrân e o
tempo de abertura da página
nas várias velocidades de modem.
Em Window Sizes define-se o tamanho da tela e em Connection Speed a velocidade em Kb
do modem. Os resultados são visualizados no roda-pé
da página principal (layout) como mostra a figura.
Estas são as opções principais e mais importantes para a personalização do Dreamweaver.
7.4. Configuração de um site
Para ter um acesso completo a todos os recursos disponíveis no Dreamweaver, é importante
configurar o site no mesmo. Para além de ter acesso aos recursos disponíveis teremos uma
melhor noção das pastas e arquivos assim como as ligações (links) que fazem parte do
projeto.
107
Na versão 6 ou 6.1 (MX) vamos ao
menu Site
> New Site… ou no painel do lado
direito Files menu Site > New Site…
Na versão 7 (MX
2004) – esta
opção está no menu Site > Manage
Sites… e aparecerá uma janela
como a imagem ao lado, aciona-se
o botão New… e Site.
Abrir-se-à a janela de configuração do site Site Difinition for Unnamed Site 1 como mostra a
imagem em baixo.
Em cima há dois separadores, o Basic e
Advanced. Para quem se inicia no Dreamweaver
poderá começar pelo básico (Basic) uma vez
que é de mais fácil configuração. Abaixo segue
a explicação das duas formas.
7.4.1.
Modo Básico - Basic
Na primeira janela (imagem anterior) apagamos
o Unnamed Site 1, sempre colocado por padrão,
e colocamos o nome do site que queremos configurar, e aciona-se Next>.
108
Para quem trabalha com programação o melhor será escolher a segunda hipótese, Yes, I want
to use… e na check box em baixo escolher o tipo de linguagem, nesta fase, escolhemos a
primeira hipótese e Next>.
Agora deverá ser fornecida a informação relativa à localização do site.
No caso de estar alojado no nosso computador deixa-mos como está. Se pretender-mos
construir o site diretamente no servidor escolhemos a segunda opção.
Neste caso teremos o site alojado no nosso computador.
Antes de configurar o site convém que a respectiva pasta tenha já sido criada. Clicamos no
ícone da pasta amarela e escolhemos a respectiva localização do site.
Na janela seguinte será escolhido o modo de conectar ao servidor remoto para transferência
do site. Para já não escolheremos qualquer modo, mais adiante entraremos nesta área de
FTP. Ficará então None.
Para finalizar será mostrada na última janela o resumo de dados referente à configuração do
site. É só acionar Done para finalizar a configuração.
109
7.4.2.
Modo Avançado – Advanced
No modo Advanced temos do lado esquerdo a categoria e do lado direito os respectivos
elementos que a compõem.
Para mais fácil compreensão começaremos pelas categorias principais (e básicas), e mais
tarde as restantes para melhor integração nos vários assuntos.
Local Info
110
Aqui, conforme a imagem, é dado o nome do site, neste caso Novo Site, a localização, e em
Default images folder podemos dar a localização da pasta que irá conter as imagens. Em
HTTP adress, caso já exista, poderemos colocar o URL do site (http://www.site.com).
Design Notes
Em Design notes desmarca-se a
primeira opção, uma vez que se
trata de uma interligação entre o
Dreamweaver e os programas
Fireworks e Flash da Macromedia
que para uma fase inicial, e para
quem não utilize estes programas,
não fará sentido utilizar.
Está assim configurado o site em modo Básico ou Avançado no Dreamweaver MX ou MX
2004.
Dica: Para melhor organização do site, poderão ser criadas várias pastas para fácil
identificação dos arquivos – uma pasta para as páginas (paginas), outra para as imagens
(imagens), outra para folhas de estilo (css), etc..
7.4.3.
Backup das Configurações
Este recurso do Dreamweaver é muito útil e torna-se conveniente fazer quando temos vários
sites configurados uma vez que poupará
trabalho
caso
haja
necessidade
de
desinstalar o Dreamweaver ou formatar o
disco do computador. Esta tarefa evita ter de
refazer todas as configurações dos sites
existentes.
Para executar esta operação, menu Site >
Manage Sites… e escolhese Export…
Esta operação criará um arquivo com extenção .ste.
111
Convém guardar este arquivo num disquete ou outro tipo de mídia para no caso de se perder
informação do disco rígido termos essa informação salvaguardada.
Quando se pretender configurar o site de novo basta seguir os mesmos passos, e ao invés de
fazer Export faz-se Import.
7.5. Layout
Depois de configurado o site no Dreamweaver, podemos começar a desenhar o layout das
páginas, ou a definir a estrutura do site.
Na versão 2004, ao iniciar o Dreamweaver aparecerá, por padrão, a janela que vemos na
imagem seguinte:
Pode-se escolher o tipo de página que queremos criar, ou simplesmente abrir uma já
existente, que ficaram visualizadas do lado esquerdo (as últimas a serem editadas). Também
se pode acessar a tutorial do Dreamweaver, ou ao gestor de extenções em Dreamweaver
Exchange.
112
No caso de não querer-mos voltar a visualizar este painel na abertura do programa basta
colocar o visto em “Don’t show again”.
Na versão anterior o MX, versão 6, a janela anterior não aparecerá. Para criar uma nova
página iremos ao menu File> New … e surgirá a janela New Document (imagem de baixo).
Do lado esquerdo a categoria
da página e no centro o tipo
de página. Para páginas em
HTML, a escolha é Basic
page e HTML. Nesta página
poderá
ser
posteriormente
adicionada
scripts
de
Javascript ou folhas de estilo
(CSS), entre outras.
No caso de utilizar linguagem de programação será Dynamic page e a respectiva
programação (ASP, PHP, etc.).
Ao acionar Create e será visualizada a página em branco.
Para melhor orientação das dimensões e alinhamento de
objetos existem elementos qu poderemos visualizar como
as Rules ou réguas no menu View > Rules > Show ou Ctrl +
Alt + R.
Podemos também visualizar a “grade” que divide a
página com colunas e linhas em igual distância.
Nenu View > Grid > Show Grid ou Ctrl + Alt + G.
113
7.5.1.
Propriedades da página
Depois de criada a página é conveniente definir as propriedades da mesma para que esta se
ajuste ao tipo de layout que pretendemos criar.
Para acessar as propriedades da página, na versão MX damos um clique direito em algum
lugar na página e Page Properties …, ou no menu Modify > Page Properties … (ou Ctrl+J).
Então temos:
Title:
Título
da
página
(mostrado no browser);
Background Image: Imagem
de fundo;
Background: Cor de fundo da
página;
Text:
Cor
do
texto
(normalmente fica sem cor, ou
seja preto);
Links: Cor dos links;
Visited Links: Cor dos links que já foram visitados;
Active Links: Cor dos links quando se clica;
Left e Top Margin: Tamanho das margens esquerda e topo respectivamente em pixels;
Margin Width e Height: Tamanho das margens direita e em baixo;
Document Encoding: Tipo de caracter (país);
Tracing Image: Imagem que aparecerá em fundo no modo de design. Esta imagem apenas
aparecerá no dreamweaver. Muitas vezes serve para seguir um desenho pré-definido do site.
Image Transparency: Transparência ou opacidade da imagem de fundo (Tracing image).
A versão 2004 tem disponível no painel de propriedades um botão que acessa as
propriedades da página, no entanto, tal como na versão anterior, também se pode acessar as
mesmas com um clique direito do mouse em algum lugar na página.
114
Nota: O clique direito na página para acessar as propriedades desta não pode ser dado dentro
de uma tabela, pois aparecerá Properties referente as propriedades da tabela, que
normalmente já estarão visíveis.
Na
nova
aparecem
características,
versão
novas
que
passo a descrever. As
restantes são iguais a
versão MX.
Appearance
Right e Bottom margin:
margem direita e rodapé da página que convém não marcar uma vez que limita de alguma
forma a dimensão da página;
Links
Underline
style: Define
se
o
sublinhado
do
aparece
link
ou
não, se aparece ou desaparce apenas quando o ponteiro do mouse passa por cima.
Headings: Definição dos títulos. Tipo e tamanho da letra.
115
7.5.2.
Inserção de elementos na página
Barras de Ferramentas
A seguir identificaremos todos os ícones das barras de tarefas, embora explique mais adiante
detalhadamente as funções de alguns mais complexos.
As imagens que se seguem são referentes à versão MX2004. Na versão MX os ícones são
iguais apenas poderão, alguns deles, estar em diferentes barras, mas de fácil identificação.
7.5.2.1. Common
Esta barra de ferramentas contém os elementos mais usuais numa página, imagens, tabelas,
links, etc.
Links- Insere uma hiperligação para uma página interna ou externa ao site;
Links de mail – Link para e-mail;
Named Anchor – Link para um determinado tópico na própria página;
Tabela – Insere uma tabela;
Imagem – Insere uma imagem na página, este ícone tem várias outras hipóteses de
inserção de imagens como rollovers;
Media – Este botão tem um sub menu onde existem várias opções para inserção de
elementos de mídia (som e vídeo), flash, shockwave, active x, etc.
Date – Insere a data na página, embora esta data seja do dia em que o arquivo é
modificado ou gravado;
Comentários – Insere comentários no código fonte da página;
Make Template – transforma a página em template (modelo);
Tag Chooser – Insere uma tag de várias categorias que podem ser selecionadas numa
janela que se abrirá depois de acionado este botão;
116
7.5.2.2. Forms
Form – Delimita a ação de um formulário <form> … </form>;
Text box - Campo de texto normal de uma só linha;
Hidden field – Campo de texto oculto, apenas aparecerá no código HTML. Serve para
colocar referências a quem recebe os resultados do formulário ou apenas para orientação do
webdesigner;
Text Área - Campo de texto com múltiplas linhas para textos extensos. É possível
determinar o tamanho e número de linhas;
Checkbox – Insere caixas de verificação para escolha múltipla ou única por parte do
utilizador;
Radio Button – Insere radio buttons;
Radio Group – Grupo de radio buttons nos quais só se poderá escolher uma das
hipóteses;
List/Menu – Lista de várias hipóteses utilizadas muitas vezes para definir assuntos em
formulários;
Jump Menu – Tal como a List/Menu é composta de várias hipóteses apenas com a
diferença que servirá de link para outras páginas;
Image Field – Permite substituir um botão, de envio (submit) ou reset, por uma imagem;
File Field – Cria um campo de texto e um botão de procura para upload de arquivos para o
servidor;
Button – Botão para envio e para limpar o formulário;
Label – É usado para associar determidado texto a um elemento do formulário;
Fieldset – Cria uma linha que delimita os campos do formulário que quiser-mos de forma a
separar os dados, por exemplo: por categorias.
117
7.5.2.3. Layout
Tabelas – Tal como na divisão Common também da Layout existe o ícone para inserção
de tabelas;
Insert Div Tag – Insere Divisória;
Layers ou Camadas – Insere Camadas;
- Visualização do layout, Standard ou normal;
Frames – Esta função pode ser expandida para inserção de várias disposições de
frames;
Tabular data – Tabela que é preenchida com dados de uma base de dados ou de um
arquivo Excel.
7.5.2.4. Text
Esta barra tem todos os caracteres e símbolos especiais que não estão no teclado.
Font Tag Editor – abre uma janela para edição de tags no código fonte.
Bold e Italic – Tal como em qualquer editor de texto atribuem ao texto os parâmetros de
negrito e itálico;
Paragraph – Insere um parágrafo na página;
7.5.2.5. HTML
Barra de ferramentas associadas ao código HTML.
Horizontal Line – Insere uma linha horizontal. Este elemento não funciona em algumas
versões do browser Netscape;
Meta – Insere uma meta tag no cabeçalho da página, entre <head> e </head>, permite dar
informação da página aos servidores e sistemas de busca;
118
Server-Side Include – Inclui
arquivos ou elementos constantes noutras páginas no
arquivo onde estiver inserido.
7.5.2.6. Application
Os elementos desta barra de ferramentas são usados na criação e ligação a bases de dados e
em comandos de SQL.
Recordset – Faz a ligação a uma base de dados;
Dynamic Data – Este botão exibe as opções de visualização de registos de uma base de
dados, ou seja exibe os dados nas várias formas, numa tabela, num texto, etc;
Repeated Region – Insere uma tabela apenas com os valores dos registos da base de
dados;
Show Region – Exibe Campos;
Recordset Paging – Cria uma barra de navegação entre as várias páginas para
visualização dos registos de uma base de dados;
Go To Detail Page – Movimenta para um item da página;
Display Record Count – Insere uma descrição do número de registos constantes na
página e o total constante na base de dados;
Master Detail Page Set – Configuração dos detalhes principais da página;
Insert Record – Cria um formulário para inserção de registos na base de dados;
Update Record – Cria um formulário para consulta e edição de registos numa base de
dados;
Delete Record – Cria uma página para eliminação de registos;
Extenção User Authentication – Exemplo de uma extenção aplicada no Dreamweaver;
7.5.2.7. Texto
A inserção de texto é relativamente simples. O modo quase igual aos editores de texto, com
algumas características diferentes. Por padrão os parágrafos inseridos na página ficarão com
uma distância de duas linhas.
119
Só se consegue dar um espaço entre as palavras. Para alterar esta definição, como referido
no capítulo de Personalização do Dreamweaver, deve-se colocar o visto em Allow multiple
consecutive spaces na categoria General.
Para formatar o texto, procede-se da mesma maneira que no Word:
1: Alinhamento do texto;
2: Fonte e tamanho;
3: Cor, acima da cor o tipo gold ou itálico.
Tal como no Word e pelo mesmo processo podem-se fazer listas numeradas com as opções
que estão por baixo do alinhamento do texto.
7.5.2.8. Edição de imagens em Fireworks
As imagens provenientes do programa de edição de imagens da Macromedia, o Fireworks,
podem ser editadas. Clicando sobre a imagem no painel Properties podemos ver as
ferramentas de edição:
Na versão MX
Na versão MX 2004
No caso do Dreamweaver MX a edição da imagem só poderá ser feita se o Fireworks
estiver instalado no computador, na versão 2004 pode-se editar directamente no
Dreamweaver com as ferramentas crop, luminosidade e contraste para editar directamente no
Fireworks basta acessar ao botão
.
7.5.2.9. Comuns
Rollover
Podem-se criar imagens rollover ou seja, imagens que ao
se passar com o mouse sobre elas mudarão para outra
imagem. É um efeito interessante que vale a pena aplicar
em certos layouts.
120
Imagens Rollover
Versão MX
Para aplicar este efeito basta accionar o botão de Rollover Image e dar as diretivas na janela
que aparecerá igual à imagem seguinte:
Versão 2004
Original image: É
a
imagem
que
estará visível;
Rollover image: É
a
imagem
que
aparecerá quando o mouse estiver sobre ela;
Alternate text: é o texto que aparece quando o mouse estiver sobre a imagem – descrição;
When clicked, Go to URL: é a página destino do link.
Imagens
Para inserir imagens basta acionar o botão
na barra
de ferramentas Common (em cima), ou visualizar os
arquivos em Files, lado direito, e arrastar a imagem para
o lugar pretendido.
Barra de navegação ou Navigation bar
Versão MX
A barra de navegação não é mais que um botão, a par do rollover image, mas com quatro
níveis:
121
Up: em cima; Over: sobre; Down: em baixo;
Over while Down image: quando se dá o clique.
Versão 2004
São estas as coordenadas que deveremos dar na janela do Navigartion Bar, conforme a
imagem seguinte:
Elementos Flash
Para
inserção
de
elementos/arquivos
flash
na página basta accionar o
botão
na barra Insert
(versão MX) ou a divisória
Flash elements da mesma
barra na versão 2004.
O Dreamweaver também tem alguns elementos flash já preparados a serem inseridos nas
páginas, como botões ou texto dinâmico. Para inserir estes elementos no menu Insert > Media
> Flash text ou Flash Button.
Links
A inserção de links, ou ligações para
outras páginas (internas ou externas) é
relativamente fácil. Selecionamos o texto
ou a imagem que pretendemos que seja
o link, e no painel Properties escrevemos
o URL da página, quer sejam páginas do
próprio site ou páginas de um site
externo.
122
Texto
Imagem
Para abrir a página numa janela nova basta colocar em Target _blank. Para abrir na mesma
janela não é necessário qualquer alteração.
Outra forma de inserção de links internos (para páginas do mesmo site) é seleccionar o texto
ou imagem onde se pretende fazer a ligação e arrastar o ícone
para a página
correspondente no painel Files.
Para “lincar” a um mail basta colocar no caminho do link mailto:[email protected]
Anchor
Existe outro tipo de link, os links internos, chamados Anchor (ancora) ou mais usualmente
chamados bookmark. Estes links são utilizados para ir para determinado sítio da mesma
página. Aplicam-se quando a página tem um texto muito extenso. Para melhor identificação
dos temas são colocados links no início da página.
Selecionamos uma palavra no site para o qual pretendemos direcionar o visitante e acionamos
o ícone
. Abrir-se-à uma janela e damos um nome pelo qual este “tópico” será identificado
pelo link – Anchor name, aqui ficará marcado com uma pequen. ancora.
123
No início da página (ou qualquer outro site) criamos o link desta forma:
pagina.html#nome_da_anchor
pagina.html – é a página onde estará a anchor, a página que estamos a trabalhar, seguido de
# (sustenido) e o nome que démos à anchor.
Também podemos fazer vários links numa só imagem. Por exemplo temos vários objetos
numa imagem e queremos que cada objeto tenha um link para uma página diferente. Para
isso, selecionamos a imagem e no painel de propriedades escolhemos um dos ícones Hotspot
Tool:
- Rectangular;
- Oval;
- Polígono – que fará várias formas
A escolha da forma será feira conforme a forma que queremos aplicar ao link. Na imagem
aplicamos a área como se estivéssemos desenhando uma imagem num programa gráfico.
A seguir no painel de propriedades define-se o caminho do link e as suas propriedades como
se de um link normal se tratasse.
124
7.6. Tabelas
Uma tabela não é mais que uma divisória, composta por linhas e/ou colunas, com a qual
dividimos a página, ou parte dela, para melhor distribuição dos textos e imagens no layout da
mesma.
O comando para inserção da tabela é encontrado na divisória Common da barra de tarefas
Insert no botão
ou no menu Inser > Table.
A seguir temos a janela de configuração da tabela que passo a descrever:
Bordes
thickness:
é
a
largura
do
preenchimento das linhas da tabela;
Cell Padding: é a distância entre a linha que
delimita a tabela e o conteúdo da mesma
(texto ou imagem);
Cell
Spacing:
é
a
distância
entre
as
delimitações, das linhas e colunas;
Podemos colorir o fundo ou os limites de uma
tabela. Para isso, no menu properties em Bg
(Background) escolhemos a cor de fundo da
célula ou da tabela inteira.
Em Brdr é definida a cor dos limites e divisórias da tabela. No caso de querermos inserir o
número hexadecimal referente a determinada cor basta inserir no campo de texto
correspondente.
Dica: Para que uma tabela fique proporcional ao tamanho da tela, seja ela 800 x 600 ou 1024
x 768, definimos o tamanho em percentagem, caso se pretenda uma medida exata, definimos
em pixels.
Para
alinhamento
do
texto,
posicionamos
o
cursor
na
célula
desejada
e
nas
propriedades (Properties), em Vert, posicionamento vertical, escolhe-se a posição pretendida
na célula.
125
Top, Middle, Bottom ou Baseline.
Para alinhamento
da
tabela
em
relação à página,
no
painel
properties, com a
tabela
selecionada, em
Align define-se a
posição Left (esquerda), Right (direita) e Center (centro).
Se não especificar-mos o alinhamento o browser assumirá Bottom como padrão o que fará a
imagem alinhar à esquerda e ao centro da tabela.
Para unir duas ou mais células basta seleciona-las e clicar no ícone
no painel de
propriedades ou no menu Modify > Table > Merge Cells (Ctrl+Alt+M).
Para dividir uma célula em duas ou mais partes (colunas ou linhas) clicamos no ícone
ou
no menu Modify > Table > Split Cell… (Ctrl+Alt+S).
Aparecerá a janela Split Cell onde se informa o númedo de colunas ou linhas pretendidas.
Para seleccionar duas ou mais
células
de
uma
tabela
aleatoriamente, selecionamos a
primeira
com
a
tecla
Ctrl
pressionada, e não a largando,
selecionamos as restantes células
pretendidas.
126
7.6.1.
Layout View
O Layout View é o modo de visualizar as tabelas como se estivesse no browser. A versão
2004 trás este recurso de forma mais intuitiva do que na versão MX. Esta nova versão suporta
textos feitos no Microsoft Word e Excel bastando apenas copiar e colar na área de trabalho do
Dreamweaver.
Inserimos uma tabela e acessamos a esta funcionalidade no menu View > Table mode >
Layout mode ou Ctrl + F6. Temos assim a página em modo de layout:
Neste modo tornarse-a muito mais fácil a inserção de células dentro da tabela. No menu
Insert;
> Layout Objects > Layout cells. Aparecerá um cursor em forma de cruz para poder desenhar
as células.
7.6.2.
Ordenar dados numa tabelas
A maneira mais fácil para ordenar os dados numa tabela, alfabeticamente ou numericamente,
é utilizando a ferramenta Sort Table no menu Commands > Sort Table.
Imaginemos uma tabela como a que se segue:
127
selecionamos a coluna onde consto os nomes e activamos o comando Sort Table em
Commands > Sort Table.
Define-se o tipo de ordenamento em
Order – alfabético ou numérico,
ascendente ou descendente.
Em Sort by pode-se escolher outra
coluna que não a selecionada.
7.7. Image Tracing
/ Imagem de
“Decalque”
Para quem prefere fazer um rascunho do site num programa gráfico antes de passar à
execução no Dreamweaver esta é uma boa forma de decalque do rascunho.
Com o image tracing utiliza-se o modelo criado no programa gráfico como se de um
background da página se tratasse para depois se executar o layout do site em cima do
mesmo.
O Image Tracing não é o
background da página.
Para aplicar uma imagem
ao
image
tracing
basta
acessar às propriedades da
página.
Na
encontra-se
versão
na
6.0
janela
principal.
Na
versão
2004
(7)
selecciona-se a categoria
Tracing Image.
128
Escolhe-se a imagem, em Browse…, e ajusta-se a transparência da mesma. Não é
conveniente deixar a opcidade a 100% para termos a noção do que é a imagem e os
elementos pertencentes ao layout da página.
Deverá ficar com este aspecto:
129
Para mover a imagem para um local específico, seleciona-se View > Tracing Image > Adjust
Position…
Na caixa de dialogo ajustam-se as
cordenadas X e Y.
Para poder mover a imagem para a
posição inicial basta acessar ao menu
View > Tracing Image > Reset Position.
7.8. Templates / Modelos
Como o próprio nome diz, Templates são documentos que podem ser usados como modelo
para outras páginas com o mesmo layout, ou seja, é uma espécie de frame que não separa as
páginas mas vai buscar partes comuns a um só documento.
Ao definir-mos o desenho principal do site, a área que seja comum a todas as páginas, é
necessário gravar esta página como Template no menu File > Save as template… A página
será gravada com extenção .dwt e ficará numa pasta que é gerada automaticamente com o
nome Templates.
De seguida abrimos/criamos uma página em branco e
aplicamos o template.
Para aplicar o template basta abrir o painel Files
divisória Assets e seleccionar o ícone assinalado na
imagem para visualizar os modelos disponíveis.
Para o aplicar à página basta arrastar o mesmo para a
página que está em branco.
O astecto da página ficará como a da
figura em baixo:
O passo seguinte será criar regiões
editáveis ou seja, as regiões que
130
poderão ser modificadas nas páginas. Cada página cada assunto, assim cada uma terá um
conteúdo diferente.
Abrimos o template (.dwt) e com o botão direito do mouse clicamos na região que
pretendemos seja editável, escolhemos Templates > New Editable Region…, damos um nome
à região e OK.
Neste caso foi criado duas regiões editáveis, Título e Conteúdo, ou seja, em cada página irei
colocar um título diferente e respectivo conteúdo da página. Para isso basta escrever e colocar
o conteúdo dentro das limitações verdes.
7.9. Lybraries
A Lybrarie ou biblioteca é um recurso que facilita o desenvolvimento dos projectos, quando
se trabalha com elementos utilizados várias vezes no mesmo site. Estes elementos
podem ser imagens, menus, texto, tabelas, etc.
Para acessar à função Library, no painel Files, divisão
Assets e no último botão, conforme a figura seguinte:
Para adicionar um elemento à lybrarie selecciona-se no
layout o elemento que pretendemos
(imagem, texto, etc.) e carrega-se no
botão
que fica em baixo na caixa Assets.
131
Automaticamente o elemento é adicionado à library. Por padrão o objecto terá o nome
de “Untitled” pelo que o convém mudar para melhor identificação.
Para colocar um elemento do Library na página, basta selecioná-lo e arrastar para o lugar
pretendido.
7.10.
Frames / Molduras
Os Frames ou molduras como muitas vezes são designados, são várias páginas
inseridas simultaneamente no mesmo browser.
Para compreender o uso de frames importa distinguir dois termos: frame e frameset.
Frameset – é o documento html que define a estrutura, ou a divisão, da página em frames
(número de frames). É o conjunto de frames.
Frame – é uma página html inserida numa das divisões da frameset. São no mínimo duas. Ou
seja, existe sempre uma página (frameset) + X páginas (frames).
Criamos uma nova página. Na versão MX encontramos os frames no painel Insert divisória
Frames.
Versão MX
Na versão 2004 os frames estão incluídos na divisória
Layout conforme a imagem da esquerda.
Com a nova página aberta escolhe-se um dos modelos
propostos. Neste caso escolhi o modelo com duas frames,
uma no topo e a outra no rodapé – Top and Bottom
Frames.
Existem vários modelos prontos, porém nada impede fazer
um frameset diferente.
132
Após a escolha a página deverá ter esta aparência:
Como
temos
agora
três páginas inseridas
na frameset (página
principal)
é
necessário grava-las.
Para
isso
selecionamos
uma
cada
delas
e
gravamos. No menu
File > Save Frame
As… Depois das 3
frames estarem gravadas será a vez de gravar a frameset para que as frames fiquem nela
gravadas. Para isso selecciona-se no menu File > Save All.
Dica: Caso as bordas do frameset não estejam visíveis, deverá acionar a opção no menu
View>Visual Aids>Frame Borders.
Depois desta operação temos então a frameset e três frames. A partir daqui é só
redimencionar as divisões da página. Para isso coloca-se o cursor em cima da divisão
e puxa-se para onde pretendermos.
Para definir as propriedades de cada frame,
ou seja, se têm ou não borders, scrool bars,
etc, vamos ao menu Window > Others >
Frames na versão MX ou simplesmente
Window Frames no MX 2004. Abrir-se-à no
canto
inferior direito o Advanced layout,
um esquema do frameset.
Selecionamos a frame pretendida e nas propriedades são definidas as carcteristicas que a
mesma irá ter. Se tem ou não barras de navegação (Scroll), borders, etc.
133
No caso de não se pretender que a frame não seja redimensionada em relação ao tamanho da
tela marcamos “No Resize” no painel Properties.
Criar links em Frames
Criar o link normal.
Ao atribuir o nome do link, a caixa Target no painel de propriedades ficará disponível. Nela, se
indicará o frame onde se abrirá a página do link (por exemplo,
mainframe, topframe,
bottomframe etc…).
Podemos
também
abrir
dois
links
em
frames
diferentes
e
ao
mesmo
tempo. Na divisória Behavior > “Go To URL”, na versão MX, e na divisória Tag <a> >
Behaviors para a versão 2004.
No campo “Open In”, selecionar o Frame em que o link será aberto. No campo URL indicar a
URL a ser aberta. Pode-se fazer isto para cada frame, um link para cada frame.
7.10.1. iFrames
134
iFrame (inline frame) não é mais do que uma janela dentro de uma página onde se abrirá outra
página. Ou seja, no meio de uma página principal. Não confundir com Frames que são
divisões na mesma página. Para que esta página seja criada usaremos o código fonte (html)
com os dados relativos às características da iframe.
Para criar um iframe basta incluir o seguinte código na tag <body>, ou seja posicionamos o
cursor no sitio da página que queremos que o iframe surja, abrimos o modo de code view e
colamos o seguinte código:
<iframe
leftmargin=5
topmargin=5
marginWidth=0
marginHeight=0
src=”pagina.htm”
frameBorder=0 width=680 height=140 scrolling=yes></iframe>
Nos valores de Margem poder-se-à definir os que se desejar (neste exemplo, todas as
margens foram definidas com valor “5”). Os valores a seguir são:
src: indica a página a ser carregada;
Frameborder – define a espessura da border: Width/height – define as dimenções do iframe:
Scrolling – Yes ou No se quiser-mos ou não as barras de scroll. No caso de pretendermos que
as barras de scrool apareçam ou não conforme o tamanho da ágina coloca-se “auto”.
É importante dizer que os iframes não são visíveis enquanto editados no Dreamweaver, só se
tornam visíveis quando testados no browser (F12).
Inserir links no iframe
No caso de termos vários links na página principal, e queiramos que os mesmos abram no
iframe, deveremos em primeiro lugar dar o nome ao iframe. Para isso acrescentamos na tag
iframe o código name=”nome_iframe”.
Depois ao inserir-mos o link, tal como nas frames, em target, escrevemos o nome da iframe
uma vez que não aparecerá na caixa de combinação. Ao contrário das frames, o target não
terá o underscore “_” no inicio do nome. Ou seja em vez de _nome_iframe será nome_iframe.
É possível inserir iFrames através de extenções e uma das mais úteis e fáceis de usar é a
MX127851_PDIframe_Object (autor: Public Domain Lda.)
não sendo necessário
inserir directamente no código.
7.11.
Formulários
135
ir
Formulários podem ser sinónimo de interacção entre o utilizador e o site. Com eles podem
efectuar-se pesquisas, comércio electrónico, livro de visitas, registo de clientes ou
simplesmente enviar contacto entre muitas outras possibilidades.
Todos os formulários necessitam de uma ligação ao servidor de Internet, ligação esta
feita geralmente por mei de um script CGI.
Os formulários começam e terminam obrigatoriamente com as tags <form> e </form>.
Atributos dos formulários
Form name: Nome do formulário;
Method: Método de processamento do formulário – GET envia as informações anexadas como
um endereço de Internet (URL). É pouco utilizado uma vez que impõe limite de caracteres
(8192 caracteres). POST permite à aplicação receber informação sem impor limite no tamanho
da informação.
Action: Direcciona o formulário para o aplicativo que processará a informação. Geralmente é
configurado com uma URL que executará uma aplicação específica (formmail por exemplo).
Target: Informa ao servidor qual a janela utilizada para exibir a resposta de confirmação do
formulário, tal como nos links.
As ferramentas dos formulários encontram-se na barra Insert, divisória Forms.
Para inserir um formulário é necessário que antes de mais se insira um form (pimeiro ícone do
lado esquerdo). Um form é uma área que delimita a acção do formulário (<form>….</form>),
ou seja, tudo o que faz parte do formulário deverá ser inserido dentro desta área. O form
definirá a acção que o formulário irá tomar depois de ser premido o botão de Submit ou enviar.
136
Para definir essa acção seleciona-se a linha do form, e no painel de propriedades, ou
directamente no código html defenir-se-à a acção do mesmo.
Depois de inserido o Form, podemos inserir não só todos os componentes de um formulário caixas de texto, botões, áreas de texto, etc - mas também texto, tabelas, imagens e muito
mais.
O envio dos dados de um formulário, poderá ser feito através de e-mail (para isso necessitará
de um formmail ou script de CGI) ou para bases de dados (linguagem dinâmica – ASP, PHP,
JSP, etc.).
Elementos de um formulário
Text field: É uma área destinada à inserção de dados;
Hidden field: Esta função não ficará visívei na página. É inserido no código e executará uma
acção no formulário ou simplesmente serve para inserir uma referência;
Text Field: Como o nome indica serve para inserção de texto;
Checkbox: Serve para marcar hipóteses num formulário (tipo visto);
Radio button: Como o checkbox também serve para marcar uma ou várias hipóteses
num formulário. No caso de pretendermos que dentro de várias hipóteses o utilizador só tenha
a possibilidade de escolher uma, então insere-se o Radio group;
List menu e Jump menu: O List menu não é mais do que uma lista de hipóteses onde o
utilizador poderá escolher uma de várias hipóteses, e apresenta-se como na figura de baixo.
Se pretendermos fazer desta lista um menu de links para outras páginas utilizaremos o Jump
menu;
Button (botão): Como o próprio nome indica é um botão, que ao ser accionado realizará uma
acção. Há duas acções possíveis que poderam ser realizadas pelo botão: Submit form, que irá
submeter o formulário à acção indicada, e o Reset form que apagará os dados inseridos no
formulário.
137
Este é o aspecto do formulário no browser.
7.11.1. Validar um formulário
Validar um formulário significa atribuir campos
de
preenchimento
obrigatório,
ou
com
determinado valor obrigatório, por exemplo só
números ou e-mail, etc.
Para validar um formulário vamos usar comportamentos ou Behaviors.
Depois de inserido o formulário, e com o cursor dentro do mesmo, na barra Design divisória
Behaviors, na versão MX, e na versão 2004, vamos ao painel Tag divisória Behaviors.
Accionamos o + > Validate Form.
138
Na janela Validate Form configura-se o tipo de dados que se requerem:
Value: se marcado o Required significa que o campo é obrigatório ser escrito;
Accept
Anything: qualquer valor será válido;
Email address: só serão válidos endereços de e-mail; Number: números
Number from: só seram válidos números entre os limites colocados em número to número.
7.11.2. Exercício - Help em formulários
O help nos formulários, é uma maneira de mostrar a quem está a preencher o formulário o que
deve colocar no campo de texto. Claro que este help só fará sentido quando os campos do
formulário suscitarem alguma dúvida do tipo de informação que se irá introduzir. No entanto
fica sempre engraçado e mais completo.
Para melhor compreensão na construção desta aplicação convém ver em primeiro lugar
os capítulos Camadas / Layers e Behaviors.
Criarmos um formulário que tenha um espaço para inserção de camadas. Neste exemplo
foram criados apenas dois campos de texto, consequentemente, duas camadas.
Em cada camada escreve-se a descrição do respectivo campo de texto
que irá representar. Por exemplo no campo nome a camada respectiva
poderá ter: “Aqui escreve o seu nome”.
De seguida selecciona-se o primeiro campo e em Behaviors (+)
escolhemos Show-Hide Layers e no behavior (conforme imagem do lado)
que ficará visível escolhe-se onFocus.
139
Repete-se o mesmo processo escolhendo-se no behavior Hide e onBlur.
onFocus: em evidência;
onBlur: sem qualquer evidência (sem foco).
Basta agora fazer o mesmo para o segundo campo de texto e respectiva camada.
Fica assim pronto um “help” para formulários útil em certas situações.
7.12.
Layers / Camadas
As Layers ou camadas são um grande recurso que o Dreamweaver possui. Como o próprio
nome indica são camadas, ou espaços que virtualmente ficarão acima do layout da página.
São espaços que tal como uma página podem conter os mesmos elementos desta.
As camadas são criadas através do ícone
na barra de ferramentas Insert na divisória
Common (versão MX) ou divisória Layout (versão 2004).
O cursor assumirá a forma de cruz e tal como num programa gráfico desenhamos o espaço
(quadrado ou rectangular) da camada.
Depois de inserida a camada convém perceber o painel de propriedades (Properties) da
mesma.
Bg Image: imagem de fundo da camada;
Bg Color: cor de fundo;
Tag – determina se a camada é CSS ou Netscape. As camadas CSS se baseiam em
coordenadas de
HTML enquanto as da Netscape se baseiam em uma formatação criada por ela mesma.
Overflow - Mantém o tamanho da camada e não exibe o excedente.
visible: no caso do conteúdo da camada ser maior que esta, o tamanho da mesma é
aumentado automaticamente quando visualizado no browser;
140
hidden: no caso do conteúdo da cmada ser maior, mantém o tamanho da camada e não exibe
o excedente;
scroll: coloca as barras de scroll na camada;
auto: coloca as barras de scroll caso o tmanho do contudo exceda o tamanho da camada.
Vis – indica a visualização inicial da camada:
default: visualização padrão, sempre visível;
inherit: Herda a propriedade da “camada-mãe”, ou seja, se esta camada estiver dentro de
outra, ficará com a propriedade de visibilidade da camada principal;
visible: Exibe o conteúdo da camada, independente da camada-mãe;
hidden: oculta não só o conteúdo como também a própria camada.
Dica: Para editar várias camadas ao mesmo tempo, selecione uma ou mais camadas
segurando a tecla "Shift". Na caixa de Ferramentas aparecerá uma nova opção: "Multiple
Layers", onde se especificará o novo tamanho ou posicionamento que será aplicado para
todas as camadas.
Poder-se-ão fazer coisas bem interessantes com as camadas utilizando acções. Noutros
capítulos.
7.13.
Adicionar elementos de Media (video e som)
A inserção de elementos de som (mp3, .wav, etc)
ou vídeo (.mpeg, .mov, .swa, etc)
é relativamente fácil através dos recursos que o Dreamweaver possui embora estes recursos
sejam um pouco limitados, sendo muitas vezes necessário recorrer à edição do código
para personalização destes elementos.
Existem no entanto algumas extenções que facilitam esta operação.
7.13.1. Video
O maior problema encontrado pelos webdesigners em disponibilizar vídeos , é o tamanho dos
arquivos. Para resolver esta questão, os fabricantes de mídia desenvolveram várias soluções
para criação, armazenagem e reprodução de mídia digital. Cada solução tem um formato de
arquivo diferente exigindo assim que o utilizador tenha um sistema de reprodução (plug-in,
controle Active- X ou applet Java) capaz de interpretar esse formato específico.
Existem atualmente três grandes centros de desenvolvimento de midia streaming: RealMedia
, QuickTime e Windows Media. Juntas representam actualmente todo o mercado de Mídia
virado para internet.
141
Para inserir um elemento de vídeo numa página existem dois processos, utilizando um link ou
utilizando uma tag <embed>.
No caso de utilização de um link
Selecciona-se o texto ou imagem que irá servir de link para o arquivo de vídeo, e no painel
Properties coloca-se o respectivo arquivo.
Convêm colocar o tamanho do arquivo ao lado do texto do link para informar o utilizador.
Utilizar a tag <embed>
Deste modo obter-se-à mais controle sobre a reprodução do filme uma vez que será
incorporado na página através da tag <embed>. Ao alterar os atributos desta tag é alterado o
modo de visualização do vídeo.
No menu Insert > Media > Plug in, na barra Insert, Media ou simplesmente arrastando o
ficheiro do painel Assets Movie.
Ao inserir este objecto plugin, este apresenta dimensões padrão de 32 x 32. Para modificar
estas dimensões vá em Properties e insere-se os valores para W e H, largura ou altura ou
selecciona-se o objecto no layout e no canto inferior direito aparecerá um quadrado de
redimencionamento.
Streaming em RealMedia
O download de arquivos vídeo numa ligação por modem tornam-se mais rápidas e eficazes
graças ao surgimento do Vídeo Streaming. Esperar até que o download do arquivo de vídeo
seja feito, pode levar uma eternidade.
Ao incluir RealMedia nas páginas , podemos fazer com que o RealOne Player do utilizador
flutue na página, bem como pode especificar que o vídeo apareça inline (em uma área
específica da página). Pode-se também personalizar os controles que aparecem na página.
Criar arquivos RealMedia
142
O RealMedia utiliza o seu próprio software de servidor chamado RealServer para transmitir
os arquivos de vídeo codificados. Em vez de chamar esse servidor e o arquivo de vídeo
diretamente, o RealMedia utiliza o sistema de metarquivos para vincular ao servidor o arquivo
de RealMedia. O metarquivo nada mais é do que um arquivo de texto comum (txt) contendo o
URL que selecciona o arquivo de vídeo para o RealServer. O que difere dos arquivos de midia
são as extensões:
arquivos RealMedia = .rm , .ra , .rp , .rt , .swf
arquivo que carrega o RealOnePlayer independente = .ram metarquivo que carrega o
RealPalyer Plug-In = .rpm
Para criar um metarquivo , abrimos o bloco de notas, ou notepad, e inserimos uma linha que
direcione para o caminho do arquivo de vídeo, com a diferença de ai invés de utilizar http
usaremos
rstp
(Real
Time
Streaming
Protocol),
ou
seja:
rstp://www.smtc.net/vídeos/arquivo.rm.
Inserir RealMedia
Uma vez o arquivo codificado e o metarquivo de RealMedia, vamos inseri-los na
página. Inserimos
um
link
e
configura-se
o
atributo
href
para
o
endereço
do
metarquivo: <a href="vídeos/materia_dw.ram">Video</a>
Podem-se inserir vários arquivos de vídeos no mesmo metarquivo, basta para isso colocar um
em cada linha, separada por um único retorno.
Quando o link é acionado vai chamar o metarquivo, que por sua vez , chama o arquivo de
vídeo no RealOnePlayer. Assim que o arquivo começa a fazer o download para o usuário, o
RealOne Player é activado e começa a exibir o vídeo numa janela de vídeo independente.
7.13.2. Som
A inserção de som é muito parecida com a inserção de vídeo.
Para inserir um elemento de som, tal como no vídeo basta ir ao menu Insert > Media > e o
plugin respectivo, Applet, Active X ou Plugin (Win Media Player). Escolher o arquivo de som e
será inserido na página o ícone referente ao plugin.
143
ícone do Plugin Windows Media Player
Para redimencionar o plugin que ficará visível na página, basta seleccionar o ícone e
apareceram umas alsas de redimensionamento no mesmo.
Inserir som de fundo numa página
Para inserir som de fundo numa página basta colocar na tag body do html o seguinte código:
<bgsound src=”som.wav” loop=”infinite”>
“Lincar” a um arquivo de audio
Também se pode criar um link para um arquivo de áudio. Neste caso ao clicar no link abrir-seà o player que estiver por padrão no computador do utilizador para reprodução do arquivo.
Para isso basta seleccionar o texto ou imagem do link e seleccionar na caixa de texto do link o
respectivo ficheiro de som.
7.14.
Timeline / Linha de tempo
Embora este recurso não estivesse inicialmente disponível na versão MX 2004 foi incluído no
update 7.0.1 que a Macromedia disponibilizou aos utilizadores.
É um recurso que traz grande dinamismo às páginas. Com ele podem-se programar acções
com recurso a uma linha de tempo a par do que se passa no Macromedia Flash.
O uso de timelines implica a inserção de códigos de Javascript no cabeçalho do documento,
<head> … </head>. Isto é feito dinamicamente pelo Dreamweaver sem termos de nos
preocupar com isso, embora convenha saber, pois muitas vezes é necessário alterar
certas acções manualmente.
Para acessar a esta funcionalidade vamos ao menu Window > Others > Timelines ou Alt + F9.
abrir- se-á o painel do Timeline:
144
Para mostrar esta função vamos construir um
evento.
Inserimos uma camada (layer) com uma
imagem, tabela ou simplesmente texto dentro
da mesma.
Adicionamos
esta camada à
timeline. Para tal arrasta-se a camada até à
primeira “frame” da linha do tempo, conforme a
imagem do lado esquerdo.
Aparecerá automaticamente a roxo, um layer
na linha
de tempo até à casa 15, que
corresponderá ao número de frames em que
decorrerá a acção.
Em Fps temos a velocidade a que a acção decorrerá, ou seja 15 frames por segundo. Este
campo ficará ativo logo após termos arrastado a camada para o primeiro frame.
Se pretender-mos reduzir ou aumentar o tempo de ação basta alterar estes valores.
De seguida movemos o indicador
da acção, a vermelho, para a casa
15 e arrasta-se a layer para outro
local da página (layout).
Para que a animação seja executada logo após a página ser carregada devemos marcar o
Autoplay, e para que a animação seja de uma forma contínua Loop.
145
Podemos também introduzir uma pausa no início da animação. Para isso clicamos no meio da
linha de tempo respeitante à camada e arrasta-se algumas frames (ou quadros) à frente, para
a posição pretendida.
7.14.1. Exercício - Acção OnKeyPress
Esta é uma acção simples que consiste em, ao digitar uma tecla a camada baixa.
Inserimos uma camada com uma imagem ou menu que descerá. Adicionamos a mesma à
timeline. Criamos uma animação com 15 frames, onde o frame 1 é posição inicial e o frame 15
é a posição final.
Criam-se 13 Keyframes, do frame 2 até o 14 e adiciona-se ao frame 2 um behavior: “Stop
Timeline” na linha "B" da timeline. Agora, selecionamos este behavior, copia-se e cola-se até
ao frame 14 (automaticamente, as ações são adaptadas ao novo frame). Adicionamos à tag
Body o Behavior Play Timeline e como evento, OnKeypress.
A acção fica assim concluída.
7.15.
CSS - Cascading Style Sheet
As folhas de estilo ou Cascading Style Sheets (ou ainda definições de estilos em
cascata), geralmente denominadas por CSS são acções inseridas no código da página que
vão desencadear um determinado acontecimento. As CSS foram criadas e tornaram-se
padrão em 1996 pela World Wide Web Consortium (W3C). São disso exemplo mais comum a
alteração do formato do cursor, tirar o sublinhado aos links, criar uma mensagem especifica
na barra de status do browser, eliminar as barras de rodagem (scrool bar), etc, etc. Permite
controlar, efetivamente, o desenho de um site.
Convém salientar que só os Browsers Internet Explorer versão 4 ou superior permitem
visualizar
eficientemente
os
estilos
CSS.
A
codificação
CSS
será
reconhecida
automaticamente pelo browser que estiver preparado para a reconhecer.
As folhas de estilo podem ser inseridas directamente na página ou em arquivos externos ao
documento.
A aplicação de um CSS implica a inserção de um código específico no HTML entre as tags
<HEAD> e </HEAD> que será a função ou referência:
146
<style type="text/css">
<!— icio do css -->
código
<! – fim do css -- >
</style>
E entre as tags <BODY> e </BODY> que será o local onde a função irá ser executada:
<H1
style=”nome do estilo”></H1>
<P style=”nome do estilo”></P>
As folhas de estilo ou CSS também podem ser aplicadas num arquivo externo, geralmente
com extenção .css, evitando assim colocar uma função que seja igual a várias páginas em
todos os <HEAD> das mesmas, bastando para isso relacionar o código do <BODY> com o
respectivo fichiro. Neste caso a referência a este arquivo é colocada no head desta forma:
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”estilo.css” TITLE=”ESTILOS”>
ou
<style>
<!—
@import “estilo.css”;
-- >
</style>
Trabalhar com folhas de estilo no Dreamweaver é muito fácil e agradável. As operações são
interativas abrangendo, praticamente, toda a especificação recomendada.
O painel onde poderemos acessar à inserção de
códigos CSS encontra-se em Design (lado direito)
divisão CSS Styles em ambas as versões. Na
versão MX 2004 a edição de folhas de estilo tornase mais facilitada. Logo no painel de abertura
temos
a
possibilidade
de
escolher
modelos
existentes.
Abrir-se-à a janela onde se pode escolher as CSS a
147
aplicar na página ou modelos de páginas com CSS inseridas, em Page Designs (CSS).
Para
melhor
compreendermos
o
funcionamento de inserção de um CSS
vamos Ao painel, Design do lado
esquerdo, e selecionamos a divisória
CSS Styles (igual em ambas as
versões):
No
painel
de
CSS
(à
esquerda)
clicamos no sinal mais, em baixo, para
inserir um novo estilo. Abrir-se-à a
janela de diálogo New CSS Style:
Em Name dá-se o nome que queremos atribuir ao
estilo. È importante referir que o nome do estilo deverá ter um ponto antes, sem o qual correrse-á o risco de não funcionar - .nome_css.
Em Type deixa-se em Make Custom Style (class), ou seja, como folha de estilo padrão.
No Define In, refere-se a origem do CSS, se no documento (head) ou num arquivo à parte
(.css). Consideremos que o estilo será inserido no head da página – This Document Only. OK.
Agora é definido o estilo a criar.
148
Em Category, e como o nome indica, são as categorias de estilos, Tipo de texto e links (Type)
fundo da página (Background), Campos de texto (box), etc..
Para exemplificar melhor, irei definir um estilo em que a imagem de fundo da página não se
repetirá.
Então escolhe-se a categoria Background.
Escolhe-se
a
imagem
em
Background Image e em Repeat
dá-se a instrução “no-repeat”.
Está assim criado um estilo.
Para aplicar o estilo à página,
basta posicionar o cursor em
qualquer sítio da mesma e clicar
no estilo que deverá estar no
painel de CSS Style:
7.16.
Configuração de um site com programação
Para definir um site com programação, (PHP, ASP,
JSP, ColdFusion, etc.), utilizamos o mesmo método que numa configuração normal vamos ao
menu Site > Edit Sites… (versão 6) ou menu Site > Manage Sites (versão 2004) categoria
Testing Server.
149
Server Model, é o modelo
ou
tipo
tecnologia
servidor
que
de
iremos
utilizar. Neste caso PHP
MySQL.
Em Access é definido o servidor que servirá de teste ao site e temos duas possibilidades:
Local/Network (local)
Para a possibilidade de se testar o site no local (no nosso PC) é importante salientar que
deverá existir a instalação de um servidor no nosso computador. No caso da linguagem de
programação PHP um servidor Apache (www.apache.org), no caso de ASP o IIS já incluído no
Windows, bastando instalar/activar o mesmo.
Em Testing server folder é informado a pasta que servirá de teste local e em URL prefix, o
endereço
do
servidor
local
por
exemplo
http://localhost/siteremoto/
(ou
ainda
http://127.0.0.1/siteremoto) que será o URL de teste no browser.
150
No caso de pretendermos testar directamente no servidor remoto, selecionamos FTP em
Access, e tal como na configuração do FTP para publicação do site preenche-se os dados do
servidor. URL prefix será o endereço completo da página na Internet.
7.16.1. Ligação a uma base de dados
Para fazer a ligação de um site ou página a uma base de dados é importante que, tal como na
configuração de um site para programação, esteja configurado o Testing Server na definição
do site.
Vamos continuar com a linguagem PHP e com uma base de dados MySQL embora a
operação seja igual com qualquer tipo de linguagem ou base de dados SQL.
Depois de criada a base de dados e respectivas tabelas na base de dados, propriamente
dita, teremos de fazer a ligação da mesma à página. Iremos criar uma página de visualização,
inserção e edição de dados ou registos.
Ligação à base de dados
Esta operação será igual para todas as páginas que utilizarão a base de dados.
Para isso criamos uma página PHP (neste caso) ou noutra linguagem, e adicionamos um
Recordset (ligação à basa de dados).
No painel Insert divisória Application, accionamos o primeiro botão Recordset (
).
151
Name: será o nome da ligação;
Connection: accionamos o botão Define… para definir a base de dados:
Na janela Connections fos Site clicamos em New.
152
Connection Name: o nome da ligação a determinada base de dados; MySQL Server: localhost
(genericamente);
Username: username; Password: não é necessária;
Database: selecionamos Select…
Deveram estar na lista as bases de dados existentes. Selecionamos a pretendida e OK.
Na Janela MySQL Connection, antes de dar-mos Ok acionamos Test e uma vez que o
Dreamweaver não tolera campos em baixo deverá exibir uma mensagem onde nos diz que
não foi inserida a passord.
Deveremos ignorar esta mensagem e acionamos OK.
Deverá estar a ligação na janela
Connections for Site.
Agora a ligação já pode ser selecionada
em Connection e as tabelas em Table.
153
No código é inserido automaticamente a ligação com a seguinte linha:
<?php require_once('file:///D|/Websites/DW/ase/Connections/connAB.php'); ?>
7.16.2. Página de visualização de dados
Para criação da página de exibição dos dados clicamos no botão Dynamic Table (
). Criará
uma tabela onde seram exibidos os dados.
Recordset: nome da ligação
Show: número de registos que será mostrado por cada página. No caso de seleccionar-mos
All records serão mostrados todos os registos na mesma página.
Os três campos abaixo, Border, Cell padding e Cell spacing são respeitantes às dimnsões dos
limotes d tabela.
A tabela deverá ter mais ou menos este aspecto:
154
Os nomes da primeira linha representam as referências dos valores e poderão ser alterados.
Na linha inferior serão mostrados os valores da base de dados. Todas as fontes e tamanhos
de texto podem ser editados.
Agora podemos inserir elementos de navegação entre os registos. Para isso clicamos em
Recordset Paging (
).
Dysplay using: Text aplicará links em formato de texto, no caso de images irá inserir na página
imagens que farão a navegabilidade (primeira, anterior, próxima e última).
Tal como na tabela de exibição de dados também se pode modificar o tipo e tamanho da letra.
Por sim poderemos adicionar a informação do número de registos existente. Clicamos no
botão Display Record Count (
).
155
Claro que todas as expressões em inglês poderam ser alteradas para português excepto as
que estiverem sinalizadas com a cor azul que são respeitantes aos dados.
7.16.3. Página de inserção de dados
Como já referi atrás é necessário fazer a ligação à base de dados em todas as páginas.
De seguida no ícone Insert Record (
), expandimos as
suas opções e selecionamos Record Insertion Form.
Connection: deveremos escolher a ligação criada; Table: a tabela na qual queremos inserir os
dados;
After inserting, goto: a página para a qual deverá o utilizador ser redireccionado quando
accionar o botão de submit ou de confirmação (por exemplo a página de confimação).
Deverá ficar como a imagem que se segue:
Alteramos os textos e tipo de letra e a página está pronta.
7.16.4. Página de edição de dados
156
Para a criação de uma página de edição de dados (alteração), e após termos feito uma ligação
à base de dados, clicamos no botão Record Update Form Wizard (
).
Em Connection escolhemos a conecção (criada anteriormente) e em Table to update a base
de dados a ser editada.
No campo After updating, go to colocamos a página de confirmação para os dados inseridos.
No campo Form fields inserimos ou retiramos campos, para que fiquem disponíveis apenas os
pretendidos.
O formulário deverá ter, mais ou menos, o seguinte aspecto:
Agora basta modificar o estilo de letra, cores, etc..
157

Baixar

Transcrição

Documentos relacionados

Clique aqui e baixe o pdf com mídia kit

INSTITUIÇÕES Embaixada do Brasil na Colômbia Embaixadora

Apostila de HTML e CSS

Effect of Central Corneal Thickness and Corneal Hysteresis

Apostila (Html 4.0.1)

Web Courier – SPEC

Redes Semânticas

Inserindo Assinatura no Hotmail

Ficha técnica L42

Baixar o arquivo

Criando Rollovers simples - tiago