Consejos Blogger: abril 2012

lunes, 30 de abril de 2012

Más variantes del efecto :hover

En dabblet.com hay ejemplos con muchas de las posibles opciones que tiene el efecto hover sobre los enlaces de texto; la mayoría de ellas son comunes

Entre ellas, hay dos que me parecieron interesantes. La primera sólo es apta para espíritus alocados, se trata de agregar un color de fondo multicolor:

<style>
a.colorido:hover { 
  color: #FFF;
  padding=0 5px;
  background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
  background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>

<a class="colorido" href="#">el enlace</a>

este es un un enlace muy colorido

La segunda, utliza los llamados selectores condicionales para mostrar la dirección URL del enlace cuando nos ponemos sobre él:

<style>
a.selector:hover:after {
  content: " [" attr(href) "] ";
  color: LightBlue;
  font-size: 11px;
}
</style>

<a class="selector" href="http://vagabundia.blogspot.com/">el enlace</a>

este otro muestra la URL de referencia

Y sobre esta última, podemos general variaciones; por ejemplo, en lugar de mostrar el contenido del atributo href, podríamos mostrar cualquier otro (title, rel, etc) y con CSS, transformar eso en alguna clase tooltip rápida:

<style>
  a.informacion {position: relative;}
  a.informacion:hover:after {
    background-color: CornflowerBlue;
    border-radius: 5px;
    color: #FFF;
    content: attr(rel);
    font-size: 12px;
    left: 2em;
    padding: 2px 10px;
    position: absolute;
    top: -1.5em;
    white-space: pre;
  }
</style>

<a class="informacion" href="#" rel="información detallada">el enlace</a>

y este enlace muestra cualquier otro texto adicional

Google probó automóvil que se conduce solo con un hombre tras el volante (vídeo)

Increíble experiencia la que vivió Steve Mahan, un hombre con discapacidad visual en un 95%, quien el pasado miércoles hizo un recorrido por su ciudad, en un automóvil equipado con un software desarrollado por Google, que permite que el vehículo se conduzca por sí mismo. Previamente ya se había completado exitosamente un recorrido por más de 200,000 km sin conductor, en una amplia variedad de terrenos y condiciones, por lo que, hacer el recorrido suponía seguridad para quienes se encontrasen dentro del vehículo y a su alrededor.

"¡Mira mamá, sin manos, sin pies..., me encanta!" dijo Steve Mahan emocionado al principio de su recorrido, que fue cuidadosamente diseñado y en el que experimentó una nueva forma de estar tras el volante.

Lo que verás en el video es una prueba de un experimento técnico de un proyecto de Google que inició el 2010 y que es dirigido por Sebastian Thrun, quien es experto en inteligencia artificial. Dicho proyecto denominado "Self-driving car project" pretende hacer que el conducir automóviles sea una experiencia segura, alegre y más eficiente en un amplio sentido, cambiando sustancialmente la vida de aquellos que no pueden conducir o no les gusta hacerlo.

"Hemos organizado esta prueba como un experimento técnico fuera de nuestros esfuerzos principales de investigación, pero creemos que también es un aspecto prometedor de lo que este tipo de tecnología podría algún día ofrecer a la sociedad si los rigurosos estándares técnicos y de seguridad pueden ser satisfechas", dijo Google.

Fuente: TOI

Ejemplos de curriculums creativos

En estas épocas de crisis profunda, conseguir un empleo es bastante difícil o imposible, uno debe diferenciarse de los demás y que mejor que empezar por el curriculum vitae.

Normalmente son diseñadores y creativos los que suelen presentarlos, pero pensamos que pueden usarse perfectamente para que el tuyo destaque entre los cientos o miles que llegan para un puesto de trabajo. Ponerle un poco de imaginación para que destaque y al menos lo lean no es tan difícil, os dejamos algunos ejemplos de muestra.

Pinterest dobla su numero de visitas únicas diarias en tres meses

Pinterest ha doblado su numero de visitas únicas diarias en solo tres meses, desde Enero a Marzo de este año han pasado de 2 millones a 4 millones.

El informe que presenta Tampa en una infografía también nos muestra como el interés de los hombres por Pinterest ha aumentado pasando del 20% del total de usuarios al 28%. Un dato muy interesante es que si comparamos los porcentajes de los ingresos que genera su uso, han pasado del 1% al 17% mientras que Facebook paso del 89% al 82% y Twitter se desplomo del 10% al 1%.

TweetCharts Informes completos sobre usuarios, hashtags, url, etc, de Twitter.

Dan Zarella acaba de lanzar TweetCharts, una herramienta analítica que te presenta un completo informe sobre cualquier palabra, frase, usuario, hashtags, url, etc, de Twitter

Solo debes introducir los términos de tu búsqueda, proporcionar un mail y en pocos segundo te muestra el informe completo incluyendo cifras sobre retweets, usuarios, enlaces, etc.

domingo, 29 de abril de 2012

Listones para el blog de los Juegos Olímpicos (Londres 2012)

Ya vimos cómo poner un gadget de cuenta regresiva para las olimpiadas, ahora vamos a poner unas decoraciones sencillas pero bonitas (según yo), alusivos a los juegos de Londres 2012.

Son siete listones que he diseñado para que puedas poner uno de ellos en la parte superior derecha del blog. Sólo entra en la Edición HTML de tu plantilla y pega antes de </body> el código del listón que más te guste.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NCjwwUczClKpvyuNnsbMdy5Lu-dJ05pplPU2-Yf6slDFg7GsWpCo4hb6LxEqOpjy10CHTSVM0-ilo_t_wrZ66V9JXWSDYHWgRh5N65BXo9uu09-sPiHefE_AR4cseLPygdAGzIJCyL0/s151/olimpiadas.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgESDUT1MmatwCKorvF9oqnNODC2_m6ojkitH-iJ3D6LVkoJSQMC2qtsv8NhyNGGqttGnbXzolOxG1re3vCUf47z_n3aJNFqEXwemeG1kVq-2r-qdzsC2CBs0aU5X0EuiTtfG_dDBUfw/s151/londres2012_rosa.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_QSYkcY-XbBxXFbV0qYRI97B0AgS7E3VSJpvM1cAHscna2ZsCQCM6ZSxFo-ep34WQUSJHnfKOkXKudvpOLT_AfMpnhLdF2itTFjGpNRJcNgL4fXiFnH6s-1-z9e8wrsOzeNLTfchdUU/s151/londres2012_azul.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-QFnlLp5jT4dAfh-4LFAZrbTbZgd1dPetcAiF1EL8MJicg9I7cB9gjgDqZP3BOCOx8-3mOPIkRuzbHRUbwuI4SFmrxBf09DsZ6U5ZFRdVY6Nha3MpyRAZrp8Ib129IeUcx228lp7iww/s151/londres2012_rojo.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDE_aHQRfzKWe46jqWqTWwiqacIm_6RYpKChGApj0tsjc0qGNK2d57ZSgcthPRr-uHes6UHNv6Tb39LjwwQD0PkEoj-5rtdcxXCPcr5muQHkkHqnh2ZVq3iB8dsJeZmgRuY2veS4cReM/s151/londres2012-insignia-blan.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2RnTi9El-JM_f02sKiF-fh2X-MPJ1egzYb0akT50RhszDOHKBfkp3bO_0YPDwjnazFt0JC7VV5e5dDQzkD4LJtjdi48VALAB3NwpR9v0ANrQb1C7IlHWqFbyYIU51tcHBqcjtCZgIbTE/s151/londres2012-insignia-nar.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSkUB8WwEAVYJlIv1F2M61v4BC4dlPwhbXs8zqtHWu3HcOaenVNP3ntWc0tmiQJ_-_u8cb2BsiWaaPv35AjNEbgFMoMUHdDlatQOGIAqk83mPHmS0begEbGGQzvqxCilllbV00cxNkhE/s151/londres2012-insignia-azul.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3UUiflDKOxqGm4nhG5aRyfnnFqRnktzph7q8lhfEY0pP9jfqMiSknHhbV0cksEfVnHpNWY4nDMAxz-lteAtNTN3tlcz4K6ogF-sq9jhj5AIpqCXMWloKs029RDa1IbVH8Rq6FjYKmUg/s151/londres2012-insignia-rosa.png" style='position:absolute; top:0; right:0;'/>

Como mencioné antes. Los listones estarán en la parte superior derecha, pero estarán fijos, si quieres que sean flotantes, es decir, que se puedan ver aun cuando bajas el scroll de la página, entonces cambia el position:absolute; que está dentro del código, por position:fixed;

Espero que sean de su agrado.

Redirecciones en Blogger y el traductor de Google

Hace unos dias, Jorge A. Verón Schenone planteaba un problema que se relacionaba con el nuevo sistema de re-direcciones de Blogger que adosa el prefijo del país de quien visita nuestros sitios en al URL y que, en principio, somos muchos lo que intentamos solucionarlo con un script que haga exactamente lo contrario.

El problema se generaba cuando se usaba el traductor de Google, ya sea porque lo tenemos en algún enlace de nuestras páginas o ingresando directamente en ese servicio. En cualquier caso, el sistema enloquecía y el resultado era nulo.

Lo que se me ocurrió como solución temporal es filtrar esas direcciones, es decir, si se entra via el traductor, no ejecutar el script de re-direcciones y para eso, el código quedaría de esta manera:

<script type='text/javascript'>
//<![CDATA[
  (function(){
    var esTRADUCIR = top.location.href.indexOf("://translate.googleusercontent.com/translate_c");
    if(esTRADUCIR!=-1){
       // SE QUIERE TRADUCIR LA PAGINA Y NO HAGO NADA
    } else {
      if( document.URL.match(/\.blogspot\.(com\...\/|..\/)/) ){
        var URL = document.URL
        URL = URL.replace(URL.match(/\.blogspot\.(com\...\/|..\/)/)[0],".blogspot.com\/ncr\/")
        document.location = URL
      }
    }
  })()
//]]>
</script>

Obviamente, es una solución precaria porque mis conocimientos sobre el asunto son menos que escasos así que si alguien ( Emilio Cobos ) tiene una idea de cómo hacerlo de modo más "elegante" será bienvenida.

Qué son los Encabezados o Headings y por qué es Importante usarlos

Estoy en trabajando en mejorar el uso de encabezados en mi blog, y una de las funcionalidades que recientemente implementó Blogger en el panel de edición de entradas, será de gran ayuda. Me refiero a la herramienta que permite agregar encabezados o headings (en inglés) desde los posts. Esto viene a complementar parte del trabajo que pudiera ayudar a mejorar el SEO del blog desde tus entradas y además le da accesibilidad a tu blog.

¿Qué son los encabezados o headings?

Los encabezados o headings en inglés, nos permiten estructurar el contenido de una página, destacando los títulos de los distintos apartados o secciones de una página. Para definir los encabezados, se utilizan las etiquetas h1, h2, h3, h4, h5, h6.

Blogger incorporó en el panel de edición de entradas las etiquetas h2, h3, y h4 a las que llama respectivamente así:

Encabezado = h2

Subencabezado= h3

Encabezado secundario = h4

¿Cómo agregar o poner los encabezados en los posts?

Como mencionaba al principio, Blogger recientemente dispuso una opción desde el panel de edición de entradas, para que agregar encabezados a los títulos de los distintos apartados de tu post sea más sencillo.

Para poner un encabezado al texto de un apartado en un post, tendrás que seleccionar el texto usando el botón izquierdo del mouse, luego, desplegar las opciones del menú desplegable que aparece en el panel de edición de entradas de Blogger, como se muestra abajo...

...y seleccionar el encabezado. La etiqueta se agrega automáticamente al texto. Lo puedes comprobar si echas un vistazo al HTML de la entrada. Ahí verías algo como esto, (el texto que está dentro es sólo como ejemplo)

<h3> Importancia económica y distribución geográfica del jitomate </h3>

¿Por qué debemos usar encabezados?

1. A tus usuarios les será más fácil dirigirse o acceder a contenido de interés dentro del post

Al utilizar encabezados en las páginas del blog, cualquier usuario vidente que ingrese a una página, podrá reconocer a simple vista los distintos apartados o secciones en el post, y así le será posible acceder al contenido que le interese de forma más sencilla. Algunos navegadores como Opera, permiten desplazarse por la página de encabezado a encabezado, así que, si los usamos en el blog, quienes usen ese navegador y dicha opción, se moverán por la página cómodamente.

Pensarás que esto también se puede conseguir fácilmente, si cambiamos el tamaño de la fuente y poniéndola con negrita por ejemplo, al usar las herramientas del panel de edición de entradas. Es cierto, pero en realidad la práctica recomendada es el uso de los encabezados, ya que esto define la importancia de cada puesto dentro del post, más allá de la presentación de los textos.

2. Le da accesibilidad a nuestro sitio

Otro punto importante, es que al usar encabezados, les facilitarás la tarea a usuarios invidentes que utilicen un lector de pantalla para leer tu contenido, ya que estos podrán recibir información acerca de la estructura del contenido y además podrán desplazarse de apartado en apartado fácilmente.

3. Pudiera ayudar en el posicionamiento en los motores de búsqueda

El otro beneficio y que pudiera entrar a discusión, es la importancia o valor que le dan los buscadores al contenido de los encabezados para mostrar tu contenido, la cual, puede pensarse tiene cierta lógica ya que, ¿de qué otro modo puede saberse con más exactitud de qué habla una página?, ¿serán únicamente las palabras claves las de mayor trascendencia a la hora de optimizar el blog?

Otro aspecto interesante, y que puedes haber notado es que, el navegador de forma automática asigna un tamaño de mayor a menor, según el encabezado, sin que tu tengas prescritos en tu plantilla código CSS para darle estilos. Así pues un texto que tenga encabezado h2, será más grande que el que tenga h3, el que tenga h3 mayor que el de h4 y así sucesivamente, por lo que su uso también es cómodo y accesible en el sentido y el navegador siempre lo mostrará, aunque no se cargara por ejemplo el CSS de tu página.

¿Cómo usar los encabezados o headings en una página?

En la página de la Universidad de Alicante, explican cómo usar correctamente los encabezados en una página. Ahí muestran un ejemplo claro que muestra la estructura de una página individual, lo que sería un post.

Si observamos el ejemplo, podemos apreciar el orden de las jerarquías van desde h1, hasta h3, empezando por el título del post, usando encabezado h1.

Algo que recomiendan es nunca saltarse el orden de los encabezados, por ejemplo usar h2 es los títulos del post, y luego, pasarse al h4.

Ciertos blogs o páginas utilizan el encabezado h1, en los posts, ya que en teoría, esto te ayudaria a posicionarte mejor en los motores de búsqueda, lo cierto es que mantener esa etiqueta en el titulo del blog, y agregarla también al titulo del post, se estaría duplicando el uso de una etiqueta que se recomienda usar solo una vez.

Dependiendo del contenido del post yo agrego encabezados h2 y h3. Los títulos de mis posts, tienen por defecto la etiqueta h2, que cambie y que tú también puedes cambiar desde la edición de HTML de la plantilla.

Las plantillas de Blogger usan la etiqueta h3 en los títulos de las entradas, luego veremos como cambiar esta etiqueta por una h2 y darle más importancia o relevancia al título del post.

Conclusiones:

El uso de encabezados hace nuestro blog o página más accesible a cualquier usuario, y teniendo habilitada la opción para agregarlos desde nuestros posts, hace su uso muy sencillo, no dudes en practicarlo ;)

Referencias:

accesibilidadweb.dlsi.ua.es

w3schools

SEO

Truco rápido y sencillo para que el ancho de un elemento en un diseño fijo, se vea completo en la navegador

Una página con un diseño fijo, es aquel que utiliza un ancho comúnmente definido en pixeles (px). En este tipo de diseños, no cambia el ancho de la página si es visto en distintas resoluciones de pantalla, siempre se mantiene igual, por lo que, si el blog o página es visto en una resolución de pantalla "menor" al ancho que se tiene definido en dicha página, se formará una barra de desplazamiento horizontal para permitir desplazar la página horizontalmente y verla completa.

Si en dicho diseño, se tienen ciertas secciones como el header, con un ancho de 100%, para que éste ocupe el 100% de la ventana del navegador, al ser vista la página en resoluciones menores que el ancho definido, el fondo de dicha sección no se verá completa, ya que el navegador la cortará, por decirlo así, pues tomará en cuenta la resolución de pantalla en que sea visto.

Nota: Esto no ocurrirá en elementos que tengan posición "fixed", es decir aquello que flotan y que tengan un 100% de ancho.

Para ilustrar lo que estoy diciendo, en la siguiente imagen se muestra el diseño de una página con diseño fijo, tiene 960px (pixeles) de ancho, y tiene un header con un ancho de 100% lo que hace que éste ocupe el total del ancho de la ventana del navegador.

Abajo, puedes ver una simulación de como se vería el mismo diseño, pero visto en una resolución de pantalla de 800 pixeles.

Como puede apreciarse en la simulación el fondo de la cabecera no se verá completo a la derecha, puesto que la resolución de pantalla es menor que el ancho de la página. También, la barra de desplazamiento horizontal aparecerá, por la misma causa, aunque esto último sólo se soluciona si todo el blog es fluido (usa porcentajes) o un diseño responsivo (responsive en inglés) que es aquel que cambia según la resolución de pantalla del usuario.

Si el ancho de la página es todavía más grande, por ejemplo de 1200 pixeles, la barra de desplazamiento horizontal se activará desde una resolución menor a dicha medida.

La solución.

Lograr que el fondo se vea completo en dichos casos, es mas fácil de lo que imaginas, y funcionará incluso en Internet Explorer 7, sólo necesitas definir un ancho mínimo en el body, y lo harías así

body {

min-width: 980px;

}

El valor del ancho mínimo, que en el código anterior se muestra como 980 pixeles, deberá ser igual al ancho del blog o página.

Pero, ¿a quién le interesa si se ve o no completo el fondo de ciertos elementos en una resolución menor de 800 pixeles? suponiendo que la página mide 960 pixeles...

No es para preocuparse tanto, puesto que la mayoría de tabletas o tablets tienen una resoluciones superior de 1024 pixeles de ancho, aunque si las hay de menor resolución, y siendo esta una solución tan simple, creo que vale la pena implementarla :)

Luego veremos cómo crear un diseño que pueda adaptarse a las distintas resoluciones de pantalla de los internautas, así que tienes que estar atento (a) ;)

Referencias:

Ver mas información sobre la propiedad min-width.

15+ Impresionantes Diseños de Páginas Web Alineadas a la Izquierda

Todas las páginas web, por defecto muestran su contenido alineado a la izquierda de la ventana del navegador, aunque es posible centrarlo muy fácilmente con CSS.

A continuación verás algunos sitios web muy monos, con diseños que muestran la página alineada a la izquierda, es decir, el contenido no está centrado horizontalmente tomando en cuenta la ventana del navegador.

Un punto que pudiera entrar a discusión es, si debería usarse este tipo de alineación en diseños fijos, (aquellos que mantienen su ancho independientemente de la resolución de pantalla en que se vea), ya que en resoluciones de pantalla muy grandes, quedará mucho espacio vacío a la derecha.

¿A ti te gusta más un diseño con el contenido centrado, o lo prefieres alineado a la izquierda?, Siéntete libre de expresar tu punto de vista ;)

1. Squarespace