PBS-1.1 - htitle

Agregar a favoritos

0 Comentarios

Posteado hace 1528 días en:

Una vez que tenemos el esqueleto de la bitácora vamos a ver el primer bloque que aparece.
Este bloque es el que contiene el titulo, el eslogan y una lista desordenada con enlaces de ayuda para la navegación.

Los enlaces de ayuda para la navegación son bastantes importantes con ellos nos ahorramos el crear una pagina alternativa y facilitamos el contenido en un navegador especializado, por ejemplo un navegador para ciegos.
También conseguimos ver nuestra pagina en un móvil vía wap, con estos enlaces accederemos fácilmente sin tener que hacer un scroll enorme en el móvil.


<div id="htitle">
<h1><a href="/" title="Volver al Weblog"><span>Plantilla maestra</span></a></h1>
<h2><span>Una nueva forma de ver un BLOG</span></h2>
<ul id="navigation">
<li><a href="#content" title="Ver Anotaciones" accesskey="1">Pasar de los marcadores</a></li>
<li><a href="#menu" title="Ir al menu" accesskey="2">Pasar del contenido</a></li>
<li><a href="#fcredits" title="Ir al final de todo" accesskey="3">Pasar de todo</a></li>
</ul>
</div>

Utilizamos títulos en orden de preferencia, primero un h1 como el mas importante y contiene un enlace a nuestro a la pagina inicial del weblog, en un segundo repaso veremos si es bueno o no un identificador, por ahora creo que no.
Seguido vemos un h2, un titular mas pequeño, y por ultimo una lista desordenada que ya dije anteriormente, en esta lista hay tres tipos de enlaces como el contenido, el menú y los créditos, con estos tres enlaces hemos resuelto casi toda la navegación, y si veis mas detenidamente hemos añadido unos acceskeys a dichos enlaces para poder navegar con el teclado, con un poquito de suerte no tendrás que usar el ratón con esta plantilla ;P.

Por ultimo hemos incluido la etiqueta span dentro del h1 y h2 para tener un mayor control de ellos y así poderlos ocultar sin el mayo esfuerzo, quien sabe a lo mejor utilizáis una imagen de fondo.