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.