Buenas tardes, a lo largo de esta entrada voy a comentar los aspectos sobre mi sitio web All4Electro relacionados con la estructura, estilo y distintas funcionalidades que he implementado. Después del boceto inicial vamos a centrarnos en la página de inicio (Hompage). Respecto a las demás páginas ésta será la que destaque sobre las demás por su estilo y mayor contenido en forma resumida y vistosa. Estos son los aspectos de Homepage:
Homepage:
- HTML5:
En cuanto al HTML de Homepage, esta validado por W3C como HTML5. Es una estructura basada en un header donde se contiene tanto el logo de la página como la imagen que la identifica, el menú de navegación y un conmutador de estilos (azul y rojo). Después de este vistoso header, nos encontramos con el resto del contenido de la página aquí tenemos dos filas de contenido.
En la primera fila podemos encontrar los próximos eventos dentro de todos los que habrá (que se encontraran en la página de eventos), un Image Slider que van pasando fotos de forma automática con transiciones sobre las noticias más relevantes que han habido y finalmente a la derecha de esto los titulares de las noticias más relevantes (que se encontraran mas detallados en la página Noticias & Novedades). Esto se ha realizado a través de un diseño flotante (float).
En la segunda fila a través de un iframe he podido colocar el calendario de google donde podremos ver los eventos del mes actual. Y tenemos un reproductor de música que permite tanto en formato .mp3 como .ogg (para una máxima compatibilidad entre navegadores) reproducir el TOP 5 de las listas más respetadas del momento.
Finalmente hemos colocado en el pie de la página iconos con las distintas redes sociales para que sea más fácil comunicarse con nosotros y publicar artículos que consideremos interesantes.
- CSS3:
En cuanto al estilo, la imagen del header resulta vistosa así como el logo que da la identidad a la página así como los colores empleados. Se ha cambiado la fuente a Electrolize de Google Fonts. Se ha hecho ambos estilos de 0 sin plantillas. Hemos hecho que la página quede centrada mediante margin auto. He usado un diseño flotante para que cada parte de la página no se sobreponga con otras y consiguiendo por tanto un diseño líquido.
Hemos usado una imagen de fondo que y colores de tal forma que la página no sea estridente y sea agradable al ojo humano así como colores que identifiquen a nuestra empresa. La alternancia entre un estilo y otro me ha resultado complicada puesto que el cambiar un menú horizontal a uno vertical no le daría la misma imagen resultando algo que desencaja fácilmente no obstante para notar diferencias se ha cambiado la imagen del header (donde la mesa de mezclas ha pasado a la izquierda) y el menú ahora tiene orientación derecha (float right).
Hemos añadido un icono a nuestra página web para que acompañe al título y sea representativo de nuestra empresa. Debido a que se han añadido plugins de JQuery como el Music Player y el iframe de Google esto produce que la página no esté validada para CSS3 según los estándares de W3C, no obstante si obviamos esto la página es 100% válida para CSS3.
- JQuery:
Hemos usado JQuery para varios motivos. Uno de ellos es para que al hacer la carga de cualquier sección cargue un HTML que diga que dicha sección se está en preparación antes de la carga de la página. También hemos usado un plugin muy útil como son las cookies. Al tener un conmutador de estilos para que nuestro navegador recuerde nuestro último estilo visitado cargue directamente al abrir nuevamente la página con dicho estilo.
Finalmente hemos usado dos plugins con JQuery. Uno de ellos es el Image Slider que va pasando fotos con transiciones que previamente introducimos nosotros. Cabe destacar que el CSS que incorpora dicho plugin no era válido según los estándares de CSS3 y el cual he modificado para que sí lo sea. Finalmente hemos podido subir un reproductor de música con JQuery donde se muestra el TOP 5 no obstante este reproductor incorpora un CSS el cual no está validad por W3C.
Conclusión: La página principal resulta vistosa y cumple con los propósitos que nos hemos marcado. Ahora le falta añadirle más funcionalidad del lado servidor como por ejemplo que se puedan enviar e-mails con críticas o sugerencias para la mejora de la web o una base de datos para que el cliente pueda incluir canciones las cuales a posteriori puedan ser votadas para llegar a entrar al TOP5. Las demás secciones están rellenadas de forma un tanto incompleta pero cumplen a su propósito de informar al usuario de las novedades, TOP DJ, canciones y eventos.
No hay comentarios:
Publicar un comentario