apostila completa curso joomla

APOSTILA DO CURSO DESIGN PARA JOOMLA!

Este material protegido pela lei do direito autoral. Todos os direitos reservados. Nenhuma parte desta publicao pode ser reproduzida, transmitida, modificada, distribuda, por

qualquer meio, seja eletrnico, mecnico ou fotocpia, sem expressa autorizao do autor Bruno vila ou da empresa vila Comunicao.

Esta apostila faz parte integrante do Curso Online Design para Joomla e no pode ser comercializado.

01Instalando um Servidor Local e o Joomla 1.5Bem amigos da Rede Globo, voltamos agora em definitivo para o incio de nosso curso. A partir de agora vamos entrar no mundo encantado do Sr.Joomla, o CMS camarada.

Nosso objetivo nesse primeiro momento instalar um servidor local, onde voc poder testar o seu template para Joomla com maior rapidez. Imagine se voc tivesse que enviar o seu html e css para um servidor toda vez que fizer uma mudana? Demorado, no? Pois com o servidor local voc ir fazer o html e css e test-lo na hora.

A misso transformar seu Windows num servidor web como qualquer outro. Devemos instalar o Apache, o MySQL e o PHP em sua mquina. Vou explicar o que cada um desses meninos fazem:

Apache: um software gratuito, considerado o mais bem sucedido servidor web gratuito do mundo. Atravs desse software que o seu computador se transformar num servidor web como qualquer outro. Voc poder rodar sistemas em php por exemplo e ver a coisa funcionando em seu navegador.

MySQL: trata-se de um sistema de gerenciamento de banco de dados que utiliza a linguagem SQL. Sendo mais direto, ele que vai armazenar as notcias, usurios e todas as informaes que voc incluir no Joomla. Seria uma espcie de armrio virtual. Quando o Joomla quiser puxar aquela notcia que voc incluiu ontem, ele ir procurar nas gavetas do MySQL.

PHP: famosa linguagem de programao. O responsvel pelo funcionamento de todas as engenhocas do Joomla. Instalando o PHP na sua mquina, os sistemas de atualizao, consulta ao MySQL e todos os outros componentes do Joomla, assim como ele prprio, podero funcionar tranquilamente realizando todas as suas operaes.

Existem duas formas de instalar esses trs sistemas em seu computador.

1. Instalando um por um, caso voc goste de jogar no modo avanado ou seja sadomasoquista.

2. Utilizando o Wampserver

Eu prefiro o item nmero 2. O Wampserver instala esses trs sistemas em sua mquina com apenas alguns cliques, fcil, rpido e prtico. Em nossa vdeo aula mostro como instalar o Wampserver, d uma olhadinha l. ;)

Aqui est o link de download do WampServer: http://www.wampserver.com/en/download.php

Agora, caso o Wampserver no funcione, a o negcio apelar para o modo avanado do jogo e tentar instalar manualmente cada sistema. Neste tutorial escrito por Marcos Elias voc ter todas as instrues de como instalar o Apache, PHP e MySQL separados s e m a u x l i o d o W a m p s e r v e r :

Aps a instalao do servidor, abra seu navegador. Digite na URL simplesmente localhost. Veja se abriu uma pgina semelhante a pgina abaixo:

http://www.guiadohardware.net/tutoriais/apache-php-mysql-windows/

2Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

01Instalando um Servidor Local e o Joomla 1.5Se apareceu, timo, seu servidor est funcionando. Se no apareceu, ocorreu algum problema na instalao do servidor. Nesse caso o melhor tentar a instalao de outra maneira.

Caso voc tenha instalado o servidor sem utilizar o Wampserver, a pgina que ir aparecer ser algo semelhante a isso:

Agora, com o servidor funcionando, vamos instalar o Joomla 1.5 em sua mquina!

Instalando o Joomla 1.5

Chegou a hora de instalar o Joomla em sua mquina. Na vdeo-aula mostro o passo-a-passo da instalao mas aqui vai um guia rpido para consulta.

Chegou a hora de instalar o Joomla em sua mquina. Na vdeo-aula mostro o passo-a-passo da instalao mas aqui vai um guia rpido para consulta.

1. Crie uma pasta para o Joomla. Abra seu gerenciador de arquivos, v at \ (ou na pasta onde voc instalou o seu Wampserver) e crie uma pasta. Essa pasta pode pode ter o nome que quiser, mas por conveno vamos colocar joomla. Ficar algo como \wamp\www\joomla;

2. Toda pasta criada dentro de wamp/www poder ser acessada pelo navegador, atravs da seguinte url:

;

3. Caso voc instale o Apache sem ser via Wampserver, todas as pastas colocadas dentro de \apache\htdocs podero ser acessadas pelo navegador atravs da url:

;

4. Baixe o Joomla Verso 1.5 Full Package no seguinte endereo: ;

5. Descompacte todo o contedo do zip na pasta joomla que voc criou dentro de wamp/www (exemplo: wamp/www/joomla);

6. Abra o navegador e acesse ;

wamp\www

http://localhost/nome-da-pasta

http://localhost/nome-da-pasta

http://www.joomla.org/download.html

http://localhost/joomla

7. Aparecer a tela de instalao. Escolha o idioma e clique em Next/Prximo.

8. Na tela seguinte ir aparecer um checklist mostrando os componentes instalados no servidor. Clique em Next/Prximo;

9. Aparecer ento o texto da licena de uso. Clique em Next/Prximo


01Instalando um Servidor Local e o Joomla 1.510. Configurao da base de dados. Selecione o tipo de base MySQL, o nome do host localhost, nome de usurio root e em nome de base de dados coloque joomla. Clique em Next/Prximo;

11. Configurao de FTP. Em localhost no preciso configurar. Em caso de servidor remoto, coloque caminho, login e senha de FTP. Clique em Next/Prximo;

12. Configuraes finais, coloque o nome do site, email, crie uma senha de administrador e guarde muito bem pois se voc esquecer vai ser bem complicado saber novamente. Aproveite e instale um contedo de exemplo, no boto logo abaixo. Depois clique em Next/Prximo;

13. Pronto. Aparecer a tela final parecido com a tela abaixo:

14. No gerenciador de arquivos, apague a pasta installation que fica dentro de wamp/www/joomla. Se voc no apagar, no conseguir entrar na administrao do Joomla:

15. Para entrar na administrao, abra o navegador e coloque o endereo

. Aparecer a tela abaixo pedido o usurio (admin) e senha:

http://localhost/joomla/administrator


01Instalando um Servidor Local e o Joomla 1.516. Aps o login aparecer a tela de administrao semelhante a tela abaixo:

Na vdeo aula mostro alguns detalhes do funcionamento do Joomla. Na prxima aula colocarei algo mais sobre isso em texto, apresentando um tour sobre o Joomla. No decorrer do curso iremos ver algumas funes do Joomla com mais detalhes, aguarde!

Para o alto e Avante!


02Um Tour pelo Joomla!Agora que voc j instalou o Joomla em sua mquina, vamos ver algumas funes importantes do Joomla que voc ir utilizar bastante nas aulas seguintes.

O Joomla dividido em dois ambientes:

Front-End: a parte da frente, o ambiente onde todos os visitantes iro ver. Enfim, o site propriamente dito.

Back-End: so os bastidores, o que existe atrs do palco. a parte de administrao do site onde apenas o administrador do site tem acesso.

Front-End

Posies

O Front-End do Joomla dividido em diversas reas, chamadas de posies. Essas posies so determinadas por voc, webdesigner, na hora de contruir o layout, atravs de tags especficas que veremos mais a frente.

Veja a seguir um exemplo demonstrando as posies do layout default do Joomla.

Essas posies so importantes pois atravs delas voc poder dizer ao Joomla em qual posio dever aparecer a enquete ou qual o local onde dever aparecer o menu principal.

Menus

Todo Joomla vem com 4 menus instalados. So eles: Main Menu, Top Menu, Other Menu e User Menu. Voc poder criar outros menus, atravs do back-end, em Menus > Administrar Menu

Main MenuO Main menu o menu principal so site. Este menu deve aparecer exatamente na mesma posio em cada pgina do site, afinal, um item importante na navegao. Ele no pode ser apagado pois nele esto


02Um tour pelo Joomla!configuraes importantes da primeira pgina.

Top Menu.O top menu recomendado para ser utilizado no topo das pginas oferecendo ao usurio acesso rpido aos itens mais importantes do site.

Other MenuUm menu com links adicionais, que podero ser para pginas do site ou links externos.

User MenuEste menu s aparecer depois de ser feito login por usurios registrados. Nele voc poder colocar links relacionados aos detalhes do usurio, mudana de senha e a opo de deslogar-se.

Contedo

Compreende a parte central do site onde todo o contedo de pginas e notcias devero aparecer. Alm disso no contedo onde ficar a primeira pgina ( First/Front Page )

First/Front PageAtravs da primeira pgina possvel mostrar o texto-chamada de uma notcia contendo data, nome de autor, categoria da notcia, imagem e um leia mais. Sempre aparecer as notcias organizadas por ordem de data. A mais recente aparece como principal.


02Um tour pelo Joomla!Mdulos e Componentes

Componentes so funes adicionais ao Joomla. Alguns componentes j vem instalados como o gerenciador de banners e enquetes. Mas voc poder adicionar novas funes ao Joomla, bastando instalar novos componentes, normalmente criados por terceiros. Esses componentes podem ser encontrados no site do Joomla em . Alguns so gratuitos, outros no.

Mdulos so auxiliadores dos componentes. Servem para mostrar determinadas informao gerada pelos componentes ou ento funciona como um mdulo de interao entre o usurio e o componente. So elementos capazes de serem exibidos nas posies que voc escolher. O Joomla j traz alguns mdulos como a enquete e rea de login. Mdulos criados por terceiros podem ser instalados no Joomla onde voc poder encontrar tambm em

Back-End

Para acessar o back-end do Joomla basta acessar o [Nome de Domnio]/administrador/. No nosso caso seria

Atravs da administrao do Joomla, voc pode personalizar o seu site, fazer alteraes, e preench-lo com contedo. Joomla possui uma interface semelhante a qualquer software de Windows. Isto s possvel graas a uma bem-sucedida combinao de JavaScript e AJAX. Assim como no Front-End, a administrao do Joomla constituda por diferentes elementos. Os menus esto no topo, bem como, do lado direito, temos trs elementos: um link para seu site ( Pr-Visualizar ), um aviso de recebimento de mensagens do sistema e um aviso de quantas pessoas esto conectadas no seu site.

http://extensions.joomla.org/

http://extensions.joomla.org/

http://localhost/joomla/administrator

Abaixo da barra de menu superior temos a barra de ferramentas. Do lado esquerdo temos o ttulo e do lado direito temos alguns cones que acendem ao passar o mouse.

A tabela a seguir mostra as principais funes desses cones:

Publicar O elemento selecionado publicado no front-end.

Despublicar O elemento selecionado sai do front-end mas no apagado da administrao.

Arquivo O elemento escolhido arquivado

Novo Criao de um novo elemento.

Editar Edio de mdulo, componente ou template.

Excluir O elemento selecionado excludo.

Lixeira O elemento selecionado colocado na lixeira.

Restaurar O elemento selecionado resgatado da lixeira

Mover O elemento selecionado movido para outra seo ou categoria.

Copiar O elemento selecionado copiado para outra seo ou categoria.

Salvar O elemento selecionado salvo e a tela fechada.

Aplicar As alteraes so guardadas e a tela continua aberta.

Cancelar A edio terminada sem qualquer alterao a ser salvo.

Pr-Visualizao

Visualize o site, notcia ou pgina antes de salvar ou publicar.

Enviar O arquivo escolhido enviado para o servidor.

Ajuda Voc redirecionado para a ajuda do Joomla atravs do site do prprio Joomla

Padro O elemento selecionado passa a ser o padro.


03Criando um Layout para Joomla!Finalmente vamos comear a criar o nosso primeiro template para Joomla. Vamos comear com um layout fcil, de formas simples. Optei por uma estrutura bsica de 3 linhas e 3 colunas, formas retas, quase que um wireframe. O objetivo criar um layout bsico, porm no muito diferente, para que nas prximas aulas possamos recort-lo e a sim mont-lo, fazendo a adaptao para o Joomla. Dessa maneira poderei explicar alguns detalhes que somente com o recorte e montagem terei a oportunidade de mostrar.

Depois de passarmos por todo o processo de recorte e montagem e ficar claro alguns pontos a respeito desses processos, faremos layouts um pouco mais desafiadores com o objetivo de aproveitar os recursos do Joomla mas sem deixar claro para o visitante que ali por trs existe um Joomla. ;)

No vdeo mostrarei o passo a passo da criao do layout. Vocs vero que utilizo um wireframe como uma pequena cola. Nesse wireframe j determino onde ficaro todas as posies do Joomla no layout. O wireframe que montei foi exatamente esse aqui:

Note que o nome das caixas correspondem as posies que encontremos no nosso Joomla 1.5 No vdeo voc ir notar como esse wireframe ser muito til para me guiar.

Entendendo o Gerenciamento de Temas

Continuando o tour da aula passada pelas funes do Joomla que ns webdesigners iremos utilizar bastante em nosso curso, ficou faltando apresentar uma rea muito importante: o gerenciamento de temas.

Todos os arquivos de template podem ser instalados diretamente pela funo Instalar do Joomla, do mesmo jeito que se instala um componente ou plugin. Sobre isso iremos ver mais na frente. Ao serem instalados, os arquivos ficam na pasta templates. Um exemplo: se o seu tema se chama "planetaxuxa", ento a pasta onde ficaro os arquivos do template ser "[pasta do Joomla] / Templates / planetaxuxa".

Na pasta do template voc ir encontrar normalmente 3 pastas:

css: onde ficam armazenadas as folhas de estilo CSS

html: contm o html principal (index.html) mas normalmente o html fica na pasta raiz do template

images: todas as imagens do template estaro nessa pasta.

O arquivo index.php contm toda a estrutura do site. O template.css tem tudo que se refere a parte visual do site. A partir desses dois arquivos, todas as pginas do site sero geradas automaticamente.

Tanto o arquivo index.php como o template.css podem ser acessados e editados sem a necessidade de FTP, atravs do gerenciamento de temas.


03Criando um layout para Joomla!Iremos trabalhar bastante com o gerenciamento de temas. Aguarde!

Na prxima aula teremos a difcil tarefa de recortar e montar o layout que foi apresentado hoje. Se voc no tem muita experincia em CSS, prepare-se pois iremos encarnar Clodovil e Ronaldo Esper para trabalhar muito com estilos. Cores, tamanhos, medidas, sabe como ... ;)


03Criando um layout para Joomla!


04Recortando o LayoutContinuamos nossa saga de criar e montar um layout do zero especialmente para o Joomla. Na aula de hoje iremos recortar e montar utilizando XHTML e CSS o layout da aula passada. Ser bem trabalhoso mas nada que em 1 hora no se resolva.

Dessa vez irei mostrar o recorte e montagem puro e simples, no XHTML utilizando apenas cdigo. Se voc j domina o CSS, maravilha, voc ir tirar de letra. Ah! Voc no sabe muuuito de CSS? Mas que bom, pois a idia dessa aula despertar dentro de voc aquela vontade de se aprofundar no CSS, mostrando todo o poder que ele tem.

Prestem bastante ateno nessa aula pois trabalharemos bastante com esses recursos. No iremos falar de Joomla nesse primeiro momento, apenas de cdigo. Na aula que vem pegaremos esse mesmo layout e adaptaremos ao Joomla, onde irei mostrar o que interessa e no interessa para o nosso querido Joomlo, o CMS camarada.

Relembrando o CSS

Fui l no curso PSD para HTML & CSS procurar algumas informaes importantes que podem ser aproveitadas nessa aula. Trata-se de um pequeno resumo-o-o do CSS para voc. Trago tambm alguns links importantes que podem lhe ajudar na rdua tarefa de construir uma folha de estilo. L vai!

No se esquea! O contedo presente nas CSS se chamam regras. Cada regrinha ir fornecer um estilo para o elemento XHTML especificado. A regra composta de um ou mais seletores acompanhados de propriedades e seus valores. O seletor ir apontar em qual elemento a regra ser aplicada. No se esquea que no final do valor de cada propriedade deve ser terminado com um ponto-e-

vrgula. As propriedades e valores de uma regra sempre devero vir entre chaves {}. Para selecionar um elemento XHTML basta coloc-lo como seletor no CSS, sem os sinais de . Voc pode selecionar mltiplos elementos XHTML em seu CSS, colocando como seletores e separando com vrgulas. Para incluir uma folha de estilo ( CSS ) dentro de uma pgina, basta adicionar a tag . Para sites maiores, com muitas pginas, recomenda-se utilizar uma folha de estilos dentro de um arquivo externo (.css). Para vincular o arquivo externo CSS sua pgina, basta utilizar o elemento . Fique atento a herana. Se algum estilo for adicionado ao elemento , todos os elementos contidos em herdaro a mesma propriedade. Caso no deseje que algum elemento no se comporte da maneira definida em basta criar uma regra especfica, utilizando o elemento como seletor no seu CSS. Para adicionar classes para diferenciar elementos semelhantes. No CSS, utilize ".nomedaclasse" para definir a regra como uma classe. No XHTML, utilize no elemento escolhido a tag "class=nomedaclasse", sem utilizar ponto antes do nome da classe. Para controlar a exibio dos elementos, as CSS o encaram sempre como caixas. Toda caixa possui rea de contedo, enchimento, borda e margem, sempre opcionais. O contedo do elemento se encontra na rea de contedo. O enchimento importante para destacar o contedo, criando em volta da rea uma moldura transparente. A borda importante para deixar claro uma separao visual do contedo. Porm, borda no obrigatrio. A margem o espao externo cuja finalidade


04Recortando o Layoutseparar os elementos da pgina Ao utilizar fundo no elemento, seja em cor ou imagem, este ir aparecer por trs do contedo e enchimento, nunca atrs da margem. A largura de um enchimento ou margem pode ser definido em pixels ou porcentagem. J a borda pode ser definido em thin, medium, thick ou em pixels. H oito estilos diferentes para as bordas, solid, double, groove, outset, dotted, dashed, inset e ridge Na CSS voc poder definir em uma linha todas as definies de enchimento, margem e borda ou ento definlos separadamente. Para aumentar a separao das linhas de texto, utilize a propriedade "line-height" Para utilizar imagem como fundo do elemento, utilize a propriedade "background-image" Utilize as propriedades "background-position" e "background-repeat" para definir a posio e o comportamento de repetio da imagem do fundo. Utilize class quando voc for utilizar esta regra para muitos elementos. Utilize o ID quando voc for utilizar esta regra para um elemento, sem necessidade de repetio. No CSS, voc dever identificar um id utilizando o smbolo #. Um id poder ter vrias classes.

Dicas de Sites

Elementos HTML: todos os elementos HTML que voc poder alterar utilizando como um seletor CSS: http://www.abpsoft.com/criacaoweb/htmlguiaref.html

Tabela de Cores CSS: veja 504 cores com seus cdigos hexadecimais e seus nomes oficiais que p o d e m s e r u t i l i z a d o s n o s e u C S S : http://www.abpsoft.com/criacaoweb/tabcores.html

Caracteres Especiais: veja todas as entidades dos caracteres especiais para voc utilizar em seu XHTML: http://www.abpsoft.com/criacaoweb/tabcaractesp.html


05Instalando um Layout no Joomla!inalmente iremos adaptar o nosso querido layout simples e bonito no Joomla. Chegou a hora de mostrar o que realmente interessa no HTML e o que devemos modificar no CSS. Como chamar o contedo dinmico do Joomla no HTML? Como alterar o menu? Como alterar o layout do mdulo enquete? muito simples pessoal. Trabalhoso, verdade, mas simples de entender.

Quais arquivos compe um Template Joomla?

Toda instalao de Template para Joomla exige sempre alguns arquivos e pastas fundamentais. Irei descrever aqui quem so essas figuras:

templateDetails.xml : nada mais que um arquivo xml. Ele responsvel por dizer ao Joomla quais os arquivos do template sero instalados assim como os detalhes do autor, nome do template, descrio e direitos autorais. Alm disso ser atravs desse arquivo que iremos passar algumas informaes de parmetros ( que ser visto nas aulas seguintes ). Note que a letra D de details maiscula. assim mesmo, no erro no.

index.php: o arquivo principal do template contendo toda sua estrutura. ele que informa ao Joomla onde colocar componentes e mdulos. Trata-se de uma combinao de PHP e XHTML.

template_thumbnail.png: nada mais que uma captura da tela, exibindo o layout. de tamanho reduzido, com cerca de 140 pixels de largura. Funciona como uma pr-visualizao ao passarmos o cursor em cima do nome do template, no gerenciador de temas do Joomla.

Pasta CSS: nessa pasta dever ser colocado todas as folhas de estilo do site.

template.css: a folha de estilo do template. O nome pode ser qualquer que seja, contanto que esse arquivo seja chamado no index.php. Por conveno utiliza-se template.css mas voc pode fazer no s com outro nome mas quantos arquivos css voc quiser. Ao colocar na pasta css, suas folhas de estilo iro aparecer no gerenciador de temas, em editar css.

Pasta Images: Aqui devem ficar todas as imagens r e l a c i o n a d a s a o t e m p l a t e ( e x c e t o o template_thumbnail.png )

O arquivo templateDetails.xml

Dentro do arquivo templateDetails.xml deve haver uma lista com todos os arquivos que compe o template. Alm disso dever conter informaes como nome do autor, template, descrio e direitos autorais. Essas informaes sero mostradas na administrao do Joomla em Gerenciador de temas. Segue um exemplo desse arquivo xml:

JornaldoInteriorJaneiro 2009Alunos do Bruno AvilaCurso Design para [email protected] template faz parte do primeiro layout do Curso Online Design para Joomla

index.phptemplateDetails.xmltemplate_thumbnail.pngimages/bg-topo.pngimages/bullet.pngimages/logo.pngcss/template.css


05Instalando um Layout no Joomla!Agora vou explicar cada linha desse xml:

Essa linha diz ao Joomla que iremos instalar um template (type="template") para Joomla verso 1.5 (version="1.5")

JornaldoInteriorAqui voc deve colocar o nome do template. ATENO: saiba que o nome que voc colocar aqui tambm ser o nome da pasta onde ficar o template. Como a maioria dos servidores no aceitam nome de pastas com espaos e acentos, evite utilizar. Prefira colocar o nome junto, como no exemplo acima.

Janei ro 2009Aqui voc poder colocar a data de criao do layout. Pode ter o formato que quiser, ms e ano ou dia/ms/ano.

Alunos do Bruno AvilaAproveite para colocar o nome do autor do template.

Curso Design para JoomlaColoque aqui as informaes de direitos autorais.

[email protected] o email do autor.

cursos.brunoavila.com.brO endereo da URL do site do autor do template

1.0Verso do template.

Esse template faz parte do primeiro layout do Curso Online Design para JoomlaAproveite para colocar alguma descrio sobre o template

index.php

05Instalando um Layout no Joomla!

Claro que voc no precisa decorar tudo isso. Serve apenas como referncia. Temos muitas outras classes. Por isso recomendo o uso do plugin Web Developer do Firefox para que facilite a vida de vocs. o mesmo que utilizo nos vdeos.

No decorrer do curso irei apresentar em nossa parte texto mais informaes sobre CSS e tags utilizadas na construo de nossos templates. Aguarde!

Para quem ainda usa Joomla 1.0

Apesar do Joomla 1.5 ter uma srie de diferenas do Joomla 1.0, no to difcil criar um layout para ele. O processo 90% semelhante ao que mostro no vdeo, s com algumas diferenas principalmente no que diz respeito a forma de chamar as posies do Joomla dentro do HTML.

Aprendemos que no Joomla 1.5, para chamar uma pos i o no HTML bas ta u t i l i za r a tag . J no Joomla 1.0 isso diferente. Basta utilizar o

Se voc quiser chamar os metadados do Joomla em Head, basta utilizar:

contedo_rati contedo

contedo_vot contedo

contedodes contedo

contedohea contedo

contedopag contedo

contedopan contedo

contedopan contedo

contedotoc contedo

createdate contedo

created-date contedo

current Menus verticais e horizontais no modo herana

form-login mdulo de login

modlgn_pass mdulo de login

form-login- mdulo de login

form-login- mdulo de login

modlgn_reme mdulo de login

hasTip edio

input formulrios

inputbox formulrios

latestnews mdulo de ltimas notcias

mainlevel Menus verticais e horizontais

menu Menus verticais e horizontais

modifydate data e hora modificadas de artigos

moduletable Mdulos em geral

mosimage imagens

mostread Mdulo de leia mais

newsfeed news feeds

pagenav navegao de pgina

pagenav_nex navegao de pgina

pagenav_pre navegao de pgina

pagenavbar navegao de pgina

pagenavcoun navegao de pgina

pagination Numerao de pgina

pathway mdulo breadcrumb ou pathway

pollstablebor Mdulo de enquete

readon Link de leia mais

searchbox Mdulo de busca

search Mdulo de busca

searchintro Mdulo de busca

sections contedo

sectiontable_f contedo

sectiontablee contedo

sectiontablee contedo

sectiontablefo contedo

sectiontableh contedo

small Fonte pequena

sublevel Menus verticais e horizontais no modo subnivel

title Titulo de mdulos

wrapper Mdulo wrapper


Abaixo segue um exemplo de HTML utilizando o mosLoadModules. Veja que o processo semelhante ao Joomla 1.5, mudando apenas a tag: ao invs de jdoc:include, utiliza-se o mosLoadModules:

< t d c o l s p a n = " 2 " h e i g h t = " 8 9 " bgcolor="#F5C228"> < t d w i d t h = " 1 7 8 " h e i g h t = " 1 2 0 " r o w s p a n = " 2 " bgcolor="#FFCC33">

05Instalando um Layout no Joomla!


05Instalando um Layout no Joomla!Funo Joomla 1.0 Joomla 1.5

Inclui os metadados do Joomla em

Determina a posio onde ser carregado os mdulos

.

Exemplo:

Exemplo:

Migalha de Po (Breadcrumbs)

rea de Contedo Dinmico, corpo do site, parte principal.

Comparativo das principais Tags entre Joomla 1.0 e 1.5


06Adaptando o Design Joomla em outros navegadoresHoje irei mostrar como adaptar seu layout Joomla a outros navegadores, mais precisamente ao Internet Explorer que sei que voc tanto adora. ( ah no? Vc odeia? Ah, mas at que ele bonitinho, vai l... )

Gostando ou no, o Internet Explorer ainda o navegador mais utilizado no mundo.

Na nossa vdeo-aula de hoje mostro tambm o layout do nosso novo trabalho de Joomla, onde a misso criar uma capa com cara de capa de site e sem ser aqueles sites sem graa com cara de CMS que s o texto muda mas o resto continua tudo igual.

Adaptando o layout para Joomla no Internet Explorer 6

Na aula de hoje vimos que o layout, assim como qualquer layout que utilize XHTML e CSS, nem sempre bem visualidado no Internet Explorer. Deficincias do navegador? Pode ser, mas o que interessa nesse momento como contornar essa situao, afinal o IE ainda o navegador que todo mundo ( ou pelo menos a maioria ) ainda usa.

No vdeo mostrei o layout sendo adaptado ao Internet Explorer 6 graas a um arquivo CSS prprio para esse navegador, com todas as modificaes necessrias. Mas voc mesmo poder adaptar o layout a outras verses. Aqui vo algumas dicas, tambm citadas no vdeo:

1. A primeira coisa a se fazer criar um outro arquivo .css na sua pasta /css do seu template. Recomendo nome-lo de uma forma que voc possa identificar. Exemplo: caso a adaptao seja para o navegador Internet Explorer 6, utilize ie6.css.

2. Esse arquivo poder ser acessado tanto por FTP ( ou no gerenciador de arquivos caso voc esteja trabalhando localmente ) bem como pelo gerenciador

do Joomla em Administrao de Temas, escolhendo o tema > edit > edit css. Ir aparecer todos os arquivos css contidos na pasta /css de seu template.

3. Edite o index.php de seu template, incluindo a seguinte linha entre

O href deve apontar para o arquivo css criado especialmente para aquele navegador. Abaixo vai uma lista que voc pode utilizar caso queira linkar folhas de estilo de outras verses:

Fonte:

Para todas as ve rses do In te rne t Explorer Para o Internet Explorer 5Para o IE 5.0Para o IE 5.5Para o IE 6 Para verses mais atuais que o Internet Explorer 5 inclusive Para verses mais antigas que o Internet Explorer 5.5 inclusive Para verses mais antigas que o Internet Explorer 6 inclusive

http://enternauta.com.br/ferramentas-para-sites/diferentes-estilos-css-para-internet-explorer-e-firefox/


07Instalando um Layout no Joomla Parte IINa aula de hoje iremos recortar nosso segundo layout do Joomla! E esse layout tem algo especial. Trata-se de um layout institucional fora daqueles padres do Joomla de contedo principal e duas chamadas de texto embaixo, sempre da mesma forma. Agora no, nossa capa ser diferente. E somente a capa ter esse layout, as pginas internas sero diferentes, mantendo somente a mesma identidade visual.

Como criar posies

No Joomla temos por default algumas posies j criadas como left, banner e user1. Mas voc pode criar a posio que bem entender. No Joomla 1.0 aparentemente parece mais fcil, basta ir em site > gerenciador de tema > posies

Mas agora no Joomla 1.5 essa tarefa ocorre direto no templateDetails.xml. Uma das vantagens que cada tema ter suas posies especficas e ao desinstalar o tema, a posio tambm desinstalada.

Para incluir a posio desejada, bata abrir , colocar nome da posio, fecha e fecha como no exemplo abaixo:

Caso voc j tenha instalado o tema e esqueceu ou queira criar uma nova opo, basta ir no FTP, na pasta do seu tema e editar templateDetails.xml, incluindo sua posio. Assim basta dar reload no gerenciador

mainmenu logo banner creditos chamada01 chamada02 chamada03 chamada04

do Joomla que a posio ir aparecer.

Como incluir posies dentro de artigos

Uma tag muito til a que chama uma posio dentro de um artigo. Dessa forma voc poder chamar mdulos do Joomla no meio do contedo. Um cadastro de emails por exemplo ou uma enquete. Mas a grande utilidade desse recurso poder criar o seu mdulo e incluir no artigo. Para que isso seja possvel, voc ir at o gerenciador de artigos, criar ou editar algum artigo existente e l no meio, onde voc quiser, incluir a seguinte tag:

{loadposition nome-da-posio}

Exemplo, voc quer chamar a posio user1 dentro do artigo? Ento basta colocar onde voc quiser dentro do artigo a seguinte tag: {loadposition user1}

O a r t igo fazendo par te da composio do layout

Nessa aula vimos como utilizar os artigos a nossa favor na hora de construir um layout para Joomla, sobretudo na capa. Utilizando a combinao artigo + loadposition + css possvel criar uma srie de possibilidades de capa com o Joomla.

Como sabemos que o Joomla alimenta o site com contedo na rea de artigos, ou mais precisamente no , podemos incluir no artigo que aparecer na capa algumas divs e ids, fazendo com que seu layout se integre ao design principal.

A dica desabilitar o editor visual do seu navegador para que o mesmo no suje o seu cdigo e incluir ali diretamente o html, com divs chamando ids ou


07Instalando um Layout no Joomla - Parte IIclasses. Dessa forma, no template.css voc poder dizer que o artigo que est na capa tenha um background diferente e modificar o que quiser no que diz respeito a layout.

Incluindo nessa capa a tag loadposition, voc poder criar mdulos especficos como chamadas e imagens que necessitem de atualizao e public-los na capa do site, dentro do artigo. Dessa forma qualquer pessoa poder atualizar trechos do site, bastando editar os mdulos.

Dessa forma acredito que voc j est comeando a visualizar inmeras possibilidades de criao.

Na prxima aula iremos fazer a pgina interna, diferente da pgina principal mas mantendo sua identidade visual. Abordaremos tambm os parmetros do template, uma funo muito til que novidade no Joomla 1.5.



08Pgina Interna & ParmetrosNa aula de hoje iremos criar a pgina interna de nosso segundo layout do Joomla! A idia fazer uma pgina com formatao diferente da capa, mas conservando os itens importantes de identificao, o logotipo e as posies dos menus.

Depois de realizar essa rdua tarefa, irei apresentar a vocs o Parmetros, uma nova funo que o Joomla 1.5 nos trouxe.

Parmetros

O gerenciador de temas sempre foi uma das mais poderosas funcionalidades do Joomla, mas antes do Joomla 1.5 era difcil para as empresas de web design flexibilizar seus layouts. Por exemplo, um template com vrios esquemas de cores disponveis, para alterar essas cores era necessrio ativar arquivos de css, apontando para pastas especficas para cada cor. Alguns webdesigners criavam seus prprios mtodos para permitir que o administrador do site pudesse alterar cores e outras funcionalidades de forma mais simples, mas mesmo assim, muitas vezes o administrador se via a mexer no cdigo ou fuar no FTP para alterar uma ou outra coisa.

Isso tudo mudou com a nova verso 1.5 do Joomla que nos trouxe os parmetros de template. Na verdade, seria mais correto chamar apenas de parmetros j que sua funcionalidade genrica para todos os tipos de extenso: componentes, mdulos, plugins e templates. Nesta aula voc aprender como criar e utilizar parmetros em seus templates. Voc vai aprender a criar o seu prprio parmetro personalizado para atender s suas necessidades especficas. Conhecimento em PHP vai lhe ajudar bastante.

Para ver um exemplo de parmetros de template em ao, v em Extenses > Administrar Tema e clique sobre o template rhuk_milkyway. Aps selecionar clique em [Editar]. Nessa tela voc ver que existe um

grupo chamado Parmetros contendo um par de campos denominados Variao de Cor, Variao de Plano de Fundo e Largura. Estes parmetros so default do tema, neste caso, eles controlam o esquema de cores e largura do template.

Os Parmetros de Template permitem que o administrador possa ajustar o comportamento de um modelo por meio de um formulrio no gerenciamento do tema. Para acrescentar essas funcionalidades ao seu tema necessrio realizar trs etapas:

? Adicionando um elemento a seo do templateDetails.xml

?Criando o arquivo params.ini que ir armazenar o valor atual do parmetro e dever ficar na pasta raiz do template.

? Adicionando cdigo PHP no arquivo index.php para recuperar o valor atual do parmetro e agir sobre ela.

Definindo um parmetro no templateDetails.xml O templateDetails.xml est sempre na pasta raiz do template. Por exemplo, para o template Beez o caminho completo ser algo parecido com: [Joomla] / templates / Beez / templateDeta i l s . xml

Localize o elemento , geralmente no final do arquivo. Se no houver nenhum elemento voc precisar adicionar uma. Deve ser adicionado abaixo do . No se esquea de fechar o elemento com um .

Para cada parmetro que pretende definir, dever ser adicionado um elemento . Esse elemento tem um nmero de argumentos obrigatrios e opcionais que dependem do tipo de argumento. Os


08Pgina Interna & Parmetrosnicos argumento obrigatrio o type e name mas default, description e label, so comuns maioria dos tipos de parmetro. Estes argumentos obrigatrios / comuns so os seguintes:

? Type especifica o tipo de formulrio HTML utilizado no Parmetros na tela do administrador para permitir ao utilizador alterar o valor do parmetro.

? Name o nico nome do parmetro. Voc ir referir-se este nome ao recuperar o valor do parmetro no cdigo do template.

Os seguintes argumentos so opcionais, mas so comuns a quase todos os tipos de parmetro:

?

? Description o texto que ser exibido como uma dica para o campo no Parmetros na tela do administrador.

? Label o ttulo do campo que ser mostrado ao usurio na tela de Parmetros do template.

Os argumentos opcionais dependem do tipo de parmetro. Se voc for programador, tambm possvel criar o seu prprio parmetro personalizado. Nesse caso recomendo a documentao avanada do Joomla em http://docs.joomla.org/Creating_custom_XML_parameter_types

Por exemplo, o cdigo XML a seguir mostra uma seo com dois parmetros, um para uma lista drop-down do template, o outro para um boto que permitir ao usurio mostrar ou ocultar uma mensagem de copyright.

Default o valor padro do parmetro.

Blue Red Green Black

hide show

Na tela de administrao do tema, aparecer assim:

Os valores escolhidos nos parmetros sero gravados no arquivo param.ini, que est na pasta raiz do template.

Nota: caso aparea a mensagem na caixa de parmetros algo como Protegido ou Unwritable em vermelho, verifique se existe o arquivo params.ini na pasta raiz do seu template. Caso no exista, basta criar um arquivo texto vazio com o nome params.ini. Voc no precisar edit-lo, o Joomla s ir utilizar esse arquivo para gravar os dados selecionados no gerenciador de Parmetros.

Tendo definido um parmetro no arquivo templateDetails.xml e guardado um valor para ela no params.ini, voc dever colocar no seu index.php uma funo PHP recuperando o valor gravado em params.ini, seguindo o padro:

Por exemplo, suponha que o seu template tem um parmetro chamado templateColour que assume vrias opes de valores que determinam o esquema de cor a ser utilizado. As cores so normalmente definidas em arquivos CSS. O seguinte cdigo recupera o parmetro, em seguida, adiciona o estilo adequado para tornar a pgina com o esquema de cores escolhido.


08Pgina Interna & ParmetrosPara outro exemplo, suponha que o seu template tenha um parmetro chamado authorCopyright que assume o valor 0 para ocultar uma copyright, ou 1 para mostrar isso. O seguinte cdigo recupera o parmetro:

No caso de nossa vdeo aula, recuperamos o valor escolhido em parmetros, alterando a cor do topo do layout, bastando utilizar a seguinte funo PHP:

N o c a s o , d e t e r m i n e i n o X M L q u e backgroundVariation poderia receber dois valores, o blue ou o red. Quando o usurio escolhesse um dos dois, esse nome seria recuperado no body, como um sufixo de uma classe. Portanto, quando o usurio escolhesse blue, este nome iria para a classe de body, substituindo a funo php e ficando class=bg_blue. Ento bastou criar a regra para .bg_blue dentro do CSS do template.

Nas prximas aulas iremos trabalhar mais com parmetros em nosso novo layout para Joomla. Aguardem!


Copyright 2008 Fat Pigeon Templates

09Module ChromeHoje iremos criar um site pra valer. E com todo cuidado do mundo pois o site do professor que vos fala. Tem que sair tudo direitinho por isso fiz o nosso terceiro layout com todo carinho, cheio de detalhes ali e acul, para atender as minhas necessidades e objetivos.

Trata-se de um site estilo portal, com diversos mdulos e sees. Seu objetivo apresentar meu trabalho, os servios e cursos. Tem tambm o carter de venda pois atravs do site que o cliente entrar em contato comigo desejando o servio de criao. No caso do Cursos a idia redirecionar para o site especfico de cursos.

Vocs vero que ser um trabalho pesado, porm no ser difcil. S ir demandar tempo. Assim, atravs do meu novo site irei explicar alguns detalhes na implementao de um layout para Joomla e novidades da verso 1.5.

Em nossa primeira aula sobre o trabalho 3 de nosso curso irei apresentar o layout j pronto para no perdermos tempo. Vocs iro notar que o CSS bem extenso devido a complexidade um pouco maior em relao aos layouts anteriores. Por essa razo j apresento o CSS pronto e a estrutura em XHTML tambm, porm irei comentar cada linha do cdigo produzido. Falaremos muito de CSS e mais uma vez mostrarei a criao de mdulos que ajudaro na composio do layout.

A partir da, na aula 10, iremos focar em algumas funcionalidades do Joomla. O desafio ser fazer com que a coluna que consta o type=component mude de tamanho nas pginas internas, crescendo largura e altura quando as colunas da esquerda ou direita no estiverem presentes. Alm disso, nas aulas seguintes irei mostrar a instalao e modificao de layout de alguns componentes importantes para esse layout.

O Mdulo Chrome

Enquanto montamos o layout do nosso terceiro trabalho, j vou abordar atravs de nossa aula texto uma novidade da verso 1.5 do Joomla e que, se vocs notarem no vdeo, utilizei junto com nossa tag jdoc:include. Trata-se do Module Chrome.

O Module Chrome foi inventado para dar uma certa quantidade de controle sobre a forma e as tags de sada do mdulo. Reconhecemos o Module Chrome atravs do seguinte atributo:

Onde custom poder ser rounded, table, horz , xhtml, outline e none.

Atravs do Module Chrome possvel determinar o tipo e quantidade de pr-HTML inserido antes, depois ou em torno da sada de cada mdulo, usando estilo CSS. Dessa forma possvel criar mdulos com canto arredondados sem necessidade de background.

Criando um Module Chrome

Voc pode facilmente criar um estilo de Chrome para utilizar em seus mdulos, diferente dos 6 estilos padro do Joomla.

Para isso basta editar o module.php.

ATENO: Recomendo criar um backup do module.php antes de brincar com ele. Vai que voc brinca, brinca e no sabe mais o lugar de cada coisa? ;)

Para encontrar o module.php basta ir na pasta do seu joomla e entrar nas seguintes pastas: administrator > templates > system > html. Pronto, l estar o module.php


09Module ChromeNele voc ir encontrar algo como cdigo abaixo:

Note que as tags acima exatamente a sada html do estilo xhtml. Voc poder alterar essa tag como quiser e incluir at algum CSS especfico. Se voc entende PHP, voc estar feito. ;) Divirta-se!

E na prxima aula vocs iro ver a difcil tarefa de criar uma pgina interna para o site do profess! Fique a, no mude de canal pois daqui a pouco a gente volta!

* xhtml (divs and font headder tags) */function modChrome_xhtml($module, &$params, &$attribs){

if (!empty ($module->content)) : ?>

10Count ModulesNa aula de hoje iremos conhcer uma funo muito importante, o count modules. Ser atravs dele que iremos montar uma pgina interna com diagramao diferenciada, mesmo diante de um index.php com tantas colunas e um type=component presente num espao to pequeno.

Como fazer com que a coluna do meio aumente, pegando o espao das demais colunas que no estiverem ativadas? Vou responder essa dvida no nosso vdeozito de hoje.

O countModules um mtodo que pode ser utilizado de diversas formas, atravs da contagem de mdulos.

Um exemplo: para determinar o nmero total de mdulos ativados nas posies user1 e user2 basta chamar a seguinte funo:

Alm dos operadores aritmticos ( -, +, etc ), voc poder utilizar os operadores lgicos, and e or.

Um exemplo do uso de operadores lgicos. Para determinar se o user1 e o user2 possuem mdulos ativados, basta usar a funo:

A partir dessa contagem possvel definir condies, atravs de valores. Veja a seguinte situao que descrevo em nossa vdeo aula. Temos trs colunas: colesq, colmeio e coldir. Meu desejo que se nenhum mdulo estiver ativado na coluna colesq, o colmeio aumente sua largura, preenchendo o espao da coluna colesq. O mesmo dever ocorrer caso no seja utilizado nenhum mdulo em coldir.

Para isso, primeiro necessrio contar os mdulos e aplicar valores a elas.

$this countModules ( 'user1 + user2' );

$this -> countModules ( 'user1 and user2' );

->

Dessa forma temos:

A partir da iremos criar condies. Se colesq e coldir estiverem sem mdulo algum ( == 0 ) ento quero que $contentwidth seja igual a "100". Se colesq estiver sem mdulo e somente coldir tem mdulos habiltados ( colesq == 0 ) ento quero que $contentwidth seja igual a "-dir". J se coldir no contiver nenhum mdulo ativo e colesq sim, ento o $contentwidth dever ser "-esq". Agora, se tivermos mdulos em coldir e colesq, ento $contentwidth dever ser "-meio".

Dessa forma, a condio ficar assim:

Esses valores que passei em $contentwidth servir para compor o nome da regra CSS de colmeio. Veja como chamar esses valores para o ID da div colmeio:

Note que o valor que dei em $contentwidth so sufixos. Logo, se tivermos mdulos na coluna da esquerda ( colesq ), o nome do ID da div passar a ser colmeio-dir. Se tivermos mdulos na coldir, o nome do ID ser colmeio-esq. Se existir mdulos ativados nas duas colunas, o nome do ID ser comeio-meio. E se no existir nenhum mdulo em colesq e coldir, ento o nome do ID passar a ser colmeio100.

10Count ModulesPronto! Dessa forma voc poder criar regras CSS diferentes para cada diagramao. No caso do nosso exemplo, se a coluna da esquerda no contiver nenhum mdulo bastar criar a regra CSS colmeio-esq dizendo que sua largura dever ser maior.

Sumindo com as divs

Como sumir com o html referente as divs das colunas que no esto sendo visualizados no layout? Isso fcil de resolver.

Utilizando o nosso exemplo, para sumir com o html das colunas coldir e colesq caso essas no tenham mdulos habilitados, basta utilizar a seguinte funo antes de cada div:

Dessa forma, ao ver o cdigo fonte da html gerada pelo index.php e Joomla, as tags referentes a colesq e coldir desaparecero caso no tenha nanhum mdulo habilitado dentro delas. ;)

Bem, agora vamos instalar alguns componentes nesse layout? Bora? Na prxima aula irei instalar componentes interessantes e irei mostrar como adapt-los ao nosso layout Joomla. Aguardem!


11ComponentesNa aula de hoje iremos abordar uma das novidades do Joomla 1.5 que a facilidade de alterar o layout de um componente atravs de arquivos de template. O mesmo poder ser aplicado aos mdulos. Na vdeo-aula escolho dois componentes para instalar no meu site, uma fotogaleria e um mural de recados. Vocs vero que a fotogaleria me d uma srie de possibilidades diretamente pelo seu gerenciador. Porm o mesmo no ocorre com o componente de mural. Como resolver essa questo? Simples, senta, senta que l vem a histria!

Estrutura de Template ( Componentes e Mdulos )

Normalmente voc ir encontrar o template do componente ou mdulo dentro da pasta principal do componente, em uma pasta chamada /tmpl/. Por exemplo:

A estrutura bsica para todos os componentes e mdulos a seguinte: visualizao -> layout -> templates

Alterando o Layout do Componente

Os componentes funcionam quase da mesma maneira que os mdulos, exceto que existem muitas visualizaes associadas com muitos componentes.

Por exemplo, se olharmos na pasta com_easybook encontraremos uma pasta chamada views (visualizaes).

Nessa pasta encontraremos mais duas, uma chamada easybook e outra entry. Em ambas existem a

modules/mod_poll/tmplmodules/mod_newsflash/tmplcomponents/com_login/views/login/tmplcomponents/com_content/views/section/tmpl

pasta tmpl contendo os templates com o cdigo de sada. Basicamente html + php.

E x p e r i m e n t e e n t r a r e m components\com_easybook\views\easybook\tmpl e alterar o cdigo de default_header.php como fao em nossa vdeo-aula. Atravs desse arquivo possvel acrescentar divs ao componente, bem como atribuir ids, classes e alterar posicionamentos. Enfim, possvel alterar todo o seu layout.

A funcionalidade de alterao de template prov um poderoso mecanismo para customizar o site Joomla atravs do seu template. Voc pode criar templates de sada que sejam focalizados nos SEO (mecanismos de busca), acessibilidade ou necessidades especficas de um cliente.

Experimente modificar os arquivos contidos na pasta tmpl de outros componentes e mdulos. Mas no esquea de fazer um backup antes. ;)

Encerramos ento nosso terceiro trabalho. Estamos chegando pertinho do final do curso mas aguarde a prxima aula pois irei trazer alguns presentinhos virtuais pra vocs, queridos alunos!


Este material protegido pela lei do direito autoral. Todos os direitos reservados. Nenhuma parte desta publicao pode ser reproduzida, transmitida, modificada, distribuda, por

qualquer meio, seja eletrnico, mecnico ou fotocpia, sem expressa autorizao do autor Bruno vila ou da empresa vila Comunicao.

Esta apostila faz parte integrante do Curso Online Design para Joomla e no pode ser comercializado.

Pgina 1Pgina 2Pgina 3Pgina 4Pgina 5Pgina 6Pgina 7Pgina 8Pgina 9Pgina 10Pgina 11Pgina 12Pgina 13Pgina 14Pgina 15Pgina 16Pgina 17Pgina 18Pgina 19Pgina 20Pgina 21Pgina 22Pgina 23Pgina 24Pgina 25Pgina 26Pgina 27Pgina 28Pgina 29Pgina 30

apostila completa curso joomla

Documents