Yahoo! WebPlayer Beta: Audio y video

Hace tiempo, mostraba la forma de usar Yahoo Media Player que no era otra cosa que un reproductor de audio con características interesantes ya que bastaba agregar un script y usar enlaces comunes y corrientes a los archivos de audio para que este los detectara.

Aúnque el viejo modelo sigue funcionando perfectamente, durante este año, Yahoo nos permite utilizar un nuevo reproductor llamado Yahoo! WebPlayer que amplia las posibilidades del anterior ya que ahora incluye la posibilidad de reproducir videos de servicios como YouTube.

Agregarlo a un sitio web es sencillo, basta copiar y pegar el script en nuestra plantilla y ellos recomiendan que se haga justo al final, justo antes de </body&dy>

<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

Por defecto, el tema o diseño gráfico tiene tonos oscuros, si se quieren usar tonos claros, hay que agregar un dato extra:

<script type="text/javascript">var YWPParams = { theme: "silver" };</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

Eso es todo, ahora podemos usarlo en cualquier parte ya que, de modo automático, detectará los enlaces donde haya contenido multimedia así que si se pone esto:

<a href="URL_archivo.mp3">un archivo MP3</a>

veremos el enlace con un botón de ejecución y pausa a su izquierda y además, una pestaña que se adosará a nuestra página y que, al desplegarse, nos permite seleccionar entre todos los archivos reconocidos ya que el script genera una lista de reproducción con todos ellos.

un archivo MP3

Lo mismo ocurrirá con un video de YouTube o de Yahoo:

<a href="http://www.youtube.com/watch?v=uGcDed4xVD4">Earth 100 million years from now</a>
<a href="http://movies.yahoo.com/movie/1810190842/info">Ip Man 2</a>

Earth 100 million years from now

Agregando parámetros, podemos configurar detalles que cambien los valores por defecto:

autoplay:true reproduce el archivo al cargarse la página
autoadvance:false no reproduce el siguiente archivo de modo automático
displaystate:1 muestra la pestaña desplegada
volume:valor entre 0.0 y 1.0 establece el volumen inicial que por defecto es 0.5
defaultalbumart:'URL_imagen' muestra una miniatura personalizada del video recomiendan imágenes de 205x205 pixeles)

Todas ellas se agregan del msimo modo que el tema; por ejemplo:

<script type="text/javascript">
    var YWPParams = {
        heme: 'silver',
        autoplay:true,
        volume:1
    };
</script>

Otras opciones pueden ser añadididas directamente como atributos en la etiqueta del enlace:

type="audio/mpeg" define el tipo de archivo multimedia
tabindex="2 establece el orden enque se verán en la lista de reproducción
title="el título de algo" muestra un título personal

Si tenemos varios archivos en la página, podemos hacer que en la lista de reproducción se sólo se muestren alguno de ellos agregandoles class="htrack"

<a href="URL_1" class="htrack">esta se verá</a>
<a href="URL_2">esta NO se verá</a>
<a href="URL_3" class="htrack">esta se verá</a>

Agregando class="noplay" evitamos que ese enlace se agregue a la lista de reproducción:

<a href="URL_4" class="noplay">esta NO se verá</a>

Si queremos que cierto enlace se muestre con una miniatura especial, agregamos una etiqueta IMG y la ocultamos:

<a href="URL_archivo"><img src="URL_imagen" style="display:none" />my song</a>

Nowhere Man Live

Aunque, sabiendo que el script genera una etiqueta SPAN para cada enlace y que esa etiqueta tiene una clase llamada ywp-page-play-pause:

<span class="ywp-page-play-pause ywp-link-hover">
  <em class="ywp-btn-page-play ywp-page-btn"></em>
  <a href="http://www.youtube.com/watch?v=AvLj72apGLI">Nowhere Man Film</a>
</span>

nada impide jugar un poco y hacer exactamente lo contrario, mostrar la miniatura y ocultar el texto:

Nowhere Man Film

Circus by Joker
	Contiene 5 íconos de 256x256, en formato PNG. descargar

jCodeCollector es un pequeño programa que funciona tanto en Windows como en Mac y Linux y que nos permite almacenar y tener ordenados snippets, es decir, porciones de códigos de todo tipo que uno va acumulando a lo largo de los años y que suelen quedar desperdigados por toda nuestra PC, escondidos, perdidos en alguna carpeta cosa que no los encontremos cuando los necesitamos.

El programa no sólo permite agregarlos sino también ordenarlos en distintas secciones, agregarles etiquetas o comentarios y posee un buscador interno que nos facilita encontrarlos.

De modo automático, reconoce distintos lenguajes (CSS, HTML, SQL, PHP, JavaScript, etc) y muestra los códigos con la sintaxis resaltada en diferentes colores, lo que incluso, hace que sea fácil encontrar errores y solucionarlos.

liteAccordion es un pequeño plugin para JQuery que nos permite agregar acordeones donde se mostrarán imágenes, animándolas con distintos efecto que funcionarán en cualquier navegador, incluyendo Internet Explorer 8.

El demo completo podemos descargarlo desde github pero para agregarlo a un sitio, sólo necesitamos dos archivos: liteaccordion.jquery.js y liteaccordion.css. Entonces, primero agregamos jQuery antes de </head> si es que no la tenemos:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Luego, el script con el plugin:

<script src="URL_liteaccordion.jquery.js"></script>

o lo agregamos directamente en al plantilla, copiando y pegando el contenido de ese archivo:

<script type='text/javascript'>
//<![CDATA[
  ....... aquí pegamos el contenido del archivo liteaccordion.jquery.js .......

//]]>
</script>

Por último, el estilo, del mismo modo:

<style>
  ....... aquí pegamos el contenido del archivo liteaccordion.css .......
</style>

Eso es todo; ahora, hay que crear el HTML allí donde quisiéramos utilizarlo:

<div id="miejemplo" class="accordion">
  <ol>

    <!-- cada una de las pestaña -->
    <li>
      <h2><span>Pestaña UNO</span></h2>
        <div>
          <!-- el demo original usa etiquetas de HTML5 pero, el contenido puede ser cualquier otra -->
          <span class="figure">
            <img src="URL_imagen1" />
            <span class="figcaption">un texto optativo</span>
         </span>
      </div>
    </li>

  </ol>
</div>

Podemos activarlo colocando el llamado a la función debajo de eso o bien, con el resto de los scripts siempre y cuando nos aseguremos que se ejecute cuando la pagina se haya cargado, estableciendo en ese llamdo, las opciones :

<script>
$(document).ready(function(){ 
  $('#miejemplo').liteAccordion({
    onActivate : function() { this.find('span').fadeOut(); },
    slideCallback : function() { this.find('span').fadeIn(); },
    autoPlay : true, pauseOnHover : true, theme : 'dark', rounded : true, enumerateSlides : true     
  }).find('span:first').show();
});
</script>

Algunas de las opciones se agregan ahí y otras en el plugin mismo donde, por ejemplo, se define el ancho y alto:

containerWidth : 600 // ancho total
containerHeight : 350 // alto total
headerWidth : 48 // ancho delas pestañas cerradas
firstSlide : 1 // el número de la primer pestaña activa
slideSpeed : 800 y cycleSpeed : 6000 // velocidad de la animación
rounded : false // si no se quieren bordes redondeados
enumerateSlides : false // muestra u oculta un número en cada pestaña
theme : 'basic' // el tema CSS que puede ser 'basic', 'light', 'dark', o 'stitch'

Esto ultimo, también puede ser modificado ... con paciencia y si se usan textos, habría que agregarle propiedades extras como:

span.figure {
  display: block;
  height: 100%;
  margin: 0;
  width: 100%;
}
span.figcaption {
  background: #000;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  bottom: 20px; 
  color: #FFF;
  padding: 10px 15px;
  position: absolute;
  right: 30px; 
  z-index: 3;
}

Partiendo de la idea de usar CSS para generar columnas auto-ajustables, podemos recrear cosas existentes aunque no funcionen en Internet Explorer y deberemos esperar que ese navegador incorpore estas propiedades que son unas de las más interesantes porque permiten pensar el diseño de un sitio web desde un ángulo totalmente diferente.

Vamos a jugar y usar un ejemplo previo, crear una página con un resumen de entradas que incluya paginación y simplemente, vamos a dejar todo como está pero cambiaremos algunas de las reglas de estilo. El modelo original es el que podía verse acá.

En ese ejemplo, el DIV cuyo ID es resultados es el rectángulo donde se muestran las entradas y, cada una de ellas es otro DIV cuya clase es paginaposts. El script, simplemente lee una cantidad determinada de entradas, extrae una imagen y la muestra junto al título que es una etiqueta H6. Nada de eso cambiará, sólo lo mostraremos de manera distinta, simulando el estilo mosaico de las Vistas Dinámicas de Blogger.

Y estas serán las reglas de estilo diferentes:

<style>
  #resultados { /* se mostrará todo en cuatro columnas */
    -moz-column-count: 4;
    -moz-column-gap: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    column-count: 4;
    column-gap: 0;
    margin-left: 0;
  }
  .paginaposts { /* cada entrada */
    background-color: #EEE;
    border-bottom: 4px solid #101921;
    display: inline-block;
    margin: 0;
    opacity: 0.8;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 205px;
  }
  .paginaposts:hover { opacity: 0.8; }
  .paginaposts a { vertical-align:top; }
  .paginaposts img { width: 205px; }
  .paginaposts h6 { /* el título permanece invisible hasta que ponemos el cursor encima */
    background-color: #AAA;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 204px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;transition: all 1s;
  }
  .paginaposts h6 a {
    color: #000;
    font-size: 18px;
    text-shadow: 1px 1px 1px #FFF;
  }
  .paginaposts:hover h6 { opacity: .8; }
</style>

Mosaico

Cuando las entradas que escribimos tienen algún tipo de código repetitivo, a veces, solemos adornar eso con alguna imagen. Es algo bastante común, indica una descarga, una referencia externa, una firma de alguna clase, un tipo de archivo, cualquier cosa.

Esto, que es algo habitual, se puede tranformar en un trastorno cuando, por casualidad, cambiamos el diseño o deseamos modificar esa imagen.

Muchas veces hay consultas sobre cosas similares ¿es posible modificar todas las entradas del blog sin tener que editarlas una por una? Y, la verdad es que no, que no hay forma de hacer eso.

Es cierto que podemos usar JavaScript para modificar ciertas cosas onfly, es decir que el codigo que hayamos escrito, se modifique cada vez que cargamos una página pero, para que esto funcione, debemos tener identificado claramente eso que deseamos modificar y, debe ser algo relativamente pequeño, que no exija un tiempo importante de ejecución.

Si, por ejemplo, yo tuviera algo así en varias entradas:

<a href="URL_archivo"> <img src="URL_mi_imagen" style="......." /> DESCARGAR ARCHIVO </a>

podría crear una función que cambiara automáticamente esa imagen por otra, llamando a la función y enviándole el contenido HTML de la entrada para que busque allí dentro:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <p><data:post.body/></p>
  <div style='clear: both;'/>
</div>
<script type='text/javascript'>cambiaralgo(&#39;<data:post.id/>&#39;);</script>

<script type='text/javascript'>
//<![CDATA[
function cambiaralgo(id) {
  var imagen; 
  var contenido = document.getElementById("post-" + id);
  if(contenido!=null) {
    var listaimagenes = contenido.getElementsByTagName("img");
    if(listaimagenes.length>0){
      for(var i=0; i<listaimagenes.length; ++i) {
        imagen = listaimagenes[i].src;
        if(imagen=="URL_mi_imagen"){
          listaimagenes[i].src = "URL_NUEVA_imagen";
        }
      }
    }
  }
}
//]]>
</script>

DESCARGAR ARCHIVO

ejemplo cambiar imagen | [restaurar]

La función leería el contenido de la entrada, buscaría las etiquetas IMG y, si una de ellas tuviera la imagen buscada, la cambiaría por la nueva y el cambio, sería prácticamnetre imperceptible para el visitante.

Es una solución que puede ser aplicada a casi cualquier otra cosa pero, no es lo ideal.

Lo lógico, cuando se quieren usar este tipo de códigos repetitivos, es usar CSS, crear clases y ahí, establecer las propiedades; puedo hacerlo de manera sencilla o puedo complicarlo hasta cualquier extremo. El uso de una clase para este tipo de cosas, me permitirá modificar todas las entradas, cambiando las reglas una sola vez.

En el ejemplo anterior:

<a class="descargar" href="URL_archivo"> <img src="URL_mi_imagen" style="......." /> DESCARGAR ARCHIVO </a>

usaríamos una regla de estilo como esta:

.descargar {
    background: transparent url(http://1.bp.blogspot.com/-rJtLjUni9DA/TjxbZVih-PI/AAAAAAAASks/pBsDRtuoCpU/s00/downloadfile.gif) no-repeat left top;
    color: #4B9043 !important;
    font-family: Verdana !important;
    font-size: 14px !important;
    padding-left: 35px;
    vertical-align: middle;
}

DESCARGAR ARCHIVO

Más aún, también podríamos generar el texto con CSS:

.descargar:after {
    content: "DESCARGAR ARCHIVO";
}

Con este tipo de sistemas, bastará cambiar el CSS y no hará falta editar las entradas.

c64 YOURSELF es un sitio donde podemos subir una imagen y convertirla, reduciendo sus colores a 16 lo que las asemeja a aquellas que podíamos ver en los viejos sistemas como la Commodore-64.

La página, que funciona en Firefox, Chrome y cualquier navegador que permita el uso de canvas, simula ese sistema operativo y es muy sencilla, sólo hay que arrastra la imagen desde nuestra PC a la ventana, esperar que sea convertida y luego, usar algunos de los enlaces inferiores para descargarla en formato PNG en tres tamaños distintos o bien compartirla en servicios como Flickr o Facebook.

El traductor de Google no es perfecto pero, suele sacarnos de apuro y además, posee un API que nos permite integrarlo en cualquier sitio. Generalmente, lo utilizamos para dar la opción de traducir la página completa pero también es posible hacerlo parcialmente, es decir, colocar algún texto y dar la opción de traducirlo sin tener que salir de la página.

Para esto, necesitamos agregar el script si es que no lo tenemos ya que en un blog de Blogger, suele estar agregado para multiples tareas.

Como cualquier otro, lo ponemos antes de </head>;

<script src='http://www.google.com/jsapi' type='text/javascript'></script>

Ahora, donde se nos ocurra, vamos a colocar dos DIVs, en uno, agregaremos los enlaces a los idiomas y en el otro, el texto a traducir; en este ejemplo, sería algo así:

<div id="idiomas">
  <a id="L_es" class="lenguajeactual" href="javascript:void(0);" onclick="traduce('es');">Español</a>
  <a id="L_en" class="" href="javascript:void(0);" onclick="traduce('en');">Inglés</a>
  <a id="L_it" class="" href="javascript:void(0);" onclick="traduce('it');">Italiano</a>
  <a id="L_fr" class="" href="javascript:void(0);" onclick="traduce('fr');">Francés</a>
  <a id="L_pt" class="" href="javascript:void(0);" onclick="traduce('pt');">Portugués</a>
</div>

<div id="miejemplo">
  ....... el texto .......
</div>

Un poco de CSS para darle forma:

<style>
  #idiomas {
    background-color: #000;
    border: 1px solid #444;
    margin: 0 auto;
    padding: 5px 10px;
    width: 500px;
  }
  #idiomas a {
    border-radius: 5px;
    color: #DDD;
    display: inline-block;
    font-size: 17px;
    padding: 5px 15px;
  }
  #idiomas a:hover { color: #FFF; }
  .lenguajeactual { background-color: #444; }
  #miejemplo {
    border: 1px solid #444;
    border-top:none;
    color: #EEE;
    font-size: 16px;
    padding: 10px 20px;
    margin: 0 auto;
    width: 480px;
  }
</style>

Y por último, el script con la función:

<script>
  var lenguaje = "es"; // es el lenguaje por defecto
  google.load("language",1); // cargamos el API
  // definimos la función que ejecutará el API
  var callback = function(result) {
    if(result.translation) {
      var translateDiv = document.getElementById("miejemplo");
      translateDiv.innerHTML=result.translation;
    }
  }
  // ejecutamos la función
  function traduce(traducir) {
    document.getElementById("L_" + lenguaje).className = ""; // cambiamos al clase del enlace anterior
    var translateDiv = document.getElementById("miejemplo"); // es el DIV donde está el texto
    google.language.translate(translateDiv.innerHTML,lenguaje,traducir,callback); // ejecutamos la función del API
    lenguaje = traducir;  // preservamos el lenguaje actual
    document.getElementById("L_" + traducir).className = "lenguajeactual";  // cambiamos la clase del actual
  }
</script>

EspañolInglésItalianoFrancésPortugués

Este es un párrafo en español.

Puede ser traducido haciendo un click en el enlace anterior.

Utilizando el API de Google y es relativamente fácil de implementar.

El uso de columnas para organizar el contenido de un página web, es una de las nuevas posibilidades que nos da el CSS3 aunque, como en la mayoría de estos casos, no es aplicable a Internet Explore excepto en su versión 10; el resto de los navegadores (Firefox, Chrome, Safari y Opera) las incorpora sin problemas aunque requiere el uso de prefijos para cada uno de ellos.

Para entender qué significa esto de las columnas, lo mejor es comenzar a entender cómo se ven las cosas de manera normal.

Supongamos que tengo un contenedor (un DIV) con un cierto ancho (width) y dentro de él, coloco seis imágenes cuyos anchos son iguales pero varían su altura:

<style>
  .demo {
    background-color:#000;
    line-height:0;
    margin:0 auto;
    width: 600px;
  .demo img {
    outline: 1px solid Turquoise;
    width: 200px;
  }
</style>

<div class="demo">
  <img src="URL_IMAGEN_1"/>
  .......
  <img src="URL_IMAGEN_7"/>
</div>

Lo que veré es esto:

normal | vertical-align: top | vertical-align: middle | float:left | float:right

Como miden 200 pixeles de ancho, tres se muestran arriba y las otras tres, debajo; Si quisiera que se vieran filas de cuatro columnas, debería aumentar el ancho del contenedor 200 pixeles más y se acomodarían solas.

Sin otro tipo de propiedad, las imágenes se mostrarán una al lado de la otra, alineadas por su base. Si quisiera, podría alinearlas por su parte superior o centrarlas verticalmente, estableciendo la propiedad vertical-align en las etiquetas IMG; en el demo, sería:

.demo img { vertical-align: top; } o bien .demo img { vertical-align: middle; }

Otra alternativa es hacer que floten en cuyo caso, como el contenedor tiene un color de fondo, también debería dimensionar su altura caso contrario, no se vería:

.demo { height:398px; }
.demo img { float: left; } o bien .demo img { float: right; }

Las distintas variantes pueden ser probadas haciendo click en los enlaces debajo del demo.

Sea como sea y haga lo que haga, las imágenes dejarán espacios en blanco (en negro en este caso) entre ellas ya que todas tienen alturas diferentes y justamente esa es la primera característica sobresaliente de las nuevas propiedades; las columnas ajustan el contenido de tal modo de no dejar espacios entre ellos.

En el mismo ejemplo inicial, agrego esto:

.demo {
  .......
  -moz-column-count:3;
  -moz-column-gap:0;
  -webkit-column-count:3;
  -webkit-column-gap:0;
  column-count:3;
  column-gap:0;
}

Y el resultado será esto:

Sólo requerimos dos propiedades:

column-count indica la cantidad de columnas a ser mostradas; si el ancho del contenedor es escaso, se solaparán; si el ancho del contenedor es demasiado grande, quedrán espacios entre ellas
column-gap es el espacio entre los contenidos, la separación entre ellos y depende del navegador (generalmente es 1em) así que ponemos cero para controlarlo nosotros msimos

Hay propiedades extras que pueden ser agregadas:

column-width establece el ancho de esas columnas
column-rule se utiliza para establecer el tipo de borde y tiene la misma sintaxis que la propiedad border
column-rule-color es el color del borde, similar a border-color
column-rule-style es el estilo del borde, similar a border-style
column-rule-width es el tamaño del borde, similar a border-width

Más ejemplos; cinco columnas con contenidos de 100 pixeles de ancho:

123456789

Y muchas imágenes todas juntitas:

Blogger anuncia que en alrededor de dos semanas, todas las cuentas serán actualizadas a la nueva interfaz así que, quien aún no lo haya hecho, se verá obligado a lidiar con ella.

De todos modos, por suerte, durante algún tiempo más, también habrá una opción de “Switch back” para volver al estilo normal aunque anuncian que en algún momento, esa opción desaparecerá.

Conociendo que los tiempos de esta gente son indefinidos y que hace años y años que siguen funcionando las plantillas clásicas pese a haber anunciado que también desaparecerían, imagino que, quienes no gustamos de ese nuevo escritorio, tendremos algún tiempo de alivio.

REFERENCIAS:Blogger Buzz

Una imagen normal:

<img src="URL_IMAGEN"/>

Le redondeamos los bordes en Firefox, Chrome Opera e IE9:

<img style="border-radius:20px" src="URL_IMAGEN"/>

Le agregamos un borde:

<img style="border-radius: 20px;border: 5px solid #FFF;" src="URL_IMAGEN"/>

en Firefox y Chorme/Opera se verán diferentes:

Le agregamos un padding que es la separación entre el borde y la imagen en si misma:

<img style="border-radius: 20px;border: 5px solid #FFF;padding: 10px;" src="URL_IMAGEN"/>

Nuevamene, en Firefox y Chorme/Opera se verán diferentes:

Empezamos otra vez pero usando valores extremos

<img style="border-radius:100px;padding: 0 50px;" src="URL_IMAGEN"/>

la confusión de los navegadores aumenta ¿cómo era eso del respeto a los estándares?:

Me olvido de las dudas existenciales y sigo agregándole propiedades; esta vez, un color de fondo:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;" src="URL_IMAGEN"/>

Y un poco de sombra exterior:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;" src="URL_IMAGEN"/>

Y una poco de sombra en el interior:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;" src="URL_IMAGEN"/>

Y así podríamos seguir hasta el infinito.

Cada vez que abrimos una página web, el navegador descarga los archivos que la componen y los guarda en una carpeta de la PC; allí se van acumulando datos que incluyen imágenes, videos, audio, scripts, css, etc. Esto es algo que hace para ahorrarnos tiempo; es decir, si ingresamos de manera repetitiva al mismo sitio, simplemente lee lo que ya descargó y como el acceso al disco duro es ágil, se evita el trabajo de conectarse y la navegación es mucho más rápida.

El problema con esto es que, en ciertas ocasiones, ese proceso nos juega una mala pasada ya que, si el sitio o página que estamos mirando posee un error, ese error también será descargado y, aunque sea eventual, es posible que nosotros no nos demos por enterados ya que seguiremos viendo la copia equivocada. Lo mismo ocurre cuando hacemos cambios en algún archivo y ese cambio no parece funcionar; es más, si vemos el código fuente, no veremos el cambio.

Hay ciertas etiquetas META que pueden agregarse a cualquier sitio y establecen la forma en que el navegador debería manejar la cache de cada página en particular pero, al margen de todo eso, en Blogger, el asunto se nos complica, sobre todo cuando surgen esos extraños errores con números y letras que no parecen significar nada y que en realidad nada significan porque se generan aleatoriamente.

En la gran mayoría de los casos, ese error es sólo temporal, alguna falla en el servicio o en la conexión, cualquier byte que llega torcido o con mal humor; da lo mismo y poco puede hacerse al respecto; lo primero es tratar de forzar la carga usando la combinación de teclas Ctrl+F5 que le ordena al navegador que no sea perezoso, que ignore lo que guardó en la caché y cargue todo otra vez.

Si el error persiste y no parece tener explicación, lo que nos sugieren siempre es "borren la caché del navegador" y esto es algo sencillo de hacer.

Para asegurarnos de no dejar rastros, cerramos todas las pestañas y lo dejamos abierto en una página en blanco (about:blank); luego, tanto en Firefox, Internet Explorer como en Chrome, podemos usar la combinación de teclas Ctrl+Mayús+Supr para que se abra la ventana con las opciones. Sino, dependiendo de cuál usamos, haremos esto:

• en Firefox menú Herramientas y seleccionamos Limpiar el Historial reciente o bien Herramientas | Opciones y en la pestaña Privacidad veremos el mismo enlace.
• en Internet Explorer menú Herramientas y seleccionamos Eliminar el Historial de Exploración o bien Herramientas | Opciones de Internet y allí veremos Historial de Exploración
• en Chrome haremos click en el ícono de Personalizar y seleccionamos Eliminar datos de navegación
• en Opera: menú Configuración y seleccionamos Eliminar información privada

En todos los casos, la ventana nos mostrará las distintas posibilidades y es fundamental que siempre se marquen las cookies.

Circle Navigation Effect with CSS3 es una idea que muestran en tympanus.net, aplicado a un slider de imágenes pero, para no complicar mucho las cosas, vamos a ver como generar ese mismo efecto en enlaces comunes y corrientes. Si se entiende la idea, luego pude ser trasladada a otras aplicaciones.

El truco se basa en anidar etiquetas dentro del enlace y de esa manera, poder controlarlas de manera individual:

<a class="circulo" href="javascpit:void(0);">
  <span style="background-image: url(IMAGEN_VISIBLE);"></span>
  <div style="background-image:url(URL_IMAGEN_OCULTA);"></div>
</a>

Los enlaces se muestran como pequeños círculos y, al colocar el cursor encima, se agrandan y muestran una segunda imagen:

Y claro, todo depende del CSS:

<style>
  /* los enlaces pueden tener cualquier dimensión */
  a.circulo {
    display: inline-block;
    height: 46px;
    position: relative;
    width: 75px;
  }
  /* la etiqueta SPAN contiene la imagen visible */
  a.circulo span {
    background: #00BE98 url() no-repeat 50% 50%; /* la imagen es un fondo */
    display: block;
    cursor: pointer;
    /* la dimensión de la imagen */
    height: 46px;
    width: 46px;
    border-radius: 23px; /* se ve como círculo con un radio que es la mitad de su tamaño */
    /* la posicionamos de manera absoluta en el centro */
    position: absolute;
    top: 50%;
    left: 50%;
    /* le ponemos márgenes negativos arriba y a la izquierda para centrarla */
    margin: -23px 0 0 -23px;
    /* la animación */
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  /* la imagen oculta */
  a.circulo div {
    background: transparent url() no-repeat center center;
    height: 0;
    left: 50%;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 0;
     z-index: 100;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  /* al poner el cursor encima del enlace */
  /* la etiqueta SPAN se "agranda" */
  a.circulo:hover span {
    border-radius: 75px;
    height: 150px;
    margin: -75px 0 0 -75px;
    opacity: 0.6;
    width: 150px;
  }
  /* la etiqueta DIV se hace visible */
  a.circulo:hover div {
    border-radius: 75px;
    height: 150px;
    margin: -75px 0 0 -75px;
    width: 150px;
  }
</style>

Atención que Google Buzz ha anunciado que han relanzado su LightBox que tantos dramas causó hace unos días pero, esta vez, han tenido la semi-prudencia de permitirnos deshabilitarlo; digo semi porque por defecto, está habilitado en todos los blogs.

Para modificar esa oción debe irse a Configuración | Formato, seleccionar NO en al casilla correspondiente y guardar:

Open images in Lightbox SíNo

If Yes is selected, when a reader clicks on an image in a post, it will be displayed in a slideshow-like overlay instead of leaving your page and navigating to the image.

Esta es una opción individual de cada blog y por lo tanto, si tenemos varios, hay que hacer lo mismo en cada uno de ellos.

Desde hace ya varios meses, el traductor de Google posee una serie de opciones extras, una de las cuales nos da la posibilidad de transformar texto en voz y si bien al principio esto sólo funcionaba en su navegador Chrome, ya lo hace en otros como Firefox e incluso en IE8. La idea es buena y la modulación más que aceptable.

Todo eso, sumado a que en Chrome estan experimentando con la posibilidad de permitir comandos de voz hace que haya gente en la web buscando información y tratando de ver hasta dónde puede llegarse. En una de esas páginas se habla de usar la capacidad que tiene el traductor para reproducir textos en un sitio externo, es decir, en una página cualquiera.

¿En que se basan para decir esto? En que el sonido, eso que escuchamos, es un archivo de audio en formato MP3 que, obviamente, Google convierte o reproduce con Flash o vaya uno a saber qué hace porque Firefox y Opera no reproducen ese tipo de archivos de forma nativa.

Lo que se genera al utilizar estas cosas es, simplemente, una dirección URL de este tipo:

http://translate.google.com/translate_tts?tl=es&q=texto

donde:

tl=es es el idioma (en este caso español)
q=texto el texto a reproducir

Como es un dirección, se supone que lo lógico es usar la etiqueta AUDIO para reproducir el supuesto MP3 pero, a mi no me ha funcionado así que intenté con la vieja etiqueta EMBED:

<embed src="URL" width="300" height="40"></embed>

y esa funciona mejor, muestra el reproductor pero no se puede controlar y si no se puede controlar (volver a reproduccir, por ejemplo), lo más simple es usar un IFRAME y listo:

<iframe src="URL"></iframe>

Pero, yo quiero jugar un poco con eso y, aunque sólo funcione en Chrome, no importa, igual me divierto un rato así que voy a poner un par de DIVs con IDs en la entrada y abajo, un cuadro para que se pueda entrar un texto:

<div id="TTS" style="position:absolute;left:-1000px"></div>
<div id="TTSlink"></div>

<input type="text" value="Hola" maxlength="100" id="testTTS" name="testTTS" />

<a href="javascript:void(0);" onclick="creaTTS()">ESCUCHAR</a>
<a href="javascript:void(0);" onclick="borrarTTS()">CERRAR</a>

Los dos enlaces ejecutarán dos funciones, la primera, leerá el texto que haya escrito y escribirá el IFRAME en el DIV TTS que no veremos porque lo saco de la pantalla; el segundo, simplemente eliminará el IFRAME:

<script>
//<![CDATA[

function creaTTS() {
  var txt = document.getElementById("testTTS").value; // leo el texto
  if(txt=="") {
    txt = "Google te habla"; // si no hay nada pongo uno por defecto
  }
  // reemplazo los espacios con caracteres +
  reg = /\s+/;
  txt  = txt.replace(reg,'+');
  // creo la URL
  var url = "http://translate.google.com/translate_tts?tl=es&q=" + txt;
  // creo el HTML
  var salida = "<iframe rel='noreferrer' src='" + url + "'></iframe>";
  // y los muestro
  document.getElementById("TTS").innerHTML = salida;
  document.getElementById("TTSlink").innerHTML = url;
}

function borrarTTS() {
  var TTS = document.getElementById("TTS").innerHTML = "";
  var TTS = document.getElementById("TTSlink").innerHTML = "";
}

//]]>
</script>

El script no tiene ningún tipo de filtro así que, caracteres estrafalarios o prohibidos sólo resultarán en errores, lo mismo ocurrirá si se colocan más de 100 palabras ya que ese es el límite aceptado por Google.

Como dije, esto sólo funcionará en Chrome pero, colocando una dirección de ese tipo en otros navegadores, eventualmente, se nos abrirá la página de descarga y si aceptamos, en nuestra PC tendremos un archivo llamado translate_tts que es un archivo MP3 así que basta agregarle la extensión para escucharlo. Digo eventualmente porque sólo funciona cuando se le da la gana.

¿Es posible automatizar el ancho de los videos para que se vean lo más grande posibles sin tener que usar jQuery como se mostraba en esta entrada?

Sí. Digamos que es relativamente sencillo aunque para usar estas cosas automáticas, hay que entender que debemos ser "prolijos" ya que los códigos no son adivinos así que los datos siempre deben ser agregados de manera más o menos similar. En este caso, la función tomará aquellos videos que se insertan con un IFRAME; por ejemplo:

<iframe width="420" height="345" src="http://www.youtube.com/embed/sln8OkarycE" ... ></iframe>

Uso YouTube porque lo tengo a mano pero da lo mismo cualquier otro servicio. En cualquier caso, lo único que importa es que tengan definidos su tamaño con height y width que es lo normal.

¿Qué hará el script? Simplemente se fijará en cuál es el ancho del contenedor donde está el video (un post, la sidebar, cualquier parte que podamos identificar), leerá el valor de width del video, calculará la proporción (aspect radio), establecerá la nueva altura en función de eso y cambiará los dos datos de la etiqueta, por los valores correspondientes.

Para hacerlo automático, bastaría que la función se ejecutara al cargarse la página pero ¿existe tal cosa como lo automático y universal? La verdad, no.

Cuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.

Es por ese motivo que nunca puedo responder ciertas preguntas salvo con generalidades (este es el caso); porque son preguntas demasiado específicas: quiero que todo se vea de cierto modo EXCEPTO tal cosa. Esas excepciones son la clave de todo y son infinitas; habrá tantas como ideas existan. El diseño web es más que nada una artesanía, se hace a mano, no existe lo universal, todo depende del contexto, de lo que uno quiera, todo depende de esas excepciones. Si no las hay, es fácil; si las hay, habrá que analizarlas una por una. Si lo hacemos bien, el resultado será aceptable y nos aliviará trabajo en el futuro. Son ... los cimientos de una casa; no se ven, no lucen, pero sostienen el resto.

En este caso, como en muchos otros, siempre hay límites que establecer, datos que debemos tener en cuenta. Incluso con el mismo script de jQuery que es una librería sofisticada, por eso sólo funciona con ciertos servicios, si queremos otros, debemos indicarlo. En el caso de Blogger, el mismo servicio utiliza IFRAMEs a destajo así que esas deben ser evitadas y limitarnos a los videos ¿Cómo hacer esto?

Seguramente, mi respuesta no gustará pero, lo ideal es identificar las etiquetas en cuestión con alguna clase CSS; por ejemplo:

<iframe class="videosfluidos ... ></iframe> </div>

Con algo así ya podemos crear la función porque podremos indicar en cuales etiquetas se ejecutará:

<script type='text/javascript'>
//<![CDATA[
  window.onload=function(){
    // crea una lista con todas las etiquetas IFRAME que haya
    var listaIFRAME = document.body.getElementsByTagName("iframe");
    if(listaIFRAME.length>0) {
      var h,w,ar,maxw;
      // lee esa lista una por una
      for(var i=0; i<listaIFRAME.length; ++i) {
        // si tiene la clase que definimos, calcula
        if(listaIFRAME[i].className=="videosfluidos") {
          w = listaIFRAME[i].width; // el ancho
          h = listaIFRAME[i].height; // el alto
          ar = h/w;  // la proporción 
          // se lee el alcho del contenedor, sea cual sea
          maxw = listaIFRAME[i].parentNode.clientWidth;
          // el nuevo ancho es el del contenedor
          listaIFRAME[i].width = maxw;
          // y el nuevo alto es proporcional
          listaIFRAME[i].height = maxw * ar;
        }
      }
    }
  }
//]]>
</script>

En este ejemplo, el script se ejecuta manualmente así que basta hacer click en este enlace para que el video ocupe el ancho del post, sin cambiar su proporción.

IS Google 1
	Contiene 10 íconos de 256x256, en formato PNG. descargar

Google Plus
	Contiene 80 íconos de 16x16, 24x24, 32x32, 48x48, 64x64 y 128x128, en formato PNG. descargar

Google Plus
	Contiene 10 íconos de diferentes tamaños y en varios formatos. descargar

REFERENCIAS:shockblast.net