filtros dinámicos de plantas de potabilizacionDescripción completa
Descripción: Etapa 2 Sistemas dinamicos
Laboratorio del curso de sistemas dinamicos - modelado de sistemas unsch 2017Descripción completa
Descripción: trabajo de compresores dinamicos
Descripción: ARREGLOS DINAMICOS
Descripción: sistemas dinamicos
Descrição completa
Descripción: sistemas dinamicos
sistemas dinamicosDescripción completa
Descripción completa
documento del desarrollo del curso sistemas dinamicos año 2017
okDescripción completa
fase 2 sistemas dinámicos UNAD
0 0 0 1 8>
9 771807 924004
CONTEÚDO
SITES DINÂMICOS CMS Wiki MySQL RSS PHP...
FERRAMENTAS 7 > Que idioma o site 14 16 19 25 27 29 32 35
vai falar? > O XML desliza no PHP 5 > Ganhe tempo com o ColdFusion > Dados livres com o MySQL > O Access manda bem na internet > Banco de dados assim é ótimo! > Portal é com o Xoops > O osCommerce faz a loja > Páginas abertas ao conteúdo
FERRAMENTAS 7 > Que idioma o site 14 16 19 25 27 29 32 35
vai falar? > O XML desliza no PHP 5 > Ganhe tempo com o ColdFusion > Dados livres com o MySQL > O Access manda bem na internet > Banco de dados assim é ótimo! > Portal é com o Xoops > O osCommerce faz a loja > Páginas abertas ao conteúdo
79 > Dê seu voto para o Flash 84 > Os segredos do ranking 88 > Loja com um Flash
45
PHP-Nuke: todos os recursos no Menu de Administração reúne recursos
TUTORIAIS 45 > Monte o site rapidinho 50 > Página dinâmica sem 53 57 60 65 70 75
programar > Adeus, tabelas de HTML > Blog pronto em seis passos > Som e vídeo jorram da tela > Falem mal, mas falem do meu site > Mostruário vapt-vupt > O PHP conversa com os clientes online
simples 92 > Site esperto lê os feeds 96 > Notícias no palmtop 99 > Que nota o site merece? 101 > Os menus se desdobram 104 > Boletim? É com o Dreamweaver 107 > Um fórum cheio de opinião
DOWNLOADS 110 11 0 > Portal no ar sem gastar nada
110
65
Livro de visitas: formulário e mensagens
Mambo: gerenciador de banner e newsfeeds
EQUIPE EDIÇÃO Lucia Reggiani CAPA Jefferson Barbato COLABORADORES Daniel Avizu, Everson Stabenow Siqueira e Rita Del Monaco DESIGN Claudia Ottelinger e Osmar Vieira
RECADO DA REDAÇÃO
MUITO ALÉM DO HTML emos duas notícias para os donos de sites feitos em HTML puro, uma boa e outra melhor ainda. A boa é que dá para montar um site sofisticado, cheio de interatividade, sem tirar um real furado do bolso. A melhor notícia é que reunimos nesta edição o que há de novo e importante para a construção de um site dinâmico, gastando nada ou muito pouco. Dividido em duas partes principais, Sites Dinâmicos traz, na primeira, ferramentas testadas pelos programadores e jornalistas que participaram desta edição. Apresentamos as linguagens mais usadas, bancos de dados, destrinchamos tecnologias de automação, como o gerenciamento de conteúdo (CMS), editores e aplicativos. Na segunda parte, estão os tutoriais, o caminho das pedras para fazer seu site trocar informações com os visitantes automaticamente. Você vai saber, passo a passo, como construir portais e layouts para comércio eletrôni-
T
co. Aprenderá a incluir em seu site formulários, livro de visitas, catálogo de produtos e um alimentador de notícias para PCs e palmtops. Descobrirá o uso dinâmico do Flash na montagem de um ranking e de um sistema de votação. Receitas para a produção de fórum, blog, streaming de áudio e vídeo estão no cardápio. Temos ainda dicas para fazer um layout sem tabelas de HTML, o famoso tableless, a tecnologia da hora para encolher o código, e uma bela seleção de downloads. Em boa parte dos tutoriais você terá, de bandeja, os códigos prontos para baixar no site da INFO. Para encarar essa maratona, a única coisa que você precisa é conhecer pelo menos um pouco de alguma linguagem de programação de acesso a banco de dados. Está pronto? Então aproveite. LUCIA REGGIANI
Jose Roberto Guzzo, Maurizio Mauro Presidente Executivo: Maurizio Mauro
Diretor Secretário Editorial e de Relações Institucionais: Sidnei Basile Vice-Presidente Comercial: Deborah Wright Diretora de Publicidade Corporativa: Thais Chede Soares B. Barreto
Diretor-Geral: Jairo Mendes Leal Diretor Superintendente: Paulo Nogueira Diretor de Núcleo: Alexandre Caldini
Diretora de Redação: Sandra Carvalho Redatora-chefe: Débora Fortes Diretor de Arte: Rodrigo Maroja Editores Seniores: Carlos Machado,Lucia Reggiani e Maurício Grego Editores: Airton Lopes,André Cardozo e Eric Costa Repórteres: Luciana Benatti e Silvia Balieiro Revisora: Marta Magnani Editor de Arte: Jefferson Barbato Designers: Catia Herreiro e Wagner Rodrigues Colaborador: Dagomir Marquezi Infolab: Osmar Lazarini (consultor de sistemas) Colaborador: Eduardo Kalnaitis Estagiários: Bruno Roberti, Henrique Lourenço e Luiz Cruz Info 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 Barreira Depto. de Documentação e Abril Press: Grace de Souza PUBLICIDADE Diretor 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 PUBLICIDADE Diretor de Publicidade: Pedro Codognotto Gerentes de Vendas: Claudia Prado, Fernando Sabadin Gerente de Classificados: Cris Lago MARKETING 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 ASSINATURAS Diretora de Operações de Atendimento ao Consumidor: Ana Dávalos Diretor de Vendas: Fernando Costa 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-2355 Publicidade: (11) 3037-5000, Central-SP (11) 3037-6564 Classificados: 0800-132066, Grande São Paulo 3037-2700, www.publiabril.com.br. Escritórios e Representantes 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-6191 Brasí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-7558Campinas – 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, Morada da 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, Midiasolution Repres 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. 24 Porto 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 de Paula Santos, 187, sl. 1201, Boa Viagem, CEP 51021-330, MultiRevistas Publicidade Ltda., telefax (81) 3327-1597 Ribeirão Preto – R. João Penteado, 190, CEP 14025-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, Centro Empresarial 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 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úcleo Consumo: Boa Forma, Elle, Estilo, Manequim Núcleo Comportamento: Claudia, Nova Núcleo Bem-Estar: : Bons Fluidos, Saúde!, Vida Simples Turismo/Tecnologia: Núcleo Turismo: Guias Quatro Rodas, National Geographic, Viagem e Turismo Núcleo Homem: : Placar, Playboy, Quatro Rodas,Vip Núcleo Tecnologia: 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 INTERNATIONAL ADVERTISING SALES REPRESENTATIVES Coordinator for International Advertising: Global Advertising, Inc., 218 Olive Hill Lane,Woodside,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. 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
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
Perl, PHP, JSP e ColdFusion. Correndo por fora, ASP.Net e J2EE prometem ganhar espaço com sua arquitetura de componentes. Cada uma dessas linguagens tem suas vantagens e desvantagens, e a escolha depende de uma série de fatores, como compatibilidade, custo e portabilidade. Conheça melhor as opções. C OL E ÇÃ O I N FO > 7
FERRAMENTAS/LINGUAGENS
ASP, A OPÇÃO WINDOWS O ASP (Active Server Pages) é a plataforma da Microsoft para a criação de sites dinâmicos. Em vez de utilizar o método CGI (Common Gateway Interface), as páginas ASP consultam o banco de dados por meio do Isapi (Internet Server Application Programming Interface), que aprimora a comunicação entre o servidor e o aplicativo externo. Quando utilizamos o CGI, cada pedido de página abre um novo processo no servidor, o que pode comprometer o desempenho do site. Já com o Isapi, o processamento de todos os pedidos ao servidor fica a cargo de um único arquivo .dll, que, uma vez carregado na memória, permanece lá até que seja deliberadamente retirado. O funcionamento de páginas ASP
depende do arquivo asp.dll. É ele que trata todos os pedidos de execução das páginas ASP. É importante lembrar que o ASP não é exatamente uma linguagem de programação, mas o que a Microsoft define como “ambiente de execução de scripts”. Na maior parte das vezes, as instruções são escritas em VBScript, que é derivado do Visual Basic, também filhote da Microsoft. A penetração do Visual Basic no mercado contribui bastante para o crescimento do ASP. Como a quantidade de programadores VB é grande, fica mais fácil para as empresas contratarem profissionais que desenvolvam aplicações em VBScript. Aderir ao ASP significa quase sempre optar pelo mundo Windows, uma vez que as páginas ASP só rodam nativamente em servidores Windows com servidor web IIS (Internet Information Server), da Microsoft. É possível rodar pá-
Qual das linguagens é a melhor? > SISTEMAS OPERACIONAIS > SERVIDORES
ASP Windows(1)
ColdFusion Windows, Linux, Unix
PWS, IIS
Apache, IIS, Sun One, Netscape Access, SQL Server, Oracle, DB2, Sybase, Informix • Sintaxe simples, bem parecida com HTML • Integração com produtos Macromedia • Base instalada pequena • Custo adicional com servidor
> BANCOS DE DADOS
Access, SQL Server, Oracle, DB2, Informix
PRÓS
• Grande base instalada no mercado • Fácil aprendizado
CONTRAS
• Só roda nativamente no mundo Windows
(1) Funciona em outras plataformas, com aplicativos auxiliares
FERRAMENTAS/LINGUAGENS
ginas ASP em sistemas Unix por intermédio de soluções comerciais, como o ChiliASP, ou usando o OpenASP, no servidor web Apache. Mas a implementação desse tipo de solução costuma ser problemática para os webmasters.
PERL, A VETERANA A linguagem Perl (Practical Extraction and Reporting Language) é a mais antiga das plataformas para desenvolvimento de sites dinâmicos. Foi criada em 1987 pelo programador Larry Wall para resolver tarefas de administração em sistemas Unix. Wall divulgou a primeira versão de Perl nas listas de discussão da Usenet e logo programadores de todos os cantos do mundo começaram a dar sugestões para o aprimoramento da linguagem. Esse esquema de colabo-
JSP Windows, Linux, Unix
ração continua até hoje, e Wall ainda chefia o desenvolvimento. Com o surgimento da web, a linguagem Perl passou a ser utilizada também para a montagem de sites dinâmicos. Os scripts Perl normalmente têm a extensão .pl e são interpretados por um programa antes de ser executados. Um programa chamado de interpretador deve estar instalado no servidor web em que os scripts são rodados. Há interpretadores para Windows e Mac OS. Unix e Linux interpretam os scripts na instalação-padrão. Uma das grandes vantagens de Perl é a portabilidade. Os scripts podem ser transferidos do Unix para o Windows e vice-versa com pouca ou nenhuma modificação. A linguagem é expandida pelo uso de módulos, programas criados para uma função específica, que podem ser acrescentados aos scripts feitos em Perl.
Perl Windows, Linux, Unix, Mac OS Apache, IIS
PHP Windows, Linux, Unix
Access, MySQL, Oracle, DB2, Sybase, Informix
Access, MySQL, Oracle, DB2, Sybase, Informix
• Portabilidade • Todos os recursos da linguagem Java
• Gratuito • Expansível por meio de módulos
• Gratuito • Sintaxe simples
• Exige conhecimento de Java
• Sintaxe complexa • Não há suporte oficial, mas uma comunidade atuante presta ajuda
• Não há suporte oficial, mas uma comunidade atuante presta ajuda
Apache, Sun One, Netscape Oracle, DB2, Sybase, Informix
Apache, IIS
C OL E ÇÃ O I NF O > 9
FERRAMENTAS/LINGUAGENS
O módulo CGI.pm é um dos mais conhecidos e facilita a captura de dados em formulários HTML. Todos os módulos são gratuitos. Existem empresas que oferecem suporte comercial para Perl, mas normalmente a maior ajuda vem dos participantes das listas de discussão especializadas. Para experimentar a linguagem, faça o download da distribuição ActivePerl em www.info.abril.com.br/ download/ 3165.shtml.
PHP, A POPULAR
Uma solução bastante popular entre os webmasters de sites dinâmicos é o PHP (Personal Home Page). Criado pelo programador Rasmus Leedorf, está na recém-lançada versão 5 (veja teste na página 14). Mas, por algumas questões de compatibilidade, a versão 4.3.11 ainda é a mais usada. A linguagem funcio-
CONSULTA É COM A SQL Os programadores podem escolher a linguagem que quiserem para construir aplicativos que automatizem os sites. Mas não têm muito como escapar da SQL (Structured Query Language) na consulta ao banco de dados. Se o TCP/IP é o idioma da internet, podemos dizer que a SQL tem a mesma função nos bancos de dados. A linguagem foi desenvolvida na década de 60 pela IBM com uma única finalidade: manipulação de bancos de dados. Ela é adotada por todos os sistemas mais utilizados 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 diversos bancos de dados possuem extensões proprietárias, funções mais avançadas que só funcionam naquele sistema. Os comandos básicos, porém, são intuitivos e podem ser usados sem dificuldade por quem tem noção de programação. Veja alguns: CREATE: cria tabelas SELECT: seleciona dados INSERT: inclui dados em tabelas UPDATE: atualiza dados DELETE: apaga dados Além dos comandos principais, outras expressões muito usadas são o “where”, que inclui a condição, e o “order by”, que ordena o resultado da consulta SQL. Veja o exemplo a seguir:
FERRAMENTAS/LINGUAGENS
na tanto em Unix quanto em Windows e possui suporte para diversos bancos de dados, incluindo MySQL, Sybase, SQL e Oracle. A sintaxe possui alguns elementos derivados do Perl, mas é bem mais simples e exige apenas noções básicas de programação. Além disso, há outra qualidade muito importante, que beneficia uma parte sensível de todos nós: o bolso. O interpretador PHP (programa que pro-
cessa as páginas feitas nesse formato) é gratuito, e basta baixar e instalar no servidor para começar a criar seu website dinâmico. Desde o início, o PHP foi desenvolvido como um padrão totalmente aberto, em que programadores de todo o mundo colaboram para o aprimoramento da linguagem, do mesmo modo como ocorre com o Linux. Apesar do crescimento de seus concorrentes endinheirados,
“SELECT nome,endereco FROM clientes WHERE estado = ‘sp’ ORDER BY nome”
ASP <% set conn = server.createobject(“adodb. connection”) conn.open “bancodedados” set rsquery = conn.execute(“select nome,telefone from tabelabanco”) while not rsquery.eof response.write rsquery(“nome”)& “ - “ & rsquery(“telefone”)& “ ” rsquery.movenext wend %>
Esse comando seleciona as colunas “nome” e “endereco” da tabela “clientes” em que o estado é igual a “sp” (condição imposta pela expressão “where”). Portanto, somente os clientes de São Paulo. Os resultados são ordenados por “nome”. A tabela poderia conter outras colunas, como “idade” e “sexo”, mas nesse exemplo usamos só “nome” e “endereco”. Para selecionar todas as colunas, basta trocar “nome,endereco” por *, como abaixo: “SELECT * FROM clientes WHERE estado = ‘sp’ ORDER BY nome” A seguir, temos exemplos de consultas SQL já inseridas em códigos ASP e ColdFusion.
ColdFusion select * from tabelabanco C OL EÇ ÃO I NF O > 11
FERRAMENTAS/LINGUAGENS
como o ASP e o ColdFusion, o PHP ainda se mantém entre as soluções mais utilizadas na construção de websites dinâmicos. O download do código fonte e dos arquivos para Windows pode ser feito em www.info.abril.com.br/download/ 3203.shtml.
JSP, A ECLÉTICA
A JSP (Java Server Pages) é a alternativa de programação de sites dinâmicos elaborada pela Sun, criadora do Java. Como dá para desconfiar, o conhecimento de Java é pré-requisito para o desenvolvimento em JSP, o que de cara afasta muita gente. A linguagem Java é robusta e tem funções extremamente mais complexas do que o desenvolvimento web. Dessa forma, aprender Java apenas para criar páginas em JSP pode ser um exagero, já que existem opções mais simples. A JSP conta com todas as vantagens da linguagem Java e a principal delas é a portabilidade. As páginas JSP rodam tanto em máquinas Unix como em Windows com pouquíssimas modificações. Uma das características da linguagem é a possibilidade de criar “bibliotecas de comandos”. Com isso, blocos de comandos podem ser armazenados e inseridos nas páginas quando necessário. As páginas JSP são armazenadas num servlet Ja-
va, ou seja, compiladas num pequeno programa. Esse servlet é gerado na primeira vez em que a página é requisitada e depois fica permanentemente disponível no servidor. As páginas JSP podem ser criadas em sintaxe compatível com o XML, o que facilita a distribuição. COLDFUSION, A CARA DO XML
A tecnologia ColdFusion foi desenvolvida pela Allaire, produtora do conhecido editor HTML HomeSite e de outros softwares para desenvolvimento web. No início de 2001, a Allaire foi comprada pela Macromedia, dona da tecnologia Flash e do editor Dreamweaver. A Macromedia tratou de aumentar a integração do ColdFusion com seus produtos e aprimorar a tecnologia, rebatizada de ColdFusion MX (veja o teste da versão MX 7 na página 16). Essa plataforma utiliza uma linguagem própria, a CFML (ColdFusion Markup Language), para criar os templates e recursos dinâmicos. As páginas podem ser reconhecidas pela extensão .cfm. A linguagem CFML é bastante parecida com o HTML e o XML. Para que o ColdFusion funcione, é necessário um aplicativo externo, que processará o código CFML. Esse aplicativo é o ColdFusion MX Server, que roda em conjunto com o servidor web. Ele recebe as páginas .cfm, executa o código (fazendo
FERRAMENTAS/LINGUAGENS
as devidas consultas ao banco de dados) e devolve a página formatada. Uma grande desvantagem do ColdFusion é o custo. Enquanto a implementação de Perl, PHP e ASP é gratuita (no caso do ASP, desde que o site funcione na plataforma Windows e IIS), um servidor ColdFusion custa perto de 15 000 reais, o que de cara desanima muita gente. Mas se você quiser experimentar, há uma versão do ColdFusion MX 7 Enterprise para teste por 30 dias disponível para download (www.info.abril.com. br/download/2152.shtml), além da versão Developer, gratuita, com funções apenas para desenvolvimento de aplicações.
ASP.NET, A INTEGRADORA
A arquitetura ASP.Net promete expandir os recursos do ASP e atrair desenvolvedores de outras linguagens. Faz parte da estratégia .Net, da Microsoft, cujo objetivo é integrar as ferramentas de produção e distribuição de serviços pela internet. Uma das principais características da plataforma é permitir o desenvolvimento em várias linguagens. Seguindo uma série de procedimentos, pode-se escrever, por exemplo, um programa em Perl para ASP.Net. Outros ambientes suportados são o Visual Basic, o Python, o C#, e o Visual C++. A au-
sência mais notada é a linguagem Java, mas isso não chega a ser uma grande surpresa. Microsoft e Sun travam uma batalha ferrenha e ninguém esperava que a empresa de Bill Gates apoiasse a rival. J2EE, A SUPERMÁQUINA
A tecnologia J2EE (Java 2 Enterprise Edition) tem pontos em comum com a .NET, da Microsoft. Ambas fornecem arquitetura de componentes para a construção de sistemas distribuídos, oferecendo recursos similares para o desenvolvimento de aplicações para internet e web services. Os componentes Enterprise JavaBeans permitem o acesso automático a objetos no banco de dados. A tecnologia utiliza o conceito de máquina virtual, no qual as linguagens de programação são compiladas num código intermediário, chamado bytecode. A Máquina Virtual Java é utilizada para mapear uma mesma linguagem nas mais diversas plataformas. Essa característica permite que uma aplicação corporativa feita para sistema operacional Windows possa rodar sem alterações em Unix ou até em mainframes. Para a integração com outros sistemas, o J2EE oferece suporte ao padrão Corba e outras facilidades, como os Java Connectors. C OL EÇ ÃO I NF O > 13
FERRAMENTAS/PHP
O XML DESLIZA NO PHP 5
A LINGUAGEM DÁ UM SALTO DE QUALIDADE E FACILITA A VIDA DO PROGRAMADOR POR ANDRÉ CARDOZO
popular linguagem PHP chegou à versão 5 completamente repaginada. Programadores adeptos do código-fonte aberto refizeram grande parte do código da versão anterior, a 4.3, introduzindo avanços significativos no suporte a XML, orientação a objetos e a banco de dados MySQL. INFO foi conferir. No teste, utilizamos um micro Dell com processador Pentium 4 de 2,4 GHz, 256 MB de RAM, disco de 40 GB e
A
sistema Windows XP Professional. O servidor web usado foi o IIS 5.1. O banco de dados MySQL é parceiro fiel do PHP na maioria dos sites dinâmicos. Mas muitas das novidades apresentadas no MySQL 4.1 e no beta do 5.0 não eram suportadas adequadamente pelo PHP 4.3. Por isso, a extensão MySQL do PHP 5 foi totalmente reformulada. Batizada de MySQLi (MySQL Improved), a nova extensão traz como principal novidade o recurso de orientação a ob-
PHP 5: avanços no suporte a XML, orientação a objetos e a banco de dados MySQL
FERRAMENTAS/PHP
jetos aplicado ao MySQL, atribuindo libxml2, desenvolvida pelos prométodos e propriedades a compo- gramadores do projeto Gnome. Esnentes do banco de dados. sa biblioteca implementa de uma Outra boa novidade para quem só vez diversas funcionalidades relida com armazenamento de infor- lacionadas ao XML, todas de acormação é a SQLido com os pate. Essa bibliotedrões estabeleciDOM ca funciona codos pelo W3C. Sigla de Document Object Model. Uma nova exmo um banco de Padrão para manipulação de dados e já vem tensão que faciliobjetos em páginas web baseadas em HTML ou XML embutida no PHP ta o acesso e a 5. Assim, no caso manipulação dos de aplicações mais simples, os pro- arquivos XML é a SimpleXML. Com gramadores podem usar a SQLite ela, o programador trabalha com em vez de instalar um banco de da- documentos XML como se fossem dos completo. objetos nativos do PHP, evitando a O XML foi outro ponto debulha- utilização do padrão DOM, bem mais do pela equipe do PHP 5 na cria- complexo. A extensão referente ao ção do novo código. Agora, todas método DOM foi completamente as extensões referentes à lingua- reescrita, também de acordo com gem são baseadas na biblioteca as 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,5 Biblioteca libxml2 obedece aos padrões do W3C 7,5 Extensão SimpleXML facilita o acesso a documentos do padrão 8,0 Nova extensão suporta funcionalidades das versõ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%).
C OL E ÇÃ O I NF O > 15
FERRAMENTAS/COLDFUSION
GANHE TEMPO COM O COLDFUSION
A VERSÃO MX 7 DO SERVIDOR DE APLICAÇÕES GANHOU FUNÇÕES QUE AGILIZAM O DESENVOLVIMENTO POR MAURÍCIO GREGO
criação de relatórios, Quando a Allaire criou o ColdFuformulários e outros sion, em 1995, seu objetivo era ter componentes comuns uma maneira prática de fazer as páde um site costuma to- ginas da web trocarem informações com mar mais tempo do que o desen- os bancos de dados. Depois que a volvedor de aplicações gostaria. Allaire foi comprada pela MacromeAtenta à questão da produtivida- dia, o ColdFusion evoluiu para uma de, a Macromedia procurou facili- plataforma completa com linguagem tar essas tarefas freqüentes no Cold- de script, comunicação com bancos Fusion MX 7, a versão mais recen- de dados, funções para a implemente de seu veterano servidor de apli- tação de serviços web, suporte pacações. Além disso, o software agre- ra conteúdo multimídia e recursos gou novos recursos que permitem de segurança. Desde a versão MX, o que os aplicativos se comuniquem por SMS e mensagens instantâneas. Na análise feita pelo INFOLAB, a nova versão não revela nenhuma reforma radical como foi a passagem do ColdFusion 5 para o MX (6), em 2002. Mas traz acréscimos bem-vindos num momento em que produtividade é uma meta onipresente nas empresas. Gateways: permitem comunicação por e-mail e SMS
A
FERRAMENTAS/COLDFUSION
servidor de aplicações, em si, pode até ser outro. Os aplicativos em ColdFusion são convertidos para bytecode Java e podem rodar em servidores de outras empresas. O INFOLAB analisou o ColdFusion MX 7 Enterprise, a edição mais completa. Melhorou a criação de formulários, usa- Relatórios: o Report Builder define o layout dos nos sites para disparar buscas, fazer compras e cadas- ca mais fácil definir que dados vão trar dados, por exemplo. O desen- aparecer no relatório e como estarão volvedor pode produzir formulários organizados. Os relatórios gerados em HTML, CSS e JavaScript usando podem ser embutidos em páginas os comandos habituais da CFML, a HTML e visualizados normalmente no linguagem de script do ColdFusion. browser. Também podem ser converMas agora é possível gerar formu- tidos para PDF ou para o FlashPaper, lários em Flash de maneira muito formato próprio da Macromedia. Essimples. Basta acrescentar um pa- sa é outra novidade, já que, nas verrâmetro (format=”flash”) ao coman- sões anteriores, a produção de docudo que inicia o formulário. E a for- mentos nesses formatos dependia de matação pode ser feita com a aplisoftwares adicionais. Esse recurso pocação de “peles” baseadas em CSS. de facilitar a produção de versões para imprimir documentos. RELATÓRIOS MAIS SIMPLES GATEWAYS DE EVENTOS Os relatórios ficaram mais fáceis de ser desenvolvidos no ColdFusion MX Outro acréscimo são os gateways de 7. Eles são outro componente básico eventos. Eles permitem que os aplide qualquer site dinâmico. Aparecem cativos online se comuniquem por na forma de recibos de transações e e-mail, SMS ou mensagens instantâresultados de pesquisas, por exem- neas. Uma loja online pode, por plo. Nas versões anteriores, as opções exemplo, enviar um SMS ao comprade formatação e organização das indor para avisar que o produto que formações eram limitadas. Agora, o ele adquiriu foi despachado para enpacote da Macromedia inclui um pro- trega. O servidor também pode, agograma específico para a produção de ra, reagir a uma variedade de evenrelatórios, o Report Builder. Nele, fi- tos relacionados com o próprio apli-
>
>
C OL E ÇÃ O I NF O > 17
FERRAMENTAS/COLDFUSION
cativo. Consegue, por exemplo, disparar uma ação no início ou no fim de uma sessão ou requisição do usuário ou quando ocorre uma determinada condição de erro. O ColdFusion incorporou extensões para o Dreamweaver. Elas permitem realizar tarefas como conectar a base de dados ao servidor sem sair do ambiente de desenvolvimento. Como já acontecia em versões anteriores, o produto não inclui ferramentas de programação. A idéia é que o desenvolvedor adquira separadamente o Dreamweaver. Pode-se notar que o forte do ColdFusion continua sendo o desenvolvimento rápido do front-end, a parte do aplicativo que interage com o usuário na web. Empresas que necessitam de mais robustez e desempenho na parte que processa as transações po-
dem combinar o front-end em ColdFusion com programas de retaguarda implementados na forma de classes Java ou, no caso do ambiente .Net, de objetos COM. Esses objetos e classes são, então, ativados de dentro de um script do ColdFusion. Além da edição Enterprise, o ColdFusion MX 7 é oferecido em mais duas. A edição Standard não inclui os gateways de eventos e tem limitações de capacidade. É recomendada para sites menores, que rodam num único servidor. Já a edição Developer é distribuída gratuitamente, mas permite acesso ao servidor apenas na rede local. Quem quiser experimentar o ColdFusion MX 7 pode baixar a versão Developer ou um demo da Enterprise no endereço www.info.abril.com.br/ download/2152.shtml .
ColdFusion MX 7 Enterprise > FABRICANTE > O QUE É > PRÓ > CONTRA > LINGUAGEM DE PROGRAMAÇÃO
Macromedia Plataforma para aplicativos na web Os novos recursos agilizam o desenvolvimento O pacote não inclui editor de programas 8,8 A linguagem CFML é poderosa e de rápido aprendizado > FERRAMENTAS 7,9 Novas funções facilitam a produção de formulários e relatórios > COMPATIBILIDADE 8,2 Trabalha com vários servidores de aplicações e bancos de dados > AVALIAÇÃO TÉCNICA(1) 8,3 > PREÇOS (R$) 14 877 (completo) 7 438 (atualização) > CUSTO/BENEFÍCIO 7,0 (1) Média ponderada considerando os seguintes itens e respectivos pesos: Linguagem de programação (35%), Ferramentas de gerenciamento (35%) e Compatibilidade (30%). 18 < C OL E ÇÃ O I NF O
FERRAMENTAS/MYSQL
DADOS LIVRES COM O MYSQL
ESTÁVEL, RÁPIDO E FÁCIL DE USAR, ELE É A ESTRELA DOS BANCOS DE DADOS DE CÓDIGO ABERTO s bancos de dados open source estão cada vez mais presentes nas empresas. Nas pequenas, com suas aplicações simples e rápidas, podem dar conta de todo o trabalho. No mundo corporativo, atendem às necessidades de muitos departamentos. O nome mais expressivo desse grupo, que inclui PostgreSQL e Firebird, é o MySQL, da
empresa sueca MySQL AB. Rápido, multiplataforma, gratuito (apenas o suporte é cobrado) e fácil de usar, ele já é bastante utilizado na montagem de sites dinâmicos e começa a ser empregado em intranets. Pequeno no tamanho, mas grande nas aplicações que pode rodar, o MySQL é compatível com o padrão SQL (Ansi) e pode trabalhar com várias plataformas. Em sisteC OL EÇ ÃO I NF O > 19
FERRAMENTAS/MYSQL
mas Unix, ele tem capacidades multithread, ou seja, roda várias versões dele mesmo. No Windows NT, 2000, XP ou 2003, o MySQL roda como um serviço. Já no Windows 95/98, fica como uma janela do DOS minimizada. O banco de dados também con- MySQL Control Center: visualização e controle de funções ta com drivers de primeiramente deve ter o Apache roODBC para outras aplicações. Instalado em um servidor isola- dando como servidor de web. do, o MySQL é um banco de dados O primeiro passo é baixar a última veloz e estável. O grande diferencial versão do MySQL (www.info.abril. está na possibilidade de se integrar com.br/download/2901.shtml ), que à internet por meio de um interpre- está diponível em quatro sabores: tador de linguagem, como PHP, Perl • MySQL Standard – Conta com as ou TCL e até mesmo ASP. Essa comfunções-padrão e suporte a InnoDB, sistema de transações seguras. binação, instalada e compilada, por exemplo, em um servidor rodando • MySQL Max – Inclui as funções o Apache, gera páginas dinâmicas da versão Standard e recursos nocom as informações vindas em temvos avançados, como sistemas de po real do banco de dados. armazenamento para cluster e Se você não tem um servidor próBerkeley Database. prio e utiliza um provedor para hos- • MySQL Cluster – Versão de alta pedar seu site, é preciso encontrar um performance para cluster de banco de dados. que já ofereça esse serviço. Isso porque a instalação do PHP e do MySQL • MaxDB – Edição para grandes empara montagem de sites dinâmicos presas,antes conhecida como SAP DB. exige ter direitos sobre o servidor. Por O MySQL-padrão está na versão questões de segurança, os provedo- 4.1.11. Já existe uma versão 5.0 em res normalmente não dão essas liber- desenvolvimento, liberada apenas dades a quem opta por serviços de para testes. Se você está começanhosting compartilhado. Porém, se vo- do no mundo Unix, pode escolher cê é o administrador de seu servidor, uma das várias opções pré-compi-
FERRAMENTAS/MYSQL
ladas; se já é experiente, baixe o código-fonte para compilar em seu servidor. No tutorial de instalação a seguir, utilizamos o MySQL Max na distribuição Linux Suse 9.2, com servidor web Apache, PHP e compartilhador de arquivos Samba.
INSTALAÇÃO > AAntes de mais nada, gere um
1.
grupo de usuários chamado mysql com o seguinte comando: groupadd mysql
vem pronto para ser usado, então apenas renomeie o diretório mysqlxxx para mysql: mv mysql-xxx mysql
4. Agora vamos instalar os bancos de
dados-padrão necessários para que o MySQL funcione, dando o comando scripts/mysql_install_db
5. Acerte as permissões do diretório de instalação da seguinte forma: chown –R root . chown –R mysql data chgrp –R mysql .
Em seguida, crie um usuário mysql digitando:
6. Inicie o mysql com
useradd –g mysql mysql
7. É preciso dar ao programa a ca-
Esse usuário será utilizado pelos programas para entrar no MySQL, fazer pesquisas e trazer resultados. 2. Depois de terminado o download, vá até o diretório onde está salvo o arquivo e descompacte usando o tar. Para isso, digite a linha: tar xvzf mysql-xxxx.tar.gz
bin/mysqld_safe --user=mysql &
pacidade de começar e parar o serviço quando o servidor inicializar e quando desligar. Como ele já vem com um script que faz isso, copie o arquivo supprot-files/mysql.server para o diretório /etc/rc.d e configure o sistema para carregá-lo. No Suse, basta abrir o YaST System e acessar o editor de runlevel.
O xxxx é o espaço em que você deve colocar a versão que você baixou. Isso vai criar um diretório mysql-xxxx. 3. Localize esse diretório e dê uma boa olhada nos arquivos de README. Eles podem ajudá-lo em várias situações críticas. Nessa versão do MySQL não é necessário compilar o programa, ele já YaST: facilidade do Suse no controle do banco de dados
C OL E ÇÃ O I N FO > 21
FERRAMENTAS/MYSQL
GERENCIAMENTO GRÁFICO O MySQL não vem com uma interface gráfica para seu gerenciamento, mas isso não é problema. Existem vários programas que fazem esse trabalho e estão disponíveis para download na internet. A própria MySQL AB conta com uma interface de controle. A versão antiga se chamava MySQLGUI e foi substituída pela MySQL Control Center. Ela pode ser baixada gratuitamente em www.info.abril.com.br/ download/3185.shtml. O MySQLCC permite montar queries (pesquisas nos bancos de dados) utilizando a sintaxe de edição de texto do SQL e apresenta os resultados em tabelas. Com o MySQLCC você também pode criar e gerenciar os bancos de dados e as tabelas. Além disso, é possível reparar e otimizar as tabelas. Por fim, o MySQLCC faz o gerenciamento do servidor, podendo mudar as variáveis e mostrar como estão os recursos em uso.
Administração: a aba Status dá agilidade para fazer comparações do uso do servidor
O PHP >Agora que você já tem o MySQL configurado e rodando, necessita do PHP para completar o serviço de interatividade. Depois de instalar o PHP, você precisará compilar o Apache para trabalhar com MySQL e PHP. Caso a sua instalação do PHP não tenha suporte a MySQL, siga os seguintes passos: 1. Baixe a última versão do códigofonte do PHP (www.info.abril.com. br/download/2550.shtml). No nosso teste, usamos a edição 4.3.11, uma vez que a 5.0 ainda apresenta problemas de compatibilidade. Navegue até o diretório /usr/local/src e expanda o arquivo com: tar -xvzf php-4.xxx.tar.gz
FERRAMENTAS/MYSQL
Nesse comando, o xxx se refere à versão que você escolheu. Localize o diretório php-4.xxx que foi criado na descompactação e digite este comando (na mesma linha): ./configure--with-mysql--withapache=../apache_xxxx--enabletrack-vars
O xxxx, desta vez, é para a versão do Apache. Ele irá compilar
o PHP com suporte a MySQL e Apache. 2. Agora, no mesmo diretório, digite: make
Pressione Enter. Quando estiver concluído, escreva: make install
Aperte Enter. Seu Unix ou Linux irá compilar o PHP para funcionar com o kernel da máquina.
MYSQL NO WINDOWS Se você tentou instalar a modo de autenticação antigo. Basta executar esta query: versão 4 do MySQL no seu Windows pode ter encontrado update user set password = alguma dificuldade ao fazer a old_password(‘senha’) where conexão com o banco e user = ‘usuário’; deparado com o erro: flush privileges; Client does not support Assim, para esse usuário será authentication protocol usado o método de requested by server; consider autenticação do MySQL 3. upgrading MySQL client Isso acontece porque o client para MySQL que vem no PHP 4 não tem total suporte à versão 4, apenas para a 3. Mas não se desespere — o único conflito que existe é na autenticação. Para resolver o problema, salve Alterando senha: para PHP 4 rodando em Windows as senhas no
C OL EÇ ÃO I NF O > 23
FERRAMENTAS/MYSQL
WEB >ComO SERVIDOR essa etapa completada, é preciso fazer com que o Apache reconheça e trabalhe com PHP. 1. Navegue até o diretório do Apache 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 seu site. Agora digite:
cp php.ini-dist /usr/local/lib/ php. ini
Assim você diz onde o PHP encontra sua biblioteca de referência. 2. Para terminar, vá até o diretório /etc/httpd/conf e localize o arquivo httpd.conf. Abra-o em um editor de texto e coloque a seguinte linha: AddType application/ x-httpd-php .php
E aperte Enter. Quando o comando terminar, digite:
Salve o arquivo. Esse comando vai dizer ao Apache para interpretar os arquivos .php como um serviço PHP. Reinicie o Apache com o comando:
make install
apachectl restart
Tecle Enter novamente. Esse comando irá compilar o Apache para funcionar com o kernel de sua máquina. Quando a compilação terminar, navegue até o diretório php44.x e digite o seguinte:
Pronto: você já pode começar a construir páginas dinâmicas. Para utilizar melhor o MySQL, você deverá aprender os comandos de realização de pesquisas, criação de tabelas e administração do banco de dados.
make
MySQL 4.1.11 > FABRICANTE > O QUE É > PRÓ > CONTRA > RECURSOS > FACILIDADE DE USO > COMPATIBILIDADE > AVALIAÇÃO TÉCNICA(1) > 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, como vistas (views) 6,0 Todos os básicos mais transações 7,0 Sem interface gráfica própria, pode ser gerenciado por ferramentas auxiliares 9,0 Tem versões para Windows, Mac OS, Linux e outros 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%).
24 < C OL EÇ ÃO I NF O
FERRAMENTAS/ACCESS
O ACCESS MANDA BEM NA INTERNET O BANCO DE DADOS PODE FUNCIONAR ONLINE OU OFFLINE, DE ACORDO COM A NECESSIDADE DO SITE
m dos bancos de dados mais conhecidos do mercado, o Access, da Microsoft, é uma opção interessante para a automação de sites em tarefas despretensiosas. Há basicamente duas formas de fazer com que a sua base Access vá para a internet. Uma delas consiste em ligar o banco a uma linguagem de automação, como PHP ou ASP. Outra opção, mais simples e com menos recursos, é recorrer a um software que lê as informações do banco de dados e as transforma em documentos HTML, estáticos. Vamos a elas.
U
1. Banco online
Quem lida com linguagens de automação, como PHP ou ASP, deve configurar o Data Source Name (DSN) do banco de dados. Com isso, pode-se testar o site dinâmico localmente desde que haja um servidor web instalado na máquina. O DSN serve como identificador do banco de dados em qualquer conexão criada por meio do método ODBC, presente no Windows. Faça o seguinte: A. No painel de controle do Windows, há um ícone chamado ODBC (em algumas versões do sistema ele está dentro do grupo Ferramentas Administrativas). Clique nele para abrir a janela do ODBC.
Access: a configuração do banco de dados,
pelo método ODBC, é fácil
C OL EÇ ÃO I NF O > 25
FERRAMENTAS/ACCESS
B. Na aba DSN de
usuário, escolha a opção Banco de dados Access e clique em Adicionar. C. Na tela seguinte, selecione o driver adequado ao banco. No caso, é o driver próprio do Microsoft Access. D. A seguir, você definirá o nome de identificação do banco (DSN) e se- DB to HTML Express: a consulta na tela de SQL gera o HTML lecionará o arquivo mdb (botão Selecionar). A des- co de dados e a tabela que fornececrição do DSN é opcional. Clique rá os dados para as páginas. em OK e seu DSN estará criado. B. Depois, na tela de SQL, executaAo escolher a empresa de hospe- mos a consulta. dagem para o site, é bom verificar C. A partir daí, é gerada uma págise o servidor tem suporte para ban- na HTML e fazemos os ajustes necos Access. Além disso, o usuário de- cessários na aba Page layout. É aqui ve informar ao administrador o DSN que podemos, por exemplo, regudo banco de dados para que ele pos- lar o número de registros exibidos sa ser configurado corretamente. em cada página. O DB to HTML inclui links de Anterior e Próximo auPublicação offline tomaticamente quando necessário. Outra maneira de criar um site com D. A aba Template preview mostra base em um banco de dados Ac- o código HTML do arquivo e percess é usar um software auxiliar mite fazer as modificações diretapara gerar as páginas. Existem di- mente na fonte. Na aba Preview teversos programas com essa finali- mos o resultado. dade na web. Escolhemos o DB to Todo o processo de geração de HTML Express (www.info.abril.com. páginas pode ser guardado como um projeto. Assim, não precisamos br/download/3200.shtml ), da XLineSoft, pela facilidade de uso. Ve- repetir o processo para criar novamente a página. Outros recursos ja como ele funciona: A. Na tela principal, clicamos no boúteis do programa são o upload via tão Connect para selecionar o ban- FTP e a geração de arquivos PDF.
2.
26 < C OL EÇ ÃO I NF O
FERRAMENTAS/FIREBIRD
BANCO DE DADOS ASSIM É ÓTIMO! O FIREBIRD 1.5 TEM RECURSOS PODEROSOS, POUPA MEMÓRIA E PROCESSADOR E É DE GRAÇA POR ERIC COSTA
banco de dados Firebird INFO testou a versão SuperServer está cada vez melhor, do Firebird (www.info.abril.com.br/ acompanhando os avan- download/2108.shtml), voltada paços dos concorrentes de ra ambientes de produção. Outra vercódigo aberto MySQL e PostgreSQL. são, a Classic, é dedicada a ambienNascido de uma iniciativa da Borland tes de desenvolvimento, permitindo de abrir o código do seu banco Inter- o acesso direto aos arquivos de dabase 6, o Firebird chegou à versão 1.5 dos e rodando tarefas em vários probem mudado. Foi completamente tra- cessos. A versão SuperServer é sob duzido da linguagem C para a C++ e, medida para voar: usa threads, que entre as novidades, traz as nested possibilitam criar tarefas de forma transactions, que permitem aplicar mais leve do que processos, consunovas regras de negócio quando uma mindo menos memória e recursos do transação encontra um erro, sem pre- sistema operacional. Em compensacisar desfazer toda a operação. Para ção, o SuperServer não permite abrir a alegria geral dos usuários, foram os arquivos de dados diretamente. mantidos os pontos fortes do Firebird em relação aos outros bancos de dados de código aberto. Exemplos são os recursos de triggers, stored procedures e transações concorrentes, que se beneficiam dos anos de experiência e de correção de código do Interbase. No MySQL, o mais popular banco de dados livre, essas funções só apareceIBExpert: gerencia usuários e tabelas do Firebird ram mais recentemente.
O
C OL E ÇÃ O I N FO > 27
FERRAMENTAS/FIREBIRD
Nos testes no INFOLAB, usamos uma máquina Athlon XP 2200+ com Windows 2003. Conseguimos criar uma base de dados para armazenar clientes em poucos minutos, usando a ferramenta de administração IBExpert (disponível em www.info.abril. com.br/download/4047.shtml). A montagem do banco de dados é facilitada pela ferramenta, que ainda permite rapidamente liberar e bloquear acessos de usuários. Uma limitação do Firebird, como acontece na maioria dos bancos de dados de código aberto, é não trazer nenhuma interface de administração de dados e usuários. Mas não se trata de uma limitação irremediável: o site oficial do banco de dados tem diversos programas que permitem fazer essas operações. Já quem vai desenvolver progra-
mas usando o Firebird como backend pode optar por praticamente qualquer linguagem de programação. Existem pacotes para integrar o banco de dados com Java e .Net, além de PHP, Python, Perl, entre outras. Em termos de compatibilidade, o Firebird roda nos Windows 2000, XP e 2003, além de Linux, Mac OS X, Solaris e outros sistemas baseados em Unix. Para o futuro, o grupo de desenvolvimento do Firebird trabalha em melhorias de segurança, como a integração com sistemas LDAP, que armazenam os usuários de uma rede. Entre os recursos novos em gestação estão tabelas temporárias e um sistema de backup incremental, que permitiria copiar apenas as mudanças recentes do banco de dados a cada dia ou semana.
Firebird 1.5 SuperServer > FABRICANTE > O QUE É > PRÓ > CONTRA > RECURSOS > FACILIDADE DE USO > COMPATIBILIDADE > AVALIAÇÃO TÉCNICA(1) > 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 para administração 7,5 Traz todo o pacote básico de funções dos bons bancos de dados comerciais 6,5 Não tem interface gráfica de administração, precisando de ferramentas auxiliares 9,0 Tem versões para Windows, Mac OS X, Linux e outros sistemas 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%).
28 < C OL EÇ Ã O I N FO
FERRAMENTAS/CMS
PORTAL É COM O XOOPS COM ESSE GERENCIADOR DE CONTEÚDO DÁ PARA CRIAR SITES PODEROSOS POR CARLOS MACHADO
nome pode ser engraça- Xoops é necessário ter acesso a um do, mas o Xoops é uma servidor web com o banco de dados ferramenta séria de cria- MySQL e a linguagem PHP habilitação de sites dinâmicos, dos. O servidor-padrão é o Apache, que conseguiu formar no Brasil uma normalmente rodando em sistema comunidade do mundo de código- operacional Linux. O download do fonte aberto bastante organizada. Si- Xoops 2.0.10 em português pode ser gla de eXtensible Object Oriented Por- feito no endereço www.info.abril. tal System — sistema de portais ex- com.br/download/3917.shtml . tensível e orientado a objeto —, o A característica que mais se destaXoops é uma ferramenta em PHP in- ca no produto é a flexibilidade. Quandicada para a criação de portais co- do se instala o Xoops com a opção merciais, páginas web pessoais, coStandard e se ativa apenas o módulo munidades, sites de notícias, intra- News, obtém-se o site mínimo, que nets e blogs. O produto faz parte da corresponde a um weblog ou noticiácategoria de software CMS — iniciais de content management system ou sistema de gerenciamento de conteúdo. Desenvolvido pela Xoops Organisation (com s mesmo), o produto consiste num pacote básico que pode ser estendido mediante a instalação de módulos avulsos que acrescentam ao site novas funções. Para instalar o Administração: instalação e configuração numa tela
O
C OL EÇ Ã O I N FO > 29
FERRAMENTAS/CMS
rio. Para uma escurso importantrutura de porte te em qualquer médio, pode-se site, mas fundaativar, além de mental em sites Notícias, módude conteúdo, los como Fórum, cujo principal Download e Web acervo é o texLinks. Forma-se to. O módulo assim um site de download é com recursos patambém um exra a formação de celente recurso. uma comunidaAlém de permide, na qual os tir a inclusão de membros cadasarquivos para Site com Xoops: recursos aos montes trados podem inserem baixados teragir entre si e com os visitantes. A no próprio portal Xoops, ele gerenmesma estrutura, reconfigurada, po- cia os links para copiar arquivos em de tornar-se um site corporativo. Nes- outros sites e fornece estatísticas dos se caso, a empresa tem a opção de itens mais baixados. Oferece até um desenvolver módulos próprios, ajus- serviço de avisos, que alerta o usuátados às suas necessidades específi- rio quando há novidades na seção. cas, ou selecionar módulos na vasta O módulo que implementa fóruns, biblioteca de código aberto franquea- também nativo, parece ser um dos da pela comunidade xoopista. No si- mais populares — pelos menos nos te central da comunidade (www. sites das comunidades Xoops. Xoops.org) pode-se baixar em torno A instalação do Xoops é relativade 300 módulos para os mais varia- mente fácil. Basta seguir as instruções dos fins, em categorias como multi- e ter algum conhecimento sobre o mídia, manipulação de imagens, me- servidor. Para quem vai montar um canismos de busca, publicação de no- site cujas opções se restringem ao patícias, e-commerce, salas de bate-pa- cote básico do produto, também não po, calendários e grupos de discussão. há dificuldade. Elas só começam a aparecer quando se deseja fazer perBUSCA INTERNA sonalizações. É o caso, por exemplo, Alguns módulos nativos — incluídos de alterar o layout da página para alna instalação-padrão — merecem des- go diferente do que oferece um tetaque especial. Um deles é o meca- ma escolhido. Para isso, o usuário prenismo de busca interna, que dá ao cisa ter conhecimento que lhe perusuário a facilidade de fazer pesqui- mita mexer nos códigos em PHP e sas dentro do site. Trata-se de um re- nos gabaritos de páginas.
>
FERRAMENTAS/CMS
MÓDULOS INTEGRADOS >A integração de módulos externos é a tarefa que mais exige esforço do usuário. Cada módulo tem configurações diferentes e seus próprios truques. Nesse momento, o usuário precisa ter noção de administração de sistemas, a fim de definir os níveis de acesso de cada módulo e conteúdo. Conforme o tipo de site, talvez seja necessário definir esquemas complexos, como vários grupos de usuários, cada um com permissões diferentes. Num site que aceita a interação de visitantes, pode-se criar, por exemplo, grupos de usuários como “anônimos”, “registrados”, “editores” e “administradores”, cada qual com seus direitos. A configuração de políticas de acesso não é uma tarefa tri-
vial e está fora do alcance dos criadores de site menos experientes. Mas quem tem dúvida sobre o Xoops não está sozinho. As comunidades xoopistas são ágeis nas respostas quando se entra em seus fóruns atrás de alguma solução. Ao enfrentar alguns problemas de configuração do Xoops, o INFOLAB recorreu a fóruns em comunidades brasileiras — há três principais: Xoops Brasil (http://br.xoops.org), XoopsBR (www.xoopsbr.org) e Xoops Total (www.xoopstotal.com.br ). Menos de 20 minutos depois, a dúvida já estava solucionada. Nota-se, também, no site principal e em outros da comunidade, grande preocupação com a publicação de material didático com dicas e documentação do produto.
The Xoops Organisation Sistema de código aberto para a criação de sites dinâmicos, como portais, intranets e blogs. A solução baseia-se no banco de dados MySQL e no servidor web Apache com PHP 8,0 A operação transcorre sem dificuldade, desde que o usuário siga as instruções 8,5 O produto traz um conjunto de recursos nativos e pode ser estendido com módulos externos que implementam funções especiais 7,0 As opções de layout são um tanto engessadas. Para obter um visual personalizado é preciso programar 7,5 Controle 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%).
C OL E ÇÃ O I NF O > 31
FERRAMENTAS/E-COMMERCE
O osCOMMERCE FAZ A LOJA O PROGRAMA VEM RECHEADO DE RECURSOS, MAS É DURO DE CONFIGURAR POR CARLOS MACHADO, COM OSMAR LAZZARINI
M
ontar lojas online é a missão que o osCommerce, um produto de código aberto, cumpre bem. Tanto que 1 417 sites de comércio eletrônico construídos com o software estavam ativos na web no início de maio. O osCommerce é uma solução completa para montar lojas online sem exigir grandes conhecimentos de programação e sem custos. Criado com base na linguagem PHP, o programa roda em várias plataformas: Windows, Linux, Solaris, BSD e Mac OS X. O requisito básico para instalá-lo é o servidor web Apache com PHP e banco de dados MySQL habilitados. INFO testou a versão 2.2 do produto em ambiente Linux. O que impressiona no osCommerce é o volume de possibilidades que ele oferece. A concepção do produto prevê a instalação de uma loja básica, que depois pode ser incremen-
tada com novos recursos. Todos esses recursos estão disponíveis em módulos criados pela comunidade de usuários. Até o encerramento desta edição, havia 379 módulos para gerenciar pagamentos, 166 para controlar o envio de produtos e 123 para ajustar o idioma, além de outros 1 954 pacotes com funções variadas. Entre eles há módulos específicos para sites brasileiros, como controle de entrega por Sedex. O primeiro passo para a montagem da loja é baixar o osCommerce (www.info.abril.com.br/download/ 3911.shtml). A instalação do programa deve ser feita, de preferência, diretamente no servidor que hospedará a loja. Também é possível criar uma loja local e, depois, fazer uma série de ajustes a fim de transferi-la corretamente para o servidor. Mas isso exige que o usuário tenha bastante experiência. Ele precisa, por exemplo, criar um banco dados MySQL va-
FERRAMENTAS/E-COMMERCE
zio e indicar ao instalador o caminho desse banco. Também durante a instalação, pode-se escolher a criação de uma loja a partir do zero ou iniciar com uma estrutura de demonstração. Esta última opção é a mais indicada, porque fornece uma apresentação visual do padrão de lojas montadas com o osCommerce. Na instalação, grande número de módulos fica à disposição na loja. No próximo passo, a configuração, o criador da loja define os itens que deseja usar. Alguns pacotes são obrigatórios. O de idioma, por exemplo. Se a intenção é vender para brasileiros, a loja deverá falar português. Do mesmo modo, é preciso escolher adequadamente os módulos que definem formas de pagamento, cartão de crédito etc.
Se a instalação é fácil, a configuração é outra história. A escolha do idioma, por exemplo, deveria ser algo absolutamente suave. Não é. Alguns itens, como menus e legendas, insistem em aparecer em inglês. No INFOLAB notamos vários erros de PHP e os problemas de acesso a dados durante a configuração. Nesses casos, o material de ajuda não se revela muito útil. Pode-se recorrer aos fóruns de discussão do osCommerce, mas é preciso ter disposição para garimpar uma resposta específica no meio de milhares. Também se pode colocar uma pergunta no fórum e aguardar que alguém forneça uma resposta adequada — o que, naturalmente, nem sempre acontece. A enorme oferta de módulos tanto ajuda
Loja com osCommerce: o visual pode ser modificado com temas variados C OL EÇ ÃO I NF O > 33
FERRAMENTAS/E-COMMERCE
como atrapalha. Ajuda, porque permite a montagem de lojas bastante completas. Ao mesmo tempo, exige experiência e conhecimento dos meandros do osCommerce para encontrar módulos adequados às necessidades do lojista. Depois, para configurar cada pacote. Mas em tecnologia, soluções robustas não são mesmo vapt-vupt, certo? Além das opções de módulos de código-fonte aberto, há soluções convencionais de software para o osCommerce. Só um exemplo: o Cobre Bem e-Commerce, da Thisf Informática, programa CGI para emitir boletos bancários. O produto pode ser obtido por download ( www.info. abril.com.br/download/3915.shtml) e testado na emissão de até trinta do-
cumentos. Depois disso, a loja precisa pagar uma licença de 147 reais. Devido ao esforço de seleção e implementação, o osCommerce é indicado para o prestador de serviços na área de desenvolvimento. Esse profissional pode investir no conhecimento do produto, selecionar módulos e resolver os problemas de instalação. Como especialista, terá soluções testadas e poderá oferecer sua experiência ao mercado. Ele fará a montagem da loja e treinará o dono para as atividades de gerência. A principal força do osCommerce está nas contribuições da comunidade de código aberto. Em geral, sempre se encontra uma solução para implementar novas funções na loja.
osCommerce 2.2 Milestone 2 > FABRICANTE > O QUE É > PRÓ > CONTRA > INSTALAÇÃO > CONFIGURAÇÃO > RECURSOS > DOCUMENTAÇÃO > COMPATIBILIDADE > AVALIAÇÃO TÉCNICA(1) > PREÇO > CUSTO/BENEFÍCIO
osCommerce Solução para montagem de lojas online Grande quantidade de funções (módulos) disponíveis para o produto Falta um guia ou catálogo para a seleção de funções 7,3 Fácil, exige conhecimento mínimo de MySQL 6,5 Itens simples podem exigir longas tentativas de ajuste 7,8 O produto tem opções para criar lojas sofisticadas 5,8 Não há um padrão de ajuda nem no módulo básic o nem nos adicionais 8,0 Roda 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%).
34 < C OL E ÇÃ O I NF O
FERRAMENTAS/WIKI
PÁGINAS ABERTAS AO CONTEÚDO NOS SITES FEITOS COM AS DEMOCRÁTICAS FERRAMENTAS WIKI, QUEM TRABALHA É O VISITANTE POR AIRTON LOPES, COM OSMAR LAZARINI
ites totalmente demo- pende do software escolhido para a cráticos, em que os visi- tarefa. A variedade é enorme. No entantes podem — e de- tanto, em termos de recursos, as divem — acrescentar ou ferenças entre eles são poucas. Tomudar o conteúdo sem o menor pu- dos produzem páginas enxutíssimas, dor. Para construir um site desses, sem nenhuma sofisticação de design as ferramentas certas são os wikis. ou funcionalidade. A diferença marUma vez instalado o wiki, basta cli- cante está na linguagem usada para car no link de edição e alterar os tex- criar os programas e os requisitos tos, inserir imagens à vontade nas que cada um exige do servidor que páginas existentes ou mesmo criar hospedará o site wiki. links para páginas novas. Claro que O INFOLAB montou três wikis com nada impede os vândalos digitais de ferramentas diferentes: o OpenWiusar a liberdade para fins menos no- ki 0.78 SP1, o UseModWiki 1.0 e o bres. Mesmo que isso ocorra, não é preciso se preocupar, porque os wikis permitem rever as versões anteriores e restaurá-las em instantes. Mais: os vândalos são raríssimos em wikis. Colocar no ar o seu próprio wiki também pode ser algo igualmente simples. Tudo de- wxWikiServer: com ele, o site wiki dispensa servidor web
S
C OL EÇ Ã O I N FO > 35
FERRAMENTAS/WIKI
wxWikiServer 1.5.11. O UseModWiki é, na verdade, um script Perl. A sua lista de pré-requisitos? Apenas o servidor web Apache com Perl. No OpenWiki, a exigência é um servidor IIS com suporte a ASP e XML. Mais simples ainda, pelo menos na instalação, é o wxWikiServer. Ele próprio funciona como servidor web, utilizando a porta 8080 do PC. Os três são capazes de gerar feeds RSS (Really Simple Syndication), assim os interessados conseguem ser notificados no ato sobre alterações no site. É difícil fugir, mas o aspecto espartano dos wikis pode ser um pouco melhorado apelando para os re-
cursos de abas do CSS (Cascading Style Sheets). Mas não espere milagres. Simplicidade é a mola mestra da filosofia wiki. As formatações são feitas com um conjunto de marcações próprio, mais simples do que o HTML. Basta digitar qualquer palavra entre dois colchetes para que se ja criada uma nova página. Quer colocar uma imagem no wiki? Digite a URL na tela de edição. O OpenWiki permite fazer o upload de arquivos. A mesma ação pode ser feita no UseModWiki, mas antes é preciso habilitar o recurso. Com tudo isso, só não monta um site com as portas abertas quem não quiser.
Wiki para todos os gostos UseModWiki 1.0 > DESENVOLVEDOR Clifford Adams > TECNOLOGIA > INSTALAÇÃO
Apache e Perl 6,5 Simples, mas requer edição de arquivo 6,0 RSS, suporte a CSS e upload de arquivos 8,0 Busca interna funciona bem e rápido 6,9 Grátis
OpenWiki 0.78 SP1 wxWikiServer 1.5.11 Laurens Pit Eddie Edwards e Ryan Norton IIS, ASP e XML XML 5,5 7,5 É preciso editar Simples, com um arquivo de assistente configuração 6,5 6,0 RSS, suporte a CSS RSS, suporte a CSS e upload de arquivos 7,0 7,0 As páginas são Página de hierarquizadas administração com poucos recursos 6,2 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 < C OL EÇ ÃO I NF O
FERRAMENTAS/SSI
O SSI DISPENSA BANCO E SCRIPT SITES SIMPLES OU COM ATUALIZAÇÃO PARCIAL NÃO PRECISAM DE TECNOLOGIAS COMPLEXAS
em sempre é preciso recorrer a um banco de dados ou a tecnologias complexas para construir sites dinâmicos. Em projetos pouco ambiciosos ou nos casos em que apenas uma parte das páginas precisa de atualização constante, o SSI (Server Side Includes) é uma boa opção. A rigor, o SSI é um conjunto de instruções colocadas dentro de arquivos HTML e interpretadas pelo servidor no momento em que as páginas são exibidas. Com isso, é possível criar conteúdos dinâmicos sem a necessidade de nenhuma outra tecnologia. O SSI pode ajudar em muitas situações. Por exemplo: A. Se você quer exibir a data e a hora de última atualização da página ou a hora do momento em que o internauta está lendo. B. Se você tem um site grande e quer administrar com facilidade as áreas fixas das páginas (cabeçalho, rodapé, barra de navegação etc.). C. Se muitas páginas do seu site são de conteúdo essencialmente não renovável, mas têm um trecho com atualização freqüente. Uma página que reúna, por exemplo, o histórico
N
da empresa (conteúdo que quase nunca é alterado) e uma área com notícias (de atualização constante). Se suas demandas de automação páram por aí, provavelmente o SSI resolverá o problema integralmente. Então, mãos à obra.
AJUSTE DO SERVIDOR 1. Para utilizar o SSI, é necessário que o servidor web de seu site aceite esses comandos — e que eles estejam habilitados. Se você guarda o seu site num serviço de hospedagem, confira com o prestador se o SSI já está habilitado ou qual o procedimento correto para fazê-lo. O SSI não é um padrão global, mas funciona em todos os servidores mais conhecidos, como Apache, Internet Information Services (Microsoft) ou Enterprise Server (Netscape). A forma de habilitar o SSI varia em cada modelo. Os exemplos deste texto referem-se ao Apache 1.3.33. Nesse servidor, você deve inserir a seguinte linha de comando no arquivo httpd. conf ou no arquivo .htaccess: Options +Includes
Além disso, é preciso que os arquivos que vão conter os includes teC OL EÇ ÃO I NF O > 37
FERRAMENTAS/SSI
nham uma extensão especial. Assim, o servidor saberá que deve ler os arquivos à procura de um trecho dinâmico a ser inserido no código. As extensões variam de servidor para servidor: normalmente, usa-se .shtml para Apache e .shl para Netscape. No IIS, SSI: código para montar a página e criar os includes utiliza-se a extensãopadrão .asp. Se você administra seu %d/%m/%Y” --> servidor Apache, faça o seguinte: Hoje é
Elas devem ser colocadas no local exato em que você quer que a data apareça (o texto “Hoje é” é apenas um exemplo). Podem também ser antecedidas e seguidas de formatação HTML normal. A primeira linha do comando configura o formato da data. Escolhemos o formato dd/mm/aaaa. A segunda linha ordena ao servidor que coloque a data local ao exibir a página. Note que o horário a ser exibido é o do relógio do servidor. Também serão seguidas as formatações de data estabelecidas no servidor. Ou seja, se ele estiver com os dias da semana configurados em inglês, eles aparecerão assim na página. Os dias da semana não entraram no exemplo acima, mas poderiam ser incluídos com a inserção do código %A. Ainda na questão tempo, podemos também incluir a data e a
FERRAMENTAS/SSI
hora (%R) da última modificação do arquivo. Veja: Modificado às
3. HTML EMBUTIDO Embora os exemplos acima sejam úteis, o SSI é usado principalmente para permitir a colocação de um trecho de HTML dentro de outro. Digamos que seu site tenha 100 páginas e todas elas tenham uma mesma barra de navegação. O que acontece se for preciso mudar um item da lista? Usando apenas HTML, seria necessário reabrir cada arquivo para fazer a mudança. Com o SSI, tudo fica mais fácil. Basta fazer com que a barra seja um item de include. Assim, com a simples alteração de um arquivo, tudo estará automaticamente renovado. Neste exemplo, vamos supor que você queira colo-
Home da INFO Online:
car um arquivo que contém apenas a barra de navegação dentro dos arquivos que compõem o site. Para isso, cada HTML deve ter a seguinte tag de include colocada no exato local em que será exibida a barra 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 chamado não estiver no mesmo diretório do arquivo original, é preciso anotar o caminho (por exemplo, include virtual=“../barradenavegacao. shtml” se o include localizar-se em
um diretório um nível acima). Preparados os HTMLs, basta criar a barra de navegação como um arquivo à parte. Esse arquivo pode incluir formatação HTML à vontade, mas não deve conter as tags estruturais de uma página (ou seja, as tags HTML, HEAD e BODY), já que ele será apenas um trecho inserido no meio da página final. É possível a colocação de vários includes numa mesma página. Na prática, quem utiliza esse sistema costuma retalhar a estrutura fixa em uma série de includes — para barra de navegação, rodapé, área de destaem cada área, um include ques, de notícias etc. C OL E ÇÃ O I NF O > 39
FERRAMENTAS/SUÍTE
Dreamweaver MX 2004: preocupação com os desenvolvedores de sites dinâmicos
MAIS PODER AO STUDIO MX
COM DREAMWEAVER, FLASH E INTERFACE INTEGRADA, A SUÍTE DOMINA O MERCADO DA WEB POR CARLOS MACHADO, COM OSMAR LAZARINI
Studio MX, pacote de programas para desenvolvimento de sites e aplicações para a internet da Macromedia, chegou à versão 2004 como líder disparado no mercado da grande rede. A suíte reúne duas das ferramentas mais populares entre os webmasters, Dreamweaver e Flash, dois bons programas gráficos, Fireworks e FreeHand,
O
e traz ainda uma versão especial para desenvolvedores do servidor de páginas dinâmicas ColdFusion. Inclui também o HomeSite, software que auxilia a escrita de código HTML. Um dos pontos de maior destaque na suíte é a integração de seus componentes. Juntos, eles oferecem uma solução completa para webmasters e desenvolvedores de aplicações online. Nessa versão, somente os pro-
FERRAMENTAS/SUÍTE
gramas Dreamweaver, Fireworks e Flash foram atualizados. O ColdFusion Developer Edition mudou de versão (veja texto na página 16) depois do lançamento da suíte, mas pode ser atualizado de graça via web. Todos os programas apresentam uma nova interface unificada, o que destaca o trabalho de integração aplicada nos produtos. O redesenho da interface amplia a área útil de trabalho dos aplicativos, graças a uma disposição mais inteligente das ferramentas. Trabalha-se mais à vontade com essa nova encarnação dos programas.
> Dreamweaver MX 2004
A versão 2004 do Dreamweaver revela preocupação com os desenvolvedores de sites dinâmicos. A interface do programa foi modificada, acrescentou-se mais elegância no visual e obtém-se melhor aproveitamento da área de trabalho. Os assistentes, agora, são ilustrados, tornando as tarefas mais agradáveis. A nova tela inicial traz atalhos para arquivos recentes, tutoriais e extensões do programa. A máquina que transforma sites em grandes aplicações foi a que obteve maiores reforços. O Dreamweaver vai deixando a concorrência cada vez mais para trás e tornase uma ferramenta tipicamente voltada para o profissional. Desse modo, seu uso por iniciantes se torna uma tarefa quase impossível. A área de trabalho do programa está mais
inteligente. Agora, os tradicionais modos — Código, Design e Split — não ficam mais em painéis separados: foram reunidos num único painel com botões e com outras funções importantes deixadas bem à vista. Antes, por exemplo, o campo para preenchimento do título das páginas ficava escondido. Outra função utilíssima é a verificação de compatibilidade com os mais diversos browsers, como Internet Explorer para Mac OS e Windows, Mozilla, Netscape Navigator e Opera em várias versões. Não dá para nenhum desenvolvedor reclamar. Você configura a lista de compatibilidade que deve ser verificada e, com dois cliques, o Dreamweaver exibe a lista de possíveis erros na posição onde normalmente fica o painel de propriedades. Um prático botão de teste para os dados dinâmicos também fica à vista do desenvolvedor, no mesmo painel. Igualmente interessantes são as novas funções de edição de imagens assumidas pelo produto. Tarefas simples como cortar e redimensionar figuras podem ser feitas diretamente no Dreamweaver sem a necessidade de abrir um programa externo. O software também incorporou um inspetor de código CSS que indica quando há erros no arquivo. Para quem usa um software de controle de versão, o Dreaweaver vem com botões de check-in e check-out, impedindo que dois técC OL EÇ ÃO I NF O > 41
FERRAMENTAS/SUÍTE
nicos de uma equipe trabalhem numa página ao mesmo tempo. Também foi acrescentado o recurso Secure FTP, que garante criptografia na transferência de arquivos entre as máquinas de desenvolvimento e o site de destino. Na área de formatação, agora é pos- Flash MX Professional 2004: templates para palmtops sível copiar e colar trechos de documentos vindos de MX Professional 2004. Isso, em conprogramas da Microsoft com a preseqüência, também define a existência de dois Studio MX 2004, conservação de cores e estilos CSS. Na parte de código, foram adicionados forme a versão do Flash incluída. inspetores para ASP.Net, XML, sinPara quem escreve código, o taxe PHP, e objetos de controle de Flash MX 2004 traz o Action Script formulários para ASP.Net. Na tela 2, a nova versão de sua linguagem li nguagem inicial, o programador escolhe a opde desenvolvimento. Agora, o Acção de plataforma com que vai tration Script pode ser aberto sepabalhar, e o Dreamweaver se ajusta radamente do Flash, como um editor independente. Nessa versão, convenientemente. o Action Script passa a ser uma linguagem baseada em classes, Flash MX 2004 como Java e C#. Uma das vantaNa versão anterior do Flash, a MX, o usuário, ao entrar no aplicativo, gens disso é que o código fica mais indicava se era um desenvolve desenvolvedor dor limpo do que no Action Script 1 — alguém mais voltado para os cóou no Javascript, e o desenvolvidigos de programação — ou um demento orientado a objetos se torna mais compreensível. Quem já signer, o profissional mais preocupado com o equilíbrio visual das páprograma em Action Script 1 não ginas. Conforme a escolha, o proprecisa reaprender a lidar com a ferramenta: a sintaxe da versão 1 grama exibia uma interface adequada. Agora, a Macromedia decidiu continua compatível, dando ao detransformar o Flash em dois produsenvolvedor a chance de absortos distintos: Flash MX 2004 e Flash ver a nova linguagem aos poucos.
>
FERRAMENTAS/SUÍTE
Para os designers não programadores houve acréscimos de um excelente facilitador, idêntico ao existente no Dreamweaver. No Flash MX 2004 existe agora um painel com behaviors. Os behaviors — que, traduzidos, poderiam ser ações — são como macros prontas que facilitam a execução de operações comuns: carregar um arquivo MP3, abrir um vídeo ou exibir uma janela. Em vez de escrever o código para fazer isso, o usuário escolhe um behavior e ele automaticamente automaticamen te insere os blocos de código que executam a tarefa correspondente. Ainda na área de código, o Flash MX ganhou um me-
nu de Timeline Effects (efeitos de linha do tempo) que permite usar atalhos para programar os recursos mais comuns. Tamb Também ém é novidade a capacidade de importar diretamente arquivos do Illustrator e PDFs, antes incompatíveis. Um novo plug-in será necessário: o Flash Player 7. Mas você também poderá produzir animações para o Flash Player 6, inclusive usando os novos componentes e até mesmo a linguagem Action Script 2. Mas o uso da versão atual será mais conveniente. Em testes do INFOLAB, o Flash Player 7 se saiu seis vezes mais rápido do que o 6. O fabricante promete performance de duas a dez vezes
Studio MX 2004 com Flash MX Professional > FABRICANTE > O QUE É > PRÓ > CONTRA > APLICATIVOS > RECURSOS > INTEGRAÇÃO > COMPATIBILIDADE > AVALIAÇÃO TÉCNICA(1) > PREÇO (R$) > CUSTO/BENEFÍCIO
Macromedia Pacote de software para desenvolvimento de sites e aplicações para a internet A integração dos componentes, agora com interface unificada Nem todo desenvolvedor vai aproveitar o FreeHand e o ColdFusion Dreamweaver Dreamwea ver MX 2004, Flash MX Professional 2004, Fireworks MX 2004, FreeHand MX e ColdFusion MX 6.1 Developer Edition 9,0 9, 0 Melhor suporte a folhas de estilo e a tecnologias de servidor 7,5 O Dreamweaver centraliza o desenvolvimen desenvolvimento to e compartilha recursos com outros programas 8,0 Java, PHP, .Net, JSP, CSS, XML. O Flash importa EPS, PDF, AI, DXF, EMF, AVI, MOV etc. 8,9 8, 9 2 763 8,4
(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 na avaliação técnica pelo bom desempenho da Macromedia na Pesquisa INFO de Marcas 2005. C OL O L EÇ E Ç ÃO Ã O I NF N F O > 43
FERRAMENTAS/SUÍTE
maior, mas o resultado depende do tipo de arquivo usado no filme. Na versão Professional do Flash MX 2004, destacam-se os recursos para o desenvolvimento de aplicações baseadas em formulários, no estilo do que fazem os programadores de Visual Basic e Delphi. O produto também evoluiu para o rumo do desenvolvimento baseado em componentes prontos. Entre os que vêm no pacote encontram-se objetos virtuais para acesso a dados. Também merecem referência os numerosos templates novos, especialmente os destinados ao desenvolvimento de aplicações para Pocket PC ou telefones celulares. Ao se escolher um modelo de equipamento, a tela da aplicação assume as característi-
cas de um emulador da máquina. Assim a área de trabalho fica com a cara de micro de mão ou de celular, o que ajuda na visualização do conteúdo a ser desenvolvido.
> Fireworks MX 2004 No editor de imagens da suíte, o Fireworks MX 2004, a palavra-chave são as ferramentas de trabalho colaborativo e a integração com o programa principal, o Dreamweaver. O Fireworks suporta os mesmos esquemas de travamento das imagens PNG, para evitar que mais de um integrante da equipe trabalhe com o mesmo arquivo. O avanço da integração é patente. Quando o Dreamweaver edita imagens diretamente, na verdade está usando recursos do Fireworks.
Fireworks MX 2004: ferramentas de trabalho colaborativ colaborativo o e integração
O L EÇ E Ç ÃO Ã O I NF NF O 44 < C OL
TUTORIAL/PORTAL
MONTE O SITE RAPIDINHO
COM O PHP-NUKE, DÁ PARA CRIAR UM PORTAL COM ALTA DOSE DE INTERATIVIDADE EM POUCO TEMPO POR AIRTON LOPES, COM OSMAR LAZARINI
versatilidade é a melhor das características do PHP-Nuke, um sistema de gerenciamento de conteúdo que vem ganhando destaque entre os desenvolvedores de sites dinâmicos. Em um único local, o administrador do site consegue controlar as diversas funções presentes na instalação-padrão do PHP-Nuke e os seus numerosos módulos adicionais. O cardápio de recursos interativos inclui fóruns, mensagens privadas, enquetes, newsletters e ferramenta de busca. Tudo é configurado por meio de uma interface simples e intuitiva. O requisito fundamental para montar um portal recheado de recursos interativos é um servidor com o PHP-Nuke, o Apache com suporte ao PHP e o MySQL instalados. Essa máquina pode ser qualquer micro com banda larga ou um host com suporte a PHP-Nuke. Neste tutorial, vamos hospedar o site localmente. Para quem preferir pagar a hospedagem e se livrar da administração do servidor, ao tér-
A
mino do processo, basta fazer o upload do site para o host escolhido. Só é preciso ficar atento se o serviço e o plano contratados oferecem suporte ao PHP-Nuke.
1. Prepare a base
O primeiro passo é instalar o Apache com suporte a PHP e MySQL, tarefa que pode ser feita numa única tacada com o PHPTriad ( www. info.abril.com.br/download/ 3170.shtml ).
O pacote reúne os três aplicativos e ferramentas administrativas, como o phpMyAdmin. É só executar o arquivo do PHPTriad para instalar cada programa na sua respectiva pasta-padrão. Reinicie o computador e localize o grupo de atalhos do PHPTriad no menu Iniciar do Windows. No subgrupo MySQL, clique em MySQL-D para ativar o aplicativo. Em seguida, acione o Apache, por meio do ícone Start Apache, dentro do subgrupo Apache. A janela do prompt com a mensagem “Apache is running” é o sinal de que o web server está rodando e pronto para a luta. C OL E ÇÃ O I NF O > 45
TUTORIAL/PORTAL
2. A vez do PHP-Nuke
Preliminares concluídas, é hora de mergulhar 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 preferência. O conteúdo traz os scripts para gerar as tabelas no MySQL, arquivos de ajuda e uma pasta chamada HTML, com todos os arquivos que serão usados no site.
3. O banco de dados
4. O nome do portal
Agora, copie todos os arquivos da pasta HTML, extraída durante a instalação do PHP-Nuke, e cole no diretório C:\Apache\htdocs ou em uma subpasta que você pode criar com o nome do portal. Assim, o endereço do seu site PHP-Nuke ficará sendo http://localhost/nome-do-portal/.
5. A hospedagem
Entre os arquivos copiados da pasta HTML está o config.php, que deve ser aberto e editado no Bloco de notas do Windows ou qualquer processador de texto. A variável $dbhost traz o valor “localhost”. Como vamos hospedar o site PHPNuke localmente, deixe como está. Para quem preferir recorrer a um provedor de hospedagem, será preciso substituir o valor das variáveis com as informações fornecidas pelo serviço contratado. Em $dbpass,
Com o Apache rodando, digite no navegador o endereço http:// localhost/phpmyadmin para entrar na página de administração dos dados do MySQL por meio do phpMyAdmin. No campo Cria Novo Banco de Dados, digite um nome, como INFOLAB. Está criado um banco de dados vazio. Na tela seguinte você irá rodar o script para gerar as tabelas do banco de dados INFOLAB. Pressione o botão Procurar, vá até o diretório no qual foram extraídos os arquivos do PHPNuke, abra a pasta SQL e clique duas vezes sobre o arquivo nuke.sql. Na seqüência, finalize a operação clicando no botão Executa. Pronto, estão criadas phpMyAdmin: para criar as tabelas do banco de dados as tabelas.
TUTORIAL/PORTAL
nidos o layout, os recursos interativos e o conteúdo do portal. Assim que você entrar pela primeira vez no endereço, será preciso criar uma conta de administrador, fornecendo login e senha. Clicando no ícone Preferências, na parte de baixo PHP-Nuke: Menu de Administração traz todos os recursos da tela, surgem os campos para inseinsira logo à frente da variável uma rir as informações gerais (como o palavra para servir de senha. O nonome do site e a URL) e escolher o visual do portal. No campo Teme escolhido anteriormente para o banco de dados (no nosso caso, mas, há um menu com diversas INFOLAB) deve ser digitado na vaopções pré-instaladas. Além desriável $dbname. Os campos depois sas, o PHP-Nuke pode receber oude editados devem ficar assim: tros temas criados pelo usuário ou $dbhost = “localhost”; baixados pela web. Para dar um $dbuname = “root”; toque mais pessoal, é interessan$dbpass = “senha”; te substituir o logo-padrão por um $dbname = “INFOLAB”; logotipo ou imagem personaliza$prefix = “nuke”; da. Para que o seu próprio logo $user_prefix = “nuke”; apareça no menu de opções, é pre$dbtype = “MySQL”; ciso que o arquivo GIF correspon$sitekey = “SdFk*fa28367-dm56 dente esteja armazenado na pasw69.3a2fDS+e9”; $gfx_chk = 7; ta de imagens do tema escolhido e nomeado como logo.gif, substiO visual tuindo o original. O caminho para Concluída a etapa de criação e cona pasta é C:\Apache\htdocs\nomefiguração do banco de dados, todo do-portal\themes\nome-dotema\images. Não se esqueça tamo trabalho passa a ser feito na interface de administração do bém de selecionar o idioma e indicar o formato para o horário loPHP-Nuke, no endereço http:// localhost/nome-do-portal/admin. cal, digitando pt-br. Role a tela até php. É o local no qual serão defio final e salve as alterações.
6.
C OL E ÇÃ O I NF O > 47
TUTORIAL/PORTAL
7. Os módulos
8. Os blocos
De volta à página de administração, Os sites produzidos com o PHPentre em Módulos para ativar os mó- Nuke têm uma estrutura caractedulos a serem adotados no portal. rística. Normalmente a página é forSerá exibida uma grande tabela, com mada por três blocos. Os dois latecolunas para os recursos, os respec- rais são mais estreitos e trazem metivos status (ativo ou inativo) e fun- nus e atalhos para o restante do sições (editar, ativar e colocar na ho- te. Já o central mostra o conteúdo me). Para citar apenas alguns dos principal. Entrando em Blocos, é recursos mais bacanas, dá para in- possível escolher a posição que os cluir ferramenta de busca (Search), menus e módulos irão ocupar denmontar fóruns (Forum), implemen- tro desses blocos. tar um serviço de troca de mensagens particulares entre os usuários 9. O conteúdo registrados (Private Messages) e con- Agora que a estrutura, os recursos trolar todas as estatísticas de aces- e o visual do portal estão definiso (Statistics). A forma de editar ca- dos, está chegando o momento de da um dos módulos é a mesma. Com alimentar as páginas com conteúum clique sobre o recurso deseja- do. Porém, é aconselhável fazê-lo do, surgem embaixo da tela os cam- de forma organizada, trabalhando pos a serem editados. É preciso de- com tópicos, que servirão para terminar se o nome de exibição do agrupar textos sobre assuntos cormódulo será alterado. O link para o relatos. Na tela de administração, serviço de mensagens privadas (Pri- clique em Tópicos. O processo de vate Messages) pode aparecer co- criação de tópicos consiste basicamo Comunique-se, por exemplo. No mente em indicar o nome do tópiitem seguinte, escolha quais usuários terão acesso ao recurso, que pode estar liberado para todos os visitantes, só para visitantes cadastrados ou restrito aos administradores. Feitas as alterações, não se esqueça de salvar tudo, retornando à tela de Portal: página inicial com notícias, enquete, busca etc administração.
TUTORIAL/PORTAL
co e a imagem que irá aparecer junto com a notícia. Para inserir a imagem, é preciso que o arquivo esteja no interior do diretório de imagens dos tópicos, que fica em C:\Apache\htdocs\nome-doportal\images\topics. Caso contrário, ela não aparecerá no menuzinho de imagens do gerenciador de tópicos. Fique atento também às dimensões da imagem, pois ela é exibida em tamanho real. Assim, uma imagem muito larga ou alta pode acabar com o design da página. Se tudo estiver de acordo, salve as alterações.
10. Os textos Finalmente é hora de inserir os textos. Clique no ícone Adicionar notícias. Dentro do gerenciador, escreva o título da notícia, escolha um tópico e marque a opção para publicar na home. Se quiser abrir espaço para os visitantes do site comentarem a notícia, habilite a opção Ativar Comentários Para esta Notícia. Na caixa Texto da Notí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 do texto no campo Texto da Notícia e o restante em Texto Estendido. Dessa forma, a home trará apenas um aperitivo da notícia e um link para a página com o texto integral. A única coisa chata é que
as quebras de linha têm de ser feitas manualmente, com os manjados comandos (quebra) e
(parágrafo) do HTML. Em compensação, o uso do HTML na caixa de textos abre a possibilidade de inserir fotos, animações em Flash etc. Só é preciso escrever o comando com o caminho para o arquivo. Terminada a operação, não se esqueça de salvar o trabalho.
11. O acesso Com o site concluído numa máquina com acesso em banda larga e endereço IP fixo, ele poderá ser acessado por uma URL que traz o número do IP e o nome do portal, algo como http://200.xxx.xxx. xxx/nome-do-portal.
Caso você resolva deixar o site em um host remoto, o processo não é complicado. Primeiramente, edite o arquivo config.php com as informações fornecidas pelo serviço de hospedagem. Na tela de administração do seu PHPNuke local, entre em Backup e salve o arquivo. Depois, envie o arquivo por FTP para o servidor junto com toda a árvore de diretórios do portal. Ao configurar o banco de dados no novo servidor, na hora de rodar o script para a criação de tabelas, será preciso apenas executar o arquivo salvo como backup para instalar o site exatamente como ele havia sido produzido no computador da sua casa ou do seu escritório. C OL E ÇÃ O I NF O >
49
TUTORIAL/SITE DE EMPRESA
PÁGINA DINÂMICA SEMPROGRAMAR O FULLXML DISPENSA LINHAS DE CÓDIGO E BANCO DE DADOS NA CRIAÇÃO DE SITES INTERATIVOS POR CARLOS MACHADO
sonho de quem gosta de inventar na internet, mas odeia programar, é poder criar websites dinâmicos sem escrever uma linha de código. E essa possibilidade existe. Com o Fullxml, dá para montar e administrar sites interativos, com fóruns, enquetes, livro de visitas e cadastro de usuários, tudo com XML e ASP. O melhor da história é que o programa, desenvolvido por um francês chamado John Roland, é de código aberto. Ve ja, a seguir, como obter essa ferramenta e montar um site com ela.
O
Neste tutorial, vamos fazer uma instalação no Windows XP Professional. Lembre-se: o site, ao ser colocado na web, só poderá ser hospedado num ambiente que dê suporte às tecnologias ASP e XML. INSTALAÇÃO 2. Faç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 de Controle, abra o item Adicionar ou Re-
PRÉ-REQUISITOS 1. Para usar o Fullxml, é necessário ter um micro com o Windows e o servidor web Internet Information Services (IIS). Esse recurso vem como padrão no Windows XP Professional, no Windows 2000 e no Windows Server 2003. Também é preciso instalar o MSXML 4.0 — os componentes básicos da linguagem XML. 50 < C OL E ÇÃ O I NF O
Ensaio de site: página com menus, enquetes e notícias
TUTORIAL/SITE DE EMPRESA
mover Programas. Clique em Adicionar/Remover Componentes do Windows. No Assistente de Componentes, marque a linha Internet Information Services (IIS) e avance. Agora, instale o MSXML 4.0 e, por fim, o Fullxml. Ao ser ativado no Windows, o IIS cria a pasta Inetpub, que é o centro de serviços de internet, e dentro dela o subdire- Configurações: aqui definem-se os recursos do site tório wwwroot, a raiz do servidor web. Nessa pasta, crie uma Engine. Mas, ao contrário, na pasta subpasta chamada fullxml. O progradb desligue a permissão Ler. Ou seja, ma Fullxml vem num pacote ZIP. Exessa será uma pasta reservada: o usuátraia o conteúdo desse arquivo, manrio não terá direito de fazer nada aí. tendo os diretórios, na pasta fullxml. Agora, abra o browser e digite: http://localhost/fullxml. Pronto: aí está o embrião de seu site. Agora, é AJUSTE AS PERMISSÕES Para que os administradores e usuápreciso configurá-lo, dando os seus rios do site possam utilizar adequatoques pessoais. damente o Fullxml, é preciso ainda fazer um ajuste nos diretórios, usanCONFIGURAÇÃO DO SITE do o console de administração do IIS. A estrutura do site é bem parecida No Painel de Controle, acione Desemcom a de boa parte das páginas que penho e Manutenção/Ferramentas você conhece. Acesse a interface de Administrativas/Internet Information gerenciamento do Fullxml. Para isServices. Surge o console do IIS. Abra so, no quadro Login, digite o nome a pasta Sites da Web e, depois, a sub(full) e a senha-padrão (xml). No mepasta Site da Web Padrão. Lá dentro nu de administração, clique em Setestá o diretório fullxml. Este, por sua tings. Nessa página você define as vez, tem várias pastas. Clique com o informações básicas do site. Antes botão direito na pasta Media e escode tudo, vamos fazê-lo falar a noslha Propriedades. Na orelha Diretósa língua. Na caixa Language, escorio, marque a opção Gravar. Isso perlha Brazilian Portuguese. Na linha mite que o usuário salve arquivos nesEncoding, escolha iso-8859-1. Clise diretório. Faça o mesmo na pasta que OK no final da página.
3.
4.
C OL EÇ ÃO I NF O > 51
TUTORIAL/SITE DE EMPRESA
Agora, na página em português, faça um ajuste de segurança. Clique no menu Moderação/Membros. Surge a lista de usuários cadastrados. Lá está o usuário full — a identidade com a qual você acessou o gerenciamento do site. Acione o botão Criar e preencha os campos Apelido e Senha. Em Grupo, escolha Administrador. Somente administradores podem alterar a estrutura do site. Dê OK e, de volta à lista de usuários, clique no apelido full e, na tela seguinte, acione Deletar. O usuário-padrão desapareceu (e você, que era ele, não está mais logado). Para continuar, aponte o browser para a página inicial: http://localhost/fullxml . Nela, entre como o usuário que você criou. Retorne ao menu Principal/Configurações. Preencha os campos. A caixa Aparência oferece 20 skins, ou temas, para o site. Escolha um diferente do padrão inicial, e clique em OK. Em seguida, na mesma página do
browser, encurte o endereço para a raiz do site: http://localhost/ fullxml. Confira: o site mudou de cara. Os blocos de opções nos itens Status de Moderação e Lista de Recursos permitem que você escolha as funções que deseja habilitar. Em todos os casos, as opções são On/Off. Você vai querer fóruns? Vai colocar arquivos para download?
5. DEFINA O CONTEÚDO
Seu site já está de pé. Falta agregar conteúdo. Clique em Principal/Páginas para adicionar páginas. Nessa tela, clique em Criar e digite o conteúdo. Para que a página entre no ar, escolha Sim na linha Publicação. Se você definir uma data de expiração, ela ficará no ar até essa data. A opção Conteúdos, no menu Principal, exibe todas as páginas do site. Importante: quando o administrador acessa a página, ela exibe um quadrado no título de cada item. Clique nele para editar o item. O menu Recursos permite criar e administrar opções como enquetes, fóruns e banners. O gerador de enquetes é superfácil de usar. Clique em Enquetes/Criar. Digite as perguntas e dê OK. A apuração é automática. Os textos aceitam tags HTML e o programa até traz um pequeno editor. Para abrilo, digite Ctrl+T quando Gerenciador: a administração é feita de qualquer lugar estiver escrevendo.
52 < C OL EÇ ÃO I NF O
TUTORIAL/LAYOUT
ADEUS, TABELAS DE HTML O PADRÃO CSS DEFINE O LAYOUT DO SITE, DEIXA A PÁGINA LEVE E RÁPIDA DE CARREGAR POR ANDRÉ CARDOZO
sar as tradicionais tabelas de HTML para separar as áreas de uma página está virando uma solução antiquada. Cada vez mais, os webmasters utilizam o padrão CSS (Cascading Style Sheets) para definir o layout do site no lugar das tabelas. A substituição se justifica — uma página de 60 KB com tabelas emagrece para coisa de 4 KB com CSS, reduzindo o tempo de carregamento e o consumo de banda. Assim, essa tecnologia, que há cerca de dois anos era usada basicamente para configurar
fontes e fundos de página, inaugurou a era tableless nos websites de todos os portes. A adoção do CSS não aconteceu antes porque o suporte dos browsers a essa tecnologia ainda começava. Mas os navegadores atuais, como Internet Explorer 6.0, Firefox 1.0.4 e Opera 7 e 8, interpretam o padrão com poucas diferenças (veja telas), o que permite utilizá-lo com precisão. Neste tutorial, vamos criar o layout de um site substituindo o comando “table” do HTML por um conjunto de recursos do CSS conhecido como CSS-P (Cascading Style Sheets Positioning). A principal vantagem desse método é que todo o layout fica num arquivo separado que vale para o site inteiro e só é carregado uma vez pelo navegador. Isso evita a repetição de tags nas páginas e permite alterações mais rápiCSS no IE: boa distribuição das quatro áreas do layout das no visual do site.
U
C OL EÇ Ã O I N FO > 53
TUTORIAL/LAYOUT
Escolhemos um layout com quatro áreas: cabeçalho horizontal (onde normalmente entram logotipo e banner), coluna esquerda (menu de navegação principal), coluna central (área de conteúdo e destaques) e coluna direita (navegação secundária, CSS no Firefox: leitura altera o título e a coluna à direita links para parceiros etc.). O arquivo pronto está dispode conteúdo, criando camadas que nível para download no endereço podem ser manipuladas separadamente. Dentro desse depósito, powww.info.abril.com.br/download/ 3466.shtml. demos usar normalmente todos os comandos HTML. Note que cada “div” possui um O HTML atributo “id” distinto, que define O primeiro passo é criar o arquivo HTML. Dentro do comando “head”, todas as áreas do layout. Assim, já é necessário escrever a seguinte tag: temos no arquivo HTML os quatro blocos de conteúdo. Salve o arqui Ela indica ao browser qual é a folha de estilo que deve ser tomaA FOLHA DE ESTILO do como referência para o layout Por enquanto, as áreas do layout (neste caso, “estilo.css”). No corpo ainda não estão em suas devidas do arquivo HTML temos quatro bloposições e são exibidas uma abaicos que definem as áreas: xo da outra. Isso ocorre porque não criamos o documento CSS, que é o
conteúdo do responsável por definir a posição cabeçalho
conteúdo de cada bloco na página. Esse será nosso próximo passo. da coluna esquerda
A folha de estilo nada mais é do
conteúdo da coluna central
que um arquivo em texto puro com a extensão CSS. Abrimos então o
conteúdo da Bloco de Notas do Windows e escoluna direita
A tag “div” serve como depósito crevemos os seguintes comandos:
1.
2.
TUTORIAL/LAYOUT
#topo { margin: 5px; height: 80px; background: silver; } #esquerda { position: absolute; top: 105px; left: 10px; width: 150px; background: silver; } #meio { CSS no Opera: diferença de leitura na coluna à direita margin-left: 170px; O primeiro bloco de comandos margin-right: 220px; se refere ao cabeçalho. Os elemenbackground: silver; } tos “margin” e “height” definem, respectivamente, a margem e a al#direita { position: absolute; tura em pixels. O atributo “background” determina a cor de fundo, top: 105px; mas é opcional e foi incluído aperight: 10px; nas para facilitar a visualização. width: 200px; A seguir, definimos as três colubackground: silver; nas do layout. O bloco da esquer}
VALIDE SUA PÁGINA O tableless já faz parte do conjunto de padrões da web, especificados pelo W3C (www.w3c.org), o consórcio que dita as regras tecnológicas da grande rede. Por isso mesmo, a tendência é de aumentar a compatibilidade do padrão entre os navegadores e acelerar o tempo de renderização das páginas.
Para seguir os padrões à risca, verifique se a página que você criou está correta, utilizando o serviço W3C Markup Validation Services, um validador de HTML gratuito disponível no endereço validator.w3.org. Basta postar o endereço de sua página, que o serviço mostrará as tags que apresentam erros.
C OL EÇ ÃO I NF O > 55
TUTORIAL/LAYOUT
da, que abrigará o menu de navegação, tem largura definida em pixels. A linha “position: absolute” permite que o webmaster determine a posição do bloco por meio de coordenadas. Neste caso, ele está a 105 pixels do topo e a 10 pixels do lado esquerdo da página. Esse procedimento vale também para a coluna da direita.
3. A COLUNA DO MEIO
O pulo-do-gato está no código usado na coluna do meio. Aqui, definimos apenas as margens esquerda e direita para evitar que a área se sobreponha às outras. Observe que, ao contrário dos blocos da esquerda e da direita, não há largu-
ra definida. Dessa forma, a área central é ajustada automaticamente, de acordo com o tamanho da janela do internauta. Caso o usuário redimensione o browser, a página será realinhada, evitando a barra de rolagem na horizontal. Salve o documento como “estilo.css” no mesmo diretório do arquivo HTML e faça o teste, redimensionando a janela do browser. Note que as áreas do topo e do meio se adaptam ao novo tamanho, enquanto as colunas da esquerda e da direita mantêm sua largura. Pronto, nosso layout está terminado e agora é só escrever uma carta de despedida sem saudade para as tabelas HTML.
Mais sobre o CSS Conheça outros comandos úteis em folhas de estilo > Comando
Função
Exemplo
> background
Define propriedades do fundo, como cor ou imagem
background: url(‘imagem/fundo.gif’)
> border
Determina propriedades da borda
border: solid 1px #000000
> border-style
Atribui o estilo à borda
border-style: solid
> color
Define cor da fonte ou do elemento
color: rgb(255,10,10)
> font
Define propriedades da fonte
font: 10px verdana bold
> font-family
Determina o tipo da fonte
font-family: arial
> font-size
Regula o tamanho da fonte
font-size: large
> list-style
Define propriedades dos elementos
list-style: disc inside
> margin
Cria espaço à volta do elemento
margin: 0px auto 0px 5px
> padding
Define espaço entre o texto e padding: 10px a borda
> text-align
Define o alinhamento do texto
text-align: justify
Obs.: outros comandos você pode encontrar no endereço: www.w3schools.com/css .
56 < C OL EÇ ÃO I NF O
TUTORIAL/SERVIDOR DE BLOG
BLOG PRONTO EM SEIS PASSOS
UM ROTEIRO PARA IMPLANTAR UM DIÁRIO EM SEU WEBSITE COM O WORDPRESS POR MAURÍCIO GREGO
uito mais que um diário de adolescente, o blog pode ser um canal eficiente e dinâmico para divulgar notícias e interagir com as pessoas. Uma equipe de desenvolvimento de software, por exemplo, pode publicar nele dados sobre atualizações que estão sendo realizadas. Neste tutorial, vamos usar o WordPress, um servidor de blog gratuito e de código-fonte aberto. Os requisitos básicos para rodá-lo são o servidor Apache, o interpretador de linguagem PHP e o gerenciador de bancos de dados MySQL. Esse trio de software faz parte da maioria dos planos de hospedagem em Linux oferecidos na internet. Vejamos os passos a seguir.
M
A BASE DE DADOS 1. A primeira coisa a fazer é criar um banco de dados no MySQL para o WordPress. Em geral, os provedores de hospedagem oferecem alguma ferramenta que possibilita gerenciar o banco de dados. O INFOLAB usou o phpMyAdmin. Na tela principal do phpMyAdmin, digite um nome para o novo banco e clique no botão Cria.
No nosso exemplo, usamos o nome wordpress. Vamos, agora, definir uma conta de usuário no MySQL para o WordPress. Volte à página principal do phpMyAdmin e clique no link Privilégios. Em seguida, acione Adicionar um Novo Usuário. No campo Nome do Usuário, digite um nome. Depois, especifique uma senha de acesso. Na seção Global Privileges, clique no link Marcar All. Clique no botão Executa para criar a conta.
A PREPARAÇÃO 2. Faça o download do WordPress (www.info.abril.com.br/download/ 3949.shtml) e descompacte-o. Você terá uma pasta chamada WordPress com os arquivos. Abra, num editor de textos, o wp-config-sample.php e procure por MySQL Settings. Nas três linhas seguintes, coloque o nome do banco de dados, o nome do usuário e a senha que você definiu nos passos 1 e 2, como neste exemplo: define('DB_NAME', 'wordpress'); define('DB_USER', 'infolab'); define('DB_PASSWORD', 'senha');
Na quarta linha dessa seção, indique o servidor onde roda o MySQL. C OL EÇ Ã O I N FO > 57
TUTORIAL/SERVIDOR DE BLOG
Na maioria dos provedores de hospedagem, o MySQL e o Apache estão no mesmo servidor. Nesse caso, o endereço é localhost (se tiver dúvidas, pergunte ao provedor), que é o padrão do WordPress. Fica assim: define('DB_HOST', 'localhost');
No final, salve esse arquivo com o nome wp-config.php.
A INSTALAÇÃO 3. Vamos instalar o WordPress. Faça o upload da pasta wordpress para o servidor. Abra o navegador e, na barra de endereço, digite a URL do seu site seguida de /wordpress/install.php, como neste exemplo: http://www.empresa.com.br/ wordpress/install.php
O WordPress inicia um script de instalação, verifica qual a versão do PHP no servidor e mostra uma mensagem. Se estiver tudo certo, clique no link Let's Go. Na tela seguinte (Step 1), o script configura a base de dados no MySQL. Clique em Step 2 para avançar. O instalador vai criar as tabelas do blog. No campo no pé da página, digite o endereço do seu site, como:
visitado. O endereço é do tipo www.empresa.com.br/wordpress.
OS AJUSTES BÁSICOS 4. Passemos para a configuração básica do WordPress. Na tela final do script de instalação ou na própria página do blog, clique no link Login. Na caixa de autenticação, forneça o nome admin e a senha que você anotou. Você vai entrar no sistema de gerenciamento. Também é possível chegar a ele navegando até www.empresa.com. br/wordpress/wp-login.php. No menu na parte superior da tela, clique em Options. A aba General deverá estar ativa. No campo Weblog Title, digite um nome para o blog. Na linha logo abaixo, ponha uma breve descrição dele, como “Novidades do software X”. No campo E-mail Address, escreva seu endereço de e-mail. No item Membership, assinale se você quer que qualquer pessoa possa se cadastrar como usuário e se qualquer usuário pode publicar artigos.
http://www.empresa. com.br/.
Na etapa seguinte (Step 3), o instalador gera uma senha aleatória para o usuário admin, o administrador. Anote-a. Com isso, concluímos a instalação e o blog já pode ser
WordPress: formulário para escrever e definir ações
TUTORIAL/SERVIDOR DE BLOG
Na seção Date and Time, digite -3 no campo Times in the Weblog Should Differ By (se o horário de verão estiver em vigor, use -2). Assim, estamos dizendo ao WordPress para empregar o horário oficial brasileiro. No campo Default Date Format, digite j/n/Y para exibir as datas no formato dia/mês/ano. Em Teste de blog: página simples e fácil de navegar Default Time Format, escreva G:i. Assim, os horários serão Clique nesses sinais para aumentar exibidos na forma horas:minutos, ou diminuir o nível. Quando o nível com contagem de 24 horas. Quando é maior ou igual a 1, a pessoa apareterminar, clique no botão Update Opce na lista de autores e pode publitions. Se quiser ver como ficou o blog, car mensagens. Se o nível for 0, a taclique em View Site na barra de nabela mostra os sinais + e X. Clicando vegação superior. Depois, use o boem X, o usuário será excluído. tão Voltar do navegador para retorOS TOQUES FINAIS nar ao sistema de gerenciamento. Seu blog já pode ser usado. Mas há OS USUÁRIOS várias outras coisas que você pode O WordPress permite que várias pesfazer para personalizá-lo. Clique em soas publiquem notícias no blog e Links no menu de administração e comentem as mensagens. Cada usuátroque os links falsos do blog por rio é classificado num nível de 0 a 10. links para seções do seu site. Para Quanto mais alto o nível, mais recurcriar categorias em que podem ser sos ficam acessíveis a ele. Quando alclassificadas as mensagens, clique guém se cadastra, é classificado no em Categories. Se quiser permitir a nível 0. Nesse nível, é permitido apepublicação de fotos no blog, clique nas ler as mensagens. Mas o admiem Options e, em seguida, na aba nistrador pode promover o usuário. Miscellaneous. Nela, assinale a opPara administrar os usuários, no ção Allow File Uploads e configure sistema de gerenciamento, clique em as demais opções. Quando terminar Users. Observe as tabelas de autores a configuração, não se esqueça de e usuários. Na coluna Level, aparece clicar no botão Update Options pao nível do usuário e os sinais + e -. ra executar as mudanças.
6.
5.
C OL EÇ ÃO I NF O > 59
TUTORIAL/STREAMING
SOM E VÍDEO JORRAM DA TELA COMO PRODUZIR UM SITE EM PHP E MYSQL PARA OFERECER STREAMING DE MÚSICAS E FILMES POR AIRTON LOPES, COM OSMAR LAZARINI
ue tal montar um portal incrementado, com direito a conteúdo de áudio e vídeo para os visitantes? Uma ferramenta que possibilita produzir sites multimídia com enorme variedade de módulos é o Xoops (veja teste na página 29 ), um sistema de gerenciamento de portal de código aberto baseado em PHP e MySQL e totalmente gratuito. Entre os mais de 100 módulos desenvolvidos pelos xoopistas de carteirinha, há módulos para o streaming de arquivos de som e vídeo e para adicionar rádios online ao site. Siga os passos a seguir para pôr suas músicas e vídeos na web em grande estilo com o auxílio do Xoops.
Q
uma versão em português. O download pode ser feito em www.info. abril.com.br/download/3917. shtml.
Baixe também os módulos Mediashow (www.info.abril.com. br/download/3918.shtml) e iRadio (www.info.abril.com.br/ download/3919.shtml). O envio dos arquivos para o hospedeiro do site será feito com o cliente de FTP CuteFTP Pro 7.0 ( www.info.abril. com.br/download/2432.shtml), um
DOWNLOADS 1. Graças à comunidade verde-e-amarela, o Xoops 2.0.10 possui
Site multimídia: todo feito com módulos do Xoops
TUTORIAL/STREAMING
siga pelo assistente. No campo Default Local Folder, indique a pasta html do Xoops e clique nas opções Next até concluir o processo. Em seguida, o CuteFTP Pro se conecta automaticamente ao seu site. Configuração: definindo preferências gerais do Xoops
shareware que funciona normalmente durante 30 dias sem pedir registro. Naturalmente, o serviço de hospedagem que receberá o site tem de oferecer suporte a PHP e MySQL. No nosso caso, usamos um host que roda em Red Hat Linux.
EXTRAÇÃO DE ARQUIVOS 2. Depois de fazer os downloads, extraia o conteúdo do Xoops, formado por três pastas (docs, html e extras), para o disco rígido. Em seguida, retire o conteúdo do Mediashow para o interior do diretório Modules, que está dentro da pasta html do Xoops. Faça o mesmo com os arquivo do iRadio. Instale o CuteFTP Pro. Assim que o programa é aberto pela primeira vez, surge um assistente para configurar os dados da conta de FTP fornecidos pelo serviço de hospedagem. Preencha o endereço do FTP, nome de usuário e senha e
FTP 3. Dentro do CuteFTP
Pro, o campo à esquerda mostra os arquivos locais. Do lado direito, na janela maior, exibe o conteúdo que está no diretório remoto do FTP. Para enviar os arquivos, basta arrastá-los para a janela do FTP. Você deve transferir para o host todos os diretórios e arquivos que estiverem dentro da pasta html. O mais seguro é enviar os arquivos em lotes, para evitar problemas com hosts que limitam o número de conexões simultâneas. Depois que todos os arquivos forem enviados, aponte o browser para a URL do site. Automaticamente, você será redirecionado para a tela de instalação do Xoops. Escolha o idioma português.
BANCO DE DADOS 4. Hora de começar a montagem do site. Vamos criar o banco de dados. Nesse momento aparece uma vantagem na escolha de hosts LiC OL E ÇÃ O I NF O > 61
TUTORIAL/STREAMING
5.
nux, pois geralmente eles oferePERMISSÕES cem a ferramenta cPanelX, que faDe volta ao Xoops, uma tela em cilita tremendamente a criação do português mostra quais diretórios banco de dados. Acessar o cPanelX (uploads, cache, templates_c) e aré fácil, basta entrar no endereço quivo (mainfile.php) deverão receda ferramenta fornecido pelo hosber permissões especiais. A altepedeiro. No cPanelX, clique em ração é feita por meio do CuteFTP MySQL Databases. Na tela seguinPro. Clique com o botão direito sote, no campo DB, digite o nome do bre cada diretório e arquivo citaseu banco de dados e aperte o bodo e escolha a opção Properties/ tão Add Db. Em seguida, apenas CHMOD. Para dar permissão geral confirme o nome do banco criado de escrita para eles, nos campos e clique em Go Back. O cPanelX ge- Group e Write, marque a caixa de ra um banco de dados. Atenção pachecagem Write e confirme. Em sera a grafia do nome (nome do usuá- guida, volte ao Xoops e atualize a rio_nome do banco de dados) depágina de permissões. Se todas as terminada pela ferramenta. O própermissões exibirem sinal verde, ximo passo é criar um usuário papressione o botão Prosseguir. Cara acessar o banco. Para isso, em so alguma permissão não tenha siUsers, indique um nome de usuádo aplicada corretamente, o prório e senha para ele. O esquema prio Xoops faz o alerta e impede a de nomenclatura será o mesmo: continuação da instalação. nome do usuário titular_nome do usuário do banco. Na mesma teCONFIGURAÇÃO la, você vai relacionar o novo usuá- Chegamos à janela de configurario ao banco de dados. No campo ção geral. Indique o nome do usuáUser, selecione o nome de usuário do banco de dados, e, em Db, indique o nome do banco. Conclua pressionando Add User to Db. Para evitar confusão com a variedade de nomes de usuário (o do titular do site e o do banco de dados) e senhas, anote tudo em local seguro. Módulos: o Mediashow e o iRadio estão na lista
6.
TUTORIAL/STREAMING
cute. Em seguida, remova o diretório Install. Tudo isso é feito pelo CuteFTP Pro. O Xoops vem com alguns recursos básicos pré-instalados, como fórum, notícias, downloads e links. A variedade de módulos que podem ser instalados posteriormenGrupos: define quais grupos terão acesso aos módulos te é enorme, como agenda, álbum de rio do banco de dados, senha e nofotos etc. O visual também é conme do banco nos respectivos camfigurável com temas e skins (pepos. Os demais campos não preciles). Neste tutorial, vamos indicar sam ser editados. Clique em Prosapenas como configurar os móduseguir e, na tela seguinte, confira los Mediashow e iRadio. Ao entrar no painel de controle, no lado esos dados. Se tudo estiver em ordem, pressione Prosseguir nas tequerdo, está o acesso ao System las seguintes até a etapa de criaAdmin. Posicionando o cursor soção de usuário para o administrabre o ícone do System Admin, apador do site, na qual devem ser forrece um menu. Clique em Módunecidos nome, e-mail e senha. los. Agora, dentro da lista de móFeito isso, siga clicando em Prosdulos, escolha aqueles que entraseguir. Na última tela, você enconrão na página clicando no ícone tra um link para ir à página inicial com o disquete de cada um dos escolhidos. Confirme e, no rodado site recém-criado. Faça o login como administrador para começar pé da página seguinte, clique paa configurá-lo no Painel de Conra retornar à administração de mótrole do Xoops. dulos. Faça isso com o iRadio e o Mediashow. MÓDULOS ACESSO A primeira providência nessa etapa é alterar novamente as proprieEm seguida, você deve determidades do mainfile.php, permitinnar quem terá acesso ao conteúdo apenas a sua leitura (Read), dedo de áudio e vídeo do site. No sabilitando as caixas Write e Exemenu System Admin, clique em
7.
8.
C OL EÇ ÃO I NF O > 63
TUTORIAL/STREAMING
Grupos. Para deixar os arquivos de som e vídeo totalmente acessíveis, na opção Anônimos, clique em Modificar. No campo Permissões de Acesso aos Blocos, selecione as opções Internet Radio, My Musics e My Films e clique em Atualizar Grupo. Agora você irá efetivamente modelar a página, posicionando os blocos com cada módulo. Pelo menu System Admin, escolha Blocos. No campo Grupo, escolha Anônimos. Você verá todos os blocos. Nas colunas correspondentes, escolha a posição de cada bloco na página e indique quais deverão ficar visíveis. Clicando em Editar, você pode alterar algumas características de cada bloco, como o título. Uma dica: a menos que você queira que os arquivos comecem a tocar automaticamente toda a vez que a página for carregada, entre no modo de edição de My Films e My Musics e altere o valor do campo Autostart para zero. Finalize clicando em Enviar e, depois, em Página Principal.
Pro, coloque os arquivos MP3 no subdiretório Audio. O caminho completo é (endereço-raiz do site/ modules/mediashow/media/audio). Faça o mesmo com os videoclipes nos formatos WMV e MPEG, enviado-os para o subdiretório Video (endereço-raiz do site/modules/ mediashow/media/video). Para configurar a rádio, no Painel de Controle, deixe o cursor do mouse sobre o ícone iRadio, para visualizar o menu, e clique em Administration. O Xoops traz 11 opções de rádios online estrangeiras preconfiguradas. Se você quiser adicionar outras, clique em Add New Station e indique o nome, o site e a URL do streaming de áudio da rádio. Sempre confirme as mudanças clicando em Save. Assim que o banco de dados for atualizado, todos os arquivos de som e vídeo e links para rádios online estarão disponíveis no site.
SOM E VÍDEO 9. A estrutura básica do site já está pronta para tocar som e vídeo. Então é preciso fazer o upload dos arquivos para o host. Com o CuteFTP 64 < C OL EÇ ÃO I NF O
Administração: editando preferências do Mediashow
TUTORIAL/LIVRO DE VISITAS
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
livro de visitas é um dos recursos mais usados para saber a quantas anda a popularidade de um site. Em essência, ele é uma página que acumula todas as opiniões dos visitantes logo abaixo do formulário de entrada de dados. Neste tutorial, mostraremos como criar um livro de visitas usando o Dreamweaver MX 2004, da Macromedia. Para testar a página, é necessário que ela esteja em um servidor com PHP e MySQL insta-
O
lados. Em nosso caso, foi usado o servidor web Internet Information Services (IIS) 5.1, da Microsoft, com PHP 4.3 e MySQL 4.1.
1. O banco de dados
Antes de passar para a criação do formulário, vamos criar um banco de dados no MySQL. Isso pode ser feito por meio de comandos ou de interfaces gráficas. No nosso exemplo, usamos a interface gráfica SQLyog (www.info.abril.com.br/download/ 3232.shtml) e criamos um banco chamado “visita”. Dentro do banco de dados montamos uma tabela com cinco campos: “id”, “nome”, “email”, “comentario” e “data”. O primeiro campo serve como chave primária do banco. Ele recebe números inteiros e aumenta seu valor em um a Livro: as mensagens ficam abaixo da área de formulário cada novo comentáC OL E ÇÃ O I NF O > 65
TUTORIAL/LIVRO DE VISITAS
rio inserido no livro de visitas. Os campos “nome”, “email” e “comentario” são do tipo varchar e recebem os dados digitados pelo internauta. Limitamos o número de caracteres desses campos a 50, 30 e 500 unidades, respectivamente. O campo “data” insere o dia em que o comentário é feito.
2. O Dreamweaver
Com o banco de dados montado, inicie o Dreamweaver. Antes de elaborar a página do livro de visitas, precisamos montar um site para ela. Para isso, acione o gerenciador, por meio do menu Site > Manage Sites, e clique no botão New. Surge uma janela de configuração. Escolha a categoria Local Info e insira o nome do site, seu diretório local e sua pasta de imagens. Na categoria Remote Info, defina o diretório remoto e o tipo de acesso ao servidor. Neste tutorial, o acesso é local. Se o seu ser-
vidor for remoto, será necessário informar os dados para a configuração da conexão via FTP. Para terminar a configuração do site, acesse a categoria Testing Server. Nela, defina o modelo de servidor (neste tutorial, PHP MySQL). Novamente informe o tipo de acesso e o diretório remoto. Clique em OK para encerrar a configuração.
3. O livro
Agora que temos o site configurado, vamos passar para a elaboração do livro de visitas. Clique em File > New e, na tela de criação do arquivo, escolha a categoria Dynamic e marque a opção PHP. Estamos a esta altura com um documento em branco vinculado ao site que criamos. Aqui você pode usar as ferramentas do Dreamweaver para elaborar o layout desejado. Em nosso caso, criamos uma tabela de uma linha, sete colunas e 700 pixels de largura. Na primeira coluna, inserimos um logotipo da INFO. Nas outras seis colunas digitamos os nomes das seções. Logo abaixo da tabela anterior, criamos uma outra tabela, desta vez com uma linha, uma coluna e 700 pixels de largura. É nessa tabela que vamos inSQLyog: interface para o banco de dados MySQL serir o formulário.
66 < C OL E ÇÃ O I NF O
TUTORIAL/LIVRO DE VISITAS
4. O formulário
Com o layout montado, passamos para a criação do formulário. Ative a barra de componentes de formulário, clicando sobre a categoria Common e escolhendo a opção Forms. Em Registro: o formulário insere a mensagem no banco seguida, clique no botão de inserção de formulário, o A criação do campo de comenprimeiro ao lado da palavra Forms. tários é fácil. Digite a palavra “CoSurge um retângulo com bordas mentários” e clique no botão Text pontilhadas. É dentro desse retân- Area da barra de ferramentas pagulo que serão inseridos os compo- ra inserir a área de texto. Na janenentes do formulário. la de propriedades, mude a identificação da caixa para “comentário”. Os componentes Para completar o formulário, só Para inserir os componentes, clique falta fazer o botão que envia os dadentro do retângulo vermelho e di- dos. Clique no ícone Button da bargite a palavra “Nome”. Ao lado de- ra de ferramentas e mude o texto la, insira uma caixa de texto, clican- do botão para “Enviar”. do no botão Text Field da barra de O formulário está pronto. Logo componentes de formulário. abaixo dele fica a área em que as Agora, selecione a caixa de texto respostas aparecerão, uma abaixo e, no painel de propriedades, mude da outra. Para montá-la, digite as sua identificação para “nome” no palavras “Data”, “Nome”, “E-mail” e campo Text Field da janela de pro- “Comentários”, uma abaixo da oupriedades. Em seguida, limite o vatra. Isso completa a parte visual. lor de caracteres a 50.
5.
6. Os comentários
Ainda dentro da área de formulário, pule uma linha e digite a palavra “E-mail”. Ao lado dela, insira uma caixa de texto, clicando no botão Text Field. Dê o nome de identificação “email” à caixa e limite o número de caracteres a 30.
7. A conexão
Chegou a hora de inserir a programação do formulário. Abra o painel Databases e, nele, clique no sinal de mais e escolha a opção MySQL Connection. Surge a tela de configuração da conexão. No primeiro campo, dê um nome a ela. No segundo, insiC OL E ÇÃ O I NF O > 67
TUTORIAL/LIVRO DE VISITAS
ta será enviado após clicar no botão. Como as respostas serão inseridas na própria página do formulário, basta digitar o nome do arquivo em que se está trabalhando. Clique em OK para encerrar a configuração. Recordset: determinando a ordem das mensagens
ra o endereço do servidor (neste tutorial, usamos o localhost). Digite o nome de usuário “anonymous” no terceiro campo e deixe a senha em branco, já que o formulário será público. No campo Databases, clique no botão Choose. O Dreamweaver exibe todos os bancos de dados do sistema. Escolha o banco de nome “visita”, criado no passo 1, e clique em OK. A conexão é exibida no painel Databases.
8. As ações
A primeira ação do formulário é inserir dados no banco, toda vez que o internauta clicar no botão Enviar. Para programar essa tarefa, abra o painel Server Behaviors, clique no sinal de mais e escolha a opção Insert Record. Surge a tela de inserção de registro. No campo Connection, selecione a conexão criada no passo 7. No último campo da janela devemos indicar para qual página o internau-
9. A exibição
Além de inserir os dados no banco, nosso livro de visitas exibe todas as mensagens enviadas anteriormente. Para programar essa ação, abra o painel Server Behaviors, clique no sinal de mais e escolha a opção Recordset. Na tela de configuração, dê um nome ao Recordset. No campo Connection, escolha a conexão criada no passo 6. Na opção Sort, escolha a combinação “id” e “Descending”. Isso significa que o recado mais recente do livro (ou seja, com maior “id”), aparecerá sempre acima do anterior. Clique em OK.
10. As mensagens
Com as ações prontas, falta definir onde aparecerão as mensagens. Neste tutorial, elas serão exibidas logo abaixo do formulário, na área criada no passo 5. Vamos agora substituir as palavras digitadas naquele passo por variáveis. No documento, selecione a palavra “Data”. Abra o painel Bindings e na-
TUTORIAL/LIVRO DE VISITAS
vegue pela árvore Recordset até chegar ao campo “data”, criado no passo 1. Marque o campo e clique no botão Insert. Pronto, a palavra “Data” foi substituída por uma variável que incluirá a data em que o comentário foi enviado.
11. O nome e o e-mail
O nosso próximo passo é inserir a variável referente ao campo “nome”. Selecione a palavra “Nome” e, no painel Bindings, navegue pela árvore Recordset até chegar ao campo “nome”. Marque o campo e clique no botão Insert. Temos outro campo substituído. O próximo campo a ser trocado é o de e-mail. Selecione a palavra “E-mail” e, novamente no painel Bindings, navegue até o campo “email”. Marque o campo e clique
no botão Insert. A variável referente a e-mail será inserida. O último campo a ser substituído é o de comentário. Selecione a palavra “Comentário” e, no painel Bindings, navegue até o campo “comentario”. Marque o campo e clique no botão Insert. Agora todas as variáveis estão no formulário.
12. A lista de comentários
Para terminar o formulário, precisamos fazer com que a região que exibe os comentários se repita a cada novo registro. Assim, os comentários serão acumulados na página do livro de visitas. Para executar essa tarefa, selecione toda a área criada no passo 5 e configurada nos passos anteriores. Depois, abra o painel Server Behaviors, clique no sinal de mais e marque a opção Repeat Region.
13. O teste
Resultado: o livro de visitas é exibido no navegador já com as mensagens na parte inferior da tela
Na janela seguinte, selecione a opção All Records para que todos os registros sejam exibidos na mesma página. Depois, clique em OK. O formulário está pronto. Lembrese de que, para testar o funcionamento, é necessário que a página esteja em um servidor com PHP e MySQL instalados. C OL EÇ ÃO I NF O > 69
TUTORIAL/CATÁLOGO
Catálogo: o Dreamweaver lê os registros e preenche a página com os produtos
MOSTRUÁRIO VAPT-VUPT
CRIE UM CATÁLOGO DE PRODUTOS NO DREAMWEAVER COM COMANDOS DE MENU POR CARLOS MACHADO
uer montar um catálogo de produtos para uma loja online na maior moleza? Experimente o Dreamweaver, da Macromedia, um software cheio de facilidades para o desenvolvedor de sites. Neste tutorial, vamos construir um mostruário com recursos do Dreamweaver MX 2004 que permitem montar páginas dinâmicas e exibir informações con-
Q
tidas em bancos de dados, apenas com comandos de menu. Em outras palavras, não é preciso ter prática nem habilidade com programação, seja de banco de dados, seja de scripts para automação das páginas. Além do Dreamweaver, vamos usar o servidor web IIS e o banco de dados Access. O sistema operacional deve ser o Windows 2000 ou XP, versão Professional (o XP Home não traz o IIS).
TUTORIAL/CATÁLOGO
1. INSTALE O IIS
A instalação do servidor web é o primeiro passo. Vá ao Painel de Controle e acione a opção Adicionar ou Remover Programas. Na caixa de diálogo, clique em Adicionar/remover componentes do Windows. Procure o Internet Information Services (IIS) na lista de componentes, marque a caixa correspondente e clique em Avançar. O Windows vai pedir que você coloque no drive o CD de instalação. Para testar se o servidor IIS foi instalado corretamente, digite no browser o seguinte endereço: localhost. Deve aparecer uma página web avisando que o servidor está ativo. Ao instalar o servidor web no micro, o Windows cria no drive C o subdiretório Inetpub\wwwroot, que é a pasta-padrão do web site local. Vá a essa pasta e crie nela um diretório chamado catalogo. Nele vamos colocar todos os objetos do catálogo de produtos da loja Great Fun. O passo-
a-passo que vamos mostrar permite que você desenvolva e teste a solução em sua máquina e depois faça o upload das páginas para um site remoto na internet.
2. BANCO DE DADOS
Ativado o servidor, passemos ao banco de dados. Construa no Access um banco de dados com uma tabela simples (tb_produtos), contendo os itens necessários à apresentação do produto. Outros campos podem ser incluídos, mas aqui trabalharemos apenas com NomeProduto, Descrição, Preço e Foto. Este último campo deve conter o nome do arquivo JPG com a foto do produto. Salve o banco de dados com o nome produtos.mdb e copie-o para o diretório da solução: Inetpub\www root\catalogo. Alimente o banco de dados com as informações sobre os produtos e copie também para a pasta catalogo todos os arquivos com as fotos dos produtos.
3. PÁGINA
IIS: a instalação do servidor web é o primeiro passo
BÁSICA Vamos agora criar a página-base para o catálogo de produtos. No Dreamweaver, acione File/New. Na tela New Document, indique o tipo de página que dese ja montar. Em Category, escolha Dynamic Page e, ao lado, ASP VB Script. Clique C OL E ÇÃ O I NF O > 71
TUTORIAL/CATÁLOGO
em Create. Você tem uma página ASP em branco. Salve-a com o nome catalogo.asp. Agora, use tabelas (Insert/Table) para compor a estrutura do documento. Em cima, uma tabela horizontal com o logotipo da empresa e links de interação com o usuário do site: Ajuda, Cadastro, Busca etc. Outra linha horizontal pode conter links para os tipos de produtos. Nossa loja fictícia, a Great Fun Access: tabela de apresentação dos produtos Importadora, vende produtos de informática e tecnologia de consumo. Abaixo, numa coluna à esquerda, há ses. Em seguida, clique no botãozioutro menu, com links para subcatenho com um sinal + e escolha a opgorias de produtos. A barra superior ção Data Source Name (nome da e a coluna à esquerda têm a mesma fonte de dados). Na janela que se cor de fundo, que deve se harmoniabre, digite um nome na caixa Conzar com a cor do logotipo. Nessas nection Name — por exemplo, caáreas já definidas ficam os elemenmeras (é melhor sem acento, para tos fixos da página. No retângulo resevitar eventuais problemas). Em setante, vamos montar os itens dinâmiguida, clique no botão Define e, na cos, que são a razão deste tutorial. tela seguinte, escolha a alternativa Banco de Dados do Access. Acione o botão Configurar e, depois, SeleCAMPOS DE DADOS No quadrado livre da página, insira uma tabela com duas colunas: uma para a foto do produto e a outra para nome, descrição e preço. Agora, vamos dizer ao Dreamweaver onde estão os dados que vão alimentar a página. Na coluna à direita da tela do programa, na subjanela Application, cli- Automação: os campos de dados (à direita da tela) são arrastados simplesmente para a página que na orelha Databa-
4.
TUTORIAL/CATÁLOGO
cionar. Indique o endereço do banco de dados produtos.mdb e dê OK. Agora, marque o botão Using Local DSN e acione OK. Na janela da orelha Databases, aparece a conexão cameras. Abra-a, e veja que a caixa Tables exibe a tabela tb_produtos. Dentro dela estão todos os campos da tabela. Com isso, definimos uma conexão com o banco de dados. Agora, precisamos usar essa conexão. Clique na orelha Bindings e acione o botão + e escolha Recordset (Query). Na tela Recordset, escolha cameras na caixa Connection e dê OK. Os nomes dos campos da tabela produtos aparecem listados. Arraste os campos NomeProduto, Descrição, Preço e Foto para os lugares onde devem aparecer na tabela livre. Salve o arquivo e acione F12 para ver como vai ficar no browser. Confira: em lugar da foto de um produto, aparece o nome do arquivo correspondente. Para resolver isso, volte ao design da página, apague o campo da foto e dê
o comando Insert/Image. Na janela Select Image Source, clique na opção Data Sources, marque o campo Sources e dê OK. Salve o arquivo e reveja-o no browser. Agora, está perfeito. Na verdade, não deveríamos ter arrastado o campo Foto para a página. Como se trata de imagem, o procedimento correto é feito por meio do comando Insert/Image.
DADOS DINÂMICOS 5. Até agora, só apareceu um produ-
to na página, que é o primeiro registro da tabela. Para mostrar mais produtos, é preciso varrer a base de dados. Para isso, o Dreamweaver oferece um belo truque. Ele permite que você defina áreas da página que devem ser repetidas, cada uma mostrando um registro de dados. Como fazer isso? Selecione a tabela que contém os campos de dados. Em seguida, na subjanela Application, orelha Server Behaviors (comportamentos do servidor), clique no botão + e escolha Repeat Region. Na caixa de diálogo com esse mesmo nome, indique o número de produtos que devem aparecer numa página. O número vai depender do tamanho da foto e da descrição a serem exibidos. Dê OK, salve o arquivo e veja-o no browser Imagem: o comando Insert/Image põe a foto no lugar (F12). Perfeito. C OL EÇ ÃO I NF O > 73
TUTORIAL/CATÁLOGO
PAGINAÇÃO 6. Você pode definir, por exemplo, que cada página exiba apenas dez produtos. Muito bem. Mas como mostrar a próxima página? Não se preocupe: o Dreamweaver também oferece o recurso de paginação. Abaixo da tabela onde aparecem os dados, inclua outra, sem bordas, e com seis colunas. Ajuste a largura das colunas para que quatro delas, menores, fiquem no centro. Nelas vamos colocar links, respectivamente, para a primeira página, a página anterior, a próxima e a última. Selecione o item que vai receber o link de primeira página (pode ser texto ou imagem) e volte à orelha Server Behaviors. Clique no botão + e escolha Recordset Paging/Move to First Record. Para o botão página anterior, repita o procedimento e escolha Move to Previous Record.
Para os links seguintes, aplique Move to Next Record e Move to Last Record. Falta o último detalhe. Se, na primeira página, você clicar no link para ela mesma ou a anterior, produzirá um erro. Para evitá-lo, selecione o link e aplique nova regra. Clique no botão + e selecione Show Region/Show Region If Not First Record. Ou se ja, o link só aparecerá se a página não for a primeira. Repita o procedimento para o link de página anterior. Nos outros dois, próximo e último, escolha Show Region If Not Last Record. Tarefa concluída. Você ainda pode sofisticar o seu catálogo. Crie no banco de dados uma tabela para cada categoria de produtos: câmeras, monitores, celulares, armazenamento etc. Na montagem do catálogo, destine uma página para cada categoria. Cada uma dessas páginas de categorias estará vinculada a uma tabela de dados. Há outra opção: reúna tudo no mesmo banco de dados e associe cada página a um grupo de dados filtrado pela categoria. Para apreciar o catálogo diretamente no seu navegador, digite:
Paginação: exibição de número de produtos pré-definida 74 < C OL E ÇÃ O I NF O
localhost/catalogo/ catalogo.asp.
TUTORIAL/HELP DESK
O PHP CONVERSA COM OS CLIENTES ONLINE MONTE UM SISTEMA DE BATE-PAPO PARA ATENDER AOS VISITANTES DO SITE POR CARLOS MACHADO
osso ajudá-lo? A inicia- fora do horário de atendimento), o tiva de um atendente visitante pode enviar uma mensaonline impressiona bem gem de e-mail à empresa. Veja a seo visitante de qualquer guir os passos para obter e instalar site, especialmente os que vendem o Crafty Syntax Live Help. produtos ou serviços e querem se diferenciar. Por isso mesmo, no tuOS INGREDIENTES torial a seguir, vamos mostrar como Confira a lista do que você precisa adicionar a um site um sistema de para a instalação. Primeiro, você debate-papo ao vivo. A ferramenta báve ter acesso a um servidor web Lisica é o Crafty Syntax Live Help, um nux no qual estejam ativos o interproduto de código aberto que é pretador de scripts PHP e o banco de construído em PHP e usa o banco dados MySQL. Não é necessário code dados MySQL para armazenar as informações. O Crafty Syntax deve ser instalado num servidor web. O serviço é chamado por meio de um link que pode ser colocado em qualquer página do site. Esse link abre uma sessão de bate-papo entre o internauta e um atendente. Se o sistema de chat ao vivo não estiver ativo (por exemplo, Configuração: coloque as mensagens em português
P
1.
C OL EÇ ÃO I NF O > 75
TUTORIAL/HELP DESK
nhecer nada de PHP, mas é preciso pelo menos saber criar um banco de dados em SQL e lidar com arquivos no Linux. Para começar, faça o download do Crafty Syntax Live Help no endereço www.info. abril.com.br/download/ 4167.shtml .
Para deixar tudo pronto, prepare o MySQL. Crie um banco de dados vazio. Uma vez logado no MySQL, o comando é simples: create database livehelp; livehelp, no caso, é o nome do banco de dados, Crafty Syntax: tela de instalação define acessos mas você pode escolher outro. Anote o nome do usuário e a você deve digitar o número 777 ou senha desse banco de dados. então marcar todas as caixas Read, Write, Execute. Agora, abra seu browser e execute o arquivo setup.php no A INSTALAÇÃO Você pode ter baixado um arquivo site, chamando a seguinte URL: www. compactado no formato TAR.GZ ou seudominio.com.br/livehelp/ ZIP. Extraia os arquivos e faça o setup.php upload de todos eles para o subdiretório /livehelp no diretório-raiz de A CONFIGURAÇÃO seu website. (Se quiser, renomeie o Agora, você entrou no configurador diretório para algo como /ajudaon- automático do Crafty Syntax. Acomline, /ajuda ou algo que lhe pareça panhe o roteiro: melhor.) Altere as permissões do arquivo config.php para 777 — ou se- A. Na caixa de combinação Langua ja, licença para ler, escrever e exe- ge, escolha o idioma Portuguese cutar, concedida a todos: público, (Brazilian) e, como se trata da prigrupo e usuário. Uma forma de fa- meira instalação, escolha New Inszer isso é clicar com o botão direi- tallation na caixa Installation. O noto no arquivo config.php e, no me- vo idioma só entrará em ação denu, escolher CHMOD ou Change At- pois que os ajustes forem completributes. Abre-se uma caixa, na qual tados. Tanto a administração do
2.
3.
TUTORIAL/HELP DESK
Crafty Syntax como as telas que apaassim: var/www/html/livehelp. recem para o usuário estarão em Se tiver dúvida sobre esse camiportuguês. nho, consulte a empresa que hosB. Na caixa Title of your Live Help, peda seu site. G. Digite uma mensagem de boasdigite o título do seu serviço de bate-papo online. Pode ser, por exemvindas. Ela aparecerá quando o usuário abrir o Live Help. Pode ser plo, “Loja X — Atendimento Online”. Em nossa montagem usamos “Atenalgo como “Bem-vindo ao nosso sisdimento Infolab”. tema de ajuda online. Para iniciar, C. Na caixa Live Help — HTTP Path, digite seu nome na caixa abaixo”. H. Na caixa Database, selecione o digite o endereço completo do sistema de bate-papo: http://www. formato de banco de dados que voseudominio.com.br/livehelp. cê vai usar. Escolha a opção MySQL. Adapte esse endereço ao nome do O Craft Syntax também dá suporte domínio e ao nome do diretório, caa banco de dados de texto. O MySQL, no entanto, é uma alternaso você não tenha usado livehelp. Atenção: não inclua uma barra (/) no tiva mais segura. I. Agora, indique as informações final do endereço. A caixa LiveHelp — HTTPS não precisa ser preenchirelativas ao banco de dados da, a não ser se você decidir usar o MySQL. Na caixa SQL Server, indiprotocolo seguro HTTPS. que localhost. Em SQL Database, D. Na seção User/Password, digite digite o nome que você deu ao o nome de usuário do administrador banco de dados (livehelp ou oue uma senha, duas vezes. tro). Nas caixas SQL User e SQL E. Na seção Administration EPassword, digite o nome de usuámail, forneça o endereço do administrador. Se você esquecer a senha, o Live Help a enviará para esse endereço. F. Agora, em Full Path to Live — Help, forneça o caminho completo do programa. Atenção: não se trata de uma URL, mas do diretório do programa na estrutura do servidor. É algo que varia conforme a estrutura do servidor. Mais ou menos Atendimento: bate-papo na tela do operador C OL E ÇÃ O I NF O > 77
TUTORIAL/HELP DESK
rio e a senha do administrador, dedique o tipo de HTML que deseja finidos durante a criação do bancriar. Na caixa associada à pergunco de dados. ta “Qual formato você quer?”, esJ. Clique no botão Install. O Crafty colha Link Simples (Sem Opções Syntax está configurado. Mas, ande Convite). Acione o botão Criar. tes de usar o Live Help pela primeiCom isso o programa exibe o córa vez, apague o arquivo setup.php. digo HTML que você deve copiar Esse arquivo serve apenas para a e inserir nas páginas de entrada tarefa de configuração. Última tapara o serviço de atendimento onrefa: volte ao arquivo config.php e, line. Trata-se, basicamente, de um de forma idêntica ao que foi moslink que chama um script PHP: http:// trado no passo 2, altere as permiswww.seudominio.com.br/livehelp/ sões do arquivo para 755 ou 400. livehelp.php?department=1 O primeiro número indica que toEsse link pode ser colocado em dos podem ler e qualquer página executar o arquido site onde vovo, mas só o docê queira ofereÉ o número da permissão para ler, no pode escrever cer ajuda ao viescrever e executar. Mude para 755 sitante. Ao clicar nele. O outro inse quiser restringir a escrita ou 400 para impedir a leitura dica que somenno link, ele entra te o dono pode na tela de chat. ler o arquivo. Lembre-se: para moDo outro lado, um operador, lodificar as configurações, você pregado na interface de administracisará ajustar as permissões do arção, atende e inicia o bate-papo. quivo para 777 e depois revertêObserve que o Crafty Syntax traz las para 755 ou 400. um departamento e um operadorpadrão. Você pode criar outros, usando o menu da tela de admiA INSTALAÇÃO NA WEB Instalado e configurado o Crafty nistração. Para finalizar, na oreSyntax, você já pode entrar no sislha Departamentos, clique no link tema. No browser, digite www. Configurações, ao lado do nome do departamento. As mensagens seudominio.com.br/livehelp/ . Surge a tela de administração do de interação com o usuário estão em inglês. Personalize essas menproduto. Faça o login usando o nosagens em português e, no final me de usuário e a senha definidos na instalação. Agora, clique na oreda tela, clique no botão Atualizar. lha Departamentos. A tela princiSeu sistema de atendimento espal mostra um departamento catá pronto. Explore mais o Crafty dastrado, “default”. Clique no link Syntax e veja que há vários outros Gerar HTML. Na próxima tela, inrecursos de administração.
777
4.
78 < C OL E ÇÃ O I N FO
TUTORIAL/VOTAÇÃO
DÊ SEU VOTO PARA O FLASH MONTE UM SISTEMA DE VOTAÇÃO E AMPLIE A INTERATIVIDADE DE SEU SITE POR ANDRÉ CARDOZO
s enquetes são uma boa maneira de estimular a interatividade com visitantes de qualquer site, independentemente do assunto abordado. Neste tutorial, explicaremos como criar um sistema de votação usando o Flash MX. Para que a votação funcione, os arquivos devem estar em um servidor com suporte a PHP. Acompanhe os passos a seguir.
A
os arquivos actionscript.txt, com o código que recebe o voto na web, o votacao.php, que lê, interpreta e salva o voto no servidor, e o votos.txt, que recebe e apresenta o resultado. No Flash MX 2004, criamos um arquivo novo e, por meio do menu Modify/Document, deixamos o documento com 550 pixels de largura por 600 de altura. Clicamos em OK para aplicar as novas medidas.
OS ARQUIVOS O FUNDO 1. 2. Antes de mais nada, faça o download Agora, renomeamos a única camado arquivo zipado que completa este tutorial em www.info.abril.com.br/ download/4081.shtml . Ele contém
da da linha do tempo para “fundo”. Vamos criar um fundo com um gradiente em tons de azul. Abrimos o painel Color Mixer, por meio do atalho Shift+F9. Clicamos na seta da esquerda e escolhemos um tom de azul-escuro. Depois, clicamos na seta da direita e escolhemos um tom de azul mais claro. O gradiente é exibido no painel Color Mixer. Com o gradiente montado, clicamos na ferraBotão: componente invisível tem conteúdo no estado Hit menta de desenho retanC OL E ÇÃ O I N FO > 79
TUTORIAL/VOTAÇÃO
gular e traçamos um retângulo para cobrir toda a área do arquivo. Pronto, a cor de fundo foi aplicada. Para completar o fundo, importamos a imagem da bola, por meio do menu File/Import, e a posicionamos no canto superior direito da tela. Por fim, usamos a ferramenta Linha para desenhar Organização: camadas facilitam o acesso aos elementos quatro linhas horizontais no alto da tela e compleButtons. No painel Buttons, escolhetar a diagramação do cabeçalho. mos um botão e o arrastamos para o palco. Na janela de propriedades do botão, definimos sua cor. Depois, O TEXTO E OS BRASÕES Criamos uma nova camada, de noainda com o botão selecionado, abrime “texto”, e, com a ferramenta de mos a janela de ações, por meio da texto, digitamos um título para a pátecla F9, e digitamos o seguinte código para o botão: gina, a pergunta da votação e o nome dos oito times da enquete: Flaon (release) { mengo, Atlético-PR, São Paulo, Sanvota(); tos, Corinthians, Vasco, Botafogo e } Palmeiras. Todas as caixas de texto O SCRIPT são do tipo estático. No painel da linha do tempo, criaMais uma vez, criamos uma camamos uma camada de nome “escuda no painel linha do tempo. Ela se dos” e importamos os ícones com o chama “as” e abrigará o script de brasão de todos os times integrantes nossa votação. Com o primeiro frada votação. Depois, usamos a ferrame da camada selecionado, abrimenta Seta para posicioná-los ao lamos a janela de ações, usando o do do nome de cada equipe. atalho F9, e colamos o código do arquivo actionscript.txt, que faz parte do arquivo zipado mencionado O BOTÃO Criamos mais uma camada no painel no passo 1. Seu conteúdo é: linha do tempo. Ela tem o nome stop(); “bot_vota” e abrigará o botão de vocontroleDados.onData = tação. Nessa camada, acionamos o function() { menu Window/Common Libraries/ this._parent.nextFrame();
Ela abrigará o movie clip que receberá o escudo do time escolhido pelo usuário. Com a camada criada, vamos gerar o movie clip. Acionamos o menu Insert/New Symbol, escolhemos a opção Movie Clip e clicamos em OK. Estamos agora no modo de edição do movie clip. Nesse modo, vamos deixar o primeiro keyframe em branco. Nos oito frames seguintes, inserimos um keyframe em branco, usando a tecla F7, e importamos o escudo dos oito times, inserindo um em cada frame. Utilizamos a janela de alinhamento, acionada por meio das teclas Ctrl+K, para garantir que todos os escudos estejam na mesma posição. Agora, nosso movie clip tem nove frames: um vazio e os outros oito com o escudo dos times.
A EDIÇÃO 7. Clicamos no botão Scene 1 para sair do modo de edição do clipe. Nosso movie clip agora está na Biblioteca do Flash. Clicamos sobre ele e o ar-
Em resumo, esse código é o responsável por passar para o script PHP os dados do time escolhido pelo internauta.
O MOVIE CLIP 6. Acima da camada “as”, criamos outra camada de nome “todos times”.
Cena: o primeiro frame vira página de entrada da votação C OL EÇ ÃO I NF O > 81
TUTORIAL/VOTAÇÃO
rastamos para a cena, dentro da camada “todos times”. Acima da camada “todos times”, criamos a camada “controle”. Ela abrigará o movie clip do controle de dados. Nessa camada, acionamos o menu Insert/New Symbol. Escolhemos o tipo Movie Clip e clicamos em OK. Depois, clicamos no botão Scene 1 para sair do modo de edição do movie clip. Ele agora está na bibilioteca. Arrastamos o movie clip para a camada “controle” e damos a ele o nome de instância “controleDados” na janela de propriedades. Esse é o nome de identificação do movie clip nos scripts. Posicionamos o clipe fora da cena.
Arrastamos oito cópias do botão para a cena e as posicionamos sobre o escudo das equipes. Depois, selecionamos o botão do primeiro time e digitamos o seguinte código on (release) { escolheTime(1); }
Repetimos o código para os outros botões, apenas aumentando o número entre parênteses em 1. Assim, teremos os valores 2, 3, 4, 5, 6, 7, e 8 para os botões restantes.
A PÁGINA DE 9. RESULTADO
A primeira cena de nossa votação está completa. Temos oito camadas, cada uma com um só frame. Vamos agora passar para MAIS BOTÕES Criamos outra camada, a o frame 2, que corresponúltima de nossa votação. de à página de resultado. Ela tem o nome “botoes” As camadas “fundo”, “ese abrigará os botões invicudos”, “as” e “controle” síveis que ficarão sobre o não mudam no segundo escudo de cada time. Nesframe. Por isso, basta sesa camada, acionamos o Biblioteca: painel do lecionar cada uma delas menu Insert/New Symbol. Flash abriga os objetos e teclar F5 para adicionar usados no arquivo Escolhemos a opção Butum frame. Assim, seu aston e clicamos em OK. Especto é mantido. Na catamos no modo de edição do botão. mada “bot_vota”, inserimos um keyClicamos no estado Hit e criamos frame em branco no segundo frame um keyframe em branco, teclando com F7. Repetimos o processo nas F7. Nesse keyframe, desenhamos um camadas “todos times” e “botoes”. círculo. Seu tamanho e cor não imNa camada “texto”, criamos um portam, pois ele será transparente e keyframe no segundo frame, por as dimensões poderão ser definidas meio da tecla F6. Trocamos a perdepois. Clicamos em Scene para sair gunta da votação pelo texto “Confido modo de edição do botão. ra o resultado parcial da votação”.
8.
82 < C OL E ÇÃ O I NF O
TUTORIAL/VOTAÇÃO
Depois, criamos uma caixa de texto ao lado do escudo do primeiro time. Na janela de propriedades da caixa, escolhemos a opção Dynamic Text. Na caixa Instance Name, digitamos “result_1_txt”. Essa é a caixa de texto que receberá o número de votos do primeiro time da votação.
//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;
MAIS TEXTO 10. Copiamos e colamos a caixa na cena para criar sete cópias dela, uma para cada time restante. Posicionamos as caixas ao lado de cada time e apenas alteramos o nome de instância, aumentando em 1 o algarismo entre as linhas do nome. Assim, temos “result_2_txt”, “result_3_txt”, “result_4_txt”, “result_5_txt”, “result_6_txt”, “result_7_txt” e “result_8_txt”.
A PUBLICAÇÃO 11. Acionamos o atalho Shift+F12 para publicar os documentos SWF e HTML. Para que a votação funcione, é necessário jogar os dois arquivos no mesmo diretório dos arquivos votacao.php e votos.txt, que fazem parte do arquivo mencionado no passo 1. O código de votacao.php é o seguinte:
} $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=”.$b ot.”&pal=”.$pal);
O código de votos.txt é de apenas uma linha: 0 0 0 0 0 0 0 0 C OL E ÇÃ O I NF O > 83
TUTORIAL/CLASSIFICAÇÃO
OS SEGREDOS DO RANKING
NAVEGUE POR UMA LISTA DE GANHADORES CONSTRUÍDA COM FLASH E XML POR EVERSON STABENOW SIQUEIRA
m ranking com paginação é um recurso indispensável em sites que apresentam listas de classificação, como as de empresas mais lucrativas, ou resultados de competições, como os de campeonatos esportivos e torneios de games online. Construir o ranking é uma outra história e um bom desafio para os desenvolvedores flasheiros. Neste tutorial, usamos o Flash MX para obter as colocações a partir de um arquivo XML. Vamos a ele.
U
DOWNLOADS 1. Antes de mais nada, baixe o arquivo
para testar; ranking.as, com o ActionScript, e ranking.xml, com o exemplo de listagem. Para alívio dos iniciantes, eis o primeiro segredo: tanto faz qual a linguagem de programação que você usa. Para o Flash vale apenas a saída de dados, que é escrita pelo servidor com um script. Então, vamos nos concentrar no Flash e no ActionScript necessário para processar a saída XML.
XML ESTÁTICO 2. É mais fácil resolver um problema de cada vez. Logo, embora o site se ja dinâmico, vamos começar com um XML estático.
zipado Segredos do Ranking no endereço www.info.abril.com. br/download/4194. shtml. Descompacte
tudo numa mesma pasta, que não precisa estar num servidor web. São quatro os arquivos: ranking. fla, com o projeto do ranking; ranking.swf, com a lista pronta
Projeto de ranking: campos duplicados e renomeados
TUTORIAL/CLASSIFICAÇÃO
No arquivo ZIP que você baixou, já está tudo funcionando. Então duplique a pasta descompactada e trabalhe na cópia. Assim você pode comparar os arquivos caso algo saia errado. No Flash MX, crie um novo arquivo. Use 400 x 300 pixels para as dimensões do documento e salve com o nome “ranking.fla”.
MOVIECLIP 3. Uma lista de ganhadores costuma ser apenas parte de um projeto Flash. Exemplo: a competição acaba, e aparece uma tela com os recordistas. Então tudo o que faremos a partir de agora será dentro de um único MovieClip, que só depois irá para a linha do tempo principal. Clique no menu Insert/New Symbol e dê o nome “ranking” para este novo MovieClip. Selecione o primeiro quadro do ranking e tecle F9 para aparecer a janela de ActionScript. Nela, você digitará a única linha de código de nosso arquivo .fla:
po 12, preto. Crie então o campo de texto, ocupando apenas uma linha. Logo em seguida, na barra de propriedades, daremos um nome para esse campo: “nome1”. Duplique o campo (selecione e tecle Ctrl+D) várias vezes até formar uma coluna com dez campos. Mude o nome de cada um deles, na seqüência, de “nome1” até “nome10”. Essa coluna mostrará os nomes dos colocados. Com o mouse, selecione todos os campos e duplique-os (Ctrl+D), criando uma segunda coluna, para os pontos, à direita da anterior. Mude também os nomes desses campos, agora com os nomes de “pontos1” a “pontos10”. Você também pode diminuir a largura dos campos. Duplique novamente uma das colunas e coloque-a totalmente à esquerda, para indicar a posição de cada nome no ranking. Mais uma vez, mude os nomes desses dez campos, seguindo o padrão de “pos1” a “pos10”.
#include “as/ranking.as”
Se não conseguir digitar, mude para “expert mode”, teclando Ctrl+ Shift+E.
TEXTO DINÂMICO 4. Ainda dentro da área do MovieClip “ranking”, selecione a ferramenta de texto. Na barra de propriedades, mude a opção do primeiro menu suspenso para DynamicText. Mude também a fonte para _sans, cor-
Botão: o nome certo é fundamental
OS BOTÕES 5. Logo abaixo das três colunas com os campos, crie dois botões: um para a esquerda e outro para a direita. Dê os nomes “anterior” para o botão da C OL E ÇÃ O I NF O > 85
TUTORIAL/CLASSIFICAÇÃO
esquerda e “proxima” para o da direita. Isso é importante porque se o botão não tiver o nome certo não irá funcionar. Neste tutorial, utilizamos botões que já vêm com o Flash, acionando o menu Window/Common Libraries/Buttons.
FILME NO PALCO 6. Até aqui, tudo foi feito dentro do MovieClip “ranking”. Voltando para a linha do tempo principal (abaixo dos frames, clique em scene1), nosso projeto fica novamente vazio. Abra a Library (tecle Ctrl+L ou F11), arraste o ranking para a área de trabalho e ajuste a posição para ficar bonitinho. Tudo o que tínhamos a fazer dentro do Flash está pronto. Salve o arquivo. Se quiser enfeitar o documento na linha do tempo principal, fique à vontade.
O TESTE 7. Se você fez tudo certo e salvou seu ranking.fla com o ranking.as e o ranking.xml, que entregamos de bandeja, basta testar, teclando Ctrl+Enter. Agora que você testou e experimentou os botões de próxima e anterior, vamos entender como tudo isso funciona. Alguns programadores gostam muito de editar os ActionScrips fora do Flash, salvando-os em arquivos .as. Com isso, podemos usar o editor de textos preferido e reaproveitar mais facilmente os mesmos scripts em vários projetos (é fato que também se perdem várias facilidades que
o editor interno do Flash oferece). Note que, por meio de um só arquivo de ActionScript, também pudemos criar toda a funcionalidade do projeto, em vez de ter o código espalhado dentro do Flash, em vários objetos. Mas para que isso tudo funcione é muito importante que cada objeto tenha seu próprio nome. Por meio dos nomes pode-se programar o comportamento de cada item, e alterar seus valores e propriedades.
UM XML 8. MELHORADO Grosso modo, o XML nada mais é do que um arquivo de texto onde as informações são descritas e organizadas. Por meio de tags (o que lembra muito um HTML), cria-se uma hierarquia de dados. Uma informação pode ser a mãe de outras informações, como numa árvore genealógica. O nome correto para cada participante dessa árvore é nó (node, em inglês). Para o Flash mostrar informações de um XML deve-se primeiro carregar o XML, o que é fácil. Depois, caminha-se de um nó para outro pela hierarquia. Cada nó dá acesso aos seus filhos através de propriedades como childNodes, ou firstChild. Então já não é mais tão simples. Por essa razão, nosso ranking faz uma melhoria na classe XMLnode do Flash (sim, isto é possível). Acrescentamos o método “getNodesByName” para os nós de XML no
TUTORIAL/CLASSIFICAÇÃO
Flash. Com esse ajuste fino, fica fácil retornar um arranjo com todos os nós desejados. Importante: para usar a função getNodesByName em seus novos arquivos .fla com XML, não esqueça de incluir o código que expande a funcionalidade do XMLnode. Arraste o arquivo ranking.xml para seu navegador favorito Ranking: funcionalidade em um ActionScript e veja como ele é organizado. MAIS TREINO Existem vários nomes com acentuação e com diferentes compriExistem várias possibilidades pamentos. Em seus projetos, produra você treinar suas habilidades za arquivos de teste variados, cocom o Flash: A. Tente acrescentar pequenos bomo o ranking.xml. Isso ajuda a identificar problemas muito mais tões ao lado das colunas de pontuarapidamente do que se tivesse esção. Mostre os botões nos colocacrito “nome1 a nomeX”. Veja tamdos que tiverem endereço de site e bém que o XML pode conter inforesconda-os nos que não tiverem; B. Se você já configurou seu webmações adicionais que você não esteja usando — é o caso dos enserver e banco de dados, tente criar dereços de site, existentes em apeuma tabela no banco com os colonas três colocados. cados. Use sua linguagem favorita e reescreva o XML para ser realCÓDIGO .AS mente dinâmico. Não esqueça de O código ranking.as possui comenalterar na configuração do script tários explicativos. Primeiro, definemo caminho do XML para algo como se todas as funções. Só no final é que ranking.php ou ranking.asp, de mandamos carregar o XML, e tudo acordo com a linguagem de proacontece a partir daí. gramação que estiver usando. Tudo está amarrado com o MoO ranking atual obtém todos os vieClip “ranking”. Você tem total valores do XML numa só tacada — liberdade para criar o que quiser isso funciona bem para algumas na linha do tempo principal, sem centenas de colocados. Se fossem se preocupar com nomes de variámilhares de itens, seria necessário veis. No momento em que o ranking obter a lista aos poucos. Difícil? aparecer na linha do tempo, ele faNada que um flasheiro experiente rá seu trabalho. não possa resolver.
10.
9.
C OL EÇ ÃO I NF O > 87
TUTORIAL/E-COMMERCE
LOJA COM UM FLASH SIMPLES
VEJA COMO CRIAR PÁGINAS NO SWISHMAX, UM SUBSTITUTO DESCOMPLICADO PARA O FLASH MX 2004 POR ANDRÉ CARDOZO
complexidade do Flash MX 2004 muitas vezes desanima os iniciantes nos mistérios do desenvolvimento de sites. Uma opção mais simples é o SWISHmax (www.info. abril.com.br/download/3612.shtml). Esse aplicativo, um shareware da SwishZone, exporta arquivos em formato SWF, não tem todos os recursos do Flash MX 2004, mas dá conta do recado em tarefas menos complexas. Este tutorial mostrará como criar um layout de site de comércio eletrônico no SWISHmax. Além da home page, serão criados os layouts das seções do site e o sistema de navegação. Os arquivos deste exemplo podem ser baixados em www.info. abril.com.br/download/4048.shtml.
A
DEFINIR AS DIMENSÕES 1. Abrimos o SWISHmax com um arquivo em branco. Nos painéis do canto direito, clicamos na aba Movie e definimos a largura da cena em 700 pixels e a altura em 575 pixels. Ainda na aba Movie, clicamos em Background Color para escolher a cor de fundo — escolhemos um tom de azul.
Acionamos o menu View/Fit Scene in Window para visualizar a cena melhor. Também clicamos no ícone Scene_1, no painel de componentes, e mudamos seu nome para Home.
PRIMEIRA BARRA 2. Vamos começar o layout pela barra de navegação superior, que contém o logotipo e links para serviços. Por meio do menu File/Import, importamos as imagens do logotipo e dos seis botões que compõem a barra superior. As imagens aparecem empilhadas. Por isso, clicamos fora delas e depois novamente numa das imagens para separá-las. Arrastando o mouse, clicamos e posicionamos as imagens na parte superior da cena. Para auxiliar no alinhamento, usamos as guias, clicando sobre as réguas que contornam a área de trabalho e arrastando as guias. Nosso logotipo tem 60 pixels de altura. Por isso, a barra superior terá 70 pixels.
SEGUNDA BARRA 3. Passamos para a segunda barra de navegação, que fica abaixo da criada no passo 2 e contém os links pa-
TUTORIAL/E-COMMERCE
ra as quatro seções do site: câmeras, celulares, armazenamento e televisores. Clicamos na ferramenta retângulo. Surge o painel Shape. Nele, alteramos a cor do retângulo a ser desenhado — usamos o hexadecimal FF8200, um tom de laranja. Também incluímos uma borda preta de espessura 1. Desenhamos então um retângulo de 20 pixels de altura e 700 de largura logo abaixo do logotipo.
MIOLO DA PÁGINA 4. Com as barras superiores prontas, passamos para o miolo da página. Traçamos um retângulo branco com a borda preta de espessura 1 para cobrir toda a parte inferior da cena, abaixo da barra laranja do passo anterior. Nossa home agora tem três áreas horizontais: uma de cor azul, uma segunda faixa estreita laranja e uma grande área branca. Nessa área branca, vamos fazer, à esquerda, o menu vertical com links complementares. Esse menu terá o mesmo tom de azul da barra em que
está o logotipo. Por isso, desenhamos um retângulo de cor 529ACE (o mesmo valor usado no passo 1), 145 pixels de largura e a altura necessária para chegar até o fim da cena. Com isso, criamos uma área de cor azul do lado esquerdo da tela.
IMPORTAÇÃO DE IMAGENS 5. A área branca na parte central será preenchida com imagens de produtos e seus respectivos textos descritivos e preços. Com o auxílio das guias, dividimos a área branca em três partes iguais. Nelas, usamos novamente o menu File/Import para importar as imagens dos produtos e as distribuímos igualmente pela cena.
OS TEXTOS 6. Haverá textos nos menus horizontal
e vertical e no miolo da cena para descrever os produtos. Para inserir os itens do menu lateral, clicamos na ferramenta de texto, indicada pelo ícone T na barra de ferramentas. Surge, à direita da área de trabalho, o painel Text, com uma grande área em branco para entrada de texto. Digitamos ali o texto do menu lateral, com categorias e subcategorias. Usando as caixas de opção logo acima da área de texto, escolhemos a fonte e o tamanho, no nosso caso Verdana 12. Depois de tudo pronto Imagens: propriedades são exibidas no painel Shape no painel Text, clicamos C OL E ÇÃ O I N FO > 89
TUTORIAL/E-COMMERCE
na área do menu lateral para aplicar o texto e arrastamos o mouse até a largura desejada. Novamente, clicamos na ferramenta de texto e usamos o painel Text para criar as chamadas dos produtos. Copiamos e colamos a caixa de texto do primeiro produto, alterando as descrições e as po- Diagramação: guias auxiliam no posicionamento sições na área de trabalho até que todas as seis imagens teCom o ícone Button selecionado na nham seus textos. janela de componentes, acionamos Os últimos textos a serem inserio menu Modify/Grouping/Group as dos são os da barra de navegação Button. O quadrado muda de forma, horizontal. Clicamos na ferramenta indicando que é agora um botão. de texto e usamos o painel Text paCom o quadrado selecionado, clira digitar o título das seções. Usamos camos na aba Script, acionamos o a fonte Verdana branca e o tamanho modo Expert e digitamos o seguinte 12. Copiamos e colamos a caixa do trecho abaixo: primeiro nome de seção para facilion(press) { tar a inserção dos outros textos. gotoSceneAndStop(“cameras”, 1);
BOTÕES DE NAVEGAÇÃO 7. Para completar a home, faltam apenas os botões que permitirão a navegação entre as seções do site. Eles serão transparentes e ficarão sobre os nomes da barra de navegação. Para criar o primeiro botão, acessamos o menu Insert/Button. Surge um quadrado azul e, do lado esquerdo, na janela de componentes, aparece um ícone de nome Button. Arrastamos o quadrado para cima da palavra “Câmeras”, no menu horizontal, e usamos as alças para redimensioná-lo, cobrindo a palavra.
}
Com isso, criamos um botão transparente que, ao ser clicado, envia o internauta à cena “cameras”, que corresponde à seção Câmeras do site.
MAIS BOTÕES 8. Para facilitar a criação dos outros botões, apenas copiamos e colamos o botão criado no passo anterior. A única alteração a ser feita é na janela de script. Substituímos a palavra “cameras” pelo nome das cenas correspondentes às outras seções do site. Assim, temos os seguintes códigos para os botões das outras três seções:
Criamos um quinto botão e o posicionamos sobre o logo para que o usuário possa retornar à home. Na aba script, inserimos o código: on(press) { gotoSceneAndStop(“home”, 1); }
Este é o link para a home do site.
QUATRO SEÇÕES 9. A home page está pronta. Vamos pa-
Damos o nome de “cameras” à nova cena e apagamos todos os objetos do miolo. A seção destacará três modelos. Por isso, usamos guias para dividir o miolo da cena em três partes. Depois, acionamos o menu File/Import para inserir as imagens.
AS DESCRIÇÕES 10. Com as imagens posicionadas, inserimos a descrição do primeiro produto. Digitamos o texto no painel Text e clicamos e arrastamos o mouse para aplicar a descrição. A página de câmeras está pronta. Aproveitamos a estrutura dela para criar as outras. Para fazer isso, ativamos a opção Copy Scene e, depois, Paste Scene. Fazemos isso três vezes. Selecionamos cada cena e teclamos F2 para renomeá-las como “armazenamento”, “televisores” e “celulares”. Entramos em cada uma e editamos textos e imagens e salvamos o arquivo.
ra as páginas das quatro seções do site: Câmeras, Celulares, Armazenamento e Televisores. Como as áreas de navegação são constantes, mudamos apenas o miolo da cena. Para a criação da seção de câmeras, clicamos, com o botão direito, na raiz da cena “home”, no painel de componentes, e ativamos a opção Copy Scene. Depois, clicamos, com o botão direito, em qualquer lugar da janela de componentes e escolhemos Resultado: o site é aberto dentro do Flash Player Paste Scene.
C OL EÇ ÃO I NF O > 91
TUTORIAL/RSS
SITE ESPERTO LÊ OS FEEDS
O RSS É UMA ÓTIMA FERRAMENTA PARA ATRAIR VISITANTES E TAMBÉM ATUALIZAR O SITE POR ANDRÉ CARDOZO
odo webmaster faz o que quivo RSS é saber qual versão usar. pode para atrair sempre Há cerca de dez, e a própria sigla mais visitantes para o si- RSS pode significar Really Simple te. Um modo de conquis- Syndication, RDF Site Summary ou ta bom e barato é o RSS. Criado em Rich Site Summary, dependendo da 1999 pela Netscape, esse padrão fa- versão adotada. cilita a distribuição de conteúdo e peO exemplo deste tutorial foi criade pouco conhecimento técnico. Por do com base no padrão 0.91, o mais isso, é uma boa opção para aumen- popular e simples dos formatos, tar a visibilidade do site sem gastar mesmo depois de lançada a versão muito tempo ou dinheiro. 2.0. O arquivo está disponível para Baseado em XML, o RSS é ade- download no endereço www.info. quado para websites com atualiza- abril.com.br/download/3534. ções freqüentes, como serviços de shtml. Quem conhece um pouco de notícias e classificados. O funciona- HTML entenderá facilmente a sintamento é simples: o webmaster cria xe. Vamos agora detalhar o docuo arquivo com os links das atualizações do site e o publica em seu servidor. Na outra ponta, o internauta usa um cliente RSS, como o amphetaDesk e o Awasu, para buscar as atualizações mais recentes dos canais que configurou. Muito mais difícil do que criar o ar- amphetaDesk: cliente de RSS simples traz notícias da INFO
T
TUTORIAL/RSS
mento. Ele tem três partes básicas: versões, identificação e notícias. AS VERSÕES 1. O primeiro passo é informar as versões do XML e do RSS utilizadas no documento com as seguintes tags:
Tecnologia com imaginaçãopt-brCopyright: (C) Editora Abril SA
O comando é obrigatório em arquivos RSS. Ele só será fechado () no final do documento, depois de todos os itens. Os outros comandos especificam as principais características do site. AS NOTÍCIAS 3. Na terceira parte, fornecemos os tí-
tulos, links e descrições das notícias publicadas. Cada notícia fica contiSHTML também tem vez da entre os rótuSe as páginas do seu site utilizam SSI los e (shtml), você não precisa , como convertê-las para PHP. Basta incluir podemos obsero script da seguinte forma: lha e acentos. O segundo comando especifica a DTD (Document Type Definition) usada Script kiddie brasileiro é no documento. Na última linha, te- preso no Japão http://info.abril.com.br/ mos a versão do RSS. A IDENTIFICAÇÃO 2. No segundo bloco, fornecemos informações do site, como título, URL e descrição. Esses dados serão exibidos quando o internauta abrir o arquivo no seu cliente RSS. Plantão INFO http://info.abril.com.br/
aberto/infonews/112003/ 03112003-5.shl Um adolescente brasileiro de 17 anos foi preso no Japão, acusado de participação na invasão de 1 032 sites. MIT fecha sistema alternativo de peer-to-peer http://info.abril.com.br/ aberto/infonews/112003/ C OL EÇ ÃO I NF O > 93
TUTORIAL/RSS
03112003-0.shl O MIT anunciou o fechamento da rede criada por dois de seus alunos para o acesso à coleção de CDs da universidade.
No exemplo acima, temos título, link e descrição de dois itens. Após terminarmos a lista de itens, fechamos o arquivo com os seguintes comandos:
Pronto, o RSS já pode ser publicado no servidor.
A ATUALIZAÇÃO 4. Até o passo 3, os dados foram inseridos manualmente para ficar mais claro o modo como o RSS funciona. Mas, em sites dinâmicos, podemos
empregar scripts para gerar o arquivo. Neste exemplo, vamos instalar um script no nosso site para mostrar notícias de feeds de outros sites, como o da INFO no exemplo. A solução é bem simples. Preparamos um script em PHP que irá ler um RSS que especificarmos e montar uma lista de últimas notícias dentro do seu site. Para montar o script, utilizamos uma classe Feed Reader, criada pelo português José Carlos Valente e distribuída como software livre. No código-fonte, corrigimos um pequeno bug que impedia a leitura de textos com mais de uma linha. A versão que incluímos entre os arquivos deste tutorial já está corrigida. Se você quiser ver o código original, pode obtê-lo no endereço www.info.abril.com.br/ download/4178.shtml. Essa classe é o bastante para passar o ende-
DIVULGANDO O RSS Links acertados, tags em seu devido lugar. Seu arquivo RSS já está no servidor. Chegou a hora de divulgá-lo. A iniciativa mais óbvia é criar um link para ele na página principal do site. Normalmente, arquivos RSS são identificados por pequenos botões laranja com o texto “XML”, mas você pode usar outro padrão. Outra providência que dá resultado é cadastrar seu RSS em serviços
de busca específicos, como Syndic8 (www.syndic8.com) e News Is Free (www. newsisfree.com). Uma terceira medida é incluir o comando no de sua home page. Com isso, o RSS é indexado mais facilmente por ferramentas de busca.
TUTORIAL/RSS
reço do RSS, que retornará uma variável com todas as informações contidas nele. Vamos instalar as notícias: A. Faça o download do script no endereço www.info.abril.com.br/ download/4201.shtml e descompacte o arquivo dentro do diretório do seu site. Nesse pacote você terá três arquivos importantes: class_feedReader.inc.php, que contém a classe em PHP utilizada para ler o feed; config.php, onde estão algumas configurações de fonte e cor, e modelo.php, o arquivo final de exemplo que irá chamar a classe e o config. É importante que todos os arquivos fiquem no mesmo diretório. B. Abra o arquivo modelo.php e edite a linha $caminhorss = “http://
de desejar que apareçam as notícias, incluindo o seguinte código PHP nas páginas do seu site da seguinte forma:
info.abril.com.br/aberto/infonews/ rssnews.xml”; colocando o endere-
$design[“font”] = “Arial, Verdana, Sans-serif”;
ço do RSS que deseja ler. C. Salve o arquivo com um outro nome, infoexame.php, por exemplo, e coloque-o na pasta raiz do seu site. Para visualizar esta parte, acesse http://
Para mudar o número de notícias a serem exibidas, mude esta linha:
E. Agora que o script já está funcionando, você pode alterar cores de fundo, fonte e número de notícias que deverão ser exibidas. O primeiro passo é abrir o arquivo config.php. Para alterar a cor da primeira linha da tabela, onde fica o logo do feed, edite: $design[“headbgcolor”] = “#002F5E”;
Para trocar a cor de fundo da tabela inteira edite: $design[“tablebgcolor”] = “#FFFFFF”;
Para mudar a fonte que deve ser usada, altere a linha:
$limite = 10;
seusite.com.br/ infoexame.php. O
script irá gerar uma tabela com as notícias do site da INFO. D. Agora, nas páginas do seu site, inclua o script infoexame.php exatamente no lugar on-
Awasu: opções avançadas no gerenciamento de RSS C OL E ÇÃ O I N FO > 95
TUTORIAL/RSS/PDA
NOTÍCIAS NO PALMTOP
UM PASSO-A-PASSO PARA PRODUZIR UMA VERSÃO PARA HANDHELD DE UM SITE COM NOTICIÁRIO POR MAURÍCIO GREGO
crescente número de PDAs e smartphones com conexão à internet torna quase obrigatório que os websites ofereçam páginas específicas para esses dispositivos. Com telas pequenas e navegadores que, em boa parte, não suportam CSS, DHTML, JavaScript ou Flash, esses equipamentos requerem páginas simplificadas para uma boa visualização. Na maioria das vezes, o que se dese ja é aproveitar o conteúdo existente no site e formatá-lo, criando uma versão para telas pequenas. É o que vamos fazer neste tutorial. Há várias soluções possíveis para isso. Neste exemplo, vamos partir de um site de notícias e gerar uma versão para handheld desse conteúdo. Para isso, vamos aproveitar o fluxo de notícias produzido em formato RSS no tutorial da página 92 . Depois, vamos empregar uma classe em PHP para extrair as notícias do RSS. Essa classe será usada por um script, também em PHP, para montar as páginas HTML simplificadas. Para acompanhar o tutorial, faça o download dos arquivos neces-
O
sários no endereço www.info.abril. com.br/download/4180.shtml. Para ver o site que montamos como exemplo, faça o upload desses arquivos para um servidor da web com PHP 4 ou mais recente instalado.
A ESTRUTURA 1. Nosso site para handheld tem uma página inicial, handheld.html, produzida em HTML puro. É uma página simples onde todos os elementos estão contidos numa tabela com 300 pixels de largura. Esse é um tamanho adequado para visualização na
Lista de notícias: em HTML estático
TUTORIAL/RSS/PDA
maioria dos handhelds atuais. Essa página contém os links para quatro seções de notícias que, em nosso exemplo chamamos de TI, E-business, Tecnologia Pessoal e Internet, respectivamente.. Cada um desses quapectivamente tro links leva a um arquivo PHP que vai gerar o índice de notícias correspondente àquela seção. se ção. Vamos usar um arquivo RSS diferente para cada seção. Como o procedimento é o mesmo nas quatro, vamos descrever, nos próximos passos, a construção de uma das seções. Basta replicar os arquivos PHP, alterando título e origem do RSS em cada um deles, para obter as outras três seções.
O ARQUIVO 2. A maneira de produzir o RSS varia conforme o caso. Quem possui um site dinâmico pode empregar scripts para gerá-lo. Além disso, muitos gerenciadores de conteúdo incluem a opção de saída em RSS. No nosso exemplo, vamos repetir os procedimentos do tutorial da página 92 para montar a estrutura de um arquivo RSS básico. Nos próximos passos, vamos ver como extrair as notícias dele e montar a versão para handhelds.
AS CONFIGURAÇÕES 3. Para extrair as notícias, usamos uma classe Feed Reader. E para que a classe funcione, é preciso criar o arquivo config.php. Ele deve ficar no mesmo diretório do servidor HTTP onde estão os arquivos class_feedReader.inc.php Reader .inc.php e handheld.php.
Texto da notícia: gerado por um script
No arquivo config.php config.php,, coloque o endereço do seu arquivo RSS. Pode ser um caminho local (exemplo: /home/site/www/rss.xml) ou um endereço na internet (exemplo: http://www.site.com.br/rss.xml). No nosso exemplo, vamos apontar para um arquivo na mesma pasta: $caminhorss[] $caminhors s[] = “rss_ti.xml”;
Nosso script possibilita agregar notícias de vários arquivos RSS numa mesma página para handheld. Para isso, basta repetir a linha acima para cada RSS, especificando o nome do arquivo correspondente. Depois de definir a localização do RSS, acerte as cores de fundo, o título da página e a fonte de caracteres acrescentando esses comandos ao arquivo config.php: $design[“title”] = “Notícias de TI”; $design[“logo”] = “greatfun.gif”; $design[“bodybgcolor”] $design[“body bgcolor”] = C OL O L E ÇÃ Ç Ã O I NF N F O > 97
4. O SCRIPT O arquivo handheld.php contém o script que monta a página HTML para visualização no handheld. Ele serve tanto para gerar o índice de uma seção de notícias como para produzir a página com o texto completo complet o da notícia. Nos dois casos, a página é formada por uma tabela com uma coluna de 300 pixels de largura. A primeira linha da tabela contém o gráfico do alto da página. As notícias são inseridas, da segunda linha em diante, por meio de comandos em PHP. Vejamos Vejamos como eles funcionam: if(!isset($_REQUEST[“feed”]) && !isset($_REQUEST[“item”]))
Esse comando testa se foi especificada alguma notícia junto com a URL que ativa o script. Se foi, ele monta a página com a notícia. Senão, gera o índice do noticiário.
5. O ÍNDICE Vejamos os comandos usados para a produção de um índice de notícias: foreach($caminhorss foreach($ caminhorss as $url)
Essa instrução especifica que o processo de inclusão das notícias deve ser repetido para cada arquivo RSS a ser usado nessa seção, caso haja mais de um. Em seguida, temos: O L E ÇÃ Ç Ã O I NF NF O 98 < C OL
Na primeira linha acima, carregamos a classe feedReader no objeto $ob. Nas duas linhas seguintes, ativamos funções internas dessa classe para localizar o RSS e extrair as notícias. Os textos extraídos são carregados na variável $array, e o número de notícias, em $number. Na seqüência, temos o comando echo, que gera o código HTML correspondente a uma das notícias. Note que ele está dentro de um loop que faz com que seja repetido para cada uma das notícias no RSS. for($i=0;$i<$number;$i++){ echo (“
Observe que o título de cada notícia é um link. Quando alguém clica nele, a URL solicitada tem esta forma: http://www.site.com.br/ handheld.php?feed=0&item=3
A contagem dos parâmetros feed e item começa em zero. Assim, a URL do exemplo acima vai abrir, no navegador, a quarta notícia do primeiro arquivo RSS. A notícia selecionada será exibida com a ajuda do mesmo script usado para gerar o índice.
TUTORIAL/AVALIAÇÃO
QUE NOTA O SITE MERECE?
CRIE SCRIPTS EM PHP E JAVASCRIPT PARA O INTERNAUTA FAZER SUA AVALIAÇÃO POR CARLOS MACHADO, COM FRED CARBONARE
rodutos, serviços, dicas, atendimento online, tudo o que o site oferece pode ser avaliado pelo internauta por meio de notas. Além de ser uma atitude simpática, não toma tempo do visitante e ajuda o dono do site a identificar o que está dando certo e o que tem problemas. INFO desenvolveu um script chamado Nota para fazer esse tipo de avaliação. Para usá-lo, você precisa ter acesso a um servidor web, em qualquer plataforma — Linux, Windows, outros Unix etc. —, no qual esteja instalada a linguagem PHP, pelo menos na versão 3.
P
O FUNCIONAMENTO 1. Na página que contém o item a ser avaliado, o internauta encontra um quadro com uma chamada como “Qual nota você dá a X ou Y?” Nesse quadro também estão uma caixa de combinação com as notas de 0 a 10 e um botão de comando para enviar a avaliação. Quando ele clica no botão, o script no servidor entra em ação e mostra uma página pop-up com a nova média de avaliação dos internautas, já computada a nota atribuída por esse último visitante.
O SERVIDOR 2. Para usar o script Nota, você precisa executar duas tarefas. A primeira consiste em instalar o código PHP no servidor. A outra é colocar na página do item a ser avaliado uma chamada para o script. A instalação do código é simples. Faça o download dos arqu arquivos ivos no site site de INFO (www.info.abril. com.br/download/
Avaliação: o produto recebe nota via menu suspenso
3646.shtml). Extraia os C OL O L EÇ E Ç ÃO Ã O I NF N F O > 99
TUTORIAL/AVALIAÇÃO
arquivos PHP e copie-os para o servidor. São quatro: grava.php, que registra as avaliações num arquivo-texto para cada item; resultado.php, que lê os dados acumulados do item em questão e exibe a média atual. Há ainda o arquivo configs.inc.php, responsável pela configuração dos diretórios de trabalho; e adminnota.php, que oferece ao administrador uma interface para incluir novos itens a avaliar, além de exibir os resultados de todos os itens. Só é preciso configurar o arquivo configs.inc.php. Abra-o e edite as linhas que definem as variáveis $path, o caminho do diretório onde estão os scripts; $data_path, pasta onde serão gravados os arquivos com notas de cada item; e $url_path, a pasta onde vão ficar os scripts PHP.
A PÁGINA WEB 3. Se você vai incluir o quadro de avaliação numa página PHP, basta incluir no código a linha: Aqui, o valor [ITEM]
deve ser trocado por um número diferente para cada item avaliado. Esse número será o nome do arquivo que armazena informações sobre o item. Exemplo: 12.dat.php. Se sua página é HTML, use um JavaScript para disparar a execução do script PHP: <script src=“/rating/resultado.php? item=[ITEM]&tipo=js”>
A exibição dos resultados anteriores é feita mediante o script: <script>MediaNota();
Tanto na página PHP como na 100 < C OL EÇ ÃO I NF O
HTML, você vai precisar de um formulário com a caixa de combinação (notas de 0 a 10) e o botão de comando para o visitante confirmar a avaliação. Na página PHP, esse formulário é provido automaticamente pelo comando ?include. No caso de página padrão HTML, é preciso criar o formulário com o nome rating e uma caixa de combinação chamada nota. Isso é feito com o script: <script>ComboVota();
O clique no botão de comando do formulário dispara o script vota, incluído na página, que captura a nota indicada pelo internauta e o envia ao script grava.php, no servidor. O pacote de arquivos para download no site de INFO inclui um exemplo de página HTML com os scripts. Caso você queira fazer um template diferente ou mostrar os resultados de outra forma, mande o JavaScript imprimir as variáveis rating[‘nota’] e rating[‘total_votos’], como no exemplo <script>document.write(rating [‘nota’]); ou neste outro: <script>document.write(rating [‘total_votos”]);
Se você vai propor a avaliação para poucos itens — digamos, na faixa das dezenas —, esta solução funciona a contento. Para grandes quantidades, é aconselhável armazenar os resultados num banco de dados. Nesse caso, o valor [ITEM] poderá ser o índice do registro na tabela de dados. O formato do quadro com a proposta de avaliação (fonte, borda, cores etc.) fica a seu critério.
TUTORIAL/NAVEGAÇÃO
OS MENUS SE DESDOBRAM
VEJA COMO FAZER BARRAS DE NAVEGAÇÃO INTERATIVAS EM PÁGINAS COM POUCO ESPAÇO POR ANDRÉ CARDOZO
m sites com várias subdivisões, o designer muitas vezes tem dificuldade em dividir o conteúdo sem ocupar todo o espaço da tela. Uma saída para fugir desse aperto é criar menus dinâmicos, que se desdobram ao passar do mouse. É possível elaborá-los usando editores HTML de interface visual. Ou até mesmo “a mão”, se o usuário tiver conhecimento de JavaScript. Mas uma alternativa mais fácil é usar um dos diversos programas especializados nessa função. Neste tutorial, utilizamos o Selteco Menu Maker 4.0. A versão de testes funciona por dez dias, o registro custa 29 dólares, e o download pode ser feito em
E
reservando espaço para o menu. O exemplo deste tutorial foi elaborado prevendo um menu na vertical, posicionado do lado esquerdo da tela. Criamos uma célula de 120 pixels de largura para acomodá-lo. O menu também pode ser inserido horizontalmente, no alto da tela, por meio do atalho Menu/ Style do Selteco.
AS CATEGORIAS 2. Antes de lidar com o Selteco Menu Maker, precisamos saber exatamente quais são as categorias e subcategorias do menu para evi-
www.info.abril.com. br/download/3430. shtml.
A PÁGINA HTML 1. Para começar, precisamos criar uma página em HTML, já
Selteco Menu Maker: formatando as cores do menu C OL E ÇÃ O I NF O > 101
TUTORIAL/NAVEGAÇÃO
para inserir os itens do menu. Cada item deve ter nome e um link para o arquivo HTML desejado. Não tem importância se as páginas não estiverem prontas — precisamos apenas do nome do arquivo. Para criar mais categorias, basta acessar o menu Mais itens: cada um deve ter nome e link para o HTML Edit/Add Item. Para tar correções mais a frente. No adicionar uma subcategoria, marexemplo criado por INFO, temos que a categoria à qual ela pertenas seguintes categorias e subcatece e use o mesmo comando. gorias: monitores (15 e 17 polegadas), memórias (SDRAM e DDR), O VISUAL placas de vídeo (AGP 4X e 8X) e Agora o menu contém todas as caplacas de som (16 bits e 24 bits). tegorias e subcategorias previstas. Mas o visual ainda deixa a desejar. Para adaptá-lo ao layout de nosso A INTERFACE Abrimos o Selteco Menu Maker paHTML inicial, usamos a janela Mera começar a desenvolver nosso nu Properties, acessada por meio menu. Do lado esquerdo da tela, o do menu View/Menu Properties. Esusuário cria e apaga categorias e sa janela reúne num só lugar todas subcategorias, inserindo nome e as configurações visuais do menu, link para cada uma. O lado direito que podem ser editadas clicando mostra em tempo real todas as monos respectivos botões. dificações realizadas. A janela Menu Properties controla as proprieO FUNDO E A FONTE dades visuais do menu e será visPara alterar as cores de fundo, ta em detalhes adiante. basta clicar no botão Background, dentro da área Menu Bar. A tela seguinte permite escolher a cor OS ITENS Ao selecionar um novo projeto, o visualmente ou inserir valores do Selteco mostra alguns itens já conpadrão de cor RGB ou o código figurados. Dê um duplo clique nehexadecimal usado no HTML. Pales e modifique suas propriedades ra garantir a integração perfeita
5.
3.
6.
4.
TUTORIAL/NAVEGAÇÃO
com o arquivo HTML, escolhemos o código hexadecimal da cor usada na página (neste exemplo, é CCCCCC, um tom de cinza). Dessa forma, mudamos a cor de fundo das categorias e subcategorias. Para alterar a tonalidade acionada quando o mouse está sobre um item do menu (efeito mouseover), usamos o botão Highlight e repetimos todo o processo. Assim como fizemos com a cor de fundo, alteramos as propriedades da fonte usada nos menus para adequá-la à página HTML. Para isso, clicamos nos botões Face e Color, na área Menu Font.
A GRAVAÇÃO 7. Nosso menu agora já tem todas as categorias, subcategorias e está adequado ao visual da página. Salvamos o arquivo na forma de pro jeto do Selteco. Assim, se houver alguma modificação no futuro, não haverá a necessidade de debulhar
o código JavaScript. Basta abrir novamente o projeto e fazer as correções visualmente.
A EXPORTAÇÃO DO MENU 8. O Selteco Menu Maker pode exportar o menu de duas formas: inserido num arquivo HTML ou como um arquivo JavaScript independente (com a extensão .js). A segunda opção tem a vantagem de valer para todas as páginas do site e só ser carregada uma vez pelo browser, proporcionando maior rapidez na navegação. Escolhemos a opção Export JavaScript e salvamos o arquivo .js no mesmo diretório da página HTML para evitar problemas de caminho.
A CHAMADA 9. Agora, falta apenas “chamar” o arquivo JavaScript para a nossa página original. Para isso, abrimos o código-fonte do arquivo HTML e inserimos a tag: <script src= “nomedoarquivo. js”> den-
Exportação: menu pode ir num arquivo HTML ou JavaScript
tro da célula que criamos no lado esquerdo da tela. Pronto, o menu desdobrável já está funcionando direitinho dentro da nossa página. Agora, toda vez que um internauta acessar a página, irá carregar o JavaScript. C OL EÇ ÃO I NF O > 103
TUTORIAL/FORMULÁRIO
BOLETIM? É COM O DREAMWEAVER SAIBA COMO MONTAR UM FORMULÁRIO PARA PEDIDO DE NEWSLETTER COM MYSQL E PHP POR ANDRÉ CARDOZO
s newsletters são um dos bons serviços prestados pelos sites de notícias. Nada melhor, para o usuário, do que abrir a caixa de correio eletrônico e encontrar informações fresquinhas sobre o assunto que lhe interessa. Para a empresa que envia, a visibilidade é garantida, e a fidelidade, cultivada. Desenvolvedores de software, por exemplo, se beneficiam do envio de boletins sobre as atualizações e correções de bugs de seus programas. Mas sempre para os usuários cadastrados, é claro.
A
Neste tutorial, vamos montar no site um pedido de recebimento de boletim de notícias no Dreamweaver. O formulário acessará um banco de dados MySQL por meio de um script em PHP. Para testar o formulário localmente, é necessário ter o PHP, o MySQL e um servidor web instalados no sistema. O banco de dados MySQL pode ser criado por meio de comandos ou de interfaces gráficas. Aqui, vamos usar o programa SQLyog (disponível no endereço www.info.abril.com.br/ download/3232.shtml) para criar o banco de dados.
1. AS TABELAS
Formulário: pedido de entrega de boletim por e-mail
O importante no banco de dados do nosso boletim é que a tabela tenha quatro campos: id, nome, email e boletim. O campo “id” é a chave primária do banco de dados e aumenta seu valor em um a cada
TUTORIAL/FORMULÁRIO
barra de formulário e clicamos no botão Form. Digitamos a palavra “Nome” e, ao lado dela, clicamos no botão Text Field para inserir a primeira caixa de texto para o primeiro campo. Depois, ajustaCampos e botão: ajuste de propriedades completa o modelo mos as propriedades da caixa. novo registro. Os campos “nome” Repetimos o procedimento pae “email” recebem os dados de no- ra o campo de e-mail. Digitamos a me e e-mail do internauta. O cam- palavra, inserimos a caixa e confipo “boletim” aceita apenas valo- guramos suas propriedades. res 0 e 1, que correspondem a aceiO PEDIDO tar ou não o boletim de notícias. O próximo campo é a caixa em que O SITE o internauta indica se quer ou não Com o banco de dados montado, receber o boletim de notícias. Divamos definir um site no Dream- gitamos a frase e clicamos na caiweaver. Acionamos o menu Site > xa Checkbox para inserir a caixa Manage Sites e, depois, clicamos de seleção. Damos o nome de “bono botão New. Na aba Advanced, letim” para a caixa. acessamos a categoria Testing SerO último componente do formuver e escolhemos a opção PHP lário é o botão que envia as inforMySQL e o tipo de acesso. Para fi- mações. Clicamos no ícone Button nalizar, clicamos em OK. Acessa- da barra de ferramentas e ajustamos o menu File > New para criar mos as propriedades do botão paum arquivo novo. Escolhemos o ti- ra completar o formulário. A parpo PHP e clicamos em OK. Depois, te visual está pronta. usamos as ferramentas do DreamA CONEXÃO weaver para fazer o layout. Para criar a conexão com o banco O FORMULÁRIO de dados, acessamos o menu WinCom o layout montado, é hora de dow > Databases. Clicamos no siinserir o formulário. Exibimos a nal de mais do painel e escolhe-
4.
2.
5.
3.
C OL E ÇÃ O I NF O > 105
TUTORIAL/FORMULÁRIO
mos MySQL Connection. Surge a de dados. Por isso, clicamos no si janela de configuração da conenal de mais do painel e escolhexão. Nessa tela digitamos o nome mos a opção Insert Record. Na teda conexão, o endereço do servila de configuração, novamente esdor, o nome de colhemos a cousuário e, se nenexão com o cessário, a senha. banco de dados. Quando clicamos O Dreamweaver FÁCil no botão de seexibe a corresPara simplificar a criação de pondência entre leção de banco tabelas no banco de dados, de dados, o os campos do verifique se o serviço de Dreamweaver formulário e os hospedagem que você utiliza oferece um gerenciador exibe todos os do banco de dabancos presentes dos. No último no sistema. Basta selecionar o decampo, inserimos a página que sesejado e clicar em OK. rá exibida depois que o usuário ativar o formulário. Quando clicaA CONFIGURAÇÃO mos em OK, a ação Insert Record A conexão criada com o banco de é exibida logo abaixo do Recorddados é exibida no painel Databaset. O formulário está pronto. Acionamos F12 para abrir o navegases. Clicamos então no painel Server Behaviors. Nele, acionamos o dor e testar. Para ter certeza de sinal de mais e escolhemos a opque tudo deu certo, basta abrir o ção Recordset. Em seguida, banco de dados MySQL e conferir se o registro foi inserido. aparece uma tela de configuração. Nessa tela, escolhemos a conexão com o banco de dados. O Dreamweaver automaticamente exibe a tabela e os campos do banco de dados. Clicamos em OK. O Recordset está configurado. Nosso formulário vai inserir registros no banco Banco de dados: configurando a conexão com o MySQL
FAÇA
6.
106 < C OL EÇ ÃO I NF O
TUTORIAL/LISTA DE DISCUSSÃO
UM FÓRUM CHEIO DE OPINIÃO MONTE SEU FÓRUM NA WEB USANDO O PROGRAMA PHPBB NO CONECTIVA LINUX COM O SERVIDOR APACHE
m fórum é sempre pon- pos de usuários. O administrador tem to de destaque em qual- a possibilidade de ainda limitar o acesquer site. As listas de so à visualização, postagem de resdiscussão ajudam pro- postas e muitas outras funções. O fissionais a encontrar respostas pa- moderador tem poder para apagar, ra suas dúvidas, servem para com- mover, bloquear ou desbloquear as partilhar opiniões e unem comuni- mensagens, uma a uma, em bloco ou dades em torno dos sites. O phpBB, todas de uma só vez. Para a personalização, você pode programa de criação e gerenciamento de fóruns de discussão, é um dos contar com a utilização de templates preferidos dos programadores. que ficam guardados separadamenBaseado na linguagem PHP, o te do código do PHP, permitindo que phpBB foi totalmente remodelado na as mudanças de layout sejam feitas versão 2.0. Seu redesenho está dire- mais facilmente. As fontes e cores uticionado para uma utilização profis- lizadas no seu fórum podem ser consional, com total liberdade de perso- troladas por meio de arquivos de CSS nalização. Além disso, recebeu me- (Cascading Style Sheets). lhorias de segurança, interface em múltiplos idiomas e suporte aos mais variados bancos de dados. O phpBB permite a criação de uma quantidade ilimitada de fóruns, organizados em categorias. A administração de usuários, grupos e permissões é outro destaque do produto. O controle de acesso pode ser especificado diretamente para os gru- phpBB: configuração em formulário fácil de usar
U
C OL EÇ Ã O I N FO > 107
TUTORIAL/LISTA DE DISCUSSÃO
Veja, no tutorial a seguir, como o phpBB pode ser instalado e configurado com facilidade. Neste exemplo, usamos a distribuição Conectiva do Linux, banco de dados MySQL e servidor web Apache. 1. Faça o download do phpBB em www.info. abril.com.br/download/ 3206.shtml. O arquivo es- Fórum pronto: áreas delimitadas, com boa leitura tá no formato ZIP. Localize o diretório de páginas Isso irá ativar o usuário criado. do seu servidor web. NormalmenAinda no console do phpMyAdmin, te elas ficam guardadas no diretócrie um novo banco de dados chario: /usr/local/apache/htdocs ou mado phpbb. c:/apache/htdocs. 4. Com o browser, acesse o phpBB Descompacte o arquivo baixado pelo endereço: nesse diretório. Ele criará um diretóhttp://localhost/phpBB2/ rio /phpBB2. Na página de instalação, preencha 2. Na linha de comando, digite a seos seguintes campos: guinte seqüência: Database Server Hostname / DSN: chmod a+w config.php localhost O objetivo é permitir que o PHP Your Database Name: phpbb possa alterar o arquivo de configuDatabase Username: phpbb ração para fazer a instalação. Database Password: phpbb 3. Pelo seu browser, abra o Prefix for tables in database: phpbb_ phpMyAdmin (www.info.abril.com. Escolha também um nome de br/download/3259.shtml), um pro- usuário para o administrador da lista grama que administra o MySQL. Crie de discussão e uma senha. um usuário no MySQL chamado 5. Acione o botão Start Install e, phpbb. Defina uma senha com perem seguida, clique no botão Finish missão para: Installation. Agora, apague os diretórios “insHost: localhost Depois disso, na linha de comantall” e “contrib” e retire os direitos de do do programa phpMyAdmin, digigravação do arquivo config.php, com te o seguinte: o seguinte comando: flush privileges chmod a-w config.php
TUTORIAL/LISTA DE DISCUSSÃO
6. Acesse http://localhost/phpBB2/ pelo seu browser e clique em Login. Digite seu nome de usuário e a senha que você escolheu para o administrador e clique em Log In. Vá até o fim da página e clique em Go to Administration Panel. No menu, escolha General Admin/Configuration, para personalizar
o fórum (domínio, descrição, e-mail do administrador e outros itens). Ainda no menu, escolha Forum Admin/Management. Aqui você pode criar um novo fórum facilmente. Basta colocar o nome do fórum e clicar em Create New Forum. Preencha a descrição e ele já estará disponível para uso.
DISCUSSÃO EM PORTUGUÊS O phpBB oferece pacotes do phpBB, apontando seu complementares que browser para o servidor local, traduzem as mensagens dos no endereço programas para vários http://127.0.0.1/phpBB2/admin. idiomas. Para obter esse Localize o item General complemento em português Admin/Configuration falado no Brasil, faça o e troque a opção Default download no endereço www. Language para Portuguese info.abril.com.br/download/ [Brazil]. 3. Volte ao phpBB 3237.shtml. É um arquivo zipado com apenas 48 KB. (http://127.0.0.1/phpBB2), Veja, agora, como instalar clique em Profile e troque esse módulo de idioma. a opção Board Language 1. Salve o arquivo .zip dentro também para Portuguese do diretório phpBB2/language [Brazil]. e descompacte-o com o comando unziplang_ portuguese_ brazil.zip. Com isso, será criado o subdiretório phpBB2/language/ lang_portuguese_ brazil. 2. Acesse a interface de Idioma: adicionando complemento em português configuração C OL EÇ ÃO I NF O > 109
DOWNLOADS/COISAS LEGAIS
PORTAL NO AR SEM GASTAR NADA UMA SELEÇÃO ESPERTA DE FERRAMENTAS GRATUITAS PARA SITES DINÂMICOS POR DANIEL AVIZU
ão é preciso ter conta bancária recheada para criar um site dinâmico repleto de recursos. Com as ferramentas gratuitas que selecionamos, qualquer um pode criar um portal rapidamente. A seguir, você vai conhecer opções de gerenciadores de conteúdo, banco de dados, temas tableless, interpretadores e muito mais. Aproveite.
N
6.2.11 >PlainWEBGUI Black www.info.abril.com.br/download/4195.shtml AVALIAÇÃO TÉCNICA:
7,0
CUSTO/BENEFÍCIO:
WebGUI: o instalador configura tudo
Disponível para Windows e Linux, esse gerenciador de conteúdo (CMS) tem uma interface muito amigável. Nela é possível alterar a posição dos elementos da página apenas arrastando-os. Além disso, já vem com vários componentes que facilitam a vida do webmaster, como enquete, fórum, calendário de eventos, gerenciador de arquivos, geração automática de formulários e mapa automático do site. Na hora de colocar no ar um box de busca, por exemplo, com poucos cliques dá para escolher entre as opções normal, avançada e por assunto. Sua versão para Windows conta ainda com um instalador, o All-In-One, que instala e configura automaticamente todos os programas necessários para a sua execução: Apache 2.0.50, PHP 4.3.7, MySQL, mySQLadmin, Perl 5.8.4, ImageMagik 5.5.7 e, opcionalmente, o suporte ao OpenSSL. Apesar desta comodidade, o WebGUI também pode ser utilizado com outros servidores web, como o IIS, da Microsoft. LIVRE, 47,7 MB, EM INGLÊS
4.5.1B >MiroMAMBO International www.info.abril.com.br/download/4196.shtml AVALIAÇÃO TÉCNICA:
7,0
CUSTO/BENEFÍCIO:
O Mambo é um gerenciador de conteúdo para todo o tipo de obra. De um lado, atende até o usuário de hosting básico, sem acesso a um shell e sem os privilégios de administrador. De outro, traz consigo um con junto de ferramentas de gente grande, como gerenciador de banners, alimentador de notícias de parceiros (newsfeed) e syndication, para distribuir os artigos do site no padrão RSS. Conta também com componentes para enquete, busca e gerenciamento de mídia, além de uma das maiores comunidades de usuários na internet, o que proporciona uma longa lista de sites com templates, módulos e muitos fóruns de discussão. Por ser baseado na web, roda em qualquer sistema operacional, mas desde que este possua um servidor web compatível com PHP, como o Apache, o IIS ou o iPlanet, por exemplo. LIVRE, 1,5 MB, EM INGLÊS
Para quem precisa de uma ferramenta de gerenciamento de conteúdo mais enxuta e que vá direto ao que interessa, o Drupal é uma boa opção. Sua interface é simples e focada na publicação das páginas, deixando de lado toda a pirotecnia dos concorrentes. Mas isso não quer dizer que ele seja carente de recursos, pelo contrário. Debaixo de sua austeridade, o Drupal abriga ferramentas valiosas, como blog, blogApi para publicação via XML-RPC, relatório de acessos, fórum, adição de comentários e distribuição de conteúdo via RSS. Conta ainda com o DrupalID, recurso que notifica um servidor central sobre a existência do seu site e eventuais problemas que possam ocorrer. Entre os vários módulos disponíveis, há um tradutor para o português do Brasil. LIVRE, 452 KB, EM INGLÊS
Drupal: software enxuto e poderoso C OL EÇ ÃO I NF O > 111
DOWNLOADS/COISAS LEGAIS
PostNuke: gerenciador colaborativo
cading Style Sheets), que é capaz de colocar os elementos em seus lugares, poupando código e, conseqüentemente, acelerando o download da página. No site www.portalthemes. com há uma grande variedade de temas com visuais dos mais variados. Há também o site themes.postnuke. com, da própria PostNuke, que reúne temas de diferentes fornecedores, alguns grátis e outros, não. LIVRE, 350 KB, EM INGLÊS
O PostNuke é mais que um CMS, é um gerenciador colaborativo de conteúdo e comunidades. Nele é possível organizar grupos de colaboradores para o site, cada um com a sua função, com cotas e acessos diferenciados. Na tela, ele indica quais os membros que estão online e qual a sua produtividade. O software conta também com módulos de gerenciamento de banners, fóruns, blogs, conteúdo para PDAs, busca, envio de mensagens e estatísticas de acesso. LIVRE, 3,25 MB, EM INGLÊS
O template da peekmambo para Mambo possui links configuráveis e largura fixa. Se a imagem da Terra não agradar, faça o cadastro no site do fabricante ( www.peekmambo.com) e baixe algum outro membro da família Millennium, como o Keyboard ou o Flower, por exemplo. Existem inúmeros sites que oferecem downloads de com-
DOWNLOADS/COISAS LEGAIS
Millenium Earth: template para Mambo
ponentes e templates para Mambo, como é o caso do www.freemambo.com e do www.mambodev.com. A febre é tamanha, que já existem portais, como o www. mamboawards.com, que montam um ranking, dividido em várias categorias, dos melhores sites desenvolvidos com Mambo. LIVRE, 153 KB, EM INGLÊS
> POSTGRESQL 8.0.2
PostgreSQL Global Development Group www.info.abril.com.br/download/4119.shtml AVALIAÇÃO TÉCNICA:
7,5
CUSTO/BENEFÍCIO:
Para quem precisa de um banco de dados relacional confiável e compatível com a maioria dos softwares livres, o PostgreSQL é uma ótima solução. Diferentemente dos bancos de dados tradicionais, o PostgreSQL possui um sistema de controle transacional que isola cada sessão entre a aplicação e o banco. O MVCC (Multiversion Concurrency Control) faz com que a transação se dê com uma foto
do banco tirada no momento anterior. A vantagem disso é que uma query de leitura nunca terá de esperar que uma query de escrita termine para que possa ser executada e vice-versa. Mas é na hora de escrever stored procedures, os scripts SQL, que o PostgreSQL dá um show. Ele aceita que sejam escritos em SQL, TCL, Perl ou Python, e se isso não for suficiente, ainda é possível criar uma nova linguagem de script para ele. LIVRE, 17,6 MB, EM INGLÊS
Para os usuários do PostgreSQL, já se foi a época em que administrar o banco de dados era missão apenas para escovadores de bits. Todas aquelas tarefas chatas de criação dos usuários, dos bancos e das tabelas agora podem ser feitas numa interface amigável e sem dores de cabeça. Além da interface web, o phpPgAdmin possui outras como-