Valorizar o conhecimento

sobre marketing digital e

disseminar suas melhores
práticas, contribuindo com o
crescimento de profissionais e
empresas no Brasil.
Contatos

(11) 2872-8270
cursos@mirago.com.br
cursos.mirago.com.br

R. Eng. Francisco Azevedo, 547

Vila Madalena – São Paulo – SP

05030-010
O que é Joomla?

Joomla! (pronuncia-se djumla) é um Sistema de gestão de conteúdos

(Content Management System‐ CMS) desenvolvido a partir do CMS
Mambo.

O Joomla, como outros CMS,ajuda a resolver um problema muito

comum, porém que foi complexo durante muito tempo, a necessidade
de investir um custo alto em pessoas capacitadas para construir e
gerenciar um site ou portal.
Por que o Joomla?

l  Facilidade na inserção de conteúdo;

l  Número de colaboradores;
l  Diversidade de extensões;
l  Software Livre;
l  Otimização.
Open Source

Refere-se a software também conhecido por Software Livre.

Distribuição livre
A licença não deve restringir de nenhuma maneira a venda ou distribuição do
programa gratuitamente, como componente de outro programa ou não.

Código fonte
O programa deve incluir seu código fonte e deve permitir a sua distribuição também
na forma compilada. Se o programa não for distribuído com seu código fonte, deve
haver algum meio de se obter o mesmo seja via rede ou com custo apenas de
reprodução. O código deve ser legível e inteligível por qualquer programador.
Por onde começar?
Registro do domínio
Registro.br l  TAXI.BR Taxistas

l  COM.BR Atividades comerciais l  BLOG.BR Web logs

l  ECO.BR Atividades com foco eco-ambiental l  FLOG.BR Foto logs

l  EMP.BR Pequenas e micro-empresas l  VLOG.BR Vídeo logs

l  NET.BR Atividades comerciais l  WIKI.BR Páginas do tipo 'wiki'

l  EDU.BR Entidades de ensino superior

l  GOV.BR Entidades do governo federal

l  ORG.BR Entidades não governamentais

sem fins lucrativos

l  TUR.BR Entidades da área de turismo

l  TV.BR Empresas de radiodifusão de sons e

imagens

l  ADV.BR Advogados

Hospedagem

l  Ser Linux

l  Suporte a PHP e MySQL
O que ter em um site?

l  O que é;
l  Por que contratar;
l  Diferenciais;
l  Depoimentos;
l  Imagens;
l  Vídeos;
l  Gráficos;
Instalação
Joomla.org
Instalação Online – dominio.com.br/cpanel
01 - Acesse o CPANEL de sua hospedagem
Antes de continuar…

Abra o bloco de notas e guarde os seguintes dados a seguir:

l  Banco de dados mysql;
l  Usuário;
l  Senha.
02 – Crie Banco de dados mysql
Banco criado
03 – Crie um usuário para administrar o banco de dados

Lembre-se de
salvar a senha!
Usuário criado com sucesso!
04 dê ao usuário privilégio de manipular o Banco criado
Com isso temos

Usuário: r1003376_joomla3
Banco de dados: r1003376_joomla2
Senha: xxxxxxxxxxxx
Servidor: bm100.webservidor.net
05 Faça upload e extraia o .zip do Joomla! no Gerenciador de Arquivos
06 Acesse o endereço do site e preencha as configurações
07 Preencha os dados do Banco de Dados

r1003376_joomla3

r1003376_joomla3
08 – Selecione “Exemplo de conteúdo – Padrão em inglês (GB)”
(continuação da instalação)
08 Remova a pasta /installation
Instalação no Windows
Faça a instalação do Wamp ou Xampp

WAMP XAMPP
Habilite: Apache, MySQL e FileZilla
Acesse em seu browser: localhost
Acesse em seguida o menu PHPmyadmin
Clique em banco de dados e crie seu banco
Acesse em seu computador: C/xampp/htdocs e crie uma pasta

Esse será o endereço

do seu site!
Acesse a pasta criada e extraia o zip do Joomla
Acesse em seu browser localhost/nomedoseusite
Preencha os dados do Banco de Dados

localhost

Servidor: localhost
root Usuário: root
Senha: em branco
Nome do banco: Criado há pouco

banco
Selecione “Exemplo de conteúdo – Padrão em inglês (GB)”
(continuação da instalação)
Remova a pasta /installation
Joomla instalado!

Backend Frontend
Front-End – domínio.com.br
Administração (ou Backend) – dominio.com.br/administrator
Painel de Controle
Tradução
Para traduzir o Joomla, acesse o menu Extensions è Extensions Manager
Habilite o idioma Português (Brasil) no Site e Administrator

Site

Administração
Navegação na Administração
Apresentando o Painel de Controle
Usuários
Menus
Conteúdo
Componentes
Extensões
Ajuda
Configuração Global
Configuração Global - Site
Configuração Global - Site
Configuração Global - Sistema
Configuração Global - Servidor
Configuração Global - Permissões
Configuração Global – Filtros de Texto
Gerenciador de Usuários
Gerenciador de Usuários - Usuários
Gerenciador de Usuários – Novo Usuário
Gerenciador de Usuários – Grupos de Usuários
Níveis de Acesso de Visualização
Gerenciador de Usuários – Notas de Usuário
Gerenciador de Usuários – Categorias de Notas
Conteúdo
Gerenciador de Mídia
Gerenciador de Mídia – Enviar imagem
Conteúdo – Gerenciador de Categorias
Conteúdo no Joomla! 1.5 era dividido em:

l  Seção
l  Categoria;
l  Artigo.

Já no Joomla! 3.2 saem as seções e parmanecem apenas:

l  Categoria;
l  Artigo.

As categorias ajudam a organizar o conteúdo no back-end e a estruturar os artigos

no front-end.
Conteúdo – Gerenciador de Categorias
Gerenciador de Categorias – Nova categoria
Gerenciador de Categorias

Categorias Comuns:
l  Institucional (para artigos “Quem Somos”, “Missão, visão e valores”);
l  Produtos;
l  Serviços;
l  Comunicação (para artigos como “Contato”, “Trabalhe Conosco”, “Envie
arquivo”)
Exercício

Pense em seu site (conteúdo e menus) e crie suas categorias!

Para ajudar:
Google Planner
Hora de pensar seu site

Pense (pelo menos) as seguintes

páginas do seu site:

•  Home;
•  Quem Somos;
•  Serviços;
•  Contato;
•  Localização
Antes de acessar os artigos…
Acesse Extensões è Gerenciador de Extensões
Para ativar o novo Editor de Textos, acesse Configuração Global
Conteúdo - Gerenciador de artigos
Novo Artigo
Como criar link externo?
Como criar link interno?
Como linkar para um e-mail?
Como linkar com um arquivo em pdf?
Como inserir uma imagem?
Para imagens já na hospedagem
Para imagens que ainda não estão na hospedagem
Configuração da Imagem

Lembre-se sempre de:

l  Criar um alternate text com palavra-chave;
l  Alinhar a esquerda, direita ou centro;
l  Definir Margin.

Evite:
l  Redimensionar imagens grandes.
Leia mais para dividir artigos longos
Incluir Subtítulos
Novo Artigo – Opções de Publicação
Novo Artigo – Imagens e links
Novo Artigo – Opções do Artigo
Novo Artigo - Configuração de Tela de Edição
Novo Artigo – Permissões do Artigo
Gerenciador de Artigos – Opcões (Usar Global)
Exercício

Pense novamente em seu site e crie:

l  Pelo menos 2 artigos por categoria;
l  Pelo menos 2 imagens;
l  Pelo menos 1 link interno (com artigo ou menu);
l  Pelo menos 1 link externo.
Componentes
Componentes nativos no Joomla

l  Atualização Joomla! l  Weblinks

l  Banners
l  Busca
l  Busca Inteligente
l  Contatos
l  Fonte de Notícias
l  Mensagens
l  Redirecionamento
l  Tags
Atualização do Joomla!
Banners – Novo Cliente
Banners - Clientes
Banners - Categorias
Banners – Nova Categoria
Banners - Banners
Banners – Novo Banner
Banners – Novo Banner – Opções de Publicação
Banners – Novo Banner – Detalhes do Banner
Busca
Ativar Estatísticas è Opções
Busca com estatísticas de pesquisa ativa
Busca Inteligente
Busca Avançada – Conteúdo Indexado
Busca Avançada – Filtros de Busca
Busca Avançada – Mapa de Conteúdo
Busca Avançada - Plugin
Contatos - Categorias
Contatos – Nova Categoria
Contatos – Todos os contatos
Contatos – Novo Contato
Contatos – Novo Contato – Detalhes de contato
News Feed - Categorias
Feed de Notícias – Todos os feeds
News Feed – Novo Feed
Mensagens – Nova mensagem
Mensagens – Todas as mensagens
Redirecionamentos
Redirecionamentos – Ativar plugin
Redirecionamentos – Novo redirecionamento
Tags
Tags na edição/criação de artigos
Nova Tag
Weblinks (ou “links interessantes”)
Weblinks – Todos os links
Weblinks – Novo Link
Menus
Gerenciador de Menus
Novo Menu
Itens de Menu (Novo Menu)
Novo item de Menu
Novo item - Contatos
Todos os contatos
Contatos – Lista contatos de uma categoria
Contatos de uma categoria
Contatos – Único Contato
Único Contato
Artigos Arquivados
Artigos Arquivados
Único Artigo
Único Artigo
Lista todas as categorias
Lista todas as categorias
Categoria como Blog
Categoria como Blog – Opções Avançadas
Categoria como Blog
Criar Artigo
Criar artigo
Busca Inteligente
Busca Inteligente
Tag – Tagged Itens
Tag – Tagged Itens
Compact list of tagged itens
Compact list of tagged itens
Lista de todas as tags
Lista de todas as tags
Usuário - Formulário de Entrada
Usuário – Formulário de Entrada – Redirecionamento antes e pós login
Usuário - Formulário de Entrada
Usuário - Perfil
Usuário - Perfil
Usuário – Editar Perfil
Usuário – Editar Perfil
Usuário – Formulário de Cadastro
Usuário – Formulário de Cadastro
Usuário - Solicitar Lembrete de Nome de usuário ou senha
Usuário - Solicitar Lembrete de Nome de usuário ou senha
Weblinks – Exibir todas as categorias
Weblinks – Exibir todas as categorias
Weblinks – Exibir weblinks de uma categoria
Weblinks – Exibir weblinks de uma categoria
Weblinks – Enviar ou editar um weblink
Weblinks – Enviar ou editar um weblink
Iframe
Iframe
Sistema – Link Externo
Sistema – Apelido de Menu
Sistema - Separador
Título do Menu
Módulos
Lista de Módulos
l  Acessar;
l  Artigos arquivados;
l  Artigos Relacionados;
l  Artigos – Newsflash;
l  Banners;
l  Breadcrumbs;
l  Busca;
l  Categoria de Artigos;
l  Categoria de Artigo;
l  Conteúdo mais lido; l  Publicação de Feeds;
l  Estatística; l  Quem está online;
l  Exibir Feed; l  Rodapé;
l  Imagem Randomica; l  Seletor de idiomas;
l  Menu; l  Similar Tags;
l  Módulo de Busca l  Últimas Notícias;
Inteligente
l  Últimos Usuários;
l  Personalizar HTML;
l  Weblinks;
l  Popular Tags;
l  Wrapper (iframe).
Personalizar HTML
Personalizar HTML – Atribuir menu
Personalizar HTML – Module Permissions
Módulo Avançado
Formulário
Chronoforms - chronoengine.com
Instalação do Plugin
Instalação do Componente
Instalação do Módulo
Chronoforms
Easy Form Wizard
Campos de formulário

Captcha Input - Utilizado para diminuir spam, é um campo onde o

visitante insere um código.
Checkbox

Checkbox é um campo com uma única opção para selecionar, muito

utilizado em:
l  “Li e concordo”
l  “desejo receber newsletter”…
Checkboxes Groups

Campo com diversas possibilidades de seleção, utilizado em:

l  “Produtos que já adquiri”;
l  “Tenho interesse em”;
l  “Notícias de interesse”.
Datetime Picker

Campo destinado a seleção de data e horário, é muito utilizado para

agendamento de consulta ou hospedagem.
File Upload

Campo útil para upload de arquivos.

Preformatted Text

Campo livre de HTLM para inserção de informações antes do formulário

ou divisões.
Password Box

Campo destinado a cadastro de senha.

Radio Box

Campo com várias opções e apenas uma possibilidade de escolha.

Muito usado em situações de escolha.
Dropdown

Campo onde é exibida listagem com a possibilidade de uma escolha, é

muito utilizado em escolha de Estado e Ano de Nascimento.
Submit Button

Botão para enviar o formulário.

Text Box

Campo simples de texto com uma linha, muito utilizado para:

l  Nome;
l  E-mail;
l  Telefone;
l  Cidade;
l  CEP;
Text Area

Campo simples de texto com 5 colunas, comumente usado em campos

onde a resposta é grande, como:
l  Mensagem;
E-mails
Thanks Message
Files Upload
Captcha
Store Data
Others
Form Settings
Salvar em Banco de Dados
Salvar em Banco de Dados
Salvar em Banco de Dados
Incluir o Formulário em um Artigo
Incluir o Formulário em um Artigo
Incluir Formulário em um Menu
Incluir Formulário em um Menu
Incluir formulário em um módulo
Incluir formulário em um módulo
Galeria de Imagens
Widgetkit - yootheme.com/widgetkit/examples/gallery
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Galerias do Widgetkit
Instalação do Widgetkit
Widgetkit – Aba Gallery
Primeira Galeria
 Primeira Galeria - Configuração

•  Width: largura;
•  Height: altura;
Primeira Galeria no Artigo
Primeira Galeria no Artigo
Primeira Galeria no Módulo
Primeira Galeria no Módulo
Vídeo
Como inserir o código de “incorporar” no Joomla
Como inserir o código de “incorporar” no Joomla
Como inserir o código de “incorporar” no artigo
Como inserir o código de “incorporar” no módulo
Slideshow
Image Show GK4 - gavick.com/image-show-gk4.html
Gavick Image Show GK4
GK Image Show
Novo Módulo – Image Show
GK Image Show - Opções
GK Image Show – Seus Slides
GK Image Show – Seus Slides / Artigo
GK Image Show - Interface
GK Image Show - Avançado
Widgetkit - yootheme.com/widgetkit/examples/slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
Widgetkit - Slideshow
 Widgetkit - Slideshow

•  Width: largura;
•  Height: altura;
Widgetkit – Slideshow no módulo
Abas
GK TABS - gavick.com/best-free-joomla-tab-module.html
GK TABS
GK TABS
GK TABS
Instalando o GK Tabs
GK Tabs
GK Tabs – Opções Basic
GK Tabs - Tabs
GK Tabs - Interface
GK Tabs - Animação
GK Tabs – Configurações avançadas
GK Tabs – Opções Avançadas
Comentários
JA Comment - joomlart.com/joomla/extensions/ja-comment-component
JA Comment
JA comment – Ativando o Plugin
Configurando JA Comment