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.
1 |
<div class="large-6 columns"> |
2 |
<div class="panel"> |
3 |
<p id="firstStop">We have a simple selection of hosting packages for you to choose from, these will work fantastically for any company. With ultra fast mySQL database connections, content management systems really fly. Add to this 24/7 customer support and 99.9% uptime and you've got a great hosting package.</p> |
4 |
</div>
|
5 |
</div>
|
Para ilustrar este punto he creado un diseño de dos columnas usando una imagen y el panel, perfectamente alineados.
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.
1 |
<ul class="pricing-table"> |
2 |
<li class="title">Startup</li> |
3 |
<li class="price">$9.95</li> |
4 |
<li class="description">An awesome package to get any company onto their feet. With instant setup and magic money making plugins.</li> |
5 |
<li class="bullet-item">1 Database</li> |
6 |
<li class="bullet-item">5GB Storage</li> |
7 |
<li class="bullet-item">20 Users</li> |
8 |
<li class="cta-button"><a class="button round" href="#">Buy Now</a></li> |
9 |
</ul>
|
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.
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.
1 |
<table>
|
2 |
<thead>
|
3 |
<tr>
|
4 |
<th width="200">Startup</th> |
5 |
<th width="200">Enterprise</th> |
6 |
<th width="200">Global Corporation</th> |
7 |
</tr>
|
8 |
</thead>
|
9 |
<tbody>
|
10 |
|
11 |
<tr>
|
12 |
<td>1 Database</td> |
13 |
<td>5 Database</td> |
14 |
<td>10 Database</td> |
15 |
</tr>
|
16 |
|
17 |
<!--more rows-->
|
18 |
|
19 |
<tr>
|
20 |
<td>No Backups</td> |
21 |
<td>50GB Backups</td> |
22 |
<td>100GB Backups</td> |
23 |
</tr>
|
24 |
</tbody>
|
25 |
</table>
|
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.
Y permítanme agregar, creo que es una locura que cualquier persona en nuestra industria pueda hablar de * solo imágenes * durante más de una hora. #RWD
— Dave Rupert (@davatron5000) Mayo 14, 2013
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.
1 |
<img src="small.jpg" data-interchange="[smallest.jpg, (default)], [smallest.jpg, (screen and (max-width: 568px))], [small.jpg, (small)], [med.jpg, (medium)], [large.jpg, (large)]"> |
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".
1 |
<ol class="joyride-list" data-joyride> |
2 |
<li data-id="firstStop" data-text="Go"> |
3 |
<p>Let's get started, here we have an intro.</p> |
4 |
</li>
|
5 |
<li data-id="numero1" data-class="custom so-awesome" data-text="Next"> |
6 |
<h4>First Stop</h4> |
7 |
<p>Here we use the new interchange function to change images based on screen size.</p> |
8 |
</li>
|
9 |
<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade"> |
10 |
<h4>Second Stop</h4> |
11 |
<p>We are using pricing tables here to display a list of services from a hosting company.</p> |
12 |
</li>
|
13 |
<li data-id="numero3" data-button="Next" data-options="tipLocation:top;tipAnimation:fade"> |
14 |
<h4>Third Stop</h4> |
15 |
<p>This is just a link but it opens a modal with a standard table inside, exciting eh?</p> |
16 |
</li>
|
17 |
<li data-button="End"> |
18 |
<h4>End Of The Line</h4> |
19 |
<p>Our tour ends here, please remember to take all your belongings with you on your way to the exit.</p> |
20 |
</li>
|
21 |
</ol>
|
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á.
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.
