Wallpapers (unos paisajes 1)

JMiur [E]

Mantener la dirección original con Feedburner

Interesante información de La Brujula Verde que nos permitirá mantener la dirección original de nuestro blog en los feeds de Feedburner.

Es que, muchas veces, lo que muestran los lectores de feeds o enlaces en diferentes sitios, no es nuestra dirección de tipo:

http://vagabundia.blogspot.com/

sino algo como:

http://feeds.feedburner.com/Vagabundia

Peor aún, en las entradas individuales suelen verse cosas así:

http://feeds.feedburner.com/~r/Vagabundia/~3/437568548/y-otras-diez-plantillas-ms.html

Tal como explican, esto puede ser engorroso porque para acceder a la URL real hay que hacer click y abrir la página en el navegador y peor aún, un enlace externo al feed no tiene valor para sitios como Technorati ni es considera un backlink por Google.

Para hacer que las URLs de los feeds apunten al blog y no a Feedburner hay que ir a nuestra cuenta y en la primera pestaña Analize hay que hacer click en la última opción llamada Configure Stats (PRO) lo que nos abrirá una ventana como esta:

Alli, debemos desmarcar la opción Item Link Clicks que está tildada por defecto y luego guardar.

Haciendo esto, cambiamos las URLs y ambas coincidirán aunque perderemos el contador de clicks en los items de los feeds (nada es gratuito) aunque, este tipo de estadísticas no suele ser importante y difícilmente la hayamos mirado alguna vez

Y otras diez plantillas más

Butterfly

Astro

Florascent

Sad Fish

Field of dreams

Flowers

Charcoal

Spiderman 3

DFire

Nite Life

REFERENCIAS:

Blogger-Templates

Homero, el CSS y un trabajo increible

El diseñador gráfico Román Cortés ha realizado un dibujo muy complejo usando sólo CSS.

Este Homero Simpson se crea con 307 líneas de código (14135 caracteres) y puede ser visualizado correctamente en casi todas las versiones de Internet Explorer, Opera, Firefox y Safari siempre que la fuente Verdana esté disponible.

¿Una pequeña muestra de ese código?

<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">
  <div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">
  <div style="font-size: 10px">
    <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>
  </div>
</div>

(

)

•

(

Para quien quiera curiosear, su blog es muy interesante y el comic llamado El Progreso, también realizado íntegramente en DHTML es una buena muestra de las capacidades de estas técnicas.

Book Flip Slideshow

Book Flip Slideshow es un script de DyamicDrive que crea un slideshow de imágenes con un efecto similar a "dar vuelta una página".

El efecto puede ser definido como horizontal o vertical y cada imagen puede tener un enlace asociado. Para detener el slideshow basta colocar el puntero del ratón encima de una imagen.

<script type='text/javascript'>
// <![CDATA[

  var Book_Image_Width = 250; // el ancho de las imágenes a utilizar
  var Book_Image_Height = 350; // el alto de las imágenes a utilizar
  var Book_Border = false; // si las imágenes tienen borde, ponemos true
  var Book_Border_Color = "gray";  // es el color del borde
  var Book_Speed = 15;  // la velocidad del efecto
  var Book_NextPage_Delay = 1500; // 1 segundo=1000
  var Book_Vertical_Turn = 0;  // si queremos que sea vertical, colocamos el valor de 1

  // esta es la lista de las imágenes a ser mostradas (mínimo cuatro)
  Book_Image_Sources=new Array(
    // si no se quiere agregar un enlace, se deja en blanco ""
    "URL_imagen1","URL_enlace1",
    "URL_imagen2","",
    "URL_imagen3","",
    "URL_imagen4","URL_enlace4"
    // la última imagen no debe terminar con una coma
  );

  var B_CrImg=Book_Image_Sources.length/2;

  var B_LI, B_MI, B_RI, B_TI;
  var B_Angle=0;
  var B_MaxW;
  var B_Direction=1;
  var B_MSz;
  var B_Stppd=false;
  B_Pre_Img=new Array(Book_Image_Sources.length);

  function ImageBook() {
    if(document.getElementById) {
      for(i=0;i
        B_Pre_Img[i]=new Image();
        B_Pre_Img[i].src=Book_Image_Sources[i];
      }
      Book_Div=document.getElementById("Book");
      B_LI=document.createElement("img");Book_Div.appendChild(B_LI); 
      B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
      B_MI=document.createElement("img");Book_Div.appendChild(B_MI); 
      B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
      B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
      B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
      B_LI.style.left=0+"px";
      B_MI.style.top=0+"px";
      B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
      B_RI.style.top=0+"px";
      B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
      B_LI.style.height=Book_Image_Height+"px";
      B_MI.style.height=Book_Image_Height+"px";
      B_RI.style.height=Book_Image_Height+"px";
      B_LI.style.width=Book_Image_Width+"px";
      B_MI.style.width=Book_Image_Width+"px";
      B_RI.style.width=Book_Image_Width+"px";
      if(Book_Border) {
        B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
        B_LI.style.borderWidth=1+"px";
        B_MI.style.borderWidth=1+"px";
        B_RI.style.borderWidth=1+"px";
        B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color;
      }

      B_LI.src=B_Pre_Img[0].src;
      B_LI.lnk=Book_Image_Sources[1];
      B_MI.src=B_Pre_Img[2].src;
      B_MI.lnk=Book_Image_Sources[3];
      B_RI.src=B_Pre_Img[4].src;
      B_RI.lnk=Book_Image_Sources[5];

      B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
      B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
      B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
      BookImages();
    }
  }

  function BookImages(){
    if(!B_Stppd) {
      if(Book_Vertical_Turn) {
        B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
        MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
        B_MI.style.top=MidOffset+"px";
        B_MI.style.height=B_MSz+"px"
      } else {
        B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
        MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
        B_MI.style.left=MidOffset+"px";
        B_MI.style.width=B_MSz+"px"}
        B_Angle+=Book_Speed/720*Math.PI;
        if(B_Angle>=Math.PI/2&&B_Direction) {
          B_Direction=0;
          if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
          B_MI.src=B_Pre_Img[B_CrImg].src;
          B_MI.lnk=Book_Image_Sources[B_CrImg+1];
          B_CrImg+=2
        }
        if(B_Angle>=Math.PI) {
          B_Direction=1;
          B_TI=B_LI;
          B_LI=B_MI;
          B_MI=B_TI;
          if(Book_Vertical_Turn)B_MI.style.top=0+"px";
          else B_MI.style.left=Book_Image_Width+1+"px";   
          B_MI.src=B_RI.src;
          B_MI.lnk=B_RI.lnk;
          setTimeout("Book_Next_Delay()",Book_NextPage_Delay);
      } else setTimeout("BookImages()",50);
    } else setTimeout("BookImages()",50);
  }

  function Book_Next_Delay() {
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_RI.src=B_Pre_Img[B_CrImg].src;
    B_RI.lnk=Book_Image_Sources[B_CrImg+1];
    B_MI.style.zIndex=2;
    B_LI.style.zIndex=1;
    B_Angle=0;
    B_CrImg+=2;
    setTimeout("BookImages()",50);
  }

  function B_LdLnk() {
    if(this.lnk)window.location.href=this.lnk;
  }

  function B_Stp() {
    B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default";
  }

  function B_Rstrt() {
    B_Stppd=false;
  }

// ]]>
</script>

Para insertar un slideshow, lo que necesitamos es una imagen auxiliar llamada placeholder.gif que podemos alojar en Blogger o donde nos guste.

El código HTML es muy sencillo, donde queremos mostrarlo, colocamos lo siguiente (todo en una línea si se trata de un post):

<div id="Book" style="position:relative;">
  <img src="URL_placeholder.gif" width="elAncho" height="elAlto">
</div>
<script type="text/javascript">ImageBook();</script>

Para un slideshow horizontal:
elAncho es igual al doble del ancho de la imagen más cuatro
elAlto es igual al alto de la imagen más dos

Para un slideshow vertical:
elAncho es igual al alto de la imagen más dos
elAlto es igual al doble del alto de la imagen más cuatro

Crimen y castigo

Maple Story es un juego/mundo online de origen coreano que tiene millones de usuarios en todo el mundo. Como siempre en estos casos, cada uno crea su avatar y allí interactua con los demás.

La noticia dice que días atrás, una mujer de Japón, 43 años, profesora de música, muy enojada luego del inesperado divorcio de su esposo virtual, en un un rapto de "locura temporal", asesinó al personaje de su ya ex-marido, un oficinista de 33 años.

Todo tomó estado público ya que la mujer utilizó la información de usuario de su amorcito (una hacker sencillita) para acceder al sitio y el hombre hizo la correspondiente denuncia policial que imagino que en algún momento seguirá su trámite judicial correspondiente , una vez que los policías se recuperen de los ataques de risa.

Mientras tanto, la mujer permanece arrestada, acusada de acceso ilegal, manipualción de datos y ... ¿avatarocidio? Sea como sea, enfrenta la posibilidad de ser sentenciada a cinco años de cárcel o a pagar una pequeña multa de cinco mil dólares.

Desde estas páginas nos solidarizamos con el deudo y le expresamos nuestras mayores condolencias.

Ampliar imágenes de manera sencilla

Este es un script sencillo creado por CodeLifter que permite implementar un zoom sencillo sobre cualquier imagen para permutar entre dos tamaños con un simple click.

Para usarlo, debemos incluir el siguiente código antes de </head>:

<script type='text/javascript'>
  var nW,nH,oH,oW;
  function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
    oW=whichImage.style.width;oH=whichImage.style.height;
    if((oW==iWideLarge)||(oH==iHighLarge)){
      nW=iWideSmall;nH=iHighSmall;
    }else{
      nW=iWideLarge;nH=iHighLarge;
    }
    whichImage.style.width=nW;whichImage.style.height=nH;
  }
</script>

Y luego, lo agregamos en cualquier imagen agregando unos pocos datos:

<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">

Donde:

ancho1 y alto1 son el tamaño de la imagen inicial, la que vemos en la página y ancho2 y alto2 son el tamaño de la imagen amplaida, la que veremos al hacer click en la imagen.

La función puede usarse en cualquier imagen y en varias en la misma página.

Si bien lo razonable es que ancho1 y alto1 sean los mismos en los atributos de la imagen que en la función, nada impide que sean diferentes.

ScreenToaster: Creando screecasts online

Hacia ya tiempo que había visto ScreenToaster al que se promocionaba como una herramienta online que nos permite crear videos de lo que hacemos en la PC (screencasts) sin necesidad de instalar ningún tipo de software.

Como aún está en modo beta, para usarlo hay que esperar una invitación. Tardó un poco pero al fin ha llegado así que me he dedicado a ver de que se trata y realmente, pese a tener limitaciones, parece ser una buena herramienta y su uso es muy sencillo.

Una vez que entramos en nuestra cuenta, se cargará la aplicación Java por única vez y en todas las páginas del servicio veremos un botón que es el que nos permitirá comenzar a grabar. Click allí y en unos segundos nos indicará que tenemos dos opciones, oprimiendo Alt+S grabará la ventana completa y Alt+Shift+S grabará sólo un área. Para detener la grabación, usaremos la misma combinación de teclas: Alt+S.

Así que nos ponemos en la ventana donde queremos comenzar y usamos la combinación de teclas. Si especificamos un área, aparecerá un selector para que definamos el espacio de la pantalla a grabar. De allí en adelante, hacemos cualquier cosa y cuando decidimos terminar, nuevamente usamos Alt+S y automáticamente nos enviará a una página donde podremos previsualizar lo grabado, colocarle un título y una descripción y, si queremos, lo guardamos haciendo click en Publish.

Tardará un rato en crearse y, aunque es bastante rápido, el tiempo dependerá de lo que hayamos hecho.

Finalizado el proceso, tendremos disponibles un enlace y también el código HTML para insertar el reproductor en cualquier página web ya que el resultado es un archivo de Flash que queda alojado en el mismo servicio y cuya calidad es realmente muy buena (miren el resultado a pantalla complet).

Por el momento, no dispone de la posibilidad de agregar audio aunque se dice que es algo que se incorporará en el futuro.

En nuestra página principal, tendremos siempre disponibles los videos creados así que podemos acceder a ellos en cualquier momento.


ENLACE	ENLACE	ENLACE
Click para ver los videos.

Es cierto, mis pruebas son un poco patéticas pero, la herramienta es realmente excelente.

Grabar videos desde Firefox

Capture Fox no es Camtasia pero es una extensión simple que permite grabar un video desde el mismo Firefox con un par de clicks.

Al instalarse, se agrega un ícono con el que lanzamos las opciones de la aplicación. Podemos seleccionar grabar toda la pantalla o sólo el navegador; selecionar la calidad final y eventualmente, agregarle nuestra voz. De allí en adelante, se grabará todo lo que hagamos y un nuevo click terminará el proceso, dándonos la posibilidad de verlo o guardarlo como archivo AVI.

REFERENCIAS:

ZonaFirefox

Somos lo que fuimos

¿Qué es Blogger?

Blogger es una herramienta para la publicación de weblogs ... Uno escribe entradas y las envía para que sean publicadas ordenadas cronológicamente teniendo como resultado, un sitio web de diseño personal.

¿Cómo funciona? ¡Es magia! y es gratuito.

Traducción más o menos libre de lo que decía la página inicial de Blogger allá por 1999 cuando aún pertenecía a la compañía Pyra.

Es que, aunque nos parezca un poco extraño, el mundo no empezó con nosotros; la rueda existe hace mucho y hubo un tiempo en que ni siquiera existía la televisión!!!!

Blogger no es la excepción y la existencia de Internet Archive WaybackMAchine nos permite recorrer ese pasado cercano y darnos cuenta de lo mucho que ha cambiado o de lo poco que ha cambiado.

Apenas nacemos ya somos parte del pasado. Prueben buscarse y encontarán cosas extrañas

Mostrando posts de cierta fecha

En Blogger Update muestran una forma un poco diferente para que podamos navegar el blog. Aunque hablan de reemplazar el elemento Archivos, en realidad, sólo es una alternativa extra.

Lo que se hace es sencillo; utilizar JavaScript para establecer una fecha determinada, crear una dirección URL y abrir esa página. Si hay posts en esa fecha, se mostrarán y si no los hay, claro, no se mostrará nada.

Creamos un Elemento HTML y allí ponemos el script:

<script type="text/javascript">
home_page = "http://nuestroSitio.blogspot.com/";
timezone = "-03:00";
function submitdate(){
  year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
  tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
  tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
  if(year=="" || month=="" || day=="") {
    alert("Please select a right date!"); return false;
  } else {
    self.location.href=tlink;
  }
}
</script>

Sólo cambiamos dos datos, el nombre de la página de inicio y la zona horaria que podemos verificar en Configuraciòn | Formato:

home_page = "http://nuestroSitio.blogspot.com/";
timezone = "-03:00";

Luego, agregamos es el código HTML que pueden descargar de este archivo de texto

y cuyo esquema (es muy tedioso escribirlo todo) es el siguiente:

<form id="buscarXfecha" name="selectdate"><span>Seleccione una fecha</span>

<select name="day">
<option value="" selected="selected">DIA</option>
<option value="01">1</option> ....... <option value="31">31</option>
</select>

<select name="month">
<option value="" selected="selected">MES</option>
<option value="01">ENE</option> ....... <option value="11">NOV</option>
<option value="12">DIC</option>
</select>

<select name="year">
<option value="" selected="selected">AÑO</option>
<option value="2007">2007</option><option value="2008">2008</option>
</select>

<input type="button" onclick="submitdate()" value="BUSCAR"/>

</form>

Para el resto, sólo hace falta un poco de CSS que agregamos antes de </b:skin> y el ejemplo tiene el siguiente:

#buscarXfecha { /* el bloque del formulario */
  background-color: #243240;
  border: 1px solid #4D5B68;
  margin: 0 auto;
  padding: 5px 0 10px;
  text-align: center;
  width: 250px;
}
#buscarXfecha span { /* el texto indicativo superior */
  color: #FFFFFF;
  display:block;
  margin-bottom: 5px;
}
#buscarXfecha select { /* los elementos con las opciones */
  background-color: #CCC;
  border: 2px solid #8D9BA8;
  color: #000;
  font-size: 11px;
  width: 50px;
}
#buscarXfecha input { /* el botón de envio */
  background-color: #CCC;
  border: 2px solid #8D9BA8;
  color: #000;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
}

Amores y desamores varios

Un nombre = Un avatar

Turn your name into a face hace eso que dice el nombre; traducido: Convierte un nombre en una cara.

El sitio es una pequeña herramienta donde ingresamos el nombre y en función de un algoritmo, crea una imagen combinando 18 estilos de siluetas, ojos, nariz y boca, produciendo más de 100.000 avatares diferentes.

Bueno ... si el mio parece gracioso, ni se imaginen lo que pasa al poner otros nombre ...

Adivinen quién es quién

REFERENCIAS:

Google Blogoscoped

Wallpapers (en negro)

Feo como emoticón de GMail

"Here on the Gmail team, we're always thinking of ways to help you communicate ... we present, in all their technicolor glory, emoticons in your mail ..." (The Official GMail Blog)

¿Seré yo el único que cree que son muy feos?

Seguidores: Personalizar el gadget

Seguramente ya habrán visto el nuevo juguetito de Blogger, ese que comenzaron a promocionar hace unos meses pero que no estaba disponible para los que hablamos español.

Colocarlo es muy sencillo, no tiene opciones de ninguna clase (excepto el título) y en principio, se adapta al estilo de la sidebar. En la plantilla, vamos a encontrar un código largo, muy largo que comienza con:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Un código bastante críptico por cierto y donde hay muy poco que podamos modificar:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>

esta parte define el título:

<b:if cond='data:title != ""'>
  <b:if cond='data:codeSnippet != ""'>
    <h2 class='title'><data:title/></h2>
  <b:else/>
    <h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
  </b:if>  
</b:if>

NOTA: parece haber una opción para que en el título se muestre o no se muestre la cantidad de seguidores en función de algún dato pero, desconozco donde está. Podríamos hacerlo manualmente, eliminando esa parte y dejando sólo la parte de color.

No es el único caso donde hay opciones poco claras, en el resto siguen apareciendo:

<div expr:id='data:widget.instanceId + "-wrapper"'>
  <b:if cond='data:codeSnippet != ""'>
    <data:codeSnippet/>
  <b:else/>
    <b:if cond='data:followingLinkPresent'>

este es el enlace que por defecto dice "Seguir este blog" y que nos permite agregarnos:

      <div class='follow-this profile-link item-control following-follow-this'>
        <a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
          <data:followThisMessage/>
        </a>
      </div>

este es el enlace que aparecerá si estamos siguiendo un blog y queremos dejar de hacerlo. Por defecto dice "Parar siguiente" (una traducción increible):

      <div class='follow-this profile-link item-control following-stop-following-this'>
        <a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
          <data:stopFollowingMessage/>
        </a>
      </div>

    </b:if>

    <div class='followers-grid'>

este es el mensaje que se muestra si el blog no tiene seguidores y que por defecto dice "Sé el primero en  seguir  este blog":

      <b:if cond='data:totalFollowerCount == 0'>
        <div class='profile-link item-control following-follow-this'>
          <data:emptyFollowersMessage/>
        </div>
      </b:if>

este es el bucle que muestra el avatar de los seguidores con un enlace a su perfil de Blogger y con el atributo nofollow que no tiene sentido quitar ya que al no apuntar al blog, no significará un enlace valido para posicionar un sitio y de esta manera se evita el "seguimiento spam":

      <!-- Relies on the js written out in navbar.gxp -->
      <b:loop values='data:followers' var='follower'>
        <div class='follower'>
          <a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
          <img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
          </a>
        </div>
      </b:loop>

      <div class='clear'/>
    </div>

    <div class='followers-canvas profile-link'>

este es el mensaje que muestra la cantidad de seguidores:

      <data:followersFooterMessage/>

este enlace permite "Ver todos los seguidores" ya que sólo se mostrará una cantidad máxima:

      <span class='item-control following-not-admin'>
        <a expr:href='data:followersUri'>
          <data:viewAllMessage/>
        </a>
      </span>

este enlace dice "Administrar" y sólo lo veremos nosotros si estamos logueados:

      <span class='item-control blog-admin'>
        <a expr:href='data:manageFollowersUri'>
          <data:manageFollowersMessage/>
        </a>
      </span>

    </div>
  </b:if>
  <b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Los datos que podemos modificar fácilmente son los textos que muestra el gadget; basta reemplazar el código que contiene ese texto por defecto por uno nuestro o incluso por una imagen:

<data:followThisMessage/> es el texto del enlace Seguir este blog
<data:stopFollowingMessage/> es el absurdo texto del enlace Parar siguiente
<data:emptyFollowersMessage/> es el texto Sé el primero en seguir este blog.
<data:viewAllMessage/> es el texto del enlace Ver todos
<data:manageFollowersMessage/> es el texto del enlace Administrar

A diferencia de los últimos agregados de Blogger, este no es un IFRAME así que, por un lado es relativamente más rápido y por otro, nos permite utilizar CSS para modificarlo.

Como la gran mayoría de las clases y definiciones de estilo están en un archivo externo que Blogger agrega, lo ideal es hacer estas modificaciones sobrescribiendo estos datos y colocando todo en una etiqueta STYLE pero no en el encabezado de nuestra plantilla sino después de <BODY>:

<style type='text/css'>
  [... aquí colocamos las definiciones ...]
</style>

Estas son definiciones generales, no son demasiado útiles salvo casos especiales:

#Followers1 h2 {
 aquí podemos modificar el estilo del título
}

#Followers1-wrapper  {
 este es el DIV general que contiene el elemento
}

Los enlaces usan una clase que suele estar definida en las plantillas por defecto y que se llama profile-link a la que se le suma otra que podemos cambiar de manera simple; en mi caso coloqué estas definiciones:

.follow-this {
  margin: 0 5px 5px 0;
  text-align: right;
}
.follow-this a { /* los enlaces superiores */
  color: #7E92A6;
  font-weight: normal;
  font-size: 11px;
}
.follow-this a:hover {
  color: #9EB2C6;
  font-weight: bold;
}

.followers-canvas { /* la cantidad de seguidores */
  background: transparent url(URL_imagen) no-repeat scroll left top;
  color: #778899;
  float: right;
  font-size: 11px;
  font-weight: normal;
  margin: 5px 5px 0 0;
  padding-left: 15px;
  text-align: right;
}

.following-not-admin a { /* es el enlace "Ver Todos" */
  color: #7E92A6;
  display: block;
  font-size: 11px;
  font-weight: normal;
  text-align: right;
}
.following-not-admin a:hover {
  color: #9EB2C6;
  font-weight: bold;
}

.blog-admin a { /* es el enlace "Administrar" */
  color: #7E92A6;
  font-weight: normal;
  font-size: 11px;
}
.blog-admin a:hover {
  color: #9EB2C6;
  font-weight: bold;
}

El área donde se muestran los avatares también es configurable. Para empezar, la clase que usa Blogger es errónea, está definida como follower-grid pero, en realidad se llama followers-grid (una s no es nada, claro). Así que:

.followers-grid { /* el espacio donde se mostrarán los avatares */
  margin: 0 auto; /* esto lo centra */
  padding: 0;
  width: anchopx; 
  /* ese ancho es importante ya que define cuántas imágenes se mostrarán por línea */
}

.follower-img { /* es la imagen en si misma que tienen 28x28 */
  float: left;
  margin: 0;
  padding: 0;
}

.follower { /* cada imagen está dentro de un DIV */
  float: left;
  height: valorpx;
  margin: 0px;
  width: valorpx}
  /* ancho y alto son la imagen más los bordes y márgenes */
}

OTRA MIRADA:

Gem@ Blog

Encontrar el enlace directo en SkyDrive

Este post está desactualizado ya que SkyDrive no permite utillizar los archivos de manera directa.

Una consulta repetida es el tema de los enlaces a ciertos archivos alojados en servicios online. Hace unos días hacía referencia a ImageShack y dónde está el enlace directo; algo similar ocurre si usamos SkyDrive aunque, en este caso, encontrar la URL del archivo que debemos utilizar es un poco más engorroso ya que no es mostrada en ninguna parte.

Para saber esa URL, debemos abrir la página del archivo, allí veremos un ícono gigante a la izquierda de la pantalla y deberemos hacer click sobre él, con el botón derecho del ratón.

Dependiendo del navegador que usemos, seleccionaremos: Copiar dirección del enlace (en Firefox) o Copiar acceso directo (en Internet Explorer):

Ahora, podemos pegar eso que hemos copiado en cualquier editor de textos o en el editor de Blogger y tendremos algo tan estrafalario como esto:

http://zvymaq.bay.livefilestore.com/y1pbItubVO5wyAV2jKWCEs6uAIhFchi84eCWuTyOVofncqqjK8JBl2aLfai_fpWxnCj825ARhP9a1E/darkbox.css?download

Allí, en la mayoría de los casos, esa parte final ?download es irrelevante así que podemos eliminarle. Lo que queda, es la URL directa al archivo que queremos utilizar.

Fijando DIVs en la página

Growl es un script para Prototype que muestra información en una ventanita con una serie de efectos. No es difícil de implementar pero parece poco flexible para usar en Blogger así que resulta mucho más cómodo usar el modelo que explicaba Gem@

hace unos días: Un cartel de aviso flotante.

Es más cómodo porque podemos agregarlo, tanto a la plantilla como a un post en particular. En ambos casos, necesitamos el script que podríamos agregar antes de </head> copiando y pegando el código:

<script type='text/javascript'>
//<![CDATA[
....... aquí copiamos el código .......
//]]>
</script>

o bien, alojarlo en un servidor y cargarlo cuando lo queremos utilizar:

<script src="URL_archivo.js"></script>

var persistclose = 1 // una vez cerrada permanece cerrada (0 se muestra cada vez que se abre la página)
var startX = 20 // posición horizontal de la ventana (en pixeles)
var startY = 5 // posición vertical de la ventana (en pixeles)
var verticalpos = "fromtop" // va arriba de la pantalla ("frombottom" va abajo)

function iecompattest() {
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
      offset += search.length
      end = document.cookie.indexOf(";", offset);
      if (end == -1) end = document.cookie.length;
        returnvalue=unescape(document.cookie.substring(offset, end))
    }
  }
  return returnvalue;
}

function closebar() {
  if (persistclose)
    document.cookie="remainclosed=1"
  document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
  barheight=document.getElementById("topbar").offsetHeight
  var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
  var d = document;
  function ml(id){
    var el=d.getElementById(id);
    if (!persistclose || persistclose && get_cookie("remainclosed")=="")
      el.style.visibility="visible"
    if(d.layers)el.style=el;
      el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
    el.x = startX;
    if (verticalpos=="fromtop")
      el.y = startY;
    else {
      el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
      el.y -= startY;
    }
    return el;
  }

  window.stayTopLeft=function() {
    if (verticalpos=="fromtop") {
      var pY = ns ? pageYOffset : iecompattest().scrollTop;
      ftlObj.y += (pY + startY - ftlObj.y)/8;
    } else {
      var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
      ftlObj.y += (pY - startY - ftlObj.y)/8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
  }
  ftlObj = ml("topbar");
  stayTopLeft();
}

if (window.addEventListener)
  window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
  window.attachEvent("onload", staticbar)
else if (document.getElementById)
  window.onload=staticbar

Una vez que tenemos el script, podemos colocar el contenido en un DIV al que identifiquemos con un ID específico llamado topbar:

<div id='topbar'>
....... aquí va el contenido del mensaje a mostrar .......
<a href="javascript:void(0);" onclick="closebar(); return false">CERRAR</a>
</div>

Conviene agregarle algún enlace para cerrar la ventana o bien hacer que se cierre al hacer click en ella:

<div id="topbar" onclick="closebar(); return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Todo lo que faltaría, sería agregar las definiciones CSS que pueden ser de cualquier tipo:

#topbar{
  background-color: #F35D5D;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  height: 70px;
  padding: 10px;
  position:absolute;
  width: 500px;
  visibility: hidden;
  z-index: 640;
}

Y el resultado sería algo así: DEMO Cartel con Scroll

StickyNote es un script similar de DynamicDrive pero, al que se le agrega un efecto de fade.

Lo usamos de la misma manera, necesitamos el script que insertamos de la misma manera que el anterior y un poco de CSS para establecer las propiedades del cartel:

<style type="text/css">#fadeinbox{
  background-color: lightyellow;
  border: 2px solid #FFFFFF;
  left: 0;
  padding: 10px;
  position:absolute;
  top: -400px;
  visibility:hidden;
  width: 350px;
  z-index: 100;
}</style>

<script type="text/javascript">
//<![CDATA[

var displaymode="always";  // la forma en que se mostrará 
var enablefade="yes" // habilita el efecto fade
var autohidebox=["yes", 5] // oculta el cartel tras  cierta cantidad de tiempo
var showonscroll="yes" // se ueve mediante scroll
var IEfadelength=1 // tiempo del fade para IE
var Mozfadedegree=0.05 // datos del fade para NS6+

if (parseInt(displaymode)!=NaN)
  var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox() {
  var ie=document.all && !window.opera
  var dom=document.getElementById
  iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
  objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
  var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
  var docwidth=(ie)? iebody.clientWidth : window.innerWidth
  docheight=(ie)? iebody.clientHeight: window.innerHeight
  var objwidth=objref.offsetWidth
  objheight=objref.offsetHeight
  objref.style.left=docwidth/2-objwidth/2+"px"
  objref.style.top=scroll_top+docheight/2-objheight/2+"px"
  if (showonscroll=="yes")
    showonscrollvar=setInterval("staticfadebox()", 50)
  if (enablefade=="yes" && objref.filters) {
    objref.filters[0].duration=IEfadelength
    objref.filters[0].Apply()
    objref.filters[0].Play()
  }
  objref.style.visibility="visible"
  if (objref.style.MozOpacity) {
    if (enablefade=="yes")
    mozfadevar=setInterval("mozfadefx()", 90)
  else {
    objref.style.MozOpacity=1
    controlledhidebox()
    }
  } else
  controlledhidebox()
}

function mozfadefx() {
  if (parseFloat(objref.style.MozOpacity)<1)
    objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
  else {
    clearInterval(mozfadevar)
    controlledhidebox()
  }
}

function staticfadebox() {
  var ie=document.all && !window.opera
  var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
  objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}

function hidefadebox() {
  objref.style.visibility="hidden"
  if (typeof showonscrollvar!="undefined")
    clearInterval(showonscrollvar)
}

function controlledhidebox() {
  if (autohidebox[0]=="yes") {
    var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
    setTimeout("hidefadebox()", delayvar)
  }
}

function initfunction() {
  setTimeout("displayfadeinbox()", 100)
}

function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = ""
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
      offset += search.length
      end = document.cookie.indexOf(";", offset)
      if (end == -1)
        end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
    }
  }
  return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0) {
  if (window.addEventListener)
    window.addEventListener("load", initfunction, false)
  else if (window.attachEvent)
    window.attachEvent("onload", initfunction)
  else if (document.getElementById)
    window.onload=initfunction
  document.cookie="fadedin=yes"
}

//]]>
</script>

Para usarlo, usamos un código parecido a este:

<div id="fadeinbox" onclick="hidefadebox(); return false" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); -moz-opacity:0">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Y el resultado sería algo así: DEMO Cartel con Fade

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Click para cerrar.

Una última opción un poco más limitada pero efectiva, es usar la propiedad position: fixed de CSS y "fijar" un DIV en la pantalla sin necesidad de agregar scripts.

Es cierto que no tiene la espectacularidad del scroll pero es muy flexible y sencilla de implementar; basta declarar una clase tal como nos muestran en DailyCoding:

<style type="text/css">
.cartelFijo {
  background-color: #0080FF;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-family: Tahoma;
  font-weight: bold;
  left: 20px; /* la coordenada horizontal donde se muestra */
  padding: 10px;
  position: fixed;  /* esto es lo que lo fija */
  text-align: justify;
  top: 30px; /* la coordenada vertical donde se muestra */
  width: 200px;  /* el ancho del cartel */
  z-index: 10000;
}

El HTML lo colocamos en cualquier parte, incluso dentro de un post:

<div class="cartelFijo" onclick="this.style.display='none'; return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Como es una clase CSS, podemos aplicarla repetidas veces así que también es útil cuando se quieren mostrar varios mensajes simultánemamente:

Cartel 1 | Cartel 2 | Cartel 3 | Cartel 4

El elemento "Seguidores" y novedades varias

Parece que el nuevo gadget (widget) de Blogger llamado Seguidores (followers) ya está disponible en español y se lo ve tanto en el escritorio como en Elementos de diseño.

Si queremos usarlo basta hacer click en agregar, ponerle un título y nada más; eso, lo incluirá en la plantilla como cualquier otro elemento.

No he leido mucho del tema pero lo agregaré temporalmente para ver de que se trata.

Y mientras programo este post veo que atajar me avisa de lo mismo así que debe ser algo generalizado ya que también veo entradas en el Blog de Gem@

y en El escaparate de Rosa

Ah, y por cierto, también Bonzu Pipinpadaloxicopolis III me dice que está disponible el botón de Vista Previa en los comentarios incrustados, algo de lo que realmente no me había dado cuenta. Así que parece ser que en Blogger se han dedicado a lanzar varias modificaciones todas juntas; también veo una diferencia en el código de las imágenes y vaya uno a saber que otra cosilla nos tiene escondida

YouEmbedTube

En YouEmbedTube podemos escribir una serie de etiquetas y nos creará una presentación que tendrá entre 3 y 8 videos de YouTube que podremos insertar en cualquier página web, copiando y pegando el código correspondiente.

REFERENCIAS:

Aborregate

Diez plantillas

	GreenLife Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Pottery Barn Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Stripped Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Arena Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Chaotic Soul Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Black Wood Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	The Journalist Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Net Spiel Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Renewed Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	Shoe Fetish Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER

Vuzit: Visualizando documentos en el navegador

A través de incubaweb me entero de la existencia de Nodobe, una extensión que soluciona la visualización de cierto tipo de documentos en el navegador, reemplazando los insoportables plugins de Adobe Reader.

Soporta 38 formatos diferente lo que no es poca cosa: PDF, documentos de Microsoft Office (doc, docx, rtf, xls, xlsx, ppt, pptx), imágenes (png, jpg, gif, tif, bmp, ppm, xpm), gráficos vectoriales (eps, ras), archivos de texto, documentos de OpenOffice (odt, odf, ott, odg, odp, stw, sxw, std, sxd, sti, sxi, sxc), de StarOffice (sda, sdd, sdw, vor) y de OpenDocument (otg, stp, ods, pts).

Para utilizarla es necesario registrarse ya que está integrada con un servicio llamado Vuzit que nos ofrece una serie de posibilidades más como incrustar esos documentos en una página web y que sean accesibles con cualquier navegador (Internet Explorer, Firefox, Safari y Opera). De esta manera, podemos agregar documentos subidos por nosotros (disponemos de 50 megas) o documentos que se encuentren en la web.

Los desarrolladores disponen también de la posibilidad de utilizar una serie de scripts especiales ya que las APIs que usa el servicio son accesibles de manera independiente. Una de ellas es útil para identificar cierto tipo de documentos con un ícono especial y asociarlos directamente. Con linkit basta poner ese script para que esto se haga de manera automática.

Van Gogh y un experimento con imágenes

Van Gogh - Starry Night es un experimento muy impresionante.

La imagen que vemos es la reproducción de un famoso cuadro de Van Gogh realizado a manera de mosaico utilizando 210.000 pequeñas fotografías.

Haciendo click sobre la imagen podemos ir usando los controles para ampliar, reducir o navegar en ese giga y medio de información.

Bordes, triángulos y curiosidades CSS

En DailyCoding hay un artículo que muestra una curiosidad del CSS. Sacando provecho de ella, lo que han creado es una manera simple de crear recuadros muy llamativos.

Las propiedad border es algo que usamos habitualmente, generalmente son bordes "finos" pero nada impide usar bordes más grandes:

<div style="border: 10px solid #0080C0; height: 100px; width:200px;"></div>

Tampoco nada impide que en lugar de colocar los cuatro bordes, sólo usemos uno o varios de ellos de manera indistinta:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid #0080C0; height: 100px; width:200px;"></div>

Por supuesto, a nadie se la va a ocurrir colocar como color del borde un color transparente, o sea, igual al color del fondo ya que, a simple vista, suena absurdo colocar un borde y luego ocultarlo. Sin embargo, si lo hacemos, ocurrirá esto:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid transparent; height: 100px; width:200px;"></div>

No, no es magia, lo que ocurre es que cuando le damos dos colores distintos a dos bordes adyacente, se produce un "conflicto" y la unión se marca sesgada. Si ambos son del mismo ancho, el ángulo formado es de exactamente de 45º.

<div style="border-bottom: 10px solid #0080C0;border-top: 10px solid #FF0000; border-left: 10px solid #008000; border-right: 10px solid #FF8040; height: 100px; width:200px;"></div>

Así que, aprovechando esta particularidad y usando bordes de color transparente, parece sencillo dibujar triángulos sólo con CSS:


border-bottom border-left	border-bottom border-right	border-top border-left	border-top border-right

border-bottom + border-left + border-right		border-top + border-left + border-right

De allí en adelante, la creación de formas no rectangulares para mostrar ciertos contenidos parece depender de la imaginación y estos son dos de los modelos sugeridos por DailyCoding:

HACIA ARRIBA

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

HACIA ABAJO

Este es el código CSS de ambos ejemplos:

<style type="text/css">
.calloutUp { /* es el borde del triangulito hacia arriba */
  border-bottom: 12px solid #FFFFFF;
  border-left: 12px dotted transparent;
  border-right: 12px dotted transparent;
  left: 0px; top: 0px;
  height: 0; width: 0; /* no tendrá dimensiones */
  margin-left: 20px; /* lo separamos del borde izquierdo */
  z-index: 10;
}
.calloutUp2 {  /* un triangulito más chico adentro del anterior */
  border-bottom: 10px solid #9999FF;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  position: relative;
  left: -10px; top: 2px; /* lo posicionamos desplazado */
  height: 0; width: 0; /* no tendrá dimensiones */
  z-index: 11;
}

.calloutDown { /* es el borde del triangulito hacia abajo */
  border-top: 12px solid #FFFFFF;
  border-left: 12px dotted transparent;
  border-right: 12px dotted transparent;
  left: 0px; top: 0px; /* lo posicionamos */
  height: 0; width: 0; /* no tendrá dimensiones */
  margin-left: 20px; /* lo separamos del borde izquierdo */
  z-index: 11;
}.calloutDown2 { /* un triangulito más chico adentro del anterior */
  border-top: 10px solid #9999FF;
  border-left: 10px dotted transparent;
  border-right: 10px dotted transparent;
  height: 0; width: 0; /* no tendrá dimensiones */
  position: relative;
  left: -10px; top: -12px; /* lo posicionamos despalazado */
  z-index: 10;
}

.divContainerUp { /* el contenido del recuadro hacia arriba */
  background-color: #9999FF;
  border: solid 1px #FFFFFF;
  color: #000000;
  padding: 10px;
  position: relative;
  text-align; justify;
  top: -1px;
  width: 500px;
  z-index: 9;
}
.divContainerDown { /* el contenido del recuadro hacia abajo */
  background-color: #9999FF;
  border: solid 1px #FFFFFF;
  color: #000000;
  padding: 10px;
  position: relative;
  text-align; justify;
  top: 1px;
  z-index: 3;
  width: 500px;
}
</style>

Y este es el código HTML que debemos emplear para utilizarlos:

<div class="calloutUp"><div class="calloutUp2"></div></div>
<div class="divContainerUp"> ... el contenido del ejemplo superior ... </div>

<div class="divContainerDown"> ... el contenido del ejemplo inferior ... </div>
<div class="calloutDown"><div class="calloutDown2"></div></div>

REFERENCIAS:

Cosas Sencillas

TextSnip: Compartir códigos online

En un post reciente, Vera tiene la gentileza de nombrarme y recomendarme el uso de un servico llamado TextSnip con el que dice que podemos gestionar y compartir fragmentos de código online de manera sencilla.

Como tiene razón, lo mejor es crear una cuenta gratuita en unos simples pasos (nombre y contraseña) y probarlo.

Entramos y nos dan dos opciones, quick snip o custom snip que sólo se diferencian por el tipo de URL final que se genere. Probamos la más sencilla que es la que aparece por defecto, simplemente escribimos el código y le ponemos un título; damos click en el botón get my URL e inmediatamente nos darán una dirección que será pública así que podremos compartir. Por ejemplo: http://textsnip.com/c551cd

Si abrimos la página, nos mostrará el código como texto plano pero a la derecha, un control llamado Change Code View nos permite verlo con la sintaxis resaltada de acuerdo al idioma de que se trate; en este caso, elegimos JavaScript y el resultado es realmente asombroso:

Probemos entonces con otros ejemplos:

Este es un código HTML: http://textsnip.com/663693
Este es un código CSS: http://textsnip.com/31c14b
Este es un código PHP: http://textsnip.com/074581

No son los únicos idiomas soportados, también acepta XML. SQL, Ruby, Python, VB y Java.

Todos los códigos que agregamos y compartimos son accesibles desde una dirección única a la que se van agregando de forma automática: http://textsnip.com/user/JMiur

Sencillo, simple y práctico; más, no puede pedirse.

Rotation

Maid Marian Classic Videos


The house of Usher (1928) 1:06:29	October (1928) 1:39:30	Alice in Wonderland (1903) 9:13


The show off (1926) 1:22:49	Robin Hood (1922) 2:00:22	The penalty (1920) 1:30:06

Nosferatu (1922) 1:20:09	A fool there was (1915) 1:07:25	The ace of hearts (1921) 1:15:21

Click para ver los videos.

REFERENCIAS:

Maid Marian Classic

Wallpapers (Linux love)

Alternativa para evitar traducciones automáticas

En Google Webmaster Central han anunciado la incorporación de una nueva etiqueta META (aunque algunos dicen que no es nueva sino que existe hace tiempo) que sus robots leerán y que permitirá a los administradores de sitios web o blogs indicar si las páginas no deberán ser traducidas por su servicio Google Translate.

<meta name="google" value="notranslate" />

De manera similar, han implementado una clase CSS (que si es nueva) que podemos colocar dentro de una etiqueta SPAN y que evitará que cierto contenido sea traducido lo cual puede ser una alternativa útil ya que a veces, ciertas frases son intraducibles o bien se trata de marcas, direcciones o nombres propios. Por ejemplo:

<span class="notranslate">este texto no debe traducirse</span>

Relojes en Flash para descargar

Una colección de relojes en formato SWF que pueden ser utilizados en una página web o descargados como waallpapers.

3D rotation clock


Rodin thinker clock	Child clock kid timer

Skull digital clock	Skeleton thinker clock

Salvador Dali clock	Never look back
Click para ver las animaciones.

Pseudo Mechanic watch

¡A navegar se ha dicho!

Según un estudio de la Universidad de California en Los Ángeles (Estados Unidos), que se publica en la revista American Journal of Geriatric Psychiatry, utilizar Internet mantiene el cerebro en forma a medida que se envejece.

Según este estudio, los mayores y los adultos de mediana edad que utilizan la Red, activan los principales centros del cerebro que controlan la toma de decisiones y el razonamiento complejo.

Sin Miedo

Es la mejor noticia que he leido en muchísimo tiempo, ahora, ya no seremos locos, fanáticos, obsesivos, geeks, inhumanos, robotines, compulsivos ni ninguna de esas cosas. Ahora seremos: gente buscando una mejor calidad de vida.

¡Adiós, sol, adiós!

Buscando enlaces rotos

La Herramienta para Webmasters de Google ha incorporado una nueva función que nos va a permitir encontarr los errores 404 es decir, los enlaces rotos y las páginas que no existen.

Es cierto que hasta ahora, esos Errores de rastreo se mostraban indicando la URL que no existía o era inaccesible pero, no nos decía en que parte de nuestro sitio estaba el error lo que hacía muy difícil dar con el problema y corregirlo.

Como bien dicen ellos mismos, es posible que no todos los errores sean problemas reales así que habrá que leer y evaluar. Por ejemplo, en Blogger podemos ignorar todo lo indicado como Errores de HTTP, Errores de URL en sitemaps, No se han seguido estas URL, URL restringidas por robots.txt y URL inaccesibles. Deberíamos centrarnos sólo en los errores mostrados en No se ha encontrado.

La lista a veces puede ser bastante larga pero ... paciencia.

Haciendo click en el enlace que indica la cantidad de páginas donde se ha encontrado el error, nos mostrará la URL de cada una de los posts donde se ha detectado el error así que deberiamos editarlos y, de ser posible, corregirlos.

El error más común que se produce es cuando nos "comimos" el prefijo http://

<a href="www.prototypejs.org/">

así que lo agregamos y guardamos:

<a href="http://www.prototypejs.org/">

Nota: este error maldito lo ando buscando hace casi un año

Digo que los corregiremos "de ser posible" ya que no siempre podremos hacerlo; por ejemplo en este caso, el error anterior ha creado otros como una URL errónea en los feeds o en los comentarios. Con esos, sólo deberemos esperar que se corrijan solos. Pero también nos mostrará errores de páginas que nos enlazan y que ya no existen; ahí no hay mucho que podamos resolver así que, inevitablemente, deberemos convivir con ellos.

Una posible solución para ciertas URLs extrañas como las de las búsquedas o las etiquetas es agregar el atributo nofollow para evitar que se indexen esos enlaces:

<a rel="nofollow" ....... >

REFERENCIAS:

Google Blog

Actualización de Flash Player

Adobe ha anunciado que ya está disponible una nueva versión del Flash Player y, más allá de las mejoras, es una buena noticia para quienes usamos Firefox 3 ya que parecen haber solucionado los problemas de un bug que estaba bastante extendido pero que, extrañamente, no afectaba a todos los usuarios e incluso en estos casos, el error era intermitente.

Tanto Mozilla como Adobe habían confirmado el problema y ahora dicen haberlo solucionado.

La nueva versión es la 10.0.12.36 para Firefox, Mozilla, Netscape, Safari, Opera y conviene actualizarla para evitar problemas.

Si no estamos seguros de cuál es la version que tenemos instalada, podemos ir a esta página de Adobe donde nos lo mostrarán.

Entre las mejoras disponibles para lso desarrolaldores, la Sizlopedia habla de efectos 3D, filtros y efectos personalizables, nuevas funciones para el diseño avanzado de textos, mejoras en los APIs, el rendimiento, la velocidad y el sonido cuando se utiliza audio en formato MP3 (más información).

Sólo para valientes :-)

Recomiendo abrir el siguiente enlace en una nueva ventana o atenerse a las consecuencias.

CLICK PARA CORRER EL RIESGO

Bueno, no es para tanto pero un poco de emoción nunca está de más

Avisar si el navegador esta desactualizado

Muchos blogs sugieren usar un navegador u otro, no es algo que me convenza demasiado pero con Pushup es posible amplair un poco esas posibilidades ya que es un script cuyo fin es ayudar a los usuarios a actualizar sus navegadores en el caso de detectar que los visitantes están utilizando una versión "vieja".

El ZIP lo descargamos desde la pagina principal y allí hay abundante documentación sobre las opciones disponibles.

REFERENCIAS:

labnol.org

Dhonishow: Un slideshow particular

Hace unos días, Claudio comentaba sobre un slideshow llamado Dhonishow así que allí fui a ver de que se trataba y si era posible usarlo en Blogger. No parece haber problemas en hacerlo aunque, tal vez, requiera entender como funciona para poder adaptarlo.

Lo primero que debemos saber es que utiliza Prototype y Scriptaculous así que si no las tenemos en la plantilla, debemos descargarlas y agregarlas. Lo más sencillo, es usar las que provee Google, copiando y pegando este código antes de </head>:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

En el sitio de origen hay un ZIP

que podemos descargar y que contiene todo lo necesario. Luego, alojaremos los dos archivos en un servidor y los agregaremos a la plantilla o página web también antes de </head>:

<script src='URL_dhonishow.js' type='text/javascript'></script>
<link rel='stylesheet' href='URL_dhonishow.css' type='text/css' />

Para usarla, vamos a tener que modificar algunas cosas y para modificarlas, vamos a tener que definir previamente qué queremos hacer.

La idea del slideshow es mostrar una serie de imágenes de una manera particular, partidas en tres pedazos que pueden navegarse de manera independiente así que, lo primeo es definir el tamaño de las imágenes a usar y luego, dividirla en tres partes iguales:

En este ejemplo, he partido de una imagen de 510x295 así que me han quedado tres imágenes de 170x295. Esos datos son los que debemos modificar en el archivo CSS, al igual que cualquier otro detalle que quisiéramos personalizar (fuentes, bordes, etc). Estas son las propiedades usadas en el ejemplo:

.dhonishow {
  float: left;
  overflow: hidden;
  width: 173px; /* el ancho de cada sector y un poquito más para que se separen */
}
.dhonishow * {
  border: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 5px;
}
.dhonishow-image {
  background-color: #101921;  /* un color de fondo para las transiciones */
  height: 295px;  /* la altura de las imágenes */
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 170px; /* el ancho de cada sector */
}
.dhonishow-image li {
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
}

/* el área inferior que permite navegar las imágenes y que es completamente configurable */
.dhonishow-navi {
  border-bottom: 1px solid #5E7286;
  border-top: 1px solid #5E7286;
  color: #FFFFFF;
  margin: 2px 0 10px 0;
  overflow: hidden;
  padding: 5px;
  width: 170px; /* el ancho de cada sector */
}
.dhonishow-picture-alt { /* oculto el nombre de cada imagen */
  display: none;
}
.dhonishow-navi .dhonishow-next-picture, .dhonishow-navi .dhonishow-previous-picture {
  cursor:  pointer;
  float: right;
  height: 18px;
  margin: 0;
  text-indent: -999px;
  width: 16px;
  -moz-outline: none;
}
.dhonishow-navi .paging {
  float: right;
  font-size: 18px;
  margin: 0 10px 0 0;
  line-height:18px;
}

#dhonis{ /* es una gregado para centrar todo el slidshow */
  width:520px; /* el ancho total incluyendo márgenes */
  margin:0 auto; /* así se centra */
}

/* son las imágenes que se muestran como enlaces y puede usarse cualquier otra */
.dhonishow-navi .dhonishow-next-picture {
  background: url(http://img80.imageshack.us/img80/622/nextcu7.gif) no-repeat;
}
.dhonishow-previous-picture {
  background: url(http://img235.imageshack.us/img235/6748/previousdp2.gif) no-repeat;
}
.dhonishow-next-picture:hover {
  background: url(http://img80.imageshack.us/img80/7755/nexthoverqp4.gif) no-repeat;
}
.dhonishow-previous-picture:hover {
  background: url(http://img76.imageshack.us/img76/6205/previoushovergb2.gif) no-repeat;
}

Supongamos entonces que todo está listo y ya decidimos qué imágenes poner y las tenemos divididas. Ahora, falta el HTML que, en este ejemplo, como son cuatro imágenes, será algo así:

<div id="dhonis">
  <!-- aquí colocamos el sector izquierdo de cada una de las imágenes -->
  <div class="dhonishow effect_blind duration_2 autoplay_5">
    <img src="URL_imagen-1_parte-1" width="170" height="295" />
    <img src="URL_imagen-2_parte-1" width="170" height="295" />
    <img src="URL_imagen-3_parte-1" width="170" height="295" />
    <img src="URL_imagen-4_parte-1" width="170" height="295" />
  </div> 
  <!-- aquí colocamos el sector central de cada una de las imágenes -->
  <div class="dhonishow middle effect_appear duration_2 autoplay_5">
    <img src="URL_imagen-1_parte-2" width="170" height="295" />
    <img src="URL_imagen-2_parte-2" width="170" height="295" />
    <img src="URL_imagen-3_parte-2" width="170" height="295" />
    <img src="URL_imagen-4_parte-2" width="170" height="295" />
  </div>
  <!-- aquí colocamos el sector derecho de cada una de las imágenes -->
  <div class="dhonishow effect_horizontal duration_2 autoplay_5">
    <img src="URL_imagen-1_parte-3" width="170" height="295" />
    <img src="URL_imagen-2_parte-3" width="170" height="295" />
    <img src="URL_imagen-3_parte-3" width="170" height="295" />
    <img src="URL_imagen-4_parte-3" width="170" height="295" />
  </div>
</div>

Es posible colocar cualquier cantidad de imágenes pero, siempre serán tres sectores.

Cada uno de esos DIVs tiene una clase CSS que es la que controlará el efecto. Puede usarse effect_blind, effect_appear, effect_blind, effect_slide o effect_horizontal.

Con duration_valor, establecemos el tiempo que durará la transición y con autoplay_valor el tiempo que permanecerá visible cada imagen.

Eventualmente, también podría ocultarse la barra de navegación inferior o algunas de sus partes de esta manera:

<div class="dhonishow hide_paging" ....... >
<div class="dhonishow hide_alt" ....... >
<div class="dhonishow hide_navigation" ....... >

"Cositas para Twitter" :-)

Las "más cositas para Twitter" que twitea hace un par de días Gem@

son una colección de 25 herramienatas y servicios surtidos, algunos que conocía y otros bastante novedosos. Cositas para jugar un rato y ver qué pasa

Twitter Patterns no es un servicio, sólo tiene una colección de fondos que pueden descargarse y luego, subirlas y modificar el diseño de nuestra página.

TwitterFeed es conocido y lo vengo usando desde el inicio. Una vez que nos registramos con un OpenID, ingresamos la URL de nuestros blog y el servicio se encarga automáticamente de crear un tweet cada vez que publicamos una entrada. Tiene opciones varias para ser configurado y es muy sencillo de usar; una de esas cosas que uno habilita y luego se desentiende de ellas.

Twitt’d permite agregar un "contacto" especial a varios servicios de mensajería instantánea y a través de él, publicar en Twitter directamente:

para Google Talk y las redes Jabber hay que agregar twittd@jabber.org
para Yahoo Messenger hay que agregar twittd
para Windows Live Messenger hay que agregar twittd@live.com
también está disponible para Skpe y AIM

TwitterMail ofrece una cuenta de correo de tipo:abcdef1234@twittermail.com
enviando un mail a esa dirección, el contenido se publica en nuestra cuenta de Twitter.

TwitWall permite incrustar contenido multimedia (videos, imágenes, MP3) e incluso podcasts. Se asocia con nuestra cuenta y es una especie de extensión muy interesante.

TweetDeck es una aplicación de escritorio impresionante pero para usarla debe tenerse Adobe Air instalado en nuestra PC; está en versión Beta pero vale la pena probarla.

Problemas de congestionamiento

Y si los Beatles usaran bandoneones ...

A veces, la música de fusión puede tener sabor a nada; a veces, puede tener muchos sabores y mostrar que aquello del mestizaje no es una mala palabra y que las fronteras sólo son líneas en los mapas y en nuestras cabezas.

Beatles + Piazzolla pueden ser cosas que a un oyente desprevenido le parezcan tan disimiles que conjugarlas parezca imposible y sin embargo ... gracias a Dios hay un sin embargo ...

Click para ver el video.

Tangoloco es un quinteto creado y dirigido por Daniel García (piano, arreglos y dirección musical) en el que intevienen Walther Castro (bandoneón), Horacio Montesano (guitarras eléctricas), el Mono Hutado (contrabajos) y Christian Colaizzo (bateria y percusión) y fue fundado allá por el 2002 cuando editan su primer CD.

Dos años después, en el 2004, sale su segundo album llamado Tangos de Liverpool y allí aparece la magia, la fuerza y toda la pasión que no puede dejar de escucharse aunque más no sea para saber que siempre hay algo más y que While my guitar gently weeps puede ser lo mismo que Guitarra y bandonéon, van a llorar o que el Yellow submarine no es otra cosa que un Amarillo Subte B.


Click para ejecutar los videos.

Y bueno, un poco más no le hace mal a nadie ...

Click para ejecutar el video.

From BA to NY, Here, there and everywhere.

Wallpapers (tecnología)

Extensión para la barra de direcciones

UrlbarExt es una extensión que amplia las funciones de la barra de direcciones de Firefox, agregando una serie de íconos con funciones especiales:

Avanza un nivel en el directorio del sitio o retrocede hasta el home

Copia la dirección URL del sitio en el portapapeles

Genera una dirección abreviada utilizando tinyurl.com

Buscar en el sitio utilizando Google

Etiqueta la página

Permite navegar de manera anónima usando servidores proxy

Los íconos pueden ser mostrados u ocultados utilizando about:config; por ejemplo, podemos ocultarlos colocando el valor en TRUE:

extensions.urlbarext.hide.up.icon
extensions.urlbarext.hide.tags.icon
extensions.urlbarext.hide.search.icon

o bien podemos editar las etiquetas cambiando los valores de:

extensions.urlbarext.tags

Como la extensión es experimental, hay que registrarse en Mozilla para descargarla.

Seis técnicas para títulos usando CSS

En BulletProofBox hay un artículo que muestra algunas de las técnicas más comunes para manejar textos con CSS.

Aunque puede descargarse un ZIP

con los ejemplos, me parece que igual vale la pena darles una mirada a cada una de ellas.

1. Para textos grandes como los títulos, lo mejor es recurrir a fuentes de tipo sans serif (Arial, Basic Sans SF o Helvetica).

Los títulos MUY grandes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="big-bold">
  <h1 class="big-bold">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#big-bold {
  background-color: #FFF;
  color:#000;
}
h1.big-bold {
  font-family: 'basic Sans sf', arial, helvetica, sans-serif;
  font-size: 2.1em;
  color: orange;
}
#big-bold p {
  font-family: arial, helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.6;
}

2. Utilizar imágenes de fondo que se superpongan con el texto a modo de transparencias (no funciona en IE).

Gradientes Sobre Títulos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="gradient">
  <h1 class="gradient"><span></span>EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#gradient {
  background: #000;
}
h1.gradient {
  font-family: arial, helvetica, sans-serif;
  font-size: 38px;
  line-height: 38px;
  color: #FFFF;
  position: relative;
}
h1.gradient span {
  background: url(URL_h1-gradient.png) top left repeat-x;
  display: block;
  height: 20px;
  position: absolute;
  width: 100%;
}
#gradient p {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 0.8em;
  color: #CCC;
  line-height: 1.6;
}

3. Estos es sencillo, para transformar el texto a a mayúsculas, sólo hace falta usar la propeidad text-transform:

Poniendo todo en mayúsculas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="uppercase">
  <h1 class="uppercase">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#uppercase {
  background: #000;
}
.uppercase {
  font-family: georgia, "times new roman", times, serif;
  font-size: 1.2em;
  text-transform: uppercase;
}
#uppercase p {
  font-family: georgia, "times new roman", times, serif;
  font-size: 0.9em;
  line-height: 1.4;
}

4. Con las propiedades letter-spacing y word-spacing podemos controlar la separción de las letras y las palabras. Es muy útil para usar en los títulos.

LetterSpacing y WordSpacing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="spacing">
  <h1 class="spacing">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

h1.spacing {
  font-family: Tahoma;
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-spacing: 0.1em;
  color: #ccc;
}
#spacing p {
  font-family: tahoma, georgia, "times new roman", times, serif;
  font-size: 0.9em;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

5. Una forma distinta de subrayar los títulos, usando imágenes de fondo.

Efecto de títulos subrayados

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="underline">
  <h1 class="underline">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#underline {
  background: #EEE;
}
h1.underline {
  background: url(URL_h1-underline.png) bottom left no-repeat;
  font-family: georgia, "times new roman", times, serif;
  font-weight: lighter;
}
#underline p {
  font-family: "trebuchet ms", verdana, sans-serif;
  font-size: 0.9em;
}

6. Colocar la primera letra de un párrafo con una fuente exageradamente grande, se llama drop caps y es sencillo de hacer aunque requiere ajustar muy bien los valores.

Usando la técnica de DropCap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="dropcap">
  <h1 class="dropcap"><span>E</span>L TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

h1.dropcap {
  font-size: 28px;
  font-family: arial, verdana, sans-serif;
  line-height: 28px;
}
h1.dropcap span {
  font-size: 80px;
  font-weight: lighter;
  position: relative;
  float: left;
  line-height: 50px;
  color: #CCC;
}
#dropcap p {
  font-family: georgia, "times new roman", times, serif;
  font-size: 0.9em; 
  line-height: 1.4;
}

REFERENCIAS:

Cosas Sencillas

La seguridad bien entendida empieza por casa

Hace unos días, Rosa

se hacía eco de un informe publicado por StopBadware donde se indicaba que Blogger se había convertido en uno de los sitios más peligrosos de la red ya que se habían detectado unos 4000 sitios con contenido malicioso alojados en su servicio.

"Considerando que es un servicio gratuito y que por su naturaleza de blog puede enlazar hacia cualquier cosa, la gente ha encontrado la forma de aprovechar este factor creando numerosos blogs que incorporan enlaces peligrosos y en algunas oportunidades incluso código maligno ejecutable desde la página."

Como Google es uno de los partners de StopBadware, también se agrega que "Google hace todo lo posible por eliminar el software maligno desde su sitio." Mientras tanto, otros analistas como SecTheory creen que Google podría hacer más al respecto y, entre otras cosas, el hecho de permitir el uso de scripts en su servicio de blogs aumenta el riesgo de contenido peligro.

La preocupación no es menor aunque 4000 sitios parece una cifra absolutamente ridícula y porcentualmente baja; de hecho, muchas veces se ha dicho que casi el 50% de los blogs creados en Blogger son spamblogs e imagino que la realidad debe estar en alguna parte allí en el medio.

No es la primera vez que salen noticias de este tipo y siempre me he preguntado lo mismo ¿para qué sirven? Hace un tiempo, en bsod

analizaban otra noticia similar: 1 de cada 10 sitios es peligroso para Google. Hay otras similares: Blogger aloja el 2% del malware que hay en el mundo. No creo que nadie sepa exactamente el número, no creo que haya estadísticas reales, no estoy muy seguro de si es posible que las haya cuando estamos hablando de un universo tan dinámico y cambiante; lo cierto es que existen y que si bien las empresas o servicios deberían poner las barba en remojo para mejorar la situación, sólo hay alguien que puede ayudarnos porque es el único en quien podemos confiar: NOSOTROS MISMOS.

En Sin Miedo dicen:

Sólo hace falta haber navegado un par de meses para haber aprendido las tres reglas del "buen navegante". A saber y por orden de prioridad:

sentido común a la hora de descargar un archivo o de ver una página web
un buen firewall
un antivirus

Siguiendo estas tres reglas es difícil que tengas problemas en tu ordenador, ¡OJO! digo difícil, pero no imposible, siempre puede atacarte algún "bichejo dañino", los que estamos todo el día conectados a la red tenemos este riesgo.

Es que la seguridad absoluta no existe. Hace rato que a seguro se lo llevaron preso y hoy cumple cadena perpétua. El problema pasa por otro lado y fundamentalmente, como se dice allí: POR EL SENTIDO COMUN y yo agregaría por la EDUCACIÓN.

Que Blogger permita o impida usar scripts es irrelevante a menos que creamos que la seguridad es un montón de cartelitos advirtiéndonos que esto "puede" ser peligroso y que aquello "puede" ser dañino. Porque la realidad es que "puede serlo" pero "puede no serlo" y que sólo nosotros podemos tomar la decisión y asumir la responsabilidad.

Si caminamos por la calle mirando con preocupación a todos los que nos cruzamos porque creemos que "pueden" ser criminales, caemos en la paranoia y lo que es más grave aún, estamos sentando las bases para que alguien, en algún momento, nos venda la receta mágica y nos diga: CONFIEN EN MI, YO LOS CUIDARÉ. Papito sabe, papito es bueno, sólo cédanme algunos de sus derechos y yo los protegeré de los malos ¿Esto suena conocido?

LinkedTube: Agregando botones en los videos

LinkedTube es un servicio muy interesante que nos permite agregar enlaces en videos de YouTube pero, a diferencia de las "anotaciones" que no admite enlazar páginas externas, estos aceptan cualquier tipo de URL y además, los podemos incrustar en cualquier página web de manera similar al resto de los videos.

No hace falta registrarse y las opciones son sencilla. Una vez que ingresamos a la página, agregamos los datos:

El ID del video: http://www.youtube.com/watch?v=2yKlUwpHuo0
El texto que queremos que se vea en el botón
La URL que se abrirá cuando hagamos click
El modo en que veremos el botón: siempre, sólo cuando coloquemos el mouse encima del video o nunca.
Los textos explciativos que se verán al colocar el mouse encima del botón.

Cada cambio se previsualizará en tiempo real así que es fácil ir corrigiendo detalles. Una vez que logramos lo que queremos, hacemos click en Save & Get Code y nos dará un código que es el que deberemos copiar y pegar.

Como con cualquier otro video, lo único que necesitamos es la URL del reproductor que, por cierto, es bastante larga:

http://www.linkedtube.com/static/flash/player.swf?sum=enlace%20a%20neocube.com&btn=enlace%20a%20neocube&txt=neocube.com&vis=always&url=http%3A%2F%2Fwww.theneocube.com%2F&vid=gidumziw4JE&get=yes

En estos ejemplos, estoy usando el código que uso habitualmente y también le he eliminado el último parámetro &get=yes ya que si lo dejaba, se mostraba el código en lugar del video.

No tiene muchas restricciones así que también podemos incluirlo en una ventana modal como LightWindow. Este es el mismo ejemplo anterior: Click para ver el video

En este último ejemplo, el enlace es a una etiqueta de Blogger y el botón sólo se muestra cuando colocamos el mouse encima del video:

REFERENCIAS:

labnol.org

Sin edad

Buscamos a Sofía

No es rubia.
No es inglesa.
No se llama Madeleine.
Se llama Sofía y tiene tres años.

Buscamos a Sofía

Mostrar y ocultar la sidebar

La primera vez que vi esto de tener dos botones que permitian a los visitantes ocultar o mostrar la sidebar fue en un blog de WordPress y me pareció interesante porque, en ese caso, como los textos eran muy extensos, verlos en la pantalla completa los hacía más fáciles de leer. Estuve tratando de entender cómo lo habían implementado pero me di por vencido; no recuerdo si usaba un plugin o alguna librería.

OCULTAR SIDEBAR | RESTAURAR SIDEBAR

Hace poco más de un mes, vi una entrada en Pizcos Blog que mostraba cómo hacerlo utilizando styleswitch.js, el script de Dynamic Drive que Gem@ explicó recientemente para modificar los colores de fondo del blog y que usé durante mucho tiempo cuando no teminaba de decidirme por cúal era el ancho adecuado.

La idea del script es ingeniosa y sirve para cualquier cosa; simplemente se trata de tener dos juegos de hojas de estilo CSS y usar una u otra. Como ambas están "pre-cargadas" los cambios son instantáneos. Para colmo, tiene una ventaja, el script crea cookies así que el visitante que selecciona un modelo, lo continuará viendo la próxima vez que ingrese.

Hasta acá, es la solución ideal para ocultar la sidebar a voluntad o bien para hacerlo de forma condicional, cargando directamente la hoja de estilo alternativa; por ejemplo podríamos decidir tener un modelo para la página principal y otro para las páginas individuales; una lateral y otra inferior, etc.

El único problema surge de las dificultades de alojar archivos externos y sobre todo, los de tipo CSS. Como hay quienes no pueden hacerlo o no quieren depender de ellos, podríamos usar una alternativa simplificada que hará lo mismo aunque de manera más limitada ya que no permitirá "recordar" la opción seleccionada.

Veamos lo que dice Pizcos y que es absolutamente correcto:

En una plantilla estandard, hay dos bloques que establecen el ancho de la sección donde están los posts y la sección de la sidebar. Por ejemplo, en mi caso dicen esto:

#main-wrapper {
 ...
 width: 600px; /* el ancho de los posts */
}
#sidebar-wrapper {
 ...
 width: 240px;  /* el ancho de la sidebar */
}

Así que el ancho total es igual al ancho de main-wrapper más el ancho de sidebar-wrapper. Entonces, si no estuviera la sidebar, el ancho disponible sería de 600+240=840 pixeles aunque, allí, también deberíamos tener en cuenta el margen de la sidebar si es que existe (en mi plantilla es de 20 pixeles) por lo que el espacio total quedaría en 860 pixeles.

La hoja de estilo alternativa debería tener entonces dos variaciones, cambiar el nuevo ancho y ocultar la sidebar:

#main-wrapper {
 ...
 width: 840px;  /* el ancho de los posts */
}
#sidebar-wrapper {
 ...
 display: none;  /* ocultamos la sidebar */
}

Como en este ejemplo sólo hay dos propiedades que debemos cambiar, tambien sería posible cambiarlas de manera directa, usando JavaScript pero sin archivos externos:

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='860px';">OCULTAR SIDEBAR</a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='600px'">RESTAURAR SIDEBAR</a>

Por supuesto, puede ser que haya alguna otra propiedad que cambiar pero eso dependerá de cada plantilla y claro, sin son demasiados, habrá que recurrir a otro sistema.

Una alternativa a styleswitch.js es otro script llamado ProtoSwitcher que permite hacer lo mismo pero usando Prototype.

La diferencia fundamental es que no requiere tener archivos alternos lo que es una ventaja pero, es un poco más complejo de entender y no hay mucha información al respecto aunque podemos descargar un demo completo para experimentar

Para los preocupados por el tema velocidad de la carga, debo volver a recordar que "ocultar" elementos con CSS no implica aliviar el proceso de carga ya que, esten o no visibles, los elementos se cargan igual así que la solución para ese tipo de problemas no se resuelve con ninguna de estas técnicas.

Usando Mail-to-Blogger

Para publicar posts en Blogger via email debemos usar la Mail-to-Blogger cuyas opciones las encontramos en Configuración | Correo Electrónico.

En Dirección de BlogSend podemos escribir hasta 10 direcciones de correo (separadas por comas) para que reciban el contenido del blog por correo cada vez que se publique algo. No es aconsejable hacerlo a menos que quien las va a recibir nos lo haya solicitado. Usando GMail es posible ampliar esa cantidad si creamos un grupo en Google Groups de esa manera, también es posible aumentar la cantidad de usuarios de un blog privado que por defecto está limitada a 100 (más información).

También es una opción que podemos utilizar para enviarnos a nosotros mismos una copia de los posts publicados a manera de backup.

El segundo cuadro de texto que se nos muestra es donde debemos ingresar la Dirección Mail-to-Blogger que es la URL a donde enviaremos los posts. Si tenemos varios blogs, cada uno deberá tener una dirección diferente de tipo:

nombre.ladireccion@blogger.com

Esa dirección es muy pero MUY importante; tanto como las contraseñas ya que de lo contrario, cualquiera podría publicar en nuestro blog si bien hay dos opciones más: si queremos que los envios se publiquen de manera inmediata o si queremos que se guarden como borradores (es lo más prudente).

El sistema funciona correctamente. El asunto del mail será el título del post pero es importante saber cuales son las limitaciones y sobre todo, cómo se maneja el contenido HTML. En ese sentdo, Blogger no tiene demasiadas restricciones, las restricciones vienen de parte de los clientes de correo que son bastante limitados aunque, si el software que usamos los soporta, podemos editarlo.

Si hablamos de GMail, todos los controles del editor funcionan perfectamente (formatos de los textos, fuentes, colores, enlaces, listas, alineamiento, sangrías y citas. Con otros clientes de escritorio es posible agregar tablas, clases CSS e incluso algunos scripts para controlar eventos como onmouseover.

No parece haber forma de agregar etiquetas pero ¿qué pasa con las imágenes?

Podemos adjuntarlas, en cuyo caso se guardarán en Blogger y se incluirá un código como este, al inicio del post:

<p class="mobile-photo"><a href="http://.../s1600-h/laImagen"><img src="http://.../laImagen"></a></p>

Si ya las hemos subido previamente a algún servidor, bastará arrastrarlas desde una página cualquiera al editor de GMail, en cuyo caso se agregará una etiqueta normal:

<img alt="http://..." src="http://.../laImagen">

Un detalle a tener en cuenta es que, como muchas veces, los clientes de correo agregan una firma al final de cada mensaje, es bueno que terminemos el mail con:

#end

lo que indicará el final del post y hará que todo lo que esté debajo sea ignorado y no publicado.

99counters: Contando visitas

99counters es un sitio donde pueden crearse contadores de visita personalizados.

Una vez que nos registramos podemos seleccionar entre varios modelos y establecer las características básicas.

Guardamos y nos darán dos códigos posibles, un objeto Flash y un script. Sugiero que copiemos el código del Flash y lo editemos a mano para eliminar publicidad indeseada. Este es el código original:

<object type="application/x-shockwave-flash" 
  data="http://www.99counters.com/counters.swf?id=XXXX&ln=es" 
  width="175" height="200" wmode="transparent">
<param name="movie" value="http://www.99counters.com/counters.swf?id=XXXX&ln=es" />
<param name="wmode" value="transparent" />
<embed src="http://www.99counters.com/counters.swf?id=6961&ln=es" 
  type="application/x-shockwave-flash" 
  wmode="transparent" width="175" height="200">
</embed>
<br>
<a href="http://www.onlinecasinoextra.com/">gambling</a>
<a href="http://es.99counters.com/">Contador De Visitas</a>
</object>

Que cambiaría por esto:

<object width="175" height="200" id="movie" 
type="application/x-shockwave-flash" 
data="http://www.99counters.com/counters.swf?id=XXXX&ln=es">
<param name="movie" value="http://www.99counters.com/counters.swf?id=XXXX&ln=es" />
<param name="wmode" value="transparent" />
</object>

Es decir, usaría sólo el ancho, el alto y la URL del archivo para colocarlo tal y como haría con cualquier otro archivo SWF.

Un adicional de este servicio es que podemos crear tantos contadores como queramos y cada uno posee su propia página de estadísticas que podrá ser pública o privada. Allí podremos ver tanto los usuarios online como el total de visitas en cierto tiempo.

REFERENCIAS:

Aborregate

Otpor (1978)

Click para ver el video.

Otpor! (En alfabeto cirílico: ОТПОР!, en castellano: ¡Resistencia!) fue un movimiento juvenil pro-democrático en Serbia que desarrolló una intensa campaña para expulsar del poder a Slobodan Milósevic. Se formó el 10 de octubre de 1998 en respuesta a las leyes represivas contra la universidad aprobadas durante ese año (más información).

Decidimos amar la vida y la vida no se puede derrotar.

La caida de un dictador: la historia de Otpor en español (55:40 minutos)

Click para ver el video.

Wallpapers (todo Mac)

Me gusta ... no me gusta

Click para ver el video.

REFERENCIAS:

Poca Tinta

Wowzio: Widgets que vale la pena mirar

Wowzio es un sitio que dispone de widgets muy originales y donde, para crearlos, no hace falta registrarse. Entramos directamente y lo que debemos colocar es la URL de nuestro feed o la del blog (una o varias ya que pueden combinarse sitios).

Hecho esto, en unos segundo se verificará que sea correcto y nos mostrará una lista con el título de las últimas entradas; seguimos adelante para elegir alguno de los modelos disponibles que se mostrarán como previsualizaciones que podemos personalizar.

Panoramic SlideShow y Photo Gallery buscan las imágenes de los posts y las muestran en una galería.

Wowzio

grab widget • see more

Live Activity muestra los visitantes en tiempo real y que están leyendo (hay que ser paciente para que registre los datos).

Tag Cloud muestra una lsita de etiquetas, extraidas del blog, de Technorati y las muestra en una nube donde cada palabra es un enlace.

Feed Content es uno de los más sencillos pero a la vez, uno de los más poderosos, muestra hasta 500 entradas, tanto textos como imágenes y tiene muchas opciones de configuración.

Wowzio

grab widget • see more

Para todos nos dan un código que podemos copiar y pegar o bien utilizar la herramienta de instalación automática si es que vamos a agregarlo como un elemento en la sidebar.

REFERENCIAS:

La Bloguería

Divagaciones sobre el PageRank

Leo una pregunta abierta y copio algunas de las alternativas para responder esta encuesta: ¿Para qué sirve realmente aumentar el PageRank de tu blog?

Para presumir delante de tus amigos bloggers.
Para conseguir nuevos o mejores patrocinadores.
Para que te lean más personas.
Para pensar que te estás volviendo todo un profesional de la blogocosa.
Para dejar de hablar mal del PageRank, de Google y de AdSense.
Para pensar que te estás convirtiendo en un topblogger.
Para motivarte .. abrir nuevos sitios .. invertir más tiempo y dinero en negocios en internet.

Se dice que el PageRank es un modo de determinar el valor de un sitio web pero, la discusión entonces es otra: definir la palabra valor y allí entran las subjetividades ¿Cómo medimos el valor? ¿por la utilidad? ¿por el esfuerzo? Opiniones, confusión, nadie se ha puesto de acuerdo; no es necesario hilar fino para darse cuenta que nadie tiene una respuesta o mejor dicho, que hay tantas respuestas como personas respondiendo ¡Amén!

El PageRank de Google es extraño; no sólo porque nadie sabe muy bien cómo se calcula sino porque de entrada, está teñido de subjetividad: depende de la calidad de los enlaces que recibe una web

Es decir, el PageRank depende del PageRank. No se si se comprende pero es un círculo vicioso. Google califica los sitios de acuerdo a la calificación que le da a otros sitios por lo tanto, es tan arbitario como nuestros propios gustos personales; la única diferencia es que Google es Google y nosotros no.

Desde la práctica, el PageRank sólo es "útil" para los sitios que poseen publicidad. Por ahora, es un parámetro que los anunciantes miran, no sé por qué ya que no parece ser un dato relevante pero, es así y no me voy a poner a discutir con los popes de la merdicadotecnia, ellos saben lo que hacen hasta que claro, las burbujas explotan pero, esa es otra historia.

Lo curioso del asunto es que ese mismo "valor" lleva a muchos sitios a ampliar las posibilidades de anuncios y entonces ¡oh paradoja!, Google los penaliza. Es la locura total. Te subo el PageRank y con eso "te valoro"; te aprovechas de ese valor y agregas publicidad vendiendo enlaces ya que los anunciantes reconocen ese valor y entonces te lo bajo porque vendes eso mismo que yo te di. Pregunta ¿para que te lo di? Respuesta: no tengo idea pero suena a palos porque bogas y palos porque no bogas. Por estas tierras lo llamaríamos el síndrome del gataflorismo.

Para que los decepcionados no se sientan solos, en labnol.org dicen que la cantidad de sitios con PR10 también ha cambiado sustancialmente y que en estos momentos, sólo hay dos: www.google.com (obviamente) y www.usa.gov (obviamente pero obviamente distinto). Muchos otros como apple.com, adobe.com, whitehouse.gov, www.w3.org, nasa.gov, intel.com, real.com, apache.org, stanford.edu y energy.gov bajaron su posición de 10 a 9.

Lo que dicen las leyes de la física es que todo lo que sube tiene que bajar. Lo que dicen las leyes de Google es que nosotros podemos hacer lo que se nos ocurra y ellos también; sin explicaciones, acomodando las reglas de acuerdo a como va el juego y eso es lógico; para eso son los patrones de la internet ¿o que se creían?

Encontrar el enlace directo en ImageShack

Algunos cambios en la forma en que funciona ImageShack han provocado consultas respecto a imágenes que no se ven.

Más allá de los problemas que pude sufrir el servicio, la gran mayoría de esos errores son debidos a que no copiamos el código correcto y en eso, el servicio parece haberse empeñado en hacerle la vida más complicada a la gente ya que, el enlace directo a la imagen, que es lo que usualmente buscamos, lo han escondido, bien escondido.

Una vez subida la imagen, nos muestran una serie de opciones y links que simplemente debemos ignorar y nos vamos directamente al final de la página donde aparece esto:

+ Show Advanced Linking

Haciendo click allí, se mostrará el enlace directo que es el único que necesitamos para usarlo en el blog.

Suscribirse a la entradas

Los títulos MUY grandes

Gradientes Sobre Títulos

Poniendo todo en mayúsculas

LetterSpacing y WordSpacing

Efecto de títulos subrayados

Usando la técnica de DropCap

¿quién soy

y entonces hablaron

últimas entradas