<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:gd='http://schemas.google.com/g/2005' xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-8787563829993934830</id><updated>2011-08-20T08:23:58.462-07:00</updated><category term='MVC'/><category term='Video'/><category term='vago'/><category term='apple'/><category term='TEST'/><title type='text'>kohacku blog...</title><subtitle type='html'>Desarrollo web y otros menesteres</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>13</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-8180643876602461447</id><published>2010-11-22T12:16:00.000-08:00</published><updated>2010-11-22T12:23:21.386-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='apple'/><title type='text'>Apple lanza iOS 4.2</title><content type='html'>Me pregunto si algún día tendré esto en casa y no solo en vídeo =(&lt;br /&gt;&lt;br /&gt;&lt;object height="300" width="480"&gt;&lt;param name="movie" value="http://www.youtube.com/v/PGWFXTn7WAE?fs=1&amp;amp;hl=es_MX"&gt;&lt;param name="allowFullScreen" value="true"&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;embed src="http://www.youtube.com/v/PGWFXTn7WAE?fs=1&amp;amp;hl=es_MX" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="340" width="560"&gt;&lt;/embed&gt;&lt;/object&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-8180643876602461447?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/8180643876602461447/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=8180643876602461447' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/8180643876602461447'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/8180643876602461447'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2010/11/apple-lanza-ios-42.html' title='Apple lanza iOS 4.2'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-2184811944050402196</id><published>2008-05-30T13:27:00.000-07:00</published><updated>2008-05-30T13:31:25.024-07:00</updated><title type='text'>El HP 2133 Mini-Note y Eee PC 900</title><content type='html'>&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_DWsx_8jgl_I/SEBkBOsepwI/AAAAAAAAAEE/UOM3t00DSRg/s1600-h/e900.jpg"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://1.bp.blogspot.com/_DWsx_8jgl_I/SEBkBOsepwI/AAAAAAAAAEE/UOM3t00DSRg/s320/e900.jpg" alt="" id="BLOGGER_PHOTO_ID_5206271141527594754" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_DWsx_8jgl_I/SEBkBesepxI/AAAAAAAAAEM/9a0lhMAvm7c/s1600-h/mini-note-con-windows-xp.jpg"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://2.bp.blogspot.com/_DWsx_8jgl_I/SEBkBesepxI/AAAAAAAAAEM/9a0lhMAvm7c/s320/mini-note-con-windows-xp.jpg" alt="" id="BLOGGER_PHOTO_ID_5206271145822562066" border="0" /&gt;&lt;/a&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-2184811944050402196?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/2184811944050402196/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=2184811944050402196' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2184811944050402196'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2184811944050402196'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/05/el-hp-2133-mini-note-y-eee-pc-900.html' title='El HP 2133 Mini-Note y Eee PC 900'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_DWsx_8jgl_I/SEBkBOsepwI/AAAAAAAAAEE/UOM3t00DSRg/s72-c/e900.jpg' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-5822091643741291369</id><published>2008-05-30T12:27:00.000-07:00</published><updated>2008-05-30T12:29:03.571-07:00</updated><title type='text'>.htaccess Examples Library</title><content type='html'>&lt;span style="font-weight: bold;"&gt;Bueno para redireccion de archivos php, protecccion por password, redireccion de urls, etc...&lt;br /&gt;&lt;/span&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-5822091643741291369?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/5822091643741291369/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=5822091643741291369' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/5822091643741291369'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/5822091643741291369'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/05/htaccess-examples-library.html' title='.htaccess Examples Library'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-2452926043899404357</id><published>2008-05-30T11:43:00.001-07:00</published><updated>2008-05-30T11:43:58.343-07:00</updated><title type='text'>Cómo mejorar la indexación y el posicionamiento en Google</title><content type='html'>http://www.cristalab.com/tips/56626/como-mejorar-la-indexacion-y-el-posicionamiento-en-google&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-2452926043899404357?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/2452926043899404357/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=2452926043899404357' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2452926043899404357'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2452926043899404357'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/05/cmo-mejorar-la-indexacin-y-el.html' title='Cómo mejorar la indexación y el posicionamiento en Google'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-6281473134280354834</id><published>2008-05-30T11:05:00.000-07:00</published><updated>2008-05-30T11:33:42.115-07:00</updated><title type='text'>Recursos Web para administracion de proyectos</title><content type='html'>&lt;span style="font-weight: bold;"&gt;Recursos Web para administracion de proyectos...&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;http://woork.blogspot.com/2007/12/gantt-chart-with-editgrid-online.html&lt;br /&gt;http://woork.blogspot.com/2007/11/using-google-spreadsheets-to-implement.html&lt;br /&gt;http://woork.blogspot.com/2007/11/project-management-project-plan-with.html&lt;br /&gt;http://woork.blogspot.com/2007/12/gantt-chart-by-using-google.html&lt;br /&gt;http://woork.blogspot.com/2008/02/project-management-excel-gantt-chart.html&lt;br /&gt;http://www.streber-pm.org/&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-6281473134280354834?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/6281473134280354834/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=6281473134280354834' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/6281473134280354834'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/6281473134280354834'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/05/recursos-web-para-administracion-de.html' title='Recursos Web para administracion de proyectos'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-3023343029505007209</id><published>2008-04-22T09:33:00.001-07:00</published><updated>2008-04-22T09:33:53.741-07:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='MVC'/><title type='text'>MVC</title><content type='html'>&lt;span style="font-weight: bold;"&gt;Model - Gatekeeper to data&lt;/span&gt;&lt;br /&gt;&lt;span style="font-style: italic;"&gt;El papel de las "Funciones"&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style="font-weight: bold;"&gt;Views - Templates&lt;/span&gt;&lt;br /&gt;&lt;span style="font-style: italic;"&gt;Presentacion de datos&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span style="font-weight: bold;"&gt;Controller - Orchestrate&lt;/span&gt;&lt;br /&gt;&lt;span style="font-style: italic;"&gt;Rumbos a seguir (Bucles, ifs, switchs, fors...)&lt;br /&gt;&lt;br /&gt;&lt;a href="http://es.wikipedia.org/wiki/Modelo_Vista_Controlador"&gt;Mas alla de mi entedimiento =)...&lt;/a&gt;&lt;/span&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-3023343029505007209?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/3023343029505007209/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=3023343029505007209' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/3023343029505007209'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/3023343029505007209'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/04/mvc.html' title='MVC'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-6173038919646719107</id><published>2008-04-22T09:06:00.001-07:00</published><updated>2008-04-22T09:06:46.250-07:00</updated><title type='text'>Gatekeeper</title><content type='html'>Influencia de ciertos mediadores en la modificación de la comunicación de masas. Son los editores de periódicos, revistas, programas de TV. La función del gatekeeper es evaluar el contenido de los mass media con el fin de determinar su relevancia y valor para las audiencias. Pueden…&lt;br /&gt;&lt;br /&gt;1. Rechazar un mensaje.&lt;br /&gt;2. Incrementar su importancia.&lt;br /&gt;3. Disminuir su importancia.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-6173038919646719107?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/6173038919646719107/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=6173038919646719107' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/6173038919646719107'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/6173038919646719107'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/04/gatekeeper.html' title='Gatekeeper'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-1277138755763681475</id><published>2008-04-03T14:43:00.001-07:00</published><updated>2008-04-03T14:43:40.282-07:00</updated><title type='text'>Sofa Naranja - GTD con Quicksilver, Mail.app y Actiontastic (Primera Parte)</title><content type='html'>&lt;blockquote cite="http://sofanaranja.com/2007/01/17/gtd-con-quicksilver-mailapp-y-actiontastic-primera-parte/"&gt;GTD con Quicksilver, Mail.app y Actiontastic (Primera Parte)Nota: en este post presupongo que ya sabes qué es GTD y Quicksilver, y que tienes cierta curiosidad por mejorar tu flujo de trabajo y la gestión de tu tiempo.Si lo de GTD te suena a siglas de un partido político, te recomiendo que te des un paseo por estos enlaces:    * La web de David Allen, creador de “Getting Thing Done”    * De la misma web, “What is GTD?”En castellano no he encontrado nada en Google, a pesar de que el libro lleva unos meses publicado en nuestro idioma. Si alguien conoce algún recurso interesante sobre GTD en castellano, que avise en los comentarios.EmpezamosEste post no pretende ser un curso completo de GTD. Es, simplemente, una recolección de técnicas que uso a diario para gestionar el trabajo.Vaya por delante que es más GTD en la filosofía que en la práctica. GTD es una técnica que requiere disciplina, y eso es algo de lo que siempre he carecido :)En primer lugar, voy a exponer sobre qué 3 bases se apoya mi flujo de trabajo:Flow Stateo la capacidad para “desconectar” del entorno y concentrarte exclusivamente en la tarea que tienes entre manos. También conocido como “la zona”. Si no sabes de qué estoy hablando y trabajas con ordenadores, te debes a ti mismo leer este artículo e investigar sobre el tema.Inbox 0o “0 mensajes en la bandeja de entrada”. Un poco más adelante contaré por qué es importante y cómo se consigue.Memoria 0que es una medida simple para reducir el stress: deja de mantener en la cabeza listas de cosas. Hay mil herramientas para esto, y una de ellas es perfecta para ti.Mis herramientasComo ya digo, hay cientos de herramientas para gestionar tu flujo de trabajo. Basecamp, Backpack, Remember The Milk, Palms, Smartphones, agendas, Moleskines, servilletas, pizarras…Cada persona es un mundo, y se sentirá mejor usando una u otra según su personalidad o el contexto de trabajo. Por ejemplo, Basecamp es una muy buena herramienta en el trabajo, pero para casa prefiero Backpack. Un buen lugar donde mantenerse informado sobre estas herramientas es el blog de Merlin Mann: 43 folders.Personalmente, mi arsenal para GTD consiste en:    * una agenda de papel, con anillas. Después de usar varias PDAs, teléfonos, wikis, Outlook… siempre acabo confiando en algo que casi nunca falla: el papel.    * Mail.app, el cliente de correo de Apple. Para gestionar el correo Como Dios Manda™ tienes que usar una cuenta IMAP. Se puede decir más alto, pero no más claro :)    * Quicksilver, el programa definitivo que vale para (casi) todo.    * MailActOn, un plugin para Mail.app que vale su peso en oro.    * Actiontastic, un descubrimiento reciente que me ha conquistado (y que es en realidad el culpable de que esté escribiendo este post)Inbox 0El concepto de “Inbox 0″ lo acuñó Merlin Mann, y en 43 folders tienen una sección especial dedicada al asunto.La bandeja de entrada de nuestro cliente de correo es la puerta por donde entra hoy por hoy la mayoría de nuestro trabajo, en forma de citas, tareas, recordatorios o los malditos “coñacitos de reenviar”.Si miras tu bandeja de entrada y tienes 450 mails, 37 de ellos sin responder y 15 marcados como “Urgente” puedes pensar que tienes un problema de saturación, pero lo más probable es que simplemente te falte sólo un poco de organización.Merlin Mann publicó un truco infalible para vaciar tu bandeja de entrada: mueve todos los mensajes a otra carpeta.Sí, yo también me reí mucho cuando lo leí por primera vez.Y luego lo probé.Y entonces dejé de reirme.Adelante. Crea una carpeta “@archivo” (la arroba es para que salga la primera en la lista de carpetas) y arrastra todos los correos de la bandeja de entrada.Vaciando la bandeja de entradaSi no te atreves (como me pasó a mí la primera vez que lo intenté :) deja sólo los correos de la última semana. O el último mes. O del tiempo que necesites para sentirte a salvo. Pero mentalízate de que el objetivo final es este:Inbox ZeroPara archivar los mensajes que vayan llegando a partir de ahora, vamos a usar una convención de GTD: los contextos.Un contexto es un “sitio” en el que se realiza una tarea. Aquí “sitio” puede ser un lugar físico, un programa, un estado mental…Mis contextos en Mail.app son:    * @archive, donde se guarda todo una vez que se ha procesado (siguiendo la “regla de los 2 minutos” de David Allen)    * @do, donde guardo los mails que contienen tareas que tardaré más de 2 minutos en realizar.    * @later, donde guardo mails con información interesante para revisar y que no tengo tiempo de mirar ahora mismo. Aquí sólo guardo mails que tienen o podrían tener algo que ver con proyectos que estén activos. Si no, su sitio es @archivo.    * @reply, donde guardo los mails que voy a tardar más de 2 minutos en responder.Para archivar los mensajes uso MailActOn, un plugin de Mail.app que te permite asignar atajos de teclado a reglas de filtrado de correo:Reglas de MailActOnSi me llega un mail que quiero archivar, simplemente pulso CTRL + A y desaparece de la bandeja de entrada. CTRL + D lo mueve a @do, CTRL + S (de “Save”) lo mueve a @later y CTRL + R lo mueve a @reply. Todas las teclas están bastante cerca, con lo que normalmente no suelo perder más de 2 segundos en sacar un mensaje de la bandeja de entrada (salvo que lo vaya a responder en menos de 2 minutos, entonces se queda en la bandeja hasta que envíe la respuesta)O sea, esto:Workflow GTD simplificadoContextosDe momento la cosa parece complicada, pero en realidad una vez que te haces con el sistema de archivo de mails se convierte en algo natural y lo harás sin pensar (que es la idea de todo el sistema, en realidad)Pero salvo que te paguen por archivar emails, todavía no hemos hecho nada productivo (intenta pedir un aumento de sueldo por tener 0 mensajes en la bandeja de entrada, a ver qué pasa… :)Merlin Mann afirma que tiene configurado su cliente de correo para descargar los mensajes nuevos una vez cada hora. Salvo que trabajes en un servicio de urgencias, en una central nuclear, o arreglando bugs de la beta de La Coctelera, no pasa nada si tardas (como mucho) una hora en contestar un mail (en serio).La idea es que el tiempo que no estés archivando correos estés currando (sorprendente esto de la economía capitalista, oiga), y entonces es cuando realmente empiezan a ser útiles los contextos.Digamos que ya has archivado tus mails. El siguiente paso, según cómo sea tu forma de trabajo, es entrar en la carpeta @do o en @reply, y empezar a cerrar tareas.En estas dos carpetas, tengo una vista por orden cronológico. Primero, los mails más antiguos. Empiezo por el primero, y voy completando las tareas usando el “clásico” flujo de GTD.Hay quien recomienda reservar un tiempo fijo al día para contestar emails (y tengo algún compañero que es super fan de esa idea), pero yo normalmente suelo hacer sesiones de curro intenso de 45 minutos seguidas de sesiones de 15 de “intendencia” (ordenar mails, contestar pendientes en @reply… leer el Bloglines :)Los días en que hay mucho jaleo, cambio las sesiones de 45 minutos por sesiones de “Hasta Que Veas Borroso™” (con el cliente de mail cerrado) con pausas más largas.Para el tema del Flow State, iTunes y unos cascos decentes son una ayuda inestimable.En el próximo episodio, veremos cómo usar Quicksilver y Actiontastic para convertir mails en tareas y para captura de “marrones” que no vengan por email, y cómo la “Memoria 0″ nos permitirá “desconectar” del trabajo con más facilidad.¡Hasta la próxima!&lt;/blockquote&gt;&lt;cite cite="http://sofanaranja.com/2007/01/17/gtd-con-quicksilver-mailapp-y-actiontastic-primera-parte/"&gt;&lt;a href="http://sofanaranja.com/2007/01/17/gtd-con-quicksilver-mailapp-y-actiontastic-primera-parte/"&gt;Sofa Naranja - GTD con Quicksilver, Mail.app y Actiontastic (Primera Parte)&lt;/a&gt;&lt;/cite&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-1277138755763681475?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/1277138755763681475/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=1277138755763681475' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/1277138755763681475'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/1277138755763681475'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/04/sofa-naranja-gtd-con-quicksilver.html' title='Sofa Naranja - GTD con Quicksilver, Mail.app y Actiontastic (Primera Parte)'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-3005356603319263294</id><published>2008-04-03T13:49:00.001-07:00</published><updated>2008-04-03T13:49:42.199-07:00</updated><title type='text'>Donando a proyectos Open Source</title><content type='html'>&lt;p&gt;&lt;/p&gt;&lt;div&gt;&lt;p&gt;Una de las bases de internet tal y como hoy la conocemos es la filosofía Open Source. Compartir código y conocimiento a cambio de nada-material es, en mi opinión, una de las pequeñas revoluciones de nuestro tiempo.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Desde mis inicios en la web (hace ya muchísimo tiempo :) nunca ha dejado de sorprenderme la cantidad de tiempo que la gente está dispuesta a invertir en enseñar lo que sabe. Es una actitud inspiradora, y que me sigue motivando para compartir conocimiento, código, herramientas…&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h3&gt;Pero los programadores también comen : )&lt;/h3&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Cuando te acostumbras a tener de forma instantánea casi cualquier herramienta imaginable en versión Open Source, es fácil olvidar el esfuerzo que supone idear, construir y mantener un proyecto así.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Por eso desde hace tiempo, cuando uso herramientas Open Source para mis proyectos comerciales siempre procuro donar un porcentaje de los beneficios a un proyecto Open Source (tradicionalmente, al que haya usado para ese proyecto)&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Seguramente ningún fundador de un proyecto Open Source piense en hacerse rico con las donaciones. Pero &lt;strong&gt;todos&lt;/strong&gt; agradecen poder tomarse un par de cervezas a la salud de sus usuarios :)&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Y si no puedes contribuir económicamente, ayuda con los talentos que tienes. Puede que tu proyecto favorito necesite un icono, un diseño para su web, unos retoques de código…&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Aquí va una pequeña selección de proyectos Open Source que me han ayudado este año, y a los que merece la pena echar una mano:&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;ul&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://wiki.splitbrain.org/wiki:dokuwiki"&gt;DokuWiki&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://nanoc.stoneship.org/"&gt;nanoc&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://www.famfamfam.com/"&gt;famfamfam&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://www.mtasc.org/"&gt;MTASC&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://locomotive.raaum.org/"&gt;Locomotive&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://jquery.com/"&gt;jQuery&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://growl.info/"&gt;Growl&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;li&gt;&lt;a href="http://www.adiumx.com/"&gt;Adium&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;&lt;/ul&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Y tu… ¿a quién vas a darle las gracias por hacer tu vida más fácil? ;)&lt;/p&gt;&lt;br /&gt;&lt;div class="feedflare"&gt;&lt;br /&gt;&lt;a href="http://feeds.feedburner.com/%7Ef/SofaNaranja?a=jFCnlX7p"&gt;&lt;img src="http://feeds.feedburner.com/%7Ef/SofaNaranja?i=jFCnlX7p" border="0" /&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/%7Ef/SofaNaranja?a=r4womuLZ"&gt;&lt;img src="http://feeds.feedburner.com/%7Ef/SofaNaranja?i=r4womuLZ" border="0" /&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/%7Ef/SofaNaranja?a=17UIAGPT"&gt;&lt;img src="http://feeds.feedburner.com/%7Ef/SofaNaranja?i=17UIAGPT" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;a href="http://feeds.feedburner.com/%7Er/SofaNaranja/%7E3/164399212/"&gt;Ver artículo original&lt;/a&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-3005356603319263294?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/3005356603319263294/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=3005356603319263294' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/3005356603319263294'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/3005356603319263294'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/04/donando-proyectos-open-source.html' title='Donando a proyectos Open Source'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-2371718943301555566</id><published>2008-04-03T13:47:00.001-07:00</published><updated>2008-04-03T13:47:24.686-07:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='vago'/><title type='text'>Elogio de la vagancia</title><content type='html'>&lt;p&gt;&lt;/p&gt;&lt;div&gt;&lt;p&gt;Uno de los temas en los que hice mucho hincapié en el taller de ayer fue en las múltiples ventajas de ser &lt;strong&gt;extremadamente vago&lt;/strong&gt;.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Como me parece un tema bastante interesante, quisiera extenderme un poco más en el asunto, que creo que se merece un post para él solo.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h3&gt;¿No es la vagancia una cualidad horrible?&lt;/h3&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Hombre… depende de cómo lo mires… Para estos casos siempre recurro a la misma cita, de un gran personaje con el que tengo la suerte de trabajar, &lt;a href="http://lacoctelera.com/porras"&gt;Sergio Gil&lt;/a&gt;:&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;blockquote&gt;&lt;br /&gt;  &lt;p&gt;Para mí hay dos tipos de vagos, el vago bueno y el vago malo. Al vago bueno no le gusta trabajar, y hace cosas increíblemente ingeniosas para no tener que hacerlo.&lt;/p&gt;&lt;br /&gt;&lt;/blockquote&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Es decir… ser vago no implica necesariamente que no hagas bien tu trabajo. De hecho, muchas veces es justo lo contrario. Un &lt;strong&gt;buen&lt;/strong&gt; vago hará su trabajo muy bien a la primera para no tener que repetirlo, y tan rápido como pueda para dedicar su tiempo a otros menesteres más interesantes.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h3&gt;¿Qué es, exactamente, ser “extremadamente vago”?&lt;/h3&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Es una habilidad que se resume en preguntarse constantemente &lt;strong&gt;“¿Podría yo hacer esto con menos esfuerzo?”&lt;/strong&gt;&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;La vagancia extrema es el motor del progreso, la ciencia, y las herramientas de automatización de tareas.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Los ordenadores no se inventaron para pasarte 8 horas al día haciendo lo mismo mecánicamente. Se inventaron para pasarte 7 horas pensando cómo hacer tu tarea automáticamente y dejar que el ordenador la haga en 10 minutos. Y por supuesto, invertir los 50 minutos restantes en ver videos chalados en YouTube.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h3&gt;Automatiza, automatiza, automatiza…&lt;/h3&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Siempre que se habla de las maravillas de la informática moderna, invariablemente surge el tema de la automatización. Las macros de Office, las acciones de Photoshop, los comandos de Fireworks… todos destinados a permitirte trabajar mejor, más rápido… y &lt;strong&gt;menos&lt;/strong&gt;, que es lo importante.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Sin embargo, una de las mayores ventajas de la automatización queda normalmente eclipsada por los cantos de sirena del aumento de la productividad: &lt;strong&gt;cuando automatizas, reduces la cantidad de errores&lt;/strong&gt;.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Si todos los días tengo que hacer una tarea que se compone de 10 pasos, puedo certificar que me equivocaré en uno de ellos el 90% de las veces. Y además no será siempre el mismo.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Sin embargo, si creo un sistema automático que haga las 10 tareas bien y pongo un mínimo de cuidado en hacerlo “idiot-proof” (es decir, que si escribo el comando equivocado no borre todos mis datos) habré reducido enormemente la posibilidad de cagarla en alguno de los pasos.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Si además resulta que la tarea se ejecuta más rápido, accidentalmente he mejorado mi productividad. Pero lo importante es que duermo más tranquilo :)&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h3&gt;Siempre se puede hacer mejor&lt;/h3&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Otro de los pilares del progreso humano es la revelación de que, trabajes como trabajes, seas lo eficaz que seas y automatices lo que automatices, &lt;strong&gt;siempre puedes ser aún más vago&lt;/strong&gt;.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Y si piensas que no, es que eres un flojo :P&lt;/p&gt;&lt;br /&gt;&lt;div class="feedflare"&gt;&lt;br /&gt;&lt;a href="http://feeds.feedburner.com/%7Ef/SofaNaranja?a=FkXWFmTP"&gt;&lt;img src="http://feeds.feedburner.com/%7Ef/SofaNaranja?i=FkXWFmTP" border="0" /&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/%7Ef/SofaNaranja?a=9UUX0eG2"&gt;&lt;img src="http://feeds.feedburner.com/%7Ef/SofaNaranja?i=9UUX0eG2" border="0" /&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/%7Ef/SofaNaranja?a=FPuUC8ka"&gt;&lt;img src="http://feeds.feedburner.com/%7Ef/SofaNaranja?i=FPuUC8ka" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;a href="http://feeds.feedburner.com/%7Er/SofaNaranja/%7E3/158414012/"&gt;Ver artículo original&lt;/a&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-2371718943301555566?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/2371718943301555566/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=2371718943301555566' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2371718943301555566'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2371718943301555566'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/04/elogio-de-la-vagancia.html' title='Elogio de la vagancia'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-2396285970167075102</id><published>2008-04-01T12:43:00.001-07:00</published><updated>2008-04-01T12:43:26.109-07:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Video'/><title type='text'>Muy Buena Visualizacion de Info</title><content type='html'>&lt;object height="350" width="425"&gt;&lt;param name="movie" value="http://www.youtube.com/v/E3B__ovj2jU"&gt;&lt;param name="wmode" value="transparent"&gt;&lt;embed src="http://www.youtube.com/v/E3B__ovj2jU" type="application/x-shockwave-flash" wmode="transparent" height="350" width="425"&gt;&lt;/object&gt;&lt;p class="citation"&gt;&lt;cite cite="http://youtube.com/watch?v=E3B__ovj2jU"&gt;&lt;a href="http://youtube.com/watch?v=E3B__ovj2jU"&gt;Video empotrado&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;&lt;div class="flockcredit" style="text-align: right; color: #CCC; font-size: x-small;"&gt;Escrito con el &lt;a href="http://www.flock.com/blogged-with-flock" style="color: #999; font-weight: bold;" target="_new" title="Flock Browser"&gt;Navegador Flock&lt;/a&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-2396285970167075102?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/2396285970167075102/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=2396285970167075102' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2396285970167075102'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2396285970167075102'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/04/muy-buena-visualizacion-de-info.html' title='Muy Buena Visualizacion de Info'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-2467495155904924124</id><published>2008-03-28T11:56:00.001-07:00</published><updated>2008-03-28T11:56:25.588-07:00</updated><title type='text'>:: La ley de la atraccion: mitos y verdades - audiolibro</title><content type='html'>&lt;blockquote cite="http://www.canalcarmen.org/smf/index.php?topic=28382&amp;amp;fast=sip"&gt;"Es indudable", escribe él, "que todos podemos atraer hacia nuestra vida aquello en lo que enfocamos nuestro pensamiento de manera constante. Lo único que debemos hacer es formar una imagen mental clara y precisa de lo que deseamos, desarrollar la fe y convicción de que lo lograremos, y actuar decididamente hasta que dicha meta se haga realidad, sin permitir que nada se interponga en nuestro camino"&lt;/blockquote&gt;&lt;cite cite="http://www.canalcarmen.org/smf/index.php?topic=28382&amp;amp;fast=sip"&gt;&lt;a href="http://www.canalcarmen.org/smf/index.php?topic=28382&amp;amp;fast=sip"&gt;:: La ley de la atraccion: mitos y verdades - audiolibro&lt;/a&gt;&lt;/cite&gt;&lt;br /&gt;&lt;div class="flockcredit" style="text-align: right; color: #CCC; font-size: x-small;"&gt;Escrito con el &lt;a href="http://www.flock.com/blogged-with-flock" style="color: #999; font-weight: bold;" target="_new" title="Flock Browser"&gt;Navegador Flock&lt;/a&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-2467495155904924124?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/2467495155904924124/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=2467495155904924124' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2467495155904924124'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/2467495155904924124'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/03/la-ley-de-la-atraccion-mitos-y-verdades.html' title=':: La ley de la atraccion: mitos y verdades - audiolibro'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8787563829993934830.post-8725803482100020171</id><published>2008-03-26T16:44:00.001-07:00</published><updated>2008-03-26T16:44:18.420-07:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='TEST'/><title type='text'>Using CSS and Mootools to simulate Flash horizontal navigation effect</title><content type='html'>&lt;p&gt;&lt;/p&gt;&lt;div&gt;Some year ago I was a big &lt;em&gt;Macromedia/Adobe Flash&lt;/em&gt; fan. Let me say... at that time, if you used Flash for your websites you was really cool and ok... I admit it, I liked the simplicity to place everything where I wanted and all fantastic animation effects I could obtain using Actionscript. But times change and I had a new "conversion" from FLASH  to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.&lt;br /&gt;&lt;br /&gt;Yesterday I asked to me how could obtain the same effect using CSS and HTML... So, I found an interesting solution at my question which I want to share with you. This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.&lt;br /&gt;&lt;br /&gt;&lt;div&gt;&lt;img src="http://lh4.google.it/antonio.lupetti/R-l8KuxYFWI/AAAAAAAABbc/WtS7CinGLK0/slider2.png" /&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;You can download the source code (ready to use in your web projects) and see how this tutorial works using the following links:&lt;br /&gt;&lt;br /&gt;&lt;img src="http://2.bp.blogspot.com/_TqPdHmAEwTM/Rx5U5LulHqI/AAAAAAAAAbo/NpIXE-ezOuU/s400/page_white_code_red.png" alt="" id="BLOGGER_PHOTO_ID_5124626767371640482" align="absmiddle" border="0" /&gt; &lt;a href="http://www.box.net/shared/vbzpyetgko"&gt;Download this tutorial&lt;/a&gt;  &lt;img src="http://1.bp.blogspot.com/_TqPdHmAEwTM/R6Ds89u3tkI/AAAAAAAAA0U/biqUma6R5w4/s400/tag_orange.png" align="absmiddle" border="0" /&gt; &lt;a href="http://woork.bravehost.com/mootoolsScroller/index.html"&gt;Live Preview&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;A little introduction&lt;/strong&gt;&lt;br /&gt;The following image explains the structure of this tutorial. You have a DIV layer (&lt;em&gt;#container&lt;/em&gt;) which is the "visible mask" for all elements contained into the DIV &lt;em&gt;.slide&lt;/em&gt;. All HTML elements outside the "borders" of the DIV &lt;em&gt;#container&lt;/em&gt; are hidden (in this case &lt;em&gt;section 4&lt;/em&gt; and &lt;em&gt;section 5&lt;/em&gt;). Section 1, Section 2... Section 5 are DIV layers with some HTML content you can customize how you prefer:&lt;br /&gt;&lt;br /&gt;&lt;div&gt;&lt;img src="http://lh3.google.it/antonio.lupetti/R-l2TexYFVI/AAAAAAAABbU/olT2eNRUoL8/slider1.png" /&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;When you move your mouse to the right of the div &lt;em&gt;#container&lt;/em&gt;, the DIV &lt;em&gt;#slider&lt;/em&gt; with its content will move itself to the right. In this way &lt;em&gt;section 1&lt;/em&gt; and &lt;em&gt;section 2&lt;/em&gt; will move beyond the borders of the visible mask (&lt;em&gt;#container&lt;/em&gt;) and they will be hidden:&lt;br /&gt;&lt;br /&gt;&lt;div&gt;&lt;img src="http://lh4.google.it/antonio.lupetti/R-l_7uxYFXI/AAAAAAAABbk/MSsSRgguo9U/slider3.png" /&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;HTML code&lt;/strong&gt;&lt;br /&gt;HTML code is very simple. First add a link to mootools framework in the &lt;em&gt;&amp;lt;head&amp;gt;&lt;/em&gt; tag of your page using this line of code:&lt;br /&gt;&lt;br /&gt;&lt;div class="code"&gt;&lt;div class="code"&gt;&lt;span&gt;&amp;lt;script type=&lt;/span&gt;&lt;span&gt;"text/javascript"&lt;/span&gt; &lt;span&gt;src=&lt;/span&gt;&lt;span&gt;"mootools.svn.js"&lt;/span&gt;&lt;span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt;&lt;br /&gt;...and the following script immediately below the previous code:&lt;br /&gt;&lt;br /&gt;&lt;div class="code"&gt;&lt;span&gt;&amp;lt;script type=&lt;/span&gt;&lt;span&gt;"text/javascript"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;    window&lt;/span&gt;.addEvent&lt;span&gt;(&lt;/span&gt;&lt;span&gt;'domready'&lt;/span&gt;, &lt;span&gt;function&lt;/span&gt;&lt;span&gt;(){&lt;/span&gt;&lt;br /&gt;  &lt;span&gt;var&lt;/span&gt; scroll &lt;span&gt;=&lt;/span&gt; &lt;span&gt;new&lt;/span&gt; Scroller&lt;span&gt;(&lt;/span&gt;&lt;span&gt;'container'&lt;/span&gt;, &lt;span&gt;{&lt;/span&gt;area&lt;span&gt;:&lt;/span&gt; &lt;span&gt;100&lt;/span&gt;, velocity&lt;span&gt;:&lt;/span&gt; &lt;span&gt;1&lt;/span&gt;&lt;span&gt;});&lt;/span&gt;&lt;br /&gt; &lt;span&gt; $(&lt;/span&gt;&lt;span&gt;'container'&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;.addEvent&lt;span&gt;(&lt;/span&gt;&lt;span&gt;'mouseover'&lt;/span&gt;, scroll.start.bind&lt;span&gt;(&lt;/span&gt;scroll&lt;span&gt;));&lt;/span&gt;&lt;br /&gt;  &lt;span&gt;$(&lt;/span&gt;&lt;span&gt;'container'&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;.addEvent&lt;span&gt;(&lt;/span&gt;&lt;span&gt;'mouseout'&lt;/span&gt;, scroll.stop.bind&lt;span&gt;(&lt;/span&gt;scroll&lt;span&gt;));&lt;/span&gt;&lt;br /&gt;&lt;span&gt;        }); &lt;/span&gt;&lt;br /&gt;&lt;span&gt; &amp;lt;/script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;Now, add this code in the &lt;em&gt;&amp;lt;body&amp;gt;&lt;/em&gt; tag:&lt;br /&gt;&lt;br /&gt;&lt;div class="code"&gt;&lt;span&gt;&amp;lt;div id=&lt;/span&gt;&lt;span&gt;"container"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;div&gt;&lt;span&gt;    &amp;lt;div class=&lt;/span&gt;&lt;span&gt;"slider"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;... add some HML sections here...&lt;br /&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;...and you can add some sections simply adding some DIV layers into the DIV &lt;em&gt;#slider&lt;/em&gt;:&lt;br /&gt;&lt;br /&gt;&lt;div class="code"&gt;&lt;span&gt;&amp;lt;div id=&lt;/span&gt;&lt;span&gt;"container"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;div&gt;&lt;span&gt;    &amp;lt;div class=&lt;/span&gt;&lt;span&gt;"slider"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;div&gt;&lt;span&gt;    &amp;lt;div class=&lt;/span&gt;&lt;span&gt;"section"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;span&gt;section 1 content&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;div class=&lt;/span&gt;&lt;span&gt;"section"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;span&gt;section 2 content&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;div class=&lt;/span&gt;&lt;span&gt;"&lt;/span&gt;&lt;span&gt;section&lt;/span&gt;&lt;span&gt;"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;span&gt;section 3 content&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;div class=&lt;/span&gt;&lt;span&gt;"&lt;/span&gt;&lt;span&gt;section&lt;/span&gt;&lt;span&gt;"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;span&gt;section 4 content&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;div class=&lt;/span&gt;&lt;span&gt;"&lt;/span&gt;&lt;span&gt;section&lt;/span&gt;&lt;span&gt;"&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;span&gt;section 5 content&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;span&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;Ok... now the only thing you have to do is free your creativity to design your sections using CSS and images.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;CSS code&lt;/strong&gt;&lt;br /&gt;CSS code for the main structure is the following (take a mind you can customize this code how you prefer, but the only attributes you have not to change are overwlow attributes of the ID &lt;em&gt;#container&lt;/em&gt;):&lt;br /&gt;&lt;br /&gt;&lt;div class="code"&gt;&lt;span&gt;#container{&lt;/span&gt;&lt;br /&gt;&lt;div&gt;    &lt;span&gt;width&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;780px&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;height&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;440px&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;border&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;8px solid #FFF&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;overflow&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;auto&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;margin&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt; &lt;span&gt;0 auto&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;overflow-x&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;hidden&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt; &lt;span&gt;overflow-y&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;hidden&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;span&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span&gt;.slider{&lt;/span&gt;&lt;br /&gt;&lt;div&gt;    &lt;span&gt;width&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;2000px&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;height&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;400px&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;padding&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;20px&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;background&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;#CCCCCC&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;span&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span&gt;.section{&lt;/span&gt;&lt;br /&gt;&lt;div&gt;    &lt;span&gt;margin&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;width&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt;220px&lt;/span&gt;&lt;span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;float&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt;left&lt;/span&gt;&lt;span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span&gt;    margin-right&lt;/span&gt;&lt;span&gt;:&lt;/span&gt;&lt;span&gt;50px&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;span&gt;}&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;For a perfect result, the &lt;em&gt;height&lt;/em&gt; attribute of &lt;em&gt;#container&lt;/em&gt; must be equal to the sum of &lt;em&gt;height + padding&lt;/em&gt; of the class &lt;em&gt;.slider&lt;/em&gt;. The width attribute of the class &lt;em&gt;.slider&lt;/em&gt; have to be a value greater than &lt;em&gt;#container&lt;/em&gt; width.&lt;br /&gt;&lt;br /&gt;You can customize the &lt;em&gt;.section&lt;/em&gt; class changing the width, the background color and all other parameters you want.&lt;br /&gt;&lt;br /&gt;It's all! Download the source code and try it!&lt;br /&gt;&lt;br /&gt;&lt;img src="http://2.bp.blogspot.com/_TqPdHmAEwTM/Rx5U5LulHqI/AAAAAAAAAbo/NpIXE-ezOuU/s400/page_white_code_red.png" alt="" id="BLOGGER_PHOTO_ID_5124626767371640482" align="absmiddle" border="0" /&gt; &lt;a href="http://www.box.net/shared/vbzpyetgko"&gt;Download this tutorial&lt;/a&gt;  &lt;img src="http://1.bp.blogspot.com/_TqPdHmAEwTM/R6Ds89u3tkI/AAAAAAAAA0U/biqUma6R5w4/s400/tag_orange.png" align="absmiddle" border="0" /&gt; &lt;a href="http://woork.bravehost.com/mootoolsScroller/index.html"&gt;Live Preview&lt;/a&gt;&lt;br /&gt;&lt;p&gt;&lt;a href="http://feeds.feedburner.com/%7Ea/Woork?a=3FeA1v"&gt;&lt;img src="http://feeds.feedburner.com/%7Ea/Woork?i=3FeA1v" border="0" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;p&gt;&lt;a href="http://feeds.feedburner.com/%7Er/Woork/%7E3/257975563/using-css-and-mootools-to-simulate.html"&gt;Ver artículo original&lt;/a&gt;&lt;/p&gt;&lt;div class="flockcredit" style="text-align: right; color: #CCC; font-size: x-small;"&gt;Escrito con el &lt;a href="http://www.flock.com/blogged-with-flock" style="color: #999; font-weight: bold;" target="_new" title="Flock Browser"&gt;Navegador Flock&lt;/a&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8787563829993934830-8725803482100020171?l=kohacku.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://kohacku.blogspot.com/feeds/8725803482100020171/comments/default' title='Enviar comentarios'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=8787563829993934830&amp;postID=8725803482100020171' title='0 comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/8725803482100020171'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8787563829993934830/posts/default/8725803482100020171'/><link rel='alternate' type='text/html' href='http://kohacku.blogspot.com/2008/03/using-css-and-mootools-to-simulate.html' title='Using CSS and Mootools to simulate Flash horizontal navigation effect'/><author><name>kohacku</name><uri>http://www.blogger.com/profile/02297529136341195829</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_TqPdHmAEwTM/Rx5U5LulHqI/AAAAAAAAAbo/NpIXE-ezOuU/s72-c/page_white_code_red.png' height='72' width='72'/><thr:total>0</thr:total></entry></feed>
