Uma visão geral sobre a flexibilidade da camada de visualização do Drupal 7

Temas para Drupal 7

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Thiago Régis

@tregismoreira

@FisquaDigital

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

O que é Drupal?

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

É um sistema gerenciador de conteúdo (SGC ou CMS)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

É uma plataforma livre, de código aberto, para a criação de sites e aplicativos web.

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

É a melhor plataforma para a criação de sites e aplicativos web!

Saiba mais sobre o Drupal:http://oqueedrupal.drupalgardens.com/

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

O que é umTema no Drupal?

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

É um conjunto de arquivos que define a camada de aparência do site.

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Camada de Aparência???

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Dados(conteúdos, comentários etc)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Dados(conteúdos, comentários etc)

Módulos

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Dados(conteúdos, comentários etc)

Módulos

Blocos

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Dados(conteúdos, comentários etc)

Módulos

Blocos

Permissões de acesso

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Dados(conteúdos, comentários etc)

Módulos

Blocos

Permissões de acesso

Aparência

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Algumas característicasde um Tema

É independente das configurações.

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Não carrega dados. Apenas variáveis.(Pelo menos é como deveria ser...)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

$var

É portável.(Desde que o Drupal seja da mesma versão)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

(Drupaint)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Temas gratuitos

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

MarinelliDemo: migre.me/akFrG

Download: migre.me/akFsz

DanlandDemo: migre.me/akFxe

Download: migre.me/akFwd

BlueMastersDemo: migre.me/akFAH

Download: migre.me/akFsz

Outros temas gratuitoshttp://drupal.org/project/themes

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

E o que eu preciso para criar o próprio Tema?

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Pleno domínio de HTML e CSS

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Pleno domínio de HTML e CSS

# Recomendado ter conhecimento de JS e PHP

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Pleno domínio de HTML e CSS

# Recomendado ter conhecimento de JS e PHP

# Utilizar um editor de códigos (qualquer)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Pleno domínio de HTML e CSS

# Recomendado ter conhecimento de JS e PHP

# Utilizar um editor de códigos (qualquer)

# Gostar de trabalhar com front-end :)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Processo de criaçãode um Tema

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Estrutura básicade um Tema

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

purpledrop

assets (css, images, js)

templates

screenshot.png

logo.png

template.php

purpledrop.info (obrigatório)

templates

html.tpl.php

page.tpl.php

node.tpl.php

region.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

html.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

html.tpl.php

page.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

html.tpl.php

page.tpl.php

region.tpl.php

region.tpl.php

region.tpl.php

region.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

html.tpl.php

page.tpl.php

region.tpl.php

region.tpl.php

region.tpl.php

region.tpl.php

block.tpl.php block.tpl.php

block.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

html.tpl.php

page.tpl.php

region.tpl.php

region.tpl.php

region.tpl.php

region.tpl.php

block.tpl.php block.tpl.php

block.tpl.php

block.tpl.php

node.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Algumas observações sobre os templates

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Contém apenas marcação HTML + variáveis em PHP

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Contém apenas marcação HTML + variáveis em PHP

# Servem para personalizar a saída (output) padrão do Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Contém apenas marcação HTML + variáveis em PHP

# Servem para personalizar a saída (output) padrão do Drupal

# Caso você não deseje personalizar a saída padrão, não há necessidade de criar os templates dentro do seu tema

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# Contém apenas marcação HTML + variáveis em PHP

# Servem para personalizar a saída (output) padrão do Drupal

# Caso você não deseje personalizar a saída padrão, não há necessidade de criar os templates dentro do seu tema

# Podem ser criados/sugeridos através de módulos ou do template.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

templates

html.tpl.php

page.tpl.php

node.tpl.php

region.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

templates

html.tpl.php

page.tpl.php

System

node.tpl.php

region.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

templates

html.tpl.php

page.tpl.php

System

node.tpl.php

region.tpl.php

block.tpl.php

Node

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

templates

html.tpl.php

page.tpl.php

System

node.tpl.php

region.tpl.php

block.tpl.php

Node

Block

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Sugestões de templates do núcleo do Drupal:http://drupal.org/node/1089656

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

O arquivo .info

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

É um arquivo do tipo INI que contém as definições básicas do seu tema

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

# name (obrigatório)

# description (recomendado)

# core (obrigatório)

# screenshot

# version (desencorajado)

# regions

# stylesheets

# scripts

# php

1. name = Garland2. description = A multi-column theme which can be configured...3. package = Core4. version = VERSION5. core = 7.x6. stylesheets[all][] = style.css7. stylesheets[print][] = print.css

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

1. name = Garland2. description = A multi-column theme which can be configured...3. package = Core4. version = VERSION5. core = 7.x6. stylesheets[all][] = style.css7. stylesheets[print][] = print.css

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

namecore description

1. name = Garland2. description = A multi-column theme which can be configured...3. package = Core4. version = VERSION5. core = 7.x6. stylesheets[all][] = style.css7. stylesheets[print][] = print.css

Saiba mais sobre o arquivo .infohttp://drupal.org/node/171205

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

namecore description

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por onde começar?

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Documentação oficial (em inglês)http://drupal.org/documentation/theme

Canais de Suporte (em português)https://groups.google.com/group/drupal-br

http://drupal-br.orgIRC: #drupal-br

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Curso ao vivo, 100% prático e dinâmico!

Acesse:http://migre.me/akG6H

Curso Online de

Criação de Temaspara Drupal 7

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Perguntas?

Por Thiago Régis (@tregismoreira)Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal

Obrigado!

cursos@fisqua.comhttp://cursos.fisqua.com

Inscreva-se no mailing: http://migre.me/8oUpW