Código para que nos enlacen (sin JQuery)

JMiur [E]

Como muchos no usan JQuery, me han preguntado si es posible usar algo similar al código para que nos enlacen sin librerías o con cualquier librería, es decir, sólo con JavaScript.

Como la idea es muy simple y está muy bien armada, es fácil convertirla. Bastaría usar este otro script:

<script type='text/javascript'>
//<![CDATA[
function misBanners() {
lista = document.getElementById("listaBanners");
codigo = document.getElementById("codigoBanner");
ejemplo = document.getElementById("ejemploBanner");
var graphicFileName = lista.options[lista.selectedIndex].getAttribute("rel");
var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
codigo.value = newCode;
ejemplo.innerHTML = newCode;
}
//]]>
</script>

El código HTML es prácticamente igual, sólo agregamos el evento onChange en la etiqueta SELECT:

<form action="#" id="misBanners">
<div>
<span>Tamaño:</span>
<select onChange="misBanners();" name="listaBanners" id="listaBanners">
<option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
<option rel="URL_imagen_2">texto a mostrar</option>
<option rel="URL_imagen_3">texto a mostrar</option>
<!-- seguimos agregando todas las imágenes que se nos de la gana -->
</select>
</div>
<div>
<span>Código:</span>
<textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
<p>Copie y pegue el código en su sitio.</p>
</div>
</form>
<div id="ejemploBanner">
<a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /></a>
</div>

goo.gl: Enviar los posts a Twitter usando Feedburner

Código para que nos enlacen con JQuery

Esta es una forma novedosa e interesante de Agregar un elemento para que nos enlacen con un click Gem@

. Requiere el uso de la librería JQuery y fue publicado por CSS Tricks

Si no la usamos, incorporamos la librería desde el mismo Google, poniendo esto antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

O bien así:;

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

El resultado, será un formulario con opciones donde los visitantes podrán seleccionar entre diferentes banners:

La función que debemos agregar a la plantilla es muy simple:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("rel");
    var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
    $("#codigoBanner").text(newCode);
    $("#ejemploBanner").html(newCode);
  });
});
//]]>
</script>

donde:

listaBanners será el ID de la etiqueta donde listaremos nuestros banners
codigoBanner será el ID de la etiqueta donde se postrará el códiogo a copiar y pegar
ejemploBanner será el ID de la etiqueta donde mostraremos esos banners a medida que se van seleccionando

En esa función, sólo debemos cambiar la URL por la de nuestro sitio y agregar los textos en alt y title.

El código HTML lo agregaremos en donde querramos mostrarlo, por ejemplo, en un elemento HTML de la sidebar:

<form action="#" id="misBanners">
  <div>
    <span>Tamaño:</span>
    <select name="listaBanners" id="listaBanners">
      <option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
      <option rel="URL_imagen_2">texto a mostrar</option>
      <option rel="URL_imagen_3">texto a mostrar</option>
      <!-- seguimos agregando todas las imágenes que se nos de la gana -->
    </select>
  </div>
  <div>
    <span>Código:</span>
    <textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
    <p>Copie y pegue el código en su sitio.</p>
  </div>
</form>
<div id="ejemploBanner">
  <a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" titlr="nuestro texto" alt="nuestro texto" /></a>
</div>

La personalización es sencilla y estas son las definiciones elementales:

<style type='text/css'>
  #misBanners div { /* definimos el ancho del formulario y lo centramos */
    margin: 0 auto 10px auto;
    width: 250px;
  }
  #misBanners span {
    /* los texto Tamaño y Código */
  }
  #misBanners select { /* la etiqueta SELECT */
    border: 2px solid #BCD;
    padding: 2px 2px 2px 6px;
    width: 125px;
  }
  #misBanners option { /* la etiqueta SELECT */
    padding: 0 10px;
  }
  #misBanners textarea { /* la etiqueta TEXTAREA */
    border: 2px solid #BCD;
    height: 75px;
    padding: 5px;
    width: 236px;
  }
  #misBanners p {
    /* el texto Copie y pegue ... */
  }
  #ejemploBanner { /* el DIV donde se mostrarán los ejemplos */
    border: 2px solid #567;
    margin:0 auto;
    padding: 5px 5px 0;
    text-align: center;
    width: 236px; /* ancho menos bordes */
  }
</style>

YouTube y JavaScript (2)

Tal vez, lo más interesante de las API de YouTube sea la posibilidad de usar un reproductor sin bordes. El uso es prácticamente igual al mostrado anteriormente pero, el hecho de no tener bordes nos obliga a usar nuestros propios botones como enlaces.

Comenzamos siempre con la librería SWFObject que podemos cargar directamente desde Google:

<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'></script>

Y también cesitamos las funciones del script; lo mejor es empezar con las funciones tal como las muestra el ejemplo online:

<script type='text/javascript'>
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

function setytplayerState(newState) {
updateHTML("playerstate", newState);
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
setInterval(updateytplayerInfo, 250);
updateytplayerInfo();
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
}

function onytplayerStateChange(newState) {
setytplayerState(newState);
}

function onPlayerError(errorCode) {
alert("An error occured: " + errorCode);
}

function updateytplayerInfo() {
updateHTML("bytesloaded", getBytesLoaded());
updateHTML("bytestotal", getBytesTotal());
updateHTML("videoduration", getDuration());
updateHTML("videotime", getCurrentTime());
updateHTML("startbytes", getStartBytes());
updateHTML("volume", getVolume());
}

// functions for the api calls
function loadNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.loadVideoById(id, parseInt(startSeconds));
}
}

function cueNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.cueVideoById(id, startSeconds);
}
}

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

function getPlayerState() {
if (ytplayer) {
return ytplayer.getPlayerState();
}
}

function seekTo(seconds) {
if (ytplayer) {
ytplayer.seekTo(seconds, true);
}
}

function getBytesLoaded() {
if (ytplayer) {
return ytplayer.getVideoBytesLoaded();
}
}

function getBytesTotal() {
if (ytplayer) {
return ytplayer.getVideoBytesTotal();
}
}

function getCurrentTime() {
if (ytplayer) {
return ytplayer.getCurrentTime();
}
}

function getDuration() {
if (ytplayer) {
return ytplayer.getDuration();
}
}

function getStartBytes() {
if (ytplayer) {
return ytplayer.getVideoStartBytes();
}
}

function mute() {
if (ytplayer) {
ytplayer.mute();
}
}

function unMute() {
if (ytplayer) {
ytplayer.unMute();
}
}

function getEmbedCode() {
alert(ytplayer.getVideoEmbedCode());
}

function getVideoUrl() {
alert(ytplayer.getVideoUrl());
}

function setVolume(newVolume) {
if (ytplayer) {
ytplayer.setVolume(newVolume);
}
}

function getVolume() {
if (ytplayer) {
return ytplayer.getVolume();
}
}

function clearVideo() {
if (ytplayer) {
ytplayer.clearVideo();
}
}
</script>

Y ahora, donde queremos mostrar los videos agregamos lo siguiente:

<div id="ytapiplayer"> Cargando ... </div>
<script type="text/javascript">
var params = { allowScriptAccess: "always", bgcolor: "#000000" };
var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "560", "420", "8", null, null, params, atts);
</script>

Las funciones permiten controlar la carga y reproducción del video, además de darnos información. Algunos ejemplos:

CARGAR VIDEO <a href="javascript:void(0);" onclick="play();"><img src="URL_BOTON_PLAY" /></a>

PAUSAR VIDEO <a href="javascript:void(0);" onclick="pause();"><img src="URL_BOTON_PAUSE" /></a>

STOP VIDEO <a href="javascript:void(0);" onclick="stop();"><img src="URL_BOTON_STOP" /></a>

SILENCIAR  <a href="javascript:void(0);" onclick="mute();"><img src="URL_BOTON_MUTE" /></a>

SONIDO  <a href="javascript:void(0);" onclick="unMute();"><img src="URL_BOTON_NOMUTE" /></a>

Los videos se cargan indicando su ID con dos funciones diferentes, con la primera se autoejecutan y con la segundan se cargan y se espera que se haga click en play:

<a href="javascript:void(0)" onclick="loadNewVideo('ID_VIDEO', 0)">Cargar</a>

<a href="javascript:void(0)" onclick="cueNewVideo(document.getElementById('cuevideoid').value, 0)">Precargar</a>

Todo esto sólo es una muestra simple de esas funciones pero son lo suficientemente interesantes como para que quien quiera, pueda exerimentar con ellas y crear sus propios reproductores.

24 horas es mucho tiempo

La barra traductora de Google

Hace más de un mes, SpamLoco

hablaba del nuevo "juguetito" de Google, la barra traductora que podía insertarse directamente en cualquier sitio, incluyendo blogs. En este tiempo, algunos me han preguntado sobre ello y siempre respondí que, como aún no estaba disponible en español y por lo tanto, era poco razonable tratar de utilizarla.

Bueno, pués ahora ya esta en español y quien quiera puede agregarla con bastante facilidad.

Si entramos en la parte de Herramientas de Traducción de Google (que, por cierto, no está traducida), marcamos el lenguaje de nuestra página (lo detectará automáticamente), seleccionamos si queremos que haya opciones para traducir a todos los idiomas o sólo a algunos y nos mostrará un código que deberemos copiar y pegar en nuestro sitio.

<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Lo pondremos, por ejemplo, en un elemento HTML de la sidebar y allí, nos mostrará un control desplegable:

Translate

Además, en la parte superior de la página, veremos la barra de traducción que ocupará todo el ancho de la pantalla y que realiza traducciones bastante rápidas y sin cambiar salir del sitio.

Hasta ahí, salvo el tamaño excesivo, no parecería haber problemas pero, hay que tener en cuenta que la idea de la barra es que, sólo se muestre cuando se detecta que el lenguaje del navegador no es el mismo que el lenguaje de la página y eso, no funciona. Mejor dicho, sólo he visto que funciona en Chrome y en Opera. En Firefox permanece siempre visible y en nternet Explorer la barra que se muestra es la del buscador. Pese a esto, la traducción funciona en todos los navegadores.