Barras de scroll personalizadas

En el mundo del frontend hay que cuidar, cada día más, la apariencia de nuestros desarrollos web. Atrás quedaron ya los años en que bastaba con que una página funcionara correctamente, y que fuera “más o menos” bonita. En un mundo dominado, cada vez más, no sólo por la funcionalidad y facilidad de uso, sino también por la estética cuidada hasta el mínimo detalle, es muy importante “entrarle por los ojos” al visitante de nuestra web. Las barras de scroll son un elemento visualmente muy importante y, con gran frecuencia, descuidadas por los frontenders. Es cierto que depende del tipo de sitio. En una web como, por ejemplo, esta misma, es un detalle completamente irrelevante, ya que el interés del visitante se centra en los contenidos. Sin embargo, suponte que te toca realizar una página para un estudio de fotografía, o una revista de moda. Ahí si que no puedes permitirte que el navegador dibuje las barras de scroll clásicas. En este artículo vamos a ver como solucionar esto, para poder contar con unas barras de scroll adecuadas a cada caso.

Plugin jQuery para recorte de imágenes

El recorte online de imágenes está presente, cada vez, en mayor número de sitios web cuya finalidad es formar comunidades virtuales (redes sociales, páginas de contactos, etc). Consiste en que el usuario sube una fotografía (bien sea suya personal o de un paisaje, u otro contexto) y recorta, en la propia página, una parte de esa foto, que es la que realmente quiere compartir con el resto de la comunidad. Esta técnica empezaron implementándola sitios tan relevantes en Internet como son Facebook y Google, aunque hoy en día se ha extendido como la pólvora. Imagina que tu tienes una fotografía en la que apareces con varios amigos. La subes a un sitio social como foto principal tuya, pero no quieres que aparezcan todos tus amigos, porque te diluyes en la multitud. Con el ratón, seleccionas la parte en la que estás tú, y decides que sólo esa parte es tu foto principal. La página web hace el recorte y te deja lo que tú has elegido. En este artículo veremos cómo hacer esto.

Intercambio de opciones entre selectores

Hace unos meses le di al mundillo de los desarrolladores el plugin SOS (Selectors Options Swapping). Desarrollado con técnicas que hoy consideramos obsoletas, y engorroso de configurar, ha sido sustituido por la versión 2, más ligera y funcional, y más cómoda de implementar en las páginas en las que sea necesario. Los que me conocéis sabéis que siempre me gusta buscar, y ofrecer cuando puedo, lo mejor de lo mejor. Me consta que los que hayáis probado la versión anterior encontraréis en esta una experiencia de desarrollador muy mejorada que, espero, os resultará satisfactoria.

El plugin DataTables (I). Qué es y cómo obtenerlo

A menudo nos encontramos conque tenemos un dataset, obtenido, por ejemplo, de una base de datos o cualquier otro proceso, con datos comerciales de un cliente, o facturas emitidas, o pedidos pendientes, etc. y tenemos que mostrarlo en la página que vamos a renderizar. El resultado debe ser una tabla con todos los datos, organizados en filas y columnas. Además, deben ser ordenables por las columnas que decidamos, deben admitir búsquedas de datos en tiempo real y, si hay demasiados resultados, deberían aparecer paginados. Todo esto y mucho más podemos hacerlo por programación, escribiendo nuestro propio código que realice cada una de las funciones necesarias. Sin embargo, es mucho más sencillo cuando existe ya un plugin, probado, que funciona bien, rápido y eficiente, y podemos configurarlo en cada caso según necesitemos. Este es DataTables.

El plugin DataTables (II). Uso básico.

En el artículo anterior introdujimos el plugin DataTables, apuntando brevemente cual es su utilidad. Se trata de un mecanismo, basado en jQuery, para renderizar vistas en forma de tablas, a partir de un dataset, de forma que implementen ciertas funcionalidades que resultan prácticas para el usario, haciendo nuestra web más usable y amigable. En concreto nos permite ordenar los datos usando distintas columnas cómo criterio, realizar búsquedas en tiempo real, crear paginaciones cuando hay muchos datos (nosotros, o el usuario, según el caso, decidimos, dinámicamente, cuantos resultados se muestran por página), etc. En el artículo anterior vimos los prerrequisitos necesarios, y lo que necesitamos para usar el plugin. En este artículo vamos a empezar a mostrar su potencia.

El plugin DataTables (III). Configuración por programación.

En el artículo anterior vimos un ejemplo de uso de DataTables. Es tosco, rudimentario y muy limitado, pero nos aporta una primera visión de “por dónde van los tiros”. En este artículo vamos a sacarle mucho más partido al plugin, configurándolo según nuestro diseño, y viendo cómo obtener unos resultados más flexibles. Aprenderemos algunas de las muchas opciones de configuración que tiene el plugin, y empezaremos a atisbar lo que podemos hacer o, mejor dicho, lo que esta herramienta puede hacer por nosotros. Veremos que se le pueden pasar opciones de configuración en formato de objeto de JavaScript, y que los datos pueden obtenerse, mediante Ajax, de un script externo. Eso le brinda una potencia increible a DataTables, como veremos en este artículo.

El plugin DataTables (IV). Mejorando el aspecto.

Hasta ahora hemos usado el plugin viendo unas pocas opciones de configuración. En este artículo veremos muchas más opciones para configurar el plugin DataTables, de modo que podamos mejorar mucho el resultado final. Veremos cómo mejorar el aspecto de nuestra tabla, poner los mensajes en castellano, establecer que columnas de la tabla admiten ordenación y cuales no, y muchas más cosas. A partir de este artículo empezamos a prepararnos para conseguir un resultado auténticamente profesional con el mínimo esfuerzo, y de una forma clara y directa. Esto nos abrirá el paso para luego seguir avanzando y mejorando los resultados. Así, veremos que, con el plugin DataTables, lo que antes llevaba tres días de trabajo se puede hacer en media hora, y de una forma mucho más elegante robusta y fiable.

El plugin DataTables (V). Consumiendo datos externos.

Tenemos ya cierta soltura en el uso del plugin DataTables. Sin embargo, es mucho lo que aún nos queda por aprender para sacarle realmente partido a esta magnífica herramienta. En los artículos anteriores hemos estado sentando las bases de lo que se puede hacer con este plugin, pero ahora las apuestas han subido. Ya no jugamos con cerillas, sino emocionantes partidas en las ligas de campeones. En este artículo vamos a aprender a obtener los datos que queremos mostrar de una forma dinámica. Ya no estarán grabados a fuego en el código, sino que se nos generará un dataset a partir de una fuente externa, según le pidamos más y más al plugin. También aprenderemos las bases de cómo se comunica el plugin con el script secundario, en uno y otro sentido. Con lo que aprendamos en este artículo estaremos listos para pasar al siguiente nivel.

El plugin DataTables (VI). Combinar datos de varias tablas.

En el artículo anterior aprendimos a usar el punto más fuerte del plugin DataTables, que es poder renderizar una tabla con los datos que necesitemos obtenidos de una fuente externa. En este artículo vamos a hacer algo muy similar, pero obteniendo los datos a partir de más de una tabla. Este es el escenario más habitual que vamos a encontrar, y es necesario saber cómo hacerlo. Verás que los cambios son mínimos, y se pueden implementar sin ningún esfuerzo en nada de tiempo. Sólo hay que rediseñar la consulta adecuada para el dataset. Si entendiste bien el artículo anterior, ahora estás a otro nivel. Ahora juegas en las ligas mayores, y tienes que seguir ascendiendo. Déjame mostrarte el camino.

El plugin DataTables (VII). Búsquedas personalizables.

En este artículo vamos a dar un paso más en el uso del plugin DataTables. Vamos a ver que hay ciertos métodos que nos permiten realizar búsquedas de determinados registros de forma programática, buscando, por ejemplo, sólo por determinados criterios. Así, aunque todas las columnas de nuestra tabla sean searchables, podremos buscar un contenido específico en una o más de ellas, ignorando si ese contenido está o no en las demás. Esto nos permitirá programar búsquedas totalmente personalizables, usando los scripts que aquí veremos como guía para adaptarlos a nuestras necesidades.