Page 1
Michael Meneses
Desenvolver um temapara Moodle 2.7
Page 2
Michael Meneses
Sobre mim
Desenvolvedor Moodle
Graduando em Análise e Desenvolvimento de Sistemas
Colaborador
Brasília/DF
10 meses
Page 4
Tema Clean (bootstrapbase)
Ambiente Moodle
Com blocos laterais
Page 5
Página de Login
Ambiente Moodle
Sem blocos laterais
Page 6
Ambiente MoodlePágina Inicial
Novo bloco à esquerda
Page 8
Barra Superior (header)
Ambiente Moodle
Page 9
Barra Superior – Nome Breve
Ambiente Moodle
Page 10
Barra Superior – Item de Menu
Ambiente Moodle
Page 11
Barra Superior – Informações de login
Ambiente Moodle
Page 12
Conteúdo
Ambiente Moodle
Page 13
Conteúdo – Região “main” e “side-pre”
Ambiente Moodle
Page 14
Conteúdo – Região “main”
Ambiente Moodle
Page 15
Conteúdo – Região “side-pre”
Ambiente Moodle
Page 16
Conteúdo – Região “side-post”
Ambiente Moodle
Page 17
Rodapé (footer)
Ambiente Moodle
Page 19
<body>
index.php = page-site-index
“page” é o prefixo
“site-index” é formado a partir da URI (index.php)
Page 20
<body>
user/profile.php?id=2 = page-user-profile
Page 21
Note a informação do formato de curso utilizado, “semanal”
<body>
course/view.php?id=2 = page-course-view-weeks
Page 22
<body>
mod/forum/view.php?id=1 = page-mod-fórum-view
Page 23
<body>
E as classes CSS?
Page 24
<body>
Formato de curso
Page 25
<body>
“Navegação” do recurso
Page 26
<body>
Direção do texto a partir do idioma
Page 29
<body>
Layout da Página
“pagelayout” é muito importante para quem desenvolve tema
Page 32
<body>
Recurso no Curso - “coursemodule”
Page 34
<body>
Modo Edição?
Page 35
<body>
Se há a região “side-pre”
Page 36
<body>
E se a região “side-pre” é usada
Page 37
<body>
Se há a região “side-post”
Page 38
<body>
E se a região “side-post” é usada, ou vazia
Page 39
<body>
Javascript habilitado
Page 40
Muitas informações através da tag <body>, não?
<body>
Page 42
Bootstrap
Mas o que é Boostrap?
Page 43
Bootstrap
Framework Bootstrap - www.getbootstrap.com
Page 44
Sistema de GridBootstrap
Page 45
ComponentesBootstrap
Navbar
Page 46
ComponentesBootstrap
Alert
Page 47
ComponentesBootstrap
Buttons
Page 48
ComponentesBootstrap
Modal
Page 49
ComponentesBootstrap
Carousel
Page 50
Bootstrap
=
Design Responsivo
Bootstrap
Page 51
Tema CleanTablet ou Smartphone
Bootstrap
Page 52
Design Responsivo
=
Adaptação
Bootstrap
Page 53
Moodle & Bootstrap
Page 54
Moodle & Bootstrap
Instalação do Moodle 2.6
Page 55
Moodle & Bootstrap
Instalação do Moodle 2.7
Page 56
Moodle & Bootstrap
Tema Standard (base)
Page 57
Moodle & Bootstrap
Tema Clean (bootstrapbase)
Page 58
Moodle + Bootstrap
=
Tema Clean
=
Design agradável/amigável/simples
Moodle & Bootstrap
Page 59
Base & Bootstrapbase
Page 60
Base & Bootstrapbase
O que são “base” e “bootstrapbase”?
Page 61
base
• Baseado na biblioteca YUI
(Yahoo! User Interface)
• Tema Standard por padrão
• Design pouco agradável/amigável
• HTML e CSS básicos
• Navegadores antigos
Base & Bootstrapbase
Page 62
bootstrapbase
• Baseado no Framework Bootstrap
• Tema Clean por padrão
• Design agradável/amigável
• HTML5 e CSS3
• Alguns navegadores antigos,
desejável mais recentes
Base & Bootstrapbase
Page 63
Moodle usa a versão 2.3.2, a mais recente é 3.2
Bootstrap 2.3.2
Base & Bootstrapbase
Bootstrap 3.2
Page 64
Diretório “theme”
Page 65
Diretório “theme”
Versão 2.6Vários temas
Page 66
Versão 2.6Tema “base”
Diretório “theme”
Page 67
Versão 2.6Tema “bootstrapbase”
Diretório “theme”
Page 68
Versão 2.7Poucos temas
Diretório “theme”
Page 69
Versão 2.7Tema “base”
Diretório “theme”
Page 70
Versão 2.7Tema “bootstrapbase”
Diretório “theme”
Page 72
Tema Clean
Diretório “theme/clean”
Page 73
lang/en/theme_clean.php
Strings de tradução
Tema Clean
Page 74
layout
Arquivos que são chamados conforme
o tipo de página
Tema Clean
Page 75
pix
Imagens para uso do tema
Tema Clean
Page 76
style
Arquivos CSS para uso do tema
Tema Clean
Page 77
config.php
Arquivo de configuração do tema
Tema Clean
Page 78
lib.php
Arquivo com métodos/funções
para uso do tema
Tema Clean
Page 79
settings.php
Arquivo com itens para
personalização do tema
Tema Clean
Page 80
version.php
Arquivo de versão
e dependências do tema
Tema Clean
Page 81
Configurações para otimizar o desenvolvimento de temas
Page 82
Administração do site > Desenvolvimento > Debugging
Mensagens de Debug
Page 83
Administração do site > Desenvolvimento > Debugging
Mostrar informações da página
Page 84
Administração do site > Aparência > Temas
Modo designer de tema
Page 85
Administração do site > Idioma > Configurações de idiomas
Colocar todas as strings de idioma em cache
Page 88
Clonar o tema “clean” Renomear para “flat”
Tema Flat
Page 89
Renomear o arquivo “theme_clean.php”
para “theme_flat.php”
Tema Flat
Page 90
Alterar a string “pluginname” no arquivo “theme_flat.php”
Tema Flat
Page 91
Alterar a string “choosereadme” no arquivo “theme_flat.php”
Tema Flat
Page 92
Tema Flat
Alterar o $THEME->name no arquivo “config.php”
Page 93
Alterar o $plugin->component no arquivo “config.php”
Tema Flat
Page 94
Alterar “clean” por “flat” no arquivo “lib.php”
Tema Flat
Page 95
Alterar “clean” por “flat” no arquivo “settings.php”
Tema Flat
Page 96
Alterar “clean” por “flat” nos
arquivos da pasta “layout”
Tema Flat
Page 97
Instalação do tema Flat
Tema Flat
Page 98
Tema Flat
Instalação do tema Flat
Page 99
Tema Flat
Instalação do tema Flat
Page 100
Selecionar tema Flat
Administração do site > Aparência > Temas > Seletor de tema
Tema Flat
Page 101
Selecionar tema Flat
Tema Flat
Page 102
Página Inicial do tema instalado
Tema Flat
Page 104
Excluir a pasta
“layout”
Sem a pasta “layout”
Tema Flat
Page 105
Tema continua o mesmo
Tema Flat
Page 106
Por que mesmo sem a pasta “layout” o tema funciona?
Tema Flat
Page 107
No “config.php” está definido que “bootstrapbase” é o tema pai.
Tema Flat
Page 108
Se o tema não há a pasta “layout”
ela procura os arquivos no tema pai.
E o tema pai do tema Flat é o tema
“bootstrapbase”.
Tema Flat
Page 109
E por que esses arquivos?
Tema Flat
Page 110
Tema Flat
type: frontpage
Page 111
Tema Flat
type: course
Page 112
Tema Flat
type: incourse
Page 113
“theme/bootstrapbase/config.php” $THEME->layouts
Tema Flat
Page 114
Tema Flat
“theme/bootstrapbase/config.php” $THEME->layouts
Page 115
Tema Flat
“theme/bootstrapbase/config.php” $THEME->layouts
Page 116
Quais são os layout disponíveis?
Tema Flat
Page 117
Layouts 1/2
LAYOUT FINALIDADE
base Sem blocos.
standard Com blocos.
course Página principal do curso.
coursecategory Usado para navegar nas categorias de curso.
incourse Usado pelos módulos/recursos no curso.
frontpage Página inicial.
admin Páginas de administração.
Tema Flat
Page 118
LAYOUT FINALIDADE
mydashboard “Visão geral dos Cursos” - “/my”.
mypublic Página de informações dos usuários.
login Página de login.
popup Novas janelas. Sem navegação e blocos.
embedded Usado por iframe/object. Máximo espaço.
maintenance Usado para instalações e atualizações.
report Usado para relatórios.
Tema Flat
Layouts 2/2
Page 119
Como controlar estes layouts?
Tema Flat
Page 120
Para facilitar o desenvolvimento
copie a pasta “layout” do tema
“bootstrapbase” para o tema “flat”.
Tema Flat
Page 121
No arquivo “config.php” do tema “flat” alteramos
o arquivo que o tipo “frontpage” utilizará.
Tema Flat
Page 122
Para a configuração
funcionar basta
duplicar o arquivo
“columns3.php” e
renomear para
“frontpage.php”
Tema Flat
Page 123
Agora a Página Inicial usa o arquivo
“frontpage.php” para exibir o conteúdo
a ser apresentado na tela.
Tema Flat
Assim é possível adicionar o
Bootstrap Carousel somente na
Página Inicial do Moodle.
Page 124
Aplicando um novo design 1/2
Page 125
Crie uma pasta “includes”.
Nesta pasta crie dois
arquivos, “header.php” e
“footer.php”.
Estes arquivos serão incluídos
nos arquivos de layout no
lugar do cabeçalho e rodapé
padrões.
Tema Flat
Page 126
A partir do arquivo
“columns1.php” recortar desde o
“echo $OUTPUT->doctype;” até
o primeiro “</header>” para o
arquivo “includes/header.php”.
Tema Flat
Page 127
Tema Flat
“columns1.php” 1/2
Page 128
Tema Flat
“columns1.php” 2/2
Page 129
Recortar o trecho abaixo para o arquivo “includes/header.php”.
Tema Flat
Page 130
No arquivo “columns1.php” substituir o código recortado para o
“includes/header.php” pelo código abaixo.
Assim o código é reutilizado no cabeçalho
para as demais páginas.
Tema Flat
Page 131
A partir do arquivo “columns1.php” copiar a tag “<footer>” e o
código PHP logo abaixo para o arquivo “includes/footer.php”.
Tema Flat
Page 132
No arquivo “columns1.php” substituir o código copiado para o
“includes/footer.php” pelo código abaixo.
Note que a “</div>” que havia depois do “<footer>” está
antes do código PHP.
Tema Flat
Page 133
Substituir o trechos de código copiado para o arquivo
“includes/header.php” pelo trecho abaixo nos arquivos
“columns2.php”, “columns3.php”, “frontpage.php”,
“popup.php” e “secure.php”.
Tema Flat
Page 134
Substituir o trechos de código copiado para o arquivo
“includes/footer.php” pelo trecho abaixo nos arquivos
“columns2.php”, “columns3.php”, “frontpage.php” e “popup.php”.
Tema Flat
Page 135
Trabalhe a estrutura HTML e saídas do Moodle
do cabeçalho no arquivo “includes/header.php”.
Trabalhe a estrutura HTML e saídas do Moodle
do rodapé no arquivo “includes/footer.php”.
Essas estruturas HTML que irão impactar no design do tema.
Tema Flat
Page 139
Tema Flat
Fonts
Para a biblioteca de ícones FontAwesome funcionar
é necessário adicionar um arquivo CSS.
Page 141
Tema Flat
CSS - style
Page 142
Tema Flat
CSS - style
config.php
Page 144
Tema Flat
Javascript
Page 145
Tema Flat
Javascript
config.php
Page 146
Tema Flat
Javascript
lib.php
Page 148
Tema Flat
Tema personalizável pela interface de usuário, ou seja,
Administração do site > Aparência > Temas > Flat.
É um ponto complexo por usar alto nível de programação.
Não será abordado nessa oportunidade.
Settings
Page 149
Overriding a renderer
Page 150
Tema Flat
Basicamente consiste em alterar, através de sobrescrita de
métodos no tema, a saída “HTML” do Moodle.
Os recursos do Moodle tratam suas saídas nos arquivos
“renderer.php” em cada recurso.
O Moodle tratam suas saídas no arquivo
“lib/outputrenderers.php”.
Como usamos “bootstrapbase” deve ser sobrescrito a
classe “theme_bootstrapbase_core_renderer”.
Overriding a renderer
Page 151
Tema Flat
1. Criar o arquivo “renderers.php”.
2. Declarar no “config.php” que o tema está apto
a realizar Override.
Overriding a renderer
Page 152
Tema Flat
Overriding a renderer
“config.php”
$THEME->rendererfactory =
'theme_overridden_renderer_factory';
Page 153
Tema Flat
Overriding a renderer
“renderers.php”
Page 154
O que mudou noMoodle 2.7?
Page 155
O que mudou no Moodle 2.7?
Menos temas
Page 156
O que mudou no Moodle 2.7?
Tema Clean como padrão
Page 157
O que mudou no Moodle 2.7?
Compiling LESS
Page 158
Aplicando um novo design 1/2
Page 159
Tema Flat
“includes/header.php” 1/2
Page 160
Tema Flat
“includes/header.php” 2/2
Page 161
Tema Flat“includes/footer.php” 1/3
Page 162
Tema Flat“includes/footer.php” 2/3
Page 163
Tema Flat“includes/footer.php” 3/3
Page 164
Tema Flat
Falta o código CSS para formatar
nossa estrutura HTML
Page 165
Tema Flat
“custom.css”
Substitua o código CSS original do tema Clean
pelo código produzido para o tema Flat
Page 166
Tema Flat
E o Bootstrap Carousel?
Page 167
Tema Flat “frontpage.php”
Page 168
Otimização paraDispositivos Móveis
Page 169
Otimização para Dispositivos Móveis
Faça seu tema com Bootstrapbase!
Page 170
Otimização para Dispositivos Móveis
Use Media Queries para definir CSS
para diferentes resoluções
Page 171
Otimização para Dispositivos Móveis
Use a unidade “em”
ao invés de “px”
Page 173
Disponível em breve
Tema Flat
Page 174
Considerações Finais
Page 175
https://docs.moodle.org/dev/Themes
Referências
Outros temas Moodle
Page 178
Michael Meneses
Contato
[email protected]