Apostila de Joomla_nova

APOSTILA PARA INICIANTES EM JOOMLA 1.5

POR JENNIFER PAYNE

É ESTRITAMENTE PROÍBIDA A VENDA DESTE MATERIAL. VOCÊ PODE CONSEGUÍ-LO GRATUITAMENTE EM WWW.JENNIFERPAYNE.COM.BR

Agradeço a Jose Berardo, dono da Especializa Treinamentos pelo incentivo para montar este material e o curso de joomla em recife. Agradeço também ao saurabh bhide por ter me permitido traduzir e misturar meu material ao dele. Por fim, agradeço a todos que ajudam a comunidade Joomla a se solidificar e que queira me

ajudar divulgando meu material, me indicando ou contratando para trabalhos.

Consultoria, treinamento, serviços em Joomla/Dolphin 7 e criação de layouts HTML/CSS à partir de seu layout em imagem ou layout inteiramente meu.

www.jenniferpayne.com.br http://jennifer-payne.blogspot.com

@JennyPayneDZN

2

CAPÍTULO 01 – GERENCIAMENTO DE CONTEÚDO ........................................................................................... 6

QUAIS AS NECESSIDADES DOS CLIENTES? ......................................................................................................... 6

Primeira Tela ..................................................................................................................................................................17 Segunda Tela ..................................................................................................................................................................17 Terceira e quarta telas .....................................................................................................................................................18 Quinta Tela .....................................................................................................................................................................20 Sexta tela ........................................................................................................................................................................20 Conteúdos .......................................................................................................................................................................23 Site .................................................................................................................................................................................25 GLOBAL CONFIGURATION ...............................................................................................................................................28 Site .................................................................................................................................................................................28 SITE SETTINGS ................................................................................................................................................................28 System ............................................................................................................................................................................29 USER SETTINGS ...............................................................................................................................................................30 MEDIA SETTINGS ............................................................................................................................................................30 SESSION SETTINGS ..........................................................................................................................................................30 Server .............................................................................................................................................................................30 REVISANDO O CAPÍTULO... ..............................................................................................................................................31

CAPÍTULO 02 – COMPONENTES, MÓDULOS E PLUG-INS ................................................................................32

Funcionalidades do Joomla .............................................................................................................................................33 TABELA COMPARATIVA ENTRE COMPONENTES, MÓDULOS E PLUGINS ..............................................................................33 Estruturando o site ..........................................................................................................................................................33 INSTALANDO EXTENSÕES ................................................................................................................................................36 ENTENDENDO COMPONENTES .........................................................................................................................................39

PASSO #1: ESCREVA O NOME DO SITE ................................................................................................................52

1. INICIAL .....................................................................................................................................................................55 2. COMO OS BABUÍNOS SE PARECEM ..........................................................................................................................55 3. VIDA SOCIAL DOS BABUÍNOS ...................................................................................................................................55 4. TIPOS DE BABUÍNOS................................................................................................................................................55

PASSO #3: CRIE LINKS DE MENU ..........................................................................................................................56

VISUALIZANDO NOSSOS LINKS NO FRONT-END................................................................................................................61



@JennyPayneDZN

3

1. TODA ESTA BAGUNÇA NO SITE DEVERÁ SER LIMPA, DE FORMA QUE APAREÇA APENAS COISAS RELACIONADAS AOS NOSSO BABUÍNOS NO SITE. ............................................................................................................................................61 2. QUANDO O SITE FOR VISITADO ATRAVÉS DE ‘LOCALHOST/JOOMLABETA’, A PÁGINA ‘HOME’ QUE CRIAMOS SERÁ MOSTRADA. ....................................................................................................................................................................62 3. TODOS OS OUTROS LINKS PARA O MENU DEVERÃO SER REMOVIDOS. ....................................................................62 VARRENDO PARA DEBAIXO DO TAPETE ..........................................................................................................................63 1. CONFIGURAR O NOME DO SITE ................................................................................................................................67 2. CRIAR AS PÁGINAS SEM CATEGORIAS (HOME, ABOUT US, ETC...) ..........................................................................67 3. CRIAR A SEÇÃO (DEPARTMENTS) ...........................................................................................................................67 4. CRIAR UMA CATEGORIA PARA CADA DEPARTAMENTO .............................................................................................67 5. ADICIONAR PÁGINAS/ITENS DE CONTEÚDO NESTAS CATEGORIAS ..........................................................................67 6. ADICIONAR LINKS PARA TODAS AS COISAS ACIMA NO MENU ...................................................................................67 7. ORGANIZANDO A PÁGINA .........................................................................................................................................67

PASSO #3: CRIAR UMA CATEGORIA PARA CADA DEPARTAMENT O ...........................................................69

PASSO #5: ADICIONAR PÁGINAS/ITENS DE CONTEÚDO NESTAS CATEGORIAS .......................................70

1. FACULTY: UMA PÁGINA SOBRE O CORPO DOCENTE DO DEPARTAMENTO ...............................................................71 2. FACILITIES: MOSTRA TODOS OS LABORATÓRIOS E MAQUINÁRIOS ..........................................................................71 3. PROJECTS: MOSTRA TODOS OS PROJETOS LEGAIS FEITOS POR ESTUDANTES NO DEPARTAMENTO. .....................71

STEP #6: ADICIONAR LINKS PARA TODAS AS COISAS ACIMA NO MENU ...................................................72

STEP #7: ORGANIZANDO A PÁGINA .....................................................................................................................74

• CLIQUE EM COMPONENTES -> ENQUETE .................................................................................................................79 • CLIQUE EM NOVO .....................................................................................................................................................79 • PREENCHA OS CAMPOS NECESSÁRIOS ....................................................................................................................79 • ATENÇÃO – ESSE CAMPO SEGUNDOS ENTRE VOTOS DEFINE O TEMPO NECESSÁRIO PARA VOTAR NOVAMENTE NA PESQUISA .......................................................................................................................................................................79 • SALVE .......................................................................................................................................................................79 • CLIQUE EM EXTENSÕES -> ADMINISTRAR MÓDULO .................................................................................................79 • CLIQUE EM “VOTAÇÃO” E EM SEGUIDA NO BOTÃO PRÓXIMO ....................................................................................79 • PREENCHA OS PARÂMETROS ...................................................................................................................................79 • SELECIONE A ENQUETE DESEJADA ..........................................................................................................................79 • SALVE .......................................................................................................................................................................79 • 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) ................................................................................79 • ANTES DE CRIAR OS LINKS, DEVEMOS CRIAR UMA CATEGORIA PARA ELES. .............................................................79 • CLIQUE EM COMPONENTES->WEBLINKS->CATEGORIAS, CRIE UMA CATEGORIA .....................................................80 • CLIQUE EM COMPONENTES->WEBLINKS->LINKS E CRIE UM NOVO LINK, PREENCHA OS CAMPOS E SALVE. ............80



@JennyPayneDZN

4

• CRIE VÁRIOS LINKS ...................................................................................................................................................80 • VÁ EM MENUS -> MAIN MENU ..................................................................................................................................80 • NOVO -> WEBLINKS -> LAYOUTS LISTA DE CATEGORIAS (ESSA OPÇÃO MOSTRA TODOS OS LINKS DE UMA CERTA CATEGORIA) ...................................................................................................................................................................80 • VÁ EM MENU->MAIN MENU ......................................................................................................................................80 • CRIE UM NOVO MENU E EM TIPO DE ITEM DE MENU, SELECIONE WRAPPER .............................................................80 • DIGITE A URL DESEJADA, (PROCURE O LOCAL NO GOOGLE MAPS) CONFIGURE OS PARÂMETROS ..........................80 • SALVE .......................................................................................................................................................................80 • CRIE UM NOVO ITEM DE MENU, DO TIPO “CONTATOS” ..............................................................................................80 • SELECIONE “LAYOUT DE CONTATO PADRÃO” ..........................................................................................................80 • DÊ UM NOME, SELECIONE O CONTATO NOS PARÂMETROS .......................................................................................80 • SALVE .......................................................................................................................................................................80

CAPÍTULO 04 – SEO, SEF E SEGURANÇA .............................................................................................................81

04.02 - QUE É SEO (SEARCH ENGINE OPTMIZATION) ......................................................................................84

04.03 – DICAS DE SEO ................................................................................................................................................85

04.04 OTIMIZANDO META DADOS .........................................................................................................................87

NA ÁREA ADMINISTRATIVA DO SITE, CLIQUE EM SITE -> GLOBAL CONFIGURATION. NA ABA SITE, HÁ UM GRUPO DE CAMPOS EM ”METADATA SETTINGS”. .............................................................................................................................87 • GLOBAL SITE META DESCRIPTION – UMA PEQUENA DESCRIÇÃO SOBRE O CONTEÚDO DO SEU SITE, DE MANEIRA GERAL, ESSA DESCRIÇÃO DEVE SER DE FÁCIL INTERPRETAÇÃO POR HUMANOS. ..........................................................87 • GLOBAL SITE META KEYWORDS – COLOQUE PALAVRAS CHAVES E FRASES RELEVANTES PARA SEU SITE, SEPARADOS POR VÍRGULA E GRUPOS DE FRASES ENTRE ASPAS SIMPLES. ...................................................................87 • SHOW TITLE META TAG – MOSTRA A META TAG TÍTULO AO VER ARTIGOS. .............................................................87 • SHOW AUTHOR META TAG – MOSTRA A META TAG AUTOR AO MOSTRAR ARTIGOS. ................................................87

04.05 IMPLEMENTANDO SEO EM JOOMLA .........................................................................................................88

CAPÍTULO 05 - LAYOUTS E TEMPLATES ............................................................................................................99

• INSTALE O TEMPLATE COM COLUNAS E O TEMPLATE SEM COLUNAS ...................................................................... 124 • VÁ ATÉ EXTENSIONS -> TEMPLATE MANAGER (EXTENSÕES -> ADMINISTRAR LAYOUT) ....................................... 124 • TORNE O TEMPLATE QUE SERÁ UTILIZADO PELA MAIORIA DOS MENUS COMO PADRÃO .......................................... 124 • EM SEGUIDA, SELECIONE NO RADIO BUTTON O TEMPLATE SEM AS COLUNAS E CLIQUE NO BOTÃO EDITAR DO LADO SUPERIOR DIREITO ....................................................................................................................................................... 124 • DO LADO ESQUERDO, SELECIONE O RADIO BUTTON “SELECT FROM LIST” E UTILIZANDO O SHIFT OU CTRL SELECIONE QUAIS LINKS DO MENU ESTE TEMPLATE SERÁ VINCULADO ........................................................................ 124



@JennyPayneDZN

5

• SALVE ..................................................................................................................................................................... 125 • SEU TEMPLATE SEM COLUNAS AGORA TEM UM SINAL VERDE NA LINHA “ASSIGNED” QUE MOSTRA QUE ELE NÃO É PADRÃO, PORÉM É UTILIZADO POR ALGUNS MENUS DO SITE. ...................................................................................... 125

CAPÍTULO 06 ............................................................................................................................................................ 127

ENVIANDO SEU SITE PARA UM SERVIDOR ....................................................................................................................... 127 FAZENDO BACKUP NO JOOMLA!AGORA QUE SEU SITE JÁ TEM SEU NOVO VISUAL, CONTEÚDOS ESCRITOS E EXTENSÕES

INSTALADAS, JÁ É SEF E ESTÁ TUDO FUNCIONANDO PERFEITAMENTE, ESTÁ NA HORA DE COLOCAR SEU PROJETO NO AR! ..................................................................................................................................................................................... 127 AGORA QUE SEU SITE JÁ TEM SEU NOVO VISUAL, CONTEÚDOS ESCRITOS E EXTENSÕES INSTALADAS, JÁ É SEF E ESTÁ TUDO

FUNCIONANDO PERFEITAMENTE, ESTÁ NA HORA DE COLOCAR SEU PROJETO NO AR! ...................................................... 128 ENVIANDO SEU SITE PARA UM SERVIDOR ....................................................................................................................... 128 Conhecendo FTP .......................................................................................................................................................... 130



@JennyPayneDZN

6

Capítulo 01 – Gerenciamento de Conteúdo Esta primeira parte é uma das poucas partes teóricas desta apostila, que vai ajudar a entender o porque de utilizar o Joomla e quando, além de informações vitais sobre este CMS. Não Sabe o que é CMS? Ta na hora de começar a leitura!

O que é CMS?

CMS ou Content Management System, é um programa desenvolvido para uma fácil gestão de conteúdo, ou seja, para a criação, edição e manipulação de conteúdo (dados).

Identificando a necessidade do uso de um CMS

A primeira coisa a ser feita, agora que você sabe o que é um CMS e suas variações é identificar quando você deverá usar um CMS. Primeiramente, como os CMS são feitos para atender às necessidades comuns dos gestores de conteúdo, ele é construído pensando nas necessidades da maioria.

Se você pensa em adotar algum CMS para seu projeto, é importante saber se seu projeto tem alguma particularidade mais complexa ou se é um projeto que se utiliza apenas de necessidades gerais. Após essa identificação, é necessário pesquisar qual CMS se adaptaria melhor ao seu projeto e porquê.

Quais as necessidades dos clientes? Há alguns pontos que você deve levar em consideração antes de definir se você utilizará um CMS ou não.

• Quais são as reais necessidades dos clientes? o Ele vai precisar de interatividade no site dele? o Por que ele precisará dessas interatividades? o Que nível de interatividade? o Quem vai fazer as manutenções do site dele?

• Qual a complexidade do projeto? o As funcionalidades do meu CMS atendem às expectativas? o Terá que desenvolver funcionalidades próprias? o Adaptar alguma funcionalidade o Será necessário o desenvolvimento de um layout ou pode ser utilizado um pronto?

• Qual o prazo e orçamento do projeto? o Qual a data de entrega? o Qual o orçamento máximo que aquele projeto tem? o Quais as variáveis de custos?



@JennyPayneDZN

7

O Joomla é uma ferramenta bastante completa e poderosa, pode ser utilizada na maior parte dos casos e economiza em torno de 70% dos custos e tempo (considerando os custos de criar um layout e desenvolver um sistema inteiro do zero)

O que é o Joomla! ?

O Joomla! é um WCMS (Web Content Management System), sua manipulação de conteúdo é focado para web e intranets. Para fins didáticos, às vezes trato o Joomla! por Joomla ou ainda J!, que são formas comuns de se encontrar na internet.

O Joomla! é o WCMS mais popular do mundo e foi criado em 1 de setembro de 2005 quando a equipe de um dos mais populares CMS do mundo o Mambo, entrou em discordância e resolveram se separar. Uma parte desta equipe fundou o Joomla! que recebeu o fundamento do Mambo e à partir disso começaram a desenvolver um projeto sólido e que hoje em dia, estima-se que há mais de 5.000.000 de instalações em servidores públicos. Mais de 45.000 desenvolvedores registrados trabalhando em mais de 1.100 novos projetos pra extender o Joomla!. Há mais de 50.000 usuários no fórum do www.joomla.org. O Joomla! ganhou dois prêmios em 2005 de melhor projeto Open Source e outro para um de seus membros mais ativos pelo seu apoio aos projetos Open Source, hoje em dia o Joomla! é considerado um dos 50 mais importantes projetos Open-Source do mundo. O Joomla! já utiliza a tabela de caracteres UTF-8.

A Estrutura do Joomla!

O Joomla funciona da seguinte forma:

A pessoa responsável pelo site, altera as configurações do Joomla, digita textos e etc. Essas informações são passadas para o mySQL que as salva e quando um usuário acessa o site, o mySQL retorna essas informações para o php que processa e devolve para o usuário como foi planejado pelo responsável pelo site.

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.

Referência de páginas em Joomla!

www.joomla.org

www.porsche.com.br



@JennyPayneDZN

8

http://dsic.planalto.gov.br/

www.cnt.com.br

http://portal.mec.gov.br/

http://www.fortaleza.ce.gov.br/

http://www.tiangua.ce.gov.br

http://www.mitsubishi-motors.com.ve/cms/index.php

http://www.leyendasdetoledo.com/

www.danone.com

http://www.asassaomiguel.com

À partir de agora, veremos o máximo possível de prática, deixando a teoria para onde for estritamente necessário. Vamos ver o que é necessário para instalar o Joomla e como fazê-lo.

Suportes do Joomla!

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 e 5.x.

Ambiente LAMP (Linux, Apache, Mysql, PHP)

O Joomla! foi desenvolvido principalmente para a plataforma Linux, que usa uma estrutura completamente Open-Source e freeware, mas é comum vê-lo na plataforma Windows, através da instalação de programas que simulem o ambiente Apache, juntamente com o banco de Dados MySql e PHP. A sua instalação tanto em ambiente windows como em ambiente Linux pode ser executada da seguinte forma:

Instalando o XAMPP

http://www.apachefriends.org/en/xampp.html

Para instalar, existem duas formas:



@JennyPayneDZN

9

1. Você faz o download da versão compactada do XAMPP e simplesmente o descompacta na pasta de sua escolha

2. Você faz o download do instalador e procede da seguinte forma

Após escolher a linguagem, clique next

Escolha o local onde o xampp será instalado (aconselho fortemente a salvar em C: ou o equivalente disto na sua máquina)



@JennyPayneDZN

10

Determine como a instalação deverá proceder (faça como abaixo)

Agora que você já instalou o XAMPP corretamente, dê dois cliques no arquivo:

xampp-control.exe



@JennyPayneDZN

11



@JennyPayneDZN

12

Digite localhost/phpmyadmin no seu navegador

Crie o banco de dados



@JennyPayneDZN

13

2. Adicione um novo usuário



@JennyPayneDZN

14

Vá para PhpMyAdmin e na página inicial, clique em “Privilégios”. Então clique em “Adicionar novo usuário”, e preencha o formulário para criar um usuário. Preencha os campos como descrito na imagem acima e garanta todos os privilégios para este usuário, marcando o botão “Marcar tudo”. Criei um usuário chamado “joomla_user” com password “J!12345”

Instalando o Joomla! 1.5

Faça o download em http://www.joomla.org/download.html



@JennyPayneDZN

15



@JennyPayneDZN

16

Descompacte o arquivo na pasta XAMPP/htdocs/sua_pas ta



@JennyPayneDZN

17

Primeira Tela

A primeira tela você escolhe a linguagem de instalação do 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” (geralmente acontece com usuários Linux)

Segunda Tela

Mostra as preferências para uma melhor instalação do Joomla, principalmente para usuários Linux, às vezes acontece da opção configuration.php editável marcar “não”, quando isso acontece, significa que o Joomla não foi capaz de criar um arquivo php necessário, devido à permissões do seu computador. Ensino como criá-lo mais adiante.



@JennyPayneDZN

18

Terceira e quarta telas

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.



@JennyPayneDZN

19

Use as seguintes configurações:

Database Type : mysql

Host Name : localhost

Nome de usuário : joomla_user (se você utilizou um nome diferente no MySQL, especifique aqui)

senha : J!12345 (ou a que você especificou para aquele usuário)

Database Name : aula_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

Recomendaçõ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 FTP 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.



@JennyPayneDZN

20

Quinta Tela Esta camada de ftp deve ser habilitada quando seu servidor estiver configurado com safe_mode on, que não é recomendado pela equipe de segurança do joomla. então dê preferência à servidores apache com o safe_mode off e deixe a tela como está.

Sexta tela

Nome do site: Título do site (tag title) Seu e-mail: e-mail de administração (e-mail do webmaster do site) Senha do admin: Senha do usuário padrão do joomla, admin, através dele é possível fazer todas as configurações do seu site, inclusive adicionar novos usuários, por questão de segurança você será instruído a deletar este usuário no capítulo 03. Preste muita atenção ao digitar esta senha. Instalar exemplo de conteúdo: vem com diversas funcionalidades e conteúdo padrão instalado. Eu aconselho a você não utilizar esta funcionalidade para este primeiro projeto, mas que crie uma nova



@JennyPayneDZN

21

instalação para explorar como o Joomla funciona, caso deseje fazer isso, volte ao passo de instalação do Joomla e crie um novo projeto (com outro banco de dados e todo o resto) e nesta 6ª etapa, instale o exemplo de conteúdo, quando isso acontecer uma mensagem de instalação aparecerá no lugar do botão. Clique em Próximo e você acaba de instalar 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.

Criando o arquivo “configuration.php”

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.

A Estrutura do Joomla!

O Joomla funciona da seguinte forma:

A pessoa responsável pelo site, altera as configurações do Joomla, digita textos e etc. Essas informações são passadas para o mySQL que as salva e quando um usuário acessa o site, o mySQL retorna essas informações para o php que processa e devolve para o usuário como foi planejado pelo responsável pelo site.

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, áreas restritas aos usuários registrados e criação de novos conteúdos, instalação de novas funcionalidades. o Back-End fica numa URL diferente do site.

Direitos de acesso

Usuários registrados, autores, editores, super-administradores e visitantes sem registro verão o site de forma diferente, assim como as responsabilidades variam de acordo com o nível de acesso de cada um.



@JennyPayneDZN

22

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. Autor Ele faz tudo que o registrado faz e pode

escrever informações além de alterar sua informação. Geralmente há um link no menu de usuário para tal

Editor Faz tudo que um autor faz e ainda pode escrever e mudar qualquer informação do front-end

Publicador Faz tudo que um editor faz e ainda decide o tempo de vida de alguma informação do site. Pode publicar e despublicar o que quiser

Grup os de Usuários com acesso ao Back -End do Joomla! Grupo Direitos de Acesso Gerente Pode criar conteúdo e ver várias

informações sobre o sistema. 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

Administrador O administrador não pode fazer:

• Modificar um usuário para super administrador ou modificar um trabalho de um super



@JennyPayneDZN

23

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 Administrador Pode executar TODAS as funções do Joomla! Apenas ele pode criar um super administrador ou modificar um usuário para Super Administrador.

Grupo Direitos de Acesso

Conteúdos Os conteúdos são dados que serão exibidos para os usuários e sua forma mais simples é texto. Pode ser uma música, vídeo, imagem, links, enfim, entre uma infinidade de possibilidades, os textos podem ser organizados em categorias. Com a disseminação de blogs e sites de notícias, a forma mais popular é o Newsfeed. A integração e administração de conteúdos como um Newsfeed têm sido cada vez mais importantes.

Extensões

Componentes, Módulos, templates e plug-ins são referências de extensões de Joomla! Tudo ao alcance de poucos cliques. Componentes: 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. Templates: É 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. Módulo: É 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. Plug-ins: Em sua maior parte, responsável pela camada de comunicação entre o usuário e o Joomla, um exemplo básico de plugin é o tinyMCE, editor de textos do tipo wysiwyg (what you see is what you get) ou você tem aquilo que vê. Quando você digita algum texto através do tinyMCE ele processa essas informações em formato HTML por debaixo dos panos e salva no BD, quando o usuário vai ver este texto no front-end, ele verá exatamente da forma que foi escrito no tinyMCE. Existem diversas extensões pré-instaladas no Joomla, a cobriremos no próximo capítulo.

À partir de agora, você criará o seu primeiro projeto em Joomla e nele você verá os detalhes dos passos mais importantes na criação de um projeto. Há uma apresentação em formato de tutorial meu no site abaixo.



@JennyPayneDZN

24

http://www.slideshare.net/JenniferPayne/aprenda-joomla-15-fcil

Este material me inspirou a criar este livro e que é uma mistura dos meus estudos em Joomla com os estudos do jovem indiano Saurabh R. Bhide em seu site www.lagoona.in você encontra a sua obra original para download gratuito, em formato pdf, em inglês.

Gerenciando um site em Joomla

Quando você instala o Joomla na sua máquina, você pode gerar um site através dela e você pode modificá-lo através do seu domínio/nome_do_site, se você instalou o xampp, no seu navegador, você deve digitar http://localhost/pasta_que_criou_em_htdocs_do_xampp , se você utiliza outras ferramentas para simular o LAMP, você deve acessa-lo de acordo com o que é instruído nesta ferramenta/pasta, como por exemplo: http://127.0.0.1/livro .

Para administrar seu novo projeto, tudo que você tem a fazer é digitar no seu navegador http://localhost/seu_site/administrator. Uma área de login aparecerá e você deve digitar no campo login: admin e senha: (a que você deu na sexta tela da instalação do Joomla)

OBS: Tire um tempo para imaginar qual o tipo de pro jeto que você quer fazer, a idéia é que o site criado por você utilizando este livro, esteja pront o para ir para internet, veremos como fazê-lo no último capítulo.

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



@JennyPayneDZN

25

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

Site

Control Panel (Painel de Controle)

A página inicial do seu back-end (área administrativa).

User Manager (Gerenciamento de Usuários)



@JennyPayneDZN

26

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. Clique em site � User Manager

Observe que existe no lado direito um conjunto de botões que mostram as possibildades a ser feitas dependendo da área que você está, estes botões são auto-explicativos, vamos criar um novo usuário clicando em New (Novo)

Name: Nome do Usuário Username: Nome de login (sem espaço ou caracteres especiais)

E-mail: e-mail do usuário New Password: senha



@JennyPayneDZN

27

Verify Password: confirmação da senha Group: Nível de acesso do usuário de acordo como foi mostrado anteriormente

Block user: Permite bloquear usuário Receive System E-mail: O usuário vai receber e-mail do sistema?

Back End Language: Linguagem do backend (você pode passar o seu Joomla para português) Front End Language: : Linguagem do frontend (você pode passar o seu Joomla para português)

Media Manager (gerenciador de Mídia)

Você pode enviar arquivos para o site, como imagens jpg, gif, png, swf e outros. É bastante útil caso você não possa utilizar um programa FTP, como tudo no Joomla, é bem intuitivo. Na área Detail View (Visualizar Detalhes)

No lado esquerdo, você tem a área folders, que mostra a éstrutura de diretórios da pasta images. No lado direito, você pode digitar um nome de uma nova pasta e clicar em Create Folder (criar pasta) para criá-la, não utilize espaços ou caracteres especiais. Logo acima, o botão delete, você pode selecionar, através de checkboxes várias imagens e excluí-las no botão delete. Na área Upload File, escolha o arquivo e clique em Start Upload. Note que o padrão do Joomla é tamanho máximo de 10mb por arquivo, você verá como aumentar esse limite através das configurações globais, ficando limitado ao tamanho padrão do php (32mb por padrão), que você pode aumentar, mas para enviar arquivos tão grandes, utilize um programa FTP, conforme ensinado no capítulo 06



@JennyPayneDZN

28

Agora, tire um tempinho para criar uma pasta e enviar arquivos para elas utilizando o Media Manager.

Global Configuration

As configurações gerais do seu site ficam aqui. Ex: Tempo de cache, quais tipos de arquivos estão liberados para ser tratados pelo Media Manager e outras variáveis.

Site

Site Settings

Site offline e Offline Message – Caso esteja marcado em “yes”, o site entrará em modo de manutenção e a mensagem que será mostrada ao usuário será o que está escrito em “Offline Message”. Marque em “yes”, digite uma mensagem qualquer e salve. No lado superior do seu backend há um link chamado “preview”, clique nele e veja que a mensagem aparece e seu site não está mais no ar. Acesse novamente o backend através dos campos de login que aparecem antes da mensagem de site em manutenção e volte para Global Configuration, marque site offline, “no” e clique em “apply”. Esta opção é muito útil caso você tenha que fazer alguma alteração de emergência no site e não quer que os usuários tenham acesso às informações contidas nele atualmente. Como você pode logar no backend ainda, você pode continuar trabalhando normalmente no seu site.



@JennyPayneDZN

29

Site Name – O título do site, o título padrão entre a tag <title></title> de um HTML comum, quando outro título não for definido para o site. Para quem desconhece esta tag, sabe quando você entra em um site e lá em cima do navegador e no botão do site na barra de tarefas fica um nomezinho, geralmente “Site de fulano de tal” ou “untitled-1” quando o webmaster gera o site utilizando alguma ferramenta e esquece de alterar... é isso. Este título é de fundamental importância e você o conhecerá melhor no capítulo 02. Você configurou o site name que está vendo agora, na última etapa da instalação do Joomla, lembra? Modifique-o à vontade. Metadata Settings e SEO Settings São informações passadas para robôs de busca e descrição do seu site que não aparecem para o usuário normalmente, você verá mais informações sobre elas no capítulo 03.

System

Nesta área, as configurações importantes a conhecer, são:



@JennyPayneDZN

30

User Settings

Allow User Registration – No módulo login, que veremos adiante, por padrão, há um local para que o próprio visitante se cadastre no seu site, caso você deseje desabilitado clique “no”, caso mantenha em “yes”, você pode escolher o grupo de acesso padrão ao qual ele pertence, em “New User Registration Type”assim que se cadastre, o recomendado é deixar em “registered”, mas você poderia deixar em “author”, caso desejasse fazer do seu site uma espécie de Wikipédia, com conteúdo participativo. Lembrando que neste caso, o usuário enviaria o texto, mas ainda precisaria de um publicador para moderar e aprovar o texto. Legal, não? New User Account Activation – Ao registrar-se um e-mail é enviado ao usuário com o link para ativação. É sempre bom manter ativado para evitar que o usuário passe um e-mail inválido. Front-End User Parameters – Permite que o usuário configure configurações como: Editor de texto, linguagem do site e outras coisas.

Media Settings

Legal Extensions – Extensões permitidas de ser manipuladas pelo Media Manager. O resto dos parâmetros é bem auto-explicativo e geralmente não é modificado.

Session Settings

Session Lifetime – Duração em que o administrador pode permanecer logado em inatividade. Eu sempre aumento este valor para trabalhar com o site sem ter que ficar relogando quando paro para fazer outras coisas, mas lembre-se de voltar para 15 minutos antes de colocar no ar.

Dica: Sempre que modificar alguma configuração no Joomla, clicar em “Aplly” salva a configuração e permanece na mesma página, enquanto “Save”, salva e te leva para outra página, então, na medida que for alterando, clique em Apply e quando fizer a última modificação naquela área, clique em save.

Server Esta área é para usuários um pouco mais avançados, pois lida com as configurações do seu site no servidor. Você pode lê-las com atenção, mas só modifique caso você realmente precise e saiba o que está fazendo.

Falando Nisso...

Agora que você já sabe as configurações em inglês, que tal traduzir o Joomla para português? Mas é o seguinte, após realizar estas modificações, eu recomendo que você só utilize em português para fins de estudo, descobrir as funções não explicadas neste livro, caso você não tenha noção de inglês. Como a maioria das extensões para Joomla são em inglês, o ideal é que você se habitue a utilizar o backend em inglês. Você poderá instalar o idioma português no próximo capítulo.



@JennyPayneDZN

31

Revisando o capítulo...

Até agora, você viu quando utilizar o Joomla, como instalá-lo, como criar novos usuários e como enviar imagens através do Media Manager, além das configurações principais da área administrativa dele.



@JennyPayneDZN

32

Capítulo 02 – Componentes, Módulos e Plug-ins Neste Capítulo você vai aprender sobre extensões, as principais diferenças entre elas, vai começar a gerar conteúdo para seu projeto e instalar algumas extensões além de liberar as extensões padrão do joomla, de acordo com as necessidades do seu projeto. Funcionalidades do Joomla Tabela comparativa entre componentes, módulos e plug-ins Estruturando o site

• Planejando quais extensões utilizar em nosso site. • Instalando novas Extensões

Implementando as extensões padrão do Joomla Entendendo Componentes Quais os componentes padrão do Joomla O que eles fazem Componentes de terceiros



@JennyPayneDZN

33

Funcionalidades do Joomla

Estas funcionalidades são as chamadas extensões do Joomla e como você viu no capítulo anterior, há 04 tipos de extensões: Componentes, Templates, Módulos e Plugins. Fora o template, que nada mais é do que o layout, a “carinha” do site, as outras extensões são as realmente agregadoras de funcionalidades e requer um pouco de atenção sua sobre suas diferenças. Abaixo, uma tabela comparativa entre elas.

Tabela comparativa entre componentes, módulos e plugins

Componentes Módulos Plugins

Geralmente necessita de área administrativa, e só pode ter um por vez na área principal do seu site. Ex: Artigos, formulário de contato, fórum, e-commerce

São códigos mais simples onde podem (ou não) ser passados parâmetros de configuração no backend. Podem existir vários na mesma página e muitas vezes são usadas como apoio para os componentes. Ex: Enquete, últimas notícias, HTML personalizado

O canal de comunicação entre o usuário e o Joomla, você pode adicionar funcionalidades exclusivas disparadas por evento, no backend e muitas vezes dentro de artigos e conteúdos. Pode ou não ter parâmetros associados a eles. Ex. TinyMCE, Plugin GoogleMaps

Estruturando o site A instalação de novas extensões vêm da necessidade de possuí-las e para tal, é necessário saber aonde e quais utilizar. Para entender esta necessidade, recomendo fortemente que você pegue um lápis, papel, borracha e comece a preparar a estrutura do seu site. Como exemplo para o livro, vou imaginar um portfólio online para meus trabalhos. Primeira Etapa, descrever o básico do site Nesta etapa, você irá dividir as informações que são necessárias ao seu site em links no menu.

1. Sobre Mim– Texto resumo sobre minha vida profissional (minha página inicial) 2. Sites e Portfólios – Texto resumo sobre este tipo de trabalho



@JennyPayneDZN

34

a. Sites – Detalhamento sobre este tipo de serviço e abaixo, miniatura de alguns destes trabalhos, ao clicar a imagem fica maior

b. Portfólios - Detalhamento sobre este tipo de serviço e abaixo, miniatura de alguns destes trabalhos, ao clicar a imagem fica maior

3. Projetos Gráficos – Texto resumo sobre este tipo de trabalho a. Impressos – Detalhamento sobre este tipo de serviço e abaixo, miniatura de alguns destes

trabalhos, ao clicar a imagem fica maior b. Identidades Visuais - Detalhamento sobre este tipo de serviço e abaixo, miniatura de alguns

destes trabalhos, ao clicar a imagem fica maior 4. Modelagem 3D - Detalhamento sobre este tipo de serviço e abaixo, miniatura de alguns destes

trabalhos, ao clicar a imagem fica maior 5. Currículo – Meu currículo, com algumas informações e link para Download dele. 6. Contato – Formulário de contato, mostrando algumas informações minhas.

Apenas com essa descrição básica, descobri que além de textos, terei uma galeria de imagens em quase todos os links do meu site. Segunda Etapa, adicionando funcionalidades ao site Além do que você viu anteriormente, eu dou aulas, participo ativamente de alguns grupos de Joomla e mantenho um blog. Não seria interessante se os meus usuários fossem capaz de ler as atualizações do meu blog no meu próprio site? Agora que escrevi um livro, não seria legal se você pudesse acompanhar algumas das novidades sobre ele, como erratas, por exemplo? E se você pudesse escolher entre uma gama de assuntos o meu próximo livro ou qual novo artigo publicaria no meu blog? Isto tudo é possível com o Joomla e são formentados através das Extensões. Então, eu vou adicionar um link chamado Blog, que será alimentado com as atualizações do meu blog e também um chamado Novidades, onde eu escrevo coisas relacionadas à minha vida profissional que considero relevante. Para facilitar o entendimento visual, vou criar o que é chamado de wireframe, que nada mais é do que um rascunho visual da estrutura do meu site, eu, Jennifer, sempre faço esta segunda etapa em um papel primeiro. Primeira Página Geralmente a primeira página do seu site é diferente das demais, porque nela você mostra certos trechos do conteúdo do site, para que o visitante saiba o que o aguarda no site no momento que ele entra. Você sabia que a decisão tomada pelo usuário de navegar no seu site é decidida entre 0 e 30s? pois é, por isso, decidi mostrar a minha primeira página da seguinte forma:



@JennyPayneDZN

35

Páginas Internas Se o usuário clicou em algum dos links do seu menu é porque ele descobriu que algo no seu site o interessa, neste intervalo de 30s! Sinta-se honrado! Nas páginas internas é hora de dar a ele o que você prometeu na página principal! Como meu o menu do meu site é muito parecido internamente eu criei apenas uma página interna, você deve descrever quantas sejam necessárias.



@JennyPayneDZN

36

As páginas que não tiverem galerias, serão apenas o conteúdo, simples e objetivo. Pronto! Agora que você definiu a estrutura do seu site, eu digo site, porque é menor de digitar, mas quando eu digo site, me referindo ao projeto criado pelo Joomla, me refiro a sistemas online. O Joomla, mesmo sem extensões, é capaz de criar áreas administrativas e muitas coisas que fazem que este conceito de site, sabe aquele? Simples, somente com conteúdos estáticos, sem graça, um fale conosco safado, apenas com o endereço telefone e e-mail ir para o lixo! Nos dias de hoje, nenhum cliente seu quer menos do que uma área de notícias, formulário de contato e galeria de imagens, não é verdade? Embora ele só está disponível a pagar o preço de um site básico. O Joomla é mais do que perfeito para estes casos!

Instalando Extensões

Instalar extensões é um processo muito simples e para começar, vamos instalar agora uma extensão que te interessa bastante, que é como transformar o Joomla em português. Gostou, né? Vamos lá!



@JennyPayneDZN

37

Tornando o Joomla! em português

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



@JennyPayneDZN

38

utilização do Joomla! em nada será prejudicada com isso, desde que eu escreverei os caminhos nas duas línguas.

Às vezes você corre o risco de se perder na área administrativa do Joomla, quando isto acontecer, logo abaixo o menu, um título aparece dizendo em que área do site você está, no nosso caso, Extension Manager. Note que você está na aba Install, é através desta área que você pode instalar as extensões no Joomla. Nas abas ao lado, há a lista das extensões instaladas, separadas por categoria de extensões, dê uma navegada por elas, você vai notar que algumas delas estão desativadas, em cor cinza, bem, está extensões são fundamentais para o funcionamento do Joomla e por isso não podem ser desinstaladas, o resto, você pode desinstalar, selecionando a extensão e clicando em uninstall no lado direito da tela. Há 3 formas de instalar componentes, eu utilizo duas delas... uma é a que você utilizou acima utilizando o Package File, outra forma bem legal é utilizando a opção install from URL, você vai colocar o link de download do arquivo e o Joomla instala para você. Possíveis Problemas Às vezes ocorre de você tentar instalar uma extensão e o Joomla dar uma mensagem de erro em vermelho, geralmente são dois erros



@JennyPayneDZN

39

1. XML not found – O Joomla procura em um nível de zip e a extensão está compactada dentro do zip. A solução é que você descompacte o arquivo e tente instalar novamente para o zip correto

2. Failed to move file – Você não tem permissões para alterar os arquivos. Dê estas permissões (pode acontecer no seu servidor web, neste caso, utilize um programa FTP para fazê-lo ou peça ao suporte do seu servidor), caso você esteja trabalhando no Linux, por segurança dele, isto VAI acontecer, neste caso, clique com o botão direito, Propriedades -> Permissões e aplique as configurações de leitura-escrita de arquivos na pasta raiz do seu site.

Entendendo Componentes

É uma aplicação no Joomla que é mostrado na parte principal (de conteúdo) do site. Pode ser uma área de download, galeria, fórum, não importa. O que você deve entender, é que só pode haver um componente por vez na área principal do seu site, embora, muitos componentes são parte mostrados em módulos, para poder utilizar sua funcionalidade completa.

Quais os componentes padrão do Joomla

Banners (publicidade)

Contacts (contatos)

Newsfeeds

Polls (enquetes, votação)

Search (pesquisa)

Weblinks

Massmail (e-mail em massa)

O que eles fazem

Banners – Adicionar banners publicitários rotativos no seu site, você cria os clientes, categorias e banners, define quantos cliques limite aquele banner possui, adiciona código personalizado para ele, e tamanho, link de redirecionamento, entre outras coisas. (Utilizado em conjunto com módulo).

Criando seus banners



@JennyPayneDZN

40

Para adicionar novos banners vá até a pasta onde está seu site e abra o diretório images/banners, coloque as imagens que serão seus banners lá dentro. Logue na área administrativa do seu site e clique em Components (componentes) Banners Categorias. Clique em New (Novo). Como todas as categorias criadas no Joomla, você deve dar um título, um alias (apelido opcional - se deixar em branco o joomla cria um alias pra você - que será usado para tornar as url’s amigáveis, ver no capítulo 03) descrição e demais campos também são opcionais.

Agora clique em Banners � Clients (Clientes) New (novo). Preencha na ordem dos campos o nome do cliente, nome do contato, email do contato e opcionalmente informações extras sobre o cliente como telefone, o acordo feito, etc. Ex: Soft.Zone, Jennifer Payne, [email protected] Finalmente, clique em Banners � banners. Vou descrever as características mais utilizadas: Nome – Dê um nome para o banner. Categoria – Categoria onde o banner se enquadra. Cliente – Cliente responsável pelo banner Exibições Contratadas – Você pode tanto colocar um número máximo de cliques que o banner pode receber como marcar a caixinha de ilimitado, caso queria que não tenha limite de cliques para exibir. Url de destino – define para que página o banner leva Seletor de imagem do banner – Escolha a imagem que representa o banner Largura, Altura – Tamanho da imagem (deixe em branco para pegar o tamanho padrão da imagem)

OBS: Banners é um dos componentes padrão que tem como complemento um módulo. Você cria categorias, clientes e os próprios banners e escolhe quais categorias serão exibidas e onde através do módulo banners.

Contacts – Você pode criar categorias de contatos para seu site (Ex: Vendas,SAC, diretoria) e vincular contatos a essas categorias. Você pode dispor de diversas informações sobre estes contatos (Ex: Telefone, endereço, país) e depois, criar links de menu no seu site que mostra um único contato ou uma categoria deles. Os parâmetros que irão aparecer sobre este contato são de sua escolha, porém o formulário de e-mail que as pessoas irão preencher é padrão. Ele exibe os seguintes campos de preenchimento do visitante: Nome, e-mail, assunto, mensagem e se o usuário quer enviar um cópia de e-mail para si (muito útil) Crie uma categoria em Contatos � Categorias. Crie um contato em Contatos � Contatos. Este componente tem os campos bem auto explicativos. O que as pessoas confundem é que estes campos (Ex: telefone, endereço, código postal) não são os campos que você deseja ter num formulário de contato. Estes são os campos com os dados pessoais de alguém, por exemplo, um funcionário da empresa. É muito comum criar apenas um contato, chamá-lo de “Fale Conosco” e colocar nos campos os dados da empresa dona do site. Você escolhe quais campos exibir no lado direito e ainda se o formato descritivo do campo aparecerá com ícones, textos ou nenhum dos dois. Podemos escolher ainda se o contato está vinculado a algum usuário do site (ele envia os dados do formulário para o e-mail deste usuário), caso não, o formulário será enviado ao e-mail digitado no



@JennyPayneDZN

41

campo e-mail. Quando estivermos explorando os menus, poderemos criar um link para o formulário de contato.

Newsfeeds – Você pode exibir notícias em seu site, criados por terceiros, que compatilham estas notícias utilizando feeds. (Utilizado em conjunto com módulo)

Polls – Crie uma enquete básica, onde o usuário vota em algo e pode visualizar os resultados prévios desta votação, você pode regular quantos segundos são necessários antes daquele IP poder votar novamente (ajuda a prevenir spam), no entanto, este componente é muito básico e será excluído na versão 1.6 do Joomla. (Utilizado em conjunto com módulo)

Search – Permite aos usuários fazer pesquisas de artigos do seu site (Utilizado em Conjunto com módulo)

Web Links – Todas as páginas em Joomla pode(m) conter links para outras páginas, no entanto, esta funcionalidade permite que você organize os links por categorias, ter descrição dos links, saber quantos cliques foram dados em cada um deles e você ainda pode criar um item de menu onde os usuários do site podem enviar links para seu site!

ATENÇÃO: Apenas usuários com acesso acima de autor (author) podem publicar links, então, cuidado a quem você concede este direito. E apesar de que se envie o link, apenas os níveis acima de publicador podem permitir que o conteúdo vá ao ar.

Massmail – E-mail em massa permite que você mande e-mails aos usuários registrados. Suas funcionalidades são limitadas, comparados com os criados por terceiros e é útil apenas para mandar e-mails rápidos para certos grupos de usuários (Ex: Administrator)

Componentes criados por terceiros

Estes componentes padrões do Joomla são muito bons, mas pode não ser suficiente para suas necessidades. Por isso, o Joomla apresenta esta característica onde você pode criar coisas para o Joomla de acordo com suas necessidades ou utilizar funcionalidades criadas por outras pessoas. Estas funcionalidades são chamadas de extensões. Existem mais de 2.000 extensões criadas para Joomla e cada uma tem suas particularidades.

Entre os milhares existentes, existem os mais popul ares como:

Jcal Pro – calendários JoomFish – adicionar várias linguagens ao site, como inglês, espanhol) você escreve o mesmo texto em várias linguagens e lista qual artigo aparece em certa linguagem VirtueMart – e-commerce



@JennyPayneDZN

42

Community Builder – Uma espécie de orkut para Joomla. sh404SEF – Ajuda o Joomla a criar URL’s amigáveis. Utilizaremos ele para aumentar o SEO (Search Engine Optmization) JoomlaXplorer – Gerenciador de FTP para Joomla. Eu, particularmente prefiro utilizar o Filezilla na minha máquina, para todos os meus sites. Xmap – Ajuda a criar mapas de site para o seu sistema em Joomla Docman – Ajuda a gerar e gerenciar áreas de download no seu site. ChronoForms – Crie formulários personalizados utilizando esta extensão. AllVideos – Exibe vídeos hospedados em outras páginas (Ex: Youtube) de maneira fácil. Ozio Image Gallery – Galeria em Flash com vários tipos de apresentação (3d, carousel e outros) Exposè Flash Gallery – Galeria em Flash também muito bonita



@JennyPayneDZN

43

Módulos

Módulos podem ser pensados da seguinte forma:

• Extensor de funcionalidades para certos componentes; • Como mini-aplicativos no seu site, mais leves do que os componentes, não têm área

administrativa, porém podem ser configurados através de parâmetros • Você pode ter diversos módulos no seu site, enquanto você só pode ter um componente por

vez

Você pode pensar nos módulos como widgets* no seu site.

Configurações de módulos

Todos os módulos tem opções comuns para como o conteúdo será apresentado

No lado esquerdo há os detalhes dos módulos:

• Título • Publicado/despublicado • Posições (você pode escolher uma entre as disponíveis no template) • A ordem entre os módulos disponíveis naquela posição • Nível de acesso

Sobre o nível de acesso, utilizando essa ferramenta corretamente, é possível criar sites completamente diferentes para cada grupo de acesso, modificando a forma como os módulos são dispostos.

Na parte de baixo à esquerda, você pode escolher em quais items de menu do site aquele módulo será exibido, as opções são: Todos, nenhum e na última opção, você pode utilizar as teclas SHIFT e/ou CTRL para selecionar múltiplos links no menu onde aquele módulo será exibido. Note que o módulo está vinculado ao link do menu e não a página à qual ele se refere. Ex: Se eu modificar um link chamado onde estamos, do tipo wrapper para o tipo layout de artigo padrão, o módulo ainda sim será mostrado ao ser clicado.

Eu recomendo fortemente que você desenhe a estrutura do seu site em um papel e nela, mostre qual(is) módulo(s) serão mostrado(s) em qual(is) parte(s).

*widgets segundo o wikipedia: “Um widget é um componente de uma interface gráfica do utilizador (GUI), o que inclui janelas, botões, menus, ícones, barras de rolagem, etc..



@JennyPayneDZN

44

Outro emprego do termo são os widgets da área de trabalho, pequenos aplicativos que flutuam pela área de trabalho e fornecem funcionalidade específicas ao utilizador (previsão do tempo, cotação de moedas, relógio, ...)”

Módulos padrão

Os módulos padrão são divididos em alguns tipos como: Módulos de conteúdo, módulos relacionados à componentes, e módulos miscelâneos (que não se enquadra nas outras categorias de módulos)

Módulos de conteúdo

• Archived Content (Conteúdo Arquivado) – Mostra uma lista de meses de links para todos os conteúdos arquivados do site.

• Latest News (Últimas Notícias) – Mostra uma lista de links dos últimos artigos adicionados. Infelizmente ele mostra somente conteúdo de uma certa categoria ou seção específica

• Newsflash (Notícias em Destaque) – Mostra notícias randômicas de uma seção ou categoria, você pode mostrar uma introdução ao texto ou somente seu título.

• Most Read Content (Populares) — Mostra uma lista de links dos conteúdos mais clicados no seu site. Pode mostrar conteúdos de uma seção ou categorias específicas. Há muitas extensões desenvolvidas por terceiros que tratam de conteúdo melhor que o padrão do Joomla, mas não hpa como garantir a confiabilidade ou funcionamento.

• Related Items (Artigos Relacionados) — Mostra uma lista de links relacionado àquele que está sendo visualizado. O Joomla decide a relação através do uso de palavras-chave, (metatag keywords) que você verá no capítulo que trata SEO, SEF e segurança mais a frente.

• Sections (Seções) — Mostra uma lista de links para todas as seções do seu site. Não há um equivalente para categorias.

• Random Image (Imagem Randômica) – Mostra imagens randomicamente.

Dica:

Você pode utilizar este módulo como o topo de sua página para mostrar imagens diferentes de topo cada vez que o usuário entrar

• Custom HTML (HTML Personalizado) — Você pode inserir um conteúdo HTML personalizado, como um flash através da tag <object>, um javascript, um texto ou imagens qualquer

Módulos Relacionados à componentes



@JennyPayneDZN

45

Alguns componentes do Joomla têm suas funcionalidades completas quando utilizados em conjunto com certos módulos.

• Syndicate (sindicato) – Complementar ao componente sindicato. É um RSS feed no componente FrontPage. Significa que não importa onde o módulo sindicato está, só mostrará feed publicado pelo FrontPage

• Obs: FrontPage não está necessariamente na página inicial do site. O Joomla define o primeiro link como a home, o link marcado como default (padrão), você pode mover o componente FrontPage para outras áreas do site. Útil para blogs que você não quer mostrar na página inicial.

• Poll (Enquete) — Utilizado com o componente votação, mostra uma enquête e suas perguntas

Módulos Miscelâneos

• Login — Mostra um formulário para usuários se registrarem ou “logarem”. • Menu — Mostra os menus do site. • Who’s Online (Quem está online) — Mostra o número de usuários registrados e online no site

naquele momento. • Statistics (Estatísticas) — Mostra informações sobre os visitants e/ou informações técnicas do

servidor. • Feed Display (Mostrar Feeds) — Mostra um feed, como o componente Newsfeed que pode

mostrar um feed no conteúdo. • Wrapper (iframe) — Carrega uma página externa dentro de um módulo, como o do

componente. É útil para carregar diferentes conteúdos de dentro de areas pequenas do site.

Módulos de Terceiros

Abaixo, uma lista de módulos interessantes para Joomla 1.5

JPG Flash Rotator 2 (Imagens Aleatórias)— http://www.joomlashack.com

Jumi— http://www.vedeme.cz

AdSense Module— http://www.joomlaspan.com

Plugins

Plugins – São geralmente uma janela de comunicação entre o Joomla e o usuário. Um bom exemplo de um deles é o editor de texto tinyMCE. Ex: Um autor digita e formata o texto adicionando imagens,



@JennyPayneDZN

46

swf, links e o tinyMCE vai gerando um código HTML por trás. Quando o usuário salva, o tinyMCE salva estes arquivos no Banco de Dados e quando o visitante do site vai visualizar aquele artigo, o BD devolve o texto de acordo com o que foi projetado pelo autor, através do tinyMCE.

O que você vai perceber que você não gerencia os plugins com a mesma freqüência que componentes e módulos.

Plugins Padrão

• Autenticação (Authentication) — Joomla tem vários plugins que permitem integração da autenticação de login com outros sistemas como Gmail, OpenID e LDAP.

• Content-Code Highlighter — Este plugin irá destacar código no conteúdo (quando você usa a tag <cpre>)de acordo com os padrões GeSHi

• Content-Email Cloaking (Camuflagem de e-mail no conteúdo) — Este plugin converte qualquer endereçon de e-mail em JavaScript. Desta forma, e-mails no seu conteúdo não são detectáveis por programas para gerar spam.

• Content-Load Modules (Carregar Módulos no conteúdo) – É bem interessante, quando você precisa carregar um módulo em uma área específica do site. Você pode carregar um módulo dentro do conteúdo de um artigo escrevendo [loadpositions user2] onde você quiser que o mesmo apareça.

• Botões: Image, Pagebreak(Quebra de página) and Readmore (leia mais) — Este plugin controla estes botões no editor de artigo.

• Editors — Há 3 opções de editores no Joomla Padrão: No Editor, TinyMCE e Xstandard Lite. • Search (Pesquisa) — Controla a indexação e pesquisa de conteúdo. • System – Legacy (Sistema - Legado) — Permite que você utilize extensões desenvolvidas

para Joomla 1.0.x desde que as mesmas tenham atualizado seu código para rodar no modo joomla 1.5 legacy.

• System–Cache — Controla o cache do sistema. • XML-RPC — permite a comunicação entre o Joomla e outros sistemas controlados utilizando

a tecnologia XML-RPC e permite administrar o Joomla remotamente.

Plugins de Terceiros

Assim como para componentes e módulos, há diversos plugins para o seu site em Joomla.

Dica: Há mais de 4.430 extensões desenvolvidas para Joomla até o momento, delas, há em média 2.000 extensões para Joomla 1.5 Native e Joomla 1.5 Legacy que são gratuitas. Vale muito a pena você dar uma olhada neste endereço http://extensions.joomla.org/ e dar uma conferida nas extensões oferecidas para você!

Incluindo Módulos e Plugins em artigos



@JennyPayneDZN

47

É bem comum a necessidade de inserir um módulo ou plugin dentro de artigos, pode ser um banner, HTML personalizado, enquete ou outros tipos de módulos e plugins.

Incluindo módulos

Crie ou edite um artigo qualquer e na área onde você quer que o módulo seja carregado, digite {loadposition posicao_onde_o_modulo_esta}, o Joomla carregará todos os módulos que estão programados para aparecer naquela certa área. O problema disso é que se há outros módulos possíveis, ele carregará neste lugar.

A solução é simples, no módulo que você deseja carregar no artigo, no lugar da posição, apague a posição atual e digite uma que você saiba a que se refere, de preferência única. Note que o fato de você ter criado esta nova posição, não significa que ela está inserida em seu template (você verá esse assunto com mais detalhes no Capítulo 04). Pronto! Após renomear para algum nome sem espaço ou caracteres especiais, no meu caso criei uma posição jennifer no módulo, no artigo eu colocaria assim: {loadposition jennifer}.

Incluindo Plugins

As palavras entre chaves “{}” nos artigos significam para o Joomla que são parâmetros a ser interpretados. No caso do {loadposition}, significa carregar os módulos da posição dada naquele local específico do artigo.

No caso de Plugins, quando o plugin é do tipo “Content”, você pode inserir este plugin dentro dos artigos, mas os parâmetros variam de acordo com o plugin. No final deste livro, você trabalhará com o plugin “Plugin Google Maps“, ele foi feito para a versão do Joomla 1.0.x mas pode ser utilizado na versão 1.5 ele utiliza o seguinte parâmetro {mosmap} para ser carregado, o que ele faz é carregar um dado mapa do Google seguindo os parâmetros totais dados por você. Cada plugin tem uma forma única de ser carregado.

Incluindo SWF no Joomla

Há duas formas de inserir um SWF no Joomla, uma delas (a mais simples) é colocar a tag <object> como seria feito num HTML normalmente no módulo custom HTML (HTML personalizado) e adicionar as seguintes tags:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="900" height="130">



@JennyPayneDZN

48

<param name="width" value="900" /> <param name="height" value="130" /> <param name="loop" value="true" /> <param name="play" value="true" /> <param name="src" value="http://www.seusiteaqui.com.br/banner.swf " /> <param name="scale" value="showall" /> <param name="wmode" value="transparent " /> <param name="menu" value="false" /> <embed type="application/x-shockwave-flash" width="900" height="130" loop="true" play="true" src="http://www.seusiteaqui.com.br/banner.swf" scale="showall" wmode="transparent" menu="false"> </embed> </object>

Note que há alguns parâmetros que devem modificados por você. width e height definem altura e largura do swf, loop define se seu arquivo ficará se repetindo em loops, play define se seu arquivo começa ao ser carregado ou será executado ao clicar em algum botão para iniciar, por exemplo, wmode, se o fundo do swf será transparente ou não (é isso mesmo! seu swf pode ter fundo transparente! Caso você não tenha criado um objeto com cor-de-fundo no fundo, claro!) o src=define onde está o arquivo swf que você está colocando. Escolha o módulo onde seu swf vai aparecer, e pronto!

Outra forma é inserir o código diretamente no arquivo, o que acontece é que por padrão o Joomla “proíbe” os usuários de inserir HTML dentro de artigos para proteção do site, há como permitir essas inserções, logue como super administrador. Vá em Content � Article Manager (Conteúdo � Administrador de Artigo) em Parameters (parâmetros), role a rolagem para baixo e onde tem filtering options, filtering groups, selecione todos os os grupos, menos o super administrador utilizando o SHIFT ou o CTRL e marque a opção Blacklist (Default). Salve e pronto.

Ainda assim alguns código não poderão ser inseridos, há diversos plugins que permitem a inserção de html e php dentro de artigos no Joomla.



@JennyPayneDZN

49

Criando seu primeiro site em Joomla!

Este passo-a-passo que você verá a seguir é uma mistura dos meus estudos em Joomla com os estudos do jovem indiano Saurabh R. Bhide em seu site www.lagoona.in você encontra a sua obra original para download, em formato pdf, em inglês.

Há uma apresentação em PowerPoint criada por mim na internet que mostra essas etapas na criação de sites simples em Joomla e está disponível gratuitamente em:

http://www.slideshare.net/JenniferPayne/aprenda-joomla-15-fcil

Agora você aprenderá a:

• Instalar o Joomla! • 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

Gerenciando um site em Joomla

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.

Seu primeiro site em Joomla! : Babuínos

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.



@JennyPayneDZN

50

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 • Crie as páginas • Faça links de menu para estas páginas • Remova o desnecessário no site

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



@JennyPayneDZN

51

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.

System Info

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

Site Menu

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

Painel de Controle

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



@JennyPayneDZN

52

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.

Media Manager (gerenciador de Mídia)

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

Configuração Global

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

Passo #1: Escreva o nome do site

Este é muito simples. Vá na área administrativa (back-end) do 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!



@JennyPayneDZN

53

Tornando o Joomla! em português

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”



@JennyPayneDZN

54

• 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.11) 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.



@JennyPayneDZN

55

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)

Passo #2: Crie as páginas

Nosso site terá 4 páginas:

1. Inicial 2. Como os babuínos se parecem 3. Vida social dos babuínos 4. Tipos de Babuínos

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



@JennyPayneDZN

56

Observações

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

Passo #3: Crie Links de Menu

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.



@JennyPayneDZN

57

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.



@JennyPayneDZN

58

Clique em ‘artigos’, porque nós queremos que este link se víncule à um artigo.

Clique em “Layout de Artigo Padrão” (Standard Article Layout) quando a lista de ‘artigos’ expandir. Significa que o artigo por completo será mostrado quando o link for clicado.

Agora você será levado à uma tela onde você tem que especificar o nome deste link e o artigo vinculado a ele.

Nosso primeiro link é para a página inicial, por isso, escrevi o título e apelido (alias) ‘Home’.



@JennyPayneDZN

59

Editar Link

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



@JennyPayneDZN

60

Vinculando ao artigo

Na área superior, direita desta página, você verá uma caixa nomeada ‘Parâmetros de Item de Menu’ (Menu item parameters). Nesta Caixa, clique no botão ‘selecionar’ próximo ao campo ‘selecionar artigo’ para especificar qual artigo será mostrado quando o link for clicado

Uma janela popup aparecerá com uma lista de todas as páginas. Você deve dar um clique-duplo na página em que quer criar o vínculo com este item de menu.

Fazendo isto, você seleciona o artigo/página que será mostrado quando um usuário clicar neste link que

estamos criando.

Agora, o campo ‘selecionar artigo’ mostrará o nome da página que você selecionou.

Agora clique no botão ‘salvar’, você será levado ao “Gerenciamento de Menu” para o Main menu, e o link que você acabou de criar estará nesta lista.



@JennyPayneDZN

61

Visualizando nossos links no Front-End

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.

Limpando a Bagunça

Está tudo funcionando perfeitamente, mas, precisamos:

1. Toda esta bagunça no site deverá ser limpa, de forma que apareça apenas coisas relacionadas aos nosso babuínos no site.



@JennyPayneDZN

62

2. Quando o site for visitado através de ‘localhost/joomlabeta’, a página ‘Home’ que criamos será mostrada.

3. Todos os outros links para o menu deverão ser removidos.

A próxima página mostra uma bagunça típica do J! quando o mesmo é instalado utilizando os “exemplos de conteúdo” Há muitas ‘coisas’ nele. Estas coisas são chamadas ‘módulos’, foram descritas anteriormente, e são mostradas em caixas na figura seguinte. O único módulo requerido é o ‘Main Menu’, e todos os outros não são necessários no nosso site. Vamos escondê-los!



@JennyPayneDZN

63

Seu site deve estar assim agora:

Varrendo para debaixo do tapete

Para esconder estes módulos desnecessários, vá para o back-end ‘localhost/joomlabeta/administrator’ e logue. Vá para ‘Extensões’ -> ‘Administrador de Módulos’ (Module Manager). É 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.



@JennyPayneDZN

64

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.

Limpando os items de menu extras

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)

Dica

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:\xampp\htdocs\joomlabeta\templates\rhuk_milkyway\images’ ou onde quer que fique o diretório raiz do seu site com o nome ‘mw_joomla_logo.png’ para substituir a imagem atual.



@JennyPayneDZN

65

Este é o seu primeiro site em Joomla!

Como um conteúdo é salvo

O conteúdo em Joomla! são as páginas de informações a ser mostradas no site. Há dois tipos de conteúdo: Com categoria ou sem categoria.

Conteúdo sem categoria

Estas geralmente referem-se à páginas estáticas, você pode criar e editar quantas delas você quiser no Back-end. Estas páginas não pertencem a nenhuma categoria, por isso, são chamadas assim.

Conteúdo com categorias

Também referem-se à paginas, mas estas pertencem a uma estrutura, que é constituída de seções e categorias.



@JennyPayneDZN

66

Uma ‘seção’ (section) contém diferentes ‘categorias’ (categories) que por sua vez, contém páginas de conteúdo também chamadas ‘itens de conteúdo’.

A figura ao lado mostra um exemplo de um site contendo informações sobre carros diferentes. “Cars” é uma seção, que contém duas categorias “Hatchbacks” e “Sedans”

Estas categorias têm uma página de cada carro naquela categoria.

Criando seu segundo site em Joomla!

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



@JennyPayneDZN

67

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:

Estapas para a criação

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



@JennyPayneDZN

68

Passo #1: Configurar o nome do site

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

Passo #2: Criar as páginas sem categorias

Olhe na estrutura do site e crie as páginas sem categorias, assim como criamos as 4 páginas do site dos babuínos.

As páginas são:

Home

About Us

The Principal

Novamente, como da primeira vez, estes artigos ainda não estão visíveis no front-end. É necessário criar os links para estes conteúdos. Você pode criá-los agora, como fez no site dos babuínos ou fazê-los posteriormente.

Passo #3: Criar a Seção (Departments)

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’



@JennyPayneDZN

69

Dica:

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

Passo #3: Criar uma categoria para cada departament o

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.



@JennyPayneDZN

70

Passo #5: Adicionar páginas/itens de conteúdo nesta s categorias



@JennyPayneDZN

71

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:

1. Faculty: Uma página sobre o corpo docente do departamento 2. Facilities: Mostra todos os laboratórios e maquinários 3. Projects: Mostra todos os projetos legais feitos por estudantes no departamento.



@JennyPayneDZN

72

Criando páginas com categoria

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.

Step #6: Adicionar links para todas as coisas acima no menu

Uma vez que você criou todas as diferentes páginas para cada departamento, é hora de adicionar links para todos os conteúdos no menu.



@JennyPayneDZN

73

1: Adicione links para os conteúdos sem categoria como fizemos no site dos babuínos.

2: Add Links para as páginas dos Departmentos

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”

Clique no botão ‘new’

Clique em‘Articles’ na lista ‘Internal Links’

A lista expandirá. Clique em ‘Category List Layout’ na sub-lista ‘Category’

Na caixa à direita ‘Menu Item Parameters’ , selecione a categoria apropriada.

Abaixo desta caixa, há mais duas caixas que estão minimizadas no momento mas podem ser expandidas ao clicar no nome.

Clique no botão ‘Save’ no topo, à direita

Se você visitar o site, verá o link no menu e ao clicar nele, verá uma lista de todos os artigos/páginas pertecentes àquele departamento.



@JennyPayneDZN

74

Step #7: Organizando a página

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.

Nosso segundo site padrão está pronto!

Faça as seguintes configurações:



@JennyPayneDZN

75

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:

Para editar qualquer página...

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.



@JennyPayneDZN

76

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.

Utilizando outro template

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

Como já vimos antes, um template é uma extensão do sistema Joomla!. Para instalá-lo, logue no back-end e vá para ‘Extensions’->’Install/Uninstall’

Na caixa ‘Install from URL’, digite a URL acima. Clique Install.

Joomla! automaticamente fará o download e instalará o template! Você receberá uma mensagem de que foi instalado com sucesso e um screenshot



@JennyPayneDZN

77

Tornando o ‘Novus’ template padrão

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:\xampp\htdocs\digite_a_pasta_do-seu_site\templates\rt_novus_j15\images”

Há duas imagens que podem ser substituídas:

inset-banner.jpg logo.png

Modifique estas imagens ao seu gosto e estamos prontos!

Versão do livro finalizada



@JennyPayneDZN

78

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!

Incrementando o site

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

Adicionando Módulos no nosso site

Vamos adicionar agora os módulos necessários para finalizar a página inicial do nosso sistema online:

Clique em Extensões -> Administrar Módulo

Clique em Pesquisa e em seguida no botão próximo

Preencha os parâmetros que achar necessário

Adicionando Enquetes



@JennyPayneDZN

79

• 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

Adicionando Módulos (enquete)

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

Dica:

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.

Links Úteis

• Esse componente é bem simples, você apenas adiciona links e diz a forma de comportamento ao clicanele (ir para outra janela, abrir na mesma janela)

• Antes de criar os links, devemos criar uma categoria para eles.



@JennyPayneDZN

80

• 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

Adicionando Links Úteis no seu menu

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

categoria)

Link de Localização

• Vá em Menu->Main Menu • Crie um novo menu e em Tipo de item de Menu, selecione wrapper • Digite a url desejada, (procure o local no Google Maps) configure os parâmetros • Salve

Criando um formulário de Contato

Vá em Componentes -> Contatos -> Categoria e crie uma nova categoria chamada “Contatos”

Vá em Componentes -> Contatos -> contatos -> novo

Tire um tempinho para ler os campos abaixo, eles mostram as informações do seu contato apenas

OBS: Este componente contato nativo do Joomla é bem simples, há apenas alguns campos pré-definidos para o visitante preencher. Mas há vários componentes que permitem a personalização de campos em um formulário de contato

Adicionando o Link Contato

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



@JennyPayneDZN

81

Capítulo 04 – SEO, SEF e segurança

04.01 - Como manter seu Joomla seguro

É um assunto delicado, já que não há nenhum site totalmente seguro na internet e se complica um pouco mais em relação à CMS em geral. O problema com CMS é que apesar de ter uma equipe de segurança envolvida no processo de desenvolvimento, a falha em um CMS é o mesmo que dizer falha em todos os sites que utilizam aquele CMS. No caso do Joomla, outro fator complicador são as extensões, existem mais de 3.000 extensões no Joomla e você não tem como saber se a pessoa quem desenvolveu tomou todas as precauções necessárias.

Abaixo, você lerá a tradução dos conselhos dados pela equipe de segurança do Joomla, artigo original em http://www.joomlasecurity.info/

Utilize a versão mais nova de segurança do Joomla

Esta é a primeira atitude que você deve tomar.

Como colocar seu joomla na versão atual

Este é um guia de como colocar seu Joomla em uma versão mais nova. Por que você deveria fazê-lo? Primeiro e mais importante, porque queremos que seu site me Joomla seja seguro. Todos os websites dinâmicos são mais ou menos vulneráveis à ataques hackers, que devem querer adicionar spam ao seu site, danificá-lo ou entrar nele e roubar informações. Os desenvolvedores Joomla são determinados a estar um passo à frente dos hackers o tempo todo, mas em ordem de você se beneficiar dos esforços da equipe, você precisa manter sua instalação do Joomla, atualizada.

Tenha certeza de checar se há novas versões de vez em quando, e fazer o upgrade sempre que houver uma nova versão disponível que foi dito lidar com vulnerabilidades de segurança.

Aqui está como dar atualizar seu Joomla para uma ve rsão mais nova:

Descubra a versão atual da sua instalação. O número é mostrado na parte direita, no topo de sua área administrativa.



@JennyPayneDZN

82

Baixe o patch de atualização apropriado. Por exemplo, se você tem a versão 1.5.2 e quer atualizar para a versão 1.5.5, você baixa o patch nomeado Joomla_1.5.2_to_1.5.5-Stable-Patch_Package.zip. Encontre a versão apropriada em http://joomlacode.org/gf/project/joomla/frs/

Descompacte o patch na sua máquina

1. Envie os arquivos via FTP no servidor web e deixe-o sobreescrever os arquivos existentes da sua instalação Joomla

Cuidado!

Certifique-se de fazer um backup na sua instalação Joomla antes de fazer o upgrade. Às vezes algum plug-in ou componentes de terceiros não são compatíveis com a versão atual. É raro acontecer, mas se tiver um backup antes de começar, evitará problemas caso saia algo errado.

Utilize somente extensões seguras de terceiros e as mantenha atualizadas

A maioria das vezes quando as pessoas dizem que seus sites em Joomla foram hackeados, o problema de segurança não vem do Joomla em si, mas sim o hacker veio de uma extensão de terceiros insegura. Cheque a lista de extensões vulneráveis neste endereço: http://docs.joomla.org/Vulnerable_Extensions_List

Utilize username e senha seguros para administrador es

Não utilize o nome de usuário padrão admin. Mude-o para algo seguro e escolha uma senha segura. Uma senha segura contém no mínimo 8 caracteres que misturam letras, números e caracteres especiais.

Utilize um componente SEF que torne seu Joomla mais seguro

Um componente SEF é usado para fazer as URL’s do seu site mais amigáveis para mecanismos de buscas. Mas um bom SEF também dá benefícios em segurança. Uma URL padrão diz muito sobre a página visitada, que é a página em Joomla e quais componentes foram utilizados para produzir aquela página. Um componente SEF mascara esta informação e torna mais difícil para um hacker encontrar eventuais vulnerabilidades na segurança.



@JennyPayneDZN

83

O componente SEF chamado sh404SEF inclui um componente de segurança que para vários ataques no seu website e manda a você um aviso sempre que seu site estiver exposto a um ataque (Aprenderemos a utilizar este componente mais a frente). Também te dá a opção de remover o gerador de tag do seu site. O tag gerador diz ao mundo que seu site é gerado em Joomla. Claro que é uma coisa boa dar crédito ao Joomla, mas há outras maneiras de ajudar a comunidade joomla que não ajudem hackers ao mesmo tempo. Se você não disser ao hacker que seu site é feito em Joomla, torna muito mais difícil para ele saber de onde começar a hackear.

Utilize um componente SEF que torne seu Joomla mais seguro

• Evite qualquer servidor web que utilize php safe_mode, safe_mode deveria estar OFF. • Prefira PHP 5 do que PHP 4

Não conte a ninguém sobre suas configurações

• Tenha certeza que ninguém de fora pode ver sua informação php (configuração do servidor), pelo phpinfo (veja: http://se.php.net/phpinfo) para mais detalhes

• Esconda a tag geradora que mostra que você utiliza um CMS em Joomla. Note que não estamos dizendo que Joomla é inseguro e sim que será mais difícil para um hacker especializado em Joomla reconhecer que seu site é feito em Joomla.

• Use um SEF como o sh404SEF para mascarar os componentes do seu site

Proteja seu configuration.php (torne-o unwritable)

Você deveria proteger seu configuration.php, que está localizado na pasta raiz de seu site. O Joomla protege este arquivo por padrão. Você pode fazer isto manualmente colocando o arquivo mudando o CMOD para 444.

Delete os templates que você não utiliza

É importante deletar os templates Joomla que você não utiliza em seu website. Se você o mantém os templates padrão, alguém poderia por exemplo, utilizar o link para seu site com a url /index.php?jos_change_template=rhuk_solarflare_ii e mostrar seu site com o template padrão. Além de tornar seu site feio para quem clica neste link, poderia mostrar conteúdo que você não gostaria de publicar na web, por exemplo, através de módulos de posição que não existem no template escolhido.



@JennyPayneDZN

84

Verifique se todos os diretórios/sub-diretórios pos suem um arquivo índex.html

O que ainda acontece com muitos servidores web é que quando você digita por exemplo www.meusite.com/diretorio-existente, se este diretório não tem um arquivo como índex.html, default.html ou outros tipos padrão, o navegador mostra a lista de arquivos contidos naquele diretório, essa é uma brecha que pode ser utilizada por um hacker para descobrir mais informações sobre seu site. O Joomla padrão já vem com um índex.html em todos seus diretórios. Mas é importante verificar as extensões que você instala/cria. Caso você tenha uma pasta sem este arquivo, copie de alguma das pastas do seu site, verifique que este HTML não tem conteúdo, e cole na pasta desejada.

É importante deletar os templates Joomla que você não utiliza

Dica

Segue abaixo um link de um site muito bom sobre Joomla e neste link há uma série de artigos sobre aumentar a segurança em Joomla. Ainda não testei algumas das dicas dele.

http://www.joomlabrasilia.org/blog-do-cout/tudo-sobre-joomla

04.02 - que é SEO (Search Engine Optmization)

Abaixo vai trechos da definição do wikipedia:

“Otimização de Sites é o conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca”



@JennyPayneDZN

85

“As técnicas utilizadas no SEO são concebidas para alavancar seus objetivos no seu website melhorando o número e a posição de seus resultados nas busca orgânica para uma grande variedade de palavras-chave relevantes ao conteúdo do web site. Estratégias de SEO podem melhorar tanto o número de visitações quanto a qualidade dos visitantes, onde qualidade significa que os visitantes concluem a ação esperada pelo proprietário do site (ex. comprar, assinar, aprender algo). A Otimização para Sistemas de Busca normalmente é oferecida como um serviço profissional autônomo, ou como parte de um projeto de Webmarketing e pode ser muito eficaz quando incorporado no início do desenvolvimento do projeto de um website.“

Há algumas atitudes gerais que podemos fazer para que seu site apareça em melhor posicionamento nas buscas e há coisas que temos que fazer para ajudar o seu site em Joomla a ficar no topo das buscas.

Nesta apostila, você aprenderá o básico de SEO e como utilizar os recursos do Joomla para melhorar sua posição no ranking.

04.03 – Dicas de SEO

Ninguém sabe ao certo o que realmente funciona para estes mecanismos de buscas, principalmente porque cada mecanismo desse tem seus próprios algoritmos de indexação e por razões óbvias nenhuma delas abrem seus algoritmos.

Abaixo algumas dicas rápidas do que realmente funciona:

• Se possível, compre domínios que sejam palavra-chaves os quais você espera ser encontrado nas pesquisas. (E.g: se seu site é de uma empresa locadora de veículos, além do domínio da sua empresa, você poderia ter um domínio como www.locadorasveiculos.com.br e redirecionar esse site ao seu no index.html). Estes mecanismos consideram um domínio que contenha a palavra-chave algo muito importante.

• Títulos de página e url contendo estas palavras também são algo muito importante. • Otimize os títulos do seu site da seguinte forma:

o Comece com a palavra-chave principal, marca da empresa ou algo que considere relevante no seu site.



@JennyPayneDZN

86

o Procure fazer um título chamativo para seu site, se possível utilizando uma pequena descrição do conteúdo do mesmo.

o Os títulos das páginas devem ser únicos, para não confundir os visitantes e os robôs de busca. o Tente limitar seu título em até 65 caracteres, pois esse é o limite de exibição no Google

• Palavra-chave e descrições nos META dados relevantes e bem escritos. Não utilize mais do que 20 palavra-chaves nas suas meta keywords pois alguns robôs consideram isso uma técnica chamada key spamming.

• Varie as palavras dentro de seu conteúdo, utilizando sinônimos e com palavras relevantes. Apresentados em um HTML válido. Infelizmente o Joomla 1.5 peca um pouco nesta apresentação, pois apesar de você poder construir um template com css e html válido, a saída dos componentes ainda são em tabelas não-semânticas.

• Organize seu site para que seja facilmente navegável, estruturas lógicas para que usuários e robôs possam navegar. Crie uma lógica onde uma página não pareça uma rua sem saída, onde você só entra ou sai de um jeito, coloque um link “Ir para página inicial” ou “home” no seu menu, ou mesmo coloque um link na logo da empresa.

• Linkbaiting – Esta tática consiste em você criar algum conteúdo (imagem, vídeo, texto, som) que faça com que as pessoas voluntariamente coloquem o link para o seu site na página deles. É como um hit na internet que é como chamamos de “marketing viral”, se espalha através do esforço dos próprios internautas.

o Adicione conteúdo único e/ou informativo. o Coloque algo de humor nele. o Dê ao visitante motivação para repassar a mensagem.

Há também outros fatores que não são dependentes diretamente de você.

• Quantos sites têm vínculos para o seu • Onde eles vinculam para o seu no seu conteúdo • Que palavras são utilizadas no seu link (ex: descrição da página) • A relevância dos sites que têm links para o seu

É importante lembrar que, apesar de haver várias técnicas para “enganar” os robôs de busca, eu não recomendo, pois estas técnicas podem terminar por piorar sua posição no ranking. Na verdade, utilizando SEO corretamente, você está criando também uma espécie de filtro para ser encontrado por pessoas que realmente quer encontrar você. Não adianta ser encontrado por pessoas que não querem o que você tem a oferecer.



@JennyPayneDZN

87

04.04 Otimizando META dados

META dados, são dados passados por você aos robôs de busca e aos navegadores que indicam que tipo de conteúdo poderá ser encontrado na sua página. No Joomla, você pode controlar tanto os META dados gerais do seu site, quanto controlar de cada artigo individualmente. Como nossas páginas são geradas dinamicamente, é importante que nós tenhamos um controle maior sobre o que é importante para aquela página em específico.

Modificando o META dado geral do seu site.

Na área administrativa do site, clique em Site -> Global configuration. Na aba site, há um grupo de campos em ”Metadata Settings ”.

• Global Site Meta Description – Uma pequena descrição sobre o conteúdo do seu site, de maneira geral, essa descrição deve ser de fácil interpretação por humanos.

• Global Site Meta Keywords – Coloque palavras chaves e frases relevantes para seu site, separados por vírgula e grupos de frases entre aspas simples.

• Show Title Meta Tag – Mostra a meta tag título ao ver artigos. • Show Author Meta Tag – Mostra a meta tag autor ao mostrar artigos.

Sobre as keywords, utilize no máximo 20 palavras-chave e dê preferência aos sinônimos das palavras que definem o seu site. Você pode descobrir palavras deste tipo utilizando o google. https://adwords.google.com/select/KeywordToolExternal

Lá você pode escrever uma palavra e marcar a opção de usar sinônimo, o google vai mostrar um resultado de palavras juntamente com a competição da concorrência utilizando aquela mesma palavra, eu utilizei a palavra “test” mas se você descer a rolagem, você verá um grupo de palavras relacionadas, no meu caso “exam”, “practice” e outras. É verdade que a maioria é inútil, mas você pode aproveitar algumas delas não somente para adicionar na sua keyword, mas para variar as palavras dentro do seu texto. Quanto mais rico em conteúdo, utilizando menos redundâncias e utilizando mais sinônimos, isto poderá ajudar o seu site a ser melhor encontrado nas buscas.

Escreva conteúdos claros e concisos, sem muitas repetições nas palavras para passar nossa mensagem é o segredo para otimização de conteúdo. No seu conteúdo, inclua palavras que também estarão escritas nas suas meta tags de descrição, título e em outras partes do site. Isto irá ajudar a prender suas meta tags dando mais relevância e conseqüentemente uma chance maior de elevar seu statos nos robôs de busca.

Pesquise suas palavras-chave para obter uma noção de como seus competidores estão otimizando seus sites e também, pescar com eles palavras alternativas para otimizarmos ainda mais nossos sites.



@JennyPayneDZN

88

Nessa parte da apostila você deve ter notado meu freqüente uso em algumas palavras ou termos, mas é que em SEO, tudo é sobre como o conteúdo é estruturado e isso leva à repetição de alguns passos.

04.05 Implementando SEO em Joomla

Após tanta teoria, prepare-se para repetir os mesmos passos diversas vezes, para ser mais exata, pelo menos o número de artigos existentes no seu site! Está na hora de conhecer uma extensão de terceiros, a sh404SEF. Este tutorial é uma adaptação e tradução de um tutorial em http://www.kenlapz.org/joomla-tips-tricks/how-to-install-sh404sef-for-your-joomla-15.html

Passo 1: Download o componente sh404SEF component. http://joomlacode.org/gf/download/frsrelease/9235/34670/com_sh404SEF_1.3.9_build_357.joomla1.0.x.zip

Passo 2: Instale o componente.

Passo 3: Na área administrativa, vá para �� Site �� Global Configuration �� SEO Settings.

Vá para � Extensions � Plugin Manager e habilite o plugin system � legacy

Habilite todas as configurações clicando na opção “Yes”

Passo 4: Vá para Components �� sh404SEF

Mude para o modo “Extended Display”



@JennyPayneDZN

89

Clique em “sh404SE Configuration”

Na guia Main escolha : Habilitar Opções (para habilitar o sh404SEF)



@JennyPayneDZN

90

Vá para a guia Advanced � Advanced Component Configuration � Escolha Rewriting mode: “with .htaccess” (mod

rewrite), but to do this please make sure that your webhosting support mod rewrite and for the .htaccess file, we will modify it later.



@JennyPayneDZN

91

Se você instalar qualquer componente não suportado para sh404SEF, nós teremos que desabilitar os SEF para evitar qualquer tipo de erro no nosso website, observe aqui a lista de plugins para sh404SEF que te permitem trabalhar com os componentes indicados pelo nome do plugin em http://extensions.joomla.org/extensions/extension-specific/sh404sef-extensions

Verifique de vez em quando a lista para ver se há alguma nova extensão habilitada

Para desabilitar SEF em qualquer componente, escolha a opção “Skip” nos componenter. Esta é toda a parte de configuração no componente, agora trabalharemos no arquivo .htaccess



@JennyPayneDZN

92

Passo 5: Trabalhando com o arquivo .htaccess

Este será o último passo que é trabalhar com o arquivo .htaccess . Este arquivo é colocado no diretório raiz da sua conta no seu servidor web. É geralmente colocado no diretório public_html. Se não houver esse diretório, crie-o no diretório raiz e mude a permissão para 777. Se você não tem as habilidades necessárias trabalhar com FTP (File Transference Protocol) e fazer esta operação ou não tem permissão para modificar permissões, peça ajuda ao suporte do seu servidor.

Há um arquivo htaccess para Joomla 1.5 já configurado, para baixá-lo, registre-se gratuitamente no site http://www.kenlapz.org, após confirmar por e-mail a sua inscrição, logue no site e digite este endereço no seu navegador

http://www.kenlapz.org/index.php?option=com_jdownloads&Itemid=69&task=view.download&cid=46

Clique em download, uma janela será aberta com um texto escrito nela, copie este arquivo.

Vá para o diretório raiz do seu site e crie um arquivo .htaccess

ATENÇÃO: Para usuários Windows apenas, o padrão do Windows é não aceitar renomeações para .htaccess, siga os passos adiante

• Na raiz do seu site crie um arquivo denominado htac cess.txt e cole o conteúdo dentro deste arquivo e salve

• No Windows, clique em Iniciar �� Executar...

• Digite “cmd” sem as aspas, uma janela do DOS aparec erá

• Digite o seguinte “cd C:\” sem as aspas ou o nome d a partição onde está seu site

• Agora digite c:\caminho_para_o_seu_site

• O prompt do DOS deverá estar assim:

o C:\caminho_para_o_seu_site>

o Digite ren htaccess.txt .htaccess

Caso o arquivo htaccess do kenlapz não funcione, abra seu arquivo .htaccess, abra com um editor de texto e digite:



@JennyPayneDZN

93

## # @version $Id: htaccess.txt 10492 2008-07-02 06:38:28Z ircmaxell $ # @package Joomla # @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved. # @license http://www.gnu.org/copyleft/gpl.html GNU/GPL # Joomla! is Free Software ## ##################################################### # READ THIS COMPLETELY IF YOU CHOOSE TO USE THIS FILE # # The line just below this section: 'Options +FollowSymLinks' may cause problems # with some server configurations. It is required for use of mod_rewrite, but may already # be set by your server administrator in a way that dissallows changing it in # your .htaccess file. If using it causes your server to error out, comment it out (add # to # beginning of line), reload your site in your browser and test your sef url's. If they work, # it has been set by your server administrator and you do not need it set here. # ##################################################### ## Can be commented out if causes errors, see notes above. Options +FollowSymLinks # # mod_rewrite in use RewriteEngine On ########## Begin - Rewrite rules to block out some common exploits ## If you experience problems on your site block out the operations listed below ## This attempts to block the most common type of exploit `attempts` to Joomla! # # Block out any script trying to set a mosConfig value through the URL RewriteCond %{QUERY_STRING} mosConfig_[a-zA-Z_]{1,21}(=|\%3D) [OR] # Block out any script trying to base64_encode crap to send via URL RewriteCond %{QUERY_STRING} base64_encode.*$.*$ [OR] # Block out any script that includes a <script> tag in URL RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR] # Block out any script trying to set a PHP GLOBALS variable via URL RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR] # Block out any script trying to modify a _REQUEST variable via URL RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2}) # Send all blocked request to homepage with 403 Forbidden error! RewriteRule ^(.*)$ index.php [F,L] # ########## End - Rewrite rules to block out some common exploits # Uncomment following line if your webserver's URL



@JennyPayneDZN

94

# is not directly related to physical file paths. # Update Your Joomla! Directory (just / for root) #RewriteBase / ########## Begin - Joomla! core SEF Section # RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !^/index.php RewriteCond %{REQUEST_URI} (/|\.php|\.html|\.htm|\.feed|\.pdf|\.raw|/[^.]*)$ [NC] RewriteRule (.*) index.php RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L] # ########## End - Joomla! core SEF Section

E salve o arquivo

Passo 6: Testando o seu site

Depois de criar e fazer o upload do arquivo .htaccess a única coisa a fazer é testar o seu site. Se não houver problema, as url’s estarão mais ou menos assim:

De http://www.kenlapz.org/index.php?option=com_content&Itemid=69 para http://www.kenlapz.org/project/

De http://www.kenlapz.org/index.php?option=com_blablabla para http://www.kenlapz.org/forum/

Muito bom, não acham?

Erros & Problemas

1. Se você descobrir que todos os seus links vão para o erro 500, cheque seu arquivo htaccess e se o apache do seu servidor possui o mod_rewrite, se acontecer desta forma, devemos rodas o sh404SEF sem o arquivo .htaccess (na aba Configuration � Advanced)

2. Se o erro for o 404, tente dar um “Purge” nas sh404SEF url no painel de configuração. Lembre-se, se você modificar qualquer conteúdo ou alias (apelido) de seu site, você deverá fazer esse “Purge”, para a url SEF ser atualizada

3. Se ainda assim houver problema, contate a mim, o autor do artigo ou o Google.

Dica final



@JennyPayneDZN

95

Para melhorar mais ainda seu site nos mecanismos de busca, adicione seu site nos mesmos. Eventualmente os mecanismos encontrarão seu site, mas você pode dar uma mãozinha, adicionando sua url em alguns deles. Veja a lista de mecanismos que encontrei em http://.infodinheiro.blogspot.com

Lista de mecanismos de busca ou sites de busca para cadastrar/adicionar sua url/site/blog

Sites de Busca brasileiros:

URL: http://www.google.com.br/ Adicionar URL: http://www.google.com.br/intl/pt-BR/add_url.html URL: http://www.buscar.com.br/ Adicionar URL: http://www.buscar.com.br/incluir_url.html URL: http://br.altavista.com/ Adicionar: http://br.altavista.com/addurl/default URL: http://www.aonde.com/ Adicionar URL: http://www.aonde.com/inclusao.htm URL: http://br.yahoo.com/ Adicionar URL: http://add.br.yahoo.com/fast/add?2086175535+BR URL: http://www.achei.com.br/ Adicionar URL: http://www.achei.com.br/incluir/index.htm URL: http://www.guiaweb.com/ Adicionar URL: http://www.guiaweb.com/addurl.php3 URL: http://www.cranik.com/ Adicionar URL: http://www.cranik.com/add_url_form.html URL: http://www.welcome.com.br/ Adicionar URL: http://www.welcome.com.br/cgi-local/sitesubmit_add/sitesubmitter.cgi URL: http://www.brbusca.com Adicionar URL: http://brbrasil.com.br/cgi-local/brbusca/adm/signup.cgi



@JennyPayneDZN

96

URL: http://www.portalbusca.com/ Adicionar URL: http://www.portalbusca.com/add.php URL: http://www.sisbi.net/ Adicionar URL: http://www.sisbi.net/novo.htm URL: http://www.list.com.br/ Adicionar URL: http://www.list.com.br/addUrl.htm URL: http://www.buscadesite.com/ Adicionar URL: http://www.buscadesite.com/cadastrouser.php URL: http://www.pesquisando.com.br/ Adicionar: http://www.pesquisando.com.br/cadastrar_novo_site.htm URL: http://www.zarp.net/ Adicionar: http://www.zarp.net/central.htm URL: http://www.achem.com.br/ Adicionar: http://www.achem.com.br/cadastrar.asp URL: http://www.acheitudo.com/ Adicionar: http://www.acheitudo.com/incluir.htm URL: http://www.peskisa.com.br/ Adicionar: http://www.peskisa.com.br/cadastro.asp URL: http://www.lokaliza.com.br/ Adicionar: http://www.lokaliza.com.br/add_url_formnew.asp URL: http://www.bastaclicar.com.br Adicionar: http://www.bastaclicar.com.br/users/inicad.asp URL: http://www.portal-internet.com.br/ Adicionar: http://www.portal-internet.com.br/addurl.html URL: http://www.buscasexy.web.pt/ Adicionar: http://www.supertrafego.com/ffa_cadastro.asp?id=49504&cat=&busca= URL: http://www.exploora.com.br/ Adicionar: http://www.exploora.com.br/info/eaddurl.php



@JennyPayneDZN

97

URL: http://www.buscadireta.com.br/ Adicionar: http://www.buscadireta.com.br/cgi/adiciona.cgi URL: http://www.buscaaqui.com.br/ Adicionar: http://www.buscaaqui.com.br/cadastro/ URL: http://www.gigabusca.com.br/ Adicionar: http://www.gigabusca.com.br/adicionar.cgi URL: http://www.radix.com.br Adicionar: http://www.radix.com.br/estatica/cadastre_seu_site.html URL: http://www.acbusca.com.br/ Adicionar:http://www.acbusca.com.br/busca/cadastro/cadastro_etapa_1.phtml

Sites de Busca Portugueses:

URL: http://www.google.pt/ Adicionar: http://www.google.pt/intl/pt-PT/add_url.html URL: http://pt.altavista.com/ Adicionar: http://pt.altavista.com/addurl/default URL: http://www.sapo.pt/ Adicionar: http://directorio.sapo.pt/ URL: http://www.aeiou.pt/ Adicionar: http://www.aeiou.pt/aeiou/adicionar.php URL: http://www.portalx.com.pt/ Adicionar: http://www.portalx.com.pt/cgi-bin/links/add.cgi URL: http://www.netindex.pt/ Adicionar: http://www.netindex.pt/adicionar.html URL: http://www.onemagic.net Adicionar: http://www.onemagic.net/index.cgi?como_registar URL: http://www.coolnet.pt/ Adicionar: http://www.coolnet.pt/ URL: http://www.terravista.pt/



@JennyPayneDZN

98

Adicionar: http://www.terravista.pt/pesquisa/adiciona.php URL: http://www.portugalindex.com/ Adicionar: http://www.portugalindex.com/addurl.php URL: http://www.portugal-global.com.pt/ Adicionar: http://www.portugal-global.com.pt/ URL: http://www.nossogrupo.com.pt/ Adicionar: http://nossogrupo.com.pt/directorio/add.cgi URL: http://www.leme.pt/ Adicionar: http://www.leme.pt/adicionar/ URL: http://www.portugal.com.pt/ Adicionar: http://www.portugal.com.pt/add_url_form.asp?new=site URL: http://www.tumba.pt/ Adicionar: http://www.tumba.pt/tumba/submeter.jsp URL: http://www.portal.co.pt/ Adicionar: http://www.portal.co.pt/index.asp?inc=register URL: http://www.abusca.pt.to/ Adicionar: http://abusca.webcindario.com/?action=add URL: http://www.clix.pt/ Adicionar: http://directorio.clix.pt/index.html URL: http://www.busca.portugal-diario.com/ Adicionar: Depois de escolhida a categoria URL: http://www.mundopt.com Adicionar : Tem que navegar ate a vossa categoria. URL: http://directoriopt.com/ Adicionar : http://directoriopt.com/adicionar/



@JennyPayneDZN

99

Capítulo 05 - Layouts e templates

• Estrutura de um template para Joomla • Adaptando um template para Joomla • Templates mais a fundo, CSS padrão e técnicas espec iais para trabalhar com Joomla



@JennyPayneDZN

100

HTML/XHTML, CSS, XML, PHP

O Joomla trabalha com estas tecnologias para a criação de um template, claro que você pode ter certos trechos em flash ou JavaScript, mootools, JQuery, enfim, tudo que um HTML comum pode manipular, o nosso template também. Para esta parte do curso, eu assumo que você já tenha os conhecimentos esperados na área de criação para a web, desde que o curso é de Joomla, não web design.

Estrutura de um template padrão do Joomla

Cada template fica na sua própria pasta, o nome da pasta é case-sensitive e não pode conter espaço dentro da pasta templates e cada template em Joomla contém ao menos os seguintes elementos:

Index.php – Nele criamos a estrutura (X)HTML do nosso site e passamos os parâmetros Joomla responsáveis pelo funcionamento do site.

templateDetails.xml – Nele dizemos quais arquivos fazem parte do nosso template. Sem ele, nosso site não será apresentado. Ele quem diz quais arquivos são necessários ao template e se não o definirmos, nenhuma imagem, por exemplo, seria mostrada.

template_thumbnail.png – É uma imagem de 266x172px, em formato png, que é basicamente um screenshot de como seu template deve se comportar.Não é essencial, mas ajuda quando você divide este template com alguém.

favicon.ico – ícone do seu site que aparece no navegador, o do Joomla é o padrão, você pode editar, utilizando softwares para isso. Não é essencial, mas é legal ter o seu, valoriza o site .

CSS e imagens – Por convenção e organização, criamos uma pasta chamada css e outra images, para colocar os arquivos css e as imagens, respectivamente. Geralmente, nomeamos o arquivo de template.css e os hacks no arquivo ie_only.css. Eu gosto da seguinte estrutura:

@JennyPayneDZN

101

template.css – Classes e id’s da estrutura (X)HTML criada por mim. ie_only.css – Hacks e coisas feitas exclusivamente para o IE. joomla_core – Redefinição do CSS padrão do Joomla.

O importante na hora de criar um template é estar familiarizado com o CSS padrão do Joomla, você terá acesso a essa lista adiante, mas só para você entender, abra o código fonte de seu site. Note quantas classes e tabelas ele abre, note que varia de acordo com a tela, o código parece meio bagunçado a princípio e é mesmo, mas com o tempo você se acostuma.

templateDetails.xml

Além de mostrar quais arquivos serão utilizados, especifica quais módulos de posicionamento existem, metadados de autor, licensa, direitos autorais e outras variáveis. Segue abaixo um exemplo deste arquivo

<?xml version=”1.0” encoding=”utf-8”?> <install version=”1.5” type=”template”>  <name>nome_da_pasta</name> <creationDate>Abril 2009</creationDate>  <author>Jennifer Payne</author>  <copyright>GPL</copyright>  <authorEmail>[email protected]</authorEmail> <authorUrl>http://jennifer-payne.blogspot.com</authorUrl > <!—URL do autor do Template--> <version>1.0</version>  <description>Criado para a o curso de Joomla</description>  <files>  <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/setiver.js</filename> <filename>images/imagem1.gif</filename> <filename>images/logo.gif</filename> <filename>css/template.css </filename> </files> <positions> <position>breadcrumb</position>

@JennyPayneDZN

102

<position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> <position>minha_posicao</position> </positions> <params> <param name=”showComponent” type=”radio” default=”1” label=”ShowComponent” description=”Show/Hide the component output”> <option value=”0”>No</option> <option value=”1”>Yes</option> </param> </params> </install>

Index.php

É a combinação das tags php, joomla e estrutura (X)HTML do seu site

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns=”HTTP://www.w3.org/1999/xhtml” XML:Lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” dir=”<?php echo $this->direction; ?>”>

Doctype é a parte do document que descreve o tipo de documento utilizado e como o CSS vai se comportar. Veja o que a w3c diz sobre doctype “Escrito por nerds para nerds. E quando digo nerds, não quero dizer profissionais comuns da web como eu e você. Quero dizer aqueles que fazem o resto de nós parecermos como avós no primeiro dia em que recebem um email.” Há vários tipos de doctypes que você pode escolher, se você não conhece doctype, sugiro que você procure algo sobre ele na internet.

A linha que diz:

lang=”<?php echo $this->language; ?>”

@JennyPayneDZN

103

significa que a linguagem utilizada será determinada baseada na que está configurada para o site, em Configurações Globais (Global Configuration do Joomla). Vamos agora para a tag <head>

<head> <jdoc:include type="head" /> <!—Marcadores do head configurados pelo joomla, as metatags, ícone e feed são exemplos -->

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/meu_template/css/template.css" type="text/css" />  </head>

Vamos finalmente começar o <body>

<body>

<?php echo $mainframe->getCfg(‘sitename’); ?>  <jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="left" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="right" />

</body>

</html> Por enquanto nosso template está vazio, sem marcações HTML nem nada, mas se olharmos o código-fonte do seu site utilizando este template, veremos várias tabelas e classes que foram gerada pelo próprio Joomla.

Adaptando um template para Joomla

O processo de adaptar um template para Joomla é basicamente o mesmo de criar um do zero, tirando a etapa de estruturação do HTML. Abaixo, um layout padrão em html.



@JennyPayneDZN

104

Peguei o meu em:

http://www.freelayouts.com/templates/hotel#download

O primeiro passo é criar uma pasta na sua área de templates, nomeei a minha “Jennifer_joomla”

E dentro descompactei o zip. Há vários arquivos dentro deste zip, vamos organizá-lo, crie uma pasta chamada css e coloque o arquivo styles.css e renomeie para templates.css

Delete o arquivo examples.html

Crie um arquivo chamado index.php e cole o código do arquivo index.html, salve o arquivo

Crie um arquivo chamado templateDetails.xml

Nele, coloque as seguintes linhas:

<?xml version="1.0" encoding="iso-8859-1"?> <install version="1.5" type="template"> <name>jennifer_joomla</name> <version>1.0</version> <creationDate>April, 2009</creationDate> <author>Jennifer Payne</author> <authorEmail>[email protected]</authorEmail> <copyright>GPL</copyright> <authorUrl>http://jennifer-payne.blogspot.com</authorUrl> <description> Exemplo de template para a aula de adaptação de layouts do Joomla.</description> <files> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>css/template.css</filename> <filename>images/content-bg-left.png</filename> <filename>images/content-bg-right.png</filename> <filename>images/footerbg.png</filename> <filename>images/nav-bg.png</filename> <filename>images/nav-bg-left.png</filename> <filename>images/nav-bg-right.png</filename>



@JennyPayneDZN

105

<filename>images/titlebg.png</filename> </files> </install> Ajustes de CSS Como este template específico seu template não estava organizado dentro da pasta “CSS”, crie uma pasta, coloque seu arquivo template.css dentro, procure todas as imagens de background listadas e substitua os trechos: url(images/imagem_qualquer.jpg) por url(../images/imagem_qualquer.jpg), a adição de ../ diz ao css que virtualmente saia da pasta css, volte para a pasta raiz do site, para então conseguir entrar na pasta images. Este passo é muito importante para o funcionamento correto do layout.

Eu listei todas as imagens existentes na pasta imagem, além dos arquivos básicos que o Joomla pede. Defini módulos que podem ser utilizados. Agora vamos à substituição:

Subsititua as linhas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Free web template - hotel - by spyka Webmaster</title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head>

Por:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/template.css" type="text/css" /> </head>

Agora os itens de cabeçalho, metadados e links estão corretos, vamos começar a adaptar o body agora

@JennyPayneDZN

106

Note que o menu deste site fica somente no topo, então, neste caso acho melhor carregar o menu no módulo top

Vamos substituir a área de navegação

<div class="innernav"> <ul>  <li><a href="index.html">Home</a></li> <li><a href="examples.html">Examples</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li>  </ul> por:

<div class="innernav"> <jdoc:include type="modules" name="top" />

Substituindo o título:

<div class="innertitle">

 <h1><a href="#">hotel</a></h1> <h2>just another free template</h2> 

<div class="innertitle">

 <h1><?php echo $mainframe->getCfg(‘sitename’); ?> </h1> 

Agora, substitua todas as linhas que estão entre

@JennyPayneDZN

107

Por:



<jdoc:include type="component" /> <jdoc:include type="modules" name="user1" /> <jdoc:include type="modules" name="user3" /> 

Agora, vamos inserir mais módulos na área direita (sidebar), substitua o conteúdo entre as tags

 

Por:

 <jdoc:include type="modules" name="right" /> <jdoc:include type="modules" name="user2" /> 

Na class footer, você pode inserir o modulo footer, modificar o texto dentro do rodapé ou mantê-lo do jeito que está, como você utilizou o template feito por alguém, é justo manter o link para o site do mesmo.

Sua adaptação está pronta! Criar um template do zero é simplesmente criar um index.php comum, e inserir as tags do Joomla dentro de sua estrutura de marcação div ou table.

Estilizando os módulos

Aqui segue a parte mais legal na criação de templates para Joomla e foi extraída da tradução de Geciel Rangel Costa - http://gecielc.spaces.live.com/

Autor: Barrie North, www.compassdesigns.net (http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.html)

Mas aqui está a melhor parte!



@JennyPayneDZN

108

Se você examinar o arquivo modules.php verá todas as opções existentes para os módulos. É realmente fácil adicionar uma sua própria, isto faz parte das novas poderosas possibilidades incluídas na versão 1.5 do Joomla.

Dentro do arquivo module.php, o exemplo de xhtml se parece com o apresentado abaixo:

Você pode observar que é bem fácil fazer alterações.

Para desenvolver nosso template, nós colocaremos um módulo de estilo de “xhtml” em todos os

nossos módulos.

Observe que não podemos colocar esses estilos de módulos no <jdoc:include type=”component”

/>, pois esse não é um módulo. Especificando o módulo para uma apresentação CSS reduz um pouco o número de tabelas

Nosso template está pronto!



@JennyPayneDZN

109

Um pouco mais sobre templates...

Há várias coisas sobre templates que pouca gente sabe, que é o que te ajuda a tirar a “Carinha de Joomla” do site. Não que a carinha dele seja feia, mas, é interessante que nós possamos dar a nossa própria cara aos nossos projetos... Uma delas é que o Joomla atende a uma quantidade enorme de CSS padrão, que vem instalado com o joomla assim como as extensões que vimos antes. Nesta apostila eu cito a maior parte do CSS padrão do Joomla com suas finalidades

/*** Aqui está a lista descrita do CSS padrão do Joomla 1.5***/

/*APENAS O FRONTEND!!!*/

/*Descrito por Jennifer Payne, Recife*/

/*http://jennifer-payne.blogspot.com*/

/*Frontend*/

/*Generalizados*/

input.inputbox /*campos de form em geral*/

input.button/*só funciona se input.inputbox tiver algo*/

div.componentheading /*Título do Componente, utilizado para vários componentes*/

table.contentpane /*tabela em volta do .contentdescription*/

td.contentdescription /*Texto de descrição do Componente, também utilizado para vários componentes*/

table.contentpaneopen{/*este seletor aparece em vários módulos e áreas de componente, como autor do artigo e outros, cuidado ao modificar*/}

td.contentheading{ /*título de cada artigo do Joomla*/}

a.contentpagetitle{/*Link do título de página, caso esteja habilitado*/}

table.moduletable{/*Em torno de vários componentes e módulos*/}

span.article_separator /*Separador de um artigo para o outro*/

span.small/*por algum motivo desconhecido, o módulo login só funciona ao setar valor para ele, até vazio, só com as chaves...sem ele o modulo login não pegou background hauhauahuahauhauha

Geralmente é um valor ao lado de algum texto, no componente pesquisa é a numeração de cada resultado encontrado.



@JennyPayneDZN

110

*/

a.category{/*Links de categoria*/}

td.sectiontableheader{/*cabeçalho faz funcionar as linhas de opções numa tabela com linha 1 e linha 2*/}

td.sectiontableentry1{/*primeira linha de opções, só funciona com a sectiontableheader, só precisa ter a abertura e fechamento das aspas*/}

td.sectiontableentry2{/*segunda linha de opções, só funciona com a primeira*/}

td.sectiontablefooter{/*Aparentemente um rodapé complementar para essas tabelas, não consegui modificar*/}

/*Esta lista acima são a lista dos CSS generalizados, ou seja, que pertencem a vários componentes e módulos, se você modificar para um deles, modifica para todos. Como resolver isso? Simples! Você pode atribuir valores nos módulos e menus na parte “Page suffix” que fica ao lado direito da área de parâmetros de módulos e menus, assim, essas tags generalizadas aplicadas em um módulo. Por exemplo, é adicionada apenas no módulo ao qual ela pertence, por exemplo, se no adiciono em um módulo o suffix _Jenn, naquele módulo, o css “table.moduletable” passaria a se chamar “table.moduletable_Jenn”, a gente pode utilizar também um artifício que é o de adicionar um espaço antes do nome e ter então, nosso módulo atenderia duas classes. Ex: aplicando “ Jenn”, no lugar de _Jenn, nosso css seria:

Isso significa que além de o padrão CSS definido para “table.moduletable” seria atribuído também os valores instituídos para a classe .Jenn*/

/* FILE: components\com_contact\views\contact\tmpl\default.php */

form#selectForm

/*Não consegui alterar todas as áreas*/

/* FILE: components\com_contact\views\contact\tmpl\default_form.php */

form#emailForm/*Formulário de contato*/

input#contact_name /*Entrada de texto do nome*/

label#contact_emailmsg /*E-mail address*/

input#contact_email /*Entrada de texto para email*/

input#contact_subject /*Entrada de texto para assunto da mensagem*/

label#contact_textmsg /*Texto do Enter your Message*/

textarea#contact_text /*Text area da mensagem*/



@JennyPayneDZN

111

input#contact_email_copy /*checkbox de enviar cópia do email para si*/

form.form-validate

div.contact_email

input.inputbox

input.required

input.validate-email

textarea.inputbox

textarea.required

button.button

button.validate

/* FILE: components\com_content\helpers\icon.php */

span.hasTip

/* FILE: components\com_content\models\article.php */

hr#system-readmore /*Separador entre texto introdutório (que aparece no leia mais...) e o resto do artigo (não é ncessário criar atributos para ele)*/

/* FILE: components\com_content\views\archive\tmpl\default.php */

form#jForm

input.inputbox

button.button

/* FILE: components\com_content\views\archive\tmpl\default_items.php */

ul#archive-list

div#navigation

li.row



@JennyPayneDZN

112

h4.title

h5.metadata

span.created-date

span.author

div.intro

/* FILE: components\com_content\views\article\tmpl\default.php */

div.contentpaneopen_edit

td.buttonheading

td.createdate

td.modifydate

a.readon

/* FILE: components\com_content\views\article\tmpl\form.php */

input#title

input#created_by_alias

input#publish_up

input#publish_down

textarea#metadesc

textarea#metakey

table.adminform

td.key

input.inputbox

img.calendar

textarea.inputbox



@JennyPayneDZN

113

/* FILE: components\com_content\views\article\tmpl\pagebreak.php */

input#title

input#alt

td.key

/* FILE: components\com_content\views\category\tmpl\blog.php */

table.blog

td.article_column

div.blog_more

/* FILE: components\com_content\views\category\tmpl\blog_item.php */


td.buttonheading

td.createdate

td.modifydate

a.readon

/* FILE: components\com_content\views\category\tmpl\blog_links.php */

a.blogsection{/*Muda os links dos itens listados*/}

/* FILE: components\com_content\views\category\tmpl\default_items.php */

input.inputbox

td.sectiontableheader

td.sectiontableentry1


td.sectiontablefooter

/* FILE: components\com_content\views\frontpage\tmpl\default.php */



@JennyPayneDZN

114

table.blog

td.article_column

div.blog_more

/* FILE: components\com_content\views\frontpage\tmpl\default_item.php */


td.buttonheading

td.createdate

td.modifydate

a.readon

/* FILE: components\com_content\views\frontpage\tmpl\default_links.php */

a.blogsection

/* FILE: components\com_content\views\section\tmpl\blog.php */

table.blog

td.article_column

div.blog_more

/* FILE: components\com_content\views\section\tmpl\blog_item.php */


td.createdate

td.modifydate

a.readon

/* FILE: components\com_content\views\section\tmpl\blog_links.php */

a.blogsection

/* FILE: components\com_poll\views\poll\tmpl\default.php */



@JennyPayneDZN

115

form#poll/*Em torno do comp Poll, ñ consegui modificar*/

/* FILE: components\com_poll\views\poll\tmpl\default_graph.php */

table.pollstableborder{/*em torno do comp enquete*/}

th.sectiontableheader{/*Título da enquete*/}

td.sectiontableentry0/*qtd de voto de uma opção*/

td.sectiontableentry1/*texto da opção*/

td.smalldark{/*Texto number of votes*/}

/* FILE: components\com_search\search.php */

span.highlight/*Intro dos textos encontrados na pesquisa, não consegui modificar*/

/* FILE: components\com_search\views\search\tmpl\default_error.php */

table.searchintro/*em torno do texto Search Keyword, quando você já efetuou a pesquisa, não consegui modificar*/

/* FILE: components\com_search\views\search\tmpl\default_form.php */

input#search_searchword /*não consegui modificar*/

input#area_{VALUE} /* Value is set programatically */

table.contentpaneopen/*Em torno desde Search keyword até Ordering*/

input.inputbox/*campo de texto do search*/

#searchForm/*Formulario em torno do comp search*/

/* FILE: components\com_search\views\search\tmpl\default_results.php */

table.searchintro

/* FILE: components\com_user\views\login\tmpl\default_logout.php */

#form-login/*só funciona com o span.small com alguma coisa como span.small{}*/

table.contentpane/*wrapper do conteúdo, válido para diversos componentes*/

input.button/*botão logout, só funciona em conjunto com table.contentpane*/



@JennyPayneDZN

116

/* FILE: components\com_user\views\register\tmpl\default.php */

form#josForm/*não consegui alterar*/

/*Campos de preenchimento ao registrar-se, alguns campos funcionam se inpu.inputbox tiver atributos e outros se input.required tiver atributos*/

label#namemsg

input#name

label#usernamemsg

input#username

label#emailmsg

input#email

label#pwmsg

input#password

label#pw2msg

input#password2

form.form-validate

div.componentheading

table.contentpane

input.inputbox /*Alguns campos só aceitam CSS se ele tiver atributos*/

input.required

button.button/*botão Register, só funciona se .input.required tiver algo nele*/

button.validate/*não consegui alterar*/

/* FILE: components\com_user\views\register\tmpl\default_message.php */




@JennyPayneDZN

117

div.message

/* FILE: components\com_user\views\remind\tmpl\default.php */

input#email


form.josForm

form.form-validate

table.contentpane

label.hasTip

input.required


button.validate

/* FILE: components\com_user\views\reset\tmpl\complete.php */

input#password1

input#password2


form.josForm

form.form-validate

table.contentpane

label.hasTip

input.required

input.validate-password

button.validate



@JennyPayneDZN

118

/* FILE: components\com_user\views\reset\tmpl\confirm.php */

/*Não consegui encontrar os abaixo, parece ser de validação quando você reseta os valores para um usuário*/

input#token


form.josForm

form.form-validate

table.contentpane

label.hasTip

input.required

button.validate

/* FILE: components\com_user\views\reset\tmpl\default.php */

/*Não consegui encontrar os abaixo, parece ser de validação quando você altera um usuário*/

input#email

form.josForm

form.form-validate

table.contentpane

label.hasTip

input.required


button.validate

/* FILE: components\com_user\views\user\tmpl\default.php */

div.componentheading /*Título de todos os componentes com a opção "show title"*/

/* FILE: components\com_user\views\user\tmpl\form.php */



@JennyPayneDZN

119

input.inputbox/*todos os campos de user details*/

input#name/*Só funciona se houver parâmetro no inputbox*/

input#email/*Só funciona se houver parâmetro no inputbox*/

input#username/*Só funciona se houver parâmetro no inputbox*/

input#password/*Só funciona se houver parâmetro no inputbox*/

input#password2/*Só funciona se houver parâmetro no inputbox*/

button.button /*Só funciona se houver parâmetro no inputbox*/

/* FILE: components\com_weblinks\views\categories\tmpl\default.php */




a.category {/*Links do comp Category list layout*/}

span.small{/*Mostra a quantidade de links numa categoria de links*/

}

/* FILE: components\com_weblinks\views\category\tmpl\default.php */




/* FILE: components\com_weblinks\views\category\tmpl\default_items.php */

td.sectiontableheader



td.sectiontablefooter



@JennyPayneDZN

120

/* FILE: components\com_weblinks\views\weblink\tmpl\form.php */

form#adminForm

input#jformtitle

input#jformurl

textarea#jformdescription


input.inputbox

textarea.inputbox

/* FILE: components\com_wrapper\views\wrapper\tmpl\default.php */

div.contentpane


/* FILE: modules\mod_banners\tmpl\default.php */

div.bannergroup{/*container do mod banner*/

}

div.bannerheader{/*texto do header do mod banner*/}

div.banneritem{/*imagem do banner do mod banner*/

}

div.clr

div.bannerfooter{/*Texto de footer do mod banner*/

}

/* FILE: modules\mod_breadcrumbs\helper.php */

a.pathway/*link dentro do mod breadcrumb*/

/* FILE: modules\mod_breadcrumbs\tmpl\default.php */



@JennyPayneDZN

121

span.breadcrumbs {/*dentro do mod breadcrumbs*/

}

span.pathway{/*dentro do mod breadcrumbs*/

}

/* FILE: modules\mod_feed\tmpl\default.php */

ul.newsfeed /*lista do mod newsfeed*/

/* FILE: modules\mod_latestnews\tmpl\default.php */

ul.latestnews /*lista do mod Latest News*/

li.latestnews /*item de lista do mod Latest News*/

a.latestnews /*link do item de lista do mod Latest News*/

/* FILE: modules\mod_login\tmpl\default.php */

input#mod_login_username, input#mod_login_password, input#mod_login_remember{/*Não consegui encontrar*/}

input.inputbox{/*campo de texto do mod login*/}

input.button{/*Botão login do mod login*/

}

p#form-login-remember, p#form-login-username, p#form-login-password{/*texto login, password, Remember me*/}

/* FILE: modules\mod_mainmenu\helper.php */

li#{ITEM ID} /* Value is set programatically */

span.separator{ /*Não descobri*/}

/* FILE: modules\mod_mainmenu\legacy.php */

ul#mainlevel{/*lista do mod main menu no modo legacy*/}

ul#sublevel{/*sub-nível do menu no modo legacy*/}



@JennyPayneDZN

122

/* FILE: modules\mod_mostread\tmpl\default.php */

ul.mostread{/*lista do mod. most read*/}

li.mostread{/*item de lista do mód. most read*/}

a.mostread{ /*Links do módulo most read*/}

/* FILE: modules\mod_newsflash\tmpl\_item.php */

table.contentpaneopen{

/*este seletor aparece em vários módulos e áreas de componente, como autor do artigo e outros, cuidado ao modificar*/

}

td.contentheading{ /*título de cada artigo do Joomla*/}

a.contentpagetitle{

/*Link do título de página, caso esteja habilitado*/

}

/* FILE: modules\mod_newsflash\tmpl\horiz.php */

table.moduletable{

/*tabela mãe do módulo newsflash quando o parâmetro é na horizontal, não consegui modificar*/

}

/* FILE: modules\mod_newsflash\tmpl\vert.php */

span.article_separator{

/*separador colocado após um artigo*/

}

/* FILE: modules\mod_poll\tmpl\default.php */



@JennyPayneDZN

123

input#voteid{VOTE ID NUMBER} /* Valor configurado pelo Joomla, não mude */

table.poll{ /*tabela onde o módulo enquete fica dentro,muda a cor título da enquete e texto dentro dela*/

}

table.pollstableborder{ /*tabela em volta das opções da enquete e do resultado que aparece no componente enquete após votar*/

}

input.button{ /*botões da enquete*/

}

/* FILE: modules\mod_related_items\tmpl\default.php */

ul.relateditems{

/*muda os parametros de lista do módulo Related Articles*/

}

/* FILE: modules\mod_search\helper.php */

input#mod_search_searchword{

/*parece ser para mudar os atributos da palavra dentro da caixa de pesquisa, porém não consegui modificar por ele, mudei no input.inputbox*/

}

input.inputbox/*Muda o input do módulo search, incluindo o texto dentro*/

input.button /*muda o botão do módulo search (quando ativo)*/

/* FILE: modules\mod_search\tmpl\default.php */

div.search

/*envolve o módulo search, não consegui modificar*/

/* FILE: modules\mod_sections\tmpl\default.php */

ul.sections /*muda os parametros de lista do módulo Sections*/



@JennyPayneDZN

124

.moduletable h3{ /*Muda o título dos módulos envolvidos pela class moduletable*/

}

/* Dica: quando você determina um sufixo para um módulo, o mesmo o adota como sufixo em qualquer classe que ele possua. Ex: Se adicionasse sufixo Secoes no módulo sections o CSS ul.sections passaria a se chamar ul.sectionsSecoes enquanto seu moduletable passaria a se chamar moduletableSecoes */

/*FIM!*/

Essa lista foi extraída, modificada e testada da lista contida no site http://joomlatp.com/joomla-css/joomla-1.5-default-CSS-classes-list.html

Houveram alguns itens que não consegui modificar. A melhor maneira de se saber quais classes são aplicadas no seu módulo/componente ainda é verificar o código-fonte gerado pelo seu Joomla quando os mesmos são chamados, mas eu encontrei alguns “bugs”, que estão descritos, outras classes não consegui modificar, mesmo a encontrando no código gerado, outras só funcionam com a ativação de outra classe. Explorando os mesmos e você pode se aproveitar desta lista para agilizar seu trabalho e tirar a carinha de Joomla do seu site.

Colapso de Colunas

Há duas maneiras do Joomla contar se há módulos em uma certa área do site, para expandir o componente para toda área caso não haja módulos aplicados naquela área. Tutorial providenciado pela própria equipe do Joomla, ainda em inglês.

http://docs.joomla.org/Tutorial:More_on_Joomla!_modules

O ruim é que utiliza códigos php e muita gente não sabe ou quer trabalhar com o php, então, aqui vai uma solução extra. Você pode simplesmente criar um outro template baseado no anterior, remover as área de carregamento de módulos e colunas, ajustar o css sem as colunas e instalar este novo template, aplicando-o apenas nas áreas onde não haverão módulos!

Eis como fazer isso:

• Instale o template com colunas e o template sem colunas • Vá até Extensions -> Template Manager (Extensões -> Administrar layout) • Torne o template que será utilizado pela maioria dos menus como padrão • Em seguida, selecione no radio button o template sem as colunas e clique no botão editar do lado

superior direito • Do lado esquerdo, selecione o radio button “Select from List ” e utilizando o SHIFT ou CTRL selecione

quais links do menu este template será vinculado



@JennyPayneDZN

125

• Salve • Seu template sem colunas agora tem um sinal verde na linha “Assigned” que mostra que ele não é

padrão, porém é utilizado por alguns menus do site.

Estilos dos módulos no Joomla.

Extraído e traduzido da documentação do Joomla em :

http://docs.joomla.org/Tutorial:More_on_Joomla!_modules

A saída de módulos podem ser extendidos no declaração do módulo <jdoc:include /> adicionando por adicionar o atributo estilo, style=“nomedoestilo”, onde o nome do estilo corresponde ao estilo “chrome” utilizado para ficar em torno do módulo.

Para mais informações veja <jdoc:include /> Statements e What is module chrome?

Chrome Type

• None

Este é o padrão caso nenhum estilo seja adicionado ao <jdoc:include />. Nenhum CSS adicional é adicionado. Título do módulo NÃO é incluído no frontend independente do status de habilitado.

• Table

.moduletable class é aplicado a um elemento <table> sem largura que envolve a saída do módulo. Habilita <th> tags em torno do módulo título, se habilitado.

• Horz

Nenhum estilo adicional ao CSS é adicionado. A saída é a mesma que o estilo “Table” acima, mas também envolve a saída na segunda tabela de 100% de largura.

• XHTML

.moduletable class aplicada à uma <div> que envolve a saída do módulo. <h3> tag em volta do título title, se habilitado.

• Rounded



@JennyPayneDZN

126

.module class é aplicada a <div> mais externa.A saída do módulo é envolvida com 4 layers de <div>s que permitem bordas arredondadas.<h3> tag em volta do título title, se habilitado.

• Outline

Classe .mod-preview é aplicada a <div> mais externa.

Classe .mod-preview-info

Classe .mod-preview-wrapper é aplicada a <div> mais interna que envolve o conteúdo do módulo



@JennyPayneDZN

127

Capítulo 06

Enviando seu site para um servidor

Fazendo Backup no Joomla!



@JennyPayneDZN

128

Agora que seu site já tem seu novo visual, conteúdos escritos e extensões instaladas, já é SEF e está tudo funcionando perfeitamente, está na hora de colocar seu projeto no ar!

Enviando seu site para um servidor

Sempre que possível, trabalhe com seu Joomla no seu servidor local (seu localhost) e após instalar tudo, configurar e preparar corretamente seu website, envie-o para a web. O processo é simples e este tutorial passo-a-passo pode ser executado em sua própria máquina, simulando o envio para o servidor em sua própria máquina. Caso você esteja em um servidor de hospedagem na web, você precisará obter os seguintes dados: Nome de usuário e senha do ftp da sua conta no servidor Nome de usuário e senha do MySQl do seu site Um banco de dados MySql Ative seu servidor local através do Xampp ou de outro simulador onde seu site em Joomla está instalado. No seu navegador, entre em localhost/phpmyadmin (caso seu servidor não seja localhost e seu gerenciador não seja o MySQL, inicie o seu equivalente) Crie a Base de Dados onde você enviará seu site pronto (no seu próprio localhost para testes ou no servidor web)



@JennyPayneDZN

129

Marque as opções conforme a figura abaixo e clique em executar

Salve o arquivo em alguma pasta do seu computador Crie um novo banco de dados com qualquer nome em seu servidor web (pode ser seu localhost, como vimos no primeiro capítulo, caso você não esteja utilizando um servidor web externo)

Note que uma mensagem de sucesso foi dada e agora o banco vazio tem a mesma quantidade de tabelas do banco original. Agora, está na hora de você re-configurar o seu arquivo configuration.php. Abra o arquivo com algum editor de texto. Ex: Bloco de Notas



@JennyPayneDZN

130

Neste arquivo, há várias variáveis escritas em php que definem a configuração do seu Joomla, você deve alterar as seguintes linhas, adicionando as novas configurações do seu site: Seu novo caminho de arquivo de log, de: var $log_path = 'C:\\xampp\\htdocs\\seusite\\logs'; Deve ficar assim: var $log_path = '/home/seila/seusite.com/site/htdoc s/logs'; Sua pasta de arquivos temporários: var $tmp_path = 'C:\\xampp\\htdocs\\seusite\\tmp'; Vai ficar assim: var $tmp_path = '/home/seila/seusite.com/seusite/ht docs/tmp'; Agora, as configurações do seu banco: var $host = 'localhost'; var $user = 'root'; var $db = 'seu_banco'; var $password = ''; $host -> O endereço do seu servidor, quando você fecha um contrato com uma empresa de hospedagem, eles passam esse seu endereço $user -> Usuário do MySQL também passado por eles, ou configurado por você mesmo através de CPanel $db -> Nome do seu banco de dados $password -> senha do seu banco Finalmente, a última etapa é enviar o seu Joomla para o servidor.

Conhecendo FTP FTP ou File Transference Protocol existe desde a origem da internet e é utilizado para enviar e receber arquivos hospedados na web. Através dele é que você vai enviar os arquivos utilizados em seu site para o servidor web, para quem tem o Xampp instalado, há a opção de instalar o Filezilla através dela, como serviço, mas ainda sim, aconselho a instalar separadamente, por ser mais fácil de configurar. Proceda da seguinte forma:

1. Faça o download de alguma ferramenta FTP, caso você não possua, há muitas ferramentas muito boas FireFTP, é um programa FTP instalado em seu navegador firefox ou faça o download do filezilla em http://filezilla-project.org/download.php

2. Instale 3. Abra o Filezilla 4. Clique em Arquivo -> Gerenciador de Sites 5. Novo site 6. Configure o seu site no programa de acordo com as informações passadas pela empresa de

hospedagem



@JennyPayneDZN

131

Você agora verá a estrutura de diretórios do seu site no servidor. Quando você faz assinatura com um servidor web, eles te dão as diretrizes de onde seus arquivos devem ficar. Geralmente em www, htdocs ou public_html. No lado esquerdo, há a estrutura de diretórios no seu computador, encontre a pasta onde está o seu site. Provavelmente algo como C:/Xampp/htdocs/site_em_joomla Selecione todos os arquivos do seu site em joomla e através do botão direito clique em “upload” Tenha paciência, vá dar um passeio, pois demorará algumas horas, porque o Joomla tem milhares de arquivos. Após finalizada esta etapa, é só digitar o endereço do seu site e lá está! Para entrar na área administrativa, adicione o /administrator no final do endereço exatamente como fazíamos localmente.



@JennyPayneDZN

132

Espero que vocês tenham gostado de aprender Joomla! de uma maneira prática e fácil. Visitem meu blog em http://jennifer-payne.blogspot.com para mais tutoriais e informações importantes sobre Joomla!

Apostila de Joomla_nova

Documents

Transcript of Apostila de Joomla_nova