Diferencia entre revisiones de «Conceptos básicos temas»

De MoodleDocs
Línea 96: Línea 96:


== El Tema Estándar ==
== El Tema Estándar ==
[[Imagen:Theme_standard.gif]]
Figura 1: El tema "estándar" con los archivos CSS
"styles_layout.css",
"styles_fonts.css",
"styles_color.css" y
"styles_moz.css".


== Cambios Pequeños ==
== Cambios Pequeños ==

Revisión del 12:20 17 feb 2006

¿Qué hay dentro de la carpeta de los temas?

La carpeta de los temas (Themes) contiene lo siguiente

pix/ 
config.php 
favicon.ico 
footer.html 
header.html 
styles.php 
styles_color.css
styles_fonts.css 
styles_layout.css 
styles_moz.css

La carpeta pix

Tiene todas las imágenes e iconos usados en el tema. Los temas 1.5 tienen imágenes para las pestañas y eventualmente para los gradientes. (todos los temas de Moodle 1.5 utilizan la carpeta pix.)

favicon.ico

Es el icono pequeño mostrado en los navegadores delante del URL (como en 1.4)

header.html y footer.html

Estos archivos contienen su logo, el login (nombre de usuario), el menú de entrada, la barra de navegación, el logo de moodle etc. Dentro de estos archivos usted puede dar a Moodle un aspecto propio para la cabecera y el pie de todas las páginas (como en 1.4)

Estas son las principales variables a usar en estos archivos:

$CFG  (objeto con todas las variables del sistema)
$THEME (objeto con todas las variables del tema actual en config.php)
$course (objeto del curso actual)
$meta (todos los meta tags, incluyendo las hojas de estilos)
$home (lógico)
$title (título de la página)
$heading (Cabecera de la página)
$navigation (la navegación en crudo, no la barra de navegación)
$navmenulist  (xhtml)
$menu (menú contextul o botón)

Solo en header.html

$direction (ltr o rtl)
$bodytags (tags que necesiten ser añadidos al body)

Solo en footer.html

$homelink (enlace a la "página principal" – página del curso actual o del sitio)
$loggedinas (cadena con el nombre del usuarios como enlace)
$performanceinfo (cadena con información personalizada)

Además ambos pueden contener código php, y todos los datos que puedan ser extraídos de la base de datos o el entorno.

styles.php

Tiene el mismo nombre que en 1.4 pero tiene otra función. Se llama de header.html y constituye el puente a los archivos CSS. Usted no necesita corregir nada (cambia la función para 1.5.)

config.php

Tiene también el mismo nombre que en 1.4 y otra tarea en 1.5. En este archivo se configura cómo los archivos del CSS trabajan juntos. Puede construir su tema sobre el estándar o sobre algún tema padre (parent), puede incluir o excluir varios archivos CSS.

Los Stylesheets (hojas de estilo)

Con Moodle 1.5 ha comenzado el trabajo para separar claramente el contenido de la página de la presentación de la página para una flexibilidad, una accesibilidad mejores y para un diseño más flexible de la página. Para darle la oportunidad de trabajar de manera relativamente fácil en pequeños cambios del color y de las fuentes, CSS se separa en tres archivos:

styles_layout.css 
styles_fonts.css 
styles_color.css

Además styles_moz.css contiene el formato específico de Firefox y de Mozilla, especialmente las esquinas redondeadas.

Archivos adicionales en la carpeta de los temas

Por último, los diseñadores de temas pueden proporcionar información sobre el tema y una vista previa. La vista previa se muestra como una previsualización en la página de configuración del tema, la info en el archivo README, después de que se haya seleccionado el tema.

README.html 
screenshot.jpg

Separación del contenido de la presentación

La capa contenido de la página se representa vía XHTML, la capa de presentación vía CSS. Para conectar la información que pertenece a ambas capas, se usan etiquetas XHTML y enlaces con nombre dentro de la página. Necesita sin duda muchos de ellos para dar estilo a aplicaciones complejas web como Moodle.

Hojas de estilo en cascada CSS

Los temas de Moodle usan hojas de estilo para describir el aspecto de Moodle controlando la disposición, las fuentes y los colores. Son construidos por un script PHP llamado "styles.php" en cada directorio de tema, y controlados por un archivo llamado "config.php" en el mismo lugar. Moodle tiene un tema "estándar" que es muy sencillo y proporciona una disposición básica para construir otros temas sobre él. Cada tema puede también tener un tema "padre", que será incluido antes del tema actual. Así pues, dependiendo de sus ajustes, usted puede tener hasta tres stylesheets para un tema:

  1. tema "estándar" – theme/standard/styles.php
  2. tema “padre” - theme/parenttheme/styles.php
  3. tema "principal" – theme/yourtheme/styles.php

Debido al carácter de conexión en cascada de CSS las definiciones en los últimos archivos pueden sobreescribir las definiciones en los archivos anteriores de CSS. Moodle hace uso extensivo del carácter de conexión en cascada de CSS y le da al diseñador del tema muchas oportunidades, desde el desarrollo fácil de temas basados en unos existentes con pocos cambios hasta el diseño de un aspecto totalmente único de Moodle con archivos nuevos CSS.

Los diseñadores del tema pueden definir y agregar cualquier stylesheets de CSS y llamarlo de cualquier manera según lo necesiten para este tema.

El Tema Estándar

Theme standard.gif

Figura 1: El tema "estándar" con los archivos CSS "styles_layout.css", "styles_fonts.css", "styles_color.css" y "styles_moz.css".

Cambios Pequeños

Disposición estándar – mezclada con CSS más propias fuentes y colores

Un tema usando un tema del padre (falsificado)

Un tema sin las dependencias estándares (falsificadas)

Más archivos básicos del CSS

Enlaces externos