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.

Trabajando con pixlr

Antes de nada, os pongo al día sobre las últimas novedades de 7 Music! 8. La página va tomando forma y en breve podremos mostrar algunos ejemplos de diseño. Esperamos leer vuestras opiniones, estad atentos!

En la entrada de hoy voy a comentar un trabajo hecho con Pixlr, un editor de imagen online. El objetivo del montaje no es otro que el de familiarizarnos con el entorno de trabajo de una herramienta de diseño (algo que a priori, se queda fuera del campo de trabajo de un ingeniero de Telecomunicación, sin embargo veremos como esto no es del todo cierto).

Interfaz de Pixlr

Vamos a tomar el siguiente fondo y estas dos imágenes:

Comenzamos a trabajar eliminando el fondo de la imagen en la que salgo yo, para ello utilizamos la herramienta de Lazo para reducir el área de trabajo y el borrador de forma que obtenemos una imagen con un fondo transparente:

Esta imagen tiene demasiada altura, así que aplicamos una reducción proporcionada e introducimos la capa sobre nuestro fondo, obteniendo:

He tratado de retocar un poco la luz (con unos resultados no muy realistas, pero en definitiva, se trata de jugar con Pixlr. Añadimos ahora una imagene .png:

Por último vamos a introducir un pequeño bocadillo con la frase "Javier Martínez Peche hizo este montaje":

Espero que hayais disfrutado del resumen. ¡Pronto mucho más!

Bienvenidos a 7 Music! 8 Bitácora

Bienvenidos a 7 Music! 8 Bitácora, un blog que pretende ser una memoria activa y visual del sitio 7 Music! 8, una nueva web dedicada a la música en el cine y los videojuegos.

Esta web nace como un proyecto de la asignatura Tecnologías de Cliente Web (TEWC) impartida por Carlos A. Iglesias profesor del Departamente de Ingeniería Telemática en la Universidad Politécnica de Madrid. El objetivo es mostrar, a lo largo de estos meses, como se desarrolla la página web desde cero en todos los campos (programación, ideas, diseño, conceptos).

¿Que contendrá 7 Music! 8?

7 Music! 8 hace referencia a la música que hay detrás del septimo y octavo arte, el cine y los videojuegos. Esto, sin duda, nos situa en un campo muy amplio ya que aquí se hablará sobre obras y sus compositores, historia, tecnología, instrumentación e incluso teoría musical enfocada a las melodías clásicas de estos sectores.

Pruebas de grabación de un cello

¿Como abarcar esto?

Antes de nada, deberiamos remarcar que este va a ser un proyecto escalonado, no se pretende crear un sitio titánico en un tiempo record, el objetivo principal será tener un producto de calidad desde el primer momento e ir aunmentando poco a poco su tamaño hasta convertirse en una web de referencia sobre los temas tratados. Es decir, despacito y con buena letra.

Entremos en contenido. A priori la página contará con un tronco de carácter histórico, que será el eje de la información en el sitio. En él veremos a través de etapas cronológicas y estilos el avance de este tipo de música desde el inicio del cine hasta las últimas composición para videojuegos (tanto independientes como grandes producciones). Este eje estará apoyado sobre otras secciones como: tecnología, instrumentación, noticias. A largo plazo se irán añadiendo nuevas secciones e ideas (teoría musical, listado de obras y reseñas).

El maestro Uematsu, principal compositor de Final Fantasy.

En cuanto al diseño, siempre se buscará la calidad, soy partidario de realizar un formato minimalista antes de crear un sitio sobrecargado. ¡Queremos que el lector pase con nosotros mucho tiempo! Sin embargo, exprimiré al máximo mis conocimientos de programación adquiridos para presentar un sitio con cierta complejidad estructural y bastante dinamismo.

¿Existen referentes en la web?

La música cinematográfica ha convertido melodías en iconos de una generación. ¿Quien no conoce la música de Super-man? ¿O de los Piratas del Caribe? Y hablando de videojuegos, ¿quién no conoce el tema del Tetris?

En internet puedes encontrar todas esas obras sin mucho esfuerzo, pero quizá sea más complicado hallar información contrastada sobre el proceso de creación de bandas sonoras.

Ejemplos por supuesto hay:

http://www.mundobso.com/

Página con un diseño simple e intuitivo. Actualmente con secciones en construción. Esta página cuenta con un listado extenso sobre banda sonoras comerciales que incluye una calificación y una pequeña ficha con datos de interés. También cuenta con un foro interno y las secciones básicas (contacto, enlaces, busqueda). Sobre el formato, su menu se encuentra a la izquierda, en la columna izquierda se desarrollan las nuevas entradas (noticias, nuevas incorporaciones a la lista, etc). Fondos oscuros con tonos blancos y amarillos, una opción simple, apenas hay animaciones ni menus dinámicos.

http://nueva.bsospirit.com/

 A diferencia de mundobso, nueva.bsospirit tiene un diseño mucho más cuidado (si echamos un breve vistazo a su código, vemos que está lleno de sentencias css y Jquery). El fondo de la página cambia cada cierto tiempo, manteniendo siempre una gama de colores atractiva. Cuenta con un menu superior desplegable, una ventana de información sobre las novedades más importantes de la web con un scroll horizontal dinámico. Los contenidos son similares, sin embargo el alcance es mucho mayor, bsospirit tiene fuerza en la web y ha llegado a tener presencia en formato físico organizando festivales invitando a celebridades del sector en ciudades españolas con un gran éxito .

http://www.streamingsoundtracks.com/

 Emisora de internet americana que permite la reproducción en Streaming de BSO. Pertene a Loud City Radio, pero cuenta con un portal independiente en aspecto. Un formato bastante caótico, lleno de listas y publicidad. Es un servicio curioso, pero el portal no es un ejemplo de desarrollo e implementación.

Estas páginas ofrecen un catálogo importante con reseñas sobre OST y compositores, noticias actualizas, premios y una forma sencilla de acceder a las obras, en 7 Music! 8 se pretende crear un punto de información sobre la historia de la música en esos campos. No será un listado de las bandas sonoras comerciales a la venta, ni un servicio online, pretendemos ser un punto de conocimiento sobre un tema del que existe mucha información en la web mal distribuida.

En el ámbito del videojuego existen mucha información en páginas sobre el sector, pero no dejan de ser una sección dentro de un todo más generalista.

Recapitulando, la página seguirá esta estructura:


1.-   Historia de la música cinematográfica.

• A través de una linea cronológica dinámica seleccionamos las diferentes etapas a lo largo del siglo XX y XIX. (similar a xtimeline, pero trantando de crear un sistema desde cero, que se adapte mejor al diseño de 7 Music! 8)
• Dentro de cada sección encontramos contextos historicos y tecnológicos (con enlaces bien implementado hacia otras secciones como "composición" o "grabación" sin tener que salir de la sección de historia).
• En cada parada cronológica existiran subsecciones sobre los diferentes estilos (un ejemplo sería dentro de los 80 la música en el cine independiente, en el cine de acción y terror y en el cine documental.) 

2.-  Historia de la música en los videojuegos.

3.-  Tecnologías de la creación musical.

• Composicióm.
• Grabación.
• Instrumentación.
• Llegada al usuario.

4.-  Teoría musical.

• Teoría elemental.
• Ejemplos en el mundo del cine.
• Ejemplos en el mundo del videojuego

Cierro la entrada de bienvenida con una breve presentación. Soy Javier Martínez y estudio telecomunicaciones en la ETSIT de la Universidad Politécnica de Madrid. Esta página representa la fusión de mis cuatro hobbys preferidos: programación, música, cine y videojuegos.

Toco el violonchelo y el bajo eléctrico desde hace años y considero que el conocimiento musical aumenta la experiencia en el cine y los videojuegos, la inmersión en la historia y la ambientación que crea me fascina y espero aportar mi granito de arena al conocimiento de los lectores para que poco a poco, vayan apreciando matices nuevos en sus películas favoritas.

"La música empieza donde se acaba el lenguaje."   Hoffmann.