Día 18: Dar a su calendario un encabezado real

"Pero", ya le escucho quejarse, "mi calendario ya tiene un encabezado. Mira está ahí mismo, tiene el mes y el año justo arriba. Hasta está en negrita".

Pero si busca en el código fuente de su HTML, vera que su calendario no tiene un encabezado real. Lo más probable es que tenga una celda de la tabla definida para que ocupe la primera fila completa, con una regla de CSS para que aparezca en negrita. Esto es mucho más fácil de hacer con una etiqueta <caption>. Es más fácil de leer en su plantilla, ahorra unos cuantos bytes en su página, se ve exactamente igual en los navegadores visuales, y es más accesible.

Quién se beneficia?

  1. Marcus se beneficia. Lynx muestra el encabezado con la palabra "CAPTION:" (ENCABEZADO) en frente, dejando perfectamente claro que esta línea es el encabezado y no las cabeceras de columnas ni los datos de la tabla.
  2. Jackie se beneficia indirectamente. Usando una etiqueta de encabezado real (<caption>) aclara el camino para el uso de cabeceras de tablas reales, lo que beneficia a Jackie en formas que discutiremos mañana.

Como hacerlo

Solo puede hacer esto en herramientas de publicación que soportan calendarios (lo que descarta al Blogger) y que les permitan cambiar el HTML generado por los calendarios (lo que descarta al Manila).

En Movable Type, probablemente tiene una tabla para su calendario en su plantilla de Indice Principal (Main Index) que comienza así (si busca "calendarhead" probablemente lo encuentre):

<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td>
</tr>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

Deje la etiqueta de la tabla, pero reemplace la primera fila completa (<tr>) con una etiqueta de encabezado real <caption>, así:

<table border="0" cellspacing="4" cellpadding="0">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...

Deje el resto como está; lo arreglaremos mañana.

El atributo class en el encabezado (<caption>) es opcional; lo deje allí para que pueda funcionar como un reemplazo en la plantilla por defecto del Movable Type, que usa regla de CSS para hacer que el mes y el año se muestren en negrita. Usando la etiqueta <caption> como se muestra, su pagina deberá verse exactamente igual a como se veía anteriormente.

En Greymatter, el concepto es el mismo pero las etiquetas de la plantilla son diferentes:

<caption>{{monthword}} {{yearyear}}</caption>

De nuevo, puede cambiar el estilo visual del encabezado caption usando hojas de estilos en cascada, si así lo desea.

En Radio, el proceso es un poco más difícil, pero no imposible (Estoy endeudado con Tony Bowden por estas instrucciones).

  1. En Radio, primero abra la aplicación actual. En Windows, haga clic derecho en el pequeño icono de Radio en su área de notificación y seleccione "Open Radio" (Abrir Radio).
  2. 1. Bajo el menú "Tools" (Herramientas), seleccione "Developers" (Desarrolladores), luego "Jump..." (Saltar.)(Control+J). Salte a "system.verbs.builtins.radio.weblog.drawCalendar" (sin las comillas).
  3. Ahora vaya al menú "Edit" (Edición), "Find and Replace" (Buscar y Reemplazar), "Find..." (Buscar.)(Control+F) y busque "hCalendarTable". Esto debe revelar el bloque de código que dibuja la etiqueta de tabla (<table>) inicial y el encabezado falso del calendario.

  4. Cambie la ultima línea de ese bloque (que escribe la variable monthYearString en una etiqueta de fila de tabla <tr> a esto:

    añada ("<caption>" + monthYearString + "</caption>")

  5. Cierre la ventana. Le preguntará si desea compilar los cambios, elija que si.

  6. Si quiere, puede aplicar estilos a este encabezado. Vaya a su plantilla de Pagina de Inicio (Home Page Template) (en la pagina de Preferencias) y añada estilos al encabezado caption. Estos son los que yo uso. En el lugar en que mi sección de <style> contenía esto:

    body, td, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

    Ahora contiene esto:

    body, td, p, caption {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }

caption {
  text-align: center;
  font-weight: bold;
}

Lectura añadida

 
<< Día 17: Definir acrónimos | Contenido | Día 19: Usar cabeceras de tabla reales >>