QUICK START COM LANDING PAGE NO JOOMLA 3.5

Transcrição

1 QUICK START COM LANDING PAGE NO JOOMLA 3.5

2 Introdução Quickstart ou instalação rápida é o nome que damos ao pacote de instalação do CMS Joomla com algum template e/ou extensões embarcadas que não fazem parte do core do sistema. É importante não confundir com o pacote de instalação gerado pelo Akeeba Backup. O pacote de instalação gerado pelo Akeeba Backup embarca as configurações, arquivos, diretórios e banco de dados de um determinado website. Nesta apostila aprenderemos a criar um quickstart com template Landing Page do tipo contador. Trata-se de um template que apresenta a contagem regressiva para determinada ação, sobre um slide show de imagens. O template bootstrap é responsivo. Preparação 1) Criando o diretório do projeto - Em sua máquina local cria um diretório para o seu novo projeto. Observe a figura seguinte. 2) Inserindo a base do projeto no diretório criado - O próximo passo é inserir o código base que será utilizado para criar o QuickStart. No nosso caso o template bootstrap com efeito counter. Observe a figura seguinte. O template counter possui vários subdiretórios com os scripts e imagens necessários para o seu perfeito funcionamento. Ele pode ser renderizado no navegador através da página index.html. Na figura seguinte demonstro a renderização de nossa Landing Page.

3 Por padrão os números estão zerados e o texto em inglês e devem ser configurados editando o arquivo custom.js que encontra-se em js/soon/. Na figura seguinte temos o contador funcionando. 3) Descompactando o Joomla no diretório diretório criado - O próximo passo será descompactar o pacote de instalação do CMS Joomla dentro do nosso diretório. Observe a figura seguine e lembre-se: Apenas descompacte o pacote de instalação.

4 Desenvolvimento 1) Criando o template Joomla - O primeiro passo do desenvolvimento é criar o template joomla a partir do template bootstratp. Para tal movemos o diretório counter para o diretório templates e procedemos as alterações necessárias para anteder os requisitos mínimos de um template. A saber: criar os seguintes arquivos e diretórios: a) /css diretório das folhas de estilo(s) b) /js direório dos scripts javascript c) /img ou images diretório de imagens do templates d) favicon.ico ícone do template e) template_preview.png identidade visual do templates f) template_thumbnail.png miniatura da identidade visual do template g) templatedetails.xml manifesto de instalação do template h) index.php página inicial do template Observe a figura seguinte. Ela representa a configuração mínima de um template. Finalmente temos nosso template pronto para fazer parte do pacote de instalação, sendo importante observar que as funcionalidades serão transformadas em módulo após a instalação do pacote quickstart. 2) Alterando o arquivo de instalação do Joomla - Abra o arquivo joomla.sql que está em /quickstart/installation/sql/mysql e identifique a linha INSERT INTO ` # extensions` - Insira o template counter após o template protostar (linha 616), com a seguinte sintaxe: (507, 'counter', 'template', 'counter', '', 0, 1, 1, 0, '', '', '', 0, ' :00:00', 0, 0), - Altere o id do template isis para 508 (linha 618), de acordo com a seguinte sintaxe: (508, 'isis', 'template', 'isis', '', 1, 1, 1, 0, '', '{"templatecolor":"","logofile":""}', '', '', 0, ' :00:00', 0, 0), Os passos acima cadastram o template counter na tabela # extensions do Joomla. - Identifique a linha INSERT INTO `# template_styles` - Insira o estilo do template counter após o estilo do template protostar (linha 1646), com a seguinte sintaxe: (8, 'counter', 0, '1', 'counter Default'), - Altere o id do template isis para 9 (linha 1648), de acordo com a seguinte sintaxe: (9, 'isis', 1, '1', 'isis - Default', '{"templatecolor":"","logofile":""}'); Salve o arquivo.

5 3) Gerando o pacote de instalação - Comprima (zip) todos os arquivos e diretórios do /quickstart. Você acabou de gerar um novo pacote de instalação do Joomla. Teste de Implementação 1) Criando um novo projeto Joomla - Crie um novo site joomla e siga os passos normais da instalação, de acordo com as figuras seguintes:

6 Atenção na próxima etapa, deixe marcado None, por padrão. Observe a figura seguinte. Estamos quase lá.

7 Ao final do processo acesse o frontend e visualize o template padrão counter. Você deve ter percebido que ele está diferente, alterei o campo de para um formulário de contato. Esse é o biscoitinho para meus alunos matriculados no Curso de Joomla! 3.5 Avançado. O template está funcional, enviando s pelo formulário e com as instruções de alterações para o contador e de contato.