Joomla!

Um Guia do Usuário
Construindo um Website Poderoso com o Joomla!

JOOMLA! 1.5

TUTORIAL SOBRE TEMPLATE
“Joomla! A User´s Guide – Building a Joomla! Powered Website” Extrato do Capítulo 11 do livro:

Autor: Barrie North, www.compassdesigns.net (http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.html)
Tradução 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 conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”, a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5

Joomla! Um Guia do Usuário
Construindo um Website Poderoso com o Joomla!

Capítulo 11 Neste capítulo, 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 desejável, pois significa que o código do template será mais fácil de ser validado nos padrões especificados pelo Consórcio da World Wide Web (W3C). Também, tenderá a carregar mais rápido, ser mais fácil de manter e ter melhor performance em mecanismos de buscas. Discutiremos esses assuntos em detalhe ao longo deste capítulo. Incluso neste capítulo estão às seguintes seções: • • • • • • • • • • O que é um template Joomla? -> pág. 02 Explica quais funções são executadas por um template Joomla e as diferenças entre um template sem conteúdo e quando algum conteúdo é adicionado ao CMS. Processo de desenvolvimento no localhost (local) -> pág. 03 Como o processo de desenvolvimento difere daquele de uma página estática (X)HTML. W3C e Programação sem Tabela -> pág. 05 As implicações do desenho sem tabelas no Joomla e o relacionamento entre os padrões da W3C, usabilidade e acessibilidade. Os componentes de um template -> pág. 07 Quais arquivos compõem um template do Joomla e as funções que eles exercem. Empregando o CSS para criar um leiaute -> pág. 15 Como criar um leiaute de três colunas ordenadas empregando CSS ao invés de tabelas. O CSS Específico do Joomla -> pág. 22 Uma introdução aos estilos básicos que podem ser empregados com o Joomla, além de uma lista padrão de estilos que são empregados no mecanismo central do Joomla. Módulos -> pág. 23 Como posicionar e aplicar estilos aos módulos, incluindo técnicas para cantos arredondados. Menus -> pág. 28 Uma estratégia simples para produzir menus enxutos com CSS que imitam os efeitos daqueles produzidos com JavaScript. Suprimindo Colunas -> pág. 32 Como controlar a apresentação de colunas e como suprimi-las quando não houver conteúdo a ser apresentado. Fazendo um verdadeiro template para versão Joomla 1.5 -> pág. 36 Aqui vamos realmente empregar um modelo específico e apresentar os passos para criar um template útil para o Joomla 1.5

O que é um template Joomla? O template no Joomla é uma série de arquivos que dentro do CMS Joomla controla a apresentação de conteúdo. O template no Joomla não é um site da web, e nem mesmo pode ser considerado como um modelo de um site completo da web. O template é o esboço principal básico para visualizar o site Joomla. Para produzir o efeito de um site “completo”, o template trabalha em conjunto com o conteúdo armazenado nas bases de dados do Joomla. Um exemplo pode ser visto na Figura 11-1.
© 2006 Compass Design 2 de 53

Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”, a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5

Joomla! Um Guia do Usuário
Construindo um Website Poderoso com o Joomla!

Fig. A – Template Joomla Com amostras de conteúdo

Fig. B – Template Joomla Com pouco ou sem conteúdo

Figura 11-1 Template com e sem conteúdo

A Figura A apresenta o template em uso com amostras de conteúdo. A Figura B apresenta o template como ele deve parecer, com uma lista básica de recursos da instalação do Joomla, com pouco ou sem conteúdo. O template é moldado de forma que quando o seu conteúdo é inserido, ele herdará as especificações das folhas de estilo definidas no template, tais como o estilo de link, menus, navegação, tamanho do texto e cores, para citar alguns. Observe como as imagens associadas com o conteúdo (as imagens das pessoas) não são parte do template, enquanto a imagem no cabeçalho (parte superior da página) é parte do mesmo. Empregando um template para um CMS, como o Joomla faz, tem um número de vantagens e desvantagens: • Há uma completa separação do conteúdo e da apresentação, especificamente quando o CSS é empregado para o leiaute (em oposição a se ter tabelas no arquivo index.php). Este é um dos principais critérios para um site atender aos modernos padrões da web. • Um novo template, e daí um visual completamente novo para um site, pode ser aplicado instantaneamente. Isto pode, inclusive, permitir a especificação de diferentes localizações/posicionamentos do conteúdo, assim como cores e gráficos. • Se leiautes diferentes forem necessários para um site, isto pode ser difícil de se conseguir. Embora diferentes templates possam ser aplicados para diferentes páginas, esta construção em funcionalidade não é confiável. Melhor é empregar comandos condicionais em PHP e criar um leiaute que dinamicamente ajusta o número de colunas baseado no conteúdo a ser publicado. Processo de desenvolvimento no localhost (local) Uma página que você vê em um site Joomla não é estática. Isto significa que ela é gerada dinamicamente a partir do conteúdo armazenado no banco de dado. A página que você vê é
© 2006 Compass Design 3 de 53

Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”, a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5

Joomla! Um Guia do Usuário
Construindo um Website Poderoso com o Joomla!

criada a partir de vários comandos em PHP que estão 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 obtém” (WYSIWYG), tal como o Dreamweaver. Isso significa que o programador nem mesmo precisa codificar em HTML. Contudo, isso não é possível no processo de programação de template no Joomla, pois editores WYSIWYG não podem apresentar páginas dinâmicas. Isso significa que o programador deve codificar “manualmente” e ver a saída das páginas em PHP em uma página gerada por um servidor. Com uma conexão rápida o suficiente, este poderá ser o próprio servidor web, mas muitos programadores empregam um “servidor local” em seu próprio computador. Este é uma parte do software que processará as páginas da web no próprio computador do programador. Não existe a “maneira certa” para criar páginas da web, isto depende do conhecimento do programador. Aqueles mais gráficos fazem uma “imagem” de uma página em um programa gráfico, como o Photoshop, e então particionam a imagem para usar (técnica conhecida como slice and dice [cortar em pedaços e ordenar]). Os programadores mais inclinados para a área tecnológica, simplesmente vão direto para o CSS e começam a codificação. Contudo, como mencionado acima, o programador de template Joomla é limitado, pois ele não pode ver instantaneamente o efeito da sua codificação no mesmo editor; dessa forma o processo de programação modificado deve ser: 1. Fazer as programações com um editor HTML e salvar as modificações; 2. Ter um localhost [servidor local] em execução para “executar” o Joomla; 3. Ver o que foi programado no navegador; e 4. Voltar para o passo 1. Opções do Servidor Local No capítulo 3 [do livro a ser lançado e mencionado na página inicial] vimos como instalar um servidor web para rodar em seu computador. Descrevemos um deles para windows chamado Wamp. Para seguir adiante neste capítulo precisaremos tê-lo instalado [ou um outro, de sua preferência]. Se precisar, vou ficar por aqui enquanto você instala um servidor local. Dica Uma técnica útil para fazer o processo de programação mais eficiente é apresentar a página que se está desenvolvendo a partir de um servidor e então copiar e colar o código fonte em um editor. Por exemplo, tão logo o seu leiaute em CSS esteja estabelecido, você pode empregar um servidor local para apresentar a página, então selecione no navegador a opção de ver o código fonte. Você então poderá copiá-lo e colá-lo em seu editor. Você poderá agora facilmente especificar estilos para as páginas empregando CSS e não precisará seguir os passos especificados anteriormente.

Um editor XHTML livre Para aqueles que não possam pagar por um editor comercial como o Dreamweaver, existem alguns editores livres disponíveis. Nvu é uma escolha sólida, foi construído com validação 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 código fonte, se você desejar fazer alterações especiais.
© 2006 Compass Design 4 de 53

Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”, a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5

Joomla! Um Guia do Usuário
Construindo um Website Poderoso com o Joomla!

W3C e Programação sem Tabela Usabilidade, acessabilidade e otimização para mecanismos de buscas são todos termos empregados para descrever páginas de alta qualidade atualmente no mundo da web. Na realidade, existe uma significativa quantidade de sobreposição entre eles e uma página da web que demonstra que a característica de um afeta os demais, como demonstrado na figura 11-2. A maneira mais fácil para alcançar estas três metas é fazê-lo empregando o sistema disponível na página web que seja validado com os padrões da W3C. Por exemplo, um site que é estruturado semanticamente em (x)html (o xhtml explica o documento, não como ele se apresentará) será facilmente lido em um leitor de página por alguém que tenha dificuldade de visão. Será facilmente lido também por ferramentas de mecanismos de busca. Google é efetivamente cego em como ele lê o seu site.

Site “pobre”

Código válido pela W3C Figura 11-2 A sobreposição entre SEO, acessibilidade e usabilidade

Um site que é validado nos padrões estabelecidos pelo Consórcio W3C tem uma estrutura melhor para fazê-lo mais acessível, usável e otimizado para mecanismos de buscas. Pense nisso como construindo blocos para a sua casa. Um site construído com os padrões é mais forte e seguro. Você pode verificar suas páginas nos serviços de validação de HTML da W3C gratuitamente (http://validator.w3.org/). Em resumo, um site que atende as regras de padronização e validação da W3C emprega semântica (x)html e separa conteúdo de apresentação empregando CSS.

© 2006 Compass Design

5 de 53

Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”, a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5

html. e não para especificar o leiaute da página. Eles existem em paralelo ao código (x)html e permitem que você separe completamente o conteúdo (código semântico) da apresentação (CSS). Folhas de Estilo em Cascata (CSS) Diretamente relacionado a se ter códigos semânticos é empregar folhas de estilo em cascata para controlar a aparência e leiaute da sua página da web. Mas muitos concordam que elas são baseadas em se seguir códigos válidos. © 2006 Compass Design 6 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. seja html ou xhtml (ou outros). Em particular isto significa que a organização da estrutura dos marcadores h1/h2 e etc. Isto frequentemente leva a decisão que a páginas da web precisam apropriadamente nesses navegadores legados. cujo Diretor.csszengarden. O resultado é uma página que parece muito diferente. O melhor exemplo disso é o CSS Zen Garden (http://www. Folhas de Estilo em Cascata (CSS) é um mecanismo simples para adicionar estilos (por exemplo: fontes. O problema é complicado pelo fato de que poucos desenvolvedores de códigos estejam empregando o CSS.w3. Este artigo no site da Compass Design ajuda a explicar mais isto: http://www. O que não estava realmente empregando CSS para a apresentação.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Para ajudá-lo a entender de onde vieram os padrões web.org/Style/CSS/). Pergunte a cinco programadores o que são padrões web e você terá cinco respostas.com/). 1.csszengarden. Código Correto Semanticamente Mencionamos antes que ser semântico significa que o (x)html na página da web descreve somente o conteúdo. É fácil verificar o seu código no http://validator. cores e espaços) para documentos web. Muitas páginas da web hoje são programadas para navegadores antigos.org. Antes usávamos um exemplo de se construir códigos por construir. Nas primeiras séries lançadas.X. e muitos empregam tabelas para gerarem o código. o código empregava uma significativa quantidade de tabelas para as páginas de saída. um pouco de história é útil.compassdesigns. Assegure-se de empregar o tipo correto de documento (DOCTYPE) quando tentar validar o seu código. Tim Berners-Lee tem a distinção de ser atualmente o inventor da rede mundial (www) em 1989. nem produzia códigos corretos semanticamente. É licenciado sob a atribuição de não comercial-não derivativo 2. também.0. Isto tem levado os programadores web a desenvolverem os seus sites para suportar antigos navegadores assim como novos. Os padrões web colocam em questão um conjunto de “regras” para todos os navegadores web usarem para apresentar uma página da web.w3.com/tr/portuguese/) (http://www.. Por que? Os navegadores vem continuamente se desenvolvendo desde o início da web. não a apresentação. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. A organização principal apresentam esses padrões no Consórcio W3C. mas tem o mesmo conteúdo central.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-theblank-joomla-template. Os padrões apresentam-nos um modelo para os códigos de uma página da web ser desenvolvida para alcançar uma consistência. 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. (Fonte: http://www. estão somente empregando tabelas para dados tabulados. um site onde a mesma semântica XHTML é moldado em diferentes e únicas maneiras com diferentes códigos CSS. Programar sites poderosos com o Joomla apresenta atualmente desafios consideráveis para atender aos padrões de validação.5 .

php Esses nomes de arquivos e localização devem ser coincidentes exatamente. Então.xml (Observe a letra “D” maiúscula). É licenciado sob a atribuição de não comercial-não derivativo 2. nosso diretório se parecerá com: /templates/element /templates/voodoo Observe que os nomes dos diretórios dos templates devem ser os mesmos que os nomes dos templates. o time de desenvolvimento do núcleo do Joomla reconheceu este fato. iniciaremos dando uma olhadela em um template em branco (vazio). Na versão 1. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. o que quer que queiram. É convencional (embora não requerido pelo núcleo do Joomla) nomear e localizar todos os arquivos conforme mostrado abaixo: /element/template_thumbnail. em sua pasta própria. Obviamente que são sensíveis ao tamanho da letra e não devem conter espaços. se tivermos dois templates instalados. Em quase todos os templates. cuidados devem ainda ser tomados quando criando um template de forma que ele seja acessível (por exemplo: tamanho da fonte escalável).png Esses são apenas exemplos.css /element/images/logo.png /element/css/template. usável (por exemplo: navegação clara) e otimizado para mecanismos de buscas (por exemplo: ordenamento de fonte).xml /element/index.php Este arquivo é o mais importante. Ele monta o site e diz ao CMS Joomla onde colocar os diferentes componentes e módulos. Um template do Joomla é composto de vários arquivos e pastas. Dentro do diretório de um template existem um número de arquivos chaves: /element/templateDetails. Index. direitos autorais e os arquivos que compõem o template (incluindo as imagens eventualmente empregadas).5 . Entretanto. Ele é uma combinação de PHP e (X)HTML. Esses arquivos devem ser colocados no diretório /templates/ de uma instalação Joomla. customizar o leiaute. pois assim são chamados pelo script do núcleo do Joomla. O último emprego desse arquivo é para instalar um template quando empregando a área de administração/manutenção do site.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Felizmente. Os Componentes de um Template De forma a entender o conteúdo de um template. vamos examinar cada um desses arquivos de per si. templateDetails. neste exemplo acima element e voodoo. Também detalha o autor. /element/template_thumbnail. Esse é um arquivo metadata de formato XML que diz ao Joomla quais os demais arquivos são necessários quando carregando uma página da web que usa esse template.5 é possível para programadores de templates sobrescreverem completamente a saída do núcleo (chamado de uma vista) e retirar todas as tabelas.png © 2006 Compass Design 7 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. arquivos adicionais são empregados.

por razões de organização. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. A pasta de localização é opcional. Ele também relaciona informações tais como o nome do autor e direitos autorais. Depois que o template tiver sido instalado. Geralmente o nome apresentado é o empregado. muitos programadores colocam este arquivo na pasta de imagens (images). /element/images/logo.0</version> <description>Template for official Joomla documentation guide</description> <files> <filename>index. mas você deverá especificar onde ele está no arquivo index. se empregado.net</authorUrl> <version>1.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! É uma captura da imagem da tela do navegador (geralmente reduzida para cerca de 140 pixels de largura por 90 pixels de altura). É licenciado sob a atribuição de não comercial-não derivativo 2.css É o CSS do template. Algumas dessas informações são mostradas na área de administração/manutenção na opção de Gerenciamento de Template (Template Manager). Aqui temos uma imagem chamada de logo. Novamente.js</filename> <filename>images/threecol-l.css</filename> <filename>css/template_css. mas veremos adiante que há vantagens em se ter outros arquivos css também.5 . no Gerenciamento de Template (Template Manager) e também no módulo de seleção de templates na página de abertura. Um exemplo de arquivo xml é apresentado abaixo: <?xml version=”1. como um exemplo. Você pode denominá-lo como quiser. O arquivo templateDetails. isto funciona como uma imagem de pré-visualização visível na área de administração do Joomla.png.php</filename> <filename>templateDetails.xml deve relacionar todos os arquivos que fizerem parte do template.php.xml O arquivo templateDetails.xml</filename> <filename>js/somejsfile. /element/css/template.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 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.css</filename> <filename>css/layout.png É uma imagem que acompanha o template.5” type=”template”> <name>TemplateTutorial15</name> <creationDate>December 2006</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail>compassdesigns@gmail.com</authorEmail> <authorUrl>www.gif</filename> <filename>css/customize.gif</filename> <filename>images/threecol-r.compassdesigns.0” encoding=”utf-8”?> <install version=”1.

01/01/2008.php/board. Esta é uma forma livre e pode ser qualquer coisa.joomla.org/index. etc.html) <authorEmail>compassdesigns@gmail.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! <option value=”1”>Yes</option> </param> </params> </install> Vamos explicar o que algumas dessas linhas significam: <install version=”1. O nome que você especificar aqui será também empregado para criar o diretório dentro da pasta templates.joomla. <files> © 2006 Compass Design 9 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. May 2005.5 . <author>Barrie North</author> O nome do autor desse template – ou mais provavelmente o seu nome.com</authorEmail> Endereço de email onde o autor do template pode ser encontrado. Se instalar manualmente. <name>TemplateTutorial15</name> Define o nome de seu template. você precisará criar um diretório que tenha um nome idêntico ao nome do template.net</authorUrl> O endereço da URL do site do autor do template. Contudo. <authorUrl>www. como. Um tipo de licenciamento para desenvolvedores e programadores pode ser encontrado nos fóruns do Joomla. espaços.5. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.0</version> A versão do template. 08-June-1978. ele não deve conter qualquer caractere que o sistema de arquivos não possa processar. A opção type=”template” diz ao instalador que estamos instalando um template e é para o Joomla 1. <version>1. por exemplo.5” type=”template”> Os conteúdos de um documento XML são instruções para o instalador da área de administração. <creationDate>December 2006</creationDate> A data que o template foi criado. (http://forum.org/ e http://forum.compassdesigns.23. <copyright>GPL</copyright> Qualquer informação de direitos autorais vai aqui neste elemento.0.

Este é um pedaço de código que aparece na parte superior de cada página da web. Para dar-lhe um sentido do que isto significa. por exemplo: se o seu template estiver em um diretório chamado “SeuTemplate” e todas as imagens estiverem na pasta “images” que está dentro do diretório “SeuTemplate”.js</filename> <filename>images/threecol-l. E quando digo nerds. Novamente. não quero dizer profissionais comuns da web como eu e você. Todos os arquivos de imagens que o template emprega também são listados na seção <files>.css</filename> <filename>css/template_css. Também poderia ser incluído qualquer arquivo adicional.php O que de fato existe em um arquivo index.gif</filename> <filename>images/threecol-r. a como um navegador interpreta o CSS.5 .css </filename> </files> A seção “files” (arquivos) contém todos os arquivos genéricos como a fonte PHP para o template ou a amostra da imagem para a pré-visualização do template. Primeiro olharemos para uma parte crítica de se conseguir templates válidos. o caminho correto é: <filename>images/my_image. o DOCTYPE existente no topo do arquivo index.alistapart.com: [informação sobre doctypes no W3C diz que doctypes é] “escrito por nerds para nerds. especialmente.jpg</filename> Finalmente. É licenciado sob a atribuição de não comercial-não derivativo 2.xml</filename> <filename>js/somejsfile. Cada arquivo listado nesta seção é marcado com os marcadores <filename> </filename>.gif</filename> <filename>css/customize. As informações de caminho dos arquivos são relativos à raiz do template.php</filename> <filename>templateDetails. Quero dizer aqueles que fazem o resto de nós parecermos como avós no primeiro dia em que recebem um email. todo arquivo de folha de estilo são listados na seção <files>. veja uma observação do site http://www.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! <filename>index. O arquivo Index. Novamente o nome do arquivo é marcado com os marcadores <filename> </filename> e o seu caminho é relativo à raiz do template.TM” © 2006 Compass Design 10 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.php? Ele é uma combinação de (X)HTML e PHP que determina tudo a respeito do leiaute e apresentação das páginas. No topo da página do nosso template temos o seguinte: O DOCTYPE é a parte fundamental do componente a partir da qual uma página da web é apresentada em um navegador e refere-se. cada arquivo listado é marcado com o marcador <filename> </filename>. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.css</filename> <filename>css/layout. aqui empregamos o exemplo de um arquivo JavaScript que é necessário para o template.php.

hixie. onde você vê a expressão "valid xhtml" no final da página. Elaborar o seu site para atender aos padrões deve ser uma forma de reduzir o que você está dizendo que faz e.´>´?> A realidade é que uma declaração xml não é realmente necessária. Para conseguir o mesmo resultado você terá que empregar “hacks” (cortes ou novos códigos de programação. que o Internet Explorer não entenderá o comando “min-width” para estabelecer a largura mínima da página. É licenciado sob a atribuição de não comercial-não derivativo 2. Se você realmente entende essa afirmação você está bem à frente no jogo e além desse guia. normalmente).org/css/quirksmode. A Microsoft especificou o IE6 de tal modo que é possível ter páginas válidas. • A parte a respeito do modo ‘quirk’ do IE6 é importante. <?php echo ´<?xml version="1. no modo ‘quirk’. ou seja. há diversos tipos de doctypes que você pode empregar.org/QA/2002/04/Web-Quality © 2006 Compass Design 11 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Isto minimizará as codificações extras (hacks) que talvez tenhamos que fazer. as pessoas algumas vezes terminam nesse modo louco (quirks mode) acidentalmente.alistapart. Basicamente. fazendo o que você diz que faz. Alguns links úteis: • http://www. Essencialmente. desde quando a WWW iniciou. então o navegador entra no modo "quirks". Esta é uma tentativa de voltar um passo atrás e para tentar ficar compatível. Isto significa. Você pode ler mais em http://www. Nota: Alguns dizem que processar XHTML como text/html é considerado prejudicial. no início desse item.dtd Exceto se este for um link relativo ao servidor WC3. há alguma coisa chamada de modo "quirks" (volta). Um doctype do tipo ‘transitional’ significa que à página será permitida umas poucas diferenças em relação aos padrões.w3. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Para complicar as coisas. como demonstrado no exemplo acima. Isto normalmente acontece por duas razões: • Eles empregam direto a declaração do tipo de documento (doctype) a partir de uma página WC3. ‘Strict’ significa que o html (ou XHTML) será interpretado exatamente como especificado nos padrões.5 .Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! De qualquer maneira. Neste capítulo estaremos programando somente para o IE6+. então vamos deixar sem. Se o tipo de documento (doctype) estiver errado. devemos ter certeza de que o mesmo estará funcionando no modo padrão. sim. Só isso! Nada mais. fará o processamento da página fingindo que ela era da versão do IE4. Isto acontece por existir a expressão "xml declaration" antes da declaração do tipo de documento (doctype).html • http://www. Simplesmente significa que o código empregado atende as especificações do tipo de documento (doctype) mencionada. por exemplo. então. você precisa do caminho completo.quirksmode. o Internet Explorer. porém.com/stories/doctype • http://www. Fazer uma página concordante com os padrões.0" encoding="utf-8"?´. Infelizmente. hackear) no código CSS. por exemplo. o doctypes diz ao navegador como interpretar a página. desatualizado ou não existir. não significa que foi difícil elaborar o código ou entender os marcadores. diferentes tipos de navegadores têm diferentes níveis de suporte a CSS. então. Aqui as palavras “strict” e “transitional” iniciam posicionando as flutuações existentes (float:left e float:right.ch/advocacy/xhtml. onde o link termina em: DTD/xhtml1-strict.

Isto inclui os seguintes marcadores (em uma instalação padrão): © 2006 Compass Design 12 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.org/index.php? Vamos observar a estrutura do marcador de cabeçalho (head) primeiro. ?> está carregando os parâmetros de idioma especificados no arquivo de configuração global do site.5 .0.html O que existe a mais no arquivo index. Coisas do cabeçalho que são especificados no arquivo de configuração do site.joomla.org/index. descrever o suficiente para a elaboração de um site. queremos ser o mais concisos possíveis.php/topic.html http://forum.0. É licenciado sob a atribuição de não comercial-não derivativo 2. porém.6048. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. A informação de cabeçalho que empregaremos é a seguinte: O que tudo isso significa? Falamos sobre isso acima.7537.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! • • http://forum. O código <?php echo $this ->language.php/topic.joomla.

ainda neste ponto isto parece não representar nada muito inspirador. o favicon (ícone indicativo do site) e também URL´s do alimentador de RSS. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. 3. significa que a página pode ser lida por qualquer um: um navegador.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Isto inclui um número de metatags. É licenciado sob a atribuição de não comercial-não derivativo 2. module superior (top). © 2006 Compass Design 13 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Nós temos uma ordem lógica razoável: 1. O código PHP <?php echo $this >template?> retornará o nome do template atual. A partir do ponto de vista da web. e 5. módulos da esquerda (left). conteúdo principal (component). O leiaute semântico é a pedra fundamental da acessibilidade. nome do site (sitename). Escrevendo dessa forma ao invés do caminho real faz o código mais genérico. Quando você cria um novo template você pode apenas copiá-lo (com todo o seu código de cabeçalho) e não se preocupar com a edição de nada.5 . O corpo de um template vazio (em branco) do Joomla Isto será muito fácil! Pronto? OK. A meta é tentar e se aproximar o mais próximo possível da semântica de marcação. Esta linha faz a ligação do arquivo CSS com o template. 2. um mecanismo de busca ou um leitor de tela. módulos da direita (right). A saída é apresentada na figura 11-3. 4.

podemos facilmente ter: © 2006 Compass Design 14 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. O comando de PHP echo simplesmente apresenta na saída um conjunto de caracteres do arquivo de configuração (configuration.5 .php). Se alguém quiser ir adiante e colocar módulos aleatórios em localizações aleatórias. Uma importante consideração para sites CMS.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-3 Um template sem especificação de estilo Você poderá ler mais a respeito de leiaute semântico no Apêndice B (do livro retromencionado). É isto que frequentemente derruba programadores quando tentam validar seus sites. um template é somente tão bom quanto a quantidade de conteúdo. então você poderá ter uma bagunça. Nota Agora não vale nada que o que temos aqui realmente é apenas um potencial para leiaute semântico. Você deve ter observado que empregamos o primeiro de outros diversos comandos específicos do Joomla. Aqui estamos empregando o nome do site. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.

será determinado pelo link do menu. 1 2 www. É licenciado sob a atribuição de não comercial-não derivativo 2. Um esboço típico deve empregar tabelas para formar o leiaute da página. a respeito do novo site da disney 2 : disney. Empregando o CSS para criar um leiaute Estaremos empregando CSS para fazer um leiaute de três colunas para um template Joomla.com). Não tem certeza de por que precisaria disso. Também estaremos fazendo um leiaute flexível.upsdell. Fazer um leiaute flexível significa que a sua valiosa página da web não será apresentada como uma fina coluna na resolução de 1024. A largura da página é a questão.5 . Isto resulta em tempo de carregamento maior (o que as pessoas que acessam a internet não gostam) e baixa performance em ferramentas de buscas. com os chamados “spacer gifs” (espaçadores). Mesmo grandes companhias caem na armadilha das tabelas. conforme visto em uma recente controvérsia. Embora o percentual esteja caindo. Nota Interessado o bastante. mas penso que deixarei você saber! Isto insere a saída para um módulo de localização.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! O comando jdoc insere vários tipos de XHTML. também. Há dois tipos de leiautes de páginas da web. está empregando a resolução de 1024 x 768 e maior 1 (fonte: www. Este insere uma saída de um componente. fixo e flexível. e será totalmente visível em monitores com resolução menor.com/BrowserNews/stat_trends. 76%. Qual componente.compassdesigns. não somente com marcadores. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.net/joomla-blog/general-joomla/what-makes-a-good-designer. basta especificar a largura das colunas em percentual. pois. A grande maioria. mas. Elas são úteis. e ambos se referem a como a largura da página é controlada. cerca de 20% das pessoas que acessam a internet empregam a resolução de 800x600.htm#res www.co. por causa das muitas resoluções de um navegador em que as pessoas navegam na web.html © 2006 Compass Design 15 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. parece que você parece é capaz de ter múltipas instâncias de saída de um componente. A sintaxe completa é: Veremos as várias opções para estilos posteriormente neste capítulo.upsdell. O código pode duplicar em tamanho. mas têm muitas desvantagens: • Tem muitos códigos extras comparados ao leiaute com CSS.uk.

brainjar. Talvez seu mais importante visitante seja o Google.com/css/positioning/ © 2006 Compass Design 16 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Aqui estão algumas sugestões: • • • Kevin Hale's . o assunto mais importante. eles poderiam estar no arquivo template.yourhtmlsource.com/cssbeginner/ yourhtmlsource. Você pode posicionar elementos (o que quiser) de diversas maneiras com CSS. Os estilos CSS são definidos no marcador do cabeçalho (head) do arquivo index. Para alterar alguma coisa deve-se ter conhecimento do que todos os marcadores td/tr estão fazendo. Como ele é básico. O conteúdo não pode ser ordenado por código. mas. Aqueles que vêem com navegadores de texto ou leitores de tela lerão a página da esquerda-superior para o canto direito-inferior. o que significa que o conteúdo pode ser arranjado no código/fonte. Um leiaute CSS. normalmente. permite que o conteúdo seja código-orientado. Para uma informação rápida uma boa fonte é: Brainjar's CSS Positioning 3 .htmldog. Ainda não muito empolgado. por outro lado.5 .php para mostrar o que está acontecendo. a qualquer tempo.An Overview of Current CSS Layout Techniques http://particletree. Isto significa que primeiro eles vêem tudo no cabeçalho e a coluna da esquerda (em um leiaute de 3 colunas) antes de chegar ao meio da coluna.com/stylesheets/ Estaremos empregando o comando float para posicionar o nosso conteúdo. ao menos. 3 www.css.com/features/an-overview-of-current-css-layout-techniques/ htmldog's CSS Beginner's Guide http://www. Tudo estará contido em uma caixa/invólvucro ou elemento chamado #wrap. e ele emprega leitores de tela para todos os propósitos e intenções. Com CSS existem apenas algumas linhas para inspecionar. o template se parecerá com o apresentado na Figura 11-4.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! • • Elas são difíceis de se manter. Vamos olhar o nosso leiaute empregando CSS. mas vamos ver se todos estão acompanhando. Muitos usuários da internet não vêem as páginas da web em um navegador. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2. Este elemento tem uma largura de 80% da área de visualização. “um guia básico de CSS”.com http://www. Se você é novo em CSS deve ler.

margin-bottom:5px. margin-top:5px.Helvetica. lineheight:1.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-4 Leiaute de um template muito básico Dica: CSS abreviado É possível reduzir a quantidade de código CSS empregado através de “abreviações”..html).italic. Tão logo tenha se familiarizado com os estilos. O comando de estilo clear:both no rodapé diz ao navegador para parar de fluir e fazer © 2006 Compass Design 17 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Há estilos de “abreviações” no início de cada definição de estilo. passe a empregar os comandos abreviados e apague os completos.sans-serif. É licenciado sob a atribuição de não comercial-não derivativo 2.. Todas são especificadas como ‘floated” (fluindo) à esquerda. Leia mais a respeito de sintaxe em An Introduction to CSS shorthand properties (Uma introdução às propriedades de abreviações em CSS http://home. A cada uma das colunas da esquerda.3em. Um exemplo disso é o estilo de espaçamento e margem para um elemento. font-family:Arial. margin-right:10px.sans-serif. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. font-size:1em. margin-left:10px. que pode ser substituído por: margin: 5px 10px. Faça isso: font:bold 1em/1.net/junjun/html/shorthand.no.5 . font-weight:bold.Helvetica. meio e direita é especificado os seus próprios elementos. ao invés disso. font-style:italic.3em Arial. A sintaxe é: font: font-size |font-style | font-variant | font-weight | line-height | font-family Aqui está um exemplo. e dado um percentual de largura de 100%.

ao menos.inside {padding:10px. Isto é apresentado abaixo: Ao CSS adicionamos: . a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. tem menos código e é mais fácil de se manter. Para conseguir o nosso efeito "gutter" adicionamos um outro elemento <div> entre as colunas. vamos ter que usar uma técnica mais avançada de justificação. conhecido como “nested float” (fluir aninhado). normalmente chamados de "gutter" (canal). precisamos acrescentar alguns espaçamentos de coluna. Ele apresenta. há um problema. Contudo. © 2006 Compass Design 18 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. não é fonteordenado. Resolvemos este problema não empregando qualquer espaçador ou borda em algo que tenha uma largura. Para implementar o leiaute e adicionar algum espaço ao conteúdo.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! com que o rodapé se alongue (justifique) englobando as três colunas. Quando formos construir o nosso segundo template neste capítulo. Infelizmente. Para isso devemos empregar um leiaute mais avançado. duas vantagens de se empregar CSS ao invés de leiautes baseados em tabelas. É licenciado sob a atribuição de não comercial-não derivativo 2. Você deve saber que o Internet Explorer não interpreta corretamente o código CSS (veja em: Internet Explorer does not interpret CSS correctly).} Este simples leiaute é o suficiente para se aprender a como empregar o CSS com o Joomla.5 . Um problema é que ele calcula a largura diferentemente.

então. Isto nos permitirá fazer uma página limpa e bonita.net/ordered-floats. Ele ignorará o comando !important e considerará a largura total de 960px. ainda.html e http://www. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Com navegadores que seguem o padrão.5 . Este leiaute específico (de fonte ordenada) é um tanto quanto complexo e grande o suficiente para ser colocado aqui. para centralizar a página. Nós também movemos todo o nosso código CSS que estava no marcador de cabeçalho do index. Observe que tivemos que adicionar um pequeno código (hack) para o IE6. um par de coisas. nosso leiaute agora será: Nós centralizamos a página empregando um pequeno código (hack). existe uma explicação de como criar o mesmo em arquivo pdf para download em http://www. É licenciado sob a atribuição de não comercial-não derivativo 2. Isso deve ser feito por causa do Internet Explorer. (veja: http://www.compassdesigns. mas o IE não reconhece isso. apenas empregamos o código margin:0 10%. Então nós centralizamos o “texto” de toda a página e alinhamos de volta para a esquerda nas colunas. o conteúdo mais importante é aquele que vem do componente.net.positioniseverything. Em comemoração ao suporte do Internet Explorer 7 aos códigos de min/max width (IE6 não suportava esses códigos) podemos adicionar um tamanho de largura (width) mínima e máxima.compassdesigns. Vamos adicionar.html) O CSS padrão do Joomla Até agora todo nosso CSS tem sido somente sobre leiaute. A partir de uma perspectiva de um site Joomla. vamos agora adicionar alguma formatação.php e colocamos em arquivos CSS.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-yourjoomla-website. pois o mesmo ainda não entende àqueles códigos. © 2006 Compass Design 19 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Leiautes de fonte ordenada obtém melhores resultados em mecanismos de busca do que aqueles que o conteúdo importante aparece na parte final do código. Afortunadamente para você.

Você pode ler mais sobre o reset global em clagnut 4 e left-justified 5 .5 .com/blog/1287/ http://leftjustified. Ainda temos uma largura máxima. Isso é discutido mais em: An experiment in typography at The Noodle Incident (Owen Briggs) 6 . 2. É licenciado sob a atribuição de não comercial-não derivativo 2. Também adicionamos um novo estilo de colunas: overflow:hidden. então. Bem. A razão disso é para tentar manter a melhor consistência entre os navegadores. E tendo altura de linha de line-height:1. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. uma margem inferior. Se acrescentarmos botões de alteração de largura teremos que alterar apenas um valor.clagnut. Isto ajuda a obter a consistência do navegador. O tamanho da fonte foi setado para 76%.3em ajuda na leitura. Limitando a fluidez (flexibilidade)torna o site mais acessível/usável. Isto fará a página “quebrar” mais consistentemente quando reduzimos a sua largura. Tudo recebe o valor zero de margin e padding e então todos os elementos do nível de bloco é dado. entretanto.thenoodleincident. 1. No início da tipografia do CSS estabeleceremos alguns estilos básicos e teremos o que conhecemos como “reset global”.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Dica Pode parecer estranho definir nossas colunas em percentuais de largura e depois ter um elemento (div) que é fixo. por que não colocarmos tudo flexível? Muitos usuários da web hoje possuem enormes telas de monitor. Pesquisa de usabilidade nos informa que linhas de texto mais largas que 900px são difíceis de ler porque os olhos têm que se deslocar por um longo caminho para ir para a próxima linha.html 5 © 2006 Compass Design 20 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.com/tutorials/typography/template. Ter colunas flexíveis dentro de elementos de largura fixa torna o template mais flexível. Todas as fontes foram setadas em em (é um fator relativo ao tamanho da propriedade font-size de um elemento).net/journal/2004/10/19/global-ws-reset/ 6 http://www. 4 http://www. existem muitas coisas acontecendo aqui. Isso significa que as páginas serão mais acessíveis e os visitantes do site poderão alterar o tamanho da fonte para o da sua preferência.

com/log/2004/09/03/liquid-bleach. Isso é porque elas somente se estendem de acordo com o conteúdo. 7 8 http://www. Nós iremos considerar essa abordagem e teremos caixas limitando os módulos. Essa técnica é chamada de “Faux Columns” e é descrita por Douglas Bowman 7 e Eric Meyer 8 .html http://www.meyerweb. isso não será problema. não existe conteúdo. É licenciado sob a atribuição de não comercial-não derivativo 2.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Se você pretende adicionar algum tipo de cor de fundo (background) veremos alguma coisa como o apresentado na figura 11-5.5 . Figura 11-5 Template básico com tipografia Observe que as colunas laterais não alcançam o seu rodapé. você pode usar uma imagem de fundo que se repete verticalmente. onde o espaço está em branco à esquerda e à direita. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Se nós temos um template que tenha um fundo branco para as três colunas. Se você quer colunas com alturas iguais e deseja colori-las ou ter caixas.stopdesign.com/eric/thoughts/2004/09/03/sliding-faux-columns/ © 2006 Compass Design 21 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.

Baseado em algumas pesquisas com inúmeros membros da comunidade. H2. uma regra mais específica sobrescreverá uma menos específica.contentheading serão vermelha.5 tenha a funcionalidade de cancelar/substituir a saída do núcleo do template. Mais exemplos: © 2006 Compass Design 22 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. ul. form.} div. você freqüentemente verá regras mais específicas sendo empregadas. a. a lista atual é a apresentada abaixo. Em conjunto com essas tabelas existem saídas CSS disponíveis para os programadores aplicarem estilos em suas páginas. Observe que ela não inclui estilos de web genéricos como H1. sua renderização padrão ainda emprega tabelas para a saída de conteúdo no corpo principal. pois esta regra é mais específica (pois a classe . É importante observar esta lista. Por exemplo: a {color:blue.} .contentheading {color:blue. Basicamente. Muitos projetos que você pode encontrar atualmente empregam estilos de CSS mais específicos às suas definições.contentheading {color:red.} A cor do link e a cor da classe .Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! O CSS Específico do Joomla Embora o Joomla 1.5 . p. etc.} a:link {color:red. Isto freqüentemente ocorre quando a classe está dentro de uma tabela. É licenciado sob a atribuição de não comercial-não derivativo 2.contentheading está contida dentro de uma <div>) No caso de templates Joomla.

É licenciado sob a atribuição de não comercial-não derivativo 2.contentpagetitle que seja um link.moduletable table.meyerweb.contentpagetitle que seja um link.com/guides/cssadvanced/specificity/ http://www. Módulos Quando um módulo é chamado no arquivo index.php.contentpagetitle:link aplicará o estilo para qualquer marcador “a” que contenha a classe .moduletable somente aplicará o estilo à uma tabela que contenha a classe (class=”moduletable”). . a.uk/archives/css_specificity_wars.moduletable .Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! .html http://www. Atualmente o arquivo padrão modules. table. A sintaxe é: <jdoc:include type=”modules” name=”LOCATION” style=”OPTION” /> O estilo é opcional e é definido em /modules/templates/modules.com/eric/css/link-specificity. isto torna a página mais lenta e dificulta a atualização.co. ele tem várias opções de como será exibido. 12 para ser exato! Como mencionado anteriormente. se o resultado não for aquilo que se deseja.stuffandnonsense.moduletable é o nome de uma <div> que engloba (envolve) um módulo.htmldog. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Os módulos são apresentados em uma coluna. é freqüentemente mais fácil começar empregando estilos mais gerais possíveis e então chegar ao mais específico.contentpagetitle:link . style=”table” (apresentação padrão). Alguns links sobre especificidades: http://www. Um exemplo de saída é apresentado abaixo: <table cellpadding=”0” cellspacing=”0” class=”moduletable”> <tr> <th valign=”top”> modChrome_table </th> © 2006 Compass Design 23 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Especificidade não é fácil de se entender.contentpagetitle a:link a.moduletable aplicará o estilo independentemente de qual elemento estiver na classe.contentpagetitle a:link aplicará o estilo para qualquer elemento que esteja DENTRO da classe .php possui os seguintes leiautes.html Neste momento o nosso template está empregando um monte de tabelas.5 . . Para reduzir o número de tabelas precisamos empregar parâmetros de estilos nos jdoc:include quando chamarmos os módulos.php.

É licenciado sob a atribuição de não comercial-não derivativo 2. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Cada módulo é apresentado em uma célula de uma tabela-invólucro. Um exemplo de saída é apresentado abaixo: style=”xhtml” = Os módulos são apresentados como um simples elemento <div>. Um exemplo de saída é apresentado abaixo: <div class=”moduletable”> <h3>modChrome_xhtml</h3> modChrome_xhtml </div> style=”rounded” = Os módulos são apresentados em um formato que permite. Se esse $style for empregado o nome da <div> muda de moduletable para module. apresentar cantos arredondados.5 . Um exemplo de saída é apresentado abaixo: <div class=”module”> <div> <div> <div> <h3>modChrome_rounded</h3> © 2006 Compass Design 24 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! </tr> <tr> <td> modChrome_table </td> </tr> </table> style=”horz” = Os módulos são apresentados horizontalmente. por exemplo.

sem elemento de agrupamento e sem título. sem processamento. É realmente fácil adicionar uma sua própria. ou seja. modChrome_raw Como você pode ver as opções CSS (xhtml e rounded) são muito mais limpas em código e as tornam mais fáceis de serem empregadas para se especificar estilos às páginas da web.5 . a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Para desenvolver nosso template.php. nós colocaremos um módulo de estilo de “xhtml” em todos os nossos módulos. isto faz parte das novas poderosas possibilidades incluídas na versão 1. Este autor não recomenda o emprego de sufixos table (padrão) ou horz.5 do Joomla. É licenciado sob a atribuição de não comercial-não derivativo 2. a menos que seja absolutamente necessário. Mas aqui está a melhor parte! Se você examinar o arquivo modules.php verá todas as opções existentes para os módulos. o exemplo de xhtml se parece com o apresentado abaixo: Você pode observar que é bem fácil fazer alterações. Dentro do arquivo module. © 2006 Compass Design 25 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! modChrome_rounded </div> </div> </div> </div> style=”raw” = Os módulos são apresentados em estado bruto.

Também acrescentamos códigos CSS para especificar os estilos de borda e fundo para o cabeçalho (header). É licenciado sob a atribuição de não comercial-não derivativo 2. Vamos agora acrescentar alguns estilos simples ao template para conseguir o resultado abaixo: Também colocamos o título do site no marcador <H1>. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Observe que não podemos colocar esses estilos de módulos no <jdoc:include type=”component” />. Nosso código CSS se parecerá com isso: © 2006 Compass Design 26 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.5 . Especificando o módulo para uma apresentação CSS reduziu o número de tabelas para 14. É semanticamente mais correto e também auxiliará os mecanismos de buscas. pois esse não é um módulo.

eu apaguei aqueles parâmetros.5 . Para que tudo funcionasse adequadamente. Essa tipografia de CSS agora produz o resultado apresentado na figura 11-6.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Nota Diversos parâmetros de menu da instalação padrão tem um sufixo nas propriedades do módulo de _menu. © 2006 Compass Design 27 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. É licenciado sob a atribuição de não comercial-não derivativo 2. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.

com. Novamente.5.com 9 tem uma seleção de cerca de 30 tipos de menus todos empregando a mesma base de códigos. Existem pequenas diferenças no código que tenhamos que alterar para podermos adaptar esses menus para o Joomla.5 .au/listamatic/index.5).maxdesign. o resultado reduzirá a quantidade de códigos e facilitará a marcação. É chamada de Listamatic. navegadores sem suporte a CSS.0 e será descontinuada. navegadores com suporte a CSS desativados e mecanismos de busca serão capazes de acessar o seu conteúdo mais facilmente.htm © 2006 Compass Design 28 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Lists são também melhores que tabelas porque navegadores baseados em texto. Lembre-se. a especificação de lists é nova na versão 1. Depois de colocar todos os nossos menus para lists nós temos somente 12 tabelas (veremos como removeremos o resto empregando o novo recurso de cancelamento/substituição da versão 1. flat list é da versão 1. A página da web no maxdesign. empregando a lista de CSS ao invés de tabelas. Uma das outras vantagens de se empregar CSS para menus é que existem um monte de exemplos de códigos em vários sites de programadores em CSS. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-6 Template Básico com o título dos módulos estilizados Menus Vimos no capítulo 6 que existem diversas especificações de como um menu pode ser renderizado (formatado). Vamos dar uma olhada em um deles e ver como pode ser empregado. É licenciado sob a atribuição de não comercial-não derivativo 2. leitores de tela. 9 http://css.

dessa forma: Dessa forma. O que pode ocorrer é que é provável que eles venham a descontinuar esse recurso em futuras versões do Joomla. Veremos nas seções de Dicas e Truques (do livro retro-mencionado) que ele permite diferentes caixas coloridas com uma simples alteração da classe do sufixo do módulo.5 . você precisará substituir o estilo no código CSS da classe navcontainer para moduletablesuffix. precisaremos de alguma espécie de <div> envoltória. além da 1.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Essas listas empregam o seguinte código: Isto significa que existe uma <div> que engloba a lista chamada de navcontainer e o marcador <ul> tem uma identificação de classe navlist.htm © 2006 Compass Design 29 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Um dos objetivos de desenvolvimento futuro do núcleo do Joomla é claramente separar essas regras.au/listamatic/vertical10. a saída de uma opção de módulo de estilo xhtml é: Se adicionarmos um sufixo de módulo. Podemos conseguir isso empregando os sufixos de módulos. quando escolher um menu do Listamatic. Para duplicar esse efeito no Joomla. Se você se lembra.com. É licenciado sob a atribuição de não comercial-não derivativo 2. isto será acrescido à classe moduletable. Nosso CSS será: 10 http://css.5. Para o nosso site empregaremos a List 10 elaborada por Mark Newhouse 10 . a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.maxdesign. Nota Os sufixos de módulos de certa forma mesclam a linha entre a programação de um modelo de um site e a fase de produção/administração desse site. Este emprego de sufixo de classe dos módulos é muito útil.

Então. apenas precisamos adicionar a palavra “menu” como o sufixo do módulo. qualquer menu que queiramos que seja estilizado dessa forma.5 . É licenciado sob a atribuição de não comercial-não derivativo 2. © 2006 Compass Design 30 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Isso produzirá um menu como mostrado na figura 11-7.

Crie uma instalação padrão do Joomla e então observe o código que está formatando o mainmenu (menu principal). aqui está uma dica útil. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. O código para o menu para se criar o estilo desejado é o que se segue: © 2006 Compass Design 31 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. É licenciado sob a atribuição de não comercial-não derivativo 2. Copie e cole esse código em um editor HTML (como Dreamweaver). Substitua todos os links por “#” e então você pode adicionar regras de CSS e testar até que obtenha o efeito desejado.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-7 Template Básico com menu estilizado Dica de Programador Quando estiver tentando fazer um menu específico funcionar.5 .

. Escondendo Colunas Quando o nosso leiaute estiver pronto sempre teremos as nossas três colunas. Em primeiro lugar há mudanças na maneira de como as coisas eram feitas no Joomla! 1. por exemplo.php)para permitir que a edição seja facilitada.com_jd-wp/itemid. Em um site estático o conteúdo nunca muda. Novos recursos 11 http://dev. queremos dar aos administradores a habilidade de colocar o seu conteúdo onde quer que eles queiram sem que tenham que se preocupar com edição de leiaute em CSS.php) ao invés de lincado (presente como um link (link rel) no arquivo index. ou “ocultála”. Por exemplo.0 podíamos empregar diferentes funções para incluir uma saída gerada pelo núcleo do Joomla. a forma como os módulos eram posicionados. como parâmetros do template. Durante o desenvolvimento do mecanismo de template do Joomla 1. Todas essas funções foram substituídas pelo elemento <jdoc:include.. É licenciado sob a atribuição de não comercial-não derivativo 2.5 houve um grande número de mudanças e aprimoramentos. porém.0 você precisava carregar por si mesmo o editor nos seus templates.. que retornará a quantidade total do número de módulos existentes nas posições user1 e user2. Isto não será mais necessário. isto não é muito útil. módulos em determinadas posições podem ser incluídos empregando <jdoc:include type=”modules” name=”left”/> Carregando o editor No Joomla! 1.0.5 . Queremos ser capazes de “desligar” uma coluna automaticamente. independentemente que haja ou não conteúdo a ser apresentado. Isto permite que programadores possam facilmente quantificar o número de módulos existentes em múltiplas posições do template em apenas uma linha de código..Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Observe que o CSS é embutido (presente no próprio arquivo index. se não houver conteúdo a ser apresentado. por exemplo $this->countModules(“user1 + user2”).5 podem ser divididas em duas categorias. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. A partir da perspectiva de um template de um CMS. />.33/p. Quando o sistema processar o cabeçalho do seu template ele decidirá se irá ou não precisar de editor para incluí-lo ou não.. incluindo as saída geradas pelo núcleo do Joomla! No Joomla! 1. mosCountModules A função mosCountModules foi substituída pela função $this->countModules e suporte para as condições que foram adicionadas.org/component/option. e em segundo lugar houve a inclusão de um monte de recursos extras. uma visão rápida: Mudanças nas velhas maneiras.210/ © 2006 Compass Design 32 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Mencionando o que foi posto no blog do desenvolvimento do Joomla 11 : As alterações no sistema de template no Joomla! 1..joomla.

joomla. Suporte para arquivos múltiplos de CSS O gerenciamento de template suporta múltiplos arquivos CSS. Você pode colocar um comando condicional no corpo (do arquivo index. Cancelamento/susbtituição de template Os templates poderão cancelar/substituir a saída padrão do núcleo do Joomla!. dessa forma você não precisará colocar toda a sua codificação CSS dentro de um único arquivo. escolher entre 2 ou 3 colunas de leiaute.htm#msg535479 © 2006 Compass Design 33 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.css e adicionamos suporte para o arquivo especial editor. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. alteramos o nome do arquivo principal do arquivo de CSS principal para template. se não houver conteúdo publicado na coluna da direita. Por exemplo.php/topic. countModules (‘left or right’) Retornará 1 se houver algum módulo na posição ‘left´ou ‘direita’ (esquerda ou direita).Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Parâmetros do template Os parâmetros do template podem ser empregados para permitir que o administrador controle a estrutura do mesmo. por exemplo. Um programador de template pode definir especificações extras para o template no arquivo xml do mesmo e o administrador do site pode ajustá-los na opção template manager (gerenciamento do template). 12 http://forum. Mais informações estão disponíveis no fórum do Joomla! 12 Então o uso geral do mosCountModules seria: <?php if($this->countModules(‘condição’)) : ?> faça alguma coisa <?php else : ?> faça mais alguma coisa <?php endif.org/index. ou especificar a largura mínima do template. Para fazer isso da forma mais fácil. countModules (‘left and right’) Retornará 1 se houver algum módulo na posição ‘left’ e ‘right’ (esquerda e direita). Então. e então ter um estilo diferente para o conteúdo baseado em qual coluna você disporá.msg535479. Ou você pode alterar a classe ou o id ao seu gosto. countModules (‘left + right’) Contará os módulos nas posições ‘left’ e ‘right’ (esquerda e direita).css. que pode ser carregado pelo editor wysiwyg na área de administração.5 . os administradores podem alterar os esquemas de cores.. precisamos empregar a função de sermos capazes de contar os módulos presentes em uma localização específica.101825. Há diversas maneiras para que você possa fazer isso.css ao invés de template_css. existem 4 possíveis condições: • • • • countModules (‘left’) Retornará 1 se houver algum módulo na posição ‘left’ (esquerda). podemos ajustar o tamanho da coluna para preencher aquele espaço..php) para não mostrar o conteúdo. Eles funcionam praticamente da mesma maneira que os parâmetros dos módulos. por exemplo. É licenciado sob a atribuição de não comercial-não derivativo 2. Também. você poderá facilmente cancelar a maneira que um artigo é processado e alterar a tabela de saída por <div>. Processamento de paginação e estilização de módulos também poderão ser alteradas. Nesta situação. ?> Então. tenho uma série de comandos condicionais que podem ser colocados no marcador de cabeçalho (head) que (re)define os estilos de alguns códigos CSS.

overflow:hidden. para mostrar qual é o valor da largura de sua coluna: O conteúdo desta coluna é <?php echo $contentwidth. então teremos 80% de espaço.overflow:hidden. Se houver algum módulo na esquerda (left) e (AND) na direita (right). então teremos 60% de espaço. Isto pode ser feito de uma maneira similar.php.overflow:hidden. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. If($this->countModules(‘left or right’) == 1 $contentwidth = “80”.css. você pode adicionar uma linha de código no seu arquivo index.5 . nós contamos: • • • Se não tivermos nada na esquerda (left) ou (OR) direita (right). então teremos 100% de espaço. Estamos quase chegando lá. Se houver algum módulo na esquerda (left) ou (OR) direita (right). como a apresentada abaixo. Isto é porque se houver duas regras de estilos CSS idênticas. ?> Então. tendo comandos if importando um arquivo CSS secundário. 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> © 2006 Compass Design 34 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. É licenciado sob a atribuição de não comercial-não derivativo 2.width:60%. o que pode levar a confundir os navegadores. If($this->countModules(‘left and right’) == 1 $contentwidth = “60”.) #content80 (float:left. mas agora temos invólucros <div> vazios onde as colunas existem. Dica Enquanto estiver tentando resolver os problemas dos seus comandos condicionais. Se isto não for feito as páginas terão <div> vazias.) #content100 (float:left. Então teremos que alterar o arquivo index.php na <div> de conteúdo para: <div id=”content”<?php echo $contentwidth.css para: #content60 (float:left.) Os comandos condicionais em PHP no marcador de cabeçalho (head) devem aparecer DEPOIS da linha que faz o link para o arquivo template.width:80%. ?>”> E alteramos o arquivo layout.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! <?php If($this->countModules(‘left and right’) == 0 $contentwidth = “100”.width:100%. Escondendo Código do Módulo Quando criando colunas ocultáveis é de boa prática especificar os módulos para também não serem apresentados se não houver conteúdo. ?>% de largura. a que estiver por último sobreporá as demais.

É licenciado sob a atribuição de não comercial-não derivativo 2. Empregando essas técnicas para as nossas colunas da esquerda e direita.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! </div> <?php endif. Observe que isso precisará ser incluído no arquivo index. então <div id=”sidebar”> não será apresentado. Também acrescentamos um invóluvro (include) para o módulo breadcrumbs. © 2006 Compass Design 35 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. ?> Empregando o código acima.php e também publicado como um módulo. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.php se parecerá com o apresentado abaixo.5 . se não houver nada publicado na coluna da esquerda. o nosso arquivo index.

o programador líder do Joomlashack 13 .compassdesigns.net/joomla-library. Precisaremos empregar o nosso programa gráfico para criar pequenos pedaços fatiados de imagem que possam ser empregadas no template. Se você deseja criar o seu próprio rodapé. user1.php que dificulta eventuais alterações.joomlashack. vamos criar um template ligeiramente mais atrativo. Empregaremos um gentilmente doado para os nossos propósitos por Casey Lee. É costume colocá-los (os módulos) em posição que esteja relacionada ao nome. Ele é chamado de Bold e podemos vê-lo na figura 11-8. Meu aplicativo gráfico por opção é o Fireworks. 13 http://www.5 . Uma coisa importante a considerar é que os nomes não correspondem a nenhuma localização específica. footer. empregando técnicas que estudamos até aqui. Faria mais sentido se tivéssemos um módulo posicionado ali e então o administrador do site poderá mais facilmente mudá-lo. É licenciado sob a atribuição de não comercial-não derivativo 2. Dica de Programador Há diversos nomes associados a módulos no Joomla: banner. Você pode encontrar uma cópia dos arquivos a serem empregados no seguinte endereço: http://www. você simplesmente cancelará a publicação daquele módulo e criará um módulo html customizado em qualquer idioma que queira. etc. se necessário.com © 2006 Compass Design 36 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Agora que temos o básico pronto. como temos visto. Fazendo um verdadeiro template para o Joomla 1. mas isto não é mandatório. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Da maneira apresentada acima ele tem um código pesado dentro do arquivo index. left. Este template básico tem a intenção de apresentar alguns dos princípios básicos de criação de template no Joomla. Não o módulo de rodapé apresentado na área de administração que apresenta os direitos autorais do Joomla e que não pode ser facilmente editado.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Recomendaria uma maneira ligeiramente diferente de produzir um rodapé (footer). right. Isto é o modelo que será a base de nosso template. pois achei-o mais apropriado para programador web que o Photoshop. A localização de um módulo é controlada pelo programador do template.5 A primeira coisa que precisaremos para começar é o nosso “comp”. Fatiar e jogar O próximo passo no processo é o que chamamos de fatiar (slicing). É importante prestar atenção a como os elementos poderão ser redimensionados.

por exemplo. Este será um outro exercício para o leitor! © 2006 Compass Design 37 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. se necessário.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-8 Um modelo do Joomlachack Cabeçalho (header) A imagem do cabeçalho é um leve enfeite no topo. Então. se o tamanho da fonte for redimensionada. É licenciado sob a atribuição de não comercial-não derivativo 2. Ainda requererá uma imagem de top e bottom (cima e baixo). Dessa maneira o cabeçalho escalará verticalmente. colocaremos a imagem como pano de fundo (background). A imagem não será redimensionada com apenas uma simples imagem. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. e depois atribuímos uma cor. precisaremos alterar as cores de qualquer fonte para branco. de forma que possam ser vistas no fundo preto. Também utilizo posicionamento absoluto dentro de um elemento de posição relativa para colocar a caixa de busca onde a desejo. Devemos ter certeza que apontamos para a entrada certa empregando mais especificidades com o CSS. Vamos mantê-lo.5 . Também. Também empregaremos uma imagem para a caixa de busca. também.

Nosso cabeçalho se parecerá com o apresentado na figura 11-9. Alguém poderá substituir por belas imagens. A razão é principalmente porque os mecanismos de busca não podem ler imagens.alistapart. Figura 11-9 Imagem do cabeçalho (header) Próximo passo. Para um maior aprofundamento. Isto é porque o elemento <div>. mas deixo isso como exercício para o leitor. é somente do tamanho do conteúdo. você poderá verificar esses dois guias: • • http://www. Teremos que empregar a técnica chamada de Sliding Faux Columns (colunas deslizantes de Faux).Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Observe que não empreguei um logotipo gráfico aqui. Essencialmente. Precisaremos criar dois invólucros <div> para colocar os fundos. neste caso sidebar e sidebar-2. sendo que a cor não se estenderá por toda a coluna até o rodapé.com/articles/fauxcolumns/ http://www. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Ele não cresce para preencher o espaço do elemento. mas texto puro.5 . abaixo.cfm?page=1&cid=AFC58 38 de 53 © 2006 Compass Design Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.com/content/article. É licenciado sob a atribuição de não comercial-não derivativo 2. apenas. precisaremos implementar a técnica chamada de portas deslizantes (sliding doors) O fundo (background) das Colunas Nós falaremos sobre isso quando formos colocar cor de fundo nas colunas.communitymx. Normalmente poderíamos aplicar uma ao invólucro maior (#wrap). mas estou empregando um invólucro extra (e trabalhoso) por razões de ilustrações. você terá que criar duas imagens bem grandes que deslizará uma sobre a outra.

a largura máxima que estamos considerando é de 960px.5 . Na pasta de imagens está o arquivo slidingcolumns. pois as nossas colunas têm 20% de largura. Aqui estamos usando o formato de CSS reduzido. Observe que devemos colocar um fundo para o nosso rodapé e módulos/elementos da parte inferior. Então. e a da direita de um fundo transparente. De onde veio o valor de 192px? Ele corresponde a 20% de 960.png. dessa forma começamos com uma imagem dessa largura. exportamos duas fatias (empreguei a mesma fatia e apenas ocultava/apresentava as imagens laterais). © 2006 Compass Design 39 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. e uma de 960px de largura com uma de fundo com 192px à esquerda. uma com 960px de largura com uma de fundo com 192px à esquerda. simplesmente adicionamos um invólucro interno dentro do maior wrap. Nós empregamos a propriedade background-position para colocar as imagens no lugar correto. Nota A imagem à esquerda precisa ter um fundo na cor branca.php. Também precisamos colocar um comando condicional para fechar as <div>. É licenciado sob a atribuição de não comercial-não derivativo 2. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. No nosso arquivo index. pois faz parte da propriedade background.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! No nosso caso. Eu modifiquei as cores dos fundos porque exportei as imagens do arquivo fonte. pois de outra forma os fundos das colunas seriam mostrados.

5 . O método normal para fazer isso era a de se empregar a propriedade :after 14 . com o lançamento do IE7. Teremos que acrescentar alguns comandos condicionais no marcador head do arquivo index. Então. Mas. Um par 15 de soluções foram encontradas 16 .com/articles/clearing-floats-the-fne-method © 2006 Compass Design 40 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.php. Eu vou empregar a opção 17 “Float (nearly) Everything” aqui. especificamente para o IE6. adicionamos um simples comando clear:both ao #footer (<div> do rodapé) e acrescentamos floats aos invólucros das colunas faux. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. e aí está o arredondamento no final.html 16 http://www. Módulos Flexíveis 14 15 http://positioniseverything.quirksmode.html http://www.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Precisamos limpar os comandos “floats” de forma que o invólucro flutuante (as colunas de Faux) possam se estender até o fim da página.sitepoint.org/css/clearing.com/blogs/2005/02/26/simple-clearing-of-floats/ 17 http://orderedlist. É licenciado sob a atribuição de não comercial-não derivativo 2. Fizemos isso com uma folha de estilo condicional. Precisamos endereçar a limpeza dos floats no Internet Explorer 6 e 7.net/easyclearing. este método não funcionará completamente.

Esta é a mesma estratégia que empregamos para o cabeçalho. Não sabemos o quão alto será o texto que vai ser incluído lá. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Observe que também empregamos um comentário condicional de forma que se a localização do módulo de top (superior) não tiver conteúdo.5 . a imagem da laranja implicante (mensagem de erro?) não estará lá. temos um bloco de módulo grande no início. Isto é somente para fim estético. © 2006 Compass Design 41 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. É licenciado sob a atribuição de não comercial-não derivativo 2. Para resolver este problema pusemos o módulo incluso em um elemento de invólucro e demos um fundo da mesma cor da imagem. Nada mal. É preciso empregar as especificidades do CSS para sobrescrever os estilos do moduletable que foram definidos anteriomente.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! No nosso esboço. O que vai estar lá é um invólucro vazio que conterá uma parte da imagem de fundo e um valor de espaçamento de 20px. Com o fundo de nosso template básico no lugar o nosso site se parecerá com o apresentado na figura 11-10. agora precisamos nos focar em alguma coisa de tipografia (fonte).

Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-10 Template avançado com leiaute Tipografia (fonte) Muitos links precisarão estar na cor branca. © 2006 Compass Design 42 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Então. É licenciado sob a atribuição de não comercial-não derivativo 2. É uma fatia muito fina que é preenchida horizontalmente. O esboço possui botões estilizados.5 . definimos isso de forma global e depois modificamos a cor para a coluna central. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Criamos isso empregando uma imagem de fundo a partir do modelo.

Os módulos precisam de apenas uma simples redefinição e ajustes nos espaçamentos (padding) e margens. como sempre. É licenciado sob a atribuição de não comercial-não derivativo 2. © 2006 Compass Design 43 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Menus. Nós fatiamos uma simples imagem que inclua ambos o marcador e a marca de sublinhado. A reutilização de imagens é comum e também economiza em download.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Para as tabelas. como as FAQ (perguntas mais freqüentes). Aqui vamos manter o mais simples possível. podemos adicionar um fundo fácil repetindo o uso da imagem que empregamos para chamar atenção. precisam de muitos estilos CSS. Observe que o estilo é “ligado” aplicando um sufixo de módulo de menu para qualquer lista de links que queiramos que tenha a mesma aparência. tornando a página mais rápida.5 . a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.

com/articles/slidingdoors/ http://fiftyfoureleven. queremos colocar isso de forma que as tabs sejam escaláveis e as fontes possam alterar o seu tamanho. Felizmente. É licenciado sob a atribuição de não comercial-não derivativo 2. O CSS não é tão complicado. as portas deslizantes (sliding doors) 18 novamente! Também tentamos e fizemos alguma otimização em velocidade para os templates e empregamos uma única imagem para a esquerda e a direita das portas (doors).5 .alistapart. apenas marcamos passo com o posicionamento vertical da imagem de fundo para o estado de ligado (on). 18 19 http://www. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.com/sandbox/weblog/2004/jun/doors-meet-sprites/ © 2006 Compass Design 44 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Como defensores da acessibilidade.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Por último é a tab (tabela) do menu no canto superior direito. Isto é conhecido como empregando fantasmas (sprites) 19 . e é de fato com o mesmo princípio que empregamos para as nossas colunas. assim como os estados de ligado (on) e desligado (off). uma técnica foi desenvolvida para fazer isso.

0. Ele precisa relacionar todos os arquivos e imagens empregadas no template.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Se você observar lá atrás o esboço original. A solução seria tanto forçar o menu dentro de um módulo ou cancelar a saída do núcleo (mais sobre isso será apresentado posteriormente). © 2006 Compass Design 45 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. Como estamos empregando duas imagens de background.xml. mas até este momento não há nenhuma disponível para a versão 1. precisaremos de um terceiro elemento para colocar o fundo do ícone. nosso template terá a aparência razoável da figura 11-11. Há um grande número de ferramentas que faz isso automaticamente para você. É licenciado sob a atribuição de não comercial-não derivativo 2. mas isso não é o que a saída do CMS nos dará. Depois de adicionar uma cor de fundo. se estiver usando o Joomla 1.X. uma na li (lista) e a outra no link. A última coisa que permanece é revisar o arquivo templateDetails. verá que havia ícones nessas tabs.5. de forma que ele possa instalar apropriadamente a partir de um arquivo zip. Podemos fazer isso tendo um span.5 .

a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. © 2006 Compass Design 46 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.compassdesigns.compassdesigns.net/Joomla15. Os arquivos do template podem ser encontrados em http://www.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Figura 11-11 Template avançado com tipografia Podemos ver uma versão ao vivo desse template em http://www.5 .net/joomla-library/tutorials. É licenciado sob a atribuição de não comercial-não derivativo 2.

você verá setagens para os parâmetros.5 é a adição de parâmetros do template para os templates. Uma função de parâmetro relativamente simples é mostrada no template padrão Milky Way.5 . É licenciado sob a atribuição de não comercial-não derivativo 2.xml você verá o seguinte: No gerenciamento de template (Template Manager) para aquele template. como mostrado na figura 11-12. então a saída dos componentes são serão apresentadas. Figura 11-12 parâmetros do template Milky Way vistos na área de administração Podemos ver que se trata apenas de um simples botão tipo rádio com duas opções. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. a saída do arquivo XML terá o seguinte: © 2006 Compass Design 47 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. No arquivo templateDetails. Isto permite que você passe variáveis ao template a partir de opções selecionadas na área de administração/manutenção do site.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Parâmetros do Template Novo na versão 1. Se escolhermos “não” (no). Um outro um pouco mais complexo que ajustará a largura do template.

de forma que as alterações possam ser realizadas. um arquivo ini (de inicialização) 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. no marcador head do nosso arquivo index. Figura 11-13 Outros parâmetros visto na área de administração/manutenção Empregando os parâmetros do template neste caso pode dar ao administrador do site flexibilidade em quase todas as facetas do template.5 . mas o Joomla precisa desse arquivo para armazenar as setagens que você tiver. como largura.ini na sua pasta do template. É licenciado sob a atribuição de não comercial-não derivativo 2. Por exemplo. tudo controlável com setagens condicionais de PHP e estilos CSS.. Ele pode ser um arquivo em branco. Você também precisará de um arquivo chamado de params.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Então. cor e etc.php precisaremos acrescentar o seguinte: Isto nos dá três opções. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. No gerenciamento de template (Template Manager) veremos a opção como mostrado na figura 1113. uma coluna de largura estreita fixa. um larga fixa e uma versão flexível (fluída). © 2006 Compass Design 48 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.

. Isto é feito com novos arquivos de saída chamados de arquivos do template que correspondem às visualizações do leiaute de componentes e módulos. observe que os módulos somente possuem uma visualização. pois os módulos têm essencialmente somente uma visualização (view). Por exemplo: A estrutura básica para todos os componentes e módulos é a seguinte: visualização -> leiaute -> templates Aqui estão alguns exemplos.5 . usa aquele e cancela a saída normal. O Joomla verificará em cada caso para ver se existe algum na pasta do template. e se houver. É licenciado sob a atribuição de não comercial-não derivativo 2.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Cancelamento de Template Talvez o recurso mais poderoso de templates da versão 1. Eles possuem uma convenção de nome comum: (convenção de nome de arquivo) (descrição) (exemplo) (leiaute principal de template) (leiaute secundário de template chamado a partir do .) © 2006 Compass Design 49 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. (visualização) (leiaute) Normalmente existem diversos arquivos de templates envolvidos em um leiaute particular.5 seja a habilidade de cancelar a saída gerada pelo núcleo. A localização é ligeiramente diferente para componentes assim como para módulos.. Estrutura de cancelamento Todas as visualizações de leiaute e de templates estão no núcleo principal em uma pasta /tmpl/.

5 . a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2. e o arquivo _item. Dentro dela estão arquivo php que criam as saídas. a pasta é chamada de “tmpl”. Abrindo o arquivo encontraremos: © 2006 Compass Design 50 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”.. arquivo do leiaute principal) (leiaute comum de template empregado por diferentes leiautes) Cancelamento de Módulos Cada módulo tem uma nova pasta que contém seus templates. por exemplo: Os três primeiros são três leiautes de newsflash (manchetes) baseados em quais opções de módulos são selecionadas.php é um template de leiaute comum empregado pelos outros três.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! (..

Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Então. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5 . podemos alterar isso para remover as tabelas e tornar o site um pouco mais acessível: Este novo arquivo pode ser colocado no diretório do template em uma pasta chamada de html.php Fácil assim. /components/com_content/views/ © 2006 Compass Design 51 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. como apresentado a seguir: Templates/templatetutorial15bold/html/mod_newsflash/_item. apenas tiramos as tabelas do módulo de Newsflash (manchetes)! Cancelamento de Componente Os componentes funcionam quase da mesma maneira que os módulos. Se olharmos na pasta com_content encontraremos uma pasta chamada de views (visualizações). exceto que existem muitas visualizações associadas com muitos componentes.

Abrindo-se o arquivo blog_item. article (artigo). o leiaute default.php /components/com_content/views/ category/blog_item.5 . Se olharmos para a pasta category poderemos ver: /components/com_content/views/ category/blog. Dentro da pasta view encontraremos a pasta tmpl. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. A funcionalidade de cancelamento de template provê um poderoso mecanismo para customizar o site Joomla através do seu template. nós colocamos o que quisermos empregar em nossa pasta template/html.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! /components/com_content/views/archive /components/com_content/views/article /components/com_content/views/category /components/com_content/views/section Então. por exemplo: Templates/templatetutorial15bold/html/com_content/category/blog_item.php é referenciado ao leiaute padrão que apresenta os artigos como uma lista de links. acessibilidade ou necessidades específicas de um cliente. assim como modules.php veremos as tabelas atualmente em uso. category (categoria) e section (seção). É licenciado sob a atribuição de não comercial-não derivativo 2. archive (arquivo). estas pastas corresponderiam as quatro visualizações possíveis para content (conteúdo).php /components/com_content/views/ category/blog_links.php /components/com_content/views/category/default_items.php Este é um processo relativamente simples de copiar e colar todos esses views da pasta /components/ e /modules/ para a pasta templates/seutemplate/html. Se desejarmos cancelar a saída.php Observe que no caso do com_content. © 2006 Compass Design 52 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. Você pode criar templates de saída que sejam focalizados nos SEO (mecanismos de busca). e nesta os diferentes leiautes possíveis.

Ele é licenciado sob a atribuição de não comercial – não derivativo (decorrente) 2. a ser publicado a partir de maio de 2007 pela editora Prentice Hall Professional. como por exemplo como criar módulos com cantos arredondados e texto redimensionável.5/ © 2006 Compass Design 53 de 53 Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”. 20 http://creativecommons. Quaisquer dessas condições podem ser desconsideradas se você solicitar a devida permissão do proprietário dos direitos autorais.5 . (neste caso.Joomla! Um Guia do Usuário Construindo um Website Poderoso com o Joomla! Esses templates são liberados sob a atribuição v2.compassdesigns. a ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional.5 20 . Você pode encontrar tudo isso em http://www.org/licenses/by/2. distribuir. você deve deixar claro para os outros os termos do licenciamento deste trabalho. Isto significa que você é livre para: • • • Copiar.5 da Creative Commons. Para qualquer reutilização ou distribuição. É licenciado sob a atribuição de não comercial-não derivativo 2. apresentar e realizar o trabalho Fazer trabalhos decorrentes Fazer uso comercial do trabalho Sob as seguintes condições: • • • Você deve atribuir o trabalho da maneira especificada pelo autor ou licenciador. Também no site da Compass Designs existem dicas e truques que não explicitamos aqui. Este tutorial propriamente é um conteúdo de amostra que foi extraída do livro a ser lançado.net/tutorials/joomla-tutorials/. deixando um link para o meu site no rodapé do template). cujo título será Joomla! A User´s Guide: Building a Joomla! Powered Website (Joomla! Um Guia do Usuário: Construindo um Website Poderoso com o Joomla!).

Sign up to vote on this title
UsefulNot useful