Imágenes con explicaciones (2)

JMiur [E]

My one and only.


La fuga.


Adiós mundo cruel.


Cualquiera se equivoca.


Nadie.

Wallpapers (Arte)

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

    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
    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!

    Morbi leo sapien, dapibus adipiscing justo sit amet mi!

    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

    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

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

    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
    o
    g
    l
    e

    FedEx

    Y
    A
    H
    O
    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 risaanim


    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" verguenza

    Click para jugar.


    REFERENCIAS:
  • lanacion.com.ar
  • Wallpapers (Mafalda 2)

    Wallpapers (Mafalda2)

    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:
    1. Copiar y pegar el código justo encima del contenido a ser mostrado.
    2. 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.
    3. 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 complice

    Los nuevos tiempos


    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:

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


    <style>
    .ejemplo1 {
    background-color: #3465AD;
    border:2px solid CornflowerBlue;
    color: #FFFFFF;
    margin: 5px auto;
    padding: 10px;
    text-align: center;
    width: 400px;
    -moz-border-radius: 30px;
    -khtml-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    }
    </style>

    <div class="ejemplo1">Lorem ipsum dolor sit amet, consectetuer ...</div>

    En ese ejmplo, los cuatro bordes estan redondeados con el mismo radio pero, pueden ser diferentes usando algo así:

    -moz-border-radius: valorpx valorpx valorpx valorpx;

    que corresponden a los bordes superior, derecho, inferior e izquierdo.

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


    <style>
    .ejemplo2 {
    background-color: #3465AD;
    border: 2px solid CornflowerBlue;
    color: #FFFFFF;
    margin: 5px auto;
    padding: 10px;
    text-align: center;
    width: 400px;
    -moz-border-radius: 10px 30px;
    -khtml-border-radius: 10px 30px;
    -webkit-border-radius: 10px 30px;
    border-radius: 10px 30px;
    }
    </style>

    <div class="ejemplo2">Lorem ipsum dolor sit amet, consectetuer ...</div>

    El borde curvo puede hacer tanto si el elemento tiene borde como si no lo tiene. Por ejemplo, podríamos eliminar border:2px solid CornflowerBlue; y el resultado sería este:

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

    Así como podemos establecer tamaños diferentes para cada borde, también podemos establecer el color de cada uno:

    -moz-border-bottom-colors: elColor;
    -moz-border-left-colors: elColor;
    -moz-border-right-colors: lColor;
    -moz-border-top-colors: elColor;

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


    <style>
    .ejemplo3 {
    background-color: #3465AD;
    color: #FFFFFF;
    margin: 5px auto;
    padding: 10px;
    text-align: center;
    width: 400px;
    -moz-border-radius: 20px;
    -moz-border-bottom-colors: LightSeaGreen;
    -moz-border-left-colors: lightblue;
    -moz-border-right-colors: #999999;
    -moz-border-top-colors: CornflowerBlue;
    }
    </style>

    <div class="ejemplo3">Lorem ipsum dolor sit amet, consectetuer ...</div>

    Combinado todo eso, se pueden lograr cosas espectaculares:

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


    <style>
    .ejemplo4 {
    background-color: #000000;
    color: #FFFFFF;
    margin: 5px auto;
    padding: 10px;
    text-align: center;
    width: 400px;
    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #AAA #BBB #CCC;
    padding: 5px 5px 5px 15px;
    }
    </style>

    <div class="ejemplo4">Lorem ipsum dolor sit amet, consectetuer ...</div>

    Una propiedad similar al borde y que se utiliza en Firefox es outline, una especie de borde extra ¡Y también puede "curvarse"!

    -moz-outline: valorpx:

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


    <style>
    .ejemplo5 {
    -moz-outline-radius: 40px;
    outline-color: aliceBlue;
    outline-offset: 5px;
    outline-style: solid;
    outline-width: 5px;
    -moz-border-radius: 30px;
    }
    </style>

    <div class="ejemplo5">Lorem ipsum dolor sit amet, consectetuer ...</div>

    Si bien en Internet Explorer no está soportado, en HTML Remix ofrecen una solución cuyo demo puede descargarse en formato ZIP .

    El problema es que requiere utilizar un archivo de extensión HTC (HTML Component) que es un formato de archivo muy difícil de alojar en algún servidor gratuito. De todas formas, lo usaríamos de esta forma:
    <style>
    .curvado {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    behavior: url(URL_border-radius.htc);
    }
    </style>

    <div class="curvado">Lorem ipsum dolor sit amet, consectetuer ...</div>

    Este sitio se ve mejor en Explorezilla

    Es usual que si navegamos, veamos banners, recomendaciones o advertencias que sugieren a los visitantes que usen tal o cual navegador:

    "Este sitio se ve mejor en Explorezilla ... blablabla"

    Nunca me gustaron demasiado pero, es una decisión personal, me parece más razonable describir las alternativas y dejar que cada uno decida. Si entendemos que no menos del 50% de los visitantes de cualquier blog utiliza alguna versión de Internet Explorer, machacar constantemente en sus defectos parece poco inteligente; es que ¿si uso eso que no te gusta ... soy un tonto o un ignorante?

    Si bien es cierto que para algunos desarrolladores, crear sitios que puedan verse más o menos bien en cualquier navegador es un reto, parece que para otros, es una tarea imposible, se niegan y pretenden imponernos cosas a la fuerza.

    Un ejemplo de ello es Crash IE, un sitio al que critican en leegar blog con justa razón.

    Es que ellos han llevado las cosas al extremo, incluyendo un código en el diseño que provoca un fallo en Internet Explorer. Lo que piensan es que los visitantes se cansarán y que entonces, se decidirán por usar algún otro navegador ¿Será así? No creo. Lo más probable es que se aburran, insulten y no vuelvan más ¿Queremos eso? ¿Queremos una nueva generación de talibanes imponiendo un pensamiento único?

    La verdad, prefiero equivocarme solito y no seguir las reglas de estos mesías de pacotilla.

    Por cierto, no pongo el enlace porque realmente cuelga el navegador y, como IE está muy integrado en Windows, el resto de las ventanas suele congelarse y cuesta retomar el control pero, si alguien quiere hacer la prueba, basta ir a esta dirección: http://www.crashie.com/

    YouTube: ¿Descargar or not descargar?

    ¿De qué se tratará esto sobre lo que tanto se lee? ¿YouTube permitirá descargar los videos?

    Es que la inclusión de un enlace para descarga en el canal ChangeDotGov de Obama ha causado revuelo y todo se preguntan lo mismo ¿será una prueba experimental o sólo relaciones públicas?

    Tal como dicen en Google Operating System, los Térmimos del Servicio no han cambiado y allí, explícitamente, se dice que eso no ocurrirá:

    "... a contemporaneous digital transmission of an audiovisual work via the Internet from the YouTube Service to a user's device in such a manner that the data is intended for real-time viewing and not intended to be copied, stored, permanently downloaded, or redistributed by the user ..."

    Pero claro, ellos son los dueños y pueden cambiar las reglas cuando quieran.

    Por cierto, me ha parecido curios que los enlaces apunten a googlevideo.com y que incluyan la dirección IP de quien los descarga.

    Bueno. No importa lo que haga YouTube, no hay nada más sencillo que descargar un video, ha muchos sitios que lo hacen y es muy sencillo tener una marcador con un bookmarket que nos permita hacerlo con un simple click; basta arrastrarlo a la barra de marcadores o agregarlo a los favoritos:



    javascript:if(document.location.href.match(/http:\/\/[a-zA-Z\.]*youtube\.com\/watch/)){document.location.href='http://www.youtube.com/get_video?fmt='+(isHDAvailable?'22':'18')+'&video_id='+swfArgs['video_id']+'&t='+swfArgs['t']}

    Shape Switcher

    Wallpapers (Mafalda 1)

    Wallpapers (Mafalda1)

    REFERENCIAS:
  • Blogtecnia
  • Just singing in the rain !!!!!!!!!!

    Songsmith es un producto experimental de Microsoft que se promociona anunciando que cualquiera pueda grabar una canción sin necesidad de saber nada de música.

    Se supone que se graba la voz y el soft la analiza , corrige imperfecciones y permite agregarle efectos, acompañamientos, ritmos, etc. Una vez terminado, puede guardarse o exportarse para compartir con amigos (algunos ejemplos online)

    Si alguien quiere probarlo, hay una version trial que tiene una validez de seis horas (el programa cuesta U$S$29.95) y funciona en Windows XP o Vista.


    REFERENCIAS:
  • googlediscovery.com
  • Lorem ipsum dolor sit amet ... ¿OK?


    Según la Wikipedia, Lorem Ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o en borradores, para probar el diseño visual antes de insertar el texto final.

    Ya lo sabemos o lo hemos visto decenas de veces pero ¿por qué usamos eso y no otro texto? ¿es un capricho?

    Dicen los que saben que, al estar escrito en latín (un idioma que difícilmente comprendamos), permite que el texto, ininteligible, pase a un segundo plano y de esa manera, un usuario no se "distrae leyendo" y puede concentrarse en el diseño de algo que es, por cierto, el objetivo final de ese tipo de página.

    El texto no es aleatorio, pertenece a una obra de Cicerón llamada De finibus bonorum et malorum (Sobre los límites del bien y del mal), escrita en el año 45 AC y la parte más utilizada es:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum (texto completo)

    En es.lipsum.com aclaran que Lorem Ipsum es un relleno que se viene utilizando desde el año 1500 cuando un impresor desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos modelo. Más cerca nuestro, en la década del 60, se hizo popular con la creación del Letraset; más recientemente, se incorporó como estandard a todo tipo de documento electrónico ya que tiene una distribución de letras muy homogénea y es mejor usar eso que poner textos tipo "Aquí va el contenido" o "blablablabla blablabla".

    En ese mismo sitio podemos encontrar diferentes paquetes que permiten la creación de este tipo de textos en diferentes contextos: extensiones para Dreamweaver, Pyton, GTK, ActionScript e incluso una extensión para Firefox que genera un texto aleatorio en cualquier campo de un formulario (más información).

    La extensión tiene varias opciones de configuración y podemos descargarla desde Mozilla AddOns.


    También hay varias páginas que nos permiten generar textos aleatorios: blindtextgenerator o generator3, ambos en español y hace poco, La Bloguería twiteaba (¡que modernos somos XD!) sobre otro sitio llamado HTML Ipsum donde hay ejemplos que podemos utilizar directamente en una página web (más detalles en Gem@ Blog

    Así que:

    Ut magna elit, facilisis quis, ullamcorper nec, mollis sit amet; felis! Morbi semper, orci non fringilla congue, lacus enim rhoncus turpis, semper pulvinar velit pede sit amet libero. Quisque sed lacus eget enim sollicitudin porttitor. Mauris faucibus. Aliquam erat volutpat. Integer lacinia sapien vel nibh? Integer fermentum ornare lectus. Vestibulum tempus, justo id sollicitudin pharetra, turpis sapien laoreet arcu, eget elementum sapien magna at mauris. Aliquam erat volutpat. Donec fringilla quam sed neque gravida elementum. Ut a enim. Ut vitae est. In faucibus purus in mauris. Sed ut pede vitae augue vestibulum mattis. Donec ac diam. Mauris porttitor volutpat mauris.

    Nullam nibh nulla, sodales et, viverra et, rutrum at, felis. Phasellus non pede. Praesent fringilla mauris a pede nullam.

    Buscando en Google dentro de un cubo

    Search Cube es un sitio que nos permite navegar en los resultados de Google pero de una manera muy original, mostrando miniaturas en un cubo tridimensional que podemos hacer rotar usando los cursores.


    REFERENCIAS:
  • labnol.org
  • Agregando comentarios en video con Blipback

    Blipback es un servico que ha descubierto Pizcos y que permite que los visitantes de un blog, dejen videos con sus comentarios. Hace un tiempo ya existía un plugin para WordPress que hacía lo mismo pero, la novedad, es que Blipback puede utilziarse en cualquier sitio web, incluido Blogger.

    Para utilizarlo, hay que registrarse con una dirección de mail válida. Una vez verificada nos permitirá acceder a las opciones que incluyen estadísticas, suscripciones y la posibilidad de subir videos (más información).

    Para instalarlo, podemos seleccionar uno de los dos modelos disponibles y luego copiar y pegar el código que nos ofrecen o bien hacer click en Quick Post y elegir el servicio donde queremos agregarlo.


    GET YOUR OWN BLIPBACK!

    REFERENCIAS:
  • Humanos sin sentido
  • Google Friend como comentarios alternativos

    Esto es algo que vengo intentando hace varios días con poco éxito y, como ya no quiero seguir probando, creo que la mejor amnera de sacármelo de encima es contarlo.

    Leyendo Woork, me encuentro con una entrada que habla de algo que aparenta ser interesante, se trata de usar uno de los gadgets de Google Friend Connect para utilizarla como alternativa a los comentarios del blog.

    El proceso es sencillo, entramos a la página principal con nuestra cuenta de Google y hacemos click en Setup a new site y luego en Continue. Completamos el formulario colocando los datos de nuestro sitio: Site name (el nombre) y Home URL (la dirección del blog) y click en Continue.

    Como usamos Blogger, no necesitamos descargar archivos así que nos salteamos la siguiente página; click otra vez en Continue. En la última ventana nos pregunta si queremos verificar lo que hemos hecho, conviene hacerlo con el botón Test your setup.

    Como ya está todo listo, vamos a agregar un gadget. En la lista de la izquierda seleccionamos Social gadgets y luego Wall gadget.

    Allí podremos configurarla y, lo más importante es establece la opción Scope como para que los comentarios ingresados se asocien con una página específica y sean mostrados sólo en esa página.

    Las siguientes opciones son los títulos, el tamaño, los colores y la cantidad máxima de comentarios a mostrar. Todo eso lo podemos ir adaptando en una previsualizacion y, una vez que lo tenemos a nuestro gusto, generamos el código que deberemos insertar en nuestra plantilla.

    Aquí es donde comenzaron mis problemas.

    Lo razonable, tal como explican, es colocarlo en alguna parte debajo de los posts, junto con el formulario de comentarios. Por ejemplo, buscamos esto:

    <b:includable id='comments' var='post'>

    Y allí, tal vez, podemos colocarlo antes o después de los comentarios normales:
    EL SCRIPT PUEDE COLOCARSE ACÁ

    <dl id='comments-block'>
    .......
    </dl>

    O COLOCARSE ACÁ
    Lamentablemente, no puedo mostrarlo porque debe haber algún problema con mi cuenta o alguna limitación con mi plantilla; sin embargo, otra posibilidad que funciona es agregar el script en un elemento HTML de la sidebar y, en todo caso, colocarlo en un condicional:
    <b:if cond='data:blog.pageType == "item"'>
    [ aquí colocar el script ]
    </b:if>

    REFERENCIAS:
  • Woork
  • Herramienta para subir archivos en SkyDrive

    Si usan Windows Live SkyDrive seguramente han visto que aparece la posibilidad de instalar una herramienta de descarga que nos permitirá subir archivos arrastrándolos desde nuestra PC.


    Realmente es útil pero, es una pena que sólo funcione en Internet Explorer diablo1

    Jugando con los posts (Estilo magazine) The end

    Vamos a ver si podemos darle un final a esta serie de entradas sobre las plantillas tipo magazine en Blogger, agregando un par de funciones más.

    Lo primero, entonces, es definir con claridad cuáles son las características propias de este tipo de sitios y, en este caso, saber qué podemos hacer y qué no podemos hacer ya que nos enfrentamos con las limitacions propias de un servicio que ofrece un acceso restringido a nuestros datos.

    La plantilla deberá contemplar algunos puntos que considero imprescindibles para un blog de este estilo:
    1. La página principal del sitio (home) debe ser exclusiva, distinta del resto y es la única que muestra el estilo magazine. Debería ser diferente, tanto por la forma en que se muestran las entradas como en su estructura y allí, mostrarse un extracto personalizado de cada entrada con un enlace a la página individual.
    2. La página de entradas individuales se mostrará de manera normal, con cualquier tipo de contenido y ese contenido deberá ser independiente del resto.
    3. Las páginas que se muestran durante la navegación deben ser listas con títulos y, eventualmente, incluir la opción de expandirlos.
    4. La sidebar debe ser dinámica y contemplar la posibilidad de mostrar contenido de referencia a la entrada individual que se esté viendo.
    Partiendo de estas premisas, comienzo con una Plantilla Mínima y, como ya estoy un poco harto del color blanco, le cambio algunos detalles gráficos y la amplío. Aunque todo eso no tiene mayor importancia y la parte estética puede ser cualquier cosa, de todas formas, la plantilla ejemplo está disponible para ser descargada en formato ZIP

    El ejemplo, puede verse funcionando online en un blog de pruebas o se puede acceder haciendo click en cada una de las imágenes de esta entrada.

    A los efectos de la explicación, sólo hay que saber que los anchos de referencia son los siguientes:

    header-wrapper: width: 980px
    outer-wrapper: width: 980px
    main-wrapper: width: 660px
    sidebar-wrapper: width: 260px
    footer-wrapper: width: 980px


    Es decir, el blog tiene 980 pixeles de ancho máximo dividido en dos partes, las entradas ocupan 660 y la sidebar 260. El resto, los 60 pixeles restantes, son las separaciones entre ambos.

    La idea es la siguiente: en la página principal se verá el estilo magazine. Por la forma en que lo quiero distribuir, necesito que sólo se muestren 6 entradas por página así que voy a Configuracion | Formato y coloco ese valor:

    Mostrar en la página principal.

    Ese estilo magazine, con entradas sumarias, sólo se verá allí en home, de esa manera, cualquier blog podría adaptarse ya que no sería necesario editar las entradas anteriores, basta que las primeras (en este caso esas seis) posean el nuevo código; el resto se seguirá mostrando normalmente.

    Para darle más fuerza a ese home y diferenciarlo más del resto del sitio, cambiaremos de lugar la sidebar y, en lugar de colocarla al lado de las entradas como en el resto de las páginas, la pondremos abajo.


    Vamos a modificar el código de Blogger, expandiendo los artilugios y buscando esto:

    <b:includable id='post' var='post'>

    un poco más abajo, veremos el código que se usa para mostrar las entradas:
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    Modificaremos eso, interceptándolo de manera similar a lo que se mostraba en el artículo anterior:
    <!-- diferenciar el tipo de pagina -->
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <!-- entradas "normales" -->
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    <b:else/>
    <!-- entradas tipo magazine -->
    <div class='post-body entry-content'>
    <div expr:id='"original-" + data:post.id'>
    CONTENIDO ORIGINAL DEL POST
    </div>
    <div style='clear: both;'/>
    </div>
    <script type='text/javascript'>
    // enviar el ID generado por Blogger <data:post.id/>
    // enviar el contenido HTML del post <data:post.body/>
    ejecutarExtracto(&#39;<data:post.id/>&#39;,&#39;<data:post.body/>&#39;);
    </script>
    </b:if>
    La gran diferencia es que usamos esta condición:

    <b:if cond='data:blog.url != data:blog.homepageUrl'>

    que es la que nos permite diferenciar la página de inicio del cualquier otra página de nuestro blog.

    Como quiero que las páginas con listas (Archivos, Etiquetas, Navegación, Búsqueda) se muestren resumidas, vamos a agregarle el hack de PeekABooPost tal como lo que explica El escaparate de Rosa


    Buscamos esto:

    <b:includable id='main' var='top'>

    y justo encima, agregamos el código:
    <b:includable id='PeekABooPost' var='post'>
    <div class='post uncustomized-post-template'>
    <table class='listaArchivos'>
    <tr>
    <td class='masmenos'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer esta entrada'>[+/-]</a></td>
    <td class='titulo'><a expr:href='data:post.url'><data:post.title/></a></td>
    </tr>
    </table>
    <div class='post-body entry-content' expr:id='data:post.id' style='display:none'>
    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    </div>
    </b:includable>
    Seguimos allí y más abajo, eliminaremos esta línea:

    <b:include data='top' name='status-message'/>

    Por último, reemplazaremos esta línea:

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

    por este otro código:
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include data='post' name='PeekABooPost'/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    Bien, si seguimos cuerdos, podemos continuar; la parte más engorrosa ha terminado. Ahora, sólo nos queda agregar el CSS y los scripts, justo antes de </head>
    <style>
    /* ocultar el contenido dinamico de las entradas */
    /* este dato dependerá de la plantilla y puede tener otro ID */
    #HTML1 {display:none;}
    </style>

    <!-- estableceremos estilos diferentes para home y el resto del blog -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style>
    /* los estilos para la pagina principal estilo magazine */
    .post {
    -moz-border-radius: 10px;
    border: 2px solid DarkGray;
    float: left;
    font-family: Verdana;
    height: 190px; /* la altura de los extractos es fija */
    margin: 0 5px 10px;
    overflow: hidden;
    padding: 10px;
    width: 275px; /* habrá tres extractos en el ancho */
    }
    .post h3 a, .post h3 a:visited {/* propiedades de los títulos */ }
    .post img {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 5px 0 0;
    }
    h2.date-header {display: none;} /* ocultamos la fecha que pone Blogger */
    .post-footer { /* propiedades del footer */ }
    /* los cambios de la sidebar */
    #main-wrapper { /* le damos ancho y eliminamos la flotación para que se muestre abajo */
    float: none;
    width: 930px;
    }
    #sidebar-wrapper {
    float: left;
    margin: 20px 0 0 25px;
    overflow: hidden;
    padding: 0;
    width: 930px;
    }
    .sidebar .widget { /* definimos las propeidades de cada elemento */
    float: left;
    margin: 10px;
    padding: 10px;
    width: 270px; /* el ancho de cada elemento (en este caso hay sólo tres) */
    }
    </style>
    <b:else/>
    <style>
    /* los estilos para el resto de las paginas */
    .extractoOculto {display:none;} /* ocultamos los extractos de las entradas */
    /* los estilos para listas de archivos */
    .post table.listaArchivos { /* la tabla que contiene el hack */ }
    .post table.listaArchivos td.masmenos { /* la celda para expandir/colapsar */ }
    .post table.listaArchivos td.titulo { /* la celda del título */ }
    </style>
    </b:if>

    <script type='text/javascript'>
    //<!--[CDATA[

    function leerExtractoPOST(cadena) {
    // llega con una cadena (bodyPOST) con el HTML del post procesado
    // y la devuelve procesada extrayendo el contenido
    // busca la secuencia del DIV con el extracto oculto (28 caracteres)
    var verificar = cadena.indexOf('<div class=\"extractoOculto\">');
    if (verificar != -1) {
    // si encuentra el DIV con el extracto oculto busca la secuencia final
    var hasta = cadena.indexOf('</div>');
    // y extra el contenido
    cadena = cadena.substr(28,hasta-28);
    } else {
    // si no encuentra el DIV con el extracto oculto VEREMOS
    // alert ("ERROR");
    }
    return cadena;
    }

    function ejecutarExtracto(idPOST,bodyPOST) {
    // llega con idPOST que es el ID generado por Blogger
    // llega con bodyPOST que es el contenido HTML del post

    // la funcion verifica que haya un extracto y devuelve una cadena HTML
    bodyPOST = leerExtractoPOST(bodyPOST);
    // lo que se va a escribir es el contenido del extracto
    var divPOST = "original-" + idPOST; // el DIV del post normal
    document.getElementById(divPOST).innerHTML = bodyPOST;
    }

    function toggleIt(id) {
    // la funcion del hack PeekABooPost
    post = document.getElementById(id);
    if (post.style.display != 'none') {
    post.style.display = 'none';
    } else {
    post.style.display = '';
    }
    }

    //]]-->
    </script>


    Un último esfuerzo para tener más opciones. Vamos a agregar script más, nos vamos al final de nuestra plantilla y justo antes de </body> colocaremos la función que nos permitirá mostrar contenidos variables en la sidebar:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    if (document.getElementById('contenedorOculto') != null) {
    var copiarContenido=document.getElementById('contenedorOculto').innerHTML;
    document.getElementById('contenedorDinamico').innerHTML=copiarContenido;
    document.getElementById('HTML1').style.display='block';
    }
    //]]>
    </script>
    </b:if>
    Como ya dije, para simplificar las cosas, la plantilla ejemplo está disponible para ser descargada en formato ZIP

    Vamos a ver cómo debemos usarla.

    Una parte, el extracto, es exactamente igual que el que usamos antes (más información). El extracto es lo que se verá en la página principal en lugar del post. Basta colocarlo al inicio de las entradas, entre etiquetas DIV que tengan la clase extractoOculto.

    Para que el estilo magazine funcione correctamente, las entradas deberán incluir ese DIV, caso contrario, se mostrará el contenido normal, cortado, ya que la altura de esos rectángulos es fija.

    Por el contrario, el contenido dinámico es optativo. Ese contenido es el que se mostrará sólo en la sidebar cuando veamos la entrada individual y lo agregamos de modo similar, por ejemplo, al final del post, en un DIV con la clase contenedorOculto.

    Un ejemplo de un post con ese contenido puede verse en esta entrada y el código tiene esta estructura:
    <div class="extractoOculto"><img src="URL_imagen" />Este es el contenido del extracto.</div>
    ....... el resto del post .......
    <div id="contenedorOculto" style="display:none;">Este es un contenido exclusivo de la entrada.</div>

    REFERENCIAS:
  • Magazine Parte 1
  • Magazine Parte 2
  • Magazine Parte 3
  • Actualizar los navegadores

    En lo personal, creo que los usuarios deben usar el navegador que les resulte más cómodo y punto. Da lo mismo uno que otro y no creo que haya que promocionar este o aquel; en definitiva, todos serán tan útiles o inútiles como quien los maneje y basta saber las limitaciones de cada uno para poder sacarles el máximo beneficio (comparativa de navegadores).

    También creo que las páginas web deben adaptarse a ese surtido y no al revés a menos que se quiera excluir a ciertos usuarios. Si eso se hace de manera deliberada, podrá ser una decisión discutible pero aceptable; si eso se hace porque no nos damos cuenta o no nos importa, habrá que tomar medidas para solucionarlo ... dentro de lo posible, claro.

    Es cierto que los navegadores no muestran las cosas de la misma manera y que entre Internet Explorer y el resto hay diferencias sustantivas ya que, simplemente, utilizan un criterio distinto para ciertas cosas. No sé ni me importa cuál de esos criterios es el razonable, probablemente ambos y, en todo caso, deberían ponerse de acuerdo para no complicarnos la vida pero, eso ya no depende de nosotros.

    ¿Es posible hacer que un sitio web se vea igual en TODOS los navegadores? Sí y no ... en realidad, depende del sitio del que hablemos. A medida que las páginas se vuelven más complejas, los problemas aumentan y entonces, muchas veces se debe recurrir a incorporar propiedades CSS especiales o una hoja de estilo diferente (más información).

    En realidad, muchas veces, este tipo de hack para tal o cual versión es sólo una manera rápida de solucionar un problema que no comprendemos y que tiene alguna otra solución posible. Otras veces, parece casi inevitable ya que hay ciertas diferencias que son irreconciliables y tratar de compatibilizar las cosas es como luchar contra el viento.

    Aún así, aún entendiendo esas diferencias, hay algo evidente con lo que debemos lidiar y que nos afecta mucho más. Los navegadores no sólo son diferentes entre si sino que sus versiones difieren unas de otras. El caso paradigmático es Internet Explorer 6 que fue lanzado en agosto del 2001 y que tuvo dos correcciones importantes en el 2002 y en el 2004.

    Con ese simple dato nos daremos cuenta de dónde está el problema ... IE6 tiene unos siete años de antigüedad y siete años en la web es equivalente a varios siglos en la vida real ¿Una prueba? en el 2001 comienza a existir la Wikipedia, se lanza Windows XP, no existe YouTube, no existe WordPress, Blogger es apenas un experimento de garage. No hay servicios online, internet es "algo raro" y quienes la usan son más raros aún.

    Años después, en octubre del 2006 sale una nueva versión: IE7, con todos los problemas que quieran pero resuelve sustancialemente muchas de las limitaciones de la versión anterior ¿y qué ocurre? Nada. A diferencia de lo que pasa con otros navegadores, los usuarios se resisten a usarlo y si bien al inicio había razones para eso (se verificaba la legalidad del sistema operativo), hace ya mucho que Microsoft se dio cuenta que esa era una mala decisión y liberó la descarga. Pasaron casi dos años y, hasta hace poco, la versión 6 seguía siendo la más utilizada con todos los problemas que eso acarrea. En el 2007, el 50% de los usuarios tenía IE6 y sólo el 29% utilizaba IE7.

    Desde hace tiempo, los desarrolladores vienen tratando de imponer una idea: Mandar de paseo a IE6 y eliminar cualquier hack para que funcione.

    ¿Es razonable hacer eso?

    Es subjetivo. En la práctica, no tengo idea de cómo se ve un sitio con IE6, no lo uso y ante cualquier consulta sobre el tema contesto siempre lo mismo: ¡actualicen el navegador! Y esto no es un problema de gustos, es que termina siendo una pérdida de tiempo tener que lidiar con algo que, desde el punto de vista tecnológico es una reliquia.

    Es cierto, podríamos instalar múltiples versiones de IE en Windows pero no vale la pena y no resolvería nada. Terminaríamos probando códigos al azar a ver qué ocurre y el resultado sería siempre malo.

    El tiempo no pasa en vano, hace ya casi un año que comenzaron a lanzarse versiones de IE8 y es muy probable que este año ya esté disponible para su descarga. No hay, en este momento, ningún motivo valedero para no actualizar el navegador que estemos usando. Se trata de simple lógica. Por suerte, las cosas parecen estar cambiando, tarde, muy tarde, casi demasiado tarde pero ... más vale tarde que nunca.


    Click para descargar las versiones desde el sitio oficial de Microsoft.

    La Notebook


    Una animación de Evelien Lohbeck

    REFERENCIAS:
  • arturogoga.com
  • Animalimagenes

    Detrás del vidrio.


    Formula 1.


    Empollando perros.


    En pose para la foto.


    Los dueños de la pelota.


    Problemas de mudanza.


    La fiaca.

    Wallpapers (animados e interactivos)

    artDIGITALdesign.com es un sitio con wallpapers de todo tipo y entre ellos hay una serie bastante particular llamada wallpapers animados.

    No creo que sean muy recomendables para tener allí, delante de nuestros ojos pero, no dejan de ser curiosos.


    Realistic watter effectWaterfall LandscapeChristmas holiday gifts
    Click en las imágenes para ver una demostración.

    Aún más curiosos son los wallpapers interactivos:

    Underwater worldScatter EffectCubes game
    Click en las imágenes para ver una demostración.

    Servicios gratuitos de hosting

    Esta es una lista de los mejores servicios de hosting gratuitos y sin publicidad, aparecida en Sizlopedia:

    000webhost provee 1500MB de espacio disponible, 100GB de transferencia, PHP y soporte para bases de datos MySQL, control completo via cPanel, autoinstalador de Drupal, Joomla, Xoops, WordPress y otros servicios así como un constructor de sitios usando plantillas prediseñadas (más información)

    110MB Hosting provee 5GB de espacio disponible, 300GB de ancho de banda, PHP y soporte para MySQL, FTP, subdominios gratuitos (tipo nombre.110mb.com), creación de sitios utilizando plantillas, autoinstalación de scripts (más información)

    SitesFree provee 500MB de espacio, 7GB de transferencia, soporte para PHP y MySQL, acceso via FTP, subdomios gratuitos (tipo nombre.sitesfree.com)

    Zymic provee 5GB de espacio, 50GB de transferencia, soporte para PHP, bases de datos MySQL y acceso FTP (más información)

    YourFreeHosting provee 5GB de espacio, 50GB de transferencia, soporte para PHP, MySQL, acceso FTP, creación de subdminios gratuitos (tipo nombre.yourfreehosting.net)

    Doteasy provee 100MB de espacio en el disco, 1GB de ancho de banda, creación de páginas utilizando plantillas, panel de control online.

    ZendFree provee 100MB de espacio, 1GB de ancho de banda, acceso FTP un subdominio gratuito (más información)

    Awardspace provee 200MB de espacio en el disco, 5GB de transferencia, posibiliad de hospedar dos dominios y cinco subdominios, soporte PHP, Perl/CGI-BIN, MySQL, panel de control online (más información)

    ByetHost provee 5500MB de espacio en el disco, 200 GB de transferencia, acceso FTP, MySQL, creación de subdominios gratuitos (más información)

    Juice: Sacándole jugo a Firefox

    Explicar que es Juice es un poco complicado porque lo mejor es verlo en funcionamiento. Básicamente, es una extensión para Firefox que nos permite guardar o buscar contenido web desde cualquier sitio, seleccionando algo y arrastrándolo.

    Como curiosidad, la extensión es de origen chino y se dice que forma parte de la distribucióin estandard de Firefox en ese idioma.

    Click para ver el video.

    ¿Cómo podemos usarlo? Simplemente seleccionando algo y arrastrándolo un poco, el resultado variará según sea lo que hayamos seleccionado. Por ejemplo, si se trata de una palabra, se abrirá la sidebar con toda la información que se haya encontradado. Puede ser que se nos muestren noticias o artículos relacionados, videos encontrados, entradas en la Wikipedia o como minimo, los resultados de Google o el buscador que hayamos colocado por defecto.


    De manera similar podemos hacer tanto con las imágenes como con los videos:


    Los videos permanecerán guardados para que podamos verlos en cualquier otro momento y para ver las imágenes reales, basta hacer doble click en las miniaturas:


    Vale la pena darle una mirada porque puede ser una herramienta muy útil.

    REFERENCIAS:
  • ZonaFirefox
  • 8 Técnicas para crear esquinas con CSS

    3D Raised

    Esquinas redondeadas con bordes salientes.


    <style type="text/css">
    .raised {background: transparent; width:40%; margin:0 auto;}
    .raised h1, .raised p {margin:0 10px;}
    .raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
    .raised p {padding-bottom:0.5em;}
    .raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
    .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
    .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
    .raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
    .raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
    .raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
    .raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
    .raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
    .raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
    .raised .b1 {margin:0 5px; background:#fff;}
    .raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
    .raised .b3, .raised .b3b {margin:0 2px;}
    .raised .b4, .raised .b4b {height:2px; margin:0 1px;}
    .raised .b1b {margin:0 5px; background:#999;}
    .raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
    </style>

    <div class="raised">
    <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
    <div class="boxcontent">
    <h1>3D Raised</h1>
    <p>Esquinas redondeadas con bordes salientes.</p>
    </div>
    <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
    </div>

    3D Inset

    Esquinas redondeadas con bordes entrantes.


    <style type="text/css">
    .inset {background: transparent; width:40%; margin:0 auto;}
    .inset h1, .inset p {margin:0 10px;}
    .inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
    .inset p {padding-bottom:0.5em;}
    .inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
    .inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
    .inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
    .inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
    .inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
    .inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
    .inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
    .inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
    .inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
    .inset .b1 {margin:0 5px; background:#999;}
    .inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
    .inset .b3, .inset .b3b {margin:0 2px;}
    .inset .b4, .inset .b4b {height:2px; margin:0 1px;}
    .inset .b1b {margin:0 5px; background:#fff;}
    .inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
    </style>

    <div class="inset">
    <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
    <div class="boxcontent">
    <h1>3D Inset</h1>
    <p>Esquinas redondeadas con bordes entrantes.</p>
    </div>
    <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
    </div>

    Chamfer Border

    Bordes a 45 grados.


    <style type="text/css">
    .chamfer {background: transparent; width:40%; margin:0 auto;}
    .chamfer h1, .chamfer p {margin:0 10px;}
    .chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
    .chamfer p {padding-bottom:0.5em;}
    .chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
    .chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
    .chamfer .b1 {margin:0 5px; background:#000;}
    .chamfer .b2 {margin:0 4px;}
    .chamfer .b3 {margin:0 3px;}
    .chamfer .b4 {margin:0 2px;}
    .chamfer .b5 {margin:0 1px;}
    .chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
    </style>

    <div class="chamfer">
    <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
    <div class="boxcontent">
    <h1>Chamfer Border</h1>
    <p>Bordes a 45 grados.</p>
    </div>
    <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
    </div>

    Square cutout Border

    Bordes recortados 1.


    <style type="text/css">
    .square {background: transparent; width:40%; margin:0 auto;}
    .square h1, .square p {margin:0 10px;}
    .square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
    .square p {padding-bottom:0.5em;}
    .square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
    .square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
    .square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
    .square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}
    .square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}
    </style>

    <div class="square">
    <b class="top"><b class="b1t"></b><b class="b2"></b></b>
    <div class="boxcontent">
    <h1>Square cutout Border</h1>
    <p>Bordes recortados 1.</p>
    </div>
    <b class="bottom"><b class="b2"></b><b class="b1b"></b></b>
    </div>

    Curved cutout Border

    Bordes recortados 2.


    <style type="text/css">
    .curved {background: transparent; width:40%; margin:0 auto;}
    .curved h1, .curved p {margin:0 10px;}
    .curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}
    .curved p {padding-bottom:0.5em;}
    .curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}
    .curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;}
    .curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
    .curved .b1 {margin:0 4px; background:#fff;}
    .curved .b2 {margin:0 4px; height:2px;}
    .curved .b3 {margin:0 3px;}
    .curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}
    .curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}
    </style>

    <div class="curved">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    <h1>Curved cutout Border</h1>
    <p>A Bordes recortados 2.</p>
    </div>
    <b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
    </div>

    Flared shape

    Esquinas con efecto serif.


    <style type="text/css">
    .serif {background: transparent; width:40%; margin:0 auto;}
    .serif h1, .serif p {margin:0 10px;}
    .serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}
    .serif p {padding-bottom:0.5em;}
    .serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}
    .serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}
    .serif .b1, .serif .b2, .serif .b3 {height:1px;}
    .serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
    .serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
    .serif .b1 {margin:0; background:#fff;}
    .serif .b2 {margin:0 1px; border-width:0 2px;}
    .serif .b3 {margin:0 3px;}
    .serif .b4 {height:2px; margin:0 4px;}
    .serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
    </style>

    <div class="serif">
    <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
    <div class="boxcontent">
    <h1>Flared shape</h1>
    <p>Esquinas con efecto serif.</p>
    </div>
    <b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
    </div>

    Pillar shape

    Esquinas con efecto pilar.


    <style type="text/css">
    .pillar {background: transparent; width:40%; margin:0 auto;}
    .pillar h1, .pillar p {margin:0 10px;}
    .pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}
    .pillar p {padding-bottom:0.5em;}
    .pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}
    .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}
    .pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
    .pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
    .pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}
    .pillar .b1 {margin:0 2px; background:#fff;}
    .pillar .b2 {margin:0 1px; border-width:0 1px;}
    .pillar .b3 {height:2px; margin:0;}
    .pillar .b4 {margin:0 2px;}
    .pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
    </style>

    <div class="pillar">
    <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b></b>
    <div class="boxcontent">
    <h1>Pillar shape</h1>
    <p>Esquinas con efecto pilar.</p>
    </div>
    <b class="bottom"><b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
    </div>

    Barrel shape

    Bordes estilo barril.


    <style type="text/css">
    .barrel {background: transparent; width:40%; margin:0 auto;}
    .barrel h1, .barrel p {margin:0 10px;}
    .barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}
    .barrel p {padding-bottom:0.5em;}
    .barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}
    .barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}
    .barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}
    .barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}
    .barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}
    .barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}
    .barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}
    .barrel .b1 {margin:0 33%;}
    .barrel .b2 {margin:0 20%;}
    .barrel .b3 {margin:0 12%;}
    .barrel .b4 {margin:0 5%;}
    .barrel .b5 {margin:0 1px;}
    .barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}
    </style>

    <div class="barrel">
    <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
    <div class="boxcontent">
    <h1>Barrel shape</h1>
    <p>Bordes estilo barril.</p>
    </div>
    <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
    </div>

    REFERENCIAS:
  • CSSplay
  • Jugando con los posts (Magazine 3)

    Y seguimos con el magazine, este estilo de plantilla que se ha hecho popular en WordPress.

    No cabe duda, cuando vemos uno de los demos de ese tipo de plantillas, nos asombramos, salen del esquema normal de un blog y es probable que eso sea lo que nos llama la atención. Deja de ser una sucesión de entradas una debajo de la otra, se parecen ... a un sitio "normal" sorpresa1

    Y tal vez el punto clave venga por ese lado. Un blog es un blog. Un blog no es una página web común y en esas diferencias están sus pros y sus contras. Tal vez, bajo ciertas condiciones y con ciertos contenidos, este formato magazine sea útil pero no siempre porque devirtua la escencia misma del blog y esto no es ni malo ni bueno, sólo es distinto.

    De todas manera, como cualquier herramienta, abre posibilidades que pueden explorarse aunque en Blogger, las limitaciones son muchas.

    A mi juicio, un tema tipo magazine no está definido porque las entradas se muestren resumidas y en varias columnas. Un tema tipo magazine tiene una característica especial que es la que podemos ver en cualquier portal de noticia: en la página principal (en relativamente poco espacio) se muestran los títulos de los últimos artículos, un copete o bajada que nos da una idea del contenido de cada uno de ellos, otros artículos destacados y cierto contenido dinámico auxiliar en alguna sidebar (videos, galería de imágenes, etc).

    Todo eso, hace que, utilizar alguna plantilla de este tipo en el mismo WordPress, con todas sus ventajas, no sea sencillo; implica pensar la diagramación, agregar datos extras para que la plantilla los interprete, colocar imágenes especiales, etc, etc, etc. Obviamente, cuanto más sofisticada sea, más cosas habrá que tener en cuenta pero, siempre es posible resignar funcionalidades y simplificar las cosas.

    Sigo creyendo que en Blogger el tema es complejo si es que queremos sacarle el máximo partido y avanzar un poco más, no limitarnos a cortar el post en cierto punto sino pensarlo desde cero para que las entradas se muestren de dos maneras diferentes y no sólo gráficamente, sino también su contenido.

    Partiendo de eso, entonces, vamos a ver qué posibilidades nos quedan ... pocas, es cierto.

    La idea es: escribo un post, cualquiera, tiene videos, imágenes, lo que se me ocurra. Si uso un modelo magazine con algún sistema tipo Leer Más, tendré que armarlo de alguna manera para que lo que se muestre en la página principal no descalabre todo. Puede hacerse, hay que pensarlo pero, prefiero no hacerlo porque es demasiado trabajo y no siempre conseguiré algo razonable. Prefiero buscar una forma de agregarle a ese post, algo que me sirva de "copete/bajada" un extracto especial, algo que sólo veré allí y no en la entrada individual.

    Voy a hacer lo siguiente, colocaré ese extracto al inicio de mi entrada, en un bloque DIV al que le daré una clase:
    <div class="extractoOculto">
    Este es el contenido del extracto o resumen oculto de la entrada.
    </div>
    ..........
    y aquí colocaré el post "normal"
    Ahora, modificaré la plantilla y me baso en la misma que en los casos anteriores, una plantilla mínima.

    Expandimos los artilugios y buscamos el área donde se muestran los posts:
    <div class='post-body entry-content'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    Vamos a cambiar ese código por este otro:
    <b:if cond='data:blog.pageType == "item"'>
    <!-- en una página individual no hay cambios -->
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    <b:else/>
    <!-- extracto para la página principal -->
    <div class='post-body entry-content'>
    <div expr:id='&quot;original-&quot; + data:post.id'>
    AQUI IRIA EL CONTENIDO ORIGINAL DEL POST
    </div>
    <div style='clear: both;'/>
    </div>
    <!-- ejecutar función JavaScript -->
    <script type='text/javascript'>
    // enviará el ID generado por Blogger (data:post.id)
    // enviará el contenido HTML del post (data:post.body)
    ejecutarExtracto(&#39;<data:post.id/>&#39;,&#39;<data:post.body/>&#39;);
    </script>
    </b:if>
    ¿Qué hemos hecho? Usamos los condicionales para saber si estamos en una página individual (y en ese caso no hacemos nada) o si estamos en la página principal que es donde queremos cambiar las cosas.

    El dato <data:post.body/> es el que contiene el código HTML del post y, en lugar de mostrarlo, vamos a guardarlo y utilizar JavaScript para "analizarlo", cambiarlo y recién luego, escribirlo.

    Pondremos ahora el CSS al igual que hicimos antes, justo antes de </head>:
    <b:if cond='data:blog.pageType != "item"'>
    <style>
    /* las propiedades de las entradas en la página principal */
    .post {
    background-color: #FAF5FF;
    border-bottom: 10px solid #FFFFFF;
    float: left;
    height: 190px; /* el alto es fijo */
    margin: 0 10px;
    overflow: hidden; /* evitamos barras en caso de error */
    width: 310px; /* el ancho es la mitad de una entrada normal */
    }
    .post img {
    float: left;
    height: 100px;
    margin: 0 5px 0 0;
    width: 100px;
    }
    </style>
    <b:else/>
    <style>
    /* ocultamos el extracto en las páginas individuales */
    .extractoOculto {display:none;}
    </style>
    </b:if>
    Inmediatamente debajo de eso, agregamos las funciones del script:
    <script type='text/javascript'>
    //<![CDATA[

    // llega con el ID del post y una cadena con el contenido HTML
    function ejecutarExtracto(idPOST,bodyPOST) {
    // verifica que haya un extracto y devuelve una cadena HTML con ese extracto
    bodyPOST = leerExtractoPOST(bodyPOST);
    // lo que se escribe es el contenido del extracto
    var divPOST = "original-" + idPOST; // el DIV del post normal
    document.getElementById(divPOST).innerHTML = bodyPOST;
    }

    // toma la cadena con el HTML del post y devuelve otra con el extracto
    function leerExtractoPOST(cadena) {
    // busca la secuencia del DIV con el extracto oculto (28 caracteres)
    var verificar = cadena.indexOf('<div class=\"extractoOculto\">');
    if (verificar != -1) {
    // si encuentra el DIV con el extracto oculto busca la secuencia final
    var hasta = cadena.indexOf('</div>');
    // y extra el contenido
    cadena = cadena.substr(28,hasta-28);
    } else {
    // si no encuentra el DIV con el extracto oculto ... muestra una ventana de error
    alert ("ERROR");
    }
    return cadena;
    }

    //]]>
    </script>
    Lo del error es sólo una advertencia, si no hay un extracto, el post se mostrará completo y como la altura es fija, se cortará automáticamente.

    Y eso es todo. Un ejemplo de esto es el que puede verse en este demo online.

    A mi entender, habría que resolver dos cosas más, la primera es tratar que este tipo de formato se muestre en la página principal exclusivamente y no en otro tipo de páginas con listas como Archivos, Búsqueda o cuando avanzamos o retrocedemos con la barra de navegacion inferior del blog. Este es un tema complejo y no sé si tiene solución.

    El otro punto que sería interesante es ver si existe la posibilidad de agregar contenido dinámico, es decir, realizar el proceso inverso, tener en el post algún tipo de información extra que no se vea en la página principal y tampoco en las páginas individuales sino que se ubique en alguna otra parte del blog, por ejemplo en la sidebar.

    REFERENCIAS:
  • Magazine Parte 1
  • Magazine Parte 2
  • De ratones y otros roedores




    Jugando con los posts (Magazine 2)

    Seguimos con la idea de Blogger estilo magazine.

    El problema con que nos topábamos era la necesidad de establecer una altura común a todos los posts ¿Podría establecerse una altura fija, colocar un texto visible y ocultar el resto? Claro, eso es lo que nos aconsejan y podemos hacerlo manualmente o bien utilizando alguna variante del script Leer Más que usábamos para expandir y contraer las entradas. Y digo una variante porque aquí no necesitamos del script en si mismo ya que no vamos a expandirlos sino, simplemente, ocultar una parte del contenido.

    Entonces, vamos otra vez a la plantilla, expandimos los artilugios y buscamos algo similar a esto:
    <div class='post-body entry-content'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    Como las plantillas varian mucho, lo lógico es usar una plantilla mínima para practicar y luego, ver si encontramos los códigos en las otras. La clave, de ahora en adelante, es encontrar el código que escribe los posts y para eso, nos debemos guiar por este dato: <data:post.body/>

    Vamos a cambiar ese código por este otro:
    <div class='post-body entry-content'>
    <b:if cond='data:blog.pageType == "item"'>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
    <b:else/>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
    <span class='leermas'>
    <a target='_blank' expr:href='data:post.url'>Leer Más ...</a>
    </span>
    </b:if>

    </div>
    Lo que estamos haciendo es usar los condicionales para mostrar los posts de dos maneras diferentes; si estamos en una entrada individual, no hacemos nada pero, si estamos en la página principal, le agregamos, debajo de cada uno de ellos, un enlace que en este caso dirá Leer Más y que apunta a la entrada correspondiente. Al hacer click allí, se abrirá el post completo en otra pestaña.

    ¿Y cómo ocultamos el contenido del post? Bueno, ahí ya tenemos que hacerlo manualmente. Al igual que hacemos con los posts expandibles, debemos agregar una etiqueta que oculte cierta parte del contenido, eso lo hacemos de la siguiente forma:
    el contenido visible del post
    <span id="fullpost">
    el contenido oculto del post
    </span>
    y si queremos automatizarlo un poco, agregamos eso mismo en CONFIGURACIÓN | FORMATO, dentro el cuadro Plantilla de entrada.

    Lo único que faltaría sería poner el CSS correspondiente que, en este caso, sería algo así:
    <b:if cond='data:blog.pageType != "item"'>
    <style>
    .post {
    background-color: #FAF5FF;
    border-bottom: 10px solid #FFFFFF;
    float: left;
    height: 220px; /* la altura fija de todas las entradas */
    margin: 0 10px;
    overflow: hidden;
    width: 310px;
    }
    .fullpost { /* esto ocultará parte del contenido */
    display:none;
    }
    .leermas { /* las propiedades del enlace con el texto Leer Más */
    clear:both;
    display:block;
    text-align: right;
    }
    </style>
    </b:if>
    Bueno. Hay que decir la verdad. Eso, no es todo.

    De aquí en más, deberemos tener una serie de cuidados al escribir un post ya que lo que ocurre con este tipo de técnicas es que limitan las cosas que podemos hacer o bien, nos obligan a tener en cuenta el tipo de contenido para que el blog no se distorsione.

    Primero que nada ¿qué pasa con las imágenes? Si están ocultas, no hay problema pero, ¿y si están visibles? Las posibilidades son varias:

    Podemos forzar a que directamente no se vean agregando la definición dentro del CSS anterior:
    .post img {display: none:}

    Podemos forzar a que se redimensionen agregando:
    .post img {height: 100px; width: 100px;}

    Podemos forzar a que se redimensionen y floten agregando:
    .post img {float: left; height: 100px; padding: 0 10px 0 0; width: 100px;}

    En la mayoría de estos casos, deberemos modificar el código que coloca Blogger cuando insertamos imágenes ya que en ese código se establece la dimensión así que el CSS no funcionaría.

    También podemos preveer estas situaciones y usar sólo imágenes de cierto tamaño, pensando cómo se verá eso que escribimos en un ancho más pequeño de lo normal pero no será suficiente porque se nos seguirán presentando alternativas que no podemos contemplar; por ejemplo, ¿qué pasa con los videos? Podríamos hacer más o menos lo mismo, redimensionarlos agregando algo así como:

    .post object, .post embed {width: 150px; height: 120px;}

    Un ejemplo con algunas de esas características es el que puede verse en este ejemplo online.

    ¿Y si usamos tablas? ¿Y si tenemos DIVs con medidas fijas? ¿Y si los párrafos están justificados y en un ancho tan pequeño aparecen espacios enormes entre las palabras? Sí. Podemos resolverlo pero habrá que hacerlo todo manualmente y cada tanto, se nos presentarán dificultades o condiciones en las que no habíamos pensado.

    A todo esto, yo le sumaría un problema no visible. Ocultar el contenido no hace que ese contenido no sea cargado, es invisible pero está ahí por lo tanto, la carga del blog no es menor, es igual o, eventualmente, más pesada así que si alguien cree que esta es una solución para el tiempo de carga, se equivoca.

    Este tipo plantillas, como cualquier otra, tiene un uso específico y no cualquier blog podrá adaptarse con sencillez. Si el blog es básicamente textos, no habrá problemas; si utiliza características multimedia, será más complejo de controlar y esto no es sólo por las limitaciones del mismo Blogger; un blog de WordPress de tipo magazine requerirá que cada post tenga ciertas característica y nos exigirá que agreguemos algunos datos o hagamos las cosas de cierta manera para evitar que se descompagine.

    Sin embargo, WordPress posee varios métodos para lidiar con este tipo de idea. Esto que se muestra hasta acá podría ser similar a lo que se llama MORE, es decir, un corte manual, hecho por nosotros mismos. Otra posibilidad es mostrar un resumen automático de cierta cantidad de palabras (sólo de palabras), un resumen que es un texto plano, que no tiene contenido HTML (ni formatos ni imágenes ni objetos); esa característica es bastante compleja de reproducir en Blogger ya que sólo disponemos de JavaScript como lenguaje.

    Una última posibilidad es la llamada EXTRACTO.

    Un extracto es un texto que uno agrega a una entrada pero que no es parte de la entrada, sólo se muestra en la página principal o en las páginas donde se listan entradas pero no en las páginas individuales ¿Para que sirve? Para olvidarnos del contenido del post y no tener que lidiar con él. Sea cual sea su contenido, el resumen que se mostrará es independiente de este, lo escribimos en otro lado.

    ¿Será posible crear en Blogger un extracto de las entradas que no cargue el post entero?... Oh, sí, se puede.

    Jugando con los posts (Magazine 1)

    Esto comenzó como curiosidad y luego fue ampliándose tanto que terminé por dividirlo en tres partes, como si fuera una novela de misterio así que, un poco de paciencia verguenza

    Hace ya un mes o más, Gem@ me mostraba un truco que había visto en Blogger Buster, donde se explicaba la forma de crear algo similar a una de esas plantillas que están tan de moda en WordPress y que, genéricamente, se denominan tipo magazine.

    Luego de varios intentos infructuosos, renunciamos al asunto, no tanto porque no funcionara sino porque su uso terminaba siendo bastante limitado pero ... año nuevo vida nueva así que vamos otra vez a la carga a ver hasta dónde es posible llegar risa

    Para guiarme en el tema, prefiero la entrada de Ariane en Templates Novo Blogger por varias razones, porque me resulta más clara y además, porque recientemente la han ampliado y además, nos dan la plantilla demo para descargar.

    La idea, entonces, es empezar desde ahí y ver las dificultades que tiene este tipo de plantilla y las alternativas que ofrece.

    Comienzo entonces con la plantilla mínima modificada en su ancho. Para eso, recurro al tutorial que muestra cómo hacerlo o bien, cambio las dos o tres definiciones CSS directamente:

    en #header-wrapper, #outer-wrapper y #footer-wrapper cambiamos el ancho y escribimos width: 980px;
    en #main-wrapper usamos width: 560px;
    en #sidebar-wrapper usamos width: 390px;

    Lo primero será eliminar la fecha de los posts. Esto, lo hacemos porque sino, se nos hará difícil de manejar esa parte ya que Blogger la separa del resto; luego, veremos si hay otra alternativa. Entonces, expandimos los artilugios, buscamos esta parte y eliminamos (o comentamos) las lineas en negrita:
    <b:loop values='data:posts' var='post'>

    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>


    <b:include data='post' name='post'/>
    Ahora, sólo nos queda modificar una cosa: el ancho de los posts que, en realidad, no están definidos en ninguna parte. Como todo en el blog, el área de posts es un rectángulo, un DIV que está dentro de otro y el ancho es definido por alguno de los "elementos padre". En la plantilla mínima pasa esto:
    <div id="main-wrapper">
    <b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog">
    <div class="blog-posts hfeed">
    <div class="post hentry uncustomized-post-template">
    ....... aqui se muestra el post .......
    El ancho de los posts es igual al ancho de main-wrapper pero, podemos modificarlo y, por ejemplo establecer que su ancho sea la mitad; de esta manera, como flotan, aparecerán uno al lado del otro en lugar de uno debajo del otro. Pero, esto lo queremos hacer sólo en la página principal y no en las entradas individuales así que lo más sencillo es usar los condicionales y agregar el estilo CSS, justo después de </b:skin>. Por ejemplo:
    <b:if cond='data:blog.pageType != "item"'>
    <style type='text/css'>
    .post {
    background-color: #FAF5FF;
    border-bottom: 10px solid #FFFFFF;
    float: left;
    margin: 0 10px;
    overflow: hidden;
    width: 310px; /* este es el dato importante */
    }
    </style>
    </b:if>
    Si no hacemos nada más, lo que veremos, será esto.

    Con facilidad, podemos colocar un post al lado del otro pero, si no hacemos algo más, el resultado será extraño porque las alturas de cada entrada son variables y el resultado será bastante aleatorio así que el punto fundamental de este tipo de plantillas es que debemos controlar esa altura, debemos establecerla nosotros mismos para que cada rectángulo sea igual al otro, sin importar el contenido. Entonces, podríamos cambiar un poco el estilo CSS anterior, indicar la altura (height) y, para evitar que se corte, poner una barra de desplazamiento lateral:
    .post {
    background-color: #FAF5FF;
    border-bottom: 10px solid #FFFFFF;
    float:left;
    height: 200px;
    margin: 0 10px;
    overflow-x: hidden;
    overflow-y: scroll;

    width: 310px;
    }
    El resultado será un poco mejor pero, bastante primitivo así que habrá que seguir pensando. (ver ejemplo online)

    Respiramos y vamos con la segunda parte ...

    WUBeee: Un experimento increible

    Cuando SpamLoco me mostró este "coso" me gustó pero, cuando me aclaró que sólo estaba hecho con JavaScript quedé maravillado (ver web original).

    El código parece haber sido creado por Gerard Ferrandez, un desorrollador especializado en Dynamic HTML (HTML + CSS + JavaScript) y que tiene una serie de experimentos interactivos que pueden verse en dhteumeuleu.com, un lugar que recomiendo recorrer para darse cuenta que las posibilidades a veces son infinitas y que muchas de ellas sólo dependen de nuestra imaginación; basta ver Autumn II, uno de sus últimos trabajos o Parallax, un clásico o el asombroso Letters.

    Lamentablemente, no es posible reproducirlo en Blogger sin modificar el script que es muy pequeño pero, engorroso de cambiar. Sin embargo, en un archivo HTML normal, es sencillo de usar y aquí hay un ejemplo subido a Yahoo Geocities ... sólo por diversión:

    Click para ver la demostración.

    REFERENCIAS:
  • SpamLoco
  • Blockout

    Wallpapers (Impresionistas)

    Explicaciones sensatas via YouTube

    Click para ver el video.

    Click para ver el video.

    REFERENCIAS:
  • juankyky
  • Twingly: Buscador de blogs

    Aunque había visto Twingly como una alternativa al Technorati Top 100, uno de esos rankings que nadie sabe cómo se crean, no me había detenido en el sitio en si mismo y gracias a una entrada de SpamLoco veo que es bastante más que eso y que, como alternativa, tiene algunas ventajas aunque, aún, la cantidad de resultados es bastante escasa.

    Twingly es un buscador especializado en blogs, algo que bien podría competir con Google Blog Search y Technorati que, últimamente, suelen mostrar datos poco claros.

    Al buscador normal le han agregado algunas herramientas que son interesantes:

    PING para ayudar a la indexación. Esto, en Blogger hay que hacerlo manualmente pero si se dispone de un servicio que lo hace automáticamante, basta agregar http://rpc.twingly.com/ a la lista.

    Páginas indexadas anteponiendo el prefijo site: site:http://vagabundia.blogspot.com.

    Detección de enlaces entrantes de manera similar a Google, anteponiendo el prefijo link: link:http://vagabundia.blogspot.com. Este también nos permite agregarlo a los feeds así que es sencillo de seguir las actualizaciones. Hay otras formas de búsqueda avanzadas que pueden verse en la ayuda del sitio.

    Incluir un widget que permite mostrar los resultados en cualquier página web. Todas las páginas poseen un enlace Get this widget for your blog que nos muestra el código que debemos insertar pero, teniendo el modelo, basta cambiar los parámetros manualmente. Por ejemplo:
    <div class="twingly_widget">
    <a href="http://www.twingly.com">Twingly Blog Search</a>
    <span class="title">El título a mostrar</span>
    <span class="count">10</span>
    <span class="query">link:http://vagabundia.blogspot.com</span>
    </div>
    <script type="text/javascript" src="http://static.twingly.com/jsapi/1.0/twingly.js"></script>
    "title" es el título a mostrar</span>
    "count" la cantidad máxima de resultados (por defecto 5, máximo 10
    "template" permite mostrar u ocultar el ícono de RSS y el enlce a los blogs:
    <span class="template">ShowBlog=no</span>

    Twingly Blog SearchEnlaces entrantes utilizando link:url10link:http://vagabundia.blogspot.com/ sort:published

    Twingly Blog SearchÚltimas entradas usando sort:linksblog:http://vagabundia.blogspot.com/ sort:inlinksShowBlog=no

    Twingly Blog SearchÚltimas entradas usando sort:publishedblog:http://vagabundia.blogspot.com/ sort:publishedShowBlog=no

    Click para ver el video.

    REFERENCIAS:
  • Twingly FAQ
  • Twingly Blog
  • Drag and DropZones: Curiosa extensión

    Realmente curiosa esta extensión de Firefox llamada Drag & DropZones. Aún no termino de decidir si es útil o no pero, de todas maneras, parece un experimento válido.

    La idea es reemplazar el menú contextual por algo más automático y a la vez, personalizable.

    Una vez que lo tenemos instalado, las opciones nos dirán que disponemos de una serie de celdas donde, por defecto se habrán agregado los buscadores que tenemos incluidos. En cualquiera de esas celdas vacías, podemos colocar alguna de las opciones del menu contextual, por ejemplo, las sencillas serían "Guardar imagen como" o bien "Guardar enlace".


    Ahora, desde cualquier página donde estemos, seleccionamos algo y comenzamos a arrastrarlo. Inmediatamente aparecera la extensión de forma transparente y bastaría seguir arrastrando hasta una de esas celdas para que se ejecutara la acción correspondiente.

    En este ejemplo, arrastrando un texto seleccioando sobre la celda de Google, simplemente se ejecuta la búsqueda.


    REFERENCIAS:
  • Incubaweb