178
Michael Meneses Desenvolver um tema para Moodle 2.7

Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Embed Size (px)

DESCRIPTION

Esta apresentação aborda o desenvolvimento de um tema para o LMS Moodle a partir do tema Clean utilizando o tema Bootstrapbase como tema pai/base. Apresentado no 9º Moodle Moot Brasil, na Universidade Federal de Santa Catarina em Florianópolis/SC no dia 10 de outubro de 2014.

Citation preview

Page 1: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Michael Meneses

Desenvolver um temapara Moodle 2.7

Page 2: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Michael Meneses

Sobre mim

Desenvolvedor Moodle

Graduando em Análise e Desenvolvimento de Sistemas

Colaborador

Brasília/DF

10 meses

Page 3: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Ambiente Moodle

Page 4: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Clean (bootstrapbase)

Ambiente Moodle

Com blocos laterais

Page 5: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Página de Login

Ambiente Moodle

Sem blocos laterais

Page 6: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Ambiente MoodlePágina Inicial

Novo bloco à esquerda

Page 7: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Nada de novo?

Page 8: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Barra Superior (header)

Ambiente Moodle

Page 9: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Barra Superior – Nome Breve

Ambiente Moodle

Page 10: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Barra Superior – Item de Menu

Ambiente Moodle

Page 11: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Barra Superior – Informações de login

Ambiente Moodle

Page 12: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Conteúdo

Ambiente Moodle

Page 13: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Conteúdo – Região “main” e “side-pre”

Ambiente Moodle

Page 14: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Conteúdo – Região “main”

Ambiente Moodle

Page 15: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Conteúdo – Região “side-pre”

Ambiente Moodle

Page 16: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Conteúdo – Região “side-post”

Ambiente Moodle

Page 17: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Rodapé (footer)

Ambiente Moodle

Page 18: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Page 19: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

index.php = page-site-index

“page” é o prefixo

“site-index” é formado a partir da URI (index.php)

Page 20: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

user/profile.php?id=2 = page-user-profile

Page 21: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Note a informação do formato de curso utilizado, “semanal”

<body>

course/view.php?id=2 = page-course-view-weeks

Page 22: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

mod/forum/view.php?id=1 = page-mod-fórum-view

Page 23: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

E as classes CSS?

Page 24: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Formato de curso

Page 25: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

“Navegação” do recurso

Page 26: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Direção do texto a partir do idioma

Page 27: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Idioma

Page 28: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

URL

Page 29: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Layout da Página

“pagelayout” é muito importante para quem desenvolve tema

Page 30: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Curso

Page 31: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Contexto

Page 32: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Recurso no Curso - “coursemodule”

Page 33: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Categoria

Page 34: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Modo Edição?

Page 35: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Se há a região “side-pre”

Page 36: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

E se a região “side-pre” é usada

Page 37: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Se há a região “side-post”

Page 38: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

E se a região “side-post” é usada, ou vazia

Page 39: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

<body>

Javascript habilitado

Page 40: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Muitas informações através da tag <body>, não?

<body>

Page 41: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Bootstrap

Page 42: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Bootstrap

Mas o que é Boostrap?

Page 43: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Bootstrap

Framework Bootstrap - www.getbootstrap.com

Page 44: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Sistema de GridBootstrap

Page 45: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

ComponentesBootstrap

Navbar

Page 46: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

ComponentesBootstrap

Alert

Page 47: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

ComponentesBootstrap

Buttons

Page 48: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

ComponentesBootstrap

Modal

Page 49: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

ComponentesBootstrap

Carousel

Page 50: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Bootstrap

=

Design Responsivo

Bootstrap

Page 51: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema CleanTablet ou Smartphone

Bootstrap

Page 52: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Design Responsivo

=

Adaptação

Bootstrap

Page 53: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle & Bootstrap

Page 54: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle & Bootstrap

Instalação do Moodle 2.6

Page 55: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle & Bootstrap

Instalação do Moodle 2.7

Page 56: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle & Bootstrap

Tema Standard (base)

Page 57: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle & Bootstrap

Tema Clean (bootstrapbase)

Page 58: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle + Bootstrap

=

Tema Clean

=

Design agradável/amigável/simples

Moodle & Bootstrap

Page 59: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Base & Bootstrapbase

Page 60: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Base & Bootstrapbase

O que são “base” e “bootstrapbase”?

Page 61: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Moodle usa a versão 2.3.2, a mais recente é 3.2

Bootstrap 2.3.2

Base & Bootstrapbase

Bootstrap 3.2

Page 64: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Diretório “theme”

Page 65: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Diretório “theme”

Versão 2.6Vários temas

Page 66: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Versão 2.6Tema “base”

Diretório “theme”

Page 67: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Versão 2.6Tema “bootstrapbase”

Diretório “theme”

Page 68: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Versão 2.7Poucos temas

Diretório “theme”

Page 69: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Versão 2.7Tema “base”

Diretório “theme”

Page 70: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Versão 2.7Tema “bootstrapbase”

Diretório “theme”

Page 71: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Clean

Page 72: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Clean

Diretório “theme/clean”

Page 73: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

lang/en/theme_clean.php

Strings de tradução

Tema Clean

Page 74: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

layout

Arquivos que são chamados conforme

o tipo de página

Tema Clean

Page 75: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

pix

Imagens para uso do tema

Tema Clean

Page 76: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

style

Arquivos CSS para uso do tema

Tema Clean

Page 77: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

config.php

Arquivo de configuração do tema

Tema Clean

Page 78: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

lib.php

Arquivo com métodos/funções

para uso do tema

Tema Clean

Page 79: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

settings.php

Arquivo com itens para

personalização do tema

Tema Clean

Page 80: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

version.php

Arquivo de versão

e dependências do tema

Tema Clean

Page 81: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Configurações para otimizar o desenvolvimento de temas

Page 82: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Administração do site > Desenvolvimento > Debugging

Mensagens de Debug

Page 83: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Administração do site > Desenvolvimento > Debugging

Mostrar informações da página

Page 84: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Administração do site > Aparência > Temas

Modo designer de tema

Page 85: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Administração do site > Idioma > Configurações de idiomas

Colocar todas as strings de idioma em cache

Page 86: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Page 87: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Page 88: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Clonar o tema “clean” Renomear para “flat”

Tema Flat

Page 89: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Renomear o arquivo “theme_clean.php”

para “theme_flat.php”

Tema Flat

Page 90: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Alterar a string “pluginname” no arquivo “theme_flat.php”

Tema Flat

Page 91: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Alterar a string “choosereadme” no arquivo “theme_flat.php”

Tema Flat

Page 92: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Alterar o $THEME->name no arquivo “config.php”

Page 93: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Alterar o $plugin->component no arquivo “config.php”

Tema Flat

Page 94: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Alterar “clean” por “flat” no arquivo “lib.php”

Tema Flat

Page 95: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Alterar “clean” por “flat” no arquivo “settings.php”

Tema Flat

Page 96: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Alterar “clean” por “flat” nos

arquivos da pasta “layout”

Tema Flat

Page 97: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Instalação do tema Flat

Tema Flat

Page 98: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Instalação do tema Flat

Page 99: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Instalação do tema Flat

Page 100: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Selecionar tema Flat

Administração do site > Aparência > Temas > Seletor de tema

Tema Flat

Page 101: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Selecionar tema Flat

Tema Flat

Page 102: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Página Inicial do tema instalado

Tema Flat

Page 103: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Layout

Page 104: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Excluir a pasta

“layout”

Sem a pasta “layout”

Tema Flat

Page 105: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema continua o mesmo

Tema Flat

Page 106: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Por que mesmo sem a pasta “layout” o tema funciona?

Tema Flat

Page 107: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

No “config.php” está definido que “bootstrapbase” é o tema pai.

Tema Flat

Page 108: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

E por que esses arquivos?

Tema Flat

Page 110: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

type: frontpage

Page 111: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

type: course

Page 112: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

type: incourse

Page 113: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

“theme/bootstrapbase/config.php” $THEME->layouts

Tema Flat

Page 114: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“theme/bootstrapbase/config.php” $THEME->layouts

Page 115: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“theme/bootstrapbase/config.php” $THEME->layouts

Page 116: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Quais são os layout disponíveis?

Tema Flat

Page 117: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Como controlar estes layouts?

Tema Flat

Page 120: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Para facilitar o desenvolvimento

copie a pasta “layout” do tema

“bootstrapbase” para o tema “flat”.

Tema Flat

Page 121: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

No arquivo “config.php” do tema “flat” alteramos

o arquivo que o tipo “frontpage” utilizará.

Tema Flat

Page 122: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Para a configuração

funcionar basta

duplicar o arquivo

“columns3.php” e

renomear para

“frontpage.php”

Tema Flat

Page 123: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Aplicando um novo design 1/2

Page 125: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“columns1.php” 1/2

Page 128: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“columns1.php” 2/2

Page 129: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Recortar o trecho abaixo para o arquivo “includes/header.php”.

Tema Flat

Page 130: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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 136: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Fonts

Page 137: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Fonts

Page 138: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Fonts

Page 139: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Fonts

Para a biblioteca de ícones FontAwesome funcionar

é necessário adicionar um arquivo CSS.

Page 140: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

CSS - style

Page 141: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

CSS - style

Page 142: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

CSS - style

config.php

Page 143: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Javascript

Page 144: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Javascript

Page 145: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Javascript

config.php

Page 146: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Javascript

lib.php

Page 147: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Settings

Page 148: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Overriding a renderer

Page 150: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

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: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Overriding a renderer

“config.php”

$THEME->rendererfactory =

'theme_overridden_renderer_factory';

Page 153: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Overriding a renderer

“renderers.php”

Page 154: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

O que mudou noMoodle 2.7?

Page 155: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

O que mudou no Moodle 2.7?

Menos temas

Page 156: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

O que mudou no Moodle 2.7?

Tema Clean como padrão

Page 157: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

O que mudou no Moodle 2.7?

Compiling LESS

Page 158: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Aplicando um novo design 1/2

Page 159: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“includes/header.php” 1/2

Page 160: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“includes/header.php” 2/2

Page 161: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat“includes/footer.php” 1/3

Page 162: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat“includes/footer.php” 2/3

Page 163: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat“includes/footer.php” 3/3

Page 164: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

Falta o código CSS para formatar

nossa estrutura HTML

Page 165: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

“custom.css”

Substitua o código CSS original do tema Clean

pelo código produzido para o tema Flat

Page 166: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat

E o Bootstrap Carousel?

Page 167: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Tema Flat “frontpage.php”

Page 168: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Otimização paraDispositivos Móveis

Page 169: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Otimização para Dispositivos Móveis

Faça seu tema com Bootstrapbase!

Page 170: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Otimização para Dispositivos Móveis

Use Media Queries para definir CSS

para diferentes resoluções

Page 171: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Otimização para Dispositivos Móveis

Use a unidade “em”

ao invés de “px”

Page 172: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Resultado

Page 173: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Disponível em breve

Tema Flat

Page 174: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Considerações Finais

Page 175: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

https://docs.moodle.org/dev/Themes

Referências

Outros temas Moodle

Page 176: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
Page 177: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
Page 178: Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil

Michael Meneses

Contato

[email protected]