Imprescindible: un esquematizador (outliner) de dos paneles

Voy a presentarte hoy otra meta-herramienta (herramienta para hacer herramientas) que sin duda te puede ayudar a ser más productivo: el esquematizador (outliner) de dos paneles.

Comencemos explicando qué significa esto.

Un esquematizador, en inglés outliner, no es más que un programa que puede gestionar listas de elementos multinivel. Es decir, a partir cualquier elemento de la lista puedes abrir nuevas sublistas de cuyos elementos pueden colgar, a su vez, otras nuevas y así sucesivamente.

La siguiente imagen ilustra una lista multinivel.

Un outliner que gestione simplemente listas multinivel ya es de por sí una herramienta fabulosa. Podemos utilizarlo para crear listas de cualquier tipo y profundidad: tareas pendientes, proyectos, objetivos, apuntes…

Si además contamos con un segundo panel que pueda servirnos para adjuntar texto descriptivo a cualquier elemento de la lista, tendremos entonces la meta-herramienta perfecta.

Observa, en las dos figuras siguientes como el contenido del segundo panel cambia según el elemento seleccionado en el primero:

Yo tengo numerosos outliners en mi colección de software imprescindible, algunos de ellos más especializados en labores concretas como MyLifeOrganized (para gestión de tareas), del que ya hablé en el siguiente artículo.

Pero quiero mostrarte otro que también me acompaña todos los días y que utilizo en numerosos proyectos: Keynote NF.

Una pequeña delicia de software que puede cambiar drásticamente tu vida, te lo aseguro. Además, te encantará su precio: absolutamente gratis.

A título de ejemplo, voy a enseñarte uno de los usos que le doy a Keynote NF: la organización de los artículos que publico en el blog.

Observa la siguiente imagen (haz clic sobre ella si necesitas ampliarla):

En el panel de la izquierda tengo una lista multinivel en la que organizo los artículos por año, mes y día de publicación. En el panel de la derecha está cada contenido publicado en el blog.

Puedes apreciar, además, una serie de pestañas en las que mantengo estructuras semejantes para el mantenimiento de borradores de artículos aún en desarrollo, la organización por categorías o las tareas administrativas pendientes.

Desde luego, esto no es más que un uso particular, pero seguro que se te ocurren los tuyos propios.

May muchos outliners de dos paneles. Sólo tienes que realizar una búsqueda en Google para encontrar decenas de ellos, de todos los colores y precios.

Keynote NF es uno entre esos muchos. Si quieres probarlo, puedes descargarlo en el siguiente enlace.

Lo quieras o no, asegúrate de tener siempre un esquematizador a tu alcance. Es la ley del 80/20: un 20% de tus herramientas son las responsables del 80% de tus éxitos.

Javier Montero Gabarró


Imprescindible: un esquematizador (outliner) de dos paneles


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – I: El origen

Aprender es como colocar piezas en un puzzle. Al principio no son más que elementos aislados que, con un poco de suerte, podemos intuir pertenecen a alguna zona determinada de la figura. Poco a poco las piezas se van uniendo formando pequeñas islas que después se hacen continentes.

En el camino hacia la habilidad de saber hacer páginas web con HTML, vamos a colocar hoy una pieza pequeña pero importante: aprenderemos a insertar imágenes en nuestras páginas.

¿Sabías que al principio la web estaba basada en texto? No fue hasta la aparición del navegador Mosaic cuando se popularizó la WWW con imágenes. Mis primeros pinitos en la nueva web los hice con Mosaic (llevo ya unos cuantos años en esto) y recuerdo con cariño la indescriptible emoción que me asistía cuando navegaba. Era pura magia. Hoy día esto se da por sentado, pero por entonces era apasionante.

Vamos a aprender hoy lo más básico que hay que saber para insertar un gráfico en una página web. En las sucesivas entregas iremos profundizando en el tema.

Para añadir un gráfico disponemos del elemento <img>.

A veces me referiré a elemento o etiqueta indistintamente. Debes saber que un elemento está compuesto por la etiqueta de inicio, el contenido y la etiqueta de cierre.

<img> pertenece al tipo particular de elementos que no requieren una etiqueta de cierre, pues no hay nada entre medias que contener. Todo lo necesario para la inserción de la imagen se especifica en la etiqueta de apertura a través de sus atributos.

Para poder insertar una imagen necesitamos indicar dónde se encuentra. Para eso disponemos del atributo src, al que le facilitaremos la URL de origen.

Por ejemplo:

<img src="http://dl.dropbox.com/u/4631191/blog/knoppix-logo.gif" />

En este caso la imagen se halla en un sitio diferente al que reside la página en sí.

Normalmente las imágenes residirán en la misma máquina, por lo que bastará con indicar el camino relativo desde donde estamos para llegar a la imagen.

Por ejemplo:

<img src="expertahtml.jpg" />

Con esta línea, el navegador tratará de descargar la imagen expertahtml.jpg que esperará encontrar en el mismo directorio que el de la página actual.

Otros ejemplos de especificación de un camino relativo:

<img src="../expertahtml.jpg" />

En este caso buscará la imagen en el directorio padre del directorio actual (los dos puntos simbolizan al directorio padre).

<img src="img/expertahtml.jpg" />

Aquí el fichero se halla en la carpeta img existente en el directorio actual.

También podemos especificar un camino absoluto. En este caso hay que preceder la ruta con el esquema file:, como en el siguiente ejemplo:

<img src="file://c:\imagenes\expertahtml.jpg" />

Observa cómo hemos cerrado la etiqueta. Al tratarse de elementos sin etiqueta de cierre, las normas de XHTML nos fuerzan a terminar de esa forma la única etiqueta que hay. En HTML5 las normas no son tan estrictas y podemos elegir qué modo de cierre preferimos, por lo que también sería válido lo siguiente:

<img src="file://c:\imagenes\expertahtml.jpg">

Hay diversidad de opiniones sobre qué es lo más conveniente…

Vamos a ver ahora como los navegadores nos presentan las imágenes. Comencemos por el caso más simple en el que hay una imagen sin texto alguno. He aquí el cuerpo de la página:

<body>
<img src="expertahtml.jpg"/>
</body>

Observa su efecto en este enlace. Fíjate como la imagen aparece situada en la esquina superior izquierda.

Añadamos ahora algo de texto:

<body>
Esta es la oveja experta en HTML.<img src="expertahtml.jpg" />
Hay ovejas expertas en cada área de conocimiento.
</body>

Observa qué sucede. En el punto donde termina la escritura de la primera frase inserta la imagen. Y lo hace situando ahí su esquina inferior izquierda. Para ello, hace el hueco necesario en la parte superior, desplazando el texto todo el espacio que haga falta. La siguiente frase continúa a partir de la esquina inferior derecha.

Finalmente, consideremos el siguiente código:

<body>
Esta es la oveja experta en HTML.
<br />
<img src="expertahtml.jpg" />Hay ovejas expertas en cada área de conocimiento.
</body>

Esta vez hay un salto de línea, además de la imagen, entre ambas frases. Mira cómo se visualiza el conjunto. Tal como es de esperar, la imagen se inserta en el punto donde debería empezar la escritura, dejando el espacio vertical necesario. Una vez hecho esto el texto continúa a partir de la esquina inferior derecha.

Nada más por hoy. Quédate con esta pieza; por los colores no te costará ubicarla dentro del marco del puzzle…

Javier Montero Gabarró


http://elclubdelautodidacta.es/wp/2012/03/imagenes-en-html-i-el-origen/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies