¿Dónde se insertan las notas en Google Analytics?

Quizás mucha gente ya lo sabe. Si es así me podéis tratar de tonto si queréis ;). La verdad es que yo me pegué varios días sin dar con la tecla y sin poder enterarme dónde habían puesta la creación de notas en el Analytics. Creo que esto viene de la última vez que modificaron la interfaz. Por aquel entonces yo di por sentado que habían quitado esta funcionalidad y me cabreé bastante. Poco tiempo después descubrí que fue una equivocación mía o un fallo de usabilidad al usar una pestaña que parecía para desplegar o ampliar el gráfico y en realidad era la pestaña para descubrir las notas. Antes, poniéndote encima de la parte inferior del gráfico podías ver un mensaje (tooltip) de “crear nueva nota”. Ahora desde hace bastante tiempo tienes que pulsar una mini-pestaña que hay debajo de los gráficos y aparecerá un cuadro de edición para poder añadir notas con la fecha que desees.

Bueno, alomejor es una tontería pero estuve buscando en internet y no había nadie que lo comentara así que por si hay algún torpe como yo o alguien que no entienda que esa flecha es para lo que es, ahí dejo el pantallazo para que quede claro.

notas-analytics

Un saludo!!

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Cómo arreglar los errores de microformato que provoca el wordpress en Google Webmasters Tools

Entendemos que ya el título es largo y que quizás esto no os haya pasado nunca o lo que es más probable que quizás no os importe demasiado.

Nosotros en realidad es que pensamos que cualquier fallo que detecte google va en contra de tu posicionamiento y por lo tanto intentamos validarlo todo para que funcione lo mejor posible y nuestro gran amigo Google se porte bien con nosotros.

¿De qué va este problema asociado a los microdata o de los microformatos?

El problema como aparece en la imagen que encabeza el artículo está relacionado con que si accedemos a la sección que comprueba los datos estructurados de la herramienta de Google Webmaster Tools, no recoge correctamente tres campos asociados a nuestros artículos (<article>):

Falta:autor
Falta:update
Falta:entry-title

Esto es algo que pasa con muchas plantillas de WordPress y que puede que se no suceda en todos los casos pero actualmente nosotros lo hemos con bastante frecuencia.

La Solución

La solución no es complicada y pasa por añadir una etiqueta con las clases adecuadas para cada caso para que Google reconozca el autor, la fecha y el título. Busca en el archivo single.php los diferentes campos y complétalos con las clases que proponemos:

Título

<h1 class="post-title entry-title" > TITULO DE LA ENTRADA </h1>

Autor

<span class="vcard author post-author"><span class="fn"> AUTOR </span></span>
En este caso hay que mantener la estructura anidada de dos span por el tipo de formato vcard.

Fecha

<span class="post-date updated"> FECHA </span>

En definitiva se trata de corregir el marcado añadiendo unas clases que Google reconozca como un microformato válido

Bueno, ya nos contáis si os ayuda a bajar los errores

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Como buscar por fecha en gmail

buscar-por-fecha-en-gmail

Hemos escrito este artículo por que en más de una ocasión nos hemos visto con la necesidad de configurar filtros para organizar nuestros correos y dentro de los filtros que ofrece Google no encontramos la opción de la fecha.

Pues en realidad es bastante fácil realizar la búsqueda usando las cadenas after: y before: para filtrar tus correos.

La cadena before:aaaa/mm/dd expresa la fecha desde cuando quieres acceder a los correos.

La cadena after:aaaa/mm/dd expresa la fecha hasta cuando quieres ver tus correos.

Ejemplo para ver un día concreto en gmail

Para ver el día 2 de enero de 2015:

after:2015/01/02 before:2015/01/03

¿Cómo borrar correos antiguos en gmail?

En este caso si queremos por ejemplo borrar todos los correos anteriores al 2014 podemos usar la siguiente cadena en el campo de búsqueda:

before:2014/01/01

Una vez que hagamos esto podemos usar el campo de selección que aparece en la parte superior de todos los correos. Al seleccionar todos los de la página nos aparecerá un enlace “Seleccionar todas las conversaciones que coincidan con esta búsqueda”, pulsando este enlace podremos seleccionar todo y enviarlo a la papelera. Para deshacernos del todo habrá que entrar en la papelera y vaciarla o esperar unos 30 días para que la papelera se vacíe automáticamente.

enviar-mails-masivamente-papelera
Mensaje que aparece al seleccionar todas las filas de correos

 

Bueno, creo que se entiende bastante bien así que espero que os haya servido de ayuda para la próxima vez que os surja la necesidad de buscar correos por fechas.

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Nuevas extensiones de texto destacado en Adwords

vista de extensiones-de-texto-destacado

Google Adwords ha añadido recientemente una nueva extensión a nuestros anuncios de adwords. La nueva extensión permite añadir pequeños textos descriptivos destacados en nuestro anuncio. Se ha traducido como “extensiones de leyenda” aunque en la ayuda de de adwords también se le llama “extensiones de texto destacado“.

Sea como sea es una opción interesante para destacar características del producto o del servicio:

  • Envío gratuito
  • Entrega en 24hs
  • etc

El texto que aparecerá debajo del anuncio no es clicable y se puede programar su aparación para un periodo concreto de tiempo.

Podéis encontrar más información en la ayuda de adwords: Como mostrar texto destacado adicional debajo del anuncio

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Subelaweb es Google Partner

Subelaweb Google Partner

Después de nuestros años de experiencia en la web estaba claro que teníamos que probarnos un poco y darle oficialidad a esos conocimientos adquiridos.
El caso es que ya somos Google Partner y esto nos da cierta tranquilidad. La verdad es que llevábamos tiempo sin hacer exámenes y nos gusta la adrenalina de tener que hacerlo contrareloj.

Bueno, os animamos a todos los que estéis en este sector del marketing online a que os recicléis y aprobéis vuestros exámenes que no os quitarán mucho tiempo y siempre está bien que google os reconozca 😉

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Alinear verticalmente con tres líneas de css

Bueno, nos ha parecido interesante dejaros unas líneas de código (extraídas del blog de Sebastian Ekström) que gracias a la nueva compatibilidad con CSS3 de los navegadores modernos permite alinear elementos verticalmente.


.contenido{
position: relative;
top: 50%;
transform: translateY(-50%);
}

Esto siempre ha sido un dolor de cabeza para todos los diseñadores. Hace muchos años cuando existía la hegemonía de la tabla, era todo más fácil. De hecho todavía hay gente que con mal criterio sigue usando tablas para maquetar ciertos contenidos y poder alinearlos en el centro vertical de un espacio.

Otra técnica que no necesita css3 es el posicionamiento absoluto que sin embargo obligaba a conocer la altura del elemento en cuestión o del contenedor de dicho elemento.


.contenedor{
position: relative;
}


.elemento{
position:absolute;
top:50%;
margin-top:-30px /*esta es la altura divida entre dos del elemento que hay que alinear*/
}

Bueno, si queréis afinar un poco más allá podéis crear un mixin que incluya todos los prefijos de navegador necesarios y que pueda ser incluido de forma más ágil:


@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


.contenido p {
@include vertical-align;
}

Esperamos que os sirva como ha nosotros nos ha servido y que recordéis que nunca se para de aprender. Testear y evolucionar todo es empezar!!

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Usabilidad: El poder del botón naranja

Usabilidad botón naranaja

Dentro de la usabilidad web y de la usabilidad en general el botón es uno de los elementos básicos de interacción y en la mayoría de los casos es el fin de todas nuestros esfuerzos por conseguir que el usuario complete una acción dentro de nuestro sitio web.

En este caso nos gustaría hablar de el poder botón naranja.

La idea básica es que un botón de un tamaño adecuado y de un color adecuado puede hacer que la conversión de nuestros usuarios a clientes crezca de manera sorprendente.

El mero hecho de cambiar un colo rojo por un verde puede aumentar alrededor del 20% el número de usuarios que ejecutan la acción.

Hay numerosos estudios y debates acerca de esta cuestión pero hoy nosotros vamos a defender el uso del botón naranja como llamada a la acción de compra en una tienda online u otros contextos webs, por la asociación de dicho color con valores positivos.

Se ha demostrado que colores como el rojo o el naranja provocan mucha más atención en el usuario y tienen un mayor poder de atracción.

El rojo es también un color muy usado ya que es tradicionalmente un color de llamada muy potente con gran capacidad de atracción. Sólo basta recordar el rojo como botón de grabación o el botón rojo que ejecuta el lanzamiento de misiles. La realidad es que el rojo también nos parece un botón que ejecuta una acción sin marcha atrás. Cuantas veces habremos escuchado en alguna película el clásico “no presiones el botón rojo”.

El punto negativo que tiene para nosotros el color rojo es que el rojo es un color relacionado con alertas, con peligro o con errores (alerta roja) y esto para una compra quizás no sea lo más adecuado.

De cualquier manera no podemos ser dogmáticos con esta cuestión ya que la percepción de los colores no es algo universal y varía en diferentes lugares, contextos y culturas.

En el gráfico siguiente se muestra un recurso interesante extraido de colormatters con las diferentes percepciones de los colores en diferentes culturas.

Percepción de colores en diferentes culturas

El naranja en concreto se muestra como un color que lleva asociadas interesantes connotaciones en todas las culturas como deseo, energía, equilibrio, aprendizaje…esa es una de las razones por la que defendemos el poder del color naranja para la conversión a la hora de realizar una compra. La pega principal del naranja es que hay que vigilar el contraste con respecto al texto y al fondo ya que es un color que desde el punto de vista de la accesibilidad no proporciona un excesivo contraste con el blanco. Para cumplir con las pautas de la WAI y también con nuestros usuarios podemos arreglarlo usando un buen tamaño de fuente y un botón bien grande que proporcione una considerable zona activa.

Sea como sea, repetimos que hay que tener en cuenta el contexto en el que aparece el botón y la finalidad del mismo para evaluar cual es el color más interesante y el que mejor nos ayudará a cumplir la función de dicho botón.

Esta claro que al final “para gustos colores”

Os dejamos algunos artículos más que hemos encontrado (en inglés) que tratan la cuestión de la elección del color para los botones y os recomendamos que os paséis por el sitio de colormatters si os interesa como a nosotros la cuestión del color.

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

http://money.cnn.com/2014/03/20/smallbusiness/boost-online-sales/

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

Provincias españolas separadas por coma

Bueno, hoy estaba buscando un lugar dónde hubiera un simple listado de las provincias españolas para hacer un copia y pega sencillo y al final no he podido.
Así que se me ocurrió dejarlo aquí por si le sirviera a alguien que se hubiera encontrado en la misma tesitura 😉

Un saludo y si falta alguna provincia o hay alguna falta ortográfica que corregir no dudéis en comentarlo.

Descargar provincias españolas separadas por coma

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus

El concepto de Mobile First

mobile-first

Esta es una filosofía que entronca con el diseño multidispositivo y que defiende que el diseño de interfaz debe partir del diseño de las interfaces para dispositivos móviles, o sea, el móvil primero. La idea es que la adaptación progresiva a formatos más grandes se hará más fácil si se parte de la esencia de los elementos que se deben desarrollar en un dispositivo más pequeño. Digamos que sería algo así como ir de lo concreto a lo general, o al menos es como yo lo veo.

En la siguiente ilustración se hace una comparación de lo que sería una degradación gradual del diseño partiendo de formatos más grandes y siguiendo con el diseño de interfaces móviles y un diseño que se mejora progresivamente si se sigue el camino contrario.

progressive_enhancement

Algunos de los beneficios que promulga esta filosofía:

  • Permite el acceso a más usuarios (el 77% de la población mundial tiene móvil y el 85% de los móviles vendidos en 2011 estaba equipado con navegador)
  • Obliga a los diseñadores a centrarse en el contenido y funcionalidades centrales (¿que hacer cuando pierdes el 80% de tu pantalla para diseñar?)
  • Deja que los diseñadores innoven y aprovechen las ventajas de las nuevas tecnologías (geolocalización, eventos como arrastrar, pulsación múltiple, etc)

Os dejamos un dato por si pensáis que internet viene dentro de tu ordenador de sobremesa:
España es el país de Europa con mayor penetración de smartphones, al tener un 66% de los usuarios de móvil.
Casi 7 de cada 10 personas que tienen un móvil disponen de internet en su terminal.

Parece que en España cada vez más parece que va cobrando sentido eso del Mobile First. Si os interesa podéis encontrar el libro de Luke Wroblewsky, padre filosófico de esta idea.

Voy a ver como ha quedado esta entrada en el móvil 😉

Comparte si te ha gustado:
  • Facebook
  • Twitter
  • Google Plus