Next Stage

Un mes hace ya desde que publiqué la primera versión de la web y al final de la entrada del blog en la que detallaba todo lo incluido en ella, dije que quedaban muchas mejoras por introducir y algunas cosas en el tintero. Pues bien, no hay que dormirse en los laureles y por ello esta entrada va a servir para mostrar todas las novedades incorporadas de cara a la versión final de la web.

Para empezar, una de las cosas en las que quería profundizar son los diversos plugins realizados en Javascript que rondan por internet, tremendamente recomendables ya que nos permiten realizar grandes mejoras a nuestro proyecto con poca cantidad de esfuerzo. Por ejemplo, tenía ganas de añadir una galería de fotos donde poder poner imágenes de los últimos trailers o gameplays del momento; por ello me decidí a usar la galería que incorporaba la plantilla sobre la que empecé a construir la web y que encontré en OS Templates. Se trata de una galería enteramente implementada en Javascript y de aspecto sencillo pero que cubre las necesidades básicas que se le podrían exigir. Todas las imágenes se disponen en tamaño pequeño mostrando una miniatura que puede ser modificada a nuestro gusto. Una vez clicamos sobre ellas, podemos visualizar las imágenes a tamaño real y además, disponemos de unos cómodos controles de navegación así como de la opción de añadir texto al pie de la foto para poder dar una idea de la temática. Os enlazo una captura para que veáis como luce:

Aquí vemos la galería en uso

Ahora las siguientes líneas las voy a dedicar a detallar una de las novedades que más ganas tenía de llevar a cabo, la versión móvil de la web. Para materializarla he utilizado principalmente jQuery Mobile, un framework de jQuery adaptado a HTML 5 y a las distintas plataformas móviles del mercado. Con su uso podemos crear web's móviles profesionales en cuestión de horas y todo se debe a su facilidad de uso. De hecho, en su página disponemos de un par de aplicaciones online que nos permiten crear nuestros propios temas o probar los distintos elementos específicos de los que se dispone. Sin embargo, no debemos confundirnos y pensar que la creación de web's móviles es compleja o muy diferente de lo que hemos venido haciendo hasta ahora y es que salvando pequeños detalles, los conocimientos a emplear son prácticamente los mismos que en la creación de web's tradicionales. Os muestro un par de imágenes para que veáis como ha quedado el resultado final:

Sección de contacto

Página de bienvenida de la versión móvil

Además, otra de las funcionalidades que quería incluir era la misma con la que cuentan muchos portales web conocidos en los que al entrar en su página desde el móvil, te redireccionan directamente a la versión específica para este dispositivo. Para ello he empleado un sencillo código Javascript que os muestro a continuación:

var navegador = navigator.userAgent.toLowerCase();
if(navegador.search(/iphone|ipod|android/) > -1 ){
   document.location = 'http://www.minsertcoinews.webcindario.com';
}

Primero, creamos una variable de tipo String (como podéis ver, aunque no ponemos específicamente que se trata de una String, Javascript lo asigna automáticamente al tratarse de un lenguaje débilmente tipado) en la que introducimos el resultado de la función 'userAgent' aplicada al navegador que accede a la página. Con esta función obtenemos información acerca de qué navegador accede, su versión específica... A continuación, a la String anterior que hemos llamado 'navegador', le aplicamos la función 'search' para que el programa busque entre los caracteres alguna de las palabras que están entre paréntesis. De producirse alguna coincidencia, redirigimos al usuario a la versión móvil de la web. Por tanto, con un corto y sencillo código, podemos añadir una funcionalidad que le da facilidad de acceso y profesionalidad a nuestra web.

Como habéis podido ver, se han producido importantes mejoras en la web pero lo mejor de todo es que aún queda alguna importante. Para la siguiente entrada tengo preparado algo relacionado con JSON, Javascript avanzado, Ajax y BBDD en la nube.

P.D: Para visualizar la web móvil os recomiendo que lo hagáis desde vuestro móvil con sistema operativo iOS o Android entrando en la dirección de siempre de Insert Coin News. Aún así, podéis también acceder directamente a la versión móvil desde vuestro smartphone o PC. Por el momento sólo están disponibles las secciones 'Opina' y 'Contáctanos' pero poco a poco se irá añadiendo más contenido.