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.

JavaScript 2015 (y X). Promesas.

Javascript 2015 cuenta con una nueva clase llamada Promise. Es un bonito nombre, que suena interesante, y que, como vamos a ver en seguida, aporta una funcionalidad interesante. Con esto terminamos esta serie sobre las novedades de JavaScript en su versión de 2015. Como hemos visto, salvo algunos deshonrosos ejemplos, la mayoría son útiles y nos aportan facilidades que se echaban de menos. Esperemos que, en sucesivas revisiones, subsanen las carencias o defectos que nosotros, los miembros de la comunidad de desarrolladores, aún hemos encontrado. Al menos, estas promesas sí se cumplen. No como las de algunos jefes, o las de aquella vecina que nos usaba de pagafantas en el instituto. 😆 

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

Ajax con jQuery (I)

Este artículo no pretende enseñarte lo que es Ajax ni, por supuesto, lo que es jQuery. Si estás leyendo esto, doy por sentado que conoces, aunque sea por encima, estas tecnologías. Este artículo pretende ser un recopilatorio – recordatorio de sintaxis, para poder usar Ajax con jQuery. El popular framework de JavaScript nos ofrece varias maneras básicas de trabajar con Ajax, y aquí vamos a conocerlas todas. Verás cómo es muy fácil y rápido combinar estas dos tecnologías para obtener un resultado inmejorable. En este artículo y los siguientes aprenderemos todo lo que necesitamos saber sobre el uso de la tecnología ajax en jQuery.

Ajax con jQuery (II)

En el artículo anterior vimos el uso del método load() de jQuery para comunicaciones por ajax. Este método es muy flexible, ya que, a pesar de lo simple de su uso, nos permite elegir, entre otras cosas, si el envío de parámetros va a hacerse por POST o por GET. En este artículo vamos a conocer dos herramientas de jQuery más especializadas, siendo cada una de ellas para cada uno de los métodos de envío: $.post() y $.get(). Estos métodos funcionan de un modo inherentemente síncrono, con respecto a los datos que gestionan, pero asíncrono con respecto al resto del script. No te asustes: en seguida entenderás este concepto.

Ajax con jQuery (y III)

En este artículo vamos a introducir el método más potente y flexible que jQuery nos ofrece (al menos hasta hoy) para trabajar con Ajax. Se llama, como no podía ser de otro modo, $.ajax() y veremos que posee un gran número de posibilidades de configuración que lo hacen apto para cubrir cualquier necesidad que podamos tener en este sentido.

Enviar formularios con ficheros por Ajax

Enviar el contenido de campos de un formulario al servidor (todos los campos o algunos de ellos) es una operación conceptualmente muy simple. Hasta hace muy pocos años, la forma de hacerlo era directamente desde HTML, con o sin validación previa por JavaScript. El formulario se enviaba al servidor, la página que recibia los datos los procesaba y se cargaba en el navegador, mostrando el resultado de la recepción y o el procesado. Si queríamos que no hubiera un cambio de página, se recurría al viejo truco de crear un iframe de ancho y alto 0 en la página dónde estaba el formulario, y se ponía el nombre de dicho iframe como atributo target, de modo que el script encargado de procesar los datos se cargaba en el iframe.