2

Como se hizo

Internet, Musica, Pruebas sin gaseosa , , , ,

Se me ha ocurrido que quizas una buena forma de empezar, seria contar como monte lo que ahora tienes ante los ojos, es decir, las modificaciones etc. que le he hecho al diseño inicial para que se vea tal cual lo ves ahora. Y puesto que la idea no me desagrada y puede que le sirva a otra gente, vamos con ello.

En primer lugar tenia claro que queria un diseño limpio y poco complejo. Y casi con toda seguridad deberia de cumplir los estandares W3C CSS y XHTML, pero esto ultimo, como digo, no era obligatorio al 100%.

Tras ver unas cuantas docenas de plantillas, me decidi por RS16, un theme simple y coherente, que aunque anunciaba su compatibilidad con los estandares mencionados, al final resulto no ser tal, como luego comprobe.

Tras corregir varios errores CSS y HTML en el codigo me dispuse a empezar a personalizar la plantilla.

De arriba a bajo, tenemos en primer lugar la cabecera. Con una imagen que no me convencia a la izquierda y la zona de la derecha lista para integrar widgets o en ausencia de ellos, con info sobre el blog.

Tras elegir algo mas acorde con mis gustos pense: ¿y si hubiera una carpeta con imagenes y estas apareciesen de manera aleatoria?. La idea me convencio, asi que usando un script PhP, logre que con cada recarga la imagen fuese distinta. Una de esas imagenes corresponde al grupo Fudge Tunnel en directo, al cual pertenece este soberbio tema:

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Por cierto: para que puedas oir musica de esta forma tan elegante, utilizo Audio Player, un plugin efectivo y configurable hasta limites insospechados.

Volviendo a lo anterior, la zona del widget la mantuve haciendole un pequeño retoque de apariencia e incluyendo a traves de RSSImport mis ultimos movimientos en Twitter.

Por debajo tenemos la zona donde se encuentra el contenido. Nada que destacar, salvo un par de cosas:

  • Modificacion en la tipografia de los titulos, trabajo del cual se encarga Flir For Wordpress, que lo que hace es generar una imagen con determinada fuente a partir de un texto.
  • Capitalizacion de la primera letra de los parrafos mediante Drop Cap First Character.
  • Ajuste del texto de parrafo para que aparezca justificado a traves de CSS.

La zona del pie de pagina paso de ser un simple expositor del ultimo Twitt, a contener tres zonas diferenciadas de widgets, que tuve que programar. Ahora mismo ocupadas por el calendario, las categorias y las etiquetas.

Recompuse la imagen original y le aporte un toque de hilaridad personal.

Con respecto a la pagina donde se muestra cada entrada individual, use la misma idea de las imagenes aleatorias, con la diferencia de que aqui si que fue un verdadero problema la adaptacion, para que se viera bien en el detestable extendido navegador Internet Explorer.

Inspirandome en el diseño de Stephen McIntyre decidi añadir una zona para compartir la entrada en varias redes sociales. Pero el set de iconos que el usa no me convencia en absoluto. Asi que busque en la red hasta dar con el actual, mas acorde al look general del blog y lo decore con una imagen de fondo.

La maquetacion CSS de esta parte tuve que rehacerla completamente, ya que ninguna version de Internet Explorer la mostraba de forma correcta.

Por mas que mire, no tengo ni idea de como hizo Stephen para generar dinamicamente la URL que se envia a las distintas redes, asi que tuve que buscarme la vida y al final mediante JavaScript consegui el resultado que buscaba.

Para los comentarios use el plugin Spam Stopper, que permite personalizar la pregunta anti-spam y estilice la alternancia en el color de fondo mediante las nuevas clases CSS de Wordpress.

Durante todas las etapas del desarrollo, las comprobaciones de validacion CSS y XHTML fueron continuas, asi como los tests con los principales navegadores.

Quedaban un par puntos importantes: el formulario de contacto y la galeria de imagenes.

Para el primero, tras probar varias opciones, me decidi por el ya conocido para mi Secure and Accesible PHP Contact Form, que ademas de validar correctamente, dispone de una estupenda caractarestica: la funcion anti-spam a traves de una pregunta configurable. Dejarlo listo para funcionar fue cuestion de recodificar un poco de CSS y traducir y eliminar unas cuantas lineas de codigo PhP.

Un poco mas problematico fue el tema de la galeria. Cansado de pesados plugins del estilo de Next Gen Gallery, buscaba algo mas liviano y la solucion vino de la mano de flicrRSS. Para integrarlo, tuve que escribir y darle estilo desde cero a una nueva plantilla, al tiempo que iba comprobando que tanto el plugin como la maquetacion cumplian con los estandares W3C.

El resultado final es lo que tienes ante tus ojos. Lo que empezo siendo algo importante aunque descartable ha pasado a convertirse en una realidad: un blog que cumple perfectamente con los estandares W3C de XHTML 1.0 Estricto y CSS 2.0 y 3.0, tal como se puede comprobar pulsando los iconos correspondientes en la parte inferior derecha de la pagina.

Espero que os haya resultado didactico.