Drag & Drop y redimensionado de imágenes

¡Buenas! En este primer tutorial de 2017, después de más de 2 años con el blog activo, quisiera enseñar cómo crear un drag & drop con HTML, PHP y Javascript.

El tutorial también enseñará a redimensionar y comprimir imágenes cuando estén siendo subidas, creando así miniaturas (thumbnails).

Vista previa del ejemplo:

¿Cómo crear un drag & drop?

Este desarrollo se hizo en local usando XAMPP. El único servicio activo es Apache (no requiero MySQL para este ejemplo).

Read More

Localizar direcciones usando Geocoder de Google Maps

¡Hola, felices fiestas! Uff, prácticamente 4 meses sin postear nada. Pero, hey, siempre estoy atento a los comentarios 😛

En esta ocasión quisiera compartir conocimientos de algo con lo que estuve trabajando recientemente: el servicio Geocoder de Google Maps Javascript API (v3). Este servicio (la geocodificación) consiste en convertir direcciones “humanas” a coordenadas geográficas (latitud y longitud) para poder mostrar un marcador en el mapa.

Vista previa del ejemplo:

Geocoder Google Maps Javascript API

Por fin un tutorial con estilos

Notas iniciales:

Para este tutorial necesitaremos una cuenta de Google.

¿Cómo usar Google Maps Geocoder?

Este desarrollo se hizo en local usando XAMPP. El único servicio activo es Apache (no requiero MySQL para este ejemplo).
Read More

Lista arrastrable con jQuery, jQuery UI, AJAX, PHP y MySQL

¡Hola! En esta ocasión voy a mostrar como crea una lista que pueda ser ordenada siendo arrastrada. Esto se realiza gracias a la función Sortable de jQuery UI. El orden será enviado a través de la función AJAX de jQuery, procesado a través de PHP y almacenado en MySQL.

El resultado es este:

Notas iniciales:

Para este ejemplo estoy usando una versión custom de jQuery UI (v1.11.4) que únicamente incluye UI Core e Interactions (ver en la web oficial), pero se puede usar la versión completa sin problema. La versión de jQuery es la 2.1.1 minificada.

¿Cómo crear una lista arrastrable?

Read More