Pluralink: Un enlace con varios enlaces

Pluralink es un curioso script para JQuery que permite generar un enlace con varios en su interior:

Por supuesto, primero debemos tener agregada la librería en nuestra plantilla:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>

Luego, podemos descargar el script y alojarlo nosotros o bien usar el código que ellos nos brindan, incluyendo hacks para Internet Explorer y el CSS correspondiente:

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie.css" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie6.css" type="text/css" />
<![endif]-->

Para aplicarlo a nuestros enlaces, basta separar las direcciones URL y los títulos con una doble barra vertical ||

<a href="URL_pagina1||URL_pagina2" title="titulo_pagina1||titulo_pagina2"> TEXTO O IMAGEN </a>

En el caso de usar Wordpress, hay un plugin que puede ser agregado y que podemos descargar en formato ZIP

REFERENCIAS:WebAppers

En aext.net nos muestran dos formas de crear el efecto burbuja en los enlaces, es decir, que cuando coloquemos el cursor sobre un enlace con una imagen, esta se amplie. Entre ambos, me quedo con el de los sprites ya que es la técnica que me parece más adecuada y la que menos recursos requiere; sólo necesitamos una imagen y un poco de CSS.

En este ejemplo, esa imagen tiene 300x600 y es un rectángulo dividido en sectores de 150x150, por lo tanto cada imagen la podemos ubicar con un poco de aritmética.

• demoBubble1
• demoBubble2
• demoBubble3
• demoBubble4

Veamos el CSS:

#bubble { /* el contenedor que en este caso será una lista */
  list-style: none;
  margin: 0;
  padding: 0;
}
#bubble li { /* cada item de esa lista */
  display: inline-block;  /* o usar float:left si se quiere que sea compatible con versiones anteriores a IE8 */
  margin: 0;
  padding: 0;
}
#bubble li a.icon { /* una clase general para los items, donde agregamos el sprite */
  background: url(URL_imagen) no-repeat;
  border: none;
  display: block;
  height: 150px; /* el alto de cada sector */
  text-indent: -9999px;  /* la ocultamos */
  width: 150px; /* el ancho de cada sector */
}

/* ahora, posicionamos el fondo para cada item y para su efecto hover */

#bubble li a.demoBubble1 { background-position: -150px 0px; }
#bubble li a.demoBubble1:hover { background-position: 0px 0px; }

#bubble li a.demoBubble2 { background-position: -150px -150px; }
#bubble li a.demoBubble2:hover { background-position: 0px -150px; }

#bubble li a.demoBubble3 { background-position: -150px -300px; }
#bubble li a.demoBubble3:hover { background-position: 0px -300px; }

#bubble li a.demoBubble4 { background-position: -150px -450px; }
#bubble li a.demoBubble4:hover { background-position: 0px -450px; }

¿Cómo lo usamos? Creando una lista:

<ul id="bubble">
  <li><a class="icon demoBubble1" href="javascript:void(0);">demoBubble1</a></li>
  <li><a class="icon demoBubble2" href="javascript:void(0);">demoBubble2</a></li>
  <li><a class="icon demoBubble3" href="javascript:void(0);">demoBubble3</a></li>
  <li><a class="icon demoBubble4" href="javascript:void(0);">demoBubble4</a></li>
</ul>

Aunque siempre es mejor usar imágenes específicas, basta hacer cuentas para usar esta misma técnica y mostrar algo diferente. Por ejemplo, algo similar al llamado Sexy Bookmarks:

• demoBubble1
• demoBubble2
• demoBubble3
• demoBubble4

REFERENCIAS:Utilidades para Webmasters

¿Será más rápido cargar una imagen grande o varias imágenes pequeñas?

No es una pregunta retórica, durante mucho tiempo, siempre se ha creido lo segundo y de hecho, la técnica del slice, partir una imagen en pedazos y cargar cada parte por separado, es algo que incluso poseen varios editores de imágenes como Photoshop o Fireworks.

Sin embargo, de un tiempo a esta parte, la idea ha ido cambiando y en estos momentos, hay una tendencia a lo contrario, al uso de los llamados sprites, es decir combinar varias imágenes en un solo archivo y luego, utilizar CSS para mostrarlas (más información)

¿Cómo hacemos esto? Es simple, sólo necesitamos un poco de aritmética.

Por ejemplo, supongamos que tengo tres íconos de 16x16 que quiero mostrar como enlaces y cada uno de ellos, tiene un efecto hover; necesitaría seis imágenes individuales. Las combino con un editor, poniendo una al lado de la otra y creo una sola imagen que tendrá 48x32:

En la fila superior tengo los tres íconos en estado "normal" (los que veré por defecto) y abajo los tres que mostraré cuando pase el mouse sobre ellos.

La propiedad background nos permite colocar una imagen de fondo y posicionarla, es decir, que si dimensionamos algo, podemos agregarle un fondo de mayor tamaño y  sólo mostrar una parte de esa imagen. Creamos unas clases CSS para que se vea el ejemplo:

/* las propiedades generales */
a.iconos {
  background:transparent url(URL_IMAGEN) no-repeat 0px 0px;
  display: block;
  height: 16px;
  width: 16px;
}

/* las propiedades de cada uno de los íconos */
a.icono1 {background-position: 0px 0px;}
a.icono2 {background-position: -16px 0px;} /* desplazamos la imagen 16 pixeles a la izquierda */
a.icono3 {background-position: -32px 0px;} /* desplazamos la imagen 32 pixeles a la izquierda */

/* las propiedades de los íconos con efecto hover */
/* de manera similar, desplazamos la imagen a la izquierda y 16 pixeles hacia arriba */
a.icono1:hover {background-position: 0px -16px;}
a.icono2:hover {background-position: -16px -16px;}
a.icono3:hover {background-position: -32px -16px;}

Lo mismo podemos hacer inline, escribiendo el estilo en la etiqueta HTML. Ene ste ejemplo usamos una imagen de 96x170 pixeles donde se combinan dos, una debajo de la otra:

En este ejemplo, usamos dos imágenes de 96x85 combinadas:

<div 
  style="background: transparent url(URL_IMAGEN) no-repeat 0px 0px; cursor:pointer; height: 85px; margin: 0 auto; width: 96px;"
  onmouseover="this.style.backgroundPosition='0px -85px';"
  onmouseout="this.style.backgroundPosition='0px 0px';"
></div>

La posición se define en pixeles, primero la coordenada horizontal y luego la coordenada vertical. La posición 0px 0px es la esquina superior izquierda, y el desplazamiento lo calculamos sumando los anchos y/o los altos de cada parte y colocándo ese valor como un número negativo.

¿Cuál es la ventaja? Fundamentalmente, cuando se trata de íconos con efectos hover, evitamos la demora que se produce cuando se carga la segunda imagen; al ser una sola, siempre está disponible y eso agiliza la visualizacion de las páginas.

Obviamente, no es algo para aplicar en cualquier caso y siempre hay que tener en cuenta que el tamaño de las imágenes es un detalle a tener muy en cuenta cuando se trata de velocidades de carga pero, es un método efectivo y muy recomendable.

Microsoft Translator es el servicio de traducción de Bing. Allí, podemos encontrarnos con algunas herramientas que podemos agregar a nuestros sitios.

La más simple es una lista desplegable que nos lleva a la página principal del traductor:

Pero, más interesante, es el widget que podemos incorporar y que realizará traducciones en tiempo real sin salir de nuestro sitio.

Entramos en la página, escribimos la dirección URL de nuestro sitio, el lenguaje base; seleccionamos el ancho y los colores; aceptamos las condiciones y se generá el código que deberemos copiar y pegar donde querramos mostrarlo, por ejemplo, en un elemento HTML:

REFERENCIAS:Pizcos Blog

FontEffect es un script para JQuery que permite crear textos con cuatro efectos gráficos diferente que a su vez, pueden combinarse entre si.

Agregamos la librería antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

Y luego el script en si mismo, ya sea alojándolo en un servidor:

<script type='text/javascript' src='URL_jquery-FontEffect-1.0.0.min.js' />

o copiando y pegando su contenido:

<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

Los efectos se crean de manera individual, indicando el ID de la etiqueta o de manera más general, usando clases.

Por ejemplo:

<div id="miEfecto" style="color:#000; font-family: Impact; font-size: 60px;"> Efecto Outline</div>
<script> $('#miEfecto').FontEffect({ outline:true }) </script>

Todos se contruyen igual, una etiqueta con un estilo personal y luego la llamada a la función:

<script> $('#nombreID').FontEffect({ ....... el efecto ....... }) </script>

Algunos ejemplos:

Sombras
<script>$('#miEfecto').FontEffect({ shadow:true })</script>

Gradiente
<script>$('#miEfecto').FontEffect({ gradient:true, gradientColor:'#FFF' })</script>

Mirror
<script>$('#miEfecto').FontEffect({ mirror:true,mirrorColor:'#f3f2f2',mirrorTLength:80,mirrorTSTart:.8  })</script>

Outilne + Sombras
<script>$('#miEfecto').FontEffect({ outline:true, shadow:true })</script>

Gradiente + Mirror
<script>$('#miEfecto').FontEffect({ gradient:true, mirror:true, mirrorColor:'#00FFFF',mirrorTLength:80,mirrorTSTart:.8 })</script>

Varios efectos combinados
<script>$('#miEfecto').FontEffect({ outline:true, outlineColor1:'#fc0', outlineColor2:'#f00', gradient:true, gradientColor:'#f00', gradientPosition:10, gradientLength:60, gradientSteps:10 })</script>

Del mismo modo, puede crearse una clase CSS y usarla varias veces; por ejemplo, podemos definir una para los encabezados H2:

<h2 class='miClase'> un texto  </h2>
<h2 class='miClase'> otro texto  </h2>
.......
<script>$('.miClase').FontEffect({ shadow:true })

Estos son los parámetros que pueden usarse:

outline: true activa el efecto
outlineColor1:"#rrggbb" color del ángulo superior izquierdo
outlineColor2:"#rrggbb" color del ángulo inferior derecho
outlineWeight :1|2|3 indica light | normal |bold (por defecto es 1)

mirror: true activa el efecto
mirrorColor:"#rrggbb" color del reflejo
mirrorOffset:valor distancia al texto (por defecto es -10)
mirrorHeight:valor porcentaje altura del reflejo (por defecto es 50)
mirrorDetail:1|2|3 indica el detalle high | medium | low (por defecto es 1)
mirrorTLength:valor porcentaje de esfumado (por defecto es 50)
mirrorTStart:0/1 opacidad inicial (por defecto es 0.2)

shadow: true activa el efecto
shadowColor:"#rrggbb" color de la sombra
shadowOffsetTop:valor posición superior en pixeles (por defecto es 5)
shadowOffsetLeft:valor posición inferior en pixeles (por defecto es 5)
shadowBlur:1|2|3 indica el esfumado none | low | high (por defecto es 1)
shadowOpacity:valor opacidad de la sombra (por defecto es 0.1)

gradient: true activa el efecto
gradientColor:"#rrggbb" color del gradiente
gradientPosition:valor porcentaje posición inicial (por defecto es 20)
gradientLength:valor porcentaje gradiente (por defecto es 50)
gradientSteps:valor variación (por defecto es 20)

REFERENCIAS:jQuery Gallery

Un lipograma es un texto en que, adrede, se evita utilizar alguna letra.

Leon Gieco

- Ojo con los Orozco

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

Mama Ladilla

En el vergel del eden.

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

Oscar de la Borbolla es un escritor mexicano, profesor de metafísica y, su libro Las vocales malditas (1991), está considerado como uno de los más extraordinarios de la lengua española justamente por tener esa particularidad, cada uno de sus cinco cuentos está escrito exclusivamente con palabras que emplean la misma vocal.

Recientemente, la agencia publicitaria Ogilvy ha iniciado una campaña con uno de ellos.

ACantata a Satanás [+]

Abraham amaba a Sara cada manana clara: pasaba la manaza, aranaba la lana,arrancaba la bata, la abrazaba; clavaba las garras hasta matarla. Saraatarantada callaba harta, Abraham la cansaba. "Ya nada habra --mascabatras la sabana--, ama a la mala; ataca, aplasta, brama." Abraham acababa,apartaba la cara, jamas apagaba la flama a Sara, gran dama avasallada;daba palmadas a la santa, la llamaba "alma"; mas jamas la agradaba. Facasaba la casa blanca, la sagrada paz. Sara maltrataba a Abraham:"?Habra raza mas mala para la cama?", ladraba. Abraham agarraba lagarganta a la casta casada, la arrastraba a la sala. Sara sacaba laspalabras mas bravas, las dagas pasmaban la faz al papanatas. La batallaavanzaba hasta alarmar a Satanas. "!Sarna! !Alacran fatal!" bramaba Abraham. "!Can! !Patan anal!" balaba sara. Mas avanzada la manana, parahallar mas armas arrasaban la casa, a la par lanzaban lamparas, tazas,navajas hasta sangrar. Para acabar la tanda, las almas atagaban! ! las bravatas, tragaban carcaj das amargas, ataban mascaras aplacadas a lacara."Anda haragan, a trabajar para ganar la plata", cantaba avara Sara,amarrada a la mas vana maldad: mandar para calmar la falta, agachar alcanalla, calar mas. Abraham, fantasmal facha, agarra la pala, zafa laaldaba, baja a la calzada, pasa la barranca hasta hallar la cabana. Allapagaban tan mal; mas Abraham cargaba las trancas mas anchas, alzaba lasbardas mas altas, amasaba argamasa, clavaba tablas, trazaba largas zanjas. Trabajaba hasta abaratar la paga. Magna transa. Tan gran afan para nada,la grasa bana las barbas a Abraham; mas la tallla nada mas agranda lapanza al capataz.Sara ajada, mas flaca cada manana, lavaba la casa: arrancaba a las sabanasmanchas, canas, caspa; al alzar la sala hallaba cascaras, naranjas, tazasrajadas, latas achatadas. Asaba papas, adaptaba las aspas para machacarcalabazas, aplanaba la masa, la salaba. Al planchar las maltratadasfaldas aplastaba aranas, raspaba las manchadas bragas; mataba ratas paraacabar la plaga. "Abraham --habla Sara--- jamas arma las trampas. Lasratas a manadas traspasan la alambrada, a tarascadas atacan las patas a lacama, tragan la pasta...!Ah, malvada parca! Basta ya, basta ya. Nadasalvara a Sara. Nada. Nada." Jamas manaban al trabajar gratas palabras. Cansada, harta, la gran dama nada amaba. Masacrar a las ratas, matar a Abraham tramaba; mas apagada, blanda, lanzada al drama, nada hallaba paramarchar a la paz, acabar la marana, traspasar tanta trastada, dar manas alplan.Sara bajaba a la plaza, andaba al altar, llamaba para aval a Satanas,trazaba rara cabala. Las campanas acallaban las palabras; mas daban alaspara pactar. Sara bramaba: "?Valdran las afamadas almas tanta malapasada?" Satan tardaba para cazar mas barata a Sara, para lanzarla almar. La amargada dama avanzaba mas gradas; para jalar la balanza alzabalas palmas, aclaraba la ganga: "Vas a ganar --clamaba--, vas a ganar."

Satan tardaba para cazar mas barata a Sara, para lanzarla al mar. Laamargada dama avanzaba mas gradas; para jalar la balanza alzaba laspalmas, aclaraba la ganga: "Vas a ganar --clamaba--, vas a ganar."A tanta llamada, Satanas da la cara; alarga la gran carta. Sara laagarra; la halla banal, payasa, larga; mas labra la palabra "Sara" paraagradar a Satanas. La Gran Cabra atrapa la carta, la lacra; saca la caja,alza la tapa, saltan salamandras, da a Sara la bala para sanar: "Marcha ala carpa --manda--, alla hallaras blanda paja, gran galan para la carnalfalta." Sara arranca a la plaza, va a la casa a amarrar la faja parabajar la panza; va a lavar las laganas, la mala facha para amar al galan. Saca alpaca, aparta sayal, agarra canasta. "A la carga," canta. Va a lacarpa, al pasar arrabal halla a la banda ATLA's HAMPA. La Llaman: "Aca,chaparra." "Ancla las patas, pasalas." "?Vas al jacal, chata?" Sara, lacara grana, avanza a zancadas, va mas atrabancada. Atras la banda laaclama.Sara halla a Baltasar. Charlan: "Ah... ?Satanas manda?" "Aja". Pasanla camara, atrancan la chapa, tragan pasas, alzan la garrafa, danzan. Baltazar saca a Sara la capa, la falda, las mallas. Apagan la lampara,aplastan la manta, acatan la carta: gran cascada, gran catarata. Altaparvada, sacras arpas. "!Baltasar!" "!Sara!" Caravana malva, gas nacar. "!Barbara Sara!" "!Cabal Baltasar!" Baltasar halaga a Sara, da alhajas,ambar, agatas; la abraza, la llama "hada"; saca la palangana, la bana. Baltasar la ama.Abraham trabajaba. Al acabar la zanja va al bar. Jala la banca, agarrala jarra, parla nasal al capataz: "!Vaya acanalada!, hasta la pala gasta." "Bah, tamana pala para arar... Pasa la cana" "Alla va." "Ah..." Abraham baja la cara a la manga. Pasa a la chava." Abraham agarra lachanza: "Ah... ?la arrastrada? Nada mas ladra... Manana, zas." "Pasala." "?A la amarga Sara? Ya vas..." "?Vas a casa?" "Jamas." Abraham mascapataz arman la parranda, claman: "Mas jarras, mas."Acabada la hazana, Sara apalabra a Baltasar. Van a la casa blanca. Hallan acampanada a la banda ATLA's HAMPA tras la barranca; Sara vaamparada: la banda calla. Baltasar carga la canasta a Sara. Alcanzan lacalzada, pasan la casa. Hallan a Abraham hasta atras, mala cara, fazatada. "Ah, malvada --brama--, chacal para bacanal." Abraham alza lapala. Sara salta para atras. Baltasar avanza: "!Calma ganan!" Abrahamsaca larga daga. Satanas atrasa a Baltasar, da armas. Salta la bala.Mata a Abraham. Las babas atascan las palabras. Abraham va al mas alla. Sara calma a Baltasar. Cavan gran zanja a la sala para lanzar alcarcamal. Sara alaba la talla a Baltasar. Van a la cama, jalan la manta. La manana aclara las gargantas, cantan, danzan. Baltasar abraza a Sara:"Amada hada," la llama.

EEl hereje rebelde [+]

Desde el estrés del Jefe el edén decrece, el excedente le pertenece, se ejercen leyes dementes, se debe beber detergente en vez de leche, ser pelele, ser pedestre, ser deferente; es menester entretenerse en tejer redes, en prender rebeldes. En el este, trece rehenes perecen de sed; en el frente fenecen de herpes, de peste. El edén ennegrece, se pretende reprender herejes, perderles.

-¡Eh, Esther, ven!, relee el deber. El jefe se excede.

-¿Prevees el tren del semestre?...

Me enteré del brete de gente decente en el este: nenes, bebés perecen. El clemente es el Hereje Rebelde: desprende el ente del crecer, mete el entender, cede excelentes mercedes. El Rebelde merece el belvedere…

-Esther, eres efervescente. Ten en mente el menester del Jefe, es rete vehemente, de repente crece, reverdece, expele seres…

-Ese vejete me prende. Es jefe, regente, gerente. Perennemente deberes: “llévenme el neceser”, “llénenme de peces”, “repten”, “trepen”, “dejen de verme”, “récenme preces”, “enderécense”, “respétenme”, “festéjenme”, “perseveren”, “refrénense”, “esperen”, “vegeten”, “déjense”. Se cree el Ser, el Tres Reyes; es el jején del edén.

-¡Esther! ¡Detente! ¿Pretendes descreer de Él?

-¡Efrén, temerle es endeblez! ¡El presente debe ser del Rebelde! Él es terrestre, es el envés del Jefe. De él es ese “dejen de depender”, ese “mézclense”, ese “bésense”, ese “deséense”. El entender debe extenderse.

-¡Esther, se te mete el Rebelde!

-¡Emerge Efrén!, eres decente. Despréndete de ese pelele, es memez de bebel. Ve de frente, mereces se te respete, se te deje beber, expeler semen, tenderte en el césped. Mereces se te revele el ser del éter celeste, se te eleve, se te deje emprender. El emprender es el eje del entender…

-Efrén se mece: es el deber del Jefe enfrente del descreer rebelde; teme le desherede, le eche del edén, le fleten de res, le llenen de herretes; Esther le embebe, se mete en él, le vence: “Tenerme en el césped… tenerme trece veces… excederte… es… es… excelente Efrén”.

De repente el éter emerge del celeste Jefe: “¡Ejem! ¡Dejen de entenebrecerme, seres febles! ¡Vermes! Refléjenme, venérenme, échense, desesperen. Les generé de heces en el retrete del desdén, les presté el verde edén. Les exenté de fenecer. Les estrellé el éter. Les enderecé el pesebre. Les enseñé el deber… ¡Me entenebrecen, seres herejes, les perderé! ¡Recelen! Efrén, desde este mes debes merecer el jerez. Te meteré vehemente sed. Este deber te merme, te reste, te cercene… Esther, eres gente terrestre, plebe de rebelde, te he de vencer. Desde el belem, Efrén te despeche, te cele, te frene…”

El Jefe les expele, les mete reveses dementes, el eje del edén cede, el templete se estremece, el verde se desprende, se ennegrece el vergel. Se les ve perder el esplendente ser: Esther envejece, Efrén precede. El brete es de meses, de repente entrevé en el celere presente encenderse el éter: es el Rebelde.

IMimí sin bikini [+]

—¿Insistir, Crispín?... Mi visir, mi bichín, mi cid: si sin ti viví difícil chipichipi sinfín: crisis y crisis: bilis, rinitis, tisis. (Snif, snif)
—...
—¡Fingir!, ¿fingir mis crisis?... ¿Ni tisis, ni rinitis, ni bilis? ¡Sífilis!... ¡Cistitis!... ¡Sífilis, Crispín!... ¿Infringir mi civil vivir?, ¿crispir mi hipil?... Si sin ti, ni vi films. Viví gris sin brindis ni picnics... Si inhibí mi ji ji y vi mi fin... Sí, Crispín, vi mi fin y mi tris...
—...
—¡Vil! ¡Vil Crispín!... ¿Mi Flirt?, ¿dirigir mi bici sin bikini? ¡Mil jipis, mil lics y Mimí sin bikini!... ¡Incivil! Si ni dirigí mi bici. (Snif, snif) Sin ti, vi mi I Ching y viví mi crisis gris gris, sin vid ni bisbís ni chinchín ni lizt.
—...
—¡Crispín! ¡Crispín! ¡Mi crin! ¡Mi tisis!... (¡Chin! ¡Chin! ¡Chin! ¡Pin! Snif, snif. ¡Chin! ¡Iiiih! ¡Christ! ¡Chin!) ¡Crispín plis! (Snif; snif) ¡Plis plis, Crispín! ¡Sí! ... Sí, mi Crispín... Sí sí mi michi, sí...
—...
— (Snif, snif), Sí, sí Crispín, incindí... sí sí, ni crisis ni bilis; sífilis sí (Snif, snif) y cistitis... Di mi lid, di mi lid y... dimití...
—...
—Sí di... di mi sillín; sin iris di mi sí... y sin bikini di mi vil sí.
—...
—¿Si insistí?... Sí. Philip, Gil, Billy y mil jipis.. (¡Chin! ¡Chin! ¡Ijjj! Hip, snif, snif) ¡Mi tic, Crispín! ¡Mi tic!... Sin ti mi cid chic, mi viril símil, di mis... (¡Chin! ¡Chin!)
—...
—¡Plis, Crispín, plis! (Snif, snif) Sí, sí... fingí fililí y tisis, y vil inscribí mi: "Miss Mimí dividivi sin bikini in this city". Sí, imprimí mi listín y viví vigil. (Snif, snif)
—...
—Sí, mis mil.
—...
—Sí, sin bikini, mil.
—...
—¿Ir?... ¿Insistir, Crispín?... ¡Incivil!
—...
—¿Mimí sin bikini y Crispín mi ministril? ¿Mi Rintintín?
—...
—¿Dividir mi din?... ¿Mil y mil? ¡Ni pimpi, Crispín, ni pimpi! (¡Chin! ¡Pin! ¡Chin! ¡Chin! Crij. Crij. ¡Chin! ¡Chin! ¡Iiij! Hip. Snif, snif) ¡Mi fin!... Mi fin... (¡Pin! ¡Pin! ¡Chin!)
—...
—¡Sí, Crispín! ¡Sí!... ¿Y mi cistitis?, ¿mi sífilis?... (¡Chin! ¡Chin!) Sí sí Crispín, sí, mil y mil. (Snif, snif) Sí sí, sin hipil y sin bikini...mitin y bici sí sí, y fingir y chist.... (Snif, snif) Sí mi visir, sí mi pillín, sí...

OLos locos somos otro cosmos [+]

Otto colocó los shocks. Rodolfo mostró los ojos con horror: dos globos rojos, torvos, con poco fósforo como bolsos fofos; combó los hombros, sollozó: "No doctor, no... loco no..." Sor Socorro lo frotó con yodo: "Pon flojos los codos -rogó-, ponlos como yo. Nosotros no somos ogros." Sor Flor tomó los mohosos polos color corcho ocroso; con gozo comprobó los shocks con los focos: los tronó, brotó polvo con ozono. Rodolfo oró, lloró con dolor: "No doctor Otto, shocks no..." Sor Socorro con monótono rostro colocó los pomos: ocho con formol, dos con bromo, otros con cloro. Rodolfo los nombró doctos, colosos, con dolorosos tonos los honró. Como no los colmó, los provocó: "Son sólo orcos, zorros, lobos. ¡Monos roñosos!" Sor Flor, con frondoso dorso, lo tomó por los hombros; sor Socorro lo coronó como robot con hosco gorro con plomos. Rodolfo con fogoso horror dobló los codos, forzó todos los poros, chocó con los pomos, los volcó; soltó tosco trompón, sor Socorro rodó como tronco. "¡Pronto, doctor Otto! -convocó sor Flor-. ¡Pronto con cloroformo! ¡Yo lo cojo!..." Rodolfo, lloroso con mocos, los confrontó como toro bronco; tomó rojo pomo, gordo como porrón. Sor Flor sonó como gong, rodó como trompo, zozobró.

Otto, solo con Rodolfo, rogó como follón, rogó con dolo: "Rodolfo... don Rodolfo, yo lo conozco... como doctor no gozo con los shocks; son lo forzoso. Los propongo con hondo dolor... Yo lloro por todos los locos, con shocks los compongo...

-No, doctor. No -sopló ronco Rodolfo-. Los shocks no son modos. Los locos no somos pollos. Los shocks son como hornos; son potros con motor, sonoros como coros o como cornos... No, doctor Otto, los shocks no son forzosos, son sólo poco costosos, son lo cómodo, lo no moroso, lo pronto... Doctor, los locos sólo somos otro cosmos, con otros otoños, con otro sol. No somos lo morboso; sólo somos lo otro, lo no ortodoxo. Otro horóscopo nos tocó, otro polvo nos formó los ojos, como formó los olmos o los osos o los chopos o los hongos. Todos somos colonos, sólo colonos. Nosotros somos los locos, otros son loros, otros, topos o zoólogos o, como vosotros, ontólogos. Yo no los compongo con shocks, no los troncho, no los rompo, no los normo...

Rodolfo monologó con honroso modo: probó, comprobó, cómo los locos sólo son lo otro. Otto, sordo como todo ortodoxo, no lo oyó, lo tomó por tonto; trocó todos los pros, los borró; sólo lo soportó por follón: obró con dolo. Rodolfo no lo notó. Otto rondó los pomos, tomó dos con cloroformo, como molotovs los botó. Rodolfo con los ojos rotos mostró los rojos hombros; notó poco dolor, borrosos los contornos, gordos los codos; flotó. Con horroroso torzón rodó con hondo sopor. Rodolfo soñó. Soñó con rocs, con blondos gnomos, con pomposos tronos, con pozos con oro, con foros boscosos con olorosos lotos. Todo lo tocó: los olmos con cocos, los conos con oporto rojo, los bongós con tonos como Fox Trot.

Otto lo forró con tosco cordón, lo sofocó. Rodolfo sólo roncó. Sor Socorro tornó con poco color. Sor Flor con bochorno tomó ron: "Oh, doctor -lloró-, oh, oh, nos dobló con sonoro trompón." Otto contó cómo lo controló.

-Otto, pospón los shocks -rogó sor Socorro.

-No, no los pospongo. Loco o no, yo lo jodo. No soporto los rollos... Pronto, ponlo con gorro.
-¿Cómo, doctor -notó sor Flor-, ocho volts?

-No, no sólo ocho. ¡Todos los volts! Yo no sólo drogo, yo domo... Lo domo o lo corrompo como bonzo.

-¡Oh no, doctor Otto!, como bonzo no.

-¡Cómo no, sor Socorro! Nosotros no somos tórtolos o mocosos; somos los doctos... ¡Ojo, sor Socorro! No soporto los complots...

Otto con morbo soltó todos los volts, los prolongó con gozo. Sor Socorro con sonrojo sollozó. Sor Flor oró por Rodolfo. Rodolfo roló como mono, tronó como mosco. Otto lo nombró: "Don gorgojo", "loco roñoso", "golfo". Rodolfo zozobró con sonso momo. Otto cortó los shocks.

UUn gurú vudú [+]

Un gurú vudú, un Duvulur, supusu un mundu futuru mu suyu; un mundu cuyu
multutud frustrudu pur sus Tuntuns Mucutus nuncu luchuru, nuncu junturu sus músculus puru hundur su curul. Su tutur, Pupu Duc, un sultún mu crul, un furúndulu du Luzbul, fundú su brutul club cun un grupúsculu du brujus du truculuntus trucus cun sustu vudú. Muchus uñus ul publu sufrú pústulus, sudú jugus púrpuru, tuvu tumurus du pus, susurrú su runcur, su humbru, su murtu, su cruz. Husu muchu, Pupu Duc cun vuz guturul murmurú:

—Duvulur, tu Pupu Duc su pudru, sucumbu, su vu puru ultrutumbu. Tu turnu llugú…
—¿Mu turnu llugú? ¿Tú, tudu un gurú vudú su pudru? (Bu, bu)
—¡Uscuchu burru, pun tu cucuruchu! ¡Tú usurpurús mu curul!
— (Bu, bu) Tú, tu pudrus.
—¡Uscuchu tu futuru!
— (Bu, bu)
—Puru guzur dul usufructu du tu Pupú Duc dubus cumplur dus custumbrus: prumuru luzur tu culu u lus grungus sun rufunfuñur, sun rufunfuñur pus tú urus unu sucursul; u sugundu, dudus fundur tu cultu, fulgurur. Qu tu cultu suplu lu culturu. Sun culturu, tu chusmu surú chusmu hustu ul fun. Nuncu plurul, pun tu pulsu brutul cumu un súcubu du Luzbul.
—Pupú duc, lu chusmu ruju: "¡Pulcrutud! ¡Un mundu justu!"
—Pun un muru. Usu Tuntuns Mucuts…

Duvulur pusu su bustu pur tudu lugur, justú su grupu du brujus, tuvu su curul, su cúpulu; hurtú, fu ul súmmum du lu unjustu, tuvu ugustu u Luzbul; sun umburgu nu supu, su futuru sucumbú pur un tumultu qu cumu un ulud sulfurú u lus grungus. Trutú du supurur su sustu cun fusulus u puñulus, mutulú surus humunus, zumburun sus muñucus vudú; mus ul funul huyú. Ul gurú pululu cun su furtunu buju lus nubus du Purús, lus grungus buscun un nuvu sultún, "gud gurú", u lu chusumu sun rumbu, sun turnu, sun mundu, muscullu: "¡Luz! ¡Luz!", dundu tumbus.

Para terminar con esta serie de posibilidades del header, un script de Dynamic Drive llamado Neon Lights Text y que podemos aplicar a cualquier texto.

Para usarlo en el header vamos a expandir los artilugios y buscar esto:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

Lo reemplazaremos por esto:

<b:includable id='title'>
<script type='text/javascript'>
//<![CDATA[

//Neon Lights Text II by http://www.dynamicdrive.com/dynamicindex10/neontext2.htm
var message = "el texto que queremos usar ";
var neonbasecolor = "#FFFFFF"; 
var neontextcolor = "#00FFDD";
var neontextcolor2 = "#DDFF00";
var flashspeed = 150; // velocidad en milisegundos
var flashingletters = 1; // cantidad letras del efecto neontextcolor
var flashingletters2 = 1; // cantidad letras del efecto neontextcolor2
var flashpause = 1; // pausa entre ciclos

var n=0;
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">');
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>');
document.write('</font>');
}
else
document.write(message);

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number);
return crossobj;
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor;
}
crossref(n).style.color=neontextcolor;
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor;
if (n<message.length-1)
n++;
else{
n=0;
clearInterval(flashing);
setTimeout("beginneon()",flashpause);
return;
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed);
}
beginneon();
//]]>
</script>
</b:includable>

Por defecto, el Header de Blogger no admite demasiadas posibilidades, podemos definir una imagen de fondo, un banner, un texto, no mucho más. En cuanto queremos intentar algo diferente, nos vemos en dificultades así que, para evitar lidiar con los códigos, lo mejor es elimiinar ese widget y empezar desde cero.

Normalmente, sin expandir la plantilla, veremos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombre sitio (cabecera)' type='Header'/>
</b:section>
</div>

Vamos a cambiarlo así:

<div id='header-wrapper'>
<b:section class='header' id='header' />
</div>

De esta forma, eliminamos el gadget que, llegado el caso, podemos agregar en cualquier otro momento, y tenemos la misma sección que teníamos antes, el mismo rectángulo en la parte superior del blog. Ahora, bastaría ir agregando elementos HTML o cualquier otro, tal mo hacemos en la sidebar.

Por ejemplo, vamos a colocar allí un banner de Flash; en este caso, usando las facilidades de una herramienta online como FlashVortex.

Los archivos de Flash son archivos de extensión SWF y como no es posible alojarlos en Blogger mismo, deberemos subirlos a otro servidor, por ejemplo, a Google Sites. Tendremos entonces una URL como esta:

http://sites.google.com/site/misitio/mibanner.swf

Ahora, en Diseño, agregamos un elemento HTML y allí pondremos el código:

<object id="bannerSWF" data="http://sites.google.com/site/misitio/mibanner.swf" width="valor" height="valor" type="application/x-shockwave-flash">
<param value="http://sites.google.com/site/misitio/mibanner.swf" name="movie"/>
<param value="transparent" name="wmode"/>
<param value="always" name="allowScriptAccess"/>
</object>

donde la URL la colocamos dos veces, en el atributo data y en el atributo movie para que se vea en cualquier navegador y reemplazamos los atributos width y height por los valores del ancho y alto de la animación.

Eso es todo.

Si hablamos de una plantilla mínima, no hace falta modificar el CSS. En todo caso, las definiciones elementales son las siguientes:

#header-wrapper {
margin: 0 auto;
width: valorpx; /* el valor del ancho de nuestro sitio */
}
#header { 
text-align: center;
}

MAS INFORMACIÓN: Tratando de entender el Header [1] [2] [3]

Un millón de clicks contra la pobreza porque para que desaparezca, primero hay que verla.

REFERENCIAS:www.1millionclicksagainstpoverty.org

Interesante lista de diferencias entre el CSS de Internet Explorer 6, 7 y 8 publicadas por Smashing Magazine y, en mi opinión personal, lo que demuestra es por qué debemos tener actualizado nuestro navegador.

Muchas veces, las consultas sobre algún tipo de problema se refieren a estos navegadores y allí, tal vez, habría que decir algo políticamente incorrecto: IE8 funciona bien y es muy difícil que si el CSS es correcto, algo no se muestre en este navegador de modo similar al que se muestra en Firefox. En realidad, dejando de lado las nuevas funciones experimentales del llamado CSS3 que no están soportadas, el resto no tiene problemas y, en ciertos casos, es mucho más estricto y obliga a especificar cosas que en otros navegadores están sobreentendidas. Eso, podrá ser un fastidio pero, no sé si lo llamaría un error.

Distinto es el caso de Internet Explorer 6 ya que no es un navegador al que debamos tener en cuenta. Suena feo pero me parece casi elemental. Es cierto, aún es un navegador utilizado pero, por suerte, cada vez menos o así lo que demustran las estadísticas globales de StatCounter.

Excluyendo entonces al "viejito 6", selectores, clases múltiples, pseudo-elementos y pseudo-clases funcionan normalmente incluyendo algo tan utilizado como el hover sobre etiquetas que no sean enlaces. Las únicas excepciones son :focus :before y :after que sólo están implementadas en IE8.

Las propiedades top, right, bottom, left, min-height, min-width, max-height y max-width funcionan; lo mismo que el color transparent y el valor fixed de los fondos; tanto en IE7 como en IE8.

IE8 acepta toda una serie de propiedades para tablas (border-spacing, empty-cells, caption-side), las popiedade para seleccionar regiones (clip), outline (¡era hora!!!!) y los valores ampliados de la propiedad display (inline-block, inline-table, list-item, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group) de las que alguna vez habrá que hablar porque son una alternativa muy interesante y que en el futuro pueden transformarse en el nuevo modelo de diseño de una página web.

Moraleja rápida: Los navegadores sólo son herramientas y cualquier guerra entre ellos es un problema de empresas de las cuales, los usuarios, no tenemos acciones. Tomar partido por uno u otro es ridículo y esas pasiones deberían dejarse para cosas más importantes y trascendentes. Que cada uno use el que le resulte cómodo y listo. Basta saber que cualquier navegador de ultima generación funciona correctamente y es tan seguro como criterioso sea quien lo maneje.

Siguiendo la idea de la entrada anterior, ¿es posible utilizar diferentes banners en el mismo blog? Sí, hay decenas de alternativas. Una de ellas es establecer banners diferenciados para la página principal y para las páginas individuales. En el CSS "normal" colocamos la imagen por defecto y luego, antes de </head> colocamos una condición que cambiará la imagen de fondo en las páginas individuales:

<b:if cond='data:blog.pageType == &:quot;item&:quot;'>
<style>
#header-wrapper { background: transparent url(URL_IMAGEN) no-repeat left 50%; }
</style>
</b:if>

También es posible tener una lista de imágenes y hacer que estas se muestren de manera aleatoria aunque para esto, deberemos agregar algo de JavaScript. Por ejemplo, ponemos esto antes de </head>:

<style type='text/css'>
#header-wrapper {
background:transparent url() no-repeat left 50%;
/* o usamos background:transparent url() repeat left top; si se trata de un fondo a modo de mosaico */
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
// precargar las imágenes
var imagenHeader = new Array();
imagenHeader[0] = "URL_IMAGEN_1";
imagenHeader[1] = "URL_IMAGEN_2";
imagenHeader[2] = "URL_IMAGEN_3";
window.onload = function() {
var alea;
// el valor a usar es igual a la cantidad de imágenes menos uno
alea = Math.round(Math.random()*2);
document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[alea] + ')';
}
//]]>
</script>

De manera similar, podemos hacer que los banners o fondos roten cada cierto tiempo:

<style type='text/css'>
#header-wrapper {
background:transparent url(URL_imagen) no-repeat left 50%;
/* o usamos background:transparent url(URL_imagen) repeat left top; si se trata de un fondo a modo de mosaico */
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
// precargar las imágenes
var imagenHeader = new Array();
imagenHeader[0] = "URL_IMAGEN_1";
imagenHeader[1] = "URL_IMAGEN_2";
imagenHeader[2] = "URL_IMAGEN_3";
function bannerRotativo() {
numBanner ++;
if(numBanner >= imagenHeader.length) { numBanner = 0 }
document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[numBanner] + ')';
}
var numBanner = 0;
window.onload = function() {
setInterval("bannerRotativo()", 2000);
}
//]]>
</script>

El valor de 2000 es el tiempo que permanecerá visible cada banner y está expresado en milisegundos (1000 = 1 segundo).

Otra variante, ejecutando un scroll de una imagen:

<style type='text/css'>
#header-wrapper {
background:transparent url(URL_imagen) repeat left top;
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
function scrollBanner(maxSize,direccion) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) { backgroundOffset = 0; }
if(direccion==false) {
document.getElementById('header-wrapper').style.backgroundPosition = '0 ' + backgroundOffset + 'px';
} else {
document.getElementById('header-wrapper').style.backgroundPosition = backgroundOffset + 'px 0px';
}
}
var backgroundOffset = 0;
window.onload = function() {
setInterval('scrollBanner(200,false)', 100);
}
//]]>
</script>

Si queremos que el scroll sea vertical, usamos el valor false:

setInterval('scrollBanner(200,false)', 100);

Si queremos que el scroll sea horizontal, usamos el valor true:

setInterval('scrollBanner(200,true)', 100);

En ambos casos, el valor 200 es el tamaño máximo a desplazar (por lo general, el ancho o alto de la imagen) y el valor 100 es el tiempo expresado en milisegundos.

Siempre he creido que el elemento Header o Cabecera de página es uno de los códigos más absurdos que posee Blogger, difícil de entender [1 | 2 | 3] y aún más difcil de modificar. Por momentos, críptico, se supone que está allí para facilitarnos la tarea y suele tener el efecto contrario; a la hora de personalizarlo, son muchas las preguntas que surgen. Muchas de esas preguntas tienen una raiz común, suponer que el Header es algo diferente al resto, una zona prohibida.

Pero no es así, sólo es una sección como cualquier otra, un rectángulo contenedor donde es posible agregar cualquier otro elemento aunque, por defecto, eso está bloqueado en la mayoría de las plantillas. Para habilitarlo, basta buscar esto:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

y cambiarlo así:

<b:section class='header' id='header'>

de ese modo, aparecerá en Diseño como cualquier otro elemento y podremos agregarle widgets de cualquier tipo.

Otro inconveniente con el que solemos toparnos es cuando queremos colocar una imagen en lugar del título; las opciones que nos muestran son pocas e inflexibles. Obviamente, lo mejor sería eliminar el elemento por completo y usar un código normal o un elemento HTML pero, vamos a partir de no tocar nada, de dejarlo como está y de olvidarnos de las "facilidades" que nos ofrecen.

Para agregar un fondo en el Header no necesitamos otra cosa que subir la imagen en cualquier entrada, copiar la URL y agregarla en las definiciones del CSS:

#header-wrapper {
  ... la pondremos acá ...
}

Sólo hay que tener en cuenta un par de detalles. Si la imagen es un banner que ocupará todo el ancho, lo mejor es establecer la altura del DIV usando la propiedad height. Deberíamos utilizar algo así:

background: transparent url(URL_IMAGEN) no-repeat left 50%;

Si se trata de un logo que ocupa sólo un sector:

background: transparent url(URL_IMAGEN) no-repeat valorpx valorpx;

donde podemos ubicarlo con precisión, estableciendo los datos de valorpx. Por ejemplo, esto la colocará a 10 pixeles del borde izquierdo y a 50 pixeles del borde superior:

background: transparent url(URL_IMAGEN) no-repeat 10px 50px;

Si se trata de una pattern o imagen que se repite, usaremos:

background: transparent url(URL_IMAGEN) repeat left top;

En todos los casos, no es conveniente eliminar la etiqueta H1 que contiene el título del blog, si no queremos verlo, lo mejor es ocultarlo para que los buscadores lo lean aunque no se vea. Eso nos lleva a un segundo punto importante, el header suele funcionar como enlace a la página principal y eso podemos eliminarlo de este modo:

#header h1 {
  .......
    display: none;
}

A mi juicio, lo mejor es preservarlo así que, sin tocar el código del widget podríamos agregar un par de definiciones extras que harán que no lo veamos pero que permanezca allí:

#header h1 {
  .......
  filter: alpha(opacity=0);
  opacity: 0;
}
#header h1 a { filter: alpha(opacity=0); opacity:0; }
#header h1 a:hover { filter: alpha(opacity=0); opacity:0; }

Con los medios de comunicación hay que tener un poco de sana desconfianza ... pasa lo mismo que con los espejos.

Uno crece en la inteligencia de que los espejos devuelven fielmente la imagen de quien se les pone adelante. Y es una convicción muy fuerte. Hasta que por ahí, alguien, alguna mano malvada empieza a fabricar espejos que deforman. Espejos que no devuelven la verdad, sino la mentira.

Y entonces uno, a la mañana se va a afeitar y ve a una persona rubia, uno que es morocho, ve una persona rubia distinta a la que es uno. Y uno tiene tiene tanta confianza en los espejos que incluso prevalece esa confianza por encima de la realidad. Y uno que se sabe morocho, que ha vivido una morocha vida durante tantos años y que ha andado entre morochos, se ve rubio en el espejo y empieza a asumir rubias conductas ¿Por qué? Porque desde chico nos han dicho que el espejo no miente.

Yo creo que, a lo mejor, ha llegado el tiempo de desconfiar del espejo.

Y de pensar que tal vez, los fabricantes de espejos tienen intereses inconfesables que nosotros no conocemos. Intereses entre los cuales figura el de lograr que nosotros nos creamos rubios siendo que somos morochos.

Así que, más que mirar al espejo, hay que preguntarle al de al lado; al que también es morocho; al que vive como nosotros a ver cómo nos ve, qué le pasa, qué siente. Y, a lo mejor, hay que mirar más la realidad y menos el espejo de la realidad porque a veces, ese espejo, está tendenciosamente modificado y es fraudulento.

Alejando Dolina

Alejandro Dolina

Fragmento de una entrevista televisiva.

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

Cuando creamos un blog nos preguntan el nombre y elegirlo puede ser dificultoso pero termianmos resolviéndolo, hay pocas rescricciones e incluso, podemos cambiarlo sin problemas o mostrarlo de manera diferente a la que hayamos definido en un primer momento.

También nos piden que definamos la dirección del blog (URL) que, en Blogger, será un subdominio de blogspot.com así que terminará siendo:

http://NOMBRE.blogspot.com

Y ahí comienzan las dificultades. Tal vez, el nombre que elegimos ya existe (Comprobar la disponibilidad) y nos muestren alternativas que no nos convenzan; tal vez, decidimos erróneamente y luego nos veamos en problemas ya que, si bien es posible cambiar esa URL por otra, una vez que nuestro sitio está funcionando, hacer eso genera problemas adicionales.

Todos dicen que es muy importante elegir un buen título para un sitio web pero, esa elección es subjetiva; también dicen que es muy importante elegir una buena dirección URL y esa elección no es tan subjetiva porque hay restricciones que debemos tener en cuenta, tanto para posicionar el blog en los buscadores como para que sea accesible a diferentes herramientas..

Algo en lo que todos están de acuerdo es que la URL debe ser lo más corta posible. No hay demasiadas restricciones técnicas al respecto ya que, dependiendo de los navegadores, estos aceptan URLs con varios cientos de caracters sin problemas pero, es obvio que si la direción es muy larga, nadie la recordará.

Lo ideal es que el título del sitio y la URL sean el mismo o muy similares para evitar confusiones.

Los únicos caracteres admitidos en una URL son los alfanuméricos (números y letras) pero se excluyen los caracteres especiales como la ñ y las vocales acentuadas. Hay una única excepción permitida en Blogger: el guión medio (mi-nombre) aunque en algunos otros sistemas también se admite el guion bajo (mi_nombre) ¿Cuál es mejor? Ni Google lo tiene claro; en lo personal, evitaría el uso de ambos pero, el guión bajo tiene dos problemas extras: genera un problema visual al mostrarse subrayado, no se ve muy claro:

mi_dominio.com
mi_dominio.com

y además, Feedburner no lo reconoce.

Animated Navigation es es un menú animado simple que requiere del uso de la librería JQuery que podemos agregar a nuestro sitio utilizando las AJAX Libraries API de Google agregando lo siguiente antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

o bien, enlazándolas de manera directa:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

El primer paso es agregar el pequeño código del script, también, antes de </head>:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $("#topnav li").prepend("<span></span>");
  $("#topnav li").each(function() {
    var linkText = $(this).find("a").html();
    $(this).find("span").show().html(linkText);
  }); 
  $("#topnav li").hover(function() {
      $(this).find("span").stop().animate({marginTop: "-40"}, 250);
    } , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
  });
//]]>
</script>

Y luego, el CSS que podremos personalizar a gusto:

<style type="text/css">
  ul#topnav {  /* el menú es una lista */
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul#topnav li { /* cada item de la lista */
    float: left;
    height: 40px;
    list-style-type: none;
    margin: 0;
    overflow: hidden; /* importante */
    padding: 0;
  }
  ul#topnav a, ul#topnav span { /* cada item es un enlace */
    clear: both;
    height: 20px;
    line-height: 20px;
    padding: 10px 15px;
    float: left;
    /* propiedades de color, fonto y fuente de los textos */  
  }
  #menu li a:hover { /* efecto onmouseover sobre los enlaces */
    /* propiedades de color, fonto y fuente de los textos */  
  }
</style>

Hasta allí toda la preparación, ahora, el menú en si mismo que podemos colocar en cualquier parte, donde deseemos mostrarlo:

<ul id='topnav'>
  <li><a href="direccion_URL"> MENU-1 </a></li>
  <li><a href="direccion_URL"> MENU-2 </a></li>
  <!-- cada item es un enlace -->
  <li><a href="direccion_URL"> MENU-X </a></li>
</ul>

Quienes utilicen otro tipo de framework como Prototype + Scriptaculous deben tener en cuenta que habrá un conflicto ya que las librerías son incompatibles. Para esto, hay una solución que implica editar los scripts. Otra alternativa menos elegante pero en este caso, efectiva, es usar un blog auxiliar, colocar el menú allí y cargarlo mediante un IFRAME que es el modo en que se ve en el ejemplo de esta entrada.

Por lo que dicen en Ojo Buscador, Google admite que se utilicen una serie de etiquetas META para geolocalizar un sitio o una página web. Un ejemplo:

<meta name=”geo.placename” content=”España” />
<meta name=”geo.position” content=”coorX;coorY” />
<meta name=”geo.region” content=”es” />

Esto se suma a la opción Establecer Orientación Geográfica que ofrecen las Herramientas para Desarrolladores de Google y al elemento Ubicación del mismo Blogger.

No son etiquetas esenciales y si este tipo de cosas es útil o inútil dependerá del tipo de sitio. Más información: geotags y geourl.

Obviamente, la entrada de Gem@ tiene algún detonador personal, alguna de esas gotas que rebalsa el vaso, algún pseudo-comentario que llega en el momento exacto en que el horno no está para bollos o nos hace click en alguna parte. Eso es lo bueno de un blog, esa es la diferencia sustancial entre una página web "normalita" y un blog.

Aquí dentro somos personas que escriben sobre temas diversos, temas que nos interesan, que nos gustan, que nos parecen curiosos, que nos llaman la atención y nada más. No pretendemos enseñar sino aprender; no pretendemos informar sino llevar un registro de nuestras propias experiencias. Por eso, un blog es una bitacora (palabra que me encanta y que no se ha difundido lo suficiente).

¿Cuántas veces uno lee cosas como "sí, muy lindo pero ya lo había visto"? o bien, "interesante pero ya lo sabía, esto lo publicó Magoya en su blog hace quichicientos años".

Son intervenciones inútiles porque, al final de cuentas esto no es una carrera donde importa salir primero sino una carrera donde todo el tiempo somos los primeros. Lo que es nuevo para mi es algo conocido por otro y visceversa; no hay medallas para el ganador porque si no hay perdedores es imposible que alguien gane. Este es un juego donde sólo se juega y sólo se gana jugando; nadie pierde, salvo la paciencia de tanto en tanto.

Alguna vez se decía que habíamos llegado al fin de la historia. Muchas veces se ha escuchado eso de que todo está inventado y que no hay nada nuevo bajo el sol. No es cierto. Cualquier idea puede ser re-inventada, cualquier vuelta de tuerca es siempre bienvenida; todos los libros escritos y por escribir cuentan siempre la misma historia, la nuestra, la de cada uno de nosotros y eso se parece al infinito.

En los comentarios de la entrada leo una palabras que me gusta, leo DIVERSIDAD.

Como todos somos diferentes, todos vemos las cosas de manera diferente, todos vemos un pedacito de realidad y nadie tiene el 100% de ella ni está 100% equivocado. Es natural que quienes tienen blogs de temáticas similares tengan información similar, se interesen por las mismas cosas e incluso, se repitan. Nadie debería tener el monopolio de la información, ni de esta ni de ninguna otra. Los blogs han llegado para intentar eso, para poner un poco de sal y pimienta en el panorama monocromo de los grandes medios de comunicación, para dar una visión diferente, para mirar las cosas desde algún otro punto de vista, desde cientos de miles de puntos de vista diferentes y los blogs han venido para quedarse. Los blogs SON ESO.

"Es bueno que se hable de lo mismo y aún siendo de lo mismo nunca será igual porque cada uno añade su propia esencia y eso lo hace completamente distinto ... " porque, al fin de cuentas "no es todo lo que está ni es todo lo que es"; siempre hay algo más; sólo hay que saber buscarlo.

	Personal 1 Demo online: VER Descarga e información: VER
	Portal 1 Demo online: VER Descarga e información: VER
	Portal 5 Demo online: VER Descarga e información: VER
	Portal 3 Demo online: VER Descarga e información: VER
	Portal 2 Demo online: VER Descarga e información: VER
	Portfolio 7 Demo online: VER Descarga e información: VER
	Portfolio 6 Demo online: VER Descarga e información: VER
	Portfolio 5 Demo online: VER Descarga e información: VER
	Portfolio 3 Demo online: VER Descarga e información: VER
	Portfolio 2 Demo online: VER Descarga e información: VER

REFERENCIAS:>chocotemplates.com

ADVERTENCIA: No son plantillas preparadas para Blogger.

What is that?

Un film de Constantin Pilavios.

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

REFERENCIAS:catandrea

Hasta hace poco, quien tenía un blog en Blogger podía agregar su sitio directamente a las Herramientas para Desarrolladores de Google.

El enlace sigue allí en nuestro escritorio pero si lo usamos, nos mostrará un error.

Esto es debido a que Google ha realizado algunos cambios en sus métodos de verificación y, por el momento, la única forma de hacerlo es de manera manual.

Para ello, debemos ingresar a las Herramientas para Desarrolladores utilizando nuestra cuenta de Google y allí veremos una lista con nuestros sitios. En algunos aparecerá a la derecha un enlace Verificado el si es que ya ha sido añadido previamente y en otros, un enlace que nos permite hacerlo por primera vez.

Si el blog es nuevo, no lo veremos así que deberemos hacer click en Añadir un sitio y allí, ingresar nuestra direción URL:

Hecho esto o haciendo click en Verifique la propiedad de este sitio de cualquier otro, se nos abrirá una página donde nos pedirán que decidamos el método de verificación.

Para poder mostrarle información y estadísticas detalladas sobre el sitio, debemos estar seguros de que es el propietario.

URL del sitio http://miblog.blogspot.com/
Estado de verificación NO VERIFICADO

Método de verificación Metaetiqueta Cargar un archivo HTML
Copie la metaetiqueta que se muestra a continuación y péguela en la página principal de su sitio. Debe incluirla en la sección , antes de la primera sección.

Seleccionaremos Metaetiqueta y copiaremos el código que nos dan:

<meta content='xxxxxxxxxxxxxxxxxxxxx=' name='verify-v1' />

Ahora, deberemos pegarlo en el head de nuestra plantilla, debajo del título:

<title><data:blog.pageTitle/></title>
<meta content='xxxxxxxxxxxxxxxxxxxxx=' name='verify-v1' />

La guardamos y en el panel anterior, hacemos click en Verificar.

Si todo es correcto, nos redirigirá a nuestro panel: "Googlebot ha accedido correctamente a su página principal."

Como al parecer, aún quedan dudas respecto al método para establece el dominio preferido, vamos a un ejemplo concreto. Supongamos que ya he agregado y verificado mi blog que tiene la siguiente dirección URL:

http://miblog.blogspot.com

Ahora, debería agregar otro con la misma dirección pero agregándole www:

http://www.miblog.blogspot.com

Se nos mostrará entonces una ventana igual a la anterior con una etiqueta META que, será la misma que ya tenemos agregada y, por lo tanto, simplemente hacemos click en Verificar.

La siguiente pantalla nos mostrará una advertencia:

Iremos entonces a Informacion del sitio | Configuración y allí, definiremos nuestro dominio preferido:

El dominio preferido es aquel que le gustaría utilizar para indexar las páginas de su sitio web. Si especifica su dominio preferido como http://www.example.es y detectamos un enlace a su sitio en el formato http://example.es , lo trataremos como http://www.example.es . Asimismo, tendremos en cuenta su preferencia cuando mostremos las URL en nuestros resultados de búsqueda. Es posible que los cambios tarden en reflejarse en nuestro índice.

Dominio preferido
No establezca un dominio preferido
Mostrar URL como misitio.blogspot.com .
Mostrar URL como www.misitio.blogspot.com

Aceptamos y el proceso ha terminado:

Desde que Pepiche me preguntó sobre Disqus, me quedé con la curiosidad y prometí ver de que se trataba. Algún tiempo atrás ya había probado Intense Debate y no me había convencido pero, siempre hay que intentar usar alternativas y luego decidir.

Disqus es un servicio de comentarios externos que funciona desde el 2007 y que puede insertarse en cualquier sitio web, sean estos blogs o no. Es muy utilizado cuando los sistemas no disponen de comentarios como el caso de Tumblr pero también puede agregarse a una plataforma que ya los posee como Blogger o WordPress.

Su principal característica es que dispone de muchas herramientas que lo hacen flexible y que nos permiten gerenciar los comentarios de manera segura. Herramientas que incluyen moderación, tratamiento de spam, bloqueos, estadísticas y mucho más.

Una vez que nos registramos, podemos agregar distintos sitios y todos ellos los manejamos a través de la misma cuenta. Terminado ese registro, ya podemos integrar el sistema en nuestro blog. Para ello, hay una serie ayudas que, en principio, hacen el trabajo por nosotros y nos evitan escribir cosas. Para Blogger debemos descargar nuestra plantilla desde Diseño | Edición HTML y luego subirla a Disqus; allí le agregarán los códigos y luego, haremos el proceso inverso, descargamos la copia y la volvemos a colocar. En realidad, esto es un supuesto porque siempre que lo intenté, me devolvía un código de error sin explicaciones así que, mucho mejor es usar lo que ellos llaman el código universal ya que agregar los codigos no es nada del otro mundo y prefiero confiar en mis errores antes que en los errores ajenos.

Así que vamos a Universal Code donde nos dicen que debemos agregar algo similar a esto:

<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/minombre/embed.js"></script>
<noscript><a href="http://disqus.com/forums/minombre/?url=ref">View the discussion thread.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

¿Dónde? En Blogger, colocaremos eso donde ahora van los comentarios; expandimos la plantilla y buscamos esto:

<b:include data='post' name='comments'/>

Lo eliminamos y lo reemplazamos por el código que nos dieron.

También nos dicen que agregemos un script justo antes de </body>, es decir, al final de la plantilla. El código es algo similar a esto:

<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/minombre/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>

Pero esto no es obligatorio y podemos obviarlo. Es un script que reemplaza los enlaces por un contador (comment count code) y para usarlo se debe agregar #disqus_thread al final de esos enlaces; su utilidad es relativa, serviría, por ejemplo, para ... bueno, para algo.
Así que lo lógico, es usar sólo el primero.

Por último, en Blogger debemos deshabilitar los comentarios actuales. Eso lo hacemos en Configuración | Comentarios:

Comentarios Mostrar Ocultar

Como dije, podemos agregar varios sitios con la misma cuenta; simplemente agregamos la URL, le damos un nombre y listo. Cada uno de ellos tendrá una página de acceso exclusivo y accesos a las diferentes secciones que usemos. En ese sentido, es bastante cómodo pero, pese a que nos preguntan por el idioma, TODO está en inglés e incluso, los textos mostrados son una mezcla de inglés y español bastante estrafalaria.

Una serie de widgets extras permiten que agreguemos más información. Todas se instalan de manera simple, copiando el código y pegándolo en algún elemento HTML.

Recent Comments muestra los comentarios recientes; Popular Threads lista las entradas más comentadas y Top Commenters los comentarios de los usuarios más activos. Combination es eso, una combinación de los tres widgets en uno y se muestran como pestañas.

También se dispone de un Feedflare de FeedBurner.

La parte gráfica la podemos modificar bastante, no así los textos. Hay tres modelos básicos pero también podemos personalizarlo con CSS. Hay una ayuda al respecto pero es algo limitada y no estamos restringidos a eso, casi cualquier cosa puede ser cambiada, incluyendo los botones; una excepción, el área de textos donde se escriben los comentarios es un IFRAME y por lo tanto, sólo puede ser cambiada parcialmente.

Una serie de parámetros que pueden agregarse al script original y un API para desarrolladores permiten acceder a ciertos detalles pero con bastante dificultad. La mayor parte de la configuración debe hacerse desde los paneles del mismo sistema.

Y aquí viene la parte sustancial de este y de otros sistemas similares.

Al usarlos, los comentarios pasan a ser gestionados por otro sistema distinto del que tenemos, dejan de alojarse en Blogger para pasar a ser alojados en Disqus por lo tanto, hay que tener muy en cuenta que el cambio será permanente.

Es cierto que el sistema provee herramientas de importación y exportación. La primera nos permite hacer una copia de los comentarios previos; los lee y los guarda en el nuevo sistema. Desde allí, podemos gestionarlos sin problemas; permanecen guardados en Blogger y también se agregan a Disqus. El problema surge con los nuevos; de aquí en más, se alojarán allá y no en Blogger.

Aunque la palabra exportación parece atractiva, no podremos hacer el proceso inverso. La exportación existe pero no hay forma de agregar los comentarios otra vez  a nuestro sistema, a ningún sistema; así que, si por alguna razón decidimos no usar más el servicio, podemos volver al sistema viejo y veremos lo que allí teníamos pero no todos aquellos agregados con Disqus; para verlos, deberemos entrar en esa cuenta; permanecerán allí aún cuando ya hayamos eliminado el sistema de nuestro sitio.

Es importante entender esto para evitar sorpresas desagradables.

Lo mejor, me parece, es probarlo en un blog auxiliar y ver si nos convence o si satisface nuestras necesidades.