CURSO ESPECIAL DE HTML


HTML - TRUQUES ESPERTOS

CAPÍTULO 1

RESUMIDISSIMA HISTORIA DA INTERNET E DA WWW





EM 1969 , A PRECURSORA DA INTERNET , A ARPANET , INTERLIGAVA QUATRO CENTROS DE PESQUISA , COMO UM EXPERIMENTO MILITAR PARA UMA REDE DE COMUNICAÇÃO DE DADOS QUE PUDESSE SER UTILIZADA MESMO COM A PERDA DE VÁRIOS NÓS , POR CAUSA DE UM ATAQUE NUCLEAR .

POR VOLTA DE 1975 , JÁ EXISTIAM MAIS DE 100 NÓS NA REDE E , NA MAIS FANTÁSTICA TRANSFORMAÇÃO DE ESPADAS EM ARADOS , OS CIENTISTAS E OUTROS USUÁRIOS UTILIZAVAM AS FACILIDADES DE COMUNICAÇÃO NÃO SÓ PARA PROJETAR ARMAS E FAZER PESQUISAS MILITARES , MAS PARA TROCAR E-MAILS PESSOAIS , ABOBRINHAS E DISCUTIR TEMAS EMINENTEMENTE PACIFISTAS , COMO JORNADA NAS ESTRELAS .

COM A ENTRADA DE ALGUMAS UNIVERSIDADES NA REDE , LOGO OS ALUNOS DESCOBRIRAM QUE , POR TRÁS DAS TELAS DE FÓSFORO VERDE E DA INTERFACE DE CARACTERES DO UNIX , ESCONDIA-SE UM MUNDO NOVO , ONDE PODIAM SE COMUNICAR INSTANTANEAMENTE COM PESSOAS ESPALHADAS POR TODO O PAÍS , E LOGO , POR TODO O PLANETA .

OS PROVEDORES DE SERVIÇO PRIVADOS , COMO AT&T E A MCI , COMEÇARAM A USAR A INTERNET PARA INTERLIGAR SEUS SISTEMAS DE E-MAIL , AUMENTANDO ASSIM O TAMANHO DA MESMA .

EM 1989 , NO CERN - CENTRO EUROPEU DE PESQUISA DE PARTÍCULAS - TESTAVA-SE O QUE SERIA A GRANDE APLICAÇÃO NA INTERNET : A WORLD WIDE WEB , UM SISTEMA DE TROCA DE INFORMAÇÕES MULTIMÍDIA , USANDO HIPERTEXTO .

POR VOLTA DE 1992 , UM GRUPO DE PROGRAMADORES NO CENTRO NACIONAL DE APLICAÇÕES EM SUPERCOMPUTAÇÃO - NCSA , EM URBANA , ILLINOIS , COMEÇOU A PRESTAR ATENÇÃO NA WWW , E EM SUA LÍNGUA-MÃE , O HTML .

ELES CRIARAM O MOSAIC , O PRIMEIRO BROWSER WWW , QUE FORMATAVA AUTOMATICAMENTE AS INFORMAÇÕES DA WWW , EXIBINDO-AS COM GRÁFICOS E FOTOS . ENTRE OS PROGRAMADORES QUE CRIARAM O MOSAIC , ESTAVA UM RAPAZ CHAMADO MARK ANDRESSEN , ESTUDANTE NÃO-GRADUADO , GANHANDO US$ 6,50 A HORA . HOJE ELE É SÓCIO DA NETSCAPE COMMUNICATIONS , COM UM PATRIMÔNIO EM AÇÕES DE 50 MILHÕES DE DÓLARES . NADA MAU .

EXPLANAÇÃO SOBRE HTML

A HYPERTEXT MARKUP LANGUAGE É TALVEZ A LINGUAGEM MAIS FÁCIL JÁ DENSENVOLVIDA . O BOM E VELHO BASIC É COMPARATIVAMENTE MUITO MAIS COMPLICADO . OS ARQUIVOS HTML SÃO ENVIADOS ATRAVÉS DO PROTOCOLO HTTP , O HYPERTEXT TRANSFER PROTOCOL , O " PULO DO GATO " , QUE TORNA A WWW UMA FERRAMENTA BARATA E ACESSÍVEL . A ESTRUTURA DE FUNCIONAMENTO DO HTTP SE BASEIA NO CONCEITO DE NÃO MANTER UMA CONEXÃO ATIVA O TEMPO TODO , MAS SOMENTE QUANDO ESTA FOR REALMENTE NECESSÁRIA .

VEJAMOS O QUE ACONTECE QUANDO SEU BROWSER BUSCA UMA IMAGEM EM UMA PÁGINA WWW:





1. O BROWSER IDENTIFICA A IMAGEM E SUA LOCALIZAÇÃO NA INTERNET .

2. ATRAVÉS DE MECANISMOS INTERNOS , O BROWSER ABRE UMA CONEXÃO COM O SERVIDOR ONDE A IMAGEM ESTÁ ARMAZENADA , SOLICITA A MESMA E FECHA A CONEXÃO .

3. O SERVIDOR ABRE UMA CONEXÃO COM O BROWSER , ENVIA OS DADOS REQUISITADOS E FECHA A CONEXÃO .

E ASSIM POR DIANTE , PARA CADA IMAGEM , TEXTO OU SOM EXIBIDO . PODE PARECER CONTRAPRODUCENTE , MAS NA PRÁTICA , ISSO ASSEGURA QUE EM QUALQUER MOMENTO EXISTA ESPAÇO LIVRE NOS CANAIS DE COMUNICAÇÃO . AFINAL , NÃO HÁ DISPERDÍCIO . SÓ SE CRIA UM CANAL , CONSUMINDO RECURSOS DA REDE , QUANDO EFETIVAMENTE HÁ TROCA DE INFORMAÇÃO .

ESTRUTURA DE UMA PÁGINA HTML

UMA PÁGINA , OU DOCUMENTO HTML , NADA MAIS É QUE UM ARQUIVO - TEXTO , PODENDO SER EDITADO EM QUALQUER PROGRAMA , DESDE O MICROSOFT WORD , PASSANDO PELO NOTEPAD , ATÉ O EDIT.COM DO DOS . ESSE , ALIÁS , É O MAIS EFICIENTE , COMO VOCÊ PODERÁ COMPROVAR NO CAPÍTULO SOBRE FERRAMENTAS .

O QUE DIFERENCIA UMA PÁGINA HTML DE UM DOCUMENTO TXT NORMAL É A EXTENSÃO . O ARQUIVO PAGINA.TXT É TRATADO COMO UM ARQUIVO - TEXTO , MAS O ARQUIVO PAGINA.HTM É CONSIDERADO UM ARQUIVO HTML .

FIGURA 1.1 PÁGINA EM HTML , EXIBIDA NO NETSCAPE .





FIGURA 1.2 ARQUIVO - FONTE DA PÁGINA NO MICROSOFT WORD . O QUE PARECE COMPLICADO A PRIMEIRA VISTA NA VERDADE É A LINGUAGEM MAIS FÁCIL JÁ INVENTADA .

OS DOIS TIPOS DE EXTENSÕES MAIS COMUNS PARA ARQUIVOS HTML SÃO .HTM OU .HTML . É QUASE CERTO QUE AS PÁGINAS COM EXTENSÃO .HTM ESTÃO HOSPEDADAS E / OU FORAM CRIADAS EM MÁQUINAS RODANDO DOS/WINDOWS 3.11 . JÁ AS PÁGINAS COM EXTENSÃO .HTML GERALMENTE ESTÃO EM SERVIDORES UNIX OU OS/2 . LEMBRE-SE DE QUE O DOS SÓ PERMITE NOMES DE ARQUIVOS NO FAMIGERADO FORMATO 8.3 , OITO LETRAS PARA O NOME , TRÊS PARA A EXTENSÃO .

URL

TENTE FALAR ISSO SEM DOBRAR A LÍNGUA !

VEM DE UNIFORM RESOURCE LOCATOR E É UM NOME BONITINHO PARA PADRONIZAR OS RECURSOS NA INTERNET . SE VOCÊ QUISER CHAMAR SEU SITE DE ADERBAL.DE.SOUZA.COM , PODE .

SUA HOME PAGE SERIA CHAMADA ASSIM :

HTTP://ADERBAL.DE.SOUZA.COM/SUA-PAGINA.HTM





MAS , SEGUINDO OS PADRÕES PARA UM BOM URL , UMA PÁGINA HTML SERIA BATIZADA DE:

HTTP://WWW.ADERBAL.COM/INDEX.HTM

OUTROS RECURSOS NA FORMA URL :

FTP: FTP.ADERBAL.COM

GOPHER: GOPHER://GOPHER.ADERBAL.COM

NEWS: NEWS://NEWS.ADERBAL.COM

O SERVIDOR ADERBAL.COM PRECISA , CLARO , DISPONIBILIZAR TODOS ESSES SERVIÇOS . MAS , FAZENDO-O E RESPEITANDO OS PADRÕES , O ACESSO A ELES TORNA-SE EXTREMAMENTE SIMPLES .

O BONS BROWSERS PROCURAM AUTOMATICAMENTE POR PÁGINAS CHAMADAS INDEX.HTM OU HOME.HTM . SE UM ENDEREÇO NÃO TERMINAR COM A EXTENSÃO .HTM OU .HTML PROVAVELMENTE A PÁGINA INICIAL CHAMA-SE INDEX OU HOME .

FUTURAS EXPANSÕES

AS TAGS HTML , SÃO EXTREMAMENTE SIMPLES , MAS PODEM INCORPORAR RECURSOS PODEROSOS .

O PADRÃO HTML VAI EVOLUINDO E INCORPORANDO NOVAS FACILIDADES , MAS NUNCA DEIXOU DE SER EXTREMAMENTE SIMPLES . EXISTEM FERRAMENTAS QUE BENEFICIAM OS EXÍMIOS PROGRAMADORES , TORNANDO A WWW EXTREMAMENTE PODEROSA , MAS AO MESMO TEMPO USUÁRIOS COMUNS PODEM PRODUZIR BELAS PÁGINAS , SEM SEQUER SABER PROGRAMAR UMA LINHA DE BASIC . BASTA BOA VONTADE , CURIOSIDADE E , CLARO , UM BOM LIVRO .

NA ÉPOCA DA PRODUÇÃO DESTE LIVRO , MARÇO DE 1996 , PARA OS FUTUROS ARQUEÓLOGOS , AS TENDÊNCIAS DOMINANTES NA INTERNET ERAM : VRLM , PERL , JAVA E JAVASCRIPT .

VAMOS A UM RÁPIDO PASSEIO :





FIGURA 1.3 EXEMPLO DE UMA PÁGINA EM VRML . UMA BAILARINA QUE DANÇA EM TRÊS DIMENSÕES . VOCÊ PODE ASSISTIR À " PERFORMANCE " DE QUALQUER POSIÇÃO , E SE MOVIMENTAR LIVREMENTE TODO O TEMPO . ESSA DEMONSTRAÇÃO PODE SER ENCONTRADA NO SITE DA NETSCAPE , EM HTTP://WWW.NETSCAPE.COM .

QUE TAL ADICIONAR MAIS UMA DIMENSÃO EM SUAS PÁGINAS ? COM A VIRTUAL REALITY MODELING LANGUAGE , LINGUAGEM DE MODELAGEM DE REALIDADE VIRTUAL , É POSSÍVEL CRIAR VERDADEIROS MUNDOS VIRTUAIS , DENTRO DOS QUAIS VOCÊ VOA POR ENTRE PRÉDIOS , PILOTA JATOS DE COMBATE , PARTICIPA DE UM DUELO EM UMA CIDADE SITIADA , PESQUISA UMA BIBLIOTECA VIRTUAL OU PASSEIA EM UMA FESTA , COM OS CONVIDADOS A MILHARES DE QUILÔMETROS UM DO OUTRO . PARA COMPLETAR A ILUSÃO , COLOQUE UM CAPACETE DE REALIDADE VIRTUAL , INSTRUA SEU BROWSER PARA EXIBIR IMAGENS ESTEREOSCÓPICAS , E PRESTO ! VOCÊ ESTÁ LÁ , ONDE QUER QUE SEJA .

QUER DIZER , NA TEORIA DEVE SER ASSIM , MAS ATUALMENTE AS SIMULAÇÕES SÃO GROSSEIRAS , A MOVIMENTAÇÃO É MUITO LENTA , MESMO EM UM PENTIUM , E FAZENDO A CONEXÃO A 28800 AINDA É PRECISO ESPERAR VÁRIOS MINUTOS PARA UM ÚNICO CENÁRIO SER BAIXADO .

A VIDA É DURA E TAMBÉM NÃO HÁ AINDA OPÇÃO PARA CAPACETES . ESQUEÇA SUA NAMORADA VIRTUAL SUECA .





AO MENOS POR UM OU DOIS ANOS , PORQUE A NETSCAPE COMMUNICATIONS E A SILICON GRAPHICS FIZERAM UM ACORDO PARA DESENVOLVER A VESÃO 2.0 DO VRML , QUE SERÁ BASEADA NA TECNOLOGIA MOVING WORLDS . PRETENDEM INCLUIR INCLUSIVE ACELERAÇÃO POR HARDWARE E PERFEITA INTEGRAÇÃO COM OUTRAS TECNOLOGIAS , COMO JAVA E TRANSMISSÕES DE SOM E VÍDEO , DENTRO DOS MUNDOS 3D .

ATÉ 1996 , A VRML ERA COMO O FORD EDSEL E O CINEMA 3D : UMA BOA IDÉIA , MAS FORA DE SUA ÉPOCA . MAS EM 1977 ELE TERÁ TUDO PARA CAIR NO GOSTO DOS USUÁRIOS DA INTERNET . NÃO ESTOU BANCANDO O PROFETA APENAS POR PRETENSÃO , POIS UM ACORDO COMO O NETSCAPE/SGI NÃO É PARA SER DESPREZADO .

FIGURA 1.4 EXEMPLO DO WINPERL , UMA VERSÃO MUITO INTERESSANTE DESSA LINGUAGEM , PARA O WINDOWS 95 . À ESQUERDA PODEMOS VER A LISTAGEM DE UM PROGRAMA QUE IDENTIFICA O SISTEMA OPERACIONAL SOB O QUAL ESTÁ SENDO EXECUTADO , E AO LADO , O RESULTADO DA EXECUÇÃO DA LISTAGEM .

PERL VEM DE PRACTICAL EXTRACTION ANS REPORT LANGUAGE . O BURRO DE CARGA DA INTERNET .

POR TRÁS DE QUASE TODOS OS RECURSOS USADOS NAS PÁGINAS HTML , EXISTE UM PROGRAMA E , PERL FAZENDO O TRABALHO DURO . CONTADORES , RELÓGIOS , LIVROS DE VISITANTES , FORMULÁRIOS E ATÉ MESMO UMA PÁGINA DE INSULTOS SHAKESPERIANOS . TUDO EM PERL .

O FORTE DESSA LINGUAGEM RESIDE EM UMA EXTRAORDINÁRIA CAPACIDADE DE MANIPULAR MASSAS DE TEXTO E EXTRAIR INFORMAÇÃO DELAS . COMBINA AS MELHORES CARACTERÍSTICAS DO C. SED , AWK ESH , SEGUNDO LARRY WALL , O CRIADOR DO PERL .





FIGURA 1.5 PÁGINA DA CNN , EM HTTP://CNN.COM , ONDE , APÓS LER AS NOTÍCIAS , PODE-SE ENVIAR COMENTÁRIOS , QUE FICAM DISPONÍVEIS A TODOS OS USUÁRIOS . A PÁGINA ACIMA FOI GERADA POR UM PROGRAMA EM PERL , COMO PODE-SE VER NO NOME DA MESMA , FEEDBACK.PL/ .

LARRY WALL , O CRIADOR DO PERL , AVISA QUE , NA VERDADE , O NOME SIGNIFICA " PATHOLOGICALLY ECLETIC RUBBISH LISTER " ( LISTADOR PATOLOGICAMENTE ECLÉTICO DE PORCARIAS ) , MAS PEDE PRA QUE A GENTE NÃO CONTE PARA NINGUÉM .

JAVA

A LINGUAGEM JAVA FOI CRIADA PELA SUN MICROSISTEMS , COMO UMA PROPOSTA PARA GERAR APLICAÇOES QUE RODEM EM DIVERSAS PLATAFORMAS , SEM NECESSIDADE DE MODIFICAÇÃO . UM PROGRAMA EM JAVA PODE SER EXECUTADO TANTO EM UM PC , QUANTO EM UM MAC OU UMA ESTAÇÃO SUN SPARCSTATION . O SEGREDO ESTÁ NA INTEGRAÇÃO COM O BROWSER , QUE PASSA A SER QUASE UM " SISTEMA OPERACIONAL " PARA AS APLICAÇÕES EM JAVA . IH , ACABEI DE DIVULGAR OS PLANOS DA NETSCAPE ...

UM PROGRAMA EM JAVA É BEM PARECIDO COM UM PROGRAMA EM C++ , MAS SEM ALGUMAS CARACTERÍSTICAS QUE TORNAM C++ UMA LINGUAGEM PERIGOSA PARA INICIANTES . É PRATICAMENTE IMPOSSÍVEL TRAVAR UM COMPUTADOR COM UM PROGRAMA EM JAVA .





FIGURA 1.6 COMO VOCÊ NÃO PODE VER , A ILUSTRAÇÃO DA XÍCARA DE CAFÉ , AO LADO DO CACHORRINHO , NA VERDADE É UMA ANIMAÇÃO MUITO SIMPÁTICA . INCLUSIVE , REPARE QUE UM DOS QUADROS DA ANIMAÇÃO FORMA A SULHUETA DE UMA MULHER . ESSA PÁGINA PODE SER VISUALIZADA COM O NETSCAPE , OU OUTRO BROWSER QUE SUPORTE JAVA , NO SITE HTTP://JAVA.SUN.COM .

COMO FOI PLANEJADO PARA SER USADA NA INTERNET , A SEGURANÇA EM JAVA É UM POUCO FORTE .

NÃO SE PODE , POR EXEMPLO , LER OU GRAVAR DADOS EM DISCO , USANDO JAVA .

JAVA SERÁ A LÍNGUA FRANCA DA INTERNET EM UM FUTURO PRÓXIMO E SÓ O QUE FALTA É A GRANDE APLICAÇÃO , QUE VAI REVOLUCIONAR A INTERNET TAL QUAL A CONHECEMOS . A SUN INSTITUIU UM CONCURSO PARA CRIAR TAL APLICAÇÃO . DANDO UM MILHÃO DE DÓLARES EM PRÊMIOS , VÊ-SE QUE ELES ESTÃO INTERESSADOS . BILL GATES LICENCIOU JAVA RECENTEMENTE PARA IMPLEMENTÁ-LA EM SEU PRÓPRIO BROWSER , O INTERNET EXPLORER .

PARA EXCELENTES REFERÊNCIAS SOBRE JAVA , VOCÊ PODE VISITAR O SITE DA SUN , EM HTTP://JAVA.SUN.COM OU ENTÃO O SITE DA GAMELAN , EM HTTP://WWW.GAMELAN.COM CHEIO DE BONS EXEMPLOS DO QUE SE PODE FAZER COM JAVA .





FIGURA 1.7 SITE DA GAMELAN. ÓTIMO LOCAL PARA SE INSTRUIR SOBRE JAVA . A LOGOMARCA , NO CANTO SUPERIOR ESQUERDO , É ANIMADA . EM JAVA , CLARO .

JAVASCRIPT

FIGURA 1.8 PÁGINA USANDO RECURSOS DE JAVASCRIPT , LOCALIZADA EM HTTP://WWW.GEOCITIES.COM/TOKYO/1204/GAME.HTML , CRIADA POR STEPHEN WASSELL (SWASSELL@SV.SPAN.COM) . UM BOM ALGORITMO É EXEMPLO DE COMO UM POUCO DE CRIATIVIDADE PODE TORNAR UMA PÁGINA INTERESSANTE . REPARE QUE A CRIATURA QUE VOS ESCREVE CONSEGUIU PERDER UMA PARTIDA DE JOGO - DA - VELHA PARA UM SCRIPT !





O JAVASCRIPT É UMA ALTERNATIVA DESENVOLVIDA PELA NETSCAPE EM CONJUNTO COM A SUN , PARA CRIAR UMA LINGUAGEM AINDA MAIS FÁCIL DO QUE JAVA , EMBORA COM RECURSOS LIMITADOS .

UM USO INTERESSANTE PARA JAVASCRIPT É VERIFICAR A VALIDADE DOS DADOS DE UM FORMULÁRIO , ANTES DE ENVIÁ-LO . PODE-SE FAZER ANIMAÇÕES , TEXTOS EM MOVIMENTO E MUITO MAIS .

PARA UMA DESCRIÇÃO DETALHADA DAS CARACTERÍSTICAS E POSSIBILIDADES DO JAVASCRIPT , RECOMENDO UMA VISITA AO SITE DA NETSCAPE , OU A :

HTTP://WWW.C2.ORG/ANDREWW/JAVASCRIPT/

UM ÓTIMO LOCAL PARA REFERÊNCIAS E EXEMPLOS .

FIGURA 1.9 PÁGINA DO NETSCAPE , TUTORIAL DE JAVASCRIPT DEMONSTRANDO AS DIFERENÇAS ENTRE JAVA E JAVASCRIPT .

OS BROWSERS DOMINANTES: NETSCAPE X MS INTERNET EXPLORER

DESSA VEZ BILL GATES PERDEU O BONDE E ESTÁ TENTANDO CORRER ATRÁS DO PREJUÍZO . MARK ADRESSEN E JIM CLARK CRIARAM O CONCEITO DO " JOGO DA INTERNET " : VOCÊ DÁ DE GRAÇA , SEU PRODUTO , CRIA UM BELO MERCADO E DEPOIS COMEÇA A PENSAR EM COMO GANHAR DINHEIRO COM ISSO .





FOI O QUE FIZERAM COM O NETSCAPE , QUE ALÉM DE SER GRATUITO PARA ESTUDANTES E INSTITUIÇÕES FILANTRÓPICAS , É UM EXCELENTE PRODUTO . HOJE ELE DOMINA 75% DA INTERNET , ENQUANTO O INTERNET EXPLORER , DA MICROSOFT , OCUPA 1% DO MERCADO . MESMO SENDO DISTRIBUÍDO TOTALMENTE DE GRAÇA , PARA QUALQUER UM , ESTE NÃO CONSEGUIU NEM ARRANHAR O ESPAÇO OCUPADO PELO NETSCAPE .

TECNICAMENTE SUPERIOR , O NETSCAPE AINDA APRESENTA A VANTAGEM DE EXISTIR EM VERSÃO WINDOWS 16 BITS , MERCADO QUE A MICROSOFT SIMPLESMENTE IGNOROU , ACHANDO QUE TODOS MIGRARIAM IMEDIATEMENTE PARA O WINDOWS 95 . AGORA , DEPOIS QUE INÊS É MORTA . TIO BILL SOLTOU SUA VERSÃO 16 BITS . A MAIORIA DOS USUÁRIOS , SENTINDO-SE TRAÍDOS , PERMANECE COM O NETSCAPE .

FIGURA 1.10 INTERNET EXPLORER , DA MICROSOFT , EXIBINDO UMA PÁGINA HTML .

DEPOIS DE DOMINAR O MERCADO , A NETSCAPE PASSOU PARA A SEGUNDA FASE DE SEU PLANO : COMEÇOU A ADICIONAR TAGS NOVAS AO HTML , CRIANDO AS CHAMADAS " EXTENSÕES DO NETSCAPE " . SÃO FRAMES , FUNDOS , COLUNAS E MUITAS OUTRAS PEQUENAS COISAS QUE TORNAM AS PÁGINAS BEM MAIS APRESENTÁVEIS . CERTO , ELES ESTÃO SAINDO DO PADRÃO , MAS PRODUZINHO 75% DOS BROWSERS USADOS NO PLANETA PODEM SE DAR A ESSE LUXO .

JÁ A MICROSOFT TENTOU CRIAR ALGO SEMELHANTE E SE SAIU COM UMA OU DUAS TAGS MEIO CAPENGAS , COMO UMA QUE ENVIA UM ARQUIVO MIDI PARA A MÁQUINA DO USUÁRIO E O EXECUTA . O ARQUIVO , CLARO .

QUERER QUE , DENTRE OS 50 MILHÕES DE USUÁRIOS DA INTERNET , VOCÊ ESTEJA USANDO WINDOWS 95 , INTERNET EXPLORER , TENHA PLACA DE SOM E ESTEJA COM ALTO - FALANTE HABILITADO É UMA PRETENSÃO QUE NEM BILL GATES DEVERIA PODER SE DAR AO LUXO DE TER .





FIGURA 1.11 A MESMA PÁGINA , EXIBIDA NO NETSCAPE . REPARE NA FACILIDADE DOS FRAMES , COM OS QUAIS FOI FEITO UM SUMÁRIO DAS INFORMAÇÕES CONTIDAS NO SITE , ACESSÍVEIS A UM SIMPLES CLIQUE .

A PRÓXIMA INOVAÇÃO DA INTERNET CHAMA-SE JAVA E O NETSCAPE A ACOMPANHA DESDE CRIANCINHA . TIO BILL ESTÁ COM ALGUMAS CARTAS NA MANGA E VAI CONTRA - ATACAR EM BREVE .

ESSA BRIGA COM A MICROSOFT VAI SER BOA . VAMOS VER O QUE O FUTURO NOS RESERVA .

BOAS PÁGINAS X PÁGINAS RUINS

COSTUMA-SE DIZER QUE 90% DA INTERNET É LIXO . E DAÍ? 90% DE TODA A PRODUÇÃO HUMANA NÃO É GRANDE COISA , POR QUE A INTERNET SERIA DIFERENTE ? NÃO ESTOU INTERESSADO NOS 90% .

QUERO , COM ESSE LIVRO , AJUDAR VOCÊ A FAZER PARTE DOS 10% , SE POSSÍVEL DO 1% DE PÁGINAS REALMENTE MEMORÁVEIS .

PARA TANTO , ESTUDE . PASSE HORAS TORRANDO CRÉDITOS EM SEU PROVEDOR E ANALISE CADA PÁGINA QUE ENCONTRA . HÁ FERRAMENTAS , QUE SERÃO DESCRITAS MAIS TARDE , QUE POSSIBILITAM BAIXAR SEM ESTAR COM O TAXÍMETRO RODANDO .

FAZER UMA PÁGINA BOA É FÁCIL . AS FEIAS GERALMENTE DÃO MAIS TRABALHO , MAS MUITA GENTE PARECE PREFERIR ASSIM .





VEJA O EXEMPLO DE COMO DINHEIRO E PODER NÃO INFLUENCIEM NA QUALIDADE DE UMA HOME PAGE : NAS ILUSTRAÇÕES , AS PÁGINAS DA XEROX E DA CANON . SÃO AS PÁGINAS CENTRAIS DAS DUAS EMPRESAS , O CARTÃO DE VISITAS NA INTERNET , NOS ENDEREÇOS :

HTTP://WWW.XEROX.COM

HTTP://WWW.CANON.COM

FIGURA 1.12 PÁGINA DA XEROX . CONFUSA , FEIA E INAMISTOSA .





FIGURA 1.13 PÁGINA DA CANON . NOTE COMO É OBJETIVA , ATRAENTE E , ACIMA DE TUDO , PEQUENA .

AS DUAS PÁGINAS APRESENTADAS DEMONSTRAM UMA GRANDE DIFERENÇA NA FILOSOFIA DE CONCEPÇÃO DO SITE . A XEROX PARECE QUERER EXIBIR TODAS AS SUAS INFORMAÇÕES DE UMA SÓ VEZ E ABRE MÃO DE ELEMENTOS GRÁFICOS , EM PROL DA VELOCIDADE . MAS O QUE SE GANHA , EM UM TEMPO MENOR DE DOWNLOAD , PERDE-SE TENTANDO FILTRAR OS DADOS DESEJADOS NO MEIO DE TANTO TEXTO . EM ALGUNS CASOS , A INFORMAÇÃO QUE SE QUER ESTÁ LÁ NO PÉ DA PÁGINA E O USUÁRIO JÁ TERÁ DESISTIDO ANTES DE CHEGAR LÁ . E AINDA TEM A PETULÂNCIA DE COLOCAR , NO FINAL , A PERGUNTA : " ACHOU O QUE QUERIA ? AGRADECEMOS SEUS COMENTÁRIOS E SUGESTÕES " .

JÁ A CANON CRIOU UMA PÁGINA DE ABERTURA COM DUAS TELAS DE ALTURA , O QUE É O IDEAL . OS GRÁFICOS SÃO LEVES E BONITOS . A LOGOMARCA DA CANON , EM VERMELHO , SOBRE UM FUNDO BRANCO , FICOU EXTRAMENTE ELEGANTE . OS ÍCONES PARA ESCOLHA DA LÍNGUA SÃO SIMPLES E OBJETIVOS . ESSA PÁGINA É TRATADA COMO ABERTURA DO SITE E NÃO COMO PANACÉIA PARA A FOME DE INFORMAÇÃO DO USUÁRIO . AFINAL , SE ELE NÃO FOR BEM RECEBIDO ALI , DIFICILMENTE IRÁ ADIANTE .





ANTES QUE VOCÊ PERGUNTE : SITE ( PRONUNCIA-SE "SÁITE" ) É O NOME QUE SE DÁ AO CONJUNTO DE PÁGINAS HTML . HOME PAGE É O NOME QUE SE DÁ À PRIMEIRA PÁGINA DE UM SITE . NO BRASIL CONVENCIONOU-SE CHAMAR DE HOME PAGE O CONJUNTO DE PÁGINAS . ACHO QUE PARA SER DIFERENTE .

REQUISITOS BÁSICOS PARA PRODUZIR UMA HOME PAGE - HARDWARE

AO CONTRÁRIO DO QUE SE PODE PENSAR , NÃO É PRECISO HARDWARE DE FAZER INVEJA AO STEVEN SPIELBERG , PARA PRODUZIR UMA BOA HOME PAGE . CLARO , UMA ESTAÇÃO DE TRABALHO POWER CHALLENGER , DA SILICON GRAPHICS , RODANDO O SOFTWARE WEBFORCE , NÃO FAZ MAL A NINGUÉM , MAS UMA BOA PÁGINA PODE SER PRODUZIDA COM A SEGUINTE CONFIGURAÇÃO :

* 486 DX2-66NHZ COM 8NB DE RAM

UM COMPUTADOR COM QUATRO MEGABYTES DE MEMÓRIA NÃO INVIABILIZA O TRABALHO MAS TORNA O PROCESSO MAIS LENTO . MEMÓRIA , QUANTO MAIS , MELHOR . SE VOCÊ DISPUSER DE POUCOS RECURSOS E MUITA PACIÊNCIA , MESMO UM 386DX 40MHZ É UMA PLATAFORMA ACEITÁVEL .

* PLACA DE VÍDEO EXIBINDO NO MÍNIMO 256 CORES , NA RESOLUÇÃO DE 800X600 , EM UM MONITOR DE 14 POLEGADAS .

NA PRÁTICA , A QUASE TOTALIDADE DAS PLAAS COM MENOS DE UM ANO DE IDADE , SUPORTA 65 MIL CORES EM 800X600 E SE A SUA FOR UMA DELAS , NÃO HESITE EM USAR ESSA RESOLUÇÃO . MAS TENHA SEMPRE EM MENTE QUE MUITA GENTE VAI VER SEU TRABALHO EM 256 CORES . SE FICAR BOM EM 32 MIL , E RUIM EM 256 , NÃO HESITE : COMECE DE NOVO .

* SCANNER DE MÃO COLORIDO

A DEFINIÇÃO DE UMA IMAGEM DE VÍDEO EM MÉDIA É DE 75DPI . OS MELHORES MONITORES EXIBEM 92DPI . ASSIM , UM SCANNER DE MESA COM 1200 DPI NÃO INFUI TANTO NO RESULTADO FINAL . FIQUE COM UM BOM SCANNER DE MÃO , DESDE QUE COLORIDO .

OS MODELOS DE MESA MAIS HUMILDES CUSTAM O DOBRO DOS MODELOS MANUAIS . MAS SE VOCÊ QUISER PAGAR PELO CONFORTO , PAGUE . TRUQUES MAIS AVANÇADOS VÃO EXIGIR UM MODELO DE MESA .

* IMPRESSORA

HOJE VIVO FELIZ COM UMA EPSON STYLUS COLOR II , MAS QUALQUER EQUIPAMENTO IGUAL OU SUPERIOR A UMA CANON BJ600 SUPRE AS NECESSIDADES BÁSICAS , QUE SÃO : LAYOUT , CATÁLOGOS E PROPOSTAS .





COMPRE UMA RESMA DO MELHOR PAPEL QUE PUDER ENCONTRAR E GUARDE-A PARA OS LAYOUTS .

USE O MODO RASCUNHO E IMPRIMA TODAS AS IMAGENS DA SUA COLEÇÃO , MANTENDO ESSE CATÁLAGO SEMPRE À MÃO . NUNCA TENTE SE LEMBRAR DE CABEÇA ONDE ESTÁ AQUELA IMAGEM MARAVILHOSA QUE VOCÊ ESCANEOU EM SETEMBRO . USE UM PAPELZINHO DE QUALIDADE MEDIANA PARA SUAS PROPOSTAS E ORÇAMENTOS .

* TABLETS , MESAS DIGITALIZADORAS , PLACAS DE CAPTURA DE IMAGEM , KITS MULTIMÍDIA , DRIVES DE 8X , ETC .

DISSO TUDO , O ÚNICO ACESSÓRIO QUE REALMENTE PODE VIR A SE TORNAR ESSENCIAL , É O DRIVE DE CD-ROM . MESMO ASSIM , UM EQUIPAMENTO DE VELOCIDADE SIMPLES É PERFEITAMENTE ACEITÁVEL , E QUALQUER OUTRO MAIS AVANÇADO EM MATÉRIA DE PERFORMANCE NÃO OFERECE VANTAGEM NENHUMA AO USUÁRIO .





CAPÍTULO 2

HTML BÁSICO





FIGURA 2.1 PÁGINA PESSOAL DA INTERNAUTA SONIA ROSEMBERG . NÃO HÁ NENHUMA MÁGICA DE HTML EM SUA CONSTRUÇÃO , MAS ESTÁ CORRETA , COM POUCO TEXTO , UM BOM CONTRASTE E IMAGENS LEVES .

ANTES DE SE APROFUNDAR NAS MAGIAS ARCANAS DO HTML , É PRECISO CONHECER OS CONCEITOS BÁSICOS . VAMOS REVER APENAS ALGUNS DELES , INDISPENSÁVEIS PARA QUE VOCÊ APROVEITE OS TRUQUES MAIS INTERESSANTES :

PÁGINA MÍNIMA

UMA PÁGINA EM HTML CONSISTE EM UMA ESTRUTURA TRIPLA : CABEÇALHO HTML , CABEÇALHO DA PÁGINA E CORPO DA PÁGINA . CADA UM DEFINIDO POR UMA TAG CORRESPONDENTE .

A TAG HTML DEVE SER SEMPRE A PRIMEIRA . ELA DIZ AO BROWSER QUE TUDO QUE VIRÁ ADIANTE DEVE SER INTERPRETADO COMO HTML .

A SEGUIR , VEM A TAG , QUE DEFINE O CABEÇALHO DA PÁGINA . DENTRO DA TAG < HEAD > TEMOS A TAG < TITLE > , DENTRO DA QUAL ENCONTRA-SE O NOME DA PÁGINA , QUE APARECE LÁ NO ALTO DOS MENUS , NO SEU BROWSER .





A TAG < BODY > CONTÉM A PÁGINA EM SI . QUALQUER COISA QUE NÃO ESTEJA ENTRE TAGS É CONSIDERADA TEXTO E É EXIBIDA COMO TAL . A PÁGINA MAIS SIMPLES POSSÍVEL , EM HTML É A SEGUINTE :

< HTML >

< HEAD >

< TITLE > NOME DO DOCUMENTO

< / TITLE >

< / HEAD >

< BODY >

HELLO, WORLD

< / BODY >

< / HTM L>

FIGURA 2.2 RESULTADO DA LISTAGEM ANTERIOR , APÓS SER CARREGADA NO NETSCAPE .





DE BRINDE , VOCÊ ACABA DE APRENDER O COMANDO PARA FAZER COMENTÁRIOS EM HTML .

TUDO O QUE ESTIVER ENTRE OS SINAIS SERÁ DESCONSIDERADO PELO BROWSER .

O HTML NÃO DIFERENCIA MINÚSCULAS OU MAIÚSCULAS . PARA O SEU BROWSER , TANTO FAZ VOCÊ ESCREVER RIGHT , right , Right , rIGHT ou RiGhT , MAS RECOMENDA-SE A CONVENÇÃO DE COLOCAR TAGS E ELEMENTOS MODIFICADORES EM MAIÚSCULAS E O RESTO EM MINÚSCULAS .

TAGS E ELEMENTOS MODIFICADORES

EM HTML , CONVENCIONOU-SE CHAMAR OS COMANDOS ENTRE SINAIS DE MENOR E MAIOR <> DE TAGS OU , NA TRADUÇÃO , ETIQUETAS . VAMOS NOS ATER AO NOME ORIGINAL , POR FAVOR .

AS TAGS PODEM TER ELEMENTOS MODIFICADORES . POR EXEMPLO : A TAG QUE DEFINE UMA LINHA HORIZONTAL É < HR > . O ELEMENTO MODIFICADOR DE LARGURA , WIDTH , PODERIA SER UTILIZADO , E SE DESEJÁSSEMOS UMA LINHA HORIZONTAL COM 50% DA LARGURA DA PÁGINA , USARÍAMOS A SINTAXE : < HR WIDTH=50% >

VÁRIOS ELEMENTOS PODEM ESTAR PRESENTES AO MESMO TEMPO EM UMA TAG . ANALISEMOS A TAG A SEGUIR :

< HR WIDTH=45% ALIGN=RIGHT SIZE=4 NOSHADE >

É UMA TAG QUE DEFINE UMA LINHA HORIZONTAL , COM OS ELEMENTOS :

WIDTH - 45% DE LARGURA DA TELA

ALIGN - ALINHAMENTO PELA DIREITA

SIZE - 4 UNIDADES DE ESPESSURA

NOSHADE - SEM O EFEITO 3D . A LINHA APARECE APENAS PRETA .





FIGURA 2.3 EXEMPLO DE USO DOS ELEMENTOS DA TAG < HR > .

COM RARÍSSIMA EXCEÇÕES , AS TAGS EXISTEM SEMPRE AOS PARES . UMA NO FORMATO < TAG > E OUTRA NO FORMATO < / TAG > . SOMENTE O QUE ESTIVER ENTRE ELAS SOFRERÁ SEUS EFEITOS . UMA DAS POUCAS TAGS " SOLITÁRIAS " É JUSTAMENTE A DE CRIAÇÃO DE LINHAS HORIZONTAIS , < HR > .

PRESTE SEMPRE ATENÇÃO AO FECHAMENTO DAS TAGS . FERRRAMENTAS COMO O HOTDOG PRO ( VER CAPÍTULO 10 ) APRESENTAM COMANDOS DE VERIFICAÇÃO DESSE TIPO DE DESLIZE , MAIS OUTROS PROGRAMAS NÃO SÃO TÃO AFORTUNADOS . UMA TAG EM ABERTO E TODO O SEU TEXTO PODE SER EXIBIDO INCORRETAMENTE .

FELIZMENTE O HTML É EXTREMAMENTE COMPLACENTE . VOCÊ PODE COMETER BARBARIDADES E MESMO ASSIM O BROWSER VAI EXIBIR ALGUMA COISA . MESMO QUE NÃO EXIBA , NÃO VAI FAZER NENHUM ESCÂNDALO , COMO AQUELA RIDÍCULA FAIXA VERMELHA DO CLIPPER , OU SIMPLESMENTE TRAVAR SUA MÁQUINA , COMO UM PROGRAMA EM C++ MAL COMPORTADO .

TAGS BÁSICAS

TÍTULOS

UM TEXTO EM HTML É INTERPRETADO COMO TÍTULO , PELO BROWSER , SE ESTIVER ENTRE AS TAGS < HX > E < / HX > , SENDO QUE X É UM NÚMERO ENTRE 1 E 6 , QUE DETERMINA O TAMANHO DA LETRA EM RELAÇÃO À PÁGINA . O VALOR X É INVERSAMENTE PROPORCIONAL À DIMENSÃO , OU SEJA : QUANTO MAIOR O NÚMERO , MENOR A LETRA .





FIGURA 2.4 DEMONSTRAÇÃO DAS TAGS DE TÍTULO EM AÇÃO . O TAMANHO DA LETRA INDEPENDE DA RESOLUÇÃO UTILIZADA PELO COMPUTADOR DO USUÁRIO , SENDO SEMPRE PROPORCIONAL AO ESPAÇO OCUPADO PELO BROWSER .

A LISTAGEM DA PÁGINA ANTERIOR É :

< HTML >



< TITLE > TAGS E CONCEITOS BÁSICOS < / TITLE >

< / HEAD >

< BODY >

< CENTER >

< BR > < BR > < BR > < BR >

< H1 > <H1> TAG DE TÍTULO </H1> < / H1 >

< H2 > <H2> TAG DE TÍTULO </H2> < / H2 >

< H3 > <H3> TAG DE TÍTULO </H3> < / H3 >

< H4 > <H4> TAG DE TÍTULO </H4> < / H4 >

< H5 > <H5> TAG DE TÍTULO </H5> < / H5 >

< H6 > <H6> TAG DE TÍTULO </H6> < / H6 >

< BR > < BR >

JÁ ESTE TEXTO ESTÁ NO CORPO NORMAL

< / CENTER >

< / BODY >

< / HTML >





NÃO SE ASSUSTE COM A ACENTUAÇÃO . ISTO SERÁ EXPLICADO NO CAPÍTULO 3 .

VOCÊ PODE MUDAR O TAMANHO DO TEXTO COM MAIS FLEXIBILIDADE UTILIZANDO A TAG < FONT > NO FORMATO :

< FONT SIZE=X > TEXTO A SER ALTERADO < / FONT >

TODO O TEXTO QUE ESTIVER ENTRE AS TAGS < FONT > SERÁ EXIBIDO COM UMA LETRA EM TAMANHO X . OS VALORES VÁLIDOS SÃO DE 1 A 7 , SENDO QUE O TAMANHO PADRÃO DA FONTE É 3 . VALORES PRECEDIDOS POR UM SINAL DE SOMA OU SUBTRAÇÃO INDICAM AMPLIAÇÕES OU REDUÇÕES EM RELAÇÃO AO TAMANHO PADRÃO DA FONTE , QUE SE DEFINE COM A TAG :

< BASEFONT SIZE=X >

ONDE X SEGUE A MESMA REGRA DA TAG < FONT > . A TAG < BASEFONT > DEVE SER COLOCADA NO ALTO DA PÁGINA , LOGO APÓS A TAG < BODY > .

OUTROS ELEMENTOS MODIFICADORES DE TEXTO :

< B > < / B > TEXTO EM NEGRITO .

< EM > < / EM > OU < I >< / I> TEXTO EM ITÁLICO .

OS VÁRIOS MODIFICADORES PODEM SER ALINHADOS SEM PROBLEMA . UM TEXTO PODE SER APRESENTADO COM NEGRITO E ITÁLICO AO MESMO TEMPO .

FIGURA 2.5 EXEMPLO DE USO DA TAG < BASEFONT > E DPS ATRIBUTOS DE TEXTO ITÁLICO E NEGRITO .





LISTAGEM DA PÁGINA ANTERIOR :

< HTML >

< HEAD > < TITLE > TAGS E CONCEITOS BÁSICOS < / TITLE >

< / HEAD >

< BODY > < BASEFONT SIZE=8 >

< CENTER >

< BR >

TEXTO EM < STRONG > NEGRITO < / STRONG > < BR > < BR >

TEXTO EM < EM > < I > ITÁLICO < / I >< / EM > < BR > < BR >

TEXTO < U > < EM > < I > < STRONG > COM TUDO JUNTO < / STRONG > < / I > < / EM > < / U > < BR > < BR >

< / CENTER >

< / BODY >

< / HTML >

ALINHAMENTO E FORMATAÇÃO

O HTML NÃO É MUITO BOM EM MATÉRIA DE FORMATAR TEXTOS , MAS SEMPRE SE DÁ UM JEITO .

UMA TAG INDISPENSÁVEL , QUE POR INCRÍVEL QUE PAREÇA , FOI UMA PROPOSTA DA NETSCAPE PARA A VERSÃO 2.0 DO HTML E AINDA NÃO HAVIA SIDO INCLUÍDA NA ESPECIFICAÇÃO OFICIAL ATÉ A DATA DA FINALIZAÇÃO DESTE LIVRO , É A < CENTER >

COM O NOME DIZ , ELA SERVE PRA CENTRALIZAR ELEMENTOS . QUALQUER COISA COLOCADA ENTRE AS TAGS < CENTER > E < / CENTER > SERÁ CENTRALIZADA EM RELAÇÃO À PÁGINA .

FIGURA 2.6 EXEMPO DA TAG < CENTER > . NO USO REAL , A TAG OBVIAMENTE NÃO É VISÍVEL .





TAG < BR >

VEM DE LINE-BREAK , OU QUEBRA DE LINHA . EQUIVALE A UM BOM E VELHO LINEFEED , UM ENTER , UM CARRIAGE RETURN . OU SEJA : GERA UMA QUEBRA DE LINHA . O HTML NÃO RECONHECE QUALQUER FORMATAÇÃO FEITA NO TEXTO , QUE NÃO SEJA INDICADA POR TAGS . ASSIM , A LISTAGEM :

< HTML >

< HEAD > < TITLE > TESTE < / TITLE >

< / HEAD >

< BODY >

RODOLFO,

RODRIGO,

THALIA,

VALENTE,

PATYNADORA E

ANGELITA

< / BODY >

< / HTML >

É EXIBIDA POR UM BROWSER , DESTA FORMA :

RODOLFO,RODRIGO,THALIA,VALENTE,PATUNADORA E ANGELITA

FIGURA 2.7 EXIBINDO UM TEXTO SEM QUEBRAS DE LINHA .

PARA QUE A LISTA SEJA CORRETAMENTE EXIBIDA , PRECISAMOS DE UMA TAG DE QUEBRA DE LINHA . FICANDO ASSIM :

< HTML >

< HEAD > < TITLE > TESTE < / TITLE >

< / HEAD >

< BODY >

RODOLFO, < BR >

RODRIGO, < BR >

THALIA, < BR >

VALENTE, < BR >

PATYNADORA E < BR >

ANGELITA < BR >

< / BODY >

< / HTML >

QUE POR SUA VEZ GERA O RESULTADO :





RODOLFO,

RODRIGO,

THALIA,

VALENTE,

PATUNADORA E

ANGELITA

FIGURA 2.8

INSERINDO IMAGENS

O ATO DE INSERIR UMA IMAGEM EM UMA PÁGINA HTML PODE SER SIMPLES OU COMPLICADO . É SIMPLES SE VOCÊ JÁ TEM TUDO PREPARADO E PRETENDE , POR EXEMPLO , INSERIR O ARQUIVO ICONE.GIF .

BASTA ACRECENTAR , NA ÁREA DESEJADA DA PÁGINA , A SEGUINTE LINHA :

< IMG SRC=ICONE.GIF" >

O BROWSER PROCURARÁ O ARQUIVO NO DIRETÓRIO ONDE SE ENCONTRA A PÁGINA E O EXIBIRÁ .

VOCÊ PODE COMPLICAR , COLOCANDO O CAMINHO COMPLETO PARA A IMAGEM , COMO EM :

< IMG SRC="HTTP://WWW.KOBAIASHI.COM/USERS/KIRK/ IMAGENS/ICONE.GIF" >

MAS NÃO HÁ VANTAGENS EM SE USAR ESSE MÉTODO . APENAS EM SITES MUITO GRANDES , COM CENTENAS DE PÁGINAS E IMAGENS , O QUE , NA MAIORIA DAS SITUAÇÕES , NÃO É O CASO .

UM MODIFICADOR PARA A TAG < IMG SRC > É O ALT , QUE TRAZ UMA DESCRIÇÃO ALTERNATIVA DA IMAGEM PARA OS CASOS EM QUE O USUÁRIO INSTRUIU O BROWSER A NÃO EXIBIR GRÁFICOS .

UM EXEMPLO DE USO DO ALT :

< IMG SRC="ICONE.GIF" ALT="UM BELO ICONE" >

NORMALMENTE VOCÊ TERÁ FEITO SUA IMAGEM NO FORMATO FINAL , MAS PODE SER QUE PRECISE ALTERAR O TAMANHO DA MESMA . ISSO PODE SER ÚTIL QUANDO FOR FEITA UMA VERSÃO DE UMA PÁGINA MENOR , BAIXANDO A ÁREA DE TRABALHO DE 800X600 PARA 640X480 .

EM VEZ DE REFAZER AS IMAGENS PRINCIPAIS , VOCÊ APENAS AS REDUZ , PROPORCIONALMENTE COM ELEMENTOS MODIFICADORES WIDTH E HEIGHT , QUE REDIMENDIONAM A IMAGEM PARA A LARGURA E ALTURA , EM PIXELS , DESEJADA .





IMAGINEMOS QUE UMA FOTO FOI ESCANEADA EM 640X480 , MAS QUEREMOS REPRODUZÍ-LA NA PÁGINA EM 320X200 . BASTA USARMOS A SEGUINTE SINTAXE :

< IMG SRC="FOTO.GIF" WIDTH=320 HEIGHT=200 >

BORDAS

EXISTE AINDA O MODIFICADOR BORDER , QUE GERA UMA MOLDURA NA IMAGEM . O DEFAULT É SEM MOLDURA E DEVERIA CONTINUAR ASSIM . EXISTEM MÉTODOS MAIS ELEGANTES DE PRODUZIR MOLDURAS , COMO VOCÊ VERÁ NO CAPÍTULO 8 .

DE QUALQUER FORMA , A SITAXE É :

BORDER=X , SENDO X UM INTEIRO POSITIVO , INDO DE UM ATÉ ONDE O BOM SENSO DEIXAR .

FIGURA 2.9 EXEMPLO DE VÁRIAS ESPESSURAS DE BORDAS EM IMAGENS . O MELHOR , DO PONTO DE VISTA ESTÉTICO , É A IMAGEM SEM BORDA ALGUMA .

PARÁGRAFO

A TAG DE PARÁGRAFO EM HTML É MUITO FRACA , NÃO APRESENTANDO TEXTO JUSTIFICADO , OU QUEBRA DE PALAVRAS . A VANTAGEM DA TAG É GERAR QUEBRAS DE LINHA AUTOMÁTICAS , SEM O < BR > E PERMITIR ALINHAMENTO PELA DIREITA .

A SINTAXE É BEM SIMPLES : < P > < / P > E PRONTO .

VEJAMOS O EXEMPLO A SEGUIR :





FIGURA 2.10 ALINHAMENTOS POSSÍVEIS COM A TAG DE PARÁGRAFO .

E A LISTAGEM-FONTE :

< HTML >

< HEAD > < TITLE > TESTE < / TITLE >

< / HEAD >

< BODY > < BASEFONT SIZE=5 >

< CENTER > < H3 > ALINHAMENTO PADRÃO < / H3 > < / CENTER >

< P >

" ERGAMOS UM BRINDE AOS VELHOS FANTASMAS , AMIGOS AUSENTES , AMORES PERDIDOS E À ESTAÇÃO DAS BRUXAS . E QUE CADA UM DÊ AO DEMÔNIO AQUILO QUE LHE É MERECIDO . " < / P >

< CENTER > < H3 > ALINHAMENTO CENTRALIZADO < / H3 > < / CENTER >

< P ALIGN=CENTER >

" ERGAMOS UM BRINDE AOS VELHOS FANTASMAS , AMIGOS AUSENTES , AMORES PERDIDOS E À ESTAÇÃO DAS BRUXAS . E QUE CADA UM DÊ AO DEMÔNIO AQUILO QUE LHE É MERECIDO . " < / P >

< CENTER > < H3 > ALINHAMENTO PELA DIREITA < / H3 > < / CENTER >

< P ALIGN=RIGHT >

" ERGAMOS UM BRINDE AOS VELHOS FANTASMAS , AMIGOS AUSENTES , AMORES PERDIDOS E À ESTAÇÃO DAS BRUXAS . E QUE CADA UM DÊ AO DEMÔNIO AQUILO QUE LHE É MERECIDO . " < / P >

< / BODY >

< / HTML >





TAGS SORTIDAS < ADDRESS >

FORMATA UM TEXTO COMO UM ENDEREÇO . NA VERDADE , O QUE ELA FAZ É COLOCAR O TEXTO EM ITÁLICO . JÁ FOI MAIS UTILIZADA , HOJE É UMA TAG OBSOLETA .

VEJAMOS UMA LISTAGEM :

< H3 > EXEMPLO DE TAG ADDRESS < / H3 >

< ADRESS >

AXCEL BOOKS DO BRASIL EDITORA < BR >

RUA DA GLÓRIA, 344 DÉCIMO ANDAR < BR>

20241-180 - RIO DE JANEIRO - RJ < BR>

TEL. (021) 221-8500 < BR >

< / ADRESS >

FIGURA 2.11 EXEMPLO DE FORMATAÇÃO DA LISTAGEM ANTERIOR .

LISTAS :

JÁ FORAM MUITO USADAS , MAS HOJE EM DIA AS TABELAS VÊM GANHANDO IMPORTÂNCIA , NA FORMATAÇÃO DE PEQUENAS MASSAS DE DADOS . EXISTEM DOIS TIPOS BÁSICOS DE LISTAS : AS NUMERADAS E AS NÃO-NUMERADAS . VEJAMOS UMA LISTA NUMERADA :

FIGURA 2.12





A LISTAGEM PARA A FIGURA ANTERIOR É :

< OL >

< LH > BEST TREK EPISODES < / LH >

< LI > RELICS < / LI >

< LI > WE'LL ALLWAYS HAVE PARIS < / LI >

< LI > HOLLOW PURSUITS < / LI >

< LI > THE MEASURE OF A MAN < / LI >

< LI > HIDE AND Q < / LI >

< LI > BEST OF BOTH WORLDS < / LI >

< LI > UNIFICATION < / LI >

< / OL >

E AGORA UMA LISTA NÃO-NUMERADA :

FIGURA 2.13

E A LISTAGEM :

< UL >

< LH > BEST TREK EPISODES < / LH >

< LI > RELICS < / LI >

< LI > WE'LL ALLWAYS HAE PARIS < / LI >

< LI > HOLLOW PURSUITS < / LI >

< LI > THE MEASURE OF A MAN < / LI >

< LI > HIDE AND Q < / LI >

< LI > BEST OF BOTH WORLDS < / LI >

< LI > UNIFICARION < / LI >

< / UL >

REPARE QUE A SINTAXE DA TAG DE LISTAS É EXTRAMAMENTE SIMPLES . < UL > < / UL > DEFINE UMA LISTA NÃO-NUMERADA E < OL > < / OL > DEFINE UMA LISTA NUMERADA. OS ELEMENTOS SÃO DEFINIDOS PELA TAG < LI > < / LI > E COMO É COMUM EM HTML , PODEM CONTER LINKS , IMAGENS OU TEXTO .





CAPÍTULO 3

DICAS ESSENCIAIS





PLANEJE ANTES SUA PÁGINA

SE VOCÊ FOR IMEDIATISTA , PODE COMEÇAR UMA HOME PAGE DIRETO NO COMPUTADOR . MAS A MONTAGEM DA MESMA LEVARÁ CINCO VEZES MAIS TEMPO DO QUE SE VOCÊ SEGUIR OS PASSOS ABAIXO :

* DESLIGUE O MICRO

* ARRUME UM BLOQUINHO E UM LÁPIS

* PEGUE SEU CATÁLOGO DE IMAGENS

* RASCUNHE AS PÁGINAS , COM IMAGENS , LINKS E TEXTO

* DEFINA QUAIS AS IMAGENS QUE DEVEM SER ALTERADAS OU PRODUZIDAS

* AGORA SIM , LIGUE O COMPUTADOR

* PRODUZA TODAS AS IMAGENS

* SÓ ENTÃO CHAME SEU EDITOR HTML PREFERIDO E COMECE A CODIFICAR A PÁGINA

COM ESSES PROCEDIMENTOS SIMPLES , VOCÊ CODIFICARÁ UMA PÁGINA DE 400K EM MEIA HORA !

NÃO MISTURE ESTILOS E BOTÕES

JÁ EXISTEM CENTENAS DE CATÁLOGOS DE IMAGENS NA INTERNET . SUA PÁGINA NÃO PRECISA SE JUNTAR A ELES . PARA QUE USAR MAIS DE UM TIPO DE FUNDO EM UM SITE DE 5 PÁGINAS ? EXISTE ALGUMA JUSTIFICATIVA PARA CADA LINK DE E-MAIL USAR ÍCONE DIFERENTE ?

NÃO SE ACANHE EM REPETIR UMA IMAGEM . A MESMA BARRA DE ÍCONE DIFERENTE ?

UM SITE DE PESQUISAS RÁPIDAS NÃO PODE SER GRAFICAMENTE INTENSIVO . UMA PÁGINA EXIBINDO O PORTIFÓLIO DE UM FOTÓGRAFO , NÃO PODE USAR LINKS DE TEXTO , PRECISA DE THUMBNAILS .

USE ÍCONES EXCLUSIVOS OU MODIFICADOS

IMAGINE A CENA : VOCÊ TERMINA UM SITE INTEIRO , QUE CUSTOU UMA NOTA . SEU CLIENTE APROVA , PAGA E QUANDO CHEGA EM CASA , O FILHO MOSTRA A HOME PAGE QUE FEZ NO BBS COM OS MESMOS ÍCONES E LINHAS E BARRINHAS E FIGURAS QUE VOCÊ USOU ! O CLIENTE LIGA , FURIOSO , E SUA ÚNICA SAÍDA É TENTAR FINGIR QUE É ENGANO ... ' ESTAÇÃO BRASILEIRA DA ANTÁRTIDA' - VOCÊ DIZ , MAS ELE RECONHECE A SUA VOZ .





VOCÊ NÃO VAI SE ARREPENDER SE PESQUISAR OS BONS PROGRAMAS GRÁFICOS . É POSSÍVEL CRIAR ÍCONES DECENTES EM MUITO POUCO TEMPO , USANDO FERRAMENTAS COMO O KAI'D POWER TOOLS E O ALDUS GALLERY EFFECTS . E COM A GARANTIA DE QUE NINGUÉM MAIS TEM AQUELAS IMAGENS .

SEJA OBJETIVO .

SE VOCÊ QUER DIVAGAR SOBRE ALGUM ASSUNTO , TECER CONSIDERAÇÕES FILOSÓFICAS SOBRE A VAIDADE DA ESTRATÉGICA DE BILL GATES PRA DOMINAR O MUNDO , ENTÃO ESCREVA UM LIVRO SOBRE ISSO .

QUANDO UM USUÁRIO ACESSA A SUA HOME PAGE , ELE ESTÁ PAGANDO PELO ACESSO . ALGUM PROVEDOR ESTÁ LEVANDO ENTRE US$2 E US$2,50 A HORA E QUEM PAGA QUER MAXIMIZAR O USO DO DINHEIRO . CRIE UMA PÁGINA PARA ABOBRINHAS SE FOR O CASO , MAS TORNE A PASSAGEM DO USUÁRIO RÁPIDA E PRODUTIVA . SE FOR UMA PÁGINA DE VENDAS , CRIE UM LINK PARA ' APRESENTAÇÃO ' E UM LINK PARA ' VENDAS ' . NADA DE QUERER CATIVAR O COMPRADOR PRIMEIRO E DEPOIS AGARRAR A CARTEIRA DELE , COM UMA PÁGINA ' APRESENTAÇÃO E VENDAS ' .

CUIDADO COM O HIPERTEXTO

O HTML POSSIBILITA QUE UM SIMPLES TEXTO SEJA UMA FONTE DE LINKS PARA DEZENAS DE OUTROS DOCUMENTOS , IDÉIAS E CONCEITOS . POR ISSO MESMO É A FORMA MAIS DISPERSIVA DE ORGANIZAÇÃO DE INFORMAÇÕES JÁ INVENTADA .

UMA SIMPLES FRASE COMO :

" ESTA SUB-ROTINA EM C++ É TÃO LINDA QUANTO O SORRISO DA CLAUDIA SCHIFFER PELA MANHÃ . "

PODE LEVAR , SE O USUÁRIO CLICAR NA PALAVRA " CLAUDIA SCHIFFER " , PARA UMA COLETÂNEA DAS PÁGINAS DA MODELO , QUE POR SUA VEZ , LEVARÃO PARA OUTRAS PÁGINAS DE OUTRAS MODELOS .

MUITO INTERESSANTE , MAS DIFICILMENTE O USUÁRIO FARÁ O CAMINHO INVERSO , VOLTANDO PARA SUA PÁGINA . TEXTOS SÃO POR NATUREZA LINEARES E AS PESSOAS ESTÃO ACOSTUMADAS A LER DESSA FORMA . EVITE LINKS DESNECESSÁRIOS E QUEBRAS NA LEITURA QUE LEVEM PARA FORA DE SUA PÁGINA .

QUE OS LINKS FIQUEM EM SEU DEVIDO LUGAR : A PÁGINA DE LINKS .





RENOVE SEMPRE

A EXPERIÊNCIA PROVA QUE UMA HOME PAGE COSTUMA SER VISITADA POR UM MESMO USUÁRIO 3 VEZES .

NA PRIMEIRA , ELE VAI POR CURIOSIDADE OU POR CORTESIA .

NA SEGUNDA , ELE VOLTA PARA VER SE ALGO MUDOU . SE NADA HOUVER MUDADO , ELE DEIXA PASSAR ALGUNS DIAS E RETORNA UMA TERCEIRA VEZ .

NA TERCEIRA VEZ , ESTANDO TUDO COMO ANTES , O USUÁRIO APAGA AQUELA PÁGINA DO ' CADERNINHO DE ENDEREÇOS ' E NUNCA MAIS RETORNA .

SE VOCÊ PRETENDE MANTER UMA PÁGINA INTOCADA POR MAIS DE 15 DIAS , DEIXE ISSO BEM CLARO USUÁRIO . NÃO SE ACANHE EM EXPLICAR SEUS MOTIVOS , DESDE QUE CONVINCENTES , E POR NADA NESSE MUNDO DEIXE DE COLOCAR A NOVA PÁGINA NO AR , NO DIA CERTO . OS USUÁRIOS SÃO IMPLACÁVEIS E ESTARÃO LÁ PARA CONFERIR .

NOVIDADES ? DESTAQUE-AS .

SÓ UM BOTÃO " WHAT'S NEW ? " NEM SEMPRE É SUFICIENTE . RESERVE UM ESPAÇO NA PÁGINA INICIAL PARA AS NOVIDADES RENOVE-AS SEMPRE , SE POSSÍVEL . NADA MAIS CHATO QUE VISITAR UMA PÁGINA MÊS APÓS MÊS E ENCONTRAR , COMO DIZIA CAZUZA " UM MUSEU DE GRANDES NOVIDADES " .

SE É UM BOTÃO , NÃO PRECISA DE MOLDURA .

PRÁTICA IRRITANTE EM MUITOS SITES . UM ÍCONE OU UM BOTÃO , SE É BEM FEITO , FICA NATURALMENTE DESTACADO DO RESTO DA PÁGINA . A BORDA DEFAULT COLOCADA PELA MAIORIA DOS BROWSERS É DESNECESSÁRIA E ANTIESTÉTICA .

SE TENHO UM TEXTO COMO " CLIQUE AQUI PARA ME ENVIAR UM E-MAIL " E AO LADO UM ÍCONE DE UMA CARTA , A SINTAXE DO ÍCONE SERIA A SEGUINTE :

< A HREF="MAILTO:CARDOSO@UNIKEY.COM.BR" > < IMG SRC=BULLET.GIF" > < / A >

MAS ISSO NOS DEIXA COM A IRRITANTE BORDA . SENDO ASSIM , MODIFIQUE AS SUAS TAGS RELATIVAS À IMAGEM , INSERINDO O ATRIBUTO BORDER=0 . A TAG ACIMA FICARIA , ENTÃO :

< A HREF="MAILTO:CARDOSO@UNIKEY.COM.BR" > < IMG SRC="BULLET.GIF" BORDER=0 > < / A >

O ATRIBUTO BORDER=X TAMBÉM PODE SER USADO COMO MOLDURA DE FOTOS E OUTRAS IMAGENS . NESSES CASOS , 2 É RECOMENDADO COMO VALOR MÍNINO DE X .





FIGURA 3.1 REPARE NA MOLDURA DOS BOTÕES , NO EXEMPLO INFERIOR . TOTALMENTE DISPENSÁVEL .

TAMANHO PADRÃO : 800X600 X 256 CORES

EXISTE DE TUDO NA INTERNET . DESDE GAROTAS USANDO VIDEOGAMES PARA ACESSAR E-MAIL , ATÉ SUPERCOMPUTADORES N-CUBE . CRIAR UMA PÁGINA QUE MANTENHA UMA APARÊNCIA CONSISTENTE EM MAIS DE 50 MILHÕES DE COMPUTADORES É UMA TAREFA NÃO SÓ INGLÓRIA , COMO IMPOSSÍVEL .

MESMO ASSIM , EXISTE UM MEIO-TERMO PRA TUDO . INCLUINDO O TAMANHO DAS TELAS . O PADRÃO SÃO OS MONITORES DE 14 POLEGADAS . NESSE TIPO DE TELA , A RESOLUÇÃO IDEAL PARA SE TRABALHAR É 800X600 . NÃO TÃO BAIXA QUANTO 640X480 E NEM EXTREMAMENTE ALTA COMO 1024X768 .

NA FIGURA A SEGUIR , VEJA A MESMA PÁGINA , EXIBINDA NAS TRÊS RESOLUÇÕES ;

FIGURA 3.2 UMA PÁGINA APERTADA EM 640X480 .





FIGURA 3.3 A MESMA PÁGINA , NO TAMANHO ORIGINAL , 800X600 .

FIGURA 3.4 FINALMENTE , EXIBIDA EM UM BROWSER CONFIGURADO PARA 1024X768 .

O QUE APRESENTA SER UMA VANTAGEM É UM SUPLÍCIO EM UM MONITOR DE 14 POLEGADAS .





LINKS

LINKS EXTERNOS

A TAG USADA PARA LINKS É A < A HREF= > < / A > , REPARE QUE ELA É ENCERRADA PELA TAG < / A > . APÓS O HREF , COLOCA-SE O DESTINO DO LINK . NO CASO , VAMOS CRIAR UM LINK PARA A PÁGINA DA NETSCAPE , EM HTTP://WWW.NETSCAPE.COM .

ASSIM , USAMOS A SINTAXE :

< A HREF="HTTP://WWW.NETSCAPE.COM" > < / A >

QUE POR SI SÓ , NÃO LEVA A NADA , POIS NÃO HÁ NADA ENTRE O SINAL DE MAIOR DA TAG < A HREF= > E A TAG < / A > . PRECISAMOS COLOCAR ALGO LÁ . PODE SER UM TEXTO OU UMA IMAGEM .

VAMOS USAR UM TEXTO :

< A HREF="HTTP://WWW.NETSCAPE.COM" > CLIQUE AQUI PARA VISITAR A NETSAPE < / A >

ASSIM , SERÁ EXIBIDO O TEXTO " CLIQUE AQUI ... " E , SE VOCÊ CLICAR , IRÁ PARA A NETSCAPE , OBVIAMENTE .

CRIANDO LINKS DENTRO DA PRÓPRIA PÁGINA

AO CONTRÁRIO DOS LINKS EXTERNOS , QUE DISPERSAM A ATENÇÃO , LINKS PARA ALVOS DENTRO DA MESMA PÁGINA PODEM SER GRANDES FERRAMENTAS .

UM EXEMPLO SERIA UMA PÁGNA COM UM GLOSSÁRIO AO FINAL . O USUÁRIO CHEGARIA ATÉ ELE LENDO A PÁGINA ATÉ O FIM , OU ENTÃO CLICANDO EM UMA PALAVRA - CHAVE , QUE O LEVARIA ATÉ A DEFINIÇÃO DA MESMA , NO GLOSSÁRIO .

UM ALVO PARA UM LINK INTERNO É CONSTRUÍDO COM A TAG :

< A NAME="ALVO" > < / A >

ONDE "ALVO" PODE SER QUALQUER TERMO , OU MESMO UMA FRASE . ENTRE A PARTE < A NAME="ALVO" > E A PARTE < / A > PODE ENTRAR UM TEXTO , UMA PALAVRA , OU MESMO UMA IMAGEM .

SE FOR USAR UM GRÁFICO , LEMBRE-SE DE SUPRIMIR A MOLDURA , COM A TAG BORDER=0 .

AQUI ESTÁ A LISTAGEM COMPLETA DE UMA PÁGINA USANDO UM LINK DENTRO DELA MESMA :

< HTML >

< HEAD >

< TITLE > TESTE DE LINK DENTRO DA PRÓPRIA PÁGINA < / TITLE >

< / HEAD >

< BODY >





O HIPERTEXTO TALVEZ SEJA A MOLA-MESTRA DA < A HREF="#GLOSSARIO" > WWW < / A >

< ! - NÃO SE ASSUSTE . ESSA PILHA DE QUEBRAS DE LINHA SERVE APENAS - > < ! - PARA MANTER O ALVO DO LINK FORA DA TELA . - > < BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR >

< BR > < BR > < BR > < BR > < BR >

< A NAME="ALVO" > < / A >

< A NAME="GLOSSARIO" >

< ! - AQUI ENTRA O GLOSSARIO - >

< ! - O USUARIO PODE CHEGAR AQUI VIA LINK NO ÍNICIO - >

< ! - OU VINDO PASSO - A - PASSO ATRAVÉS DA PÁGINA - >

< H3 > GLOSSÁRIO < / H3 >

< BR >

WORLD WIDE WEB - TEIA DE ALCANCE MUNDIAL - REDE FORMADA POR MILHÕES DE COMPUTADORES EM TODO O MUNDO , QUE TROCAM DADOS DE FORMA MULTIMIDIA , ATRAVÉS DE UM PROTOCOLO EM COMUM .

< / A >

< / BODY >

< / HTML >

FIGURA 3.5 PÁGINA COM UM LINK INTERNO . REPARE COMO O NETSCAPE IDENTIFICA O LINK , TORNANDO-O AZUL E SUBILINHANDO-O .





FIGURA 3.6 PARTE DE BAIXO DA PÁGINA , EXIBIDA AO CLICAR-SE NO LINK WWW .

VOCÊ PODE SALTAR DIRETAMENTE PARA UM LINK ESPECÍFICO , MESMO EM OUTRA PÁGINA , BASTANDO PARA ISSO ACRESCENTAR O CARACTERE # SEGUIDO DO LINK .

ASSIM , UM LINK QUE EXIBISSE A FRASE " VERIFIQUE OS CUSTOS NA MINHA PÁGINA " E QUE SALTASSE DIRETO PARA O LINK CUSTOS DENTRO DA PÁGINA HTTP:WWW.CARDOSO.COM/SERVICOS.HTM FICARIA ASSIM :

< A HREF ="HTTP://WWW.CARDOSO.COM/SERVICOS.HTML #CUSTOS" > VERIFIQUE OS CUSTOS NA MINHA PÁGINA < / A >

ACENTUAÇÃO - NÃO É TÃO COMPLICADO

APESAR DE NÃO TER SIDO CRIADA PENSANDO EM CARACTERES ACENTUADOS DA LÍNGUA PORTUGUESA , A INTERNET FLORESCEU COMO UMA REDE CIENTÍFICA . E CIENTISTAS ADORAM USAR ALFAS , BETAS , GAMAS E OUTROS CARACTERES MUITO MAIS ESQUISITOS QUE UM TRIVIAL A-TIL .

FAZER COM QUE ESSES CARACTERES PASSEM INCÓLUMES POR CENTENAS DE MÁQUINAS , USANDO TABELAS DE CARACTERES DIFERENTES , MUITAS VEZES INCOMPATÍVEIS , SE TORNOU ESSENCIAL PARA O FUNCIONAMENTO DA REDE E DA PRÓPRIA WWW .

O HTML , SE SAIU MUITO BEM , CRIANDO METACARACTERES PARA REPRESENTAR OS CARACTERES ACENTUADOS , LETRAS GREGAS , SINAIS ESPECIAIS E OUTROS SÍMBOLOS .





NESSA FORMA DE CODIFICAÇÃO , UM " Á " É REPRESENTADO EM HTML , PELO SEGUINTE METACARECTERE :

& AACUTE;

ASSIM , A FRASE " É MELHOR UM PÁSSARO NA MÃO DO QUE DOIS VOANDO "

EM HTML , FICARIA :

" & ACUTE; MELHOR UM P & ACUTE;SSARO NA M & ATILDE;O DO QUE DOIS VOANDO "

CARACTERES ACENTUADOS EM HTML

LETRA - CÓDIGO - LETRA - CÓDIGO - LETRA - CÓDIGO

AE - & AElig; - Ï - & Iuml; - ae - & aelig;

Á - & Aacute; - Ñ - & Ntilde; - à - & agrave;

 - & Acirc; - Ó - & Oacute; - A - & Aring;

À - & Agrave - Ô - & Ocirc; - ã - & atilde;

A - & Aring; - Ò - & Ograve; - ä - & auml;

à - & Atilde - O - & Oslash; - ç - & ccedil;

Ä - & Auml; - Õ - & Otilde; - é - & eacute;

Ç - & Ccedil; - Ö - & Ouml; - ê - & ecirc;

D - & ETH; - P - & THORN; - è - & egrave;

É - & Eacute; - Ú - & Uacute; - O - & eth;

Ê - & Ecirc; - Û - & Ucirc; - ë - & euml;

Ë - & Euml; - Ü - & Uuml; - Î - & Icirc;

Í - & Iacute; - Ý - & Yacute; - ì - & igrave;

Î - & Icirc; - á - & aacute; - Ï - & iuml;

Ì - & Igrave; - â - & acirc; - ñ - & ntilde;

FIGURA 3.7 TABELA COM OS CARACTERES ACENTUADOS E SEUS CORRESPONDENTES EM HTML .

MAS NÃO SE PREOCUPE ! OS BONS EDITORES HTML PERMITEM QUE VOCÊ ESCREVA EM PORTUGUÊS NORMAL E CONVERTEM OS CARACTERES ESPECIAIS AUTOMATICAMENTE . NO HOTDOG , DA SAUSAGE SOFTWARE , A OPÇÃO QUE ATIVA ESSA FACILIDADE FICA NO MENU : TOOLS/OPTIONS/EDITING/CONVERT EXTENDED CHARACTERS WHILE TYPING .

PARA MAIORES INFORMAÇÕES SOBRE O HOTDOG , VEJA O CAPÍTULO 10 .

UM USUÁRIO COLOCOU UMA HOME PAGE EM UM BBS CARIOCA TOTALMENTE SEM ACENTOS . E AINDA SE DESCULPOU , DIZENDO QUE O EDITOR NÃO PERMITIA O USO DOS MESMOS .





ALÉM DE SER UM SACRILÉGIO COM O HOTDOG , ISTO DEMONSTROU UM TOTAL DESCONHECIMENTO , TANTO DO SOFTWARE QUANTO DE HTML . NUNCA DISPONIBILIZE NADA PARA O PÚBLICO , SE O RESULTADO NÃO FOR MINIMAMENTE SATISFATÓRIO .

A INTERNET NÃO É TÃO RÁPIDA QUANTO VOCÊ IMAGINA

ENQUANTO NÓS RASTEJAMOS A 14400 OU 28800 , NOS ESTADOS UNIDOS OS PROVEDORES JÁ OFERECEM INTERNET DOMICILIAR VIA ISDN A 64KB OU 128KB . MAS MESMO LÁ , ISSO AINDA É EXCEÇÃO . A GRANDE MAIORIA ACESSA NA MESMA VELOCIDADDE QUE NÓS . COM A DIFERENÇA DO NOSSO CANAL INTERNACIONAL SER UM TANTO OU QUANTO SUBDIMENSIONADO , MAS ISSO NÃO IMPORTA NO MOMENTO .

VAMOS A UM PEQUENO EXERCÍCIO : IMAGINEMOS UMA CONEXÃO IDEAL : 64KB / SEGUNDO . GRANDE PARTE DOS PROVEDORES NO BRASIL TRABALHA NESSA VELOCIDADE , DIVIDINDO O CANAL ENTRE 20 OU 30 USUÁRIOS .

UM CANAL DE 64KB , USADO DE FORMA EXCLUSIVA , CONSEGUE TRANSMITIR :

64000 / 8 = 8000 = 8KB / SEGUNDO .

IMAGINEMOS QUE 10% DOS DADOS SEJAM USADOS EM CABEÇALHOS DE PACOTES , CORREÇÃO DE ERROS E OUTROS BYTES DE CONTROLE .

ISSO NOS DEIXA COM 7.2KB / SEGUNDO PARA DADOS E SE TENTARMOS BAIXAR UMA FOTO DE 100K , LEVAREMOS QUASE 14 SEGUNDOS .

A VERSÃO BETA VI DO NETSCAPE 32 BITS OCUPA MAIS OU MENOS 3MB . O QUE DARIA UM TEMPO DE DOWNLOAD DE 6,94 MINUTOS !

UM DRIVE DE CD-ROM , DE VELOCIDADE SIMPLES , TRABALHA NA TAXA DE 150K/S , MAIS RÁPIDO QUE UMA LINHA T1 , DE 1MB!

TODOS ESSES CÁLCULOS , DIGNOS DO SR. SPOCK , SERVEM A UM PROPÓSITO :

SEJA ECONÔMICO EM SUAS PÁGINAS . NADA DE GRÁFICOS ENORMES , GRANDES TELAS DE 200KB!!

ESSAS PÁGINAS FICAM LINDAS QUANDO TESTAMOS EM CASA , MAS TENTE CARREGAR UMA DELAS ATRAVÉS DE UMA CONEXÃO TELEFÔNICA !

UMA DAS PÁGINAS MAIS LINDAS DE TODA A INTERNET , E DAS MAIS IRRITANTES , É A DA SILICON GRAPHICS , EM :

HTTP://WWW.SGI.COM





FIGURA 3.8 PÁGINA DA SILICON GRAPHICS . LINDA , MAS EXTREMAMENTE LENTA , SE VOCÊ ESTÁ ACESSANDO DO BRASIL .

É UM ASSOMBRO EM GRÁFICOS , DESIGN , UTILIDADE ... MAS VISUALIZÁ-LA É UMA TAREFA DOLOROSA , MESMO COM UM MODEM DE 28KB , ACESSANDO UM PROVEDOR NA ALTA MADRUGADA , SEM NENHUM OUTRO USUÁRIO PARA DIVIDIR UM CANAL DE 128KB!

UMA BOA PÁGINA INICIAL NÃO DEVE LEVAR MAIS DE 40 SEGUNDOS PARA SER CARREGADA . SE NÃO HOUVER OUTRO JEITO E A PÁGINA FOR FICAR PESADA , AVISE O USUÁRIO . DEIXE-O PREPARADO PARA UM LIGEIRO MARTÍRIO . E É BOM QUE A ESPERA COMPENSE !

EXISTEM GRANDES SITES COM UM TAMANHO MÍNINO . UMA PÁGINA EMPRESARIAL DECENTE , DIRETA E OBJETIVA , NÃO PRECISA OCUPAR MAIS QUE 400KB , JÁ FIZ UM SITE PESSOAL COM UM BELO GRÁFICO DE ABERTURA E MAIS CINCO PÁGINA LINKADAS , TUDO EM 75KB !

POUCAS COISAS GANHAM MAIS A SIMPATIA DE UMA USUÁRIO DO QUE UMA PÁGINA QUE É CARREGADA RÁPIDO .





FIGURA 3.9 O SITE INTEIRO , EM HTTP:WWW.HIGHWAY.COM.BR/USERS/CARDOSO/ CARDOSO.HTM OCUPA 75KB . ESSA PÁGINA DE ABERTURA NÃO PASSA DE 25KB!!!

ESTRATÉGIAS INFALÍVEIS PARA ACABAR COM SEU SERVIDOR .

ALGUMAS PRÁTICAS SÃO ÓTIMAS PARA FAZER COM QUE O ADMINISTRADOR TIRE SUA PÁGINA DO AR , CORTE SEU E-MAIL OU MESMO EXPULSE VOCÊ DO SISTEMA . ENTRE ELAS :

* IMAGENS DE MULHERES - NADA CONTRA , MAS NÃO SOU SÓ EU QUE USO A INTERNET . SÃO 50 MILHÕES DE USUÁRIOS , 45 MILHÕES ÁVIDOS POR UM SITE NOVO , COM UMA FOTO INÉDITA DA CINDY , OU OUTRA BELDADE DE IGUAL QUILATE . UM ENDEREÇO NOVO SE ESPALHA LITERALMENTE NA VELOCIDADE DA LUZ , ATRAVÉS DE E-MAIL , NEWSGROUPS, PÁGINAS DE LINKS . EM ALGUNS DIAS , QUE SE TORNARÃO VISITAS / HORA E QUANDO O POBRE CANAL DE 64KB DO PROVEDOR ESTIVER LOTADO DE PEDIDOS DE CONEXÃO , E NEM O E-MAIL CONSEGUIR SER ENVIADO , ALGUÉM IRÁ FAZER UMA AUDITORIA ( É FACÍLIMO ) E DESCOBRIR QUAL PÁGINA GERA TANTO INTERESSE ... E O RESTO É HISTÓRIA .

* SOFTWARE DISPONÍVEL PARA DOWNLOAD - DE CONSEQUÊNCIAS SEMELHANTES AO TÓPICO ANTERIOR , PROPÓSITO MAIS NOBRE , MAS ESTETICAMENTE MENOS INTERESSANTE . DISPONIBILIZE UM PROGRAMA DIFÍCIL DE SER ENCONTRADO , OU ALGO DE SUA AUTORIA , QUE SEJA MUITO INTERESSANTE , E EM BREVE O SITE INTEIRO ESTARÁ FORA DO AR . DOIS USUÁRIOS ACESSANDO A 28800 OCUPAM MAIS DE 90% DA CAPACIDADE DE UM CANAL DE 64KB .





CAPÍTULO 4

FORMULÁRIOS





FIGURA 4.1 PÁGINA DE PESQUISA DO SITE DA CASA BRANCA , EM HTTP://WWW.WHITEHOUSE.GOV . USANDO FORMULÁRIO , PODE-SE PROCURAR POR DOCUMENTOS , FOTOS OU OUTRAS PÁGINAS , COM RAPIDEZ E EFICIÊNCIA .

FORMULÁRIOS EM AÇÃO

OS FORMULÁRIOS FORAM UMA ÓTIMA ADIÇÃO AO CONJUNTO DO HTML . COM ELES VOCÊ PODE ENVIAR DADOS COM MUITA FACILIDADE , TORNANDO AS PÁGINAS HTML UM VEÍCULO DE MÃO DUPLA . ENCONTRAM-SE FORMULÁRIOS EM PÁGINAS QUE VENDEM CDS , PESQUISAS EM BANCO DE DADOS , ELEIÇÕES VIRTUAIS E MESMO EM LIVROS DE VISITANTES .

FUNCIONAMENTO

OS FORMULÁRIOS SÃO APENAS A PRIMEIRA PARTE DO PROCESSO . ELES TABULAM E ENVIAM OS DADOS PARA UM COMPUTADOR , ONDE UM PROGRAMA , GERALMENTE EM PERL , OS PROCESSARÁ E TOMARÁ AS PROVIDÊNCIAS CABÍVEIS , GERANDO UMA SAÍDA QUE TANTO PODE SER UMA PÁGINA HTML , AGRADECENDO AO USUÁRIO , COMO UM E-MAIL PARA O CRIADOR DA PÁGINA , AVISANDO DA RECEPÇÃO DOS DADOS . O USO DE PERL NÃO É OBRIGATÓRIO E AO FINAL DESTE CAPÍTULO VOCÊ APRENDERÁ A GERENCIAR DADOS DE FORMULÁRIOS SEM USAR NENHUMA LINGUAGEM DE PROGRAMAÇÃO !





FIGURA 4.2 FORMULÁRIO DE ENTRADA DE DADOS DO LIVRO DE VISITANTES DO UNIKEY BBS .

FIGURA 4.3 PARTE DO LIVRO DE VISITANTES , APÓS OS DADOS TEREM SIDO ENVIADOS AO SITE , PROCESSADOS POR UM PROGRAMA EM PERL E GRAVADOS EM FORMATO HTML .





SINTAXE COMPLETA

A ESPECIFICAÇÃO HTML 3.0 DEFINE A TAG < FORM > PARA FORMULÁRIOS . ASSIM , O QUE ESTIVER DENTRO DAS TAGS < FORM > E < / FORM > É TRATADO COMO PARTE DO FORMULÁRIO .

QUASE TODO ELEMENTO DE HTML PODE SER INSERIDO DENTRO DE UM FORMULÁRIO , MAS AO CONTRÁRIO DE TABELAS , VOCÊ NÃO PODE ANINHAR FORMULÁRIOS DENTRO DE FORMULÁRIOS .

FIGURA 4.4 ELEMENTOS BÁSICOS DE CONSTRUÇÃO DE FORMULÁRIOS .

OS FORMULÁRIOS EM HTML , PODEM SER CONSTRUÍDOS COM DIVERSOS ELEMENTOS , CASA UM COM VÁRIOS MODIFICDORES .

OS ELEMENTOS PADRÃO SÃO :

* CAIXA DE TEXTO ;

* ÁREA DE TEXTO ;

* BOTÃO DE ENVIO ;





* BOTÃO RESET ;

* BOTÃO DE RÁDIO ;

* CHECK BOX ;

* CAIXA DE PASSWORD ;

* CAIXA OCULTA ;

* LISTA .

COM EXCEÇÃO DOS ELEMENTOS "ÁREA DE TEXTO" E "LISTA" , OS OUTROS SÃO DEFINIDOS PELA TAG < INPUT > E SEUS DIVERSOS MODIFICADORES .

MODIFICADORES COMUNS AOS DIVERSOS ELEMENTOS

NAME="NOME"

DEFINE UM NOME PARA UM ELEMENTO DE FORMULÁRIO . EQUIVALE A UM NOME DE CAMPO , EM UM BANCO DE DADOS . ASSIM , PODEM EXISTIR ELEMENTOS IDÊNTICOS EM UM FORMULÁRIO , COMO DUAS CAIXAS DE TEXTO , E CADA UMA SER TRATADA COMO UM ELEMENTO ISOLADO . ESSE MODIFICADOR NÃO PODE SER OMITIDO .

TYPE="TIPO"

DEFINE , EM UMA TAG < INPUT > , O TIPO DE ELEMENTO A SE EXIBIDO . ATÉ MARÇO DE 1996 , OS VALORES VÁLIDOS ERAM :

TEXT - CAIXA DE TEXTO

SUBMIT - BOTÃO DE ENVIO

RESET - BOTÃO RESET

RADIO - BOTÃO DE RÁDIO

CHECKBOX - CHECK BOX





PASSWORD - SENHA

HIDDEN - CAIXA OCULTA

IMAGE - IMAGEM

VALUE="VALOR"

VALOR DEFAULT DO ELEMENTO . COLOCANDO-SE O MODIFICADOR VALUE="VAZIO" EM UMA CAIXA DE TEXTO , EVITA-SE QUE O USUÁRIO ENVIE CAMPOS COM VALORES NULOS .

NO CASO DOS BOTÕES RESET E ENVIO , O CAMPO VALUE DETERMINA O TEXTO QUE SERÁ ESCRITO NO BOTÃO .

MAXLENGHT="VALOR"

TAMANHO MÁXIMO DE UM CAMPO . EVITA QUE USUÁRIOS ENGRAÇADINHOS ENVIEM METADE DO TEXTO . O CAPITAL EM UM CAMPO QUE PEDIA UM E-MAIL . NÃO PENSE QUE NÃO É POSSÍVEL . COM UM CUT / PASTE DE UMA MASSA GRANDE DE TEXTO VOCÊ JÁ DERRUBA UM PROGRAMA EM PERL MAL FEITO .

SIZE="VALOR"

DEFINE O TAMANHO QUE UM CAMPO OCUPARÁ NA TELA . UMA CAIXA DE TEXTO ONDE SE SOLICITA QUE SEJA DIGITADA UMA IDADE NÃO PRECISA TER MAIS DO QUE 3 CARACTERES . JÁ UM E-MAIL FICA BEM COM UM ESPAÇO DE PELO MENOS 40 CARACTERES .

O VALOR DE SIZE NÃO TEM RELAÇÃO COM O MAXLENGTH . O TEXTO DIGITADO PODE SER BEM MAIOR QUE O SIZE .

DESCRIÇÃO DETALHADA DOS ELEMENTOS

CAIXA DE TEXTO

EXEMPLO DE TEXTO

FIGURA 4.5





< INPUT NAME="NOME" TYPE"TEXT" VALUE="VAZIO" SIZE="20" MAXLENGHT="25" >

A LINHA ACIMA DEFINE UMA CAIXA DE ENTRADA DE TEXTO , COM O NOME "NOME" , COM O VALOR DEFAULT DE "VAZIO" , COM ATÉ 20 CARACTERES VISÍVEIS E UM MÁXIMO DE 25 CARACTERES DE COMPRIMENTO .

ÁREA DE TEXTO

NESTA ÁREA VOCÊ PODE ENTRAR COM TEXTOS DE QUALQUER TAMANHO . ÀS BARRAS DE ROLAGEM SÃO ATIVADAS AUTOMATICAMENTE PELO BROWSER DO USUÁRIO .

FIGURA 4.6

< TEXTAREA NAME="NOME2" VALUE="VAZIO" ROWS=5 COLS=30 SIZE="256" ALIGN=MIDDLE > < / TEXTAREA >

ESSA ÁREA GERA UMA CAIXA DE ENTRADA DE DADOS COM 5 LINHAS DE ALTURA , 30 CARACTERES DE LARGURA E ATÉ 256 CARACTERES NO TAMANHO TOTAL .

BOTÃO DE ENVIO

SUBMIT QUERY

FIGURA 4.7

< INPUT NAME="ENVIAR" TYPE="SUBMIT" VALUE="ENVIAR DADOS" >

ESSENCIAL PARA O FORMULÁRIO , ESSE BOTÃO ATIVA A REMESSA DOS DADOS , DE ACORDO COM OS MÉTODOS QUE VEREMOS A SEGUIR . A LINHA ACIMA CRIA UM BOTÃO DE ENVIO DE NOME "ENVIAR" , COM O TEXTO "ENVIAR DADOS" ESCRITO NELE .SE O ELEMENTO VALUE FOR OMITIDO , O BOTÃO FICARÁ COM SEU TEXTO DEFAULT , "SUBMIT"

BOTÃO RESET

RESET

FIGURA 4.8





< INPUT NAME="RESET" TYPE="RESET" VALUE="APAGAR DADOS" >

APAGA OS DADOS DIGITADOS . MUITO ÚTIL QUANDO SE DESEJA REINICIAR O PREENCHIMENTO DE UM FORMULÁRIO . A SINTAXE ACIMA GERA UM BOTÃO DE NOME "RESET" COM O TEXTO "APAGAR DADOS" . OMITINDO-SE O VALUE , O DEFAULT É , NÃO MUITO SURPREENDENTEMENTE , "RESET" .

BOTÃO DE RÁDIO

( ) OPÇÃO 1 ( ) OPÇÃO 2 ( ) OPÇÃO 3

FIGURA 4.9

< INPUT NAME="BOTAO1" TYPE="RADIO" VALUE="VALOR1" > VALOR 1 < BR >

< INPUT NAME="BOTAO1" TYPE="RADIO" VALUE="VALOR1" > VALOR 2 < BR >

< INPUT NAME="BOTAO1" TYPE="RADIO" VALUE="VALOR1" > VALOR 3 < BR >

ESTE TIPO DE ELEMENTO DETERMINA QUE UM ÚNICO BOTÃO ESTEJA SELECIONADO E É USADO PARA COLETAR DADOS MUTUAMENTE EXCLUSIVOS , COMO SEXO (MASCULINO OU FEMININO) , OU QUESTÕES COM RESPOSTAS COMO SIM, NÃO, TALVEZ .

AS LINHAS ACIMA DEFINEM TRÊS BOTÕES DE RÁDIO . SOMENTE UM PODERÁ SER SELECIONADO DE CADA VEZ E RETORNARÁ O VALOR ESCOLHIDO DENTRO DA VARIÁVEL "BOTAO1" .

CHECK BOX

[ ] OPÇÃO 1 [ ] OPÇÃO 2 [ ] OPÇÃO 3

FIGURA 4.10

< INPUT NAME="CAIXA1" TYPE="CHECKBOX" VALUE="SIM" >

AO CONTRÁRIO DOS BOTÕES DE RÁDIO , AS CHECK BOXES PERMITEM SELEÇÕES MÚLTIPLAS . UM EXEMPLO SERIA UMA PESQUISA DE MERCADO , COM A CLÁSSICA QUESTÃO : "MARQUE OS ELETRODOMÉSTICOS QUE VOCÊ TEM EM CASA" E AO LADO DE CADA UM , UMA CHECK BOX .

CAIXA DE PASSWORD

***********

FIGURA 4.11





< INPUT NAME="SENHA" TYPE="PASSWORD" VALUE="ANONIMO" >

ESSENCIALMENTE IDÊNTICA A UMA CAIXA DE TEXTO , COM A DIFERENÇA DE QUE EM UMA CAIXA DE PASSWORD , O TEXTO DIGITADO APARECE NA FORMA DE ASTERISCOS .

CAIXA OCULTA

( VOCÊ NÃO QUER VER UMA CAIXA OCULTA , QUER ? )

< INPUT NAME="SEGREDO" TYPE="HIDDEN" VALUE="FORMULARIO3" >

CRIA UMA CAIXA COM UM VALOR QUALQUER ( NO CASO "FORMULARIO3" ) E ENVIA JUNTO COM OS OUTROS DADOS DO FORMULÁRIO , MAS ELA NÃO APARECE EM LUGAR ALGUM NA PÁGINA .

ÚTIL QUANDO VOCÊ TEM UM SCRIPT EM PERL QUE PROCESSA DADOS DE VÁRIOS FORMULÁRIOS .

COM OS DADOS ENVIADOS PELA CAIXA OCULTA , É POSSÍVEL DEFINIR O RUMO DO PROCESSAMENTO DOS OUTROS DADOS .

IMAGEM

FIGURA 4.12

< INPUT NAME="ENVIAR" TYPE='IMAGE" VALUE="PADRAO" SRC="IMAGEM.GIF" BORDER=0 >

USANDO ESTE ELEMENTO , VOCÊ ESTÁ LIVRE DA OBRIGAÇÃO DE COLETAR O BOTÃO DE ENVIO .

ELE PERMITE ASSOCIAR QUALQUER ARQUIVO GRÁFICO AO BOTÃO DE ENVIO . SÓ NÃO ESQUEÇA DO ELEMENTO BORDER=0 , PORQUE BONS ÍCONES NÃO DEVEM PRECISAR DE UMA BORDA ESCANDALOSA PARA IDENTIFICÁ-LOS .

LISTA

OPÇÃO 1

OPÇÃO 2

FIGURA 4.13





< SELECT NAME="MENINAS" VALUE="ZEZE" SIZE=1 >

< OPTION > LUCIANA < / OPTION >

< OPTION > RITA < / OPTION >

< OPTION > VANUSA < / OPTION >

< OPTION > LETICIA < / OPTION >

< OPTION > CLAUDIA < / OPTION >

< / SELECT >

LUCIANA

RITA

VANUSA

LETICIA

CLAUDIA

FIGURA 4.14 ELEMENTO LISTA RESULTANTE DA LISTAGEM ACIMA . REPARE QUE O VALOR DEFAULT , "ZEZÉ" , NÃO APARECE NA LISTA E SERÁ ENVIADO SOMENTE SE O USUÁRIO PASSAR AO LARGO DA LISTA , SEM SELECIONAR NADA .

TALVEZ A LISTA SEJA O ELEMENTO MAIS PODEROSO . ELE GERA UM MENU SUSPENSO , IDÊNTICO A QUALQUER MENU DO WINDOWS , COM UM MÍNIMO DE TRABALHO . SE O MODIFICADOR SIZE FOR MAIOR QUE 1 , EM VEZ DE UM MENU SUSPENSO , O BROWSER EXIBIRÁ UMA CAIXA COM SETAS , PARA ROLAGEM , COM X LINHAS EXIBIDAS SIMULTANEAMENTE .

PREFIRA SEMPRE TRABALHAR COM A LISTA NO FORMATO DE CAIXA DE ROLAGEM : ASSIM VOCÊ TEM MAIS CONTROLE SOBRE O LAYOUT DA SUA PÁGINA .

ENTRADA E SAÍDA DE DADOS

SE VOCÊ COLOCAR UM FORMULÁRIO EM SUA PÁGINA , PROVAVELMENTE VAI QUERER ACESSAR OS DADOS ENVIADOS . ESSE ENVIO DEVE SER DEFINIDO NA PRIMEIRA LINHA DO FORMULÁRIO , AINDA DENTRO DA TAG DE ABERTURA < FORM > .

< FORM METHOD=POST ACTION="MAILTO:CARDOSO@HIGHWAY.COM.BR" ENCTYPE="APPLICATION/X-WWW-FORM-URLENCODED" >

A LINHA ACIMA DEFINE O POST COMO MÉTODO DE ENVIO , COMO AÇÃO O ATO DE ENVIAR OS DADOS VIA E-MAIL PARA MEU ENDEREÇO ELETRÔNICO E DEFINE O FORMATO DOS DADOS , CASO ALGUM COMPUTADOR NO CAMINHO NÃO SAIBA O QUE FAZER COM ELES .





EXISTEM DOIS MÉTODOS DE ENVIO DE DADOS VIA HTML : GET E POST . SUGIRO VEEMENTEMENTE QUE VOCÊ UTILIZE SEMPRE O POST . O GET . O GET ESTÁ ULTRAPASSADO , POSSUI DIVERSAS LIMITAÇÕES E É MUITO PROPENSO A CAUSAR PROBLEMAS NO SERVIDOR . O PROBLEMA RESIDE NA PASSAGEM DAS INFORMAÇÕES PARA O PROGRAMA EM PERL . COM O GET , HA UMA LIMITAÇÃO NO TAMANHO DO BLOCO DE DADOS , QUE SE FOR MUITO GRANDE , PODE INCLUSIVE CAUSAR PROBLEMAS AO SERVIDOR .

FORMULÁRIO SEM PERL USANDO O MAILTO :

SE VOCÊ QUISER USAR FORMULÁRIO PARA CRIAR UM LIVRO DE VISITAS , UMA FERRAMENTA DE PESQUISA , OU DESEJAR TRABALHAR PROFISSIONALMENTE COM ELES , É ESSENCIAL QUE VOCÊ APRENDA PERL . É A MELHOR LINGUAGEM PARRA ACESSAR A CGI- COMMON GATEWAY INTERFACE DE SEU SERVIDOR WWW . SE VOCÊ É BOM EM C++ , AWK OU OUTRAS COISASMAIS EXÓTICAS , VÁ EM FRENTE .

APESAR DE ESSENCIAL PARA GRANDES PROJETOS , O PERL NÃO É INDISPENSÁVEL EM SITES MENORES . A ESPECIFICAÇÃO DO HTML 3.0 DISPÕE DE UMA OPÇÃO MUITO INTERESSANTE : VOCÊ PODE DIRIGIR A SAÍDA DE SEU FORMULÁRIO PARA QUALQUER RECURSO INTERNET , SEJA TELNET , UMA HOME PAGE OU , O QUE NOS INTERESSA , UM ENDEREÇO DE E-MAIL .

ESSA OPÇÃO TEM PRÓS E CONTRAS , MAS PARA PEQUENOS SITES É A MELHOR ALTERNATIVA .

< FORM METHOD=POST ACTION="MAILTO:CARDOSO@HIGHWAY.COM.BR" ENCTYPE="APPLICATION/X-WWW-FORM-URLENCODED" >

NÃO REQUER PRÁTICA NEM TAMPOUCO HABILIDADE . BASTA VOCÊ TROCAR O MEU ENDEREÇO ACIMA , PARA QUALQUER OUTRO E-MAIL .

QUANDO O USUÁRIO CLICAR NO BOTÃO DE ENVIO , O BROWSER CHAMARÁ UMA ROTINA DE E-MAIL , ENVIARÁ UMA MENSAGEM AUTOMÁTICA E UM ARQUIVO EM ANEXO COM OS DADOS . O ARQUIVO CHAMA-SE , NOS FORMULÁRIOS ENVIADOS PELA NETSCAPE , FILE.EXT .

USUÁRIOS DO INTERNET EXPLORER , TREMEI . TIO BILL RESOLVEU COMPLICAR A VIDA DOS USUÁRIOS E CRIOU O MICROSOFT EXCHANGE , UM CONCENTRADOR DE INFORMAÇÃO QUE TEORICAMENTE INTEGRARIA TODOS O SERVIÇOS DE E-MAIL INTERNO , INTERNET , FAX , CORREIO DE VOZ ...

O PROGRAMA É DIFÍCIL DE CONFIGURAR , PESADO E VOCÊ PASSA POR UMAS TRÊS OU QUATRO JANELAS PARA ENVIAR QUALQUER COISA COM ELE .

LAMENTO PELOS USUÁRIOS DO EXPLORER , MAS É UMA QUESTÃO DE MATEMÁTICA . O MÉTODO MAILTO: É PRÁTICO PARA 75% DOS USUÁRIOS DA INTERNET . O EXPLORER ATENDE A MENOS DE 1% .





ENSINE O USUÁRIO A CONFIGURAR O MAIL

UM DOS CONTRAS DO MÉTODO MAILTO: É QUE MUITOS PROVEDORES NÃO ENSINAM AOS USUÁRIOS COM CONFIGURAR O NETSCAPE E OUTROS PROGRAMAS . MESMO ACESSANDO INTERNET VIA BBS , VOCÊ PODE E DEVE ) ENVIAR E RECEBER E-MAIL DIRETAMENTE DA REDE . PARA ISSO , SEU NETSCAPE PRECISA ESTAR COM OS SERVIDORES CORRETAMENTE CONFIGURADOS .

CONSULTE SEU PROVEDOR E PEÇA OS NOMES DOS SERVIDORES POP3 E SMTP . O PRIMEIRO RECEBE MENSAGENS E O SEGUNDO OS ENVIA .

DEPOIS DE CONFIGURADO SEU NETSCAPE , CONECTE-SE À INTERNET E SELECIONE A OPÇÃO WINDOW/NETSCAPE MAIL . QUANDO VOCÊ MANDAR O PROGRAMA VERIFICAR A PRESENÇA DE NOVAS MENSAGENS NO SERVIDOR , ELE PEDIRÁ SUA PASSWORD , QUE É A MESMA QUE VOCÊ USA NORMALMENTE . SE TUDO ESTIVER CORRETO , ELE NÃO IRÁ PEDI-LA DE NOVO .

AGORA , VOCÊ PODE ENVIAR E RECEBER E-MAIL DE DENTRO DO NETSCAPE E PREENCHER OS FORMULÁRIOS QUE FAZIAM USO DO MAILTO: E QUE NÃO FUNCIONAVAM .

FIGURA 4.15 CONFIGURAÇÃO , NO NETSCAPE , DOS SERVIDORES DE E-MAIL SMTP E POP3 .

ESPALHE ESSA INFORMAÇÃO . COLOQUE UMA PÁGINA EM SEU SITE , EXPLICANDO COMO CONFIGURAR O NETSCAPE PARA ENVIO DE E-MAIL . VOCÊ SE TORNA SIMPÁTICO , POR ESTAR DANDO DICAS E AO MESMO TEMPO GARANTE QUE SEUS FORMULÁRIOS IRÃO FUNCIONAR EM MAIS MÁQUINAS .





EXISTEM DIVERSOS PACOTES INTEGRADOS NO MERCADO E TODOS ELES , PARA RECEBER E ENVIAR E-MAIL , PRECISAM DE QUATRO INFORMAÇÕES : SEU NOME , SUA SENHA , SEU SERVIDOR POP3 E O SERVIDOR SMTP . AS DUAS PRIMEIRAS VOCÊ PROVAVELMENTE JÁ TEM . MANDE UM E-MAIL PARA SEU PROVEDOR , SOLICITE OS DOIS ÚLTIMOS E GANHE TEMPO , RESPONDENDO MENSAGENS ENQUANTO AQUELA FOTO ENORME DA PÁGINA DA PLAYBOY ESTÁ SENDO BAIXADA .

AGRADECENDO AO USUÁRIO

QUANDO SE TRABALHA EM PERL , É SIMPLES ESCREVER UMA ROTINA QUE ACUSE O RECONHECIMENTO DOS DADOS , AGRADEÇA AO USUÁRIO E INCLUSIVE ENVIE UM E-MAIL PARA ELE . SEM PERL , É ATÉ POSSÍVEL . VOCÊ PRECISARIA ENVIAR OS DADOS PARA UM ARQUIVO - TEXTO , QUE NO COMEÇO TIVESSE UM TEXTO EM HTML , COM A PÁGINA DE AGRADECIMENTOS . O RESTO , APÓS A TAG , É IGNORADO PELO BROWSER . OS DADOS DO FORMULÁRIO SERIAM ANEXADOS AO FINAL DO ARQUIVO . ESSE MÉTODO SÓ É VIÁVEL SE VOCÊ TEM ACESSO , VIA FTP OU DIRETO , AO SEU DIRETÓRIO NO SERVIDOR , O QUE 99,99% DOS USUÁRIOS NÃO TEM .

PORTANTO , AGRADEÇA ANTES DO BOTÃO DE ENVIO DOS DADOS E EXPLIQUE , CLARAMENTE , QUE O USUÁRIO NÃO DEVE ESPERAR NENHUM FEEDBACK E SE APARENTEMENTE NADA ACONTECEU , ENTÃO ESTÁ TUDO BEM .

DECIFRANDO O ARQUIVO FILE.EXT

VAMOS USAR A SEGUNTE PÁGINA

FIGURA 4.16 PÁGINA COM FORMULÁRIO DE ENTRADA DE DADOS , CONFORME LISTAGEM A SEGUIR .





< HTML >

< HEAD >

< TITLE > EXEMPLO DE FORMULÁRIO < / TITLE >

< / HEAD >

< BODY >

< CENTER > ENTRE COM SEUS DADOS < / CENTER >

< HR WIDTH=80% ALIGN=CENTER NOSHADE >

< CENTER >

< FORM METHOD=POST ACTION="MAILTO:CARDOSO@HIGHWAY.COM.BR" ECTYPE="APPLICATION/X-WWW-FORM-URLENCODED" >

< H4 > DIGITE SEU NOME: < / H4 >

< INPUT NAME="NOME" TYPE"TEXT" VALUE="ANONIMO" ROWS=1 SIZE="40" ALIGN=LEFT >

< BR >

< H4 > ESTADO CIVIL: < / H4 >

< INPUT NAME"ESTCIVIL" TYPE="RADIO" VALUE"CASA" > CASADO

< INPUT NAME"ESTCIVIL" TYPE="RADIO" VALUE"CASA" > SOLTEIRO

< INPUT NAME"ESTCIVIL" TYPE="RADIO" VALUE"CASA" > ENROLADO

< BR >

< H4 > EM SUA CASA EXISTE: < / H4 >

< INPUT NAME="VIDEO" TYPE="CHECKBOX" VALUE="VIDEO" > VÍDEO K7

< INPUT NAME="PC" TYPE="CHECKBOX" VALUE="PC" > COMPUTADOR

< INPUT NAME="FONE" TYPE="CHECKBOX" VALUE="TELEFONE" > LINHA TELEFÔNICA

< H4 > SUA ÚTIMA NAMORADA FOI: < SELECT NAME="NAMOR" VALUE="ZEZÉ MACEDO" SIZE=1 > < / H4 >

< OPTION > LUCIANA < / OPTION >

< OPTION > RITA < / OPTION >

< OPTION > VANUSA < / OPTION >

< OPTION > LETÍCIA < / OPTION >

< OPTION > CLAUDIA < / OPTION >

< / SELECT >

< BR > < BR > < BR >

< H3 > CLIQUE AQUI PARA ENVIAR OS DADOS < INPUT TYPE="SUBMIT" > OU APAGAR TUDO < INPUT TYPE="RESERT" > < / H3 >

< / CENTER >

< / BODY >

< / HTML >

NÃO SE ESQUEÇA DE MUDAR O ENDEREÇO NA LINHA < FORM > , PARA INDICAR O SEU E-MAIL !

CADA FORMULÁRIO PREENCHIDO E ENVIADO APARECERÁ EM SUA CAIXA POSTAL COMO UMA MENSAGEM PADRÃO , COM UM ARQUIVO ANEXADO .





SE VOCÊ COSTUMA BAIXAR SUAS MENSAGENS USANDO UM LEITOR OFF-LINE COMO O UNIQWK , O OLX OU O BLUEWAVE , AO FINAL DE UM DOWNLOAD O DIRETÓRIO INBOX , OU EQUIVALENTE , CONTERÁ DIVERSOS ARQUIVOS , CADA UM COM OS DADOS DE UM FORMULÁRIO .

O FORMULÁRIO USADO NO EXEMPLO GEROU UM ARQUIVO COM O SEGUINTE CONTEÚDO :

NOME=CARLOS+CARDOSO&ESTCIVIL=ENRO&VIDEO =&PC=PC&FONE =TELEFONE&NAMOR=LUCIANA

REPARE QUE O SEU BROWSER CONVERTEU SEU TEXTO PARA A ESPECIFICAÇÃO DO HTML ESPAÇOS VIRARAM "+" E OS ACENTOS , SE EXISTISSEM NO EXEMPLO , VIRARIAM TAGS DE ACENTUAÇÃO .

O MÉTODO PRÁTICO DE GERENCIAR UMA QUANTIDADE PEQUENA DE DADOS E CONVERTER ESSE FORMATO ESQUISITO PARA PORTUGUÊS CONSISTE EM USAR O WORD FOR WINDOWS 6.0 . SELECIONE A OPÇÃO INSERIR / ARQUIVO E CRIE UM DOCUMENTO COM OS DADOS ENVIADOS PARA VOCÊ . DEPOIS , CRIE UMA MACRO QUE FAÇA A TRANSFORMAÇÃO DE "+" EM ESPAÇOS , E QUE RETIRE O SINAL DE INÍCIO DE CAMPO DE DADOS , & , EM UM INÍCIO DE PARÁGRAFO .

VOCÊ PODE SOFISTICAR ESSE MACRO O QUANTO QUISER , CONVERTENDO TODOS OS ACENTOS E CARACTERES ESPECIAIS .

A MACRO BÁSICA PARA CONVERSÃO DE DADOS DE FORMULÁRIOS HTML É A SEGUINTE :

SUB MAIN

EDITARSUBSTITUIR .ENCONTRAR = "+, .SUBSTITUIR =" " , .DIREÇÃO = 0, . COINCIDIRMAIÚSCULASMINÚSCULAS =0, .PALAVRAINTEIRA = 0, .COINCIDIRPADRÃO = 0, . RESERVADO23 = 0, . SUBSTITUIRTUDO, . FORMATO=0, .MUDARLINHA = 1

EDIARSUBSTITUIR . ENCONTAR = "&", .SUBSTITUIR ="^p", . DIREÇÃO = 0, .COINCIDIRMAIÚSCULASMINÚSCULAS = 0, .PALAVRAINTEIRA = 0, .FORMATO = 0, .MUDARLINHA = 1

ENDSUB

APÓS A EXECUÇÃO DA MACRO , OS DADOS , ANTES CONFUSOS , PASSAM A SER APRESENTADOS DE UMA FORMA MAIS COMPREENSÍVEL .





FIGURA 4.17 TELA DO MICROSOFT WORD , DEMONSTRANDO A MACRO UTILIZADA PARA CONVERSÃO DOS DADOS DO ARQUIVO FILE.EXT E OS DADOS TABULADOS , APÓS A EXECUÇÃO DA MESMA . A MACRO APRESENTADA É APENAS DEMONSTRATIVA , POIS NÃO LEVA EM CONTA ACENTOS E OUTROS CARACTERES ESPECIAIS DE HTML .

DESSE PONTO EM DIANTE , PASSAR ESSES DADOS PARA UM ACESS , UM EXCEL OU MESMO UM DBASE , É UMA TAREFA TRIVIAL . E TUDO ISSO FOI POSSÍVEL SEM ESCREVER UMA ÚNICA LINHA DE PROGRAMAÇÃO .





CAPÍTULO 5

TABELAS





FIGURA 5.1 PÁGINA DE VENDA DE MERCHANDISING DO PERSONAGEM DILBERT , DE SCOTT ADAMS . UM USO MUITO INTERESSANTE DE TABELAS , TANTO COMO MOLDURA DE IMAGENS , À ESQUERDA , COMO EM ASSOCIAÇÃO COM FORMULÁRIOS , À DIREITA .

QUANDO OS MICROCOMPUTADORES SURGIRAM , ESPERARAM RELATIVAMENTE MUITO TEMPO POR UMA APLICAÇÃO QUE JUSTIFICASSE SUA EXPERIÊNCIA . ESSA APLICAÇÃO FOI O VISICALC , BISAVÔ DO LOTUS , DO EXCEL , DO MULTIPLAN . ESSES PROGRAMAS APRESENTAVAM AS INFORMAÇÕES EM FORMA DE PLANILHAS OU TABELAS . HOJE SÃO INDISPENSÁVEIS PARA ORGANIZAR E APRESENTAR OS DADOS DE FORMA PRÁTICA E EFICIENTE .

APESAR DE NÃO EFETUAREM CÁLCULOS OU PERMITIREM FÓRMULAS ( AINDA ) , AS TABELAS EM HTML SÃO EXCELENTES PARA ORGANIZAR DE FORMA COMPACTA INFORMAÇÕES QUE DE OUTRA FORMA OCUPARIAM VÁRIAS PÁGINAS . EMBORA OFICIALMENTE AINDA SEJAM UMA PROPOSTA PARA O HTML 3.0 , AS TABELAS JÁ SÃO UMA REALIDADE DESDE O NETSCAPE 1.1 E HOJE EM DIA OS PRINCIPAIS BROWSERS DO MERCADO AS SUPORTAM .

A LISTAGEM ABAIXO DEFINE UMA TABELA BÁSICA , CENTRALIZADA , COM BORDAS DE 2 UNIDADES DE ESPESSURA , COM 2 LINHAS E DUAS COLUNAS.

< HTML >

< HEAD >

< TITLE > DEMO DE TABELAS < / TITLE >

< / HEAD >

< BODY >

< CENTER >

< TABLE BORDER=2 >

< TR > < TD > JOHN < / TD > < TD > PAUL < / TD > < / TR >





< TR > < TD > GEORGE < / TD > < TD > RINGO < / TD > < / TR >

< / TABLE >

< / CENTER >

< / BODY >

< / HTML >

------------------
| OS BEATLES |
|----------------|
| JOHN | PAUL |
| GEORGE | RINGO |
------------------

FIFURA 5.2 TABELA RESULTANTE DA LISTAGEM ANTERIOR .

A LARGURA PADRÃO DAS CÉLULAS É DADA PELO MAIOR ELEMENTO . NO EXEMPLO , A LARGURA DA PRIMEIRA COLUNA É DETERMINADA PELA CÉLULA "GEORGE" . A ALTURA FUNCIONA DA MESMA FORMA .

SINTAXE COMPLETA

AS TABELAS SÃO DEFINIDAS , EM HTML , PELA TAG
E DIVERSOS ELEMENTOS MODIFICADORES .

< TABLE > < / TABLE >

É A TAG PRINCIPAL . O BROWSER SÓ ENTENDE COMO TABELA O QUE ESTIVER ENTRE ESSAS TAGS .

APRESENTA DIVERSAS OPÇÕES , QUE VEREMOS ADIANTE .

< TR > < / TR >

DEFINE AS LINHAS DE UMA TABELA . TODOS OS ELEMENTOS DENTRO DE UMA TAG PERTENCEM A UMA MESMA LINHA .





< TD > < / TD >

VEM DE TABLE DATA . NESSA TAG ENTRAM OS DADOS DA TABELA . O ALINHAMENTO PADRÃO DESSA TAG É PELA ESQUERDA, MAS ISSO PODE SER ALTERADO COM A TAG ALIGN . UMA TAG < TD > PODE CONTAR UMA ENORME VARIEDADE DE ELEMENTOS DE HTML , COMO LINKS , IMAGENS E TEXTOS FORMATADOS .

< TH > < / TH >

TABLE HEADER - O CABEÇALHO DAS COLUNAS OU LINHAS . NA VERDADE , A ÚNICA DIFERENÇA ENTRE UMA TAG < TH > E UMA TAG < TD > É QUE AS TAGS DE CABEÇALHO EXIBEM OS DADOS EM NEGRITO E CENTRALIZADOS , POR DEFAULT .

< CAPTION > < / CAPTION >

EXIBE UM TEXTO CENTRALIZADO EM RELAÇÃO À TABELA , SOB A FORMA DE UMA LEGENDA . USADA PARA EXIBIR TEXTO , É UMA TAG TOTALMENTE DISPENSÁVEL . USE SEMPRE UM BITMAP COMO TÍTULO DA SUA TABELA . É MAIS RESOLVIDO , DO PONTO DE VISTA ESTÉTICO .

ELEMENTOS MODIFICADORES DAS TAGS DE TABELA

BORDER

POR DEFAULT , AS TABELAS NÃO APRESENTAM BORDAS . ESTETICAMENTE PODE SER ATÉ MAIS INTERESSANTE, MAS UMA TABELA SEM BORDAS , PARA NÃO SER CONFUSA , DEMANDA UM DESIGN MUITO ARROJADO . USE NO MÍNIMO O PADRÃO .

O MODIFICADOR BORDER ENTRA NA TAG < TABLE > , NO FORMATO < TABLE BORDER=X > .

PARA USAR A ESPESSURA PADRÃO , QUE É DE UMA UNIDADE , BASTA COLOCAR O ATRIBUTO BORDER , SEM VALOR , FICANDO A SINTAXE : < TABLE BORDER >





FIGURA 5.3 EXEMPLO DE VÁRIOS VALORES DO MODIFICADOR BORDER . UM VALOR ALTO , COMO 15 , É ATÉ UTILIZÁVEL PARA IMAGENS , MAS PARA TABELAS DE TEXTO , NEM PENSAR .

ALIGN

DEFINE O ALINHAMENTO DOS ITENS DA TABELA . NO ELEMENTO DE LEGENDA , DEFINE SE A MESMA APARECE ABAIXO OU ACIMA DA TABELA , SENDO ACEITOS OS VALORES < CAPTION ALIGN=TOP > OU < CAPTION ALIGN=BOTTOM >

SENDO COLOCADO EM UMA TAG DE LINHA , CABEÇALHO OU DADOS , CONTROLA O ALINHAMENTO HORIZONTAL DOS SADOS DENTRO DAS CÉLULAS . NESSE CASO , PERMITE OS VALORES : LEFT , CENTER E RIGHT . UMA CÉLULA DE CABEÇALHO COM OS DADOS ALINHADOS PELA ESQUERDA SERIA :

< TH ALIGN=LEFT > NOME DA COLUNA < / TH >

VALIGN

DEFINE O ALINHAMENTO VERTICAL DOS DADOS DENTRO DAS CÉLULAS . DE FORMATO IDÊNTICO AO ALIGN , MAS COMPORTA OS VALORES : TOP , MIDDLE , BOTTOM E BASELINE .

QUALQUER MODIFICADOR DENTRO DE UMA TAG DE LINHA DE DADOS - < TR > < / TR > AFETA TODAS AS CÉLULAS DAQUELA LINHA .





NOWRAP

POR DEFAULT , OS TEXTOS SÃO DIVIDIDOS EM VÁRIAS LINHAS , DE ACORDO COM O TAMANHO DAS CÉLULAS DA TABELA . O ATRIBUTO NOWRAP DESABILITA ESSAS FUNÇÕES E QUALQUER TEXTO SERÁ EXIBIDO COMO UMA LINHA CONTÍNUA . ESSE ATRIBUTO É VÁLIDO PARA AS TAGS DE CABEÇALHO - < TH > E DADOS - < TD > .

NUNCA USE O COMANDO NOWRAP , A MENOS QUE VOCÊ SAIBA EXATAMENTE O QUE ESTÁ FAZENDO . COISAS IMPREVISÍVEIS PODEM ACONTECER E SUA TABELA PODE FICAR MAIOR QUE A TELA DE QUEM VAI ACESSÁ-LA . ALGUNS BROWSERS IRÃO RECLAMAR E OUTROS IRÃO TRAVAR .

COLSPAN

UMA TABELA NADA MAIS É QUE UMA GRADE DE N ELEMENTOS HORIZONTAIS E N ELEMENTOS VERTICAIS . CADA INTERSEÇÃO DESSES DOIS ELEMENTOS É CHAMADA DE CÉLULA . ASSIM O TERCEIRO ELEMENTO VERTICAL , JUNTO COM O QUARTO ELEMENTO HORIZONTAL , DEFINEM UMA CÉLULA NA POSIÇÃO 4.3 . ORIGINALMENTE UMA CÉLULA OCUPA UM ELEMENTO DE LARGURA OU ALTURA , MAS UMA CÉLULA INDIVIDUAL PODE SER REDIMENSINADA PARA OCUPAR ESPAÇOS MAIORES .

FIGURA 5.4 A TABELA ACIMA OCUPA UMA GRADE DE 3 CÉLULAS DE LARGURA E 6 DE ALTURA .

REPARE COMO OS DADOS DA SEGUNDA CÉLULA DO CABEÇALHO OCUPAM AS DUAS ÚLTIMAS CÉLULAS COMO OS DADOS DO RODAPÉ , SÓ QUE ESTE OCUPA AS DUAS PRIMEIRAS .





ROWSPAN

IDÊNTICO AO COLSPAN . MAS DEFINE QUANTAS CÉLULAS DE ALTURA TERÁ DETERMINADA CÉLULA .

VEJA NO EXEMPLO FINAL DESTE CAPÍTULO , UM TRUQUE INTERESSANTE COM O ROWSPAN .

CELLSPACING

DETERMINA O ESPAÇO ENTRE AS CÉLULAS . O DEFAULT É 2 . ESSE ATRIBUTO É EXCLUSIVO DA TAG < TABLE > E PODE SER OMITIDO . UMA TABELA COM ESPAÇAMENTO DE CINCO UNIDADES COMEÇARIA COM A TAG :

< TABLE BORDER CELLSPACING=5 >

CELLPADDING

ESTE ATRIBUTO DEFINE O ESPAÇO ENTRE OS DADOS DE UMA CÉLULA E A BORDA DA MESMA . ELE GERA CÉLULAS MAIS " GORDAS " E ESTETICAMENTE NÃO É MUITO ÚTIL . O DEFAULT É 1 . A SINTAXE É IDÊNTICA À DA TAG CELLSPACING .

FIGURA 5.5 EXEMPLO DOS MODIFICADORES CELLSPACING E CELLPADDING .





WIDTH

O ATRIBUTO MAIS INTERESSANTE , POIS PERMITE DEFINIR A LARGURA DE UMA TABELA OU COLUNA .

UTILIZADO NA TAG < TABLE > , DEFINE O TAMANHO DA TABELA INTEIRA . ASSIM , PARA TERMOS UMA TABELA OCUPANDO 60% DA TELA , USAMOS A SEGUINTE SINTAXE :

< TABLE BORDER WIDTH=60% >

DENTRO DE UMA TAG DE DADOS OU CABEÇALHO , O ATRIBUTO WIDTH DEFINE A LARGURA DA COLUNA , EM RELAÇÃO À TABELA . PARA QUE UMA CÉLULA OCUPE 30% DA LARGURA DE UMA TABELA , BASTA USAR A SEGUINTE FORMA :

< TH WIDTH=30% > COLUNA 1 < / TH >

O ATRIBUTO WIDTH TAMBÉM PODE SER USADO DENTRO DE UMA CÉLULA DE DADOS , DEFINIDA PELA TAG < TD > .

O VALOR DAS COLUNAS SEM ATRIBUTO WIDTH É SEMPRE PRESUMIDO PELO BROWSER , ATRAVÉS DE ALGORITMOS HEURÍSTICOS ( NÃO ME PERGUNTE COMO ) . UMA TABELA DE TRÊS COLUNAS , COM A PRIMEIRA DEFINIDA COMO 50% DA LARGURA TOTAL E AS OUTRAS DUAS EM BRANCO , SERÁ TRATADA PELO BROWSER COMO 50% , 25% E 25% . ESPERTO , ESSE NETSCAPE !

LEMBRE-SE DE QUE A SOMA DAS LARGURAS DAS COLUNAS DEVE SER SEMPRE 100% . VALORES ACIMA DISSO VÃO FAZER SEU BROWSER AGIR DE FORMA IMPREVISÍVEL .

HEIGHT

DENTRO DE UMA TAG < TABLE > , ELE DEFINE A ALTURA TOTAL DA TABELA NO MESMO MOLDE DO ATRIBUTO WIDTH .

ATRIBUTOS COMO WIDTH E HEIGHT APRESENTAM DUAS POSSIBILIDADES DE ENTRADA DE DADOS : EM PIXELS OU PROPORCIONAL . SE VOCÊ DEFINIR UM VALOR COMO WIDTH=60 , A CÉLULA OU TABELA EM QUESTÃO TERÁ 60 PIXELS DE LARGURA . COLOCANDO UM SINAL DE PORCENTAGEM JUNTO AO NÚMERO , TRANSFORMANDO O COMANDO EM WIDTH=60% , VOCÊ DEFINE A CÉLULA / TABELA COM 60% DA LARGURA PESSÍVEL NO BROWSER DO USUÁRIO .

PELAMORDEDEUS NUNCA DEFINA A LARGURA DE UMA TABELA OU CÉLULA EM PIXELS ! VOCÊ NÃO TEM COMO SABER EM QUE RESOLUÇÃO O USUÁRIO VAI ACESSAR SUA PÁGINA E SUA TABELA PODE SE TORNAR ILEGÍVEL PARA MUITOS USUÁRIOS . SÓ DEFINA UMA LARGURA DE CÉLULAS ASSIM EM UM ÚNICO CASO : QUANDO O GRÁFICO QUE FOR OCUPÁ-LO FOR PEQUENO O SUFICIENTE PARA CABER EM UMA TELA DE 640X480 , SEM CAUSAR NENHUM DESASTRE . MAS , MESMO ASSIM , CUIDADO !





TABELAS DENTRO DE TABELAS

NADA IMPEDE QUE VOCÊ TRABALHE COM UMA TABELA DENTRO DA OUTRA TABELA . COMO JÁ FOI DITO , QUASE TODOS OS ELEMENTOS DE HTML SÃO VÁLIDOS COMO CONTEÚDO DE UMA CÉLULA .

PARA INSERIR UMA TABELA EM OUTRA , BASTA QUE TODO O CÓDIGO RELATIVO À TABELA A SER INSERIDA SEJA COLOCADO ENTRE AS TAGS DE CÉLULAS DA TABELA PRINCIPAL . OU SEJA :

- AQUI VIRIA O COMEÇO DA TABELA PRINCIPAL -

< TD >

< TABLE > .....< / TABLE > - ENTRE AS TAGS < TD > , ENTRA A TABELA A SER INSERIDA .

< / TD >

- AQUI VIRIAM AS OUTRAS CÉLULAS DA TABELA PRINCIPAL -

FIGURA 5.6 A TABELA " COMPLEMENTOS " FOI INSERIDA DENTRO DE UMA CÉLULA DA TABELA " PIZZAS " . REPARE NO USO DO ATRIBUTO COLSPAN NO TEXTO " COMPLEMENTOS " , PARA GERAR O ALINHAMENTO SIMÉTRICO .

FONTE DA TABELA ANTERIOR :

< HTML >

< HEAD >

< TITLE > TABELAS DENTRO DE TABELAS < / TITLE >

< / HEAD >

< BODY >

< BR > < BR >

< CENTER >

< TABLE BORDER=3 >





< TR > < TD > NUMERO < / TH > < TH > PIZZA < / TH > < TH > DESCRIÇÃO < / TH > < / TR >

< TR > < TD > 1 < / TD > < TD > CALABRIA < / TD > < TD > CALABRESA, AZEITONAS E CEBOLA < / TD > < / TR >

< TR > < TD > 2 < / TD > < TD > CALIFÓRNIA < / TD > < TD > BACON COM CATUPIRY < / TD > < / TR >

< TR > < TD > 3 < / TD > < TD > CAMARÃO < / TD > CAMARÃO COM CATUPIRY < / TD > < / TR >

< TR > < TD > 4 < / TD > < TD > SARAVEJO < / TD > < TD > SORVETE COM CATCHUP < / TD > < / TR >

< TR > < TD > 5 < / TD > < TD > BEIRUTE < / TD > < TD > GILÓ COM ALHO < / TD > < / TR >

< TR > < TD > 6 < / TD > < TD > LATVÉRIA < / TD > < TD > INCENSO E MIRRA < / TD > < / TR >

< TR > < TH COLSPAN=3 ALIGN=CENTER > < STRONG > COMPLEMENTOS < / TH > < TD >

< TABLE BORDER=2 COLSPNA=3 >

< TR > < TH > MOLHO < / TH > < TH > INGREDIENTE PRINCIPAL < / TH > < / TR >

< TR > < TD > AO SUGO < / TD > < TD > TOMATE FRESCO < / TD > < / TR >

< TR > < TD > PETRÓPOLIS < / TD > < TD > FRUTINHAS < / TD > < / TR >

< TR > < TD > VASCO < / TD > < TD > MOLHO < / TD > < / TR >

< TR > < TD > DIVINO < / TD > < TD > BACON < / TD > < / TR >

< / TABLE >

< / TD > < / TR >

< / TABLE >

< / CENTER >

< / BODY >

< / HTML >

EXEMPLO DE UMA TABELA COMPLEXA

FIGURA 5.7 TABELA RAZOAVELMENTE COMPLEXA , COM VÁRIOS MODIFICADORES APRESENTADOS .





A SEGUIR , O FONTE DA TABELA ACIMA :

< HTML >

< HEAD > < TITLE > EXEMPLO DE TABELA < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< BR > < BR > < BR > < BR >

< CENTER >

< TABLE BORDER=3 WIDTH=80% >

< CAPTION > < IMG SRC="LOGOTABL.GIF" > < / CAPTION >

< TH COLSPAN=5 > ARQUIVO DE CLIENTES < / TH >

< TR ALIGN=CENTER > < TD ROWSPAN=3 WIDTH=60 > < IMG SRC="LOURA1.GIF" > < / TD > < TH > NOME : < / TH > < TD > MICHELLE < / TD >

< TH > SOBRENOME < / TH > < TD > JOHNSON < / TD > < / TR >

< TR ALIGN=CENTER > < TH > IDADE : < / TH > < TD > 17 ANOS < / TD > < TH > EST.CIVIL : < / TH > < TD > SOLTEIRA !!! < / TD > < / TR >

< TR ALIGN=CENTER > < TH > RESIDÊNCIA < / TH > < TD > CHICAGO < / TD >

< TH > TELEFONE : < / TH > < TD NOWRAP > VER ARQUIVO < / TD > < / TR >

< TR > < TD COLSPAN=5 > < / TD > < / TR >

< TR > < TD COLSPAN=4 > HISTÓRICO DA PACIENTE < / TH > < TH > TRATAMENTO < / TH > < / TR >

< TR > < TD COLSPAN=4 > A PACIENTE APRESENTAVA UM QUADRO DE PRÉ-DEPRESSÃO CAUSADA PELA SÍNDROME DE GLAUBER , PROVOCADA PELA EXCESSIVA EXPOSIÇÃO A POETAS ALTERNATIVOS , ARTISTAS PLÁSTICOS , CINEASTAS BRASILEIROS DOS ANOS 60 E PRODUTORES DE MULTIMÍDIA .

< BR >

DURANTE AS PRIMEIRAS CONSULTAS , TODAS AS FRASES DA PACIENTE COMEÇAVAM COM " A NÍVEL DE " E " ENQUANTO COLOCAÇÃO EM NÍVEL DE DEBATE " . O PROGNÓSTICO ERA O PIOR POSSÍVEL .

< / TD >

< TD > UMA OVERDOSE DE SPIELBERG , LUCAS , TARANTINO , CASSETA & PLANETA E MAMONAS ASSINAS FOI EFICAZ , E HOJE A PACIENTE NÃO MAIS DEMONSTRA DESEJO DE ASSISTIR À RETROSPECTIVA DO CINEMA FINLANDÊS , NO ESTAÇÃO BOTAFOGO , SEM LEGENDAS .

< / TD > < / TR >

< / TABLE >

< / CENTER >

< / BODY >

< / HTML >





CLARO , COMETI UMA PEQUENA TRAPACA , MAS SE QUISER REPRODUZIR ESSA TABELA EM CASA , BASTA CRIAR DUAS IMAGENS . UMA CHAMADA LOURA.GIF , COM 80X94 PIXELS , E OUTRA CHAMADA LOGOTAB1.GIF COM 319X39 PIXELS . SE A LISTAGEM ACIMA FOR CORRETAMENTE DIGITADA , MESMO SEM IMAGENS A TABELA SERÁ RAZOAVELMENTE BEM EXIBIDA .

HÁ DIVERSOS PEQUENOS TRUQUES NESSA TABELA .

LOGO NA LINHA ONDE SE LÊ "LOURA.GIF" , EXISTE UM ROWSPAN=3 . ASSIM , A FOTO OCUPA 3 LINHAS DE ALTURA , APESAR DE SER UMA CÉLULA ÚNICA . OS TÍTULOS " ARQUIVO DE CLIENTES " , " HISTORICO DE PACIENTE " E " TRATAMENTO " SÃO FACILMENTE POSICIONADOS , ATRAVÉS DO COLSPAN .

PARA EVITAR QUE , QUANDO A COLUNA " TRATAMENTO " ESTIVER VAZIA O CAMPO " VER ARQUIVO " SEJA PARTIDO , FICANDO CADA PALAVRA EM UMA LINHA , FOI USADO O ATRIBUTO NOWRAP . NOTE QUE A TABELA É PEQUENA , ASSIM COMO O TEXTO A QUE O COMANDO SE REFERE . NESTE CASO O USO É VÁLIDO .

A TAG < CAPTION > FOI USADA , MAS EM VEZ DE TEXTO , FOI INSERIDA UMA IMAGEM .

POR ÚLTIMO , ENTRE OS DADOS DA PACIENTE E O HISTÓRICO / TRATAMENTO , HÁ UMA LINHA MAIS GROSSA . NA VERDADE , AQUILO É UMA CÉLULA , COM UM ESPAÇO EM BRANCO , ESTENDIDA PELAS CINCO COLUNAS DA TABELA . REPARE A LINHA < TR > < TD COLSPAN=5 > < / TD > < / TR > .

O BROWSER , AO COMPOR UMA TABELA , DESPREZA CÉLULAS VAZIAS , PREENCHENDO TUDO COM ESPAÇOS EM BRANCO . É UM RECURSO GRÁFICO INTERESSANTE , MAS PODE TAMBÉM INDICAR UMA TABELA MAL PROJETADA . SE QUISER QUE UMA CÉLULA SEJA EXIBIDA VAZIA , DEIXE UM ESPAÇO EM BRANCO ENTRE AS TAGS < TD > OU < TH > . VEJA O CANTO SUPERIOR DIREITO DA FIGURA 5-7 COMO EXEMPLO DE ESPAÇO EM BRANCO INSERIDO PELO BROWSER . NO CASO , FICOU ESTETICAMENTE INTERESSANTE . NEM SEMPRE É O CASO .





E SE O BROWSER DO USUÁRIO NÃO SUPORTAR TABELAS ?

FIGURA 5.8 TABELA CRIADA COM A TAG PRÓPRIA . LOGO ABAIXO HÁ UMA TABELA CRIADA EM MODO TEXTO .

BEM , O PRIMEIRO IMPULSO É SUGERIR QUE O USUÁRIO QUE O USUÁRIO ATUALIZE O SOFTWARE , TROCANDO-O POR ALGUMA COISA DECENTE . PORÉM , EM ALGUNS CASOS É VITAL QUE O MAIOR NÚMERO POSSÍVEL DE USUÁRIOS ACESSE AS INFORMAÇÕES , E PARA QUE MESMO OS SEM - TABELA POSSAM FAZÊ-LO , HÁ UMA OPÇÃO :

CRIE UM LINK PARA UMA PÁGINA COM SUA TABELA EM MODO TEXTO . É TRISTE , EU SEI . FICA FEIO , MAS NÃO TEM JEITO .

DIGITE SUA TABELA SEM TAGS DE CABEÇALHO , CÉLULAS OU O QUE QUER QUE SEJA . DEPOIS , ENVOLVA ESSE TEXTO COM A TAG DE TEXTO PRÉ-FORMATADO , < PRE >< / PRE > , QUE EXIBE O TEXTO COMO FOI DIGITADO , COM TODOS OS < ENTERS > E < TABS > .

A LISTAGEM DA FIGURA 5.8 É A SEGUINTE :

< HTML >

< HEAD >

< TITLE > TABELA EM FORMATO TEXTO < / TITLE >

< / HEAD >

< BODY >






< CENTER >

< TABLE BORDER=3 >

< TR > < TH > NÚMERO < / TH > < TH > PIZZA < / TH >

< TH > DESCRIÇÃO < / TH > < / TR >

< TR > < TD > 1 < / TD > < / TD > CALABRIA < / TD > < TD > CALABRESA , AZEITONAS E CEBOLA < / TD > < / TR >

< TR > < TD > 2 < / TD > < TD > CALIFÓRNIA < / TD > < TD > BACON COM CATUPIRY < / TD > < / TR >

< TR > < TD > 3 < / TD > < TD > CAMARÃO < / TD > < TD > CAMARÃO COM CATUPIRY < / TD > < / TR >

< TR > < TD > 4 < / TD > < TD > SARAVEJO < / TD > < TD > SORVETE COM CATCHUP < / TD > < / TR >

< TR > < TD > 5 < / TD > < TD > BEIRUTE < / TD > < TD > GILÓ COM ALHO < / TD > < / TR >

< TR > < TD > 6 < / TD > < TD > LATVÉRIA < / TD > < TD > INCENSO E MIRRA < / TD > < / TR >

< / TABLE >

< / CENTER >

< PRE >

< STRONG > NÚMERO PIZZA DESCRIÇÃO < / STRONG >

---------------------------------------

1 CALABRIA CALABRESA , AZEITONA E CEBOLA

2 CALIFÓRNIA BACON E CEBOLA

3 CAMARÃO CAMARÃO COM CATUPIRY

4 SARAVEJO SORVETE COM CATCHUP

5 BEIRUTE GILÓ COM ALHO

6 LATVÉRIA INCENSO E MIRRA

---------------------------------------

< / PRE >

< / BODY >

< / HTML >





CAPÍTULO 6

TORNANDO SUA PÁGINA EFICIENTE E SIMPÁTICA





NÃO USE O ÍCONE " EM CONSTRUÇÃO "

TUDO NA INTERNET ESTÁ EM PERMANENTE MODIFICAÇÃO . DIZER QUE SEU SITE ESTÁ " EM CONSTRUÇÃO " É DIZER O ÓVIO . E AFINAL DE CONTAS , SE ELE NÃO ESTIVER PRONTO , NÃO DEVERIA TER SIDO DISPONIBILIZADO .

FIGURA 6.1 ALGUNS DOS ÍCONES " EM CONSTRUÇÃO " USADOS MUNDO AFORA . DÁ MAIS TRABALHO CRIAR UM ÍCONE DESSES DO QUE TERMINAR LOGO A PÁGINA .

ESPECIFIQUE AS EXIGÊNCIAS DE SUA PÁGINA

SE SUA PÁGINA USA RECURSOS EXCLUSIVOS DO NETSCAPE , DEIXE ISSO CLARO COM UM ÍCONE OU TEXTO . O MESMO VALE PARA O INTERNET EXPLORER . NÃO OBRIGUE O USUÁRIO A ADIVINHAR QUAL BROWSER TERÁ QUE USAR PARA NAVEGAR CORRETAMENTA EM SEU SITE . ELE PODE SAIR COM A IMPRESSÃO ERRADA DE SUAS PÁGINAS .

FIGURA 6.2 ICONE APROVADO PELA MICROSOFT PARA IDENTIFICAR PAGINAS OTIMIZADAS PARA O INTENET EXPLORER .

FIGURA 6.3 ICONE IDENTICANDO UM SITE QUE UTILIZA RECURSOS DO NETSCAPE 2.0 .

EVITE DISPONIBILIAR SITES INCOMPLETOS

NADA IRRITA MAIS USUÁRIO DO QUE CLICAR EM UMA OPÇÃO E RECEBER UM AVISO DE QUE " AINDA NÃO ESTÁ DISPONÍVEL " , SE O SITE NÃO ESTÁ PRONTO , NÃO O DIVULGUE . MELHOR PERDER UMA OU DUAS NOITES DE SONO , DO QUE RECEBER UM MONTE DE E-MAILS DE USUÁRIOS FRUSTADOS PORQUE METADE DAS OPÇÕES NÃO LEVAM A LUGAR NENHUM .





COLOQUE SEMPRE SEU E-MAIL

DIVULGUE SEU SITE E DIVULGUE-SE . COLOQUE O MÁXIMO DE LINKS PARA E-MAIL QUE O BOM SENSO PERMITIR . REPITA O SEU ENFEREÇO NO LINK . LEMBRE-SE DE QUE NEM TODOS OS BROWSERS ESTÃO CONFIGURADOS CORRETAMENTE E O USUÁRIO PODE QUERER ENVIAR UMA MENSAGEM MAIS TARDE , ATRAVÉS DE OUTRO PROGRAMA . UM SIMPLES LINK " ESCREVA PARA MIM " PODE NÃO SER SUFICIENTE , ENTÃO COLOQUE O E-MAIL POR EXTENSO .

UM LINK BÁSICO QUE PERMITA AO USUÁRIO ENVIAR UM E-MAIL PARA VOCÊ PODE SER CONSEGUIDO COM A SEGUINTE LINHA :

ESCREVA PARA MIM !

< A HREF="MAILTO:CARDOSO"HIGHWAY.COM.BR" > CARDOSO e HIGHWAY.COM.BR < / A >

NUNCA CONFIE EM UM IMAGEMAP

NUNCA , JAMAIS , EM MOMENTO ALGUM FAÇA UMA PÁGINA COM UM IMAGEMAP , SE NÃO É DA MESMA VOCÊ NÃO COLOCOU LINKS PADRÃO , EM TEXTO , PARA AS OPÇÕES DO IMAGEMAP . NUNCA SE SABE COM QUE TIPO DE BROWSER SUA PÁGINA SERÁ ACESSADA E SERIA UMA PENA QUE UM USUÁRIO COM O NETSCAPE 1.0 NÃO PUDESSE PERCORRER SEU SITE , POR NÃO PODER ACESSAR IMAGEMAPS OU OUTRAS OPÇÕES SOFISTICADAS .

FIGURA 6.4 EXEMPLO DE UMA PÁGINA COM UM GRANDE IMAGEMAP E LINKS DE TEXTO NA PARTE INFERIOR .





FIGURA 6.6 A MESMA PÁGINA , DESSA VEZ COM UM FUNDO BRANCO , GERANDO O MÁXIMO DE CONTRASTE POSSÍVEL . O TEXTO SE DESTACA MAIS E A IMAGEM FICA MAIS NÍTIDA .

TEXTURAS APARENTEMENTE MUITO BONITAS FICAM MUITO FEIAS QUANDO NÃO HÁ UMA JUNÇÃO PERFEITA ENTRE AS " TELHAS " . OS BROWSERS REPETEM A IMAGEM DE FUNDO LADO - A - LADO E SE AS BORDAS NÃO FOREM COMPLEMENTARES , PERDE-SE A ILUSÃO DE UM FUNDO UNIFICADO .

FIGURA 6.7 NESTA PÁGINA A IMAGEM DE FUNDO TEM 1610 BYTES , AS JUNÇÕES NÃO SÃO PERFEITAS , REVELANDO O EFEITO DE " COLAGEM " E O NÍVEL DE CONTRASTE ENTRE FUNDO / TEXTO ESTÁ ÓTIMO .





CLAREIE A TEXTURA O MÁXIMO QUE PUDER , ATÉ CONSEGUIR UMA BOA RELAÇÃO DE CONTRASTE ENTRE O FUNDO E O TEXTO .

QUANTO MENOR , MELHOR . UM FUNDO DE 40KB VAI LEVAR MAIS TEMPO SENDO CARREGADO DO QUE SENDO APRECIADO .

QUE TAL NÃO USAR FUNDOS ? ALGUMAS DAS MELHORES PÁGINAS DA INTERNET NÃO USAM IMAGENS DE BACKGROUND , MAS CORES SIMPLES , COMO PRETO , BRANCO OU AZUL CLARO .

EXPERIMENTE COLOCAR UM FUNDO COLORIDO SIMPLES EM SUA PRÓXIMA PÁGINA . ELA ENTRARÁ MAIS RÁPIDO , POIS NENHUMA IMAGEM SERÁ CARREGADA E COM CERTEZA FICARÁ MAIS ELEGANTE DO QUE COM UMA IMAGEM QUALQUER EM BACKGROUND .

A SINTAXE É A SEGUINTE :

< BODY BGCOLOR="#FFFFFF" >

USE THUMBNAILS PARA IMAGENS GRANDES

SABE AQUELAS PÁGINAS DE MULHERES NUAS , COM DEZENAS DE FOTOS , GIGANTESCAS , ONDE É PRECISO ESPERAR ATÉ QUE TODAS SEJAM CARREGADAS , PARA SÓ ENTÃO PODER SELECIONAR A QUE VOCÊ QUER ?

CHATO , EU CONCORDO . E QUE TAL AS PÁGINAS COM PEQUENAS VERSÕES DAS IMAGENS , QUE ESTRAM RÁPIDO E COM UM CLIQUE ATIVAM A IMAGEM ORIGINAL , EM TODA A SUA GLÓRIA ?

O ÚNICO TRABALHO QUE VOCÊ TERÁ SERÁ CRIAR , EM UM PROGRAMA GRÁFICO , CÓPIAS DE IMAGEM ORIGINAL , COM 90 PIXELS DE ALTURA , EM MÉDIA . EM FORMATO GIF , NÃO FICA MAIOR QUE 5K , SALVE COM UM NOME SUGESTIVO , NO MESMO DIRETÓRIO ONDE FICARÁ A IMAGEM ORGINAL .

DEPOIS , BASTA COLOCAR UMA LINHA COMO :

< A HREF="IMAGEM.JPG" > < IMG SRC="MINI-IMG.GIF" BORDER=0 > < / A >

NELA TRANSFORMA-SE A IMAGEM "MINI-IMG.GIF" EM UM LINK QUE , QUANDO PRESSIONADO , LEVA PARA A IMAGEM MAIOR , IMAGEM.JPG . NÃO SÃO NECESSÁRIOS ENDEREÇOS ABSOLUTOS , ENQUANTO TODAS AS PÁGINAS E IMAGENS ESTIVEREM NO MESMO DIRETÓRIO , EM SUA MÁQUINA OU EM SEU PROVEDOR . É DE BOM - TOM COLOCAR , JUNTO AO THUMBNAIL , UMA INDICAÇÃO DO TAMANHO DA IMAGEM QUE SERÁ EXIBIDA . ASSIM , UM USUÁRIO DE UMA LINHA LENTA NÃO SE AVENTURARÁ A BAIXAR UMA FOTO COM 400KB .





FIGURA 6.8 EXEMPLO DE UM THUMBNAIL , QUE LEVA A UMA IMAGEM BEM MAIOR . ABAIXO DA FOTO , INFORMAÇÕES COMO FORMATO DO ARQUIVO . NA PRÁTICA OS THUMBNAILS PODEM SER AINDA MENORES E DE PREFERÊNCIA SÃO DISPOSTOS VÁRIOS EM UMA ÚNICA PÁGINA .

NUNCA USE VALORES INICIAIS BAIXOS EM UM CONTADOR

DO PONTO DE VISTA PSICOLÓGICO , NÃO É BOM UM USUÁRIO CHEGAR A UMA PÁGINA E ENCONTRAR UM CONTADOR COM 10 , 15 VISITAS . ATÉ MESMO 500 É UM NÚMERO BAIXO , PARA O TAMANHO QUE TODO MUNDO FALA QUE A INTERNET TEM .

OS CONTADORES TEM POUCA UTILIDADE , COMO MEDIDORES DA POPULARIDADE DE UMA PÁGINA . ALGUNS PROGRAMAS DE CONTADORES AUMENTAM O MESMO A CADA IMAGEM CARREGADA E OUTROS SÃO RESETADOS ARBITRARIAMENTE PELO ADMINISTRADOR DO SITE . O QUE DIZ SE UMA PÁGINA É BOA OU NÃO É A QUANTIDADE DE E-MAILS QUE VOCÊ RECEBE E A QUANTIDADE DE PRODUTOS QUE O SITE VENDE .

UM CONTADOR NADA MAIS É QUE UM PROGRAMA EXECUTADO NO SERVIDOR , QUE BUSCA UMA VARIÁVEL EM UM ARQUIVO - TEXTO , INCREMENTA EM UMA UNIDADE A MESMA E GERA UM ARQUIVO .GIF COM UMA REPRESENTAÇÃO DO VALOR DA VARIÁVEL .

A SINTAXE NORMAL DE UM CONTADOR É :

< IMG SRC="../CGI-BIN/COUNTER.EXE?WIDTH=6&LINK=LETRA-C&STYLE=ODB" >





ONDE O TERMO " &LINK=LETRA-C " É A TAL VARIÁVEL . SE VOCÊ COLOCAR MAIS DE UM CONTADOR EM QUALQUER PÁGINA , COM A MESMA VARIÁVEL , OS RESULTADOS NÃO SERÃO VERDADEIROS , POIS CADA PÁGINA IRÁ ADCIONAR UMA UNIDADE AO CONTADOR E LOGO O VALOR ESTARÁ BEM GRANDE . MAIS OU MENOS O QUE QUEREMOS , MAS HÁ ALTERNATIVAS MELHORES .

EXISTEM TRÊS MÉTODOS DE INFLACIONAR ( NO BOM SENTIDO ) UM CONTADOR , EM SUA PÁGINA .

O MÉTODO MAIS SIMPLES , PARA NÃO DIZER " RASTEIRO " , CONSISTE EM CHAMAR SUA PÁGINA , CLICAR VÁRIAS VEZES NO BOTÃO " RELOAD " . COM PACIÊNCIA , VOCÊ CONSEGUE ALGUMAS CENTENAS DE VISITAS A MAIS , ANTES DE SEU DEDO INDICADOR CAIR .

UM MEIO UM POUQUINHO MAIS PRÁTICO CONSISTE EM CRIAR UMA PÁGINA APENAS COM O CONTADOR . ASSIM , HÁ MUITO POUCO A SER CARREGADO E O ESPAÇO ENTRE OS RELOADS É BEM MENOR . SE VOCÊ TENTOU O MÉTODO ANTERIOR , USE O DEDO INDICADOR DA OUTRA MÃO .

O MELHOR MÉTODO CONSISTE EM , COM UMA LIGEIRA CUMPLICIDADE DE SEU ADMINISTRADOR DE SISTEMA , ENCONTRAR O ARQUIVO COUNTER.LOG . NELE , ESTÃO ARQUIVADOS OS SEGUINTES DADOS : NOME DAS VARIÁVEIS INDIVIDUAIS DE CADA PÁGINA MONITORADA E NÚMERO DE VISITAS ATÉ O MOMENTO . UM ARQUIVO COM APENAS A VARIÁVEL &CARDOSO TERIA A SEGUINTE FORMA :

&CARDOSO,20001

CLARO QUE O VALOR DE 20001 VISITAS FOI ALTERADO POR MIM .

ESSA DICA FUNCIONA DIRETAMENTE COM O EXCELENTE PROGRAMA DE CONTADOR CRIADO POR KEVIN ATHEY , O COUNTER V2.6 , QUE PODE SER ENCONTRADO NO ENDEREÇO : HTTP://WWW.HE.NET/~BBSBS/BEHOLD/COUNTER.HTML .

PESQUISE COM SEU ADMINISTRADOR SE O SEU PROGRAMA DE CONTAGEM DISPÕE DE UM RECURSO SEMELHANTE . COM CETEZA SIM .





NÃO CONFIE NAS NOVIDADES MUITO RECENTES

ASSIM QUE SAÍRAM AS VERSÕES BETA DO NETSCAPE 2.0 , MUITA GENTE COMEÇOU A USAR FRAMES . IMAGEMAPS RODANDO NO BROWSER DO USUÁRIO E OUTRAS NOVIDADES . PURO DESPEDÍCIO . EXIBIR DESTREZA COM ALGO QUE NINGUÉM TEM NÃO VALE A PENA . DIVULGUE AS NOVIDADES , MAS SÓ DEPENDA DELAS DEPOIS DE SE TORNAREM , SE NÃO POPULARES , PELO MENOS CONHECIDAS .

UTILIZA-AS DESDE O PRINCÍPIO , SE CRIAR ALTERNATIVAS PARA ELAS . MUITOS SITES QUE USAM FRAMES CONTAM COM VERSÕES NORMAIS PARA SEREM ACESSADOS POR USUÁRIOS DO INTERNET EXPLORER , DO HOTJAVA E DE OUTROS BROWSERS LIMITADOS .

CUIDADO COM AS TAGS QUE " NÃO PEGARAM "

O NETSCAPE CONTRIBUI COM O FAMIGERADO BLINK , QUE TRANSFORMAVA UMA AGRADÁVEL E ESTÁTICA PÁGINA EM UMA ESPÉCIE DE DECORAÇÃO DE PADARIA EM CURTO-CIRCUITO .

O INTERNET EXPLORER FEZ DAS SUAS , COM A BGSOUND , COM A QUAL VOCÊ PODE ( MAS NÃO DEVE ) DAR SOM À SUA PÁGINA , TOCANDO UM ARQUIVO WAVE OU - NÃO , ISSO NÃO - UM ARQUIVO MIDI .

VISITE MUITAS PÁGINAS E PENSE BEM ANTES DE UTILIZAR RECURSOS QUE NÃO CAÍRAM NO GOSTO POPULAR . PENSE NOS USUÁRIOS QUE ACESSAM SUA PÁGINA POR VOLTA DE 3 DA MANHÃ E IMAGINE SUA MIDI DE SATISFACTION TOCANDO , A TODO VOLUME ...

SE NINGUÉM USA , NÃO USE . A MENOS QUE VOCÊ TENHA ALGUMA IDÉIA GENIAL PARA O RECURSO . E DE QUALQUER FORMA , O RISCO É TODO SEU .

NÃO DIGA QUE NÃO AVISEI . PARA COLOCAR SOM OU MÚSICA EM UMA PÁGINA , UTILIZE A SEGUINTE SINTAXE :

< BGSOUND SRC="ARQUIVO.MID" >

SE FOR UTILIZAR UM ARQUIVO .WAV , BASTA COLOCAR O NOME CORRESPONDENTE .

ESSA TAG SÓ FUNCIONA NO MICROSOFT INTERNET EXPLORER , PORTANTO NÃO APOSTE MUITAS FICHAS NELA .





CAPÍTULO 7

HTML AVANÇADO





FIGURA 7.1 UTILIZANDO O RECURSO DE CLIENT PULL : APÓS A EXIBIÇÃO DA PÁGINA DE ABERTURA , O BROWSER AUTOMATICAMENTE CARREGA O PRÓXIMO DOCUMENTO .

DOCUMENTOS DINÂMICOS - CLIENT PULL

QUE TAL UM SITE CARREGUE UMA PÁGINA DE ABERTURA , ESPERE ALGUNS SEGUNDOS E CARREGUE A PÁGINA PRINCIPAL , SEM QUE VOCÊ PRECISE MOVER UMA PALHA OU CLICAR EM NADA ?

NÃO REQUER PRÁTICA NEN TAMPOUCO HABILIDADE , APENAS UM BOM COMANDO DE HTML 3.0 .

VEJAMOS A SEGUINTE SINTAXE :

< META HTTP-EQUIV="REFRESH" CONTENT="10; URL=PAGINA2.HTM" >

A TAG < META > DEVE SER A PRIMEIRA LINHA DA LISTAGEM , VINDO LOGO APÓS A TAG < / HEAD > .

O CAMPO CONTENT DESCREVE O TEMPO , EM SEGUNDOS , NECESSÁRIO PARA QUE A PRÓXIMA PÁGINA SEJA CARREGADA . JÁ O CAMPO URL TRAZ O NOME DA MESMA .

< META > TEM OUTRAS USOS , COMO DISPONIBILIZAR AO SERVIDOR WWW INFORMAÇÃO ATRAVÉS DO CABEÇALHO HTTP , QUE É UM BLOCO DE INFORMAÇÕES ENVIADO JUNTO COM A PÁGINA , MAS TRANSPARENTE AO USUÁRIO . MAS TODOS OS USOS DO META SÃO PERFEITAMENTE REPRODUZIDOS POR OUTROS MÉTODOS , BEM MAIS PRÁTICOS E EFICIENTES .

NÃO COLOQUE NO CAMPO URL O NOME DA PÁGINA INICIAL ; SE O FIZER , VOCÊ ENTRARÁ EM UM LOOP INFINITO , FAZENDO A PÁGINA CARREGAR A SI MESMA ATÉ O UNIVERSO CHEGAR A SEU FIM , OU O USUÁRIO CLICAR STOP . O QUE ACONTERCER PRIMEIRO .





INSERINDO UM LINK PARA UM SITE DE PESQUISA

UM DOS RECURSOS MAIS SIMPÁTICOS QUE VOCÊ PODE DISPONIBILIZAR EM SUA PÁGINA É UM LINK DIRETO COM UM SITE DE PESQUISE , COMO O YAHOO , O ALTAVISTA OU O INFOSEEK . MAS NÃO UM SIMPLES LINK E SIM UM FORMULÁRIO PARA QUE O USUÁRIO FAÇA A PESQUISA EM SUA PÁGINA , ENVIE-A PARA O SITE ORIGINAL E ENTÃO RECEBA A PÁGINA COM A RESPOSTA .

O MELHOR MÉTODO PARA FAZER ISSO É O OBSERVAR O CÓDIGO-FONTE DA PÁGINA DE PESQUISA DO SITE QUE VOCÊ DESEJA INCLUIR EM SUA PÁGINA E COPIAR A PORÇÃO CORRESPONDENTE AO FORMULÁRIO DE ENVIO . PARA COMEÇAR , AQUI VAI UMA LISTAGEM PRONTA PARA SER ADCINADA À QUALQUER PÁGINA , QUE CRIARÁ UM FORMULÁRIO ENVIANDO DADOS DE PESQUISA DIRETO PARA O SITE ALTAVISTA :

< HTML >

< HEAD >

< TITLE > UTILIZANDO FERRAMENTAS DE PESQUISA < / TITLE >

< / HEAD >

< BODY >

< CENTER > < H1 > PESQUISA NO SITE DA ALTAVISTA < / H1 > < / CENTER >

< BR >

< FORM METHOD=GET ACTION="HTTP://ALTAVISTA.DIGITAL.COM/CGI-BIN/QUERY" >

< INPUT TYPE=HIDDEN NAME=PG VALUE=Q >

< H4 > EFETUA A PESQUISA < BR >

< SELECT NAME=WHAT >

< OPTION VALUE=WEB SELECTED > NA WORLD WIDE WEB

< OPTION VALUE=NEWS > NOS NEWSGROUPS USENET

< / SELECT >

< BR > < BR >

EXIBE RESULTADOS< SELECT NAME=FMT > < BR >

< OPTION VALUE="" SELECTED > EM FORMATO PADRÃO

< OPTION VALUE=C > DE FORMA COMPACTA

< OPTION VALUE=D > DE FORMA DETALHADA

< / SELECT > < BR > < BR >

TEXTO A SER PESQUISADO: < BR >

< INPUT NAME=Q SIZE=55 MAXLENGTH=200 VALUE="" >

< BR > < BR >

< INPUT TYPE=SUBMIT VALUE=SUBMIT > - CLIQUE AQUI PARA EFETUAR A PESQUISA .

< / H4 >

< / FORM >

< / BODY >

< / HTML >





FIGURA 7.2 PÁGINA DE TESTE , RESULTANTE DA LISTAGEM ACIMA .

FORMATANDO TEXTOS COM O PIXEL.GIF

O HTML DISPÕE DE POUCAS FERRAMENTAS DE FORMATAÇÃO DE TEXTO E É IMPOSSÍVEL PRODUZIR TEXTO JUSTIFICADO , OU MESMO SEPARAR SÍLABAS AUTOMATICAMENTE . UMA OU OUTRA FORMATAÇÃO MAIS COMPLEXA É ATÉ POSSÍVEL , MAS COM COMANDOS EXCLUSIVOS DO NETSCAPE OU DO INTERNET EXPLORER .

CONSIDERE A SEGUINTE PÁGINA :

FIGURA 7.3 PÁGINA COM ALINHAMENTO NÃO - CONVENCIONAL .





O TEXTO NÃO ESTÁ CENTRALIZADO , A LINHA DE COPYRIGHT ESTÁ ALINHADA PELA DIREITA E O TÍTULO ESTÁ CENTRALIZADO EM RELAÇÃO AO TEXTO , NÃO A PÁGINA . COMO ISSO É POSSÍVEL ? MAGIA NEGRA ? QUASE .

O TRUQUE CONSISTE EM CRIAR UMA IMAGEM MÍNIMA , UM ARQUIVO GIF CHAMADO PIXEL.GIF COM - CÉUS , QUE SURPRESA - UM PIXEL DE TAMANHO . E TRANSPARENTE . USAM-SE AS CARACTERÍSTICAS DA TAG < IMAGE > , QUE PERMITE DEFINIR O TAMANHO EXATO PARA ONDE QUISERMOS E COMO É TRANSPARENTE , SÓ VERMOS O TEXTO FORMATADO .

OLHANDO POR TRÁS DAS CORTINAS E VEND AS IMAGENS OUTRORA TRANSPARENTES , NOSSA PÁGINA FICARIA ASSIM :

FIGURA 7.4 PÁGINA DEMONSTRANDO O PULO DO GATO , COM O USO DO " PIXEL MÁGICO " .

VEJA A LISTAGEM DA PÁGINA :

< HTML >

< HEAD >

< TITLE > TEXTO FORMATADO COM O PIXEL MÁGICO < / TITLE >

< / HEAD >

< BODY >

< BR > < BR > < BR >

< IMG SRC="PIXEL.GIF" WIDTH=300 HEIGHT=300 ALIGN=LEFT >

< IMG SRC="PIXEL.GIF" WIDTH=300 HEIGHT=300 ALIGN=RIGHT >

< EM > < CENTER > < H2 > VISÕES DO FUTURO < / H2 > < / CENTER > < / EM >





( ... ) ALBERTO NÃO GOSTAVA DE DAR PLANTÃO NA UNIDADE DE ATENDIMENTO REMOTO . ( ... ) CERTO DIA ELE TEVE QUE INTERROMPER UMA SUTURA EM UMA VELHINHA DE PINDAMONHANGABA PARA PARTICIPAR DOS ESFORÇOS INTERNACIONAIS EM AUCÍLIO ÀS VÍTIMAS DO TEREMOTO DE NOVA DELI ATÉ AÍ TUDO BEM , MAS TOBÔ CIRURGIÃO QUE DESIGNARAM PARA ELE ERA UMA MISTURA DE R2D2 COM JOÃO GILBERTO , SÃO OS PROTOCOLOS DE COMUNICAÇÃO EXÓTICOS QUE O EQUIPAMENTO UTILIZAVA EXIGIRAM UMA PESQUISA DE URGÊNCIA NOS ARQUIVOS DE QUATRO EMPRESAS DE INFORMÁTICA , SENDO DUAS JÁ FALIDAS E UMA ABSORVIDA PELA IBM HÁ OITO ANOS . ( ... )

< IMG SRC="PIXEL.GIF" WIDTH=190 HEIGHT=50 ALIGN=LEFT >

< H6 > © 1995M1996 BY CARLOS CARDOSO < / H6 >

< / BODY >

< / HTML >

COMO NEM TUDO NA VIDA É PERFEITO , O TRABALHO DE ACHAR O MELHOR AJUSTE É MANUAL , TENTATIVA E ERRO .

SE VOCÊ ESTIVER COM PREGUIÇA DE CRIAR UM ARQUIVO PIXEL.GIF , VISITE MEU SITE NA DIGITAL HIGHWAY - HTTP://WW.HIGHWAY.COM.BR/USERS/CARDOSO/CARDOSO.HTML E VEJA MINHA PÁGINA DE " OPNIÃO " , DEPOIS , PROCURE NO SUBDIRETORIO NETSCAPE / CACHE POR UM ARQUIVO .GIF COM 809 BYTES DE TAMANHO . RENOMEIE-O PARA PIXEL.GIF , E PRONTO ! AÍ ESTÁ SEU ARQUIVO .

DISPONIBILIZANDO UM ARQUIVO ZIP PARA DOWNLOAD

FTP,MINE,UUENCODE,ANONYMUS LOGIN ... A VIDA NÃO PRECIDA SER TÃO COMPLICADA .

SE VOCÊ DESEJA DISPONIBILIZAR EM SUA PÁGINA UM ARQUIVO COMO " COMENTÁRIOS SOBRE KIERKGAARD - 600KB - FORMATI ZIP " : SEM PROBLEMAS .

CUIDE PARA QUE O ARQUIVO LIZANDRA.ZIP ESTEJA NO MESMO DIRETÓRIO QUE SUA HOMEPAGE , E COLOQUE UM LINK PADRÃO , NO FORMATO :

< A HREF="LIZANDRA.ZIP" > LIZANDRA COMENTA KIERKEGARD - 600KB - FORMATO ZIP < / A >

O USUÁRIO CLICARÁ NO LINK , O BROWSER NÃO SABERÁ O QUE FAZER COM O ARQUIVO E PERGUNTARÁ SE DESEJA SALVÁ-LO . NADA MAIS SIMPLES .





DISPONIBILIZAR ARQUIVOS MUITO POPULARES PODE SE TORNAR UM PERIGO , PENSE DUAS VEZES ANTES DE SOBRECARREGAR SEU PROVEDOR .

" EMPRESTANDO " IMAGENS EM OUTROS SERVIDORES

ESTÁ ESCRITO EM ALGUM LUGAR QUE VOCÊ PODE COLOCAR LINKS PARA IMAGENS NO SEU PROVEDOR ?

CLARO QUE NÃO ! VOCÊ PODE CRIAR UMA PÁGINA APENAS COM IMAGENS " EMPRESTADAS " . EM VEZ DE CRIAR VÁRIAS CONEXÕES COM SEU PROVEDOR PARA BUSCAR AS IMAGENS , O BROWSER CONCECTARÁ OUTROS SITES AO REDOR DO PLANETA , BUSCANDO UMA DAS IMAGENS SELECIONADAS EM CADA UM .

BASTA PARA ISSO QUE VOCÊ DESCUBRA O ENDEREÇO EXATO DA IMAGEM QUE VOCÊ QUER COLOCAR .

USE NA TAG < IMG > O ENDEREÇO COMPLETO , COMO POR EXEMPLO :

< IMG SRC="HTTP://WWW.HIGHWAY.COM.BR/USERS/CARDOSO/PIXELS.GIF" >

TODA BOA AÇÃO TEM SEMPRE UMA PUNIÇÃO E VOCÊ NÃO ACHOU QUE IRIA USAR IMAGENS ESPALHADAS PELO MUNDO DE GRAÇA , NÃO ? O RISCO É QUE NINGUÉM VAI AVISAR QUANDO AS IMAGENS FOREM APAGADAS , RENOMEADAS , ALTERADAS OU SEJA LÁ MAIS O QUE QUISEREM FAZER COM O ARQUIVO , O PREÇO DA SUBLOCAÇÃO DE IMAGENS É A ETERNA VIGILÂNCIA .

TESTANDO SUA PÁGINA

TESTE TUDO . NEM PENSE EM SUBIR UMA PÁGINA ANTES DE ESTAR CERTO DE QUE TODOS OS LINKS FUNCIONAM E ME REFIRO A TODOS MESMO . CADA PÁGINA , CADA RODAPÉ . NÃO DEIXE QUE UM USUÁRIO DESCUBRA AQUELA FALHA IMPERDOÁVEL QUE VOCÊ PODERIA TER ENCONTRADO .

QUANDO O NETSCAPE NÃO ABRE NO WINDOWS 3.11

BEM , ISSO ACONTECE COM TODO MUNDO . É NORMAL . ALGUMAS VERSÕES DO NETSCAPE SÓ ABREM SE VOCÊ ESTIVER CONECTADO A UM PROVEDOR , OU HOUVER UM STACK TCP / IP RODANDO . NO WINDOWS 3.11 , GERALMENTE USA-SE O TRUMPET . O MACETE É SELECIONAR , NO SETUP , NO CAMPO ON LINE DETECT , A OPÇÃO NONE , DEPOIS , NO MENU LOGIN , SELECIONA-SE MANUAL LOGIN . APERTE ESC . ELE EMITIRÁ A MENSAGEM " SLIP / PPP ENABLED " . MINIMIZE-O E CHAME O NETSCAPE , QUE ABRIRÁ NORMALMENTE .





MOZOCK.DLL

EM ALGUNS CASOS , O MÉTODO ANTERIOR NÃO FUNCIONA . HÁ UMA INCOMPATIBILIDADE COM O ARQUIVO WINSOCK.DLL . PARA RESOLVER ISSO , OS MAGOS DA SAUSAGE SOFTWARE , CRIADORA DO EXCELENTE EDITOR HTML HOT DOG , DESENVOLVERAM UMA VERSÃO FALSA DO WINSOCK.DLL , QUE BATIZARAM DE MOZOCK.DLL .

VALE COMO ÚLTIMO RECURSO , SE NEM COM AJUDA DE UM PADRE EXORCISTA VOCÊ CONSEGUE ABRIR O NETSCAPE SEM ESTAR CONECTADO .

PROCURE O ARQUIVO WINSOCK.DLL , NO DIRETÓRIO DO TRUNPET E NO DIRETÓRIO DO WINDOWS . COPIE-O PARA UM LUGAR SEGURO . PEGUE O MOZOCK.DLL , RENOMEIE-O PARA WINSOCK.DLL E GRAVE-O NOS DIRETÓRIOS DO TRUMPET E DO WINDOWS .

ABRA O NETSCAPE NORMALMENTE . DESSA VEZ FUNCIONA !!!

AH , CLARO ! O MOZOCK.DLL TEM APENAS 5KB DE TAMANHO , E PODE SER ENCONTRADO NO SITE DA SAUSAGE SOFTWARE , EM HTTP://WWW.SAUSAGE.COM

INSTALANDO UM SERVIDOR WWW NA SUA MÁQUINA

É UMA EXPERIÊNCIA INTERESSANTE , EXTREMAMENTE SIMPLES E MUITO GRATIFICANTE . COM UM SERVIDOR WWW EM CASA , VOCÊ PODE ACESSAR AS PÁGINAS EM SUA PRÓPRIA MÁQUINA , SIMULANDO UM SITUAÇÃO REAL . CORRETAMENTE CONFIGURADO , VOCÊ PASSA A TER O ENDEREÇO :

HTTP://WWW.SEU.SERVIDOR.COM

OU QUALQUER OUTRO ENDEREÇO QUE VOCÊ QUEIRA DEFINIR . COM UM SERVIDOR WWW VOCÊ PODE TESTAR LOCALMENTE APPLES EM JAVA , SCRIPTS CGI EM PERL OU C++ , CONTADORES E RELÓGIOS ...

SEM CONTAR QUE É ÓTIMO PARA O EGO ACESSAR UM DOMÍNIO COM O PRÓPRIO NOME , COMO HTTP:WWW.CARDOSO.COM .

UM ÓTIMO SERVIDOR WWW , SHAREWARE , É O ZB SERVER , ENCONTRADO NO ENDEREÇO :

HTTP:// WWW.UTM.EDU/ZBS/





FIGURA 7.5 ZBSERVER EM AÇÃO . REPARE NA TELA À ESQUERDA O NOME DO SERVIDOR WWW.CARDOSO.COM !! NA OUTRA TELA , VEMOS O JOVEM MANCEBO QUE CONCEBEU ESSE BELO PROGRAMA .

NENHUM SERVIDOR WWW FUNCIONARÁ SE VOCÊ NÃO TIVER UM ENDEREÇO IP FIXO . NO WINDOWS 3.11 ACIONE O TRUMPET E NO CAMPO ONDE CONSTA " IP ADRESS " , COLOQUE 197.200.132.118 OU QUALQUER OUTRO ENDEREÇO IP VÁLIDO . NO WINDOWS95 , VÁ NO PAINEL DE CONTROLE / REDES / TCP-IP / PROPRIEDADES / ENDEREÇO IP E SELECIONE A OPÇÃO " ESPECIFICAR ENDEREÇO IP " , COLOCANDO O VALOR ACIMA NO CAMPO CORRESPONDENTE .

IMAGEMAPS

FIGURA 7.6 PÁGINA DA ATLANTIC RECORDS , FAZENDO USO DE IMAGEMAPS .





OS IMAGEMAPS ESTÃO ENTRE OS RECURSOS MAIS BONITOS, DENTRO DA ENORME VARIEDA DE POSSIBILIDADES DO HTML . COM ELES , PODEMOS ABRIR MÃO DE ÍCONES ISOLADOS OU LINKS DE TEXTO . PODEMOS ASSOCIAR NOSSOS LINKS A QUAQUER PARTE DE UMA IMAGEM , DEFININDO ÁREAS SENSÍVEIS , COM DIVERSOS FORMATOS , CADA UMA LIGADA A UM URL DIFERENTE .

FUNCIONAMENTO

ATE POUCO TEMPO ATRÁS , UM IMAGEMAP ERA INTERPRETADO DA SEGUINTE FORMA : O USUÁRIO CLICAVA NA SUPERFÍCIE DO MAPA ; O BROWSER ANOTAVA AS COORDENADAS , CONECTAVA COM O SERVIDOR , ENVIAVA AS COORDENADAS E A INFORMAÇÃO DE QUE ERA UM IMAGEMAP , ESPERAVA O PROCESSAMENTO DE UMA ROTINA NO SERVIDOR E FINALMENTE RECEBIA A PÁGINA CLICADA .

A ESPECIFICAÇÃO 3.0 DO HTML TROUXE UM NOVO CONCEITO : IMAGEMAPS EXECUTADOS NA MÁQUINA DO USUÁRIO . EM VEZ DE CHAMAR UMA ROTINA EM PERL OU C , O CLIQUE NO IMAGEMAP É INTERPRETADO LOCALMENTE . A PÁGINA TRAZ , JUNTO COM O MAPA , TODAS AS INFORMAÇÕES PARA EXECUÇÃO .

OS IMAGEMAPS EXECUTADOS NO COMPUTADOR DO USUÁRIO SÃO ACEITOS SOMENTE PELA VERSÕES MAIS RECENTES DO NETSCAPE E DO INTERNET EXPLORER .

OS IMAGEMAPS SÃO FORMADOS POR DOIS TIPOS DE DADOS : A IMAGEM , QUE SERÁ A BASE SOBRE A QUAL AS ÁREAS SENSÍVEIS SERÃO DESENHADAS , AS INFORMAÇÕES DE MÁSCARA QUE EFETIVAMENTE DEFINEM ESSAS ÁREAS E SEU COMPORTAMENTO QUANDO SELECIONADAS .

A IMAGEM USADA PARA GERAR A INFORMAÇÃO DE MÁSCARA E A IMAGEM EXIBIDA QUANDO DA CONFECÇÃO DA PÁGINA DEVEM SER RIGOROSAMENTE AS MESMAS , SOB O RISCO DO IMAGEMAP SE REFERIR A ÁREAS ALEATÓRIAS DA IMAGEM .

GERANDO AS ÁREAS DE MÁSCARA

EXISTE O MÉTODO FÁCIL E O DIFÍCIL . POR ESSE ÚLTIMO , USAMOS FÓRMULAS PARA DEFINIR QUAIS OS PONTOS , EM PIXELS , SÃO DEFINIDOS POR UMA DETERMINADA FÓRMULA GEOMÉTRICA ; APLICAMOS ESSES PONTOS NO TEXTO HTML , JUNTO COM AS TAGS ESPECÍFICAS . REZAMOS PARA AS CONTAS ESTAREM CORRETAS .





COM A CRESCENTE NECESSIDADE DE IMAGEMAPS , ACABOU SURGINDO UMA SÉRIE DE PROGRAMAS QUE PRETENDE FACILITAR SUA CRIAÇÃO . O MELHOR DELES CHAMA-SE MAPTHIS! E GERA IMAGEMAPS INCLUSIVE NO FORMATO EXECUTÁVEL NO COMPUTADOR CLIENTE , DE FORMA RÁPIDA E PRÁTICA .

ESSE É O MÉTODO PRÁTICO . COM O MAPTHIS! , DEFINIR UM IMAGEMAP CUJA IMAGEM JÁ ESTEJA PRONTA NÃO LEVA MAIS QUE TRÊS MINUTOS . VAMOS A UM EXEMPLO : TEMOS A FOTO DE 3 USUÁRIOS E DESEJAMOS QUE , CLICANDO-SE EM CADA UM DOS USUÁRIOS , O BROWSER PULE PARA A HOME PAGE DELES , SEM PROBLEMA .

FIGURA 7.7 FOTO A SER USADA COMO BASE DE UM IMAGEMAP .

O PRIMEIRO PASSO NO MAPTHIS! É CRIAR UM NOVO MAPA . ELE IMEDIATAMENTE PEDIRÁ UM ARQUIVO GRÁFICO . COM A CAIXA DE DIÁLOGO ADEQUADA , INFORMAMOS AO PROGRAMA QUAL SERÁ NOSSO ARQUIVO GRÁFICO . NO EXEMPLO , USAREMOS O USERS.GIF .

FIGURA 7.8 ARQUIVO GRÁFICO ABERTO NO MAPTHIS! . REPARE QUE AINDA NÃO HÁ INFORMAÇÃO NENHUMA RELATIVA A MÁSCARAS .





NO CANTO SUPERIOR ESQUERDO DA JANELA DO MAPTHIS! EXISTEM 3 FERRAMENTAS MUITO IMPORTANTES , SÃO AS OPÇÕES DISPONÍVEIS PARA A CONSTRUÇÃO DE MÁSCARAS , SEGUNDO A ESPECIFICAÇÃO HTML 3.0 - RETÂNGULO , CÍRCULO E POLÍGNO .

COM A PRIMEIRA , DEFINIMOS MÁSCARAS - QUE SURPRESA - RETANGULARES . NÃO COSTUMA SER MUITO ÚTIL , POIS , AFINAL , OS BOTÕES E OUTRAS IMAGENS JÁ SÃO , POR NATUREZA , RETANGULARES . CRIAR UM IMAGEMAP COM UMA FIGURA RETANGULAR SERIA COMO REINVENTAR A RODA . CLARO , HÁ CASOS EM QUE ISSO É BEM FEITO .

FIGURA 7.9 MÁSCARA RETANGULAR CRIADA COM A FERRAMENTA APROPRIADA . NO IMAGEMAP FINAL , SE TORNARIA UMA ÁREA SENSÍVEL .

A FERRAMENTA DE MÁSCARA CIRCULAR É BEM MAIS INTERESSANTE . PODEM-SE FAZER BOTÕES CIRCULARES , COMO OS DA PÁGINA DA CANON MOSTRADA NO CAPÍTULO 1 . VOCÊ PODERIA FAZER UM PLANETÁRIO , DEFININDO PARA UM IMAGEMAP DO SISTEMA SOLAR , MÁSCARAS CIRCULARES PARA CADA PLANETA . AS POSSIBILIDADES DESSA FERRAMENTA SÃO VÁRIAS .

FIGURA 7.10 MÁSCARA CIRCULAR , CONVENIENTEMENTE OCULTANDO O ROSTO DESSE INDIVÍDUO .





O POLÍGONO É A FERRAMENTA MAIS PODEROSA! PERMITE QUE VOCÊ CONTORNE FORMAS E SILHUETAS , E VIRTUALMENTE DESENHE A MÁSCARA NOS MÍNIMOS DETALHES . COM BASTANTE PACIÊNCIA E ESSA FERRAMENTA , VOCÊ PODERIA DESENHAR , SOBRE UM MAPA DO BRASIL , MÁSCARAS RELATIVAS A CADA ESTADO , ASSOCIANDO-AS A UM ENORME BANCO DE DADOS , CADA UMA LEVANDO A UM SITE DIFERENTE . SÓ NÃO ME PERGUNTE PARA QUÊ .

FIGURA 7.11 AMPLIAÇÃO DA IMAGEM ORIGINAL , MOSTRANDO MÁSCARAS CRIADAS COM A FERRAMENTA DE POLÍGONOS . COM ESSA FERRAMENTA VOCÊ PODE FOTOGRAFAR UMA VITRINE E DEFINIR , ITEM A ITEM , MÁSCARAS PARA CADA UM . PENSE NAS VANTAGENS DISSO EM RELAÇÃO A UMA SIMPLES LISTA .

AO CONTRÁRIO DAS OUTRAS FERRAMENTAS , A DE POLÍGONOS PRECISA SER AVISADA DE QUE O TRABALHO ESTÁ PRONTO . CLIQUE DUAS VEZES PARA TERMINAR DE DESENHAR UM POLÍGONO E ELE SE FECHARÁ AUTOMATICAMENTE .

VAMOS AGORA , ABANDONAR ESSAS EXPERIÊNCIAS E DESENHAR NOSSAS MÁSCARAS DEFINITIVAS : COM A FERRAMENTA DE POLÍGONOS , TRAÇAMOS SILHUETAS EM TORNOS DAS PESSOAS PRESENTES NA FOTO :





FIGURA 7.12 MÁSCARAS GERADAS COM A FERRAMENTA DE POLÍGONO .

APÓS GERARMOS OS POLÍGONOS , DEVEMOS IR AO MENU EDIT E CHAMAR A OPÇÃO EDIT MAP INFO . AQUI DEFINIREMOS O TÍTULO DO MAPA E NOME DO AUTOR , O URL DEFAULT , QUE É A PÁGINA CHAMADA SEMPRE QUE O USUÁRIO CLICA FORA DE UMA ÁREA SENSÍVEL , AINDA PODEMOS FAZER ALGUM COMENTÁRIO E O MAIS IMPORTANTE , DEFINIMOS O TIPO DE MAPA A SER GERADO .

SELECIONE A OPÇÃO CSIM , DE CLIENT SIDE IMAGE MAP .

FIGURA 7.13 CAIXA DE DIÁLOGO EDIT MAP INFO , ACESSÍVEL ATRAVÉS DO MENU EDIT . A ÚNICA INFORMAÇÃO INDISPENSÁVEL É O URL DEFAULT .

AGORA , VAMOS AO QUE INTERESSA : CLIQUE DUAS VEZES EM UMA DAS MÁSCARAS SE REFERE , OU SEJA , A PÁGINA QUE ELE CHAMARÁ AO SER CLICADO E UM COMENTÁRIO OPCIONAL .





NÃO VAMOS ENTRAR NA BRIGA HISTÓRICA SOBRE SE PROGRAMAS DEVEM SER COMENTADOS OU NÃO .

A OPÇÃO ESTÁ AÍ , USA QUEM QUER .

FIGURA 7.14 CAIXA DE DIÁLOGO AREA SETTINGS , ACESSÍVEL ATRAVÉS DE UM CLIQUE DUPLO EM QUALQUER MÁSCARA .

FEITO ISSO , SÓ NOS RESTA TESTAR O MAPA . ESSA OPÇÃO , QUE ESTÁ NO MENU GOODIES / TEST MAP , PERMITE QUE VOCÊ PASSEIE COM O CURSOR DO MOUSE POR SEU MAPA E VERIFIQUE , AO PÉ DA PÁGINA , QUAL URL AQUELA ÁREA CHAMARIA SE ESTIVESSE EM SITUAÇÃO REAL .

AGORA , SALVEMOS O MAPA ATRAVÉS DA OPÇÃO FILE / SAVE , MAS HÁ UM DETALHE : SALVE-O COM A EXTENSÃO .HTM E A OPÇÃO CSIM SELECIONADA . ISSO GERARÁ UM ARQUIVO HTML COM SEU MAPA PRONTINHO . OU QUASE . NO NOSSO EXEMPLO , USAMOS O NOME MAP.HTM .

FIGURA 7.15 OPÇÃO SAVE , NÃO SE ESQUEÇA DE SELECIONAR CSIM COMO FORMATO DO MAPA .





AGORA , BASTA INSERIR , NA PÁGINA EM QUE VAMOS DISPONIBILIZAR O MAPA , DUAS COISAS : A PRIMEIRA , É UMA LINHA QUE CARREGUE A IMAGEM E AVISE AO BROWSER QUE ELA É UM IMAGEMAP .

NO NOSSO CASO , A SINTAXE SERIA :

< IMG SRC="USER.GIF" USEMAP="#MAPA-DE-TESTE" BORDER=0 >

USER.GIF É O NOME DA IMAGEM A SER USADA . #MAPA-DE-TESTE É O NOME DO MAPA E ISSO É IMPORTANTE . PERMITE QUE A LISTAGEM DO MESMO ESTEJA EM QUALQUER LUGAR DA PÁGINA . BORDER=0 É A NOSSA AUSÊNCIA DE MOLDURA , SEMPRE BEM-VINDA .

DEPOIS DISSO , DEVE SER INSERIDO O ARQUIVO MAP.HTM , QUE NADA MAIS É QUE A LISTAGEM :

< MAP NAME="MAPA-DE-TESTE" >

< !- #$ - : IMAGE MAP FILE CREATED BY MAP THIS! - >

< !- #$ - : MAP THIS! FREE IMAGE MAP EDITOR BY TODD C. WILSON - >

< !- #$ - : PLEASE DO NOT EDIT LINES STARTING WITH "#$" - >

< !- #$VERSION : 1.20 - >

< !- #$AUTHOR : CARLOS CARDOSO - >

< !- #$DATE : SAT MAR 04 23:28:48 1995 - >

< !- #$PATH : D:\WWW\LIVRO\ - >

< !- #$GIF : USER.GIF - >

< AREA SHAPE=POLY COORDS="400,231,416,191,416,162,420,141,425,116,422,88,417,74,398,58,393,48,401,35,394,21,375,14,355,17,348,29,348,47,354,61,360,71,350,87,340,101,335,113,359,149,373,173,377,195,388,231,391,255,400,231" HREF=HTTP://WWW.UNIKEY.COM.BR/USERS/CONCEICAO/CONCEICAO.HTM >

< AREA SHAPE=POLY COORDS="337,113,322,101,316,79,309,52,293,42,258,46,250,72,254,90,268,118,282,129,278,157,270,195,258,229,245,257,227,254,221,266,187,276,181,290,384,293,386,248,385,212,369,164,346,125,333,110,337,113" HREF=HTTP://WWW.UNIKEY.COM.BR/USERS/CARDOSO/CARDOSO.HTM >

< AREA SHAPE=POLY COORDS="183,202,147,151,149,135,149,118,143,105,124,100,106,108,104,132,99,138,105,153,95,173,91,186,115,192,125,175,141,177,145,201,179,203,183,202" HREF=HTTP://WWW.UNIKEY.COM.BR/USERS/SONIARO/SONIARO.HTM >

< AREA SHAPE=DEFAULT HREF=PADRAO.HTM >

< / MAP >





COLOCAMOS MAIS UMAS LINHAS DE CABEÇALHO , UMA TAG DE CENTRALIZAÇÃO E VOILÁ! TEMOS NOSSO IMAGEMAP . ACREDITE , NA PRÁTICA ESSE LEVOU CINCO MINUTOS PARA SER FEITO .

FIGURA 7.16 PÁGINA FINAL COM O MAPA , FUNCIONAL , SEM PRECISAR ACESSAR PROGRAMAS NO SERVIDOR WWW OU EM QUALQUER OUTRO LUGAR .

WWW. ( WORLD WIDE WEB )





CAPÍTULO 8

GRÁFICOS E IMAGENS





TÉCNICA INÉDITA DE PRODUZIR BOTÕES

FIGURA 8.1 BOTÃO 3D CRIADO COM A TÉCNICA CARDOSO .

VOCÊ VAI PRECISAR DE UM SCANNER DE MESA , MAS VALE A PENA : ARRANQUE COM DELICADEZA A TECLA TAB OU SHIFT DO SEU TECLADO . COLOQUE-A NO SCANNER E MANDE VER . EM SEGUNDOS VOCÊ TERÁ UM BOTÃO 3D MARAVILHOSAMENTE REAL , SEM PRECISAR DE UM 3D STUDIO , COM UM MÍNIMO DE RETOQUES , VOCÊ INSERE O TEXTO QUE QUISER E NINGUÉM MAIS TERÁ BOTÕES TÃO REALISTAS . ESSA TÉCNICA FUNCIONA COM OUTROS OBJETOS , COMO PODE SER VISTO NA ILUSTRAÇÃO . EXPERIMENTE , AS POSSIBILIDADES SÃO INFINITAS ! UM SCANNER DE MESA É UMA MÁQUINA FOTOGRÁFICA COM UMA DISTÂNCIA FOCAL DE MAIS OU MENOS UM CENTÍMETRO . EXPERIMENTE ESCANEAR CABELO . ALGUMAS MADEIXAS DE UMA LOURINHA SE TRANSFORMAM EM UM LINDO FUNDO DE HOME PAGE !

PS : NÃO SE ESQUEÇA DE COLOCAR AS TECLAS DE VOLTA NO TECLADO .

FIGURA 8.2 PROTÓTIPO DA HOME PAGE DA AXCEL BOOKS , USANDO A TÉCNICA DE BOTÕES DE VERDADE , ESCANEADOS .





BOTÕES 3D - MÉTODO RÁPIDO E PRÁTICO

FIGURA 8.3 CAIXA DE DIÁLOGO CAPTURADA , COM DIVERSAS ETAPAS DA CONFECÇÃO DE UM BOTÃO 3D RÁPIDO E FÁCIL .

PRECISA FAZER BOTÕES COM URGÊNCIA ? SEM PROBLEMA . ABRA QUALQUER CAIXA DE DIÁLOGO DO WINDOWS , OU DE OUTRO PROGRAMA ( PODE SER ATÉ DO OS/2 ) E , COM A TECLA PRINT SCREEN , CAPTURE A TELA PARA A ÁREA DE TRANSFERÊNCIA .

ABRA SEU PROGRAMA DE EDIÇÃO FAVORITO E , NA OPÇÃO EDIT , SELECIONE O PASTE AS NEW IMAGE . A SINTAXE PODE VARIAR , MAS É SEMPRE NA OPÇÃO EDIT / PASTE .

DESCARTE TUDO QUE NÃO INTERESSA , APAGUE OS DADOS DO BOTÃO QUE VOCÊ QUER USAR , COLOQUE O TEXTO QUE QUISER , COPIE PARA A ÁREA DE TRANSFERÊNCIA ( SOMENTE O BOTÃO ) E , MAIS UMA VEZ , " PASTE AS NEW IMAGE " . SEU BOTÃO ESTARÁ PRONTINHO ...

FIGURA 8.4 TELA DO ALDUS PHOTOSTYLER , COM O MENU PASTE AS NEW DOCUMENT SELECIONADO . DA IMAGEM INTEIRA , APROVEITAMOS APENAS OS BOTÕES .





SOMBRAS

UMA IMAGEM OU UM ÍCONE CHAMA A ATENÇÃO , QUANDO ACOMPANHADO DE UMA BOA SOMBRA .

E NÃO É DIFÍCIL DE FAZER .

FAÇA UMA CÓPIA DE SEU ÍCONE . APLIQUE UM EFEITO DE BLUR VÁRIAS VEZES , ATÉ DISTORCER E SUAVIZAR BASTANTE AS BORDAS DA IMAGEM , DEPOIS , APLIQUE UMA CORREÇÃO DE COR , AUMENTANDO EM 50% O BRILHO ORIGINAL . APLIQUE UM BLUR NOVAMENTE .

RECORTE A IMAGEM ORIGINAL COM CUIDADO PARA NÃO DEIXAR NENHUM FIO EM VOLTA DELA . UM RECORTE MAL FEITO E UMA MOLDURA BRANCA DESTRUIRÃO A ILUSÃO DE TRIDIMENSIONALISADE .

COLE A IMAGEM EM CIMA DA VERSÃO CLAREADA E SUAVIZADA . QUANTO MAIOR A DISTÂNCIA ENTRE A IMAGEM E A SOMBRA , MAIOR O EFEITO . MAS AS MELHORES SOMBRAS SÃO BEM PEQUENAS .

APENAS SOMBRA NA DEMONSTRAÇÃO ADIANTE FOI EXAGERADA PARA FINS DIDÁTICOS .

EFEITOS DE BLUR ( 3 VEZES ) E AUMENTO DO BRILHO EM 50%

FIGURA 8.5 PROCESSO DE PRODUÇÃO DE EFEITO DE SOMBRA 3D EM UM ÍCONE OU IMAGEM .

QUALQUER PROGRAMA SIMPLES TEM O EFEITO BLUR , OU SEMELHANTE . SE , MESMO ASSIM VOCÊ NÃO O ENCONTRAR , PROCURE POR ALTERNATIVAS COMO O SOFTEN , OU MESMO UM PIXELBREZE .





MOLDURA COM A TAG DE TABELAS

FIGURA 8.6 A MESMA IMAGEM COM MOLDURA PADRÃO , OU FAZENDO USO DA TAG DE TABELA .

A MOLDURA PADRÃO , COM O COMANDO BORDER=X É CORRETA , MAS NÃO PASSA DE FEIJÃO - COM - ARROZ . COM A TAG DE TABELAS , VOCÊ CONSEGUE , RÁPIDO E FÁCIL , UMA MOLDURA 3D PARA SUA IMAGEM .

PARA DEFINIR UMA BORDA PADRÃO COM DUAS UNIDADES DE ESPESSURA , USA-SE A SINTAXE :

< IMG SRC="ARQUIVO.JPG" BORDER=2 >

PARA CONSEGUIR A MOLDURA DE TABELA , BASTA A SEGUINTE ALTERAÇÃO :

< TABLE BODER=2 >

< TR > < TD > < IMG SRC="ARQUIVO.JPG" > < / TD > < / TR >

< / TABLE >

UMA PEQUENA ALTERAÇÃO , QUE RESULTA EM UM EFEITO MAIS BEM ACABADO .

JPEG OU GIF ?

DEPENDE DA UTILIZAÇÃO . SE VOCÊ FOR USAR IMAGEM FOTOGRÁFICAS GRANDES , USE JPEG . A CAPACIDADE DE COMPRESSÃO DESSE FORMATO FAZ COM QUE FOTOS ENORMES OCUPEM UM ESPAÇO MINÚSCULO . MAS O PREÇO É A QUALIDADE . A PERDA EXISTE , EMBORA IMPERCEPTÍVEL PARA O USUÁRIO NORMAL . TENTE SALVAR UMA IMAGEM EM JPEG , COM UM FATOR DE COMPRESSÃO MULTO ALTO E VEJA COMO FICA DISTORCIDA.





USUÁRIO NORMAL . TENTE SALVAR UMA IMAGEM EM JPEG , COM UM FATOR DE COMPRESSÃO MUITO ALTO E VEJA COMO FICA DISTORCIDA .

JÁ O GIF É ÓTIMO PARA ÍCONES E GRÁFICOS . É LIMITADO , PORÉM , A 256 CORES , À MEDIDA QUE O NÍVEL DE EXIGÊNCIA DAS IMAGENS CRESCE , ISSO COMEÇA A SE TORNAR UM PROBLEMA .

GIFS SÃO EXIBIDOS MAIS RAPIDAMENTE , POIS DEMANDAM MENOS PROCESSAMENTO QUE JPG . ESTES , ENTRETANTO , NÃO FICAM MUITO ATRÁS , POIS SEUS ARQUIVOS COSTUMAM SER MENORES , PORTANTO COMPENSAM O TEMPO DE PROCESSAMENTO COM UM DOWNLOAD MAIS RÁPIDO .

FIGURA 8.7 IMAGEM TOTALMENDE DESINTERESSANTE DE UM LEÃO . USADA APENAS PORQUE ESTAVA À MÃO QUANDO FOI NECESSÁRIA PARA GERAR ESTE EXEMPLO .

VEJAMOS A RELAÇÃO DE TAMANHO ENTRE ESSES E OUTROS FORMATOS ; CONSIDERANDO A IMAGEM DO LEÃO , EM 526X474 PIXELS , 16 MILHOES DE CORES ( MENOS EM GIF ) :

GRAVADA EM : TAMANHO :

GIF 261.346 BYTES

TIF 264.928 BYTES

BMP 251.350 BYTES

JPEG 35.065 BYTES !!!





A IMAGEM EM JPEG FOI GRAVADA COM UM FATOR DE COMPRESSÃO 35 . VARIANDO ENTRE 1 E 100 , NÚMEROS MAIORES INDICAM COMPRESSÃO MAIOR , PORÉM CONSEQUENTEMENTE MAIS PERDA NO RESULTADO FINAL . PARA FINS DE EXIBIÇÃO EM HOME PAGE , UM FATOR 40 AINDA É ACEITÁVEL .

GIFS TRANSPARENTES

FIGURA 8.8 HÁ ALGUM TEMPO FEZ-SE UMA FESTA NA INTERNET SOBRE GIFS TRANSPARENTES . PARECIA O TERCEIRO SEGREDO DE FÁTIMA .

BEM , O PROCESSO É SIMPLES : DAS 256 CORES , DISPONÍVEIS EM UMA IMAGEM GIF , UMA É ESCOLHIDA E QUALQUER OCORRÊNCIA DA MESMA É SUBSTITUÍDA PELA IMAGEM DE FUNDO , SEJA ELA QUAL FOR . ISSO ACONTECE AUTOMATICAMENTE E TODO O " TRABALHO SUJO " É FEITO PELO NETSCAPE E POR SEU EFITOR GRÁFICO . VOCÊ SÓ PRECISA DIZER QUAL COR SERÁ A ESCOLHIDA .

VAMOS USAR O PAINT SHOP PRO COMO EXEMPLO ; PEGAMOS UMA IMAGEM DE UMA LATA DE REFRIGERANTE E PINTAMOS UMA ÁREA COM UMA COR ÚNICA , QUE NÃO APARECERÁ EM NENHUMA OUTRA PARTE DA MESMA . NO CASO , USAMOS VERMELHO 100% . COM A FERRAMENTA CORRETA , IDENTIFICAMOS QUAL O NÚMERO DA COR . EM NOSSO EXEMPLO , 128 .

ENTÃO É SÓ SALVAR O ARQUIVO NO FORMATO GIF , INDO NA JANELA OPTIONS E ESCOLHENDO O NÚMERO DA COR , COMO A QUE SERÁ TOMADA TRANSPARENTE . RÁPIDO E INDOLOR .





FIGURA 8.9 IDENTIFICAÇÃO , NO PAINT SHOP PRO , DO NÚMERO DA COR A SER TORNADA TRANSPARENTE .

FIGURA 8.10 LOCALIZAÇÃO DA OPÇÃO DE " SALVAR GIF TRANSPARENTE " NO PSP .





TESTE BEM SUA IMAGEM E CUIDE PARA QUE A COR A SER ESCOLHIDA NÃO ESTEJA PRESENTE EM OUTRAS PARTES QUE NÃO DEVAM SER TRANSPARENTES . TALVEZ VOCÊ PRECISE FAZER ALGUMA EDIÇÃO DE CORES , O QUE , MESMO COM SOMENTE 256 DISPONÍVEIS , NÃO É NENHUM BICHO DE SETE CABEÇAS .

EXISTEM OUTROS PROGRAMAS QUE FAZEM GIFS TRANSPARENTES , ENTRE ELES O L VIEW . HÁ UM PLUG - IN PARA O PHOTOSHOP COM A MESMA FUNÇÃO .

ANTIALIASING

FIGURA 8.11 EXEMPLO DE TEXTO COM E SEM ANTIALIASING . REPARE COMO O TEXTO INFERIOR PARECE TER MENOS RESOLUÇÃO .

UM FATOR QUE DIFICULTA A POPULARIZAÇÃO DOS COMPUTADORES COMO FERRAMENTAS DE LEITURA É O POPULAR " SERRILHADO " TÍPICO DE " LETRA DE COMPUTADOR " . NOS PRIMÓRDIOS DA INFORMÁTICA , COM UM ZX81 POSSIBILITANDO RESOLUÇÕES DE 64X44 E MAIS TARDE UM ZX SPECTRUM COM 256X192 PIXELS , TUDO BEM . MAS MESMO EM 1996 , COM RESOLUÇÕES ACIMA DE 1024X768 , VOCÊ AINDA VÊ A FAMIGERADA SERRILHA .

RESOLVER O PROBLEMA DAS SERRILHAS APENAS AUMENTANDO A RESOLUÇÃO DO EQUIPAMENTO , LEVA A PLACAS E MONITORES DE CUSTO PROIBITIVO . MAS EXISTE UMA ALTERNATIVA :

COM A TECNOLOGIA DE ANTIALISING , AS SERRILHAS SÃO SUAVIZADAS . UMA LINHA DIAGONAL TERRIVELMENTE SERRILHADA É SUAVIZADA COM A ADIÇÃO DE PONTOS INTERMEDIÁRIOS , QUE FAZEM A FUSÃO ENTRE AS BORDAS DA LINHA E O FUNDO . É TRABALHOSO DO PONTO DE VISTA DE PROGRAMAÇÃO DEMANDA MUITO PROCESSAMENTO , MAS O RESULTADO COMPENSA .





O WINDOWS 95 IRIA TRAZER , PELA PRIMEIRA VEZ , UM GERADOR DE FONTES DE TELA COM UM DISPOSITIVO DE ANTIALIASING . NÃO SEI O QUE HOUVE, ENTRETANTO .

OS BONS PROGRAMAS DE MANIPULAÇÃO DE IMAGENS APRESENTAM VÁRIAS OPÇÕES DE ANTIALIASING E NO PAINT SHOP PRO HÁ INCLUSIVE A POSSIBILIDADE DE LIGAR E DESLIGAR O ANTIALIASING QUANDO DA INSERÇÃO DE TEXTOS .

FIGURA 8.12 CAIXA DE ENTRADA DE DADOS DE TEXTO , NO PAINT SHOP PRO . O EFEITO DE ANTIALIASING NÃO ESTÁ ATIVADO , MAS PARA UMA LETRA DE TAMANHO 16 , COMO ESTÁ SELECIONADO , SERIA INDICADO QUE O EFEITO FOSSE UTILIZADO .

CUIDADO COM A OPÇÃO DE ANTIALIASING QUANDO ESTIVER TRABALHANDO COM LETRAS PEQUENAS . O TEXTO FICARÁ PARECENDO FORA DE FOCO E A LEITURA SERÁ PREJUDICADA .





CAPÍTULO 9

FRAMES





A MAIOR CONTRIBUIÇÃO DO NETSCAPE PARA A LINGUAGEM HTML FORAM OS FRAMES . COM ELES , PODE-SE DIVIDIR UMA PAGÍNA EM DIVERSAS JANELAS INDEPENDENTES , CADA UMA DEFINIDA POR UM ARQUIVO .HTM DIFERENTE . ASSIM , INFORMAÇÕES COM NOTAS DE COPYRIGHT , BARRAS DE MENU OU LOGOMARCAS PODEM FICAR FIXAS , ENQUANTO OUTRAS ÁREAS DA PÁGINA MUDAM , DE ACORDO COM AS SELEÇÕES FEITAS PELO USUÁRIO .

UM USO COMUM PARA FRAMES , ALÉM DAS JÁ FAMOSAS " SALAS DE CONVERSA " NA WWW , COMO A DO MARCELLO'S BAR , É O DE BARRAS DE OPÇÕES . COM UM FRAME RESERVADO PARA MENUS , A NAVEGAÇÃO ENTRE AS DIVERSAS PÁGINAS DE UM SITE TORNA-SE MUITO MAIS TRANQÜILA E O USUÁRIO PODE IR DIRETO AO DESTINO DESEJADO , SEM TER QUE PASSAR POR DIVERSAS PÁGINAS INTERMEDIÁRIAS .

MUITAS PÁGINAS TAMBÉM UTILIZAM FRAMES PARA APRESENTAR A ENTRADA E A SAÍDA DE DADOS DE UM FORMULÁRIO EM UMA ÚNICA PÁGINA .

FIGURA 9.1 PÁGINA DO MARCELLU'S VIRTUAL , UM CYBER-BAR BRASILEIRO , DE PRIMEIRO NÍVEL , COMBINA FRAMES , PERL , CONTADORES , TUDO EM UMA ÚNICA E EXCELENTE PÁGINA .





EXEMPLOS DE PÁGINAS COM FRAMES

FIGURA 9.2 WWW.DESIGNSTEIN.COM - UM SITE MUITO BONITO , COM ESTILO E DESIGN . ALÉM DOS FRAMES , USAM DIVERSOS OUTROS RECURSOS , COMO ANIMAÇÃO E APLICAÇÕES EM JAVA . VALE UMA VISITA .

FIGURA 9.3 UMA BOA LISTA DE SITES QUE FAZEM USO DE FRAMES PODE SER ENCONTRADA NA PRÓPRIA NETSCAPE , NO ENDEREÇO : HTTP://WWW.NETSCAPE.COM/COMPROD/PRODUCTS/NAVIGATOR/VERSION_2.0/FRAMES/FRAME_USERS.HTML .





ESTRUTURA DOS FRAMES

UMA PÁGINA USANDO FRAMES É QUASE IDÊNTICA A UMA PÁGINA HTML PADRÃO , MAS O ELEMENTO < BODY > É SUBSTITUÍDO PELO ELEMENTO < FRAMESET > .

UM DOCUMENTO HTML MÍNIMO FICARIA ASSIM :

< HTML >

< HEAD >

< / HEAD >

< BODY >

< - AQUI ESTRA O CORPO DA PÁGINA - >

< / BODY >

< / HTML >

UM DOCUMENTO HTML COM FRAMES SERIA :

< HTML >

< HEAD >

< / HEAD >

< FRAMESET >

< -- AQUI ENTRA A CHAMADA PARA OS DOCUMENTOS DOS FRAMES - >

< / FRAMESET >

< / HTML >

UM DOCUMENTO HTML COM FRAMES POUCO OU NADA MAIS CONTÉM QUE AS FORMATAÇÕES DOS FRAMES E O ENDEREÇO DA PÁGINA HTML QUE ENTRARÁ EM CADA UM DELES . QUALQUER PÁGINA CONVENCIONAL PODE SER TRANSFORMADA PARA FRAMES EM QUESTÃO DE MINUTOS . OS DOCUMENTOS HTML PRATICAMENTE NÃO SÃO MODIFICADOS .

SINTAXE

PARA EXEMPLIFICARMOS AS TAGS , PRECISAREMOS CRIAR UM DOCUMENTO DE FRAMES E UM DOCUMENTO HTML NORMAL , QUE SERÁ EXIBIDO NOS FRAMES . PARA O DOCUMENTO HTML NORMAL , CRIE , EM UM DIRETÓRIO , UM ARQUIVO CHAMADO FRAM1.HTM COM O SEGUINTE CONTEÚDO :

< HTML >

< HEAD >

< TITLE > TESTE < / TITLE >

< / HEAD >

< BODY >

< H2 > TESTE DE FRAME < / H2 >

< / BODY >

< / HTML >

O DOCUMENTO DE FRAME SERÁ EXIBIDO E MODIFICADO A CADA TAG APRESENTADA .





< FRAMESET >

TAG PRINCIPAL DO DOCUMENTO DE FRAMES . COSTUMA SER A PRIMEIRA NO DOCUMENTO . DEFINE A QUANTIDADE E O TAMANHO DOS FRAMES A SEREM EXIBIDOS . É ACOMPANHADA DA TAG DE FECHAMENTO < / FRAMESET > . ESTA TAG TEM DOIS ELEMENTOS MODIFICADORES : ROWS E COLS .

ROWS="A,B,C,D"

ELEMENTO MODIFICADOR QUE DEFINE , DENTRO DE UMA TAG , A ALTURA DE CADA FRAME . OS VALORES PODEM SER EM PIXELS OU PERCENTUAIS . A QUANTIDADE DE FRAMES ESTÁ IMPLÍCITA NA QUANTIDADE DE VALORES DO ELEMENTO ROWS . ASSIM , UM ELEMENTO COM A SINTAXE

ROWS="20,20,20"

É ENTENDIDO PELO BROWSER COMO UMA PÁGINA DE 3 FRAMES .

A LISTAGEM DE UMA PÁGINA COM 3 FRAMES SERIA :

< HTML >

< HEAD >

< / HEAD >

< FRAMESET ROWS="20%,20%,20%" >

< FRAME SRC="FRAME1.HTM" >

< FRAME SRC="FRAME1.HTM" >

< FRAME SRC="FRAME1.HTM" >

< / FRAMESET >

< / HTML >

FIGURA 9.4 EXEMPLO DA FIGURA GERADA PELA LISTAGEM ANTERIOR . REPARE NA AUSÊNCIA DA TAG < BODY > , NÃO PRESENTE EM DOCUMENTOS DE FRAMES .





PARA QUE OS VALORES SEJAM ENTENDIDOS COMO PIXELS , BASTA COLOCAR O NÚMERO SOZINHO .

PARA QUE SEJAM ENTENDIDOS COMO PERCENTUAL DA TELA , USE UM SINAL DE PERCENTUAL (%) .

EXEMPLOS :

DOCUMENTOS COM FRAMES DE 150, 100 E 50 PIXELS DE ALTURA :

< FRAMESET ROWS="150,100,50" >

DOCUMENTOS COM FRAMES OCUPANDO 25% , 35% E 50% DA TELA :

< FRAMESET ROWS="25%,35%,50%" >

FIGURA 9.5 GERADA POR LISTAGEM IDÊNTICA À DA FIGURA 9.4 , MAS ALTERANDO-SE A LINHA < FRAMESET > PARA < FRAMESET ROWS="25%,35%,50%" > , O QUE DEMONSTRA O USO DE VALORES PROPORCIONAIS .

COLS="A,B,C,D"

IDÊNTICO AO ROWS , MAS DEFINE O NÚMERO DE COLUNAS UTILIZADAS POR CADA FRAME . A SINTAXE É A MESMA , BASTA TROCAR ROWS POR COLS .

VAMOS VER UMA PÁGINA COM 3 FRAMES , CADA UM OCUPANDO UM TERÇO DA PÁGINA , SEGUNDO A SINTAXE :

< FRAMESET COLS="33%,33%,33%" >





FIGURA 9.6 PÁGINA DIVIDIDA EM TRÊS FRAMES , CADA UM COM 1/3 DA LARGURA TOTAL .

UMA TAG < FRAMESET > PODE SER INSERIDA DENTRO DE OUTRA , GERANDO ASSIM VÁRIOS FRAMES .

VEJA A IMAGEM ABAIXO :

FIGURA 9.7 FRAMES MÚLTIPLOS EM UMA PÁGINA .





A LISTAGEM DA IMAGEM ANTERIOR :

< HTML >

< HEAD >

< / HEAD >

< FRAMESET COLS="50%,50%" >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="FRAME1.HTM" >

< FRAME SRC="FRAME1.HTM" >

< / FRAMESET >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="FRAME1.HTM" >

< FRAME SRC="FRAME1.HTM" >

< / FRAMESET > < / FRAMESET >

< FRAME >

COMO VOCÊ REPAROU , O PULO DO GATO ESTÁ NA TAG < FRAME > . É ELA QUE FAZ O TRABALHO DURO E DISPÕE DOS SEGUINTES ELEMENTOS :

SRC="ARQUIVO.HTM"

DEFINE QUAL DOCUMENTO HTML , SERÁ EXIBIDO DENTRO DAQUELE FRAME . SE VOCÊ OMITIR ( SEI LÁ POR QUÊ ) ESSE ELEMENTO , O FRAME SERÁ EXIBIDO VAZIO .

EXEMPLO :

< FRAME SRC="FRAME1.HTM" >

COMO DOCUMENTO HTML , ENTENDA QUALQUER PÁGINA VÁLIDA NA INTERNET , ESTEJA ELE EM SEU COMPUTADOR , NO SEU PROVEDOR OU EM CUCAMONGA . VEJA O EXEMPLO ABAIXO : DIGITE A LISTAGEM A SEGUIR E ABRA , AO MESMO TEMPO , UMA PÁGINA COM OS QUATRO MAIORES SITES DE PESQUISA DE INFORMAÇÃO DA INTERNET . AO VIVO E A CORES !





FIGURA 9.8 EXEMPLO DE PÁGINA COM QUATRO FRAMES , DEMONSTRANDO A FLEXIBILIDADE DA TAG < FRAME >

< BR > < BR >

LISTAGEM :

< BR > < BR >

< HTML >

< HEAD >

< / HEAD >

< FRAMESET COLS="50%,50%" >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="HTTP://WWW.ALTAVISTA.DIGITAL.COM" >

< FRAME SRC="HTTP://WWW.YAHOO.COM" >

< / FRAMESET >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="HTTP://WWW.WEBCRAWLER.COM" >

< FRAME SRC="HTTP://WWW.EXCITE.COM" >

< / FRAMESET >

< / FRAMESET >

< / HTML >

PEQUENO , NÃO ? MAS TAMANHO NÃO É DOCUMENTO EM HTML TAMBÉM .





ANTES QUE ALGUÉM ME MANDE UM E-MAIL DESAFORADO , UM TOQUE : PARA QUE ESSA PÁGINA FUNCIONE , VOCÊ PRECISA ESTAR COM SUA CONEXÃO INTERNET ATIVA .

VEJAMOS AGORA OS ELEMENTOS DA TAG

NAME="NOME DO FRAME"

DEFINE O NOME DO FRAME , COMO VOCÊ PODE DEDUZIR . É ESSENCIAL PARA O USO DO ELEMENTO TARGET . AO BATIZARMOS UM FRAME , ABRIMOS A POSSIBILIDADE DE OUTROS FRAMES OU DOCUMENTOS ENVIAREM INFORMAÇÃO PARA ELE . VEREMOS USO PRÁTICO DO ELEMENTO NAME MAIS ADIANTE .

EXEMPLO DE SINTAXE :

< FRAME NAME="OSWALDO" >

MARGINWIDTH="VALOR"

DEFINE A MARGEM , ENTRE AS LATERAIS DE UM FRAME E SEU CONTEÚDO . É USADO PARA EVITAR QUE AS COISAS FIQUEM MUITO " APERTADAS " . UM LAYOUT COM DIAGRAMAÇÃO LEVE FICA ELEGANTE EM QUALQUER MÍDIA , FUGINDO DAQUELA CARA DE DIÁRIO OFICIAL .

O VALOR , EM PIXELS , PODE SER QUALQUER NÚMERO ACIMA DE 1 , RESPEITANDO-SE O BOM SENSO , POIS COISAS ESTRANHAS PODEM ACONTECER SE VOCÊ DEFINIR COMO MARGEM DE UM FRAME UM VALOR ACIMA DA LARGURA DO MESMO .

VEJAMOS NOSSA PÁGINA JÁ CONHECIDA , DESTA VEZ FAZENDO USO DO ELEMENTO MARGINWIDTH , CRIANDO UMA MARGEM DE 100 PIXELS EM CADA FRAME . A LISTAGEM É :

< HTML >

< HEAD >

< / HEAD >

< FRAMESET SRC="FRAME1.HTM" MARGINWIDTH="100" >

< FRAMESET SRC="FRAME1.HTM" MARGINWIDTH="100" >

< / FRAMESET >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="FRAME1.HTM" MARGINWIDTH="100" >

< FRAME SRC="FRAME1.HTM" MARGINWIDTH="100" >

< / FRAMESET >

< / FRAMESET >

< / HTML >





FIGURA 9.9 PÁGINA GERADA PELA LISTAGEM ANTERIOR . ELEMENTO MARGINWIDTH COM VALOR DE 100 PIXELS .

NADA IMPEDE QUE VOCÊ DEFINA CADA FRAME COM UMA MARGEM DIFERENTE . NO MAXIMO PODE FICAR FEIO .

MARGINHEIGHT="VALUE"

IDÊNTICO AO MARGINWIDTH , MAS DEFINE A MARGEM VERTICAL DO FRAME .

SCROLLING="YES/NO/AUTO"

DEFINE SE O FRAME TERÁ BARRAS DE ROLAGEM . O DEFAULT É AUTO , OU SEJA , O BROWSER AS INCLUI SE O CONTEÚDO DO FRAME ULTRAPASSAR O TAMANHO DO MESMO .

VEJAMOS , NA LISTAGEM A SEGUIR , COMO FICARIA UMA PÁGINA COM QUATRO FRAMES , SENDO O PRIMEIRO COM O ELEMENTO SCROLLING COM O VALOR "YES" E O QUARTO , COM O VALOR "NO" .

REPARE QUE FOI CRIADA UMA PÁGINA CHAMADA FRAME2.HTM , PARA ENTRAR NO QUARTO FRAME .

< HTML >

< HEAD >

< / HEAD >





< FRAMESET COLS="50%,50%" >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="FRAME1.HTM" SCROLLING="YES" >

< FRAME SRC="FRAME1.HTM" >

< / FRAMESET >

< FRAMESET ROWS="50%,50%" >

< FRAME SRC="FRAME1.HTM" >

< FRAME SRC="FRAME2.HTM" SCROLLING="NO" >

< / FRAMESET >

< / FRAMESET >

< / HTML >

FIGURA 9.10 PÁGINA GERADA PELA LISTAGEM ANTERIOR .

REPARE QUE , COM O ELEMENTO SCROLLING="YES" , O PRIMEIRO FRAME EXIBE BARRAS DE ROLAGEM , MESMO COM ESPAÇO DE SOBRA PARA MAIS DADOS . JÁ O QUARTO FRAME FOI FORÇADO A NÃO EXIBIR AS BARRAS , EMBORA ESTEJA COM MAIS TEXTO DO QUE PODE EXIBIR .

O EXEMPLO DO QUARTO FRAME É PURAMENTE DIDÁTICO . NÃO HÁ MEIO DE VISUALIZAR OS DADOS SEM AS BARRAS . JAMAIS USE O ELEMENTO SCROLLING="NO" EM UM FRAME QUE NECESSITE DE BARRAS DE ROLAGEM .





POR DEFAULT , AS BORDAS DE UM FRAME PODEM SER LIVREMENTE REDIMENSIONADAS PELO USUÁRIO .

ASSIM , CASO A PÁGINA ESTEJA SENDO VISUALIZADA EM UMA RESOLUÇÃO BAIXA , COMO 640X480 , OS DADOS PORVENTURA SEMI-OCULTOS PODEM SER VISUALIZADOS .

USE A OPÇÃO NORESIZE SE O LAYOUT QUE VOCÊ PROJETAR SE ENCAIXAR EM DIVERSAS RESOLUÇÕES .

A TAG < FRAME > , COM A OPÇÃO NORESIZE SERIA :

< FRAME SRC="FRAME1.HTM" >

FIGURA 9.11 PÁGINA IDÊNTICA À ANTERIOR , MAS COM UM FRAME CUJO TAMANHO FOI ALTERADO MANUALMENTE PELO USUÁRIO , AO CLICAR E ARRASTAR A BARRA SEPARATÓRIA ENTRE OS FRAMES .

O ELEMENTO TARGET É UTILÍSSIMO NA CRIAÇÃO DE ÍNDICES E SUMÁRIOS . ELE PODE SER USADO EM CONJUNTO COM QUALQUER TIPO DE TAG QUE DIGA RESPEITO A LINKS . PODE SER UM IMAGEMAP , UMA IMAGEM SIMPLES , OU UMA SIMPLES PALAVRA .





NORMALMENTE , USAMOS UM LINK HTML DA SEGUINTE FORMA :

< A HREF="HTTP://WWW.NETSCAPE.COM" > VISITE A NETSCAPE < / A >

ACIONANDO ESSE LINK , A PÁGINA DA NETSCAPE É CARREGADA EM SEU BROWSER NO LUGAR DA PÁGINA ANTERIOR , ONDE ESTAVA O LINK . COM O ELEMENTO TARGET , ISSO NÃO ACONTECE , POIS A PÁGINA CHAMADA PELO LINK É REDIRECIONADA PARA O FRAME ESPECIFICADO .

IMAGINE QUE TEMOS UMA PÁGINA COM DOIS FRAMES : UM COM OS LINKS E O OUTRO ONDE ESTES SÃO EXIBIDOS . O PRIMEIRO FRAME NÃO TEM NOME , MAS VAMOS BATIZAR , COM O ELEMENTO NAME , O SEGUNDO FRAME . VAMOS CHAMÁ-LO DE ... ASTOLFO .

A DEFINIÇÃO DOS DOIS FRAMES NO DOCUMENTO PRINCIPAL FICARIA ASSIM :

< FRAME SRC="FRAME1.HTM" >

< FRAME SRC="FRAME2.HTM" NAME="ASTOLFO" >

E O LINK PASSARIA A SER :

< A HREF="HTTP://WWW.NETSCAPE.COM" TARGET="ASTOLFO" > VISITE A NETSCAPE < / A >

E O LINK PASSARIA A SER :

< A HREF="HTTP://WWW.NETSCAPE.COM" TARGET="ASTOLFO" > VISITE A NETSCAPE < / A >

VAMOS CONSTRUIR AGORA UMA PÁGINA DEMONSTRANDO COMO ASSOCIAR LINKS COM O ELEMENTO TARGET . USAREMOS O LAYOUT ANTERIOR , COM DOIS FRAMES , SENDO UM DE ÍNDICE E O OUTRO DE EXIBIÇÃO .

--DOCUMENTO ÍNDICE

| FRAME1.HTM

|

DOCUMENTO PRINCIPAL---|

FRAME.HTM |

|

--DOCUMENTO ALVO

FRAME2.HTM

FIGURA 9.12 ESQUEMA DA PÁGINA DE DEMONSTRAÇÃO DO ELEMENTO TARGET .

USAREMOS TRÊS DOCUMENTOS HTML :

* O PRINCIPAL , QUE SERÁ O " ESQUELETO " DA PÁGINA ONDE DEFINIREMOS TAMANHO DOS FRAMES , SEUS NOMES E QUAIS ARQUIVOS SECUNDÁRIOS IRÃO OCUPÁ-LOS . NO CASO , CHAMAREMOS ESSE ARQUIVO DE FRAME.HTM





* O ÍNDICE , QUE EXIBIRÁ OS LINKS , É UM DOS ARQUIVOS HTML SECUNDÁRIOS . ELE É EXIBIDO NO PRIMEIRO FRAME . SERÁ GRAVADO COM O NOME DE FRAME1.HTM .

* O DOCUMENTO ALVO SERÁ ONDE EXIBIREMOS EFETIVAMENTE OS LINKS SELECIONADOS . ESSE DOCUMENTO , NO NOSSO CASO , É BATIZADO DE FRAME2.HTM .

VAMOS A ELES , ANALISANDO MAIS DETALHADAMENTE CADA UM :

FRAME.HTM

< HTML >

< HEAD >

< / HEAD >

< FRAMESET COLS="25%,75%" >

< FRAME SRC="FRAME1.HTM" SCROLLING="NO" >

< FRAME SRC="FRAME2.HTM" NAME="ASTOLFO" >

< / FRAMESET >

< / HTML >

CONFESSE : VOCÊ NUNCA VIU NADA MAIS SIMPLES . NO CASO , COMO É UM DOCUMENTO QUE DEFINE FRAMES DE UMA PÁGINA , NÃO EXISTE TAG < BODY > .

NA LINHA < FRAMESET COLS="25%,75%" > , DIZEMOS QUE A PÁGINA GERADA TERÁ DOIS FRAMES , UM OCUPANDO 25% DA LARGURA , OUTRO OCUPANDO 75% DA LARGURA , COMO NÃO DEFINIMOS DIMENSÃO VERTICAL COM ELEMENTO ROWS , O BROWSER ASSUME QUE OS FRAMES OCUPARÃO TODO O ESPAÇO DISPONÍVEL , DE ALTO A BAIXO .

AS PRÓXIMAS DUAS LINHAS DEFINEM OS FRAMES E SEU CONTEÚDO . O PRIMEIRO , NA LINHA < FRAME SRC="FRAM1.HTM" SCROOLING="NO" > , INDICA QUE O DOCUMENTO FRAME.HTM SERÁ CARREGADO NAQUELE ESPAÇO E QUE NÃO SERÃO EXIBIDAS BARRAS DE ROLAGEM .

A LINHA < FRAME SRC="FRAME2.HTM" NAME="ASTOLFO" > CARREGA , NO SEGUNDO FRAME , O DOCUMENTO FRAME2.HTM E DEFINE O NOME DAQUELE FRAME COMO "ASTOLDO" . O PRIMEIRO FRAME NÃO TEM NOME , POIS NÃO SERÁ UTILIZADO COMO DESTINO DE NENHUM LINK .

A TAG ENCERRA A DEFINIÇÃO DE FRAMES E EM SEGUINDA INDICA O FIM DO DOCUMENTO .

FRAME1.HTM

< HTML >

< HEAD >

< TITLE > TESTE < / TITLE >

< / HEAD >





ESTE DOCUMENTO É ESSENCIAL , MESMO QUE ESTEJA TOTALMENTE VAZIO . SE NÃO EXISTIR UM DOCUMENTO NO FRAME ALVO , ESTE SERÁ EXIBIDO VAZIO E , AO SELECIONARMOS UM LINK , UMA NOVA CÓPIA DO BROWSER SERÁ ABERTA , APESAR DO ELEMENTO TARGET .

É ESSENCIAL QUE O FRAME ALVO CONTENHA ALGUM DOCUMENTO HTML , POR MÍNIMO QUE SEJA . ASSIM , EVITA-SE QUE UM NOVO BROWSER SEJA ABERTO A CADA LINK SELECIONADO .

APÓS A DIGITAÇÃO DOS DOCUMENTOS E DEPOIS QUE CADA UM TIVER SIDO SALVO COM O NOME CORRESPONDENTE , CHAMAMOS , COM O NETSCAPE , O ARQUIVO FRAME.HTM .

FIGURA 9.13 PÁGINA RESULTANTE DAS LISTAGENS ANTERIORES .

AGORA , COM SUA CONEXÃO INTERNET ATIVA , SELECIONE O LINK DA MICROSOFT , POR EXEMPLO . O RESULTADO SERÁ IDÊNTICO AO SEGUINTE :





FIGURA 9.14 PÁGINA RESULTANTE DA SELEÇÃO DO LINK DA MICROSOFT .

E QUEM NÃO SUPORTA FRAMES ?

BOA PERGUNTA , PEQUEMNO GAFANHOTO . E A NETSCAPE PENSOU NISSO . TANTO QUE CRIOU A TAG < NOFRAMES > . QUANDO O BROWSER NÃO RECONHECE OS FRAMES , O CONTEÚDI DELA É EXIBIDO .

VOCÊ TANTO PODE CRIAR UMA PÁGINA COMPLETA , DENTRO DA TAG < NOFRAMES > , QUANTO PODE GERAR APENAS UM AVISO , SOLICITANDO QUE O USUÁRIO INSTALE UM BROWSER DECENTE .

VAMOS INCLUIR A TAG < NOFRAMES > EM NOSSA PÁGINA PRINCIPAL , FRAME.HTM . A LISTAGEM FICARIA ASSIM :

< HTML >

< HEAD >

< / HEAD >

< FRAMESET COLS="25%,75%" >

< FRAME SRC="FRAME1.HTM" SCROLLING="NO" >

< FRAME SRC="FRAME2.HTM" NAME="ASTOLFO" >

< / FRAMESET >

< NOFRAMES >

< BR >

< CENTER >

< H3 >

LAMENTO , MAS SEU BROWSER APARENTEMENTE NÃO SUPORTA O USO DE FRAMES . < BR >





SUGIRO QUE VOCÊ CONSIGA VERSÃO MAIS ATUALIZADA , COMO O NETSCAPE 2.0 .

< / H3 >

< / CENTER >

< / NOFRAMES >

< / HTML >

REPARE QUE A TAG < NOFRAMES > FOI COLOCADA APÓS A DEFINIÇÃO DE TODOS OS FRAMES . ASSIM , A EXIBIÇÃO DOS FRAMES ACONTECE DE FORMA MAIS RÁPIDA , SE FOR O CASO .

A TAG < NOFRAMES > É IGNORADA POR BROWSERS QUE USEM FRAMES , PORTANTO VOCÊ PODE COLOCAR QUALQUER COISA ENTRE ELA E A < / NOFRAMES > .

A PÁGINA , EXIBIDA EM UM BROWSER QUE NÃO SUPORTA FRAMES , COMO O INTERNET EXPLORER 2.0 , FICARIA ASSIM :

FIGURA 9.15 MS INTERNET EXPLORER , AO TENTAR EXIBIR UMA PÁGINA COM FRAMES . SEM O USO DA TAG < NOFRAMES > , NEM ESSA MENSAGEM SERIA EXIBIDA .

REZA A LENDA QUE A MICROSOFT PRETENDE LIBERAR UMA VERSÃO DO EXPLORER COM SUPORTE A FRAMES . ATÉ O TÉRMINO DESTE LIVRO , ISSO AINDA NÃO HAVIA ACONTECIDO .





< BODY >

< H2 > ESCOLHA SEU LINK < / H2 > < BR > < BR >

< A HREF="HTTP://WWW.NETSCAPE.COM/" TARGET="ASTOLFO" > NETSCAPE < / A > < BR > < BR >

< A HREF="HTTP://WWW.MICROSOFT.COM" TARGET="ASTOLFO" > MICROSOFT < / A > < BR > < BR >

< A HREF="HTTP://WWW.SGI.COM" TARGET="ASTOLFO" > SILICON GRAPH - INC < / A > < BR > < BR >

< A HREF="HTTP://WWW.EMBRATEL.NET.BR/INFOSERV//AXCEL;INDEX.HTM" TARGET="ASTOLFO" > AXCEL BOOKS < / A > < BR > < BR >

< A HREF="HTTP://WWW.PLAYBOY.COM" TARGET="ASTOLFO" >PLAYBOY < / A > < BR > < BR >

< A HREF="HTTP://WWW.CENTROIN.COM.BR" TARGET="ASTOLFO" > CENTROIN < / A > < BR > < BR >

< A HREF="HTTP://WWW.MANDIC.COM.BR" TARGET="ASTOLFO" > MANDIC < / A > < BR > < BR >

< / BODY >

< / HTML >

ESTE DOCUMENTO É UMA PÁGINA DE LINKS PADRÃO , COM UMA ÚNICA DIFERENÇA : O ELEMENTO TARGET , QUE INDICA QUE O ALVO DE CADA LINK É O FRAME "ASTOLFO" . AS TAGS < BR > < BR > SERVEM PARA CRIAR UM ESPAÇO ENTRE AS LINHAS .

SE VOCÊ ABRIR O DOCUMENTO FRAME1.HTM DIRETAMENTE , AO SELECIONAR UM LINK , O BROWSER TENTARÁ ACHAR UM FRAME CHAMADO "ASTOLFO" . NÃO ACHANDO , ABRIRÁ UMA NOVA CÓPIA DO BROWSER , CARREGANDO NELA O LINK SELECIONADO . USE ESSA TÉCNICA COM PARCIMÔNIA , POIS OS BROWSERS COMO O NETSCAPE E O INTERNET EXPLORER SÃO UM TANTO GULOSOS E VOCÊ FICARÁ SEM MEMÓRIA MUITO RAPIDAMENTE .

FRAME2.HTM

< HTML >

< HEAD > < TITLE > TESTE < / TITLE >

< / HEAD >

< BODY BGCOLOR="#FFFFFF" >

< CENTER >

< H2 > OS DADOS APARECERÃO AQUI < / H2 >

< BR > < BR > < BR >

< H3 > ESTE FRAME É O ALVO . AS OPÇÕES SELECIONADAS NO FRAME AO LADO SERÃO EXIBIDAS AQUI . < / H3 >

< / CENTER >

< / BODY >

< / HTML >





CAPÍTULO 10

FERRAMENTAS





APÓS A INSTALAÇÃO DE UM KIT , ALÉM DE UMA PILHA DE CAIXAS VAZIAS , DISQUETES DE INSTALAÇÃO E MANUAIS INDECIFRÁVEIS , GERALMENTE O USUÁRIO ACABA COM UMA PENCA DE CDS APARENTEMENTE INÚTEIS . BEM , TIRANDO AQUELE KARAOKÊ IDIOTA , O SEMPRE PRESENTE CARMEN SANDIEGO E A ENCICLOPÉDIA MULTIMÍDIA COM O FILME DO ZEPPELIN PEGANDO FOGO , OS KITS COSTUMAM TRAZER EXCELENTES PROGRAMAS GRÁFICOS .

AQUELE GAROTO QUE SÓ USA O KIT PRA JOGAR DOOM E JOGOU O CD DA ALDUS NO FUNDO DO ARMÁRIO É UMA BOA VÍTIMA . SUBORNE-O , AMEACE-O , FAÇA QUALQUER COISA , MAS CONSIGA O CD .

EM UM PACOTE SÓ , VOCÊ ENCONTRA DE GRAÇA : ALDYS PHOTOSTYLER , ALDUS GALLERY EFFECTS , KAY POWER TOOLS ( O POPULAR KAPETA ) , ALTAMIRA COMPOSER , DIGITAL MORPH , UM TUTORIAL COMPLETO EM VÁRIAS LÍNGUAS E MAIS ALGUMAS OUTRAS PRECIOSIDADES .

CONSIGA ESSE CD , VOCÊ NÃO VAI SE ARREPENDER .

HOTDOG PRO V2.07

FIGURA 10.1 ABERTURA DO HOTDOG, O MELHOR EDITOR HTML DA ATUALIDADE .





EXCELENTE EDITOR HTML , DA SAUSAGE SOFTWARE . MUITO FÁCIL DE USAR , COM UM ÓTIMO TUTORIAL , UM HELP EXEMPLAR E CARACTERÍSTICAS EXTREMAMENTE ATRAENTES , COMO CONVERSÃO AUTOMÁTICA DE CARACTERES ACENTUADOS EM CARACTERES ESTENDIDOS HTML . VOCÊ DIGITA "Ã" E AUTOMATICAMENTE É TRADUZIDO PARA "&ATILDE;" . SÃO MAIS DE 50 OPÇÕES DE PERSONALIZAÇÃO NO SETUP E VOCÊ PODE CRIAR SUAS PRÓPRIAS TAGS . À MEDIDA QUE O HTML AVANÇA , NÃO É PRECISO ESPERAR UPGRADES DO SOFTWARE . JUNTE A ISSO UM VERIFICADOR DE SINTAXE E UM EDITOR DE TABELAS E FORMULÁRIOS QUE CAIU D CÉU , SEM ESQUECER OUTRAS OPÇÕES AVANÇADAS , A UM CLIQUE DE DISTÂNCIA . O HOTDOG É ESSENCIAL .

A VERSÃO ATUAL É PARA WINDOWS 3.11 , MAS ELE É MUITO BEM COMPORTADO E RODA BEM NO WINDOWS 95 .

SÓ PARA FINS DE INFORMAÇÃO , O HOTDOG FOI CRIADO POR UM CARINHA DE 22 ANOS CHAMADO STEVE OUTTRIM . EM SETE MESES O QUE ERA UMA EMPRESA DE UM HOMEM SÓ SE TRANSFORMOU EM UM SOFTHOUSE COM 50 FUNCIONÁRIOS , COM FATURAMENTO PREVISTO PARA 95/96 DE 5 MILHÕES DE DÓLARES E EMPREGANDO GENTE NA MÉDIA DE 3 FUNCIONÁRIOS NOVOS POR SEMANA .

O HOTDOG É UMA GRANDE FERRAMENTA DE PRODUTIVIDADE , POIS CONTA COM TUDO QUE É PRECISO PARA CODIFICAR UM DOCUMENTO HTML , DE FORMA RÁPIDA . AO CONTRÁRIO DE OUTROS EDITORES , VOCÊ TANTO PODE INSERIR SUAS TAGS USANDO OS ÍCONES , COMO PODE DIGITÁ-LAS DIRETAMENTE NO DOCUMENTO .

FIGURA 10.2 LAYOUT DO HOTDOG .





O LAYOUT É SIMPLES MAS EFICIENTE . AO PÉ DA PÁGINA EXISTEM GUIAS PARA CADA DOCUMENTO ABERTO E A QUANTIDADE DELES DEPENDE APENAS DA MEMÓRIA DA SUA MÁQUINA E DO SEU BOM SENSO . NO MESMO FILE EXISTE UMA OPÇÃO FANTÁSTICA : SAVE ALL . COM ELA , VOCÊ SALVA VÁRIAS PÁGINAS AO MESMO TEMPO , SEM PRECISAR SELECIONAR UMA A UMA .

NA PARTE DE CIMA , EXISTEM DUAS LINHAS DE ÍCONES . VEJAMOS PRIMEIRO A MENOS :

BARRA DE ÍCONES INFERIOR

FIGURA 10.3 BARRA DE ÍCONES DO HOTDOG

NESSA BARRA , TEMOS ÍCONES PARA ABRIR , SALVAR , IMPRIMIR E CRIAR DOCUMENTOS . NA CRIAÇÃO DE DOCUMENTOS NOVOS , O SOFTWARE JÁ INCLUIU O ESQUELETO DE UMA PÁGINA HTML , COMO AS TAGS < HTML > , < HEAD > E < TITLE > . HÁ ÍCONES PARA COPIAR E RECUPERAR DADOS DO CLIPBOARD E DEPOIS TAG DE FORMATAÇÃO . O B EM NEGRITO FORMATA OS CARACTERES COMO BOLD . EM SEGUIDA , ITÁLICO , SUBLINHADO , OS SEIS NÍVEIS DE CABEÇALHO , ALINHAMENTO , LISTAS , PARÁGRAFOS , A BOA E VELHA < BR > PARA QUEBRA DE LINHA , LINHAS HORIZONTAIS E AQUELE CACHORRINHO É UM SINGELO PEDIDO DO PESSOAL DA SAUSAGE SOFTWARE . CLIQUE NELE E SERÁ INSERIDO UM LINK , COM IMAGEM E TUDO , EXPLICANDO QUE AQUELE DOCUMENTO FOI CRIADO COM O HOTDOG PRO . SE DEVEMOS USÁ-LO ? VOCÊ DECIDE .

A VANTAGEM DOS ÍCONES É A ECONOMIA DA DIGITAÇÃO . BASTA VOCÊ MARCAR COM O MOUSE UMA ÁREA DO TEXTO E CLICAR NO ÍCONE DESEJADO . A TAG É AUTOMATICAMENTE POSICIONADA . HÁ TAMBÉM UMA REDUÇÃO NOS ERROS DE DIGITAÇÃO , QUE EMBORA NÃO SEJAM CRÍTICOS EM HTML , SÃO DESAGRADÁVEIS .

BARRA DE ÍCONES SUPERIOR

FIGURA 10.4 BARRA DE ÍCONES SUPERIOR .





NELA TEMOS AS OPÇÕES MAIS COMPLEXAS . COM O PRIMEIRO ÍCONE , O PREVIEW , PODEMOS VISUALIZAR O DOCUMENTO DIRETAMENTE NO BROWSER . COM UM CLIQUE , CHAMA-SE O NETSCAPE , JÁ COM NOSSO ARQUIVO CARREGADO .

O ÍCONE TAGS TRAZ UMA LISTA COM AS TAGS RECONHECIDAS PELO HOTDOG E MAIS AS QUE VOCÊ ACRESCENTAR . O CHARSET PERMITE QUE VOCÊ INCLUA TODOS AQUELES CARACTERES ACENTUADOS OU DIFERENTES , SEM PRECISAR DECORAR AQUELA TABELA DE &ATIL E OUTROS NOMES ESQUISITOS . TEMOS TAMBÉM UM MINIGERENCIADOR DE ARQUIVOS , TAGS PARA CONSTRUÇÃO DE LINKS EXTERNOS E INTERNOS , TAGS PARA A CRIAÇÃO DE " ALVOS " PARA LINKS INTERNOS , INSERÇÃO DE IMAGENS E OBJETOS OLE .

LEMBRA-SE DAQUELAS INFINDÁVEIS OPÇÕES NOS CAPÍTULO 4 E 57 . BEM , COM O HOTDOG FICA MAIS CÔMODO TRABALHAR COM ESSAS TAGS . BASTA POSICIONAR O CURSOR NA PARTE DO DOCUMENTO ONDE QUEREMOS INSERIR O FORMULÁRIO E CLICAR NO ÍCONE FORM . SERÁ APRESENTADA A SEGUINTE JANELA :

FIGURA 10.5 JANELA DE CRIAÇÃO DE FORMULÁRIOS .

A CRIAÇÃO DE FORMULÁRIOS TORNA-SE BEM MAIS AMIGÁVEL , COM O HOTDOG . COM TABELAS , O PROCEDIMENTO É SEMELHANTE . NADA DE ESTRUTURAR ENORMES TABELAS NA MÃO . CLIQUE NO ÍCONE CORRESPONDENTE E APARECERÁ A JANELA :





FIGURA 10.6 EDITOR DE TABELAS DO HOTDOG .

TODOS OS ELEMENTOS ESTÃO AÍ E PODEM SER MODIFICADOS COM UM CLIQUE .

A JANELA OPTIONS DO HOTDOG POR SI SÓ RENDERIA UM LIVRO , POIS SÃO MUITAS OPÇÕES DE CONFIGURAÇÃO , TODAS ÚTEIS . TALVEZ A MAIS PRÁTICA SEJA A " CONVERT EXTEDED CHARACTERES WHILE TYPING " , QUE PERMITE QUE VOCÊ DIGITE SEU TEXTO NORMALMENTE , EM BOM PORTUGUÊS , ENQUANTO O HOTDOG CONVERTE AUTOMATICAMENTE TUDO PARA AQUELE FORMATO ESQUISITO .

ESSA OPÇÃO TAMBÉM É VÁLIDA PARA TEXTO QUE ENTRA VIA CLIPBOARD . FAÇA A EXPERIÊNCIA , SELECIONE A OPÇÃO , JOGUE , COM O COMANDO COPY DE SEU EDITOR DE TEXTOS UMA QUANTIDADE ABSURDA DE PALAVRAS PARA O CLIPBOARD E NO HOTDOG , SELECIONE EDIT / PASTE VEJA COMO O COITADO SOFRE , CONVERTENDO TUDO .





FIGURA 10.7 JANELA OPTIONS NO HOTODOG , COM A OPÇÃO PARA CONVERTER CARACTERES ACENTUADOS SELECIONADA . CERTIFIQUE-SE DE QUE ELA SEMPRE ESTEJA ASSIM .

VOCÊ AINDA ENCONTRA UMA OPÇÃO PARA MARCAR NO MENU FILE , COM CORES DIFERENTES , TAGS HTML PADRÃO DO NETSCAPE , DO MS EXPLORER , OU QUALQUER OUTRA QUE VOCÊ SELECIONE . MUITO ÚTIL PARA CALCULAR A POSSIBILIDADE DO SEU DOCUMENTO SER LIDO NO MAIOR NÚMERO POSSÍVEL DE BROWSERS . HÁ TAMBÉM UMA OPÇÃO PARA REMOVER TODAS AS TAGS DE UM DOCUMENTO , TRANSFORMANDO-O EM UM TEXTO PADRÃO .

CONSIGA O HOTDOG E PESQUISE AS OPÇÕES . SÃO FANTÁSTICAS . COM CERTEZA VOCÊ IRÁ SE APAIXONAR POR ESSE PROGRAMINHA .

ELE PODE SER ENCONTRANDO EM QUASE TODO BBS , OU ENTÃO RETIRADO DIRETAMENTE DO SITE DA SAUSAGE SOFTWARE , EM HTTP://WWW.SAUSAGE.COM . É UM SHAREWARE , COM TEMPO DE USO DE 30 DIAS . AO TÉRMINO , VOCÊ PODE COMPRÁ-LO , OU PEDIR UMA PRORROGAÇÃO DE MAIS 15 DIAS .





PAINT SHOP PRO V3.11

FIGURA 10.8 ALGUNS DOS EFEITOS CONSEGUIDOS COM O PAINT SHOP PRO .

SE VOCÊ TEM NECESSIDADES DIGNAS DE UM PHOTOSHOP , PODE PERFEITAMENTE SE ATER AO PSP . ELE PERMITE A CRIAÇÃO DE GIFS TRANSPARENTES E TEM EFEITOS COMO ANTIALIASING , CONTROLE DE COR , DIVERSAS DEFORMAÇÕES ESPACIAIS , MEMÓRIA VIRTUAL EM DISCO E ACESSO A PLUG-INS PADRÃO DO PHOTOSTYLER / PHOTOSHOP .

NAS FUNÇÕES DE TEXTO , PODE-SE TRABALHAR COM TODAS AS FONTES DO WINDOWS , INCLUSIVE COM SOMBRAS . MÁSCARAS E FILTROS TAMBÉM ESTÃO DISPONÍVEIS , JUNTO COM ACESSO A SCANNERS TWAIN E SUPORTE A MAIS DE 30 FORMATOS DIFERENTES DE ARQUIVO , INCLUSIVE TENDO A CAPACIDADE DE LER UM ARQUIVO .CDR , DO CORELDRAW! E TRANSFORMÁ-LO EM BITMAP!

O PSP PERMITE QUE UM PLUG-IN COMO O KPT SEJA FACILMENTE INTEGRADO AO SISTEMA . BASTA QUE VOCÊ INDIQUE , NO MENU PREFERENCES , ONDE SE ENCONTRAM OS ARQUIVOS DO MESMO . VEJA NO EXEMPLO ABAIXO COMO INDIQUEI AO PSP QUE O KPT SE ENCONTRAVA NO DIRETÓRIO C:\WIN16\KAPETA :





FIGURA 10.9 MENU PREFERENCES , OPÇÃO GENERAL , NO PAINT SHOP PRO .

MESMO SE VOCÊ NÃO POSSUIR O KAY POWER TOOLS , OS EFEITOS NATIVOS DO PSP JÁ SÃO MUITO INTERESSANTES , CONTANDO INCLUSIVE COM DEFORMAÇÕES ESPACIAIS E PERSPECTIVA . VEJA , NO EXEMPLO , COMO O EFEITO ERODE PODE SER USADO PARA SIMULAR UMA PINTURA A ÓLEO .

FIGURA 10.10 USO DO COMANDO ERODE E SUA LOCALIZAÇÃO .

O PSP PODE SER BAIXADO DA JASC , INC . PRODUTORA DO MESMO . O ENDEREÇO É :

HTTP://WWW.JASC.COM/INDEX.HTML





PAINT SHOP PRO BROWSER

FIGURA 10.11 EXEMPLO DO PAINT SHOP PRO BROWSER

ACOMPANHANDO O PAINT SHOP , UM SINGELO PROGRAMA PARA ADMINISTRAR COLEÇÕES DE IMAGENS . ELE ATUALIZA AUTOMATICAMENTE CADA VEZ QUE UM DIRETÓRIO É ACESSADO , DELETA , RENOMEIA , COPIA E MOVE ARQUIVO , E AINDA ENVIA A IMAGEM SELECIONADA DIRETAMENTE PARA O PAINT SHOP .

ESSE PROGRAMINHA É MAIS EFICIENTE COMO GERENCIADOR DE THUMBNAILS DO QUE , POR EXEMPLO , O COREL MOSAIC .

NO MENU FILE TEMOS A OPÇÃO SORT , QUE PERMITE ORDENAR OS THUMBNAILS DE ACORDO COM DIVERSOS CRITÉRIOS , INCLUSIVE LARGURA .





FIGURA 10.12 OPÇÃO SORT . COM VARIADAS ALTERNATIVAS DE ORDENAÇÃO .

NA OPÇÃO PREFERENCES / GENERAL PREFERENCES VOCÊ DEFINE O TAMANHO DOS THUMBNAILS E SE DESEJA QUE OS DIRETÓRIOS SEJAM ATUALIZADOS AUTOMATICAMENTE , CADA VEZ QUE SÃO EXIBIDOS , ISSO É MUITO ÚTIL , SE VOCÊ TRABALHA COM VÁRIOS DIRETÓRIOS DE IMAGENS E NÃO QUER FICAR LEMBRANDO QUAIS ESTÃO ATUALIZADOS .

TAMBÉM EXISTE A OPÇÃO " SAVE BROWSER FILES " . ELA GRAVA , EM CADA DIRETÓRIO PESQUISADO , UM PEQUENO ARQUIVO COM OS THUMBNAILS AQUELE LOCAL . CASO NADA TENHA SIDO ALTERADO , A EXIBIÇÃO É BEM RÁPIDA . HAVENDO ALTERAÇÃO , O PROGRAMA SÓ LERÁ OS ARQUIVOS NOVOS . OS ANTIGOS JÁ ESTÃO GRAVADOS NO ARQUIVO PSPBRWSE.JBF .

FIGURA 10.13 JANELA GENERAL OPTION , NO MENU FILE .





O FUNCIONAMENTO DO PSP BROWSE SE RESUME A : EXECUTE O PROGRAMA , VÁ AO MENU FILE/NEW DIRECTORY , ESCOLHA SEU DIRETÓRIO COM AS IMAGENS E CLIQUE OK . O RESTO ELE FAZ . SE QUISER CHAMAR O PSP , CARREGANDO UMA FIGURA SELECIONADA , CLIQUE DUAS VEZES NO THUMBNAIL . NÃO HÁ COMO ERRAR .

MAP THIS!

FIGURA 10.14 EXCELENTE EDITOR DE IMAGEMAPS . E GRÁTIS !

EDITOR DE IMAGEMAPS FREEWARE , DESENVOLVIDO POR TODD C. WILSON , UM PROGRAMADOR TÃO HABILIDOSO QUANTO BEM-HUMORADO . TEM TUDO QUE VOCÊ PRECISA PARA PRODUZIR IMAGEMAPS DE VÁRIOS TIPOS , INCLUSIVE OS RECENTES CGI , PROGRAMAS EM C E A BOA VONTADE DO ADMINISTRADOR DO SEU SITE QUANDO ALGUMA COISA NÃO DÁ CERTO .

O MAP THIS! SE DÁ AO LUXO DO PRODUZIR O CÓDIGO HTML PRONTO , VOCÊ SÓ PRECISA RECORTAR E COLAR .

PARA UMA DEMONSTRAÇÃO PASSO - A PASSO DO USO DO MAP THIS! , NÃO DEIXE DE VER A EXPLICAÇÃO SOBRE IMAGEMAPS , NO CAPÍTULO 7 .

VOCÊ PODE CONSEGUIR UMA CÓPIA NOVINHA DO MAPTHIS! DIRETAMENTE NO SITE DO PROGRAMADOR , NO ENDEREÇO :





HTTP://WWW.ECAETC.OHIO-STATE.EDU/TC/MT/

SÓ NÃO SE ESQUEÇA DE ESCREVER AGRADECENDO !!

KAI 'S POWER TOOLS

FIGURA 10.15 GERADOR DE TEXTURAS DO KPT . REPARE NO FUNDO " ZEBRINHA " CONSEGUINDO COM UM MÍNIMO DE ESFORÇO .

O XODÓ DOS DESIGNERS É UM CONJUNTO DE PLUG-INS PARA PROGRAMAS DE EDIÇÃO DE IMAGENS .

O KPT SÓ FALTA FALAR , MAS DIZEM QUE ESTÃO RESOLVENDO ISSO PARA A PRÓXIMA VERSÃO .

A VERSÃO QUE VEM COM OS KITS MULTIMÍDIA É COMPOSTA DE MAIS DE 20 FILTROS DIFERENTES , QUE VÃO DE FERRAMENTAS DE DISTORÇÃO ATÉ EDITORES DE TEXTURAS E GRADIENTES . O KPT PODE SER FACILMENTE ACESSADO DE DENTRO DE VÁRIOS PROGRAMAS , COMO O PHOTOSHOP , O PHOTOSTYLER , E O PAINT SHOP PRO .

TODOS OS EFEITOS NA FOTO DE APRESENTAÇÃO DO PAINT SHOP PRO FORAM FEITOS NO KPT .

ALÉM DE SER ALTAMENTE PERSONALIZÁVEL , O KPT VEM COM CENTENAS DE PADRÕES DE TEXTURAS , FUNDOS E GRADIENTES PRONTOS . BASTA CLICAR E APLICAR .





FIGURA 10.16 USO DE TEXTURA E GRADIENTES PRONTOS . BASTOU CLICAR E ACRESCENTAR O TEXTO , EM PRETO , COM A FERRRAMENTA CORRESPONDENTE .

PROCURE CONSEGUIR O KPT ATRAVÉS DO CD QUE ACOMPANHA ALGUNS KITS MULTIMÍDIA . VENDIDO COMO PACOTE ISOLADO , TALVEZ MESMO POR SER MUITO BOM , ELE CUSTA MUITO CARO .

EDIT.COM

FIGURA 10.17 ELE MESMO . O EDIT.COM , QUE TIO BILL TÃO GRACIOSAMENTE INCLUIU NO DOS E NO WINDOWS 95 .





ISSO MESMO QUE VOCÊ ESTÁ LENDO . O BOM E VELHO EDIT.COM DO DOS , QUE VINHA JUNTO COM O QBASIC . AFINAL , É UM EDITOR DE TEXTO VELOZ , CUMPRE TODAS AS FUNÇÕES DE UM PROGRAMA USADO EM EDIÇÃO DE LISTAGENS , FAZ SEARCH - AND - REPLACE COMO NINGUÉM E NA VERSÃO DISTRIBUÍDA COM O WINDOWS 95 ACEITA NOMES GRANDES DE ARQUIVO E DIVERSOS DOCUMENTOS ABERTOS SIMULTANEAMENTE . NÃO SEI O QUE OS PROGRAMADORES QUISERAM PROVAR COM ELE , MAS CONSEGUIRAM . MELHOR TER O EDIT ABERTO EM UMA , OU MENOS EM DUAS JANELA DO DOS , DO QUE DEPENDER DE SOLUÇÕES MAIS LENTAS E MENOS OBJETIVAS , COMO O NOTEPAD OU O WRITE .

HÁ USUÁRIOS QUE PREFEREM O XTGOLD , MAS ISSO PE UMA QUESTÃO DE GOSTO . USE A FERRAMENTA QUE MELHOR SE ADAPTA A VOCÊ .





CAPÍTULO 11

ANIMAÇÕES





FIGURA 11.1 ALGUNS QUADROS DE UMA ANIMAÇÃO BEM-HUMORADA , DISPONÍVEIS NO ENDEREÇO HTTP://WWW.TCD.NET/~RBENNET9/SPIDER.HTML .

NESTE CAPÍTULO MEU CARO ASPIRANTE A WALT DISNEY , VOCÊ VERÁ COMO TER ACESSO AO MELHOR DE DOIS MUNDOS : INSERIR ANIMAÇÕES EM DOCUMENTOS HTML , SEM QUE ELE SE TORNE TOTALMENTE INCOMPATÍVEL COM OUTROS BROWSERS . CLARO , NÃO EXISTE SUBSTITUTO PARA UM BOM ILUSTRADOR , SE VOCÊ QUISER CRIAR ANIMAÇÕES TOTALMENTE ORIGINAIS . MAIS, MESMO NÃO SABENDO DESENHAR , É POSSÍVEL CHEGAR A RESULTADOS INTERESSANTES .

TIPOS DE ANIMAÇÃO

EXISTE UMA ENORME VARIEDADE DE PLUG-INS , QUE EXERCEM A FUNÇÃO DE ANIMADORES . MAS A QUASE TOTALIDADE DAS ANIMAÇÕES ENCONTRADAS NA WWW É FEITA POR UM DOS SEGUINTES MÉTODOS :

* SERVER PUSH

* JAVA

* GIFS 89A

VAMOS ANALISAR CASA UM DELES .

SERVER PUSH

TEORICAMENTE É O MELHOR MÉTODO . O BROWSER CONECTA-SE COM O SERVIDOR WWW E , AO REQUISITAR UMA ANIMAÇÃO O CANAL ENTRE ELES NÃO É FECHADO ; O SERVIDOR PASSA , ENTÃO , A ENVIAR OS QUADROS UM - A - UM E ELES SÃO EXIBIDOS À MEDIDA EM QUE CHEGAM .

OS PROBLEMAS APARECEM QUANDO DEIXAMOS O MUNDO DA TEORIA . ENVIAR UMA SEQUÊNCIA ININTERRUPTA DE QUADROS É UM ESFORÇO A MAIS PARA O SERVIDOR , AS CONDIÇÕES DAS LINHAS GERALMENTE SÃO INSTÁVEIS E A TAXA MÁXIMA DE VELOCIDADE , ACESSANDO-SE A 14400 , FICA ENTRE 1 E 1,5 KB . NÃO É O QUE SE POSSA CHAMAR DE TORRENTE DE INFORMAÇÃO , POIS UMA IMAGEM GIF OU JPG MÍNIMA TEM PELO MENOS 800 BYTES . PARA PIORAR , QUAISQUER OUTROS DADOS QUE SEJAM SOLICITADOS PELO BROWSER , OU AINDA ESTEJAM SENDO CARREGADOS , AFETAM A VELOCIDADE DA ANIMAÇÃO . SE O SEU SERVIDOR É UMA ESTAÇÃO SILICON GRAPHICS POWER CHALLENGER E TODOS OS SEUS USUÁRIOS ACESSAM A INTERNET VIA LINHA T1 , DE 1MB , USE ESTE FORMATO DE ANIMAÇÃO . DO CONTRÁRIO , ESQUEÇA .





UM EXEMPLO DE ANIMAÇÃO NO FORMATO SERVER PUSH PODE SER ENCONTRADO NO ENDEREÇO HTTP://HILLARYSHAIR.COM/INDEX.SHTML

FIGURA 11.2 EXEMPLO DE ANIMAÇÕES COM O MÉTODO SERVER PUSH .

ACREDITE SE QUISER , É UMA PÁGINA SOBRE OS TIPOS DE PENTEADO DE HILLARY CLINTON . ESPERO QUE VOCÊ ACESSE ESTA PÁGINA BEM CEDO , PELA MANHÃ , SE QUISER VER ALGO MINIMAMENTE ANIMADO .

JAVA

AS ANIMAÇÕES EM JAVA ESTÃO SE ESPALHANDO PELA INTERNET . SÃO INTERESSANTES , PODEROSAS E EXISTEM PACOTES ESPECÍFICOS PARA PRODUZÍ-LAS , COM UM MÍNIMO DE ESFORÇO . MAS CLARO , HÁ A PARTE RUIM : NEM TODOS OS BROWSERS A SUPORTAM E SUA ANIMAÇÃO PODE MUITO BEM NUNCA SER VISTA , SE O USUÁRIO ACESSAR COM O SOFTWARE " ERRADO " . ALÉM , OBVIAMENTE , DO TEMPO EXCESSIVO DO ÍNICIO DO DOWNLOAD , ATÉ A EXIBIÇÃO DA ANIMAÇÃO . MUITAS VEZES A PÁGINA JÁ ESTÁ TODA MONTADA E A ANIMAÇÃO AINDA ESTÁ SENDO CARREGADA . E COMO TODA APLICAÇÃO JAVA , AS ANIMAÇÕES NÃO SÃO FAMOSAS POR SUA VELOCIDADE DE EXECUÇÃO .





EXISTEM BOAS PÁGINAS FAZENDO USO DE JAVA E SE VOCÊ VOLTAR NA FIGURA 1 - 7 , LÁ NA FRENTE , VERÁ A PÁGINA DA GAMELAN , ONDE AQUELA ELEGANTE LOGOMARCA FICA GIRANDO NO CANTO SUPERIOR ESQUERDO . CLARO , VOCÊ SÓ VERÁ SE ESTIVER USANDO O NETSCAPE 2.0 E EM VERSÃO 32 BITS . ISSO RESTRINGE DE FORMA PROIBITIVA O USO DO JAVA , POR ENQUANTO . BANCANDO NOVAMENTE O JULIO VERNE , ACREDITO QUE DAQUI A UNS 2 OU 3 ANOS , ATÉ TELEVISÕES " FALARÃO " JAVA .

UMA PÁGINA COM DIVERSAS ANIMAÇÕES EM JAVA PODE SER ENCONTRADA NA SAUSAGE SOFTWARE EM HTTP://WWW.SAUDAGE.COM , QUE AGORA , ALÉM DO HOTDOG , PRODUZ O ERGO , UM APLICATIVO JAVA PARA ANIMAÇÃO .

FIGURA 11.3 PÁGINA DA SAUSAGE SOFTWARE , COM VÁRIAS ANIMAÇÕES SOBRE O TEMA SALSICHAS .

GIF89A

UM POUCO DE HISTÓRIA : HÁ MUITO TEMPO , EM UMA SOFTHOUSE DISTANTE , UM GRUPO DE PROGRAMADORES RECEBEU UMA MISSÃO : CRIAR UM FORMATO PARA ARQUIVOS GRÁFICOS QUE FOSSE RÁPIDO , COMPACTO , VERSÁTIL E PREVISSE INOVAÇÕES TECNÓLOGICAS RECÉM-SAÍDAS DOS MAIS AVANÇADOS LABORATÓRIOS . ISSO FOI EM 1987 .





EIS QUE FOI PRODUZIDO O FORMATO GIF87A .GIF , PARA OS ÍNTIMOS . ENTRE OUTRAS CARACTERÍSTICAS INTERESSANTES , O GIF APRESENTAVA :

* COMPREENSÃO DE DADOS EMBUTIDA ;

* POSICIONAMENTO DE IMAGEM DENTRO DE UMA " ÁREA DE TELA VIRTUAL " ;

* IMAGENS ENTRELAÇADAS ;

* 256 CORES SIMULTÂNEAS .

O ÚLTIMO TÓPICO PODE PARECER SINGELO , VISTO DE 1996 , ÉPOCA DE PLACAS DE VÍDEO DE 4MB E ARQUIVOS JPEG COM 16 MILHÕES DE CORES . MAS EM 1987 ERA O MÁXIMO!

O TÓPICO MAIS INTERESSANTE FICA PARA O FINAL : OS PROJETISTAS INCLUÍRAM UMA OUTRA CARACTERÍSTICA NO GIF87A :

* MÚLTIPLAS IMAGENS COMPRIMIDAS EM UM ÚNICO ARQUIVO .

OU SEJA : O ARQUIVO ANIM.GIF PODE CONTER 240 IMAGENS , O QUE GARANTIRIA PELO MENOS 10 SEGUNDOS DE ANIMAÇÃO . O QUE PARECE POUCO , MAS JURASSIC PARK INTEIRO TEM BEM MENOS DE 10 MINUTOS DE DINOSSAUROS ANIMADOS .

DOIS ANOS MAIS TARDE , OS PROGRAMADORES REFINARAM AINDA MAIS O FORMATO , CRIANDO A POSSIBILIDADE DE GIFS TRANSPARENTES , COMO VIMOS ANTERIORMENTE , E INTRODUZIRAM UM BLOCO DE CONTROLE , QUE DETERMINA DURANTE QUANTOS CENTÉSIMOS DE SEGUNDO CADA IMAGEM DE UM GIF ANIMADO SERÁ EXIBIDA . O FORMATO OTIMIZADO FOI CHAMADO DE GIF89A .

DURANTE MUITO TEMPO , OS HACKERS DE PLANTÃO PRODUZIRAM TONELADAS DE GIFS ANIMADOS E PROGRAMAS COMO O BOM E VELHO CSHOW ERAM CAPAZES DE EXIBI-LAS . COM O PASSAR DO TEMPO , APARECERAM FORMATOS MAIS SOFISTICADOS , COMO O .FLI E .FLC , DA AUTODESK E O FORMATO FOI ESQUECIDO .

ATÉ QUE , UM BELO DIA , A NETSCAPE COMMUNICATIONS ESTAVA PROJETANDO SEU FAMOSO BROWSER .

QUANDO FORAM INCLUIR O SUPORTE A IMAGENS EM FORMATO GIF , FIZERAM UM BOM TRABALHO , POIS INCLUÍRAM QUASE TODAS AS CARACTERÍSTICAS DO FORMATO GIF , INCLUSIVE A ANIMAÇÃO .

ISSO PASSOU QUASE UM ANO DESPERCEBIDO , ATÉ QUE UM USUÁRIO DESCOBRIU E ESCREVEU PARA A NETSCAPE AVISANDO DESSA POSSIBILIDADE . IMEDIATAMENTE PASSARAM A PRESTAR ATENÇÃO AO FORMATO E QUASE TODOS OS BUGS FORAM SISTEMATICAMENTE ELIMINADOS , ATÉ A VERSÃO 2.0 FINAL DO BROWSER .





AS VANTAGENS DA ANIMAÇÃO COM GIF89A SÃO :

* UM ÚNICO ARQUIVO CONTÉM TODOS OS QUADROS ;

* CONTROLE INDIVIDUAL DE CADA QUADRO ;

* APÓS SER CARREGADA , A ANIMAÇÃO É EXECUTADA DIRETO DO CACHE , NÃO NECESITANDO SEQUER DE UMA CONEXÃO INTERNET ATIVA ;

* O ESFORÇO PARA O BROWSER É BEM MENOR ;

* NÃO HÁ ESFORÇO EXTRA PARA O SERVIDOR . O ARQUIVO É TRATADO COMO QUALQUER OUTRO ARQUIVO GRÁFICO ;

* NADA DE PROGRAMAÇÃO . AS FERRAMENTAS SÃO SIMPLES DE USAR .

A VANTAGEM PRINCIPAL DAS ANIMAÇÕES GIF É QUE MESMO QUE O BROWSER DO USUÁRIO NÃO SUPORTE O FORMULÁRIO DO GIF ANIMADO , A IMAGEM É EXIBIDA COMO UM GIF NORMAL , EMBORA APENAS O PRIMEIRO QUADRO SEJA MOSTRADO . ASSIM , PLANEJANDO BEM A ANIMAÇÃO , SEU DOCUMENTO NÃO FARÁ FEIO EM NENHUM BROWSER .

PARA VER EXEMPLOS DE ANIMAÇÕES GIF , VISITE A PÁGINA DA MICROMOVIE MINIMULTIPLEX , DEDICADA A DIVULGAR TÉCNICAS E DISTRIBUIR MILHARES DE ÍCONES E IMAGENS , DE FORMA GRATUITA . PESQUISE A BIBLIOTECA DE ÍCONES ANIMADOS , USE E ABUSE . E DIVULGUE O ENDEREÇO DELES , QUE É : HTTP://WWW.TELEPORT.COM/~COOLER/MMMM/MMMM.HTML

FIGURA 11.4 PÁGINA DA MMMM , COM ÍCONES ANIMADOS , EXEMPLOS E TUTORIAIS . TUDO FREEWARE . PEGUE E USE .





COMO INSERIR UMA ANIMAÇÃO GIF EM SUA PÁGINA

BASTA VOCÊ USAR UMA TAG NORMAL , COMO :

< IMG SRC="ARQUIVO.GIF" >

O EFEITO COLATERAL BENÉFICO É QUE É UMA TAG HTML PADRÃO E QUALQUER BROWSER A ENTENDERÁ , MESMO QUE NÃO ANIME O GIF .

CASO VOCÊ DESEJE CAPTURAR UMA ANIMAÇÃO PRONTA , BASTA CLICAR COM O BOTÃO DIREITO DE SEU NETSCAPE EM CIMA DA IMAGEM A SER " EMPRESTADA " E SELECIONAR A OPÇÃO " SAVE IMAGE AS " . NÃO HÁ PROBLEMA NENHUM NO FATO DE A IMAGEM ESTAR ANIMADA . SERÁ GRAVADA EM SEU HD COMPLETA , PRONTA PARA SER EXECUTADA .

FERRAMENTAS

SÃO NECESSÁRIOS DOIS PROGRAMAS PARA PRODUZIR UMA ANIMAÇÃO GIF . O PRIMEIRO É O GCS , GIF CONSTRUCTION SET , DA ALCHEMY SOFTWARE , PRODUTORES DO GRAPHIC WORK-SHOP . O GCS É A MELHOR APLICAÇÃO ATUAL PARA CRIAR ANIMAÇÕES GIF , E DE QUEBRA ELE AINDA FAZ TRANSPARÊNCIAS E OUTROS EFEITOS . ANTES DE IR ADIANTE , PASSE NA PÁGINA DA ALEHEMY SOFTWARE E PEGUE A VERSÃO MAIS RECENTE DO GCS . EM MARÇO DE 1996 ESTAVA DISPONÍVEL A 1.0D . O GRAPHIC CONSTRUCTION SET NÃO É FREEWARE . É BOOKWARE . O PAGAMENTO SE RESUME A VOCÊ COMPRAR UM EXEMPLAR DE UM LIVRO DO CRIADOR DO PROGRAMA . CURIOSO , NÃO ?

O ENDEREÇO DA ALCHEMY SOFTWARE É :

HTTP://WWW.NORTH.NET/ALCHEMY/ALCHEMY.HTML





FIGURA 11.5 PÁGINA DA ALCHEMY SOFTWARE . LAR DO GIF CONSTRUCTION SET E OUTROS ÓTIMOS PROGRAMAS GRÁFICOS .

VOCÊ TAMBÉM ACHARÁ O GCS DISPONÍVEL EM VÁRIOS BBS .

O OUTRO PROGRAMA ESSENCIAL É O GIFLOOP.EXE , FREEWARE CRIADO POR ROYAL FRAZIER , AUTOR DE UMA EXCELENTE PÁGINA SOBRE ANIMAÇÃO GIF .

O GIFLOOP É UM PROGRAMA EM QBASIC , COMPILADO , QUE CUMPRE UMA ÚNICA FUNÇÃO : INCLUI UM BLOCO DE COMANDO DO NETSCAPE , INSTRUNDO O BROWSER A REPETIR A ANIMAÇÃO N VEZES , N PODE TER QUALQUER VALOR ENTRE 0 ( LOOP INFINITO ) OU 65535 .

ISSO É NECESSÁRIO , POIS AS ESPECIFICAÇÕES ORIGINAIS DO GIF89A NÃO PERMITEM REPETIÇÕES .

FELIZMENTE , O FORMATO GIF POSSIBILITA QUE BLOCOS DE CONTROLE ESPECÍFICOS SEJAM CRIADOS , SEM ABRIR MÃO DA COMPATIBILIDADE GERAL . O INTERNET EXPLORER NÃO ENTENDE NEM AS ANIMAÇÕES NEM O BLOCO DE CONTROLE DO NETSCAPE , MAS EXIBE O GIF .

VOCÊ PODE ENCONTRAR O GIFLOOP.EXE NA HOME PAGE DO AUTOR DO PROGRAMA , EM :

HTTP://MEMBERS.AOL.COM/ROYALEF/GIFANIM.HTM

O GIFLOOP.EXE ESTÁ DISPONÍVEL EM MINHA HOME PAGE , NO ENDEREÇO HTTP://WWW.HIGHWAY.COM.BR/USERS/CARDOSO/CARDOSO.HTM E EM DIVERSOS BBS COMO O CENTROIN , MANDIC , UNIKEY E DIGITAL HIGHWAY .





O USO É SIMPLES : COLOQUE O GIFLOOP.EXE E O ARQUIVO GIF A SER MODIFICADO NO MESMO DIRETÓRIO . EXECUTE O GIFLOOP E ELE SOLICITARÁ O NOME DO ARQUIVO DE ORIGEM , O NOME DO ARQUIVO DE DESTINO E O NÚMERO DE VEZES QUE A ANIMAÇÃO DEVE SER EXECUTADA .

VOCÊ PODE ABRIR MÃO DO GIFLOOP.EXE , SE APROVEITAR O BLOCO DE CONTROLE DO NETSCAPE DE UMA ANIMAÇÃO ANTERIOR . BASTA APAGAR TODOS OS DADOS , DEIXANDO APENAS O INICIAL E O " APLICATION DEFINED " .

EXEMPLO PRÁTICO

BEM , AGORA QUE VOCÊ TEM GIFLOOP.EXE E O GIF CONSTRUCTION SET , VAMOS FAZER UMA ANIMAÇÃO BEM SIMPLES , EM APENAS VINTE QUADROS :

CRIE , PRIMEIRO , EM QUALQUER EDITOR GRÁFICO , UM ARQUIVO GIF , QUE SERÁ O PRIMEIRO QUADRO E A BASE DA ANIMAÇÃO . NO CASO , USAREMOS A SEGUINTE IMAGEM :

FIGURA 11.6 IMAGEM-BASE DE NOSSA ANIMAÇÃO .

VAMOS SALVÁ-LA COM O NOME DE ANIM0.GIF E DEPOIS COM O NOME DE ANIM20.GIF .

ESTRUTURAREMOS A ANIMAÇÃO PARA FUNCIONAR EM LOOP , SEM SOBRESSALTOS . NÃO SE ESQUEÇA DE DEFINIR A COR DE FUNDO COMO TRANSPARARENTE .

COMO A ANIMAÇÃO É CÍCLICA , CRIAREMOS APENAS 10 QUADROS , POIS OS OUTROS 10 SERÃO OS INICIAIS , E ORDEM INVERSA . VAMOS ENTÃO AO QUADRO 10 :

FIGURA 11.7 ISSO MESMO , O QUADRO 10 É EM BRANCO .





AGORA , COM UMA FERRAMENTA DE GIF , USANDO SEMPRE A COR BRANCA , CRIAMOS OS QUADROS DE 2 A 9 , APENAS APAGANDO PROGRESSIVAMENTE O CONTEÚDO DOS QUADROS .

FIGURA 11.8 ALGUNS QUADROS DA SEQUÊNCIA , SENDO PROGRESSIVAMENTE APAGADOS .

COM OS DEZ PRIMEIROS QUADROS CRIADOS , BASTA COPIÁ-LOS PARA TERMOS OS DEZ ÚLTIMOS . O QUADRO ANIM0.GIF É COPIADO PARA O ANIM20.GIF , SEGUINDO A TABELA :

ANIM0.GIF - ANIM29,GIF

ANIM1.GIF - ANIM19.GIF

ANIM2.GIF - ANIM18.GIF

ANIM3.GIF - ANIM17.GIF

ANIM4.GIF - ANIM16.GIF

ANIM5.GIF - ANIM15.GIF

ANIM6.GIF - ANIM14.GIF

ANIM7.GIF - ANIM13.GIF

ANIM8.GIF - ANIM12.GIF

ANIM9.GIF - ANIM11.GIF

ANIM10.GIF - ANIM10.GIF





AGORA , VAMOS ABRIR O GIF CONSTRUCTION SET . CARREGUE UMA ANIMAÇÃO JÁ PRONTA E APAGUE TODOS OS DADOS ABAIXO DA LINHA " APLICATION DEFINED " . ASSIM NÃO PRECISAMOS USAR GIFLOOP.EXE .

FIGURA 11.9 TELA DO GCS , COM APENAS OS DADOS ESSENCIAIS .

REPARE QUE NA PRIMEIRA LINHA SE LÊ " HEADER GIF89A 45X52 " , TEMOS QUE ALTERAR O TAMANHO PARA O DO NOSSO GIF . SEM PROBLEMAS , BASTA SELECIONAR A LINHA E CLICAR EM EDIT .

NOS CAMPOS CORRESPONDENTES, INSIRA OS VALORES . NO CASO , 293X105 .

FIGURA 11.10 JANELA DE EDIÇÃO DO CABEÇALHO DO ARQUIVO GIF .





VAMOS AGORA INSERIR NOSSO PRIMEIRO BLOCO DE CONTROLE . CLIQUE UMA VEZ NA LINHA " APLICATION DEFINED " E DEPOIS CLIQUE EM INSERT . APARECERÁ UMA JANELA , NA QUAL VOCÊ SELECIONARÁ " CONTROL " , DEFINIRÁ QUAL A COR A SER TORNADA TRANSPARENTE E SELECIONARÁ A OPÇÃO " REMOVE BY BACKGROUND " .

FIGURA 11.11 EDIÇÃO DE CONTROLES , NO GCS .

A OPÇÃO " DELAY X SECONDS " GERA UMA PAUSA ENTRE OS QUADROS . MAS CUIDADO . O NETSCAPE INTERPRETA ( CORRETAMENTE ) O VALOR COMO " CENTÉSIMOS DE SEGUNDO " , MAS O GIF CONSTRUCTION SET TRATA OS VALORES COMO " SEGUNDOS " , TORNANDO QUASE IMPOSSÍVEL PREVER UMA ANIMAÇÃO . O IDEAL É NÃO UTILIZAR PAUSA NENHUMA .

A OPÇÃO DE TRANSPARÊNCIA É IMPORTANTE , POIS A INFORMAÇÃO DA IMAGEM ORIGINAL É PERDIDA . NÃO ADIANTA DEFINIR OS GIFS COMO TRANSPARENTE ANTES DE MONTAR A ANIMAÇÃO NO GCS .

A OPÇÃO " REMOVE BY BACKGROUND " INDICA AO NETSCAPE O QUE FAZER APÓS CADA FRAME SER EXIBIDO . SEM ESSA INFORMAÇÃO , OS QUADROS SERÃO EXIBIDOS SEM QUE O ANTERIOR SEJA APAGADO . UMA BAGUNÇA .

AGORA QUE INSERIMOS NOSSO PRIMEIRO CONTROLE , VAMOS INSERIR UMA IMAGEM . CLIQUE EM INSERT , DEPOIS EM " IMAGE " . ACHE O ARQUIVO ANIM0.GIF E SELECIONE-O .

A JANELA QUE SURGIU APARECE PORQUE NÃO HÁ INFORMAÇÃO DE COR NO ARQUIVO AINDA . ENTRE AS VÁRIAS OPÇÕES , SELECIONE " USE THIS IMAGE AS GLOBAL PALETTE " . ASSIM , TODAS AS INFORMAÇÕES DE COR DA ANIMAÇÃO SERÃO EXTRAÍDAS DESTE QUADRO , QUE DEVE SER O PRIMEIRO DA ANIMAÇÃO . VOCÊ ATÉ PODE DEFINIR UMA PALETA DE CORES LOCAL , PARA CADA QUADRO , MAS ISSO TORNA A ANIMAÇÃO MAIS LENTA E 779 BYTES MAIOR A CADA PALETA EXTRA .





FIGURA 11.12 JANELA DE DEFINIÇÃO DE CORES . ESCOLHA , NA PRIMEIRA IMAGEM , A OPÇÃO " USE THIS IMAGE AS GLOBAL PALETTE " .

INSIRA , A SEGUIR , OS OUTROS QUADROS , DE ANIM1.GIF A ANIM20.GIF .

A JANELA DO GCS DEVERÁ FICAR ASSIM :

FIGURA 11.13 JANELA DO GCS , COM AS IMAGENS DE 0 A 20 INSERIDAS .





NÃO ACABOU , VÁ ATÉ A PRIMEIRA LINHA CONTROL , QUE VOCÊ INSERIU E SELECIONE-A . VÁ NO MENU EDIT E SELECIONE COPY .

AGORA , SELECIONE A PRIMEIRA IMAGEM E CLIQUE " EDIT/PASTE " , SELECIONE A PRÓXIMA IMAGEM E REPITA O PROCESSO ATÉ A ÚLTIMA IMAGEM . UFA !!

FIGURA 11.14 JANELA DO GCS , COM TODOS OS BLOCOS DE CONTROLE NO LUGAR .

CLIQUE EM VIEW E VEJA SUA OBRA-PRIMA . SE TUDO ESTIVER CORRETO , AGORA É SÓ SALVAR . VÁ NA OPÇÃO SAVE E GRAVE-O COMO UM GIF NORMAL . ESTÁ PRONTO PARA CONSUMO . ABRA O HOTDOG , CRIE UMA PÁGINA MÍNIMA , COM A LISTAGEM :

< HTML >

< HEAD >

< TITLE > TYPE_DOCUMENT_TITLE_HERE < / TITLE >

< / HEAD >

< BODY >

< CENTER > < IMG SRC="ANIM.GIF" > < / CENTER >

< / BODY >

< / HTML >

ABRA-A NO NETSCAPE . SE TUDO DER CERTO , VOCÊ VERÁ UMA BELA ANIMAÇÃO , QUE FICA MAIS INTERESSANTE AINDA COM O FUNDO PRETO .

REPARE QUE VOCÊ NÃO ESTÁ USANDO JAVA NEM NENHUM OUTRO RECURSO AVANÇADO . SE QUISER , ABRA A MESMA PÁGINA NO INTENET EXPLORER E VEJA COMO , APESAR DE ESTÁTICA , A PÁGINA AINDA CONTINUA APRESENTÁVEL .





FIGURA 11.15 PÁGINA COM NOSSA ANIMAÇÃO FINAL . NO CASO , O TAMANHO TOTAL DO ARQUIVO FOI DE 85 KB . GRANDE , MAS AINDA DENTRO DO ACEITÁVEL , POIS NÃO IMPORTA O TAMANHO DO ARQUIVO E SIM O PRAZER VISUAL QUE ELE PROPORCIONA .

NO MENU INSERT , O GCS PERMITE QUE SE INSIRAM COMENTÁRIOS NO ARQUIVO GIF , SEM ALTERAR SUA ESTRUTURA . ISTO É MUITO ÚTIL PARA PROTEGER OS DIREITO AUTORAIS . É EXTREMAMENTE DESAGRADÁVEL VER UM ÍCONE FEITO COM MUITO TRABALHO E SUOR USADO INDISCRIMINADAMENTE INTERNET AFORA . ASSIM , SE NÃO PODEMOS COIBIR O USO , AO MENOS RESGUARDAMOS A AUTORIA .

COMO UM ARQUIVO GIF É O ÚLTIMO LUGAR ONDE ALGUÉM PROCURARÁ POR UM TEXTO , PODE SER UMA FORMA INTERESSANTE DE TROCAR MENSAGENS DE FORMA INDIRETA , DÁ PARA BRINCAR DE 007 . PASSANDO INFORMAÇÕES SIGILOSAS EM " INOCENTES " FOTOS DO SITE DA PLAYBOY .

NUNCA ABRA SEU GIF ANIMADO EM UM EDITOR QUALQUER . PROVAVELMENTE SUA ANIMAÇÃO SERÁ DESTRUÍDA PARA " PAPAGAIAR " UMA PÁGINA ALÉM DAS RAIAS MAIS CONDESCENDENTES DO BOM GOSTO . USANDO ANIMAÇÕES , UM USUÁRIO EXAGERADO PODE ACABAR RECEBENDO UM CONVITE PARA SE TORNAR CARNAVALESCO DE ALGUMA GRANDE ESCOLA DE SAMBA .





F I M





IMPRIMIR AQUI, PRINTER HERE...