Página 1/30

Criando um Site com o CMS Joomla

Aprender MuitoAlgo que ajuda para que nós aprendermos muito algo e bem é a gente estar interessado, gostar do que estamos aprendendo.

Tentando estimular você a gostar do Joomla:- O Joomla permite a você criar sites antes de conhecer sobre PHP, HTML e outros. Mas alerto que quanto mais conhecer estas linguagens/ferramentas melhores sites criará.- O Joomla foi o softwares mais interessante que conheci, por vários aspectos, especialmente por poder libertar o cliente do programador. Já li outro programador com a mesma impressão minha.- O Joomla foi criado de forma a facilitar a criação de sites tipo portais. Ele cria também tipo blog mas seu foco é em portais.- É um dos CMS mais populares da atualidade: só aqui no Ceará é usado no site do governo do estado (http://www.ceara.gov.br/), na UECE (http://www.uece.br/uece/), na UFC (http://ufc.br/), na UNIFOR (http://www.unifor.br/) entre outros.- Quando for criar um site para um cliente, ajuda muito citar alguns destes sites criados em Joomla. Dá confiança ao mesmo. Mas o mais importante é a confiança que você passará, mostrando conhecimento sobre a ferramenta, mostrando também alguns sites criados por você.- O Joomla é inteiramente grátis e tem seu código aberto para mudanças.

ProjetoCriaremos um pequeno site para uma sapataria, chamada “Sapataria Dando no Pé”. O site será uma loja virtual simples, apenas mostrando parte do estoque da sapataria (não vende). Criaremos o site localmente para testes usando o Wamp ou o Xampp e somente quando satisfeitos então o enviaremos para o servidor.

O site conterá:- Instalar e habilitar o idioma Português do Brasil- gerenciador de backups (criar primeiro backup logo de início e depois frequentemente)- Categorias, artigos e itens de menu (um de Destaque)- formulário de login- plugin para redes sociais- breadcrumbs- busca interna- novidades- populares- mapa do site- gerenciador de arquivos- pensamento do diaEntre outros

Ativar o mod_rewriteTorna as URLs menores e mais fáceis de memorizar.

Configuração GlobalUsar mod_rewrite do Apache – SimDepois devemos renomear o arquivo htaccess.txt do raiz do Joomla para .htaccess. No Windows não podemos renomear este arquivo diretamente. Use o Winrar e compacte o htaccess.txt. Depois abra o htaccess.rar e renomeie o htaccess.txt para .htaccess

Página 2/30

Agora descompacte o htaccess.rar, que expandirá o .htmccess sem problema.

Obs.: tome cuidado com esta configuração. Caso o servidor não tenha o mod_rewrite habilitado você perderá o controle sobre o site. O Xampp vem com ele ativado, mas faça um backup antes.

RecomendaçõesComo o mod_rewrite altera as URLs é indicado configurá-lo logo no início.Assim como o template, também é indicado que o troquemos para o template definitivo como uma das primeiras providências.

Ativando no Wamp – Ícone – Apache – Apache modules, clique no mod_rewrite e restart tudo

Downloadshttps://www.joomla.org/download.html – baixar a versão 3.4.4 ou superior

Mapa do Sitehttp://www.actiaweb.com/activ/component-joomla/tout-sur-le-sitemap-faster-de-joomla/telecharger-sitemap-faster.html

Gerenciador de Arquivoshttp://extplorer.net/files

Gerenciador de backupshttp://ribafs.16mb.com/index.php/joomla/componentes/simple-joomla-backup

Instalar o Joomla 3.4.4

- Efetue o download do Joomla - Crie o diretório “sapataria” dentro da pasta wamp assim:c:\wamp\www\sapataria- Descompacte o arquivo do Joomla para a pasta sapataria acima- Chame no navegador assim:http://localhost/sapataria

Página 3/30

Então aparecerá a tela:

Preencha de acordo com a tela acima e clique em Próximo. Sugiro admin e admin no site de testes, lembrando de mudar ambos quando enviar para o servidor.

Página 4/30

Banco de Dados

Wamp, Xampp, EasyPHP usam root sem senha no Windows.

Gosto de usar o nome do banco igual ao do diretório para facilitar lembrar.

Clique em Próximo

Página 5/30

Finalização

Se for seu primeiro site sugiro Conteúdo de exemplo Aprenda Joomla

Vamos escolher a opção Conteúdo de exemplo padrão

E clicar em Instalar e aguardar

Clique no botão Remover o diretório installation

Temos abaixo as duas seções de um site em Joomla:Site – site propriamente ditoAdministrator – seção de administração do site

Cliquemos em AdministratorEntre com admin e admin e faça login.

Página 6/30

Seção de administração

Página 7/30

Gerenciando o Site pelo Administrator

- Instalar e habilitar o idioma Português do Brasil- Categorias, artigos e itens de menu (um de Destaque)- formulário de login- plugin para redes sociais- breadcrumb- busca interna- novidades- populares- mapa do site- gerenciador de arquivos- gerenciador de backups- pensamento do diaEntre outros

Instalando e habilitando o idioma Português do Brasil

InstalandoExtensions – Manager – Install Languages (esquerda)Na caixa Search digite br e tecle EnterMarque Portuguese Brazil e clique acima e Install e aguarde

Tornando PadrãoSiteExtensions – LanguagesClique no botão da coluna Default na linha Português Brasileiro

AdministratorClique à esquerda em Installed – AdministratorClique no botão da coluna Default na linha Português BrasileiroMudando agoraPara mudar o idioma precisamos fazer logout depois loginFaça logout clicando na seta ao lado da roldana acima e à direita e depois em LogoutDepois faça login novamente e já estará em português, facilitando nosso trabalho.

Página 8/30

Criando CategoriasConteúdo – Categorias – Criar Nova Categoria

Requer apenas o título e se está ou não habilitada.

Clique em Salvar e Fechar

Sistema de CategoriasO Joomla suporta categorias infinitas, ou seja, uma dentro da outra em indefinidos níveis, assim:

categoria1categoria2

categoria3…

Sistema pouco utilizado mas importante para organizar o conteúdo e facilitar que o visitante encontre o conteúdo do site.

Dentro da categoria Sapatos colocaremos os artigos, um para cada tipo de sapato.

Página 9/30

Também criaremos categorias Meias, Tênis, Bolsas, Cintos, etc.

Vamos por etapas…

Criando um Artigo

Obs.: Antes de começar a criar os artigos é importante criar um usuário, aquele usuário da empresa que adicionará os artigos, pois no site aparecerá seu nome em cada artigo. Veja mais a frante como criar adequadamente um usuário.

Este artigo conterá conteúdo texto e imagens falando sobre cada sapato, assim:

Imagem do sapatoNomeDescriçãoTamanhos disponíveisPreçoCondições de pagamento

Página 10/30

Conteúdos – Artigo – Criar Novo Artigo

Clicar na aba Imagens e LinksEntrar uma imagem em Imagem do Artigo (Esquerda)Veja mais a frente como ficará no site.

Criação de Item de MenuAgora precisamos criar uma forma de mostrar no site nosso artigo. O item de menu é o recurso que faz isso pra nós.

Vamos criar um item de menu que mostrará a categoria Sapatos e tudo que ele contiver.

Menus – Main Menu – Adicionar Item de Menu

Página 11/30

Clique em Selecionar, depois:

Artigos – Lista de uma categoriaNa combo Selecione uma Categoria escolha SapatosClique em Salvar e Fechar

Referência para imagenshttps://www.vizzent.com.br/

Página 12/30

Visite o site e veja acima um novo item de menu chamado Sapatos. Clique nele para ver como está.

Vamos criar mais um artigo com sapato.Para isso abrimos o artigo que criamos e fazemos uma cópia do mesmo.Então alteramos seu título, preço, imagem e o que precisar.Lembre de publicar o artigo.

Remover um artigo e seu item de menu

Ao instalar o Joomla ele criou um artigo com o item de menu, que agora iremos remover.

Conteúdo – ArtigosMarque Getting Started e clique acima em Lixeira.

Menus – Main MenuClique em HomeEm Selecione um artigo selecione Sapato Social MasculinoMude o título do menu de Home para Início

Página 13/30

Artigo em Destaque

Vamos criar um artigo em destaque, com vários sapatos e tênis, contendo link para os respectivos artigos, com detalhes. Então trocaremos no menu Iniciar.

...

Criar uma tabela para inserir em cada célula um sapato e abaixo seu nome.A tabela terá 2 linhas por 2 colunas.

Deve ficar assim:

Cada sapato tem um link para o respectivo artigo (capturar o link na página inicial, no link da categoria Sapatos).

Página 14/30

Criar Usuário

Usuários – Gerenciar – Criar Novo Usuários

Na aba Grupos de Usuários Atribuídos marque Publisher para que ele tenha os privilégios adequados de criar, editar e publicar artigos.

Cada artigo criado pode ter seu autor selecionado.

Página 15/30

Usando o Framework Gantry 5

O Gantry é um Framework de templates com muitos recursos e flexibilidade para Joomla e WordPress.

Usando o Gantry5

Requisitos para o Gantry 5:. WordPress 4+•Joomla 3.4+•PHP 5.4+•Últimas versões do Chrome/Firefox/Safari/Opera, IE9 (limitado), and IE10+

http://www.rockettheme.com/blog/team/134-gantry5-requirements-and-details

Downloadhttp://gantry.org/downloads (a versão atual é a 5.1.4)

joomla-pkg_gantry5_v5.1.4.zip – 1.82 MB (Contém o framework, um Componente, as bibliotecas e um plugin)https://github.com/gantry/gantry5/releases/download/5.1.4/joomla-pkg_gantry5_v5.1.4.zip

joomla-tpl_g5_hydrogen_v5.1.4.zip - 401.76 KB (Template). Instala 2 templates, o default e o home.https://github.com/gantry/gantry5/releases/download/5.1.4/joomla-tpl_g5_hydrogen_v5.1.4.zip

Instalação

Obs.: Instale antes o primeiro pacote, o do componente e depois o dos templates.Instale os dois pacotes como se instala outras extensões.

Página 16/30

AdministrandoApós instalar aparecerão 2 templates na área de Temas: Hydrogen – Home e Hydrogen DefaultTambém podemos administrar pelo componente: Gantry 5 Themes (acessar e clicar em Configure)

Quando aparecerá:

Página 17/30

Abaixo várias opções de alterações de estilos.

Criando um Novo Tema para Trabalhar com ele

Ao invés de usar os temas existentes, criaremos um novo para usá-lo, através do Outlines.

Clique acima em Outlines

Outlines – onde podemos criar, editar e excluir temas além de replicar temasAo clicar no botão Outlines teremos os 2 temas, páginas do sistema e um + para criar outro tema:

Ao clicar no + estaremos replicando um template.Outline Home é a página inicial do template do framework.

Página 18/30

Criar novo TemaClique no sinal de + (observe o novo layout criado)Clique no pequeno lápis à direita do nome e renomeie para SapatariaClique no lápis abaixo para abrir o novo templateClique acima em AssignmentSelecione apenas Home para que fique verde e então clique em Save Assignment

1 - Escolhemos o Outline que queremos trabalhar e mudar o estilo em Base Outline acima. Escolheremos o template que criamos, o Sapataria.

Na caixa Base Outline aparecem os templates existentes e as páginas do sistema.

Abaixo temos paineis para alterar cores e outras características do template ou página.Podemos adicionar campos aos elementos acima.

Alterações aqui fazem um override no template/página.

Quando escolhemos um outline diferente do Base, estaremos substituindo as configurações da base.

Dica: escolhendo um outro outline e desmarcando alguns checkbox prevalecerá a configuração do Outline Base.

Página 19/30

SettingsPartículas

As partículas são listadas abaixo e podem ser editadas e criadas.Com vários recursos, inclusive criar redes sociais, configuração de posições, spacer.Podemos adicionar campos para as partículas. Para isso editando:gantry5/site/media/gantry5/engines/nucleos/particles e editar os dois arquivos: yaml e twig

Página 20/30

LayoutPara que o painel Layout apareça precisamos selecionar um template em Base Outline.

À esquerda estão as partículas, inclusive as criadas por nós.No centro é onde montamos nosso layout.

Clear – limpa/remove o conteúdo das partículas.

Página 21/30

Load

Em Layout o botão Load mostra estruturas de layout prontas.

Ao desmarcar Keep the … ele preenche todas as posições do layout. Obs.: Mas devemos desmarcar antes de escolher o template.

Desfazer / RefazerTemos neste painel dois botões para estas funções: Undo e Redo

Para criar o layout primeiro escolhemos uma estrutura (Load) e depois arrastamos o conteúdo para cada partícula do painel da esquerda.

Podemos adicionar linhas a cada partícula.Cada partícula tem suas configurações e cada linha de conteúdo também.

Removendo Partícula Clica sobre a mesma e arrasta. Aparece um círculo vermelho. Clicar sobre ele para remover.

Adicionar ColunasArrastar o conteúdo da esquerda e soltar sobre a linha existente de conteúdo. Então arrastar para selecionar a largura.

Adicionar Módulo pelo IDVerificar o ID na seção de módulos e configurar a partícula Module Instance para este ID.

Página 22/30

Nomear PosiçõesUsar as configurações do Module Position para isso. Digitar o nome da posição na seção de Módulos e depois usar o mesmo nome no respectivo Module Position.

Deixar Espaço em Branco em PartículasUsar o conteúdo Spacer. Redimensione a vontade.

Assignment

Habilitar o menu apenas para o Outline que está trabalhando.

Editor de MenuExtende os itens de menu do menu do Joomla. Não cria, somente extende.

Na combo acima selecione o menu que deseja editar, no caso Menu.Depois pouse o mouse sobre Home e clique na roldana à direita. Então clique no pequeno lápis à direita do nome para renomear para InicioClique em Apply and Save

Página 23/30

- Clique em Module, arraste e solte sobre Início. Escolha o - Clique em Particle, arraste e solte sobre o módulo criado.- Selecione o módulo- Entre com as propriedades para o módulo

Também podemos colocar 2 ou mais módulos em cada linha.

Para adicionar um novo módulo, antes precisa selecionar o menu existente, no caso Início e então arrastar o module para a linha abaixo.

Anotar passos do vídeohttps://www.youtube.com/watch?v=Re7VW6bPfpQ&list=PLYKjjvrQujkgrV7MJr6oHMu4xXUhOmngR

Página 24/30

Criando um Novo Template Passo a Passo

- Criamos o menu com o Joomla para chamar pelo Gantry- Ativamos e customizamos todos os módulos que iremos usar e os chamaremos pelo Gantry

Depois de instalado o Gantry corretamente vamos criar uma nova instância de template com o mesmo.

Extensões – TemasClicar em Hydrogen – PadrãoClicar acima em OutlinesClicar no grande sinal de + à direitaClicar no pequeno lápis à direita do nome e renomear para SapatariaClicar no lápis abaixo para abrir e usar o novo template Sapataria

Clique no estilo que mais te agradaClique acima em Assignments e ative apenas Home (mudar de vermelho para verde)Clique em Save Assignment

Voltemos para o painel Layout, que é o painel principal na construção do template.

Adicionando uma Partícula

No Layout do template SapatariaPassar o ponteiro do mouse na partícula NavigationPuxar o ponteiro para a direita e clicar no sinal de + para adicionar uma linha abaixoClicar em menu à esquerda, arrastar e soltar sobre a nova linha adicionada em Navigation

Configurando uma PartículaVamos configurar para que esta partícula abra o menu Mainmenu do Joomla(Há uma recomendação em Settings para que os menus sejam usados somente nas seções Navigation e Header)Clique na roldana à direita da partícula MenuClique na caixa Menu duas vezes e escolha MainmenuLembre de deixar marcado o checkbox da direita de MenuClique acima em Save Layout e veja no site como ficou.

Página 25/30

Adicionando nova Linha para o módulo Breadcrumb

Na região Main clique no sinal de + para adicionar uma linhaClique à esquerda e acima em Module Instance, arraste e solte sobre a nova linhaClique na roldana do Module Instance para que apareça:

Clique no pequeno lápis à direita do nome e renomeie para Breadcrumbs.Clique em Pick a Module e clique em Breadcrumbs e depois abaixo em Select

ImagensÉ importante que as imagens, como a do Logo, tenham fundo transparente. Primeiro trate a imagem, dimensões, fundo, etc e somente então mande para o site.

Página 26/30

Adicionando o Módulo Novidades

Com o template Sapataria aberto clique em LayoutPrecisamos escolher onde o módulo aparecerá.Vamos adicionar mais uma linha à região MainClique à esquerda sobre Module Instante, arraste e solte sobre a nova linha.Clique sobre a roldana deste Module Instante e deixe assim:

Observe a mensagem de que ajustes no módulo devem ser no gerenciador de módulos do Joomla.

Página 27/30

Então clique em Pick a Module para escolher o módulo Novidade, assim:

Clique em Novidades e depois em Select.

Página 28/30

Então teremos

Veja no site como ficou:

Uma boa pedida é adicionar o módulo Populares e sobre Novidades para que fiquem na mesma linha, assim:

Página 29/30

Adicionar Módulo de Busca Interna

Vamos usar o painel Layout para adicionar o módulo de busca no site.Para este não precisamos adicionar uma nova linha, pois ficará na mesma linha do menu.Localize a linha do Menu e arraste Module Instance e solte sobre a linha do MenuObserve que fica 50% para menu e 50% para o Module Instante. Podemos alterar a largura de cada um clicando na divisória e arrastando para a esquerda ou para a direita.Agora clique na roldana do Module Instante para carregar o módulo Search, assim (como fizemos antes):

Obs.: ressalte-se que os seus IDs podem ser diferentes destes.

Caso a Busca fique à esquerda, arraste para a direita.

Veja no site como ficou:

Posição de MódulosObs.: A posição de um módulo no Gantry 5 é independente da posição original.

Dessa mesma maneira podemos adicionar os demais módulos para o site.Joomla e GantryExiste muito mais recurso no Joomla e no Gantry para ser explorado.

Página 30/30

Referênciashttp://joomla.org http://gantry.o rghttps://www.youtube.com/watch?v=nXlbgooQ9Gc (este me serviu de base e tem várias aulas)http://leowgweb.com.br/blog/joomla http://leowgweb.com.br/blog/joomla/conheca-o-gantry-5-um-framework-de-template-fantastico http://tableless.com.br/gantry-5-desenvolvimento-de-templates-para-joomla-e-wordpress/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tableless+(Tableless)

http://leowgweb.com.br/blog/joomla/voce-ja-ouviu-falar-do-joomlaIntroduçãohttps://www.youtube.com/watch?v=H0RCz-ziJoo&list=PLT0iOmR-eKL6tAYBpNKFXTxHij-1JJej7&index=1 http://www.dailymotion.com/video/x304qhs http://www.techfry.com/joomla/introductory-guide-to-gantry-5-framework Instalandohttps://www.youtube.com/watch?v=zCH10qrxPSc&list=PLT0iOmR-eKL6tAYBpNKFXTxHij-1JJej7&index=2Administração do Joomlahttps://www.youtube.com/watch?v=Ny0KgUz5JH8&index=4&list=PLT0iOmR-eKL6tAYBpNKFXTxHij-1JJej7Menu Editorhttps://www.youtube.com/watch?v=DN_U_W7LT_c&index=5&list=PLT0iOmR-eKL6tAYBpNKFXTxHij-1JJej7Layout Managerhttps://www.youtube.com/watch?v=DN_U_W7LT_c&index=5&list=PLT0iOmR-eKL6tAYBpNKFXTxHij-1JJej7