Como Se Tornar Um Webmaster

Primeiramente queremos agradecer a Deus pois sem ele nada disto seria possvel.
Em segundo lugar a todos os alunos e ex-alunos da Top Training Center, pois vem
deles nossa coragem para investir neste livro. No poderamos deixar de agradecer
ao nosso editor Srgio Martins que nos deu tanto apoio desde o comeo e a
Channtropique Phonna Salgado pela reviso tcnica e dedicao durante um pero-
do conturbado da chegada de um novo herdeiro.
minha esposa Mria pelos finais de semana nos quais precisei me dedicar ao
livro. A meus pais e irmos.
A Ktia e Lourival pela ajuda nos captulos referente a Servidores de Redes e a
linguagem XML.
Por fim, gostaria de agradecer a Top Training Center por todo o apoio durante
estes quatro anos em que sou seu funcionrio, uma empresa dedicada no objetivo
de levar a seus alunos o melhor em treinamento de Informtica.
Felizmente fao parte desta familia.
Agnaldo Lopes Martins
Organizador

Tudo possvel quando as vontades
se unem em torno de um ideal comum.
No incio da dcada de 90, quando comeamos a viabilizar a criao da Top
Training Center, percebemos que teramos de competir com empresas que
gozavam de grande prestgio na rea de treinamento em informtica.
Lembro-me muito bem da minha amiga Rijane Montalverne, brilhante profissional
da rea de treinamento e desenvolvimento de pessoas, falando: Gilson, se voc
quer ter sucesso nesse mercado, encontre um diferencial.
Pois bem, e qual seria esse diferencial? At ento, curso de informtica era sin-
nimo de turmas, carga horria e contedo programtico fixos. Onde poderamos
fazer alguma diferena? A grande mudana que estava acontecendo naquela po-
ca era o surgimento de turmas com apenas um aluno por micro. Na realidade, a
mudana no foi metodolgica e sim conseqncia da reduo do preo dos mi-
crocomputadores. As aulas continuavam a ser em turmas e com carga horria fixa.
Aprendendo ou no, o aluno era dispensado to logo o tempo estabelecido em
contrato fosse atingido.
Como conseqncia desse mtodo ainda hoje utilizado, quantas pessoas no a-
prenderam a usar um microcomputador pelo simples fato de no lhes ter sido con-
cedido o tempo necessrio para adaptao ao uso de um mouse? Quantas outras
se frustraram, aps participarem de cursos avanados, vtimas do mesmo modelo
de treinamento baseado em turmas e carga horria fixa. Eu mesmo, por mais de
uma vez, senti essa desagradvel sensao.
Faltava uma evoluo no ensino da informtica: milhes de pessoas precisariam
ser treinadas no uso da mquina, exigindo-lhes habilidades que, at ento, sequer
existiam.
VI I I Como se tornar um WEBMASTER

Privilegiados por termos observado que a grande mudana no ensino de informti-
ca teria que atender a uma nica exigncia, o respeito individualidade do aluno,
abolimos as turmas e flexibilizamos os horrios dos nossos cursos.
Como no dispnhamos na poca de material de leitura que nos ajudasse na con-
solidao desse novo mtodo, empreendemos uma pesquisa intensa em sala de
aula. Para tal, contamos com o apoio dos nossos milhares de alunos e dos colabo-
radores diretos. No foram poucos os que contriburam tanto na metodologia
quanto na elaborao do material didtico que, atualmente, supera vinte e cinco
cursos entre bsicos e avanados.
A nossa grande misso, nestes oito anos de existncia da Top Training Center,
tem sido aperfeioar o mtodo que respeita a individualidade do aluno, permitindo
que ele absorva o conhecimento sem se preocupar com a rigidez imposta por uma
turma ou carga horria prestabelecidas.
O sucesso tem sido to grande, que conseguimos nos colocar entre as mais con-
ceituadas empresas de treinamento em informtica de Belo Horizonte, cidade ber-
o dessa nova metodologia.
O mtodo, entretanto, no pra de evoluir. Agora mesmo, uma nova transforma-
o se faz presente: estamos consolidando o MINI Mapeamento Individual
de Necessidades de Informtica e o PACI Programa Avanado de Capa-
citao em Informtica. Com esses dois novos produtos estamos esperanosos
de assumir, mais uma vez, a posio de vanguarda no ensino de informtica. Dei-
xamos para trs o conceito de empresa de treinamento em informtica, para nos
tornarmos um centro de capacitao de pessoas. Maiores detalhes sobre essa nova
etapa voc encontra em nosso site www.toptc.com.br ou mediante solicitao
atravs do e-mail: toptc@toptc.com.br.
Quanto ao presente livro, smbolo maior da nossa gratido a todos aqueles que nes-
ses oito anos confiaram em nosso trabalho, foi criado por ns para suprir a carncia
at ento observada de se encontrar, em um nico volume, praticamente tudo o que
se precisa para a criao de um site profissional. O contedo foi organizado por
Agnaldo Lopes, com base no nosso material de sala de aula, que, com grande compe-
tncia e humildade, como lhe peculiar, foi capaz de organiz-lo, de forma a atender
no s o estudante quanto ao webmaster profissional. A ele, os nossos sinceros
agradecimentos por compartilhar conosco, mais uma vez, um pouco do que sabe.
Lembremos, porm, que: indivduo e tecnologia caminham em velocidades diferen-
tes. Quando um chega; a outra, fugaz, j se foi.
Gilson Brando Cheble
Diretor executivo da Top Training Center
1

Com a tecnologia disponvel hoje, desenvolver um site ficou to fcil que at uma
criana capaz de coloc-lo no ar de um dia para o outro.
A afirmativa acima verdadeira, mas se estivermos falando de um site profissio-
nal, no s com a tecnologia que devemos nos preocupar. Diversos fatores pre-
cisam ser considerados para que se consiga obter resultado.
Neste captulo, pretendo deixar os aspectos tecnolgicos de lado e abordar a questo
da construo de sites sob a tica comportamental. Primeiramente a sua, enquanto
Webmaster e em seguida a do seu cliente que, em ltima instncia, deseja um site
para vender o seu produto ou servio, ou simplesmente divulgar o seu negcio.
Vendendo a si mesmo
Conceber, projetar, implementar e manter um site exige conhecimentos que trans-
cendem os aspectos tcnicos. Daqui para a frente toda e qualquer empresa, enti-
dade, organizao, profissional liberal, enfim, a sociedade como um todo necessi-
taro estar presentes na Rede. Definir comportamentos sob a tica de quem cria
um site e de quem encomenda tornou-se de fundamental importncia.
Comecemos ento por voc. Primeiramente, voc tem que vender a si mesmo e
depois o seu servio. Como trabalhar a sua imagem e como vender um servio em
que voc ainda no tem experincia? Acompanhe as dicas a seguir:
Fortalea seu currculo
V fundo em tudo que voc estudar e se fizer um curso, saiba escolher. Verifique
se a empresa tem credibilidade no mercado, conhea os seus profissionais, o ma-
2 Como se tornar um WEBMASTER

terial didtico, procure informaes com ex-alunos e acima de tudo se lhe daro
suporte aps o curso esclarecendo dvidas que certamente surgiro. No se deixe
impressionar pelo preo. Lembre-se de que treinamento investimento e como tal
deve ser tratado. Um curso muito barato nem sempre lhe trar o retorno esperado
do investimento que voc fez. Da mesma forma, um curso caro no sinnimo de
sucesso garantido. Aja como se voc estivesse investindo um capital e como tal
avalie as reais possibilidades de retorno. Analise o contedo do curso, acompanhe
uma aula, converse com as pessoas que iro lhe transmitir os conhecimentos, faa
contato com quem j fez o curso e, de forma isenta, avalie a sua opinio.
J presenciei muita frustrao de pessoas que se matricularam em cursos baratos,
mas com contedo ridculo e outros caros, com contedo imenso e muito tcnico,
porm incompatveis com a carga horria e nvel de conhecimento do aluno que,
ao invs de ajudar a quem estava iniciando, frustraram e encerraram prematura-
mente uma carreira. Ao se matricular em um curso mal estruturado, no me preo-
cupo se voc ir perder dinheiro ou tempo. Via de regra, o investimento em cursos
de informtica no to alto assim que venha a desestabilizar financeiramente
algum. O mximo que pode acontecer voc ficar com uma desagradvel sensa-
o de ver o dinheiro que voc suou tanto para ganhar ser desperdiado. No me
preocupo tambm se voc desperdiou tempo porque, no mnimo, voc adquiriu
experincia de como no se deve fazer um curso. O que me preocupa realmente
o que pode acontecer com o seu estmulo. Ao se matricular em um curso, so as
suas esperanas que esto em jogo e, se algo der errado, existe uma grande
chance de voc abandonar uma idia promissora. Portanto, pesquise cuidadosa-
mente antes de se matricular. Com certeza voc saber distinguir os bons estabe-
lecimentos de ensino daqueles que tm um comportamento meramente aventurei-
ro ou mercantilista.
O fato de voc fazer um curso consistente na rea de desenvolvimento no lhe
garante conhecimento eterno. Os cursos de atualizao devem estar em seus pla-
nos. Estes cursos, alm de mant-lo atualizado, poupam-lhe tempo. No h dvida
de que utilizar um computador, a cada dia que passa, torna-se mais fcil, porm
esta facilidade tem estimulado os desenvolvedores de aplicativos a incorporar cada
vez mais recursos. Um curso de quinze a vinte horas, muitas vezes realizado em
menos de uma semana, ir poupar-lhe muitas horas de estudo tentando desvendar
recursos que, com uma simples explicao em sala de aula, podem ser repassados
a voc. Lembre-se de que tempo um dos bens mais escassos da nova era e to-
dos os recursos devem ser investidos por voc de forma que o mximo do seu
tempo dedicado ao trabalho seja investido no desenvolvimento dos sites.
Alm dos cursos, adquira o hbito de leitura
Manter-se atualizado o mnimo que qualquer profissional precisa para garantir
o seu aperfeioamento. O mercado rico em boas publicaes sobre o assunto e
Alm da Tecnologia 3

na prpria rede voc ser capaz de encontrar muito material de leitura. Diversifi-
que o seu conhecimento. No se prenda s a leitura tcnica. Uma cultura geral
necessria para quem se prope a desenvolver sites. Lembre-se tambm de que
a concorrncia, em qualquer segmento de negcio, cada vez mais feroz e a
batalha se ganha com o conhecimento que se tem. Manter-se atualizado de
fundamental importncia, pois o conhecimento nessa rea torna-se obsoleto
muito rapidamente.
Mantenha o foco
Se voc est determinado a ser um Webmaster, no pense que acontecer da
noite para o dia. Muito trabalho ser exigido de voc. Mas isso no diferente de
qualquer profisso. Voc j viu engenheiro, mdico, carpinteiro ou serralheiro de
sucesso, sem esforo? Manter o foco significa concentrar todos os seus esforos
naquilo que voc estabeleceu como meta. O mercado para Webmaster est a,
sua disposio e um dos mais promissores e generosos que existem. Voc tanto
pode ser o responsvel por um site de um profissional liberal como de uma grande
empresa. So milhes de clientes prontos para serem atendidos. Os limites, quem
estabelecer ser voc.
Se voc j um profissional de uma outra rea, concilie as duas atividades, pelo
menos durante algum tempo. Desenvolva os sites em horrios vagos, aps o ex-
pediente e durante os finais de semana. Seja tico, no v desenvolver sites du-
rante a sua jornada normal de trabalho, a menos que o site seja para incrementar
o seu prprio negcio, o que, por sinal, ser muito comum daqui para frente: o
jornalista que mantm o seu prprio site, sem deixar de ser jornalista, o mesmo
acontecendo com advogados, mdicos, engenheiros, dentistas, compradores, ven-
dedores, psiclogos e todo tipo de profisso que se possa imaginar.
Crie um crculo de amizades em torno da sua profisso
A Internet bastante democrtica neste aspecto. Ningum sabe tudo e quem sabe
adora compartilhar o seu conhecimento com quem possui afinidade com seu sa-
ber. So inmeros os fruns de discusso tcnica, cheios de gente querendo trocar
informao. Por mais que se esforce, voc no ser capaz de saber tudo e atravs
desses contatos voc enriquecer o seu conhecimento sem gastar muito, s tro-
cando informao. Neste aspecto, seja generoso, compartilhe o mximo que voc
sabe com os outros e descubra que quanto maior for essa sua generosidade maior
ser o seu conhecimento. s conferir.
Zele pela sua aparncia
fato que a maioria dos gnios em informtica so meio desleixados. Se voc se
enquadra na categoria dos gnios, OK, mantenha o desleixo, porm, se voc esti-
ver na categoria dos normais, cuide do seu cabelo, da sua roupa e de tudo o

mais que contribua de forma positiva na imagem que voc vai passar. No mundo
dos negcios isso ainda influencia na deciso. E tem mais, ningum ir lhe dizer
que no fechou o contrato com voc porque voc apresentava uma aparncia
desleixada. Mil e uma desculpas sero dadas sem que voc desconfie omotivo
real. Agora, no confunda desleixo com simplicidade. Voc pode estar vestido com
roupas finas, porm a sua aparncia estar denotando um certo desleixo. Por outro
lado, voc pode estar trajando roupas simples e, no entanto, refletindo elegncia
no seu visual.
Seja disciplinado
Adquira o hbito de dividir o seu trabalho em trs partes: incio, meio e fim. So
comuns os casos de pessoas que iniciam um trabalho e deixam pela metade. Ou
comeam pelo meio, sem considerar aspectos iniciais relevantes para o sucesso do
site.
Documente tudo que puder
Principalmente se o projeto for muito grande. Depois de algum tempo, tanto a sua
memria quanto a do seu cliente tendem a falhar e, para evitar conflitos, docu-
mente as etapas e tudo o que foi acertado. Com isso, voc evita usar s a mem-
ria para saber se algo que no deu certo foi feito por interferncia sua ou do seu
cliente.
Controle os seus impulsos
Em especial quanto ao investimento que ser necessrio para estruturar-se profis-
sionalmente. Se voc est pensando em se estabelecer por conta prpria, cuidado
para no comear a investir em coisas inicialmente desnecessrias, como aluguel
de sala, constituio de empresa, material de papelaria e coisas do gnero. Para
comear, at mesmo um microcomputador emprestado basta. Se voc est pen-
sando em comprar um computador, no fique fascinado por aquele modelo de
ltima gerao, a menos que voc tenha como pag-lo sem se endividar. Sempre
oriento os meus clientes que o melhor computador aquele que se pode pagar.
Essa regra infalvel.
Crie uma reserva de capital para os momentos difceis, investimento em hardware,
software e em voc. Lembre-se de que tanto os equipamentos quanto os aplicati-
vos que voc usa iro se tornar obsoletos. Voc ter que investir em material de
leitura e cursos de aperfeioamento e, como todo negcio, existem meses que so
melhores do que outros em volume de servio. Portanto, de toda receita que voc
obtiver, separe uma parte para reserva.
Controle as suas despesas. Muito cuidado com dvidas de mdio e longo prazo. Se
tiver que se endividar, d preferncia por dvidas de curto prazo e que voc tenha
Alm da Tecnologia 5

previso de caixa para pagar. Cuidado com essas ofertas de capital com carncia
para pagamento. O pequeno empresrio muito suscetvel s variaes do merca-
do e qualquer turbulncia capaz de inviabilizar a sua atividade.
Respeite o direito propriedade intelectual de quem criou os
softwares
Diga no pirataria. Penso que os fabricantes que so os principais responsveis
por ela, por praticarem preos de softwares exageradamente altos para a realidade
brasileira. Se tivessem uma poltica de preos razovel, haveria um grande deses-
tmulo a essa prtica. Embora eles no faam a parte deles, faa a sua. Mantenha
sempre os seus softwares legais. No deixe, entretanto, de se indignar. Sempre
que possvel, manifeste a sua opinio a respeito.
Conhecendo o cliente
Endereo, pessoas responsveis, produtos e servios, principais concorrentes,
comportamento do mercado, situao na Internet, etc. Evite o desconforto de, no
momento de oferecer o seu trabalho, perguntar o que a empresa produz. Seja pr-
ativo. Ao abordar uma empresa, v com uma proposta de trabalho semipronta.
Faa um breve relato sobre a empresa, o mercado, os produtos ou servios, seus
concorrentes, possibilidade de atuao na Internet. Demonstre interesse, isso far
diferena.
Avalie os sites j existentes
Explore isso na primeira reunio que tiver com o cliente. Se a grande maioria dos
sites for ruim, mostre-lhe que ele poder se destacar. Se os sites forem bons, mos-
tre-lhe o quanto ele est ficando para trs.
Antes de fornecer qualquer preo, elabore um projeto
O projeto servir no s para que voc dimensione o tamanho do site, dando-lhe
condio de fornecer um preo justo, como passar ao seu cliente segurana no
seu trabalho. Este projeto deve ser exaustivamente discutido com o seu cliente.
No fornea preo ou prazo sem que ele tenha aprovado o projeto. Por outro
lado, cuidado para no ser usado. Com um projeto bem elaborado em mos,
construir um site fica muito fcil. O perodo de elaborao conjunta do projeto
deve servir de motivo para que a execuo do site seja com voc e no com o
seu concorrente.
No crie falsas expectativas para seu cliente. Prometer-lhe que, com um site de
comrcio eletrnico as suas vendas iro aumentar, isso, via de regra, se no forem
implementadas medidas adicionais, uma grande mentira.

Seja pontual tanto em reunies que forem marcadas quanto em prazos combina-
dos. Lembre-se de que um cliente deve ser para a vida toda e no incomum
perd-lo por falta de pontualidade.
Comece por criar o seu prprio site
Ele ser o seu principal carto de visita. No se esquea de mant-lo atualizado.
Pior do que um site mal feito um site desatualizado. Seja exageradamente crtico
e, se possvel, conte com a ajuda de amigos para avaliar no s o design quanto o
contedo e a funcionalidade do mesmo.
Especialize-se
Identifique um mercado em que voc pretenda atuar. Por exemplo: jornalismo,
recursos humanos, medicina, odontologia, advocacia, engenharia, contabilidade,
lojas de ferramentas. Esforce-se por tentar conseguir mais de um cliente em um
desses ramos de negcio. Isto transmitir segurana a seu cliente alm de permitir
que voc se torne um especialista.
Identifique os melhores sites do mercado
Visite-os e conclua porque so os melhores. Observe a distribuio dos frames, os
menus, as combinaes de cores, tamanho de fontes, figuras. Faa uma cpia
para servir de modelo. Na Internet, a mxima nada se cria tudo se copia bas-
tante vlida. Na minha opinio, pessoas que realmente criam na Internet so pou-
cas. A maioria, no fundo, copia a idia de outro. Eu no vejo nada de mal nisso,
principalmente se quem estiver copiando for um iniciante.
Identifique tambm os piores sites e tenha conscincia do porqu so os piores.
Eles sero teis a voc ajudando a definir as principais regras de como no se
deve fazer um site.
Crie no seu site um portflio dos servios que voc j realizou
Mas e se voc est comeando, colocar o qu no site? Se voc ainda no tem ne-
nhum site para apresentar, j est perdendo tempo. Corra atrs. Crie, pelo menos
quatro sites, nem que sejam de graa. Voc tem que ter algo para apresentar. O
que no falta cliente. s pesquisar em catlogo telefnico, nos classificados de
jornais, comerciantes do bairro onde voc mora, clubes, escolas, amigos, parentes,
amigos dos amigos, enfim, s uma questo de correr atrs.
Mas, se mesmo depois de correr atrs voc no arranjou nenhum cliente, faa o
seguinte. Lembra daquela dica que eu dei sobre identificar os piores sites? Pois
bem, refaa alguns desses sites e apresente para os proprietrios. Provavelmen-
te um deles ir lhe contratar. Se mesmo assim voc no conseguiu nenhum cli-
Alm da Tecnologia 7

ente, ento um parceiro bom de venda lhe ser muito til. possvel que voc
tenha habilidade para desenvolver sites, mas nenhuma para vendas. Isso bem
normal.
Nos sites que voc criar, tome todo o cuidado com o contedo
No objetivo do presente livro tratar do contedo, porm no existe nada mais
terrvel do que um site com um portugus de baixo nvel. Se voc no domina o
idioma, trate de arrumar um parceiro que domine.
Voc observou que em pouco tempo j falei de dois parceiros? Parceiro de vendas
e de contedo. V se acostumando com isso. Os bons profissionais da Internet
trabalham em parceria. A Rede que em princpio parece ser de computadores, na
realidade de gente. Por trs de cada computador conectado na Internet tem, no
mnimo, uma pessoa e olha que so milhes de computadores na Rede. Se voc
for habilidoso em alguma coisa, certamente far parte de uma rede restrita de
profissionais que desenvolvem sites no mundo inteiro.
Por falar no mundo inteiro, trate de desenvolver o seu ingls e sem deixar de lado
o espanhol. Internet sem ingls fica muito limitada. O consolo que voc no pre-
cisar tanto de fluncia verbal nem de um ouvido muito apurado. Se souber ler e
escrever j ajudar bastante.
Esquea da carteira de trabalho
Se nas demais reas est cada dia mais difcil o empresrio manter pessoas na
empresa com carteira assinada, na Internet nem se fala. Lembre-se de que as
empresas so cada vez mais virtuais. Sem escritrios, gerncias, subordinao e
coisas desse tipo. Eu sei que muito difcil para voc, leitor, ouvir isso. A maioria
das pessoas que comprou esse livro o fez na esperana de se tornar um Webmas-
ter e, em seguida, arrumar um emprego bem seguro. S que no estou aqui para
iludir voc. Uma nova ordem mundial se estabeleceu e o Brasil no tem como ficar
fora dela. Haver abundncia de trabalho e escassez de emprego. Na Internet
tudo surge to rpido quanto desaparece. assim que as coisas acontecem. Tra-
balhar para um cliente localizado a milhares de quilmetros bem natural. Trata-
se de um mundo virtual e sem fronteiras.
Mas se voc da turma que pretende arranjar um emprego, no esquea de ela-
borar um currculo bem feito. Muita gente j perdeu boas oportunidades por falha
na apresentao do currculo. Se voc no sabe elaborar um, consiga algum para
ajudar. Outra dica a prpria Rede. Existem diversos sites onde voc pode se
cadastrar oferecendo os seus servios.

No abandone o seu cliente
H uma tendncia muito grande de, uma vez realizado o servio, esquecer o clien-
te e partir em busca de outro. A falta de assistncia, alm de deixar o caminho
aberto para o seu concorrente, trar prejuzo para voc mesmo. O site vai ficando
desatualizado, voc no poder indic-lo como referncia, alm de perder a opor-
tunidade de ter uma receita mensal fixa para mant-lo. Embora seja do seu clien-
te, trate o site como seu. Nunca o abandone. Pense nele como se fosse seu filho.
Esforce-se por criar e manter uma carteira de
clientes
No fique como um louco correndo atrs de novos clientes enquanto abandona os
que voc j conquistou. Estudos j provaram que manter um cliente muito mais
barato do que conquistar um novo e pior do que isso saber que um cliente seu
foi conquistado por outro no pela competncia dele, mas porque voc no se
esforou para mant-lo.
Desenvolvimento sob a tica do cliente
Vamos falar agora sobre o desenvolvimento do site sob a tica do seu cliente.
Como j frisamos anteriormente, Internet ainda no algo que esteja muito claro
na cabea da maioria dos empresrios. Alguns tm um site simplesmente por ter,
outros, mais ousados, devido esperana de que vo aumentar as suas vendas.
Saber orientar o seu cliente fundamental. Se ele for mal sucedido possivelmente
voc estar perdendo um cliente alm de ser atribuda a voc parte do insucesso
dele. Lembre-se de que se ele o est contratando porque acredita que voc
capaz de orient-lo da melhor forma possvel. A nossa abordagem ser para pes-
soas que esto comeando e que, de um modo geral, tero acesso a oportunida-
des que surgiro em pequenos negcios.
A maioria dos empresrios no tem ainda a real dimenso de onde a Internet est
e onde ir chegar. Via de regra, um site no tratado como algo que deve estar
inserido no planejamento estratgico da empresa: muitas tm um site porque,
hoje em dia todo mundo tem que ter. Quebre esse paradigma. O seu cliente
deve estar convencido de que o site deve ser to importante quanto a abertura de
uma filial, uma campanha publicitria, etc. Em um site ele poder organizar infor-
maes que estaro disposio de clientes, fornecedores, colaboradores, vinte e
quatro horas por dia.
Um dos grandes mercados da Internet dos profissionais liberais e a grande maio-
ria deles no se d conta do quanto um site seria importante para eles. Informa-
Alm da Tecnologia 9

es sobre o seu currculo, fotos do seu consultrio, principais trabalhos realizados,
dicas para seus clientes so coisas que fazem a diferena e, se bem trabalhadas,
no custam caro colocar no ar.
Ao iniciar um trabalho, o seu cliente ter que definir se o projeto ser de uma Intra-
net, Extranet ou Internet. Intranet quando o site exclusivo para uso da empresa,
onde ela ir veicular informaes que interessam s a seu pblico interno. Extranet
uma Intranet que a empresa disponibiliza para clientes, fornecedores e demais par-
ceiros de negcio que tero acesso mediante senha. A Internet j de amplitude
maior. Qualquer um que esteja conectado Internet tem acesso. O fato de se ter
acesso ao site, no significa que se ter acesso a todas as informaes disponveis.
Para aquelas que forem de uso restrito, basta implementar senhas de acesso.
Site institucional ou de comrcio eletrnico
Institucional o site que s vai veicular informaes. No haver transao comer-
cial. Estamos falando de mais de noventa por cento dos sites, portanto, um exce-
lente negcio. Obrigatoriamente dever conter informaes histricas sobre a em-
presa, localizao, endereos e telefones, produtos ou servios comercializados,
fotos, relao de clientes e demais informaes significativas.
No caso de um site de comrcio eletrnico, alm dos aspectos institucionais, deve-
r ser levado em considerao: a segurana da transao, os meios de pagamen-
to, os direitos e deveres das partes, a logstica de estoque e entrega dos produtos.
recomendvel que a empresa primeiro desenvolva o seu site institucional para s
depois entrar na rea de comrcio eletrnico. Com isto ela estar priorizando mu-
danas culturais antes das estruturais. Ao passar a vender pela Internet, na reali-
dade, tanto a estrutura interna quanto a externa estaro sendo alteradas. Esta
recomendao vlida tambm para voc. Comece por desenvolver sites institu-
cionais. No v assumir um compromisso com a construo de uma loja na Inter-
net sem experincia. Se surgir uma oportunidade, consiga um parceiro experiente
que, alm da transferncia da tecnologia, ser capaz de transmitir a voc a segu-
rana necessria para dar os primeiros passos.
Desmistifique a venda de produtos ou servios pela
Internet
No tudo que pode ser vendido pela Rede, principalmente no Brasil. importan-
te lembrar que estamos num pas abaixo do equador. Acompanhe o meu racioc-
nio: imagine que voc mora l nos confins do mundo, tipo Finlndia, inverno,
temperatura 20 abaixo de zero. Neste caso, uma Internet at que vai bem. Voc,
de dentro do seu quarto, escolhe confortavelmente um livro da sua preferncia,

paga com o seu carto de crdito e aguarda a chegada. Pense agora em termos
de Brasil, pas tropical, corpos morenos, sarados, temperatura sempre agradvel
em qualquer estao do ano. Existe coisa mais gostosa do que sair de casa, entrar
numa livraria, conversar com os vendedores, folhear os livros de sua preferncia,
antes de voltar para casa aproveitar para tomar um chope ou um refrigerante e se
depois de tudo isso voc se lembrar, ainda comprar o livro que voc estava procu-
rando? No interprete com isso que sou de opinio que no Brasil a venda de livros
pela Internet no dar certo. No bem assim. Dar certo se for possvel agregar
valor venda, se houver diversificao de produtos e se for bem analisado onde o
mercado consumidor estiver localizado. Muitas das compras atuais pela Internet
so movidas pela curiosidade e outras pela vaidade de dizer que fez a compra pela
Rede. Quando a compra estiver sendo realizada por necessidade, a a venda vai
deslanchar.
Antes de se iniciar o projeto de venda pela Internet deve-se considerar o potencial
de venda dos produtos ou servios, onde est localizado omercado comprador,
quais os hbitos de consumo, se o cliente alvo consumidor final, revenda ou am-
bos. As respostas a essas perguntas que definiro o sucesso ou no do comrcio
eletrnico. Voc compraria sapatos pela Internet? Se for para seu uso pessoal talvez
no, mas se voc fosse dono de uma sapataria provavelmente sim. Voc compraria
pizza pela Internet? Provavelmente no. to fcil pegar o telefone e ser atendido
por uma pessoa do outro lado da linha. A Internet s ser concorrente do telefone
na venda de pizza quando as pizzarias colocarem o atendimento automtico: para
uma pizza calabresa disque 1, para uma pizza de frango disque 2...
Em termos de Brasil, por enquanto, os mercados promissores de comrcio eletr-
nico ficaro restritos venda entre empresas, o chamado B2B, pelo fato de que as
empresas tm mais facilidade de padronizao de produtos. No caso da venda
direta ao consumidor, o chamado B2C, a divulgao de informaes sobre produ-
tos e servios que permitam ao cliente conhecer previamente o que ser adquirido,
como os pacotes tursticos, representam os principais mercados.
E este mercado imenso. Voc j parou para pensar o quanto as empresas podem
disponibilizar de informao na Rede sobre os produtos ou servios que vendem, a
um custo quase insignificante se comparado a outros meios de divulgao? mais
interessante usar as tecnologias disponveis no para efetivar a venda e sim para
apoi-la, permitindo tanto a troca preliminar quanto posterior de informaes acer-
ca da transao comercial. O grande negcio ser usar a Internet para substituir
ou complementar os canais de venda existentes, deixando a venda efetiva na mo
do vendedor. Nenhum computador, por mais evoludo que seja, ter a capacidade
de convencimento de um vendedor. Isto acontece com o telefone, com o jornal,
com a televiso. Com a Internet no ser diferente. Um anncio no jornal desperta
o interesse do comprador que usa o telefone para obter informaes. Se do outro
lado da linha no houver um profissional preparado para fechar a venda, no ser
Alm da Tecnologia 11

o anncio ou o telefone que faro. Fique atento porque esse foi e sempre ser o
grande negcio da Rede: divulgar informao. A venda propriamente dita, deixe
por conta de algum.
Mas existem tantas histrias de empresas que esto vendendo no mundo inteiro
utilizando a Internet. Voc pode estar fazendo este questionamento e temos que
admitir que verdade. S que o propsito do presente livro, como j afirmamos
anteriormente, no analisar esta realidade por ser muito distante de algum que
ainda est buscando conhecimento de como se tornar um Webmaster. Esta reali-
dade est restrita a estruturas gigantescas, que envolvem milhes de dlares e
que funcionam no por elas e sim por uma mquina poderosa que est por trs.
Para a realidade de quem est comeando, tenha uma viso globalizada da Inter-
net, porm implemente solues locais. Vou contar-lhe uma histria: H uma mar-
ca de perfume italiano que muito me agrada. Certa vez procurei este perfume em
lojas tradicionais e como o preo era alto, coloquei o desafio de compr-lo via In-
ternet. Num primeiro momento pesquisei em sites nacionais e verifiquei que no
valia a pena a compra porque o preo estava igual ao das lojas tradicionais. Pensei
ento em adquiri-lo no exterior. As minhas pesquisas, a princpio, se deram em
sites da Itlia, porm a compra no foi possvel por que no faziam vendas para o
Brasil. Comecei ento a pesquisar sites nos Estados Unidos. Depois de muita pes-
quisa, cheguei a um site do jeito que eu queria: tinha o perfume, vendia por carto
de crdito, entregava no Brasil e o mais importante, o preo era a metade do que
eu havia visto no Brasil. Que sensao agradvel de vitria. S que eu no contava
com uma coisa, o preo do frete. Ao incluir o frete, o perfume saa por trs vezes o
preo do que eu encontrei no Brasil. Concluso: adianta ter um produto venda
na Internet dessa forma? claro que no. Voc deve estar curioso para saber se
eu comprei o perfume, ou no, e onde. Pois bem, um dia eu conto o final dessa
histria. Por ora o importante que voc perceba a importncia de se ter viso
local, no se esquea disso.
No so poucos os fracassos de visionrios que implementaram
shopping center na Internet e se deram mal
E por que isso aconteceu? Porque pensaram que bastaria construir uma estrutura
de lojas, captar os lojistas, colocar os produtos nas lojas e divulgar o shopping,
porm esqueceram do mais importante: colocar vendedores nas lojas. Quebraram,
e salvo rarssimas excees, quebraro todos os que se lanarem nesse tipo de
aventura. Sou radicalmente contra esse negcio de achar que Internet faz milagre
no mundo dos negcios. No faz! Ponha na cabea do seu cliente que quem vende
vendedor. Se ele quiser colocar um shopping center na Internet pode contar com
voc, mas antes ter que apresentar-lhe um estudo de como ser a estrutura de
vendas e de onde viro os recursos para bancar os custos de manter a loja no ar.

No existe site perfeito ou ideal
O seu cliente deve ser conscientizado disso, at mesmo porque o design, por mais
bonito que seja, acaba cansando. O refinamento sucessivo do site deve estar bem
claro para o seu cliente. Alerte-o sobre a importncia de manter o site atualizado.
Existe coisa mais desagradvel do que um site veicular uma tabela de preos ou
promoo com data de validade de trs meses atrs ou um banner anunciando um
evento realizado no ano passado? Lembre-se de que site atualizado importante
no s para ele como para voc. A atualizao exigir a prestao de servios e
claro, se voc realizou um bom trabalho, este servio ser prestado por voc.
O design tambm precisa ser atualizado
Pelo menos a cada seis meses, proponha a seu cliente mudana no visual do site.
Compare com uma capa de revista, que a cada edio tem mudanas sem perder
a sua identidade. No espere que ele o chame para realizar a mudana. Antecipe-
se regularmente, apresentando-lhe sugestes. Se voc fizer esse trabalho com
competncia e regularidade voc adquire a confiana do seu cliente e transforma-o
em um cliente cativo. Quer coisa melhor do que isso?
Alerte o seu cliente de que um site no um fim em si mesmo e to dinmico
quanto a sua prpria empresa. Uma vez pronto, no se pode ter a sensao de
misso cumprida, muito pelo contrrio, para que d resultado precisar de aten-
o permanente. No admita aquela famosa frase em construo nem mesmo
para link. Est ou no construdo. Se no estiver no faa nem meno. O mxi-
mo admissvel um link a uma pgina com pouco contedo. Por exemplo: voc
pretende colocar um mapa bem detalhado mostrando onde a empresa est loca-
lizada. Enquanto voc no consegue esse mapa, pode descrever como chegar
at a empresa.
No adianta nada fazer um site e no divulg-lo
como colocar um escritrio em uma sala no vigsimo andar de um prdio e no
criar nenhum mecanismo de divulgao. Algum vai saber que ele existe? claro
que no. Com o site a mesma coisa. A divulgao deve ser feita atravs de mala
direta para os clientes, em catlogos telefnicos, nos papis de carta, em jornais,
em outdoor, atravs de vendedores e em tudo o mais que possa fazer com que o
site se torne conhecido, lembrando que a Rede por si s j um grande veculo de
divulgao.
Entretanto, essa divulgao pela Rede j est ficando saturada. No seu incio at
que era fcil encontrar alguma coisa atravs de sites de busca. S que hoje esta
realidade j no bem assim. Devido ao seu crescimento j existem casos espan-
tosos de ao se fazer uma busca aparecerem duzentos mil endereos.
Alm da Tecnologia 13

Estimulando o visitante
O pblico interno da empresa deve ser estimulado a visitar o site regularmente e a
apresentar sugestes para melhor-lo. Eles, por estarem em contato direto com o
cliente e por conhecerem a realidade da empresa, podem contribuir de forma con-
sistente para o aprimoramento do site. O outro aspecto importante cultural. Ao
estimular a visita ao site, estamos trabalhando a cultura interna da empresa que
comea a ser alterada para se adaptar a essa nova realidade.
Voc j viu alguma loja sem gerente?
O site no diferente. O seu cliente deve definir quem ser o Gerente responsvel
pelo site. Alm de voc ter na empresa um canal aberto com quem conversar, o
seu cliente ter de quem cobrar resultados internamente.
Quando o seu cliente quiser saber quanto vai custar o site,
conduza-o a pensar quanto ser o Investimento
Um site no deve ser considerado como um custo e sim como investimento. Na rea-
lidade, um site deve ser comparado a uma Unidade de Negcio. Atravs dele sero
realizados negcios. Ao se pensar numa Unidade de Negcio deve-se estabelecer um
plano de metas, avaliar o quanto ser necessrio investir para a sua implantao,
quais os seus custos de manuteno e qual o retorno esperado. Com um site no
deve ser diferente. Todas essas etapas devem ser levadas em considerao.
Uma das grandes dificuldades ser colocar preo nos seus servios
bom lembrar que nessa rea tem preo para tudo que gosto. At mesmo por-
que o preo depender do nmero de pginas, quantidade de figuras, recursos a
serem implementados. O que voc no pode perder de vista que se voc est
iniciando, o seu preo no poder ser superior ao de uma empresa j conhecida no
mercado. Passada essa fase inicial, no tenha dvida de que voc encontrar um
preo justo que remunere o seu trabalho.
Estabelea um cronograma fsico financeiro
Defina alguns marcos onde sero estabelecidas metas que voc ter que atingir e
que, em contrapartida, o seu cliente ter que fazer desembolso correspondente
para remunerar o seu servio. De um modo geral os pagamentos so efetuados
em trs vezes. Um no incio dos trabalhos, outro quando o site entrar no ar e o
ltimo trinta dias aps.
Segurana nas transaes
No vou me estender nesse assunto, pois ele ser abordado nos captulos que se
seguem, entretanto, podemos tecer alguns comentrios: a cada dia que passa a

segurana aumenta e se forem tomadas algumas precaues, essa segurana
absoluta tanto para o comprador quanto para o vendedor. As estimativas de venda
pela Internet alcanam cifras astronmicas estando por trs grandes organizaes
que tm todo o interesse em que a transao d certo. Se por trs da transao
houver um site seguro, uma operadora de carto de crdito ou uma instituio
bancria forte, v sem medo. Havendo algum problema, eles assumem toda res-
ponsabilidade, pois no tm nenhum interesse em divulgar falhas no sistema.
Hora de seguir
As recomendaes anteriores no so tudo, mas j indicam um bom caminho para
quem est iniciando. A sua absoro se dar com o tempo e medida que voc
adquire experincia. Recomendo a releitura do presente trabalho em momentos
diferentes da sua vida profissional. Com isso, voc se tornar um campo experi-
mental para a maioria dos comentrios feitos.
15

Agora que j falamos bastante sobre o funcionamento da Internet como uma fer-
ramenta de apoio s empresas, passaremos a um outro aspecto: os servidores
onde nossas aplicaes sero executadas.
Daremos nfase prtica a dois sistemas operacionais: Windows 98 (com o Personal
Web Server) e Windows 2000 Server (com o Internet Information Server). Iremos
lhe apresentar como instalar os aplicativos que transformam o seu computador
num servidor Web. Provavelmente voc j deve estar familiarizado com algum
deles (ou com os dois), e nossas explicaes iro partir do princpio de que voc j
possui um dos dois instalado em seu computador.
Os sistemas propostos no livro (Loja virtual e Controle de estoque) foram escritos
na plataforma ASP (Active Server Pages), com isto, voc ir precisar do Windows
NT (2000) ou Windows 98 (Me) para executar os cdigos com sucesso. No entan-
to, como o desenvolvimento da informtica muito veloz, talvez, durante o desen-
volvimento deste livro, outros sistemas operacionais provavelmente j executem
cdigos em ASP.
Introduo aos servidores
Servidores de rede j so velhos conhecidos no mundo da informtica. At certo
tempo atrs eles eram vistos como verdadeiros monumentos da empresa, ficavam
em salas geladas, com acesso restrito e paredes revestidas em chumbo (no pense
que exagero). Porm, recentemente, eles comearam a ganhar terreno at
mesmo em nossas mesas de trabalho. Como um dos principais fatores desta mu-
dana radical est o fato de que desktops atuais possuem um grau de potncia
inimaginvel h at bem pouco tempo.

Um dos tipos de servidores mais disseminados no mundo da informtica so os
servidores de arquivos e bando de dados. Atravs deles podemos ter um alto grau
de concentrao do processamento que envolva armazenamento e recuperao de
informaes. Um outro exemplo tpico so os servidores de impresso, apesar de
estarem perdendo terreno no mercado (vamos acabar com os papis?) ainda so
muito utilizados.
Uma nova modalidade de servidor est surgindo com extrema velocidade. So os
servidores de Intranet. Provavelmente voc j deve ter ouvido falar sobre eles. A
tarefa aqui prover a rede interna da empresa de recursos vistos apenas na Inter-
net. Atravs deles podemos executar scripts, acessar endereos na web (proxy),
ler nossos correios entre outros diversos recursos.
Vrias so as caractersticas dos equipamentos que podem executar as tarefas
designadas a um servidor de Intranet, tudo ir depender de qual performance
requerida pela rede. Um equipamento Pentium100, 32Mb e winchester de 1Gb,
juntamente com o sistema operacional LINUX pode ser um bom comeo. Mas
quando estivermos falando em um ambiente empresarial (como um provedor de
acesso) precisaremos de algo bem mais robusto.
Nos prximos tpicos explicaremos o funcionamento dos sistemas operacionais
Windows 98 e 2000 Server. Tentaremos ser o menos parcial possvel pois nosso
objetivo aqui no avaliar e sim capacitar voc a tomar a melhor deciso poss-
vel para o seu caso em especial. Tentaremos lhe repassar todo o conhecimento
necessrio para, por exemplo, decidir por um provedor em detrimento de outro.
Outro detalhe sobre este captulo que no ensinaremos como utilizar todo o
sistema operacional, mostraremos apenas o necessrio para que voc execute
suas pginas.
Estrutura do funcionamento das pginas
dinmicas ASP
Pginas dinmicas (ASP/CGI, etc.) esto se tornando to comuns como as em puro
HTML. Atualmente as empresas necessitam de sites que possam ser atualizados,
se possvel, diariamente.
A estrutura interna de funcionamento das pginas dinmicas em ASP pode ser
compreendida pelo esquema da Figura 2.1.
Configurando um Servidor de Internet 17

Figura 2.1
Como podemos ver no esquema da Figura 2.1, o servidor recebe uma solicitao
de pgina para que seja enviada ao cliente, se a pgina contiver a extenso .asp,
ela ser processada pelo servidor, que envia apenas o resultado do processa-
mento.
Isto permite que, por exemplo, a pgina em ASP faa um acesso a um banco de
dados, realize uma consulta, e envie o resultado para a tela do usurio cliente.
Nos computadores com Windows 98 este processo conseguido atravs da insta-
lao do Personal Web Server (o qual ser mostrado mais adiante). J no Windows
NT ou 2000, voc precisar instalar o Internet Information Server.
A grande vantagem de se utilizar o ASP que ele torna simples o desenvolvimento
de aplicativos completos para a Web. Isto possvel porque o prprio PWS uma
DLL a qual permite que novos recursos sejam criados e instalados sobre a forma
de componentes.
A utilizao de componentes prontos uma idia antiga na computao. No entan-
to ela s foi possvel graas ao desenvolvimento de um novo paradigma conhecido
como Orientao a Objetos. Atravs dos objetos foi possvel aos desenvolvedores
criarem componentes com uma infinidade de funes, os quais podem ser disponi-
bilizados para outros programadores em forma de DLLs para serem utilizadas jun-
tamente com o programa principal.
Este o grande trunfo do ASP. Quando voc comear o captulo sobre ASP,
ver que em sua base de funcionamento esto os componentes, os quais so
instalados no servidor (por exemplo, o seu provedor). As suas pginas em ASP
iro acessar estes componentes prontos, e atravs deles poderemos: acessar
banco de dados, enviar e-mail, obter informaes sobre o servidor, e dezenas
de outras funcionalidades as quais s dependem do desenvolvimento de novos
componentes.
Cliente solicita pginas
ASP
Servidor devolve pgina em
HTML (processada)

Desenvolvimento de novos componentes
Uma rea crescente no universo Windows o desenvolvimento de componentes
para serem utilizados com o servidor web. Atravs destes novos componentes os
programadores podem dar recursos inimaginveis aos desenvolvedores ASP. Para
que voc possa criar seus prprios componentes, voc precisar investir em lin-
guagens de desenvolvimento como Visual Basic ou Delphi.
Windows 98/ Millenium
Uma das principais caractersticas deste produto a sua simplicidade de utilizao
(apesar de sua complexidade interior). Ou seja, qualquer usurio com um pouco
mais de facilidade no trato com a informtica poder tirar proveito dos seus in-
meros recursos.
Voc que ir trabalhar como Webmaster possivelmente utilizar o Windows 98
para testar suas pginas. Todos os cdigos que apresentamos neste livro so
compatveis tanto com o Windows 2000 Server quanto com o Windows 98. Na
verdade, uma Intranet com este sistema operacional extremamente fcil de ser
montada. Voc poder utiliz-lo para sua fase de testes antes da implantao final
de outro sistema operacional.
Conexo com a Internet
Um dos novos recursos do Windows 98 a sua capacidade de compartilhar uma
conexo com a Internet. Atravs dele voc poder, por exemplo, com apenas uma
conexo, disponibilizar o acesso com todos com computadores da rede. Se a sua
linha for ISDN ou utilizar qualquer outra tecnologia de Banda larga, voc ter exce-
lentes resultados.
I nstalando o PWS
Outro recurso interessante a possibilidade de transformar o seu Windows 98
em um servidor de Intranet. Isto possvel graas a um programa chamado PWS
(Personal Web Server), o qual acompanha o CD do Windows. Com ele voc po-
der testar todas as suas pginas (inclusive as ASP) antes de envi-las para o
provedor.
A seguir, temos os passos para que voc instale o PWS em seu computador com
Windows 98. Ser necessrio que voc possua o CD-ROM original que contm a
pasta add-ons com o PWS dentro dela.

Figura 2.2 I nsira o CD do Windows 98, clique no boto Iniciar e v at a opo
Executar. Digite a linha de comando como mostrado.
(Substitua a letra E: pela letra da sua unidade de CD)
Aps iniciada a instalao, voc ter uma tela semelhante mostrada na Figura 2.3.

Figura 2.3 Nesta tela inicial voc pode ver quais so os recursos includos no PWS.
Clique em Avanar.

Figura 2.4 Clique em Tpica e em seguida em Avanar.

Agora temos o passo mais importante. Voc dever informar o nome da pasta que
conter os seus arquivos de pginas, ou seja, nem todo o computador estar dis-
ponvel para ser acessado via HTTP, mas apenas a pasta informada aqui. No nosso
exemplo utilizaremos C:\ ASP, a qual ser criada no seu winchester.

Figura 2.5 I nforme o nome da pasta que funcionar com o servio de www.
Ela ser de grande importncia para que nossos arquivos em ASP sejam executados.

Figura 2.6 Aps alguns instantes clique em Concluir e seu computador j
estar pronto para executar o servidor www.

Configurando o Personal Web Server
Aps reiniciar, o computador j estar pronto para executar suas pginas.

Figura 2.7 Este o cone que mostra que o PWS est em execuo e pode ser
encontrado prximo ao display do relgio.

Figura 2.8 Clicando duas vezes sobre o cone do PWS ele ser mostrado em execuo.
Aqui voc j pode ver a pasta onde voc ir armazenar os seus arquivos e o endereo a ser
chamado no navegador.
Perceba que temos o endereo http:/ / Desenvolvimento que ser utilizado para
acesso s pginas que esto dentro de C:\ ASP. Ou seja, aps salvar suas pginas
dentro da pasta C:\ ASP, basta digitar o endereo no browser que ela ser
executada.
No entanto, uma alterao ser necessria. Precisamos informar que os cdigos
em ASP devero ser executados (e no simplesmente lidos). Para fazer isto siga os
passos adiante:
Clique em Avanado
Em seguida em Editar Propriedades
Marque a opo Executar
Caso voc queira trocar o nome do seu servidor, basta acessar o cone de Rede
no painel de controle, entrar em Identificao e informar o nome desejado.

Figura 2.9 Trocando o nome do servidor.
Este nome do computador ser utilizado quando voc for testar suas pginas.
Testando o servidor
Aps a instalao voc poder testar o funcionamento. Abra o navegador e digite o
nome do seu servidor. Veja no exemplo:

Figura 2.10 Caso a pgina seja carregada, o seu servidor est pronto para executar suas
pginas. (Voc no precisar estar conectado I nternet).

Criando subpastas
Nos captulos sobre programao e ferramentas, muitos cdigos devero ser cria-
dos. Talvez o ideal seja voc criar subpastas dentro da pasta principal do PWS.
Com isto voc conseguir organizar de maneira eficiente os testes a serem realiza-
dos.
Para acessar os cdigos dentro da subpasta voc poder utilizar o seguinte cami-
nho: http:/ / desenvolvimento/ subpasta/ nomedoprograma.asp
Onde desenvolvimento dever ser substitudo pelo nome que voc deu ao seu
servidor e subpasta pelo nome da pasta que voc criou.
No Windows 98 isto tudo o que voc ir precisar para executar suas pginas.
Vamos ao Windows 2000 Server.
Windows 2000 Server
Agora estamos realmente falando em um ambiente srio para o trabalho corporati-
vo. Na verdade no Windows 98 temos uma maior simplicidade no desenvolvimento
e teste das nossas pginas, mas quando precisamos de performance, no tem
jeito, temos que partir para o servidor Windows 2000, ferramenta prpria para
gerenciar grandes volumes de transaes.
A verso anterior ao Windows 2000 foi o Windows NT 4.0 a qual ficou durante
vrios anos no mercado. No entanto, o ambiente NT precisava realmente de algu-
mas melhorias. Alguns recursos presentes at mesmo no Windows 98 no estavam
incorporados ao NT 4.0, como por exemplo: acesso a parties FAT32, compatibi-
lidade com hardware Plug-and-play, entre outros.
Existem no mercado verses diferentes deste ambiente. Cada uma com caracters-
ticas distintas. No nosso caso preferimos utilizar o Windows 2000 Server pela sua
potncia, sem no entanto, requerer absurdos de hardware.
Da mesma forma que fizemos no Windows 98, apresentaremos a instalao e con-
figurao do Internet Information Server (IIS), o qual permitir que os clientes da
rede acessem o servidor de pginas. Na verdade, aps a configurao do IIS, seu
servidor j estar pronto para executar scripts em ASP propostos pelo livro.
Veja na tabela a seguir as verses disponveis e seus requisitos:

Professional Server Advanced Datacenter
Pblico Desktops
Notebooks
Arquivos
Impresso
I ntranets
Redes
e-commerce Aplicativos
crticos
CPU(Max) 2 4 8 32
RAM(Max) 4Gb 4Gb 8Gb 64Gb
Requisitos
mnimos
Pentium 133 ou
superior
64Mb
1Gb de HD
Pentium 133 ou
superior
64Mb
1Gb de HD
Pentium 133 ou
superior
64Mb
1Gb de HD
Ainda no
divulgado
Uma das grandes vantagens em se utilizar o Windows 2000 o seu ambiente mul-
tipropsito, ou seja, com apenas um sistema voc poder ter um servidor de e-
mails, servidor de Intranet, servidor de arquivos, entre outros. Logicamente, caso
voc tenha grandes necessidades de processamento, estes servidores devero
estar em sistemas diferentes. Isto justamente o que acontece nos provedores de
acesso.
Caractersticas
Uma das principais caractersticas do Windows 2000 Server o fato de que cada
aplicativo seja executado em espao separado de memria. Com isto o sistema
consegue impedir que um aplicativo travado interrompa todo o sistema.
Um outro recurso a recuperao automtica de arquivos de sistema que estejam
danificados ou que sejam excludos. Isto possvel graas a um cache que se en-
carrega de manter uma cpia original dos principais arquivos do sistema, fazendo
com que este continue a funcionar como se nada tivesse acontecido.
O Microsoft Instaler (MSI) um novo recurso que visa a auto-recuperao de DLLs
com problemas ou que tenham sido trocadas por verses mais antigas. Com o MSI
elas sero armazenadas em pastas diferentes evitando-se a sobreposio.
A Microsoft procurou reduzir sensivelmente o nmero de reinicializaes do siste-
ma. Agora, quando voc instala um novo aplicativo ou hardware, o sistema entra
automaticamente em funcionamento sem a necessidade de reinicializar todo o
equipamento. Este recurso est disponvel para todos os drivers que sejam certifi-
cados pela Microsoft.

O Windows 2000 est mais confivel graas a grandes mudanas no gerenciamen-
to do Kernel. O Windows 2000 Advanced Server inclui recursos de balanceamento
de carga, o que ajuda a implementar aplicaes em ambiente multicamadas.
Configurando o servio IIS
Bem, vamos partir para o que realmente interessa. Daremos incio instalao e
configurao do IIS para que voc possa transformar o servidor 2000 em um ser-
vidor de Intranet.
Nosso objetivo aqui no analisar toda a funcionalidade do IIS visto que ele
objetivo de vrios livros da rea. Para entender bem o funcionamento do IIS voc
precisar possuir bons conhecimentos em TCP/IP, segurana, protocolos e do pr-
prio Windows 2000 Server. No entanto, o ideal que voc o conhea porque pro-
vavelmente o seu provedor dever estar utilizando-o para hospedar seus cdigos
em ASP.
A primeira coisa que voc dever fazer criar uma pasta a qual conter todos os
arquivos HTML e ASP que iremos criar. Vamos padronizar esta pasta como o no-
me de: C:\ ASP, estando os exemplos do livro baseados neste nome.
Estamos utilizando o Windows 2000 Server em ingls. Se voc possui a verso em
portugus no ser difcil acompanhar, pois as posies das opes so idnticas
ao ingls.
A segunda coisa a fazer ir at o painel de controle e acessar o cone Adicionar ou
Remover Programas (Add/Remove Programs).

Figura 2.11 Nesta tela clique sobre a opo Add/ Remove Windows components.
Em seguida clique no boto Components.

A tela a seguir ser apresentada.

Figura 2.12 Localize o item I nternet I nformation Services (I I S) e marque-o.
Em seguida clique em Next (avanar)
Dependendo do tipo de instalao que realizou, voc ser solicitado a inserir o CD
do Windows 2000 Server.

Figura 2.13 Terminada a instalao, v at o menu Administrative tools
(Ferramentas administrativas) e acesse o aplicativo I nternet Services Manager

Agora vamos criar o diretrio virtual para receber nossas pginas. Na verdade o
que iremos fazer informar ao IIS que a pasta c:\ ASP conter os arquivos a se-
rem disponibilizados via HTTP.

Figura 2.14 Clique com o boto direito sobre Default Web site (site da web padro),
escolha a opo New, Virtual direct (diretrio virtual)
Voc ser acompanhado pelo assistente.

Figura 2.15 Informe um nome para a pasta virtual. No nosso caso escolhemos
desenvolvimento para ficar igual ao PWS que configuramos no Windows 98.
Clique em Next.

Figura 2.16 Agora selecione a pasta C:\ ASP que conter os arquivos.
Em seguida clique em Next.
Na prxima tela deixe tudo como est, em seguida clique em Finish. Uma nova
pasta virtual chamada desenvolvimento foi criada.

Figura 2.17 Voc poder acessar as suas propriedades clicando com o boto direito
sobre elas e acessando a opo properties.
Vamos agora testar o nosso servidor. Feche todas as janelas, abra o bloco de no-
tas e digite a linha mostrada a seguir:
<CENTER><B>BEM VINDO AO SISTEMA</B></CENTER>

Salve-a na pasta C:\ ASP com o nome de index.HTML. Para isto voc dever
escolher a opo All files (Todos os arquivos), caso contrrio ele no assumir a
extenso HTML.

Figura 2.18 muito importante escolher a opo All files (todos os arquivos).
Testando o servidor
Chegou a hora do teste final. Agora precisamos nos certificar da funcionalidade do
servidor IIS. Para isto vamos executar a pgina index.html que acabamos de criar.
Abra o Internet Explorer e digite o endereo como mostrado na Figura 2.19:

Figura 2.19 Substitua o home pelo nome do seu computador
(informado na configurao da rede).

Caso a pgina tenha sido carregada como na Figura 2.19, ento o servidor j est
pronto para ser utilizado. Se algo der errado, refaa os passos com mais ateno
aos detalhes.
Voc poder criar tantas pastas virtuais quanto forem necessrias aos seus testes.
Procure criar subpastas dentro da pasta C:\ ASP para receber suas pginas, con-
forme a aplicao. Se seu computador estiver fazendo parte de uma rede, os mi-
cros clientes podero acessar o site que voc acabou de disponibilizar.
O procedimento que voc realizou o mesmo que o provedor far. No entanto, ele
detm conhecimento suficiente para alterar as configuraes da pasta virtual de
forma a utilizar todos os recursos disponveis no IIS.
Para voc que est apenas comeando, isto o suficiente para disponibilizar pgi-
nas na Intranet ou apenas para testar seus cdigos.
31

Vamos entrar agora em uma parte importante para quem vai precisar disponibilizar
informaes on-line. Atravs da utilizao de banco de dados podemos fazer com
que pessoas externas tenham acesso aos dados que voc dispuser na rede.
Esta tarefa, aparentemente simples, torna-se complicada medida que os siste-
mas se tornam vulnerveis a ataques quando disponibilizados na Internet. No en-
tanto, crescente o nmero de empresas dispostas a colocar informaes para
clientes e fornecedores acessveis durante 24 horas nos 7 dias da semana.
Neste captulo voc aprender a tecnologia utilizada nos bancos de dados atuais e
ver, na prtica, como criar e disponibilizar um banco de dados utilizando o Micro-
soft Access.
Banco de dados
Sem dvida voc j deve ter ouvido falar muito sobre os bancos de dados. Simpli-
ficadamente, este termo designa um local onde ficaro armazenados todos os
dados referentes a um determinado assunto e as relaes entre eles.
Vamos a um exemplo: se voc usurio de uma biblioteca, perceber que todas
as informaes sobre os usurios esto armazenadas em um sistema (caso esteja
informatizada), ou mesmo em um controle manual. No importa como os dados
so manipulados (manual, mecnico ou eletrnico), a finalidade de um sistema de
banco de dados a mesma desde muito tempo. Com o avano na informatizao,
o que se percebe que a captura e a anlise das informaes presentes no siste-
ma est cada dia mais veloz e eficaz. Hoje possvel realizar consultas em base de
dados com bilhes de informaes em poucos segundos. Ao chegar na biblioteca
(por exemplo) voc poder ser recepcionado por um sistema que lhe permite con-
sultar todo o acervo a partir de uma palavra chave. Os dados so preparados e

armazenados sempre de forma a tornar a busca por informaes o mais eficiente
possvel. Hoje j possvel ter acesso a toda a histria mundial atravs de bancos
de dados distribudos pela Internet.
No entanto, a idia por trs de um banco de dados simples. Basta olhar ao seu
redor que voc ver que existem dezenas de coisas sobre as quais necessitamos
armazenar dados. Algumas so bem fceis de implementar, como por exemplo,
um controle de receitas, sua agenda pessoal, sua coleo de livros ou CDs, etc.
Todos os itens possuem dados que podem ser armazenados e, o mais importante,
relacionados entre si.
Os relacionamentos definem o mundo. Isso mesmo, voc pode at no perceber,
mas tudo o que existe no mundo possui algo com o que se relacionar. A rvore
com a terra, o pai com o filho, o autor com o livro, os peixes com o rio e assim
infinitamente.
Essa idia deu origem ao que conhecemos hoje como banco de dados relacionais.
Banco de dados relacionais
Existe no mercado um grande nmero de sistemas gerenciadores de banco de
dados. Cada um deles com caractersticas que os diferenciam uns dos outros. No
entanto, uma coisa eles tm em comum: o fato de serem relacionais. Este nome
dado aos softwares de banco de dados que trabalham com tabelas e relaciona-
mentos entre elas atravs de campos chaves.
Vamos a um exemplo para que fique mais claro. No caso da biblioteca, cada livro
possui diversas informaes como nome, assunto, data da compra, nmero de
pginas e autor. Perceba que pode haver uma nova gama de informaes apenas
sobre o autor, como: nome, gnero literrio, data de nascimento, estado onde
nasceu. Neste caso podemos perceber que existe uma relao entre cada autor e
os vrios livros que ele escreveu. Por outro lado, um livro tambm ter o mesmo
tipo de relao com o seu autor.
Assim podemos perceber os relacionamentos. Veja pelo diagrama a seguir como
podemos montar os relacionamentos entre produtos e fornecedores.
Perceba que temos trs tabelas. Uma delas est armazenando os produtos de uma
loja, em outra tabela os fornecedores, e na tabela do meio a relao entre um
produto e o seu fornecedor. Esta tabela intermediria chamada de ligao.
Fundamentos sobre Banco de Dados 33

Produtos
Cod_prod Descrio
001 Monitor
002 Winchester
003 Teclado

Produtos do fornecedor
Cod_prod Cod_forn
001 001
002 001
003 002

Fornecedor
Cod_forn Nome
001 Samsumg
002 VTC
003 Epson

A idia de relacionamentos surgiu da matemtica e pode ser toda provada atravs
da teoria de conjuntos. Ela foi citada pela primeira vez pelo cientista Dr. Codd,
pesquisador da IBM. Em seu livro, Dr. Codd determinou as 12 caractersticas prin-
cipais para que um sistema de banco de dados seja dito como relacional, mtodo
mais utilizado nos dias atuais.
SGBDs (Sistemas Gerenciadores de Banco de
Dados)
Agora que voc j conhece o funcionamento bsico dos bancos de dados relacio-
nais, vamos conhecer como a estrutura de um sistema que ir controlar os dados
de um banco de dados, e que chamado de SGBD (Sistema Gerenciador de Banco
de Dados). Trata-se de um aplicativo especfico para a criao, manipulao e
gerenciamento das tabelas que sero criadas.
Exemplos de SGBDs so: SQLServer, ORACLE, MySQL, etc. Existem diversos pro-
dutos disponveis no mercado, mas alguns deles, como o SQLServer e o ORACLE
juntos dominam mais de 70% do mercado brasileiro.

Geralmente as caractersticas fundamentais dos bancos de dados, como criao e
manuteno de tabelas, so semelhantes. A principal diferena entre os diversos
produtos do mercado (e a mais importante) a performance que cada um apre-
senta em uma determinada situao. Este , na maioria das vezes, o principal cri-
trio de desempate quando uma empresa precisa resolver sobre a aquisio de um
sistema para gerenciar seus dados.
Existem SGBDs para as mais variadas aplicaes (e custos). Voc poder adquirir um
gerenciador que pode custar milhares de dlares (como o ORACLE) ou simplesmente
baix-lo da Internet gratuitamente (como o MySQL). Logicamente que as diferenas
sero muitas, mas se voc no puder gastar muito, no vai pensar duas vezes.
Nas aplicaes prticas deste livro (Loja virtual e Controle de estoques) iremos
utilizar o Access. Ele pode ser considerado um SGBD de pequeno porte, porm
muito utilizado por pequenas e mdias empresas. Seu grande atrativo a facilida-
de de operao e a total integrao com os demais produtos da famlia Office.
Banco de dados como parte do sistema
Apesar de tudo que falamos at agora sobre banco de dados, uma coisa vale des-
tacar: o banco de dados a ser utilizado somente uma parte do sistema. Ele ir
fazer parte de uma estrutura maior que passa desde quesitos como segurana at
chegar a regra de negcio de quem ir utiliz-lo.
Vou contar uma historinha para ilustrar como deve funcionar a estrutura. Certa vez
uma empresa contratou dois analistas e dois programadores para informatizar o seu
departamento financeiro. Aps vrios meses de trabalho o sistema estava quase
pronto, faltando apenas um detalhe: funcionar de maneira adequada. Aps outros
trs meses de muito trabalho na adequao, o projeto foi abandonado. Motivo: os
analistas fizeram o sistema da maneira como eles achavam que deveria ser. Este o
maior erro. Um sistema deve estar de acordo com as expectativas do usurio. De-
vem ser realizadas entrevistas e questionrios que iro levantar quais so as neces-
sidades operacionais da empresa. Nenhum sistema deve ser desenvolvido sem que
haja participao efetiva dos maiores interessados: os usurios.
Aps resolver sobre o que ser informatizado vem a segunda etapa: como ser
esta informatizao. Nesta segunda etapa ser definido o banco de dados a ser
utilizado, quais os nveis de performance necessrios, quais os requisitos de segu-
rana, entre diversos outros fatores.

Entidades, atributos e relacionamentos
Existem diversos objetos importantes em um sistema de banco de dados. Exem-
plos so: procedimentos armazenados, gatilhos, regras, visualizaes e diversos
outros que podem variar em cada banco de dados.
No entanto trs deles esto presentes em qualquer banco de dados relacional. So
eles:
Entidades (Tabelas)
Entidades so os objetos que contm os dados. Elas podem armazenar diversos
tipos de dados tais como: valores, datas, textos, figuras, etc. Elas sero definidas
no momento da anlise do sistema de banco de dados a ser criado. Geralmente as
tabelas armazenam uma coleo de dados sobre um determinado objeto ou assun-
to. Por exemplo: produtos, clientes, fornecedores, livros, computadores, etc.
Atributos
Atributos so a parte da tabela onde os dados esto armazenados. Eles contm as
caractersticas que definem uma determinada entidade. Uma tabela de produtos
ir conter atributos como: cdigo, descrio, preo de venda, preo de compra,
data de compra, etc.
Relacionamentos
Como j foi dito no incio deste captulo, os relacionamentos so parte fundamental
de um banco de dados. Eles so responsveis por manter a relao existente entre
as diversas tabelas do sistema. Por exemplo: uma tabela de fornecedor ter rela-
es com uma de produtos. Uma tabela de produtos ter relao com uma outra
de matria prima.
Para que o relacionamento seja estabelecido necessrio identificar pelo menos
um atributo idntico entre as tabelas. Geralmente este atributo o cdigo que
identifica cada registro dentro dela.
ndices
Com certeza voc j ouviu falar em ndices. Eles so facilmente encontrados nos
livros e revistas e servem para que voc encontre a informao desejada, de uma
forma mais rpida. Com base na pesquisa realizada no ndice voc ser capaz de ir
at a posio correta do que precisa encontrar.

Nos bancos de dados os ndices possuem funo semelhante. Eles estaro em um
arquivo separado da tabela principal e serviro apenas para manter em ordem os
dados para que a busca de registros seja facilitada. Ao encontrar o registro na
tabela de ndice, o sistema pode fazer referncia imediata ao registro na tabela
principal. A tabela de ndice conter apenas o campo de ordenao (por exemplo,
o cdigo) e a posio fsica do registro dentro da tabela principal a qual no est
ordenada e geralmente mantm a ordem original com que os registros foram ca-
dastrados. Veja como funciona pelo diagrama a seguir:
Tabela: ndice_de_produtos
Codigo Posio
001 3
002 1
003 2
004 4
Perceba que para encontrar um produto ordenado por cdigo (ndice de cdigo) o
sistema realizar um busca bastante simples e, ao encontrar o cdigo, ter a posi-
o exata na tabela onde o produto foi armazenado.
Tabela: Produtos
Posio Cdigo Descrio
1 002 Computador XPY
2 003 Teclado Matrix
3 001 Mouse Serial
4 004 Monitor 14
Aqui os produtos esto armazenados na ordem natural com que foram digitados. A
busca por um cdigo em especfico seria bastante complicado, pois o produto tan-
to poderia ser o primeiro como o ltimo. Utilizando o ndice consegue-se uma bus-
ca mais eficiente (como nos livros).
Integridade referencial
Um assunto muito interessante quando tratamos de banco de dados a integridade
referencial. A integridade referencial ir tratar da manuteno dos relacionamentos entre
os elementos de duas ou mais tabelas. Vamos a um exemplo prtico para que fique mais
fcil compreender. Suponha a existncia de duas tabelas; em uma delas sero mantidas
informaes sobre os funcionrios de uma empresa e uma outra armazenar informa-
es sobre os dependentes destes funcionrios. Imagine que um dia ser necessrio
deletar o registro do funcionrio. O que ir acontecer com seus dependendes? Ficaram

rfos! O ideal que uma rotina apague tambm todos os dependentes, esta rotina
necessria para que se mantenha a integridade referencial das informaes.
Tanto o Access quanto o SQLServer possuem rotinas para manter a integridade
referencial em alguns casos (como no caso citado: excluso). Mas algumas vezes o
prprio sistema que voc est desenvolvendo dever conter rotinas para evitar
perda de informaes pela falta de integridade.
O Access
O banco de dados Access talvez seja o mais simples e o mais acessvel (custo X
benefcio) entre os banco de dados disponveis para o ambiente Windows. O pro-
duto possui uma boa aceitao no mercado brasileiro, o que o faz ser o banco de
dados mais utilizado em pequenas e mdias organizaes.
O Access est disponvel em conjunto com o pacote Microsoft Office mas pode ser
adquirido separadamente. O principal atrativo a sua simplicidade de uso aliado a
um bom desempenho (para ambientes que no necessitem de alto processamento).
Neste livro iremos utilizar o Access para os sistemas de Loja Virtual e o Controle de
estoques. Cada um deles estar em arquivos diferentes (cuja extenso .mdb) os
quais sero acessados pelo aplicativo ASP que iremos desenvolver.
Criando tabelas no Access
Vamos comear a criar nossas tabelas no banco de dados Microsoft Access. Para o
nosso caso iremos utiliz-lo para armazenar as tabelas dos nossos sistemas de
Loja Virtual e Controle de Estoque. Nesta seo voc ir aprender como criar tabe-
las no Access, definir os tipos dos campos e suas caractersticas.
Ao abrir o Access voc ter uma tela como a mostrada na Figura 3.1, atravs dela
podemos Criar um banco de dados vazio, utilizar um assistente ou abrir um
banco de dados existente.

Figura 3.1 Tela inicial do Microsoft Access.
No nosso caso escolha a opo Banco de dados vazio do Access e clique em
OK.
Agora voc ir criar uma pequena tabela apenas para fins didticos. Ela servir de
base para que voc crie as tabelas solicitadas nos captulos sobre ASP. L voc
aprender a criar pginas que acessam informaes dentro das tabelas do Access.
A estrutura da pequena tabela que iremos criar est definida a seguir:
Nome do campo Tipo de dado
Codigo Nmero
Nome Texto
Preo Moeda
DataCompra Data/Hora

Figura 3.2 Nesta tela voc dever informar o nome para o banco de dados
e a pasta onde ele ser armazenado.
Quando for criar as pginas sobre ASP nos Captulos 10 e 11, salve seu banco de
dados na mesma pasta onde ficaro seus arquivos em ASP da Loja Virtual e do Con-
trole de Estoques. Esta pasta foi criada quando da instalao do PWS ou do IIS.


Figura 3.3 Agora voc j est pronto para criar todas as tabelas
que se fizerem necessrias.
Clique duas vezes sobre Criar tabela no modo Estrutura.
A janela da Figura 3.4 aparecer.

Figura 3.4 Informe todos os campos conforme a tabela definida anteriormente. Perceba
que o tipo de dado a ser armazenado dever estar de acordo com o contedo de cada
linha: Cdigo=Nmero; Nome=Texto; Preo=Moeda; Datacompra=Data/hora.
Aps digitar todos os campos, salve seu trabalho. Ao ser solicitado sobre a criao
de uma chave primria, responda No.

Figura 3.5 Aps terminar voc ter um banco de dados com a tabela criada.
Para criar novas tabelas basta repetir o processo.
Viu como fcil? Todos os sistemas que conhecemos possuem tabelas. Elas devem
ser definidas pelo analista de sistemas o qual ir estudar todo o ambiente do usurio
para poder definir quais sero os campos e tipos de campos de cada tabela.
Por hora recomendamos a voc que procure conhecer bem os banco de dados pois
eles so a base de qualquer sistema on-line. Lgico que para ter a habilidade de
um analista so anos de estudo e prtica, no entanto, j est na hora de voc
comear a dar seus primeiros passos.
Neste momento tente criar novas tabelas sobre objetos que voc possui em casa
ou no escritrio. Exemplos destes objetos so: livros, CDs, receitas, agenda, entre
outros. Lembre-se de que s a prtica leva perfeio.
No Access criamos nossa base de dados. Agora vamos ver como nosso sistema em
ASP ir acessar estes dados.
Fundamento do acesso a dados
Acessar banco de dados uma das atividades mais realizadas pelo Webmaster.
Com a facilidade criada pelos objetos que podem ser utilizados no ASP, ficou fcil
desenvolver sistemas para serem acessados via browser.

O desenvolvimento de novos mtodos de acesso, por empresas como a Microsoft,
tirou do programador a rdua tarefa de desenvolver rotinas inteiras para acessar
informaes nos bancos de dados. Atualmente este recurso j se encontra embuti-
do no servidor e para o desenvolvedor basta conhecer como este acesso realiza-
do. Vamos tentar entender o mtodo de acesso via ADO utilizado pelos sistemas
apresentados no livro.
VC++ VB ASP J AVA

ADO

OLEDB

RDBMS E-MAIL DIRECTORY
SERVICES
OUTROS
Aqui podemos perceber como realizado o acesso desde o aplicativo
(VC++/VB/ASP/J AVA, etc.) at o acesso aos dados na ltima camada.
O acesso aos dados realizado pela camada de software conhecida como OLEDB.
No entanto ela no foi projetada para ser utilizada com alguns aplicativos como
ASP ou Visual Basic. Por isto, temos a camada ADO que fornece uma interface
entre o aplicativo e os dados.
Um outro motivo para se utilizar ADO que ele ir simplificar o acesso aos dados
at mesmo por linguagens que no necessitam dela como o J ava ou o VC++.
Na prtica, voc ver que nossos sistemas utilizaro uma linha como a mostrada a
seguir para invocar o acesso aos dados via ADO.
Set vConexao = Server.CreateObject("ADODB.Connection")
No entanto, voc no deve se preocupar com toda esta teoria, pois voc ver que
na prtica tudo muito transparente. Voc digita a linha de comando mostrada
antes e l est a conexo prontinha para ser usada via comandos em SQL.
Linguagem SQL
A linguagem SQL foi criada com o intuito de padronizar a forma com que se realiza
o acesso aos dados das tabelas armazenadas nos banco de dados. Essa padroniza-
o facilita muito quando for necessria a manuteno no sistema.

Vejamos alguns exemplos da sintaxe SQL. No se preocupe em entender todos os
cdigos, pois voc ver o funcionamento de cada um deles no captulo sobre os
sistemas on-line.
Inserindo dados em uma tabela
INSERT into [NOMETABELA] (campo1,campo2) VALUES (valor1,valor2)
Permite que sejam inseridos dados na [NOMETABELA] nos respectivos campos
(campo1,campo2) os valores contidos nas variveis (valor1,valor2).
Consultando dados
SELECT * FROM [NOMETABELA] WHERE salario>1000
Exemplo de uma consulta tabela [NOMETABELA] mas apenas dos registros onde
o campo salrio seja > que 1000.
Removendo dados
DELETE * FROM [NOMETABELA] WHERE codigo=1
Apaga todos os registros da tabela [NOMETABELA] onde o cdigo seja igual a 1.
Voc poder encontrar resumos sobre a sintaxe SQL em livros ou at mesmo dis-
ponveis na Internet. Vale a pena entender bem do assunto.
Criando relacionamentos
Como voc j pode conferir no incio deste captulo, os relacionamentos so parte
fundamental dos bancos de dados. Para dizer a verdade, sem os relacionamentos
no aproveitamos quase nada dos dados armazenados. Por mais incrvel que possa
parecer, quando relacionamos os dados a que temos a verdadeira informao.
Vamos a um exemplo. Suponhamos a existncia de duas tabelas em um banco de
dados sobre vendas: pedidos e itens_de_pedidos. As informaes contidas em
cada uma delas separadamente nos diz muito pouco, mas quando juntamos os
dados de uma com os da outra podemos extrair uma srie de informaes. Uma
consulta tabela de itens_de_pedidos no ir representar nada se no soubermos
de qual pedido cada item se refere, e isto s ser possvel se criarmos um relacio-
namento entre elas.
Logicamente que, para retirar todo o potencial da linguagem SQL, voc poder utili-
zar os vrios livros sobre o assunto disponveis nas livrarias. Este livro seria pequeno
para que pudssemos apresentar todas as caractersticas de seus comandos.

Segurana das informaes
armazenadas no banco de dados
Um dos grandes problemas enfrentados (principalmente pelas pequenas aplicaes
que precisam ser disponibilizadas on-line) a segurana dos dados armazenados
no banco de dados que, quase sempre, estar no provedor.
um dilema pois os dados precisam estar on-line e, no entanto, isto deixa uma
brecha para que, em ataques ao provedor, pessoas tenham acesso indevidamente.
Este fato se agrava quando precisamos armazenar informaes confidenciais como
senhas e nmero de cartes de crdito.
O que acontece que na maioria das vezes no podemos contar com um sistema
de segurana s para nossos dados, eles so planejados para toda a estrutura do
provedor. Por outro lado, fazer um contrato com o provedor para que este fornea
um tratamento diferenciado para nossa base de dados pode representar um au-
mento nos custos.
Alguns bancos de dados contam com recursos de criptografia, o que pode ser usa-
do contra a utilizao indevida das informaes armazenadas. No entanto, em
softwares de menor porte este recurso no est disponvel.
Futuro dos bancos de dados
Apesar de todo desenvolvimento atual, muito ainda existe para ser feito em termos
tecnolgicos da computao. Com os bancos de dados no poderia ser diferente.
Apesar de extremamente rpidos, os bancos de dados atuais esto sendo subme-
tidos a quantidades de dados jamais vistas. No raro, por exemplo, um banco de
dados com vrios gigabytes ou at terabytes. Algoritmos cada vez melhores iro
desafiar os pesquisadores da rea.
Trazendo para um campo mais atual, os banco de dados orientados a objetos co-
meam a aparecer no mercado mundial. Eles trazem na bagagem uma mudana
radical que ir marcar para sempre o futuro dos sistemas gerenciadores de bancos
de dados.
Para ns simples mortais, resta utilizar a tecnologia comercialmente disponvel, da
melhor maneira possvel, passando por uma anlise cuidadosa dos dados e rela-
cionamentos entre eles, o que independe do banco de dados a ser utilizado.

Resumindo
Este captulo possui dois objetivos. O primeiro levar ao seu conhecimento a
enorme quantidade de coisas que precisamos conhecer sobre banco de dados. O
segundo fornecer informaes sobre como podemos criar e acessar informaes
contidas em um banco de dados do Access.
Logicamente a abordagem feita simples se comparada com a vasta literatura
disponvel sobre banco de dados. Cabe a voc sempre buscar mais e mais informa-
es a respeito.
Nos captulos sobre a Loja Virtual e Controle de Estoques iremos novamente utili-
zar o Access. Voc ir criar novos banco de dados com novas tabelas que sero
manipuladas pelos sistemas.
46

Bem, j est na hora de voc iniciar a parte prtica de seus estudos sobre desen-
volvimento para a Web. Neste captulo voc aprender a principal linguagem de
desenvolvimento para Web. Se voc ainda no possui experincia com linguagens
de programao, ver que o HTML excelente para quem est comeando.
No entanto, mesmo para quem j desenvolve em outras linguagens, um entendi-
mento da programao para Web de extrema importncia.
Diferentemente do que aconteceu nos anos passados, o desenvolvimento para
Internet exige que o Webmaster conhea pelo menos um pouco de vrias lingua-
gens. J foi o tempo em que um programador trabalhava apenas com uma sintaxe
de programao.
HTML
A primeira linguagem que iremos aprender a mais simples e fcil de todas. Tal-
vez nem possa ser classificada como uma linguagem e sim como estruturas de
marcaes para serem interpretadas por um navegador.
Apesar de to criticada por sua limitao, o HTML ainda a linguagem mais utili-
zada no desenvolvimento para Internet. Suas limitaes so facilmente ultrapassa-
das com a utilizao de recursos vindos de outras linguagens. Por exemplo: quan-
do voc preenche um formulrio na Internet, o programador no consegue validar
um determinado campo para que o mesmo no contenha um valor invlido (um e-
mail sem @ por exemplo), isto precisar ser feito com a utilizao de recursos
como o J avaScript ou VBScript.
Para desenvolver em HTML voc precisar de duas coisas:
Linguagens para Desenvolvimento na Web HTML 47

Um editor de textos com possibilidade de salvar em formato texto.
Um navegador para interpretar os cdigos em HTML.
No nosso exemplo iremos utilizar o bloco de notas, no entanto, voc poder utilizar
outro editor como quiser.
Vamos a um primeiro exemplo:
Abra o bloco de notas e digite o cdigo seguinte:
1: <html>
2: <head>
3: <title></title>
4: </head>
5: <body>
6: <h1><center> TOP TRAINING CENTER </center></h1>
7: </body>
8: </html>
Aps digit-lo, crie uma pasta, por exemplo com o nome de Curso HTML e salve
este arquivo com o nome de index.html. Se voc estiver digitando no bloco de
notas, precisar alterar o tipo do arquivo para Todos os arquivos no momento
de salv-lo.
Este arquivo ser a base de toda nossa etapa em HTML. Ou seja, nas pginas se-
guintes voc dever fazer apenas alteraes neste primeiro arquivo.
Abrindo uma pgina local no navegador
Agora que j temos a pgina criada, chegou a hora de carreg-la para que seja
interpretada pelo navegador. Voc no precisar de nenhuma configurao adicio-
nal para executar esta tarefa, simplesmente abra o browser e digite o endereo da
pgina. Veja na Figura 4.1.
Os comandos em HTML
Todos os comandos em HTML so conhecidos como tags, ou seja, marcaes que
determinam ao browser o que ele dever executar.
Quase sempre as tags aparecem em pares como <b> (negrito) seguido de </b>.
Mas existem algumas excees que, como no caso da tag <p>, significam um
salto de pargrafo.

Figura 4.1 Aqui o browser carregou a pgina que voc digitou. Para qualquer
alterao feita no arquivo original basta que voc pressione o boto atualizar (Refresh).
Tags bsicas
Existem algumas marcaes bsicas em um documento HTML. Uma delas o
<html> no incio do documento. Ele servir para informar ao browser o tipo de
documento que est sendo carregado. Outra tag importante a que especifica o
ttulo do documento. A tag utilizada <title>. Altere o documento anterior para
que aparea o ttulo: TOPTC.COM.BR.
1: <html>
2: <head>
3: <title>TOPTC.COM.BR</title>
4: </head>
5: <body>
6: <h1><center> TOP TRAINING CENTER </center></h1>
7: </body>
8: </html>
Voc dever alterar apenas a linha linha 3 do documento anterior para que fique
como mostrado antes e em seguida salve-o. Abra novamente a pgina no navega-
dor (ou atualize-a) e veja que aparecer o ttulo no alto do browser.

Criando cabealhos
Os cabealhos iro aparecer no corpo do documento e possuem 6 nveis. Eles apa-
recero em negrito e seu tamanho depender do nvel informado. A tag utilizada
para criar cabealhos a <hx> onde a varivel x poder variar de 1 at 6.
Vamos continuar alterando nossa pgina. Perceba que j temos um cabealho com
nvel1. Agora iremos colocar mais dois nveis.
1: <html>
2: <head>
4: </head>
5: <body>
6: <h1><center>TOP TRAINING CENTER</center></h1>
7: <h2><center>Cursos de Informtica</center></h2>
8: <h2><center>Atendimento individualizado </center></h2>
9: </body>
10: </html>
Aps salvar as alteraes, carregue a pgina e veja o novo layout.

Figura 4.2 Voc poder acrescentar diferentes nveis de cabealhos em suas pginas.

Saltando pargrafos
Para se criar um pargrafo em HTML no adiantar simplesmente teclar ENTER no
final da linha. Para isto existe a tag <P> que criar um novo pargrafo automati-
camente.
Voc ver exemplos de pargrafos na seqncia do livro.
Saltando linhas
Quando voc precisar apenas saltar uma linha, dever utilizar a tag <BR>. Altere a
pgina index.html para que fique como mostrado adiante e, em seguida abra-a
no browser e veja a diferena.
1: <html>
2: <head>
4: </head>
5: <body>
9: <hr>
10: <center>
11: Horrios flexveis <p>
12: Apio extra curso <br>
13: Certificado ao final do curso
14: </center>
15: </body>
16: </html>
Hiperlinks
Os links so muito utilizados em documentos HTML. Na verdade sem eles a Inter-
net no teria graa nenhuma. Criar um hiperlink em um documento muito sim-
ples. Basta voc digitar a tag <a> seguida do endereo a ser encontrado caso o
usurio clique sobre o link, em seguida digite o texto que ir aparecer para o usu-
rio e para terminar feche a tag com </a>.

Veja no exemplo:
1: <html>
2: <head>
4: </head>
5: <body>
9: <hr>
10: <center>
14: <p> <a href=http://www.toptc.com.br> site oficial da TOP </a>
15: </center>
16: </body>
17: </html>
Criao de listas
As listas so velhas conhecidas e fceis de serem criadas no Word, por exemplo.
Na seqncia voc ter um exemplo para digitar na pgina index.html.
Uma lista comea com a tag <ul> e termina com </ul>. Em cada elemento da
lista iremos colocar a tag <li>.
Novamente altere nosso exemplo para que fique como segue:
1: <html>
2: <head>
4: </head>
5: <body>
9: <hr>
10: <center>

15: </center>
16: <ul>
17: <li> Bsicos
18: <li> Avanados
19: <li> Webmaster
20: <li> Webdesign
21: </ul>
16: </body>
17: </html>
Abra no navegador e veja as listas em funcionamento.
Para criar listas numeradas, basta alterar a tag <ul> pela <ol>.
Listas intercaladas
As listas intercaladas so interessantes para deixar ainda mais organizada nossa
estrutura.
Altere nossa pgina index.html para que fique como segue:
1: <html>
2: <head>
4: </head>
5: <body>
9: <hr>
10: <center>
15: </center>
16: <ul>
17: <li> Cursos de Webmaster
18: <ul>
19: <li> FrontPage

20: <li> Java Script
21: <li> ASP
22: </ul>
23: <li> Cursos de Webdesign
24: <ul>
25: <li> FrontPage
26: <li> Photo Shop
27: <li> Corel Draw
28: </ul>
29: </ul>
30: </body>
31: </html>
Formatando a exibio
Vamos ver algumas tags que permitem a formatao dos documentos. Digite este
exemplo, e veja o que voc poder fazer.
1: <html>
2: <head>
4: </head>
5: <body>
9: <hr>
10: <center>
15: <p> O <i> Melhor </i> <font face=Arial color=#FF0000 size=5> <b> Curso
16: </b> </font> de <u> Informtica </u> do <b> Brasil </b> </p>
17: </body>
18: </html>
Veja como ficou aps carregar as alteraes.

Figura 4.3 Voc poder utilizar a formatao de acordo com suas necessidades.
Na linha 15 utilizamos a tag <i> para criar o texto em itlico. Na mesma linha
utilizamos a tag <font> para especificar a cor, o tamanho e a fonte a ser utilizada
a partir daquele momento. Na linha 16 foi utilizada a tag </font> para encerrar a
formatao da fonte. Ainda na linha 16 foi utilizada a tag <u> para introduzir um
texto sublinhado.
Formatando o fundo da tela
Quando acessamos um site na Internet, raramente ele est sobre um fundo bran-
co. Na maior parte das vezes o que temos uma imagem numa cor quase trans-
parente (marca dagua). Para colocar uma Figura como fundo da pgina basta
alterar o atributo background da tag <body>.
Digite o cdigo a seguir. Voc dever possuir uma Figura para ser carregada como
background, voc poder salvar uma de qualquer site da Internet.
<body background="Figura.gif">
Tome o devido cuidado para no utilizar uma Figura de tons fortes pois isto poder
atrapalhar a leitura.

Cor do fundo da tela com bgcolor
Este atributo tambm dever ser utilizado com o <body>. Atravs dele voc pode-
r determinar uma cor para o fundo da pgina.
Experimente alterar o fundo de nossa pgina index. Realize a alterao na tag
<body> como mostrado a seguir:
<body bgcolor="#FFFFCC">
Visualize no seu navegador.
Voc j sabe que todas as cores da natureza so, na verdade, uma mistura de 3
cores bsicas. No computador no poderia deixar de ser diferente. As 3 cores nes-
te caso so:
R - Vermelho
G - Verde
B - Azul
A seguir voc ter uma explicao mair detalhada sobre as composio das cores.
Funcionamento das cores em hexadecimal
A formatao de cores na tela segue um padro conhecido como RGB. Assim como
na natureza, a formatao de cores na tela do computador , na verdade, uma
mistura de 3 cores: Vermelho (Red), Green (Verde) e Blue (Azul).
Para utilizar uma determinada cor, precisamos saber o quanto temos que misturar
de cada uma das cores bsicas pelo computador. Esta mistura de cores dever ser
informada em hexadecimal. Entretanto, calcular a quantidade exata uma tarefa
extremamente rdua. Quase sempre precisaremos utilizar algum programa (como
o Dreamweaver ou o FrontPage) que ir gerar o nmero em hexadecimal, com
base na cor que escolhermos. A quantidade de cor que voc poder utilizar pode
variar de 1 a 255.
As cores esto divididas em 3 grupos: #RR GG BB, cada um indicando a quanti-
dade a ser utilizada de cada uma das cores (vermelho, verde e azul). Por exemplo:
se quisermos a cor azul, devemos utilizar: 00 00 125 que indica a quantidade 125
de cor azul (que pode variar de 0 a 255) e nenhuma das outras cores. Para adicio-
nar vermelho basta informar, como exemplo: 100 00 125. Aqui continuamos a no
utilizar o verde.
Entretanto, precisamos informar as cores em Hexadecimal. Neste sistema de nu-
merao os nmeros variam de 1 at F (1 a 15 no sistema decimal). A calculadora

do Windows pode fazer esta transformao de uma forma muito simples: abra a
calculadora, passe-a para o modo cientfica, digite o nmero em decimal (informe
125 por exemplo), agora escolha a opo hex. O valor informado dever ser: 7D,
este o valor 125 em hexadecimal. Fazendo o mesmo para o nmero 100, voc
encontrar: 64 (em hexadecimal).
Mas como saber a quantidade exata de cores a utilizar para fazer, por exemplo,
um azul celeste? muito trabalhoso! Voc ter que ir experimentando at encon-
trar a cor que deseja. Ento como fazer? Simples, voc aprender a escolher a cor
e o programa que voc estiver utilizando se encarrega de montar o valor para
voc. Porm, saber como funciona fundamental para um Webmaster.
Definindo as cores dos links
Nossa pgina index.html possui um link para a pgina oficial da Top Training. A
princpio este link se apresenta na cor AZUL quando ainda no clicado. Ao ser cli-
cado passa para a cor VIOLETA. Existem alguns atributos na tag <body> que defi-
nem as cores dos links.
LINK Links ainda no visitados
LINK J visitados
ALINK Links ativos
Altere a tag <body> do nosso documento para que ela fique como segue:
<body bgcolor = "#FFFFCC" link = "#FF0000" vlink=" #008080" alink="#FFFFCC">
Inserindo linhas
Anteriormente utilizamos o comando <HR> para produzir uma linha horizontal em
nossa pgina. Agora conheceremos as demais opes em relao a ela. Altere
nossa pgina para que fique como segue:
1: <html>
2: <head>
4: </head>
5: <body>
9: <hr>
10: <center>

13: Certificado no final do curso
14: <hr width="80%">
15: <hr width="50%" size="5" color="#800000">
16: </center>
17: </body>
18: </html>
Aps digitar, salve o arquivo e carregue-o no navegador. Veja como funciona:
WIDTH Porcentagem total da linha em relao tela
SIZE Espessura da linha em pixels
COLOR Cor a ser utilizada na linha
Tabelas em HTML
Voc poder (e dever) utilizar tabelas para organizar a disposio das informa-
es na tela, sejam elas texto ou figuras. Criar tabelas no HTML pode ser um tra-
balho penoso, principalmente se a tabela a ser criada for complexa. No entanto, o
resultado final compensador.
Veja quais so as tags utilizadas para criar tabelas.
<TABLE></TABLE>
Esta tag inicia e termina uma tabela.
<TR></TR>
A tag <tr> determina cada uma das linhas de uma tabela.
<TD></TD>
A tag <td> ir determinar as clulas de cada uma das linhas.
<TH></TH>
Utilizados para definir os ttulos da tabela. A nica diferena deles para o <td>
que o texto aparecer em negrito.
Para ficar mais claro, vamos a um exemplo:
1: <html>
2: <head>

4: </head>
5: <body>
9: <hr>
10: <center>
11: <table border="1">
12: <tr>
13: <td width="25%">
14: <p align="center"><b>CURSOS</b></td>
15: <td width="25%" align="center"><b>MATERIAL</b></td>
16: <td width="25%" align="center"><b>CERTIFICADO</b></td>
17: <td width="25%" align="center"><b>APOIO EXTRA CURSO </b></td>
18: </tr>
19: <tr>
20: <td width="25%"><b>BSICO</b></td>
21: <td width="25%" align="center">
22: <p align="center">SIM</td>
23: <td width="25%" align="center">SIM</td>
25: </tr>
26: <tr>
27: <td width="25%"><b>WEBMASTER</b></td>
31: </tr>
32: <tr>
33: <td width="25%"><b>WEBDESIGN</b></td>
37: </tr>
38: </table>
39: </center>
40: </body>
41: </html>
Aps digitar os cdigos citados, salve seu arquivo e abra no browser.

Os atributos de uma tabela
As marcaes das tabelas podem apresentar resultados diferentes, se acompanha-
das de alguns atributos. Vamos ver os principais:
<BORDER>
Dever ser utilizado junto com a tab <table> e define se a tabela dever conter
bordas ou no.
<ALIGN>
Define o alinhamento horizontal das clulas.
<VALIGN>
Define o alinhamento vertical.
<NOWRAP>
Utilizado para evitar a quebra de linha dentro da clula.
<COLSPAN>
Aplicado com TH ou TD. Especifica quantas colunas uma clula ir conter.
Criando Formulrios
Este etapa de grande importncia para voc que deseja se tornar um Webmas-
ter. Os formulrios aparecero em praticamente todos os sites que voc ir criar.
Por exemplo: no cadastro de itens, no cadastro de um visitante ao site, na seleo
de itens para colocar no carrinho de compras de um site de e-commerce, entre
outras dezenas de finalidades.
At agora utilizamos apenas uma pgina que foi alterada no decorrer deste captu-
lo. Agora crie uma nova pgina e salve-a com o nome de form.HTML. Voc deve-
r digitar os cdigos a seguir com o mximo de cuidado para no errar, pois qual-
quer erro poder resultar em um formulrio mal formatado ou faltando campos.
Aps digitar os cdigos iremos lhe apresentar cada um dos comandos utilizados.
1: <html>
2: <head>
3: <title>toptc.com.br</title>
4: </head>
5: <body>
6: <p><b><font size="2" color="#000080" face="verdana">Formulrio de contato
7: </font> </b> </p>

8: <form method="post" action="http://www.toptc.com.br/cgi-bin/formulario/
9: formulario.asp">
10: <p><font face="verdana" size="2"><b>nome: <input type="text" name="t1"
11: Size="45"></b></font></p>
12: <p><font face="verdana" size="2"><b>e-mail: <input type="text" name="t2"
13: Size="20"></b></font></p>
14: <p><font face="verdana" size="2"><b>uf: <select size="1" name="d1">
15: <option>MG</option>
16: <option>SP</option>
17: <option>RJ</option>
18: </select>
19: </b></font></p><p> <font face="verdana" size="2"> <b> sugesto: </b> </font>
20: </p>
21: <p> <font face="verdana" size="2"><b><textarea rows=2 name=s1" cols=20>
22: </textarea> </b></font></p>
23: <p><font face="verdana" size="2"><b>sexo: <input type="radio" value="v1"
24: checked name="r1">M<input type="radio" name="r1" value="v2"> F </b>
25: </font> </p>
26: <p><font face="verdana" size="2"><b><input type="submit" value="submeter"
27: name="b1"><input type="reset" value="redefinir" name="b2"></b></font></p>
28: </form>
29: </body>
30: </html>
Salve seu arquivo e abra no navegador. Na seqncia voc ter uma explicao
detalhada sobre cada tag utilizada neste formulrio.
Um formulrio pode ser criado com a tag <form>. Para que um formulrio funcio-
ne, ele precisa chamar um script que ir processar os dados e executar o que for
necessrio (Por exemplo, armazenar em um banco de dados as informaes digi-
tadas). No nosso caso foi utilizado um ASP que est no site da toptc.com.br. Voc
pode ver esta informao nas linhas 8 e 9 do cdigo anterior. A maioria dos prove-
dores de acesso disponibilizam um CGI ou ASP para que voc possa processar
seus formulrios. Voc aprender mais sobre como estes so criados nos captulos
sobre ASP (10 e 11).
O formulrio precisa saber para onde enviar a informao. Esta a URL sendo
ativada a partir do formulrio, e ela referenciada atravs da marcao ACTION.
Esta URL em geral aponta para um script CGI ou ASP que ir receber e decodificar
os resultados. Voc precisa incluir a URL completa. No endereo a seguir temos
um ASP processador de formulrios.
ACTION="www.toptc.com.br/cgi-bin/formulario/formulario.asp"

Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte
estrutura:
<FORM METHOD="POST" ACTION="http://endereo/prog.asp">
<Marcaes do formulrio>
</FORM>
Como j dissemos, voc aprender mais sobre o processador de formulrios quan-
do comear o captulo sobre a Loja Virtual. Por hora voc poder utilizar o ASP
citado, entretanto, para test-lo voc precisar estar conectado Web.
Analisando as tags de um formulrio
Agora vamos analisar cada uma das tags do formulrio. Recomendamos que voc
v experimentando as opes no seu formulrio inicial, conforme for entendendo o
funcionamento de cada uma das tags.
<TEXT>
Cria um campo para que o usurio entre com sua digitao.
VALUE=""
Apresenta o texto default ao usurio.
SIZE=""
Tamanho de exibio do campo na tela.
MAXLENGTH=""
Limita o tamanho do campo que o usurio ter para digitar.
<TEXTAREA>
Cria uma rea maior que a <text> para que o usurio digite textos maiores.
ROWS=""
Nmero de linhas.
COLS=""
Nmero de colunas.
<SELECT>
Utilizada para criar listas de opes.
<OPTION>
Em cada <option> ficar a descrio da opo.

VALUE=""
No value iremos especificar qual o valor a ser enviado para o processador de
formulrio. Caso ele no esteja presente, ser enviado o prprio texto em
<option>.
SELECTED
Especifica qual ser a opo default.
<select size="1" name="d1">
<option>MG</option>
<option>SP</option>
<option selected>RJ</option>
</select>
<RADIO>
Utilizada para criar os famosos botes de rdio.
VALUE=""
Idntico ao <value> do select.
CHECKED
Especifica qual ser a opo marcada como default.
Vamos novamente alterar nosso formulrio para que o sexo F fique seleciona-
do. Veja onde voc dever alterar.
<input type="radio" value="v1" name="r1">m<input type="radio" name="r1"
value="v2" checked>f
<RESET>
Permite que o usurio limpe o texto digitado em todos os campos do formulrio de
uma nica vez.
<SUBMIT>
Executa o envio do formulrio para o endereo especificado em <action>
No se intimide com a quantidade de cdigo utilizado para se montar um formul-
rio. Quando voc for utilizar o FrontPage ou o Dreamweaver para montar suas
pginas, voc ver que basta clicar e arrastar para incluir campos. Por hora, expe-
rimente criar novos formulrios, lembrando que a prtica leva perfeio.
63

No Captulo 4 voc aprendeu como funciona a programao em HTML. A partir
deste momento voc ir descobrir que possvel tornar o HTML muito mais din-
mico e interativo com a utilizao da programao em J avaScript.
O J avaScript fruto direto da linguagem de programao J ava. Nesta ltima temos
um ambiente completo para desenvolvimento de aplicativos para a Internet ou
no. A estrutura de programao em J avaScript bastante semelhante utilizada
pelo J ava, porm, o J avaScript foi desenvolvido apenas para utilizao na Internet.
A programao em J avaScript dever ser realizada em conjunto com o HTML.
Quando o browser encontrar comandos em J avaScript ir interpret-los e apresen-
tar os resultados do processamento.
J avaScript
Um dos principais usos da linguagem J avaScript no processamento de informa-
es contidas em formulrios. Vamos a um exemplo: suponha que voc tenha
criado um formulrio em HTML para receber dados sobre uma compra e que um
dos campos seja o CPF do usurio. Caso o usurio digite uma informao errada
(como normalmente acontece), utilizando apenas o HTML voc no tem nenhuma
chance de pedir para que ele o corrija. Com a utilizao do J avaScript podemos
capturar o que ele digitou e verificar se o que foi digitado est correto.
Mas este apenas um exemplo. Na verdade a programao em J avaScript ilimi-
tada. Atualmente temos na Internet bons sites sobre o assunto, inclusive com e-
xemplos que voc pode utilizar em suas pginas.

Um primeiro exemplo
Abra o bloco de notas (ou outro editor que permita arquivos em formato texto) e
digite o cdigo a seguir. Utilize maisculas apenas onde for indicado.
1: <html>
2: <head></head>
3: <body>
4: <script language = "Javascript">
5: alert("Ol, este seu primeiro programa ")
6: </script>
7: </body>
8: </html>
Veja que os cdigos em J avaScript esto entre as linhas 4 e 6. A funo alert()
que est na linha 5, faz com que surja uma janela com a mensagem digitada. O
ideal voc criar uma subpasta para receber seus cdigos.
Utilize sempre a digitao do cdigo em J avaScript entre os marcadores <script> e
</script>.
Nos exemplos colocaremos apenas a parte do programa em J avaScript. Altere a
parte do documento anterior que contm o J avaScript para que fique como segue:
1: <script language="Javascript">
2: document.write("Este texto aparecer normal seguido de um ");
3: document.write("<b> texto em negrito </b>");
4: </script>
Aps alterar, carregue no navegador e veja os resultados.
Colocando comentrios em seu cdigo
Um comentrio nada mais do que uma parte do seu cdigo que no ser execu-
tada pelo navegador. Veja um exemplo de comentrio:
/* Calculo do imposto
imposto = vendas* 0.7
*/
O contedo entre /* e */ no ser executado pelo navegador e servir apenas
como comentrio. Ou seja, tudo que estiver dentro do comentrio no ser execu-
tado, mesmo que seja algum comando da linguagem J avaScript.
Linguagens para Desenvolvimento na Web J avaScript 65

Outro exemplo seria:
// A seguinte rotina calcula o salrio do funcionrio
salliquido = salbruto* 1.7
Neste exemplo apenas a linha que contm // no ser executada. Voc poder
utilizar este tipo de comentrio quando precisar comentar poucas linhas.
Interagindo com o usurio
Voc deve ter ficado espantado com a simplicidade do cdigo necessrio para o
J avaScript. Veremos a seguir um programa muito til para solicitar uma digitao
ao usurio e, posteriormente, colocar na tela o que ele digitou.
2: nome=window.prompt("Como voc se chama?","");
3: document.write("Ol "+ nome + ", seja bem vindo a minha home page");
4: </script>
Aparecer uma janela solicitando ao usurio que digite seu nome na linha 2 e a
palavra digitada ser armazenada na varivel nome. Em seguida, ela ser utilizada
no comando document.write que imprimir o nome do usurio juntamente com
uma mensagem de boas vindas.
No se preocupe com a sintaxe vista at agora, logo ir se acostumar. Estes e-
xemplos serviro unicamente para permitir a voc familiarizar-se com o ambiente
J avaScript e, ao mesmo tempo, perceber na prtica o poder desta linguagem.
No exemplo a seguir, onde uma resposta solicitada ao usurio, voc perceber o
potencial do J avaScript:
2: x = window.prompt("informe a cor que gostaria para o fundo
(blue/orange/red/green) ou digite um valor numrico","")
3: document.bgColor = x
4: document.write ("<center> Se voc no gostou atualize a pgina </center>")
5: </script>
A linha 2 deve ser digitada at fechar o parntese sem o salto de linha.

Criando variveis
As variveis sero utilizadas para armazenarmos valores que podem ser numricos
ou alfanumricos (letras e smbolos). O tipo da varivel ir depender unicamente
do seu contedo. Veja:
nome = "Carlos"
imposto = 350
Neste caso foi criada a varivel nome que passou a conter a palavra Carlos. Co-
mo voc pode perceber, para criar variveis literais utilize aspas, o que no ne-
cessrio para as variveis numricas.
Operadores lgicos
Os operadores lgicos possuem diversas finalidades tais como: atribuir valores a
variveis e realizar comparaes, entre outras. Os principais operadores so:
= = Igual
!= Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual
&& E
|| Ou
Veja um exemplo de cdigo para criao de variveis e utilizao dos operadores.
2: a = 4; b = 5;
3: c = a / b;
4: if ( c > 1 )
5: document.write ( " A operao A dividido por B maior que 1 ");
6: else
7: document.write ( " A operao A dividido por B menor que 1 ");
8: </script>
Aqui temos algumas novidades. Na linha 2 temos a utilizao de dois comandos,
possvel desde que sejam separados por ; (ponto-e-vrgula). O comando if que
aparece na linha 4 testa se a varivel c maior do que 1. Em caso afirmativo, ele
executa o primeiro document.write e, em caso negativo, ele executar o segun-
do. Voc ver a sintaxe completa do comando if nas pginas que se seguem.

Operadores matemticos
Os operadores matemticos so simples e funcionam basicamente como uma cal-
culadora convencional. No decorrer do livro voc ter vrios exemplos do uso des-
tes operadores. Veja quais so:
+ Adio de nmeros e concatenao de strings
- Subtrao
* Multiplicao
/ Diviso
% Clculo do resto de uma diviso
Digite o programa a seguir e veja os resultados:
2: x = window.prompt("infome o primeiro valor"," ")
3: y = window.prompt("infome o segundo valor"," ")
4: z = x * y
5: alert("a multiplicao resulta: " + z)
6: </script>
Veja o potencial da linguagem J avaScript digitando o exemplo a seguir:
2: x = window.prompt("infome o valor de a:"," ")
3: y = window.prompt("infome um valor menor para b:"," ")
4: resto = x % y
5: z = (x - resto) / y
6: document.write( x + " dividido por " + y + " igual a " + z + " e sobra " + resto)
7: </script>
Nas linhas 2 e 3 o programa solicita ao usurio que digite valores para as variveis
x e y. Na linha 4 o resto da diviso colocado dentro da varivel resto. Em se-
guida a varivel z recebe o valor de x menos o resto dividido por y. Por fim, na
linha 6 todas as variveis so impressas na tela.
Operadores condicionais
Os operadores condicionais so muito utilizados durante o desenvolvimento de um
programa, por menor que ele seja. Atravs deles podemos, por exemplo, determi-
nar a execuo de um trecho de programa em detrimento de outro. Veja pelo e-
xemplo a seguir:

2: a = 20; b = 10
3: if(a>b)
4: {
5: document.write ("o valor de A maior")
6: }
7: else
8: {
9: document.write ("o valor de B maior")
10: }
11: </script>
No exemplo anterior, se voc alterar o valor da varivel a para qualquer valor me-
nor do que b, ento o document.write executado ser o que est dentro do
else (que traduzindo significa se no).
Exerccio #1
Agora temos alguns desafios para voc. Tente resolver os problemas propostos
adiante. Caso voc no consiga, a soluo est no final deste captulo. O ideal
que voc se esforce ao mximo para resolv-los, no entanto, lembre-se de que
voc est apenas comeando.
a) Crie um programa onde o usurio digite sua idade (utilize window.prompt) e o
programa calcule quantos dias de vida ela tem. Utilize a seguinte frmula:
dias = eval(idade)*365.
(A finalidade da funo eval(idade) a de converter o texto digitado em um valor
numrico).
b) Em outro programa, solicite ao usurio que digite sua idade (utilize
window.prompt), verifique o valor informado (if) e emita uma mensagem ao
usurio (alert() ) para os casos a seguir:
Menor que 18:
Pgina imprpria para menores de 18 anos.
Maior ou igual a 18:
Entre e divirta-se.
c) Faa um programa que leia 3 variveis (a,b,c), calcule a soma e a multiplicao
entre eles. Utilize eval(varivel) para transformar a entrada do usurio em valor
numrico. E, em seguida, mostre na tela com a funo alert().

Criando laos no programa (loops)
Os loops podem ser entendidos como seqncias de cdigos que iro se repetir
por um determinado nmero de vezes. Desta maneira poderemos executar tarefas
repetitivas de uma forma controlada.
Digite o exemplo a seguir:
2: // Calculo da soma dos 10 primeiros nmeros inteiros
3: y = 0
4: for(x=1;x<=10;x++)
5: {
6: y = y + x
7: }
8: document.write("a soma dos 10 primeiros nmeros inteiros : "+ y)
9: </script>
O cdigo citado simples: na linha 2 temos um comentrio (apenas para dizer o
que o programa ir fazer), na linha 4 temos o lao for. Dentro deste lao temos a
varivel x comeando com o valor 1; em seguida a condio de parada do loop,
at quando x seja menor ou igual (<= ) a 10; e o incremento de x (x++), que
faz com que x seja incrementado de 1 em 1.
A prxima idia fazer um lao enquanto uma condio for verdadeira. Para isto
utilizaremos o comando while.
2: // soma dos 10 primeiros nmeros inteiros
3: y = 0
4: x = 1;
5: while (x<=10)
6: {
7: y = y + x
8: x = x + 1
9: }
10: document.write("a soma dos 10 primeiros nmeros : "+ y)
11: </script>
No exemplo a seguir o comando while utilizado para no permitir que o usurio
entre na pgina enquanto no responder corretamente pergunta feita:

2: resposta=window.prompt("responda para entrar: qual a metade de 2+2?"," ")
3: while (resposta!=3)
4: {
5: resposta=window.prompt("voc errou: qual a metade de 2+2?","")
6: }
7: alert("parabns voc acertou!")
8: </script>
Perceba que temos uma brincadeira neste script. Voc pode descobrir qual ?
Estas so as duas formas mais usuais de se criar um loop. Utilizamos for quando
soubemos quantas vezes o loop dever ser executado. Geralmente este loop ter
um valor inicial, uma condio de parada e um incremento. No exemplo com for
criamos um lao com incremento de 1 em 1. Veja no exemplo a seguir como pode-
ro ser criados outros incrementos:
for(x=0;x<200;x=x+2)
J o lao com a instruo while dever ser utilizado quando no soubermos qual a
condio de parada. Um bom exemplo disto quando voc solicita seu extrato no
banco. O sistema consulta a base de dados mas no sabe quantos registros de
movimentao ele ir encontrar. Com isto o lao que ir mostrar as linhas de seu
extrato no ter uma quantidade exata, depender da quantidade de informaes
presentes no banco de dados.
Se estiver confuso no se preocupe. Nos captulos sobre ASP (11 e 12) voc ter
vrios exemplos da utilizao de loops.
Criando funes
Se fosse possvel definir as funes em poucas palavras poderamos dizer que so
pequenos trechos de programas que podemos chamar a partir de um programa
principal. Mas desta forma estaramos sendo simplistas. As funes podem fazer
muito mais por nossos sistemas. A partir da utilizao de funes podemos simpli-
ficar sobremaneira o desenvolvimento de aplicativos.
Dentro das funes geralmente esto cdigos de programao que normalmente
precisaramos digitar mais vezes dentro do nosso programa principal. Utilizando
funo precisamos criar os cdigos apenas uma vez e podemos cham-los quando
for preciso.
Suponha por exemplo uma funo para somar dois nmeros.

2: function soma(x,y)
3: {
4: var soma;
5: soma = x+y;
6: return(soma);
7: }
8: total = soma(5,7);
9: document.write("a soma : ",total);
10: </script>
Vamos tentar entender os cdigos citados.
Na linha 2 uma funo com o nome de soma criada (ela poderia ter qualquer
outro nome). Toda funo dever estar envolvida por chaves {}, como entre as
linhas 3 e 7. Esta funo recebe dois parmetros (x e y), soma os dois na linha 5 e
retorna o resultado na linha 6. No entanto voc poder ter funes que no retor-
nem valor algum.
O programa principal comea na linha 8. Nesta linha temos uma chamada funo
soma, passando dois parmetros 5 e 7 (os quais sero as variveis x e y dentro da
funo). O retorno da funo ser atribudo varivel total. Na linha 9 a varivel
total impressa.
Este foi um exemplo extremamente simples. Mas ele pode dar a exata noo de
como funcionam as funes.
Exerccio #2
Crie uma funo para receber um valor pelo teclado (window.prompt) e, a seguir,
verificar se o valor digitado est entre 0 e 10. Utilizando if emita uma mensagem
de alert para informar ao usurio sobre o resultado da verificao: O valor est
entre 0 e 10 ou O valor no est entre 0 e 10".
Tente resolver o problema sozinho, mas caso tenha dvidas, d uma olhadinha no
final do captulo.
A hierarquia de objetos do J avaScript
Tudo que voc fez at agora foi manipular objetos que esto prontos dentro do
browser. Este objetos podem ser vistos como pequenos programas que possuem
caractersticas prprias as quais podem ser consultadas e em alguns casos at
mesmo manipuladas.

Os objetos so o que existe de mais moderno na programao comercial atual-
mente. Na verdade voc poder encontrar valiosas informaes sobre a programa-
o orientada a objetos em livros sobre o assunto ou at mesmo em tutoriais na
Internet. O J avaScript implementa algumas das propriedades da orientao a obje-
tos, o suficiente para facilitar em muito o desenvolvimento de aplicativos na web.
A partir desta seo voc aprender a manipular os objetos mais importantes do
navegador. Primeiramente vamos ver quais so os objetos que podem ser manipu-
lados e qual a sua hierarquia.
window
parent frames self Top
location
history
document
forms
links
anchors
Elements text textarea checkbox
password radio select
button submit reset
Aprenderemos a manipular vrios dos objetos que voc pode ver na estrutura a-
presentada. Na verdade alguns deles voc j conhece. Por exemplo, quando voc
utiliza a funo alert(), na verdade ela um mtodo do objeto window. A sintaxe
completa seria:
window.alert(texto)
Neste livro mostraremos a maior parte dos objetos e mtodos que voc vai preci-
sar no dia-a-dia, mas no se assuste de se deparar com algo novo quando for
utilizar rotinas prontas da Internet.
Manipulando eventos
At agora falamos em uma parte do assunto sobre J avaScript que est muito liga-
do lgica de programao, ou seja, ir exigir que voc estude bastante para que
tenha facilidade no desenvolvimento de programas. Mas a partir deste momento
entraremos em assuntos que esto mais ligados Internet propriamente dita,
atravs de objetos que j esto prontos no navegador.
Podemos manipular um tipo de evento que diz respeito ao objeto document. Ire-
mos controlar o que ir ocorrer quando o usurio entrar ou sair da pgina. Com

isto poderemos dar boas vindas quando ele entrar na pgina, ou agradecer sua
visita quando deix-la.
Digite o exemplo a seguir e veja os resultados:
1: <html><head><title></title></head>
2: <script Language="Javascript">
3: function obrigado()
4: {
5: alert("Obrigado por sua visita")
6: }
7: </script>
8: <body onload="obrigado()">
9: <p><input type="button" value="Clique-me" onClick= "alert('OK')" > </p>
10: <CENTER> VOC EST ENTRANDO EM UM NOVO MUNDO </CENTER>
11: </body>
12: </html>
Perceba que na linha 8 o evento onload faz com que a funo obrigado() seja
acionada. Voc poder utilizar:
onload Ocorre ao abrir o documento.
onunload Ocorre ao fechar o documento.
Todos dois devem ser utilizados como um complemento para a tag body.
Manipulando strings
Vamos aprender de uma forma bem prtica os mtodos mais importantes dispon-
veis. Crie um novo documento e digite o seguinte programa:
1: <script language=Javascript>
2: nome = "Top Training Center"
3: </script>
Agora vamos imaginar que voc precise saber qual o tamanho em caracteres
(incluindo os espaos) do texto armazenado na string nome. Para isto basta a-
crescentar as seguintes linhas no cdigo:
3: tamanho= nome.length
4: document.write("O nmero de letras do nome " + tamanho)

5: </script>
Faa o teste e verifique que voc acaba de aprender que variavel.length retorna
o tamanho da string (quantidade de caracteres).
E se voc quisesse saber qual a letra que ocupa a posio 6 da string nome?
simples, basta alterar o cdigo que voc tem no momento para que ele fique igual
ao mostrado a seguir:
3: letra = nome.charAt(6)
4: document.write("A sexta letra a partir da esquerda : " + letra)
5: </script>
A nova propriedade variavel.charAt(posio) que retorna o caractere da posi-
o especificada. Faa o teste e voc vai perceber que neste comando a letra T
ocupa a posio 0 (zero), a vogal "o" ocupa a posio 1 (um) e assim por diante.
Para fazer o contrrio, isto , fornecer a letra e o J avaScript retornar a posio
dela, usaremos o comando varivel.indexOf("string"). Mude o cdigo para o
seguinte:
3: posi = nome. indexOf("e")
4: document.write("A posio da letra 'e' " + posi)
5: </script>
Ao fazer o teste voc ver que o resultado ser posio = 14. Isto acontece por-
que o comando nome.indexOf("e") retorna a posio do primeiro "e" a partir da
esquerda.
Mas, e se precisssemos da posio do ltimo "e"? Ento usaramos o comando
nome.lastIndexOf("e") que retorna o a posio da ltima string. Faa a altera-
o necessria no cdigo e verifique o funcionamento.
Agora vamos tentar imprimir na tela apenas a palavra "Training" da string nome.
Para isso utilizaremos variavel.substring(ind0, ind1) onde o ind0 dever indicar
a posio do primeiro caractere e o ind1 indicar a posio do ltimo caractere da
substring a ser retornado. Altere o cdigo da seguinte forma para depois test-lo:
3: pedaco = nome. substring(4, 12)

4: document.write("Uma parte do nome " + pedaco)
5: </script>
Outros dois comandos interessantes so o variavel.toUpperCase(), que conver-
te a string para maisculo e o variavel.toLowerCase(), que transforma para
minsculo. Digite o exemplo adiante e veja estes comandos em funcionamento:
3: minus = nome. toLowerCase()
4: max = nome.toUpperCase()
5: document.write("Em minsculo: " + minus + " e em maisculo assim "+ max)
6: </script>
Exerccio #3
Faa um programa para receber uma entrada do usurio. Em seguida converta o
texto digitado para maisculo. O programa dever tambm calcular quantas letras
a varivel digitada possui.
Manipulando datas
Para manipulao de datas temos a funo date(). Esta funo retorna uma string
com a data atual como no exemplo a seguir:
Exemplo: Tera Maio 24 16:58:02 1996
Para se obter os dados separadamente, utilizaremos os seguintes mtodos:
variavel.getDate() - Dia do ms (numrico de 1 a 31)
variavel.getDay() - Dia da semana (0 a 6)
variavel.getMonth() - Ms (numrico de 0 a 11)
variavel.getYear() - Ano
variavel.getHours() - Hora (numrico de 0 a 23)
variavel.getMinutes() - Minutos (numrico de 0 a 59)
variavel.getSeconds() - Segundos (numrico de 0 a 59)
Digite o exemplo a seguir e veja o resultado.
2: datat = new Date()
3: diah = datat.getDate()
4: mesh = datat.getMonth()

5: document.write("dia: " + diah + " mes: "+ mesh)
6: </script>
Vamos entender o cdigo: na linha 2 um novo objeto criado contendo uma es-
trutura para receber a data completa do sistema (dia/ms/ano ho-
ra/minuto/segundo). Na linha 3 estamos extraindo do objeto datat apenas o dia
(getDate), na linha 4 estamos extraindo o ms (getMonth), e para finalizar, na
linha 5 o programa imprime as variveis carregadas com o dia e o ms.
Voc poder utilizar qualquer um dos outros recursos. O funcionamento idntico.
Exerccio #4
Faa um programa para verificar a hora atual, se maior que 18:00Hs ou menor que
6:00Hs imprima "Boa Noite", do contrrio imprima "Bom dia".
(Utilize: if((hora>=18) || (hora<=6)) para fazer a verificao).
Elementos relacionados com o browser
Alguns elementos relacionados com o browser permitem que sejam acessados
recursos presentes no navegador do usurio. Podemos, por exemplo, simular o
clique no boto voltar ou avanar. Veja:
Objeto history
Utilizando o objeto history (o boto histrico do navegador), podemos manipular:
back() -Retorna ao documento visitado anteriormente
forward() -Avana para o documento seguinte
go(x) -Avana para a pgina na posio (x) armazenada no history.
2: document.write("<a href='Javascript:history.go(-1)'> anterior </a> </p> ")
3: document.write("<a href = 'Javascript:history.forward()' > prxima </a></p>")
4: </script>
Objeto document
Este objeto contm informaes sobre o documento carregado atualmente pelo
navegador. Algumas das informaes so dinmicas, o que nos permite alter-las
e ver os resultados imediatamente.

Veja as propriedades que poderemos alterar:
document.bgColor ="cor" - Altera a cor do fundo dinamicamente
document.fgColor ="cor" - Cor do texto
document.linkColor ="cor" - Cor dos links
document.vlinkColor ="cor" - A cor dos links visitados
document.location - Informa qual a URL corrente
As cores podero ser expressas por seu nome em ingls, um nmero em decimal
ou hexadecimal (#RRGGBB).
2: document.bgColor = "orange"
3: documento = document.location
4: document.write("caminho do documento atual: "+ documento)
5: </script>
Objeto window
Voc j utilizou diversos objetos nos programas vistos anteriormente. O objeto
window o pai de todos os outros, o que pode ser constatado na hierarquia de
objetos vista anteriormente. Veja algumas operaes que podem ser realizadas
com este objeto.
window.confirm("mensagem")
Faz surgir uma janela de confirmao. (Retorna True ou False de acordo com o
que o usurio escolheu).
window.open(URL)
Abre uma janela e carrega a URL(http://www.....).
window.prompt(msg,resp)
Abre uma janela que aceita uma entrada.
window.setTimeout("funco()",x)
Aps x seg. executa a funo(). Onde x dever ser multiplicado por 1000 para
significar 1 segundo.
Exemplo:

2: window.open("http://www.toptc.com.br")
3: </script>
Veja como utilizar a funo window.status = "Texto" para colocar uma mensagem
no rodap do navegador.
2: function rodape()
3: {
4: window.status = "esta uma mensagem na barra de status"
5: }
6: setTimeout("rodape()",100);
7: </script>
Inserindo e controlando figuras
Manipular figuras com o J avaScript muito simples. Com ele podemos utilizar re-
cursos como: carregar imagens apenas em uma determinada hora, alterar figuras
conforme uma escolha do usurio, entre outros. Quando a sua pgina carrega um
arquivo de imagem, ela lana mo da seguinte tag em HTML.
<img src="imagem.gif" name="nome" width=20 >
Quando o navegador carrega esta imagem, ele a coloca dentro de uma estrutura
que poder ser manipulada a qualquer momento. Esta estrutura possui algumas
caractersticas. So elas:
border - Corresponde se haver ou no a borda na Figura
height - Altura da imagem
hspace - Distncia da margem do documento
name - Nome da imagem
src - URL do arquivo de imagem
vspace - Posio em relao ao topo da imagem
width - Atributo largura da imagem
Veja um exemplo da manipulao de figuras em uma pgina:
(Para este exemplo voc precisar de 3 figuras com a extenso .gif que podem ser
copiadas de qualquer site da Internet, no entanto voc precisar alterar os nomes
para: figura1.gif, figura2.gif e figura3.gif)
1: <html>
2: <head> </head>

3: <body></body>
5: document.write(" <img src='figura2.gif'> ")
6: op = window.prompt("Escolha a Figura: 1, 2 ou 3", "")
7: if( op == 1)
8: document.images[0].src = "figura1.gif"
9: if( op == 2)
11: if( op == 3)
13: </script>
14: </html>
Interagindo com o usurio
Na parte sobre HTML voc criou formulrios com vrios campos. Estes dados, depois
de digitados pelo usurio, so processados em um servidor de CGI ou ASP e nor-
malmente devolvidos para algum e-mail ou armazenados em um banco de dados.
Porm, voc j deve ter se deparado com uma situao do tipo em que necessi-
tasse validar um determinado campo como, por exemplo, a informao de um
CGC. Isto no possvel diretamente no HTML. Os programas em J avaScript tm
como um dos seus maiores campos de aplicao o processamento local dos dados
introduzidos pelo usurio. Digite o exemplo a seguir para ver como o J avaScript ir
tratar as informaes do formulrio.
2: function calcula(form)
3: {
4: var soma=eval(form.parcela1.value) + eval(form.parcela2.value);
5: form.resultado.value = soma;
6: }
7: </script>
8: <body>
9: <form> <p>parcela1:<input type="text" name="parcela1" size="20"></p>
10: <p>parcela2: <input type="text" name="parcela2" size="20"></p>
11: <p>resultado: <input type="button" value="Calcular" size="20"
12: onClick="calcula(this.form)"> </p>
13: <p><input type="reset" value="Reset" name="B2"></p>
14: <p><input type="text" name="resultado"> </p>
15: </form></body>

Veja um exemplo de uso para o button chamando a funo pressiona:
1: <script LANGUAGE="Javascript">
2: function pressiona()
3: { alert(" Obrigado ") }
4: </script>
5: <body> <p><input type="button" value="Pressione aqui" name="B1"
6: onClick="pressiona()"> </p></body>
Outro exemplo interessante:
2: function formata()
3: { alert(" Iniciando a formatao do HD ") }
4: </script>
5: <body>
6: <p align="center"><a href="a" onMouseOver="formata()">Nunca passe o
7: mouse aqui.</a></p>
8: </body>
Resoluo dos exerccios propostos
Exerccio #1
1: <html>
2: <head</head>
3: <body>
5: idade = window.prompt("qual sua idade:","")
6: dias = eval(idade) * 365
7: document.write("voc tem "+ dias +" dias de vida ")
8: </script>
9: </body>
10 </html>

1: <html>
2: <head</head>
3: <body>
5: idade = window.prompt("qual sua idade:","")
6: if(idade<18)
7: document.write("pgina imprpria para menores de 18 anos")

8: else
9: document.write("entre e divirta-se")
10: </script>
11: </body>
12: </html>

1: <html>
2: <head></head>
3: <body>
5: a = window.prompt("informe o primeiro valor","")
6: b = window.prompt("informe o segundo valor","")
7: c = window.prompt("informe o terceiro valor","")
8: soma = eval(a)+eval(b)+eval(c)
9: mult = eval(a)*eval(b)*eval(c)
10: document.write("a soma : "+ soma +"<p>")
11: document.write("a multiplicao : "+ mult)
12: </script>
13: </body>
14: </html>
Exerccio #2
1: <html>
2: <head></head>
3: <body>
5: function verifica(val)
6: {
7: if( val>0 && val<= 10)
8: alert("o valor esta entre 0 e 10")
9: else
10: alert("o nmero no esta entre 0 e 10")
11: }
12: valor = window.prompt("digite um valor entre 1 e 10","")
13: verifica(valor)
14: </script>
15: </body>
16: </html>

Exerccio #3
1: <html>
2: <head</head>
3: <body>
5: dig = window.prompt("digite o seu nome: ","")
6: let = dig.toUpperCase()
7: num = dig.length
8: alert("convertido para maisculas: "+let)
9: alert("o no. de letras : "+ num)
10: </script></body></html>
Exerccio #4
1: <html>
2: <head</head><body>
4: datatoda = new Date()
5: hora = datatoda.getHours()
6: if( (hora >= 18) || ( hora <=6) )
7: alert("Boa Noite")
8: else
9: alert("Bom Dia")
10: </script>
11: </body></html>
83

Neste captulo iremos lhe apresentar o desenvolvimento em WAP. Trata-se de uma
tecnologia que ainda subutilizada no Brasil e, um dos motivos para isto se deve
ao fato de a apresentao dos dados nos aparelhos WAP ainda ser muito precria.
Entretanto, novos displays coloridos provavelmente daro um maior impulso ao
desenvolvimento para aparelhos com esta tecnologia. Vale lembrar que at mesmo
a Internet j foi feita de arquivos textos puros.
Como Webmaster voc precisa conhecer sobre o WML pois as empresas que de-
senvolvem sites na Internet eventualmente podem precisar do mesmo site para o
ambiente WAP. Trata-se de um recurso valioso para intercmbio de informaes e
o que melhor, sem a necessidade de se utilizar um computador completo.
WAP
O WAP (Wireless Application Protocol) foi desenvolvido pelo WAP Forum e adotado
pela indstria que desenvolve aparelhos celulares com recursos para conexo
Internet. Entretanto a maioria dos palmtops tambm pode ler e interpretar pginas
escritas em WML.
WML
O WML (Wireless Markup Language) a linguagem de marcao utilizada para
exibir documentos em dispositivos compatveis com WAP. Ela muito semelhante
ao HTML que voc j conheceu no captulo 4 deste livro, com a principal diferena
de que alguns dos recursos presentes no HTML no podem ser utilizados no WML
pela limitao dos aparelhos que interpretam as tags.

A forma de conexo destes aparelhos Internet praticamente a mesma utilizada
nos equipamentos desktop, com a diferena de que a maioria deles j vem pr-
configurada pela operadora.
Iniciando o editor WAP
Para editar e testar nossos cdigos voc ir precisar instalar um editor WML. Este
livro utilizou o Easy Pad Editor mas se voc j possuir algum outro, poder utili-
z-lo (uma verso shareware est disponvel no site www.toptc.com.br). Na prtica
o funcionamento idntico ao HTML, ou seja, basta voc criar seus cdigos e en-
viar para o provedor. Entretanto, voc dever se certificar de que o provedor prov
servios WAP.
A tela a seguir mostra o editor em funcionamento.

Figura 6.1 Do lado esquerdo da tela ficar seu cdigo. direita voc poder ver o
resultado do programa clicando sobre o boto Refresh.
A maior parte dos recursos so simples de serem utilizados, principalmente se voc
j conhece o HTML. Por exemplo, para criar um texto em negrito, basta digitar,
selecionar o texto e clicar no boto B (negrito). Para ver o resultado, clique sobre
o Refresh (lado superior direito da tela).
Programao WML (Wap) 85

Deck
Um deck pode ser visto como um arquivo no texto com as marcaes WML. Dentro
de um deck temos partes menores chamada cards. Ao contrrio do HTML onde
todo o arquivo lido pelo browser, no WML apenas um card de cada vez ser a-
presentado. As partes necessrias em um deck so:
Cabealho XML
Declarao do DTD (Definio do Tipo de Documento)
Um ou mais cards
Vamos explicar cada uma delas:
Cabealho XML
<?XML version="1.0"?>
Este cabealho uma exigncia do XML. Atravs dele estamos afirmando que o
documento est de acordo com a exigncia do XML.
Declarao do DTD (Document Type Definition)
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.XML">
Agora estamos afirmando a conformidade com a especificao do WAP. Esta defi-
nio baseada no WAP Forum que trata das especificaes WML.
Caractersticas de um card
<card id="card1" title="Alo Mundo">
cdigo
</card>
Como dissemos, um card est dentro de um deck (o arquivo propriamente dito). E
dentro do card que iremos colocar nossos cdigos. Atravs do atributo <card id>
que representa o nome do card, poderemos navegar entre os cards de um deck.
Criando a primeira pgina em WML
Vamos criar a primeira pgina em nosso editor. Partindo do princpio de que voc
j tenha conhecimento de HTML, apresentaremos apenas os cdigos.
Altere os cdigos de sua pgina no editor para que fique como segue:

1: <?xml version="1.0"?>
2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
3: <wml>
4: <card id="card1" title="Alo Mundo">
5: <p>
6: Alo Mundo WAP<br/>
7: </p>
8: </card>
9: </wml>
Os textos mostrados pelo WML devem ser inseridos dentro de um pargrafo, que
indicado pelas tags <p>....</p>. A tag <br/> serve para quebrar a linha.
Aps digitar o cdigo citado crie uma pasta e salve-o. Visualize o resultado clicando
sobre Refresh.
Utilizando decks e cards
Cada deck comea e termina com uma tag <wml> e cada card comea e termina
com uma tag <card>.
Quando o usurio solicita a card de um deck, todo o documento carregado para
a memria do dispositivo WAP e, em seguida, a navegao realizada entre os
cards do documento.
Digite o prximo exemplo e veja os resultados:
2: 
4: "http://www.wapforum.org/DTD/wml_1.1.xml">
5: <wml>
6: <card id="principal" title="TOP TRAINING">
7: <p align="center"><br/>
8: Bem vindo ao WAP.
9: Aqui comea um novo tempo!
10: </p>
11: </card>
12: </wml>

Criando um hiperlink
A criao de um hiperlink semelhante ao HTML. Uma diferena que voc pode
criar links entre os cards de um deck. A sintaxe mostrada a seguir:
<a href="filename">Clique aqui</a>
<a href="#cardid"> Clique aqui </a>
<a href="filename#cardid"> Clique aqui </a>
Onde filename o nome de um arquivo WML, e cardid o atributo id de um
<card> ( a identificao de um card ).
Digite o programa a seguir e salve-o como loja.wml
3: "http://www.wapforum.org/DTD/wml_1.1.XML">
4: <wml>
5: <card id="home" title="Home Page">
6: <p>
7: Clique <a href="precos.wml">Aqui </a> para lista de preos.
8: </p>
9: </card>
10: </wml>
Note como o texto do hiperlink est agora marcado, criando assim uma seleo
para o usurio. O link neste exemplo especifica um nome de um arquivo WML que
ser carregado. Como no HTML, se o arquivo no existir, um erro 404 (arquivo no
encontrado) ser gerado pelo navegador.
Perceba que podemos carregar um card que no esteja presente na memria no
momento, devendo usar a seguinte sintaxe: filename#cardid.
Tags <to><do>
Digite este novo arquivo, salve-o como prog2.wml e executando-o voc ver a
funcionalidade das tags <do> e <go>:
3: "http://www.wapforum.org/DTD/wml_1.1.XML">
4: <wml>
5: <card id="card1" title="Primeiro Card">

6: <p align="center">
7: <br/>
8: <big>
9: Este o Card 1
10: </big>
11: </p>
12: <do type="accept" name="ref1" label="Proximo Card">
13: <go href="#card2"/>
14: </do>
15: </card>
16: <card id="card2" title="Card 2">
18: <br/><i>
19: Este o Card 2
20: </i></p>
21: <do type="accept" name="ref2" label="Proximo Card">
22: <go href="#card1"/>
23: </do>
24: </card>
25: </wml>
O programa est dividido em dois cards indicados pelo atributo id: card1, card2.
Cada card contm uma referncia para o card seguinte, utilizando-se das tags
<do> e <go> .
<do type="accept" name="ref1" label="Proximo Card">
<go href="#card2"/>
</do>
Ontimer
Permite determinar um tempo para que uma ao ocorra. muito til para exibir-
mos, por exemplo, uma pgina inicial em um deck e depois irmos automaticamen-
te para outro card. Veja um exemplo:
1: <wml>
2: <card id="primeira" ontimer="#segunda" title="Usando o timer">
3: <timer value="50"/>
4: <p>
5: <b> Bem vindo ao WML </b>
6: </p>
7: </card>
8: <card id="segunda" title="Card 2">

9: <p>
10: <b> Voc est no segundo CARD</b>
11: </p>
12: </card>
13: </wml>
O cdigo citado mandar o seu dispositivo WAP para o segundo card, aps o tem-
po especificado no timer.
Onpick
Ocorre toda vez que o usurio seleciona ou desseleciona um item dentro de uma
lista select do documento WML. Com o evento onpick e a tag select podemos criar
listas de opes em nosso documentos. Veja:
1: <wml>
2: <card id= "Times" title = "times">
3: <p align="left">
4: Qual o seu time de corao???
5: <select name="times">
6: <option value="1" onpick ="#Cruzeiro"> Cruzeiro </option>
7: <option value="2" onpick ="#outrotime"> Outro Time </option>
8: </select>
9: </p>
10: </card>
11: <card id="cruzeiro" title = "5 estrelas">
12: <p align ="left"> Voc possui bom gosto</p>
13: </card>
14: <card id="outrotime" title ="Outro time">
15: <p align="left"> Seu gosto no to bom assim...</p>
16: </card>
17: </wml>
Perceba que criamos diversas pginas (cards e menus de seleo) com apenas
poucas linhas de cdigo. Essa uma das vantagens do uso de eventos como o
onpick.
Tabelas
Como j dissemos, o uso de tabelas pode melhorar a exibio de informaes na
tela. As tags para se criar tabelas no WML so semelhantes s do HTML.

<table> - Incio e o fim da tabela
<tr> - Linha
<td> - Coluna
1: <wml>
2: <card id="Principal" title ="Tabela">
3: <p>
4: 
5: <table columns="2" align=left>
6: <!-Aqui comea a primeira linha-->
7: <tr>
8: <td> <b>Produto</b></td>
10: <td> <i>Preo</i></td>
11: </tr>
12: <!-Aqui esto as linhas dos produtos-->
13: <tr>
14: <td>Televisor</td>
15: <td>280,00</td>
16: </tr>
17: <tr>
18: <td>Geladeira</td>
19: <td>1200,00</td>
20: </tr>
21: <tr>
22: <td>Vdeo K7</td>
23: <td>199,00</td>
24: </tr>
25: <tr>
26: <td>Som</td>
27: <td>680,00</td>
28: </tr>
29: </table></p>
30: </card>
31: </wml>
Obtendo dados do usurio (formulrios)
A criao de formulrios de extrema importncia para a interao entre o usurio
e o site. Entretanto, eles devem ser evitados em WML pois a digitao de informa-
es no minsculo teclado de um celular (por exemplo) algo terrvel. Devemos
resumir ao mximo esta necessidade. Vamos ver quais so as tags para criao de
formulrios.

A tag <input>
Permite a entrada de dados alfanumricos por parte dos usurios. Vejamos a sua
sintaxe e os respectivos atributos:
<input name="Varivel" default="Valor Padro" format="Formato" empty="True"
size="Tamanho" maxlength="MaxChar" type="TipoEntrada"/>
NAME
Nome do campo. Atributo Obrigatrio.
DEFAULT
Valor default a ser carregado.
FORMAT Mscara de entrada, pode ser:
A - Permite letras em maisculas, ou sinal de pontuao.
a - Permite apenas letras minsculas, ou sinal de pontuao.
N - Permite qualquer nmero.
X - Permite qualquer caractere maisculo.
x - Permite qualquer caractere minsculo.
EMPTYOK
Torna a entrada obrigatria caso seja true; se for false (valor default) o campo
opcional.
SIZE
Tamanho do campo em caracteres para exibio.
MAXLENGTH
Quantidade mxima de caracteres para digitao.
TYPE
Especifica o tipo de entrada. Pode ser texto ou password. Valor default texto.
Voc pode referir uma tag <input> com o valor literal de outra resposta prefixando
o elemento name com um caractere dolar ($). Digite o exemplo a seguir para ver
como funciona:
1: <card id="card1" title="Exemplo Input">
2: <p> Digite seu nome:<input name="nome" format="*A"/>
3: <a href="#card2">Resultado</a>

4: </p></card>
5: <card id="card2" title="Resultado">
6: <p> Como vai: $(nome)
7: </p></card>
A tag select
Como no HTML, cria uma lista de opo para o usurio. Diferentes tipos de dispo-
sitivos WAP apresentaro a lista de seleo de diversas maneiras e permitiro dife-
rentes mtodos de seleo. Cada elemento da lista dever estar dentro de uma tag
<option>.
Execute o exemplo a seguir:
1: <card id="card1" title="Exemplo Input">
2: <p>
3: Selecione a modalidade:
4: <select name="optname" multiple="false">
5: <option value="1">Futebol</option>
6: <option value="2">Tenis</option>
7: <option value="3">Basquete</option>
8: <option value="4">Baseball</option>
9: </select>
10: </p>
11: </card>
Onde name o nome desta opo, multiple um valor true/ false o qual per-
mite a seleo mltipla ou no dos itens.
Altere o valor de multiple para true e veja os resultados.
Utilizando variveis
Como vimos em J avaScript, uma varivel possui a capacidade de armazenar um
valor dentro dela. Assim como em J avaScript, existe diferena entre letras mais-
culas e letras minsculas, ou seja, a varivel "$Nome" diferente da varivel
"$nome", que tambm diferente de "$NoMe".
Uma varivel pode ser criada utilizando-se a instruo setvar. No exemplo a seguir
estamos definindo a varivel nome e inserindo na mesma o contedo jose:
<setvar name="apelido" value="ze" />
<setvar name="nome" value="jose" />

Digite o exemplo que segue, de uma varivel contida em um card.
1: <card id="fornecedor" title="Escolha um fornecedor">
2: <p> Nome do Fornecedor:
3: <input title="Nome fornecedor" name="fornecedor" value = "Organ. XXXX" />
4: <do type="accept" label="Limpar conteudo">
5: <refresh>
6: <setvar name="fornecedor" value=" " />
7: </refresh> </do> </p> </card>
Entendendo o cdigo:
Neste exemplo, atravs da instruo input, mostrado ao usurio que a varivel
fornecedor possui o contedo Organ XXXX. A marcao <do> cria uma tarefa
que especifica uma ao que ser executada quando a tecla Limpar Contedo for
selecionada. No instante em que esta tecla selecionada, o valor da varivel for-
necedor atualizada para vazio. Para se realizar uma atualizao na varivel utili-
zou-se da tarefa refresh.
94

Que tal aprendermos um pouco sobre essa to falada XML? Para isso dividimos
este captulo em trs sees distintas. Num primeiro momento, veremos conceitos
gerais da linguagem XML. Ficaremos sabendo o porqu do seu surgimento, quem
a criou, seu objetivo, se ela auto-suficiente, suas vantagens, e ainda como con-
feccionar e visualizar documentos XML utilizando exemplos prticos, sem a neces-
sidade de instalao de softwares especiais. Na segunda parte, comearemos por
criar um documento XML que servir como base para o aprendizado da mesma e
da etapa seguinte. Nela, o objetivo lhe mostrar o que um DTD para documen-
tos XML, bem como alguns comandos usados para cri-lo. Finalmente, entraremos
em contato com uma das tecnologias que do suporte XML, uma parte da lin-
guagem XSL usada para dar formatao aos documentos XML.
Introduo ao XML
No decorrer da histria, a ISO (International Standard Organization), organizao res-
ponsvel pela publicao de padres a serem seguidos nos mais diversos setores das
atividades humanas, publicou o padro SGML (Standard Generalized Markup Language
Linguagem de Marcao Padro Generalizada). Esta uma linguagem de marcao
que se preocupa com a estrutura do documento e no com a sua formatao. E, como
est implcito no seu nome, ela de padro generalizado, ou seja, foi projetada para
marcar vrios tipos de documentos, tais como memorandos, livros, documentos Web,
manuais tcnicos, dicionrios e muitos outros. Inclusive, editoras dos Estados Unidos
fizeram um uso intenso da SGML para estruturar suas publicaes.
Algo essencial em um documento SGML uma Definio de Tipo de Documento ou
DTD (Document Type Definition). uma aplicao que especifica a estrutura do
documento escrito em SGML. Uma DTD indica os elementos, seus relacionamentos
e as tags a serem usadas para marcar o documento.
I niciando no XML 95

At agora sabemos que a HTML (Hyper Text Markup Language Linguagem de
Marcao de Hyper Texto) uma linguagem utilizada para criar um documento
Web, preocupando-se principalmente com sua formatao, sua aparncia. O que
nos faltava era o conhecimento de que a HTML tambm uma aplicao da SGML,
na verdade o conjunto de tags da HTML segue as regras da SGML. A HTML veio
porque nos documentos web a formatao imprescindvel, j que sero visuali-
zados por um nmero imenso de pessoas de diferentes pases e culturas. A apa-
rncia do documento facilita em muito sua compreenso e ela no poderia ser
realizada apenas com SGML, j que seu ponto forte a estrutura do documento.
No entanto, a atualizao freqente de um site um dos maiores segredos para o
seu sucesso. Imagine vrias partes de um documento contendo um mesmo formato,
especificado, por exemplo, pela tag <FONT FACE = SIZE = COLOR = >
</FONT>. Se por acaso, a mudana no site implicar na alterao deste formato,
ento ser necessrio modificar as tags em todas as partes do documento que a
utilizam. Surgiu assim, na evoluo da HTML, o atributo CLASS e as folhas de esti-
lo. Este atributo CLASS pode ser usado para solucionar o problema descrito antes.
Com ele podemos definir, dentro do cabealho do documento HTML, uma formata-
o desejada dando a ela um nome. Quando formos utilizar a formatao criada,
basta chamar pelo nome que definimos. E, assim, qualquer alterao que fizermos
nesta formatao definida pelo atributo CLASS, far com que todas as partes do
documento HTML que a chamam sejam alteradas automaticamente.
J as folhas de estilo nos permitem definir previamente estilos (formatao) para
as tags que iremos usar durante o documento HTML. Com as folhas de estilo po-
demos, por exemplo, alterar a forma como os hyperlinks sero apresentados. H
hoje muitos sites que usam um hyperlink sem o sublinhado, que aparece somente
quando voc passa o ponteiro do mouse sobre ele, sendo definido por uma folha
de estilo. Poderamos tambm usar uma folha de estilo para indicar como a tag
<TABLE> </ TABLE> criar as tabelas dentro do documento, por exemplo.
O problema que, mesmo com estas evolues da HTML, ela no deixa de ter um
conjunto limitado de tags definidas e muitos trabalhos continuaram tomando tem-
po. Da surgiu a necessidade de se criar uma linguagem mais flexvel, que descre-
vesse a estrutura de um documento, como a SGML, mas, ao mesmo tempo, to
simples quanto a HTML. Para suprir essa carncia, criaram a XML.
O que XML?
A XML (Extensible Markup Language Linguagem de Marcao Extensvel) a
linguagem que veio para suprir esta necessidade. Sua principal caracterstica ser
extensvel, isto , qualquer profissional que se utilize dela poder criar as tags que
forem necessrias em seu trabalho. Veja um exemplo prtico:

Bloco 1 XML
1: <?xml version=1.0?>
2: <EstatisticaWeb>
3: <site>
4: <url> www.toptc.com.br </url>
5: <visitacao unidade=PorDia> 834 </visitacao>
6: </site>
7: <site>
8: <url> www.onemomenttogod.com </url>
9: <visitacao unidade=PorMes> 25840 </visitacao>
10: </site>
11: </EstatisticaWeb>
No existe nenhum documento elaborado pelos criadores da XML que define as
tags <EstatisticaWeb></ EstatisticaWeb>, <site></ site>, <url></ url> e <visi-
tacao unidade= ></ visitacao>. Elas foram criadas agora para uma necessidade
especfica e fictcia.
Devido a esta flexibilidade da linguagem, voc poderia perguntar: Os profissionais
de mesmo setor de atividade, advogados por exemplo, no poderiam confundir-se
ao criarem, cada um, tags diferentes para especificar um mesmo elemento?.
Na realidade, isto poderia acontecer, sim. Mas, como veremos nessa iniciao e
nos prolongamentos de seus estudos sobre XML, normalmente ela no utilizada
sozinha. Vrias outras tecnologias foram, esto sendo e sero desenvolvidas para
dar suporte a essa linguagem. Nessa linha de raciocnio, uma DTD para arquivos
XML (conceito que veremos mais adiante) poderia ser usada para padronizar do-
cumentos de mesma natureza.
Quem criou a XML?
Sendo um internauta voc tem noo da dimenso da Internet e sabe que ela no
pertence a ningum especificamente. Porm, existe uma organizao criada em
outubro de 1994 que responsvel pelo desenvolvimento e manuteno de gran-
de parte dos padres da Web, a linguagem HTML por exemplo. A XML mais um
produto desta entidade conhecida pelo nome de W3C (World Wide Web Consorti-
um), formada por 520 membros, entre eles a Microsoft, a America OnLine Inc,
AT&T, Canon Inc, CitiBank N.A., Compac Computer Corporation, Ericsson, IBM
Corporation, Intel Corporation, Macromedia, entre outras.

O que necessrio?
A princpio, precisaremos de um software para criar os documentos XML e outro
para visualizar o contedo dos mesmos.
Para criar um documento XML podemos escrev-lo at no bloco de notas do Win-
dows, desde que nos lembremos de salvar o documento com a extenso .XML .
Lembra-se do trabalho que voc teve para digitar os documentos HTML? Seria
praticamente o mesmo, com a grande diferena de que as tags seriam criadas por
voc respeitando as regras da linguagem XML. Porm j existem muitos softwares
para facilitar a vida de quem tem que programar em HTML e XML. Por exemplo: o
FrontPage o editor de HTML feito pela Microsoft, enquanto que o Dreamweaver
o editor da empresa Macromedia, embora haja muitos outros menos conhecidos.
Quem utiliza qualquer um deles, normalmente no pensa em voltar a programar
digitando as tags. A Microsoft tambm lanou um editor XML que, por enquanto,
gratuito. Seu nome XML Notepad e ele faz parte da lista de editores XML exibi-
da na tabela mostrada mais adiante.
No mostraremos aqui nenhum editor especfico porque muito bom que voc
digite os cdigos no incio para se acostumar com as regras da linguagem. Assim
quando tiver contato com qualquer um deles, ficar mais fcil e intuitiva a aprendi-
zagem. J a interpretao de documentos XML pode ser feita de vrias formas.
Veja algumas delas:
A primeira atravs de duas APIs (abreviao de Application Programming Inter-
face - conjunto de funes que realizam a interface entre o computador e os pro-
gramas de usurio):
DOM (Document Object Model) um padro definido pelo W3C que cria
uma viso em rvore do documento XML. Quando um processador XML ana-
lisa sintaticamente um documento XML, ele armazena o documento numa
rvore dentro da memria. O DOM um programa que faz interface com
essa rvore, permitindo que voc leia, adicione, exclua e edite partes dela.
SAX (Simple API for XML) uma API definida a princpio para a linguagem
J ava e que serve para processar a informao em um documento XML co-
mo uma seqncia de eventos, o que a torna mais rpida que o DOM.
Outra maneira de visualizar um documento XML atravs de um browser que
entenda o padro XML, assim o documento pode ser aberto diretamente por ele.
Este o caso do Internet Explorer 5.0 ou superior, que atende ao padro 1.0 do
XML. Podemos ainda, usar uma folha de estilo para transformar o arquivo XML em
algo que o browser entenda. Mais adiante veremos aqui uma pequena parte da
linguagem XSL que tambm serve para formatar um documento XML para ser
visualizado em um browser.

A tabela a seguir mostra uma lista de editores e navegadores XML. Alguns endere-
os para download podem estar desativados no momento em que voc est lendo
este livro. Caso isto acontea, utilize seu site de busca preferido para tentar locali-
zar o programa pelo seu nome.
Nome do Editor Endereo para Download Comentrio
Microsoft XML NotePad http://msdn.microsoft.com/library/defa
ult.asp?url=/library/en-
us/dnxml/HTML/xmlpaddownload.asp
gratuito por enquanto, porm
apresenta uma interface pobre,
dificultando o trabalho.
Adobe Frame Maker http://www.adobe.com/support/downl
oads/main.HTML#f
Apresenta timo suporte para XML
XML Pro http://www.vervet.com/ Contm bom suporte para o XML,
porm muito dispendioso.
XML Writer http://xmlwriter.net/ Este editor contm destaque colo-
rido na sintaxe.
eNotepad http://www.edisys.com/Products/eNote
pad/enotepad.asp
considerado um substituto do
WordPad e apresenta uma boa
interface com o usurio.
XMetal http://www.xmetal.com/top_frame.sq Tambm dispendioso, mas possui
boa interface.
XML Spy http://www.xmlspy.com/ Apresenta uma boa interface e de
fcil utilizao.
Amaya http://www.w3.org/Amaya/ Apresenta funcionalidades de umeditor
e browser e prov suporte para HTML,
XML, XHTML, MathML e XLinks.
XML Toolkit Permite a converso entre modelos UML e documentos XML 1.1, bem como a
gerao de DTDs de acordo com a especificao nos documentos XML.
Browser XML
InDelv Browser XML http://www.indelv.com/client/install-
no-applet.htm
Browser muito interessante possu-
indo implementao mais completa
da linguagem XSL.
Amaya (j visto na
categoria Editores
XML desta tabela)
http://www.w3.org/Amaya/ Apresenta funcionalidades de umeditor
e browser e prov suporte para HTML,
XML, XHTML, MathML e XLinks.
J umbo http://www.XML-cml.org/jumbo3/ Considerado um browser XML ver-
dadeiro, foi projetado para trabalhar
com XML e CML (uma linguagem
utilizada para desenhar molculas)
em um contexto de aplicaes
qumicas. Disponvel gratuitamente.

Tambm possvel visualizar os mesmos dados contidos em um documento XML
de vrias maneiras diferentes, por exemplo em aparelhos celulares, palmtops e em
pginas Web. Para isso, naturalmente precisaremos usar uma ou vrias tecnologi-
as de suporte a XML.
Em que pode ser usado
Embora no seja ainda uma linguagem fixada no mundo da informtica, podemos
enumerar uma srie de aplicaes para a XML, entre elas:
Transaes financeiras;
Registros mdicos;
Tratamento de documentos de companhias areas;
Armazenamento de dados de empresas controladoras de seguros;
Banco de dados;
Edio de livros;
Leiles on-line;
Pesquisa indexada de documentos;
Relatrios estatsticos, aqueles que podem ser produzidos uma nica vez
em XML e visualizados atravs do meio que se fizer necessrio;
Solues de E-Commerce em ambientes Web, onde o objetivo a integra-
o de sistemas e tecnologias diversas podendo usar a XML como lingua-
gem de comunicao.
Exemplo de aplicao em banco de
dados
Um banco de dados contendo uma lista de clientes est representado na tabela a
seguir:
Cdigo Nome RG Fone Comercial Fone Residencial
C-001 Felisberto 5.789.123 2245-9898
C-002 Adolfo 5548-7845 5423-5162
C-010 Manquira 6.325.652 3321-4521
Agora vamos ver como poderamos armazenar estes mesmos dados dentro de um
documento XML. No se preocupe com a sintaxe, embora ela no seja to difcil

assim. Daqui a pouquinho comearemos a ver as regras para se construirem as
tags em XML. Faa o seguinte:
Digite o bloco de cdigo a seguir no Bloco de Notas do Windows.
Salve o documento com o nome de Clientes.XML. (No se esquea de
colocar o tipo do arquivo como Todos os arquivos *.*)
Abra o arquivo atravs do Internet Explorer 5 ou de verso superior pa-
ra perceber como a visualizao dos documentos XML neste browser.
Bloco 2 XML
2: <clientes>
3: <cliente codigo=C-001>
4: <nome>Felisberto</nome>
5: <rg>5.789.123</rg>
6: <telefone>2245-9898</telefone>
7: </cliente>
9: <nome> Adolfo </nome>
10: <telefone>
11: <comercial>5548-7845</comercial>
12: <residencial>5423-5162</residencial>
13: </telefone>
14: </cliente>
16: <nome>Manquira</nome>
17: <rg>6.325.652</rg>
19: </cliente>
20: </clientes>
Caso o browser gere algum tipo de erro, analise o bloco digitado atenta-
mente em busca de erros na digitao.
Ao conseguir abrir o arquivo no browser, compare a visualizao com a ta-
bela onde apresentamos os dados inicialmente.
Embora este exemplo tenha sido bastante simplrio, o uso da XML para aplicaes
que envolvem banco de dados to presente que, em agosto de 2001, a empresa
Oracle lanou o Oracle9i Application Server, um servidor de aplicaes que permite
s empresas criarem sites e servios na Web usando as mais recentes tecnologias
padro de mercado para desenvolvimento de aplicativos, incluindo suporte para
J ava (J 2EE), XML e SOAP (Simple Object Access Protocol).

Existe ainda um banco de dados voltado para a linguagem XML. O Tamino XML
uma ferramenta prpria para aplicaes que necessitam trocar contedo indepen-
dente de seu tipo. Ele traz a capacidade de armazenar qualquer tipo de informao
(textos, imagens, e-mail, sons...) de uma forma estruturada e com alta capacidade
de resposta de qualquer contedo armazenado.
Pontos fortes
Veja a seguir alguns aspectos positivos que o uso da XML contempla:
Automao: informaes mantidas em websites podem ser criadas de for-
ma totalmente automtica.
Buscas precisas: a adoo de um padro comum facilita a busca de infor-
maes por parte dos clientes.
Intercmbio de dados: construtores podem obter informaes sobre os
produtos da Web e importar estes dados diretamente em seus aplicativos
de clculo de custo e projeto sem esforo adicional.
Formatao definida em folha de estilos separada do documento.
Acesso mais fcil informao atravs de atribuio de significado mais
relevante aos dados.
Desenvolvimento de aplicaes Web mais flexveis.
Integrao de dados de origens diferentes.
Computao e tratamento local dos dados.
Mltiplas vises dos dados.
Estrutura bsica
A princpio, para criar aplicaes XML so necessrios quatro passos:
Selecionar ou escrever um DTD
Criar documentos XML
Interpretar documentos XML
Exibir documentos XML
Para obter sucesso, qualquer aplicao necessita de um projeto bem estruturado.
Como o primeiro passo para fazer um documento XML escolher ou criar um DTD,
precisamos saber que esse documento define:
as tags de cada documento
quais tags podem conter outras tags
o nmero e a seqncia das tags

os atributos que as tags podem ter e seus valores
A criao de um DTD uma tarefa trabalhosa porque quanto mais amplo o esco-
po, maior a complexidade e tambm por ser complicado conseguir a concordncia
de todos os elementos envolvidos. Assim sendo, necessrio fazer uma anlise de
documentos antes de constru-los no formato XML. Aqui vo algumas perguntas
que podem ajudar nessa anlise:
Que elementos iro ocorrer?
Como se relacionam entre si?
Como os usurios iro interagir com eles?
Tags para documentos XML
medida em que formos tendo contato com as regras para se programar em XML,
vamos conhecendo como manipular entidades, seus elementos, atributos e valo-
res. Algo que voc deve saber desde j, que a linguagem XML sensitvel, ou
seja, ela difere maisculas de minsculas. Por exemplo: </ PessoaFisica> dife-
rente de </ PESSOAFISICA>.Vamos comear?
Tag inicial e final de um elemento
Primeiro muito importante saber como iniciar e finalizar as tags para delimitar o
contedo de um elemento. Voc vai perceber que muito semelhante ao HTML, o
que bem compreensvel j que ambas herdam as regras da SGML.
No exemplo que segue, o elemento rua tem como contedo o dado Pedra Bonita
e o elemento numero contm o dado 253.
1: <rua>Pedra Bonita</rua> <numero>253</numero>
Em linhas gerais: a tag de incio consiste no nome do elemento (rua e numero no
exemplo) entre os sinais de menor e maior; enquanto que a tag de fim o nome
do elemento iniciado com a barra ( / ) e tambm entre os sinais de menor e maior.
Note tambm que as tags dos elementos rua e numero, utilizados no exemplo
anterior, so criadas de acordo com uma suposta necessidade de quem est estru-
turando o documento XML. Como j mencionamos antes, isto quer dizer que a
linguagem XML no contm estas marcaes predefinidas. Ficou claro?!

Regras para os nomes dos elementos
isso mesmo! Pensou que poderia colocar nomes de qualquer maneira para os
elementos?! No bem assim. Mas tambm, as regras que existem so simples e
algumas at compreensveis. Veja:
No podemos colocar espaos no nome de um elemento.
O primeiro caractere do nome tem que ser uma letra ou o caractere de
sublinhado ( _ ), conhecido por muitos como underscore.
A partir do segundo caractere do nome, podem vir letras, o caractere de
sublinhado, dgitos, o hfen ( - ) ou o ponto ( . ).
No podem ser usados caracteres reservados da linguagem, como o & por
exemplo, tanto no nome quanto no contedo do elemento.
A tabela a seguir mostra exemplos de nomes permitidos e no permitidos para os
elementos.
Nomes de elementos
Vlidos Invlidos
<m> <945621>
<bmw-2052> <joo&maria>
<voc.net> <nome da empresa>
importante tambm observar algumas convenes. Por exemplo: em HTML
convencional usar as tags em maiscula. Em XML, j mais comum utilizar os
nomes dos elementos das tags em minsculo.
Existe ainda uma conveno muito utilizada em nomes de campos em bancos de
dados, que pode ser aplicada aos nomes dos elementos XML. Ela consiste em escre-
ver o nome do elemento com a primeira letra de cada palavra em maiscula e o
restante em minsculo; e , se o nome for composto por duas ou mais palavras, estas
devem estar juntas sem espao em branco. Veja um exemplo: NomeDaEmpresa.
Qual conveno voc deve usar? Fique vontade, mas seja coerente com a que
escolher procurando no mistur-las, uma vez que isto provocaria uma certa ba-
guna no seu documento XML.
Atributos dos elementos
Podemos ainda, como em HTML, colocar atributos na tag de incio de um elemen-
to. Um atributo vai possuir um nome e um valor, sendo que seu nome segue as
mesmas regras vistas para os nomes dos elementos. Veja um exemplo:

1: <rua semsaida=nao arborizada=sim>Pedra Bonita</rua> <numero> 253
</numero>
Na linha citada o elemento rua possui dois atributos, semsaida e arborizada
com os valores nao e sim, respectivamente. Note que os valores dos atributos
devem estar entre aspas, como em HTML.
Elemento sem contedo
Quando um elemento vazio, podemos escrev-lo de duas formas em XML. D
uma olhada no cdigo adiante:
1: <site href=http://www.toptc.com.br></site>
2: <site href=http://www.toptc.com.br />
Para a XML as duas formas esto corretas, portanto voc pode escolher.
Neste caso, elemento desprovido de contedo, o elemento ser includo no docu-
mento atravs do valor do seu atributo.
A rvore de um documento XML
Em documentos XML os elementos podem conter outros elementos dentro de si,
os quais, por sua vez, podem ter como contedo outros elementos ou texto, e por
a vai. Desta forma, para facilitar a viso de um documento XML, podemos v-lo
como se fosse uma rvore de elementos. rvore esta que pode ser to grande
quanto necessrio.
Para voc ter uma idia de como representar um documento em forma de rvore,
vamos faz-lo com o bloco de cdigo de exemplo que vimos no Bloco 2 XML, o
qual mostra a estrutura de um banco de dados de clientes. A Figura 7.1 mostra a
rvore para representar a estrutura deste documento. Faa um paralelo visual entre
o bloco de cdigo e a rvore para identificar os elementos dentro da estrutura.

Clientes
Cliente Cliente Cliente
Nome Nome RG RG Telef one Telef one
Comercial Residencial
Nome Telef one

Figura 7.1 Representao grfica da rvore do Bloco 2 XML.
Outro conceito fundamental para se entender o funcionamento da XML a identifi-
cao dada aos elementos dentro de uma rvore. Quando um elemento possui
outros dentro de si, ele identificado como pai, enquanto que cada um contido
dentro dele conhecido como filho. Na rvore do banco de dados, que vimos, os
elementos Comercial e Residencial so filhos do elemento Telefone que, por
sua vez, tem por pai um elemento Cliente.
Ao digitar as tags para criar um documento XML, temos que tomar o cuidado de
colocar elementos filhos totalmente dentro de seu pai. Para entender isto melhor,
compare a linha 1 com a linha 2 do bloco a seguir. Ambas tentam mostrar a mes-
ma coisa, porm, em um documento XML, apenas a linha 2 estaria construda cor-
retamente.
1: <Cliente><Nome>Pedro</Nome><Telefone>3568-5654</Cliente></Telefone>
2: <Cliente><Nome>Pedro</Nome><Telefone>3568-5654</Telefone></Cliente>
Elemento Raiz
A raiz de um documento XML um elemento nico, pai de todos os outros ele-
mentos dentro do documento. Um documento XML vlido s aceita uma raiz, a
qual deve ser um elemento de nome exclusivo dentro do documento.
Na rvore do Bloco 2 XML, exibida na Figura 7.1, o elemento raiz o de nome
Clientes. Note que ele o nico que possui este nome na rvore. Para que voc
tenha uma idia ainda mais clara, analise os blocos a seguir. Tente descobrir qual
deles est incorreto.
Bloco 3 XML
2: <Aluno>
3: <Nome>Pedro Augusto</Nome>

4: <Numero>12</Numero>
5: <NotaFinal>87</NotaFinal>
6: </Aluno>
7: <Aluno>
8: <Nome>Ivete Cardoso</Nome>
11: </Aluno>
Bloco 4 XML
2: <Classe Numero=02>
3: <Aluno>
7: </Aluno>
8: <Aluno>
12: </Aluno>
13: </Classe>
Ficou fcil, no mesmo?! O Bloco 3 est incorreto, pois no apresenta um ele-
mento raiz. J no Bloco 4 est claro que Classe o elemento raiz.
Declarao do documento XML
Voc deve ter percebido que, nos blocos de cdigo mais completos utilizados como
exemplos nesse captulo, a linha 1 sempre a mesma.
Esta linha apresenta a verso da linguagem XML e serve para identificar o docu-
mento como sendo um documento XML. Embora ela no seja obrigatria, reco-
mendvel que voc a utilize em todos, e ao faz-lo, ela dever ser a primeira linha
a ser digitada.

Comentrios em XML
Como qualquer outra linguagem, a XML permite que voc digite linhas de comen-
trios dentro do documento, as quais servem apenas para quem est lendo o do-
cumento, ou seja, elas no sero interpretadas pelo processador XML.
Em XML uma linha de comentrio inicia-se com o sinal de menor (<), seguido pelo
ponto de exclamao (!) e dois hfens (--). No meio vem o texto do comentrio e
para finalizar vem dois hfens (--) e o sinal de maior (>). A sintaxe genrica seria a
seguinte: 
Veja um exemplo prtico:
Bloco 5 XML
2: 
3: <Classe Numero=02>
4: <Aluno>
8: </Aluno>
9: 
10: <Aluno>
14: </Aluno>
15: </Classe>
No bloco de cdigo anterior, as linhas 2 e 9 no seriam interpretadas pelo proces-
sador. Note tambm que elas aparecem antes ou depois da marcao XML. as-
sim que deve ser. Um comentrio no pode aparecer no meio da marcao.
Fazendo referncia a entidades em XML
Uma entidade em XML um grupo de dados que pode ser tratado como uma uni-
dade. Entidades podem ser usadas para fazer referncia a recursos que no sejam
da XML (imagens por exemplo) ou a um arquivo externo que guarda partes de um
documento XML.

Nos documentos XML, em alguns casos, utilizaremos entidades predefinidas pela
XML, em outros, chamaremos entidades declaradas em um DTD (algo que apren-
deremos a fazer na prxima seo).
Para fazer referncia a uma entidade, temos que colocar o seu nome entre o ca-
ractere & e um sinal de ponto-e-vrgula (;). A linha a seguir exibe um exemplo que
chama a entidade de nome empresa.
1: <NomeFantasia> &empresa; </NomeFantasia>
Se em um DTD tivssemos declarado a entidade empresa e atribudo o valor Top
Training Center a ela, ento o browser XML interpretaria a linha anterior exata-
mente como a linha mostrada a seguir:
1: <NomeFantasia> Top Training Center </NomeFantasia>
J conseguiu perceber uma das vantagens das entidades? Se fizermos referncia a
uma determinada entidade vrias vezes em um ou mais documentos XML e preci-
sarmos fazer alguma alterao em seu valor, teremos que alter-lo apenas uma
vez no DTD.
Entidades Predefinidas
Imagine que voc precise digitar alguns caracteres especiais (aqueles reservados
pela linguagem XML) em um documento XML, tais como & < > ; (aspas) (a-
pstrofo). Como voc vai fazer, j que o interpretador XML ir v-los como marca-
o XML?
Para resolver esse problema, dentro da XML existem entidades que foram defini-
das justamente para substituir estes caracteres no contedo ou atributo de um
elemento. A tabela a seguir mostra as entidades predefinidas:
Entidades Predefinidas
Nome Valor Caractere Referncia
quot Aspas "
apos Apstrofo '
gt > Sinal de maior >
lt < Sinal de menor <
amp & E comercial &

Quando voc tiver que usar um desses caracteres no valor do atributo ou no con-
tedo de um elemento, voc ter que substitu-lo pela referncia a uma das enti-
dades vistas na tabela. Por exemplo: imagine que ser necessrio digitar a expres-
so matemtica 40 > 39 como contedo do elemento equao. A forma correta
de inseri-lo no documento XML seria a seguinte:
1: <equao> 40 > 39 </equao>
Incluindo Dados de Caractere (Seo CDATA)
Sem dvida a entidade predefinida uma soluo importante. Mas voc j pensou
em fazer um documento XML cheio de operaes matemticas, ou frmulas da
fsica, ou ainda cdigos de uma linguagem de programao ou equaes da qumi-
ca? D para ver o quanto seria trabalhoso ficar digitando < no lugar de <, >
no lugar de > e por a vai...
Atravs de uma seo CDATA (abreviao de Character Data, que significa Dados
de Caractere) podemos facilitar bastante a tarefa descrita antes. No documento
XML ela se inicia com a marcao <[CDATA[ e termina com ]]>.
O exemplo a seguir utiliza uma seo CDATA para incluir instrues de programao em
Visual Basic, no documento XML. No se preocupe em entender a programao VB,
nosso objetivo no momento compreender a versatilidade de uma seo CDATA.
Bloco 6 XML
2: <FuncaoVB>
3: <[CDATA[
4: Function Temper(t)
5: If t > 36 Then
6: MsgBox Voc est com febre pois sua temperatura atual & t
7: Else
8: MsgBox Sua temperatura atual & t
9: End If
10: End Function ]]>
11: </FuncaoVB>
Observe que, nas linhas 5, 6 e 8 do Bloco 6 XML, pde-se utilizar os caracteres >
e & naturalmente, pois eles esto entre as marcaes <[CDATA[ e ]]>.
Agora que voc sabe o que uma seo CDATA, j podemos lhe informar que os
textos dentro de um elemento so chamados PCDATA (abreviao de Parsed
Character Data, que significa Dados de Caractere Desmembrados). Como vimos

anteriormente, o contedo de um elemento (ou PCDATA) no pode conter carac-
teres de marcao.
PI (Instrues de Processamento)
Assim como possvel na HTML, inserir instrues de script (como J avaScript ou
VBScript), uma Instruo de Processamento uma abertura deixada pelo W3C,
para que seja possvel inserir instrues que no sejam da XML nos documentos.
A primeira linha do documento XML, a declarao, uma instruo de processa-
mento. No exemplo a seguir adicionamos um novo atributo comumente encontra-
do na declarao dos documentos, seu nome encoding e serve para especificar
qual a codificao (conjunto de caracteres padro) a ser usada no documento.
1: <?xml version=1.0 encoding=ISO-8859-1?>
Neste exemplo o valor ISO-8859-1 do atributo encoding, indica que a codifica-
o usada no documento ser a Latin-1, que contm o conjunto de caracteres
necessrio para grande parte dos idiomas.
Atributos Definidos
Em XML existem dois atributos j definidos para serem usados nas tags dos ele-
mentos: xml: lang (que indica o idioma usado na escrita do contedo do elemen-
to) e xml: space (que serve para controlar os espaos em branco dentro do con-
tedo do elemento).
O exemplo a seguir mostra como podemos usar o atributo especial XML: lang.
1: <texto1 xml: lang=pt-BR>Teia de Alcance Mundial</texto1>
2: <texto2 xml: lang=en-US>World Wide Web</texto2>
Na linha 1, o valor pt-BR do atributo, indica que o portugus do Brasil o idioma
usado no contedo do elemento texto1. J o valor en-US do atributo, na linha
2, refere-se ao idioma ingls dos Estados Unidos.
O atributo especial XML: space pode receber dois valores. Sendo o valor preser-
ve, o processador XML dever manter todos os espaos no contedo do elemento
e nos dos seus filhos. Caso o valor seja default, o processador XML usar o tra-
tamento padro para os espaos. A linha a seguir mostra um exemplo que utiliza o
valor preserve para este atributo.
1: <paragrafo xml: space=preserve>Um dois trs quatro cinco</paragrafo>

Conceitos Iniciais sobre DTD
Como vimos anteriormente, uma DTD uma Declarao de Tipo de Documen-
to, isto , ela um documento onde so declarados os elementos e seus filhos,
juntamente com os contedos, definidos os atributos e valores para serem usados
em um documento XML.
Nosso objetivo aqui ser mostrar alguns aspectos da sintaxe de uma DTD para que
voc veja que no to complicado modelar um documento XML. Voc criar ago-
ra um documento XML e depois a sua DTD. Em seguida, explicaremos cada parte
da DTD criada.
Digite o bloco de cdigos a seguir no Bloco de Notas do Windows e salve o
arquivo com o nome de ListaCliente.xml.
Bloco 7 XML
1: <?xml version=1.0 encoding=ISO-8859-1?>
2: 
3: <!DOCTYPE clientes SYSTEM ListaCliente.dtd>
4: 
5: <clientes>
6: <cliente>
7: <nome> Paulo Augusto de Oliveira</nome>
8: <endereco>
9: <rua>Violinos, 106</rua>
10: <bairro>Califrnia</bairro>
11: <cidade>Matozinhos</cidade>
12: <estado>Minas Gerais</estado>
13: <cep>30.130-120</cep>
14: </endereco>
15: <telefone comercial=no>3596-7621</telefone>
17: <email href=mailto:paulao@b2netword.com/>
18: </cliente>
19: <cliente>
20: <nome><prenome>Josefa</prenome><sobrenome>de
Albuquerque Costa</sobrenome></nome>
21: <endereco>
22: <rua>Alagados do Barreiro, 158</rua>
23: <cidade>Turucinara</cidade>
24: <estado>So Paulo</estado>
25: </endereco>

27: <email href=mailto:jac@connection.com.br/>
28: </cliente>
29: </clientes>
Quando um documento XML utiliza uma DTD, esta deve ser referenciada dentro do
mesmo. O documento ListaCliente.xml, que voc acaba de fazer, utiliza uma
DTD chamada ListaCliente.dtd, a qual evocada na linha 3 do cdigo.
Note que a sintaxe genrica da linha que faz a conexo com a DTD :
<!DOCTYPE nome do elemento raiz SYSTEM nome do arquivo.dtd>
Neste momento abra o arquivo ListaCliente.xml no Internet Explorer 5 ou superior.
Observe que ser exibido um erro devido ao fato de no existir ainda o documento
DTD referenciado na linha 3, tal como mostra a figura a seguir:

Figura 7.2 Erro no Internet Explorer ao abrir o arquivo ListaCliente.xml.
Tranqilo por enquanto, no ? Vamos agora DTD que define a estrutura do
documento XML. Digite o bloco de cdigos a seguir no Bloco de Notas do Windows
e, a princpio, salve-o com o nome de ListaCliente.html. Caso esteja achando
estranha a extenso .html, voc est coberto de razo. O problema que o Bloco
de Notas do Windows no aceitou a extenso .dtd diretamente, por isso vamos
salvar a DTD com a extenso .html e depois vamos renomear o arquivo para Lis-
taCliente.dtd. Mos obra:

Bloco 8 XML
1: <?xml encoding=ISO-8859-1?>
2: 
3: <!ELEMENT clientes (cliente+)>
4: 
5: <!ELEMENT cliente (nome+, endereco+, telefone+, sexo*, email+)>
6: 
7: <!ELEMENT nome (#PCDATA | prenome | sobrenome)*>
8: <!ELEMENT prenome (#PCDATA)>
9: <!ELEMENT sobrenome (#PCDATA)>
10: 
11: <!ELEMENT endereco (rua+, bairro, cidade+, estado+, cep?)>
12: <!ELEMENT rua (#PCDATA)>
13: <!ELEMENT bairro (#PCDATA)>
14: <!ELEMENT cidade (#PCDATA)>
15: <!ELEMENT estado (#PCDATA)>
16: <!ELEMENT cep (#PCDATA)>
17: 
18: <!ELEMENT telefone (#PCDATA)>
19: <!ATTLIST telefone comercial (sim | nao) sim>
20: <!ELEMENT sexo (#PCDATA)>
21: 
22: <!ELEMENT email EMPTY>
23: <!ATTLIST email href CDATA #REQUIRED gratuito (sim | nao) sim>
Tendo digitado o Bloco 8 XML, agora hora de mudar a extenso do arquivo. Ele
precisa ter a extenso .dtd, para isso faa o seguinte:
Feche o arquivo e o localize no Windows Explorer.
Acione o menu Exibir e clique em Opes de pasta...
Clique na orelha Modo de exibio.
Certifique-se de que a caixa de verificao Ocultar extenses para os tipos
de arquivos conhecidos esteja desabilitada e clique em OK.
Agora renomeie o documento ListaCliente.html para ListaCliente.dtd.
Responda Sim pergunta que o Windows pode lhe fazer.
Atravs do Internet Explorer 5 ou superior, abra o arquivo ListaCliente.xml
para ver se deu tudo certo. O documento dever ser exibido semelhante
figura a seguir:

Figura 7.3 ListaCliente.xml no I nternet Explorer usando o arquivo DTD.
Agora veremos cada parte da DTD que criamos para entend-la.
Declarao de elemento
A sintaxe genrica para se declarar um elemento :
<!ELEMENT Nome do elemento Contedo do elemento>
Nesta sintaxe, a parte Nome do elemento segue as mesmas regras que vimos
quando aprendemos a dar nomes para os elementos. J a parte Contedo do
elemento, relaciona os filhos que sero aceitos pelo elemento declarado. Na li-
nha 3 do arquivo DTD, voc pode ver a declarao do elemento raiz clientes.
3: <!ELEMENT clientes (cliente+)>
Aqui o sinal de mais (+) logo aps o filho cliente, indica que esse filho pode apare-
cer uma ou mais vezes dentro do elemento raiz.
Contedos especiais de um elemento
Quando desejamos mostrar que um elemento pode conter texto, usamos a pala-
vra-chave #PCDATA (dados de caractere desmembrados). A linha 12 um e-
xemplo bem claro:

12: <!ELEMENT rua (#PCDATA)>
Caso seja necessrio declarar que um elemento ser vazio, usamos a palavra-
chave EMPTY. D uma olhada na linha 22, mostrada a seguir:
22: <!ELEMENT email EMPTY>
Indicadores de ocorrncia e Conectores
Indicadores de ocorrncia, como sugere o nome, so caracteres utilizados para
indicar como os filhos devero ocorrer dentro de um elemento declarado. Os ca-
racteres so o sinal mais (+), o asterisco (*) e o ponto de interrogao (?).
J os conectores so caracteres que servem para separar os filhos dentro do con-
tedo do elemento e indicar a ordem em que podem aparecer. So conectores o
caractere vrgula (,) e a barra vertical (|).
A tabela a seguir mostra o significado de cada caractere e em qual linha do docu-
mento DTD pode-se ver um exemplo.
Caractere Significado Exemplo na linha
Indicadores de ocorrncia
+
O elemento pode ocorrer uma ou mais
vezes dentro de seu pai.
3
*
O elemento pode ocorrer zero ou mais
vezes dentro de seu pai.
5
?
O elemento pode ocorrer uma ou ne-
nhuma vez dentro de seu pai.
11
Nenhum
O elemento pode ocorrer apenas uma
vez dentro de seu pai.
11
Conectores
,
Os elementos esquerda e direita do
caractere aparecem nessa ordem no
documento.
5
|
Somente o elemento da esquerda ou o
da direita do caractere, aparecer no
documento.
7

Lista de Atributos do elemento
Quando um elemento possuir atributos, esses tambm precisam ser declarados na
DTD. Veja a sintaxe:
<!ATTLIST Nome do elemento Nome do atributo (Valor1 | Valor2 |
Valor3) ValorPadro>
A linha 19 exibe a declarao do atributo comercial para o elemento telefone.
19: <!ATTLIST telefone comercial (sim | nao) sim>
Quando um elemento possui mais de um atributo, podemos agrupar as declara-
es desses atributos. Por exemplo, a linha 23 da nossa DTD mostra a declarao
dos atributos href e gratuito para o elemento email.
23: <!ATTLIST email href CDATA #REQUIRED gratuito (sim | nao) sim>
Na declarao anterior, a palavra-chave #REQUIRED faz com seja obrigatria a
insero do valor do atributo href.
H, sem dvida, muitos outros conceitos envolvendo as DTDs que seriam necess-
rios para algum se tornar um especialista em criar uma. Mas isto vai alm do
nosso objetivo que simplesmente mostrar que a coisa no to complicada
quanto parece.
Embora realmente no seja difcil elaborar uma DTD, , no mnimo, muito traba-
lhoso. Para lhe poupar um pouco de tempo, voc tem duas alternativas:
1- Utilizar uma DTD j existente. Existem muitas disponveis na Internet e a-
daptar uma ou outra necessidade do seu documento ser uma tarefa
menos custosa do que elaborar uma por inteiro. Tambm certo que nem
sempre ser possvel fazer isso. Nesse caso, pacincia... Faa voc mesmo.
2- Na Internet voc tambm pode encontrar ferramentas (softwares) pr-
prias para a criao de sua DTD. Algumas dessas ferramentas podem
ser encontradas nos sites www.lumeria.com, www.microstar.com e
www.icon-is.com.
Conceitos Iniciais sobre XSL
Ao abrir o documento ListaCliente.xml no Internet Explorer 5 ou superior, voc
ver a rvore do documento XML, ou seja, a hierarquia dos elementos com seus
contedos e atributos. Imagine que voc queira visualiz-lo como se estivesse
vendo uma pgina da Web. Em outras palavras: suponhamos que seja necessrio

format-lo em HTML para que o contedo dos elementos apaream organizados
em uma tabela, por exemplo. Nesse caso teremos que usar a linguagem XSL, pois
um dos seus usos mais comuns justamente formatar um documento XML utili-
zando tags HTML aninhadas com comandos prprios da linguagem.
XSL uma abreviao para XML Stylesheet Language (Linguagem de Folha de
Estilo para XML) e ela , na realidade, dividida em duas partes: XSLT (XSL Trans-
formation) e XSLFO (XSL Formating Objects). Os comandos que aprenderemos
aqui pertencem XSLT.
Digite o Bloco 9 XML, visto a seguir, no Bloco de Notas do Windows e salve o
arquivo com o nome de ListaCliente.xsl.
Bloco 9 XML
2: <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
3: <BODY BGCOLOR="#99FFCC">
4: <p align="center"><font face="Verdana" size="6" color="#0000FF"><b>Lista de
5: Clientes Especiais</b></font></p>
6: <p></p><TABLE BORDER="1" CELLPADDING="5">
7: <TR ALIGN="CENTER" BGCOLOR="#000000">
8: <TD BGCOLOR="#008000"><FONT FACE="Arial"
9: COLOR="#FFFFFF"> <B>Cliente</B></FONT></TD>
11: COLOR="#FFFFFF"> <B>Endereco</B></FONT></TD>
13: COLOR="#FFFFFF"> <B>Bairro</B></FONT></TD>
15: COLOR="#FFFFFF"> <B>Cidade</B></FONT></TD>
16 <TD BGCOLOR="#008000"><FONT FACE="Arial"
17: COLOR="#FFFFFF"> <B>CEP</B></FONT></TD>
19 COLOR="#FFFFFF"> <B>Telefone</B></FONT></TD>
20: </TR>
21: <xsl:for-each select="clientes/cliente">
22: <TR>
23: <TD>
24: <xsl:value-of select="nome"/>
25: </TD>
26: <TD>
27: <xsl:value-of select="endereco/rua"/>
28: </TD>

29: <TD>
30: <xsl:value-of select="endereco/bairro"/>
31: </TD>
32: <TD>
33: <xsl:value-of select="endereco/cidade"/>
34: </TD>
35: <TD>
36: <xsl:value-of select="endereco/estado"/>
37: </TD>
38: <TD>
39: <xsl:value-of select="endereco/cep"/>
40: </TD>
41: <TD>
42: <xsl:value-of select="telefone"/>
43: </TD>
44: </TR>
45: </xsl:for-each>
46: </TABLE>
47: </BODY>
48: </HTML>
Muito bem! Aps ter salvado este documento XSL na mesma pasta que contm os
arquivos XML e DTD, precisamos agora dizer ao ListaCliente.XML que ele deve
buscar informaes sobre sua formatao dentro do documento ListaCliente.xsl.
Para isso, teremos que acrescentar uma linha de comando especial no documento
XML. Vamos em frente:
Abra o arquivo ListaCliente.XML atravs do Bloco de Notas do Windows.
Digite as duas linhas de comando mostradas a seguir aps a linha 3:
1: 
2: <?xml-stylesheet type="text/xsl" href="ListaCliente.xsl"?>
Salve a alterao feita no documento XML e em seguida abra-o no Inter-
net Explorer 5 ou superior. Voc ver que o documento ser exibido seme-
lhante Figura 7.4.
Est na hora de analisarmos o documento ListaCliente.xsl para entendermos
cada parte dele. Ao digit-lo voc deve ter percebido que, boa parte das tags (pelo
menos as que deram mais trabalho), so simplesmente tags HTML aprendidas no
Captulo 4.

Figura 7.4 ListaCliente.xml no Internet Explorer usando os arquivos DTD e XSL.
Declarao XSL
As duas primeiras linhas constituem a declarao do documento XSL, sendo que a
linha 1 no obrigatria.
2: <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
A linha 2 obrigatria e, neste exemplo, ela sofreu uma variao para se adaptar
nossa necessidade. Sua sintaxe normalmente usada nos documentos XSL a
seguinte:
1: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
2:
N: </xsl:stylesheet>
Formatao HTML
Analise atentamente o bloco de cdigo que vai da linha 3at a linha 14. Ele
puramente HTML.

3: <BODY BGCOLOR="#99FFCC">
4: <p align="center"><font face="Verdana" size="6" color="#0000FF"><b>Lista de
5: Clientes Especiais</b></font></p>
6: <p></p><TABLE BORDER="1" CELLPADDING="5">
7: <TR ALIGN="CENTER" BGCOLOR="#000000">
8: <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF">
9: <B>Cliente</B></FONT></TD>
11: <B>Endereco</B></FONT></TD>
13: <B>Bairro</B></FONT></TD>
15: <B>Cidade</B></FONT></TD>
17: <B>Estado</B></FONT></TD>
19: <B>CEP</B></FONT></TD>
20: < BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF">
21 <B>Telefone</B></FONT></TD>
22: </TR>
Esse cdigo HTML, em uma pgina Web, geraria uma formatao incluindo uma
primeira linha de tabela contendo os nomes dos cabealhos das colunas, tal como
mostra a Figura 7.5:

Figura 7.5 Formatao gerada em pgina Web pelo bloco de cdigo HTML.
Agora continuemos a esmiuar nosso documento XSL.
Realizando um Loop
Observe no documento as linhas 14, 15 e 16:
14: </TR>

16: <TR>
A parte HTML fcil para voc: a tag </ TR> na linha 14 indica o final daquela
primeira linha da tabela; a tag <TR> na linha 16 inicia a prxima linha na tabela.
Devido ao fato de termos escolhido uma tabela para organizar os elementos do
documento XML, para cada elemento cliente dentro do elemento raiz (clientes)
dever ser gerada uma linha na tabela para exibir os dados desse elemento (no
caso, os dados so os elementos filhos de cada elemento cliente).
por isso que a linha 15 contm o comando <xsl:for-each select=clientes/cliente>.
For each significa Para cada e o comando inteiro diz ao documento XML o seguin-
te: Para cada elemento cliente encontrado dentro do elemento raiz clientes(...).
As reticncias na frase substituem os comandos seguintes ao comando XSL. No
toa que o primeiro comando seguinte justamente a tag <TR> de incio de uma linha.
Observe agora as linhas 38 e 39:
38: </TR>
39: </xsl:for-each>
A tag </ TR> na linha 38 finaliza a linha iniciada logo aps o comando <xsl:for-
each select=clientes/ cliente>, enquanto que o comando </xsl:for-each> na
linha 39 finaliza o prprio comando XSL. O conjunto todo exibido a seguir:
14: </TR>
16: <TR>
... ...
38: </TR>
39: </xsl:for-each>
Esse conjunto faz surgir uma nova linha na tabela enquanto existir um elemento
cliente dentro do elemento raiz clientes.
Exibindo o contedo de um elemento
Lembre-se de que as tags <TD> </ TD> fazem surgir uma clula dentro de uma
linha da tabela. Observe que, entre as tags <TR> da linha 16 e a </ TR> da
linha 38, existem sete pares <TD> </ TD>, justamente o mesmo nmero de
clulas criadas na primeira linha da tabela. Note tambm que, dentro de cada par
<TD> </ TD>, existe o comando XSL <xsl:value-of select="expresso"/>.

Este comando XSL serve para exibir o contedo do elemento especificado em ex-
presso. Por exemplo: o comando <xsl:value-of select="nome"/> mostra o contedo
do elemento nome, o comando <xsl:value-of select="endereco/rua"/> mostra o
contedo do elemento rua que filho do elemento endereco, e assim por diante.
Finalizando o documento XSL
Por fim, vemos as ltimas linhas do documento:
40: </TABLE>
41: </BODY>
42: </HTML>
Elas servem simplesmente para fechar as tags que principiaram a tabela, o corpo e
o incio da pgina Web, respectivamente.
Aqui termina nossa proposta de realizar um contato inicial entre voc e a XML. Mas
isso no deve acontecer com seus estudos sobre ela, j que, como mencionamos
anteriormente, vrias tecnologias esto e continuaro sendo criadas para dar su-
porte a esta linguagem. Voc poder pesquisar sobre a relao entre a XML e ou-
tra tecnologia que voc j conhea.
De fato, o grande lance da XML que ela no foi criada para resolver sozinha uma
determinada soluo. Seu poder est justamente em sua capacidade de interagir
com outras ferramentas e linguagens j disponveis no mercado da informtica,
tais como HTML, Flash, ASP, J avaScript, PHP, dentre outras.
Mas chega de papo! Passemos para o prximo captulo que apresenta as ferra-
mentas para o desenvolvimento na Web.
123

Parabns, se voc chegou at aqui porque j possui conhecimentos suficientes
para comear a fazer tudo o que programou, diretamente em uma ferramenta que,
na maior parte das vezes, ser de grande ajuda.
Vrias so as tarefas em HTML (ou mesmo em J avaScript) desgastantes para o
programador. Fazer tabelas, por exemplo, uma tarefa de pacincia. Criar frames
e posicion-los na tela da forma como deveriam ficar quase um parto. Para sim-
plificar nosso trabalho temos ferramentas como o FrontPage e o Dreamweaver.
Escolhemos estas por serem as preferidas no mercado.
Dizer qual dos dois o melhor uma tarefa complicada, pois depender de sua
habilidade. O FrontPage possui um ar de simplicidade maior do que o Dreamwea-
ver. No entanto, aprendendo um deles o outro ficar extremamente simples, pois o
princpio bsico o mesmo.
FrontPage 2000
Sem dvida nenhuma, entender como funcionam as tags do HTML de vital im-
portncia para quem quer ser um desenvolvedor Web. Entretanto, existem ferra-
mentas que iro agilizar seu trabalho. Tarefas complexas de serem resolvidas dire-
tamente na programao HTML se tornam brincadeira diante de uma ferramenta
como o FrontPage 2000.
O FrontPage acompanha o Microsoft Office na sua verso Premium, no podendo
ser vendido separadamente. Tudo o que o FrontPage ir fazer tornar o seu tra-
balho mais fcil. Enquanto voc arrasta os componentes ou escolhe opes de
formatao nos menus, ele gera automaticamente todo o cdigo em HTML.
Ao abrir o FrontPage voc ter uma tela como a mostrada na Figura 8.1:

Figura 8.1 Tela principal do FrontPage 2000. Voc ir utiliz-lo como se estivesse no
Word. Entretanto, todo o cdigo em HTML pode ser visto clicando sobre a guia HTML, na
parte inferior da janela.
O contedo de uma pgina
Uma pgina deve ser atraente (tanto visualmente quanto no seu contedo). Sem
dvida nenhuma, se voc observar estes dois aspectos, sua pgina ter sucesso,
mas algumas regrinhas podem ser seguidas:
Siga sempre os objetivos definidos no projeto do site.
Tenha sempre em mente o perfil do usurio do site.
Utilize pginas que possam ser carregadas rapidamente.
No coloque muita informao em apenas uma pgina.
Torne a informao bvia.
Teste, teste, teste e teste novamente.
Projetando o que ser criado
Desenvolver para a Web como construir uma casa. Voc deve fazer o projeto de
tudo o que ser construdo. imprescindvel que seja feita uma anlise junto s
pessoas que solicitaram a construo do site (cliente, diretor, etc). Elas iro dizer
justamente o que pode ou deve conter no site. Obviamente que sua experincia na
Internet poder orient-lo sobre a melhor forma de expor um contedo. Geralmen-
Ferramentas para Desenvolvimento na Web 125

te o cliente ir se empolgar a ponto de querer colocar todas as fotos dos seus
1500 produtos, mas voc dir que isto visualmente impraticvel.
O FrontPage possui uma ferramenta que ir lhe auxiliar no momento do projeto.
Trata-se de um organizador de todo o contedo do site. Com ele iremos criar uma
rvore que ir representar a hierarquia das pginas do site.
Nesta etapa voc ir criar um site para uma escola de informtica (Top Training
Center, claro) e, no decorrer do desenvolvimento, aprender os recursos dispo-
nveis no software.
A estrutura do site
A estrutura da Figura 8.2 representa o que precisamos em termos de site. Nela
esto contidas todas as pginas a serem criadas, bem como a hierarquia entre
elas.

Figura 8.2 Estrutura do site e hierarquia entre as pginas.
Esta hierarquia ser gerenciada pelo FrontPage. Em cada uma das pginas apre-
sentadas iremos utilizar um recurso novo, o que ir dar uma dinmica muito inte-
ressante ao seu aprendizado, alm do mais, voc poder utilizar este mesmo sis-
tema no desenvolvimento de outras pginas. A seguir voc ir aprender como criar
esta estrutura no FrontPage.

Criando uma nova Web
Uma Web nada mais do que uma pasta em seu winchester que possuir algumas
caractersticas especiais. O prprio FrontPage se encarregar de colocar estes atri-
butos. Basta voc fazer o seguinte:
1. Abra o FrontPage
2. Clique no menu Arquivo, Novo, Web
A prxima janela ir aparecer.

Figura 8.3 Digite um local onde dever ser armazenado o seu novo site. Aps isto uma
nova pasta criada e seus arquivos sero todos armazenados nela.
3. Clique em OK.
Aps clicar em Criar a nova pasta da Web, uma pgina em branco ir aparecer.
Nela voc j poder criar o site.

Figura 8.4 Aqui voc cria o seu site como se estivesse utilizando o Word. No lado esquerdo
voc tem acesso a informaes como: pastas e arquivos contidos no seu site, estrutura dos links,
tarefas a serem realizadas, entre outras. Futuramente voc aprender sobre cada uma delas.
Para ativar ou desativar o menu lateral, basta clicar no menu Exibir, Barra de
modos de exibio.
Criando a estrutura do site
Agora iremos passar para o FrontPage a estrutura planejada para nosso site. Cli-
que no menu lateral em Navegao. Se ele no estiver presente, clique no menu
Exibir, Barra de modos de exibio.

Figura 8.5 Clique em Arquivo, novo, pgina. Altere o nome de Home Page para TOP
TRAINING clicando sobre ela.

Esta nossa primeira pgina. Passe para o modo de Pastas e veja que o primeiro
arquivo j foi criado.
Clicando em Relatrios voc ver que j houve alterao no seu contedo, ou
seja, os relatrios so dinmicos e prestam um resumo de toda a sua atividade de
desenvolvimento.

Figura 8.6 Veja nos relatrios que tivemos alterao em Todos os arquivos: 1.
Este item apresenta o total de arquivos que foram criados. Mas vamos conti-
nuar...
Inserindo todas as pginas
Volte para o modo de navegao, iremos criar os outros arquivos que faro parte
de nossa Home Page. Para criar as pginas basta clicar com o boto do lado direito
do mouse sobre a pgina superior que ir chamar a inferior. Por exemplo:

Figura 8.7 A pgina Cursos inferior a TOP TRAINING. Para cri-la, basta clicar com
o boto direito sobre a pgina superior, em seguida sobre Nova pgina. Altere o nome da
nova pgina para que fique de acordo com o projeto inicial.
Faa isto com todas as pginas para que fiquem como a especificao inicial do
projeto. Seguir o que est proposto no projeto to importante quanto montar o
site.
Aps esta etapa voc j poder navegar pelas opes do menu lateral. Veja quan-
ta coisa j foi feita.

Figura 8.8 Esta a estrutura final de navegao do nosso site.

Conhecendo o FrontPage
Neste ponto iremos comear o trabalho de webmaster em nossa pgina. Trabalha-
remos em cada uma das pginas, uma de cada vez.
Para editar a primeira pgina clique duas vezes sobre ela (a TOP TRAINING). Ela
nossa pgina inicial, deveremos deix-la no capricho para que os visitantes tenham
uma boa impresso de nosso site.
Para que no tenhamos problemas com a visualizao, feche o menu lateral cli-
cando em: Exibir, barra de modos de exibio. A tela ficar como mostrada a
seguir:

Figura 8.9 O grande facilitador do FrontPage que voc pode montar a pgina e j
sentir como ela ir ficar.
Ela possui uma aparncia semelhante a dos programas da Microsoft, o que tornar
fcil o seu entendimento. Opes como abrir, fechar, copiar, sublinhar, negrito,
centralizar, etc. funcionam de maneira idntica ao Word.
Agora poderemos iniciar nossos trabalhos. Todo o cdigo em HTML ser gerado
pelo prprio editor e s teremos que edit-lo como se estivssemos utilizando o
Word. Clicando em HTML na parte inferior da tela voc tem acesso aos cdigos
que o FrontPage est criando.

Cores do fundo de tela
A primeira coisa a definir o fundo que ser utilizado. Para especific-lo, siga os
passos a seguir. Se a pgina principal no estiver aberta, abra-a agora.

Figura 8.10 Clique com o boto direito do mouse sobre o fundo da tela. Clique em
propriedades da pgina. Na caixa plano de fundo escolha a cor desejada para o plano
de fundo. Clique em OK para encerrar.
Perceba que uma srie de recursos podero ser utilizados. Por exemplo, clicando
em Figura de plano de fundo voc poder escolher uma Figura para ficar no
fundo da pgina. Vrias outras opes podem ser configuradas na janela de pro-
priedades da pgina. Experimente.
Inserindo e formatando textos
Logicamente teremos que inserir textos em nossas pginas, para isto, basta escre-
ver na posio desejada. Voc poder centralizar, alinhar direita ou esquerda,
colocar ITLICO, NEGRITO ou SUBLINHADO da mesma maneira como faz nor-
malmente no Word.
Coloque nosso nome no topo da pgina TOP TRAINING CENTER, na cor azul em
negrito e itlico, j que esta ser uma pgina comercial da nossa empresa. Logo
abaixo do nome da empresa, crie com uma fonte menor uma segunda linha com a
chamada principal:
CURSOS DO J EITO QUE VOC PRECISA

Perceba que at agora no necessitamos digitar nenhum cdigo em HTML. Mas
caso voc precise, poder faz-lo clicando na opo HTML na parte inferior da tela,
prximo barra de status.

Figura 8.11 Salve seu trabalho, que a partir de agora iremos increment-lo.
Inserindo linhas horizontais
Para inserir linhas horizontais clique no menu Inserir e em seguida na opo Li-
nha horizontal. Experimente colocar linhas em sua pgina e veja os efeitos.
Linhas so teis quando necessitamos separar textos que so independentes entre
si, como a descrio de produtos, detalhes de um curso, etc.

Figura 8.12 Para alterar as caractersticas da linha inserida, clique com o boto
direito do mouse sobre ela e acesse a opo Propriedades da linha horizontal.

Nesta tela voc controla a cor da linha, o tamanho e o seu alinhamento. O tama-
nho da linha pode ser medido em Pixels ou em Porcentagem da tela. Aps alterar
como desejar, clique em OK.
Criando os primeiros links
Existe nas pginas da Internet um grande fascnio pela possibilidade de se locomo-
ver por diversos sites de forma instantnea. Isto se d graas ao hyperlink que
pode ser um texto ou imagemque, ao ser clicado, transporta o internauta para
outro site criando assim uma rede de propores mundiais.
De acordo com o nosso projeto, nossa primeira pgina ter links para outras, que
so:
Cursos | Clientes | Histrico | Fale conosco | Franquias
Para isto digite o texto anterior logo depois da linha que voc inseriu (linha hori-
zontal).
Selecione a primeira palavra que conter o link. Comece por Cursos.
Clique no menu Inserir, em seguida sobre Hiperlink.
Clique no arquivo que ser chamado: Curso.htm.
Agora a palavra j est com o link pronto. Repita o processo para os demais links e
suas respectivas pginas. Sempre que precisar, recorra ao projeto inicial para re-
lembrar a hierarquia das pginas.
Inserindo um letreiro digital
Um letreiro digital deixar sua pgina com um requinte valioso. Letreiros devero
conter frases que causem impacto no internauta. Elas podero ter uma definio
dos servios da empresa, ou dos assuntos que voc gosta (no caso de um site
pessoal). Vamos colocar este letreiro logo abaixo dos links; para isto, posicione o
cursor no final da pgina e faa o seguinte:
Clique no menu Inserir, Componente
Selecione letreiro digital
O texto que dever aparecer :
Horrios flexveis, atendimento individual - Agora voc achou o que voc precisa...

Figura 8.13 Voc poder experimentar vrios parmetros como:
direo, velocidade, alinhamento, largura, altura, entre outros.
Para isto basta acessar as propriedades do letreiro.
Veja como nossa pgina dever estar:

Figura 8.14 Logicamente que no precisa estar exatamente igual. I sto ir depender das
fontes que voc utilizou, cores e posicionamento na tela.
Criando mapas clicveis
Mapas clicveis so links em figuras que faro o acesso a outras pginas ou a ou-
tros documentos. Os visitantes de um site podem dar um clique em um link e sal-
tar at o lugar para o qual ele aponta; essa localizao representada como uma
URL (http://www...). possvel criar links para arquivos, fotos, e-mail, etc.

Vamos inserir uma Figura do clipart em nossa pgina inicial. Para isto siga os pas-
sos:
Posicione-se no incio da pgina.
Clique no menu Inserir, Figura, Clip-art.
Escolha a Figura.
Clique com o boto direito sobre ela e escolha Inserir.
Redimensione a Figura para que fique no tamanho adequado.

Figura 8.15 Aps inserir a Figura, selecione-a e clique sobre o cone de rea interativa
(em forma de retngulo). Em seguida selecione a rea sobre a Figura que ir conter o link.
Agora escolha o arquivo para o qual o link ir apontar.
Para ver como seu trabalho est ficando, clique em Arquivo, Visualizar no na-
vegador.
Trabalhando com tarefas
A criao de um site pode levar dias e at meses. Como um trabalho que vai
sendo construdo aos poucos, voc sempre precisar anotar tudo o que ainda falta
para terminar. Com esta finalidade existem as tarefas.

Figura 8.16 Para abrir a lista de tarefas, clique sobre a opo Tarefas do menu de
Modos. Caso ele no esteja na tela escolha no menu Exibir, barra de modos de exibio.
Para inserir uma tarefa, basta clicar com o boto direito do mouse sobre o fundo da tela e
em seguida na opo Nova tarefa.
Preencha os dados solicitados a esta nova tarefa e clique em OK, aps inserida a
tarefa. Clicando com o boto direito do mouse sobre a tarefa voc poder alterar
seu Status (Marcando como concluda). Clique duas vezes sobre a tarefa para
edit-la ou ver o seu contedo.
Construindo Formulrios
Uma das partes mais importantes em um site o formulrio. Atravs dele o usu-
rio entrar em contato com o proprietrio da pgina, poder escolher produtos
para compra, dar sua opinio a respeito de um determinado assunto, e outros
infinitos recursos. No entanto, para que os formulrios funcionem de acordo com o
esperado, seus dados precisaram ser submetidos a um programa em ASP ou CGI.
Como nos prximos captulos voc aprender a criar programas em ASP, no en-
traremos neste assunto agora. Caso voc tenha feito os formulrios no captulo
sobre HTML, perceber que no FrontPage eles so bem mais fcies de serem cria-
dos. Basicamente so duas etapas para que voc construa um formulrio.
Criar o formulrio em si
Especificar o programa que ir processar os dados
Veja na Figura 8.17 um exemplo de formulrio.

Figura 8.17 A linha pontilhada envolve todo o contedo do formulrio. Dentro da rea
destinada para ele foi criada uma tabela com 2 colunas e 4 linhas para permitir um
alinhamento com maior preciso.
Para construir um formulrio como o mostrado, siga estes passos:
Crie um novo arquivo: Arquivo, Novo, Pgina
Na pgina em branco digite o cabealho do formulrio
Clique no menu Inserir, Formulrio, Formulrio
Clique no menu Tabela, Inserir, Tabela
Crie uma tabela com 4 linhas e 2 colunas
Clique em OK
Posicione dentro da primeira linha/coluna e digite Nome
Posicione dentro da segunda coluna da primeira linha e clique em Inserir,
formulrio, caixa de texto de uma linha
Faa o mesmo com os demais campos
Formate o formulrio como desejado
Para alterar o texto nos botes, basta clicar duas vezes sobre ele. Experimente
colocar novas linhas na tabela e novos campos no formulrio.
Pginas com quadros (frames)
Quadros so regies retangulares de uma pgina da web, nas quais voc pode
exibir outras pginas ou imagens. No FrontPage, possvel criar pginas de qua-
dros com o uso de modelos de quadros.

Os quadros podem ser usados de vrias maneiras. Sua utilizao s limitada pela
sua imaginao. Voc dever usar quadros sempre que quiser manter esttico um
determinado contedo de uma pgina, enquanto outros contedos se modificam.
Veja como fica um quadro no exemplo da Figura 8.18:

Figura 8.18 Com a utilizao de quadros, podemos colocar um menu fixo esquerda
enquanto a pgina direita ser trocada de acordo com o link clicado.
Cada um dos lados do quadro ser um arquivo diferente. Uma pgina principal
ficar responsvel por dividir a tela em duas e carregar as demais.
Para criar uma nova pgina com quadros siga os passos:
Clique no menu Arquivo, Novo, Pgina
Clique em Pgina de quadros
Selecione a opo Contedo
Clique em Ok
Aps estes passos clique em Salvar, informando como nome da pgina:
quadros.htm

Figura 8.19 Nesta tela voc poder criar ou informar quais sero as duas pginas que
iro compor a pgina de quadros. Do lado esquerdo criaremos um menu. Do lado direito
carregaremos a pgina principal do nosso site.
Siga os passos:
Do lado direito clique em Definir pgina inicial, pois neste caso j temos
a pgina pronta. Escolha a pgina: index.htm
Do lado esquerdo clique em Nova pgina e crie um menu com links,
conforme mostrado na Figura 8.18, que so os mesmos links da pgina
index.htm.
Salve a pgina lateral com o nome de ladoe.html.
Utilizando temas
A utilizao de temas uma alternativa a voc ter que criar todo o layout do site.
Os temas so padres de cores, links e textos predefinidos para facilitar (e princi-
palmente padronizar) o seu trabalho.
Voc poder aplicar cada um dos temas disponveis e, quando o site ficar do seu
agrado, aplicar a todas as pginas.
Feche as pginas que estiverem abertas
Abra novamente apenas a pgina principal
Clique no menu Formatar, Tema

Escolha o tema desejado
Clique em OK
Voc poder escolher entre aplicar em todas as pginas ou apenas na pgina sele-
cionada.
Posicionando e sobrepondo figuras
Este um recurso bastante utilizado nos sites atuais. Com ele voc poder posi-
cionar figuras em qualquer posio da tela sem precisar ficar preso s limitaes
de linhas. Com a ordem Z, podemos at mesmo sobrepor figuras na pgina.
A primeira pgina do nosso site possui uma Figura que poderemos alterar. (Caso
ela no possua uma Figura, insira um clip-art).

Figura 8.20 Selecione a Figura e clique no menu Formatar, Posio. Escolha a opo
Absoluto e em Ordem Z escolha 1.
Com isto voc poder mover a Figura para onde quiser na pgina. A ordem Z igual
a 1, diz para a Figura ficar atrs do texto pois ele est na ordem 0.
Entendendo a ordem Z
A ordem Z representa a camada na qual a Figura ir ficar. A camada principal a
de nmero 0. Quanto menor a ordem Z, mais atrs a Figura ficar, quanto maior,
mais frente.

Importando pginas prontas
Importar uma pgina ou site da Internet significa trazer todo o seu contedo
para dentro do seu computador. Pode parecer estranho, mas isto mesmo. Quan-
do voc solicitar a importao de um site, todos os arquivos que o compem (com
exceo das pginas dinmicas tipo ASP ou CGI) sero carregados para dentro da
pasta que voc especificar.
Este recurso tambm poder ser utilizado para importar um arquivo de uma pasta
diferente da atual.
Se voc possuir uma conexo com a Internet, experimente os passos a seguir para
ver como funciona a importao.
Crie uma nova Web clicando em Arquivo, Novo, Web
Clique em Arquivo, Importar
Clique em Da web
Informe o local original do site (ex: www.uol.com.br)
Clique em Avanar
Informe a quantidade mxima de pginas a importar
Clique em Avanar
Clique em Concluir
Aps alguns instantes todos os arquivos que compem o site estaro dentro da
pasta que voc informou.
Este recurso ser bastante til para que voc entenda como est a estrutura de
um determinado site. Ou quando precisar remontar um site de que voc no tenha
mais os arquivos originais e o site j esteja publicado.
Utilizando bordas compartilhadas
Um outro recurso interessante o compartilhamento de bordas. Com ele voc
poder fazer com que um dos lados da Home Page seja idntico em qualquer p-
gina criada. Seria como se voc criasse quadros sem precisar ter um arquivo para
cada lado da pgina.
A borda compartilhada muito utilizada para a montagem de menus. Crie uma
nova Web para que possamos utilizar este recurso. Siga os passos:

Figura 8.21 Crie uma nova Web em uma pasta diferente da atual.
Clique no menu Formatar, bordas compartilhadas. Esta janela dever aparecer.
Marque as opes como mostrado.
Isto indica que a borda ser aplicada a todas as pginas e que ser do lado es-
querdo.

Figura 8.22 Veja como ficou depois de criarmos as bordas compartilhadas.
Instalando um programa para FTP
A prximo passo a ser dado aps a criao do site envi-lo ao provedor de aces-
so. Existem vrias formas de se fazer isto, no entanto, a mais popular atravs de
um programa especfico para FTP (File Transfer Protocol).

Na verdade todos os sistemas operacionais j possuem algum programa para
transferncia de arquivos via FTP internamente. Mas a utilizao de um programa
especfico para esta finalidade lhe permitir a utilizao de diversos recursos pre-
sentes apenas nestes softwares.
No nosso exemplo utilizaremos o WS_FTP, mas as configuraes que iremos lhe
apresentar so idnticas na maioria dos programas para transferncia de arquivos.
Voc poder conseguir o WS_FTP atravs do site do seu fabricante:
http://www.ipswitch.com.
Aps disparar a instalao do programa voc ter uma tela como mostrado na
Figura 8.23:

Figura 8.23 Escolha a opo install or update WS_FTP Pro e clique no boto Continue.
Em seguida escolha a pasta onde o programa ser instalado. Clique em OK e aps
alguns instantes a instalao estar concluda. Provavelmente voc ser solicitado
a reiniciar o computador. Aps o reincio, v at o menu programas e acesse o
cone WS_FTP Pro.
A prxima etapa configurar um novo acesso FTP.
Criando uma nova conta de FTP
Agora vamos ver como podemos criar uma nova conta para envio e recebimento
dos arquivos do provedor. Para isto voc precisar possuir trs informaes:
O endereo do site conforme informado pelo provedor
O nome de login
A senha de acesso
Perceba que o provedor poder disponibilizar logins e senhas diferentes para aces-
so Internet e envio de arquivos. Voc precisar confirmar junto com o suporte de
cada provedor. Ao entrar no WS_FTP voc ter uma tela como a mostrada na Fi-
gura 8.24:

Figura 8.24 Do lado esquerdo voc tem acesso aos arquivos do seu computador. J do
lado direito esto os arquivos no provedor.
Primeiro vamos criar uma conexo fictcia, somente para que voc conhea como
funciona. Clique na opo Connect, e a tela da Figura 8.25 ir aparecer.

Figura 8.25 Veja que se a conexo estivesse pronta, bastaria clicar em Quick Connect.
Como este no o nosso caso, clique em New.
Agora iremos iniciar a configurao do novo acesso.

Figura 8.26 I nforme o nome do novo FTP e em seguida clique em Next.

Figura 8.27 Digite o endereo que armazenar os arquivos. Clique em Next.

Figura 8.28 I nforme o nome do usurio e a senha de acesso. Lembre-se de que esta senha
poder ser diferente da utilizada para conexo. Informe-se sobre isto com o provedor.
Clicando em Finish a nova conexo estar pronta para ser utilizada.
Enviando e recebendo arquivos
Agora que voc j criou a nova conexo, conecte-se na Internet, escolha a cone-
xo a ser utilizada e clique em Ok. Uma tela como a mostrada na Figura 8.29 ser
apresentada.

Figura 8.29 Enviar e receceber arquivos simples. Clicando duas vezes
sobre os arquivos do lado esquerdo eles sero enviados. Sobre o lado direito
eles sero recebidos.
Existem outras opes que podem ser acessadas nos menus laterais tanto do lado
esquerdo quando do lado direito. So elas:
ChgDir - Troca de diretrio (pasta)
Mkdir - Cria diretrio (pasta)
View - Exibe o contedo do arquivo
Exec - Executa o programa
Rename - Renomeia o arquivo
Delete - Apaga o arquivo
Refresh - Atualiza a tela
Dir|Info - Informaes sobre o diretrio (pasta)
As setas no meio da tela tambm podem ser utilizadas para enviar ou receber o(s)
arquivo(s) selecionado(s).
Isto tudo o que voc precisa saber sobre o WS_FTP. Se algo der errado, entre
em contato com o seu provedor de acesso. Ele lhe orientar como criar a conexo
ideal. Muitos provedores disponibilizam esta infomao atravs do prprio site.
Experimente.

Dreamweaver
Continuando nossa investida pelas ferramentas de desenvolvimento para a Internet,
vamos agora aprender um pouco sobre o Dreamweaver, criado pela Macromedia.
Trata-se de uma ferramenta com boa aceitao no mercado e isto se deve sua
simplicidade aliada grande quantidade de recursos. Na verdade, decidir sobre ela
e o FrontPage uma tarefa difcil.
Para estudar este captulo, recomendamos que voc j tenha passado pelo FrontPage
ou pelo menos pelo HTML, pois partimos do princpio de que voc j tenha alguma
noo de criao de sites.
Iniciando no Dreamweaver
Agora que voc j aprendeu a criar pginas utilizando o FrontPage, ir aprender a
utilizar o Dreamweaver. A finalidade principal deste software a mesma do FrontPage
(na verdade um v o outro como principal concorrente). Voc deve estar se per-
guntando: por que o desenvolvedor precisa conhecer os dois? A resposta sim-
ples. O primeiro motivo para que voc possa decidir qual dos dois ir utilizar! E o
segundo se deve ao fato de que existem muitas empresas que utilizam os dois,
pois cada um deles possui recursos que os diferenciam em alguns aspectos.
Partiremos do princpio de que voc j conhece o HTML ou pelo menos o FrontPage.
Muitos dos recursos que voc conheceu nos captulos sobre estes assuntos sero
tratados aqui de uma forma um pouco mais superficial.
Quando voc abrir o Dreamweaver ver uma tela como a mostrada na Figura 8.30:

Figura 8.30 Esta a tela de abertura do Dreamweaver. Nela voc poder produzir seus
sites da mesma maneira que no FrontPage. Perceba que temos uma barra de formatao,
que na maior parte do tempo estar visvel.

Primeiramente vamos explorar tudo que j conhecemos de outros programas.
Voc vai perceber que muitas das opes dos menus so semelhantes a todos os
outros que voc j conhece. Mas existem novidades, como o menu Janela, o qual
apresenta todas as opes de janelas disponveis ao usurio.
Experimente criar alguma coisa como se voc estivesse utilizando o Word.
Familiarizando-se com o menu
Continuando nosso reconhecimento do software, vejamos algumas opes dos
menus que so semelhantes no FrontPage ou no Word. Experimente ir acessando
cada uma delas enquanto l o livro.
Arquivo
Novo
Abrir
Fechar
Salvar
Salvar Como
Salvar Tudo
Visualizar no Navegador
Editar
Desfazer
Recortar
Copiar
Colar
Selecionar
Localizar
Substituir
I nserir
Imagem
Tabela
Formulrio
Quebra de linha
Data

Comentrio
Texto
Recuo
Formato
Alinhamento
Fonte
Estilo
Tamanho
Cor
Verificar a ortografia
Ou seja, muita coisa permanecer da mesma forma que voc j conhece (como
no poderia deixar de ser). Experimente passar por estas opes no menu e veja
que at mesmo as posies so idnticas aos produtos Microsoft.
medida que avanarmos com o curso voc conhecer as demais opes do me-
nu, as quais no esto nas listagens anteriores.
Comeando uma nova pgina
Agora que j demos uma olhada geral no software, vamos comear a utiliz-lo pr
valer. Nesta etapa iremos lhe mostrar passo a passo como se constri um novo
site da Web. Siga os passos:
Clique em Arquivo, Novo
Aparecer a janela da Figura 8.31.

Figura 8.31 Aqui voc j poder comear a trabalhar.
Recomendamos que voc crie uma subpasta onde dever salvar todos os arquivos
do site que iremos criar.
Definindo algumas propriedades da pgina
Alterar as propriedades da pgina atual significa poder configurar parmetros co-
mo: Ttulo da pgina, Imagem do fundo, Cores de textos, entre outros. Para isto
siga os passos:
Clique no menu Modificar e acesse a opo Propriedades da pgina.


Figura 8.32 Nesta tela voc tem diversas opes de formatao. Experimente
mudar as cores do texto e do fundo e veja os resultados.
Por enquanto, experimente mudar apenas as opes que voc j conhece (as
mesmas do FrontPage e do HTML). Nas prximas etapas aprenderemos algumas
opes mais sofisticadas. Ao final clique em Ok.
Salvando seu trabalho
Faa algumas alteraes na sua pgina para que ela fique como mostrada na Figura
8.33. Em seguida salve-a com o nome de index.htm, na subpasta que voc criou.

Figura 8.33 A fonte utilizada foi Arial itlico e Arial.
Trabalhando com camadas
Um outro recurso interessante e muito fcil de ser utilizado no Dreamweaver so
as camadas (layers). Com as camadas podemos sobrepor figuras e textos na
mesma pgina. Voc poder criar, por exemplo, um menu lateral que poder ser
deslocado conforme sua necessidade. O mais interessante que uma camada se
comporta como se ela fosse uma pgina em separado, ou seja, ela poder conter
sua prpria formatao de texto, figuras, etc.
Para inserir uma camada (que iremos utilizar como um menu), siga os passos:

Escolha no menu Janela a opo Camadas para ter acesso a uma janela
que controla as camadas presentes na pgina.
Clique no menu Inserir, Camada.
Aparecer um quadrado (que constitui a camada), no qual voc dever digitar as
opes do menu que iremos criar. Veja na Figura 8.34 o que voc dever digitar
na camada.

Figura 8.34 Ao digitar cada opo do menu, tecle Shift+Enter para um salto de linha
mais curto. A camada poder ser movida clicando sobre a ala na parte superior da
camada.
Aproveite para salvar sua pgina. Para ver como est ficando no navegador, basta
pressionar F12.
Para evitar a sobreposio de camadas, marque a opo Evitar sobreposies,
presente na caixa de controle das camadas.
Se quiser apagar uma camada, basta selecion-la e delet-la.
Inserindo tabelas
Bem, se voc j criou tabelas no Word ou no FrontPage, sabe o quanto elas facili-
tam nosso trabalho de posicionamento e formatao de pgina. Sempre que poss-
vel, aconselhavel que voc planeje toda sua pgina para utilizar tabelas.

Como no poderia deixar de ser, criar tabelas no Dreamweaver muito simples.
Vamos inserir uma em nossa pgina que ir conter trs colunas e apenas uma
linha.
Posicione-se logo abaixo da ltima frase do seu site (por exemplo: abaixo
da frase Cursos de informtica do jeito que voc precisa).
Clique no menu Inserir, Tabela.
Escolha 1 linha, 3 colunas e largura 75 por cento.
Clique em Ok e uma nova tabela ser criada.

Figura 8.35 Perceba que uma nova caixa de ferramentas para formatao da tabela ir
aparecer. Atravs dela, escolha na caixa Alinhar a opo Ao centro.
Experimente alterar algumas opes desta janela e veja os resultados (a tabela
precisar estar selecionada). Algumas so interessantes como a que permite que
voc escolha o nmero de linhas e colunas, a espessura da borda, entre outras.
Recursos rpidos (parte I)
Voc acaba de chegar na primeira seo de recursos rpidos. Eles no possuem
uma utilizao muito freqente, no entanto so to importantes como quaisquer
outros. O ideal que voc v experimentando medida que l o livro.

Inserindo linha horizontal
Clique no menu Inserir, Rgua horizontal e perceba que, aps inserir a linha
horizontal, voc poder alterar suas propriedades.
Inserindo molduras (frames)
Clique em Inserir, Moldura.
Escolha uma posio para a moldura (por exemplo, a esquerda)
Este recurso o mesmo dos quadros do FrontPage.
Vnculo de correio eletrnico
Clique em Inserir, Link de correio eletrnico.
Digite o texto e o endereo de e-mail.
Data atual
Clique em Inserir, Data.
I nserindo smbolos
Clique em Inserir, Caracteres especiais.
Escolha um dos vrios tipos.
Exibindo rguas de controle e grade
Clique em Exibir, Rguas, Mostrar.
Clique em Exibir, Grade, Mostrar a grade.
Utilizando modelos de pginas
Agora vamos conhecer um recurso muito interessante. A utilizao de modelos
vai fazer com que seu trabalho fique muito mais fcil. Voc poder criar uma
pgina padro que ser salva como um modelo. Com isto, cada pgina gerada a
partir do modelo ficar idntica original. Isto simplificar substancialmente o
seu trabalho.
Como padro, todas as regies em uma pgina modelo so marcadas como blo-
queadas quando salvas; para tornar o modelo til necessrio que algumas de
suas partes sejam editveis.

Enquanto o modelo estiver sendo editado, possvel fazer alteraes tanto nas
regies editveis quanto nas bloqueadas. Quando o modelo for aplicado a um do-
cumento, no entanto, as modificaes podero ser feitas apenas nas regies edit-
veis do documento; as regies bloqueadas no podem ser alteradas.
Veja como funciona:
Crie uma Nova pgina (a qual servir de modelo para todas as outras), seguindo
o exemplo mostrado na Figura 8.36:

Figura 8.36 Aps digitar o texto da pgina, tecle Enter para saltar duas linhas. A regio
editvel estar sempre abaixo da frase Cursos de Informtica, ou seja, este ttulo estar
presente em todas as pginas que forem criadas a partir de um modelo.
Para salvar esta pgina como modelo, clique em Arquivo, Salvar como modelo.
Digite um nome para o modelo, por exemplo principal e clique em Salvar.
Criando uma regio editvel no modelo
A pgina que voc criou anteriormente funciona muito bem como modelo, no en-
tanto, ela no adiantar se no possuir nenhuma regio que possa ser editvel.
Para criar uma regio editvel siga passo a passo as etapas.
Selecione todo o texto a partir da palavra CURSOS (Incluindo a frase Cur-
sos de Informtica).
Clique em Modificar, Modelos, Nova regio editvel.

Informe um nome para esta regio, por exemplo: detalhes.
A regio aparecer em destaque. Agora salve novamente o modelo.
Criando um documento a partir do modelo
Agora que j temos um modelo para nossas pginas, vamos utiliz-lo.
Clique em Arquivo, Novo a partir do modelo.
Selecione o modelo principal, e clique em Selecionar.
O novo arquivo ser aberto. No entanto, a nica regio editvel est abaixo da
linha. Experimente alterar o nome Top Training Center e veja o que acontece.
Inserindo molduras (frames)
Se voc j fez as etapas no FrontPage que trata dos quadros (molduras) no ter
muita dificuldade. Entretanto, criar molduras no Dreamweaver bem mais simples.
Crie um novo arquivo.
Em seguida clique no menu Inserir, Molduras, Esquerda.
Voc poder redimensionar a moldura arrastando-a para os lados.
Agora precisamos definir quais so os arquivos que iro compor a moldura. Para
isto clique em Janela, Molduras.

Figura 8.37 Clique sobre a moldura do lado direito e no campo Orig informe o nome do
arquivo que dever aparecer na moldura (index.htm). Perceba que do lado esquerdo no
carregaremos nenhum arquivo previamente. Ou seja, voc poder criar um arquivo
totalmente novo.
Viu como fcil? Voc poder informar outros parmetros como: bordas, margens,
entre outros, na caixa de propriedades das molduras.
Verificando os navegadores de destino
Um recurso interessante a possibilidade que ele tem de avaliar o seu site e dizer
se ele ir causar problemas quando aberto por navegadores de verses diferentes.
Este um recurso importante, para evitar a frustrao do usurio ao tentar abrir
sua pgina e receber uma mensagem de erro.
Para testar o site siga os passos:
Clique em Arquivo, Verificar os navegadores de destino.
Selecione os navegadores a serem analisados.
Ser aberto o browser com uma pgina com os possveis erros e um detalhamento
sobre eles. Experimente.

Utilizando o menu Exibir
Vamos ver agora como funciona algumas das opes no menu Exibir. Como se
trata de recursos para a edio da pgina, vamos mostr-los todos juntos, tornan-
do a compreenso mais simples. Neste primeiro momento, veremos apenas os que
so mais utilizados, em seguida mostraremos os demais.
Para ver como funciona, clique sobre o menu Exibir e, em seguida, sobre cada
uma das opes adiante:
Cdigo
Permite que voc tenha acesso ao cdigo HTML da pgina.
Projeto
Permite que voc retorne rea de criao do Dreamweaver.
Cdigo e projeto
Muito til. Permite que voc veja a rea do projeto e o cdigo em HTML ao mesmo
tempo.
Visualizao de tabelas
Na visualizao de layout voc poder ver as dimenses de cada clula da tabela.
O modo padro volta ao normal.
Auxlios visuais
Como o prprio nome diz, permite que voc veja os contornos de alguns objetos
como bordas de tabelas, bordas de camadas, etc. Isto no significa que elas sero
apresentadas pelo navegador, elas serviro apenas como guia quando voc estiver
desenvolvendo. Experimente retirar cada uma delas e voc ver que fica difcil
perceber onde esto, por exemplo, os limites de uma tabela.
Rguas
Permite que sejam exibidas rguas na tela. Isto ir facilitar quando voc precisar
posicionar elementos na tela (figuras/applets, etc.).

Grades
Permite que se exiba uma grade no fundo da pgina para facilitar o posicionamen-
to de elementos.
Criando formulrios
Vamos aprender agora como criar formulrios no Dreamweaver. No uma tarefa difcil
(principalmente se voc j o fez antes). Para inserir o primeiro campo, siga os passos:
Crie um novo arquivo.
Salte algumas linhas [Enter].
Clique no menu Inserir, Objetos de formulrio, Campo de texto.

Figura 8.38 Perceba que o novo campo foi inserido e uma linha pontilhada determina a
rea do formulrio. Voc poder inserir quantos campos quiser.
Clicando sobre cada um dos campos aparecer a janela de propriedades. Voc
poder informar o nome do campo, o tamanho, o valor inicial, o tipo de campo,
entre outras coisas. Experimente colocar mais campos e pressione F12 para visua-
lizar no navegador.
Processando o formulrio
Os dados do formulrio devero ser enviados para um programa processador de
formulrio (ASP, CGI, etc.), o qual j dever estar pronto. Voc aprender a criar

um ASP processador de formulrios no Captulo 10. Por hora, se voc quiser testar
o funcionamento do seu formulrio, poder utilizar o ASP disponvel em nosso site.
Para isto, temos que especificar a localizao do programa e enviar tambm par-
metros ocultos que iro informar para onde os dados devero ser encaminhados.
Siga os passos:
Clique sobre a linha tracejada do formulrio.
Na janela que aparecer, informe o endereo do ASP que processar o formul-
rio no campo ao: www.toptc.com.br/cgi-bin/formulario/formulario.asp
Agora precisamos informar o e-mail que receber os dados processados. Para isto
faa o seguinte:
Clique dentro do formulrio.
Clique em Inserir, Objetos de formulrio, Campo oculto.
Informe o nome do campo como: destino.
Em valor, digite o e-mail que receber o formulrio.
Pronto, agora s testar (para isto voc dever estar conectado Internet). No
se preocupe se voc ainda no compreendeu o que acontece quando o formulrio
submetido ao ASP. Isto ficar claro quando voc ler o Captulo 10.
Server-Side
Agora vamos aprender a utilizar um recurso bastante interessante. O processa-
mento do lado do servidor.
Trata-se de uma forma de utilizar o processamento realizado pelo servidor. No
nosso exemplo, utilizaremos um pequeno programa em J avaScript, o qual dever
ser digitado no Bloco de Notas e salvo como HTML. Em seguida, utilizaremos o
script de servidor para incluir este arquivo sempre que ele for chamado. Ou seja, o
script no far parte diretamente da pgina, ele ser chamado apenas quando o
browser achar a solicitao de incluso do arquivo.
O que voc ganha com isto? Suponhamos que voc tenha uma rotina que se repita
em vrias pginas. Num belo dia voc resolve alter-la mas, como ela est em
vrias pginas, voc ter que fazer a alterao em todas elas.
Utilizando o arquivo de incluso, voc poder digitar o cdigo comum s pginas
em um arquivo diferente, e cham-lo quando quiser. Se for necessria uma altera-
o no cdigo, basta alterar no arquivo original e automaticamente ele ser altera-
do em todas as pginas que o utilizam. Vamos a um exemplo:

Crie esta programao J avaScript no Bloco de Notas e salve-o como
java.html
<script language="Javascript">
alert("Ol, internauta!")
</script>
No Dreamweaver, clique em Inserir, Server-Side Include.
Selecione o arquivo J ava.html.
Voc ver apenas um smbolo indicando a presena do arquivo includo. Mas quan-
do executar a pgina ver a mensagem em J avaScript. Este cdigo (java.html) po-
der ser inserido em todas as pginas. Quando voc quiser mudar a mensagem,
basta alterar no arquivo original, que automaticamente ser alterada em todas as
pginas que utilizarem este recurso.
Linhas do tempo
Este outro recurso muito interessante. Com ele podemos criar scripts que iro
fazer com que objetos se movimentem pela tela. S pra lembrar: voc no vai
precisar escrever uma nica linha de cdigo, isto no interessante?
Os conceitos envolvidos so: Camadas, HTML dinmico e J avaScript.
Voc poder alterar as seguintes caractersticas das camadas:
Sua posio (X,Y)
Sua visibilidade
Sua dimenso
Para abrir a linha do tempo, clique no menu Janela, Linhas de tempo.

Figura 8.39 Para nossos testes crie uma pgina vazia.
Siga os passos:
Clique em Inserir, Camada.
Clique com o boto do lado direito do mouse e escolha a opo: Gravar o
caminho.
A tela dever ficar como a mostrada a seguir:

Figura 8.40 Voc poder fazer o caminho como quiser. Opcionalmente marque as
opes Execuo automtica (ao carregar a pgina) e Loop (executar repetidamente).

Recursos rpidos (parte 2)
Vamos novamente entrar por algumas opes do menu as quais voc ir utilizar
muito raramente, mas que precisam ser conhecidas. Para experimentar, basta
seguir o procedimento.
No menu Inserir, Tags invisveis, Script
Permite que voc digite uma seqncia de comandos em J avaScript ou VBScript.
Para tal, basta que voc especifique a linguagem a ser utilizada.
No menu Modificar, Propriedades da seleo
Ativa ou desativa as caixas que aparecem automaticamente quando voc clica
sobre os objetos. Experimente desmarcar esta opo e selecionar uma frase. Per-
ceba que no ir aparecer a caixa que lhe permite alterar as caractersticas do
texto selecionado. Agora remarque a opo e selecione novamente o texto. As
propriedades aparecero novamente na caixa de dilogo.
Modificar, Quick tag editor
Permite que voc digite um comando HTML diretamente em uma caixa de dilogo.
Modificar, Converter, Camadas em tabela
Com esta opo voc poder converter suas camadas em clulas de uma tabela.
Esta opo ser interessante para que sua pgina no apresente erros quando da
execuo das camadas (navegadores mais antigos no permitem camadas).
Comandos, Limpar o HTML
Permite que o Dreamweaver faa ajustes no HTML com o objetivo de tornar o
cdigo mais enxuto e de fcil entendimento.
Gravando comandos
A operao que permite gravar uma srie de comandos passa a ser interessante
quando voc precisar repetir o mesmo processo vrias vezes. Um bom exemplo
seria a criao de vrias tabelas em uma mesma pgina. Suponhamos que voc
queira criar 5 tabelas com 3 colunas e 5 linhas cada uma.
Vamos criar a primeira utilizando o recurso que ir gravar todas as aes que esti-
vermos executando. Em seguida iremos solicitar ao Dreamweaver que repita os
passos executados.

Crie um Novo arquivo.
Clique em Comandos, Iniciar a gravao (a gravao ter incio).
Clique em Inserir, Tabela, informe 5 linhas 3 colunas, clique em Ok!
Clique em Comandos, Parar a gravao.
Aparecer uma tabela como a mostrada na Figura 8.41.

Figura 8.41 Agora posicione o cursor abaixo da tabela gerada. Clique em Comandos,
Executar o comando gravado. Uma nova tabela ser criada.
Pronto! Voc poder executar o comando quantas vezes quiser.
Convertendo para navegadores 3.0
O Dreamweaver possui um recurso que nos dias atuais talvez no tenha uma grande
utilidade, mas que um dia voc pode precisar. Navegadores mais antigos no con-
tam com suporte a camadas (layers) e nem folha de estilos (CSS), com isto, se voc
tentar exibir uma pgina com estes recursos nos navegadores iguais ou anteriores
verso 3.0, voc ter problemas. Para resolver isto, voc poder acionar no menu
Arquivo, a opo Converter, Compatvel com navegador 3.0.
Ao chamar esta opo, selecione:
Converter as camadas em tabelas ou,
Converter a folha de estilos em marcaes HTML.
Logicamente toda a funcionalidade das layers estaro perdidas.

Iniciando um editor externo
possvel iniciar um editor de cdigo externo a partir do Dreamweaver. Este re-
curso ser til quanto quiser utilizar um recurso presente no FrontPage e em se-
guida voltar ao Dreamweaver a fim de continuar a edio. O Dreamweaver detecta
as alteraes que foram salvas no programa exterior e lhe avisa para recarreg-lo
ao retornar. Parece confuso? Ento vamos fazer um teste configurando o bloco de
notas do Windows como editor externo (apenas para exemplificar).
Clique em Editar, Preferncias, Tipos de arquivos/ editores.
Em Editor de cdigo externo, clique em Procurar, e na pasta do Win-
dows, clique sobre o Notepad.
Pronto, o Notepad passou a ser nosso editor externo. Voc poder configurar
qualquer outro editor sua vontade.
Para acionar o Editor externo:
Clique em Editar, Editar com o Notepad.
O bloco de notas ser aberto. Quando terminar a edio do cdigo HTML no bloco
de notas, o Dreamweaver lhe perguntar se voc quer carregar o arquivo nova-
mente, clique em sim.
Inserindo <meta>
Voc j deve ter se deparado algumas vezes com os cdigos META no incio do
HTML. Atravs deles que, por exemplo, voc informa aos sites de busca qual o
contedo de sua pgina. Estes sites possuem um recurso de varredura pela Inter-
net procura de pginas que contenham cdigos META KEYWORDS que so as
palavras chaves que definem o contedo do seu site.
Para inserir uma tag <META>, siga os passos:
Clique em Inserir, Tags do cabealho, Meta.
No campo valor digite: KEYWORDS.
No campo contedo digite as palavras chaves que definem o seu site.
Por fim em Ok.
Voc ver o META no HTML pressionando F10 (acesso ao HTML).

Figura 8.42 Veja os cdigos criados pelo Dreamweaver.
Menu de salto
Agora voc vai aprender um recurso que poder ser muito utilizado em suas pgi-
nas. Vamos montar um menu suspenso onde o usurio poder selecionar uma
opo, e ao selecion-la, o navegador ir transport-lo at o endereo escolhido.
O Dreamweaver criar uma pequena rotina em J avaScript. Veja a seguir a rotina
em execuo:

Figura 8.43 Ao escolher uma das opes o usurio ser levado ao site escolhido.

Para criar cada um dos links, siga os passos:
Clique em Inserir, Objeto de formulrio, Menu de salto.
Digite o texto que ir aparecer na opo, no campo Texto.
Digite o endereo de destino , no campo v para a URL.

Figura 8.44 O campo Texto dever conter a descrio do link. J o campo v para a
URL, conter o endereo completo da pgina a ser visitada.
Para criar mais links, basta clicar sobre o boto com o sinal de +.
Redimensionamento do Netscape
Algumas verses do Netscape possuem um erro interno. Este erro faz com que o
navegador apresente a pgina incorretamente quando o usurio realizar um redi-
mensionamento da pgina.
Para resolver este problema, basta inserir um cdigo em J avaScript. Este recurso
pode ser acessado seguindo os passos:
Clique no menu Comandos, Adicionar/ remover o ajuste da netscape
Um cdigo em J avaScript ser inserido na pgina.
Trabalhando com folhas de estilos
Trabalhar com folhas de estilos poder deixar as suas pginas com uma aparncia
muito mais profissional. Na verdade, os benefcios que as folhas de estilos lhe ofe-
reem so imensos. Vamos a um exemplo do funcionamento.
Suponhamos que voc queira definir um padro para todos os links existentes na
pgina, por exemplo: Negrito, fonte Verdana, tamanho 10. No decorrer do desen-

volvimento de suas pginas, um ou outro link poder ser esquecido. Para evitar
este problema, existe a folha de estilo. Com ela voc define no incio do documen-
to como ser o estilo da tag <a href> que cria um link (ou qualquer outra tag), e
este estilo ser aplicado por todas as tags <a href> do documento. Voc pode
formatar praticamente todas as tags do HTML. Siga os passos adiante para criar
uma folha de estilo em sua pgina:
Clique em Texto, Estilos CSS, Editar a folha de estilos.
Na janela que aparecer, clique em Novo.
Selecione a opo Redefinir o tag de HTML.
Selecione a tag a.

Figura 8.45 Perceba que voc pode escolher qualquer tag HTML. Ao terminar, clique em
OK. Aparecer uma tela para que voc salve as configuraes da folha de estilos.
Na prxima janela voc poder efetuar todas as formataes que quiser. No entan-
to, para que nosso exemplo funcione, informe como mostrado na Figura 8.46.

Figura 8.46 Voc poder predefinir uma srie de formatos que estaro dentro do arquivo
.css que voc escolheu. Aps defini-los, clique em OK.

Volte tela inicial do Dreamweaver, crie um Hiperlink para qualquer site, por
exemplo: www.toptc.com.br. Veja que o link ser automaticamente formatado
como foi definido na folha de estilo. A programao necessria (a qual foi criada
pelo Dreamweaver) est logo a seguir:
<style type="text/css">

</style>
Agora que voc j conhece como funciona a folha de estilos, poder utiliz-la em
suas pginas.
Alinhando camadas
Com este recurso voc poder alinhar ou redimensionar as camadas em seu site.
Por exemplo, pode ser que voc queira que duas camadas fiquem alinhadas
direita do site.
Para experimentar este recurso, insira duas camadas em seu site, em seguida siga
os passos:
Insira as duas camadas como mostrado na Figura 8.47.
Selecione as duas camadas (utilizando o shift).
Clique em Modificar, Alinhar, Esquerda.

Figura 8.47 Com isto voc poder alinhar as camadas da seguinte forma. Alinhar
esquerda, direita, no alto, abaixo. Trazer para frente, eviar para trs. Tornar as alturas
iguais ou tornar as larguras iguais.
170

Talvez o seu maior objetivo seja o desenvolvimento de aplicativos para a Internet,
e este exatamente o objetivo deste captulo. Utilizando os conceitos do ASP,
iremos aprender a desenvolver programas que acessem banco de dados. O ASP
uma tecnologia desenvolvida pela Microsoft que permite um fcil acesso a informa-
es armazenadas nos servidores (PWS ou IIS).
Anteriormente voc aprendeu sobre a funcionalidade dos servidores PWS e IIS,
agora chegou a hora de voc utiliz-los. Na primeira parte deste captulo voc ser
levado a desenvolver uma loja virtual didtica. Ela apresenta certas limitaes se
utilizada na Internet, mas, se voc quiser, poder baixar o cdigo fonte do nosso
site: www.topt.com.br.
O que o ASP
O Active Server Pages (ASP) um ambiente de programao com o qual podemos
criar sites de alta performance. Ao contrrio do que voc viu at aqui, as pginas
que contm ASP so processadas no servidor e no no browser do cliente.
Entre os recursos que podem ser implementados com o ASP, podemos citar: utili-
zao de uma linguagem simples de Script como o VBScript, acesso a banco de
dados hospedados no provedor, envio e recebimento de e-mails, envio de arquivos
para o servidor, entre diversos outros recursos.
Existem muitas vantagens em se utilizar o ambiente ASP. Entre elas temos a inde-
pendncia de navegador, pois o que o cliente visualiza apenas cdigo em HTML.
possvel visualizar, atualizar, adicionar ou remover informaes no banco de
dados simplesmente utilizando componentes que j se encontram prontos do ser-
vidor. O cdigo fonte fica preservado pois o servidor s libera o resultado do pro-
cessamento.
Criando uma Loja Virtual 171

ASP versus CGI
O suporte a scripts CGI j um velho conhecido no mundo da computao basea-
da em cliente/servidor. Trata-se de aplicaes desenvolvidas em linguagens como
C ou PERL que permitem o acesso a todos os recursos do sistema operacional. No
entanto, a programao em CGI um tanto quanto complicada para o usurio que
no um programador (por profisso). Com isto, o ASP lhe permite o mesmo po-
tencial, com extrema simplicidade no cdigo fonte.
Uma importante vantagem do ASP em relao ao CGI est no fato de que este
ltimo cria uma aplicao para cada usurio que chamar o script. No ASP isto no
acontece. O primeiro script compartilhado com todos os usurios que o chama-
rem e isto, sem dvida alguma, deixar o servidor mais livre para processar as
demais aplicaes.
A funcionalidade do ASP lhe trar maiores benefcios em menos tempo que o CGI.
No entanto, compreender o funcionamento do ASP um timo incio antes de se
aventurar pela programao CGI.
Como funciona o ASP
Para desenvolver programas com caractersticas ASP utilizaremos o VBScript. O
objetivo deste livro no ensinar a programar em VBScript. Partimos do princpio
de que voc tenha conhecimento de lgica de programao ou tenha feito o cap-
tulo sobre J avaScript. Nosso objetivo no apresentar-lhe todo o potencial do
ASP. Apresentaremos o necessrio para que voc implemente pginas com acesso
a banco de dados, necessrias criao de sites com comrcio eletrnico (B2B e
B2C).
Toda a programao ASP dever ser executada em um servidor PWS (Personal
Web Server) no caso do Windows 98(Me) ou no IIS (Internet Information Server)
no caso do Windows NT ou 2000. Para isto voc dever possuir um destes j con-
figurados em seu computador. No Captulo 2 apresentamos como isto pode ser
feito.
Para criar seus scripts voc poder utilizar o bloco de notas, o FrontPage ou at
mesmo o Dreamweaver (existem programas que geram os cdigos em ASP para
voc, mas nossa finalidade aqui lhe ensinar a programao em ASP). Para come-
ar, digite o exemplo seguinte:
1: <html>
2: <head></head>
3: <body>

4: <%
5: Response.write "Este seu primeiro programa"
6: %>
7: </body>
8: </html>
Aps digitar este exemplo, salve-o na sua pasta com o nome de prog1.asp na sua
subpasta dentro da pasta C:\ ASP. Partimos do princpio de que esta seja a sua
pasta compartilhada como Web no PWS ou IIS. (Para montar este compartilha-
mento, consulte o Captulo 2 nos itens Configurando o IIS e o PWS).
Para visualizar no navegador, abra o arquivo pelo Internet Explorer. Utilize uma
URL como a mostrada a seguir para visualizar seu cdigo em execuo.
http://Servidorweb/PastaWeb/prog1.asp
Onde Servidorweb dever ser substitudo pelo nome dado no PWS ou no IIS.
Pastaweb a pasta que voc criou para acomodar seus arquivos.
Ao carregar a pgina, perceber que no conseguimos ter acesso ao programa em
ASP; o que o browser apresenta o resultado do processamento realizado. Em
resumo: todos os comandos entre <% e %> sero executados no servidor e re-
tornado apenas os resultados de suas operaes. Esta a grande diferena.
Colocando comentrios
Em algumas situaes, voc dever colocar comentrios em seu cdigo, principal-
mente para dividir partes lgicas do seu programa.
Veja um exemplo de comentrio:
1: <%
2: ' A seguinte rotina calcula o salrio do funcionrio
3: salliquido = salbruto* 0.7
4: %>
Neste exemplo a linha 2 contm ' (apstrofo) e no ser executada, servindo
apenas para comentar o que vem em seguida.
Criando Variveis
No VBScript utilizaremos o comando DIM para declararmos uma varivel. Em se-
guida associaremos um valor a ela.

Exemplo:
1: <%
2: Dim variavelx, salario
3: Dim a,b,c
4: variavelx = "Carlos"
5: salario = 1500
6: %>
Neste exemplo foi criada a varivel de nome variavelx que passou a conter a
string Carlos. Ao criar variveis literais utilize aspas (como em Carlos, na linha 4).
Porm, para criar variveis numricas isto no necessrio, como em salario na
linha 5.
Operadores lgicos
Assim como em toda linguagem de programao, no VBScript temos os operadores
lgicos que podem ser vistos a seguir:
= Igualdade
<> Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual
and E
or Ou
not No
Veja um exemplo de cdigo para criao de variveis e utilizao dos operadores.
1: <%
2: dim a,b,c
3: a = 4
4: b = 5
5: c = a / b
6: if c > 1 then
7: response.write ( " A operao A/B maior que 1 ")
8: Else
9: response.write ( " A operao A/B menor que 1 ")
10: end if
11: %>

Operadores matemticos e de strings
Os operadores matemticos sero utilizados na realizao de clculos com vari-
veis numricas e para concatenao de variveis do tipo texto. Veja a seguir uma
lista dos operadores, bem como sua utilizao.
+ Adio
- Subtrao
* Multiplicao
/ Diviso
\ Resto de uma diviso
& Concatenao de strings
Digite o programa seguinte, salve e veja os resultados:
1: <%
2: dim x,y,z
3: x = 10
4: y = 11
5: z = x * y
6: response.write "A multiplicao resulta: " & z
7: %>
Comandos condicionais
As operaes condicionais so responsveis por determinar a seqncia de execu-
o dentro do programa, podendo ser utilizadas para realizar testes e comparaes
entre variveis, condicionando a execuo de acordo com o resultado de uma de-
terminada condio.
Digite o exemplo a seguir e veja um dos usos para os comandos condicionais.
1: <%
2: dim x,y
3: x = 2
4: y = 1
5: if x>y then
6: response.write "O valor de X maior"
7: else
8: response.write "O valor de Y maior"
9: end if
10: %>
Altere o valor da varivel x para 0, salve e recarregue a pgina.

Criando laos (loops)
Os loops dentro de programas so fundamentais para repetir uma parte do cdigo
um determinado nmero de vezes. Assim sendo podemos repetir, de forma contro-
lada, trechos do cdigo. Por exemplo: quando voc precisar apresentar os produ-
tos disponveis em um banco de dados, vai ter que montar um loop at que todos
os produtos sejam apresentados.
Digite o exemplo a seguir:
1: <%
2: Dim x,y
3: y = 0
4: for x=1 To 10
5: y = y + x
6: next
7: response.write "A soma dos 10 primeiros nmeros inteiros : " & y
8: %>
Veja o programa seguinte utilizando o comando while.
1: <%
2: Dim x,y
3: y = 0
4: x = 1
5: while x<=10
6: y = y + x
7: x = x + 1
8: wend
9: response.write "A soma dos 10 primeiros nmeros inteiros : " & y
10: %>
Criando funes
Uma funo um conjunto de instrues que s sero executadas quando forem
chamadas. Voc ir utilizar funes para chamar rotinas que devam ser executadas
diversas vezes dentro do programa. A sintaxe geral a seguinte:
Function NomeFuno (Parmetros)
.... Rotina
End Function

Suponha uma funo que tenha de calcular a soma de dois nmeros e retornar um
resultado.
1: <%
2: function soma(x,y)
3: dim calculo
4: calculo = x+y
5: soma = calculo
6: end function
7: total = soma(5,7)
8: response.write "A soma : " & total
9: %>
Avanando no VBScript
Apesar deste livro no abordar todo o potencial do VBScript, a seguir apresenta-
mos uma listagem de alguns comandos teis.
var = Ucase("texto") Converte para maisculas
var = Lcase("TEXTO") Converte para minsculas
var = Trim("teste de texto") Retira os espaos em branco
var = Ltrim(" Este um teste") Retira os brancos esquerda
var = Rtrim ("Este um teste ") Retira os brancos direita
var = Len("Texto") Informa o nmero de caracteres
FormatPercent(valor,2) Formatao em porcentagem
FormatNumber(valor,2) Formatao em valor real
Os comandos a seguir devero estar fora do <% %> pois no podem ser proces-
sados pelo servidor. Ele utiliza uma chamada ao interpretador VBScript do brow-
ser (e no do servidor, como no caso do ASP). Digite o exemplo como mostrado
adiante:
1: <html>
2: <script language = "vbscript">
3: msgbox "Texto da caixa"
4: var = inputbox("sua idade?")
5: </script>
6: </html>
O funcionamento idntico ao J avaScript que voc j viu anteriomente.

Iniciando no ASP
A partir deste momento comearemos realmente a definir as caractersticas de
nossos documentos ASP. Estas definies devero estar necessariamente no incio
do documento ASP, pois faro parte da solicitao do cabealho HTTP.
Enviando dados aos usurios
Todos as pginas que voc digitou at aqui foram processadas pelo servidor e
esto em Cache. Ou seja, caso voc faa um novo acesso, a pgina de resposta j
estar gerada e ser carregada pelo browser. Isto no bom, pelo fato de que a
mesma pode sofrer alteraes (como na tabela de preos) em que o browser man-
ter os valores antigos. Para isto utilizaremos o Response.expires, que especifica
o tempo de durao da pgina.
1: <%
2: ' tempo de expirao em minutos
3: response.expires = 0
4: response.write "este documento perder a validade imediatamente"
5: %>
Veja um outro exemplo:
1: <%
2: Response.ExpiresAbsolute = # January 1,2000 00:00:00#
3: Response.write "Este documento perder a validade em 01/01/2000"
4: Dim dia
5: Dia = time
6: Response.write "No servidor agora so :" & dia
7: %>
Evitando erros com variveis
Utilize o Option Explicit para garantir que todas as variveis devam ser declara-
das antes de serem utilizadas. Todas as vezes em que voc errar o nome da vari-
vel, receber um aviso em tempo de execuo. Option Explicit dever ser o pri-
meiro cdigo da sua pgina. Veja um exemplo de sua utilizao:
1: <%
2: Option Explicit
3: Response.ExpiresAbsolute = # January 1,2000 00:00:00#

4: Response.write "Este documento perder a validade em 01/01/2000"
5: Dim dia
6: Dea = time
7: Response.write "No servidor agora so :" & dia
8: %>
Perceba que o programa anterior contm um erro. A varivel Dia foi declarada,
mas usamos Dea. Este erro ser reportado pelo Navegador.
Processando um formulrio
Uma das operaes que teremos que realizar com freqncia o envio de dados
entre pginas. Um exemplo seria a validao de um determinado usurio. O usu-
rio digita a senha em uma pgina e o valor digitado ser passado a outra pgina
(ASP) para ser validado. Este valor ser passado como parmetro juntamente com
a URL da pgina. Digite o programa a seguir e salve-o como form.html.
1: <html>
2: <head>
3: <title></title>
4: </head>
5: <body>
6: <form method="GET" action="valida.asp">
7: <p align="center">Seu nome:
8: <input type="text" name="T1" size="20">
9: <input type="submit" value="Enviar" name="B1"></p>
10: </form>
11: </body>
12: </html>
Na linha 8 o programa cria uma caixa de texto que possui o nome de T1. Esta
caixa ser recebida pelo programa em ASP que ainda iremos criar. O boto
submit na linha 9 ir enviar os dados do formulrio para o arquivo em ASP
especificado na linha 6 (valida.asp).
Agora crie um novo arquivo, digite o programa a seguir e salve-o como
valida.asp, que ele ser chamado pelo form.html anterior.
1: <% Dim recebeu
2: recebeu = Request.QueryString("T1")
3: response.Write "O valor recebido foi: " & recebeu
4: %>

Agora visualize o arquivo form.html no navegador.
Temos aqui um recurso novo, Request.QueryString("T1"). Ele receber o valor
passado pelo campo do formulrio. No caso apresentado receberemos o campo T1
o qual foi repassado para a varivel recebeu, na linha 2.
Ao executar o formulrio anterior (form.html), preencha o valor da caixa e clique
no boto Enviar. A pgina valida.asp dever ser chamada na linha de endereo
do browser.
http://NomeComputador/Pasta/valida.asp?T1=Nome&B1=Enviar
Perceba que temos os campos com seus determinados contedos.
Exerccio:
Faa um formulrio solicitando ao usurio o seu nome e senha. Em um arquivo
ASP verifique se a senha digitada est correta. A senha dever ser: 025680 (utilize
o comando IF para a verificao).
Criando o banco de dados
Agora que voc j conhece o funcionamento bsico do ASP, chegou a hora de
comearmos a criar pginas que acessem banco de dados. Para isto iremos utilizar
o Access que parte integrante do pacote de aplicativos Microsoft Office.
No Captulo 3 exploramos os principais conceitos sobre banco de dados (recomen-
damos que, caso voc no esteja familiarizado com aspectos referentes a banco de
dados, releia o Captulo 3).
Apresentaremos passo a passo como voc poder criar um banco de dados no
Access.
Dentro desse banco de dados criaremos nossas tabelas que contero os dados dos
nossos aplicativos. Siga as seguintes etapas:
Acesse o Access no menu Programas.
Ao abri-lo, uma primeira janela ser mostrada como na Figura 9.1.

Figura 9.1 Ao abrir esta janela, escolha a opo Banco de dados vazio. Em seguida
clique em OK. Voc dever informar um nome para o banco de dados. Por hora digite:
curso.mdb. Salve este arquivo na sua pasta da Web.
Neste ponto o banco de dados j estar criado. Agora criaremos as tabelas que ele
ir conter. Por enquanto faremos apenas uma tabela (produtos). Se voc estiver
com dvidas, consulte o Captulo 3 para obter maiores detalhes.
Escolha a opo Criar tabela no modo de estrutura.

Figura 9.2 Existem outros modos de se criar uma tabela, no entanto sempre utilizaremos
o modo de estrutura.

As tabelas so como repositrios de dados. Nelas iremos armazenar dados dos
clientes, dados dos pedidos, informaes sobre produtos entre outros. Informe os
campos conforme a seguir:
CAMPO TIPO
Codigo Autonumerao
Descricao Texto
Preco Moeda

Figura 9.3 Cada campo ir armazenar uma determinada informao.
Aps criar os trs campos da tabela, salve-a com o nome de PRODUTOS.
Criando outras tabelas
Na etapa anterior vimos quais os passos para se criar uma tabela no banco de
dados do Access. Voc criou a tabela PRODUTOS que conter todas as informa-
es dos produtos que nossa loja virtual ter.
No entanto, os aplicativos de banco de dados geralmente possuem vrias tabelas.
Nosso caso no diferente. Criaremos 4 tabelas para nosso sistema. So elas:
Cadastro Conter informaes sobre os clientes da loja.
Pedidos Que manter os dados dos pedidos dos clientes.
Temporria Nesta tabela iremos guardar informaes sobre as com-
pras do cliente (antes dele fechar o pedido definitivamente).

Com base na estrutura apresentada a seguir, e nas explicaes sobre como criar
tabelas (vista no item anterior), crie as demais tabelas conforme segue. A estrutu-
ra que iremos utilizar para cada campo no a mais indicada. No entanto, ela foi
definida assim para facilitar sua compreenso. Tenha o cuidado para digitar os
nomes dos campos conforme o mostrado. No utilize acentuao ou cedilha.
Nome da tabela: CADASTRO
CAMPO TIPO
Codigo Autonumerao
Senha Texto
Telefone Texto
Nome Texto
Email Texto
Bairro Texto
Cidade Texto
Rua Texto
Complemento Texto
Numero Texto
Apto Texto
Referencia Texto
Nome da tabela: PEDIDOS
CAMPO TIPO
Cliente Nmero
Produtos Nmero
Quantidade Nmero
Descricao Texto
Preco Moeda
Data Data/Hora
Hora Data/Hora
Formapagamento Texto
Nome da tabela: TEMPORARIA
CAMPO TIPO
Cliente Nmero
Produtos Nmero
Quantidade Nmero
Descricao Texto

Preco Moeda
Data Data/Hora
Hora Data/Hora
Formapagamento Texto
Aps terminar, voc ter uma estrutura como mostrada na Figura 9.4:

Figura 9.4 Aqui voc pode ver todas as tabelas. Ao clicar (duplo) sobre elas voc ter
acesso s informaes contidas em cada uma. Se voc quiser alterar a estrutura (como o
nome de campos, por exemplo), basta clicar no boto Estrutura.
Experimente lanar itens em cada uma das tabelas simplesmente clicando (duplo)
sobre elas e digitando os valores.
Comeando a desenvolver a loja virtual
A partir deste momento comearemos a implementar os cdigos que iro compor
nossa loja virtual. Esta uma loja simples e servir para que voc compreenda de
forma didtica, o funcionamento de um aplicativo para a Web. No nosso site
(www.toptc.com.br) voc poder fazer download de uma loja virtual completa para
uso comercial.
Nossa loja ser composta de duas partes e cada uma delas ser subdividida em
blocos (produtos/clientes/pedidos, etc). Veja pela estrutura a seguir:

administrativo.HTML

produtos.HTML clientes.asp pedidos.asp

Este primeiro mdulo possibilitar ao administrador da loja, gerenciar os clientes
os produtos e os pedidos realizados pelos clientes. Na primeira tela (administrati-
vo.HTML) haver links para os demais mdulos. As telas que iremos apresentar
so simples, pois no iremos nos preocupar com a parte de design da loja (por ser
apenas didtica).
Desenvolva a pgina da Figura 9.5 e salve-a como o nome de administrati-
vo.html. Voc poder utilizar qualquer editor HTML, porm recomendamos o
FrontPage.

Figura 9.5 Esta pgina foi criada no FrontPage, com todo o texto centralizado e uma
tabela com 3 colunas e uma linha para receber os links. O mais importante aqui a
funcionalidades dos hiperlinks.
Esta pgina contm 3 hiperlinks para as seguintes pginas (as quais sero criadas
mais adiante)
produtos.html
clientes.asp
pedidos.asp

Listagem dos clientes clientes.asp
Esta pgina em ASP permite que se visualizem os clientes cadastrados e que se
remova algum, se necessrio. Crie a pgina como apresentada na Figura 9.6 e, em
seguida, altere o cdigo em HTML para que ele receba a programao em ASP
necessria.
Esta pgina contm uma tabela com 2 linhas e 4 colunas. Alm disto voc dever
inserir um formulrio que ir chamar a pgina excluircliente.asp, que ser cons-
truda mais tarde.

Figura 9.6 Este formulrio foi criado no FrontPage. Foram utilizados uma tabela e um
formulrio com um campo do tipo texto e um boto submit chamando o programa
excluircliente.asp
Para fazer com que o boto chame o excluircliente.asp siga os passos:
Clique com o mouse direito sobre o formulrio.
Escolha a opo Propriedades do formulrio.
Marque a opo Enviar para outro.
Digite o nome do programa em ASP que ir receber os dados.
Marque o mtodo como GET.
Veja na janela seguinte:

Figura 9.7 Este processo foi visto no HTML e define a clusula Action do formulrio.
Utilize o mtodo GET na passagem de parmetro.
Este processo de extrema importncia e voc precisar realiz-lo outras vezes no
desenvolvimento do aplicativo. Portanto, certifique-se de que tenha executado
todas as etapas com sucesso.
Digitando os cdigos em ASP
O FrontPage agilizou muito o trabalho de criao do formulrio e da tabela que ir
mostrar os dados. Agora est na hora de colocarmos o acesso aos dados que esto
no banco de dados que voc criou.
Este trabalho ser dividido em duas etapas: na primeira, iremos conectar o nosso
aplicativo ao banco de dados atravs de componentes que j esto prontos dentro
do ASP. Para isto iremos informar o banco de dados a ser utilizado (curso.mdb) e a
conexo ADO.
Primeira parte: conectando com o banco
de dados
Os cdigos a seguir montaro a conexo com o banco de dados. Voc dever digi-
t-los antes da tag <HTML> (antes de tudo) na sua pgina atual clientes.asp.
1: <%Option Explicit
2: Response.Expires = 0
3: Dim vConexao, vResposta, vPesquisar

4: Set vConexao = Server.CreateObject("ADODB.Connection")
5: vConexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}"
6: vPesquisar = "SELECT * FROM cadastro ORDER BY nome"
7: Set vResposta = vConexao.Execute(vPesquisar)
8: %>
Esta parte da programao de extrema importncia. Ela aparecer em todas as
nossas pginas seguintes. As linhas 1 e 2 so velhas conhecidas e a linha 3 est
declarando as variveis que o programa ir utilizar.
Na linha 4 estamos criando uma instncia do objeto ADODB.Connection, o qual j
est pronto no servidor e permite que seu programa tenha acesso a bancos de
dados instalados no servidor.
Na linha 5 (e depois de criada a instncia) estamos abrindo (vConexao.open) a
conexo com o banco de dados informado. Alm disto ela informa qual o driver a
ser utilizado, que no nosso caso ser o Microsoft Access Driver. A linha dever ser
digitada exatamente como mostrado. Um espao a mais pode fazer com que a
conexo no funcione.
Na linha 6 e 7 estamos realizando uma consulta ao banco de dados. Esta consulta
est sob a forma de uma linguagem muito conhecida que permite acessos a banco
de dados conhecida como SQL (Structured Query Language-Linguagem de Consul-
ta Estruturada). Nesta linha estamos pedindo ao banco de dados para selecionar
todos (representado pelo *) os dados da tabela cadastro ordenados pelo campo
nome (o qual est presente na tabela). O resultado da consulta realizada ser ar-
mazenado na varivel vResposta, na linha 9.
Agora iremos complementar nossa tabela para que ela mostre os dados enquanto
a varivel vResposta no atinja o seu final.
Para isto localize a primeira ocorrncia da tag <TR> no seu cdigo em HTML. Insi-
ra o seguinte cdigo antes desta tag:
<% while not vresposta.EOF %>
Agora apenas complete o ASP nas linhas da tabela. Utilize como referncia as
tags do HTML para posicionar no local onde voc dever digitar:
1: <% while not vresposta.EOF %>
2: <tr>
3: <td width="25%"><%=vResposta("nome")%></td>
4: <td width="25%"><%=vResposta("telefone")%></td>
5: <td width="25%"><%=vResposta("endereco")%></td>
6: <td width="25%"><%=vResposta("email")%></td>
7: </tr>

8: </table>
9: <%
10: vResposta.MoveNext
11: Wend
12: vResposta.close
13: vConexao.close
14: Set vResposta = Nothing
15: Set vConexao = Nothing
16: %>
Vamos entender os cdigos anteriores.
Na linha 1 tem incio um loop que ir durar enquanto (while) vResposta no alcan-
ce o final (EOF). Dentro do loop sero apresentados os campos presentes na
tabela de cadastro. Na linha 10 vResposta orientado a mover para o prximo
registro. Em seguida, na linha 11 o comando Wend informa ao programa para
voltar na linha 1. Nas linhas 12 a 15 as conexes so fechadas.
Veja a listagem completa da pgina anterior. Se algo tiver dado errado voc pode-
r utilizar o programa a seguir:
6: vPesquisar = "SELECT * FROM cadastro ORDER BY nome"
8: %>
9: <html>
10: <head>
11: <title>Nova pagina 1</title>
12: </head>
13: <body>
14: <p align="center"><b><font size="5">Consulta de clientes</font></b></p>
15: <div align="center">
16: <center>
17: <table border="0" width="100%">
18: <tr>
19: <td width="25%" align="center"><b>Nome</b></td>
20: <td width="25%" align="center"><b>Telefone</b></td>
21: <td width="25%" align="center"><b>Endereo</b></td>
22: <td width="25%" align="center"><b>e-mail</b></td>
23: </tr>

25: <tr>
26: <td width="25%"><%=vResposta("nome")%></td>
27: <td width="25%"><%=vResposta("telefone")%></td>
28: <td width="25%"><%=vResposta("endereco")%></td>
29: <td width="25%"><%=vResposta("email")%></td>
30: </tr>
31: </table>
32: <%
34: Wend
35: vResposta.close
36: vConexao.close
39: %>
40: </center>
41: </div>
42: <form method="GET" action="excluircliente.asp">
43: <p align="center"><b>Excluir cliente nmero:
45: <input type="submit" value="Excluir" name="B1"></b></p>
46: </form>
47: </body>
48: </html>
Agora criaremos o programa que receber o cdigo do cliente a ser excludo. Esta
rotina executar um DELETE em todos os registros onde o cdigo seja igual ao
informado pelo usurio.
Excluindo o cliente: excluircliente.asp
A maior parte dos cdigos esto em ASP, com isto voc poder utilizar o prprio
bloco de notas para digitar os cdigos. Na seqncia iremos novamente explicar as
partes do programa. Salve-o como excluircliente.asp.
3: Dim objConn, objRs, strQuery
4: Set objConn = Server.CreateObject("ADODB.Connection")
5: objConn.Open DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}"
6: Dim vcodigo
7: vcodigo = Request("T1")
8: strQuery = "DELETE * FROM cadastro WHERE codigo="&vcodigo
9: Set ObjRS = objConn.Execute(strQuery)
10: objConn.close
11: Set objRS = Nothing

12: Set objConn = Nothing
13: %>
14: <html><head><title>Excluir Cliente</title></head>
15: <body>
16: <p align="center"><strong><font face="Verdana">CLIENTE
17: EXCLUDO!</font></strong></p>
18: </body></html>
As novidades do cdigo anterior comeam na linha 7 onde recebemos o campo T1
que foi criado no formulrio. A linha 8 diz ao programa para EXCLUIR todos os
registros onde o campo cdigo da tabela seja igual varivel vcodigo (a qual foi
recebida na linha 7). Em seguida a conexo encerrada e uma mensagem em
HTML mostrada ao usurio.
No se esquea de alterar a linha 5, colocando o caminho exato do seu banco de
dados.
Pedidos cadastrados: pedidos.asp
Esta pgina em ASP permite que se visualizem e removam os pedidos cadastrados.
Crie uma pgina como apresentada na Figura 9.8.

Figura 9.8 Utilize o FrontPage e crie uma tabela e um formulrio como mostrado na tela.
O formulrio dever chamar a pgina excluirpedidos.asp utilizando o mtodo GET.

O cdigo fonte desta pgina est listado a seguir. Se voc utilizou o FrontPage
para criar a pgina, basta inserir a programao em ASP.
6: vPesquisar = "SELECT * FROM pedidos"
8: %>
9: <html>
10: <head>
12: </head>
13: <body>
14: <p align="center"><b><font size="5">Consulta aos pedidos por cliente</font></b></p>
16: <center>
18: <tr>
19: <td width="16%" align="center"><b>Cliente</b></td>
20: <td width="16%" align="center"><b>Cod.Produto</b></td>
21: <td width="17%" align="center"><b>Descrio</b></td>
22: <td width="17%" align="center"><b>Preo</b></td>
23: <td width="17%" align="center"><b>Qtde</b></td>
24: <td width="17%" align="center"><b>FormaPagamento</b></td>
25: </tr>
27: <tr>
28: <td width="16%"><%=vResposta("Cliente")%></td>
29: <td width="16%"><%=vResposta("Produtos")%></td>
30: <td width="17%"><%=vResposta("Descricao")%></td>
31: <td width="17%"><%=vResposta("Preco")%></td>
32: <td width="17%"><%=vResposta("Quantidade")%></td>
33: <td width="17%"><%=vResposta("Formapagamento")%></td>
34: </tr>
35: </table>
36: <%
38: Wend
39: vResposta.close
40: vConexao.close
43: %>

44: </center>
45: </div>
46: <form method="GET" action="excluirpedidos.asp">
47: <p align="center"><b>Excluir pedidos do cliente nmero:
49: <input type="submit" value="Excluir" name="B1"></b></p>
50: </form>
51: </body>
52: </html>
Repare que utilizamos um cdigo muito semelhante listagem dos produtos. As
mudanas so: na linha 6 o SELECT utilizou a tabela pedidos, e nas linhas 28 a 33
mostramos os campos que esto presentes dentro da tabela pedidos. Caso um
destes nomes esteja diferente da tabela, o ASP retornar erro.
Agora vamos criar a programao do excluirpedidos.asp, o qual ser chamado
pela listagem dos pedidos anterior.
6: Dim vcod
7: vcod = Request.QueryString("T1")
8: strQuery = "DELETE * FROM pedidos WHERE cliente="&vcod
10: %>
11: <HTML><head><title>Excluir Pedidos</title></head>
12: <body> <p align="center"><strong><font face="Verdana">OS PEDIDOS DO CLIENTE:
13: <%Response.Write vcod%> FORAM EXCLUDOS!</font></strong></p> </body> </HTML>
At a linha 6 no temos nenhuma novidade. Na linha 7 estamos recebendo o cam-
po T1 do formulrio e colocando o valor dentro da varivel vcod, ou seja, no for-
mulrio da pgina pedidos.asp o campo dever, necessariamente, se chamar T1.
Na linha 8 estamos dizendo em SQL para apagar todos da tabela pedido onde o
campo cliente seja igual varivel vcod.
Manuteno nos produtos: produtos.html
Em uma loja virtual o proprietrio precisar constantemente inserir e excluir produ-
tos para serem vendidos. Para isto teremos o produtos.asp. Nele o usurio pode-
r digitar o cdigo, a descrio e o preo de um novo produto e, em seguida, te-
clar em executar. Crie a pgina da Figura 9.9:

Figura 9.9 O boto executar chamar produtos.asp.
O cdigo a ser executado quando se clicar no executar (salve-o como produ-
tos.asp) est logo a seguir:
6: Dim T1,T2,T3,Excluir
7: T1 = Request.QueryString("T1")
10: Excluir = Request.QueryString("Excluir")
11: %>
12: <html>
13: <head>
14: <title>Excluso/Incluso Produtos</title>
15: </head>
16: <body>
17: <%
18: If Excluir = False Then
19: strQuery = "INSERT INTO produtos (codigo,descricao,preco) VALUES
('"&T1&"','"&T2&"','"&T3&"') "
21: %>

22: <p><font face="Verdana">O produto <%=T2%> foi <strong> inserido </strong>
23: com sucesso no banco de
24: dados.</font></p>
25: <p> </p>
26: <p><em><strong><font face="Verdana"> Obrigado!
27: </font></strong></em></p>
28: <%Else
29: strQuery = "DELETE * FROM produtos WHERE codigo="&T2
32: %>
33: <p><font face="Verdana">O produto <%=T2%> foi
34: <strong>excludo</strong> com sucesso do banco de
35: dados.</font></p>
36: <p> </p>
37: <p><em><strong><font face="Verdana"> Obrigado! </font>
38: </strong></em></p>
39: <p>
40: <%End If%>
41: </p>
42: </body>
43: </html>
Com isto terminamos o mdulo administrativo. Agora comearemos a desenvolver
a frente da loja, ou seja, o local onde os clientes podero comprar nossos produ-
tos.
A partir de agora utilizaremos ainda mais os recursos do ASP. Por isto, o ideal
que voc no tenha dvidas do que viu at agora. um bom momento para uma
reviso.
Mdulo da frente da Loja
Iniciaremos a parte final de nossa loja virtual.
Trata-se da pgina de venda ao cliente. Atravs dela o cliente poder se cadastrar
e ento comear suas compras. J untamente com esta etapa, aprenderemos alguns
detalhes a mais sobre comandos em ASP.
muito importante compreender a estrutura das pginas que iro formar a loja de
venda ao cliente. Para isto lhe apresentaremos a hierarquia das pginas.

Figura 9.10 Esta a arvore que representa a estrutura de todas as pginas que iremos
criar para a venda ao cliente
O funcionamento o seguinte: o cliente ao entrar na loja (index.html) poder cli-
car no link para a pgina comprar.htmou cadastro.htm. Caso ele acesse a
pgina comprar.htm, dever informar seu nome e sua senha. De posse destes
dados a pgina comprar.htm ir chamar a valida.asp, a qual verifica se o usurio j
est cadastrado. Caso ele esteja cadastrado, a pgina ser direcionada para as
opes.asp, que mostra todos os produtos disponveis na loja. Nesta tela ele deve-
r informar a quantidade de produto de que necessita e colocar no carrinho. Na
pgina carrinho.asp, todas as compras do usurio so armazenadas na tabela
temporria. Quando ele efetivar a compra (efetiva.asp) os dados do pedido sero
repassados para a tabela pedidos, que representa um pedido fechado pelo cliente.
Criando a pgina principal: index.htm
Esta primeira pgina a porta de entrada do cliente na loja. Atravs dela ele ser
levado s pginas: comprar.htm ou cadastro.htm (um detalhe que em nossa loja
o cliente dever se cadastrar primeiro para depois comprar).
Criaremos uma pgina simples no FrontPage, a qual dever conter os dois links
como mostrados no pargrafo anterior. Salve esta pgina como index.htm.

Figura 9.11 Crie esta pgina como voc achar melhor. No entanto no se esquea de
criar os dois links (comprar e cadastrar)
Isso tudo que precisamos na primeira tela.
Agora criaremos o formulrio de cadastro.
Pgina de cadastro: cadastro.htm
Crie o formulrio mostrado a seguir tomando os seguintes cuidados:
1) Cada campo ter como nome as trs primeiras letras do seu contedo, por
exemplo:
Telefone - tel
Senha - sen
Estes campos devero ser informados em cada caixa de texto do formulrio.
2) O boto enviar chamar o arquivo cadastro.asp utilizando o mtodo GET.

Figura 9.12 Este o formulrio de compra. Perceba que foi utilizada uma tabela com 4
colunas para que os campos fiquem alinhados dentro do formulrio. O boto submeter
dever chamar a pgina cadastro.asp
Agora criaremos a pgina que receber os dados informados e cadastr-los no
banco de dados.
Digite o programa seguinte e salve-o como cadastro.asp.
1: <%
2: Option Explicit
3: Response.Expires=0
4: Dim vconexao, vresposta, vpesquisar
5: Set vconexao= Server.CreateObject("ADODB.Connection")
6: vconexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}"
7: Dim nom,sen,ema,rua,bai,com,num,apt,ref,tel,cid
8: nom=Request.QueryString("nom")
9: sen =Request.QueryString("sen")
10: ema=Request.QueryString("ema")
11: rua=Request.QueryString("rua")
12: bai=Request.QueryString("bai")
13: com=Request.QueryString("com")
14: num=Request.QueryString("num")
15: apt=Request.QueryString("apt")
16: ref=Request.QueryString("ref")
17: tel=Request.QueryString("tel")
18: cid=Request.QueryString("cid")
19: %>

20: <html>
21: <head><title>Cadastro</title></head>
22: <body>
24: <%If nom="" or sen="" or ema="" or rua="" or bai="" or num="" or apt="" or tel="" or
cid="" then%>
25: <font size="5">Voc deixou algum campo abrigatrio do cadastro em branco.</font>
26: <p align="center"><font size="5"><b><font color="#000080">
27: Favor completar o cadastro.</font></b>
28: </font></p>
29: <p align="center"> </p>
30: <p align="center"><b><font size="5" color="#FF0000"><a href="#"> Retornar </a>
31: </font> </b><font size="5">
<%else
32: vpesquisar = "INSERT INTO cadastro (no-
me,senha,email,rua,bairro,complemento,numero,apto,referencia,telefone,cidade)
VALUES ('"&nom&"','"&sen&"','"&ema&"','"&rua&"','"&bai&"','"&com&"','"&num&"','
"&apt&"','"&ref&"','"&tel&"','"&cid&"')"
33: set vresposta = vconexao.Execute(vpesquisar)
34: vconexao.close
35: Set vresposta=Nothing
36: Set vconexao=Nothing
37: %>
38: </font></p>
39: <p><font size="5">Parabns <%=nom%>. </font></p>
40: <p><font size="5">Agora voc o mais novo cliente, basta
41: clicar no link abaixo para efetuar a sua primeira compra.</font></p>
42: <p> </p>
43: <p align="center"><font size="5"><a href="comprar.htm"> <b>Comprar</b></a>
44: </font> </p><%end if%>
45: <p> </p>
46: </body></html>
Vamos analisar o programa anterior. At a linha 23 no temos nenhuma novidade.
Na linha 24 o programa verifica se algum dos campos obrigatrios do cadastro
ficou em branco. Caso isto tenha acontecido, uma mensagem ser apresentada ao
usurio e um link ser montado para ele retornar pgina anterior. Caso ele tenha
preenchido todos os campos, na linha 32 criamos a varivel que ir executar uma
instruo SQL para inserir os dados nos respectivos campos da tabela cadastro.
Neste caso um link ser apresentado para que ele possa entrar com sua senha e
acessar os itens disponveis.

Identificando o cliente: comprar.htm
Nossa prxima etapa validar o cliente. Para fazer isto, iremos convid-lo a digitar
seu nome de cadastro, juntamente com a senha. Este formulrio ir chamar o
valida.asp, que ir pesquisar, com base no nome e na senha, se o usurio j est
cadastrado.
Primeiramente crie um formulrio no FrontPage como o mostrado na Figura 9.13.
Um detalhe: o campo nome dever se chamar nom e o campo senha ser sen.

Figura 9.13 Este formulrio dever chamar a pgina valida.asp.
Verificando se o cliente est cadastrado
Agora vamos criar o programa que receber o nome e a senha. Com esta informa-
o ser feito um SELECT no banco de dados que procurar pela pessoa. Digite o
programa a seguir e salve-o como valida.asp.
6: Dim nom, sen, cd, no
7: nom = Request.QueryString("nom")
8: sen = Request.QueryString("sen")

9: if nom = "" or sen = "" then
10: Response.redirect "comprar.htm"
11: End if
12: strQuery="SELECT * FROM cadastro WHERE nome='"&nom&"' AND senha='"&sen&"' "
14: if not objRS.eof then
15: cd = objRS("codigo")
16: no = objRS("nome")
17: Response.Cookies("kodigo")= cd
18: Response.Cookies("knome") = no
19: end if
20: %>
21: <html>
22: <head><title></title></head>
23: <body>
24: <%if objRS.eof then%>
25: <p align="center"><font color="#008080" face="Verdana"> Tentenovamente
26: <big><big>Usurio incorreto! </big></big> </font> </p><p align="center">
27: <a href="JavaScript:history.go(-1)" target="_self"> <font color= "#008080"
28: </font></a></p>
29: <%else%>
30: Bem vindo(a),</p><a href="opcoes.asp"> <font color=" #008080" face="Verdana">
31: <big><big>Clique aqui para iniciar suas compras! </big></big> </font> </a></p><p>
32: <%end if%>
33: </body>
34: </html>
Vamos entender a funcionalidade deste cdigo. Na linha 9 o programa verifica se o
usurio deixou as variveis de nome e senha em branco. Neste caso ele ser redi-
recionado automaticamente para a tela anterior.
Na linha 12 o sistema tenta encontrar um usurio com o mesmo nome e senha
informados no formulrio. Na linha 14 a 19 temos o programa seguinte:
if not objRS.eof then
cd = objRS("codigo")
no = objRS("nome")
Response.Cookies("kodigo")= cd
Response.Cookies("knome") = no
end if
Neste cdigo o sistema verifica se o objRS no chegou ao fim (eof = fim de arqui-
vo), caso no seja o final do arquivo, ento o sistema ir criar dois cookies (expli-
cados mais adiante).

Response.Cookies
Aqui temos uma novidade, o cookie. Neste caso, o cookie funciona como se fosse
uma varivel que existir enquanto o usurio no fechar o navegador.
O cookie ser criado no momento em que o sistema encontra o usurio cadastra-
do, e guarda temporariamente seu cdigo e nome. Ele ser utilizado quando o
usurio fechar sua compra.
Iniciando a venda: carrinho.asp
Agora que o cliente j est cadastrado, podemos comear a apresentar-lhe os
produtos disponveis na loja. Criaremos uma listagem com todos os itens da loja
para que o cliente escolha o quanto quer comprar de cada um.
Aps o cliente selecionar as quantidades, ele dever clicar no boto colocar no
carrinho, o qual chamar o programa carrinho.asp.
Voc no precisar criar esta pgina no FrontPage. Como sua programao um
pouco complexa, iremos lhe apresentar todo o cdigo para ser digitado. Em segui-
da iremos detalhar com comentrios.

Figura 9.14 Esta tela apresentar todos os itens que o cliente poder comprar.
O boto colocar no carrinho ir chamar o carrinho.asp

Segue agora o cdigo em ASP para gerar a tela anterior. Salve como opcoes.asp.
6: strQuery= "SELECT * FROM Produtos"
7: Set ObjRS= objConn.Execute(strQuery)
8: %>
9: <html>
10: <head>
11: <title>Opes</title>
12: </head>
13: <body>
14: <form method="GET" action="carrinho.asp">
15: <table border="0" width="100%" cellspacing="0" cellpadding="0">
16: <tr>
17: <td width="100%"><br>
19: <center>
20: <table border="0" width="100%" cellspacing="1" cellpadding="0">
21: <tr>
22: <td width="7%" bgcolor="#000080"><font color="#FFFFFF" size="2" face
23: ="Verdana"><b>Cdigo</b></font></td>
24: <td width="57%" bgcolor="#000080"><font color="#FFFFFF" size="2"
25: face="Verdana"><b>Produto</b></font></td>
26: <td width="16%" bgcolor="#000080" align="center"><font color="#FFFFFF"
27: size="2" face="Verdana"><b>Qtde</b></font></td>
28: <td width="20%" bgcolor="#000080"><font color="#FFFFFF" size="2"
29: face="Verdana"><b>Peo</b></font></td>
30: </tr>
31: <% dim p
32: p = 0
33: while Not objRs.EOF
34: p=p+1%>
35: <tr>
36: <td width="7%" bgcolor="#E6E6E6"><font color="#000000"><%=objRS ("codigo")%>
37: </font></td>
38: <td width="57%" bgcolor="#E6E6E6"><%=objRS ("descricao")%></td>
39: <td width="16%" bgcolor="#E6E6E6" align="center"><input type="text"
40: name="qtde<%=p%>" size="6"> </td>
41: <td width="20%" bgcolor="#E6E6E6"><%=FormatNumber(objRs("preco"),2)%></td>
42: </tr>
43: <%
44: objRs.MoveNext

45: Wend
46: objRs.close
47: objConn.close
49: Set objRs = Nothing
50: Set objConn = Nothing
51: %>
52: </table>
53: </center>
54: </div>
55: <p> </td>
56: </tr>
57: </table>
58: <p align="center"><input type="submit" value="Selecionar" name="B1"><input
59: type="reset" value="Redefinir" name="B2"></p>
60: </form>
61: <p> </p>
62: </body>
63: </html>
Este cdigo (apesar de grande) simples. Ele consiste basicamente em uma sim-
ples listagem de todos os itens presentes na tabela de produtos. No entanto uma
mudana sutil faz a grande diferena. Na linha 31 uma varivel de nome (p) foi
criada e a cada novo produto mostrado ela acrescentada em uma unidade na
linha 34. Ela est sendo aproveitada na linha 40 para fazer parte do nome do
campo quantidade. Isto necessrio porque cada produto precisar de um
campo quantidade e os nomes dos campos no podem se repetir.
Colocando no carrinho: carrinho.asp
Na pgina anterior o cliente escolheu a quantidade dos itens de seu interesse.
Agora precisaremos receber as quantidades escolhidas e inseri-las em uma tabela
temporria onde os produtos sero mantidos at que ele efetive sua compra.
Dois detalhes so importantes agora. Primeiro que utilizaremos duas tabelas ao
mesmo tempo, algo que ainda no fizemos; e segundo que utilizaremos o cookie
que criamos logo quando o usurio entrou com sua senha.
A finalidade do prximo programa mostrar todos os itens que o usurio escolheu,
solicitando a ele a forma de pagamento escolhida. Alm disto criaremos uma vari-
vel que ir totalizar suas compras. Veja a janela a seguir:

Figura 9.15 Nesta tela mostraremos os detalhes a respeito da compra do cliente. Alm
disto ele poder escolher a forma de pagamento e ento efetivar sua compra.
O cdigo bastante extenso, porm simples. Digite-o com ateno e procurando
entender cada comando. Salve-o como carrinho.asp.
1: <%
2: Option Explicit
7: 'Declarao das variveis para manipulao dos produtos
8: Dim p, vco, vde, vqu, vpr, vdt, vhr, var, total, no2,vcl,cd2
9: Dim vincluir, vDeletar, vRetorno
10: Dim listaprod,todosprod,strQuery
11: 'Recebe o contedo do cookie criado na validao do usurio
12: vcl = Request.Cookies("Kodigo")
13: 'Se o contedo do cookie estiver em branco o programa volta para comprar.htm
14: if vcl = "" then
15: Response.redirect "comprar.htm"
16: End if
17: vDeletar = "DELETE * FROM temporaria WHERE cliente="&vcl
18: Set vRetorno = vConexao.Execute(vDeletar)
19: listaprod = "SELECT * FROM produtos"
20: set todosprod = vConexao.execute(listaprod)
21: p = 0
22: total = 0
23: While Not todosprod.EOF

24: p = p + 1
25: var = "qtde"&p
26: vco = todosprod("codigo")
27: vde = todosprod("descricao")
28: vpr = todosprod("preco")
29: vdt = date()
30: vhr = time()
31: if Request.QueryString(var) <> "" Then
32: vqu = Cint(Request.QueryString(var))
33: if vqu > 0 then
34: total = total + (vpr * vqu)
35: 'Lanca no arquivo temporario
36: vincluir = "INSERT INTO temporaria (cliente,produtos,descricao, preco, data, hora,
quantidade) VALUES '"&vcl&"', '"&vco&"', '"&vde&"' , '"&vpr&"', '"&vdt&"',
'"&vhr&"','"&vqu&"')"
37: Set vresposta = vconexao.Execute(vincluir)
38: vqu = 0
39: end if
40: end if
41: 'Busca o prximo item do cadastro
42: todosprod.MoveNext
43: Wend
44: vpesquisar = "SELECT * FROM temporaria WHERE cliente="&vcl
45: set vresposta = vConexao.execute(vpesquisar)%>
46: <html>
47: <head>
49: </head>
50: <body
51: <form method="GET" action="efetiva.asp">
52: <table border="1" cellpadding="2" cellspacing="1" width="100%">
53: <tr>
54: <td width="100%" colspan="5" align="center"><b><font size="4" face="Arial">
55: Produtos em seu carrinho at o momento</font></b></td>
56: </tr> <tr>< td width="11%" bgcolor="#000000">
57: <p align="center"><b><font face="Arial" color="#FFFFFF"
58: size="2">Produto</font></b></td>
59: <td width="57%" bgcolor="#000000"><b><font face="Arial" color="#FFFFFF"
60: size="2">Descrio</font></b></td>
61: <td width="10%" bgcolor="#000000">
63: size="2">Quant.</font></b></td>
64: <td width="11%" bgcolor="#000000"><p align="center"><b><font face="Arial"
65: color="#FFFFFF" size="2">Preo</font></b></td>
66: <td width="11%" bgcolor="#000000">

68: size="2">Total</font></b></td></tr>
69: <%while not vResposta.eof%>
70: <tr>
71: <td width="11%">
72: <p align="center"><font face="Arial" size="2"><%=vResposta("Produtos")%>
73: </font></td>
74: <td width="57%"><font face="Arial" size="2"><%=vResposta("descricao")%>
75: </font></td> <td width="10%">
76: <p align="center"><font face="Arial" size="2"><%= vResposta("quantidade")%>
77: </font></td> <td width="11%"><p align="center"><
78: font face="Arial" size="2">R$ <%=FormatNumber(vResposta("preco"),2)%>
79: </font></td> <td width="11%">
80: <p align="center"><font face="Arial" size="2">R$
81: <%=FormatNumber(vResposta("preco") * vResposta("quantidade"),2)%></font></td>
82: </tr>
83: <%vResposta.MoveNext
84: Wend%>
85: </table>
86: <p align="center"><b><font size="5" face="Arial">Selecione a forma
87: de Pagamento</font></b></p>
88: <p align="center"><font face="Arial"><input type="radio" value="V1"
89: name="R1">Boleto <input type="radio" value="V2" name="R1">Depsito
90: <input type="radio" value="V3" checked name="R1">na entrega</font></p>
91: <p align="center"><font face="Arial">TOTAL: <%=formatnumber(total,2)%>
92: </font> </p> <p align="center"> <input type="submit" value="Enviar compra"
93: name="B1"></p></form>
94: </body>
95: </html>
Efetivando a compra: efetiva.asp
Chegou a hora de efetivar a compra do cliente. At o momento todos os produtos que
ele escolheu esto na tabela temporaria. O programa que iremos criar agora ir tratar
de buscar todos os itens nesta tabela e lan-los na tabela pedidos (definitivamente).
Alm disto o programa colocar a forma de pagamento escolhida e em seguida
apagar a tabela temporria.
O cdigo do efetiva.asp est logo adiante:
1: <%
2: Option Explicit

7: Dim vDeletar, vRetorno, no, vcl, forma, vConectar , listaprod
8: Dim todosprod,strQuery
9: forma = Request.QueryString("R1")
10 no = Request.Cookies("Knome")
11 vcl = Request.Cookies("Kodigo")
12 'Copia dos produtos da temporaria para a pedidos
13 vDeletar = "INSERT INTO pedidos SELECT * FROM temporaria WHERE cliente = "&vcl
14 Set vRetorno = vConexao.Execute(vDeletar)
15 vDeletar = "UPDATE pedidos SET formapagamento='"&forma&"' WHERE cliente = "&vcl
16 set vRetorno = vConexao.Execute(vDeletar)
17 vDeletar = "DELETE * FROM temporaria WHERE cliente="&vcl
18 Set vRetorno = vConexao.Execute(vDeletar)
19 'Neste ponto os Cookies so apagados
20 Response.Cookies("kodigo")= ""
21 Response.Cookies("knome")= ""
22 %>
23 <html>
24 <head>
25 <title>Obrigado</title>
26 </head>
27 <body>
28 <p align="center"><b><font face="Arial" size="5">OBRIGADO(A)</font></b></p>
29 <p align="center"> </p>
30 <p align="center"><b><font face="Arial" size="3">Dentro de instantes voc
31 receber uma ligao</font></b></p>
32 <p align="center"><b><font face="Arial" size="3">confirmando seu
33 pedido.</font></b></p><p align="center"> </p>
34 <p align="center"><b><font face="Arial" size="3">Volte sempre!</font></b></p>
35 <p> </p>
36 </body>
37 </html>
Concluindo a loja
Ufa! Enfim terminamos nosso primeiro aplicativo em ASP. A loja virtual que voc
acabou de concluir no possui todos os recursos de uma loja para ser utilizada na
Internet. No entanto, este primeiro contato serviu para demonstrar como reali-
zado o acesso a banco de dados na Internet.
Com os conhecimentos que voc adquiriu at aqui, j pode implementar diversos recur-
sos nas suas pginas HTML. Sugiro que voc realize buscas na Internet onde vai encon-
trar diversos sites com bons exemplos de rotinas em ASP prontas para voc utilizar.
Um curso completo de ASP lhe apresentar vrios outros recursos. Mas como voc
vai perceber no prximo exemplo (Controle de estoques) o desenvolvimento de
aplicaes simples passa sempre pelos mesmos recursos j apresentados.
208

Chegou a hora de desenvolvermos mais um sistema para ser utilizado em um am-
biente on-line. Criaremos um sistema de controle de estoques o qual poder servir
de base para programas maiores.
Conforme voc vai perceber, o desenvolvimento de aplicativos para uma Intranet
segue os mesmo princpios da Internet. Talvez a grande diferena esteja no fato
de que, um aplicativo como este rodando na Internet, precisar de uma segurana
que permita um alto grau de confiana no que diz respeito disponibilidade e
confiabilidade das informaes mantidas.
O sistema proposto simples e poder ser utilizado como esqueleto de um sistema
maior. Ele controlar fornecedores e os produtos que eles disponibilizam. Algumas
consultas foram criadas como: listagem do estoque atual, produtos com estoques
mnimos, produtos de determinado fornecedor, pedidos em aberto, entre outros.
Voc ver que pequenas mudanas na clusula SQL permitiro criar novas consul-
tas de uma forma muito rpida.
Uma tcnica que voc aprender a partir deste momento a reutilizao de cdi-
go. Logicamente que no entraremos pela orientao a objetos, cujo principal
paradigma a reutilizao de cdigo, mas lhe mostraremos como trabalhar de
forma a reutilizar cdigos de pginas j testadas.
Para criar este sistema, voc dever ter uma nova pasta dentro de sua pasta de
execuo de ASP. Nesta nova pgina estaro todos os arquivos que iro compor a
loja (inclusive o banco de dados em Access).
Lembramos que todos os cdigos do Controle de Estoques esto disponveis no
nosso site.
Implementando um Controle de Estoques 209

Utilizando includes
Quando voc digitou os scripts da loja, deve ter percebido que alguns trechos de
cdigos se repetem em vrias pginas com mudanas mnimas. Alguns destes
cdigos so os comandos que permitem que seja criada a conexo com o banco
de dados.
Uma forma de evitar esta redigitao seria a utilizao dos arquivos includes.
Estes arquivos ficaro fora do programa principal e sero chamados em tempo de
execuo. Dentre as vrias vantagens de se utilizar esta tcnica, temos o fato de
que, se a conexo com o servidor precisar mudar, precisaremos alterar o cdigo
apenas no arquivo include.
Por exemplo, voc deve ter percebido que os cdigos a seguir aparecem em vrias
pginas da loja. O que o include prope que voc crie um arquivo com a pro-
gramao padro e ela ser chamada no momento devido de sua utilizao.
5: objConn.Open DBQ=c:/pasta/estoque.mdb;Driver={Microsoft Access Driver (*.mdb)}" %>
Este cdigo dever ser digitado no bloco de notas e salvo com o nome da-
dos.asp. (o caminho c:/pasta/estoque.mdb dever ser alterado para representar o
caminho do banco de dados no seu computador). Aps criar este arquivo, sim-
plesmente chame sua incluso em cada arquivo que necessite de sua utilizao.
Veja como fazer:

Os cdigos que se seguem esto utilizando este recurso. Voc ver que a criao
de novas pginas com acesso a dados ser muito mais simples.
Reutilizando pginas inteiras
Um outro recurso que iremos apresentar no controle de estoque a reutilizao de
uma pgina para atender a vrias tarefas diferentes. Por exemplo: teremos apenas
uma pgina excluir.asp que far a excluso de registros em tabelas diferentes.
Voc deve estar se perguntando: Como iremos fazer isto? Simples! J untamente
com o cdigo a ser excludo, passaremos tambm o nome da tabela e o campo a
ser utilizado na excluso. Desta forma, com apenas uma pgina excluiremos dados
em vrias tabelas.

Sempre que possvel voc dever utilizar este recurso. Ele simplificar o seu site e
diminuir o nmero de pginas a serem desenvolvidas.
Inserindo figuras
Outro recurso importante, e que freqentemente voc precisar utilizar, a apre-
sentao de figuras na tela. Por exemplo: o usurio em algumas situaes precisa-
r ver a Figura do produto que ele est adquirindo. Isto simples de ser feito: no
cadastro do produto informaremos o nome da Figura a ser utilizada pelo produto
e, no momento de sua listagem, colocaremos a Figura na tela, conforme o seu
nome especificado no banco de dados.
Conhecendo a estrutura do sistema
Vamos agora conhecer o funcionamento do nosso controle de estoque. Voc ver
que ele tem uma estrutura simples, porm funcional. Uma tela principal levar o
usurio a acessar todo o sistema. Veja:

Figura 10.1 Tela inicial do sistema de controle de estoques.
Nesta tela podemos ter a idia exata de como o sistema funcionar. Trata-se de
uma simplificao do que seria um sistema de controle de estoque completo. V-
rios mdulos so necessrios para que ele seja um sistema comercialmente aceito.
No entanto, ele poder servir como esqueleto para um sistema mais completo.

Entendendo os mdulos
Nosso sistema tem uma estrutura modular de forma a facilitar sua compreenso.
Nesta etapa explicaremos qual a tarefa executada por cada um dos mdulos, sim-
plificando a compreenso do cdigo em ASP. Sugerimos que ao criar as tabelas
voc j cadastre alguns registros diretamente nela.
Fornecedor
Cadastro dos fornecedores que iro distribuir os produtos.
Produtos
Cadastro dos produtos que sero controlados pelo sistema. Como uma restrio
temos o fato de que todos os produtos devero ter um fornecedor. Com isto, voc
vai precisar cadastrar pelo menos um fornecedor antes de cadastrar os produtos.
No produto informaremos a quantidade em estoque atual e a quantidade mnima
que o produto dever conter no estoque. Aps os movimentos (entradas e sadas
do estoque) poderemos ter uma apresentao dos produtos que esto com o es-
toque mnimo.
Pedidos
Cadastro dos pedidos de compra no sistema.
Itens dos pedidos
Informao sobre os produtos e quantidades de cada item no pedido.
Concluir pedido
Realiza o fechamento dos pedidos em aberto.
Estoques (Abater| Adicionar)
Permite que se aumente ou diminua a quantidade de itens no estoque.
Consultas
Realiza diversas consultas ao sistema. Ex: pedidos, fornecedores, produtos com
estoque mnimo, entre outras.

Suporte
Permite que se tenha acesso calculadora e ao calendrio do sistema.
Pgina inicial
A pgina inicial do sistema chamar todas as outras. Ela foi criada no FrontPage e
trata-se de uma tabela simples com 4 colunas e 7 linhas. Dentro de cada uma das
clulas foram criados links para cada uma das pginas.
Crie-a no FrontPage e salve com o nome de index.htm(voc precisar criar uma
pasta para este sistema para que os arquivos no fiquem juntos com a loja virtual
criada no captulo anterior, no entanto no se esquea de que a pasta do servidor
dever executar ASP, conforme explicado no Captulo 2). Digite o programa a se-
guir e salve-o como index.htm.
index.htm
1: <html>
2: <head>
3: <title>SISTEMA DIDTICO PARA CONTROLE DE ESTOQUES v0.1</title>
4: </head>
5: <body>
6: <script language = "JavaScript">
7: function calc()
8: {
9: window.open('calculadora.html','','toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbars=yes,resizable=no,menubar=no,width=290,height=250')
10: }
11: </script>
12: <script language = "JavaScript">
13: function calen()
14: {
15: window.open('calendario.html','','toolbar=no,location=no,directories=no,status=no,menubar=n
o,scrollbars=yes,resizable=no,menubar=no,width=290,height=250')
16: }
17: </script>
18: <p><br>
19: </p>
20: <p align="center"><b><font face="Arial" size="5">SISTEMA DIDTICO PARA
CONTROLE<br>
21: DE ESTOQUES v0.1</font></b></p>
24: <center>

26: <tr>
27: <td width="25%" align="center" bgcolor="#000080"><font size="2" face="Arial"
28: color="#FFFFFF"><b>CADASTROS</b></font></td>
30: color="#FFFFFF"><b>MOVIMENTOS</b></font></td>
32: color="#FFFFFF"><b>CONSULTAS</b></font></td>
34: color="#FFFFFF"><b>SUPORTE</b></font></td>
35: </tr>
36: <tr>
37: <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a
38: href="cadas_fornecedor.htm">Fornecedor</a></font></td>
40: href="cadas_pedidos.asp">Pedidos</a></font></td>
42: href="Consul_Ped_atendidos.asp">Pedidos
43: atendidos</a></font></td>
45: href="JavaScript:calc()">Calculadora</a></font></td>
46: </tr>
47: <tr>
49: href="cadas_Produtos.asp">Produtos</a></font></td>
51: href="itenspedido.asp">Itens
52: do pedido</a></font></td>
54: href="Consul_Ped_naoatendidos.asp">Pedidos no atendidos</a></font></td>
56: href="JavaScript:calen()">Calendrio</a></font></td>
57: </tr>
58: <tr>
59: <td width="25%" align="center" bgcolor="#F0EBFE"></td>
60: <td width="25%" align="center" bgcolor="#F0EBFE"><font size="2" face="Verdana"><a
61: href="concluir_pedido.asp">Concluir pedido</a></font></td>
63: href="fornecedores.asp">Fornecedores</a></font></td>
65: </tr>
66: <tr>
69: href="abater_estoque.htm">Estoque(Abater)</a></font></td>

71: href="estoque.asp">Produtos (estoque)</a></font></td>
73: </tr>
74: <tr>
77: href="adicionar_estoque.htm">Estoque(Adicionar)</a>
78: </font></td>
80: href="estoque_min.asp">Estoque mnimo</a></font></td>
82: </tr>
83: </table>
84: </center>
85: </div>
86: <p align="center"><br>
87: <br>
88: </body>
89: </html>
A pgina anterior representa a entrada no sistema de controle de estoques. Atra-
vs dela o usurio poder acessar as principais funes do programa. Aqui temos
algumas novidades: na linha 7 e na linha 13 temos duas funes que abrem as
pginas calculador.html e calendrio.html respectivamente. As chamadas a estas
funes so feitas nas linhas 45 e 56. Perceba que a linha 9 e a linha 15 so maio-
res que as demais e voc NO poder dividir estas linhas em duas. Ou seja, mes-
mo que as linhas digitadas fiquem enormes, no as divida.
Por enquanto vamos encerrar nossas atividades no HTML e passarmos criao
das tabelas a serem utilizadas no sistema.
Criando as tabelas
Nesta etapa criaremos o banco de dados em Access que ser utilizado pelo nosso
sistema. Partimos do princpio de que voc j conhea o funcionamento dos banco
de dados relacionais (visto no Captulo 3) ou que saiba como criar tabelas em um
banco de dados Access.
A seguir temos a estrutura das tabelas utilizadas pelo nosso sistema. Voc dever
salvar o banco de dados com o nome de: estoque.mdb. Sugerimos que, medi-
da em que cria as tabelas, v inserindo dados aleatoriamente para que comece a
ver os resultados enquanto cria os cdigos em ASP.

Contedo das tabelas
Na Figura 10.2 voc pode ver as tabelas depois de criadas no Access.

Figura 10.2 Aqui temos as 4 tabelas que nosso sistema ir utilizar.
Tabela: Fornecedor
Mantm os dados cadastrais dos fornecedores.
Tabela: Produtos
Armazena os produtos para serem controlados pelo sistema. Antes de cadastrar
um produto, o fornecedor daquele produto j dever ter sido cadastrado.
Tabela: Pedidos
Armazena a relao de pedidos de compra realizados no sistema.
Tabela: Itens_pedidos
Armazena os itens correspondentes a cada um dos pedidos. Para cadastrar um
item de pedido, o pedido dever ter sido cadastrado primeiro.

Estrutura da tabela: Fornecedor
Nome do campo Tipo de dados
Codigo Autonumerao
Nome Texto
Telefone Texto
Email Texto
Pessoa Texto
Estrutura da tabela: Produtos
Codigo Nmero
Descricao Texto
Estoque Nmero
Estoquemin Nmero
Precovenda Moeda
Precocompra Moeda
Fornecedor Nmero
Foto Texto
O campo foto ir receber o nome da foto a ser apresentada quanto o produto for
listado na tela.
Estrutura da tabela: Pedidos
Pedidos Autonumerao
Fornecedor Nmero
Data Data/Hora
Valor Moeda
Posicao Sim/No
Estrutura da tabela: itens_pedidos
Codigo_pedido Nmero
Codigo_produto Nmero
Quantidade Nmero
Preco Moeda

Aps criar todas as tabelas, estamos prontos para iniciar a construo das pginas
em ASP que iro manipular dados no banco de dados. Verifique se todos os cam-
pos foram digitados corretamente. Perceba que no utilizamos acentuao ou cedi-
lha nos nomes dos campos, isto evitar erros na execuo das pginas dinmicas
que acessem informaes nos campos onde os nomes no coincidirem.
Manuteno de fornecedores
So duas as pginas para manuteno na tabela de fornecedores. A primeira (ca-
das_fornecedor.HTML) possui um formulrio onde o usurio digitar os dados. A
segunda (cadas_fornecedor.asp) ir receber os dados e em seguida inseri-los na
tabela.

Figura 10.3 Voc poder criar esta tela no FrontPage ou digitar os
cdigos mostrados a seguir.
O nome dos campos no formulrio deveram ser: nom, tel, ema e pes respecti-
vamente. O boto dever chamar a pgina cadas_fornecedor.asp
Segue a listagem da pgina citada: cadas_fornecedor.htm.
1: <html>
2: <head>
3: <title>Cadastro de fornecedor</title>
4: </head>

5: <body>
6: <p align="center"><font face="Verdana"><b>Cadastro de fornecedor</b></font></p>
7: <hr>
8: <form method="GET" action="cadas_fornecedor.asp">
9: <table border="0" width="100%" cellspacing="1">
10: <tr>
11: <td width="33%"><font face="Verdana" size="2"><b>Empresa</b></font></td>
12: <td width="67%"><input type="text" name="nom" size="52"></td>
13: </tr>
14: <tr>
15: <td width="33%"><font face="Verdana" size="2"><b>Telefone</b></font></td>
16: <td width="67%"><input type="text" name="tel" size="20"></td>
17: </tr>
18: <tr>
19: <td width="33%"><font face="Verdana" size="2"><b>E-Mail</b></font></td>
20: <td width="67%"><input type="text" name="ema" size="52"></td>
21: </tr>
22: <tr>
23: <td width="33%"><font face="Verdana" size="2"><b>Pessoa de contato</b> </font> </td>
24: <td width="67%"><input type="text" name="pes" size="52"></td>
25: </tr>
26: </table>
27: <p align="center"><input type="submit" value="Cadastrar" name="B1">
28: <input type="reset" value="Limpar" name="B2"></p>
29: </form>
32: <p align="center"><br>
33: </p><p align="right"><b><font face="Verdana" size="1">
34: <a href="index.htm">|Voltar|</a></font></b></p>
35: </body>
36: </html>
Recebendo os dados do formulrio: cadas_fornecedor.asp
Agora criaremos a pgina que receber os dados do fornecedor e em seguida os
cadastrar no banco de dados.
1: 
2: <%
3: Dim vnome, vtelefone, vemail, vpessoa
4: vnome = Request("nom")
5: vtelefone = Request("tel")
6: vemail = Request("ema")
7: vpessoa = Request("pes")

8: strQuery = "INSERT INTO fornecedor (nome,telefone,email,pessoa) Values
('"&vnome&"','"&vtelefone&"','"&vemail&"','"&vpessoa&"')"
9: Set ObjRs = objConn.Execute(strQuery)
10: %>
11: <html>
12: <head>
13: <title>Fornecedor</title>
14: </head>
15: <body>
20: <p align="center"><b><font face="Verdana">
21: Dados Includos!!!</font></b></p>
22: </body>
23: </html>
Aps digitar o cdigo anterior, salve-o como cadas_fornecedor.asp. Em seguida
experimente cadastrar alguns fornecedores. S lembrando: no divida a linha 8.
Cadastro de produtos
Agora comearemos o cadastro de produtos. Esta pgina possui um recurso inte-
ressante que a montagem dos fornecedores disponveis em uma lista de seleo.
Com isto, o usurio do sistema no precisa digitar o nome do fornecedor e sim
selecion-lo em uma lista.
Digite o cdigo a seguir e salve-o como cadas_produtos.asp
2: <%
3: strQuery = "SELECT * From fornecedor"
5: %>
6: <html>
7: <head>
8: <title>Produtos</title>
9: </head>
10: <body>
11: <p align="center"><font face="Verdana"><b>Cadastro de produtos</b></font></p>
12: <hr>
13: <form method="GET" action="inclui_Produtos.asp">
15: <tr>

16: <td width="33%"><font face="Verdana" size="2"><b>Cdigo</b></font></td>
17: <td width="67%"><input type="text" name="cod" size="10"></td>
18: </tr>
19: <tr>
20: <td width="33%"><font size="2" face="Verdana"><b>Fornecedor</b></font></td>
21: <td width="67%"><select size="1" name="for">
22: <%While not objRs.eof%>
23: <option value="<%=objrs("codigo")%>"><%=objrs("nome")%></option>
24: <%
25: objRs.movenext
26: wend
27: objRs.Close
28: objConn.Close
30: Set objConn= Nothing
31: %>
32: </select></td>
33: </tr>
34: <tr>
35: <td width="33%"><font face="Verdana" size="2"><b>Arquivo com a foto </b></font> </td>
36: <td width="67%"><input type="text" name="foto" size="20"><b><font size="1"
37: face="Verdana">(Ex: nome.gif)</font></b></td>
38: </tr>
39: <tr>
40: <td width="33%"><font size="2" face="Verdana"><b>Descrio</b></font></td>
41: <td width="67%"><input type="text" name="des" size="30"></td>
42: </tr>
43: <tr>
44: <td width="33%"><font size="2" face="Verdana"><b>Estoque</b></font></td>
45: <td width="67%"><input type="text" name="est" size="10"></td>
46: </tr>
47: <tr>
48: <td width="33%"><font size="2" face="Verdana"><b>Estoque mnimo</b></font></td>
49: <td width="67%"><input type="text" name="esm" size="10"></td>
50: </tr>
51: <tr>
52: <td width="33%"><font size="2" face="Verdana"><b>Preo de compra </b> </font>
53: </td><td width="67%"><input type="text" name="prc" size="10"></td>
54: </tr>
55: <tr>
56: <td width="33%"><font size="2" face="Verdana"><b>Preo de venda</b></font></td>
57: <td width="67%"><input type="text" name="prv" size="10"></td>
58: </tr>
59: </table>
60: <p align="center"><input type="submit" value="Cadastrar" name="B1"><input
61: type="reset" value="Limpar" name="B2"></p></form>

63: <p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar| </a>
64: </font></b></p></body>
65: </html>
Incluso dos produtos: inclui_Produtos.asp
O cdigo a seguir ir receber os dados do formulrio e inseri-los no banco de da-
dos. Aps digit-lo, salve-o como inclui_Produtos.asp.
2: <%
3: Dim vfoto, vdescricao, vestoque, vestoquemin, vprecovenda, vfornecedor, vcodigo,
vprecocompra
4: vfoto = Request("foto")
5: vcodigo = Request("cod")
6: vdescricao = Request("des")
7: vestoque = Request("est")
8: vestoquemin = Request("esm")
9: vprecovenda = Request("prv")
10: vprecocompra = Request("prc")
11: vfornecedor = Request("for")
12: strQuery = "INSERT INTO produtos (codi-
go,descricao,estoque,estoquemin,precovenda,precocompra,fornecedor,foto) Values
('"&vcodigo&"','"&vdescricao&"','"&vestoque&"','"&vestoquemin&"','"&vprecovenda&"','"&vpr
ecocompra&"','"&vfornecedor&"','"&vfoto&"')"
14: %>
15: <html>
16: <head>
17: <title>Produtos</title>
18: </head>
19: <body>
26: </body></html>
Perceba que o programa recebe todos os campos do formulrio e em seguida (li-
nha 12) insere todos os dados na tabela produtos. A linha 12 dever ser digitada
toda sem pressionar enter (saldo de linha).

Movimentos
Bem, agora que j criamos os cadastros de fornecedores e produtos, j podemos
comear a trabalhar na parte de movimentos. Estes programas permitiro que o
operador manipule informaes sobre produtos, estoques e pedidos.
No mdulo de pedidos, o usurio informar o fornecedor, a data do pedido e o
valor. O sistema montar uma lista com todos os fornecedores cadastrados para
que o usurio o selecione.
Incluso de pedidos: cadas_pedidos.asp
Digite a pgina a seguir e salve-a como: cadas_pedidos.asp
2: <%
5: %>
6: <html>
7: <head>
8: <title>Pedidos</title>
9: </head>
10: <body>
11: <p align="center"><font face="Verdana"><b>Cadastro de
12: Pedidos</b></font></p><hr>
13: <form method="GET" action="inclui_pedidos.asp">
15: <tr>
16: <td width="33%"><font face="Verdana" size="2"><b>Fornecedor</b></font></td>
17: <td width="67%"><select size="1" name="for">
19: <option value="<%=objrs("codigo")%>"><%=objrs("nome")%></option>
20: <%
21: objRs.movenext
22: Wend
23: objRs.Close
24: objConn.Close
27: %>
28: </select></td>
29: </tr>
30: <tr>
31: <td width="33%"><font face="Verdana" size="2"><b>Data do pedido</b></font></td>

32: <td width="67%"><input type="text" name="dat" size="10"></td>
33: </tr>
34: <tr>
35: <td width="33%"><font face="Verdana" size="2"><b>Valor</b></font></td>
36: <td width="67%"><input type="text" name="val" size="10"></td>
37: </tr>
38: </table>
39: <p align="center"><input type="submit" value="Cadastrar" name="B1"><input
40: type="reset" value="Limpar" name="B2"></p></form>
45: <p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a>
46: </font></b></p></body>
47: </html>
Como voc pode ver, na linha 13 estamos dizendo ao formulrio para chamar a
pgina: inclui_pedidos.asp. Ela ir receber os dados do formulrio e em seguida
inseri-los na tabela de pedidos.
inclui_pedidos.asp
2: <%
3: Dim vpedidos, vfornecedor, vdata, vvalor
4: vfornecedor = Request("for")
5: vdata = Request("dat")
6: vvalor = Request("val")
7: strQuery = "INSERT INTO pedidos (fornecedor,data,valor) Values
('"&vfornecedor&"','"&vdata&"','"&vvalor&"')"
9: %>
10: <html>
11: <head>
12: <title>Inclui pedidos</title>
13: </head>
14: <body>
21: </body>
22: </html>

Inserindo itens nos pedidos
Na seo anterior fizemos a parte do programa que cria os pedidos. Agora iremos
criar a pgina que permite que sejam includos itens em cada um dos pedidos digi-
tados.
Para isto o usurio dever selecionar o pedido (pelo nmero) e em seguida o pro-
duto. Veja na tela a seguir:

Figura 10.4 Nesta tela o usurio poder escolher o cdigo do pedido, o produto, a
quantidade e o preo de compra.
Itenspedidos.asp
2: <%
3: dim objrs1
4: strQuery = "SELECT * From pedidos"
6: strQuery = "SELECT * From produtos"
7: Set ObjRs1 = objConn.Execute(strQuery)
8: %>
9: <html>
10: <head>
11: <title>Itens do pedido</title>
12: </head>
13: <body>
14: <p align="center"><font face="Verdana"><b>Itens do pedido</b></font></p>

15: <hr>
16: <form method="GET" action="inserir_itens.asp">
18: <center>
20: <tr>
21: <td width="35%"><b><font size="2" face="Verdana">N do pedido</font></b></td>
22: <td width="65%">
23: <select size="1" name="ped">
25: <option value="<%=objrs("pedidos")%>"><%=objrs("pedidos")%></option>
26: <%objrs.movenext
27: wend%>
28: </select> </td>
29: </tr>
30: <tr>
31: <td width="35%"><font size="2" face="Verdana"><b>Produto</b></font></td>
32: <td width="65%">
33: <select size="1" name="pro">
34: <%While not objRs1.eof%>
35: <option value="<%=objrs1("codigo")%>"><%=objrs1("descricao")%></option>
36: <%
37: objRs1.movenext
38: wend
39: objRs.Close
40: objConn.Close
43: %>
44: </select>
45: </td>
46: </tr>
48: <tr>
49: <td width="35%"><font size="2" face="Verdana"><b>Quantidade</b></font></td>
50: <td width="65%"><input type="text" name="qua" size="6"></td>
51: </tr>
52: <tr>
53: <td width="35%"><font size="2" face="Verdana"><b>Preo de compra</b> </font>
54: </td> <td width="65%"><input type="text" name="pre" size="10"></td>
55: </tr>
56: </table>
57: </center>
58: </div>
60: <p align="center"><input type="submit" value="Inserir" name="B1"></p>
61: </form>

64: <p align="right"><br>
65: <b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a></font></b></p>
66: </body>
67: </html>
Neste programa temos como novidade a utilizao de duas variveis de consultas,
estando uma delas na linha 5 e a outra na linha 7 (objrs1). Isto foi necessrio por-
que precisamos mostrar dados que esto em tabelas diferentes e que no possu-
em nenhum tipo de relacionamento (neste momento). Este formulrio ir chamar a
pgina inserir_itens.asp, a qual est mostrada a seguir:
Inserir_itens.asp
2: <%
3: Dim vpedido, vproduto, vquantidade, vpreco
4: vpedido = Request("ped")
5: vproduto = Request("pro")
6: vquantidade = Request("qua")
7: vpreco = Request("pre")
8: strQuery = "INSERT INTO itens_pedidos (codi-
go_pedido,codigo_produto,quantidade,preco) Values
('"&vpedido&"','"&vproduto&"','"&vquantidade&"','"&vpreco&"')"
10: %>
11: <html>
12: <head>
13: <title>Inserir itens</title>
14: </head>
15: <body>
22: Dados Includos</font></b></p>
23: </body>
24: </html>

Concluindo os pedidos digitados
Aps lanar os pedidos, o usurio precisar conclu-los. Esta opo far com que o pro-
grama marque o pedido no banco de dados como concludo. Digite o programa seguinte
e salve-o como: concluir_pedido.asp. O principal detalhe nesta pgina est na linha 3,
onde apenas os pedidos em que a posio estejam com 0 (zero), sero mostrados. Se o
campo posio estiver com valor 1, significa que o pedido j foi concludo.
2: <%
3: strQuery = "SELECT * From pedidos where posicao=0"
4: set ObjRs = objConn.Execute(strQuery)
5: %>
6: <html>
7: <head>
8: <title>Concluir pedido</title>
9: </head>
10: <body>
11: <p align="center"><font face="Verdana"><b>Concluso de pedidos</b></font></p>
12: <hr>
14: <center>
15: <table border="0" cellpadding="0" cellspacing="0" width="750" height="45">
16: <tr>
17: <td width="129">
18: <p align="center"><b><font size="2" face="Verdana">Pedido</font></b></td>
19: <td width="196">
20: <p align="center"><b><font size="2" face="Verdana">Fornecedor</font></b></td>
21: <td width="212">
22: <p align="center"><b><font size="2" face="Verdana">Data</font></b></td>
23: <td width="205">
24: <p align="center"><b><font size="2" face="Verdana">Valor</font></b></td>
25: </tr>
27: <tr>
28: <td width="129" align="center"><font face="Verdana" size="2"> <%=objrs("pedidos")%>
29: </font></td>
30: <td width="196" align="center"><font face="Verdana"
31: size="2"><%=objrs("fornecedor")%></font></td>
33: size="2"><%=objrs("data")%></font></td>
35: size="2"><%=formatnumber(objrs("Valor"),2)%></font></td>
36: </tr>
37: <%
38: objRs.movenext

39: wend
40: objRs.Close
41: objConn.Close
44: %>
45: </table>
46: </center>
47: </div>
48: <form method="GET" action="conc_pedido.asp">
50: <center>
52: <tr>
53: <td width="21%"><b><font size="2" face="Verdana">Pedido</font></b></td>
54: <td width="79%">
55: <p align="center"><input type="text" name="cod"
56: size="15">
57: <input type="submit" value="Concluir" name="B1"></td>
58: </tr>
59: </table>
60: </center>
61: </div>
63: </form>
64: <p align="right"><b><font face="Verdana" size="1"><a
65: href="index.htm">|Voltar|</a></font></b></p></body>
66: </html>
Esta pgina chamar a conc_pedido.asp que pode ser vista a seguir:
Os detalhes mais importantes neste cdigo esto na linha 5 e na 7. Na linha 5
temos um novo comando em SQL, (UPDATE).
strquery = "UPDATE pedidos set posicao='1' where pedidos="&cod
Este comando faz com que o campo posicao passe a valer 1 (um) onde o cdigo
do pedido seja igual ao cdigo informado no programa anterior.
2: <%
3: Dim cod
4: cod=request("cod")
5: strquery = "UPDATE pedidos set posicao='1' where pedidos="&cod
6: Set objRs = objConn.Execute(strQuery)
7: strQuery = "SELECT * From pedidos where pedidos="&cod

9: %>
10: <html>
11: <head>
12: <title>Concluir pedidos</title>
13: </head>
14: <body>
15: <p align="center"><font face="Verdana"><b>Consulta pedidos</b></font></p>
16: <hr>
17: <table border="1" width="100%" cellspacing="1" height="47">
18: <tr>
19: <td width="20%" align="center" height="16"><b><font face="Verdana"
20: Size="2">Pedidos</font></b></td>
22: Size="2">Fornecedor</font></b></td>
23: <td width="20%" align="center" height="16"><b><font face="Verdana" size="2">Data
24: do pedido</font></b></td>
26: Size="2">Valor</font></b></td>
28: Size="2">Situao</font></b></td>
29: </tr>
30: <%While Not objRs.eof%>
31: <tr>
32: <td width="20%" height="19"><font face="Verdana"
33: Size="2"><%=objRs("pedidos")%></font></td>
35: Size="2"><%=objRs("fornecedor")%></font></td>
37: Size="2"><%=objRs("data")%></font></td>
38: <td width="20%" height="19"><font face="Verdana" size="2">
39: <p align="center"><%=formatNumber(objRs("valor"),2)%></font></td>
40: <td width="20%" height="19">
41: <p align="center"><font face="Verdana" size="2">Atendido</font></td>
42: </tr>
43: <%
44: objRs.movenext
45: wend
46: objRs.Close
47: objConn.Close
50: %>
51: </table>
52: </body>
53: </html>

Abatendo itens no estoque
A prxima funo do nosso sistema controlar o estoque. Para isto iremos infor-
mar o cdigo do produto e a quantidade de itens a abater. Na seqncia teremos
o cdigo que possibilita aumentar itens no estoque.

Figura 10.5 O usurio ir informar o cdigo do produto e a quantidade
de itens a abater ou a aumentar.
Abater_ estoque.htm
1: <html>
2: <head>
3: <title>Abater estoque</title>
4: </head>
5: <body>
6: <p align="center"><font face="Verdana"><b>Abater estoque</b></font></p>
7: <hr>
8: <form method="GET" action="sub_estoque.asp">
10: <center>
12: <tr>
13: <td width="41%"><b><font size="2" face="Verdana">Cdigo</font></b></td>
14: <td width="59%">

15: <p align="center"><input type="text" name="cod" size="15"></td>
16: </tr>
17: <tr>
18: <td width="41%"><b><font size="2" face="Verdana">Quantidade(-)</font></b></td>
19: <td width="59%">
20: <p align="center"><input type="text" name="est" size="15"></td>
21: </tr>
22: </table>
23: </center>
24: </div>
25: <p align="center"><input type="submit" value="Abater" name="B1"></p>
26: </form>
27: <p><font face="Verdana" size="2"> </font></p>
28: <p> </p>
29: <p> </p>
30: <p> </p>
31: <p> </p><p align="right"><b><font face="Verdana" size="1"><a
32: href="index.htm">|Voltar|</a></font></b></p>
33: </body>
34: </html>
O boto abater ir chamar a pgina: sub_estoque.asp
2: <%
3: Dim est,cod
4: est=request("est")
6: strquery = "UPDATE produtos set estoque=estoque-"&est&" where codigo="&cod
8: strQuery = "SELECT * From produtos where codigo = "&cod
10: %>
11: <html>
12: <head>
13: <title>Estoque</title>
14: </head>
15: <body>
16: <p align="center"><font face="Verdana"><b>Estoque de produtos</b></font></p>
17: <hr>
19: <tr>
21: size="2">Cdigo</font></b></td>

25: size="2">Estoque</font></b></td>
27: size="2">Estoque mnimo</font></b></td>
28: </tr>
30: <tr>
32: <p align="center"><%=objRs("codigo")%></font></td>
34: size="2"><%=objRs("descricao")%></font></td>
35: <td width="12%" height="19" align="center"><font face="Verdana"
36: size="2"><%=objRs("estoque")%></font></td>
38: size="2"><%=objRs("estoquemin")%></font></td>
39: </tr>
40: <%
41: objRs.movenext
42: wend
43: objRs.Close
44: objConn.Close
47: %>
48: </table>
49: </body>
50: </html>
As pginas seguintes tratam da adio de itens no estoque.
adicionar_estoque.htm.
1: <html>
2: <head>
3: <title>Adicionar estoque</title>
4: </head>
5: <body>
6: <p align="center"><font face="Verdana"><b>Adicionar estoque</b></font></p>
7: <hr>
8: <form method="GET" action="add_estoque.asp">
10: <center>
12: <tr>
13: <td width="41%"><b><font size="2" face="Verdana">Cdigo</font></b></td>
14: <td width="59%">

15: <p align="center"><input type="text" name="cod" size="15"></td>
16: </tr>
17: <tr>
18: <td width="41%"><font size="2" face="Verdana"><b>Quantidade(+)</b></font></td>
19: <td width="59%">
20: <p align="center"><input type="text" name="est" size="15"></td>
21: </tr>
22: </table>
23: </center>
24: </div>
25: <p align="center"><input type="submit" value="Adicionar" name="B1"></p>
26: </form>
27: <p><font face="Verdana" size="2"> </font></p>
28: <p> </p>
29: <p> </p>
30: <p> </p>
31: <p> </p>
34: </html>
add_estoque.asp
2: <%
3: Dim est,cod
4: est=request("est")
6: strquery = "UPDATE produtos set estoque=estoque+"&est&" where codigo="&cod
8: strQuery = "SELECT * From produtos where codigo="&cod
10: %>
11: <html>
12: <head>
13: <title>Adicionar estoque</title>
14: </head>
15: <body>
17: <hr>
19: <tr>

27: size="2">Estoque mnimo</font></b></td>
28: </tr>
30: <tr>
39: </tr>
40: <%
41: objRs.movenext
42: wend
43: objRs.Close
44: objConn.Close
47: %>
48: </table>
49: </body>
50: </html>
Implementando consultas
Bem, agora que j fizemos toda a movimentao no sistema, chegou a hora de
implementarmos algumas consultas. Atravs delas o usurio do sistema ter aces-
so a informaes tais como: produtos com estoque mnimo, relao de fornecedo-
res, pedidos pendentes, pedidos atendidos, entre outras.
Conforme voc vai perceber, implementar novas consultas simplificado pelo uso
da sintaxe SQL.

Figura 10.6 Esta a tela inicial com as consultas disponveis. Porm, voc poder
adicionar novas, conforme suas necessidades.
Pedidos atendidos
A primeira consulta que iremos implementar a que apresenta os pedidos atendi-
dos, ou seja, aqueles que j foram concludos pelo usurio. Digite o programa a
seguir e salve-o como: Consul_Ped_atendidos.asp
2: <%
5: %>
6: <html>
7: <head>
8: <title>Pedidos</title>
9: </head>
10: <body>
11: <p align="center"><font face="Verdana"><b>Consulta pedidos
12: <u><i>ATENDIDOS</i></u></b></font></p><hr>
14: <tr>
15: <td width="15%" align="left" height="16"><b><font face="Verdana"
16: size="2">Pedidos</font></b></td>

18: size="2">Fornecedor</font></b></td>
19: <td width="23%" align="left" height="16"><b><font face="Verdana" size="2">Data
22: size="2">Valor</font></b></td>
23: <td width="19%" align="right" height="16"><b><font face="Verdana"
24: size="2">Situao</font></b></td>
25: <td width="35%" align="center" height="16"></td>
26: </tr>
28: <tr>
29: <td width="15%" height="19" align="left"><font face="Verdana"
30: size="2"><%=objRs("pedidos")%></font></td>
32: size="2"><%=objRs("fornecedor")%></font></td>
34: size="2"><%=objRs("data")%></font></td>
35: <td width="12%" height="19" align="left"><font face="Verdana" size="2">
36: <p align="left"><%=formatNumber(objRs("valor"),2)%></font></td>
37: <td width="19%" height="19" align="right">
38: <p align="right"><font face="Verdana" size="2">Atendido</font></td>
40: <p align="center"><a href="lista_itens.asp?pedido=<%=objRs("pedidos")%>"><font
41: face="Verdana" size="2"><b>Mostrar itens</b></font></a></td>
42: </tr>
43: <%
44: objRs.movenext
45: wend
46: objRs.Close
47: objConn.Close
50: %>
51: </table>
52: <p align="right"> <b><font face="Verdana" size="1">
53: <a href="index.htm">|Voltar|</a></font></b></p></body>
54: </html>
Perceba que na linha 40 o programa ir montar um link chamando a pgina
lista_itens.asp, passando como parmetro o cdigo do pedido:
<a href="lista_itens.asp?pedido=<%=objRs("pedidos")%>">
Este programa ir listar os itens contidos em cada pedido. Para isto precisamos
passar o cdigo do pedido, para que seja feita a consulta na tabela itens de pedi-
dos.

Lista_itens.asp
2: <%
3: dim ped
4: ped=Request("pedido")
5: strQuery = "SELECT * From itens_pedidos where codigo_pedido="&ped
7: %>
8: <html>
9: <head>
10: <title>Lista itens</title>
11: </head>
12: <body>
13: <p align="center"><font face="Verdana"><b>Lista itens</b></font></p>
14: <hr>
16: <tr>
17: <td width="25%" align="right"><b><font face="Verdana"
18: size="2">Pedido</font></b></td>
20: size="2">Produto</font></b></td>
22: size="2">Quantidade</font></b></td>
24: size="2">Preo</font></b></td>
25: </tr>
27: <tr>
28: <td width="25%" align="right"><%=objRs("codigo_pedido")%></td>
29: <td width="25%" align="right"><%=objRs("codigo_produto")%></td>
30: <td width="25%" align="right"><%=objRs("Quantidade")%></td>
31: <td width="25%" align="right"><%=FormatNumber(objRs("preco"),2)%></td>
32: </tr>
33: <%
34: objRs.movenext
35: wend
36: objRs.Close
37: objConn.Close
40: %>
41: </table>
42: <p align="right"><a href="JavaScript:history.go(-1)"><b><font face="Verdana"
43: size="2">Voltar</font></b></a></p>
44: </body>
45: </html>

Pedidos no atendidos: Consul_Ped_naoatendidos.asp
2: <%
5: %>
6: <html>
7: <head>
8: <title>Pedidos no atendidos</title>
9: </head>
10: <body>
11: <p align="center"><font face="Verdana"><b>Consulta pedidos <i><u>NO</u></i>
12: <i><u>ATENDIDOS</u></i></b></font></p>
13: <hr>
15: <tr>
17: size="2">Pedidos</font></b></td>
20: <td width="20%" align="left" height="16"><b><font face="Verdana" size="2">Data
22: <td width="20%" align="right" height="16"><b><font face="Verdana"
23: size="2">Valor</font></b></td>
24: <td width="20%" align="left" height="16">
25: <p align="center"><b><font face="Verdana" size="2">Situao</font></b></p>
26: </td>
28: </tr>
30: <tr>
32: size="2"><%=objRs("pedidos")%></font></td>
36: size="2"><%=objRs("data")%></font></td>
37: <td width="20%" height="19" align="right"><font face="Verdana" size="2">
38: <p align="right"><%=formatNumber(objRs("valor"),2)%></font></td>
39: <td width="20%" height="19" align="left">
40: <p align="left"><font face="Verdana" size="2"> No Atendido</font></td>
42: <p align="center"><a href="lista_itens.asp?pedido=<%=objRs("pedidos")%>"><font
43: face="Verdana" size="2"><b>Mostrar
44: itens</b></font></a></td>

45: </tr>
46: <%
47: objRs.movenext
48: wend
49: objRs.Close
50: objConn.Close
53: %>
54: </table><p align="right"><b><font face="Verdana" size="1"><a
55: href="index.htm">|Voltar|</a></font></b></p></body></html>
Consulta a fornecedores: Fornecedores.asp
2: <%
5: %>
6: <html><head><title>Fornecedores</title></head>
7: <body>
8: <p align="center"><font face="Verdana"><b>Listagem de fornecedores</b></font></p>
9: <hr>
11: <tr>
15: size="2">Nome</font></b></td>
17: size="2">Telefone</font></b></td>
18: <td width="29%" align="center" height="16"><b><font face="Verdana" size="2">E-
19: mail</font></b></td>
21: size="2">Contato</font></b></td>
23: </tr>
25: <tr>
26: <td width="15%" height="19"><font face="Verdana" size="2"><%=objRs("codigo")%>
27: </font></td>
28: <td width="25%" height="19"><font face="Verdana" size="2"><%=objRs("nome")%>
29: </font></td>
30: <td width="16%" height="19"><font face="Verdana" size="2"><%=objRs("telefone")%>
31: </font></td>
32: <td width="29%" height="19"><font face="Verdana" size="2"><%=objRs("email")%>

33: </font></td>
34: <td width="29%" height="19"><font face="Verdana" size="2"><%=objRs("pessoa")%>
35: </font></td>
37: <p align="center"><font face="Verdana" size="2"><b>
38: <a Href="excluir.asp?cod=<%=objRs("codigo")%>&tabela=fornecedor">
39: exclur</a></b></font></td> </tr>
40: <%
41: objRs.movenext
42: wend
43: objRs.Close
44: objConn.Close
47: %>
48: </table>
49: <p> </p>
50: <p align="right"><a href="index.htm"><b><font face="Verdana"
51: size="1">|Voltar|</font></b></a></p></body>
52: </html>
Produtos em estoque: Estoque.asp
O principal detalhe na listagem de produtos est na linha 32 onde o programa
insere a foto do produto apresentado. Para isto o nome do produto deve ser in-
formado no campo foto da tabela.
2: <%
3: strQuery = "SELECT * From produtos"
5: %>
6: <html>
7: <head>
8: <title>Estoque</title>
9: </head>
10: <body>
12: <hr>
13: <form method="POST" action="estoque.asp">
14: <table border="1" width="100%" cellspacing="1" height="47" bordercolor="#FFFFFF">
15: <tr>
16: <td width="10%" align="center" height="16" bgcolor="#336699"></td>
17: <td width="11%" align="left" height="16" bgcolor="#336699">
18: <p align="center"><b><font face="Verdana" size="2"
19: color="#FFFFFF">Cdigo</font></b></td>

20: <td width="42%" align="left" height="16" bgcolor="#336699"><b><font face="Verdana"
21: size="2" color="#FFFFFF">Descrio</font></b></td>
22: <td width="16%" align="right" height="16" bgcolor="#336699"><b><font
23: face="Verdana" size="2" color="#FFFFFF">Estoque</font></b></td>
24: <td width="46%" align="right" height="16" bgcolor="#336699"><b><font
25: face="Verdana" size="2" color="#FFFFFF">Mnimo</font></b></td>
26: <td width="15%" align="center" height="16" bgcolor="#336699"></td>
27: </tr>
29: <tr>
30: <td width="10%" height="19" align="center" bgcolor="#C4E1FF">
31: <p align="center"><font size="2" face="Verdana" color="#000000"><img
32: src="<%=objRs("foto")%>"></font></td>
33: <td width="11%" height="19" align="left" bgcolor="#C4E1FF">
34: <p align="center"><font face="Verdana" size="2" color="#000000">
35: <%=objRs("codigo")%></font></td>
36: <td width="42%" height="19" align="left" bgcolor="#C4E1FF"><font face="Verdana"
37: size="2"><font color="#000000"><%=objRs("descricao")%></font></font></td>
38: <td width="16%" height="19" align="right" bgcolor="#C4E1FF"><font face="Verdana"
39: size="2"><font color="#000000"><%=objRs("estoque")%></font></font></td>
40: <td width="46%" height="19" align="right" bgcolor="#C4E1FF"><font face="Verdana"
41: size="2"><font color="#000000"><%=objRs("estoquemin")%></font></font></td>
42: <td width="15%" height="19" align="center" bgcolor="#C4E1FF"><b><a
43: href="excluir.asp?cod=<%=objRs("codigo")%>&tabela=produtos"><font face="Verdana"
44: size="2" color="#000000">exclur</font></a></b></td>
45: </tr>
46: <%objrs.movenext
47: wend
48: %>
49: </table>
50: </form>
53: </html>
Produtos com estoque mnimo: estoque_min.asp
Agora iremos listar apenas os produtos que estejam com o campo estoque menor
ou igual ao estoque mnimo. A clusula em SQL pode ser vista na linha 3.
2: <%
3: strQuery = "SELECT * From produtos where estoque<=estoquemin"
5: %>
6: <html>

7: <head>
8: <title>Estoque mnimo</title>
9: </head>
10: <body>
11: <p align="center"><font face="Verdana"><b>Produtos em estoque
12: mnimo</b></font></p>
13: <hr>
15: <tr>
23: size="2">Mnimo</font></b></td>
26: </tr>
28: <tr>
39: </tr>
40: <%
41: objRs.movenext
42: wend
43: objRs.Close
44: objConn.Close
47: %>
48: </table>
49: <p> </p>
50: <p> </p>
51: <p> </p>

54: </html>
Excluir.asp
O cdigo da pgina excluir.asp o mais simples de todos. No entanto, ele utili-
zado por vrias pginas anteriores. Possuindo como particularidade o fato de rece-
ber no apenas o cdigo a ser excludo, como tambm a tabela na qual a exclu-
so dever ser realizada, ou seja, com uma pgina podemos excluir cdigos em
vrias tabelas (reaproveitando o cdigo).
2: <%
3: Dim tabela,cod
4: tabela=request("tabela")
6: strQuery = "DELETE * From "&tabela&" where codigo ="&cod
8: %>
9: <html>
10: <head>
11: <title>Excluir</title>
12: </head>
13: <body>
15: <p align="center"><b><font size="3" face="Verdana">
16: Dados excludos</font></b></p>
17: <p align="center"><a href="JavaScript:history.go(-1)"><b><font size="3"
18: face="Verdana">Voltar</font></b></a></p></body>
19: </html>
Perceba que na linha 6 estamos excluindo todos os registros da tabela passada
como parmetro, onde o campo codigo seja igual ao parmetro recebido cod.
Concluindo o controle de estoques
Ufa! Voc j deve estar cansado de tanto cdigo. Mas se voc chegou at aqui,
certamente j pode criar vrias rotinas em ASP para a Internet ou Intranet. Todo
esforo compensador.
Para finalizar nosso sistema, criaremos as duas ltimas pginas que so apenas
acessrias. Trata-se da agenda e da calculadora, ambas feitas em J avaScript.
O link, montado na pgina principal, faz com que aparea apenas uma janela com
a agenda ou a calculadora. Os cdigos podem ser vistos a seguir:

Calculadora.html
1: <html>
2: <head>
3: <title>Calculadora</title>
4: </head>
5: <body bgcolor="#0099FF" text="#FFFFFF">
6: <script language="JavaScript">
7: function addChar(input, character)
8: {
9: if(input.value == null || input.value == "0")
10: input.value = character
11: else
12: input.value += character
13: }
14: function deleteChar(input)
15: {
16: input.value = input.value.substring(0, input.value.length - 1)
17: }
18: function changeSign(input)
19: {
20: if(input.value.substring(0, 1) == "-")
21: input.value = input.value.substring(1, input.value.length)
22; else
23: input.value = "-" + input.value
24: }
25: function compute(form)
26: {
27: form.display.value = eval(form.display.value)
28: }
29: function square(form)
30: {
31: form.display.value = eval(form.display.value) * eval(form.display.value)
32: }
33: function checkNum(str)
34: {
35: for (var i = 0; i < str.length; i++) {
36: var ch = str.substring(i, i+1)
37: if (ch < "0" || ch > "9") {
38: if (ch != "/" && ch != "*" && ch != "+" && ch != "-"
39: && ch != "(" && ch!= ")") {
40: alert("invalid entry!")
41: return false
42: }
43: }
44: }

45: return true
46: }
47: </script>
48: <form>
49: <table border="5" align="center">
50: <tr align="center">
51: <td colspan="4"><table border="3">
52: <tr>
53: <td align="center"><input name="display" value="0" size="20"></td>
54: </tr>
55: </table>
56: </td>
57: </tr>
59: <td><input type="button" value=" 7 " onClick="addChar(this.form.display, '7')"> </td>
62: <td><input type="button" value=" / " onClick="addChar(this.form.display, '/')"> </td>
63: </tr>
68: <td><input type="button" value=" * " onClick="addChar(this.form.display, '*')"> </td>
69: </tr>
74: <td><input type="button" value=" - " onClick="addChar(this.form.display, '-')"> </td>
75: </tr>
78: <td><input type="button" value=" . " onClick="addChar(this.form.display, '.')"> </td>
79: <td><input type="button" value=" +/- " onClick="changeSign(this.form.display)"> </td>
80: <td><input type="button" value=" + " onClick="addChar(this.form.display, '+')"> </td>
81: </tr>
83: <td><input type="button" value=" ( " onClick="addChar(this.form.display, '(')"> </td>
84: <td><input type="button" value=" ) " onClick="addChar(this.form.display, ')')"> </td>
85: <td><input type="button" value=" sq "
86: onClick="if (checkNum(this.form.display.value))
87: { square(this.form) }"> </td>
88: <td><input type="button" value=" <- " onClick="deleteChar(this.form.display)"> </td>
89: </tr>

91: <td colspan="2"><input type="button" value=" Enter " name="enter"
92: onClick="if (checkNum(this.form.display.value))
93: { compute(this.form) }"> </td>
94: <td colspan="2"><input type="button" value=" C "
95: onClick="this.form.display.value = 0 "> </td>
96: </tr>
97: </table></form></body></html>
Calendario.html
1: <html>
2: <head><title></title></head>
3: <body bgcolor="#0099FF">
4: <p><script language="JavaScript">
5: 
62: </script>
63: </html>
Consideraes finais sobre sistemas na
Internet
Desenvolver sistemas para a Internet uma atividade relativamente nova. Ainda
existe muito a ser feito, principalmente quando lembramos dos vrios sistemas que
ainda no esto prontos para serem utilizados em um ambiente de Internet e In-
tranet e que, mais cedo ou mais tarde, precisaro migrar para a Web.
Com isso fica fcil perceber que muito trabalho ainda h por ser realizado.
Este livro mostrou apenas um incio de como podem ser desenvolvidos siste-
mas para a Internet. Com certeza voc precisar se aprodundar em assuntos
como:

Modelagem de sistemas
Banco de dados
Programao J avaScript
Segurana
B2B, B2C entre outros
Alm destes assuntos, ganham grande importncia conhecimentos mais aprofun-
dados no que diz respeito regra de negcio da empresa em questo. Conhecer
bem o que dever ser desenvolvido to importante quanto desenvolv-lo.
Para encerrar, lembramos que, o que foi apresentado no sistema que voc conhe-
ceu (loja virtual e controle de estoques), so exemplos meramente didticos, onde
no foram utilizadas tcnicas de programao, tendo em vista a grande quantida-
de de assuntos sobre lgica e estruturas de dados que seriam necessrios.
Lembramos ainda que estamos prontos a lhe atender em nosso site, para onde
voc poder enviar dvidas ou sugestes: www.toptc.com.br.
249

A
Access, 36, 205
ADO, 41
ASP, 15, 16, 25, 134, 167, 168, 183
Atributos, 35, 102
B
B2B, 245
B2C, 245
banco de dados, 98, 176, 183
Banco de dados, 31
Banco de dados relacionais, 32
bancos de dados, 43
bgcolor, 54
bordas, 139
browser, 75
C
camadas, 149, 166
Caractere, 107
cards, 84, 85
CDATA, 107
CGI, 16, 134, 168
CLASS, 94
cliente, 8
Cdigo, 155
Comandos condicionais, 171
comentrios, 63
comrcio eletrnico, 9
Conectores, 113
contedo, 7
cores, 54
Cores, 129
correio eletrnico, 152
CSS, 161, 165
currculo, 1
D
Deck, 84
decks, 85
DEFAULT, 90
design, 12
DLL, 17
document, 75
DOM (Document Object Model), 96
Dreamweaver, 145
DTD, 109
DTD (Document Type Definition), 93

E
Easy Pad Editor, 83
elemento, 113
EMPTYOK, 90
entidades, 106
Entidades, 107
Entidades (Tabelas), 35
F
figuras, 77, 138, 207
folhas de estilos, 164
FORMAT, 90
formatando, 129
Formatando, 52, 53
formulrio, 60, 175
formulrios, 89, 156
Formulrios, 58, 134
frames, 135, 151, 154
FrontPage 2000, 121
FTP, 140
funes, 69, 172
G
Grades, 156
H
hexadecimal, 54
hierarquia de objetos, 70
hiperlink, 86
Hiperlinks, 49
history, 75
HTML, 16, 25, 45, 56, 94, 118, 160
HTTP, 20
I
IIS, 25, 167
includes, 206
ndices, 35
Institucional, 9
Integridade referencial, 36
Interagindo, 64
Internet Information Server, 15
Internet Information Server (IIS), 23
I SO, 93
J
J avaScript, 45, 62, 70, 71, 244
K
KEYWORDS, 162
L
laos, 68, 172
letreiro digital, 131
linguagem SQL, 41
linha horizontal, 151
linhas, 49
linhas horizontais, 130
links, 55, 131
LINUX, 16
listas, 50
Listas intercaladas, 51
loja virtual, 180
Loja Virtual, 167
Loop, 119
loops, 68, 172
ndice Remissivo 251

M
mapas clicveis, 132
MAXLENGTH, 90
Menu de salto, 163
META, 162
Microsoft Instaler (MSI), 24
modelos, 152
MySQL, 33
N
navegador, 46
navegadores, 155, 161
Netscape, 164
O
Onpick, 88
Ontimer, 87
Operadores
condicionais, 66
lgicos, 65
matemticos, 66
Operadores lgicos, 170
Operadores matemticos, 171
ORACLE, 33
ordem Z, 138
P
pginas dinmicas, 16
pargrafos, 49
Personal Web Server, 15, 21
projeto, 5
Projeto, 155
proxy, 16
PWS, 18, 167
R
Raiz, 104
rguas, 152
Rguas, 156
Relacionamentos, 35
RGB, 54
S
SAX (Simple API for XML), 96
Script, 160
Segurana, 13, 43, 245
select, 91
Server-Side, 157
servidor, 29
servidores, 15
SGBDs (Sistemas Gerenciadores de
Banco de Dados), 33
SGML, 93
smbolos, 152
SIZE, 90
SQL, 205
SQLServer, 33, 36
strings, 72, 171
T
tabelas, 150, 178, 211
Tabelas, 56, 88
tag, 90
tags, 60
Tags, 86, 101
tarefas, 133
temas, 137
TYPE, 90

V
variveis, 65, 91, 174
Variveis, 169
VBScript, 45, 168, 173
W
WAP, 82
Web, 124
window, 76
Windows 2000 Server, 15, 23
Windows 98, 15, 18
Windows NT 4.0, 23
WML, 82, 84
WS_FTP, 141
X
XML, 84, 93, 94, 103, 105
XML Notepad, 96
XSL, 115, 120

1. Alm da Tecnologia............................................................... 1
Vendendo a si mesmo.................................................................................. 1
Fortalea seu currculo................................................................................. 1
Desenvolvimento sob a tica do cliente ......................................................... 8
2. Configurando um Servidor de Internet................................. 15
I ntroduo aos servidores ...........................................................................15
Estrutura do funcionamento das pginas dinmicas ASP................................16
Desenvolvimento de novos componentes ..................................................18
Windows 98/Millenium.................................................................................18
Conexo com a Internet...........................................................................18
I nstalando o PWS....................................................................................18
Configurando o Personal Web Server ........................................................21
Testando o servidor .................................................................................23
Criando subpastas ...................................................................................24
Windows 2000 Server..................................................................................24
Caractersticas .........................................................................................25
Configurando o servio IIS .......................................................................26
Testando o servidor .................................................................................30
3. Fundamentos sobre Banco de Dados.................................... 31
Banco de dados ..........................................................................................32
Banco de dados relacionais.......................................................................33
SGBDs (Sistemas Gerenciadores de Banco de Dados).................................34
Banco de dados como parte do sistema ....................................................35
Entidades, atributos e relacionamentos ........................................................36
Entidades (Tabelas) .................................................................................36
Atributos .................................................................................................36
Relacionamentos .....................................................................................36
ndices....................................................................................................36
Integridade referencial .............................................................................37
X Como se tornar um WEBMASTER

O Access ....................................................................................................38
Criando tabelas no Access ........................................................................38
Fundamento do acesso a dados................................................................42
Linguagem SQL...........................................................................................43
Inserindo dados em uma tabela................................................................44
Consultando dados ..................................................................................44
Removendo dados ...................................................................................44
Criando relacionamentos ..........................................................................44
Segurana das informaes armazenadas no banco de dados........................45
Futuro dos bancos de dados.....................................................................45
Resumindo .................................................................................................46
4. Linguagens para Desenvolvimento na Web HTML.................. 45
HTML.........................................................................................................47
Abrindo uma pgina local no navegador....................................................48
Os comandos em HTML............................................................................48
Hiperlinks ................................................................................................51
Criao de listas.......................................................................................52
Listas intercaladas ...................................................................................53
Formatando a exibio.............................................................................54
Formatando o fundo da tela .....................................................................55
Funcionamento das cores em hexadecimal ................................................56
Definindo as cores dos links......................................................................57
Inserindo linhas.......................................................................................57
Tabelas em HTML ....................................................................................58
Criando Formulrios.................................................................................60
5. Linguagens para Desenvolvimento na Web J avaScript........... 62
J avaScript...................................................................................................64
Um primeiro exemplo...............................................................................65
Colocando comentrios em seu cdigo......................................................65
Interagindo com o usurio........................................................................66
Criando variveis .....................................................................................67
Operadores lgicos ..................................................................................67
Operadores matemticos..........................................................................68
Operadores condicionais...........................................................................69
Criando laos no programa (loops) ...........................................................70
Criando funes.......................................................................................72
A hierarquia de objetos do J avaScript...........................................................73
Manipulando eventos ..................................................................................74
Manipulando strings ....................................................................................75
Manipulando datas......................................................................................77
Elementos relacionados com o browser.....................................................78
Sumrio XI

Inserindo e controlando figuras ................................................................80
Interagindo com o usurio........................................................................81
Resoluo dos exerccios propostos..............................................................82
6. Programao WML (Wap).................................................... 82
WAP...........................................................................................................85
WML ..........................................................................................................85
I niciando o editor WAP................................................................................86
Deck..........................................................................................................87
Criando a primeira pgina em WML..............................................................87
Utilizando decks e cards ..............................................................................88
Criando um hiperlink...................................................................................89
Tags <to><do>........................................................................................89
Ontimer...................................................................................................90
Onpick....................................................................................................91
Tabelas...................................................................................................91
Obtendo dados do usurio (formulrios) ...................................................92
A tag <input>.........................................................................................93
A tag select ................................................................................................94
Utilizando variveis .....................................................................................94
7. Iniciando no XML................................................................ 93
Introduo ao XML......................................................................................96
O que XML?.............................................................................................98
Quem criou a XML? .....................................................................................98
O que necessrio?....................................................................................99
Em que pode ser usado.............................................................................101
Exemplo de aplicao em banco de dados ..................................................102
Pontos fortes ............................................................................................103
Estrutura bsica........................................................................................104
Tags para documentos XML.......................................................................104
Tag inicial e final de um elemento...........................................................105
Regras para os nomes dos elementos .....................................................105
Atributos dos elementos.........................................................................106
Elemento sem contedo.........................................................................106
A rvore de um documento XML................................................................107
Elemento Raiz........................................................................................108
Declarao do documento XML...............................................................109
Comentrios em XML.............................................................................109
Fazendo referncia a entidades em XML..................................................110
Entidades Predefinidas ...........................................................................110
Incluindo Dados de Caractere (Seo CDATA) .........................................111
PI (Instrues de Processamento) ..........................................................112
XI I Como se tornar um WEBMASTER

Atributos Definidos.................................................................................113
Conceitos I niciais sobre DTD..................................................................113
Declarao de elemento.........................................................................117
Contedos especiais de um elemento......................................................117
I ndicadores de ocorrncia e Conectores ..................................................117
Lista de Atributos do elemento ...............................................................118
Conceitos I niciais sobre XSL.......................................................................119
Declarao XSL......................................................................................122
Formatao HTML..................................................................................122
Realizando um Loop...............................................................................123
Exibindo o contedo de um elemento.....................................................124
Finalizando o documento XSL.................................................................124
8. Ferramentas para Desenvolvimento na Web....................... 121
FrontPage 2000 ........................................................................................126
O contedo de uma pgina ....................................................................127
Projetando o que ser criado..................................................................127
A estrutura do site .................................................................................128
Criando uma nova Web..........................................................................129
Criando a estrutura do site .....................................................................130
Conhecendo o FrontPage .......................................................................133
Construindo Formulrios.........................................................................139
Pginas com quadros (frames) ...............................................................141
Utilizando temas ....................................................................................142
Posicionando e sobrepondo figuras .........................................................143
Entendendo a ordem Z...........................................................................144
Importando pginas prontas...................................................................144
Utilizando bordas compartilhadas............................................................144
I nstalando um programa para FTP..........................................................146
Criando uma nova conta de FTP.............................................................146
Enviando e recebendo arquivos ..............................................................149
Dreamweaver ...........................................................................................150
Iniciando no Dreamweaver.....................................................................150
Familiarizando-se com o menu................................................................151
Comeando uma nova pgina.................................................................153
Definindo algumas propriedades da pgina .............................................153
Salvando seu trabalho............................................................................154
Trabalhando com camadas.....................................................................155
Inserindo tabelas ...................................................................................156
Recursos rpidos (parte I) ......................................................................157
Utilizando modelos de pginas................................................................158
Inserindo molduras (frames) ..................................................................160
Verificando os navegadores de destino....................................................161
Sumrio XIII

Utilizando o menu Exibir.........................................................................161
Criando formulrios................................................................................162
Processando o formulrio.......................................................................163
Server-Side............................................................................................164
Linhas do tempo....................................................................................165
Recursos rpidos (parte 2) .....................................................................166
Gravando comandos ..............................................................................167
Convertendo para navegadores 3.0.........................................................168
Iniciando um editor externo....................................................................168
I nserindo <meta>.................................................................................169
Menu de salto........................................................................................170
Redimensionamento do Netscape ...........................................................171
Trabalhando com folhas de estilos ..........................................................171
Alinhando camadas................................................................................173
9. Criando uma Loja Virtual................................................... 167
O que o ASP ..........................................................................................174
ASP versus CGI ......................................................................................175
Como funciona o ASP.............................................................................175
Colocando comentrios .............................................................................176
Criando Variveis ......................................................................................177
Operadores lgicos....................................................................................177
Operadores matemticos e de strings.........................................................178
Comandos condicionais .............................................................................178
Criando laos (loops).................................................................................179
Criando funes........................................................................................180
Avanando no VBScript..............................................................................180
Iniciando no ASP.......................................................................................181
Enviando dados aos usurios..................................................................181
Evitando erros com variveis ..................................................................182
Processando um formulrio....................................................................182
Criando o banco de dados .........................................................................184
Criando outras tabelas ...........................................................................186
Comeando a desenvolver a loja virtual ......................................................188
Listagem dos clientes clientes.asp........................................................189
Digitando os cdigos em ASP..................................................................191
Primeira parte: conectando com o banco de dados .....................................191
Mdulo da frente da Loja...........................................................................199
Criando a pgina principal: index.htm.........................................................200
Pgina de cadastro: cadastro.htm..............................................................201
Identificando o cliente: comprar.htm.......................................................204
Verificando se o cliente est cadastrado..................................................204
I niciando a venda: carrinho.asp..............................................................206
XIV Como se tornar um WEBMASTER

Colocando no carrinho: carrinho.asp.......................................................208
Efetivando a compra: efetiva.asp............................................................211
Concluindo a loja ......................................................................................212
10. Implementando um Controle de Estoques........................ 205
Utilizando includes ....................................................................................214
Reutilizando pginas inteiras......................................................................214
Inserindo figuras.......................................................................................215
Conhecendo a estrutura do sistema ...........................................................215
Entendendo os mdulos ............................................................................216
Pgina inicial.............................................................................................217
Criando as tabelas.....................................................................................219
Contedo das tabelas................................................................................220
Manuteno de fornecedores.....................................................................222
Cadastro de produtos................................................................................224
Movimentos..............................................................................................227
Inserindo itens nos pedidos .......................................................................229
Concluindo os pedidos digitados.................................................................232
Abatendo itens no estoque........................................................................235
I mplementando consultas..........................................................................239
Pedidos atendidos..................................................................................240
Concluindo o controle de estoques.............................................................248
Consideraes finais sobre sistemas na I nternet.........................................252
ndice Remissivo.................................................................. 247

Como Se Tornar Um Webmaster

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Se Tornar Um Webmaster

Enviado por

Direitos autorais:

Formatos disponíveis

Primeiramente queremos agradecer a Deus pois sem ele nada disto seria possvel.

Você também pode gostar