Diseño responsive, Herramientas útiles

¡Estas herramientas te pueden ayudar en tu web responsive!
Parte 3 de 3

Diseño Responsive: Herramientas útiles

Parte 3 de 3

En este tutorial mostraré algunas librerías o herramientas que nos ofrece el Framework Foundation para nuestros proyectos. Estas librerías nos van a ahorrar mucho tiempo de desarrollo. 

1. Slider Fotos Responsive

El framework trae por defecto Orbit.js.
Este es un potente slider de imagenes, responsive y touch que podemos usar en nuestros proyectos.

La instalación es muy sencilla.
Solo basta con poner esta línea de código antes de cerrar el tag.

Para implementarlo, sería de esta forma. 

 Resultado es:

Slider Responsive

Este slider es muy bueno, sin embargo, lamentablemente Foundation ya no le da soporte.

Si quieres otras alternativa, yo les recomiendo también y son estos:
 OwlCarousel y SlickCarousel.

2. Cajas de la misma altura – Equalizer.js

Unas de las cosas más difíciles es que todas las cajas queden del mismo tamaño o altura, sin importar la cantidad de contenido que tengan. Bueno este código que trae este framework nos da la mano.

¿Cómo implementarlo?

En el contenedor (fila), dentro de los parámetros de la etiqueta debes incluir el código data-equalizer. En cada columna que quieres que sea de igual tamaño, escribe este código data-equalizer-watch. Recuerda, esta va dentro de las etiquetas.

Entonces, se vería asi:

 Este sería el resultado:

Cajas de la misma altura

Cajas de la misma altura

3. Imágenes Responsive

Esta herramienta es muy útil cuando deseas cambiar el contenido, dependiendo desde que dispositivo la visualizan. La razón es mejorar la experiencia del usuario cuando visite el sitio, todo lo que vea, lo visualice correctamente sin importar el dispositivo.

Por ejemplo, las imágenes con muchos detalles, se visualizan bien desde un desktop, pero en un smartphone al ser tan pequeño, preferimos imágenes sencillas (por el peso) o con menos detalles (para mejorar la visualización).

Para hacer los intercambios, sin necesidad de ingresar código CSS, Foundation tiene esta herramienta “Interchange Responsive Content”. En el código html le indicamos que imagen mostrar en desktop, en tablets y smartphone.

Este sería el código:

 Esta herramienta también podemos utilizarla para cambiar otro tipo de contenido, como páginas incrustadas.

 Para ver cómo funciona y de que otras formas puedes usarlas, ingresa aquí.

4. Acordiones

Son elementos que usamos para mostrar contenido de forma ordenada, usando unas pestañas en forma de acordeon.

Acordeon con Foundation Acordeon con Foundation

Para implementarlo puedes mirar aquí la documentación.

5. Otras herramientas útiles.

Con este framework, también podemos implementar:

Resumen de Foundation

Cómo vemos, son muchas herramientas y realmente son sencillas de implementar, depende mucho de cuanto quieres aprender y que tan curioso seas. Entonces a practicar para ser un profesional.

¿Por qué debes usar un Framework CSS?

Para ponerte un caso, una web sencilla, maquetarla desde 0,  escribir todo el código CSS y hacerla responsive, me puedo demorar alrededor de un día,  dos o hasta más,dependiendo de la cantidad de contenido que tenga el sitio web.

Lo que me demoro maquetando manualmente un día, usando un framework, como Foundation, en cuestión de horas puedo hacerlo y me queda perfecto, elegante y de forma profesional.

Por tal razón, recomiendo aprender a usar Frameworks incluso puedes combinarlo con un preprocesador de CSS, una herramienta que te ayudan a optimizar el trabajo y tiempo cuando escribes código CSS.
Yo trabajo con STYLUS, puedes aprender a usarla aquí.

Bueno aquí termina este tutorial de Aprender a hacer Web Responsive.

Si tienes dudas, algo que desees que te explique mejor, déjame un comentario.

No olvides seguirme en twitter @juksoto y compartir este artículo.

Etiquetas:, , , ,

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en