La página de inicio del sitio es un mosaico que contiene todos los trabajos publicados. Cada trabajo puede tener, en distintos momentos, 3 tamaños diferentes de imagen.

CLIENTE:
BeBop diseño | diseño

TAREAS REALIZADAS:
Desarrollo web, Aplicación on line

TECNOLOGÍAS UTILIZADAS:
HTML, CSS, JQuery, AJAX, MySQL, PHP, Javascript, Twitter Bootstrap

REALIZACIÓN
05 - May - 2015

VER EN LINK EXTERNO:
Clic aquí

El mosaico de imágenes de la página de inicio se modifica con la publicación de cada nuevo trabajo. El sistema “lee” los contenidos de la base de datos y arma la grilla del mosaico, ya sea la página de inicio completa (con todos los trabajos) o la página de una categoría (por ejemplo /web o /foto).

Una sencilla aplicación Javascript selecciona las imágenes a cargar para cada tesela del mosaico, de acuerdo a la clase CSS que tenga asignada la celda contenedora. Las imágenes de cada tamaño han sido generadas previamente (al momento de publicar el trabajo) desde el backend.

A su vez, el tamaño de las teselas se adapta a los distintos tamaños de pantalla, usando breakpoints en el CSS para determinar cuando pasar de un tamaño al siguente. En este caso, usamos los breakpoints standard de Twitter Bootstrap, agregando uno para las pantallas de escritorio “intermedias”: @media (min-width: 1300px).

Usando (y abusando) del CSS logramos que el mosaico se genere rápidamente, sin afectar mas de lo necesario la velocidad de carga del sitio. Las imágenes de las teselas se van cargando por bloque, presentando al usuario los contenidos de la parte superior, mientras se siguen cargando los inferiores.

BeBop diseño

BeBop diseño

Ameghino 1580
(N3300DYD) Posadas, Misiones, Argentina
  +54 9 376 1540.602294
  info@bebopweb.com.ar
  BeBop diseño