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 publicação pode ser reproduzida, transmitida, modificada, distribuída, porqualquer meio, seja eletrônico, mecânico ou fotocópia, sem expressa autorização do autor Bruno Ávila ou da empresa Ávila Comunicação. Esta apostila faz parte integrante do Curso Online Design para Joomla e não pode ser comercializado.

01Instalando um Servidor Local e o Joomla 1.5Bem amigos da Rede Globo, voltamos agora em 1. Instalando um por um, caso você goste de jogar nodefinitivo para o início de nosso curso. A partir de modo avançado ou seja sadomasoquista.agora vamos entrar no mundo encantado doSr.Joomla, o CMS camarada. 2. Utilizando o WampserverNosso objetivo nesse primeiro momento é instalar um Eu prefiro o item número 2. O Wampserver instalaservidor local, onde você poderá testar o seu template esses três sistemas em sua máquina com apenaspara Joomla com maior rapidez. Imagine se você alguns cliques, fácil, rápido e prático. Em nossa vídeotivesse que enviar o seu html e css para um servidor aula mostro como instalar o Wampserver, dê umatoda vez que fizer uma mudança? Demorado, não? olhadinha lá. ;)Pois com o servidor local você irá fazer o html e css etestá-lo na hora. Aqui está o link de download do WampServer: http://www.wampserver.com/en/download.phpA missão é transformar seu Windows num servidorweb como qualquer outro. Devemos instalar o Agora, caso o Wampserver não funcione, aí o negócioApache, o MySQL e o PHP em sua máquina. Vou é apelar para o modo avançado do jogo e tentarexplicar o que cada um desses meninos fazem: instalar manualmente cada sistema. Neste tutorial escrito por Marcos Elias você terá todas as instruçõesApache: é um software gratuito, considerado o mais de como instalar o Apache, PHP e MySQL separadosbem sucedido servidor web gratuito do mundo. sem auxílio do Wampserver:Através desse software que o seu computador se http://www.guiadohardware.net/tutoriais/apache-transformará num servidor web como qualquer outro. php-mysql-windows/Você poderá rodar sistemas em php por exemplo e vera coisa funcionando em seu navegador. Após a instalação do servidor, abra seu navegador. Digite na URL simplesmente “localhost”. Veja se abriuMySQL: trata-se de um sistema de gerenciamento de uma página semelhante a página abaixo:banco de dados que utiliza a linguagem SQL. Sendomais direto, é ele que vai armazenar as notícias,usuários e todas as informações que você incluir noJoomla. Seria uma espécie de armário virtual. Quandoo Joomla quiser puxar aquela notícia que você incluiuontem, ele irá procurar nas gavetas do MySQL.PHP: famosa linguagem de programação. Oresponsável pelo funcionamento de todas asengenhocas do Joomla. Instalando o PHP na suamáquina, os sistemas de atualização, consulta aoMySQL e todos os outros componentes do Joomla,assim como ele próprio, poderão funcionartranquilamente realizando todas as suas operações.Existem duas formas de instalar esses três sistemas Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 2em seu computador.

01Instalando um Servidor Local 7. Aparecerá a tela de instalação. Escolha o idioma e e o Joomla 1.5 clique em “Next/Próximo”. Se apareceu, ótimo, seu servidor está funcionando. Se não apareceu, ocorreu algum problema na instalação do servidor. Nesse caso o melhor é tentar a instalação de outra maneira.Caso você tenha instalado o servidor sem utilizar oWampserver, a página que irá aparecer será algosemelhante a isso:Agora, com o servidor funcionando, vamos instalar oJoomla 1.5 em sua máquina!Instalando o Joomla 1.5Chegou a hora de instalar o Joomla em sua máquina. 8. Na tela seguinte irá aparecer um checklistNa vídeo-aula mostro o passo-a-passo da instalação mostrando os componentes instalados no servidor.mas aqui vai um guia rápido para consulta. Clique em “Next/Próximo”;Chegou a hora de instalar o Joomla em sua máquina.Na vídeo-aula mostro o passo-a-passo da instalaçãomas aqui vai um guia rápido para consulta.1. Crie uma pasta para o Joomla. Abra seugerenciador de arquivos, vá até \wamp\www (ou napasta onde você instalou o seu Wampserver) e crieuma pasta. Essa pasta pode pode ter o nome quequiser, mas por convenção vamos colocar “joomla”.Ficará algo como \wamp\www\joomla;2. Toda pasta criada dentro de wamp/www poderá 9. Aparecerá então o texto da licença de uso. Cliqueser acessada pelo navegador, através da seguinte url: em “Next/Próximo”http://localhost/nome-da-pasta ;3. Caso você instale o Apache sem ser viaWampserver, todas as pastas colocadas dentro de\apache\htdocs poderão ser acessadas pelonavegador através da url: http://localhost/nome-da-pasta ;4. Baixe o Joomla Versão 1.5 Full Package no seguinteendereço: http://www.joomla.org/download.html;5. Descompacte todo o conteúdo do zip na pasta“joomla” que você criou dentro de wamp/www(exemplo: wamp/www/joomla);6. Abra o navegador e acesse http://localhost/joomla; Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 3

01Instalando um Servidor Local 14. No gerenciador de arquivos, apague a pasta e o Joomla 1.5 installation que fica dentro de wamp/www/joomla. Se você não apagar, não conseguirá entrar na 10. Configuração da base de dados. Selecione o tipo administração do Joomla: de base “MySQL”, o nome do host “localhost”, nome de usuário “root” e em nome de base de dados coloque “joomla”. Clique em “Next/Próximo”;11. Configuração de FTP. Em localhost não é precisoconfigurar. Em caso de servidor remoto, coloquecaminho, login e senha de FTP. Clique em“Next/Próximo”;12. Configurações finais, coloque o nome do site,email, crie uma senha de administrador e guardemuito bem pois se você esquecer vai ser bemcomplicado saber novamente. Aproveite e instale umconteúdo de exemplo, no botão logo abaixo. Depoisclique em “Next/Próximo”; 15. Para entrar na administração, abra o navegador e coloque o endereço http://localhost/joomla/ administrator. Aparecerá a tela abaixo pedido o usuário (admin) e senha:13. Pronto. Aparecerá a tela final parecido com a telaabaixo: Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 4

01Instalando um Servidor Local e o Joomla 1.5 16. Após o login aparecerá a tela de administração semelhante a tela abaixo: Na vídeo aula mostro alguns detalhes do funcionamento do Joomla. Na próxima aula colocarei algo mais sobre isso em texto, apresentando um tour sobre o Joomla. No decorrer do curso iremos ver algumas funções do Joomla com mais detalhes, aguarde! Para o alto e Avante! Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 5

02Um Tour pelo Joomla! Agora que você já instalou o Joomla em sua máquina, vamos ver algumas funções 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 irão ver. Enfim, é o site propriamente dito. Back-End: são os bastidores, o que existe atrás do “palco”. É a parte de administração do site onde apenas o administrador do site tem acesso.Front-EndPosiçõesO Front-End do Joomla é dividido em diversas áreas, Essas posições são importantes pois através delaschamadas de posições. Essas posições são você poderá dizer ao Joomla em qual posiçãodeterminadas por você, webdesigner, na hora de deverá aparecer a enquete ou qual o local ondecontruir o layout, através de tags específicas que deverá aparecer o menu principal.veremos mais a frente. MenusVeja a seguir um exemplo demonstrando as posiçõesdo layout default do Joomla. Todo Joomla vem com 4 menus instalados. São eles: Main Menu, Top Menu, Other Menu e User Menu. Você poderá criar outros menus, através do back- end, em Menus > Administrar Menu Main Menu O Main menu é o menu principal so site. Este menu deve aparecer exatamente na mesma posição em cada página do site, afinal, é um item importante na navegação. Ele não pode ser apagado pois nele estão Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 6

02Um tour pelo Joomla! configurações importantes da primeira página. ConteúdoTop Menu. Compreende a parte central do site onde todo oO top menu é recomendado para ser utilizado no topo conteúdo de páginas e notícias deverão aparecer.das páginas oferecendo ao usuário acesso rápido aos Além disso é no conteúdo onde ficará a primeiraitens mais importantes do site. página ( First/Front Page )Other Menu First/Front PageUm menu com links adicionais, que poderão ser para Através da primeira página é possível mostrar o texto-páginas do site ou links externos. chamada de uma notícia contendo data, nome de autor, categoria da notícia, imagem e um leia mais. Sempre aparecerá as notícias organizadas por ordem de data. A mais recente aparece como principal.User MenuEste menu só aparecerá depois de ser feito login porusuários registrados. Nele você poderá colocar linksrelacionados aos detalhes do usuário, mudança desenha e a opção de deslogar-se. Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 7

02Um tour pelo Joomla! Abaixo da barra de menu superior temos a barra de ferramentas. Do lado esquerdo temos o título e doMódulos e Componentes lado direito temos alguns ícones que acendem ao passar o mouse. Componentes são funções adicionais ao Joomla. Alguns componentes já vem instalados como o A tabela a seguir mostra as principais funções desses gerenciador de banners e enquetes. Mas você poderá ícones: adicionar novas funções ao Joomla, bastando instalar novos componentes, normalmente criados por Publicar O elemento selecionado é publicado no front-end. terceiros. Esses componentes podem ser encontrados no site do Joomla em http://extensions.joomla.org/. Despublicar O elemento selecionado sai do front-end mas não é Alguns são gratuitos, outros não. apagado da administração. Módulos são auxiliadores dos componentes. Servem Arquivo O elemento escolhido é arquivado para mostrar determinadas informação gerada pelos Novo Criação de um novo elemento. componentes ou então funciona como um módulo de Editar Edição de módulo, componente ou template. interação entre o usuário e o componente. São elementos capazes de serem exibidos nas posições que você escolher. O Joomla já traz alguns módulos como a enquete e área de login. Módulos criados por terceiros podem ser instalados no Joomla onde você poderá encontrar também em http://extensions.joomla.org/Back-End Excluir O elemento selecionado é excluído.Para acessar o back-end do Joomla basta acessar o Lixeira O elemento selecionado é colocado na lixeira.[Nome de Domínio]/administrador/. No nosso casoseria http://localhost/joomla/administrator Restaurar O elemento selecionado é resgatado da lixeiraAtravés da administração do Joomla, você pode Mover O elemento selecionado é movido para outra seção oupersonalizar o seu site, fazer alterações, e preenchê-lo Copiar categoria.com conteúdo. SalvarJoomla possui uma interface semelhante a qualquer O elemento selecionado é copiado para outra seção ousoftware de Windows. Isto só é possível graças a uma categoria.bem-sucedida combinação de JavaScript e AJAX. O elemento selecionado é salvo e a tela é fechada.Assim como no Front-End, a administração do Joomlaé constituída por diferentes elementos. Os menus Aplicar As alterações são guardadas e a tela continua aberta.estão no topo, bem como, do lado direito, temos trêselementos: um link para seu site ( Pré-Visualizar ), um Cancelar A edição é terminada sem qualquer alteração a ser salvo.aviso de recebimento de mensagens do sistema e umaviso de quantas pessoas estão conectadas no seu Pré- Visualize o site, notícia ou página antes de salvar ousite. Visualização publicar. Enviar O arquivo escolhido é enviado para o servidor. Ajuda Você é redirecionado para a ajuda do Joomla através do site do próprio Joomla Padrão O elemento selecionado passa a ser o padrão. Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 8

03Criando um Layout para Joomla!Finalmente vamos começar a criar o nosso primeiro Entendendo o Gerenciamento detemplate para Joomla. Vamos começar com um layout Temasfácil, de formas simples. Optei por uma estruturabásica de 3 linhas e 3 colunas, formas retas, quase Continuando o tour da aula passada pelas funções doque um wireframe. O objetivo é criar um layout Joomla que nós webdesigners iremos utilizarbásico, porém não muito diferente, para que nas bastante em nosso curso, ficou faltando apresentarpróximas aulas possamos recortá-lo e aí sim montá- uma área muito importante: o gerenciamento delo, fazendo a adaptação para o Joomla. Dessa temas.maneira poderei explicar alguns detalhes quesomente com o recorte e montagem terei a Todos os arquivos de template podem ser instaladosoportunidade de mostrar. diretamente pela função “Instalar” do Joomla, do mesmo jeito que se instala um componente ou plugin.Depois de passarmos por todo o processo de recorte e Sobre isso iremos ver mais na frente. Ao seremmontagem e ficar claro alguns pontos a respeito instalados, os arquivos ficam na pasta “templates”.desses processos, faremos layouts um pouco mais Um exemplo: se o seu tema se chama \"planetaxuxa\",desafiadores com o objetivo de aproveitar os recursos então a pasta onde ficarão os arquivos do templatedo Joomla mas sem deixar claro para o visitante que será \"[pasta do Joomla] / Templates / planetaxuxa\".ali por trás existe um Joomla. ;) Na pasta do template você irá encontrar normalmenteNo vídeo mostrarei o passo a passo da criação do 3 pastas:layout. Vocês verão que utilizo um wireframe comouma pequena “cola”. Nesse wireframe já determino css: onde ficam armazenadas as folhas de estilo CSSonde ficarão todas as posições do Joomla no layout. Owireframe que montei foi exatamente esse aqui: html: contém o html principal (index.html) mas normalmente o html fica na pasta raiz do template images: todas as imagens do template estarão nessa pasta. O arquivo index.php contém 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 páginas do site serão geradas automaticamente.Note que o nome das caixas correspondem as Tanto o arquivo index.php como o template.cssposições que encontremos no nosso Joomla 1.5 No podem ser acessados e editados sem a necessidadevídeo você irá notar como esse wireframe será muito de FTP, através do gerenciamento de temas.útil para me guiar. Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 9

03Criando um layout para Joomla! Iremos trabalhar bastante com o gerenciamento de temas. Aguarde! Na próxima aula teremos a difícil tarefa de recortar e montar o layout que foi apresentado hoje. Se você não tem muita experiência em CSS, prepare-se pois iremos encarnar Clodovil e Ronaldo Esper para trabalhar muito com estilos. Cores, tamanhos, medidas, sabe como é... ;) Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 10

03Criando um layout para Joomla! Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 11

04Recortando o LayoutContinuamos nossa saga de criar e montar um layout vírgula.do zero especialmente para o Joomla. Na aula de hoje •As propriedades e valores de uma regra sempreiremos recortar e montar utilizando XHTML e CSS o deverão vir entre chaves {}.layout da aula passada. Será bem trabalhoso mas • Para selecionar um elemento XHTML bastanada que em 1 hora não se resolva. colocá-lo como seletor no CSS, sem os sinais de <e>. •Você pode selecionar múltiplos elementos XHTMLDessa vez irei mostrar o recorte e montagem puro e em seu CSS, colocando como seletores e separandosimples, no XHTML utilizando apenas código. Se você com vírgulas.já domina o CSS, maravilha, você irá tirar de letra. Ah! •Para incluir uma folha de estilo ( CSS ) dentro de umaVocê não sabe muuuito de CSS? Mas que bom, pois a página, basta adicionar a tag <style>.idéia dessa aula é despertar dentro de você aquela •Para sites maiores, com muitas páginas, recomenda-vontade de se aprofundar no CSS, mostrando todo o se utilizar uma folha de estilos dentro de um arquivopoder que ele tem. externo (.css). •Para vincular o arquivo externo CSS à sua página,Prestem bastante atenção nessa aula pois basta utilizar o elemento <link>.trabalharemos bastante com esses recursos. Não •Fique atento a herança. Se algum estilo foriremos falar de Joomla nesse primeiro momento, adicionado ao elemento <body>, todos osapenas de código. Na aula que vem pegaremos esse elementos contidos em <body> herdarão a mesmamesmo layout e adaptaremos ao Joomla, onde irei propriedade.mostrar o que interessa e não interessa para o nosso •Caso não deseje que algum elemento não sequerido Joomlão, o CMS camarada. comporte da maneira definida em <body> basta criar uma regra específica, utilizando o elementoRelembrando o CSS como seletor no seu CSS. •Para adicionar classes para diferenciar elementosFui lá no curso PSD para HTML & CSS procurar algumas semelhantes.informações importantes que podem ser •No CSS, utilize \".nomedaclasse\" para definir a regraaproveitadas nessa aula. Trata-se de um pequeno como uma classe.resumão-ão-ão do CSS para você. Trago também •No XHTML, utilize no elemento escolhido a tagalguns links importantes que podem lhe ajudar na \"class=nomedaclasse\", sem utilizar ponto antes doárdua tarefa de construir uma folha de estilo. Lá vai! nome da classe. Para controlar a exibição dos elementos, as CSS o encaram sempre como caixas.Não se esqueça! •Toda caixa possui área de conteúdo, enchimento,• O conteúdo presente nas CSS se chamam regras. borda e margem, sempre opcionais.•Cada regrinha irá fornecer um estilo para o elemento •O conteúdo do elemento se encontra na área deXHTML especificado. conteúdo.•A regra é composta de um ou mais seletores •O enchimento é importante para destacar oacompanhados de propriedades e seus valores. conteúdo, criando em volta da área uma moldura•O seletor irá apontar em qual elemento a regra será transparente.aplicada. •A borda é importante para deixar claro uma•Não se esqueça que no final do valor de cada separação visual do conteúdo. Porém, borda não épropriedade deve ser terminado com um ponto-e- obrigatório. •A margem é o espaço externo cuja finalidade é Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 12

04Recortando o Layout separar os elementos da página •Ao utilizar fundo no elemento, seja em cor ou imagem, este irá aparecer por trás do conteúdo e enchimento, nunca atrás 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 definições de enchimento, margem e borda ou então definílos separadamente. •Para aumentar a separação 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 posição e o comportamento de repetição 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 repetição. •No CSS, você deverá identificar um id utilizando o símbolo #. •Um id poderá ter várias 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 códigos 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 Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 13

05Instalando um Layout no Joomla!inalmente iremos adaptar o nosso querido layout template.css: é a folha de estilo do template. Osimples e bonito no Joomla. Chegou a hora de mostrar nome pode ser qualquer que seja, contanto que esseo que realmente interessa no HTML e o que devemos arquivo seja chamado no index.php. Por convençãomodificar no CSS. Como chamar o conteúdo dinâmico utiliza-se template.css mas você pode fazer não sódo Joomla no HTML? Como alterar o menu? Como com outro nome mas quantos arquivos css vocêalterar o layout do módulo enquete? É muito simples quiser. Ao colocar na pasta css, suas folhas de estilopessoal. Trabalhoso, é verdade, mas simples de irão aparecer no gerenciador de temas, em “editarentender. css”.Quais arquivos compõe um Template Pasta Images: Aqui devem ficar todas as imagensJoomla? relacionadas ao template ( exceto o template_thumbnail.png )Toda instalação de Template para Joomla exigesempre alguns arquivos e pastas fundamentais. Irei O arquivo templateDetails.xmldescrever aqui quem são essas figuras: Dentro do arquivo templateDetails.xml deve havertemplateDetails.xml : nada mais é que um arquivo uma lista com todos os arquivos que compõe oxml. Ele é responsável por dizer ao Joomla quais os template. Além disso deverá conter informaçõesarquivos do template serão instalados assim como os como nome do autor, template, descrição e direitosdetalhes do autor, nome do template, descrição e autorais. Essas informações serão mostradas nadireitos autorais. Além disso será através desse administração do Joomla em Gerenciador de temas.arquivo que iremos passar algumas informações de Segue um exemplo desse arquivo xml:parâmetros ( que será visto nas aulas seguintes ).Note que a letra “D” de details é maiúscula. É assim <install version=\"1.5\" type=\"template\">mesmo, não é erro não. <name>JornaldoInterior</name> <creationDate>Janeiro 2009</creationDate>index.php: é o arquivo principal do template <author>Alunos do Bruno Avila</author>contendo toda sua estrutura. É ele que informa ao <copyright>Curso Design para Joomla</copyright>Joomla onde colocar componentes e módulos. Trata- <authorEmail>[email protected]</authorEmail>se de uma combinação de PHP e XHTML. <authorUrl>cursos.brunoavila.com.br</authorUrl> <version>1.0</version>template_thumbnail.png: nada mais que uma <description>Esse template faz parte do primeiro layout docaptura da tela, exibindo o layout. É de tamanho Curso Online Design para Joomla</description>reduzido, com cerca de 140 pixels de largura.Funciona como uma pré-visualização ao passarmos o <files>cursor em cima do nome do template, no gerenciador <filename>index.php</filename>de temas do Joomla. <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename>Pasta CSS: nessa pasta deverá ser colocado todas as <filename>images/bg-topo.png</filename>folhas de estilo do site. <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

05Instalando um Layout no Joomla! algumas tags importantes, dizendo ao Joomla onde ficará cada posição. Agora vou explicar cada linha desse xml: Não esqueça desta tag: <install version=\"1.5\" type=\"template\"> Essa linha diz ao Joomla que iremos instalar um template <jdoc:include type=”modules” name=”LOCATION” (type=\"template\") para Joomla versão 1.5 (version=\"1.5\") style=”OPTION”> <name>JornaldoInterior</name> Essa tag é responsável por dizer ao Joomla onde ficará Aqui você deve colocar o nome do template. ATENÇÃO: saiba em seu layout cada posição. Assim você poderá dizer que o nome que você colocar aqui também será o nome da pasta que o canto direito ficará a posição left e todos os onde ficará o template. Como a maioria dos servidores não módulos que estiverem em left devem aparecer ali. aceitam nome de pastas com espaços e acentos, evite utilizar. Para isso basta colocar a tag Prefira colocar o nome junto, como no exemplo acima. <jdoc:include type=”modules” name=”left”> <creationDate>Janeiro 2009</creationDate> Aqui você poderá colocar a data de criação do layout. Pode ter o E o Style? Não se preocupe, mais adiante veremos o formato que quiser, mês e ano ou dia/mês/ano. que são os “styles”. ;) <author>Alunos do Bruno Avila</author> O arquivo template.css Aproveite para colocar o nome do autor do template. Esse arquivo contém toda a parte visual do layout, <copyright>Curso Design para Joomla</copyright> módulos e componentes. Existem alguns ids e classes Coloque aqui as informações de direitos autorais. específicas do Joomla, onde você poderá editá-los. Eis a lista de alguns ids e classes do Joomla que você irá <authorEmail>[email protected]</authorEmail> encontrar por aí: Coloque o email do autor. Classes CSS Usado em: <authorUrl>cursos.brunoavila.com.br</authorUrl> padrão do O endereço da URL do site do autor do template active módulos <version>1.0</version> Versão do template. article_separ artigos <description>Esse template faz parte do primeiro layout author Autor de artigo do Curso Online Design para Joomla</description> Aproveite para colocar alguma descrição sobre o template bannerfooter módulo de banner <files><filename>index.php</filename bannergroup módulo de banner Coloque aqui todos os arquivos contidos na pasta do template. Cada arquivo deve estar entre as tags bannerheade módulo de banner <filename></filename>. Caso o arquivo esteja numa pasta, você deve considerar a pasta do template como raiz. Exemplo: banneritem módulo de banner se o arquivo logo.png está dentro da pasta images, coloque: blog conteúdo de blog <filename>images/logo.png</filename> blog_more conteúdo de blog E para finalizar todo o XML, coloque </install> blogsection conteúdo de blog Além disso o templateDetails.xml poderá conter novas posições para o template e parâmetros breadcrumbs módulo breadcrumb ou pathway específicos. Sobre isso veremos nas próximas aulas. button váriosO arquivo index.php buttonheadin vários O index.php nada mais é que uma página XHTML com PHP. É a estrutura do layout. Nele colocaremos clr vários componenthe componente conteúdo_em conteúdo Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 15

05Instalando um Layout no Joomla!conteúdo_rati conteúdo sections conteúdoconteúdo_vot conteúdo sectiontable_f conteúdoconteúdodes conteúdo sectiontablee conteúdoconteúdohea conteúdo sectiontablee conteúdoconteúdopag conteúdo sectiontablefo conteúdoconteúdopan conteúdo sectiontableh conteúdoconteúdopan conteúdo small Fonte pequenaconteúdotoc conteúdo sublevel Menus verticais e horizontais no modo subnivelcreatedate conteúdocreated-date conteúdo title Titulo de módulos wrapper Módulo wrappercurrent Menus verticais e horizontais no modo herançaform-login módulo de login Claro que você não precisa decorar tudo isso. Serve apenas como referência. Temos muitas outras classes.modlgn_pass módulo de login Por isso recomendo o uso do plugin Web Developer do Firefox para que facilite a vida de vocês. É o mesmoform-login- módulo de login que utilizo nos vídeos.form-login- módulo de login No decorrer do curso irei apresentar em nossa parte texto mais informações sobre CSS e tags utilizadas namodlgn_reme módulo de login construção de nossos templates. Aguarde!hasTip ediçãoinput formuláriosinputbox formulárioslatestnews módulo de últimas notíciasmainlevel Menus verticais e horizontaismenu Menus verticais e horizontais Para quem ainda usa Joomla 1.0modifydate data e hora modificadas de artigos Apesar do Joomla 1.5 ter uma série de diferenças domoduletable Módulos em geral Joomla 1.0, não é tão difícil criar um layout para ele. O processo é 90% semelhante ao que mostro no vídeo,mosimage imagens só com algumas diferenças principalmente no que diz respeito a forma de chamar as posições do Joomlamostread Módulo de “leia mais” dentro do HTML.newsfeed news feeds Aprendemos que no Joomla 1.5, para chamar uma posição no HTML basta utilizar a tagpagenav navegação de página <jdoc:include...>. Já no Joomla 1.0 isso é diferente. Basta utilizar opagenav_nex navegação de página <?php mosLoadModules...>pagenav_pre navegação de página Então se você quiser chamar por exemplo a posiçãopagenavbar navegação de página “user1” basta colocar no seu HTML a tag <?php mosLoadModules ( 'user4' ); ?>pagenavcoun navegação de página Se você quiser chamar os metadados do Joomla empagination Numeração de página Head, basta utilizar:pathway módulo breadcrumb ou pathway Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 16pollstablebor Módulo de enquetereadon Link de “leia mais”searchbox Módulo de buscasearch Módulo de buscasearchintro Módulo de busca

05Instalando um Layout no Joomla! <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 invés 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 --> <td colspan=\"2\" height=\"89\" bgcolor=\"#F5C228\">&nbsp;</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

05Instalando um Layout no Joomla!Comparativo das principais Tags entre Joomla 1.0 e 1.5Função Joomla 1.0 Joomla 1.5 <?php mosShowHead(); ?> <jdoc:include type=”head”>Inclui os metadados do Joomla em<head> <?php mosLoadModules ( <jdoc:include 'position' ); ?>. type=”modules”name=”position”>Determina a posição onde serácarregado os módulos Exemplo: Exemplo: <?php mosLoadModules ( 'left' ); <jdoc:include ?> type=”modules”name=”left”>Migalha de Pão (Breadcrumbs) <?php mosPathWay(); ?> <jdoc:include type=”modules”name=”breadcrumbÁrea de Conteúdo Dinâmico, corpo <?php mosMainBody(); ?> s”>do site, parte principal. <jdoc:include type=\"component\"> Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 18

06Adaptando o Design Joomla em outros navegadoresHoje irei mostrar como adaptar seu layout Joomla a do Joomla em Administração de Temas, escolhendo ooutros navegadores, mais precisamente ao Internet tema > edit > edit css. Irá aparecer todos os arquivosExplorer que sei que você tanto adora. ( ah não? Vc css contidos na pasta /css de seu template.odeia? Ah, mas até que ele é bonitinho, vai lá... ) 3. Edite o index.php de seu template, incluindo aGostando ou não, o Internet Explorer ainda é o seguinte linha entre <head></head>navegador mais utilizado no mundo. <!--[if lte IE 6]>Na nossa vídeo-aula de hoje mostro também o layout <link rel=\"stylesheet\" href=\"templates/<?php echo $this-do nosso novo trabalho de Joomla, onde a missão é >template ?>/css/ie6.css\" type=\"text/css\" />criar uma capa com cara de capa de site e sem ser <![endif]-->aqueles sites sem graça com cara de CMS que só otexto muda mas o resto continua tudo igual. O href deve apontar para o arquivo css criado especialmente para aquele navegador. Abaixo vaiAdaptando o layout para Joomla no uma lista que você pode utilizar caso queira linkarInternet Explorer 6 folhas de estilo de outras versões:Na aula de hoje vimos que o layout, assim como <!–[if IE]>Para todas as versões do Internetqualquer layout que utilize XHTML e CSS, nem sempre Explorer<![endif]–>é bem visualidado no Internet Explorer. Deficiências <!–[if IE 5]>Para o Internet Explorer 5<![endif]–>do navegador? Pode ser, mas o que interessa nesse <!–[if IE 5.0]>Para o IE 5.0<![endif]–>momento é como contornar essa situação, afinal o IE <!–[if IE 5.5]>Para o IE 5.5<![endif]–>ainda é o navegador que todo mundo ( ou pelo menos <!–[if IE 6]>Para o IE 6<![endif]–>a maioria ) ainda usa. <!–[if gte IE 5]>Para versões mais atuais que o Internet Explorer 5 inclusive<![endif]–>No vídeo mostrei o layout sendo adaptado ao Internet <!–[if lte IE 5.5]>Para versões mais antigas que o InternetExplorer 6 graças a um arquivo CSS próprio para esse Explorer 5.5 inclusive<![endif]–>navegador, com todas as modificações necessárias. <!–[if lt IE 6]>Para versões mais antigas que o Internet ExplorerMas você mesmo poderá adaptar o layout a outras 6 inclusive<![endif]–>versões. Aqui vão algumas dicas, também citadas novídeo: Fonte: http://enternauta.com.br/ferramentas-para- sites/diferentes-estilos-css-para-internet-explorer-e- firefox/1. A primeira coisa a se fazer é criar um outro arquivo.css na sua pasta /css do seu template. Recomendonomeá-lo de uma forma que você possa identificar.Exemplo: caso a adaptação seja para o navegadorInternet Explorer 6, utilize ie6.css.2. Esse arquivo poderá ser acessado tanto por FTP ( ouno gerenciador de arquivos caso você estejatrabalhando localmente ) bem como pelo gerenciador Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 19

07Instalando um Layout no Joomla – Parte IINa aula de hoje iremos recortar nosso segundo layout do Joomla que a posição irá aparecer.do Joomla! E esse layout tem algo especial. Trata-sede um layout institucional fora daqueles padrões do Como incluir posições dentro deJoomla de conteúdo principal e duas chamadas de artigostexto embaixo, sempre da mesma forma. Agora não,nossa capa será diferente. E somente a capa terá esse Uma tag muito útil é a que chama uma posição dentrolayout, as páginas internas serão diferentes, de um artigo. Dessa forma você poderá chamarmantendo somente a mesma identidade visual. módulos do Joomla no meio do conteúdo. Um cadastro de emails por exemplo ou uma enquete. MasComo criar posições a grande utilidade desse recurso é poder criar o seu módulo e incluir no artigo. Para que isso seja possível,No Joomla temos por default algumas posições já você ir até o gerenciador de artigos, criar ou editarcriadas como left, banner e user1. Mas você pode criar algum artigo existente e lá no meio, onde você quiser,a posição que bem entender. No Joomla 1.0 incluir a seguinte tag:aparentemente parece mais fácil, basta ir em site >gerenciador de tema > posições {loadposition nome-da-posição}Mas agora no Joomla 1.5 essa tarefa ocorre direto no Exemplo, você quer chamar a posição “user1” dentrotemplateDetails.xml. Uma das vantagens é que cada do artigo? Então basta colocar onde você quisertema terá suas posições específicas e ao desinstalar o dentro do artigo a seguinte tag: {loadpositiontema, a posição também é desinstalada. user1}Para incluir a posição desejada, bata abrir O artigo fazendo parte da<positions>, colocar <position>nome da posição, composição do layoutfecha </position> e fecha </positions> como noexemplo abaixo: Nessa aula vimos como utilizar os artigos a nossa favor na hora de construir um layout para Joomla,<positions> sobretudo na capa. Utilizando a combinação artigo + loadposition + css é possível criar uma série de <position>mainmenu</position> possibilidades de capa com o Joomla. <position>logo</position> <position>banner</position> Como sabemos que o Joomla alimenta o site com <position>creditos</position> conteúdo na área de artigos, ou mais precisamente <position>chamada01</position> no <jdoc:include type=”component”>, podemos <position>chamada02</position> incluir no artigo que aparecerá na capa algumas divs e <position>chamada03</position> ids, fazendo com que seu layout se integre ao design <position>chamada04</position> principal.</positions> A dica é desabilitar o editor visual do seu navegador para que o mesmo não suje o seu código e incluir aliCaso você já tenha instalado o tema e esqueceu ou diretamente o html, com divs chamando ids ouqueira criar uma nova opção, basta ir no FTP, na pastado seu tema e editar templateDetails.xml, incluindo Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 20sua posição. Assim basta dar reload no gerenciador

07Instalando um Layout no Joomla - Parte II 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 módulos específicos como chamadas e imagens que necessitem de atualização e publicá-los na capa do site, dentro do artigo. Dessa forma qualquer pessoa poderá atualizar trechos do site, bastando editar os módulos. Dessa forma acredito que você já está começando a visualizar inúmeras possibilidades de criação. Na próxima aula iremos fazer a página interna, diferente da página principal mas mantendo sua identidade visual. Abordaremos também os parâmetros do template, uma função muito útil que é novidade no Joomla 1.5. Para o alto e Avante! Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 21

08Página Interna & ParâmetrosNa aula de hoje iremos criar a página interna de grupo chamado “Parâmetros” contendo um par denosso segundo layout do Joomla! A idéia é fazer uma campos denominados Variação de Cor, Variação depágina com formatação diferente da capa, mas Plano de Fundo e Largura. Estes parâmetros sãoconservando os itens importantes de identificação, o default do tema, neste caso, eles controlam ologotipo e as posições dos menus. esquema de cores e largura do template.Depois de realizar essa árdua tarefa, irei apresentar a Os Parâmetros de Template permitem que ovocês o Parâmetros, uma nova função que o Joomla administrador possa ajustar o comportamento de um1.5 nos trouxe. modelo por meio de um formulário no gerenciamento do tema. Para acrescentar essas funcionalidades aoParâmetros seu tema é necessário realizar três etapas:O gerenciador de temas sempre foi uma das mais ?Adicionando um elemento <param> a seçãopoderosas funcionalidades do Joomla, mas antes do <params> do templateDetails.xmlJoomla 1.5 era difícil para as empresas de web designflexibilizar seus layouts. Por exemplo, um template ?Criando o arquivo params.ini que irá armazenar ocom vários esquemas de cores disponíveis, para valor atual do parâmetro e deverá ficar na pasta raizalterar essas cores era necessário ativar arquivos de do template.css, apontando para pastas específicas para cada cor.Alguns webdesigners criavam seus próprios ?Adicionando código PHP no arquivo index.php paramétodos para permitir que o administrador do site recuperar o valor atual do parâmetro e agir sobre ela.pudesse alterar cores e outras funcionalidades deforma mais simples, mas mesmo assim, muitas vezes Definindo um parâmetro noo administrador se via a mexer no código ou fuçar no templateDetails.xmlFTP para alterar uma ou outra coisa.Isso tudo mudou com a nova versão 1.5 do Joomla O templateDetails.xml está sempre na pasta raiz doque nos trouxe os parâmetros de template. Na template. Por exemplo, para o template Beez overdade, seria mais correto chamar apenas de caminho completo será algo parecido com: [Joomla] /parâmetros já que sua funcionalidade é genérica para templates / Beez / templateDetails.xmltodos os tipos de extensão: componentes, módulos,plugins e templates. Nesta aula você aprenderá Localize o elemento <params>, geralmente no finalcomo criar e utilizar parâmetros em seus templates. do arquivo. Se não houver nenhum elementoVocê vai aprender a criar o seu próprio parâmetro <params> você precisará adicionar uma. Deve serpersonalizado para atender às suas necessidades adicionado abaixo do <install>. Não se esqueça deespecíficas. Conhecimento em PHP vai lhe ajudar fechar o elemento com um </ params>.bastante. Para cada parâmetro que pretende definir, deverá serPara ver um exemplo de parâmetros de template em adicionado um elemento <param>. Esse elementoação, vá em Extensões > Administrar Tema e clique tem um número de argumentos obrigatórios esobre o template “rhuk_milkyway”. Após selecionar opcionais que dependem do tipo de argumento. Osclique em [Editar]. Nessa tela você verá que existe um Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 22

08Página Interna & Parâmetros <option value=\"0\">hide</option> <option value=\"1\">show</option> </param> únicos argumento obrigatório é o type e name mas </params> default, description e label, são comuns à maioria dos tipos de parâmetro. Estes argumentos obrigatórios / Na tela de administração do tema, aparecerá assim: comuns são os seguintes: ?Type especifica o tipo de formulário HTML utilizado no Parâmetros na tela do administrador para permitir ao utilizador alterar o valor do parâmetro.?Name é o único nome do parâmetro. Você irá referir- Os valores escolhidos nos parâmetros serão gravadosse este nome ao recuperar o valor do parâmetro no no arquivo param.ini, que está na pasta raiz docódigo do template. template.Os seguintes argumentos são opcionais, mas são Nota: caso apareça a mensagem na caixa decomuns a quase todos os tipos de parâmetro: parâmetros algo como “Protegido” ou “Unwritable” em vermelho, verifique se existe o arquivo params.ini?Default é o valor padrão do parâmetro. na pasta raiz do seu template. Caso não exista, basta criar um arquivo texto vazio com o nome params.ini.?Description é o texto que será exibido como uma Você não precisará editá-lo, o Joomla só irá utilizardica para o campo no Parâmetros na tela do esse arquivo para gravar os dados selecionados noadministrador. gerenciador de Parâmetros.?Label é o título do campo que será mostrado ao Tendo definido um parâmetro no arquivousuário na tela de Parâmetros do template. templateDetails.xml e guardado um valor para ela no params.ini, você deverá colocar no seu index.phpOs argumentos opcionais dependem do tipo de uma função PHP recuperando o valor gravado emparâmetro. Se você for programador, também é params.ini, seguindo o padrão:possível criar o seu próprio parâmetro personalizado.Nesse caso recomendo a documentação avançada do <?php $myParam = $this->params->get(Joomla em http://docs.joomla.org/ 'parameterName' ); ?>Creating_custom_XML_parameter_types Por exemplo, suponha que o seu template tem umPor exemplo, o código XML a seguir mostra uma parâmetro chamado templateColour que assumeseção <params> com dois parâmetros, um para uma várias opções de valores que determinam o esquemalista drop-down do template, o outro para um botão de cor a ser utilizado. As cores são normalmenteque permitirá ao usuário mostrar ou ocultar uma definidas em arquivos CSS. O seguinte códigomensagem de copyright. recupera o parâmetro, em seguida, adiciona o estilo adequado para tornar a página com o esquema de<params> cores escolhido. <param name=\"templateColour\" type=\"list\" default=\"blue\" label=\"Template Colour\" description=\"Choose the template <?php $tplColour = $this->params->get( 'templateColour' ); $this->addStyleSheet( $this->baseurl . '/templates/' . $this-colour.\"> >template . '/css/' . $tplColour .'.css' ); <option value=\"blue\">Blue</option> ?> <option value=\"red\">Red</option> <option value=\"green\">Green</option> Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 23 <option value=\"black\">Black</option> </param> <param name=\"authorCopyright\" type=\"radio\" default=\"1\"label=\"Author Copyright\" description=\"Show/Hide authorcopyright.\">

08Página Interna & Parâmetros Para outro exemplo, suponha que o seu template tenha um parâmetro chamado authorCopyright que assume o valor 0 para ocultar uma copyright, ou 1 para mostrar isso. O seguinte código recupera o parâmetro: <?php if ($this->params->get( 'authorCopyright' )) : ?> <div class=\"copyright\"> Copyright &copy; 2008 Fat Pigeon Templates </div> <?php endif; ?> No caso de nossa vídeo aula, recuperamos o valor escolhido em parâmetros, alterando a cor do topo do layout, bastando utilizar a seguinte função 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 usuário escolhesse um dos dois, esse nome seria recuperado no body, como um sufixo de uma classe. Portanto, quando o usuário escolhesse “blue”, este nome iria para a classe de body, substituindo a função php e ficando class=“bg_blue”. Então bastou criar a regra para “.bg_blue” dentro do CSS do template. Nas próximas aulas iremos trabalhar mais com parâmetros em nosso novo layout para Joomla. Aguardem! Para o alto e Avante! Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 24

09Module ChromeHoje iremos criar um site pra valer. E com todo O Módulo Chromecuidado do mundo pois o site é do professor que vosfala. Tem que sair tudo direitinho por isso fiz o nosso Enquanto montamos o layout do nosso terceiroterceiro layout com todo carinho, cheio de detalhes ali trabalho, já vou abordar através de nossa aula textoe aculá, para atender as minhas necessidades e uma novidade da versão 1.5 do Joomla e que, seobjetivos. vocês notarem no vídeo, utilizei junto com nossa tag jdoc:include. Trata-se do “Module Chrome”.Trata-se de um site estilo portal, com diversosmódulos e seções. Seu objetivo é apresentar meu O Module Chrome foi inventado para dar uma certatrabalho, os serviços e cursos. Tem também o caráter quantidade de controle sobre a forma e as tags dede venda pois através do site que o cliente entrará em saída do módulo. Reconhecemos o Module Chromecontato comigo desejando o serviço de criação. No através do seguinte atributo:caso do Cursos a idéia é redirecionar para o siteespecífico de cursos. <jdoc:include type=\"modules\" name=\"user1\" style=\"custom\" />Vocês verão que será um trabalho pesado, porém nãoserá difícil. Só irá demandar tempo. Assim, através do Onde “custom” poderá ser rounded, table, horz ,meu novo site irei explicar alguns detalhes na xhtml, outline e none.implementação de um layout para Joomla enovidades da versão 1.5. Através do Module Chrome é possível determinar o tipo e quantidade de “pré-HTML” inserido antes,Em nossa primeira aula sobre o trabalho 3 de nosso depois ou em torno da saída de cada módulo, usandocurso irei apresentar o layout já pronto para não estilo CSS. Dessa forma é possível criar módulos comperdermos tempo. Vocês irão notar que o CSS é bem canto arredondados sem necessidade de background.extenso devido a complexidade um pouco maior emrelação aos layouts anteriores. Por essa razão já Criando um Module Chromeapresento o CSS pronto e a estrutura em XHTMLtambém, porém irei comentar cada linha do código Você pode facilmente criar um estilo de Chrome paraproduzido. Falaremos muito de CSS e mais uma vez utilizar em seus módulos, diferente dos 6 estilosmostrarei a criação de módulos que ajudarão na padrão do Joomla.composição do layout. Para isso basta editar o module.php.A partir daí, na aula 10, iremos focar em algumasfuncionalidades do Joomla. O desafio será fazer com ATENÇÃO: Recomendo criar um backup doque a coluna que consta o type=”component” mude module.php antes de brincar com ele. Vai que vocêde tamanho nas páginas internas, crescendo largura e brinca, brinca e não sabe mais o lugar de cada coisa? ;)altura quando as colunas da esquerda ou direita nãoestiverem presentes. Além disso, nas aulas seguintes Para encontrar o module.php basta ir na pasta do seuirei mostrar a instalação e modificação de layout de joomla e entrar nas seguintes pastas: administrator >alguns componentes importantes para esse layout. templates > system > html. Pronto, lá estará o module.php Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 25

09Module Chrome Nele você irá encontrar algo como código abaixo: * xhtml (divs and font headder tags) */ function modChrome_xhtml($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class=\"module<?php echo $params- >get('moduleclass_sfx'); ?>\"> <?php if ($module->showtitle != 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif; } /* Note que as tags acima é exatamente a saída html do estilo “xhtml”. Você poderá alterar essa tag como quiser e incluir até algum CSS específico. Se você entende PHP, você estará feito. ;) Divirta-se! E na próxima aula vocês irão ver a difícil tarefa de criar uma página interna para o site do professô! Fique aí, não mude de canal pois daqui a pouco a gente volta! Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 26

10Count Modules Dessa forma temos:Na aula de hoje iremos conhcer uma função muitoimportante, o count modules. Será através dele que <?phpiremos montar uma página interna com diagramação if($this->countModules('colesq and coldir') == 0) ;diferenciada, mesmo diante de um index.php com if($this->countModules('colesq') == 0)\";tantas colunas e um type=component presente num if($this->countModules('coldir') == 1) \";espaço tão pequeno. if($this->countModules('colesq and coldir') == 1); ?>Como fazer com que a coluna do meio aumente,pegando o espaço das demais colunas que não A partir daí iremos criar condições. Se colesq e coldirestiverem ativadas? Vou responder essa dúvida no estiverem sem módulo algum ( == 0 ) então queronosso vídeozito de hoje. que $contentwidth seja igual a \"100\". Se colesq estiver sem módulo e somente coldir tem módulosO countModules é um método que pode ser utilizado habiltados ( colesq == 0 ) então quero quede diversas formas, através da contagem de módulos. $contentwidth seja igual a \"-dir\". Já se coldir não contiver nenhum módulo ativo e colesq sim, então oUm exemplo: para determinar o número total de $contentwidth deverá ser \"-esq\". Agora, se tivermosmódulos ativados nas posições user1 e user2 basta módulos em coldir e colesq, então $contentwidthchamar a seguinte função: deverá ser \"-meio\".$this ->countModules ( 'user1 + user2' ); Dessa forma, a condição ficará assim:Além dos operadores aritméticos ( -, +, etc ), você <?phppoderá utilizar os operadores lógicos, “and” e “or”. if($this->countModules('colesq and coldir') == 0) $contentwidth = \"100\";Um exemplo do uso de operadores lógicos. Para if($this->countModules('colesq') == 1) $contentwidth = \"-dir\";determinar se o user1 e o user2 possuem módulos if($this->countModules('coldir') == 1) $contentwidth = \"-esq\";ativados, basta usar a função: if($this->countModules('colesq and coldir') == 1) $contentwidth = \"-meio\";$this -> countModules ( 'user1 and user2' ); ?>A partir dessa contagem é possível definir condições, Esses valores que passei em $contentwidth serviráatravés de valores. Veja a seguinte situação que para compor o nome da regra CSS de colmeio. Vejadescrevo em nossa vídeo aula. Temos três colunas: como chamar esses valores para o ID da div colmeio:colesq, colmeio e coldir. Meu desejo é que se nenhummódulo estiver ativado na coluna colesq, o colmeio <div id=\"colmeio<?php echo $contentwidth; ?>\">aumente sua largura, preenchendo o espaço dacoluna “colesq”. O mesmo deverá ocorrer caso não Note que o valor que dei em $contentwidth sãoseja utilizado nenhum módulo em coldir. sufixos. Logo, se tivermos módulos na coluna da esquerda ( colesq ), o nome do ID da div passará a serPara isso, primeiro é necessário contar os módulos e colmeio-dir. Se tivermos módulos na coldir, o nome doaplicar valores a elas. ID será colmeio-esq. Se existir módulos ativados nas duas colunas, o nome do ID será comeio-meio. E se não existir nenhum módulo em colesq e coldir, então o nome do ID passará a ser colmeio100. Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 27

10Count Modules Pronto! Dessa forma você poderá criar regras CSS diferentes para cada diagramação. No caso do nosso exemplo, se a coluna da esquerda não contiver nenhum módulo 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 não estão sendo visualizados no layout? Isso é fácil de resolver. Utilizando o nosso exemplo, para sumir com o html das colunas coldir e colesq caso essas não tenham módulos habilitados, basta utilizar a seguinte função antes de cada div: <?php if($this->countModules('colesq')) : ?> <div id=\"colesq\"> <jdoc:include type=\"modules\" name=\"colesq\" style=\"xhtml\" /></div> <?php endif; ?> <?php if($this->countModules('coldir')) : ?> <div id=\"coldir\"> <jdoc:include type=\"modules\" name=\"coldir\" style=\"xhtml\" /></div> <?php endif; ?> Dessa forma, ao ver o código fonte da html gerada pelo index.php e Joomla, as tags referentes a colesq e coldir desaparecerão caso não tenha nanhum módulo habilitado dentro delas. ;) Bem, agora vamos instalar alguns componentes nesse layout? Bora? Na próxima aula irei instalar componentes interessantes e irei mostrar como adaptá-los ao nosso layout Joomla. Aguardem! Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 28

11Componentes pasta tmpl contendo os templates com o código deNa aula de hoje iremos abordar uma das novidades saída. Basicamente html + php.do Joomla 1.5 que é a facilidade de alterar o layout deum componente através de arquivos de template. O Experimente entrar emmesmo poderá ser aplicado aos módulos. Na vídeo- components\com_easybook\views\easybook\tmpl eaula escolho dois componentes para instalar no meu alterar o código de default_header.php como faço emsite, uma fotogaleria e um mural de recados. Vocês nossa vídeo-aula. Através desse arquivo é possívelverão que a fotogaleria me dá uma série de acrescentar divs ao componente, bem como atribuirpossibilidades diretamente pelo seu gerenciador. ids, classes e alterar posicionamentos. Enfim, éPorém o mesmo não ocorre com o componente de possível alterar todo o seu layout.mural. Como resolver essa questão? Simples, senta,senta que lá vem a história! A funcionalidade de alteração de template provê um poderoso mecanismo para customizar o site JoomlaEstrutura de Template através do seu template. Você pode criar templates de( Componentes e Módulos ) saída que sejam focalizados nos SEO (mecanismos de busca), acessibilidade ou necessidades específicas deNormalmente você irá encontrar o template do um cliente.componente ou módulo dentro da pasta principal docomponente, em uma pasta chamada /tmpl/. Por Experimente modificar os arquivos contidos na pastaexemplo: tmpl de outros componentes e módulos. Mas não esqueça de fazer um backup antes. ;)modules/mod_poll/tmplmodules/mod_newsflash/tmpl Encerramos então nosso terceiro trabalho. Estamoscomponents/com_login/views/login/tmpl chegando pertinho do final do curso mas aguarde acomponents/com_content/views/section/tmpl próxima aula pois irei trazer alguns presentinhos virtuais pra vocês, queridos alunos!A estrutura básica para todos os componentes emódulos é a seguinte:visualização -> layout -> templatesAlterando o Layout do ComponenteOs componentes funcionam quase da mesmamaneira que os módulos, exceto que existem muitasvisualizações associadas com muitos componentes.Por exemplo, se olharmos na pasta com_easybookencontraremos uma pasta chamada views(visualizações).Nessa pasta encontraremos mais duas, uma chamada“easybook” e outra “entry”. Em ambas existem a Todos os Direitos Reservados. © Bruno Ávila - http://cursos.brunoavila.com.br 29

Este material é protegido pela lei do direito autoral. Todos os direitos reservados. Nenhuma parte desta publicação pode ser reproduzida, transmitida, modificada, distribuída, porqualquer meio, seja eletrônico, mecânico ou fotocópia, sem expressa autorização do autor Bruno Ávila ou da empresa Ávila Comunicação. Esta apostila faz parte integrante do Curso Online Design para Joomla e não pode ser comercializado.