tubePlayer: Nueva versión del reproductor

Como este es un reproductor que me gusta mucho y ha salido una actualización, vuelvo a comentarlo.

tubePlayer es un reproductor de vídeos de Youtube independiente, creado por unijimpe, muy liviano y sencillo de utilizar.

La nueva versión incluye opciones de autoplay, volumen por defecto, posibilidad de desplazarse a cualquier parte del video, previsualización de la imagen, mensajes de error cuando el video esta bloqueado o ha sido eliminado, pantalla completa y además, elimina la publicidad y las anotaciones que son tan molestas.

Descargamos el ZIP desde la página del autor y al descomprimirlo, nos encontraremos con un demo y el archivo newtubeplayer.swf que es el único que necesitamos alojar en algún servidor: Google Sites, Filede DropBox o cualquier otro que nos guste.

De aquí en más, tenemos varias opciones para utilizarlo. La más simple es agregarlo como cualquier otro archivo SWF; allí donde queremos ver el video, ponemos las etiquetas correspondientes:

<object width="510" height="320" type="application/x-shockwave-flash" data="URL_tubeplayer.swf">
  <param name="movie" value="URL_tubeplayer.swf" />
  <param name="FlashVars" value="videoId=XXXXXXXXXXX" />
  <param name="allowFullscreen" value="true" />
</object>

donde:

• en width y height colocamos el tamaño deseado
• reemplazamos URL_tubeplayer.swf por la URL del archivo que hayamos alojado
• y colocamos en XXXXXXXXXXX el ID del video a reproducir

Para quien nunca lo haya hecho, el ID de un video de YouTube es ese conjunto de once caracteres que se muestra tanto en la página del video como en los códigos que nos dan para insertarlos; por ejemplo:

http://www.youtube.com/watch?v=NdkzQ5_Sv_8
http://www.youtube.com/watch?v=wb4RauhteFA&feature=list_related&playnext=1
http://www.youtube.com/v/NdkzQ5_Sv_8?fs=1&hl=es_ES&rel=0

Si queremos agregarle alguna opción extra, colocamos los parámetros uno al lado del otro, separándolos con el caracter &:

<param name="FlashVars" value="videoId=NdkzQ5_Sv_8&autoPlay=true&volume=100" />

Si tenemos instalada la librería SWFObject, podríamos incluir el reproductor con JavaScript:

<div id="divmovie">tubePlayer</div>
<script type="text/javascript">
  swfobject.embedSWF("URL_tubeplayer.swf", "divmovie", "510", "320", "9", "",
  {videoId: "XXXXXXXXXXX"}, {allowFullscreen: "true"});
</script>

Eso no es muy práctico ya que habría que escribirlo en cada video que quisiéramos mostrar pero podemos mejorarlo, creando una función que colocaríamos antes de </head>;

<script type='text/javascript'>
//<![CDATA[
function videoyoutube(id) {
  document.write ("<div id='" + id +"'>tubePlayer</div>");
  swfobject.embedSWF("URL_tubeplayer.swf", id, "510", "320", "9", "", {videoId: id,volume:"100"}, {allowFullscreen: "true",menu: "false",quality: "high",wmode: "transparent"});
}
//]]>
</script>

y la llamamos, colocando esto donde vamos a mostrar el video, por ejemplo, en un post:

<script> videoyoutube("XXXXXXXXXXX") </script>

Si no tenemos la librería instalada, no importa; algo similar puede hacerse sin ella:

<script type='text/javascript'>
//<![CDATA[
function videoyoutube(id) {
  document.write ("<div id='" + id +"'>  tubePlayer </div>");
  var salida = "<object type='application/x-shockwave-flash' height='320' width='510'";
  salida += "data='URL_tubeplayer.swf'>";
  salida += "<param name='movie' value='URL_tubeplayer.swf'>";
  salida += "<param name='FlashVars' value='videoId=" + id + "' />";
  salida += "<param name='allowFullscreen' value='true' />";
  salida += "</object>";
  document.write (salida);
}
//]]>
</script>

REFERENCIAS:unijimpe.net

Para continuar con sus cambios de cara, Twitter ha actualizado los botones y widgets que podemos agregar en nuestra web.

Por un lado están los botones simples que se agregan al Twittear lanzado hace poco y que parece haber logrado la estabilidad que antes no tenia. A eso le han sumado logos oficiales que antes no tenían

• Widget de perfil que mistrará nuestros propios tweets en cualquier página
• Widget de búsqueda que muestra en tiempo real, tweets conteniendo determinada combinación de palabras
• Faves Widget con los tweets favoritos mostrados en tiempo real
• Widget para listas para mostrar las listas que hayamos creado.

REFERENCIAS:todoTwitter

Esta es una forma sencilla de mostrar un fondo diferenciado en ciertos párrafos, cuando se coloca el cursor del ratón encima de ellos.

• Sed sagittis arcuMorbi consectetur orci at nibh viverra eget bibendum risus dictum. Nulla consequat quam arcu. Nullam euismod pharetra diam et ultricies? Aenean convallis scelerisque velit, et vehicula turpis consectetur et.

La idea básica es utilizar la posibilidad que nos dan los enlaces pero, en realidad, en cualquier navegador moderno, lo mismo puede lograrse sin recurrir a ellos ya que la mayoría de las etiquetas aceptan :hover.

Primero, las definiciones de estilo:

a.button:link, a.button:visited { /* cada párrafo es un enlace */
background: transparent url(URL_imagen) no-repeat 20px 40px;
display: block;
text-decoration: none;
margin: 20px auto;
padding: 10px 20px 10px 100px;
width: 500px;
}
a.button:hover { /* el enlace cambia de estado al poner el cursor encima */
background-color: #FFEBCD;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
span.title { /* el título del párrafo */
color: #F08;
display: block;
font-size: 18px;
}
span.text { /* el contenido del párrafo */
color: #999;
font-family: Arial;
font-size: 15px;
line-height: 1.5em;
}
ul.demohover { /* usaremos una lista para contener los enlaces */
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}

Y lo aplicamos a una lista ordenada:

<ul class="demohover">
<li>
<a href="#" class="button" onclick="return false;">
<span class="title"> ... el título ... </span>
<span class="text"> ... el contenido ... </span>
</a>
</li>
.......
</ul>

• Condimentum quam elementumCurabitur venenatis, nisl at scelerisque aliquet, ipsum quam rutrum enim; ac euismod tortor arcu quis orci. Nunc vitae augue augue. Integer nec orci ut neque sagittis laoreet. Sed id ante sit amet neque aliquet volutpat.
• Eget cursus tortor posuereVivamus suscipit nisi sed libero accumsan et dictum sem pretium. Aliquam quis lectus eget lorem fermentum fermentum. Integer convallis; libero et feugiat venenatis; ligula dolor mollis urna, et lacinia tortor mauris quis erat.

REFERENCIAS:impressivewebs.com

Calaveras, brujas, terror, el especial de los Simpsons ... un gran negocio que se extiende de norte a sur y que nos vuelve un poco más zombies de lo que éramos.

Sea como sea, ¿colaboro? con estas fechas y acá va un gif animado de esos que uno sabe si está muy bien hechos o si son un poco exagerados.

No. Asustar no asusta pero, cualquier cosa, puedo gritar BUUUUUUUUU y listo.

REFERENCIAS:haha.nu

Facebook Insights es la página de estadísticas donde Facebook nos da información sobre las páginas creadas pero también es posible utilizarlo para hacer un seguimiento de las interacciones con otros sitios.

Para eso, debemos agregar el dominio a seguir y copiar y pegar la etiqueta META que nos dan, en alguna parte, del head de nuestra plantilla:

<meta content='1234567890' property='fb:admin' />

Una vez verificado, podemos enlazar los reportes a nuestro Perfil o a cualquier página de Facebook que tengamos.

Valores extremadamente altos, fuentes enormes, bordes "excesivos"; todo es válido a la hora de intentar variantes y usar el CSS al máximo, sin temores, sin prejuicios, sin ideas preconcebidas. El resultado será incierto, espantoso, bello, dependerá de gustos y de cada caso en particular pero, probar no cuesta nada.

simurai hace eso, juega con las posibilidades y si bien algunos como Flash Light solo funcionarán en ciertos navegadores, vale la pena verlos.

Uno muy simple es I love Text Blur que simplemente muestra la forma de generar ese efecto de esfumado sobre un texto con letras de tamaño gigante utilizando la propiedad text-shadow ... sí, ya sé, es una propiedad que Internet Explorer no posee y si bien hay un filtro específico, no es lo mismo pero igual, trataremos de hacer algo que no sea exactamente igual pero no importa.

♥abc

<style type="text/css">
#blur {
color: transparent;
font-size: 240px;
font-style: normal;
font-weight: bold;
line-height: 1;
text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;
text-align:center;
/* una combinación de filtros para IE ... no, no será lo mismo */
filter: progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,Strength=15) progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
}
#blur:hover {
color: #FFF;
}
#blur:span {
color: #AA0000;
font-size: 150px;
vertical-align: super;
}
</style>

<div id="blur">
<span>&hearts;</span>abc
</div>

Siempre que me preguntan dónde alojar las imágenes, respondo: en Blogger, y respondo eso porque es lo que hago aunque no es lo que hice siempre.

Supongo que como todos, cuando vemos que la capacidad de almacenamiento de imágenes en una cuenta es limitada, pensamos uhhhhhh ¿y si se llena? ¿qué hago? De ahí, entonces, que uno busque alternativas y la verdad, el remedio siempre fue peor que la enfermedad; no es que esos otros servicios no funcionen pero en ImageShack las imagenes suelen desaparecer, en Photobucket las borran porque violan alguna condición de uso, otros cierran y goodbye y todos, de una u otra forma, limitan el acceso dando un cierto ancho de banda que no parece ser problema cuando se trata de nuestro blogcito pero, hay algunos que en lugar de tomarse el trabajo de descargar las imágenes y alojarlas en sus propios sitios, hacen un hotlink a las muestras y ese ancho de banda desaprece en un abrir y cerrar de ojos con lo cual, nuestro sitio se adorna de bellos carteles de advertencia.

En realidad, el problema no es que el remedio fuese del todo malo sino que lo que ocurre es que no existe enfermedad ¿Será que 1GB de espacio disponible para alojar imágenes es escaso? Pués, a decir verdad, salvo que se trate de blogs muy especiales, es espacio más que suficiente. En mi caso, luego de más cuatro años y más de cinco mil imagenes subidas, no alcancé a utilizar el 25% de ese espacio:

Sabemos que las imágenes que subimos a Blogger se alojan en una cuenta de Picasa y eso tiene un punto en contra, las URLs que nos dan son disparatadas pero, a la vez, tiene un punto a favor que alguna vez comenté y que vuelvo a explicar porque al parecer, algo ha cambiado.

Cuando hace tiempo hablaba de las miniaturas de Blogger mostraba como, subiendo una imagen cualquiera, podíamos cargar una serie de miniaturas que se generaban automáticamente y que es eso que nos muestra el editor cuando nos pregunta por el tamaño de la imagen. En ese momento, hablaba de una serie de valores que podíamos utilizar y en los comentarios, otros usuarios ampliaban la lista con otros tamaños disponibles.

Vamos a un ejemplo simple para quien nunca lo ha intentado. Subimos la imagen a Blogger, se agrega un código y si miramos el HTML, en el atributo SRC de la etiqueta IMG, veremos la dirección URL de la imagen; algo así:

http://xxx.blogspot.com/xxxxxxx/xxxxxxx/s320/nombre.ext

donde nombre.ext es el nombre y extensión de la imagen que subimos, por ejemplo: dibujo.jpg

Justo a la izquierda del nombre, veremos siempre un dato, aquí dice s320 pero podría decir cualquier otra cosa similar: s200 s400 s1600; ese es el dato que nos indica el tamaño de la miniatura y basta cambiarlo para que nos muestre la misma imagen pero, con otro tamaño.

Lo interesante de esto es que Blogger/Picasa nos envia la imagen con ese tamaño, son ellos quienes la generan y por lo tanto, lo que cargamos no es la imagen original redimensionada con CSS o con los atributos width y height lo que significa que no solo la vemos de ese tamaño sino que ES de ese tamaño así que si subimos una imagen enorme y queremos mostrar una miniatura, basta colocar el valor en ese dato.

En todos los casos, la imagen original se encuentra de varios modos pero, para simplificar, podemos decir que está siempre en s000 y lo novedoso (novedoso para mi) es que ya no estamos limitados a una cantidad de miniaturas predeterminadas sino que podemos colocar cualquier valor; para eso, simplemente, cambiamos ese dato con la letra s seguida del valor:

http://......./s000/nombre.ext será la imagen original
http://......./s103/nombre.ext será la misma imagen pero de 103 pixeles
http://......./s477/nombre.ext será la misma imagen pero de 477 pixeles

Puedo poner cualquier valor ¿Cuál es el valor más bajo? el 1 y veremos un punto; ¿cuál es el valor más alto? no tengo idea pero, si ponemos un valor superior al tamaño original, nos mostrará el original.

Esto, es válido tanto para las imágenes subidas a Blogger como a las subidas a un album de Picasa, en ambos casos el sistema es el mismo. Estas dos imágenes; la primera tiene un tamaño original de 536x800 y la segunda de 1024x768:

Tamaño original: 536x800

Tamaño original: 1024x768

¿A qué se refiere ese valor? ¿es el ancho o es el alto? Depende de  la imagen; el valor es el valor máximo de ambos datos; si la imagen es más ancha que alta, el valor es el del ancho, si es más alta que ancha, el valor es el del alto.

100 | 200 | 300 | 400 | 500 | 600
Tamaño original: 600x840

Moraleja: cuando pregunten ¿dónde alojar las imágenes? seguiré contestando lo mismo, sin la menor duda.