Introspección - Tienda de ultramarinos
logo Tienda de Ultramarinos
Categorías Introspección

Ininite Scroll + Automatic Text Expander

Dos de los detalles en los que más me he esforzado y que más me gustan del nuevo diseño son que tenga scroll infinito, de modo que no hace falta clicar en página atrás para ver viejos posts (tanto en la página principal como en categorías), y que las entradas aparezcan contraídas con posibilidad de extenderse en el mismo lugar.

Activar el scroll infinito es muy fácil en WordPress utilizando el plugin Infinite Scroll, que funciona perfectamente y es sencillísimo de configurar. Únicamente hay que decirle bajo qué clases CSS están los posts y el link de navegación atrás. Nada más.

Por otro lado, para facilitar las cosas decidí que mostrar unos pocos párrafos sería lo ideal. Busqué y busqué, pero no fui capaz de encontrar nada que cortase los artículos con posibilidad de expandirlos. Creo que la única alternativa ahora mismo en WordPress es mandar que aprezca un extracto (the_excerpt()) en lugar de todo el contenido (the_content()), con el cuál eliges un número de caracteres que quieres que se muestren.

La función propia de wordpress parece ser bastante probre y hay muchos plugins mejorándola, evitando que corte palabras enteras, que corte etiquetas HTML, etc. Pero nada de esto hacía lo que yo quería, pues obliga al lector a abrir el post y cargar otra página (de lo cual algunos estarán encantadísimos porque les suma visitas; pero mi intención es que me lean, no hacerme pajas con las estadísticas de páginas visitadas).

De ese modo, terminé por bajarme Text Expander, un plugin que permite contraer ciertas partes de un post simplemente escribiendo entre corchetes EXPAND y /EXPAND rodeando al texto a ocultar. Parecía la solución… pero hubiera supuesto añadir a mano en cada una de todas las entradas del blog esas etiquetas, lo cual es una tarea titanica. Además de que si algún día decido cambiarlo supondría un esfuerzo equivalente.

Por eso terminé por empezar a cacharrear con el código del plugin para hacerme algo a la medida. Ahora, para cada entrada que se carga se cuentan los párrafos que tiene, y si son más de cinco, le digo que me añade el EXPAND entre el segundo y el tercero. En realidad no sólo tiene en cuenta párrafos, sino también listas, citas e imágenes. Parecía sencillo, pero la cosa se empezó a complicar cuando me di cuenta de que había que tener mucho cuidado con los párrafos dentro de un blockquote, o las sublistas dentro de listas (ul); de lo contrario, al perderse las etiquetas de cierre, se desestructuraba todo el blog. Creo que finalmente he sido capaz de solucionarlo, pero como puede haber alguna combinación que no haya tenido en cuenta os pediré que si en algún momento descubrís algún error me lo comuniquéis.

Otro problema que me costó identificar fue que las nuevas entradas obtenidas al deslizar la página hasta el final se cargaban expandidas, de modo que pensaba que no estaba aplicandose la conversión allí. Al final me di cuenta de que la contracción se aplicaba al cargar la página con una línea de Javascript, pero esto no funciona con las nuevas al estar ya “cerrada” la web. Afortunadamente Infinite Scroll incluye un apartado en su configuración que permite al usuario añadir código Javascript que se invoque una vez el nuevo contenido se carga, de modo que con tres o cuatro líneas solucioné el problema.

Creo que es algo bastante útil y que quizás más gente necesite algo así, de modo que he pensado que quizás podría darle un retoque y publicarlo como plug-in; aunque nunca lo he hecho así que no tengo ni idea de si es un proceso sencillo. ¿Alguien tiene experiencia en plugins de WordPress y puede darme un consejo?

Por cierto, pensé que sería interesante dejar la primera entrada de la página principal directamente extendida, pues al ser la última publicada será más probable que la gente entre a leer esa. ¿Os gusta así o la preferís contraída como el resto?

Validación XHTML para WordPress

Si los estándares están para algo es para respetarlos. En la informática, donde cada cosa puede ser de su padre y de su madre (y generalmente lo son) el uso de estándares tiende a facilitar mucho las cosas, especialmente la compatibilidad. Que todavía sea necesario llenar las páginas webs de scripts detectando el navegador para utilizar un código u otro tendría que darnos vergüenza.

Y no sólo en la informática, los estándares facilitan la vida allá dónde van. Los tamaños de las camas son estándar: o son de 80, o son de 90, pero no vas a tener camas de 85; lo cual ayuda mucho al comprar sábanas y demás. El formato de etiquetado de las camisetas o zapatos es estándar: una M siempre es más pequeña que una L, y un 38 es más pequeño que un 42. Sin embargo no es estándar la medida de las mismas, por lo que dependiendo de la marca L y XL tienen tamaños completamente diferentes. Eso significa que en mi armario hay camisetas de varios tallajes, y cuando compras por internet tienes que buscar las especificaciones del fabricante de ese modelo y comparar con las de casa.

Otra cosa que no es estándar son los cargadores de los móviles, por lo que siempre has de andar con el tuyo a cuestas y ningún amigo puede dejarte el suyo, incluso de la misma marca. Sí, Nokia siempre ha seguido una muy buena política al respecto, hasta que los redujeron de tamaño hace poco y vuelta a empezar. Las tarjetas de crédito y los carnéts son estándar, y por eso todos caben perfectamente en tu cartera.

En internet, la organización encargada de la adopción de estándares es el World Wide Web Consortium (W3C), dirigido por Tim Berners-Lee, el padre de la web. El W3C se compone de un amplio número de expertos que velan por la compatibilidad de todos los estándares y por conseguir un consenso con la industria para que los navegadores y herramientas soporten un núcleo básico de funcionalidades con el que poder hacer cosas sin volverse loco por saber si lo que has hecho se verá igual en todas partes.

Como muchos saben y habrán cacharreado en algún momento de sus vidas, la base de las páginas web es el lenguaje HTML. Otro metalenguaje de marcado que puede parecer muy similar es XML, utilizado para organizar y etiquetar documentos de texto, funcionando mediante etiquetas de la misma forma que HTML. No puede considerarse un lenguaje directamente porque en realidad sólo consta de un conjunto de directrices y especificaciones sobre cómo utilizarse, por lo que cada uno puede utilizar las etiquetas y valores que le vengan en gana. Simplemente tiene que respetar la estructura y formato de XML. Este formato es muy práctico para procesar cualquier tipo de información con un ordenador y es ampliamente utilizado en múltiples áreas.

Como decía, HTML y XML son muy similares, pero el primero no respeta todas las especificaciones del segundo, por lo que se inventó XHTML, que es básicamente un fichero HTML con la estructura que dicta XML. Una de las principales características es que todas las etiquetas deben ser correctamente cerradas, cosa que no era necesaria con HTML, o la prohibición de anidar ciertas etiquetas en otras.

De XHTML 1.0 existen diferentes versiones, cada una más laxa que la anterior con respecto a las normas. Son Strict, Transitional y Frameset. Luego se creó XHTML 1.1, que es XHTML 1.0 Strict con alguna cosa más. La versión 2.0 lleva 10 años de borradores. Para saber si tu página cumple los estándares, W3C ofrece su validador.

Una de las principales motivaciones de la W3C detrás de todos estos estándares es separar la definición de la estructura de una página de la información mostrada por la misma. Un buen aliado para ello han sido las hojas de estilos CSS, una poderosa herramienta para definir el diseño de tu web, y que ha desplazado por completo a las famosas “tablas” tan utilizadas en los 90. En aquellos tiempos, si querías colocar varios elementos en distintos puntos tenías que llenar la página de tablas invisibles con infinitas filas y columnas para cada situación. Con CSS todo es un mundo maravilloso de orden y funcionalidad.

Afortunadamente, con el nuevo diseño he tenido bastante suerte y seguía los estándares bastante bien, salvo por algunas etiquetas mal cerradas aquí o haya, que incluso puede que hayan sido fallo mío con las modificaciones.

Otro pequeño problema ha venido con el plugin oficial de Statcounter, que te introduce tres líneas en el blog. Utiliza target=”_blank” en el vínculo (abrir en ventana nueva) lo cual está desaconsejado por el W3C. También olvidan cerrar la etiqueta de la imagen. Tienen los comentarios cerrados, por lo que he dejado nota en el repositorio de plugins de WordPress. Para arreglarlo tienes que ir al editor de plugins de tu WordPress y hacer los cambios en el fichero php. En mi caso es la línea 288.

Un problema “peor” viene con las galerías de imágenes que WordPress te permite insertar en las entradas. Casualmente ayer utilicé por primera vez la opción de galería para mostrar el viejo diseño; esto es básicamente como publicar un álbum de fotos de forma automática, sin necesidad de insertar las imágenes una a una. Si no llego a utilizarlo ni me hubiese dado cuenta.

Resulta que al insertar la galería puedes seleccionar varias opciones, con lo que dependiendo de cada una tendrá distintos formatos. Estos formatos están definidos por un CSS que se copia en el cuerpo de la entrada. Esto está tremendamente mal, porque a fin de cuentas estás mezclando la definición con el contenido. HTML está dividido en dos secciones: cabecera y cuerpo, head y body. Lo correcto es que en la cabecera estén todas las definiciones y en el cuerpo la información.

Realmente las CSS suelen estar en un fichero aparte, el cual indicas en la cabecera. Esto te permite utilizar la misma definición en cualquier página sin tener que copiar las definiciones en cada una, pero para cosas puntuales como ésta, es correcto ponerlas simplemente en la cabecera.

Tras barajar varias posibles soluciones a mano, me he decantado por googlear… y efectivamente es un problema que había inquietado a muchos otros antes. Está publicado desde hace trece meses en el trac de WordPress, pero no se se implementarán soluciones en la próxima versión. (Trac es una herramienta utilizada para la gestión de errores en un proyecto). Mientras tanto, se han publicado varios plugins solucionándolo (están enlazados en los comentarios del trac). Yo he instalado Cleaner WordPress Gallery, que simplemente crea un fichero CSS aparte y lo enlaza en la cabecera.

Así pues, finalmente he conseguido superar satisfactoriamente el test de XHTML 1.1.

Nuevo diseño


Warning: array_key_exists(): The first argument should be either a string or an integer in /homepages/37/d223153170/htdocs/wordpress/wp-content/plugins/cleaner-gallery/inc/default-filters.php on line 185

Warning: array_key_exists(): The first argument should be either a string or an integer in /homepages/37/d223153170/htdocs/wordpress/wp-content/plugins/cleaner-gallery/inc/default-filters.php on line 185

Warning: array_key_exists(): The first argument should be either a string or an integer in /homepages/37/d223153170/htdocs/wordpress/wp-content/plugins/cleaner-gallery/inc/default-filters.php on line 185

Warning: array_key_exists(): The first argument should be either a string or an integer in /homepages/37/d223153170/htdocs/wordpress/wp-content/plugins/cleaner-gallery/inc/default-filters.php on line 185

Warning: array_key_exists(): The first argument should be either a string or an integer in /homepages/37/d223153170/htdocs/wordpress/wp-content/plugins/cleaner-gallery/inc/default-filters.php on line 185

Warning: array_key_exists(): The first argument should be either a string or an integer in /homepages/37/d223153170/htdocs/wordpress/wp-content/plugins/cleaner-gallery/inc/default-filters.php on line 185

Como podréis ver los que todavía seguis los vínculos del RSS o no leeis todo desde vuestro agregador, acabo de estrenar un diseño del blog completamente nuevo.

Llevaba unos días con ganas de hacerle un guiño a Irlanda para que se note que estoy aquí de Erasmus, y de paso me ha apetecido cambiar todo lo demás, que empezaba a aburrirme. Desde que pasé a mi propio dominio en febrero de 2008 he estado utilizando siempre el mismo, clasicBeauty, hace ahora ya más de dos años y medio. Me apetecía algo con una sola columna, y tras unas cuantas búsquedas al final encontré Balance en WordPressThemeBase.

Para hacer las pruebas de WordPress en local, instalé XAMPP (servidor Apache+MySql y otras cosas) donde tras unos días cacharreando he conseguido que todo funcione a mi gusto. Si os interesa saber cómo montarlo, hay muchas guías (otra) por internet.

Hay que tener cuidado al instalar el tema balance, ya que hay llamadas a varias funciones que no van. Viene sin readme ni indicación alguna, de modo que no sé si no existen en WordPress, o es necesario algún plugin, pero dan error y cargan mal las páginas; también hay otras que directamente no funcionan, pero sin fallos.

La realidad es que no tengo idea alguna de PHP, WordPress ni CSS, pero más o menos me he ido apañando. Es por eso que apenas he añadido nada al tema, sino que me he limitado a corregir problemas, traducirlo al español, y personalizar alguna chorradilla (ancho variable en lugar de fijo, sangrado de primera línea, orden de elementos…). Si alguien está interesado en la versión que modificada que utilizo, la cuelgo aquí.

Algo que desde luego no me ha gustado nada ha sido encontrar un texto encriptado en uno de los ficheros, exactamente en footer.php, el cual es llamado por casi todas las páginas para “cerrarlas”, pero todo lo que contiene es la línea:

<?php eval(base64_decode(‘chorrazo de caracteres’));?>

El ‘chorrazo de caracteres’ es demasiado largo para ponerlo, así que lo cuelgo en un fichero aparte. Esto, convertido a texto plano con un decodificador de base64 nos da las etiquetas de cierre del fichero html… y un enlace “fraudulento” a una página de medicinas muy chunga. No la enlazo, que a eso juegan, pero es cheapdrugs24.com/pain.html. Por supuesto me he cargado el texto en base64 y he puesto su equivalente desencriptado y sin enlaces indeseados. Por lo visto es un crackeo clásico sobre php.

Quizás el principal cambio con respecto al viejo diseño es la página principal, que antes mostraba unas ocho entradas, y ahora sólo una. Esto, lejos de buscar un aumento del número de visitas —trucos peores hemos visto para ello—, lo he preferido porque mis posts tienden a ser bastante largos, y ahora que con los viajes subo muchas fotografías se sobrecargaba demasiado la página inicial.

Otro cambio es el menú superior que se abre al clicar extra. Desde allí se puede acceder, entre otros lugares, a las últimas cinco entradas, así como ver los últimos comentarios. Además he eliminado mis recientes de Buzz, pero he dejado un enlace por si alguien sin gmail quiere leer lo que cuento allí.
También, al final de la página —tras el artículo— pueden verse los comentarios de todo el blog, y navegar por ellos. Justo debajo hay una caja de búsqueda “interactiva” que funciona bastante bien, recomiendo que la probeis. Con todo ello más las categorías y etiquetas creo que soluciona en parte la ausencia de más posts en la página principal.

Por lo demás, todavía quedan un par de detalles que me gustaría “mejorar” pero que funcionan tal y como están por lo que me he decidido a actualizar todo ya. Dejo también para la posteridad unas capturas del antiguo diseño, tomadas instantes antes de subir el nuevo. Por si a alguien le apetece comparar o algo…

¿Opiniones? ¿Arreglos? ¿Fallos? ¿Mejoras? Soy todo oídos ojos.

Mostrar Buzz en tu blog

Lo mejor de utilizar WordPress es que hay una comunidad muy amplia de usuarios, de modo que tarde o temprano siempre terminan apareciendo plugins para hacer todo tipo de cosas. Uno en el que llevaba pensando hace tiempo era la integración del blog con Buzz.

Después del estrepitoso fracaso de Google Wave, Buzz es la última apuesta de Google por las redes sociales. Es más bien una especie de Twitter, pero sin la absurda limitación de 140 caracteres que impone este servicio.

No sé si está teniendo demasiado éxito, pero me gusta porque me sirve para compartir y publicar enlaces de artículos interesantes que leo y que no dan de sí para una entrada en este blog. Una foto suelta, una viñeta, o una noticia con una simple frase comentándola u opinando. Nada más.

El caso es que para escribir una entrada aquí suelo dedicar un tiempo del que con el final del curso no dispongo, pero para añadir un Buzz no hace falta más de cinco minutos, así que para darle algo de vida a este blog estos días pensé que sería buena idea que se visualizasen aquí mis “buzzeos“.

Para ello, buscando Google Buzz en el repositorio de plugins de WordPress aparecen varios resultados. Instalé tres distintos, y tras probarlos, el que más me convenció fue Google Buzz ER. Me decanté por éste porque no sólo se veía mejor que los otros plug-in’s sino que puedes insertarlo donde quieras simplemente llamando a < ?php GoogleBuzzEr(); ?>. El resto sólo podías agregarlos mediante widgets.

El principal inconveniente de Gooble Buzz ER (y del resto que probé) es que no muestra correctamente: fotos, reshares, actualizaciones del blog, ni los enlaces agregados a la entrada mediante el botón que ofrece Buzz. De esos, los tres primeros apenas me importaban, pero el del enlace sí, porque es como suelo compartir los links con Buzz.

Así que entre ayer y hoy he estado cacharreando con el código y al final he conseguido que se muestren estos links. Si a alguien le interesa, hay que añadir las siguientes líneas.

Primero buscamos function gb_getData(), donde encontraremos un bucle foreach($xml->entry as $data), y allí dentro, por la línea 110, estará $mediaAttr = $media->content->attributes();. Después de esta asignación tenemos que escribir:

$tmp['mediaurl'] = $mediaAttr['url'];
$tmp['mediaAttr'] = $mediaAttr;

Con eso ya hemos obtenido los datos del xml de nuestro perfil de buzz. Ahora vamos a la función que escribe esos datos function gb_printData($data). Allí tenemos cada Buzz representado de la siguiente forma:

<div class='gber_post'>
{$v['content']}
{$v['imgSrcCont']}
/** AQUÍ **/
<span class='gber_time'>{$this->gb_showTime(strtotime($v['updated']))}, </span>
<span class='gber_comment'><a href='{$v['href']}'>comment</a></span>
</div>";

La línea de /** AQUÍ **/ la he incluido yo y es dónde habría que añadir:

<a href='{$v['mediaurl']}'>{$v['mediatitle']}_link</a>

De esta forma se mostrarán correctamente los links incluidos en el Buzz mediante el botón correspondiente. Del resto de problemas sólo he intentado solucionar los reshares y las acualizaciones de sitios agregados como el blog, pero no he sido capaz de encontrar en el xml cómo demonios están enlazados estos datos.

Google Buzz ER está publicado por Ivan Lazarevic bajo licencia GNU, de modo que pongo a disposición de quien quiera la versión actual (1.4) con las modificaciones que he detallado anteriormente. Descargar Google Buzz ER modificado.

Mi efecto Doppler

Soy un impaciente, poco después de publicar el gif cuántico, tomé la foto que tenía con el busto de Christian Doppler y, a golpe de varita, extraje mi imagen.

Hoy, a base de pegar, reducir tamaño, pegar, reducir… he hecho este montajillo. Una vez terminado no me ha convencido que uno de los brazos salga cortado, así que las imágenes las he ido poniendo en diferentes capas cada una debajo de la anterior.

Sinceramente no sé cuál prefiero, así que publico ambas:

Efecto doppler 1

Efecto

Esto ha sido todo lo que se me ha ocurrido para representar el efecto Doppler con esa fotografía. Supongo que la verdadera frikada habría sido ir dando un tono cada vez más azulado a mi persona, pero eso se me acaba de ocurrir y podría haberme quedado demasiado chapucero. Si alguien tiene alguna idea mejor, soy todo oídos.

Y ya que estos días estoy con la tontería de los gifs, y para aprovechar una segunda foto que no había necesitado para esto, he preparado otro. Hay que suponer en todo momento que corro en dirección al observador, claro.

doppler-peq

doppler2-peq

Schrödinger’s Ender

Me hubiera gustado que mi siguiente entrada hablase sobre mi reciente viaje a Viena y Budapest donde me lo he pasado en grande, pero no he podido conseguir las fotografías hasta hace nada, y seleccionar cuáles subir y qué contar va a llevarme más de lo que esperaba, así que para ir abriendo boca pondré este gif.

Entramos en una universidad vienesa cuyo patio interior además de estar lleno de estudiantes aprovechando unos miserables rayos de sol, tenía ingentes cantidades de bustos de científicos famosos a los que yo no conocía en absoluto (pero cuyos nombres sonaban a cosas de medicina y química) hasta que nos encontramos con el busto del amigo Erwin Schrödinger, con el que no pude evitar hacerme estas dos fotografías.

Ender está vivo y muerto hasta que visitas Tienda de Ultramarinos

Si no lo entiendes deberías leer sobre un clásico de las paradojas de la física, fruto de aquellos maravillosos años de discusiones sobre la matería a principio de siglo. La que me hice con Christian Dopler tendrá que esperar a que le dedique un rato al photoshop o engañe a alguien que se maneje.

Erasmus a Cork (Irlanda)

Qué mejor día que hoy, San Patricio, para escribir esto.

La semana pasada se adjudicaron las plazas del CPS para el Erasmus del curso 2010/11. Finalmente me ha tocado Cork, al sur de Irlanda. Creo que habría preferido Gran Bretaña, pero sólo había un par de plazas y se las quedó gente con mejores notas que yo. De todas formas estoy bastante contento porque quería un país en el que se hablase inglés de forma habitual y no cuando comienzas tú la conversación en inglés.

Cork es la segunda ciudad más importante de irlanda con casi 200 000 habitantes, la cuarta parte de los cuales son estudiantes. Por lo que cuenta la Wikipedia, si ya de por sí los Irlandeses tienen un acento distinto respecto al resto de ingleses, en Cork tienen un acento distinto al resto de Irlanda. Mucho más cerrado y con su propio “argot”. Como cuando los de Huesca os decimos tajador, pozal, reglote, barzas o “de propio“. De hecho, afirman que incluso hay un acento distinto en cada margen del río que atraviesa la ciudad.

Irlanda era un país sumido en la miseria hasta que en los 90 y los 2000 despegó económicamente a la par que innumerables multinacionales (especialmente tecnológicas) establecieron sedes en el país, con lo que poco antes de la crisis llegó a tener uno de los mayores PIB per cápita del mundo. Sin embargo, las crisis devuelven a cada país a donde le corresponde y ahora los tenemos como compañeros con Grecia en la lista de los países más afectados y con menos perspectivas de superar la crisis a la par que nuestros vecinos europeos.

A todo esto, Cork es una ciudad costera del sur de Irlanda, lo que le sitúa en una posición privilegiada como puerto comercial, por lo que industrialmente es una ciudad muy importante. Ahí está la sede europea de Apple y de Heineken. Además, tiene sedes de Motorola, Amazon y EMC. Está claro que trabajo de informático no puede faltar.

Hoy tendré que echarme una Guinness (o más teniendo en cuenta el día que es) para ir acostumbrándome a las stout, que muy rara vez pido cerveza negra y creo que ahí será el menú del día. A ver si vuelvo a casa con uno de esos gorros que suelen regalar días como hoy.

Si ya llevo pocas entradas este mes, en lo que queda dudo que pueda escribir mucho más. No sólo este cuatrimestre llevo prácticas más complicadas que otras veces, sino que tengo que entregarlas de forma más constante y con menos tiempo entre una y otra que en otras ocasiones. Para terminar, a final de este mes tenemos que hacer la entrega del proyecto en el que estoy metido en mi trabajo, con lo que los últimos días siempre hay que dedicarle más horas y hay más estrés.

Caradura e ignorante

Ya sé que este vídeo tiene una o dos semanas, pero en su día no soporté más de dos o tres minutos del mismo y acabo de verlo completo. Esta versión que cuelgo, vista en El blog de Maceira, es muy llevadera porque está plagada de cartelitos graciosos que ayudan a tragar las barbaridades que suelta este señor. La verdad es que el número de bocadillos es excesivo, y por norma suelo detestar que aparezcan, pero en este vídeo ayudan bastante.

No sé si César Alierta simplemente iba borracho y no sabía lo que decía, pero me parece alucinante que el Presidente Ejecutivo de Telefónica demuestre tanta ignorancia sobre internet (que probablemente sea lo más importante que vende su compañía). Y no digo sólo del absurdo que plantea de cobrar a buscadores porque los usuarios de su red los utilicen, es que cuando intenta explicar el “claud compuitin” y otras cosas no dice más que tonterías sin ningún sentido: no sabe de lo que está hablando.

Y de verdad, me llama la atención que el presidente de Telefónica pueda ser tan ignorante en este tema. O eso, o es sólo un caradura más que se quiere subir al carro, tan de moda ahora, de cobrar por no hacer nada.