32 joomla [versão 1.3 2011-12] - alfamídia

Upload: otxpmm

Post on 07-Jul-2018

217 views

Category:

Documents


0 download

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

    [email protected]

    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.

     [email protected]

    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.