Sobre las hojas en blanco

JMiur [E]


No. No es un error.

... es que un nuevo año es una hoja en blanco que debemos llenar ... como podamos ...

Blogger: Lo mejor del 2008 es que termina

Ayer me quejaba amargamente (uno siempre se queja amargamente) que los feeds de comentarios siguen funcioanndo mal (en realidad no funcionan) y que nadie dice nada, los desarrolladores deben estar aún bajo la influencia de la resaca navideña o preparándose para la resaca de fin de año ... quién sabe. Diez dias con un error tan básico como los feeds de un sitio es MUCHO MUCHO tiempo.

La queja fue respondida por Pizcos en Twitter donde comentaba (risueñamente) de un artículo donde se mostraba TODO LO BUENO de Blogger en este año. Me pregunté, entonces ¿qué ha sido lo mejor de Blogger en este año? y SpamLoco recogió el guante y afirmó que lo mejor había sido el COSO de los comentarios.

La verdad es que la memoria no me ayuda así que me puse a buscar a ver si encontraba algo así como una lista y claro, lo mejor era recurrir a Blogger in Draft que es donde aparecen las novedades aunque sea en modo experimental. Así que allí fuí y lo primero que sorprendió (o no me sorprendió en absoluto) es que Blogger in Draft tiene sólo 25 artículos publicados en el 2008 y nada más que tres en los últimos tres meses ... ninguno en diciembre sorpresa2

Peor aún.

De los 25, nueve son referencias a correcciones de bugs internos y como reportarlos. Dos hablan del editor que aún no ve la luz y otros cuatro hacen referencia a gadgets de Google o a la provisión de OpenID.

Moraleja, poco queda para elegir entre los New Features:
No hablan del tema pero, podría agregarse el elemento Seguidores y la etiqueta que permite optimizar los títulos ... digo, para sumar algo a una lista bastante pobre.

Terapia

No me digan que ustedes no entrarían en pánico si luego de contestar un comentario les apareciera una pantalla como esta:


En mi caso, como soy una persona calmada, reflexiva y que no suele tomarse las cosas muy a pecho, sólo necesité una dosis triple de Valium, tres horas de internación en terapia intensiva y un tratamiento psiquiátrico que probablemente se extienda unos diez años para ver si logran quitarme este repentino trauma que me hace llorar cada vez que hago click tristeanim

Ah, si ... el comentario se publicó diablo2

Jugando con los posts (Sólo títulos)

En estos días, Carlos me preguntaba si existía una forma de mostrar la página principal del blog donde sólo se vieran los títulos y un enlace que abriera las páginas individuales pero, sin aplicar ninguno de los trucos para que se ocultara el contenido y se expandieran. La idea era tener una lista tipo índice cronológico que se actualizara automáticamente.

Lo primero que se me ocurre es el método más engorroso, debemos agregar un nuevo elemento blog a la plantilla y hacer que uno funcione en la página principal y el otro en las páginas individuales. Lo mejor para eso es crearlo manualmente desde el código HTML donde buscamos:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
y lo cambiamos por:
<div id='main-wrapper'>
<b:if cond='data:blog.pageType == "item"'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:else/>
<b:section class='main' id='mainHOME' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Entradas pagina principal' type='Blog'/>
</b:section>
</b:if>

</div>
Ahora, tendríamos que modificar el elemento Blog2, quitar los includes que no sean necesarios y hacer las modificaciones que nos gusten ... muy complicado para mi gusto.

Una forma más sencilla es pensar, bueno, si lo que quiero es una lista y sólo poder ingresar a las páginas individuales, no necesito nada más, no necesito el autor ni las etiquetas ni la cantidad de comentarios ni ranking ni posts relacionados, sólo necesito el título y el enlace; nada más.

Y eso, podemos resolverlo con bastante sencillez usando los condicionales. Lo que necesitamos es ubicar esa condición en el lugar preciso que es dentro de este INCLUDABLE que vemos si expandimos los artilugios:
<b:includable id='post' var='post'>
... el código actual ...
</b:includable>
El contenido de eso es muy largo y varia mucho de una plantilla a otra así que no vale la pena mostrarlo, sólo hay que saber que no tocaremos el contenido existente sino que lo condicionaremos para que se ejecute sólo en las paginas individuales y de esta manera, toda esa parte del blog no cambiará:
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<!-- ... aquí pondremos el nuevo código ... -->
<b:else/>
... el código actual que no tocamos ...
</b:if>
</b:includable>
Si en este momento guardáramos la plantilla, la página principal de nuestro blog no mostraría ninguna entrada pero cualquier página individual seguiría funcionando como antes.

Entonces, lo que faltaría poner es alguna clase de código que nos mostrara el título y el enlace a cada entrada así que deberíamos reemplazar esto:
<!--  ... aquí pondremos el nuevo código ... -->
por un código cualquiera; por ejemplo:
<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee más</a>
<div style='clear: both;'/>
</div>
</div>
¿Qué es lo hay ahí? Un bloque al que le asigno una clase llamada postResumen que contendrá cada titulo y dentro de ese bloque, otro con una clase a la que llamo enlaceResumen y a las que luego daré propiedades CSS.

data:post.title es el título de cada entrada
data:post.url es la URL de cada entrada y con ellas se crean los enlaces

¿Podrían agregarse otros datos? Sí. Hay algunos a los que se puede acceder:

data:post.author es el nombre del autor de la entrada
data:post.timestamp es la hora de publicación de la entrada
data:post.numComments es la cantidad de comentarios
data:post.dateHeader es la fecha pero tendrá las mismas restricciones de siempre, si hay varias entradas con la misma fecha, sólo se mostrará una

Las etiquetas de la entrada también pueden listarse usando el mismo código que en las entradas individuales:

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

La cantidad de comentarios puede mostrarse usando el código normal:

<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>

El CSS de esa sección puede ser cualquier cosa y dependerá de la imaginación de cada uno. Para el ejemplo que he colocado en un blog de pruebas, las definiciones son las siguientes:
.postResumen {
background-color: #EEEEEE;
height: 52px;
margin: 10px 0 0;
}
.enlaceResumen {
font-weight: bold;
line-height: 32px;
padding: 0 0 0 10px;
}
.enlaceResumen a {
color: CornflowerBlue;
float: right;
font-size: 11px;
font-weight: normal;
margin: -32px 10px 0;
}
.enlaceResumen a:hover{
color:CornflowerBlue;
text-decoration:none;
}
.comentariosResumen {
float: right;
font-size: 11px;
font-weight: normal;
padding-right: 10px;
}
Y el código HTML utilizado es el siguiente:
<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee el artículo y coméntalo &#187;</a>
</div>
<div class='comentariosResumen'>
<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>
</div>
<div style='clear: both;'/>
</div>
Ver demo online

Direcciones útiles - inútiles Direcciones

Esta se una lista con algunas direcciones donde podemos recurrir en caso de emergencia.

No están abiertas las 24 horas y algunas de ellas no se actualizan desde épocas remotas pero ... es lo que hay.

SiteLauncher: Lanzador para Firefox

SiteLauncher es una extensión de Firefox que nos permite crear accesos directos a páginas webs y acceder a esos sitios asignándoles una combinación de teclas.

Por defecto, una vez instalado, se abre con CTRL + ESPACIO y allí nos muestra una ventana semitransparente con las distintas combinaciones asignadas.


Todas ellas son personalizables a través de la opciones ya que podemos agregar, eliminar o modificar las URLs o los textos visibles.


Una vez configurado todo, podemos usar atajos de teclado tipo ALT + SHIFT + letra o bien usar la ventana del lanzador CTRL + ESPACIO + letra.


REFERENCIAS:
  • ghacks.net
  • Web 2.0 y Educación


    REFERENCIAS:
  • Noticias Informales
  • Wallpapers (más Firefox)

    Un click para Suecia

    La transcripción de un mail recibido:

    Soy un estudiante de computación de Bahía Blanca. En noviembre de este año, participé junto con 2 compañeros de una competencia de programación en Buenos Aires llamada ACM - ICPC.

    Salimos 4tos en Sudamérica y clasificamos para la instancia mundial, a realizarse en Suecia el año que viene. El problema es que la organización solo nos cubre la estadía, y tenemos que conseguirnos los pasajes por nuestros propios medios.

    Una de las cosas que se nos ocurrió fue hacer un blog para contar un poco nuestra situación y ver si podemos juntar algo con la publicidad.

    Un saludo, muchas gracias y feliz navidad.

    Nicolás Komañski

    Y en el blog, puede leerse:

    Somos un grupo de 3 estudiantes bahienses de la Universidad Nacional del Sur: Nicolás Álvarez, Ricardo Matías Ferro Moreno y Nicolás Komañski. En abril del año que viene (2009), junto con nuestro coach Martín Darío Safe, nos vamos a Estocolmo, Suecia .

    ¿Cómo?

    El 15 de Noviembre de este año participamos en la Instancia Regional de la competencia ACM ICPC (International Collegiate Programming Contest) y salimos 3ros de la Región Sur de Sudamérica (4tos en toda Sudamérica). Con esto, clasificamos para la instancia mundial. Esta competencia consiste en resolver problemas de tipo algorítmicos-matemáticos. Cada grupo de 3 participantes cuenta con una computadora y 5 horas para resolver una cantidad de problemas que varía entre 8 y 11.
    ¿Por qué estamos contando todo esto?

    No creamos este blog para molestar a la gente con nuestra historia por el simple motivo de querer contarla. El problema es que, al ser invitados a la instancia Mundial, la organización de la competencia nos paga todos los gastos relacionados con la estadía en Estocolmo, pero no nos cubre los pasajes. El costo de los pasajes es aproximadamente 6000 USD (dólares).

    Creamos este blog con el objetivo de difundir nuestra situación, para poder darnos a conocer y ver si eso ayuda a conseguir alguna empresa, institución, etc, que nos auspicie.

    A medida que vaya progresando nuestra campaña, iremos posteando lo que va pasando.

    Agradecemos a todos la ayuda recibida. Con solo entrar al blog, ya nos están ayudando.

    Ahora, se podría hablar de educación, de las obligaciones de los estados, de dinero que cualquier gobierno gasta en tonteras, de culpas y responsabilidades pero es inútil porque nada de eso serviría de nada. Ellos, sólo piden que se ingrese a su blog donde han agregado publicidad de Adsense ... nada más. Mientras tanto, mientras juntan moneda tras moneda, seguirán peregrinando por cuanto despacho exista, gestionando aquí, allá y en todas partes hasta que algún funcionario se despabile.

    No puedo dejar de pensar en que, los adultos debemos odiar a los más jóvenes porque son lo que no somos y tienen la oportunidad de ser lo que jamas seremos, sino, cosas como estas no tendrían explicación.

    ELLOS ESPERAN AQUÍ:
  • Un Click para Suecia


  • REFERENCIAS:
  • eldiariodebahia.com.ar
  • Universico
  • Terra
  • MSN Noticias
  • Yahoo Noticias
  • Universia
  • AMBB
  • La Nueva Provincia
  • uns.edu.ar
  • Tell a friend: Marcadores sociales de nuevo estilo


    La mayoría conoce los bookmarks o marcadores sociales que se agregan a los sitios web como botones cuya función es enviar una página a algún servicio online que los administra para nosotros. En Blogger, inicialmente los colocábamos manualmente, luego aparecieron algunos botones que reunían un conjunto de esos servicios, más tarde se agregó un gadget llamado Enlaces de suscripción, bastante mínimo pero sencillo de agregar.


    Todos ellos funcionan y usar uno u otro es algo personal. Obviamente, el mayor control lo sigue dando el modelo original ya que podemos elegir los marcadores que queremos agregar pero también es el más engorroso de agregar a la plantilla así que muchos han optado por utilizar servicios que proveen todas esas funciones y que simplemente nos dan un código que debemos insertar.

    AddThis es uno de los más conocidos, tiene varios modelos gráficos disponibles, puede integrarse a Feedburner, dispone de algunas opciones de personalización y puede usarse en Blogger.



    En estos días he visto que existe otro servicio llamado Tell a friend que provee algo similar pero que está más enfocado a la llamadas redes sociales. Puede insertarse en múltiples plataformas (Blogger, TypePad, Movable Type, Drupal, Joomla, WordPress, etc) y, aunque su versión gratuita no es demasido personalizable, algunas cosas pueden hacerse (más información).

    El servicio provee acceso a mails (GMail, Yahoo, MSN/Windows Live), mensajeros (Yahoo Messenger, GTalk, MSN/Windows Live Messenger, AIM), blogs (WordPress, Blogger, LiveJournal, TypePad, MovableType, Xanga, Expression Engine, Joomla, Drupal, Textpattern), redes socilaes (Facebook, LinkedIn, Twitter, FriendFeed, MySpace) y los servicios tradicionales de bookmarks (Del.icio.us, Digg, Slashdot, Technorati, Reddit, StumbleUpon, Yahoo! Buzz, Google, Blinklist, Facebook, Newsvine, Furl, MySpace, etc).


    Una vez que confirmamos la creación de la cuenta, entramos en el sitio y ya tenemos el código disponible que debemos insertar en alguna parte ... normalmente, lo que hacemos es agregarlo en el pie de página de los posts (ver detalles).

    Cada solapa de la pantalla de administración nos muestra detalles que podemos configurar:

    WIDGET CODE: allíe está el código que debemos agregar y hay instrucciones detalladas para las distintas plataformas.
    WIDGET DESIGN: aquí elegimos colores, modificamos los textos que por defecto están en inglés, etc. Las opciones son limitadas.
    CHANNEL SETTINGS: establecemos los servicios que queremos incorporar y algunos de los mensajes que se mostrarán.
    BUTTON DESIGN: seleccionamos el modelo gráfico del botón.
    ACCOUNT DETAILS: son los detalles de nuestra cuenta.
    USAGE STATS: nos muestra estadísticas del uso del servicio; algo interesante ya que, en lo personal, siempre tuve curiosidad por saber si este tipo de agregados es útil o no.

    Feliz Navidad

    Feliz Navidad
    Feliz Navidad
    Feliz Navidad
    Feliz Navidad
    Feliz Navidad
    Feliz Navidad

    Mientras el reloj hace tic-tac

    Y claro, no es momento para pensar en códigos, plantillas y cosas semejantes pero siempre podemos seguir jugando mientras el reloj hace tic-tac y esperamos que se cumplan algunos de nuestros deseos (los buenos, los otros son baneados).


    No hay nada que puedas hacer que no pueda hacerse
    no hay nada que puedas cantar que no pueda cantarse
    no hay nada que puedas decir pero puedes aprender a jugar el juego
    es fácil ...

    No hay nada que puedas crear que no pueda crearse
    no puedes salvar a nadie que no pueda ser salvado
    no hay nada que puedas hacer pero puedes aprender con el tiempo
    es fácil ...

    Todo lo que necesitas es ... amor.

    No hay nada que puedas saber que no sea sabido
    no hay nada que puedas ver que no sea visto
    no hay ningún lugar donde puedas estar que no sea donde tenías que estar
    es fácil ...

    Todo lo que necesitas es ... amor.
    Ver/Ocultar letra original [+]

    There's nothing you can do that can't be done
    nothing you can sing that can't be sung.
    nothing you can say but you can learn how to play the game
    it's easy ...

    There's nothing you can make that can't be made.
    no one you can save that can't be saved.
    nothing you can do but you can learn how to be in time
    it's easy ...

    All you need is love, love, love is all you need.

    There's nothing you can know that isn't known.
    nothing you can see that isn't shown.
    nowhere you can be that isn't where you're meant to be.
    it's easy ...

    All you need is love, love, love is all you need.



    All you need is love interpretado por Lynden David Hall (Mayo 1974 – Febrero 2006) (más información)

    All you need is love
    Tout que vous avez besoin est amour
    Tutto che abbiate bisogno di è amore
    Tudo que você precisa é amor
    Todo lo que necesitas es amor

    Declaración Universal de los Derechos Humanos


    Human Rights Action Center
    Burma Viral, una animación de Shilo & NoneOfUsAreFree.org

    Gracias Juanan:
  • El Alfeizar de Dedalus
  • Gadget NORAD sigue a Santa Claus

    Te damos la bienvenida a la página de seguimiento de Santa Claus del NORAD ... Añade el gadget en iGoogle para seguir a Santa Claus desde tu página de inicio personalizada ... y bueno, ya que puede añadirse allí, también puede añadirse en Blogger, imagino.

    Así es, no hay problema pero, ya que estamos, intentemos ponerla en un post y no en la sidebar, simplemente para probar a ver si es que funcionan. Hay que ponerla primero donde ellos dicen, copiar el código fuente del IFRAME y pegarlo en el post. Milagrosamente, funciona ... espero que dure.


    Una vez que lo hice, la verdad es que me parece muy pobre. NORAD suena a gran tecnología y esa cosa blanca y descentrada no es demasiado atractiva.

    "Durante más de 50 años, el NORAD y su predecesor, el CONAD (Comando de Defensa Aérea Continental) han seguido el viaje de Santa Claus en Nochebuena ... El NORAD utiliza cuatro sistemas de alta tecnología para seguir la ruta de Santa Claus: radares, satélites, las cámaras de Santa Claus y cazas de combate." [1 | 2]

    Obvio. No es un tema menor. Si ya enviamos la carta con nuestros deseos (aunque sea usando el mail), seguramente estaremos interesados en saber el momento exacto en que pasará por nuestra casa, tengamos o no tengamos chimenea, sea verano o sea invierno, nos hayamos portado bien o más o menos. No hay que creer en ciertos mitos ya que Santa llega siempre, aún cuando lo haga con las manos vacías.

    De todas maneras, como la tecnología ultrasecreta me resulta dudosa y como eso de mandar cazas de combate a asustar a los renos me parece que debe infringir varios tratados internacionales, lo mejor que se me ocurrió es crear mi propio contador porque ¿para qué tanto satélite si todos sabemos que llega a las 12 en punto de la noche? lo único que necesitamos entonces es ... un simple reloj que claro, ajusté a mi huso horario porque en eso también se equivocan: ellos creen que el mundo se terminá justo ahí, después de sus narices.

    00dia
    00horas
    00minutos
    00segundos

    ¡¡¡ Feliz Navidad !!!

    Jugando con los posts (Colores diferentes)

    Hace ya varios días, Ariane preguntaba si era posible aplicar el mismo truco que permite mostrar los comentarios pares e impares con diferente color, a los posts de tal forma que se vean con fondos diferentes. Imaginé que sí y quedé en contestarle así que, trataré de cumplir.

    Para quien no tenga implementada algunas de esas modificaciones, hay que aclarar que lo primero que debemos tener es identificados los posts de manera individual. Eso, puede hacerse agregando el atributo ID en ellos. Buscamos entonces en la plantilla algo así:
    <div class='post-body entry-content' expr:id='"post-" + data:post.id'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    Y le agregamos lo que se muestra en color aunque hay que tener en cuenta que el atributo class puede variar en algunas plantillas pero no tiene importancia; lo importante es agregarle el ID, sea cual fuera el nombre de la clase. Con eso, identificamos cada post de manera individual en las páginas que muestran varios.

    Ahora, agregaremos el script y el estilo, justo antes de </head>:
    <script type='text/javascript'>
    //<![CDATA[
    function ContarP(cual) {
    var resto;
    resto = contadorPosts % 2;
    if (resto == 0)
    document.getElementById(cual).className='entradaPar';
    else
    document.getElementById(cual).className='entradaImpar';
    }
    //]]>
    </script>

    <style>
    .entradaImpar {background-color: #F0F8FF; padding: 10px;}
    .entradaPar {background-color: #F0F0F9; padding: 10px;}
    </style>
    Y por supuesto, las propiedades de estilo son personales así que puede agregarse cualquier otra.

    Por último agregaremos el contador y la llamada a la función y para eso, biuscaremos esta parte:
    <b:includable id='main' var='top'>
    .......
    <script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->
    <b:loop values='data:posts' var='post'>
    .......
    <b:if cond='data:blog.pageType != "item"'>
    <!-- no ejecutamos la función en las páginas individuales -->
    <script type='text/javascript'>
    contadorPosts=contadorPosts+1;
    ContarP(&#39;post-<data:post.id/>&#39;);
    </script>
    </b:if>

    </b:loop>
    .......
    </b:includable>
    De esta manera, los posts se mostrarán con fondo de color intercalados salvo en las páginas individuales donde se seguirán mostrando con el esquema gráfico normal del blog.

    Puede verse un ejemplo en un blog de pruebas

    TEXTile

    TEXTile es una escultura interactiva donde se han utilizado 22.528 teclas de computadoras recicladas y 192 teclas especialmente fabricadas.

    Click para ver la galería de imágenes.

    Otras obras de Jean Shin: Sound Wave | Unraveling | Glasscape | Penumbra

    REFERENCIAS:
  • jeanshin.com
  • Retardo and the Iron Golem


    Wallpapers (más Windows)

    Comprá Blogger

    Buscando explicaciones para ver si era posible solucionar el error en los feeds de los comentarios que hace que el script que muestra la Últimos Comentarios en la sidebar se haya quedado quedado en la prehistoria y registre cosas de hace un año atrás, me he topado con un aviso publicitario en una de la págiias de resultados de Google que me llamó la atención.


    Lamentablemente, es uno de esos enlaces que sólo llevan a una página que te dice "no, eso no lo encuentro, busca otra cosa".

    Es una pena porque estaba dispuesto a pagar 2 dólares cash y hasta 4 si es que lo financiaban en 12 meses.

    Sólo quería entrar, despertar a los desarrolladores, despedirlos y luego regalarle el servicio a la Cruz Roja diablo1

    Los 10 usos más creativos para Twitter

    1. Regar las plantas: DIY Twitter watering project utiliza sondas que envian un mensaje cuando las plantas requieres ser regadas.

    2. Escribir cuentos cortos: ¿Será posible? Un concurso de Copyblogger desafiaba a los usuarios a realizar el experimento. El ganador fue Ron Gould: "¡El viaje en el tiempo funciona!" En la nota se lee: "Sin embargo, sólo se puede viajar al pasado y en un sentido". Reconocí mi propia escritura a mano y sentí un escalofrío.

    3. Escribir ficción: Aunque se está limitado por los 140 caracteres, pueden escribirse uno tras otro hasta crear una novela tal como lo hizo 140novel.

    4. Leer una novela: Si se puede lo anterior, es obvio que también se puede hacer esto. Y aún más. Hay dos proyectos para compartir novelas cásicas: Ulises de James Joyce y La guerra y la paz de Leo Tolstoy.

    5. Escribir de manera comunitaria: Varios autores trabajando en un mismo proyecto. @twitterstory era una cuenta en la que cualquier seguidor podía contribuir agregando textos a la historia.

    6. Compartir recetas de cocina: es lo que se hace en @cookbook

    7. Dejar de fumar: Quitter es un grupo de autoayuda de Florida.

    8. Informarse del estado del tránsito: CommuterFeed se encarga de enviar mensajes respecto a problemas en el tráfico, congestionamientos, rutas seguras, etc.

    9. Salir de la cárcel: James Buck, un joven periodista de 29 años fue arrestado en Egipto el 10 de abril de este año. Utilizando Twitter se comunicó con su familia y amigos. Sólo decía una cosa: "Arrestado". Bastó eso para que se iniciara una cadena de ayuda y se contratara un abogado.

    10. Tweets desde el vientre: Corey Menscher, futuro padre, creo un dispositivo que graba las "patadas" que da su hijo aún no nacido y transforma esa información en un texto que envía a Twitter, usuario @kickbee.


    REFERENCIAS:
  • SitePoint
  • Visto en Twitter off course
  • Stop AIDS


    REFERENCIAS:
  • Stop AIDS
  • Google Friend Connect: Otro COSO de esos


    Google Friend Connect ya esta disponible. Google Brings Twitter to Friend Connect. Google Friend Connect una idea genial. Google Friend Connect. Google Friend Connect. Google Friend Connect. Google Friend Connect. Google Friend Connect. Google Friend Connect. Google Friend Connect ...

    5.350.000 de resultados si uno busca Google Friend Connect.

    ¿Qué demonios es Google Friend Connect? sorpresa2

    Google vende dice:

    "Aumente el tráfico de su sitio agregándole herramientas sociales. Google Friend Connect significa más gente conectándose entre si. Enriquezca su sitio con gadgets que puede seleccionar de un catálogo. Atraiga visitantes. No hace falta saber demasiado, basta copiar y pegar el código, nosotros haremos el resto."

    Google Dirson dice:

    "¿Qué se puede hacer con Google Friend Connect? Pues por ejemplo, si tenemos una página web que no permite a los usuarios identificarse y no queremos perder el tiempo programando un sistema de registro más un formulario de comentarios, mediante código ya predefinido por Google podemos implementarlo invitando a nuestros visitantes a utilizar, eso sí, su cuenta personal de Google. Con ello, los usuarios de nuestro sitio web no serán realmente de nuestro sitio web, sino de Google, el cual nos ofrece las herramientas para facilitar relaciones entre ellos, y de ellos con nuestro sitio web."

    Hasta hay un video explicativo:

    Click para ver el video.

    ¿Será tan así?

    Pués sí, es exactamente como lo muestra el video, es decir ... nada ¿O será que hay algo que no comprendo? No sería de extrañar.

    Para salir de dudas y no hablar por boca de ganso, no hay nada mejor que intentarlo y allí la ayuda viene de la mano de Usuário Compulsivo que explica como agregarlo en Blogger sin necesidad de alojar archivos o tener un servidor propio.

    Entramos a la página principal de Google Friend Connect y click en Setup a new site. La siguiente pantalla es un introducción (otra más) así que seguimos sin detenernos: click en Continue.

    Nos pide dos datos: Site name (el nombre de nuestro sitio) y Home URL (la dirección de nuestro sitio, en este caso, el blog). Nada más. Click en Continue.

    Ahora, nos dice que descarguemos dos archivos y los alojemos en nuestro servidor. Como estamos en Blogger, este paso es innecesario así que, lo ignoramos y otra vez click en Continue.

    Listo. Casi listo. En esta ventana nos preguntará si queremos verificar lo que hemos hecho (nada hicimos pero es lo mismo) Test your setup. Ahora si, todo listo y lo único que hay que hacer es agregar el gadget de miembros a nuestra sidebar.

    Members gadgets es lo que permitirá que los vistantes se "unan" y podemos configurarla en cuanto a tamaño, colores etc. terminado esto, nos dará un código que agregamos en un elemento HTML que hayamos creado. Fin. Ya somos los felices poseedores de ... bueno, ya lo pusimos.

    ¿Más? Y sí, el famoso catálogo verguenzaanim

    El catálogo consta de .. DOS cosas que podemos agregar y que se encuentran en Social gadgets. Tranquilos, no se emocionen.

    Wall gadget permite a los usuarios registrados ... agregar comentarios o enlaces a videos. También podemos personalizar el gadget, blablabla. El código, lo agregamos siempre en un elemento HTML.

    Review/Rate gadget permite a los usuarios registrados calificar (con estrellitas) los comentarios anteriores o cualquier otra cosa. Tambien podemos personalizar el gadget, blablabla. El código, lo agregamos siempre en un elemento HTML.

    Y ... nada más. Ahhh, hay otras dos demos pero vaya uno a saber cómo deben usarse y también la posibilidad de crear un gadget utilizando las herramientas de OpenSocial ... como se ve, diablo2 facilísimo

    ¿Alguien entendió algo? A mi no me miren ni me pregunten. Ahí quedó, colocado en un blog como prueba para quien quiera verlo en acción: Blogger Google Friend Connect

    JW FLV Player: Personalización y skins

    El reproductor de jeroenwijering.com es, probablemente, uno de los más utilizados si queremos insertar archivos de manera independiende de los reproductores de video que nos proveen ciertas páginas web (más información).

    Tiene sus ventajas y tambien sus desventajas. Por un lado es muy flexible y reproduce tanto audio como videos en varios formatos: FLV, MP4, MP3, (más detalles); posee la capacidad de manejar listas de reproducción y es muy liviano pero, necesitamos tener acceso a los archivos a reproducir lo que no es tan sencillo si sólo usamos YouTube pero hay otros servicios como blipTV que permiten enlazar directamente los videos y lo mismo ocurre con Photobucket, e incluso ImageShack si necesitamos alojar archivos SWF.

    Para usarlo necesitamos dos cosas, insertar el script swfobject.js y alojar el reproductor en alguna parte.

    El script lo podemos descargar y guardalo en un servidor o bien utilizar la librería que provee Google API e incluirlo como cualquier otro script antes de </head>:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
    También podemos cargarlo directamente con el cargador de Google o agregarlo a la lista de de scripts si ya lo estamos usando para cargar otras:
    <script src='http://www.google.com/jsapi'/>
    <script>
    google.load("swfobject", "2.1");
    </script>
    El reproductor en si mismo es un SWF así que debemos alojarlo nosotros y lo más sencillo es ImageShack. En este momento está disponible la versión JW FLV Player 4.2 que se descarga en formato ZIP y que incluye varios demos y explicaciones detalladas.

    Ahora, podemos incluir uno o varios reproductores en nuestro sitio y para eso podemos usar scripts o la etiqueta OBJECT que me parece la más adecuada para Blogger:
    <object width="ancho" height="alto" id="movie"
    type="application/x-shockwave-flash"
    data="URL_player.swf">
    <param name="movie" value="URL_player.swf" />
    <param name="flashvars" value="file=URL_archivo&parametros" />
    </object>
    El resultado por defecto será este:


    Lo interesante del reproductor es que podemos personalizarlo mucho. La forma más sencilla es, tal vez, utilizar el wizard de jeroenwijering.com e ir marcando las opciones que queremos; nos dará como resultado el código necesario que sólo deberemos copiar y pegar.


    Algunos de los parámetros son bastante simples asi que también podemos agregarlos manualmente. Todos ellos se colocan en flashvars (más información):

    file=url es la dirección del archivo a reproducir y en Blogger es una dirección absoluta (comienza con http://)
    image=url es la dirección de una imagen que podemos colocar en lugar de la pantalla negra que se muestra por defecto
    backcolor=0x000000 es el color de la pantalla (por defecto es negro)
    frontcolor=0x000000 es el color de los textos y de los botones (por defecto es blanco)
    lightcolor=0x000000 es el color de los efectos rollover (por defecto, rojo)
    showicons=true|false muestra u oculta el ícono de actividad en el centro de la pantalla del reproductor
    logo=url coloca una imagen personal en la esquina superior derecha

    Todos los parámetros se agregan en el mismo atributo anteponiendo el símbolo & o bien &amp;:
    <param name="flashvars" value="file=http://miArchivo.flv&amp;image=http://miImagen.jpg&amp;backcolor=0000CC"/>
    Uno de los parámetros más interesantes es el que nos permite cambiar el aspecto general del reproductor utilizando skins.

    Un skin no es otra cosa que otro archivo SWF que podemos agregar y que podemos descargar por separado, agregándolo luego como parámetro en flashvars:
    &amp;skin=URL_archivo.swf
    Aquí van cuatro ejemplos, paciencia para cargarlos ...




    Eliminando elementos a sopapo limpio

    No sé si es algo que les pasa a todos o sólo a mi pero, últimamente, eliminar elementos de Blogger se ha transformado en un problema porque me ocurren dos cosas. Si lo trato de hacer desde la misma página del blog utilizando el ícono de edición rápida la ventana se abre perfectamente, aparece la opción correspondiente pero, no pasa nada; y si siento que alguien se rie en el fondo es sólo mi imaginación y un efecto secundario de mi paranoia.

    Pero, no es todo, si lo intento hacer desde Elementos de la página, se abren dos ventanas: la pop-up normal y una nueva pestaña con la misma ventana, tanto en Firefox como en Internet Explorer.

    Uno supondría que dos ventanas son más que una y ahora sí, click enérgico sobre el botón ELIMINAR y esta vez la risa burlona es clarita. No pasa absolutamente nada, el elemento sigue allí lo más orondo.


    Por supuesto, uno no se debe dar por vencido y hay que olvidarse de todas estas maravillas de la vida moderna, de los botoncitos y de las herramientas que todo lo pueden excepto lo que no pueden. La vieja escuela dice que hay que ir a lo que nunca falla: la Edición HTML de la plantilla.

    Sin expandir los artilugios, buscamos el elemento rebelde, por ejemplo, alguno que esté en la sidebar:
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='HTML1' locked='false' title='' type='HTML'/>
    <b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>

    <b:widget id='HTML5' locked='false' title='' type='HTML'/>
    <b:widget id='Label4' locked='false' title='Etiquetas Desplegables' type='Label'/>
    <b:widget id='Label2' locked='false' title='TABS + ETIQUETAS' type='Label'/>
    <b:widget id='Label3' locked='false' title='AJAX LABELS' type='Label'/>
    <b:widget id='Feed1' locked='false' title='Últimos posts' type='Feed'/>
    <b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>
    </b:section>
    </div>
    Y ELIMINAMOS LA LÍNEA sin remordimientos. Luego, guardamos la plantilla y aparecerá una advertencia:


    Sólo respondemos con un click en CONFIRMAR Y GUARDAR. No hace falta dar más explicaciones y no tiene sentido protestar diciendo que hace dos horas que estamos intentando hacerlo de otra manera; sólo podemos aceptar o cancelar.

    Segundos después, el o los elementos indeseados habrán pasado a mejor vida.

    ¿Y podemos eliminar varios al mismo tiempo? Sí pero con prudencia, no conviene hacerlos con muchos ya que a veces Blogger se tara y entonces aparece un bello error bx-nosecuanto; conviene hacerlo con un número pequeño y repetir la operación todas las veces que sea necesario.

    Gmail Twitter Gadget

    Entre los experimentos de GMail que funcionan sólo si lo configuramos para el idioma inglés,está la posibilidad de agregar gadgets tal y como podemos hacerlo en iGoogle.

    Entre tantos miles de gadgets, hay alguno interesantes; uno de ellos es Gmail Twitter Gadget que integra Twitter y nos permite hacer lo mismo que en la página o si se usa un cliente externo. Es simple de usar y muy liviano a la hora de cargarse.

    La URL que debemos colocar para insertarlo es:

    http://www.twittergadget.com/gadget_gmail.xml

    REFERENCIAS:
  • lifehacker.com
  • Probando exportar e importar el blog

    Ahora que Importar/Exportar pasó su etapa de prueba y ya es parte de las opciones normales de Blogger, es hora de ver qué hace y qué no hace.

    La opción la encontramos en Configuración | Básico, allí, la primera línea nos muestra tres enlaces:


    Con gran astucia, Blogger coloca BORRAR el blog ahí mismo, chiquitito y bien a la mano para que uno se equivoqué aunque por suerte, hay una ventana previa de advertencia que evita que cometamos una tontera:


    Hagamos entonces una prueba con algún blog cualquiera. Hacemos click en EXPORTAR; aparecerá una ventana y click otra vez en el botón DOWNLOAD BLOG (sí, está en inglés):


    En nuestra PC se habrá creado un archivo con extensión XML y el siguiente tipo de nombre:

    blog-mes-dia-año.xml

    El tamaño del archivo dependerá de la cantidad de entradas pero, en términos generales son archivos pequeños así que el proceso es rápido.

    Nos faltaría entonces realizar el proceso inverso y para eso, creo un blog nuevo y voy a la Configuración. Click en IMPORTAR y se abre una nueva ventana:


    Primero, buscamos en nuestra PC el archivo XML previamente descargado, llenamos el CAPTCHA y luego de hacer click en el botón IMPORTAR BLOG. Comienza el proceso cuya duración dependerá del tamaño del archivo:


    Una vez terminado, se nos mostrará la ventana de edición de entradas informándonos del resultado.

    Blogger habla de la posibilidad de combinar o unir distintos blogs en uno. Para eso, todo lo que necesitamos hacer es ir nuevamente a la Configuración e importar otro de los archivos que hayamos exportado previamente. Las entradas se insertarán normalmente, respetando el orden cronológico.

    La importación puede hacerse de dos manera, por defecto, las entradas se guardarán como borradores y si queremos publicarlas, deberemos hacerlo manualmente pero, podemos evitarnos ese trabajo marcando la opción correspondiente en cuyo caso, las entradas importadas se publicarán automáticamente.

    ¿Qué se importa? Todas las entradas y los comentarios, en ese sentido, no parece haber errores en las pruebas que realicé.

    ¿Qué se exporta? Mucho más que eso: el código de la plantilla y los datos de la configuración del blog, por ejemplo ¿Y cómo se importa eso?

    Si creamos un blog nuevo, podemos utilizar las Herramientas avanzadas que están en la parte de abajo de la ventana. Allí, un enlace nos permite importar directamente:


    Como lo que se hace con este método es importar absolutamente todo, (entradas, comentarios, plantilla y configuración), una vez completado el proceso nos pedirá que asignemos el nombre del nuevo blog y la URL correspondiente ya que no puede haber dos con la misma dirección:


    De este modo, habremos creado un nuevo sitio que será una réplica exacta de otro ya existente:


    Si bien se dice que el formato empleado es compatible con otro tipo de servicios, lo que permitiría usar eso archivos para mudarse, eso no parece cierto ya que no he visto servicios que los acepten aunque muchos de ellos poseen heramientas para importar desde Blogger utilizando otros métodos.

    El proceso inverso, importar desde otro hacia Blogger, no está contemplado expresamente.

    Imágenes con explicaciones (1)

    Vamos de shopping ...


    El invierno hace estragos.


    De la importancia del escarabajo estercolero.


    Mirándose en el espejo de la evolución

    99 Bricks


    Click para jugar.

    REFERENCIAS:
  • El Blog de Jabba
  • Wallpapers (abstractos)

    Un detalle para los emoticones

    Preguntaba Birdelo cómo podía agregar una línea mostrando los emoticones disponibles en el formulario de comentarios tal como se ve en el blog de El escaparate de Rosa .

    Supongo que habrá varias métodos pero lo más sencillo es crear la imagen y agregarla en la misma sección donde está el formulario. Todo ese sector es completamente configurable (salvo el formulario en si mismo) ya que podemos colocar etiquetas HTML sin restricciones. Por ejemplo:
    <b:includable id='comment-form' var='post'>
    <div id='comment-form'>
    <a name='comment-form'/>
    <h3>EL TÍTULO QUE SE NOS OCURRA PONERLE</h3>
    <p>
    Podemos agregar un enlace a la suscripción RSS <a href='URL_feeds' target='_blank'><img src='URL_imagenRSS'/></a>
    </p>
    <p><img src='URL_imagenEmoticones'/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' expr:src='data:post.commentFormIframeSrc' frameborder='0' id='comment-editor' scrolling='auto'/>
    <data:post.iframeColorizer/>
    </div>
    </b:includable>

    Mensaje en una botella: Las listas que nadie lee

    ¿Cuándo Blogger nos va a regalar algo para navidad? preguntaba SpamLoco en Twitter. Es que parece que Google solía enviar regalos a sus soportes y anunciantes y ahora (¿crisis?) ha dejado de hacerlo. Nosotros, claro, no somos anunciantes ni soporte, los soportamos a ellos, que es parecido pero muy diferente.

    Tiempo atrás, iniciamos una extraordinaria campaña para tener un espacio disponible donde alojar tipos de archivos que ahora no son permitidos y ha sido tan exitosa que seguimos igual que antes, sin resultados pero, con el mismo deseo.

    Pensando en ambos temas se me ocurrió ver la lista oficial (la wishlist) donde los usuarios supuestamente dejan sus deseos de mejoras pero, es rara, parece hecha por Google mismo. Bah, eso no importa tanto ya que, como tampoco escuchan, es lo mismo.

    Deseos son deseos pero hay deseos y deseos:
    • Restringir el acceso a determinados posts es posible que a alguien le resulte útil pero a mi juicio va en contra de lo que es un blog, ¿quieres accesos restringidos? crea una página web.
    • Mostrar resúmenes de los posts con enlaces al texto completo está bien aunque un acceso más amplio a la base de datos sería aún mejor.
    • Exportar/importar los posts de/hacia otros servicios es lo que se pretende con la opción que aún permanece en Blogger Draft hace meses.
    • Incluir audio/música llama la atención ¿Acaso no es posible hacerlo ahora o quieren que Blogger agregue un botón tan poco usado como el de insertar videos?
    • Alojar otro tipo de archivos. SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI SI ¿Está claro?
    • Poder mostrar los post en un orden cronológico diferente es algo que vienen pididendo desde hace años ¿para qué? tiene un uso limitado pero no estaría mal.
    • Registrar de dónde vienen los visitantes y como interactuan eso lo hace Google Analytics o decenas de otros servicios de estadísticas.
    • Integrarse con Google Apps bueno ... Google quiere que todo sea Google porque Google es Google.
    • Leer los blogs de mis amigos en un solo lugar ¿suena a Google Reader? Usen un lector de feeds y listo.
    • Tener más gadgets en la sidebar. NO NO NO NO, la verdad, no quiero ningún gadget de Google, quiero más control, no quiero menos.
    Visto y considerando que no me conforma y la llegada de un nuevo año (otro más) es propicia para jugar a las utopías, no sería malo iniciar mi propia lista de pedidos:

    1. Ayuda:
    Tiren las páginas de ayuda a la basura y empiecen otra vez. Comiencen una Wiki que sea flexible y pública para que toda esa información que disponemos los usuarios pueda ser integrada, sistematizada y compartida. Recuerden que el español es el tercer idioma en internet y no el último.

    2. Información:
    Cierren Blogger Buzz o háganlo en serio, ahora es patético. Quiten esa cosa absurda de Blogs Importantes del escritorio. Informen, hablen, digan, cuenten. De este lado estamos esperando y con las orejas atentas.

    3. Editor:
    Agreguen las opciones elementales que no tiene, la posibilidad de agregar targets en los enlaces, atributos en las imágenes, colores de fondos, insertar objetos de Flash con códigos válidos, insertar videos de YouTube con un click. Mejorar (hacer de nuevo) la vista previa y utilizar el CSS del blog para que haya cierta correspondencia entre una cosa y la otra ya que así como está, no tiene sentido.

    4. Categorías:
    Impleméntenlas de una vez por todas. Las etiquetas (tags) no son suficientes y no son lo mismo. Quiero la posibilidad de tener categorías y subcategorías y quiero acceso a los datos necesarios para manejarlas. Quiero saber a qué categoría pertenece un post desde el header y no una vez que se cargó; eso sólo, cambiaría radicalmente la forma de armar los blogs.

    5. Codificación:
    Agreguen códigos más flexibles, condicionales múltiples por ejemplo. Eliminen los iframes y no molesten más con ellos. Permitan que las plantillas sean más modulares, dos kilómetros de código no hacen otra cosa que crear confusión. Separen el estilo del resto. Resulevan los miles de problemas que se generan al cambiarlas. Quiten esa barbaridad de errores BX-estoesunerror y por lo menos pongan un texto tipo "Oops: algo pasó y no tenemos idea qué puede ser". Hasta la ventana de Windows que dice que el sistema "se ha vuelto inestable" es más simpática.

    6. Integración:
    Yo no quiero integrarme con Google Reader ni con los perfiles ni con redes sociales, quiero herramientas que le sirvan al blog y no que les sirvan a ustedes. Integren los buscadores, la traducción automática, YouTube, Feedburner. Centralicen las librerías de Google Api y permitan que los usuarios las agreguen directamente desde la configuración con un par de clicks ¿Quiere usar Prototype o JQuery? Marque la opción y listo ¿Si tienen cosas que funcionan bien por qué no las usan?

    7. Imágenes:
    Empecemos de cero. Quiten ese código absurdo, creen URLs más amigables, eliminen lo innecesario. Permitannos modificarlas, listarlas, manejarlas, ordenarlas, organizarlas. No es difícil, sólo se trata de sentido común.

    8. Comentarios:
    Basta de tonteras, necesitamos urgentemente, un sistema de comentarios flexible, que funcione y que podamos controlar. No quiero que el vendedor de zapatos siga dejando spam, quiero poder bloquearlo y dejar de quejarme con ustedes. Quiero hacerme cargo del asunto y no molestarlos más con el tema. Quiero poder marcar comentarios como spam y no volver a permitirles el acceso; quiero poder colocar y quitar comentarios en moderación cuantas veces se me ocurra. Quiero poder editar los comentarios y acceder a los datos. Quiero administrar lo comentarios y no depender de ustedes. Quiero un sistema de comentarios eficiente y responsabilizarme por su uso.

    9. Plantillas:
    Otro tema que deberían empezar a replantearse seriamente. Hace dos años que están las mismas; son "viejas", creo que hay algunos modelos que jamás he visto implementadas en ningún blog. Están pensadas para resolucioness de 800x400 y eso ya es el pasado. La mínima es perfecta, simplemente creen varios modelos con variantes. Miren lo que ya existe en la web, busquen sitios que las ofrezcan y colaboren con ellos patrocinándolos. Coloque una lista de sitios recomendables. El viejo Blogger lo tenía ¿se olvidaron cómo se hace? Sólo son enlaces, ya saben, etiquetas <a href="...

    10. Etc:
    Por ahora, nada más. El año que viene veremos.

    El nuevo elemento Ubicación

    Leía en Usuario Compulsivo, que en Blogger Draft habían agregado una opción sobre la cual no recuerdo haber visto otra información ni ningún tipo de anuncio: se trata de integrar los Mapas de Google (¿Google? ¿les suena Google?).

    Si entramos en nuestro blog, y vamos a Diseño | Elementos de la página y allí editamos las Entradas del blog, veremos que hay una nueva posibilidad llamada por defecto Ubicación. Como cualquier otra de las opciones del pie de página de los posts, podemos cambiar el texto y reubicarlo:


    Pero eso no es todo, como el código no está disponible en todas las plantillas (o en ninguna), deberemos agregarlo manualmente así que vamos a Diseño | Edición HTML y expandimos los artilugios. Buscaremos entonces el pie de página de los posts que suele decir:
    <p class='post-footer-line post-footer-line-3' />
    o algo similar.

    Allí, abriremos esa etiqueta y pondremos esto:
    <p class='post-footer-line post-footer-line-3'>
    <span class='post-location'>
    <b:if cond='data:top.showLocation'>
    <b:if cond='data:post.location'>
    <data:postLocationLabel/>
    <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
    </b:if>
    </b:if>
    </span>
    </p>
    ¿Cómo lo usamos? En el editor de posts, siempre que entremos a través de Blogger Draft, veremos en la parte inferior un enlace nuevo Add Location:


    Si hacemos click, se desplegará una mini-ventana con un mapa y allí seleccionamos la ubicación que colocaremos como referencia:


    Una vez guardado todo, ese post mostrará un enlace que nos abrirá la ventana normal de Google Maps.

    Cada entrada puede tener una ubicación distinta o no tener ninguna. Como es un enlace que simplemente abre otra página, si usamos LightWindow podemos modificar el código para abrir ese enlace en una ventana modal, para eso, en lugar de poner:
    <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
    colocamos:
    <a expr:href='data:post.location.mapsUrl' class='lightwindow' params='lightwindow_width=800,lightwindow_height=510'><data:post.location.name/></a>



    POST EDICIÓN: Ya está la noticia en Blogger in Draft y también Gem@ hace una reseña del elemento. Todo esto por si es que a alguien le interesa esta maravilla de la tecnología del siglo XXI. Como soy un des-ubicado: paso.

    Ah. Me olvidaba. También las opciones de Importar/Exportar han pasado a ser parte de la Configuración. Según Blogger Buzz, se han "graduado" así que habrá que probarlas nuevamente.

    En teoría, permiten:
    • Crear un backup y descargarlo en la PC
    • Mezclar dos o más blogs en uno
    • Mover entradas de un blog a otro
    • Exportar el blog a otro servicio
    • Importar un blog (sólo si fue exportado desde Blogger mismo)

    El arte de Billy Chasen

    Human Clock

    Click para abrir en una ventana modal.

    Monitor Fish Tank

    Click para ver el video.

    REFERENCIAS:
  • Art of Billy Chasen
  • Integrated Gmail: Todo en la cuenta de correo

    Integrated Gmail es otra interesante extensión experimental para Firefox. Lo que permite es crea ventanas grupos desplegables en la pantalla principal de manera similar a iGoogle o Netvives.



    Por defecto, está pensada para incluir servicios del mismo Google que seleccionamos o agregamos desde las opciones de la extensión: Google Reader, Calendar, Google News, Portfolio, Mapas, Bloc de Notas, Google Groups, Google Sites, Picasa, etc pero, lo más interesante es que no se limita a esto sino que nos permite colocar cualquier URL, absolutamente cualquiera: el escritorio de Blogger, nuestro blog, la Wikipedia, Pandora, last.fm ... lo que se nos ocurra.



    REFERENCIAS:
  • incubaweb.com
  • Día Mundial de Comentar en Blogs

    Sin Miedo nos recuerda que hoy, 10 de diciembre, es el Día Mundial de comentar en los blogs; la iniciativa es de Rorpieth y este será su segundo año.

    Hoy vuelve a ser el día en el que, navegando por la red, uno encuentra blogs muy trabajados, con un diseño y contenido impresionantes, pero que prácticamente no recibe ningún comentario. ¿Qué nos pasa? ¿Dejaremos morir esos blogs tan interesantes, esos blogs que nos ayudaron a solventar dudas o nos informan de los temas que más nos interesan? ¿Dejaremos morir los blogs de aquellos que nos abren las puertas de sus corazónes narrándonos su día a día, sus problemas y alegrías?

    Los comentarios son el alimento de los blogs, la brújula que guía a los autores para saber si lo que escriben tiene interés o no. Un blog sin comentarios está condenado a morir y desaparecer independientemente de su calidad o su contenido…

    margin VS padding (again)

    Suele haber alguna confusión respecto a las diferencias entre las propiedades margin y padding. Es cierto que a veces parecen ser lo mismo o dar el mismo resultado pero son absolutamente diferentes y deben ser usadas adecuadamente para evitar problemas u obtener un resultado correcto (más información).

    Un ejemplo donde colocamos dos rectángulos, uno dentro de otro. El exterior tendrá un color de fondo y el interior otro:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="width: 100%;">
    <div style="padding: 30px; width: 170px;">
    ... el texto o el contenido ...
    </div>
    </div>
    El ancho del rectángulo exterior es 100%, ocupa todo el ancho disponible, dependiendo de dónde esté, será más corto o más largo. El ancho del rectángulo interior es fijo y tiene un valor cualquiera; además tiene agregada la propiedad padding que hace que eso que está dentro de él, se separe de los cuatro bordes.

    Si en lugar de padding usáramos margin, el resultado no sería el mismo:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="width: 100%;">
    <div style="margin: 30px; width: 170px;">
    ... el texto o el contenido ...
    </div>
    </div>
    La diferencia entre ambas propiedades podría resumirse así: margin actua hacia afuera, separa el rectángulo de aquel otro que lo contiene; padding actua hacia adentro, separa el contenido de ese rectángulo de sus propios bordes.

    Pero ¿no lo separa de abajo ni de arriba? Lo hace, pero no lo vemos. Para que el margen sea visible sobre los cuatro lados, el DIV contenedor debe "flotar":

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="float: left; width: 100%;">
    <div style="margin: 30px; width: 170px;">
    ... el texto o el contenido ...
    </div>
    </div>
    Entonces, si quisiera separar el rectángulo del contenedor y además, separar el contenido, debería usar ambas propiedades:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="float: left; width: 100%;">
    <div style="margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
    </div>
    </div>
    Bien. Ahora podemos agregarle un segundo rectángulo y les ponemos la propiedad float a todos ellos así los vemos juntos:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="float: left; width: 100%;">
    <div style="float: left; margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
    </div>
    <div style="float: right; margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
    </div>
    </div>
    Uno, flota hacia un lado y el otro flota hacia el otro.

    Ahora vamos a tratar de verlo con un ejemplo práctico sobre el que muchas veces me han preguntado. Imaginemos que tenemos un rectángulo (un DIV) del que desconocemos su ancho (o varía) y queremos incluir en su interior varios rectángulos más con cierto contenido y que se muestren del mismo tamaño. Por ejemplo, que quede algo como esta imagen:


    Pongamos entonces cuatro rectángulos a los que les damos un ancho fijo:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="float: left; width: 100%;">
    <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
    <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
    <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
    <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
    </div>
    Obviamente, si quedan bien será un milagro ya que desconocemos los tamaños pero, nos queda la aritmética así que pensamos, bueno, dividamos el total en cuatro partes iguales y en lugar de colocar un valor absoluto para width, usemos porcentajes (25%):

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="float: left; width: 100%;">
    <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
    <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
    <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
    <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
    </div>
    No funciona ¿Qué pasa?

    Es que el ancho de width no incluye el padding, así que se lo saco y sólo dejo margin:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Seguimos en la misma. Entonces, le saco margin y dejo padding:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Vemos que uno hace una cosa y otro hace otra pero ninguno resuelve el problema así que le quito ambos:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div style="float: left; width: 100%;">
    <div style="float: left; width: 25%;"> ... </div>
    <div style="float: left; width: 25%;"> ... </div>
    <div style="float: left; width: 25%;"> ... </div>
    <div style="float: left; width: 25%;"> ... </div>
    </div>
    No es lo que quiero pero al menos ahora está dividido en partes iguales.

    Esto es lo fundamental: el ancho es el definido por width + border + padding + margin con ciertas variantes según sea el navegador pero cada una de esas propiedades, hace que el rectángulo sea cada vez más grande así que hay que recurrir a la solución mágica para la mayoría de los problemas de este tipo. Si no podemos alinear un DIV, pongámoslo en otro.

    Yo quiero que esos rectángulos interiores se vean con estas características, que se separen entre si y que el contenido también se separe:
    <div style="margin: 10px; padding: 10px;"> ... </div>
    Así que debo meterlos dentro de otros que son los que flotarán y que medirán el 25% del ancho total:
    <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
    </div>
    Por último, meteré todo eso en el primer rectángulo:
    <div style="width: 100%; float: left;">
    <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
    </div>
    <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
    </div>
    <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
    </div>
    <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
    </div>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Si quiero distribuirlos de manera pareja, en lugar de colocar en todos ellos un margen igual para los cuatro lados, coloco un margen derecho igual a 0 en los tres primeros:
    margin: 10px 0 10px 10px;
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    La propiedad margin me permite ubicarlos sin problemas, más arriba o más abajo si fuera necesario.

    La propiedad padding me permite manejar el contenido sin que cambien los anchos y nada se descoloque.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    JavaScript Upload: Alojar scripts gratuitamente

    Hace ya un tiempo, Pizcos mostraba en uno de sus links favoritos de octubre, un sitio llamado Java Script Upload. Un poco tarde, he decidio ir a mirarlo ya que siempre me pareció que podía ser una alternativa a los que usamos Blogger y no disponemos de servidores donde alojar este tipo de archivos.

    Vale la pena. Es gratuito, no hay necesidad de registrarse y podemos subir el archivo desde nuestra PC o escribirlo en un editor que ellos proveen. Cualquiera sea el método, el archivo será guardado en uno de sus servidores y el acceso no tiene restricciones ya que nos dan el enlace correspondiente.

    Lo probé modificando un poco un script llamado Tic Tac Toe que encontré en Dynamicdrive y, al parecer, funciona perfectamente.


    NIVEL 0 : Para ganar fácil.
    NIVEL 1 : Versión original.
    NIVEL 2 : Puede ganarse.
    NIVEL 3 : Imposible ganar.



    Es una pena que aún no se permitan crear cuentas aunque parece que en un futuro será así. De todas manera, este tipo de sitios debe usarse prudentemente y alojar cosas pequeñas de las que tengamos copias guardadas ya que nunca sabemos si el proyecto durará o no.

    El post paranoico


    ¿Qué sabe Google de nosotros?
    • Si se usa Adwords: nuestro perfil de comprador y nuestros planes de marketing
    • Si se usa Adsense: con que sitios ganamos dinero (o perdemos), cómo segmentar los anuncios y cuánto pagarnos
    • Si se usan las Alertas: saben qué cosas nos importan saber
    • Si se usa Analytics: conocen los sitios que monitoreamos, sus variaciones y sus tendendencias
    • Si se usa Blogger: saben sobre lo que escribimos, cada palabra, cada frase, cada enlace ... TODO
    • Si se usa Calendar: saben a dónde fuimos o a dónde iremos, qué haremos y qué dejaremos de hacer
    • Si se usa Google Directorio: saben que queremos y que compramos
    • Si se usa Chrome: conocen cada sitio por el que navegamos en internet
    • Si se usa Google Desktop: conocen todo lo que tenemos en nuestra computadora
    • Si se usa Google Docs: saben que estamos escribiendo un programa de codigo abierto que compertirá con ellos y nos ofrecerán U$S30 por él ya que también saben que en nuestra cuenta de banco estamos sobregirados
    • Si se usa Google Earth: saben dónde nos gustaría estar o si pensamos lanzar misiles
    • Si se usa FeedBurner: saben todo sobre nuestros sitios y nuestros lectores
    • Si se usa Google Finanzas: conocen nuestro patrimonio y lo que haremos con él
    • Si se usa Gmail: saben todo, simplemente todo ... sí ... eso también
    • Si se usan los Grupos de Google: saben de nuestros miedos, nuestras penas y si creemos en platos voladores
    • Si se usa la búsqueda de imágenes: saben de nuestra debilidad por Britney Spears, el chocolate amargo y eso no es nada, saben todo eso que ya se imaginan
    • Si se usa la búsqueda local: saben donde estamos y pueden seguirnos
    • Si se usa Google Maps: saben donde deberíamos estar
    • Si se usa Google Reader: conocen nuestros intereses
    • Si se usa el buscador (cualquiera de ellos): conocen todas y cada una de las búsquedas que hemos realizado
    • Si se usa Google Talk: saben quienes son nuestros amigos y qué decimos a sus espaldas
    • Si se usa Google Toolbar: conocen todos los sitios que visitamos
    • Si se usa Google Translate: saben que no sabemos inglés ni alemán ni chino
    • Si se usa Google Video o YouTube: saben los géneros que nos gustan, incluyendo esos que no nos atrevemos a mostrar a nadie
    Tranquilos. La mayor parte de esas cosas, no les interenesan absloutamente a nadie.

    REFERENCIAS:
  • Google Discovery
  • Probando Zoundry Raven a pedido de Anahí

    Aprovechando el sábado, el fin de semana largo y a solicitud de Anahí, probemos el programa.

    Lo primero que hice fue descargar las actualizaciones cosa que está haciendo sin problemas mientras escribo esto. Como todo editor, hay dos formas de usarlo, desde la pestaña DESIGN o desde la pestaña XHTML que es lo que suelo hacer normalmente por el tipo de entradas de mi blog ya que sino, es casi imposible escribir o probar códigos complejos pero ... veremos risa

    Primero, usamos los formatos comunes, negrita, itálica, subrayado, tachado. Eso no debería tener problemas o lo tendríamos que tirar a la basura antes de empezar. Lo mismo debería ocurrir con la selección de fuentes donde hay muchísimas más posibilidades que en Blogger ya que podemos agregar cualquier fuente de nuestra PC (aunque no todas se verán online) y además, establecer un color de fondo:



    Y ya que estamos, probamos la opción FORMAT/INSERT HTML TAGS; al desplegarla, nos muestra una lista de etiquetas comunes que podemos insertar, elijo PRE para mostrar el código y se agrega sin problemas.

    <span style="BACKGROUND-">fuentes</span>

    Como se ve, el código insertado es normal y utiliza SPAN y el atributo style. También hay otra opción que permite insertar etiquetas de bloque como encabezados. Un detalle importante es que desde DESIGN, los símbolos < y > se transformarán en las entities &lt; y &gt; de manera automática, lo cual hace sencillo escribirlos. La alineación tampoco es problema y usa etiquetas P en lugar de DIV.


    Para citas está la etiqueta BLOCKQUOTE como en cualquier otro editor y en todos los casos podemos editar el XHTML para agregar atributos class, ID o cualquier otro.

    Ahora, agregamos un enlace y vemos que tiene una buena cantidad de opciones como establecer class, target, title y otros atributos. Eventualmente, también podemos agregar enlaces a ciertos sitios buscadores como Goggle y YouTube. Por ejemplo, puedo colocar un enlace a la Wikipedia que me dirija a una cierta palabra como internet, simplemente señalando la palabra.



    Para quienes hacer tablas es engorroso, nos permite crearlas con un par de clicks aunque el tema de los saltos de linea deberá ser corregido manualmente:


    celda 1celda 2
    celda 3celda 4


    Faltarían las imágenes. En mi caso es más complicado porque suelo alojarlas en Blogger mismo pero, no importa, ahora usaré una que ya existe así que la opción es INSERT IMAGE TAG:


    zoundry raven

    avatarmoulinrougemb3.gifSi quisiera utilizar una de mi PC y subirla directamente a un servicio de alojamiento, elegiría INSERT IMAGE FILE y, en este caso, se alojaría automáticamente en ImageShack que es la opción que elegí.

    Las imágenes pueden mostrarse normalmente o bien transformarlas en miniaturas desde el mismo editor

    Por último lo publico como borrador y veo el resultado. Enseguida aparecerá en la lista así que voy a editarlo un poco desde el programa pero, esta vez desde el código mismo que es lo que acostumbro a hacer.

    Mi problema con estos editores es encontrar un equilibrio entre los saltos de línea automáticos que suelen agregarse y mis propias opciones en la configuración. Aparentemente, eso es algo que tratan de corregir en el nuevo editor que puede usarse desde Blogger Draft pero que aún no está completamente desarrollado. De todas maneras, una vez terminada la edición, vuelvo a publicarlo y este es el resultado con una serie de detalles corregidos desde el mismo Blogger.


    En resumen, Zoundry Raven es una buena herramienta y cada cuál verá que uso pude darle. No hay ninguna perfecta pero tampoco ninguna absolutamente inútil. No hay mejores ni peores, sólo unas que nos resultan más cómodas o más incómodas, que sabemos manejar o que nos resultan complicadas. El resultado es lo que cuenta y las decisiones son individuales.

    En lo personal, no podría usarla para este blog pero eso es subjetivo, sin embargo, pese a eso, me resulta útil para otras cosas como mantener un backup, buscar enlaces o imágenes que no recuerdo donde están y cosas por el estilo. Lo ideal sería que Blogger incorporara algunas de las opciones para ampliar las posibilidades de los enlaces y las imágenes ya que para muchos, resulta engorroso escribir código HTML.

    Zoundry Raven: Edición de blogs


    En varias oportunidades se habló de Editores de blogs de escritorio. Ya lo repetí muchas veces: sigo usando ScribeFire que no es otra cosa que una extensión para Firefox y, aunque reconozco que Windows Live Writer es un buen soft, siempre tuve una debilidad por Zoundry Raven que funcionaba muy bien en WordPress pero que para Blogger era limitado y problemático.

    Hoy, me he decidio a probarlo otra vez instalando la nueva versión 1.0.375 para Windows a ver que pasaba y hay buenas noticias. La fundamental, para mi gusto, es que ya no existe la limitación en cuanto a cantidad de posts y es posible descargar y por lo tanto editar y manejar, el contenido íntegro del blog, en mi caso, las 2001 entradas (publicadas y borradores), las 6850 imágenes y los 14140 enlaces lo que no es poca cosa.

    ¿Que es un editor de blogs de escritorio? Un programa que instalamos y que nos permite majear un blog sin necesidad de usar el navegador o ingresar en los servicios. La mayor ventaja es que nos permite administrar varios con una sola aplicación, estén o no en la misma cuenta o en la misma plataforma. Podemos acceder a Blogger, WordPress o cualquier otro de los servicios admitidos que son muchos y, desde el programa, editar o publicar directamente.


    Una vez que hemos decidido si lo instalamos normalmente o en su versión portable, nos pedirá que creemos un perfil (puede haber varios) y aparecerá una pantalla de bienvenida. Conviene entonces que miremos las opciones generales en TOOLS | PREFERENCES para cambiarlas si es necesario o queremos hacerlo.

    Ahora, es tiempo de agregar las cuentas que queremos manejar desde TOOLS | ACCOUNT MANAGER. Colocamos la URL del blog y esperamos que sea detectado. Si todo está bien, nos mostrará una ventana con la mayor parte de los datos completados y sólo deberemos agregar nuestro ID de usuario y la contraseña.


    Habiendo ingresado correctamente, nos mostrará la lista de blogs asociados a esa cuenta y seleccionaremos los que queremos descargar. Eventualmente, haciendo click en MEDIA MANAGER podemos seleccionar algunos de los servicios disponibles asociados si queremos utilizar el programa para subir las imágenes directamente.


    Todo listo y el programa comienza a descargar nuestro blog.


    Por defecto, descargará un máximo de 200 posts así que luego deberemos descargar el resto.

    Ahora que ya está todo listo, veremos una carpeta para cada blog y dentro de ella, subcarpetas que nos permiten acceder a las entradas mediante ciertos filtros.

    POSTS no mostrará la lista ordenada por título o por fecha, haciendo click en cada uno de ellos, veremos un sumario (incluyendo las imágenes) y con doble click podremos editarlos. Lo mismo ocurrirá con TAGS que nos lista las etiquetas y podemos ver/editar las entradas asociadas.

    Las funciones interesantes son las que se muestran como IMAGES y LINKS Con la primera, lo que veremos será un listado de imágenes ordenadas según el servidor donde estén alojadas y haciendo click en cada una, nos mostrarán una miniatrura, los datos de la imagen y en que entrada se encuentran. Lo mismo pasará con los enlaces de los posts; aparecerán ordenados y nos indicará donde están de tal manera que es muy sencillo encontrar un error y editarlo.

    Para cargar el resto de las entradas, simplemente nos colocamos en la cuenta y con el botón derecho, seleccionamos DOWNLOAD POSTS y la cantidad a descargar. El proceso llevará más o menos tiempo de acuerdo a nuestro contenido pero, podemos dejarlo trabajar en el fondo y hacer otra cosa.


    Esto, sólo lo haremos una vez, luego en cualquier momento, podemos usar la opción REFRESH/SYNC para recargar modificaciones o agregados.


    El editor es relativamente sencillo pero tiene una buena cantidad de opciones, etiquetas varias, atributos para imágenes y enlaces, tablas, la posibilidad de validar el código y eliminar de forma automática las etiquetas inútiles e incluso, la opción de publicar un mismo artículo en varios blogs de manera simultánea

    REFERENCIAS:
  • Zoundry Raven Blog
  • How To
  • Zoundry Raven Forum
  • YouTube: Novedades, problemas y burradas

    Seguramente ya vimos que YouTube ha cambiado muchas cosas en estos días y una de las más evidentes es que el reproductor se ha vuelto "ancho". Siguiendo la moda, ha pasado de mostrar la típica relación  4:3 por la nueva 16:9 que es la tendencia de la llamada TV de alta definición.

    En lo personal, no me gusta en absoluto, esos espacios en negro a los costados son molestos y ya que la mayoría de los videos tienen ese ratio, casi son inevitables. Más racional hubiera sido que el reproductor se adaptara a la proporción del video original pero, la moda es la moda y andá a discutir con YouTube.

    Sin embargo, aún hay una dicotomía entre el formato de las páginas de YouTube y los reproductores que insertamos en nuestros sitios ya que no hay un código u opción disponible para usar esta "maravilla".

    Por suerte, si alguien quiere, Geekets da la solución y es sencilla ya que sigue el mismo esquema de todas las otras opciones, sólo se trata de agregar parámetros.

    Vemos. Primero, necesitamos el ID del video que es el que nos muestra la misma página, por ejemplo:

    http://es.youtube.com/watch?v=oGlhgVz5r6E

    así que en una etiqueta OBJECT normal colocaríamos esto como URL:

    http://www.youtube.com/v/oGlhgVz5r6E

    Ahora, le agregaremos los parámetros:

    http://www.youtube.com/v/oGlhgVz5r6E&fmt&fs=1&ap=%2526fmt%3D22

    donde:

    &fmt es el formato; algo similar a lo que usábamos para insertar videos de alta resolución (más información)

    &fs=1 es lo que usamos para habilitar posibilidad de ver los videos en pantalla completa y es opcional

    &fs=1&ap=%2526fmt%3D22 es el parámetro para mostrar el vídeo en formato wide-screen y en alta calidad

    Así que el código de un ejemplo sería este:
    <object width="490" height="300" type="application/x-shockwave-flash" data="http://www.youtube.com/v/oGlhgVz5r6E&fmt&fs=1&ap=%2526fmt%3D22">
    <param name="allowfullscreen" value="true" />
    <param name="src" value="http://www.youtube.com/v/oGlhgVz5r6E&fmt&fs=1&ap=%2526fmt%3D22" />
    </object>


    ¿Y que pasa si colocamos un video con estos parámetros y ese video no está disponible en la nueva versión?

    Entonces, se producirá un error y se nos dirá que el video no está disponible así que podremos hacer dos cosas, o usamos el código común o bien cambiamos el parámetro. En lugar de:

    &fs=1&ap=%2526fmt%3D22 (inserta el vídeo con una resolución 1280×720)

    ponemos:

    &fs=1&ap=%2526fmt%3D18 (inserta el vídeo con una resolución 480×270).

    &fs=1&ap=%2526fmt%3D22 = ERROR&fs=1&ap=%2526fmt%3D18 = OK
    Click para ver el video.

    Otra novedad "indeseada" es la aparición de esa porquería de barra de buscador encima de todos los videos incrustados ¿A quién se le ocurre semejante barbaridad? Si YouTube quiere publicidad, que lo haga de otra forma, no tiene sentido que los videos insertados tengan un buscador ahí, colóquenlo en otro lado XD

    Por suerte, tiene solución y la trae Incubaweb. Hay que agregar un parámetro al video (otro más):

    &showsearch=0

    así que, en el ejemplo anterior, el código final sería este:
    <object width="490" height="300" type="application/x-shockwave-flash" data="http://www.youtube.com/v/oGlhgVz5r6E&showsearch=0&fmt&fs=1&ap=%2526fmt%3D22">
    <param name="allowfullscreen" value="true" />
    <param name="src" value="http://www.youtube.com/v/oGlhgVz5r6E&showsearch=0&fmt&fs=1&ap=%2526fmt%3D22" />
    </object>


    Habrá que acostumbrarse a agregarlo en todos a menos que se den cuenta que es un error conceptual y que con eso, sólo consiguen que los usuarios terminen por desistir de usar el servicio.

    ¿Más cosas? Google Operating System dice que se muestra la duración del video sobre el thumbnail que ya no es seleccionado desde los frames 25/50/75 como hasta ahora (las tres imágenes disponibles):

    <img src="http://img.youtube.com/vi/ID_video/1.jpg" />
    <img src="http://img.youtube.com/vi/ID_video/2.jpg" />
    <img src="http://img.youtube.com/vi/ID_video/3.jpg" />

    lanacion.com dice que se están tomando medidas para regular los contenidos: "si bien los videos con imágenes pornográficas o actos sexuales son retirados siempre que sean reportados, estamos siendo más estrictos con aquellos videos con contenidos sexuales 'sugerentes' pero no prohibidos".

    El anuncio, efectuado en el blog oficial de YouTube tiene miles de comentarios criticos al respecto ya que nadie ha aclarado cuales son las reglas y quién es el que las hará cumplir. Todo, como siempre, parece ser sólo una necesidad comercial para evitar juicios y lo único que se les ha ocurrido es censurar sin explicaciones para evitarse problemas.

    Algunos de los comentarios que allí se muestran son tan claros que no vale la pena agregar nada más: "Pueden hacer lo que quieran, pero deben ser conscientes que son los usuarios los que mantienen vivo a YouTube".

    Actualizando las librerías de Google

    Aquellos que estén usando las AJAX Libraries API de Google para cargar Prototype + Scriptaculous deberían verificar si están actualizadas a la nueva versión. Para esto, basta mirar el código ingresado que, en este momento, debería ser el siguiente:
    <script src='http://www.google.com/jsapi'/>
    <script>
    google.load(&quot;prototype&quot;, &quot;1.6.0.3&quot;);
    google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
    </script>
    Por lo menos, en mi caso, las versiones eran anteriores y es bueno cambiarlas para estar siempre actualizado.

    Vale la pena recordar que Google dispone de varias librerías que pueden utilizarse de modo similar y este método tiene algunas ventajas con respecto a tenerlas en servidores propios, sobre todo, si usamos Blogger:

    google.load("jquery", "1.2.3");
    google.load("mootools", "1.2.1");
    google.load("dojo", "1.2.0");

    Además, en los últimos días, han incorporado dos nuevas:

    swfobject es una librería muy utilizada para inserta archivos de Flash (más información):

    google.load("swfobject", "2.1");

    y Yahoo! User Interface Library (YUI) que es la librería creada por Yahoo y que incluye multitud de técnicas y controles:

    google.load("yui", "2.6.0");

    Todas ellas también pueden usarse sin necesidad de insertar el cargador de Google, escribiendo directamente la etiqueta SCRIPT con la URL correspondiente; por ejemplo:
    <script type='text/JavaScript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js'></script>

    La ventanas ...

    Las ventanas según el diseñador John Nouanesinghas



    REFERENCIAS:
  • crookedbrains.net
  • Alguien a tu lado



    No importa quién eres
    no importa hacia donde vayas
    siempre necesitas alguien a tu lado.

    Playing For Change: Peace Through Music

    Los fracasos de Google

    Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively
    Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively
    Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively
    Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively Lively

    Lively es el nuevo virus ... no de esos que roban datos sino de los otros, esos que se expanden como reguero de pólvora. Es inevitable. Google hace algo y nosotros hablamos de ello.

    Sí, ya sé. Ese texto es repetido, fue publicado hace añares, en julio de este año y apenas cinco meses después, el GRAN PROYECTO de Google se murió sin pena ni gloria. Pero no se rinden, quien tener una red social y ahora se dice que todos estos cambios en GMail no son otra cosa que el prefacio de un nuevo servico al que algunos llaman News Feeds, algo que pretende competir con Facebook.

    "Google llevaría algún tiempo preparando dentro de Gmail la posibilidad de estar al tanto de la actividad de tus amigos dentro de los distintos servicios de Google (un nuevo vídeo en YouTube, un restaurante recomendado en Google Maps, una foto en Picasa Web, un post en Blogger, ...)" [más información].

    No es el primer fracaso de Google, tampoco el segundo. Según google.dirson hay varios, algunos conocidos y  otros no:
    • Google Answers: era un servicio de respuestas pago.
    • Google Voice Search: era un servicio de búsquedas por voz.
    • Google Compute: era una aplicación que cedía parte de los recursos de nuestra PC para realizar los cálculos necesarios para obtener soluciones a distintas enfermedades.
    • Google Scout: era un botón que se instalaba en el navegador y permitía buscar páginas de temática similar a la que estábamos visitando.
    • Google Video: es una incógnita, pasó por varias etapas y nadie sabe qué quieren hacer con él.
    • Google Browser Sync: era una una extensión para Firefox que permitía sincronizar marcadores y constraseñas guardadas independientemente de la PC a la que estuviésemos conectados.
    • Las APIs para búsquedas desde cualquier aplicación se abandonaron en diciembre del 2006.
    • Google Deskbar: una utilidad para Windows que permitía realizar búsquedas sin necesidad de abrir el navegador.
    • Google X: un buscador al estilo Apple que duró escasas 24 horas.
    • SearchMash: un proyecto para que Google pudiese testear el comportamiento de los usuarios frente a nuevas funcionalidades del buscador.
    • Google Web Accelerator" para intentar que las páginas se descargaran rápido a través de los servidores de Google.
    • Google Music Trends: un servicio para analizar los gustos musicales de los usuarios que utilizan Google Talk.
    • Blogger: ah, no, por ahora no pero lo disimula bien diablo2

    Textos con fondos degradados

    La técnica de Simple Dither Effect es sencilla y muy original. La idea es darle un efecto degradado a un texto cualquiera utilizando sólo CSS.

    Aunque los archivos de ejemplo están disponibles en la pagina del autor, en realidad es muy fácil de aplicar y la clave es tener una imagen adecuada.

    Estos son dos modelos [1][2]

    Primero, vamos a crear la definición CSS que podemos agregar al plantilla antes de </b:skin>:
    .fade{
    background: url(URL_imagen.png) repeat-x 0 bottom;
    display: block;
    height: 200px; /* es la altura de la imagen */
    margin-top: -200px; /* es el valor inverso de la altura de la imagen */
    position: relative;
    z-index: 10;
    }
    Ahora, simplemente colocamos el texto y al final de este, agregamos un DIV con esa clase; por ejemplo:
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing ....</p>
    <div class="fade"></div>
    ¿Qué ocurrirá?

    Ese DIV es un rectángulo sin contenido, sólo tiene una imagen de fondo y al poner un margen superior negativo, lo que pasará es que se superpondrá al texto.

    Dos ejemplos prácticos:

    EJEMPLO 1 - Fondo blanco

    Sed commodo aliquet pede. Aenean vel leo vitae erat sagittis elementum. Duis bibendum. Vestibulum euismod pede vitae nisi. Nunc hendrerit sagittis turpis. Nulla facilisi. Integer tincidunt, tellus quis dictum auctor, massa augue volutpat leo, a eleifend erat purus vel nulla. Pellentesque ac mauris sit amet odio scelerisque consequat. Donec justo. Aliquam sapien lectus, luctus sit amet, posuere et, scelerisque vitae, metus. Etiam a mauris. Etiam rhoncus pellentesque massa. Praesent consectetuer eros in sapien sagittis rhoncus. Donec aliquam ligula a risus. Phasellus sagittis mattis lectus.

    EJEMPLO 2 - Fondo negro

    Sed commodo aliquet pede. Aenean vel leo vitae erat sagittis elementum. Duis bibendum. Vestibulum euismod pede vitae nisi. Nunc hendrerit sagittis turpis. Nulla facilisi. Integer tincidunt, tellus quis dictum auctor, massa augue volutpat leo, a eleifend erat purus vel nulla. Pellentesque ac mauris sit amet odio scelerisque consequat. Donec justo. Aliquam sapien lectus, luctus sit amet, posuere et, scelerisque vitae, metus. Etiam a mauris. Etiam rhoncus pellentesque massa. Praesent consectetuer eros in sapien sagittis rhoncus. Donec aliquam ligula a risus. Phasellus sagittis mattis lectus.


    REFERENCIAS:
  • Cosas Sencillas
  • 20 servicios de estadísticas y contadores

    1. Addzz: posee contadores de diferentes modelos con aceso limitado a las estadísticas.
    2. AdEmails: ofrece estadísticas y contadores de visitas. Nos registramos con nuestro mail y debemos agregar un botón en la página. Recuerdo haberlo usado en los inicios del blog y me pareció bastante limitado.
    3. Amazing Counters: varios modelos de contadores de visitas.
    4. AWStats: es una aplicación de código abierto, muy completo pero no es aplicable en Blogger ya que requiere ser instalado. Muy interesante para probar en WordPress si disponemos de un servidor propio (VER DEMO).
    5. EasyTrafficCounter: no es un servicio de estadísiticas sino un contador de visitas.
    6. Estadisticasgratis.com: sencilla de usar pero agrega publicidad.
    7. Extreme Tracking: es un servicio con limitaciones (en inglés).
    8. Free Hit Counter: provee información general de estadísticas pero la versión gratuita incluye publicidad.
    9. Google Analytics: es la opción más común y probablemente una de las más completas. Para usarla, sólo necesitamos una cuenta de Google.
    10. Hispavisitas: no me convence (VER DEMO)
    11. histats: otro de los servicios más utilizados, disponible en varios idiomas.
    12. Libestad: es un servicio nuevo en español.
    13. micodigo: es un contador de visitas.
    14. Php-Stats: otro programa de estadísticas que debe ser instalado en un servidor propio.
    15. Site Meter: no es muy completo pero es sencillo de usar; es uno de los que utilizo actualmente.
    16. Stat Counter: uno de los más conocidos y de los más completos. Muy recomendable.
    17. Webstats: bastante limitado (VER DEMO)
    18. webstats4u: todo lo que sea de Motigo es de cuidado, agrega popups de publicidad muy intrusivas. "With the use of motigo products and services it is accepted that we has the right to place advertisements on the site in any format or through any channel, including but not limited to e-mail, layer ads, pops, banners and other usual formats." Evitarlo.
    19. Whos.amung.us: un contador gráfico que usé un tiempo hasta que me aburrió.
    20. XiTi; es un servicio profesional que dispone de una versión ligera y gratuita para sitios personales.

    REFERENCIAS:
  • Geekets
  •