Tras varios retrasos y exámenes de por medio, ya tenemos lista una primera versión de la web. A continuación voy a detallar un poco los rasgos y pasos más importantes del proceso de creación de esta primera versión:
En primer lugar, empezar un proyecto web desde cero es bastante complicado y si encima sólo llevas poco más de un mes en ello, aún más. Sin embargo, comenzar con una base ya hecha y a partir de ahí, emplear nuestros conocimientos en aquellas cosas que nos apetezca cambiar o añadir parece mucho más factible. Por ello lo primero es buscarse una buena plantilla. En mi caso la he sacado de
OS Templates, en concreto, la que se llama 'Academic Education'. A continuación os enlazo una captura:
 |
| La plantilla empleada como base |
Es importante elegir una plantilla que aunque vayas a variar, encaje más o menos en la estructura que tienes pensada para la web. En mi caso, tanto el menú horizontal, como el slideshow y la estructura que sigue el div principal a la hora de presentar los contenidos me venían bastante bien.
Ya tenemos la base, nos queda construir nuestra web sobre ella. Por ejemplo, ¿por qué no usar lo que sabemos de
Pixlr y hacernos un buen logo para la web? El logo es una de las partes mas importantes de la página ya que es lo que la dota de personalidad y estilo propio. A continuación os muestro el logo:
 |
| Logo |
Ya que nuestra página va a ser de videojuegos, homenajear en nuestro logo a un clásico como lo es Space Invaders parece apropiado. A continuación elegí las tonalidades de colores que iba a usar la web. El estilo empleado en el blog me gustó tanto que me decidí a usar los mismos colores (negro,blanco y naranja) y el mismo fondo algo modificado (también utilizando Pixlr).
A continuación me puse con la barra de navegación. La que traía la plantilla no tenía menús desplegables por lo que me decidí a buscar una por mi cuenta y ajustarla a las necesidades de la web. Buscando por Google encontraréis un buen número de menús de todos los tipos. En mi caso elegí uno hecho enteramente en CSS3 y tras modificar un poco los colores, las transiciones, la propiedad z-index para que los menú desplegables se puedan solapar con el slideshow y algún detalle más, éste es el resultado:
 |
| Aquí vemos el menú desplegable en acción |
El slideshow no lo he tocado demasiado, le he quitado el fondo blanco del div que lo contiene y añadido algunos bordes redondeados. Por otra parte, está el contenido principal de la web. Al div principal le he cambiado su color así como su opacidad. He añadido un vídeo de Youtube usando el código que ellos mismos te suministran y recolocado un poco la disposición de los contenidos. Hay que mencionar que aparte, he cambiado tanto el color del texto, como de los enlaces como la propia tipografía. La tipografía es una de las piezas clave de la web. Yo me he decantado por una sencilla pero de aspecto moderno. Podéis encontrar tipografías web gratis en:
Font Squirrel
Por último, en lo referido a la estructura de la web principal, nos queda el pie, que al contrario de la tendencia actual, es tan solo una línea de texto con un enlace al blog aunque esto puede cambiar en futuras versiones.
Dentro del div principal al final, destacan dos botones que constituyen el conmutador de estilos de la web. Para comprobar el poder de personalización y edición de CSS, ¿por qué no hacer un sólo html y crear dos archivos css diferentes intentando que parezca que hemos creado dos páginas distintas? Haciendo buen uso de CSS esto es posible. Utilizando el conmutador de la web vemos como cambian la tipografía, la gama de colores en general, el menú horizontal se sustutiye por uno vertical que va bajando a medida que hacemos scroll (propiedad position static de CSS) y algún detalle más. Quedan por pulir cosas de este segundo estilo pero sirve como muestra para ver de lo que CSS es capaz. Además para implementar este conmutador se ha hecho uso de Javascript.
Donde también he usado Javascript, ha sido a la hora de cargar las distintas secciones de la web. Por el momento y a modo de ejemplo, sólo funcionan las secciones de Noticias y Sugerencias. Para cargar las secciones he empleado la función load de Javascript que nos permite cargar ''trozos'' de html en partes concretas de la web sin tener que recargar ésta al completo. El código usado para esto aún está un poco verde y hay que retocarlo para que sea algo más corto pero esto lo dejo para la próxima versión. Aún así os lo cuelgo para que veais lo sencillo que es implementar esta función:
$(document).ready(function() {
$('#sugerencias').click(function() {
$('#container').load('sugerencias.html');
});
});
Se trata de una función que al pulsar (evento click) sobre el elemento (en nuestro caso un enlace) con el id #sugerencias , carga en el div identificado con el id #container el archivo html sugerencias. Los html cargados con load no deben tener etiquetas de head o body ya que estas se heredan del archivo html principal, sólo deben contener aquello que deseemos mostrar. Si además queremos usar javascript dentro de un html cargado con load deberemos usar plugins como livequery ya que si no, no nos funcionará. Esto último es una de las tareas principales de la próxima entrega.
Aparte, en la sección de sugerencias he incluido un formulario de GoogleDocs usando un iframe. Es una forma muy sencilla y rápida de implentar un servicio de encuesta sin tener una estructura robusta en el lado servidor.
En general, he resumido las carácterísticas más importantes de la web. Me dejo algunas cosas en el tintero pero lo mejor es que le echéis un vistazo vosotros mismos. He aquí la primera versión de
Insert Coin News
Aún quedan muchos flecos sueltos y algunos detalles que arreglar (sobre todo en el segundo estilo) pero he añadido la mayoría de las cosas que tenía en mente para esta primera versión. Para las siguientes tengo varias cosas pensadas: mayor uso de Javascript, meter las imágenes en el CSS, uso de JSON, la versión móvil de la web...
Edito: Hasta el día de la entrega no había podido validar el html de la web. Ahora que ya he tenido un poco más de tiempo, he arreglado un par de detalles y al final me he decidido por usar HTML 5 ya que me puede resultar útil a la hora de implementar algunos aspectos nuevos de la página. Además he añadido un botón de validación del HTML del W3C en el pie de la página. Aunque no han creado uno oficial para HTML 5, he tardado un par de minutos en hacerme yo uno sencillito.
