Tras plantearme la opción de continuar creando desde cero cada archivo .html y .css decidí buscar una plantilla que se adaptara a la idea que ya tenía plasmada con mi primer boceto de la web.
Así encontré este modelo.
Me interesó principalmente el hecho de tener un slider incorporado y que la disposición inicial fueran vertical. La plantilla, como mi primer entrega, emplea una paleta basada en naranjas y grises. Pero, como es lógico, no utiliza exactamente los mismos colores así que tuve que modificar la información sobre el color en todos los archivos. (Ahora sé que el #FFA200 es un tono de naranja, dato importantísimo).
Bromas aparte el contenido interno de la plantilla se alejaba mucho de mis necesidades así que comencé a limpiar todo aquello que no me fuera a servir, prácticamente todo, y dejé un esqueleto sobre el que comenzar a crear de nuevo 7Music!8.
 |
| Index de 7 Music! 8 |
Vemos que se ha mantenido la estructura de la página con una cabecera inicial, más grande que la de la versión anterior, en la que ahora incluimos el logo y el menú.
Un menú simple, con una animación que resalta los links.
Cercanía e integración es lo que se busca con el menú de redes sociales. Una implementación de tres iconos en posición vertical dentro de una imagen irregular, que da sensación de profundidad a la cabecera (acorde a la paleta de colores).
Como decía, el nuevo slider implementado ahora con j-query, funciona mucho mejor que el anterior y su diseño con es más profesional.
Para que podais utilizar el inicio del id lo pego en el texto:
<div id="content">
<div id="chincheta"></div>
<!-- slider -->
<div class="flexslider home-slider">
<ul class="slides">
<li>
<img src="img/slides/the_artist_2011a.png" alt="alt text" />
<p class="flex-caption">The artist, un ejemplo moderno de la evolución del cine</p>
</li>
Si nos fijamos en el código podemos observar un div vacío con un id llamado "chincheta". ¿Por qué está ahí y para que sirve? En la siguiente entrada explicaré el motivo (pista: la página tiene varios estilos!!).
La codificación utilizada ha sido iso-8859-1. UTF-8 me ha dado problemas siempre que he intentado implementarlo. Podemos ver un ejemplo con el menú:
Muy pronto más. El diseño de la página está terminado. Tras unas verificaciones será subida a la red!!
No hay comentarios:
Publicar un comentario