AdaptaciónhtmlcssJavaScript

Contexto

Este trabajo se desarrollo a pedido de la agencia Salamó Diseño, y consistió en llevar un diseño vectorial (Illustrator), a web.
Para lograr esto, se utilizaron técnicas y herramientas que minimizaran la utilización de imágenes para textos con fuentes no seguras para web; se utilizó JavaScript para realizar diferentes animaciones a través del sitio; y se hizo especial hincapié en la compatibilidad corssbrowser, garantizando la correcta visualización en los navegadores Chrome, Firefox, Internet Explorer 8 e Internet Explorer 9.

Resultado +


Etapa 1: Organización y planificación

Organizar los archivos recibidos para definir el camino a seguir; qué textos utilizarán fuentes no seguras para web, cuáles pueden ser llevados a una fuente segura; extraer paleta de colores para trasladarla a los archivos correspondientes; qué imagenes deberán utilizare como fondos, y cuáles pueden ser reemplazadas por código.

Organización

Etapa 2: Maquetación de la estructura

Luego de extraídos los elementos necesarios desde los archivos gráficos, procedí a crear lo que sería la base del sitio: clases css generales, y estructura HTML principal, lo que permite avanzar hacia las estructuras que serán propias de cada página interior.

Maquetación

Etapa 3: Animaciones y mejoras de interfaz mediante JavaScript

Utilizando JavaScript a través de MooTools, mejoré y agregué funciones al sitio, con el propósito de enriquecer la experiencia del usuario con la interfaz.


Etapa Final: testeo en navegadores y búsqueda de errores

finalizado el armado en XHTML1.1 y CSS, hubo que realizar algunas modificaciones para que todos los navegadores mostraran de igual manera el sitio. Los navegadores Chrome, Firefox, Internet Explorer 8 e Internet Explorer 9, finalmente muestran todo el sitio de igual manera, y cumplen con los comportamientos JavaScript establecidos.
Posteriormente, realicé una última revisión del sitio, para buscar y poder corregir los últimos detalles que pudieron quedar.

Crossbrowser