Imágenes con explicaciones (2)

JMiur [E]

My one and only.

La fuga.

Adiós mundo cruel.

Cualquiera se equivoca.

Nadie.

Wallpapers (Arte)

Fireclip: Guardar sectores de una página web

Fireclip es una extensión para Firefox que nos permite "cortar" porciones de una página web y guardarlas para recargarlas en cualquier otro momento y verificar si existen actualizaciones (más información).

Una vez instalado, podemos acceder a la extensión desde el menú herramientas o utlizando el teclado (ALT+Q).

Ver otro video tutorial

REFERENCIAS:

Digital Inspiration

Y así funciona Blogger ... más o menos

Las plantillas de Blogger no son páginas web, las plantillas de Blogger son ... plantillas de Blogger y eso es lo primero que debemos saber para entender cómo funcionan y así, poder manipularlas sin tanto miedo.

Están escritas usando un lenguaje llamado XHTML que no es HTML y es, simplificando, un lenguaje que combina códigos "normales", comunes y corrientes con códigos especiales creados y manejados por el mismo Blogger que es el único que puede traducirlos.

No es que tenga un "vocabulario" muy amplio, sólo tiene unas cuantas palabras más y con el tiempo, van apareciendo otras a medida que ellos las necesitan para agregar o modificar ciertas características del servicio. No hay muchas referencias a todo esto y solemos adivinar su uso y su sintaxis con el mejor método que existe: probando y equivocándonos.

¿Para qué tanto lio? Por eso que decía al inicio, porque las plantillas de Blogger no son páginas web simplemente porque los blogs no son páginas web.

La plantilla es sólo una parte de nuestro blog, el esqueleto. El resto, son datos. Datos que Blogger guarda en alguna parte y combina de acuerdo a nuestras instrucciones.

Cada vez que alguien solicita ver algo de nuestro sitio, escribe una dirección URL en el navegador y este se comunica con Blogger. Suena un timbre. El gerente de turno recibe un llamado: Fulanito pretende mirar la entrada XXX del blog YYY. El gerente asiente, cuelga y llama a su secretaria; "Rápido, traiga el baul con los datos de YYY ... Gómez, comuníquese con el navegador y dígale que esté atento".

Al rato (tiempo de microprocesadores), llega el baul arrastrado por un par de empleados sudorosos. "Este fulano tiene demasiadas cosas, ¿por qué no usará una plantilla mínima?"

"A ver, despliéguenla ... Despacio, que pesa como dos megas ... Afírmenla sobre la pared, atento todo el mundo que empezamos ..."

"DOCTYPE blablabla OK, ¿el título? ¿cómo que no tiene título?, Juan, mandale cualquiera."

"Tiene un favicon."

"Martinez, comuníquese con ImageShack, que nos mande una copia y reenvíenla al navegador."

"No contestan, deben estar almorzando."

"No importa, fíjense si queda alguno en la caché, uno que no esté demasiado arrugado y mientras tanto, usted siga insistiendo. Avísen al navegador. Díganle que espere que no encontramos el maldito dibujito."

"Señor, se está fastidando por la demora, dice que se lo enviamos ya mismo o pone el suyo. Me ha insultado en cuarenta idiomas."

"Déjelo, nomás ¿Qué sigue?"

"Hay catorce scripts ... no, quince ... no, catorce, hay uno repetido ..."

"Ehhhh pero ¿quién es este? ¿Bill Gates? Susana, mándelos a buscar y que se vayan cargando como puedan."

"El navegador insiste, dice que ya es demasiada espera y que no puede poner música funcional. O le mandamos algo o se toma el buque."

"Ya va, ya va ¿Tienen los datos de CSS? ¿Colores? Bien, mándaselos que con eso se entretiene un rato ¿Hay más?"

"No. Con eso se terminó el header."

"Señor, me dicen que un script se fue de vacaciones y no vuelve hasta el domingo."

"¡Qué barbaridad! Ok, díganle al navegador que se la debemos para la próxima."

"Atento que ya se ve algo. Comenzó a dibujar las cosas ¡Por Dios qué logo espantoso que le puso!"

"Métanle la Navbar."

"La tiene oculta."

"Métanla igual y luego la tapan, nosotros cumplimos."

"Lo demás viene fácil, sólo hay textos."

"¡Qué texto ni texto! ¡Eso es una imagen! Menos mal que es chiquita, hoy andamos con poco personal en el departamento de arte."

"¿Fecha?"

"Mmmmm ... no la veo."

"Ahí está, Gómez, despabílese."

"¿Cuál es el título de la entrada?"

"El Arte de lo Posible."

"¡Epa!!! Este es un poeta ... No ¡No!, ¡Rojo no! ahí dice negro ¿no ve? ¿es daltónico?"

"Pero arriba decía negro."

"Mire el último, siempre mire el último, se nota que usted es nuevito XD A ver si me presta más atención que si no, va tener que irse a trabajar a MySpace."

"No encuentro la entrada, Jefe, esto está muy desordenado."

"Ahí está, en la caja de cartón más grande, debajo de las etiquetas, la que tiene el numero 123456 ... perfecto, mándela con un mensajero y que se apure, que no se entretenga en la red como el otro día ... Paula, saque los pinceles y comience a dibujar la sidebar; deje esos iconitos en paz."

"Era para ir ganando tiempo."

"¡Qué tiempo ni tiempo! Aquí las cosas se deben hacer en orden, de arriba para abajo y de derecha a izquierda, nada de andar siendo exóticos.·"

"Tiene un chat."

"Ufa. No importa, lo ponen al final ¿Tiene footer?

"No, nada, termina así, parece que se le acabó la inspiración de golpe."

"Raro, espero que no se haya perdido en alguna parte."

"El chat no se abre."

"No importa, ese no es asunto nuestro. Revisemos ..."

"Todo en orden, Jefe."

"Y ese agujero a la derecha?"

"No sé, así está escrito."

"OK. Buen trabajo."

"Señor ..."

"Sí ..."

"Ya cerraron la página."

"¿Ya? Parece que alguien entró donde no debía. Limpien todo y sigan con lo suyo."

"Señor, están abriendo los feeds ..."

"Ah, no. Díganle a Gutierrez. Ese es su departamento ¿Qué se creen?"

Bueno, espero que se haya entendido ...

... y que Woody Allen no lea este blog o, por lo menos, que no le importe que haya hurtado, sigilosamente, la idea de uno de los sketchs de Everything you always wanted to know about sex (but were afraid to ask)

Blogger y el extraño caso del script faltante

Blogger sigue con problemas, eso no es raro.

De un tiempo a esta parte, notaba que el blog no terminaba de cargarse, siempre había algo que quedaba pendiente y el ícono del navegador seguía girando y girando con el botón de Stop habilitado lo que significa que algo falta. Esto, es bastante normal pero, lo que no es normal es que se muestren errores, tanto en IE como en Firefox.

En los últimos dias, los errores se multiplicaron y todos hacían referencia a lo mismo:

window.jstiming is undefined
http://www.blogger.com/widgets/1077479402-widgets.js

Es decir, el error es producido por el mismo Blogger.

widgets.js es uno de los scripts que agrega el servidor de manera automática y que controla los elementos internos ¿En que nos afecta esto? De diferentes maneras pero, por ejemplo, la más evidente es que al expandir y contraer los archivos por fecha, la página se recarga lo que es muy pero muy molesto.

Buscando en la web, me encontré con un mensaje en los Grupos de Ayuda de Google donde se reporta el mismo problema y proponen una solución: agregar el script faltante, directamente en la plantilla.

Es que, analizando el código fuente de los blogs donde las cosas funcionan bien, nos encontraremos con un script agregado en el HEAD de la página que es el que inicializa todo y, justamente, es ese script el que falta. Así que, si nos enfrentamos al mismo dilema, lo que debemos hacer es confirmar que no está. Basta cargar el blog, mirar el código fuente y buscarlo.

Si no lo encontramos, podemos agregarlo (cosa que he hecho) en alguna parte del HEAD, por ejemplo, luego de las etiquetas META:

<script type='text/javascript'>
//<![CDATA[
(function() {var a=window;function b(){this.t={};this.tick=function(e,f){this.t[e]=[(new Date).getTime(),f]};this.tick("start")}var c=new b;a.jstiming={Timer:b,load:c};if(a.external&&a.external.pageT)a.jstiming.pt=a.external.pageT;var d=false;function g(){if(!d){d=true;a.jstiming.load.tick("firstScrollTime")}}a.addEventListener?a.addEventListener("scroll",g,false):a.attachEvent("onscroll",g); })();
//]]>
</script>

¿Qué pasará si en algún momento Blogger resuelve el problema? No tengo la menor idea aunque lo más probable es que no pase nada salvo que se cargará dos veces lo mismo.

Este problema y muchos otros similares van de la mano con un tema conceptual que no termina de decidirse ¿Qué quiere hacer Blogger de Blogger?

Es que no pueden convivir dos sistemas que parecen antagónicos.

Por un lado, Blogger es, sin duda, uno de los servicios más flexibles que existen. A la hora de agregar códigos o personalizar nuestro blog, casi no hay limitaciones; podemos incluir scripts, modificar la estructura, manejarnos con absoluta libertad, sin tener que ceñirnos a un esquema determinado.

Por otro lado, de un tiempo a esta parte, se ha empeñado en agregar cosas de manera automática que van incrementando el volumen del código fuente y que incluyen los controles de todos los elementos, aún de aquellos que no utilizamos. Todo eso, en desmedro de la eficiencia y con el consiguiente aumento en el tiempo de carga.

No es que un sistema sea mejor que el otro sino que son incompatibles. O se tiene un sistema libre y flexible, o se tiene un sistema rígido y limitado. Lo que no podemos tener es una ambiguedad porque entonces, nos encontraremos siempre con situaciones como estas. Ellos mismos lo dicen: "si la plantilla está muy personalizada ... tal cosa no funcionará ... blablabla". Lo que quiere decir que, hay momentos en que no tienen idea de por qué se produce un problema y mucho menos, cómo resolverlo.

Si no fuera excesivo, diría que la falla es filosófica y que va a llegar un momento en que esta contradicción deberá ser resuelta.

ACTUALIZACIÓN:

Un comentario de Winjaime de Ciudad Bit me dice que el problema es generado cuando la plantilla no tiene este código:

<b:include data='blog' name='all-head-content'/>

Simplemente lo he puesto y el script de Blogger ha regresado de donde nunca debió partir.

Conviene que si no lo tenemos, lo peguemos justo despues de TITLE ya que ese código también insrta un favicon y si el nuestro está antes, lo sobrescribirá y no lo veremos.

FireScope: Ampliando Firebug con referencias

FireScope es una extensión para Firefox que se integra con Firebug y que amplia las posibilidad de esa extensión imprescindible, agregándole referencias HTML y CSS.

Una vez instalado, tendremos un nuevo panel desde donde podemos acceder a una serie de páginas de ayuda y un buscador con enlaces a material de referencia.

La extensión también se integra desde otros paneles así que, desde cualqueira de ellos, con el botón derecho podemos acceder a las referencias o a ejemplos de uso de las diferentes etiquetas y propiedades.

Théorie des ensembles

Animación realizada por estudiantes franceses, como parte de una campaña contra la exclusión y la discriminación.

Google Safe Browsing diagnostics

Siempre se ha dicho que Blogger es el servicio de blogs que peor fama ha adquirido merced al mal uso de algunos hacen de él, agregando códigos para realizar estafas o propagar malware.

No parece ser del todo justo aunque algo de razón tienen. Es casi natural que así sea. Cualquier servicio gratuito y tan flexible, es caldo de cultivo para tramposos y ladrones. El problema es cómo debería lidiar Google con eso y sólo tiene dos posibilidades: limitar su uso o mejorar su seguridad. De hecho, es casi demasiado sencillo crear cuentas de Google y esa, me parece, es la clave de todo. Los spammers crean cientos de estas cuentas y nos abruman pero, Blogger se limita a ... nada, a cerrar sitios legítimos y a dejar que los otros sigan existiendo.

Hay una herramienta del mismo Google que nos puede ayudar en caso de dudas. Se trata de Google Safe Browsing diagnostics, un servicio que muestra información relacionada con la seguridad de cualquier sitio. Usarla es sencillo, basta escribir una dirección como esta:

http://www.google.com/safebrowsing/diagnostic?site=http://vagabundia.blogspot.com

Lo curioso, es el resultado que se muestra cuando se le pide analizar al propio domino de Blogger:

http://www.google.com/safebrowsing/diagnostic?site=http://blogspot.com

De las 500451 páginas analizadas en el sitio durante los últimos 90 días, 2347 página(s) contenía(n) software malicioso que había sido descargado e instalado sin el permiso del usuario. Google visitó este sitio por última vez el 2009-01-18, y se encontró contenido sospechoso en este sitio por última vez el 2009-01-18.

El software malicioso incluye 4228 scripting exploit(s), 1011 trojan(s), 786 virus. La infección ha comportado una media de 2 nuevos procesos en el equipo final.

El software malicioso se encuentra alojado en 313 dominio(s), entre los que se incluyen virusremover2008flash.com/, tag-world.com/, neoffic.com/.

Durante los últimos 90 días, parece que blogspot.com ha funcionado como intermediario en la infección de 22 sitio(s), entre los que se incluyen ikiyabancitvdizisi.blogspot.com/, diziyaprakdokumu.blogspot.com/, televizyonlar.net.tc/.

El sitio ha alojado software malicioso durante los últimos 90 días. Infectó 9 dominio(s), entre los que se incluyen ces.com.vn/, upload-hoanganhvu.com/, 4gamevn.com/.

REFERENCIAS:

SpamLoco

10 modelos de tipografía y algunos logos

Todos estos modelos de títulos se han creado utilizando tipografías y diferentes propiedades CSS. Pueden usarse con cualquier tipo de etiqueta y estos ejemplos se muestran en un encabezado H6 que tiene estas definiciones:

h6 {
  font-family: 'Times New Roman';
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

MODELO CON REFLEJOS

<style>
h6.reflect_1 {
  border-top: 1px solid #4C4C4C;
  border-bottom: 6px solid #444444;
  color: #666666;
  font-size: 24px;
  line-height: 0.2em;
  margin: 0;
  padding: 0 0 0 10px;
}
h6.reflect_2 {
  border-top: 1px solid #EEEEEE;
  color: #AAAAAA;
  font-size: 24px;
  line-height: 0.6em;
  margin: 0;
  padding: 0 0 0 10px;
}
</style>

<h6 class="reflect_1">MODELO CON REFLEJOS</h6>
<h6 class="reflect_2">MODELO CON REFLEJOS</h6>

Web Design Rockstarz

<style>
h6.line_drop {
  border-bottom: #BB0000 1px solid;
  color: #BB0000;
  font-family: 'Trebuchet MS', Garamond, Georgia;
  letter-spacing: -2px;
  line-height: .88em;
}
</style>

<h6 class="line_drop">Web Design Rockstarz</h6>

Morbi leo sapien, dapibus adipiscing justo sit amet mi!

<style>
h6.handwriting1 {
  font-family: 'Comic Sans MS';
  font-size: 105%;
  font-style: italic;
  font-weight: bold;
  letter-spacing: -1px;
  word-spacing: .25em;
}
h6.handwriting2 {
  font-family:'Trebuchet MS', Garamond, Georgia;
  font-size: 100%;
  font-style: italic;
  font-weight: 100;
  letter-spacing: -1px;
  word-spacing: .25em;
}
h6.handwriting3 {
  font-family: 'Comic Sans MS';
  font-size: 105%;
  font-style: italic;
  font-weight: 100;
  letter-spacing: -1px;
  word-spacing: .25em;
}
</style>

<h6 class="handwriting1">Morbi leo sapien, dapibus adipiscing justo sit amet mi!</h6>

<h6 class="handwriting2">Morbi leo sapien, dapibus adipiscing justo sit amet mi!</h6>

<h6 class="handwriting3">Morbi leo sapien, dapibus adipiscing justo sit amet mi!</h6>

Walt Whitman

<style>
h6.capital {
  font-family: Georgia;
  font-size: 375%;
  font-weight: normal;
  letter-spacing: -8px;
  text-transform: uppercase;
}
h6.capital span {
  font-size: 70%;
  letter-spacing: -1px;
  text-transform: lowercase;
}
</style>

<h6 class="capital">W<span>alt </span>W<span>hitman</span></h6>

Webdesign Times

<style>
h6.newspaper1 {
  border-bottom: groove 2px #CCCCCC;
  color: #6A6969;
  font-size: 36px;
  font-weight: 100;
  letter-spacing: .10em;
  line-height: 1em;
  text-transform: uppercase;
}
h6.newspaper1 span {
  font-family: Georgia, 'Times New Roman', Times, serif;
}
h6.newspaper2 {
  border-bottom: groove 2px #CCCCCC;
  color: #6A6969;
  font-size: 36px;
  font-variant: small-caps;
  font-weight: 100;
  letter-spacing: .10em;
  line-height: 1em;
}
</style>

<h6 class="newspaper1"><span>Webdesign</span> Times</h6>

<h6 class="newspaper2">Webdesign Times</h6>

Funky
Webdesign!

<style>
h6.funky {
  color: #666666;
  font-family: 'Trebuchet MS', Garamond, Georgia;
  font-size: 48px;
  font-weight: normal;
  letter-spacing: 20px;
  line-height: .65em;
}
h6.funky span {letter-spacing: 5px;}
h6.funky em {color: #EEEEEE;}
</style>

<h6 class="funky">Fun<strong><em>k</em></strong>y <br /><span> We<em>b<strong>d</strong></em>esign!</span></h6>

SUBRAYADO ELEGANTE

<style>
h6.elegant {
  border-bottom: #CCCCCC 1px solid;
  color: #BBBBBB;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 1em;
  line-height: .8em;
}
</style>

<h6 class="elegant">SUBRAYADO ELEGANTE</h6>

Rock5tar and a De51gner

<style>
h6.num_blend {
  font-size: 36px;
  font-weight: 100;
}
h6.num_blend span {
  color: #FF0000;
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1em;
}
</style>

<h6 class="num_blend">Rock<span>5</span>tar and a De<span>51</span>gner</h6>

Otro Estilo TypeWriter

<style>
h6.scaps {
  font-family: 'Courier New', Courier, monospace;
  font-size: 200%;
  font-variant: small-caps;
  font-weight: 100;
  letter-spacing: -1px;
}
</style>

<h6 class="scaps">Otro Estilo Typerighter</h6>

distintos usos de la tipografía
usando valores pequeños para line-height
y valores negativos para letter-spacing

<style>
p.letters1 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 25px;
  font-weight: 100;
  letter-spacing: -2px;
  line-height: .64em;
  text-transform: uppercase;
}
p.letters2 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 25px;
  font-weight: 100;
  letter-spacing: -2px;
  line-height: .72em;
  text-transform: uppercase;
}
p.letters3 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 25px;
  font-weight: 100;
  letter-spacing: -2px;
  line-height: .77em;
  text-transform: uppercase;
}
</style>

<p class="letters1">distintos usos de la tipografía<br/>usando valores pequeños para line-height<br/> y valores negativos para letter-spacing</p>

<p class="letters2">distintos usos de la tipografía<br/>usando valores pequeños para line-height<br/>y valores negativos para letter-spacing</p>

<p class="letters3">distintos usos de la tipografía<br/>usando valores pequeños para line-height<br/>y valores negativos para letter-spacing</p>

Y algunos logos conocidos:

Gray's

Anatomy

G

o

g

l

e

FedEx

Y

A

H

O

!

<style>
/* Gray's Anatomy */
h6.gr {
  border-bottom: #CC0000 10px solid;
  color: #999999;
  float: left;
  font-family: Impact, Arial, Verdana;
  font-size: 500%;
  font-weight: 100;
  margin: 0;
  text-transform: uppercase;
}
h6.gr2 {
  color: #999999;
  float: left;
  font-family: Impact, Arial, Verdana;
  font-size: 500%;
  font-weight: 100;}
  margin: 25px 0;
  position: relative;
  text-transform: uppercase;

/* Google */
div.google h6 {
  font-size: 500%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 100;
  float: left;
  margin: 0;
}
h6.g {color: #133BC1;}
h6.o1 {color: #E33B21;}
h6.o2 {color: #E6B500;}
h6.l {color: #4BCE54;}
h6.lg {color: #0048E3;}
h6.e {color: #E33B21; font-style: italic;}

/* FedEx */
h6.fed {
  color: #660099;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 500%;
  letter-spacing: -.08em;
}
h6.fed span {
  color: #999999;
  font-size: 105%;
  margin: 0 0 0 -.1em;
}

/* Yahoo */
div.yahoo h6 {
  color: #FF0000;
  font-family: Garamond, Georgia, 'Times New Roman';
  float: left;
  font-weight: 0;
  text-transform: uppercase;
}
h6.y1 {
  font-size: 500%;
  margin: 0;
}
h6.y2 {
  font-size: 350%;
  margin: 15px 0 0 -10px;
}
h6.y3 {
  font-size: 350%;
  margin: 8px 0 0px -5px;
}
  h6.y4 {
  font-size: 300%;
  margin: 12px 0 0px -5px;
}
h6.y5 {
  font-size: 350%;
  margin: 6px 0 0px -1px;
}
h6.y6 {
  font-size: 350%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 4px 0 0px -1px;
  text-transform: none;
}

</style>
<h6 class="gr">Gray's</h6><h6 class="gr2"> Anatomy</h6>

<div class="google"><h6 class="g">G</h6><h6 class="o1">o</h6><h6 class="o2">o</h6><h6 class="lg">g</h6><h6 class="l">l</h6><h6 class="e">e</h6>e</div>

<h6 class="fed">Fed<span>Ex</span></h6>


<h6 class="y1">Y</h6><h6 class="y2">A</h6><h6 class="y3">H</h6><h6 class="y4">O</h6><h6 class="y5">O</h6><h6 class="y6">!</h6>

REFERENCIAS:

3point7designs.com

Accesos al panel de Blogger desde el blog

Cuando estoy haciendo modificaciones en la plantilla o ajustando algo, me molesta mucho que aparezcan esos iconitos de edición debajo de cada elemento. Tampoco me gusta verlos cuando navego el blog, me distraen.

Y sin embargo, son útiles, son los que nos permiten editar rápidamente la plantilla y Blogger los agrega con una línea de codigo:

<b:include name='quickedit'/>

que luego, al crear la página, se transforma en un enlace con una imagen:

<span class="item-control blog-admin">
  <a class="quickedit" ....... >
    <img src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" />
  </a>
</span>

Muchas veces, lo que hice fue eliminarlos para poder tener una vista más despejada pero no es una buena solución. Otra alternativa que intenté, fue usar el CSS para ocultarlos:

a.quickedit {display: block !important;}

Tampoco es una solución aceptable. Lo ideal, sería poder ocultarlos o mostrarlos con un simple click desde el mismo blog y eso es posible gracias a un script que nos permite cambiar las propiedades de una clase CSS por otra.

Entonces, se me ocurrió que podía agregarse la opción a un widget que explicaba El escaparate de Rosa

y que nos permite tener un acceso rápido a nuestro panel de Blogger ¿Para qué serviría este widget?

Cuando eliminamos la Navbar, muchos usuarios se enfrentan con un problema: no saben cómo ingresar a su blog. Obviamente, basta tener la dirección en los marcadores pero, sería bueno tener un acceso directo a las distintas opciones del panel y que esas opciones sólo sean visibles al administrador del blog.

Para esto, lo que necesitamos conocer es el número de identificación del blog y eso podemos averiguarlo en el mismo panel de control, mirando la URL que se muestra en el navegador; por ejemplo, desde Edición de entradas veríamos algo así:

http://www.blogger.com/posts.g?blogID=11223344

Con ese número, podemos contruir los diferentes enlaces que queremos incluir:

Acceso al inicio de Blogger:
<a href='http://blogger.com/home'>Acceder</a>

Acceso al inicio de Blogger Draft:
<a href='http://draft.blogger.com/home'>Blogger Draft</a>

Acceso a Edición de entradas:
<a href='http://www.blogger.com/posts.g?blogID=numeroIDblog'>Edición de Entrada</a>

Crear una nueva entrada:
<a href='http://www.blogger.com/post-create.g?blogID=numeroIDblog'>Nueva Entrada</a>

Acceso al Panel de Configuración:
<a href='http://www.blogger.com/blog-options-basic.g?blogID=numeroIDblog'>Configuración</a>

Acceso al Panel de Diseño:
<a href='http://www.blogger.com/rearrange?blogID=numeroIDblog'>Diseño</a>

Acceso al Panel de Diseño | Edición HTML:
<a href='http://www.blogger.com/html?blogID=numeroIDblog'>Edición HTML</a>

Acceso al Panel de Diseño | Edición HTML con los artilugios expandidos:
<a href='http://www.blogger.com/html?blogID=numeroIDblog&tpl=true'>Edición HTML expandido</a>

Salir de la cuenta:
<a href='http://www.blogger.com/logout.g'>Salir</a>

Y si queremos acceder a las mismas opciones pero en Blogger Draft, las direcciones son similares, sólo debemos cambiar:

http://www.blogger.com/

por:

http://draft.blogger.com/

¿Cómo lo insertamos y dónde? Eso es un problema de gustos personales; lo más sencillo es colocarlo en un elemento HTML en la sidebar, en el header, en el footer o, simplemente, agregar el código directamente en la plantilla donde se nos ocurra, recordando siempre que será invisible para cualquiera excepto para el administrador o los administradores del blog.

El código básico sería este:

<span class='item-control blog-admin'>
  ... y aquí ponemos los enlaces ...
</span>

En lo personal, lo he puesto debajo del header, justo antes de <div id='content-wrapper'> de este modo:

<div class='panelAdministracion'>
  <span class='item-control blog-admin'>
    <a href='http://draft.blogger.com/home'>Blogger Draft</a> | 
    <a href='http://www.blogger.com/posts.g?blogID=numeroIDblog'>Edicion Entradas</a> | 
    <a href='http://www.blogger.com/blog-options-basic.g?blogID=numeroIDblog'>Configuración</a> | 
    <a href='http://www.blogger.com/rearrange?blogID=numeroIDblog'>Diseño</a> | 
    <a href='http://www.blogger.com/html?blogID=numeroIDblog'>Edición HTML</a> | 
    <a href='javascript:void(0);' onclick='loopCSSChange(document,"quickedit","quickeditNO");'>quickEdit OFF</a> | 
    <a href='javascript:void(0);' onclick='loopCSSChange(document,"quickeditNO", "quickedit");'>quickEdit ON</a>
  </span>
</div>

Allí, ya están incorporadas las funciones para el script que debemos agregar antes de </head>:

<script type='text/javascript'>
loopCSSChange = function (el, class, newclass) {
   for (var x=0;x&lt;el.childNodes.length;x++) {
        loopCSSChange(el.childNodes[x], class, newclass);
  }
    if (el.className==class) el.className=newclass;
  }
</script>

La función cambia una clase (claseVIEJA) por otra (claseNUEVA):

loopCSSChange(document,"claseVIEJA","claseNUEVA");

Así que, por último, agregamos las definiciones CSS de esas dos clases, la que muestra el ícono y la que lo oculta:

<style type='text/css'>
  /* las clase a permutar */
  .quickedit {display: block !important;}
  .quickeditNO {display: none !important;}
</style>

En blanco y negro

El pasado me condena

Amog es un sitio donde podemos sumergirnos en el pasado y probar esos juegos de 8 bits y 16 colores que fueron la razón por la cual, muchos de nosotros, comenzamos a interesarnos por esos aparitotos tan extraños a los que se llamaba computadoras.

En este momento han recopilado más de 50 títulos para poder jugar online y, por supuesto, no necesitamos usar fichines

Click para ejecutar el video.

Breve historia de los videojuegos

Y algunas cosillas para recordar aquellos tiempos o para que vean como se divertían "los abuelitos"

Click para jugar.

REFERENCIAS:

lanacion.com.ar

Wallpapers (Mafalda 2)

REFERENCIAS:

Blogtecnia

Buscando nuestro nombre en la red

La Wikipedia dice que el nick es ese nombre descriptivo que se le da a una persona en lugar de su nombre oficial. Lo que dicho en castellano, no es otra cosa que un apodo, un seudónimo, un alias.

Es el simple Beto, el autoreferencial miOtroYo o el complejo (¯`·._.·[ JUANCITO ]·._.·´¯)

En internet lo usamos para casi todo y muchas veces, nos topamos con un problema: ¿estará disponible? ¿alguien usará el mismo? Si nos interesa saberlo, hay que ir a usernamecheck.com donde escribimos el nombre y nos dirá en qué servicios esta disponible y en cuales ya está registrado.

REFERENCIAS:

MicroZulo

CSS Text Wrapper: Nada de rectángulos

CSS Text Wrapper es una página que nos permite generar códigos para mostrar textos de una manera particular o, mejor dicho, para poder mostrarlos de cualquier manera: curvas, zig-zags, etc, las posibilidades son casi infinitas.

Entramos a la página y allí veremos un modelo, agregamos los puntos que se nos ocurra o los desplazamos. En las opciones, podemos establecer el contenido, el tamaño del bloque y las fuentes de texto a usar.

Por último, podemos elegir uno de tres métodos para insertar nuestra obra de arte:

Copiar y pegar el código justo encima del contenido a ser mostrado.
Agregar un par de clases CSS a la hoja de estilo y luego, copiar y pegar el código que nos dan, justo encima del contenido a ser mostrado.
Usar un script que se copia y pega arriba del texto.

Aenean ut neque. Nullam vel erat. Suspendisse scelerisque, diam nec bibendum posuere; massa ligula porttitor turpis, et aliquet sem ante id velit. Aenean ut neque. Nullam vel erat. Suspendisse scelerisque, diam nec bibendum posuere; massa ligula porttitor turpis, et aliquet sem ante id velit. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Aeneansa.

Otro gadget para Top Comentaristas

Hay varios gadgets que se pueden usar para mostrar una lista con el top de comentaristas; casi todos ellos, usan alguna veriante de los Pipes de Yahoo. Este, es otro de esos gadgets, pertenece a Google Operating Systems y me entero de su existencia por lo que me comentaron Nico y Alejandro.

A diferencia de la mayoría de los que he visto, presenta una particularidad, genera una lista, analizando los últimos 5000 comentarios, con lo cual, el resultado es bastante interesante para quien desee tener este tipo de estadísticas.

Podemos probarlo, ingresando la URL de nuestro blog (Blog's URL) y estabeciendo dos datos, la cantidad de resultados a ser msotrados (Number of top commentators) y los nombres filtados separados por comas (Filtered names).

Si quisiéramos agregarlo a nuestro blog, bastaría insertar el siguiente código en un elemento HTML:

<script type="text/javascript">
  function pipeCallback(obj) {
    document.write("<ol>");
    var i;
    for (i = 0; i < obj.count ; i++) {
      var href = "'" + obj.value.items[i].link + "'";
      var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
      document.write(item);
    }
    document.write("</ol>");
  }
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FnombreBlog.blogspot.com&num=10&filter=Anonymous,nombre1,nombre2,etc" type="text/javascript"></script>

Debo advertir que, todas las pipes son "lentas" y si a eso le sumamos que se usa Json, tendremos un gadget "muy lento" de cargar así que debería usarse con prudencia o bien ubicarlo en algún lugar que no entorpezca la carga de la página, por ejemplo, al final de la sidebar o en en el footer.

Migrando los feeds de Feedburner

Son varios los que me han preguntado por el cartelito que aparece apenas entran en la cuenta de Feedburner, donde se sugiere Mover la cuenta a Google.

Como no lo había hecho, los remitía a la entrada de Pizcos donde se comentaba sobre el tema pero, llega un momento en que no hay más remedio que lanzarse y ver qué pasa.

¿De qué se trata todo esto?

Hace ya tiempo que Google adquirió Feedburner y ahora, ha decidido absorberlo por completo, imagino que para dejarlo como herramienta de sindicalización exclusivamente y permitir el uso de AdSense. Con ese criterio, comenzaron a mover las cuentas a sus servidores y planean que TODAS las cuentas sean cambiadas para fines de febreo de este año, lo cual significa que la mudanza puede hacerse ahora o ¿será forzada?

Ellos, aseguran que: NO SE PERDERAN LAS SUSCRIPCIONES y que las direcciones de los feeds se redirigirán automáticamente por lo que no es necesario hacer cambios en nuestros sitios. Lo único que podría sufrir un cambio son los reportes estadísticos que tardarán unos días en reajustarse y por lo tanto, los valores mostrados podrían ser inferiores a los reales. Por otro lado, prometen que los cálculos serán más exactos y los algoritmos que utilizan en Google para las estadísticas son mucho más precisos que los utilizados por FeedBurner (más información).

Pero basta de palabras, lancémonos al vacio y click en Move your account now. Nos mostrará una primera ventana donde deberemos indicar la cuenta de Google a la cual transferiremos todo

Seguimos adelante y aparecerá una segunda ventana de advetencia desde la cual podemos iniciar el proceso o cancelarlo

Click en Migrar Feeds y esperamos unos segundos

. Terminado el proceso, nos muestra una última ventana con el resultado e información adicional

Simultáneamente, recibiremos un mail con esos datos donde lo importante es saber que ya no podremos aceder a feedburner.com y que para administrar los feeds, deberemos ingresar en http://feedburner.google.com

Las direcciones de los feeds cambiarán de:

http://feeds.feedburner.com/nombre

a:

http://feeds2.feedburner.com/nombre

y si bien, una vez mudada la cuenta, las URLs del tipo feeds.feedburner.com/nombre continuarán existiendo, lo mejor es que vayamos cambiándolas en nuestra plantilla.

Una vez que ingresamos a feedburner.google.com no veremos demasiadas cosas nuevas y podemos colocar todo en español desde Languages. Lo más llamativo es que ha desaparecido la opción Site Stats (visitors); es lógico que se ha privilegiado el uso de Google Analytics y ahora, ese servicio sea redundante.

Tal como advertían, veremos el Tablero de estadísticas vacío ya que estas tardarán un tiempo en actualizarse al nuevo servidor.

Y eso es todo. Todo normal ... por ahora

Los nuevos tiempos

funtasticus.com

REFERENCIAS:

UsuárioCompulsivo

¿El Google Web Drive?

En Google Blogoscoped muestran esta imagen:

Dicen que es una captura de pantalla tomada por un usuario que instaló la versión de Picasa para Mac. Lo que se muestra es la opción de enviar una imagen a Google Web Drive.

¿Qué es Google Web Drive? Por el momento, nada pero parece querer ser eso que hace tanto que viene sonando: el servicio que Google no tiene: la posibilidad de alojar archivos de todo tipo al estilo SkyDrive. El largamente esperado GDrive.

Se habla de documentos internos de Google subidos a la red y eliminados sistemáticamente. Documentos con explicaciones sobre la instalación y uso: "Download the latest GDrive client build from the internal address http://go/getgdrive, install it and double click the Google Web Drive desktop icon (for PC users) to log in, perform an initial sync and Start using GDrive by dragging files in or creating new files." Todo, muy misterioso (más información).

Ese menú enviaría el archivo a www10.google.com y, por supuesto, no está activo por lo que se supone que se trata de un descuido de los desarrolladores de la compañía.

¿Alguna vez ocurrirá el milagro? Por el momento, lo único cierto es que el dominio googlewebdrive.com existe y fue creado en el 2006 y actualizado en el 2007. Pero claro, sólo es uno de los miles de dominios que tienen registrados.

El CSS3 y las curvas

El CSS (Cascading Style Sheets) es un lenguaje o pseudo-lenguaje que nos permite darle propiedades a las distintas etiquetas de un documento HTML o XML, y de esa manera, controla la forma en que se verá, se imprimirá o se escuchará.

Desde que comenzó a usarse con cierta regularidad (no hace demasiado tiempo), ha ido sufriendo modificaciones, se han agregado definiciones y, en este momento, el que se utiliza es el llamado CSS level 2 [CSS2] sin embargo, ya se está trabajando con el que será la próxima etapa, el CSS3 que incluirá algunas novedades tales como bordes, sombras, etc (más información).

Pese a ser algo "para el futuro", ya hay navegadores que soportan algunas de estas características: Firefox, Opera, Safari/Webkit y Konqueror. Lamentablemente, no pasa lo mismo con Internet Explroer y aunque esa limitación es una molestia, no veo razones para no experimentar con el tema y utilizar esas propiedades. De hecho, son muchos los sitios que ya las usan.

De todas ellas, la más interesante y además, la más sencilla es border-radius que es una propiedad que nos permitirá redondear las esquinas de cualquier elemento.

Tiene las mismas caracterísiticas que la propiedad border, puede usarse de manera genérica estableciendo los cuatro bordes al mismo tiempo, establecer las propiedades de cada uno de ellos y además las características de cada definción (tamaño, ancho, color).

La sintaxis es la siguiente:

border-radius: valorpx;

Sin embargo, lo mejor es utilizar todas las definiciones ya que los navegadores, por ahora, utilizan algunas variantes:

-moz-border-radius: valorpx;
-khtml-border-radius: valorpx;
-webkit-border-radius: valorpx;
border-radius: valorpx;

No estoy seguro si existe la posibilidad de establecer las propiedades individuales en todos los navegadores y estas son algunas de las que he encontrado:

el borde inferior izquierdo:
-moz-border-radius-bottomleft: valorpx;
-webkit-border-bottom-left-radius: valorpx;

el borde inferior derecho:
-moz-border-radius-bottomright: valorpx;
-webkit-border-bottom-right-radius: valorpx;

el borde superior izquierdo:
-moz-border-radius-topleft: valorpx;
-webkit-border-top-left-radius: valorpx;

el borde superior derecho:
-moz-border-radius-topright: valorpx;
-webkit-border-top-right-radius: valorpx;

Para no complicarme la vida, de acá en más me voy a limitar a poner las propiedades utilizadas por Firefox.

Usar esto es muy sencillo. Veamos un ejemplo concreto: