Final.

http://raivak.0fees.net/index.html


Doy la página por terminada. Me hubiera gustado poder validar por completo la web, pero me he topado con un par de errores que no he sabido solucionar. Uno de ellos con un link que utilicé para el selector del css y que el validador encuentra extraño por no reconocer la dirección absoluta. En un primer momento probé a añadir el href, que no era necesario para mi propósito, pero no solucioné nada finalmente.  El segundo fallo, en el html de historia me advertía que el uso de los divs era incorrecto. Tampoco he sabido solventarlo. Aún así hago constancia de ello en el blog por si alguno de nuestros lectores quiere echar un vistazo al código fuente, quizá sea un error común.

Por otro lado, he conseguido que la página sea estable en Firefox e IE, en Chrome, curiosamente, he tenido más problemas debido a una regla float que tuve que añadir en una clase distinta a la original. Además los desplegables en Chrome no bajan bien cuando aplicas el scroll y dificulta la lectura. En Firefox (navegador donde he testeado principalmente) esto no me ha pasado nunca.

Mirando hacía atrás podemos ver como gracias a las herramientas adquiridas la página ha tomado un diseño profesional y una forma útil y dinámica. Estoy orgulloso de mis progresos tanto a la hora de programar como  de detectar errores y encontrar soluciones. Considero vital para desarrollar satisfactoriamente una web de este estilo el dominio de las herramientas en tiempo real para editar o visualizar modificaciones en el html o css, o trabajando en instantes de tiempo en aplicaciones j-query (crear interrupciones, alertas).

Sin más, me despido esperando que hayáis encontrado interesante e ilustrativo el blog-bitácora de 7Music!8

Tras las evaluaciones y calificación de la web, retomaremos la web con secciones más extensas y un esqueleto interno más estructurado. Haremos que la página sea mucho más inteligente con nuevos lenguajes .

Segundo estilo

En el segundo estilo he utilizado una paleta en torno al mismo naranja el logo, alejándome de los grises, una paleta más homogénea y relajada en tonos pardos. He utilizado la página colorschemedesigner para sacar esta información:

Mi intención como diseñador ha sido la de emular un tablón de ideas y noticias, donde se expone información. A modo de guiño, y con la intención de mostrar las capacidades aprendidas durante el curso, añadí una imagen de una chincheta con sombra en el fondo principal de la página (que solo es visible en este estilo, pues es incorporada con css).

Dude en añadir en este estilo el menú de redes sociales, pero creo que es un elemento vital en una web actualmente. Para integrarla en el esqueleto del nuevo diseño modifique el fondo del menú-social imitando el header con ruido y un tono #FFBA40, dando la sensación que es una única imagen.

Como en el segundo estilo de la primera entrega, mi menú es vertical y fijo en la pantalla. También merece la pena hablar sobre el uso de la regla ==>    elemento{display:none} Que me ha servido para ocultar información que no quería en el segundo estilo de una forma limpia y eficiente. Por ejemplo la subcabecera negra que aparece en el primer estilo.

Empezando a validar.

Para validar la página he utilizado la herramienta gratuita que ofrece W3C. El validador es una versión experimental para html5, pero me ha ayudado a solucionar pequeños errores de sintáxis y a aclarar ideas.

Por ejemplo:

 - No puedes repetir el atributo class en un elemento. En un inicio en mi código tenía algo parecido a:

class="clase1" class="clase2"   // La forma correcta de hacerlo es  ==>

class="clase1 clase2"

 - Tambien daba errores por tener atributos sin separar por un espacio.

No he conseguido solucionar a día de hoy un par de errores en el index e historia. Trataré de encontrar alguna solución preguntando a mi profesor o buscando información en internet.


Recomiendo la web de ayuda de W3, w3schools a todo programador o diseñador web de cualquier nivel. Cuenta con una API bastante estensa de html, css, javascript, j-query... Además cuenta con un editor online que te permite trabajar y aprender con unos métodos de estudio preparados por la web. A mi me ha resultado muy útil a lo largo del cuatrimestre.

Historia

En esta entrada voy a explicar el contenido de la sección de historia.

Es el html más trabajado de todo el sitio, tanto por el contenido como por el dinamismo que implementa gracias a j-query. No quería presentar una serie de contenidos estáticos, así que decidí inventar un menú interactivo desde cero. Buscaba elementos desplegables y el hecho de poder manejarme en una interfaz que tuviera toda la información.

Así pensé en imágenes, que actuaran como enlaces y que mostraran cierta información al clikear sobre ellas.

Las instrucciones en j-query y j-query ui seguirían este algoritmo:

- oculta los desplegables de las fotos y los divs desplegables con toda la información.

-Al pasar por una foto localizamos el div del enlace y lo bajamos desde la parte superior de la imagen con .slideDown().

-Cuando me poso en el comentario la animación se detiene con .stop(). He detectado fallos en la implementación de mi idea, pero no he logrado solventarlos. Básicamente si entras en la imagen por el comentario j-query no entiende que estés en la foto y la animación se detiene antes de tiempo, dejando el comentario sin desplegar al completo.

-Cuando salimos de la foto realizamos un .sliderUp() para subir el comentario con el enlace y ocultarlo.

- Al pinchar en el link se crea un div "gigante" que ocupa toda la pantalla y es transparente y se despliega la información con el div desplegable correspondiente.

Ese div que ocupa toda la página tiene una utilidad especial, el objetivo que tiene es el de crear la ilusión de que, al pinchar fuera del div de información este se cierre directamente. Lo que está haciendo j-query es un .click() en ese div para decirle después:

- cierra la información.
- Borra el div grande.

Otro pequeño problema que puede tener este .js es que acumula las pasadas del ratón por las imágenes y si pasamos muchas veces, muy rápido, al salir de la foto veremos que los enlaces comienzan a vibrar hasta terminar la cuenta.

Ese es el funcionamiento de la parte de historia. Espero que la explicación haya sido clara y entretenida. Espero cualquier tipo de duda o consejo. Como decía, esta sección de 7 music!8 es la más trabajada y en la que he aprendido más sobre los metodos de j-query.

Atendiendo al contenido de la web las cuatro primeras imagenes hablan del la música cinematográfica y el cine sonoro. En la quinta encontrarás información sobre música en los videojuegos. La imagen final, una mujer en una tienda de discos, contiene una lista de recomedaciones extraídas de FilmAfinity.

7 Music! 8 mejora su aspecto!

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!!

Más modificaciones en el diseño!

Seguimos modificando cosas antes de la primera entrega. Siguiendo los consejos de mi profesor, he implementado en la web un Slider, exclusivamente con css, pues en la primera entrega se pide una web estática. Pronto lo cambiaremos por una nueva versión trabajada en jQuery, ofreciendo un resultado más eficaz y profesional.

Este slider da problemas: nos obliga a tener una imagen fija de fondo, y produce fallos con el scroll. Por eso incido en el hecho de que es un elemento provisional, introducido en 7 music! 8 por el carácter estático de la segunda entrega del proyecto de TEWC.

Hemos introducido un pequeño elemento .js, para que podais ver el cambio de estilos de una forma directa.

Tambien hemos modificado las fuentes de toda la página, buscando un efecto de web tridimensional (nos alejamos de los sitios web planos!!!).

La página ha sido subida al hosting gratuito 000webhost.com. Para trabajar con este servidor FTP hemos utilizado el programa Filezilla.

Os invitamos a visitar 7 Music! 8 ya está colgada en la dirección provisional:

7 Music! 8

dirección en el servidor: http://raivak.0fees.net/

Pronto más !!!

Primer diseño!

Tras muchas horas de trabajo estoy orgulloso de presentar la primera versión de 7 music! 8. No deja de ser un boceto donde se han barajeado distintas posibilidades estructurales y de diseño, pero sin duda, es un paso importante.

Antes de nada, os presento el logo oficial de 7 music!8, ¡espero que os guste!

Gracias al trabajo y tiempo invertido en esta primera entrega he ganado cierta soltura en el control de html5, manejando la sintáxis propia del nuevo lenguaje y contrastandola, por curiosidad, con xhtml y html4. Tambien he aprendido a utilizar hojas de estilos, con CSS3.

Hablemos sobre el html:

A la hora de desarollar la estructura del index presentado decidí enfocar mis ideas hacia un diseño simple. Como ya dije en anteriores entradas, el objetivo es hacer una web bonita y decente desde el primer momento y no recargarla de elementos mal implementados por falta de experiencia.

detalle de head

Buscando en Internet llegué a la conclusión de que trabajar sobre una plantalla me limitaría así que decidí abrir muchos htmls que me interesaban, analizarlos, y trabajar desde cero después con la influencia de los codigos leidos.

No entraré en más detalle en torno al código, simplemente decir que he tratado de implementar clases, ids, divs propios de html5. He cerrado todas las etiquetas, para obtener un código estructurado (es más fácil trabajar así cuando empiezas).



Aparte del html, en la primera entrega debo adjuntar dos hojas de estilos.

En la primera opté por un menu horizontal simple. La paleta de colores utilizada son grises claros, oscuros y naranjas (es una combinación de colores que me gusta bastante). Buscando la sensación de profundidad, el fondo (creado en photoshop) presenta un tono gris con ruido, también podemos observar los margenes superior e inferior de la pantalla donde vemos dos olas grises y sombreadas. La importancia de la profundidas (hace mucho más dinámica la web) ha hecho que añada sobras en algunos de los cuadros para crear esa sensación tridimensional.

Este diseño es mi prerido y también el más trabajado. Tiene un gran trabajo de documentación personal,  y de ensayo y error...

Ejemplos del trabajo con photoshop

Con el mismo html tenemos esta otra versión de la web. Buscando probar cosas nuevas, en este estilo encontramos un menú movil (aplicando position: fixed). Es un diseño vertical con una paleta de colores basada en el azul.

Otras herramientas y fuentes utilizadas:

Para trabajar con colores en hexadecimal

W3Schools

DesarrolloWeb

Cosas que mejorar:

- A día de hoy no he logrado implementar ciertas fuentes tipográficas como League_gothic_regular.

- El segundo css ha sido poco trabajado y necesita muchas mejoras.