ElHackerZ

Código para que nos enlacen (sin JQuery)

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>

PatternCooler algo más que una galería.

Todos tenemos alguna herramienta favorita, algún editor, tabla de colores, generador... ya sea por la facilidad de manejo o porque reúne las características que necesitamos.

Para crear texturas o patterns ya adjudiqué una herramienta a mis favoritos se llama PatternCooler

No se trata de una galería donde escoger algún diseño sino que a partir de cualquier diseño podemos trabajar sobre él y cambiar colores así como visualizar el efecto final añadido como fondo y desde ahí escoger el tamaño.

La galería va creciendo conforme se van creando diseños y es posible que en ella veamos algunos de los que hemos creado.

Os dejo un vídeo que he realizado y unos patterns pero recomiendo probar vosotros mismos porque os va a gustar.

goo.gl: Enviar los posts a Twitter usando Feedburner

Aunque esta es información repetida en muchos sitios, son de esas cosas que nunca están de más.

A partir de ayer, Google ha agregado una opción extra a Feedburner. Se trata de un servicio que podemos activar y que nos permitiría reemplazar a TwitterFeed; es decir, enviar las entradas publicadas de nuestros sitios a Twitter e, imagino yo, en el futuro, a otras redes sociales.

Para utilizarlo, entramos en la cuenta de Feedburner y en la solapa Publicize, hacemos click en Socialize.

Las opciones que nos muestra son varias pero lo elemental es lo que ya viene configurado por defecto y, en todos los casos, debemos agregar nuestra cuenta de Twitter y autorizar a la aplicación a acceder a ella.

Post Content nos permite enviar sólo el título (que es lo lógico) o incluir el contenido, siempre limitado a 140 caracteres.

Si se marca Include link, el enlace se msotrará como URL corta de tipo http://goo.gl/fb/xxxx

Si se marca Leave room for retweets, el tweet será recortado (si es necesario) para que pueda ser retweeteado fácilmente.

Por defecto, no se agregan hash tags (#palabra) pero si se marca la opción Create hash tags from item categories, estas se incluirán en el tweet (en Blogger serán las etiquetas del post). En lo personal, no lo recomiento porque el uso de esaos hashs suele ser abusivo y molesto.

Additional Text es el texto optativo adicional que aparecerá en el tweet, por ejemplo, antes del título: "Nuevo Post: Este es el título del post".

Item Selection es donde le indicamos la cantidad máxima de tweets a enviar por día (máximo 8). La demora máxima entre la publicación y la aparición del tweet es de unos 30 minutos pero, esto puede variar.

Con Keyword Filter podemos crear algún tipo de filtro como por ejemplo, sólo enviar tweets de cierta categoría o que contengan ciertas palabras

Una vez que indicamos nustras preferencias, debemos Hacer click en Guardar y el servicio ya está activo.

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.

You need Flash player 8+ and JavaScript enabled to view this video.