Algunos de los mejores editores gratuitos

Para quien comienza en esto de intentar escribir páginas web, encontrar un editor no es tarea sencilla. No porque no haya software disponible sino porque hay muchos y se tiende a creer que reemplazarán nuestra ignorancia con unos botoncitos. Como cualquier otra herramienta, serán útiles o inútiles, nos facilitarán la tarea o nos complicarán la vida, dependerá de nosotros ... mala suerte.

En mi opinión, no hay nada mejor para un novato, que no usar ninguno y, si se trata de elegir, me inclino por los editores de tipo texto donde sólo haya alguna ayuda extra que nos permita verficar la sintaxis o agregar formatos sencillos.

Aprovechemos entonces la lista de tripewiremagazine para repasar algunos de los que hay disponibles para su descarga gratuita.

Notepad++ es uno de mis preferidos. Permite editar múltiples documentos, admite el uso de muchísimos lenguajes, reconoce la sintaxis , contrae y expande bloques y es ideal para editar archivos alojados en la web porque entre sus plugins posee un cliente FTP.

CodeLobster PHP Edition es un editor especializado en PHP pero soporta JavaScript, HTML y CSS. Autocompleta etiquetas, reconoce códigos y nos facilita ayudas. Posee un debugger de PHP y plugins para WordPress, Joomla, drupal y JQuery. También es de descarga gartuita aunque debemos registrarnos para que nos envien un código de verificación via mail. Recién lo estoy probando y parece una alternativa interesante.

HAPedit es similar, habilitado para detectar sintaxis HTML, ASP, PHP y JavaScript. También tiene ayuda, listas de etiquetas y variables, cliente FTP y funciones para buscar y reemplazar muy avanzadas.

Free Coffeecup Editor es un buen editor aunque nunca me convenció del todo. Incluye un cliente FTP y una serie de ayudas y muchos asistentes que permiten generar códigos completos seleccionando algunas opciones.

Arachnophilia es uno de los más conocidos e incluye varios tutoriales. Nunca me convenció :- )

Visual Web Developer 2008 no lo conozco pero promete ser rápido aunque sólo admite editar un archivo por vez.

Amaya es el editor de la w3c. Muy limitado para mi gusto.

Más editores:

• Crimson Editor
• HTML-Kit
• jEdit
• Komodo Edit
• KompoZer
• Medit
• netpadd
• NoteTab Light
• Programmer’s Notepad
• Nvu
• PSPad
• RText
• Scriptly
• TotalEdit
• VIM

Vagando pelo Mundo

Si salgo de abajo del cocotero es con autorización expresa de mi conciencia que esta vez (y es raro que así sea) está de acuerdo conmigo.

Sólo lo hago para expresar públicamente mi agradecimiento a Ariane por la publicación de la entrevista y por el increible trabajo realizado al traducir mi prosa enreverada con una fidelidad asombrosa.

Como admirador del precisismo y delicadeza de sus diseños, no puedo más que sentirme honrado por su deferencia y agradecerle por enésima todas sus gentilezas.

Y como no tengo palabras suficientes, sólo se me ocurre dejar que Caetano cante a Gilberto Gil a ver si ellos logran decirlo mejor que yo (obviamente si):

3 años en este agujero negro llamado blog.

Tengo un DIV colgando indolente de mi oreja izquierda y un STYLE de mi oreja derecha. Zumban y rezumban rebuznando como burros. Me dicen en voz baja que mi CSS no valida pero no puedo cambiarlo porque cuando uno llega a cierta edad, no hay background que sirva para remodelarnos.

No me quejo.

Pese a que en cada pestaña me cuelga un enlace y hay varios que me devuelven un error 404, todavía puedo abrir los ojos para ver que tres años

es mucho pero mucho pero mucho tiempo ...

Así que no pienso escribir nada de nada y además, es domingo. Buscaré un wallpaper de Tahití, me imaginaré sentado a la sombra de un cocotero y beberé mi imaginario daikiri en pequeños sorbos mientras leo los feeds que ...

. . .

No. No. No. NOOOOOOO!!! No, viejo, no. Ya metiste la pata. Nada de feeds, nada de mails, desenchufá la PC!!! Olvidate del daikiri virtual y sentate al sol aunque sea, con un vaso de agua.

No se te puede dejar solo un minuto. Es más fácil ser la conciencia de un asesino serial que la conciencia de un blogger ¡Quién me asignó este trabajo!!! ¡Renuncio!!!

¿No entendés lo que es el relax? Relax, viejo, relax. ¡¡¡RELAX!!! Tres años no se cumplen todos los días ... sólo una vez cada tres años.

. . .

Ufa. Y el tipo no entiende. Se puso a buscar la palabra relax en la Wikipedia ...

No hay nada que hacer, esto de los blogs es una enfermedad incurable ...

Wallpapers (casi natural)

Hay muchos scripts que utilizan efectos para cambiar el contenido de algo cuando ponemos el puntero del ratón encima. Es lo que se llama un efecto rollover. Con CSS lo logramos usando :hover. Cambiamos colores, fondos, las fuentes de los textos, etc ¿Podemos cambiar más cosas? ¿Podríamos cambiarlo por completo, incluyendo su contenido?

Pués así lo muestran en SNOOK.ca y la idea es bastante simple.

Este es un ejemplo del código HTML básico:

<div class="infobox">
  <img src="URL_imagen">
  <div> un texto visible </div>
  <div class="more"> y aquí ponemos el contenido que permanecerá oculto </div>
</div>

Y este es un estilo CSS de ejemplo:

.infobox {
  border: 1px solid #345;
  cursor: pointer;
  padding: 5px;
  position: relative;
  width: 130px;
}
.infobox img {
  position: relative;
  z-index: 2;
}
.infobox .more {
  display: none;
}
.infobox:hover .more {
  background-color: #345;
  border: 1px solid #89A;
  display: block;
  font-size: 20px;
  height: 130px;
  left: 0px;
  padding: 5px 20px 5px 140px;
  position: absolute;
  text-align: justify;
  top: 0px;
  width: 400px;
  z-index: 1;
}

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas hendrerit quam a elit luctus ut tempor leo congue? Maecenas blandit massa id mi blandit consectetur.

EL DIV infobox tiene la propiedad position establecida como relative lo que permite luego, posicionar su contenido de manera absoluta con left y top. La imagen también se posiciona de manera relativa para usar la propiedad z-index y, de esa manera, mantenerla visible aún cuando algo se coloca "encima" de ella.

Las propiedades a usar son variadas, dependerán de lo que se nos ocurra mostrar. Otro ejemplo:

.infobox {
  -moz-border-radius: 10px;
  background-color: #123;
  border: 2px solid #567;
  color: #ABC;
  cursor: pointer;
  font-size: 20px;
  padding: 5px 10px;
  position: relative;
  text-align: center;
  width: 180px;
}
.infobox .more {
  display: none;
}
.infobox:hover .more {
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  background-color: #101921;
  border: 2px solid #567;
  color: #EEE;
  display: block;
  font-size: 12px;
  left: -2px;
  padding: 5px 10px;
  position: absolute;
  text-align: justify;
  top: -2px;
  width: 180px;
  z-index: 1;
}

El contenido visible a expandir.

Aliquam mattis purus vel leo dignissim vel pulvinar lectus hendrerit! Aenean facilisis ante vel lacus interdum ut lobortis enim aliquet. Vivamus sagittis feugiat est id rhoncus? Maecenas ut leo vel enim mollis tempor. Nullam ornare fermentum tempor. Proin eu interdum massa!

Y un último ejemplo:

.infobox2 {
  color: #888;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  text-align: center;
  width: 130px;
}
.infobox2 img {
  position: relative;
  z-index: 2;
}
.infobox2 .more {
  display: none;
}
.infobox2:hover .more {
  -moz-border-radius: 10px;
  background-color: #333;
  color: #BBB;
  display: block;
  font-size: 14px;
  font-weight: normal;
  height: 130px;
  left: 0px;
  padding: 15px 20px 10px 135px;
  position: absolute;
  text-align: justify;
  top:- 5px;
  width: 320px;
  z-index: 1;
}

EXPANDIR

Sed interdum interdum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fringilla aliquam lectus; laoreet accumsan magna vulputate eget. Aliquam vel quam mi.

Los navegadores tiene sus limitaciones. Unos unas, otros, otras ... nada es perfecto.

Firefox, Safari y Opera permiten que manipulemos la selección de textos con CSS, es decir, cambiar el color que, por defecto es gris.

Es un detalle que puede modificarse con dos pseudo-elementos llamados ::-moz-selection y ::selection que admiten solamente dos propiedades: color y background-color. Por ejemplo:

::-moz-selection {background-color: DarkRed; color: yellow;}
::selection {background-color: DarkRed; color: yellow;}

Mostrará las selecciones con fondo rojos y textos de color amarillo y usamos dos definiciones porque una será interpretada por Firefox y la otra por Opera y Safari.

Podemos generar ese efecto en toda la página o sólo en alguna aprte, de la misma manera que lo hacemos con cualquier otra definición de CSS:

UN EJEMPLO
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 qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

/* esto se aplicará sólo a los párrafos */
p::-moz-selection {color: yellow; background-color: DarkRed;}
p::selection {color: yellow; background-color: DarkRed;}

/* esto se aplicará sólo a la clase demo */
.demo::-moz-selection {color: yellow; background-color: DarkRed;}
.demo::selection {color: yellow; background-color: DarkRed;}

/* esto se aplicará sólo al DIV demo */
div#demo::-moz-selection {color: yellow; background-color: DarkRed;}
div#demo::selection {color: yellow; background-color: DarkRed;}

En cualquier navegador, seleccionar todo el contenido de un área de texto (textarea) es bastante sencillo. Hay un artículo muy completo sobre este tema en el blog de Gem@ basta agregar un evento onclick en el formulario:

Donec dignissim, mauris at eleifend semper, odio nisi viverra nisi, non ornare lacus sapien quis lectus! Donec id ante lobortis sapien eleifend ultricies ut at dui. Aliquam cursus eros nec lorem vulputate porta. Vivamus at condimentum nibh. Etiam interdum malesuada arcu et sollicitudin. Proin vitae semper risus. Quisque commodo posuere volutpat!

<form>
  <textarea onclick="javascript:this.focus();this.select();"> ... el contenido ... </textarea>
</form>

De modo similar, podemos hacerlo agregando un botón:

Donec dignissim, mauris at eleifend semper, odio nisi viverra nisi, non ornare lacus sapien quis lectus! Donec id ante lobortis sapien eleifend ultricies ut at dui. Aliquam cursus eros nec lorem vulputate porta. Vivamus at condimentum nibh. Etiam interdum malesuada arcu et sollicitudin. Proin vitae semper risus. Quisque commodo posuere volutpat!

<form>
  <textarea name="selboton"> ... el contenido ... </textarea>
  <input value="Seleccionar Todo" onclick="javascript:this.form.selboton.focus();this.form.selboton.select();" type="button" />
</form>

Y sí, al contrario de los pseudo-elementos de selección, esto funcionará en todos los navegadores pero decía que nada es perfecto y el tema de seleccionar y copiar es uno de esos detalles donde en Internet Explorer las cosas se hacen fáciles pero en Firefox son muy engorrosas o incluso, imposibles.

Estas tres funciones permiten copiar, cortar y pegar textos seleccionados en Internet Explorer:

<script>

function CopyToClipboard(){
  CopiedTxt = document.selection.createRange();
  CopiedTxt.execCommand("Copy");
}

function PasteFromClipboard(){
  document.nombreformulario.nombretextarea.focus();
  PastedText = document.nombreformulario.nombretextarea.createTextRange();
  PastedText.execCommand("Paste");
}

function CutToClipboard(){
  CutTxt = document.selection.createRange();
  CutTxt.execCommand("Cut");
}

</script>

Donec dignissim, mauris at eleifend semper, odio nisi viverra nisi, non ornare lacus sapien quis lectus! Donec id ante lobortis sapien eleifend ultricies ut at dui. Aliquam cursus eros nec lorem vulputate porta. Vivamus at condimentum nibh. Etiam interdum malesuada arcu et sollicitudin. Proin vitae semper risus. Quisque commodo posuere volutpat!

Y aunque también Internet Explorer tiene restricciones de seguridad que no hacen que las cosas funcionen así como así, se puede habilitar con un simple click:

No es el único método, este otro script de DynamicDrive también permite seleccionar y copiar al portapapeles. Hay muchos más pero siempre funcionarán en IE y no en Firefox. Para este último hay varios trucos que implican el uso de archivos SWF pero son "dudosos". De todos ellos, el único que parece funcionar es una librería llamada Zero Clipboard.

Es verdad que esa restricción podemos cambiarla en nuestro navegador; para eso debemos editar la configuración entrando en about:config y buscando esto:

signed.applets.codebase_principal_support

Donde el valor establecido por defecto es false y haciendo doble click en la línea lo permutamos por true (más información)

Para mi gusto, todas esas opciones son demasiado engorrosas y por lo tanto, creo que es mejor seguir recurriendo al viejo CTRL+C.

Cuando se habla de ¿cómo ven los buscadores nuestro sitio? muchos dicen "lo ven de manera similar a navegar usando Linx" ¿Qué es Linx? Pués un navegador de modo texto, es decir, nada de multimedia, nada de scripts, nada de CSS. No por eso es menos potente porque soporta todos los protocolos: Gopher, HTTP, HTTPS, FTP y cookies.

¿Es posible instalarlo? Sí, hay versiones para distintos sistemas operativos; por ejemplo, esta es para Windows; incluso, hay algunas versiones que funcionan en viejos sistemas, desde las 386 en adelante.

Pero, tampoco es necesario instalarlo para probar cómo se vería nuestro sitio. En securi.net hay una página que nos permite ingresar la URL de un sitio y ver el resultado online, lo mismo ocurre con Lynx Viewer aunque allí, los pasos a seguir son bastante más complejos.

Y si todo eso no es suficiente, hay una extensión par Firefox llamada Yellowpipe Lynx Viewer Tool que, una vez instalada, nos agrega una entrada en el menú contextual y basta hacer click allí para obtener una previsualización de cualquier página sin necesidad de abandonarla.

Ya está disponible la opción de mostrar las etiquetas en forma de nube directamente desde el mismo elemento Labels de Blogger por lo tanto, quien quiera, pude eliminar el truco original y aliviar un poco su plantilla.

El código ya estaba disponible desde hace varios días pero parecía que no se había implementado. Para usarlo, basta editar el elemento y marcar la opción NUBE:

Eventualmente, podemos seleccionar cuáles son las etiquetas a mostrar y cuáles son las que permanecerán ocultas. Para eso, marcamos la opción Etiquetas Seleccionadas y aparecerá entonces un enlace para Editar:

Cualquier cosa, si no quieren arriesgarse, en lugar de editar el elemento existente, pueden agregar uno nuevo ya que no hay limitaciones y pueden tenerse tantos como se quiera y cada uno es independiente del otro y, en todo caso, este es el mejor método porque el código nuevo difiere del antigüo así que es lo mejor para evitarse dolores de cabeza.

El resultado final será una nube con ciertas característcas gráficas por defecto, donde se verán los títulos de estas con cinco tamaños diferentes de acuerdo a la cantidad de entradas de cada una de ellas.

Tanto el tamaño de las letras como el color serán los asociados a todos los enlaces de la sidebar pero, eso puede ser modificado si agregamos estilos. Por defecto, son estos:

.label-size-1 {font-size: 80%; opacity: 0.8;}
.label-size-2 {font-size: 90%; opacity: 0.9;}
.label-size-3 {font-size: 100%;}
.label-size-4 {font-size: 120%;}
.label-size-5 {font-size: 160%;}
.cloud-label-widget-content {text-align: justify;}

Y, como estos estilos se cargan automáticamente, debemos sobrescribirlos agregando los nuestros justo después de <body>:

<style type='text/css'>

  /* este es el bloque que las contiene, en lo personal, prefiero centrarlo */
  .cloud-label-widget-content {
    text-align:center;
  }

  /* cada enlace está dentro de una etiqueta SPAN */
  .cloud-label-widget-content span {
    display: inline-table; /* con esta propiedad puedo centrar cada enlace verticalmente */
    line-height: 1.2; /* esta es la separación vertical entre líneas */
    padding: 0 0 0 5px; /* esta es la separación horizontal entre enlaces */
    vertical-align: middle; /* esto lo centra verticalmente */
  }

  /* la fuente de los textos de los enlaces */
  .cloud-label-widget-content span a {font-family: Verdana;  }
  /* y el color del efecto hover sobre esos enlaces */
  .cloud-label-widget-content span a:hover {color:#FFF !important;}

  /* estas son las propiedades para cada uno de los cinco tamaños */
  .label-size-1 a {color: #789; font-size: 11px;} /* el de menor tamaño */
  .label-size-2 a {color: #89A; font-size: 13px;}
  .label-size-3 a {color: #9AB; font-size: 14px;}
  .label-size-4 a {color: #BCD; font-size: 17px;}
  .label-size-5 a {color: #DEF; font-size: 20px;} /* el de mayor tamaño */

</style>

Como siempre, podemos editar el código del widget para establecer la cantidad de entradas a mostrar cuando se navegan etiquetas (por defecto es 20). Para eso, buscamos lo siguiente:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

y lo reemplazamos por esto:

<a expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>

Ese código está dos veces dentro del widget, uno para cada modelo (lista y nube) así que modificamos ambos, colocando el número que mejor se adapte a nuestras necesidades.

sombras

sombras

más sombras

Un tweet de Ariane me llevó a una entrada de CSS No Lanche. El título era prometedor: CSS text-shadow. Sombras en los textos usando CSS.

La verdad es que no tenía muchas esperanzas porque es algo de lo que se habla desde hace mucho y, aunque está definida y aceptada por la W3C, sólo podía usarse en Safari. Pero, oh sorpresa, parece que ahora también puede aplicarse en Firefox, lo cuál es un avance.

La propiedad es muy sencilla y tiene cuatro parámetros:

text-shadow: posicionX posicionY amplitud color;

posicionX indica el desplazamiento horizontal de la sombra con respecto al texto (positivos hacia la derecha, negativos hacia la izquierda)
posicionY indica el desplazamiento de la sombra con respecto al texto (positivos hacia abajo, negativos hacia arriba)
amplitud es el tamaño de esa sombra, a mayor valor, el efecto de blur es mayor
color es obviamente el color de la sombra

un ejemplo:

text-shadow: 10px 5px 5px #000;

Esta serían las definiciones de los tres primeros ejemplos:

h1.demoSombras1 {
  color: #000;
  font-size: 130px;
  text-shadow: 5px 5px 15px #AAA;
}

h1.demoSombras2 {
  color: #999;
  font-size: 130px;
  text-shadow: 10px 10px 10px #000;
}

h1.demoSombras3 {
  color: #345;
  font-size: 80px;
  text-shadow: 1px 1px 1px #ABC;
}

donde, en todos los casos, el HTML es un encabezado:

<h1 class="nombreClase"> el texto </h1>

muchas sombras

En este otro ejemplo, se agregan dos sombras, separadas por comas:

h1.demoSombras4 {
  color: #101921;
  font-size: 80px;
  text-shadow: 3px 3px 10px red, -3px -3px 10px yellow;
}

Para versiones anteriores a Firefox 3.5, hay una extensión llamada Text Shadow 0.3.2008042901 que permite simular la propiedad.

Aparentemente, en Safari sólo se admite una sombra, Opera tiene un máximo y en los navegadores Mozilla la cantidad es infinita. Para Internet Explorer hay un filtro que hace algo similar: por ejemplo

filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);

shadow en Internet Explorer

Fácil, original, flexible, así es Horinaja, un script que nos permite crear slideshows que se manejan con la rueda del ratón, desplazando los contenido con una animación horizontal.

Hay dos modelos, uno para quienes tenemos Prototype + Scriptaculous y otro para quienes usan jQuery. En cualquiera de los dos casos, descargamos el archivo RAR, lo descomprimimos y allí nos encontraemos con el archivo class.horinaja.scriptaculous.js o class.horinaja.jquery.js que es el único que necesitamos y lo alojamos en un servidor propio o lo copiamos y pegamos en la plantilla.

Y luego, el CSS:

<style type="text/css">
  /* la clase que controla el slider */
  .horinaja ul {
    list-style-type: none;
    margin-left: 0;
    position: relative;
  }
  .horinaja ul li {
    background: transparent;
    list-style-type: none;
    display: block;
    top: 0;
  }
  /* la clase que controla la paginación optativa */
  ol.horinaja_pagination {
    background: transparent;
    clear: both;
    height: 40px;
    margin: 0 auto;
    padding: 5px 0 0 0;
    position: relative;
  }
  ol.horinaja_pagination li{
    display: block;
    float: left;
    height: 40px;
  }
  ol.horinaja_pagination li a {
    background: transparent;
    color: white;
    display: block;
    height: 40px;
    float: left;
    font-size: 16px !important;
    font-weight: bold;
    line-height: 40px;
    padding: 0;
    text-align: center;
    width: 40px !important;
  }
</style>

• Donec a arcu sit amet velit pharetra tincidunt. Aliquam erat volutpat. Praesent ac consectetur felis. Sed vitae augue eget dolor tristique blandit. Ut porttitor ultrices erat. Curabitur ac lectus sed ipsum venenatis scelerisque vitae adipiscing odio. Proin eget lacus lorem, eu euismod enim. In sodales, augue sit amet pretium volutpat, magna lacus viverra magna, vestibulum lacinia leo erat vel tellus. Suspendisse sed ante quis nibh aliquam commodo! Phasellus nisl tortor, posuere a scelerisque in, iaculis id ipsum. Vivamus in bibendum magna! Etiam congue elementum turpis et aliquet. Suspendisse elit nunc; tristique eget pretium ullamcorper, sodales in libero. Sed nibh est, cursus non ultrices non, volutpat vitae metus. Sed rutrum lectus at lacus ultricies et gravida massa suscipit volutpat.
• Pellentesque pharetra; neque quis adipiscing porta, nisl nibh fermentum justo, eget dignissim libero tortor sit amet ligula. Nulla facilisi. Morbi magna dolor, ornare vitae lobortis in, tincidunt quis nisi. Vivamus et urna felis. Donec tristique felis a urna bibendum vitae dictum mauris mollis. Praesent non metus lectus, ornare varius nibh. Nullam nisi quam, commodo sed tincidunt et, vulputate non diam. Cras leo sem, tempor varius semper ullamcorper, porttitor sed turpis. Praesent eget sapien a dui feugiat elementum. Quisque facilisis auctor dui eget faucibus. Pellentesque auctor tristique ultricies. Pellentesque eu viverra ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam magna neque, malesuada eget ullamcorper vel, aliquam ac nullam.
• Aenean porta commodo diam, vitae vestibulum urna ultrices a. Etiam posuere posuere nibh; sed adipiscing lorem lacinia vel. Maecenas scelerisque tellus at nisi volutpat in consectetur nisl auctor. In hac habitasse platea dictumst. Nunc scelerisque purus sed erat sagittis tempor? Integer iaculis rhoncus sagittis. Curabitur enim quam, aliquet vel hendrerit ac, accumsan sed eros. Vivamus tristique arcu sed ligula luctus volutpat. Nunc non nisi eu ligula rutrum scelerisque. Vestibulum tellus risus, pellentesque vitae dictum et, adipiscing ut neque. Sed ultricies, nisl a tristique porta, leo neque semper lorem; non interdum metus ipsum at nulla. Mauris suscipit fermentum velit at ultrices.
• Proin at nulla nisl, ut porttitor purus. Duis sit amet enim iaculis mi lobortis tempor. Nunc quis arcu arcu; id porta erat. Sed sed libero ut dolor euismod bibendum. Nam sapien ante, pellentesque a malesuada fermentum, varius eget urna. In at felis velit, quis varius lacus? Ut placerat orci pretium elit vestibulum egestas. Sed in facilisis mi. Cras rhoncus elementum purus, id commodo leo laoreet quis. Cras malesuada mattis placerat! Etiam ut enim ut leo ultricies mattis non et tellus. Nullam vel sollicitudin mauris. Integer ante velit, rhoncus a fermentum eget; varius at erat. Nunc suscipit egestas posuere. Ut ut eleifend turpis. Sed pharetra nisl id ipsum tempor facilisis. Nunc eget nibh in augue porta aliquam. Nulla molestie sodales elit lacinia pulvinar. Duis eget lectus dui, a nullam.

Lo usamos incluyendo una lista dentro de un DIV que tenga establecida la clase horinaja:

<div id="nombreID" class="horinaja">
<ul>
<li> ... el contenido 1 ... </li>
<li> ... el contenido 2 ... </li>
...
<li> ... y así sucesivamente ... </li>
</ul>
</div>
<script type="text/javascript">
  document.observe("dom:loaded", function() { new Horinaja(nombreID,velocidad,delay,paginacion); });
</script>

donde:

nombreID es el ID del DIV contenedor y debe ser un nombre único
velocidad y delay indican el tiempo de la animación al siguiente slide (en segundos)
paginacion indica si queremos que se muestre una lista numerada de los slides (true) o no (false)

Por ejemplo:

document.observe("dom:loaded", function() { new Horinaja('demohorinaja',0.5,20,false); });

En lo personal, creo que hay que darle altura y el ancho al DIV contenedor y ocultarlo hasta que se cargue así que, por ejemplo, usaría algo así:

<div id="nombreID" class="horinaja" style="display: none; height: 250px; width:480pcx">

De este modo, lo mantendría oculto hasta que se cargue ya que si el contendio es "pesado", el efecto se ve mal hasta que termina de cargarse.

Para hacerlo visible, usaría la misma función, algo así:

document.observe("dom:loaded", function() { new Horinaja('nombreID',1,20,true);
document.getElementById('nombreID').style.display='block';});

• 
• 
• 
• 
• 

REFERENCIAS:Poca Tinta

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

REFERENCIAS:extraverage.net

¿En que categoría debería ir esto? ¿Sólo es una curiosidad? Bueno, quién sabe. Son esas cosas "nuevas" con gustito a "viejas" y es un descubrimiento de CaTa llamado Quitter.

¿Que es Quitter? Pués un cliente para Twitter desarrollado por Duane Roelands que funciona como si fuera el paleolítico D.O.S.

Una vez que lo descargamos y descomprimimos, sólo nos encontraremos con un archivo que ni siquiera se instala. Lo ejecutamos, se comunica con Twitter para autorizar el login, nos dan un PIN (una serie de números) para que entremos y listo, ya está funcionando y sólo hay que teclear, teclear y teclear.

• [P] para enviar un tweet
• [R] para responder
• [T] para hacer un retweet
• [D] para mensajes privados
• [C] para configarlo
• [Q] para salir
• [?] para leer la ayuda

Y si se requiere algo más de información basta acudir al HELP del sitio ... no hay mucha pero es suficiente.

El proyecto es open source así que también es posible descargar el código fuente que está creado con mi bieneamado Visual Basic.

de por qué usar bicicletas ...

de por qué usar condones ...

de por qué los monos son más inteligentes ...

Terminemos con la barra en el footer y empecemos a agregar el contenido de los elementos ocultos. Teníamos tres cosas que mostrar usando los botones Feedburner, Twitter y Facebook.

Como dije, puede ser cualquier cosa y, en estos ejemplos, copié el formulario de suscripciones en uno, coloqué el script para conectarse con Twitter en otro y puse una imagen en el tercero.

En todos los casos, lo hice exactamente igual que lo haría si tuviera que agregarlos en la sidebar o en cualquier otra parte del blog.

Terminado eso, volvemos a la edición HTML de la plantilla y agregamos unas definiciones CSS que dimensionarán esos elementos y los ocultarán:

/* el contenedor Twitter */
#HTML7 {display: none; width: 400px;}
/* el contenedor Feedburner */
#HTML8 {display: none; width: 240px;}
/* el contenedor Facebook */
#HTML9 {display: none; width: 260px;}

Como el estilo por defecto será "ocultos", si fuéramos a la solapa Elementos de la página no los veríamos así que no podríamos editarlos; para que esto no ocurra, es decir, para que esten ocultos en el blog pero visibles en esa ventana de edición, agregamos esto, también en la parte de estilo:

body#layout #footer-tools #HTML7 {display: block;}
body#layout #footer-tools #HTML8 {display: block;}
body#layout #footer-tools #HTML9 {display: block;}

Ahora, haciendo click en cada ícono, se mostrará ese contenido y volviendo a hacer click, se ocultará tal como podemos verlo en este DEMO online.

El script que pusimos al inicio es el que controla eso y consigue que sólo se muestre uno por vez, permutando la propiedad display.

No es necesario que todos los elementos se oculten y sean mostrados mediante íconos, también podríamos agregar accesos a gadgets que se ejecutaran directamente en la barra. Agreguemos dos más: un buscador y un ícono para abrir un formulario de contacto.

El primero, será un elemento Cuadro de búsqueda (id = CustomSearch1) y el segundo, otro elemento HTML (id = HTML2) que dependerá del formulario que usemos.

Luego, otra vez en la plantilla seguimos agregando CSS para esos elementos:

#CustomSearch1 {
  background: transparent url(URL_imagen) no-repeat left top;
  height: 35px !important;
  padding: 15px 0 0 60px;
  width: 180px;
}

/* y algún efecto extra sobre los íconos */
#contacto, #feedburner, #twitter, #facebook {opacity: .8; filter: alpha(opacity=80); }
#contacto:hover, #feedburner:hover, #twitter:hover, #facebook:hover {opacity: 1; filter: alpha(opacity=100);}

Otra vez, si es necesario, volvemos a cambiar el ancho de #footertools-barra-inner (ahora requiere 590 pixeles) ... veremos esto.

Y así podríamos seguir hasta el infinito, agregando cosas y haciendo que se muestren en la barra de manera directa o bien colocando enlaces para que se abran en ese DIV superior que permanece oculto hasta que lo necesitamos.

El proceso será siempre el mismo. Si se trata de íconos que abren ventanas modales:

• agregamos un elemento HTML en la barra inferior
• agregamos un elemento cualquiera en la barra superior y le ponemos el contenido
• tomamos nota del ID que se muestra en Edición HTML
• colocamos las propiedades necesarias (fundamentalemente su ancho)
• volvemos a editar el ícono y usamos el ID del elemento oculto para agregar la imagen y el enlace que ejectua el script

Si se trata de elementos que no requieren desplegarse:

• agregamos ese elemento en la barra inferior
• colocamos las propiedades necesarias en Edición HTML

El resultado final es el de este DEMO donde los contenidos son sólo simulaciones o bien copias de distintos gadgets de este mismo blog.

REFERENCIAS:Parte 1 Parte 2

Sigamos con la barra en el footer y empecemos a agregar los elementos.

Empezaremos poniendo cuatro elementos HTML abajo y tres arriba. A cada uno le daremos un título para poderlos identificar luego en el código y cualquier contenido porque lo primero que necesitamos es crearlos, debemos saber el ID que les colocará Blogger y no nos dejará crearlos vacios; luego, tendremos que editarlos para colocarles el contenido real.

En el ejemplo, los de abajo tendrán estos títulos: Feedburner, Twitter, Facebook e IcoTools; los de arriba serán Contenedor Facebook, ContenedorTwitter y Contenedor Feedburner. Deberíamos entonces, ver algo así:

Si volvemos a la edición HTML, sin expandir los artilugios, veremos algo así:

<div id='footertools-contenedor'>
<b:section id='tool-container'>
<b:widget id='HTML9' locked='false' title='Contenedor Facebook' type='HTML'/>
<b:widget id='HTML7' locked='false' title='ContenedorTwitter' type='HTML'/>
<b:widget id='HTML8' locked='false' title='Contenedor Feedburner' type='HTML'/>
</b:section>
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner'>
<b:widget id='HTML5' locked='false' title='Feedburner' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Twitter' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Facebook' type='HTML'/>
<b:widget id='HTML10' locked='false' title='IcoTools' type='HTML'/>
</b:section>
</div>

¿Para qué nos sirve? Para saber los IDs de esos elementos que estarán ocultos y poderlos desplegar y contraer. Ahora, sabemos que:

• Contenedor Facebook tendrá el ID HTML9
• ContenedorTwitter el ID HTML7
• Contenedor Feedburner el ID HTML8

Agregaremos un script para luego, poder controlar esos elementos. Lo ponemos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  var toolOpen = "";
  function ftool(cual) {
    var cualmostrar = document.getElementById(cual);
    if (cualmostrar.style.display == 'block') {
      cualmostrar.style.display='none';
      toolOpen = "";
    } else {
      if (toolOpen != "") { document.getElementById(toolOpen).style.display='none'; }
      cualmostrar.style.display='block';
      toolOpen = cual;
    }
  }
  function togglebarra() {
    var labarradiv = document.getElementById('footertools-barra');
    var labarraimg = document.getElementById('icotoggle');
    if(labarradiv.className == "footertools-barra-max") {
      labarradiv.className = "footertools-barra-min"
      labarraimg.src="URL_imagen_MIN";
    } else {
      labarradiv.className = "footertools-barra-max"
      labarraimg.src="URL_imagen_MAX";
    }
  }
//]]>
</script>

Y ya que estamos, como sabemos que el elemento al que le dimos por título IcoTools tendrá el ID HTML10, agregamos unas propiedades CSS especiales ya que ese será el botón con que expandiremos y contraeremos la barra:

/* este elemento de control lo pondremos a la derecha de la barra */
#HTML10 {
  position: absolute;
  right: 0;
}

Guardamos y no veremos nada nuevo porque no tenemos contenido. Vamos entonces a editar los elementos de la barra y agregarles ese contenido, en este caso, sólo un enlace con una imagen.

En el elemento llamado Feedbuner pondremos esto:

<a id="feedburner" href="javascript:ftool('HTML8')"><img src="URL_imagen_Feedburner" /></a>

En el elemento llamado Twitter pondremos esto:

<a id="twitter" href="javascript:ftool('HTML7')"><img src="URL_imagen_Twitter" /></a>

En el elemento llamado Facebook pondremos esto:

<a id="facebook" href="javascript:ftool('HTML9')"><img src="URL_imagen_Facebook" /></a>

En el elemento llamado IcoTools pondremos esto:

<a href="javascript:togglebarra()"><img id="icotoggle" src="URL_imagen_Icono" /></a>

Cualquier otro que agreguemos y que sirva para abrir "otra ventana", tendrá la misma estructura:

<a id="unnombre" href="javascript:ftool('ID_elemento_oculto')"><img src="URL_imagen" /></a>

El resultado, hasta acá, será el que puede verse en este DEMO

NOTA: Como sólo hemos agregado tres cosas, el ancho que está indicado en #footertools-barra-inner es excesivo, así que si queremos verlo centrado, modificamos el valor de width y ponemos 180px.

Haciendo click en el ícono que está más la la derecha, la barra se minimizará y se expandirá pero siempre permanecerá visible y fija.

Haciendo click sobre los íconos, no pasará nada porque no tienen contenido ¿Qué podemos agregar? Cualquier cosa, exactamente igual a lo que hacemos en el resto del blog.

Paciencia, ya casi terminamos ...

REFERENCIAS:Parte 1

Wibiya es una aplicación que nos permite incluir una barra con funciones varias dentro de un sitio web: Facebook, Twitter, feeds, las últimas entrada, buscadores, etc. El problema es que si uno quiere probarla deberá solicitar una invitación porque aún no está disponible al público

Pero, en realidad, nada impide que uno pueda crearse una propia, a gusto y piachere, con las cosas que quisiera usar y con el diseño que se nos ocurra. De alguna manera, es una solución alternativa al dilema de ¿que hacer con el footer de una página?

Así que la idea es diseñar una barra que se mantenga estática en la parte inferior de la página en donde podamos agregar pequeñas aplicaciones o íconos que las abran en alguna ventana de tipo modal sin utilizar otra cosa que los elementos de Blogger; es decir, sin librerías externas ni scripts complejos para que sea liviano, flexible y compatible con cualquier plantilla.

¿De qué hablo? De conseguir algo como esto:

Cuyo demo puede verse funcionando online siguiendo este enlace y cuyo aspecto estético o diseño gráfico, dependerá pura y exclusivamente de la imaginación. Este es particularmene "grande" sólo para que se "vea bien"

Para empezar, todo lo que necesitamos es crear dos DIVs con sus respectivas secciones para que luego, podamos agregarle elementos o gadgets tal como hacemos normalmente desde el panel de diseño.

Serán dos porque uno (el inferior) será la barra siempre visible y fija en la pantalla y el otro permanecerá oculto y es donde se mostrarán las ventanas si es que necesitamos mostrar alguna. Este entonces, no será otra cosa que una ventana modal que controlaremos con unas pocas líneas de JavaScript ¿Confuso? Cerrar los ojos, decir sí y manos a la obra ...

En Diseño | Edición HTML, sin expandir los artilugios para no confundirnos, buscamos el último </div> que haya en la plantilla y justo debajo, agregamos las dos nuevas secciones:

<div id='footertools-contenedor'>
<b:section id='tool-container' />
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner' />
</div>

Y ahora, crearemos el estilo CSS antes de </head> donde, en los sucesivos pasos, iremos agregando las propiedades de los elementos que usemos:

<style type='text/css'>

/* FOOTER TOOLS : Todas las definiciones de estilo van acá */

/* este es el DIV inferior con la barra visible */
#footertools-barra {
background: transparent url(URL_unaimagen) repeat-x left top; /* un fondo de color o una imagen optativa */
bottom: 0; /* esto lo fuerza a ubicarse en la parte inferior de la pantalla */
right: 0; /* y que se extienda de lado a lado */
height: 50px; /* es la altura que puede ser cualquiera y depende de los íconos a usar */
margin: 0 auto; /* su contenido se centrará */
padding: 0; /* eliminamos cualquier relleno para que la altura sea exacta */
position: fixed; /* lo fijamos para que no se mueva y permanezca siempre visible */
}
/* el ancho lo pondremos por separado, en una clase para poder minimizar esa barra */
.footertools-barra-max { /* desplegada, ocupará todo el ancho de la pantalla */
width: 100%;
}
.footertools-barra-min { /* contraida ocupará sólo el ancho de un ícono  */
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
width: 60px;
}

/* este es el DIV interior de esa barra */
#footertools-barra-inner {
height: 50px; /* tendrá el mismo alto */
margin: 0 auto; /* su contenido estará centrado */
width: 920px; /* y le daremos un ancho que dependerá de la cantidad de cosas que pongamos */
}

/* estas son las propiedades generales de los gadgets que agregaremos luego */
#footertools-barra .widget { /* cada elemento agregado */
float: left; /* se verán uno lado del otro */
height: 50px; /* la altura es siempre la misma */
margin: 0 5px; /* los separamos un poco uno del otro */
}
#footertools-barra h2 { /* y ocultaremos los títulos */
display:none; 
}

/* este es el DIV superior con el contenido oculto */
#footertools-contenedor {
bottom: 55px; /* se mostrarán arriba de la barra, separado un poco de esta */
right: 0;
margin: 0 auto; /* tambien lo centramos */
position: fixed; /* y lo fijamos en la pantalla */
text-align: left;
width: 100%; /* y le damos todo el ancho disponible */
}

/* estas son las propiedades generales de los gadgets que agregaremos luego */
#footertools-contenedor .widget {
-moz-border-radius: 10px;
background-color: #E4E4E4;
border: 2px solid #000000;
margin: 0 auto; /* siempre se mostrarán centrados en la pantalla */
padding: 10px;
}
#footertools-contenedor h2 { /* y los títulos de esos widgets ocultos */
border-bottom: 1px dotted #999;
color: #BB0000;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
letter-spacing: -.01em;
line-height: 24px;
margin: 0;
text-align: right;
}

</style>

El resultado no será nada del otro mundo, sólo una barra fija en la parte inferior de la ventana como se ve en este DEMO.

Un detalle a tener en cuenta es que, como queremos que esas dos secciones sean accesibles en el modo Diseño tal como lo son la sidebar o el footer estandard, mejor le agregamos dos definiciones más para evitarnos problemas:

body#layout #footertools-barra {position: static;}
body#layout #footertools-contenedor {position: static;}

Eso, sólo hará que en esa ventana interna de Diseño, se nos muestren las secciones de manera "normal" y, pongamos lo que pongamos, no tendrá ninguna influencia con la forma en que vemos el blog. Nos movemos entonces a esa paestaña para agregar elementos. Veremos algo así:

Ahora, es tiempo de agregar esos elementos pero para eso, hay que esperar hasta mañana porque esto se ha hecho demasiado largo