21268519 Sites Dinamicos

9 7 7 1 8 0 7 9 2 4 0 0 4

0 0 0 1 8 >

INCOL capa SitesD.qxd 19/05/2005 11:59

CONTEÚDO

COLEÇÃO INFO > 3

SITES DINÂMICOS

FERRAMENTAS7 > Que idioma o site

vai falar?14 > O XML desliza no PHP 5 16 > Ganhe tempo com

o ColdFusion 19 > Dados livres com

o MySQL25 > O Access manda bem

na internet 27 > Banco de dados assim

é ótimo! 29 > Portal é com o Xoops 32 > O osCommerce faz a loja 35 > Páginas abertas ao

conteúdo

© ILUSTRAÇÕES DA CAPA E DO CONTEÚDO CELLUS

37 > O SSI dispensa banco e script

40 > Mais poder ao Studio MX

32 Loja com osCommerce:visual muda com os temas

CMSWiki

MySQLRSS

PHP...

menu/carta do editor 24.05.05 12:44 Page 3

EQUIPEEDIÇÃO Lucia ReggianiCAPA Jefferson BarbatoCOLABORADORES Daniel Avizu, EversonStabenow Siqueira e Rita Del MonacoDESIGN Claudia Ottelinger e Osmar Vieira

RECADO DA REDAÇÃO

MUITO ALÉMDO HTML

COLEÇÃO INFO > 5

CONTEÚDO

emos duas notícias paraos donos de sites feitosem HTML puro, uma boae outra melhor ainda. A

boa é que dá para montar um site so-fisticado, cheio de interatividade, semtirar um real furado do bolso. A me-lhor notícia é que reunimos nesta edi-ção o que há de novo e importantepara a construção de um site dinâmi-co, gastando nada ou muito pouco.

Dividido em duas partes principais,Sites Dinâmicos traz, na primeira, fer-ramentas testadas pelos programa-dores e jornalistas que participaramdesta edição. Apresentamos as lingua-gens mais usadas, bancos de dados,destrinchamos tecnologias de auto-mação, como o gerenciamento de con-teúdo (CMS), editores e aplicativos.

Na segunda parte, estão os tutoriais,o caminho das pedras para fazer seusite trocar informações com os visi-tantes automaticamente. Você vai sa-ber, passo a passo, como construir por-tais e layouts para comércio eletrôni-

co. Aprenderá a incluir em seu site for-mulários, livro de visitas, catálogo deprodutos e um alimentador de notí-cias para PCs e palmtops. Descobriráo uso dinâmico do Flash na monta-gem de um ranking e de um sistemade votação. Receitas para a produçãode fórum, blog, streaming de áudio evídeo estão no cardápio. Temos ain-da dicas para fazer um layout sem ta-belas de HTML, o famoso tableless, atecnologia da hora para encolher ocódigo, e uma bela seleção de down-loads. Em boa parte dos tutoriais vocêterá, de bandeja, os códigos prontospara baixar no site da INFO.

Para encarar essa maratona, a úni-ca coisa que você precisa é conhe-cer pelo menos um pouco de algu-ma linguagem deprogramação deacesso a banco dedados. Está pronto?Então aproveite.

LUCIA REGGIANIEDITORA DE SITES DINÂMICOS

T

INFO COLEÇÃOUma publicação mensal da Editora Abril

Para contatar a redação:[email protected]

Para assinar a Coleção:(11) 3347.2121 — Grande São Paulo0800-701-2828 — Demais [email protected]

79 > Dê seu voto para o Flash 84 > Os segredos do ranking 88 > Loja com um Flash

simples 92 > Site esperto lê os feeds96 > Notícias no palmtop 99 > Que nota o site merece?101 > Os menus se desdobram104 > Boletim? É com o

Dreamweaver107 > Um fórum cheio

de opinião

DOWNLOADS110 > Portal no ar sem

gastar nada

TUTORIAIS45 > Monte o site rapidinho50 > Página dinâmica sem

programar53 > Adeus, tabelas de HTML57 > Blog pronto em seis

passos 60 > Som e vídeo jorram

da tela 65 > Falem mal, mas falem

do meu site 70 > Mostruário vapt-vupt75 > O PHP conversa com

os clientes online

4 < COLEÇÃO INFO

45 PHP-Nuke: todos os recursosno Menu de Administraçãoreúne recursos

65 Livro de visitas:formulário e mensagens

110 Mambo: gerenciador debanner e newsfeeds

menu/carta do editor 24.05.05 12:45 Page 4

EQUIPEEDIÇÃO Lucia ReggianiCAPA Jefferson BarbatoCOLABORADORES Daniel Avizu, EversonStabenow Siqueira e Rita Del MonacoDESIGN Claudia Ottelinger e Osmar Vieira

RECADO DA REDAÇÃO

MUITO ALÉMDO HTML

COLEÇÃO INFO > 5

CONTEÚDO

emos duas notícias paraos donos de sites feitosem HTML puro, uma boae outra melhor ainda. A

boa é que dá para montar um site so-fisticado, cheio de interatividade, semtirar um real furado do bolso. A me-lhor notícia é que reunimos nesta edi-ção o que há de novo e importantepara a construção de um site dinâmi-co, gastando nada ou muito pouco.

Dividido em duas partes principais,Sites Dinâmicos traz, na primeira, fer-ramentas testadas pelos programa-dores e jornalistas que participaramdesta edição. Apresentamos as lingua-gens mais usadas, bancos de dados,destrinchamos tecnologias de auto-mação, como o gerenciamento de con-teúdo (CMS), editores e aplicativos.

Na segunda parte, estão os tutoriais,o caminho das pedras para fazer seusite trocar informações com os visi-tantes automaticamente. Você vai sa-ber, passo a passo, como construir por-tais e layouts para comércio eletrôni-

co. Aprenderá a incluir em seu site for-mulários, livro de visitas, catálogo deprodutos e um alimentador de notí-cias para PCs e palmtops. Descobriráo uso dinâmico do Flash na monta-gem de um ranking e de um sistemade votação. Receitas para a produçãode fórum, blog, streaming de áudio evídeo estão no cardápio. Temos ain-da dicas para fazer um layout sem ta-belas de HTML, o famoso tableless, atecnologia da hora para encolher ocódigo, e uma bela seleção de down-loads. Em boa parte dos tutoriais vocêterá, de bandeja, os códigos prontospara baixar no site da INFO.

Para encarar essa maratona, a úni-ca coisa que você precisa é conhe-cer pelo menos um pouco de algu-ma linguagem deprogramação deacesso a banco dedados. Está pronto?Então aproveite.

LUCIA REGGIANIEDITORA DE SITES DINÂMICOS

T

INFO COLEÇÃOUma publicação mensal da Editora Abril

Para contatar a redação:[email protected]

Para assinar a Coleção:(11) 3347.2121 — Grande São Paulo0800-701-2828 — Demais [email protected]

79 > Dê seu voto para o Flash 84 > Os segredos do ranking 88 > Loja com um Flash

simples 92 > Site esperto lê os feeds96 > Notícias no palmtop 99 > Que nota o site merece?101 > Os menus se desdobram104 > Boletim? É com o

Dreamweaver107 > Um fórum cheio

de opinião

DOWNLOADS110 > Portal no ar sem

gastar nada

TUTORIAIS45 > Monte o site rapidinho50 > Página dinâmica sem

programar53 > Adeus, tabelas de HTML57 > Blog pronto em seis

passos 60 > Som e vídeo jorram

da tela 65 > Falem mal, mas falem

do meu site 70 > Mostruário vapt-vupt75 > O PHP conversa com

os clientes online

4 < COLEÇÃO INFO

45 PHP-Nuke: todos os recursosno Menu de Administraçãoreúne recursos

65 Livro de visitas:formulário e mensagens

110 Mambo: gerenciador debanner e newsfeeds

menu/carta do editor 24.05.05 12:45

Fundador: VICTOR CIVITA(1907-1990)

Diretora de Redação: Sandra CarvalhoRedatora-chefe: Débora Fortes Diretor de Arte: Rodrigo Maroja

Editores Seniores: Carlos Machado, Lucia Reggiani e Maurício GregoEditores: Airton Lopes, André Cardozo e Eric Costa

Repórteres: Luciana Benatti e Silvia Balieiro Revisora: Marta MagnaniEditor de Arte: Jefferson Barbato Designers: Catia Herreiro e Wagner RodriguesColaborador: Dagomir Marquezi Infolab: Osmar Lazarini (consultor de sistemas)

Colaborador: Eduardo Kalnaitis Estagiários: Bruno Roberti, Henrique Lourenço e Luiz CruzInfo Online: Renata Verdasca e Cristian Medeiros (webmasteres)

Atendimento ao leitor: Virgílio Souza www.info.abril.com.br

Apoio Editorial: Beatriz de Cássia Mendes, Carlos Grassetti Serviços Editoriais: Wagner BarreiraDepto. de Documentação e Abril Press: Grace de Souza

PUBLICIDADEDiretor de Publicidade: Sergio Amaral

Diretor de Publicidade Regional: Jacques Baisi Ricardo Diretor de Publicidade Rio de Janeiro: Paulo Renato Simões Executivos de Negócios: Letícia Di Lallo, Marcelo Cavalheiro, Márcio Mendonça Pereira, Robson Monte, Rodrigo Floriano

de Toledo (SP) e Edson Melo (RJ) Gerentes de Publicidade: Marcos Peregrina Gomez (SP) e Rodolfo Garcia (RJ) Executivos de Contas: Luciano Almeida, Marcello Almeida, Renata Miolli, Cristiano Rygaard e Yann Gellineaud (RJ)

NÚCLEO ABRIL DE PUBLICIDADEDiretor de Publicidade: Pedro Codognotto

Gerentes de Vendas: Claudia Prado, Fernando Sabadin Gerente de Classificados: Cris LagoMARKETING E CIRCULAÇÃO

Marketing: Marcelo Moraes Gerente de Produto: Gabriela Nunes Marketing Publicitário e Projetos Especiais: Érica Lemos Gerente de Circulação Avulsas: Maria Helena Couto Gerente de Circulação Assinaturas: Euvaldo Nadir Lima Júnior

Planejamento, Controle e Operações: Auro Iasi, Fábio Luis dos Santos e Tales Bombicini Projetos Especiais: Cristiana Cardoso Processos: Alberto Martins e Ricardo Carvalho

ASSINATURASDiretora de Operações de Atendimento ao Consumidor: Ana Dávalos Diretor de Vendas: Fernando Costa

Editor: Roberto CivitaConselho Editorial: Roberto Civita (Presidente), Thomaz Souto Corrêa (Vice-Presidente),

Jose Roberto Guzzo, Maurizio Mauro

Presidente Executivo: Maurizio Mauro

Diretor Secretário Editorial e de Relações Institucionais: Sidnei BasileVice-Presidente Comercial: Deborah Wright

Diretora de Publicidade Corporativa: Thais Chede Soares B. Barreto

Diretor-Geral: Jairo Mendes LealDiretor Superintendente: Paulo Nogueira

Diretor de Núcleo: Alexandre Caldini

Em São Paulo: Redação e Correspondência: Av. das Nações Unidas, 7221, 14º andar, Pinheiros, CEP 05425-902, tel. (11) 3037-2000, fax (11) 3037-2355Publicidade: (11) 3037-5000, Central-SP (11) 3037-6564 Classificados: 0800-132066, Grande São Paulo 3037-2700, www.publiabril.com.br. Escritórios eRepresentantes de Publicidade no Brasil: Belo Horizonte – R. Fernandes Tourinho, 147, sala 303, Bairro Savassi, CEP 30112-000, Vania R. Passolongo, tel. (31)3282-0630, fax (31) 3282-8003 Blumenau – R. Florianópolis, 279, Bairro da Velha, CEP 89036-150, M. Marchi Representações, tel. (47) 329-3820, fax (47) 329-6191Brasília – SCN - q. 1, bl. Ed. Brasília Trade Center, 14º andar, sl. 1408, CEP 70710-902, Solange Tavares, tel. (61) 315-7554/55/56/57, fax (61) 315-7558 Campinas –R. Conceição, 233, 260 andar, cj. 2613/2614, CEP 13010-916, CZ Press Com. e Representações, telefax (19) 3233-7175 Cuiabá – R. Diamantino, 13, quadra 73, Moradada Serra, CEP 78055-530, tel. (65) 3027-2772 Curitiba – Av. Cândido de Abreu, 776, 6º andar, sl. 601 e 602, Centro Cívico, CEP 80530-000, Marlene Hadid, tel. (41)250-8000, fax (41) 252-7110 Florianópolis – R. Manoel Isidoro da Silveira, 610, sl. 301, Comercial Via Lagoa - Lagoa da Conceição, CEP 88060-130, Comercial Lagoa,Via Lagoa da Conceição, tel. (48) 232-1617, fax (48) 232-1782 Fortaleza – Av. Desembargador Moreira, 2020, sl. 604/605, Aldeota, CEP 60170-002, MidiasolutionRepres e Negóc. em Meios de Comunicação, telefax (85) 264-3939 Goiânia – R. 10, nº 250, loja 2, Setor Oeste, CEP 74120-020, Middle West Representações Ltda., tel.215-3274/3309, telefax (62) 215-5158 Joinville – R. Dona Francisca, 260, sl. 1304, Centro, CEP 89201-250, Via Mídia Projetos Editoriais Mkt. e Repres. Ltda., telefax(47) 433-2725 Londrina – R. Adalcimar Regina Guandalini, 392, Jd. das Américas, CEP 86076-100, Press Representações e Publicidade, telefax (43) 3357-1122 - r. 24Porto Alegre – Av. Carlos Gomes, 1155, sl. 702, Petrópolis, CEP 90480-004, Ana Lúcia R. Figueira, tel. (51) 3327-2850, fax (51) 3227-2855 Recife – R. Ernesto dePaula Santos, 187, sl. 1201, Boa Viagem, CEP 51021-330, MultiRevistas Publicidade Ltda., telefax (81) 3327-1597 Ribeirão Preto – R. João Penteado, 190, CEP14025-010, Intermídia Repres. e Publ. S/C Ltda., tel. (16) 635-9630, telefax (16) 635-9233 Rio de Janeiro – Praia de Botafogo, 501, 1º andar, Botafogo, CentroEmpresarial Mourisco, CEP 22250-040, Paulo Renato L. Simões, pabx (21) 2546-8282, tel. (21) 2546-8100, fax (21) 2546-8201 Salvador – Av. Tancredo Neves, 805, sl.402, Ed. Espaço Empresarial, Pituba, CEP 41820-021, AGMN Consultoria Public. e Representação, telefax (71) 341-4992/4996/1765 Vitória – Av. Rio Branco, 304, 2ºandar, loja 44, Santa Lúcia, CEP 29055-916, DU’Arte Propaganda e Marketing Ltda., telefax (27) 3325-3329

INTERNATIONAL ADVERTISING SALES REPRESENTATIVES Coordinator for International Advertising: Global Advertising, Inc., 218 Olive Hill Lane, Wood-side, California 94062. UNITED STATES: CMP Worldwide Media Networks, 2800 Campus Drive, San Mateo, California 94403, tel. (650) 513 4200, fax (650) 513 4482.EUROPE: HZI International,Africa House, 64-78 Kingsway, London WC2B 6AH, tel. (20) 7242-6346, fax (20) 7404-4376. JAPAN: IMI Corporation, Matsuoka Bldg. 303,18-25, Naka 1- chome, Kunitachi, Tokyo 186-0004, tel. (03) 3225-6866, fax (03) 3225-6877. TAIWAN: Lewis Int’l Media Services Co. Ltd., Floor 11-14 no 46, Sec 2,Tun Hua South Road, Taipei, tel. (02) 707-5519, fax (02) 709-8348

SITES DINÂMICOS! edição 18 é uma publicação da Editora Abril S.A. Distribuída em todo o país pela Dinap S.A.Distribuidora Nacional de Publicações, São Paulo.

Presidente do Conselho de Administração: Roberto Civita

Presidente Executivo: Maurizio Mauro

Vice-Presidentes: Deborah Wright, Emílio Carazzai, José Wilson Armani Paschoal, Valter Pasquini

www.abril.com.br

IMPRESSA NA DIVISÃO GRÁFICA DA EDITORA ABRIL S.A.Av. Otaviano Alves de Lima, 4400, CEP 02909-900 - Freguesia do Ó - São Paulo - SP

Publicações da Editora Abril: Veja: Veja, Veja São Paulo, Veja Rio, Vejas Regionais Negócios: Exame, Você S/A A Consumo/Comportamento: NúcleoConsumo: Boa Forma, Elle, Estilo, Manequim Núcleo Comportamento: Claudia, Nova Núcleo Bem-Estar: : Bons Fluidos, Saúde!, Vida SimplesTurismo/Tecnologia: Núcleo Turismo: Guias Quatro Rodas, National Geographic, Viagem e Turismo Núcleo Homem: : Placar, Playboy, Quatro Rodas, Vip NúcleoTecnologia: Info, Info Corporate Cultura/Jovem: Núcleo Jovem: Capricho, Mundo Estranho, Superinteressante, Super Surf Núcleo Infantil: Atividades, Disney,Recreio Núcleo Cultura: : Almanaque Abril, Guia do Estudante, Aventuras na História, Revista das Religiões Casa/Semanais: Núcleo Casa e Construção:Arquitetura e Construção, Casa Claudia, Claudia Cozinha Núcleo Celebridades: Contigo! Núcleo Semanais: Ana Maria, Faça e Venda, Minha Novela, Tititi, Viva!Mais Fundação Victor Civita: Nova Escola

expediente sites dinâmicos 23.05.05 16:21 Page 4

FERRAMENTAS/LINGUAGENS

COLEÇÃO INFO > 7COLEÇÃO INFO > 7

ites complexos como osportais e as lojas onlineexigem do desenvolve-dor muito mais do que

destreza com o velho e bom HTML.É preciso aprender a programar nu-ma linguagem de acesso a banco dedados. As mais usadas pelos web-masters são pelo menos cinco: ASP,

Perl, PHP, JSP e ColdFusion. Corren-do por fora, ASP.Net e J2EE prome-tem ganhar espaço com sua arqui-tetura de componentes. Cada umadessas linguagens tem suas vanta-gens e desvantagens, e a escolha de-pende de uma série de fatores, co-mo compatibilidade, custo e porta-bilidade. Conheça melhor as opções.

S

QUE IDIOMA OSITE VAI FALAR?

ANTES DE ESCOLHER, CONHEÇA AS CARACTERÍSTICAS DEPHP, ASP, COLDFUSION, PERL E JSP

POR ANDRÉ CARDOSO

© ILUSTRAÇÃO PAVÃO

©

FERRAMENTAS/LINGUAGEM 1 23.05.05 16:23 Page 7


COLEÇÃO INFO > 9


8 < COLEÇÃO INFO COLEÇÃO INFO > 98 < COLEÇÃO INFO

ASP, A OPÇÃOWINDOWS O ASP (ActiveServer Pages) éa plataforma da

Microsoft para a criação de sites di-nâmicos. Em vez de utilizar o mé-todo CGI (Common Gateway Inter-face), as páginas ASP consultam obanco de dados por meio do Isapi(Internet Server Application Pro-gramming Interface), que aprimo-ra a comunicação entre o servidore o aplicativo externo.

Quando utilizamos o CGI, cadapedido de página abre um novoprocesso no servidor, o que podecomprometer o desempenho do si-te. Já com o Isapi, o processamen-to de todos os pedidos ao servidorfica a cargo de um único arquivo.dll, que, uma vez carregado na me-mória, permanece lá até que sejadeliberadamente retirado.

O funcionamento de páginas ASP

depende do arquivo asp.dll. É eleque trata todos os pedidos de exe-cução das páginas ASP. É importan-te lembrar que o ASP não é exata-mente uma linguagem de progra-mação, mas o que a Microsoft de-fine como “ambiente de execuçãode scripts”. Na maior parte das ve-zes, as instruções são escritas emVBScript, que é derivado do VisualBasic, também filhote da Microsoft.

A penetração do Visual Basic nomercado contribui bastante para ocrescimento do ASP. Como a quan-tidade de programadores VB é gran-de, fica mais fácil para as empresascontratarem profissionais que de-senvolvam aplicações em VBScript.

Aderir ao ASP significa quasesempre optar pelo mundo Win-dows, uma vez que as páginas ASPsó rodam nativamente em servi-dores Windows com servidor webIIS (Internet Information Server),da Microsoft. É possível rodar pá-

ginas ASP em sistemas Unix porintermédio de soluções comerciais,como o ChiliASP, ou usando o Ope-nASP, no servidor web Apache. Masa implementação desse tipo de so-lução costuma ser problemáticapara os webmasters.

PERL, A VETERANAA linguagem Perl(Practical Extrac-tion and Repor-

ting Language) é amais antiga das pla-

taformas para desenvolvimento desites dinâmicos. Foi criada em 1987pelo programador Larry Wall pararesolver tarefas de administraçãoem sistemas Unix. Wall divulgou aprimeira versão de Perl nas listasde discussão da Usenet e logo pro-gramadores de todos os cantos domundo começaram a dar suges-tões para o aprimoramento da lin-guagem. Esse esquema de colabo-

ração continua até hoje, e Wall ain-da chefia o desenvolvimento.

Com o surgimento da web, a lin-guagem Perl passou a ser utilizadatambém para a montagem de sitesdinâmicos. Os scripts Perl normal-mente têm a extensão .pl e são inter-pretados por um programa antes deser executados. Um programa cha-mado de interpretador deve estar ins-talado no servidor web em que osscripts são rodados. Há interpretado-res para Windows e Mac OS. Unix eLinux interpretam os scripts na ins-talação-padrão.

Uma das grandes vantagens dePerl é a portabilidade. Os scriptspodem ser transferidos do Unixpara o Windows e vice-versa compouca ou nenhuma modificação.A linguagem é expandida pelo usode módulos, programas criadospara uma função específica, quepodem ser acrescentados aosscripts feitos em Perl.

> SISTEMASOPERACIONAIS

> SERVIDORES

> BANCOS DE DADOS

PRÓS

CONTRAS

ASP

Windows(1)

PWS, IIS

Access, SQL Server,Oracle, DB2, Informix

• Grande base instaladano mercado

• Fácil aprendizado

• Só roda nativamente nomundo Windows

ColdFusion

Windows, Linux, Unix

Apache, IIS, Sun One,Netscape

Access, SQL Server,Oracle, DB2, Sybase,Informix

• Sintaxe simples, bemparecida com HTML

• Integração comprodutos Macromedia

• Base instalada pequena• Custo adicional com

servidor

JSP


Apache, Sun One,Netscape

Oracle, DB2, Sybase,Informix

• Portabilidade • Todos os recursos da

linguagem Java

• Exige conhecimento deJava

Perl

Windows, Linux, Unix,Mac OS

Apache, IIS

Access, MySQL, Oracle,DB2, Sybase, Informix

• Gratuito• Expansível por meio de

módulos

• Sintaxe complexa• Não há suporte oficial,

mas uma comunidadeatuante presta ajuda

PHP


Apache, IIS


• Gratuito • Sintaxe simples

• Não há suporte oficial,mas uma comunidadeatuante presta ajuda

(1) Funciona em outras plataformas, com aplicativos auxiliares

Qual das linguagens é a melhor?



COLEÇÃO INFO > 9



ASP, A OPÇÃOWINDOWS O ASP (ActiveServer Pages) éa plataforma da

Microsoft para a criação de sites di-nâmicos. Em vez de utilizar o mé-todo CGI (Common Gateway Inter-face), as páginas ASP consultam obanco de dados por meio do Isapi(Internet Server Application Pro-gramming Interface), que aprimo-ra a comunicação entre o servidore o aplicativo externo.

Quando utilizamos o CGI, cadapedido de página abre um novoprocesso no servidor, o que podecomprometer o desempenho do si-te. Já com o Isapi, o processamen-to de todos os pedidos ao servidorfica a cargo de um único arquivo.dll, que, uma vez carregado na me-mória, permanece lá até que sejadeliberadamente retirado.

O funcionamento de páginas ASP

depende do arquivo asp.dll. É eleque trata todos os pedidos de exe-cução das páginas ASP. É importan-te lembrar que o ASP não é exata-mente uma linguagem de progra-mação, mas o que a Microsoft de-fine como “ambiente de execuçãode scripts”. Na maior parte das ve-zes, as instruções são escritas emVBScript, que é derivado do VisualBasic, também filhote da Microsoft.

A penetração do Visual Basic nomercado contribui bastante para ocrescimento do ASP. Como a quan-tidade de programadores VB é gran-de, fica mais fácil para as empresascontratarem profissionais que de-senvolvam aplicações em VBScript.

Aderir ao ASP significa quasesempre optar pelo mundo Win-dows, uma vez que as páginas ASPsó rodam nativamente em servi-dores Windows com servidor webIIS (Internet Information Server),da Microsoft. É possível rodar pá-

ginas ASP em sistemas Unix porintermédio de soluções comerciais,como o ChiliASP, ou usando o Ope-nASP, no servidor web Apache. Masa implementação desse tipo de so-lução costuma ser problemáticapara os webmasters.

PERL, A VETERANAA linguagem Perl(Practical Extrac-tion and Repor-

ting Language) é amais antiga das pla-

taformas para desenvolvimento desites dinâmicos. Foi criada em 1987pelo programador Larry Wall pararesolver tarefas de administraçãoem sistemas Unix. Wall divulgou aprimeira versão de Perl nas listasde discussão da Usenet e logo pro-gramadores de todos os cantos domundo começaram a dar suges-tões para o aprimoramento da lin-guagem. Esse esquema de colabo-

ração continua até hoje, e Wall ain-da chefia o desenvolvimento.

Com o surgimento da web, a lin-guagem Perl passou a ser utilizadatambém para a montagem de sitesdinâmicos. Os scripts Perl normal-mente têm a extensão .pl e são inter-pretados por um programa antes deser executados. Um programa cha-mado de interpretador deve estar ins-talado no servidor web em que osscripts são rodados. Há interpretado-res para Windows e Mac OS. Unix eLinux interpretam os scripts na ins-talação-padrão.

Uma das grandes vantagens dePerl é a portabilidade. Os scriptspodem ser transferidos do Unixpara o Windows e vice-versa compouca ou nenhuma modificação.A linguagem é expandida pelo usode módulos, programas criadospara uma função específica, quepodem ser acrescentados aosscripts feitos em Perl.

> SISTEMASOPERACIONAIS

> SERVIDORES

> BANCOS DE DADOS

PRÓS

CONTRAS

ASP

Windows(1)

PWS, IIS

Access, SQL Server,Oracle, DB2, Informix

• Grande base instaladano mercado

• Fácil aprendizado

• Só roda nativamente nomundo Windows

ColdFusion


Apache, IIS, Sun One,Netscape

Access, SQL Server,Oracle, DB2, Sybase,Informix

• Sintaxe simples, bemparecida com HTML

• Integração comprodutos Macromedia

• Base instalada pequena• Custo adicional com

servidor

JSP


Apache, Sun One,Netscape

Oracle, DB2, Sybase,Informix

• Portabilidade • Todos os recursos da

linguagem Java

• Exige conhecimento deJava

Perl

Windows, Linux, Unix,Mac OS

Apache, IIS


• Gratuito• Expansível por meio de

módulos

• Sintaxe complexa• Não há suporte oficial,

mas uma comunidadeatuante presta ajuda

PHP


Apache, IIS


• Gratuito • Sintaxe simples

• Não há suporte oficial,mas uma comunidadeatuante presta ajuda

(1) Funciona em outras plataformas, com aplicativos auxiliares

Qual das linguagens é a melhor?

FERRAMENTAS/LINGUAGEM 1 23.05.05 16:23


COLEÇÃO INFO > 11


10 < COLEÇÃO INFO

O módulo CGI.pm é um dos maisconhecidos e facilita a captura de da-dos em formulários HTML. Todos osmódulos são gratuitos. Existem em-presas que oferecem suporte comer-cial para Perl, mas normalmente amaior ajuda vem dos participantesdas listas de discussão especializa-das. Para experimentar a linguagem,faça o download da distribuição Ac-tivePerl em www.info.abril.com.br/download/ 3165.shtml.

PHP, A POPULARUma solução

bastante popu-lar entre os webmasters de sites di-nâmicos é o PHP (Personal HomePage). Criado pelo programador Ras-mus Leedorf, está na recém-lança-da versão 5 (veja teste na página 14).Mas, por algumas questões de com-patibilidade, a versão 4.3.11 ainda éa mais usada. A linguagem funcio-

na tanto em Unix quanto em Win-dows e possui suporte para diver-sos bancos de dados, incluindoMySQL, Sybase, SQL e Oracle.

A sintaxe possui alguns elemen-tos derivados do Perl, mas é bem -mais simples e exige apenas noçõesbásicas de programação. Além dis-so, há outra qualidade muito impor-tante, que beneficia uma parte sen-sível de todos nós: o bolso. O inter-pretador PHP (programa que pro-

cessa as páginas feitas nesse for-mato) é gratuito, e basta baixar einstalar no servidor para começara criar seu website dinâmico.

Desde o início, o PHP foi desen-volvido como um padrão totalmen-te aberto, em que programadoresde todo o mundo colaboram parao aprimoramento da linguagem, domesmo modo como ocorre com oLinux. Apesar do crescimento deseus concorrentes endinheirados,

Os programadores podemescolher a linguagem quequiserem para construiraplicativos que automatizemos sites. Mas não têm muitocomo escapar da SQL(Structured Query Language)na consulta ao banco dedados. Se o TCP/IP é o idiomada internet, podemos dizerque a SQL tem a mesmafunção nos bancos de dados. A linguagem foi desenvolvidana década de 60 pela IBM com uma única finalidade:manipulação de bancos de dados. Ela é adotada por todos os sistemas maisutilizados no mercado, como Oracle, Sybase, Informix,Access e, claro, Microsoft SQL Server. No nível mais avançado, um programador precisa se

dedicar muito para dominar a SQL, mesmo porque diversosbancos de dados possuemextensões proprietárias, funçõesmais avançadas que sófuncionam naquele sistema. Os comandos básicos, porém,são intuitivos e podem serusados sem dificuldade porquem tem noção deprogramação. Veja alguns:

CREATE: cria tabelasSELECT: seleciona dadosINSERT: inclui dados em tabelasUPDATE: atualiza dadosDELETE: apaga dados

Além dos comandos principais,outras expressões muito usadassão o “where”, que inclui acondição, e o “order by”, queordena o resultado da consultaSQL. Veja o exemplo a seguir:

“SELECT nome,endereco FROMclientes WHERE estado = ‘sp’ORDER BY nome”

Esse comando seleciona as colunas“nome” e “endereco” da tabela“clientes” em que o estado é iguala “sp” (condição imposta pelaexpressão “where”). Portanto,somente os clientes de São Paulo.Os resultados são ordenados por“nome”. A tabela poderia conteroutras colunas, como “idade” e“sexo”, mas nesse exemplousamos só “nome” e “endereco”.Para selecionar todas as colunas,basta trocar “nome,endereco”por *, como abaixo:

“SELECT * FROM clientes WHEREestado = ‘sp’ ORDER BY nome”A seguir, temos exemplos deconsultas SQL já inseridas emcódigos ASP e ColdFusion.

ASP<%set conn =server.createobject(“adodb.connection”)conn.open “bancodedados”set rsquery =conn.execute(“selectnome,telefone fromtabelabanco”)while not rsquery.eofresponse.writersquery(“nome”)& “ - “ &rsquery(“telefone”)& “ <br>”rsquery.movenextwend%>

ColdFusion<CFQUERY NAME= “consulta”DATASOURCE=“bancodedados”>select * from tabelabanco</CFQUERY>

CONSULTA É COM A SQL



COLEÇÃO INFO > 13


12 < COLEÇÃO INFO

as devidas consultas ao banco de da-dos) e devolve a página formatada.

Uma grande desvantagem doColdFusion é o custo. Enquanto aimplementação de Perl, PHP e ASPé gratuita (no caso do ASP, desdeque o site funcione na plataformaWindows e IIS), um servidor Cold-Fusion custa perto de 15 000reais, o que de cara desanima mui-ta gente. Mas se você quiser ex-perimentar, há uma versão doColdFusion MX 7 Enterprise parateste por 30 dias disponível paradownload (www.info.abril.com.br/download/2152.shtml), alémda versão Developer, gratuita, comfunções apenas para desenvolvi-mento de aplicações.

ASP.NET, A INTEGRADORAA arquitetura ASP.Net promete ex-pandir os recursos do ASP e atrairdesenvolvedores de outras lingua-gens. Faz parte da estratégia .Net, daMicrosoft, cujo objetivo é integrar asferramentas de produção e distribui-ção de serviços pela internet.

Uma das principais característi-cas da plataforma é permitir o de-senvolvimento em várias lingua-gens. Seguindo uma série de pro-cedimentos, pode-se escrever, porexemplo, um programa em Perlpara ASP.Net. Outros ambientessuportados são o Visual Basic, oPython, o C#, e o Visual C++. A au-

como o ASP e o ColdFusion, o PHPainda se mantém entre as soluçõesmais utilizadas na construção dewebsites dinâmicos. O downloaddo código fonte e dos arquivospara Windows pode ser feito emwww.info.abril.com.br/download/3203.shtml.

JSP, A ECLÉTICAA JSP (Java ServerPages) é a alterna-tiva de programa-ção de sites dinâmi-cos elaborada pelaSun, criadora do Ja-

va. Como dá para desconfiar, o co-nhecimento de Java é pré-requisi-to para o desenvolvimento em JSP,o que de cara afasta muita gente.A linguagem Java é robusta e temfunções extremamente mais com-plexas do que o desenvolvimentoweb. Dessa forma, aprender Javaapenas para criar páginas em JSPpode ser um exagero, já que exis-tem opções mais simples.

A JSP conta com todas as vanta-gens da linguagem Java e a princi-pal delas é a portabilidade. As pá-ginas JSP rodam tanto em máqui-nas Unix como em Windows compouquíssimas modificações. Umadas características da linguagem éa possibilidade de criar “bibliote-cas de comandos”. Com isso, blo-cos de comandos podem ser arma-zenados e inseridos nas páginasquando necessário. As páginas JSPsão armazenadas num servlet Ja-

va, ou seja, compiladas num pe-queno programa. Esse servlet é ge-rado na primeira vez em que a pá-gina é requisitada e depois fica per-manentemente disponível no ser-vidor. As páginas JSP podem sercriadas em sintaxe compatível como XML, o que facilita a distribuição.

COLDFUSION, A CARA DO XMLA tecnologia ColdFu-sion foi desenvolvi-da pela Allaire, pro-dutora do conhecidoeditor HTML Home-

Site e de outros softwares para de-senvolvimento web. No início de2001, a Allaire foi comprada pela Ma-cromedia, dona da tecnologia Flashe do editor Dreamweaver. A Macro-media tratou de aumentar a integra-ção do ColdFusion com seus produ-tos e aprimorar a tecnologia, reba-tizada de ColdFusion MX (veja o tes-te da versão MX 7 na página 16).

Essa plataforma utiliza uma lin-guagem própria, a CFML (ColdFusionMarkup Language), para criar os tem-plates e recursos dinâmicos. As pá-ginas podem ser reconhecidas pelaextensão .cfm. A linguagem CFML ébastante parecida com o HTML e oXML. Para que o ColdFusion funcio-ne, é necessário um aplicativo exter-no, que processará o código CFML.Esse aplicativo é o ColdFusion MXServer, que roda em conjunto como servidor web. Ele recebe as pági-nas .cfm, executa o código (fazendo

sência mais notada é a linguagemJava, mas isso não chega a ser umagrande surpresa. Microsoft e Suntravam uma batalha ferrenha eninguém esperava que a empre-sa de Bill Gates apoiasse a rival.

J2EE, A SUPERMÁQUINAA tecnologia J2EE(Java 2 EnterpriseEdition) tem pontosem comum com a.NET, da Microsoft.Ambas fornecem ar-

quitetura de componentes para aconstrução de sistemas distribuí-dos, oferecendo recursos similarespara o desenvolvimento de aplica-ções para internet e web services.

Os componentes Enterprise Ja-vaBeans permitem o acesso auto-mático a objetos no banco de da-dos. A tecnologia utiliza o concei-to de máquina virtual, no qual aslinguagens de programação sãocompiladas num código interme-diário, chamado bytecode.

A Máquina Virtual Java é utiliza-da para mapear uma mesma lin-guagem nas mais diversas plata-formas. Essa característica permi-te que uma aplicação corporativafeita para sistema operacional Win-dows possa rodar sem alteraçõesem Unix ou até em mainframes.Para a integração com outros sis-temas, o J2EE oferece suporte aopadrão Corba e outras facilidades,como os Java Connectors.


FERRAMENTAS/PHP

COLEÇÃO INFO > 15

FERRAMENTAS/PHP


popular linguagem PHPchegou à versão 5 com-pletamente repaginada.Programadores adeptos

do código-fonte aberto refizeramgrande parte do código da versãoanterior, a 4.3, introduzindo avan-ços significativos no suporte a XML,orientação a objetos e a banco dedados MySQL. INFO foi conferir. Noteste, utilizamos um micro Dell comprocessador Pentium 4 de 2,4 GHz,256 MB de RAM, disco de 40 GB e

sistema Windows XP Professional. Oservidor web usado foi o IIS 5.1.

O banco de dados MySQL é par-ceiro fiel do PHP na maioria dos si-tes dinâmicos. Mas muitas das novi-dades apresentadas no MySQL 4.1 eno beta do 5.0 não eram suportadasadequadamente pelo PHP 4.3. Porisso, a extensão MySQL do PHP 5 foitotalmente reformulada. Batizada deMySQLi (MySQL Improved), a novaextensão traz como principal novi-dade o recurso de orientação a ob-

O XML DESLIZANO PHP 5

A LINGUAGEM DÁ UM SALTO DE QUALIDADE E FACILITA A VIDA DO PROGRAMADOR

POR ANDRÉ CARDOZO

A

jetos aplicado ao MySQL, atribuindométodos e propriedades a compo-nentes do banco de dados.

Outra boa novidade para quemlida com armazenamento de infor-mação é a SQLi-te. Essa bibliote-ca funciona co-mo um banco dedados e já vemembutida no PHP5. Assim, no casode aplicações mais simples, os pro-gramadores podem usar a SQLiteem vez de instalar um banco de da-dos completo.

O XML foi outro ponto debulha-do pela equipe do PHP 5 na cria-ção do novo código. Agora, todasas extensões referentes à lingua-gem são baseadas na biblioteca

libxml2, desenvolvida pelos pro-gramadores do projeto Gnome. Es-sa biblioteca implementa de umasó vez diversas funcionalidades re-lacionadas ao XML, todas de acor-

do com os pa-drões estabeleci-dos pelo W3C.

Uma nova ex-tensão que facili-ta o acesso e amanipulação dos

arquivos XML é a SimpleXML. Comela, o programador trabalha comdocumentos XML como se fossemobjetos nativos do PHP, evitando autilização do padrão DOM, bem maiscomplexo. A extensão referente aométodo DOM foi completamentereescrita, também de acordo comas especificações do consórcio W3C.

PHP 5> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> COMPATIBILIDADE

> XML

> MYSQL

> AVALIAÇÃO FINAL(1)

> PREÇO

> CUSTO/BENEFÍCIO

> ONDE ENCONTRAR

PHP Group

Linguagem para produção de sites dinâmicos

Mais suporte a orientação de objetos

Alguns scripts antigos precisam ser reescritos

7,5Biblioteca libxml2 obedece aos padrões do W3C

7,5Extensão SimpleXML facilita o acesso adocumentos do padrão

8,0Nova extensão suporta funcionalidades dasversões 4.1 e 5 do banco de dados

7,6

Grátis

www.info.abril.com.br/download/3203.shtml

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Compatibilidade (40%),XML (30%) e MySQL (30%).PHP 5: avanços no suporte a XML, orientação a objetos e a banco de dados MySQL

DOMSigla de Document Object Model.

Padrão para manipulação deobjetos em páginas web baseadas

em HTML ou XML

FERRAMENTAS/ PHP 23.05.05 16:26 Page 14

FERRAMENTAS/PHP

COLEÇÃO INFO > 15

FERRAMENTAS/PHP


popular linguagem PHPchegou à versão 5 com-pletamente repaginada.Programadores adeptos

do código-fonte aberto refizeramgrande parte do código da versãoanterior, a 4.3, introduzindo avan-ços significativos no suporte a XML,orientação a objetos e a banco dedados MySQL. INFO foi conferir. Noteste, utilizamos um micro Dell comprocessador Pentium 4 de 2,4 GHz,256 MB de RAM, disco de 40 GB e

sistema Windows XP Professional. Oservidor web usado foi o IIS 5.1.

O banco de dados MySQL é par-ceiro fiel do PHP na maioria dos si-tes dinâmicos. Mas muitas das novi-dades apresentadas no MySQL 4.1 eno beta do 5.0 não eram suportadasadequadamente pelo PHP 4.3. Porisso, a extensão MySQL do PHP 5 foitotalmente reformulada. Batizada deMySQLi (MySQL Improved), a novaextensão traz como principal novi-dade o recurso de orientação a ob-

O XML DESLIZANO PHP 5

A LINGUAGEM DÁ UM SALTO DE QUALIDADE E FACILITA A VIDA DO PROGRAMADOR

POR ANDRÉ CARDOZO

A

jetos aplicado ao MySQL, atribuindométodos e propriedades a compo-nentes do banco de dados.

Outra boa novidade para quemlida com armazenamento de infor-mação é a SQLi-te. Essa bibliote-ca funciona co-mo um banco dedados e já vemembutida no PHP5. Assim, no casode aplicações mais simples, os pro-gramadores podem usar a SQLiteem vez de instalar um banco de da-dos completo.

O XML foi outro ponto debulha-do pela equipe do PHP 5 na cria-ção do novo código. Agora, todasas extensões referentes à lingua-gem são baseadas na biblioteca

libxml2, desenvolvida pelos pro-gramadores do projeto Gnome. Es-sa biblioteca implementa de umasó vez diversas funcionalidades re-lacionadas ao XML, todas de acor-

do com os pa-drões estabeleci-dos pelo W3C.

Uma nova ex-tensão que facili-ta o acesso e amanipulação dos

arquivos XML é a SimpleXML. Comela, o programador trabalha comdocumentos XML como se fossemobjetos nativos do PHP, evitando autilização do padrão DOM, bem maiscomplexo. A extensão referente aométodo DOM foi completamentereescrita, também de acordo comas especificações do consórcio W3C.

PHP 5> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> COMPATIBILIDADE

> XML

> MYSQL

> AVALIAÇÃO FINAL(1)

> PREÇO

> CUSTO/BENEFÍCIO

> ONDE ENCONTRAR

PHP Group

Linguagem para produção de sites dinâmicos

Mais suporte a orientação de objetos

Alguns scripts antigos precisam ser reescritos

7,5Biblioteca libxml2 obedece aos padrões do W3C

7,5Extensão SimpleXML facilita o acesso adocumentos do padrão

8,0Nova extensão suporta funcionalidades dasversões 4.1 e 5 do banco de dados

7,6

Grátis


(1) Média ponderada considerando os seguintes itens e respectivos pesos: Compatibilidade (40%),XML (30%) e MySQL (30%).PHP 5: avanços no suporte a XML, orientação a objetos e a banco de dados MySQL

DOMSigla de Document Object Model.

Padrão para manipulação deobjetos em páginas web baseadas

em HTML ou XML

FERRAMENTAS/ PHP 23.05.05 16:26

FERRAMENTAS/COLDFUSION

COLEÇÃO INFO > 17



criação de relatórios,formulários e outroscomponentes comunsde um site costuma to-

mar mais tempo do que o desen-volvedor de aplicações gostaria.Atenta à questão da produtivida-de, a Macromedia procurou facili-tar essas tarefas freqüentes no Cold-Fusion MX 7, a versão mais recen-te de seu veterano servidor de apli-cações. Além disso, o software agre-gou novos recursos que permitemque os aplicativos se co-muniquem por SMS emensagens instantâneas.Na análise feita peloINFOLAB, a nova versãonão revela nenhuma re-forma radical como foi apassagem do ColdFusion5 para o MX (6), em 2002.Mas traz acréscimosbem-vindos num mo-mento em que produti-vidade é uma meta oni-presente nas empresas.

Quando a Allaire criou o ColdFu-sion, em 1995, seu objetivo era teruma maneira prática de fazer as pá-ginas da web trocarem informações comos bancos de dados. Depois que aAllaire foi comprada pela Macrome-dia, o ColdFusion evoluiu para umaplataforma completa com linguagemde script, comunicação com bancosde dados, funções para a implemen-tação de serviços web, suporte pa-ra conteúdo multimídia e recursosde segurança. Desde a versão MX, o

GANHE TEMPOCOM O

COLDFUSION A VERSÃO MX 7 DO SERVIDOR DE APLICAÇÕES GANHOU

FUNÇÕES QUE AGILIZAM O DESENVOLVIMENTOPOR MAURÍCIO GREGO

A

servidor de aplicações,em si, pode até ser outro.Os aplicativos em ColdFu-sion são convertidos pa-ra bytecode Java e podemrodar em servidores deoutras empresas.

O INFOLAB analisou oColdFusion MX 7 Enter-prise, a edição mais com-pleta. Melhorou a cria-ção de formulários, usa-dos nos sites para dispa-rar buscas, fazer compras e cadas-trar dados, por exemplo. O desen-volvedor pode produzir formuláriosem HTML, CSS e JavaScript usandoos comandos habituais da CFML, alinguagem de script do ColdFusion.Mas agora é possível gerar formu-lários em Flash de maneira muitosimples. Basta acrescentar um pa-râmetro (format=”flash”) ao coman-do que inicia o formulário. E a for-matação pode ser feita com a apli-cação de “peles” baseadas em CSS.

> RELATÓRIOS MAIS SIMPLESOs relatórios ficaram mais fáceis deser desenvolvidos no ColdFusion MX7. Eles são outro componente básicode qualquer site dinâmico. Aparecemna forma de recibos de transações eresultados de pesquisas, por exem-plo. Nas versões anteriores, as opçõesde formatação e organização das in-formações eram limitadas. Agora, opacote da Macromedia inclui um pro-grama específico para a produção derelatórios, o Report Builder. Nele, fi-

ca mais fácil definir que dados vãoaparecer no relatório e como estarãoorganizados. Os relatórios geradospodem ser embutidos em páginasHTML e visualizados normalmente nobrowser. Também podem ser conver-tidos para PDF ou para o FlashPaper,formato próprio da Macromedia. Es-sa é outra novidade, já que, nas ver-sões anteriores, a produção de docu-mentos nesses formatos dependia desoftwares adicionais. Esse recurso po-de facilitar a produção de versões pa-ra imprimir documentos.

> GATEWAYS DE EVENTOSOutro acréscimo são os gateways deeventos. Eles permitem que os apli-cativos online se comuniquem pore-mail, SMS ou mensagens instantâ-neas. Uma loja online pode, porexemplo, enviar um SMS ao compra-dor para avisar que o produto queele adquiriu foi despachado para en-trega. O servidor também pode, ago-ra, reagir a uma variedade de even-tos relacionados com o próprio apli-

Relatórios: o Report Builder define o layout

Gateways: permitem comunicação por e-mail e SMS

FERRAMENTAS/COLDFUSION 23.05.05 16:28 Page 16


COLEÇÃO INFO > 17



criação de relatórios,formulários e outroscomponentes comunsde um site costuma to-

mar mais tempo do que o desen-volvedor de aplicações gostaria.Atenta à questão da produtivida-de, a Macromedia procurou facili-tar essas tarefas freqüentes no Cold-Fusion MX 7, a versão mais recen-te de seu veterano servidor de apli-cações. Além disso, o software agre-gou novos recursos que permitemque os aplicativos se co-muniquem por SMS emensagens instantâneas.Na análise feita peloINFOLAB, a nova versãonão revela nenhuma re-forma radical como foi apassagem do ColdFusion5 para o MX (6), em 2002.Mas traz acréscimosbem-vindos num mo-mento em que produti-vidade é uma meta oni-presente nas empresas.

Quando a Allaire criou o ColdFu-sion, em 1995, seu objetivo era teruma maneira prática de fazer as pá-ginas da web trocarem informações comos bancos de dados. Depois que aAllaire foi comprada pela Macrome-dia, o ColdFusion evoluiu para umaplataforma completa com linguagemde script, comunicação com bancosde dados, funções para a implemen-tação de serviços web, suporte pa-ra conteúdo multimídia e recursosde segurança. Desde a versão MX, o

GANHE TEMPOCOM O

COLDFUSION A VERSÃO MX 7 DO SERVIDOR DE APLICAÇÕES GANHOU

FUNÇÕES QUE AGILIZAM O DESENVOLVIMENTOPOR MAURÍCIO GREGO

A

servidor de aplicações,em si, pode até ser outro.Os aplicativos em ColdFu-sion são convertidos pa-ra bytecode Java e podemrodar em servidores deoutras empresas.

O INFOLAB analisou oColdFusion MX 7 Enter-prise, a edição mais com-pleta. Melhorou a cria-ção de formulários, usa-dos nos sites para dispa-rar buscas, fazer compras e cadas-trar dados, por exemplo. O desen-volvedor pode produzir formuláriosem HTML, CSS e JavaScript usandoos comandos habituais da CFML, alinguagem de script do ColdFusion.Mas agora é possível gerar formu-lários em Flash de maneira muitosimples. Basta acrescentar um pa-râmetro (format=”flash”) ao coman-do que inicia o formulário. E a for-matação pode ser feita com a apli-cação de “peles” baseadas em CSS.

> RELATÓRIOS MAIS SIMPLESOs relatórios ficaram mais fáceis deser desenvolvidos no ColdFusion MX7. Eles são outro componente básicode qualquer site dinâmico. Aparecemna forma de recibos de transações eresultados de pesquisas, por exem-plo. Nas versões anteriores, as opçõesde formatação e organização das in-formações eram limitadas. Agora, opacote da Macromedia inclui um pro-grama específico para a produção derelatórios, o Report Builder. Nele, fi-

ca mais fácil definir que dados vãoaparecer no relatório e como estarãoorganizados. Os relatórios geradospodem ser embutidos em páginasHTML e visualizados normalmente nobrowser. Também podem ser conver-tidos para PDF ou para o FlashPaper,formato próprio da Macromedia. Es-sa é outra novidade, já que, nas ver-sões anteriores, a produção de docu-mentos nesses formatos dependia desoftwares adicionais. Esse recurso po-de facilitar a produção de versões pa-ra imprimir documentos.

> GATEWAYS DE EVENTOSOutro acréscimo são os gateways deeventos. Eles permitem que os apli-cativos online se comuniquem pore-mail, SMS ou mensagens instantâ-neas. Uma loja online pode, porexemplo, enviar um SMS ao compra-dor para avisar que o produto queele adquiriu foi despachado para en-trega. O servidor também pode, ago-ra, reagir a uma variedade de even-tos relacionados com o próprio apli-

Relatórios: o Report Builder define o layout

Gateways: permitem comunicação por e-mail e SMS

FERRAMENTAS/COLDFUSION 23.05.05 16:28


18 < COLEÇÃO INFO18 < COLEÇÃO INFO

cativo. Consegue, por exemplo, dis-parar uma ação no início ou no fimde uma sessão ou requisição dousuário ou quando ocorre uma de-terminada condição de erro.

O ColdFusion incorporou exten-sões para o Dreamweaver. Elas per-mitem realizar tarefas como conec-tar a base de dados ao servidor semsair do ambiente de desenvolvimen-to. Como já acontecia em versões an-teriores, o produto não inclui ferra-mentas de programação. A idéia éque o desenvolvedor adquira sepa-radamente o Dreamweaver.

Pode-se notar que o forte do Cold-Fusion continua sendo o desenvolvi-mento rápido do front-end, a partedo aplicativo que interage com o usuá-rio na web. Empresas que necessitamde mais robustez e desempenho naparte que processa as transações po-

dem combinar o front-end em Cold-Fusion com programas de retaguar-da implementados na forma de clas-ses Java ou, no caso do ambiente .Net,de objetos COM. Esses objetos e clas-ses são, então, ativados de dentro deum script do ColdFusion.

Além da edição Enterprise, o Cold-Fusion MX 7 é oferecido em maisduas. A edição Standard não incluios gateways de eventos e tem limi-tações de capacidade. É recomen-dada para sites menores, que ro-dam num único servidor. Já a edi-ção Developer é distribuída gratui-tamente, mas permite acesso ao ser-vidor apenas na rede local. Quemquiser experimentar o ColdFusionMX 7 pode baixar a versão Develo-per ou um demo da Enterprise noendereço www.info.abril.com.br/download/2152.shtml.

ColdFusion MX 7 Enterprise> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> LINGUAGEM DEPROGRAMAÇÃO

> FERRAMENTAS

> COMPATIBILIDADE

> AVALIAÇÃO TÉCNICA(1)

> PREÇOS (R$)

> CUSTO/BENEFÍCIO

Macromedia

Plataforma para aplicativos na web

Os novos recursos agilizam o desenvolvimento

O pacote não inclui editor de programas

8,8A linguagem CFML é poderosa e de rápidoaprendizado

7,9Novas funções facilitam a produção deformulários e relatórios

8,2Trabalha com vários servidores de aplicações ebancos de dados

8,3

14 877 (completo)7 438 (atualização)

7,0

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Linguagemde programação (35%), Ferramentas de gerenciamento (35%) e Compatibilidade (30%).

FERRAMENTAS/COLDFUSION 23.05.05 16:28 Page 18

FERRAMENTAS/MYSQL


s bancos de dados opensource estão cada vezmais presentes nas em-presas. Nas pequenas,

com suas aplicações simples e rápi-das, podem dar conta de todo o tra-balho. No mundo corporativo, aten-dem às necessidades de muitos de-partamentos. O nome mais expres-sivo desse grupo, que inclui Post-greSQL e Firebird, é o MySQL, da

empresa sueca MySQL AB. Rápido,multiplataforma, gratuito (apenas osuporte é cobrado) e fácil de usar,ele já é bastante utilizado na mon-tagem de sites dinâmicos e começaa ser empregado em intranets.

Pequeno no tamanho, mas gran-de nas aplicações que pode rodar,o MySQL é compatível com o pa-drão SQL (Ansi) e pode trabalharcom várias plataformas. Em siste-

DADOS LIVRESCOM O MYSQL

ESTÁVEL, RÁPIDO E FÁCIL DE USAR, ELE É A ESTRELA DOS BANCOS DE DADOS DE CÓDIGO ABERTO

O

© ILUSTRAÇÃO CELLUS

FERRAMENTAS/MY SQL 1 24.05.05 12:38 Page 19

FERRAMENTAS/MYSQL

COLEÇÃO INFO > 21

FERRAMENTAS/MYSQL


ladas; se já é experiente, baixe o có-digo-fonte para compilar em seuservidor. No tutorial de instalaçãoa seguir, utilizamos o MySQL Maxna distribuição Linux Suse 9.2, comservidor web Apache, PHP e com-partilhador de arquivos Samba.

> A INSTALAÇÃO

1. Antes de mais nada, gere umgrupo de usuários chamado mysqlcom o seguinte comando:groupadd mysql

Em seguida, crie um usuáriomysql digitando:useradd –g mysql mysql

Esse usuário será utilizado pelosprogramas para entrar no MySQL,fazer pesquisas e trazer resultados.

2. Depois de terminado o down-load, vá até o diretório onde estásalvo o arquivo e descompacte usan-do o tar. Para isso, digite a linha:tar xvzf mysql-xxxx.tar.gz

O xxxx é o espaço em que você de-ve colocar a versãoque você baixou. Is-so vai criar um di-retório mysql-xxxx.

3. Localize esse di-retório e dê umaboa olhada nos ar-quivos de READ-ME. Eles podemajudá-lo em váriassituações críticas.Nessa versão doMySQL não é ne-cessário compilaro programa, ele já

vem pronto para ser usado, entãoapenas renomeie o diretório mysql-xxx para mysql:mv mysql-xxx mysql

4.Agora vamos instalar os bancos dedados-padrão necessários para que oMySQL funcione, dando o comandoscripts/mysql_install_db

5. Acerte as permissões do diretó-rio de instalação da seguinte forma:chown –R root .chown –R mysql datachgrp –R mysql .

6. Inicie o mysql combin/mysqld_safe --user=mysql &

7. É preciso dar ao programa a ca-pacidade de começar e parar o ser-viço quando o servidor inicializar equando desligar. Como ele já vemcom um script que faz isso, copie oarquivo supprot-files/mysql.serverpara o diretório /etc/rc.d e configu-re o sistema para carregá-lo. No Su-se, basta abrir o YaST System e aces-sar o editor de runlevel.

YaST: facilidade do Suse no controle do banco de dados

mas Unix, ele temcapacidades mul-tithread, ou seja,roda várias versõesdele mesmo. NoWindows NT, 2000,XP ou 2003, oMySQL roda comoum serviço. Já noWindows 95/98, fi-ca como uma jane-la do DOS minimi-zada. O banco dedados também con-ta com drivers deODBC para outras aplicações.

Instalado em um servidor isola-do, o MySQL é um banco de dadosveloz e estável. O grande diferencialestá na possibilidade de se integrarà internet por meio de um interpre-tador de linguagem, como PHP, Perlou TCL e até mesmo ASP. Essa com-binação, instalada e compilada, porexemplo, em um servidor rodandoo Apache, gera páginas dinâmicascom as informações vindas em tem-po real do banco de dados.

Se você não tem um servidor pró-prio e utiliza um provedor para hos-pedar seu site, é preciso encontrar umque já ofereça esse serviço. Isso por-que a instalação do PHP e do MySQLpara montagem de sites dinâmicosexige ter direitos sobre o servidor. Porquestões de segurança, os provedo-res normalmente não dão essas liber-dades a quem opta por serviços dehosting compartilhado. Porém, se vo-cê é o administrador de seu servidor,

primeiramente deve ter o Apache ro-dando como servidor de web.

O primeiro passo é baixar a últimaversão do MySQL (www.info.abril.com.br/download/2901.shtml), queestá diponível em quatro sabores:• MySQL Standard – Conta com as

funções-padrão e suporte a InnoDB,sistema de transações seguras.

• MySQL Max – Inclui as funçõesda versão Standard e recursos no-vos avançados, como sistemas dearmazenamento para cluster eBerkeley Database.

• MySQL Cluster – Versão de altaperformance para cluster de ban-co de dados.

• MaxDB – Edição para grandes em-presas,antes conhecida como SAP DB.O MySQL-padrão está na versão

4.1.11. Já existe uma versão 5.0 emdesenvolvimento, liberada apenaspara testes. Se você está começan-do no mundo Unix, pode escolheruma das várias opções pré-compi-

MySQL Control Center: visualização e controle de funções


FERRAMENTAS/MYSQL

COLEÇÃO INFO > 21

FERRAMENTAS/MYSQL


ladas; se já é experiente, baixe o có-digo-fonte para compilar em seuservidor. No tutorial de instalaçãoa seguir, utilizamos o MySQL Maxna distribuição Linux Suse 9.2, comservidor web Apache, PHP e com-partilhador de arquivos Samba.

> A INSTALAÇÃO

1. Antes de mais nada, gere umgrupo de usuários chamado mysqlcom o seguinte comando:groupadd mysql

Em seguida, crie um usuáriomysql digitando:useradd –g mysql mysql

Esse usuário será utilizado pelosprogramas para entrar no MySQL,fazer pesquisas e trazer resultados.

2. Depois de terminado o down-load, vá até o diretório onde estásalvo o arquivo e descompacte usan-do o tar. Para isso, digite a linha:tar xvzf mysql-xxxx.tar.gz

O xxxx é o espaço em que você de-ve colocar a versãoque você baixou. Is-so vai criar um di-retório mysql-xxxx.

3. Localize esse di-retório e dê umaboa olhada nos ar-quivos de READ-ME. Eles podemajudá-lo em váriassituações críticas.Nessa versão doMySQL não é ne-cessário compilaro programa, ele já

vem pronto para ser usado, entãoapenas renomeie o diretório mysql-xxx para mysql:mv mysql-xxx mysql

4.Agora vamos instalar os bancos dedados-padrão necessários para que oMySQL funcione, dando o comandoscripts/mysql_install_db

5. Acerte as permissões do diretó-rio de instalação da seguinte forma:chown –R root .chown –R mysql datachgrp –R mysql .

6. Inicie o mysql combin/mysqld_safe --user=mysql &

7. É preciso dar ao programa a ca-pacidade de começar e parar o ser-viço quando o servidor inicializar equando desligar. Como ele já vemcom um script que faz isso, copie oarquivo supprot-files/mysql.serverpara o diretório /etc/rc.d e configu-re o sistema para carregá-lo. No Su-se, basta abrir o YaST System e aces-sar o editor de runlevel.

YaST: facilidade do Suse no controle do banco de dados

mas Unix, ele temcapacidades mul-tithread, ou seja,roda várias versõesdele mesmo. NoWindows NT, 2000,XP ou 2003, oMySQL roda comoum serviço. Já noWindows 95/98, fi-ca como uma jane-la do DOS minimi-zada. O banco dedados também con-ta com drivers deODBC para outras aplicações.

Instalado em um servidor isola-do, o MySQL é um banco de dadosveloz e estável. O grande diferencialestá na possibilidade de se integrarà internet por meio de um interpre-tador de linguagem, como PHP, Perlou TCL e até mesmo ASP. Essa com-binação, instalada e compilada, porexemplo, em um servidor rodandoo Apache, gera páginas dinâmicascom as informações vindas em tem-po real do banco de dados.

Se você não tem um servidor pró-prio e utiliza um provedor para hos-pedar seu site, é preciso encontrar umque já ofereça esse serviço. Isso por-que a instalação do PHP e do MySQLpara montagem de sites dinâmicosexige ter direitos sobre o servidor. Porquestões de segurança, os provedo-res normalmente não dão essas liber-dades a quem opta por serviços dehosting compartilhado. Porém, se vo-cê é o administrador de seu servidor,

primeiramente deve ter o Apache ro-dando como servidor de web.

O primeiro passo é baixar a últimaversão do MySQL (www.info.abril.com.br/download/2901.shtml), queestá diponível em quatro sabores:• MySQL Standard – Conta com as

funções-padrão e suporte a InnoDB,sistema de transações seguras.

• MySQL Max – Inclui as funçõesda versão Standard e recursos no-vos avançados, como sistemas dearmazenamento para cluster eBerkeley Database.

• MySQL Cluster – Versão de altaperformance para cluster de ban-co de dados.

• MaxDB – Edição para grandes em-presas,antes conhecida como SAP DB.O MySQL-padrão está na versão

4.1.11. Já existe uma versão 5.0 emdesenvolvimento, liberada apenaspara testes. Se você está começan-do no mundo Unix, pode escolheruma das várias opções pré-compi-

MySQL Control Center: visualização e controle de funções

FERRAMENTAS/MY SQL 1 23.05.05 16:31

FERRAMENTAS/MYSQL

COLEÇÃO INFO > 23

FERRAMENTAS/MYSQL

22 < COLEÇÃO INFO

Nesse comando, o xxx se refereà versão que você escolheu. Loca-lize o diretório php-4.xxx que foicriado na descompactação e digiteeste comando (na mesma linha):./configure--with-mysql--with-apache=../apache_xxxx--enable-track-vars

O xxxx, desta vez, é para a ver-são do Apache. Ele irá compilar

o PHP com suporte a MySQL eApache.

2.Agora, no mesmo diretório, digite:make

Pressione Enter. Quando estiverconcluído, escreva:make install

Aperte Enter. Seu Unix ou Linuxirá compilar o PHP para funcionarcom o kernel da máquina.

Se você tentou instalar aversão 4 do MySQL no seuWindows pode ter encontradoalguma dificuldade ao fazer aconexão com o banco edeparado com o erro:Client does not supportauthentication protocolrequested by server; considerupgradingMySQL clientIsso aconteceporque o clientpara MySQL quevem no PHP 4não tem totalsuporte à versão4, apenas para a3. Mas não sedesespere — oúnico conflitoque existe é naautenticação.Para resolver oproblema, salveas senhas no

modo de autenticação antigo.Basta executar esta query:update user set password =old_password(‘senha’) whereuser = ‘usuário’;flush privileges;Assim, para esse usuário seráusado o método deautenticação do MySQL 3.

MYSQL NO WINDOWS

Alterando senha: para PHP 4 rodando em Windows

Administração: a aba Status dá agilidadepara fazer comparações do uso do servidor

> O PHPAgora que você já tem o MySQL con-figurado e rodando, necessita doPHP para completar o serviço de in-teratividade. Depois de instalar oPHP, você precisará compilar o Apa-che para trabalhar com MySQL ePHP. Caso a sua instalação do PHPnão tenha suporte a MySQL, siga osseguintes passos:

1. Baixe a última versão do código-fonte do PHP (www.info.abril.com.br/download/2550.shtml). No nos-so teste, usamos a edição 4.3.11, umavez que a 5.0 ainda apresenta pro-blemas de compatibilidade. Nave-gue até o diretório /usr/local/src eexpanda o arquivo com:tar -xvzf php-4.xxx.tar.gz

O MySQL não vem com uma interface gráfica para seu gerenciamento,mas isso não é problema.Existem vários programasque fazem esse trabalho e estão disponíveis paradownload na internet.A própria MySQL AB contacom uma interface decontrole. A versão antiga se chamava MySQLGUI e foi substituída pela MySQL Control Center. Ela pode ser baixadagratuitamente emwww.info.abril.com.br/download/3185.shtml.O MySQLCC permite montarqueries (pesquisas nosbancos de dados) utilizandoa sintaxe de edição de textodo SQL e apresenta osresultados em tabelas.Com o MySQLCC vocêtambém pode criar egerenciar os bancos dedados e as tabelas. Alémdisso, é possível reparar e otimizar as tabelas.Por fim, o MySQLCC faz o gerenciamento doservidor, podendo mudar as variáveise mostrar como estão os recursos em uso.

GERENCIAMENTOGRÁFICO


FERRAMENTAS/MYSQL

COLEÇÃO INFO > 23

FERRAMENTAS/MYSQL

22 < COLEÇÃO INFO

Nesse comando, o xxx se refereà versão que você escolheu. Loca-lize o diretório php-4.xxx que foicriado na descompactação e digiteeste comando (na mesma linha):./configure--with-mysql--with-apache=../apache_xxxx--enable-track-vars

O xxxx, desta vez, é para a ver-são do Apache. Ele irá compilar

o PHP com suporte a MySQL eApache.

2.Agora, no mesmo diretório, digite:make

Pressione Enter. Quando estiverconcluído, escreva:make install

Aperte Enter. Seu Unix ou Linuxirá compilar o PHP para funcionarcom o kernel da máquina.

Se você tentou instalar aversão 4 do MySQL no seuWindows pode ter encontradoalguma dificuldade ao fazer aconexão com o banco edeparado com o erro:Client does not supportauthentication protocolrequested by server; considerupgradingMySQL clientIsso aconteceporque o clientpara MySQL quevem no PHP 4não tem totalsuporte à versão4, apenas para a3. Mas não sedesespere — oúnico conflitoque existe é naautenticação.Para resolver oproblema, salveas senhas no

modo de autenticação antigo.Basta executar esta query:update user set password =old_password(‘senha’) whereuser = ‘usuário’;flush privileges;Assim, para esse usuário seráusado o método deautenticação do MySQL 3.

MYSQL NO WINDOWS

Alterando senha: para PHP 4 rodando em Windows

Administração: a aba Status dá agilidadepara fazer comparações do uso do servidor

> O PHPAgora que você já tem o MySQL con-figurado e rodando, necessita doPHP para completar o serviço de in-teratividade. Depois de instalar oPHP, você precisará compilar o Apa-che para trabalhar com MySQL ePHP. Caso a sua instalação do PHPnão tenha suporte a MySQL, siga osseguintes passos:

1. Baixe a última versão do código-fonte do PHP (www.info.abril.com.br/download/2550.shtml). No nos-so teste, usamos a edição 4.3.11, umavez que a 5.0 ainda apresenta pro-blemas de compatibilidade. Nave-gue até o diretório /usr/local/src eexpanda o arquivo com:tar -xvzf php-4.xxx.tar.gz

O MySQL não vem com uma interface gráfica para seu gerenciamento,mas isso não é problema.Existem vários programasque fazem esse trabalho e estão disponíveis paradownload na internet.A própria MySQL AB contacom uma interface decontrole. A versão antiga se chamava MySQLGUI e foi substituída pela MySQL Control Center. Ela pode ser baixadagratuitamente emwww.info.abril.com.br/download/3185.shtml.O MySQLCC permite montarqueries (pesquisas nosbancos de dados) utilizandoa sintaxe de edição de textodo SQL e apresenta osresultados em tabelas.Com o MySQLCC vocêtambém pode criar egerenciar os bancos dedados e as tabelas. Alémdisso, é possível reparar e otimizar as tabelas.Por fim, o MySQLCC faz o gerenciamento doservidor, podendo mudar as variáveise mostrar como estão os recursos em uso.

GERENCIAMENTOGRÁFICO

FERRAMENTAS/MY SQL 1 23.05.05 16:32

FERRAMENTAS/MYSQL

24 < COLEÇÃO INFO

> O SERVIDOR WEBCom essa etapa completada, é pre-ciso fazer com que o Apache reco-nheça e trabalhe com PHP.

1. Navegue até o diretório do Apa-che e digite na mesma linha:./configure --prefix=/www --activate-module=src/modules/php4/libphp4.a

Esse comando cria o diretório/www, onde ficará guardado o seusite. Agora digite:make

E aperte Enter. Quando o coman-do terminar, digite:make install

Tecle Enter novamente. Esse co-mando irá compilar o Apache parafuncionar com o kernel de sua má-quina. Quando a compilação termi-nar, navegue até o diretório php4-4.x e digite o seguinte:

cp php.ini-dist /usr/local/lib/php. ini

Assim você diz onde o PHP en-contra sua biblioteca de referência.

2. Para terminar, vá até o diretório/etc/httpd/conf e localize o arqui-vo httpd.conf. Abra-o em um editorde texto e coloque a seguinte linha:AddType application/x-httpd-php .php

Salve o arquivo. Esse comandovai dizer ao Apache para interpre-tar os arquivos .php como um ser-viço PHP.

Reinicie o Apache com o comando:apachectl restart

Pronto: você já pode começar aconstruir páginas dinâmicas. Para uti-lizar melhor o MySQL, você deveráaprender os comandos de realizaçãode pesquisas, criação de tabelas eadministração do banco de dados.

MySQL 4.1.11> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> RECURSOS

> FACILIDADE DE USO

> COMPATIBILIDADE


> PREÇO

> CUSTO/BENEFÍCIO

MySQL AB

Banco de dados de código aberto

Rápido e fácil de instalar e configurar

Não tem certos recursos sofisticados, comovistas (views)

6,0Todos os básicos mais transações

7,0Sem interface gráfica própria, pode sergerenciado por ferramentas auxiliares

9,0Tem versões para Windows, Mac OS, Linux eoutros sistemas baseados em Unix

7,2

Grátis

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Recursos(40%), Facilidade de uso (30%) e Compatibilidade (30%).


FERRAMENTAS/ACCESS


m dos bancos de dadosmais conhecidos domercado, o Access, daMicrosoft, é uma opção

interessante para a automação desites em tarefas despretensiosas.

Há basicamente duas formas de fa-zer com que a sua base Access vá pa-ra a internet. Uma delas consiste emligar o banco a uma linguagem de au-tomação, como PHP ou ASP. Outraopção, mais simples e com menos re-cursos, é recorrer a um software quelê as informações do banco de dadose as transforma em documentosHTML, estáticos. Vamos a elas.

1. Banco online Quem lida com linguagens de au-tomação, como PHP ou ASP, deveconfigurar o Data Source Name(DSN) do banco de dados. Com is-so, pode-se testar o site dinâmicolocalmente desde que haja um ser-vidor web instalado na máquina. ODSN serve como identificador dobanco de dados em qualquer cone-xão criada por meio do métodoODBC, presente no Windows.Faça o seguinte:A. No painel de controle do Windows,há um ícone chamado ODBC (em al-gumas versões do sistema ele está

dentro do grupo Ferra-mentas Administrativas).Clique nele para abrir ajanela do ODBC.

O ACCESS MANDABEM NA INTERNET

O BANCO DE DADOS PODE FUNCIONAR ONLINE OU OFFLINE, DE ACORDO COM A NECESSIDADE DO SITE

U

Access: a configuração do banco de dados,pelo método ODBC, é fácil

FERRAMENTAS/ ACCESS 23.05.05 16:35 Page 25

FERRAMENTAS/ACCESS

26 < COLEÇÃO INFO

B. Na aba DSN deusuário, escolha aopção Banco de da-dos Access e cliqueem Adicionar. C. Na tela seguin-te, selecione o dri-ver adequado aobanco. No caso, éo driver próprio doMicrosoft Access. D. A seguir, vocêdefinirá o nome deidentificação dobanco (DSN) e se-lecionará o arqui-vo mdb (botão Selecionar). A des-crição do DSN é opcional. Cliqueem OK e seu DSN estará criado.

Ao escolher a empresa de hospe-dagem para o site, é bom verificarse o servidor tem suporte para ban-cos Access. Além disso, o usuário de-ve informar ao administrador o DSNdo banco de dados para que ele pos-sa ser configurado corretamente.

2. Publicação offlineOutra maneira de criar um site combase em um banco de dados Ac-cess é usar um software auxiliarpara gerar as páginas. Existem di-versos programas com essa finali-dade na web. Escolhemos o DB toHTML Express (www.info.abril.com.br/download/3200.shtml), da XLi-neSoft, pela facilidade de uso. Ve-ja como ele funciona:A. Na tela principal, clicamos no bo-tão Connect para selecionar o ban-

co de dados e a tabela que fornece-rá os dados para as páginas. B. Depois, na tela de SQL, executa-mos a consulta. C. A partir daí, é gerada uma pági-na HTML e fazemos os ajustes ne-cessários na aba Page layout. É aquique podemos, por exemplo, regu-lar o número de registros exibidosem cada página. O DB to HTML in-clui links de Anterior e Próximo au-tomaticamente quando necessário. D. A aba Template preview mostrao código HTML do arquivo e per-mite fazer as modificações direta-mente na fonte. Na aba Preview te-mos o resultado.

Todo o processo de geração depáginas pode ser guardado comoum projeto. Assim, não precisamosrepetir o processo para criar nova-mente a página. Outros recursosúteis do programa são o upload viaFTP e a geração de arquivos PDF.

DB to HTML Express: a consulta na tela de SQL gera o HTML

FERRAMENTAS/ ACCESS 23.05.05 16:36 Page 26

FERRAMENTAS/FIREBIRD


banco de dados Firebirdestá cada vez melhor,acompanhando os avan-ços dos concorrentes de

código aberto MySQL e PostgreSQL.Nascido de uma iniciativa da Borlandde abrir o código do seu banco Inter-base 6, o Firebird chegou à versão 1.5bem mudado. Foi completamente tra-duzido da linguagem C para a C++ e,entre as novidades, traz as nestedtransactions, que permitem aplicarnovas regras de negócio quando umatransação encontra um erro, sem pre-cisar desfazer toda a operação. Paraa alegria geral dos usuários, forammantidos os pontos fortesdo Firebird em relação aosoutros bancos de dados decódigo aberto. Exemplossão os recursos de triggers,stored procedures e tran-sações concorrentes, quese beneficiam dos anos deexperiência e de correçãode código do Interbase. NoMySQL, o mais popularbanco de dados livre, es-sas funções só aparece-ram mais recentemente.

INFO testou a versão SuperServerdo Firebird (www.info.abril.com.br/download/2108.shtml), voltada pa-ra ambientes de produção. Outra ver-são, a Classic, é dedicada a ambien-tes de desenvolvimento, permitindoo acesso direto aos arquivos de da-dos e rodando tarefas em vários pro-cessos. A versão SuperServer é sobmedida para voar: usa threads, quepossibilitam criar tarefas de formamais leve do que processos, consu-mindo menos memória e recursos dosistema operacional. Em compensa-ção, o SuperServer não permite abriros arquivos de dados diretamente.

BANCO DE DADOS ASSIM É ÓTIMO!O FIREBIRD 1.5 TEM RECURSOS PODEROSOS, POUPA

MEMÓRIA E PROCESSADOR E É DE GRAÇAPOR ERIC COSTA

O

IBExpert: gerencia usuários e tabelas do Firebird

FERRAMENTAS/FIREBIRD 23.05.05 16:38 Page 27

FERRAMENTAS/FIREBIRD

28 < COLEÇÃO INFO

Nos testes no INFOLAB, usamosuma máquina Athlon XP 2200+ comWindows 2003. Conseguimos criaruma base de dados para armazenarclientes em poucos minutos, usandoa ferramenta de administração IBEx-pert (disponível em www.info.abril.com.br/download/4047.shtml). Amontagem do banco de dados é fa-cilitada pela ferramenta, que aindapermite rapidamente liberar e blo-quear acessos de usuários.

Uma limitação do Firebird, comoacontece na maioria dos bancos dedados de código aberto, é não tra-zer nenhuma interface de adminis-tração de dados e usuários. Masnão se trata de uma limitação irre-mediável: o site oficial do banco dedados tem diversos programas quepermitem fazer essas operações.Já quem vai desenvolver progra-

mas usando o Firebird como backendpode optar por praticamente qual-quer linguagem de programação.Existem pacotes para integrar obanco de dados com Java e .Net,além de PHP, Python, Perl, entreoutras. Em termos de compatibili-dade, o Firebird roda nos Windows2000, XP e 2003, além de Linux,Mac OS X, Solaris e outros sistemasbaseados em Unix.

Para o futuro, o grupo de desen-volvimento do Firebird trabalha emmelhorias de segurança, como a in-tegração com sistemas LDAP, quearmazenam os usuários de uma re-de. Entre os recursos novos em ges-tação estão tabelas temporárias eum sistema de backup incremen-tal, que permitiria copiar apenas asmudanças recentes do banco dedados a cada dia ou semana.

Firebird 1.5 SuperServer> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> RECURSOS

> FACILIDADE DE USO

> COMPATIBILIDADE


> PREÇO

> CUSTO/BENEFÍCIO

FirebirdSQL Foundation

Banco de dados de código aberto

Conta com recursos poderosos, como views,transações concorrentes e eventos

Depende de aplicativos de terceiros paraadministração

7,5Traz todo o pacote básico de funções dos bonsbancos de dados comerciais

6,5Não tem interface gráfica de administração,precisando de ferramentas auxiliares

9,0Tem versões para Windows, Mac OS X, Linux e outrossistemas baseados em Unix

7,7

Grátis

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Recursos (40%),Facilidade de uso (30%) e Compatibilidade (30%).

FERRAMENTAS/FIREBIRD 23.05.05 16:39 Page 28

FERRAMENTAS/CMS


nome pode ser engraça-do, mas o Xoops é umaferramenta séria de cria-ção de sites dinâmicos,

que conseguiu formar no Brasil umacomunidade do mundo de código-fonte aberto bastante organizada. Si-gla de eXtensible Object Oriented Por-tal System — sistema de portais ex-tensível e orientado a objeto —, oXoops é uma ferramenta em PHP in-dicada para a criação de portais co-merciais, páginas web pessoais, co-munidades, sites de notícias, intra-nets e blogs. O produto faz parte dacategoria de softwareCMS — iniciais de contentmanagement system ousistema de gerenciamen-to de conteúdo.

Desenvolvido pelaXoops Organisation(com s mesmo), o pro-duto consiste num pa-cote básico que pode serestendido mediante ainstalação de módulosavulsos que acrescen-tam ao site novas fun-ções. Para instalar o

Xoops é necessário ter acesso a umservidor web com o banco de dadosMySQL e a linguagem PHP habilita-dos. O servidor-padrão é o Apache,normalmente rodando em sistemaoperacional Linux. O download doXoops 2.0.10 em português pode serfeito no endereço www.info.abril.com.br/download/3917.shtml.

A característica que mais se desta-ca no produto é a flexibilidade. Quan-do se instala o Xoops com a opçãoStandard e se ativa apenas o móduloNews, obtém-se o site mínimo, quecorresponde a um weblog ou noticiá-

PORTAL É COMO XOOPS

COM ESSE GERENCIADOR DE CONTEÚDO DÁ PARA CRIAR SITES PODEROSOS

POR CARLOS MACHADO

O

Administração: instalação e configuração numa tela

FERRAMENTAS/CMS 23.05.05 16:41 Page 29

FERRAMENTAS/CMS

COLEÇÃO INFO > 31

FERRAMENTAS/CMS


> MÓDULOS INTEGRADOSA integração de módulos externos éa tarefa que mais exige esforço dousuário. Cada módulo tem configu-rações diferentes e seus próprios tru-ques. Nesse momento, o usuário pre-cisa ter noção de administração desistemas, a fim de definir os níveis deacesso de cada módulo e conteúdo.Conforme o tipo de site, talvez sejanecessário definir esquemas comple-xos, como vários grupos de usuários,cada um com permissões diferentes.Num site que aceita a interação devisitantes, pode-se criar, por exem-plo, grupos de usuários como “anô-nimos”, “registrados”, “editores” e“administradores”, cada qual comseus direitos. A configuração de po-líticas de acesso não é uma tarefa tri-

vial e está fora do alcance dos cria-dores de site menos experientes.

Mas quem tem dúvida sobre oXoops não está sozinho. As comuni-dades xoopistas são ágeis nas res-postas quando se entra em seus fó-runs atrás de alguma solução. Ao en-frentar alguns problemas de confi-guração do Xoops, o INFOLAB recor-reu a fóruns em comunidades brasi-leiras — há três principais: Xoops Bra-sil (http://br.xoops.org), XoopsBR(www.xoopsbr.org) e Xoops Total(www.xoopstotal.com.br). Menosde 20 minutos depois, a dúvida já es-tava solucionada. Nota-se, também,no site principal e em outros da co-munidade, grande preocupação coma publicação de material didático comdicas e documentação do produto.

XOOPS 2.0.10> FABRICANTE

> O QUE É

> INSTALAÇÃO

> MÓDULOS

> PERSONALIZAÇÃO

> GERENCIAMENTO DECONTEÚDO


> PREÇO

> CUSTO/BENEFÍCIO

The Xoops Organisation

Sistema de código aberto para a criação de sitesdinâmicos, como portais, intranets e blogs. Asolução baseia-se no banco de dados MySQL eno servidor web Apache com PHP

8,0A operação transcorre sem dificuldade, desdeque o usuário siga as instruções

8,5O produto traz um conjunto de recursos nativose pode ser estendido com módulos externos queimplementam funções especiais

7,0As opções de layout são um tanto engessadas.Para obter um visual personalizado é precisoprogramar

7,5Controle minucioso de tudo o que foi publicado

7,9

Grátis

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Instalação (30%),Módulos (30%), Personalização (20%) e Gerenciamento de conteúdo (20%).

rio. Para uma es-trutura de portemédio, pode-seativar, além deNotícias, módu-los como Fórum,Download e WebLinks. Forma-seassim um sitecom recursos pa-ra a formação deuma comunida-de, na qual osmembros cadas-trados podem in-teragir entre si e com os visitantes. Amesma estrutura, reconfigurada, po-de tornar-se um site corporativo. Nes-se caso, a empresa tem a opção dedesenvolver módulos próprios, ajus-tados às suas necessidades específi-cas, ou selecionar módulos na vastabiblioteca de código aberto franquea-da pela comunidade xoopista. No si-te central da comunidade (www.Xoops.org) pode-se baixar em tornode 300 módulos para os mais varia-dos fins, em categorias como multi-mídia, manipulação de imagens, me-canismos de busca, publicação de no-tícias, e-commerce, salas de bate-pa-po, calendários e grupos de discussão.

> BUSCA INTERNAAlguns módulos nativos — incluídosna instalação-padrão — merecem des-taque especial. Um deles é o meca-nismo de busca interna, que dá aousuário a facilidade de fazer pesqui-sas dentro do site. Trata-se de um re-

curso importan-te em qualquersite, mas funda-mental em sitesde conteúdo,cujo principalacervo é o tex-to. O módulode download étambém um ex-celente recurso.Além de permi-tir a inclusão dearquivos paraserem baixados

no próprio portal Xoops, ele geren-cia os links para copiar arquivos emoutros sites e fornece estatísticas dositens mais baixados. Oferece até umserviço de avisos, que alerta o usuá-rio quando há novidades na seção.O módulo que implementa fóruns,também nativo, parece ser um dosmais populares — pelos menos nossites das comunidades Xoops.

A instalação do Xoops é relativa-mente fácil. Basta seguir as instruçõese ter algum conhecimento sobre oservidor. Para quem vai montar umsite cujas opções se restringem ao pa-cote básico do produto, também nãohá dificuldade. Elas só começam aaparecer quando se deseja fazer per-sonalizações. É o caso, por exemplo,de alterar o layout da página para al-go diferente do que oferece um te-ma escolhido. Para isso, o usuário pre-cisa ter conhecimento que lhe per-mita mexer nos códigos em PHP enos gabaritos de páginas.

Site com Xoops: recursos aos montes

FERRAMENTAS/CMS 23.05.05 16:41 Page 30

FERRAMENTAS/CMS

COLEÇÃO INFO > 31

FERRAMENTAS/CMS


> MÓDULOS INTEGRADOSA integração de módulos externos éa tarefa que mais exige esforço dousuário. Cada módulo tem configu-rações diferentes e seus próprios tru-ques. Nesse momento, o usuário pre-cisa ter noção de administração desistemas, a fim de definir os níveis deacesso de cada módulo e conteúdo.Conforme o tipo de site, talvez sejanecessário definir esquemas comple-xos, como vários grupos de usuários,cada um com permissões diferentes.Num site que aceita a interação devisitantes, pode-se criar, por exem-plo, grupos de usuários como “anô-nimos”, “registrados”, “editores” e“administradores”, cada qual comseus direitos. A configuração de po-líticas de acesso não é uma tarefa tri-

vial e está fora do alcance dos cria-dores de site menos experientes.

Mas quem tem dúvida sobre oXoops não está sozinho. As comuni-dades xoopistas são ágeis nas res-postas quando se entra em seus fó-runs atrás de alguma solução. Ao en-frentar alguns problemas de confi-guração do Xoops, o INFOLAB recor-reu a fóruns em comunidades brasi-leiras — há três principais: Xoops Bra-sil (http://br.xoops.org), XoopsBR(www.xoopsbr.org) e Xoops Total(www.xoopstotal.com.br). Menosde 20 minutos depois, a dúvida já es-tava solucionada. Nota-se, também,no site principal e em outros da co-munidade, grande preocupação coma publicação de material didático comdicas e documentação do produto.

XOOPS 2.0.10> FABRICANTE

> O QUE É

> INSTALAÇÃO

> MÓDULOS

> PERSONALIZAÇÃO

> GERENCIAMENTO DECONTEÚDO


> PREÇO

> CUSTO/BENEFÍCIO

The Xoops Organisation

Sistema de código aberto para a criação de sitesdinâmicos, como portais, intranets e blogs. Asolução baseia-se no banco de dados MySQL eno servidor web Apache com PHP

8,0A operação transcorre sem dificuldade, desdeque o usuário siga as instruções

8,5O produto traz um conjunto de recursos nativose pode ser estendido com módulos externos queimplementam funções especiais

7,0As opções de layout são um tanto engessadas.Para obter um visual personalizado é precisoprogramar

7,5Controle minucioso de tudo o que foi publicado

7,9

Grátis

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Instalação (30%),Módulos (30%), Personalização (20%) e Gerenciamento de conteúdo (20%).

rio. Para uma es-trutura de portemédio, pode-seativar, além deNotícias, módu-los como Fórum,Download e WebLinks. Forma-seassim um sitecom recursos pa-ra a formação deuma comunida-de, na qual osmembros cadas-trados podem in-teragir entre si e com os visitantes. Amesma estrutura, reconfigurada, po-de tornar-se um site corporativo. Nes-se caso, a empresa tem a opção dedesenvolver módulos próprios, ajus-tados às suas necessidades específi-cas, ou selecionar módulos na vastabiblioteca de código aberto franquea-da pela comunidade xoopista. No si-te central da comunidade (www.Xoops.org) pode-se baixar em tornode 300 módulos para os mais varia-dos fins, em categorias como multi-mídia, manipulação de imagens, me-canismos de busca, publicação de no-tícias, e-commerce, salas de bate-pa-po, calendários e grupos de discussão.

> BUSCA INTERNAAlguns módulos nativos — incluídosna instalação-padrão — merecem des-taque especial. Um deles é o meca-nismo de busca interna, que dá aousuário a facilidade de fazer pesqui-sas dentro do site. Trata-se de um re-

curso importan-te em qualquersite, mas funda-mental em sitesde conteúdo,cujo principalacervo é o tex-to. O módulode download étambém um ex-celente recurso.Além de permi-tir a inclusão dearquivos paraserem baixados

no próprio portal Xoops, ele geren-cia os links para copiar arquivos emoutros sites e fornece estatísticas dositens mais baixados. Oferece até umserviço de avisos, que alerta o usuá-rio quando há novidades na seção.O módulo que implementa fóruns,também nativo, parece ser um dosmais populares — pelos menos nossites das comunidades Xoops.

A instalação do Xoops é relativa-mente fácil. Basta seguir as instruçõese ter algum conhecimento sobre oservidor. Para quem vai montar umsite cujas opções se restringem ao pa-cote básico do produto, também nãohá dificuldade. Elas só começam aaparecer quando se deseja fazer per-sonalizações. É o caso, por exemplo,de alterar o layout da página para al-go diferente do que oferece um te-ma escolhido. Para isso, o usuário pre-cisa ter conhecimento que lhe per-mita mexer nos códigos em PHP enos gabaritos de páginas.

Site com Xoops: recursos aos montes

FERRAMENTAS/CMS 23.05.05 16:41

FERRAMENTAS/E-COMMERCE

COLEÇÃO INFO > 33



ontar lojas online é amissão que o osCom-merce, um produto decódigo aberto, cumpre

bem. Tanto que 1 417 sites de comér-cio eletrônico cons-truídos com o soft-ware estavam ativosna web no início demaio. O osCommer-ce é uma soluçãocompleta para mon-tar lojas online semexigir grandes co-nhecimentos de pro-gramação e sem cus-tos. Criado com ba-se na linguagem PHP, oprograma roda em várias platafor-mas: Windows, Linux, Solaris, BSD eMac OS X. O requisito básico parainstalá-lo é o servidor web Apachecom PHP e banco de dados MySQLhabilitados. INFO testou a versão 2.2do produto em ambiente Linux.

O que impressiona no osCommer-ce é o volume de possibilidades queele oferece. A concepção do produ-to prevê a instalação de uma loja bá-sica, que depois pode ser incremen-

tada com novos recursos. Todos es-ses recursos estão disponíveis emmódulos criados pela comunidadede usuários. Até o encerramento des-ta edição, havia 379 módulos para

gerenciar pagamentos,166 para controlar o en-

vio de produtos e 123para ajustar o idio-ma, além de outros

1 954 pacotes comfunções variadas.Entre eles há módu-los específicos parasites brasileiros, co-mo controle de en-

trega por Sedex.O primeiro passo para a monta-

gem da loja é baixar o osCommerce(www.info.abril.com.br/download/3911.shtml). A instalação do progra-ma deve ser feita, de preferência, di-retamente no servidor que hospeda-rá a loja. Também é possível criaruma loja local e, depois, fazer umasérie de ajustes a fim de transferi-lacorretamente para o servidor. Mas is-so exige que o usuário tenha bastan-te experiência. Ele precisa, por exem-plo, criar um banco dados MySQL va-

O osCOMMERCEFAZ A LOJA

O PROGRAMA VEM RECHEADO DE RECURSOS, MAS É DURO DE CONFIGURAR

POR CARLOS MACHADO, COM OSMAR LAZZARINI

M

© ILUSTRAÇÃO STEFAN

zio e indicar ao instalador o caminhodesse banco. Também durante a ins-talação, pode-se escolher a criaçãode uma loja a partir do zero ou ini-ciar com uma estrutura de demons-tração. Esta última opção é a mais in-dicada, porque fornece uma apre-sentação visual do padrão de lojasmontadas com o osCommerce.

Na instalação, grande número demódulos fica à disposição na loja. Nopróximo passo, a configuração, o cria-dor da loja define os itens que desejausar. Alguns pacotes são obrigatórios.O de idioma, por exemplo. Se a inten-ção é vender para brasileiros, a loja de-verá falar português. Do mesmo mo-do, é preciso escolher adequadamen-te os módulos que definem formas depagamento, cartão de crédito etc.

Se a instalação é fácil, a configura-ção é outra história. A escolha do idio-ma, por exemplo, deveria ser algoabsolutamente suave. Não é. Algunsitens, como menus e legendas, in-sistem em aparecer em inglês. NoINFOLAB notamos vários erros dePHP e os problemas de acesso a da-dos durante a configuração. Nessescasos, o material de ajuda não se re-vela muito útil. Pode-se recorrer aosfóruns de discussão do osCommer-ce, mas é preciso ter disposição pa-ra garimpar uma resposta específicano meio de milhares. Também se po-de colocar uma pergunta no fórume aguardar que alguém forneça umaresposta adequada — o que, natural-mente, nem sempre acontece. A enor-me oferta de módulos tanto ajuda

Loja com osCommerce: o visual pode ser modificado com temas variados

FERRAMENTAS/E-COMMERCE 23.05.05 16:43 Page 32


COLEÇÃO INFO > 33



ontar lojas online é amissão que o osCom-merce, um produto decódigo aberto, cumpre

bem. Tanto que 1 417 sites de comér-cio eletrônico cons-truídos com o soft-ware estavam ativosna web no início demaio. O osCommer-ce é uma soluçãocompleta para mon-tar lojas online semexigir grandes co-nhecimentos de pro-gramação e sem cus-tos. Criado com ba-se na linguagem PHP, oprograma roda em várias platafor-mas: Windows, Linux, Solaris, BSD eMac OS X. O requisito básico parainstalá-lo é o servidor web Apachecom PHP e banco de dados MySQLhabilitados. INFO testou a versão 2.2do produto em ambiente Linux.

O que impressiona no osCommer-ce é o volume de possibilidades queele oferece. A concepção do produ-to prevê a instalação de uma loja bá-sica, que depois pode ser incremen-

tada com novos recursos. Todos es-ses recursos estão disponíveis emmódulos criados pela comunidadede usuários. Até o encerramento des-ta edição, havia 379 módulos para

gerenciar pagamentos,166 para controlar o en-

vio de produtos e 123para ajustar o idio-ma, além de outros

1 954 pacotes comfunções variadas.Entre eles há módu-los específicos parasites brasileiros, co-mo controle de en-

trega por Sedex.O primeiro passo para a monta-

gem da loja é baixar o osCommerce(www.info.abril.com.br/download/3911.shtml). A instalação do progra-ma deve ser feita, de preferência, di-retamente no servidor que hospeda-rá a loja. Também é possível criaruma loja local e, depois, fazer umasérie de ajustes a fim de transferi-lacorretamente para o servidor. Mas is-so exige que o usuário tenha bastan-te experiência. Ele precisa, por exem-plo, criar um banco dados MySQL va-

O osCOMMERCEFAZ A LOJA

O PROGRAMA VEM RECHEADO DE RECURSOS, MAS É DURO DE CONFIGURAR

POR CARLOS MACHADO, COM OSMAR LAZZARINI

M

© ILUSTRAÇÃO STEFAN

zio e indicar ao instalador o caminhodesse banco. Também durante a ins-talação, pode-se escolher a criaçãode uma loja a partir do zero ou ini-ciar com uma estrutura de demons-tração. Esta última opção é a mais in-dicada, porque fornece uma apre-sentação visual do padrão de lojasmontadas com o osCommerce.

Na instalação, grande número demódulos fica à disposição na loja. Nopróximo passo, a configuração, o cria-dor da loja define os itens que desejausar. Alguns pacotes são obrigatórios.O de idioma, por exemplo. Se a inten-ção é vender para brasileiros, a loja de-verá falar português. Do mesmo mo-do, é preciso escolher adequadamen-te os módulos que definem formas depagamento, cartão de crédito etc.

Se a instalação é fácil, a configura-ção é outra história. A escolha do idio-ma, por exemplo, deveria ser algoabsolutamente suave. Não é. Algunsitens, como menus e legendas, in-sistem em aparecer em inglês. NoINFOLAB notamos vários erros dePHP e os problemas de acesso a da-dos durante a configuração. Nessescasos, o material de ajuda não se re-vela muito útil. Pode-se recorrer aosfóruns de discussão do osCommer-ce, mas é preciso ter disposição pa-ra garimpar uma resposta específicano meio de milhares. Também se po-de colocar uma pergunta no fórume aguardar que alguém forneça umaresposta adequada — o que, natural-mente, nem sempre acontece. A enor-me oferta de módulos tanto ajuda

Loja com osCommerce: o visual pode ser modificado com temas variados

FERRAMENTAS/E-COMMERCE 23.05.05 16:43



como atrapalha. Ajuda, porque per-mite a montagem de lojas bastantecompletas. Ao mesmo tempo, exigeexperiência e conhecimento dosmeandros do osCommerce para en-contrar módulos adequados às ne-cessidades do lojista. Depois, paraconfigurar cada pacote. Mas em tec-nologia, soluções robustas não sãomesmo vapt-vupt, certo?

Além das opções de módulos decódigo-fonte aberto, há soluções con-vencionais de software para o os-Commerce. Só um exemplo: o CobreBem e-Commerce, da Thisf Informá-tica, programa CGI para emitir bole-tos bancários. O produto pode serobtido por download (www.info.abril.com.br/download/3915.shtml)e testado na emissão de até trinta do-

cumentos. Depois disso, a loja pre-cisa pagar uma licença de 147 reais.

Devido ao esforço de seleção eimplementação, o osCommerce éindicado para o prestador de ser-viços na área de desenvolvimento.Esse profissional pode investir noconhecimento do produto, selecio-nar módulos e resolver os proble-mas de instalação. Como especia-lista, terá soluções testadas e po-derá oferecer sua experiência aomercado. Ele fará a montagem daloja e treinará o dono para as ati-vidades de gerência. A principal for-ça do osCommerce está nas contri-buições da comunidade de códigoaberto. Em geral, sempre se encon-tra uma solução para implementarnovas funções na loja.

osCommerce 2.2 Milestone 2> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> INSTALAÇÃO

> CONFIGURAÇÃO

> RECURSOS

> DOCUMENTAÇÃO

> COMPATIBILIDADE


> PREÇO

> CUSTO/BENEFÍCIO

osCommerce

Solução para montagem de lojas online

Grande quantidade de funções (módulos) disponíveispara o produto

Falta um guia ou catálogo para a seleção de funções

7,3Fácil, exige conhecimento mínimo de MySQL

6,5Itens simples podem exigir longas tentativas de ajuste

7,8O produto tem opções para criar lojas sofisticadas

5,8Não há um padrão de ajuda nem no módulobásico nem nos adicionais

8,0Roda nas principais plataformas: Windows, Linux,Solaris, BSD e Mac OS X

7,1

Grátis (Licença GPL)

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Instalação (20%),Configuração (30%), Recursos (30%), Documentação (10%) e Compatibilidade (10%).

FERRAMENTAS/E-COMMERCE 23.05.05 16:44 Page 34

FERRAMENTAS/WIKI


ites totalmente demo-cráticos, em que os visi-tantes podem — e de-vem — acrescentar ou

mudar o conteúdo sem o menor pu-dor. Para construir um site desses,as ferramentas certas são os wikis.Uma vez instalado o wiki, basta cli-car no link de edição e alterar os tex-tos, inserir imagens à vontade naspáginas existentes ou mesmo criarlinks para páginas novas. Claro quenada impede os vândalos digitais deusar a liberdade para fins menos no-bres. Mesmo queisso ocorra, não épreciso se preo-cupar, porque oswikis permitemrever as versõesanteriores e res-taurá-las em ins-tantes. Mais: osvândalos são ra-ríssimos em wikis.

Colocar no ar oseu próprio wikitambém pode seralgo igualmentesimples. Tudo de-

pende do software escolhido para atarefa. A variedade é enorme. No en-tanto, em termos de recursos, as di-ferenças entre eles são poucas. To-dos produzem páginas enxutíssimas,sem nenhuma sofisticação de designou funcionalidade. A diferença mar-cante está na linguagem usada paracriar os programas e os requisitosque cada um exige do servidor quehospedará o site wiki.

O INFOLAB montou três wikis comferramentas diferentes: o OpenWi-ki 0.78 SP1, o UseModWiki 1.0 e o

PÁGINAS ABERTASAO CONTEÚDO

NOS SITES FEITOS COM AS DEMOCRÁTICAS FERRAMENTASWIKI, QUEM TRABALHA É O VISITANTE

POR AIRTON LOPES, COM OSMAR LAZARINI

S

wxWikiServer: com ele, o site wiki dispensa servidor web

FERRAMENTAS/WIKI 24.05.05 12:40 Page 35

FERRAMENTAS/WIKI

36 < COLEÇÃO INFO

Wiki para todos os gostos

> DESENVOLVEDOR

> TECNOLOGIA

> INSTALAÇÃO

> RECURSOS

> FACILIDADE DEUSO

> AVALIAÇÃOTÉCNICA(1)

> PREÇO

> CUSTO/BENEFÍCIO

> ONDEENCONTRAR

UseModWiki 1.0

Clifford Adams

Apache e Perl

6,5Simples, masrequer edição dearquivo

6,0RSS, suporte a CSSe upload dearquivos

8,0Busca internafunciona bem erápido

6,9

Grátis


OpenWiki 0.78 SP1

Laurens Pit

IIS, ASP e XML

5,5É preciso editarum arquivo deconfiguração

6,5RSS, suporte a CSSe upload dearquivos

7,0As páginas sãohierarquizadas

6,2

Grátis


wxWikiServer1.5.11

Eddie Edwards eRyan Norton

XML

7,5Simples, comassistente

6,0RSS, suporte a CSS

7,0Página deadministraçãocom poucosrecursos

6,8

Grátis


(1) Média ponderada considerando os seguintes itens e respectivos pesos: Instalação (30%),Recursos (35%) e Facilidade de uso (35%).

36 < COLEÇÃO INFO

wxWikiServer 1.5.11. O UseModWikié, na verdade, um script Perl. A sualista de pré-requisitos? Apenas o ser-vidor web Apache com Perl. NoOpenWiki, a exigência é um servi-dor IIS com suporte a ASP e XML.Mais simples ainda, pelo menos nainstalação, é o wxWikiServer. Ele pró-prio funciona como servidor web,utilizando a porta 8080 do PC.

Os três são capazes de gerar feedsRSS (Really Simple Syndication), as-sim os interessados conseguem sernotificados no ato sobre alteraçõesno site. É difícil fugir, mas o aspectoespartano dos wikis pode ser um pou-co melhorado apelando para os re-

cursos de abas do CSS (CascadingStyle Sheets). Mas não espere mila-gres. Simplicidade é a mola mestrada filosofia wiki. As formatações sãofeitas com um conjunto de marca-ções próprio, mais simples do que oHTML. Basta digitar qualquer pala-vra entre dois colchetes para que se-ja criada uma nova página. Quer co-locar uma imagem no wiki? Digite aURL na tela de edição. O OpenWikipermite fazer o upload de arquivos.A mesma ação pode ser feita no Use-ModWiki, mas antes é preciso habi-litar o recurso. Com tudo isso, só nãomonta um site com as portas aber-tas quem não quiser.

FERRAMENTAS/WIKI 23.05.05 16:46 Page 36

FERRAMENTAS/SSI


em sempre é preciso re-correr a um banco de da-dos ou a tecnologiascomplexas para construir

sites dinâmicos. Em projetos poucoambiciosos ou nos casos em que ape-nas uma parte das páginas precisade atualização constante, o SSI (Ser-ver Side Includes) é uma boa opção.

A rigor, o SSI é um conjunto de ins-truções colocadas dentro de arqui-vos HTML e interpretadas pelo ser-vidor no momento em que as pági-nas são exibidas. Com isso, é possí-vel criar conteúdos dinâmicos sem anecessidade de nenhuma outra tec-nologia. O SSI pode ajudar em mui-tas situações. Por exemplo:A. Se você quer exibir a data e a ho-ra de última atualização da páginaou a hora do momento em que o in-ternauta está lendo.B. Se você tem um site grande e queradministrar com facilidade as áreasfixas das páginas (cabeçalho, roda-pé, barra de navegação etc.).C. Se muitas páginas do seu site sãode conteúdo essencialmente não re-novável, mas têm um trecho comatualização freqüente. Uma páginaque reúna, por exemplo, o histórico

da empresa (conteúdo que quasenunca é alterado) e uma área comnotícias (de atualização constante).

Se suas demandas de automaçãopáram por aí, provavelmente o SSIresolverá o problema integralmente.Então, mãos à obra.

1. AJUSTE DO SERVIDORPara utilizar o SSI, é necessário queo servidor web de seu site aceite es-ses comandos — e que eles estejamhabilitados. Se você guarda o seu si-te num serviço de hospedagem, con-fira com o prestador se o SSI já estáhabilitado ou qual o procedimentocorreto para fazê-lo.

O SSI não é um padrão global, masfunciona em todos os servidores maisconhecidos, como Apache, InternetInformation Services (Microsoft) ouEnterprise Server (Netscape). A for-ma de habilitar o SSI varia em cadamodelo. Os exemplos deste texto re-ferem-se ao Apache 1.3.33. Nesse ser-vidor, você deve inserir a seguinte li-nha de comando no arquivo httpd.conf ou no arquivo .htaccess:Options +Includes

Além disso, é preciso que os arqui-vos que vão conter os includes te-

O SSI DISPENSABANCO E SCRIPT

SITES SIMPLES OU COM ATUALIZAÇÃO PARCIAL NÃO PRECISAM DE TECNOLOGIAS COMPLEXAS

N

FERRAMENTAS/SSI 23.05.05 16:48 Page 37

FERRAMENTAS/SSI

COLEÇÃO INFO > 39

FERRAMENTAS/SSI


nham uma extensãoespecial. Assim, o ser-vidor saberá que de-ve ler os arquivos àprocura de um trechodinâmico a ser inse-rido no código.

As extensões va-riam de servidor pa-ra servidor: normal-mente, usa-se .shtmlpara Apache e .shlpara Netscape. No IIS,utiliza-se a extensão-padrão .asp. Se você administra seuservidor Apache, faça o seguinte:AddType text/html .shtmlAddHandler server-parsed .shtml

Se você utiliza um provedor de hos-pedagem, lembre-se de conferir a ex-tensão a ser empregada.

Resolvida a parte do servidor, é ho-ra de partir para a montagem dos in-cludes. Um include nada mais é queum pequeno trecho de código colo-cado no HTML informando ao servi-dor como agir. Esses comandos sãocontidos dentro de tags de comentá-rio do HTML, ou seja, <!- - para iniciaro comando e - -> para finalizar. Vejaa seguir exemplos do que é possívelfazer tendo como base o Apache.

2. DATA E HORA CERTASNesse primeiro caso, vamos usar oSSI para incluir num arquivo a dataatual, em que o internauta estivervendo a página. Para isso, basta acres-centar ao HTML as seguintes tags:Hoje é 

Elas devem ser colocadas no lo-cal exato em que você quer que adata apareça (o texto “Hoje é” é ape-nas um exemplo). Podem tambémser antecedidas e seguidas de for-matação HTML normal. A primeiralinha do comando configura o for-mato da data. Escolhemos o forma-to dd/mm/aaaa. A segunda linha or-dena ao servidor que coloque a da-ta local ao exibir a página.

Note que o horário a ser exibidoé o do relógio do servidor. Tambémserão seguidas as formatações dedata estabelecidas no servidor. Ouseja, se ele estiver com os dias dasemana configurados em inglês, elesaparecerão assim na página.

Os dias da semana não entraramno exemplo acima, mas poderiamser incluídos com a inserção do có-digo %A. Ainda na questão tempo,podemos também incluir a data e a

hora (%R) da última modificação doarquivo. Veja:Modificado às 

3. HTML EMBUTIDOEmbora os exemplos acima sejamúteis, o SSI é usado principalmentepara permitir a colocação de um tre-cho de HTML dentro de outro. Diga-mos que seu site tenha 100 páginase todas elas tenham uma mesmabarra de navegação. O que aconte-ce se for preciso mudar um item dalista? Usando apenas HTML, serianecessário reabrir cada arquivo pa-ra fazer a mudança. Com o SSI, tu-do fica mais fácil. Basta fazer comque a barra seja um item de inclu-de. Assim, com a simples alteraçãode um arquivo, tudo estará automa-ticamente renovado. Neste exemplo,vamos supor que você queira colo-

car um arquivo que contém apenasa barra de navegação dentro dos ar-quivos que compõem o site.

Para isso, cada HTML deve ter aseguinte tag de include colocada noexato local em que será exibida abarra de navegação:

Lembre que a notação de diretó-rios segue a mesma lógica dos links.Ou seja, se o arquivo a ser chama-do não estiver no mesmo diretóriodo arquivo original, é preciso ano-tar o caminho (por exemplo, includevirtual=“../barradenavegacao.shtml” se o include localizar-se emum diretório um nível acima).

Preparados os HTMLs, basta criara barra de navegação como um ar-quivo à parte. Esse arquivo pode in-cluir formatação HTML à vontade,mas não deve conter as tags estru-turais de uma página (ou seja, as tagsHTML, HEAD e BODY), já que ele se-

rá apenas um trechoinserido no meio dapágina final.

É possível a colo-cação de vários in-cludes numa mesmapágina. Na prática,quem utiliza esse sis-tema costuma reta-lhar a estrutura fixaem uma série de in-cludes — para barrade navegação, roda-pé, área de desta-ques, de notícias etc.

SSI: código para montar a página e criar os includes

Home da INFO Online: em cada área, um include

FERRAMENTAS/SSI 23.05.05 16:49 Page 38

FERRAMENTAS/SSI

COLEÇÃO INFO > 39

FERRAMENTAS/SSI


nham uma extensãoespecial. Assim, o ser-vidor saberá que de-ve ler os arquivos àprocura de um trechodinâmico a ser inse-rido no código.

As extensões va-riam de servidor pa-ra servidor: normal-mente, usa-se .shtmlpara Apache e .shlpara Netscape. No IIS,utiliza-se a extensão-padrão .asp. Se você administra seuservidor Apache, faça o seguinte:AddType text/html .shtmlAddHandler server-parsed .shtml

Se você utiliza um provedor de hos-pedagem, lembre-se de conferir a ex-tensão a ser empregada.

Resolvida a parte do servidor, é ho-ra de partir para a montagem dos in-cludes. Um include nada mais é queum pequeno trecho de código colo-cado no HTML informando ao servi-dor como agir. Esses comandos sãocontidos dentro de tags de comentá-rio do HTML, ou seja, <!- - para iniciaro comando e - -> para finalizar. Vejaa seguir exemplos do que é possívelfazer tendo como base o Apache.

2. DATA E HORA CERTASNesse primeiro caso, vamos usar oSSI para incluir num arquivo a dataatual, em que o internauta estivervendo a página. Para isso, basta acres-centar ao HTML as seguintes tags:Hoje é 

Elas devem ser colocadas no lo-cal exato em que você quer que adata apareça (o texto “Hoje é” é ape-nas um exemplo). Podem tambémser antecedidas e seguidas de for-matação HTML normal. A primeiralinha do comando configura o for-mato da data. Escolhemos o forma-to dd/mm/aaaa. A segunda linha or-dena ao servidor que coloque a da-ta local ao exibir a página.

Note que o horário a ser exibidoé o do relógio do servidor. Tambémserão seguidas as formatações dedata estabelecidas no servidor. Ouseja, se ele estiver com os dias dasemana configurados em inglês, elesaparecerão assim na página.

Os dias da semana não entraramno exemplo acima, mas poderiamser incluídos com a inserção do có-digo %A. Ainda na questão tempo,podemos também incluir a data e a

hora (%R) da última modificação doarquivo. Veja:Modificado às 

3. HTML EMBUTIDOEmbora os exemplos acima sejamúteis, o SSI é usado principalmentepara permitir a colocação de um tre-cho de HTML dentro de outro. Diga-mos que seu site tenha 100 páginase todas elas tenham uma mesmabarra de navegação. O que aconte-ce se for preciso mudar um item dalista? Usando apenas HTML, serianecessário reabrir cada arquivo pa-ra fazer a mudança. Com o SSI, tu-do fica mais fácil. Basta fazer comque a barra seja um item de inclu-de. Assim, com a simples alteraçãode um arquivo, tudo estará automa-ticamente renovado. Neste exemplo,vamos supor que você queira colo-

car um arquivo que contém apenasa barra de navegação dentro dos ar-quivos que compõem o site.

Para isso, cada HTML deve ter aseguinte tag de include colocada noexato local em que será exibida abarra de navegação:

Lembre que a notação de diretó-rios segue a mesma lógica dos links.Ou seja, se o arquivo a ser chama-do não estiver no mesmo diretóriodo arquivo original, é preciso ano-tar o caminho (por exemplo, includevirtual=“../barradenavegacao.shtml” se o include localizar-se emum diretório um nível acima).

Preparados os HTMLs, basta criara barra de navegação como um ar-quivo à parte. Esse arquivo pode in-cluir formatação HTML à vontade,mas não deve conter as tags estru-turais de uma página (ou seja, as tagsHTML, HEAD e BODY), já que ele se-

rá apenas um trechoinserido no meio dapágina final.

É possível a colo-cação de vários in-cludes numa mesmapágina. Na prática,quem utiliza esse sis-tema costuma reta-lhar a estrutura fixaem uma série de in-cludes — para barrade navegação, roda-pé, área de desta-ques, de notícias etc.

SSI: código para montar a página e criar os includes

Home da INFO Online: em cada área, um include

FERRAMENTAS/SSI 23.05.05 16:49

Dreamweaver MX 2004: preocupação com os desenvolvedores de sites dinâmicos

FERRAMENTAS/SUÍTE

COLEÇÃO INFO > 41

FERRAMENTAS/SUÍTE


Studio MX, pacote deprogramas para desen-volvimento de sites eaplicações para a inter-

net da Macromedia, chegou à ver-são 2004 como líder disparado nomercado da grande rede. A suíte reú-ne duas das ferramentas mais po-pulares entre os webmasters, Dream-weaver e Flash, dois bons progra-mas gráficos, Fireworks e FreeHand,

e traz ainda uma versão especial pa-ra desenvolvedores do servidor depáginas dinâmicas ColdFusion. In-clui também o HomeSite, softwareque auxilia a escrita de código HTML.Um dos pontos de maior destaquena suíte é a integração de seus com-ponentes. Juntos, eles oferecem umasolução completa para webmasterse desenvolvedores de aplicações on-line. Nessa versão, somente os pro-

MAIS PODERAO STUDIO MX

COM DREAMWEAVER, FLASH E INTERFACE INTEGRADA, A SUÍTE DOMINA O MERCADO DA WEB

POR CARLOS MACHADO, COM OSMAR LAZARINI

O

gramas Dreamweaver, Fireworks eFlash foram atualizados. O ColdFu-sion Developer Edition mudou deversão (veja texto na página 16) de-pois do lançamento da suíte, maspode ser atualizado de graça viaweb. Todos os programas apresen-tam uma nova interface unificada,o que destaca o trabalho de integra-ção aplicada nos produtos. O rede-senho da interface amplia a área útilde trabalho dos aplicativos, graçasa uma disposição mais inteligentedas ferramentas. Trabalha-se maisà vontade com essa nova encarna-ção dos programas.

> Dreamweaver MX 2004A versão 2004 do Dreamweaverrevela preocupação com os desen-volvedores de sites dinâmicos. Ainterface do programa foi modifi-cada, acrescentou-se mais elegân-cia no visual e obtém-se melhoraproveitamento da área de traba-lho. Os assistentes, agora, são ilus-trados, tornando as tarefas maisagradáveis. A nova tela inicial trazatalhos para arquivos recentes, tu-toriais e extensões do programa.

A máquina que transforma sitesem grandes aplicações foi a que ob-teve maiores reforços. O Dream-weaver vai deixando a concorrên-cia cada vez mais para trás e torna-se uma ferramenta tipicamente vol-tada para o profissional. Desse mo-do, seu uso por iniciantes se tornauma tarefa quase impossível. A áreade trabalho do programa está mais

inteligente. Agora, os tradicionaismodos — Código, Design e Split —não ficam mais em painéis separa-dos: foram reunidos num único pai-nel com botões e com outras fun-ções importantes deixadas bem àvista. Antes, por exemplo, o cam-po para preenchimento do títulodas páginas ficava escondido.

Outra função utilíssima é a veri-ficação de compatibilidade com osmais diversos browsers, como In-ternet Explorer para Mac OS e Win-dows, Mozilla, Netscape Navigatore Opera em várias versões. Não dápara nenhum desenvolvedor re-clamar. Você configura a lista decompatibilidade que deve ser ve-rificada e, com dois cliques, oDreamweaver exibe a lista de pos-síveis erros na posição onde nor-malmente fica o painel de proprie-dades. Um prático botão de testepara os dados dinâmicos tambémfica à vista do desenvolvedor, nomesmo painel.

Igualmente interessantes são asnovas funções de edição de ima-gens assumidas pelo produto. Ta-refas simples como cortar e redi-mensionar figuras podem ser feitasdiretamente no Dreamweaver sema necessidade de abrir um progra-ma externo. O software também in-corporou um inspetor de código CSSque indica quando há erros no ar-quivo. Para quem usa um softwarede controle de versão, o Dreawea-ver vem com botões de check-in echeck-out, impedindo que dois téc-

FERRAMENTAS/SUÍTE 23.05.05 16:53 Page 40

Dreamweaver MX 2004: preocupação com os desenvolvedores de sites dinâmicos

FERRAMENTAS/SUÍTE

COLEÇÃO INFO > 41

FERRAMENTAS/SUÍTE


Studio MX, pacote deprogramas para desen-volvimento de sites eaplicações para a inter-

net da Macromedia, chegou à ver-são 2004 como líder disparado nomercado da grande rede. A suíte reú-ne duas das ferramentas mais po-pulares entre os webmasters, Dream-weaver e Flash, dois bons progra-mas gráficos, Fireworks e FreeHand,

e traz ainda uma versão especial pa-ra desenvolvedores do servidor depáginas dinâmicas ColdFusion. In-clui também o HomeSite, softwareque auxilia a escrita de código HTML.Um dos pontos de maior destaquena suíte é a integração de seus com-ponentes. Juntos, eles oferecem umasolução completa para webmasterse desenvolvedores de aplicações on-line. Nessa versão, somente os pro-

MAIS PODERAO STUDIO MX

COM DREAMWEAVER, FLASH E INTERFACE INTEGRADA, A SUÍTE DOMINA O MERCADO DA WEB

POR CARLOS MACHADO, COM OSMAR LAZARINI

O

gramas Dreamweaver, Fireworks eFlash foram atualizados. O ColdFu-sion Developer Edition mudou deversão (veja texto na página 16) de-pois do lançamento da suíte, maspode ser atualizado de graça viaweb. Todos os programas apresen-tam uma nova interface unificada,o que destaca o trabalho de integra-ção aplicada nos produtos. O rede-senho da interface amplia a área útilde trabalho dos aplicativos, graçasa uma disposição mais inteligentedas ferramentas. Trabalha-se maisà vontade com essa nova encarna-ção dos programas.

> Dreamweaver MX 2004A versão 2004 do Dreamweaverrevela preocupação com os desen-volvedores de sites dinâmicos. Ainterface do programa foi modifi-cada, acrescentou-se mais elegân-cia no visual e obtém-se melhoraproveitamento da área de traba-lho. Os assistentes, agora, são ilus-trados, tornando as tarefas maisagradáveis. A nova tela inicial trazatalhos para arquivos recentes, tu-toriais e extensões do programa.

A máquina que transforma sitesem grandes aplicações foi a que ob-teve maiores reforços. O Dream-weaver vai deixando a concorrên-cia cada vez mais para trás e torna-se uma ferramenta tipicamente vol-tada para o profissional. Desse mo-do, seu uso por iniciantes se tornauma tarefa quase impossível. A áreade trabalho do programa está mais

inteligente. Agora, os tradicionaismodos — Código, Design e Split —não ficam mais em painéis separa-dos: foram reunidos num único pai-nel com botões e com outras fun-ções importantes deixadas bem àvista. Antes, por exemplo, o cam-po para preenchimento do títulodas páginas ficava escondido.

Outra função utilíssima é a veri-ficação de compatibilidade com osmais diversos browsers, como In-ternet Explorer para Mac OS e Win-dows, Mozilla, Netscape Navigatore Opera em várias versões. Não dápara nenhum desenvolvedor re-clamar. Você configura a lista decompatibilidade que deve ser ve-rificada e, com dois cliques, oDreamweaver exibe a lista de pos-síveis erros na posição onde nor-malmente fica o painel de proprie-dades. Um prático botão de testepara os dados dinâmicos tambémfica à vista do desenvolvedor, nomesmo painel.

Igualmente interessantes são asnovas funções de edição de ima-gens assumidas pelo produto. Ta-refas simples como cortar e redi-mensionar figuras podem ser feitasdiretamente no Dreamweaver sema necessidade de abrir um progra-ma externo. O software também in-corporou um inspetor de código CSSque indica quando há erros no ar-quivo. Para quem usa um softwarede controle de versão, o Dreawea-ver vem com botões de check-in echeck-out, impedindo que dois téc-

FERRAMENTAS/SUÍTE 23.05.05 16:53

FERRAMENTAS/SUÍTE

COLEÇÃO INFO > 43

FERRAMENTAS/SUÍTE


nicos de uma equi-pe trabalhem numapágina ao mesmotempo. Também foiacrescentado o re-curso Secure FTP,que garante cripto-grafia na transferên-cia de arquivos en-tre as máquinas dedesenvolvimento eo site de destino.

Na área de forma-tação, agora é pos-sível copiar e colartrechos de documentos vindos deprogramas da Microsoft com a pre-servação de cores e estilos CSS. Naparte de código, foram adicionadosinspetores para ASP.Net, XML, sin-taxe PHP, e objetos de controle deformulários para ASP.Net. Na telainicial, o programador escolhe a op-ção de plataforma com que vai tra-balhar, e o Dreamweaver se ajustaconvenientemente.

> Flash MX 2004Na versão anterior do Flash, a MX,o usuário, ao entrar no aplicativo,indicava se era um desenvolvedor— alguém mais voltado para os có-digos de programação — ou um de-signer, o profissional mais preocu-pado com o equilíbrio visual das pá-ginas. Conforme a escolha, o pro-grama exibia uma interface adequa-da. Agora, a Macromedia decidiutransformar o Flash em dois produ-tos distintos: Flash MX 2004 e Flash

Para os designers não progra-madores houve acréscimos de umexcelente facilitador, idêntico aoexistente no Dreamweaver. NoFlash MX 2004 existe agora umpainel com behaviors. Os behaviors— que, traduzidos, poderiam serações — são como macros pron-tas que facilitam a execução deoperações comuns: carregar umarquivo MP3, abrir um vídeo ouexibir uma janela. Em vez de es-crever o código para fazer isso, ousuário escolhe um behavior e eleautomaticamente insere os blocosde código que executam a tarefacorrespondente. Ainda na área decódigo, o Flash MX ganhou um me-

nu de Timeline Effects (efeitos delinha do tempo) que permite usaratalhos para programar os recur-sos mais comuns. Também é novi-dade a capacidade de importar di-retamente arquivos do Illustratore PDFs, antes incompatíveis.

Um novo plug-in será necessário:o Flash Player 7. Mas você tambémpoderá produzir animações para oFlash Player 6, inclusive usando osnovos componentes e até mesmo alinguagem Action Script 2. Mas o usoda versão atual será mais convenien-te. Em testes do INFOLAB, o FlashPlayer 7 se saiu seis vezes mais rápi-do do que o 6. O fabricante prome-te performance de duas a dez vezes

MX Professional 2004. Isso, em con-seqüência, também define a exis-tência de dois Studio MX 2004, con-forme a versão do Flash incluída.

Para quem escreve código, oFlash MX 2004 traz o Action Script2, a nova versão de sua linguagemde desenvolvimento. Agora, o Ac-tion Script pode ser aberto sepa-radamente do Flash, como um edi-tor independente. Nessa versão,o Action Script passa a ser umalinguagem baseada em classes,como Java e C#. Uma das vanta-gens disso é que o código fica maislimpo do que no Action Script 1ou no Javascript, e o desenvolvi-mento orientado a objetos se tor-na mais compreensível. Quem jáprograma em Action Script 1 nãoprecisa reaprender a lidar com aferramenta: a sintaxe da versão 1continua compatível, dando ao de-senvolvedor a chance de absor-ver a nova linguagem aos poucos.

Flash MX Professional 2004: templates para palmtops

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Recursos (50%),Integração (25%) e Compatibilidade (25%). O Studo MX recebeu meio ponto a mais naavaliação técnica pelo bom desempenho da Macromedia na Pesquisa INFO de Marcas 2005.

> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> APLICATIVOS

> RECURSOS

> INTEGRAÇÃO

> COMPATIBILIDADE


> PREÇO (R$)

> CUSTO/BENEFÍCIO

Macromedia

Pacote de software para desenvolvimento desites e aplicações para a internet

A integração dos componentes, agora cominterface unificada

Nem todo desenvolvedor vai aproveitar oFreeHand e o ColdFusion

Dreamweaver MX 2004, Flash MX Professional2004, Fireworks MX 2004, FreeHand MX eColdFusion MX 6.1 Developer Edition

9,0Melhor suporte a folhas de estilo e a tecnologiasde servidor

7,5O Dreamweaver centraliza o desenvolvimento ecompartilha recursos com outros programas

8,0Java, PHP, .Net, JSP, CSS, XML. O Flash importaEPS, PDF, AI, DXF, EMF, AVI, MOV etc.

8,9

2 763

8,4

Studio MX 2004 com Flash MX Professional


FERRAMENTAS/SUÍTE

COLEÇÃO INFO > 43

FERRAMENTAS/SUÍTE


nicos de uma equi-pe trabalhem numapágina ao mesmotempo. Também foiacrescentado o re-curso Secure FTP,que garante cripto-grafia na transferên-cia de arquivos en-tre as máquinas dedesenvolvimento eo site de destino.

Na área de forma-tação, agora é pos-sível copiar e colartrechos de documentos vindos deprogramas da Microsoft com a pre-servação de cores e estilos CSS. Naparte de código, foram adicionadosinspetores para ASP.Net, XML, sin-taxe PHP, e objetos de controle deformulários para ASP.Net. Na telainicial, o programador escolhe a op-ção de plataforma com que vai tra-balhar, e o Dreamweaver se ajustaconvenientemente.

> Flash MX 2004Na versão anterior do Flash, a MX,o usuário, ao entrar no aplicativo,indicava se era um desenvolvedor— alguém mais voltado para os có-digos de programação — ou um de-signer, o profissional mais preocu-pado com o equilíbrio visual das pá-ginas. Conforme a escolha, o pro-grama exibia uma interface adequa-da. Agora, a Macromedia decidiutransformar o Flash em dois produ-tos distintos: Flash MX 2004 e Flash

Para os designers não progra-madores houve acréscimos de umexcelente facilitador, idêntico aoexistente no Dreamweaver. NoFlash MX 2004 existe agora umpainel com behaviors. Os behaviors— que, traduzidos, poderiam serações — são como macros pron-tas que facilitam a execução deoperações comuns: carregar umarquivo MP3, abrir um vídeo ouexibir uma janela. Em vez de es-crever o código para fazer isso, ousuário escolhe um behavior e eleautomaticamente insere os blocosde código que executam a tarefacorrespondente. Ainda na área decódigo, o Flash MX ganhou um me-

nu de Timeline Effects (efeitos delinha do tempo) que permite usaratalhos para programar os recur-sos mais comuns. Também é novi-dade a capacidade de importar di-retamente arquivos do Illustratore PDFs, antes incompatíveis.

Um novo plug-in será necessário:o Flash Player 7. Mas você tambémpoderá produzir animações para oFlash Player 6, inclusive usando osnovos componentes e até mesmo alinguagem Action Script 2. Mas o usoda versão atual será mais convenien-te. Em testes do INFOLAB, o FlashPlayer 7 se saiu seis vezes mais rápi-do do que o 6. O fabricante prome-te performance de duas a dez vezes

MX Professional 2004. Isso, em con-seqüência, também define a exis-tência de dois Studio MX 2004, con-forme a versão do Flash incluída.

Para quem escreve código, oFlash MX 2004 traz o Action Script2, a nova versão de sua linguagemde desenvolvimento. Agora, o Ac-tion Script pode ser aberto sepa-radamente do Flash, como um edi-tor independente. Nessa versão,o Action Script passa a ser umalinguagem baseada em classes,como Java e C#. Uma das vanta-gens disso é que o código fica maislimpo do que no Action Script 1ou no Javascript, e o desenvolvi-mento orientado a objetos se tor-na mais compreensível. Quem jáprograma em Action Script 1 nãoprecisa reaprender a lidar com aferramenta: a sintaxe da versão 1continua compatível, dando ao de-senvolvedor a chance de absor-ver a nova linguagem aos poucos.

Flash MX Professional 2004: templates para palmtops

(1) Média ponderada considerando os seguintes itens e respectivos pesos: Recursos (50%),Integração (25%) e Compatibilidade (25%). O Studo MX recebeu meio ponto a mais naavaliação técnica pelo bom desempenho da Macromedia na Pesquisa INFO de Marcas 2005.

> FABRICANTE

> O QUE É

> PRÓ

> CONTRA

> APLICATIVOS

> RECURSOS

> INTEGRAÇÃO

> COMPATIBILIDADE


> PREÇO (R$)

> CUSTO/BENEFÍCIO

Macromedia

Pacote de software para desenvolvimento desites e aplicações para a internet

A integração dos componentes, agora cominterface unificada

Nem todo desenvolvedor vai aproveitar oFreeHand e o ColdFusion

Dreamweaver MX 2004, Flash MX Professional2004, Fireworks MX 2004, FreeHand MX eColdFusion MX 6.1 Developer Edition

9,0Melhor suporte a folhas de estilo e a tecnologiasde servidor

7,5O Dreamweaver centraliza o desenvolvimento ecompartilha recursos com outros programas

8,0Java, PHP, .Net, JSP, CSS, XML. O Flash importaEPS, PDF, AI, DXF, EMF, AVI, MOV etc.

8,9

2 763

8,4

Studio MX 2004 com Flash MX Professional

FERRAMENTAS/SUÍTE 23.05.05 16:54

FERRAMENTAS/SUÍTE

44 < COLEÇÃO INFO

maior, mas o resultado depende dotipo de arquivo usado no filme.

Na versão Professional do FlashMX 2004, destacam-se os recursospara o desenvolvimento de aplica-ções baseadas em formulários, noestilo do que fazem os programa-dores de Visual Basic e Delphi. Oproduto também evoluiu para orumo do desenvolvimento basea-do em componentes prontos. En-tre os que vêm no pacote encon-tram-se objetos virtuais para aces-so a dados. Também merecem re-ferência os numerosos templatesnovos, especialmente os destina-dos ao desenvolvimento de apli-cações para Pocket PC ou telefo-nes celulares. Ao se escolher ummodelo de equipamento, a tela daaplicação assume as característi-

cas de um emulador da máquina.Assim a área de trabalho fica coma cara de micro de mão ou de ce-lular, o que ajuda na visualizaçãodo conteúdo a ser desenvolvido.

> Fireworks MX 2004No editor de imagens da suíte, oFireworks MX 2004, a palavra-cha-ve são as ferramentas de trabalhocolaborativo e a integração com oprograma principal, o Dreamwea-ver. O Fireworks suporta os mes-mos esquemas de travamento dasimagens PNG, para evitar que maisde um integrante da equipe traba-lhe com o mesmo arquivo. O avan-ço da integração é patente. Quan-do o Dreamweaver edita imagensdiretamente, na verdade está usan-do recursos do Fireworks.

Fireworks MX 2004: ferramentas de trabalho colaborativo e integração


TUTORIAL/PORTAL


versatilidade é a me-lhor das característi-cas do PHP-Nuke, umsistema de gerencia-

mento de conteúdo que vem ga-nhando destaque entre os desen-volvedores de sites dinâmicos. Emum único local, o administradordo site consegue controlar as di-versas funções presentes na ins-talação-padrão do PHP-Nuke e osseus numerosos módulos adicio-nais. O cardápio de recursos inte-rativos inclui fóruns, mensagensprivadas, enquetes, newsletters eferramenta de busca. Tudo é con-figurado por meio de uma inter-face simples e intuitiva.

O requisito fundamental paramontar um portal recheado de re-cursos interativos é um servidorcom o PHP-Nuke, o Apache comsuporte ao PHP e o MySQL insta-lados. Essa máquina pode ser qual-quer micro com banda larga ou umhost com suporte a PHP-Nuke. Nes-te tutorial, vamos hospedar o sitelocalmente. Para quem preferir pa-gar a hospedagem e se livrar daadministração do servidor, ao tér-

mino do processo, basta fazer oupload do site para o host escolhi-do. Só é preciso ficar atento se oserviço e o plano contratados ofe-recem suporte ao PHP-Nuke.

1. Prepare a baseO primeiro passo é instalar o Apa-che com suporte a PHP e MySQL,tarefa que pode ser feita numa úni-ca tacada com o PHPTriad (www.info.abril.com.br/download/3170.shtml). O pacote reúne ostrês aplicativos e ferramentas ad-ministrativas, como o phpMyAd-min. É só executar o arquivo doPHPTriad para instalar cada pro-grama na sua respectiva pasta-pa-drão. Reinicie o computador e lo-calize o grupo de atalhos doPHPTriad no menu Iniciar do Win-dows. No subgrupo MySQL, cliqueem MySQL-D para ativar o aplica-tivo. Em seguida, acione o Apache,por meio do ícone Start Apache,dentro do subgrupo Apache. A ja-nela do prompt com a mensagem“Apache is running” é o sinal deque o web server está rodando epronto para a luta.

MONTE O SITERAPIDINHO

COM O PHP-NUKE, DÁ PARA CRIAR UM PORTAL COM ALTADOSE DE INTERATIVIDADE EM POUCO TEMPO


A

TUTORIAL/PORTAL 23.05.05 16:56 Page 45

TUTORIAL/PORTAL

COLEÇÃO INFO > 47

TUTORIAL/PORTAL


insira logo à frente da variável umapalavra para servir de senha. O no-me escolhido anteriormente parao banco de dados (no nosso caso,INFOLAB) deve ser digitado na va-riável $dbname. Os campos depoisde editados devem ficar assim:$dbhost = “localhost”;$dbuname = “root”;$dbpass = “senha”;$dbname = “INFOLAB”;$prefix = “nuke”;$user_prefix = “nuke”;$dbtype = “MySQL”;$sitekey = “SdFk*fa28367-dm56w69.3a2fDS+e9”; $gfx_chk = 7;

6. O visualConcluída a etapa de criação e con-figuração do banco de dados, todoo trabalho passa a ser feito nainterface de administração doPHP-Nuke, no endereço http:// localhost/nome-do-portal/admin.php. É o local no qual serão defi-

nidos o layout, osrecursos interativose o conteúdo doportal. Assim quevocê entrar pelaprimeira vez no en-dereço, será preci-so criar uma contade administrador,fornecendo login esenha. Clicando noícone Preferências,na parte de baixoda tela, surgem oscampos para inse-

rir as informações gerais (como onome do site e a URL) e escolhero visual do portal. No campo Te-mas, há um menu com diversasopções pré-instaladas. Além des-sas, o PHP-Nuke pode receber ou-tros temas criados pelo usuário oubaixados pela web. Para dar umtoque mais pessoal, é interessan-te substituir o logo-padrão por umlogotipo ou imagem personaliza-da. Para que o seu próprio logoapareça no menu de opções, é pre-ciso que o arquivo GIF correspon-dente esteja armazenado na pas-ta de imagens do tema escolhidoe nomeado como logo.gif, substi-tuindo o original. O caminho paraa pasta é C:\Apache\htdocs\nome-do-portal\themes\nome-do-tema\images. Não se esqueça tam-bém de selecionar o idioma e in-dicar o formato para o horário lo-cal, digitando pt-br. Role a tela atéo final e salve as alterações.

PHP-Nuke: Menu de Administração traz todos os recursos

2. A vez do PHP-NukePreliminares concluídas, é hora demergulhar no PHP-Nuke (www.info.abril.com.br/download/3667.shtml). A versão utilizada é a 7.6. Fa-ça a extração numa pasta de sua pre-ferência. O conteúdo traz os scriptspara gerar as tabelas no MySQL, ar-quivos de ajuda e uma pasta chama-da HTML, com todos os arquivos queserão usados no site.

3. O banco de dadosCom o Apache rodando, digite nonavegador o endereço http://localhost/phpmyadmin para en-trar na página de administraçãodos dados do MySQL por meio dophpMyAdmin. No campo Cria No-vo Banco de Dados, digite um no-me, como INFOLAB. Está criadoum banco de dados vazio. Na te-la seguinte você irá rodar o scriptpara gerar as tabelas do banco dedados INFOLAB.Pressione o botãoProcurar, vá até odiretório no qualforam extraídos osarquivos do PHP-Nuke, abra a pas-ta SQL e cliqueduas vezes sobreo arquivo nuke.sql.Na seqüência, fi-nalize a operaçãoclicando no bo-tão Executa. Pron-to, estão criadasas tabelas.

4. O nome do portalAgora, copie todos os arquivos dapasta HTML, extraída durante a ins-talação do PHP-Nuke, e cole no dire-tório C:\Apache\htdocs ou em umasubpasta que você pode criar com onome do portal. Assim, o endereçodo seu site PHP-Nuke ficará sendohttp://localhost/nome-do-portal/.

5. A hospedagemEntre os arquivos copiados da pas-ta HTML está o config.php, que de-ve ser aberto e editado no Blocode notas do Windows ou qualquerprocessador de texto. A variável$dbhost traz o valor “localhost”.Como vamos hospedar o site PHP-Nuke localmente, deixe como está.Para quem preferir recorrer a umprovedor de hospedagem, será pre-ciso substituir o valor das variáveiscom as informações fornecidas pe-lo serviço contratado. Em $dbpass,

phpMyAdmin: para criar as tabelas do banco de dados


TUTORIAL/PORTAL

COLEÇÃO INFO > 47

TUTORIAL/PORTAL


insira logo à frente da variável umapalavra para servir de senha. O no-me escolhido anteriormente parao banco de dados (no nosso caso,INFOLAB) deve ser digitado na va-riável $dbname. Os campos depoisde editados devem ficar assim:$dbhost = “localhost”;$dbuname = “root”;$dbpass = “senha”;$dbname = “INFOLAB”;$prefix = “nuke”;$user_prefix = “nuke”;$dbtype = “MySQL”;$sitekey = “SdFk*fa28367-dm56w69.3a2fDS+e9”; $gfx_chk = 7;

6. O visualConcluída a etapa de criação e con-figuração do banco de dados, todoo trabalho passa a ser feito nainterface de administração doPHP-Nuke, no endereço http:// localhost/nome-do-portal/admin.php. É o local no qual serão defi-

nidos o layout, osrecursos interativose o conteúdo doportal. Assim quevocê entrar pelaprimeira vez no en-dereço, será preci-so criar uma contade administrador,fornecendo login esenha. Clicando noícone Preferências,na parte de baixoda tela, surgem oscampos para inse-

rir as informações gerais (como onome do site e a URL) e escolhero visual do portal. No campo Te-mas, há um menu com diversasopções pré-instaladas. Além des-sas, o PHP-Nuke pode receber ou-tros temas criados pelo usuário oubaixados pela web. Para dar umtoque mais pessoal, é interessan-te substituir o logo-padrão por umlogotipo ou imagem personaliza-da. Para que o seu próprio logoapareça no menu de opções, é pre-ciso que o arquivo GIF correspon-dente esteja armazenado na pas-ta de imagens do tema escolhidoe nomeado como logo.gif, substi-tuindo o original. O caminho paraa pasta é C:\Apache\htdocs\nome-do-portal\themes\nome-do-tema\images. Não se esqueça tam-bém de selecionar o idioma e in-dicar o formato para o horário lo-cal, digitando pt-br. Role a tela atéo final e salve as alterações.

PHP-Nuke: Menu de Administração traz todos os recursos

2. A vez do PHP-NukePreliminares concluídas, é hora demergulhar no PHP-Nuke (www.info.abril.com.br/download/3667.shtml). A versão utilizada é a 7.6. Fa-ça a extração numa pasta de sua pre-ferência. O conteúdo traz os scriptspara gerar as tabelas no MySQL, ar-quivos de ajuda e uma pasta chama-da HTML, com todos os arquivos queserão usados no site.

3. O banco de dadosCom o Apache rodando, digite nonavegador o endereço http://localhost/phpmyadmin para en-trar na página de administraçãodos dados do MySQL por meio dophpMyAdmin. No campo Cria No-vo Banco de Dados, digite um no-me, como INFOLAB. Está criadoum banco de dados vazio. Na te-la seguinte você irá rodar o scriptpara gerar as tabelas do banco dedados INFOLAB.Pressione o botãoProcurar, vá até odiretório no qualforam extraídos osarquivos do PHP-Nuke, abra a pas-ta SQL e cliqueduas vezes sobreo arquivo nuke.sql.Na seqüência, fi-nalize a operaçãoclicando no bo-tão Executa. Pron-to, estão criadasas tabelas.

4. O nome do portalAgora, copie todos os arquivos dapasta HTML, extraída durante a ins-talação do PHP-Nuke, e cole no dire-tório C:\Apache\htdocs ou em umasubpasta que você pode criar com onome do portal. Assim, o endereçodo seu site PHP-Nuke ficará sendohttp://localhost/nome-do-portal/.

5. A hospedagemEntre os arquivos copiados da pas-ta HTML está o config.php, que de-ve ser aberto e editado no Blocode notas do Windows ou qualquerprocessador de texto. A variável$dbhost traz o valor “localhost”.Como vamos hospedar o site PHP-Nuke localmente, deixe como está.Para quem preferir recorrer a umprovedor de hospedagem, será pre-ciso substituir o valor das variáveiscom as informações fornecidas pe-lo serviço contratado. Em $dbpass,

phpMyAdmin: para criar as tabelas do banco de dados

TUTORIAL/PORTAL 23.05.05 16:57

TUTORIAL/PORTAL

COLEÇÃO INFO > 49

TUTORIAL/PORTAL

48 < COLEÇÃO INFO

co e a imagem que irá aparecerjunto com a notícia. Para inserir aimagem, é preciso que o arquivoesteja no interior do diretório deimagens dos tópicos, que fica emC:\Apache\htdocs\nome-do-portal\images\topics. Caso con-trário, ela não aparecerá no me-nuzinho de imagens do gerencia-dor de tópicos. Fique atento tam-bém às dimensões da imagem,pois ela é exibida em tamanhoreal. Assim, uma imagem muitolarga ou alta pode acabar com odesign da página. Se tudo estiverde acordo, salve as alterações.

10. Os textosFinalmente é hora de inserir ostextos. Clique no ícone Adicionarnotícias. Dentro do gerenciador,escreva o título da notícia, esco-lha um tópico e marque a opçãopara publicar na home. Se quiserabrir espaço para os visitantes dosite comentarem a notícia, habili-te a opção Ativar Comentários Pa-ra esta Notícia. Na caixa Texto daNotícia, digite ou cole o conteú-do. Logo abaixo há outro campo,chamado Texto Estendido. Ele éuma ótima opção para a publica-ção de textos longos. Para tanto,digite apenas o trecho inicial dotexto no campo Texto da Notíciae o restante em Texto Estendido.Dessa forma, a home trará ape-nas um aperitivo da notícia e umlink para a página com o texto in-tegral. A única coisa chata é que

as quebras de linha têm de ser fei-tas manualmente, com os manja-dos comandos <br> (quebra) e <p>(parágrafo) do HTML. Em compen-sação, o uso do HTML na caixa detextos abre a possibilidade de in-serir fotos, animações em Flashetc. Só é preciso escrever o co-mando com o caminho para o ar-quivo. Terminada a operação, nãose esqueça de salvar o trabalho.

11. O acessoCom o site concluído numa máqui-na com acesso em banda larga eendereço IP fixo, ele poderá seracessado por uma URL que traz onúmero do IP e o nome do portal,algo como http://200.xxx.xxx.xxx/nome-do-portal.

Caso você resolva deixar o siteem um host remoto, o processonão é complicado. Primeiramen-te, edite o arquivo config.php comas informações fornecidas peloserviço de hospedagem. Na telade administração do seu PHP-Nuke local, entre em Backup e sal-ve o arquivo. Depois, envie o ar-quivo por FTP para o servidor jun-to com toda a árvore de diretóriosdo portal. Ao configurar o bancode dados no novo servidor, na ho-ra de rodar o script para a criaçãode tabelas, será preciso apenasexecutar o arquivo salvo comobackup para instalar o site exata-mente como ele havia sido pro-duzido no computador da sua ca-sa ou do seu escritório.

7. Os módulosDe volta à página de administração,entre em Módulos para ativar os mó-dulos a serem adotados no portal.Será exibida uma grande tabela, comcolunas para os recursos, os respec-tivos status (ativo ou inativo) e fun-ções (editar, ativar e colocar na ho-me). Para citar apenas alguns dosrecursos mais bacanas, dá para in-cluir ferramenta de busca (Search),montar fóruns (Forum), implemen-tar um serviço de troca de mensa-gens particulares entre os usuáriosregistrados (Private Messages) e con-trolar todas as estatísticas de aces-so (Statistics). A forma de editar ca-da um dos módulos é a mesma. Comum clique sobre o recurso deseja-do, surgem embaixo da tela os cam-pos a serem editados. É preciso de-terminar se o nome de exibição domódulo será alterado. O link para oserviço de mensagens privadas (Pri-vate Messages) pode aparecer co-mo Comunique-se, por exemplo. Noitem seguinte, esco-lha quais usuáriosterão acesso ao re-curso, que pode es-tar liberado para to-dos os visitantes, sópara visitantes ca-dastrados ou restri-to aos administrado-res. Feitas as altera-ções, não se esque-ça de salvar tudo, re-tornando à tela deadministração.

8. Os blocosOs sites produzidos com o PHP-Nuke têm uma estrutura caracte-rística. Normalmente a página é for-mada por três blocos. Os dois late-rais são mais estreitos e trazem me-nus e atalhos para o restante do si-te. Já o central mostra o conteúdoprincipal. Entrando em Blocos, épossível escolher a posição que osmenus e módulos irão ocupar den-tro desses blocos.

9. O conteúdoAgora que a estrutura, os recursose o visual do portal estão defini-dos, está chegando o momento dealimentar as páginas com conteú-do. Porém, é aconselhável fazê-lode forma organizada, trabalhandocom tópicos, que servirão paraagrupar textos sobre assuntos cor-relatos. Na tela de administração,clique em Tópicos. O processo decriação de tópicos consiste basica-mente em indicar o nome do tópi-

Portal: página inicial com notícias, enquete, busca etc


TUTORIAL/PORTAL

COLEÇÃO INFO > 49

TUTORIAL/PORTAL

48 < COLEÇÃO INFO

co e a imagem que irá aparecerjunto com a notícia. Para inserir aimagem, é preciso que o arquivoesteja no interior do diretório deimagens dos tópicos, que fica emC:\Apache\htdocs\nome-do-portal\images\topics. Caso con-trário, ela não aparecerá no me-nuzinho de imagens do gerencia-dor de tópicos. Fique atento tam-bém às dimensões da imagem,pois ela é exibida em tamanhoreal. Assim, uma imagem muitolarga ou alta pode acabar com odesign da página. Se tudo estiverde acordo, salve as alterações.

10. Os textosFinalmente é hora de inserir ostextos. Clique no ícone Adicionarnotícias. Dentro do gerenciador,escreva o título da notícia, esco-lha um tópico e marque a opçãopara publicar na home. Se quiserabrir espaço para os visitantes dosite comentarem a notícia, habili-te a opção Ativar Comentários Pa-ra esta Notícia. Na caixa Texto daNotícia, digite ou cole o conteú-do. Logo abaixo há outro campo,chamado Texto Estendido. Ele éuma ótima opção para a publica-ção de textos longos. Para tanto,digite apenas o trecho inicial dotexto no campo Texto da Notíciae o restante em Texto Estendido.Dessa forma, a home trará ape-nas um aperitivo da notícia e umlink para a página com o texto in-tegral. A única coisa chata é que

as quebras de linha têm de ser fei-tas manualmente, com os manja-dos comandos <br> (quebra) e <p>(parágrafo) do HTML. Em compen-sação, o uso do HTML na caixa detextos abre a possibilidade de in-serir fotos, animações em Flashetc. Só é preciso escrever o co-mando com o caminho para o ar-quivo. Terminada a operação, nãose esqueça de salvar o trabalho.

11. O acessoCom o site concluído numa máqui-na com acesso em banda larga eendereço IP fixo, ele poderá seracessado por uma URL que traz onúmero do IP e o nome do portal,algo como http://200.xxx.xxx.xxx/nome-do-portal.

Caso você resolva deixar o siteem um host remoto, o processonão é complicado. Primeiramen-te, edite o arquivo config.php comas informações fornecidas peloserviço de hospedagem. Na telade administração do seu PHP-Nuke local, entre em Backup e sal-ve o arquivo. Depois, envie o ar-quivo por FTP para o servidor jun-to com toda a árvore de diretóriosdo portal. Ao configurar o bancode dados no novo servidor, na ho-ra de rodar o script para a criaçãode tabelas, será preciso apenasexecutar o arquivo salvo comobackup para instalar o site exata-mente como ele havia sido pro-duzido no computador da sua ca-sa ou do seu escritório.

7. Os módulosDe volta à página de administração,entre em Módulos para ativar os mó-dulos a serem adotados no portal.Será exibida uma grande tabela, comcolunas para os recursos, os respec-tivos status (ativo ou inativo) e fun-ções (editar, ativar e colocar na ho-me). Para citar apenas alguns dosrecursos mais bacanas, dá para in-cluir ferramenta de busca (Search),montar fóruns (Forum), implemen-tar um serviço de troca de mensa-gens particulares entre os usuáriosregistrados (Private Messages) e con-trolar todas as estatísticas de aces-so (Statistics). A forma de editar ca-da um dos módulos é a mesma. Comum clique sobre o recurso deseja-do, surgem embaixo da tela os cam-pos a serem editados. É preciso de-terminar se o nome de exibição domódulo será alterado. O link para oserviço de mensagens privadas (Pri-vate Messages) pode aparecer co-mo Comunique-se, por exemplo. Noitem seguinte, esco-lha quais usuáriosterão acesso ao re-curso, que pode es-tar liberado para to-dos os visitantes, sópara visitantes ca-dastrados ou restri-to aos administrado-res. Feitas as altera-ções, não se esque-ça de salvar tudo, re-tornando à tela deadministração.

8. Os blocosOs sites produzidos com o PHP-Nuke têm uma estrutura caracte-rística. Normalmente a página é for-mada por três blocos. Os dois late-rais são mais estreitos e trazem me-nus e atalhos para o restante do si-te. Já o central mostra o conteúdoprincipal. Entrando em Blocos, épossível escolher a posição que osmenus e módulos irão ocupar den-tro desses blocos.

9. O conteúdoAgora que a estrutura, os recursose o visual do portal estão defini-dos, está chegando o momento dealimentar as páginas com conteú-do. Porém, é aconselhável fazê-lode forma organizada, trabalhandocom tópicos, que servirão paraagrupar textos sobre assuntos cor-relatos. Na tela de administração,clique em Tópicos. O processo decriação de tópicos consiste basica-mente em indicar o nome do tópi-

Portal: página inicial com notícias, enquete, busca etc

TUTORIAL/PORTAL 23.05.05 16:59

TUTORIAL/SITE DE EMPRESA


sonho de quem gosta deinventar na internet, masodeia programar, é po-der criar websites dinâ-

micos sem escrever uma linha de có-digo. E essa possibilidade existe. Como Fullxml, dá para montar e adminis-trar sites interativos, com fóruns, en-quetes, livro de visitas e cadastro deusuários, tudo com XML e ASP. O me-lhor da história é que o programa, de-senvolvido por um francês chamadoJohn Roland, é de código aberto. Ve-ja, a seguir, como obter essa ferra-menta e montar um site com ela.

1. PRÉ-REQUISITOSPara usar o Fullxml, é ne-cessário ter um microcom o Windows e o ser-vidor web Internet Infor-mation Services (IIS). Es-se recurso vem como pa-drão no Windows XP Pro-fessional, no Windows2000 e no Windows Ser-ver 2003. Também é pre-ciso instalar o MSXML 4.0— os componentes bási-cos da linguagem XML.

Neste tutorial, vamos fazer uma ins-talação no Windows XP Professio-nal. Lembre-se: o site, ao ser colo-cado na web, só poderá ser hospe-dado num ambiente que dê supor-te às tecnologias ASP e XML.

2. INSTALAÇÃOFaça o download do Fullxml (www.info.abril.com.br/download/3836.shtml) e do MSXML 4.0 (www.info.abril.com. br/download/3838.shtml).Agora, no Windows XP Professional,instale o IIS. Para isso, no Painel deControle, abra o item Adicionar ou Re-

PÁGINA DINÂMICASEMPROGRAMAR

O FULLXML DISPENSA LINHAS DE CÓDIGO E BANCO DE DADOS NA CRIAÇÃO DE SITES INTERATIVOS

POR CARLOS MACHADO

O

Ensaio de site: página com menus, enquetes e notícias

TUTORIAL/SITE DE EMPRESA 23.05.05 17:08 Page 50



mover Programas. Cliqueem Adicionar/RemoverComponentes do Win-dows. No Assistente deComponentes, marque alinha Internet InformationServices (IIS) e avance.

Agora, instale o MSXML4.0 e, por fim, o Fullxml.Ao ser ativado no Win-dows, o IIS cria a pastaInetpub, que é o centrode serviços de internet,e dentro dela o subdire-tório wwwroot, a raiz doservidor web. Nessa pasta, crie umasubpasta chamada fullxml. O progra-ma Fullxml vem num pacote ZIP. Ex-traia o conteúdo desse arquivo, man-tendo os diretórios, na pasta fullxml.

3. AJUSTE AS PERMISSÕESPara que os administradores e usuá-rios do site possam utilizar adequa-damente o Fullxml, é preciso aindafazer um ajuste nos diretórios, usan-do o console de administração do IIS.No Painel de Controle, acione Desem-penho e Manutenção/FerramentasAdministrativas/Internet InformationServices. Surge o console do IIS. Abraa pasta Sites da Web e, depois, a sub-pasta Site da Web Padrão. Lá dentroestá o diretório fullxml. Este, por suavez, tem várias pastas. Clique com obotão direito na pasta Media e esco-lha Propriedades. Na orelha Diretó-rio, marque a opção Gravar. Isso per-mite que o usuário salve arquivos nes-se diretório. Faça o mesmo na pasta

Engine. Mas, ao contrário, na pastadb desligue a permissão Ler. Ou seja,essa será uma pasta reservada: o usuá-rio não terá direito de fazer nada aí.Agora, abra o browser e digite:http://localhost/fullxml. Pronto: aíestá o embrião de seu site. Agora, épreciso configurá-lo, dando os seustoques pessoais.

4. CONFIGURAÇÃO DO SITEA estrutura do site é bem parecidacom a de boa parte das páginas quevocê conhece. Acesse a interface degerenciamento do Fullxml. Para is-so, no quadro Login, digite o nome(full) e a senha-padrão (xml). No me-nu de administração, clique em Set-tings. Nessa página você define asinformações básicas do site. Antesde tudo, vamos fazê-lo falar a nos-sa língua. Na caixa Language, esco-lha Brazilian Portuguese. Na linhaEncoding, escolha iso-8859-1. Cli-que OK no final da página.

Configurações: aqui definem-se os recursos do site




Agora, na página em português, fa-ça um ajuste de segurança. Clique nomenu Moderação/Membros. Surge alista de usuários cadastrados. Lá es-tá o usuário full — a identidade coma qual você acessou o gerenciamen-to do site. Acione o botão Criar epreencha os campos Apelido e Se-nha. Em Grupo, escolha Administra-dor. Somente administradores podemalterar a estrutura do site. Dê OK e,de volta à lista de usuários, clique noapelido full e, na tela seguinte, acio-ne Deletar. O usuário-padrão desapa-receu (e você, que era ele, não estámais logado). Para continuar, aponteo browser para a página inicial:http://localhost/fullxml. Nela, en-tre como o usuário que você criou.

Retorne ao menu Principal/Confi-gurações. Preencha os campos. A cai-xa Aparência oferece 20 skins, ou te-mas, para o site. Escolha um diferen-te do padrão inicial, e clique em OK.Em seguida, na mesma página do

browser, encurte o endereço para araiz do site: http://localhost/fullxml. Confira: o site mudou de ca-ra. Os blocos de opções nos itensStatus de Moderação e Lista de Re-cursos permitem que você escolhaas funções que deseja habilitar. Emtodos os casos, as opções são On/Off.Você vai querer fóruns? Vai colocararquivos para download?

5. DEFINA O CONTEÚDOSeu site já está de pé. Falta agregarconteúdo. Clique em Principal/Pági-nas para adicionar páginas. Nessa te-la, clique em Criar e digite o conteú-do. Para que a página entre no ar, es-colha Sim na linha Publicação. Se vo-cê definir uma data de expiração, elaficará no ar até essa data. A opçãoConteúdos, no menu Principal, exi-be todas as páginas do site. Impor-tante: quando o administrador aces-sa a página, ela exibe um quadradono título de cada item. Clique nele

para editar o item. O me-nu Recursos permite criare administrar opções co-mo enquetes, fóruns ebanners. O gerador de en-quetes é superfácil deusar. Clique em Enque-tes/Criar. Digite as per-guntas e dê OK. A apura-ção é automática. Os tex-tos aceitam tags HTML eo programa até traz umpequeno editor. Para abri-lo, digite Ctrl+T quandoestiver escrevendo.Gerenciador: a administração é feita de qualquer lugar


TUTORIAL/LAYOUT


sar as tradicionais ta-belas de HTML para se-parar as áreas de umapágina está virando

uma solução antiquada. Cada vezmais, os webmasters utilizam o pa-drão CSS (Cascading Style Sheets)para definir o layout do site no lu-gar das tabelas. A substituição sejustifica — uma página de 60 KBcom tabelas emagrece para coisade 4 KB com CSS, reduzindo o tem-po de carregamento e o consumode banda. Assim, essa tecnologia,que há cerca de dois anos era usa-da basicamente para configurar

fontes e fundos de página, inaugu-rou a era tableless nos websites detodos os portes.

A adoção do CSS não aconteceuantes porque o suporte dos browsersa essa tecnologia ainda começava.Mas os navegadores atuais, como In-ternet Explorer 6.0, Firefox 1.0.4 eOpera 7 e 8, interpretam o padrãocom poucas diferenças (veja telas), oque permite utilizá-lo com precisão.

Neste tutorial, vamos criar o lay-out de um site substituindo o co-mando “table” do HTML por umconjunto de recursos do CSS co-nhecido como CSS-P (Cascading

Style Sheets Positio-ning). A principalvantagem desse mé-todo é que todo olayout fica num ar-quivo separado quevale para o site intei-ro e só é carregadouma vez pelo nave-gador. Isso evita a re-petição de tags naspáginas e permite al-terações mais rápi-das no visual do site.

ADEUS, TABELASDE HTML

O PADRÃO CSS DEFINE O LAYOUT DO SITE, DEIXA A PÁGINA LEVE E RÁPIDA DE CARREGAR

POR ANDRÉ CARDOZO

U

CSS no IE: boa distribuição das quatro áreas do layout

TUTORIAL/LAYOUT 23.05.05 18:04 Page 53

TUTORIAL/LAYOUT

COLEÇÃO INFO > 55

TUTORIAL/LAYOUT


#topo {margin: 5px;height: 80px;background: silver;}#esquerda {position: absolute;top: 105px;left: 10px;width: 150px;background: silver;}#meio {margin-left: 170px;margin-right: 220px;background: silver;}#direita {position: absolute;top: 105px;right: 10px;width: 200px;background: silver;}

O primeiro bloco de comandosse refere ao cabeçalho. Os elemen-tos “margin” e “height” definem,respectivamente, a margem e a al-tura em pixels. O atributo “back-ground” determina a cor de fundo,mas é opcional e foi incluído ape-nas para facilitar a visualização.

A seguir, definimos as três colu-nas do layout. O bloco da esquer-

Escolhemos umlayout com quatroáreas: cabeçalho ho-rizontal (onde nor-malmente entram lo-gotipo e banner), co-luna esquerda (me-nu de navegaçãoprincipal), colunacentral (área de con-teúdo e destaques) ecoluna direita (nave-gação secundária,links para parceirosetc.). O arquivo pronto está dispo-nível para download no endereçowww.info.abril.com.br/download/3466.shtml.

1. O HTMLO primeiro passo é criar o arquivoHTML. Dentro do comando “head”,é necessário escrever a seguinte tag: <link rel=“stylesheet” href=”estilo. css“type=”text/ css”>

Ela indica ao browser qual é afolha de estilo que deve ser toma-do como referência para o layout(neste caso, “estilo.css”). No corpodo arquivo HTML temos quatro blo-cos que definem as áreas:<div id=“topo”>conteúdo do cabeçalho </div><div id=“esquerda”>conteúdoda coluna esquerda</div><div id=“meio”>conteúdo da coluna central</div><div id=“direita”>conteúdo da coluna direita</div>

A tag “div” serve como depósito

de conteúdo, criando camadas quepodem ser manipuladas separada-mente. Dentro desse depósito, po-demos usar normalmente todos oscomandos HTML.

Note que cada “div” possui umatributo “id” distinto, que definetodas as áreas do layout. Assim, játemos no arquivo HTML os quatroblocos de conteúdo. Salve o arqui-vo e teste no browser.

2. A FOLHA DE ESTILOPor enquanto, as áreas do layoutainda não estão em suas devidasposições e são exibidas uma abai-xo da outra. Isso ocorre porque nãocriamos o documento CSS, que é oresponsável por definir a posiçãode cada bloco na página. Esse se-rá nosso próximo passo.

A folha de estilo nada mais é doque um arquivo em texto puro coma extensão CSS. Abrimos então oBloco de Notas do Windows e es-crevemos os seguintes comandos:

CSS no Opera: diferença de leitura na coluna à direitaCSS no Firefox: leitura altera o título e a coluna à direita

O tableless já faz parte doconjunto de padrões da web,especificados pelo W3C(www.w3c.org), o consórcioque dita as regrastecnológicas da grande rede.Por isso mesmo, a tendênciaé de aumentar acompatibilidade do padrãoentre os navegadores eacelerar o tempo derenderização das páginas.

Para seguir os padrões àrisca, verifique se a páginaque você criou está correta,utilizando o serviço W3CMarkup Validation Services,um validador de HTMLgratuito disponível noendereço validator.w3.org.Basta postar o endereço desua página, que o serviçomostrará as tags queapresentam erros.

VALIDE SUA PÁGINA


TUTORIAL/LAYOUT

COLEÇÃO INFO > 55

TUTORIAL/LAYOUT


#topo {margin: 5px;height: 80px;background: silver;}#esquerda {position: absolute;top: 105px;left: 10px;width: 150px;background: silver;}#meio {margin-left: 170px;margin-right: 220px;background: silver;}#direita {position: absolute;top: 105px;right: 10px;width: 200px;background: silver;}

O primeiro bloco de comandosse refere ao cabeçalho. Os elemen-tos “margin” e “height” definem,respectivamente, a margem e a al-tura em pixels. O atributo “back-ground” determina a cor de fundo,mas é opcional e foi incluído ape-nas para facilitar a visualização.

A seguir, definimos as três colu-nas do layout. O bloco da esquer-

Escolhemos umlayout com quatroáreas: cabeçalho ho-rizontal (onde nor-malmente entram lo-gotipo e banner), co-luna esquerda (me-nu de navegaçãoprincipal), colunacentral (área de con-teúdo e destaques) ecoluna direita (nave-gação secundária,links para parceirosetc.). O arquivo pronto está dispo-nível para download no endereçowww.info.abril.com.br/download/3466.shtml.

1. O HTMLO primeiro passo é criar o arquivoHTML. Dentro do comando “head”,é necessário escrever a seguinte tag: <link rel=“stylesheet” href=”estilo. css“type=”text/ css”>

Ela indica ao browser qual é afolha de estilo que deve ser toma-do como referência para o layout(neste caso, “estilo.css”). No corpodo arquivo HTML temos quatro blo-cos que definem as áreas:<div id=“topo”>conteúdo do cabeçalho </div><div id=“esquerda”>conteúdoda coluna esquerda</div><div id=“meio”>conteúdo da coluna central</div><div id=“direita”>conteúdo da coluna direita</div>

A tag “div” serve como depósito

de conteúdo, criando camadas quepodem ser manipuladas separada-mente. Dentro desse depósito, po-demos usar normalmente todos oscomandos HTML.

Note que cada “div” possui umatributo “id” distinto, que definetodas as áreas do layout. Assim, játemos no arquivo HTML os quatroblocos de conteúdo. Salve o arqui-vo e teste no browser.

2. A FOLHA DE ESTILOPor enquanto, as áreas do layoutainda não estão em suas devidasposições e são exibidas uma abai-xo da outra. Isso ocorre porque nãocriamos o documento CSS, que é oresponsável por definir a posiçãode cada bloco na página. Esse se-rá nosso próximo passo.

A folha de estilo nada mais é doque um arquivo em texto puro coma extensão CSS. Abrimos então oBloco de Notas do Windows e es-crevemos os seguintes comandos:

CSS no Opera: diferença de leitura na coluna à direitaCSS no Firefox: leitura altera o título e a coluna à direita

O tableless já faz parte doconjunto de padrões da web,especificados pelo W3C(www.w3c.org), o consórcioque dita as regrastecnológicas da grande rede.Por isso mesmo, a tendênciaé de aumentar acompatibilidade do padrãoentre os navegadores eacelerar o tempo derenderização das páginas.

Para seguir os padrões àrisca, verifique se a páginaque você criou está correta,utilizando o serviço W3CMarkup Validation Services,um validador de HTMLgratuito disponível noendereço validator.w3.org.Basta postar o endereço desua página, que o serviçomostrará as tags queapresentam erros.

VALIDE SUA PÁGINA

TUTORIAL/LAYOUT 23.05.05 18:05

TUTORIAL/LAYOUT

56 < COLEÇÃO INFO

Mais sobre o CSS

> Comando

> background

> border

> border-style

> color

> font

> font-family

> font-size

> list-style

> margin

> padding

> text-align

Exemplo

background:url(‘imagem/fundo.gif’)

border: solid 1px #000000

border-style: solid

color: rgb(255,10,10)

font: 10px verdana bold

font-family: arial

font-size: large

list-style: disc inside

margin: 0px auto 0px 5px

padding: 10px

text-align: justify

Função

Define propriedades dofundo, como cor ou imagem

Determina propriedades daborda

Atribui o estilo à borda

Define cor da fonte ou doelemento

Define propriedades dafonte

Determina o tipo da fonte

Regula o tamanho da fonte

Define propriedades doselementos <li>

Cria espaço à volta doelemento

Define espaço entre o texto ea borda

Define o alinhamento dotexto

Obs.: outros comandos você pode encontrar no endereço: www.w3schools.com/css.

da, que abrigará o menu de nave-gação, tem largura definida em pi-xels. A linha “position: absolute”permite que o webmaster determi-ne a posição do bloco por meio decoordenadas. Neste caso, ele estáa 105 pixels do topo e a 10 pixelsdo lado esquerdo da página. Esseprocedimento vale também para acoluna da direita.

3. A COLUNA DO MEIOO pulo-do-gato está no código usa-do na coluna do meio. Aqui, defi-nimos apenas as margens esquer-da e direita para evitar que a árease sobreponha às outras. Observeque, ao contrário dos blocos da es-querda e da direita, não há largu-

ra definida. Dessa forma, a áreacentral é ajustada automaticamen-te, de acordo com o tamanho dajanela do internauta. Caso o usuá-rio redimensione o browser, a pá-gina será realinhada, evitando abarra de rolagem na horizontal.

Salve o documento como “esti-lo.css” no mesmo diretório do ar-quivo HTML e faça o teste, redi-mensionando a janela do browser.

Note que as áreas do topo e domeio se adaptam ao novo tama-nho, enquanto as colunas da es-querda e da direita mantêm sualargura. Pronto, nosso layout es-tá terminado e agora é só escre-ver uma carta de despedida semsaudade para as tabelas HTML.

Conheça outros comandos úteis em folhas de estilo


TUTORIAL/SERVIDOR DE BLOG


uito mais que um diáriode adolescente, o blogpode ser um canal efi-ciente e dinâmico para

divulgar notícias e interagir com aspessoas. Uma equipe de desenvolvi-mento de software, por exemplo, po-de publicar nele dados sobre atuali-zações que estão sendo realizadas.

Neste tutorial, vamos usar o Word-Press, um servidor de blog gratuito ede código-fonte aberto. Os requisitosbásicos para rodá-lo são o servidorApache, o interpretador de linguagemPHP e o gerenciador de bancos de da-dos MySQL. Esse trio de software fazparte da maioria dos planos de hos-pedagem em Linux oferecidos na in-ternet. Vejamos os passos a seguir.

1. A BASE DE DADOSA primeira coisa a fazer é criar umbanco de dados no MySQL para oWordPress. Em geral, os provedoresde hospedagem oferecem alguma fer-ramenta que possibilita gerenciar obanco de dados. O INFOLAB usou ophpMyAdmin. Na tela principal dophpMyAdmin, digite um nome parao novo banco e clique no botão Cria.

No nosso exemplo, usamos o nomewordpress. Vamos, agora, definir umaconta de usuário no MySQL para oWordPress. Volte à página principaldo phpMyAdmin e clique no link Pri-vilégios. Em seguida, acione Adicio-nar um Novo Usuário. No campo No-me do Usuário, digite um nome. De-pois, especifique uma senha de aces-so. Na seção Global Privileges, cliqueno link Marcar All. Clique no botãoExecuta para criar a conta.

2. A PREPARAÇÃOFaça o download do WordPress(www.info.abril.com.br/download/3949.shtml) e descompacte-o. Vocêterá uma pasta chamada WordPresscom os arquivos. Abra, num editor detextos, o wp-config-sample.php e pro-cure por MySQL Settings. Nas três li-nhas seguintes, coloque o nome dobanco de dados, o nome do usuárioe a senha que você definiu nos pas-sos 1 e 2, como neste exemplo:define('DB_NAME', 'wordpress'); define('DB_USER', 'infolab');define('DB_PASSWORD', 'senha');

Na quarta linha dessa seção, indi-que o servidor onde roda o MySQL.

BLOG PRONTOEM SEIS PASSOS

UM ROTEIRO PARA IMPLANTAR UM DIÁRIO EM SEU WEBSITE COM O WORDPRESS

POR MAURÍCIO GREGO

M

TUTORIAL/SERVIDOR DE BLOG 1 23.05.05 17:12 Page 57


COLEÇÃO INFO > 59



Na seção Date and Ti-me, digite -3 no campoTimes in the WeblogShould Differ By (se o ho-rário de verão estiver emvigor, use -2). Assim, es-tamos dizendo ao Word-Press para empregar ohorário oficial brasileiro.No campo Default DateFormat, digite j/n/Y pa-ra exibir as datas no for-mato dia/mês/ano. EmDefault Time Format, es-creva G:i. Assim, os horários serãoexibidos na forma horas:minutos,com contagem de 24 horas. Quandoterminar, clique no botão Update Op-tions. Se quiser ver como ficou o blog,clique em View Site na barra de na-vegação superior. Depois, use o bo-tão Voltar do navegador para retor-nar ao sistema de gerenciamento.

5. OS USUÁRIOSO WordPress permite que várias pes-soas publiquem notícias no blog ecomentem as mensagens. Cada usuá-rio é classificado num nível de 0 a 10.Quanto mais alto o nível, mais recur-sos ficam acessíveis a ele. Quando al-guém se cadastra, é classificado nonível 0. Nesse nível, é permitido ape-nas ler as mensagens. Mas o admi-nistrador pode promover o usuário.

Para administrar os usuários, nosistema de gerenciamento, clique emUsers. Observe as tabelas de autorese usuários. Na coluna Level, apareceo nível do usuário e os sinais + e -.

Clique nesses sinais para aumentarou diminuir o nível. Quando o nívelé maior ou igual a 1, a pessoa apare-ce na lista de autores e pode publi-car mensagens. Se o nível for 0, a ta-bela mostra os sinais + e X. Clicandoem X, o usuário será excluído.

6. OS TOQUES FINAISSeu blog já pode ser usado. Mas hávárias outras coisas que você podefazer para personalizá-lo. Clique emLinks no menu de administração etroque os links falsos do blog porlinks para seções do seu site. Paracriar categorias em que podem serclassificadas as mensagens, cliqueem Categories. Se quiser permitir apublicação de fotos no blog, cliqueem Options e, em seguida, na abaMiscellaneous. Nela, assinale a op-ção Allow File Uploads e configureas demais opções. Quando terminara configuração, não se esqueça declicar no botão Update Options pa-ra executar as mudanças.

Teste de blog: página simples e fácil de navegar

Na maioria dos provedores de hos-pedagem, o MySQL e o Apache estãono mesmo servidor. Nesse caso, o en-dereço é localhost (se tiver dúvidas,pergunte ao provedor), que é o pa-drão do WordPress. Fica assim:define('DB_HOST', 'localhost');

No final, salve esse arquivo com onome wp-config.php.

3. A INSTALAÇÃOVamos instalar o WordPress. Faça oupload da pasta wordpress para o ser-vidor. Abra o navegador e, na barrade endereço, digite a URL do seu si-te seguida de /wordpress/install.php,como neste exemplo:http://www.empresa.com.br/wordpress/install.php

O WordPress inicia um script deinstalação, verifica qual a versão doPHP no servidor e mostra uma men-sagem. Se estiver tudo certo, cliqueno link Let's Go. Na tela seguinte(Step 1), o script configura a base dedados no MySQL. Clique em Step 2para avançar. O instala-dor vai criar as tabelasdo blog. No campo no péda página, digite o en-dereço do seu site, como:http://www.empresa.com.br/.

Na etapa seguinte (Step3), o instalador gera umasenha aleatória para ousuário admin, o adminis-trador. Anote-a. Com is-so, concluímos a instala-ção e o blog já pode ser

visitado. O endereço é do tipowww.empresa.com.br/wordpress.

4. OS AJUSTES BÁSICOS Passemos para a configuração bási-ca do WordPress. Na tela final do scriptde instalação ou na própria página doblog, clique no link Login. Na caixa deautenticação, forneça o nome admine a senha que você anotou. Você vaientrar no sistema de gerenciamento.Também é possível chegar a ele na-vegando até www.empresa.com.br/wordpress/wp-login.php.

No menu na parte superior da te-la, clique em Options. A aba Generaldeverá estar ativa. No campo WeblogTitle, digite um nome para o blog. Nalinha logo abaixo, ponha uma brevedescrição dele, como “Novidades dosoftware X”. No campo E-mail Address,escreva seu endereço de e-mail. Noitem Membership, assinale se vocêquer que qualquer pessoa possa secadastrar como usuário e se qualquerusuário pode publicar artigos.

WordPress: formulário para escrever e definir ações

TUTORIAL/SERVIDOR DE BLOG 1 23.05.05 17:12 Page 58


COLEÇÃO INFO > 59



Na seção Date and Ti-me, digite -3 no campoTimes in the WeblogShould Differ By (se o ho-rário de verão estiver emvigor, use -2). Assim, es-tamos dizendo ao Word-Press para empregar ohorário oficial brasileiro.No campo Default DateFormat, digite j/n/Y pa-ra exibir as datas no for-mato dia/mês/ano. EmDefault Time Format, es-creva G:i. Assim, os horários serãoexibidos na forma horas:minutos,com contagem de 24 horas. Quandoterminar, clique no botão Update Op-tions. Se quiser ver como ficou o blog,clique em View Site na barra de na-vegação superior. Depois, use o bo-tão Voltar do navegador para retor-nar ao sistema de gerenciamento.

5. OS USUÁRIOSO WordPress permite que várias pes-soas publiquem notícias no blog ecomentem as mensagens. Cada usuá-rio é classificado num nível de 0 a 10.Quanto mais alto o nível, mais recur-sos ficam acessíveis a ele. Quando al-guém se cadastra, é classificado nonível 0. Nesse nível, é permitido ape-nas ler as mensagens. Mas o admi-nistrador pode promover o usuário.

Para administrar os usuários, nosistema de gerenciamento, clique emUsers. Observe as tabelas de autorese usuários. Na coluna Level, apareceo nível do usuário e os sinais + e -.

Clique nesses sinais para aumentarou diminuir o nível. Quando o nívelé maior ou igual a 1, a pessoa apare-ce na lista de autores e pode publi-car mensagens. Se o nível for 0, a ta-bela mostra os sinais + e X. Clicandoem X, o usuário será excluído.

6. OS TOQUES FINAISSeu blog já pode ser usado. Mas hávárias outras coisas que você podefazer para personalizá-lo. Clique emLinks no menu de administração etroque os links falsos do blog porlinks para seções do seu site. Paracriar categorias em que podem serclassificadas as mensagens, cliqueem Categories. Se quiser permitir apublicação de fotos no blog, cliqueem Options e, em seguida, na abaMiscellaneous. Nela, assinale a op-ção Allow File Uploads e configureas demais opções. Quando terminara configuração, não se esqueça declicar no botão Update Options pa-ra executar as mudanças.

Teste de blog: página simples e fácil de navegar

Na maioria dos provedores de hos-pedagem, o MySQL e o Apache estãono mesmo servidor. Nesse caso, o en-dereço é localhost (se tiver dúvidas,pergunte ao provedor), que é o pa-drão do WordPress. Fica assim:define('DB_HOST', 'localhost');

No final, salve esse arquivo com onome wp-config.php.

3. A INSTALAÇÃOVamos instalar o WordPress. Faça oupload da pasta wordpress para o ser-vidor. Abra o navegador e, na barrade endereço, digite a URL do seu si-te seguida de /wordpress/install.php,como neste exemplo:http://www.empresa.com.br/wordpress/install.php

O WordPress inicia um script deinstalação, verifica qual a versão doPHP no servidor e mostra uma men-sagem. Se estiver tudo certo, cliqueno link Let's Go. Na tela seguinte(Step 1), o script configura a base dedados no MySQL. Clique em Step 2para avançar. O instala-dor vai criar as tabelasdo blog. No campo no péda página, digite o en-dereço do seu site, como:http://www.empresa.com.br/.

Na etapa seguinte (Step3), o instalador gera umasenha aleatória para ousuário admin, o adminis-trador. Anote-a. Com is-so, concluímos a instala-ção e o blog já pode ser

visitado. O endereço é do tipowww.empresa.com.br/wordpress.

4. OS AJUSTES BÁSICOS Passemos para a configuração bási-ca do WordPress. Na tela final do scriptde instalação ou na própria página doblog, clique no link Login. Na caixa deautenticação, forneça o nome admine a senha que você anotou. Você vaientrar no sistema de gerenciamento.Também é possível chegar a ele na-vegando até www.empresa.com.br/wordpress/wp-login.php.

No menu na parte superior da te-la, clique em Options. A aba Generaldeverá estar ativa. No campo WeblogTitle, digite um nome para o blog. Nalinha logo abaixo, ponha uma brevedescrição dele, como “Novidades dosoftware X”. No campo E-mail Address,escreva seu endereço de e-mail. Noitem Membership, assinale se vocêquer que qualquer pessoa possa secadastrar como usuário e se qualquerusuário pode publicar artigos.

WordPress: formulário para escrever e definir ações

TUTORIAL/SERVIDOR DE BLOG 1 23.05.05 17:12

TUTORIAL/STREAMING

60 < COLEÇÃO INFO

TUTORIAL/STREAMING


ue tal montar um por-tal incrementado, comdireito a conteúdo deáudio e vídeo para os

visitantes? Uma ferramenta quepossibilita produzir sites multimí-dia com enorme variedade de mó-dulos é o Xoops (veja teste na pá-gina 29), um sistema de gerencia-mento de portal de código abertobaseado em PHP e MySQL e total-mente gratuito. Entre os mais de100 módulos desen-volvidos pelos xoo-pistas de carteirinha,há módulos para ostreaming de arqui-vos de som e vídeo epara adicionar rádiosonline ao site. Siga ospassos a seguir parapôr suas músicas evídeos na web emgrande estilo com oauxílio do Xoops.

1. DOWNLOADSGraças à comunidadeverde-e-amarela, oXoops 2.0.10 possui

uma versão em português. O down-load pode ser feito em www.info.abril.com.br/download/3917.shtml. Baixe também os módulosMediashow (www.info.abril.com.br/download/3918.shtml) e iRadio( w w w . i n f o . a b r i l . c o m . b r/download/3919.shtml). O envio dosarquivos para o hospedeiro do siteserá feito com o cliente de FTP Cu-teFTP Pro 7.0 (www.info.abril.com.br/download/2432.shtml), um

SOM E VÍDEOJORRAM DA TELA

COMO PRODUZIR UM SITE EM PHP E MYSQL PARA OFERECER STREAMING DE MÚSICAS E FILMES


Q

Site multimídia: todo feito com módulos do Xoops

shareware que funciona normalmen-te durante 30 dias sem pedir regis-tro. Naturalmente, o serviço de hos-pedagem que receberá o site temde oferecer suporte a PHP e MySQL.No nosso caso, usamos um host queroda em Red Hat Linux.

2. EXTRAÇÃO DE ARQUIVOSDepois de fazer os downloads, ex-traia o conteúdo do Xoops, for-mado por três pastas (docs, htmle extras), para o disco rígido. Emseguida, retire o conteúdo do Me-diashow para o interior do dire-tório Modules, que está dentro dapasta html do Xoops. Faça o mes-mo com os arquivo do iRadio. Ins-tale o CuteFTP Pro. Assim que oprograma é aberto pela primeiravez, surge um assistente para con-figurar os dados da conta de FTPfornecidos pelo serviço de hospe-dagem. Preencha o endereço doFTP, nome de usuário e senha e

siga pelo assisten-te. No campo De-fault Local Folder,indique a pasta htmldo Xoops e cliquenas opções Next atéconcluir o processo.Em seguida, o Cu-teFTP Pro se conec-ta automaticamen-te ao seu site.

3. FTPDentro do CuteFTPPro, o campo à es-

querda mostra os arquivos locais.Do lado direito, na janela maior,exibe o conteúdo que está no di-retório remoto do FTP. Para en-viar os arquivos, basta arrastá-lospara a janela do FTP. Você devetransferir para o host todos os di-retórios e arquivos que estiveremdentro da pasta html.

O mais seguro é enviar os ar-quivos em lotes, para evitar pro-blemas com hosts que limitam onúmero de conexões simultâneas.Depois que todos os arquivos fo-rem enviados, aponte o browserpara a URL do site. Automatica-mente, você será redirecionadopara a tela de instalação do Xoops.Escolha o idioma português.

4. BANCO DE DADOSHora de começar a montagem dosite. Vamos criar o banco de da-dos. Nesse momento aparece umavantagem na escolha de hosts Li-

Configuração: definindo preferências gerais do Xoops

TUTORIAL/ STREAMING 1 24.05.05 12:42 Page 60

TUTORIAL/STREAMING

60 < COLEÇÃO INFO

TUTORIAL/STREAMING


ue tal montar um por-tal incrementado, comdireito a conteúdo deáudio e vídeo para os

visitantes? Uma ferramenta quepossibilita produzir sites multimí-dia com enorme variedade de mó-dulos é o Xoops (veja teste na pá-gina 29), um sistema de gerencia-mento de portal de código abertobaseado em PHP e MySQL e total-mente gratuito. Entre os mais de100 módulos desen-volvidos pelos xoo-pistas de carteirinha,há módulos para ostreaming de arqui-vos de som e vídeo epara adicionar rádiosonline ao site. Siga ospassos a seguir parapôr suas músicas evídeos na web emgrande estilo com oauxílio do Xoops.

1. DOWNLOADSGraças à comunidadeverde-e-amarela, oXoops 2.0.10 possui

uma versão em português. O down-load pode ser feito em www.info.abril.com.br/download/3917.shtml. Baixe também os módulosMediashow (www.info.abril.com.br/download/3918.shtml) e iRadio( w w w . i n f o . a b r i l . c o m . b r/download/3919.shtml). O envio dosarquivos para o hospedeiro do siteserá feito com o cliente de FTP Cu-teFTP Pro 7.0 (www.info.abril.com.br/download/2432.shtml), um

SOM E VÍDEOJORRAM DA TELA

COMO PRODUZIR UM SITE EM PHP E MYSQL PARA OFERECER STREAMING DE MÚSICAS E FILMES


Q

Site multimídia: todo feito com módulos do Xoops

shareware que funciona normalmen-te durante 30 dias sem pedir regis-tro. Naturalmente, o serviço de hos-pedagem que receberá o site temde oferecer suporte a PHP e MySQL.No nosso caso, usamos um host queroda em Red Hat Linux.

2. EXTRAÇÃO DE ARQUIVOSDepois de fazer os downloads, ex-traia o conteúdo do Xoops, for-mado por três pastas (docs, htmle extras), para o disco rígido. Emseguida, retire o conteúdo do Me-diashow para o interior do dire-tório Modules, que está dentro dapasta html do Xoops. Faça o mes-mo com os arquivo do iRadio. Ins-tale o CuteFTP Pro. Assim que oprograma é aberto pela primeiravez, surge um assistente para con-figurar os dados da conta de FTPfornecidos pelo serviço de hospe-dagem. Preencha o endereço doFTP, nome de usuário e senha e

siga pelo assisten-te. No campo De-fault Local Folder,indique a pasta htmldo Xoops e cliquenas opções Next atéconcluir o processo.Em seguida, o Cu-teFTP Pro se conec-ta automaticamen-te ao seu site.

3. FTPDentro do CuteFTPPro, o campo à es-

querda mostra os arquivos locais.Do lado direito, na janela maior,exibe o conteúdo que está no di-retório remoto do FTP. Para en-viar os arquivos, basta arrastá-lospara a janela do FTP. Você devetransferir para o host todos os di-retórios e arquivos que estiveremdentro da pasta html.

O mais seguro é enviar os ar-quivos em lotes, para evitar pro-blemas com hosts que limitam onúmero de conexões simultâneas.Depois que todos os arquivos fo-rem enviados, aponte o browserpara a URL do site. Automatica-mente, você será redirecionadopara a tela de instalação do Xoops.Escolha o idioma português.

4. BANCO DE DADOSHora de começar a montagem dosite. Vamos criar o banco de da-dos. Nesse momento aparece umavantagem na escolha de hosts Li-

Configuração: definindo preferências gerais do Xoops

TUTORIAL/ STREAMING 1 24.05.05 12:42

TUTORIAL/STREAMING

COLEÇÃO INFO > 63

TUTORIAL/STREAMING


nux, pois geralmente eles ofere-cem a ferramenta cPanelX, que fa-cilita tremendamente a criação dobanco de dados. Acessar o cPanelXé fácil, basta entrar no endereçoda ferramenta fornecido pelo hos-pedeiro. No cPanelX, clique emMySQL Databases. Na tela seguin-te, no campo DB, digite o nome doseu banco de dados e aperte o bo-tão Add Db. Em seguida, apenasconfirme o nome do banco criadoe clique em Go Back. O cPanelX ge-ra um banco de dados. Atenção pa-ra a grafia do nome (nome do usuá-rio_nome do banco de dados) de-terminada pela ferramenta. O pró-ximo passo é criar um usuário pa-ra acessar o banco. Para isso, emUsers, indique um nome de usuá-rio e senha para ele. O esquemade nomenclatura será o mesmo:nome do usuário titular_nome dousuário do banco. Na mesma te-la, você vai relacionar o novo usuá-rio ao banco de dados. No campoUser, selecione onome de usuário dobanco de dados, e,em Db, indique onome do banco.Conclua pressionan-do Add User to Db.Para evitar confusãocom a variedade denomes de usuário (odo titular do site e odo banco de dados)e senhas, anote tu-do em local seguro.

5. PERMISSÕESDe volta ao Xoops, uma tela emportuguês mostra quais diretórios(uploads, cache, templates_c) e ar-quivo (mainfile.php) deverão rece-ber permissões especiais. A alte-ração é feita por meio do CuteFTPPro. Clique com o botão direito so-bre cada diretório e arquivo cita-do e escolha a opção Properties/CHMOD. Para dar permissão geralde escrita para eles, nos camposGroup e Write, marque a caixa dechecagem Write e confirme. Em se-guida, volte ao Xoops e atualize apágina de permissões. Se todas aspermissões exibirem sinal verde,pressione o botão Prosseguir. Ca-so alguma permissão não tenha si-do aplicada corretamente, o pró-prio Xoops faz o alerta e impede acontinuação da instalação.

6. CONFIGURAÇÃOChegamos à janela de configura-ção geral. Indique o nome do usuá-

Módulos: o Mediashow e o iRadio estão na lista

rio do banco de dados, senha e no-me do banco nos respectivos cam-pos. Os demais campos não preci-sam ser editados. Clique em Pros-seguir e, na tela seguinte, confiraos dados. Se tudo estiver em or-dem, pressione Prosseguir nas te-las seguintes até a etapa de cria-ção de usuário para o administra-dor do site, na qual devem ser for-necidos nome, e-mail e senha.

Feito isso, siga clicando em Pros-seguir. Na última tela, você encon-tra um link para ir à página inicialdo site recém-criado. Faça o logincomo administrador para começara configurá-lo no Painel de Con-trole do Xoops.

7. MÓDULOSA primeira providência nessa eta-pa é alterar novamente as proprie-dades do mainfile.php, permitin-do apenas a sua leitura (Read), de-sabilitando as caixas Write e Exe-

cute. Em seguida,remova o diretórioInstall. Tudo isso éfeito pelo CuteFTPPro. O Xoops vemcom alguns recursosbásicos pré-instala-dos, como fórum,notícias, downloadse links. A variedadede módulos quepodem ser instala-dos posteriormen-te é enorme, comoagenda, álbum de

fotos etc. O visual também é con-figurável com temas e skins (pe-les). Neste tutorial, vamos indicarapenas como configurar os módu-los Mediashow e iRadio. Ao entrarno painel de controle, no lado es-querdo, está o acesso ao SystemAdmin. Posicionando o cursor so-bre o ícone do System Admin, apa-rece um menu. Clique em Módu-los. Agora, dentro da lista de mó-dulos, escolha aqueles que entra-rão na página clicando no íconecom o disquete de cada um dosescolhidos. Confirme e, no roda-pé da página seguinte, clique pa-ra retornar à administração de mó-dulos. Faça isso com o iRadio e oMediashow.

8. ACESSOEm seguida, você deve determi-nar quem terá acesso ao conteú-do de áudio e vídeo do site. Nomenu System Admin, clique em

Grupos: define quais grupos terão acesso aos módulos


TUTORIAL/STREAMING

COLEÇÃO INFO > 63

TUTORIAL/STREAMING


nux, pois geralmente eles ofere-cem a ferramenta cPanelX, que fa-cilita tremendamente a criação dobanco de dados. Acessar o cPanelXé fácil, basta entrar no endereçoda ferramenta fornecido pelo hos-pedeiro. No cPanelX, clique emMySQL Databases. Na tela seguin-te, no campo DB, digite o nome doseu banco de dados e aperte o bo-tão Add Db. Em seguida, apenasconfirme o nome do banco criadoe clique em Go Back. O cPanelX ge-ra um banco de dados. Atenção pa-ra a grafia do nome (nome do usuá-rio_nome do banco de dados) de-terminada pela ferramenta. O pró-ximo passo é criar um usuário pa-ra acessar o banco. Para isso, emUsers, indique um nome de usuá-rio e senha para ele. O esquemade nomenclatura será o mesmo:nome do usuário titular_nome dousuário do banco. Na mesma te-la, você vai relacionar o novo usuá-rio ao banco de dados. No campoUser, selecione onome de usuário dobanco de dados, e,em Db, indique onome do banco.Conclua pressionan-do Add User to Db.Para evitar confusãocom a variedade denomes de usuário (odo titular do site e odo banco de dados)e senhas, anote tu-do em local seguro.

5. PERMISSÕESDe volta ao Xoops, uma tela emportuguês mostra quais diretórios(uploads, cache, templates_c) e ar-quivo (mainfile.php) deverão rece-ber permissões especiais. A alte-ração é feita por meio do CuteFTPPro. Clique com o botão direito so-bre cada diretório e arquivo cita-do e escolha a opção Properties/CHMOD. Para dar permissão geralde escrita para eles, nos camposGroup e Write, marque a caixa dechecagem Write e confirme. Em se-guida, volte ao Xoops e atualize apágina de permissões. Se todas aspermissões exibirem sinal verde,pressione o botão Prosseguir. Ca-so alguma permissão não tenha si-do aplicada corretamente, o pró-prio Xoops faz o alerta e impede acontinuação da instalação.

6. CONFIGURAÇÃOChegamos à janela de configura-ção geral. Indique o nome do usuá-

Módulos: o Mediashow e o iRadio estão na lista

rio do banco de dados, senha e no-me do banco nos respectivos cam-pos. Os demais campos não preci-sam ser editados. Clique em Pros-seguir e, na tela seguinte, confiraos dados. Se tudo estiver em or-dem, pressione Prosseguir nas te-las seguintes até a etapa de cria-ção de usuário para o administra-dor do site, na qual devem ser for-necidos nome, e-mail e senha.

Feito isso, siga clicando em Pros-seguir. Na última tela, você encon-tra um link para ir à página inicialdo site recém-criado. Faça o logincomo administrador para começara configurá-lo no Painel de Con-trole do Xoops.

7. MÓDULOSA primeira providência nessa eta-pa é alterar novamente as proprie-dades do mainfile.php, permitin-do apenas a sua leitura (Read), de-sabilitando as caixas Write e Exe-

cute. Em seguida,remova o diretórioInstall. Tudo isso éfeito pelo CuteFTPPro. O Xoops vemcom alguns recursosbásicos pré-instala-dos, como fórum,notícias, downloadse links. A variedadede módulos quepodem ser instala-dos posteriormen-te é enorme, comoagenda, álbum de

fotos etc. O visual também é con-figurável com temas e skins (pe-les). Neste tutorial, vamos indicarapenas como configurar os módu-los Mediashow e iRadio. Ao entrarno painel de controle, no lado es-querdo, está o acesso ao SystemAdmin. Posicionando o cursor so-bre o ícone do System Admin, apa-rece um menu. Clique em Módu-los. Agora, dentro da lista de mó-dulos, escolha aqueles que entra-rão na página clicando no íconecom o disquete de cada um dosescolhidos. Confirme e, no roda-pé da página seguinte, clique pa-ra retornar à administração de mó-dulos. Faça isso com o iRadio e oMediashow.

8. ACESSOEm seguida, você deve determi-nar quem terá acesso ao conteú-do de áudio e vídeo do site. Nomenu System Admin, clique em

Grupos: define quais grupos terão acesso aos módulos

TUTORIAL/ STREAMING 1 23.05.05 17:17

TUTORIAL/STREAMING

64 < COLEÇÃO INFO

Grupos. Para deixar os arquivosde som e vídeo totalmente aces-síveis, na opção Anônimos, cliqueem Modificar. No campo Permis-sões de Acesso aos Blocos, sele-cione as opções Internet Radio, MyMusics e My Films e clique emAtualizar Grupo. Agora você iráefetivamente modelar a página,posicionando os blocos com cadamódulo. Pelo menu System Admin,escolha Blocos. No campo Grupo,escolha Anônimos. Você verá to-dos os blocos. Nas colunas corres-pondentes, escolha a posição decada bloco na página e indiquequais deverão ficar visíveis. Cli-cando em Editar, você pode alte-rar algumas características de ca-da bloco, como o título.

Uma dica: a menos que vocêqueira que os arquivos comecema tocar automaticamente toda avez que a página for carregada, en-tre no modo de edição de My Filmse My Musics e altereo valor do campoAutostart para zero.Finalize clicando emEnviar e, depois, emPágina Principal.

9. SOM E VÍDEOA estrutura básicado site já está pron-ta para tocar som evídeo. Então é preci-so fazer o uploaddos arquivos para ohost. Com o CuteFTP

Pro, coloque os arquivos MP3 nosubdiretório Audio. O caminhocompleto é (endereço-raiz do site/modules/mediashow/media/audio).Faça o mesmo com os videoclipesnos formatos WMV e MPEG, en-viado-os para o subdiretório Video(endereço-raiz do site/modules/mediashow/media/video). Paraconfigurar a rádio, no Painel deControle, deixe o cursor do mou-se sobre o ícone iRadio, para vi-sualizar o menu, e clique em Ad-ministration. O Xoops traz 11 op-ções de rádios online estrangeiraspreconfiguradas. Se você quiseradicionar outras, clique em AddNew Station e indique o nome, osite e a URL do streaming de áu-dio da rádio. Sempre confirme asmudanças clicando em Save. As-sim que o banco de dados for atua-lizado, todos os arquivos de some vídeo e links para rádios onlineestarão disponíveis no site.

Administração: editando preferências do Mediashow


TUTORIAL/LIVRO DE VISITAS


livro de visitas é umdos recursos mais usa-dos para saber a quan-tas anda a popularida-

de de um site. Em essência, ele éuma página que acumula todas asopiniões dos visitantes logo abai-xo do formulário de entrada de da-dos. Neste tutorial, mostraremoscomo criar um livro de visitas usan-do o Dreamweaver MX 2004, daMacromedia. Para testar a página,é necessário que ela esteja em umservidor com PHP e MySQL insta-

lados. Em nosso caso, foi usado oservidor web Internet InformationServices (IIS) 5.1, da Microsoft, comPHP 4.3 e MySQL 4.1.

1. O banco de dadosAntes de passar para a criação do for-mulário, vamos criar um banco dedados no MySQL. Isso pode ser feitopor meio de comandos ou de inter-faces gráficas. No nosso exemplo,usamos a interface gráfica SQLyog(www.info.abril.com.br/download/3232.shtml) e criamos um banco cha-

mado “visita”. Dentro do banco

de dados montamosuma tabela com cin-co campos: “id”, “no-me”, “email”, “co-mentario” e “data”.O primeiro camposerve como chaveprimária do banco.Ele recebe númerosinteiros e aumentaseu valor em um acada novo comentá-

FALEM MAL, MAS FALEM DO MEU SITE

FAÇA UM LIVRO DE VISITAS E ACOMPANHE O QUE OS INTERNAUTAS PENSAM DE SUA CASA NA WEB

POR ANDRÉ CARDOZO

O

Livro: as mensagens ficam abaixo da área de formulário

TUTORIAL/ LIVRO DE VISITAS 23.05.05 17:19 Page 65



rio inserido no livro de visitas. Oscampos “nome”, “email” e “comen-tario” são do tipo varchar e rece-bem os dados digitados pelo inter-nauta. Limitamos o número de ca-racteres desses campos a 50, 30 e500 unidades, respectivamente. Ocampo “data” insere o dia em queo comentário é feito.

2. O DreamweaverCom o banco de dados montado, ini-cie o Dreamweaver. Antes de elabo-rar a página do livro de visitas, pre-cisamos montar um site para ela.Para isso, acione o gerenciador, pormeio do menu Site > Manage Sites,e clique no botão New.

Surge uma janela de configura-ção. Escolha a categoria Local In-fo e insira o nome do site, seu di-retório local e sua pasta de ima-gens. Na categoria Remote Info,defina o diretório remoto e o tipode acesso ao servidor. Neste tuto-rial, o acesso é local. Se o seu ser-

vidor for remoto, será necessárioinformar os dados para a configu-ração da conexão via FTP.

Para terminar a configuração dosite, acesse a categoria Testing Ser-ver. Nela, defina o modelo de ser-vidor (neste tutorial, PHP MySQL).Novamente informe o tipo de aces-so e o diretório remoto. Clique emOK para encerrar a configuração.

3. O livroAgora que temos o site configura-do, vamos passar para a elabora-ção do livro de visitas. Clique emFile > New e, na tela de criação doarquivo, escolha a categoria Dyna-mic e marque a opção PHP.

Estamos a esta altura com um do-cumento em branco vinculado aosite que criamos. Aqui você podeusar as ferramentas do Dreamwea-ver para elaborar o layout deseja-do. Em nosso caso, criamos uma ta-bela de uma linha, sete colunas e700 pixels de largura. Na primeira

coluna, inserimos umlogotipo da INFO. Nasoutras seis colunasdigitamos os nomesdas seções.

Logo abaixo da ta-bela anterior, cria-mos uma outra ta-bela, desta vez comuma linha, uma co-luna e 700 pixels delargura. É nessatabela que vamos in-serir o formulário.SQLyog: interface para o banco de dados MySQL




A criação do campo de comen-tários é fácil. Digite a palavra “Co-mentários” e clique no botão TextArea da barra de ferramentas pa-ra inserir a área de texto. Na jane-la de propriedades, mude a identi-ficação da caixa para “comentário”.

Para completar o formulário, sófalta fazer o botão que envia os da-dos. Clique no ícone Button da bar-ra de ferramentas e mude o textodo botão para “Enviar”.

O formulário está pronto. Logoabaixo dele fica a área em que asrespostas aparecerão, uma abaixoda outra. Para montá-la, digite aspalavras “Data”, “Nome”, “E-mail” e“Comentários”, uma abaixo da ou-tra. Isso completa a parte visual.

7. A conexãoChegou a hora de inserir a progra-mação do formulário. Abra o pai-nel Databases e, nele, clique no si-nal de mais e escolha a opçãoMySQL Connection.

Surge a tela de configuração daconexão. No primeiro campo, dêum nome a ela. No segundo, insi-

4. O formulárioCom o layout monta-do, passamos para acriação do formulá-rio. Ative a barra decomponentes de for-mulário, clicando so-bre a categoria Com-mon e escolhendo aopção Forms. Emseguida, clique nobotão de inserção de formulário, oprimeiro ao lado da palavra Forms.Surge um retângulo com bordaspontilhadas. É dentro desse retân-gulo que serão inseridos os compo-nentes do formulário.

5. Os componentesPara inserir os componentes, cliquedentro do retângulo vermelho e di-gite a palavra “Nome”. Ao lado de-la, insira uma caixa de texto, clican-do no botão Text Field da barra decomponentes de formulário.

Agora, selecione a caixa de textoe, no painel de propriedades, mudesua identificação para “nome” nocampo Text Field da janela de pro-priedades. Em seguida, limite o va-lor de caracteres a 50.

6. Os comentáriosAinda dentro da área de formulá-rio, pule uma linha e digite a pala-vra “E-mail”. Ao lado dela, insirauma caixa de texto, clicando nobotão Text Field. Dê o nome deidentificação “email” à caixa e li-mite o número de caracteres a 30.

Registro: o formulário insere a mensagem no banco



COLEÇÃO INFO > 69


68 < COLEÇÃO INFO

ra o endereço do servidor (nestetutorial, usamos o localhost). Digi-te o nome de usuário “anonymous”no terceiro campo e deixe a senhaem branco, já que o formulário se-rá público. No campo Databases,clique no botão Choose. O Dream-weaver exibe todos os bancos dedados do sistema. Escolha o ban-co de nome “visita”, criado no pas-so 1, e clique em OK. A conexão éexibida no painel Databases.

8. As açõesA primeira ação do formulário éinserir dados no banco, toda vezque o internauta clicar no botãoEnviar. Para programar essa tare-fa, abra o painel Server Behaviors,clique no sinal de mais e escolhaa opção Insert Record.

Surge a tela de inserção de regis-tro. No campo Connection, selecio-ne a conexão criada no passo 7. Noúltimo campo da janela devemosindicar para qual página o internau-

ta será enviado apósclicar no botão. Co-mo as respostas se-rão inseridas na pró-pria página do for-mulário, basta digi-tar o nome do arqui-vo em que se estátrabalhando. Cliqueem OK para encerrara configuração.

9. A exibiçãoAlém de inserir os da-

dos no banco, nosso livro de visitasexibe todas as mensagens enviadasanteriormente. Para programar es-sa ação, abra o painel Server Beha-viors, clique no sinal de mais e es-colha a opção Recordset.

Na tela de configuração, dê umnome ao Recordset. No campo Con-nection, escolha a conexão criadano passo 6. Na opção Sort, escolhaa combinação “id” e “Descending”.Isso significa que o recado mais re-cente do livro (ou seja, com maior“id”), aparecerá sempre acima doanterior. Clique em OK.

10. As mensagensCom as ações prontas, falta defi-nir onde aparecerão as mensagens.Neste tutorial, elas serão exibidaslogo abaixo do formulário, na áreacriada no passo 5. Vamos agorasubstituir as palavras digitadas na-quele passo por variáveis. No do-cumento, selecione a palavra “Da-ta”. Abra o painel Bindings e na-

vegue pela árvore Recordset atéchegar ao campo “data”, criado nopasso 1. Marque o campo e cliqueno botão Insert. Pronto, a palavra“Data” foi substituída por uma va-riável que incluirá a data em queo comentário foi enviado.

11. O nome e o e-mailO nosso próximo passo é inserir avariável referente ao campo “no-me”. Selecione a palavra “Nome”e, no painel Bindings, navegue pe-la árvore Recordset até chegar aocampo “nome”. Marque o campoe clique no botão Insert. Temos ou-tro campo substituído.

O próximo campo a ser trocadoé o de e-mail. Selecione a palavra“E-mail” e, novamente no painelBindings, navegue até o campo“email”. Marque o campo e clique

no botão Insert. A variável referen-te a e-mail será inserida.

O último campo a ser substituídoé o de comentário. Selecione a pa-lavra “Comentário” e, no painel Bin-dings, navegue até o campo “comen-tario”. Marque o campo e clique nobotão Insert. Agora todas as variá-veis estão no formulário.

12. A lista de comentáriosPara terminar o formulário, preci-samos fazer com que a região queexibe os comentários se repita acada novo registro. Assim, os co-mentários serão acumulados napágina do livro de visitas.

Para executar essa tarefa, sele-cione toda a área criada no passo5 e configurada nos passos ante-riores. Depois, abra o painel Ser-ver Behaviors, clique no sinal de

mais e marque a op-ção Repeat Region.

13. O testeNa janela seguinte, se-lecione a opção AllRecords para que to-dos os registros sejamexibidos na mesmapágina. Depois, cliqueem OK. O formulárioestá pronto. Lembre-se de que, para testaro funcionamento, énecessário que a pá-gina esteja em umservidor com PHP eMySQL instalados.

Resultado: o livro de visitas é exibido no navegador jácom as mensagens na parte inferior da tela

Recordset: determinando a ordem das mensagens



COLEÇÃO INFO > 69


68 < COLEÇÃO INFO

ra o endereço do servidor (nestetutorial, usamos o localhost). Digi-te o nome de usuário “anonymous”no terceiro campo e deixe a senhaem branco, já que o formulário se-rá público. No campo Databases,clique no botão Choose. O Dream-weaver exibe todos os bancos dedados do sistema. Escolha o ban-co de nome “visita”, criado no pas-so 1, e clique em OK. A conexão éexibida no painel Databases.

8. As açõesA primeira ação do formulário éinserir dados no banco, toda vezque o internauta clicar no botãoEnviar. Para programar essa tare-fa, abra o painel Server Behaviors,clique no sinal de mais e escolhaa opção Insert Record.

Surge a tela de inserção de regis-tro. No campo Connection, selecio-ne a conexão criada no passo 7. Noúltimo campo da janela devemosindicar para qual página o internau-

ta será enviado apósclicar no botão. Co-mo as respostas se-rão inseridas na pró-pria página do for-mulário, basta digi-tar o nome do arqui-vo em que se estátrabalhando. Cliqueem OK para encerrara configuração.

9. A exibiçãoAlém de inserir os da-

dos no banco, nosso livro de visitasexibe todas as mensagens enviadasanteriormente. Para programar es-sa ação, abra o painel Server Beha-viors, clique no sinal de mais e es-colha a opção Recordset.

Na tela de configuração, dê umnome ao Recordset. No campo Con-nection, escolha a conexão criadano passo 6. Na opção Sort, escolhaa combinação “id” e “Descending”.Isso significa que o recado mais re-cente do livro (ou seja, com maior“id”), aparecerá sempre acima doanterior. Clique em OK.

10. As mensagensCom as ações prontas, falta defi-nir onde aparecerão as mensagens.Neste tutorial, elas serão exibidaslogo abaixo do formulário, na áreacriada no passo 5. Vamos agorasubstituir as palavras digitadas na-quele passo por variáveis. No do-cumento, selecione a palavra “Da-ta”. Abra o painel Bindings e na-

vegue pela árvore Recordset atéchegar ao campo “data”, criado nopasso 1. Marque o campo e cliqueno botão Insert. Pronto, a palavra“Data” foi substituída por uma va-riável que incluirá a data em queo comentário foi enviado.

11. O nome e o e-mailO nosso próximo passo é inserir avariável referente ao campo “no-me”. Selecione a palavra “Nome”e, no painel Bindings, navegue pe-la árvore Recordset até chegar aocampo “nome”. Marque o campoe clique no botão Insert. Temos ou-tro campo substituído.

O próximo campo a ser trocadoé o de e-mail. Selecione a palavra“E-mail” e, novamente no painelBindings, navegue até o campo“email”. Marque o campo e clique

no botão Insert. A variável referen-te a e-mail será inserida.

O último campo a ser substituídoé o de comentário. Selecione a pa-lavra “Comentário” e, no painel Bin-dings, navegue até o campo “comen-tario”. Marque o campo e clique nobotão Insert. Agora todas as variá-veis estão no formulário.

12. A lista de comentáriosPara terminar o formulário, preci-samos fazer com que a região queexibe os comentários se repita acada novo registro. Assim, os co-mentários serão acumulados napágina do livro de visitas.

Para executar essa tarefa, sele-cione toda a área criada no passo5 e configurada nos passos ante-riores. Depois, abra o painel Ser-ver Behaviors, clique no sinal de

mais e marque a op-ção Repeat Region.

13. O testeNa janela seguinte, se-lecione a opção AllRecords para que to-dos os registros sejamexibidos na mesmapágina. Depois, cliqueem OK. O formulárioestá pronto. Lembre-se de que, para testaro funcionamento, énecessário que a pá-gina esteja em umservidor com PHP eMySQL instalados.

Resultado: o livro de visitas é exibido no navegador jácom as mensagens na parte inferior da tela

Recordset: determinando a ordem das mensagens

TUTORIAL/ LIVRO DE VISITAS 23.05.05 17:20

TUTORIAL/CATÁLOGO

COLEÇÃO INFO > 71

TUTORIAL/CATÁLOGO


uer montar um catálogode produtos para umaloja online na maior mo-leza? Experimente o

Dreamweaver, da Macromedia, umsoftware cheio de facilidades para odesenvolvedor de sites. Neste tuto-rial, vamos construir um mostruáriocom recursos do Dreamweaver MX2004 que permitem montar páginasdinâmicas e exibir informações con-

tidas em bancos de dados, apenascom comandos de menu. Em outraspalavras, não é preciso ter práticanem habilidade com programação,seja de banco de dados, seja de scriptspara automação das páginas. Alémdo Dreamweaver, vamos usar o servi-dor web IIS e o banco de dados Access.O sistema operacional deve ser o Win-dows 2000 ou XP, versão Professio-nal (o XP Home não traz o IIS).

MOSTRUÁRIOVAPT-VUPT

CRIE UM CATÁLOGO DE PRODUTOS NO DREAMWEAVER COM COMANDOS DE MENU

POR CARLOS MACHADO

Q

1. INSTALE O IISA instalação do servidor web é o pri-meiro passo. Vá ao Painel de Contro-le e acione a opção Adicionar ou Re-mover Programas. Na caixa de diá-logo, clique em Adicionar/removercomponentes do Windows. Procureo Internet Information Services (IIS)na lista de componentes, marque acaixa correspondente e clique emAvançar. O Windows vai pedir que vo-cê coloque no drive o CD de instala-ção. Para testar se o servidor IIS foiinstalado corretamente, digite nobrowser o seguinte endereço: loca-lhost. Deve aparecer uma página webavisando que o servidor está ativo.

Ao instalar o servidor web no mi-cro, o Windows cria no drive C o sub-diretório Inetpub\wwwroot, que é apasta-padrão do web site local. Vá aessa pasta e crie nela um diretóriochamado catalogo. Nele vamos colo-car todos os objetos do catálogo deprodutos da loja Great Fun. O passo-

a-passo que vamos mostrar permiteque você desenvolva e teste a solu-ção em sua máquina e depois faça oupload das páginas para um site re-moto na internet.

2. BANCO DE DADOSAtivado o servidor, passemos ao ban-co de dados. Construa no Access umbanco de dados com uma tabela sim-ples (tb_produtos), contendo os itensnecessários à apresentação do produ-to. Outros campos podem ser incluí-dos, mas aqui trabalharemos apenascom NomeProduto, Descrição, Preçoe Foto. Este último campo deve con-ter o nome do arquivo JPG com a fo-to do produto. Salve o banco de da-dos com o nome produtos.mdb e co-pie-o para o diretório da solução:Inetpub\www root\catalogo. Alimen-te o banco de dados com as informa-ções sobre os produtos e copie tam-bém para a pasta catalogo todos osarquivos com as fotos dos produtos.

3. PÁGINA BÁSICAVamos agora criar apágina-base para ocatálogo de produ-tos. No Dreamwea-ver, acione File/New.Na tela New Docu-ment, indique o tipode página que dese-ja montar. Em Cate-gory, escolha Dyna-mic Page e, ao lado,ASP VB Script. Clique

Catálogo: o Dreamweaver lê os registros e preenche a página com os produtos

IIS: a instalação do servidor web é o primeiro passo

TUTORIAL/CATALOGO 23.05.05 17:21 Page 70

TUTORIAL/CATÁLOGO

COLEÇÃO INFO > 71

TUTORIAL/CATÁLOGO


uer montar um catálogode produtos para umaloja online na maior mo-leza? Experimente o

Dreamweaver, da Macromedia, umsoftware cheio de facilidades para odesenvolvedor de sites. Neste tuto-rial, vamos construir um mostruáriocom recursos do Dreamweaver MX2004 que permitem montar páginasdinâmicas e exibir informações con-

tidas em bancos de dados, apenascom comandos de menu. Em outraspalavras, não é preciso ter práticanem habilidade com programação,seja de banco de dados, seja de scriptspara automação das páginas. Alémdo Dreamweaver, vamos usar o servi-dor web IIS e o banco de dados Access.O sistema operacional deve ser o Win-dows 2000 ou XP, versão Professio-nal (o XP Home não traz o IIS).

MOSTRUÁRIOVAPT-VUPT

CRIE UM CATÁLOGO DE PRODUTOS NO DREAMWEAVER COM COMANDOS DE MENU

POR CARLOS MACHADO

Q

1. INSTALE O IISA instalação do servidor web é o pri-meiro passo. Vá ao Painel de Contro-le e acione a opção Adicionar ou Re-mover Programas. Na caixa de diá-logo, clique em Adicionar/removercomponentes do Windows. Procureo Internet Information Services (IIS)na lista de componentes, marque acaixa correspondente e clique emAvançar. O Windows vai pedir que vo-cê coloque no drive o CD de instala-ção. Para testar se o servidor IIS foiinstalado corretamente, digite nobrowser o seguinte endereço: loca-lhost. Deve aparecer uma página webavisando que o servidor está ativo.

Ao instalar o servidor web no mi-cro, o Windows cria no drive C o sub-diretório Inetpub\wwwroot, que é apasta-padrão do web site local. Vá aessa pasta e crie nela um diretóriochamado catalogo. Nele vamos colo-car todos os objetos do catálogo deprodutos da loja Great Fun. O passo-

a-passo que vamos mostrar permiteque você desenvolva e teste a solu-ção em sua máquina e depois faça oupload das páginas para um site re-moto na internet.

2. BANCO DE DADOSAtivado o servidor, passemos ao ban-co de dados. Construa no Access umbanco de dados com uma tabela sim-ples (tb_produtos), contendo os itensnecessários à apresentação do produ-to. Outros campos podem ser incluí-dos, mas aqui trabalharemos apenascom NomeProduto, Descrição, Preçoe Foto. Este último campo deve con-ter o nome do arquivo JPG com a fo-to do produto. Salve o banco de da-dos com o nome produtos.mdb e co-pie-o para o diretório da solução:Inetpub\www root\catalogo. Alimen-te o banco de dados com as informa-ções sobre os produtos e copie tam-bém para a pasta catalogo todos osarquivos com as fotos dos produtos.

3. PÁGINA BÁSICAVamos agora criar apágina-base para ocatálogo de produ-tos. No Dreamwea-ver, acione File/New.Na tela New Docu-ment, indique o tipode página que dese-ja montar. Em Cate-gory, escolha Dyna-mic Page e, ao lado,ASP VB Script. Clique

Catálogo: o Dreamweaver lê os registros e preenche a página com os produtos

IIS: a instalação do servidor web é o primeiro passo

TUTORIAL/CATALOGO 23.05.05 17:21

TUTORIAL/CATÁLOGO

COLEÇÃO INFO > 73

TUTORIAL/CATÁLOGO


em Create. Você tem uma página ASPem branco. Salve-a com o nome ca-talogo.asp. Agora, use tabelas (In-sert/Table) para compor a estruturado documento. Em cima, uma tabe-la horizontal com o logotipo da em-presa e links de interação com ousuário do site: Ajuda, Cadastro, Bus-ca etc. Outra linha horizontal podeconter links para os tipos de produ-tos. Nossa loja fictícia, a Great FunImportadora, vende produtos de in-formática e tecnologia de consumo.Abaixo, numa coluna à esquerda, háoutro menu, com links para subcate-gorias de produtos. A barra superiore a coluna à esquerda têm a mesmacor de fundo, que deve se harmoni-zar com a cor do logotipo. Nessasáreas já definidas ficam os elemen-tos fixos da página. No retângulo res-tante, vamos montar os itens dinâmi-cos, que são a razão deste tutorial.

4. CAMPOS DE DADOSNo quadrado livre dapágina, insira uma ta-bela com duas colu-nas: uma para a fotodo produto e a outrapara nome, descriçãoe preço. Agora, vamosdizer ao Dreamwea-ver onde estão os da-dos que vão alimen-tar a página. Na colu-na à direita da tela doprograma, na subja-nela Application, cli-que na orelha Databa-

o comando Insert/Image. Na janelaSelect Image Source, clique na op-ção Data Sources, marque o campoSources e dê OK. Salve o arquivo ereveja-o no browser. Agora, está per-feito. Na verdade, não deveríamoster arrastado o campo Foto para apágina. Como se trata de imagem, oprocedimento correto é feito pormeio do comando Insert/Image.

5. DADOS DINÂMICOSAté agora, só apareceu um produ-to na página, que é o primeiro re-gistro da tabela. Para mostrar maisprodutos, é preciso varrer a base dedados. Para isso, o Dreamweaveroferece um belo truque. Ele permi-te que você defina áreas da páginaque devem ser repetidas, cada umamostrando um registro de dados.Como fazer isso? Selecione a tabe-la que contém os campos de dados.Em seguida, na subjanela Applica-tion, orelha Server Behaviors (com-portamentos do servidor), clique no

botão + e escolha Re-peat Region. Na cai-xa de diálogo com es-se mesmo nome, in-dique o número deprodutos que devemaparecer numa pági-na. O número vai de-pender do tamanhoda foto e da descriçãoa serem exibidos. DêOK, salve o arquivo eveja-o no browser(F12). Perfeito.

cionar. Indique o endereço do ban-co de dados produtos.mdb e dê OK.Agora, marque o botão Using LocalDSN e acione OK. Na janela da ore-lha Databases, aparece a conexãocameras. Abra-a, e veja que a caixaTables exibe a tabela tb_produtos.Dentro dela estão todos os camposda tabela. Com isso, definimos umaconexão com o banco de dados.

Agora, precisamos usar essa co-nexão. Clique na orelha Bindings eacione o botão + e escolha Recordset(Query). Na tela Recordset, escolhacameras na caixa Connection e dê OK.Os nomes dos campos da tabela pro-dutos aparecem listados. Arraste oscampos NomeProduto, Descrição, Pre-ço e Foto para os lugares onde de-vem aparecer na tabela livre. Salve oarquivo e acione F12 para ver comovai ficar no browser. Confira: em lu-gar da foto de um produto, apareceo nome do arquivo correspondente.Para resolver isso, volte ao design dapágina, apague o campo da foto e dê

Automação: os campos de dados (à direita da tela) sãoarrastados simplesmente para a página Imagem: o comando Insert/Image põe a foto no lugar

Access: tabela de apresentação dos produtos

ses. Em seguida, clique no botãozi-nho com um sinal + e escolha a op-ção Data Source Name (nome dafonte de dados). Na janela que seabre, digite um nome na caixa Con-nection Name — por exemplo, ca-meras (é melhor sem acento, paraevitar eventuais problemas). Em se-guida, clique no botão Define e, natela seguinte, escolha a alternativaBanco de Dados do Access. Acioneo botão Configurar e, depois, Sele-


TUTORIAL/CATÁLOGO

COLEÇÃO INFO > 73

TUTORIAL/CATÁLOGO


em Create. Você tem uma página ASPem branco. Salve-a com o nome ca-talogo.asp. Agora, use tabelas (In-sert/Table) para compor a estruturado documento. Em cima, uma tabe-la horizontal com o logotipo da em-presa e links de interação com ousuário do site: Ajuda, Cadastro, Bus-ca etc. Outra linha horizontal podeconter links para os tipos de produ-tos. Nossa loja fictícia, a Great FunImportadora, vende produtos de in-formática e tecnologia de consumo.Abaixo, numa coluna à esquerda, háoutro menu, com links para subcate-gorias de produtos. A barra superiore a coluna à esquerda têm a mesmacor de fundo, que deve se harmoni-zar com a cor do logotipo. Nessasáreas já definidas ficam os elemen-tos fixos da página. No retângulo res-tante, vamos montar os itens dinâmi-cos, que são a razão deste tutorial.

4. CAMPOS DE DADOSNo quadrado livre dapágina, insira uma ta-bela com duas colu-nas: uma para a fotodo produto e a outrapara nome, descriçãoe preço. Agora, vamosdizer ao Dreamwea-ver onde estão os da-dos que vão alimen-tar a página. Na colu-na à direita da tela doprograma, na subja-nela Application, cli-que na orelha Databa-

o comando Insert/Image. Na janelaSelect Image Source, clique na op-ção Data Sources, marque o campoSources e dê OK. Salve o arquivo ereveja-o no browser. Agora, está per-feito. Na verdade, não deveríamoster arrastado o campo Foto para apágina. Como se trata de imagem, oprocedimento correto é feito pormeio do comando Insert/Image.

5. DADOS DINÂMICOSAté agora, só apareceu um produ-to na página, que é o primeiro re-gistro da tabela. Para mostrar maisprodutos, é preciso varrer a base dedados. Para isso, o Dreamweaveroferece um belo truque. Ele permi-te que você defina áreas da páginaque devem ser repetidas, cada umamostrando um registro de dados.Como fazer isso? Selecione a tabe-la que contém os campos de dados.Em seguida, na subjanela Applica-tion, orelha Server Behaviors (com-portamentos do servidor), clique no

botão + e escolha Re-peat Region. Na cai-xa de diálogo com es-se mesmo nome, in-dique o número deprodutos que devemaparecer numa pági-na. O número vai de-pender do tamanhoda foto e da descriçãoa serem exibidos. DêOK, salve o arquivo eveja-o no browser(F12). Perfeito.

cionar. Indique o endereço do ban-co de dados produtos.mdb e dê OK.Agora, marque o botão Using LocalDSN e acione OK. Na janela da ore-lha Databases, aparece a conexãocameras. Abra-a, e veja que a caixaTables exibe a tabela tb_produtos.Dentro dela estão todos os camposda tabela. Com isso, definimos umaconexão com o banco de dados.

Agora, precisamos usar essa co-nexão. Clique na orelha Bindings eacione o botão + e escolha Recordset(Query). Na tela Recordset, escolhacameras na caixa Connection e dê OK.Os nomes dos campos da tabela pro-dutos aparecem listados. Arraste oscampos NomeProduto, Descrição, Pre-ço e Foto para os lugares onde de-vem aparecer na tabela livre. Salve oarquivo e acione F12 para ver comovai ficar no browser. Confira: em lu-gar da foto de um produto, apareceo nome do arquivo correspondente.Para resolver isso, volte ao design dapágina, apague o campo da foto e dê

Automação: os campos de dados (à direita da tela) sãoarrastados simplesmente para a página Imagem: o comando Insert/Image põe a foto no lugar

Access: tabela de apresentação dos produtos

ses. Em seguida, clique no botãozi-nho com um sinal + e escolha a op-ção Data Source Name (nome dafonte de dados). Na janela que seabre, digite um nome na caixa Con-nection Name — por exemplo, ca-meras (é melhor sem acento, paraevitar eventuais problemas). Em se-guida, clique no botão Define e, natela seguinte, escolha a alternativaBanco de Dados do Access. Acioneo botão Configurar e, depois, Sele-

TUTORIAL/CATALOGO 23.05.05 17:22

TUTORIAL/CATÁLOGO

74 < COLEÇÃO INFO

6. PAGINAÇÃOVocê pode definir, por exemplo,que cada página exiba apenas dezprodutos. Muito bem. Mas comomostrar a próxima página? Não sepreocupe: o Dreamweaver tam-bém oferece o recurso de pagina-ção. Abaixo da tabela onde apa-recem os dados, inclua outra, sembordas, e com seis colunas. Ajus-te a largura das colunas para quequatro delas, menores, fiquem nocentro. Nelas vamos colocar links,respectivamente, para a primeirapágina, a página anterior, a pró-xima e a última. Selecione o itemque vai receber o link de primei-ra página (pode ser texto ou ima-gem) e volte à orelha Server Be-haviors. Clique no botão + e esco-lha Recordset Paging/Move to FirstRecord. Para o botão página an-terior, repita o procedimento e es-colha Move to Previous Record.

Para os links seguintes, apliqueMove to Next Record e Move toLast Record. Falta o último deta-lhe. Se, na primeira página, vocêclicar no link para ela mesma oua anterior, produzirá um erro. Pa-ra evitá-lo, selecione o link e apli-que nova regra. Clique no botão +e selecione Show Region/ShowRegion If Not First Record. Ou se-ja, o link só aparecerá se a pági-na não for a primeira.

Repita o procedimento para olink de página anterior. Nos outrosdois, próximo e último, escolhaShow Region If Not Last Record.

Tarefa concluída. Você ainda po-de sofisticar o seu catálogo. Crieno banco de dados uma tabela pa-ra cada categoria de produtos: câ-meras, monitores, celulares, ar-mazenamento etc. Na montagemdo catálogo, destine uma páginapara cada categoria. Cada uma

dessas páginas decategorias estarávinculada a uma ta-bela de dados. Háoutra opção: reúnatudo no mesmobanco de dados eassocie cada pági-na a um grupo dedados filtrado pelacategoria. Para apre-ciar o catálogo di-retamente no seunavegador, digite:localhost/catalogo/catalogo.asp.Paginação: exibição de número de produtos pré-definida


TUTORIAL/HELP DESK


osso ajudá-lo? A inicia-tiva de um atendenteonline impressiona bemo visitante de qualquer

site, especialmente os que vendemprodutos ou serviços e querem sediferenciar. Por isso mesmo, no tu-torial a seguir, vamos mostrar comoadicionar a um site um sistema debate-papo ao vivo. A ferramenta bá-sica é o Crafty Syntax Live Help, umproduto de código aberto que éconstruído em PHP e usa o bancode dados MySQL para ar-mazenar as informações.O Crafty Syntax deve serinstalado num servidorweb. O serviço é chama-do por meio de um linkque pode ser colocadoem qualquer página dosite. Esse link abre umasessão de bate-papo en-tre o internauta e umatendente. Se o sistemade chat ao vivo não esti-ver ativo (por exemplo,

fora do horário de atendimento), ovisitante pode enviar uma mensa-gem de e-mail à empresa. Veja a se-guir os passos para obter e instalaro Crafty Syntax Live Help.

1. OS INGREDIENTESConfira a lista do que você precisapara a instalação. Primeiro, você de-ve ter acesso a um servidor web Li-nux no qual estejam ativos o inter-pretador de scripts PHP e o banco dedados MySQL. Não é necessário co-

O PHP CONVERSACOM OS

CLIENTES ONLINE MONTE UM SISTEMA DE BATE-PAPO PARA ATENDER

AOS VISITANTES DO SITEPOR CARLOS MACHADO

P

Configuração: coloque as mensagens em português

TUTORIAL/HELP DESK 23.05.05 17:24 Page 75

TUTORIAL/HELP DESK

COLEÇÃO INFO > 77

TUTORIAL/HELP DESK


Crafty Syntax como as telas que apa-recem para o usuário estarão emportuguês.B. Na caixa Title of your Live Help,digite o título do seu serviço de ba-te-papo online. Pode ser, por exem-plo, “Loja X — Atendimento Online”.Em nossa montagem usamos “Aten-dimento Infolab”. C. Na caixa Live Help — HTTP Path,digite o endereço completo do sis-tema de bate-papo: http://www.seudominio.com.br/livehelp.

Adapte esse endereço ao nome dodomínio e ao nome do diretório, ca-so você não tenha usado livehelp.Atenção: não inclua uma barra (/) nofinal do endereço. A caixa LiveHelp— HTTPS não precisa ser preenchi-da, a não ser se você decidir usar oprotocolo seguro HTTPS.D. Na seção User/Password, digiteo nome de usuário do administradore uma senha, duas vezes. E. Na seção Administration E-mail, forneça o endere-ço do administrador. Sevocê esquecer a senha,o Live Help a enviará pa-ra esse endereço.F. Agora, em Full Path toLive — Help, forneça o ca-minho completo do pro-grama. Atenção: não setrata de uma URL, masdo diretório do progra-ma na estrutura do ser-vidor. É algo que variaconforme a estrutura doservidor. Mais ou menos

assim: var/www/html/livehelp.Se tiver dúvida sobre esse cami-nho, consulte a empresa que hos-peda seu site. G. Digite uma mensagem de boas-vindas. Ela aparecerá quando ousuário abrir o Live Help. Pode seralgo como “Bem-vindo ao nosso sis-tema de ajuda online. Para iniciar,digite seu nome na caixa abaixo”.H. Na caixa Database, selecione oformato de banco de dados que vo-cê vai usar. Escolha a opção MySQL.O Craft Syntax também dá suportea banco de dados de texto. OMySQL, no entanto, é uma alterna-tiva mais segura.I. Agora, indique as informaçõesrelativas ao banco de dadosMySQL. Na caixa SQL Server, indi-que localhost. Em SQL Database,digite o nome que você deu aobanco de dados (livehelp ou ou-tro). Nas caixas SQL User e SQLPassword, digite o nome de usuá-

Atendimento: bate-papo na tela do operador

nhecer nada de PHP, masé preciso pelo menos sa-ber criar um banco de da-dos em SQL e lidar comarquivos no Linux. Paracomeçar, faça o downloaddo Crafty Syntax Live Helpno endereço www.info.abril.com.br/download/4167.shtml.

Para deixar tudo pron-to, prepare o MySQL. Crieum banco de dados vazio.Uma vez logado no MySQL,o comando é simples:create database livehelp;livehelp, no caso, é o no-me do banco de dados,mas você pode escolheroutro. Anote o nome do usuário e asenha desse banco de dados.

2. A INSTALAÇÃOVocê pode ter baixado um arquivocompactado no formato TAR.GZ ouZIP. Extraia os arquivos e faça oupload de todos eles para o subdi-retório /livehelp no diretório-raiz deseu website. (Se quiser, renomeie odiretório para algo como /ajudaon-line, /ajuda ou algo que lhe pareçamelhor.) Altere as permissões do ar-quivo config.php para 777 — ou se-ja, licença para ler, escrever e exe-cutar, concedida a todos: público,grupo e usuário. Uma forma de fa-zer isso é clicar com o botão direi-to no arquivo config.php e, no me-nu, escolher CHMOD ou Change At-tributes. Abre-se uma caixa, na qual

você deve digitar o número 777 ouentão marcar todas as caixas Read,Write, Execute. Agora, abra seu brow-ser e execute o arquivo setup.php nosite, chamando a seguinte URL: www.seudominio.com.br/livehelp/setup.php

3. A CONFIGURAÇÃOAgora, você entrou no configuradorautomático do Crafty Syntax. Acom-panhe o roteiro:

A. Na caixa de combinação Langua-ge, escolha o idioma Portuguese(Brazilian) e, como se trata da pri-meira instalação, escolha New Ins-tallation na caixa Installation. O no-vo idioma só entrará em ação de-pois que os ajustes forem comple-tados. Tanto a administração do

Crafty Syntax: tela de instalação define acessos


TUTORIAL/HELP DESK

COLEÇÃO INFO > 77

TUTORIAL/HELP DESK


Crafty Syntax como as telas que apa-recem para o usuário estarão emportuguês.B. Na caixa Title of your Live Help,digite o título do seu serviço de ba-te-papo online. Pode ser, por exem-plo, “Loja X — Atendimento Online”.Em nossa montagem usamos “Aten-dimento Infolab”. C. Na caixa Live Help — HTTP Path,digite o endereço completo do sis-tema de bate-papo: http://www.seudominio.com.br/livehelp.

Adapte esse endereço ao nome dodomínio e ao nome do diretório, ca-so você não tenha usado livehelp.Atenção: não inclua uma barra (/) nofinal do endereço. A caixa LiveHelp— HTTPS não precisa ser preenchi-da, a não ser se você decidir usar oprotocolo seguro HTTPS.D. Na seção User/Password, digiteo nome de usuário do administradore uma senha, duas vezes. E. Na seção Administration E-mail, forneça o endere-ço do administrador. Sevocê esquecer a senha,o Live Help a enviará pa-ra esse endereço.F. Agora, em Full Path toLive — Help, forneça o ca-minho completo do pro-grama. Atenção: não setrata de uma URL, masdo diretório do progra-ma na estrutura do ser-vidor. É algo que variaconforme a estrutura doservidor. Mais ou menos

assim: var/www/html/livehelp.Se tiver dúvida sobre esse cami-nho, consulte a empresa que hos-peda seu site. G. Digite uma mensagem de boas-vindas. Ela aparecerá quando ousuário abrir o Live Help. Pode seralgo como “Bem-vindo ao nosso sis-tema de ajuda online. Para iniciar,digite seu nome na caixa abaixo”.H. Na caixa Database, selecione oformato de banco de dados que vo-cê vai usar. Escolha a opção MySQL.O Craft Syntax também dá suportea banco de dados de texto. OMySQL, no entanto, é uma alterna-tiva mais segura.I. Agora, indique as informaçõesrelativas ao banco de dadosMySQL. Na caixa SQL Server, indi-que localhost. Em SQL Database,digite o nome que você deu aobanco de dados (livehelp ou ou-tro). Nas caixas SQL User e SQLPassword, digite o nome de usuá-

Atendimento: bate-papo na tela do operador

nhecer nada de PHP, masé preciso pelo menos sa-ber criar um banco de da-dos em SQL e lidar comarquivos no Linux. Paracomeçar, faça o downloaddo Crafty Syntax Live Helpno endereço www.info.abril.com.br/download/4167.shtml.

Para deixar tudo pron-to, prepare o MySQL. Crieum banco de dados vazio.Uma vez logado no MySQL,o comando é simples:create database livehelp;livehelp, no caso, é o no-me do banco de dados,mas você pode escolheroutro. Anote o nome do usuário e asenha desse banco de dados.

2. A INSTALAÇÃOVocê pode ter baixado um arquivocompactado no formato TAR.GZ ouZIP. Extraia os arquivos e faça oupload de todos eles para o subdi-retório /livehelp no diretório-raiz deseu website. (Se quiser, renomeie odiretório para algo como /ajudaon-line, /ajuda ou algo que lhe pareçamelhor.) Altere as permissões do ar-quivo config.php para 777 — ou se-ja, licença para ler, escrever e exe-cutar, concedida a todos: público,grupo e usuário. Uma forma de fa-zer isso é clicar com o botão direi-to no arquivo config.php e, no me-nu, escolher CHMOD ou Change At-tributes. Abre-se uma caixa, na qual

você deve digitar o número 777 ouentão marcar todas as caixas Read,Write, Execute. Agora, abra seu brow-ser e execute o arquivo setup.php nosite, chamando a seguinte URL: www.seudominio.com.br/livehelp/setup.php

3. A CONFIGURAÇÃOAgora, você entrou no configuradorautomático do Crafty Syntax. Acom-panhe o roteiro:

A. Na caixa de combinação Langua-ge, escolha o idioma Portuguese(Brazilian) e, como se trata da pri-meira instalação, escolha New Ins-tallation na caixa Installation. O no-vo idioma só entrará em ação de-pois que os ajustes forem comple-tados. Tanto a administração do

Crafty Syntax: tela de instalação define acessos

TUTORIAL/HELP DESK 23.05.05 17:25

TUTORIAL/HELP DESK

78 < COLEÇÃO INFO

rio e a senha do administrador, de-finidos durante a criação do ban-co de dados. J. Clique no botão Install. O CraftySyntax está configurado. Mas, an-tes de usar o Live Help pela primei-ra vez, apague o arquivo setup.php.Esse arquivo serve apenas para atarefa de configuração. Última ta-refa: volte ao arquivo config.php e,de forma idêntica ao que foi mos-trado no passo 2, altere as permis-sões do arquivo para 755 ou 400.O primeiro número indica que to-dos podem ler eexecutar o arqui-vo, mas só o do-no pode escrevernele. O outro in-dica que somen-te o dono podeler o arquivo. Lembre-se: para mo-dificar as configurações, você pre-cisará ajustar as permissões do ar-quivo para 777 e depois revertê-las para 755 ou 400.

4. A INSTALAÇÃO NA WEBInstalado e configurado o CraftySyntax, você já pode entrar no sis-tema. No browser, digite www.seudominio.com.br/livehelp/.Surge a tela de administração doproduto. Faça o login usando o no-me de usuário e a senha definidosna instalação. Agora, clique na ore-lha Departamentos. A tela princi-pal mostra um departamento ca-dastrado, “default”. Clique no linkGerar HTML. Na próxima tela, in-

dique o tipo de HTML que desejacriar. Na caixa associada à pergun-ta “Qual formato você quer?”, es-colha Link Simples (Sem Opçõesde Convite). Acione o botão Criar.Com isso o programa exibe o có-digo HTML que você deve copiare inserir nas páginas de entradapara o serviço de atendimento on-line. Trata-se, basicamente, de umlink que chama um script PHP: http://www.seudominio.com.br/livehelp/livehelp.php?department=1

Esse link pode ser colocado emqualquer páginado site onde vo-cê queira ofere-cer ajuda ao vi-sitante. Ao clicarno link, ele entrana tela de chat.

Do outro lado, um operador, lo-gado na interface de administra-ção, atende e inicia o bate-papo.Observe que o Crafty Syntax trazum departamento e um operador-padrão. Você pode criar outros,usando o menu da tela de admi-nistração. Para finalizar, na ore-lha Departamentos, clique no linkConfigurações, ao lado do nomedo departamento. As mensagensde interação com o usuário estãoem inglês. Personalize essas men-sagens em português e, no finalda tela, clique no botão Atualizar.Seu sistema de atendimento es-tá pronto. Explore mais o CraftySyntax e veja que há vários outrosrecursos de administração.

777É o número da permissão para ler,

escrever e executar. Mude para 755se quiser restringir a escrita ou 400

para impedir a leitura


TUTORIAL/VOTAÇÃO


s enquetes são uma boamaneira de estimular ainteratividade com visi-tantes de qualquer site,

independentemente do assunto abor-dado. Neste tutorial, explicaremos co-mo criar um sistema de votação usan-do o Flash MX. Para que a votaçãofuncione, os arquivos devem estar emum servidor com suporte a PHP.Acompanhe os passos a seguir.

1. OS ARQUIVOSAntes de mais nada, faça o downloaddo arquivo zipado que completa es-te tutorial em www.info.abril.com.br/download/4081.shtml. Ele contém

os arquivos actionscript.txt, com o có-digo que recebe o voto na web, o vo-tacao.php, que lê, interpreta e salvao voto no servidor, e o votos.txt, querecebe e apresenta o resultado.

No Flash MX 2004, criamos umarquivo novo e, por meio do menuModify/Document, deixamos o do-cumento com 550 pixels de largurapor 600 de altura. Clicamos em OKpara aplicar as novas medidas.

2. O FUNDOAgora, renomeamos a única cama-da da linha do tempo para “fundo”.Vamos criar um fundo com um gra-diente em tons de azul. Abrimos o

painel Color Mixer, pormeio do atalho Shift+F9.Clicamos na seta da es-querda e escolhemos umtom de azul-escuro. De-pois, clicamos na seta dadireita e escolhemos umtom de azul mais claro.O gradiente é exibido nopainel Color Mixer.

Com o gradiente mon-tado, clicamos na ferra-menta de desenho retan-

DÊ SEU VOTOPARA O FLASH

MONTE UM SISTEMA DE VOTAÇÃO E AMPLIE A INTERATIVIDADE DE SEU SITE

POR ANDRÉ CARDOZO

A

Botão: componente invisível tem conteúdo no estado Hit

TUTORIAL/ VOTAÇÃO 23.05.05 17:27 Page 79

TUTORIAL/VOTAÇÃO

COLEÇÃO INFO > 81

TUTORIAL/VOTAÇÃO


gular e traçamos um re-tângulo para cobrir todaa área do arquivo. Pron-to, a cor de fundo foi apli-cada. Para completar ofundo, importamos a ima-gem da bola, por meio domenu File/Import, e a po-sicionamos no canto su-perior direito da tela. Porfim, usamos a ferramen-ta Linha para desenharquatro linhas horizontaisno alto da tela e comple-tar a diagramação do cabeçalho.

3. O TEXTO E OS BRASÕESCriamos uma nova camada, de no-me “texto”, e, com a ferramenta detexto, digitamos um título para a pá-gina, a pergunta da votação e o no-me dos oito times da enquete: Fla-mengo, Atlético-PR, São Paulo, San-tos, Corinthians, Vasco, Botafogo ePalmeiras. Todas as caixas de textosão do tipo estático.

No painel da linha do tempo, cria-mos uma camada de nome “escu-dos” e importamos os ícones com obrasão de todos os times integrantesda votação. Depois, usamos a ferra-menta Seta para posicioná-los ao la-do do nome de cada equipe.

4. O BOTÃOCriamos mais uma camada no painellinha do tempo. Ela tem o nome“bot_vota” e abrigará o botão de vo-tação. Nessa camada, acionamos omenu Window/Common Libraries/

this._parent.result_1_txt.text =this.fla;

this._parent.result_2_txt.text =this.atl;

this._parent.result_3_txt.text =this.sao;

this._parent.result_4_txt.text =this.san;

this._parent.result_5_txt.text =this.cor;

this._parent.result_6_txt.text =this.vas;

this._parent.result_7_txt.text =this.bot;

this._parent.result_8_txt.text =this.pal;};function escolheTime(val) {

timeEscolhido = val;todosTimes.gotoAndStop(val+1);

}function vota() {

trace(“vota”);if (timeEscolhido != undefined)

{controleDados.loadVariables

(“votacao.php?voto=”+timeEsco-lhido, 0, “post”);

}}

Em resumo, esse có-digo é o responsável porpassar para o script PHPos dados do time esco-lhido pelo internauta.

6. O MOVIE CLIPAcima da camada “as”,criamos outra camadade nome “todos times”.

Ela abrigará o movie clip que rece-berá o escudo do time escolhido pe-lo usuário. Com a camada criada, va-mos gerar o movie clip.

Acionamos o menu Insert/NewSymbol, escolhemos a opção MovieClip e clicamos em OK. Estamos ago-ra no modo de edição do movie clip.Nesse modo, vamos deixar o primei-ro keyframe em branco.

Nos oito frames seguintes, inseri-mos um keyframe em branco, usan-do a tecla F7, e importamos o escu-do dos oito times, inserindo um emcada frame. Utilizamos a janela dealinhamento, acionada por meio dasteclas Ctrl+K, para garantir que to-dos os escudos estejam na mesmaposição. Agora, nosso movie clip temnove frames: um vazio e os outrosoito com o escudo dos times.

7. A EDIÇÃOClicamos no botão Scene 1 para sairdo modo de edição do clipe. Nossomovie clip agora está na Bibliotecado Flash. Clicamos sobre ele e o ar-

Organização: camadas facilitam o acesso aos elementos

Cena: o primeiro frame vira página de entrada da votação

Buttons. No painel Buttons, escolhe-mos um botão e o arrastamos parao palco. Na janela de propriedadesdo botão, definimos sua cor. Depois,ainda com o botão selecionado, abri-mos a janela de ações, por meio datecla F9, e digitamos o seguinte có-digo para o botão: on (release) {vota();}

5. O SCRIPTMais uma vez, criamos uma cama-da no painel linha do tempo. Ela sechama “as” e abrigará o script denossa votação. Com o primeiro fra-me da camada selecionado, abri-mos a janela de ações, usando oatalho F9, e colamos o código doarquivo actionscript.txt, que faz par-te do arquivo zipado mencionadono passo 1. Seu conteúdo é:stop();controleDados.onData = function() {

this._parent.nextFrame();


TUTORIAL/VOTAÇÃO

COLEÇÃO INFO > 81

TUTORIAL/VOTAÇÃO


gular e traçamos um re-tângulo para cobrir todaa área do arquivo. Pron-to, a cor de fundo foi apli-cada. Para completar ofundo, importamos a ima-gem da bola, por meio domenu File/Import, e a po-sicionamos no canto su-perior direito da tela. Porfim, usamos a ferramen-ta Linha para desenharquatro linhas horizontaisno alto da tela e comple-tar a diagramação do cabeçalho.

3. O TEXTO E OS BRASÕESCriamos uma nova camada, de no-me “texto”, e, com a ferramenta detexto, digitamos um título para a pá-gina, a pergunta da votação e o no-me dos oito times da enquete: Fla-mengo, Atlético-PR, São Paulo, San-tos, Corinthians, Vasco, Botafogo ePalmeiras. Todas as caixas de textosão do tipo estático.

No painel da linha do tempo, cria-mos uma camada de nome “escu-dos” e importamos os ícones com obrasão de todos os times integrantesda votação. Depois, usamos a ferra-menta Seta para posicioná-los ao la-do do nome de cada equipe.

4. O BOTÃOCriamos mais uma camada no painellinha do tempo. Ela tem o nome“bot_vota” e abrigará o botão de vo-tação. Nessa camada, acionamos omenu Window/Common Libraries/

this._parent.result_1_txt.text =this.fla;

this._parent.result_2_txt.text =this.atl;

this._parent.result_3_txt.text =this.sao;

this._parent.result_4_txt.text =this.san;

this._parent.result_5_txt.text =this.cor;

this._parent.result_6_txt.text =this.vas;

this._parent.result_7_txt.text =this.bot;

this._parent.result_8_txt.text =this.pal;};function escolheTime(val) {

timeEscolhido = val;todosTimes.gotoAndStop(val+1);

}function vota() {

trace(“vota”);if (timeEscolhido != undefined)

{controleDados.loadVariables

(“votacao.php?voto=”+timeEsco-lhido, 0, “post”);

}}

Em resumo, esse có-digo é o responsável porpassar para o script PHPos dados do time esco-lhido pelo internauta.

6. O MOVIE CLIPAcima da camada “as”,criamos outra camadade nome “todos times”.

Ela abrigará o movie clip que rece-berá o escudo do time escolhido pe-lo usuário. Com a camada criada, va-mos gerar o movie clip.

Acionamos o menu Insert/NewSymbol, escolhemos a opção MovieClip e clicamos em OK. Estamos ago-ra no modo de edição do movie clip.Nesse modo, vamos deixar o primei-ro keyframe em branco.

Nos oito frames seguintes, inseri-mos um keyframe em branco, usan-do a tecla F7, e importamos o escu-do dos oito times, inserindo um emcada frame. Utilizamos a janela dealinhamento, acionada por meio dasteclas Ctrl+K, para garantir que to-dos os escudos estejam na mesmaposição. Agora, nosso movie clip temnove frames: um vazio e os outrosoito com o escudo dos times.

7. A EDIÇÃOClicamos no botão Scene 1 para sairdo modo de edição do clipe. Nossomovie clip agora está na Bibliotecado Flash. Clicamos sobre ele e o ar-

Organização: camadas facilitam o acesso aos elementos

Cena: o primeiro frame vira página de entrada da votação

Buttons. No painel Buttons, escolhe-mos um botão e o arrastamos parao palco. Na janela de propriedadesdo botão, definimos sua cor. Depois,ainda com o botão selecionado, abri-mos a janela de ações, por meio datecla F9, e digitamos o seguinte có-digo para o botão: on (release) {vota();}

5. O SCRIPTMais uma vez, criamos uma cama-da no painel linha do tempo. Ela sechama “as” e abrigará o script denossa votação. Com o primeiro fra-me da camada selecionado, abri-mos a janela de ações, usando oatalho F9, e colamos o código doarquivo actionscript.txt, que faz par-te do arquivo zipado mencionadono passo 1. Seu conteúdo é:stop();controleDados.onData = function() {

this._parent.nextFrame();

TUTORIAL/ VOTAÇÃO 23.05.05 17:27

TUTORIAL/VOTAÇÃO

82 < COLEÇÃO INFO

Arrastamos oito cópias do botãopara a cena e as posicionamos so-bre o escudo das equipes. Depois,selecionamos o botão do primeirotime e digitamos o seguinte códigoon (release) {escolheTime(1);}

Repetimos o código para os ou-tros botões, apenas aumentando onúmero entre parênteses em 1. As-sim, teremos os valores 2, 3, 4, 5, 6,7, e 8 para os botões restantes.

9. A PÁGINA DERESULTADOA primeira cena de nossavotação está completa. Te-mos oito camadas, cadauma com um só frame.Vamos agora passar parao frame 2, que correspon-de à página de resultado.As camadas “fundo”, “es-cudos”, “as” e “controle”não mudam no segundoframe. Por isso, basta se-lecionar cada uma delase teclar F5 para adicionarum frame. Assim, seu as-pecto é mantido. Na ca-

mada “bot_vota”, inserimos um key-frame em branco no segundo framecom F7. Repetimos o processo nascamadas “todos times” e “botoes”.

Na camada “texto”, criamos umkeyframe no segundo frame, pormeio da tecla F6. Trocamos a per-gunta da votação pelo texto “Confi-ra o resultado parcial da votação”.

rastamos para a cena, dentro da ca-mada “todos times”.

Acima da camada “todos times”,criamos a camada “controle”. Ela abri-gará o movie clip do controle de da-dos. Nessa camada, acionamos o me-nu Insert/New Symbol. Escolhemoso tipo Movie Clip e clicamos em OK.Depois, clicamos no botão Scene 1para sair do modo de edição do mo-vie clip. Ele agora está na bibilioteca.

Arrastamos o movie clip para a ca-mada “controle” e damos a ele o no-me de instância “controleDados” najanela de propriedades.Esse é o nome de identi-ficação do movie clip nosscripts. Posicionamos oclipe fora da cena.

8. MAIS BOTÕESCriamos outra camada, aúltima de nossa votação.Ela tem o nome “botoes”e abrigará os botões invi-síveis que ficarão sobre oescudo de cada time. Nes-sa camada, acionamos omenu Insert/New Symbol.Escolhemos a opção But-ton e clicamos em OK. Es-tamos no modo de edição do botão.

Clicamos no estado Hit e criamosum keyframe em branco, teclandoF7. Nesse keyframe, desenhamos umcírculo. Seu tamanho e cor não im-portam, pois ele será transparente eas dimensões poderão ser definidasdepois. Clicamos em Scene para sairdo modo de edição do botão.

Biblioteca: painel doFlash abriga os objetosusados no arquivo


TUTORIAL/VOTAÇÃO

COLEÇÃO INFO > 83

Depois, criamos uma caixa de textoao lado do escudo do primeiro ti-me. Na janela de propriedades dacaixa, escolhemos a opção DynamicText. Na caixa Instance Name, digi-tamos “result_1_txt”. Essa é a caixade texto que receberá o número devotos do primeiro time da votação.

10. MAIS TEXTOCopiamos e colamos a caixa na cenapara criar sete cópias dela, uma pa-ra cada time restante. Posicionamosas caixas ao lado de cada time e ape-nas alteramos o nome de instância,aumentando em 1 o algarismo entreas linhas do nome. Assim, temos “re-sult_2_txt”, “result_3_txt”, “result_4_txt”,“result_5_txt”, “result_6_txt”, “re-sult_7_txt” e “result_8_txt”.

11. A PUBLICAÇÃOAcionamos o atalho Shift+F12 parapublicar os documentos SWF e HTML.Para que a votação funcione, é neces-sário jogar os dois arquivos no mes-mo diretório dos arquivos votacao.phpe votos.txt, que fazem parte do arqui-vo mencionado no passo 1. O códigode votacao.php é o seguinte:<?php

$arquivo = fopen(“votos.txt”, “r”);$buffer = fscanf($arquivo, “%d%d %d %d %d %d %d %d “,$fla, $atl, $sao, $san, $cor, $vas,$bot, $pal);fclose($arquivo);switch($voto){

case 1 :

//voto para o flamengo$fla++;break;

case 2 ://voto para o atletico$atl++;break;

case 3 :$sao++;break;

case 4 :$san++;break;

case 5 :$cor++;break;

case 6 :$vas++;break;

case 7 :$bot++;break;

case 8 :$pal++;break;

}

$conteudo=$fla.” “.$atl.”“.$sao.” “.$san.” “.$cor.”“.$vas.” “.$bot.” “.$pal;$arquivo = fopen(“votos.txt”, “w”);$numBytes = fwrite($arquivo,$conteudo);fclose($arquivo);printf(“fla=”.$fla.”&atl=”.$atl.”&sao=”.$sao.”&san=”.$san.”&cor=”.$cor.”&vas=”.$vas.”&bot=”.$bot.”&pal=”.$pal);

O código de votos.txt é de apenasuma linha: 0 0 0 0 0 0 0 0


TUTORIAL/CLASSIFICAÇÃO

COLEÇÃO INFO > 85



m ranking com pagina-ção é um recurso indis-pensável em sites queapresentam listas de

classificação, como as de empresasmais lucrativas, ou resultados decompetições, como os de campeo-natos esportivos e torneios de ga-mes online. Construir o ranking éuma outra história e um bom desa-fio para os desenvolvedores flashei-ros. Neste tutorial, usamos o FlashMX para obter as colocações a par-tir de um arquivo XML. Vamos a ele.

1. DOWNLOADSAntes de mais nada, baixe o arquivozipado Segredos doRanking no endereçowww.info.abril.com.br/download/4194.shtml. Descompactetudo numa mesmapasta, que não pre-cisa estar num ser-vidor web. São quatroos arquivos: ranking.fla, com o projeto doranking; ranking.swf,com a lista pronta

para testar; ranking.as, com oActionScript, e ranking.xml, com oexemplo de listagem.

Para alívio dos iniciantes, eis o pri-meiro segredo: tanto faz qual a lin-guagem de programação que vocêusa. Para o Flash vale apenas a saídade dados, que é escrita pelo servidorcom um script. Então, vamos nos con-centrar no Flash e no ActionScript ne-cessário para processar a saída XML.

2. XML ESTÁTICOÉ mais fácil resolver um problemade cada vez. Logo, embora o site se-ja dinâmico, vamos começar comum XML estático.

OS SEGREDOSDO RANKING

NAVEGUE POR UMA LISTA DE GANHADORES CONSTRUÍDACOM FLASH E XML

POR EVERSON STABENOW SIQUEIRA

U

No arquivo ZIP que você baixou,já está tudo funcionando. Entãoduplique a pasta descompactadae trabalhe na cópia. Assim vocêpode comparar os arquivos casoalgo saia errado.

No Flash MX, crie um novo arqui-vo. Use 400 x 300 pixels para as di-mensões do documento e salve como nome “ranking.fla”.

3. MOVIECLIPUma lista de ganhadores costumaser apenas parte de um projetoFlash. Exemplo: a competição aca-ba, e aparece uma tela com os re-cordistas. Então tudo o que faremosa partir de agora será dentro de umúnico MovieClip, que só depois irápara a linha do tempo principal.

Clique no menu Insert/NewSymbol e dê o nome “ranking” pa-ra este novo MovieClip. Selecio-ne o primeiro quadro do rankinge tecle F9 para aparecer a janelade ActionScript. Nela, você digi-tará a única linha de código denosso arquivo .fla:#include “as/ranking.as”Se não conseguir digitar, mude para“expert mode”, teclando Ctrl+Shift+E.

4. TEXTO DINÂMICOAinda dentro da área do MovieClip“ranking”, selecione a ferramentade texto. Na barra de proprieda-des, mude a opção do primeiro me-nu suspenso para DynamicText. Mu-de também a fonte para _sans, cor-

po 12, preto. Crie então o campo detexto, ocupando apenas uma linha.Logo em seguida, na barra de pro-priedades, daremos um nome pa-ra esse campo: “nome1”.

Duplique o campo (selecione etecle Ctrl+D) várias vezes até for-mar uma coluna com dez campos.Mude o nome de cada um deles,na seqüência, de “nome1” até “no-me10”. Essa coluna mostrará osnomes dos colocados.

Com o mouse, selecione todos oscampos e duplique-os (Ctrl+D), crian-do uma segunda coluna, para ospontos, à direita da anterior. Mudetambém os nomes desses campos,agora com os nomes de “pontos1”a “pontos10”. Você também podediminuir a largura dos campos.

Duplique novamente uma dascolunas e coloque-a totalmente àesquerda, para indicar a posiçãode cada nome no ranking. Maisuma vez, mude os nomes dessesdez campos, seguindo o padrão de“pos1” a “pos10”.

5. OS BOTÕESLogo abaixo das três colunas com oscampos, crie dois botões: um para aesquerda e outro para a direita. Dêos nomes “anterior” para o botão da

Projeto de ranking: campos duplicados e renomeados

Botão: o nome certo é fundamental

TUTORIAL/ CLASSIFICAÇÃO 23.05.05 18:58 Page 84


COLEÇÃO INFO > 85



m ranking com pagina-ção é um recurso indis-pensável em sites queapresentam listas de

classificação, como as de empresasmais lucrativas, ou resultados decompetições, como os de campeo-natos esportivos e torneios de ga-mes online. Construir o ranking éuma outra história e um bom desa-fio para os desenvolvedores flashei-ros. Neste tutorial, usamos o FlashMX para obter as colocações a par-tir de um arquivo XML. Vamos a ele.

1. DOWNLOADSAntes de mais nada, baixe o arquivozipado Segredos doRanking no endereçowww.info.abril.com.br/download/4194.shtml. Descompactetudo numa mesmapasta, que não pre-cisa estar num ser-vidor web. São quatroos arquivos: ranking.fla, com o projeto doranking; ranking.swf,com a lista pronta

para testar; ranking.as, com oActionScript, e ranking.xml, com oexemplo de listagem.

Para alívio dos iniciantes, eis o pri-meiro segredo: tanto faz qual a lin-guagem de programação que vocêusa. Para o Flash vale apenas a saídade dados, que é escrita pelo servidorcom um script. Então, vamos nos con-centrar no Flash e no ActionScript ne-cessário para processar a saída XML.

2. XML ESTÁTICOÉ mais fácil resolver um problemade cada vez. Logo, embora o site se-ja dinâmico, vamos começar comum XML estático.

OS SEGREDOSDO RANKING

NAVEGUE POR UMA LISTA DE GANHADORES CONSTRUÍDACOM FLASH E XML

POR EVERSON STABENOW SIQUEIRA

U

No arquivo ZIP que você baixou,já está tudo funcionando. Entãoduplique a pasta descompactadae trabalhe na cópia. Assim vocêpode comparar os arquivos casoalgo saia errado.

No Flash MX, crie um novo arqui-vo. Use 400 x 300 pixels para as di-mensões do documento e salve como nome “ranking.fla”.

3. MOVIECLIPUma lista de ganhadores costumaser apenas parte de um projetoFlash. Exemplo: a competição aca-ba, e aparece uma tela com os re-cordistas. Então tudo o que faremosa partir de agora será dentro de umúnico MovieClip, que só depois irápara a linha do tempo principal.

Clique no menu Insert/NewSymbol e dê o nome “ranking” pa-ra este novo MovieClip. Selecio-ne o primeiro quadro do rankinge tecle F9 para aparecer a janelade ActionScript. Nela, você digi-tará a única linha de código denosso arquivo .fla:#include “as/ranking.as”Se não conseguir digitar, mude para“expert mode”, teclando Ctrl+Shift+E.

4. TEXTO DINÂMICOAinda dentro da área do MovieClip“ranking”, selecione a ferramentade texto. Na barra de proprieda-des, mude a opção do primeiro me-nu suspenso para DynamicText. Mu-de também a fonte para _sans, cor-

po 12, preto. Crie então o campo detexto, ocupando apenas uma linha.Logo em seguida, na barra de pro-priedades, daremos um nome pa-ra esse campo: “nome1”.

Duplique o campo (selecione etecle Ctrl+D) várias vezes até for-mar uma coluna com dez campos.Mude o nome de cada um deles,na seqüência, de “nome1” até “no-me10”. Essa coluna mostrará osnomes dos colocados.

Com o mouse, selecione todos oscampos e duplique-os (Ctrl+D), crian-do uma segunda coluna, para ospontos, à direita da anterior. Mudetambém os nomes desses campos,agora com os nomes de “pontos1”a “pontos10”. Você também podediminuir a largura dos campos.

Duplique novamente uma dascolunas e coloque-a totalmente àesquerda, para indicar a posiçãode cada nome no ranking. Maisuma vez, mude os nomes dessesdez campos, seguindo o padrão de“pos1” a “pos10”.

5. OS BOTÕESLogo abaixo das três colunas com oscampos, crie dois botões: um para aesquerda e outro para a direita. Dêos nomes “anterior” para o botão da

Projeto de ranking: campos duplicados e renomeados

Botão: o nome certo é fundamental

TUTORIAL/ CLASSIFICAÇÃO 23.05.05 18:58


COLEÇÃO INFO > 87



esquerda e “proxima” para o da di-reita. Isso é importante porque se obotão não tiver o nome certo não iráfuncionar. Neste tutorial, utilizamosbotões que já vêm com o Flash, acio-nando o menu Window/CommonLibraries/Buttons.

6. FILME NO PALCOAté aqui, tudo foi feito dentro doMovieClip “ranking”. Voltando paraa linha do tempo principal (abaixodos frames, clique em scene1), nos-so projeto fica novamente vazio.Abra a Library (tecle Ctrl+L ou F11),arraste o ranking para a área de tra-balho e ajuste a posição para ficarbonitinho. Tudo o que tínhamos afazer dentro do Flash está pronto.Salve o arquivo. Se quiser enfeitaro documento na linha do tempoprincipal, fique à vontade.

7. O TESTESe você fez tudo certo e salvouseu ranking.fla com o ranking.as e oranking.xml, que entregamos de ban-deja, basta testar, teclando Ctrl+Enter.

Agora que você testou e experi-mentou os botões de próxima e an-terior, vamos entender como tudoisso funciona.

Alguns programadores gostammuito de editar os ActionScrips forado Flash, salvando-os em arquivos.as. Com isso, podemos usar o editorde textos preferido e reaproveitarmais facilmente os mesmos scriptsem vários projetos (é fato que tam-bém se perdem várias facilidades que

Flash. Com esse ajuste fino, fi-ca fácil retornar um arranjocom todos os nós desejados.

Importante: para usar a fun-ção getNodesByName em seusnovos arquivos .fla com XML,não esqueça de incluir o códi-go que expande a funcionali-dade do XMLnode.

Arraste o arquivo ranking.xmlpara seu navegador favoritoe veja como ele é organizado.Existem vários nomes com acen-tuação e com diferentes compri-mentos. Em seus projetos, produ-za arquivos de teste variados, co-mo o ranking.xml. Isso ajuda aidentificar problemas muito maisrapidamente do que se tivesse es-crito “nome1 a nomeX”. Veja tam-bém que o XML pode conter infor-mações adicionais que você nãoesteja usando — é o caso dos en-dereços de site, existentes em ape-nas três colocados.

9. CÓDIGO .ASO código ranking.as possui comen-tários explicativos. Primeiro, definem-se todas as funções. Só no final é quemandamos carregar o XML, e tudoacontece a partir daí.

Tudo está amarrado com o Mo-vieClip “ranking”. Você tem totalliberdade para criar o que quiserna linha do tempo principal, semse preocupar com nomes de variá-veis. No momento em que o rankingaparecer na linha do tempo, ele fa-rá seu trabalho.

o editor interno do Flash oferece).Note que, por meio de um só ar-

quivo de ActionScript, também pu-demos criar toda a funcionalida-de do projeto, em vez de ter o có-digo espalhado dentro do Flash,em vários objetos. Mas para queisso tudo funcione é muito impor-tante que cada objeto tenha seupróprio nome. Por meio dos no-mes pode-se programar o compor-tamento de cada item, e alterarseus valores e propriedades.

8. UM XML MELHORADOGrosso modo, o XML nada mais édo que um arquivo de texto ondeas informações são descritas e or-ganizadas. Por meio de tags (o quelembra muito um HTML), cria-seuma hierarquia de dados. Uma in-formação pode ser a mãe de outrasinformações, como numa árvoregenealógica. O nome correto paracada participante dessa árvore é nó(node, em inglês).

Para o Flash mostrar informaçõesde um XML deve-se primeiro car-regar o XML, o que é fácil. Depois,caminha-se de um nó para outropela hierarquia. Cada nó dá acessoaos seus filhos através de proprieda-des como childNodes, ou firstChild.Então já não é mais tão simples. Poressa razão, nosso ranking faz umamelhoria na classe XMLnode doFlash (sim, isto é possível). Acres-centamos o método “getNodes-ByName” para os nós de XML no

Ranking: funcionalidade em um ActionScript

10. MAIS TREINOExistem várias possibilidades pa-ra você treinar suas habilidadescom o Flash:A. Tente acrescentar pequenos bo-tões ao lado das colunas de pontua-ção. Mostre os botões nos coloca-dos que tiverem endereço de site eesconda-os nos que não tiverem;B. Se você já configurou seu web-server e banco de dados, tente criaruma tabela no banco com os colo-cados. Use sua linguagem favori-ta e reescreva o XML para ser real-mente dinâmico. Não esqueça dealterar na configuração do scripto caminho do XML para algo comoranking.php ou ranking.asp, deacordo com a linguagem de pro-gramação que estiver usando.

O ranking atual obtém todos osvalores do XML numa só tacada —isso funciona bem para algumascentenas de colocados. Se fossemmilhares de itens, seria necessárioobter a lista aos poucos. Difícil?Nada que um flasheiro experientenão possa resolver.

TUTORIAL/ CLASSIFICAÇÃO 23.05.05 18:58 Page 86


COLEÇÃO INFO > 87



esquerda e “proxima” para o da di-reita. Isso é importante porque se obotão não tiver o nome certo não iráfuncionar. Neste tutorial, utilizamosbotões que já vêm com o Flash, acio-nando o menu Window/CommonLibraries/Buttons.

6. FILME NO PALCOAté aqui, tudo foi feito dentro doMovieClip “ranking”. Voltando paraa linha do tempo principal (abaixodos frames, clique em scene1), nos-so projeto fica novamente vazio.Abra a Library (tecle Ctrl+L ou F11),arraste o ranking para a área de tra-balho e ajuste a posição para ficarbonitinho. Tudo o que tínhamos afazer dentro do Flash está pronto.Salve o arquivo. Se quiser enfeitaro documento na linha do tempoprincipal, fique à vontade.

7. O TESTESe você fez tudo certo e salvouseu ranking.fla com o ranking.as e oranking.xml, que entregamos de ban-deja, basta testar, teclando Ctrl+Enter.

Agora que você testou e experi-mentou os botões de próxima e an-terior, vamos entender como tudoisso funciona.

Alguns programadores gostammuito de editar os ActionScrips forado Flash, salvando-os em arquivos.as. Com isso, podemos usar o editorde textos preferido e reaproveitarmais facilmente os mesmos scriptsem vários projetos (é fato que tam-bém se perdem várias facilidades que

Flash. Com esse ajuste fino, fi-ca fácil retornar um arranjocom todos os nós desejados.

Importante: para usar a fun-ção getNodesByName em seusnovos arquivos .fla com XML,não esqueça de incluir o códi-go que expande a funcionali-dade do XMLnode.

Arraste o arquivo ranking.xmlpara seu navegador favoritoe veja como ele é organizado.Existem vários nomes com acen-tuação e com diferentes compri-mentos. Em seus projetos, produ-za arquivos de teste variados, co-mo o ranking.xml. Isso ajuda aidentificar problemas muito maisrapidamente do que se tivesse es-crito “nome1 a nomeX”. Veja tam-bém que o XML pode conter infor-mações adicionais que você nãoesteja usando — é o caso dos en-dereços de site, existentes em ape-nas três colocados.

9. CÓDIGO .ASO código ranking.as possui comen-tários explicativos. Primeiro, definem-se todas as funções. Só no final é quemandamos carregar o XML, e tudoacontece a partir daí.

Tudo está amarrado com o Mo-vieClip “ranking”. Você tem totalliberdade para criar o que quiserna linha do tempo principal, semse preocupar com nomes de variá-veis. No momento em que o rankingaparecer na linha do tempo, ele fa-rá seu trabalho.

o editor interno do Flash oferece).Note que, por meio de um só ar-

quivo de ActionScript, também pu-demos criar toda a funcionalida-de do projeto, em vez de ter o có-digo espalhado dentro do Flash,em vários objetos. Mas para queisso tudo funcione é muito impor-tante que cada objeto tenha seupróprio nome. Por meio dos no-mes pode-se programar o compor-tamento de cada item, e alterarseus valores e propriedades.

8. UM XML MELHORADOGrosso modo, o XML nada mais édo que um arquivo de texto ondeas informações são descritas e or-ganizadas. Por meio de tags (o quelembra muito um HTML), cria-seuma hierarquia de dados. Uma in-formação pode ser a mãe de outrasinformações, como numa árvoregenealógica. O nome correto paracada participante dessa árvore é nó(node, em inglês).

Para o Flash mostrar informaçõesde um XML deve-se primeiro car-regar o XML, o que é fácil. Depois,caminha-se de um nó para outropela hierarquia. Cada nó dá acessoaos seus filhos através de proprieda-des como childNodes, ou firstChild.Então já não é mais tão simples. Poressa razão, nosso ranking faz umamelhoria na classe XMLnode doFlash (sim, isto é possível). Acres-centamos o método “getNodes-ByName” para os nós de XML no

Ranking: funcionalidade em um ActionScript

10. MAIS TREINOExistem várias possibilidades pa-ra você treinar suas habilidadescom o Flash:A. Tente acrescentar pequenos bo-tões ao lado das colunas de pontua-ção. Mostre os botões nos coloca-dos que tiverem endereço de site eesconda-os nos que não tiverem;B. Se você já configurou seu web-server e banco de dados, tente criaruma tabela no banco com os colo-cados. Use sua linguagem favori-ta e reescreva o XML para ser real-mente dinâmico. Não esqueça dealterar na configuração do scripto caminho do XML para algo comoranking.php ou ranking.asp, deacordo com a linguagem de pro-gramação que estiver usando.

O ranking atual obtém todos osvalores do XML numa só tacada —isso funciona bem para algumascentenas de colocados. Se fossemmilhares de itens, seria necessárioobter a lista aos poucos. Difícil?Nada que um flasheiro experientenão possa resolver.

TUTORIAL/ CLASSIFICAÇÃO 23.05.05 18:58

TUTORIAL/E-COMMERCE

COLEÇÃO INFO > 89

TUTORIAL/E-COMMERCE


complexidade do FlashMX 2004 muitas vezesdesanima os iniciantesnos mistérios do desen-

volvimento de sites. Uma opção maissimples é o SWISHmax (www.info.abril.com.br/download/3612.shtml).Esse aplicativo, um shareware daSwishZone, exporta arquivos em for-mato SWF, não tem todos os recur-sos do Flash MX 2004, mas dá contado recado em tarefas menos comple-xas. Este tutorial mostrará como criarum layout de site de comércio eletrô-nico no SWISHmax. Além da homepage, serão criados os layouts das se-ções do site e o sistema de navega-ção. Os arquivos deste exemplo po-dem ser baixados em www.info.abril.com.br/download/4048.shtml.

1. DEFINIR AS DIMENSÕESAbrimos o SWISHmax com um arqui-vo em branco. Nos painéis do cantodireito, clicamos na aba Movie e de-finimos a largura da cena em 700 pi-xels e a altura em 575 pixels. Aindana aba Movie, clicamos em Back-ground Color para escolher a cor defundo — escolhemos um tom de azul.

Acionamos o menu View/Fit Sce-ne in Window para visualizar a cenamelhor. Também clicamos no íconeScene_1, no painel de componentes,e mudamos seu nome para Home.

2. PRIMEIRA BARRAVamos começar o layout pela barrade navegação superior, que contémo logotipo e links para serviços. Pormeio do menu File/Import, importa-mos as imagens do logotipo e dosseis botões que compõem a barra su-perior. As imagens aparecem empi-lhadas. Por isso, clicamos fora delase depois novamente numa das ima-gens para separá-las. Arrastando omouse, clicamos e posicionamos asimagens na parte superior da cena.

Para auxiliar no alinhamento, usa-mos as guias, clicando sobre as ré-guas que contornam a área de tra-balho e arrastando as guias. Nossologotipo tem 60 pixels de altura. Porisso, a barra superior terá 70 pixels.

3. SEGUNDA BARRAPassamos para a segunda barra denavegação, que fica abaixo da cria-da no passo 2 e contém os links pa-

LOJA COM UMFLASH SIMPLES

VEJA COMO CRIAR PÁGINAS NO SWISHMAX, UM SUBSTITUTODESCOMPLICADO PARA O FLASH MX 2004

POR ANDRÉ CARDOZO

A

ra as quatro seções do site: câmeras,celulares, armazenamento e televi-sores. Clicamos na ferramenta retân-gulo. Surge o painel Shape. Nele, al-teramos a cor do retângulo a ser de-senhado — usamos o hexadecimalFF8200, um tom de laranja. Tambémincluímos uma borda preta de espes-sura 1. Desenhamos então um retân-gulo de 20 pixels de altura e 700 delargura logo abaixo do logotipo.

4. MIOLO DA PÁGINACom as barras superiores prontas,passamos para o miolo da página.Traçamos um retângulo branco coma borda preta de espessura 1 para co-brir toda a parte inferior da cena,abaixo da barra laranja do passo an-terior. Nossa home agora tem trêsáreas horizontais: uma de cor azul,uma segunda faixa estreita laranja euma grande área branca.

Nessa área branca, vamos fazer, àesquerda, o menu vertical com linkscomplementares. Esse menu terá omesmo tom de azul da barra em que

está o logotipo. Por isso, desenha-mos um retângulo de cor 529ACE (omesmo valor usado no passo 1), 145pixels de largura e a altura necessá-ria para chegar até o fim da cena.Com isso, criamos uma área de corazul do lado esquerdo da tela.

5. IMPORTAÇÃO DE IMAGENSA área branca na parte central serápreenchida com imagens de produ-tos e seus respectivos textos descri-tivos e preços. Com o auxílio das guias,dividimos a área branca em três par-tes iguais. Nelas, usamos novamen-te o menu File/Import para importaras imagens dos produtos e as distri-buímos igualmente pela cena.

6. OS TEXTOSHaverá textos nos menus horizontale vertical e no miolo da cena paradescrever os produtos. Para inseriros itens do menu lateral, clicamos naferramenta de texto, indicada peloícone T na barra de ferramentas. Sur-ge, à direita da área de trabalho, o

painel Text, com umagrande área em brancopara entrada de texto. Di-gitamos ali o texto do me-nu lateral, com catego-rias e subcategorias.Usando as caixas de op-ção logo acima da áreade texto, escolhemos afonte e o tamanho, nonosso caso Verdana 12.

Depois de tudo prontono painel Text, clicamosImagens: propriedades são exibidas no painel Shape

TUTORIAL/ E-COMMERCE 23.05.05 17:52 Page 88

TUTORIAL/E-COMMERCE

COLEÇÃO INFO > 89

TUTORIAL/E-COMMERCE


complexidade do FlashMX 2004 muitas vezesdesanima os iniciantesnos mistérios do desen-

volvimento de sites. Uma opção maissimples é o SWISHmax (www.info.abril.com.br/download/3612.shtml).Esse aplicativo, um shareware daSwishZone, exporta arquivos em for-mato SWF, não tem todos os recur-sos do Flash MX 2004, mas dá contado recado em tarefas menos comple-xas. Este tutorial mostrará como criarum layout de site de comércio eletrô-nico no SWISHmax. Além da homepage, serão criados os layouts das se-ções do site e o sistema de navega-ção. Os arquivos deste exemplo po-dem ser baixados em www.info.abril.com.br/download/4048.shtml.

1. DEFINIR AS DIMENSÕESAbrimos o SWISHmax com um arqui-vo em branco. Nos painéis do cantodireito, clicamos na aba Movie e de-finimos a largura da cena em 700 pi-xels e a altura em 575 pixels. Aindana aba Movie, clicamos em Back-ground Color para escolher a cor defundo — escolhemos um tom de azul.

Acionamos o menu View/Fit Sce-ne in Window para visualizar a cenamelhor. Também clicamos no íconeScene_1, no painel de componentes,e mudamos seu nome para Home.

2. PRIMEIRA BARRAVamos começar o layout pela barrade navegação superior, que contémo logotipo e links para serviços. Pormeio do menu File/Import, importa-mos as imagens do logotipo e dosseis botões que compõem a barra su-perior. As imagens aparecem empi-lhadas. Por isso, clicamos fora delase depois novamente numa das ima-gens para separá-las. Arrastando omouse, clicamos e posicionamos asimagens na parte superior da cena.

Para auxiliar no alinhamento, usa-mos as guias, clicando sobre as ré-guas que contornam a área de tra-balho e arrastando as guias. Nossologotipo tem 60 pixels de altura. Porisso, a barra superior terá 70 pixels.

3. SEGUNDA BARRAPassamos para a segunda barra denavegação, que fica abaixo da cria-da no passo 2 e contém os links pa-

LOJA COM UMFLASH SIMPLES

VEJA COMO CRIAR PÁGINAS NO SWISHMAX, UM SUBSTITUTODESCOMPLICADO PARA O FLASH MX 2004

POR ANDRÉ CARDOZO

A

ra as quatro seções do site: câmeras,celulares, armazenamento e televi-sores. Clicamos na ferramenta retân-gulo. Surge o painel Shape. Nele, al-teramos a cor do retângulo a ser de-senhado — usamos o hexadecimalFF8200, um tom de laranja. Tambémincluímos uma borda preta de espes-sura 1. Desenhamos então um retân-gulo de 20 pixels de altura e 700 delargura logo abaixo do logotipo.

4. MIOLO DA PÁGINACom as barras superiores prontas,passamos para o miolo da página.Traçamos um retângulo branco coma borda preta de espessura 1 para co-brir toda a parte inferior da cena,abaixo da barra laranja do passo an-terior. Nossa home agora tem trêsáreas horizontais: uma de cor azul,uma segunda faixa estreita laranja euma grande área branca.

Nessa área branca, vamos fazer, àesquerda, o menu vertical com linkscomplementares. Esse menu terá omesmo tom de azul da barra em que

está o logotipo. Por isso, desenha-mos um retângulo de cor 529ACE (omesmo valor usado no passo 1), 145pixels de largura e a altura necessá-ria para chegar até o fim da cena.Com isso, criamos uma área de corazul do lado esquerdo da tela.

5. IMPORTAÇÃO DE IMAGENSA área branca na parte central serápreenchida com imagens de produ-tos e seus respectivos textos descri-tivos e preços. Com o auxílio das guias,dividimos a área branca em três par-tes iguais. Nelas, usamos novamen-te o menu File/Import para importaras imagens dos produtos e as distri-buímos igualmente pela cena.

6. OS TEXTOSHaverá textos nos menus horizontale vertical e no miolo da cena paradescrever os produtos. Para inseriros itens do menu lateral, clicamos naferramenta de texto, indicada peloícone T na barra de ferramentas. Sur-ge, à direita da área de trabalho, o

painel Text, com umagrande área em brancopara entrada de texto. Di-gitamos ali o texto do me-nu lateral, com catego-rias e subcategorias.Usando as caixas de op-ção logo acima da áreade texto, escolhemos afonte e o tamanho, nonosso caso Verdana 12.

Depois de tudo prontono painel Text, clicamosImagens: propriedades são exibidas no painel Shape

TUTORIAL/ E-COMMERCE 23.05.05 17:52

TUTORIAL/E-COMMERCE

COLEÇÃO INFO > 91

TUTORIAL/E-COMMERCE


na área do menu lateralpara aplicar o texto e ar-rastamos o mouse até alargura desejada.

Novamente, clicamosna ferramenta de texto eusamos o painel Text pa-ra criar as chamadas dosprodutos. Copiamos e co-lamos a caixa de texto doprimeiro produto, alteran-do as descrições e as po-sições na área de traba-lho até que todas as seis imagens te-nham seus textos.

Os últimos textos a serem inseri-dos são os da barra de navegaçãohorizontal. Clicamos na ferramentade texto e usamos o painel Text pa-ra digitar o título das seções. Usamosa fonte Verdana branca e o tamanho12. Copiamos e colamos a caixa doprimeiro nome de seção para facili-tar a inserção dos outros textos.

7. BOTÕES DE NAVEGAÇÃOPara completar a home, faltam ape-nas os botões que permitirão a na-vegação entre as seções do site. Elesserão transparentes e ficarão sobreos nomes da barra de navegação.

Para criar o primeiro botão, aces-samos o menu Insert/Button. Surgeum quadrado azul e, do lado esquer-do, na janela de componentes, apa-rece um ícone de nome Button.

Arrastamos o quadrado para cimada palavra “Câmeras”, no menu ho-rizontal, e usamos as alças pararedimensioná-lo, cobrindo a palavra.

Com o ícone Button selecionado najanela de componentes, acionamoso menu Modify/Grouping/Group asButton. O quadrado muda de forma,indicando que é agora um botão.

Com o quadrado selecionado, cli-camos na aba Script, acionamos omodo Expert e digitamos o seguintetrecho abaixo:on(press) {gotoSceneAndStop(“cameras”, 1);}

Com isso, criamos um botão trans-parente que, ao ser clicado, envia ointernauta à cena “cameras”, que cor-responde à seção Câmeras do site.

8. MAIS BOTÕESPara facilitar a criação dos outros bo-tões, apenas copiamos e colamos obotão criado no passo anterior. A úni-ca alteração a ser feita é na janela descript. Substituímos a palavra “came-ras” pelo nome das cenas correspon-dentes às outras seções do site. As-sim, temos os seguintes códigos pa-ra os botões das outras três seções:

on(press) {gotoSceneAndStop(“armazenamento”, 1);}on(press) {gotoSceneAndStop(“celulares”, 1);}on(press) {gotoSceneAndStop(“televisores”,1);}

Criamos um quinto botão e o po-sicionamos sobre o logo para que ousuário possa retornar à home. Naaba script, inserimos o código:on(press) {gotoSceneAndStop(“home”, 1);}Este é o link para a home do site.

9. QUATRO SEÇÕESA home page está pronta. Vamos pa-ra as páginas das quatro seções dosite: Câmeras, Celulares, Armazena-mento e Televisores. Co-mo as áreas de navega-ção são constantes, mu-damos apenas o miolo dacena. Para a criação daseção de câmeras, clica-mos, com o botão direi-to, na raiz da cena “ho-me”, no painel de com-ponentes, e ativamos aopção Copy Scene. De-pois, clicamos, com o bo-tão direito, em qualquerlugar da janela de com-ponentes e escolhemosPaste Scene.

Damos o nome de “cameras” à no-va cena e apagamos todos os obje-tos do miolo. A seção destacará trêsmodelos. Por isso, usamos guias pa-ra dividir o miolo da cena em trêspartes. Depois, acionamos o menuFile/Import para inserir as imagens.

10. AS DESCRIÇÕESCom as imagens posicionadas, inse-rimos a descrição do primeiro pro-duto. Digitamos o texto no painel Texte clicamos e arrastamos o mouse pa-ra aplicar a descrição. A página decâmeras está pronta. Aproveitamosa estrutura dela para criar as outras.Para fazer isso, ativamos a opção CopyScene e, depois, Paste Scene. Faze-mos isso três vezes. Selecionamoscada cena e teclamos F2 pararenomeá-las como “armazenamen-to”, “televisores” e “celulares”. Entra-mos em cada uma e editamos textose imagens e salvamos o arquivo.

Resultado: o site é aberto dentro do Flash Player

Diagramação: guias auxiliam no posicionamento

TUTORIAL/ E-COMMERCE 23.05.05 17:53 Page 90

TUTORIAL/E-COMMERCE

COLEÇÃO INFO > 91

TUTORIAL/E-COMMERCE


na área do menu lateralpara aplicar o texto e ar-rastamos o mouse até alargura desejada.

Novamente, clicamosna ferramenta de texto eusamos o painel Text pa-ra criar as chamadas dosprodutos. Copiamos e co-lamos a caixa de texto doprimeiro produto, alteran-do as descrições e as po-sições na área de traba-lho até que todas as seis imagens te-nham seus textos.

Os últimos textos a serem inseri-dos são os da barra de navegaçãohorizontal. Clicamos na ferramentade texto e usamos o painel Text pa-ra digitar o título das seções. Usamosa fonte Verdana branca e o tamanho12. Copiamos e colamos a caixa doprimeiro nome de seção para facili-tar a inserção dos outros textos.

7. BOTÕES DE NAVEGAÇÃOPara completar a home, faltam ape-nas os botões que permitirão a na-vegação entre as seções do site. Elesserão transparentes e ficarão sobreos nomes da barra de navegação.

Para criar o primeiro botão, aces-samos o menu Insert/Button. Surgeum quadrado azul e, do lado esquer-do, na janela de componentes, apa-rece um ícone de nome Button.

Arrastamos o quadrado para cimada palavra “Câmeras”, no menu ho-rizontal, e usamos as alças pararedimensioná-lo, cobrindo a palavra.

Com o ícone Button selecionado najanela de componentes, acionamoso menu Modify/Grouping/Group asButton. O quadrado muda de forma,indicando que é agora um botão.

Com o quadrado selecionado, cli-camos na aba Script, acionamos omodo Expert e digitamos o seguintetrecho abaixo:on(press) {gotoSceneAndStop(“cameras”, 1);}

Com isso, criamos um botão trans-parente que, ao ser clicado, envia ointernauta à cena “cameras”, que cor-responde à seção Câmeras do site.

8. MAIS BOTÕESPara facilitar a criação dos outros bo-tões, apenas copiamos e colamos obotão criado no passo anterior. A úni-ca alteração a ser feita é na janela descript. Substituímos a palavra “came-ras” pelo nome das cenas correspon-dentes às outras seções do site. As-sim, temos os seguintes códigos pa-ra os botões das outras três seções:

on(press) {gotoSceneAndStop(“armazenamento”, 1);}on(press) {gotoSceneAndStop(“celulares”, 1);}on(press) {gotoSceneAndStop(“televisores”,1);}

Criamos um quinto botão e o po-sicionamos sobre o logo para que ousuário possa retornar à home. Naaba script, inserimos o código:on(press) {gotoSceneAndStop(“home”, 1);}Este é o link para a home do site.

9. QUATRO SEÇÕESA home page está pronta. Vamos pa-ra as páginas das quatro seções dosite: Câmeras, Celulares, Armazena-mento e Televisores. Co-mo as áreas de navega-ção são constantes, mu-damos apenas o miolo dacena. Para a criação daseção de câmeras, clica-mos, com o botão direi-to, na raiz da cena “ho-me”, no painel de com-ponentes, e ativamos aopção Copy Scene. De-pois, clicamos, com o bo-tão direito, em qualquerlugar da janela de com-ponentes e escolhemosPaste Scene.

Damos o nome de “cameras” à no-va cena e apagamos todos os obje-tos do miolo. A seção destacará trêsmodelos. Por isso, usamos guias pa-ra dividir o miolo da cena em trêspartes. Depois, acionamos o menuFile/Import para inserir as imagens.

10. AS DESCRIÇÕESCom as imagens posicionadas, inse-rimos a descrição do primeiro pro-duto. Digitamos o texto no painel Texte clicamos e arrastamos o mouse pa-ra aplicar a descrição. A página decâmeras está pronta. Aproveitamosa estrutura dela para criar as outras.Para fazer isso, ativamos a opção CopyScene e, depois, Paste Scene. Faze-mos isso três vezes. Selecionamoscada cena e teclamos F2 pararenomeá-las como “armazenamen-to”, “televisores” e “celulares”. Entra-mos em cada uma e editamos textose imagens e salvamos o arquivo.

Resultado: o site é aberto dentro do Flash Player

Diagramação: guias auxiliam no posicionamento

TUTORIAL/ E-COMMERCE 23.05.05 17:53

TUTORIAL/RSS

92 < COLEÇÃO INFO

odo webmaster faz o quepode para atrair sempremais visitantes para o si-te. Um modo de conquis-

ta bom e barato é o RSS. Criado em1999 pela Netscape, esse padrão fa-cilita a distribuição de conteúdo e pe-de pouco conhecimento técnico. Porisso, é uma boa opção para aumen-tar a visibilidade do site sem gastarmuito tempo ou dinheiro.

Baseado em XML, o RSS é ade-quado para websites com atualiza-ções freqüentes, como serviços denotícias e classificados. O funciona-mento é simples: o webmaster criao arquivo com oslinks das atualiza-ções do site e o pu-blica em seu servi-dor. Na outra ponta,o internauta usa umcliente RSS, como oamphetaDesk e oAwasu, para buscaras atualizações maisrecentes dos canaisque configurou.

Muito mais difícildo que criar o ar-

quivo RSS é saber qual versão usar.Há cerca de dez, e a própria siglaRSS pode significar Really SimpleSyndication, RDF Site Summary ouRich Site Summary, dependendo daversão adotada.

O exemplo deste tutorial foi cria-do com base no padrão 0.91, o maispopular e simples dos formatos,mesmo depois de lançada a versão2.0. O arquivo está disponível paradownload no endereço www.info.abril.com.br/download/3534.shtml. Quem conhece um pouco deHTML entenderá facilmente a sinta-xe. Vamos agora detalhar o docu-

SITE ESPERTOLÊ OS FEEDS

O RSS É UMA ÓTIMA FERRAMENTA PARA ATRAIR VISITANTES E TAMBÉM ATUALIZAR O SITE

POR ANDRÉ CARDOZO

T

amphetaDesk: cliente de RSS simples traz notícias da INFO

TUTORIAL/RSS


mento. Ele tem três partes básicas:versões, identificação e notícias.

1. AS VERSÕESO primeiro passo é informar as ver-sões do XML e do RSS utilizadas nodocumento com as seguintes tags:

<?xml version=“1.0” encoding=“ISO-8859-1” ?><!DOCTYPE rss PUBLIC “-//Netscape Communications//DTD RSS 0.91//EN” “http://my.netscape.com/publish/formats/rss-0.91. dtd”><rss version=”0.91”>

Na primeiratag, o parâmetroencoding=“ISO-8859-1” é usadopara evitar pro-blemas com cedi-lha e acentos. Osegundo comando especifica a DTD(Document Type Definition) usadano documento. Na última linha, te-mos a versão do RSS.

2. A IDENTIFICAÇÃONo segundo bloco, fornecemos in-formações do site, como título, URLe descrição. Esses dados serão exi-bidos quando o internauta abrir oarquivo no seu cliente RSS.

<channel><title>Plantão INFO</title><link>http://info.abril.com.br/</link>

<description>Tecnologia com imaginação</description><language>pt-br</language><copyright>Copyright: (C) Editora Abril SA</copyright>

O comando <channel> é obriga-tório em arquivos RSS. Ele só seráfechado (</channel>) no final do do-cumento, depois de todos os itens.Os outros comandos especificam asprincipais características do site.

3. AS NOTÍCIASNa terceira parte, fornecemos os tí-tulos, links e descrições das notícias

publicadas. Cadanotícia fica conti-da entre os rótu-los <item> e</item>, comopodemos obser-var a seguir.

<item><title>Script kiddie brasileiro é preso no Japão</title><link>http://info.abril.com.br/aberto/infonews/112003/03112003-5.shl</link><description>Um adolescente bra-sileiro de 17 anos foi preso no Ja-pão, acusado de participação na in-vasão de 1 032 sites. </description></item><item><title>MIT fecha sistema alternati-vo de peer-to-peer</title><link>http://info.abril.com.br/aberto/infonews/112003/

SHTML tambémtem vez

Se as páginas do seu site utilizam SSI(shtml), você não precisa

convertê-las para PHP. Basta incluiro script da seguinte forma:



TUTORIAL/ RSS 24.05.05 12:43 Page 92

TUTORIAL/RSS

92 < COLEÇÃO INFO

odo webmaster faz o quepode para atrair sempremais visitantes para o si-te. Um modo de conquis-

ta bom e barato é o RSS. Criado em1999 pela Netscape, esse padrão fa-cilita a distribuição de conteúdo e pe-de pouco conhecimento técnico. Porisso, é uma boa opção para aumen-tar a visibilidade do site sem gastarmuito tempo ou dinheiro.

Baseado em XML, o RSS é ade-quado para websites com atualiza-ções freqüentes, como serviços denotícias e classificados. O funciona-mento é simples: o webmaster criao arquivo com oslinks das atualiza-ções do site e o pu-blica em seu servi-dor. Na outra ponta,o internauta usa umcliente RSS, como oamphetaDesk e oAwasu, para buscaras atualizações maisrecentes dos canaisque configurou.

Muito mais difícildo que criar o ar-

quivo RSS é saber qual versão usar.Há cerca de dez, e a própria siglaRSS pode significar Really SimpleSyndication, RDF Site Summary ouRich Site Summary, dependendo daversão adotada.

O exemplo deste tutorial foi cria-do com base no padrão 0.91, o maispopular e simples dos formatos,mesmo depois de lançada a versão2.0. O arquivo está disponível paradownload no endereço www.info.abril.com.br/download/3534.shtml. Quem conhece um pouco deHTML entenderá facilmente a sinta-xe. Vamos agora detalhar o docu-

SITE ESPERTOLÊ OS FEEDS

O RSS É UMA ÓTIMA FERRAMENTA PARA ATRAIR VISITANTES E TAMBÉM ATUALIZAR O SITE

POR ANDRÉ CARDOZO

T

amphetaDesk: cliente de RSS simples traz notícias da INFO

TUTORIAL/RSS


mento. Ele tem três partes básicas:versões, identificação e notícias.

1. AS VERSÕESO primeiro passo é informar as ver-sões do XML e do RSS utilizadas nodocumento com as seguintes tags:

<?xml version=“1.0” encoding=“ISO-8859-1” ?><!DOCTYPE rss PUBLIC “-//Netscape Communications//DTD RSS 0.91//EN” “http://my.netscape.com/publish/formats/rss-0.91. dtd”><rss version=”0.91”>

Na primeiratag, o parâmetroencoding=“ISO-8859-1” é usadopara evitar pro-blemas com cedi-lha e acentos. Osegundo comando especifica a DTD(Document Type Definition) usadano documento. Na última linha, te-mos a versão do RSS.

2. A IDENTIFICAÇÃONo segundo bloco, fornecemos in-formações do site, como título, URLe descrição. Esses dados serão exi-bidos quando o internauta abrir oarquivo no seu cliente RSS.

<channel><title>Plantão INFO</title><link>http://info.abril.com.br/</link>

<description>Tecnologia com imaginação</description><language>pt-br</language><copyright>Copyright: (C) Editora Abril SA</copyright>

O comando <channel> é obriga-tório em arquivos RSS. Ele só seráfechado (</channel>) no final do do-cumento, depois de todos os itens.Os outros comandos especificam asprincipais características do site.

3. AS NOTÍCIASNa terceira parte, fornecemos os tí-tulos, links e descrições das notícias

publicadas. Cadanotícia fica conti-da entre os rótu-los <item> e</item>, comopodemos obser-var a seguir.

<item><title>Script kiddie brasileiro é preso no Japão</title><link>http://info.abril.com.br/aberto/infonews/112003/03112003-5.shl</link><description>Um adolescente bra-sileiro de 17 anos foi preso no Ja-pão, acusado de participação na in-vasão de 1 032 sites. </description></item><item><title>MIT fecha sistema alternati-vo de peer-to-peer</title><link>http://info.abril.com.br/aberto/infonews/112003/

SHTML tambémtem vez

Se as páginas do seu site utilizam SSI(shtml), você não precisa

convertê-las para PHP. Basta incluiro script da seguinte forma:



TUTORIAL/ RSS 24.05.05 12:43

empregar scripts para gerar o ar-quivo. Neste exemplo, vamos ins-talar um script no nosso site paramostrar notícias de feeds de outrossites, como o da INFO no exemplo.

A solução é bem simples. Prepa-ramos um script em PHP que irá lerum RSS que especificarmos e mon-tar uma lista de últimas notícias den-tro do seu site. Para montar o script,utilizamos uma classe Feed Reader,criada pelo português José CarlosValente e distribuída como softwa-re livre. No código-fonte, corrigimosum pequeno bug que impedia a lei-tura de textos com mais de uma li-nha. A versão que incluímos entreos arquivos deste tutorial já estácorrigida. Se você quiser ver o có-digo original, pode obtê-lo no en-dereço www.info.abril.com.br/download/4178.shtml. Essa clas-se é o bastante para passar o ende-

TUTORIAL/RSS

COLEÇÃO INFO > 95

TUTORIAL/RSS


03112003-0.shl</link><description>O MIT anunciou o fe-chamento da rede criada por doisde seus alunos para o acesso à co-leção de CDs da universidade. </description></item>

No exemplo acima, temos títu-lo, link e descrição de dois itens.Após terminarmos a lista de itens,fechamos o arquivo com os seguin-tes comandos: </channel></rss>

Pronto, o RSS já pode ser publi-cado no servidor.

4. A ATUALIZAÇÃOAté o passo 3, os dados foram inse-ridos manualmente para ficar maisclaro o modo como o RSS funciona.Mas, em sites dinâmicos, podemos

Links acertados, tags em seudevido lugar. Seu arquivo RSSjá está no servidor. Chegou ahora de divulgá-lo. A iniciativamais óbvia é criar um link paraele na página principal do site.Normalmente, arquivos RSSsão identificados por pequenosbotões laranja com o texto“XML”, mas você pode usaroutro padrão. Outraprovidência que dá resultado écadastrar seu RSS em serviços

de busca específicos, comoSyndic8 (www.syndic8.com) eNews Is Free (www.newsisfree.com). Uma terceiramedida é incluir o comando<link rel=“alternate”type=“application/rss+xml”title=“RSS”href=“endereço_do_rss”>no <head> de sua home page.Com isso, o RSS é indexadomais facilmente porferramentas de busca.

DIVULGANDO O RSS

de desejar que apareçam as notí-cias, incluindo o seguinte códigoPHP nas páginas do seu site da se-guinte forma:<?include(“infoexame.php”);?>E. Agora que o script já está fun-cionando, você pode alterar coresde fundo, fonte e número de notí-cias que deverão ser exibidas. O pri-meiro passo é abrir o arquivo con-fig.php. Para alterar a cor da pri-meira linha da tabela, onde fica ologo do feed, edite:$design[“headbgcolor”] =“#002F5E”;Para trocar a cor de fundo da tabe-la inteira edite:$design[“tablebgcolor”] = “#FFFFFF”;Para mudar a fonte que deve ser usa-da, altere a linha:$design[“font”] = “Arial, Verdana,Sans-serif”;Para mudar o número de notícias aserem exibidas, mude esta linha:$limite = 10;

reço do RSS, que retornará uma va-riável com todas as informaçõescontidas nele.Vamos instalar as notícias:A. Faça o download do script no en-dereço www.info.abril.com.br/download/4201.shtml e descom-pacte o arquivo dentro do diretó-rio do seu site. Nesse pacote vocêterá três arquivos importantes:class_feedReader.inc.php, que con-tém a classe em PHP utilizada pa-ra ler o feed; config.php, onde es-tão algumas configurações de fon-te e cor, e modelo.php, o arquivofinal de exemplo que irá chamar aclasse e o config.É importante que todos os arqui-vos fiquem no mesmo diretório. B. Abra o arquivo modelo.php e edi-te a linha $caminhorss = “http://info.abril.com.br/aberto/infonews/rssnews.xml”; colocando o endere-ço do RSS que deseja ler.C. Salve o arquivo com um outro no-me, infoexame.php, por exemplo, ecoloque-o na pastaraiz do seu site. Pa-ra visualizar estaparte, acesse http://seusite.com.br/infoexame.php. Oscript irá gerar umatabela com as notí-cias do site da INFO.D. Agora, nas pági-nas do seu site, in-clua o script infoe-xame.php exata-mente no lugar on- Awasu: opções avançadas no gerenciamento de RSS

TUTORIAL/ RSS 23.05.05 19:27 Page 94

empregar scripts para gerar o ar-quivo. Neste exemplo, vamos ins-talar um script no nosso site paramostrar notícias de feeds de outrossites, como o da INFO no exemplo.

A solução é bem simples. Prepa-ramos um script em PHP que irá lerum RSS que especificarmos e mon-tar uma lista de últimas notícias den-tro do seu site. Para montar o script,utilizamos uma classe Feed Reader,criada pelo português José CarlosValente e distribuída como softwa-re livre. No código-fonte, corrigimosum pequeno bug que impedia a lei-tura de textos com mais de uma li-nha. A versão que incluímos entreos arquivos deste tutorial já estácorrigida. Se você quiser ver o có-digo original, pode obtê-lo no en-dereço www.info.abril.com.br/download/4178.shtml. Essa clas-se é o bastante para passar o ende-

TUTORIAL/RSS

COLEÇÃO INFO > 95

TUTORIAL/RSS


03112003-0.shl</link><description>O MIT anunciou o fe-chamento da rede criada por doisde seus alunos para o acesso à co-leção de CDs da universidade. </description></item>

No exemplo acima, temos títu-lo, link e descrição de dois itens.Após terminarmos a lista de itens,fechamos o arquivo com os seguin-tes comandos: </channel></rss>

Pronto, o RSS já pode ser publi-cado no servidor.

4. A ATUALIZAÇÃOAté o passo 3, os dados foram inse-ridos manualmente para ficar maisclaro o modo como o RSS funciona.Mas, em sites dinâmicos, podemos

Links acertados, tags em seudevido lugar. Seu arquivo RSSjá está no servidor. Chegou ahora de divulgá-lo. A iniciativamais óbvia é criar um link paraele na página principal do site.Normalmente, arquivos RSSsão identificados por pequenosbotões laranja com o texto“XML”, mas você pode usaroutro padrão. Outraprovidência que dá resultado écadastrar seu RSS em serviços

de busca específicos, comoSyndic8 (www.syndic8.com) eNews Is Free (www.newsisfree.com). Uma terceiramedida é incluir o comando<link rel=“alternate”type=“application/rss+xml”title=“RSS”href=“endereço_do_rss”>no <head> de sua home page.Com isso, o RSS é indexadomais facilmente porferramentas de busca.

DIVULGANDO O RSS

de desejar que apareçam as notí-cias, incluindo o seguinte códigoPHP nas páginas do seu site da se-guinte forma:<?include(“infoexame.php”);?>E. Agora que o script já está fun-cionando, você pode alterar coresde fundo, fonte e número de notí-cias que deverão ser exibidas. O pri-meiro passo é abrir o arquivo con-fig.php. Para alterar a cor da pri-meira linha da tabela, onde fica ologo do feed, edite:$design[“headbgcolor”] =“#002F5E”;Para trocar a cor de fundo da tabe-la inteira edite:$design[“tablebgcolor”] = “#FFFFFF”;Para mudar a fonte que deve ser usa-da, altere a linha:$design[“font”] = “Arial, Verdana,Sans-serif”;Para mudar o número de notícias aserem exibidas, mude esta linha:$limite = 10;

reço do RSS, que retornará uma va-riável com todas as informaçõescontidas nele.Vamos instalar as notícias:A. Faça o download do script no en-dereço www.info.abril.com.br/download/4201.shtml e descom-pacte o arquivo dentro do diretó-rio do seu site. Nesse pacote vocêterá três arquivos importantes:class_feedReader.inc.php, que con-tém a classe em PHP utilizada pa-ra ler o feed; config.php, onde es-tão algumas configurações de fon-te e cor, e modelo.php, o arquivofinal de exemplo que irá chamar aclasse e o config.É importante que todos os arqui-vos fiquem no mesmo diretório. B. Abra o arquivo modelo.php e edi-te a linha $caminhorss = “http://info.abril.com.br/aberto/infonews/rssnews.xml”; colocando o endere-ço do RSS que deseja ler.C. Salve o arquivo com um outro no-me, infoexame.php, por exemplo, ecoloque-o na pastaraiz do seu site. Pa-ra visualizar estaparte, acesse http://seusite.com.br/infoexame.php. Oscript irá gerar umatabela com as notí-cias do site da INFO.D. Agora, nas pági-nas do seu site, in-clua o script infoe-xame.php exata-mente no lugar on- Awasu: opções avançadas no gerenciamento de RSS

TUTORIAL/ RSS 23.05.05 19:27

TUTORIAL/RSS/PDA

96 < COLEÇÃO INFO

TUTORIAL/RSS/PDA


crescente número dePDAs e smartphonescom conexão à internettorna quase obrigatório

que os websites ofereçam páginasespecíficas para esses dispositivos.Com telas pequenas e navegadoresque, em boa parte, não suportam CSS,DHTML, JavaScript ou Flash, essesequipamentos requerem páginas sim-plificadas para uma boa visualização.Na maioria das vezes, o que se dese-ja é aproveitar o conteúdo existenteno site e formatá-lo, criando uma ver-são para telas pequenas. É o que va-mos fazer neste tutorial.

Há várias soluções possíveis paraisso. Neste exemplo, vamos partirde um site de notícias e gerar umaversão para handheld desse conteú-do. Para isso, vamos aproveitar ofluxo de notícias produzido em for-mato RSS no tutorial da página 92.Depois, vamos empregar uma clas-se em PHP para extrair as notíciasdo RSS. Essa classe será usada porum script, também em PHP, paramontar as páginas HTML simplifica-das. Para acompanhar o tutorial, fa-ça o download dos arquivos neces-

NOTÍCIASNO PALMTOP

UM PASSO-A-PASSO PARA PRODUZIR UMA VERSÃO PARA HANDHELD DE UM SITE COM NOTICIÁRIO

POR MAURÍCIO GREGO

O

maioria dos handhelds atuais. Essapágina contém os links para quatroseções de notícias que, em nossoexemplo chamamos de TI, E-business,Tecnologia Pessoal e Internet, res-pectivamente. Cada um desses qua-tro links leva a um arquivo PHP quevai gerar o índice de notícias corres-pondente àquela seção. Vamos usarum arquivo RSS diferente para cadaseção. Como o procedimento é o mes-mo nas quatro, vamos descrever, nospróximos passos, a construção deuma das seções. Basta replicar os ar-quivos PHP, alterando título e origemdo RSS em cada um deles, para ob-ter as outras três seções.

2. O ARQUIVOA maneira de produzir o RSS variaconforme o caso. Quem possui um si-te dinâmico pode empregar scriptspara gerá-lo. Além disso, muitos ge-renciadores de conteúdo incluem aopção de saída em RSS. No nossoexemplo, vamos repetir os procedi-mentos do tutorial da página 92 pa-ra montar a estrutura de um arquivoRSS básico. Nos próximos passos, va-mos ver como extrair as notícias de-le e montar a versão para handhelds.

3. AS CONFIGURAÇÕES Para extrair as notícias, usamos umaclasse Feed Reader. E para que aclasse funcione, é preciso criar o ar-quivo config.php. Ele deve ficar nomesmo diretório do servidor HTTPonde estão os arquivos class_feed-Reader.inc.php e handheld.php.

No arquivo config.php, coloqueo endereço do seu arquivo RSS. Po-de ser um caminho local (exemplo:/home/site/www/rss.xml) ou umendereço na internet (exemplo:http://www.site.com.br/rss.xml).No nosso exemplo, vamos apontarpara um arquivo na mesma pasta:$caminhorss[] = “rss_ti.xml”;

Nosso script possibilita agregarnotícias de vários arquivos RSS nu-ma mesma página para handheld.Para isso, basta repetir a linha aci-ma para cada RSS, especificando onome do arquivo correspondente.

Depois de definir a localização doRSS, acerte as cores de fundo, o tí-tulo da página e a fonte de carac-teres acrescentando esses coman-dos ao arquivo config.php:$design[“title”] = “Notícias de TI”;$design[“logo”] = “greatfun.gif”;$design[“bodybgcolor”] =Lista de notícias: em HTML estático

Texto da notícia: gerado por um script

sários no endereço www.info.abril.com.br/download/4180.shtml. Pa-ra ver o site que montamos comoexemplo, faça o upload desses ar-quivos para um servidor da web comPHP 4 ou mais recente instalado.

1. A ESTRUTURANosso site para handheld tem umapágina inicial, handheld.html, produ-zida em HTML puro. É uma páginasimples onde todos os elementos es-tão contidos numa tabela com 300pixels de largura. Esse é um tama-nho adequado para visualização na

TUTORIAL/RSS/PDA1 23.05.05 18:56 Page 96

TUTORIAL/RSS/PDA

96 < COLEÇÃO INFO

TUTORIAL/RSS/PDA


crescente número dePDAs e smartphonescom conexão à internettorna quase obrigatório

que os websites ofereçam páginasespecíficas para esses dispositivos.Com telas pequenas e navegadoresque, em boa parte, não suportam CSS,DHTML, JavaScript ou Flash, essesequipamentos requerem páginas sim-plificadas para uma boa visualização.Na maioria das vezes, o que se dese-ja é aproveitar o conteúdo existenteno site e formatá-lo, criando uma ver-são para telas pequenas. É o que va-mos fazer neste tutorial.

Há várias soluções possíveis paraisso. Neste exemplo, vamos partirde um site de notícias e gerar umaversão para handheld desse conteú-do. Para isso, vamos aproveitar ofluxo de notícias produzido em for-mato RSS no tutorial da página 92.Depois, vamos empregar uma clas-se em PHP para extrair as notíciasdo RSS. Essa classe será usada porum script, também em PHP, paramontar as páginas HTML simplifica-das. Para acompanhar o tutorial, fa-ça o download dos arquivos neces-

NOTÍCIASNO PALMTOP

UM PASSO-A-PASSO PARA PRODUZIR UMA VERSÃO PARA HANDHELD DE UM SITE COM NOTICIÁRIO

POR MAURÍCIO GREGO

O

maioria dos handhelds atuais. Essapágina contém os links para quatroseções de notícias que, em nossoexemplo chamamos de TI, E-business,Tecnologia Pessoal e Internet, res-pectivamente. Cada um desses qua-tro links leva a um arquivo PHP quevai gerar o índice de notícias corres-pondente àquela seção. Vamos usarum arquivo RSS diferente para cadaseção. Como o procedimento é o mes-mo nas quatro, vamos descrever, nospróximos passos, a construção deuma das seções. Basta replicar os ar-quivos PHP, alterando título e origemdo RSS em cada um deles, para ob-ter as outras três seções.

2. O ARQUIVOA maneira de produzir o RSS variaconforme o caso. Quem possui um si-te dinâmico pode empregar scriptspara gerá-lo. Além disso, muitos ge-renciadores de conteúdo incluem aopção de saída em RSS. No nossoexemplo, vamos repetir os procedi-mentos do tutorial da página 92 pa-ra montar a estrutura de um arquivoRSS básico. Nos próximos passos, va-mos ver como extrair as notícias de-le e montar a versão para handhelds.

3. AS CONFIGURAÇÕES Para extrair as notícias, usamos umaclasse Feed Reader. E para que aclasse funcione, é preciso criar o ar-quivo config.php. Ele deve ficar nomesmo diretório do servidor HTTPonde estão os arquivos class_feed-Reader.inc.php e handheld.php.

No arquivo config.php, coloqueo endereço do seu arquivo RSS. Po-de ser um caminho local (exemplo:/home/site/www/rss.xml) ou umendereço na internet (exemplo:http://www.site.com.br/rss.xml).No nosso exemplo, vamos apontarpara um arquivo na mesma pasta:$caminhorss[] = “rss_ti.xml”;

Nosso script possibilita agregarnotícias de vários arquivos RSS nu-ma mesma página para handheld.Para isso, basta repetir a linha aci-ma para cada RSS, especificando onome do arquivo correspondente.

Depois de definir a localização doRSS, acerte as cores de fundo, o tí-tulo da página e a fonte de carac-teres acrescentando esses coman-dos ao arquivo config.php:$design[“title”] = “Notícias de TI”;$design[“logo”] = “greatfun.gif”;$design[“bodybgcolor”] =Lista de notícias: em HTML estático

Texto da notícia: gerado por um script

sários no endereço www.info.abril.com.br/download/4180.shtml. Pa-ra ver o site que montamos comoexemplo, faça o upload desses ar-quivos para um servidor da web comPHP 4 ou mais recente instalado.

1. A ESTRUTURANosso site para handheld tem umapágina inicial, handheld.html, produ-zida em HTML puro. É uma páginasimples onde todos os elementos es-tão contidos numa tabela com 300pixels de largura. Esse é um tama-nho adequado para visualização na

TUTORIAL/RSS/PDA1 23.05.05 18:56

TUTORIAL/RSS/PDA


“#493F2C”;$design[“headbgcolor”] =“#BFB495”;$design[“tablebgcolor”] = “#FFFFFF”;$design[“font”] = “Arial, Verdana,Sans-serif”;

4. O SCRIPTO arquivo handheld.php contém oscript que monta a página HTML pa-ra visualização no handheld. Ele ser-ve tanto para gerar o índice de umaseção de notícias como para produ-zir a página com o texto completo danotícia. Nos dois casos, a página éformada por uma tabela com umacoluna de 300 pixels de largura. Aprimeira linha da tabela contém ográfico do alto da página. As notíciassão inseridas, da segunda linha emdiante, por meio de comandos emPHP. Vejamos como eles funcionam:if(!isset($_REQUEST[“feed”]) && !isset($_REQUEST[“item”]))

Esse comando testa se foi espe-cificada alguma notícia junto com aURL que ativa o script. Se foi, elemonta a página com a notícia. Se-não, gera o índice do noticiário.

5. O ÍNDICEVejamos os comandos usados paraa produção de um índice de notícias:foreach($caminhorss as $url)

Essa instrução especifica que o pro-cesso de inclusão das notícias deveser repetido para cada arquivo RSSa ser usado nessa seção, caso hajamais de um. Em seguida, temos:

$ob=new feedReader();$ob->setFeedUrl($url);$ob->parseFeed();$array=$ob->getFeedOutputData();$number=$ob->getFeedNumber OfNodes();

Na primeira linha acima, carrega-mos a classe feedReader no objeto$ob. Nas duas linhas seguintes, ati-vamos funções internas dessa clas-se para localizar o RSS e extrair asnotícias. Os textos extraídos são car-regados na variável $array, e o nú-mero de notícias, em $number.

Na seqüência, temos o comandoecho, que gera o código HTML cor-respondente a uma das notícias. No-te que ele está dentro de um loopque faz com que seja repetido paracada uma das notícias no RSS.for($i=0;$i<$number;$i++){echo (“<tr><td><font face=\““.$design [“font”].”\”size=\“2\”> <a href=\“handheld.php?feed= “.$f. ”&item=“.$i.”\”>“.$array[“ item”][“title”][$i]. ”</a></font></td></tr>”);}

Observe que o título de cada notí-cia é um link. Quando alguém clicanele, a URL solicitada tem esta forma:http://www.site.com.br/handheld.php?feed=0&item=3

A contagem dos parâmetros feede item começa em zero. Assim, a URLdo exemplo acima vai abrir, no na-vegador, a quarta notícia do primei-ro arquivo RSS. A notícia seleciona-da será exibida com a ajuda do mes-mo script usado para gerar o índice.

TUTORIAL/RSS/PDA1 23.05.05 18:56 Page 98

TUTORIAL/AVALIAÇÃO


rodutos, serviços, dicas,atendimento online, tu-do o que o site oferecepode ser avaliado pelo

internauta por meio de notas. Alémde ser uma atitude simpática, nãotoma tempo do visitante e ajuda odono do site a identificar o que es-tá dando certo e o que tem proble-mas. INFO desenvolveu um scriptchamado Nota para fazer esse tipode avaliação. Para usá-lo, você pre-cisa ter acesso a um servidor web,em qualquer plataforma — Linux,Windows, outros Unix etc. —, noqual esteja instalada a linguagemPHP, pelo menos na versão 3.

1. O FUNCIONAMENTONa página que contém o item a seravaliado, o internauta encontra umquadro com uma chamada como“Qual nota você dá a X ou Y?” Nessequadro também estão uma caixa decombinação com as notas de 0 a 10e um botão de comando para enviara avaliação. Quando ele clica no bo-tão, o script no servidor entra em açãoe mostra uma página pop-up com anova média de avaliação dos inter-nautas, já computada a nota atribuí-da por esse último visitante.

2. O SERVIDORPara usar o script Nota, você precisa

executar duas tarefas. Aprimeira consiste em ins-talar o código PHP noservidor. A outra é colo-car na página do item aser avaliado uma cha-mada para o script. A ins-talação do código é sim-ples. Faça o downloaddos arquivos no site deINFO (www.info.abril.com.br/download/3646.shtml). Extraia os

QUE NOTA OSITE MERECE?

CRIE SCRIPTS EM PHP E JAVASCRIPT PARA O INTERNAUTAFAZER SUA AVALIAÇÃO

POR CARLOS MACHADO, COM FRED CARBONARE

P

Avaliação: o produto recebe nota via menu suspenso

TUTORIAL/AVALIAÇÃO 23.05.05 17:31 Page 99

TUTORIAL/AVALIAÇÃO


arquivos PHP e copie-os para o ser-vidor. São quatro: grava.php, que re-gistra as avaliações num arquivo-textopara cada item; resultado.php, que lêos dados acumulados do item emquestão e exibe a média atual. Há ain-da o arquivo configs.inc.php, respon-sável pela configuração dos diretó-rios de trabalho; e adminnota.php,que oferece ao administrador uma in-terface para incluir novos itens a ava-liar, além de exibir os resultados detodos os itens. Só é preciso configu-rar o arquivo configs.inc.php. Abra-oe edite as linhas que definem as va-riáveis $path, o caminho do diretórioonde estão os scripts; $data_path, pas-ta onde serão gravados os arquivoscom notas de cada item; e $url_path,a pasta onde vão ficar os scripts PHP.

3. A PÁGINA WEBSe você vai incluir o quadro de ava-liação numa página PHP, basta incluirno código a linha: <?include(“http://urldominio/rating/resultado.php?item[ITEM]”);?> Aqui, o valor [ITEM]deve ser trocado por um número di-ferente para cada item avaliado. Es-se número será o nome do arquivoque armazena informações sobre oitem. Exemplo: 12.dat.php. Se sua pá-gina é HTML, use um JavaScript pa-ra disparar a execução do script PHP: <script src=“/rating/resultado.php?item=[ITEM]&tipo=js”></script>

A exibição dos resultados anterio-res é feita mediante o script: <script>MediaNota();</script>

Tanto na página PHP como na

HTML, você vai precisar de um for-mulário com a caixa de combinação(notas de 0 a 10) e o botão de coman-do para o visitante confirmar a ava-liação. Na página PHP, esse formulá-rio é provido automaticamente pelocomando ?include. No caso de páginapadrão HTML, é preciso criar o for-mulário com o nome rating e umacaixa de combinação chamada nota.Isso é feito com o script:<script>ComboVota();</script>

O clique no botão de comando doformulário dispara o script vota, in-cluído na página, que captura a no-ta indicada pelo internauta e o enviaao script grava.php, no servidor. Opacote de arquivos para downloadno site de INFO inclui um exemplode página HTML com os scripts. Ca-so você queira fazer um template di-ferente ou mostrar os resultados deoutra forma, mande o JavaScript im-primir as variáveis rating[‘nota’] erating[‘total_votos’], como no exem-plo <script>document.write(rating[‘nota’]);</script> ou neste outro:<script>document.write(rating[‘total_votos”]);</script>

Se você vai propor a avaliação pa-ra poucos itens — digamos, na faixadas dezenas —, esta solução funcio-na a contento. Para grandes quanti-dades, é aconselhável armazenar osresultados num banco de dados. Nes-se caso, o valor [ITEM] poderá ser oíndice do registro na tabela de da-dos. O formato do quadro com a pro-posta de avaliação (fonte, borda, co-res etc.) fica a seu critério.

TUTORIAL/AVALIAÇÃO 23.05.05 17:30 Page 100

TUTORIAL/NAVEGAÇÃO


m sites com várias sub-divisões, o designermuitas vezes tem difi-culdade em dividir o

conteúdo sem ocupar todo o espa-ço da tela. Uma saída para fugir des-se aperto é criar menus dinâmicos,que se desdobram ao passar domouse. É possível elaborá-los usan-do editores HTML de interface vi-sual. Ou até mesmo “a mão”, se ousuário tiver conhecimento de Ja-vaScript. Mas uma alternativa maisfácil é usar um dos diversos progra-mas especializados nessa função.Neste tutorial, utilizamos o SeltecoMenu Maker 4.0. Aversão de testes fun-ciona por dez dias, oregistro custa 29 dó-lares, e o downloadpode ser feito emwww.info.abril.com.br/download/3430.shtml.

1.A PÁGINA HTMLPara começar, pre-cisamos criar umapágina em HTML, já

reservando espaço para o menu.O exemplo deste tutorial foi ela-borado prevendo um menu na ver-tical, posicionado do lado esquer-do da tela. Criamos uma célula de120 pixels de largura para acomo-dá-lo. O menu também pode serinserido horizontalmente, no altoda tela, por meio do atalho Menu/Style do Selteco.

2. AS CATEGORIASAntes de lidar com o Selteco Me-nu Maker, precisamos saber exa-tamente quais são as categorias esubcategorias do menu para evi-

OS MENUS SEDESDOBRAM

VEJA COMO FAZER BARRAS DE NAVEGAÇÃO INTERATIVAS EM PÁGINAS COM POUCO ESPAÇO

POR ANDRÉ CARDOZO

E

Selteco Menu Maker: formatando as cores do menu

TUTORIAL/ NAVEGAÇÃO 23.05.05 17:36 Page 101


COLEÇÃO INFO > 103



tar correções mais a frente. Noexemplo criado por INFO, temosas seguintes categorias e subcate-gorias: monitores (15 e 17 polega-das), memórias (SDRAM e DDR),placas de vídeo (AGP 4X e 8X) eplacas de som (16 bits e 24 bits).

3. A INTERFACEAbrimos o Selteco Menu Maker pa-ra começar a desenvolver nossomenu. Do lado esquerdo da tela, ousuário cria e apaga categorias esubcategorias, inserindo nome elink para cada uma. O lado direitomostra em tempo real todas as mo-dificações realizadas. A janela Me-nu Properties controla as proprie-dades visuais do menu e será vis-ta em detalhes adiante.

4. OS ITENSAo selecionar um novo projeto, oSelteco mostra alguns itens já con-figurados. Dê um duplo clique ne-les e modifique suas propriedades

para inserir os itensdo menu. Cada itemdeve ter nome e umlink para o arquivoHTML desejado. Nãotem importância seas páginas não esti-verem prontas —precisamos apenasdo nome do arqui-vo. Para criar maiscategorias, bastaacessar o menuEdit/Add Item. Para

adicionar uma subcategoria, mar-que a categoria à qual ela perten-ce e use o mesmo comando.

5. O VISUALAgora o menu contém todas as ca-tegorias e subcategorias previstas.Mas o visual ainda deixa a desejar.Para adaptá-lo ao layout de nossoHTML inicial, usamos a janela Me-nu Properties, acessada por meiodo menu View/Menu Properties. Es-sa janela reúne num só lugar todasas configurações visuais do menu,que podem ser editadas clicandonos respectivos botões.

6. O FUNDO E A FONTEPara alterar as cores de fundo,basta clicar no botão Background,dentro da área Menu Bar. A telaseguinte permite escolher a corvisualmente ou inserir valores dopadrão de cor RGB ou o códigohexadecimal usado no HTML. Pa-ra garantir a integração perfeita

com o arquivo HTML, escolhemoso código hexadecimal da cor usa-da na página (neste exemplo, éCCCCCC, um tom de cinza). Dessaforma, mudamos a cor de fundodas categorias e subcategorias. Pa-ra alterar a tonalidade acionadaquando o mouse está sobre umitem do menu (efeito mouseover),usamos o botão Highlight e repe-timos todo o processo.

Assim como fizemos com a corde fundo, alteramos as proprieda-des da fonte usada nos menus pa-ra adequá-la à página HTML. Paraisso, clicamos nos botões Face eColor, na área Menu Font.

7. A GRAVAÇÃONosso menu agora já tem todas ascategorias, subcategorias e estáadequado ao visual da página. Sal-vamos o arquivo na forma de pro-jeto do Selteco. Assim, se houveralguma modificação no futuro, nãohaverá a necessidade de debulhar

o código JavaScript. Basta abrir no-vamente o projeto e fazer as cor-reções visualmente.

8. A EXPORTAÇÃO DO MENUO Selteco Menu Maker pode expor-tar o menu de duas formas: inse-rido num arquivo HTML ou comoum arquivo JavaScript indepen-dente (com a extensão .js). A se-gunda opção tem a vantagem devaler para todas as páginas do si-te e só ser carregada uma vez pe-lo browser, proporcionando maiorrapidez na navegação. Escolhemosa opção Export JavaScript e salva-mos o arquivo .js no mesmo dire-tório da página HTML para evitarproblemas de caminho.

9. A CHAMADAAgora, falta apenas “chamar” oarquivo JavaScript para a nossapágina original. Para isso, abri-mos o código-fonte do arquivoHTML e inserimos a tag: <script src=

“nomedoarquivo.js”></script> den-tro da célula quecriamos no ladoesquerdo da tela.Pronto, o menudesdobrável já estáfuncionando direi-tinho dentro danossa página. Ago-ra, toda vez que uminternauta acessara página, irá car-regar o JavaScript.

Mais itens: cada um deve ter nome e link para o HTML

Exportação: menu pode ir num arquivo HTML ou JavaScript

TUTORIAL/ NAVEGAÇÃO 23.05.05 17:36 Page 102





tar correções mais a frente. Noexemplo criado por INFO, temosas seguintes categorias e subcate-gorias: monitores (15 e 17 polega-das), memórias (SDRAM e DDR),placas de vídeo (AGP 4X e 8X) eplacas de som (16 bits e 24 bits).

3. A INTERFACEAbrimos o Selteco Menu Maker pa-ra começar a desenvolver nossomenu. Do lado esquerdo da tela, ousuário cria e apaga categorias esubcategorias, inserindo nome elink para cada uma. O lado direitomostra em tempo real todas as mo-dificações realizadas. A janela Me-nu Properties controla as proprie-dades visuais do menu e será vis-ta em detalhes adiante.

4. OS ITENSAo selecionar um novo projeto, oSelteco mostra alguns itens já con-figurados. Dê um duplo clique ne-les e modifique suas propriedades

para inserir os itensdo menu. Cada itemdeve ter nome e umlink para o arquivoHTML desejado. Nãotem importância seas páginas não esti-verem prontas —precisamos apenasdo nome do arqui-vo. Para criar maiscategorias, bastaacessar o menuEdit/Add Item. Para

adicionar uma subcategoria, mar-que a categoria à qual ela perten-ce e use o mesmo comando.

5. O VISUALAgora o menu contém todas as ca-tegorias e subcategorias previstas.Mas o visual ainda deixa a desejar.Para adaptá-lo ao layout de nossoHTML inicial, usamos a janela Me-nu Properties, acessada por meiodo menu View/Menu Properties. Es-sa janela reúne num só lugar todasas configurações visuais do menu,que podem ser editadas clicandonos respectivos botões.

6. O FUNDO E A FONTEPara alterar as cores de fundo,basta clicar no botão Background,dentro da área Menu Bar. A telaseguinte permite escolher a corvisualmente ou inserir valores dopadrão de cor RGB ou o códigohexadecimal usado no HTML. Pa-ra garantir a integração perfeita

com o arquivo HTML, escolhemoso código hexadecimal da cor usa-da na página (neste exemplo, éCCCCCC, um tom de cinza). Dessaforma, mudamos a cor de fundodas categorias e subcategorias. Pa-ra alterar a tonalidade acionadaquando o mouse está sobre umitem do menu (efeito mouseover),usamos o botão Highlight e repe-timos todo o processo.

Assim como fizemos com a corde fundo, alteramos as proprieda-des da fonte usada nos menus pa-ra adequá-la à página HTML. Paraisso, clicamos nos botões Face eColor, na área Menu Font.

7. A GRAVAÇÃONosso menu agora já tem todas ascategorias, subcategorias e estáadequado ao visual da página. Sal-vamos o arquivo na forma de pro-jeto do Selteco. Assim, se houveralguma modificação no futuro, nãohaverá a necessidade de debulhar

o código JavaScript. Basta abrir no-vamente o projeto e fazer as cor-reções visualmente.

8. A EXPORTAÇÃO DO MENUO Selteco Menu Maker pode expor-tar o menu de duas formas: inse-rido num arquivo HTML ou comoum arquivo JavaScript indepen-dente (com a extensão .js). A se-gunda opção tem a vantagem devaler para todas as páginas do si-te e só ser carregada uma vez pe-lo browser, proporcionando maiorrapidez na navegação. Escolhemosa opção Export JavaScript e salva-mos o arquivo .js no mesmo dire-tório da página HTML para evitarproblemas de caminho.

9. A CHAMADAAgora, falta apenas “chamar” oarquivo JavaScript para a nossapágina original. Para isso, abri-mos o código-fonte do arquivoHTML e inserimos a tag: <script src=

“nomedoarquivo.js”></script> den-tro da célula quecriamos no ladoesquerdo da tela.Pronto, o menudesdobrável já estáfuncionando direi-tinho dentro danossa página. Ago-ra, toda vez que uminternauta acessara página, irá car-regar o JavaScript.

Mais itens: cada um deve ter nome e link para o HTML

Exportação: menu pode ir num arquivo HTML ou JavaScript

TUTORIAL/ NAVEGAÇÃO 23.05.05 17:36

TUTORIAL/FORMULÁRIO




s newsletters são umdos bons serviços pres-tados pelos sites de no-tícias. Nada melhor, pa-

ra o usuário, do que abrir a caixade correio eletrônico e encontrarinformações fresquinhas sobre oassunto que lhe interessa. Para aempresa que envia, a visibilidadeé garantida, e a fidelidade, culti-vada. Desenvolvedores de softwa-re, por exemplo, se beneficiam doenvio de boletins sobre as atuali-zações e correções de bugs de seusprogramas. Mas sempre para osusuários cadastrados, é claro.

Neste tutorial, vamos montar nosite um pedido de recebimento deboletim de notícias no Dreamwea-ver. O formulário acessará um ban-co de dados MySQL por meio deum script em PHP. Para testar oformulário localmente, é necessá-rio ter o PHP, o MySQL e um ser-vidor web instalados no sistema.

O banco de dados MySQL pode sercriado por meio de comandos ou deinterfaces gráficas. Aqui, vamos usaro programa SQLyog (disponível noendereço www.info.abril.com.br/download/3232.shtml) para criar obanco de dados.

1. AS TABELASO importante nobanco de dadosdo nosso boletimé que a tabela te-nha quatro cam-pos: id, nome,email e boletim.O campo “id” é achave primária dobanco de dados eaumenta seu va-lor em um a cada

BOLETIM? É COMO DREAMWEAVER

SAIBA COMO MONTAR UM FORMULÁRIO PARA PEDIDO DENEWSLETTER COM MYSQL E PHP

POR ANDRÉ CARDOZO

Anovo registro. Os campos “nome”e “email” recebem os dados de no-me e e-mail do internauta. O cam-po “boletim” aceita apenas valo-res 0 e 1, que correspondem a acei-tar ou não o boletim de notícias.

2. O SITECom o banco de dados montado,vamos definir um site no Dream-weaver. Acionamos o menu Site >Manage Sites e, depois, clicamosno botão New. Na aba Advanced,acessamos a categoria Testing Ser-ver e escolhemos a opção PHPMySQL e o tipo de acesso. Para fi-nalizar, clicamos em OK. Acessa-mos o menu File > New para criarum arquivo novo. Escolhemos o ti-po PHP e clicamos em OK. Depois,usamos as ferramentas do Dream-weaver para fazer o layout.

3. O FORMULÁRIOCom o layout montado, é hora deinserir o formulário. Exibimos a

barra de formulá-rio e clicamos nobotão Form. Digi-tamos a palavra“Nome” e, ao la-do dela, clicamosno botão TextField para inserira primeira caixade texto para oprimeiro campo.Depois, ajusta-mos as proprie-dades da caixa.

Repetimos o procedimento pa-ra o campo de e-mail. Digitamos apalavra, inserimos a caixa e confi-guramos suas propriedades.

4. O PEDIDOO próximo campo é a caixa em queo internauta indica se quer ou nãoreceber o boletim de notícias. Di-gitamos a frase e clicamos na cai-xa Checkbox para inserir a caixade seleção. Damos o nome de “bo-letim” para a caixa.

O último componente do formu-lário é o botão que envia as infor-mações. Clicamos no ícone Buttonda barra de ferramentas e ajusta-mos as propriedades do botão pa-ra completar o formulário. A par-te visual está pronta.

5. A CONEXÃOPara criar a conexão com o bancode dados, acessamos o menu Win-dow > Databases. Clicamos no si-nal de mais do painel e escolhe-Formulário: pedido de entrega de boletim por e-mail

Campos e botão: ajuste de propriedades completa o modelo

TUTORIAL/ FORMULÁRIO 23.05.05 21:19 Page 104





s newsletters são umdos bons serviços pres-tados pelos sites de no-tícias. Nada melhor, pa-

ra o usuário, do que abrir a caixade correio eletrônico e encontrarinformações fresquinhas sobre oassunto que lhe interessa. Para aempresa que envia, a visibilidadeé garantida, e a fidelidade, culti-vada. Desenvolvedores de softwa-re, por exemplo, se beneficiam doenvio de boletins sobre as atuali-zações e correções de bugs de seusprogramas. Mas sempre para osusuários cadastrados, é claro.

Neste tutorial, vamos montar nosite um pedido de recebimento deboletim de notícias no Dreamwea-ver. O formulário acessará um ban-co de dados MySQL por meio deum script em PHP. Para testar oformulário localmente, é necessá-rio ter o PHP, o MySQL e um ser-vidor web instalados no sistema.

O banco de dados MySQL pode sercriado por meio de comandos ou deinterfaces gráficas. Aqui, vamos usaro programa SQLyog (disponível noendereço www.info.abril.com.br/download/3232.shtml) para criar obanco de dados.

1. AS TABELASO importante nobanco de dadosdo nosso boletimé que a tabela te-nha quatro cam-pos: id, nome,email e boletim.O campo “id” é achave primária dobanco de dados eaumenta seu va-lor em um a cada

BOLETIM? É COMO DREAMWEAVER

SAIBA COMO MONTAR UM FORMULÁRIO PARA PEDIDO DENEWSLETTER COM MYSQL E PHP

POR ANDRÉ CARDOZO

Anovo registro. Os campos “nome”e “email” recebem os dados de no-me e e-mail do internauta. O cam-po “boletim” aceita apenas valo-res 0 e 1, que correspondem a acei-tar ou não o boletim de notícias.

2. O SITECom o banco de dados montado,vamos definir um site no Dream-weaver. Acionamos o menu Site >Manage Sites e, depois, clicamosno botão New. Na aba Advanced,acessamos a categoria Testing Ser-ver e escolhemos a opção PHPMySQL e o tipo de acesso. Para fi-nalizar, clicamos em OK. Acessa-mos o menu File > New para criarum arquivo novo. Escolhemos o ti-po PHP e clicamos em OK. Depois,usamos as ferramentas do Dream-weaver para fazer o layout.

3. O FORMULÁRIOCom o layout montado, é hora deinserir o formulário. Exibimos a

barra de formulá-rio e clicamos nobotão Form. Digi-tamos a palavra“Nome” e, ao la-do dela, clicamosno botão TextField para inserira primeira caixade texto para oprimeiro campo.Depois, ajusta-mos as proprie-dades da caixa.

Repetimos o procedimento pa-ra o campo de e-mail. Digitamos apalavra, inserimos a caixa e confi-guramos suas propriedades.

4. O PEDIDOO próximo campo é a caixa em queo internauta indica se quer ou nãoreceber o boletim de notícias. Di-gitamos a frase e clicamos na cai-xa Checkbox para inserir a caixade seleção. Damos o nome de “bo-letim” para a caixa.

O último componente do formu-lário é o botão que envia as infor-mações. Clicamos no ícone Buttonda barra de ferramentas e ajusta-mos as propriedades do botão pa-ra completar o formulário. A par-te visual está pronta.

5. A CONEXÃOPara criar a conexão com o bancode dados, acessamos o menu Win-dow > Databases. Clicamos no si-nal de mais do painel e escolhe-Formulário: pedido de entrega de boletim por e-mail

Campos e botão: ajuste de propriedades completa o modelo

TUTORIAL/ FORMULÁRIO 23.05.05 21:19



mos MySQL Connection. Surge ajanela de configuração da cone-xão. Nessa tela digitamos o nomeda conexão, o endereço do servi-dor, o nome deusuário e, se ne-cessário, a senha.Quando clicamosno botão de se-leção de bancode dados, oD re a m w e a v e rexibe todos osbancos presentesno sistema. Basta selecionar o de-sejado e clicar em OK.

6. A CONFIGURAÇÃOA conexão criada com o banco dedados é exibida no painel Databa-ses. Clicamos então no painel Ser-ver Behaviors. Nele, acionamos osinal de mais e escolhemos a op-ção Recordset. Em seguida,aparece uma tela de configuração.

Nessa tela, es-colhemos a cone-xão com o bancode dados. ODreamweaver au-tomaticamenteexibe a tabela eos campos dobanco de dados.Clicamos em OK.O Recordset estáconfigurado.

Nosso formulá-rio vai inserir re-gistros no banco

de dados. Por isso, clicamos no si-nal de mais do painel e escolhe-mos a opção Insert Record. Na te-la de configuração, novamente es-

colhemos a co-nexão com obanco de dados.O Dreamweaverexibe a corres-pondência entreos campos doformulário e osdo banco de da-dos. No último

campo, inserimos a página que se-rá exibida depois que o usuárioativar o formulário. Quando clica-mos em OK, a ação Insert Recordé exibida logo abaixo do Record-set. O formulário está pronto. Acio-namos F12 para abrir o navega-dor e testar. Para ter certeza deque tudo deu certo, basta abrir obanco de dados MySQL e conferirse o registro foi inserido.

Banco de dados: configurando a conexão com o MySQL

FAÇAFÁCil

Para simplificar a criação de tabelas no banco de dados,

verifique se o serviço dehospedagem que você utiliza

oferece um gerenciador

TUTORIAL/ FORMULÁRIO 23.05.05 21:17 Page 106

TUTORIAL/LISTA DE DISCUSSÃO


m fórum é sempre pon-to de destaque em qual-quer site. As listas dediscussão ajudam pro-

fissionais a encontrar respostas pa-ra suas dúvidas, servem para com-partilhar opiniões e unem comuni-dades em torno dos sites. O phpBB,programa de criação e gerenciamen-to de fóruns de discussão, é um dospreferidos dos programadores.

Baseado na linguagem PHP, ophpBB foi totalmente remodelado naversão 2.0. Seu redesenho está dire-cionado para uma utilização profis-sional, com total liberdade de perso-nalização. Além disso, recebeu me-lhorias de segurança, in-terface em múltiplos idio-mas e suporte aos maisvariados bancos de dados.

O phpBB permite a cria-ção de uma quantidadeilimitada de fóruns, orga-nizados em categorias. Aadministração de usuá-rios, grupos e permissõesé outro destaque do pro-duto. O controle de aces-so pode ser especificadodiretamente para os gru-

pos de usuários. O administrador tema possibilidade de ainda limitar o aces-so à visualização, postagem de res-postas e muitas outras funções. Omoderador tem poder para apagar,mover, bloquear ou desbloquear asmensagens, uma a uma, em bloco outodas de uma só vez.

Para a personalização, você podecontar com a utilização de templatesque ficam guardados separadamen-te do código do PHP, permitindo queas mudanças de layout sejam feitasmais facilmente. As fontes e cores uti-lizadas no seu fórum podem ser con-troladas por meio de arquivos de CSS(Cascading Style Sheets).

UM FÓRUM CHEIODE OPINIÃO

MONTE SEU FÓRUM NA WEB USANDO O PROGRAMA PHPBBNO CONECTIVA LINUX COM O SERVIDOR APACHE

U

phpBB: configuração em formulário fácil de usar

TUTORIAL/LISTA DE DISCUSSÃO 23.05.05 17:34 Page 107





6. Acesse http://localhost/phpBB2/pelo seu browser e clique em Lo-gin. Digite seu nome de usuário e asenha que você escolheu para o ad-ministrador e clique em Log In. Váaté o fim da página e clique em Goto Administration Panel.

No menu, escolha General Ad-min/Configuration, para personalizar

o fórum (domínio, descrição, e-maildo administrador e outros itens).

Ainda no menu, escolha ForumAdmin/Management. Aqui você po-de criar um novo fórum facilmente.Basta colocar o nome do fórum e cli-car em Create New Forum. Preen-cha a descrição e ele já estará dis-ponível para uso.

O phpBB oferece pacotescomplementares quetraduzem as mensagens dosprogramas para váriosidiomas. Para obter essecomplemento em portuguêsfalado no Brasil, faça odownload no endereço www.info.abril.com.br/download/3237.shtml. É um arquivozipado com apenas 48 KB.Veja, agora, como instalar esse módulo de idioma.1. Salve o arquivo .zip dentrodo diretório phpBB2/languagee descompacte-ocom o comandounziplang_portuguese_brazil.zip. Com isso, será criado o subdiretóriophpBB2/language/lang_portuguese_brazil. 2. Acesse ainterface deconfiguração

do phpBB, apontando seubrowser para o servidor local,no endereçohttp://127.0.0.1/phpBB2/admin.Localize o item GeneralAdmin/Configuration e troque a opção DefaultLanguage para Portuguese[Brazil]. 3. Volte ao phpBB(http://127.0.0.1/phpBB2),clique em Profile e troque a opção Board Languagetambém para Portuguese[Brazil].

DISCUSSÃO EM PORTUGUÊS

Veja, no tutorial a se-guir, como o phpBB podeser instalado e configura-do com facilidade. Nesteexemplo, usamos a distri-buição Conectiva do Linux,banco de dados MySQL eservidor web Apache.

1. Faça o download dophpBB em www.info.abril.com.br/download/3206.shtml. O arquivo es-tá no formato ZIP.

Localize o diretório de páginasdo seu servidor web. Normalmen-te elas ficam guardadas no diretó-rio: /usr/local/apache/htdocs ouc:/apache/htdocs.

Descompacte o arquivo baixadonesse diretório. Ele criará um diretó-rio /phpBB2.2. Na linha de comando, digite a se-guinte seqüência:chmod a+w config.php

O objetivo é permitir que o PHPpossa alterar o arquivo de configu-ração para fazer a instalação.3. Pelo seu browser, abra ophpMyAdmin (www.info.abril.com.br/download/3259.shtml), um pro-grama que administra o MySQL. Crieum usuário no MySQL chamadophpbb. Defina uma senha com per-missão para: Host: localhost

Depois disso, na linha de coman-do do programa phpMyAdmin, digi-te o seguinte: flush privileges

Idioma: adicionando complemento em português

Fórum pronto: áreas delimitadas, com boa leitura

Isso irá ativar o usuário criado.Ainda no console do phpMyAdmin,

crie um novo banco de dados cha-mado phpbb.4. Com o browser, acesse o phpBBpelo endereço:http://localhost/phpBB2/

Na página de instalação, preenchaos seguintes campos:Database Server Hostname / DSN:localhostYour Database Name: phpbbDatabase Username: phpbbDatabase Password: phpbbPrefix for tables in database: phpbb_

Escolha também um nome deusuário para o administrador da listade discussão e uma senha.5. Acione o botão Start Install e,em seguida, clique no botão FinishInstallation.

Agora, apague os diretórios “ins-tall” e “contrib” e retire os direitos degravação do arquivo config.php, como seguinte comando:chmod a-w config.php

TUTORIAL/LISTA DE DISCUSSÃO 23.05.05 17:34 Page 108





6. Acesse http://localhost/phpBB2/pelo seu browser e clique em Lo-gin. Digite seu nome de usuário e asenha que você escolheu para o ad-ministrador e clique em Log In. Váaté o fim da página e clique em Goto Administration Panel.

No menu, escolha General Ad-min/Configuration, para personalizar

o fórum (domínio, descrição, e-maildo administrador e outros itens).

Ainda no menu, escolha ForumAdmin/Management. Aqui você po-de criar um novo fórum facilmente.Basta colocar o nome do fórum e cli-car em Create New Forum. Preen-cha a descrição e ele já estará dis-ponível para uso.

O phpBB oferece pacotescomplementares quetraduzem as mensagens dosprogramas para váriosidiomas. Para obter essecomplemento em portuguêsfalado no Brasil, faça odownload no endereço www.info.abril.com.br/download/3237.shtml. É um arquivozipado com apenas 48 KB.Veja, agora, como instalar esse módulo de idioma.1. Salve o arquivo .zip dentrodo diretório phpBB2/languagee descompacte-ocom o comandounziplang_portuguese_brazil.zip. Com isso, será criado o subdiretóriophpBB2/language/lang_portuguese_brazil. 2. Acesse ainterface deconfiguração

do phpBB, apontando seubrowser para o servidor local,no endereçohttp://127.0.0.1/phpBB2/admin.Localize o item GeneralAdmin/Configuration e troque a opção DefaultLanguage para Portuguese[Brazil]. 3. Volte ao phpBB(http://127.0.0.1/phpBB2),clique em Profile e troque a opção Board Languagetambém para Portuguese[Brazil].

DISCUSSÃO EM PORTUGUÊS

Veja, no tutorial a se-guir, como o phpBB podeser instalado e configura-do com facilidade. Nesteexemplo, usamos a distri-buição Conectiva do Linux,banco de dados MySQL eservidor web Apache.

1. Faça o download dophpBB em www.info.abril.com.br/download/3206.shtml. O arquivo es-tá no formato ZIP.

Localize o diretório de páginasdo seu servidor web. Normalmen-te elas ficam guardadas no diretó-rio: /usr/local/apache/htdocs ouc:/apache/htdocs.

Descompacte o arquivo baixadonesse diretório. Ele criará um diretó-rio /phpBB2.2. Na linha de comando, digite a se-guinte seqüência:chmod a+w config.php

O objetivo é permitir que o PHPpossa alterar o arquivo de configu-ração para fazer a instalação.3. Pelo seu browser, abra ophpMyAdmin (www.info.abril.com.br/download/3259.shtml), um pro-grama que administra o MySQL. Crieum usuário no MySQL chamadophpbb. Defina uma senha com per-missão para: Host: localhost

Depois disso, na linha de coman-do do programa phpMyAdmin, digi-te o seguinte: flush privileges

Idioma: adicionando complemento em português

Fórum pronto: áreas delimitadas, com boa leitura

Isso irá ativar o usuário criado.Ainda no console do phpMyAdmin,

crie um novo banco de dados cha-mado phpbb.4. Com o browser, acesse o phpBBpelo endereço:http://localhost/phpBB2/

Na página de instalação, preenchaos seguintes campos:Database Server Hostname / DSN:localhostYour Database Name: phpbbDatabase Username: phpbbDatabase Password: phpbbPrefix for tables in database: phpbb_

Escolha também um nome deusuário para o administrador da listade discussão e uma senha.5. Acione o botão Start Install e,em seguida, clique no botão FinishInstallation.

Agora, apague os diretórios “ins-tall” e “contrib” e retire os direitos degravação do arquivo config.php, como seguinte comando:chmod a-w config.php

TUTORIAL/LISTA DE DISCUSSÃO 23.05.05 17:34

DOWNLOADS/COISAS LEGAIS




ão é preciso ter conta ban-cária recheada para criarum site dinâmico reple-to de recursos. Com as fer-

ramentas gratuitas que selecionamos,qualquer um pode criar um portal ra-pidamente. A seguir, você vai conheceropções de gerenciadores de conteúdo,banco de dados, temas tableless, in-terpretadores e muito mais. Aproveite.

> WEBGUI 6.2.11Plain Blackwww.info.abril.com.br/download/4195.shtml

AVALIAÇÃO TÉCNICA: 7,0

CUSTO/BENEFÍCIO:

Disponível para Windows e Linux,esse gerenciador de conteúdo(CMS) tem uma interface muitoamigável. Nela é possível alterara posição dos elementos da pági-na apenas arrastando-os. Além dis-so, já vem com vários componen-tes que facilitam a vida do web-master, como enquete, fórum, ca-lendário de eventos, gerenciadorde arquivos, geração automáticade formulários e mapa automáti-co do site. Na hora de colocar noar um box de busca, por exemplo,com poucos cliques dá para esco-lher entre as opções normal, avan-çada e por assunto. Sua versão pa-ra Windows conta ainda com uminstalador, o All-In-One, que ins-tala e configura automaticamentetodos os programas necessáriospara a sua execução: Apache 2.0.50,PHP 4.3.7, MySQL, mySQLadmin, Perl5.8.4, ImageMagik 5.5.7 e, opcio-nalmente, o suporte ao OpenSSL.Apesar desta comodidade, o Web-GUI também pode ser utilizadocom outros servidores web, comoo IIS, da Microsoft.LIVRE, 47,7 MB, EM INGLÊS

PORTAL NO ARSEM GASTAR NADA

UMA SELEÇÃO ESPERTA DE FERRAMENTAS GRATUITAS PARA SITES DINÂMICOS

POR DANIEL AVIZU

N

> DRUPAL 4.6.0Drupal www.info.abril.com.br/download/4197.shtml


CUSTO/BENEFÍCIO:

Para quem precisa de uma ferra-menta de gerenciamento de con-teúdo mais enxuta e que vá diretoao que interessa, o Drupal é umaboa opção. Sua interface é simplese focada na publicação das páginas,deixando de lado toda a pirotecniados concorrentes. Mas isso não querdizer que ele seja carente de recur-sos, pelo contrário. Debaixo de suaausteridade, o Drupal abriga ferra-mentas valiosas, como blog, blogApipara publicação via XML-RPC, rela-tório de acessos, fórum, adição decomentários e distribuição de con-teúdo via RSS. Conta ainda com oDrupalID, recurso que notifica umservidor central sobre a existênciado seu site e eventuais problemasque possam ocorrer. Entre os váriosmódulos disponíveis, há um tradu-tor para o português do Brasil.LIVRE, 452 KB, EM INGLÊS

WebGUI: o instalador configura tudo

Mambo: gerencia banner e newsfeeds

Drupal: software enxuto e poderoso

> MAMBO 4.5.1BMiro Internationalwww.info.abril.com.br/download/4196.shtml


CUSTO/BENEFÍCIO:

O Mambo é um gerenciador de con-teúdo para todo o tipo de obra.De um lado, atende até o usuário dehosting básico, sem acesso a um shelle sem os privilégios de administra-dor. De outro, traz consigo um con-junto de ferramentas de gente gran-de, como gerenciador de banners,alimentador de notícias de parceiros(newsfeed) e syndication, para distri-buir os artigos do site no padrão RSS.Conta também com componentespara enquete, busca e gerenciamen-to de mídia, além de uma das maio-res comunidades de usuários na in-ternet, o que proporciona uma lon-ga lista de sites com templates, mó-dulos e muitos fóruns de discussão.Por ser baseado na web, roda em qual-quer sistema operacional, mas des-de que este possua um servidor webcompatível com PHP, como o Apache,o IIS ou o iPlanet, por exemplo.LIVRE, 1,5 MB, EM INGLÊS

DOWNLOADS/COISAS LEGAIS 23.05.05 18:27 Page 110





ão é preciso ter conta ban-cária recheada para criarum site dinâmico reple-to de recursos. Com as fer-

ramentas gratuitas que selecionamos,qualquer um pode criar um portal ra-pidamente. A seguir, você vai conheceropções de gerenciadores de conteúdo,banco de dados, temas tableless, in-terpretadores e muito mais. Aproveite.

> WEBGUI 6.2.11Plain Blackwww.info.abril.com.br/download/4195.shtml


CUSTO/BENEFÍCIO:

Disponível para Windows e Linux,esse gerenciador de conteúdo(CMS) tem uma interface muitoamigável. Nela é possível alterara posição dos elementos da pági-na apenas arrastando-os. Além dis-so, já vem com vários componen-tes que facilitam a vida do web-master, como enquete, fórum, ca-lendário de eventos, gerenciadorde arquivos, geração automáticade formulários e mapa automáti-co do site. Na hora de colocar noar um box de busca, por exemplo,com poucos cliques dá para esco-lher entre as opções normal, avan-çada e por assunto. Sua versão pa-ra Windows conta ainda com uminstalador, o All-In-One, que ins-tala e configura automaticamentetodos os programas necessáriospara a sua execução: Apache 2.0.50,PHP 4.3.7, MySQL, mySQLadmin, Perl5.8.4, ImageMagik 5.5.7 e, opcio-nalmente, o suporte ao OpenSSL.Apesar desta comodidade, o Web-GUI também pode ser utilizadocom outros servidores web, comoo IIS, da Microsoft.LIVRE, 47,7 MB, EM INGLÊS

PORTAL NO ARSEM GASTAR NADA

UMA SELEÇÃO ESPERTA DE FERRAMENTAS GRATUITAS PARA SITES DINÂMICOS

POR DANIEL AVIZU

N

> DRUPAL 4.6.0Drupal www.info.abril.com.br/download/4197.shtml


CUSTO/BENEFÍCIO:

Para quem precisa de uma ferra-menta de gerenciamento de con-teúdo mais enxuta e que vá diretoao que interessa, o Drupal é umaboa opção. Sua interface é simplese focada na publicação das páginas,deixando de lado toda a pirotecniados concorrentes. Mas isso não querdizer que ele seja carente de recur-sos, pelo contrário. Debaixo de suaausteridade, o Drupal abriga ferra-mentas valiosas, como blog, blogApipara publicação via XML-RPC, rela-tório de acessos, fórum, adição decomentários e distribuição de con-teúdo via RSS. Conta ainda com oDrupalID, recurso que notifica umservidor central sobre a existênciado seu site e eventuais problemasque possam ocorrer. Entre os váriosmódulos disponíveis, há um tradu-tor para o português do Brasil.LIVRE, 452 KB, EM INGLÊS

WebGUI: o instalador configura tudo

Mambo: gerencia banner e newsfeeds

Drupal: software enxuto e poderoso

> MAMBO 4.5.1BMiro Internationalwww.info.abril.com.br/download/4196.shtml


CUSTO/BENEFÍCIO:

O Mambo é um gerenciador de con-teúdo para todo o tipo de obra.De um lado, atende até o usuário dehosting básico, sem acesso a um shelle sem os privilégios de administra-dor. De outro, traz consigo um con-junto de ferramentas de gente gran-de, como gerenciador de banners,alimentador de notícias de parceiros(newsfeed) e syndication, para distri-buir os artigos do site no padrão RSS.Conta também com componentespara enquete, busca e gerenciamen-to de mídia, além de uma das maio-res comunidades de usuários na in-ternet, o que proporciona uma lon-ga lista de sites com templates, mó-dulos e muitos fóruns de discussão.Por ser baseado na web, roda em qual-quer sistema operacional, mas des-de que este possua um servidor webcompatível com PHP, como o Apache,o IIS ou o iPlanet, por exemplo.LIVRE, 1,5 MB, EM INGLÊS

DOWNLOADS/COISAS LEGAIS 23.05.05 18:27





ponentes e templates para Mam-bo, como é o caso do www.free-mambo.com e do www.mambo-dev.com. A febre é tamanha, quejá existem portais, como o www.mamboawards.com, que montamum ranking, dividido em várias ca-tegorias, dos melhores sites de-senvolvidos com Mambo.LIVRE, 153 KB, EM INGLÊS

> POSTGRESQL 8.0.2PostgreSQL Global DevelopmentGroupwww.info.abril.com.br/download/4119.shtml


CUSTO/BENEFÍCIO:

Para quem precisa de um banco dedados relacional confiável e compa-tível com a maioria dos softwares li-vres, o PostgreSQL é uma ótima so-lução. Diferentemente dos bancos dedados tradicionais, o PostgreSQL pos-sui um sistema de controle transacio-nal que isola cada sessão entre a apli-cação e o banco. O MVCC (Multiver-sion Concurrency Control) faz comque a transação se dê com uma foto

do banco tirada no momento ante-rior. A vantagem disso é que umaquery de leitura nunca terá de espe-rar que uma query de escrita termi-ne para que possa ser executada evice-versa. Mas é na hora de escre-ver stored procedures, os scripts SQL,que o PostgreSQL dá um show. Eleaceita que sejam escritos em SQL,TCL, Perl ou Python, e se isso não forsuficiente, ainda é possível criar umanova linguagem de script para ele.LIVRE, 17,6 MB, EM INGLÊS

> PHPPGADMIN 3.5.3phpPgAdmin Projectwww.info.abril.com.br/download/3261.shtml


CUSTO/BENEFÍCIO:

Para os usuários do PostgreSQL, jáse foi a época em que administraro banco de dados era missão ape-nas para escovadores de bits. Todasaquelas tarefas chatas de criaçãodos usuários, dos bancos e das ta-belas agora podem ser feitas numainterface amigável e sem dores decabeça. Além da interface web, ophpPgAdmin possui outras como-

3 Column: tema tableless para PostNuke

Millenium Earth: template para Mambo

phpPgAdmin: interface amigável

> MILLENNIUM EARTHPeekmambowww.info.abril.com.br/download/4200.shtml


CUSTO/BENEFÍCIO:

O template da peekmambo paraMambo possui links configuráveise largura fixa. Se a imagem da Ter-ra não agradar, faça o cadastro nosite do fabricante (www.peek-mambo.com) e baixe algum ou-tro membro da família Millennium,como o Keyboard ou o Flower, porexemplo. Existem inúmeros sitesque oferecem downloads de com-

cading Style Sheets), que é capaz decolocar os elementos em seus luga-res, poupando código e, conseqüen-temente, acelerando o download dapágina. No site www.portalthemes.com há uma grande variedade de te-mas com visuais dos mais variados.Há também o site themes.postnuke.com, da própria PostNuke, que reú-ne temas de diferentes fornecedo-res, alguns grátis e outros, não.LIVRE, 350 KB, EM INGLÊS

PostNuke: gerenciador colaborativo

>POSTNUKE 0.750PostNuke www.info.abril.com.br/download/4198.shtml


CUSTO/BENEFÍCIO:

O PostNuke é mais que um CMS, éum gerenciador colaborativo de con-teúdo e comunidades. Nele é possí-vel organizar grupos de colaborado-res para o site, cada um com a suafunção, com cotas e acessos diferen-ciados. Na tela, ele indica quais osmembros que estão online e qual asua produtividade. O software contatambém com módulos de gerencia-mento de banners, fóruns, blogs, con-teúdo para PDAs, busca, envio demensagens e estatísticas de acesso. LIVRE, 3,25 MB, EM INGLÊS

> 3 COLUMN TABLELESS THEMEPortalThemeswww.info.abril.com.br/download/4199.shtml


CUSTO/BENEFÍCIO:

Este tema para o PostNuke não uti-liza tabelas para dar forma à páginaHTML. Em seu lugar, usa um CSS (Cas-






ponentes e templates para Mam-bo, como é o caso do www.free-mambo.com e do www.mambo-dev.com. A febre é tamanha, quejá existem portais, como o www.mamboawards.com, que montamum ranking, dividido em várias ca-tegorias, dos melhores sites de-senvolvidos com Mambo.LIVRE, 153 KB, EM INGLÊS

> POSTGRESQL 8.0.2PostgreSQL Global DevelopmentGroupwww.info.abril.com.br/download/4119.shtml


CUSTO/BENEFÍCIO:

Para quem precisa de um banco dedados relacional confiável e compa-tível com a maioria dos softwares li-vres, o PostgreSQL é uma ótima so-lução. Diferentemente dos bancos dedados tradicionais, o PostgreSQL pos-sui um sistema de controle transacio-nal que isola cada sessão entre a apli-cação e o banco. O MVCC (Multiver-sion Concurrency Control) faz comque a transação se dê com uma foto

do banco tirada no momento ante-rior. A vantagem disso é que umaquery de leitura nunca terá de espe-rar que uma query de escrita termi-ne para que possa ser executada evice-versa. Mas é na hora de escre-ver stored procedures, os scripts SQL,que o PostgreSQL dá um show. Eleaceita que sejam escritos em SQL,TCL, Perl ou Python, e se isso não forsuficiente, ainda é possível criar umanova linguagem de script para ele.LIVRE, 17,6 MB, EM INGLÊS

> PHPPGADMIN 3.5.3phpPgAdmin Projectwww.info.abril.com.br/download/3261.shtml


CUSTO/BENEFÍCIO:

Para os usuários do PostgreSQL, jáse foi a época em que administraro banco de dados era missão ape-nas para escovadores de bits. Todasaquelas tarefas chatas de criaçãodos usuários, dos bancos e das ta-belas agora podem ser feitas numainterface amigável e sem dores decabeça. Além da interface web, ophpPgAdmin possui outras como-

3 Column: tema tableless para PostNuke

Millenium Earth: template para Mambo

phpPgAdmin: interface amigável

> MILLENNIUM EARTHPeekmambowww.info.abril.com.br/download/4200.shtml


CUSTO/BENEFÍCIO:

O template da peekmambo paraMambo possui links configuráveise largura fixa. Se a imagem da Ter-ra não agradar, faça o cadastro nosite do fabricante (www.peek-mambo.com) e baixe algum ou-tro membro da família Millennium,como o Keyboard ou o Flower, porexemplo. Existem inúmeros sitesque oferecem downloads de com-

cading Style Sheets), que é capaz decolocar os elementos em seus luga-res, poupando código e, conseqüen-temente, acelerando o download dapágina. No site www.portalthemes.com há uma grande variedade de te-mas com visuais dos mais variados.Há também o site themes.postnuke.com, da própria PostNuke, que reú-ne temas de diferentes fornecedo-res, alguns grátis e outros, não.LIVRE, 350 KB, EM INGLÊS

PostNuke: gerenciador colaborativo

>POSTNUKE 0.750PostNuke www.info.abril.com.br/download/4198.shtml


CUSTO/BENEFÍCIO:

O PostNuke é mais que um CMS, éum gerenciador colaborativo de con-teúdo e comunidades. Nele é possí-vel organizar grupos de colaborado-res para o site, cada um com a suafunção, com cotas e acessos diferen-ciados. Na tela, ele indica quais osmembros que estão online e qual asua produtividade. O software contatambém com módulos de gerencia-mento de banners, fóruns, blogs, con-teúdo para PDAs, busca, envio demensagens e estatísticas de acesso. LIVRE, 3,25 MB, EM INGLÊS

> 3 COLUMN TABLELESS THEMEPortalThemeswww.info.abril.com.br/download/4199.shtml


CUSTO/BENEFÍCIO:

Este tema para o PostNuke não uti-liza tabelas para dar forma à páginaHTML. Em seu lugar, usa um CSS (Cas-

DOWNLOADS/COISAS LEGAIS 23.05.05 18:28


114 < COLEÇÃO INFO

didades, como ajuda em praticamen-te todas as funções, assistentes pa-ra a criação de tabelas, usuários,views e stored procedures.LIVRE, 740 KB, EM PORTUGUÊS

> ZOPE 2.7.5Zopewww.info.abril.com.br/download/1780.shl


CUSTO/BENEFÍCIO:

O Zope é um pacote versátil para acriação de aplicações web, compe-tindo com produtos como ColdFu-sion, WebSphere e Oracle AS e lin-guagens como ASP e PHP. Apesar denão ser tão completo como os con-correntes, é facilmente complemen-tável com outros produtos, módulosprontos (disponíveis no site oficial)e sistemas desenvolvidos pelo pró-prio usuário. O Zope utiliza Python2.1 como linguagem interna, o quelhe dá flexibilidade e poder muitograndes. Além disso, possui um sis-tema muito bom de gerenciamentode usuários, permitindo hierarqui-zar e determinar direitos de acessopara todas as páginas ou grupos de

páginas do site. É compatível comos web servers mais populares, co-mo o Apache e o IIS. LIVRE, 9 MB, EM INGLÊS

Zope: criação de aplicações web

DBDesigner: modelagem de dados

> DBDESIGNER 4.0.5.6fabFORCE.net www.info.abril.com.br/download/3681.shl


CUSTO/BENEFÍCIO:

Opção gratuita de ferramenta paramodelagem de bancos de dados. Po-de criar relacionamentos e tabelasde forma visual, além de importaressas informações de bancos de da-dos existentes. Foi criado para usuá-rios do MySQL, mas também funcio-na com outros sistemas gerenciado-res de bancos de dados. Além do mo-do de desenho, usado para enxer-gar as tabelas e suas relações de for-ma visual, o DBDesigner também criacomandos SQL para facilitar o de-senvolvimento com base no bancoexistente. Outro ponto positivo é osuporte a controle de versão, útil pa-ra projetos grandes onde as mudan-ças podem ter de ser revertidas. LIVRE, 5,6 MB, EM INGLÊS


21268519 Sites Dinamicos

Documents

Transcript of 21268519 Sites Dinamicos