Cómo usar el reproductor negro de YouTube

Según anuncian en su página oficial, en los próximos días, YouTube comenzará a darnos la opción de seleccionar entre dos tipos de reproductores a insertar; el que vemos ahora y el nuevo que es de color negro.

Esto, ya es algo que podemos aplicar directamente porque sólo es necesario agregar el parámetro correspondiente en el código que, como todos los otros, se adosa a la URL del video:

theme=light mostrará el reproductor "normal"
theme=dark mostrará el nuevo reproductor

<iframe src="http://www.youtube.com/embed/XXXXXXXXXXX?theme=dark" frameborder="0" width="575" height="350"></iframe>

La opción es aplicable tanto al nuevo código con IFRAMES como al tradicional que utiliza la etiqueta OBJECT aunque, en este último caso, es conveniente que también agreguemos el parámetro de la nueva versión:

<object width="575" height="350" id="movie" type="application/x-shockwave-flash" data="http://www.youtube.com/v/XXXXXXXXXXX&theme=dark&version=3">
<param name="movie" value="http://www.youtube.com/v/XXXXXXXXXXX&theme=dark&version=3" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object>

Aparentemente, existirá otro parámetro extra que definirá el color de ciertos sectores pero, por ahora, no parece estar funcionando: color=red o bien color=white.

Este es un ejemplo de transiones que se aplican de modo diferente cuando colocamos el cursor encima del botón y cuando lo quitamos con lo que se genera una animación sin necesdad de utilizar JavaScript.

El concepto es simple y puede ser aplicado a cualquier elemento, basta poner un tipo de transición en la regla de estilo del enlace y otra en la del efecto hover:

#ejemplo {
  border-radius: 5px;
  padding: 10px;
  -moz-transition: padding 2s;
  -webkit-transition: padding 2s;
  -o-transition: padding 2s;
}
#ejemplo:hover {
  border-radius: 15px;
  padding: 20px;
  -moz-transition: border-radius 2s;
  -webkit-transition: border-radius 2s;
  -o-transition: border-radius 2s;
}

ejemplo

Usando esta idea, en css-tricks.com lo han llevado hasta el ímite, generando un código no apto para quienes les gustan las cosas simples:

<style>
  #buttonwrap {
    margin: 0 auto;
    text-align: center;
    width: 600px;
  }
  #button {
    -moz-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -moz-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
    -webkit-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
    -o-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box; 
    background-image: -moz-linear-gradient(center top , #5BE93A, #278312);
    -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312));
    border: 5px solid #AEFBAE;
    border-radius: 25px;
    color: #FFF;
    display: block;
    font-family: Tahoma;
    font-size: 60px;
    font-weight: 300;
    margin: 80px auto;
    padding: 60px 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 5px 3px 1px rgba(0, 0, 0, 0.5);
    width: 150px;
    z-index: 1;
  }
  #button:hover {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
    -webkit-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
    -o-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
    background-image: -moz-linear-gradient(center top , #5BE93A, #5BE93A, #278312);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312));
    padding: 70px 30px;
    top: -10px;
  }
  #button:after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }
  #button:before {
    -moz-transition: all 0.2s ease 0s;
    -wekit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    border-radius: 35px;
    bottom: -30px;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset;
    content: "";
    left: -30px;
    position: absolute;
    right: -30px;
    top: -30px;
    z-index: -2;
  }
  #button:hover:before {
    bottom: -20px;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.2) inset;
    left: -20px;
    right: -20px;
    top: -20px;
  }
  #button:active {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) inset;
  }
</style>

<div id="buttonwrap">
  <a href="#" id="button">CSS3</a>
</div>

CSS3

ThemeShock Credit Cards Icons
	Contiene 48 íconos de 24x24, 32x32, 48x48 y 64x64, en formato PNG. descargar

Textured Iconset
	Contiene 44 íconos de 32x32, en formato PNG. descargar

Glossy
	Contiene 408 íconos de 32x32, 48x48, 64x64, 128x128, 256x256 y 512x512, en formato PNG. descargar

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'/>

Para quien tiene un blog en Blogger, las URLs generadas por el sistema son de poca importancia ya que no las controlamos más allá del título que tenga una entrada.

http://vagabundia.blogspot.com/2011/03/se-viene-un-nuevo-blogger.html

Aunque a veces,el resultado parece algo confuso porque ciertas búsquedas nos muestran una URL de este tipo:

http://vagabundia.blogspot.com/2011/03/se-viene-un-nuevo-blogger.html#uds-search-results

Cualquiera de ambas muestra lo mismo así que vaya uno a saber el uso interno que le da Blogger a eso sin embargo, pensando en que, al parecer, el sistema ignora esa parte se me ocurría que tal vez podría utilizarse eso para generar páginas estáticas dinámicas de alguna clase.

¿Que es una página dinámica? En realidad un blog es un conjunto de páginas dinámicas ya que no existe una archivo físico real de cada entrada de nuestro sitio sino que este se va armando con pedacitos de información guardada en una base de datos y el resultado final se muestra de alguna manera, tal como lo hemos decidido en eso que llamamos plantilla.

Entonces. más que páginas dinámicas debería decir URLs dinámicas que son esas en donde lo que se mostrará depende de ciertos datos enviados. Probablemente, sin darnos cuenta, accedemos a cientos de ese tipo de direcciones; por ejemplo:

http://www.youtube.com/watch?v=8wHG8U0fa1Q
http://www.google.com/?q=URL#sclient=psy&hl=es&q=URL&btnG=Buscar+con+Google

Lo dinámico es todo aquello que está después del signo ? y cada dato transferido tiene un nombre, un signo = y un valor cualquiera; lo más común es algo así:

http://misitio.com/mipagina.php?id=1234
http://misitio.com/mipagina.php?id=1234&cat=56

Eso es algo que se puede hacer con ciertos lenguajes avanzados como php, asp, cfm, etc que le indican al servidor que procesa los datos, que arme una página, siempre la misma, pero con contenido variable; si el id es 1234 me mostrará tal cosa y si es 7982 se mostrará otra.

Eso es un blog. Así funciona aunque no sea evidente para nosotros y la URL se "disfrace" un poco haciendola más "amigable".

La idea entonces es hacer lo mismo con el único lenguaje posible que acepta Blogger y que es JavaScript; de esa forma, como la cantidad de páginas estáticas está limitada a 10 como máximo, si lo que necesito es tener más y el contenido será más o menos "repetitivo", podría tener una única página, con un esquema modelo y usar "URLs dinámicas" para mostrar contenidos diferentes:

http://miblog.blogspot.com/p/mipaginadinamica.html
http://miblog.blogspot.com/p/mipaginadinamica.html?var=1
http://miblog.blogspot.com/p/mipaginadinamica.html?var=2
http://miblog.blogspot.com/p/mipaginadinamica.html?var=3

Veamos cómo se podría hacer esto y luego veremos para qué podría usarse ... cosa que aún estoy pensando ...

Necesito un script que coloco antes de </head> que esté condicionado para que sólo se ejecute en las páginas estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script>
//<![CDATA[

function crearpaginadinamica() {
  // leo la dirección URL de la página
  var dondeEstamos  = window.location.href.replace(/&/g, '&');
  // en esa dirección, busco ese valor que en este caso llamé var
  var buscarVAR=dondeEstamos.lastIndexOf('?var=');

  // si no existe, simplemente termino y Blogger mostrará la página estática normal
  if(buscarVAR==-1) { return; }

  // si existe, extraigo el dato enviado que es en este caso, es un número
  var num = 0;
  num  = parseInt(dondeEstamos.substring(buscarVAR+5));
  // sumo cinco porque ?var= tiene cinco caracteres y leo lo que está después del signo =

  // en mi ejemplo, voy a ocultar el contenido por defecto
  document.getElementById("contenidoxdefault").style.display="none";

  var salida = "";

  // como cualquiera podría escribir cualquier número no contemplado, verifico que yo haya creado un contenido y en este caso son siete variantes
  if(num<1||num>7) {

    // el número es erróneo ya que no está entre el 1 y el 7 así que muestro ese error
    salida += "<img src="http://ipsumimage.appspot.com/600x350?s=40&l=no%7Cexiste&b=000000&f=ffffff" />";
  
} else {
    
// todo está OK así que armo mi página y aquí es donde las variaciones son infinitas y dependerá de lo que quiera hacer
    // en este ejemplo, se muestra una imagen y se arma la página con ciertos colores

    // una lista de siete colores
    bgcolores=new Array("EA6464","9080AD","896F6B","A59654","8EA2AD","98AF5D","5DAF89");

    // muestro una imagen
    salida += "<img src="http://ipsumimage.appspot.com/600x350?s=200&l=%22%20+%20String%28num%29%20+%20%22&b=%22+%20bgcolores[num-1]%20+%20%22&f=ffffff" />";

    // cambio los colores de ciertas propiedades
    var colorbase = "#" + bgcolores[num-1];
    document.getElementById("titulo").style.color = colorbase;
    document.getElementById("pd"+String(num)).style.borderColor = colorbase;
    document.getElementById("pd"+String(num)).style.color = colorbase;
    document.getElementById("pd"+String(num)).style.boxShadow = "0 0 5px " + colorbase + " inset";
  }

  // por último, escribo el contenido y lo muestro
  document.getElementById("contenido").innerHTML = salida;
  document.getElementById("contenido").style.display="block";
}

//]]>
</script>
</b:if>

Aunque sólo es una demostración la página estática dice esto:

<div id="dinamica">

  <!-- EL TITULO -->
  <h5 id="titulo">ejemplo de página dinámica</h5>

  <!-- LO QUE SE VE POR DEFECTO -->
  <div id="contenidoxdefault" style="display:block;">
    <img src="http://ipsumimage.appspot.com/600x350?s=40&amp;l=pagina|normal&amp;b=000000&amp;f=ffffff">
  </div>

  <div id="contenido" style="display:none;">
    <!-- AQUI SE MOSTRARA EL CONTENIDO VARIABLE -->
  </div>

  <!-- LANAVEGACION INFERIOR -->
  <div id="nav">
    <h6>probar otra</h6>
    <ul>
      <li><a id="pd1" href='/p/dinamica.html?var=1' >1</a></li>
      <li><a id="pd2" href='/p/dinamica.html?var=2' >2</a></li>
      <li><a id="pd3" href='/p/dinamica.html?var=3' >3</a></li>
      <li><a id="pd4" href='/p/dinamica.html?var=4' >4</a></li>
      <li><a id="pd5" href='/p/dinamica.html?var=5' >5</a></li>
      <li><a id="pd6" href='/p/dinamica.html?var=6' >6</a></li>
      <li><a id="pd7" href='/p/dinamica.html?var=7' >7</a></li>
    </ul>
  </div>
</div>

<!-- Y EJECUTO LA FUNCION -->
<script>crearpaginadinamica();</script>

Cualquier variante es posible de armar cambaindo eso que uno quiere mostrar; por ejemplo, si fueran videos de YouTube podría enviar como dato su ID que siempre es un texto de 11 caracteres:

<li><a href='/p/youtube.html?id=xFa2_PVMeDQ'> video 1 </a></li>
<li><a href='/p/youtube.html?id=Xjf1GP76KIo'> video 2 </a></li>

El script es similar, fundamentalmente, cambio eso que se mostrará:

function crearpaginadinamica() {
  var dondeEstamos  = window.location.href.replace(/&/g, '&');
  var buscarID=dondeEstamos.lastIndexOf('?id=');
  if(buscarID==-1) { return; }
  var ytid;
  ytid  = dondeEstamos.substring(buscarID+4);
  document.getElementById("contenidoxdefault").style.display="none";
  var salida = "";
  salida += "<div style='text-align: center;'>";
  salida += "<object width='600' height='380' type='application/x-shockwave-flash' data='http://www.youtube.com/v/" + ytid + "&hl=es&fs=1&rel=0&autoplay=1&showsearch=0&showinfo=0'>";
  salida += "<param name='movie' value='http://www.youtube.com/v/" + ytid + "&hl=es&fs=1&rel=0&autoplay=1&showsearch=0&showinfo=0' />";
  salida += "<param name='wmode' value='transparent'/><param name='allowfullscreen' value='true'/><param name='allowScriptAccess' value='always' /></object></div>";
  document.getElementById("contenido").innerHTML = salida;
  document.getElementById("contenido").style.display="block";
}

Los códigos QR (Quick Response Barcode) se han ido transformando en algo común, muy usado en teléfonos móviles ya que ayuda a navegar de manera más segura (más información)

Hay muchos sitios que permiten crearlos y agregarlos a nuestras páginas pero, una de las herramientas más simples y flexibles es el editor de Google Chart. Allí, seleccionamos el tipo QrCode en Chart type y luego, establecemos las opciones (tamaño, color de fondo, opacidad, márgenes y, por supuesto, el texto que, por ejemplo, puede ser la dirección URL de nuestro blog.

El resultado, será una etiqueta IMG que podemos copiar y pegar o bien una dirección URL.

<img src='http://chart.apis.google.com/chart?chs=100x100&amp;cht=qr&amp;chld=|0&amp;chl=http%3A%2F%2Fvagabundia.blogspot.com%2F' width='100' height='100' />

Sabiendo que cualquier modificación posterior la podemos hacer directamente en ese código, es fácil crear un código QR para cada entrada de nuestro blog ya que sólo es necesario modificar la URL y esto, lo podemos hacer en la plantilla, ya sea, agregándolo como cualquier otro botón, en el footer de las entradas:

<img expr:src='&quot;http://chart.apis.google.com/chart?chs=100x100&amp;cht=qr&amp;chld=|0&amp;chl=&quot; + data:post.url' height='100' width='100'/>>

Lo mismo puede hacerse en cualquier otra parte de la plantilla, cambiando el dato por data:blog.url

<img expr:src='&quot;http://chart.apis.google.com/chart?chs=100x100&amp;cht=qr&amp;chld=|0&amp;chl=&quot; + data:blog.url' height='100' width='100'/>

Simple Blogger es un soft interesante y práctico para quien quiera publicar entradas en su blog sin demasiadas complicaciones.

Se trata de un programa portable (no requiere ser instalado) que funciona tanto en Windows como en Linux; lo descargamos desde SourdeForge, y lo descomprimimos donde se nos ocurra tenerlo, ya sea esto una PC de escritorio o una unidad USB.

Al abrirlo, nos mostrará una interfaz muy liviana con un menú sencillo donde, lo primero que debemos hacer es ir a Edit y seleccionar Add blog. Una vez que autorizamos el acceso, en el mismo menú, Blog Select, veremos la lista de blogs de nuestra cuenta y podremos seleccionar en cuál trabajaremos.

El editor en si mismo sólo posee seis botones, formatear en negrita, itálica, subrayado, agregar enlaces, imágenes o blockquotes. Cuando se hace click sobre ellos, se insertan las respectivas etiquetas y lo que vemos es el código fuente HTML que puede ser modificado, agregando atributos u otras etiquetas sin restricciones.

Arriba, colocamos el título y a la derecha tenemos la opción de añadir etiquetas. Una vez que estamos listos, hacemos click en Post y listo, la entrada es publicada inmediatamente y sin problemas.

REFERENCIAS:Blogtecnia