Tecna Webs - Desarrollo web Y Android ™

imagen cabecera y logo
Sección:
Desarrollo web.
Categoría:
Galerías de imágenes.
Nombre:
Estilo caótico.
Fecha:
22-09-2013
Asunto:
Galería de imágenes con estilos y posiciones diferentes para cada imágen, generada desde un panel de control.

Estilo caótico.

Descripción.

Galería de imágenes con estilos y posiciones diferentes para cada imagen, generada de forma sencilla desde un panel de control de desarrollo propio. Desde este panel se pueden generar galerías nuevas o editar las existentes. Se puede elegir entre 4 formas para el marco de la foto y entre 8 colores diferentes. También se puede elegir la orientación de la foto y el texto que la acompaña. Una vez que se han introducido todos los datos se generan de forma aleatoria, las posiciones de cada imagen, y se crean los archivos necesarios, con lo que la galería ya está terminada y accesible desde la web. Que las imágenes tengan marcos y posiciones diferentes da la sensación de que han sido colocadas por personas diferentes y en momentos diferentes sin orden ninguno. La galería se adapta al tamaño disponible de la ventana y las imágenes se vuelven a colocar, lo que aumenta la sensación de desorden natural o espontaneidad. De ahí el nombre de caótico que hemos dado a este estilo, que se creó para una charanga de animación infantil, por lo que se dio a toda la página un estilo alegre y colorido. Puede visitar la web desde el enlace a página de Chokoflau.

Accesible sin necesidad de javascript ni de estilos, las imágenes están disponibles en los dos tamaños existentes, así como el texto que acompaña a cada imagen. No obstante, se han hecho algunas mejoras estéticas con javascript, como incluir un bocadillo como el de los tebeos y comic para el texto de las imágenes. Sin errores, con código validado y funcional en los principales navegadores: Google-Chrome, Firefox, Opera, Explorer. En los dispositivos móviles que se ha probado también funciona correctamente, aunque pudiera dar problemas el evento hover en algunas pantallas táctiles, pero esto se podría corregir con ayuda de javascript. De todos modos la imágen de mayor tamaño también está accesible a través del enlace, y la miniatura también dentro del código, con lo que la galería cumple su función en cualquier caso: aunque esté desactivado javascript y no funcione el evento, o incluso sin estilos como ya se dijo. Además, se puede hacer una carga asíncrona y seguir siendo accesible puesto que se genera una página estática desde el panel de control al crear la galería.

Estos detalles agilizan la carga de la página evitando que muchos visitantes desistan porque se cansen de esperar y ayudan a ocupar una buena posición en los buscadores. A continuación puede ver un ejemplo simplificado pero totalmente funcional.

Ejemplo.

GALERIA DE IMÁGENES

mini foto 0 muestra galeria caotica.
Foto 0 galería caótica.
mini foto 1 muestra galeria caotica.
Foto 1 galería caótica.
mini foto 2 muestra galeria caotica.
Foto 2 galería caótica.
mini foto 3 muestra galeria caotica.
Foto 3 galería caótica.
mini foto 4 muestra galeria caotica.
Foto 4 galería caótica.
mini foto 5 muestra galeria caotica.
Foto 5 galería caótica.
mini foto 6 muestra galeria caotica.
Foto 6 galería caótica.
mini foto 7 muestra galeria caotica.
Foto 7 galería caótica.
mini foto 8 muestra galeria caotica.
Foto 8 galería caótica.
mini foto 9 muestra galeria caotica.
Foto 9 galería caótica.
mini foto 10 muestra galeria caotica.
Foto 10 galería caótica.
mini foto 11 muestra galeria caotica.
Foto 11 galería caótica.
mini foto 12 muestra galeria caotica.
Foto 12 galería caótica.
mini foto 13 muestra galeria caotica.
Foto 13 galería caótica.

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google según las condiciones descritas en la Creative Commons 3.0 Attribution. Más información en el enlace aviso legal del pie de página.

tecnawebs arroba gmail punto com