Upload
dotram
View
226
Download
1
Embed Size (px)
Citation preview
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