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

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

2. 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*

3. Equipe brasileira de tradução do
Typo3

4. Preparando a instalação
1. Acesse o phpMyAdmin do Zend Server
CE:
http://localhost:10081/phpmyadmin/
2. Se logue como usuário root (sem senha)
Atribua uma nova senha

5. Instalação
1. 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 uploads
sudo chmod -R g+rwX,o-w fileadmin typo3temp typo3conf uploads
touch typo3conf/ENABLE_INSTALL_TOOL

6. 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

7. Abra o assistente de instalação:
http://localhost/portal/
Alerta: problema de
permissões

8. Siga as etapas
http://localhost/portal/

9. Componentes do Typo3
• Frontend:
http://localhost/portal/ Erro?!
• Backend
http://localhost/portal/typo3/
login admin
senha password

10. Extensões: TemplaVoilà!
1. Clique em "Extension Manager”
2. Aba "Import extensions”
3. Retrieve / Update
4. Faça uma busca por “templavoila” e clique
no ícone (da peça de lego) para importar
5. Ele foi importado mas ainda falta instalar –
clique no ícone
6. 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

11. Certifique-se de chegar até
aqui…

12. Templates (modelos)
Construa em tableless ou baixe um modelo pronto:
• http://wiki.typo3.org/TYPO3_templates_repository
• http://www.layoutstemplatesdirectory.com/free-
templates-layouts-sites/list-of-sites-that-offer-free-
typo3-templates-skins-themes/
• http://www.typo3coder.com/
Dê preferência
os modelos em
tableless

13. 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!”

14. 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

15. Continuação…
• Após a varredura de todos os templates
disponíveis, o “Step 1” mostra um
index.html
Clique 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”

16. Alerta
Error: No Data Structure Record could be found with UID
"x"!
Erro!
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

17. Step 3: Mapeamento
1
Comece o
mapeamento

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

19. Altere o modo de visualização
3

20. Identifique o elemento
3

21. Se o conteúdo dinâmico deve
preservar (ou não) a respectiva
<div>
4

22. Repetir o processo para os demais
elementos da página
Ex.: Main menu  <div id="menu">
E por fim…

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

24. Step 5: TypoScript gerado automaticamente
para construção do menu/submenu dinâmico(s)

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

26. 1
2
3

27. 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

28. Referências

29. Contatos
E-mail:
stopassola@acimainteractive.com
ari.junior@ist.utl.pt
MSN: stopassola@hotmail.com
Skype: stopassola
Google Talk: arijunior@gmail.com
Redes sociais:
http://pt.linkedin.com/in/stopassola
http://www.facebook.com/arijunior
http://twitter.com/stopassola