Typo3 - instalação e template

29
Introdução ao Content Management System: Ari Stopassola Junior @stopassola

description

Apresentação sobre Typo3 - gestor de conteúdo muito popular na Europa, com mais de 5 mil extensões, open source, feito em PHP

Transcript of Typo3 - instalação e template

Page 1: Typo3 - instalação e template

Introdução ao Content Management System:

Ari Stopassola Junior@stopassola

Page 2: Typo3 - instalação e template

Características

• Criado pelo dinamarquês Kasper Skårhøj em 1997

• Gerenciador de conteúdo open source muito popular na Europa

• Implementado em PHP• Repositório com mais de 5.000 extensões• Suporta TypoScript – linguagem própria

interna• Cases: Lufthansa, UNESCO, Omega,

MediaMarkt, BASF, AirBus, Ford, Europcar, Unicef, Sanyo, Lidl, Vodafone, Harward, Greenpeace, Pizza Hut, Revell e muito mais*

* http://www.t3blog.com

Page 3: Typo3 - instalação e template

Equipe brasileira de tradução do Typo3

Page 4: Typo3 - instalação e template

Preparando a instalação1. Acesse o phpMyAdmin do Zend

Server CE:http://localhost:10081/phpmyadmin/

2. Se logue como usuário root (sem senha)

Atribua uma nova senha

Page 5: Typo3 - instalação e template

Instalação1. Identifique o usuário default do Apache

(no Zend Server) para atribuirmos permissões:more /usr/local/zend/apache2/conf/httpd.conf

2. Baixe o pacote “Source + Dummy”:http://typo3.org/download/packages/

3. Descompacte, renomeie a pasta e acesse-a via terminal. Execute os seguintes comandos:sudo chgrp -R daemon fileadmin typo3temp typo3conf uploadssudo chmod -R g+rwX,o-w fileadmin typo3temp typo3conf uploadstouch typo3conf/ENABLE_INSTALL_TOOL

Page 6: Typo3 - instalação e template

Diferença entre pacotes

• Pacote source permite uma única instalação Typo3 suprindo vários sites

• Os sites utilizam seu próprio dummy (esqueleto)

• Para uso compartilhado aponte os diretórios em dummy (através de links simbólicos) para seus correspondentes em source

Page 7: Typo3 - instalação e template

Alerta: problema de permissões

Abra o assistente de instalação:http://localhost/portal/

Page 8: Typo3 - instalação e template

Siga as etapashttp://localhost/portal/

Page 9: Typo3 - instalação e template

Componentes do Typo3

• Frontend:http://localhost/portal/

• Backendhttp://localhost/portal/typo3/ login adminsenha password

Erro?!

Page 10: Typo3 - instalação e template

Extensões: TemplaVoilà!

1. Clique em "Extension Manager”2. Aba "Import extensions”3. Retrieve / Update4. Faça uma busca por “templavoila” e clique no

ícone (da peça de lego) para importar5. Ele foi importado mas ainda falta instalar –

clique no ícone6. Atenda as dependências - “import now”, “install

now” e “Make updates” (jamais ignore um pré-requisito):– static_info_tables

7. Verifique a instalação e faça as mudanças necessárias

Page 11: Typo3 - instalação e template

Certifique-se de chegar até aqui…

Page 13: Typo3 - instalação e template

Incorporando o modelo ao gestor

• Baixe o template “Abundant” (por exemplo) do site Typo3Coder.com

• Descomprima o .zip• Copie o subdiretório “template” para o

diretório “fileadmin” na instalação do Typo3

• Renomeie o diretório de “template” (singular) para “templates” (no plural)

• Clique em WEB “TemplaVoilà!” (menu a esquerda) e pressione o botão “Start wizard now!”

Page 14: Typo3 - instalação e template

Alerta

Para cada mudança mais significativa de conteúdo é recomendado limpar todo tipo de cache do sistema – para que as alterações sejam percebidas:1. Clique em “Clear cache”“Clear all caches”2. Se a mensagem persistir, vá em “Extension

Manager”, localize o “TemplaVoilà!”, aba “Configuration” e pressione “Update”.

Page 15: Typo3 - instalação e template

Continuação…• Após a varredura de todos os templates

disponíveis, o “Step 1” mostra um index.htmlClique em [Choose as Template]

• Preencha com os dados do site:– Título– Endereço– Usuário administrativo

• Pressione o botão “Create new site”• Clique em “Start the mapping process”

Page 16: Typo3 - instalação e template

Se ocorrer algum erro no assistente do TemplaVoilà! (passo 3) interrompa o processo, remova a extensão (inclusive a sua dependência: static_info_tables) e certifique-se de que as mudanças propostas pelo instalador tenham sido realmente efetivadas – principalmente aquela que trata do charset

AlertaError: No Data Structure Record could be found with UID "x"!

Erro!

Page 17: Typo3 - instalação e template

Step 3: Mapeamento

Comece o mapeamento

1

Page 18: Typo3 - instalação e template

Mapeamento (continuação)Elementos básicos gerenciáveis pelo CMS

2

Page 19: Typo3 - instalação e template

Altere o modo de visualização

3

Page 20: Typo3 - instalação e template

Identifique o elemento

3

Page 21: Typo3 - instalação e template

Se o conteúdo dinâmico deve preservar (ou não) a respectiva

<div>4

Page 22: Typo3 - instalação e template

Repetir o processo para os demais elementos da página

Ex.: Main menu <div id="menu">

E por fim…

Page 23: Typo3 - instalação e template

Step 4: cabeçalhos1. Pressione “Select HTML header parts”2. Clique na aba “Header Parts”3. Marque todos os itens4. Pressione “Save and return”

Page 24: Typo3 - instalação e template

Step 5: TypoScript gerado automaticamente para construção do

menu/submenu dinâmico(s)

Page 25: Typo3 - instalação e template

Quanto o sub-menu não é identificado na estrutura do HTML

Page 26: Typo3 - instalação e template

12

3

Page 27: Typo3 - instalação e template

Próximos tópicos

• Mapeamento de novas áreas do site• Tipos de conteúdo: imagens, vídeos, contato e

busca• Construção de sub-menu multi-nível flutuante (CSS)• Novas extensões: CoolURI, Comments, News etc• Conteúdo restrito (frontend) para usuários

autorizados• Suporte a multi-idiomas• SEO – Search Engine Optimization• Favorite icon, mapa do site, “onde estou” e Google

Analytics• Backup e restore

Page 28: Typo3 - instalação e template

Referências