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 !






IMPRIMIR AQUI, PRINTER HERE...