Creando un tema para Moodle 2.X – Parte II (nuevo tema – misma apariencia)

En la primera parte de esta serie de pequeños tutoriales sobre cómo crear un tema para Moodle 2.X vimos cuáles eran los archivos más importantes que conformaban un tema.

En esta segunda parte vamos a ir un paso más allá y vamos a crear un nuevo tema.

Para crear un nuevo tema tenemos dos opciones:

  • Empezar el tema desde cero, que evidentemente nos dará mucho más control y conocimiento sobre lo que vayamos haciendo y nos costará mucho más esfuerzo.
  • Partir de un tema base e ir modificando los aspectos del tema que estimemos convenientes.

Vamos a optar por la segunda opción. Para ello el primer paso será copiar la carpeta standard que se encuentra en la carpeta theme y cambiarle el nombre por el nombre que queremos darle a nuestro nuevo estilo pekestyle.

Al hacer esto podríamos pensar que vamos a tener ya la opción de elegir entre dos temas que se llaman diferente pero que son iguales, pero si intentamos entrar en Moodle veremos que la plataforma nos avisa de que tenemos un nuevo tema disponible:

Mensaje de instalación de nuevo plugin

Mensaje de instalación de nuevo plugin

Y sin embargo al instalarlo (hacer click sobre el botón de actualizar) nos sale el mensaje de error:

Mensaje de error al instalar un tema copia de otro de manera directa

Mensaje de error al instalar un tema copia de otro de manera directa

Para solucionar esto tendremos que tocar dos ficheros:

  • El fichero config.php que contiene la configuración básica del tema.
  • El fichero version.php que contiene información sobre la versión del tema que estamos desarrollando.
  • Crear pekestyle/lang/en/theme_pekestyle.php

Nuestro config.php será algo así:

Como se puede ver no hemos incluído ningún layout adicional. Simplemente hemos modificado el archivo config.php del tema standard

Y nuestro version.php quedará de la siguiente manera:

Y el archivo pekestyle/lang/en/theme_pekestyle.php quedará de la siguiente manera:

Y con esto, al entrar en Moodle todo funcionará y tendremos dos temas diferentes con la misma apariencia.Y nuestro tema pekestyle se mostraré en la lista.

En la próxima entrega veremos cómo empezamos a cambiar dicha apariencia.

Creando un Bloque para Moodle 2.X Parte I

Lo primero que tenemos que tener claro es que significa el concepto de Bloque en Moodle.Si seguimos la documentación oficial un bloque es (traducción literal):

“Elementos que pueden ser añadidos en la columna izquierda, derecha o central (dependiendo del tema) de cualquier página de Moodle.”

La verdad es que la definición no es muy clara, pero creo que si ponemos unos ejemplos de bloques aquellos que usáis Moodle os daréis cuenta enseguida de lo que es un bloque (si es que no lo sabíais)

Son bloques (entre otros):

  • Calendario
  • HTML
  • Mis Cursos
  • Mensajes
  • Actividad reciente.
  • Usuario Conectados

Para definir un bloque en Moodle tendremos que crear los siguiente archivos:

  • /blocks/nombre_de_mi_bloque/block_nombre_de_mi_bloque.php. Contiene la definición de bloque y se usa también para gestionarlo como plugin y para renderizarlo en la pantalla. Ej: /block/pekechisfirstblock/block_pekechisfirstblock.php
  • /blocks/nombre_de_mi_bloque/version.php. Contiene la información de la versión del plugin y alguna información más de nivel avanzado que en principio no nos va a interesar.
  • /blocks/nombre_de_mi_bloque/lang/es/block_nombre_de_mi_bloque.php. Es el fichero de idioma de mi bloque. Tendré que tener una carpeta para cada uno de los idiomas que quiera soportar desde mi bloque.

La manera más fácil para empezar es bajarse la plantilla de un bloque genérico que podemos decargarnos desde aquí

En la próxima entrega comenzaremos a trabajar con esa plantilla para crear un bloque sencillo (se admiten ideas).

Creando un tema para Moodle 2.X – Part I

Moodle Them IconEl paso de Moodle 1.9.X a Moodle 2.X es grande, hay muchas mejoras, nuevas herramientas y cambios que son significativos.

Desde el punto de vista estético hay que destacar que los temas de la versiones antiguas no son compatibles con la nuevas versiones. Por ello, y para presentar de forma ordenada toda la documentación dispersa que hay sobre el tema pretendo comenzar una serie de posts donde iremos construyendo paso a paso un tema para las versiones de Moodle 2.X. A ese tema lo llamaremos pekestyle (en mi honor):

Lo primero de todo: ¿Qué es un tema?

Es la apariencia que podemos dar a una plataforma Moodle (el sitio, la categorías,os cursos y recursos..)

Antes de lanzarnos a crear uno (lo que haremos en próximos post vamos a hacer un repaso los ficheros y directorios que son relevantes:

Ficheros importantes:

  • Fichero config.php : Configuración y definiciones.
  • Fichero lib.php: Clases y funciones usadas por el tema.
  • Fichero renderers.php: Renderers de diversos elementos personalizados para el tema.
  • Fichero settings.php: Aspectos específicos de configuración para el tema en cuestión.

Directorios importantes:

  • Directorio javascript/ : Donde residirán los scripts usados por el tema
  • Directorio lang/: Archivos de idioma que sean usados por el tema.
  • Directorio layout/: Los archivos del layout del tema (luego veremos qué es un layout).
  • Directorio pix/: Imágenes necesarias para las hojas de estilos y los layouts del tema.
  • Directorio style/:  Que contiene las hojas de estilo (archivos css)

Y para finalizar el primer artículo debemos entender qué es un layout y los diferentes layouts que vamos a tener que construir para crear un tema nuevo.

Un layout nos sirve para especificar la forma en la que vamos a disponer los diferentes elementos.

  • Se definen en el archivo config.php del tema.
  • Están asociados a un archivo de layout dentro del tema.
  • Consta de una serie de regiones o zona que los conforman y sobre las cuáles se va a establecer u estilo visual.

Y las diferentes regiones que pueden consituir un layout son:

  • base: el layout que es usado por defecto, se usa para garantizar la compatibilidad con algunos bloques.
  • standard:. el layout por defecto para los bloques, se suele usar para paǵinas con información general.
  • course: la página principal.
  • coursecategory: para navegar por los cursos de una categoría.
  • incourse: el layout por defecto dentro de un curso.
  • frontpage: la página inicial el sitio.
  • admin: la página de administración y de scripts.
  • mydashboad: la página del dashboard del usuario.
  • mypublic: la página pública del usuario.
  • login: la página para entrada en sesión.
  • popup: para las páginas que aparecen como una ventana emergente.
  • frametop: para temas antiguos. No lo tomaremos en consideración.
  • embedded: Para elementos embebidos mediante etiquetas como iframe o object.
  • maintenance: Para mostrar durante las actualización o durante tareas de mantenimiento en el sistema.
  • print: Cuando la pagína se ha creado específicamente para ser impresa.

En el próximo empezaremos a crear un nuevo tema teniendo como base otro.

Necesitarás conocimientos previos de: HTMLCSS and PHP.