Categoría: CMS

Cómo saber si tus emails llegan a la bandeja de SPAM y solucionarlo
Cuando envías un email no sabes si al destinatario le va a llegar a su bandeja de SPAM o no. Además de pasarle desapercibido tu mensaje esto repercute en tu imagen de marca.
El hecho de utilizar un proveedor como Mailchimp para enviar tu newsletter, una de las bases del marketing online, no asegura que tus emails se sirvan correctamente. La reputación de tu cuenta de correo y también el contenido de tu email son factores claves que debes comprobar y monitorizar para asegurarte que no llegan a SPAM.
Cómo saber si tus emails no llegan a SPAM
Una forma de averiguarlo es con Inboxtrail, te registras gratis y creas hasta 3 tests de envío. Cada test tienes un ID que puedes copiar y pegar en el correo que vas enviar de 4 formas.
Y el meollo de la cuestión son las llamadas seed lists, una relación de destinatarios de correos que van a testear tu correo.
Envías un correo con el ID a esa lista de correo, puedes hacerlo con tu gestor de correo o también añadiendo esa lista a por ejemplo Mailchimp.
En el panel de control de Inboxtrail verás un análisis en tiempo real.
Mira cómo tus clientes visualizan tus emails
Otra función interesante de Inboxtrail además de asegurarte que tus emails no llegan a SPAM es que puedes visualizar cómo se ven tus emails en los principales proveedores de correo y navegadores.
El sistema es muy parecido, en vez de create new test, pinchas en create new preview y envías un email a la dirección que te proporcionan.
Enlace: Inboxtrail *
* Es un servicio de pago pero puedes probarlo gratis con 3 créditos, cada test o previsualización cuesta 1 crédito.
24 de junio de 2015
Themify Flow: crea temas WordPress desde el front-end
Themify Flow es un framework para crear temas de forma muy visual dentro de tu mismo WordPress.
Una vez instalado, como cualquier otro tema, nos ofrece un menú con opciones como ya tienen muchos otros temas pero en Themify Flow destaca la posibilidad de editar en vivo desde el front-end.
Un panel de estilos para editar CSS

Si quieres por ejemplo añadir un loop a una página no tienes más que arrastrar y soltar ese módulo.
Además:
- puedes exportar los temas que vayas creando para utilizarlos en otros sitios o incluso venderlos,
- preparado para WooCommerce
- ¡Ah! Y es 100% gratuito no como Upfront
Aquí lo tienes en acción
Descarga y documentación: Themify Flow
Desde luego otra buena posibilidad para tenerlo como Starter Theme, una alternativa a Undesrcores, FoundationPress, Bones o estos frameworks y Starter Themes que publiqué en 2009.
12 de junio de 2015
Cómo mantener siempre visible la columna más corta con jQuery
Cuando tenemos un layout con varias columnas y no sabemos cuál va a ser la mayor puede que la más corta quede fuera de la vista cuando el usuario hace scroll.
Mi tema de WordPress sería un claro ejemplo, en resoluciones grandes estáis viendo una columna a la izquierda que a veces es menor que el contenido de los artículos, por ejemplo en este artículo: 9 grandes documentales sobre diseño, fotografía y arte. En mi caso en los casos en que la columna izquierda sea más larga que el contenido lo que hago es asignar la misma altura al artículo.
Os comparto este pequeño jQuery para detectar cuál es la columna más corta y hacer que cuando vaya a dejar de ser visible por el scroll se haga fija abajo de la página de forma que siempre estará visible.
Si intercambiáis los valores de la altura de las columnas en el CSS en línea de los divs en el HTML y le dáis a Rerun veréis como funciona.
```
<div id="content" style="height:1200px;"></div>
<div id="sidebar" style="height:200px;"></div>
```
See the Pen Sticky shortest column to bottom when scrolling by Cristian Eslava (@ceslava) on CodePen.
Código jQuery
Para utilizarlo debéis cambiar los selectores para las columnas, en mi caso he puesto #content y #sidebar y también un condicional para que sólo se haga en resoluciones de más de 400px de ancho. También debes eliminar en producción la línea que añade el texto Shortest a la columna más corta.
```
$(function() {

 anchodocumento = $(document).width();

 if (anchodocumento > 400) {
 var content = $('#content'); /* cambia el selector */
 var sidebar = $('#sidebar'); /* cambia el selector */
 var documentHeight = $(document).height();
 var contentHeight = content.height();
 var sidebarHeight = sidebar.height();

 $(window).scroll(function() {

 if (sidebarHeight < contentHeight)

 {
 shortestContent = sidebar;
 } else {
 shortestContent = content;
 }
 shortestContent.append('<h1>Shortest</h1>'); /* esta línea es sólo para la demo */

 scrollwindow = $(window).scrollTop();

 if (shortestContent.height() < scrollwindow)

 {
 shortestContent.css({
 position: 'fixed',
 bottom: 0
 });
 } else {
 shortestContent.css({
 position: 'static'
 });
 }

 });
 }
});
```
11 de junio de 2015
Cómo cargar sólo los plugins necesarios para cada página de tu WordPress
Una de las bondades pero también peligros de WordPress es que no hay prácticamente límites en la cantidad de WordPress que puedes instalar. El problema es que todos los plugins no son necesarios para cada página y cargan archivos CSS y Javascript que no hacen más que ralentizar su carga.
Para para mejorar el rendimiento y la velocidad sin CSS y JS extras una buena solución es Plugin Organizer, un plugin que te va a permitir entre otras cosas:
1. Ordenar la carga de los plugins
2. Organizarlos en grupos
3. Y lo más interesante, activarlos sólo en la(s) página()s o post(s) que lo necesiten.
¿Por qué utilizar Plugin Organizer?
Varios ejemplos en los que te puede ser útil:
- Utilizas un plugin para tu formulario de contacto, lo ideal es que sólo se cargara en esa página de contacto ¿verdad?
- Utilizas un plugin para galerías de imágenes o sliders, con Plugin Organizer podrás cargar ese plugin sólo en los posts que lleven esa galería
- Utilizas WooCommerce pero no en la home de tu sitio
- Utilizas esos molestos plugins de ventanas modal que en los móviles son todavía molestos, con Plugin Organizer puedes hacer que no se cargue dicho plugin cuando tu sitio sea visitado desde un móvil.
- Utilizas plugins para los comentarios, etc., etc., etc.
Obviamente puedes hacer uso de tus dotes de programación y utilizar condicionales en functions.php o en tu propio plugin pero no todos los usuarios de WordPress son programadores o no tienes tiempo de hacerlo para todos los proyectos.
Cómo utilizarlo
Hay 4 formas:
1. En Global Plugins lo desactivas para todo el sitio y luego en una página o post específico podrás activarlo. Este sería el caso del plugin para el formulario de contacto.
2. En Search Plugins defines los plugins que se cargarán en la página de resultados de búsqueda.
3. Con los Plugins Filters puedes desactivar cualquier plugin en una URL específica
4. En Post Type Plugins puedes desactivarlos por tipo de publicación «post» o «page» o los custom post types que tengas. Como en Global Plugins luego podrás reactivar un plugin en un artículo o página en concreto.
Captura dentro del Editor de WordPress donde puedo desactivar/activar plugins sólo para esta entrada
Cómo configurar Plugin Organizer
Una vez instado en la página de configuración (settings) encontrarás desactivada la opción Selective Plugin Loading, actívala, si no puedes ve a la última opción «Manage MU plugin file» y pincha en el botón «Copy», eso copiará el arhivo PluginOrganizerMU.class.php de
```
/wp-content/plugins/plugin_organizer/lib
```
a una nueva carpeta llamada mu-plugins
```
/wp-content/mu-plugins
```
Otras opciones de configuración son:
- Admin CSS: para cambiar los colores CSS que por ejemplo muestran un fondo gris a los plugins inactivos
- Mobile User Agents si has activado en la configuración «Selective plugin mobile» podrás detectar móviles y hacer que se carguen o no tus plugins
Más cosas
- Puedes crear grupos de plugins, como un grupo de plugins de administración, grupos de plugins de comentarios, grupos de plugins de WooCommerce, etc.
- Puedes hacer lo propio con los plugins para el backend
- Hacer configuraciones diferentes para http o https
- Cambiar el orden de la carga de los plugins
Personalmente creo que el primer consejo sería no instalar demasiados plugins pero si no tienes más remedio seguro que Plugin Organizer puede ayudarte a mejorar el rendimiento de tu WordPress.
Puedes buscarlo en tu WordPress o descargarlo desde el repositorio: Plugin Organizer « WordPress Plugins
9 de junio de 2015
Aprende fotografía con cursos online gratuitos e interactivos
Para aprender y conocer la teoría y los conceptos básicos de la fotografía hay multitud de recursos en la red: cursos, vídeos, artículos…
Hace unos días di con Camera Instructor, un sitio que sabe hacer uso del e-learning ofreciendo píldoras informativas con vídeos y test interactivos. Es completamente gratuito, si quieres puedes registrarte para ver tu progreso pero no es obligatorio.
Su creador Cody Meyer, fotógrafo y programador, piensa mantener con enlaces afiliados a productos de fotografía en Amazon. No es para nada una publicidad intrusiva y no puede ser más contextual así que espero que tenga buenos resultados y continúe compartiendo lecciones de fotografía. De momento sólo hay 1 curso con 8 lecciones, cada una con su vídeo, sus tests y comentarios para las dudas. Tiene programados 3 cursos más: retratos, paisajes y bodas.
5 de junio de 2015
Checklist para WordPress: infografías, ebook y plugins
Los checklist, listas de tareas y prioridades, nos ayudan a organizar nuestro tiempo de trabajo. Son un recurso útil para asegurarnos que nuestro sitio o artículo está listo para hacerlo público o que nuestro WordPress está optimizado.
Veremos:
- 6 Checklist imprimibles para WordPress
- 5 Plugins para Checklist en WordPress
6 Checklist imprimibles para WordPress
Al igual que las Cheat Sheet lo ideal de este recurso es que sea visual en forma de infografía o PDF, como por ejemplo la Completa Cheat Sheet sobre WordPress, así puedes imprimirla e ir tachando las tareas realizadas.
Recogemos 6 checklist, desde las tareas que necesitas para poner en marcha un sitio con WordPress, para desarrollar un tema, asegurarnos que un post tiene lo necesario antes de publicarlo a un checklist para realizar el mantenimiento de tu WordPress.
Ebook: The Essential WordPress Website Launch Checklist
iThemes comparte en forma de ebook (PDF) una estupenda Checklist para lanzar un sitio con WordPress de 21 páginas dividida en secciones.
WordPress Checklist (Infographic): 101+ Easy Steps to Follow
Muy completa, 101 tareas divididas en 9 secciones desde la instalación, el lanzamiento al mantenimiento. En la web de los autores puedes descargarla en formato PDF con las últimas 2 secciones e información, enlaces a plugins y webs útiles para cumplimentar cada tarea.
1. Getting Started
2. WordPress Pre Development Checklist
3. WordPress Development Checklist
4. WordPress Launch Checklist
5. WordPress SEO Checklist
6. WordPress Security Checklist
7. WordPress Maintenance Checklist
8. People Worth Reading (Bonus – Included in the PDF Download)
9. Handy Tools (Bonus – Included in the PDF Download)
WordPress Checklist 101 infografía
El checklist perfecto para mantener un blog de WordPress
Antonio Cambronero publicó este checklist de mantenimento de WordPress que divide las tareas del mantenimiento de un WordPress en períodos: tareas diarias, semanales, mensuales y anuales.
WordPress Setup Checklist
Esta checklist de 72 tareas está dividida en 5 secciones. Al descargarla en PDF te viene con un interesante extra, la WordPress Checklist Spreadsheet en formato Excel / OpenOffice Calc
WordPress Theme Development Checklist
Si desarrollas temas para WordPress te vendrá bien este PDF con las tareas a seguir sacadas del Codex
Checklist antes de publicar un artículo
Antes de darle al botón de Publicar debes cerciorarte de que has incluido la categoría correspondiente, la imagen destacada…
Esta checklist te sirve para asegurarte que has hecho todo antes de publicar un post.

5 Plugins para Checklist en WordPress
También puedes utilizar plugins para incluir y crear checklist dentro de tu propio WordPress o para asegurarte que todo está correcto antes de lanzarlo públicamente.
El plugin Pre-Publish Post Checklist, puedes agregar las tareas que quieras y decidir qué hacer si esa tarea no se ha realizado.
Good Writer Checkify añade igualmente un listado en el editor
Con Frontend Checklist puedes crear fácilmente checklist y hacerlas públicas para tus usuarios en formato HTML o PDF gracias a shortcodes.
El plugin Cleverness To-Do List es muy útil para sitios con varios autores, puedes crear listas de tareas para usuarios específicos, para grupos o para todos.
Launch Check te avisará si has realizado todas las tareas necesarias antes de lanzar tu sitio.
Otras checklist para WordPress
Os dejo otras checklist en forma de artículos, quizás no tengan el formato propio de una checklist pero añaden información y enlaces que te pueden servir.
- 15-Step Checklist To Creating The Perfect WordPress Website. Un post de los grandes de Smashing Magazine de 2012
- Checklist: 10 Puntos clave para optimizar WordPress
- Checklist para elegir la plantilla de WordPress perfecta
5 de junio de 2015
Porqué volver a utilizar Google AdSense síncrono en vez del asíncrono
Si utilizas AdSense para monetizar tu web seguramente utilices el código anuncio asíncrono que carga el script después de haberse renderizado el contenido de tu página. Esto es una ventaja para la velocidad y el rendimiento de tu web pero como veremos puedes ocasionar un descenso en tus ingresos publicitarios.

Descenso de ingresos
Si utilizas el código asíncrono debes saber que hay menos probabilidad de que esas visitas fugaces lleguen siquiera a ver el anuncio y mucho menos a hacer click. Según estudios La gente siempre hace scroll en la Web antes de que se termine de cargar. Si tienes anuncios above the fold de forma asíncrona casi seguro que pasarán desapercibidos.
El problema de la experiencia de usuario
Se argumenta que el asíncrono mejora la experiencia del usuario porque al mejorar la velocidad de tu sitio el usuario podrá acceder al contenido antes. Esto puede redundar hasta en una mejora de tu SEO y en los resultados que obtengas en Google Pagespeed.
Pero ¿qué ocurre si tus anuncios forman parte del contenido de tu web? ¿No se quedarán esperando que cargue ese espacio vacío? Claro que depende de la ubicación del anuncio, si es en una barra lateral o below the fold importará menos pero si lo tienes dentro del cuerpo del contenido, above the fold, los espacios vacíos generarán una mala experiencia de usuario.
Diferencias técnicas entre AdSense asíncrono y síncrono
Técnicamente gana el asíncrono, además del momento de carga del script, el asíncrono puedes ponerlo donde quieras, probablemente en el footer y una sola vez aunque tengas varios bloques:
```
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
```
Otra ventaja del asíncrono es la posibilidad de hacerlo responsive y darle estilo con CSS.
En cambio el síncrono necesitas ponerlo en cada bloque porque utiliza document.write() aunque el usuario sólo descargará el primero, los demás serán de la caché
```
<script type="text/javascript"
 src="//pagead2.googlesyndication.com/pagead/show_ads.js">
 </script>
```
Para cambiar de uno a otro ve en Adsense a «Mis anuncios» y haz clic en «Obtener código»
Conclusiones velocidad vs ingresos
Dicho esto he cambiado de asíncrono a síncrono en esta web para ver los resultados, comprobar que los ingresos aumentan, evaluar cómo afecta al rendimiento y optimización y comentaros los resultados.
¿Cuál es tu experiencia? ¿Utilizas AdSense síncrono o asíncrono? ¿Has notado alguna diferencia en tus ingresos?
Actualización 17/06/2015
Tras 2 semanas de pruebas ensayo/error he vuelto a Adsense asíncrono. Quizás dos semanas no sean suficientes para sacar conclusiones pero por si os sirve estas son las mías:
- Aumento ligero del CPC con el código síncrono
- Aumento ligero de nº de clics en los anuncios con el código síncrono
- Lógicamente y como era de esperar peor rendimiento y velocidad
Es decir, efectivamente sí da mejor resultados en cuanto ingresos el código síncrono aunque la diferencia no es para tirar cohetes y sacrificar un buen rendimiento. Lo que he decidido es volver al asíncrono y seguir trabajando en mejorar este tema para ese espacio vacío del anuncio pase lo más desapercibido posible.
3 de junio de 2015
Cómo automatizar los subtítulos de YouTube en WordPress
Si sueles publicar vídeos de YouTube tus usuarios pueden activar los subtítulos, si el vídeo los tiene, desde el botón entre el reloj y la rueda de configuración. Una vez activados los subtítulos si no están en español puedes hacer que YouTube los traduzca a español desde el botón de Configuración.
Pero quizás te gustaría que se reprodujeran automáticamente con subtítulos, para eso debes añadir 3 parámetros a la URL del vídeo:
1. hl=es Define el idioma del menú, en nuestro caso “es” para español
2. cc_lang_pref=es Define la preferencia del idioma para los subtítulos
3. cc_load_policy=1 Fuerza la activación de los subtítulos
Debes colocarlos en este orden concatenados por &
```
&hl=es&cc_lang_pref=es&cc_load_policy=1
```
El resultado completo sería este
```
[URL del vídeo]&hl=es&cc_lang_pref=es&cc_load_policy=1
```
Por ejemplo:
```
https://www.youtube.com/watch?v=C_83SXSp3o8&hl=es&cc_lang_pref=es&cc_load_policy=1
```
Gracias al protocolo oEmbed si pegas esa URL en el editor de tu WordPress el vídeo aparecerá automáticamente con los subtítulos en español

Cómo automatizar los subtítulos en todos los vídeos de WordPress
Ahora bien quizás te diste cuenta tarde y no quieres editar una a una publicaciones pasadas puedes añadir esta función para añadir el parámetro de subtítulos a todos y cada uno de los vídeos que hayas publicado.
Para eso tenemos que pasar los parámetros que hemos visto antes al iframe que devuelve el protocolo oEmbed.
La solución es añadir este código a tu archivo functions.php, con cualquier parámetro de YouTube por ejemplo
- desactivar el contenido relacionado [rel=0]
- ocultar la información del título y autor del vídeo [showinfo=0]
- reproducir en bucle [loop=1]
- etc. Listado completo de los parámetros del reproductor de YouTube
Hay varias soluciones, una de ellas es este código de Phil Owen donde añadimos los 3 parámetros para el idioma y los subtítulos pero puedes añadir los que quieras.
```
function Oembed_youtube_subtitulos($html,$url,$args){
 $url_string = parse_url($url, PHP_URL_QUERY);
 parse_str($url_string, $id);
 if (isset($id['v'])) {
 return '<iframe width="'.$args['width'].'" height="'.$args['height'].'" src="https://www.youtube.com/embed/'.$id['v'].'?hl=es&cc_lang_pref=es&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>';
 }
 return $html;
}
add_filter('oembed_result','Oembed_youtube_subtitulos',10,3);
```
También puede interesarte este post sobre cómo hacer tus vídeos responsive
2 de junio de 2015