Click here to load reader

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

  • View
    840

  • Download
    3

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.

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

  • 1. Michael MenesesDesenvolver um temapara Moodle 2.7

2. Michael MenesesSobre mimDesenvolvedor MoodleGraduando em Anlise e Desenvolvimento de SistemasColaboradorBraslia/DF10 meses 3. Ambiente Moodle 4. Tema Clean (bootstrapbase)AmbienteMoodleCom blocos laterais 5. Pgina de LoginAmbienteMoodleSem blocos laterais 6. AmbienteMoodlePgina InicialNovo bloco esquerda 7. Nada de novo? 8. Barra Superior (header)AmbienteMoodle 9. Barra Superior Nome BreveAmbienteMoodle 10. Barra Superior Item de MenuAmbienteMoodle 11. Barra Superior Informaes de loginAmbienteMoodle 12. ContedoAmbienteMoodle 13. Contedo Regio main e side-preAmbienteMoodle 14. ContedoRegiomainAmbienteMoodle 15. Contedo Regio side-preAmbienteMoodle 16. Contedo Regio side-postAmbienteMoodle 17. Rodap (footer)AmbienteMoodle 18. 19. index.php = page-site-indexpage o prefixosite-index formado a partir da URI (index.php) 20. user/profile.php?id=2 = page-user-profile 21. Note a informao do formato de curso utilizado, semanalcourse/view.php?id=2 = page-course-view-weeks 22. mod/forum/view.php?id=1 = page-mod-frum-view 23. E as classes CSS? 24. Formato de curso 25. Navegao do recurso 26. Direo do texto a partir do idioma 27. Idioma 28. URL 29. Layout da Pginapagelayout muito importante para quem desenvolve tema 30. Curso 31. Contexto 32. Recurso no Curso -coursemodule 33. Categoria 34. Modo Edio? 35. Se h a regio side-pre 36. E se a regio side-pre usada 37. Se h a regio side-post 38. E se a regio side-post usada, ou vazia 39. Javascripthabilitado 40. Muitas informaes atravs da tag , no? 41. Bootstrap 42. BootstrapMas o que Boostrap? 43. BootstrapFramework Bootstrap -www.getbootstrap.com 44. Sistema de GridBootstrap 45. ComponentesBootstrapNavbar 46. ComponentesBootstrapAlert 47. ComponentesBootstrapButtons 48. ComponentesBootstrapModal 49. ComponentesBootstrapCarousel 50. Bootstrap= Design ResponsivoBootstrap 51. Tema CleanTablet ou SmartphoneBootstrap 52. Design Responsivo= AdaptaoBootstrap 53. Moodle & Bootstrap 54. Moodle & BootstrapInstalao do Moodle 2.6 55. Moodle & BootstrapInstalao do Moodle 2.7 56. Moodle & BootstrapTema Standard (base) 57. Moodle & BootstrapTema Clean (bootstrapbase) 58. Moodle + Bootstrap= Tema Clean= Design agradvel/amigvel/simplesMoodle & Bootstrap 59. Base & Bootstrapbase 60. Base & BootstrapbaseO que so base e bootstrapbase? 61. baseBaseado na biblioteca YUI(Yahoo! UserInterface)Tema Standard por padroDesign pouco agradvel/amigvelHTML e CSS bsicosNavegadores antigosBase & Bootstrapbase 62. bootstrapbaseBaseado no Framework BootstrapTema Clean por padroDesign agradvel/amigvelHTML5 e CSS3Alguns navegadores antigos,desejvel mais recentesBase & Bootstrapbase 63. Moodle usa a verso 2.3.2, a mais recente 3.2Bootstrap 2.3.2Base & BootstrapbaseBootstrap 3.2 64. Diretrio theme 65. Diretrio themeVerso 2.6Vrios temas 66. Verso 2.6Tema baseDiretrio theme 67. Verso 2.6Tema bootstrapbaseDiretrio theme 68. Verso 2.7Poucos temasDiretrio theme 69. Verso 2.7Tema baseDiretrio theme 70. Verso 2.7Tema bootstrapbaseDiretrio theme 71. Tema Clean 72. Tema CleanDiretrio theme/clean 73. lang/en/theme_clean.phpStrings de traduoTema Clean 74. layoutArquivos que so chamados conformeo tipo de pginaTema Clean 75. pixImagens para uso do temaTema Clean 76. styleArquivos CSS para uso do temaTema Clean 77. config.phpArquivo de configurao do temaTema Clean 78. lib.phpArquivo com mtodos/funespara uso do temaTema Clean 79. settings.phpArquivo com itens parapersonalizao do temaTema Clean 80. version.phpArquivo de versoe dependncias do temaTema Clean 81. Configuraes para otimizar o desenvolvimento de temas 82. Administrao do site > Desenvolvimento > DebuggingMensagens de Debug 83. Administrao do site > Desenvolvimento > DebuggingMostrar informaes da pgina 84. Administrao do site > Aparncia > TemasModo designer de tema 85. Administrao do site > Idioma > Configuraes de idiomasColocar todas as strings de idioma em cache 86. Tema Flat 87. Tema Flat 88. Clonar o tema cleanRenomear para flatTema Flat 89. Renomear o arquivo theme_clean.php para theme_flat.phpTema Flat 90. Alterar a string pluginname no arquivo theme_flat.phpTema Flat 91. Alterar a string choosereadme no arquivo theme_flat.phpTema Flat 92. Tema FlatAlterar o $THEME->nameno arquivo config.php 93. Alterar o $plugin->component no arquivo config.phpTema Flat 94. Alterar clean por flat no arquivo lib.phpTema Flat 95. Alterar clean por flat no arquivo settings.phpTema Flat 96. Alterar clean por flat nos arquivos da pasta layoutTema Flat 97. Instalao do tema FlatTema Flat 98. Tema FlatInstalao do tema Flat 99. Tema FlatInstalao do tema Flat 100. Selecionar tema FlatAdministrao do site > Aparncia > Temas > Seletor de temaTema Flat 101. Selecionar tema FlatTema Flat 102. Pgina Inicial do tema instaladoTema Flat 103. Layout 104. Excluir a pasta layoutSem a pasta layoutTema Flat 105. Tema continua o mesmoTema 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 no 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 Flattype: frontpage 111. Tema Flattype: course 112. Tema Flattype: incourse 113. theme/bootstrapbase/config.php $THEME->layoutsTema Flat 114. Tema Flattheme/bootstrapbase/config.php $THEME->layouts 115. Tema Flattheme/bootstrapbase/config.php $THEME->layouts 116. Quais so os layout disponveis?Tema Flat 117. Layouts 1/2LAYOUTFINALIDADEbaseSem blocos.standardCom blocos.coursePgina principaldo curso.coursecategoryUsado para navegar nas categorias de curso.incourseUsado pelos mdulos/recursos no curso.frontpagePgina inicial.adminPginas de administrao.Tema Flat 118. LAYOUTFINALIDADEmydashboardViso geral dos Cursos -/my.mypublicPgina deinformaes dos usurios.loginPgina de login.popupNovasjanelas. Sem navegao e blocos.embeddedUsado por iframe/object.Mximo espao.maintenanceUsado para instalaes e atualizaes.reportUsado para relatrios.Tema FlatLayouts 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 configurao funcionar basta duplicar o arquivo columns3.php e renomear para frontpage.phpTema Flat 123. Agora a Pgina Inicial usa o arquivo frontpage.php para exibir o contedo a ser apresentado na tela.Tema FlatAssim possvel adicionar o Bootstrap Carouselsomente na Pgina 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 sero includos nos arquivos de layout no lugar do cabealho e rodap padres.Tema Flat 126. A partir do arquivo columns1.php recortar desde o echo $OUTPUT->doctype; at o primeiro para o arquivo includes/header.php.Tema Flat 127. Tema Flatcolumns1.php 1/2 128. Tema Flatcolumns1.php 2/2 129. Recortar o trecho abaixo para o arquivo includes/header.php.Tema Flat 130. No arquivo columns1.php substituir o cdigo recortado para o includes/header.php pelo cdigo abaixo.Assim o cdigo reutilizado no cabealhopara as demais pginas.Tema Flat 131. A partir do arquivo columns1.php copiar a tag e o cdigo PHP logo abaixo para o arquivo includes/footer.php.Tema Flat 132. No arquivo columns1.php substituir o cdigo copiado para o includes/footer.php pelo cdigo abaixo.Note que a que havia depois do est antes do cdigo PHP.Tema Flat 133. Substituir o trechos de cdigo 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 cdigo 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 sadas do Moodledo cabealho no arquivo includes/header.php.Trabalhe a estrutura HTML e sadas do Moodledo rodap no arquivo includes/footer.php.Essas estruturas HTML que iro impactar no design do tema.Tema Flat 136. Fonts 137. Tema FlatFonts 138. Tema FlatFonts 139. Tema FlatFontsPara a biblioteca de cones FontAwesomefuncionar necessrio adicionar um arquivo CSS. 140. CSS -style 141. Tema FlatCSS -style 142. Tema FlatCSS -styleconfig.php 143. Javascript 144. Tema FlatJavascript 145. Tema FlatJavascriptconfig.php 146. Tema FlatJavascriptlib.php 147. Settings 148. Tema FlatTema personalizvel pela interface de usurio, ou seja, Administrao do site > Aparncia > Temas > Flat. um ponto complexo por usar alto nvel de programao.No ser abordado nessa oportunidade.Settings 149. Overridinga renderer 150. Tema FlatBasicamente consiste em alterar, atravs de sobrescrita de mtodos no tema, a sada HTML do Moodle.Os recursos do Moodle tratam suas sadas nos arquivos renderer.php em cada recurso.O Moodle tratam suas sadas no arquivo lib/outputrenderers.php.Como usamos bootstrapbase deve ser sobrescrito a classe theme_bootstrapbase_core_renderer.Overridinga renderer 151. Tema Flat1.Criar o arquivo renderers.php.2.Declarar no config.php que o tema est apto a realizar Override.Overridinga renderer 15