Adaptación del Aspecto gráfico del Aula Virtual de la …³… · Debemos destacar que un theme...

Adaptación del Aspecto gráfico del Aula Virtual de la UCO

(Theme Moodle)

Antonio José Herrera Vega

Adaptación del Aspecto gráfico del Aula Virtual de la UCO (Theme Moodle)

2

Contenido

1. Introducción .............................................................................................................................. 3

2. Repercusión social .................................................................................................................... 4

3. Tecnología usada ....................................................................................................................... 5

4. Descripción de cada elemento desarrollado .............................................................................. 6

4.1. Config.php ............................................................................................................................. 7

4.2. Setting.php ............................................................................................................................. 8

4.3. lib.php .................................................................................................................................... 9

4.4. version.php ........................................................................................................................... 10

4.5. lang/ ..................................................................................................................................... 11

4.6. Layout (/layout/) .................................................................................................................. 12

4.7. CSS: Hojas de estilo en cascada (/style/) ............................................................................. 20

4.8. Javascript ............................................................................................................................. 27

4.9. Imágenes (/pix/) ................................................................................................................... 30

4.10. Servidor Web........................................................................................................................ 31

5. Bibliografía ............................................................................................................................. 33

Ilustración 1. Screenshot del resultado obtenido ................................................................................ 3

Ilustración 2. Uso de plataformas Elearning ........................................................................................ 4

Ilustración 3. Estructura de un theme.................................................................................................. 6 Ilustración 4. Config.php ..................................................................................................................... 7 Ilustración 5. setting.php ...................................................................................................................... 8

Ilustración 6. Acceder a la configuración del theme ............................................................................ 8 Ilustración 7. Configuración del theme ................................................................................................ 8

Ilustración 8. Función que recupera el logo ......................................................................................... 9 Ilustración 9. version.php ................................................................................................................... 10 Ilustración 10. Ejemplo de idioma (lang)........................................................................................... 11 Ilustración 11. layout columns.php .................................................................................................... 12

Ilustración 12. layout embedded.php ................................................................................................. 14 Ilustración 13. layout maintenance.php ............................................................................................. 15 Ilustración 14. layout secure.php ....................................................................................................... 16 Ilustración 15. layout popup............................................................................................................... 17

Ilustración 16. Acceder a ajustes de temas ........................................................................................ 19 Ilustración 17. Menú personalizado ................................................................................................... 19


3

1. Introducción Este manual consiste en la explicación del desarrollo del aspecto gráfico de la Plataforma de Formación Online usada por la Universidad de Córdoba llamado Moodle cuyo componente (plugin) en dicha plataforma se le llama theme. Se ha decido realizar dicha adaptación gráfica debido a que se ha comprobado la necesidad en la Universidad de unificar el aspecto gráfico de la plataforma educatica y su web corporativa. Moodle es una aplicación web de tipo Ambiente Educativo Virtual, un sistema de gestión de cursos, de distribución libre, que ayuda a los educadores a crear comunidades de aprendizaje en línea. Este tipo de plataformas tecnológicas también se conoce como LCMS (Learning Content Management System). La versión más reciente es la 3.0.3 siendo la versión 2.7 la utilizada por la Universidad de Córdoba (UCO). El paquete de software Moodle globalmente es Copyright © 1999 y siguientes, de Martin Dougiamas, con partes contribuidas y/o con copyright por muchos otros, y todo ello es distribuido bajo los términos de la GPL. Este programa es software libre; puede ser redistribuido y/o modificado bajo los términos de la Licencia Pública General GNU (GNU General Public License o GPL) según han sido publicados por la Free Software Foundation; según la versión 2 de la Licencia (para Moodle 1.x), o según la versión 3 de la Licencia (para Moodle 2.x), o (a su elección) cualquier versión posterior.

Se ha instalado una plataforma Moodle con las características de la que dispone la Universidad de Córdoba con los siguientes datos: http://www.ahvega.com/moodle/ User: userdemo Password: Userdemo_2016

Ilustración 1. Screenshot del resultado obtenido

http://www.ahvega.com/moodle/


4

2. Repercusión social Moodle fue creado por Martin Dougiamas, quien fue administrador de WebCT (actualmente adquirida por BlackBoard) en la Universidad Tecnológica de Curtin. Basó su diseño en las ideas del constructivismo en pedagogía que afirman que el conocimiento se construye en la mente del estudiante en lugar de ser transmitido sin cambios a partir de libros o enseñanzas, y en el aprendizaje cooperativo. Un profesor que opera desde este punto de vista crea un ambiente centrado en el estudiante que le ayuda a construir ese conocimiento con base en sus habilidades y conocimientos propios en lugar de simplemente publicar y transmitir la información que se considera que los estudiantes deben conocer. Moodle surge como alternativa libre a las plataformas de pago como WebCt, Blackboard, SuccessFactors (SAP), SumTotal Systems, … siendo actualmente líder como se muestra en el siguiente gráfico (a 8 de abril de 2015):

Ilustración 2. Uso de plataformas Elearning

Ilustración 1: Uso de plataformas elearning


5

3. Tecnología usada Debido a que hablamos de front-end, la tecnologías utilizadas son:

Html: sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas.

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. En este componente podemos destacar que Moodle tiene incorporado un framework de front-end llamado Bootstrap, este es un framework o conjunto de herramientas de Código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales destinada a crear un diseño responsitive. También utiliza otros frameworks como YUI Y JQUERY.

Moodle es una aplicación web de tipo Ambiente Educativo Virtual, un sistema de gestión de cursos, de distribución libre, que ayuda a los educadores a crear comunidades de aprendizaje en línea. Este tipo de plataformas tecnológicas también se conoce como LCMS (Learning Content Management System). La versión más reciente es la 3 pero la Universidad de Córdoba utiliza la versión 2.7. La instalación requiere una plataforma que soporte PHP y la disponibilidad de una base de datos.


6

4. Descripción de cada elemento desarrollado En la siguiente sección se va a describir como Moodle gestiona los elementos anteriormente descritas, en primer lugar cabe destacar que todos los elementos del front-end de Moodle se encuentran en una carpeta en el siguiente directorio:

wwwmoodle/theme/nombretheme Dentro de dicho directorio tenemos la siguiente estructura:

config.php configuración básica del aspecto, en dicho fichero se establecen parámetros como el nombre del theme, si este deriva de otro, referencia a la hoja de estilo, layouts (html), ...

lib.php librería de funciones solo usadas para dicho theme.

settings.php ajustes del theme en concreto, estas pueden ser dinámicas (se pueden modificar desde el propio Moodle) o estáticas. De esta manera en este fichero es donde se establece por ejemplo el logo que posteriormente se referenciará en la hoja de estilos.

version.php fichero donde se establece la versión del actual theme, la versión del Moodle donde se puede instalar y si este theme deriva de otro la versión de otro theme.

/style/ directorio donde se encuentran las hojas de estilo referenciándolas en el fichero anterior.

/pix/ En este directorio vamos a poner una captura de pantalla de nuestro tema, así como nuestro favicon y cualquier imagen que usamos en la CSS.

/layout/ directorio donde se localizan las pantillas html.

/lang/ directorio donde se encuentran las cadenas de caracteres utilizadas en el theme en cada uno de los idiomas estableciendo como nombre del directorio la nomenclatura ISO del idioma (por ejemplo es para Español, en para inglés, pt para portugues, ...) y dentro un fichero con el siguiente nombre: theme_+nombretheme+.php

Debemos destacar que un theme en Moodle puede derivar de otro theme, de esta manera el theme seleccionados para su adaptación (llamado clean) deriva de otro theme llamado bootstrapbase, el cuál como su nombre indica utiliza bootstrap como framework mostrando un menú superior responsitive. Pasamos a describir cada uno de los elementos más detalladamente:

Ilustración 3. Estructura de un theme


7

4.1. Config.php

Como se puede observar en la ilustración en nuestro desarrollo hemos creado un theme llamado UCO (variable $THEME→name), basado en HTML5 y que deriva de un theme llamado bootstrapbase. La hoja de estilos que cargará dicho theme se llama custom (en siguientes secciones veremos con más detalle). También tenemos activado el dock o menú superior (basado en Bootstrap). Una variable donde se almacena el nombre objeto que renderiza el código del menú superior perteneciendo esta al kernel de Moodle. Una función creada solo y exclusivamente para dicho theme llamada theme_uco_process_css que obtiene el logo del theme ya que este es dinámico y se configura desde el propio Moodle, en este aspecto entraremos en más detalles en las siguientes secciones. Y por último los diferentes layouts que tiene el theme asi como el fichero que debería cargar, como se puede observar el formato que define los latoyuts es el siguiente: 'course' => array( => contexto en el que se cargará dicho layout 'file' => 'general.php', => fichero que cargará (plantilla HTML) 'regions' => array('side-pre', 'side-post'), => regiones con las que cuenta el theme 'defaultregion' => 'side-pre', => la región por defecto que es donde estará el contenido principal o region-main 'options' => array('langmenu'=>true), => potras opciones como ocultar el menú de idiomas, el dock, ... ) Como se puede observar se puede crear un layout general con todas las regiones y luego según el contexto (course, front-page, …) cargar o no dichas regiones entre otras opciones. En siguientes secciones explicaremos los diferentes layouts creados y para se usa cada uno.

Ilustración 4. Config.php


8

4.2. Setting.php

Este fichero se usa para la configuración dinámica del theme (añadir opciones en la configuración del mismo), en nuestro theme tenemos la opción de añadir el logo desde la configuración del theme, para ello como se puede observar el fichero tiene la siguiente información:

Dicho código lo que hace es añadir a la configuración del theme las opciones para subir el logo:

Ilustración 5. setting.php

Ilustración 7. Configuración del theme

Ilustración 6. Acceder a la configuración del theme


9

4.3. lib.php

Librería de funciones solo usadas para dicho theme, que se suelen utilizar para la configuración dinámica del mismo, por ejemplo en nuestro theme tenemos la opción de añadir el logo desde la configuración del theme, para poder recuperar dicha información se usa la siguiente función:

Ilustración 8. Función que recupera el logo


10

4.4. version.php

En version.php se establece la versión del theme en cuestión, los componentes que incluye (contándose a el mismo), si depende de otro theme y la versión del mismo.

Las versiones tienen el siguiente formato: YYYYMMDDRR.XX:

YYYYMMDD es la fecha de inicio de la rama de desarrollo.

RR incremento del desarrollo (cambios mayores).

XX incremento del micro-desarrollo (cambios menores). Como se puede observar en nuestro caso hemos creado la versión el 02/05/2016 que requiera la versión de Moodle 2.7 publicada el 08/05/2014 y su vez también requiera el theme bootstrap de la misma fecha. Esto es muy importarte porque cuando se quiere subir alguna actualización habrá que modificar los dígitos de la versión y esa será la forma en la que Moodle sabrá que tiene que volver a instalar el theme ya que la otra alternativa sería desinstalar el theme y volverlo a instalar con la perdida de la información que esto conlleva. Aunque esto solo sería necesario si se añadieses algún tipo de contenido dinámico nuevo (que en nuestro caso solo sería el logo) implicase alguna modificación en la base de datos, para cambios de estilos, layouts, … no es necesario ya que no hay información dinámica.

Ilustración 9. version.php


11

4.5. /lang/

Directorio donde se encuentran las cadenas de caracteres utilizadas en el theme en cada uno de los idiomas estableciendo como nombre del directorio la nomenclatura ISO del idioma (por ejemplo es para Español, en para inglés, pt para portugues, ...) y dentro un fichero con el siguiente nombre: theme_+nombretheme+.php

Posteriormente para el uso de dichas cadenas habría que usar la siguiente función del kernel de moodle:

get_string('logodesc', 'theme_uco');

Como se puede observar el primero parámetro de la función sería el identificar de la cadena y la segundo el componente Moodle donde tiene que buscar dicha cadena. Esta es una característica general de Moodle que usa en todos sus plugins y kernel lo que hace que su traducción la puedan realizar personas con pocos o ningún conocimiento de programación.

Ilustración 10. Ejemplo de idioma (lang)


12

4.6. Layout (/layout/) Los layouts son una cuadrícula imaginaria que divide en espacios o campos la página que se diseña para facilitar la distribución de elementos como textos ó gráficos en la misma. Moodle gestiona los html utilizando layouts, esto son ficheros php que se utilizan para crear plantillas html dependiendo de la sección en la que nos encontremos, cabe destacar que ya se incorporan una serie de plantillas por defecto y solo debemos añadir las que vayamos a modificar. En el fichero settings.php del theme en cuestión (o del theme padre si este deriva de otro, por defecto todos derivan del theme base) se definen los layouts utilizando la siguiente estructura: 'course' => array( 'file' => 'general.php', 'regions' => array('side-pre', 'side-post'), 'defaultregion' => 'side-pre', 'options' => array('langmenu'=>true), ) Como se puede observar se establece el fichero físico donde se encuentra el layout, la regiones con las que este cuenta, la región por defecto y otras opciones como mostrar el menú de selección de idioma, login, ... . Si no tenemos el fichero general.php a nuestro theme Moodle lo tomará del theme padre. Los layouts internamente tienen una seria de objetos utilizados para definir los identificadores, de esta manera por ejemplo para obtener el id del body tenemos que utilizar el objeto $PAGE llamando a su función bodyid ($PAGE->bodyid) y si queremos obtener el título de la página usaríamos $PAGE->title. Cabe destacar que también existe otros objetos llamados $OUTPUT donde podemos acceder a la configuración del theme descrita anteriormente. También se utilizan una serie de identificadores utilizados por el framework bootstrap para identificar las secciones dentro del front-end como region-content, region-pre, region-post, … En nuestro caso se han utilizado los siguientes layouts:

columns.php: layout principal que aparecerá en la mayoría de las iteraciones con la herramienta, este está compuesto por un menú lateral donde aparece el logo de la institución, los bloques de acceso y configuración de moodle asi como unas opciones propias de la universidad (acceso a la sede electronica, uco news y redes sociales).

Ilustración 11. layout columns.php

13

Código fuente comentado: // Get the HTML for the settings bits. //se obtiene el contenido del logo configurado dinámicamente $html = theme_uco_get_html_for_settings($OUTPUT, $PAGE); echo $OUTPUT->doctype(); //se añade el doctype de Moodle ?> <html <?php echo $OUTPUT->htmlattributes(); //se habilita o no la posibilidad de tener html5, depende de config.php ?>> <head> <title><?php echo $OUTPUT->page_title(); //titulo de la página ?></title> <link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); //se añade el favicon ?>" /> <?php echo $OUTPUT->standard_head_html(); //Con esta funcinón se añaden los estilos dependiendo del theme elegido ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body <?php echo $OUTPUT->body_attributes(); //moodle añade atributops al body de la pagina ?>> <?php echo $OUTPUT->standard_top_of_body_html(); //Moodle añade los JS, CSS, ... ?>  <header role="banner" class="navbar navbar-fixed-top<?php echo $html->navbarclass ?> moodle-has-zindex"> <nav role="navigation" class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php echo format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))); //enlace al home ?></a> <a class="btn btn-navbar" data-toggle="workaround-collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <?php echo $OUTPUT->custom_menu(); //Menu personalizado desde la configuración general de themes ?> <ul class="nav pull-right"> <li class="navbar-text"><?php echo $OUTPUT->login_info(); //información del login ?></li> </ul> </div> </div> </nav> </header> <div id="page" class="container-fluid">  <div id="page-content" class="row-fluid"> <div id="<?php echo $regionbsid ?>" class="span9"> <div id="colum1">  <section id="region-logo"><?php echo $html->heading; ?></section>  <section id="region-banner"><a href="https://sede.uco.es/"> <div id="banner"></div> </a></section>  <section id="region-blocks"><?php echo $OUTPUT->blocks('side-pre', 'span4 desktop-first-column'); ?></section> </div> <div id="colum2"> <div class="row-fluid"> <section id="region-main" class="span8 pull-right">   <div id="page-navbar" class="clearfix"> <nav class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></nav> <div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div> </div> <?php echo $OUTPUT->course_content_header(); // muestra el header de zona denominada main_content (donde se mostrarña la sección en la que estemos) echo $OUTPUT->main_content(); // muestra el main_content de la seccion en la que estemos echo $OUTPUT->course_content_footer(); // muestra el footer de zona denominada main_content (donde se mostrarña la sección en la que estemos) ?> </section> </div> </div> </div> </div>  <footer id="page-footer"> <div id="footer-left">  <div id="uco_news"> <a href="http://www.uco.es/uconews/"></a>

14

</div>  <div id="uco_social"> <div id="uco_linkedin"><a href="http://www.linkedin.com/company/universidad-de-cordoba"></a></div> <div id="uco_twitter"><a href="http://twitter.com/Univcordoba"></a></div> <div id="uco_facebook"><a href="http://www.facebook.com/universidadcordoba"></a></div> <div id="uco_rss"><a href="http://www.uco.es/servicios/comunicacion/actualidad/?format=feed"> </a></div> <div id="uco_flickr"><a href="https://www.flickr.com/photos/univcordoba/"></a></div> <div id="uco_youtube"><a href="https://www.youtube.com/user/univcordoba"></a></div> </div> </div> <div id="footer-right"> <div id="course-footer"><?php echo $OUTPUT->course_footer(); ?></div> <p class="helplink"><?php echo $OUTPUT->page_doc_link(); ?></p> <?PHP echo $OUTPUT->login_info(); //información del login echo $OUTPUT->home_link(); //link de Moodle.org a la web de ayuda de la sección en la que nos encontremos ?> </div> </footer> <?php echo $OUTPUT->standard_end_of_body_html(); //Adicción de javascripts que se ejecutan al final del DOM ?> </div> </body> </html>

embedded.php: plantilla que se muestra en las iteración en la que solo se muestra la región principal llamada region-content, por ejemplo cuando usamos la opción de Purgar la caché de Moodle se usa dicho layout.

Ilustración 12. layout embedded.php

Código fuente comentado: <?php echo $OUTPUT->doctype(); //se añade el doctype de Moodle ?> <html <?php echo $OUTPUT->htmlattributes(); //se habilita o no la posibilidad de tener html5, depende de lo que haya en config.php ?>> <head> <title><?php echo $OUTPUT->page_title(); ////titulo de la página ?></title> <link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); //se añade el favicon ?>" /> <?php echo $OUTPUT->standard_head_html(); //Con esta función se añaden los estilos dependiendo del theme elegido ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body <?php echo $OUTPUT->body_attributes(); //moodle añade atributos al body de la pagina ?>> <?php echo $OUTPUT->standard_top_of_body_html(); //moodle Añade una serie de valores al body segun precise, como los js, css, ... echo $OUTPUT->course_content_header(); // muestra el header de zona denominada main_content (donde se mostrarña la sección en la que estemos) echo $OUTPUT->main_content(); // muestra el main_content de la seccion en la que estemos echo $OUTPUT->course_content_footer();// muestra el footer de zona denominada main_content (donde se mostrarña la sección en la que estemos) ?> </body> </html>

15

maintenance.php: layout que se usa para mostrar el modo de mantenimiento de Moodle, en el que se oculta el menú superior (dock), el bloque lateral, …

Ilustración 13. layout maintenance.php

Código fuente comentado:

<?php // Get the HTML for the settings bits. //se obtiene el contenido del logo configurado dinaminacamente $html = theme_uco_get_html_for_settings($OUTPUT, $PAGE); echo $OUTPUT->doctype(); //se añade el doctype de Moodle ?> <html <?php echo $OUTPUT->htmlattributes();//se habilita o no la posibilidad de tener html5, depende de lo que haya en config.php ?>> <head> <title><?php echo $OUTPUT->page_title();//titulo de la página ?></title> <link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); //se añade el favicon ?>" /> <?php echo $OUTPUT->standard_head_html(); //Con esta función se añaden los estilos dependiendo del theme elegido ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body <?php echo $OUTPUT->body_attributes(); //moodle añade atributos al body de la pagina ?>> <?php echo $OUTPUT->standard_top_of_body_html(); //moodle Añade una serie de valores al body segun precise, como los js, css, ... ?> <div id="page" class="container-fluid"> <div id="page-content" class="row-fluid">  <?php echo $html->heading; ?> <section id="region-main" class="span12"> <?php echo $OUTPUT->main_content(); // muestra el main_content de la seccion en la que estemos ?> </section> </div> <?php echo $OUTPUT->standard_end_of_body_html(); //Adicción de javascripts que se ejecutan al final del DOM ?> </div> </body> </html>

16

secure.php: plantilla que se usa para el modo seguro solo en la realización de cuestionarios para que el usuario no tenga acceso a los demás recursos de Moodle y asi haga dicho cuestionario son poder acceder por ejemplo a los pdfs del curso hasta que no complete el cuestionario. También cabe mencionar que este método es poco eficaz y se usa muy poco ya que un usuario medio/avanzado puede acceder al moodle con otro navegador o incluso en otra pestaña.

Ilustración 14. layout secure.php


<?php //se obtiene el contenido del logo configurado dinámicamente $html = theme_uco_get_html_for_settings($OUTPUT, $PAGE); echo $OUTPUT->doctype(); //se añade el doctype de Moodle ?> <html <?php echo $OUTPUT->htmlattributes();//se habilita o no la posibilidad de tener html5, depende de lo que haya en config.php ?>> <head> <title><?php echo $OUTPUT->page_title();//titulo de la página ?></title> <link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); //se añade el favicon ?>" /> <?php echo $OUTPUT->standard_head_html(); //Con esta función se añaden los estilos dependiendo del theme elegido ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body <?php echo $OUTPUT->body_attributes(); //moodle añade atributos al body de la pagina ?>> <?php echo $OUTPUT->standard_top_of_body_html(); //moodle Añade una serie de valores al body segun precise, como los js, css, ... ?>  <header role="banner" class="navbar navbar-fixed-top moodle-has-zindex"> <nav role="navigation" class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php echo format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))); ?></a> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav pull-right"> <li><?php echo $OUTPUT->page_heading_menu(); ?></li> </ul> </div> </div> </nav> </header> <div id="page" class="container-fluid"> <div id="page-content" class="row-fluid">

17

<header id="page-header" class="clearfix">  <?php echo $html->heading; ?> </header> <div id="region-bs-main-and-pre" class="span9"> <div class="row-fluid"> <section id="region-main" class="span8 pull-right"> <?php echo $OUTPUT->main_content();// muestra el main_content de la seccion en la que estemos ?> </section>  <?php echo $OUTPUT->blocks('side-pre', 'span4 desktop-first-column'); ?> </div> </div> </div> <?php echo $OUTPUT->standard_end_of_body_html(); //Adicción de javascripts que se ejecutan al final del DOM ?> </div> </body> </html>

popup.php: layout que se usa para mostrar contenido en una ventana emergente solo mostrando la

región principal (region-main). Este se suele usar por ejemplo para mostrar contenido SCORM que viene con su propio diseño.


<?php echo $OUTPUT->doctype(); //se añade el doctype de Moodle ?> <html <?php echo $OUTPUT->htmlattributes();//se habilita o no la posibilidad de tener html5, depende de lo que haya en config.php ?>> <head> <title><?php echo $OUTPUT->page_title();//titulo de la página ?></title> <link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); //se añade el favicon?>" /> <?php echo $OUTPUT->standard_head_html(); //Con esta función se añaden los estilos dependiendo del theme elegido?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body <?php echo $OUTPUT->body_attributes();//moodle añade atributos al body de la pagina ?>> <?php echo $OUTPUT->standard_top_of_body_html(); //moodle Añade una serie de valores al body segun precise, como los js, css, ... ?> <?php // Si no es desktop ocultamos the header/footer. $hideclass = ''; $devicetype = core_useragent::get_device_type(); if($devicetype !== 'mobile' and $devicetype !== 'tablet') { // We can not use the Bootstrap responsive css classes because popups are phone sized on desktop. $hideclass = 'hide';

Ilustración 15. layout popup

18

} ?>  <header role="banner" class="navbar navbar-fixed-top moodle-has-zindex <?php echo $hideclass; ?>"> <nav role="navigation" class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php echo format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID))); ?></a> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <?php echo $OUTPUT->custom_menu(); ?> <ul class="nav pull-right"> <li><?php echo $OUTPUT->page_heading_menu(); ?></li> <li class="navbar-text"><?php echo $OUTPUT->login_info() ?></li> </ul> </div> </div> </nav> </header> <div id="page" class="container-fluid"> <header id="page-header" class="clearfix">  <div id="page-navbar" class="clearfix"> <nav class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></nav> <div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div> </div> <?php echo $OUTPUT->page_heading(); ?> <div id="course-header"> <?php echo $OUTPUT->course_header(); //cabecera del curso ?> </div> </header> <div id="page-content" class="row-fluid"> <section id="region-main" class="span12"> <?php echo $OUTPUT->course_content_header(); // muestra el header de zona denominada main_content (donde se mostrarña la sección en la que estemos) echo $OUTPUT->main_content(); // muestra el main_content de la seccion en la que estemos echo $OUTPUT->course_content_footer(); // muestra el footer de zona denominada main_content (donde se mostrarña la sección en la que estemos) ?> </section> </div> <footer id="page-footer" class="<?php echo $hideclass; ?>"> <div id="course-footer"><?php echo $OUTPUT->course_footer(); ?></div> <p class="helplink"><?php echo $OUTPUT->page_doc_link(); ?></p> <?php echo $OUTPUT->login_info(); //información del login echo $OUTPUT->home_link(); //link de Moodle.org a la web de ayuda de la sección en la que nos encontremos echo $OUTPUT->standard_footer_html(); //footer sencillo ?> </footer> <?php echo $OUTPUT->standard_end_of_body_html() //Adicción de javascripts que se ejecutan al final del DOM ?> </div>


19

</body> </html>

El menú superior tipo Bootstrap es dinámico y pertenece al kernel de Moodle, para añadir opciones a dicho menú habría que ir a la siguiente sección de Moodle:

Ilustración 16. Acceder a ajustes de temas

En dicha sección habría que buscar la opción Ítems del menú personalizado y añadir las opciones con el formato que se especifica:

Ilustración 17. Menú personalizado


20

4.7. CSS: Hojas de estilo en cascada (/style/) Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento. CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En Moodle los elementos CSS pueden ser referencia dos de manera que afecten a toda la web, esto quiere decir que si modificados la clase block esta modificación se aplicaría a todos los blocks de la web, aunque también te ofrece la funcionalidad para adaptar un bloque en concreto, por ejemplo solo el bloque navegación e incluso modificar un bloque dentro de una sección en concreto, por ejemplo el bloque navegación solo cuando se esté en un curso. Para realizar esto usa la herencia de estilos CSS. Pasemos a poner unos ejemplos de lo anteriormente descrito. Si nos posicionamos en el home de Moodle podemos ver que id del body es page-site-index, mientras que el de la vista de los cursos page-course-view-topics, de esta manera podemos identificar cada sección de la web y aplicar estilos diferentes según la navegación. En los blocks pasa exactamente lo mismo, por ejemplo si añadimos un estilo a la clase block se modificarían en todos los bloques del Moodle, pero podemos editar solo un bloque en concreto, por ejemplo para editar el bloque de administración la clase se llama block_settings e incluso se podrían establecer estilos a un bloque en una sección en concreto (o a todos), por ejemplo un estilo en el home y otro en la vista de los cursos utilizando la filosofía anteriormente descrita. Como podemos ver es un filosofía bastante flexible y a su vez fácil de usar. Cabe destacar que los elementos anteriormente descritos son clases estáticas y no pueden ser modificada su nomenclatura ya que en dicho caso los demás themes dejarían de funcionar y no es una buena práctica desviarse del desarrollo estándar de una herramienta ya que en dicho caso no podrías actualizar en futuras versiones de manera sencilla. Si se usan los mecanismos que la plataforma facilita debería poder migrarse sin mayor problema.


21

Ahora se mostraran los estilos creados para este theme en concreto (custom.css): a.logo { background: url([[setting:logo]]) no-repeat 0 0; display: block; float: left; height: 111px; margin: 0; padding: 0; width: 100%; } #page-admin-index a.logo { margin-left: 4px; } #region-logo { height: 130px; margin-left: 26px; } #region-banner { margin-left: 38px; } #banner { background: url([[pix:theme|banner]]) 100% 0 no-repeat; height: 45px; width: 172px; } .block-region{ width: 250px; border: none; } .block{ background-color: transparent; box-shadow: none; width: 250px; border: none; } .block header { border: none; } #block-region-side-pre { width: 250px; padding-top: 20px; } #block-region-side-post { display: none; } .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4, .jsenabled.docked-region-side-post.used-region-side-pre #block-region-side-pre.span4 { width: 250px; } .layout-option-noheader #page-header, .layout-option-nonavbar #page-navbar, .layout-option-nofooter #page-footer, .layout-option-nocourseheader .course-content-header, .layout-option-nocoursefooter .course-content-footer { display: block; } .block .header h2 { font-size: 13px; color: #727578; background: url([[pix:theme|h3_bg]]) #dcd9c8 100% 0 no-repeat; padding: 1px 0px 2px 26px; margin-bottom: 5px; font-family: Arial,FreeSans,sans-serif; width: 170px; margin-left: 6px; } a:hover { text-decoration: underline; } a{ color: #333; text-decoration: none; } #page-content { background: url([[pix:theme|bg_all]]) repeat-y; } #region-main { width: 709px;


22

margin-right: -246px; padding-left: 1px; padding-right: 4px; } .breadcrumb-nav .breadcrumb { margin-top: 2px; margin-left: 1px; display: block } .mform fieldset.collapsible legend a.fheader { margin-left: 0; } body{ font:12px/1.3 Verdana, Arial,FreeSans,sans-serif; background: url([[pix:theme|body_bg]]); padding: 0; } a:focus{ outline:1px dotted invert } hr{ border:0 #ccc solid; border-top-width:1px; clear:both; height:0 } h1{ font-size:25px } h2{ font-size: 18px; margin-left: 5px; } h3{ font-size:16px; margin-left: 5px; } h4{ font-size:14px; margin-left: 5px; } h5{ font-size:12px; margin-left: 5px; } h6{ font-size:10px; margin-left: 5px; } ol{ list-style:decimal } ul{ list-style:square } p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{ margin-bottom:20px } label, input, button, select, textarea { font:12px/1.3 Verdana, Arial,FreeSans,sans-serif; } table#form td.submit, .form-buttons, .path-admin .buttons, #fitem_id_submitbutton, .fp-content-center form + div, div.backup-section + form, #fgroup_id_buttonar { background-color: #fff; border: none; } #page { width: 960px; padding-top: 48px; } #page-header { width: 960px; } .form-item .form-label, .mform .fitem div.fitemtitle { text-align: left;


23

} .form-item .form-label, .mform .fitem div.fitemtitle, .userprofile dl.list dt, .form-horizontal .control-label { width: 100px; } .form-item .form-setting, .form-item .form-description, .mform .fitem .felement, #page-mod-forum-search .c1, .mform .fdescription.required, .userprofile dl.list dd, .form-horizontal .controls { margin-left: 120px; } input.form-submit, input#id_submitbutton, input#id_submitbutton2, .path-admin .buttons input[type="submit"], td.submit input { background-image: none; background-color: #ecefeb; font: 12px/1.3 Verdana, Arial,FreeSans,sans-serif; color: #000; text-decoration: none; } button, input.form-submit, input[type="button"], input[type="submit"], input[type="reset"] { font:12px/1.3 Verdana, Arial,FreeSans,sans-serif; color: #000; text-decoration: none; background-color: #ecefeb; } .navbar-fixed-top, .navbar-fixed-bottom { position: right; } #page-footer { width: 949px; margin-top: 0; border: 3px #abafb0 solid; margin-left: 2px; background-color: #ecefeb; } .breadcrumb-button { padding-right: 20px; } .dropup, .dropdown { text-align: left; } .generaltable { table-layout: fixed; width: 688px; } #page-backup-import .generaltable { width: 490px; } table.flexible th, .generaltable th, table.flexible td, .generaltable td { padding: 4px; line-height: 10px; } #colum1 { float: left; } #colum2 { float: right; } #site-news-forum { background-color: #d5d6d8; } #page-navbar { background-color: #d5d6d8; padding-top: 7px; padding-left: 7px; margin: 0; } #site-news-forum { padding-top: 1px; padding-bottom: 10px; } #page-site-index .subscribelink { margin-right: 10px; } .form-item, .mform .fitem{ width: 678px; margin: 5px; } .form-setting .generaltable {


24

width: 548px; } #page-maintenance-message #page-content{ background: url([[pix:theme|bg_all]]); border-bottom: 3px #abafb0 solid; } #page-maintenance-message #region-main { padding-left: 275px; } #page-maintenance-message #page { padding: 0; } #page-maintenance-message a.logo { padding: 0; margin-left: 29px; } .pagelayout-secure a.logo { margin-left: 30px; } #page-mod-quiz-attempt .row-fluid [class*="span"] { margin-left: 0px; } .que .formulation { margin-right: 10px; } #uco_news { background: url([[pix:theme|uco_news]]) 100% 0 no-repeat; height: 43px; width: 153px; padding-bottom: 5px; } #footer-left { float: left; margin-left: 45px; text-align: center; } #footer-right { float: right; margin-right: 230px; } #page-footer { height: 75px; } #uco_linkedin a{ background: url([[pix:theme|icon_linkedin]]) 100% 0 no-repeat; float: left; height: 21px; width: 21px; padding: 3px; } #uco_twitter a{ background: url([[pix:theme|icon_twitter]]) 100% 0 no-repeat; float: left; height: 21px; width: 21px; padding: 3px; } #uco_facebook a{ background: url([[pix:theme|icon_facebook]]) 100% 0 no-repeat; float: left; height: 21px; width: 21px; padding: 3px; } #uco_rss a{ background: url([[pix:theme|icon_rss]]) 100% 0 no-repeat; float: left; height: 21px; width: 21px; padding: 3px; } #uco_flickr a{ background: url([[pix:theme|icon_flickr]]) 100% 0 no-repeat; float: left; height: 21px;


25

width: 21px; padding: 3px; } #uco_youtube a{ background: url([[pix:theme|icon_youtube]]) 100% 0 no-repeat; float: left; height: 21px; width: 21px; padding: 3px; } #uco_social{ text-align: center; width: 163px; height: 43px; } .userprofile { margin-left: 5px; } table.quizreviewsummary { width: 95%; } .que .content { width: 82%; } @media (max-width: 360px) { #page { width: 360px; padding-top: 0; } .layout-option-noheader #page-header, .layout-option-nonavbar #page-navbar, .layout-option-nofooter #page-footer, .layout-option-nocourseheader .course-content-header, .layout-option-nocoursefooter .course-content-footer { display: none; } #colum1 { width: 360px; } #colum2 { width: 360px; } #page-navbar { display: none; } #region-blocks{ width: 360px; } #colum1 { float: none; } #colum2 { float: none; } #page-content { background: url([[pix:theme|bg_all_mobile]]) repeat-y; width: 360px; } #page-header { width: 360px; } .container-fluid { width: 360px; } .block { margin-left: 3px; width: 360px; } .block .header h2 { width: 277px; } #region-logo { height: 130px; margin-left: 90px; } #region-banner { margin-left: 100px; }


26

#region-main { width: 360px; margin-right: 0px; } #page-content { padding-top: 0px; width: 360px; } .row-fluid { width: 100%; } .container-fluid { padding-left: 0; } .navbar-fixed-top { margin-bottom: 0; } #page-navbar { width: 338px; } .course-content { width: 360px; } #page-footer { width: 360px; } #footer-right { margin-right: 10px; } div[role=main] { background-color: #fff; width: 343px; margin-left: 7px; } #footer-left { display: none; } #footer-right { float: left; margin-left: 25px; } } @media (max-width: 768px) { #page-header { width: 760px; } #page { width: 760px; padding-top: 0; } #region-main { width: 463px; margin-right: 0px; } #page-content { padding-top: 0px; width: 765px; } .container-fluid { padding-left: 0; } .navbar-fixed-top { margin-bottom: 0; } #region-bs-main-and-pre { width: 713px; } #page-navbar {width: 510px; } .course-content {width: 520px; } #site-news-forum {width: 520px; } #page-footer { width: 759px; } #footer-right { margin-right: 125px; } }


27

4.8. Javascript Con respecto a la parte dinámica del front-end Moodle incorpora una serie de frameworks los cuales son:

Bootstrap (desarrollado por Twitter), dicho framework nos facilita el desarrollo de aplicaciones responsitive (web que se adaptan a cualquier dispositivo ya sea sobremesa, smartphone, tablet, ...). Para ello se cuenta con un theme llamado bootstrapbase. Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto. Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS. El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin. Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada. Sistema de cuadrilla y diseño sensible Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente. Entendiendo la hoja de estilo CSS Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios. Componentes re-usables En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso. Plug-ins de JavaScript Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.


28

El framework o librería YUI (Yahoo! User Interface) es un conjunto de utilidades y controles escritos en JavaScript que se utilizan para crear aplicaciones web dinámicas complejas. Además, la librería YUI incluye varias utilidades relacionadas con CSS, por lo que también se considera un framework CSS.

La biblioteca se compone de seis componentes: Núcleo: El núcleo de YUI es un ligero conjunto de herramientas para manejar eventos y manipular el árbol DOM.

o YAHOO Global Object: Los Objetos Globales Yahoo contienen utilidades y otras infraestructuras base para la biblioteca.

o Dom Collection: Ayuda para la manipulación del árbol DOM, incluyendo posicionamiento de elementos y gestión de estilos CSS.

o Event Utility: Permite acceder de forma segura y sencilla a los eventos de un navegador web y, mediante el objeto Custom Event, publicar y suscribirse a eventos customizados.

Utilidades:

o Animation: Ayuda a crear efectos animados. o Browser History Manager: Ayuda complementaria para el botón Atrás y la gestión de

Marcadores/Favoritos de los navegadores web. o Connection Manager: Ayuda para manejar el objeto XMLHttpRequest. o Cookie: Permite gestionar las cookies. o DataSource: Proporciona una interfaz común para que otros componentes puedan

interactuar con diferentes tipos de datos. o Drag and Drop: Facilita la creación de eventos y elementos que pueden ser arrastrados. o Element: Proporciona una capa para los elementos que facilita el añadido de escuchadores,

manipulación del árbol DOM y atributos 'get' y 'set'. o Get: La utilidad Get soporta la carga asíncrona de datos y archivos de estilos CSS externos. o ImageLoader: Permite aplazar la carga de imágenes que no son visibles durante la carga de

la página, proporcionando un aumento del rendimiento. o JSON: Proporciona métodos para el tratamiento de datos JSON. Estos métodos están

basados en el trabajo de Douglas Crockford. o Resize: Permite redimensionar los elementos HTML. o Selector: Permite referenciar elementos HTML mediante la sintaxis CSS3. o YUI Loader: Es un cargador del lado cliente que permite la carga de forma dinámica de

cualquier componente y dependencia de la biblioteca al vuelo. Controles:

o AutoComplete: Proporciona la función de auto completado (lista de sugeridos) para los usuarios. Soporta varios formatos de datos, tanto del lado cliente como del lado servidor (vía XMLHttpRequest).

o Button: Permite la creación de botones gráficos que funcionan como un botón tradicional en HTML.

o Calendar: Un calendario gráfico y de control dinámico. o Charts: Permite la creación de diferentes tipos de gráficos (lineales, de barras, etc.). o Color Picker: Proporciona una interfaz gráfica para la selección de colores. o Container: Proporciona una interfaz gráfica como Tooltip, paneles, cuadros de diálogo, etc. o DataTable: Una potente herramienta para mostrar tablas tabulares en una página web.

Permite la ordenación de columnas tanto en el lado cliente como en el servidor, paginación, scroll, selección de filas, redimensionado de columnas y edición inline.

o ImageCropper: Proporciona una interfaz gráfica para recortar una imagen desde el lado cliente.

o Layout Manager. o Menú: Proporciona una API para la creación de menús flotantes, barras de menú y menús

de contexto. o Rich Text Editor: Es un sofisticado editor de texto rico modular del lado cliente y muy

configurable. o Slider: Proporciona un elemento genérico que permite al usuario elegir entre un rango de

valores.


29

o TabView: Permite la navegación entre pestañas, soportando la carga dinámica de contenido vía XMLHttpRequest.

o TreeView: Añade un árbol de contenido con nodos que se pueden contraer y expandir para navegar por los elementos.

o Uploader: Permite la carga de varios archivos mostrando una barra de progreso. Recursos CSS:

o CSS Base: Utilidades para la manipulación de la hoja de estilos de la forma clásica. o CSS Grids. o CSS Fonts. o CSS Reset.

Herramientas de desarrollo:

o Logger: Permite escribir mensajes de log en una consola, o utilizar las que proporcionan la extensión Firebug para el navegador Mozilla Firefox o la consola JavaScript del navegador Safari.

o Profiler: Para perfilar el código JavaScript. o ProfilerViewer: Usado con el anterior componente (Profiler) proporciona un perfilado visual. o YUI Test: Permite añadir unidades de testeo al código JavaScript.

Herramientas de construcción:

o YUI Compressor: Es un compresor de código JavaScript y CSS diseñado para proporcionar un resultado 100% seguro.

o jQuery es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con

los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Características:

Selección de elementos DOM.

Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.

Eventos.

Manipulación de la hoja de estilos CSS.

Efectos y animaciones.

Animaciones personalizadas.

AJAX.

Soporta extensiones.

Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc.

Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.5

En nuestro ejemplo debido a que el theme deriva del theme bootstrapbase no existe dicha carpeta ya que los toma de ella.


30

4.9. Imágenes (/pix/) Las imágenes en los theme se almacenan en una carpeta llamada pix, y para poder usarlas habría que distinguir entre su uso en las hojas de estilo o su uso en los layout. En las hojas de estilo se usa el siguiente formato: [[pix:nombre_theme|nombre_imagen]] Por ejemplo para establecer una imagen de background pondríamos lo siguiente: background: url([[pix:theme|banner]]) 100% 0 no-repeat; Como se puede observar le estamos indicando que vaya a la carpeta pix del theme y tome una imagen que se llama banner (no hay que indicar la extensión de la imagen ya que Moodle busca cualquier imagen con ese nombre sea cual sea la extensión, por tanto no se podrían añadir dos imágenes con mismo nombre y diferentes extensiones). En los layouts se usaría el siguiente formato: <?php echo $OUTPUT→pix_url('nombre_imagen', 'theme'); ?> Como en el caso anterior hay que indicarle el nombre de la imagen sin la extensión y el componente donde la tiene que buscar (el theme activo que es el mismo).


31

4.10. Servidor Web Para la instalación y posterior uso de la herramienta se precisan de los siguientes elementos:

Un sistema operativo. Cualquiera que corra el siguiente software, aunque la elección muy probablemente dependerá del desempeño que necesite y las habilidades que tenga disponibles. Linux y Windows son las elecciones más comunes y para las que existe buen soporte disponible. Si Usted puede elegir libremente, Linux es considerado generalmente como la plataforma óptima.

Un servidor web. Primariamente Apache o IIS . No está completamente probado (o soportado) pero debería de funcionar con lightttpd, nginx, cherokee, zeus y LiteSpeed. Moodle se rehusará a instalarse en cualquier otro servidor web diferente a los descritos. Su servidor web debe de estar configurado correctamente para servir archivos PHP. La versión no es crítica pero se le recomienda instalar el paquete con la versión más reciente que tenga disponible.

PHP - Moodle 2.7 requiere PHP 5.4.4 o superior. Para su correcto funcionamiento se requieren varias extensiones:

o La extensión iconv es necesaria. o La extensión mbstring es recomendada. o La extensión curl es necesaria (necesaria para servicios web y red). o La extensión openssl extension is recommended (necesaria para servicios web y red). o La extensión tokenizer extension is recommended. o La extensión xmlrpc extension is recommended (necesaria para servicios web y red). o La extensión soap extension is recommended (necesaria para servicios web). o La extensión ctype es necesaria. o La extensión zip es necesaria. o La extensión gd' es recomendada (necesaria para manipular imágenes). o La extensión simplexml es necesaria. o La extensión spl es necesaria. o La extensión pcre es necesaria. o La extensión dom es necesaria. o La extensión xml es necesaria. o La extensión intl es recomendada. o La extensión json es necesaria. o La extensión correcta para la base de datos, deberá ser igualmente requerida. o Otras extensiones pueden ser requeridas de manera opcional para el correcto

funcionamiento de todas las utilidades de su Moodle. En particular la Autenticación externa y matriculación (Inscripción) (ej. LDAP y la extensión de sockets para el servidor de Chat).

También tendremos que modificar la configuración de php (php.ini):

o register_globals DEBE estar OFF - (Característica eliminada en PHP 5.4. PHP 5.4 es un requisito mínimo para Moodle 2.7)

o safe_mode necesita estar OFF - (Característica eliminada en PHP 5.4. PHP 5.4 es un requisito mínimo para Moodle 2.7)

o memory_limit debería de ser al menos 64M (aunque algunas funcionalidades podrían no funcionar con tan poco). Se recomienda 128M. Las instalaciones más grandes podrían necesitar una configuración aun mayor.

o session.save_handler necesita configurarse a FILES. o magic_quotes_gpc debería ser OFF - (Característica eliminada en PHP 5.4. PHP 5.4 es un

requisito mínimo para Moodle 2.7) o magic_quotes_runtime necesita estar OFF. o file_uploads necesita ser ON. o session.auto_start necesita ser OFF. o session.bug_compat_warn necesita ser OFF - (Característica eliminada en PHP 5.4. PHP

5.4 es un requisito mínimo para Moodle 2.7) o La carpeta temp debe estar definida y tener permisos de escritura para su usuario

webserver o Compruebe la sección que muestra/registra (en Bitácoras) los errores. Asegurese de que

las configuraciones estén de acuerdo con el servidor utiilizado


32

o post_max_size y upload_max_filesize limitan el tamaño máximo de archivos que pueden ser subidos.

o Compruebe [mail function] y la sección de la base de datos elegida, para asegurar que coincidan con la configuración de su servidor.

Una base de datos. MySQL y PostgreSQL son las bases de datos para desarrollo primario, las más completamente probadas y las que tienen abundante documentación y soporte. MSSQL es completamente soportadas (tome nota de que los plugins opcionales pueden estar no probados con estas bases de datos) pero la documentación y ayuda en línea no son tan completas como con MySQL/PostgreSQL. La Base de Datos de Oracle no está completamente soportada y no está recomendada. Si tiene dudas use MySQL (tiene más documentación) o PostgreSQL (tiene mejor estabilidad y desempeño). Se necesitará la extensión de PHP apropiada (configurada si lo requiere) para su base de datos elegida.

o MySQL - versión mínima 5.1.33; Moodle 2.7 requiere MySQL 5.5.31 o MariaDB - versión mínima 5.3.5 (remplazo completo para MySQL) o PostgreSQL - versión mínima 8.3 o MSSQL - versión mínima 9.0 (no recomendada, API muy inestable) o Oracle - versión mínima 10.2 (no recomendada)

Como entorno de desarrollo y producción se ha elegido un servidor virtual (VPS) con la siguiente configuración:

Sistema operativo Debian 8.

Apache/2.4.10 (con la configuración anteriormente mencionada).

Mysql 5.5.47-0+deb8u1.

PHP 5.6.19-0+deb8u1 (con la configuración anteriormente mencionada).

Características Hardware: 1 vCore (2,4 Ghz), 2 GB RAM, HDD SSD 10 GB.


33

5. Bibliografía

http://www.capterra.com/learning-management-system-software/user-research

https://moodle.org/

https://es.wikipedia.org/wiki/Moodle

http://www.capterra.com/learning-management-system-software/user-research

https://moodle.org/

https://es.wikipedia.org/wiki/Moodle

Adaptación del Aspecto gráfico del Aula Virtual de la …³… · Debemos destacar que un theme...

Documents

Transcript of Adaptación del Aspecto gráfico del Aula Virtual de la …³… · Debemos destacar que un theme...