Curso Joomla

Prévia do material em texto

1 
 
 
 
 
Apostila 
Curso de Joomla! 
 
 
 
 
 
 
 
 
 
 
 
 
2 
 
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 
3 
 
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 09 - TAREFA COMPLEMENTAR ............................................................................................ 47 
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 11 - TAREFA COMPLEMENTAR ............................................................................................ 55 
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 14 - TAREFA COMPLEMENTAR ............................................................................................ 75 
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 17 - TAREFA COMPLEMENTAR ............................................................................................ 90 
Aula 18 - OTIMIZAÇÃO E SEGURANÇA ........................................................................................ 91 
4 
 
Dicas de SEO ............................................................................................................................ 91 
Backup ..................................................................................................................................... 93 
Utilizando o FileZilla ................................................................................................................ 96 
Adaptando o site para dispositivos móveis ............................................................................. 97 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5 
 
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. 
6 
 
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. 
 
 
7 
 
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) 
8 
 
 
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 
 
 
9Obs: 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) 
 
 
 
10 
 
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 
11 
 
 
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 
 
12 
 
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. 
 
 
 
 
13 
 
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. 
 
14 
 
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 
 
 
 
15 
 
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ãoInstall 
 
 
 
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 
16 
 
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) 
 
 
17 
 
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 
 
18 
 
 
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: 
 
 
19 
 
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. 
 
 
20 
 
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 
 
 
 
 
21 
 
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 
 
 
 
22 
 
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 personalizadaque 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. 
 
 
23 
 
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 
 
 
 
 
 
 
 
24 
 
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. 
 
 
 
25 
 
 
 
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. 
 
 
 
 
 
 
 
26 
 
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. 
 
27 
 
 
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. 
 
28 
 
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. 
 
 
 
 
29 
 
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. 
 
 
 
 
 
 
 
 
 
30 
 
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. 
31 
 
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 
 
 
 
32 
 
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 
33 
 
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? 
34 
 
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 
 
 
 
 
 
35 
 
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, podemosgerenciar 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 
 
 
 
 
 
 
 
 
 
36 
 
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 
37 
 
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 
38 
 
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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39 
 
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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40 
 
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. 
 
 
41 
 
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) 
 
 
 
 
 
 
42 
 
 
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. 
 
43 
 
#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: 
 
44 
 
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 
 
 
45 
 
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 
 
 
46 
 
 
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” 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47 
 
Aula 09 - TAREFA COMPLEMENTAR 
 
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 
 
 
 
 
 
 
 
 
 
48 
 
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 
 
 
 
 
 
 
 
 
 
49 
 
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 
 
 
 
 
50 
 
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 
 
 
51 
 
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) 
 
 
 
 
 
 
52 
 
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 exatamenteo 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 
 
53 
 
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. 
 
54 
 
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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55 
 
Aula 11 - TAREFA COMPLEMENTAR 
 
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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56 
 
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 
 
 
 
57 
 
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 
 
 
 
58 
 
 
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 
 
 
59 
 
 
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? 
 
60 
 
 
 
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 maioriados 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. 
61 
 
 
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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62 
 
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”) 
 
 
 
 
 
63 
 
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 
64 
 
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” 
 
65 
 
 
 
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. 
66 
 
 
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