Breve aclaración sobre formularios

Los formularios permiten que los visitantes de una página, interactuen con el sitio, trasmitiendo y recibiendo información específica. En HTML, un formulario es todo lo que se encuentra entre la etiqueta <form> y la etiqueta </form>; por ejemplo:

<form action="URL" method="post" enctype="text/plain">
[los elementos para introducir datos y enviarlos]
</form>

El atributo method="post" indica que los datos serán enviados cuando se pulse un botón de envío y que no habrá verificación de ningún tipo. El atributo enctype="text/plain" indica que serán enviados como texto plano.

Las etiquetas de los formularios son muy pocas pero tienen muchas opciones y atributos, vamos a ver las más sencillas y las que podemos aplicar en el Formulario de Contacto:

Para introducir datos se utiliza la etiqueta <INPUT> </INPUT>. Esta instrucción puede ser de muchos tipos:

Un cuadro de textos:

<input name="nombre1" value="" size="20" type="text">

Un cuadro para ingresar contraseñas:

<input name="nombre2" size="20" maxlenght="8" type="password">

Una marca de selección:

<input name="nombre3" value="" type="checkbox">

Una marca de opciones:

<input name="nombre4" value="" type="radio">

Un elemento esencial de cualquier formulario es el botón de envío que se crea con el atributo type="submit":

<input type="submit" value="un_Texto">

Otro botón que puede agregarse con facilidad es el que permite borrar los datos introducidos. Es muy similar al anterior, sólo cambia el atributo type="reset":

<input type="reset" value="un_Texto">

Este sería un ejemplo:

El botón de envío puede sustituirse por una imagen utilizando el atributo type="image":

<input type="image" SRC="URLimagen">

Cuando el texto a introducir es muy largo, es conveniente utilizar un formulario de texto de líneas múltiples, para esto, utilizamos la etiqueta <TEXTAREA> </TEXTAREA>:

<textarea name="nombre" rows="cantidadFilas" cols="cantidadColumnas"/>

Como con cualquier otro elemento HTML, podemos agregar el atributo STYLE para personalizar los controles:

Un área de texto.

La mayoría de los usuarios de computadoras odian esos pequeños "ayudantes" que parecen de tanto en tanto para decirnos algo; el malogrado Clippy es el ejemplo más emblemático de estos intrusos virtuales.

Pero, ¿qué sería de nosotros si viviéramos en China y, como dice Yahoo News, dos policías virtuales patrullasen internet para combatir la pornografía y cualquier tipo de actividad ilegal?

A partir del primero de septiembre, dos avatares (un hombre y una mujer) comenzarán a aparecer en cualquier sitio web registrado en la ciudad de Beijing advirtiendo sobre las posibles acciones inmorales que se estén desarrollando, incluyendo desnudos, juegos de azar, intercambio de archivos multimedia y cualquier otra cosa que se les ocurra. La advertencia, aparecerá cada 30 minutos y será una animación con cualquiera de los ciberpolicias desplazándose a pie, en motos o en autos. Los buenos ciudadanos podrán hacer click sobre ellos, no para sobornarlos sino para enviar un mensaje a la policía (la policía real).

China tiene 137 millones de usuarios y ocupa el segundo lugar en el mundo detrás de Estados Unidos. Como es sabido, el gobierno bloquea sistemáticamente el acceso a sitios extranjeros y cierra páginas que considera obscenas o subversivas.

REFERENCIAS:

Google Blogoscoped

Todo lo que deseaba era poder llegar a este momento para poder empezar a escribir posts de este tipo. Si ellos pueden ... ¿por que yo no? Es el círculo perfecto, la serpiente que se devora a si misma, el perro que se muerde la cola.

Un año atrás no había nada más que un editor muy blanco esperando algo y yo, frente al teclado, tratando que se me ocurriera algo y repitiéndome en voz baja: ¿qué hago acá?

Con más maña que inspiración, las palabras fueron tomando forma y el tiempo hizo el resto, lo único que sabe hacer, continuar, siempre hacia adelante.

No sé dónde he llegado, no sé si hay una meta, por más que avanzo, el horizonte parece permanecer inmóvil allá en el fondo, el editor sigue siendo demasiado blanco y yo, frente al teclado, sigo tratando que se me ocurra algo, repitiéndome en voz baja: ¿por qué sigo acá?

Un año son 365 días u 8.760 horas, parece mucho y es mucho; parece poco y es poco. En un año pueden pasar muchas cosas diferentes o ninguna; exactamente igual que en una fracción de segundo pero, no sé por qué, ciertos números redondos merecen consideraciones especiales y este es uno de ellos.

miércoles, agosto 30 del 2006, 15:41 PM

jueves, agosto 30 del 2007
en algún momento durante la madrugada ...

Me he sentado a escribir esto y he llegado a la conclusión que entonces no tenía la menor idea y ahora ... mucho menos. Tal vez, en eso resida el misterio y justifique en parte las visitas, los comentarios y los mensajes.

También debe ser porque soy blanco, soy negro, rojo, amarillo, pardo e incoloro. Mestizo, ario, oriental, teutón, indio, celta, hispano, anglosajón y gitano. Creo en Diós y en el Diablo y en ninguno de los dos. Tengo una mano izquierda y una mano derecha.

Porque soy punk, hippie, calvo, peludo, gordo, flaco, alto, bajo, dulce, amargo, insípido y sabroso. Alegre, triste, sincero, mentiroso, audaz y profundamente cobarde. Sé cuánto es dos más dos pero nunca encontré a Wally.

Lo único que me diferencia de ustedes es que soy todo eso y algunas otras cosas. Muchas de ellas, las he descubierto en este lugar y necesitaría varios siglos para agradecérselos.

Para agregar etiquetas Technorati y Blogalaxia en Blogger hay muchos trucos pero este es uno de los más sencillos.

Para implementarlo, debemos agregar una serie de códigos en la plantilla. En DiseñoEdición HTML, marcamos Expandir plantillas de artilugios y buscamos el código correspondiente a las etiquetas: <data:post.labels>

Por lo general, se encuentra dentro de un bloque que tiene una estructura semejante a esta:

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
 <b:if cond='data:post.labels'>

    <data:postLabelsLabel/>
     <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'>
           <data:label.name/>
        </a>
        <b:if cond='data:label.isLast != "true"'>,</b:if>
     </b:loop>

     AQUI ES DONDE AÑADIREMOS LAS NUEVAS ETIQUETAS

  </b:if>
</span>
</p>

Lo que está en itálica es el texto que vemos debajo de cada post y un bucle que escribe las etiquetas, separándolas con comas.

Para utilizar las etiquetas de Technorati, en el lugar indicado agregamos:

<br/>Etiquetas Technorati:
<b:loop values='data:post.labels' var='label'>
  <a expr:href='"http://www.technorati.com/tag/"+data:label.name' rel='tag'>
     <data:label.name/>
  </a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

Para utilizar las etiquetas de Blogalaxia, en el lugar indicado agregamos:

<br/>Etiquetas Blogalaxia:
<b:loop values='data:post.labels' var='label'>
  <a expr:href='"http://www.blogalaxia.com/tag/"+data:label.name' rel='tag'>
     <data:label.name/>
  </a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

Podemos utilizar cualquiera de las tres opciones: las etiquetas de Blogger, las de Techonorati, las Blogalaxia o una combinación de todas ellas.

REFERENCIAS:

Widget-based

Hace unos meses comentaba sobre FormLogiMix, un sitio que nos permite agregar un formulario de contacto en Blogger, algo bastante difícil de hacer ya que son pocos los lugares que ofrecen este servicio de manera gratuita y con un código que podamos adaptar.

Lo utilicé durante varios meses pero, de un tiempo a esta parte, por motivos diversos, comenzó a tener problemas. Más que nada, problemas gráficos ya que agregaron un banner publicitario pero el diseño que uno creaba no era respetado y terminaban desapareciendo botones o haciéndo que todo fuera demasiado confuso.

Buscando en la web, me encontré con un post de Los Blogos donde se hablaba de otro servicio y se explicaba el proceso para insertarlo en Blogger. El resultado es el Formulario de Contacto que está en funcionamiento desde hace un mes y que, por lo visto, no tiene ha causado trastornos importantes.

El servicio es Webformdesigner, allí nos dirigimos y completamos el registro, ingresando nombres, dirección de email y la URL del blog. Hay una serie de opciones que conviene aclarar:

Where to send your form data: ahí colocamos la dirección de correo donde queremos recibir los envíos.
Autoresponder: es un texto opcional que puede se enviado cada vez que alguien utiliza el formulario (saludos, agradecimientos, etc) Si no se quiere emplear, se deja en blanco.
Redirect: podemos poner una página determinada a la que redireccionará al visitante una vez que ha enviado el formulario.
Redirect Error Page: podemos poner una página determinada a la que se redireccionará al visitante en caso de producirse algún error.

Una vez completado esto, hacemos click en el botón Register Me y recibiremos a vuelta de correo una contraseña y un FormID, un código que deberemos utilizar para crear nuestro formulario.

El servicio no provee ningún script ni código HTML por lo tanto, el formulario podrá tener el diseño y los campos que nosotros queramos y podremos colocarlo en la sidebar o en un post especial que publicaremos deshabilitando la opción de comentarios.

Por razones de espacio, he elegido esta última alternativa así que, creamos una nueva entrada y le damos una fecha lo suficientemente "antigua" como para que no aparezca listada "normalmente". Allí, en Edición HTML, agregaremos un código similar a este:

<form name="Contact"
action="http://www.webformdesigner.net/wfd_f2.php?id=FormID"
method="post"
enctype="application/x-www-form-urlencoded">
<label for="Sender">Nombre:</label> <input name="formName" size="35" type="text"/>
<label for="Mail">Email:</label> <input name="formMail" size="35" type="text"/>
<label for="Message">Escriba su mensaje:</label>
<textarea name="formMsg" rows="10" cols="40"></textarea>
<input value="Enviar" type="submit"/>
<input name="resetBtn" value="Reset" type="reset"/>
</form>

Donde FormID es el código que recibimos previamente (algo similar a DD45hxmbkd).

El formulario puede tener todas las entradas que se nos ocurra. Por ejemplo, si queremos que haya un campo para que se ingrese la dirección URL del visitante, agregaremos:

<label for="Mail">Dirección URL:</label>
<input name="formURL" size="35" type="text"/>

Lo mismo vale para la diagramación gráfica, la posición, el tamaño o el estilo de cada control y del post en genral, podemos hacerlo tan simple o complejo como nos guste.

Desktop Dimmer

Si usan el reproductor web de DivX, tal vez han visto que existe una nueva función llamada Desktop Dimmer que permite oscurecer la pantalla para que el video resalte sobre el fondo.

Por ahora, aparece un mensaje explicativo para advertirlo:

Esto puede ser configurado utilizando las Preferencias de reproductor, habilitarlo, deshabilitarlo y establecer el tiempo de activación.

Es probable que no hayamos mirado mucho la Preferencias y sería bueno que lo hiciéramos porque hay un par de opciones interesantes como, por ejemplo, la posibilidad de manejar las descargas de los videos que miramos.

Divx y Ubuntu

Lamentablemente, el Web Player no parece funcionar en Linux pero, tratando de resolver el tema, he encontrado una alternativa en ubuntuforums que, por lo menos, nos permite ver los videos.

Primero que nada, necesitamos instalara la extensión Media Player Connectivity que permite ejecutar un archivo multimedia incrustado en una página web con cualquier reproductor que tengamos instalado (ver más detalles). Lo que veremos, será algo así:

Utilizando Synaptic instalamos lo siguiente:

gstreamer0.8-plugins
gstreamer0.8-xvid
totem-gstreamer

Una vez hecho esto, abrimos Firefox y en las Preferencias de Media Player Connectivity marcamos la casilla correspondiente a DIVX y, en la caja de textos escribimos: /usr/bin/totem y aceptamos (o buscamos el reproductor multimedia que nos guste):

Haciendo click en el botón play de la página, se abrirá el reproductor externo, comenzará la descarga y se reproducirá el video.

En mi caso particular, había seleccionado el reproductor mplayer que es el que utilizo normalmente pero, no funcionó. Lo cambié por Totem y me solicitó que instalara otros tres codecs, cosa que hice y todo pareció resolverse. Luego, volví a seleccionar mplayer como reproductor y ya no hubo problemas.

Por supuesto, no es la solución ideal pero no parece haber muchas otras alternativas.

Subir videos

Cata, de Infinitos Mundos me ha enviado un video donde se muestra cómo subir un video a Stage6.

Para empezar, debemos tener instalado DivX en muestra PC. Este software incluye DivX Player, DivX Codec, DivX Web Player y DivX Content Uploader que es lo que nos permitirá conectarnos con nuestra cuenta de Stage6.

REFERENCIAS:

How to upload anything to Stage6

Otros tutoriales

Un tutorial para crear una galería de imágenes al estilo del que puede verse en AppleTV utilizando Photoshop y Flash.

Los detalles pueden verse en Web Design Wall desde donde también puede descargarse en formato ZIP

No es algo como para poner en cualquier sitio pero, recomiendo ver el demo online: ¡asombroso!

Para permitir que nuestro sitio puede ser agregado fácilmente a los Favoritos del navegador, hay muchos ejemplos en la web pero, siempre aparece una aclaración o una consulta: funcionan en Internet Explorer pero no en Firefox.

El problema es que ambos navegadores utilizan distintas funciones para hacer lo mismo así que, no queda otro remedio que emplear ambas.

El código JavaScript necesario es el siguiente:

<script type="text/javascript">
function agregarFavoritos() {
 if (window.sidebar&&window.sidebar.addPanel)
    window.sidebar.addPanel("TEXTO_a_Mostrar","URL_blog","");
 else
    window.external.AddFavorite("URL_blog","TEXTO_a_Mostrar")
}
</script>

El script lo agregamos en el encabezado de la página o en un elemento HTML de la sidebar y luego, lo utilizamos como cualquier otro enlace:

<a href="javascript:agregarFavoritos();" title="Agregar a Favoritos">
 TEXTO o IMAGEN
</a>

Eso es todo, ahora, bastaría hacer click en esta imagen para agregar el sitio a los Favoritos o Marcadores

YouTube está experimentando con la posibilidad de agregar publicidad (ads) en los videos. Se trata de unos quince segundos que aparecen en la parte inferior.

Aunque no es algo que se haya generalizado y sólo se ve en muy pocos, ya ha aparecido una extensión de Firefox para evitarlos. Se trata de TubeStop.

No es necesario ir corriendo a instalarla pero, es bueno saber que existe.

REFERENCIAS:

Google Blogoscoped

MicroZulo

Computing Technology Industry Association, CompTIA, es una organización encargada de certificar a personal TI (Technology Industry) que posee entre sus filas a más de 22.000 empresas y, para festejar sus 25 años decidió realizar una encuesta entre sus miembros para determinar cuáles eran los diez mejores productos tecnológicos nacidos en ese lapso.

Este es el sorprendente top ten:

1. Internet Explorer (66% de los votos)
2. Microsoft Word (56% de los votos)
3. Windows 95 (50% de los votos)
4. Apple iPod (49% de los votos)
5. Microsoft Excel (49% de los votos)
6. BlackBerry (39% de los votos)
7. Adobe Photoshop (35% de los votos)
8. McAfee VirusScan (32% de los votos)
9. Netscape Navigator (31% de los votos)
10. Palm Pilot (31% de los votos)

Si uno lo tomara en serio, sería para preocuparse.

Stephen Demetre Georgiou, hijo de madre sueca y padre griego-chipriota se convirtió al Islam y cambio su nombre por Yusuf Islam pero este músico británico es más conocido como Cat Stevens. Father and son es un tema de 1969.



Hacer click en la imagen para comenzar.

Father:
It's not time to make a change, just relax, take it easy
you're still young, that's your fault, there's so much you have to know.
Find a girl, settle down, if you want you can marry
look at me, I am old, but I'm happy.

I was once like you are now, and I know that it's not easy
to be calm when you've found something going on.
But take your time, think a lot, think of everything you've got
for you will still be here tomorrow, but your dreams may not.

Son:
How can I try to explain, when I do he turns away again
it's always been the same, same old story.
From the moment I could talk I was ordered to listen
now there's a way and I know that I have to go away
I know I have to go.

Father:
It's not time to make a change, just sit down, take it slowly
you're still young, that's your fault, there's so much you have to go through.
Find a girl, settle down, if you want you can marry
look at me, I am old, but I'm happy.

Son:
Away away away,
I know I have to make this decision alone.

Son:
All the times that I cried, keeping all the things I knew inside,
It's hard, but it's harder to ignore it.
If they were right, I'd agree, but it's them you know not me.
Now there's a way and I know that I have to go away.
I know I have to go.

Father:
Stay stay stay,
why must you go and make this decision alone?

Ver/Ocultar Traducción [+]

Padre:
No es el momento de hacer cambios, relájate, tómalo con calma
todavía eres joven, ese es el problema, hay mucho que te falta conocer.
Encuentra una muchacha, establécete, si quieres, cásate
mírame, soy viejo pero soy feliz.

Una vez fui como tú, y sé que no es sencillo
mantenerte tranquilo cuando has encontrado algo.
Pero tómate tu tiempo, piensa, piensa en todo lo que tienes
todo eso permanecerá allí mañana pero tus sueños no.

Hijo:
¿Cómo puedo explicarte si cuando lo hago te vas?.
siempre ha sido así, una vieja historia.
Desde que pude hablar se me ordenó escuchar
ahora, hay un camino, sé que debo marcharme
sé que debo irme.

Padre:
No es el momento de hacer cambios, siéntate, tómalo con calma
todavía eres joven, ese es el problema, hay muchas cosas que te falta hacer.
Encuentra una muchacha, establécete, si quieres, cásate
mírame, soy viejo pero soy feliz.

Hijo:
Lejos, lejos, lejos, sé que debo hacerlo
debo tomar mis propias decisiones.

Hijo:
He llorado mucho, ocultando todas esas cosas que sabía,
fue difícil pero aún fue mas difícil ignorarlas.
Si los demás tuvieran razón yo estaría de acuerdo
pero es a ellos a quienes conoces, no a mi.
Ahora hay una forma, sé que debo marcharme
sé que debo irme.

Padre:
Quédate quédate quédate
¿por qué debes irte y tomar tus propias decisiones?

REFERENCIAS:

Stage6

Lady D'Arbanville

Morning has broken

Según dice YouTube, cuando subimos un video y lo marcamos como privado, este sólo podrá ser visto por las personas que nosotros seleccionemos ¿Será cierto?

Sí pero ... no. Cualquiera puede descargar un video marcado como privado. No hace falta ser un hacker ni mucho menos, lo podemos hacer, exactamente igual que con cualquier otro, utilizando cualquier servicio al estilo KeepVid e ingresando el ID del video.

Es tan sencillo que hasta han creado un simple código HTML que permite hacerlo:

http://youtube.com/watch?v=[VIDEO ID]
<form action="http://cache.googlevideo.com/get_video" method="get">
Video ID: <input type="text" name="video_id" value=""/>
<input type="submit" value="Get Video"/>
</form>

¿Alguien quiere probar?

http://youtube.com/watch?v=[VIDEO ID]

Video ID:

REFERENCIAS:

Googlified

Otro widget que podemos agregar al blog para mostrar nuestro posiconamiento en Google, Yahoo, Del.icio.us, Technorati y Feedburner. Se trata de My µStats y sólo no requiere registro de ninguna clase, basta escribir la URL del sitio y copiar y pegar el código.

Afirman que se actualiza semanalmente y, la primera vez que se utiliza, tarda un poco en mostrar los valores.

REFERENCIAS:

Genbeta

ver la versión actualizadaShake it, shake it, shake it, shake it

No sé como se nos pasó por alto este cumpleaños.

23 de agosto de 1999 - 23 de agosto de 2007 : Blogger cumple 8 años.

Lanzado originalmente por la compañía PyraLabs, fue comprado por Google en febrero del 2003 y un año después se introdujeron los cambios que lo transformaron en lo que es hoy: plantillas CSS, páginas individuales, comentarios. Según la Wikipedia, la versión beta (la actual), tenía el nombre código Invaders.

Supongo que para celebrar, a partir de ahora, el editor normal dispone de un nuevo botón que nos permite agregar un video, alojándolo en Google Video (formatos AVI, MPEG, QuickTime, Real y Windows Media hasta un máximo de 100 MB) de forma similar a lo que ya estaba funcionando en Blogger Draft.

Al hacer click, se nos abrirá una ventana donde debemos aceptar las condiciones y seleccionamos el archivo:

Debemos tener cuidado ya que, mientras dura el proceso de carga, algunas de las funciones del editor se deshabilitarán:

Si estamos en modo Edición HTML, veremos un código similar a este:

<object id="BLOG_video-UPLOADING" class="BLOG_video_class"
   contentid="UPLOADING" height="280" width="320">
</object>

Que se transformará en algo así cuando el proceso se haya completado:

<object id="BLOG_video-efc7a92c83231e57" class="BLOG_video_class"
   contentid="efc7a92c83231e57" height="280" width="320">
</object>

Y, en el Modo Redactar, veremos esto:

Usando Vista Previa, el podremos ver el video.

Para más detalles, habrá que esperar un poco porque hasta ahora, no hay información al respecto.

REFERENCIAS:

Blogger Buzz

Si Fede y Recolectando Ideas tienen un teclado propio que les permite acceder directamente a su blog, no veo porque voy a ser menos.

Es una suerte que en GlassGiant.com pueda crearse rápidamente y que además tengan otros generadores para poder expiar mi culpa aunque algunos me parecen un poco exagerados.

“¿Qué pasaría si todos los blogs publicaran post sobre un mismo tema, en un mismo día? Un tema. Un día”. Esa es la premisa de Blog Action Day, una iniciativa de la que ya participan casi 2.000 blogs de todo el mundo.

La fecha: el 15 de octubre.
La primera causa: hablar del medio ambiente.
Las tres maneras de participar son: escribiendo un post sobre medio ambiente; haciendo una donación del dinero ganado ese día con el blog o bien promoviendo el evento. Registrarse es optativo.

Los organizadores están convencidos que si todos los bloggers se pusieran de acuerdo para hablar de un mismo tema que afecta a la humanidad el mismo día, se llegaría a una solución. Afirman que la inmediatez de la información, su globalidad y la libertad de expresión que caracteriza a los blogs generará un éxito inmediato de las iniciativas que se vayan proponiendo.

Me parece que a algunos se les subieron los humos o tienen problemas serios para analizar la realidad. Perdón debe ser que me estoy volviendo viejo y que estas muestras de voluntarismo me suenan a una buena forma de lavarse las manos y tranquilizar las conciencias.

¡Ufa con los emoticones!

Bueno, estos ya no son para utilizar en los posts de Blogger; se trata de un servicio de MSN China que está en fase de pruebas pero que puede descargarse gratuitamente porque es completamente funcional.

MSN Cartoon es una aplicación de Microsoft que permite a los usuarios personalizar el Messenger de manera radical, creando una serie de emoticones a partir de la foto de un rostro real, incluso con movimiento.

El programa sólo puede ser usado desde Internet Explorer y, como si fuera poco, está en chino. De cualquier manera, puede descargarse (5MB) e instalarse con facilidad.

REFERENCIAS:

infobae.com

Me preguntaron por algún método sencillo para contraer y expandir elementos y lo primero que se me ocurrió fue algo similar a lo que utilizo habitualmente, un script muy simple que aprovecha la instrucción nextSibling.

El código a insertar en el encabezado del blog, por ejemplo, antes de la etiqueta </head> es el siguiente:

<script type='text/JavaScript'>
     function verocultar(cual) {
          var c=cual.nextSibling;
          if(c.style.display=='none') {
               c.style.display='block';
          } else {
               c.style.display='none';
          }
          return false;
     }
</script>

Para que funcione, utilizamos un enlace de cualquier tipo, puede ser un texto o una imagen:

<a onclick="return verocultar(this);"
     href="javascript:void(0);">ENLACE</a><div style="display: none;">
....... el contenido a ocultar .......
</div>

donde lo único importante es que todas las instrucciones desde A hasta DIV, se escriban en una sola linea. Aquí hay dos ejemplos, uno utiliza un enlace de texto y el otro una imagen. En cualquier caso, el contenido puede ser cualquier cosa:

Ver/Ocultar [+/-]

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

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.

Click para Ver/Ocultar

Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3
Fila 2 Columna 1	Fila 2 Columna 2	Fila 2 Columna 3
Fila 3 Columna 1	Fila 3 Columna 2	Fila 3 Columna 3

La segunda posibilidad, se me ocurrió viendo un truco en el Blog de Gem@ donde se mostraba un script para Desplegar y recoger (cualquier parte del blog).

Este truco, utiliza un criterio diferente, la idea es que a un elemento le adjudicamos una clase CSS, es decir, una serie de propiedades (color, fondo, tamaño, etc), una de ellas, la propiedad display con la que podemos controlar si está visible u oculto. Bien, el truco consiste en cambiar la clase CSS de ese elemento cuando hacemos click en algún lado.

En realidad hace lo mismo que la anterior pero, si cambiamos la clase podemos ampliar aún más las posibilidades y no sólo permutar entre visible y oculto. Demasiado hablar, aquí hay un ejemplo:

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

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.

Este es el script y las definiciones de estilo que agregamos antes de la etiqueta </head>:

<style type='text/css'>
.elementoVisible {display:block;}
.elementoOculto {display:none;}
.linkContraido {
     cursor: pointer;
     background: #color url(direccionURL_imagenContraido) no-repeat;
     width: anchopx;
     [propiedades de los textos]
}
.linkExpandido {
     cursor: pointer;
     background: #color url(direccionURL_imagenExpandido) no-repeat;
     width: anchopx;
     [propiedades de los textos]
}
</style>

<script type='text/JavaScript'>
     function desplegarContraer(cual,desde) {
          var elElemento=document.getElementById(cual);
          if(elElemento.className == 'elementoVisible') {
               elElemento.className = 'elementoOculto';
               desde.className = 'linkContraido';
          } else {
               elElemento.className = 'elementoVisible';
               desde.className = 'linkExpandido';
          }
}
</script>

Ahora, podemos utilizar las clases CSS creadas dentro de cualquier etiqueta HTML. La sintaxis general es la siguiente:

<div onclick="desplegarContraer('nombreID',this);" class="linkContraido">TEXTO</div>
<UNAetiqueta id="nombreID" class='elementoOculto'>
....... el contenido .......
</UNAetiqueta>

donde nombreID debe ser un nombre único y UNAetiqueta es cualquier etiqueta válida.

Aquí hay algunos ejemplos:

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4
• Enlace 5

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

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3
Fila 2 Columna 1	Fila 2 Columna 2	Fila 2 Columna 3
Fila 3 Columna 1	Fila 3 Columna 2	Fila 3 Columna 3

El código fuente de los ejemplos utilizados:

<div onclick="desplegarContraer('unaLista',this);" class="linkContraido">UNA LISTA UL/LI</div><br /><ul id="unaLista" class='elementoOculto'><li><a href="javascript:void(0);">Enlace 1</a></li><li><a href="javascript:void(0);">Enlace 2</a></li><li><a href="javascript:void(0);">Enlace 3</a></li><li><a href="javascript:void(0);">Enlace 4</a></li><li><a href="javascript:void(0);">Enlace 5</a></li></ul>

<div onclick="desplegarContraer('unBloque',this);" class="linkContraido">UN BLOQUE DIV</div><br /><div id="unBloque" class='elementoOculto'><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ...</p></div>

<div onclick="desplegarContraer('unaImagen',this);" class="linkContraido">UNA IMAGEN</div><br /><p id="unaImagen" class='elementoOculto'><im<br />g src="direccionURL"/></p>

<div onclick="desplegarContraer('unFormulario',this);" class="linkContraido">UN FORMULARIO</div><br /><form id="unFormulario" class='elementoOculto'><input size="40" type="text"/> <input value="Enviar" type="button"/> </form>

<div onclick="desplegarContraer('unTabla',this);" class="linkContraido">UNA TABLA</div><br /><table id="unTabla" class='elementoOculto' border="0" cellpadding="5" cellspacing="5"><tr bgcolor="#333333"><td>Fila 1 Columna 1</td><td>Fila 1 Columna 2</td><td>Fila 1 Columna 3</td></tr><tr bgcolor="#333333"><td>Fila 2 Columna 1</td><td>Fila 2 Columna 2</td><td>Fila 2 Columna 3</td></tr><tr bgcolor="#333333"><td>Fila 3 Columna 1</td><td>Fila 3 Columna 2</td><td>Fila 3 Columna 3</td></tr></table>

Una ampliación al tema emoticones en los posts de Blogger la encuentro en Cosas Sencillas. Esta vez, se trata de una extensión de FireFox para añadirlos en cualquier sitio, blogs, comentarios, foros, en casi en cualquier caja de texto que encontremos, siempre y cuando estas acepten incluir imágenes.

Smiley Xtra apenas tiene 38KB y al instalarla, agrega un botón en la barra de herramientas; haciendo click en él, se abre un panel lateral desde donde podemos seleccionar entre más de 2.100 imágenes que se extraen desde una base de datos online que se amplia constantemente.

Hay tantos que están divididos por categoría y se incluye un buscador especial.

Con una serie de botones superiores, podemos controlar las acciones a realizar. Previsualizarlos en una pestaña, tanto individualmente como un grupo completo; insertarlos como códigos para un foro; insertarlos como códigos HTML; insertar sólo la dirección URL de la imagen o insertarlos con un formato personalizado que definimos en las opciones.

REFERENCIAS:

The Smile Project