BlogsMéxico, un concepto: Lifestyle

Anotación (con sus respectivos) publicada originalmente el 13 de julio de 2004 en Bitacoras.org

No sabría cómo expresarlo pero se puede decir que cuando comentaba con Raúl la posibilidad de hacer la nueva versión de BlogsMéxico era la oportunidad de saldar la deuda, la culpa autoimpuesta que tenía con él, y con la blogosfera mexicana e hispana al no lanzarse los blogs de ciudad.

Me atormentaba, oh triste de mi, haber defraudado a gente, haber dado pávulo a argumentos escritos desde la desinformación o el aburrimiento (que si interesado, oportunista, ególatra, plagiador porque testeamos desde Bitacoras.org los Blogs de Ya.com con una de las templates predefenidas que ofrecían… ha sido el último).

Ironías aparte, la nueva versión de BM permite cerrar esta temporada con la sensación del deber cumplido, con la satisfacción de haber convertido y contribuido a proyectos, experimentos, juegos, ideas más o menos fructíferas, descabelladas, divertidas, tristes, serias en algo palpable compartido por todos. Aunque Raúl tendrá pocas vacaciones. Le queda el trabajo duro: mantener el sitio, acabar esa tesis que esperamos leer, y coordinar junto a Antonio el interesante Nº 1 de WeblogMagazine.

Sabiendo que la blogocosa la mueve el altruismo, sacar tiempo de donde no lo hay, ayudarnos, unir fuerzas… parece que no nos queremos enterar. Los ejemplos que hay no cunden y no motivan para que otros se produzcan y aporten estabilidad a la blogosfera. Mucho de lo que hay no se cuida. Cuando se crea o participa de algo nuevo o colectivo se hace desde el divertimento, la distancia, sin compromiso alguno y a las pocas semanas se abandona. Se tiende a confundir “libertad” a “ir por libre”: a hacer las cosas solos o desde la perspectiva del “juguete”. Incluso nos quejamos de la poca productividad, resultado de esta inmadurez y esnobismo galopantes. Es frustrante competir con la idea de que lo mejor siempre está fuera. A menudo me pregunto si el amateurismo en el que estamos inmersos está beneficiando o perjudicando a las iniciativas globales. Es más complejo de lo que parece.

Generalizaciones a parte, siempre aburridas e injustas, a lo que realmente importa…

Así se hizo

El proceso desde el primer boceto hasta la penúltima línea de código llevó unos 25 días con jornadas de unas 2-3 horas diarias de media. Desde finales de mayo que la portada y los principales accesos están programados. Sólo faltaba pulir algunos detalles de redacción, trasplantar el site de Ideasapiens al hosting que gentilmente ofrece Diego y agregar varias functions nuevas planteadas en las demos. Esto se ha hecho en las dos últimas semanas en el tiempo libre que disponíamos y con el soporte este sábado de Roberto que ha dado los toques finales a la paginación del listado de categorías en el que aún se han de implementar algunas mejoras.

Concepto

Una idea fija en la cabeza, que no aparece alarmantemente en las iniciativas blog, y que debía impregnar cada centímetro de BlogsMéxico: Lifestyle… urbano, elegante, cosmopolita, activo, unisex, tolerante; y todo de una manera minimalista y cumpliendo los estándares web. Todas las páginas validan en XHTML 1.0 Transitional y CSS (2).

Para conseguir este Lifestyle lo más sencillamente posible diferentes elementos que no por estar de moda, caducan o restan identidad al sitio:

• Líneas rectas (1px solid combinadas con 1px dotted en accesos interiores) que delimiten y separen los menús. Desde hace meses que no puedo prescindir de este estilo. No es descubrir nada: las soluciones que aportan con apenas unos simples hr y borders son inmensas.
• Colores: debían asemejarse a la bandera mexicana. Blancos, verdes (dominante: #618C5D), grises (dominante: #cfcfcf), rojos (#c30)… los tonos elegidos para este espíritu minimalista y urbano.
• Body y content centrado (770px). Gif en el body para introducir sin recargar el header. Asume la función de border-top solid para dimensionar y centrar en los 770px el foco de atención que para nosotros era el logo, los 4 enlaces del header y el ping de actualizadas. La opción de border-top de un solor color vía CSS o varios divs con float: left de distintas tonalidades de verdes que haría el mismo papel que el gif desechada para ahorrar código.
• Los borders laterales de diferentes tonos de la plantilla de Blogs Temáticos de IS así como las cortinillas de emisión de Localia que juega con diferentes tonalidades de recuadros nos convenció para la creación del gif del body. Se desestimó un header más decorado y con más altura que enmarcaría al logo. Absorbería una parte fundamental para nosotros que eran los 4 links del header. Tenían que estar totalmente despejados y sin distracciones.
• Logo que sitúe: geográficamente, y sobre todo, en Contenido desde el primer page view. Habían dudas de si BM era un directorio solo para bitácoras mexicanas como así es, y el subtítulo lo deja claro.
  También queríamos que el logo continuará con este lifestyle urbano y Raúl vectorizó una de las fotos que tenía en sus archivos. Fonts empleadas: Bauhaus 93 y Georgia.
• ¿Los enlaces más importantes en un directorio de Bitácoras?. Aquí quizás habría discusión pero en estos momentos:
  Un About (Acerca de) para situar a cualquier tipo de lector en todo esto, el Directorio, Registrar un blog, Aparecer en el ping de actualizados. Los cuatro en el header, sin interferencias y remarcados underline para diferenciar de los enlaces habituales.

Importante la formulación en los enlaces Registrar un blog y Aparecer en actualizados. Si hubiéramos puesto en el header:

“Añadir un blog”, que siempre es más amigable que la palabra registrar, y “Hacer ping” en vez de “Aparecer en actualizados”, la confusión estaría servida ya que muchos no sabrían qué es hacer ping y relacionarían añadir blog con aparecer en el ping de actualizados. Vocabulario sencillo y directo. El término “añadir” lo reservamos al botón.gif y va acompañado del término directorio para que tampoco haya lugar a dudas.

• Fonts: familia Georgia y Trebuchet MS en los encabezados. Colores #333 y #618C5D.
  Verdana y Trebuchet MS (para el blog) como fonts principales. Color #222. Sin las georgia, times, serif el resultado final hubiera sido totalmente distinto.
• 4 Imágenes urbanas (en sintonía de color) de gente joven en elemento “Ciudad” y alguna con elemento “México” que denoten comunidad en todas ellas. Debían enlazar a los accesos principales.
  2 imágenes más para accesos interiores secundarios pero importantes como pueden ser los Acerca de, formularios y ¿Qué es un weblog?. Debían sintonizar en ese espíritu urbano-mexico pero además tenían que engarzar con la revolución que supone el fenómeno blog. Nos hemos servido de la columna del Ángel de la Independencia, reconocible por todos los mexicanos, y un grabado en el que aparece Guttenberg para el acceso ¿Qué es un weblog?.
• Breadcrumb: es intrínseco a la estructura por la que hemos apostado. Si optamos por las líneas rectas y con el volúmen de información que puede contener BM se hace imprescindible para no dejar ningún cabo suelto. Además, como suele ser habitual, nos sirve para separar header de content.
• Textos introductorios en las previews como en el lateral de los accesos interiores que aporten información, espíritu de comunidad, pedagogía sobre el contenido así como inputs (OpensourceCMS, Bitacoras.org, Entrevista a Carlos Tirado, Blogómetro, posts…) a recursos exteriores de la blogosfera para que el lector reciba la actualidad relacionada y recomendada del acceso en el que nos encontramos. De paso también sirve para introducirle en más blogs e iniciativas de la orbitácora.En algunos accesos interiores se refuerza la información en el content con estilo blockquote. La font de los 2 gifs que utilizamos para las comillas dependiendo si es un acceso informativo o tutorial/blog: Bell MT.
• Links de continuidad en corchetes y puntos suspensivos [...]. Siempre son más elegantes y motivantes que la ausencia de ellos o introducirlos con paréntesis.
• Widget para remarcar los enlaces de los Titulares que continúa con la estética de los corchetes para no despistar al lector. La cada vez más utilizada flecha corcheteada de pica vista en miles de sitios. Colores: negro y verde BM. Para resaltar el título de las bitácoras en el listado de categorías del Directorio hemos utilizado un encabezamiento con el favicon de águila que hizo Raúl para la versión anterior de BlogsMéxico.

A PROGRAMAR

El concepto y los elementos estaban claros. Solo quedaba armar el sitio. Todo sin tablas a excepción de las categorías del directorio que aparecen en la portada y plantilla de resultados, y el formulario de hacer ping manual.

Con el Directorio de Blogs IS y el Blog de Desarrollo me gustaría gustado desarrollar más la idea que tenía en mente pero había otras prioridades.

Con BlogsMéxico he podido plasmarla en su totalidad. Se adaptaba a la perfección. Sobre todo la estética de lineas rectas que en su día impulsó Google, y el recurso de las cajas inferiores que tantas soluciones aportaron cuando las introducimos en la versión actual de Bitacoras.com y que en BM gracias a ellas han servido para que la mayoría de contenidos extras estén accesibles desde cualquier URL. TeamScience del sudafricano y admirado Damien du Toit, la versión anterior de Coudal, este mes de julio han rediseñado volviendo a abrir caminos en este estilo, Denbighshire Supporting Business de los británicos Stuff & Noise, y Michael Simmons clon de Manu fueron ejemplos a seguir dentro de esta escuela “blanquirecta”, paradojicamente exenta de Lifestyle casi siempre, y estilo que está marcando la pauta de nuestros últimos trabajos. Fijada elementos y distribución de la portada… las plantillas de los accesos interiores estaban claras ya que sabíamos de las necesidades, elementos e inputs que debían contener.

Accesos interiores

A los mencionados textos introductorios y recursos externos era esencial que en los accesos como de Crear tu weblog y Tutoriales el Lifestyle no perdiera intensidad. Las imágenes vuelven a aparecer en el lateral izquierdo situando instantáneamente al usuario.

Por otro lado, era prioritario que el visitante se familiarizara visualmente con la identidad y características de las iniciativas que se va a encontrar. Echando mano de la eficaz franja informativa inferior insertada en la imagen que ya utilizamos en la imagen de las dos chicas de Plantillas de Bitacoras.com y con la font Silkscreen de Kotkke que aporta el “perejil” (tech, urbanita) como diría Arguiñano, quedaba resuelto en el mínimo espacio y dejándolo todo sintetizado, jerarquizado lo más igualitariamente posible.

Hubiera sido injusto usar el ancho del content de estos dos accesos para reseñar cada iniciativa forzando a situarlas jerárquicamente una debajo de la otra. Con las dos columnas quedó resuelto retomando la composición de las dos columnas de la portada que muestran las 4 fotos debajo del ping. De este modo situábamos al mismo nivel Bitacoras.com y Blogia, Blogs.Ya.com y Typepad… o Movable Type y Blogger, pMachine y WordPress en el caso de los tutoriales.

Directorio

A pesar de no creer demasiado en la utilidad de consulta de los directorios. Dónde esté un buen buscador que se quite todo lo demás apostamos por hacerlo más amigable, activo e interconectado con el espíritu de la web. Para empezar creamos un Index ya que no existia. En el Index se integró la lista de 15 últimos registrados. Respecto al list de las categorías se barajó la opción de situarlas en dos partes pero optamos por incluirlas una debajo de la otra e insertar a la derecha el boton gif para registrar blog. Peligro quizás de efecto ceguera con el boton de registrar blog pero no nos consta una vez testeado por los compañeros.

La plantilla de categorías con paginación en border solid y background-color (verde BM) en la parte superior e inferior del listado de blogs y el lateral izquierdo con las otras categorías de blogs más los 3 accesos principales también son una muestra de esta interconexión con el resto de la web.

La paginación ha sido lo último que se ha programado. Se ha limitado el número de páginas a mostrar para que no se hagan varias líneas como puede pasar en Personales en pocas semanas. Se ha eliminado de la paginación el enlace de la página en que estamos. Se ha enlazado la categoría en el breadcrumb y en el lateral con el número de blogs de esa categoría entre corchetes lo que ha habido que meter parámetros nuevos para todas estas funciones. Sin la ayuda de Roberto que ha plasmado perfectamente lo planteado en la demo hubiera retardado unos días más la inauguración.

Formularios

Se ha introducido y ordenado algunos campos en los formularios. Se ha dado estilo al fieldset e introducido legend dando como resultado gracias a la Georgia #333 y al background-color: #D5DBE5 unos formularios creemos que elegantes y muy integrados con la estética de la web.

En el de Hacer ping manual no hemos metido fieldset y legend y hemos optado por textos explicativos para los autores que deben utilizarlo. También se ha dado estilo a los textos una vez enviada la notificación: A “Enviado ping con éxito” por ejemplo enlaza con el widget de la flecha a la página de inicio y el mensaje de error le hemos puesto h4 (rojo c#30). Hemos mimado muchos estos pequeños detalles, como puede ser también el de incluir en la web de bienvenida una vez envían el formulario de registro un recordatorio para hacer ping, o personalizar la plantilla de búsqueda en el blog y el preservar los emails del SPAM cuando se comenta. Posiblemente se hayan escapado alguno más. Se admiten sugerencias.

Weblog

El papel del Weblog de BlogsMéxico cobra más importancia y combina la tradición abierta por Bitacoras.com con los blogs de noticias, desarrollo y diccionario.

Entrevistas

Bajo el formato blog que aporta la interactividad y feedback siempre recomendables, periódicamente se charlará con integrantes de la comunidad bitacorera mexicana: estilo de vida, aficiones, motivaciones para escribir un weblog… Para empezar Raúl charló con edmz, que recomienda algunos libros y películas realmente interesantes.

CONTENIDOS

Hacía falta una puesta al día de la mayoría de textos y crear accesos nuevos. Se ha enlazado las categorías en el ping de actualizados. Se hizo el Acerca de, Entrevistas, y actualizamos el acceso de Tutoriales y ¿Qué es un weblog?, de este último nos sentimos especialmente felices.

Había que integrar en la redacción de los textos enlaces a recursos externos (pedagogía) que ofrecieran una perspectiva global e histórica del acceso en que nos encontremos. Debían servir de fuente de información al lector tanto si es un autor de una bitácora como periodista que busca datos para escribir un artículo, estudiante, profesor, profesional que está haciendo un trabajo sobre blogs…

Por lo que respecta a los tutoriales después del lanzamiento del nuevo Blogger y la popularización de otros requerían cambios. Integramos, una vez recibido el visto bueno de los autores, los manuales de instalación de pMachine obra de Ángel Puigdelliure, el de WordPress escrito por Martín Melado, el de Trackback con Haloscan de Igvir y el de exportar Blogger vía FTP y comentarios BlogExtra creación BlogsMéxico.

Testearon

Durante el mes de mayo, y en estos últimos días, sugirieron mejoras además de Raúl: Afrael, Ángel, Daniel, Roberto, Christian, J.L Perdomo, y Mauricio. Se agradecerán reporte de bugs, despistes ortográficos, problemas, mejoras..

Resultado final

Puede que algunos consideren estas semanas de trabajo como un simple lavado de cara, que podríamos haber arriesgado más, por ideas que hay en la cabeza no será pero el tiempo era limitado. Habrá deficiencias, vaya las hay, Raúl agradecerá cualquier participación activa en un BM con más de 500 weblogs listados. Hay mucha bitácora mexicana oculta a ver si la nueva versión hace que se animen a registrarse, a hacer ping; y sobe todo a potenciar el lanzamiento de otros directorios nacionales.

Dicho esto que nadie se duerma en los laureles, quitadle horas al sueño, arrinconad la tele, innovemos, asimilemos toda la información, tendencias, ideas que podamos. Quién pueda ser valiente que lo sea.

Durante los próximos meses esto seguirá moviéndose, surgirán nuevas gentes, proyectos que abrirán excitantes etapas. Bitacoras.org, con el compromiso de todos, estará ahí para contarlo. Desde la casa de campo del Dr. Maligno probablemente lo vea como simple espectador, pero seguiré conociendo gente, asimilando métodos de trabajo al ritmo, espero, que acontecen al día de hoy. Barcelona para eso es única. La ruleta gira. Abran juego.