Ejemplo básico de Pusher + PHP + AJAX

Posted on by Rocanrol

¡Hola! En esta ocasión quiero realizar un ejemplo básico de Pusher usando PHP en el backend y jQuery en el frontend. El ejemplo consiste en crear un sencillo formulario para enviar una notificación o mensaje a otra página.

Vista previa del ejemplo:

¿Cómo integrar Pusher?

Lo primero que necesitamos, obviamente, es una cuenta de Pusher. Se puede crear desde el siguiente enlace: https://pusher.com/signup

Una vez logueados debemos crear una app. Son tres sencillos pasos: asignarle un nombre, elegir desde qué servidor transmitir la información, y seleccionar nuestro stack:

Front-end: jQuery – Back-end: PHP

Y después obtener las claves de la app:

Read More

Solución certificados auto-firmados dando problemas

Posted on by Rocanrol

Después de varias semanas de trabajo intenso puedo aprovechar un rato para explicar que tras integrar nuestro certificado auto-firmado de manera local, las nuevas versiones de Chrome (58+) y Firefox (53+) pueden negar el acceso a las páginas que tengan el certificado sin incluir Subject Alt Name. Estas actualizaciones son para evitar que el ataque Punycode haga efecto.

No importa si el certificado está añadido al navegador, ni si lo tenemos agregado al Keychain (Mac OS X) como System o Root configurado en «Confiar siempre». Es una decisión que toman los navegadores.

Importante:

Estos certificados NO son recomendables para ambientes de producción, están pensados para ambientes de desarrollo. La mayoría de los navegadores no reconocerían que este certificado haya sido emitido por una entidad confiable (como Verisign o GoDaddy), e impedirían el acceso a la página.

 

Problema de Chrome v57 con los certificados sin AltName

 

¿Cómo resolver este problema?

La única solución es rehacer los certificados que tengamos incluyendo una configuración especial para cada dominio. Para esto, debemos localizar nuestro archivo de configuración de OpenSSL, llamado openssl.cnf. Una vez lo tengamos localizado, es posible que esté bloqueado contra escritura, pero no importa, únicamente tenemos que copiar todo el contenido y crear un nuevo archivo llamado, por ejemplo, openssl_tu-dominio.dev.cnf y guardarlo en la carpeta donde vayamos a generar los archivos del certificado.

Read More

Drag & Drop y redimensionado de imágenes

Posted on by Rocanrol

¡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

Posted on by Rocanrol

¡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

Devolver JSON en PHP y obtener datos con AJAX

Posted on by Rocanrol

Devolver JSON en PHP y obtener datos con AJAX

¡Buenas! Nuevamente escribiendo un tutorial a finales de mes.
Mucho trabajo, por suerte.

Esta vez vengo a enseñar algo simple y útil: cómo devolver datos con PHP en formato JSON (objeto) y obtenerlos con jQuery AJAX. Además, veremos cómo enviar inputs HTML sin necesidad de tener un formulario.

Vista previa del ejemplo:

Obtener PHP JSON con jQuery AJAX

Datos enviados, mostrando la respuesta con JSON.stringify()

¿Cómo obtener JSON con AJAX?

En esta ocasión desarrollo en local con XAMPP 5.5.35-0 en Mac OS X.

1 de 2: HTML y JS

Lo primero es crear un documento que contenga 3 inputs. Lo más importante es asignarles un ID (único, por supuesto) para después obtener los valores con jQuery y enviarlos como un objeto a PHP. Antes del cierre de la etiqueta body debemos incluir la librería de jQuery. En este caso, yo uso la versión 2.1.0 minificada.

Añado un div con la clase respuesta para después mostrar el resultado.

Read More

Backup de Dropbox con Automator en Mac OS X

Posted on by Rocanrol

¡Hola! Hace aproximadamente un mes se me quemó la motherboard de la notebook donde, entre otras cosas, creaba estos tutoriales. Precisamente por ese motivo no pude realizar un tutorial el mes pasado, y apenas publico este a fin de mes. Quiero agradecer a mi jefe por permitirme el uso de una computadora con Macintosh para realizar este tutorial.

¿Qué traigo esta vez? Hoy traigo una manera de resolver una particularidad del nuevo trabajo donde estoy ahora, y es que en una Macbook estoy como desarrollador y, usando XAMPP como servidor local, necesito hacer backups diarios. Si conoces un poco acerca de este programa, sabrás que todos los documentos se guardan en una carpeta llamada htdocs. Bien, para que otros miembros del equipo de trabajo puedan ver ciertos cambios lo ideal es tener todo actualizado en Dropbox.

Como instalar XAMPP en Dropbox no me pareció muy inteligente (sobre todo por el tamaño máximo de la cuenta), empecé a toquetear Automator. Acá les muestro lo que aprendí.

Comencemos.

Notas iniciales:

En esta ocasión estoy usando OS X El Capitán el cual está en inglés, así que algunas traducciones podrían no ser exactas.

¿Cómo automatizar backups en Macintosh?

Obviamente lo primero que necesitamos es abrir la app de Automator, la cual suele estar en la carpeta Aplicaciones.

Al abrirse nos preguntará qué tipo de documento queremos comenzar. Para que todo sea automático, crearemos un evento en el calendario, aunque podría ser una App sin problemas.

Read More

Convertir fechas de PHP a castellano

Posted on by Rocanrol

¡Muy buenas! Escribo esta entrada el último día de este mes. Estuve bastante ocupado trabajando en un par de proyectos, y recién hoy tengo un día completamente libre.

En esta ocasión traigo un tutorial bastante sencillo, donde voy a enseñar como pasar de una fecha hecha con la función date() a un texto en castellano, conteniendo el nombre del día, el número del mismo, el mes y el año.

Para esto se usa este tipo de fechas:

30-04-2016 04:20:00

Que se crean así:

//Se define el timezone que sea necesario
date_default_timezone_set('America/Argentina/Buenos_Aires');

//Dia-Mes-Año Hora:Minutos:Segundos
$fecha = date('d-m-Y H:i:s');

Y obtendremos como resultado:

Sábado 30 de Abril de 2016

Es importante que los separadores de la fecha sean un guión y no una barra (-, no /). Los guiones definen el sistema de formato europeo, mientras que las barras definen que el formato es «americano» (estadounidense).

¿Cómo pasar la fecha a castellano?

Read More

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

Posted on by Rocanrol

¡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

Certificado SSL+TLS auto-firmado para XAMPP en Windows

Posted on by Rocanrol

ACTUALIZACIÓN DE ABRIL DE 2017: Solución certificados auto-firmados dando problemas

¡Hola nuevamente! Realizo el segundo tutorial de este mes por la necesidad de explicar cómo generar certificados SSL auto-firmados (self signed SSL certificate) para XAMPP. El proceso será muy detallado, explicando todos los comandos que realizaremos.

Lo cierto es que en los últimos días estuve leyendo un par de tutoriales que no explicaban totalmente porqué se realizaban esos pasos, o cometían fallos respecto al almacenamiento de los certificados y las claves. Por eso, hoy traigo este tutorial, donde enseñaré a crear un certificado SSL para localhost y otro para un virtualhost en Windows utilizando OpenSSL 1.0.2.

Notas iniciales:

Este tutorial se realizó en Windows 7 (64 bits) recién instalado en una máquina virtual (VirtualBox) (esto no hace que varíe nada, es solo un detalle), utilizando un XAMPP (Apache 2.4.18) recién instalado con la versión 3.2.2 (compilado: 12 Noviembre 2015). Para seguir este tutorial es necesaria una cuenta de administrador.

Importante:

Estos certificados NO son recomendables para ambientes de producción, están pensados para ambientes de desarrollo. La mayoría de los navegadores no reconocerían que este certificado haya sido emitido por una entidad confiable (como Verisign o GoDaddy), e impedirían el acceso a la página.

¿Cómo generar un certificado para localhost?

El primer paso es generar una carpeta donde guardaremos nuestros certificados. Esta carpeta debemos crearla en la carpeta conf que está dentro de apache. La ruta, siempre teniendo en cuenta que se haya instalado XAMPP en la ubicación por defecto, sería:

C:\xampp\apache\conf

A esa carpeta yo la llamaré mis_certificados, pero puedes nombrarla como desees.

Dentro de mis_certificados, crearé una carpeta para el certificado de localhost. A esta carpeta la llamaré localhost, aunque puede llamarse de cualquier manera, pero esto lo deja más organizado.

Read More