Añadiendo Plugin WordPress de Polly

Como algunos de ustedes ya saben soy un seguidor de AWS e intento seguir el lanzamiento de nuevos servicios o las mejoras que hacen de sus servicios. De hecho este blog está hospedado por lightsail, el dominio esta gestionado por route53 y no descarto en el futuro añadir su CDN (cloudfront), es decir, no diré que soy un evangelizador (o quizás uno de los buenos) pero si un admirador de toda esta infraestructura.

En la entrada de hoy lo que quiero compartir con ustedes es un nuevo plugin de wordpress de un servicio de AWS llamado Polly, el anuncio ocurrió hace solo par de semanas y aquí les dejo el enlace. Polly para quien no lo sabe es un servicio que convierte texto en habla, y el habla lo realiza en distintos idiomas. La primera vez que supe de este servicio fue al estudiar para la certificación AWS Solution Arquitect ya que el curso de acloud.guru contaba con un episodio para estudiar haciendo uso de Alexa y Polly creando un conjunto de preguntas y respuestas.

No quiero alargarme mucho pero quiero compartirles el porqué me interesó hacer este post y el añadir el plugin a este blog. Al inicio de mi carrera profesional por allá por 2005 tuve la oportunidad de trabajar en un plan de capacitación de IBM donde la audiencia (el alumnado) era diversa, no solo en cuanto a conocimientos en informática, sino también en cuanto a instrucción, pero más importante aun es que este proyecto incluía personas de toda indole incluso con dispacidades y perdonen si sueno burdo, tonto o lo que sea pero quiero expresarles con toda sinceridad que esa experiencia para mí fue importante ya que conocí personas con discapacidades visuales tremendas, pero eso no fue impedimento para que aprendieran a programar en C, C++, Java, que aprendieran SQL, UML, entre otras tantas tecnologías y para mi fue una cachetada de realidad porque conocí gente con mucho potencial y con una dificultad añadida en su vida diaria pero que no les impidió alcanzar sus objetivos. Este plugin desde mi humilde punto de vista acerca un poco más la difusión de opiniones, tecnologías, información a personas que a veces lo tienen mas complicado, pero no quiero limitarme a eso ya que supongo que existen otras tecnologías que acercan la Web a usuarios con discapacidades, sino a que me imagino un futuro cercano donde podemos ir conduciendo el coche camino al trabajo y decir “Siri léeme mis feeds” (o sea, todas los blogs o noticias que sigo), o ni siquiera tenemos que estar al volante a lo mejor solo caminando haciendo ejercicio y decir “Alexa léeme el post XYZ” y esto por sencillo que parezca me emociona.

Con respecto al plugin de Polly para wordpress  en pocas palabras lo que hace es que una vez instalado (y configurado) al crear una entrada nueva al blog, este crea una nueva entrada en el servicio de AWS Polly y automáticamente añade al post un componente Web para la reproducción del contenido como un audio, audio que es todo el texto del post.

La instalación es muy sencilla solo basta con ir a Plugins->Añadir nuevo y allí escribir Polly y aparecerá el plugin

Amazon Polly for WordPress

Amazon Polly for WordPress

Es requisito indispensable para activarlo contar con php 5.6 como podrán ver el la página del plugin. La configuración es muy sencilla si estamos utilizando instancias EC2 solo basta con asignar un rol a la instancia con los permisos necesarios para escribir y leer de AWS Polly y en caso contrario pues una opción sería la creación de un usuario IAM al cual le otorguemos permisos necesarios para escribir y leer de AWS Polly (únicamente) utilizaríamos entonces para la configuración el access key y secret key de dicho usuario. Hecho esto ya solo queda configurar el idioma y la voz y ya estaríamos listos para utilizarlo.

Polly for wordpress setup

Polly for wordpress setup

Importante sobre el costo, los primeros 12 meses a partir de la primera solicitud de habla, entran dentro de la capa gratuita de 5 millones de caracteres al mes, ya luego pasa a 4$ por 1 millón de caracteres de solicitud. Aquí les dejo el enlace con mas detalle sobre la facturación -> https://aws.amazon.com/es/polly/pricing/

Por último invitarles a probar todos estos nuevos productos y servicios de AWS y de antemano pedir disculpas si no me he dirigido correctamente y si he dicho o expresado algo de la manera incorrecta, por favor no dudar en corregirme que tan pronto como pueda editaría esta entrada.

Migrar Blog WordPress a AWS Lightsail Pt. I

Como algunos de ustedes ya saben he migrado este blog desde una plataforma tradicional a la nube de Amazon, específicamente a un servicio llamado Lightsail y es lo que vengo a contarles.

¿Qué es Lightsail?

Es un servicio de AWS que nos permite crear un VPS (Virtual Private Server) con solo unos pocos clics, haciendo un poco más fácil la gestión y hospedaje de un sitio Web y a bajo coste ya que a partir de 5$/mes podemos tener hospedado un sitio.

Lightsail es un servicio que hace más amigable la administración de un sitio pero aún permitiéndonos acceder a la instancia via ssh. Con Lightsail podemos crear una instancia no solo para hospedar un sitio con WordPress, sino también con Magento, Joomla, Drupal o una instancia con un stack LAMP, MEAN, Node.js y otros más. Solo basta clicar el botón “crear instancia” y a continuación:

  • Seleccionar la región y zona donde estará ubicada la instancia.
Ubicación de la instancia

Ubicación de la instancia

  • Seleccionar la plataforma (Linux/Unix o Windows).
  • Seleccionar únicamente el sistema sistema operativo o el sistema operativo junto a las aplicaciones a instalar.
Seleccionar un plan

Seleccionar un plan

  • Seleccionar el plan de la instancia: 5$, 10$, 20$, 40$ u 80$.
Seleccionar el plan de almacenamiento de la instancia

Seleccionar el plan de almacenamiento de la instancia

  • Darle un nombre a la instancia.
Crear instancia

Crear instancia

  • Pulsar el botón crear.

Antes de seguir debo hacer mención a par de articulos que utilicé como referencia mientras llevaba a cabo la migración:

https://www.elpuas.com/como-instalar-wordpress-en-amazon-lightsail/

http://www.adrianmilne.com/migrating-wordpress-blog-amazon-aws-lightsail/

Una vez creada la instancia esta tendrá todo el entorno de WordPress montado incluso con su usuario administrador y podremos visitar el site sencillamente viendo el detalle de la instancia recién creada específicamente su IP pública.

Luego así como lo indica el blog de Adrian Milne me descargué la clave privada para acceder desde mi ordenador por ssh (no fuera tan importante para la administración del sitio sino fuese porque via ssh es que podremos obtener la contraseña de administración de WordPress). Luego utilicé el plugin de WordPress UpdraftPlus y lo instalé en el WordPress recién creado y en el que deseaba migrar y realicé un primer backup y ese mismo lo utilicé para llevar a cabo la restauración en la instancia recién creada.

Una vez comprobada que la restauración se había llevado a cabo, ya me faltaba solo un paso, probar llegando desde una URL y no usando la IP pública, para esto utilicé un dominio que me había comprado hacía cerca de un año mientras me preparaba para la certificación de solution architect de amazon estudiando el servicio Route 53.

Lightsail dentro de sus funciones también incluye alguna de Route 53 como es la gestión de DNS, lo que en Route 53 sería la gestión de zonas hospedadas, en Lightsail sería crear zona DNS, entonces continuando con la migración los siguientes pasos fueron:

  • En la página de inicio de Lightsail, ir a redes y luego clicar el botón “Crear una IP estática”. Aquí se asociará la instancia a una IP estática pública.
  • En el mismo apartado de redes, clicar el botón “Crear zona DNS”. Allí indicaremos nuestro dominio (sin importar que este no haya sido registrado en Route 53) y pulsaremos el botón “Crear zona DNS” como aparece en la imagen.
crear zona DNS

crear zona DNS

  • Añadimos los registros de DNS como aparece en la imagen pero usando vuestro dominio y para cada subdominio en el campo “IP DE DESTINO” seleccionamos nuestra instancia (que de antemano ya la asociamos a una dirección IP estática).
crear zona DNS

crear zona DNS

  • Finalmente deberemos esperar unos pocos minutos y ya podremos visitar nuestro sitio usando el dominio.

Esto es todo chicos, en la próxima entrega les indicaré como migrar un dominio registrado con otro registrador, que fue un paso adicional que realicé ya que mi dominio josedeveloper.com lo había registrado con godaddy.com

Mejorando mi blog WordPress, Parte II

Revisando un articulo sobre como mejorar la velocidad de un blog WordPress encontré un enlace donde listaban un conjunto de herramientas online gratuitas que realizan una serie de pruebas (tests) y de acuerdo a los resultados emiten unos informes y dan en algunos casos sugerencias a mejorar. He realizado pruebas con 3 de ellas con el plugin W3 Total Cache inhabilitado y luego de nuevo con el plugin habilitado para poder observar si hay mejoras en cuanto a rendimiento. A continuación los resultados de los tests con el plugin inhabilitado:

Pingdom

pingdom_antes

 

 

 

Google Page Insights

page_movil_antes page_desktop_antes

Gtmetrix

gtmetrix_antes

 

 

 

 

 

Ahora voy con los resultados una vez habilitado el plugin W3 Total Cache

pingdom_despues

 

 

 

page_desktop_despues page_movil_despues

 

gtmetrix_despues

 

Conclusión

Esta verificado que el plugin me proporciona mejoras en cuanto a rendimiento, ya que de hecho en mayor o menos medida las 3 diferentes herramientas así lo han corroborado, lo cual es positivo, aunque hay algo que les confieso me ha dejado aun un poco inconforme y ha sido el resultado arrojado por la aplicación de google, ya que incluso cuando he habilitado la minimización del Javascript, de las CSS y del HTML además de la compresión en los ajustes del plugin de WordPress, el test de velocidad de google me sugiere llevar a cabo lo antes citado (minimización de los js, css y html). Supongo que quizás es alguna afinación en los ajustes que me falta por hacer y de hecho espero que así sea. De todas formas si logro hallar la manera de solventar ese inconveniente lo compartiré con ustedes como una actualización de esta entrada, por otro lado si ustedes conocen la respuesta POR FAVOR HAZMELA LLEGAR!, pero independientemente de eso lo importante es que he podido (y espero que ustedes también) llevar a cabo una mejora en cuanto al rendimiento del blog.

Actualización

He descubierto, que las sugerencias que me planteaba la herramienta Google PageSpeed Insights, que consistían en minimizar el JS (JavaScript), HTML y CSS de la página tanto para la versión de escritorio (que alcanzaba una valoración de 80/100), como para la versión para móviles (con una nota de 74/100), se deben a lo siguiente:

En la versión de escritorio se debe casi en su totalidad a código proveniente de los anuncios de amazon que aparecen en mi página, mientras que en la versión de móviles se debe al JavaScript utilizado para mostrar el mensaje de las cookies al cargar la página y al plugin WPtouch Mobile, el cual es el encargado de mostrar una versión algo minimalista de la página para dispositivos móviles, pero que a su vez me permite conseguir una nota de 99/100 en experiencia de usuario en móviles (razón que me hace compensar el por ahora no tener un mejor rendimiento), lo cual ahora que conozco la razón no me preocupa, ya que no me extrañaría que pronto salga una actualización en alguno de los plugins involucrados (WPtouch Mobile y W3 Total Cache) que permita mejorar la compresión del Javascript y CSS de la página.

Mejorando mi blog WordPress

Hace aproximadamente un mes, inicie esta mejora del blog, motivado en un principio por la ley de cookies española, como les conte en mi última entrada, aunque el paso definitivo que me empujo a llevar a cabo estas mejoras fue el darme cuenta que todas las entradas que incluían segmentos de código se veian mal, sin estilo, en fin,  sencillamente horribles, puedo decirles que me avergüenza ya que ni siquiera tengo una idea de cuanto tiempo llevaban las entradas en dicho estado. Profundizando un poco mas en el asunto creo que tendría alrededor de 2 años o mas sin buscar algún plugin novedoso o revisar algún tema nuevo, pero al menos me contenta decirles que estoy satisfecho con el tiempo dedicado, el resultado obtenido y compartirlo con ustedes.

Antes de empezar y para no alargarme mucho quiero aclarar que no soy un experto ni mucho menos, pero pienso que puede haber personas que al igual que yo no sabrían por donde empezar a la hora de buscar que plugins agregar a su blog WordPress, ni siquiera con que objetivo empezar a buscar e igualmente siempre da un poco de confianza tener una referencia de un plugin antes de descargarlo aunque este tenga 4 estrellas de rating.

Les detallo a continuación que plugins instale:

Plugin para adecuar el blog a la ley de cookies española.

akismetPara evitar el spam en los comentarios, instale Akismet, el cual es un servicio que en el caso de ser utilizado para una web personal es gratis aunque siempre te agradecerán cualquier donación que puedas aportarles, entre otras cosas además de quitarte el dolor de cabeza de los spam te aporta estadísticas al respecto. No dejes de instalarla no te arrepentiras te lo aseguro. Para mejorar aun más la gestión de los comentarios de mis entradas active el plugin SI CAPTCHA Anti-Spam el cual añade un captcha que el usuario ha de ingresar correctamente para poder añadir un comentario.

Con respecto al resaltado de código y su visualización, instale el plugin Crayon Sintax Highlighter, lo cual me sorprendió muy gratamente ya que al activarlo una vez desactivado  el resaltador de sintaxis que tenia previamente, ya se visualizaba el código con un look & feel fantástico, ya que el plugin le aplica un estilo a todo lo contenido dentro de etiquetas <pre></pre>, el único trabajo que tuve que realizar adicionalmente para añadir atributos a la etiqueta como por ejemplo

<pre class=”lang:java”> indicando que el código a mostrar es Java

crayon

Sin lugar ha dudas este plugin ha de estar en este momento en el top 3 de resaltadores de sintaxis, además de la gran cantidad de lenguajes que soporta entre los que puedo nombrarles, C/C++, Java, HTML/XML, CSS …

Para mejorar las funciones de SEO, añadí Google Analytics for WordPress, el cual esta considerado ahora mismo el número 1 en la materia.

yoast seo

Mucho cuidado con tener otro plugin de características similares instalado y activado, ya que puede interferir y dar error al intentar visitar el sitemap.xml de la página.

Para dar características de Social Media, instale Juiz Social Post Sharer, el cual permite compartir en las principales redes sociales y posee un estilo sobrio y sencillo como pueden ver a continuación en la siguiente imagen.

social media

Para aportar esta característica al blog existen muchas otras opciones, yo también estuve probando Social Media Feather, el cual esta muy bien ya que cubre las principales redes sociales y a su vez da la opción de seguir además de la de compartir, aunque yo me decante por la primera por razones de estilo.

Además de las antes mencionadas, añadí el plugin que hasta el momento estaba siendo considerado como el plugin mas popular, el Contact Form 7, este permite de una forma muy sencilla crear formularios de contacto, los cuales recibiríamos por correo electrónico, este es un plugin simple pero que hace muy bien su trabajo.

Era necesario que también llevara a cabo mejoras en cuanto a rendimiento y carga de paginas, sobretodo en estos tiempos donde la navegación a través de dispositivos móviles representa un factor importante y para eso instale W3 Total Cache, el cual además de crear una cache, mejora de forma considerable la velocidad de carga haciendo una compresión de las CSS y el código javascript del blog.

Para finalizar yo siempre me pregunte como hacían los editores de blog related postpara en todos sus entradas hubieran referencias a otras entradas relacionadas entre si (dios que iluso fui), y para ello existen varios plugin aunque yo me decante por Yet Another Related Posts Plugin, que funciona de maravilla, con solo instalarlo ya me doto de esta característica a la mayoría de las entradas de mi blog.

Para aquellos que al igual que yo esten un poco desconectados en las novedades los plugins WordPress espero que esta entrada les haya sido de utilidad y para los que ya estén mas actualizados ¿Han hecho alguna mejora a su blog? ¿Que otro plugin podrían sugerirnos para tener nuestro blog actualizado a las nuevas tendencias?

Plugins WordPress para la ley de cookies española

Transcurría el mes de agosto del año pasado cuando por un tuit me entere de que existía una “ley de cookies”, el tuit hacia referencia a una publicación donde indicaban que ya existía una demanda en contra de una empresa “grande” en España y todo porque alguien (entiendo que un astuto) había introducido la demanda ya que el sitio Web de la empresa no indicaba que introducía cookies en las computadoras de los usuarios que visitaban dicho sitio. Recuerdo también que dicho articulo comentaba que el ente jurídico español no multaría (según sus fuentes) con una cifra escandalosa a la empresa para la compensación del o los usuarios pero si estaban tomando ese caso para elaborar una especie de borrador para que a su vez bloggers y empresas tuviesen una referencia al momento de adaptar sus sitios Web así como también ellos tener una referencia a la cual apegarse a la hora de determinar si un sitio cumplía con la ley o no.

Esta ley de cookies fue aprobada en el año 2012, pero ciertamente creo que éramos pocos los que sabíamos o habíamos empezado a acatar dicha legislación que si no me equivoco es a nivel europeo. Yo particularmente no estoy muy de acuerdo que se diga con dicha ley, de hecho considero que antes de multar empresas y personas e invertir dinero en toda una legislación que vigile su cumplimiento, etc.., preferiría que tales recursos se dedicaran a la educación del internauta para que conozca acerca de las cookies, o sea, me parece bien que se informe al usuario pero no con el hecho de ser tan riguroso hasta llegar al punto de multar (y mas en estos tiempos que corren) a la persona (jurídica y natural) dueña del sitio Web que no informe acerca de las cookies que guarda la página Web en los navegadores de los internautas.

Ha sido hasta este momento que por fin me he dignado a adaptar el sitio y buscar al respecto, y bueno comparto brevemente con ustedes lo que encontré que me ha resuelto el problema. Hay realmente varios pulgins en el sitio Web de WordPress.org pero los dos que les listare a continuación fueron los que mas me gustaron:

  • Ley cookie: Esta muy bien y es sencillo, pero aun esta en etapa de desarrollo, pero lo bueno es la disposición que tiene su creador en mejorarlo con ayuda de la comunidad.
  • Asesor de cookies para normativa española: Muy sencillo y sinceramente (hasta donde llega mi conocimiento en la materia) cumple con lo necesario y realmente hace todo y en menos de 5 min tuve el sitio ya adaptado para el cumplimiento de la ley de cookies. En un principio he dejado todo lo generado por defecto para a su vez hacer algo de justicia a su desarrollador y referencia al plugin entre otras cosas.

Ahora cuéntanos ¿ya tienes tu sitio Web de empresa o blog preparado para el cumplimiento de la ley de cookies?

Algo de información valiosa al respecto

http://www.davidrabaez.com/ley-de-cookies-5-puntos-a-tener-en-cuenta/

Cambiar estilos en tu tema de blog wordpress

Tienes problemas con los estilos de tu blog wordpress y deseas cambiarlos, si es ese el caso, no te preocupes a continuación te mostrare una solución sencilla.

Primero que nada, no cambies directamente los estilos en el tema de tu blog, ya que si posteriormente actualizas la versión del tema, puede que pierdas los cambios realizados. La solución esta en crear un tema hijo (child theme) a partir de un tema de tu preferencia que hayas seleccionado para tu blog.

Para crear un tema hijo, debes seguir los siguientes pasos:
– Dentro de tu carpeta wp-content/themes, crea una carpeta con el nombre que pensaras darle a tu nuevo tema.
– Dentro de la carpeta de tu nuevo tema, crea un fichero style.css. Lo minimo necesario que ha de tener este fichero es lo siguiente

IMPORTANTE: Los campos “Theme Name” y “Template”, no los dejes vacíos. A continuación una breve explicación de los campos

  • Theme Name:  se utiliza para especificar el nombre del nuevo tema (hijo) que estas creando.
  • Theme URI: Sitio web del tema.
  • Description: Descripción del nuevo tema (hijo) a crear.
  • Author: Autor del nuevo tema.
  • Author URI: Sitio web del autor del tema
  • Template: Tema padre desde el cual estamos heredando estilos.
  • Version: Versión del tema a crear.

Por ultimo se puede notar la sentencia “@import url(“../twentyeleven/style.css”);”, aquí lo que se hace es importar el fichero de estilos del tema padre.

Cualquier estilo que deseas modificar o añadir, sencillamente agregalo al fichero style.css del nuevo tema a crear (ver ejemplo mas abajo).

Por ultimo indicarles que el funcionamiento será de la siguiente manera, para todos los estilos encontrados, se seleccionarán los estilos especificados en el nuevo fichero style.css del nuevo tema (hijo) creado, en caso de no encontrarlo, hará uso del estilo presente en el fichero style.css del tema padre. En caso de necesitar una personalización más profunda del nuevo tema, se puede crear el fichero functions.php en el nuevo tema y también se podrán añadir ficheros php y su funcionamiento será semejante al de los estilos, en caso de invocar un fichero .php tendrán prioridad los presentes en el tema hijo, en caso de no existir se utilizará el fichero presente en el tema padre.

Finalmente aquí les dejo el fichero (completo) style.css de mi nuevo tema.