17/02/2016

Sitios web con desplazamiento vertical y horizontal

Sitios web con desplazamiento vertical y horizontal

En la mayoría de las páginas web que conocemos, la totalidad del contenido no está disponible a primera vista, así que debemos desplazarnos por la página para verlo en su totalidad. En laptops y computadoras de escritorio, ese desplazamiento se llama scroll, y puede realizarse con las flechas del teclado, con la rueda del mouse o con la barra ubicada a la derecha. En dispositivos móviles, lo más común es el swipe: deslizar el dedo por la pantalla. También es posible que la misma página ofrezca botones de desplazamiento.

Casi siempre el desplazamiento es vertical: nos movemos hacia arriba y abajo. Sin embargo, también puede ser horizontal. Y hay quienes van más allá y combinan las dos dimensiones. Conozcamos algunos sorprendentes sitios web que nos permiten desplazarnos tanto de manera vertical como horizontal.

The Production Kitchen

The Production Kitchen es una panadería de Singapur. Este sitio web nos muestra las herramientas con que elabora sus tortas y galletitas. En total son 33 elementos —ilustrados con fotos y dibujos animados— que podemos recorrer en orden o de manera aleatoria. De manera similar a un mapa, la página no tiene un principio y un final. Podemos navegar por ella en múltiples direcciones, usando las flechas del teclado o bien presionando y arrastrando el mouse sobre la pantalla (gesto conocido como drag), además de hacer zoom. El resultado es espectacular, aunque no se puede disfrutar en dispositivos móviles y algunos links no funcionan.

100 Ans de Tour

Sitio web creado para celebrar los 100 años del Tour de France, con información de todas sus ediciones entre 1903 y 2013. Al desplazarnos horizontalmente vamos avanzando o retrocediendo una edición, y al desplazarnos hacia abajo accedemos a detalladas infografías sobre las etapas y los corredores de cada edición en particular. No disponible en dispositivos móviles.

Rally Interactive

El sitio web de esta agencia digital, todavía en versión de prueba, consta de una sola página con cuatro secciones. El desplazamiento horizontal nos permite pasar de una sección a otra, y con el desplazamiento vertical conocemos en detalle cada una de ellas. La información es clara y legible, gracias a una buena elección de fuentes y colores. Además, el sitio tarda muy poco en cargar considerando que posee fotografías en alta resolución y animaciones complejas.

Future Water

Esta compañía de software para sistemas hídricos, con base en Dinamarca, presenta la vista aérea de una ciudad donde se utilizan las diversas herramientas que desarrolla la firma. El desplazamiento por la ciudad es a través de drag. Si bien las posibilidades del recurso no están aprovechadas al máximo, el sitio es valioso por la calidad de sus ilustraciones técnicas y la originalidad con que se presenta el producto.

FS Millbank

Este sitio web explora hasta el último detalle la tipografía FS Millbank, diseñada especialmente para carteles de señalización. A diferencia de los casos anteriores, aquí el desplazamiento es guiado: las diferentes secciones de la página deben recorrerse en orden. El resultado es similar al de las presentaciones de diapositivas realizadas con Prezi. Más allá de la información contenida y la impactante manera de presentarla, el sitio en sí mismo sirve como un entorno de pruebas para la propia tipografía que promociona. En otras palabras, muestra lo bien que funciona el producto en muchas situaciones diferentes.

Doudou Blues

El desplazamiento multidireccional es ideal para sitios web inusuales. Por ejemplo, aquellos que cuentan una historia. Doudou Blues es un cuento musical infantil francés, que se compone de un libro y un CD de audio. Este sitio web imita en buena medida el libro en papel. Por un lado, porque contiene fragmentos de textos e ilustraciones; y por el otro, porque para recorrerlo con la mirada hay que desplazarse hacia la derecha y luego hacia abajo, como haríamos al avanzar por las páginas de cualquier libro.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce