JOOMLA!

verso 2.5

PARTE I
Mdulo 1: sistemas de gerenciamento de contedo
e uma introduo ao joomla
Mdulo 2: Fazendo download e instalando o Joomla
Mdulo 3: Administrao bsica do Joomla
Mdulo 4: Organizando seu contedo

2012 Alfamdia Prow

JOOMLA! 2.5

MDULO 1: Sistemas de Gerenciamento de contedo

e uma introduo ao Joomla!
1.1 O que um sistema de gerenciamento de contedo? (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 pr-programado, com recursos
bsicos e de manuteno e administrao j prontamente disponveis.
O Joomla! (fala-se Djumla) um exemplo de CMS, utilizado para criao de web sites dinmicos, com
possibilidade de insero de componentes das mais variadas funes, quase sempre gratuito.

1.2 Pginas web estticas

Na internet existem milhes de pginas, ainda hoje percebemos algumas estticas. Por conceito, as
pginas as estticas so aquelas que no possuem dinamismo em alterao de contedo, ou seja, aquelas
que no tem um suporte com Banco de Dados por exemplo. De forma geral so aquelas que o contedo e
a apresentao esto no mesmo arquivo. Para a alterao dessas pginas necessrio conhecer cdigo, no
mnimo HTML (HyperText Markup Language) e em alguns casos o CSS (Cascate Style Sheet) e para publicao
algum sistem de FTP (File Transfer Protocol).

1.3 Pginas web com folhas de estilo

Com o advento da internet no final dos anos 80, passou a ser desenvolvido cada vez mais pginas para a
web. Com o tempo ficou cada vez mais necessrio a diferenciao dos sites, e isso se fazia e ainda se faz por
cor, imagem, forma de fontes e outros elementos que conseguem fazer com que o site fique diferenciado em
relao aos demais. Por isso a existncia dos estilos. Para o uso de folhas de estilo (CSS) nos sites existem trs
formas: cdigo Inline, uso interno e uso externo.
Inline: O uso do cdigo inline o que mais tem fora no mtodo cascata, pois ele est direto no cdigo.
Para tal usa-se o atributo Style em meio a tag.
ex: <p style=color:#FF0000;>Texto</p>
Interno: O uso do css interno feito diretamente na tag Head do site. o segundo mais forte para
influenciar no estilo. Para us-lo necessrio usar a tag <style>.
ex: <style type=text/css>p{color:#FF000}</style>

2012 Alfamdia Prow

JOOMLA! 2.5

Externo: Para us-lo necessrio ter um arquivo com a extenso .css. Nesse arquivo so colocados todos
os estilos. Quando usamos esse formato aliado ao Html, considerado como tableless.
ex: p{color:#FF000}

1.4 Pginas web dinmicas

As pginas dinmicas, por excncia, so aquelas que tm seu contedo alterado de forma rpida e com
alta responsividade. Para termos esse dinamismo necessrio o uso de um administrador do site, que
uma pgina separada que normalmente tem acesso por login e senha, assim sendo conhecido com backend,
e frontend onde o usurio comum acessa as informaes geradas pelo administrador. Para resumir, o
contedo e a apresentao esto separados da pgina web.

1.5 Softwares de cdigo aberto

O marco do cdigo aberto foi a Netscape que em 1998, indo em contra a grandes corporaes desenvolveu
o sistema aberto. Os softwares de cdigo aberto (open source) so aqueles em que todos, ou a grande maioria,
conseguem ter posse do cdigo, podendo alter-lo e manipul-lo. Um bom exemplo desse tipo de sistema
o Linux, que um Sistema Operacional de computador que de ordem livre. Outro grande exemplo o PHP
(Personal Home Page ou Php Hypertext Preprocessor) que tem uma comunidade extremamente massiva de
usurios. Ainda temos o MySql, que embora seja da Oracle, atua tambm de forma livre e por fim devemos
conhecer o Apache, que um servidor para PHP. A manipulao desses sistemas abertos ocasiona em uma
grande quantidade de documentao na internet, a partir de fruns, sites especializados, blogs, entre outros.

1.6 A histria do Joomla!

Inicialmente o Mambo se tornou um CMS altamente conhecido e usual, em 2004 recebeu diversos
prmios. Por algumas discordncias dos principais programadores do Mambo, resolveram desenvolver o
Joomla!. Em 2005, o Joomla! 1.0 surgiu, e desde ento um projeto de cdigo aberto (Licena GNU/GPL),
que por usa vez utiliza a linguagem de programao PHP e banco de dados MySQL. Desde ento a verso
mais representativa foi a 1.5, onde foram criados milhares de plugins, componentes, temas, mdulos e outras
extenses. Na tentativa de deixar o CMS mais dinmico e robusto foram criadas as verses 1.6, 1.7 e 1.8, mas
desde a criao eram verses temporrias e de teste. A verso atual do Joomla! e extvel a 2.5.

1.7 Comunidade Joomla!

A comunidade Joomla! est cada vez maior, pois o sistema o segundo mais usado do mundo, perdendo
apenas para o Wordpress. O site joomla.org considerado a comunidade oficial. L encontramos diversos
contedos e matrias a respeito, alm de suporte. Na parte de extenses (extensions.joomla.org) possvel
perceber diversos mdulos, plugins e components, onde necessrio verificar para qual extenso foi
desenvolvida.

1.8 Desenvolvimento de extenses de terceiros

4

2012 Alfamdia Prow

JOOMLA! 2.5

Na grande maioria das extenses desenvolvidas para Joomla! so de forma livre. Claro que existem
algumas verses que so pagas tanto de extenses quanto de templates.

1.9 Caractersticas do joomla

Ao fazer o download do Joomla! se tem um arquivo zipado com aproximadamente 5MB. Em seguida
necessrio extrair ou em um FTP ou em um sistema Localhost. Algumas caractersticas so comuns:
- Registro de usurios;
- Pesquisas e buscas;
- Formulrio simples;
- Criao e reviso de contedo;
- Detalhe privado de visitao;
- Padres RSS;
- Carregar notcias de outros sites.
Para dar continuidade ao Joomla! existem diversas extenses entre elas destacam-se:
- Fruns;
- Lojas Virtuais;
- Calendrios;
- Galerias de imagem;
- Formulrios de contato.

1.10 Elementos de um website Joomla!

Os principais elementos do Joomla! so contedos, mdulos e templates. O conjunto destes elementos
consegue formatar tanto o backend quanto o frontend do site.

1.11 Contedo
O contedo a parte mais varivel do site, normalmente administrado pelos componentes. Em alguns
casos pode ser considerado como o corpo principal. Um dica interessante deixar o contedo de forma
muito bem visvel, de preferncia centralizado.

1.12 Templates
O template o layout ou tema do site, assim sendo faz parte do campo visual. Existem templates grtis
e pagos. Um site muito bem elaborado para usarmos template o joomla24.com.

1.13 Mdulos
Os mdulos so as posies do site e ficam a redor do contedo. Normalmente so usados para criar
menu, rodap e topo.
5

2012 Alfamdia Prow

JOOMLA! 2.5

MDULO 2: Fazendo download e instalando o Joomla!

2.1 Como instalar o Joomla!
necessrio primeiro baixar o Joomla!, de preferncia do site principal joomla.org. Logo em seguida
necessrio descompact-lo em um servidor, Local ou On-line. E por ltimo, via navegador, basta acessar os
dados de instalao.

2.2 Obtendo o mais recente pacote de arquivos do Joomla!

Diretamente na pgina principal do joomla.org possvel encontrar ao lado direito. (verificado em junho
de 2012). Basta clicar em download e abrir uma nova pgina que pode-se de fato fazer o download.

[Fig. 1] Site oficial joomla.org

2.3 Convenes de nomenclatura de pacotes do Joomla!

Para baixar o Joomla!, percebemos que a ltima verso a 2.5.x, onde x um nmero crescente onde
cada nova verso so realizadas melhorias. Para baixar componentes, mdulos, templates, entre outros
sempre necessrio vislumbrar para que verso os mesmos foram desenvolvidos. Outras verses do Joomla!
j adotavam esse tipo de prtica. Contudo precisamos saber que no h uma continuidade latente entre as
verses, ou seja, elementos do 1.5 no so compatveis com a 2.5.

[Fig. 2] Representao das foras das verses do Joomla!

6

2012 Alfamdia Prow

JOOMLA! 2.5

2.4 Criando um banco de dados mysql

Para acessar o Banco de Dados MySql de forma local, necessrio entrar em Localhost pelo Browser e
acessar no menu Tools, e clicar onde est escrito phpmyadmin. Para criar um banco de dados, basta escrever
qual o nome que ser usado no Banco e ao lado de Collation clicar em criar.

[Fig. 3] MySql atravs do Painel de Controle PhpMyAdmin

2.5 Descompactando o pacote Joomla!

Para descompactar o Joomla! necessrio um programa de tipo zip, de preferncia ou o WinZip ou o
WinRar. Se algum destes programas j estiver instalado no computador, notadamente o smbolo do Joomla!
ficar com o cone padro do mesmo.

2.6 Descompactando o Joomla! no seu computador pessoal

Para descompactar o Joomla! localmente necessrio ter instalado de preferncia ou o WAMP (Windows
Apache MySQL Php) ou o XAMPP (X qualquer sistema operacional, Apache, MySql, Php e Perl). Na maioria
dos casos, ao fazer a instalao criada uma pasta para criar e desenvolver os sites em computador pessoal.
Um bom exemplo disso usar o caminho C:\wamp\www e ali criar uma pasta com o nome do cliente. Nessa
nova pasta realizada a descompactao dos arquivos. Para cada novo site necessrio criar uma pasta e
descompactar novamente.

2.7 Descompactando o Joomla! em uma conta de hospedagem

Primeiramente necessrio ter uma hospedagem com capacidade mnima de 20MB, acesso Apache, de
7

2012 Alfamdia Prow

JOOMLA! 2.5

preferncia em um servidor Linux e acesso a Banco de Dados MySql. Para acessar o diretrio Root preciso
de um sistema FTP (File Transfer Protocol), onde o mesmo ir precisar de um endereo, login e senha.
Endereo ou Host: ftp.dominio.com.br
Login ou Nome de usurio: dominio
Senha: 123456
A partir dessas descries possvel acessar o Root do site, que algumas vezes poder abrir direto ou
estar em uma pasta chama public_html ou mesmo em uma pasta www. Para fazer o acesso poder ser usado
um software chamado FileZilla Client que Open Source. Para transferir basta selecionar e arrastar para a
pasta onde se deseja que o site aparea.

[Fig. 4] Painel de abertura FileZilla

2.8 Rodando o wizard de instalao do Joomla!

Para rodar o wizard antes necessrio instalar em computador pessoal ou em uma hospedagem. Para
acessar use um browser (Google Chrome ou Mozilla Firefox de preferncia), caso seja feito local para uma
pasta chamada cliente, acesse http://localhost/cliente e para uma hospedagem, caso no Root, use o acesso
principal http://www.dominio.com.br. A seguir teremos os passos para a instalao do Joomla!

2.9 Passo 1: idioma

Nesse passo possvel escolher a linguagem de instalao.

[Fig. 5] Idioma de instalao

8

2012 Alfamdia Prow

JOOMLA! 2.5

2.10 Passo 2: verificao de pr-instalao

Nesse passo insteressante notar todos os pr-requisitos. Normalmente se tudo est ok, o prprio
instalador avisa.

[Fig. 6] Verificao de instalao

2.11 Passo 3: licena

interessante para quem ir passar a usar o Joomla! ler seus termos de licena.

[Fig. 7] Licena
9

2012 Alfamdia Prow

JOOMLA! 2.5

2.12 Passo 4: configurao do banco de dados

Este passo talvez seja o mais importante, pois nele feita toda a configurao Banco de Dados e site.
No tipo de Banco de Dados escolha Mysql, o nome do servidor em caso local deve ser localhost, o nome
de usurio padro root, no h senha padro no WAMP. E o nome do Banco de Dados deve ser aquele que
foi criado via phpMyAdmin. Os prefixos so gerados randomicamente no Joomla! 2.5, anteriormente era
usado jos_. Estes casos s so necessrios se exitem diversos dados no mesmo DB (Data Base).

[Fig. 8] Banco de Dados

2.13 Passo 5: configurao do ftp

A configurao de FTP necessrio caso seja desejo fazer alteraes nas pastas.

[Fig. 9] Configurao do FTP

10

2012 Alfamdia Prow

JOOMLA! 2.5

2.14 Passo 6: configurao principal

A configurao principal a segunda parte mais importante, pois nela fazemos algumas definies do
site. O nome do site ser atribudo a tag title, entre outros. O e-mail necessrio para que atualizaes,
cadastros e outras funcionalidades do Joomla! seja direcionadas. O nome de usurio padro admin, embora
seja sugerido para que no se use esse nome. A senha que deve ser repetida, deve ser de preferncia uma
senha com letras maisculas, minsculas, nmeros, misturados e tambm inserido um ou outro smbolo,
para dificultar sua decriptao. A instalao de contedo no obrigatria e tambm usual para estudos
no para um site profissional.

[Fig. 10] Configurao

2.15 Passo 7: finalizao

[Fig. 11] Fim

11

2012 Alfamdia Prow

JOOMLA! 2.5

MDULO 3: Administrao bsica do Joomla!

3.1 O que so o frontend e o backend de um website joomla?
Para definirmos os termos de forma direta, o Backend o gerenciador e o frontend onde o usurio
visualizar o site. Para acessar necessrio usar o caminho normal do site + /administrator. Aquele login e
senha criados devem ser inseridos para acessar o sistema administrador.

[Fig. 12] Painel de entrada do Backend

[Fig. 13] Painel j acessado do Backend

12

2012 Alfamdia Prow

JOOMLA! 2.5

3.2 Menu bar

Nesse menu possvel acessar todas as principais funes do Joomla!.

[Fig. 14] Barra de menu do gerenciador

3.3 Toolbar
A barra de ferramenta pode ser visualizada em diversas partes do Joomla!. Nela possvel perceber
alguns cones que tem influncia na criao de contedo ou de outros elementos.

[Fig. 15] Exemplo de Toolbar do artigo

3.4 Workspace
O workspace a parte central do CMS Joomla!, onde cada componente, mdulo, template ou outro
consegue dar acesso a diversos administradores.

3.5 Funes do administrador na barra de menu

Ao longo deste material poderemos aprofundar as funes da barra de menu, com foco em controle e
gerenciamento.

3.6 O menu site

Existem diversas funes no submenu, entre elas destaca-se a configurao.

[Fig. 16] Menu site

13

2012 Alfamdia Prow

JOOMLA! 2.5

3.7 O menu users

Nesta seo possvel adicionar e remover usurios, assim como criar tipos de acesso a usurios.
basicamente existem dois grandes grupos de usurios, os que acessa apenas pelo Frontend e os que acessam
pelo Backend (tambm conseguem acessar pelo Frontend).
Acessam pelo Backend:
Super User, Administrator e Manager
Acessam pelo Frontend:
Registered, Author, Editor e Publisher

[Fig. 17] Menu users

3.8 O menu menus

[Fig. 18] Menu menus

3.9 O menu content

[Fig. 19] Menu content

14

2012 Alfamdia Prow

JOOMLA! 2.5

3.10 O menu components

Nesse menu podemos acessar os componentes bsicos do Joomla!. Normalmente outros componentes
instalados acabam adicionando um link a mais nesse painel.

[Fig. 20] Menu components

3.11 O menu extensions

Nesse menu possvel instalar elementos no Joomla!, adicionar, remover, editar e deletar mdulos,
plugins, temas e idiomas.

[Fig. 21] Menu extensions

3.12 O menu help

[Fig. 22] Menu help

15

2012 Alfamdia Prow

JOOMLA! 2.5

3.13 Preview do site

Para visualizar o site depois da alterao no painel basta clicar no View Site.

[Fig. 23] Link view site

[Fig. 24] Site visualizado - Frontend

16

2012 Alfamdia Prow

JOOMLA! 2.5

MDULO 4: Organizando seu contedo

4.1 Como o Joomla! cria pginas web?
A base a mesma de criao de pginas em PHP, pois a estrutura do Joomla! nessa linguagem.

[Fig. 25] Organograma de um site.

No organograma acima podemos perceber que o site possui uma estrutura principal (Site) e trs braos
(Sobre, Servios e Contato). Para tal pode ser desenvolvido a partir do uso de:
Componentes: parte central do site, um bom exemplo a insero de artigo;
Mdulos: posicionamento dos elementos, menu por exemplo.

4.2 Como o Joomla! organiza os artigos de contedo?

Um site pode conter poucos artigos, em caso de sites mais simples, ou uma gama muito elevada para
grandes portais e difusores de notcias, assim como em blogs. Existem algumas opes para organizar os
artigos, entre eles o contedo total e apenas uma parte do contedo (leia mais).

4.3 Artigos no categorizados

Quando no determinamos categorizao para os artigos, deixamos o mesmo de forma solta. No que o
mesmo no possa ser carregado a partir de um menu de tipo artigo.

17

2012 Alfamdia Prow

JOOMLA! 2.5

4.4 Categorias
Para sites que tenham um grande nmero de artigos, ou ento, que possuam uma conduo constante
de notcias, necessrio criar categorias. As categorias servem para agrupar artigos de mesma relevncia ou
assunto. Para um site que a nica informao acrescida sero notcias de forma ampla, interessante criar
apenas uma categoria de nome notcias.

4.5 Amostra de hierarquia

Para a criao de hierarquia no existe o que era comum no Joomla! antigamente, as sees. Hoje em
dia, temos a possibilidade de criar item pai. O item pai seria a categoria mais ampla, enquanto o item filho,
categoria mais especfica.
Exemplo: Poderamos criar uma categoria de nome Esportes e assim sendo criar categorias filha, Futebol,
Basquete, Frmula 1, UFC, entre outros ligados aos esportes.

4.6 Criando o website widget inc. com contedo no categorizado

A maneira mais fcil de criar artigo no criar categoria para o mesmo.

[Fig. 26] Gerenciador de artigos

4.7 Criando artigos de contedo

Na figura 26 possvel perceber um sinal de MAIS onde est escrito novo, ali possvel criar novo artigo.
Para criar o artigo basta escolher o nome do mesmo, se ser publicado j ou criar uma data para a publicao,
colocar o nvel de acesso do artigo que por padro pblico. E em meio ao escrever o contedo. Acima
existe um painel auxiliar de edio, como se fosse um mini word. Obviamente que para todo e qualquer site
bsico o conhecimento de HTML, CSS e Webstandards.

18

2012 Alfamdia Prow

JOOMLA! 2.5

4.8 Criando itens de menu

Todo e qualquer site em Joomla! tem como base um menu. Por padro existe um Main Menu que est
subentendido a existncia de um Home que pertence a pgina inicial. Podemos criar diversos menus e os
mesmos podem ser carregados independentemente em partes separadas do site. Para ver as posies
necessrio liber-los no painel de template.

4.9 O componente front page pgina inicial

A pgina inicial pode ser usada a partir de apenas um contedo, ou diversos.

[Fig. 27] Gerenciador de menus

4.10 Criando categorias

[Fig. 28] Gerenciador de categorias

19

2012 Alfamdia Prow

JOOMLA! 2.5

Assim como para criar um artigo, para criar uma categoria basta clicar em novo e assim escolher qual o
nome da categoria e se mesma ter alguma categoria pai (em caso de ser subcategoria).
No planejamento do site isto deve ser especificado.

20

2012 Alfamdia Prow