GERIFALTITOS… juego en JQuery

Practicando a la hora de pasar juegos en Flash a un formato compatible para dispositivos de Apple, he realizado este juego -muy simple ^^- únicamente en JQuery y HTML5.

He aprovechado, como digo, la temática de Gerifaltitos para la realización del juego. En este caso, arrastrar el icono del individuo que va saliendo a Gurús o a Gerifaltes, dependiendo de a cuál crees que pertenece. O vamos, como yo lo he interpretado ^^. Así, también vale de promoción para el Juego de Cartas GERIFALTITOS.

También es interesante destacar la utilidad que ha sacado Adobe para que Flash no fenezca por culpa de HTML5 (bueno, realmente de Apple). Esta claro que Adobe también es un gigante y Flash un clásico. Y desde luego, no van a caer tan fácilmente, pese al boicot de la antigua empresa de Steve Jobs y a que está en contra de los estándares. Así, precisamente para pasar archivos Flash a estándares, está esta utilidad de la que hablo, Wallaby. Y que aún no he podido probar, pues parece que precisa de Flash CS5.5 y yo aún tengo instalado el Flash CS4 O_o. Os dejo el link por si a alguien le da por indagar o ya conoce el tema. Yo, desde luego, he pasado de Flash a javascript a pelo.

Buscador para partidasRol

¡Buscador para partidasRol!

Por fin tiene Buscador mi sitio web partidasRol -como ya sabrán-, macrositio de mis partidas de rol para la Tierra Media de Rolemaster. Tras la opción de Corsarios de Belfalas de hacerlo a mano -de resultados regulares- u optar por un buscador exerno, del estilo de Sphinx -demasiado complejo-, viene Google -cómo no- y lo soluciona todo con su Custom Search Engine para búsquedas personalizadas. O como restringir las búsquedas de Google a nuestro sitio web (o a los sitios que le indiquemos).

Para más información, véase mi entrada en mi Wikipedia de Criaturas sobre como Adjuntar un buscador personalizado en nuestro sitio web.

Todo esto viene a cuenta pues partidasRol es un sitio con muchos datos y detalles, y un buscador se hacía fundamental, más aún cuando habrá usuarios -quienes jugaron mis partidas- que seguro están interesados en ver a sus personajes, pero quizás no en profundizar mucho más en por otra parte tan interesante y prolijo sitio ^^.

Ejemplo de resultados obtenidos desde el Buscador personalizado.

Enciclopedia de criaturas versión AJAX operativa…

Tras tener que finiquitar mis webs para preparar un dossier como Eru manda -gracias a Aníbal por enseñarme Domestika, sitio que recomiendo para todo creativo de tres al cuarto como yo ^^-, he ajustado Enciclopedia de criaturas -la versión AJAX-, ya que había un par de cuestiones estéticas y otro par técnicas que no iban como tocaba. Estéticamente, he dividido el texto en columnas -también para probar las bondades y maravillas de CSS3– y algún detalle de maquetación más. Técnicamente, he dejado completamente operativa la web, pues el Buscador y algún otro detalle no funcionaba bien. Uno de dichos errores -¡que me aspen si cuando la subí en su día no iba todo como la seda!- es que no cargaba las criaturas. Ya veis, una web de criaturas que no carga las criaturas, ¿Así como voy a tener visitas? ^^… En fin, que voy a explicarlo, por si a alguien le ha pasado, y le sirve. Aunque ya sabemos que cada código, cada navegador y cada sistema operativo es un mundo. Aunque primero, algunos santicos, que si no se me agobia la muchachada ^^.

Nueva visión de la criatura a dos columnas, ¡cortesía de CSS 3!.

Nueva visión de la Guía a dos columnas, ¡cortesía de CSS 3!.

Pues eso, que cuando voy a echar un ojo a mi web -operativa cuando la dejé- para el portfolio, y entre pequeños errores que siempre hay, compruebo que ¡no carga la criatura! Bueno, únicamente no cargaba las criaturas que tenían contenido de texto en la base de datos. ¡Joder, entonces sí la carga!, lo que no carga es el texto -extenso-. Pero la Base de datos estaba correcta, así como el código javascript y el php. Que anda que no tiene huevos localizar muchas veces el error con tanto lenguaje de programación y zarandajas (teniendo en cuenta de que la depuración en web es todo un lujo). Así pues, entre la intuición, el conocimiento del código -aunque hacía tiempo que no lo tocaba- y el Firebug de Firefox (que tuve que desempolvar también, pues últimamente me iba como el culo y me había pasado a Google Chrome -navegador que desde aquí recomiendo-) logré ir acotando el error. Aunque no sin quebraderos de cabeza como pronto comprobarán.

Cuál creen que es mi asombro, cuando después de probar con mil criaturas -más por desesperación que por comprobación- va el Orco y sí sale. ¡Joder, ¿al Orco sí lo carga?! (después comprobé que también al Gigante)… Bueno, ya hemos dicho que las criaturas sin desarrollar -sin datos- también las cargaba, pero ¡qué carajo, son 150 criaturas y sólo cargaba los datos de esas dos!

¿Por qué carga unas sí y otras no? Más exactamente, dos no. Ahí estaba el interrogante de áspero esparto que tenía atravesado en el ojete. Tras mil pruebas descubrí que era por los saltos de línea en la Base de datos. Todo apuntaba a JSON, que no era bien parseado cuando había saltos de línea. ¡Puto JSON! rumiaba mientras me mordía las uñas. ¡Puto AJAX! ¡¿Quién me mandaría a mi, con lo sencillito que es HTML y CSS?!.

Los datos se recibían, pero al parsearlos, desaparecían. No, con eval tampoco funcionó ^^. Así que ahí estuve peleándome, con Firebug y alert como únicos aliados, hasta que me di cuenta que el error no se resolvería mejor en javascript, si no en php, en el archivo llamado por AJAX. Para cada campo de texto recibido había que formatearlo con str_replace. Bueno, pues a sustituir los saltos de línea \n que no parsea JSON por los más legibles < br />. Ahí andaba la cosa.

Para mi estupor, tampoco funcionó. ¿¡WTF!?
Mas no se me alteren, ya que había llegado hasta ahí, no iba a rendirme ahora. Y pronto descubrí que los saltos de línea se interpretaban como retorno de línea y salto de línea. Así que, me alivió saber que la criatura se acabaría cargando, y sin necesidad de cambiar todo el código para prescindir de JSON -al que sin duda, debía una disculpa- ^^.

La línea mágica que tuve que añadir quedó tal que así:

$variable=str_replace(«\r\n», «< br />«, $variable);

Está claro que muchos dirán: ¡Ya ves tú que misterio! A mi eso me pasa todos los días, y lo detecto antes que las ganas de mear. Bueno, sólo recordar que yo no soy programador puro y duro, de esos que les salen granos cuando se acercan demasiado al Photoshop, y las cosas me cuestan (todo sea dicho que a los diseñadores/maquetadores también les suele dar urticaria la sola visión de un if else xD). Y eso, que espero que a alguien le sirva. Dudas en los comentarios ^^. Y ahí va otro santico…

¡El buscador ya funciona! En este caso cortesía de Prototype -javascript-; que por cierto, se ve que ya tiene tiempo la web pues mis últimos proyectos ya usan JQuery.

Finalmente apuntar que sí, que todavía le queda mucho trabajo al sitio: completar las secciones que faltan, desarrollar las criaturas que faltan y finiquitar detalles en general pero eso ya será en otro momento y en otro lugar, y por consiguiente, en otro post. Y cualquier ayuda será bienvenida.

Entornos de Desarrollo Integrado

Nueva entrada para la categoría de mi Wiki particular versada en el Desarrollo Web: Entornos de Desarrollo Integrado. Como su nombre indica, en esta categoría contemplaremos los principales entornos de desarrollo web. Aunque de momento esta categoría está un poco floja. De momento unos breves minitutoriales para instalar netBeans o Eclipse.

Social Media Marketing

Ahí va una tercera categoría de mi Wiki particular versada en el Desarrollo Web: Marketing en Internet. Como su nombre indica, en esta categoría contemplaremos las principales disciplinas del marketing online: SEO, SEM Y SMM.

Como se podrá comprobar, de momento sólo dispone de entradas sobre Marketing en Medios Sociales. Siendo las principales entradas: Marketing en Medios Sociales y la figura del Community Manger.

En este caso, basado en los estudios de AERCO y Territorio Creativo.

Herramientas de Documentación

Ahí va la segunda categoría de mi Wiki particular versada en el Desarrollo Web: Herramientas de Documentación. Como su nombre indica, en esta categoría contemplaremos alguna de las principales herramientas de documentación. El Wiki más usado: mediaWiki, así como docBook: otra herramienta alternativa para documentar nuestros proyectos.

Como se podrá comprobar, de momento dispone de los siguientes mini-tutoriales:

  1. -Instalación y configuración de mediaWiki.
  2. -mediaWki para uso personal.
  3. -Extensiones mediaWiki.
  4. -Cambiar el Logo de nuestra mediaWiki.
  5. -Subir imágenes en mediaWiki