Estándares y Scotch-Brite

Rediseño del blog. Gracias a los weblogs y a gente como Zeldman, Bowman, Cederholm… nos fuimos introduciendo en los estándares y al placer, diversión, reto que proporciona diseñar sin tablas y basarlo casi todo o todo en las hojas de estilo (CSS). Cada día se aprende algo nuevo y resulta apasionante.

Por lo que a mi respecta esto ocurrió hace no más de dos años, Ideasapiens ya se había lanzado al ciberespacio y rediseñar, limpiar el sitio cual Scotch-brite slogan al viento, incluido gestor de contenidos fiable, fue y es un objetivo que conforme han ido apareciendo más proyectos y trabajos se ha ido aparcando, priorizando estos últimos. Espero un día poder desquitarme.

Mientras tanto queda el resquicio de este weblog, que hoy estrena nuevo look, el relanzamiento de los 3 Blogs Temáticos, sin fecha decidida aún, e ir quitando el mono realizando trabajos para el curro o la blogosfera además de retocar pequeños detalles dentro de Ideasapiens.

Este blog

La motivación fundamental del cambio fue, ahora que en vacaciones había tiempo, optimizar el blog, suavizarlo… a ritmo Lets Get it On. Para ello había que implementar algunos de los detalles que echábamos en falta en el Movable Type que tenemos instalado explotando las posiblidades que brindan los plugins.

¿Hubiera sido más fácil actualizar al MT 3.0 o pasarnos a WordPress? Era menos divertido además de que servía de tubo de ensayo para los blogs temáticos.

Una vez puestos, la tentación siempre llamando a la puerta, el siguiente paso fue cambiarle la cara completamente al blog intentando plasmar lo que sería a mi juicio un estándar de secciones y nomenclaturas personalizadas para cada plantilla intentando servir la demanda de información más «lógica» en cada plantilla. No sé si ha conseguido del todo. Pero a lo largo de estos días se le irá dando los retoques que faltan.

Por momentos iba a desistir del cambio de look y solo centrarme en personalizar el MT.

Las vacaciones, Sevilla, familia, deporte a 40 grados, tiran mucho pero la rotulación televisiva en las retransmisiones de los Juegos Olímpicos de Atenas me convenció definitivamente a darle el último empujón. En cada competición: natación, atletismo, baloncesto… me quedaba con ganas de saber datos de los deportistas.

En las pruebas de atletismo fue el caso más evidente. Solo aportaban 3 datos en la infografía: nombre, nacionalidad con la banderita de turno y marca de clasificación. El comentarista deportivo, si era bueno (y en TVE algunos lo son), completaban los otros dos datos fundamentales que toda rotulación en atletismo televisado debe incluir: edad, récord personal.

En Baloncesto, la urgencia era menor, si te gusta el basket los conocíamos a todos, y los datos como altura o edad pueden ser obviados ya que los datos estadísticos cobran más relevancia pero mi vecino no paraba de preguntarme la edad de Duncan, la altura de Gasol… Entre la gente en la piscina dando voces y el vecino no pude disfrutar de los sabios e «imparciales» comentarios del siempre entrañable Pedro Barthe.

Estética

Bajo la influencia aún del trabajo que hicimos con BlogsMéxico quería probar con los double borders, seguir con los verdes, blancos, georgias, y probar las posibilidades de las cajas con gifs redondeados (y transparentes) por lo que si este verde y gris cansan en dos líneas de css cambiamos y listo.

El gif del body, perfilado definitivamente hace un rato, se ve a partir de 1024. Parece mentira como un gif tan sencillo, con dos trazos de líneas verticales y margen lateral en blanco, es lo que de personalidad al sitio. Los extremos laterales del gif también son transparentes aportando el color de fondo la hoja de estilo.

Plugins y Presentacion de anotaciones

Debido al éxito de MT y otros sistemas, muchos blogs se parecen tantos unos a otros que llegan a resultar rígidos, monótonos, impersonales, no ya en estética y disposición, pero sí, aunque parezca mentira, en la forma de nombrar y titular las secciones.

El caso más evidente que incumbe a la herramienta de Six Apart es la forma de presentar los comentarios y trackbacks generalmente con el término «| Comentarios (0)» |» no diferenciando entre si hay o no feedback posteado. Ver el número «0» según qué casos (por no decir todos) afea el blog.

Hemos combinado el condicional de MTElse y el plugin MTSwitch para diferenciar el texto que enlace a los comentarios y trackbacks:

Main Index

Si no hay comentarios ni trackbacks debajo de la anotación aparecerá: añadir comentario / hacer trackback. En ambos casos el title completa la información del enlace (añadir primer comentario / ver URL para hacer trackback).

Permalinks

Precediendo el desplegable de feedback y siempre enmarcado en un h4 dependiendo de si no hay o hay 1 comentario, o 1 trackback, o varios, o si los comentarios están desactivados y solo hay trackbacks, etc… las nomenclaturas que aparecen en el h4 también están personalizadas acordes a la existencia o no de feedback remitido.

Y es que además en permalinks en el momento de desplegarse los comentarios y trackbacks aparecen juntos como en WordPress gracias al plugin de Kalsey: SimpleComments. Tenía dudas pero finalmente una vez retocado mil veces la manera de presentarlos se distinguen bien dentro de la uniformidad.

Otros dos aspectos que quería probar fueron insertar una introducción al post que jugaría el papel de descripción (no más de 4, 5 líneas), resumen de la anotación, y eliminar el nombre del autor a pie de post. Aprovechando que uno tiene alma de rata de biblioteca hemos insertado el plugin de Julianne que cuenta el número de anotación: MTEntryNumber, que vuelve a aparecer en las plantillas de archivo mensual y categorías.

URL’s amigables y archivadas con lógica breadcrumb

Si utilizáramos versiones posteriores a la 2.6 u otros CMS como WordPress no habría hecho falta pero no sería igual. :)

A partir de hoy las anotaciones se archivan por el nombre de la anotación y dentro de los directorios que explicitan la fecha de publicación tal que así:
urldelblog.com/archivos/2004/08/titulo_anotacion.php

Pudiendo consultar los archivos de agosto de 2004 en el directorio /08 y los de 2004 en /2004.

¿Cómo lo hemos hecho?

Hemos utilizado el <$MTEntryTitle dirify="1" trim_to="20"$>.php (php en nuestro caso) y le hemos sumado un MTEntryDate Format que combinado:

<$MTEntryDate format=»%Y/%m»$>/<$MTEntryTitle dirify=»1″$>.php

y agregado desde Archiving (Weblog Config) a Archive File Template de Individual Entry obtenemos las URL’s de los enlaces permanentes amigables a los buscadores archivándose además en carpetas acordes a la fecha de publicación. Para completar la faena insertamos en el Archive Template de Date Based (Monthly):

<$MTEntryDate format=»%Y/%m»$>/index.php

de esta forma conseguimos que la página principal de la carpeta que archiva las anotaciones te ofrezca todos los textos escritos ese mes.

Para que el directorio /2004 tenga continuidad con el breadcrumb y paliando que MT no tiene plantilla de archivo anual, no hemos perdido tiempo en soluciones dinámicas, y hemos situado vía FTP en la carpeta /2004 un redireccionador a los archivos de enero de 2004, y en la carpeta /2003, otro hacia las anotaciones de noviembre de 2003 (primer mes de publicación del blog).

Acerca de = Información

Sección impresincindible que la introducimos con la nomenclatura Información alejándonos de la traducción literal e impersonal del About en inglés y que debía aglutinar todos los datos relevantes del autor y de la bitácora en apenas unas líneas y ocupando el espacio justo ni más ni menos:

  • Foto del autor. En esta caso tipical spanish a los seis años Todos tenemos un pasado :)
  • Nombre y apellidos con username entre paréntesis
  • Ciudad de residencia, edad del autor
  • Temática de la bitácora
  • Enlace a perfil más extendido
  • Link a Archivos que incluye todas las entradas organizadas
  • Enlace RSS
  • Validación XHTML y CSS o en su defecto nombre del CMS utilizado

Comentarios recientes y Anotaciones nuevas

Debajo del Acerca de dependiendo si nos encontramos en Main Index o Individual entry insertaremos dos listados diferentes acorde a la demanda de información más «lógica», al menos para nosotros, y en donde el title de los enlaces será un proveedor de información para ubicar en tiempo y feedback las anotaciones y comentarios.

En Main Index: se ha introducido listado de los 3 últimos comentarios encabezada por la nomenclatura: «Comentarios recientes». Aquí el title que incluye fecha de publicación de la anotación y del comentario completa la información del listado compuesto por:

Nombre anotación (Feedback=número de comentarios + trackbacks).
Nombre de comentarista con web enlazada si tiene: extracto del comentario
Seguir leyendo comentario…

Toda la curiosidad que se pueda tener respecto a los comentarios queda resuelta. O eso creo.

En Individual Entry: en vez de comentarios recientes se ha incluido las 3 últimas anotaciones presentadas como «Anotaciones nuevas» para no volver a repetir «recientes». El título de la anotación viene acompañado de la fecha de publicación (en este caso sin el día de la semana y abreviada: mucho más elegante). En el title hay un extracto de la anotación para ayudar a decidir si la anotación puede ser de su interés o no.

Debajo de «Anotaciones nuevas» se ha insertado listado de categorías introducido con la nomenclatura «Secciones». Hay términos en la blogosfera que cansan y «Categorías» al igual que «fenómeno blog» a pesar de no poder prescindir de ellos hay momentos que causan rechazo a la hora de nombrarlos.

Hay otros pequeños detalles como enlazar el mes de publicación de la anotación desde la plantilla de categorías y otros tantos por aplicar que si da tiempo en estos últimos días en Alcalá intentaremos implementar.

Respecto a otros cambios para acercar Ideasapiens a los estándares, e ir avergonzándome menos de lo que programamos antes de la cssmanía. Ayer se cambió:

Header de la portada principal

Tablas, columnas y un gif (en background-image) azul y gris componían desde hace más de un año la cabecera de la página principal que enmarca logo, accesos informativos y el buscador de Google & IS. Decir que sobraba código es poco. Una tabla con width: 100% que tenía de fondo el background-image, y otra tabla contenedor centrada de 770px con varias columnas eran el esqueleto:

Header IS con tablas

Desde ayer, una vez pasado por el filtro del xhtml y CSS: mismo aspecto, cabecera sin tablas y con casi 10kb menos de peso, cosa que agradecerá la transferencia mensual contratada y el bolsillo de éste que la paga. También accesibles desde el directorio de Blogs IS y la página de error 404. Hemos hecho otra versión para este blog. Y es que hay tantas posibilidades para crear lo mismo que el reto está en cómo conseguirlo con el mínimo código posible y accesible en la mayor cantidad de navegadores. Aunque sinceramente para mí Opera y Safari no existen.

Página de error 404

Es una de las páginas más vistas desde que la insertamos hace más o menos un año a pesar de que comprobamos habitualmente si hay enlaces rotos dentro de IS. El resultado es mínimo.

Página 404 Ideasapiens

  1. Tenían que desaparecer las tablas y validar en XHTML y CSS
  2. Texto explicativo, no más de 3 líneas, para hacerla más amigable en el que se introdujeran los accesos directos y enlace a reportar link roto si había llegado a ella ya dentro de IS.
  3. No debía aparecer el scroll down del navegador
  4. Debía incorporar el nuevo header, buscador incluido. Antes solo aparecía como cabecera un border-top #1264cc (azul IS) en el body
  5. Debía de fomentar el conocimiento de los weblogs de ahí las dos pastillas de bitacoras.com/org y el texto que las introduce.
  6. Integrar el weblog de novedades en IS aplicando la tendencia de transparencia y normalidad que toda web, empresa, institución debe fomentar y si es por medio de weblogs mejor que mejor. Había dudas de si meter include con el título y excerpt de la última anotación, pero era desviar la atención de información y al final no es URL dinámica

Y con esto y un bizcocho, los días ya son más cortos, el otoño se deja adivinar, la temporada 2004-2005 a punto de dar el pistoletazo de salida. Y yo que no me quiero a ir a Barcelona. Voy a esconder las maletas.

5 respuestas

  1. Muy buen rediseño y excelente explicacion. Creo que te copiare algunas cosas para mi proximo rediseño.

  2. Muy bueno JL, muy currado. Quizá la cabecera queda ahora un poco anticuada, pero en conjunto gana…

  3. Sin remilgos, Armando. Quién esté libre de pecado que tire la primera piedra :)
    Perdomo: quizá queda encajonada entre los 770px pero mientras está en la home principal no podía prescindir de ella además del servicio que da (links informativos, buscador…)

  4. Amplia explicación y estupendo rediseño :-)
    Aunque algunos piensen que estas explicaciones son inútiles, no viene nada mal ver que todos tenemos los mismos problemas y, lo que es mejor, diferentes maneras de afrontarlos.

  5. Yo lo pienso constantemente, Daniel. Además de no descubrir nada, son plugins ya antiguos, se suele caer en este tipo de posts en muchas obviedades pero a más de uno supongo que le será de utilidad.