Servicios para agregar imágenes temporales

¿Imágenes falsas? ¿Para qué? Son útiles a la hora de probar cosas, nos evitan tener que subir alguna o re-dimensionarlas y están siempre listas.

Hay muchos sitios que brindan ese servicio. fakeimg nos permite definir su tamaño (ancho y alto), el color de fondo y del texto así como su contenido. Son todas opciones que se agregan de manera sencilla:

<img src="http://fakeimg.pl/200/" /> será una imagen cuadrada de 200x200
<img src="http://fakeimg.pl/300x200/" /> será una imagen rectangular de 300x200
<img src="http://fakeimg.pl/300x200/ffff00/" /> será una imagen rectangular de 300x200 con fondo amarillo
<img src="http://fakeimg.pl/300x200/ffff00/000" /> será una imagen rectangular de 300x200 con fondo amarillo y texto en negro
<img src="http://fakeimg.pl/300x200/?text=Hola" /> así establecemos el texto a mostrar
<img src="http://fakeimg.pl/300x200/?text=Hola&font=museo" /> y de este modo podemos indicar una fuente par el texto (lobster, bebas, museo)

Pero hay más alternativas. Tanto Dummy Image como placehold son similares en cuanto a opciones:

<img src="http://placehold.it/300x200" />
<img src="http://dummyimage.com/300x200" />

PlaceKitten excepto que lo que nos mostrará son imágenes de gatos definiendo su ancho y alto:

<img src="http://placekitten.com/300/200" />

y para que nadie se queje, Placedog lo hará mostrando imágenes de perros; si usamos Placeape serán monos y Placebear nos dará osos:

<img src="http://placedog.com/300/200" />
<img src="http://placeape.com/300/200" />
<img src="http://placebear.com/400/200" />

Si no se quieren animales, los hambrientos pueden usar Bacon Mockup y mostrar imágenes de comida.

Si se quieren calaveras (hay para todos los gustos, se puede usar PlaceSkull:

<img src="http://baconmockup.com/300/200" />
<img src="http://placeskull.com/300/200/" />

Y si nada nos convence, está Lorempixel que genera imágenes aleatorias con opciones diversas:

<img src="http://lorempixel.com/300/200/" /> es una imagen de 300x200
<img src="http://lorempixel.com/g/300/200" /> es una imagen en tonos de gris
<img src="http://lorempixel.com/300/200/sports" /> muestra una imagen de cierta categoría (abstract, animals, city, food, night, life, fashion, people, nature, sports, technics, transport)

Hay muchas opciones más y el sitio posee una herramienta que nos permite generar el código.

REFERENCIAS:paulund.co.uk

DuckDuckGo: Un buscador alternativo en el blog

DuckDuckGo es un buscador alternativo que se va difundiendo poco a poco y que rescata todo eso que tenía Google y ha abandonado desde que se coronó como rey del mundo: la simplicidad, la rapidez y una política de privacidad que implica no recopilar ni compartir información de los usuarios. Quien no lo use, debería probarlo y darle una oportunidad o tenerlo siempre a mano; algo que es bastante sencillo ya que dispone de extensiones para distintos navegadores.

Quien quiera, también puede agregarlo a su blog; para eso, basta abrir la página respectiva y completar los datos:

width: es el ancho de la caja (por defecto 408 pixeles)
Duck logo: nos permite ver (On) u ocultar (Off ) el logo
background color: es el color de fondo donde será agregado
site search: permite escribir la url del sitio donde se quiere buscar si es que deseamos que lo haga en nuestro blog
prefill: es el texto visible de la caja
autofocus: si es On, e cursor se posicionar automáticamente en el buscador apenas se abra la página

El resultado de todo eso puede previsualizarse al efectuar los cambios y nos darán un código simple que podemos copiar y pegar en cualquier elemento HTML, en una entrada o en una página estática; por ejemplo:

<iframe src="http://duckduckgo.com/search.html?width=200&site=http://vagabundia.blogspot.com/&prefill=buscar en DuckDuckGo&bgcolor=171E27" style="overflow:hidden;margin:0;padding:0;width:258px;height:40px;" frameborder="0"></iframe>

Usando imágenes alojadas en Google Drive

Cuando subimos un archivo a Google Drive que NO puede ser editado; por ejemplo, una imagen, un PDF, un video, etc; usar ese archivo en una web se hace engorroso ya que es difícil encontrar la dirección url o, simplemente, no existe y lo único que podemos hacer es enlazarla para que se vea o se descargue desde el mismo servicio.

Pero hay una solución; basta copiar la dirección que se nos muestra cuando visualizamos el archivo:

https://docs.google.com/file/d/0B2BzKCEbdpQcYVRYcjdkV3o1NHM/edit

y tomar nota de ese conjunto de letras y números estrafalarios que suele generar Google para todos sus productos y cambiar la dirección:

http://drive.google.com/uc?export=view&id=0B2BzKCEbdpQcYVRYcjdkV3o1NHM

Así que, en términos genéricos, debemos cambiar

https://docs.google.com/file/d/xxxxxxxxxxxxxxxxxxxxxxx/edit

con:

http://drive.google.com/uc?export=view&id=xxxxxxxxxxxxxxxxxxxxxxx

Por supuesto, esto funcionará sólo si la carpeta y los archivos son públicos, algo que debemos establecer con la opción Compartir.

Aunque comentan que esto sería válido con cualquier tipo de archivo, me temo que la realidad dice lo contrario; lo que sí puede funcionar es establecer la dirección url de descarga directa; el sistema es similar y este es un ejemplo concreto:

http://drive.google.com/uc?export=download&id=0B2BzKCEbdpQcX2g3T1RyN1RZZ00

REFERENCIAS:Google Operating System

Usar Google Drive para alojar sitios web sencillos

Como en Blogger no podemos subir un mísero archivito, en un tiempo, cuando existían las Google Pages, las usábamos a destajo hasta que kaput porque "a los que saben" se les ocurrió crear Google Sites que no era lo mismo aunque ellos creían que si.

Nos quedamos colocados, mudando archivos de lado a lado, buscando alternativas, las encontramos, cada una con sus bemoles pero, acá seguimos.

Ahora, resulta que se les ha ocurrido que podemos usar Google Drive para guardar páginas web completas y, la verdad, yo ya no sé si creerles que esto durará pero, de todos modos, por ahora, ahí está la opción que, imagino, deberá usarse prudentemente.

El procedimiento es sencillo; entramos en Google Drive https://drive.google.com/ y creamos una carpeta nueva. Luego, con botón derecho, hacemos click en Compartir | Cambiar y marcamos que sea Publica:

Ahora, subimos nuestro archivo HTML a esa carpeta, lo editamos y, haciendo click en Vista Previa, copiamos la dirección url que nos muestra que será del tipo:

https://googledrive.com/host/xxxxxxxxxxxxx/nombre_archivo.html

Eso es todo, con esa dirección, podemos mostrarlo donde se nos ocurra, como en este ejemplo que lo abre en una ventana modal:

ver testgd.html

En este caso, el HTML no tiene nada especial, solo código normal, scripts internos y CSS pero, podemos ampliar las posibilidades y utilizar archivos externos que también alojamos en la misma carpeta y a los que accedemos desde el HTML, usando las direcciones url relativas.

Hasta ahí, es una forma sencilla de manejarse aunque no es cómodo que no sea posible crear o editar esos archivos desde el mismo Google Drive salvo que se agreguen aplicaciones externas como Drive Notepad que sólo funcionan en Chrome.

One div: Iconos utilzando sólo CSS

One div es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.

Además, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.

Algunos ejemplos:

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>

<div class="mug_animate"></div>

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}

.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}

.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>

<div class="fir"></div>

<style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

Snaggy: Ctrl+V para guardar imágenes en al web

Snaggy es un servicio web que puede ser usado para guardar y editar imágenes de modo simple copiando tanto desde una página como desde nuestra PC. Para eso, basta usar el atajo del teclado normal Ctrl+V dentro del área que nos muestra el sitio.

Aunque a veces funciona de modo errático, es bastante cómodo. Podemos usar cualquier imagen copiada en el portapapeles, sea esta un PrintScreen clásico, una selección realizada en nuestro editor de imágenes o una imagen completa.

Una vez procesada, nos mostrará el resultado y la dirección URL que podemos compartir en redes sociales y si queremos, también podemos editarla ahí mismo con algunas herramientas sencillas para recortarla, agregarle textos y otros detalles gráficos.

No tiene misterios, basta ir y probar porque no requiere registro de ninguna clase

REFERENCIAS:wwwhatsnew.com

Verificar un blog de Blogger en Pinterest

Según me contaba Roudy Capella, Pinterest ahora permite verificar el sitio web que hayamos agregado en nuestro perfil. Esa opción se realiza mediante un archivo que uno debe alojar en su sitio pero, claro, quienes usan Blogger, aparentemente no pueden hacerlo ya que no hay manera de subir un archivo a un servidor que no existe.

Ellos dicen que por el momento, servicios de blogs quedan excluidos excepto Tumblr y prometen ir agregando otras opciones

Sin embargo, en la misma ayuda, se encuentran enlaces a métodos alternativos para WordPress e incluso para Blogger mismo así que es cosa de probar y ver.

El procedimiento parece algo raro pero funciona así que trataré de mostrarlo paso a paso tal como lo hice por si alguien no entiende inglés que es el idioma original de la ayuda.

Lo primero que debemos hacer es entrar en nuestra cuenta de Pinterest y allí, ir a Configuracióndonde veremos la dirección de nuestro sitio (si lo hemos agregado) y un botón Verificar sitio web:

Hacemos click en el botón y aparecerá una ventana de advertencia donde nos dice que no podremos verificar un dominio de blogspot pero, lo ignoramos y ... click here:

Descargamos el archivo que nos den que tendra como nombre pinterest-xxxxx.html y que será personal por lo que incluirá números y letras diversas:

Y dejamos esa página abierta.

Ahora, nos vamos a Blogger y creamos una página estática nueva a la que le damos cualquier nombre. Abrimos el archivo previamente descargado con cualquier editor como el block de notas, copiamos su contenido y lo pegamos en nuestra nueva página, verificando que estemos en el modo HTML. Luego, publicamos la página y tomamos nota de su dirección url que será algo así:

http://nombre.blogspot.com/p/titulo-de-la-pagina.html

Vamos a la Configuración de Blogger y en el apartado Preferencias de búsqueda, elegimos Redireccionamiento personalizado, Editar.

En el item De: colocaremos la dirección url tal como la esperaría Pinterest que es el nombre del archivo descargado:

/pinterest-xxxxx.html

y en el item Para: colocaremos la dirección url de la página que hayamos creado:

/p/titulo-de-la-pagina.html

y marcamos Permanente, sin olvidar que las direcciones son relativas y comienzan con una barra:

Ya terminamos, podemos volver a la página de Pinterest y decirle que todo esta listo Haz click aquí para completar el proceso; si hicimos las cosas bien, nos dirá que el sitio fue verificado:

Y podremos ver ese dato en nuestro Perfil:

CSSload: Gráficos de carga con CSS

CSSload es un sitio donde podemos generar "imágenes" de carga que no son imágenes sino gráficos creados con CSS, aprovechando de ese modo, las facilidades que nos dan estas nuevas propiedades que nos permiten animar casi cualquier cosa y que funcionan en Firefox, Chrome, Safari y otros navegadores modernos.

No hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón Get code nos mostrará el código necesario para insertarlo en cualquier página web.

Ese código contiene dos partes, el estilo que es todo lo que está entre <style> </style> que podemos agregarlo en una entrada o en la misma plantilla y el HTML que son una serie de DIVs que deberemos ubicar allí donde quisiéramos mostrarlo.

Como no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.

Ver/Ocultar otro ejemplo:

repost.us: Facilitar la inclusión de entradas

Repost.us es un servicio que permite que los visitantes, incluyan entradas de nuestro blog en otros sitios, de manera sencilla y sin los conflictos que suele traer este tipo de copia porque lo hace generando un iframe [más información].

Algunas de las ventajas que dice ofrecer el sistema:

• es un enlace a la entrada original y evita el contenido duplicado.
• si la entrada se actualiza, el servicio actualizará todos los iframes insertados
• se puede personalizar y definir si se verán completos o no
• es posible excluir sitios o permitir que sólo algunos puedan utilizar el sistema
• permite agregar anuncios publicitarios

Para utilizarlo, se debe crear una cuenta gratuita y luego, ir completando las opciones; básicamente, establecer el sitio web donde queremos aplicar el sistema y luego, copiar y pegar el código que os dan que tiene dos partes; la primer, la pondremos antes de <:/head>

<script src='http://static.1.rp-api.com/rjs/repostus.js' type='text/javascript' />
<meta content='0000000000000000000' name='RepostUsAPIKey' />

y la segunda en donde quisiéramos mostrar alguno de los botones disponibles que, normalmente, sería en alguna parte del footer de las entradas:

<a class='rpuRepostUsButton' expr:href='&quot;https://secure.repost.us/syndicate/create?url=&quot; + data:post.url'>
  <img title='Repost This' alt='Repost This' src='http://secure.repost.us/images/button-hrz-sml.png'/>
</a>

El servicio puede agregarse a Blogger sin problemas y quienes usan Wordpress disponen de un plugin que simplifica la tarea.

En general, es conveniente ingresar a la opción llamada Selectors y allí, agregar las clases donde se encuentran nuestras entradas:

Article Title: .post-title
Article Boded .post-body

la siguiente página, nos permitirá verificar si todo es correcto, probando con cualquier URL de nuestro blog.

REFERENCIAS:labrujulaverde.com

shareNice: Una alternativa para compartir entradas

shareNice se presenta como una variante del gadget AddThis con la diferencia de ser de código abierto lo que permite descargarlo y usarlo libremente aunque esto no es necesario ya que también es posible utilizar el script que ellos proveen y por lo tanto, no necesitamos hacer ningún tipo de instalación extra.

La idea es permitir que cada usuario lo adapte a sus necesidades o gustos personales de manera sencilla y, de ese modo disponer de un botón genérico para compartir entradas en las redes sociales.

Hasta ahí todo parece bien y es una alternativa razonable ya que es mucho más flexible que otros sistemas y mucho menos intrusivo pero ... cuando uno trata de probarlo, algo parece fallar en alguna parte; incluso, en algunos de los sitios que ellos mismos sugieren ver para probar sus características, tampoco parece andar. Me da la impresión que lo han armado basándose en algún concepto de diseño erróneo o que no tiene en cuenta las distintas alternativas que puede tener una página web y por lo tanto, ciertas propiedades del CSS que utilizan hacen que las cosas se nos compliquen aunque, bastaría cambiar un par de detalles para hacerlo operativo. En realidad, desconozco si eso es un error en si mismo tal como imagino pero, como usuario, tampoco me importa a sí que me limito a tratar de solucionarlo porque la idea me sigue pareciendo interesante.

Lo usamos fácilmente, bastaría poner esto antes de </head>

<script src="http://sharenice.org/code.js" type="text/javascript"></script>

y luego, poner un DIV allí donde quisiéramos que se mostrara el botón:

<div id="shareNice"></div>

Así, sin opciones extras, veríamos el ícono y al poner el cursor encima, se mostraría la ventana con los íconos por defecto:

Lamentablemente, esa ventana se muestra en cualquier parte así que acá le he agregado dos reglas de estilo; en la primera, le agrego position:relative porque la ventana modal con los íconos tiene definida una posición absoluta y por lo tanto, se abrirá en cualquier parte, dependiendo de cuál sea el contenedor; también le agrego display: inline-block pra que no ocupe todo el ancho y que pueda alinearse con otros contenidos; la segunda regla, cambia las posiciones absolutas de tal modo que la ventana se abra encima del botón:

<style>
  #shareNice {
    display: inline-block  !important;
    position: relative;
  }
  #shareNice-wrapper {
    left: 0 !important;
    top: -35px !important;
  }
</style>

allí, con distintos valores de left y top, podemos ubicarla donde nos guste, teniendo en cuenta que la posición 0 0 es el botón en si mismo.

Ahora, las opciones que se agregan como atributos en el DIV:

data-services es la lista de los dominios de las redes sociales que queremos incluir y se separan con comas
data-share-label nos permite establecer el texto a mostrar o no poner ninguno
data-color-scheme define el color base y puede ser black, blue, green, orange, pink, red o cualquier otro color
data-icon-size es el tamaño el botón y puede ser 16 o 32
data-panel-bottom es el logo inferior, si no queremos que se ve, ponemos plain
data-share-zindex solo lo usaremos para colocar un valor en la propiedad z-index si es que se requiere

Aquí hay un ejemplo concreto:

<div id="shareNice" data-share-label="" data-color-scheme="black" data-icon-size="16" data-panel-bottom="plain" data-services="blogger.com,email,evernote.com,facebook.com,google.com,linkedin.com,plus.google.com,stumbleupon.com,www.tumblr.com,twitter.com">
</div>

Nunc non faucibus urna.

Sed nec risus eu risus amet

¿Cuáles son los dominios a poner? ¿Dónde está la lista? Acá algunos de los que encontré y vi que funcionaban; hay más pero los desconozco:

bit.ly,blogger.com,delicious.com,digg.com,email,evernote.com,facebook.com,google.com,linkedin.com,myspace.com,plus.google.com,reddit.com,stumbleupon.com,www.tumblr.com,twitter.com

Codigos QR en colores

¿Se puede generar un código QR que no sea blanco y negro? Eso propone la herramienta de unitag.

¿Servirá? ¿Será legible? Ni idea pero, crearlo es fácil, hay que entrar en el sitio y comenzar a definir los parámetros; el tipo de dato a agregar (un texto, una dirección web o de email, etc); luego, lo diseñamos seleccionando colores, sombras, tamaño y calidad. Finalmente, descargamos la imagen en formato PNG y ya podemos agregarla a cualquier página.

Recomiendan usar contrastes de color importantes y obviar opciones como "agregar logo" ya que de lo contrario, no funcionará. Para quien esté interesado, todos esos detalles son explicados en una página de ayuda del mismo sitio.

REFERENCIAS:labnol.org

Textify: Imágenes transformadas en textos

Textify es una idea extraña pero divertida; convierte cualquier imagen que arrastramos o subimos, en otra, donde sólo se utilizan caracteres de texto.

El servicio es realmente rápido y posee un panel con una serie de opciones que podemos elegir e ir viendo el resultado para, finalmente, poder descargar neustra obra de arte en formato PNG.

REFERENCIAS:webappers.com

El gadget de PostRank

PostRank es un servicio de estadísticas orientado a las redes sociales que fue adquirido por Google a mediados de este año y por lo tanto, está en pleno cambio. Entre esos cambios han incluido la posibilidad de agregar un gadget que muestra una lista con las entradas más populares de cualquier blog ... o lo que ellos han evaluado como más populares, claro.

Para quien le gusten estas cosas, basta entrar en la página correspondiente, configurar las opciones y luego, copiar y pegar el código que nos dan, allí donde queramos que se vea.

Quienes usen Wordpress, también disponen de un plugin que hace exactamente lo mismo.

Como el el gadget se adapta al ancho del contenedor donde será insertado, tal vez convenga que se incluya todo el código en un DIV que puede ser dimensionado y centrado; por ejemplo:

<div style="margin:0 auto;width:350px;">
  <!-- y acá pegamos el código que nos dan -->
</div>

Powered by Postrank

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

hiperurl: Un enlace para múltpes direcciones

hiperurl.com es unsitio que nos permite generar una dirección URL combinada, es decir, una dirección web que contendrá varios enlaces distintos.

No requiere registro de ninguna clase así que basta entrar al sitio y agregar hasta un máximo de cinco direcciones, hacer click en Generar enlace y voilá, nos mostrará la dirección que será de tipo:

http://hiperurl.com/?s=XXX

Y que podemos podemos poner en cualquier enlace como este que nos llevará a una página especial:

Eso es todo.

REFERENCIAS:wwwhatsnew.com

Twitvid: Alojar imagenes y videos sin problemas

El servicio de Twitvid me ha gustado porque es sencillo de usar y no parecen andar molestando con restricciones a la hora de subir videos ya que se trata de eso, un sitio que nos permite subir fotos o videos y para utilizarlo, no hace falta crear una cuenta o registrarse, basta entrar utilizando nuestra cuenta de Twitter o Facebook.

Hecho eso, simplemente tendremos todo disponible y unas pocas opciones de configuración incluyendo la posibilidad de establecer cierta privacidad en eso que subimos ¿Limitaciones? Sólo en el tamaño de los videos que pueden tener hasta un máximo de 2GB.

El servicio, funciona tanto en una PC como en distintos móviles e incluso en ciertos clientes como Echofon además de admitir que podamos enviar imágenes o videos vía email o SMS.

Cada usuario posee su propia página donde puede ver las estadísticas y editar o eliminar eso que ha subido; establecer títulos, descripción, categoría, etiquetas o seleccionar el thumbnail a mostrar.

Al subir un archivo podemos decidir si queremos que se envíe como tweet o se publique en nuestro perfil o page de Facebook. Esto no es obligatorio, simplemente, podemos desmarcar esas opciones y luego, usar la URL que ellos nos proveen o incrustar el reproductor en cualquier página web copiando y pegando el código correspondiente.

Para quien quiera hacer experimentos, posee un API pública bastante bien documentada.

Para los simples mortales, incluye la posibilidad de insertar un gadget animado; un SWF que muestra los últimos videos publicados.

Proteger Facebook y Twitter con Bitdefender

Bitdefender es un conocido anti-virus que incluye versiones gratuitas y no gratuitas, además de otros servicios de seguridad como la posibilidad de scanear la PC online. A esto, se le había sumado un servicio extras llamado Safego que también es gratuito y que nos permiten proteger nuestra cuenta de Facebook.

Tal como dicen en SpamLoco, la aplicación trabaja en segundo plano y no molesta en absoluto.

Ahora, ghacks.net anuncia la llegada de un servicio más para ser agregado a Twitter.

Como en el caso anterior, basta ir a la página darle autorización y listo. Una vez dentro, podremos configurar las alertas, analizar a quienes seguimos y mantenernos razonablemente seguros.

Botón para compartir de StumbleUpon

Los botones contadores de las redes sociales están de moda. Este es el de StumbleUpon.

Para crearlo, ingresamos a esta página, seleccionamos uno de elos modelos disponibles y listo, copiamos el script y lo pegmos allí donde nos guste:

<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script>

Todos son iguales, lo único que se modifica es el parámetro s=X que varía entre 1 y 6 dependiendo del tipo de botón elegido.

En principio, no hace falta nada más porque el script detecta automáticamente la página pero, si eso no ocurriera, podría modificar de de este modo:

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/>

Compartir y visualizar archivos con Dropdo

Dropdo es un servicio interesante ya que, a diferencia de otros que nos permiten compartir archivos, también nos da la opción de verlos sin necesidad de tener un programa instalado, algo que suele ser un problema sobre todo cuando se trata de documentos poco usuales.

Esta limitado a un máximo de 25MB por archivo y soporta imágenes (incluyendo las creadas con Photoshop, Illustrator o formatos como EPS y SVG); videos de diferente tipo, audio, documentos de Office u Open Opffice, PDFs, archivos de PowerPoint, RTFs, archivos de texto o conteniendo códigos, etc.

Todos los archivos pueden ser descargados o compartidos en Twitter y Facebook y no requiere registro alguno.

Además, ofrecen dos extensiones, una para Firefox y otra para Chrome que facilitan las cosas a la hora de subir archivos, agregando una opcion extra en el menú contextual.

Curiosamente, en los términos de uso, dicen que permiten el hotlinking de cualquier archivo lo que significa que podemos enlazarlos directamente desde cualquier página web y sólo piden que ... se haga con prudencia.

REFERENCIAS:Himsomnio

Botón para enviar a Kindle

Readability posee varios servicios gratuitos que permiten enviar páginas web a Kindle, el lector de ebooks. El primero es una extensión para Firefox que agrega un botón al navegador en el cual basta hacer click para enviar la página formateada. Esto, puede ser probado online en esta dirección.

El segundo, es un botón que puede ser insertado en cualquier página web y que permite que los visitantes guarden cualquier entrada en su propio sistema. Sólo basta copiar el código y pegarlo donde quisiéramos que se muestre:

<div class='rdbWrapper' data-show-send-to-kindle="1" data-show-read="0"></div>
<script type='text/javascript'>
(function() {
  var s = document.getElementsByTagName('script')[0],
  rdb   = document.createElement('script');
  rdb.type  = 'text/javascript';
  rdb.async = true;
  rdb.src   = document.location.protocol + '//www.readability.com/embed.js';
  s.parentNode.insertBefore(rdb, s);
})();
</script>

REFERENCIAS:labnol.org