Template para Joomla – 5/11

Os Componentes do Template

Afim de compreender o conteúdo dentro de um template, nós iremos mostrar um template joomla em branco. Neste arquivo estão vários arquivos e pastas que fazem um template do Joomla. Estes arquivos devem ser colocados no diretório /templates da instalação de um Joomla. Assim, se nós tivermos dois templates instalados, nosso diretório teria algo como isso:

/templates/JS_Smoothportal
/templates/JS_Synergy

Observe que os nomes dos diretórios para os templates devem ter o mesmo nome que o template, neste caso JS_Smoothportal e JS_Synergy. Evidentemente, eles são sensíveis a caixa(case sensitive) e não devem conter espaços. Tradicionalmente os designers usam iniciais ou nome como prefixo.

Dentro do diretório do template, há um número de arquivos chaves:

/JS_Smoothportal/templateDetails.xml
/JS_Smoothportal/index.php

Estes dois nomes de arquivo e localização devem ser exatamente assim pois é assim quee eles são chamados pelo script núcleo do Joomla.

- templateDetails.xml
(observe a caixa alta do “D”) Um arquivo XML metadata que diz ao Joomla! quais arquivos são necessários quando o template estiver em uso em um site. Ele contém também detalhes sobre o autor, direitos autorais(copyright) e que arquivos fazem parte do template(incluindo qualquer imagem usada). E por fim, esse arquivo serve também na hora da instalação do template quando o admin usa o backend.

- index.php
Este arquivo é o mais importante. Ele ordena o site e diz para o CMS joomla onde colocar diferentes componentes e móduloss. Ele é a combinação do PHP e (X)HTML.

Na maioria dos templates, arquivos adicionais são usados. Por convenção (embora não obrigatório pelo core) para nome e localização são mostrados a seguir:

/JS_Smoothportal/template_thumbnail.png
/JS_Smoothportal/css/template_css.css
/JS_Smoothportal/images/ logo.png

- template_thumbnail.png
Um screenshot do template (geralmente reduzido em torno de 140 pixels de largura por 90 pixels de altura). Depois do template ter sido instalado, esta função é como “Preview image” visível no Template Manager do painel de administração do Joomla!.

- css/template_css.css
O CSS do template. A localização da pasta é opcional, mas você deve especificar onde está.. Observe que o nome do arquivo é somente importante quando é referido no index.php. Você poderá chamá-lo como quiser. Geralmente usa-se o nome mostrado aqui, mas nós mostraremos mais tarde as vantagens de ter outros css.

- images/logo.png
Qualquer imagem que tiver no template. De novo, por razões de organização, a maioria dos designers colocam suas imagens em uma pasta de imagens. Aqui nós colocamos uma imagem chamada logo.png como um exemplo.

Para adicionar o template (de novo, para isso que o tutorial existe) vá na administração do seu site e instale seu template enviando(upload) o arquivo zip. Observe que, na verdade, você pode adicionar arquivos individulmente(não zipado) também. Você deve colocá-lo em seusite.com/templates.

templateDetails.xml

O templateDetails.xml deve conter todos os arquivos que fazem parte do template. Ele também inclui informações como o autor e direito autoral. Algumas dessas informações são mostradas no Template Manager do admin backend

Um exemplo de arquivo xml é mostrado a seguir:

<mosinstall type="template" version="1.0.x">
<name>YourTemplate</name>
<creationDate>March 06</creationDate>
<author>Barrie North</author>
<copyright>GNU/GPL</copyright>
<authorEmail>compassdesigns@gmail.com</authorEmail> <authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description> An example template that shows a basic xml details file </description>
<files>
<filename>index.php</filename>
<filename>js/ie.js</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/header.png</filename>
<filename>images/background.png</filename>
<filename>template_thumbnail.png</filename>
</images>
<css>
<filename>css/base.css</filename>
<filename>css/norightcol.css</filename>
<filename>css/template_css.css</filename>
</css>
</mosinstall>


Vamos explicar o que sfgnifica alguma dessas linhas:

- mosinstall:
O conteúdo do documento XML são instruções para o instalador. A opção type=”template” diz para o instalador que estamos instalando um template

- name:
Define o nome do template. O nome que você entrar aqui irá ser usada para criar o diretório dentro do diretório template. Por esse motivo, não deve conter nenhum caracter estranho, tal como espaço. Se for fazer a instalação manualmente, você precisa criar um diretório com o mesmo nome do template.

- creationDate:
A data que o template foi criado. Esse campo é livre de formato e pode ser qualquer coisa como May 2005, 08-June-1978, 01/01/2004 etc.

- author:
O nome do autor do template – provavelmente o seu nome.

- copyright:
Qualquer direito autoral vai nesse elemento. Uma instrução básica para Developers & Designers pode ser achado nos fóruns do Joomla.

- authorEmail:
Endereço de Email que o autor do template pode ler.

- authorURL:
A URL do site do autor.

- version:
A versão do template.

- files:
A seção “files” contém todo tipo de arquivos como códigos PHP para o template ou imagens thumbnail image para o preview do template. Cada arquivo listado nessa seção é englobado por<filename> </filename>. Também pode se incluir qualquer arquivo adicional, aqui usamos como exemplo um arquivo JavaScript que é necessário no nosso template.

- images:
Todas as imagens usadas no template são listads na seção “images”. Novamente os arquivos listados são englobados por <filename> </filename>. A informação sobre o caminho dos arquivos é referente a raiz do seu template. Por exemplo, se seu template está no diretório ‘YourTemplate’ e todas as imagens no diretório ‘images’ que está dentro do ‘YourTemplate’, o caminho correto é:
<filename>images/my_image.jpg</filename>

- css:
A folha de estilo é listado na seção “css”. De novo, o nome do arquivo estará entre<filename> </filename> e seu caminho é relativo a raiz do template. As vezes é mais prático ter várias folhas de estilos importadas pelo principal template_css.css. Nós iremos discutir isso mais tarde no tutorial.

index.php

O que realmente um arquivo index.php? É uma combinação (X)HTML e PHP que determina tudo sobre o layout e apresentação das páginas.
Primeiro, nós iremos ver uma parte crítica de template válido. O DOCTYPE no topo do arquivo index.php. Esse pequeno trecho de código vai no topo de tudo de qualquer página. No topo da nossa página nos temos isso no nosso template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>">

Uma página DOCTYPE é parte fundamental de componentes que mostram uma página deve ser mostrada no navegador, especificamente, como o navegador interpreta o CSS. Para você entender, uma observação do alistapart.com diz:

[informação no site W3C sobre doctype] “escrito de geeks para geeks. E quando eu digo geeks, eu não quis dizer profissionais da web como eu e você. Eu quis dizer geeks que fazem o resto de nos parecerem uma avózinha no seu primeiro dia que email.”

De qualquer jeito, há vários doctypes que você pode usar. Basicamente, o doctype diz ao navegador como interpretar a página. Aqui as palavras “strict” e “transitional” começa flutuado ao redor (float:left e float:right geralmente). Essencialmente, desde que a WWW começou, diferentes navegadores tem diferentes níveis de suporte para CSS. Isto significa, por exemplo, que o Internet Explorer não irá entender o comando “min-width” que define uma largura mínima da página. Para reproduzir o mesmo efeito, você deve usar “hacks” no CSS.

Strict(estrito) diz que o html (ou xhtml) irá ser interpretado exatamente conforme o padrão. Um doctype transitional(transição) diz que a página irá permitir algumas diferenças fora do padrão.

Para complicar coisas, há algo chamado de modo “quirks”. Se o doctype for errado, antigo, ou não tem, então o navegador entra na modo quirks(quirks mode). Esta é uma tentativa de manter a compatibilidades antigas, assim o Internet Explorer, por exemplo, renderizará a página fingindo como se fosse o IE4.

Infelizmente, as pessoas acidentalmente vão para o quirks mode. Ele acontece geralmente duas maneiras:

- Eles usam o declaração doctype diretamente da págin W3C, o link é assim:

DTD/xhtml1-strict.dtd

Exceto esse é um link relativo ao servidor W3C . Você precisa o caminho completo como mostrado anteriormente.

Microsoft montou no IE6 um esquema para você ter páginas válidas, mesmo sendo em quirks mode. Isto acontece tendo um “prológo xml” colocado antes do doctype.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

A parte sobre quirks mode no IE6 é importante. Esse tutorial será somente para fazer layout pra IE6+, assim nos iremos ter certeza que estaremos rodando em modo padrão. Isso irá minimizar os hacks que precisaremos fazer depois. O prológo xml de qualquer modo não é essencial. Iremos anotar isso para as futuras versões do Joomla e esquecer. Fazendo uma página de acordo com o padrão, onde você vê um “xhtml válido” no final na página não quer dizer que foi realmente dificil codifica-lo, ou dificil de entender. Isso somente diz que o código que usou casa com o doctype que você iria usar. Só isso! Nada mais! Criando seu site dentro dos padrões reduz um nível para dizer o que você fez e então fazendo o que você diz.

Alguns links úteis:

• http://www.quirksmode.org/css/quirksmode.html
• http://www.alistapart.com/stories/doctype
• http://www.w3.org/QA/2002/04/Web-Quality
• http://forum.joomla.org/index.php/topic,7537.0.html
• http://forum.joomla.org/index.php/topic,6048.0.html
• http://www.tableless.com.br
• http://www.maujor.com
• http://www.brunotorres.net

O que está mais no index.php?

Vamos olhar a estrutura do header em primeiro lugar, nós queremos o mínimo possível, mas que seja o suficiente para produzir um site. A informação do header que iremos usar é esta:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<!--http://www.bluerobot.com/web/css/fouc.asp-->
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>

O que isso tudo significa?

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>

Faz com que tenhamos certeza que o arquivo não será acessado diretamente.

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”
<head>

Nós falamos sobre isso anteriormente. O “<?php echo _LANGUAGE; ?>” está colocando a linguagem vinda da configuração global do site.

<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />

Que set de caracteres estamos usando, _ISO é uma constante especial que define o set de caracter está em uso(encoding).

<?php if ($my->id) { initEditor(); } ?>

Este é uma variável script que não é zero se o usuário estiver logado no seu site. Se o usuário estiver logado então o editor WYSIWYG será pré-carregado. Você pode, se desejar, carregar sempre o editor, mas geralmente um visitante anônimo não precisará adicionar conteúdo. Isto economiza um pequeno tempo de carregamento de seu site.

<?php mosShowHead(); ?>

Enche o cabeçalho com as configurações globais. Isso inclui as seguintes tags (padrão da instalação):

- <title>A Complete Guide to Creating a Joomla Template </title>
- <meta name=”description” content=”Installing Joomla, doctype and the blank joomla template” />
- <meta name=”keywords” content=”installing joomla, joomla doctype, blank joomla tempate” />
- <meta name=”Generator” content=”Joomla! – Copyright (C) 2005 Open Source Matters. All rights reserved.” />
- <meta name=”robots” content=”index, follow” />
- <link rel=”shortcut icon” xhref=”images/favicon.ico” />

<script type=”text/javascript”> </script>

Para parar um erro, que pode ser um flash de um conteúdo não estilizado. Detalhes com permissão do Blue Robot(?). Observe que isso pode ser qualquer arquivo com script, então se nos não adicionamos m, nós podemos remover essa linha.

<link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />

Esta linha linka o arquivo CSS no template. O código PHP <?php echo $cur_template; ?> irá retornar o nome do template corrente. Isto faz com que essa linha seja “portável”. Quando nós criamos um novo template, nos podemos apenas copiá-lo ( junto com todo o código do header) e não nos importarmos em editar depois.

Como você irá ver mais adiante, no arquivo template_css.css, nós usaremos o @import como meio de parar o site aparecer quebrado no Netscape 4. Usuário de navegadores muito antigos não estarão capacidados em conseguir ver o conteúdo usando o CSS. Se você quer satisfazer esses navegadores antigos, você deverá ter muitos hacks no CSS, para conseguirmos fazer isso.

Um template vazio do joomla

Isso é muito muito fácil! Pronto?

<body>
<!– 1 –><?php echo $mosConfig_sitename;?>
<!– 2 –><?php mospathway()?>
<!– 3 –><?php mosLoadModules(‘top’);?>
<!– 4 –><?php mosLoadModules(‘left’);?>
<!– 5 –><?php mosMainBody();?>
<!– 6 –><?php mosLoadModules(‘right’);?>
<!– 7 –><?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ );?>
</body>
</html>

Nós temos numa ordem lógical razoável:

1. nome do site
2. caminho
3. módulo do topo
4. módulos da esquerda
5. conteúdo principal
6. módulos da direita
7. módulo padrão do rodapé

O objetivo é tentar tornar o mais próximo da marcação semântica. Sob o ponto de vista web, isso significa uma página que pode ser lida por qualquer um, um navegador, um “spider” ou um leitor de tela. Um layout semântico é a pedra fundamental da acessibilidade.

Agora isso merece uma observação que o que nós temos aqui realmente é somente um a capacidade de ter um layout semântico. Se alguém colocasse módulos aleatórios em lugares aleatórios, então você teria uma verdadeira bagunça. Uma consideração importantepara sites que usam CMS, um template é de boa qualidade quando há a inserção de conteúdo.