Lembrar que a oficina terá uma sequência e que algumas perguntas podem ser mantidas em suspenso até chegar a hora do conteúdo apropriado, para manter a mesma base para todos.
Utilizaremos uma página compartilhada no Google Docs para compartilhar os códigos para os vários testes a serem realizados durante o curso (o documento criado será a “apostila” do curso).
O que este curso não é:
- Não é um curso de html
- Não é um curso de css
- Não é um curso de php
- Não é um curso de leiaute
- Não é um curso de design gráfico
- Não é um curso de usabilidade
- Não é um curso de Linux
- Não é um curso de SEO
mas todos estes assuntos serão abordados!
Usar a hashtag #drunic para ir falando sobre o curso? Deixar a “apostila” online para que o “mundo” acompanhe?
Qual é a diferença entre uma página estática e o conteúdo dinâmico de um portal?
Quais os elementos mínimos que caracterizam um portal dinâmico?
Quais as considerações básicas, com relação ao desempenho, entre páginas estáticas e um portal dinâmico?
Qualquer conteúdo é um nodo. Comentários nem tanto...
Exemplos de nodos (post de blog, notícias, páginas de livro...).
O Drupal organiza a exibição dos nodos.
Figura 1
(fonte: http://drupal.org/getting-started/before/overview)
1) Tudo o que pode ser exibido
2) O tipo da coisa a ser exibida e seu tratamento
3) Onde e em que ordem a coisa será exibida
4) Para quem a coisa será exibida
5) O jeitão (tema) da coisa exibida
Primeiro ponto para a detecção de problemas. Se algo que deveria estar no portal não é exibido:
1) O conteúdo existe?
2) Há um tipo para este conteúdo?
3) Há um local para a sua exibição?
4) Quem deve ver este conteúdo possui permissão para vê-lo?
5) O tema permite a visualização do conteúdo?
O portal drupal.org, módulos, temas, fóruns de discussão
Dries Buitaert na Latinoware 2011. Entrevista com Dries.
Primeiro passeio pelo painel de administração do Drupal.
- Exercícios de construção de conteúdo:
-> página básica, artigo,
- considerações sobre resumo e teaser
-> blog, livros, (habilitando módulos)
- a cada módulo habilitado, configurar suas permissões para permitir o acesso aos usuários. Verificar também, se necessário, configurações
- exemplos em brodtec.com e casacinepoa.com.br
-> menus, versões, opções de publicação e comentários
-> conteúdos originados externamente (agregação)
-> encontrando e gerenciando conteúdo
Ferramentas de apoio: Google Images (questões de licença de uso), Lorem Ipsum Generator (www.lipsum.com) e gerador de lero-lero (http://www.suicidiovirtual.net/dados/lerolero.html), Gimp.
- As informações básicas do site, página inicial (os resultados do vestibular na página inicial) e páginas de erro (porque criar uma página de erro personalizada).
http://127.0.0.1 - endereço localhost (sem login)
2.2 Usuários, papéis e permissões
- Navegando pela interface administrativa
- O primeiro (e mais poderoso) usuário
- O usuário “blogueiro”
- criação de um usuário que só pode postar no blog
- Usuários anônimos, autenticados, administradores e outros
- OpenID, Facebook Connect, LDAP (módulos para autenticação externa dos usuários)
-> phpmyadmin
-> a tela preta
o comando tree (relacionando o sistema de arquivos à figura 1)
tree | more
tree > drupal.txt
tree > lpr
-> módulo webform - outro tipo de form de contato.
- Criar um conteúdo do tipo Aluno (Estrutura, Tipos de Conteúdo)
Nome, Sobrenome, Sexo, Idade, Telefone, Rua, número, complemento
(observação: Para o Portal Unicamp este tipo de conteúdo pode ser interessante para a seção de PRÊMIOS onde temos as premiações recebidas por profesores, alunos e funcionários da universidade. Este tipo de conteúdo facilitaria a inclusão destas informações.)
- Modificação de tipos de conteúdo existentes
- O formulário de contato padrão (caso o tempo permita, mostrar o módulo webform ao final do treinamento)
- Considerações sobre envios de email (módulo smtp, gmail, etc)
-> Exemplo Casa de Cinema [anotar caminho]
- Módulo Poll
- Módulo taxonomy (já instalado e habilitado na instalação padrão)
- Terminologia Drupal: Fóruns = Vocabulário, Tópico = Nodo, Respostas = Comentários
Categoria (container) é raiz, fóruns são vocabulários
Categoria
Forum 1
Forum 2
...
(ver http://www.lullabot.com/articles/private-forums-in-drupal-forum-access-vs-taxonomy-access-vs-taxonomy-access-control-lite)
- Aninhamento e organização de fóruns
- Na hora de procurar por um módulo, verificar as informações de atualizações e o número de desenvolvedores que suportam aquele módulo (isso mostra o quão ativo e suportado é o módulo)
- Para instalar novos módulos de forma gráfica, temos que ter instalado um serviço de ftp (proftpd) e o módulo Update manager tem que estar ativado. Opção “Instalar um novo módulo”
- Local padrão para instalação dos módulos externos (/sites/all/modules)
- Nodos e funcionalidades (usando o comando tree)
- Os primeiros módulos obrigatórios
-> quem instala?
-> atribuições e funções
-> automação versus segurança
Procurar em drupal.org o módulo CKeditor (editor gráfico) - Verificar nas instruções a instalação do pacote em ckeditor.com
IMCE (permite fazer o upload e tratamente de imagens)
htmLawed (se der tempo)
- URLs limpas (sem “?q=” na url) e otimização para mecanismos de busca
- Usando URLs limpas e definindo nomes de páginas
módulo PathAuto drupal.org/project/PathAuto
módulo transliteration drupal.org/project/transliteration(para endereços de url que têm acentuação)
módulo Sitemap (drupal.org/project/XMLSitemap - Google Webmaster Tools)
módulo Analytics (Exemplo)
- Configuração de imagens e seus estilos
-> Tipos de conteúdo, gerenciar exibição
- Inserção de figuras com o módulo CKEditor e IMCE
-> a integração entre os módulos
-> Lembrar de configurar para aparecer o botão de upload de imagens (Configurações -> - CKEditor - em Perfis editar ambos (Advanced e Full) -> em Editor Appearance trocar a língua para Portuguese (Brasil) -> em File Browser Settings - File browser type escolher IMCE).
-> o bom e velho html
- Código do hospedeiro (embeded)
- O módulo Video Filter
Ao invés de usar o código embedded, uso tag do tipo [video:url]
- Módulo LightBox (ainda não está disponível para a versão 7) - para galeria e visualização de imagens com ajax
Ex.: http://www.casacinepoa.com.br/os-filmes/producao/curtas/o-sanduiche/fotos-de-cena
- O módulo ShadowBox (similar ao LightBox) (se der tempo)
- Configurações e pesos
(É bom saber... para saber o que pode dar errado...)
- Ambiente Linux (debian, ubuntu e derivados...)
- Ambiente Windows (DAMP - http://network.acquia.com/downloads/7.x)
- Configuração básica do ambiente
- Document Root e os arquivos .php (especialmente o que contém <? phpinfo() ?>
- Afinal, o que o navegador vê mesmo?
- De novo, questões de desempenho...
- http://themegarden.org (para testar os temas online, mas só tem para a versão 6)
-
- Sobre os ombros dos gigantes...
- Quantos temas existem hoje?
- Theme garden e outros
- Brincando com temas, conteúdos, permissões e blocos
- Customizando o tema padrão (cores, logotipo, favicon)
- Instalação de um novo tema
- Mais um pouco da tela preta: o comando rpl
Anatomia de um tema
(fonte: http://drupal.org/node/171194)
- Novos temas em sites/all/themes
- Os arquivos info, html.tpl.php, page.tpl.php
-> .info (no diretório do tema) - informações básicas sobre o tema
-> html.tpl.php (em modules/system) - header e doctype para todos os temas
-> page.tpl.php (no diretório do tema) - define regiões e os principais elementos de leiaute
- Nunca toque no core! (altere apenas arquivos a partir de /var/www/sites/all) Arquivos na pasta do tema ativo têm precedência sobre os demais.
- Temas disponíveis na instalação padrão: análise do Seven e do Bartik
Trabalhando com CSS
-> eu preciso mesmo conhecer CSS? (é o ideal!)
-> firebug (para descobrir os elementos de estilo) (No Google Chrome é default)
-> Quantos são os arquivos css do Drupal?
locate *.css | grep "/var/www" | wc -l
-> de novo o comando rpl
-> Dica de performance: compactação dos arquivos CSS e JavaScript
Precedência de estilos
(Fonte: Drupal 7 Themes, Rick Schreves, Packt Publishing p. 89)
Instalação de temas e análise de seus componentes
[Copiar o Bartik como um novo tema para efeito de testes]
Experiências simples:
- Alterando cores
-> utilizar o firebug (no chrome já é instalado por padrão) para inspecionar o elemento a ser modificado. Em nosso exemplo, utilizar um título de um artigo ou página, clicando com o botão direito e Inspecionar elemento. Verificar qual a classe a ser alterada (neste caso .node-teaser h2 a). Para verificar em qual arquivo está esta classe, copie um atributo (ex: 181818) para utilizá-lo no comando:
rpl -Rfs 181818 iii *
Este comando irá retornar uma listagem de arquivos (ou apenas um arquivo) onde este valor encontra-se. Basta editar este arquivo e alterar o valor do atributo (pesquisar no google por uma tabela hexadecimal).
- Adicionando marcadores
-> No link http://www.lullabot.com/articles/free-gpl-icons-lullacons-pack-1 existe uma série de marcadores. Salvar um destes ou outro que desejar e, como root, transferir este arquivo para o diretório de imagens (sites/all/themes/meutema/images) e adicionar as seguintes linhas na classe anteriormente alterada:
.node-teaser h2 a {
background-image: url('../images/icone.png');
background-repeat: no-repeat;
padding: 0px 0px 0px 25px;}
- Customizando o template para os comentários [se der tempo]
Habilitar comentários para anônimos e verificar o resultado (Permissões)
-> Onde está o “não verificado”? Traduções da interface (encontrar a expressão original)
rpl -Rfs "not verified" iii * (Qual o arquivo?)
if (theme_get_setting('toggle_comment_user_verification')) {
$variables['extra'] = ' (' . t('not verified') . ')';
-> Como era na versão 6? Mostrar ou apenas comentar o exemplo da Casa de Cinema de Porto Alegre
Precedência de templates
’
(Fonte: Drupal 7 Themes, Rick Schreves, Packt Publishing p. 96)
O arquivo template.php e funções
- Diferença entre funções e templates
-> Templates - leiaute
-> Funções - algum modificador “programático”
- Abordagem limpa - trabalhar com templates individuais para as funções.
- Exemplo, mudar o breadcrumb
-> Qual é a themeable function?
-> Lista de themeable functions:
http://api.drupal.org/api/drupal/includes--theme.inc/function/
-> Identificando arquivos que contém themeable functions:
rpl -Rfs theme_ iii *
theme_breadcrumb, dentro de theme.inc
-> Criar breadcrumb.tpl.php dentro do Bartik ou tema em questão
Conteúdo:
<div><span class="breadcrumb-title"><?php print t('You are here :'); ?></span>
<span class="breadcrumb"><?php print implode(' » ', $breadcrumb);?></span></div>
(fonte Drupal 7 Themes, Rick Schreves, Packt Publishing p. 100)
-> Verificar a tradução da interface
-> Alternativa, usar o template.php (ver http://api.drupal.org/api/drupal/includes--theme.inc/function/theme_breadcrumb/7)
-> Ver quais são os “overrides” do Bartik e comparar com os padrões. Ver onde está isso no tema.
- Subtemas - Lei do menor esforço
-> Selecionar o tema mais próximo do que desejamos
-> Criar um subtema
-> Personalizar o subtema
- Vantagem - Não se perde com as atualizações do tema padrão
- Passos para a criação de um subtema:
- copiar o diretório bartik para sites/all/themes
- apagar tudo menos bartik.info, template.php e templates/page.tpl.php. Manter /css mas apagar os arquivos internos
- mudar o nome do diretório e alterar os arquivos apropriadamente (rpl ajuda!)
- unicamp.info - verificar o nome e apagar as linhas package e version (NÃO APAGAR core). Adicionar a linha: base theme = bartik. Apagar todas as linhas de css e declarar o novo stylesheet: stylesheets[all][] = css/unicamp.css
- NOTA: Regiões, logotipo e screenshot não são herdados do tema base, assim como o módulo “color”. Para usar esta funcionalidade no subtema é necessário incluir nele o diretório /color e o /css/colors.css, declarando este css no .info.
- apagar tudo de template.php (menos a abertura <?php )
-> Qualquer estilo que entrar em unicamp.css irá prevalecer sobre os conteúdos do tema base ou do sistema.
Nota: Caso você tenha copiado o css de um outro tema, tenha certeza de que qualquer imagem referenciada em um subdiretório também seja copiada para o diretório de seu subtema.
- Qualquer arquivo com folhas de estilo pode ser substituído por outro com o mesmo nome dentro do tema.
- Qualquer template *.tpl.php... A mesma coisa!
- Temas específicos:
-> page.tpl.php - todas as páginas
-> page--front.tpl.php - apenas para a primeira página
-> (este mecanismo é usado para aplicar estilos diferentes em determinadas seções do portal)
Outros exemplos:
page--aggregator.tpl.php - RSS
page--blog.tpl.php - Blog pages (but not the individual node pages)
page--book.tpl.php - Book pages (but not the individual node pages)
page--contact.tpl.php - Contact form (but not the form content)
page--forum.tpl.php - Forum pages (but not the individual node pages)
page--poll.tpl.php - Poll pages
page--user.tpl.php - User pages
(fonte Drupal 7 Themes, Rick Schreves, Packt Publishing p. 155)
Escolhendo um tema para começar:
Stark (vem com a instalação)
Zen
Adaptivetheme
Basic
Framework
Sky
Fusion (nossa escolha)
Instalação do Fusion e sua análise
http://drupal.org/project/fusion
Documentação do Fusion: http://fusiondrupalthemes.com/support/documentation e http://fusiondrupalthemes.com/support/theme-developers
Criar o subtema union (unicamp fusion) a partir do fusion starter lite (dúvidas?)
Revisar as configurações do tema
Verificar os templates que estão no union (fusion starter lite) e os que são herdados do fusion_core (arquivos .tpl.php)
Adicionar novos estilos no union.css e ver como eles têm precedência sobre os existentes
Não vamos tratar aqui, mas exemplificar como toda uma folha de estilo do core theme ou do sistema pode ser ignorada - possibilidades de análise de problemas (se der tempo)
Os módulos Devel (http://drupal.org/project/devel) e Theme developer (http://drupal.org/project/devel_themer) - Nunca para o ambiente de produção!
-> Para gerar conteúdo de forma automática
-> (Configurações, Desenvolvimento, Gerar Conteúdo)
O módulo Sweaver
Promissor, mas nem tudo funciona
Estilos são armazenados na base de dados
Mais informações (incluindo vídeos em drupal.org/project/sweaver)
Não habilitar os módulos Theme Developer e o Sweaver ao mesmo tempo, pois dá conflito.
(Se não foi explicado até agora, explicar o que é o PHPTemplate egine)
- separação de código e estilo
- padrão do Drupal
Áreas fornecidas como padrão pelo PHPTemplate
Header
Highlighted
Help
Content
Sidebar first
Sidebar second
Footer
Novas regiões devem ser especificadas no arquivo .info e posicionadas na página através do arquivo page.tpl.php (mostrar alguns page.tpl.php de temas instalados).
Criar o diretório novotema em /sites/all/themes
Arquivos obrigatórios para um tema: .info, page.tpl.php (copiar de /modules/system) e style.css
Opções para o arquivo .info: http://drupal.org/node/171205
novotema.info
name = Novo Tema
description = Um tema criado a partir do zero para a oficina de Drupal na Unicamp
stylesheets[all][] = style.css
core = 7.x
engine = phptemplate
Altera o nome do tema e a descrição.
Testar o tema
(Fonte: Drupal 7 Themes, Rick Schreves, Packt Publishing p. 89) para os padrões
Modificando o page.tpl.php e o style.css (bom exemplo em http://www.wdtutorials.com/drupal7/44)
A página da Unicamp, hoje:
(Dica: para obter a cor de uma determinada área da página, usar a ferramenta Collorzilla, um addon do Firefox)
Para começar, vamos dar uma simplificada...
Repare nas áreas da página: um cabeçalho com o nome da Unicamp, um menu, uma área para o conteúdo principal e outra para blocos, links, o que mais quisermos colocar ali...
Para começar, basta começar a criar o “html” no arquivo page.tpl.php, mas deixando todos os estilos em um arquivo css à parte (no exemplo, style.css).
Criando primeiro o espaço para o menu no page.tpl.php:
<?php
/**
* Meu primeiro tema no Drupal!
*/
?>
<div id="pagina">
<div id="menu_principal">
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">A Unicamp</a></li>
<li><a href="#">Administração</a></li>
<li><a href="#">Faculdades e Institutos</a></li>
<li><a href="#">Vestibular</a></li>
</ul>
</div>
</div>
Teste a página.
Estilizando o menu (no arquivo style.css):
/*** Elementos comuns ***/
* { margin:0; padding: 0;} /* Limpa todas as margens e paddings */
body { font-family: Arial, sans-serif;} /* A fonte padrão de exibição será a Arial, caso não disponível, a sem serifa genérica */
/*** Leiaute da página ***/
/* Toda a página */
#pagina { width: 1000px; margin: 0 auto;} /* Faz com que a página tenha 1000 pixels de largura e a centraliza */
/* Menu Principal */
#menu_principal { width: 1000px; height: 50px; border: 1px solid #ccc; border-top: none; background-color: #eee; } /* Define largura, altura, borda e cor de fundo */
#menu_principal ul { width: 400px; margin: 0 auto; list-style: none; line-height: 50px;} /* list-style remove os pontos da lista, line-height centraliza os links verticalmente */
#menu_principal ul li{ display: inline;} /* Distribui os elementos horizontalmente */
Teste. O que deu errado? Onde mudar?
Como trocar a cor dos links e como remover o sublinhado? (Dica: procurar no Google por css style remove underline from links)
a { color: #000; text-decoration: none;} /* Coloca a cor preta nos links e remove o sublinhado */
Como identificar que é um link quando se passa o mouse por cima do mesmo?
a:hover {text-decoration: underline overline;} /* Coloca uma linha acima e abaixo do link quando passa o mouse */
E se eu quiser mudar a cor do texto quando passar o mouse em cima?
Colocar o título “Unicamp” no cabeçalho e estilizá-lo.
No page.tpl.php
<div id="header"><h1>Unicamp</h1></div>
Teste
No style.css
/* Header */
#header { width: 1000px; height: 150px; border: 1px solid #ccc; border-top: none; background-color: #d10f32; }
#header h1 { line-height: 150px; padding: 0 0 0 60px; font-size: 40px; color: #fff}
Teste
Como descobrir a cor das coisas (Gimp, gcolor2, extensões “color picker” e “collorzilla” para o Firefox)
Inserindo as “divs” onde estará nosso conteúdo e o espaço lateral direito para outras informações:
<?php
/**
* Meu primeiro tema no Drupal!
*/
?>
<div id="pagina">
<div id="header"><h1>Unicamp</h1></div>
<div id="menu_principal">
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">A Unicamp</a></li>
<li><a href="#">Administração</a></li>
<li><a href="#">Faculdades e Institutos</a></li>
<li><a href="#">Vestibular</a></li>
</ul>
</div>
<div id="conteudo">
<div id="lateral_direita"><p>Lateral Direita</p></div>
<div id="principal"><p>Conteúdo Principal</p></div>
</div>
</div>
Teste
No style.css:
/* Conteúdo */
#conteudo { width: 1000px; border: 1px solid #ccc; border-top: none; overflow: hidden;}
/* Lateral direita */
#lateral_direita { width: 260px; float: right; border-left: 1px solid #ccc; background-color: #eee; padding: 20px 20px 10000px 20px; margin-bottom: -10000px; }
/* Conteúdo principal */
#principal { margin-right: 300px; padding: 20px;}
A ordem dos estilos no arquivo style.css não é importante, mas para efeito de clareza, procurar fazer com que ele corresponda aos elementos do page.tpl.php
Teste
O Menu Principal
<div id="menu_principal">
<?php print theme('links__system_main_menu',array('links' => $main_menu)); ?>
</div>
Teste
Como é que eu vou saber isso? Fazendo esse curso! Mas também olhando como os outros temas são construídos e olhando os manuais de temas do Drupal. Boa dica: Theme Developer
Mais adiante veremos como popular este Menu.
Agora a lateral direita:
<div id="lateral_direita">
<?php print render($page['sidebar_first']); ?>
</div>
Teste
Note que estamos usando uma região padrão do Drupal 7 (sidebar_first). Como é padrão, esta região não precisa estar declarada no arquivo .info.
Mais adiante veremos como popular esta área com blocos.
Por fim, o conteúdo principal
<div id="principal">
<h1><?php print $title; ?></h1>
<?php print render($page['content']); ?>
</div>
Agora, no lugar de Unicamp colocar o logo da unicamp (procurar no Google, salvar no diretório do tema).
Exercício: Que tal “drupalizar” uma página de http://themebot.com/free-website-templates/html-templates ?
Controlando onde os blocos aparecem
Usando o nosso tema como exemplo
Sidebar First à esquerda?
Como mudá-la para a direita?
Como acrescentar mais uma barra lateral?
Como fazer o conteúdo principal se comportar entre as barras laterais?
Definindo leiautes específicos para blocos de conteúdo
O módulo Block Theme
Instale, habilite e leia o README (sempre uma boa ideia!)
Configurar o Block Theme via interface administrativa e indicar o bloco personalizado (blocolindo|Meu lindo bloco)
Criar o arquivo block--blocktheme--blocolindo.tpl.php no diretório do nosso tema (Dica: copiar o block.tpl.php de modules/block e renomeá-lo).
Colocar a classe na linha:
<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> blocolindo"<?php print $attributes; ?>>
Em style.css
/* Estilos de blocos */
.blocolindo {background: red; color: #fff;}
Configurar um bloco (Recent Posts) com este tema e testar
Como tirar o nome do autor nos posts recentes?
Deixando o Menu Principal como o proposto no exemplo da página da Unicamp:
Estrutura - Menus
Criar o Instituto de Física e o de Ciências da Computação como submenus
Menus expansíveis: o módulo Nice Menus
Exemplos de uso
Menus expansíveis no menu principal (um pouco de hacking). Ver http://drupal.org/node/1002054 (se der tempo)
Patch: http://data.agaric.com/how-apply-patch-drupal-module
Reverse patch: http://drupal.org/patch/reverse
⅔ de todos os sites com Drupal usam Views
Views coletam dinamicamente informações e as organizam para a exibição
Exemplo: Criando blocos específicos de "arquivos" para notícias
Mostrar as views de casacinepoa.com.br (arquivos dos blogs)
Instalar o módulo Views e seus prerrequisitos (Chaos Tools http://drupal.org/project/ctools)
http://drupal.org/project/views
Habilitar o módulo e ir para Estrutura -> Views
Add New View
(detalhe: o que fazer para traduzir?)
Criar a View Lista Telefônica (com os campos do tipo Aluno que criamos anteriormente), preencher adequadamente, continuar e editar
Create a label
(Reparar no Auto Preview)
Filtrar, para apenas ter os nodos que nos interessam
Em Filter Criteria, adicionar Conteúdo Tipo = Aluno
(Reparar no Auto Preview)
Adicionar os Campos (Fields) Sobrenome e Telefone
Aplicar e acompanhar o Auto Preview
Em Page Settings, dar o nome lista-telefonica e salvar a View
Acessar a View pelo nome da página que foi dado
Módulo i18n - http://drupal.org/project/i18n (irá requerer o módulo Variable)
Ativar os módulos de internacionalização e também Locale e Content Translation e verificar as permissões
Verificar Configurações -> Multilingual Settings (especialmente Node Options)
Módulos úteis:
Language Icons: http://drupal.org/project/languageicons
Translation Overview: http://drupal.org/project/translation_overview
Em Tipo de Conteúdo, habilitar na publicação o suporte a multilínguas
Ver os conteúdos existentes e aplicar as traduções
Drupal 7 Quickstart Guide, Tom Geller, Peachpit Press (www.peachpit.com)
Drupal 7, David Mercer, Packt Publishing
Drupal 7 Themes, Rick Schreves, Packt Publishing
Drupal Handbooks (http://drupal.org/handbook)
Outras referências:
http://mustardseedmedia.com/podcast/episode3 - podcast sobre temas (Drupal 6)