HIPERESCRIBA

CSS Cascading Style Sheets (Hojas de Estilo en Cascada)

2012-01-27T02:01:00.000-03:00

Si bien las hojas de estilo son algo básico en el trabajo de HTML actual, es muy poca la gente que consigue recordar otras cosas básicas, como los nombres de sus partes y algunos datos útiles, como la especificidad.

Recuerdo haber leído algo acerca de los CSS cuando estaba navegando Cnet.com en algún minuto del año 96-8. Esa primera vez que vi las definiciones y un CSS descrito, no entendí nada. Para ser franco, tampoco entendía mucho el HTML así que la relación entre uno y otro me hacía menos sentido aún y las ventajas de tener la “presentación” separada de la “programación” para mi era sólo una frase retórica.

Durante el año 2001 ya estaba trabajando en una empresa de desarrollo de soluciones de ingeniería, lo que me permitió dedicarme tiempo completo a comprender tanto el HTML como el CSS. Claro, siempre desde el punto de vista de diseñador, que le interesa que las cosas funcionan y poco le importa el cómo. Sin embargo, a medida que ha pasado el tiempo, más interesante se vuelve el cómo y el conocerlo te entrega el poder de manipular las tecnologías a tu antojo. No saberlo, o denegar su importancia sólo te permite quedarte en la vereda del que se admira con un efecto a causa de su espectacularidad, obviando la belleza que implican las soluciones pequeñas que le dan sentido al comprender el sistema.

CSS – Reglas

Los CSS funcionan haciendo declaraciones, las declaraciones son reglas y cada una funciona en base a 2 partes:

Selector
Bloque de Declaración

Selector

Especifica a qué elementos del HTML va a dar estilo la regla.

Bloque de Declaración

Especifica el estilo que será aplicado a los elementos que la regla seleccione.
El bloque de declaración contiene una o más declaraciones.
Una declaración está compuesta por el nombre de una propiedad y un valor.

Ej:

Especificidad

Muchas veces, cuando se hacen las declaraciones de CSS y se está trabajando en una plataforma que no fue desarrollada inicialmente por uno, pasa que revisamos el efecto de nuestro trabajo en el navegador favorito y ¡Sorpresa! No hay nada. Revisamos y revisamos y la declaración está ok, el navegador es el apropiado, etc. Borramos el caché, reiniciamos el navegador. Incluso, reiniciamos el computador (absolutamente ridículo), y nada. ¿Por qué si mi declaración es la apropiada no estoy consiguiendo el efecto deseado?
La respuesta corta, posiblemente un problema de especificidad.
¿Qué?

En una declaración de CSS, la idea de “cascada”, es justamente el hecho de que la declaración hecha al principio, pueda ser complementada por posteriores adiciones o modificaciones a dicha declaración. Es decir, si en la línea 1 de mi hoja de estilo tengo la siguiente declaración:

p { color: red; font-weight: bold; }

Todo los párrafos de la página serán rojos y en negrita. Si en la línea 5 tengo esta declaración:

div p { color: green; font-size: 10px; }

Todos los párrafos de la página serán rojos y en negrita excepto los que vayan dentro de un DIV, que serán verdes, en negrita y tamaño 10 pixeles.

Hasta aquí no hay problema, la cascada funciona perfecto. Pero, qué pasa si la declaración de la línea 1 es:

#rojos p { color: red; font-weight: bold; }

Todos los párrafos serán rojos y en negrita cuando vayan dentro de un elemento con ID=rojos. Si ese ID es el de, para este ejemplo, el BODY, de tal manera que afecta a toda la página, entonces, cuando en la línea 5 coloquemos:

div p { color: green; font-size: 10px; }

Pasará que nuestro resultado será: texto de color rojo, en negrita y cuando vayan dentro de un DIV, será en tamaño 10px, pero ¡ROJOS!

¿Por qué? Especificidad.

A pesar de que según la cascada debería reemplazarse el valor “red” por el de “green”, sólo funciona cuando la especificidad de la declaración tiene valor predominante. En el caso de no ser así, por ser más específica la primera declaración, entonces la segunda es “recesiva”. ¿Cómo? Para entenderlo, los valores de las declaraciones se dan de esta forma:

# > .xxx > tag / ID > CLASE > ELEMENTO

(el ID de un elemento es mayor que la CLASE de un elemento y este a su vez, mayor que el ELEMENTO).

Si en un ID declaro color negro, en una CLASE declaro color verde y al ELEMENTO lo declaro con color azul, existiendo los 3 selectores, el color va a ser siempre NEGRO. Porque el ID predomina por sobre la CLASE y el ELEMENTO.

Para comprenderlo mejor, y poder calcular la especificidad cuando hay múltiples selectores, se usa la siguiente fórmula:

ELEMENTO = 1

CLASE = 10

ID = 100

De esta forma, en nuestro ejemplo del ID “rojos” sobre el párrafo, tenemos:

#rojos p { … }

ID + ELEMENTO = 100+1 = 101 (valor de especificidad)

En nuestro ejemplo comparativo siguiente, tenemos:

div p { … }

ELEMENTO + ELEMENTO = 1+1 = 2 (valor especificidad)

Por lo tanto, aunque nuestra segunda declaración, por selector debería haber pintado de verde todos los párrafos dentro de los DIV, por tener un valor de especificidad menor que la declaración anterior, en el conflicto gana dicha declaración. El conflicto no es en el tamaño ni en las negritas. El conflicto es en el color. La declaración 1 gana con 101 puntos contra 2 de especificidad de la segunda declaración.

Las declaraciones con muchos selectores son más difíciles de modificar cuando se está realizando un proyecto ajeno y cuesta encontrarlas de manera rápida. Por lo general, se descubren cuando se trata de modificar un ELEMENTO y ningún acercamiento parece afectarlo. Lo común es hacer una búsqueda en el CSS y podremos descubrir si existe una especificidad muy alta para algún ELEMENTO.

Ej:

ul li { … } = 2

ul ul li { … } = 3

ul.menu ul ul li { … } = 14

#main ul.menu ul ul li { … } = 114

#main.top ul.menu ul ul li { … } = 124

¡Happy Coding!

Technorati Tags: clases,html5,css3,css,html,estilos,cascada,selector,elementos,id

Reglas de Contención en HTML

2012-01-21T05:34:00.000-03:00

Suena raro. Pero tener una leve idea de qué significa puede ayudar desde el inicio de un proyecto a evitar cometer errores que invalidan las páginas una vez que continuamos el desarrollo.

Hay 3 tipos de elementos más o menos claros en la estructura del HTML:

Block Elements (elementos de bloque).
Inline Elements (elementos en línea).
Paragraphs (párrafos).

Los “Block Elements” se caracterizan porque ocupan todo el espacio horizontal disponible al ser usados (y no declarar su ancho) y, aunque tengan una sola letra en su interior, producen que cualquier elemento puesto a su lado, quede en la línea siguiente, aún cuando el elemento puesto sea un “Inline Element”. En resumen, es como agregar un “break” antes y después del elemento.

Los “Block Elements” característicos en HTML + HTML5* son:

Selector	Uso en HTML
<article>*	Contenido Artículo
<aside>*	Contenido Aparte
<blockquote>	Cita Larga
<body>	Cuerpo de Página
<br>	Salto de Línea
<button>	Botón
<canvas>*	Área de Dibujo
<caption>	Table Caption
<col>	Columna de Tabla
<colgroup>	Grupo de Columnas de Tabla
<dd>	Descripción de Definición
<div>	División
<dl>	Lista de Definiciones
<dt>	Término de Definición
<embed>	Contenido Externo
<fieldset>	Etiqueta de Set de Campos
<figcaption>*	Figure Caption
<figure>*	Groups Media Content and Caption
<footer>*	Sección o Pie de Página
<form>	Formulario de Entrada
<h1–6>	Niveles de Encabezado 1–6
<header>*	Sección o Encabezado de Página
<hgroup>*	Grupos de Encabezados de Información
<hr>	Regla Horizontal
<li>	Ítem de Lista
<map>	Mapa de Imagen
<object>	Objeto Embebido
<ol>	Lista Ordenada
<output>*	Formulario de Salida
<p>	Párrafo
<pre>	Texto Preformateado
<progress>*	Muestra de Progreso de una tarea que consume tiempo
<section>*	Sección en una Página Web
<table>	Tabla
<tbody>	Cuerpo de Tabla
<textarea>	Área de Entrada de Texto de Formulario
<tfoot>	Pie de Tabla
<th>	Encabezado de Tabla
<thead>	Encabezado de Tabla
<tr>	Fila de Tabla
<ul>	Lista Desordenada
<video>*	Reproductor de Video

Luego, están los “Inline Elements” (no se si elementos en línea me suena bien), que no tienen saltos de línea antes ni después, es decir, no tienen “breaks” asociados al elemento y se pueden poner de forma adyacente (además no ocupan todo el ancho de lugar donde se encuentran). Son:

Selector	Uso en HTML
<a>	Enlace Anclado
<abbr>	Abreviación
<address>	Dirección Física
<area>	Área en un Mapa de Imagen
<audio>*	Contenido de Sonido
<bm>	Texto en Negrita
<cite>	Cita Corta
<code>	Texto de Código
<del>	Texto Borrado
<details>*	Detalles de un Elemento
<dfn>	Termino Definido
<command>*	Botón de Comando
<datalist>*	Lista Drop-Down
<em>	Énfasis
<font>	Apariencia de la Fuente
<i>	Itálica
<iframe>	Sub-Ventana en Línea
<img>	Imagen Embebida
<input>	Campo de Ingreso de Datos
<ins>	Texto Inserto
<kbd>	Texto de Teclado
<label>	Etiqueta para un Elemento de Formulario
<legend>	Título en un Set de Campo
<link>	Referencia a un Recurso
<mark>*	Texto Marcado
<meter>*	Rango de Medida
<nav>*	Enlaces de Navegación
<optgroup>	Grupo de Opciones de Formulario
<option>	Una Opción de un Drop-Down
<q>	Cita Textual Corta
<small>	Impresión Pequeña
<select>	Lista Seleccionable
<source>*	Recurso de Medios
<span>	Formato de Estilo Localizado
<strong>	Énfasis Fuerte
<sub>	Subtexto
<summary>*	Encabezado de Detalles
<sup>	Supertexto
<tbody>	Cuerpo de Tabla
<td>	Dato de Tabla
<time>*	Fecha/Tiempo
<var>	Variable

Ahora, las reglas de contención.

Block Elements, pueden contener otros Block Elements e Inline Elements.
Block Elements, sólo pueden estar contenidos por otros Block Elements.
Inline Elements, sólo pueden contener Inline Elements.
Inline Elements, pueden ser contenidos tanto en Block como en Inline Elements.
Párrafos, son Block Elements, pero no pueden contener otros Block Elements.

Estas 5 reglas (y un buen editor WYSIWYG, con CODESENSE) evitarán errores que terminan transformando la página completa en un documento ilegal, claro, a menos que uses HTML5 que prácticamente se las arregla solo.

Happy Design & Code!!

Technorati Tags: block,element,elemento,bloque,inline,html5,tags

Doctypes y HTML5

2011-09-12T12:44:00.000-03:00

Un agrado. Trabajar ahora con HMTL5 nos da la magia de hacer una declaración para el Doctype de tamaño minúsculo.

Doctypes

Los Doctypes de trabajo anteriores pasaban por una cantidad increíble de declaraciones, desde los Doctypes estrictos (strict) y los relajados (transitional) e incluyendo los marcos (framesets). Aparte de ello debían contener la versión y tipo de documento al que se aludían, desde HTML4.01 al XHTML1 y XHTML1.1. Las distintas declaraciones incluían problemas graves por el simple hecho de agregar un elemento no permitido en el esquema (que obviamente está bien, pero visualizar la página en forma errónea en vez de no visualizarla es una opción que vale la pena pensarla). Incluso en ocasiones todo dependía del browser y cómo interpretaba la declaración del esquema.

Ahora eso se acabó.

Doctype HTML5

El Doctype de HTML5 es simple: <!DOCTYPE html>

Aparte de ser simple, las ventajas que tiene son muchas. Primero que nada es compatible con las versiones anteriores de los Doctypes. Segundo, es tan estricto o relajado dependiendo de lo estricto o relajado que sea uno con el código. Tercero, soporta el cierre de tags de XHTML. Cuarto, en los documentos de trabajo de HTML5 se incluyó una guía de qué debería pasar cuando se cometen ciertos errores en la sintaxis del HTML, por lo que los browsers muestran problemas consistentes con los mismos errores. Se acabó la época en que un browser mostraba el contenido bien porque ignoraba el error al visualizarlo, y en el otro todo se desarmaba porque sus instrucciones para el manejo de errores eran demasiado estrictas. Hoy, al fin, casi podemos hablar que tenemos estándares.

Salud por eso.

Technorati Tags: html5,html,doctypes,código

Mejoramiento Progresivo

2011-04-19T00:16:00.001-03:00

Resolviendo el problema de ser accesible a través de navegadores, a pesar de las versiones y el tiempo, sin dejar de mejorar.

(Partes pensadas en base a Developing with Web Standards, de John Allsopp)

La idea poder desarrollar y diseñar los sitios web de tal forma que se consiguiera la interoperabilidad a través de navegadores e incluso entre sus propias versiones (lamentablemente me refiero a IE más que a ningún otro en esto último), no es nada nuevo para quienes hemos estado metidos en este mundo del metalenguaje hipertextual de la red.

Recuerdo que alrededor del año 2000 la discusión se centraba en las incongruencias entre IE5 y Netscape 4, con IE6 haciendo entrada triunfal y destronando a sus competidores, tanto en la estandarización de sus métodos, como en la forma de llamarlos.

Hoy, el escenario ha cambiado tanto que en pocos años Microsoft ha sacado 3 versiones de su navegador, siendo la última uno de sus mejores logros, Firefox se ha posicionado como una opción muy atendible (sobre todo en su calidad de software libre de desarrollo no propietario), Chrome es ya un nuevo jugador en el mercado y Safari y Opera se mantienen como una buena opción, a una buena distancia del resto, pero no por ello menos merecedores de ser nombrados y tomados en cuenta.

Sin embargo, dichos cambios han demostrado que cada día es más importante tener en cuenta no sólo qué se diseña y cómo, sino que, de qué forma y hacia quiénes para producir qué. Para eso, hay que entender por qué hoy se habla tanto de algo que hasta hace poco era sólo campo para los especialistas en lenguas y para los diseñadores gráficos que se quedaron fascinados por el lenguaje y la comunicación: la semántica.

X/HTML

El HyperText Markup Language, publicado por Tim Berners Lee en 1991, fue creado con el fin de marcar y denotar internamente texto, principalmente, científico. La idea original fue marcar/denotar el significado y la estructura del documento (su semántica).

Las definiciones no ayudan mucho a comprender la idea, pero podríamos resumirla en que la semántica es el significado de varias partes del lenguaje y que para el caso del HTML, consiste en aplicar reglas de Sintaxis (reglas que los desarrolladores deben seguir para producir lenguaje válido y significativo), como que nunca puede haber una etiqueta sin cerrar (mediante los corchetes <h1></h1>) y que estas etiquetas dan un orden de significado respecto al contenido (semántica) de tal manera que, por ejemplo, nunca puede haber un encabezado H1 dentro de una sección iniciada por un texto H1 que, originalmente tenga menor valor en el documento que el H1 inicial. Me refiero a:

1) H1---H2---H3---H4
H2---H3
H3---H4---H5---H6

2) H1---H2---H3---H4
H1---H2
H6---H3---H1---H2

Donde 1) está correcto y 2) tiene errores en la semántica.

Mejoramiento Progresivo

Lo importante a la hora de comprender el Mejoramiento Progresivo, es que su propósito es definir, la información y funcionalidad del documento, comenzando desde un enfoque macro, para luego ir dando paso a mejoras en la apariencia y el comportamiento del documento relacionados con navegadores y herramientas más modernas: lo micro.

Los pasos que podríamos definir para ello son:

Revisar la Semántica del documento.
Revisar la Sintaxis del documento.
Aplicar la gráfica general básica, separada del lenguaje.
Mejorar la gráfica, diagramación y programación.
Revisar para no alterar lo conseguido en los puntos anteriores. Si se rompe volver al 4, si no, dar por terminado o pasar a un nuevo nivel de mejoramiento.

Para conseguir esto, actualmente contamos con dos aliados que han venido a salvar lo que antes, sólo podía conseguirse con tediosas horas de buscar scripts de java, hacks y cosas por el estilo. HTML5 y CSS3.

Si bien, ambos pertenecen a tecnologías que llevan años de desarrollo y que esperan estar listas (terminadas y absolutamente documentadas) en unos 5-6 años, no hay para qué esperar. Todos los navegadores en este momento presentan un nivel de funcionamiento bastante bueno de ambas. Su aplicación no choca con la tecnología anterior y se puede desarrollar fácilmente mediante el mejoramiento progresivo.

El futuro es brillante y no hay excusas para no abrazar la nueva paradoja. Si quieren esperar 5 años para recién comenzar a usar estas tecnologías y estos métodos de trabajo, adelante, pero no digan que nadie les avisó.

Technorati Tags: html,css,html5,css3,mejoramiento,progresivo

Nueva imagen.

2011-04-15T14:41:00.002-03:00

Este será el nuevo logo de Hiperescriba, ahora que me decidí a escribir de nuevo y que tengo de qué escribir también.

Reglas de Contención en HTML

2011-01-19T15:52:00.000-03:00

Block Elements: Headings, Paragraphs, Preformatted Text, Divs, Ordered Lists, Unordered Lists, Definition Lists.

Block Elements pueden contener otros Block Elements e Inline Elements.

Block Elements sólo pueden ser contenidos dentro de Block Elements.

Inline Elements sólo pueden contener Inline Elements.

Inline Elements pueden ser contenidos tanto en Block Elements como en Inline Elements.

Paragraphs son Block Elements, pero no pueden contener otros Block Elements.

Technorati Tags: HTML,reglas,contención,containment,rules,code

Moogrle II: Modificando el “tema”.

2009-08-26T14:46:00.001-04:00

Compartir! :

Technorati Tags: Moogrle,arquitectura,Diseño,Moodle

Blogger Labels: Moogrle,arquitectura,Diseño,Moodle

Ahora que está listo el CSS para modificar el tema que decidimos alterar, debemos tener claro el diseño que aplicaremos, así que si no hay diseño aún, es decir, colores, arquitectura, concepto, etc. debemos volver un paso atrás para generar la propuesta de diseño antes que ponerse a modificar sin ton ni son.

Diseño

Lamentablemente para este proyecto en especial (obviamente por ser el primero) no tenía muy clara la gráfica que debía aplicar, aunque más correcto sería decir que no tenía claro el CÓMO y DÓNDE en la gráfica para Moodle. A pesar de ello, la partida la había dado mi compañero de trabajo que realizó la propuesta de arquitectura de navegación y en base a ella comenzó mi trabajo de diseño. No quiero extenderme en el tema pues no viene al caso en este post. El resultado es el siguiente:

Obviamente se nota que de Moodle no entendíamos nada desde el punto de vista de ubicaciones, estructura, funcionamiento interno, etc. De todas formas conseguí llegar a algo bastante cercano.

Lo primero fue tratar de descubrir como agregaba ese lindo banner superior al sitio. En un comienzo pensé que la zona superior se armaba en un CSS. Pronto me di cuenta que dicha zona se arma completamente en un html llamado header.html que se encuentra en la carpeta STANDARD, PAGE y FLEX_MROOMS !!! Aquí es donde hay que revisar mediante la alteración de cada uno de los header.html para ver cuál correspondía al que estaba usando en realidad Moodle para fabricar la zona superior.

Banner Superior

Depués de las correspondientes pruebas descubrí el responsable de la zona superior, no sin antes darme cuenta de las cosas raras de Moodle.

En el tema de flex_mrooms me encontré conque el header.html decía:

       <?php

      /** * Theme Header * * @author Mark Nielsen * @version $Id$ **/

      /** * @package theme_cisco **/

      include($CFG->themedir.'/'.$THEME->parent.'/header.html');

      ?>

Lo que dice en esas líneas es que cuando vaya a ocupar el header.html, entonces use el de su padre. UF! como el padre de flex_mrooms es el tema page, fui a la carpeta del tema para revisar su header.html y bueno, ese SÍ era el que contenía las instrucciones de la zona superior. Debo decir que de todas formas, el header.html que está en STANDARD también tiene la información, pero cualquier cambio que hagan ahí no afectará el banner superior pues el tema PAGE se superpone a STANDARD. Lo mismo FLEX_MROOMS pero la diferencia es que este último le dice que use el de su padre.

Hay una pequeña sección donde están las instrucciones para comprender el armado del banner superior.

Luego de los encabezados de php viene esta línea:

      <div id="header-home" class="clearfix">

      <h1 class="headermain"><?php echo $heading ?></h1>

      <div class="headermenu"><?php echo $menu ?></div>

      </div>

Justo después de esto, uno puede darle forma al banner superior, ya sea por medio de imágenes, div’s, tablas, texto, etc. En el caso del sitio que estaba armando, la solución consistía en otro trozo de código que armé en html antes. Una vez colocado en el php del header.html hice la prueba para ver cómo se veía:

Se veía increíble. Al menos a mi me pareció, especialmente después del trabajo que me había dado saber dónde y cómo hacerlo. Lo importante es que la modificación no sólo debía hacerse ahí. En el mismo header.html y un poco más abajo de las instrucciones para este banner aparece otra información que es en el caso de que la página que carga PHP sea cualquier página que NO SEA EL HOME de Moodle.

Como resumen, tenemos que para cambiar el banner superior de Moodle, hay que modificar header.html, que se encuentra en el tema que está controlando el sitio, en este caso FLEX_MROOMS y por orden de él mismo, PAGE. Al modificar la zona correspondiente en el PHP de header.html, debemos recordar modificar lo mismo en dos partes, justo después de:

      <?php //Accessibility: 'headermain' is now H1,

      //see theme/standard/styles_layout.css: .headermain

      if ($home) {  // ESTO SÓLO APARECE SI ES EL HOME EL QUE SE ARMA

      ?>

      <div id="header-home" class="clearfix">

      <h1 class="headermain"><?php echo $heading ?></h1>

      <div class="headermenu"><?php echo $menu ?></div>

      </div>

y luego después de:

      <?php } else if ($heading) {  // ESTO APARECE SI ES CUALQUIER

      //OTRA PÁGINA CON ENCABEZADO

      ?>

      <div id="header" class="clearfix"><h1 class="headermain">

      <?php echo $heading ?></h1>

      <div class="headermenu"><?php echo $menu ?></div>

      </div>

Una vez hechos los cambios (¡cuidado al cerrar los tags!), el banner superior modificado aparecerá en todas las páginas de Moodle. A pesar de lo que ven, la funcionalidad no estaba lista y los botones tenían # para representar las funciones. Más tarde la funcionalidad de cada uno sería tarea del programador a cargo de ello. A continuación el código modificado para la dupla PAGE-FLEX_MROOMS (para el caso de que trabajen con STANDARD, es lo mismo, hacen los cambios en el header.html de STANDARD).

      <div id="page">

      <?php //Accessibility: 'headermain' is now H1,

      // see theme/standard/styles_layout.css: .headermain

            if ($home) {  // This is what gets printed on the home page only

      ?>

          <div id="header-home" class="clearfix">

              <h1 class="headermain"><?php echo $heading ?></h1>

              <div class="headermenu"><?php echo $menu ?></div>

      </div>

      <div id="menu_topbar">

        <a href="#home">

        <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_binicio_a.gif" 

      alt="inicio" class="img_topbar" width="29" height="14"  id="mtb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_binicio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bescritorio_a.gif" 

      alt="mi escritorio" class="img_topbar" width="59" height="14"  id="mtb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bescritorio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bfaq_a.gif" 

      alt="preguntas frecuentes" class="img_topbar" width="97" height="14" id="mtb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bfaq_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bsalircv_a.gif" 

      alt="salir del campus virtual" class="img_topbar" width="105" height="14" id="mtb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bsalircv_b.gif')" />

      </a>

      </div>

      <div id="menu_navbarbig">

      <div class="avatarsup">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_tutorial.jpg" 

      alt="TUTORIAL" class="avatarimg" width="132" height="54" />

      <a href="#">

      <img src="<?php echo $CFG->wwwroot .'/user/pix.php/'. $USER->id;?>/f1.jpg" 

      alt=".:AVATAR:." class="avatar1" width="48" height="48" />

      </a>

      </div>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mdatos_a.jpg" 

      alt="mis datos" class="nbbimg" width="50" height="54" id="mnb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mdatos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcursos_a.jpg" 

      alt="mis cursos" class="nbbimg" width="50" height="54" id="mnb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mcursos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mporta_a.jpg" 

      alt="mi portafolio" class="nbbimg" width="50" height="54" id="mnb03" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb03',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mporta_b.jpg')"  />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_magenda_a.jpg" 

      alt="mi agenda" class="nbbimg" width="50" height="54" id="mnb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_magenda_b.jpg')" />

      </a>

      <a href="#" target="_blank" >

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcorreo_a.jpg" 

      alt="mi correo" class="nbbimg" width="50" height="54" id="mnb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcorreo_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mbiblio_a.jpg" 

      alt="mi biblioteca" class="nbbimg" width="50" height="54" id="mnb06" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb06',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mbiblio_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mnotas_a.jpg" 

      alt="mis calificaciones" class="nbbimg" width="50" height="54" id="mnb07" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb07',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mnotas_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_cvirtual_a.jpg" 

      alt="mi buscador" class="nbbimg" width="50" height="54" id="mnb08" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb08',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_cvirtual_b.jpg')" />

      </a>

      </div>

      <div id="menu_topbar">

      <a href="#home">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_binicio_a.gif" 

      alt="inicio" class="img_topbar" width="29" height="14"  id="mtb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_binicio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bescritorio_a.gif" 

      alt="mi escritorio" class="img_topbar" width="59" height="14"  id="mtb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bescritorio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bfaq_a.gif" 

      alt="preguntas frecuentes" class="img_topbar" width="97" height="14" id="mtb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bfaq_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bsalircv_a.gif" 

      alt="salir del campus virtual" class="img_topbar" width="105" height="14" id="mtb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bsalircv_b.gif')" />

      </a>

      </div>

      <div id="menu_navbarbig">

      <div class="avatarsup">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_tutorial.jpg" 

      alt="TUTORIAL" class="avatarimg" width="132" height="54" />

      <a href="#">

      <img src="<?php echo $CFG->wwwroot .'/user/pix.php/'. $USER->id ?>/f1.jpg" 

      alt=".:AVATAR:." class="avatar1" width="48" height="48" />

      </a>

      </div>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mdatos_a.jpg" 

      alt="mis datos" class="nbbimg" width="50" height="54" id="mnb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mdatos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcursos_a.jpg" 

      alt="mis cursos" class="nbbimg" width="50" height="54" id="mnb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mcursos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mporta_a.jpg" 

      alt="mi portafolio" class="nbbimg" width="50" height="54" id="mnb03" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb03',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mporta_b.jpg')"  />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_magenda_a.jpg" 

      alt="mi agenda" class="nbbimg" width="50" height="54" id="mnb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_magenda_b.jpg')" />

      </a>

      <a href="#" target="_blank" >

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcorreo_a.jpg" 

      alt="mi correo" class="nbbimg" width="50" height="54" id="mnb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mcorreo_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mbiblio_a.jpg" 

      alt="mi biblioteca" class="nbbimg" width="50" height="54" id="mnb06" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb06',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mbiblio_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mnotas_a.jpg" 

      alt="mis calificaciones" class="nbbimg" width="50" height="54" id="mnb07" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb07',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mnotas_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_cvirtual_a.jpg" 

      alt="mi buscador" class="nbbimg" width="50" height="54" id="mnb08" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb08',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_cvirtual_b.jpg')" />

      </a>

      </div>

Con esto resuelto, al menos en parte (no les he dado los CSS de lo que hice en el header.html), podemos pasar justamente a lo más complejo, los CSS.

continúa…

Moogrle II: Modificando el “tema”.

2009-02-10T12:42:00.000-03:00

Compartir! :

Technorati Tags: Moogrle,arquitectura,Diseño,Moodle

Blogger Labels: Moogrle,arquitectura,Diseño,Moodle

Diseño

Lamentablemente para este proyecto en especial (obviamente por ser el primero) no tenía muy clara la gráfica que debía aplicar, aunque más correcto sería decir que no tenía claro el CÓMO y DÓNDE en la gráfica para Moodle. A pesar de ello, la partida la había dado mi compañero de trabajo que realizó la propuesta de arquitetura de navegación y en base a ella comenzó mi trabajo de diseño. No quiero extenderme en el tema pues no viene al caso en este post. El resultado es el siguiente:

Obviamente se nota que de Moodle no entendíamos nada desde el punto de vista de ubicaciones, estructura, funcionamiento interno, etc. De todas formas conseguí llegar a algo bastante cercano.

Banner Superior

Depués de las correspondientes pruebas descubrí el responsable de la zona superior, no sin antes darme cuenta de las cosas raras de Moodle.

En el tema de flex_mrooms me encontré conque el header.html decía:

       <?php

      /** * Theme Header * * @author Mark Nielsen * @version $Id$ **/

      /** * @package theme_cisco **/

      include($CFG->themedir.'/'.$THEME->parent.'/header.html');

      ?>

Hay una pequeña sección donde están las instrucciones para comprender el armado del banner superior.

Luego de los encabezados de php viene esta línea:

      <div id="header-home" class="clearfix">

      <h1 class="headermain"><?php echo $heading ?></h1>

      <div class="headermenu"><?php echo $menu ?></div>

      </div>

      <?php //Accessibility: 'headermain' is now H1,

      //see theme/standard/styles_layout.css: .headermain

      if ($home) {  // ESTO SÓLO APARECE SI ES EL HOME EL QUE SE ARMA

      ?>

      <div id="header-home" class="clearfix">

      <h1 class="headermain"><?php echo $heading ?></h1>

      <div class="headermenu"><?php echo $menu ?></div>

      </div>

y luego después de:

      <?php } else if ($heading) {  // ESTO APARECE SI ES CUALQUIER

      //OTRA PÁGINA CON ENCABEZADO

      ?>

      <div id="header" class="clearfix"><h1 class="headermain">

      <?php echo $heading ?></h1>

      <div class="headermenu"><?php echo $menu ?></div>

      </div>

      <div id="page">

      <?php //Accessibility: 'headermain' is now H1,

      // see theme/standard/styles_layout.css: .headermain

            if ($home) {  // This is what gets printed on the home page only

      ?>

          <div id="header-home" class="clearfix">

              <h1 class="headermain"><?php echo $heading ?></h1>

              <div class="headermenu"><?php echo $menu ?></div>

      </div>

      <div id="menu_topbar">

        <a href="#home">

        <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_binicio_a.gif" 

      alt="inicio" class="img_topbar" width="29" height="14"  id="mtb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_binicio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bescritorio_a.gif" 

      alt="mi escritorio" class="img_topbar" width="59" height="14"  id="mtb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bescritorio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bfaq_a.gif" 

      alt="preguntas frecuentes" class="img_topbar" width="97" height="14" id="mtb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bfaq_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bsalircv_a.gif" 

      alt="salir del campus virtual" class="img_topbar" width="105" height="14" id="mtb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bsalircv_b.gif')" />

      </a>

      </div>

      <div id="menu_navbarbig">

      <div class="avatarsup">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_tutorial.jpg" 

      alt="TUTORIAL" class="avatarimg" width="132" height="54" />

      <a href="#">

      <img src="<?php echo $CFG->wwwroot .'/user/pix.php/'. $USER->id;?>/f1.jpg" 

      alt=".:AVATAR:." class="avatar1" width="48" height="48" />

      </a>

      </div>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mdatos_a.jpg" 

      alt="mis datos" class="nbbimg" width="50" height="54" id="mnb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mdatos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcursos_a.jpg" 

      alt="mis cursos" class="nbbimg" width="50" height="54" id="mnb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mcursos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mporta_a.jpg" 

      alt="mi portafolio" class="nbbimg" width="50" height="54" id="mnb03" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb03',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mporta_b.jpg')"  />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_magenda_a.jpg" 

      alt="mi agenda" class="nbbimg" width="50" height="54" id="mnb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_magenda_b.jpg')" />

      </a>

      <a href="#" target="_blank" >

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcorreo_a.jpg" 

      alt="mi correo" class="nbbimg" width="50" height="54" id="mnb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcorreo_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mbiblio_a.jpg" 

      alt="mi biblioteca" class="nbbimg" width="50" height="54" id="mnb06" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb06',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mbiblio_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mnotas_a.jpg" 

      alt="mis calificaciones" class="nbbimg" width="50" height="54" id="mnb07" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb07',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mnotas_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_cvirtual_a.jpg" 

      alt="mi buscador" class="nbbimg" width="50" height="54" id="mnb08" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb08',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_cvirtual_b.jpg')" />

      </a>

      </div>

      <div id="menu_topbar">

      <a href="#home">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_binicio_a.gif" 

      alt="inicio" class="img_topbar" width="29" height="14"  id="mtb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_binicio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bescritorio_a.gif" 

      alt="mi escritorio" class="img_topbar" width="59" height="14"  id="mtb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bescritorio_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bfaq_a.gif" 

      alt="preguntas frecuentes" class="img_topbar" width="97" height="14" id="mtb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bfaq_b.gif')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_bsalircv_a.gif" 

      alt="salir del campus virtual" class="img_topbar" width="105" height="14" id="mtb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mtb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_bsalircv_b.gif')" />

      </a>

      </div>

      <div id="menu_navbarbig">

      <div class="avatarsup">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_tutorial.jpg" 

      alt="TUTORIAL" class="avatarimg" width="132" height="54" />

      <a href="#">

      <img src="<?php echo $CFG->wwwroot .'/user/pix.php/'. $USER->id ?>/f1.jpg" 

      alt=".:AVATAR:." class="avatar1" width="48" height="48" />

      </a>

      </div>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mdatos_a.jpg" 

      alt="mis datos" class="nbbimg" width="50" height="54" id="mnb01" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb01',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mdatos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcursos_a.jpg" 

      alt="mis cursos" class="nbbimg" width="50" height="54" id="mnb02" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb02',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mcursos_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mporta_a.jpg" 

      alt="mi portafolio" class="nbbimg" width="50" height="54" id="mnb03" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb03',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mporta_b.jpg')"  />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_magenda_a.jpg" 

      alt="mi agenda" class="nbbimg" width="50" height="54" id="mnb04" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb04',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_magenda_b.jpg')" />

      </a>

      <a href="#" target="_blank" >

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mcorreo_a.jpg" 

      alt="mi correo" class="nbbimg" width="50" height="54" id="mnb05" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb05',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mcorreo_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mbiblio_a.jpg" 

      alt="mi biblioteca" class="nbbimg" width="50" height="54" id="mnb06" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb06',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mbiblio_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_mnotas_a.jpg" 

      alt="mis calificaciones" class="nbbimg" width="50" height="54" id="mnb07" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb07',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_mnotas_b.jpg')" />

      </a>

      <a href="#">

      <img src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/b_cvirtual_a.jpg" 

      alt="mi buscador" class="nbbimg" width="50" height="54" id="mnb08" 

      onmouseout="FP_swapImgRestore()" 

      onmouseover="FP_swapImg(1,1,/*id*/'mnb08',/*url*/'<?php echo $CFG->themewww .'/'. current_theme() 

      ?>/pix/b_cvirtual_b.jpg')" />

      </a>

      </div>

Con esto resuelto, al menos en parte (no les he dado los CSS de lo que hice en el header.html), podemos pasar justamente a lo más complejo, los CSS.

continúa…

Moogre: Moodle y su sistema de “skins”

2009-02-03T12:48:00.001-03:00

Technorati Tags: Desarrollo,Moodle,CSS,PHP,Templates,Temas,Skins,plataforma,código

LiveJournal Tags: moodle,skins,temas,templates,css,php,código,plataforma,desarrollo

Llevo trabajando en Moodle desde hace aproximadamente 18 meses y gran parte de su implementación ha sido uno de los trabajos más complejos (léase enredado) que he hecho.

Inicialmente la idea del proyecto era producir un sitio de enseñanza a distancia, el fuerte de Moodle, y hacer todo el trabajo gráfico necesario para dejarlo accesible, usable y con una arquitectura clara.

La tarea de arquitectura de información corrió a cargo de Marcelo Mannarelli y la gráfica a cargo mio. El desarrollo inicial fue un poco lento a causa de la poca documentación de Moodle en lo que respecta a la comprensión de cómo funciona y de qué forma se puede manipular (y hasta qué punto). Sin embargo, el resultado fue bastante bueno, dando paso al inicio de la etapa de diseño.

“…Moodle y sus plantillas son un inescrutable enredo de contenedores y código que deja como moderno el <marque>.”

Hicimos un par de propuestas de diseño para ver hacia dónde apuntaba la visión gráfica de nuestra contraparte de marketing y tomaron una de las opciones como la ideal. Hasta aquí todo ok.

El desarrollo de la maqueta en html, paso previo a la adaptación al sistema de plantillas de Moodle, fue sin contratiempos y en unas semanas ya estabamos listos para iniciar el traspaso, confiando en que mi experiencia podría salvar cualquier percance. En ese momento fue cuando comencé a recolectar la información y me di cuenta que Moodle y sus plantillas son un inescrutable enredo de contenedores y código que deja como moderno el <marque>.

Ciertamente mi visión ha cambiado a medida que se ha desarrollado el proyecto, pero sigo pensando que Moodle tiene serios problemas de lógica en la forma en que arma sus plantillas y más aún, en el tipo de código que decide usar para establecer como base de su infraestructura a nivel del html.

Cargando…

Para partir tenemos las plantillas. El sistema se sustenta en código que hay que rastrear por kilómetros de módulos si lo que queremos es modificar el código con que Moodle construye los elementos de la página. Si queremos evitarnos este problema, al menos podemos echar mano de los CSS y de esta forma manipular la forma en que se ve casi todo en Moodle.

Empecemos por el principio. Moodle posee una carpeta llamada THEME. Dentro de ella se encuentran los “temas” que darán forma y color al sitio. Todo muy fácil si lo que queremos es ponerle un tema ya hecho. Si queremos hacer uno, lo mejor es tomar uno ya armado y modificarlo de acuerdo a nuestras necesidades, pues la cantidad de trabajo a dedicar para hacer un tema propio es demasiada y lo más seguro es que algo malo termine sucediendo en algún lado.

La documentación para modificar los estilos o generar un tema propio sin ser un maestro del php es nula. Por ello trataré de ser lo más claro para ayudar a quienes buscan darle al menos un estilo propio al sitio.

Primero que nada debemos saber dónde vamos a trabajar. Como dije antes, Moodle posee una carpeta llamada THEME en la cual ubica las plantillas para el sitio (aparte de imágenes y otros cachureos en los que pondremos atención después). La plantilla base de Moodle se llama: STANDARD. Dicha plantilla tiene lo básico para mostrarnos el sitio. Podemos trabajar sobre ella copiándola y haciendo los arreglos que necesitemos. Sin embargo, y para hacer las cosas menos complejas aún, podemos aprovechar el poder de los CSS y dejar la plantilla donde está y buscar un archivo: llamado config.php, que se encuentra donde mismo está la plantilla, es decir, THEMES/STANDARD/config.php .

En el archivo abierto, aparece en la primera línea de código después de los comentarios, algo como esto:

$THEME->sheets = array('standard');

Esta línea es de primera importancia pues le indica la hoja de estilo (CSS) que debe leer Moodle para construir la página. En este caso la hoja se llama standard.css.

Lo bueno de que sea un array, es que pueden asignarse más hojas de estilo a un sólo tema. Para ello agregamos el nombre de la hoja de estilo que queremos usar para desarrollar nuestro tema:

$THEME->sheets = array('standard', 'mi_tema');

Con esto, acabamos de decirle al tema Standard, que use la hoja de estilo standard.css y que luego, cargue la hoja llamada mi_tema.css. ¿Cuál es la importancia de ello? Que de ahora en adelante, todo lo que nosotros hagamos en mi_tema.css, va a superceder lo que indica standard.css, por lo que podemos ir tranquilamente modificando la plantilla base sin temor a que en algún minuto se nos olvide agregar un estilo mañoso que nos pueda desarmar la visual del sitio.

El siguiente paso es hacer una hoja de estilos llamada mi_tema.css en el editor que uno desee y luego grabarla en la carpeta THEME/STANDARD en la instalación local de Moodle (o en la online de prueba, como les apetezca). De aquí en adelante, manos a la obra.

Continua…

Arreglo para IE6 con Hover y Selects usando Suckerfish parte III

2009-01-20T17:33:00.002-03:00

Luego de que tuve el menú armado y choqué frente a los select tags de un form pasando por debajo de ellos en vez de encima, lo lógico era buscar una solución en los z-index de la página, pero sin ningún resultado.

Tuve que googlear, hasta que llegué a una solución que no sólo me permite hacer los menús y todo sino que además me permite darles transparencias que funcionan.

Primero que nada, el archivo que necesitamos agregar a lo que ya teníamos:

Código C.1

// Created a long, long time ago by Tanny O'Haley // Update history. // 24 Oct 2006 - Added to http://tanny.ica.com // 14 Jul 2006 - Modified the way the iframe is added to the DOM. // I no longer use innerHTML but use DOM methods. // 15 Sep 2006 - Added a check to see if the target element // onmouseout is contained in the onmouseout element. // If it is then I dont' remove the sfhover class. // I made use of the Microsoft proprietary // obj.contains() method. // Added check to make sure that the sfhover class is not already in // the li element. // sfHover = function() { // Support the standard nav without a class of nav. var el = document.getElementById("superior"); if(!/\bsuperior\b/.test(el.className) && el.tagName == "UL") setHover(el); // Find all unordered lists. var ieNavs = document.getElementsByTagName('ul'); for(i=0; i<ienavs.length; ul =" ieNavs[i];" ieuls =" superior.getElementsByTagName('ul');"> elements with <iframe>s for (j=0; j<ieuls.length; iemat="document.createElement('iframe');" protocol ="="" src="//0" src="" src="javascript:false" scrolling="no" frameborder="0" width="ieULs[j].offsetWidth+" height="ieULs[j].offsetHeight+" zindex="-1" zindex="101" ielis =" nav.getElementsByTagName('li');" i="0;" onmouseover="function()" onmouseout="function()" classname="this.className.replace('" ielis =" document.getElementById('nav').getElementsByTagName('li');" i="0;" onmouseover="function()" onmouseout="function()" classname="this.className.replace('" oselects="document.getElementsByTagName(" i="0;i<oSelects.length;i++)" oselects="document.getElementsByTagName(" i="0;i<oSelects.length;i++)" classname="oSelects[i].className.replace(">

Está modificación al javascript anterior permite que funcionen las cosas tal y cual pensábamos que deberían haber funcionado siempre, es decir, la lista pasa SOBRE el select tag de un form. Hay que tener dos cosas en mente:

Cambiar el texto SUPERIOR en todas las partes donde aparezca en el Javascript y agregar el id que uno le otorgó al menú, y
Cuidar que la función es sfHover y el CSS es sfhover

Ya con esto aprendido, hacer menús con suckerfish es una opción bastante útil y funcional. Espero les ayude.

Si tienen dudas o quieren ver ejemplos mejores o lo que sea, diríjanse al sitio de A list Apart, o al de Suckerfish y Son of Suckerfish.

Si no, no duden en contactarme.

Technorati Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

Windows Live Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

WordPress Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

Arreglo para IE6 con Hover y Selects usando SUckerfish parte II

2009-01-20T17:08:00.002-03:00

Lo primero sería implementar Suckerfish y así comenzar el desarrollo. Primero lo primero: La lista.

Código A.1

<ul> <li><a href="javascript:void(0)">Menu1</a> <ul> <li><a href="javascript:void(0)">Submenu 1.1</a></li> <li><a href="javascript:void(0)">Submenu 1.2</a></li> <li><a href="javascript:void(0)">Submenu 1.3</a> <ul> <li><a href="javascript:void(0)">Sub Submenu 1.3.1</a></li> </ul> </li> <li><a href="javascript:void(0)">Submenu 1.4</a></li> </ul> </li> <li><a href="javascript:void(0)">Menu 2</a> <ul> <li><a href="javascript:void(0)">Submenu 2.1</a></li> <li><a href="javascript:void(0)">Submenu 2.2</a></li> <li><a href="javascript:void(0)">Submenu 2.3</a></li> </ul> </li> <li><a href="javascript:void(0)">Menu 3</a></li> <li><a href="javascript:void(0)">Menu 4</a></li> <li><a href="javascript:void(0)">Menu 5</a></li> <li><a href="javascript:void(0)">Menu 6</a></li> </ul>

Este código se ve algo así:

Vista A.1

La idea es que todos los li que contengan los "menu X" se conviertan en la raiz del menú principal y los li contenidos en un ul dentro de un li "menu X" sean submenús del correspondiente "menu X".

¿Cómo lograrlo? CSS - Cascading Style Sheet - Hoja de Estilo

Primero modificamos la lista A.1 para que sea más fácil aplicar los estilos de la hoja de estilo:

Código B.1

<ul id="superior"> <li><a href="javascript:void(0)">Menu1</a> <ul> <li><a href="javascript:void(0)">Submenu 1.1</a></li> <li><a href="javascript:void(0)">Submenu 1.2</a></li> <li><a href="javascript:void(0)">Submenu 1.3</a> <ul> <li><a href="javascript:void(0)">Sub Submenu 1.3.1</a></li> </ul> </li> <li><a href="javascript:void(0)">Submenu 1.4</a></li> </ul> </li> <li><a href="javascript:void(0)">Menu 2</a> <ul> <li><a href="javascript:void(0)">Submenu 2.1</a></li> <li><a href="javascript:void(0)">Submenu 2.2</a></li> <li><a href="javascript:void(0)">Submenu 2.3</a></li> </ul> </li> <li><a href="javascript:void(0)">Menu 3</a></li> <li><a href="javascript:void(0)">Menu 4</a></li> <li><a href="javascript:void(0)">Menu 5</a></li> <li><a href="javascript:void(0)">Menu 6</a></li> </ul>

Y la hoja de estilos queda así:

CSS B.1

#superior { list-style-type:none; padding:0px; margin:0px; } #superior ul { list-style-type:none; padding:0px; margin:0px; } #superior li { float:left; background:#000000; margin:1px 0px 0px 0px; width:160px; height:16px; line-height:16px; } #superior li ul li { background:#666666; } #superior li ul li:hover, #superior li ul li.over { background:#444444; } #superior span { margin: 0px; padding: 0px; line-height:16px; height:16px; width: 160px; } /* for IE5.5 and IE6 only */ #superior li a { display:block; height:16px; line-height:16px; width:120px; text-decoration:none; text-align:center; color: #ffffff; } #superior li a table { position:absolute; left:0; top:-1px; border-collapse:collapse; width:0; height:0; } #superior :hover, #superior .over { color:#cccccc; position:relative; } #superior :hover > a, #superior .over > a { color:#cccccc; } #superior ul, #superior :hover ul ul, #superior .over ul ul, #superior :hover ul :hover ul ul, #superior .over ul .over ul ul { visibility:hidden; width:0px; height:0px; line-height:0px; overflow : hidden; } #superior :hover ul, #superior .over ul { visibility:visible; overflow:visible; position:absolute; height:auto; width:160px; left:0px; top:16px; background:url(transparent.gif); } /* the background image is for IE7 */

El menú se ve así ahora: Increíble no? Bueno lamentablemente esto necesita un pequeño truco en java para hacer que el estúpido IE6 entienda que al colocarme sobre una celda le estoy haciendo hover y por ende debería responder a una instrucción por el estilo. En el menú superior la captura es de Firefox por lo que no hay problema. En IE7 tampoco. El problema es IE6 (de ahí el título de este post). Para corregir su tontera, necesitamos usar el siguiente script (recordar colocarlo en la sección HEAD <head></head> del HTML):

SCRIPT B.1

Si se fijan, lo que hace el script es reemplazar dinámicamente los hover por una clase llamada over; en el CSS B.1, en cada li donde hay un hover, se duplica el selector CSS reemplazando hover en el duplicado, por over. O sea, donde dice: #superior li ul li:hover Agrego: (una coma) #superior li ul li.over De esta fácil forma, consigo que IE6 me muestre las acciones hover sobre celdas, inputs, selects, en fin lo que sea posible hacer hover.

Hasta aquí la funcionalidad de suckerfish está explicada o más o menos clara. Si tienen dudas o quieren ver ejemplos mejores o lo que sea, diríjanse al sitio de A list Apart, o al de Suckerfish y Son of Suckerfish.

Aún falta una cosa que corregir y que no es fácil de detectar hasta que colocas un menú suckerfish que despliega sobre un select y que al fin y al cabo de eso trataba inicialmente el post.

El desplegable del menú pasa por DEBAJO del select o input. ¿La causa? Una pifia de IE6 a la hora de leer las posiciones de los elementos y dejando siempre en la posición más alta los inputs y selects (y seguramente todo lo que sea un campo de un form).

En el siguiente, la solución a este problema.

Technorati Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

Windows Live Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

WordPress Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

Arreglo para IE6 con Hover y Selects usando Suckerfish I

2009-01-20T15:52:00.002-03:00

Ya sé que esto no tiene nada que ver con los alegatos de siempre pero seguramente va a ayudar a muchos a dejar de alegar contra Microcrap y el IE6. Muchos de Uds. se han encontrado que cuando crean un menú, basado en Suckerfish y Son of Suckerfish (menús basados en Listas, manejados por CSS y absolutamente accesibles), se topan con problemas a la hora de visualizarlos en IE6.

La primera corrección la dan en el mismo sitio del Suckerfish y consiste en un pequeño Javascript que ayuda a que el burro IE6 se de cuenta que al pasar sobre un elemento UL estoy haciendo HOVER, tal cual como al pasar por sobre un link (a:hover) [IE6 no lee hovers más que sobre un A].

Con esto podríamos quedarnos tranquilos y nunca caer en ningún problema y reírse de IE6. Sin embargo, si por alguna razón, alguien decidiera colocar un SELECT justo bajo (o al lado) del despliegue del menú Suckerfish, se percatará que ello hace aparecer los submenús ¡¡¡BAJO el SELECT!!! Como pueden ver, el DIV en gris queda BAJO el SELECT. Lo mismo pasa con el menú Suckerfish. Luego de hurguetear internet por cerca de 6 horas, conseguí descubrir entre un montón de basura y soluciones inoperantes, un sitio que tenía una implementación del año 2006: Tanny O'Haley's Weblog.

La solución era el Javascript pequeño que usaba el menú Suckerfish, más varias líneas de código donde, luego de identificar mediante el CLASS o el ID, el UL del menú, ejerce una solución con iframes (que otros ya han medio implementado y que no siempre funciona, les dije que probé todo), y funciona perfecto (dentro de lo que IE6 considera perfecto).

La solución consta de un poco de trabajo a nivel de código y de edición en el Javascript y en CSS y HTML... aunque es obvio ¿no?

En el siguiente post colocaré la primera parte que es echar a andar el menú suckerfish.

Technorati Tags: Hover,Selects,Suckerfish,menú,Listas,Javascript,SELECT,BAJO

Windows Live Tags: Hover,Selects,Suckerfish,menú,Listas,Javascript,SELECT,BAJO

WordPress Tags: Hover,Selects,Suckerfish,menú,Listas,Javascript,SELECT,BAJO

Bienvenidos!

2009-01-20T15:23:00.000-03:00

Desde aquí podré escribir más tranquilamente todo lo relacionado con código html, javascript, diseño, css, gráfica, arquitectura, implementación, cms’s, etc. y las soluciones que he ido encontrando para diversos problemas que se presentan en la vida diaria de un diseñador gráfico enfocado a la web.

Espero que le puedan sacar provecho y les sea de utilidad.

Saludos!

Technorati Tags: usabilidad,accesibilidad,información,Bienvenidos,arquitectura,implementación,diseñador

Windows Live Tags: usabilidad,accesibilidad,información,Bienvenidos,arquitectura,implementación,diseñador