{"id":3991,"date":"2011-05-04T23:41:52","date_gmt":"2011-05-04T21:41:52","guid":{"rendered":"http:\/\/www.elgekonegro.com\/web\/?p=3991"},"modified":"2011-05-05T10:20:01","modified_gmt":"2011-05-05T08:20:01","slug":"thb-0-9-swallow","status":"publish","type":"post","link":"https:\/\/www.elgekonegro.com\/web\/thb-0-9-swallow\/","title":{"rendered":"TH#b.0.9 Swallow"},"content":{"rendered":"

S<\/span>egundos fuera, empieza el espect\u00c3\u00a1culo de esta velada. Aviso a los navegantes que lo sigan desde el canal RSS que, como adelant\u00c3\u00a9, he realizado un lavado de cara al blog con un dise\u00c3\u00b1o nuevo<\/strong> que, si bien es una mutaci\u00c3\u00b3n del anterior s\u00c3\u00b3lo que bastante radicalizada y con una clara inspiraci\u00c3\u00b3n comiquera<\/em> ya que tanto el contenido como los comentarios se muestran ahora como bocadillos o burbujas de un c\u00c3\u00b3mic.<\/p>\n

A\u00c3\u00ban tiene asperezas por pulir de forma que no est\u00c3\u00a1 disponible para su descarga, avisar\u00c3\u00a9 cuando lo est\u00c3\u00a9 subi\u00c3\u00a9ndolo a alg\u00c3\u00ban repositorio en voga como Github o Pornotube de manera que todos vosotros pod\u00c3\u00a1is jugar a buscar los fallos de mi c\u00c3\u00b3digo, para hacerlo m\u00c3\u00a1s seguro o para humillarme, lo que sea.\u00c2\u00a0Empecemos a destripar sus entra\u00c3\u00b1as, que hay bastantes cambios.<\/p>\n

It’s a simple matter of weight ratios!<\/h2>\n

Previendo todo tipo de co\u00c3\u00b1as y bromas que os har\u00c3\u00a9 tragar sobre el nombre, me adelanto a explicar la nomenclatura del tema. Como en la ocasi\u00c3\u00b3n anterior<\/a>, el t\u00c3\u00adtulo le viene de una escena de mi pel\u00c3\u00adcula favorita de mis c\u00c3\u00b3micos favoritos y como a estas alturas del cuento no croe que sea necesario repetir de qu\u00c3\u00a9 estamos hablando, lo enlazo, golondrinas<\/a>.\u00c2\u00a0\u00c2\u00bfPor qu\u00c3\u00a9? Porque me parece ligero y r\u00c3\u00a1pido cual\u00c2\u00a0Hirundo rustica<\/em>.<\/p>\n

Nuevas funcionalidades<\/h2>\n

Lamento que vaya a mezclar palabrer\u00c3\u00ada ins\u00c3\u00adpida vendida al peso con tecnicismos que a la mayor\u00c3\u00ada ni os van ni os vienen, pero es lo que toca y tocar\u00c3\u00a1 a lo largo de todo el post. Creo que era obligatorio ofrecer m\u00c3\u00a1s que un cambio visual (despu\u00c3\u00a9s de m\u00c3\u00a1s de dos a\u00c3\u00b1os con el tema anterior) y aunque hay pasos que han venido marcados por c\u00c3\u00b3mo WordPress y otra gente ha ido abri\u00c3\u00a9ndose camino, hay otros puntos en los que no nos tenemos que ce\u00c3\u00b1ir a un triste sota, caballo y rey. A ver qu\u00c3\u00a9 sale de la coctelera.<\/p>\n

Navegaci\u00c3\u00b3n J-K<\/h3>\n

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\u00c3\u00b3 algo b\u00c3\u00a1sico pero tan atractivo y funcional que me parece que Matt Mullenweg deber\u00c3\u00ada incluirlo forzosamente en WordPress a nivel de core<\/code> y as\u00c3\u00ad se o he hecho saber (y ni un triste \u00c2\u00abGracias, pero no\u00c2\u00bb he tenido como respuesta de momento). Posteriormente ha ido apareciendo en multitud de servicios y portales m\u00c3\u00a1s siendo los m\u00c3\u00a1s conocidos Gmail y Google Reader.<\/p>\n

La navegaci\u00c3\u00b3n J-K no consiste en otra cosa que en poderte desplazar de un elemento a otro de un listado a golpe de teclado<\/strong>, J para el siguiente, K para el posterior. En el blog esta funcionalidad aparece en aquellas p\u00c3\u00a1ginas donde se recurre al famoso loop<\/code>: \u00c3\u00adndice o archivos, y en los comentarios de cada una de las entradas. Tardas poco en acostumbrarte y tambi\u00c3\u00a9n tardas poco en echarlo de menos.<\/p>\n

Forzado de im\u00c3\u00a1genes a blanco y negro<\/h3>\n

Imagino que ya os habr\u00c3\u00a9is dado cuenta de que toda la p\u00c3\u00a1gina (al menos la portada) se encuentra en escala de grises, se tratar\u00c3\u00a1 un poco m\u00c3\u00a1s abajo en profundidad. Una de las cosas que quer\u00c3\u00ada era que las im\u00c3\u00a1genes del blog se mostraran, en principio, desaturadas.<\/p>\n

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

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\u00c3\u00b3n a la vez que la enderezamos, al desplazar el cursor fuera del \u00c3\u00a1rea que activa el evento la imagen vuelve a quedar levemente torcida y, de nuevo, sin colores.<\/p>\n

La pataleta la tengo porque la pifia comentado sobre la seguridad y el acceso con getImageData<\/code> 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\u00c3\u00b3n del blanco y negro). No recordaba lo p\u00c3\u00a9simo que es el gestor de documentos de WordPress<\/strong>, por cierto.<\/p>\n

Formularios HTML5<\/h3>\n

Tir\u00c3\u00a1ndome a la piscina he cambiado el DOCTYPE<\/code> al futuro est\u00c3\u00a1ndar HTML5 con lo que ello conlleva. De momento valida a ojos de la W3C, al menos la versi\u00c3\u00b3n del entorno de pruebas<\/a>. El motivo del cambio se debe a que, s\u00c3\u00ad es cierto que el tema en cuesti\u00c3\u00b3n no es enteramente HTML5, s\u00c3\u00ad he recurrido a diversas de sus novedades (como el atributo placeholder<\/code> de las cajas de texto). Las bondades de HTML5 en los formularios ahorran mucho trabajo y recursos si el navegador acompa\u00c3\u00b1a<\/strong>.<\/p>\n

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

\"Comparaci\u00c3\u00b3n<\/p>\n

Una gozada, tonta, pero una gozada.<\/p>\n

Responder a comentarios desde la barra flotante<\/h3>\n

La que denomin\u00c3\u00a1is con cari\u00c3\u00b1o, espero, \u00abGekobarra\u00bb posee mayor funcionalidad. Cierto es que est\u00c3\u00a1 desactivad<\/strong>a porque hay unos peque\u00c3\u00b1os puntos del plugin original (en japon\u00c3\u00a9s) que no termino de adecuar, pero lo estar\u00c3\u00a1 en breve. La barra flotante tal vez fue el elemento m\u00c3\u00a1s llamativo del dise\u00c3\u00b1o reci\u00c3\u00a9n jubilado y desde hac\u00c3\u00ada tiempo quer\u00c3\u00ada dotarla de un poco m\u00c3\u00a1s de protagonismo e interacci\u00c3\u00b3n, no un simple enlace al \u00c3\u00baltimo comentario sino un peque\u00c3\u00b1o panel donde responder de manera r\u00c3\u00a1pida al anterior.<\/p>\n

Su funcionamiento basado en AJAX me ha dado alg\u00c3\u00ban que otro problema, tanto en local como en el entorno beta, pero parece que est\u00c3\u00a1 todo arreglado y lo poco que queda, repito, estar\u00c3\u00a1 terminado en muy poco tiempo<\/strong>. Ver\u00c3\u00a9is un peque\u00c3\u00b1o bot\u00c3\u00b3n activador al final del comentario que presida la barra en ese momento. Espero que os llame la atenci\u00c3\u00b3n tanto como a m\u00c3\u00ad.<\/p>\n

Estilos<\/h2>\n

Efectivamente, como he mencionado ya, no quiero colores en la portada, \u00c2\u00bflos hay? Si todo est\u00c3\u00a1 bien y funciona correctamente, podr\u00c3\u00ada haber dos, el amarillo, que es el color con el que se resaltar\u00c3\u00a1 el contenido seleccionado (por ejemplo, cuando queremos copiar un texto) dando la sensaci\u00c3\u00b3n de ser subrayado por un rotulador mientras que se mantiene el color resaltado en los resultados de b\u00c3\u00basqueda<\/a>, no os olvid\u00c3\u00a9is. \u00c2\u00bfQu\u00c3\u00a9 oscuro motivo se esconde detr\u00c3\u00a1s de tan poco popular y triste decisi\u00c3\u00b3n? Aparte de que carece de sentido que un t\u00c3\u00ado 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\u00c3\u00a9 en qu\u00c3\u00a9 narices estaba pensando cuando mezcl\u00c3\u00a9 aquellos colores<\/strong> como el verde y el naranja. Quiero pensar que, simplemente, entonces me gustaron. Pero ya no m\u00c3\u00a1s. Escala de grises, en todo.<\/p>\n

El tema pr\u00c3\u00a1cticamente, carece de im\u00c3\u00a1genes. As\u00c3\u00ad como anteriormente aparec\u00c3\u00ada una acompa\u00c3\u00b1ando los comentarios o las categor\u00c3\u00adas, ahora, las dos que hay son la lupa de la caja de b\u00c3\u00basqueda y el San Pancracio de quien hablar\u00c3\u00a9 un poco m\u00c3\u00a1s profundamente despu\u00c3\u00a9s. Esto agiliza la carga del tema, sobretodo en dispositivos m\u00c3\u00b3viles No creo que sea necesario recurrir a iconos para expresar nada en este caso<\/strong>, no los echo en falta.<\/p>\n

Revisi\u00c3\u00b3n general de estilos, listas y citas<\/h3>\n

Para empezar, la anchura de los textos es m\u00c3\u00a1s grande. Bienvenido sea. Desaparece (de una puta vez<\/a>) la barra lateral. Bienvenido sea. El cuerpo del texto y el interlineado es ligeramente superior. Los p\u00c3\u00a1rrafos comenzar\u00c3\u00a1n con un indentado exceptuando el primero de cada bloque y obviando el \u00c3\u00baltimo pues ser\u00c3\u00a1 el \u00abVisto en:\u00bb, marca de la casa. Se compensa la escasez de im\u00c3\u00a1genes con contenido visual creado con s\u00c3\u00admbolos impresos, como no pod\u00c3\u00ada ser de otro modo, sigo recurriendo a los palos de las barajas de poker<\/strong>.<\/p>\n

Unos ejemplos de listas y una cita recogida de un sos\u00c3\u00adsimo tweet<\/a> para que os hag\u00c3\u00a1is una ide del resultado, no tiene mucho, pero parece ser que los que se dedican completamente a esto deciden mostrarlo s\u00c3\u00ad o s\u00c3\u00ad.<\/p>\n