Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps

Foundation para principiantes: Joyride, Intercambios, Tablas y Paneles

by
Read Time:6 minsLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega Drop
Foundation for Beginners: Sticky Navigation, Flexible Video and Zepto

Spanish (Español) translation by Juliana Carvajal (you can also view the original English article)

Agreguemos más a nuestro arsenal de Foundation mirando el plugin Joyride, que ayuda a guiar a tus usuarios a través de tus sitios. También veremos tablas de precios, tablas estándar e intercambio; una novedosa herramienta de imagen receptiva. Cubriremos la implementación de estas características con una plantilla simple que puedes descargar y jugar.

Comenzaremos con las funciones más sencillas que cubriremos en este tutorial.


Paneles

Agregar una clase de "panel" a casi cualquier elemento lo convertirá en un bloque de color claro. Sin embargo, no cualquier tipo de bloque, ya que estos paneles usan estilos de border-box, por lo que el relleno se incorpora al ancho del objeto.  Este es un enfoque muy útil, ya que te brinda un control mucho más intuitivo sobre las dimensiones de los elementos.

Para ilustrar este punto he creado un diseño de dos columnas usando una imagen y el panel, perfectamente alineados.

111

Tablas de precios

Una de las principales razones para adquirir/construir un sitio web es para vender algo. Debido a esto, las tablas de precios son comunes en Internet y lo han sido durante años, por lo que, por supuesto, Foundation tiene esta área cubierta.  Cada tabla es en realidad una lista desordenada, con elementos de lista y algunas clases bien ubicadas.

La etiqueta ul en sí tiene una clase de "pricing-table", mientras que dentro tienes la opción de usar "title", "price", "description", "bullet-item" y "cta-button".  La única personalización adicional necesaria es tu contenido. Es posible que desees alinear varios de estos uno al lado del otro para crear más una tabla de comparación de precios.

222

Tablas estándar

Las tablas de precios son excelentes, pero de vez en cuando necesitaras una tabla html real para mostrar los datos. Configurarlos en Foundation es realmente fácil porque no hay una configuración real en absoluto.  Simplemente agregas el marcado de tu tabla como de costumbre y se encargará de tus estilos. Lo único que puedes querer hacer es agregar anchos de columna para nivelar tus columnas.

333

Intercambio

Aunque todas las imágenes en Foundation son fluidas de forma predeterminada, a veces te encontraras con problemas: todo el tema de las imágenes en RWD está en curso.

Uno de esos problemas surge cuando tienes texto en una imagen. Recientemente, Zurb agregó un nuevo plugin llamado "Intercambio"; su trabajo es simple: reemplaza la imagen de tu elección por otra diferente cuando el tamaño de la pantalla alcance cierto punto.  Funciona agregando un atributo especial, a saber, " data-interchange ". Esto se utiliza para albergar las opciones de los cambios en la fuente de la imagen.

Aquí estoy haciendo uso de muchas de las opciones disponibles en el atributo. Hay bastantes parámetros, por ejemplo, opcionalmente, puedes establecer un punto personalizado para cambiar la imagen.

Este no es el plugin de mayor rendimiento, ya que los cambios pueden demorar uno o dos segundos, con suerte Zurb abordará esto en el futuro. Uno de los principales beneficios de este plugin es el tiempo de carga que ahorra en los dispositivos móviles.  En lugar de cargar un jpeg masivo en una conexión 3G, puedes cargar una versión optimizada más pequeña de la misma imagen, liberando ancho de banda para cargar el resto de la página.


Joyride

En cada parte de esta serie hasta ahora hemos cubierto un plugin de JavaScript disponible en Foundation, pero en este caso cubriremos dos.

En algunas situaciones, es útil llevar a los usuarios a un recorrido mágico y misterioso por su interfaz de usuario. Google, por ejemplo, hace esto cuando lanza nuevas funciones en muchas de sus aplicaciones.  Al guiar a sus usuarios paso a paso, puede explicar qué hace cada parte y hacia dónde conduce. Joyride cubre esto mediante el uso de una lista que combina cada elemento de la lista, manteniendo la parada del recorrido, con un elemento en la página.  Esta lista puede ser una lista ordenada o una lista desordenada, pero debes tener tanto la clase "joyride-list" como el atributo "data-joyride".

555

Cada elemento de la lista necesita su propio "data-id" que debe coincidir con el id del elemento con el que estas acoplado. Si la primera parada de tu recorrido es una etiqueta h2, tu ID de datos podría ser "data-id =" title "". Tu h2 necesitaría una identificación de "title". Fácil.

Aparte de esta configuración básica, querras agregar un botón "next" para que los usuarios puedan navegar fácilmente de una parada a la siguiente.  Estos se agregan adjuntando otro atributo al elemento de la lista; "data=text". En el ejemplo anterior, utilicé "Go" para comenzar y "next" para continuar.

Hay algunas opciones para joyride y algunas se pueden agregar directamente a cada elemento de la lista.  Arriba he usado data-options="tipLocation:top;tipAnimation:fade" y como habrás adivinado, esto asigna la parada del recorrido a la parte superior del elemento acoplado, atenuándolo.  Hay muchos más parámetros que puedes pasar en la inicialización de JavaScript. También puedes hacer uso del plugin de cookies o, si tus usuarios han iniciado sesión, guarda una opción para mostrar el recorrido solo una vez.


Herramienta útil

Lamentablemente, una cosa que Foundation no incluye (todavía) es un plugin testimonial / feature. Estos realmente pueden ser útiles. Quovolver puede remediar esto con una configuración simple y un marcado flexible. Agrega la secuencia de comandos en tu pie de página, agrega algunas marcas y ya está.

444

A continuación

En la siguiente parte de nuestro examen de Fundation Zurb hablaremos sobre Magellan, que crea una navegación pegajosa.  Veremos las clases de visibilidad, el soporte de derecha a izquierda, las pulsaciones de teclas, las miniaturas, el video flexible y las dificultades de zepto. Explicaré los casos de uso de estas características y la mejor manera de implementarlas en tus proyectos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.