tinySrc: Redimensión automática de imágenes

En este nuevo mundo de los dispositivos móviles, las imágenes suelen ser problemáticas ya que no siempre se adaptan al tamaño de las pantallas y para eso es que se ha creado tinySrc que es un un servicio que permite alterar ese tamaño de manera automática para que se vean ... más o menos bien..

Para utilizarlo, basta agregar la dirección de ellos delante de la URL de nuestra imagen así que si nuestra etiqueta dice esto:

<img src="http://misitio.com/miimagen.png" />

bastará modificarla así:

<img src="http://i.tinysrc.mobi/http://misitio.com/miimagen.png" />

El servicio incluye algunas otras alternativas como parametros opcionales para forzar la redimensionar de las imágenes. La dcomentación que tienen al respecto es bastante amplia más imformación.

¿Esto es fiable? Bueno, como todo servicio web, durará ... lo que dure, sin garantías.

REFERENCIAS:wwwhatsnew.com

Esta es una variante de uno de los experimento publicados por Zurb y lo que hace es crear enlaces que se muestran como cajitas de tres dimensiones al poneer el puntero del ratón encima de ellas.

No, no es para usar mucho que digamos pero muestra una vez más que la imaginación es más poderosa de lo que todos suponen.

Vestibulum rutrum porta sapien vel vestibulum. Vivamus ac erat ac lacus sodales pretium vel at purus? Donec ut lorem justo, nec pulvinar dui. Quisque molestie fermentum posuere?

Etiam consequat augue ut purus commodo vel tempus leo dapibus! Nam felis ante, fermentum ac consequat nec, vulputate sollicitudin ante. In suscipit pharetra risus vel porta. Etiam accumsan purus et mi gravida sagittis. Donec leo massa, bibendum non iaculis id, consectetur vel massa. Donec in urna lorem, id auctor purus. In ultricies, diam in ultrices ultrices, est urna euismod urna, quis vulputate odio libero sed arcu. Vivamus ac mi lacinia purus hendrerit dignissim. Mauris vitae est sed sem luctus gravida.

Praesent convallis odio eget est varius nec malesuada orci ultrices? Nunc molestie, est vel vehicula posuere.

El CSS es algo similar a esto:

<style>
  a.box {
    color: #FFF;
    padding: 0 5px;
    border: 1px solid #2DAEBF;
  }
  a.box:hover {
    background-color: #2daebf;font-size: 1.5em;
    -moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
    -webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
  }
</style>

Y lo aplicaríamos agregando la clase box a cualquier enlace:

<a class="box" href="#"> el texto del enlace </a>

En la página original pueden ver cómo lo utiliza para mostrar una tabla de manera muy simpatica y novedosa.

Interesante artículo de Ciudad Blogger que muestra la solución a un problema molesto y extraño que afecta a muchos usuarios de Blogger.

De un tiempo a esta parte, son varios los que preguntaban por algún error que surgía con tal o cual truco. Miraba el código fuente y siempre respondía lo mismo: la URL de tal cosa es errónea. Como ese es un error bastante común, debo confesar que no le daba importancia al tema sin embargo, algunos insistían en que ellos escribían la URL correcta y Blogger la cambiaba.

Claro, lo primero que uno piensa es: no puede ser y si bien es cierto que eso no debería ser, la realidad es que si puede ocurrir. Hay que rendirse a los hechos o deshechos de Blogger.

Los elementos afectados son de tipo HTML/Javascript y de tipo Texto; allí, por ejemplo, escribimos la etiqueta de un enlace o una imagen:

<img='http://lh4.ggpht.com/_67iUKAHqOHk/SjwGIzRghXI/AAAAAAAABPY/GtGLu16fEQ0/s200/surtidito_03.jpg' />

guardamos y no la vemos. Volvemos a editar el gadget para verificar lo que hemos escrito y allí dice:

<img='http://lh4.ggpht.com/_67iukahqohk/sjwgizrghxi/aaaaaaaabpy/gtglu16feq0/s200/surtidito_03.jpg' />

Obviamente, como la URL contienen mayúsculas y minúsculas, la dirección cambiada no existe y por lo tanto, no vemos la imagen.

Lo mismo ocurre con el atributo href de los enlaces e imagino que con cualquier otro atributo que contenga una dirección.

<a href='http://vagabundia.blogspot.com/search/label/JavaScript'>JavaScript</a>

se convertirá en:

<a href='http://vagabundia.blogspot.com/search/label/javascript'>javascript</a>

Créase o no, Blogger cambia las URLs, mostrándolas siempre en minúsculas y lo malo es que en algunos casos, códigos que funcionaban dejan de funcionar ¿Esto es un bug temporal? No tengo la menor idea pero, el artículo de referencia trae la solución que es tan pero tan simple que asusta.

Todo el problema parece ser que si usamos comillas simples, Blogger cambia todo a minúsuculas pero, si usamos comillas dobles, Blogger respeta las mayúsculas y minúsuculas así que, en los dos ejemplos anteriores, bastaría poner esto:

<img="http://lh4.ggpht.com/_67iUKAHqOHk/SjwGIzRghXI/AAAAAAAABPY/GtGLu16fEQ0/s200/surtidito_03.jpg" />

<a href="http://vagabundia.blogspot.com/search/label/JavaScript">JavaScript</a>

Y ¡Oh milagro!

REFERENCIAS:Las mayúsculas y las minúsculas en las URLs

En Roy Tanck’s weblog ofrecen un método muy sencillo para crear un widget animado con las imágenes que tengamos guardadas en servicios de alojamiento de imágenes a los cuales podamos acceder mediante los feeds tales como Flickr , Picasa, etc

En el formulario de la página, ingresamos la URL del feed, establecemos el ancho, el alto y el color de fondo; luego, hacemos click en Generate code snippet y nos mostrará una previsualización y debajo, el código HTML que debemos copiar y pegar donde se nos de la gana.

En otra entrada del mismo blog, hay una explicacíon más detallada del Photo widget e inclso, el código fuente si es que nos interesa descargarlo.

Sólo un ejemplo de una lista que se mezcla cada vez que hacemos click en un item, utilizando las librerias prototype y script.aculo.us ¿Para qué puede servir? Ni idea.

<style>
  #scripty_morph_demo {
    background-color: #000;
    border: 4px solid #888;
    cursor: pointer;
    height: 300px;
    margin: 0 auto;
    outline: 1px solid #FFF;
    padding: 10px;
    position: relative;
    width: 200px;
  }
  #scripty_morph_demo div {
    color: #EEE;
    font-size: 60px;
    height: 60px;
    position: absolute;
  }
  #scripty_morph_demo div:hover {
    color: #E00;
  }
</style>

<script>
  Array.prototype.shuffle = function() { return this.sortBy(Math.random); };
  (function() {
    function foo() {
      $('scripty_morph_demo').select('div').shuffle().each(function(e, i) {
        e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.4 }); 
      });
    }
    $('scripty_morph_demo').observe('click', foo);
    foo();
  })();
</script>

<div id="scripty_morph_demo">
  <div style="top: 0;"> uno </div>
  <div style="top: 60px;;"> dos </div>
  <div style="top: 120px;"> tres </div>
  <div style="top: 180px;"> cuatro </div>
  <div style="top: 240px"> cinco </div>
</div>

REFERENCIAS:madrobby.github.com

Uno de los tantos trabajos de wonder FI; sólo para divertirse un rato o si alguien está interesado, puede mirar el código fuente o descargarlo.

También hay decenas de juegos sencillos y no tan sencillos que pueden agregarse a cualquier página web.

feliz