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

Mi CV en formato mapa mental

Hacia mucho tiempo que venia con esta idea de hacer una versión de mi CV (currículum vítae) en formato mapa mental, pero no lo hice antes entre otras cosas porque no me había tomado el tiempo de buscar una aplicación que de forma sencilla me ayudara a realizarlo y porque en realmente no sabia como empezar, ya que los que había visto todos variaban entre sí no solo en estilo sino en contenido, pero esto cambio hace par de días cuando revisando algunas aplicaciones de la Mac Store vi SimpleMind (la versión gratuita) la instale y de inmediato me gusto su sencillez y que lo poco que hace a mi parecer lo hace bien y bueno lo demás fue “un tiro al piso” (quiero decir muy sencillo, imposible de fallar), fue ponerme a jugar con la herramienta y empiezo a fluir la inspiración, ese boceto de como quería que fuera mi CV y bueno he decidido no solo compartirlo con ustedes sino que he hecho una página en mi sección personal (menu “Yo”) únicamente para mostrar  el mapa con la intención de esporádicamente ir actualizandolo.

CV en formato mapa mental

CV en formato mapa mental

Sinceramente me gusto como quedo pero por momentos dude en si agregar o no, par de nodos adicionales, como “objetivos” (sobretodo educacionales, aprender nuevas tecnologías, herramientas, etc..) y “hobbies” o “intereses” (como ya he indicado antes en la página acerca de mí) donde colocaría fútbol, running, estar actualizado en cuanto a la tecnologías, pero finalmente decidí no añadirlos aunque no descarto agregar estos nodos en una actualización mas adelante.

Alguna sugerencia, ¿quitarias o pondrías algún tipo de información adicional?

MI CV en formato mapa mental

BlogStack generando Sinergia

¿Qué es Sinergia? quizas todos sino muchos hemos oido este termino, pero puede que no todos sepamos su significado. Según aparece en Wikipedia “quiere decir literalmente trabajando en conjunto. Es un vocablo acuñado por el diseñador, arquitecto, visionario e inventor Richard Buckminster Fuller, refiriéndose al fenómeno en el cual el efecto de la influencia o trabajo de dos o más agentes actuando en conjunto es mayor al esperado considerando a la suma de las acciones de los agentes por separado“. Esto es justo lo que esta generando el nuevo sitio web BlogStack, el cual es un agregador, o fuente de información de contenido de blogs sobre distintos topicos relacionados con la tecnología, una interesante iniciativa ya que su creador ha puesto a disposición todo su diseño y arquitectura (software libre), que en estos días resulta bastante util ya sea para fines didacticos asi como también para aquellos que quieren emprender un desarrollo de software poder contar con código que sirva como referente.

Pero volviendo con la sinergia, ¿Dónde está? ¿Cómo? ¿Cuándo? La respuesta a estas interrogantes esta en el hecho de que todos los involucrados (Blogueros/Bloggers, lectores y BlogStack) nos beneficiamos de este tipo de iniciativas. Los Blogueros contando con un portal donde poder dar a conocer a mas gente el contenido que generamos aunado a los esfuerzos que hagamos nosotros mismos para la difusión de los mismos (redes sociales, labor de SEO, etc…), lo cual se traduce en mas visitas o visibilidad de nuestras entradas (que puede que hayan sido canalizadas en un principio por el contenido ofrecido por otro Blog dentro de la misma plataforma).  Los lectores teniendo a su disposición un sitio que concentre información de su interés, en este caso focalizado en la tecnología y por el último el propio sitio BlogStack, ya que ofreciéndonos una plataforma para la difusión de nuestros contenidos hace que a medida que se añada un nuevo blog, el sitio Web empezará a ofrecer cada vez mas y mas contenido, lo cual le hará ganar más visitas por ser un sitio dinámico, además de poder beneficiarse de las menciones de otros sitios Web no solo por el simple hecho de darse a conocer en la comunidad sino mejorando su puntuación más rápidamente en los algoritmos de búsqueda de los buscadores (ya sea Google, Bind, etc…).

Así que no me queda  mas que agradecer a su creador por la iniciativa, además de darme la oportunidad de compartir el contenido de mi Blog en esta plataforma e invitarles a todos los Blogueros en que se unan y así seguir generando Sinergia en nuestra comunidad tecnológica.

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?

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.