Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila Completa Curso Joomla
Apostila Completa Curso Joomla
Apostila Completa Curso Joomla
APOSTILA
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.
01
Bem 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.
01
Se 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!
8. Na tela seguinte ir aparecer um checklist mostrando os componentes instalados no servidor. Clique em Next/Prximo;
01
10. 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;
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:
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;
15. Para entrar na administrao, abra o navegador e coloque o endereo http://localhost/joomla/ administrator. Aparecer a tela abaixo pedido o usurio (admin) e senha:
01
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!
02
Front-End
Posies
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.
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 backend, em Menus > Administrar Menu Main Menu O 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
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
02
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 Page Atravs da primeira pgina possvel mostrar o textochamada 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.
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 Menu Um menu com links adicionais, que podero ser para pginas do site ou links externos.
User Menu Este 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.
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
02
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 http://extensions.joomla.org/. 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 http://extensions.joomla.org/ 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.
Despublicar
O elemento escolhido arquivado Criao de um novo elemento. Edio de mdulo, componente ou template.
Back-End
Para acessar o back-end do Joomla basta acessar o [Nome de Domnio]/administrador/. No nosso caso seria http://localhost/joomla/administrator 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.
Excluir
Lixeira
Restaurar
Mover
O elemento selecionado movido para outra seo ou categoria. O elemento selecionado copiado para outra seo ou categoria. O elemento selecionado salvo e a tela fechada.
Copiar
Salvar
Aplicar
Cancelar
PrVisualizao Enviar
Visualize o site, notcia ou pgina antes de salvar ou publicar. O arquivo escolhido enviado para o servidor.
Ajuda
Voc redirecionado para a ajuda do Joomla atravs do site do prprio Joomla O elemento selecionado passa a ser o padro.
Padro
03
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 montlo, 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.
03
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 ... ;)
10
03
11
04
Recortando o Layout
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 <e>. 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 <style>. Para sites maiores, com muitas pginas, recomendase utilizar uma folha de estilos dentro de um arquivo externo (.css). Para vincular o arquivo externo CSS sua pgina, basta utilizar o elemento <link>. Fique atento a herana. Se algum estilo for adicionado ao elemento <body>, todos os elementos contidos em <body> herdaro a mesma propriedade. Caso no deseje que algum elemento no se comporte da maneira definida em <body> 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
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
Continuamos 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-
12
04
Recortando o Layout
separar 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.ht ml Tabela de Cores CSS: veja 504 cores com seus cdigos hexadecimais e seus nomes oficiais que podem ser utilizados no seu CSS: 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.h tml
13
05
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.
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:
<install version="1.5" type="template"> <name>JornaldoInterior</name> <creationDate>Janeiro 2009</creationDate> <author>Alunos do Bruno Avila</author> <copyright>Curso Design para Joomla</copyright> <authorEmail>cursos@brunoavila.com</authorEmail> <authorUrl>cursos.brunoavila.com.br</authorUrl> <version>1.0</version> <description>Esse template faz parte do primeiro layout do Curso Online Design para Joomla</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/bg-topo.png</filename> <filename>images/bullet.png</filename> <filename>images/logo.png</filename> <filename>css/template.css</filename> </files> </install>
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
14
05
algumas tags importantes, dizendo ao Joomla onde ficar cada posio. No esquea desta tag: <jdoc:include type=modules name=LOCATION style=OPTION> Essa tag responsvel por dizer ao Joomla onde ficar em seu layout cada posio. Assim voc poder dizer que o canto direito ficar a posio left e todos os mdulos que estiverem em left devem aparecer ali. Para isso basta colocar a tag <jdoc:include type=modules name=left> E o Style? No se preocupe, mais adiante veremos o que so os styles. ;)
O arquivo template.css
Esse arquivo contm toda a parte visual do layout, mdulos e componentes. Existem alguns ids e classes especficas do Joomla, onde voc poder edit-los. Eis a lista de alguns ids e classes do Joomla que voc ir encontrar por a:
Classes CSS padro do active article_separ author bannerfooter bannergroup bannerheade banneritem blog mdulos artigos Autor de artigo mdulo de banner mdulo de banner mdulo de banner mdulo de banner contedo de blog contedo de blog contedo de blog mdulo breadcrumb ou pathway vrios vrios vrios componente contedo Usado em:
<filename>images/logo.png</filename>
E para finalizar todo o XML, coloque </install>
Alm disso o templateDetails.xml poder conter novas posies para o template e parmetros especficos. Sobre isso veremos nas prximas aulas.
O arquivo index.php
O index.php nada mais que uma pgina XHTML com PHP . a estrutura do layout. Nele colocaremos
15
05
contedotoc createdate created-date current form-login
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!
menu modifydate moduletable mosimage mostread newsfeed pagenav pagenav_nex pagenav_pre pagenavbar pagenavcoun pagination pathway pollstablebor readon searchbox search searchintro
Menus verticais e horizontais data e hora modificadas de artigos Mdulos em geral imagens Mdulo de leia mais news feeds navegao de pgina navegao de pgina navegao de pgina navegao de pgina navegao de pgina Numerao de pgina mdulo breadcrumb ou pathway Mdulo de enquete Link de leia mais Mdulo de busca Mdulo de busca Mdulo de busca
16
05
<head> <?php mosShowHead(); ?> </head> 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:
<html><head> <?php mosShowHead(); ?> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="780" border="1"> <!-- Part 1 --> <tr> <!-- Area 1 --> < t d c o l s p a n = " 2 " h e i g h t = " 8 9 " bgcolor="#F5C228"> </td> <!-- Area 2 --> <td width="178" height="120" rowspan="2" bgcolor="#FFCC33"> <?php mosLoadModules ( 'user4' ); ?> </td> </tr> <tr> <!-- Area 3 --> <td colspan="2" height="33" bgcolor="#FFCC33"> <?php mosPathWay(); ?> </td> </tr> <!-- Part 2 --> <tr> <!-- Area 4 --> <td width="197" height="233" bgcolor="#F5EE28" valign="top"> <?php mosLoadModules ( 'left' ); ?> </td> <!-- Area 5 --> <td width="389" height="233" valign="top"> <?php mosMainBody(); ?> </td> <!-- Area 6 --> <td width="178" height="233" bgcolor="#FFFF33" valign="top"> <?php mosLoadModules ( 'right' ); ?> </td> </tr> <!-- Part 3 --> <tr bgcolor="#FFCC33"> <!-- Area 7 --> <td colspan="3" height="40"> <?php mosLoadModules ( 'footer' ); ?> </td> </tr> </table> </body></html>
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
17
05
Funo
Migalha de Po (Breadcrumbs)
18
06
Hoje 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.
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:
< ! [ i f I E ] > Pa r a t o d a s a s v e r s e s d o I n t e r n e t Explorer<![endif]> <![if IE 5]>Para o Internet Explorer 5<![endif]> <![if IE 5.0]>Para o IE 5.0<![endif]> <![if IE 5.5]>Para o IE 5.5<![endif]> <![if IE 6]>Para o IE 6<![endif]> <![if gte IE 5]>Para verses mais atuais que o Internet Explorer 5 inclusive<![endif]> <![if lte IE 5.5]>Para verses mais antigas que o Internet Explorer 5.5 inclusive<![endif]> <![if lt IE 6]>Para verses mais antigas que o Internet Explorer 6 inclusive<![endif]>
Fonte: http://enternauta.com.br/ferramentas-parasites/diferentes-estilos-css-para-internet-explorer-efirefox/
19
07
Na 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.
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
20
07
classes. 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. Para o alto e Avante!
21
08
Parmetros
Na 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.
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
<params> do templateDetails.xml
? Criando o arquivo params.ini que ir armazenar o
22
08
nicos 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: Default o valor padro do 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
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: <?php $myParam = $this->params->get( 'parameterName' ); ?> 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.
<?php $tplColour = $this->params->get( 'templateColour' ); $this->addStyleSheet( $this->baseurl . '/templates/' . $this>template . '/css/' . $tplColour .'.css' ); ?>
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 <params> 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.
<params> <param name="templateColour" type="list" default="blue" label="Template Colour" description="Choose the template colour."> <option value="blue">Blue</option> <option value="red">Red</option> <option value="green">Green</option> <option value="black">Black</option> </param> <param name="authorCopyright" type="radio" default="1" label="Author Copyright" description="Show/Hide author copyright.">
23
08
Para 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:
<?php if ($this->params->get( 'authorCopyright' )) : ?> <div class="copyright"> Copyright © 2008 Fat Pigeon Templates </div> <?php endif; ?>
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:
<body class="bg_<?php echo $this->params>get('backgroundVariation'); ?>">
No caso, determinei no XML que 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! Para o alto e Avante!
24
09
Module Chrome
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: <jdoc:include type="modules" name="user1" style="custom" /> 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
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
Hoje 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.
25
09
Module Chrome
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!
26
10
Count Modules
Dessa forma temos:
<?php if($this->countModules('colesq and coldir') == 0) ; if($this->countModules('colesq') == 0)"; if($this->countModules('coldir') == 1) "; if($this->countModules('colesq and coldir') == 1); ?>
Na 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: $this ->countModules ( 'user1 + user2' ); 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: $this -> countModules ( 'user1 and user2' ); 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.
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:
<?php if($this->countModules('colesq and coldir') == 0) $contentwidth = "100"; if($this->countModules('colesq') == 1) $contentwidth = "-dir"; if($this->countModules('coldir') == 1) $contentwidth = "-esq"; if($this->countModules('colesq and coldir') == 1) $contentwidth = "-meio"; ?>
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:
<div id="colmeio<?php echo $contentwidth; ?>">
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.
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
27
10
Count Modules
Pronto! 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.
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!
28
11
Componentes
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!
Na 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 vdeoaula 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!
29
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.