32 joomla [versão 1.3 2011-12] - alfamídia
TRANSCRIPT
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
1/62
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
2/62
Joomla!
2 2011 Alfamídia Prow
Todos os direitos reservados para Alfamídia Prow.
AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EMQUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Alfamídia Prow não têmqualquer responsabilidade sobre qualquer pessoa ou entidade com respeito àresponsabilidade, perda ou danos causados, ou alegadamente causados, direta ouindiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
12/2011 – Versão 1.3
Alfamídia Prowhttp://www.alfamidia.com.br
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
3/62
Joomla!
3 2011 Alfamídia Prow
UNIDADE 1 JOOMLA! PARA WEB DESIGNERS ......................................................................................................... 5
1.1 SOBRE O
CURSO
............................................................................................................................... 5 1.2 ESTRUTURA DO CURSO .................................................................................................................... 5
UNIDADE 2 CONCEITOS............................................................................................................................................... 6
2.1 O QUE É CMS ................................................................................................................................... 6 2.2 TECNOLOGIAS ENVOLVIDAS ............................................................................................................. 6 2.3 COMPARATIVOS DE MÉTODOS DE CRIAÇÃO DE UM WEB SITE: TRADICIONAL X JOOMLA .................. 6 2.4 HOSPEDAGEM DE SITES COMPATÍVEL COM JOOMLA ......................................................................... 7
UNIDADE 3 INSTALANDO O JOOMLA! NO SERVIDOR WEB ................................................................................... 8
3.1 BAIXANDO O APLICATIVO JOOMLA! ATUALIZADO ............................................................................ 8 3.2 CONFIGURANDO O BANCO DE DADOS NO PROVEDOR DE HOSPEDAGEM. ........................................... 9
3.2.1 Criando o banco de dados .......................................................................................................... 9 3.2.2 Criando o usuário do banco de dados ...................................................................................... 10 3.2.3 Associando o Banco de dados com o usuário criado ......... ........... .......... ........... .......... ........... . 11
3.3 E NVIANDO OS ARQUIVOS JOOMLA! PARA O SERVIDOR WEB. .......................................................... 12 3.4 UTILIZANDO SERVIDOR LOCAL PARA INSTALAÇÃO ........................................................................ 14 3.5 I NSTALANDO SEU SITE EM JOOMLA!. .............................................................................................. 15
UNIDADE 4 UTILIZAÇÃO E CONFIGURAÇÕES APÓS A INSTALAÇÃO ................................................................ 21
4.1 ACESSO AO SITE ............................................................................................................................. 21 4.2 ACESSO A ADMINISTRAÇÃO DO JOOMLA! ...................................................................................... 22 4.3 PACOTE DE TRADUÇÃO .................................................................................................................. 22
UNIDADE 5 ADMINISTRAÇÃO BÁSICA DO JOOMLA .............................................................................................. 24
5.1 ADMINISTRAÇÃO DE USUÁRIOS ..................................................................................................... 24 5.2 ADMINISTRAÇÃO DE MÍDIAS .......................................................................................................... 24 5.3 CONFIGURAÇÃO GLOBAL ............................................................................................................... 25 5.4 MENUS ........................................................................................................................................... 25 5.5 CONTEÚDO ..................................................................................................................................... 26 5.6 CONCEITOS JOOMLA! ..................................................................................................................... 26
5.6.1 Componentes ............................................................................................................................ 26 5.6.2 Módulos ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... .......... ........... ...... 27 5.6.3 Plugin .............. .......... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ....... 27 5.6.4 Idiomas .......... .......... ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... ........ 27
5.7 MENU COMPONENTES .................................................................................................................... 27 5.7.1 Fonte de Notícias Externas ......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 28 5.7.2 Formulário de Contatos ............. ........... .......... ........... .......... ........... .......... ........... .......... .......... 29
5.8 EXTENSÕES .................................................................................................................................... 30 5.8.1 Instalar e Desinstalar extensões .......... ........... .......... .......... ........... .......... ........... .......... ........... . 30
5.9 GERENCIADOR DE MÓDULO ........................................................................................................... 31 5.10 GERENCIADOR DE PLUGIN ............................................................................................................. 32 5.11 GERENCIADOR DE TEMAS .............................................................................................................. 32
UNIDADE 6 CONTEÚDO DINÂMICO: ARTIGOS........................................................................................................ 33
6.1 SESSÕES ......................................................................................................................................... 33 6.2 CATEGORIAS .................................................................................................................................. 34 6.3 CRIANDO ARTIGOS ......................................................................................................................... 34
UNIDADE 7 MENUS ..................................................................................................................................................... 37
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
4/62
Joomla!
4 2011 Alfamídia Prow
7.1 I NTEGRAÇÃO ARTIGO/MENU ......................................................................................................... 37 7.2 MENU EM LAYOUT DO BLOG DE CATEGORIA ................................................................................. 38 7.3 MENU EM LAYOUT PADRÃO DE CATEGORIA .................................................................................. 40 7.4 MENU DO COMPONENTE CONTATO ................................................................................................ 40 7.5 SUBMENUS ..................................................................................................................................... 41
UNIDADE 8 EXTENDENDO O JOOMLA!.................................................................................................................... 42
8.1 EXTENSÕES ÚTEIS .......................................................................................................................... 42 8.1.1 Comentários ............................................................................................................................. 42 8.1.2 E-commerce .......... .......... ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... . 42 8.1.3 Galerias de Imagem .......... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 43 8.1.4 Formulários .......... .......... ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... . 43 8.1.5 Agenda/Calendário ........... .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 43 8.1.6 Slideshow .................................................................................................................................. 43 8.1.7 Google Maps ............................................................................................................................ 43 8.1.8 Newsletter ......... ........... .......... ........... .......... ........... .......... .......... ........... .......... ........... .......... ..... 44
8.2 BUSCANDO TEMAS ......................................................................................................................... 44
UNIDADE 9 UTILIZANDO UM TEMPLATE PRÓPRIO EM CSS ................................................................................. 45
9.1 CRIANDO UM TEMPLATE ................................................................................................................ 45 9.1.1 O arquivo templateDetails.xml ................................................................................................. 46 9.1.2 O arquivo index.php antes dos códigos Joomla! ...................................................................... 48 9.1.3 O arquivo CSS (Cascading Style Sheets) ......... ........... .......... ........... .......... ........... .......... .......... 49 9.1.4 O arquivo index.php depois dos códigos Joomla! .................................................................... 52 9.1.5 Melhorias no arquivo CSS .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... 54
UNIDADE 10 DICAS ÚTEIS ...................................................................................................................................... 56
10.1 OTIMIZANDO O SITE JOOMLA! PARA OBTER MAIS ACESSOS ............................................................ 56 10.2 VINCULANDO O JOOMLA! COM O BANCO DE DADOS ...................................................................... 57
UNIDADE 11 NOVAS VERSÕES ................................................................................................................................... 57
11.1 VERSÕES NOVAS DO JOOMLA! ........................................................................................................ 57
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
5/62
Joomla!
5 2011 Alfamídia Prow
Unidade 1
Joomla!
1.1 Sobre o Curso
O Curso Joomla! apresenta aos alunos conceitos envolvendo CMS - Content Management Systems, (Sistema de Gestão de Conteúdos, em português), sistemaeste que o Joomla!, como software livre, é líder mundial na área.
Além de compreender noções importantes, como instalação e gerenciamento doJoomla!, o aluno aprenderá como utilizar componentes que se fazem necessários para gerir um web site sem necessidade de programação e também a adaptar umlayout próprio a este sistema. Aprenderá também a realizar toda a instalação dosistema e configuração para instarar o banco de dados, mesmo sem terconhecimento na área de programação.
1.2 Estrutura do Curso
Primeiramente trabalharemos com os conceitos principais sobre CMS e Joomla!.
As unidades seguintes abordam tópicos como: comparativo entre métodostradicionais e Joomla! para criação de web site dinâmico, instalação de Joomla!
em servidor web, pacotes de tradução, templates para Joomla!, componentes, entreoutros.
O curso traz exercício prático para uma melhor fixação do conteúdo.
Durante o transcorrer de todo o curso o aluno aprenderá a trabalhar de formaautônoma no desenvolvimento de web site com Joomla!.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
6/62
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
7/62
Joomla!
7 2011 Alfamídia Prow.
Além do webdesign, muitos programadores preferem utilizar os frameworks, poisnão existe a necessidade de criar algo que já foi criado. Muitas vezes estes programadores acabam criando novos módulos para o Joomla! para atender uma
necessidade de um cliente, e este módulo passa a fazer parte de outros projetosmundo a fora.
Veja o quadro comparativo a um projeto de um web site dinâmico:
Sistema tradicional Joomla!
Profissional de Programação Necessário Desnecessário
Tempo de implementação Médio/Alto Baixo/Medio
Profissionais envolvidos Mínimo 1 Webdesing e 1 programador 1 Profissional é suficiente
Olhando o quadro acima, fica claro que o custo do projeto para uma programaçãotradicional aumentará, pois terá mais mão de obra especializada. Não devemos
desmerecer este custo, afinal, todo o trabalho dispensado para construção de umsistema/web site merece ser recompensado. Trata-se aqui de aprender a otimizar otempo de trabalho obtendo resultados tão ou mais satisfatórios.
É inegável que alguns projetos necessitam realmente de programação, pois se tratade um sistema muito específico, porém, muitas questões podem ser resolvidaslocalizando um componente do Joomla!
2.4 Hospedagem de sites compatível com Joomla
Para que seja possível instalar o Joomla!, é necessária a contratação de um serviçode hospedagem que dê suporte a PHP e tenha banco de dados MySQL. Em geral,os planos de hospedagem Linux oferecem estes serviços.
Existe ainda a possibilidade de contratação de plano de hospedagem quecontempla script de instalação do Joomla!, o mais famoso é o script chamadoFantástico, que muitos servidores oferecem em seus planos de hospedagem. Estesscripts automatizam a instalação facilitando o processo.
Independente de instalação via script ou manualmente, é ainda necessário oconhecimento da ferramenta, pois a instalação gera um site padrão do Joomla!,sendo necessário realizar configurações necessárias para customizar o projeto. Os provedores de hospedagem não costumam dar suporte para o conteúdo do site, ou
seja, não haverá suporte para a configuração do Joomla!, somente e quando muito, para a instalação.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
8/62
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
9/62
Joomla!
9 2011 Alfamídia Prow.
em Joomla! ficará no seu servidor de hospedagem ou então utilizar em umservidor local, utilizando por exemplo a instalação do WampServer, que rodalocalmente PHP e MySQL na sua própria máquina. Abordaremos esta instalação
posteriormente nesta unidade.Antes de enviar ao servidor, contudo, devemos ter o nosso banco de dados criadono servidor de hospedagem. É o que veremos a seguir:
3.2 Configurando o banco de dados no provedor dehospedagem.
Cada provedor tem o seu método de criação de banco de dados, nesta apostilautilizaremos a criação via CPanel, que é um dos softwares de Painel de Controle
de Hospedagem mais usado no mundo.Para poder configurar estes dados, você deverá já ter contratado em um provedorde hospedagem um plano de hospedagem que contemple Banco de Dados e já terconfigurado os DNS ( Domain Name System) do seu provedor no registro do seudomínio. Caso não tenhas a senha do seu Painel de Controle, solicite ao suporte doseu provedor para que possas configurar o Banco de Dados.
Tendo estes dados com você, vamos partir para a configuração:
3.2.1 Criando o banco de dados
1 – Acesse o Painel de Controle do servidor pelo endereço que seu provedordisponibilizou, com seu nome de usuário e senha, e após localize a opção Bancode dados MySQL
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
10/62
Joomla!
10 2011 Alfamídia Prow.
Entrando em “Banco de dados MySQL”, a primeira opção da tela é para criar um
novo banco de dados. Vamos criar um banco para o Joomla!. Note quenormalmente é dado um prefixo ao nome do banco que se está criando. Este prefixo é normalmente o nome de usuário que o seu provedor de hospedagemdesignou para você acessar o painel de controle.
3.2.2 Criando o usuário do banco de dados
Após criar o Banco de Dados, o próximo passo é criar um usuário para utilizar tal banco. Para isto, na tela do Banco de dados MySQL existe a opção de criação deusuário, conforme imagem abaixo:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
11/62
Joomla!
11 2011 Alfamídia Prow.
Importante: da mesma forma que o nome do Banco de Dados, o nome criado para
o usuário também deve levar um prefixo, que é o nome de usuário que o provedorde hospedagem criou para ser usado na sua conta. Ex: prefixo_alfa.
Guarde bem a senha utilizada pois ela será necessária para configurar os parâmetros do Joomla!.
3.2.3 Associando o Banco de dados com o usuário criado
Após a criação do Banco de dados e do usuário a ser utilizado, é necessário criarum vínculo entre eles, para que possa ser utilizado pelo servidor.
Este vínculo é configurado na mesma tela de criação de Banco de Dados e deusuário para Banco de Dados, conforme mostra a imagem abaixo:
Escolha o Banco e usuário criado por você para este projeto, e clique emAdicionar. Uma nova tela aparecerá para que seja criado as permissões:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
12/62
Joomla!
12 2011 Alfamídia Prow.
Marque a opção “ All Privileges” para dar a este usuário todos os pr ivilégios deacesso ao banco, necessário para a utilização do mesmo.
Após, clique em “Fazer Alterações”
3.3 Enviando os arquivos Joomla! para o servidorweb.
Após ter realizado a configuração do Banco de Dados e de ter vinculado o pacotede instalação do Joomla! ao banco, é hora de realizar o upload dos arquivos para o banco de dados.
Para realizar este upload, você deverá usar um programa de FTP ( File Transfer Protocol ). Nós utilizaremos o programa FileZilla, que é disponível gratuitamentena internet pelo endereço: http://filezilla-project.org
Para realizar a conexão com o seu provedor, é necessário o host, usuário e senhade FTP.
Conectado ao FTP, do lado esquerdo aparecerá o seu computador, e do lado direitoo servidor web da sua hospedagem. Se você deseja que o Joomla! seja instalado nodiretório principal do seu site, e que quando digitado o domínio do seu site(www.enderecodoseusite.com.br ) já abra o site em Joomla!, você deverá transferiros arquivos da esquerda para a direita, para dentro da pasta public_html ou pastawww. Se desejar em um subdiretório, crie este diretório na pasta public_html ou
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
13/62
Joomla!
13 2011 Alfamídia Prow.
pasta www. No nosso caso, enviaremos para a pasta joomla que abrirá para ousuário final digitando o endereço no site com / joomla no fim. Ex:www.enderecodoseusite.com.br/joomla
Para transferir os dados, selecione os arquivos que se apresentam do ladoesquerdo, e após arraste-os para dentro da pasta de destino. Na parte inferior do
FileZilla acompanhe as transferências:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
14/62
Joomla!
14 2011 Alfamídia Prow.
Aguarde até que todos os arquivos sejam transferidos.
3.4 Utilizando servidor local para instalação
3.4.1 Instalando o WAMP Server
Primeiramente, devemos baixar o WampServ, software que instalará o Apache,PHP e MySQL, também o phpmyAdmin e SQLitemanager.
Você deve fazer download do software em: http://www.wampserver.com/dl.php
Após, execute o arquivo que você baixou, ele vai perguntar se você desejacontinuar a instalação, clique em SIM.
Será exibido a tela de apresentação, clique em NEXT, logo apos leia o Termos de
Uso e clique novamente em NEXT.Escolha onde será instalado o software, é altamente recomendavel deixar oc:\wamp como padrão, pois nomes com espaços ou maiores que 8 digitos poderãoser problemas no futuro, na hora de configuração dos servidores. Clique em NEXT, duas vezes, e após clique em INSTALL.
Você deve informar o programa, qual o seu navegador padrão. Se você desejautilizar o Internet Explorer, você deve ir no caminho C:\Arquivos de
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
15/62
Joomla!
15 2011 Alfamídia Prow.
programas\Internet Explorer e escolher o arquivo iexplore.exe, mas caso você prefira o Firefox, escolha o caminho C:\Arquivos de programas\Mozilla Firefox eselecione o arquivo firefox.exe. Depois de escolher uma dessas opções, clique em
OK.
Você deve informar o servidor SMTP (servidor de e-mail), mas como estamosinstalando para fins educativos inicialmente deixaremos esta opção como padrão,apenas clique em NEXT.
Instalação concluida! Clique em FINISH para executar o WampServer.
O WS esta rodando em seu sistema, para utiliza-lo você deverá encontrar um ícone
igual a este: ao lado do relógio do Windows, clique sobre o botão direito,vá até LANGUAGE e selecione PORTUGUES.
Agora clique uma vez com o botão esquerdo sobre o mesmo icone e verá todas asopções do programa, como parar, reiniciar e iniciar os serviços (php, mysql,apache).
Os serviços já estão ativos no seu sistema. Por padrão você tem as seguintesconfigurações:
Acesso ao servidor web local se dará pelo http://localhost/
Diretório dos seus arquivos públicos será o C:\wamp\www
Gerenciador Mysql – Phpmyadmin (recomendado): http://localhost/phpmyadmin/Gerenciador Mysql – SQLiteManager: http://localhost/phpmyadmin/
Informações sobre o seu servidor: http://localhost/?phpinfo=1
3.4.2 Instalando o Joomla! localmente
Instalado o Wamp, descompacte o pacote do Joomla! na pastac:/wamp/www/XXX, onde XXX é o nome do projeto que será trabalhado.
Após, acesse por http://localhost/XXX (novamente, XXX é o nome da pasta
criada)Aparecerá a instalação do Joomla, confirme segue na apostila.
3.5 Instalando seu site em Joomla!.
Depois de enviado para o servidor de hospedagem ou localmente, já podemoscomeçar o procedimento de instalação do seu site em Joomla! no servidor.
http://localhost/?phpinfo=1http://localhost/?phpinfo=1http://localhost/?phpinfo=1http://localhost/XXXhttp://localhost/XXXhttp://localhost/XXXhttp://localhost/?phpinfo=1
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
16/62
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
17/62
Joomla!
17 2011 Alfamídia Prow.
No passo 2, devemos prestar atenção para os requisitos (primeiro retângulo, onde todosrequisitos devem ser atendidos. Nas configurações recomendadas, é permitido que algumaconfiguração não esteja adequado para avançar para a próxima etapa.
Clicando no botão Próximo, iremos para o passo 3, que trata da licença de uso. O Joomla! éum software regido pela licença GNU/GPL.
GNU General Public License (Licença Pública Geral), GNU GPL ou simplesmente GPL, éa designação da licença para software livre idealizada por Richard Stallman no final da
década de 1980, no âmbito do projeto GNU da Free Software Foundation (FSF).Ao passar para a próxima parte, o passo 4, configuraremos o banco de dados.
Muita atenção nesta configuração:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
18/62
Joomla!
18 2011 Alfamídia Prow.
Os dados a serem preenchidos nesta etapa são os que você guardou ao criar o Banco deDados.
Veja como preencher estes campos:
Nome do Servidor Aqui configuramos o nome do servidor de banco de dados, que poderá ser localhost ou poderá ter um endereço específico. Você pode descobrir o endereço no Painel de Controle, no item Banco deDados MySQL estará informado o Host SQL Remoto
Nome de Usuário Aqui vai o usuário criado no Painel de Controle da suahospedagem.
Senha Aqui vai a senha do usuário criado no Painel de Controle.
Nome do Banco dedados
Aqui vai o nome do Banco de Dados criado.
Após realizar esta configuração, pode clicar em Próximo.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
19/62
Joomla!
19 2011 Alfamídia Prow.
Nesta etapa configuramos a camada FTP.
É interessante que seja criado no Painel de Controle da sua hospedagem um usuário de FTPexclusivamente para esta camada, pois isto aumenta a segurança do seu site.
Após configurar os dados de FTP, a próxima etapa nos pede dados para configuração doJoomla!, como nome do site e senha para administração.
Preencha o nome do site, que será o nome usado no Joomla!, preencha o seu e-mail, umasenha para administrar o Joomla!, e para nós que estamos iniciando no trabalho do Joomla!,o interessante é utilizar a opção “Instalar exemplo de conteúdo”, que aparece conformeimagem abaixo:
Após realizar este procedimento, clique no botão Próximo.
Pronto, agora para prosseguir é necessário entrar no FTP através de um programade FTP, como o FileZilla, e renomear a pasta installation, coloque as letras old na
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
20/62
Joomla!
20 2011 Alfamídia Prow.
frente, alterando o nome para oldinstallation, desta forma, o Joomla! não mais procurará instalar quando inicia, e você terá o site no ar.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
21/62
Joomla!
21 2011 Alfamídia Prow.
Unidade 4
Utilização e Configurações após ainstalação
4.1 Acesso ao site
Após a instalação e remoção ou edição do nome da pasta installation, acessando aURL onde o Joomla! foi instalado, você verá a página inicial do Joomla!, no seutemplate padrão:
Agora, para realizar alterações na estrutura do site, devemos conhecer o ambientede administração:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
22/62
Joomla!
22 2011 Alfamídia Prow.
4.2 Acesso a Administração do Joomla!
Para administrar o Joomla!, você deverá entrar com a mesma URL do site, porém
acrescentando/administrator no fim.Ex: www.enderecodoseusite.com.br/joomla/administrator
Aparecerá a tela de login:
O nome de usuário padrão que a instalação gera é admin, e a senha você escolheu
em uma etapa da instalação. Na administração, por enquanto está liberado apenas o idioma inglês, mas veremoscomo acrescentar o idioma português.
Entre com seu usuário e senha e vamos começar.
4.3 Pacote de Tradução
Para facilitar a utilização do Joomla!, aprenderemos primeiramente como alterar oidioma para português do Brasil.
Para isto, você deve acessar o site oficial do Joomla: www.joomla.org , e localizar aopção Extensions, nesta opção, uma das categorias é Language, onde encontra-seos pacotes de tradução.
Realize o download do pacote de tradução, cuide para realizar o download damesma versão do Joomla! que foi instalado.
Após o download, na Adminsitração do Joomla! vá ao menu Extensions, opção Install/Uninstall.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
23/62
Joomla!
23 2011 Alfamídia Prow.
Busque no campo Package File: o arquivo que você baixou. E após clique emUpload File & Install
Este procedimento fará com que seja instalado o pacote automaticamente.
Após isto, vá novamente ao menu Extensions, mas agora na opção Language Manager .
Aparecerá o idioma português, escolha-o e marque como padrão ( Default ), tantona opção Site, quanto Adminsitrador .
Pronto, seu Joomla! está agora traduzido para Português, pronto para ser melhorexplorado.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
24/62
Joomla!
24 2011 Alfamídia Prow.
Unidade 5
Administração básica do Joomla
5.1 Administração de Usuários
O Joomla! permite que mais de um usuário utilize a administração, e que váriosusuários possam se cadastrar para ter acesso a conteúdos restritos.
Quando o usuário se cadastra no Joomla! pelo site, ele recebe um e-mail deconfirmação para dar segurança evitando cadastros falsos, pois só confirmando o
cadastro é que o usuário poderá utilizar sua conta.O Administrador pode gerenciar estes usuários, desabilitando-os, criando novosusuários e lhes concedendo permissões maiores.
Para realizar estas alterações, na Administração do Joomla!, vá ao menu Site,Administrar Usuários.
Nesta tela você poderá realizar as alterações necessárias para gerenciar osUsuários do seu site em Joomla!.
5.2 Administração de Mídias
Existe um local específico no Joomla! para inserir imagens e arquivos que serãoutilizados posteriormente pelo site, em artigos e páginas. Este local é aAdminsitração de Mídias.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
25/62
Joomla!
25 2011 Alfamídia Prow.
SUGESTÃO: Crie pastas para organizar os arquivos inseridos, pois estaorganização faz a diferença na hora de dar manutenção no site, quando vai seutilizar as mídias.
5.3 Configuração Global
No item configuração global podemos configurar dados como descrição do site e palavras chaves para auxiliar a busca por robôs buscadores, configurar dados doservidor, como banco de dados e configuração de envio de e-mail do site.
Cuide na alteração destas opções, pois a alteração indevida, por exemplo, dasconfigurações do banco de dados, pode retirar o site do ar.
5.4 Menus
O sistema de menus do Joomla! funciona como um módulo, pois dependendo domenu, muda a posição em que ele se encontra, e ainda assim é possível alterar sua
posição pelo Gerenciamento dos Módulos, que veremos mais a frente na apostila.Para acessar a Adminsitração de Menus, vá ao menu Menus, Administrar Menus.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
26/62
Joomla!
26 2011 Alfamídia Prow.
O menu: Main Menu refere-se ao menu principal. É nele que está a página inicial.Todos os menus podem ser alterados, incluindo itens e retirando itens. Para tanto,na coluna: “Itens de Menu” está um botão para acessar esta ação.
Neste item, podemos incluir novos itens de menus. Estes itens por sua vez, podemter diferentes destinos, como links para artigos, para galeria de fotos, ser umsubmenu e outros itens que podem ser acrescentados posteriormente, como serátrabalhado adiante na apostila.
5.5 Conteúdo
É onde encontra-e o importantíssimo gerenciador de artigos. Artigos são os itensindividuais de conteúdo que formam as páginas do site. Temos também ascategorias e as sessões. Trabalharemos com estas informações na apostila, emunidade posterior.
5.6 Conceitos Joomla!
A diferença de Componentes, Módulos, Plugins e Idiomas, segundo o site oficialdo Joomla! é:
5.6.1 Componentes
O maior e mais complexo tipo de extensão. Componentes são como mini-aplicações que desenham o corpo principal da página, que podem ser acessados pela administração para serem configurados.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
27/62
Joomla!
27 2011 Alfamídia Prow.
5.6.2 Módulos
Uma extensão mais flexível e leve usada para renderizar uma página é um módulo.
Pode inclusive ser visto dentro de um componente, como componente de artigos,de registro.
São usados principalmente para ser inseridos nas posições do template.
5.6.3 Plugin
Uma das mais avançadas extensões para Joomla! é o plugin. Um plugin é umasessão de código que roda quando um evento predefinido acontece dentro doJoomla!. Um exemplo de plugin é um editor de texto, que roda quando o eventoque possibilita a edição de um artigo ocorre.
5.6.4 Idiomas
Talvez a extensão mais básica e importante seja os idiomas: um pacote que traduzo Joomla! e seus principais módulos e componentes nativos ou não.
Sobre temas criados, trataremos em outro capítulo da apostila. Vamos aprenderaqui a inserir novos temas, buscar temas e adaptá-los.
Por padrão, os seguintes componentes integram o Joomla!
Conteúdo
Banners
Contatos
Newsfeeds
Pesquisar
Links
5.7 Menu Componentes
Componentes São as extensões mais importantes para um site Joomla!, eles são osmódulos, plugins, modelos (templates) e idiomas.
Para buscar as extensões do Joomla! temos o endereço:http://extensions.Joomla!.org/ que é o repositório oficial de extensões.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
28/62
Joomla!
28 2011 Alfamídia Prow.
5.7.1 Fonte de Notícias Externas
Quando se tem sites com RSS possibilita a inserção de conteúdo dinâmico interno.
A tecnologia do RSS permite aos usuários da internet se inscrever em sites quefornecem "feeds" RSS. Estes são tipicamente sites que mudam ou atualizam o seuconteúdo regularmente.
Normalmente os “feeds” ficam em um endereço comowww.nomedoblog.com.br/feed.
Para inserir uma fonte de notícia externa, basta ir ao menu Componente/ Fonte de Notícia. Pode-se configurar as Categorias e as Fontes.
Configurando a fonte. Clique no botão Novo:
Digite o link do site com “feeds” RSS, escolha a categoria criada previamente eclique em Salvar.
O resultado é as últimas noticias daquele site com o layout do seu site:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
29/62
Joomla!
29 2011 Alfamídia Prow.
5.7.2 Formulário de Contatos
Contato é um componente nativo do Joomla!, devemos configurar os formuláriosde contato, que podem ser múltiplos ou um só, e posteriormente deve ser inseridovia menu da forma desejada.
Para criar um formulário, vá ao menu Componente/Contatos (podemos configurarcategorias e os próprios formulários)
Criando Formulário: No formulário você pode configurar os dados que aparecerão, e conta com parâmetros que podem inclusive banir determinados e-mails. Veja na imagem aseguir.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
30/62
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
31/62
Joomla!
31 2011 Alfamídia Prow.
O Joomla! permite instalação de extensões em arquivos zip instaláveis. A versão1.5 irá automaticamente detectar o tipo de extensão e realizará a instalação.
5.9 Gerenciador de Módulo
O gerenciador de módulo (Menu Extensões/Administrar Módulo) controla os parâmetros e alocação de todos os módulos do site Joomla!, como mostrado na
imagem abaixo:
Módulos são como mini-componentes. O que os diferenciam é que o componentesempre exibe o seu conteúdo no corpo principal e o módulo exibe em localdesignado.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
32/62
Joomla!
32 2011 Alfamídia Prow.
Por Exemplo: O módulo Banner pode ter seu local atribuído no topo, ou,dependendo do template e estratégia usada, ficaria melhor na posição esquerda.
5.10 Gerenciador de Plugin
O gerenciador de plugin (Menu Extensões/Administrar Plugin) é onde você podecontrolar as opções de plugins instalados.
Alguns plugins não apresentam opções, mas sim servem para fins específicos, a
exemplo do plugin “Content – Email Cloaking”, que busca nas páginas endereçosde e-mails e substitui no código-fonte por JavaScript, evitando assim quespammers busquem através de programas específicos os endereços para envio despam.
5.11 Gerenciador de Temas
O gerenciador de temas (Menu Extensões/Administrar Tema) é onde você podecontrolar os templates, instalando e aplicando os mesmos ao seu site Joomla!.
Encontra-se nesta página ainda a opção de instalar temas para o site ou para a partede administração.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
33/62
Joomla!
33 2011 Alfamídia Prow.
Unidade 6
Conteúdo dinâmico: Artigos
Os artigos servem para inserirmos notícias e conteúdos no site Joomla! de formadinâmica.
Este é o tópico no qual devemos mais ter cuidado, porque um conteúdo bemdistribuído e de fácil acesso é a garantia de sucesso na visitação do seu web site, eo contrário pode determinar o fracasso do mesmo.
Antes de sair criando artigos, o correto é configurar as Sessões e as Categoriasantes, afinal, este é um Sistema Gerenciador de Conteúdo, e sua principal função e
organizar o conteúdo.Antes de mais nada, faça-se um desafio. Não designe a função organização para oJoomla!. Faça você antes um mapa das informações. Desenhe um rascunho decomo deseja que o conteúdo seja organizado.
Abaixo montamos um exemplo para facilitar sua vida:
6.1 Sessões
As sessões de artigos servem para organizar o material do site. Deve-se criar assessões individualizando os itens do site, pois ao criar os menus posteriormente, é
Página Inicial Sobre nós
Serviços
Fale Conosco
Blog
Sobre NósTexto sobre a
empresa com uma foto
ServiçosMétodo de trabalho Gráfica Digital
Plotter
Fale ConoscoDados como Telefone,
e-mail, mapa.
BlogIdéias, novidades enotícias sobre os
serviços
Gráfica DigitalMuita informação e
imagem sobre
PlotterMuita informação e
imagem sobre
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
34/62
Joomla!
34 2011 Alfamídia Prow.
possível apresentar uma lista de todos os artigos de terminada sessão, facilitando anavegação do site
Para criar novas sessões e administrar as já criadas, vá ao menu Conteúdo,Administrar Sessão
6.2 Categorias
Após criar as Sessões, as Categorias são necessárias e servem como subseção, podendo uma sessão ter várias categorias. Ajudam também na organização e nainclusão de menus do web site.
Ao criar uma nova categoria, pode-se definir também se o mesmo será público ourestrito aos registrados do site.
6.3 Criando ArtigosArtigos de conteúdo são a mais baixa camada de hierarquia e são os maisimportantes. Por se tratar diretamente da informação a se passar para o usuário doweb site. É a famosa “página”, como o usuário chama.
Ao inserir um novo artigo, é possível escolher em qual Sessão e Categoria ele seenquadra, se deve aparecer na página inicial ou não, e ainda permite a inserção demetadados, como forma de ajuda nas buscas por robôs de buscadores na internet.
Para inserir um novo artigo, vá ao menu Conteúdo – Administrar Artigos:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
35/62
Joomla!
35 2011 Alfamídia Prow.
Clicando no botão Novo, um editor aparecerá e podemos incluir o conteúdo quedesejarmos.
Ao rodapé na inserção de artigos, temos 3 botões importantes:
O botão Imagem permite a inserção de imagens no artigo.
Clicando neste, abrirá uma janela igual à abaixo:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
36/62
Joomla!
36 2011 Alfamídia Prow.
Se a imagem já foi enviada anteriormente, basta escolher e clicar em Inserir, docontrário, no fim da tela tem a opção de envio de novas imagens, após realizar oupload por este campo, é possível inserir a imagem.
DICA: Insira sempre a imagem do tamanho exato que deseja trabalhar no website, assim você evita imagens distorcidas e envia uma imagem com tratamentoadequado, evitando assim ter imagens pesadas no site.
O botão Quebra de página serve para que para textos longos, possa ter várias páginas para facilitar a leitura e não estragar a parte visual do site.
Ao inserir uma quebra de página, no frontend aparecerá uma numeração para trocade página para continuação do artigo.
Outro botão que é bastante importante é o botão Leia Mais...
O botão leia mais serve para que, ao apresentar na capa ou com vários itens de
categoria, o seu texto não fique muito extenso, podendo em determinado ponto terum botão “leia mais...” para que ao clicar apareça o texto completo .
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
37/62
Joomla!
37 2011 Alfamídia Prow.
Unidade 7
Menus
7.1 Integração Artigo/Menu
E como colocar um artigo como link de menu? Esta é uma tarefa importante. Nomenu podemos lançar todos os artigos de determinada categoria, ou diretamenteum artigo. Vamos à prática:
Crie um artigo, escolha uma sessão e uma categoria. Se ainda não tiverescadastrado nenhuma categoria ou sessão, isto deve obrigatoriamente ser feito.
Depois disto, acesse a Administração, o menu Menus e Main Menus (mas sedesejar colocar este artigo em outro menu, é só escolher outro menu)
Clique no botão Novo, para incluir um novo item de menu, escolha LinkInterno/Artigos/Artigo/Layout Padrão de Artigo:
Agora, na lateral direita, em Parâmetros (Básico) clique para escolher um artigo:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
38/62
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
39/62
Joomla!
39 2011 Alfamídia Prow.
Salvando este item de menu, ao clicarmos no mesmo teremos a seguinte tela:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
40/62
Joomla!
40 2011 Alfamídia Prow.
7.3 Menu em Layout Padrão de Categoria
O Layout Padrão de Categoria lista uma tabela com todos os artigos de uma
determinada categoria. A montagem é idêntica ao Layout do Blog de Categoria,mas a maneira como é apresentado no site Joomla! Muda.
Para criar este menu, Vá em Menus e Main Menus (mas se desejar colocar esteartigo em outro menu, é só escolher outro menu)
Clique no botão Novo, para incluir um novo item de menu, escolha Link Interno/Artigos/Categoria/Layout Padrão de Categoria. Veja o frontend.
7.4 Menu do Componente Contato
O componente interno contato deve serinserido no menu através da Administração deMenus, porém antes deve ser criado oformulário pelo menu Componentes/Contato.
No caso de ter vários formulários de contato, é possível listar como “Layout de Categoria deContato”, que no site Joomla! aparecerá umalista dos formulários. Um exemplo é terformulários por setor ou filiais.
Normalmente é utilizado “Layout de Contato Padrão” para apresentar oformulário.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
41/62
Joomla!
41 2011 Alfamídia Prow.
7.5 Submenus
Você pode designar o item de menu para terum Item Pai. Desta forma, o item passa a serum submenu. Dependendo da formatação dotemplate/layout, este pode aparecer comomenu pop-up.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
42/62
Joomla!
42 2011 Alfamídia Prow.
Unidade 8
Extendendo o Joomla!Dificilmente você encontrará um site Joomla! que não tenha sido adicionado novasfuncionalidades, até porque sem estas funcionalidades o site ficaria básico.
Existem centenas de extensões disponíveis, algumas gratuitas, outras pagas, que podem simplesmente resolver o problema que você precisa solucionar por um preço que realmente é compensatório.
Como já vimos em outra unidade, as extensões são de diversos tipos: módulos, plugins, templates e idioma. As extensões são itens que agregarão o site, que podem ser instalados e desinstalados conforme a necessidade.
Já aprendemos a realizar as instalações, agora vamos focar em conhecer as principais extensões do Joomla!
8.1 Extensões úteis
Apresentaremos algumas extensões e pode acontecer de algumas boas extensõesficarem de fora da nossa lista. Indicamos sempre buscar em fórum da área e no sitehttp://extensions.joomla.org ou em http://extensionprofessionals.com
8.1.1 ComentáriosJom Comment é um poderoso sistema de comentários baseado em Ajax para o site Joomla! Contempla sistemaCaptcha, evitando que spans apareçam no site, é um sistema profissional e pago. Existem obviamente vários sistemassimilares no site oficial de extensões, ao lado temos aimagem do menu do site oficial de extensões que mostraonde localizar tais componentes.
8.1.2 E-commerce
O e-commerce mais conhecido e usado é o VirtueMart. Trata-se deum sistema de e-commerce completo, com categorias, produtos, pedidos, cupom de descontos e ainda pode ser usado apenas como umcatálogo. O site do projeto é http://virtuemart.net
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
43/62
Joomla!
43 2011 Alfamídia Prow.
8.1.3 Galerias de Imagem
Existem várias galerias de imagens, e boas galerias. Citamos a Phoca Galerry,Exposé e Ozio Galery. Estas galerias são gratuitas, e contemplam opção devisualizar a imagem maior. A Ozio trás mais modelos de apresentação, já a Phocaé uma galeria mais fácil para ser utilizada, possibilitando mudança de layout.
8.1.4 Formulários
Um bom componente de formulário é o perForms(http://joomlacode.org/gf/project/performs), com suporte a Captcha, criaformulários simples em segundos.
Outro muito usado e gratuito é o JForms(http://extensions.joomla.org/extensions/contacts-and-feedback/forms/6965)
8.1.5 Agenda/Calendário
Uma boa ferramenta de agenda e eventos é oEventList, que além de criar uma agenda, gerenciaos compromissos no site, cadastrando locais, fotos
dos mesmos, gerando em um calendário o vínculocom a agenda pelas datas.
Ao clicar no evento, abre então todos os detalhescadastrados para o mesmo.
8.1.6 Slideshow
O JPG Flash Rotator 2 permite a você selecionar a partir de uma série de imagens para usar em um banner slide show no site Joomla!. Contempla mais de 5transações Flash diferentes e permite outras personalizações, como cor de fundo.
8.1.7 Google Maps
Um plugin que exibe um ou mais mapas do Google dentro de itens de conteúdo doJoomla! é o plugin GoogleMaps Mambot.(http://joomlacode.org/gf/project/mambot_google1). Pode com ele configurar aaltura, largura, latitude, longitude e tipo de zoom.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
44/62
Joomla!
44 2011 Alfamídia Prow.
8.1.8 Newsletter
Um bom componente de newsletter e gratuito é o ccNewsletter
(http://www.extensions.chillcreations.com/ ). Permite o envio com pausa de tempo para evitar que seja considretado SPAM.
8.2 Buscando Temas
Aprenderemos mais a frente como criar um template em CSS para o Joomla!. Neste capítulo veremos como localizar templates para o Joomla! pronto. Existemclubes na internet que você pode se associar e baixar templates para atualizar seusite, ou ainda, pode comprar por demanda um template.
Uma boa pesquisa em buscadores pode trazer templates muito bonitos com preços bem razoáveis.
Segue a lista de alguns sites que disponibilizam, pagos ou gratuitos, template paraJoomla!:
http://www.rockettheme.com
http://www.joomla.com.br/
http://www.templatemonster.com/
Além de uma boa pesquisa nos buscadores, que se encontra muito destestemplates.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
45/62
Joomla!
45 2011 Alfamídia Prow.
Unidade 9
Utilizando um template próprio em CSS Nesta unidade colocaremos em prática o os passos para adaptar um templateJoomla!. Especificamente vamos utilizar CSS (Cascading Style Sheets) paracriação de um layout sem uso de tabelas.
O que é um Template Joomla?
Um modelo Joomla! é um grupo de arquivos que o Joomla! controla naapresentação do seu conteúdo. Não é um web site e não é um design completo,mas a base para a visualização do seu web site Joomla!
Vantagens e desvantagens de usar um modelo CMS, da forma usada pelo
Joomla!: Há uma separação entre o conteúdo e a apresentação, especialmente
quando usado CSS. Isto é bom pois atende completamente os padrõesmodernos da Web.
Uma nova aparência pode ser aplicada a qualquer momento ao site semalterar o conteúdo.
Um layout muito alternativo no design pode ser tarefa complicada paratransformar em um modelo CMS
9.1 Criando um template
Primeiramente, você deve criar um modelo, desenhando-o da forma que desejar:Photoshop, Fireworks, ou diretamente no Dreamweaver.
O propósito é ter um template pronto no Joomla!, para que possamos utilizar estetemplate adaptando-o posteriormente para o sistema Joomla!.
Para ilustrar esta possibilidade, criaremos passo a passo um layout pré-pronto,contendo algumas imagens e criando totalmente no modo tableless, ou seja, semtabelas.
Na pasta template do seu Joomla! instalado vamos criar uma nova pasta. Para esteexemplo, usaremos a pasta alfa_sports.
Para ganharmos tempo com a criação, já temos pronta as imagens, que serãocolocadas dentro da pasta do template alfa_sport, na pasta img. O nome da pastade imagens não é uma regra, mas um bom costume de organização, já que asimagens puderam ficar soltas na pasta do template, porém desorganizadas.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
46/62
Joomla!
46 2011 Alfamídia Prow.
9.1.1 O arquivo templateDetails.xml
Este arquivo deve incluir todos os arquivos que são parte do template. O nome
deste arquivo tem que ser exatamente este: templateDetails.xml (inclusive com oD maiúsculo). Ele inclui informações como nome do autor, contato do autor eversão do tema.
Abaixo segue o exemplo do tema que trabalharemos no nosso exercício, e posteriormente o comentário de cada linha:
alfa_sports
10/06/2010
Andreo CostaGPL
http://www.alfamidia.com.br
1.1
Exemplo para treinamento Joomla!
index.php
templateDetails.xml
css/template.css
img/barra.jpg
img/barra_dir_logo.jpg
img/barra_esq_logo.jpg
user1
user2
breadcrumb
top
left
banner
footer
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
47/62
Joomla!
47 2011 Alfamídia Prow.
Azul
Vermelho
Agora explicando as partes do código mais importantes:
Instruções para o instalador que diz que o tipo deste documento é template, e aversão do Joomla! é 1.5 (mas fica compatível com versões futuras, desde queativado modo de compatibilidade)
alfa_sports
Define o nome do seu modelo. Aqui deve aparecer exatamente o mesmo nome da pasta do modelo. Não deve-se usar caracteres especiais nem espaço em branco.
10/04/2010
A data de criação do modelo. O formato em que se apresenta a data não há umaregra, podendo aparecer o mês e o ano, até por extenso.
Andreo Costa
O nome do autor do tema aparece nesta linha.
GPL
Qualquer informação de direito autoral vai nesta linha.
Aqui pode-se colocar o e-mail do autor
http://www.alfamidia.com.br
A URL do web site do autor.
1.1
A versão do template.
Arquivos usados no template, estes ficam assiciados dentro deste código através deoutro código: .
As posições do módulo disponíveis para o template.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
48/62
Joomla!
48 2011 Alfamídia Prow.
Eles descrevem os parâmetros que podem ser passados para permitir funçõesavançadas do template, como geralmente, a cor do modelo.
9.1.2 O arquivo index.php antes dos códigos Joomla!
O que faz o arquivo índex.php? É um arquivo que na realidade contempla bemmais HTML do que PHP, porém, para que rode o código PHP, devemos tê-lo coma extensão adequada.
Este é o arquivo que apresentará o web site Joomla! e contempla a estrutura dotemplate.
Como estamos trabalhando em um modelo pronto em HTML e CSS, primeiramente vamos usar um código que representa um layout, e posteriormentevamos incluir os comandos para que o Joomla! faça parte da estrutura de conteúdodo site.
O código HTML que temos, ainda sem os códigos Joomla!, são estes:
Template para Joomla!
topo aqui
Barra esquerda aqui
Logo aqui
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
49/62
Joomla!
49 2011 Alfamídia Prow.
Barra direita aqui
Menu lateral aqui
Conteudo aqui.
Rodapé Aqui
9.1.3 O arquivo CSS (Cascading Style Sheets)
Somente aquele código, sem nenhum arquivo de estilo, seria apenas um arquivo decor branca com textos pretos na tela, nada mais. O estilo do site se dá no arquivode extensão .css.
Abaixo segue nosso código CSS, que posteriormente será melhorado para otemplate Joomla!
@charset "utf-8";
/* CSS Document */
#geral {
float: left;
width: 950px;
border: 1px solid #D6D6D6;
}
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
50/62
Joomla!
50 2011 Alfamídia Prow.
#geral #topo {
background-color: #E2E3EA;
float: left;
height: 40px;
width: 940px;
padding: 5px;
}
#geral #barra {
float: left;
height: 42px;
width: 950px;
background-image: url(../img/barra.jpg);background-repeat: repeat-x;
}
#geral #barra .barra_dir {
background-image: url(../img/barra_dir_logo.jpg);
background-repeat: no-repeat;
float: right;
height: 42px;
width: 702px;
}#geral #barra .barra_esq {
background-image: url(../img/barra_esq_logo.jpg);
background-repeat: no-repeat;
float: left;
height: 42px;
width: 68px;
}
#geral #barra .logo {
float: left;
height: 42px;
padding-top: 2px;
width: 180px;
background-color: #FFF;
text-align:center;
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
51/62
Joomla!
51 2011 Alfamídia Prow.
}
.logo p{
margin: 0px;
}
#geral #centro {
float: left;
width: 950px;
min-height: 300px;
}
#geral #centro .menulateral {
float: left;width: 180px;
margin-left: 67px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #333;border-bottom-color: #333;
border-left-color: #333;
min-height: 199px;
}
#geral #centro .conteudo {
float: right;
width: 685px;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;
}
#geral #rodape {
padding: 5px;
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
52/62
Joomla!
52 2011 Alfamídia Prow.
float: left;
height: 85px;
width: 940px;
color: #FFF;
background-color: #333;
}
O resultado até agora é uma estrutura simples, com esta aparência:
9.1.4 O arquivo index.php depois dos códigos Joomla!
Agora devemos adaptar o arquivo índex.php para que esteja dentro do padrãoJoomla! É uma tarefa tranquila, pois trata-se apenas de ajustes pequenos, que serãoexplicados por partes:
Antes da tag :
Esta declaração PHP serve simplesmente para ter certeza que o arquivo não vai seacessado diretamente por segurança.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
53/62
Joomla!
53 2011 Alfamídia Prow.
O DOCTYPE não muda, tem que ser desta forma para que seja usado XHTML naforma Transicional, acatando tanto código XHTML quando o HTML.
Dentro da tag
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
54/62
Joomla!
54 2011 Alfamídia Prow.
Da mesma forma que a anterior, aqui incluímos a posição “user 2”.
Na de classe “menulateral”:
Na div que receberá o menu lateral, usamos a posição “left”. Note que trabalhamoscom as posições padrão do Joomla! para facilitar o trabalho.
Na de classe “conteudo”:
Note que aqui temos duas linhas, a primeira é a posição “breadcrumbs”, ondecostuma-se deixar o módulo de mesmo nome que serve para auxiliar a navegação.A segunda linha é a posição que todo o conteúdo principal aparecerá. Quando vocênavegar no site, clicar em um artigo, por exemplo, aparecerá neste ponto.
Na de classe “rodape”:
Nesta deixamos a posição “footer” para indicar itens para o rodapé.
9.1.5 Melhorias no arquivo CSS
Devido a maneira diferente que os navegadores apresentam as formatações do site,o principal deles é dar margens e espaçamentos diferentes para mesmas tags, umadeclaração importante a se fazer é esta:
*{
margin: 0;
padding: 0;}
Este código fará com que globalmente todas as tags fiquem com margem eespaçamento interno zerado. Quando desejar do contrário, é só declarar via CSS para que isto aconteça. Não é fácil?
Configure também a tag , informando qual a tipografia a ser usada no site por padrão.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
55/62
Joomla!
55 2011 Alfamídia Prow.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
56/62
Joomla!
56 2011 Alfamídia Prow.
Unidade 10
Dicas úteis
10.1 Otimizando o site Joomla! para obter maisacessos
O processo de otimização de site é um assunto polêmico, porque existem nomercado muitas opiniões referente a práticas para se conseguir mais visitas.
Não é da noite para o dia que um site aparece na primeira página do Google, mas
algumas iniciativas fazem com que isto ocorra mais rapidamente que o natural.A otimização está nos detalhes:
O título da página, por exemplo, deve sempre estar associado com o que oconteúdo trás.
Breadcrumb, porexemplo, é um móduloque sempre que possívelvale a pena usar, poisele mostra o caminho que está se navegando e ajuda na indexação do conteúdo.
Existem também algumas extensões específicos para auxiliar na indexação do siteJoomla!, como “Tags for Joomla!” que cria lista de tags, tags populares e ajuda naindexação do conteúdo.
Uma configuração básica que deve ser feita éna configuração global, marcar Sim nasconfigurações de SEO, porém, não é só istoque faz com que estas configuraçõesfuncionem, temos que nos preocupar com oservidor Apache, mod_rewrite
Mas o Que é o mod_rewrite?
O mod_rewrite como é conhecido, ou rewrite engine, é uma módulo do servidorweb Apache que é usado para re-escrever URLs antes que os itens solicitadossejam buscados no servidor e isto pode ser usados para vários propósitos. Asregras do mod_rewrite serão lidas a partir do seu arquivo .htaccess, por isso éimportante sempre colocar o “RewriteEngine On” e sempre testar muito bem asregras para seu site não entrar em loop e ficar inacessível.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
57/62
Joomla!
57 2011 Alfamídia Prow.
O que é uma URL amigável para o buscador?
Uma URL amigável é uma URL que seja bem aceita pelo motor de busca,normalmente a URL é longa, contém valores dinâmicos e dificilmente contém palavras-chave. Já as URLs amigáveis são curtas, estáticas e contém as keywordsque se deseja obter maior relevância.
Como ativar o mod_rewrite?
No pacote do Joomla! já vem um arquivo nomeado htaccess.txt, no servidor, altereo nome deste arquivo para .htaccess (com ponto na frente mesmo). Se já houveralgum arquivo com mesmo nome, faça um backup do mesmo antes e depois refaçao procedimento para substituí-lo.
Pronto, o endereço que antes poderia ser assim:
http://www.site.com.br/joomla/index.php?option=com_content&view=article&id
=47:artigo-com-imagem&catid=34:alfamidia&Itemid=54
Passa a ficar assim:
http://www.site.com.br/joomla/alfa-blog-de-categoria/47-artigo-com-imagem.html
NOTA:
Algumas extensões do Joomla! podem não funcionar corretamente com a opção deURL Amigáveis ativado. Recomenda-se sempre que esta função estiver habilitada,que se teste todo o site.
Para problemas com esta opção, pode-se obter extensões de URL amigáveis, como por exemplo o JoomSEF e o sh404.
10.2 Vinculando o Joomla! com o Banco de Dados
O arquivo configuration.php contém os dados do Banco de Dados. Caso sejanecessária a troca do nome do banco, por um backup ou troca de servidor, conheçacomo este arquivo funciona e como pode ser editado:
Mas o que é este arquivo?
Este arquivo é responsável por conectar o seu site com o Banco de Dados. Alémdisto, ele contempla informações importantes de Search Engine Optimization,técnica responsável para alavancar a audiência do site pelos buscadores nainternet, mas sobre isto trabalharemos em outra unidade à frente.
Com o arquivo aberto, localize as linhas correspondentes a configuração da basede dados:
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
58/62
Joomla!
58 2011 Alfamídia Prow.
E vamos preencher os dados corretamente. Abaixo a tabela que explica cada umadas variáveis que serão alteradas:
$host Aqui configuramos o nome do servidor de banco de dados, que poderá ser localhost ou poderá ter um endereço específico. Você podedescobrir o endereço no Painel de Controle, no item Banco de DadosMySQL estará informado o Host SQL Remoto
$user Aqui vai o usuário criado no Painel de Controle da sua hospedagem.
$password Aqui vai a senha do usuário criado no Painel de Controle.
$db Aqui vai o nome do Banco de Dados criado.
Abaixo, os dados alterados:
Note que somente foi alterado o que está entre aspas simples, pois qualquer outraalteração manual neste arquivo poderá comprometer o funcionamento do Joomla!, portanto, preste bem atenção neste procedimento.
Após alterado, salve o arquivo, que passaremos a fazer o upload para o servidorweb.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
59/62
Joomla!
59 2011 Alfamídia Prow.
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
60/62
Joomla!
60 2011 Alfamídia Prow.
Unidade 11
Novas versões
11.1 Versões novas do Joomla!
O Joomla! nesta apostila foi tratada na versão 1.5 e atualmente está na versão 1.7.Devido a incompatibilidade das versões, alguns componentes, plugins e/oumódulos ainda não existem ou não funcionam para novas versões.
Por isso alguns cuidados devem ser tomados ao usar outras versões do Joomla!. É
bom vermos se o arquivo que vamos baixar do Joomla! tem compatibilidade.
Nos casos de haver o aplicativo para novas versões, pode ser representado destamaneira, argumentando que é Nativo do 1.5 e serve às extensões 1.6 e 1.7.
No Joomla! 1.6 passou a ser melhorado algumas funções, entre elas destacam-se:
Legacy Mode excluído;
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
61/62
Joomla!
61 2011 Alfamídia Prow.
Novo Controle de níveis de acesso (ACL) tendo um novo gerenciamento deusuários com um controle mais específico;
Níveis de organização do conteúdo ilimitado usando Categorias; O Joomla 1.6 só funcionará com o PHP 5.2+ e Mysql 5.0.4+;
Retirada do componente de enquete da instalação padrão;
Nomeclatura dos artigos de FRONTPAGE(página principal) agora chama-seFEATURED(destaque);
Novo layout de administração e mudanças na navegação para melhorar ausabilidade;
Dois novos botões: “Salvar e Novo” e “Salvar como cópia”;
Redirecionamento de links (Agora sem desculpas para os famosos erros404).
Módulos com data de expiração;
No Joomla! 1.7 foram mantidas algumas funções do 1.6 e outras atribuídas:
Artigos criados em lote;
-
8/18/2019 32 Joomla [Versão 1.3 2011-12] - Alfamídia
62/62
Joomla!
Módulos com possibilidade de background-image sem precisar acessar oCSS;
Compatibilidade com a versão 1.6; Possibilidade de atualização de versão mantida;
A previsão de duração do Joomla! 1.7 é de 6 meses. E há uma estimativa deque o Joomla! 1.8 seja lançado no início de 2012. Com uma duraçãoaproximada de dois anos, quando será lançado o Joomla! 1.9 que terá duraçãocurta o suficiente para aguardarmos o mítico Joomla! 2.0, com data delançamento prevista para 2015-2016, acreditando que a W3C já tenhacomeçado a implementar o Html 5.