Aprenda Joomla!

1. Joomla! 1.5 Construindo um sistema online no mínimo tempo possível.

3. Quando optar por um CMS?

4. O que é o Joomla! ?

5. Quais suas vantagens?

6. Quais suas desvantagens?

7. Joomla vs. Drupal

8. Referência de páginas em Joomla!

9. A Estrutura do Joomla!

10. Direitos de acesso

11. Conteúdos

12. Extensões

13. Suportes do Joomla!Capítulo 1

14. O que é CMS? CMS ou Content Management System, é um programa desenvolvido para facilitar a gestão de um conteúdo (dados)

16. Qual a complexidade do projeto?

17. Qual o prazo e orçamento do projeto?

20. É um dos mais utilizados do mundo

21. Equipe de desenvolvimento de mais de 45.000 programadores registrados

22. Open Source

23. Fácil instalação e manutenção

24. Não precisa contratar programadores ou designers

26. O servidor deve estar apto a receber o Joomla!

27. É mais difícil alterar algo pronto pro Joomla! ou programar algo pra ele

30. 1. Front-End: É o seu site da forma que seus visitantes e usuários registrados vêem. 2. Back-End: É a área de administração, onde você define como será a estrutura vísivel de seu site, assim como os recursos do Joomla! que serão utilizados na implementação de seu site. Eg.: Configuração, manutenção, limpeza, criação de estátisticas, áreas restritas aos usuários registrados e criação de novos conteúdos. o Back-End fica numa URL diferente do site. Estrutura do Joomla!

32. Direitos de acesso

33. Direitos de acesso

34. Usuários especiais - Por padrão, todos com direitos acima de autor, são considerados por padrão usuários especiais. Você pode limitar certos conteúdos para ser visualizados apenas por esse grupo. Informações de Contato – Essa seção mostra qual formulário de contato está vinculado a quem. No Joomla! é possível você ter vários formulários de contato. Usuários especiais e Informações de Contato

36. Imagens

37. Vídeos

38. Etc.Conteúdos

39. Componentes Templates Módulos Plug-ins Extensões

40. O Joomla! foi feito para se adaptar e expandir de acordo com suas necessidades.São extensões que acrescentem funcionalidades ao Joomla! e geralmente tenha sua própria área na administração. Eg.: uma loja online, gerenciamento de usuários, fórum, sistema de newsletter, galeria de imagens são os mais comuns. Componentes:

41. É a parte visual do site, além de cores, tamanho de fontes, background, espaçamento, onde será dividido o posicionamento do conteúdo, menu, enfim, tudo que é realmente ligado ao visual e é composto de pelo menos um arquivo HTML ou PHP, XML e CSS. Templates:

42. É um campo no front-end que mostra onde os dados de um componente. os módulos são mostrados em espaços pré-definidos do template. Módulos especiais pertinentes aos componentes, são usados para integrar o conteúdo da forma desejada em um template. Eg.: Um módulo mostra a quantidade de usuários online, enquanto outro módulo mostra as 5 notícias mais recentes na página inicial do seu site. Módulos:

43. Responsáveis por juntar conteúdo, sistema e outros plug-ins programados por você e por terceiros. Ah! Já ia me esquecendo de dizer! Qualquer um que programe em PHP pode criar suas próprias extensões pra Joomla! Um outro conceito é: Plugin é uma seção de código que é executado quando um evento pré-definido acontece dentro Joomla. Editores são Plugins, e são executados quando o Joomla chama o evento onGetEditorArea. O uso de plugin permite que o desenvolvedor possa mudar o modo como os seus códigos reagem a eventos, dependendo, é claro de quais Plugins estão instalados. Plug-Ins:

44. Joomla! Suporta XML-RPC (RemoteProceduralCall) que permite que vários programas comuniquem-se entre si. Eg.: Integre com Joomla! uma imagem do FlickR ou um post do wbloggar. O Joomla! também tem uma interface de abstração que suporta diversos tipos de bases de dados, no momento sua compatibilidade é com MySQL 4.x Suportes do Joomla!

45. Nesta primeira parte, aprendemos sobre o que é o Joomla! e suas funcionalidades, tanto no Front End (o site em si) como no Back End (área administrativa do site). O próximo capítulo você aprenderá como instalar e personalizar o Joomla! de acordo com suas necessidades. À partir do próximo slide, você terá acesso à adaptação que eu fiz do livro “Learn Joomla! 1.5 Fast ! – A beginner’s visual step-by-step guide to set up useful Joomla! websites in a few hours!” Autor: Saurabh R. Bhide. Um jovem desenvolvedor Joomla! e autor indiano, este livro é completamente voltado para iniciantes e foi traduzido e adaptado por mim. Faça o download a versão original do livro aqui: http://help.joomla.org/files/VisualGuide15.pdf Sumário

46. Aprenda Joomla! 1.5 Rápido Um guia passo-a-passo visual para configurar websites úteis utilizando Joomla! Em poucas horas

47. Esta apresentação é uma adaptação do livro “LearnJoomla! 1.5 Fast !” – A beginner’s visual step-by-stepguide to set upusefulJoomla! websites in a fewhours! Criado por: Saurabh R. Bhide Website: www.lagoona.in O material original está sob a Atribuição da licença “CreativeCommons”, Índia. Para mais detalhes, acesse http://creativecommons.org/licenses/by/2.5/in/ Sobre o autor

48. Sobre a adaptação Este material foi adaptado para que você aprenda Joomla! em 4h, no meu mini-curso presencial. Mas, esta adaptação está em sua maior parte fiel ao livro . Mantive a idéia geral do livro e o que acrescentei foram algumas etapas ou observações que julguei necessária para o melhor aprendizado dos iniciantes em Joomla! 1.5. Retirei algumas redundâncias e tornei a linguagem mais facilitada e adaptada para a realidade brasileira. Na verdade, achei o livro um pouco incompleto na parte em que ele ensina apenas a criar sites utilizando a estrutura de exemplos instalados por padrão, que gera muito lixo, utilizei esta forma apenas no primeiro site (são dois no livro), no segundo, iremos gerar do zero, aprendendo também a adicionar e configurar módulos e outras coisas que levarão você de um usuário iniciante para um usuário de nível intermediário. Ensinei também a instalar componentes (no caso, as traduções do Joomla! para português). Misturei muito do material que utilizo no meu mini-curso com o material do livro, de forma que possa ser lido e utilizado mesmo por pessoas que não participaram do meu mini-curso. Acredito que assim, os interessados em Joomla! terão um material mais robusto para utilizar. Esta é minha primeira contribuição importante para comunidade e espero que vocês gostem. Este material foi adaptado por Jennifer Payne, em abril de 2009. E-mail: jpaynedesign@gmail.com Você pode redistribuir ou modificar este material, desde que mantenha um link para o site do autor do material original, juntamente com seu nome Saurabh R. Bhidehttp://www.lagoona.in e uma referência para adaptadora do material para português (Jennifer payne), seguida do e-mail acima.

49. Prefácio Obrigada por decidir ler este livro. Eu escrevi este livro para você aprender Joomla! 1.5 o mais rápido possível. Este livro foi feito para ser lido capa-a-capa, e tudo que você tem a fazer é ler uma página, fazer o que ela diz, e seguir adiante. Depois de completar todas as tarefas neste livro, você será um usuário fluente em Joomla!, apto a fazer websites com conteúdo típico. Quando eu começei com Joomla! Eu achei fácil de instalar, mas um pouco difícil de aprender a administração. Ainda mais difícil de aprender foi como personalizar o site aos meus requerimentos. Havia diversos tutoriais por aí que explicavam tarefas diferentes, mas nenhum que explicava como instalar, modificar e administrar um website em Joomla! Para minhas vontades. Por isso, aprendi J! da maneira mais difícil, tentando tutoriais diferentes, experimentando botões diferentes na administração, e vendo o que acontecia. Me tornei fluente gradativamente, fazendo e administrando sites em Joomla!, esta tarefa me tomou 6 meses! Agora, eu escrevi este livro de uma forma que você aprenderá tudo dentro de uma única semana ou dois dias. Se você começou a ler este livro hoje de manhã, você estará apto a fazer qualquer website em joomla! Amanhã à noite. Então diga à todos que você está ocupado(a), compre algumas pizzas e bebidas e aprenda Joomla!

51. Criando seu primeiro site em Joomla! : Babuínos

52. Criando seu segundo site em Joomla! : Faculdade de Engenharia

53. Modificando o Template

54. Enviando o website para um servidor de hospedagem na webIndex

55. Joomla é um aplicativo web escrito em PHP, e por isso precisa de um servidor web para rodar. Para tornar um website em J! (Joomla!) disponível na web, você precisa hospedá-lo em um servidor web. Mas para aprender J!, você pode converter seu computador em um servidor web e instalá-lo nele. Por isso, instalar J! no seu computador, requer que você faça duas coisas antes.Te mostrarei como fazê-las. Mas se você já tem um servidor web com PHP e MySQL instalado no seu computador, pule a primeira etapa e siga à partir da segunda e terceira. Instalando Joomla!

56. Instalando Joomla!

57. Instalando um servidor web usando o XAMPP Este software gratuito instala um servidor web Apache, PHP e MySQL no seu computador e configura os três para trabalharem juntos. Tudo que você tem a fazer é baixá-lo e instalar! All you have to do is download it and install! Acesse www.apachefriends.org/en/xampp.html. Há versões diferentes para diversos sistemas operacionais. Escolha o seu e faça o download.

58. Para Criar uma Base de dados em Joomla! E conta para instalar Joomla!, você pode usar uma aplicação web chamada “PhpMyAdmin”. Ela vem junto com XAMPP, então você pode utilizá-la.

59. Agora que você tem um servidor web pronto com PHP e MySQL juntamente com uma conta que você criou, vamos instalar o Joomla!. Download a versão mais recente em www.joomla.org/download.html . Salve o arquivo .zip no diretório raiz do seu servidor que deve estar em “C:ampptdocs ou na pasta que você escolheu ao instalar o XAMPP. Crie uma pasta “joomlabeta” neste diretório e extraia o arquivo nele. Agora acesse esta pasta no seu navegador usando o caminho “localhost/joomlabeta”. OBS: O XAMPP deve estar inicializado, juntamente com os serviços “Apache” e “MySQL”. Tenha certeza que o arquivo “xampp-control.exe” está aberto, a palavra “running” deve estar ao lado dos serviços acima para que esteja funcionando. Instalando Joomla! 1.5

60. A primeira tela você escolhe a linguagem de instalação do Joomla!, na segunda, mostra as configurações boas pro Joomla! OBS: Se a opção “configuration.phpwritable” estiver marcada “no” no final da instalação, deveremos copiar um código e criar o arquivo “configuration.php” na pasta “joomlabeta” Primeira e segunda telas

61. A terceira tela é referente a licença do Joomla!, clique “próximo”. Terceira e quarta telas A quarta tela é especificando as configurações do BD, incluindo o nome da BD, nome de usuário e senha. Use as seguintes configurações: Use the following settings Database Type : mysql Host Name : localhost Nome de usuário : joomla_user (se vocêutilizou um nomediferente no MySQL, especifiqueaqui) senha : joomla (ou a quevocêespecificouparaaqueleusuário) Database Name : database_for_joomla (ou a quevocêcriou, se vocêutilizou um nomediferente) Nesta tela, você providenciou os detalhes da BD MySQL para o Joomla! utilizar para guardar todos os conteúdos e outras informações

62. É recomendado que você utilize esta base de dados exclusivamente para esta instalação do Joomla! Você pode criar mais BD’s para outras aplicações. Recomendações

63. Quinta e sexta telas A quinta tela é para especificar configurações FTP para Joomla! Mas como estamos instalando-o localmente, diga “no” para FTO e clique “Próxima” A sexta tela é para especificar o nome do Site e senha para o administrador. Preencha o formulário com o nome do site, seu e-mail e senha para o administrador. Enquanto nesta tela, clique em “Instalar exemplo de conteúdo” para que seu site tenha algum conteúdo de exemplo que você pode editar ou deletar. Depois de clicar neste botão, você verá uma mensagem “Exemplo de conteúdo instalado com sucesso”. Clique em Próximo. Você instalou o Joomla! agora, delete o diretório “installation”. Deletar este diretório é uma medida de segurança para prevenir que ninguém reinstalará o Joomla! utilizando este diretório.

64. Instalando “Exemplo de Conteúdos” Eu recomendo a você instalar os exemplos de Conteúdos apenas neste primeiro site, para que você tenha uma visão geral do Joomla! . A instalação destes exemplos, gera código e configurações desnecessárias, acarretando em mais peso ao seu website. Após o término deste material, você estará apto a configurar seu site em J! Apenas com os recursos que julgue necessários. Quando você estiver seguro para proceder desta forma, não clique em “instalar exemplo de conteúdos” e clique em próximo. Aparecerá um alerta avisando que nenhum conteúdo foi instalado e pergunta se você deseja prosseguir. Clique em OK e termine a instalação como de costume.

65. Caso seu “configuration.phpwritable” estava em “no” então, na última tela apareceu um código php dentro de uma caixa. Copie todo este código e agora vá para a pasta “joomlabeta” e crie um arquivo vazio, utilizando o botão direito se for usuário linux, se for usuário windows, crie um documento de texto. Em ambos os casos, renomeie para “configuration.php” e abra o arquivo. Cole o código que você retirou na instalação do Joomla! e cole no arquivo. Salve. Criando a o arquivo “configuration.php” Neste arquivo estão as configurações que você gerou na criação do seu site em Joomla! . Configuration.php e configuration.php-dist são arquivos diferentes, não os confunda! Não substitua o conteúdo do configuration.php-dist pelo código que você copiou para configuration.php. O arquivo configuration.php-dist é utilizado apenas quando o instalador web falha, nele você coloca manualmente a mesma coisa que é gerado automaticamente pelo instalador web do Joomla!, só que você deverá configurar manualmente.

66. Explorando o Front-End

67. Agora que você instalou o Joomla! Você pode acessar o site escrevendo o endereço “localhost/joomlabeta” no seu navegador. Este é o site padrão em Joomla, com o conteúdo exemplo padrão. Você verá como modificar este site de acordo com suas necessidades adiante. Por hora, navegue no site, clique em botões diferentes e teste-os. Vote na enquete e veja o resultado. Procure por algo usando o campo de pesquisa. Crie PDFs de artigos usando o pequeno ícone PDF no lado superior direito de qualquer artigo. Note as formas differentes em que o conteúdo é acessado e apresentado. Clicando no link de “Joomla! License” no menu esquerdo mostrará uma página com a licensa em Joomla! Esta página é como uma página estática no website. Clicando em “The News”no menu principal mostrará introduções de artigos diferentes, juntamente com um link “leia mais” que mostra o artigo completo. É similar à um blog, porque artigos diferentes são mostrados na mesma página. Clicando em “More about Joomla!” Mostrará uma lista de categorias, cada uma tendo uma descrição curta. Selecionando uma categoria mostrará a você uma lista de todos os artigos naquela categoria. Você pode clicar nelas para ler os artigos completos. A enquetes é mostrada numa área lateral, quando você vota nela, resultados são mostrados na área de conteúdo principal. Introdução

69. A áreaadministrativa (back-end) do J! permitequevocêediteosconteúdos, delete oucrienovos.

70. Quandoalguémvisita o website, O front-end mostra o conteúdoda base de dados, de maneiraorganizada, definidaporvocêutilizando a áreaadministrativa.Básicos do Joomla! Front-End www.sitename.com Administração www.sitename.com/administrator Base de Dados (BD)

71. Gerenciar um site em Joomla! é principalmente sobre logar o painel administrativo e adicionar ou editar conteúdo. Então, quando você vir um site criado em J! É o front-end que mostra algum conteúdo da BD. Todos os dados, direto dos links no menu, à informação sobre usuários é guardada na BD. A interface administrativa te permite editar esta base de dados, te dando portando, controle total sobre o site. Gerenciando um site em J!

72. Agora que instalou J! No seu computador, vamos criar seu primeiro site em J! . Se você procedeu de forma correta até agora, seu site deverá estar acessível através do endereço no seu navegador http://localhost/joomlabeta e você terá acesso à área administrativa através de http://localhost/joomlabeta/administrator . Escolha qualquer assunto para seu primeiro site. Eu escolhi o assunto “babuínos”. Caso você não saiba, babuínos são animais similares aos macacos. Então, vamos criar um site sobre babuínos. Wikipédia tem muitas informações sobre babuínos: acesse http://en.wikipedia.org/wiki/Baboonsparamaioresdetalhes. Eu as utilizei para a criação deste site que será muito simples e consiste de 4 páginas. Veja como faremos nosso site em 4 passos fáceis: Seu primeiro site em Joomla! : Babuínos

73. Organograma do site

74. Conhecendo o Back-End Ok, chega de teoria e vamos começar a criar nosso site. Para tal, vamos fazer um quick-tour pelo BackEnd do Joomla!

75. Conhecendo o Back-End Como vocês puderam observar, no topo temos o menu de opções, à sua direita, 3 imagens. Um preview do nosso site, o número de pessoas conectadas no momento e se há alguma nova mensagem enviada para você. Abaixo do menu do topo, há as ferramentas que mostram, dependendo da área que você esteja, as opções possíveis a ser feitas, tais como: editar, salvar, mandar pra lixeira, deletar, publicar entre outros. Ao longo do uso, usaremos essas ferramentas naturalmente, elas são bem intuitivas. Abaixo da barra de ferramentas, os conteúdos, menus, enfim, os dados da área de administração em que você está, será mostrada.

76. Localizado em Help|System info, é dividido em 5 sub-areas. Falaremos dela de acordo com nossas necessidades. System Info Configurações do PHP Configuração do Arquivo Permissão de diretórios Informação do PHP System Info

77. São as configurações aplicadas à todas as páginas individuais e de seu servidor. Todas elas estão resumidas no menu do site. Fica na barra de menu do topo do back-end. Painel de Controle Gerenciamento de Usuário Gerenciador de mídia Configuração Logout Menu do Site (Site Menu)

78. Você utiliza para mudar entre as várias áreas da administração selecionando um item de menu ou clicando nos ícones mostrados. Aqui você cria ou configura os usuários do seu site. Dependendo dos seus direitos de acesso, eles podem criar, editar ou ver algum conteúdo preparado para usuários registrados. Até agora, você é o único usuário, o admin e você tem acesso à tudo do Joomla! e pode também bloquear, mudar o tipo do usuário, deletar entre outras coisas. Vamos agora olhar rapidamente na edição do usuário. Um Super Administrador, ou seja, você por default, pode fazer o que quiser com a conta de outro usuário. A única parte que realmente nos interessa aprender é sobre os grupos de usuários e seus direitos. Painel de Controle: Gerenciamento de Usuários

79. Funciona como um FTP para você enviar arquivos ao site. Por padrão você pode enviar jpg,gif e png. Útil se você não puder acessar ao FTP devido às permissões de administração. Este gerenciador é bem intuitivo. Você pode deletar diretórios na opção Visualizar Detalhes (Detailview). Media Manager (gerenciador de Mídia)

80. Administra o valor das variáveis no arquivo Configuration.php. Você pode dar uma navegada nessa área para olhar suas opções. As opções nessa área são muito claras, mas muito cuidado com as alterações que fará. Configuração Global

81. Passo #1: Escreva o nome do site Este é muito simples. Vá na área administrativa (back-end) do site This is really easy. Go to the administrative back-end of the site acessandohttp://localhost/joomlabeta/administrator/ou o nome do seu site no lugar do “joomlabeta”. Logue utilizandoseu username como “admin” e a senha de administradorquevocêcolocounatela 6 de instalação do Joomla. Vocêentraránaáreaadministrativa do Joomla!. Clique em “Global Configurations”, agora, utilize o campo “Site Name” paraespecificar o nome do seu site, que é “Baboons” no meucaso. Agora clique no botão “salvar” no topo, ladodireito. Vocêverá a mensagem “The configuration Detals have been updated”. Vocêtambémverá o título do navegador agora conter o nome do seu site. Parabéns, você fez a primeiramodificação do seu site!

83. No campo “Upload Package File” clique no botãoparaprocurar o arquivoquevocêbaixou. Selecione o arquivo, e clique em “Upload File & Install”

84. Uma mensagem avisando que foi instalado com sucesso aparecerá, repita o processo, instalando a tradução do front-end tambémTornando o Joomla! em português

86. Na aba site, aparecerá o idioma português, selecione português no radio button e clique em “default” no topo do lado direito (a estrela)

87. Vá na aba “administrator” e faça a mesma coisa, se a administração não mudar imediatamente para português, faça um logout e logue novamente na área administrativa do site.Tornando Português sua língua padrão Alguns itens não estarão traduzidos, eu creio que, porque como as traduções foram feitas nas versões anteriores à essa (1.5.10) quando produzi este material, algumas variáveis devem ter mudado de nome nos arquivos e então, os arquivos de tradução não conseguem localizar as antigas e o texto permanece em inglês. Mas creio que mais do que 95% permanecerão traduzidos e a utilização do Joomla! em nada será prejudicada com isso, desde que eu escreverei os caminhos nas duas línguas. Se você entende algo de programação, você pode vasculhar por si os arquivos do Joomla! e traduzir da forma que achar melhor. (só recomendo esta forma para usuários avançados)

88. Nosso site terá 4 páginas: Inicial Como os babuínos se parecem Vida social dos babuínos Tipos de Babuínos Passo #2: Crie as páginas É muito fácil de criar páginas. Na área administrativa, clique em “AddNewArticle”, (Adicionar Artigo). Você também pode ir através de “Content” -> “Article Manager” (Conteúdo -> Adicionar Artigo), no menu, no lado direito, clique em “New” (Novo)

89. Preencha o título para a página, o conteúdo na seleção de página, selecione “seção” e “categoria” como “qualquer” ou “sem categoria” (Uncategorized), e clique o botão “salvar” no topo, lado direito. Após salvar a página, você será levado ao “Gerenciador de Artigos” (Article Manager) onde você pode editar, deletar ou criar novos artigos. Clique no botão “Novo” (New) no topo, à direita, para criar uma nova página. Desta forma, faça todas as 4 páginas. Passo #2: Crie as páginas

90. Note que o J! permite que você escreva artigos/páginas utilizando um editor de interface “wysiwyg” – WhatYouSee Is WhatYouGet (Você vê aquilo que você tem), como mostrado na figura acima. Isto significa que você pode fazer o texto aparecer da maneira que quiser. Utilize este wysiwyg da maneira que usaria qualquer software de processamento de texto. Mas para inserir imagens, use o botão “Image” na parte inferior, à esquerda da caixa de edição de texto. Note ainda que estas páginas criadas por você ainda não estão visíveis no site. E estarão visíveis somente após criarmos um link de menu para elas. Agora que temos as 4 páginas, vamos ao próximo passo e criar links de menu para elas. Observação

91. Há diferentes menus em um site J!, e você pode adicionar links para as páginas recém criadas em qualquer um destes menus. Para este site, usaremos o main menu. Na interface administrativa, vá para “Menus” -> “Top Menu” utilizando o menu. Passo #3: Crie Links de Menu Aqui você verá uma lista de todos os links que já são presentes no menu principal. Agora, clique no botão “novo” (new) no topo à direita, para criar um link de menu para uma de nossas 4 páginas.

92. Será mostrado uma lista de tipos de itens de menu. Clique em ‘artigos’, porque nós queremos que este link se víncule à um artigo. Clique em “Layout de Artigo Padrão” (Standard Article Layout) quando a lista de ‘artigos’ expandir. Significa que o artigo por completo será mostrado quando o link for clicado. Agora você será levado à uma tela onde você tem que especificar o nome deste link e o artigo vinculado a ele. Nosso primeiro link é para a página inicial, por isso, escrevi o título e apelido (alias) ‘Home’. Selecionando o tipo de menu

93. Editar Link Tipo do item de menu – Cada Link tem sua particularidade, Nós entraremos em detalhe à medida que formos criando os nossos. Cada tipo pertence à um componente do Joomla!

94. Vinculando ao artigo Na área superior, direita desta página, você verá uma caixa nomeada ‘Parâmetros de Item de Menu’ (Menu item parameters). Nesta Caixa, clique no botão ‘selecionar’ próximo ao campo ‘selecionar artigo’ para especificar qual artigo será mostrado quando o link for clicado Uma janela popup aparecerá com uma lista de todas as páginas. Você deve dar um clique-duplo na página em que quer criar o vínculo com este item de menu. Fazendo isto, você seleciona o artigo/página que será mostrado quando um usuário clicar neste link que estamos criando. Agora, o campo ‘selecionar artigo’ mostrará o nome da página que você selecionou. Agora clique no botão ‘salvar’, você será levado ao “Gerenciamento de Menu” para o Main menu, e o link que você acabou de criar estará nesta lista.

95. Em uma instalação padrão do Joomla!, há um link ‘home’ no menu principal por padrão, mas nós não o manteremos. Agora, crie os links para as outras páginas, repetindo o procedimento anterior. Se você visualizar seu front-end ‘localhost/joomlabeta’ ou clique no link ‘pré-visualização’ no canto superior direito, você verá a existência de dois links ‘Home’. O segundo é aquele que você criou. Clique nele e ele mostrará a a página que você criou. Se você já criou os links para os outros artigos, você será capaz de visualizá-lo como na figura abaixo, se não, crie-os agora. Visualizando nossos links no Front-End

96. Está tudo funcionando perfeitamente, mas, precisamos: Toda esta bagunça no site deverá ser limpa, de forma que apareça apenas coisas relacionadas aos nosso babuínos no site. Quando o site for visitado através de ‘localhost/joomlabeta’, a página ‘Home’ que criamos será mostrada. Todos os outros links para o menu deverão ser removidos. A próxima página mostra uma bagunça típica do J! quando o mesmo é instalado utilizando os “exemplos de conteúdo” Há muitas ‘coisas’ nele. Estas coisas são chamadas ‘módulos’, foram descritas anteriormente, e são mostradas em caixas na figura seguinte. O único módulo requerido é o ‘Main Menu’, e todos os outros não são necessários no nosso site. Vamos escondê-los! Limpando a Bagunça

97. Seu site deve estar assim agora:

98. Varrendo para debaixo do tapete Para esconder estes módulos desnecessários, vá para o back-end‘localhost/joomlabeta/administrator’ e logue. Vápara ‘Extensões’ -> ‘Administrador de Módulos’ (Module Manager). É aquiondevocêadministrarátodososmódulos. Vocêveráumalista de todososmódulosinstalados no seu site. Haveráemtorno de 25 items nalista. Marque as caixas ao lado de todos os módulos, exceto por ‘Main Menu’ e então clique no botão ‘Desabilitar’ no topo direito. Isto deverá esconder todos os módulos, caso você tenha uma segunda página de módulos, você deve ir nela e desabilitá-los também.

99. Agora vamos limpar o Main Menu e esconder todos os outros links além dos que apontam para nossas 4 páginas e fazer a nossa ‘Home’ ser a página padrão ao invés da que está atualmente. Na área administrativa, vá para ‘Menu’ -> ‘Main Menu’. Será mostrada uma lista de todos os links atualmente vistos no seu site. Para fazer a sua página ‘Home’ padrão, a selecione marcando o checkbox e clique em ‘Padrão’ (Default) no topo à direita. Agora você notará que uma estrela apareçeu próxima a este link, ele agora é o que aparecerá quando você digitar “localhost/joomlabeta” Limpando os items de menu extras Para limpar o menu e remover todos os links que não são requeridos, faça igual você fez aos módulos. Selecione todos os links que deseja esconder e clique em ‘despublicar’ (unpublish)

100. Modificando a Logo do site: O logo do Joomla! que você vê no topo das páginas é parte de um template. Você verá isto com mais detalhes depois. Por hora, se você tem uma imagem para substituir, salve-a em ‘C:ampptdocsoomlabetaemplateshuk_milkywaymages’ ouondequerquefique o diretórioraiz do seu site com o nome ‘mw_joomla_logo.png’ parasubstituir a imagematual. Dica

101. Este é o seu primeiro site em Joomla!

102. Espero que você tenha gostado da sua primeira experiência em Joomla!. Agora vamos entrar em um nível intermediário de aprendizado. NívelIntermediário

103. Como um conteúdo é salvo O conteúdo em Joomla! são as páginas de informações a ser mostradas no site. Há dois tipos de conteúdo: Com categoria ou sem categoria. Conteúdo sem categoria Estas geralmente referem-se à páginas estáticas, você pode criar e editar quantas delas você quiser no Back-end. Estas páginas não pertencem a nenhuma categoria, por isso, são chamadas assim. Conteúdo com categorias Também referem-se à paginas, mas estas pertencem a uma estrutura, que é constituída de seções e categorias. Uma ‘seção’ (section) contém diferentes ‘categorias’ (categories) que por sua vez, contém páginas de conteúdo também chamadas ‘itens de conteúdo’. A figura ao lado mostra um exemplo de um site contendo informações sobre carros diferentes. “Cars” é uma seção, que contém duas categorias “Hatchbacks” e “Sedans” Estas categorias têm uma página de cada carro naquela categoria.

104. Faremos um site legal de uma faculdade utilizando Joomla! Faça uma nova instalação do Joomla!, mas desta vez, não instale o exemplo de conteúdo. Pense em uma faculdade imaginária. Eu nomearei a minha de “Faculdade Bhide de Engenharia” ;) Antes de fazer qualquer site, você deve decidir a estrutura de seu site. Nós teremos a seguinte estrutura para nosso site da faculdade. Eu recomendo fortemente que você desenhe esta estrutura no papel manualmente, e será muito mais fácil de fazer o site. Quando quer que eu faça um site ou aplicativo web, eu primeiro desenho a estutura em um pedaço de papel. Isto facilita bastante. Então aqui está a estrutura: Criandoseusegundo site emJoomla!

105. Estrutura do site

106. Agora que temos a estrutura em mente, nós a criaremos em 7 passos, alguns deles você já fez no primeiro site Configurar o nome do site Criar as páginas sem categorias (Home, About us, etc...) Criar a Seção (Departments) Criar uma categoria para cada departamento Adicionar páginas/itens de conteúdo nestas categorias Adicionar links para todas as coisas acima no menu Organizando a página Estapas para a criação

107. Como você fez para o site dos Babuínos, logue-se na área administrativa do seu novo site ‘localhost/nome_do_seu_site/administrator’, logue utilizando a senha que você cadastrou nessa nova instalação e dê um nome ao site como você deu ao dos babuínos (global configuration) Passo #1: Configurar o nome do site

108. Olhe na estrutura do site e crie as páginas sem categorias, assim como criamos as 4 páginas do site dos babuínos. As páginas são: Home About Us The Principal Novamente, como da primeira vez, estes artigos ainda não estão visíveis no front-end. É necessário criar os links para estes conteúdos. Você pode criá-los agora, como fez no site dos babuínos ou fazê-los posteriormente. Passo #2: Criar as páginas sem categorias

109. Criar uma seção é muito fácil. Na área administrativa, vá para ‘Content’ -> ‘Section Manager’ Você pode retornar para a área principal do back-end utilizando o menu ‘Site’ -> ‘ControlPanel’. Umavezquevocêestáem ‘Section Manager’, clique no botão “New”, ladodireito, no topo, paracriaruma nova seção. Escreva o nome para a seção com ‘Departments’ e abaixo escreva uma descrição para ela no campo de texto. Uma sugestão de descrição seria: “Esta seção contém todas as informações sobre os diferentes departamentos em nossa faculdade”. Salve através do botão “Save”. Esta seção foi adicionada à lista de seções e você poderá editá-la, deletá-la ou criar uma nova em ‘Section Manager’ Passo #3: Criar a Seção (Departments)

110. Sugiro que você olhe a estrutura que desenhamos e marque as áreas que já estão prontas. Vamoscontinuar e criar as categorias. Dica:

111. Crie categorias através do ‘Category Manager’ pelo controlpanel ou através do menu ‘Content’ -> ‘Category Manager’. Agora, criaremos uma categoria para cada departamento da faculdade. Para fazê-lo, clique no botão ‘New’ Passo #3: Criar uma categoria para cada departamento Escreva o nome da categoria (Departamento) como título. E selecione a ‘section’ como ‘departments’, como esta categoria é um departamento. Olhe a figura ao lado se você está confuso. Escreva uma descrição pequena do departamento na caixa ‘detalhes’ Então clique no botão ‘save’. Vocêserálevado de voltapara o category manager. Repita o processoparatodososdepartamentos.

112. Agora que criamos uma categoria para cada departamento, cada departamento precisa de duas ou três páginas mostrando informações sobre o mesmo. Por exemplo, o departamento de engenharia mecânica (mechanical engineering) precisa de 3 páginas: Faculty: Uma página sobre o corpo docente do departamento Facilities: Mostra todos os laboratórios e maquinários Projects: Mostra todos os projetos legais feitos por estudantes no departamento. Passo #5: Adicionar páginas/itens de conteúdo nestas categorias

113. São criadas da mesma forma que as sem categoria, sendo que ao invés de selecionar a opção “qualquer” (uncategorized), você deverá escolher a seção e categoria da página. Tenha certeza de que escolheu as opções corretas. Criando páginas com categoria

114. Step #6: Adicionar links para todas as coisas acima no menu Uma vez que você criou todas as diferentes páginas para cada departamento, é hora de adicionar links para todos os conteúdos no menu. 1: Adicione links paraosconteúdossemcategoriacomofizemos no site dos babuínos.

116. Agora, coloque o link Home como o padrão deste site assim como já foi feito no site dos babuínos. Despublique (unpublish) o link ‘Home’ padrão. Note que quando clicamos em ‘mechanical engineering’ no site, muitascoisasalém das páginasaparecem. Na verdade, só precisamos dos nomes das páginas, vamos remover o resto. No back-end, vá para menus -> main menu -> mechanicaldepartment. Esta página contém as facilidades para editar as configurações para o item de menu. Agora você apenas tem que mudar os parâmetros para este item de link. À direita, a caixa ‘Parameters-basic’ deverá ser expandida, clicando em seu nome. Step #7: Organizando a página

117. Faça as seguintes configurações: Na caixa ‘parameters – basic’ Table Headings : HIDE Filter : HIDE Na caixa ‘parameters – advanced’ Display Select : HIDE Na caixa ‘parameters – component’ Author Name : HIDE Hits : HIDE Estas configurações farão a página aparentar assim: Nosso segundo site padrão está pronto!

118. A beleza dos CMS (Sistemas de Gerenciamento de Conteúdos) é que uma vez escrito, pode ser modificado a qualquer hora usando a interface administrativa tanto no back-end, quanto no front-end. Agora que temos um site para nassa faculdade de engenharia, você pode mudar os conteúdos facilmente indo para o ‘Article Manager’ No back-end, vápara ‘Content’ -> ‘Article Manager’ Na lista de páginasqueaparecerá, clique no artigoquedesejamodificar. Aoeditarqualquerpágina/link/categoria, os 5 botõesacimaestarãodisponíveis no ladodireito, acima. Preview : Mostra a vocêcomo o conteúdoquevocêescreveuserámostrado no navegador. Save : Salva as modificaçõesfeitas e vaipara a página anterior a essaquevocêestácriando/editando. Apply : Salvasuasmodificações e permanecenapágina de edição. Close : Fecha a tela de criação/ediçãosemsalvar. A não ser quevocêjátenhaclicadoem ‘Apply’ antes. Permanece a últimaversãosalva. Para editar qualquer página...

119. Um templateJoomla! providencia um design ao Joomla! para mostrar o conteúdo. Se você é um web designer, você pode criar e/ou personalizar um template para J!. Não é a intenção deste material, utilizaremos apenas templates disponíveis gratuitamente. Há muitos sites que oferecem templates gratuitos ou pagos para Joomla! . Vá para joomla.org e procure por ‘freetemplates’ você verá diversos para usar. Vamos utilizar um da empresa ‘rockettheme’. O nome do template é ‘Novus’. Está disponível em: http://joomlacode.org/gf/download/frsrelease/6418/20469/rt_novus_j15.tgz Como já vimos antes, um template é uma extensão do sistema Joomla!. Para instalá-lo, logue no back-end e vá para ‘Extensions’->’Install/Uninstall’ Na caixa ‘Install from URL’, digite a URL acima. Clique Install. Joomla! automaticamente fará o download e instalará o template!Vocêreceberáumamensagem de quefoiinstalado com sucesso e um screenshot Utilizando outro template

120. Agora tornaremos este template como o padrão. Vá para ‘Extensões’ -> ‘Template Manager’. Aqui você poderá selecionar o template padrão para o seu site. Selecione o templatert_novus utilizando o radio button como na imagem abaixo e clique no botão ‘Default’ no ladodireitoaotopo. Agora, vocêpoderámodificareste template de acordo com suavontade/técnica. Vá para “C:ampptdocsigite_a_pasta_do-seu_siteemplatest_novus_j15mages” Háduasimagensquepode ser substituídas: inset-banner.jpg logo.png Modifique estas imagens ao seu gosto e estamos prontos! Tornando o ‘Novus’ template padrão

121. Você pode usar este método para instalar qualquer template para Joomla! 1.5. Para personalizar, vá para a pasta onde o template foi instalado e faça alterações para imagens, arquivos CSS, etc. Se você souber fazê-lo, claro! Versão do livro finalizada

122. Sobre a adaptação Este material quevocêacaba de lerfoiadaptado e traduzidoparaportuguês. A versãoestácompletamentediferenteda original, corteialgumaspartes e acrescenteimuitasoutras, paraquepudesse ser executado no meu mini-curso de 4h. No começodeste material há um link quevocêpoderáutilizarparafazer o download daversão original emformatopdf, eminglês PalavraFinais (do Autor) Obrigadaporlerestelivro. Esperoquevocêtenhagostado. Adiante, você aprenderá a incrementar muito mais seus sites em Joomla!

123. À partir de agora, você aprenderá como incrementar ainda mais seus sistemas em Joomla! Adicionei algumas coisas que acho importante você aprender sobre J! Você irá criar enquetes, adicionar módulos, uma lista de links (Links Úteis) e criar uma galeria de imagens e um formulário de contato. Incrementando o site

124. Vamos adicionar agora os módulos necessários para finalizar a página inicial do nosso sistema online: Clique em Extensões -> Administrar Módulo Clique em Pesquisa e em seguida no botão próximo Preencha os parâmetros que achar necessário Adicionando Módulos no nosso site

125. Adicionando Enquetes Clique em Componentes -> Enquete Clique em Novo Preencha os campos necessários Atenção – Esse campo segundos entre votos define o tempo necessário para votar novamente na pesquisa Salve

126. Adicionando Módulos (enquete) Clique em Extensões -> Administrar Módulo Clique em “Votação” e em seguida no botão próximo Preencha os parâmetros Selecione a Enquete desejada Salve

127. Para tornar uma área vísivel apenas para usuários cadastrados, quando criar um link/artigo há uma box relacionada ao nível de acesso (acesslevel), o padrão é “public”. Public: Todos podem acessar (padrão) Registered: Apenas usuários cadastrados Special: Usuários com permissões acima do nível de autor. OBS: Se você criou conteúdos para nível registered ou acima, adicione no seu front-end um módulo ‘Login’, para que os usuários possam se cadastrar, ou pelo menos logar-se para visualizar o conteúdo. Caso logue um usuário com permissões para modificar o site (autor, administrator, etc), nas áreas onde ele pode alterar, aparecerá um botão de edição, assim, este usuário não precisa logar-se na área administrativa para modificar conteúdos do site. Dica:

128. Links Úteis Esse componente é bem simples, você apenas adiciona links e diz a forma de comportamento ao clicar nele (ir para outra janela, abrir na mesma janela) Antes de criar os links, devemos criar uma categoria para eles. Clique em Componentes->Weblinks->Categorias, crie uma categoria Clique em Componentes->Weblinks->Links e crie um novo link, preencha os campos e salve. Crie vários links

129. Adicionando Links Úteis no seu menu Vá em Menus -> Main Menu Novo -> Weblinks -> Layouts Lista de Categorias (Essa opção mostra todos os links de uma certa categoria)

130. Link de Localização Vá em Menu->Main Menu Crie um novo menu e em Tipo de item de Menu, selecione wrapper Digite a url desejada, configure os parâmetros Salve

131. Criando um formulário de Contato Vá em Componentes -> Contatos -> Categoria e crie uma nova categoria chamada “Contatos” Vá em Componentes -> Contatos -> contatos -> novo Tire um tempinho para ler os campos abaixo, eles mostram as informações do seu contato apenas OBS: Este componente contato nativo do Joomla é bem simples, há apenas alguns campos pré-definidos para o visitante preencher. Mas há vários componentes que permitem a personalização de campos em um formulário de contato

132. Adicionando o Link Contato Crie um novo item de menu, do tipo “Contatos” Selecione “Layout de Contato Padrão” Dê um nome, selecione o contato nos parâmetros Salve

133. Galeria de Imagens Bem, estamos no finalzinho deste mini-curso de... Er... Esqueci o nome... Vou lá no primeiro slide filar e já volto! *Indo no Primeiro slide* Ah! Criando um sistema online no mínimo de tempo possível!

134. Galeria de Imagens Instale o componente Ozio.zip Vá em Menu -> Main Menu -> Novo -> Ozio Gallery Clique em pré-visualizar Nada aconteceu?!? Como assim? Claro, ainda não passamos de onde ele puxará as fotos! Clique em Componentes -> Ozio Gallery Clique em settings (um texto minúsculo, perdido por aí!) Pra visualizarmos rapidamente, selecione a opção “Use images from FlickR” na aba general, salve e visualize novamente Legal, não? Se vocês notaram, há várias galerias possíveis na Ozio Gallery, usem um tempo para brincar com esse componente!

135. Referências Graf, Hagen - Building Websites with Joomla 1.5, PACK PUBLISHING www.joomla.org www.joomla.com.br http://www.siteground.com/tutorials/joomla15/joomla_create_website.htm LearnJoomla! 1.5 Fast ! – A beginner’s visual step-by-stepguide to set upusefulJoomla! websites in a fewhours!, Saurabh R. Bhide www.google.com.br (o oráculo da vida!)

136. É um prazer contribuir para a vida de cada um que conseguiu chegar no final deste material, oferecendo conhecimento, algo tão importante. Caso você encontre algum erro neste meu material, favor entra em contato. No próximo slide, meus contatos TheEnd

137. Sobre mim Jennifer Payne nennypayne@gmail.com Entrem no grupo de joomla em que eu faço parte da administração brasjoomla@googlegroups.com Este grupo é composto por pessoas dinâmicas e gentis que sempre se esforçam para ajudar. Caso você tenha dúvidas ou quer se aprofundar em Joomla!, faça parte! Faremos o possível para ajudar. Esse mini-curso só foi possível graças ao incentivo e colaboração da Especializa treinamentos. Obrigada!