Proyecto Mulain

Primer intento: PHP

2006-10-04T12:57:00.000+02:00

Después de un tiempo voy a comentaros mis primeros encuentros y desencuentros para la programación del Proyecto Mulain, la base de datos de anime, releases y elinks perteneciente a la comunidad AnimeSPS, aunque espero en un futuro no muy lejano que un lugar para la comunidad hispana a la hora de encontrar información sobre lo que más le gusta... anime, lógicamente.

Mi primer intento fue utilizar el lenguaje de programación PHP con el cual tengo bastante experiencia trasteando hasta el límite con él el corazón de foros phpbb e invision, tuneandolos a mi gusto. Claro, este archiconocido lenguaje de scripts, sin duda el más utilizado para la programación de páginas webs y por extensión uno de los más usados actualmente, era una opción lógica.

¿Problemas? En realidad ninguno salvo la principal carencia de este lenguaje. A determinados niveles la programación se dificulta de manera extrema si durante la fase de diseño no se prepara a conciencia todos y cada uno de los detalles relativos al proyecto. Con anteriores versiones de PHP esto era una tarea titánica debido al bajo nivel de orientación a objetos de este lenguajes. Con las últimas versiones (aún no he visto con profundidad la versión 5) la orientación a objetos se ha ido depurando y ampliando, pero básicamente sigue siendo un lenguaje puramente procedural. Además la programación natural de este lenguaje consiste en embeber HTML y código PHP. Existen elogiosos portales y foros basados en PHP pero utilizando en su totalidad tecnología de objetos. El mejor ejemplo son los foros Invision, pero como ya he dicho, requiere demasiado tiempo y personal para ello. ¡No puedo permitirme ese lujo!

PHP es un muy buen lenguaje de programación, pero su mayor defecto es la inexistencia de un Framework para la programación de portales. Podría decirse que dentro de los lenguajes de programación, podría considerarse como uno de los lenguajes más básicos. Es como programar una aplicación sobre Windows utilizando lenguaje C o Ensamblador. Para facilitar la programación, es necesario un marco común de desarrollo, y PHP ha fracasado en este campo. Son muchos los intentos de diseñar un framework lo suficientemente potente por un lado y a su vez lo bastante fácil de aprender para el diseño de páginas webs, pero todos ellos han fracasado. Esa es la razón por la que la inmensa mayoría de páginas webs programadas en PHP lo hacen mediante código embebido. Fácil y sencillo si estas páginas son de un determinado tamaño. Monstruoso cuando la intención es la programación de un sistema medianamente complejo.

Hacer una base de datos completa no es tarea sencilla. ¿Podría hacerlo? ¡Por supuesto! Lastima que no tenga mucho tiempo debido a mi trabajo. Habrá que buscar un verdadero Framework de desarrollo de páginas webs. Necesitaría utilizar un lenguaje de programación de alto nivel con un framework propio, donde código y diseño estén perfectamente separados.

Quizás ASP .NET sea la solución...

Web 2.0 y el Proyecto Mulain. ¡Ajax!

2006-09-17T12:13:00.000+02:00

Ajax es el acrónimo de Asynchronous JavaScript And XML, o lo que es lo mismo, Javascript y XML asíncono. Las definiciones rápidas de cada palabro son las siguientes (dejaremos el significado de la palabra y de un lado por razones obvias):

Javascript: El lenguaje script de navegadores por excelencia. Está muy extendido gracias a su potencia a la hora de interactuar con la parte cliente durante la navegación por Internet, pero debido a ello, no está tan estándarizado como debiera estar.
XML: Acrónimo de eXtensible Markup Language. Básicamente son una serie de normas a la hora de construir un fichero de texto especialmente indicado para almacenar y transmitir información jerarquizada.
Asíncrono: Este termino indica cuando un evento puede desencadenarse en cualquier momento. ¿Un ejemplo no asíncrono (o sea, síncrono)? el movimiento del segundero de las manillas del reloj, ya que este se produce siempre cada segundo. Un evento asíncrono es por ejemplo, pulsar en un enlace cuando a ti te de la real gana.

Resumiendo. Ajax es una tecnología que comunica el navegador con el servidor web. Esta comunicación se puede dar en cualquier momento (asíncrono), el intercambio de información es mediante pequeños archivos XML, y se utiliza javascript para dibujar el resultado de ese intercambio de información de manera inmediata en el navegador.

Ajax es la tecnología fundamental de la hoy llamada Web 2.0 donde las webs se convierten en aplicaciones webs. Antes de la aparición de Ajax, la interacción entre navegador y servidor era prácticamente nula ya que para actualizar el contenido de una página estabamos obligados a pulsar el botón "recargar" de nuestro navegador favorito.

Con Web 2.0 (y por extensión, con Ajax) esto ha dejado de ser un problema. Las páginas han dejado de ser estáticas para convertirse en aplicaciones como cualquier otra aplicación de Windows o Linux. El ejemplo más claro es Gmail y comparadlo con Hotmail. En este último no podemos saber si hemos recibido un correo nuevo hasta que recarguemos la página, algo que sencillamente no sucede. En el momento que recibamos el email, lo vemos remarcado en nuestra página sin tenerla que haber recargado. Lo mismo cuando leemos dicho email ya que la página no se recarga, sino que el navegador se encarga de renderizar la parte necesaria para la lectura del mail, dejando lo demás intocable. No solo se gana en comodidad, sino también en velocidad.

Y el ejemplo más bestia sobre todo esto de Web 2.0 y las aplicacioes web es Writely, un impresionante procesador de texto con muchas de las opciones ya contenidas en el Word u OpenOficce pero con la particularidad que se ejecuta en nuestro propio navegador. ¡Probadlo!

A lo que nos concierne. Estoy orgulloso de deciros que el Proyecto Mulain estará de lleno en el subconjunto de páginas que componen web 2.0, o lo que es lo mismo, en diversas partes de su implementación utilizo Ajax. Tengo que admitir que es algo básico pero... ¡la mera inclusión de esta tecnología ya aumenta de manera considerable la categoría de una página!

Ajax permite básicamente recargar diversas partes muy concretas sin necesidad de renderizar de nuevo toda la página. No os engañéis. Muchas páginas contienen funcionalidades muy parecidas pero eso no es Web 2.0. Un truco muy utilizado es traer toda la información necesaria al navegador y mediante javascript mostrar únicamente la que nos interesa. Esa técnica no es Ajax ya que no hay intercambio de información entre cliente y servidor, y además, si observáis el código de la página (y si sabéis HTML y Javascript) podréis ver claramente la farsa.

Ahora a lo que nos concierne. ¿Donde está el tan cacareado Ajax en el Proyecto Mulain? Ahora que sé implementarlo será algo habitual, pero por el momento y para empezar por algo básico, pero no por ello poco importante, en la opción para mostrar las valoraciones de un anime por parte de los usuarios. Os muestro un ejemplo mediante dos capturas:

La imagen de la izquierda muestra la ficha de anime únicamente mostrando la puntuación media y el número de valoraciones, este último con un enlace. Si pulsamos sobre él (ver imagen de la derecha) podrémos ver todas las valoraciones vertidas sobre ese anime. Os preguntaréis... "¿y?". Facil señor@s. Es dificil hacerse una idea mediante capturas, pero os puedo asegurar que la página no se recarga, se limita a dibujar bajo el enlace todas las valoraciones, aumentando la velocidad (y por tanto la comodiad) así como la sensación de estar frente a una aplicación en lugar de una página web. Ah, por supuesto, si volvemos a pulsar sobre ese link, las valoraciones desaparecerán por arte de magia volviendo a su estado original.

Este tipo de funcionamiento (yo lo llamo plegadores) va ser muy útil en toda la página para no abrumar de datos al lector. La idea es mostrar una información resumida para ser administrada a simple vista, y si el usuario desea obtener información más detallada, sólo tiene que pulsar sobre el enlace corresopondiente. Una característica secundaria de usar Ajax en lugar de trucos de javascript es que la información mostrada estará siempre actualizada al minuto en el momento de la pulsación del enlace.

Precuelas, secuelas y paralelas

2006-09-16T17:13:00.000+02:00

Una información muy importante a mi entender es la de aquellos animes que son considerados una precuela, secuela, paralela o bien relacionada con un título es cuestión. No lo oculto, es algo que se hace en anidb y ya he dicho que me baso en cierta medida en esta base de datos para la creación del Proyecto Mulain, aunque habrá diferencias, como es lógico, ya sea a mejor o a peor, pero habrá diferencias.

El sistema encargado para mostrar la relación entre los animes está ya perfectamente implementado (incluido los enlaces correspondientes). Si algo se muestra mal, será sencillamente que el usuario encargado de la insercción de los datos los introdujo mal, algo que pasará más de una vez debido a que a veces, determinados animes tienen tantas precuelas, secuelas, películas, recopilaciones... pero eso no es problema mio, no al menos en la parte de la programación que me concierne.

Mostraré tres tipos de información distintas. Las precuelas, las secuelas y otros tipos de relación. Podría incluir algo así como "spin-off" o "animes paralelos" pero creo que ese concepto es demasiado vago y algo me dice que habñia enormes problemas a la hora de distinguir lo que sería un anime paralelo con "otro" tipo de relación. ¿Qué es una historia paralela? ¿En qué se diferencia de un spin-off? ¿O es sencillamente lo mismo? ¿Y los animes situados en el mismo universo pero con personajes que ni siquiera aparecen en el anime relacionado? Estoy seguro que cada uno podría sacar su propia definición para las palabras "paralelo", "spin-off", "mismo universo", etc. Por eso hago habrá únicamente los 3 tipos de clasificación que he comentado anteriormente. Precuelas, secuelas y otros. ¿Cuando es otro? Cuado no es ni secuela ni precuela. Más sencillo imposible.

Hablemos un poco de la implementación. Finalmente he utilizado 2 tablas para almacenar toda esta información. Con una sóla bastaba, pero sacrificaría mucha claridad del código y del diseño. La primera idea era crear una tabla donde almacenaría los identificadores de dos animes y su relación correspondiente (3 columnas). La relación sería el conjunto enumerado "Precuela, Otro". ¿Y "Secuela"? No es necesario incluir esa información ya que viene implícita. Si A es la precuela de B, entonces podemos deducir que B es la secuela de A. Sería una tontería insertar en la base de datos que A es la precuela de B y B la precuela de A, además de ser un error mayúsculo en la ingeniería del software. No a los datos redundantes.

Esa fué la primera idea. Finalmente decidí crear dos tablas distintas, una para almacenar precuelas (y por lo tanto secuelas) y otra para almacenar otros tipos de relación. La razón ya la he explicado anteriormente, simplificar el diseño y la implementación. Las ventajas son muchas frente al inconveniente de usar una tabla más de la mínima imprescindible. En un futuro, si la lentitud de la base de datos se convierte en un problema, podría fundir estas dos tablas en una cosa con el consecuente ahorro de memoria, y lo más importante, reducir el número de accesos a la base de datos utilizando una única query en lugar de dos.

Y ahora, un tema al que le tengo especial ganas... ¡el sistema de puntuaciones y valoraciones! No la insercción (estó lo haré más adelante), sino calcular las medias (ponderadas seguramente en función del número de votos emitidos) y mostrar las distintas valoraciones realizadas por los usuarios.

Algo se empieza a ver

2006-09-10T23:18:00.000+02:00

Aquí os muestro una primera captura de la que será la sección de la aplicación web encargada de mostrar la información de un anime en cuestión (llamemos anime, aunque sea erroneo, a toda aquella frikada que sea serie de animación, j-drama, película de animación japonesa-asiatica o película live action) mostrada como una pequeña ficha. Creo que el estilo es bastante apropiado, colores agradables y adornos los mínimos para facilitar la lectura pero a la vez atractivo al ojo humano.

La ficha que véis muestra la información más importante del anime. Claro está que dicha información cambia según el tipo de anime a mostrar, por ejemplo, ¿acaso sería un sin sentido mostrar el campo que indica el número de capítulos si es una película? Para que mostrarlo entonces si va a aparecer vacío.

Ahora mismo estoy intentando arreglar un par de problemas, el principal de ellos viene dado (otra vez) con la codificación. He solucionado el contratiempo anterior por el cual no se mostraban símbolos de puntuación consiguiendo que el navegador cambie de manera automática a codificación ISO 8559-15, pero para mostrar símbolos kanjis, necesito que cambie al UTF-8, pero si hago esto, el los símbolos de puntuación volverá a ser un problema. Sigo trabajando en ello. Quizás por ser mi primera aplicación web en este nuevo lenguaje de programación es por lo que me está costanto más trabajo en algunos campos, pero la rapidez de desarrollo en otros campos corrige con creces esta carencia.

Si os fijáis bien observaréis que existen enlaces tanto en los géneros, número de capítulos, tipo de anime y los estudios responsables (además de la página web oficiosa). Esto es así ya que tengo pensado que, mediante un simple click, puedas ver todos los animes de un determinado género, aquellos títulos producidos en un año en particular, o todas las creaciones de un estudio en concreto.

También podréis ver que la zona dedicada a la valoración del anime está vacía. Eso es por que el sistema de puntuación no está implementado (como el 95% de la totalidad del portal) pero poco a poco se va avanzando, eso si, a paso seguro.

Primer vistazo al Proyecto Mulain

2006-08-30T22:18:00.000+02:00

Ay, ay, ay... que malo es el trabajo cuando tienes un blog que actualizar, más aun cuando coincide con la compra de un videojuego como World of Warcraft al que estoy medianamente viciado (estaría viciado si no tuviera que ir al trabajo ni tuviera que ir a la autoescuela... y ni hubiera cine, ni amigos, ni festival de cine en Estepona, ni Salón Manga de Barcelona, etc).

Bueno, aun así he estado haciendo mis cosillas. El lenguaje con el que lo estoy programando no lo voy a decir todavía (aunque los mas listillos por la imagen seguro que lo adivinarán al instante) pero el diseño funcional está terminado. Son 4 o 5 hojas llenas de diagramas, imágenes toscas con bolígrafo y mucho texto casi indescifrable de mi puño y letra, pero lo importante ahora es como va quedando poco a poco el invento.

¿Horrible? ¡Por supuesto! No os voy a engañar. Aquí tenéis nada más y nada menos que 3 horillas de trabajo (y ya sabéis que las primeras horas cuesta bastante, más que nada por que es la primera vez que uso ese lenguaje), y ya está. Nada de florituras (o sea, de adornos) y prácticamente sin contenido salvo algunas noticias para comprobar que funciona tal sistema y la muestra aleatoria de 5 animes del presente año. Digamos que lo que veis es la versión 0.0000000001 pre-alpha. Le queda muchísimo recorrido todavía.

¿Que funciona? Lo dicho. El sistema de noticias está ya perfectamente implementado. Si, repito, se ve horrible, pero el funcionamiento, que es lo que me interesa, funciona a la perfección. Te muestra las 5 últimas noticias ordenadas por fecha descendente además de un correcto funcionamiento de la barra de navegación inferior. Las opciones de esa barra es ir directamente a la primera noticia, la última, las dos siguientes y las dos anteriores.

A la derecha podréis ver la parte de la ventana reservado para información resumida diversa donde aparece actualmente 5 animes de manera aleatoria del presente año donde el primero de ellos siempre muestra su carátula. También podéis ver las zonas reservadas para el banner y para el pié de la página. Estoy construyendo la web utilizando para ello la orientación a objetos, lo que me permite modularizar al máximo el contenido del portal, es decir, me preocuparé de diseñarlo cuando tenga que hacerlo, asegurándome que su programación será independiente al resto de la página.

Y ahora la pregunta del trillon de euros. ¿Qué es lo que falta? Pues tantas que ni siquiera os la podría listar. Entre ellas, hacerle un diseño agradable a la vista, inclusión de las opciones principales de búsqueda en la parte derecha de la ventana, mostrar los animes más y mejor valorados a la izquiera (justo abajo de los 5 animes aleatorios del año), enlaces directos a las fichas de estos animes, métodos para la insercción por parte de los usuarios de nuevos animes, el banner (lógico), el pié (también lógico)... en definitiva, muchas cosas. Lo que véis en la captura no se le parecerá en nada a la versión definitiva, pero como esto es un blog de desarrollo, es justo que sepáis como comenzó el proyecto y lo comparéis con su versión definitiva.

¿Y qué problemas me he encontrado en esta primerísima versión? Pués dos básicamente. El primero es que por defecto te muestra la codificación UTF-8 y se ve de manera incorrecta (sin tíldes ni carácteres especiales). Únicamente se soluciona si cambio la codificación del navegador manualmente a ISO-8859-15. No tengo muy claro si es una limitación del framework que estoy usando o bien por el editor que almacena los archivos fuente en un formato de texto más bien extraño comparado con otros editores. La solución pasa por incluir carácteres especiales HTML, encontrar el TAG que permita cambiar la codificación del navegador al llegar a la página (algo que ya he intentado y no lo he conseguido) o bien reconvertir la codificación de mis archivos fuente a ASCII normal.

Y el segundo es la manera de mostrar la carátula de uno de los animes mostrado de manera aleatoria. Por lo general, la carátula tiene un tamaño bastante grande (unos 300 pixels de alto). Al dimensionarlo a un tamaño mucho menor, los navegadores lo hacen de la manera mas cutre posible por alguna razón que desconozco. Quisiera encontrar un método de escalado con la menor pérdida de calidad posible. La primera idea era usar una función escrita en PHP. Esto no lo veo posible ya que no es el lenguaje que utilizo para esta página, y no quisiera juntar dos scripts dinstintos en un mismo puerto. La segunda posibilidad, y creo que la que tiene más papeletas para llevarse a cabo, es usar un flash terriblemente básico pero efectivo. Ese flash únicamente mostrará la imagen pasada como parámetro por el HTML, y lo mostrará con la mayor calidad posible. Prácticamente todos los navegadores usan flash, así que puede ser una muy buena solución al respecto.

Sugerencias, dudas y demás, comentario al canto.

Primeros pasos. ¿Qué es el Proyecto Mulain?

2006-08-12T15:57:00.000+02:00

Como buen friki (que no freak, aunque la wikipedia diga lo contrario) debes ya conocer la disposición de los estudios nipones de animación japonesa al crear proyectos cuando planean convertir una de sus series en una auténtica saga que abarque mangas, videojuegos, novelas, etc. Algunos ejemplos son el Project Evangelion, Project Gungrave, Project .Hack, etc.

Jugando un poco con esto se me ocurrió lo del Proyecto Mulain. Proyecto por su vena friki. Mulain por ser la mascota de AnimeSPS ( y creación del usuario Elderlane).

El Proyecto Mulain no es el nombre final de sistema que me voy a disponer a programar, es el título de este blog donde podréis ver con detalle (todo el detalle que pueda proporcional para un proyecto que no será código abierto) el proceso de creación de la base de datos de anime.

El objetivo final es crear una base de datos de anime, así de sencillo. Seguramente conoceréis anidb.net como la mejor y más completa base de datos de este estilo, seguida muy de cerca por animenfo. En menor medida tenemos infoanime de Frozen Layer Network aunque desgraciadamente está un poco abandonada, pero sigue siendo un excelente recurso para encontrar información en una página de habla hispana. No voy a negar que mi objetivo está basado principalmente en anidb. Tampoco quiero superarlo ya que en mi opinión es tremendamente difícil sino imposible (apunto a un objetivo alto... ¡pero no tanto!).

Además mi intención no es crear una nueva base de datos de anime. Pretendo que sea un lugar para almacenar información sobre anime, manga, videojuegos, música y cine, todo ello con un punto en común, que sea procedente de Japón (y en menor medida de países asiáticos de ojos rasgados). Junto a esta información estará disponible, en la medida de que se disponga de dicha información o no, de sus respectivas releases así como de sus elinks correspondientes. Por lo tanto, la base de datos será una útil herramienta para aquellos que sólo desean saciar su interés por las obras aparecidas en Japón, así como su descarga en el sistema eMule.

Blog de desarrollo del Proyecto Mulain

2006-08-12T12:17:00.000+02:00

Este es mi tercer blog. La experiencia me ha dicho que no tengo el tiempo suficiente como para ponerme a escribir blogs genéricos quizás por la cantidad de cosas a hacer en mi mente, quizás por que no soy lo suficientemente bueno como para buscar y encontrar por Internet tantas curiosidades que abundan en las publicaciones de otros blogs de Internet.

Así que, definitivamente, me centraré en un blog temático, nada de generalidades, un blog donde pondré el día a día de lo que es mi gran proyecto actual, el Proyecto Mulain.

No es mi primer proyecto software personal. Hace ya un par de años diseñé y programé un pequeño programa catalogador anime llamado AnimeArchiver. Estoy orgulloso de él aunque viéndolo hoy en día, se que lo podría hacer mucho mejor con mis conocimientos actuales. Está programado en C# y fue la manera con la que me introduje en el mundo de la programación en el entorno .NET de Microsoft, entorno en el cual actualmente me estoy especializando profesionalmente (tanto C# como Visual Basic .NET). Esto es, programé AnimeArchiver con unos conocimientos muy básicos. Dos años después, visto lo visto, se quedaría muy corto. ¿AnimeArchiver 2.0? Tengo pensado hacerlo, pero claro, ahora El Proyecto Mulain y AnimeSPS son mis prioridades.