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):

Caetano Veloso

Soy loco por ti America..

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/0A2Jc7zx8RM'><param name='movie' value='http://www.youtube.com/v/0A2Jc7zx8RM' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

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)

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

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>

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';});

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.

La magia de la publicidad

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/KrV-BeOLGhY'><param name='movie' value='http://www.youtube.com/v/KrV-BeOLGhY' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

de por qué usar bicicletas ...

de por qué ...

usar bicicletas.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/sncjHFr2Ef8'><param name='movie' value='http://www.youtube.com/v/sncjHFr2Ef8' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

de por qué usar condones ...

de por qué ...

usar condones.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/urN1uo_7Kts'><param name='movie' value='http://www.youtube.com/v/urN1uo_7Kts' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

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

de por qué ...

los monos son más inteligentes.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/r4l7Kw5KoGw'><param name='movie' value='http://www.youtube.com/v/r4l7Kw5KoGw' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

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á.

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) ...

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

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>

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:

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>

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.

Microsoft Live Labs es un centro de pruebas; allí nos podemos encontrar con una serie de experimentos que podemos utilizar:

• Colour Picker
• Infinite Canvas
• Photosynth
• Social Streams
• Thumbtack

Uno de ellos se llama SeaDragon y es muy simple de aplicar en nuestra página web. Lo que nos permite es mostrar imágenes "enormes", agregando un script de una línea. Para usarlo, basta entrar en el sitio y colocar la URL de la imagen a ser mostrada, hacer click en Create, copiar el código que nos dan y pegarlo donde se nos ocurra mostrarlo.

En este ejemplo, se trata de una imagen de 3000x1961 pixeles y el resultado es una URL a la que podemos acceder y un script que podemos copiar:

<script src="http://seadragon.com/embed/5ap.js?width=auto&height=400px"></script>

Para desarrolladores, hay disponible un API que inluye bastante documentación y con la cual podemos personalizar los resultados y modificar el reproductor.

CSS newbie nos muestra algunos ejemplos de las posibilidades que nos brinda la propiedad border. Jugando un poco con eso, podemos divertirnos un buen rato:

un ejemplo

<style>
.borde1 {
  background: #FFFFFF url(UNA_IMAGEN) no-repeat 50% 50%;
  border: 12px dashed #1B1A19;
  height: 307px;
  margin: 0 auto;
  padding: 36px;
  width: 250px;
}
.borde1 p {
  color: #FFF;
  margin: 10px 10px 0 0;
  font: bold 36px Georgia, 'Times New Roman', Times, serif;
  text-align: right;
}
</style>

<div class="borde1"><p> texto ejemplo </p></div>

Praesent mattis orci eget ligula imperdiet nec pellentesque augue pellentesque.

<style>
.borde2 {
  -moz-border-radius: 8px;
  background-color: CornflowerBlue;
  border: 2px outset CornflowerBlue;
  margin: 0 auto;
  padding: 1px 10px;
  text-align: center;
  width: 250px;
}
.borde2 p {
  border: 3px dashed AliceBlue;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px;
}
</style>

<div class="borde2"><p> texto ejemplo </p></div>

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.

<style>
div.borde3 {
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-topright: 5px;
  border-color: #AABBCC #AABBCC #AABBCC transparent;
  border-style: solid;
  border-width: 15px 15px 15px 20px;
  margin: 0 auto;
  padding: 0;
  width: 500px;
}
div.borde3 p {
  margin: 0;
  padding: 5px;
  text-align: right;
}
</style>
<div class="borde3"><p> texto ejemplo </p></div>

Wallpapers (tigres)

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

Feederr es una aplicación web donde ingresamos la URL de nuestro sitio y nos devuelve un código con una imagen que muestra el título de la última entrada que hayamos publicado.

Es otra forma de generar banners o firmas ya que se actualizará de forma automática cada vez que publicamos algo.

Podemos configurarla gráficamente, eligiendo un modelo predefinido o estableciendo los colores del fondo, bordes, textos e incluso su tamaño.

Feederr

Una demostración de su uso.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/xVrlmLQ2IIM'><param name='movie' value='http://www.youtube.com/v/xVrlmLQ2IIM' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:wwwhatsnew.com

Esto no es mi culpa sino de la curiosidad: ¿Es posible hacer que la imagen de fondo de una página web se mueva con un scroll sin usar librerías?

Pués, la verdad, sí. Digamos que es una técnica del tiempo en que las cosas que había en internet debían "moverse" todo el tiempo y nos fascinaba que así fuera aunque, por suerte ya se ha abandonado el bamboleo.

Por supuesto, la forma más simple de "sacudir" el fondo es usar un gif animado pero, no es lo mismo.

Para crear un efecto scroll del fondo sólo se necesita una imagen y un pequeño script.

Colocamos la imagen a utilizar en la definición CSS del body:

body {background:#FFFFFF url(URL_imagen) repeat scroll 0 0;}

Y luego, el script antes de </head>:

<script type='text/javascript'>
//<![CDATA[
var laPosicionVertical = 0;
function scrollFondo(maximo) {
laPosicionVertical = laPosicionVertical + 1;
if (laPosicionVertical > maximo) {
laPosicionVertical = 0;
}
document.body.style.backgroundPosition = '0 ' + laPosicionVertical + 'px';
}
window.onload= function(){
var scrollTimer = window.setInterval('scrollFondo(500)', 64);
}
//]]>
</script>

En el llamado a la función puden cambiarse dos datos:

500 es la altura máxima, generalmente, es similar a la altura de la imagen a usar
64 es la velocidad, un número menor hará un scroll más rápido y un número mayor un scroll más lento.

Noticias de Darwin y la evolución.

Gajes del oficio.

Corre que te pillo ...

Por lo general, cuando hablamos de estilos CSS nos referimos a clases y definiciones colocadas en un etiqueta <style> </style> o, en Blogger, a lo que está entre las etiquetas <b:skin> </b:skin> pero claro, esa no es la única manera de agregar estilo a algo. También es común hacerlo directamente en la etiqueta que queremos modificar:

<p style="color: white"; font-size: 20px;> ....... </p>

Esto es conocido como un método inline, es decir, usamos style no como etiqueta sino como atributo de una etiqueta. En ambos casos, el contenido (las propiedades) son las mismas.

¿Por qué hacemos esto? A veces, por simple comodidad, otras veces, para sobrescribir alguna propiedad definida con anterioridad. Por ejemplo, casi cualquier sitio posee alguna clase de definición genérica para los enlaces; algo así:

a, a:visited, a:link  {color: #BCD; text-decoration: none;}
a:hover {color: #DEF; text-decoration: none;}

Asi que si escribimos <a href="#">un enlace</a> se verá de este modo.

Eso es perfecto, nos evita escribir las definiciones una y otra vez pero, si por alguna razón queremos que un enlace específico se vea diferente, deberemos agregarle el atributo style para sobrescribir esa propiedad así que si ponemos <a style="color: red" href="#">otro enlace</a> el enlace se verá de otro modo. Incluso, dependiendo de la situación, deberrmos reforzar ese cambio agregándole la palabra !important:

<a style="color: red !important" href="#">otro enlace</a>

Resumiento, usamos el atributo style para cambiar una propiedad definida con antelación pero ¿y si queremos hacer lo contario?

Muchas veces, usamos scripts o gadgets que no podemos editar y que colocan ciertas propiedades de manera más o menos automática y por lo tanto, no tenemos acceso al código para cambiarlo. Sabemos cuál es (lo podemos ver leyendo el código fuente) pero, simplemente, estamos atados de pies y manos.

No todo está perdido.

En una entrada anterior se mostraban los llamados pseudo-elementos y atributos especiales. Entre esas cosas, estaba la posibilidad de definir propiedades en función de los atributos de una etiqueta:

a.enlaceA {color:yellow;}
a.enlaceA[title] {color:red;}

<p>
Este enlace no tiene title y es <a class="enlaceA" href="#">amarillo</a>
Como este otro enlace tiene title es <a class="enlaceA" href="#" title="El enlace rojo">rojo</a>
</p>

Lo que hacía la primera definición era poner los enlaces de color amarillo y la segunda, los ponía de color rojo si el enlace tenía un atributo title.

Este enlace no tiene title y es amarillo
Como este otro enlace tiene title es rojo

Así que, usando el mismo criterio, podríamos buscar el atributo style:

a.enlaceB {color:yellow;}
a.enlaceB[style] {color: lightblue;}

<p>
Este enlace no tiene style y es <a class="enlaceB" href="#">amarillo</a>
Como este otro enlace tiene style no será rojo <a class="enlaceB" style="color: red;" href="#">sino azul claro</a>
</p>

Este enlace no tiene style y es amarillo
Como este otro enlace tiene style no será rojo sino azul claro

¿Funcionará en todos los navegadores? No me hagan reir. Lo hará en todos los "modernos" incluyendo Internet Explorer 8 pero, no lo hará en IE6 y, aunque aseguran que también lo hace en IE7, no he podido comprobarlo.

REFERENCIAS:Natalie Jost

Twitter Mosaic es un servicio para Twitter que crea un mosaico con los avatares de los seguidores de una cuenta. Aunque está pensado para ser impreso en algún objeto (previo pago), también es posible generar un código que podemos copiar y pegar en una página web.

REFERENCIAS:El blog de Jabba