Beruflich Dokumente
Kultur Dokumente
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 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
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
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!
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.
6
Aula 02 - INSTALAÇÃO DO JOOMLA
Para utilizarmos o Joomla, necessitamos de três itens:
2 – Servidor WEB
3 – Banco de Dados
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
Podemos procurar nos sites de busca ou acessar o site oficial (link abaixo)
7
https://www.apachefriends.org/pt_br/index.html
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
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.
Instalando 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
IMPORTANTE:
Caso tudo tenha dado certo até aqui, você será direcionado para a interface de
instalação do Joomla.
Configuração Principal
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 User Name: Aqui, precisamos inserir um nome de usuário que será
usado para acessar a área administrativa, aqui vamos usar admin
12
Configuração do Banco de Dados
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.
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.
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.
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.
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?
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.
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.
Exemplo:
www.seusite.com.br/administrator
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.
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
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.
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
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.
Sistema
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).
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.
Conteúdo
20
Componente
Extensões
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
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:
2 – Modo Offline:
Já o outro campo deve ser preenchido com palavras curtas separadas por
vírgula.
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.
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.
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.
Exemplo:
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.
24
Antes de criarmos essa categoria, é interessante falarmos sobre dois campos:
Continuando:
25
Criando um novo artigo
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.
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.
27
Mas o que significa usar global?
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.
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.
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
30
As extensões existem e são muito utilizadas justamente para suprir essa
necessidade se adaptando a cada projeto.
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
Existem outras duas letras que frequentemente também podem surgir ao lado
de outras extensões, são elas:
Continuando:
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
32
Existem três maneiras distintas de instalarmos extensões
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
Clique em Salvar e Fechar e retorne até o artigo, perceba que nosso editor está
completamente diferente:
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
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:
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
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
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
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
38
Aula 07 - TAREFA COMPLEMENTAR
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.
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.
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.
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.
41
Vamos escolher Categoria como Blog
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
#Colunas
#Links
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
Por padrão, os botões “Leia Mais” dos nossos artigos vem acompanhado do
título do mesmo
44
Podemos ver o resultado abaixo:
Exemplo:
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
Aula 09 - TAREFA COMPLEMENTAR
Realize as etapas abaixo para criar um novo item de menu com conteúdo
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
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:
48
Em seguida, clique em opções (ícone em formato de engrenagem do lado
superior direito)
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.
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
51
Finalmente temos o Login Form (módulo usado para o gerenciamento interno.
Veremos mais sobre ele adiante)
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”)
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
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:
54
Aula 11 - TAREFA COMPLEMENTAR
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.
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.
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
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
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
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...
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.
58
Muito bem, agora temos dois novos usuários, vamos apresentar os dois
principais conceitos de uma única vez.
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.
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.
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
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:
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
63
segundo serve como uma espécie de editor PHP, para que dessa forma
possamos acrescentar funções via código.
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
Temos também três botões na cor laranja que serão também usados para a
contrução do formulário
Section: Considere como uma área quadricular que sempre ficará dentro de
uma página
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
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
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.
66
Vamos clicar em “New Element” para criarmos nosso primeiro campo.
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
67
Muito bem, agora temos nosso primeiro campo criado.
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:
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!
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
Faça o seguinte, acesse o Item Menu – Main Menu – Adicionar Item de Menu
70
Perceba que temos uma nova opção, chamada BreezingForms, ao clicar nela,
escolha a opção “Add Form”
71
Clique na segunda opção do menu lateral Manage Forms
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:
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)
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
74
Aula 14 - TAREFA COMPLEMENTAR
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.
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:
http://leomiranda.com/desenvolvimento/140-curso-template-joomla-
frameworks
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.
http://www.yootheme.com/themes/warp-framework
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.
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”
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
Á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)
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:
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
Sabemos que são esses arquivos que cuidam dos estilos do layout de cada
elemento e com o joomla, não é diferente.
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.
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)
https://addons.mozilla.org/pt-br/firefox/addon/firebug/
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”
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)
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:
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
Aula 17 - TAREFA COMPLEMENTAR
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 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.
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.
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.
92
Mas o principal e que deve ser observado por qualquer site, independente de
ser feito ou não com joomla é o CONTEÚDO:
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
https://www.akeebabackup.com
93
A instalação é exatamente como qualquer outra extensão e após a mesma,
podemos acessar o Akeeba em nossa área de componentes
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.
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
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, 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
http://www.filmes.com.br/kickstart.php
Utilizando o FileZilla
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?
O FTP é a forma mais rápida e mais fácil de transferir arquivos, e hoje a mais
utilizada na internet.
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).
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.
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
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?
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.
99