Manual Tcnico

1.9.13

INDICE
CONFIGURACION DE UNA PLANTILLA ................................................................................................. 3

ENCABEZADO/header ..................................................................................................................... 4

PIE DE PGINA/footer ..................................................................................................................... 6

CUERPO DE PAGINA/Body............................................................................................................... 7

CONFIGURACION DE UNA PLANTILLA

Lo primero que debemos hacer es ubicar donde se encuentra la plantilla que esta utilizando la plataforma moodle. La ruta a seguir es la siguiente: Dentro de la carpeta de moodle debemos darle doble clic y nos aparecer todos los archivos y carpetas que utiliza moodle. Pero la que nos interesa es la carpeta que dice theme.

En esta carpeta se encuentran todas las platillas que podemos utilizar en nuestra plataforma unas plantillas o temas ya las trae por defecto. Si queremos utilizar otra plantilla que hemos bajado de internet la debemos poner es esta carpeta.

Nuestra plantilla o tema fue descargado de la siguiente pgina http://moodle.org/mod/data/view.php?d=26 en esta pagina se encuentran todas las plantillas realizadas por otros autores. Tenemos que tener cuidado al seleccionar nuestra tema ya que cada platilla es utilizada para diferentes versiones de moodle puede ser (versin 1.9 o 2.0 etc..). En este caso nos agrad mucho la opcin de Dark Blue ya que tiene una buena administracin de los contenidos de moodle y se puede utilizar para la versin 1.9. Solo debemos dar clic en descargar.

Nos descargara un archivo comprimido Este archivo lo descomprimiremos y los colamos en la carpeta de theme que se menciono anteriormente.

En esta carpeta se muestran todos los archivos de la plantilla que seleccionamos. Los archivos pueden ser de tipo (HTML, PHP, CSS e imgenes). Para nuestro caso solo seleccionaremos los archivos que se modificaron as como las imgenes que se generaron.

Primero analizaremos los archivos HTML los cuales manejan el encabezado y el pie de pgina.

Las imgenes que utilizaremos a continuacin se encuentran en la carpeta

ENCABEZADO/header

El archivo header.html se encuentra el diseo lgico de como va a estar diseado nuestro encabezado. Como vemos este archivo muestra solo div que son los estilos que se pueden manejar en el encabezado.

En el cdigo de header se modifico el encabezado que se encuentra en la parte superior en color azul fuerte. En esta lnea de cdigo nos muestra la los dos colores que se utilizaran en nuestro encabezado de nuestra pagina.

La imagen lo que va a realizar es estar repitiendo esa imagen hasta que se a complete nuestro encabezado la imagen es la que se muestra a lado.

Los div que se modificaron son los que estn subrayas en el cdigo:

Estos div son mandados a traer desde el archivo de estilo, este se encuentra en la carpeta de la plantilla y tiene por nombre

En este archivo se encuentran todos los estilos y diseos que se utilizan en la plantilla. En este estilo se puede manejar los, mrgenes y tamao de nuestro logotipo (e-learning). Se maneja tambin la fuente en cuanto al color, y tamao.

En este cdigo encontraremos el margen (izquierdo y derecho), tamao (ancho y alto) todos estos estilo pertenecen al encabezado principal de nuestro encabezado.

En esta lnea de cdigo se inserto una imagen nueva. Tiene la funcin de se posicione en el encabezado azul fuerte, y cada vez que se realice una nueva tarea o actividad dentro de la plataforma esto va a hacer que se diferencie cada tarea en el encabezado.

PIE DE PGINA/footer

Donde se encuentra el cdigo de nuestro pie de pgina es el siguiente archivo Nos mostrara el siguiente cdigo, el cual esta compuesto por divs. Nosotros creamos un div se llama logo especialmente para nuestra imagen de Pro-Innovacin.

Cremamos estilos para animar nuestro enlace www.pro-innovacion.com..

Los estilos que se utilizan dentro de header se encuentran en el archivo Dentro de este archivo encontraremos los divs estos tiene los estilos que se utilizan en nuestro encabezado. Como es la imagen que se muestra en el encabezado de color azul y se llama footback. Esta se va a colocar hasta la parte de debajo de nuestra pagina con el margen y tamao que queremos.

Este div los creamos exclusivamente para colocar nuestra imagen de Pro-Innovacin. En este estilo tiene los atributos del margen y en que parte de nuestro pie de pgina se colocara.

La imagen que se colocara en nuestra pgina es la siguiente.

CUERPO DE PAGINA/Body

El cdigo de nuestro cuerpo/body se encuentra dispersos en la hoja de estilos

El siguiente cdigo muestra las pestaas que se colocan a los lados de la plantillas estn se encuentran en color azul claro. Este estilo muestra la posicin donde se debe de colocar.

El estilo (.sideblock a) sirve para poner a cada pestaa el tipo de fuente de queremos a si como el tamao de la letra.

El estilo (left-column .sideblock .header) esta insertando la pestaa que se muestra de lado izquierdo de la pantalla.

El cdigo que se muestra es para colocar la pestaa azul que se muestra de lado derecho se la pantalla. Este estilo tiene la posicin donde se va a colocar la imagen as como el tamao permitido.

Este tipo de estilo realiza una accin de rellenar el cuadro de tarea de conde se va a colocara la pestaa que creamos para que le de una mejor vista.

El siguiente cdigo se encuentra en el archivo header.php. En este solo nos muestra la imagen que va a colocar en la pestaa que ve en la parte superior del navegador.

La imagen se encuentra en la carpeta principal de nuestra plantilla.