Traduciendo castellano a HOYGAN

¿Alguien sabe lo que es un HOYGAN? Seguramente que sí. Uno de esos que suele comentar escribiendo como si el diccionario fuera un objeto sagrado que debe ser mantenido a buen recaudo porque los dioses gramaticales podrían tomar venganza.

Lo cierto es que no es tan sencillo como parece, requiere una técnica muy afiatada y mucho cuidado al escribir, no sea que en una de esas, lo hagamos bien por equivocación.

No desesperen, en vidoblog.net hay un traductor online que nos facilitará la tarea.

Click para abrir en una ventana modal.

En honor a todos los HOYGANs que alegran Internet con sus preguntas y comentarios.
HOYGAN.vidoblog.net - Traductor castellano a hoygan.

Sólo ponemos el texto y aparecerá la traducción:

¿ALGUIEN SAVE LO KE ES UN HOYGAN? SEGURAMENTE KE SI. UNO DE HESOS KE SUELE KOMENTAR HESCRIVIENDO KOMO SI EL DICSIONARIO FUERA UN HOBJETO SAGRADO KE DEVE SER MANTENIDO A GÜEN RREKAUDO PORKE LOS DIOSES GRAMATIKALES PODRIAN TOMAR BENGANSA.

LO SIERTO ES KE NO ES TAN SENSIIO KOMO PARESE RREKIERE UNA TECNIKA MUY HAFIATADA Y MUCHO KUIDADO AL HESCRIVIR NO SEA KE EN UNA DE HESAS LO HAGAMOS VIEN X HEKIBOKASION.

NO DESESPEREN EN BIDOBLOG.NET HAY UN TRADUSTOR HONLINE KE NOS FASILITARA LA TAREA.

UN APORTE A LA KULTURA ENVIADO POR:

Nico alias NIKO

Esta es un galería de imágenes, realizada en Javascript que a su vez, funciona como slideshow. Aunque su uso tal vez sea limitado, tiene la ventaja de ser muy pequeña y bastante sencilla.

En el sitio original, podemos ver un demo y descargar el ZIP con el ejemplo completo pero, si vamos a intentar utilizarlo en Blogger habrá que hacerle algunas modificaciones más o menos importantes.

Por lo general, cuando hablamos de scripts siempre decimos que hay que ubicar el código en el head de la página. Eso es así porque el código lo vamos a utilizar repetidamente pero, no es el único método. En este caso, la galería está pensada para usarse en páginas individuales por lo tanto, no vale la pena insertarla en la plantilla ya que no nos interesa que se cargue siempre sino sólo cuando la vayamos a utilizar así que, la llamaremos directamente desde un post, el mismo donde irá la galería.

Vayamos por partes. Creamos un post cualquiera y nos colocamos en el modo Edición HTML. Primero que nada, necesitamos insertar el CSS; esto, en Blogger, lo hacemos importándolo:

<style type="text/css">@import url("URL_GAslideshow.css");</style>

#contenedorGaleria { /* es el bloque de toda la galería */
background-color: #848FAA;
border: 6px solid #444F6A;
margin: 0px auto;
padding: 10px;
width: 494px; /* el ancho es el único valor obligatorio y depende del tamaño de la imagen */
}
#contenedorMiniaturas-outter { /* es el bloque externo con las miniaturas */
background-color: #505961;
border:2px solid  #505961;
height: 100px; /* es igual al alto de la miniaturas */
margin-top: 10px;
padding: 0;
width: 490px; /* el ancho siempre debe ser definido */
}
#contenedorMiniaturas-inner { /* es el bloque interno con las miniaturas */
height: 100px;
overflow: hidden;
position: relative;
width: 490px;
}
#lasMiniaturas { /* son las propiedades de la etiqueta UL */
border-right: 5px solid #FFFFFF;
height: 100px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 5000px; /* o cualquier valor MUY alto */
}
#lasMiniaturas li { /* las miniaturas están en etiquetas LI */
float: left; 
cursor: pointer;
margin: 0 1px;
padding: 0;
}
#lasImagenes { /* es el bloque que contendrá las imágenes grandes */
background: #FFFFFF url(URL_loading.gif) no-repeat center center;
border: 2px solid #505961;
height: 272px;
padding: 5px;
position: relative;
width: 480px;
}
#lasImagenes img { /* cada imagen */
position: absolute;
top: 5px;
left: 5px
}
/* las propiedades de los enlaces que sirven para navegar entre imágenes */
.galNavegacion{ }
#galAtras { }
#galAtras:hover { }
#galAdelante { }
#galAdelante:hover { }

Ahora, colocaremos el código HTML de la galería y en un post de Blogger lo tendremos que escribir todo en una sola línea:

<div id="contenedorGaleria">
<div id="contenedorImagenes">
<div id="lasImagenes">
<a href="javascript:imgNav(-1)" class="galNavegacion" id="galAtras"></a>
<a href="javascript:imgNav(1)" class="galNavegacion" id="galAdelante"></a>
</div>
</div>
<div id="contenedorMiniaturas-outter">
<div id="contenedorMiniaturas-inner">
<ul id="lasMiniaturas">
<li value="1"><img src="URL_miniatura_1" height="100" width="175" /></li>
<li value="2"><img src="URL_miniatura_2" height="100" width="175" /></li>
<li value="3"><img src="URL_miniatura_3" height="100" width="175" /></li>
<li value="4"><img src="URL_miniatura_4" height="100" width="175" /></li>
<li value="5"><img src="URL_miniatura_5" height="100" width="175" /></li>
</ul>
</div>
</div>
</div>

Sólo colocamos tantos <li value="N"> como imágenes vamos a usar y las direcciones de las miniaturas que se verán en la parte inferior.

Ahora, establecemos los datos del script. En Blogger, también lo escribiremos en una sola línea:

<script type="text/javascript">
// la lista de imágenes
var imagenGaleria = new Array();
imagenGaleria[0] = ""; // dejar en blanco
imagenGaleria[1] = "URL_imagen1.jpg";
imagenGaleria[2] = "URL_imagen2.jpg";
imagenGaleria[3] = "URL_imagen3.jpg";
imagenGaleria[4] = "URL_imagen4.jpg";
imagenGaleria[5] = "URL_imagen5.jpg";

var imgid = 'lasImagenes'; // el ID del bloque donde se mostrarán las imágenes
var thumbid = 'lasMiniaturas'; // el ID del bloque con las miniaturas
var auto = true; // poner en false si no se quiere que el slideshow funcione automáticamente
var autodelay = 5; // cantidad de segundos entre cada imagen
</script>

Por último, cargamos el script y lo ejecutamos:

<script type="text/javascript" src="URL_GAslideshow.js"></script>
<script type="text/javascript">slideShow();</script>

¿Puede haber problemas? Sí, dependerá mucho de la plantilla donde queramos utilizarlo. Si todo es normal, debería funcionar en IE, Firefox, Opera y Safari.

Para quienes usan Windows Live Writer como herramienta de publicación, el blog oficial de Live ha publicado una serie videos donde se explican algunos de las características generales de este software.

Pueden verse de manera individual o en un solo video de 12 minutos:

REFERENCIAS:

Incubaweb

¿Y si empleamos LightWindow para mostrar el buscador?

Eso es posible ya que nos permite mostrar contenido oculto y, en este caso, sólo le debemos indicar el ID del bloque oculto, precedido por el símbolo #:

<a class="lightwindow"
href="#nombreUnico"
params="lightwindow_width=ancho,lightwindow_height=alto">
Texto o Imagen del enlace</a>

Donde el ancho y el alto serán el tamaño de la ventana modal que vamos a abrir.

Ese bloque oculto, contendrá el formulario:

<div id="nombreUnico" style="display:none;">
....... aquí ponemos el contenido del formulario .......
</div>

Ingrese términos a buscar

Pero LightWindow no es la única forma de hacer esto, en realidad, los trucos de mantener elementos ocultos y mostrarlos sólo bajo ciertas condiciones sirven para casi todo. Son sencillo de implementar y ahorran espacio. Uno de tantos es el que muestran en PHP Development donde, con un pequeño script llamado Dropdown Box, se pueden agregar controles desplegables como menúes, cajas de texto o formularios.

Como usan una técnica JavaScript interesante, modificándola un poco puede adaptarse para, por ejemplo, colocar un buscador oculto que sólo se despliegue cuando hacemos click.

Este es un modelo cualquiera que utiliza ese script donde, casi todo es CSS. Haciendo click se despliega y volviendo a hacer click, se oculta:

El script es muy sencillo y lo podemos copiar y pegar directamente en la plantilla agregando la etiqueta correspondiente justo antes de </head>:

<script type="text/javascript">
[ aqui va el código ]
</script>

o bien guardar el archivo en un servidor externo y luego cargarlo:

<script type="text/javascript" src="URL_attachBuscador.js"></script>

function at_attach(enlaceB,formularioB) {
var elEnlace = document.getElementById(enlaceB); // ID del enlace
var elFormulario = document.getElementById(formularioB); // ID del formulario a mostrar
elEnlace['auxiliar'] = elFormulario.id;
elFormulario['auxiliar'] = elFormulario.id;
elEnlace.onclick = mostraocultarFORM; // mostrar u ocultar el formulario
elFormulario.onmouseover = mostrarFORM;  // mantener el formulario visible
// desmarcar para que desaparezca al quitar el mouse
// elFormulario.onmouseout  = ocultarFORM;
}

function mostrarFORM() {
document.getElementById(this['auxiliar']).style.display = 'block';
}

function ocultarFORM() {
document.getElementById(this['auxiliar']).style.display = 'none';
}

function mostraocultarFORM() {
var cual = document.getElementById(this['auxiliar']);
if (cual.style.display != 'block') {
cual.style.display = 'block';
} else {
cual.style.display = 'none';
}
return false;
}

Para usarlo, sólo necesitamos unas pocas líneas de código y establecer las propiedades CSS. Empecemos con estas, hay cinco declaraciones y las propiedades pueden variar, salvo las expresamente indicadas:

<style>
#demoSEARCH { /* es el pseudo-enlace que expande y contrae el buscador */
cursor: pointer;
/* otras propiedades de estilo */
}
#demoSEARCHform { /* es el formulario que contiene el buscador */
display: none;
/* otras propiedades de estilo */
}
#demoSEARCHform p { /* es el texto superior */
/* otras propiedades de estilo */
}
#demoSEARCHinput { /* es el control donde se ingresa la búsqueda */
text-align: center;
/* otras propiedades de estilo */
}
#demoSEARCHboton { /* es el botón de envío del formulario */
cursor: pointer;
/* otras propiedades de estilo */
}
</style>

En el código HTML, sólo hay dos detalles a tener en cuenta, tanto el pseudo-enlace para expandir y contraer (etiqueta DIV) como el formulario (etiqueta FORM) deben tener un parámetro ID o sea, nombres únicos:

<div id="demoSEARCH">BUSCADOR</div>
<form method="get" action="http://nombreblog.blogspot.com/search" id="demoSEARCHform">
<p>Ingrese su búsqueda:</p>
<input id="demoSEARCHinput" type="text" value="" name="q" />
<input id="demoSEARCHboton" value="Buscar" type="submit" />
</form>
<script type="text/javascript">
at_attach('demoSEARCH','demoSEARCHform');
</script>

Apelar a las AJAX Libraries API de Google es una posibilidad para quienes tiene dificultades a la hora de utilizar algunas de las librerías JavaScript más populares: script.aculo.us, prototype, jQuery, MooTools o Dojo.

Ellos dan tres razones que pueden ser tomadas en cuenta y que cada uno evaluará:

• No hay que preocuparse por la caché, Google se encarga y eso hará que las aplicaciones se ejecuten más rápido.
• El ancho de banda de nuestros sitios no se ve afectado.
• Se mantiene una actualización razonable de las versiones.

En este momento, hay cinco de esas frameworks disponibles:

jQuery 1.2.6 en sus versiones comprimida y descomprimida
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js

prototype 1.6.0.2
http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

script.aculo.us 1.8.1
http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

mootools versión 1,11 en sus versiones comprimida y descomprimida
http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js
http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js

dojo 1.1.1 en sus versiones comprimida y descomprimida
http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js
http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js.uncompressed.js

Podemos hacer dos cosas, usar directamente los archivos alojados allí o bien, cargar el API y "llamar" a la librería que usaremos. Por ejemplo, para cargar prototype y scriptaculous tendríamos el siguiente código:

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

En este caso, debemos cargarlas en el orden correcto ya que una depende de la otra.

Como dato interesante, hay que decir que al cargarse scriptaculous se cargan todos sus módulos: builder.js, effects.js, dragdrop.js, controls.js, slider.js y sound.js.

Para el resto de las librerías, haríamos lo mismo:

google.load("jquery", "1.2.6");
y si queremos usar la versión descomprimida:
google.load("jquery", "1.2", {uncompressed:true});

google.load("mootools", "1.11");
y si queremos usar la versión descomprimida:
google.load("mootools", "1.11", {uncompressed:true});

google.load("dojo", "1.1.1");
y si queremos usar la versión descomprimida:
google.load("dojo", "1.1.1", {uncompressed:true});

REFERENCIAS:

Google Ajax Search API Blog

Hoy, Blogger se levantó exótico y al abrir la ventana Editar Entradas, lo que veía era esto:

Me parece muy original y elegante, casi surrealista pero ... bastante inútil.