IceBeat

Nos vemos en iChat!!! ;P. Aunque solo sea para probarlo no? ;P

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.

Wow mi mac me ha pedido actualizar sotware, eso es bueno o es malo? 41 megas para actualizar mac os x 10.3.4? se estan quedando conmigo o esto es una maravilla?.