TH#b.0.9 Swallow

Segundos fuera, empieza el espectáculo de esta velada. Aviso a los navegantes que lo sigan desde el canal RSS que, como adelanté, he realizado un lavado de cara al blog con un diseño nuevo que, si bien es una mutación del anterior sólo que bastante radicalizada y con una clara inspiración comiquera ya que tanto el contenido como los comentarios se muestran ahora como bocadillos o burbujas de un cómic.

Aún tiene asperezas por pulir de forma que no está disponible para su descarga, avisaré cuando lo esté subiéndolo a algún repositorio en voga como Github o Pornotube de manera que todos vosotros podáis jugar a buscar los fallos de mi código, para hacerlo más seguro o para humillarme, lo que sea. Empecemos a destripar sus entrañas, que hay bastantes cambios.

It’s a simple matter of weight ratios!

Previendo todo tipo de coñas y bromas que os haré tragar sobre el nombre, me adelanto a explicar la nomenclatura del tema. Como en la ocasión anterior, el título le viene de una escena de mi película favorita de mis cómicos favoritos y como a estas alturas del cuento no croe que sea necesario repetir de qué estamos hablando, lo enlazo, golondrinas. ¿Por qué? Porque me parece ligero y rápido cual Hirundo rustica.

Nuevas funcionalidades

Lamento que vaya a mezclar palabrería insípida vendida al peso con tecnicismos que a la mayoría ni os van ni os vienen, pero es lo que toca y tocará a lo largo de todo el post. Creo que era obligatorio ofrecer más que un cambio visual (después de más de dos años con el tema anterior) y aunque hay pasos que han venido marcados por cómo WordPress y otra gente ha ido abriéndose camino, hay otros puntos en los que no nos tenemos que ceñir a un triste sota, caballo y rey. A ver qué sale de la coctelera.

Navegación J-K

Esto es importante, una chorrada, pero importante. La primera vez que lo vi creo que fue en un tema de un Tumblr normal y corriente y me pareció algo básico pero tan atractivo y funcional que me parece que Matt Mullenweg debería incluirlo forzosamente en WordPress a nivel de core y así se o he hecho saber (y ni un triste «Gracias, pero no» he tenido como respuesta de momento). Posteriormente ha ido apareciendo en multitud de servicios y portales más siendo los más conocidos Gmail y Google Reader.

La navegación J-K no consiste en otra cosa que en poderte desplazar de un elemento a otro de un listado a golpe de teclado, J para el siguiente, K para el posterior. En el blog esta funcionalidad aparece en aquellas páginas donde se recurre al famoso loop: índice o archivos, y en los comentarios de cada una de las entradas. Tardas poco en acostumbrarte y también tardas poco en echarlo de menos.

Forzado de imágenes a blanco y negro

Imagino que ya os habréis dado cuenta de que toda la página (al menos la portada) se encuentra en escala de grises, se tratará un poco más abajo en profundidad. Una de las cosas que quería era que las imágenes del blog se mostraran, en principio, desaturadas.

Con jQuery encontré el modo de hacerlo (y lo copié), encontrándome con la barrera de la seguridad a nivel de navegador que impide modificar una imagen si ésta no se encuentra en el mismo servidor que donde se realizará y se mostrará esa manipulación. En la mayoría de los casos esto sería así: fotografía de Flickr, enlace a esa fuente y listo. Esta restricción me lo impedía, de manera que intenté dar un rodeo con un proxy chustillo montado en PHP con alarmantes y pobres resultados (agradezco consejos si alguien se ha visto en una situación similar) lo que me obligó a trabajar con un segundo entorno de pruebas aparte del servidor en local, ese servidor lo alojé directamente en el blog y sigue visible, Beta.

El efecto, como se observa, consiste en mostrar la imagen en blanco y negro y colorearla (realmente, mostrar la original) cuando colocamos encima el cursor del ratón a la vez que la enderezamos, al desplazar el cursor fuera del área que activa el evento la imagen vuelve a quedar levemente torcida y, de nuevo, sin colores.

La pataleta la tengo porque la pifia comentado sobre la seguridad y el acceso con getImageData del lienzo creado me obliga a duplicar el trabajo, subir la imagen a Flickr (por tener) y al servidor propio (para que no haya un cruce de nombres de dominios que eche por tierra la función del blanco y negro). No recordaba lo pésimo que es el gestor de documentos de WordPress, por cierto.

Formularios HTML5

Tirándome a la piscina he cambiado el DOCTYPE al futuro estándar HTML5 con lo que ello conlleva. De momento valida a ojos de la W3C, al menos la versión del entorno de pruebas. El motivo del cambio se debe a que, sí es cierto que el tema en cuestión no es enteramente HTML5, sí he recurrido a diversas de sus novedades (como el atributo placeholder de las cajas de texto). Las bondades de HTML5 en los formularios ahorran mucho trabajo y recursos si el navegador acompaña.

Por ejemplo, con una instalación limpia de WordPress, cuando realizamos un comentario sin especificar un nombre de usuario o un email válido, WordPress realizará la captura del contenido del formulario, enviará esa información con intención de registrarla en la base de datos, se realizará una validación, la validación será negativa ya que hay campos rellenados incorrectamente y WordPress redirigirá a una página fea a más no poder donde avisará del error, el usuario (ajeno al fallo, suponemos), pensará que la página está caída porque ni va a molestarse en leerlo o, si lo hace, se verá obligado a volver al formulario, buscar, encontrar y entender su error, solucionarlo y reintentar. Esto supone un consumo de tiempo y de máquina que nos ventilamos cuando dejamos en manos de los distintos navegadores (cliente, ya dejamos de lado las llamadas al servidor si el formulario no está correctamente cumplimentado) con sus mensajes de error tipo. Algo que ya se hacía añadiendo JavaScript y, oye, eso que nos ahorramos además de mostrar el mensaje en el idioma del navegador. Un ejemplo con Chrome v11 y con Firefox v4 en la imagen.

Una gozada, tonta, pero una gozada.

Responder a comentarios desde la barra flotante

La que denomináis con cariño, espero, «Gekobarra» posee mayor funcionalidad. Cierto es que está desactivada porque hay unos pequeños puntos del plugin original (en japonés) que no termino de adecuar, pero lo estará en breve. La barra flotante tal vez fue el elemento más llamativo del diseño recién jubilado y desde hacía tiempo quería dotarla de un poco más de protagonismo e interacción, no un simple enlace al último comentario sino un pequeño panel donde responder de manera rápida al anterior.

Su funcionamiento basado en AJAX me ha dado algún que otro problema, tanto en local como en el entorno beta, pero parece que está todo arreglado y lo poco que queda, repito, estará terminado en muy poco tiempo. Veréis un pequeño botón activador al final del comentario que presida la barra en ese momento. Espero que os llame la atención tanto como a mí.

Estilos

Efectivamente, como he mencionado ya, no quiero colores en la portada, ¿los hay? Si todo está bien y funciona correctamente, podría haber dos, el amarillo, que es el color con el que se resaltará el contenido seleccionado (por ejemplo, cuando queremos copiar un texto) dando la sensación de ser subrayado por un rotulador mientras que se mantiene el color resaltado en los resultados de búsqueda, no os olvidéis. ¿Qué oscuro motivo se esconde detrás de tan poco popular y triste decisión? Aparte de que carece de sentido que un tío que se hace llamar ElGekoNegro se muestre en un entorno tan blanco, la limpieza y el cambio. Cosas que pasan, supongo, pero lo veo ahora y os prometo que no sé en qué narices estaba pensando cuando mezclé aquellos colores como el verde y el naranja. Quiero pensar que, simplemente, entonces me gustaron. Pero ya no más. Escala de grises, en todo.

El tema prácticamente, carece de imágenes. Así como anteriormente aparecía una acompañando los comentarios o las categorías, ahora, las dos que hay son la lupa de la caja de búsqueda y el San Pancracio de quien hablaré un poco más profundamente después. Esto agiliza la carga del tema, sobretodo en dispositivos móviles No creo que sea necesario recurrir a iconos para expresar nada en este caso, no los echo en falta.

Revisión general de estilos, listas y citas

Para empezar, la anchura de los textos es más grande. Bienvenido sea. Desaparece (de una puta vez) la barra lateral. Bienvenido sea. El cuerpo del texto y el interlineado es ligeramente superior. Los párrafos comenzarán con un indentado exceptuando el primero de cada bloque y obviando el último pues será el «Visto en:», marca de la casa. Se compensa la escasez de imágenes con contenido visual creado con símbolos impresos, como no podía ser de otro modo, sigo recurriendo a los palos de las barajas de poker.

Unos ejemplos de listas y una cita recogida de un sosísimo tweet para que os hagáis una ide del resultado, no tiene mucho, pero parece ser que los que se dedican completamente a esto deciden mostrarlo sí o sí.

• Buscar ingredientes
• Cocinar el plato
• Servir

1. Fingir que te gusta
2. Sonreír sudando
3. Beber

Un trío de apesadumbrados grandes felinos sacia su hambre con cereales en su correspondiente plantación.

Tipografías

En toda la página se utiliza un máximo de cuatro tipografías (digitalmente hablando deberíamos referirnos a ellas como fuentes, pero allá cada cuál con sus problemas y las explicaciones que haya de dar a su respectivo doctor en el psiquiátrico) más las propias decisiones que toma cada navegador. Hay vida más allá de Arial y Comic Sans (ampliamente utilizada en el mundo empresarial, la hostia) y no sabéis cómo se disfruta en un ordenador (o cacharro con pantalla) Apple, no es esnobismo, es que, joder, las tipografías aquí se representan con una calidad que da gusto, me malacostumbro, programo y diseño aquí en OS X, me voy a otro ordenador a mirar el resultado y todo termina en un suficiente y autocomplaciente «Meh…». No es justo.

• StampooRegular, disponible en diversas tiendas y en discos duros de hermanas diseñadoras, es la utilizada en el encabezado del blog dando un aspecto robusto y algo vasto Un Lagarto Abuhardillado.
• PFHandbookPro, igualmente disponible en tiendas y catálogos tipográficos familiares, es el estilo predominante en todo el diseño. Se utilizan, dependiendo el momento, diferentes sabores: PFHandbookProBold, PFHandbookProExtraThin, PFHandbookProLightItalic y PFHandbookProExtraThinItalic.
• EuphorigenicRegular, igual que las anteriores, de pago, es la que he escogido para títulos de las entradas y la primera letra de los enlaces superiores. Me recuerda a marry Poppins y uno tuvo una infancia. Me parece muy, muy bonita.
• HarabaraHandItalic, al contrario que el resto ésta es gratuita y su función única y exclusivamente reside en mostrar nombres, simulando firmas, y dibujar la primera letra de cada entrada.

Uso y abuso de CSS3

Como chicos listos que sois habréis adivinado que si me tiro a la piscina con HTML5, no iba a dejar al algo más extendido (pero tan poco te creas que 100% soportado) CSS3. La hoja de estilos está repleta de referencias a propiedades propias, no estándares, de motores de navegación como Webkit o Gecko (el de Firefox, nada que ver conmigo), de forma que, primero, en Internet Explorer esta página resulta una fiesta divertidísima y, segundo, no hay Dios que lo valide.

He mirado la versión de pruebas desde distintos teléfonos y en modelos bastante extendidos como el iPhone 4 (omnipresente) o el Samsung Galaxy S el resultado es más que satisfactorio, muy notable me atrevería a decir, sin embargo cuando me animé, rezando, a ver el resultado de los pequeños avances en esos bichos del demonio llamados BlackBerry, me desilusioné, no era la primera vez, ya había tenido escarceos previos con esas maquinitas endiabladas. En Internet Explorer he realizado pruebas, muy tontas y casi despreciables, en sus versiones 7 y 8, hay cosas que mejorar, pero ni idea de cómo queda en un 9, ya que lo he mirado desde Windows XP, que no olvidemos que ya tiene una década a sus espaldas.

Otros cambios

• Scroll suave cuando queremos subir desde el borde inferior de una página cualquiera pulsando en su correspondiente botón, ↑
• Avatares (Gravatar) más por presión social que por interés propio, pero ahí están para que os partáis la cara viéndosla
• La dirección de correo del blog cambia a sonrie@elgekonegro.com, demasiado optimista para mí, también le saqué un sabor raro al ColaCao aquél día
• He vuelto a colocar quicktags (botoncitos de formateado de texto) en los comentarios
• Integración con iTunes Ping. Que noooo…

¿Qué es 俳句?, ¿y tú me lo preguntas?, Haiku eres tú

Poesía japonesa que, como casi todos, habréis oído mencionar a Lisa Simpson, ese personaje infame y deleznable. Con el tiempo creo que eliminaré su grafía kanjiloquesea, 俳句, y se mostrarán directamente los versos que vaya encontrándome y me resulten bonitos o los que vaya creando yo. En castellano todos suenan igual de mal así que parto con esa enorme ventaja, madre árbol, luna de gato.

De la publicidad a la mendicidad

Lo prometido es deuda y San Pancracio vuelve, en su propio espacio y sin molestar a absolutamente nadie. Nunca se llegó a ir pero hace un año fui expulsado del Edén que presuponemos es Google AdSense por incumplir mi parte del trato, que era quedarme quietecito, y ahora le he encomendado un nuevo trabajo que, si lo habéis visto ya, no creo que merezca explicación. Aún así, hace unas semanas, unas cuantas, un amigo que sabía que yo andaba un poco… enfurruñado con el mundo, me quiso alegrar regalándome un libro, no voy a decir quién es porque de lo contrario los otros dos habitantes de Luxemburgo se me enfadarían, y me dio la idea.

En lugar de colocar asquerosa y repelente publicidad basada en un modelo anticuado (y tal) o buscar alternativas elitistas como pudiera ser FusionAds donde entrar para participar es complicado per sé, mucho más con un blog en castellano, prefiero mostrar mi lista de deseos de Amazon UK y confiar en vuestra buena fe. Es decir, ojo, os pongo en bandeja de plata con ribetes de oro la oportunidad, casi única, de regalarme cualquier pijada de las que ahí aparecen indiferentemente de si es el aniversario del blog, un 30 de septiembre, alguno de los muchos San Adrianes del santoral etc. No la dejéis escapar.

Sé que supone un cambio ya que nunca antes habíais tenido una opción tan accesible para regalarme nada que me hiciera feliz y tenéis razón, ya era hora de que os facilitara las herramientas para congratularme como es debido, para hacerme feliz como sólo vosotros lo merecéis. De parte de San Pancracio y mías, gracias de antemano. Espero que haya elementos en la lista para todos, de lo contrario avisad y haré el esfuerzo de rellenarla tan pronto como pueda, prometido.

Terminando ya, nada más que pediros que os deis una vuelta por vuestra casa de siempre con otros muebles y esa pared recién pintada, a ver si la decoración os place.

Visto en: Un Lagarto Abuhardillado.