Baixe o app para aproveitar ainda mais
Prévia do material em texto
1 Apostila Curso de Joomla! 2 SUMÁRIO Aula 01 - DESENVOLVIMENTO DE SITES, INTRODUÇÃO AO CMS JOOMLA .................................. 5 CMS / Gerenciador de Conteúdo .............................................................................................. 5 Os principais benefícios do CMS ............................................................................................... 5 Existem vários tipos de CMS´s? ................................................................................................. 5 Qualquer site pode ser construído com um CMS? ................................................................... 5 O que é o Joomla? ..................................................................................................................... 6 Breve histórico do Joomla ......................................................................................................... 6 Aula 02 - INSTALAÇÃO DO JOOMLA .............................................................................................. 7 Para utilizarmos o Joomla, necessitamos de três itens:................................................ 7 Realizando o Download do Joomla ........................................................................................... 7 Download e Configuração do XAMPP ....................................................................................... 7 Criando um Bando de Dados no PHPMyAdmin ........................................................................ 9 Instalando o Joomla ................................................................................................................ 10 Aula 03 - CONHECENDO O JOOMLA ............................................................................................ 16 Front-End e Back-End .............................................................................................................. 16 Traduzindo o Joomla ............................................................................................................... 18 Barra Principal de Menu .......................................................................................................... 20 Configuração Global ................................................................................................................ 21 Aula 04 - INSERINDO CONTEÚDO................................................................................................ 24 Como o Joomla organiza o conteúdo? .................................................................................... 24 Criando uma nova categoria ................................................................................................... 24 Criando um novo artigo .......................................................................................................... 26 Apresentando o Artigo na Página Principal ............................................................................ 26 Alterando as configurações de um artigo ............................................................................... 27 Acrescentando o “Leia Mais” .................................................................................................. 28 Acrescentando link no artigo .................................................................................................. 29 Aula 05 - EXTENDENDO O JOOMLA ............................................................................................. 30 São cinco os tipos de extensões disponíveis: .......................................................................... 30 Joomla Extensions Directory (JED): ......................................................................................... 31 Buscando e Instalando um Novo Componente....................................................................... 31 Aula 06 - TRABALHANDO COM IMAGENS ................................................................................... 35 Gerenciador de Mídias ............................................................................................................ 35 Armazenando imagem no joomla ........................................................................................... 35 3 Inserindo imagens em artigos ................................................................................................. 36 Aula 07 - TAREFA COMPLEMENTAR ............................................................................................ 39 Aula 08 - CONFIGURANDO O MENU ........................................................................................... 40 Adicionando novo item ao menu ............................................................................................ 40 Diferentes formas de apresentar o conteúdo através de um link .......................................... 41 Configurando Layout dos Artigos ............................................................................................ 42 Retirando o título do artigo do botão “Leia Mais” .................................................................. 44 Criando item de menu inativo................................................................................................. 45 Aula 09 - TAREFA COMPLEMENTAR ............................................................................................ 47 Aula 10 - MÓDULOS .................................................................................................................... 48 Conhecendo um pouco sobre Templates ............................................................................... 48 As posições do Template Protostar ........................................................................................ 49 Gerenciando Módulos ............................................................................................................. 51 Inserindo o módulo Personalizar HTML .................................................................................. 52 Aula 11 - TAREFA COMPLEMENTAR ............................................................................................ 55 Aula 12 - GERENCIAMENTO DE USUÁRIOS ................................................................................. 56 Criando novo usuário .............................................................................................................. 57 Criando artigo via front-end e limitando acesso ..................................................................... 59 Aula 13 - FORMULÁRIOS ............................................................................................................. 62 Baixando e instalando o breezing forms ................................................................................. 62 Funções do Breezing ............................................................................................................... 63 Construindo um Formulário .................................................................................................... 64 Conectando o Breezing Forms a um item de menu ................................................................ 70 Mais algumas dicas sobre o BreezingForms............................................................................ 71 Aula 14 - TAREFA COMPLEMENTAR ............................................................................................ 75 Aula 15 - TEMPLATES .................................................................................................................. 76 Como escolher templates para Joomla ................................................................................... 77 Baixando e instalado um novo template ................................................................................78 Adaptando o conteúdo ao novo template .............................................................................. 82 Aula 16 - ALTERANDO O CSS COM FIREBUG ............................................................................... 83 Identificando o CSS .................................................................................................................. 83 Utilizando o Firebug ................................................................................................................ 85 Aula 17 - TAREFA COMPLEMENTAR ............................................................................................ 90 Aula 18 - OTIMIZAÇÃO E SEGURANÇA ........................................................................................ 91 4 Dicas de SEO ............................................................................................................................ 91 Backup ..................................................................................................................................... 93 Utilizando o FileZilla ................................................................................................................ 96 Adaptando o site para dispositivos móveis ............................................................................. 97 5 Aula 01 - DESENVOLVIMENTO DE SITES, INTRODUÇÃO AO CMS JOOMLA CMS / Gerenciador de Conteúdo Os CMS´s (Content Management System – Sistema de Gerenciamento de Conteúdo) são, em grande parte, softwares livres, desenvolvido por programadores do mundo inteiro, onde o usuário pode editar e criar conteúdo para seus sites com grande facilidade. Os principais benefícios do CMS • Facilidade para atualização e edição de artigos, imagens, banners, etc; • Praticidade para criação de novas áreas, menus e conteúdo; • Variações de funcionalidades no site (Ex.: disparador de e-mail mkt, gerenciador de downloads para os visitantes, podcast, integração com vídeos, inúmeras variações de visualizações de galeria de imagens, enquetes, entre muitas outras); • Posicionamento nos buscadores (Google, Yahoo!, etc); • Flexibilidade no desenvolvimento de projetos em diferentes portes, sendo adequado a cada necessidade; • Velocidade de carregamento; • Baixo custo de atualização e manutenção; Existem vários tipos de CMS´s? Sim. Estão disponíveis hoje diversas plataformas de Sistemas de Gerenciamento de Conteúdo como Joomla!, Drupal, Mambo, Wordpress... Qualquer site pode ser construído com um CMS? Sim. Os CMS's podem ser utilizados, com todos os seus benefícios, desde sites pessoais, passando por micro e pequenas empresas, até grandes portais de multinacionais. Isso é possível devido a sua grande flexibilidade para adaptações de layout e funcionalidades. Outro ponto a ser destacado nesta questão de adaptações aos projetos é que existem disponíveis hoje, prontos para utilização, mais de 5 mil plug-ins de funcionalidades específicas. 6 Isso quer dizer que é possível, por exemplo, você ter um disparador de e-mail marketing ou newsletter diretamente de seu site, disponibilizar enquetes e pesquisas, áreas dinâmicas para banners e textos que tornam a navegação mais agradável, possibilitar interações dos visitantes através de comentários e votações, ou até mesmo ter uma plataforma de e-commerce! A parte visual pode ser totalmente remodelada,independente da utilização de um template padrão ou de terceiros, para isso, basta que o desenvolvedor tenha conhecimentos em HTML/CSS, isso vale também para o desenvolvimento de templates a partir do “zero”. O que é o Joomla? O Joomla! (se pronuncia djumla) é um desses Content Management System, ou gerenciador de conteúdos dinâmicos, mais eficientes da atualidade. O sistema - organizado por design, programação e conteúdo -, possibilita a criação de sites das mais variadas formas, totalmente customizados. Como o Joomla! é um CSM de código aberto (trabalho colaborativo), existem milhares de templates (gratuitos e pagos) disponíveis no mercado, o que garante que você consiga criar sua própria página, sem grandes problemas usando um layout profissional e personalizado para seu negócio. A grande sacada do Joomla! são suas diversas extensões, componentes e traduções, disponíveis na maioria das vezes gratuitamente e quando pagas com valor muito atrativo. O sistema é desenvolvido em PHP, pode ser iniciado no servidor Web Apache ou IIS e sua base de dados é a MySQL. Breve histórico do Joomla Trata-se do resultado da separação entre a equipe de desenvolvedores do Mambo e a empresa Miro, detentora dos direitos sobre o Mambo. A separação teve lugar uma vez que a Miro transferiu o controle do Mambo para uma fundação - a Mambo Foundation - onde os desenvolvedores teriam apenas uma participação passiva e pouco representativa. Esses desenvolvedores, preocupados com a integridade do projeto e com o futuro dos utilizadores, não aceitaram a transferência e, em 2005, criaram o "Joomla 1.0", também "open source", a partir do código-fonte do Mambo 4.5.2. 7 Aula 02 - INSTALAÇÃO DO JOOMLA Para utilizarmos o Joomla, necessitamos de três itens: 1 – Pacote Joomla que pode ser baixado diretamente do site oficial (http://www.joomla.org) 2 – Servidor WEB 3 – Banco de Dados Importante citar que podemos utilizar o joomla tanto em um servidor local quanto diretamente em um serviço de hospedagem, em algumas etapas, citaremos as diferenças e posteriormente algumas orientações sobre como colocar seu projeto joomla na internet Realizando o Download do Joomla Acesse o site oficial (http://www.joomla.org). Procure a sessão de downloads, e baixe a versão mais atual (iremos utilizar a versão 3.3) Perceba que existe uma opção de Upgrade, ignore e clique somente no botão de Download. Crie uma pasta específica para armazenar tanto esse pacote do joomla quanto outros programas e arquivos que vamos baixar Download e Configuração do XAMPP Existem diversas opções de servidores web disponíveis na internet, na verdade, eles simulam os mesmos serviços que encontramos de forma online, como por exemplo, a criação e gerenciamento de um banco de dados Para usar o joomla em nosso computador necessitaremos de um servidor web e vamos utilizar o XAMPP por ser simples e prático Podemos procurar nos sites de busca ou acessar o site oficial (link abaixo) 8 https://www.apachefriends.org/pt_br/index.html Temos já na tela inicial as versões mais recentes para diversos sistemas operacionais, sendo que para Windows, atualmente, temos a versão 1.8.3, contudo, foi detectada recentemente alguma incompatibilidade entre a versão mais atual do joomla e a versão mais atual do XAMPP, a solução é fazer o download de uma versão anterior do servidor Para isso, clique no botão de download Vamos baixar a versão 1.8.2 Inclusive, essa versão funciona bem em sistemas de 64bit No momento de instalar, não altere a pasta de instalação padrão, ao término da mesma, será aberta a janela de controle geral do Xampp, caso isso não ocorra, procure em sua área de trabalho ou em seus programas do menu iniciar. Para que o joomla consiga rodar, é preciso termos o Apache e o MySQL rodando em nosso sistema, sendo assim, clique primeiro na coluna SERVICE para instalar ambos e em seguida “START” na coluna ACTION na direção desses dois serviços de forma que ambos apresentem a cor verde em sinal de que estão rodando perfeitamente como na figura seguinte 9Obs: O FileZilla é opcional Caso você tenha feito a instalação dos serviços, eles irão inicializar juntamente com seu Windows, do contrário será necessário sempre abrir esse painel e iniciar de forma manual os serviços do Apache e MySQL Caso esteja tudo ok, abra seu navegador e digite localhost para abrir a tela inicial do XAMPP, escolha o idioma necessário para finalizar a instalação Criando um Bando de Dados no PHPMyAdmin Conforme já explicado anteriormente, o joomla é desenvolvido totalmente em PHP e necessita de um banco de dados para que possa funcionar. Nele, serão armazenadas todas as informações como a criação de categorias, artigos, inserção de módulos, etc. O PhpMyAdmin é um aplicativo presente em diversos servidores web, assim como o Xampp, nele é possível criar base de dados, tabelas, exclusão de registros, etc. Para a instalação e utilização do joomla, necessitaremos apenas da criação de uma nova base de dados, para isso, basta acessarmos novamente a tela do xampp, digitando no navegador: http://localhost/xampp Feito isso, acesse o PhpMyAdmin que se encontra no menu “Tools” (Ferramentas) 10 Na próxima tela, procure e clique na opção Base de Dados Utilize o campo indicado abaixo para escrever o nome da base de dados, aqui vamos usar db_aula, em seguida, clique em Criar. IMPORANTE: No caso de aplicações online, é preciso verificar no painel de controle da empresa de hospedagem o local utilizado para a criação de novas base de dados Instalando o Joomla Com o Xampp funcionando corretamente e com nossa base de dados criada, chegou a hora de instalarmos o joomla. Precisamos compreender que o joomla irá rodar em nosso servidor web (nesse caso, o Xampp) isso significa que o pacote que baixamos do site oficial precisa estar dentro do servidor, precisamente na pasta htdocs, pois é nela que ficam armazenadas as aplicações acessadas diretamente pelo localhost 11 Sendo assim, copie o arquivo compactado do pacote joomla para c:/xampp/htdocs O próximo passo é renomear o arquivo, use o nome do projeto/site que irá desenvolver, aqui utilizaremos “filme” (não use espaço, se necessário, separe as palavras com underline) Obs: Vamos aprender os conceitos e as principais ferramentas do joomla desenvolvendo um pequeno site sobre um filme de sua livre escolha Agora, descompacte o arquivo e teremos uma pasta chamada “filme”, dentro dela, diversos arquivos do joomla. Para iniciarmos a instalação, acesse o navegador e digite a seguinte linha: http://localhost/filme IMPORTANTE: Perceba que é possível ter diversos projetos armazenados em seu computador, desde que, para cada um deles exista uma base de dados diferente. Caso tudo tenha dado certo até aqui, você será direcionado para a interface de instalação do Joomla. Configuração Principal A primeira parte dele se refere as configurações principais, então vamos a elas: Site Name: É o nome do seu site, podemos utilizar filme (não há problema algum ser o mesmo nome que a pasta principal), ou outro nome a escolha do usuário 12 Description: Área opcional para a inserção de uma breve descrição sobre seu site Admin E-mail: Apesar de ser uma instalação offline, é obrigatório inserirmos um endereço de e-mail válido. Admin User Name: Aqui, precisamos inserir um nome de usuário que será usado para acessar a área administrativa, aqui vamos usar admin Admin Password: Nesse campo, inserimos a senha para acessar a área administrativa, para fins de estudo colocaremos também admin, mas ATENÇÃO: AO DESENVOLVER UMA APLICAÇÃO REAL JAMAIS UTILIZE ESSE ARTIFÍCIO, SEMPRE CRIE UMA SENHA SEGURA. Confirm Admin Password: Aqui devemos digitar novamente a senha do administrador do site, nesse caso, admin A última opção dessa primeira etapa se refere à apresentação do site. É possível deixar o mesmo fechado para visualização, permitindo que o desenvolvedor trabalhe somente na área administrativa. Inclusive, podemos criar uma mensagem personalizada como: “Em construção”. Algo muito utilizado no cotidiano dos desenvolvedores, não é o nosso caso, portanto, mantenha a opção “NO” ligada. Com tudo pronto, siga para a tela seguinte. 13 Configuração do Banco de Dados A segunda tela se refere a configuração da Base de Dados Database Type: É possível escolher entre MySQL ou MySQLi, mas qual a diferença? O manual oficial do PHP disponível na internet através do endereço br2.php.net explica: MySQL e MySQLi são duas tecnologias úteis se você estiver desenvolvendo uma página da Web interativa com o Hypertext Preprocessor, ou PHP, linguagem de script. Como seus nomes sugerem , tanto MySQL e MySQLi contar com a linguagem estruturada de consulta ou SQL , que é um sistema padronizado para solicitação de informações de bancos de dados. No entanto, apesar dessas semelhanças gerais , as duas tecnologias têm suas diferenças, como o MySQL é , uma tecnologia PHP mais básico mais velho, enquanto MySQLi é mais recente e oferece funções mais avançadas. A partir de 2011 , os desenvolvedores normalmente usá-lo apenas quando se trabalha com versões do PHP 4.1.3 ou mais. Embora o MySQL poderia trabalhar com versões mais recentes do PHP , ele não pode utilizar os recursos mais recentes associados com as versões mais recentes do PHP. Considerando que as versões atuais do Joomla necessitam do Php 5.3.9 ou superior e nosso servidor Xampp atende esses requisitos, é interessante optarmos por MySQLi. Host Name: Em aplicações offline, por padrão, usamos localhost, já em serviços de hospedagem, varia de empresa para empresa, em geral, utiliza-se o mesmo nome da base de dados. Username: É o nome do usuário da base de dados, ao trabalhar offline, usamos por padrão “root”, já em serviços de hospedagem, é preciso verificar junto as configurações do painel de controle quais as configurações que devem ser usadas Password: Aqui, deixamos em branco, em serviços de hospedagem é preciso verificar da mesma forma que o Username. DataBase Name: O nome da base de dados criada no PhpMyAdmin, no nosso caso, “db_aula”, em serviços de hospedagem, inserimos aqui o nome cedido pela empresa ou o nome de uma nova base de dados criada no painel administrativo Table Prefix: É recomendável não mexer nesse campo, o próprio joomla verifica e sugere um prefixo que não seja igual a outros já existentes no banco de dados, ele SEMPRE deve ser acompanhado de um underline. 14 Old DataBase Process: Também é recomendável não alterar esse campo, ele é utilizado para remover ou fazer o backup de antigas base de dados. Terminando de preencher os campos necessários, vamos para a última tela. Finalização e Verificação Logo no primeiro item, mantenha a opção padrão, pois iremos mais a frente instalar um pacote de atualização do idioma e todas as outras opções podem atrapalhar esse processo. O item seguinte mostra a opção de enviar ou não as configurações por e-mail, podemos ignorar e ir direto para o fim da página 15 A tela acima apresenta uma análise geral das configurações, sendo que do lado esquerdo temos uma lista com itens relacionados a instalação do joomla e do lado direito as configurações do PHP dentro do nosso servidor (no caso, o Xampp). A presença da cor amarela apenas indica que um item está fora do padrão mas que isso não interfere no desempenho do joomla, nossa única preocupação seria a presença de uma cor vermelha, que poderia indicar, entre outros problemas, falta de compatibilidade entre a versão do Xampp e do Joomla, por exemplo. Com todas as verificações feitas, finalmente vamos clicar no botãoInstall Removendo a pasta Installation Ainda não acabou! Perceba que na tela que surge após a instalação há uma notificação em laranja, solicitando que haja a exclusão da pasta installation. Por quê? Caso ela não seja removida, ao tentar inicializar o site/projeto ele retornará para o início da instalação e nós não queremos ter que realizar toda configuração novamente, certo? É possível remover a pasta indo até o caminho onde a mesma se encontra: C:/xampp/htdocs/filme ou basta clicar no botão indicado para o que joomla faça isso para você Agora sim, podemos prosseguir 16 Aula 03 - CONHECENDO O JOOMLA O primeiro grande desafio é se adaptar a interface do joomla, já que a mesma conta com uma diversidade imensa de itens, sem contar, os adicionais que podem ser instalados posteriormente. Essa adaptação começa com a compreensão de um conceito básico: Front-End e Back-End Front-End – É o site em si, ou seja, tudo aquilo que pode ser visto pelo usuário que acessa bem como toda área de navegação, podemos afirmar que é o resultado do que é feito no Back-End. Back-End – Vem a ser a área administrativa e toda interface utilizada para o gerenciamento do site, desde textos, fotos, banners e todos os outros itens determinados pelo desenvolvedor que serão apresentados ao usuário visto que, em geral, há muito mais no Back-End do que o internauta possa visualizar no Front-End. O joomla nos concede a possibilidade de trabalharmos com as duas áreas, ou seja, desenvolver no Back-End e acompanhar as mudanças de forma imediata no Front-End. Para acessar o Front-End do nosso projeto, basta abrir o navegador e digitar: http://localhost/filme Perceba que é o mesmo endereço que digitamos no início do processo de instalação do joomla, mas dessa vez, ele já está instalado e não temos mais a pasta instalattion, sendo assim, nos é apresentada a tela do Front-End (padrão para todas as novas instalações) 17 Perceba que a tela do site tem um pré-modelo e ao longo das aulas iremos preenchê-lo, importante dizer que é possível personalizar o mesmo, algo que veremos adiante. É no back-end que passaremos mais de 90% do tempo, para acessar, digite em seu navegador: http://localhost/filme/administrator Obs: Esse é um padrão para acesso a essa área, independente se o projeto é offline ou não, em um site devidamente hospedado, para irmos ao Back-End sempre usaremos a palavra administrator. Exemplo: www.seusite.com.br/administrator Ao acessarmos, é necessário inserir o nome de usuário e senha que cadastramos na última etapa da instalação, no nosso caso, admin para ambos Aparecerá então a seguinte tela: A área central serve para mostrar os últimos usuários que acessaram o Back- End, os artigos populares bem como notícias diretas do site oficial do Joomla. Na aba lateral temos o menu de acesso rápido, são na verdade, as principais ferramentas do sistema que podem ser encontradas também no menu superior onde há a barra com todas as funções. De forma prática, iremos focar somente a aba superior, mas antes de falarmos sobre cada menu, vamos traduzir nosso joomla que até o momento, não possui em sua versão atual a opção de instalação diretamente em português 18 Traduzindo o Joomla Acesse o menu Extensions e em seguida Extension Manager essa é a área utilizada para instalarmos extensões para nosso joomla, contudo, por hora adicionaremos somente o pacote de tradução. Nessa tela, clique em Install Language que se encontra no menu lateral Procure pelo idioma Português – Brasil, em seguida, selecione o mesmo e clique em Install na parte superior esquerda da tela, conforme imagem abaixo: 19 Obs: As versões recentes do Joomla podem apresentar algum erro no momento da instalação de novas extensões. A mensagem na cor verde comprova que, apesar das mensagens de alerta, o pacote foi inserido com sucesso. A instalação foi feita e agora é necessário selecionar o novo idioma como padrão tanto do front-end, como do back-end, para isso, acesse o menu superior Extensions em seguida Language Manager Na próxima tela, selecione o novo idioma como padrão, clicando na estrela. Perceba na tela acima que alteramos o idioma padrão do Fron-End (Site), isso é visível por conta do menu lateral que mostra Installed – Site em azul Agora, clique em Installed-Administrator e repita o processo anterior. Pronto, a tradução do joomla está finalizada, caso a mudança não seja imediata, faça o log-out e acesse novamente a área administrativa. 20 Barra Principal de Menu A barra superior trás os itens do joomla. Não iremos contemplar todos ao longo dessa apostila, pois seu conteúdo é muito vasto, o mesmo vale para os módulos, componentes e plugins que veremos adiante. Contudo, é importante conhecermos cada menu. Sistema Esse menu dá acesso as configurações gerais do joomla desde cores e fontes até o acesso ao sistema, tempo de conexão, banco de dados, palavras chaves para buscadores, posicionamento de janelas, etc. Usuários Presente desde a primeira versão do joomla. Como o próprio nome diz, é usado para o gerenciamento de usuários, desde a criação, alteração ou exclusão até a configuração de permissões (Quais as janelas que podem ser visualizadas por um determinado usuário, é apenas um exemplo). Em um site de pequeno porte, esse menu pode até passar desapercebido, contudo, para projetos onde existam mais de dois desenvolvedores ou mesmo um projeto no qual o próprio cliente cuidará da atualização, esse conjunto de itens é fundamental Menu Aqui é feito o gerenciamento completo dos menus (Quem disse que um site só pode ter um), podemos afirmar que as páginas do joomla são criadas a partir daqui, pois todo o conteúdo criado pelos artigos, categorias, módulos e componentes só podem ser vistos se estiverem ligados a um item de menu. Algo muito interessante é que ao criar um novo item de menu, é possível definir como o conteúdo será apresentado (layout). Existem, por padrão, dezenas de maneiras diferentes. Conteúdo Usado para a criação e gerenciamento de categorias e artigos. Através desse menu é possível administrar também a galeria de mídias, onde ficam armazenadas as fotos e vídeos que são usadas no site 21 Componente Menu usado para gerenciar os componentes instalados por padrão no joomla bem como aqueles que são instalados posteriormente. Em geral, cada componente possui sua própria área de edição, sendo assim, primeiro é feita a configuração segundo a necessidade do usuário e depois a conexão com um item de menu. Extensões Esse menu contém os itens considerados fundamentais no gerenciamento do site, entre eles, a administração dos módulos, possibilidade de inserir novas extensões (sejam elas componentes, plugins, etc.), além de fazer upload de novos templates. Ajuda Como o próprio nome já diz, trás itens de consulta sobre a plataforma bem como dicas de como usar todo o seu potencial. Importante para os iniciantes. Configuração Global Vamos verificar algumas opções interessantes nesse item: Acesse: Sistema – Configuração Global 22 Logo no início, em Definições do Site temos três áreas interessantes que modem ser modificadas a qualquer momento: 1 – Nome do Site: Mesmo sendo campo obrigatório no momento da instalação, é possível, posteriormente, alterar o nome do site, mas ATENÇÃO: Fazer isso com frequência pode determinar graves problemas no posicionamento do site nos buscadores. 2 – Modo Offline: É possível deixar o site no modo offline e criar uma mensagem personalizadaque aparecerá para qualquer usuário que tente acessá-lo, como podemos ver, é possível ainda criar uma imagem e utilizar a mesma ao invés de um simples texto. 3 – Quando criamos um artigo ou usamos qualquer item que possui área de texto, temos a disposição um editor que por padrão, é o TinyMCE, veremos adiante que é possível inserirmos novos editores, alguns extremamente poderosos e é nessa tela que escolhemos qual será utilizado em todo o sistema Descendo a janela temos as Configurações de MetaDados, os dois primeiros campos são os mais importantes sendo o primeiro a descrição do site e o segundo as palavras chaves, ambos são importantes para os buscadores sendo que a Meta Descrição deve ser escrita em forma de parágrafo: Exemplo: “O melhor conteúdo sobre a melhor animação da Disney” Já o outro campo deve ser preenchido com palavras curtas separadas por vírgula. Exemplo: “Toy Story; Disney, Woody, Buzz, Animação, etc.” O ideal para ambos os campos é que não ultrapasse 20 palavras. 23 Como já explicado anteriormente, não iremos explorar todos os itens e janelas do joomla, contudo, vale a pena citar que a aba lateral é usada para modificações gerais em todos os componentes. Exemplo: Digamos que ao criar os artigos, o desenvolvedor não queira que o título do mesmo apareça na tela do site, ou ainda que a data em que o mesmo foi criado fique oculta. Essas são opções que podem ser alteradas em cada artigo, contudo, através desse menu lateral (na área de artigos, por exemplo) é possível fazer uma única alteração para todos os artigos 24 Aula 04 - INSERINDO CONTEÚDO Chegou a hora de gerar conteúdo e ver o mesmo na tela do nosso site, mas antes precisamos compreender o conceito de Categorias e Artigos. Como o Joomla organiza o conteúdo? De forma bem objetiva, os artigos são por padrão a forma principal de criar conteúdo, cada um recebe um título (nome) que pode estar relacionado diretamente ao texto inserido, pode ter uma ou mais imagens, tabelas, links, enfim, para efeito de comparação, imagine a criação de artigo como a criação de um novo documento do Word. Já as categorias tem a função de organizar os artigos, podemos comparar estas às pastas que podemos criar em nosso computador. Exemplo: Três pastas com nomes diferentes de disciplinas ministradas por um professor, considerando matemática, física e estatística. Vamos imaginar que cada uma dessas postas possuem diversos arquivos como provas, planilha com notas de alunos, apostilas, etc. Podemos considerar então que as pastas são as categorias e cada arquivo um artigo diferente. Criando uma nova categoria Acesse o menu Conteúdo e em seguida Gerenciador de Categoria – Nova Categoria Perceba que a tela seguinte possui uma simples interface e seus campos são bastante intuitivos, a área de texto possui inclusive algumas funções semelhantes as de formatação do Microsoft Word. Contudo, em geral, preenchemos somente o campo Título, pois, conforme mencionado acima, a categoria servirá para organizarmos nosso conteúdo, sendo assim, inserir texto e/ou imagem é totalmente dispensável. Baseado na proposta de site que estamos montando ao longo dessa apostila, vamos criar a categoria Notícias. 25 Antes de criarmos essa categoria, é interessante falarmos sobre dois campos: O Campo ao lado (Apelido) será usado para a identificação, o nome escrito aqui, será o mesmo que aparecerá em sua URL quando acessar algum artigo pertencente a essa categoria. Caso o mesmo fique em branco (recomendado) ele criará um aleatoriamente Outro campo interessante para citarmos é o campo “Pai” que se encontra na aba direita da tela. Ele serve para interligarmos categorias, ou seja, criar subcategorias, artifício muito utilizado para melhorar a organização do conteúdo. Voltando ao exemplo anterior, é possível que na pasta matemática tenha outra pasta chamada provas e dentro dela outras quatro pastas com o nome de cada bimestre e somente dentro de cada bimestre o arquivo das avaliações, ou seja, não há limite para a criação de categorias e subcategorias. Continuando: Clique em Salvar & Fechar para criar a categoria Notícias Perceba que já existe outra categoria criada chamada uncategorised, ela é criada no momento da instalação do joomla e servem justamente como padrão para artigos que não possuem ligação com qualquer outra categoria criada pelo usuário, em outras palavras, “artigos sem categoria”. Apesar de parecer útil em certos momentos, é muito importante que todos os artigos estejam organizados em categorias. 26 Criando um novo artigo Acesse o menu Conteúdo e em seguida Gerenciador de Artigo – Novo Artigo Aqui também temos diversos campos e opções de parametrização, por hora, vamos nos concentrar em criar o conteúdo, sendo assim, precisamos nos preocupar com três itens: 1 – Título 2 – Texto 3 – Categoria Para facilitar o processo, pegue uma notícia qualquer sobre o filme do qual estamos montando o projeto, utilize o mesmo título no campo com essa finalidade e insira o restante da matéria na área de texto (configure como desejar) e por fim, na aba lateral, altere o campo categoria para Notícias. Clique em Salvar & Fechar para criar o Artigo Apresentando o Artigo na Página Principal O processo é muito simples: Perceba que em sua lista de artigos na coluna ESTADO existem três botões, o primeiro define se o artigo está ou não publicado, o segundo nos dá a possibilidade de defini-lo como DESTAQUE e o terceiro serve para enviarmos o artigo para a lixeira ou arquivarmos o mesmo. 27 Para que o artigo apareça na página principal, basta ligarmos a segunda opção em forma de uma estrela (Destaque). Agora vamos verificar o resultado, abrindo em outra aba nosso front-end com o endereço localhost/filme ou simplesmente clicando na opção “visualizar site” que se encontra na extremidade inferior esquerda. Alterando as configurações de um artigo Observando o artigo que acabamos de colocar na página principal, temos uma área chamada “Detalhes” onde temos informações sobre a criação do texto como data, quantidade de acessos, categoria, etc. Já no botão do lado direito, temos a opção de imprimir ou enviar por e-mail. Apesar de serem relevantes, esses dados e opções podem ser ocultados. Da mesma forma, é possível acrescentar informações sobre o artigo criado. Para isso, no backend, acesse o Gerenciador de Artigos e clique sobre o que acabamos de criar. Vá até a aba Opções de Artigo e veja que há uma quantidade enorme de opções que podem ser apresentadas juntamente com o artigo, em cada uma podemos selecionar ocultar, exibir ou usar global. 28 Mas o que significa usar global? Significa utilizar as configurações pré-definidas em Configuração Global. Lembrando que lá, temos uma área específica para alterar as opções de diversos itens e componentes do joomla e os artigos estão inclusos. A grande vantagem é não termos que alterar artigo por artigo, mas já deixar pré-definido como queremos que eles sejam apresentados em nosso front-end. Aproveitando que estamos na área de edição do artigo, selecione a aba Opções de Publicação, aqui temos alguns elementos que merecem destaque como a possibilidade de definir a data inicial da publicação de um artigo da mesma forma que a data de encerramento. Isso pode ser muito útil se tratando de promoções que, em geral, possui uma data de validade. Em algumas empresas, esse artifício também pode ser usado para que o sistema não fique sobrecarregado, dessa forma, é definido um período para o qual um artigo constaráno servidor. Aqui também temos a possibilidade de acrescentar uma descrição e palavras chaves para o artigo. Isso é particularmente útil perante os buscadores, fazendo com que seu site seja encontrado com mais facilidade. Acrescentando o “Leia Mais” É extremamente útil termos a opção de limitar a apresentação de um artigo através do botão “leia mais”, isso permite construir um layout mais simples e clean. Para isso, vamos até a tela principal de edição de nosso artigo (content) e posicione o mouse no local exato em que deseja aplicar o botão, em seguida, basta clicar em “Leia Mais” e então aparecerá uma linha pontilhada na cor vermelha conforme imagem abaixo. 29 Acrescentando link no artigo Processo também muito simples. Basta selecionar a palavra ou frase que deseja transformar em um link e clicar no botão que tem a aparência de um cadeado fechado. A janela que se abrirá permite que você insira o endereço de destino (URL) bem como escolher se o site abrirá na mesma tela ou em uma nova aba. 30 Aula 05 - EXTENDENDO O JOOMLA Sem dúvida, uma das razões da popularidade do Joomla é o considerável número de extensões disponíveis. São milhares delas para os mais variados fins e necessidades de um site. Há por trás disso toda uma comunidade envolvida e empenhada do desenvolvimento e aperfeiçoamento de funcionalidades para serem incorporadas aos projetos. A maioria, cerca de 90%, são distribuídas gratuitamente, enquanto outras são comerciais. São cinco os tipos de extensões disponíveis: Plugin: são os tipos mais avançados de extensão. Um exemplo de plugin são os editores de texto. Componentes: Os componentes são miniaplicativos que podem se conectar diretamente a um item de menu, possuem diversas funções e áreas extensas de gerenciamento. Módulos: Semelhantes aos Componentes, contudo, com um número menor de funções mas com a vantagem de serem inseridos em qualquer área do template Idiomas: Ferramentas específicas de tradução tanto para o back-end quanto para o front-end Templates ou Temas: configuram a parte visual do site, como cores, gráficos e fontes. Ao se interessar pela instalação de alguma extensão, sempre faça primeiro testes num ambiente simulado, utilizando servidor local. Desta forma você poderá experimentar todas as configurações, implicações e funcionalidades, sem comprometer um projeto. Importante frisar a importância de não utilizar um número alto de extensões para não comprometer a velocidade do site, afinal, o mais importante em uma página é e sempre será o conteúdo Por padrão, o joomla já possui diversas extensões instaladas e é possível construir um site completo usando-as, todavia, ainda assim teríamos um site limitado tanto em sua engenharia quanto em matéria de designer. 31 As extensões existem e são muito utilizadas justamente para suprir essa necessidade se adaptando a cada projeto. Joomla Extensions Directory (JED): O JED é o ambiente oficial onde são colocados links para downloads de extensões para o joomla, atualmente, existem pouco mais de oito mil no endereço http://extensions.joomla.org Divididas em diversas categorias e subcategorias, na verdade, esse portal engloba links que direcionam para outros sites. É importante ressaltar que além dos itens existentes no JED, é perfeitamente possível encontrar centenas de outras extensões realizando uma simples pesquisa nos dispositivos de busca Buscando e Instalando um Novo Componente Vamos aproveitar e realizar o download de um componente, precisamente um novo editor chamado JCE. Para isso basta acessar o JED e buscar a categoria correspondente chamada Editing e em seguida a subcategoria Editors Na lista que se apresentará, procure pelo JCE 32 Todos os itens do JED apresentam duas informações importantes, perceba que na imagem anterior temos próximo ao nome as versões do joomla ao qual o item escolhido irá funcionar e do outro lado as características. No caso do JCE, temos as letras C, P e S Considerando que: C: Significa Componente P: Signfica Plugin S: Significa Suporte Ou seja, isso significa que essa extensão é um Componente, mas também possui pacotes de plugin e o próprio site da empresa oferece suporte Existem outras duas letras que frequentemente também podem surgir ao lado de outras extensões, são elas: M: Significa que é um Módulo L: (Language) - Signfica que possui pacotes de tradução Continuando: Clique sobre a extensão e na próxima tele procure pelo botão de download, clique nele para ser direcionado a página da empresa fornecedora do JCE. Perceba que nesse site há diversas extensões fornecidas, todas gratuitas, por hora, vamos ficar somente com o Editor, na versão de nosso joomla Feito o Download, é hora de instalar esse extensão Dentro do Back-End, acesse Extensões – Gerenciador de Extensões 33 Existem três maneiras distintas de instalarmos extensões 1. Enviar Pacote de Arquivos – Vá até “Escolher Arquivo”, selecione o pacote zipado e clique em “upload e instalar”; 2. Diretório de Instalação – É necessário extrair para um local onde você organiza suas extensões baixadas. Crie uma nova pasta e a nomeie com o título original do diretório baixado. Envie todos os arquivos e diretórios da extensão baixada para esta pasta criada. Em seguida abra esta pasta e copie o seu endereço (Ex.: C:\xampp\htdocs\jce.zip). Agora você só precisa colar esse endereço do diretório no campo “Diretório de Instação” e clicar em “Instalar”; 3. URL de Instalação – Identifique qual a url que oferece o dowload direto do arquivo a ser baixado. Você precisa apenas colar a url no campo “URL de Instalação” e clicar “Instalar”. Para funcionar efetivamente, você precisa ter a url que o leva diretamente ao arquivo da extensão. Vamos usar a primeira opção, considerada a mais simples. O Joomla mostrará a informação de que a extensão foi instalada com sucesso. Perceba que imediatamente podemos visualizar o JCE na aba Componentes Como na maioria dos componentes, o JCE também possui diversos parâmetros, porém, o que realmente importa é a sua funcionalidade. Vamos lembrar que ele é um Editor. Mas o que necessariamente signfica isso? 34 Acesse o Gerenciador de Artigos e posteriormente o primeiro e único artigo que criamos até agora Dê uma boa olhada na área de edição, precisamente nas funções que temos, como NEGRITO, ITÁLICO, SUBLINHADO, ALINHAMENTO e tudo mais que está nessa barra chamada de EDITOR Feche clicando em Cancelar ou Salvar e Fechar Agora, Vá até Sistema – Configuração Global na tela seguinte, um pouco em baixo teremos a opção EDITOR PADRÃO, clique e altere para aquele que acabamos de instalar, ou seja, o JCE Clique em Salvar e Fechar e retorne até o artigo, perceba que nosso editor está completamente diferente: Entre as novas opções temos a possibilidade de alterar o tipo e o tamanho da fonte, além de cores, preenchimento, inserção e configuração completa de uma tabela e até corretor ortográfico. Esse foi apenas um exemplo de instalação de uma extensão, voltaremos a executar esse processo ao longo das próximas aulas 35 Aula 06 - TRABALHANDO COM IMAGENS Gerenciador de Mídias Para chegarmos até esse ambiente (mostrado na figura abaixo), basta acessar Conteúdo – Gerenciador de Mídias Essa é a área na qual armazenamos nossos arquivos de imagem e vídeo para serem utilizados em nosso site, perceba que a interface é semelhante ao Windows Explorer, ou seja, podemosgerenciar pastas para melhor organização do conteúdo. Armazenando imagem no joomla Clique em “Create New Folder” e dê o nome de “img_noticias” Obs: Não são aceitos nomes com espaço Acesse a pasta e clique no botão “Enviar” escolha uma imagem do seu computador (preferencialmente alguma que tenha relação com o artigo que criamos) e faça o upload 36 Inserindo imagens em artigos Esse procedimento é bem simples, vamos acessar nosso único artigo criado até o momento e clicar na área de edição, onde se encontra o texto (preferencialmente antes da primeira palavra) e em seguida clique no botão Insert/Edit Image conforme mostrado abaixo IMPORTANTE: Caso você não esteja usando o JCE a janela que se abrirá mostrará apenas dois campos solicitando que você digite o caminho no qual a imagem se encontra (a pasta padrão se chama image) e o título da mesma. Como nós estamos usando o Editor JCE, a janela apresentada será essa: Vamos começar de baixo para cima: Perceba que é possível visualizar toda estrutura de nosso gerenciador de mídias e não apenas isso, mas também, por meio dos botões laterais, criar novos diretórios e fazer o upload de novas imagens sem a necessidade de irmos até o gerenciador de arquivos. Lembrando que essa facilidade existe por estarmos usando o componente JCE 37 Procure e acesse a pasta que criamos, chamada “img_noticias” e posteriormente clique sobre a imagem que iremos inserir. Perceba que imediatamente, parte dos campos na área superior serão preenchidos URL: É o caminho onde se encontra a imagem dentro do joomla Alternate Text: Você se lembra do parâmetro “alt” do HTML ? Pois bem, aqui no gerenciador de imagem, o joomla automaticamente cria essa informação, essencial para os motores de busca Dimensions: O tamanho real da imagem, considerando width x height (largura por altura). Note que o campo “proportional” por padrão está ativo, ele facilita muito caso haja a necessidade de diminuir ou aumentar a imagem, isso porque basta alterar um dos campos e clicar no botão ENTER para que ele altere o o outro campo. O campo seguinte, se chama Alignment (Alinhamento) e possui as opções Left, Right e Center, o interessante é que, conforme alteramos esse campo, é possível verificar na janela “preview” (lado direito) exatamente como ficará o designer mesclando nossa imagem com o texto que já se encontra no artigo Se deixarmos do jeito que está teremos uma imagem bem alinhada, contudo, com o texto praticamente colado na mesma. Para evitar isso, temos a opção Margin que como o próprio nome sugere, cria um espaçamento entre imagem e texto O parâmentro “Equal Values” funciona exatamente como o “Proportional” do Dimensions, ou seja, ele atribui o primeiro valor a todos os outros campos 38 Caso deseje, é possível, através da última opção adicionar uma borda em volta da imagem, bem como configurar largura, estilo e cor Após realizar todas as configurações desejadas, clique em Insert e verifique o resultado no Front-End OBS: Apesar de não abordarmos nesse material, a janela utilizada para gerenciar a imagem ainda possui outras duas funções que se encontram no topo, sendo uma delas a possibilidade de alterar a imagem ao passarmos o mouse por cima (mouseover) e a outra funções avançadas em para estilizar com CSS 39 Aula 07 - TAREFA COMPLEMENTAR Crie mais 6 novos artigos respeitando as características abaixo: Todos devem estar ligados a categoria Notícias Insira ao menos uma imagem em cada um dos artigos Use o botão “LEIA MAIS” em todos eles Crie ao menos um link externo em cada artigo NÃO coloque nenhum deles em DESTAQUE Retire todos os botões adicionais (e-mail, autor, data, acessos, etc.) Procure manter o mesmo padrão de fonte para todos os artigos 40 Aula 08 - CONFIGURANDO O MENU Diferente de outras plataformas ou até mesmo da criação de sites apenas utilizando HTML e CSS, o Joomla não necessita que seja construída uma página para apresentar cada conteúdo. Na verdade, ele nos possibilita gerenciarmos as informações e apresentarmos onde desejamos. Essa versatilidade só existe devido a utilização de um menu, onde cada link é considerado uma página independente. Na aula anterior criamos diversos artigos, mas não os colocamos em DESTAQUE, porquê? Porque nosso objetivo agora é apresentar esse conteúdo em uma área específica para notícias. Adicionando novo item ao menu Acesse Menus – Main Menu Perceba que o único item existente é o “Home”, mas o que desejamos é um botão específico para apresentar nossas notícias, certo ? Sendo assim, clique em Novo Antes de mais nada, vamos escrever o título desse item que nada mais é que o nome do botão, no caso, “Notícias”. Ao lado, temos o campo Apelido que, caso fique em branco copiará o título. Esse apelido é justamente o que aparecerá em nossa URL ao acessarmos esse link. Na área central temos o campo “Tipo de Item de Menu”, para escolher, devemos clicar no botão azul Selecionar A janela que se abre possui diversas opções, aqui é onde escolhemos o que exatamente deverá ser apresentado na área de conteúdo de nosso novo botão (conhecido como content, guarde essa palavra). Boa parte dos itens apresentados nessa janela estão diretamente ligados aos componentes instalados em nosso joomla, ou seja, em geral fazemos a configuração de um componente e depois determinamos em qual botão/link do site ele irá aparecer. 41 Exemplo: Digamos que vamos selecionar a opção FONTE DE NOTÍCIAS, isso significa que esse componente só irá aparecer quando clicarmos em Notícias. É possível criar diversos links e configurar um componente (e apenas um) para cada, como já foi descrito nesse material, apenas com as extensões já presentes no joomla é possível criar um belo site. Diferentes formas de apresentar o conteúdo através de um link Ainda nessa janela, vamos clicar em “Artigos”, fazendo isso, teremos uma série de outras opções. Perceba que ao lado de cada uma existe uma breve descrição que facilita o entendimento da sua função. Como podemos ver, é possível apresentar uma lista de categorias, somente um artigo ou ainda mostrar somente os artigos que estão marcados com DESTAQUE (esse último é justamente a configuração usada pelo item de menu HOME) 42 Vamos escolher Categoria como Blog Após o carregamento da página, ele solicitará logo abaixo a categoria, no nosso caso, colocaremos “Notícias”. Até aqui: Estamos criando um novo botão em nosso site que apresentará nossos artigos em formato de Blog, artigos esses somente da categoria Notícias Configurando Layout dos Artigos Na parte de cima, temos diversas opções (em azul), por hora, vamos escolher “Opções de Layout do Blog” A próxima janela nos trás quatro campos e são eles que gerenciam a forma como nosso conteúdo será apresentado. Aqui iremos inserir apenas números, contudo, precisamos compreender a função de cada um. Vejamos: #Artigos Principais Significa que ele apresentará o artigo ocupando toda a janela do site onde está o conteúdo, se colocarmos aqui o número um, ele apresentará somente um artigo baseado nessa regra, se colocarmos dois ou mais, ele organizará colocando um em baixo do outro. 43 #Introdução Artigos A quantidade que for colocada aqui será apresentada obrigatoriamente em baixo do(s) artigo(s) principal,porém, diferente da opção anterior, se colocarmos aqui o valor dois ou acima, ele irá organizar os artigos um ao lado do outro, dividindo em colunas baseado no valor digitado no próximo campo #Colunas É a quantidade de colunas em que serão divididos os artigos apresentados no campo anterior, em outras palavras, para uma melhor organização, é interessante que o mesmo valor colocado em #Introdução Artigos seja colocado aqui também #Links Aparecerá no final, após todos os outros. Aqui é definida a quantidade de artigos que apresentarão somente os seus respectivos títulos Para compreendermos melhor, preencha da seguinte forma: Clique em Salvar e veja o resultado no front-end. Perceba que em nosso menu já temos um novo link Ao clicar nele, podemos verificar todos os nossos artigos, preste bem atenção na disposição dos mesmos: 44 Veja que o primeiro artigo ocupa de forma completa a área do conteúdo, os dois que se seguem estão abaixo divididos exatamente em duas colunas e por fim temos quatro links apresentando somente o título com uma barra de paginação ao término dos mesmos É justamente a parametrização feita no Layout desse item de menu, significa que se desejarmos três artigos “completos”, um em baixo do outro, devemos colocar esse número no primeiro campo (#Artigos Principais) e assim sucessivamente. Retirando o título do artigo do botão “Leia Mais” Por padrão, os botões “Leia Mais” dos nossos artigos vem acompanhado do título do mesmo Como retirar isso? Vá até o item de menu que acabamos de criar (Notícias) e acesse “Opções do Artigo” Note que temos as mesmas opções em cada um dos artigos criados, a diferença é que aqui conseguimos alterar todos que estão dentro desse link de uma única vez. Vá até “Exibir Título no Leia Mais” e marque como OCULTAR 45 Podemos ver o resultado abaixo: Criando item de menu inativo É muito natural, quando estamos criando um site, montar os itens de menu e deixá-los provisoriamente inativos até construir o conteúdo correspondente. Ao criar páginas em HTML, é possível usar # dentro da TAG <a>, dessa forma, o menu apesar de aparecer, se torna inativo. Exemplo: <a href=”#”>Nome do Botão</a> Vamos aprender a criar algo semelhante em nosso menu do joomla. Acesse Menus – Main Menu – Adicionar Item de Menu No campo “Título do Menu”, vamos colocar Site Oficial e em “Tipo de Item de Menu” selecione Links de Sistema – URL Externa Agora basta inserir # no campo link 46 Dessa forma teremos um link que existe, mas se encontra inativo, em qualquer momento, podemos retornar e inserir uma URL externa ou simplesmente alterar o “tipo de item do menu” 47 Aula 09 - TAREFA COMPLEMENTAR Realize as etapas abaixo para criar um novo item de menu com conteúdo 1 Crie uma categoria chamada Personagens 2 Copie para sua máquina fotos dos personagens referente o seu filme 3 Crie três novos artigos ligados a categoria Personagens 4 Crie um novo item de menu em forma de blog 5 Conecte o novo item de menu a categoria Personagens Importante: Não esqueça de conectar cada novo artigo a categoria Personagens Cada artigo deverá fazer a descrição de um personagem diferente Cada artigo deverá ter uma foto Armazene as fotos em uma pasta chamada personagens Centralize a foto e deixe o texto abaixo da mesma Coloque o “Leia Mais” entre as fotos e os textos Retire o Título dos artigos do botão “Leia Mais” A estrutura de layout do novo item de menu não deverá ter nenhum artigo principal ou links inferiores, contudo, deverá apresentar os 3 artigos criados em 3 colunas 48 Aula 10 - MÓDULOS Conforme explicado anteriormente, os módulos se assemelham aos componentes, contudo, não possuem tantas funções, mas tem a vantagem de serem atribuídos a qualquer área do site além aparecerem em mais de uma página Muitos componentes também podem ser apresentados como módulos, isso significa que além de ter diversas opções de personalização, é possível apresentá-los em diferentes lugares. Conhecendo um pouco sobre Templates Para compreendermos melhor essa diferença entre componentes e módulos e darmos continuidade em nosso processo de criação, vamos explicar um pouco sobre outra importante extensão, os templates. Templates nada mais são que o “esqueleto” do site, onde toda informação é apresentada. Cada template possui diversas posições e elas são preenchidas pelos módulos. O Joomla em sua versão mais atual vem com dois diferentes templates, o protostar é aquele que vem instalado como padrão. Mais a frente veremos mais detalhes sobre configurações de templates, por enquanto, basta conhecermos as posições do protostar, vejamos abaixo como fazer isso: Acesse Extensões – Gerenciador de Temas 49 Em seguida, clique em opções (ícone em formato de engrenagem do lado superior direito) Altere a Opção Preview Module Position para “ATIVADO” Com isso agora temos a possibilidade de enxergar as áreas do template. Para isso, vá até o front-end e independente da página digite ao término da URL: ?Tp=1 e aperte ENTER Perceba que é possível visualizar as posições do template (em vermelho) mesmo as que não estão sendo utilizadas. Inclusive, quando uma posição não é utilizada, ela simplesmente “se retrai” permitindo que os conteúdos próximos venham a se expandir, todavia, se encaixarmos algum conteúdo em uma posição ainda não utilizada, o template se adapta para comportar aquela informação. As posições do Template Protostar Vamos compreender melhor como é feita a distribuição das posições do template padrão, observe que as três primeiras áreas são: Position 0, Position 1 e banner, sendo um em baixo do outro 50 Perceba que os três preenchem a área completa do template, de ponta a ponta, diferente dos que veremos a seguir: Position 8, Position 3 e Position 7. Todos eles estão um ao lado do outro Apesar de não aparecer (em nenhum template), existe uma área que é usada para receber o conteúdo de nossos artigos e também para apresentar diversos componentes, chama-se “content”. Basta observar e ver que o local onde está o artigo realmente não apresenta nenhuma janela mostrando o nome da posição e ele(s) se encontra(m) bem embaixo do Position 3 Por fim, na parte inferior, temos as três últimas posições, sendo Position 2, Footer e Debug. A primeira citada está na mesma linha do Position 3 e do content e as outras duas se assemelham as do topo e se espalham de forma horizontal por todo o site 51 Um template, portanto, se assemelha a um quebra cabeça no qual podemos ir encaixando nosso conteúdo (componentes e módulos) de forma a construir o designer desejado. Gerenciando Módulos Agora que conhecemos nosso template e suas respectivas posições, vamos voltar aos Módulos. Acesse Extensões – Gerenciador de Módulos Já temos, por padrão, três módulos instalados sendo: Breadcrumbs (usado como uma espécie de mapa, mostrando o local onde o visitante se encontra) Main Menu (usado para gerar o menu de nosso site) 52 Finalmente temos o Login Form (módulo usado para o gerenciamento interno. Veremos mais sobre ele adiante) Existem três colunas importantes nessa área de gerenciamento de módulos, sendo Posição, Tipo e Páginas No primeiro temos exatamenteo local do template onde o módulo está sendo apresentado, na segunda coluna o tipo do módulo que está sendo usado e por fim a indicação de quais as páginas ele irá aparecer. Na parte central, ao lado do nome de cada módulo temos um botão que estando verde indica que o módulo está ativo, é possível alterar quando quisermos. Inserindo o módulo Personalizar HTML Clicando em Novo temos uma lista de excelentes módulos, parte deles possui conexão direta com os componentes já existentes em nosso sistema, mas o mais usado e versátil, sem dúvida é o Personalizar HTML 53 Tudo porque, ele é um módulo extremamente semelhante a criação de um artigo, ou seja, podemos colocar texto e/ou imagem e apresentar esse conteúdo em qualquer outra parte do site e não apenas no Content (Na verdade, nenhum módulo pode ser apresentado no “Content”) Procure e acesse o Personalizar HTML Vamos criar um pequeno banner lateral, algo semelhante a “anuncie aqui”, basta procurar uma imagem semelhante e guardá-la no computador. No campo “Título” vamos escrever: Banner Lateral. Em seguida use o botão de gerenciamento de imagem para fazer o upload do arquivo que está no computador (armazene na pasta banners) e inserir na área de texto, exatamente como fazemos ao inserir uma foto em um artigo, a diferença é que agora não temos texto, somente imagem (alinhe a imagem ao centro) Agora temos que definir em qual parte do template essa imagem irá aparecer, verifique a área a direita onde temos um campo chamado “Posição”, clique e selecione na lista o Position 8 dentro do Template Protostar Aproveite e altere o campo de cima “Exibir Título” para Ocultar Ainda tem mais, conforme explicado anteriormente, além de indicarmos o local do template, é possível definir em quais páginas desejamos que o módulo seja apresentado. 54 Vamos até Atribuir Módulo perceba que por padrão, ele será apresentado em todas as páginas, vamos clicar no botão e alterar para “Apenas nas Páginas Selecionadas” conforme imagem abaixo: Deixe somente a caixa da página “Notícias” selecionada e finalmente clique em Salvar e Fechar. Vamos até o Front-End e verificar que, conforme nossa configuração no módulo Personalizar HTML, a imagem aparece somente na página Notícias e na posição indicada 55 Aula 11 - TAREFA COMPLEMENTAR Insira banners diferentes em seu site 1 - Busque na internet fotos grandes referente o filme do seu site e armazene em seu computador 2 – Crie um módulo “personalizar html” e insira uma das fotos (armazene na pasta banners) 3 – Configure para que o mesmo apareça em uma das posições superiores 4 – Configure para que ele apareça somente na primeira página 5 – Repita os passos 2 e 3 com outras duas imagens, contudo, fazendo com que uma delas só apareça na página de notícias e a outra somente na página personagens 56 Aula 12 - GERENCIAMENTO DE USUÁRIOS O joomla possui um poderosíssimo sistema de gerenciamento de usuários e nesse capítulo, discorreremos “um pouco” sobre as ferramentas e categorias existentes. Quando é feita a instalação do joomla, automaticamente, criamos o usuário responsável pela administração total do sistema, chamado de Super User, ele possui a autonomia para alterar qualquer configuração, bem como inserir/excluir extensões. Existem ainda outros grupos de usuários, cada qual com uma característica específica. Mas qual a importância disso? Imagine poder criar conteúdo que será restrito a um tipo de público ou ainda ter usuários que possam criar, editar e publicar artigos sem a necessidade de acessar o back-end. Vamos conhecer um pouco de cada grupo: Guest: Significa visitante, não possui nenhum privilégio, tampouco tem acesso ao back-end, pode apenas enxergar conteúdo de acesso restrito do front-end Manager: Possui um acesso limitado ao Back-End, podendo apenas criar artigos, categorias, gerenciar mídias e alterar alguns componentes padrão Administrator: Consegue acessar o back-end e tem quase todos os privilégios exceto alteração na área de Configuração Global Autor: Não possui acesso ao Back-End, tem permissão para criar artigo, mas não editar e tampouco publicar (os artigos criados por ele ficam por padrão despublicados, aguardando permissão da parte de outro usuário com maiores privilégios) Editor: Também não possui acesso ao Back-End, tem permissão para criar e editar qualquer artigo via front-end Publisher: Através do Front-End pode criar, editar, excluir e publicar artigos. Não possui acesso ao Back-End Não iremos abordar na íntegra todas as possibilidades que existem referente ao gerenciamento de artigos, contudo, mostraremos a seguir alguns exemplos práticos que, sem dúvida, servirão para dar uma visão geral 57 Criando novo usuário O joomla possui um módulo padrão que funciona tanto para o usuário fazer seu login quanto para novos usuários se cadastrarem. Esse mesmo módulo já se encontra ativo e posicionado asism que finalizamos a instalação de nosso sistema. Conforme já mencionado, ele se encontra logo abaixo do nosso menu Contudo, não faremos a criação de um novo usuário através do Front-End mas sim via Back-End Acesse Usuários – Gerenciador de Usuários – Criar Novo Usuário Obs: Aqui, nessa aba Usuários, também temos uma opção chamada “E-mail em Massa”, ela é muito interessante uma vez que é usada para mandar uma mensagem a todos os usuários cadastrados 58 Continuando... Preencha os campos obrigatórios e também crie uma senha (fácil de lembrar) Em seguida, vamos até Grupos de Usuários Atribuídos Note que por padrão a categoria Registred já está selecionada, isso ocorre porque o joomla “compreende” que qualquer novo usuário terá acesso a algum local restrito do site, mesmo que seja somente para visualizar. Por isso é muito importante sempre manter essa caixa selecionada. Agora vamos selecionar o grupo ao qual esse usuário pertencerá. Vamos selecionar Autor Feito isso, clique em Salvar e Fechar Vamos repetir o mesmo processo, contudo, criando um Publisher 59 Muito bem, agora temos dois novos usuários, vamos apresentar os dois principais conceitos de uma única vez. Criando artigo via front-end e limitando acesso Ainda em nosso Back-End, acesse o gerenciador de menu e crie um novo item, insira “Escrever um Artigo” no Título e Selecione Artigo-Criar Artigo no “Tipo de Item de Menu” Antes de finalizarmos, vá até a área lateral e procure por um item chamado “Nível de Acesso”, ao clicar veja que há diferentes opções (Guest, Public, Registered e Special). Por padrão em todos os itens de menu, artigos, categorias, etc. Essa opção sempre estará setada como Public, mas dessa vez, vamos alterar para Registered Agora sim, vamos clicar em Salvar e Fechar Vá até o Front-End e perceba que o item “Escrever um Artigo” não aparece em nosso menu. Porque? Pelo fato de termos selecionado o nível de acesso dele como Registered, ou seja, ele somente poderá ser visto por um usuário que esteja logado. Vamos fazer o teste? 60 Utilize o Módulo de Login e faça o acesso com o usuário criado como Publisher. Veja que após o carregamento da página, o item “Escrever um Artigo” finalmente apareceu. Aqui entra o conceito de “conteúdo restrito”. Vale lembrar que qualquer item do joomla possui a possibilidade de ser restrito, em nosso exemplo, não somente demonstramos isso com um item de menu, mas com um item que, na maioriados casos, realmente não pode ser visto nem tampouco acessado por um usuário comum. Perceba, portanto, que é possível criar diversos itens que só poderão ser acessados e visualizados caso o usuário faça login. Esse controle pode ser feito através de um cadastro simples pelo front-end (que necessita da aprovação de, no mínimo um administrador) como também através de um controle de conteúdo pago, ou seja, caso o cliente tenha feito o pagamento, você libera o conteúdo para ele. Agora vamos clicar em “Escrever um Artigo” A tela seguinte mostra uma área de gerenciamento muito semelhante a do nosso back-end. Aqui o usuário pode não somente criar como também selecionar, por exemplo, a categoria correspondente além de poder inserir imagem e até meta-tags e keywords (falaremos mais sobre elas em outro capítulo) Vamos aproveitar e criar uma nova notícia. ATENÇÃO: Não esqueça de acessar a aba Publicando e selecionar a categoria Notícias. 61 Estando tudo pronto, salve clicando no botão azul Caso você realmente tenha acessado como Publisher, seu artigo irá imediatamente aparecer na área de notícias (a configuração do item de menu apresenta os itens mais recentes primeiro, é possível alterar isso em Opções de Layout) Muito bem, agora faça o Log-out e acesse novamente via Front-End, mas dessa vez usando o usuário registrado como “autor” e também crie uma nova notícia. Ao finalizar, perceba que a mesma não está aparecendo. Será que algo deu errado? Absolutamente não! O que acontece é que o grupo de usuário “autor” só pode criar artigose não publicá-los. Portanto, isso significa que esse artigo se encontra em nosso gerenciador, contudo, despublicado, aguardando que outro usuário com privilégios maiores possa liberar a postagem 62 Aula 13 - FORMULÁRIOS Existem diversas extensões para a criação de formulários e vamos dedicar esse capítulo a apresentação de um excelente componente. Veremos um pouco do que o Breezing Forms é capaz Baixando e instalando o breezing forms Podemos buscar pelo JED ou acessar diretamente o endereço da empresa crosstec: http://crosstec.de/en/extensions/joomla-forms-download.html Existe a versão paga, mas a gratuita consegue suprir nossas necessidades tranquilamente, sendo assim, busque por “Breezing Forms Lite” Ao fazer o download, perceba que temos um arquivo zipado no qual, inclusive, existe a informação de que devemos extrair antes de fazer a instalação (frequentemente fazemos diretamente a instalação de uma extensão, mas há exceções) No caso do BreezingForms Lite, ao extrairmos os arquivos da pasta principal temos diversos outros arquivos zipados, perceba que parte deles possui a descrição de que são compatíveis com a versão 3, dentre eles, temos um pacote de componente (prefixo “com”), um de módulo (prefixo “mod”) e um de plugin (prefixo “plg”) 63 Utilize o Gerenciador de Extensões para instalar os três arquivos nessa ordem: 1 – Componente 2 – Módulo 3 – Plugin Toda configuração é feito pelo Componente então, é para lá que nós vamos: Na primeira tela, o componente solicita que você aceite a criação de novas tabelas no banco de dados, apenas clique em “Continue” Ele apresentará mais uma mensagem dizendo que a instalação agora sim está completa. Clique novamente em “Continue” Por fim, a tela apresentada por último mostra a configuração padrão. Não precisamos nos preocupar. Desça a janela e clique em SAVE Funções do Breezing O menu lateral traz as principais funções do componente, entre elas, podemos destacar a Manage Records que armazena toda e qualquer informação enviada através dos formulários criados. Essas mesmas informações podem posteriormente ser exportadas para um arquivo XLS ou CSV, por exemplo. Manage Scripts e Manage Pieces possuem função semelhante, enquanto no primeiro podemos instalar complementos do breezing direto da internet, o 64 segundo serve como uma espécie de editor PHP, para que dessa forma possamos acrescentar funções via código. Por padrão, após a conclusão da instalação, nos encontramos na tela Manage Forms e é aqui que vamos dedicar uma atenção especial. Perceba que temos três botões verdes na parte superior, cada um deles possibilita a criação de formulário, claro que com suas características específicas. Vamos escolher o primeiro (Quick Mode) Construindo um Formulário A primeira tela apresenta as configurações gerais do formulário como nome, botões, e-mail de destino, etc. Temos também três botões na cor laranja que serão também usados para a contrução do formulário Page: Talvez você já tenha se deparado com a situação de preencher um formulário que tenha mais de uma página, pois bem, o breezing solicita que tenhamos ao menos uma página e é dentro dela que teremos nosso formulário Section: Considere como uma área quadricular que sempre ficará dentro de uma página Element: São os itens do Formulário Isso signfica que necessitamos ao menos de uma página, as seções só existem se as páginas existirem e os elementos só podem ser colocados dentro de uma seção. Para facilitar, o Breezing já deixa os botões na ordem que iremos precisar. Mas antes de utilizarmos esses botões, vamos alterar alguns campos na tela inicial de configuração Começando pelo Title e pelo Name, que inclusive podem ser os mesmos, vamos colocar “Contato” 65 Vamos, por enquanto, manter a descrição em branco. Descendo um pouco mais selecione as opções “last page is thank you page”, “mail notification” e preencha o campo seguinte com um e-mail válido A primeira opção significa que usaremos a última página como um agradecimento pela mensagem enviada, falaremos mais sobre isso adiante Finalmente, na última parte, temos a possibilidade de mostrar o botão “submit”, usar paginação (caso tenhamos mais de uma página para completar o formulário) e também um botão “clear” para limpar as informações Vamos manter somente o primeiro ativado e alterar o nome para “enviar” conforme imagem abaixo: Feito isso, use o botão Save Properties para guardar as alterações. 66 Obs: Sempre que fizermos qualquer alteração, precisamos pressionar esse botão antes mesmo de salvar o formulário Agora que nossa configuração inicial está pronta, vamos criar a primeira página, basta clicar no primeiro botão laranja, chamado New Page Como já citado, a página serve somente como um artifício de organização, sendo assim, não é preciso fazer nada aqui, exceto clicar no botão New Section Perceba que só é possível criar páginas se estivermos com a área de configuração inicial selecionada e só é possível criar seções se estivermos com uma página selecionada. Um depende do outro. Tecnicamente, uma seção tem basicamente a mesma função de uma página, ou seja, organizar conteúdo. A diferença é que podemos ter várias seções dentro de uma página, contudo, nesse exemplo usaremos somente uma. Nessa tela, é importante nos atentarmos para os campos. Type: Se estiver selecionado como Normal, os campos irão simplesmente aparecer na tela já na opção FieldSet, haverá uma borda em volta de toda seção Display Type: Na opção padrão (Wrap after each element), cada elemento de dentro da seção aparecerá embaixo do outro já em All in a Row, o próprio breezing tentará organizar as informações e vez ou outra colocará um campo ao lado do outro. Title: É o nome da seção, e dependendo das opções escolhidas acima, ele irá aparecer no topo do formulário. Section Name: É o nome que será armazenado no banco de dados, podemos simplesmente copiar o
Compartilhar