IceBeat

Modifique la plantilla hace unos días pero no dije nada de su actualización, he introducido los acceskeys en la parte de los comentarios.

Lista de acceskeys hasta ahora:

• 1 . Ir al contenido
• 2 , Ir al menú
• 3 . Ir al pie de pagina

Solo funciona en las entradas individuales

• q .Ir al formulario
• w , Ir a los comentarios
• z . Nombre
• x . Email
• c .Web
• v Textarea

Si os dais cuenta pillado toda la parte izquierda para tenerlos y nunca mejor dicho a mano ;P.
He dejado las teclas A,S,D,F,G para la parte del menú como los archivos, volver al weblog, categorías, blogrolling…

He colocado todo el codigo de la plantilla que tenemos hasta ahora para ver muchisimo mas claro el codigo fuente y el resultado final.

Incluso le he añadido unos comentarios de ayuda con el inicio y fin de cada bloque.

Este bloque lo vamos a dividir en tres partes, las anotaciones, los comentarios y el formulario, dejando de lado todo lo demás, lo importante de este proyecto es crear la plantilla principal y luego ir añadiendo mas secciones, por ejemplo en este bloque un formulario de contacto, un sistema de archivos, una sección about…

Empezaremos por la primera parte, las anotaciones de nuestra bitácora, lo primero de todo es encapsular en un div dicha anotación, en ese bloque definiremos el titulo, el contenido y la información del articulo en una lista ordenada alfabéticamente.

Para separar los bloques de los artículos vamos a usar un hr, no suelen ser molestos y los podemos ocultar fácilmente, ademas nos sirve como referencia visual para separar los artículos, también lo he añadido porque esta de moda incluir una imagen a modo de separador al final de los artículos.

<div class="post">
<h3 class="ptitle">Lorem ipsum</h3>
<div class="bodypost">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum est eu mauris. In volutpat blandit felis. Suspendisse eget pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque sed arcu. Aenean purus nulla, condimentum ac, pretium at, commodo sit amet, turpis. Aenean lacus. Ut in justo. Ut viverra dui vel ante. Duis imperdiet porttitor mi. Maecenas at lectus eu justo porta tempus. Cras fermentum ligula non purus. Duis id orci non magna rutrum bibendum. Mauris tincidunt, massa in rhoncus consectetuer, lectus dui ornare enim, ut egestas ipsum purus id urna. Vestibulum volutpat porttitor metus. Donec congue vehicula ante.</div>
<ul class="infopost">
<li class="autor"><a href="/about/" title="Info sobre el Autor">Autor</a></li>
<li class="category"><a href="/categoria/" title="Ver listado articulos de esta categoria">Categor&iacute;a</a></li>
<li class="pcoments"><a href="/comentarios/" title="Ir a los comentarios">Comentarios (1)</a></li>
<li class="date"><a href="/fecha/" title="Ver listado de archivos">Fecha</a></li>
<li class="plink"><a href="/permanlink/" title="Url para hacer permalink a este articulo">Permalink</a></li>
<li class="tbacks"><a href="/trackbacks/" title="Url para hacer trackbacks a este articulo">Trackbacks (1)</a></li>
</ul>
<hr class="separator" />
</div>

A primera vista parece algo complejo pero las listas son una buena forma de manejar y ordenar la información, he claseado todo los li por si algún avispado quiere quitar alguno, por ejemplo yo ;P, este blog carece de trackbacks porque utiliza textpattern entonces eliminare ese tag.

Como pequeña anotación decir que lo que crearemos es la estructura pero para nada lo que escribiremos dentro de ella, es decir, lo que pongas en el apartado autor o fecha dependerá solamente de ti, no es plan de tenerlo todo milimetrado sino parecería algo bastante soso, escribo esto porque puede parecer algo bastante estricto y aunque en realidad lo es no creo que perjudique en el diseño de la bitácora.

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.

Vamos a crear de una primera pasada la estructura global de nuestra plantilla, luego iremos bloque por bloque añadiendo las cosas, por ahora haremos solo el esqueleto.

Empezaremos por declarar un DOCTYPE , para ello vamos a elegir el xhtml 1.0 transitional al ser el mas adecuado aunque la plantilla pueda validar perfectamente xhtml strict,luego con las anotaciones de los bloggers puede afectar la validación de xhtml strict.

El primer bloque:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>PBS - Plantilla Maestra</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css.php" type="text/css" />
</head>
</html>

Como veis solo he incluido los tags mas básicos para mas adelante se depurar la plantilla, incluimos la declaración del doctype para que el navegador procese como es debido, luego añadimos al elemento html un espacio de nombre, es simplemente para mejorar esta etiqueta (Si lo dice Zeldman será por algo ;P) , luego con los tags xml:lang y lang indicamos como esta escrita la pagina, en este caso español.

Algunos pensareis que me he olvidado del <?xml version="1.0" encoding="iso-8859-1"?> pero no lo he incluido, según dicen algunos navegadores se hacen la picha un lío con esta etiqueta y la he quitado, para ello he incluido el meta de toda la vida que nos dirá el juego de caracteres que deberemos usar en esta pagina, iso-8859-1 el latino ;P.

Luego incluimos el link a la hoja de estilos, si veis la extensión no es .css sino .php, la cosa es facilitar al gestor de themes cambiar de hojas de estilos fácilmente, con contenido dinámico conseguimos el efecto deseado, elegimos la hoja de estilos adecuada y mandamos la cabecera correcta para que muestre el css.

Con esto hemos creado el principio de la plantilla ahora vamos a ver el esqueleto de nuestro blog.

<body id="blog">
<div id="container">
<div id="htitle"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="fcredits"></div>
</div>
</body>

Bien pues esa es la estructura de la plantilla,como veis al tag body le he añadido un id, muchos pensareis (al igual que yo) que para que un identificador si solo hay un único body, es para tener un máximo control sobre el css y ademas poder aprovechar algunas características de CSS2 y CSS3, se supone que nuestra plantilla tiene que ser lo mas manipulable posible.
He encajonado toda la estructura en un contenedor, lo llamo contenedor porque ese es su objetivo, muchos bloggers usan esta forma y es las mas idónea, algunos eso si sacan el pie de pagina del contenedor.

A continuación aparece un nuevo div con un id llamado htittle, htitle? si si htitle, lo he llamado así porque desde mi punto de vista llamarlo head, header o similares no me dice para nada que contiene ese div, es como llamar al bloque contenido y menú como left, right creo que es mucho mas lógico llamarlo htitle. donde escribiremos el titulo y el eslogan de nuestro blog.

Bueno los dos div siguientes creo que están claros, en uno irán las entradas de nuestra bitácora y en otro el menú, pero y porque el contenido antes? muy fácil, creo que lo mas importante en una bitácora son los artículos y es por eso que debe aparecer el primero y mantener un orden de prioridad, es mas importante eso que mostrar primero el menu.Incluso como dicen Xoan en uno de los comentarios, google agradece colocar primero el contenido y como google es el puto amo así lo dejamos ;P.

El ultimo ta pasa exactamente lo mismo que en el primero, llamarlo foo o foot no me dice para nada que es lo que contiene, esta claro que un pie de pagina siempre vamos a poner cualquier frase, licencia, banner
o lo que se nos pase por la cabeza (Mas adelante iremos ordenando esto mismo), los créditos para ser mas preciso.

Nuestro esqueleto final

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>PBS - Plantilla Maestra</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css.php" type="text/css" />
</head>
<body id="blog">
<div id="container">
<div id="htitle"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="fcredits"></div>
</div>
</body>
</html>

Así ha quedado el primer vistazo de nuestra plantilla estándar, los comentarios están abiertos para poder dialogar el nombre correcto de los divs o incluso su posición.

Mañana mas ;P.