Twitter ahora será más rápido

Ayer los usuarios de Twitter sufríamos algunos problemas al usar la plataforma, esos problemas eran debidos a una serie de cambios que se están produciendo en los servidores de Twitter para mejorar la carga del sitio.

Según informan desde su blog de ingeniería, cuando lanzaron la versión del nuevo Twitter trasladaron la mayor parte del procesamiento desde los servidores de Twitter a los navegadores de los usuarios, eso mejoro el problema de sus servidores, ya hasta echamos de menos la ballena, pero no mejoro la carga del servicio, al depender en gran medida de los equipos de cada usuario.

Además el uso de hashbang hace que el navegador tenga que cargar una página HTML, descargar y ejecutar algo de JavaScript, reconocer la ruta hashbang (que sólo es visible en el navegador), y es solo entonces cuando muestra el contenido de la URL.

Ahora están cambiando la arquitectura para no depender de los navegadores, eliminando el enrutamiento en nuestros equipos consiguen que primero se muestre el contenido y luego se cargue solo el javascript necesario, además implementado por módulos. Todo esto hace que se reduzcan los tiempos de carga hasta un 80%.

Esta nueva versión, mas rápida será trasladada a todos los usuarios en los próximos días y pronto veremos desaparecer de las url de Twitter el famosos #!...

La nueva interfaz de Blogger: Errores y demoras

Para quienes no usamos la nueva interfaz de Blogger porque no nos gusta, nos resulta muy incómoda o simplemente no queremos cambiar, este mes de mayo era clave y, si bien aún no ha terminado y la espada de Damocles sigue pendiendo sobre nuestras cabezas, tal vez podamos tener un tiempo de respiro extra ya que, curiosamente, el mensaje de Blogger indicando que el cambio sería forzoso a fines de este mes, ahora ha cambiado por otro indicando que eso ocurrirá "en los próximos meses" o sea ... vaya uno a saber cuando. Mañana, en julio, nunca ... con Blogger, no se sabe; lo temporal puede ser permanente y lo permanente puede ser efímero.

Aparentemente, lo que hay son muchos problemas no resueltos en esa interfaz que han obligado a Blogger a demorar el cambio programado. En este momento, en mi caso, la opción Descripción de búsqueda parece haber desaparecido y sin embargo ... allí está, en el código fuente pero oculta ¿por qué?

Hay otras opciones ocultas que jamás habia visto: Etiquetas de robots personalizados que no sé que puede significar:

Y Enlace permanente que parecería servir para cambiar la URL de la entrada algo que sería muy útil ya que muchas veces aparecen cortadas o son "feas":

Veremos, veremos, veremos o ... no veremos nada. Blogger es una caja de sorpresas.

La ley de cookies cuidado con ella

Hace un año se aprobó la nueva ley europea que protege la privacidad de los usuarios al navegar por Internet, conocida popularmente como la Ley de cookies y la realidad es que si nos la tomamos al pie de la letra, todos los que tenemos sitios web en Europa la estaremos incumpliendo y nos podrán denunciar por ello.

A esta ley se habían acogido parcialmente únicamente Gran Bretaña, Francia, Eslovenia, Luxemburgo, Letonia y Lituania, en España desde el día 2 de Abril de 2012 entró en vigor la modificación introducida en el artículo 22.2 de la Ley de Servicios de la Sociedad de la Información y del Comercio Electrónico (LSSI-CE) para adecuarse a la Directiva Comunitaria 2009/136/CE.

La ley regula el uso de cookies en los sitios, hasta ahora debíamos de informar de su uso en nuestra Política de Privacidad, pero ahora además es necesario obtener el consentimiento explicito de los usuarios del sitio mediante la comunicación del uso de cookies, la explicación sobre para que se usan, pidiendo su aceptación haciendo clic en un icono o una casilla de verificación. Es decir a nuestras visitas deberá aparecerle de forma clara un aviso donde le explicamos que usamos cookies y deberemos preguntarle si acepta o rechaza su uso, un ejemplo lo tenéis en el sitio de British Telecom.

Las únicas excepciones son sitios donde el seguimiento es estrictamente necesario para el suministro de un servicio o comunicación solicitada por el usuario como compras, algunas aplicaciones en línea y otras como almacenamiento en caché para mejorar la velocidad de la página.

En España aun no esta clara como debe de aplicarse, parece que los navegadores web tendrán que estar configurados por defecto con las cookies desactivadas y el propio usuario decidirá si la habilita o no, por nuestra parte sería suficiente mantener lo que hasta ahora todos deberíamos tener, es decir:

.- Avisar que la página web utiliza cookies.
.- Qué información se almacena en dichas cookies.
.- Con qué finalidad esa información será almacenada y posteriormente procesada.

Pensamos que no se va a perseguir el cumplimiento de esta ley pero si deberíamos tener claro que podríamos ser denunciados, en Inglaterra lleva tres días en vigor y ya se han producido 64 denuncias, por lo que nadie esta libre de encontrarse con una denuncia y una multa por no aplicar esta ley.

No caigáis en el error de pensar "yo de eso no tengo" ¿medís vuestras visitas? ¿tenéis botones sociales para twittear, hacer +1 o "me gusta"? ¿tenéis Adsense?, pues vuestro sitio usa cookies, de terceros pero son cookies al fin y al cabo y sois responsables de ellas junto con la empresa que las usa. Si, también se nos hace responsable de las cookies de terceros.

Esperemos que con la que esta cayendo, a ningún gracioso le de por recaudar mas por este lado...

El Blog de Blogger in Draft será retirado

El blog de Blogger in Draft será retirado, según anuncia el equipo de Blogger, por lo que toda la información sobre actualizaciones y características nuevas en Blogger in Draft, serán publicadas en la  página de Blogger en Google+.



Posiblemente ésto no sorprenda a muchos que han sido testigos de los cambios que ha venido haciendo en Google, con el propósito de focalizarse en su proyecto G+ e impulsarlo.



Si eres usuario nuevo de Blogger, y no sabes que es Blogger in Draft, ésta, es una versión especial de Blogger que nos permite a los usuarios del servicio probar gadgets nuevos y otras características, antes de que sean lanzadas oficialmente en Blogger.



Si te preocupa que Blogger in Draft también sea retirado, no te preocupes, podrás seguir probando como siempre todas las características nuevas desde ahí, tan pronto como sean agregadas, sólo que la información sobre todas esas novedades las encontrarás en otro lado.



Es mejor tener toda la información sobre las novedades de Blogger en un mismo sitio ¿verdad?, aunque también podrás encontrar información sobre actualizaciones de Blogger desde su blog.



Visto en Blogger Buster.

Inversiones actuales en publicidad online y previsiones futuras

La IPO de Facebook ha levantado la polémica sobre los anuncios en la plataforma y en general, en toda la red. Go-Gulf ha realizado un estudio comparativo sobre las inversiones actuales en publicidad online y las previsiones futuras a nivel mundial, donde nos muestra su posible evolución.

Este año el crecimiento de la inversión en publicidad en línea esta en 17.5% pero las previsiones para los años venideros indican que esa tasa de crecimiento disminuirá. Sin embargo si observamos el mercado estadounidense, ejemplo significativo de lo que sucede en otras regiones a posteriori, vemos que en solo tres años, el gasto en publicidad online casi igualara al realizado en las televisiones, cuando actualmente la inversión en televisión casi duplica a la online.

Interesante apreciar como Google domina este mercado con el 44.1% del mismo frente al solo 3.1% que abarca Facebook, pero las previsores para Facebook no parecen ser malas, el 89% de las agencias planean invertir en ella en sus campañas en redes sociales.

Extraña ver a España en la lista de países donde más invierten en publicidad online. Podéis observar más datos en la infografía realizada.

Palabras animadas con CSS

Este es un efecto creado exclusivamente con CSS donde ciertas palabras se animan, "cayendo" ordenadamente y son reemplazadas por otras usando transiciones y animaciones. En el sitio d los desarrolladores hay varios ejemplos con variaciones pero, todos comparten la misma idea general. En principio, empezamos con el HTML, una serie de etiquetas SPAN dentro de un DIV:

<div class="rw-sentence">
  <span>Un ejemplo</span>
  <span>donde las palabras</span>
  <span>se van cayendo:</span>
  <div class="rw-words rw-words-1">
    <span>uno</span>
    <span>dos</span>
    <!-- etc etc etc -->
    <span>tres</span>
  </div>
</div>

Eso es simple aunque si se coloca dentro de un psot de Blogegr, hay que tener cuidado con los saltos de línea.

Un ejemplodonde las palabrasse van cayendo:

unodostrescuatrocincoseis

Y claro, el CSS:

<style>
  .rw-sentence { /* el DIV donde se verá el efecto */
    margin: 0 auto;
    text-align: left;
    width: 400px;
  }
  .rw-sentence span { /* cada uno de los párrafs */
    color: #AAA;
    font-size: 30px;
  }
  .rw-words { /* las palabras que caen */
    display: inline;
    text-indent: 10px;
  }
  .rw-words-1 span { /* la primera palabra */
    color: White;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    /* la animación */
    -moz-transform-origin: 10% 75%;
    -webkit-transform-origin: 10% 75%;
    -o-transform-origin: 10% 75%;
    -ms-transform-origin: 10% 75%;
    transform-origin: 10% 75%;
    -moz-animation: rotateWord 18s linear infinite 0s;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -o-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
  }
  /* la animación de las siguientes */
  .rw-words span:nth-child(2) { /* la segunda */
    color: Red;
    -moz-animation-delay: 3s; 
    -webkit-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
  }
  .rw-words span:nth-child(3) { /* la tercera */
    color: Aqua;
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s;
  }
  .rw-words span:nth-child(4) { /* la cuarta */
    color: Bisque;
    -moz-animation-delay: 9s; 
    -webkit-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s;
  }
  .rw-words span:nth-child(5) { /* la la quinta */
    color: CadetBlue;
    -moz-animation-delay: 12s; 
    -webkit-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s;
  }
  .rw-words span:nth-child(6) { /* la última */
    color: Yellow;
    -moz-animation-delay: 15s; 
    -webkit-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s;
  }
   /* y las reglas de las animaciones para cada navegador */
  @-moz-keyframes rotateWord { /* Firefox */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -moz-transform: rotate(0deg); }
    19% { opacity: 1; -moz-transform: rotate(98deg); }
    21% { opacity: 1; -moz-transform: rotate(86deg); }
    23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-webkit-keyframes rotateWord { /* Chrome/Safari */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); }
    19% { opacity: 1; -webkit-transform: rotate(98deg); }
    21% { opacity: 1; -webkit-transform: rotate(86deg); }
    23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-o-keyframes rotateWord { /* Opera */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -o-transform: rotate(0deg); }
    19% { opacity: 1; -o-transform: rotate(98deg); }
    21% { opacity: 1; -o-transform: rotate(86deg); }
    23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-ms-keyframes rotateWord { /* IE IE9/10 */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -ms-transform: rotate(0deg); }
    19% { opacity: 1; -ms-transform: rotate(98deg); }
    21% { opacity: 1; -ms-transform: rotate(86deg); }
    23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes rotateWord { /* genérica */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
    19% { opacity: 1; transform: rotate(98deg); }
    21% { opacity: 1; transform: rotate(86deg); }
    23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
</style>

REFERENCIAS:codrops

EMFF, reproductor flash de música MP3

EMFF es un reproductor en flash para escuchar música MP3 en el blog, su instalación es como la de la mayoría de los reproductores de su tipo, y su uso también. Sin embargo EMFF admite listas de reproducción y además posee varios skins para que pueda adaptarse a los gustos de cada quien.

Puedes verlos funcionando aquí mismo en esta entrada.


Old no border

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Lila Info

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="200" height="55"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Easy Glaze

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="32" height="32"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Position Blue

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="100" height="50"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Silk

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="84" height="32"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Silk Button

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="16" height="16"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Stuttgart

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="140" height="30"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Wooden

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="120" height="60"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3"> </object>

Para usarlo sólo necesitas descargar este archivo, descomprimirlo, y subir uno de los archivos SWF a un hosting. Luego pega el código del reproductor que más te guste en un elemento HTML/Javascript de tu blog, o incluso una entrada, ahí agrega la URL del archivo SWF que subiste previamente (sólo el que hayas elegido), verás que debes agregar la URL dos veces. También agrega donde se indica la URL de tu canción y listo.

Puedes agregar más de una canción, sólo añade las demás URLs de las canciones una seguida de la otra, pero todas separadas por una coma, por ejemplo:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3 uno,URL del archivo MP3 dos,URL del archivo MP3 tres"> </object>

También podemos usar tres parámetros, autoplay, repetir, y aleatorio:

&amp;autostart=yes &amp;repeat=yes &amp;shuffle=yes

Cualquiera de ellos se agrega al final de la última URL de la canción, por ejemplo, si usáramos los tres se vería así:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF"> <param name="wmode" value="transparent" /> <param name="FlashVars" value="src=URL del archivo MP3&amp;autostart=yes&amp;repeat=yes&amp;shuffle=yes"> </object>

Como puedes ver es un reproductor de fácil uso, sencillo y visualmente agradable. En la siguiente entrada veremos cómo crear listas de reproducción en formato XML. Si ya sabes crear listas XML entonces siempre has de cambiar esta línea del reproductor:

<param name="FlashVars" value="src=URL del archivo MP3">

Por esta otra:

<param name="FlashVars" value="playlist=URL del archivo XML">

En el caso de las listas de reproducción XML la URL del archivo nunca deberá llevar el protocolo seguro de transferencia de hipertexto, es decir, que en vez de que sea HTTPS será HTTP. Vía | EMFF