Joomla!

Joomla!

Todos os direitos reservados para Alfamdia Prow.

AVISO DE RESPONSABILIDADE As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues tenham sido tomadas na preparao deste material, a Alfamdia Prow no tm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instrues contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.

12/2011 Verso 1.3

Alfamdia Prow http://www.alfamidia.com.br

2011

Alfamdia Prow

Joomla!

UNIDADE 1 1.1 1.2 UNIDADE 2 2.1 2.2 2.3 2.4 UNIDADE 3 3.1 3.2 3.2.1 3.2.2 3.2.3 3.3 3.4 3.5 UNIDADE 4 4.1 4.2 4.3 UNIDADE 5 5.1 5.2 5.3 5.4 5.5 5.6 5.6.1 5.6.2 5.6.3 5.6.4 5.7 5.7.1 5.7.2 5.8 5.8.1 5.9 5.10 5.11 UNIDADE 6 6.1 6.2 6.3 UNIDADE 7

JOOMLA! PARA WEB DESIGNERS......................................................................................................... 5 SOBRE O CURSO ............................................................................................................................... 5 ESTRUTURA DO CURSO .................................................................................................................... 5 CONCEITOS............................................................................................................................................... 6 O QUE CMS................................................................................................................................... 6 TECNOLOGIAS ENVOLVIDAS ............................................................................................................. 6 COMPARATIVOS DE MTODOS DE CRIAO DE UM WEB SITE: TRADICIONAL X JOOMLA .................. 6 HOSPEDAGEM DE SITES COMPATVEL COM JOOMLA ......................................................................... 7 INSTALANDO O JOOMLA! NO SERVIDOR WEB ................................................................................... 8 BAIXANDO O APLICATIVO JOOMLA! ATUALIZADO............................................................................ 8 CONFIGURANDO O BANCO DE DADOS NO PROVEDOR DE HOSPEDAGEM. ........................................... 9 Criando o banco de dados .......................................................................................................... 9 Criando o usurio do banco de dados ...................................................................................... 10 Associando o Banco de dados com o usurio criado ............................................................... 11 ENVIANDO OS ARQUIVOS JOOMLA! PARA O SERVIDOR WEB. .......................................................... 12 UTILIZANDO SERVIDOR LOCAL PARA INSTALAO ........................................................................ 14 INSTALANDO SEU SITE EM JOOMLA!. .............................................................................................. 15 UTILIZAO E CONFIGURAES APS A INSTALAO ................................................................ 21 ACESSO AO SITE ............................................................................................................................. 21 ACESSO A ADMINISTRAO DO JOOMLA! ...................................................................................... 22 PACOTE DE TRADUO .................................................................................................................. 22 ADMINISTRAO BSICA DO JOOMLA .............................................................................................. 24 ADMINISTRAO DE USURIOS ..................................................................................................... 24 ADMINISTRAO DE MDIAS .......................................................................................................... 24 CONFIGURAO GLOBAL ............................................................................................................... 25 MENUS ........................................................................................................................................... 25 CONTEDO ..................................................................................................................................... 26 CONCEITOS JOOMLA! ..................................................................................................................... 26 Componentes ............................................................................................................................ 26 Mdulos .................................................................................................................................... 27 Plugin ....................................................................................................................................... 27 Idiomas ..................................................................................................................................... 27 MENU COMPONENTES .................................................................................................................... 27 Fonte de Notcias Externas ....................................................................................................... 28 Formulrio de Contatos ........................................................................................................... 29 EXTENSES .................................................................................................................................... 30 Instalar e Desinstalar extenses ............................................................................................... 30 GERENCIADOR DE MDULO ........................................................................................................... 31 GERENCIADOR DE PLUGIN ............................................................................................................. 32 GERENCIADOR DE TEMAS .............................................................................................................. 32 CONTEDO DINMICO: ARTIGOS........................................................................................................ 33 SESSES ......................................................................................................................................... 33 CATEGORIAS .................................................................................................................................. 34 CRIANDO ARTIGOS ......................................................................................................................... 34 MENUS ..................................................................................................................................................... 37

2011

Alfamdia Prow

Joomla!

7.1 7.2 7.3 7.4 7.5 UNIDADE 8

INTEGRAO ARTIGO/MENU ......................................................................................................... 37 MENU EM LAYOUT DO BLOG DE CATEGORIA ................................................................................. 38 MENU EM LAYOUT PADRO DE CATEGORIA .................................................................................. 40 MENU DO COMPONENTE CONTATO ................................................................................................ 40 SUBMENUS ..................................................................................................................................... 41 EXTENDENDO O JOOMLA!.................................................................................................................... 42

8.1 EXTENSES TEIS .......................................................................................................................... 42 8.1.1 Comentrios ............................................................................................................................. 42 8.1.2 E-commerce .............................................................................................................................. 42 8.1.3 Galerias de Imagem.................................................................................................................. 43 8.1.4 Formulrios .............................................................................................................................. 43 8.1.5 Agenda/Calendrio ................................................................................................................... 43 8.1.6 Slideshow .................................................................................................................................. 43 8.1.7 Google Maps ............................................................................................................................ 43 8.1.8 Newsletter ................................................................................................................................. 44 8.2 BUSCANDO TEMAS ......................................................................................................................... 44 UNIDADE 9 UTILIZANDO UM TEMPLATE PRPRIO EM CSS ................................................................................. 45

9.1 CRIANDO UM TEMPLATE ................................................................................................................ 45 9.1.1 O arquivo templateDetails.xml ................................................................................................. 46 9.1.2 O arquivo index.php antes dos cdigos Joomla! ...................................................................... 48 9.1.3 O arquivo CSS (Cascading Style Sheets) .................................................................................. 49 9.1.4 O arquivo index.php depois dos cdigos Joomla! .................................................................... 52 9.1.5 Melhorias no arquivo CSS ........................................................................................................ 54 UNIDADE 10 10.1 10.2 DICAS TEIS ...................................................................................................................................... 56

OTIMIZANDO O SITE JOOMLA! PARA OBTER MAIS ACESSOS ............................................................ 56 VINCULANDO O JOOMLA! COM O BANCO DE DADOS ...................................................................... 57 NOVAS VERSES ................................................................................................................................... 57

UNIDADE 11 11.1

VERSES NOVAS DO JOOMLA!........................................................................................................ 57

2011

Alfamdia Prow

Joomla!

Unidade 1 Joomla!
1.1 Sobre o Curso
O Curso Joomla! apresenta aos alunos conceitos envolvendo CMS - Content Management Systems, (Sistema de Gesto de Contedos, em portugus), sistema este que o Joomla!, como software livre, lder mundial na rea. Alm de compreender noes importantes, como instalao e gerenciamento do Joomla!, o aluno aprender como utilizar componentes que se fazem necessrios para gerir um web site sem necessidade de programao e tambm a adaptar um layout prprio a este sistema. Aprender tambm a realizar toda a instalao do sistema e configurao para instarar o banco de dados, mesmo sem ter conhecimento na rea de programao.

1.2 Estrutura do Curso

Primeiramente trabalharemos com os conceitos principais sobre CMS e Joomla!. As unidades seguintes abordam tpicos como: comparativo entre mtodos tradicionais e Joomla! para criao de web site dinmico, instalao de Joomla! em servidor web, pacotes de traduo, templates para Joomla!, componentes, entre outros. O curso traz exerccio prtico para uma melhor fixao do contedo. Durante o transcorrer de todo o curso o aluno aprender a trabalhar de forma autnoma no desenvolvimento de web site com Joomla!.

2011

Alfamdia Prow

Joomla!

Unidade 2 Conceitos
2.1 O que CMS
Um Sistema de Gesto de Contedo - SGC, (em ingls Content Management Systems - CMS), um sistema gestor de contedo para web sites, portais e intranets, que integra ferramentas necessrias para criar, editar e inserir contedos em tempo real, sem a necessidade de programao de cdigo, cujo objetivo estruturar e facilitar a criao, administrao, distribuio, publicao e disponibilidade da informao. A sua maior caracterstica a grande quantidade de funes presentes. Podemos dizer que um CMS um framework, um esqueleto de web site prprogramado, com recursos bsicos e de manuteno e administrao j prontamente disponveis. O Joomla! um exemplo de CMS, utilizado para criao de web sites dinmicos, com possibilidade de insero de componentes das mais variadas funes, quase sempre gratuito.

2.2 Tecnologias envolvidas

O Joomla! um projeto de cdigo aberto (Licena GNU/GPL), que por usa vez utiliza a linguagem de programao PHP e banco de dados MySQL. O Joomla! foi desenvolvido do CMS Mambo.

2.3 Comparativos de mtodos de criao de um web site: tradicional X Joomla

A grande necessidade de um webdesign atender uma demanda crescente na rea: Dinamismo para seu web site. Quando necessrio, o webdesigner deve buscar as parcerias necessrias para dinamizar o site com programadores, porm, muitas vezes o custo do projeto devido a esta mo de obra extra estrapola e fica invivel para o cliente. A soluo usar um framework de gesto de contedo, e o Joomla! destaca-se por ser para aqueles que no conhecem programao como o mais fcil de aprender.
2011 Alfamdia Prow.

Joomla!

Alm do webdesign, muitos programadores preferem utilizar os frameworks, pois no existe a necessidade de criar algo que j foi criado. Muitas vezes estes programadores acabam criando novos mdulos para o Joomla! para atender uma necessidade de um cliente, e este mdulo passa a fazer parte de outros projetos mundo a fora. Veja o quadro comparativo a um projeto de um web site dinmico:
Sistema tradicional Profissional de Programao Tempo de implementao Profissionais envolvidos Necessrio Mdio/Alto Mnimo 1 Webdesing e 1 programador Joomla! Desnecessrio Baixo/Medio 1 Profissional suficiente

Olhando o quadro acima, fica claro que o custo do projeto para uma programao tradicional aumentar, pois ter mais mo de obra especializada. No devemos desmerecer este custo, afinal, todo o trabalho dispensado para construo de um sistema/web site merece ser recompensado. Trata-se aqui de aprender a otimizar o tempo de trabalho obtendo resultados to ou mais satisfatrios. inegvel que alguns projetos necessitam realmente de programao, pois se trata de um sistema muito especfico, porm, muitas questes podem ser resolvidas localizando um componente do Joomla!

2.4 Hospedagem de sites compatvel com Joomla

Para que seja possvel instalar o Joomla!, necessria a contratao de um servio de hospedagem que d suporte a PHP e tenha banco de dados MySQL. Em geral, os planos de hospedagem Linux oferecem estes servios. Existe ainda a possibilidade de contratao de plano de hospedagem que contempla script de instalao do Joomla!, o mais famoso o script chamado Fantstico, que muitos servidores oferecem em seus planos de hospedagem. Estes scripts automatizam a instalao facilitando o processo. Independente de instalao via script ou manualmente, ainda necessrio o conhecimento da ferramenta, pois a instalao gera um site padro do Joomla!, sendo necessrio realizar configuraes necessrias para customizar o projeto. Os provedores de hospedagem no costumam dar suporte para o contedo do site, ou seja, no haver suporte para a configurao do Joomla!, somente e quando muito, para a instalao.

2011 Alfamdia Prow.

Joomla!

Unidade 3 Instalando o Joomla! no servidor web

Nesta unidade trabalharemos a instalao do Joomla! em um servidor de internet, configurando o banco de dados e realizando ajustes necessrios para o bom funcionamento do sistema.

3.1 Baixando o aplicativo Joomla! atualizado

No site www.joomla.org, site oficial do projeto, possvel localizar o aplicativo. O download est disponvel em ingls, mas existem pacotes de traduo para portugus que podem ser utilizados, no qual trataremos na sequncia da apostila.

Em nosso trabalho, utilizaremos o pacote completo, j que no site oficial permitido baixar atualizao de verses. O pacote completo est compactado (extenso.ZIP), este pacote deve ser descompactado e enviado via FTP (File Transfer Protocol) para o local onde o site

2011 Alfamdia Prow.

Joomla!

em Joomla! ficar no seu servidor de hospedagem ou ento utilizar em um servidor local, utilizando por exemplo a instalao do WampServer, que roda localmente PHP e MySQL na sua prpria mquina. Abordaremos esta instalao posteriormente nesta unidade. Antes de enviar ao servidor, contudo, devemos ter o nosso banco de dados criado no servidor de hospedagem. o que veremos a seguir:

3.2 Configurando o banco de dados no provedor de hospedagem.

Cada provedor tem o seu mtodo de criao de banco de dados, nesta apostila utilizaremos a criao via CPanel, que um dos softwares de Painel de Controle de Hospedagem mais usado no mundo. Para poder configurar estes dados, voc dever j ter contratado em um provedor de hospedagem um plano de hospedagem que contemple Banco de Dados e j ter configurado os DNS (Domain Name System) do seu provedor no registro do seu domnio. Caso no tenhas a senha do seu Painel de Controle, solicite ao suporte do seu provedor para que possas configurar o Banco de Dados. Tendo estes dados com voc, vamos partir para a configurao:

3.2.1 Criando o banco de dados

1 Acesse o Painel de Controle do servidor pelo endereo que seu provedor disponibilizou, com seu nome de usurio e senha, e aps localize a opo Banco de dados MySQL

2011 Alfamdia Prow.

Joomla!

Entrando em Banco de dados MySQL, a primeira opo da tela para criar um novo banco de dados. Vamos criar um banco para o Joomla!. Note que normalmente dado um prefixo ao nome do banco que se est criando. Este prefixo normalmente o nome de usurio que o seu provedor de hospedagem designou para voc acessar o painel de controle.

3.2.2 Criando o usurio do banco de dados

Aps criar o Banco de Dados, o prximo passo criar um usurio para utilizar tal banco. Para isto, na tela do Banco de dados MySQL existe a opo de criao de usurio, conforme imagem abaixo:

10

2011 Alfamdia Prow.

Joomla!

Importante: da mesma forma que o nome do Banco de Dados, o nome criado para o usurio tambm deve levar um prefixo, que o nome de usurio que o provedor de hospedagem criou para ser usado na sua conta. Ex: prefixo_alfa. Guarde bem a senha utilizada pois ela ser necessria para configurar os parmetros do Joomla!.

3.2.3 Associando o Banco de dados com o usurio criado

Aps a criao do Banco de dados e do usurio a ser utilizado, necessrio criar um vnculo entre eles, para que possa ser utilizado pelo servidor. Este vnculo configurado na mesma tela de criao de Banco de Dados e de usurio para Banco de Dados, conforme mostra a imagem abaixo:

Escolha o Banco e usurio criado por voc para este projeto, e clique em Adicionar. Uma nova tela aparecer para que seja criado as permisses:

11

2011 Alfamdia Prow.

Joomla!

Marque a opo All Privileges para dar a este usurio todos os privilgios de acesso ao banco, necessrio para a utilizao do mesmo. Aps, clique em Fazer Alteraes

3.3 Enviando os arquivos Joomla! para o servidor web.

Aps ter realizado a configurao do Banco de Dados e de ter vinculado o pacote de instalao do Joomla! ao banco, hora de realizar o upload dos arquivos para o banco de dados. Para realizar este upload, voc dever usar um programa de FTP (File Transfer Protocol). Ns utilizaremos o programa FileZilla, que disponvel gratuitamente na internet pelo endereo: http://filezilla-project.org Para realizar a conexo com o seu provedor, necessrio o host, usurio e senha de FTP. Conectado ao FTP, do lado esquerdo aparecer o seu computador, e do lado direito o servidor web da sua hospedagem. Se voc deseja que o Joomla! seja instalado no diretrio principal do seu site, e que quando digitado o domnio do seu site (www.enderecodoseusite.com.br) j abra o site em Joomla!, voc dever transferir os arquivos da esquerda para a direita, para dentro da pasta public_html ou pasta www. Se desejar em um subdiretrio, crie este diretrio na pasta public_html ou
12 2011 Alfamdia Prow.

Joomla!

pasta www. No nosso caso, enviaremos para a pasta joomla que abrir para o usurio final digitando o endereo no site com /joomla no fim. Ex: www.enderecodoseusite.com.br/joomla

Para transferir os dados, selecione os arquivos que se apresentam do lado esquerdo, e aps arraste-os para dentro da pasta de destino. Na parte inferior do FileZilla acompanhe as transferncias:

13

2011 Alfamdia Prow.

Joomla!

Aguarde at que todos os arquivos sejam transferidos.

3.4 Utilizando servidor local para instalao

3.4.1 Instalando o WAMP Server
Primeiramente, devemos baixar o WampServ, software que instalar o Apache, PHP e MySQL, tambm o phpmyAdmin e SQLitemanager. Voc deve fazer download do software em: http://www.wampserver.com/dl.php Aps, execute o arquivo que voc baixou, ele vai perguntar se voc deseja continuar a instalao, clique em SIM. Ser exibido a tela de apresentao, clique em NEXT, logo apos leia o Termos de Uso e clique novamente em NEXT. Escolha onde ser instalado o software, altamente recomendavel deixar o c:\wamp como padro, pois nomes com espaos ou maiores que 8 digitos podero ser problemas no futuro, na hora de configurao dos servidores. Clique em NEXT, duas vezes, e aps clique em INSTALL. Voc deve informar o programa, qual o seu navegador padro. Se voc deseja utilizar o Internet Explorer, voc deve ir no caminho C:\Arquivos de

14

2011 Alfamdia Prow.

Joomla!

programas\Internet Explorer e escolher o arquivo iexplore.exe, mas caso voc prefira o Firefox, escolha o caminho C:\Arquivos de programas\Mozilla Firefox e selecione o arquivo firefox.exe. Depois de escolher uma dessas opes, clique em OK. Voc deve informar o servidor SMTP (servidor de e-mail), mas como estamos instalando para fins educativos inicialmente deixaremos esta opo como padro, apenas clique em NEXT. Instalao concluida! Clique em FINISH para executar o WampServer. O WS esta rodando em seu sistema, para utiliza-lo voc dever encontrar um cone igual a este: ao lado do relgio do Windows, clique sobre o boto direito, v at LANGUAGE e selecione PORTUGUES. Agora clique uma vez com o boto esquerdo sobre o mesmo icone e ver todas as opes do programa, como parar, reiniciar e iniciar os servios (php, mysql, apache). Os servios j esto ativos no seu sistema. Por padro voc tem as seguintes configuraes: Acesso ao servidor web local se dar pelo http://localhost/ Diretrio dos seus arquivos pblicos ser o C:\wamp\www Gerenciador Mysql Phpmyadmin (recomendado): http://localhost/phpmyadmin/ Gerenciador Mysql SQLiteManager: http://localhost/phpmyadmin/ Informaes sobre o seu servidor: http://localhost/?phpinfo=1

3.4.2 Instalando o Joomla! localmente

Instalado o Wamp, descompacte o pacote do Joomla! na c:/wamp/www/XXX, onde XXX o nome do projeto que ser trabalhado. pasta

Aps, acesse por http://localhost/XXX (novamente, XXX o nome da pasta criada) Aparecer a instalao do Joomla, confirme segue na apostila.

3.5 Instalando seu site em Joomla!.

Depois de enviado para o servidor de hospedagem ou localmente, j podemos comear o procedimento de instalao do seu site em Joomla! no servidor.
2011 Alfamdia Prow.

15

Joomla!

Este procedimento configura o banco de dados com as tabelas necessrias e define senha de administrao, bem como outras configuraes. Para instalar, abra seu navegador e entre no endereo web que voc fez upload dos arquivos, por exemplo: se voc criou uma pasta chamada Joomla! na pasta raiz do seu site, acesse: www.enderecodoseusite.com.br/joomla. Abrir a seguinte tela:

Como ainda no foi instalado, o Joomla! redirecionar para o diretrio de instalao, e voc ter alguns passos a seguir. No primeiro passo, selecione o idioma para instalao, no nosso caso, PT-BR. Clique no boto Prximo. Abrir o Passo 2:

16

2011 Alfamdia Prow.

Joomla!

No passo 2, devemos prestar ateno para os requisitos (primeiro retngulo, onde todos requisitos devem ser atendidos. Nas configuraes recomendadas, permitido que alguma configurao no esteja adequado para avanar para a prxima etapa. Clicando no boto Prximo, iremos para o passo 3, que trata da licena de uso. O Joomla! um software regido pela licena GNU/GPL. GNU General Public License (Licena Pblica Geral), GNU GPL ou simplesmente GPL, a designao da licena para software livre idealizada por Richard Stallman no final da dcada de 1980, no mbito do projeto GNU da Free Software Foundation (FSF). Ao passar para a prxima parte, o passo 4, configuraremos o banco de dados. Muita ateno nesta configurao:

17

2011 Alfamdia Prow.

Joomla!

Os dados a serem preenchidos nesta etapa so os que voc guardou ao criar o Banco de Dados. Veja como preencher estes campos: Nome do Servidor Aqui configuramos o nome do servidor de banco de dados, que poder ser localhost ou poder ter um endereo especfico. Voc pode descobrir o endereo no Painel de Controle, no item Banco de Dados MySQL estar informado o Host SQL Remoto Aqui vai o usurio criado no Painel de Controle da sua hospedagem. Aqui vai a senha do usurio criado no Painel de Controle.

Nome de Usurio Senha

Nome do Banco de Aqui vai o nome do Banco de Dados criado. dados Aps realizar esta configurao, pode clicar em Prximo.

18

2011 Alfamdia Prow.

Joomla!

Nesta etapa configuramos a camada FTP. interessante que seja criado no Painel de Controle da sua hospedagem um usurio de FTP exclusivamente para esta camada, pois isto aumenta a segurana do seu site.

Aps configurar os dados de FTP, a prxima etapa nos pede dados para configurao do Joomla!, como nome do site e senha para administrao. Preencha o nome do site, que ser o nome usado no Joomla!, preencha o seu e-mail, uma senha para administrar o Joomla!, e para ns que estamos iniciando no trabalho do Joomla!, o interessante utilizar a opo Instalar exemplo de contedo, que aparece conforme imagem abaixo:

Aps realizar este procedimento, clique no boto Prximo. Pronto, agora para prosseguir necessrio entrar no FTP atravs de um programa de FTP, como o FileZilla, e renomear a pasta installation, coloque as letras old na

19

2011 Alfamdia Prow.

Joomla!

frente, alterando o nome para oldinstallation, desta forma, o Joomla! no mais procurar instalar quando inicia, e voc ter o site no ar.

20

2011 Alfamdia Prow.

Joomla!

Unidade 4 Utilizao e Configuraes aps a instalao

4.1 Acesso ao site
Aps a instalao e remoo ou edio do nome da pasta installation, acessando a URL onde o Joomla! foi instalado, voc ver a pgina inicial do Joomla!, no seu template padro:

Agora, para realizar alteraes na estrutura do site, devemos conhecer o ambiente de administrao:

21

2011 Alfamdia Prow.

Joomla!

4.2 Acesso a Administrao do Joomla!

Para administrar o Joomla!, voc dever entrar com a mesma URL do site, porm acrescentando/administrator no fim. Ex: www.enderecodoseusite.com.br/joomla/administrator Aparecer a tela de login:

O nome de usurio padro que a instalao gera admin, e a senha voc escolheu em uma etapa da instalao. Na administrao, por enquanto est liberado apenas o idioma ingls, mas veremos como acrescentar o idioma portugus. Entre com seu usurio e senha e vamos comear.

4.3 Pacote de Traduo

Para facilitar a utilizao do Joomla!, aprenderemos primeiramente como alterar o idioma para portugus do Brasil. Para isto, voc deve acessar o site oficial do Joomla: www.joomla.org, e localizar a opo Extensions, nesta opo, uma das categorias Language, onde encontra-se os pacotes de traduo. Realize o download do pacote de traduo, cuide para realizar o download da mesma verso do Joomla! que foi instalado. Aps o download, na Adminsitrao do Joomla! v ao menu Extensions, opo Install/Uninstall.
22 2011 Alfamdia Prow.

Joomla!

Busque no campo Package File: o arquivo que voc baixou. E aps clique em Upload File & Install Este procedimento far com que seja instalado o pacote automaticamente. Aps isto, v novamente ao menu Extensions, mas agora na opo Language Manager. Aparecer o idioma portugus, escolha-o e marque como padro (Default), tanto na opo Site, quanto Adminsitrador. Pronto, seu Joomla! est agora traduzido para Portugus, pronto para ser melhor explorado.

23

2011 Alfamdia Prow.

Joomla!

Unidade 5 Administrao bsica do Joomla

5.1 Administrao de Usurios
O Joomla! permite que mais de um usurio utilize a administrao, e que vrios usurios possam se cadastrar para ter acesso a contedos restritos. Quando o usurio se cadastra no Joomla! pelo site, ele recebe um e-mail de confirmao para dar segurana evitando cadastros falsos, pois s confirmando o cadastro que o usurio poder utilizar sua conta. O Administrador pode gerenciar estes usurios, desabilitando-os, criando novos usurios e lhes concedendo permisses maiores. Para realizar estas alteraes, na Administrao do Joomla!, v ao menu Site, Administrar Usurios.

Nesta tela voc poder realizar as alteraes necessrias para gerenciar os Usurios do seu site em Joomla!.

5.2 Administrao de Mdias

Existe um local especfico no Joomla! para inserir imagens e arquivos que sero utilizados posteriormente pelo site, em artigos e pginas. Este local a Adminsitrao de Mdias.

24

2011 Alfamdia Prow.

Joomla!

SUGESTO: Crie pastas para organizar os arquivos inseridos, pois esta organizao faz a diferena na hora de dar manuteno no site, quando vai se utilizar as mdias.

5.3 Configurao Global

No item configurao global podemos configurar dados como descrio do site e palavras chaves para auxiliar a busca por robs buscadores, configurar dados do servidor, como banco de dados e configurao de envio de e-mail do site. Cuide na alterao destas opes, pois a alterao indevida, por exemplo, das configuraes do banco de dados, pode retirar o site do ar.

5.4 Menus
O sistema de menus do Joomla! funciona como um mdulo, pois dependendo do menu, muda a posio em que ele se encontra, e ainda assim possvel alterar sua posio pelo Gerenciamento dos Mdulos, que veremos mais a frente na apostila. Para acessar a Adminsitrao de Menus, v ao menu Menus, Administrar Menus.

25

2011 Alfamdia Prow.

Joomla!

O menu: Main Menu refere-se ao menu principal. nele que est a pgina inicial. Todos os menus podem ser alterados, incluindo itens e retirando itens. Para tanto, na coluna: Itens de Menu est um boto para acessar esta ao. Neste item, podemos incluir novos itens de menus. Estes itens por sua vez, podem ter diferentes destinos, como links para artigos, para galeria de fotos, ser um submenu e outros itens que podem ser acrescentados posteriormente, como ser trabalhado adiante na apostila.

5.5 Contedo
onde encontra-e o importantssimo gerenciador de artigos. Artigos so os itens individuais de contedo que formam as pginas do site. Temos tambm as categorias e as sesses. Trabalharemos com estas informaes na apostila, em unidade posterior.

5.6 Conceitos Joomla!

A diferena de Componentes, Mdulos, Plugins e Idiomas, segundo o site oficial do Joomla! :

5.6.1 Componentes
O maior e mais complexo tipo de extenso. Componentes so como miniaplicaes que desenham o corpo principal da pgina, que podem ser acessados pela administrao para serem configurados.

26

2011 Alfamdia Prow.

Joomla!

5.6.2 Mdulos
Uma extenso mais flexvel e leve usada para renderizar uma pgina um mdulo. Pode inclusive ser visto dentro de um componente, como componente de artigos, de registro. So usados principalmente para ser inseridos nas posies do template.

5.6.3 Plugin
Uma das mais avanadas extenses para Joomla! o plugin. Um plugin uma sesso de cdigo que roda quando um evento predefinido acontece dentro do Joomla!. Um exemplo de plugin um editor de texto, que roda quando o evento que possibilita a edio de um artigo ocorre.

5.6.4 Idiomas
Talvez a extenso mais bsica e importante seja os idiomas: um pacote que traduz o Joomla! e seus principais mdulos e componentes nativos ou no. Sobre temas criados, trataremos em outro captulo da apostila. Vamos aprender aqui a inserir novos temas, buscar temas e adapt-los. Por padro, os seguintes componentes integram o Joomla! Contedo Banners Contatos Newsfeeds Pesquisar Links

5.7 Menu Componentes

Componentes So as extenses mais importantes para um site Joomla!, eles so os mdulos, plugins, modelos (templates) e idiomas. Para buscar as extenses do Joomla! temos o http://extensions.Joomla!.org/ que o repositrio oficial de extenses. endereo:

27

2011 Alfamdia Prow.

Joomla!

5.7.1 Fonte de Notcias Externas

Quando se tem sites com RSS possibilita a insero de contedo dinmico interno. A tecnologia do RSS permite aos usurios da internet se inscrever em sites que fornecem "feeds" RSS. Estes so tipicamente sites que mudam ou atualizam o seu contedo regularmente. Normalmente os feeds www.nomedoblog.com.br/feed. ficam em um endereo como

Para inserir uma fonte de notcia externa, basta ir ao menu Componente/ Fonte de Notcia. Pode-se configurar as Categorias e as Fontes. Configurando a fonte. Clique no boto Novo:

Digite o link do site com feeds RSS, escolha a categoria criada previamente e clique em Salvar. O resultado as ltimas noticias daquele site com o layout do seu site:

28

2011 Alfamdia Prow.

Joomla!

5.7.2 Formulrio de Contatos

Contato um componente nativo do Joomla!, devemos configurar os formulrios de contato, que podem ser mltiplos ou um s, e posteriormente deve ser inserido via menu da forma desejada. Para criar um formulrio, v ao menu Componente/Contatos (podemos configurar categorias e os prprios formulrios) Criando Formulrio: No formulrio voc pode configurar os dados que aparecero, e conta com parmetros que podem inclusive banir determinados e-mails. Veja na imagem a seguir.

29

2011 Alfamdia Prow.

Joomla!

5.8 Extenses
As extenses so de diversos tipos: mdulos, plugins, templates e idioma. Diferente dos itens abordados do menu componentes, que so fundamentais para a funcionalidade de um site Joomla!, as extenses so os outros itens que agregaro o site, que podem ser instalados e desinstalados conforme a necessidade.

5.8.1 Instalar e Desinstalar extenses

O link de menu Instalar/Desinstalar direciona-nos para o Gerenciador de Extenses, onde pode-se inserir novas ou retirar extenses que no se quer mais:

30

2011 Alfamdia Prow.

Joomla!

O Joomla! permite instalao de extenses em arquivos zip instalveis. A verso 1.5 ir automaticamente detectar o tipo de extenso e realizar a instalao.

5.9

Gerenciador de Mdulo
O gerenciador de mdulo (Menu Extenses/Administrar Mdulo) controla os parmetros e alocao de todos os mdulos do site Joomla!, como mostrado na imagem abaixo:

Mdulos so como mini-componentes. O que os diferenciam que o componente sempre exibe o seu contedo no corpo principal e o mdulo exibe em local designado.
2011 Alfamdia Prow.

31

Joomla!

Por Exemplo: O mdulo Banner pode ter seu local atribudo no topo, ou, dependendo do template e estratgia usada, ficaria melhor na posio esquerda.

5.10 Gerenciador de Plugin

O gerenciador de plugin (Menu Extenses/Administrar Plugin) onde voc pode controlar as opes de plugins instalados.

Alguns plugins no apresentam opes, mas sim servem para fins especficos, a exemplo do plugin Content Email Cloaking, que busca nas pginas endereos de e-mails e substitui no cdigo-fonte por JavaScript, evitando assim que spammers busquem atravs de programas especficos os endereos para envio de spam.

5.11 Gerenciador de Temas

O gerenciador de temas (Menu Extenses/Administrar Tema) onde voc pode controlar os templates, instalando e aplicando os mesmos ao seu site Joomla!. Encontra-se nesta pgina ainda a opo de instalar temas para o site ou para a parte de administrao.

32

2011 Alfamdia Prow.

Joomla!

Unidade 6 Contedo dinmico: Artigos

Os artigos servem para inserirmos notcias e contedos no site Joomla! de forma dinmica. Este o tpico no qual devemos mais ter cuidado, porque um contedo bem distribudo e de fcil acesso a garantia de sucesso na visitao do seu web site, e o contrrio pode determinar o fracasso do mesmo. Antes de sair criando artigos, o correto configurar as Sesses e as Categorias antes, afinal, este um Sistema Gerenciador de Contedo, e sua principal funo e organizar o contedo. Antes de mais nada, faa-se um desafio. No designe a funo organizao para o Joomla!. Faa voc antes um mapa das informaes. Desenhe um rascunho de como deseja que o contedo seja organizado. Abaixo montamos um exemplo para facilitar sua vida:
Pgina Inicial
Sobre ns Servios Fale Conosco Blog

Sobre Ns Texto sobre a empresa com uma foto

Servios Mtodo de trabalho

Grfica Digital Plotter

Fale Conosco Dados como Telefone, e-mail, mapa.

Blog Idias, novidades e notcias sobre os servios

Grfica Digital Muita informao e imagem sobre

Plotter Muita informao e imagem sobre

6.1 Sesses
As sesses de artigos servem para organizar o material do site. Deve-se criar as sesses individualizando os itens do site, pois ao criar os menus posteriormente,

33

2011 Alfamdia Prow.

Joomla!

possvel apresentar uma lista de todos os artigos de terminada sesso, facilitando a navegao do site Para criar novas sesses e administrar as j criadas, v ao menu Contedo, Administrar Sesso

6.2 Categorias
Aps criar as Sesses, as Categorias so necessrias e servem como subseo, podendo uma sesso ter vrias categorias. Ajudam tambm na organizao e na incluso de menus do web site. Ao criar uma nova categoria, pode-se definir tambm se o mesmo ser pblico ou restrito aos registrados do site.

6.3 Criando Artigos

Artigos de contedo so a mais baixa camada de hierarquia e so os mais importantes. Por se tratar diretamente da informao a se passar para o usurio do web site. a famosa pgina, como o usurio chama. Ao inserir um novo artigo, possvel escolher em qual Sesso e Categoria ele se enquadra, se deve aparecer na pgina inicial ou no, e ainda permite a insero de metadados, como forma de ajuda nas buscas por robs de buscadores na internet. Para inserir um novo artigo, v ao menu Contedo Administrar Artigos:

34

2011 Alfamdia Prow.

Joomla!

Clicando no boto Novo, um editor aparecer e podemos incluir o contedo que desejarmos. Ao rodap na insero de artigos, temos 3 botes importantes:

O boto Imagem permite a insero de imagens no artigo. Clicando neste, abrir uma janela igual abaixo:

35

2011 Alfamdia Prow.

Joomla!

Se a imagem j foi enviada anteriormente, basta escolher e clicar em Inserir, do contrrio, no fim da tela tem a opo de envio de novas imagens, aps realizar o upload por este campo, possvel inserir a imagem. DICA: Insira sempre a imagem do tamanho exato que deseja trabalhar no web site, assim voc evita imagens distorcidas e envia uma imagem com tratamento adequado, evitando assim ter imagens pesadas no site. O boto Quebra de pgina serve para que para textos longos, possa ter vrias pginas para facilitar a leitura e no estragar a parte visual do site. Ao inserir uma quebra de pgina, no frontend aparecer uma numerao para troca de pgina para continuao do artigo. Outro boto que bastante importante o boto Leia Mais... O boto leia mais serve para que, ao apresentar na capa ou com vrios itens de categoria, o seu texto no fique muito extenso, podendo em determinado ponto ter um boto leia mais... para que ao clicar aparea o texto completo.

36

2011 Alfamdia Prow.

Joomla!

Unidade 7 Menus
7.1 Integrao Artigo/Menu
E como colocar um artigo como link de menu? Esta uma tarefa importante. No menu podemos lanar todos os artigos de determinada categoria, ou diretamente um artigo. Vamos prtica: Crie um artigo, escolha uma sesso e uma categoria. Se ainda no tiveres cadastrado nenhuma categoria ou sesso, isto deve obrigatoriamente ser feito. Depois disto, acesse a Administrao, o menu Menus e Main Menus (mas se desejar colocar este artigo em outro menu, s escolher outro menu) Clique no boto Novo, para incluir um novo item de menu, escolha Link Interno/Artigos/Artigo/Layout Padro de Artigo:

Agora, na lateral direita, em Parmetros (Bsico) clique para escolher um artigo:

37

2011 Alfamdia Prow.

Joomla!

Escolha um ttulo e clique em Salvar. Logo aps, teste o site e verifique o novo item de menu.

7.2 Menu em Layout do Blog de Categoria

Alm da possibilidade de mostrar apenas um artigo, temos como mostrar um resumo de cada notcia mostrando-os como Blog de Categoria: Uma opo de menu do Joomla!. Para este exemplo ficar de fcil visualizao, voc deve ter cadastrado na categoria desejada no mnimo 5 artigos, e se eles tiverem muito contedo, deve-se usar o recurso Leia mais..., estudado anteriormente. Para criar este menu, V em Menus e Main Menus (mas se desejar colocar este artigo em outro menu, s escolher outro menu) Clique no boto Novo, para incluir um novo item de menu, escolha Link Interno/Artigos/Categoria/Layout do Blog de Categoria:

38

2011 Alfamdia Prow.

Joomla!

Salvando este item de menu, ao clicarmos no mesmo teremos a seguinte tela:

39

2011 Alfamdia Prow.

Joomla!

7.3 Menu em Layout Padro de Categoria

O Layout Padro de Categoria lista uma tabela com todos os artigos de uma determinada categoria. A montagem idntica ao Layout do Blog de Categoria, mas a maneira como apresentado no site Joomla! Muda. Para criar este menu, V em Menus e Main Menus (mas se desejar colocar este artigo em outro menu, s escolher outro menu) Clique no boto Novo, para incluir um novo item de menu, escolha Link Interno/Artigos/Categoria/Layout Padro de Categoria. Veja o frontend.

7.4 Menu do Componente Contato

O componente interno contato deve ser inserido no menu atravs da Administrao de Menus, porm antes deve ser criado o formulrio pelo menu Componentes/Contato. No caso de ter vrios formulrios de contato, possvel listar como Layout de Categoria de Contato, que no site Joomla! aparecer uma lista dos formulrios. Um exemplo ter formulrios por setor ou filiais. Normalmente utilizado Layout de Contato Padro para apresentar o formulrio.

40

2011 Alfamdia Prow.

Joomla!

7.5 Submenus
Voc pode designar o item de menu para ter um Item Pai. Desta forma, o item passa a ser um submenu. Dependendo da formatao do template/layout, este pode aparecer como menu pop-up.

41

2011 Alfamdia Prow.

Joomla!

Unidade 8 Extendendo o Joomla!

Dificilmente voc encontrar um site Joomla! que no tenha sido adicionado novas funcionalidades, at porque sem estas funcionalidades o site ficaria bsico. Existem centenas de extenses disponveis, algumas gratuitas, outras pagas, que podem simplesmente resolver o problema que voc precisa solucionar por um preo que realmente compensatrio. Como j vimos em outra unidade, as extenses so de diversos tipos: mdulos, plugins, templates e idioma. As extenses so itens que agregaro o site, que podem ser instalados e desinstalados conforme a necessidade. J aprendemos a realizar as instalaes, agora vamos focar em conhecer as principais extenses do Joomla!

8.1 Extenses teis

Apresentaremos algumas extenses e pode acontecer de algumas boas extenses ficarem de fora da nossa lista. Indicamos sempre buscar em frum da rea e no site http://extensions.joomla.org ou em http://extensionprofessionals.com

8.1.1 Comentrios
Jom Comment um poderoso sistema de comentrios baseado em Ajax para o site Joomla! Contempla sistema Captcha, evitando que spans apaream no site, um sistema profissional e pago. Existem obviamente vrios sistemas similares no site oficial de extenses, ao lado temos a imagem do menu do site oficial de extenses que mostra onde localizar tais componentes.

8.1.2 E-commerce
O e-commerce mais conhecido e usado o VirtueMart. Trata-se de um sistema de e-commerce completo, com categorias, produtos, pedidos, cupom de descontos e ainda pode ser usado apenas como um catlogo. O site do projeto http://virtuemart.net

42

2011 Alfamdia Prow.

Joomla!

8.1.3 Galerias de Imagem

Existem vrias galerias de imagens, e boas galerias. Citamos a Phoca Galerry, Expos e Ozio Galery. Estas galerias so gratuitas, e contemplam opo de visualizar a imagem maior. A Ozio trs mais modelos de apresentao, j a Phoca uma galeria mais fcil para ser utilizada, possibilitando mudana de layout.

8.1.4 Formulrios
Um bom componente de formulrio (http://joomlacode.org/gf/project/performs), com suporte formulrios simples em segundos. a o perForms Captcha, cria

Outro muito usado e gratuito o JForms (http://extensions.joomla.org/extensions/contacts-and-feedback/forms/6965)

8.1.5 Agenda/Calendrio
Uma boa ferramenta de agenda e eventos o EventList, que alm de criar uma agenda, gerencia os compromissos no site, cadastrando locais, fotos dos mesmos, gerando em um calendrio o vnculo com a agenda pelas datas. Ao clicar no evento, abre ento todos os detalhes cadastrados para o mesmo.

8.1.6 Slideshow
O JPG Flash Rotator 2 permite a voc selecionar a partir de uma srie de imagens para usar em um banner slide show no site Joomla!. Contempla mais de 5 transaes Flash diferentes e permite outras personalizaes, como cor de fundo.

8.1.7 Google Maps

Um plugin que exibe um ou mais mapas do Google dentro de itens de contedo do Joomla! o plugin GoogleMaps Mambot. (http://joomlacode.org/gf/project/mambot_google1). Pode com ele configurar a altura, largura, latitude, longitude e tipo de zoom.

43

2011 Alfamdia Prow.

Joomla!

8.1.8 Newsletter
Um bom componente de newsletter e gratuito o ccNewsletter (http://www.extensions.chillcreations.com/ ). Permite o envio com pausa de tempo para evitar que seja considretado SPAM.

8.2 Buscando Temas

Aprenderemos mais a frente como criar um template em CSS para o Joomla!. Neste captulo veremos como localizar templates para o Joomla! pronto. Existem clubes na internet que voc pode se associar e baixar templates para atualizar seu site, ou ainda, pode comprar por demanda um template. Uma boa pesquisa em buscadores pode trazer templates muito bonitos com preos bem razoveis. Segue a lista de alguns sites que disponibilizam, pagos ou gratuitos, template para Joomla!: http://www.rockettheme.com http://www.joomla.com.br/ http://www.templatemonster.com/ Alm de uma boa pesquisa nos buscadores, que se encontra muito destes templates.

44

2011 Alfamdia Prow.

Joomla!

Unidade 9 Utilizando um template prprio em CSS

Nesta unidade colocaremos em prtica o os passos para adaptar um template Joomla!. Especificamente vamos utilizar CSS (Cascading Style Sheets) para criao de um layout sem uso de tabelas. O que um Template Joomla? Um modelo Joomla! um grupo de arquivos que o Joomla! controla na apresentao do seu contedo. No um web site e no um design completo, mas a base para a visualizao do seu web site Joomla! Vantagens e desvantagens de usar um modelo CMS, da forma usada pelo Joomla!: H uma separao entre o contedo e a apresentao, especialmente quando usado CSS. Isto bom pois atende completamente os padres modernos da Web. Uma nova aparncia pode ser aplicada a qualquer momento ao site sem alterar o contedo. Um layout muito alternativo no design pode ser tarefa complicada para transformar em um modelo CMS

9.1 Criando um template

Primeiramente, voc deve criar um modelo, desenhando-o da forma que desejar: Photoshop, Fireworks, ou diretamente no Dreamweaver. O propsito ter um template pronto no Joomla!, para que possamos utilizar este template adaptando-o posteriormente para o sistema Joomla!. Para ilustrar esta possibilidade, criaremos passo a passo um layout pr-pronto, contendo algumas imagens e criando totalmente no modo tableless, ou seja, sem tabelas. Na pasta template do seu Joomla! instalado vamos criar uma nova pasta. Para este exemplo, usaremos a pasta alfa_sports. Para ganharmos tempo com a criao, j temos pronta as imagens, que sero colocadas dentro da pasta do template alfa_sport, na pasta img. O nome da pasta de imagens no uma regra, mas um bom costume de organizao, j que as imagens puderam ficar soltas na pasta do template, porm desorganizadas.

45

2011 Alfamdia Prow.

Joomla!

9.1.1 O arquivo templateDetails.xml

Este arquivo deve incluir todos os arquivos que so parte do template. O nome deste arquivo tem que ser exatamente este: templateDetails.xml (inclusive com o D maisculo). Ele inclui informaes como nome do autor, contato do autor e verso do tema. Abaixo segue o exemplo do tema que trabalharemos no nosso exerccio, e posteriormente o comentrio de cada linha:
<?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="template"> <name>alfa_sports</name> <creationDate>10/06/2010</creationDate> <author>Andreo Costa</author> <copyright>GPL</copyright> <authorEmail>andreo@parque.net.br</authorEmail> <authorUrl>http://www.alfamidia.com.br</authorUrl> <version>1.1</version> <description>Exemplo para treinamento Joomla!</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>css/template.css</filename> <filename>img/barra.jpg</filename> <filename>img/barra_dir_logo.jpg</filename> <filename>img/barra_esq_logo.jpg</filename> </files> <positions> <position>user1</position> <position>user2</position> <position>breadcrumb</position> <position>top</position> <position>left</position> <position>banner</position> <position>footer</position> </positions> <params>

46

2011 Alfamdia Prow.

Joomla!
<param name="VariacaoCor" type="list" default="white" label="Variacao de Cor" description="Variacao do uso de cor"> <option value="blue">Azul</option> <option value="red">Vermelho</option> </param> </params> </install>

Agora explicando as partes do cdigo mais importantes:

<install version="1.5" type="template">

Instrues para o instalador que diz que o tipo deste documento template, e a verso do Joomla! 1.5 (mas fica compatvel com verses futuras, desde que ativado modo de compatibilidade)
<name>alfa_sports</name>

Define o nome do seu modelo. Aqui deve aparecer exatamente o mesmo nome da pasta do modelo. No deve-se usar caracteres especiais nem espao em branco.
<creationDate>10/04/2010</creationDate>

A data de criao do modelo. O formato em que se apresenta a data no h uma regra, podendo aparecer o ms e o ano, at por extenso.
<author>Andreo Costa</author>

O nome do autor do tema aparece nesta linha.

<copyright>GPL</copyright>

Qualquer informao de direito autoral vai nesta linha.

<authorEmail>andreo@parque.net.br</authorEmail>

Aqui pode-se colocar o e-mail do autor

<authorUrl>http://www.alfamidia.com.br</authorUrl>

A URL do web site do autor.

<version>1.1</version>

A verso do template.
<files></files>

Arquivos usados no template, estes ficam assiciados dentro deste cdigo atravs de outro cdigo: <filename> </filename>.
<positions> </positions>

As posies do mdulo disponveis para o template.

<params> </params>

47

2011 Alfamdia Prow.

Joomla!

Eles descrevem os parmetros que podem ser passados para permitir funes avanadas do template, como geralmente, a cor do modelo.

9.1.2 O arquivo index.php antes dos cdigos Joomla!

O que faz o arquivo ndex.php? um arquivo que na realidade contempla bem mais HTML do que PHP, porm, para que rode o cdigo PHP, devemos t-lo com a extenso adequada. Este o arquivo que apresentar o web site Joomla! e contempla a estrutura do template. Como estamos trabalhando em um modelo pronto em HTML e CSS, primeiramente vamos usar um cdigo que representa um layout, e posteriormente vamos incluir os comandos para que o Joomla! faa parte da estrutura de contedo do site. O cdigo HTML que temos, ainda sem os cdigos Joomla!, so estes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Template para Joomla!</title> <link rel="stylesheet" href="css/template.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="geral"> <div id="topo"> topo aqui </div> <div id="barra"> <div class="barra_esq"> Barra esquerda aqui </div> <div class="logo"> Logo aqui </div>

48

2011 Alfamdia Prow.

Joomla!
<div class="barra_dir"> Barra direita aqui </div> </div> <div id="centro"> <div class="menulateral"> Menu lateral aqui </div> <div class="conteudo"> Conteudo aqui. </div> </div> <div id="rodape"> Rodap Aqui </div> </div> </body> </html>

9.1.3 O arquivo CSS (Cascading Style Sheets)

Somente aquele cdigo, sem nenhum arquivo de estilo, seria apenas um arquivo de cor branca com textos pretos na tela, nada mais. O estilo do site se d no arquivo de extenso .css. Abaixo segue nosso cdigo CSS, que posteriormente ser melhorado para o template Joomla!
@charset "utf-8"; /* CSS Document */ #geral { float: left; width: 950px; border: 1px solid #D6D6D6; }

49

2011 Alfamdia Prow.

Joomla!
#geral #topo { background-color: #E2E3EA; float: left; height: 40px; width: 940px; padding: 5px; } #geral #barra { float: left; height: 42px; width: 950px; background-image: url(../img/barra.jpg); background-repeat: repeat-x; } #geral #barra .barra_dir { background-image: url(../img/barra_dir_logo.jpg); background-repeat: no-repeat; float: right; height: 42px; width: 702px; } #geral #barra .barra_esq { background-image: url(../img/barra_esq_logo.jpg); background-repeat: no-repeat; float: left; height: 42px; width: 68px; } #geral #barra .logo { float: left; height: 42px; padding-top: 2px; width: 180px; background-color: #FFF; text-align:center;

50

2011 Alfamdia Prow.

Joomla!
} .logo p{ margin: 0px; } #geral #centro { float: left; width: 950px; min-height: 300px; } #geral #centro .menulateral { float: left; width: 180px; margin-left: 67px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #333; border-bottom-color: #333; border-left-color: #333; min-height: 199px; } #geral #centro .conteudo { float: right; width: 685px; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 8px; } #geral #rodape { padding: 5px;

51

2011 Alfamdia Prow.

Joomla!
float: left; height: 85px; width: 940px; color: #FFF; background-color: #333; }

O resultado at agora uma estrutura simples, com esta aparncia:

9.1.4 O arquivo index.php depois dos cdigos Joomla!

Agora devemos adaptar o arquivo ndex.php para que esteja dentro do padro Joomla! uma tarefa tranquila, pois trata-se apenas de ajustes pequenos, que sero explicados por partes: Antes da tag <html>:
<?php // sem acesso direto defined( '_JEXEC' ) or die ( 'Restricted' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Esta declarao PHP serve simplesmente para ter certeza que o arquivo no vai se acessado diretamente por segurana.

52

2011 Alfamdia Prow.

Joomla!

O DOCTYPE no muda, tem que ser desta forma para que seja usado XHTML na forma Transicional, acatando tanto cdigo XHTML quando o HTML. Dentro da tag <head>
<head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this>template ?>/css/template.css" type="text/css" /><meta httpequiv="Content-Type" content="text/html; charset=utf-8" /> </head>

O cdigo <jdoc:include type="head" /> serve para incluir automaticamente o ttulo, e as tags de descrio que auxiliam a busca pelos robs dos buscadores. Estas informaes so alteradas nas Configuraes Globais. Sobre as tags <link> que aparecem, as duas primeiras servem para buscar o CSS genrico do Joomla!, e a ltima serve para buscar o seu arquivo css. Note que neste caso o nome do arquivo CSS template.css e est em uma pasta com o nome css.

As Tags mais importantes

Na tag <topo>:
<div id="topo"><jdoc:include style="xhtml" /> </div> type="modules" name="top"

Neste caso estamos indicando que neste local aparecer o contedo posicionado em top no Joomla! o style est indicando que o contedo aparecer em xhtml, evitando em muitos mdulos a utilizao de tabelas. Na <div> de classe barra_esq:
<div class="barra_esq"> >getCfg('sitename');?> </div> <?php echo $mainframe-

Colocamos esta tag PHP na div da esquerda para conhecermos a maneira de usar o nome do site no layout. Na <div> de classe logo:
<div class="logo"> style="xhtml" /> <jdoc:include </div> type="modules" name="user1"

Aqui inclumos a posio user1. Na <div> de classe barra_dir:

53

2011 Alfamdia Prow.

Joomla!
<div class="barra_dir"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div>

Da mesma forma que a anterior, aqui inclumos a posio user2. Na <div> de classe menulateral:
<div class="menulateral"> <jdoc:include type="modules" name="left" style="xhtml" /> </div>

Na div que receber o menu lateral, usamos a posio left. Note que trabalhamos com as posies padro do Joomla! para facilitar o trabalho. Na <div> de classe conteudo:
<div class="conteudo"> <jdoc:include type="modules" name="breadcrumb" style="xhtml" /> <jdoc:include type="component" style="xhtml" /> </div>

Note que aqui temos duas linhas, a primeira a posio breadcrumbs, onde costuma-se deixar o mdulo de mesmo nome que serve para auxiliar a navegao. A segunda linha a posio que todo o contedo principal aparecer. Quando voc navegar no site, clicar em um artigo, por exemplo, aparecer neste ponto. Na <div> de classe rodape:
<div id="rodape"> <jdoc:include style="xhtml" /> </div> type="modules" name="footer"

Nesta deixamos a posio footer para indicar itens para o rodap.

9.1.5 Melhorias no arquivo CSS

Devido a maneira diferente que os navegadores apresentam as formataes do site, o principal deles dar margens e espaamentos diferentes para mesmas tags, uma declarao importante a se fazer esta:
*{ margin: 0; padding: 0; }

Este cdigo far com que globalmente todas as tags fiquem com margem e espaamento interno zerado. Quando desejar do contrrio, s declarar via CSS para que isto acontea. No fcil? Configure tambm a tag <body>, informando qual a tipografia a ser usada no site por padro.

54

2011 Alfamdia Prow.

Joomla!

55

2011 Alfamdia Prow.

Joomla!

Unidade 10 Dicas teis

10.1 Otimizando o site Joomla! para obter mais acessos
O processo de otimizao de site um assunto polmico, porque existem no mercado muitas opinies referente a prticas para se conseguir mais visitas. No da noite para o dia que um site aparece na primeira pgina do Google, mas algumas iniciativas fazem com que isto ocorra mais rapidamente que o natural. A otimizao est nos detalhes: O ttulo da pgina, por exemplo, deve sempre estar associado com o que o contedo trs. Breadcrumb, por exemplo, um mdulo que sempre que possvel vale a pena usar, pois ele mostra o caminho que est se navegando e ajuda na indexao do contedo. Existem tambm algumas extenses especficos para auxiliar na indexao do site Joomla!, como Tags for Joomla! que cria lista de tags, tags populares e ajuda na indexao do contedo. Uma configurao bsica que deve ser feita na configurao global, marcar Sim nas configuraes de SEO, porm, no s isto que faz com que estas configuraes funcionem, temos que nos preocupar com o servidor Apache, mod_rewrite Mas o Que o mod_rewrite? O mod_rewrite como conhecido, ou rewrite engine, uma mdulo do servidor web Apache que usado para re-escrever URLs antes que os itens solicitados sejam buscados no servidor e isto pode ser usados para vrios propsitos. As regras do mod_rewrite sero lidas a partir do seu arquivo .htaccess, por isso importante sempre colocar o RewriteEngine On e sempre testar muito bem as regras para seu site no entrar em loop e ficar inacessvel.

56

2011 Alfamdia Prow.

Joomla!

O que uma URL amigvel para o buscador? Uma URL amigvel uma URL que seja bem aceita pelo motor de busca, normalmente a URL longa, contm valores dinmicos e dificilmente contm palavras-chave. J as URLs amigveis so curtas, estticas e contm as keywords que se deseja obter maior relevncia. Como ativar o mod_rewrite? No pacote do Joomla! j vem um arquivo nomeado htaccess.txt, no servidor, altere o nome deste arquivo para .htaccess (com ponto na frente mesmo). Se j houver algum arquivo com mesmo nome, faa um backup do mesmo antes e depois refaa o procedimento para substitu-lo. Pronto, o endereo que antes poderia ser assim: http://www.site.com.br/joomla/index.php?option=com_content&view=article&id =47:artigo-com-imagem&catid=34:alfamidia&Itemid=54 Passa a ficar assim: http://www.site.com.br/joomla/alfa-blog-de-categoria/47-artigo-com-imagem.html NOTA: Algumas extenses do Joomla! podem no funcionar corretamente com a opo de URL Amigveis ativado. Recomenda-se sempre que esta funo estiver habilitada, que se teste todo o site. Para problemas com esta opo, pode-se obter extenses de URL amigveis, como por exemplo o JoomSEF e o sh404.

10.2 Vinculando o Joomla! com o Banco de Dados

O arquivo configuration.php contm os dados do Banco de Dados. Caso seja necessria a troca do nome do banco, por um backup ou troca de servidor, conhea como este arquivo funciona e como pode ser editado: Mas o que este arquivo? Este arquivo responsvel por conectar o seu site com o Banco de Dados. Alm disto, ele contempla informaes importantes de Search Engine Optimization, tcnica responsvel para alavancar a audincia do site pelos buscadores na internet, mas sobre isto trabalharemos em outra unidade frente. Com o arquivo aberto, localize as linhas correspondentes a configurao da base de dados:

57

2011 Alfamdia Prow.

Joomla!

E vamos preencher os dados corretamente. Abaixo a tabela que explica cada uma das variveis que sero alteradas: $host Aqui configuramos o nome do servidor de banco de dados, que poder ser localhost ou poder ter um endereo especfico. Voc pode descobrir o endereo no Painel de Controle, no item Banco de Dados MySQL estar informado o Host SQL Remoto Aqui vai o usurio criado no Painel de Controle da sua hospedagem. Aqui vai o nome do Banco de Dados criado.

$user $db

$password Aqui vai a senha do usurio criado no Painel de Controle. Abaixo, os dados alterados:

Note que somente foi alterado o que est entre aspas simples, pois qualquer outra alterao manual neste arquivo poder comprometer o funcionamento do Joomla!, portanto, preste bem ateno neste procedimento. Aps alterado, salve o arquivo, que passaremos a fazer o upload para o servidor web.

58

2011 Alfamdia Prow.

Joomla!

59

2011 Alfamdia Prow.

Joomla!

Unidade 11 Novas verses

11.1 Verses novas do Joomla!
O Joomla! nesta apostila foi tratada na verso 1.5 e atualmente est na verso 1.7. Devido a incompatibilidade das verses, alguns componentes, plugins e/ou mdulos ainda no existem ou no funcionam para novas verses. Por isso alguns cuidados devem ser tomados ao usar outras verses do Joomla!. bom vermos se o arquivo que vamos baixar do Joomla! tem compatibilidade.

Nos casos de haver o aplicativo para novas verses, pode ser representado desta maneira, argumentando que Nativo do 1.5 e serve s extenses 1.6 e 1.7.

No Joomla! 1.6 passou a ser melhorado algumas funes, entre elas destacam-se: Legacy Mode excludo;

60

2011 Alfamdia Prow.

Joomla! Novo Controle de nveis de acesso (ACL) tendo um novo gerenciamento de usurios com um controle mais especfico; Nveis de organizao do contedo ilimitado usando Categorias; O Joomla 1.6 s funcionar com o PHP 5.2+ e Mysql 5.0.4+; Retirada do componente de enquete da instalao padro; Nomeclatura dos artigos de FRONTPAGE(pgina principal) agora chama-se FEATURED(destaque); Novo layout de administrao e mudanas na navegao para melhorar a usabilidade; Dois novos botes: Salvar e Novo e Salvar como cpia; Redirecionamento de links (Agora sem desculpas para os famosos erros 404). Mdulos com data de expirao;

No Joomla! 1.7 foram mantidas algumas funes do 1.6 e outras atribudas: Artigos criados em lote;

61

2011 Alfamdia Prow.

Joomla! Mdulos com possibilidade de background-image sem precisar acessar o CSS; Compatibilidade com a verso 1.6; Possibilidade de atualizao de verso mantida; A previso de durao do Joomla! 1.7 de 6 meses. E h uma estimativa de que o Joomla! 1.8 seja lanado no incio de 2012. Com uma durao aproximada de dois anos, quando ser lanado o Joomla! 1.9 que ter durao curta o suficiente para aguardarmos o mtico Joomla! 2.0, com data de lanamento prevista para 2015-2016, acreditando que a W3C j tenha comeado a implementar o Html 5.

62

2011 Alfamdia Prow.