Un Lagarto abuhardillado

Segun­dos fuera, empieza el espec­táculo de esta velada. Aviso a los nave­gan­tes que lo sigan desde el canal RSS que, como ade­lanté, he rea­li­zado un lavado de cara al blog con un diseño nuevo que, si bien es una muta­ción del ante­rior sólo que bas­tante radi­ca­li­zada y con una clara ins­pi­ra­ción comi­quera ya que tanto el con­te­nido como los comen­ta­rios se mues­tran ahora como boca­di­llos o bur­bu­jas de un cómic.

Aún tiene aspe­re­zas por pulir de forma que no está dis­po­ni­ble para su des­carga, avi­saré cuando lo esté subién­dolo a algún repo­si­to­rio en voga como Git­hub o Por­no­tube de manera que todos voso­tros podáis jugar a bus­car los fallos de mi código, para hacerlo más seguro o para humi­llarme, lo que sea. Empecemos a des­tri­par sus entra­ñas, que hay bas­tan­tes cambios.

It’s a sim­ple mat­ter of weight ratios!

Pre­viendo todo tipo de coñas y bro­mas que os haré tra­gar sobre el nom­bre, me ade­lanto a expli­car la nomen­cla­tura del tema. Como en la oca­sión ante­rior, el título le viene de una escena de mi pelí­cula favo­rita de mis cómi­cos favo­ri­tos y como a estas altu­ras del cuento no croe que sea nece­sa­rio repe­tir de qué esta­mos hablando, lo enlazo, golon­dri­nas. ¿Por qué? Por­que me parece ligero y rápido cual Hirundo rus­tica.

Nue­vas funcionalidades

Lamento que vaya a mez­clar pala­bre­ría insí­pida ven­dida al peso con tec­ni­cis­mos que a la mayo­ría ni os van ni os vie­nen, pero es lo que toca y tocará a lo largo de todo el post. Creo que era obli­ga­to­rio ofre­cer más que un cam­bio visual (des­pués de más de dos años con el tema ante­rior) y aun­que hay pasos que han venido mar­ca­dos por cómo Word­Press y otra gente ha ido abrién­dose camino, hay otros pun­tos en los que no nos tene­mos que ceñir a un triste sota, caba­llo y rey. A ver qué sale de la coctelera.

Nave­ga­ción J-K

Esto es impor­tante, una cho­rrada, pero impor­tante. La pri­mera vez que lo vi creo que fue en un tema de un Tum­blr nor­mal y corriente y me pare­ció algo básico pero tan atrac­tivo y fun­cio­nal que me parece que Matt Mullen­weg debe­ría incluirlo for­zo­sa­mente en Word­Press a nivel de core y así se o he hecho saber (y ni un triste «Gra­cias, pero no» he tenido como res­puesta de momento). Pos­te­rior­mente ha ido apa­re­ciendo en mul­ti­tud de ser­vi­cios y por­ta­les más siendo los más cono­ci­dos Gmail y Goo­gle Reader.

La nave­ga­ción J-K no con­siste en otra cosa que en poderte des­pla­zar de un ele­mento a otro de un lis­tado a golpe de teclado, J para el siguiente, K para el pos­te­rior. En el blog esta fun­cio­na­li­dad apa­rece en aque­llas pági­nas donde se recu­rre al famoso loop: índice o archi­vos, y en los comen­ta­rios de cada una de las entra­das. Tar­das poco en acos­tum­brarte y tam­bién tar­das poco en echarlo de menos.

For­zado de imá­ge­nes a blanco y negro

Ima­gino que ya os habréis dado cuenta de que toda la página (al menos la por­tada) se encuen­tra en escala de gri­ses, se tra­tará un poco más abajo en pro­fun­di­dad. Una de las cosas que que­ría era que las imá­ge­nes del blog se mos­tra­ran, en prin­ci­pio, desaturadas.

Con jQuery encon­tré el modo de hacerlo (y lo copié), encon­trán­dome con la barrera de la segu­ri­dad a nivel de nave­ga­dor que impide modi­fi­car una ima­gen si ésta no se encuen­tra en el mismo ser­vi­dor que donde se rea­li­zará y se mos­trará esa mani­pu­la­ción. En la mayo­ría de los casos esto sería así: foto­gra­fía de Fli­ckr, enlace a esa fuente y listo. Esta res­tric­ción me lo impe­día, de manera que intenté dar un rodeo con un proxy chus­ti­llo mon­tado en PHP con alar­man­tes y pobres resul­ta­dos (agra­dezco con­se­jos si alguien se ha visto en una situa­ción simi­lar) lo que me obligó a tra­ba­jar con un segundo entorno de prue­bas aparte del ser­vi­dor en local, ese ser­vi­dor lo alojé direc­ta­mente en el blog y sigue visi­ble, Beta.

El efecto, como se observa, con­siste en mos­trar la ima­gen en blanco y negro y colo­rearla (real­mente, mos­trar la ori­gi­nal) cuando colo­ca­mos encima el cur­sor del ratón a la vez que la ende­re­za­mos, al des­pla­zar el cur­sor fuera del área que activa el evento la ima­gen vuelve a que­dar leve­mente tor­cida y, de nuevo, sin colores.

La pata­leta la tengo por­que la pifia comen­tado sobre la segu­ri­dad y el acceso con getImageData del lienzo creado me obliga a dupli­car el tra­bajo, subir la ima­gen a Fli­ckr (por tener) y al ser­vi­dor pro­pio (para que no haya un cruce de nom­bres de domi­nios que eche por tie­rra la fun­ción del blanco y negro). No recor­daba lo pésimo que es el ges­tor de docu­men­tos de Word­Press, por cierto.

For­mu­la­rios HTML5

Tirán­dome a la pis­cina he cam­biado el DOCTYPE al futuro están­dar HTML5 con lo que ello con­lleva. De momento valida a ojos de la W3C, al menos la ver­sión del entorno de prue­bas. El motivo del cam­bio se debe a que, sí es cierto que el tema en cues­tión no es ente­ra­mente HTML5, sí he recu­rrido a diver­sas de sus nove­da­des (como el atri­buto placeholder de las cajas de texto). Las bon­da­des de HTML5 en los for­mu­la­rios aho­rran mucho tra­bajo y recur­sos si el nave­ga­dor acom­paña.

Por ejem­plo, con una ins­ta­la­ción lim­pia de Word­Press, cuando rea­li­za­mos un comen­ta­rio sin espe­ci­fi­car un nom­bre de usua­rio o un email válido, Word­Press rea­li­zará la cap­tura del con­te­nido del for­mu­la­rio, enviará esa infor­ma­ción con inten­ción de regis­trarla en la base de datos, se rea­li­zará una vali­da­ción, la vali­da­ción será nega­tiva ya que hay cam­pos relle­na­dos inco­rrec­ta­mente y Word­Press redi­ri­girá a una página fea a más no poder donde avi­sará del error, el usua­rio (ajeno al fallo, supo­ne­mos), pen­sará que la página está caída por­que ni va a moles­tarse en leerlo o, si lo hace, se verá obli­gado a vol­ver al for­mu­la­rio, bus­car, encon­trar y enten­der su error, solu­cio­narlo y rein­ten­tar. Esto supone un con­sumo de tiempo y de máquina que nos ven­ti­la­mos cuando deja­mos en manos de los dis­tin­tos nave­ga­do­res (cliente, ya deja­mos de lado las lla­ma­das al ser­vi­dor si el for­mu­la­rio no está correc­ta­mente cum­pli­men­tado) con sus men­sa­jes de error tipo. Algo que ya se hacía aña­diendo JavaS­cript y, oye, eso que nos aho­rra­mos ade­más de mos­trar el men­saje en el idioma del navegador. Un ejem­plo con Chrome v11 y con Fire­fox v4 en la imagen.

Una gozada, tonta, pero una gozada.

Res­pon­der a comen­ta­rios desde la barra flotante

La que deno­mi­náis con cariño, espero, “Geko­ba­rra” posee mayor fun­cio­na­li­dad. Cierto es que está des­ac­ti­vada por­que hay unos peque­ños pun­tos del plu­gin ori­gi­nal (en japo­nés) que no ter­mino de ade­cuar, pero lo estará en breve. La barra flo­tante tal vez fue el ele­mento más lla­ma­tivo del diseño recién jubi­lado y desde hacía tiempo que­ría dotarla de un poco más de pro­ta­go­nismo e inter­ac­ción, no un sim­ple enlace al último comen­ta­rio sino un pequeño panel donde res­pon­der de manera rápida al anterior.

Su fun­cio­na­miento basado en AJAX me ha dado algún que otro pro­blema, tanto en local como en el entorno beta, pero parece que está todo arre­glado y lo poco que queda, repito, estará ter­mi­nado en muy poco tiempo. Veréis un pequeño botón acti­va­dor al final del comen­ta­rio que pre­sida la barra en ese momento. Espero que os llame la aten­ción tanto como a mí.

Esti­los

Efec­ti­va­mente, como he men­cio­nado ya, no quiero colo­res en la por­tada, ¿los hay? Si todo está bien y fun­ciona correc­ta­mente, podría haber dos, el ama­ri­llo, que es el color con el que se resal­tará el con­te­nido selec­cio­nado (por ejem­plo, cuando que­re­mos copiar un texto) dando la sen­sa­ción de ser sub­ra­yado por un rotu­la­dor mien­tras que se man­tiene el color resal­tado en los resul­ta­dos de bús­queda, no os olvi­déis. ¿Qué oscuro motivo se esconde detrás de tan poco popu­lar y triste deci­sión? Aparte de que carece de sen­tido que un tío que se hace lla­mar ElGe­ko­Ne­gro se mues­tre en un entorno tan blanco, la lim­pieza y el cam­bio. Cosas que pasan, supongo, pero lo veo ahora y os pro­meto que no sé en qué nari­ces estaba pen­sando cuando mez­clé aque­llos colo­res como el verde y el naranja. Quiero pen­sar que, sim­ple­mente, enton­ces me gus­ta­ron. Pero ya no más. Escala de gri­ses, en todo.

El tema prác­ti­ca­mente, carece de imá­ge­nes. Así como ante­rior­mente apa­re­cía una acom­pa­ñando los comen­ta­rios o las cate­go­rías, ahora, las dos que hay son la lupa de la caja de bús­queda y el San Pan­cra­cio de quien hablaré un poco más pro­fun­da­mente des­pués. Esto agi­liza la carga del tema, sobre­todo en dis­po­si­ti­vos móvi­les No creo que sea nece­sa­rio recu­rrir a ico­nos para expre­sar nada en este caso, no los echo en falta.

Revi­sión gene­ral de esti­los, lis­tas y citas

Para empe­zar, la anchura de los tex­tos es más grande. Bien­ve­nido sea. Des­a­pa­rece (de una puta vez) la barra late­ral. Bien­ve­nido sea. El cuerpo del texto y el inter­li­neado es lige­ra­mente supe­rior. Los párra­fos comen­za­rán con un inden­tado excep­tuando el pri­mero de cada blo­que y obviando el último pues será el “Visto en:”, marca de la casa. Se com­pensa la esca­sez de imá­ge­nes con con­te­nido visual creado con sím­bo­los impre­sos, como no podía ser de otro modo, sigo recu­rriendo a los palos de las bara­jas de poker.

Unos ejem­plos de lis­tas y una cita reco­gida de un sosí­simo tweet para que os hagáis una ide del resul­tado, no tiene mucho, pero parece ser que los que se dedi­can com­ple­ta­mente a esto deci­den mos­trarlo sí o sí.

• Bus­car ingredientes
• Coci­nar el plato
• Ser­vir

1. Fin­gir que te gusta
2. Son­reír sudando
3. Beber

Un trío de ape­sa­dum­bra­dos gran­des feli­nos sacia su ham­bre con cerea­les en su corres­pon­diente plantación.

Tipo­gra­fías

En toda la página se uti­liza un máximo de cua­tro tipo­gra­fías (digi­tal­mente hablando debe­ría­mos refe­rir­nos a ellas como fuen­tes, pero allá cada cuál con sus pro­ble­mas y las expli­ca­cio­nes que haya de dar a su res­pec­tivo doc­tor en el psi­quiá­trico) más las pro­pias deci­sio­nes que toma cada nave­ga­dor. Hay vida más allá de Arial y Comic Sans (amplia­mente uti­li­zada en el mundo empre­sa­rial, la hos­tia) y no sabéis cómo se dis­fruta en un orde­na­dor (o cacha­rro con pan­ta­lla) Apple, no es esno­bismo, es que, joder, las tipo­gra­fías aquí se repre­sen­tan con una cali­dad que da gusto, me mala­cos­tum­bro, pro­gramo y diseño aquí en OS X, me voy a otro orde­na­dor a mirar el resul­tado y todo ter­mina en un sufi­ciente y auto­com­pla­ciente «Meh…». No es justo.

• Stam­poo­Re­gu­lar, dis­po­ni­ble en diver­sas tien­das y en dis­cos duros de her­ma­nas dise­ña­do­ras, es la uti­li­zada en el enca­be­zado del blog dando un aspecto robusto y algo vasto Un Lagarto Abuhardillado.
• PFHand­book­Pro, igual­mente dis­po­ni­ble en tien­das y catá­lo­gos tipo­grá­fi­cos fami­lia­res, es el estilo pre­do­mi­nante en todo el diseño. Se uti­li­zan, depen­diendo el momento, dife­ren­tes sabo­res: PFHand­book­Pro­Bold, PFHand­book­ProEx­traT­hin, PFHand­book­Pro­Ligh­tI­ta­lic y PFHandbookProExtraThinItalic.
• Eup­ho­ri­ge­ni­cRe­gu­lar, igual que las ante­rio­res, de pago, es la que he esco­gido para títu­los de las entra­das y la pri­mera letra de los enla­ces supe­rio­res. Me recuerda a marry Pop­pins y uno tuvo una infan­cia. Me parece muy, muy bonita.
• Hara­ba­raHan­dI­ta­lic, al con­tra­rio que el resto ésta es gra­tuita y su fun­ción única y exclu­si­va­mente reside en mos­trar nom­bres, simu­lando fir­mas, y dibu­jar la pri­mera letra de cada entrada.

Uso y abuso de CSS3

Como chi­cos lis­tos que sois habréis adi­vi­nado que si me tiro a la pis­cina con HTML5, no iba a dejar al algo más exten­dido (pero tan poco te creas que 100% sopor­tado) CSS3. La hoja de esti­los está repleta de refe­ren­cias a pro­pie­da­des pro­pias, no están­da­res, de moto­res de nave­ga­ción como Web­kit o Gecko (el de Fire­fox, nada que ver con­migo), de forma que, pri­mero, en Inter­net Explo­rer esta página resulta una fiesta diver­ti­dí­sima y, segundo, no hay Dios que lo valide.

He mirado la ver­sión de prue­bas desde dis­tin­tos telé­fo­nos y en mode­los bas­tante exten­di­dos como el iPhone 4 (omni­pre­sente) o el Sam­sung Galaxy S el resul­tado es más que satis­fac­to­rio, muy nota­ble me atre­ve­ría a decir, sin embargo cuando me animé, rezando, a ver el resul­tado de los peque­ños avan­ces en esos bichos del demo­nio lla­ma­dos Bla­ck­Be­rry, me desilu­sioné, no era la pri­mera vez, ya había tenido escar­ceos pre­vios con esas maqui­ni­tas endia­bla­das. En Inter­net Explo­rer he rea­li­zado prue­bas, muy ton­tas y casi des­pre­cia­bles, en sus ver­sio­nes 7 y 8, hay cosas que mejo­rar, pero ni idea de cómo queda en un 9, ya que lo he mirado desde Win­dows XP, que no olvi­de­mos que ya tiene una década a sus espaldas.

Otros cam­bios

• Scroll suave cuando que­re­mos subir desde el borde infe­rior de una página cual­quiera pul­sando en su corres­pon­diente botón, ↑
• Ava­ta­res (Gra­va­tar) más por pre­sión social que por inte­rés pro­pio, pero ahí están para que os par­táis la cara viéndosla
• La direc­ción de correo del blog cam­bia a sonrie@elgekonegro.com, dema­siado opti­mista para mí, tam­bién le saqué un sabor raro al Cola­Cao aquél día
• He vuelto a colo­car quicktags (boton­ci­tos de for­ma­teado de texto) en los comentarios
• Inte­gra­ción con iTu­nes Ping. Que noooo…

¿Qué es 俳句?, ¿y tú me lo pre­gun­tas?, Haiku eres tú

Poe­sía japo­nesa que, como casi todos, habréis oído men­cio­nar a Lisa Sim­pson, ese per­so­naje infame y delez­na­ble. Con el tiempo creo que eli­mi­naré su gra­fía kan­ji­lo­que­sea, 俳句, y se mos­tra­rán direc­ta­mente los ver­sos que vaya encon­trán­dome y me resul­ten boni­tos o los que vaya creando yo. En cas­te­llano todos sue­nan igual de mal así que parto con esa enorme ven­taja, madre árbol, luna de gato.

De la publi­ci­dad a la mendicidad

Lo pro­me­tido es deuda y San Pan­cra­cio vuelve, en su pro­pio espa­cio y sin moles­tar a abso­lu­ta­mente nadie. Nunca se llegó a ir pero hace un año fui expul­sado del Edén que pre­su­po­ne­mos es Goo­gle AdSense por incum­plir mi parte del trato, que era que­darme quie­te­cito, y ahora le he enco­men­dado un nuevo tra­bajo que, si lo habéis visto ya, no creo que merezca expli­ca­ción. Aún así, hace unas sema­nas, unas cuan­tas, un amigo que sabía que yo andaba un poco… enfu­rru­ñado con el mundo, me quiso ale­grar rega­lán­dome un libro, no voy a decir quién es por­que de lo con­tra­rio los otros dos habi­tan­tes de Luxem­burgo se me enfa­da­rían, y me dio la idea.

En lugar de colo­car asque­rosa y repe­lente publi­ci­dad basada en un modelo anti­cuado (y tal) o bus­car alter­na­ti­vas eli­tis­tas como pudiera ser Fusio­nAds donde entrar para par­ti­ci­par es com­pli­cado per sé, mucho más con un blog en cas­te­llano, pre­fiero mos­trar mi lista de deseos de Ama­zon UK y con­fiar en vues­tra buena fe. Es decir, ojo, os pongo en ban­deja de plata con ribe­tes de oro la opor­tu­ni­dad, casi única, de rega­larme cual­quier pijada de las que ahí apa­re­cen indi­fe­ren­te­mente de si es el aniver­sa­rio del blog, un 30 de sep­tiem­bre, alguno de los muchos San Adria­nes del san­to­ral etc. No la dejéis escapar.

Sé que supone un cam­bio ya que nunca antes habíais tenido una opción tan acce­si­ble para rega­larme nada que me hiciera feliz y tenéis razón, ya era hora de que os faci­li­tara las herra­mien­tas para con­gra­tu­larme como es debido, para hacerme feliz como sólo voso­tros lo mere­céis. De parte de San Pan­cra­cio y mías, gra­cias de ante­mano. Espero que haya ele­men­tos en la lista para todos, de lo con­tra­rio avi­sad y haré el esfuerzo de relle­narla tan pronto como pueda, prometido.

Ter­mi­nando ya, nada más que pedi­ros que os deis una vuelta por vues­tra casa de siem­pre con otros mue­bles y esa pared recién pin­tada, a ver si la deco­ra­ción os place.

Visto en: Un Lagarto Abuhardillado.