Aprenda Joomla! 1.5 fácil!

Construindo um sistema online no mínimo tempo possível.

O que é CMS ?  Quando optar por um CMS?  O que é o Joomla! ?  Quais suas vantagens?  Quais suas desvantagens?  Joomla vs. Drupal  Referência de páginas em Joomla!  A Estrutura do Joomla!  Direitos de acesso  Conteúdos  Extensões  Suportes do Joomla! 

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

Quais as reais necessidades do cliente?  Qual a complexidade do projeto?  Qual o prazo e orçamento do projeto?  Quais as particularidades do projeto? 

WCMS (Web Content Management System)

É free • É um dos mais utilizados do mundo • Equipe de desenvolvimento de mais de • 45.000 programadores registrados Open Source • Fácil instalação e manutenção • Não precisa contratar programadores ou • designers Vem com diversas funcionalidades prontas •

Pesa mais no seu servidor, do que se você • programasse o sistema O servidor deve estar apto a receber o • Joomla! É mais difícil alterar algo pronto pro Joomla! • ou programar algo pra ele Provavelmente não atenderá suas • necessidades se seu sistema tiver muitos detalhes incomuns

O Drupal é voltado para integração de • sistemas heterogêneos, dá ao desenvolvedor mais liberdade, porém é mais complexo para aprender O Joomla! também dá ótimo suporte a • integração, mas com interface mais fácil e ágil.

www.cnt.com.br www.porsche.com.br www.danone.com/ www.joomla.org www.adagaffneyshaff.com www.janettenorton.info www.urth.tv www.unric.org www.academiadopalestrante.com.br www.galeriamalivillasboas.com.br/site/ www.oscarfilho.com.br/standup/ www.rapkolik.net/

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.

Há vários grupos de acesso pré-definidos no  Joomla! Cada um com um grau de direitos e responsabilidades diferentes. Por padrão, você começa como Super-Administrador.

Grupos de Usuários com acesso à Front-End do Joomla! Grupo Direitos de Acesso Registrado Pode Logar-se e ver o que o visitante comum não pode. Ele faz tudo que o registrado faz e pode escrever Autor informações além de alterar sua informação. Geralmente há um link no menu de usuário para tal Faz tudo que um autor faz e ainda pode escrever e Editor mudar qualquer informação do front-end Faz tudo que um editor faz e ainda decide o tempo de Publicador vida de alguma informação do site. Pode publicar e despublicar o que quiser

Grupos de Usuários com acesso ao Back-End do Joomla! Grupo Direitos de Acesso Pode criar conteúdo e ver várias informações sobre o sistema. Gerente Eis o que ele não pode fazer: • Administrar Usuários • Instalar módulos ou componentes • Modificar um usuário para super administrador ou modificar um trabalho de um super administrador na opção Site | Configuração • Mandar emails em massa para todos os usuários • Modificar ou instalar templates ou arquivos de linguagens O administrador não pode fazer: Administrador • Modificar um usuário para super administrador ou modificar um trabalho de um super administrador na opção Site | Configuração • Mandar emails em massa para todos os usuários • Modificar ou instalar templates ou arquivos de linguagens Super Pode executar TODAS as funções do Joomla! Apenas ele pode criar um super administrador ou modificar um usuário para Administrador Super Administrador.

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.

São os dados que irão aparecer no seu site:  Textos  Imagens  Vídeos  Etc. 

Componentes  Templates  Módulos  Plug-ins 

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.

É 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.

É 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.

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.

Joomla! Suporta XML-RPC (Remote Procedural  Call) 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

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

Um guia passo-a-passo visual para configurar websites úteis utilizando Joomla! Em poucas horas

Esta apresentação é uma adaptação 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! Criado por: Saurabh R. Bhide Website: www.lagoona.in O material original está sob a Atribuição da licença “Creative Commons”, Índia. Para mais detalhes, acesse http://creativecommons.org/licenses/by/2.5/in/

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. Bhide http://www.lagoona.in e uma referência para adaptadora do material para português (Jennifer payne), seguida do e-mail acima.

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!

 InstalandoJoomla!  Criando seu primeiro site em Joomla! : Babuínos  Criando seu segundo site em Joomla! : Faculdade de Engenharia  Modificando o Template  Enviando o website para um servidor de hospedagem na web

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.

1) Instalar 2) Criar Base de 3) Instalar o servidor web com Dados MySQL e Joomla! uma conta PHP e MySQL

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.

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. 1. Crie uma base de dados 2. Adicione um novo usuário Vá para PhpMyAdmin e na página Vá para PhpMyAdmin e na página inicial, você verá um campo para inicial, clique em “Privileges”. Então criar uma nova base de dados. clique em “Adicionar novo usuário”, Digite um nome para esta Base de e preencha o formulário para criar Dados (BD) e clique “create”. Eu um usuário. Preencha os campos nomeei a minha como como descrito na imagem acima e “database_for_joomla‟. Você pode garanta todos os privilégios para colocar qualquer nome, mas você este usuário, marcando o botão terá que lembrar dele, pois “Check all”. Criei um usuário chamado “joomla_user” com usaremos na instalação do joomla! password “joomla”

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:xampphtdocs” 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.

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.php writable” estiver marcada “no” no final da instalação, deveremos copiar um código e criar o arquivo “configuration.php” na pasta “joomlabeta”

A terceira tela é referente a licença do Joomla!, clique “próximo”. 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 nome diferente no MySQL, especifique aqui) senha : joomla (ou a que você especificou para aquele usuário) Database Name : database_for_joomla (ou a que você criou, se você utilizou um nome diferente) Nesta tela, você providenciou os detalhes da BD MySQL para o Joomla! utilizar para guardar todos os conteúdos e outras informações

É 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.

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.

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.

Caso seu “configuration.php writable” 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. 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.

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.

J! É um “Sistema de gerenciamento de conteúdo” que significa que é um sistema criado para gerenciar diferentes tipos de conteúdos • Todo o conteúdo está guardado em uma base Front-End de dados. • A área administrativa (back-end) do J! www.sitename.com permite que você edite os conteúdos, delete ou crie novos. • Quando alguém visita o website, O front-end mostra o conteúdo da base de dados, de maneira organizada, definida por você utilizando a área administrativa. Administração Base de Dados www.sitename.com/administrator (BD)

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.

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/Baboons para maiores detalhes. 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:

• Escreva o nome do site 1 • Crie as páginas 2 • Faça links de menu para estas páginas 3 • Remova o desnecessário no site 4

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

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.

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 ◦

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 ◦

Você utiliza para mudar entre as várias áreas da  administração selecionando um item de menu ou clicando nos ícones mostrados. Gerenciamento de Usuários 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.

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 (Detail view).

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á.

Este é muito simples. Vá na área administrativa (back-end) do site This is really easy. Go to the administrative back-end of the site acessando http://localhost/joomlabeta/administrator/ ou o nome do seu site no lugar do “joomlabeta”. Logue utilizando seu username como “admin” e a senha de administrador que você colocou na tela 6 de instalação do Joomla. Você entrará na área administrativa do Joomla!. Clique em “Global Configurations”, agora, utilize o campo “Site Name” para especificar o nome do seu site, que é “Baboons” no meu caso. Agora clique no botão “salvar” no topo, lado direito. Você verá a mensagem “The configuration Detals have been updated”. Você também verá o título do navegador agora conter o nome do seu site. Parabéns, você fez a primeira modificação do seu site!

Você deve ter percebido que apesar da instalação ter sido em português, todo o site está em inglês, tanto no front-end quanto no back-end. Vou ensinar a vocês como ajustar isso, embora os exemplos de imagem deste material continuar sendo utilizados em inglês, colocarei para vocês os nomes tanto em inglês quanto em português. Acesse: http://www.joomla.com.br/downloads/cat_view/82- traducoes.html Faça o download dos arquivos Joomla! 1.5 - Backend pt-BR e Joomla! 1.5 - Frontend pt-BR Volte para a área administrativa e clique em Extensions -> • Install/Uninstall • No campo “Upload Package File” clique no botão para procurar o arquivo que você baixou. Selecione o arquivo, e clique em “Upload File & Install” • Uma mensagem avisando que foi instalado com sucesso aparecerá, repita o processo, instalando a tradução do front-end também

Clique em Extensions -> Language Manager • 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) 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. 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)

Nosso site terá 4 páginas: Inicial 1. Como os babuínos se parecem 2. Vida social dos babuínos 3. Tipos de Babuínos 4. É muito fácil de criar páginas. Na área administrativa, clique em “Add New Article”, (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)

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.

Note que o J! permite que você escreva  artigos/páginas utilizando um editor de interface “wysiwyg” – What You See Is What You Get (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.

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. 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.

Será mostrado uma lista de tipos de itens  de menu. Clique em „artigos‟, porque nós 1. queremos que este link se víncule à um artigo. Clique em “Layout de Artigo Padrão” 2. (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‟.

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!

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.

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.

Está tudo funcionando perfeitamente, mas, precisamos:  Toda esta bagunça no site deverá ser limpa, de forma 1. que apareça apenas coisas relacionadas aos nosso babuínos no site. Quando o site for visitado através de 2. „localhost/joomlabeta‟, a página „Home‟ que criamos será mostrada. Todos os outros links para o menu deverão ser 3. 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!

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). É aqui onde você administrará todos os módulos. Você verá uma lista de todos os módulos instalados no seu site. Haverá em torno de 25 items na lista. 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.

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” 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)

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:xampphtdocsjoomlabetatemplatesrhuk_ milkywayimages‟ ou onde quer que fique o diretório raiz do seu site com o nome „mw_joomla_logo.png‟ para substituir a imagem atual.

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

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 Cars Também referem-se à paginas, mas (Section) estas pertencem a uma estrutura, que é constituída de seções e categorias. Uma „seção‟ (section) contém Hatchbacks Sedans diferentes „categorias‟ (categories) que (Category) (Category) por sua vez, contém páginas de conteúdo também chamadas „itens de conteúdo‟. Maruti Santro City Corolla A figura ao lado mostra um exemplo de (Content Item) (Content Item) (Content Item) (Content Item) 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.

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:

Bhide College of Engineering The Principal Departments About Us Contact Us Home (Uncategorize (Section) (Uncategorized) (Special) (Uncategorized) d) Mechanical Electrical Civil Engineering Engineering Engineering (Category) (Category) (Category) Projects Faculty Facilities Faculty Projects (content Item) (content Item) (content Item)

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

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)

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.

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‟ -> „Control Panel‟. Uma vez que você está em „Section Manager‟, clique  no botão “New”, lado direito, no topo, para criar uma 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‟

Sugiro que você olhe a estrutura que  desenhamos e marque as áreas que já estão prontas. Vamos continuar e criar as categorias.

Crie categorias através do „Category Manager‟ pelo  control panel 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‟ 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 volta para o category manager. Repita o processo para todos os departamentos.

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 1. Facilities: Mostra todos os laboratórios e maquinários 2. Projects: Mostra todos os projetos legais feitos por estudantes no departamento. 3.

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.

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 para os conteúdos sem categoria como fizemos no site dos babuínos.

2: Add Links to the Department pages Estes links são especiais. Criaremos um link no menu para cada  departamento. Quando clicarmos, aparecerá uma lista contendo todos os conteúdos pertecentes a categoria daquele departamento. No back-end, vá para “Menu” -> “Main Menu” 1. Clique no botão „new‟ 2. Clique em„Articles‟ na lista „Internal Links‟ 3. A lista expandirá. Clique em „Category List Layout‟ na sub-lista 4. „Category‟ Na caixa à direita „Menu Item Parameters‟ , selecione a categoria 5. apropriada. Abaixo desta caixa, há mais duas caixas que estão minimizadas no 6. momento mas podem ser expandidas ao clicar no nome. Clique no botão „Save‟ no topo, à direita 7. Se você visitar o site, verá o link no menu e ao clicar nele, verá uma 8. lista de todos os artigos/páginas pertecentes àquele departamento.

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, muitas coisas além das páginas aparecem. Na verdade, só precisamos dos nomes das páginas, vamos remover o resto. No back-end, vá para menus -> main menu -> mechanical department. 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.

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:

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áginas que aparecerá, clique no artigo que deseja modificar. Ao editar qualquer página/link/categoria, os 5 botões acima estarão disponíveis no lado direito, acima. Preview : Mostra a você como o conteúdo que você escreveu será mostrado no navegador. Save : Salva as modificações feitas e vai para a página anterior a essa que você está criando/editando. Apply : Salva suas modificações e permanece na página de edição. Close : Fecha a tela de criação/edição sem salvar. A não ser que você já tenha clicado em „Apply‟ antes. Permanece a última versão salva.

Um template Joomla! 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 „free templates‟ 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_no vus_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á uma mensagem de que foi instalado com sucesso e um screenshot

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 template rt_novus utilizando o radio button como na imagem abaixo e clique no botão „Default‟ no lado direito ao topo. Agora, você poderá modificar este template de acordo com sua vontade/técnica. Vá para “C:xampphtdocsdigite_a_pasta_do- seu_sitetemplatesrt_novus_j15images” Há duas imagens que pode ser substituídas: inset-banner.jpg logo.png Modifique estas imagens ao seu gosto e estamos prontos!

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!

Este material que você acaba de ler foi adaptado e traduzido para português. A versão está completamente diferente da original, cortei algumas partes e acrescentei muitas outras, para que pudesse ser executado no meu mini- curso de 4h. No começo deste material há um link que você poderá utilizar para fazer o download da versão original em formato pdf, em inglês Palavra Finais (do Autor) Obrigada por ler este livro. Espero que você tenha gostado. Adiante, você aprenderá a incrementar muito mais seus sites em Joomla!

À 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.

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 

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 

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 

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 (acess level), 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.

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 

Vá em Menus -> Main Menu  Novo -> Weblinks -> Layouts Lista de Categorias (Essa opção  mostra todos os links de uma certa categoria)

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 

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

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 

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! 

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!

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 Learn Joomla! 1.5 Fast ! – A beginner‟s visual step-by-step guide to set up useful Joomla! websites in a few hours!, Saurabh R. Bhide www.google.com.br (o oráculo da vida!)

É 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

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!

http://templatejoomla.com.br	4363
http://www.templatejoomla.com.br	924
http://www.slideshare.net	619
http://jornale.com.br	467
http://elevabrasil.blogspot.com	298
http://www.mestreweb.com	156
http://localhost	62
http://professor-galvao.blogspot.com	56
http://www.techgig.com	49
http://elevabrasil.blogspot.com.br	48
http://hospedarumsite.com	44
http://www.ntegoiania.net	18
http://cms-aulasderedes.blogspot.com	17
http://www.regiaodigital.com.br	17
http://www.infoblogs.com.br	12
http://static.slidesharecdn.com	12
http://ebtaide.nonio.uminho.pt	8
http://www.professor-galvao.blogspot.com	8
http://www.professor-galvao.blogspot.com	8
http://www.projetofundao.ufrj.br	6
http://feeds2.feedburner.com	5
http://62.48.232.37	4
http://efa-gabinae.blogspot.com	4
http://www.sobrejoomla.com.br	3
http://www.templatestop.com.br	2
http://www.planetaexame.com	2
http://guiacms.com.br	2
http://a0.twimg.com	2
http://www.hospedarumsite.com	2
http://hernandeslaia.wordpress.com	2
http://www.ibdapaz.com.br	2
http://webcache.googleusercontent.com	2
http://sosmicro.webs.com	2
http://cms-aulasderedes.blogspot.pt	1
http://www.professor-galvao.blogspot.com.br	1
http://www.guiacms.com.br	1
http://infoblogs.com.br	1
http://professor-galvao.blogspot.com.br	1
http://ava.projetofundao.ufrj.br	1
http://elevabrasil.blogspot.pt	1
http://htmledit.squarefree.com	1
http://regiaodigital.com.br	1
http://servidor	1
http://www.mastery.uni5.net	1
http://localhost:8888	1
http://brownsites.webs.com	1
http://127.0.0.1:51235	1
http://www.blogger.com	1
http://www.ativaweb.blogspot.com	1

Aprenda Joomla! 1.5 fácil!

by Jennifer Payne on May 04, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

49 Embeds 7,242

Statistics

Aprenda Joomla! 1.5 fácil! — Presentation Transcript