nuevaversion

Actualización de la página web

Hola a todos! Estuvimos trabajando los últimos meses en una actualización importante para la página de Munack. Abajo les contamos los cambios que se vienen…

Los productos y demás información que se muestra en las capturas de pantalla a continuación, son exclusivamente de prueba. No comercializamos esos productos.

Estilo

Esta vez decidimos usar Bootstrap como base para la estructura de la página; hubo que escribir todo el diseño de cero . Seguimos usando Font Awesome para la iconografía; la idea era reducir al máximo el uso de imágenes para bajar los tiempos de carga de la página.

Mantenemos el diseño de 3 columnas para todo el sitio, salvo para el detalle de los productos, donde eliminamos la columna derecha para descomprimir la información.

Rehicimos el menú de usuario; ahora con las opciones básicas del Panel de usuario.

Nuevo menú de usuario
Nuevo menú de usuario

El carrito de compras también se reformuló. Ahora va a  estar en la parte superior, muestra las imágenes de los productos e información adicional.

Nuevo carrito de compras
Nuevo carrito de compras

Cuando se agrega un producto al carrito y éste no está visible, aparece en la parte superior de la pantalla un indicador visual de la posición del carrito. Desaparece después de dos intermitencias.

Indicador del carrito de compras
Indicador del carrito de compras

Usabilidad

Desarrollamos el plugin formAutoSave para JQuery . Este script permite hacer un auto-guardado de los datos de los formularios (de registro, del carrito y el área administrativa del usuario, etc.). Los datos se guardan localmente, es decir en la computadora del usuario y no se trasmiten nunca hacia nuestro sitio. También se da la posibilidad de eliminar los datos guardados.

Auto-guardado de formularios
Auto-guardado de formularios

Además, se mejoraron todos los formularios, con el agregado de los types correspondientes según HTML5, atributos de auto-rellenado de información (soporte parcial) y finalmente se implementó la validación en línea de los datos, para evitar errores y pérdida de tiempo al usuario.

Software base

Se hicieron numerosas modificaciones a Prestashop, para aggiornarlo un poco, por que decidimos seguir sin actualizarlo. Además se actualizó la versión de Fancybox y se reemplazó el deslizador de imágenes miniaturas por defecto (en la página de los productos) por Slick.

Además, pensando en la performance, se hicieron modificaciones para permitir la minificación de todo el código (HTML, CSS y Javascript).

Reseñas de productos

Se eliminó el plugin social de Facebook para hacer comentarios en las páginas de los productos y se reemplazó por la solución por defecto de Prestashop; esta permite darle puntación a las características de los productos.

Vista rápida de productos

Se agregó la característica de vista rápida de los productos (en la página de inicio y las categorías). Ahora en cada producto aparece un botón, con el ícono de un rayo, que abre una vista del producto elegido.

Vista rápida de productos
Vista rápida de productos
Vista rápida de productos
Vista rápida de productos

Diseño adaptable

Obviamente, con la adopción de Bootstrap pretendíamos lograr un diseño absolutamente adaptable a cualquier dispositivo… aunque nos faltó probarlo en un BlackBerry

Diseño adaptable
Diseño adaptable

Estilos de impresión

Los estilos para la impresión también fueron adaptados para una mejor visualización.

Diseño de impresión
Diseño de impresión

Seguro que nos olvidamos de algunas otras cosas… las agregamos si se nos ocurren

Esperamos que les guste. Ah! comentarios y sugenrecias, bienvenidos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>