Joomla15 TemplateTutorial Traduzido

Joomla!
Um Guia do Usurio
Construindo um Website Poderoso com o Joomla!
JOOMLA! 1.5
TUTORIAL SOBRE TEMPLATE

Joomla! A Users Guide Building a Joomla! Powered Website Extrato do Captulo 11 do livro:
Autor: Barrie North, www.compassdesigns.net (http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.html)

Traduo livre: Geciel Rangel Costa - http://gecielc.spaces.live.com/
Para download do documento original e arquivos modelos do template_1.5: http://www.compassdesigns.net/joomlalibrary/task,doc_download/gid,13/Itemid,52/
2006 Compass Design
1 de 53
Esta amostra de contedo foi extrada do prximo lanamento do livro entitulado Joomla! A User Guide Building a Joomla! Powered Website, a ser publicado a partir do ms de maio de 2007 pela Prentice Hall Professional. licenciado sob a atribuio de no comercial-no derivativo 2.5
Joomla! Um Guia do Usurio

Captulo 11 Neste captulo, demonstraremos os passos para se criar um template do Joomla. Especificamente, criaremos um template que emprega folha de estilos em cascata (CSS) para produzir um leiaute sem o uso de tabelas. Esta uma meta desejvel, pois significa que o cdigo do template ser mais fcil de ser validado nos padres especificados pelo Consrcio da World Wide Web (W3C). Tambm, tender a carregar mais rpido, ser mais fcil de manter e ter melhor performance em mecanismos de buscas. Discutiremos esses assuntos em detalhe ao longo deste captulo. Incluso neste captulo esto s seguintes sees: O que um template Joomla? -> pg. 02 Explica quais funes so executadas por um template Joomla e as diferenas entre um template sem contedo e quando algum contedo adicionado ao CMS. Processo de desenvolvimento no localhost (local) -> pg. 03 Como o processo de desenvolvimento difere daquele de uma pgina esttica (X)HTML. W3C e Programao sem Tabela -> pg. 05 As implicaes do desenho sem tabelas no Joomla e o relacionamento entre os padres da W3C, usabilidade e acessibilidade. Os componentes de um template -> pg. 07 Quais arquivos compem um template do Joomla e as funes que eles exercem. Empregando o CSS para criar um leiaute -> pg. 15 Como criar um leiaute de trs colunas ordenadas empregando CSS ao invs de tabelas. O CSS Especfico do Joomla -> pg. 22 Uma introduo aos estilos bsicos que podem ser empregados com o Joomla, alm de uma lista padro de estilos que so empregados no mecanismo central do Joomla. Mdulos -> pg. 23 Como posicionar e aplicar estilos aos mdulos, incluindo tcnicas para cantos arredondados. Menus -> pg. 28 Uma estratgia simples para produzir menus enxutos com CSS que imitam os efeitos daqueles produzidos com JavaScript. Suprimindo Colunas -> pg. 32 Como controlar a apresentao de colunas e como suprimi-las quando no houver contedo a ser apresentado. Fazendo um verdadeiro template para verso Joomla 1.5 -> pg. 36 Aqui vamos realmente empregar um modelo especfico e apresentar os passos para criar um template til para o Joomla 1.5
O que um template Joomla? O template no Joomla uma srie de arquivos que dentro do CMS Joomla controla a apresentao de contedo. O template no Joomla no um site da web, e nem mesmo pode ser considerado como um modelo de um site completo da web. O template o esboo principal bsico para visualizar o site Joomla. Para produzir o efeito de um site completo, o template trabalha em conjunto com o contedo armazenado nas bases de dados do Joomla. Um exemplo pode ser visto na Figura 11-1.
2006 Compass Design 2 de 53

Fig. A Template Joomla Com amostras de contedo
Fig. B Template Joomla Com pouco ou sem contedo
Figura 11-1 Template com e sem contedo
A Figura A apresenta o template em uso com amostras de contedo. A Figura B apresenta o template como ele deve parecer, com uma lista bsica de recursos da instalao do Joomla, com pouco ou sem contedo. O template moldado de forma que quando o seu contedo inserido, ele herdar as especificaes das folhas de estilo definidas no template, tais como o estilo de link, menus, navegao, tamanho do texto e cores, para citar alguns. Observe como as imagens associadas com o contedo (as imagens das pessoas) no so parte do template, enquanto a imagem no cabealho (parte superior da pgina) parte do mesmo. Empregando um template para um CMS, como o Joomla faz, tem um nmero de vantagens e desvantagens: H uma completa separao do contedo e da apresentao, especificamente quando o CSS empregado para o leiaute (em oposio a se ter tabelas no arquivo index.php). Este um dos principais critrios para um site atender aos modernos padres da web. Um novo template, e da um visual completamente novo para um site, pode ser aplicado instantaneamente. Isto pode, inclusive, permitir a especificao de diferentes localizaes/posicionamentos do contedo, assim como cores e grficos. Se leiautes diferentes forem necessrios para um site, isto pode ser difcil de se conseguir. Embora diferentes templates possam ser aplicados para diferentes pginas, esta construo em funcionalidade no confivel. Melhor empregar comandos condicionais em PHP e criar um leiaute que dinamicamente ajusta o nmero de colunas baseado no contedo a ser publicado. Processo de desenvolvimento no localhost (local) Uma pgina que voc v em um site Joomla no esttica. Isto significa que ela gerada dinamicamente a partir do contedo armazenado no banco de dado. A pgina que voc v

criada a partir de vrios comandos em PHP que esto no arquivo index.php do template. Isso apresenta alguma dificuldade na fase de desenvolvimento. comum hoje empregar um editor HTML do tipo o que voc v o que obtm (WYSIWYG), tal como o Dreamweaver. Isso significa que o programador nem mesmo precisa codificar em HTML. Contudo, isso no possvel no processo de programao de template no Joomla, pois editores WYSIWYG no podem apresentar pginas dinmicas. Isso significa que o programador deve codificar manualmente e ver a sada das pginas em PHP em uma pgina gerada por um servidor. Com uma conexo rpida o suficiente, este poder ser o prprio servidor web, mas muitos programadores empregam um servidor local em seu prprio computador. Este uma parte do software que processar as pginas da web no prprio computador do programador. No existe a maneira certa para criar pginas da web, isto depende do conhecimento do programador. Aqueles mais grficos fazem uma imagem de uma pgina em um programa grfico, como o Photoshop, e ento particionam a imagem para usar (tcnica conhecida como slice and dice [cortar em pedaos e ordenar]). Os programadores mais inclinados para a rea tecnolgica, simplesmente vo direto para o CSS e comeam a codificao. Contudo, como mencionado acima, o programador de template Joomla limitado, pois ele no pode ver instantaneamente o efeito da sua codificao no mesmo editor; dessa forma o processo de programao modificado deve ser: 1. Fazer as programaes com um editor HTML e salvar as modificaes; 2. Ter um localhost [servidor local] em execuo para executar o Joomla; 3. Ver o que foi programado no navegador; e 4. Voltar para o passo 1. Opes do Servidor Local No captulo 3 [do livro a ser lanado e mencionado na pgina inicial] vimos como instalar um servidor web para rodar em seu computador. Descrevemos um deles para windows chamado Wamp. Para seguir adiante neste captulo precisaremos t-lo instalado [ou um outro, de sua preferncia]. Se precisar, vou ficar por aqui enquanto voc instala um servidor local. Dica Uma tcnica til para fazer o processo de programao mais eficiente apresentar a pgina que se est desenvolvendo a partir de um servidor e ento copiar e colar o cdigo fonte em um editor. Por exemplo, to logo o seu leiaute em CSS esteja estabelecido, voc pode empregar um servidor local para apresentar a pgina, ento selecione no navegador a opo de ver o cdigo fonte. Voc ento poder copi-lo e col-lo em seu editor. Voc poder agora facilmente especificar estilos para as pginas empregando CSS e no precisar seguir os passos especificados anteriormente.
Um editor XHTML livre Para aqueles que no possam pagar por um editor comercial como o Dreamweaver, existem alguns editores livres disponveis. Nvu uma escolha slida, foi construdo com validao e 100% de fonte aberta. Isto significa que qualquer um bem-vindo para fazer o download do Nvu sem custos (http://www.nvu.com/download.php), incluindo o cdigo fonte, se voc desejar fazer alteraes especiais.

W3C e Programao sem Tabela Usabilidade, acessabilidade e otimizao para mecanismos de buscas so todos termos empregados para descrever pginas de alta qualidade atualmente no mundo da web. Na realidade, existe uma significativa quantidade de sobreposio entre eles e uma pgina da web que demonstra que a caracterstica de um afeta os demais, como demonstrado na figura 11-2. A maneira mais fcil para alcanar estas trs metas faz-lo empregando o sistema disponvel na pgina web que seja validado com os padres da W3C. Por exemplo, um site que estruturado semanticamente em (x)html (o xhtml explica o documento, no como ele se apresentar) ser facilmente lido em um leitor de pgina por algum que tenha dificuldade de viso. Ser facilmente lido tambm por ferramentas de mecanismos de busca. Google efetivamente cego em como ele l o seu site.
Site pobre
Cdigo vlido pela W3C Figura 11-2 A sobreposio entre SEO, acessibilidade e usabilidade
Um site que validado nos padres estabelecidos pelo Consrcio W3C tem uma estrutura melhor para faz-lo mais acessvel, usvel e otimizado para mecanismos de buscas. Pense nisso como construindo blocos para a sua casa. Um site construdo com os padres mais forte e seguro. Voc pode verificar suas pginas nos servios de validao de HTML da W3C gratuitamente (http://validator.w3.org/). Em resumo, um site que atende as regras de padronizao e validao da W3C emprega semntica (x)html e separa contedo de apresentao empregando CSS.
2006 Compass Design
5 de 53

Para ajud-lo a entender de onde vieram os padres web, um pouco de histria til. Muitas pginas da web hoje so programadas para navegadores antigos. Por que? Os navegadores vem continuamente se desenvolvendo desde o incio da web. Alguns novos apareceram e antigos desapareceram (lembra-se do Netscape?) Um outro fator complicador que diferentes fabricantes de navegadores (como a Microsoft) tendem a ter os seus interpretadores html/xhtml do navegador ligeiramente diferentes dos demais. Isto tem levado os programadores web a desenvolverem os seus sites para suportar antigos navegadores assim como novos. Isto frequentemente leva a deciso que a pginas da web precisam apropriadamente nesses navegadores legados. Os padres web colocam em questo um conjunto de regras para todos os navegadores web usarem para apresentar uma pgina da web. A organizao principal apresentam esses padres no Consrcio W3C, cujo Diretor, Tim Berners-Lee tem a distino de ser atualmente o inventor da rede mundial (www) em 1989. Pergunte a cinco programadores o que so padres web e voc ter cinco respostas. Mas muitos concordam que elas so baseadas em se seguir cdigos vlidos, seja html ou xhtml (ou outros). Antes usvamos um exemplo de se construir cdigos por construir. Os padres apresentam-nos um modelo para os cdigos de uma pgina da web ser desenvolvida para alcanar uma consistncia. fcil verificar o seu cdigo no http://validator.w3.org. Assegure-se de empregar o tipo correto de documento (DOCTYPE) quando tentar validar o seu cdigo. Este artigo no site da Compass Design ajuda a explicar mais isto: http://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-theblank-joomla-template.html. Cdigo Correto Semanticamente Mencionamos antes que ser semntico significa que o (x)html na pgina da web descreve somente o contedo, no a apresentao. Em particular isto significa que a organizao da estrutura dos marcadores h1/h2 e etc., esto somente empregando tabelas para dados tabulados, e no para especificar o leiaute da pgina. Folhas de Estilo em Cascata (CSS) Diretamente relacionado a se ter cdigos semnticos empregar folhas de estilo em cascata para controlar a aparncia e leiaute da sua pgina da web. Folhas de Estilo em Cascata (CSS) um mecanismo simples para adicionar estilos (por exemplo: fontes, cores e espaos) para documentos web. (Fonte: http://www.w3.org/Style/CSS/). Eles existem em paralelo ao cdigo (x)html e permitem que voc separe completamente o contedo (cdigo semntico) da apresentao (CSS). O melhor exemplo disso o CSS Zen Garden (http://www.csszengarden.com/tr/portuguese/) (http://www.csszengarden.com/), um site onde a mesma semntica XHTML moldado em diferentes e nicas maneiras com diferentes cdigos CSS. O resultado uma pgina que parece muito diferente, mas tem o mesmo contedo central. Programar sites poderosos com o Joomla apresenta atualmente desafios considerveis para atender aos padres de validao. Nas primeiras sries lanadas, 1.0.X, o cdigo empregava uma significativa quantidade de tabelas para as pginas de sada. O que no estava realmente empregando CSS para a apresentao, nem produzia cdigos corretos semanticamente. O problema complicado pelo fato de que poucos desenvolvedores de cdigos estejam empregando o CSS, e muitos empregam tabelas para gerarem o cdigo, tambm.

Felizmente, o time de desenvolvimento do ncleo do Joomla reconheceu este fato. Na verso 1.5 possvel para programadores de templates sobrescreverem completamente a sada do ncleo (chamado de uma vista) e retirar todas as tabelas, customizar o leiaute, o que quer que queiram. Entretanto, cuidados devem ainda ser tomados quando criando um template de forma que ele seja acessvel (por exemplo: tamanho da fonte escalvel), usvel (por exemplo: navegao clara) e otimizado para mecanismos de buscas (por exemplo: ordenamento de fonte). Os Componentes de um Template De forma a entender o contedo de um template, iniciaremos dando uma olhadela em um template em branco (vazio). Um template do Joomla composto de vrios arquivos e pastas. Esses arquivos devem ser colocados no diretrio /templates/ de uma instalao Joomla, em sua pasta prpria. Ento, se tivermos dois templates instalados, nosso diretrio se parecer com:
/templates/element /templates/voodoo
Observe que os nomes dos diretrios dos templates devem ser os mesmos que os nomes dos templates, neste exemplo acima element e voodoo. Obviamente que so sensveis ao tamanho da letra e no devem conter espaos. Dentro do diretrio de um template existem um nmero de arquivos chaves:
/element/templateDetails.xml /element/index.php
Esses nomes de arquivos e localizao devem ser coincidentes exatamente, pois assim so chamados pelo script do ncleo do Joomla.
templateDetails.xml
(Observe a letra D maiscula). Esse um arquivo metadata de formato XML que diz ao Joomla quais os demais arquivos so necessrios quando carregando uma pgina da web que usa esse template. Tambm detalha o autor, direitos autorais e os arquivos que compem o template (incluindo as imagens eventualmente empregadas). O ltimo emprego desse arquivo para instalar um template quando empregando a rea de administrao/manuteno do site.
Index.php
Este arquivo o mais importante. Ele monta o site e diz ao CMS Joomla onde colocar os diferentes componentes e mdulos. Ele uma combinao de PHP e (X)HTML. Em quase todos os templates, arquivos adicionais so empregados. convencional (embora no requerido pelo ncleo do Joomla) nomear e localizar todos os arquivos conforme mostrado abaixo:
/element/template_thumbnail.png /element/css/template.css /element/images/logo.png
Esses so apenas exemplos, vamos examinar cada um desses arquivos de per si.
/element/template_thumbnail.png 2006 Compass Design 7 de 53

uma captura da imagem da tela do navegador (geralmente reduzida para cerca de 140 pixels de largura por 90 pixels de altura). Depois que o template tiver sido instalado, isto funciona como uma imagem de pr-visualizao visvel na rea de administrao do Joomla, no Gerenciamento de Template (Template Manager) e tambm no mdulo de seleo de templates na pgina de abertura, se empregado.
/element/css/template.css
o CSS do template. A pasta de localizao opcional, mas voc dever especificar onde ele est no arquivo index.php. Voc pode denomin-lo como quiser. Geralmente o nome apresentado o empregado, mas veremos adiante que h vantagens em se ter outros arquivos css tambm.
/element/images/logo.png
uma imagem que acompanha o template. Novamente, por razes de organizao, muitos programadores colocam este arquivo na pasta de imagens (images). Aqui temos uma imagem chamada de logo.png, como um exemplo. O arquivo templateDetails.xml O arquivo templateDetails.xml deve relacionar todos os arquivos que fizerem parte do template. Ele tambm relaciona informaes tais como o nome do autor e direitos autorais. Algumas dessas informaes so mostradas na rea de administrao/manuteno na opo de Gerenciamento de Template (Template Manager). Um exemplo de arquivo xml apresentado abaixo:
<?xml version=1.0 encoding=utf-8?> <install version=1.5 type=template> <name>TemplateTutorial15</name> <creationDate>December 2006</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail>compassdesigns@gmail.com</authorEmail> <authorUrl>www.compassdesigns.net</authorUrl> <version>1.0</version> <description>Template for official Joomla documentation guide</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/somejsfile.js</filename> <filename>images/threecol-l.gif</filename> <filename>images/threecol-r.gif</filename> <filename>css/customize.css</filename> <filename>css/layout.css</filename> <filename>css/template_css.css </filename> </files> <params> <param name=showComponent type=radio default=1 label=ShowComponent description=Show/Hide the component output> <option value=0>No</option> 2006 Compass Design 8 de 53

<option value=1>Yes</option> </param> </params> </install>
Vamos explicar o que algumas dessas linhas significam:

<install version=1.5 type=template>
Os contedos de um documento XML so instrues para o instalador da rea de administrao. A opo type=template diz ao instalador que estamos instalando um template e para o Joomla 1.5.
<name>TemplateTutorial15</name>
Define o nome de seu template. O nome que voc especificar aqui ser tambm empregado para criar o diretrio dentro da pasta templates. Contudo, ele no deve conter qualquer caractere que o sistema de arquivos no possa processar, por exemplo, espaos. Se instalar manualmente, voc precisar criar um diretrio que tenha um nome idntico ao nome do template.
<creationDate>December 2006</creationDate>
A data que o template foi criado. Esta uma forma livre e pode ser qualquer coisa, como, May 2005, 08-June-1978, 01/01/2008, etc.
<author>Barrie North</author>
O nome do autor desse template ou mais provavelmente o seu nome.

<copyright>GPL</copyright>
Qualquer informao de direitos autorais vai aqui neste elemento. Um tipo de licenciamento para desenvolvedores e programadores pode ser encontrado nos fruns do Joomla. (http://forum.joomla.org/ e http://forum.joomla.org/index.php/board,23.0.html)
<authorEmail>compassdesigns@gmail.com</authorEmail>
Endereo de email onde o autor do template pode ser encontrado.

<authorUrl>www.compassdesigns.net</authorUrl>
O endereo da URL do site do autor do template.

<version>1.0</version>
A verso do template.
<files> 2006 Compass Design 9 de 53

<filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/somejsfile.js</filename> <filename>images/threecol-l.gif</filename> <filename>images/threecol-r.gif</filename> <filename>css/customize.css</filename> <filename>css/layout.css</filename> <filename>css/template_css.css </filename> </files>
A seo files (arquivos) contm todos os arquivos genricos como a fonte PHP para o template ou a amostra da imagem para a pr-visualizao do template. Cada arquivo listado nesta seo marcado com os marcadores <filename> </filename>. Tambm poderia ser includo qualquer arquivo adicional, aqui empregamos o exemplo de um arquivo JavaScript que necessrio para o template. Todos os arquivos de imagens que o template emprega tambm so listados na seo <files>. Novamente, cada arquivo listado marcado com o marcador <filename> </filename>. As informaes de caminho dos arquivos so relativos raiz do template, por exemplo: se o seu template estiver em um diretrio chamado SeuTemplate e todas as imagens estiverem na pasta images que est dentro do diretrio SeuTemplate, o caminho correto : <filename>images/my_image.jpg</filename> Finalmente, todo arquivo de folha de estilo so listados na seo <files>. Novamente o nome do arquivo marcado com os marcadores <filename> </filename> e o seu caminho relativo raiz do template. O arquivo Index.php O que de fato existe em um arquivo index.php? Ele uma combinao de (X)HTML e PHP que determina tudo a respeito do leiaute e apresentao das pginas. Primeiro olharemos para uma parte crtica de se conseguir templates vlidos, o DOCTYPE existente no topo do arquivo index.php. Este um pedao de cdigo que aparece na parte superior de cada pgina da web. No topo da pgina do nosso template temos o seguinte:
O DOCTYPE a parte fundamental do componente a partir da qual uma pgina da web apresentada em um navegador e refere-se, especialmente, a como um navegador interpreta o CSS. Para dar-lhe um sentido do que isto significa, veja uma observao do site http://www.alistapart.com: [informao sobre doctypes no W3C diz que doctypes ] escrito por nerds para nerds. E quando digo nerds, no quero dizer profissionais comuns da web como eu e voc. Quero dizer aqueles que fazem o resto de ns parecermos como avs no primeiro dia em que recebem um email.TM
2006 Compass Design
10 de 53

De qualquer maneira, h diversos tipos de doctypes que voc pode empregar. Basicamente, o doctypes diz ao navegador como interpretar a pgina. Aqui as palavras strict e transitional iniciam posicionando as flutuaes existentes (float:left e float:right, normalmente). Essencialmente, desde quando a WWW iniciou, diferentes tipos de navegadores tm diferentes nveis de suporte a CSS. Isto significa, por exemplo, que o Internet Explorer no entender o comando min-width para estabelecer a largura mnima da pgina. Para conseguir o mesmo resultado voc ter que empregar hacks (cortes ou novos cdigos de programao, ou seja, hackear) no cdigo CSS.
Nota: Alguns dizem que processar XHTML como text/html considerado prejudicial. Se voc realmente entende essa afirmao voc est bem frente no jogo e alm desse guia. Voc pode ler mais em http://www.hixie.ch/advocacy/xhtml.
Strict significa que o html (ou XHTML) ser interpretado exatamente como especificado nos padres. Um doctype do tipo transitional significa que pgina ser permitida umas poucas diferenas em relao aos padres. Para complicar as coisas, h alguma coisa chamada de modo "quirks" (volta). Se o tipo de documento (doctype) estiver errado, desatualizado ou no existir, ento o navegador entra no modo "quirks". Esta uma tentativa de voltar um passo atrs e para tentar ficar compatvel; ento, o Internet Explorer, por exemplo, far o processamento da pgina fingindo que ela era da verso do IE4. Infelizmente, as pessoas algumas vezes terminam nesse modo louco (quirks mode) acidentalmente. Isto normalmente acontece por duas razes:
Eles empregam direto a declarao do tipo de documento (doctype) a partir de uma pgina WC3, onde o link termina em: DTD/xhtml1-strict.dtd Exceto se este for um link relativo ao servidor WC3, voc precisa do caminho completo, como demonstrado no exemplo acima, no incio desse item. A Microsoft especificou o IE6 de tal modo que possvel ter pginas vlidas, porm, no modo quirk. Isto acontece por existir a expresso "xml declaration" antes da declarao do tipo de documento (doctype). <?php echo <?xml version="1.0" encoding="utf-8"?.>?> A realidade que uma declarao xml no realmente necessria, ento vamos deixar sem.
A parte a respeito do modo quirk do IE6 importante. Neste captulo estaremos programando somente para o IE6+, ento, devemos ter certeza de que o mesmo estar funcionando no modo padro. Isto minimizar as codificaes extras (hacks) que talvez tenhamos que fazer. Fazer uma pgina concordante com os padres, onde voc v a expresso "valid xhtml" no final da pgina, no significa que foi difcil elaborar o cdigo ou entender os marcadores. Simplesmente significa que o cdigo empregado atende as especificaes do tipo de documento (doctype) mencionada. S isso! Nada mais. Elaborar o seu site para atender aos padres deve ser uma forma de reduzir o que voc est dizendo que faz e, sim, fazendo o que voc diz que faz.
Alguns links teis:

http://www.quirksmode.org/css/quirksmode.html http://www.alistapart.com/stories/doctype http://www.w3.org/QA/2002/04/Web-Quality 2006 Compass Design
11 de 53

http://forum.joomla.org/index.php/topic,7537.0.html http://forum.joomla.org/index.php/topic,6048.0.html
O que existe a mais no arquivo index.php? Vamos observar a estrutura do marcador de cabealho (head) primeiro; queremos ser o mais concisos possveis, porm, descrever o suficiente para a elaborao de um site. A informao de cabealho que empregaremos a seguinte:
O que tudo isso significa?
Falamos sobre isso acima. O cdigo <?php echo $this ->language; ?> est carregando os parmetros de idioma especificados no arquivo de configurao global do site.
Coisas do cabealho que so especificados no arquivo de configurao do site. Isto inclui os seguintes marcadores (em uma instalao padro):
2006 Compass Design
12 de 53

Isto inclui um nmero de metatags, o favicon (cone indicativo do site) e tambm URLs do alimentador de RSS.
Esta linha faz a ligao do arquivo CSS com o template. O cdigo PHP <?php echo $this >template?> retornar o nome do template atual. Escrevendo dessa forma ao invs do caminho real faz o cdigo mais genrico. Quando voc cria um novo template voc pode apenas copi-lo (com todo o seu cdigo de cabealho) e no se preocupar com a edio de nada. O corpo de um template vazio (em branco) do Joomla Isto ser muito fcil! Pronto?
OK, ainda neste ponto isto parece no representar nada muito inspirador. A sada apresentada na figura 11-3. Ns temos uma ordem lgica razovel: 1. nome do site (sitename); 2. module superior (top); 3. mdulos da esquerda (left); 4. contedo principal (component); e 5. mdulos da direita (right). A meta tentar e se aproximar o mais prximo possvel da semntica de marcao. A partir do ponto de vista da web, significa que a pgina pode ser lida por qualquer um: um navegador, um mecanismo de busca ou um leitor de tela. O leiaute semntico a pedra fundamental da acessibilidade.
2006 Compass Design
13 de 53

Figura 11-3 Um template sem especificao de estilo Voc poder ler mais a respeito de leiaute semntico no Apndice B (do livro retromencionado). Nota Agora no vale nada que o que temos aqui realmente apenas um potencial para leiaute semntico. Se algum quiser ir adiante e colocar mdulos aleatrios em localizaes aleatrias, ento voc poder ter uma baguna. Uma importante considerao para sites CMS, um template somente to bom quanto a quantidade de contedo. isto que frequentemente derruba programadores quando tentam validar seus sites. Voc deve ter observado que empregamos o primeiro de outros diversos comandos especficos do Joomla.
O comando de PHP echo simplesmente apresenta na sada um conjunto de caracteres do arquivo de configurao (configuration.php). Aqui estamos empregando o nome do site, podemos facilmente ter:

O comando jdoc insere vrios tipos de XHTML.
Este insere uma sada de um componente. Qual componente, ser determinado pelo link do menu. Nota Interessado o bastante; parece que voc parece capaz de ter mltipas instncias de sada de um componente. No tem certeza de por que precisaria disso, mas penso que deixarei voc saber!
Isto insere a sada para um mdulo de localizao. A sintaxe completa :
Veremos as vrias opes para estilos posteriormente neste captulo. Empregando o CSS para criar um leiaute Estaremos empregando CSS para fazer um leiaute de trs colunas para um template Joomla. Tambm estaremos fazendo um leiaute flexvel. H dois tipos de leiautes de pginas da web, fixo e flexvel, e ambos se referem a como a largura da pgina controlada. A largura da pgina a questo, por causa das muitas resolues de um navegador em que as pessoas navegam na web. Embora o percentual esteja caindo, cerca de 20% das pessoas que acessam a internet empregam a resoluo de 800x600. A grande maioria, 76%, est empregando a resoluo de 1024 x 768 e maior 1 (fonte: www.upsdell.com). Fazer um leiaute flexvel significa que a sua valiosa pgina da web no ser apresentada como uma fina coluna na resoluo de 1024, e ser totalmente visvel em monitores com resoluo menor. Um esboo tpico deve empregar tabelas para formar o leiaute da pgina. Elas so teis, pois, basta especificar a largura das colunas em percentual, mas tm muitas desvantagens:
Tem muitos cdigos extras comparados ao leiaute com CSS. Isto resulta em tempo de carregamento maior (o que as pessoas que acessam a internet no gostam) e baixa performance em ferramentas de buscas. O cdigo pode duplicar em tamanho, no somente com marcadores, mas, tambm, com os chamados spacer gifs (espaadores). Mesmo grandes companhias caem na armadilha das tabelas, conforme visto em uma recente controvrsia, a respeito do novo site da disney 2 : disney.co.uk.
1 2
www.upsdell.com/BrowserNews/stat_trends.htm#res www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-good-designer.html
2006 Compass Design
15 de 53

Elas so difceis de se manter. Para alterar alguma coisa deve-se ter conhecimento do que todos os marcadores td/tr esto fazendo. Com CSS existem apenas algumas linhas para inspecionar. O contedo no pode ser ordenado por cdigo. Muitos usurios da internet no vem as pginas da web em um navegador. Aqueles que vem com navegadores de texto ou leitores de tela lero a pgina da esquerda-superior para o canto direito-inferior. Isto significa que primeiro eles vem tudo no cabealho e a coluna da esquerda (em um leiaute de 3 colunas) antes de chegar ao meio da coluna, o assunto mais importante. Um leiaute CSS, por outro lado, permite que o contedo seja cdigo-orientado, o que significa que o contedo pode ser arranjado no cdigo/fonte. Talvez seu mais importante visitante seja o Google, e ele emprega leitores de tela para todos os propsitos e intenes.
Vamos olhar o nosso leiaute empregando CSS. Voc pode posicionar elementos (o que quiser) de diversas maneiras com CSS. Para uma informao rpida uma boa fonte : Brainjar's CSS Positioning 3 . Se voc novo em CSS deve ler, ao menos, um guia bsico de CSS. Aqui esto algumas sugestes:

Kevin Hale's - An Overview of Current CSS Layout Techniques http://particletree.com/features/an-overview-of-current-css-layout-techniques/ htmldog's CSS Beginner's Guide http://www.htmldog.com/cssbeginner/ yourhtmlsource.com http://www.yourhtmlsource.com/stylesheets/
Estaremos empregando o comando float para posicionar o nosso contedo. Como ele bsico, o template se parecer com o apresentado na Figura 11-4. Ainda no muito empolgado, mas vamos ver se todos esto acompanhando. Os estilos CSS so definidos no marcador do cabealho (head) do arquivo index.php para mostrar o que est acontecendo, mas, normalmente, eles poderiam estar no arquivo template.css. Tudo estar contido em uma caixa/invlvucro ou elemento chamado #wrap. Este elemento tem uma largura de 80% da rea de visualizao, a qualquer tempo.
www.brainjar.com/css/positioning/
2006 Compass Design
16 de 53

Figura 11-4 Leiaute de um template muito bsico
Dica: CSS abreviado possvel reduzir a quantidade de cdigo CSS empregado atravs de abreviaes. Um exemplo disso o estilo de espaamento e margem para um elemento. margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; que pode ser substitudo por: margin: 5px 10px; H estilos de abreviaes no incio de cada definio de estilo. To logo tenha se familiarizado com os estilos, passe a empregar os comandos abreviados e apague os completos. A sintaxe : font: font-size |font-style | font-variant | font-weight | line-height | font-family Aqui est um exemplo, ao invs disso... font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; lineheight:1.3em; Faa isso: font:bold 1em/1.3em Arial,Helvetica,sans-serif,italic; Leia mais a respeito de sintaxe em An Introduction to CSS shorthand properties (Uma introduo s propriedades de abreviaes em CSS http://home.no.net/junjun/html/shorthand.html). A cada uma das colunas da esquerda, meio e direita especificado os seus prprios elementos. Todas so especificadas como floated (fluindo) esquerda, e dado um percentual de largura de 100%. O comando de estilo clear:both no rodap diz ao navegador para parar de fluir e fazer

com que o rodap se alongue (justifique) englobando as trs colunas. Quando formos construir o nosso segundo template neste captulo, vamos ter que usar uma tcnica mais avanada de justificao. Para implementar o leiaute e adicionar algum espao ao contedo, precisamos acrescentar alguns espaamentos de coluna, normalmente chamados de "gutter" (canal). Infelizmente, h um problema. Voc deve saber que o Internet Explorer no interpreta corretamente o cdigo CSS (veja em: Internet Explorer does not interpret CSS correctly). Um problema que ele calcula a largura diferentemente. Resolvemos este problema no empregando qualquer espaador ou borda em algo que tenha uma largura. Para conseguir o nosso efeito "gutter" adicionamos um outro elemento <div> entre as colunas. Isto apresentado abaixo:
Ao CSS adicionamos: .inside {padding:10px;} Este simples leiaute o suficiente para se aprender a como empregar o CSS com o Joomla. Ele apresenta, ao menos, duas vantagens de se empregar CSS ao invs de leiautes baseados em tabelas; tem menos cdigo e mais fcil de se manter. Contudo, no fonteordenado. Para isso devemos empregar um leiaute mais avanado, conhecido como nested float (fluir aninhado).
2006 Compass Design
18 de 53

Leiautes de fonte ordenada obtm melhores resultados em mecanismos de busca do que aqueles que o contedo importante aparece na parte final do cdigo. A partir de uma perspectiva de um site Joomla, o contedo mais importante aquele que vem do componente. Este leiaute especfico (de fonte ordenada) um tanto quanto complexo e grande o suficiente para ser colocado aqui. Afortunadamente para voc, existe uma explicao de como criar o mesmo em arquivo pdf para download em http://www.compassdesigns.net. (veja: http://www.compassdesigns.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-yourjoomla-website.html e http://www.positioniseverything.net/ordered-floats.html) O CSS padro do Joomla At agora todo nosso CSS tem sido somente sobre leiaute. Isto nos permitir fazer uma pgina limpa e bonita, ento, vamos agora adicionar alguma formatao. Ns tambm movemos todo o nosso cdigo CSS que estava no marcador de cabealho do index.php e colocamos em arquivos CSS. Vamos adicionar, ainda, um par de coisas, nosso leiaute agora ser:
Ns centralizamos a pgina empregando um pequeno cdigo (hack). Isso deve ser feito por causa do Internet Explorer. Com navegadores que seguem o padro, apenas empregamos o cdigo margin:0 10%; para centralizar a pgina, mas o IE no reconhece isso. Ento ns centralizamos o texto de toda a pgina e alinhamos de volta para a esquerda nas colunas. Em comemorao ao suporte do Internet Explorer 7 aos cdigos de min/max width (IE6 no suportava esses cdigos) podemos adicionar um tamanho de largura (width) mnima e mxima. Observe que tivemos que adicionar um pequeno cdigo (hack) para o IE6, pois o mesmo ainda no entende queles cdigos. Ele ignorar o comando !important e considerar a largura total de 960px.
2006 Compass Design
19 de 53

Dica Pode parecer estranho definir nossas colunas em percentuais de largura e depois ter um elemento (div) que fixo. Bem, existem muitas coisas acontecendo aqui. 1. Ter colunas flexveis dentro de elementos de largura fixa torna o template mais flexvel. Se acrescentarmos botes de alterao de largura teremos que alterar apenas um valor. 2. Ainda temos uma largura mxima, entretanto, por que no colocarmos tudo flexvel? Muitos usurios da web hoje possuem enormes telas de monitor. Pesquisa de usabilidade nos informa que linhas de texto mais largas que 900px so difceis de ler porque os olhos tm que se deslocar por um longo caminho para ir para a prxima linha. Limitando a fluidez (flexibilidade)torna o site mais acessvel/usvel.
Tambm adicionamos um novo estilo de colunas: overflow:hidden. Isto far a pgina quebrar mais consistentemente quando reduzimos a sua largura. No incio da tipografia do CSS estabeleceremos alguns estilos bsicos e teremos o que conhecemos como reset global.
Tudo recebe o valor zero de margin e padding e ento todos os elementos do nvel de bloco dado, ento, uma margem inferior. Isto ajuda a obter a consistncia do navegador. Voc pode ler mais sobre o reset global em clagnut 4 e left-justified 5 . O tamanho da fonte foi setado para 76%. A razo disso para tentar manter a melhor consistncia entre os navegadores. Todas as fontes foram setadas em em ( um fator relativo ao tamanho da propriedade font-size de um elemento). E tendo altura de linha de line-height:1.3em ajuda na leitura. Isso significa que as pginas sero mais acessveis e os visitantes do site podero alterar o tamanho da fonte para o da sua preferncia. Isso discutido mais em: An experiment in typography at The Noodle Incident (Owen Briggs) 6 .
http://www.clagnut.com/blog/1287/ http://leftjustified.net/journal/2004/10/19/global-ws-reset/ 6 http://www.thenoodleincident.com/tutorials/typography/template.html

5
2006 Compass Design
20 de 53

Se voc pretende adicionar algum tipo de cor de fundo (background) veremos alguma coisa como o apresentado na figura 11-5.
Figura 11-5 Template bsico com tipografia
Observe que as colunas laterais no alcanam o seu rodap. Isso porque elas somente se estendem de acordo com o contedo; onde o espao est em branco esquerda e direita, no existe contedo. Se ns temos um template que tenha um fundo branco para as trs colunas, isso no ser problema. Ns iremos considerar essa abordagem e teremos caixas limitando os mdulos. Se voc quer colunas com alturas iguais e deseja colori-las ou ter caixas, voc pode usar uma imagem de fundo que se repete verticalmente. Essa tcnica chamada de Faux Columns e descrita por Douglas Bowman 7 e Eric Meyer 8 .
7 8
http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/
2006 Compass Design
21 de 53

O CSS Especfico do Joomla Embora o Joomla 1.5 tenha a funcionalidade de cancelar/substituir a sada do ncleo do template, sua renderizao padro ainda emprega tabelas para a sada de contedo no corpo principal. Em conjunto com essas tabelas existem sadas CSS disponveis para os programadores aplicarem estilos em suas pginas. Baseado em algumas pesquisas com inmeros membros da comunidade, a lista atual a apresentada abaixo. Observe que ela no inclui estilos de web genricos como H1, H2, p, ul, a, form, etc.
importante observar esta lista. Muitos projetos que voc pode encontrar atualmente empregam estilos de CSS mais especficos s suas definies. Basicamente, uma regra mais especfica sobrescrever uma menos especfica. Por exemplo: a {color:blue;} a:link {color:red;} .contentheading {color:blue;} div.contentheading {color:red;} A cor do link e a cor da classe .contentheading sero vermelha, pois esta regra mais especfica (pois a classe .contentheading est contida dentro de uma <div>) No caso de templates Joomla, voc freqentemente ver regras mais especficas sendo empregadas. Isto freqentemente ocorre quando a classe est dentro de uma tabela. Mais exemplos:

.moduletable table.moduletable .moduletable o nome de uma <div> que engloba (envolve) um mdulo. table.moduletable somente aplicar o estilo uma tabela que contenha a classe (class=moduletable). .moduletable aplicar o estilo independentemente de qual elemento estiver na classe. a.contentpagetitle:link .contentpagetitle a:link a.contentpagetitle:link aplicar o estilo para qualquer marcador a que contenha a classe .contentpagetitle que seja um link. .contentpagetitle a:link aplicar o estilo para qualquer elemento que esteja DENTRO da classe .contentpagetitle que seja um link. Especificidade no fcil de se entender; freqentemente mais fcil comear empregando estilos mais gerais possveis e ento chegar ao mais especfico, se o resultado no for aquilo que se deseja. Alguns links sobre especificidades: http://www.htmldog.com/guides/cssadvanced/specificity/ http://www.meyerweb.com/eric/css/link-specificity.html http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Neste momento o nosso template est empregando um monte de tabelas, 12 para ser exato! Como mencionado anteriormente, isto torna a pgina mais lenta e dificulta a atualizao. Para reduzir o nmero de tabelas precisamos empregar parmetros de estilos nos jdoc:include quando chamarmos os mdulos. Mdulos Quando um mdulo chamado no arquivo index.php, ele tem vrias opes de como ser exibido. A sintaxe : <jdoc:include type=modules name=LOCATION style=OPTION /> O estilo opcional e definido em /modules/templates/modules.php. Atualmente o arquivo padro modules.php possui os seguintes leiautes. style=table (apresentao padro). Os mdulos so apresentados em uma coluna. Um exemplo de sada apresentado abaixo: <table cellpadding=0 cellspacing=0 class=moduletable> <tr> <th valign=top> modChrome_table </th>

</tr> <tr> <td> modChrome_table </td> </tr> </table> style=horz = Os mdulos so apresentados horizontalmente. Cada mdulo apresentado em uma clula de uma tabela-invlucro. Um exemplo de sada apresentado abaixo:
style=xhtml = Os mdulos so apresentados como um simples elemento <div>. Um exemplo de sada apresentado abaixo: <div class=moduletable> <h3>modChrome_xhtml</h3> modChrome_xhtml </div> style=rounded = Os mdulos so apresentados em um formato que permite, por exemplo, apresentar cantos arredondados. Se esse $style for empregado o nome da <div> muda de moduletable para module. Um exemplo de sada apresentado abaixo: <div class=module> <div> <div> <div> <h3>modChrome_rounded</h3>

modChrome_rounded </div> </div> </div> </div> style=raw = Os mdulos so apresentados em estado bruto, ou seja, sem processamento, sem elemento de agrupamento e sem ttulo. modChrome_raw Como voc pode ver as opes CSS (xhtml e rounded) so muito mais limpas em cdigo e as tornam mais fceis de serem empregadas para se especificar estilos s pginas da web. Este autor no recomenda o emprego de sufixos table (padro) ou horz, a menos que seja absolutamente necessrio. Mas aqui est a melhor parte! Se voc examinar o arquivo modules.php ver todas as opes existentes para os mdulos. realmente fcil adicionar uma sua prpria, isto faz parte das novas poderosas possibilidades includas na verso 1.5 do Joomla. Dentro do arquivo module.php, o exemplo de xhtml se parece com o apresentado abaixo:
Voc pode observar que bem fcil fazer alteraes. Para desenvolver nosso template, ns colocaremos um mdulo de estilo de xhtml em todos os nossos mdulos.
2006 Compass Design
25 de 53

Observe que no podemos colocar esses estilos de mdulos no <jdoc:include type=component />, pois esse no um mdulo. Especificando o mdulo para uma apresentao CSS reduziu o nmero de tabelas para 14. Vamos agora acrescentar alguns estilos simples ao template para conseguir o resultado abaixo: Tambm colocamos o ttulo do site no marcador <H1>. semanticamente mais correto e tambm auxiliar os mecanismos de buscas. Tambm acrescentamos cdigos CSS para especificar os estilos de borda e fundo para o cabealho (header). Nosso cdigo CSS se parecer com isso:
2006 Compass Design
26 de 53

Nota Diversos parmetros de menu da instalao padro tem um sufixo nas propriedades do mdulo de _menu. Para que tudo funcionasse adequadamente, eu apaguei aqueles parmetros. Essa tipografia de CSS agora produz o resultado apresentado na figura 11-6.
2006 Compass Design
27 de 53

Figura 11-6 Template Bsico com o ttulo dos mdulos estilizados Menus Vimos no captulo 6 que existem diversas especificaes de como um menu pode ser renderizado (formatado). Novamente, empregando a lista de CSS ao invs de tabelas, o resultado reduzir a quantidade de cdigos e facilitar a marcao. Depois de colocar todos os nossos menus para lists ns temos somente 12 tabelas (veremos como removeremos o resto empregando o novo recurso de cancelamento/substituio da verso 1.5). Lembre-se, a especificao de lists nova na verso 1.5; flat list da verso 1.0 e ser descontinuada. Lists so tambm melhores que tabelas porque navegadores baseados em texto, leitores de tela, navegadores sem suporte a CSS, navegadores com suporte a CSS desativados e mecanismos de busca sero capazes de acessar o seu contedo mais facilmente. Uma das outras vantagens de se empregar CSS para menus que existem um monte de exemplos de cdigos em vrios sites de programadores em CSS. Vamos dar uma olhada em um deles e ver como pode ser empregado. A pgina da web no maxdesign.com 9 tem uma seleo de cerca de 30 tipos de menus todos empregando a mesma base de cdigos. chamada de Listamatic. Existem pequenas diferenas no cdigo que tenhamos que alterar para podermos adaptar esses menus para o Joomla.
http://css.maxdesign.com.au/listamatic/index.htm
2006 Compass Design
28 de 53

Essas listas empregam o seguinte cdigo:
Isto significa que existe uma <div> que engloba a lista chamada de navcontainer e o marcador <ul> tem uma identificao de classe navlist. Para duplicar esse efeito no Joomla, precisaremos de alguma espcie de <div> envoltria. Podemos conseguir isso empregando os sufixos de mdulos. Se voc se lembra, a sada de uma opo de mdulo de estilo xhtml :
Se adicionarmos um sufixo de mdulo, isto ser acrescido classe moduletable, dessa forma:
Dessa forma, quando escolher um menu do Listamatic, voc precisar substituir o estilo no cdigo CSS da classe navcontainer para moduletablesuffix. Nota Os sufixos de mdulos de certa forma mesclam a linha entre a programao de um modelo de um site e a fase de produo/administrao desse site. Um dos objetivos de desenvolvimento futuro do ncleo do Joomla claramente separar essas regras. O que pode ocorrer que provvel que eles venham a descontinuar esse recurso em futuras verses do Joomla, alm da 1.5. Este emprego de sufixo de classe dos mdulos muito til. Veremos nas sees de Dicas e Truques (do livro retro-mencionado) que ele permite diferentes caixas coloridas com uma simples alterao da classe do sufixo do mdulo. Para o nosso site empregaremos a List 10 elaborada por Mark Newhouse 10 . Nosso CSS ser:
10
http://css.maxdesign.com.au/listamatic/vertical10.htm
2006 Compass Design
29 de 53

Isso produzir um menu como mostrado na figura 11-7. Ento, qualquer menu que queiramos que seja estilizado dessa forma, apenas precisamos adicionar a palavra menu como o sufixo do mdulo.
2006 Compass Design
30 de 53

Figura 11-7 Template Bsico com menu estilizado Dica de Programador Quando estiver tentando fazer um menu especfico funcionar, aqui est uma dica til. Crie uma instalao padro do Joomla e ento observe o cdigo que est formatando o mainmenu (menu principal). Copie e cole esse cdigo em um editor HTML (como Dreamweaver). Substitua todos os links por # e ento voc pode adicionar regras de CSS e testar at que obtenha o efeito desejado. O cdigo para o menu para se criar o estilo desejado o que se segue:
2006 Compass Design
31 de 53

Observe que o CSS embutido (presente no prprio arquivo index.php) ao invs de lincado (presente como um link (link rel) no arquivo index.php)para permitir que a edio seja facilitada. Escondendo Colunas
Quando o nosso leiaute estiver pronto sempre teremos as nossas trs colunas, independentemente que haja ou no contedo a ser apresentado. A partir da perspectiva de um template de um CMS, isto no muito til. Em um site esttico o contedo nunca muda, porm, queremos dar aos administradores a habilidade de colocar o seu contedo onde quer que eles queiram sem que tenham que se preocupar com edio de leiaute em CSS. Queremos ser capazes de desligar uma coluna automaticamente, ou ocultla, se no houver contedo a ser apresentado.
Durante o desenvolvimento do mecanismo de template do Joomla 1.5 houve um grande nmero de mudanas e aprimoramentos. Mencionando o que foi posto no blog do desenvolvimento do Joomla 11 :
As alteraes no sistema de template no Joomla! 1.5 podem ser divididas em duas categorias. Em primeiro lugar h mudanas na maneira de como as coisas eram feitas no Joomla! 1.0, por exemplo, a forma como os mdulos eram posicionados, e em segundo lugar houve a incluso de um monte de recursos extras, como parmetros do template... uma viso rpida: Mudanas nas velhas maneiras... mosCountModules A funo mosCountModules foi substituda pela funo $this->countModules e suporte para as condies que foram adicionadas. Isto permite que programadores possam facilmente quantificar o nmero de mdulos existentes em mltiplas posies do template em apenas uma linha de cdigo, por exemplo $this->countModules(user1 + user2); que retornar a quantidade total do nmero de mdulos existentes nas posies user1 e user2, incluindo as sada geradas pelo ncleo do Joomla! No Joomla! 1.0 podamos empregar diferentes funes para incluir uma sada gerada pelo ncleo do Joomla. Todas essas funes foram substitudas pelo elemento <jdoc:include... />. Por exemplo, mdulos em determinadas posies podem ser includos empregando <jdoc:include type=modules name=left/> Carregando o editor No Joomla! 1.0 voc precisava carregar por si mesmo o editor nos seus templates. Isto no ser mais necessrio. Quando o sistema processar o cabealho do seu template ele decidir se ir ou no precisar de editor para inclu-lo ou no. Novos recursos
11
http://dev.joomla.org/component/option.com_jd-wp/itemid.33/p.210/
2006 Compass Design
32 de 53

Construindo um Website Poderoso com o Joomla! Parmetros do template Os parmetros do template podem ser empregados para permitir que o administrador controle a estrutura do mesmo. Eles funcionam praticamente da mesma maneira que os parmetros dos mdulos. Um programador de template pode definir especificaes extras para o template no arquivo xml do mesmo e o administrador do site pode ajust-los na opo template manager (gerenciamento do template). Por exemplo, os administradores podem alterar os esquemas de cores, escolher entre 2 ou 3 colunas de leiaute... ou especificar a largura mnima do template. Cancelamento/susbtituio de template Os templates podero cancelar/substituir a sada padro do ncleo do Joomla!, por exemplo, voc poder facilmente cancelar a maneira que um artigo processado e alterar a tabela de sada por <div>. Ou voc pode alterar a classe ou o id ao seu gosto. Processamento de paginao e estilizao de mdulos tambm podero ser alteradas. Suporte para arquivos mltiplos de CSS O gerenciamento de template suporta mltiplos arquivos CSS, dessa forma voc no precisar colocar toda a sua codificao CSS dentro de um nico arquivo. Tambm, alteramos o nome do arquivo principal do arquivo de CSS principal para template.css ao invs de template_css.css e adicionamos suporte para o arquivo especial editor.css, que pode ser carregado pelo editor wysiwyg na rea de administrao.
Mais informaes esto disponveis no frum do Joomla! 12 Ento o uso geral do mosCountModules seria: <?php if($this->countModules(condio)) : ?> faa alguma coisa <?php else : ?> faa mais alguma coisa <?php endif; ?> Ento, existem 4 possveis condies: countModules (left) Retornar 1 se houver algum mdulo na posio left (esquerda). countModules (left and right) Retornar 1 se houver algum mdulo na posio left e right (esquerda e direita). countModules (left or right) Retornar 1 se houver algum mdulo na posio leftou direita (esquerda ou direita). countModules (left + right) Contar os mdulos nas posies left e right (esquerda e direita).
Nesta situao, precisamos empregar a funo de sermos capazes de contar os mdulos presentes em uma localizao especfica. Ento, por exemplo, se no houver contedo publicado na coluna da direita, podemos ajustar o tamanho da coluna para preencher aquele espao. H diversas maneiras para que voc possa fazer isso. Voc pode colocar um comando condicional no corpo (do arquivo index.php) para no mostrar o contedo, e ento ter um estilo diferente para o contedo baseado em qual coluna voc dispor. Para fazer isso da forma mais fcil, tenho uma srie de comandos condicionais que podem ser colocados no marcador de cabealho (head) que (re)define os estilos de alguns cdigos CSS.
12
http://forum.joomla.org/index.php/topic.101825.msg535479.htm#msg535479
2006 Compass Design
33 de 53

<?php If($this->countModules(left and right) == 0 $contentwidth = 100; If($this->countModules(left or right) == 1 $contentwidth = 80; If($this->countModules(left and right) == 1 $contentwidth = 60; ?> Ento, ns contamos:
Se no tivermos nada na esquerda (left) ou (OR) direita (right), ento teremos 100% de espao. Se houver algum mdulo na esquerda (left) ou (OR) direita (right), ento teremos 80% de espao. Se houver algum mdulo na esquerda (left) e (AND) na direita (right), ento teremos 60% de espao.
Ento teremos que alterar o arquivo index.php na <div> de contedo para: <div id=content<?php echo $contentwidth; ?>> E alteramos o arquivo layout.css para: #content60 (float:left;width:60%;overflow:hidden;) #content80 (float:left;width:80%;overflow:hidden;) #content100 (float:left;width:100%;overflow:hidden;) Os comandos condicionais em PHP no marcador de cabealho (head) devem aparecer DEPOIS da linha que faz o link para o arquivo template.css. Isto porque se houver duas regras de estilos CSS idnticas, a que estiver por ltimo sobrepor as demais. Isto pode ser feito de uma maneira similar, tendo comandos if importando um arquivo CSS secundrio. Dica Enquanto estiver tentando resolver os problemas dos seus comandos condicionais, voc pode adicionar uma linha de cdigo no seu arquivo index.php, como a apresentada abaixo, para mostrar qual o valor da largura de sua coluna: O contedo desta coluna <?php echo $contentwidth; ?>% de largura. Estamos quase chegando l, mas agora temos invlucros <div> vazios onde as colunas existem. Escondendo Cdigo do Mdulo Quando criando colunas ocultveis de boa prtica especificar os mdulos para tambm no serem apresentados se no houver contedo. Se isto no for feito as pginas tero <div> vazias, o que pode levar a confundir os navegadores. Para esconder <div> vazias o seguinte comando empregado: <?php if($this->countModules(left)) : ?> <div id=sidebar> <div class=inside> <jdoc:include type=modules name=left style=xhtml /> </div>

</div> <?php endif; ?> Empregando o cdigo acima, se no houver nada publicado na coluna da esquerda, ento <div id=sidebar> no ser apresentado. Empregando essas tcnicas para as nossas colunas da esquerda e direita, o nosso arquivo index.php se parecer com o apresentado abaixo. Tambm acrescentamos um invluvro (include) para o mdulo breadcrumbs. Observe que isso precisar ser includo no arquivo index.php e tambm publicado como um mdulo.
2006 Compass Design
35 de 53

Recomendaria uma maneira ligeiramente diferente de produzir um rodap (footer). Da maneira apresentada acima ele tem um cdigo pesado dentro do arquivo index.php que dificulta eventuais alteraes. Faria mais sentido se tivssemos um mdulo posicionado ali e ento o administrador do site poder mais facilmente mud-lo. No o mdulo de rodap apresentado na rea de administrao que apresenta os direitos autorais do Joomla e que no pode ser facilmente editado. Se voc deseja criar o seu prprio rodap, voc simplesmente cancelar a publicao daquele mdulo e criar um mdulo html customizado em qualquer idioma que queira. Dica de Programador H diversos nomes associados a mdulos no Joomla: banner, left, right, user1, footer, etc. Uma coisa importante a considerar que os nomes no correspondem a nenhuma localizao especfica. A localizao de um mdulo controlada pelo programador do template, como temos visto. costume coloc-los (os mdulos) em posio que esteja relacionada ao nome, mas isto no mandatrio. Este template bsico tem a inteno de apresentar alguns dos princpios bsicos de criao de template no Joomla. Voc pode encontrar uma cpia dos arquivos a serem empregados no seguinte endereo: http://www.compassdesigns.net/joomla-library. Agora que temos o bsico pronto, vamos criar um template ligeiramente mais atrativo, empregando tcnicas que estudamos at aqui. Fazendo um verdadeiro template para o Joomla 1.5 A primeira coisa que precisaremos para comear o nosso comp. Isto o modelo que ser a base de nosso template. Empregaremos um gentilmente doado para os nossos propsitos por Casey Lee, o programador lder do Joomlashack 13 . Ele chamado de Bold e podemos v-lo na figura 11-8. Fatiar e jogar O prximo passo no processo o que chamamos de fatiar (slicing). Precisaremos empregar o nosso programa grfico para criar pequenos pedaos fatiados de imagem que possam ser empregadas no template. importante prestar ateno a como os elementos podero ser redimensionados, se necessrio. Meu aplicativo grfico por opo o Fireworks, pois achei-o mais apropriado para programador web que o Photoshop.
13
http://www.joomlashack.com
2006 Compass Design
36 de 53

Figura 11-8 Um modelo do Joomlachack
Cabealho (header) A imagem do cabealho um leve enfeite no topo. Vamos mant-lo. Ento, colocaremos a imagem como pano de fundo (background), e depois atribumos uma cor, tambm. Dessa maneira o cabealho escalar verticalmente, se necessrio, por exemplo, se o tamanho da fonte for redimensionada. Tambm, precisaremos alterar as cores de qualquer fonte para branco, de forma que possam ser vistas no fundo preto. Tambm empregaremos uma imagem para a caixa de busca. Devemos ter certeza que apontamos para a entrada certa empregando mais especificidades com o CSS. Tambm utilizo posicionamento absoluto dentro de um elemento de posio relativa para colocar a caixa de busca onde a desejo. A imagem no ser redimensionada com apenas uma simples imagem. Ainda requerer uma imagem de top e bottom (cima e baixo). Este ser um outro exerccio para o leitor!

Observe que no empreguei um logotipo grfico aqui, mas texto puro. A razo principalmente porque os mecanismos de busca no podem ler imagens. Algum poder substituir por belas imagens, mas deixo isso como exerccio para o leitor. Nosso cabealho se parecer com o apresentado na figura 11-9, abaixo.
Figura 11-9 Imagem do cabealho (header)
Prximo passo, precisaremos implementar a tcnica chamada de portas deslizantes (sliding doors) O fundo (background) das Colunas Ns falaremos sobre isso quando formos colocar cor de fundo nas colunas, sendo que a cor no se estender por toda a coluna at o rodap. Isto porque o elemento <div>, neste caso sidebar e sidebar-2, somente do tamanho do contedo. Ele no cresce para preencher o espao do elemento. Teremos que empregar a tcnica chamada de Sliding Faux Columns (colunas deslizantes de Faux). Essencialmente, voc ter que criar duas imagens bem grandes que deslizar uma sobre a outra. Precisaremos criar dois invlucros <div> para colocar os fundos. Normalmente poderamos aplicar uma ao invlucro maior (#wrap), mas estou empregando um invlucro extra (e trabalhoso) por razes de ilustraes, apenas. Para um maior aprofundamento, voc poder verificar esses dois guias:
http://www.alistapart.com/articles/fauxcolumns/ http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58 38 de 53
2006 Compass Design

No nosso caso, a largura mxima que estamos considerando de 960px, dessa forma comeamos com uma imagem dessa largura. Na pasta de imagens est o arquivo slidingcolumns.png. Ento, exportamos duas fatias (empreguei a mesma fatia e apenas ocultava/apresentava as imagens laterais), uma com 960px de largura com uma de fundo com 192px esquerda, e uma de 960px de largura com uma de fundo com 192px esquerda. Nota A imagem esquerda precisa ter um fundo na cor branca, e a da direita de um fundo transparente. Eu modifiquei as cores dos fundos porque exportei as imagens do arquivo fonte. De onde veio o valor de 192px? Ele corresponde a 20% de 960, pois as nossas colunas tm 20% de largura. Ns empregamos a propriedade background-position para colocar as imagens no lugar correto. Aqui estamos usando o formato de CSS reduzido, pois faz parte da propriedade background.
No nosso arquivo index.php, simplesmente adicionamos um invlucro interno dentro do maior wrap.
Tambm precisamos colocar um comando condicional para fechar as <div>.
Observe que devemos colocar um fundo para o nosso rodap e mdulos/elementos da parte inferior, pois de outra forma os fundos das colunas seriam mostrados.
2006 Compass Design
39 de 53

Precisamos limpar os comandos floats de forma que o invlucro flutuante (as colunas de Faux) possam se estender at o fim da pgina. O mtodo normal para fazer isso era a de se empregar a propriedade :after 14 . Mas, com o lanamento do IE7, este mtodo no funcionar completamente. Precisamos enderear a limpeza dos floats no Internet Explorer 6 e 7, e a est o arredondamento no final. Um par 15 de solues foram encontradas 16 . Eu vou empregar a opo 17 Float (nearly) Everything aqui. Ento, adicionamos um simples comando clear:both ao #footer (<div> do rodap) e acrescentamos floats aos invlucros das colunas faux. Fizemos isso com uma folha de estilo condicional, especificamente para o IE6.
Teremos que acrescentar alguns comandos condicionais no marcador head do arquivo index.php.
Mdulos Flexveis
14 15
http://positioniseverything.net/easyclearing.html http://www.quirksmode.org/css/clearing.html 16 http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

17
http://orderedlist.com/articles/clearing-floats-the-fne-method 2006 Compass Design
40 de 53

No nosso esboo, temos um bloco de mdulo grande no incio. No sabemos o quo alto ser o texto que vai ser includo l. Para resolver este problema pusemos o mdulo incluso em um elemento de invlucro e demos um fundo da mesma cor da imagem. Esta a mesma estratgia que empregamos para o cabealho.
Observe que tambm empregamos um comentrio condicional de forma que se a localizao do mdulo de top (superior) no tiver contedo, a imagem da laranja implicante (mensagem de erro?) no estar l. O que vai estar l um invlucro vazio que conter uma parte da imagem de fundo e um valor de espaamento de 20px. Isto somente para fim esttico. preciso empregar as especificidades do CSS para sobrescrever os estilos do moduletable que foram definidos anteriomente.
Com o fundo de nosso template bsico no lugar o nosso site se parecer com o apresentado na figura 11-10. Nada mal, agora precisamos nos focar em alguma coisa de tipografia (fonte).
2006 Compass Design
41 de 53

Figura 11-10 Template avanado com leiaute
Tipografia (fonte) Muitos links precisaro estar na cor branca. Ento, definimos isso de forma global e depois modificamos a cor para a coluna central.
O esboo possui botes estilizados. Criamos isso empregando uma imagem de fundo a partir do modelo. uma fatia muito fina que preenchida horizontalmente.
2006 Compass Design
42 de 53

Para as tabelas, como as FAQ (perguntas mais freqentes), podemos adicionar um fundo fcil repetindo o uso da imagem que empregamos para chamar ateno. A reutilizao de imagens comum e tambm economiza em download, tornando a pgina mais rpida.
Os mdulos precisam de apenas uma simples redefinio e ajustes nos espaamentos (padding) e margens.
Menus, como sempre, precisam de muitos estilos CSS. Aqui vamos manter o mais simples possvel. Ns fatiamos uma simples imagem que inclua ambos o marcador e a marca de sublinhado. Observe que o estilo ligado aplicando um sufixo de mdulo de menu para qualquer lista de links que queiramos que tenha a mesma aparncia.
2006 Compass Design
43 de 53

Por ltimo a tab (tabela) do menu no canto superior direito. Como defensores da acessibilidade, queremos colocar isso de forma que as tabs sejam escalveis e as fontes possam alterar o seu tamanho. Felizmente, uma tcnica foi desenvolvida para fazer isso, e de fato com o mesmo princpio que empregamos para as nossas colunas, as portas deslizantes (sliding doors) 18 novamente! Tambm tentamos e fizemos alguma otimizao em velocidade para os templates e empregamos uma nica imagem para a esquerda e a direita das portas (doors), assim como os estados de ligado (on) e desligado (off). Isto conhecido como empregando fantasmas (sprites) 19 . O CSS no to complicado; apenas marcamos passo com o posicionamento vertical da imagem de fundo para o estado de ligado (on).
18 19
http://www.alistapart.com/articles/slidingdoors/ http://fiftyfoureleven.com/sandbox/weblog/2004/jun/doors-meet-sprites/
2006 Compass Design
44 de 53

Se voc observar l atrs o esboo original, ver que havia cones nessas tabs. Como estamos empregando duas imagens de background, uma na li (lista) e a outra no link, precisaremos de um terceiro elemento para colocar o fundo do cone. Podemos fazer isso tendo um span, mas isso no o que a sada do CMS nos dar. A soluo seria tanto forar o menu dentro de um mdulo ou cancelar a sada do ncleo (mais sobre isso ser apresentado posteriormente). Depois de adicionar uma cor de fundo, nosso template ter a aparncia razovel da figura 11-11. A ltima coisa que permanece revisar o arquivo templateDetails.xml. Ele precisa relacionar todos os arquivos e imagens empregadas no template, de forma que ele possa instalar apropriadamente a partir de um arquivo zip. H um grande nmero de ferramentas que faz isso automaticamente para voc, se estiver usando o Joomla 1.0.X, mas at este momento no h nenhuma disponvel para a verso 1.5.
2006 Compass Design
45 de 53

Figura 11-11 Template avanado com tipografia
Podemos ver uma verso ao vivo desse template em http://www.compassdesigns.net/Joomla15.
Os arquivos do template podem ser encontrados em http://www.compassdesigns.net/joomla-library/tutorials.
2006 Compass Design
46 de 53

Parmetros do Template Novo na verso 1.5 a adio de parmetros do template para os templates. Isto permite que voc passe variveis ao template a partir de opes selecionadas na rea de administrao/manuteno do site. Uma funo de parmetro relativamente simples mostrada no template padro Milky Way. No arquivo templateDetails.xml voc ver o seguinte:
No gerenciamento de template (Template Manager) para aquele template, voc ver setagens para os parmetros, como mostrado na figura 11-12.
Figura 11-12 parmetros do template Milky Way vistos na rea de administrao
Podemos ver que se trata apenas de um simples boto tipo rdio com duas opes. Se escolhermos no (no), ento a sada dos componentes so sero apresentadas. Um outro um pouco mais complexo que ajustar a largura do template, a sada do arquivo XML ter o seguinte:
2006 Compass Design
47 de 53

Ento, no marcador head do nosso arquivo index.php precisaremos acrescentar o seguinte:
Isto nos d trs opes, uma coluna de largura estreita fixa, um larga fixa e uma verso flexvel (fluda). No gerenciamento de template (Template Manager) veremos a opo como mostrado na figura 1113.
Figura 11-13 Outros parmetros visto na rea de administrao/manuteno
Empregando os parmetros do template neste caso pode dar ao administrador do site flexibilidade em quase todas as facetas do template, como largura, cor e etc.; tudo controlvel com setagens condicionais de PHP e estilos CSS. Voc tambm precisar de um arquivo chamado de params.ini na sua pasta do template. Ele pode ser um arquivo em branco, mas o Joomla precisa desse arquivo para armazenar as setagens que voc tiver. Por exemplo, um arquivo ini (de inicializao) do exemplo anterior poderia se parecer com isso: showComponent=1 template_width=2 Voc deve assegurar-se de que este arquivo esteja com direitos de escrita, de forma que as alteraes possam ser realizadas.
2006 Compass Design
48 de 53

Cancelamento de Template Talvez o recurso mais poderoso de templates da verso 1.5 seja a habilidade de cancelar a sada gerada pelo ncleo. Isto feito com novos arquivos de sada chamados de arquivos do template que correspondem s visualizaes do leiaute de componentes e mdulos. O Joomla verificar em cada caso para ver se existe algum na pasta do template, e se houver, usa aquele e cancela a sada normal. Estrutura de cancelamento Todas as visualizaes de leiaute e de templates esto no ncleo principal em uma pasta /tmpl/. A localizao ligeiramente diferente para componentes assim como para mdulos, pois os mdulos tm essencialmente somente uma visualizao (view). Por exemplo:
A estrutura bsica para todos os componentes e mdulos a seguinte: visualizao -> leiaute -> templates Aqui esto alguns exemplos; observe que os mdulos somente possuem uma visualizao.
(visualizao)
(leiaute)
Normalmente existem diversos arquivos de templates envolvidos em um leiaute particular. Eles possuem uma conveno de nome comum:
(conveno de nome de arquivo) (descrio) (exemplo)
(leiaute principal de template) (leiaute secundrio de template chamado a partir do ...)
2006 Compass Design
49 de 53

(... arquivo do leiaute principal) (leiaute comum de template empregado por diferentes leiautes)
Cancelamento de Mdulos Cada mdulo tem uma nova pasta que contm seus templates, a pasta chamada de tmpl. Dentro dela esto arquivo php que criam as sadas, por exemplo:
Os trs primeiros so trs leiautes de newsflash (manchetes) baseados em quais opes de mdulos so selecionadas, e o arquivo _item.php um template de leiaute comum empregado pelos outros trs. Abrindo o arquivo encontraremos:
2006 Compass Design
50 de 53

Ento, podemos alterar isso para remover as tabelas e tornar o site um pouco mais acessvel:
Este novo arquivo pode ser colocado no diretrio do template em uma pasta chamada de html, como apresentado a seguir: Templates/templatetutorial15bold/html/mod_newsflash/_item.php Fcil assim, apenas tiramos as tabelas do mdulo de Newsflash (manchetes)! Cancelamento de Componente Os componentes funcionam quase da mesma maneira que os mdulos, exceto que existem muitas visualizaes associadas com muitos componentes. Se olharmos na pasta com_content encontraremos uma pasta chamada de views (visualizaes).
/components/com_content/views/
2006 Compass Design
51 de 53

/components/com_content/views/archive /components/com_content/views/article /components/com_content/views/category /components/com_content/views/section Ento, estas pastas corresponderiam as quatro visualizaes possveis para content (contedo), archive (arquivo), article (artigo), category (categoria) e section (seo). Dentro da pasta view encontraremos a pasta tmpl, assim como modules, e nesta os diferentes leiautes possveis. Se olharmos para a pasta category poderemos ver: /components/com_content/views/ category/blog.php /components/com_content/views/ category/blog_item.php /components/com_content/views/ category/blog_links.php /components/com_content/views/category/default_items.php Observe que no caso do com_content, o leiaute default.php referenciado ao leiaute padro que apresenta os artigos como uma lista de links. Abrindo-se o arquivo blog_item.php veremos as tabelas atualmente em uso. Se desejarmos cancelar a sada, ns colocamos o que quisermos empregar em nossa pasta template/html, por exemplo: Templates/templatetutorial15bold/html/com_content/category/blog_item.php Este um processo relativamente simples de copiar e colar todos esses views da pasta /components/ e /modules/ para a pasta templates/seutemplate/html. A funcionalidade de cancelamento 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.
2006 Compass Design
52 de 53

Esses templates so liberados sob a atribuio v2.5 da Creative Commons. Isto significa que voc livre para: Copiar, distribuir, apresentar e realizar o trabalho Fazer trabalhos decorrentes Fazer uso comercial do trabalho
Sob as seguintes condies: Voc deve atribuir o trabalho da maneira especificada pelo autor ou licenciador. (neste caso, deixando um link para o meu site no rodap do template). Para qualquer reutilizao ou distribuio, voc deve deixar claro para os outros os termos do licenciamento deste trabalho. Quaisquer dessas condies podem ser desconsideradas se voc solicitar a devida permisso do proprietrio dos direitos autorais.
Este tutorial propriamente um contedo de amostra que foi extrada do livro a ser lanado, cujo ttulo ser Joomla! A Users Guide: Building a Joomla! Powered Website (Joomla! Um Guia do Usurio: Construindo um Website Poderoso com o Joomla!), a ser publicado a partir de maio de 2007 pela editora Prentice Hall Professional. Ele licenciado sob a atribuio de no comercial no derivativo (decorrente) 2.5 20 . Tambm no site da Compass Designs existem dicas e truques que no explicitamos aqui, como por exemplo como criar mdulos com cantos arredondados e texto redimensionvel. Voc pode encontrar tudo isso em http://www.compassdesigns.net/tutorials/joomla-tutorials/.
20
http://creativecommons.org/licenses/by/2.5/
2006 Compass Design
53 de 53

Joomla15 TemplateTutorial Traduzido

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Joomla15 TemplateTutorial Traduzido

Enviado por

Direitos autorais:

Formatos disponíveis

Joomla!

TUTORIAL SOBRE TEMPLATE

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

Para download do documento original e arquivos modelos do template_1.5: http://www.compassdesigns.net/joomlalibrary/task,doc_download/gid,13/Itemid,52/

2006 Compass Design

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

Fig. A Template Joomla Com amostras de contedo

Fig. B Template Joomla Com pouco ou sem contedo

Figura 11-1 Template com e sem contedo

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

<option value=1>Yes</option> </param> </params> </install>

Vamos explicar o que algumas dessas linhas significam:

O nome do autor desse template ou mais provavelmente o seu nome.

Endereo de email onde o autor do template pode ser encontrado.

O endereo da URL do site do autor do template.

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

Alguns links teis:

Joomla! Um Guia do Usurio

O que tudo isso significa?

2006 Compass Design

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

O comando jdoc insere vrios tipos de XHTML.

Isto insere a sada para um mdulo de localizao. A sintaxe completa :

2006 Compass Design

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

Figura 11-4 Leiaute de um template muito bsico

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

http://www.clagnut.com/blog/1287/ http://leftjustified.net/journal/2004/10/19/global-ws-reset/ 6 http://www.thenoodleincident.com/tutorials/typography/template.html

2006 Compass Design

Joomla! Um Guia do Usurio

Figura 11-5 Template bsico com tipografia

2006 Compass Design

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

2006 Compass Design

Joomla! Um Guia do Usurio

Essas listas empregam o seguinte cdigo: