Como migrar tu base de datos de WordPress desde tu servidor local a producción

Generalmente si eres un buen desarrollador, tendrás tu entorno de desarrollo (servidor web, base de datos, etc) instalado en tu máquina local. De esta manera, puedes trabajar rápidamente al evitar solicitudes al servidor web remoto cada vez que realices modificaciones en un archivo o necesites visualizar cambios (por nombrar ejemplos), además, no requieres conexión a Internet, por lo que si ocurre una falla con el servicio o estas usando el ancho de banda para descargar cosas, no afectará tu flujo de trabajo.

En el caso de WordPress, existen dos opciones de configuración: home y siteurl que indican las URLs de la página inicial y sitio respectivamente. Por ello al realizar una instalación y configuración local, éstas variables tienen valores que apunta a localhost. Entonces, al momento de migrar la base de datos al servidor de producción, muchos enlaces quedan bajo el dominio localhost y no al dominio del sitio. Cambiar estos valores no ayuda mucho, pues si tienen imágenes, vídeos y archivos enlazados a contenidos creados dentro del editor, verán que no son accesibles porque siguen apuntando a localhost.

Para cambiarlo, se puede hacer con WP-CLI que es una útil herramienta de interfaz de comandos para WordPress, donde puedes administrar el sitio, datos, respaldos, entre otras cosas, sin salir de la consola. Pues para renombrar los URL de localhost a tu dominio, simplemente debes ejecutar los siguientes dos comandos.

Instalas wp-cli en tu sitio wordpress de producción usando curl:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Luego ejecutas el comando search-replace cuyo primer parametro es la dirección actual (la local) y el segundo la dirección final del sitio:

wp search-replace 'http://localhost/sitio-de-desarollo' 'http://sitio-de-produccion.com/'

En caso que no te sirva el comando anterior porque no tienes configurado para la ejecución de archivos PHP automáticamente desde la consola ejecuta:

php wp-cli.phar search-replace 'http://localhost/sitio-de-desarollo' 'http://sitio-de-produccion.com/'

¡Listo! El comando se encargará de buscar en la base de datos cualquier referencia y la actualiza.

P.D: Si siempre trabajas en el servidor de producción o en un servidor remoto, estas perdiendo tiempo, ancho de banda, recursos y sobre todo dinero. ¡Aprende a optimizar!

Hace 9 años en esa fecha: Software como servicio pago

Aumenta la seguridad de tu sesión en WordPress

Una de las principales preocupaciones de los usuarios de WordPress es el acceso al panel de administración, pues por defecto se encuentra en la ruta /wp-admin y está compuesto de un simple formulario que puede ser atacado por fuerza bruta. Por eso les voy a recomendar dos complementos para aumentar la seguridad de inicio de sesión de WordPress, al implementar autenticación de dos factores (Two Factor Authentication) y cambiar la ruta por defecto del formulario de inicio de sesión:

  • Rename WP Login: es un plugin muy liviano y sencillo, simplemente te permite definir una url personalizada para el formulario de inicio de sesión en la pantalla de enlaces permanentes, como por ejemplo http://tusitio.org/entrar-al-admin/. Aunque en el título dice que el plugin no tiene soporte, el autor se refiere a que no posee tiempo para resolver cualquier duda que se presente en los foros , sin embargo, acepta parches de código, nuevas funcionalidades, correcciones de bugs, entre otros. Por lo que puedes instalarlo sin preocuparte de que esté obsoleto.
  • Clef: un plugin recomendado por Manuel Camacho, consiste en una autenticación de 2 factores, es decir, aparte de brindar una información que solo tú conoces, debes dar información generada de un objeto que tienes contigo (el móvil o una tarjeta por ejemplo). En este caso, una vez que instalas el plugin la pantalla de inicio de sesión cambia a una especie de QR dinámico, el cual debes escanear con tu teléfono móvil a través de la aplicación Clef, una vez que reconoce el patrón único automáticamente inicia sesión en el sitio, lo chévere es que desde el teléfono controlas el tiempo de sesión e inclusive cerrarla remotamente. También se configurar para usar el inicio tradicional como respaldo en caso de que no tengas el teléfono contigo.

 

Clef en el blog

Ejemplo de como funciona Clef

Con estos 2 sencillos plugines que puedes instalar y configurar en poco tiempo, podrás aumentar la seguridad en tu sitio con WordPress, o mejor aún, el de tus clientes. Finalmente, si conocen alguna alternativa o desean compartir información adicional, no duden en dejar un comentario para mejorar la seguridad de nuestros sitios.

Hace 7 años en esa fecha: Record Mundial de Guitar Hero 3

Code Monkey escrito en Delphi

Si eres programador, probablemente has escuchado la canción Code Monkey, que trata sobre un día de un programador cuyo jefe solo le obliga a escribir código. Pues en el siguiente video, verás la letra de la canción escrita en el lenguaje Delphi al mismo ritmo de la canción y lo mejor de todo es que el código compila, así que disfruta de un rato geek:

Hace 6 años en esa fecha: Archlinux 2009.02 ha sido lanzado

Liberado jQuery Archive List 3.0

Luego de mas de un año sin poder dedicarme a este proyecto personal, he podido liberar la versión 3.0 de jQuery Archive List un widget de WordPress para mostrar el historial de sitio de una mejor manera y con efectos de jQuery. El salto a la versión 3, es debido a grandes cambios en el código de Javascript y en algunas cosas internas de plugin.

Entre las mejoras de esta nueva versión podrán encontrar:

  • Re-escritura completa del código Javascript, ahora ocupa menos espacio, código mas entendible y debería funcionar mas rápido.
  • Finalmente he agregado soporte para tipos de entradas personalizadas, así que puedes usar este widget si tienes tipos de contenido personalizados.
  • Agregué la clase active a los elementos que enlazan a la página actual.
  • Agregué el atributo de título a los enlaces para generar código HTML validado por la W3C.
  • Se agregó traducción al Holadés (gracias a Patrick Schreibing).
  • Se migró la selección de categorías al API de WordPress.
  • Se solucionó errores de exclusión de categorías.
  • Se solucionó el error de la ausencia de la clase expanded  en los meses (gracias to pjarts).
  • Se solucionó el error de no expandirse los meses al seleccionar algunas opciones.

Descárgalo desde el gestor de Plugins de WordPress o desde el sitio oficial de jQuery Archive List Widget. Y cualquier reporte o duda, no te olvides de reportarla en los foros de soporte de WordPress.

Optimiza el HTML, CSS, JS e imágenes de tu sitio web con Gulp

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:

npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:

npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:

var uglify = require('gulp-uglify');
gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:

gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, minify-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

Hace 3 años en esa fecha: Google Chrome para Android