Día 27: Usar encabezados reales

Piense en su sitio de Internet como un esquema. El nivel superior es rotulado de acuerdo al nombre de su sitio. En su página de inicio, enlista entradas de varios días. Así que el segundo nivel es rotulado por sus descripciones de cada fecha: "Martes, 16 de Julio, 2002", o algo similar. En cada día, hace múltiples apuntes, que puede que tengan su propio titulo. Si es así, entonces tiene un tercer nivel, rotulado por los títulos de los apuntes individuales.

Ahora marque su sitio de Internet como un esquema, usando etiquetas de encabezados reales <h1>, <h2>, <h3>. Los lectores de pantalla dependen de estas etiquetas para interpretar la estructura de sus páginas. Sus páginas tienen una estructura, pero sin las etiquetas de encabezados correctas, los lectores de pantalla no pueden encontrarla. En instantes, les mostraré como usar CSS para hacer que sus encabezados se vean iguales en los navegadores visuales que con cualquier monstruosidad basada en la etiqueta <font> que esté usando actualmente.

Quién se beneficia?

  1. Jackie se beneficia. Tan pronto como Jackie llega a su página, JAWS anuncia que tiene un cierto número de vínculos y de encabezados. Jackie puede presionar INSERT+F6 en el teclado para escuchar todos los encabezados de su página, o CTRL+INSERT+ENTER para navegar rápidamente a través de su página saltando de encabezado a encabezado.
  2. Michael se beneficia. En Opera, puede usar la tecla S para saltar al próximo encabezado, o la tecla W para saltar al anterior.
  3. Google se beneficia. Google aprecia una página bien estructurada, y evalúa de manera más alta las palabras clave cuando aparecen en encabezados reales (Otra razón más para escribir títulos de apuntes bien formados).

Como hacerlo: Movable Type

  1. Defina los estilos para el logo de si sitio. En su plantilla Stylesheet (styles-sites.css), añada las siguientes líneas:

    h1, h2, h3 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 20px;
  font-weight: normal;
}

/*/*/a{}
h1 {font-size: 100%}
/* */

  2. Defina el logo de su sitio usando una etiqueta <h1>. En sus 4 plantillas principales (Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), busque esto:

    <div id="banner">
<$MTBlogName$><br />

    Y reemplácelo por esto:

    <div id="banner">
<h1><$MTBlogName$></h1>

  3. Defina sus encabezados de fecha usando etiquetas <h2>.Ya hemos definido una clase para estas, así que no necesitaremos hacer ningún cambio en la hoja de estilos; silo cambiaremos la etiqueta. En sus 4 plantillas principales, busque esto:

    <div class="date">	
<$MTEntryDate format="%B %d, %Y"$>
</div>

    Y reemplácelo con esto:

    <h2 class="date">	
<$MTEntryDate format="%B %d, %Y"$>
</h2>

  4. Defina los títulos de sus apuntes usando etiquetas <h3>. Nuevamente, esto involucra solo el cambio de la etiqueta, no la hoja de estilos. En sus 4 plantillas principales, busque esto:

    <span class="title"><$MTEntryTitle$></span>

    Y reemplácelo con esto:

    <h3 class="title"><$MTEntryTitle$></h3>

Como hacerlo: Radio

  1. Defina sus estilos de encabezado. Los temas por defecto de Radio no usan etiquetas de encabezados reales, así que necesitaremos modificar estos estilos manualmente (Ajustados para esto, pero estos ejemplos deben hacer que su página se vea igual que como se veía antes en los navegadores visuales).

    Precisamente antes de comenzar, busque "h2 {". en su Plantilla de Página de Inicio (Home Page Template). Si encuentra una regla como esta, quítela; realmente no es usada en ningún sitio, y se interpondrá en nuestro camino:

    h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold
    }

  2. OK, ahora añada estos estilos, en cualquier lugar dentro de la sección <style> de su Plantilla de Página de Inicio (Home Page Template):

    h1, h2 {
  margin: 0;
  padding: 0;
}

h1 {font-size: 24px}
h2 {font-size: 13px}

/*/*/a{}
h1 {
  font-size: large;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-large;
}
html>body h1 {
  font-size: x-large;
}
h2 {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body h2 {
  font-size: small;
}
/* */

    Note que estamos usando tamaños de fuentes relativos para nuestros encabezados en navegadores que soportan tamaños relativos, y tamaños absolutos en Netscape 4. Esta técnica debe serle familiar; hicimos lo mismo ayer.

  3. Defina el encabezado para el nombre de su sitio. En su Plantilla de Página de Inicio (Home Page Template), busque "<%siteName%>" y encuentre una línea que luzca como esta:

    <font size="+2"><b><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></b></font>

    Y cámbiela por esta:

    <h1><a href="<%radio.macros.weblogUrl ()%>" style="color:Black; text-decoration:none"><%siteName%></a></h1>

  4. Defina el encabezado para sus encabezados de fecha. En su Plantilla de Día (Day Template), busque "<%longDate%>" y encuentre una línea como esta:

    <b><%longDate%></b>

    Y cámbiela por esta:

    <h2><%longDate%></h2>

Lectura añadida

 
<< Día 26: Usar tamaños de fuentes relativos | Contenido | Día 28: Designar los elementos de los formularios >>