Fregocles y la desinfección del Olimpo

¡Sí! ¡Aún seguimos vivos! Después del parón estival, diversos contratiempos relacionados con nuestra higiene más íntima nos han mantenido bastante ocupados. Gracias a los dioses todo se encuentra ya en orden por los bajos fondos, y podremos retomar nuestro nada frecuente ritmo de actualización del blog.

Hoy, pequeños amigos, vamos a hablar de un tema ciertamente descuidado por los desarrolladores indie: ¡La web!

No es nada raro ver videojuegos indie (y no tan indie) muy cuidados gráficamente, con una pinta estupenda, un argumento currado… pero con una triste web que echa de espaldas.
Y es que aún cuesta pensar que la web es la primera impresión del videojuego que se van a llevar nuestros potenciales jugadores. Y si la web hace llorar los ojos de nuestros visitantes, estaremos disminuyendo las posibilidades de que corran a descargarse ansiosos nuestro videojuego o demo.

Ná, esto le hago yo en un momentín una web con el Frontpage, la cuelgo de Geocities, que es gratis, y listo!

Esta triste frase, que recuerda irremediablemente a los 90, parece que aún se sigue aplicando hoy día. Y es el peor favor que le podemos hacer a los millones de horas que lleva nuestro videojuego a las espaldas. Realmente no cuesta nada cuidar más este aspecto final del producto, sólo hace falta tener en cuenta que es necesario hacerlo. Desde delegar esta tarea a alguien que disponga de los conocimientos necesarios para hacerla hasta, a unas malas, optar por la opción de una plantilla gratuita, eso sí, con una mínima adaptación, claro está.

Contrata un buen hosting

En nuestro caso, tenemos lo que hemos comentado muy asumido y creemos que el resultado habla por si sólo. Desde el principio estaba claro que no podíamos dejar el asunto en manos de un hosting gratuito, poco fiable, poco modificable y que introdujera publicidad y diera una sensación cutre a los visitantes. Necesitaríamos tanto espacio web propio como un dominio en condiciones. Y sí, evidentemente esto significa dinero, pero si realmente has invertido las horas que se han invertido en Fregocles, sabes que es lo menos que puedes hacer por tu criatura.

Hablando sobre hostings y dinero, nos permitiréis un pequeño anexo patrocinado (ejem)…

Un buen diseño hace mucho

La primera versión de Fregocles, que se puso online para ArtFutura’06, lucía el mismo diseño que luce la actual sólo que no disponía del blog integrado. Era una página sin posibilidad de interacción con el usuario, y evidentemente sin la posibilidad de crear contenidos adicionales al videojuego en sí, pero que cumplía muy bien su finalidad: que la gente se descargase el juego. Gestionada mediante PHP y plantillas nativas para mantener bien separaditos contenido y lógica, no necesitaba hacer uso de base de datos y fue programada desde cero.

El diseño gráfico de la web fue especialmente tedioso porque el artwork del que se disponía no se realizó teniendo en cuenta el formato web. Lo ideal habría sido que nuestro ilustrador hiciera una nueva ilustración para la web con la asistencia del diseñador en cuestión, pero debido a «exigencias del guión» (y a otras variedades, ejem) no fue posible.

Asi que hubo que adaptar lo que teníamos a formato web, y encima a velocidad de espanto porque la fecha de ArtFutura se nos echaba encima. Lo más complejo del diseño sin duda fue intentar que fuera un diseño semi-líquido, es decir, que si la web estaba realizada con la resolución 800×600 como base y se veía con una resolución mayor, no vieras las ilustraciones «cortadas». Un claro ejemplo de esto serían las nubes de la esquina superior derecha. (Nota: IE6 se sacrificó en este aspecto, ley del mal menor)

Entre eso, la ubicación original de los elementos en la ilustración que impedían que hubiera un mínimo espacio para contenidos, los degradados, la forma en que los elementos de la ilustracion se entremezclaban, el cross-browsing, el maldito Internet Explorer, y un sin fin de tiquismiqueces varias, hicieron que el desarrollo fuera «todo un reto» (…) La solución más evidente fue usar transparencias PNG de 24 bits junto con el diseño semi-elástico. Esto así sólo suena muy bonito, pero trajo consigo el consiguiente quebradero de cabeza para IE6 que no le gustan los PNG, el consiguiente testeo de hacks para remediarlo (unos no funcionaban para unas cosas, otros para otras) y la consiguiente toma de decisiones regida por el lema del mal menor previamente comentado.

Integrando el blog

Inicialmente el blog iba a ser una sección independiente, con otro diseño mucho más simple y flexible, y que no tuviera las restricciones que teníamos en el diseño basado en ilustración previamente comentado. Y si finalmente no se hizo así fue por un motivo muy simple: ¿dónde narices metíamos el enlace al blog, si en el menú no entraba?

Una soberana tontería como esa, el no haber contemplado un posible crecimiento del menú, junto con la poca flexibilidad que nos daba el diseño, fue lo que hizo que el tema se planteara de una forma mucho más seria. Y después de meditarlo se llegó a la conclusión de que el blog no debería ser algo secundario sino que tenía que tener mucho más peso en la página general, ya que era lo que más frecuencia de actualización tendría (ironías del destino). Y fue cuando nos dimos cuenta de que habría que darle la vuelta al concepto, y no añadir el blog a lo ya existente, sino hacer que el blog contemplara lo ya existente.

Así que hubo que rehacerlo todo, desechando el sistema anterior, para pasar a integrar lo existente con WordPress (el software de blog usado). Evidentemente todo el diseño se podía aprovechar, sólo hubo que adaptarlo a un theme de WordPress. Para los curiosos, he aquí el theme usado como base. El resto fue encajar la información que se iba a mostrar en el diseño, de una forma más o menos coherente; y buscar plugins que hubo que adaptar para distintas funcionalidades (compartir, página de contacto, funcionalidad con los feeds, etc.)

La verdad sea dicha, en esta segunda revisión de la web para integrarla con el blog, no fue una prioridad la validación del marcado. Sencillamente se tomó el theme mencionado como base, para lo bueno y para lo malo, con objeto de reducir el tiempo que llevaría el desarrollo y poder sacar el blog en un tiempo relativamente aceptable. Si se hubiera prestado un poco de atención a este aspecto habría sido fácilmente resuelto ya que la mayoría de errores de marcado que nos indica el validador son «tonterías».

Y hasta aquí este post sobre la importancia de una buena web. El tema, como véis, da para mucho. Aquí ni siquiera hemos entrado en temas de posicionamiento en Google, que es otro factor relevante a la hora de crear una buena web para nuestro videojuego. Eso lo dejamos para futuras entregas ;)