Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
•
18 likes•5,757 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
Similar to Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil (20)
Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
- 1. Michael Meneses Desenvolver um temapara Moodle 2.7
- 2. Michael Meneses Sobre mim Desenvolvedor Moodle Graduando em Análise e Desenvolvimento de Sistemas Colaborador Brasília/DF 10 meses
- 4. Tema Clean (bootstrapbase) AmbienteMoodle Com blocos laterais
- 5. Página de Login AmbienteMoodle Sem blocos laterais
- 6. AmbienteMoodle Página Inicial Novo bloco à esquerda
- 8. Barra Superior (header) AmbienteMoodle
- 9. Barra Superior –Nome Breve AmbienteMoodle
- 10. Barra Superior –Item de Menu AmbienteMoodle
- 11. Barra Superior –Informações de login AmbienteMoodle
- 13. Conteúdo –Região “main” e “side-pre” AmbienteMoodle
- 15. Conteúdo –Região “side-pre” AmbienteMoodle
- 16. Conteúdo –Região “side-post” AmbienteMoodle
- 18. <body>
- 19. <body> index.php = page-site-index “page” é o prefixo “site-index” é formado a partir da URI (index.php)
- 20. <body> user/profile.php?id=2 = page-user-profile
- 21. Note a informação do formato de curso utilizado, “semanal” <body> course/view.php?id=2 = page-course-view-weeks
- 22. <body> mod/forum/view.php?id=1 = page-mod-fórum-view
- 23. <body> E as classes CSS?
- 24. <body> Formato de curso
- 25. <body> “Navegação” do recurso
- 26. <body> Direção do texto a partir do idioma
- 27. <body> Idioma
- 28. <body> URL
- 29. <body> Layout da Página “pagelayout” é muito importante para quem desenvolve tema
- 30. <body> Curso
- 31. <body> Contexto
- 32. <body> Recurso no Curso -“coursemodule”
- 33. <body> Categoria
- 35. <body> Se há a região “side-pre”
- 36. <body> E se a região “side-pre” é usada
- 37. <body> Se há a região “side-post”
- 38. <body> E se a região “side-post” é usada, ou vazia
- 40. Muitas informações através da tag <body>, não? <body>
- 41. Bootstrap
- 42. Bootstrap Mas o que é Boostrap?
- 43. Bootstrap Framework Bootstrap -www.getbootstrap.com
- 44. Sistema de Grid Bootstrap
- 50. Bootstrap= Design Responsivo Bootstrap
- 51. Tema Clean Tablet ou Smartphone Bootstrap
- 52. Design Responsivo= Adaptação Bootstrap
- 54. Moodle & Bootstrap Instalação do Moodle 2.6
- 55. Moodle & Bootstrap Instalação do Moodle 2.7
- 56. Moodle & Bootstrap Tema Standard (base)
- 57. Moodle & Bootstrap Tema Clean (bootstrapbase)
- 58. Moodle + Bootstrap= Tema Clean= Design agradável/amigável/simples Moodle & Bootstrap
- 60. Base & Bootstrapbase O que são “base” e “bootstrapbase”?
- 61. base •Baseado na biblioteca YUI(Yahoo! UserInterface) •Tema Standard por padrão •Design pouco agradável/amigável •HTML e CSS básicos •Navegadores antigos Base & Bootstrapbase
- 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
- 63. Moodle usa a versão 2.3.2, a mais recente é 3.2 Bootstrap 2.3.2 Base & Bootstrapbase Bootstrap 3.2
- 65. Diretório “theme” Versão 2.6 Vários temas
- 66. Versão 2.6 Tema “base” Diretório “theme”
- 67. Versão 2.6 Tema “bootstrapbase” Diretório “theme”
- 68. Versão 2.7 Poucos temas Diretório “theme”
- 69. Versão 2.7 Tema “base” Diretório “theme”
- 70. Versão 2.7 Tema “bootstrapbase” Diretório “theme”
- 71. Tema Clean
- 72. Tema Clean Diretório “theme/clean”
- 73. lang/en/theme_clean.php Strings de tradução Tema Clean
- 74. layout Arquivos que são chamados conformeo tipo de página Tema Clean
- 75. pix Imagens para uso do tema Tema Clean
- 76. style Arquivos CSS para uso do tema Tema Clean
- 77. config.php Arquivo de configuração do tema Tema Clean
- 78. lib.php Arquivo com métodos/funçõespara uso do tema Tema Clean
- 79. settings.php Arquivo com itens parapersonalização do tema Tema Clean
- 80. version.php Arquivo de versãoe dependências do tema Tema Clean
- 81. Configurações para otimizar o desenvolvimento de temas
- 82. Administração do site > Desenvolvimento > Debugging Mensagens de Debug
- 83. Administração do site > Desenvolvimento > Debugging Mostrar informações da página
- 84. Administração do site > Aparência > Temas Modo designer de tema
- 85. Administração do site > Idioma > Configurações de idiomas Colocar todas as strings de idioma em cache
- 86. Tema Flat
- 87. Tema Flat
- 88. Clonar o tema “clean” Renomear para “flat” Tema Flat
- 89. Renomear o arquivo “theme_clean.php” para “theme_flat.php” Tema Flat
- 90. Alterar a string “pluginname” no arquivo “theme_flat.php” Tema Flat
- 91. Alterar a string “choosereadme” no arquivo “theme_flat.php” Tema Flat
- 92. Tema Flat Alterar o $THEME->nameno arquivo “config.php”
- 93. Alterar o $plugin->component no arquivo “config.php” Tema Flat
- 94. Alterar “clean” por “flat” no arquivo “lib.php” Tema Flat
- 95. Alterar “clean” por “flat” no arquivo “settings.php” Tema Flat
- 96. Alterar “clean” por “flat” nos arquivos da pasta “layout” Tema Flat
- 97. Instalação do tema Flat Tema Flat
- 98. Tema Flat Instalação do tema Flat
- 99. Tema Flat Instalação do tema Flat
- 100. Selecionar tema FlatAdministração do site > Aparência > Temas > Seletor de tema Tema Flat
- 101. Selecionar tema Flat Tema Flat
- 102. Página Inicial do tema instalado Tema Flat
- 103. Layout
- 104. Excluir a pasta “layout” Sem a pasta “layout” Tema Flat
- 105. Tema continua o mesmo Tema Flat
- 106. Por que mesmo sem a pasta “layout” o tema funciona? Tema Flat
- 107. No “config.php” está definido que “bootstrapbase” é o tema pai. Tema Flat
- 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
- 109. E por que esses arquivos? Tema Flat
- 110. Tema Flat type: frontpage
- 111. Tema Flat type: course
- 112. Tema Flat type: incourse
- 114. Tema Flat “theme/bootstrapbase/config.php” $THEME->layouts
- 115. Tema Flat “theme/bootstrapbase/config.php” $THEME->layouts
- 116. Quais são os layout disponíveis? Tema Flat
- 117. Layouts 1/2 LAYOUT FINALIDADE base Sem blocos. standard Com blocos. course Página principaldo 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
- 118. LAYOUT FINALIDADE mydashboard “Visão geral dos Cursos” -“/my”. mypublic Página deinformações dos usuários. login Página de login. popup Novasjanelas. 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
- 119. Como controlar estes layouts? Tema Flat
- 120. Para facilitar o desenvolvimento copie a pasta “layout” do tema “bootstrapbase” para o tema “flat”. Tema Flat
- 121. No arquivo “config.php” do tema “flat” alteramos o arquivo que o tipo “frontpage” utilizará. Tema Flat
- 122. Para a configuração funcionar basta duplicar o arquivo “columns3.php” e renomear para “frontpage.php” Tema Flat
- 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 Carouselsomente na Página Inicial do Moodle.
- 124. Aplicando um novo design 1/2
- 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
- 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
- 127. Tema Flat “columns1.php” 1/2
- 128. Tema Flat “columns1.php” 2/2
- 129. Recortar o trecho abaixo para o arquivo “includes/header.php”. Tema Flat
- 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çalhopara as demais páginas. Tema Flat
- 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
- 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
- 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
- 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
- 135. Trabalhe a estrutura HTML e saídas do Moodledo cabeçalho no arquivo “includes/header.php”. Trabalhe a estrutura HTML e saídas do Moodledo rodapé no arquivo “includes/footer.php”. Essas estruturas HTML que irão impactar no design do tema. Tema Flat
- 136. Fonts
- 137. Tema Flat Fonts
- 138. Tema Flat Fonts
- 139. Tema Flat Fonts Para a biblioteca de ícones FontAwesomefuncionar é necessário adicionar um arquivo CSS.
- 140. CSS -style
- 141. Tema Flat CSS -style
- 142. Tema Flat CSS -style config.php
- 143. Javascript
- 144. Tema Flat Javascript
- 145. Tema Flat Javascript config.php
- 146. Tema Flat Javascript lib.php
- 147. Settings
- 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
- 149. Overridinga renderer
- 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”. Overridinga renderer
- 151. Tema Flat 1.Criar o arquivo “renderers.php”. 2.Declarar no “config.php” que o tema está apto a realizar Override. Overridinga renderer
- 152. Tema Flat Overridinga renderer “config.php” $THEME->rendererfactory= 'theme_overridden_renderer_factory';
- 153. Tema Flat Overridinga renderer “renderers.php”
- 154. O que mudou noMoodle 2.7?
- 155. O que mudou no Moodle 2.7? Menos temas
- 156. O que mudou no Moodle 2.7? Tema Clean como padrão
- 157. O que mudou no Moodle 2.7? CompilingLESS
- 158. Aplicando um novo design 1/2
- 159. Tema Flat “includes/header.php” 1/2
- 160. Tema Flat “includes/header.php” 2/2
- 161. Tema Flat “includes/footer.php” 1/3
- 162. Tema Flat “includes/footer.php” 2/3
- 163. Tema Flat “includes/footer.php” 3/3
- 164. Tema Flat Falta o código CSS para formatar nossa estrutura HTML
- 165. Tema Flat “custom.css” Substitua o código CSS original do tema Clean pelo código produzido para o tema Flat
- 166. Tema Flat E o Bootstrap Carousel?
- 169. Otimização para Dispositivos Móveis Faça seu tema com Bootstrapbase!
- 170. Otimização para Dispositivos Móveis Use Media Queries para definir CSS para diferentes resoluções
- 171. Otimização para Dispositivos Móveis Use a unidade “em” ao invés de “px”
- 172. Resultado
- 173. Disponível em breve Tema Flat
- 174. Considerações Finais
- 175. https://docs.moodle.org/dev/Themes Referências Outros temas Moodle
- 178. Michael Meneses Contato michael@michaelmeneses.com.br