Curso completo de Joomla - Apostila

Apostila
Curso de Joomla!
1
SUMÁRIO
Aula 01 - DESENVOLVIMENTO DE SITES, INTRODUÇÃO AO CMS JOOMLA .................................. 5
CMS / Gerenciador de Conteúdo .............................................................................................. 5
Os principais benefícios do CMS ............................................................................................... 5
Existem vários tipos de CMS´s? ................................................................................................. 5
Qualquer site pode ser construído com um CMS? ................................................................... 5
O que é o Joomla? ..................................................................................................................... 6
Breve histórico do Joomla ......................................................................................................... 6
Aula 02 - INSTALAÇÃO DO JOOMLA .............................................................................................. 7
Para utilizarmos o Joomla, necessitamos de três itens:................................................ 7
Realizando o Download do Joomla ........................................................................................... 7
Download e Configuração do XAMPP ....................................................................................... 7
Criando um Bando de Dados no PHPMyAdmin ........................................................................ 9
Instalando o Joomla ................................................................................................................ 10
Aula 03 - CONHECENDO O JOOMLA............................................................................................ 16
Front-End e Back-End .............................................................................................................. 16
Traduzindo o Joomla ............................................................................................................... 18
Barra Principal de Menu.......................................................................................................... 20
Configuração Global ................................................................................................................ 21
Aula 04 - INSERINDO CONTEÚDO................................................................................................ 24
Como o Joomla organiza o conteúdo? .................................................................................... 24
Criando uma nova categoria ................................................................................................... 24
Criando um novo artigo .......................................................................................................... 26
Apresentando o Artigo na Página Principal ............................................................................ 26
Alterando as configurações de um artigo ............................................................................... 27
Acrescentando o “Leia Mais” .................................................................................................. 28
Acrescentando link no artigo .................................................................................................. 29
Aula 05 - EXTENDENDO O JOOMLA............................................................................................. 30
São cinco os tipos de extensões disponíveis: .......................................................................... 30
Joomla Extensions Directory (JED): ......................................................................................... 31
Buscando e Instalando um Novo Componente....................................................................... 31
Aula 06 - TRABALHANDO COM IMAGENS ................................................................................... 35
Gerenciador de Mídias ............................................................................................................ 35
Armazenando imagem no joomla ........................................................................................... 35
2
Inserindo imagens em artigos ................................................................................................. 36
Aula 07 - TAREFA COMPLEMENTAR ............................................................................................ 39
Aula 08 - CONFIGURANDO O MENU ........................................................................................... 40
Adicionando novo item ao menu ............................................................................................ 40
Diferentes formas de apresentar o conteúdo através de um link .......................................... 41
Configurando Layout dos Artigos ............................................................................................ 42
Retirando o título do artigo do botão “Leia Mais”.................................................................. 44
Criando item de menu inativo................................................................................................. 45
Aula 10 - MÓDULOS .................................................................................................................... 48
Conhecendo um pouco sobre Templates ............................................................................... 48
As posições do Template Protostar ........................................................................................ 49
Gerenciando Módulos ............................................................................................................. 51
Inserindo o módulo Personalizar HTML .................................................................................. 52
Aula 12 - GERENCIAMENTO DE USUÁRIOS ................................................................................. 56
Criando novo usuário .............................................................................................................. 57
Criando artigo via front-end e limitando acesso ..................................................................... 59
Aula 13 - FORMULÁRIOS ............................................................................................................. 62
Baixando e instalando o breezing forms ................................................................................. 62
Funções do Breezing ............................................................................................................... 63
Construindo um Formulário .................................................................................................... 64
Conectando o Breezing Forms a um item de menu ................................................................ 70
Mais algumas dicas sobre o BreezingForms............................................................................ 71
Aula 15 - TEMPLATES .................................................................................................................. 76
Como escolher templates para Joomla ................................................................................... 77
Baixando e instalado um novo template ................................................................................ 78
Adaptando o conteúdo ao novo template .............................................................................. 82
Aula 16 - ALTERANDO O CSS COM FIREBUG ............................................................................... 83
Identificando o CSS.................................................................................................................. 83
Utilizando o Firebug ................................................................................................................ 85
Aula 18 - OTIMIZAÇÃO E SEGURANÇA ........................................................................................ 91
3
Dicas de SEO ............................................................................................................................ 91
Backup ..................................................................................................................................... 93
Utilizando o FileZilla ................................................................................................................ 96
Adaptando o site para dispositivos móveis............................................................................. 97
4
Aula 01 - DESENVOLVIMENTO DE SITES,
INTRODUÇÃO AO CMS JOOMLA
CMS / Gerenciador de Conteúdo

Os CMS´s (Content Management System – Sistema de Gerenciamento de
Conteúdo) são, em grande parte, softwares livres, desenvolvido por
programadores do mundo inteiro, onde o usuário pode editar e criar conteúdo
para seus sites com grande facilidade.
Os principais benefícios do CMS

• Facilidade para atualização e edição de artigos, imagens, banners, etc;
• Praticidade para criação de novas áreas, menus e conteúdo;
• Variações de funcionalidades no site (Ex.: disparador de e-mail mkt,
gerenciador de downloads para os visitantes, podcast, integração com vídeos,
inúmeras variações de visualizações de galeria de imagens, enquetes, entre
muitas outras);
• Posicionamento nos buscadores (Google, Yahoo!, etc);
• Flexibilidade no desenvolvimento de projetos em diferentes portes, sendo
adequado a cada necessidade;
• Velocidade de carregamento;
• Baixo custo de atualização e manutenção;
Existem vários tipos de CMS´s?

Sim. Estão disponíveis hoje diversas plataformas de Sistemas de Gerenciamento
de Conteúdo como Joomla!, Drupal, Mambo, Wordpress...
Qualquer site pode ser construído com um CMS?

Sim. Os CMS's podem ser utilizados, com todos os seus benefícios, desde sites
pessoais, passando por micro e pequenas empresas, até grandes portais de
multinacionais. Isso é possível devido a sua grande flexibilidade para
adaptações de layout e funcionalidades.
Outro ponto a ser destacado nesta questão de adaptações aos projetos é que
existem disponíveis hoje, prontos para utilização, mais de 5 mil plug-ins de
funcionalidades específicas.
5
Isso quer dizer que é possível, por exemplo, você ter um disparador de e-mail
marketing ou newsletter diretamente de seu site, disponibilizar enquetes e
pesquisas, áreas dinâmicas para banners e textos que tornam a navegação
mais agradável, possibilitar interações dos visitantes através de comentários e
votações, ou até mesmo ter uma plataforma de e-commerce!
A parte visual pode ser totalmente remodelada,independente da utilização de

um template padrão ou de terceiros, para isso, basta que o desenvolvedor
tenha conhecimentos em HTML/CSS, isso vale também para o desenvolvimento
de templates a partir do “zero”.
O que é o Joomla?
O Joomla! (se pronuncia djumla) é um desses Content Management System, ou
gerenciador de conteúdos dinâmicos, mais eficientes da atualidade.
O sistema - organizado por design, programação e conteúdo -, possibilita a criação

de sites das mais variadas formas, totalmente customizados. Como o Joomla! é um
CSM de código aberto (trabalho colaborativo), existem milhares
de templates (gratuitos e pagos) disponíveis no mercado, o que garante que você
consiga criar sua própria página, sem grandes problemas usando um
layout profissional e personalizado para seu negócio.
A grande sacada do Joomla! são suas diversas extensões, componentes e

traduções, disponíveis na maioria das vezes gratuitamente e quando pagas com
valor muito atrativo. O sistema é desenvolvido em PHP, pode ser iniciado no
servidor Web Apache ou IIS e sua base de dados é a MySQL.
Breve histórico do Joomla

Trata-se do resultado da separação entre a equipe de desenvolvedores do
Mambo e a empresa Miro, detentora dos direitos sobre o Mambo. A separação
teve lugar uma vez que a Miro transferiu o controle do Mambo para uma
fundação - a Mambo Foundation - onde os desenvolvedores teriam apenas uma
participação passiva e pouco representativa.
Esses desenvolvedores, preocupados com a integridade do projeto e com o

futuro dos utilizadores, não aceitaram a transferência e, em 2005, criaram o
"Joomla 1.0", também "open source", a partir do código-fonte do Mambo
4.5.2.
6
Aula 02 - INSTALAÇÃO DO JOOMLA
Para utilizarmos o Joomla, necessitamos de três itens:
1 – Pacote Joomla que pode ser baixado diretamente do site oficial

(http://www.joomla.org)
2 – Servidor WEB
3 – Banco de Dados
Importante citar que podemos utilizar o joomla tanto em um servidor local

quanto diretamente em um serviço de hospedagem, em algumas etapas,
citaremos as diferenças e posteriormente algumas orientações sobre como
colocar seu projeto joomla na internet
Realizando o Download do Joomla
Acesse o site oficial (http://www.joomla.org). Procure a sessão de downloads, e

baixe a versão mais atual (iremos utilizar a versão 3.3)
Perceba que existe uma opção de Upgrade, ignore e clique somente no botão
de Download. Crie uma pasta específica para armazenar tanto esse pacote do
joomla quanto outros programas e arquivos que vamos baixar
Download e Configuração do XAMPP
Existem diversas opções de servidores web disponíveis na internet, na verdade,

eles simulam os mesmos serviços que encontramos de forma online, como por
exemplo, a criação e gerenciamento de um banco de dados
Para usar o joomla em nosso computador necessitaremos de um servidor web e

vamos utilizar o XAMPP por ser simples e prático
Podemos procurar nos sites de busca ou acessar o site oficial (link abaixo)
7
https://www.apachefriends.org/pt_br/index.html
Temos já na tela inicial as versões mais recentes para diversos sistemas

operacionais, sendo que para Windows, atualmente, temos a versão 1.8.3,
contudo, foi detectada recentemente alguma incompatibilidade entre a versão
mais atual do joomla e a versão mais atual do XAMPP, a solução é fazer o
download de uma versão anterior do servidor
Para isso, clique no botão de download
Vamos baixar a versão 1.8.2
Inclusive, essa versão funciona bem em sistemas de 64bit
No momento de instalar, não altere a pasta de instalação padrão, ao término da

mesma, será aberta a janela de controle geral do Xampp, caso isso não ocorra,
procure em sua área de trabalho ou em seus programas do menu iniciar.
Para que o joomla consiga rodar, é preciso termos o Apache e o MySQL

rodando em nosso sistema, sendo assim, clique primeiro na coluna SERVICE
para instalar ambos e em seguida “START” na coluna ACTION na direção
desses dois serviços de forma que ambos apresentem a cor verde em sinal de
que estão rodando perfeitamente como na figura seguinte
8
Obs: O FileZilla é opcional
Caso você tenha feito a instalação dos serviços, eles irão inicializar juntamente
com seu Windows, do contrário será necessário sempre abrir esse painel e
iniciar de forma manual os serviços do Apache e MySQL
Caso esteja tudo ok, abra seu navegador e digite localhost para abrir a tela
inicial do XAMPP, escolha o idioma necessário para finalizar a instalação
Criando um Bando de Dados no PHPMyAdmin
Conforme já explicado anteriormente, o joomla é desenvolvido totalmente em

PHP e necessita de um banco de dados para que possa funcionar. Nele, serão
armazenadas todas as informações como a criação de categorias, artigos,
inserção de módulos, etc.
O PhpMyAdmin é um aplicativo presente em diversos servidores web, assim
como o Xampp, nele é possível criar base de dados, tabelas, exclusão de
registros, etc.
Para a instalação e utilização do joomla, necessitaremos apenas da criação de

uma nova base de dados, para isso, basta acessarmos novamente a tela do
xampp, digitando no navegador: http://localhost/xampp
Feito isso, acesse o PhpMyAdmin que se encontra no menu “Tools”

(Ferramentas)
9
Na próxima tela, procure e clique na opção Base de Dados
Utilize o campo indicado abaixo para escrever o nome da base de dados, aqui
vamos usar db_aula, em seguida, clique em Criar.
IMPORANTE: No caso de aplicações online, é preciso verificar no painel de

controle da empresa de hospedagem o local utilizado para a criação de novas
base de dados
Instalando o Joomla
Com o Xampp funcionando corretamente e com nossa base de dados criada,

chegou a hora de instalarmos o joomla.
Precisamos compreender que o joomla irá rodar em nosso servidor web (nesse
caso, o Xampp) isso significa que o pacote que baixamos do site oficial precisa
estar dentro do servidor, precisamente na pasta htdocs, pois é nela que ficam
armazenadas as aplicações acessadas diretamente pelo localhost
10
Sendo assim, copie o arquivo compactado do pacote joomla para
c:/xampp/htdocs
O próximo passo é renomear o arquivo, use o nome do projeto/site que irá

desenvolver, aqui utilizaremos “filme” (não use espaço, se necessário, separe
as palavras com underline)
Obs: Vamos aprender os conceitos e as principais ferramentas do joomla

desenvolvendo um pequeno site sobre um filme de sua livre escolha
Agora, descompacte o arquivo e teremos uma pasta chamada “filme”, dentro

dela, diversos arquivos do joomla.
Para iniciarmos a instalação, acesse o navegador e digite a seguinte linha:

http://localhost/filme
IMPORTANTE:
Perceba que é possível ter diversos projetos armazenados em seu computador,

desde que, para cada um deles exista uma base de dados diferente.
Caso tudo tenha dado certo até aqui, você será direcionado para a interface de
instalação do Joomla.
Configuração Principal
A primeira parte dele se refere as configurações principais, então vamos a elas:
Site Name: É o nome do seu site, podemos utilizar filme (não há problema
algum ser o mesmo nome que a pasta principal), ou outro nome a escolha do
usuário
11
Description: Área opcional para a inserção de uma breve descrição sobre seu
site
Admin E-mail: Apesar de ser uma instalação offline, é obrigatório inserirmos

um endereço de e-mail válido.
Admin User Name: Aqui, precisamos inserir um nome de usuário que será
usado para acessar a área administrativa, aqui vamos usar admin
Admin Password: Nesse campo, inserimos a senha para acessar a área

administrativa, para fins de estudo colocaremos também admin, mas
ATENÇÃO: AO DESENVOLVER UMA APLICAÇÃO REAL JAMAIS UTILIZE ESSE
ARTIFÍCIO, SEMPRE CRIE UMA SENHA SEGURA.
Confirm Admin Password: Aqui devemos digitar novamente a senha do

administrador do site, nesse caso, admin
A última opção dessa primeira etapa se refere à apresentação do site. É

possível deixar o mesmo fechado para visualização, permitindo que o
desenvolvedor trabalhe somente na área administrativa. Inclusive, podemos
criar uma mensagem personalizada como: “Em construção”. Algo muito
utilizado no cotidiano dos desenvolvedores, não é o nosso caso, portanto,
mantenha a opção “NO” ligada.
Com tudo pronto, siga para a tela seguinte.
12
Configuração do Banco de Dados
A segunda tela se refere a configuração da Base de Dados
Database Type: É possível escolher entre MySQL ou MySQLi, mas qual a

diferença? O manual oficial do PHP disponível na internet através do endereço
br2.php.net explica:
MySQL e MySQLi são duas tecnologias úteis se você estiver desenvolvendo uma
página da Web interativa com o Hypertext Preprocessor, ou PHP, linguagem de
script. Como seus nomes sugerem , tanto MySQL e MySQLi contar com a
linguagem estruturada de consulta ou SQL , que é um sistema padronizado
para solicitação de informações de bancos de dados. No entanto, apesar dessas
semelhanças gerais , as duas tecnologias têm suas diferenças, como o MySQL é
, uma tecnologia PHP mais básico mais velho, enquanto MySQLi é mais recente
e oferece funções mais avançadas.
A partir de 2011 , os desenvolvedores normalmente usá-lo apenas quando se

trabalha com versões do PHP 4.1.3 ou mais. Embora o MySQL poderia trabalhar
com versões mais recentes do PHP , ele não pode utilizar os recursos mais
recentes associados com as versões mais recentes do PHP.
Considerando que as versões atuais do Joomla necessitam do Php 5.3.9 ou

superior e nosso servidor Xampp atende esses requisitos, é interessante
optarmos por MySQLi.
Host Name: Em aplicações offline, por padrão, usamos localhost, já em

serviços de hospedagem, varia de empresa para empresa, em geral, utiliza-se o
mesmo nome da base de dados.
Username: É o nome do usuário da base de dados, ao trabalhar offline,

usamos por padrão “root”, já em serviços de hospedagem, é preciso verificar
junto as configurações do painel de controle quais as configurações que devem
ser usadas
Password: Aqui, deixamos em branco, em serviços de hospedagem é preciso

verificar da mesma forma que o Username.
DataBase Name: O nome da base de dados criada no PhpMyAdmin, no nosso

caso, “db_aula”, em serviços de hospedagem, inserimos aqui o nome cedido
pela empresa ou o nome de uma nova base de dados criada no painel
administrativo
Table Prefix: É recomendável não mexer nesse campo, o próprio joomla

verifica e sugere um prefixo que não seja igual a outros já existentes no banco
de dados, ele SEMPRE deve ser acompanhado de um underline.
13
Old DataBase Process: Também é recomendável não alterar esse campo, ele
é utilizado para remover ou fazer o backup de antigas base de dados.
Terminando de preencher os campos necessários, vamos para a última tela.
Finalização e Verificação
Logo no primeiro item, mantenha a opção padrão, pois iremos mais a frente
instalar um pacote de atualização do idioma e todas as outras opções podem
atrapalhar esse processo.
O item seguinte mostra a opção de enviar ou não as configurações por e-mail,

podemos ignorar e ir direto para o fim da página
14
A tela acima apresenta uma análise geral das configurações, sendo que do lado
esquerdo temos uma lista com itens relacionados a instalação do joomla e do
lado direito as configurações do PHP dentro do nosso servidor (no caso, o
Xampp).
A presença da cor amarela apenas indica que um item está fora do padrão mas
que isso não interfere no desempenho do joomla, nossa única preocupação
seria a presença de uma cor vermelha, que poderia indicar, entre outros
problemas, falta de compatibilidade entre a versão do Xampp e do Joomla, por
exemplo.
Com todas as verificações feitas, finalmente vamos clicar no botão Install
Removendo a pasta Installation
Ainda não acabou!

Perceba que na tela que surge após a instalação há uma notificação em laranja,
solicitando que haja a exclusão da pasta installation.
Por quê?
Caso ela não seja removida, ao tentar inicializar o site/projeto ele retornará
para o início da instalação e nós não queremos ter que realizar toda
configuração novamente, certo?
É possível remover a pasta indo até o caminho onde a mesma se encontra:

C:/xampp/htdocs/filme ou basta clicar no botão indicado para o que joomla
faça isso para você
Agora sim, podemos prosseguir
15
Aula 03 - CONHECENDO O JOOMLA
O primeiro grande desafio é se adaptar a interface do joomla, já que a mesma
conta com uma diversidade imensa de itens, sem contar, os adicionais que
podem ser instalados posteriormente. Essa adaptação começa com a
compreensão de um conceito básico:
Front-End e Back-End
Front-End – É o site em si, ou seja, tudo aquilo que pode ser visto pelo usuário
que acessa bem como toda área de navegação, podemos afirmar que é o
resultado do que é feito no Back-End.
Back-End – Vem a ser a área administrativa e toda interface utilizada para o

gerenciamento do site, desde textos, fotos, banners e todos os outros itens
determinados pelo desenvolvedor que serão apresentados ao usuário visto que,
em geral, há muito mais no Back-End do que o internauta possa visualizar no
Front-End.
O joomla nos concede a possibilidade de trabalharmos com as duas áreas, ou

seja, desenvolver no Back-End e acompanhar as mudanças de forma imediata
no Front-End.
Para acessar o Front-End do nosso projeto, basta abrir o navegador e digitar:

http://localhost/filme
Perceba que é o mesmo endereço que digitamos no início do processo de

instalação do joomla, mas dessa vez, ele já está instalado e não temos mais a
pasta instalattion, sendo assim, nos é apresentada a tela do Front-End (padrão
para todas as novas instalações)
16
Perceba que a tela do site tem um pré-modelo e ao longo das aulas iremos
preenchê-lo, importante dizer que é possível personalizar o mesmo, algo que
veremos adiante.
É no back-end que passaremos mais de 90% do tempo, para acessar, digite em

seu navegador: http://localhost/filme/administrator
Obs: Esse é um padrão para acesso a essa área, independente se o projeto é

offline ou não, em um site devidamente hospedado, para irmos ao Back-End
sempre usaremos a palavra administrator.
Exemplo:
www.seusite.com.br/administrator
Ao acessarmos, é necessário inserir o nome de usuário e senha que

cadastramos na última etapa da instalação, no nosso caso, admin para ambos
Aparecerá então a seguinte tela:
A área central serve para mostrar os últimos usuários que acessaram o Back-
End, os artigos populares bem como notícias diretas do site oficial do Joomla.
Na aba lateral temos o menu de acesso rápido, são na verdade, as principais

ferramentas do sistema que podem ser encontradas também no menu superior
onde há a barra com todas as funções.
De forma prática, iremos focar somente a aba superior, mas antes de falarmos
sobre cada menu, vamos traduzir nosso joomla que até o momento, não possui
em sua versão atual a opção de instalação diretamente em português
17
Traduzindo o Joomla
Acesse o menu Extensions e em seguida Extension Manager essa é a área

utilizada para instalarmos extensões para nosso joomla, contudo, por hora
adicionaremos somente o pacote de tradução.
Nessa tela, clique em Install Language que se encontra no menu lateral
Procure pelo idioma Português – Brasil, em seguida, selecione o mesmo e

clique em Install na parte superior esquerda da tela, conforme imagem abaixo:
18
Obs: As versões recentes do Joomla podem apresentar algum erro no momento
da instalação de novas extensões. A mensagem na cor verde comprova que,
apesar das mensagens de alerta, o pacote foi inserido com sucesso.
A instalação foi feita e agora é necessário selecionar o novo idioma como

padrão tanto do front-end, como do back-end, para isso, acesse o menu
superior Extensions em seguida Language Manager
Na próxima tela, selecione o novo idioma como padrão, clicando na estrela.
Perceba na tela acima que alteramos o idioma padrão do Fron-End (Site), isso é
visível por conta do menu lateral que mostra Installed – Site em azul
Agora, clique em Installed-Administrator e repita o processo anterior.
Pronto, a tradução do joomla está finalizada, caso a mudança não seja

imediata, faça o log-out e acesse novamente a área administrativa.
19
Barra Principal de Menu
A barra superior trás os itens do joomla. Não iremos contemplar todos ao longo
dessa apostila, pois seu conteúdo é muito vasto, o mesmo vale para os
módulos, componentes e plugins que veremos adiante.
Contudo, é importante conhecermos cada menu.
Sistema
Esse menu dá acesso as configurações gerais do joomla desde cores e fontes

até o acesso ao sistema, tempo de conexão, banco de dados, palavras chaves
para buscadores, posicionamento de janelas, etc.
Usuários
Presente desde a primeira versão do joomla. Como o próprio nome diz, é usado
para o gerenciamento de usuários, desde a criação, alteração ou exclusão até a
configuração de permissões (Quais as janelas que podem ser visualizadas por
um determinado usuário, é apenas um exemplo).
Em um site de pequeno porte, esse menu pode até passar desapercebido,

contudo, para projetos onde existam mais de dois desenvolvedores ou mesmo
um projeto no qual o próprio cliente cuidará da atualização, esse conjunto de
itens é fundamental
Menu
Aqui é feito o gerenciamento completo dos menus (Quem disse que um site só
pode ter um), podemos afirmar que as páginas do joomla são criadas a partir
daqui, pois todo o conteúdo criado pelos artigos, categorias, módulos e
componentes só podem ser vistos se estiverem ligados a um item de menu.
Algo muito interessante é que ao criar um novo item de menu, é possível

definir como o conteúdo será apresentado (layout). Existem, por padrão,
dezenas de maneiras diferentes.
Conteúdo
Usado para a criação e gerenciamento de categorias e artigos. Através desse

menu é possível administrar também a galeria de mídias, onde ficam
armazenadas as fotos e vídeos que são usadas no site
20
Componente
Menu usado para gerenciar os componentes instalados por padrão no joomla

bem como aqueles que são instalados posteriormente. Em geral, cada
componente possui sua própria área de edição, sendo assim, primeiro é feita a
configuração segundo a necessidade do usuário e depois a conexão com um
item de menu.
Extensões
Esse menu contém os itens considerados fundamentais no gerenciamento do

site, entre eles, a administração dos módulos, possibilidade de inserir novas
extensões (sejam elas componentes, plugins, etc.), além de fazer upload de
novos templates.
Ajuda
Como o próprio nome já diz, trás itens de consulta sobre a plataforma bem
como dicas de como usar todo o seu potencial. Importante para os iniciantes.
Configuração Global
Vamos verificar algumas opções interessantes nesse item:
Acesse: Sistema – Configuração Global
21
Logo no início, em Definições do Site temos três áreas interessantes que
modem ser modificadas a qualquer momento:
1 – Nome do Site:
Mesmo sendo campo obrigatório no momento da instalação, é possível,

posteriormente, alterar o nome do site, mas ATENÇÃO: Fazer isso com
frequência pode determinar graves problemas no posicionamento do site nos
buscadores.
2 – Modo Offline:
É possível deixar o site no modo offline e criar uma mensagem personalizada

que aparecerá para qualquer usuário que tente acessá-lo, como podemos ver, é
possível ainda criar uma imagem e utilizar a mesma ao invés de um simples
texto.
3 – Quando criamos um artigo ou usamos qualquer item que possui área de

texto, temos a disposição um editor que por padrão, é o TinyMCE, veremos
adiante que é possível inserirmos novos editores, alguns extremamente
poderosos e é nessa tela que escolhemos qual será utilizado em todo o sistema
Descendo a janela temos as Configurações de MetaDados, os dois primeiros

campos são os mais importantes sendo o primeiro a descrição do site e o
segundo as palavras chaves, ambos são importantes para os buscadores sendo
que a Meta Descrição deve ser escrita em forma de parágrafo:
Exemplo: “O melhor conteúdo sobre a melhor animação da Disney”
Já o outro campo deve ser preenchido com palavras curtas separadas por
vírgula.
Exemplo: “Toy Story; Disney, Woody, Buzz, Animação, etc.”
O ideal para ambos os campos é que não ultrapasse 20 palavras.
22
Como já explicado anteriormente, não iremos explorar todos os itens e janelas
do joomla, contudo, vale a pena citar que a aba lateral é usada para
modificações gerais em todos os componentes.
Exemplo: Digamos que ao criar os artigos, o desenvolvedor não queira que o

título do mesmo apareça na tela do site, ou ainda que a data em que o mesmo
foi criado fique oculta. Essas são opções que podem ser alteradas em cada
artigo, contudo, através desse menu lateral (na área de artigos, por exemplo) é
possível fazer uma única alteração para todos os artigos
23
Aula 04 - INSERINDO CONTEÚDO
Chegou a hora de gerar conteúdo e ver o mesmo na tela do nosso site, mas
antes precisamos compreender o conceito de Categorias e Artigos.
Como o Joomla organiza o conteúdo?
De forma bem objetiva, os artigos são por padrão a forma principal de criar
conteúdo, cada um recebe um título (nome) que pode estar relacionado
diretamente ao texto inserido, pode ter uma ou mais imagens, tabelas, links,
enfim, para efeito de comparação, imagine a criação de artigo como a criação
de um novo documento do Word.
Já as categorias tem a função de organizar os artigos, podemos comparar

estas às pastas que podemos criar em nosso computador.
Exemplo:
Três pastas com nomes diferentes de disciplinas ministradas por um professor,

considerando matemática, física e estatística. Vamos imaginar que cada uma
dessas postas possuem diversos arquivos como provas, planilha com notas de
alunos, apostilas, etc.
Podemos considerar então que as pastas são as categorias e cada arquivo um

artigo diferente.
Criando uma nova categoria
Acesse o menu Conteúdo e em seguida Gerenciador de Categoria – Nova

Categoria
Perceba que a tela seguinte possui uma simples interface e seus campos são
bastante intuitivos, a área de texto possui inclusive algumas funções
semelhantes as de formatação do Microsoft Word.
Contudo, em geral, preenchemos somente o campo Título, pois, conforme

mencionado acima, a categoria servirá para organizarmos nosso conteúdo,
sendo assim, inserir texto e/ou imagem é totalmente dispensável.
Baseado na proposta de site que estamos montando ao longo dessa apostila,

vamos criar a categoria Notícias.
24
Antes de criarmos essa categoria, é interessante falarmos sobre dois campos:
O Campo ao lado (Apelido) será usado para a identificação, o nome escrito

aqui, será o mesmo que aparecerá em sua URL quando acessar algum artigo
pertencente a essa categoria.
Caso o mesmo fique em branco (recomendado) ele criará um aleatoriamente
Outro campo interessante para citarmos é o campo “Pai” que se encontra na

aba direita da tela. Ele serve para interligarmos categorias, ou seja, criar
subcategorias, artifício muito utilizado para melhorar a organização do
conteúdo.
Voltando ao exemplo anterior, é possível que na pasta matemática tenha outra

pasta chamada provas e dentro dela outras quatro pastas com o nome de cada
bimestre e somente dentro de cada bimestre o arquivo das avaliações, ou seja,
não há limite para a criação de categorias e subcategorias.
Continuando:
Clique em Salvar & Fechar para criar a categoria Notícias
Perceba que já existe outra categoria criada chamada uncategorised, ela é

criada no momento da instalação do joomla e servem justamente como padrão
para artigos que não possuem ligação com qualquer outra categoria criada pelo
usuário, em outras palavras, “artigos sem categoria”.
Apesar de parecer útil em certos momentos, é muito importante que todos os

artigos estejam organizados em categorias.
25
Criando um novo artigo
Acesse o menu Conteúdo e em seguida Gerenciador de Artigo – Novo Artigo
Aqui também temos diversos campos e opções de parametrização, por hora,

vamos nos concentrar em criar o conteúdo, sendo assim, precisamos nos
preocupar com três itens:
1 – Título
2 – Texto
3 – Categoria
Para facilitar o processo, pegue uma notícia qualquer sobre o filme do qual
estamos montando o projeto, utilize o mesmo título no campo com essa
finalidade e insira o restante da matéria na área de texto (configure como
desejar) e por fim, na aba lateral, altere o campo categoria para Notícias.
Clique em Salvar & Fechar para criar o Artigo
Apresentando o Artigo na Página Principal
O processo é muito simples:
Perceba que em sua lista de artigos na coluna ESTADO existem três botões, o
primeiro define se o artigo está ou não publicado, o segundo nos dá a
possibilidade de defini-lo como DESTAQUE e o terceiro serve para enviarmos o
artigo para a lixeira ou arquivarmos o mesmo.
26
Para que o artigo apareça na página principal, basta ligarmos a segunda opção
em forma de uma estrela (Destaque).
Agora vamos verificar o resultado, abrindo em outra aba nosso front-end com o
endereço localhost/filme ou simplesmente clicando na opção “visualizar site”
que se encontra na extremidade inferior esquerda.
Alterando as configurações de um artigo
Observando o artigo que acabamos de colocar na página principal, temos uma

área chamada “Detalhes” onde temos informações sobre a criação do texto
como data, quantidade de acessos, categoria, etc. Já no botão do lado direito,
temos a opção de imprimir ou enviar por e-mail.
Apesar de serem relevantes, esses dados e opções podem ser ocultados. Da

mesma forma, é possível acrescentar informações sobre o artigo criado.
Para isso, no backend, acesse o Gerenciador de Artigos e clique sobre o que
acabamos de criar.
Vá até a aba Opções de Artigo e veja que há uma quantidade enorme de

opções que podem ser apresentadas juntamente com o artigo, em cada uma
podemos selecionar ocultar, exibir ou usar global.
27
Mas o que significa usar global?
Significa utilizar as configurações pré-definidas em Configuração Global.

Lembrando que lá, temos uma área específica para alterar as opções de
diversos itens e componentes do joomla e os artigos estão inclusos.
A grande vantagem é não termos que alterar artigo por artigo, mas já deixar
pré-definido como queremos que eles sejam apresentados em nosso front-end.
Aproveitando que estamos na área de edição do artigo, selecione a aba Opções

de Publicação, aqui temos alguns elementos que merecem destaque como a
possibilidade de definir a data inicial da publicação de um artigo da mesma
forma que a data de encerramento.
Isso pode ser muito útil se tratando de promoções que, em geral, possui uma
data de validade. Em algumas empresas, esse artifício também pode ser usado
para que o sistema não fique sobrecarregado, dessa forma, é definido um
período para o qual um artigo constará no servidor.
Aqui também temos a possibilidade de acrescentar uma descrição e palavras

chaves para o artigo. Isso é particularmente útil perante os buscadores,
fazendo com que seu site seja encontrado com mais facilidade.
Acrescentando o “Leia Mais”
É extremamente útil termos a opção de limitar a apresentação de um artigo

através do botão “leia mais”, isso permite construir um layout mais simples e
clean.
Para isso, vamos até a tela principal de edição de nosso artigo (content) e
posicione o mouse no local exato em que deseja aplicar o botão, em seguida,
basta clicar em “Leia Mais” e então aparecerá uma linha pontilhada na cor
vermelha conforme imagem abaixo.
28
Acrescentando link no artigo
Processo também muito simples. Basta selecionar a palavra ou frase que deseja
transformar em um link e clicar no botão que tem a aparência de um cadeado
fechado.
A janela que se abrirá permite que você insira o endereço de destino (URL)
bem como escolher se o site abrirá na mesma tela ou em uma nova aba.
29
Aula 05 - EXTENDENDO O JOOMLA
Sem dúvida, uma das razões da popularidade do Joomla é o considerável

número de extensões disponíveis. São milhares delas para os mais variados fins
e necessidades de um site. Há por trás disso toda uma comunidade envolvida e
empenhada do desenvolvimento e aperfeiçoamento de funcionalidades para
serem incorporadas aos projetos. A maioria, cerca de 90%, são distribuídas
gratuitamente, enquanto outras são comerciais.
São cinco os tipos de extensões disponíveis:
Plugin: são os tipos mais avançados de extensão. Um exemplo de plugin são

os editores de texto.
Componentes: Os componentes são miniaplicativos que podem se conectar

diretamente a um item de menu, possuem diversas funções e áreas extensas
de gerenciamento.
Módulos: Semelhantes aos Componentes, contudo, com um número menor de

funções mas com a vantagem de serem inseridos em qualquer área do
template
Idiomas: Ferramentas específicas de tradução tanto para o back-end quanto

para o front-end
Templates ou Temas: configuram a parte visual do site, como cores, gráficos

e fontes.
Ao se interessar pela instalação de alguma extensão, sempre faça primeiro

testes num ambiente simulado, utilizando servidor local. Desta forma
você poderá experimentar todas as configurações, implicações e
funcionalidades, sem comprometer um projeto. Importante frisar a importância
de não utilizar um número alto de extensões para não comprometer a
velocidade do site, afinal, o mais importante em uma página é e sempre será o
conteúdo
Por padrão, o joomla já possui diversas extensões instaladas e é possível

construir um site completo usando-as, todavia, ainda assim teríamos um site
limitado tanto em sua engenharia quanto em matéria de designer.
30
As extensões existem e são muito utilizadas justamente para suprir essa
necessidade se adaptando a cada projeto.
Joomla Extensions Directory (JED):
O JED é o ambiente oficial onde são colocados links para downloads de

extensões para o joomla, atualmente, existem pouco mais de oito mil no
endereço http://extensions.joomla.org Divididas em diversas categorias e
subcategorias, na verdade, esse portal engloba links que direcionam para
outros sites.
É importante ressaltar que além dos itens existentes no JED, é perfeitamente

possível encontrar centenas de outras extensões realizando uma simples
pesquisa nos dispositivos de busca
Buscando e Instalando um Novo Componente

Vamos aproveitar e realizar o download de um componente, precisamente um
novo editor chamado JCE. Para isso basta acessar o JED e buscar a categoria
correspondente chamada Editing e em seguida a subcategoria Editors
Na lista que se apresentará, procure pelo JCE
31
Todos os itens do JED apresentam duas informações importantes, perceba que
na imagem anterior temos próximo ao nome as versões do joomla ao qual o
item escolhido irá funcionar e do outro lado as características. No caso do JCE,
temos as letras C, P e S
Considerando que:
C: Significa Componente
P: Signfica Plugin
S: Significa Suporte
Ou seja, isso significa que essa extensão é um Componente, mas

também possui pacotes de plugin e o próprio site da empresa oferece
suporte
Existem outras duas letras que frequentemente também podem surgir ao lado
de outras extensões, são elas:
M: Significa que é um Módulo
L: (Language) - Signfica que possui pacotes de tradução
Continuando:
Clique sobre a extensão e na próxima tele procure pelo botão de download,

clique nele para ser direcionado a página da empresa fornecedora do JCE.
Perceba que nesse site há diversas extensões fornecidas, todas gratuitas, por
hora, vamos ficar somente com o Editor, na versão de nosso joomla
Feito o Download, é hora de instalar esse extensão
Dentro do Back-End, acesse Extensões – Gerenciador de Extensões
32
Existem três maneiras distintas de instalarmos extensões
1. Enviar Pacote de Arquivos – Vá até “Escolher Arquivo”, selecione o pacote

zipado e clique em “upload e instalar”;
2. Diretório de Instalação – É necessário extrair para um local onde você

organiza suas extensões baixadas. Crie uma nova pasta e a nomeie com o título
original do diretório baixado. Envie todos os arquivos e diretórios da extensão
baixada para esta pasta criada. Em seguida abra esta pasta e copie o seu
endereço (Ex.: C:\xampp\htdocs\jce.zip). Agora você só precisa colar esse
endereço do diretório no campo “Diretório de Instação” e clicar em “Instalar”;
3. URL de Instalação – Identifique qual a url que oferece o dowload direto do

arquivo a ser baixado. Você precisa apenas colar a url no campo “URL de
Instalação” e clicar “Instalar”. Para funcionar efetivamente, você precisa ter a
url que o leva diretamente ao arquivo da extensão.
Vamos usar a primeira opção, considerada a mais simples.
O Joomla mostrará a informação de que a extensão foi instalada com sucesso.

Perceba que imediatamente podemos visualizar o JCE na aba Componentes
Como na maioria dos componentes, o JCE também possui diversos parâmetros,

porém, o que realmente importa é a sua funcionalidade. Vamos lembrar que ele
é um Editor. Mas o que necessariamente signfica isso?
33
Acesse o Gerenciador de Artigos e posteriormente o primeiro e único artigo que
criamos até agora
Dê uma boa olhada na área de edição, precisamente nas funções que temos,
como NEGRITO, ITÁLICO, SUBLINHADO, ALINHAMENTO e tudo mais que está
nessa barra chamada de EDITOR
Feche clicando em Cancelar ou Salvar e Fechar
Agora, Vá até Sistema – Configuração Global na tela seguinte, um pouco em

baixo teremos a opção EDITOR PADRÃO, clique e altere para aquele que
acabamos de instalar, ou seja, o JCE
Clique em Salvar e Fechar e retorne até o artigo, perceba que nosso editor está
completamente diferente:
Entre as novas opções temos a possibilidade de alterar o tipo e o tamanho da

fonte, além de cores, preenchimento, inserção e configuração completa de uma
tabela e até corretor ortográfico.
Esse foi apenas um exemplo de instalação de uma extensão, voltaremos a

executar esse processo ao longo das próximas aulas
34
Aula 06 - TRABALHANDO COM IMAGENS
Gerenciador de Mídias
Para chegarmos até esse ambiente (mostrado na figura abaixo), basta acessar
Conteúdo – Gerenciador de Mídias
Essa é a área na qual armazenamos nossos arquivos de imagem e vídeo para

serem utilizados em nosso site, perceba que a interface é semelhante ao
Windows Explorer, ou seja, podemos gerenciar pastas para melhor organização
do conteúdo.
Armazenando imagem no joomla
Clique em “Create New Folder” e dê o nome de “img_noticias”

Obs: Não são aceitos nomes com espaço
Acesse a pasta e clique no botão “Enviar” escolha uma imagem do seu

computador (preferencialmente alguma que tenha relação com o artigo que
criamos) e faça o upload
35
Inserindo imagens em artigos
Esse procedimento é bem simples, vamos acessar nosso único artigo criado até
o momento e clicar na área de edição, onde se encontra o texto
(preferencialmente antes da primeira palavra) e em seguida clique no botão
Insert/Edit Image conforme mostrado abaixo
IMPORTANTE: Caso você não esteja usando o JCE a janela que se abrirá
mostrará apenas dois campos solicitando que você digite o caminho no qual a
imagem se encontra (a pasta padrão se chama image) e o título da mesma.
Como nós estamos usando o Editor JCE, a janela apresentada será essa:
Vamos começar de baixo para cima:
Perceba que é possível visualizar toda estrutura de nosso gerenciador de mídias

e não apenas isso, mas também, por meio dos botões laterais, criar novos
diretórios e fazer o upload de novas imagens sem a necessidade de irmos até o
gerenciador de arquivos.
Lembrando que essa facilidade existe por estarmos usando o componente JCE
36
Procure e acesse a pasta que criamos, chamada “img_noticias” e
posteriormente clique sobre a imagem que iremos inserir. Perceba que
imediatamente, parte dos campos na área superior serão preenchidos
URL: É o caminho onde se encontra a imagem dentro do joomla
Alternate Text: Você se lembra do parâmetro “alt” do HTML ? Pois bem, aqui
no gerenciador de imagem, o joomla automaticamente cria essa informação,
essencial para os motores de busca
Dimensions: O tamanho real da imagem, considerando width x height

(largura por altura). Note que o campo “proportional” por padrão está ativo, ele
facilita muito caso haja a necessidade de diminuir ou aumentar a imagem, isso
porque basta alterar um dos campos e clicar no botão ENTER para que ele
altere o o outro campo.
O campo seguinte, se chama Alignment (Alinhamento) e possui as opções

Left, Right e Center, o interessante é que, conforme alteramos esse campo, é
possível verificar na janela “preview” (lado direito) exatamente como ficará o
designer mesclando nossa imagem com o texto que já se encontra no artigo
Se deixarmos do jeito que está teremos uma imagem bem alinhada, contudo,
com o texto praticamente colado na mesma. Para evitar isso, temos a opção
Margin que como o próprio nome sugere, cria um espaçamento entre imagem
e texto
O parâmentro “Equal Values” funciona exatamente como o “Proportional” do

Dimensions, ou seja, ele atribui o primeiro valor a todos os outros campos
37
Caso deseje, é possível, através da última opção adicionar uma borda em volta
da imagem, bem como configurar largura, estilo e cor
Após realizar todas as configurações desejadas, clique em Insert e verifique o

resultado no Front-End
OBS: Apesar de não abordarmos nesse material, a janela utilizada para

gerenciar a imagem ainda possui outras duas funções que se encontram no
topo, sendo uma delas a possibilidade de alterar a imagem ao passarmos o
mouse por cima (mouseover) e a outra funções avançadas em para estilizar
com CSS
38
Aula 07 - TAREFA COMPLEMENTAR
Crie mais 6 novos artigos respeitando as características abaixo:
 Todos devem estar ligados a categoria Notícias

 Insira ao menos uma imagem em cada um dos artigos
 Use o botão “LEIA MAIS” em todos eles
 Crie ao menos um link externo em cada artigo
 NÃO coloque nenhum deles em DESTAQUE
 Retire todos os botões adicionais (e-mail, autor, data, acessos, etc.)
 Procure manter o mesmo padrão de fonte para todos os artigos
39
Aula 08 - CONFIGURANDO O MENU
Diferente de outras plataformas ou até mesmo da criação de sites apenas
utilizando HTML e CSS, o Joomla não necessita que seja construída uma página
para apresentar cada conteúdo. Na verdade, ele nos possibilita gerenciarmos as
informações e apresentarmos onde desejamos.
Essa versatilidade só existe devido a utilização de um menu, onde cada link é

considerado uma página independente.
Na aula anterior criamos diversos artigos, mas não os colocamos em

DESTAQUE, porquê? Porque nosso objetivo agora é apresentar esse conteúdo
em uma área específica para notícias.
Adicionando novo item ao menu
Acesse Menus – Main Menu
Perceba que o único item existente é o “Home”, mas o que desejamos é um

botão específico para apresentar nossas notícias, certo ? Sendo assim, clique
em Novo
Antes de mais nada, vamos escrever o título desse item que nada mais é que o
nome do botão, no caso, “Notícias”.
Ao lado, temos o campo Apelido que, caso fique em branco copiará o título.
Esse apelido é justamente o que aparecerá em nossa URL ao acessarmos esse
link.
Na área central temos o campo “Tipo de Item de Menu”, para escolher,

devemos clicar no botão azul Selecionar
A janela que se abre possui diversas opções, aqui é onde escolhemos o que
exatamente deverá ser apresentado na área de conteúdo de nosso novo botão
(conhecido como content, guarde essa palavra).
Boa parte dos itens apresentados nessa janela estão diretamente ligados aos
componentes instalados em nosso joomla, ou seja, em geral fazemos a
configuração de um componente e depois determinamos em qual botão/link do
site ele irá aparecer.
40
Exemplo:
Digamos que vamos selecionar a opção FONTE DE NOTÍCIAS, isso significa que
esse componente só irá aparecer quando clicarmos em Notícias.
É possível criar diversos links e configurar um componente (e apenas um) para

cada, como já foi descrito nesse material, apenas com as extensões já
presentes no joomla é possível criar um belo site.
Diferentes formas de apresentar o conteúdo através

de um link
Ainda nessa janela, vamos clicar em “Artigos”, fazendo isso, teremos uma série
de outras opções. Perceba que ao lado de cada uma existe uma breve
descrição que facilita o entendimento da sua função.
Como podemos ver, é possível apresentar uma lista de categorias, somente um

artigo ou ainda mostrar somente os artigos que estão marcados com
DESTAQUE (esse último é justamente a configuração usada pelo item de menu
HOME)
41
Vamos escolher Categoria como Blog
Após o carregamento da página, ele solicitará logo abaixo a categoria, no nosso

caso, colocaremos “Notícias”.
Até aqui: Estamos criando um novo botão em nosso site que

apresentará nossos artigos em formato de Blog, artigos esses
somente da categoria Notícias
Configurando Layout dos Artigos
Na parte de cima, temos diversas opções (em azul), por hora, vamos escolher
“Opções de Layout do Blog”
A próxima janela nos trás quatro campos e são eles que gerenciam a forma
como nosso conteúdo será apresentado. Aqui iremos inserir apenas números,
contudo, precisamos compreender a função de cada um. Vejamos:
#Artigos Principais
Significa que ele apresentará o artigo ocupando toda a janela do site onde está
o conteúdo, se colocarmos aqui o número um, ele apresentará somente um
artigo baseado nessa regra, se colocarmos dois ou mais, ele organizará
colocando um em baixo do outro.
42
#Introdução Artigos
A quantidade que for colocada aqui será apresentada obrigatoriamente em

baixo do(s) artigo(s) principal, porém, diferente da opção anterior, se
colocarmos aqui o valor dois ou acima, ele irá organizar os artigos um ao lado
do outro, dividindo em colunas baseado no valor digitado no próximo campo
#Colunas
É a quantidade de colunas em que serão divididos os artigos apresentados no

campo anterior, em outras palavras, para uma melhor organização, é
interessante que o mesmo valor colocado em #Introdução Artigos seja
colocado aqui também
#Links
Aparecerá no final, após todos os outros. Aqui é definida a quantidade de

artigos que apresentarão somente os seus respectivos títulos
Para compreendermos melhor, preencha da seguinte forma:
Clique em Salvar e veja o resultado no front-end.
Perceba que em nosso menu já temos um novo link
Ao clicar nele, podemos verificar todos os nossos artigos, preste bem atenção
na disposição dos mesmos:
43
Veja que o primeiro artigo ocupa de forma completa a área do conteúdo, os
dois que se seguem estão abaixo divididos exatamente em duas colunas e por
fim temos quatro links apresentando somente o título com uma barra de
paginação ao término dos mesmos
É justamente a parametrização feita no Layout desse item de menu, significa

que se desejarmos três artigos “completos”, um em baixo do outro, devemos
colocar esse número no primeiro campo (#Artigos Principais) e assim
sucessivamente.
Retirando o título do artigo do botão “Leia Mais”
Por padrão, os botões “Leia Mais” dos nossos artigos vem acompanhado do
título do mesmo
Como retirar isso?
Vá até o item de menu que acabamos de criar (Notícias) e acesse “Opções do

Artigo”
Note que temos as mesmas opções em cada um dos artigos criados, a

diferença é que aqui conseguimos alterar todos que estão dentro desse link de
uma única vez.
Vá até “Exibir Título no Leia Mais” e marque como OCULTAR
44
Podemos ver o resultado abaixo:
Criando item de menu inativo
É muito natural, quando estamos criando um site, montar os itens de menu e

deixá-los provisoriamente inativos até construir o conteúdo correspondente. Ao
criar páginas em HTML, é possível usar # dentro da TAG <a>, dessa forma, o
menu apesar de aparecer, se torna inativo.
Exemplo:
<a href=”#”>Nome do Botão</a>
Vamos aprender a criar algo semelhante em nosso menu do joomla.

Acesse Menus – Main Menu – Adicionar Item de Menu
No campo “Título do Menu”, vamos colocar Site Oficial e em “Tipo de Item de

Menu” selecione Links de Sistema – URL Externa
Agora basta inserir # no campo link
45
Dessa forma teremos um link que existe, mas se encontra inativo, em qualquer
momento, podemos retornar e inserir uma URL externa ou simplesmente
alterar o “tipo de item do menu”
46
Realize as etapas abaixo para criar um novo item de menu com conteúdo
1 Crie uma categoria chamada Personagens

2 Copie para sua máquina fotos dos personagens referente o seu filme
3 Crie três novos artigos ligados a categoria Personagens
4 Crie um novo item de menu em forma de blog
5 Conecte o novo item de menu a categoria Personagens
Importante:
 Não esqueça de conectar cada novo artigo a categoria Personagens
 Cada artigo deverá fazer a descrição de um personagem diferente
 Cada artigo deverá ter uma foto
 Armazene as fotos em uma pasta chamada personagens
 Centralize a foto e deixe o texto abaixo da mesma
 Coloque o “Leia Mais” entre as fotos e os textos
 Retire o Título dos artigos do botão “Leia Mais”
 A estrutura de layout do novo item de menu não deverá ter nenhum
artigo principal ou links inferiores, contudo, deverá apresentar os 3
artigos criados em 3 colunas
47
Aula 10 - MÓDULOS
Conforme explicado anteriormente, os módulos se assemelham aos
componentes, contudo, não possuem tantas funções, mas tem a vantagem de
serem atribuídos a qualquer área do site além aparecerem em mais de uma
página
Muitos componentes também podem ser apresentados como módulos, isso

significa que além de ter diversas opções de personalização, é possível
apresentá-los em diferentes lugares.
Conhecendo um pouco sobre Templates
Para compreendermos melhor essa diferença entre componentes e módulos e

darmos continuidade em nosso processo de criação, vamos explicar um pouco
sobre outra importante extensão, os templates.
Templates nada mais são que o “esqueleto” do site, onde toda informação é
apresentada. Cada template possui diversas posições e elas são preenchidas
pelos módulos.
O Joomla em sua versão mais atual vem com dois diferentes templates, o
protostar é aquele que vem instalado como padrão. Mais a frente veremos mais
detalhes sobre configurações de templates, por enquanto, basta conhecermos
as posições do protostar, vejamos abaixo como fazer isso:
Acesse Extensões – Gerenciador de Temas
48
Em seguida, clique em opções (ícone em formato de engrenagem do lado
superior direito)
Altere a Opção Preview Module Position para “ATIVADO”
Com isso agora temos a possibilidade de enxergar as áreas do template. Para

isso, vá até o front-end e independente da página digite ao término da URL:
?Tp=1 e aperte ENTER
Perceba que é possível visualizar as posições do template (em vermelho)

mesmo as que não estão sendo utilizadas. Inclusive, quando uma posição não é
utilizada, ela simplesmente “se retrai” permitindo que os conteúdos próximos
venham a se expandir, todavia, se encaixarmos algum conteúdo em uma
posição ainda não utilizada, o template se adapta para comportar aquela
informação.
As posições do Template Protostar
Vamos compreender melhor como é feita a distribuição das posições do

template padrão, observe que as três primeiras áreas são: Position 0, Position 1
e banner, sendo um em baixo do outro
49
Perceba que os três preenchem a área completa do template, de ponta a
ponta, diferente dos que veremos a seguir: Position 8, Position 3 e Position 7.
Todos eles estão um ao lado do outro
Apesar de não aparecer (em nenhum template), existe uma área que é usada
para receber o conteúdo de nossos artigos e também para apresentar diversos
componentes, chama-se “content”.
Basta observar e ver que o local onde está o artigo realmente não apresenta
nenhuma janela mostrando o nome da posição e ele(s) se encontra(m) bem
embaixo do Position 3
Por fim, na parte inferior, temos as três últimas posições, sendo Position 2,
Footer e Debug. A primeira citada está na mesma linha do Position 3 e do
content e as outras duas se assemelham as do topo e se espalham de forma
horizontal por todo o site
50
Um template, portanto, se assemelha a um quebra cabeça no qual podemos ir
encaixando nosso conteúdo (componentes e módulos) de forma a construir o
designer desejado.
Gerenciando Módulos
Agora que conhecemos nosso template e suas respectivas posições, vamos

voltar aos Módulos. Acesse Extensões – Gerenciador de Módulos
Já temos, por padrão, três módulos instalados sendo:
Breadcrumbs (usado como uma espécie de mapa, mostrando o local onde o

visitante se encontra)
Main Menu (usado para gerar o menu de nosso site)
51
Finalmente temos o Login Form (módulo usado para o gerenciamento interno.
Veremos mais sobre ele adiante)
Existem três colunas importantes nessa área de gerenciamento de módulos,

sendo Posição, Tipo e Páginas
No primeiro temos exatamente o local do template onde o módulo está sendo

apresentado, na segunda coluna o tipo do módulo que está sendo usado e por
fim a indicação de quais as páginas ele irá aparecer.
Na parte central, ao lado do nome de cada módulo temos um botão que

estando verde indica que o módulo está ativo, é possível alterar quando
quisermos.
Inserindo o módulo Personalizar HTML
Clicando em Novo temos uma lista de excelentes módulos, parte deles possui
conexão direta com os componentes já existentes em nosso sistema, mas o
mais usado e versátil, sem dúvida é o Personalizar HTML
52
Tudo porque, ele é um módulo extremamente semelhante a criação de um
artigo, ou seja, podemos colocar texto e/ou imagem e apresentar esse
conteúdo em qualquer outra parte do site e não apenas no Content (Na
verdade, nenhum módulo pode ser apresentado no “Content”)
Procure e acesse o Personalizar HTML
Vamos criar um pequeno banner lateral, algo semelhante a “anuncie aqui”,

basta procurar uma imagem semelhante e guardá-la no computador.
No campo “Título” vamos escrever: Banner Lateral.
Em seguida use o botão de gerenciamento de imagem para fazer o upload do

arquivo que está no computador (armazene na pasta banners) e inserir na área
de texto, exatamente como fazemos ao inserir uma foto em um artigo, a
diferença é que agora não temos texto, somente imagem (alinhe a imagem ao
centro)
Agora temos que definir em qual parte do template essa imagem irá aparecer,
verifique a área a direita onde temos um campo chamado “Posição”, clique e
selecione na lista o Position 8 dentro do Template Protostar
Aproveite e altere o campo de cima “Exibir Título” para Ocultar
Ainda tem mais, conforme explicado anteriormente, além de indicarmos o local

do template, é possível definir em quais páginas desejamos que o módulo seja
apresentado.
53
Vamos até Atribuir Módulo perceba que por padrão, ele será apresentado em
todas as páginas, vamos clicar no botão e alterar para “Apenas nas Páginas
Selecionadas” conforme imagem abaixo:
Deixe somente a caixa da página “Notícias” selecionada e finalmente clique em

Salvar e Fechar. Vamos até o Front-End e verificar que, conforme nossa
configuração no módulo Personalizar HTML, a imagem aparece somente na
página Notícias e na posição indicada
54
Insira banners diferentes em seu site
1 - Busque na internet fotos grandes referente o filme do seu site e armazene

em seu computador
2 – Crie um módulo “personalizar html” e insira uma das fotos (armazene na

pasta banners)
3 – Configure para que o mesmo apareça em uma das posições superiores
4 – Configure para que ele apareça somente na primeira página
5 – Repita os passos 2 e 3 com outras duas imagens, contudo, fazendo com

que uma delas só apareça na página de notícias e a outra somente na página
personagens
55
Aula 12 - GERENCIAMENTO DE USUÁRIOS
O joomla possui um poderosíssimo sistema de gerenciamento de usuários e
nesse capítulo, discorreremos “um pouco” sobre as ferramentas e categorias
existentes.
Quando é feita a instalação do joomla, automaticamente, criamos o usuário

responsável pela administração total do sistema, chamado de Super User, ele
possui a autonomia para alterar qualquer configuração, bem como
inserir/excluir extensões.
Existem ainda outros grupos de usuários, cada qual com uma característica
específica. Mas qual a importância disso? Imagine poder criar conteúdo que
será restrito a um tipo de público ou ainda ter usuários que possam criar, editar
e publicar artigos sem a necessidade de acessar o back-end.
Vamos conhecer um pouco de cada grupo:
Guest: Significa visitante, não possui nenhum privilégio, tampouco tem acesso
ao back-end, pode apenas enxergar conteúdo de acesso restrito do front-end
Manager: Possui um acesso limitado ao Back-End, podendo apenas criar

artigos, categorias, gerenciar mídias e alterar alguns componentes padrão
Administrator: Consegue acessar o back-end e tem quase todos os privilégios

exceto alteração na área de Configuração Global
Autor: Não possui acesso ao Back-End, tem permissão para criar artigo, mas
não editar e tampouco publicar (os artigos criados por ele ficam por padrão
despublicados, aguardando permissão da parte de outro usuário com maiores
privilégios)
Editor: Também não possui acesso ao Back-End, tem permissão para criar e
editar qualquer artigo via front-end
Publisher: Através do Front-End pode criar, editar, excluir e publicar artigos.

Não possui acesso ao Back-End
Não iremos abordar na íntegra todas as possibilidades que existem referente ao

gerenciamento de artigos, contudo, mostraremos a seguir alguns exemplos
práticos que, sem dúvida, servirão para dar uma visão geral
56
Criando novo usuário
O joomla possui um módulo padrão que funciona tanto para o usuário fazer seu
login quanto para novos usuários se cadastrarem. Esse mesmo módulo já se
encontra ativo e posicionado asism que finalizamos a instalação de nosso
sistema. Conforme já mencionado, ele se encontra logo abaixo do nosso menu
Contudo, não faremos a criação de um novo usuário através do Front-End mas

sim via Back-End
Acesse Usuários – Gerenciador de Usuários – Criar Novo Usuário
Obs: Aqui, nessa aba Usuários, também temos uma opção chamada “E-mail em
Massa”, ela é muito interessante uma vez que é usada para mandar uma
mensagem a todos os usuários cadastrados
57
Continuando...
Preencha os campos obrigatórios e também crie uma senha (fácil de lembrar)
Em seguida, vamos até Grupos de Usuários Atribuídos
Note que por padrão a categoria Registred já está selecionada, isso ocorre
porque o joomla “compreende” que qualquer novo usuário terá acesso a algum
local restrito do site, mesmo que seja somente para visualizar. Por isso é muito
importante sempre manter essa caixa selecionada.
Agora vamos selecionar o grupo ao qual esse usuário pertencerá.

Vamos selecionar Autor
Feito isso, clique em Salvar e Fechar
Vamos repetir o mesmo processo, contudo, criando um Publisher
58
Muito bem, agora temos dois novos usuários, vamos apresentar os dois
principais conceitos de uma única vez.
Criando artigo via front-end e limitando acesso
Ainda em nosso Back-End, acesse o gerenciador de menu e crie um novo item,

insira “Escrever um Artigo” no Título e Selecione Artigo-Criar Artigo no “Tipo de
Item de Menu”
Antes de finalizarmos, vá até a área lateral e procure por um item chamado

“Nível de Acesso”, ao clicar veja que há diferentes opções (Guest, Public,
Registered e Special). Por padrão em todos os itens de menu, artigos,
categorias, etc. Essa opção sempre estará setada como Public, mas dessa vez,
vamos alterar para Registered
Agora sim, vamos clicar em Salvar e Fechar
Vá até o Front-End e perceba que o item “Escrever um Artigo” não aparece em

nosso menu. Porque? Pelo fato de termos selecionado o nível de acesso dele
como Registered, ou seja, ele somente poderá ser visto por um usuário que
esteja logado.
Vamos fazer o teste?
59
Utilize o Módulo de Login e faça o acesso com o usuário criado como Publisher.
Veja que após o carregamento da página, o item “Escrever um Artigo”
finalmente apareceu.
Aqui entra o conceito de “conteúdo restrito”. Vale lembrar que qualquer item do
joomla possui a possibilidade de ser restrito, em nosso exemplo, não somente
demonstramos isso com um item de menu, mas com um item que, na maioria
dos casos, realmente não pode ser visto nem tampouco acessado por um
usuário comum.
Perceba, portanto, que é possível criar diversos itens que só poderão ser
acessados e visualizados caso o usuário faça login. Esse controle pode ser feito
através de um cadastro simples pelo front-end (que necessita da aprovação de,
no mínimo um administrador) como também através de um controle de
conteúdo pago, ou seja, caso o cliente tenha feito o pagamento, você libera o
conteúdo para ele.
Agora vamos clicar em “Escrever um Artigo”
A tela seguinte mostra uma área de gerenciamento muito semelhante a do

nosso back-end. Aqui o usuário pode não somente criar como também
selecionar, por exemplo, a categoria correspondente além de poder inserir
imagem e até meta-tags e keywords (falaremos mais sobre elas em outro
capítulo)
Vamos aproveitar e criar uma nova notícia.
ATENÇÃO: Não esqueça de acessar a aba Publicando e selecionar a categoria

Notícias.
60
Estando tudo pronto, salve clicando no botão azul
Caso você realmente tenha acessado como Publisher, seu artigo irá
imediatamente aparecer na área de notícias (a configuração do item de menu
apresenta os itens mais recentes primeiro, é possível alterar isso em Opções de
Layout)
Muito bem, agora faça o Log-out e acesse novamente via Front-End, mas dessa
vez usando o usuário registrado como “autor” e também crie uma nova notícia.
Ao finalizar, perceba que a mesma não está aparecendo. Será que algo deu
errado? Absolutamente não! O que acontece é que o grupo de usuário “autor”
só pode criar artigose não publicá-los.
Portanto, isso significa que esse artigo se encontra em nosso gerenciador,

contudo, despublicado, aguardando que outro usuário com privilégios maiores
possa liberar a postagem
61
Aula 13 - FORMULÁRIOS
Existem diversas extensões para a criação de formulários e vamos dedicar esse
capítulo a apresentação de um excelente componente. Veremos um pouco do
que o Breezing Forms é capaz
Baixando e instalando o breezing forms
Podemos buscar pelo JED ou acessar diretamente o endereço da empresa

crosstec: http://crosstec.de/en/extensions/joomla-forms-download.html
Existe a versão paga, mas a gratuita consegue suprir nossas necessidades

tranquilamente, sendo assim, busque por “Breezing Forms Lite”
Ao fazer o download, perceba que temos um arquivo zipado no qual, inclusive,

existe a informação de que devemos extrair antes de fazer a instalação
(frequentemente fazemos diretamente a instalação de uma extensão, mas há
exceções)
No caso do BreezingForms Lite, ao extrairmos os arquivos da pasta principal

temos diversos outros arquivos zipados, perceba que parte deles possui a
descrição de que são compatíveis com a versão 3, dentre eles, temos um
pacote de componente (prefixo “com”), um de módulo (prefixo “mod”) e um de
plugin (prefixo “plg”)
62
Utilize o Gerenciador de Extensões para instalar os três arquivos nessa ordem:
1 – Componente
2 – Módulo
3 – Plugin
Toda configuração é feito pelo Componente então, é para lá que nós vamos:
Na primeira tela, o componente solicita que você aceite a criação de novas

tabelas no banco de dados, apenas clique em “Continue”
Ele apresentará mais uma mensagem dizendo que a instalação agora sim está
completa. Clique novamente em “Continue”
Por fim, a tela apresentada por último mostra a configuração padrão. Não
precisamos nos preocupar. Desça a janela e clique em SAVE
Funções do Breezing
O menu lateral traz as principais funções do componente, entre elas, podemos

destacar a Manage Records que armazena toda e qualquer informação enviada
através dos formulários criados. Essas mesmas informações podem
posteriormente ser exportadas para um arquivo XLS ou CSV, por exemplo.
Manage Scripts e Manage Pieces possuem função semelhante, enquanto no

primeiro podemos instalar complementos do breezing direto da internet, o
63
segundo serve como uma espécie de editor PHP, para que dessa forma
possamos acrescentar funções via código.
Por padrão, após a conclusão da instalação, nos encontramos na tela Manage

Forms e é aqui que vamos dedicar uma atenção especial.
Perceba que temos três botões verdes na parte superior, cada um deles
possibilita a criação de formulário, claro que com suas características
específicas. Vamos escolher o primeiro (Quick Mode)
Construindo um Formulário
A primeira tela apresenta as configurações gerais do formulário como nome,

botões, e-mail de destino, etc.
Temos também três botões na cor laranja que serão também usados para a
contrução do formulário
Page: Talvez você já tenha se deparado com a situação de preencher um

formulário que tenha mais de uma página, pois bem, o breezing solicita que
tenhamos ao menos uma página e é dentro dela que teremos nosso formulário
Section: Considere como uma área quadricular que sempre ficará dentro de
uma página
Element: São os itens do Formulário
Isso signfica que necessitamos ao menos de uma página, as seções só existem

se as páginas existirem e os elementos só podem ser colocados dentro de uma
seção.
Para facilitar, o Breezing já deixa os botões na ordem que iremos precisar. Mas
antes de utilizarmos esses botões, vamos alterar alguns campos na tela inicial
de configuração
Começando pelo Title e pelo Name, que inclusive podem ser os mesmos, vamos
colocar “Contato”
64
Vamos, por enquanto, manter a descrição em branco.
Descendo um pouco mais selecione as opções “last page is thank you page”,
“mail notification” e preencha o campo seguinte com um e-mail válido
A primeira opção significa que usaremos a última página como um

agradecimento pela mensagem enviada, falaremos mais sobre isso adiante
Finalmente, na última parte, temos a possibilidade de mostrar o botão “submit”,

usar paginação (caso tenhamos mais de uma página para completar o
formulário) e também um botão “clear” para limpar as informações
Vamos manter somente o primeiro ativado e alterar o nome para “enviar”

conforme imagem abaixo:
Feito isso, use o botão Save Properties para guardar as alterações.
65
Obs: Sempre que fizermos qualquer alteração, precisamos pressionar esse
botão antes mesmo de salvar o formulário
Agora que nossa configuração inicial está pronta, vamos criar a primeira
página, basta clicar no primeiro botão laranja, chamado New Page
Como já citado, a página serve somente como um artifício de organização,

sendo assim, não é preciso fazer nada aqui, exceto clicar no botão New Section
Perceba que só é possível criar páginas se estivermos com a área de

configuração inicial selecionada e só é possível criar seções se estivermos com
uma página selecionada. Um depende do outro.
Tecnicamente, uma seção tem basicamente a mesma função de uma página,

ou seja, organizar conteúdo. A diferença é que podemos ter várias seções
dentro de uma página, contudo, nesse exemplo usaremos somente uma.
Nessa tela, é importante nos atentarmos para os campos.
Type: Se estiver selecionado como Normal, os campos irão simplesmente

aparecer na tela já na opção FieldSet, haverá uma borda em volta de toda
seção
Display Type: Na opção padrão (Wrap after each element), cada elemento de
dentro da seção aparecerá embaixo do outro já em All in a Row, o próprio
breezing tentará organizar as informações e vez ou outra colocará um campo
ao lado do outro.
Title: É o nome da seção, e dependendo das opções escolhidas acima, ele irá
aparecer no topo do formulário.
Section Name: É o nome que será armazenado no banco de dados, podemos

simplesmente copiar o que colocarmos no campo anterior
Vamos configurar inicialmente conforme figura abaixo:
Não esqueça de clicar em Save Properties
66
Vamos clicar em “New Element” para criarmos nosso primeiro campo.
A configuração é bem simples, o primeiro campo (Type) serve para definirmos

qual será o tipo que iremos usar. Existem diversas opções, desde uma caixa
simples de texto até um checkbox, select, botão que redireciona ao site do Pay
Pal ou quem sabe um campo para que o usuário anexo um arquivo e envie
junto com a mensagem
Em seguida, temos o Label e o Name sendo que o primeiro é o texto que

aparecerá no site e o segundo o nome do campo que será armazenado no
banco de dados, podemos usar o mesmo texto, contudo, no caso do Name não
é possível usar espaços ou acentos.
O campo Value serve para deixarmos algum número ou texto padrão dentro
da área, pode servir como uma forma de explicar o tipo de conteúdo ou como o
mesmo deve ser inserido.
Size: Aqui definimos o tamanho do campo que deve ser em pixel (caso fique
em branco, utilizará o espaço do template), já o Max lenght serve para
definirmos o número máximo de caracteres que serão aceitos
Basicamente, boa parte dos campos possui esses itens, em nosso exemplo,
vamos fazer um formulário simples, com um campo para nome, outro para e-
mail e um para inserir uma mensagem
Vamos começar pelo Nome, o campo será o Text-Field, observe a imagem

abaixo e veja como iremos preencher esse primeiro elemento, é muito simples!
67
Muito bem, agora temos nosso primeiro campo criado.
Se tentarmos clicar em “New Element” receberemos uma mensagem de erro,

afinal, não é possível criar um novo elemento dentro de outro, portanto,
selecione a seção (Fale Conosco) e agora sim, podemos criar um novo
elemento
Vamos criar um campo para o usuário digitar o e-mail.

O Tipo será text Field, na verdade, nada muda em comparação ao elemento
anterior:
68
Agora vamos criar um campo para que o usuário possa colocar uma
mensagem. Iniciamos criando um novo elemento e alterando o Type para
“Text Area”. Também vamos preencher o campo height, veja na imagem
abaixo:
Se tudo estiver correto, a estrutura de nosso formulário estará como na figura

apresentada abaixo:
Tudo certo? Ainda não!
Lembre-se que ativamos um item que permite usarmos a última página para
uma mensagem de agradecimento? Mas como fazer isso se só temos uma
página? Simples! Vamos criar outra, afinal se só tivemos duas páginas, qual
será a última? A segunda!
Selecione a área de gerenciamento (contato) e clique no botão “New Page”
69
Agora temos uma segunda e última página
Não precisamos criar nenhuma seção ou elemento, pois ela servirá somente
para mostrar uma mensagem, sendo assim, com a Page 2 selecionada, clique
em Edit
Na próxima tela, crie uma mensagem que aparecerá quando o formulário for
enviado, em seguida salve para fechar a mesma
Finalmente vamos clicar no botão ”Save” na aba central
Conectando o Breezing Forms a um item de menu
Sendo o BreezingForms um componente, isso significa que para apresentá-lo,

eu preciso conectar a um item de menu.
Faça o seguinte, acesse o Item Menu – Main Menu – Adicionar Item de Menu
No campo título, escreva “Fale Conosco”, em seguida, no campo “Tipo de Item

de Menu”, clique em Selecionar
70
Perceba que temos uma nova opção, chamada BreezingForms, ao clicar nela,
escolha a opção “Add Form”
Após o carregamento da página, clique na aba Add Form

No campo Form Name, vamos colocar o nome do nosso formulário que
acabamos de criar (contato). Por fim, ignore as outras opções
Vamos clicar em Salvar e Fechar e testar nosso formulário no Front-End
Claro que, apesar da frase de agradecimento aparecer, a mensagem não

chegará ao e-mail cadastrado pelo fato de estarmos trabalhando em um
servidor local
Mais algumas dicas sobre o BreezingForms
Vamos personalizar nosso formulário e melhorar o gerenciamento do mesmo.

Acesse o Componente BreezingForms
Antes de tudo, perceba que o os dados do teste realizado no front-end já se

encontram em nosso Manage Records e podem a qualquer momento ser
exportados.
71
Clique na segunda opção do menu lateral Manage Forms
Caso não apareça o formulário criado anteriormente, clique em Package e

selecione QuickModeForms
Clique no nome do formulário para ter acesso a ele

Logo na tela de configuração inicial, altere a aba de Properties para Advanced
Logo abaixo temos o campo “theme”, nele podemos alterar o visual de nosso
formulário e deixá-lo mais profissional
72
Outra opção extremamente importante é determinar que um campo será de
preenchimento obrigatório, veja como é simples:
Vamos fazer esse processo no campo Nome
Clique sobre o elemento Nome (caso esteja na aba Advanced, retorne para
Properties) e vá até o fim da janela para encontrar a opção Required.
Selecionando ela, teremos um campo obrigatório.
Perceba que o título dessa área é Validation, importante dizer que há outras
opções extremamente funcionais para gerenciar o conteúdo de cada campo o
que também auxilia na segurança e integridade dos dados
Por exemplo, vamos adicionar uma regra ao nosso campo E-mail, para que o
nosso formulário aceite somente e-mails válidos (ou seja, com o @ e sufixo
adequado)
Acesso o item E-mail e vamos novamente até o fim da página (aproveite e

também selecione o item Required)
Logo abaixo temos uma opção chamada Validation, onde, por padrão está
como “None”, altere para Library automaticamente irá aparecer dois novos
campos, o primeiro serve para escrevermos nossa mensagem personalizada de
erro.
73
O último serve para fazer a verificação, perceba que existem diversos tipos,
como verificar se o usuário realmente digitou alguma informação, validação de
data, texto e no nosso caso, validação de e-mail
Salve e faça os testes no Front-End
74
Procure no JED ou diretamente nos dispositivos de busca uma extensão que
puxe vídeos do Youtube (referente o tema de seu site) e mostre os mesmos
através de um novo link chamado Traillers, contudo, faça com que esse mesmo
botão só possa ser visualizado por quem estiver logado em seu site.
75
Aula 15 - TEMPLATES
Conforme já explicado anteriormente, um template vem a ser a estrutura do
designer que utilizamos para inserir as informações que desejamos (apresentar
componentes, módulos, artigos, etc.)
Vimos que o Joomla, por padrão, vem acompanhado de dois templates, sendo
um deles o Protostar. Pois bem, assim como qualquer extensão, também é
possível realizar o download de templates prontos e usá-los conforme
necessidade de nosso projeto, em geral, esses mesmos templates já possuem
um designer específico e direcionado para um segmento, como imobiliária,
restaurante, consultório, petshop, etc.
Em muitos casos, esses templates vem inclusive acompanhados de

componentes e módulos, dessa forma, basta fazer as alterações e trocar o
conteúdo padrão. No entanto, em diversas oportunidades, será preciso adaptar
um layout criado de forma original para um template, nesse caso, a melhor
opção seria usar um Framework, mas qual a diferença?
FrameWorks são estruturas base com posições pré-definidas e outras opções

(estilos pré-definidos, responsive, compressão e redução de ficheiros, etc.) que
servem de base para a integração de designs ou para a estruturação de
templates, ou seja, quando temos um design que algum webdesigner
desenvolveu e temos que o passar para o Joomla, então utilizaremos uma
framework para a implementação desse design. Outra hipotese para a sua
utilização é quando queremos desenvolver um template e utilizamos como base
a framework já existente.
Templates são webdesigns já desenvolvidos prontos a utilizar num site. Os

templates podem ter uma framework de base ou não, fazendo com que por
vezes seja complicado modificar o design ou estrutura dos mesmos sem
recorrer ao código. A grande maioria dos templates está pré-definida e deve-se
ter em atenção que alterações subjstanciais serão dificeis podendo ser mais
facil por vezes desenvolver o template de origem.
Por norma existem frameworks gratis para Joomla, sob licença GPL
e templates gratis para Joomla ou pagos, sendo que no caso de serem
gratis é frequente ser necessário manter links para os sites de quem o
desenvolveu. Os templates pagos para Joomla são também estes mais
apelativos como é bastante óbvio.
76
Em termos de preços existem várias opções disponiveis no mercado, por vezes
paga-se por um único template, outras vezes paga-se por um conjunto de
templates (packs de 3 ou mais), sendo que para quem só quer um, é ingrato
ter que pagar por 3, no entanto os preços são bastante acessiveis e pode-se
dizer que vão desde os 30€ aos 100€, que comparando com um design
profissional, estes valores não são nada, pois considera-se que um webdesign
tem valores acima dos 250€.
Recomendações:
- Utilize uma framework para Joomla no caso de querer desenvolver um design

ou adaptar um design já existente;
- Utilize um template quando pretender um design simples e elegante a baixo

custo;
O link abaixo possui uma matéria e dicas interessantes sobre Templates e

Framework, vale a pena conferir:
http://leomiranda.com/desenvolvimento/140-curso-template-joomla-
frameworks
Como escolher templates para Joomla

1) Existem várias opções de templates, muitas delas são focadas para um tipo
de site alvo, por ex: culinária, portfólios, jornais, blogs, lojas, moveis, etc.
2) Veja os preços, leia sempre as licenças de utilização e compare os templates;
3) É importante lembrar que quando se vê os demos de templates, está a ver-

se o template como um todo. Deve imaginar o site com todas as posições que
estão no demo, de outra forma e se começa a remover posições ou alterar
muito o template, pode acabar com outra coisa totalmente diferente que não
tem lógica nenhuma e pode ficar horrivél.
4) Se já tem um logotipo, imagine sempre o logotipo sobre o fundo do template

e verifique se condiz. Não cometa o erro de ter um template que dá bem com
um fundo branco e compre um template com fundo preto com o objectivo de
mudar o fundo para branco, isto pode ser desastroso. Veja também a forma do
logotipo e se fica bem sobre o template, ou seja, se é mais horizontal ou mais
vertical.
5) Verifique sempre se o template serve na versão do Joomla que está a usar.
77
6) Hoje em dia é normal os sites serem responsives, ou seja, ajustarem-se aos
tamanhos dos ecrans, tente adquirir um template desses, é sempre uma mais
valia.
Baixando e instalado um novo template
Agora iremos fazer o download de um novo template com framework em

seguida configurar o mesmo e aproveitar para analisar alguns conceitos.
O escolhido será o Yoo Master da empresa Yoo Theme, também é possível

encontrar o link pelo JED, apesar que, se tratando de templates, o ideal é
mesmo buscarmos pelos sites de pesquisa.
Você também pode acessar diretamente o link abaixo:
http://www.yootheme.com/themes/warp-framework
Essa página mostra as especificações dos templates dessa empresa, clique

diretamente no botão de download
Agora temos diversas opções, quase todos são pagos, porém a versão gratuita
do Master é exatamente o que precisamos, procure e clique sobre ela para
fazer o download da versão para o joomla 3.
78
Ao fazer o download, vamos realizar a instalação, para isso basta acessar o
Gerenciador de Extensões em nosso back-end.
Com a instalação feita, acesse Extensões – Gerenciador de Temas e altere o

template para Yoo Master
Feito isso, vamos verificar o front-end
Perceba que somente o(s) artigo(s) em destaque estão aparecendo. Os

módulos de menu, login e até mesmo os banners desapareceram. Na verdade,
eles ainda existem em nosso joomla, o que ocorre é que eles estão
configurados para serem apresentados em posições que pertencem ao
Protostar.
O fato do(s) artigo(s) em destaque (caso haja algum), ser o único elemento
que aparece, reforça o que já foi explicado anteriormente: “Todo e qualquer
Template possui uma área de conteúdo, chamada content é nela que sempre
teremos a apresentação dos artigos e componentes”
Podemos fazer o mesmo processo do capítulo 10 e analisar as posições do

Template Yoo Master, no entanto, sempre que utilizamos
templates/framewroks de terceiros, é possível encontrar a documentação dos
mesmos e nela, uma demonstração mais clara de suas posições, veja abaixo o
designer deste que acabamos de instalar:
79
Apenas uma observação: Nas novas versões desse template, ao invés de Inner
Top e Inner Bottom, os nomes são Main Top e Main Bottom
Antes de efetuarmos a migração de nosso conteúdo, precisamos compreender

alguns conceitos sobre o layout do YooMaster.
Áreas Laterais: Perceba que na figura que mostra as áreas do template,

temos em laranja SideBar A e SideBar B, o interessante é que ambos aparecem
dos dois lados, o que isso significa?
Veremos adiante que, na verdade, é possível escolher em qual lado queremos

qualquer uma das duas barras laterais, é possível determinar se cada uma
estará de um lado do content ou se ambas estarão do mesmo lado. Lembrando
que ao determinar isso, será preciso manter essa configuração para o restante
do desenvolvimento do site
Área de Conteúdo: Perceba que é claramente possível identificar onde está o

content desse template, em geral, eles se encontram ao centro e com o
Yoomaster não é diferente, ele se encontra no “System Output”
Áreas Fixas: As áreas que não possuem configurações de layout são as que
estão em cinza, apesar de estarem bem distribuídas, devem ser utilizadas
quando quisermos algo semelhante as suas posições de origem. Elas não se
adaptam a um layout responsivo (falaremos sobre isso em outro capítulo)
Área Gerenciável: Elas se encontram em azul e além de se adaptarem a um

layout responsivo podem organizar os módulos apresentados de forma que ao
invés de serem apresentados um embaixo do outro (padrão das tag’s <div’s>),
podem posicionar um ao lado do outro.
Vejamos onde podemos ver e alterar tais configurações: acesse Extensões –

Gerenciador de Temas e clique sobre o Layout YooMaster.
Em seguida, acesse a aba “Opções”
Esse template possui uma extensa lista de parametrizações. Não iremos

analisar uma por uma, ao invés disso iremos pontuar as mais usadas.
Na primeira tela, por hora, o único item que mencionaremos se chama Social
Buttons, ele fica quase no fim dessa área, é possível ativarmos botões de
“curtir” para as redes sociais mostradas na imagem a seguir
80
De volta ao topo da página, no menu lateral, escolha a opção Layouts
Nessa nova tela, desça até a opção Sidebars, é aqui que podemos escolher o
tamanho da área que cada sidebar irá ocupar bem como se serão posicionadas
a direita, esquerda ou cada uma em um lado diferente.
81
Descendo um pouco mais encontramos as opções relacionadas ao Grid, aqui
podemos enxergar cada uma das posições que podem ser parametrizadas (as
que estavam em azul na imagem que apresenta as áreas do template)
Por padrão, o Layout de todas está configurado como Parallel, isso significa que
ao colocar módulos nessas posições, eles ficarão um ao lado do outro. Existe
outras duas possibilidades:
Stacked: Na qual um módulo irá para baixo do outro
First Double: O primeiro módulo irá ocupar o dobro de um espaço comum e o

restante ficará ao lado
Por hora, essas são as parametrizações que iremos abordar.
Adaptando o conteúdo ao novo template
Baseado na imagem mostrada com as posições do YooMaster, vamos adaptar

nosso conteúdo, sugerimos o seguinte:
1 – Não use as posições que estão nas áreas em cinza
2 – Coloque os banners principais na posição Top A ou Top B
3 – O Conteúdo que estava na aba lateral, no caso o Menu, o Formulário de

Login e qualquer outro Módulo pode ser encaixada no Sidebar A ou Sidebar B,
tudo irá depender de como você configurar dentro do template.
É muito importante realizarmos esse processo antes de seguirmos para o

próximo capítulo
82
Aula 16 - ALTERANDO O CSS COM
FIREBUG
Você já deve ter percebido que por mais que o joomla possua excelentes
vantagens e grandes extensões ainda sofre em matéria de designer, tudo
porque, até mesmo os componentes e módulos possuem seus próprios layouts.
Isso acaba sendo um duro golpe para aqueles que gostariam de se embasar
somente nas ferramentas de gerenciamento o que, em tese, ainda pode render
excelentes projetos, contudo, é fato que o conhecimento em CSS e PHP podem
potencializar os trabalhos do joomla.
Sem esse conhecimento, corremos o risco de, ainda que tenhamos excelentes
extensões, terminaremos com um site “quadrado”.
Claro que isso se aplica muito mais a frameworks de templates, sobretudo os
que chamamos de Template Blank, ou seja, que trazem apenas suas posições
configuradas, restando ao desenvolvedor preencha-las e readaptá-las, se
necessário. É o caso, justamente do YooMaster
Identificando o CSS
Quando realizamos o download de qualquer versão do joomla, ele vem

acompanhado com diversas pastas que são usadas para todo gerenciamento do
sistema. Também quando instalamos alguma extensão, ela vem acompanhada
de diversos diretórios e em meio a todos eles, existem os arquivos em CSS.
Sabemos que são esses arquivos que cuidam dos estilos do layout de cada
elemento e com o joomla, não é diferente.
Para identificar o CSS de cada parte de nosso joomla, incluindo seus

componentes e módulos não é complicado, na verdade, é bastante simples.
Em nosso front-end, basta clicarmos com o botão direito do mouse em
qualquer lugar e acessarmos a opção “Inspecionar Elemento”
83
Feito isso, teremos a possibilidade de visualizar não somente o código fonte,
mas também o CSS que gerencia os elementos de cada área do template, para
isso, basta passar o mouse entre as linhas do HTML ou clicar na Lupa na parte
inferior esquerda e navegar pelo próprio site.
Ao achar o elemento que desejamos alterar, basta clicar sobre ele

Abaixo uma imagem da janela onde podemos verificar as linhas de código em
CSS
Por fim, o grande detalhe está no fato de descobrirmos a exatidão do arquivo

CSS do item que desejamos modificar, perceba que é perfeitamente possível
fazer essa verificação, basta passar o mouse em cima da descrição superior em
cada bloco de código CSS conforme imagem que se segue
84
A imagem anterior mostra que se quisermos alterar o elemento selecionado
precisaremos ir até o arquivo chamado theme.css que se encontra na linha
indicada, lembrando que “localhost” significa c:/xampp/htdocs
Utilizando o Firebug
É muito importante encontrar o CSS, porém, é muito difícil ter uma visão clara
de quais alterações devem ser feitas, ou ainda, tornar o processo mais ágil do
que efetuar diversos testes.
Vamos agora dar um exemplo de como utilizar com mais precisão esse artifício
usando para isso uma extensão do navegador Mozilla Firefox (caso não tenha,
instale em seu computador)
O nome da extensão é Firebug e é muito simples de instalar, basta procurar por

ela em qualquer site de busca e acessar o site oficial, ou fazer isso diretamente
pelo link abaixo:
https://addons.mozilla.org/pt-br/firefox/addon/firebug/
Ao acessar, clique no botão indicado na imagem abaixo
Com o firebug instalado, agora poderemos não só verificar a linha de código em

CSS, mas sugerir alterações em tempo real o que facilitará muito nosso
trabalho, obviamente que você precisará estar acessando seu site pelo Mozilla
Firefox.
85
Para deixarmos mais claro nosso exemplo, vamos alterar a maneira como os
títulos dos artigos são apresentados, vejamos, o processo é semelhante quando
inspecionamos o elemento na página anterior, mas dessa vez, iremos clicar com
o botão direito e selecionar “inspecionar elemento com firebug”
Perceba que estamos focando nossa inspeção justamente em um dos títulos de

nossos artigos (basta selecionarmos um deles)
Veja que a linha de código aponta claramente uma Tag H1, mas para nós, o
que interessa é o CSS, então vamos dar uma olhada na janela lateral
86
Veja que o primeiro bloco de código que se apresenta com o título selecionado
pelo Firebug traz quatro linhas (font-size, font-weight, line-height e text-
transform)
Diferentemente de quando usamos a opção inspecionar elemento pela

primeira vez, com o firebug é possível, conforme explicado anteriormente,
sugerir alterações.
Vamos então fazer o seguinte:
Clique na linha onde está o “font-size” e altere de 36px para 20px
Perceba que a mudança é instantânea.
O interessante é que podemos não somente alterar as linhas que se encontram

no bloco de código, mas também adicionar estilo, por exemplo, vamos inserir
uma cor nos títulos, para isso, basta dar um duplo clique dentro do bloco de
códigos
Perceba novamente que a mudança é instantânea.
87
Também podemos sugerir a retirada de alguma linha, bastando clicar no botão
vermelho que sempre aparece ao lado de qualquer código:
É muito importante saber que com o firebug podemos somente sugerir

alterações, ou seja, se atualizarmos a página, tudo volta ao normal. Para que
elas realmente aconteçam é preciso alterar o arquivo CSS na linha indicada no
bloco de código
O Firebug é importante para que possamos visualizar “ao vivo” as alterações

que desejamos, posteriormente, anotar e executar diretamente no arquivo para
que dessa forma, funcione!
Em nosso exemplo, a linha que fizemos as alterações é a 1507 do arquivo

theme.css, mas como encontrar esse arquivo? Muito simples! Basta passar o
mouse sobre a descrição do local e então teremos o caminho completo
Lembrando que localhost vem a ser c:/xampp/htdocs

Encontrando o arquivo, vamos abrir usando o notepad++ e ir até a linha
desejada:
88
Agora sim, fazemos as alterações já testadas através do firebug e depois basta
salvar o arquivo para visualizar o resultado no FrontEnd
Queremos frisar que as alterações nos elementos de CSS podem ser não
somente em elementos como cor, tamanho da fonte ou background, mas
também em espaçamentos, margens, bordas, etc.
Contudo, em diversas ocasiões não será tão simples encontrar o ponto exato
onde deveremos efetuar tais mudanças, mesmo com o firebug, será preciso
realizar testes e mais testes, sobretudo em tags que estão em cascata (por
exemplo, onde existe uma tag <a> dentro de uma <li> que por sua vez está
dentro de uma tag <div>)
Como saber o local onde devemos mexer? Não há uma regra específica, mesmo
porque, em alguns momentos ao alterar algum elemento, estaremos alterando
outro, por isso é muito importante estar atento ao site como um todo, sem
dúvida, um exercício de paciência e de prática!
89
Utilize o Firebug para identificar a área que gerencia o menu, teste algumas
alterações como cor do link e do background e em seguida execute as mesmas
no arquivo indicado
90
Aula 18 - OTIMIZAÇÃO E SEGURANÇA
Dicas de SEO
O significado de SEO é Search Engine Optimization. Em português ele é

conhecido como Otimização de Sites, MOB e Otimização para Buscas. O SEO
nada mais é do que a otimização de uma página (ou até do site inteiro) para
ser melhor compreendido pelas ferramentas de busca. A conseqüência da
utilização das técnicas de SEO é o melhor posicionamento de um site em uma
página de resultados de uma busca. Por exemplo, ao pesquisar no Google por
“Marketing de Busca”, o primeiro resultado é este site. O SEO é uma prática
sem garantias, ou seja, nenhuma empresa ou pessoa pode garantir que seu
site fique em primeiro em uma busca, pois o único capaz disto seria o próprio
site de busca como o Google ou o Yahoo.
Os fatores que influenciam o posicionamento das páginas são guardado a sete

chaves pelos site de busca. Porém, ao longo do tempo, foi possível identificar
as melhores práticas que se resumem em empregar o bom senso na criação e
estruturação de um site. O SEO também depende da palavra-chave que é o
termo que você usa em um busca. Dependendo de quais palavras você utiliza,
serão retornadas páginas diferentes em posições diferentes.
O SEO pode ser dividido em duas partes. Fatores internos e fatores externos.
Os internos são relacionados ao site. Alguns exemplos são urls claras, utilização
dos padrões web, títulos de página racionais e a correta utilização das tags html
que é linguagem utilizada para construir páginas web. Já a parte externa
analisa como os outros sites se relacionam com o site. Os exemplos são
quantidade de links apontando para o site, quais sites apontam o site e o
conteúdo do link apontado. Dependendo destes fatores, as páginas são
pontuadas pelos sites de busca para que ele possa determinar a relevância da
pagina e quais as palavras-chave relacionadas a ela. O Google utiliza um
sistema de pontuação de 0 a 10 que é o PageRank.
Como usar esses conceitos no joomla?
1 - Título e Descrição geral em Configuração Global
Apesar de existir esses campos na instalação, é bem capaz de ter passado

direto e não ter preenchido corretamente, ou muita coisa pode ter mudado até
o lançamento do site. Por isso, não esqueça de entrar em Site => Configuração
Global e preencher corretamente os dados do seu site. Seja breve e lembre-se
que o título e as primeiras palavras da descrição irão aparecer como resumo do
seu link no Google, quanto mais interessante mais cliques irá ter.
91
2 - Urls amigáveis em Configuração Global
Mesmo sendo algo simples, ainda vejo muitos sites em Joomla com o
"index.php" na URL amigável. Para retirar ele a opção fica em baixo da opção
de desativar a URL amigável, também na Configuração Global. Acontece que se
você não renomear o arquivo htaccess.txt para .htaccess, irá dá erro nos links,
mas o procedimento é muito simples, abra o FTP na pasta do seu site e
renomeie esse arquivo, tire o ".txt" do final e adicione um ponto "." no início,
ficando ".htaccess", caso o mod_rewrite do apache esteja ativado, irá
funcionar. Se nao funcionar no seu servidor local, não esqueça de ativar na
Web.
A partir do Joomla 1.5 as Urls amigáveis do Joomla melhoraram muito, nas

novas versões 3.x estão funcionando perfeitamente para as extensões nativas
do Joomla. Para trabalhar com outras extensões, é possível que precise de um
componente SEF, iremos falar dele logo mais.
Para editar as URLs dos Artigos, edite o campo Alias, logo abaixo do Título do
Artigo.
3 - Titles nos Links de Menus
Se você não tiver utilizando alguma extensão específica para trabalhar com os
Titles das páginas (texto que fica na barrinha ou aba do navegador), você pode
editar esse parâmetro no Link de Menu, clicando no Slide "Opçôes de Exibição
de Página", no mesmo local onde retiramos o título "Home" na página inicial do
Joomla. Em alguns componentes você poderá mudar o Título da página por aí
também, é um bom recurso para otimizar algumas páginas.
4 - Descrição e Tags nos Artigos
Nos Artigos Joomla e em outros componentes de conteúdos exitem campos

para colocar a Descrição (Meta Description), geralmente usada para mostrar os
resultados nos buscadores, assim como a descrição geral do site. Além das
descrições, a partir do Joomla 3.1 temos o componente de Tags, é um ótimo
recurso para fazer ligações entre as páginas do site, otimizando também para
os buscadores. Além de funcionar nos Artigos, existem várias outras extensões
compatíveis com esse recurso, criando mais ligações entre outros conteúdos no
site.
92
Mas o principal e que deve ser observado por qualquer site, independente de
ser feito ou não com joomla é o CONTEÚDO:
- Para que serve o seu site?

- Quem visitar o seu site irá realmente aprender ou saber mais sobre o assunto
das suas palavras-chaves?
Essas são perguntas que devem ser respondidas com implementação, se você
acha que o conteúdo do seu ainda é muito superficial, dedique mais tempo
para criar conteúdos únicos. Isso é importante, o Google irá saber se você
copiar conteúdo de outros sites, por isso, tente deixar o mais
original possível.
Backup
Essa palavra é bem conhecida e sabemos a importância que há em realizar

backup dos arquivos de nosso computador, quando de trata de um site, a
situação não é diferente.
Muitas hospedagens realizam esse tipo de serviço, mas se tratando do joomla,

é interessante realizarmos nosso próprio processo de backup que inclusive
possui duas funções distintas.
A primeira é obviamente resguardar nossos dados e a segunda é realizar o

processo de migração de um site joomla.
Para a primeira, usamos um componente chamado Akeeba Backup, é gratuita e

pode ser baixada direto do site oficial.
https://www.akeebabackup.com
Procure por Akeeba Backup Core
93
A instalação é exatamente como qualquer outra extensão e após a mesma,
podemos acessar o Akeeba em nossa área de componentes
Aceite o termo de licença e confirme os itens de configuração inicial no fim da

página
Não há necessidade de alterar nenhuma das configurações pré-definidas.

Talvez você deseje alterar o caminho de destino do backup, que por padrão,
está em:
C:\xampp\htdocs\filme/administrator/components/com_akeeba/backup
Para realizar o backup basta clicar no botão Backup Now, ele solicitará uma
descrição (que pode permanecer em branco) antes de iniciar o processo.
Quando finalizado, o arquivo de extensão JPA estará na pasta citada acima
Restaurando o Backup
Esse processo serve tanto para restaurarmos um site que já existia e que por
algum problema não pode mais ser acessado, ou para realizarmos o processo
de migração, por exemplo, de um site que foi feito em um servidor local e
agora é preciso colocá-lo na internet
Para ambos os casos, necessitamos, obviamente, ter em mãos o arquivo de

backup
94
O segundo passo, é criar em nossa hospedagem online um Banco de Dados
(exatamente como fazemos no PHPMyAdmin do Xampp), a própria
hospedagem fornecerá o host para conexão.
O terceiro passo é termos um programa que realize o acesso via FTP com o site
de destino (falaremos sobre um desses softwares em seguida)
Por fim, necessitaremos de um pacote usado justamente para a restauração de

sites em joomla, seu nome é Kickstart que também pode ser encontrado no
mesmo site do Akeeba, procure por Kickstart Core
Ao descompactar a pasta, perceba que existem diversos arquivos, porém, a

maioria se refere ao idioma da instalação, ou seja, iremos selecionar somente
quatro arquivos e fazer o upload deles para a pasta principal de nosso site
através de um programa de conexão FTP
Por fim, coloque também na pasta de seu site o arquivo de backup do joomla.
95
Atenção: Portanto, na pasta principal do seu site deverá haver somente os 4
arquivos do pacote kickstart (contando com o idioma) e o arquivo de backup,
totalizando em 5 arquivos
Agora, basta acessar o endereço do seu site, colocando “/kickstart.php” (sem

aspas) ao término do mesmo, ficando algo como:
http://www.filmes.com.br/kickstart.php
Se tudo estiver OK, aparecerá uma mensagem de instruções referente o

Kickstart e em seguida ele começará a realizar a restauração
OBS: Será preciso durante o processo, colocar as informações do banco de

dados criado no segundo passo e em hipótese alguma altere o campo “prefixo
das tabelas” caso contrário, o site ficará desconfigurado.
Ao término do processo, assim como na instalação inicial do joomla, ele pedirá

para que você exclua a pasta “instalation”
Utilizando o FileZilla
Antes de falarmos especificamente sobre o software Filezilla, precisamos

entender o que significa o protocolo FTP
Para quem trabalha com criação de sites e blogs já está bem familiarizado
como o termo FTP, porém para os iniciantes, este termo parece um bicho de
sete cabeças, mais será? Então, o que significa FTP?
FTP - File Transfer Protocol (Protocolo de Transferência de Arquivos), nada

mais é do que um sistema de transferência de arquivos cliente / servidor.
Isto quer dizer, que utilizando este protocolo ("protocolo" = conjunto de

regras ou normas que governam as interações entre computadores) você
poderá enviar e receber arquivos do seu computador (cliente) para o host
(servidor) onde fica hospedado o seu site ou blog.
O FTP é a forma mais rápida e mais fácil de transferir arquivos, e hoje a mais
utilizada na internet.
Para que você utilize o FTP através de programas como o Filezilla,

SmartFTP, CoreFTP entre outros, é necessário você conhecer
o Host (caminho para localizar o servidor), login (nome do usuário) e
a senha. Estas informações são enviadas pelo administrador do servidor onde
você hospeda o seu site
O FileZilla é um dos mais utilizados e pode ser baixado em diversos sites, para
utilizar o processo é bem simples, vejamos:
96
Quando contratamos um serviço de hospedagem, recebemos os dados de
acesso ao FTP de nosso site (na verdade, login e senha).
O host, nada mais é que o nome do site (sem o “www”)
Em geral, o campo “porta” deve ser preenchido com o número 21, todavia, se o
mesmo ficar em branco, a conexão funcionará da mesma forma
Com a conexão estabelecida, será possível visualizar na área inferior direita as
pastas do site e fazer downloads ou uploads.
É possível, por exemplo, iniciar um projeto já de forma online, bastando enviar

O CONTEÚDO da pasta do joomla para dentro da pasta principal do site, dessa
forma, ao acessá-lo pela primeira vez, aparecerá a tela de configuração do
sistema
Adaptando o site para dispositivos móveis
O que é um site responsivo?

Um site é considerado responsivo quando consegue se adaptar as diferentes
resoluções de telas e dispositivos. Isso quer dizer que caso você acesse um site
responsivo em um smartphone todo o layout se adaptará ao tamanho da tela
priorizando os elementos principais do seu site
Os sites responsivos possuem inúmeras vantagens e garantem que todo o

conteúdo do seu site esteja disponível para todos os dispositivos que o usuário
preferir utilizar. A relação custo/benefício é bastante considerável e sites já
existentes podem ser convertidos para responsivo.
Números sobre o usos de smartphones

check 39% da população brasileira possui um smartphone
check 82% destas pessoas pesquisam informações de produto
check 30% efetuam compras pelos smartphones
Atualmente, desenvolver um site responsivo ainda é um diferencial que pode

elevar o valor de um projeto. O Joomla possui diversos templates que são
responsivos bem como componentes e módulos que também se adaptam a
dispositivos móveis.
97
Iremos dar apenas um pequeno exemplo do qual poderoso pode ser uma
extensão joomla relacionada a essas técnicas, o template que instalamos como
exemplo em um de nossos capítulos (Yoo Master) é responsivo e possui uma
área de configuração muito interessante, vamos dar uma olhada
Acesse Extensões – Gerenciador de Temas e clique em YooMaster
Agora clique em Modules
Nessa tela são apresentados todos os módulos instalados e suas respectivas

posições, até ai, sem novidades, no entanto verifique a última coluna (display)
e perceba que existem três ícones, sendo um monitor, um tablet e um celular.
Por padrão, todos estão ativos, mas ao clicar é possível desativar a visualização
de um determinado módulo em uma, duas ou mesmo nas três telas (o que faria
com que o módulo não fosse mais visto)
Isso significa que é possível ter módulos que aparecerão somente em uma tela
semelhante ao tablet.
98
Mas qual a vantagem disso?
É preciso compreender que nem sempre todo o conteúdo que é visto em um

monitor deve ser apresentado em outras telas. Em outros dispositivos o que
vale é a rapidez na qual encontramos as informações, essa forma, é possível
filtrar e permitir que somente o conteúdo realmente relevante seja visto.
Outro ponto importante é que pode haver algum módulo que não seja
responsivo e deixá-lo ativo em outras telas faria com que o mesmo aparecesse
distorcido, sendo assim, seria mais interessante apresentar esse conteúdo em
outro módulo que seja responsivo e apresentá-lo nas outras telas.
Enfim, existem diversas possibilidades para que possamos adaptar o site e

apresentá-lo de forma a ter uma ótima usabilidade. Lembrando que citamos
somente algumas parametrização com o YooMaster, sendo que existem
centenas de outras extensões que possibilitam desenvolvermos um bom site
responsivo
99

Curso completo de Joomla - Apostila

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso completo de Joomla - Apostila

Enviado por

Direitos autorais:

Formatos disponíveis

Apostila

CMS / Gerenciador de Conteúdo

Os principais benefícios do CMS

Existem vários tipos de CMS´s?

Qualquer site pode ser construído com um CMS?

A parte visual pode ser totalmente remodelada,independente da utilização de

O sistema - organizado por design, programação e conteúdo -, possibilita a criação

A grande sacada do Joomla! são suas diversas extensões, componentes e

Breve histórico do Joomla

Esses desenvolvedores, preocupados com a integridade do projeto e com o

1 – Pacote Joomla que pode ser baixado diretamente do site oficial

Importante citar que podemos utilizar o joomla tanto em um servidor local

Realizando o Download do Joomla

Acesse o site oficial (http://www.joomla.org). Procure a sessão de downloads, e

Download e Configuração do XAMPP

Existem diversas opções de servidores web disponíveis na internet, na verdade,

Para usar o joomla em nosso computador necessitaremos de um servidor web e

Temos já na tela inicial as versões mais recentes para diversos sistemas

Para isso, clique no botão de download

Vamos baixar a versão 1.8.2

Inclusive, essa versão funciona bem em sistemas de 64bit

No momento de instalar, não altere a pasta de instalação padrão, ao término da

Para que o joomla consiga rodar, é preciso termos o Apache e o MySQL

Criando um Bando de Dados no PHPMyAdmin

Conforme já explicado anteriormente, o joomla é desenvolvido totalmente em

Para a instalação e utilização do joomla, necessitaremos apenas da criação de

Feito isso, acesse o PhpMyAdmin que se encontra no menu “Tools”

IMPORANTE: No caso de aplicações online, é preciso verificar no painel de

Com o Xampp funcionando corretamente e com nossa base de dados criada,

O próximo passo é renomear o arquivo, use o nome do projeto/site que irá

Obs: Vamos aprender os conceitos e as principais ferramentas do joomla

Agora, descompacte o arquivo e teremos uma pasta chamada “filme”, dentro

Para iniciarmos a instalação, acesse o navegador e digite a seguinte linha:

Perceba que é possível ter diversos projetos armazenados em seu computador,

A primeira parte dele se refere as configurações principais, então vamos a elas:

Admin E-mail: Apesar de ser uma instalação offline, é obrigatório inserirmos

Admin Password: Nesse campo, inserimos a senha para acessar a área

Confirm Admin Password: Aqui devemos digitar novamente a senha do

A última opção dessa primeira etapa se refere à apresentação do site. É

Com tudo pronto, siga para a tela seguinte.

A segunda tela se refere a configuração da Base de Dados

Database Type: É possível escolher entre MySQL ou MySQLi, mas qual a

A partir de 2011 , os desenvolvedores normalmente usá-lo apenas quando se

Considerando que as versões atuais do Joomla necessitam do Php 5.3.9 ou

Host Name: Em aplicações offline, por padrão, usamos localhost, já em

Username: É o nome do usuário da base de dados, ao trabalhar offline,

Password: Aqui, deixamos em branco, em serviços de hospedagem é preciso

DataBase Name: O nome da base de dados criada no PhpMyAdmin, no nosso

Table Prefix: É recomendável não mexer nesse campo, o próprio joomla

Terminando de preencher os campos necessários, vamos para a última tela.

O item seguinte mostra a opção de enviar ou não as configurações por e-mail,

Com todas as verificações feitas, finalmente vamos clicar no botão Install

Removendo a pasta Installation

Ainda não acabou!

É possível remover a pasta indo até o caminho onde a mesma se encontra:

Agora sim, podemos prosseguir

Back-End – Vem a ser a área administrativa e toda interface utilizada para o

O joomla nos concede a possibilidade de trabalharmos com as duas áreas, ou

Para acessar o Front-End do nosso projeto, basta abrir o navegador e digitar:

Perceba que é o mesmo endereço que digitamos no início do processo de

É no back-end que passaremos mais de 90% do tempo, para acessar, digite em

Obs: Esse é um padrão para acesso a essa área, independente se o projeto é

Ao acessarmos, é necessário inserir o nome de usuário e senha que