Lúcio Sérgio Borges Peixoto

Transcrição

1 Joomla Guia Prático Por: Lúcio Sérgio Borges Peixoto

2 SUMÁRIO 1. Introdução 2. Preparando sua máquina 2.1. Instalando o Wamp Instalando o Joomla 3. Algumas pastas e arquivos 4. O Gerenciador 4.1. Início 4.2. Site Configuração Global Idiomas Administrar Mídia Pré-visualizar Estatística Administrar Temas Administrar Lixeira Administrar usuários 4.3. Menus 4.4. Conteúdo Conteúdo por seção Todos os itens de conteúdo Administrar Conteúdo Estático Administrar Seções Administrar Categorias Administrar Página Inicial Administrar Arquivo Visualizações 4.5. Componentes Banners Contacts Difusão de Notícias em Massa Enquetes Notícias Externas Web Links 4.6. Módulos Módulos do Site Banner Menu Rodapé Menu Principal Outro Menu Menu Usuário Login Estatística Difusão de notícias Escolher Temas Arquivo PÁG Por: Lucio Sérgio Borges Peixoto 2

3 Seções Itens Relacionados Wrapper Enquete Usuários On-line Imagens Aleatórias Flash de Notícias Últimas Notícias Popular Top Menu Procurar 4.7. Plugins - Plugins do Site 4.8. Instaladores 4.9. Mensagens Sistemas Ajuda 5. Algumas Extensões 6. Criando um site 7. CSS 8. Backup do Site 9. Transferindo seu site para outro servidor 10. Considerações Finais OBS: Na versão PDF os Links não estão disponíveis Por: Lucio Sérgio Borges Peixoto 3

4 1. Introdução [voltar] O intuito de criação desse material é de apoio aos usuários iniciantes que desejam entender melhor essa ferramenta e assim criar seus próprios sites, oferecendo qualidade, segurança, praticidade e rapidez dos serviços oferecidos. Quando ouvi falar a primeira vez dessa ferramenta, percebi que, era o que precisava para começar a fazer meu site, então comecei a pesquisar em fóruns existentes a possibilidade de aquisição de materiais para estudos e aprender essa tão comentada ferramenta. No entanto, não havia um material reunindo todos os assuntos ou traduzido de forma clara, visto que a documentação oficial estava em inglês e não ajudava o monoglota iniciante. Porém achei artigos e tutoriais que me ajudaram muito. A ferramenta de estudo em questão, é o CMS Joomla, do inglês (CMS - Content Management System) ou Sistema Gerenciador de Conteúdo e sobre ela tentarei repassar de forma simples e com a mais clara linguagem como instalar, gerenciar e dicas de quem passou a usá-la diariamente. Esse material será um guia das aplicações mais usadas, podendo não contemplar opções mais específicas. 2. Preparando sua máquina [voltar] Antes de mais nada, precisamos preparar seu computador para receber a instalação do CMS. Portanto faça os downloads correspondentes para instalação do joomla, assim como, o Banco de Dados MySQL e o Servidor Apache. Indicado como um instalador e configurador automático do Banco de Dados e do Servidor, instalaremos localmente o programa WAMP5 que fará isso por nós. O WAMP5 (que significa Windows, Apache, MySQL, PHP5) é um pacote de programas que instala automaticamente o Apache 1.331, PHP5, MySQL database, PHPmyadmin e SQLitemanager. Disponibiliza também suporte ao uso de scripts PHP e comporta vários add-ons encontrados no site oficial. Com esse pacote você poderá fazer sua página na Internet com muito mais vantagens e vai incrementar ele com muitos mais recursos. Também tornará o site mais dinâmico e rápido conforme a sua habilidade e conforme o servidor de onde você vai hospedar. Também é possível criar um servidor que possa hospedar e armazenar dados ou páginas da Internet em um banco de dados. CONCEITOS INDIVIDUAIS Apache: É um dos maiores servidores de web livre e foi criado em cima de códigos já prontos. O servidor é compatível com o protocolo HTTP. Para saber mais sobre as funcionalidades visite o site oficial do Apache. PHP5: PHP ao pé da letra significa Hypertext Preprocessor. De maneira geral, o PHP é uma linguagem livre orientada a objetos que cria scripts simples. Scripts são partes de um código que executam alguma função. O PHP5 veio Por: Lucio Sérgio Borges Peixoto 4

5 com algumas mudanças para tornar a linguagem um pouco mais forte: é possível refazer construtores e os destruir, com maior visibilidade no acesso, abstração de objetos e, por fim, a interface de objetos. MySQL database: MySQL é um sistema gerenciador de banco de dados (SGDB) que funciona de forma estruturada. Possui um excelente desempenho e é um software livre. Compatível com muitos drivers e também módulos de interfaces para muitas linguagens de programação. Suporta vários tipos de tabelas. PHPmyadmin: Programa desenvolvido para a parte administrativa do PHP. É possível criar e deletar bases de dados ou tabelas. É possível que você faça alterações nas suas tabelas, campos, enfim, tudo o que você precisar alterar na sua base de dados. SQLitemanager: É o sistema gerenciador do SQL. Você pode aplicar o SQLitemanager na hora que estiver montando o seu banco de dados com o MySQL database, que também é incluso no pacote do WAMP5. Sugestão: Crie uma pasta de fácil acesso para armazenamento dos instaladores do joomla, wamp, arquivos de templates e extensões adicionais. Links: Obs.: Trabalharemos com o Sistema Operacional 1 WXP, e o Joomla INSTALANDO O WAMP5 [voltar] Instalação padrão... (Clique no arquivo executável do Wamp5) Abrirá a seguinte janela 1 No Linux o MySQL e o Apache são nativos, ou seja, já vem instalado. 2 Apesar de já ter a versão 1.5 Estável trabalharemos com a versão por possuir extensões adicionais estáveis, já testados pelo autor. Porém nada impeça de vocês instalarem a versão 1.5. Por: Lucio Sérgio Borges Peixoto 5

6 Clique: Executar Clique: Next Por: Lucio Sérgio Borges Peixoto 6

7 Escolha: I accept the agreement Clique: Next Lembra da pasta que você criou? Então defina o caminho Clique: Next Por: Lucio Sérgio Borges Peixoto 7

8 Clique: Next Clique: Next Por: Lucio Sérgio Borges Peixoto 8

9 Clique: Install e na próxima janela, finalize a instalação marcando o item para inicialização do wamp5 toda vez que ligar o computador. Serão criadas as seguintes pastas Obs: Cada projeto (site) terá uma pasta dentro da pasta www. Por: Lucio Sérgio Borges Peixoto 9

10 2.2. Instalando o Joomla [voltar] Copiar o arquivo de instalação do Joomla para dentro da pasta do seu primeiro projeto. Descompactando o arquivo zipado, e terá as seguintes pastas e arquivos. Por: Lucio Sérgio Borges Peixoto 10

11 Agora abra algum Browser 3 e digite o seguinte na barra de endereço localhost/site1 Começaremos então os passos para instalação do CMS, configurando nome de usuários, BD, senhas... 3 O Termo browser vem do verbo to browser: olhar páginas de um livro, revista, etc.; olhar coisas numa loja sem intenção explícita de compra. É um programa que habilita seus usuários a interagirem com documentos HTML (linguagem de hipertexto) hospedados em um servidor de internet. Ex. Internet Explorer, Monzilla Firefox, Opera, etc. Por: Lucio Sérgio Borges Peixoto 11

12 Dica: Para melhor ambientação, leia tudo antes de seguir para os próximos passos. Clique: Próximo Por: Lucio Sérgio Borges Peixoto 12

13 Clique: Próximo Agora preencha os seguintes campos. Obs: No campo Senha do MySQL, por enquanto deixaremos em branco. Por: Lucio Sérgio Borges Peixoto 13

14 Aparecerá a seguinte janela Clique: OK Coloque um nome do site que iremos trabalhar Clique: Próximo Não esqueça: leia tudo antes de seguir através dos passos Coloque seu e senha Importante: Coloque um válido, caso você esqueça a senha, será encaminhado uma nova senha para caixa de entrada do seu . Deixe marcadas as permissões como estão Importante: Altere a senha gerada automaticamente pelo Joomla Por: Lucio Sérgio Borges Peixoto 14

15 Clique: Próximo Pronto o Joomla está instalado. Conforme instrução abaixo, remova a pasta installation que fica dentro da pasta wamp\www\site1. Por: Lucio Sérgio Borges Peixoto 15

16 Clique: Ver Site ou digite na Barra de endereço do Browser localhost/site1 Obs.: O Joomla foi instalo com um layout padrão (conforme imagem acima), nos tópicos seguintes aprenderemos como mudar o layout do site. 3. Algumas pastas e arquivos [voltar] Apresentaremos algumas pastas e arquivos mais utilizados conforme caminho (\wamp\www\site1) Pastas: components Pasta onde são armazenados os dados referentes aos componentes instalados images Pasta referentes as imagens padrões do site inclusive imagem do componente Banners modules Pasta onde são armazenados os dados referentes aos módulos instalados Por: Lucio Sérgio Borges Peixoto 16

17 template Contém as informações dos templates (modelos de layout) instalados Arquivos: Configuration.php Arquivo referente as configurações dos site instalado, caminho do servidor,nome do domínio e etc. Index.php arquivo referente a disposição dos módulo aparecem no site. 4. O Gerenciador [voltar] Para ir à tela do gerenciador, digite na barra de endereço do IE Aparecerá a seguinte tela Digite: Nome de Usuário e Senha Por: Lucio Sérgio Borges Peixoto 17

18 Tela do gerenciador Dica Importante: Quanto ao Gerenciador, segue através desse capítulo, explicações quanto à funcionalidade dos itens da barra de ferramentas, porém, percebe-se que didaticamente a extensão do conteúdo e a complexidade para usuários iniciantes, seria desgastante não alcançando um bom rendimento, contudo, recomendamos que façam uma rápida passagem por esse capítulo e seguiremos diretamente para o capítulo 6 em que, editaremos um site padrão, usando os principais itens aqui abordados. Assim, voltaremos a esse capítulo para aprofundarmos nas possibilidades que o Joomla oferecer Início [voltar] O primeiro item na barra de menu refere-se justamente a ao Painel de Controle, representados pelos ícones de atalho dos tópicos mais utilizados apresentados na imagem anterior Site [voltar] Nesse tópico do menu (Site) serão abordados os seguintes itens conforme mostra figura abaixo Por: Lucio Sérgio Borges Peixoto 18

19 Configuração Global [voltar] Compreende os seguintes itens: Site, Localização, conteúdo, Base Dados, Servidor, Metadados, , Cache, Estatística e SEO. Por: Lucio Sérgio Borges Peixoto 19

20 Na aba de configuração Site temos os seguintes itens: Dica: Lembrando que qualquer dúvida, pousar o mouse sobre o ícone correspondente, até mesmo porque, cada item deve ser testado e analisado sua utilidade. Todas abas de configuração são importantes, porém, não serão abordadas na sua totalidade. Aba Site Site Off-line: Coloca o site em modo off-line Mensagem Off-line: Mensagem que aparecerá no site quando ele for solicitado. Podendo a mensagem ser editada em linguagem HTML. Mensagem de erro de sistema: Mensagem que aparecerá quando acontecer qualquer problema que impeça a visualização do site. Podendo a mensagem ser editada em linguagem HTML. Nome do site: Espaço em que se define o nome do site. Nome este que aparecerá inclusive na parte superior do Browser. Outra aba de configuração muito utilizada é a Metadados, nela são colocados textos e palavras chaves em relação ao site criado para pesquisa em sites de busca. Por: Lucio Sérgio Borges Peixoto 20

21 4.2.2 Idiomas [voltar] Item que são listados os idiomas já cadastrados Administrar Mídia [voltar] Item gerenciador das mídias presentes no site. A pasta correspondente esta no caminho conforme imagem abaixo Por: Lucio Sérgio Borges Peixoto 21

22 Pré-visualizar [voltar] No item Pré-visualizar conforme imagem acima, temos três possibilidades de aplicação: Nova Janela onde o site em questão será aberto em uma nova janela do browser, Mesma Janela onde o site será aberto dentro da janela em que está o gerenciador e por fim, Mostrar Posições, que mostra a disposição dos módulos no site. Por: Lucio Sérgio Borges Peixoto 22

23 4.2.5 Estatística [voltar] Conforme instruções do próprio Joomla, não abordaremos esse tópico Administrar Temas Temas do Site Nesse ítem temos a lista de temas ou templates ou modelo de layout, como queira chamar, que definiremos para nossos sites. Outros recursos como instalar, excluir, definir tema padrão e até mesmo atribuir um segundo tema para ser apresentado no site. Também nesse tópico poderemos editar o CSS e o HTML, caso tenha conhecimento suficiente, caso contrário, poderá por em risco todo seu trabalho e ter que recomeça-lo. Temas da Administração Assim como no Tema do Site, temos a possibilidade de mudar o tema da administração. Exemplo: caso queira personalizar a área de administração com as cores da sua empresa é só instalar um novo tema ou alterar os arquivos na pasta conforme mostra o caminho a seguir. (\www\site1\administrator\templates\joomla_admin). Posição dos Módulos Área destinada à descrição da posição de cada módulo Administrar Lixeira [voltar] Administrado sua lixeira você poderá fazer uma restauração de um arquivo anteriormente excluído por engano ou até mesmo apagar definitivamente do Por: Lucio Sérgio Borges Peixoto 23

24 Banco de Dados. Vale ressaltar que esse tipo de administração vale para dados do tipo Conteúdo (Estático e Dinâmico) Administrar Usuários [voltar] Gerenciando os usuários, poderá fazer as alterações nos campos abaixo, lembrando que caso esqueça a senha o campo deve ser informado corretamente para reenvio de nova senha. Por: Lucio Sérgio Borges Peixoto 24

25 4.3. Menus [voltar] A administração dos menus está ligada diretamente aos módulos correspondentes, ou seja, cada menu tem um módulo correspondente na lista de módulos do site. No item Administrar Menu, pode-se, editar, criar e excluir menus. Obs.: Para cada novo menu criado, será criado automaticamente um módulo referente a ele. Nos itens referentes aos módulos item 4.6 veremos mais detalhes Exemplos já existentes Menu Módulo Correspondente Mainmenu - Menu Principal orthermenu - Outro Menu usermenu - Menu Usuários topmenu - Top Menu A imagem abaixo mostra as configurações do módulo referentes ao menu correspondente e assim, podendo fazer todas as alterações de acordo com as necessidades do site. (Na barra de ferramentas escolha : Módulos 4Módulos do Site) Clique em algum módulo do menu. Três conjuntos de informações definem as opções do módulo, sendo: Detalhes, Parâmetros e definição de páginas que aparecerá o menu. Por: Lucio Sérgio Borges Peixoto 25

26 Obs.: O primeiro item (ordem) do mainmenu, será o que aparecera quando o site for aberto Conteúdo [voltar] Antes de entrar nos tópicos abaixo conforme imagem, abordaremos as definições dos padrões de organização dos conteúdos adotados no ambiente Joomla. Por: Lucio Sérgio Borges Peixoto 26

27 Imagine uma série de notícias de uma determinada agência de publicidade em que todos os assuntos estivessem sendo guardados em uma única gaveta. Certamente teria dificuldade em encontrar uma notícia criada na semana anterior, quanto mais gerencia-las. Ilustraremos o ambiente joomla da seguinte forma Sessão São como as gavetas de um armário, onde cada gaveta teria informações de um determinado assunto. Ex.: Arte, Esporte, Política e etc. Categoria As categorias são como pastas específicas de determinados assuntos dentro da sessão, ou seja, pastas organizadas e nomeadas dentro da gaveta. Ex.: Futebol, Natação, Basquete e etc. Por: Lucio Sérgio Borges Peixoto 27

28 Quanto às informações, trataremos como conteúdos, onde esses conteúdos poderão ser estáticos ou dinâmicos. Como o nome já diz, conteúdo estático, não se altera. Nos sites, um exemplo de conteúdo estático comum, seria a apresentação de uma empresa, retratado nos menus como, Quem Somos ou Empresa. Já os conteúdos dinâmicos seriam as informações diárias ou semanais criadas no cotidiano em que o site foi criado. Um bom exemplo seria as notícias da rodada do Campeonato Brasileiro de Futebol do final de semana. Importante: Quando deseja-se definir um conteúdo para que seja um item do menu, esse conteúdo deve ser um conteúdo estático. Seguiremos então com os tópicos já mencionados Conteúdo por Seção No tópico conteúdo por sessão, os conteúdos dinâmicos são filtrados de forma rápida, por definição de sessão e posteriormente categoria Todos os itens de conteúdo [voltar] São colocados em uma única lista todos os conteúdos dinâmicos criados. Também nesse item podem-se filtrar os conteúdos conforme imagem abaixo, permitindo o administrador publicar, despublicar, criar, editar, copiar, excluir, mover para outra seção e categoria. Define os conteúdos que aparecerão na página principal. Por: Lucio Sérgio Borges Peixoto 28

29 Administrar Conteúdo Estático [voltar] Lista os conteúdos estáticos do site, podendo o administrador gerenciar-los Administrar Seções [voltar] Lista as seções criadas, podendo o administrador gerenciar-las Administrar Categorias [voltar] Lista as categorias criadas, podendo o administrador gerenciar-las Administrar Página Inicial [voltar] Nesse item são listados os conteúdos selecionados para aparecer na página Inicial Administrar Arquivo [voltar] Conteúdos já despublicados, porém ainda não autorizados a serem excluídos do Banco de Dados, por questões administrativas, são armazenados no Arquivo e conseqüentemente movidos da lista de todos os itens de conteúdos (item 4.4.2). Também o arquivo fica disponível para pesquisa de notícias por Mês e Ano, assim, quando habilitado o módulo arquivo, será possível essa pesquisa, pois eles estão diretamente ligados. Por: Lucio Sérgio Borges Peixoto 29

30 Segue figura correspondente Visualizações [voltar] São as estatísticas de acesso aos conteúdos estáticos e dinâmicos Componentes [voltar] Por: Lucio Sérgio Borges Peixoto 30

31 Define-se componente um conjunto de tarefas, de caráter relativamente gerenciável aplicável em um determinado site. Normalmente definido por um prefixo com_ Banner [voltar] O componente Banner permite o cadastramento de clientes que estão autorizados a divulgarem banners no seu site. Já a criação do banner, permite a definição da quantidade de visulizações dos banner, URL para atalho seleção da imagem criada e armazenada na pasta banners, conforme caminho (\wamp\www\site1\images\banners). O Componente está ligado ao módulo banner e entre as configurações se define a disposição e quais páginas irão aparecer. Obs.: Para incluir a imagem do novo banner, clique no ícone Administrar Mídias no painel de controle do gerenciador (Figura abaixo), clique na pasta banners, procure o arquivo correspondente e clique em enviar. Por: Lucio Sérgio Borges Peixoto 31

32 Contatos [voltar] Também conhecido como Fale Conosco, o componente permite o cadastramento de contatos e definição de sua categorias para melhor organização. Ex. Administração, Manutenção, Críticas e Sugestões. Conforme campos abaixo são cadastrados informações referentes aos usuários e de acordo com os parâmetros, também nessa tela, são definidas as autorizações de visualização das informações de cada um Difusão de Notícias [voltar] Por: Lucio Sérgio Borges Peixoto 32

33 É cada vez mais comum encontrar sites que possuem pequenas figuras (geralmente na cor laranja) com os dizeres "RSS", "XML" ou "Atom", como mostram as imagens abaixo. Note que a quarta figura da esquerda para a direita não tem nenhuma escrita, mas tem a mesma finalidade das demais: indicar que, naquele site, é possível utilizar feeds RSS. Esse componente visa fornecer as notícias no formato RSS que é um recurso desenvolvido em XML que permite aos responsáveis por sites e blogs divulgarem notícias ou novidades destes. Para isso, o link e o resumo daquela notícia (ou a notícia na íntegra) é armazenado em um arquivo de extensão.xml,.rss ou.rdf (é possível que existam outras extensões). Esse arquivo é conhecido como feed. O Componente Difusão de Notícias está ligado diretamente ao módulo também chamado Difusão de Notícias. O módulo Difusão de Notícias (Syndicate) exibirá um link por meio do qual outros sites acessam as notícias de seu site de forma automatizada. Quando você clicar no ícone RSS, você será redirecionado a uma nova página que listará todas as notícis recentes em formato XML. Para ser usado em outro site Joomla como Notícia Externa ou através de agregador de RSS, você precisa copiar e colar a URL fornecida. Por: Lucio Sérgio Borges Peixoto 33

34 Segue figura das configurações do componente Por: Lucio Sérgio Borges Peixoto 34

35 Segue figura das configurações do módulo em Massa [voltar] Componente responsável no envio de informações aos usuários cadastrados no site. Podendo assim definir os grupos para envio da mensagem, sendo esta enviada ao informado no cadastro do usuário. Segue abaixo figura correspondente. Por: Lucio Sérgio Borges Peixoto 35

36 Enquetes [voltar] Componente responsável no gerenciamento das enquetes criadas pelo administrador do sistema. Esse componente está ligado ao módulo Enquete e nesse módulo definese entre outras configurações a disposição do módulo no site e quais páginas irão aparecer a enquete. Segue abaixo as telas em que se gerencia, define os tópicos e o módulo correspondente. Abrirá a seguinte tela Por: Lucio Sérgio Borges Peixoto 36

37 A figura abaixo é referente ao módulo enquete que trabalha juntamente com o componente em questão Por: Lucio Sérgio Borges Peixoto 37

38 Notícias Externas [voltar] Esse componente gerencia as notícias de seu interesse espalhas nos sites da web, portanto, criam-se categorias para organização e links direcionais aos sites, aglomerando assim informações de notícias externas no seu site. Lembrando que as notícias serão exibidas em uma nova janela de acordo com o site linkado Web Links [voltar] Diferencia-se do componente Notícias Externas por abrir o link dentro do seu site, o componente também permite que os usuários autorizados indiquem Por: Lucio Sérgio Borges Peixoto 38

39 links a partir do seu site, no momento em que efetuar o login. Porém só serão publicados os Links depois da aprovação do administrador Módulos [voltar] Nesse tópico será abordado apenas o item que influencia diretamente na aplicação do site, portanto os módulos da administração não serão comentados. Por: Lucio Sérgio Borges Peixoto 39

40 Módulos do Site Como já vimos anteriormente em componentes, alguns deles trabalham ligados diretamente aos módulos, como: banner, difusão de notícias, enquetes, notícias externas, porém, outros trabalham de forma individual, como veremos a seguir. Normalmente os módulos possuem uma configuração em que se escolhem quais páginas devam aparecê-los (Figura abaixo). Portanto, não será abordado em todos os módulos essa funcionalidade. Dica: Para selecionar mais de um item, mantenha pressionada a tecla CTRL do teclado. Por: Lucio Sérgio Borges Peixoto 40

41 Banner [voltar] Módulo responsável em ajustar o banner no site, título, posição, ordem, nível de acesso. Módulo já comentado no componente banner Menu rodapé (módulo criado posteriormente para exemplificação da relação entre do menu) Módulo responsável em definir configurações do menu, sua disposição, ordem e alguns parâmetros. Módulo comentado em Menus (4.3) Menu Principal - Módulo responsável em definir configurações do menu, sua disposição, ordem e alguns parâmetros. Módulo já Comentado em Menus (4.3) Outro Menu - Módulo responsável em definir configurações do menu, sua disposição, ordem e alguns parâmetros. Módulo já Comentado em Menus (4.3) Menu Usuário - Módulo responsável em definir as configurações do menu, sua disposição, ordem e alguns parâmetros. Módulo já Comentado em Menus (4.3) Login [voltar] Permite que os usuários cadastrados e autorizados possam acessar o menu exclusivamente para área de usuário, permitindo que determinados assuntos possam ser visualizados apenas por usuários cadastrados. Segue abaixo figuras correspondente. Antes do Login Depois do Login, abrindo o menu do usuário. Obs.: O módulo Login trabalha com o módulo do menu do usuário. Figura correspondente do módulo login Por: Lucio Sérgio Borges Peixoto 41

42 Estatística [voltar] Além de oferecer configurações padrões dos módulos como, título, posição, ordem, o módulo em questão mostra informações do servidor, informação do site e um contador de acesso, podendo esses ser definidos na área de parâmetro. O módulo Estatística trabalha junto com configurações de estatística das configurações globais, conforme mostra as figuras abaixo. Por: Lucio Sérgio Borges Peixoto 42

43 Difusão de notícias - Já Comentada em componentes Escolher Tema [voltar] Conforme descrição, o módulo Seletor de Tema permite ao usuário (visitante) alterar o tema imediatamente da página principal através de uma caixa de seleção. (Figura correspondente abaixo) Por: Lucio Sérgio Borges Peixoto 43

44 No módulo, além das configurações padrões de disposição e ordem as opções de parâmetros permitem que o administrador defina a largura e altura do módulo no site. Obs.: Somente os temas instalados aparecerão na lista de escolha de temas do módulo. Por: Lucio Sérgio Borges Peixoto 44

45 Arquivo [voltar] Conforme descrição, este módulo exibe uma lista de meses do calendário, que contém os itens Arquivados. Após ter alterado o estado do Item de Conteúdo para 'Arquivado' esta lista será automaticamente gerada. Obs.: Item já comentado no tópico Administrar Arquivos Seções [voltar] Esse módulo permite que sejam visualizadas as notícias cadastradas no site, assim as notícias podem ser pesquisadas por seções. (figura) Itens Relacionados [voltar] Esse módulo permite que as notícias se interliguem por meio de palavras chaves no campo correspondente encontrado em todo conteúdo conforme mostra a figura abaixo. Por: Lucio Sérgio Borges Peixoto 45

46 Exemplo: Vamos fazer com dois conteúdos se relacionem. Editaremos no conteúdo dinâmico (Newflash1) a palavra teste no campo Palavras Chaves da aba Metadados e faremos o mesmo em um outro conteúdo (Welcome to Joomla!), depois salve. Segue figura abaixo Pronto os dois conteúdos estão relacionados entre si. Agora vamos disponibilizar a aplicação no módulo Itens Relacionados. Então habilite o módulo (publicar) e depois no site, abra um dos conteúdos editados e veja no campo onde está o módulo o outro conteúdo já relacionado. (Figura abaixo) Obs.: Esse módulo é mais comum nos sistemas de ajuda, onde muitos assuntos relacionam-se. Por: Lucio Sérgio Borges Peixoto 46

47 Wrapper [voltar] O módulo Wrapper permite que outro site seja aberto dentro da mesma janela de exibição conhecido também como IFrame. Na administração desse módulo além das configurações básicas (Detalhes e Páginas/Itens), o campo Parâmetros define qual o endereço de Url, largura, altura da janela e quais os etilos de barra de rolagem. No campo Detalhes, mude a posição para debug e publique no campo Parâmetros, altere a Url para um endereço de sua preferência, mude a altura para 600 pixels e salve. Obs.: Atualize o site (F5) e veja que foi adicionada a no final da página o site definido no campo Url do módulo wrapper Enquete [voltar] Como já foi dito anteriormente no Componente Enquete (Item ) esse módulo gerencia as enquetes criadas, permitindo ao gerenciador usar o site para fazer pesquisas de acordo com sua demanda. Trabalha diretamente com o componente Enquete. Publique o módulo Enquete, coloque-o para aparecer um todas as páginas, verifique se ele está na posição right depois vá ao componente enquete, abra a enquete defaut e também coloque para aparecer em Todas as página, salve. Enquete no ar conforme figura abaixo. Por: Lucio Sérgio Borges Peixoto 47

48 Usuários on-line [voltar] Permite o usuário a visualizar quais usuários e/ou o número de visitantes que está no momento navegando no site. Para que esse módulo funcione conforme sugerido, devem estar ativo o módulo Login e no campo parâmetros do módulo Usuários on-line deve estar marcado o item Ambos. Seguem as figuras correnpondnetes. Por: Lucio Sérgio Borges Peixoto 48

49 Por: Lucio Sérgio Borges Peixoto 49

50 Imagens Aleatórias [voltar] Muito importante esse módulo para ilustrar seu site com imagens e manter certo dinamismo. Toda atualização ou mudança de página faz com que o site mude a imagem do local escolhido. Testaremos o módulo fazendo as seguintes alterações conforme a figura abaixo. Usaremos as imagens da pasta (\wamp\www\site1\images\stories\fruit) para fazer o teste. Obs.: Caso não consiga mudar a ordem do módulo no momento em que alterar a posição, salve primeiro o módulo e depois entre novamente para alteração da ordem, e assim as imagem aleatórias apareçam sob o banner. Pronto, módulo de Imagens Aleatórias configuradas. Agora vá para o site e atualize-o ou mude de página para ver as imagens se alterando de forma aleatória. Importante: Crie imagens do tamanho que definir no módulo e evite que aconteçam possíveis distorções. Por: Lucio Sérgio Borges Peixoto 50

51 Flash de Notícias [voltar] Subentende-se pelo nome que trata de um módulo que se utiliza dos conteúdos para exibição de forma rápida das notícias publicadas. Em sua configuração (Figura abaixo) permite escolher a categoria para notícias rápidas, o estilo de exibição, o link para ler a notícia completa, enfim, além de oferecer quais páginas deva aparecer a aplicação, título e ordem. Obs.: A cada atualização ou mudança de página, a notícia é alterada. Por: Lucio Sérgio Borges Peixoto 51

52 Últimas Notícias [voltar] O módulo permite a exibição dos títulos dos últimos conteúdos que foram publicados. Em suas definições de parâmetros pode-se escolher qual tipo de conteúdo, quantos itens e se conteúdos da página principal devem ser exibidos. Por: Lucio Sérgio Borges Peixoto 52

53 Popular [voltar] Semelhante ao módulo últimas notícias (Inclusive os parâmetros de configuração), esse se caracteriza em exibir as notícias mais acessadas e organizadas em uma lista por ordem de mais acessos. Por: Lucio Sérgio Borges Peixoto 53

54 Top Menu - Módulo responsável em definir configurações do menu, sua disposição, ordem e alguns parâmetros. Módulo já Comentado em Menus (4.3) Procurar [voltar] Módulo que exibe a caixa de procura. Permite consultar assuntos digitando uma determinada palavra na caixa. Nos seus parâmetros configura-se a largura da caixa de pesquisa, botão e textos Plugins - Plugins do Site [voltar] Normalmente os plugins são aplicações criadas em linguagem PHP e já préformatadas para utilização. Os plugins nativos do joomla são do tipo, content, editors e search. Os plugins serão comentados de forma mais aprofundada em materiais de estudo mais avançado, para essa introdução básica, a instalação de novos plugins não influenciará nos resultados. Por: Lucio Sérgio Borges Peixoto 54

55 4.8. Instaladores [voltar] O tópico permite as instalações de: Temas (Templates) para o site, Temas para Administração, Idiomas, Componentes, Módulos e Plugins, conforme mostra figura abaixo. Em todos os itens citados, o administrador precisa procurar o arquivo para instalação e assim, clicar em Enviar o Arquivo e instala, conforme está assinalado com as setas na figura abaixo. No entanto, somente as opções Componentes, Módulos, e Plugins exibem a lista de extensões já instaladas. Obs.: Os arquivos para instalação de algumas extensões são encontrados no site oficial do Joomla ( muitos sites possuem templates gratuitas como: ( Mensagens [voltar] Semelhante a outras caixas de entrada, temos uma lista de mensagens enviadas, o assunto, o remetente, o dia e o status da mensagem. Podemos configurar as mensagens conforme mostra figura abaixo. Por: Lucio Sérgio Borges Peixoto 55

56 4.10. Sistema [voltar] No item Sistema, temos informações de versões disponíveis no site oficial, informações sobre o sistema instalado e itens com desbloqueios Ajuda [voltar] Consiste em um sistema de ajuda através de tópicos. 5. Algumas extensões [voltar] Módulos mod_artbannersplus Banner mod_datehour Data e Hora mod_jsn_imageshow - Imagem mod_dbrss2 Notícias RSS mod_fpslideshow Slide de imagens modwhois Verificar domínios disponíveis na internet Componentes com_joomlapack Backup com_docman Downloads com_facileforms Formulários com_jaclplus Gerenciados de usuários com_events Calendário com_misterestate Imobiliária com_google_maps Mapa virtual com_joomap Mapa do Site com_autostand Revenda de Carro com_fpslideshow Slide de imagens VirtueMart Comercio eletrônico Por: Lucio Sérgio Borges Peixoto 56

57 6. Criando um site [voltar] 1º Passo Vamos começar baixando um novo tema e instalando... Entre no site ( e seguiremos com nosso exercício. Entre na área de template\joomla 1.0 e faça o download do seguinte template (Figura abaixo, clique em Faça o DOWNLOAD). Dica: Salve em uma pasta criada exclusivamente para seus arquivos joomla Depois de efetuado o download, faremos à instalação do seu novo tema (template). Digite na barra de endereço do browser localhost/site1/administrator e digite seu usuário e senha. Clique: Enter Clique: Instaladores / Temas-Site (Conforme figura abaixo) Clique:Novo Por: Lucio Sérgio Borges Peixoto 57

58 Clique: Procurar, abrindo a caixa acima, encontre o arquivo correspondente ao seu novo template (template16.zip). Obs.: Não descompacte o arquivo Clique: Enviar o Arquivo e Instala Pronto, seu template foi instalado com sucesso. Clique: Site / Administrar Temas / Temas do Site Escolha o novo tema instalado e clique em padrão conforme mostra a figura abaixo. E note que o símbolo tornará o template escolhido como padrão. Por: Lucio Sérgio Borges Peixoto 58

59 Clique: Site / Pré-visualizar / Nova janela Obs.: Abrirá uma nova janela do browser contendo o seu site. (Figura abaixo) Por: Lucio Sérgio Borges Peixoto 59

60 Se você chegou até aqui, então já aprendeu baixar, instalar e definir o novo template como padrão. 2º Passo Vamos fazer algumas alterações simples e assim, começarmos a personalizar nosso site. Para essa fase você precisará de um editor de imagens. (CorelDraw, Fireworks, etc) Abra a pasta de imagens do seu template conforme caminho abaixo (\wamp\www\site1\templates\ja_acrus\images) e encontre a imagem correspondente com a LOGO, ou seja, com o cabeçalho do site. No caso é o arquivo (ja-logo-01, conforme imagem abaixo). Faça uma alteração qualquer no arquivo, lembrando que se deve manter o mesmo nome do arquivo, ou terá que alterar na linha de comando do arquivo index.php o nome do arquivo correspondente. 3º Passo Despublique o módulo flash de notícias conforme a imagens abaixo Clique em Módulo / Módulos do Site. Marque o módulo correspondente e clique em despublicar. Por: Lucio Sérgio Borges Peixoto 60

61 4º Passo Despublique alguns itens do menu mainmenu. Clique: Menus / mainmenu Marque alguns itens para despublicação como: Licença Joomla, Blog, Notícias Externas, PRFs, Wapper Por: Lucio Sérgio Borges Peixoto 61

62 Clique: Despublicar Repita esse passo despublicando todos os itens do menu orthermenu Vamos ver como está ficando o nosso site? Estão começando a personalizar o seu site, agora sim recomendamos que volte ao capitulo 4 e teste todos os itens da barra de ferramentas do gerenciador, inclusive a edição do conteúdo presente no site. Quanto às alterações referentes às fontes usadas, cores, tamanhos e disposição, serão abordadas no próximo capítulo. 7. CSS [voltar] CONCEITO Cascading Style Sheets (Folha de Estilo em Cascata), ou simplesmente CSS, é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de Por: Lucio Sérgio Borges Peixoto 62

63 forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo. Fonte: Portanto, faremos algumas alterações no arquivo CSS e assim praticar um pouco sobre o conceito acima. Usando editor do Joomla Vamos alterar a fonte quando o mouse passar sobre o menu, conhecido como evento hover do mouse. No Gerenciador de Conteúdo siga os passos Clique: Site / Administrar Temas / Temas do Site Selecione: O template Ativo (Padrão) Clique: Editar CSS Abrirá a seguinte tela Por: Lucio Sérgio Borges Peixoto 63

64 Cada template tem seu arquivo CSS e possuem uma nomeclatura relativamente padrão, nesse arquivo o itens correspondente a esse alteração sera (a:hover, a:active). Editaremos o campo selecionado acima para: a:hover, a:active { color: #0000FF; font-weight: bold; } Obs.: A primeira linha está o nome do item do CSS correspondente ao menu (hover), a segunda linha mudará a cor para azul e e a terceira linha tornará a fonte em negrito. Salve e veja as alterações no site. Caso não tenha conhecimento em fazer as alterações nas linha de comando do CSS, pode ser usado um editor HTML, para as alterações, no mesmo exemplo, será usado o Drenweaver 8. Usando editor Drenweaver Abra o arquivo CSS correspondente no caminho citado abaixo Caminho do arquivo CSS: (wamp\www\site1\templates\ja_acrus\css) Por: Lucio Sérgio Borges Peixoto 64

65 Quando passava o mouse sobre o menu ficava com a fonte de cor preta Com as alterações, o menu fica azul e em negrito Potanto, o princípio básico para alteração do CSS dos sites é como mostramos nesse capítulo, porém recomendamos aprofundarem mais sobre o assunto pois ele não é tão simples quanto parece. 8. Backup do Site [voltar] Backup nada mais é que simplesmente fazer uma cópia de segurança, pois se houver algum problema nos dados originais, eles possam ser recuperados. As informações do seu site são guardados uma parte no Banco de Dados MySQL e outra parte no diretórios www, portanto, teremos que fazer duas cópias de seguranças distintas. A primeira será uma cópia das informações do Banco de Dados MySQL, onde está contido todo conteúdo textual do site. A segunda será uma cópia do diretório www\site1, onde estão contidos todos os arquivos de extensões, imagens e administração do site. Backup do banco de dados MySQL Clique no ícone do WAMP localizado na parte inferior do vídeo conforme mostra a figura abaixo Abrirá a seguinte janela Por: Lucio Sérgio Borges Peixoto 65

66 Clique: phpmyadmin Abrirá a seguinte janela Clique no banco de dados correspondente ao site em questão, pois poderá ter vários outros Bancos de Dados. Depois de clicado no banco de Dados correspondente, Clique em Exportar conforme mostra a figura abaixo. Por: Lucio Sérgio Borges Peixoto 66

67 Abrirá a seguinte janela e selecione no campo Estrutura a primeira opção (Adicionar DROP TABLE / DROP VIEW) e no campo enviado selecionado, limpe o campo (Nome do arquivo do modelo) conforme mostra na figura abaixo. Clique: Executar Por: Lucio Sérgio Borges Peixoto 67

68 Abrirá a seguinte janela Clique: Salvar Defina o caminho onde deseja salvar o arquivo de Backup do Banco de Dados. Pronto, seus dados do BD estão salvos. Por: Lucio Sérgio Borges Peixoto 68

69 Backup do Diretório www Quanto ao backup do diretório, basta copiar a pasta que fica dentro da pasta www referente ao seu site, no caso (www/site1). Reucuperar Backups BD Para fazer a restauração do Backup do BD, importe o arquivo correspondente ao backup. Selecione o arquivo onde salvou e clique Executar, conforme mostra a figura abaixo. Dica: Caso a recuperação seja de informações textuais (conteúdo), faça apenas a restauração do BD. PASTA Quanto à recuperação da pasta www/site1, substitua a existente pela cópia de segurança. Por: Lucio Sérgio Borges Peixoto 69

70 9. Transferindo seu site para outro servidor [voltar] Fazendo os backup conforme mostra no capítulo 8, reinstale o joomla no novo servidor incluindo as extensões não nativas, ou seja, plugins, módulos e componentes instalados posteriormente e restaure os backups de BD e pastas correspondentes. Dica: Compacte a pasta salva no backup, transfira para o outro servidor e depois descompacte sobrepondo aos arquivos existentes. 10. Considerações Finais [voltar] Ao fazer esse material, pensei em ajudar usuários iniciantes e acabei descobrindo muita coisa interessante que não havia atentado nos primeiros contatos. Sugiro que todos contribuam para o mundo joomla e assim seremos sempre fortes, espero ter contribuído. Aguardo críticas e sugestões para que possa evoluir nos meus próximos trabalhos. Créditos Autor Lúcio Sérgio Borges Peixoto Analista de Sistemas MBA em Tecnologia da Informação borges.ls@gmail.com Revisão de textos e teste Alessandro Dias Barbosa Engenheiro Civil Sites pesquisados: Por: Lucio Sérgio Borges Peixoto 70