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.

El canvas de HTML 5 (I). Qué es canvas.

En octubre de 2014 se publicó oficialmente el estándar HTML 5, aunque mucho antes ya estaba aprobado por el consorcio, y marcó un hito en la historia del desarrollo web. Si bien se introdujo, como sucede con estas cosas, con cierta cautela, mientras los navegadores evolucionaban para aprender a entender este nuevo estándar, la transformación que ha aportado a la web es indiscutible. Por supuesto, como ocurre casi siempre, Internet Explorer fue de los últimos en adoptar esta normalización (y algunos aún nos preguntamos si será totalmente compatible con la mayoría de las posibilidades). Vamos, lo normal.

Selectores CSS y jQuery (I). Introducción y selectores simples.

Iniciamos esta serie dedicada a los selectores que se emplean en CSS 3 y en jQuery para referenciar los elementos de un documento web. Todos sabemos, con caracter general, lo que son los selectores. Son identificadores que permiten determinar a que elemento o elementos de una página se va a aplicar un estilo, o se van a ver afectados por una operación. Sin embargo, la mayoría de nosotros estamos muy familiarizados con los selectores que usamos en el día a día, pero no con otros que no usamos a menudo (o que quizá no usamos nunca) y que podrían facilitarnos la vida. En estos artículos pretendemos recopilar todos los selectores que se emplean actualmente, para CSS y para jQuery, a modo de referencia o consulta. No vamos a enseñarte CSS ni jQuery aquí. Damos por sentado que ya te son familiares, en mayor o menor grado. Estos artículos son solo una guía de referencia de los distintos selectores para tenerla a mano.

JavaScript 2015 (III). Interpolación y mapas.

En este artículo vamos a conocer dos nuevas aportaciones del estándar 2015 de JavaScript para el manejo de datos. Se trata de las interpolaciones y los mapas. Ambos se refieren al manejo de objetos y de arreglos, es decir, variables complejas o colecciones de variables. Estas técnicas (o sus equivalentes similares) existen, desde hace mucho tiempo, en otros lenguajes como PHP o Java. Sin embargo, en JavaScript se echaban en falta. La nueva normalización llena completamente este vacío, si bien emplea una sintaxis peculiar. No sabemos si, en posteriores versiones del lenguaje, la sintaxis se aproximará más a la de otros lenguajes, o se mantendrá como propia de Javascript (aunque todo apunta a esto último). Nosotros vamos a conocer lo que tenemos ahora y si, en el futuro evoluciona, nos adaptaremos (aunque, insisto, la tendencia parece ser a mantener la notación actual).

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 (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 (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.

El plugin DataTables (VIII). Ordenaciones complejas.

El artículo anterior fué especialmente intenso. No sólo aprendimos a hacer búsquedas muy selectivas en la base de datos para conseguir unos resultados concretos en la tabla. Además aprendimos que el plugin DataTables implementa métodos que se pueden usar por programación. Si aquel fué el artículo de las búsquedas, este es el de las ordenaciones. Vamos a aprender a ordenar, programáticamente, nuestra tabla de resultados según los criterios que podamos necesitar. Si bien las columnas, por defecto, permiten ordenaciones simples, con muy poca programación podemos obtener ordenaciones mucho más selectivas. Con una tabla con pocos registros esto puede parecer matar moscas a cañonazos. Sin embargo, cuando tu tabla llegue a tener cientos de miles de registros o, incluso, varios millones (y creéme; eso acaba sucediendo), agradecerás enormemente tener la mayor potencia posible en lo que a ordenaciones se refiere.

El plugin DataTables (IX). Preeditando datos.

En este artículo vamos a centrarnos en una operativa que resulta, en muchos casos, imprescindible. Se trata de modificar el script secundario para que, el resultado devuelto, incluya ciertos contenidos que, en principio, no están en la base de datos, pero que se basan en los que sí están. A ver, para entendernos. En un artículo anterior de esta serie aprendimos a modificar, en el script secundario, la fecha de ingreso, ya que, en la base de datos, se encuentra en formato aaaa-mm-dd (ISO 8601), que es el habitual para manejo interno, y debíamos obtenerla en formato dd-mm-aaaa, para que fuera legible para el usuario. En aquel momento ya nos estábamos asomando a un preprocesado de los datos antes de retornarlos al plugin DataTables del script primario. En este artículo vamos a ir un poco más allá, para seguir aprendiendo cosas que podemos hacer con este plugin.