Puroguramu

Sigil para crear epub

2012-02-23T10:39:00.000-05:00

Epub es un formato abierto para libros electrónicos.

Me estoy aficionando a leer epubs en el celular. Me gusta el hecho de que el contenido se adapte al tamaño de la pantalla. Me hacía recordar al HTML, así que me preguntaba cómo es que se haría un epub.

Si pruebas cambiar la extensión de un archivo epub a zip y pruebas abrirlo, verás que se puede. Un epub contiene, comprimido en un zip, una estructura de archivos tipo web, principalmente XHTML, que constituyen el libro.

De modo parecido a hacer páginas web, es posible hacer un epub completamente a mano. Sin embargo, la estructura del epub es un poco más complicada. Resulta más práctico iniciar sobre un template o usar algún programa de edición WYSIWYG, como Sigil.

Lo he probado para hacer un libro simple. Me sirvió de bastante ayuda este tutorial. Aunque es para una versión anterior y el menú ha cambiado un poco.

Hola Sublime Text 2!

2012-02-22T22:34:00.001-05:00

Sublime Text 2 es un nuevo editor de texto que estoy probando.

Mi editor de textos favorito es Notepad++. Antes lo fue jEdit. Pero, cuando jEdit me empezó a parecer demasiado pesado, encontré en npp una buena alternativa. Iniciaba mucho más rápido, también coloreaba la sintaxis, también tenía tabs... además empecé a pasar la mayor parte del tiempo en Windows, así que comencé a usarlo cada vez más. Mucho más con el cómodo manejo de encodings (más que en cualquier otro editor que haya visto), el plugin para FTP y con el soporte para Zencoding.

Hace unos días, de pronto, descubrí Sublime Text 2. Lo recomendaban en unos video tutoriales sobre jQuery en net.tuts.com. Y me está pareciendo interesante. Aún me está costando un poco acostumbrarme a las nuevas secuencias de teclas pero me gusta mucho lo de los cursores múltiples, las selecciones rectangulares, las selecciones múltiples, la forma en que maneja la configuración. No es open source pero tiene una arquitectura extensible. No es gratis pero uno puede probarlo indefinidamente... sólo hay que cerrar el recordatorio de compra de vez en cuando.

Tengo ciertos hábitos al editar texto, así que aquí resumo lo que voy haciendo mientras aprendo cómo hacerlo en ST2.

Preferencias Generales
Por ejemplo, para fonts, me gusta usar algo similar a Lucida Typewriter, o DejaVu Sans Mono, a 14pt. También los tabs reemplazados por 2 espacios.
No encuentro un menú para eso. Pero se resuelve entrando a Preferences, Settings-User y agregando ahí los items de configuración que uno quiera. Una referencia a los valores que se puede poner se puede ver entrando a Preferences, Settings-Default:

{
  "font_face": "DejaVu Sans Mono",
  "font_size": 14,
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

Zencoding
Si uno hace una secuencia tipo zencoding seguida de un tab, se expande. Sin embargo, quisiera expansiones de documento un poco más completas (html:4s, por ejemplo). Así que buscando encuentro que para instalar Zencoding hay que instalar primero el Sublime Package Control.

Para eso no hay que bajar manualmente ningún archivo, sino ejecutar en la consola de ST2 (se abre con CTRL+` o entrando a View, Show Console), lo siguiente:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Luego de eso, reinicio ST2. Luego, entro a Tools, Command Pallete, Package Control::Install Package y elijo Zencoding en la lista de paquetes. Reinicio ST2 nuevamente. Pruebo crear un documento html, escribo html:4s, TAB, funciona :-D

Para una guía rápida de cómo usar Zencoding en ST2, se puede revisar http://code.google.com/p/zen-coding/wiki/SublimeTextZenCodingEn

En el Dojo

2012-01-20T00:52:00.001-05:00

Hoy asistí a un dojo de programación. Me ha parecido una experiencia muy enriquecedora.

Un dojo de programación trata de seguir la idea de un dojo de artes marciales en cuanto a formar un ambiente donde podamos ejercitarnos fuera de la contienda real (que viene a ser el día a día con los proyectos que desarrollamos).

La práctica se trató esta vez de usar TDD y una especie de Pair Programming para resolver el problema de convertir números arábigos, los que usamos normalmente, a la notación romana.

TDD son las iniciales de Test Driven Development, Desarrollo Guiado por Pruebas. Pablo Tortorella, quien nos guiaba, dijo que le parecía mejor pensar en Desarrollo Guiado por Ejemplos, ya que una prueba es en realidad un caso particular que ponemos como ejemplo para que el programa que hacemos lo intente resolver. Un ambiente de pruebas toma la prueba y la lleva a cabo a ver si el programa la pasa. Entonces, en TDD: 1) definimos una prueba simple 2) corremos la prueba (incluso sin tener ningún programa; es importante ver que falla) 3) se enfoca uno en implementar en el programa lo mínimo necesario hasta lograr pasar la prueba 4) si se nota que algo puede refactorizarse (simplificar, eliminar duplicaciones o dependencias innecesarias), hacerlo, luego pasar al paso 1) e ir repitiendo el ciclo, con pasitos de bebe, dejando que el programa evolucione hasta el nivel que deseemos.

Para alguien habituado a programar al estilo tradicional, donde se pretende resolver todo el problema en la fase de diseño, antes incluso de empezar a programar, puede costar un poco enfocarse en pequeños pasos y no intentar codificar toda la solución de una vez. Pero el estilo tradicional realmente tiene problemas. Precisamente en respuesta a esos problemas surgieron cosas como la eXtreme Programming, TDD y Agile.

En el caso del problema de la conversión a números romanos, probablemente uno imagine ahora, sin necesidad de programar, una manera de resolver el problema y podría programarla en un rato. Pero, deténgase y trate de hacerlo en pequeños pasos, ideando una prueba simple y trivial cada vez, para ver a dónde va conduciendo.

Con el dojo me di cuenta que, conforme avanzan las iteraciones, van apareciendo patrones que van sugiriendo la solución. El tiempo de la práctica se acabó, pero creo que eventualmente llegaríamos a solucionar el problema.

Camino de regreso, recordaba la forma en que el código iba proponiéndose y refactorizándose. Había cierto algoritmo en eso. Me pregunto si sería posible programar a una computadora para que halle esa solución evolutiva usando TDD. Quizás sí. Entonces, me pregunto si sería posible que una computadora, o un conjunto de computadoras, realizando pequeños pasos de bebe, resolviendo casos triviales, puedan resolver cualquier tipo de problema de programación, simplemente por evolución, usando TDD. Me pregunto si será ese el futuro.

Crédito de la imagen: CIO Dojo

La libertad de llegar al otro lado

2012-01-03T19:16:00.002-05:00

Había una vez un barquero que ayudaba a la gente a cruzar de un lado a otro del río.

Antaño hacía mucho frío y eran muy fuertes las corrientes que cruzaban el agua helada. Había que recorrer un camino largo, que pasaba por un monasterio, para llegar a un puente donde se podía cruzar.

El barquero tuvo que traer madera de muy lejos, cuerdas fuertes y brea y hacer varias pruebas antes de lograr una embarcación que lograra cruzar el río en el punto donde la gente más lo necesitaba.

Los primeros viajes fueron para los sacerdotes, que habían visto con recelo la construcción del aparato. Algunos criticaron que no tenia la estabilidad del puente del monasterio y que sería mejor prohibirlo, para proteger a la gente. Pero cruzaban ya los nobles y cada vez más gente, así que decidieron que dejarían al barquero en paz con tal de que les pagara el impuesto correspondiente. La gente le daba sus monedas al barquero y la décima parte de estas llegaba al monasterio. Además, la gente podía pasar sólo las cosas que el monasterio permitía.

Aparecieron otros barqueros para resolver las largas colas que se estaban comenzando a formar, pues un solo barco no bastaba para todos los viajeros que cruzaban por ahí. El monasterio los dejaba prosperar con tal que le pagaran su impuesto.

Un pueblo empezó a formarse en el punto donde cruzaba la gente, para atender a los muchos viajeros que ahora preferían esta ruta.

No era fácil conseguir lo que se necesitaba para hacer un barco ni era fácil conducirlo por aquellas aguas agrestes. Los barqueros, con el tiempo, decidieron que era injusto el impuesto que le pagaban al monasterio y dejaron de dárselo. Como los pasajes bajaron de precio y les permitieron pasar mas cosas que antes, la gente apoyó la decisión.

Los tiempos cambiaron. El río se volvió más amigable. Un día, alguien ideó una manera sencilla de hacerse una canoa y poder cruzar también. No se iba en los asientos de cuero de los barcos, ni servían té y panecillos, pero era suficiente para quienes querían un modo económico de cruzar.

Los barqueros se opusieron al nuevo invento, aduciendo que ponía en peligro a la gente.

Pero, como no pudieron detener a la gente que los seguía usando, decidieron reclamar al Señor de esas tierras, para que este declarara que el río era propiedad natural de los barqueros, del mismo modo que un martillo era propiedad natural de un carpintero, o un rastrillo la propiedad natural de un jardinero. Uno podría seguir usando canoas, siempre y cuando algún barquero le diera permiso de pasar por su parte del río.

Los barqueros se convirtieron en protectores del río. El Señor se convirtió en protector de los barqueros. Y como tal, recibía ahora los impuestos que antes recibiera el monasterio.

Un día un grupo de viajeros decidió plantar altos pilares en cada orilla, llevar cuerdas de un lado a otro y tender un puente colgante. La gente podía cruzar con más fluidez, sin pagar nada y con libertad de llevar cualquier cosa que quisiera.

Los barqueros se escandalizaron y se opusieron firmemente al puente, a pesar de que solucionaba el problema inicial. Qué iba a ser de ellos y su modo de vida. Anunciaron que la prosperidad del pueblo se vería afectada. Clamaron por sus derechos ante el Señor.

Quienes tendieron el puente mostraron que no estaban tocando el río de los barqueros y el Señor tuvo que admitir que tenían razón y la gente podía usar lo que mejor le pareciera. Por un tiempo así fue.

Pero los barqueros insistieron, haciéndole ver al Señor que obtendría menos impuestos. Y, por supuesto, del peligro que representaba el puente para la seguridad del reino, cuando no se podía controlar las cosas que podían pasar de un lado a otro del río.

Un día se anunció que un espía proveniente de un reino enemigo había intentado cruzar el puente con intenciones oscuras. Había sido tan hábil con las armas como lo eran los hombres de la guardia del señor. Pero, por supuesto, era del otro reino porque usaba ese atuendo. Felizmente lo pudieron neutralizar.

Como se demostró que el puente podía ser peligroso, se ordenó controlar no sólo qué cosas podían pasar, sino qué personas tenían el derecho de hacerlo. En cada extremo del puente, la gente se quitaba los zapatos y se los volvía a poner luego que los guardianes del Señor los habían revisado. Por otro lado, en el palacio consideraban invadir al reino que envió al invasor, por el terror que estaba ocasionando.

Un día, el río cambió. El nivel bajó y era posible hallar sendas donde cruzar sin que el agua llegara más arriba de las rodillas. Cualquiera podría ir y venir sin usar barcos o puentes.

Pero los barqueros prohibieron que se hiciera tal cosa. Insistían en que tenían el derecho natural de proteger el río.

Una noche, cansados de que el Señor prefiriera a unos pocos barqueros por encima de todo el pueblo, todos los jóvenes se acercaron a la orilla y esperaron en silencio. Al amanecer, fueron cruzando. Aunque los barqueros vociferaban por sus derechos y se quejaban ante sus padres y los hombres del Señor intentaban detenerlos, no podían.

En el transcurso de la mañana, también sus padres y toda la demás gente se les unió, en una sola fuerza. Porque eran más. Porque eran la razón de que los barcos. Porque eran la razón de los puentes. Porque se dieron cuenta que eran también la razón del Señor.

Creando nuevas opciones

2011-12-19T13:02:00.001-05:00

Caminando por una tienda, encontré un juguete con forma de notebook.

Lo encendí y comencé a navegar por las distintas opciones que ofrecía.

Había juegos para aprender el alfabeto, los números, las notas musicales, para escribir mensajes, y así por el estilo.

Pensé que llegaría un momento en que uno habría explorado todas las opciones. Entonces querria más.

La diferencia entre una computadora y el juguete era que no había opción para agregar cosas. O quitar cosas. O modificar las que habían.

¿Cuántas personas usan las computadoras de ese modo? Es decir, como un gran conjunto de opciones que consumir, simplemente, sin poder modificarlas. Un ejemplo que me viene a la mente es el de los diccionarios. Sería tan útil que nos permitieran agregar nuestras propias definiciones y, sin embargo, debemos conformarnos con descargar las que hayan hecho otros.

Se podría pensar que es algo que le corresponde a los programadores. Pero pienso que programar una computadora debería ser algo tan simple que podamos hacerlo todos.

Me parece que con la consola de comandos íbamos por un camino que eventualmente nos conduciria a intérpretes de lenguajes humanos. Primero por escrito y luego por voz. Un día cercano podríamos comandar una computadora como si conversáramos con ella, como en Star Trek.

Pero apareció el sistema de menús y ratón y hubo un desvío.

Un sistema de menús presenta las opciones en una estructura jerárquica. Eso permite verlas con más claridad. El ratón permite navegar en ese sistema. Comparado con escribir los comandos, puede resultar más cómodo, más rápido... para ciertas cosas.

Quienes usan la consola de comandos pueden notar que hay cosas que la consola permite y el sistema de menús no.

Si usamos la consola de comandos simplemente como un modo de llegar a las opciones que ofrece el sistema de menús, no hay mucha ventaja (sería más cómodo usar el ratón). La magia de la consola de comandos aparece cuando permite crear nuevas opciones y manipularlas con una expresividad que quizás esté más allá de las posibilidades de un sistema jerárquico de presentación.

Los lenguajes de programación son un modo de crear esas nuevas opciones. Antes, en la época de la consola de comandos, se hacía el intento de acercar estos lenguajes a la gente. Estaban BASIC, LOGO y así por el estilo. Pero eso fue decayendo conforme se popularizaba el ratón.

El problema con el mundo del ratón es que tiene un límite, igual que el juguete. Como en una tierra plana, llegará el momento, tarde o temprano, en que se habrá recorrido cada opción y, parado en el borde de ese mundo, querrá más.

Claro que los programadores se encargarán de ampliarlo, proveyendo nuevas opciones que estarán disponibles con solo pasar a la siguiente versión. Dependemos de ellos para eso. Pero ¿no sería mejor que cada uno pudiera crear por si mismo nuevas opciones, en lugar de tener que esperar a que a alguien más se les ocurra y las programe?

En el desarrollo de programas, se va tomando más en cuenta el papel del usuario en la definición del producto y su implementación. Las ideas de los usuarios (recolectadas a través de foros o emails) son tomadas en cuenta en el diseño. Los errores que encuentran ayudan a mejorar el producto. Se compite para ver quién logra escuchar mejor a los usuarios y traducir lo que dicen a mejoras en el software. Pero, viéndolo bien, es como si los usuarios programaran las computadoras a través de los programadores. ¿No sería mejor que la programación pudiera ser directa?

Yo soy programador, pero me parece que muchas veces estamos cumpliendo simplemente el rol de intermediarios es una tarea que debería poder ser realizada directamente por los usuarios. Programar debería ser algo mas simple y cualquier persona debería sentirse capaz de comunicar a la computadora lo que quisiera que hiciera. Encontrar un modo en que la gente pueda definir nuevas opciones, o expresarlas de otro modo, luego compartirlas con los demás y permitir que evolucionen.

Imagine que puede agregar opciones a su árbol de menús. Imagine que puede operar con las opciones que ya tiene para crear otras nuevas. Imagine que incluso puede crear nuevas operaciones para manipular esas opciones. Imagine que puede compartir todo eso con otros usuarios. Y todo eso de un modo que le resulta natural, lógico, simple.

Esa forma de ver la computación era más evidente cuando se usaba la consola de comandos, ese infinito universo negro poblado de letras fosforescentes. Pero pienso que también se podría hacer en el sistema de menús, si abrimos la puerta.

Optimizando Photoshop

2011-11-17T11:22:00.001-05:00

Edit, Preferences, General (CTRL+K)
Desmarcar Export Clipboard

Al parecer esto previene que una copia sea puesta además en el clipboard general de Windows. Como las copias en Photoshop suelen ser grandes, significa un ahorro significativo en la memoria disponible.

Además, es posible acceder a Edit, Purge para vaciar de memoria el clipboard (de Photoshop) y el historial.

Construyendo un Wysiwyg Editor con jQuery

2011-10-28T18:00:00.000-05:00

En HTML, normalmente un textarea no es wysiwyg, pero existen plugins javascript, como CKEditor, NicEdit, entre otros, que ayudan a que lo sea. Se instala el plugin, se configura y listo. ¿Te animarías a hacerlo tú mismo?

WYSIWYG
Whay You See Is What You Get: lo que ves es lo que obtienes
Así es como se denomina a los editores que muestran la apariencia final del documento mientras es editado.

Buscando hacerme una herramienta para tomar notas con más facilidad, entré a explorar en este tema.

Antes, estaba envuelto por un halo misterioso. Suponía que sería una cuestión demasiado complicada. Descubrí que es más fácil de lo que parece.

Antes, para hacer editable un div, lo que se me ocurría era montar encima un elemento editable, como un input text, que se muestre cuando se necesite la edición. Pero, limitándome a eso, no veía cómo era posible mostrar en negrita o cursiva algo dentro de un elemento editable. Imaginaba que tendría que ver con algún tipo de magia desconocida que involucraría código muy complejo y sofisticado.

Resulta que es posible hacer que un div sea editable (¿por qué no difunden más esas cosas?).

Cuando un div es editable, está disponible un API que permite ejecutar comandos sobre su contenido (!).

De ese modo, hacer un editor wysiwyg se convierte en una cuestión muy, muy accesible, incluso para un programador como yo :-)

designMode
Al parecer, IE fue el que primero implementó la idea de que un elemento fuera editable, luego los otros navegadores acogieron la idea y ahora ya es algo estándar.

Esto se consigue haciendo que designMode="On" para el objeto que se desea editar.

Cuando se está en designMode="On", se pueden enviar comandos de formato usando la función execCommand. Estos permanecen activos hasta que se vuelven a enviar otra vez. O se aplican sobre el texto que estuviera seleccionado. Sí, como en Word. Hasta funciona deshacer con CTRL+Z

La idea básica
Una de las primeras guías que encontré usa un iframe y botones.

Pone el iframe en designMode="On". Hecho esto, se puede editar el contenido del iframe como si se estuviera en un textarea.

Los botones permiten invocar los comandos de formato.

Este es un ejemplo basado en: http://jsfiddle.net/Kxmaf/6/ :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WYSIWYG Demo</title>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<style type="text/css">
input[type=button] {
  border: 1px solid #ccc;
}
#editor {
  width: 500px;
  height: 170px;
}
#bold {
  font-weight: bold;
}
#italic {
  font-style: italic;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
  var cw = document.getElementById('editor').contentWindow;
  var doc = cw.document;
  doc.designMode = "on";
  doc.write('');
  doc.close();
  
  $('#bold').click(function() {
    cw.focus();// IE
    doc.execCommand('bold', false, false);
    cw.focus();
  });
  $('#italic').click(function() {
    cw.focus();// IE
    doc.execCommand('italic', false, false);
    cw.focus();
  });
  $('#fontname').change(function() {
    cw.focus();// IE
    doc.execCommand('fontname', false, $(this).val());
    cw.focus();
  });
});
</script>

</head>
<body>
  <h1>WYSIWYG Demo</h1>
  
  <div id="buttons">
    <input type="button" id="bold" value="B" />
    <input type="button" id="italic" value="I" />
    <select id="fontname">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Courier New">Courier New</option>
      <option value="Monotype Corsiva">Monotype</option>
      <option value="Tahoma">Tahoma</option>
      <option value="Times">Times</option>
    </select>
  </div>
  <iframe id="editor"></iframe>
  
</body>
</html>

Mejorando
Es posible usar un div en lugar de un iframe. También se puede aprovechar más cosas de jQuery.

Este es un ejemplo basado en de77: jQuery Simple WYSIWYG Editor :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WYSIWYG Demo</title>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<style type="text/css">
input[type=button] {
  border: 1px solid #ccc;
}
#editor {
  width: 500px;
  height: 170px;
  border: 1px solid #ccc;
}
#bold {
  font-weight: bold;
}
#italic {
  font-style: italic;
}
</style>

<script type="text/javascript">

$(document).ready(function() {
  function action(a,p) {
    $('#editor').focus();
    if (p == null) p = false;
    document.execCommand(a, null, p);
  }

  $('#editor').get(0).contentEditable = "true";
  
  $('#bold').click(function() {
    action('bold');
  });
  $('#italic').click(function() {
    action('italic');
  });
  $('#fontname').change(function() {
    action('fontname', $(this).val());
  });
  $('#html').click(function() {
    alert($('#editor').html());
  });
});
</script>

</head>
<body>
  <h1>WYSIWYG Demo</h1>
  
  <div id="buttons">
    <input type="button" id="bold" value="B" />
    <input type="button" id="italic" value="I" />
    <select id="fontname">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Courier New">Courier New</option>
      <option value="Monotype Corsiva">Monotype</option>
      <option value="Tahoma">Tahoma</option>
      <option value="Times">Times</option>
    </select>
    <input type="button" id="html" value="HTML" />
  </div>
  <div id="editor"></div>
  
</body>
</html>

Me parece que esto puede ayudar a aclarar el tema para empezar. Ojalá le sirva de ayuda.

Referencias

HTML + Javascript para usar cualquier framework

2011-10-05T18:04:00.000-05:00

Todo o nada
Para hacer una aplicación web, se suele optar por alguna de las siguientes alternativas:

a) Usar completamente un framework propio.
b) Usar completamente un framework estándar.

La alternativa a) significa volver a implementar muchas de las cosas que ya se han resuelto en otros frameworks.

La alternativa b) significa depender completamente de lo que esté implementado en el framework elegido.

Pero pienso que hay otra alternativa. Una que no use la palabra completamente.

Imagine all the people
Imagine que no tiene que volver a escribir su aplicación web en otro lenguaje simplemente para usar algunas de las cosas que ofrece cierto framework escrito en ese lenguaje.

Imagine que no tiene que volver a escribir su aplicación web simplemente para usar algunas de las cosas que ofrece la siguiente versión del framework.

Imagine un framework en el que pudiera usar cualquier cosa que ya se hubiera implementado en otro framework, sin necesidad de volver a escribirlo.

Imagine que todos los frameworks pudieran trabajar juntos y usted pudiera escoger de esa feria de componentes los que mejor se adaptaran para cada cosa que necesitara. Todas las versiones y todos los lenguajes.

Cómo hacerlo
Se me ocurre al menos una manera.

Que el contenido dinámico se construya usando Javascript. Usando técnicas AJAX, se puede hacer una solicitud a cierto URL, con los parámetros que se requieran. En ese URL, un servidor procesa la solicitud, usando el framework y lenguaje de programación que sea, y devuelve una respuesta JSON. Con la respuesta, se construye la vista de la respuesta.

Pensando sobre eso, noto que en el modelo cliente-servidor del HTML, se obliga a que el navegador reemplace completamente el contenido de la página con la respuesta. Otra vez esa palabrita.

Quizás sería interesante extender la especificación HTML para admitir reemplazos parciales. AJAX es el testimonio de que eso se necesita. Flash también lo implementa (llamándolo carga dinámica).

Por el momento, la manera de hacer eso es con ayuda de Javascript (y alguna biblioteca como jQuery).

MVC
Un patrón de muy difundido en los frameworks actuales es MVC (modelo-vista-controlador).

Básicamente, se piensan las soluciones en términos de tres tipos de componentes: controladores, modelos y vistas.

Un controlador recibe la solicitud, determina qué hacer, utilizando los modelos necesarios y pasa los resultados a una vista.

Algunos dicen que la idea principal es que los diseñadores no se vean obligados a programar ni los programadores a diseñar. Pero, como nadie lo ha logrado (para hacer cualquier template se combina diseño con programación), pienso que se trata más de una cuestión de orden.

Si se usa Javascript para carga dinámica, lo que ocurre es que lo que devuelven las vistas puede ser usado no sólo para reemplazos totales, sino también para reemplazos parciales.

¿Por qué no se hace?
Eso mismo me pregunto.

He ido desarrollando estas ideas luego de observar como la comunidad Drupal está rehaciendo los módulos que funcionaban bien en Drupal 6 para que funcionen en Drupal 7. Es un riesgo. Se habla que algunos proyectos, como Perl, han perdido comunidad por hacer maniobras como esa.

Ya se ha iniciado la carrera hacia Drupal 8... llegado el momento, ¿volverán a reescribir los módulos?... ¿y así, sucesivamente?

Me parece que debe haber un camino mejor.

¿Qué le parece?

Solucionar puerto 80 ocupado luego de Webmatrix

2011-10-04T16:12:00.002-05:00

Resolver esto me ha tomado un tiempo. Espero le resulte de ayuda a alguien.

Luego lo desinstalar Webmatrix (La versión 1.0 me parece, en Windows 7), encontré que XAMPP no podía usar el puerto 80 como antes.

Con la idea de averiguar qué proceso lo ocupa, ejecuto en la consola de comandos, como administrador:

netstat -anb

pero aparece que no hay información disponible sobre el proceso que ocupa el puerto 80.

Usando la utilidad tcpview (de Sysinternals), veo que el proceso es el mismo System, con PID 4.

Hago telnet localhost 80 y veo que quién está atendiendo es Microsoft-HTTPAPI/2.0

Reviso en el Panel de Control, Herramientas Administrativas, Servicios, y desactivo "Servicio Agente remoto para Microsoft Web Deploy 2.0."

Eso era. Al parecer un issue de Webmatrix. Ahora XAMPP ya puede iniciar en el puerto 80.

Referencias

Port 80 is being used by SYSTEM (PID 4), what is that?

Comprobar un elemento con jQuery

2011-09-22T12:49:00.002-05:00

Para comprobar si existe un elemento, es útil comprobar su propiedad length:

if ($('selector_del_elemento').length) {
  ...
}

Ejemplos con selectores:

$('#section-1')
$('.sections a.active')

Referencias

How to tell if an element exists

SEO

2011-09-19T15:28:00.000-05:00

SEO es como se denomina al trabajo de optimizar páginas web para facilitar su procesamiento por los buscadores (el término proviene de las siglas de Search Engine Optimization: Optimización para Máquinas de Búsqueda).

He estado leyendo sobre SEO durante 3 días, así que ya soy un experto.

;-) Claro que es una broma. Así conociera toda la teoría, un experto, prácticamente por definición, es aquel que ha experimentado durante algún tiempo, y ha obtenido ese conocimiento que da la práctica (y que suele corregir a la teoría).

En el caso particular de SEO, el tiempo parece ser un factor casi inevitable. Un cambio SEO podría tardar al menos dos semanas en verse reflejado. Y una campaña SEO al menos 3 meses.

No, no soy un experto en SEO, pero me gustaría compartir algunas de las cosas que he encontrado, y también algunas reflexiones. Espero sea indulgente con algún error que llegara a notar, y agradezco de antemano los comentarios en buena onda.

Me parece que Optimización para Motores de Búsqueda no deja muy claro qué es lo que optimiza. ¿La página o su posicionamiento? Aquí manejo la definición de SEO como veo que lo hace Google. Como la optimización de la página para mejorar su visibilidad para los motores de búsqueda.
Sin embargo, también es frecuente encontrar que se piense en SEO como la mejora de la posición de un sitio web en los resultados de búsqueda. Es decir, mejorar su visibilidad en la lista de resultados de los motores de búsqueda.
Como la posición de una página web suele estar determinada por el número y la calidad de los enlaces que le apuntan desde otras páginas, mejorar eso es toda una campaña. Involucra inscribirse en directorios, ser recomendado por páginas afines, aparecer en blogs, participar en foros, redes sociales, quizás algo de publicidad en otros medios, el boca a boca, etc.
Que la página pueda ser eficientemente indexada por un robot también ayuda, y es en ese sentido que uso el término SEO.
SEO es una de las muchas herramientas que se usan en la campaña para mejorar la posición. Me parece que es más claro así, que llamar SEO a las dos cosas y dar pie a confusiones.

El problema y las soluciones
Me parece que para entender lo que se hace en SEO hay que considerar cómo encontramos una página web.

En el principio, como ahora, fueron las páginas, y la necesidad de encontrar las páginas que contuvieran la información que queríamos. Para ayudar en eso, aparecieron directorios, como Yahoo, con enlaces que eran mantenidos manualmente. Quienes publicaban algo en la web, se inscribían al directorio y su página era enlazada bajo cierta categoría. Un buscador de texto ayudaba a localizar algún enlace en particular.

Luego, se automatizó el proceso, como lo hace Google, usando programas robots (llamados spiders) que navegan por la red, siguiendo enlaces y recomendaciones. De esa navegación de robots, se extrae información que permite construir listas de enlaces según las palabras clave que proporcionemos para la búsqueda.

La solución y el problema
Estos robots tienen capacidades limitadas de exploración, en comparación con los humanos. Pueden leer el texto simple contenido en los archivos HTML, pero no el que estuviera contenido en una imagen o fotografía. No pueden reconocer el significado de una forma. Aunque pueden reconocer las palabras no pueden reconocer lo que significan. Ni el mensaje contenido en un texto, o una foto, o un video. Aún no tienen esa capacidad.

A pesar de eso, son muy útiles para buscar entre las páginas de la red. Es más, tener un puesto relevante en el índice de los buscadores se ha vuelto tan importante como para que la gente se vea obligada a modificar la forma en que hace las páginas web, de modo que los robot no encuentren demasiados obstáculos al navegar por ellas.

Como los robots no pueden entrar a cierto tipo de medios, los humanos crean contenido textual alterno que los robots puedan ver e indexar. La labor del SEO es entender cómo hacerlo.

Ojalá quede un poco más claro que el SEO existe debido a las limitaciones de los robots para entender el contenido. La optimización de la que se habla es para ellos, no para los humanos.

Me parece que es importante tener presente esta situación para ver con más claridad las opciones disponibles.

El texto alterno
Quizás lo ideal sería que los robots de los motores de búsqueda pudieran entender el contenido del mismo modo que los humanos. Pero por el momento, sólo pueden reconocer texto simple así que, si tenemos contenido que no sea texto simple, hay que hacerles una versión textual para ellos.

Pero la capacidad de Internet para mostrar contenido multimedia ha ido aumentando, y probablemente continuará haciéndolo. Así que hay una porción cada vez mayor de la web a la que los robots no pueden acceder y que sería completamente invisible para los buscadores si no fuera porque introducimos manualmente contenido textual alterno.

Por otro lado, el tener contenido textual alterno puede ser útil no solo para los robots con capacidades limitadas, sino para los humanos con capacidades limitadas que accedan a las páginas.

Sin embargo, el tener contenido duplicado en diferentes versiones no parece muy eficiente. Sería mejor encontrar algún modo de presentar convenientemente las páginas según quién lo solicite. Multimedia para quién lo pueda apreciar, texto para quién solo pueda o quiera texto, etc. Pero todo a partir de la misma fuente.

El factor humano
Parece que, al menos por el momento, es un problema muy difícil aumentar las capacidades de los robots, porque se ha optado por la alternativa de usar a los humanos para eso. Por ejemplo, cuando un humano califica positivamente cierta información (haciendo click en "Me gusta" o "+1"), contribuye a hacerla más relevante para los buscadores.

Un solo individuo podría equivocarse, o manipular su voto, pero el conjunto de individuos muestra un comportamiento colectivo relevante que puede resultar de ayuda a la hora de buscamos algo.

Sin embargo, quizás nuestra inteligencia colectiva tenga ciertas preferencias y hayan espacios en la red que no se cataloguen tan bien como nuestras búsquedas quisiera.

Tal vez cuando haya robots que puedan entender más, se encarguen ellos de hacer las calificaciones positivas.

Mientras tanto, hacemos SEO.

SEO

con la ayuda de SlideShare por Antonio Kobashikawa

Herramientas

Spider Simulator
http://www.feedthebot.com/tools/spider/index.php
Permite examinar los resultados de una página del mismo modo que lo haría un spider. Es genérico; a diferencia del spider de Google, no soporta flash.
View a Web Page as 'Googlebot'
http://www.smart-it-consulting.com/internet/google/googlebot-spoofer/index.htm
Simula Googlebot y otros crawlers
filetype:flash
Una forma de demostrar que Google puede explorar dentro del texto de un swf (sí, si puede hacerlo) es buscar algo como:filetype:swf "futbol"

Referencias

Mejorando la indexacion de Flash (10/3/2009)
http://googlewebmaster-es.blogspot.com/2009/03/mejorando-la-indexacion-de-flash.html
Creating Google-friendly sites: Flash and other rich media files (7/23/2011)http://www.google.com/support/webmasters/bin/answer.py?answer=72746
Google - Guía SEO para Principianteshttp://www.google.es/webmasters/docs/guia_optimizacion_motores_busqueda.pdf
Wikipedia: Search engine optimization
http://en.wikipedia.org/wiki/Search_engine_optimization

Liberando la V, otra forma de usar un framework MVC

2011-07-18T14:24:00.007-05:00

En el esquema MVC, se tienen modelos que proveen datos, y controladores que toman los datos y los procesan de algún modo antes de enviar el resultado a la vista.

En web, los framework MVC tratan de seguir este esquema para organizar el trabajo. En teoría, parte del equipo se puede enfocar en los modelos, otro en los controladores y otro en las vistas.

Al margen de si en la práctica realmente se cumple esto, es notable un problema: los modelos, vistas y controladores desarrollados determinan finalmente un API no estándar que termina "enjaulando" el producto final. Si decide actualizar el framework a la siguiente versión, encontrará que puede acarrear para el site un trabajo similar a volverlo a hacer. Aún más difícil es pasar un site de un framework a otro.

Esto genera algunos vicios. Si otro framework implementa cierta característica ventajosa, no lo podemos usar; tenemos que esperar hasta que algo similar sea implementado en el que usamos. Esa característica debe ser expresada otra vez, en los términos de nuestro framework.

En mi opinión, esto ocurre porque la página web ha sido forzada a encajar en el esquema MVC sobrescribiendo sus características estándar por otras propietarias, definidas por su sistema de templates particular.

Sí, aunque el framework sea open source, en este caso se está comportando como un ente propietario. Y eso es lo que provoca esta limitación de libertad.

Para tener más libertad, libere la vista. Puede desarrollar su sitio web de modo que las vistas sean HTML estándar y las partes dinámicas carguen con javascript (AJAX) los datos obtenidos de invocar algún framework.

Por ejemplo. Si uso Drupal como framework, puedo tener un subdirectorio drupal dentro de mi site, e invocar con javascript a algo como drupal/action.json, cuyo resultado reflejo en la página.

No hay problema con las páginas del site mientras no cambie el modo de invocar la accion. Si luego cambio la versión de drupal, no seria necesario cambiar las vistas.

Si, en lugar de usar drupal como nombre del subdirectorio, hubiera usado algo como framework, y colocara dentro acciones que se invocaran del mismo modo, entonces, podría usar cualquier framework, con tal que siguiera el protocolo esperado por las vistas.

Esta forma de trabajar puede permitir funcionar un sitio dinámico que use muchos frameworks diferentes en simultaneo. Uno para el login, otro para los listados, otro para comunicaciones, etc. El que mejor haga lo que queremos. También facilita la actualización de los frameworks a versiones superiores.

Usar javascript para esto me parece un camino relativamente asequible en este momento. Pero si alguien no desea usar javascript para eso, podría usar un framework unobstrusivo (que respete la integridad de las páginas), como uphp, para hacer el trabajo de reemplazo. uphp usa querypath para ubicar un elemento en la página (al estilo jquery, pero con php), y reemplazarlo por algún resultado; todo eso en el lado del servidor.

En este otro modo, no son las vistas las que invocan las acciones, sino los controladores que se disponen en el framework unobstrusivo (o uframework, para abreviar). El uframework podria invocar a otros frameworks para hacer los reemplazos de los resultados en las ubicaciones pertinentes en la vista. Igual, se podría usar varios frameworks a la vez.

La idea principal es que la vista salga de la jaula del framework, se respete su integridad, tal como es, y sea independiente de los motores que se usen para generar el contenido dinámico.

Generación modular de HTML

2011-07-08T15:39:00.004-05:00

Actualmente, cuando desarrolla un sitio usando cierto framework, no lo puede modificar con otro. Si está metido en esto, puede parecer obvio y hasta natural. Pero, si lo vemos en perspectiva, es algo así como una limitación por diseño. Algo que se podría mejorar.

Sites estáticos y dinámicos
Aunque el objetivo final es enviar html al navegador, en el desarrollo de sites dinamicos el paso intermedio es crear un conjunto de archivos que generen el html que se desea.

Cuando se trata de sites estáticos es más simple. Uno coloca los archivos en el directorio web y el servidor web los envía al navegador tal cual. Esos archivos son html, css, javascript, o imágenes que el desarrollador puede modificar con la libertad de elegir entre muchas herramientas para eso.

Cuando se trata de sites dinámicos las cosas se suelen complicar. En general, primero se plasma el diseño en un site estático, que luego es desmantelado para ver el modo de generarlo. Finalmente, se obtiene el site dinámico, que actúa como un generador total del html que se desea.

Ese suele se el enfoque más usado. Practicamente siempre que use C, Java, PHP, Ruby, Python, o lo que sea, lo que construye es siempre un generador total de html.

Frameworks exclusivos

El enfoque de la generación total tiene el problema de tender a soluciones monolíticas, con sus vicios asociados.

Si quiere modificar el site, tiene que modificar el generador, y tiene que entender el framework-que-todo-lo-hace.

Cuando un framework mejora, esa nueva versión no le sirve para el site que hizo con la versión antigua y tendría que reescribir el site bajo los nuevos términos.

Si otro framework implementa una característica que le gustaría, tendrá que esperar hasta que sea implementada, otra vez, en los términos del framework que usted usa.

Un montón de trabajo repetido.

Frameworks inclusivos

Una alternativa podría ser hacer generadores modulares. En lugar de generar el html de toda la página, un generador modular sólo produce el html de cierta región específica.

Para indicar dónde colocar el html dinámico, habrían algunas alternativas:

Que la página use javascript, obtenga el resultado y lo coloque.
Que la página use un tag especial que se reemplace por el contenido dinámico.
Que el servidor ubique los lugares dónde hacer el reemplazo y los haga.

La primera alternativa es relativamente asequible con lo que ya tenemos. Para las otras, habría que hacer un framework que se encargue de hacer los reemplazos adecuados (por ejemplo uphp).

Ya mismo podríamos empezar a desarrollar sites de ese modo. Una ventaja grande de usar generadores modulares, es que no importa en que lenguaje de programación se hacen, ni que framework usan, ni que versión del framework. Simplemente se usan. Podría usar generadores modulares escritos en C, Java, PHP, Python y Ruby... todos juntos!

Liberando los sitios dinámicos

2011-06-28T15:00:00.002-05:00

Imagine que le hicieran una página web y, un tiempo después, usted quiere modificar el documento HTML.

Imagine que puede abrirla en cualquier editor de texto, modificarla y volverla a grabar. Sin importar si se hizo en Dreamweaver, Geany, Notepad, o cualquier otro. Qué libertad.

Claro que no sólo lo podemos imaginar, de hecho podemos hacerlo.

Entonces, ¿por qué hemos permitido que esta libertad y conveniencia sea recortada por los frameworks? Porque eso es lo que ocurre.

Cuando hacemos un sitio dinámico, digamos en CakePHP, y, un tiempo después, usted quiere modificarlo, tiene que usar no sólo CakePHP, sino la misma versión de CakePHP. Del mismo modo si hubiera usado Zend, CodeIgniter o Drupal.

Es como si le dijeran que para abrir un HTML tiene que usar Notepad 4 y no otro, porque no es compatible. Que si quiere el mismo site para Notepad 5 hay que volverlo a hacer.

Sí, un site dinámico es más complejo que un documento HTML, pero la razón es similar. Es importante que el producto sea independiente de la herramienta usada para fabricarla. No sólo porque es un gran ahorro de esfuerzo y duplicidad. Sino también para que tengamos la libertad de elegir cualquier herramienta que queramos.

En el desarrollo web han aparecido islas, o silos. Al comienzo fue entre lenguajes, como ASP, JSP, PHP, Python, Ruby. Luego entre frameworks dentro de esos lenguajes. Y entre versiones de un mismo framework.

Muchos desarrolladores se amarran a cierta plataforma porque sus productos no pueden ser modificados con otra. Expresar un sitio dinámico en otro framework (o versión de framework) puede ser tanto trabajo como hacerlo de nuevo.

Después de todos los discursos que nos dan sobre la reinvención de la rueda, KISS (Keep It Simple, Stupid: Mantenlo Simple, Estúpido), DRY (Don't Repeat Yourself: No te Repitas), etc ¿no le parece poco razonable?

Hay razones por las que se prefirió que los protocolos web usaran texto simple. Para que cualquiera pudiera entrar a manejarlos. Quizás debemos recordarlo más seguido.

Imagine que le hicieran un sitio dinámico y, un tiempo después, usted quiere modificar el site.

Imagine que puede usar cualquier framework, modificarlo y guardarlo. Sin importar si se hizo en Drupal 6 o Drupal 7. O si se hizo en Zend o CodeIgniter. Incluso sin importar si se hizo en PHP, Ruby, Python o ASP. Qué libertad.

Claro que sólo lo podemos imaginar, pero podemos hacerlo.

Proyectos como sistemas biológicos

2011-06-19T01:23:00.000-05:00

Los proyectos de software no salen tan bien como se quisiera.

Un programador solitario, con talento, puede hacer código muy bonito, hasta cierto punto.
Cuando el proyecto llega a cierto tamaño o complejidad, es cada vez más difícil continuar.

Varios programadores, con talento, formando un equipo, pueden hacer algo muy bueno, muy por encima de lo que serían capaces con sus talentos individuales, hasta cierto punto.
Cuando el proyecto llega a cierto tamaño o complejidad, es cada vez más difícil continuar.

Los proyectos exitosos son aquellos que alcanzan ese punto límite no tan lejos de la meta que se proponían.

Pero la mayoría lo alcanza mucho antes.

Tratando de explicarse esto, hay quienes culpan a la gente. Pero sucede incluso en equipos compuestos de gente talentosa.

Parece que la respuesta es la organización.

La forma en cómo se organiza a las personas, las reglas o normas que siguen, de algún modo, van tejiendo una trama que, eventualmente, ahoga el proyecto.

Quizás haya un modo de lograr una organización sostenible.

Por lo pronto, se ha visto algunas cosas que funcionan mejor que otras.

Algo visible es más fácil de corregir. Algo simple es más fácil de ver. Algo modular es más simple de hacer. Algo descentralizado es más modular. Algo libre es más descentralizado. Algo que podemos corregir es más libre.

Cada ser vivo puede considerarse un tipo de sistema. Cada ser vivo tiene una vida, corta o larga, con un patrón de nacimiento, desarrollo, apogeo y remisión. Quizás sea propio de cada sistema. Quizás cada sistema está condenado por la complejidad que es capaz de alcanzar. El apogeo sería el aviso de la remisión inminente. Y la remisión el preámbulo de un nuevo nacimiento.

Quizás debamos dejar de comportarnos como si pudiéramos diseñar proyectos eternos, que muchas veces conducen a intentos efímeros, y diseñar proyectos con ciclos de ascenso y remisión, que inspiren y exhalen, que corran y duerman. Y todo eso, mientras evolucionan.

Ubuntu menú de aplicaciones con iconos

2011-06-17T11:36:00.002-05:00

En Ubuntu Natty Narwhal, no me agrada mucho que Unity, el nuevo sistema de escritorio de Ubuntu, requiera que uno descienda varios niveles para encontrar el menú de aplicaciones (Ubuntu logo, More Apps, All Applications).

Así que he instalado Cairo, que provee un docker similar al que se usa en Mac, o al que provee también RocketDock en Windows. Lo bueno de Cairo es que provee un acceso directo al menú de aplicaciones.

Sin embargo, noto que el menú de aplicaciones no muestra los iconos sino sólo la etiqueta de cada opción.

Encontré en tips4linux.com una manera de solucionarlo. Ejecutar en la consola de comandos:

gconftool-2 --type Boolean --set /desktop/gnome/interface/menus_have_icons True

Referencias

Toggle the Ubuntu System menu icons to Visible

Resolviendo inicio MySQL con Xampp en Ubuntu

2011-06-16T01:12:00.000-05:00

Instalé Lampp (Xampp para Linux, xampp-linux-1.7.4.tar.gz) en Ubuntu (Natty Narwhal).

La ruta de instalación es /opt/lampp

Para iniciar lampp:

sudo /opt/lampp/lampp start

Obtuve un mensaje de error, indicando que MySQL no podía iniciar.

Parece que el problema tiene que ver con los derechos de escritura. La solución que me funcionó fue:javascript:void(0)

sudo -s
cd /opt
chmod -R 777 lampp
chmod 755 lamp/etc/my.cnf

Espero le sea de ayuda. Quizás alguien encuentre una mejor solución.

Copia en Linux convirtiendo symlinks

2011-06-14T13:34:00.000-05:00

En Linux, para copiar un directorio completo, se puede usar algo como:

cp -a origen destino

Si origen tuviera symlinks (enlaces simbólicos), estos se copiarían tal cual.

Si se desea que los symlinks se conviertan en los archivos a los cuales apuntan:

cp -aL origen destino

Esto parece que no esta muy documentado. Ojalá le sea de ayuda.

Acceder a Nokia 3220 usando Gammu

2011-06-11T22:57:00.002-05:00

El Nokia 3220 es un teléfono celular que vengo usando varios años. Ahora, quizás se puede considerar un modelo antiguo, pero puede tomar fotos de 640x480 px que se ven bien.

Para descargar las fotos, uso un cable tipo DKU5 que va del puerto serial del teléfono a un puerto USB de la computadora.

En el lado de la computadora, con Windows, se puede usar el Nokia PC Suite. Me ha funcionado bien con Windows XP. Con Windows 7 parecía no conectar bien, así que lo que hice fue correr Windows XP en un vmware para correr allí el Nokia PC Suite.

Muchas veces he tenido problemas para lograr la conexión. El teléfono suele decir 'Data enhancement not support', aún cuando finalmente la conexión se logre.

Ahora que estoy usando Ubuntu Linux (Natty Narwhal), encontré que se puede usar Gammu/Wammu para acceder al celular.

Instalé Wammu y lo probé. Tiene un wizard que permite identificar el celular conectado. Se logra hacer la conexión, pero no logré encontrar en la interfaz del programa el modo de descargar las fotos.

Entonces encontré el artículo COMO: Archivos de Nokia 3220 ( u otro ) a Ubuntu que me mostró el camino por la consola de comandos.

Primero instale Gammu (yo pensaba que Wammu lo había instalado pero no era así):

sudo apt-get install gammu

Luego, verifico que en ~/.gammurc esté lo siguiente (generado previamente por el wizard de Wammu):

[gammu]
port = /dev/ttyUSB0
connection = dku5fbus
name = Nokia 3220

Para comprobar la conexión, ejecuto:

gammu --identify

Obtengo:

Device               : /dev/ttyUSB0
Manufacturer         : Nokia
Model                : 3220 (RH-49)
Firmware             : 05.10 I (07-09-05)
Hardware             : 6203
...
Old simlock          : TIM Peru (716 10)
UEM                  : 400

Se puede obtener un listado de los archivos (en un formato tipo árbol):

gammu --getfilesystem

O también un listado plano:

gammu --getfilesystem -flatall

Con el listado plano, veo que los archivos de las fotos están en d:/predefgallery/predefphotos. Entonces, ejecuto:

gammu --getfilefolder d:/predefgallery/predefphotos

Y logré descargar mis fotos.

Para más ayuda sobre el comando gammu:

gammu --help
gammu --help filesystem

Al querer eliminar los archivos Image*.jpg, encontré que no funcionaba gammu --deletefiles d:/predefgallery/predefphotos/Image*.

Entonces, ubicado en el directorio donde descargué las fotos, ejecuté este comando:

for p in $(ls Image*); do echo $p; gammu --deletefiles d:/predefgallery/predefphotos/$p; done

Quizás les sirva de ayuda.

Referencias

COMO: Archivos de Nokia 3220 ( u otro ) a Ubuntu

Acceder a un Server en Virtualbox desde el Host

2011-06-07T11:51:00.002-05:00

Virtualbox es una aplicación que permite instalar un sistema operativo dentro de otro. Por ejemplo, puedo instalar Ubuntu Linux dentro de Windows 7. En el caso que describo a continuación, está instalado Windows XP dentro de Ubuntu Linux (Natty Narwhal).

Por qué
Al requerir un entorno de desarrollo Drupal que sea portable, la solución que encontré fue usar XamppLite portable (disponible para Windows) en un USB.

Como trabajar directamente en el USB me parece muy lento, copio el directorio de xampplite al disco duro y trabajo allí. Luego, al final del día, sincronizo esa copia con el USB.

Como todo el estado de la base de datos MySQL está en los archivos generados, al copiarlos todas las bases de datos, tablas y cambios se reflejan idénticamente.

Al volver a trabajar en Linux, me interesó encontrar un modo de levantar el xampplite. Intenté con Wine y, aunque arranca el panel de control de xampp, no se puede iniciar el servidor apache. Entonces, lo hice con Virtualbox.

Instalé Virtualbox 4.0.8 para Ubuntu y allí instalé Windows XP.

De modo que, en la jerga de la virtualización, Ubuntu es el Host y Windows XP es el Guest.

Pude correr xampplite y funcionaba apache. Pero no encontraba el modo de acceder al servicio web del Guest desde el Host.

Usando VBoxManage
No logré encontrar en la interfaz de Virtualbox un modo de configurar eso.

Después de navegar un poco en Internet, encontré en Sitepoint el artículo Build Your Own Dev Server with VirtualBox. Allí, la solución consiste en editar a mano el archivo XML de la configuración de la máquina virtual.

Si uno revisa ese archivo (VirtualBox.xml) puede encontrar la advertencia de no editarlo a mano. Así que indagué un poco más para ver si había otro modo y lo encontré en el artículo How to access a server running in a VirtualBox guest, que indica cómo hacer los cambios usando el comando VBoxManage.

Primero hay que apagar la máquina virtual. Los cambios se harán efectivos al reiniciarla.

Para listar las máquinas virtuales:

VBoxManage list vms

Hay que establecer varios extradata en el Guest "Windows XP":

VBoxManage setextradata "Windows XP" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/HostPort" 8888
VBoxManage setextradata "Windows XP" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/GuestPort" 80
VBoxManage setextradata "Windows XP" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/Protocol" TCP

Para verificar:

VBoxManage getextradata "Windows XP" enumerate

Si hubiera que eliminar alguno, bastaría con darle un valor en blanco. Por ejemplo:

VBoxManage setextradata "Windows XP" "VBoxInternal/Devices/pcnet/0/LUN#0/Config/apache/HostPort" 8888

A continuación inicié el Guest, y el servidor apache que contiene.

En el Host pude acceder al servicio web entrando a:

http://localhost:8888

Referencias

XAMPP en Ubuntu

2011-06-03T16:14:00.003-05:00

XAMPP empaqueta Apache, MySQL, PHP y otros programas que se suelen usar en programación web.

Instalar y usar XAMPP para desarrollo me ha venido resultando una alternativa más práctica que buscar/instalar/configurar cada uno de sus componentes por separado.

Para instalar XAMPP en Ubuntu se pueden seguir las instrucciones para el caso Linux, que aparecen en el sitio de ApacheFriends: http://www.apachefriends.org/en/xampp-linux.html.

Básicamente, consiste en descargar el tar.gz de la versión que se desea y extraer el contenido a /opt.

En mi caso, se trata de instalar XAMPP 1.7.1, que es la versión compatible con Drupal 6.

Descargo xampp-linux-1.7.1.tar.gz (http://sourceforge.net/projects/xampp/files/XAMPP%20Linux/1.7.1/).
Abro una consola de comandos y cambio a usuario root:
```
sudo -s
```

Extraigo el contenido del tar.gz a /opt:

tar -xvzf xampp-linux-1.7.1.tar.gz -C /opt

Para iniciar xampp:
/opt/lampp/lampp start
Para detener xampp:
```
/opt/lampp/lampp stop
```
Para establecer contraseñas (que se recomienda por seguridad):
```
/opt/lampp/lampp security
```

Se puede observar que el comando es lampp. Ese era el nombre que ApacheFriends le había puesto. Sin embargo, es xampp para Linux.

Panel de Control

Para tener un panel de control similar al que estaba disponible en Windows:

En la consola de comandos:
```
sudo gedit ~/.local/share/applications/xampp-control-panel.desktop
```
En este caso uso gedit, pero también se pudo haber invocado otro editor de texto, como nano o vi.

En el editor de texto:

[Desktop Entry]
Comment=Start and Stop XAMPP
Name=XAMPP Control Panel
Exec=gksudo python /opt/lampp/share/xampp-control-panel/xampp-control-panel.py
Icon[en_CA]=/usr/share/icons/Humanity/devices/24/network-wired.svg
Encoding=UTF-8
Terminal=false
Name[en_CA]=XAMPP Control Panel
Comment[en_CA]=Start and Stop XAMPP
Type=Application
Icon=/usr/share/icons/Humanity/devices/24/network-wired.svg

Después de eso, podrá encontrar una nueva opción en el menú: Applications/Other/XAMPP Control Panel.

Referencias

Moviendo Dropbox

2011-06-03T14:00:00.003-05:00

Hace algún tiempo que vengo usando Dropbox, el programa que facilita la sincronización de una carpeta en nuestro disco con otra en dropbox.com

De ese modo, los archivos que tenga en el dropbox de la computadora de la casa se sincronizan con el de dropbox de Internet y luego con el dropbox de la computadora de la oficina. Es como la idea del USB, pero automático.

Ahora que estoy empezando a trabajar con Ubuntu Linux, noté que Dropbox ha cambiado el nombre de su directorio por default. Antes se llamaba "My Dropbox" y había muchas quejas por eso en los foros. Ahora se llama simplemente "Dropbox". Es decir, que si elige que su directorio para dropbox esté en /home/rulo, por ejemplo, entonces el directorio de dropbox será /home/rulo/Dropbox.

Como uso Linux al lado de Windows, y el disco de Windows es visible desde Linux, me parece buena idea que el dropbox que instale en Linux apunte al mismo directorio que el que tengo instalado en Windows.

Pero alli el directorio es "My Dropbox". Pensé que podría usarlo pero no, dropbox insiste en que el directorio se llame "Dropbox". Entonces, entré a Windows, fui a la configuración de dropbox e indiqué mover el directorio a una nueva ubicación. En micaso, elegí el directorio C:\Users\compaq, de modo que el nuevo directorio de dropbox es C:\Users\compaq\Dropbox.

Advertencia

Luego de esto fui a Linux e indiqué a dropbox que use la misma carpeta que Windows. Empezó por eliminar todo el contenido (!!!) y luego procedió a descargar lo que tenia en Internet.

Tome sus precauciones. Una mejor alternativa sería tener una copia del dropbox en otra carpeta y, luego de instalar dropbox, pausar la sincronización, pasar a mano los archivos, y reiniciar la sincronización. Quizás así se ahorraría tiempo en la sincronización inicial.

Ubuntu Natty Narwhal con Windows 7

2011-06-01T18:48:00.002-05:00

Hoy he instalado Ubuntu Natty Narwhal (ubuntu-11.04-desktop-i386.iso) junto a Windows 7, que ya estaba instalado. Aunque no ha sido tan fácil como parecía.

Intro
La PC de la oficina es una Compaq Presario CQ5310LA PC, con Windows 7 instalado de fábrica. Hace muchos años, en otra oficina, habitualmente usaba RedHat o Suse, pero recientemente la he pasado más con Windows XP y Windows 7.

Cuando necesito hacer alguna tarea en el servidor Linux, abro un terminal con Putty. Si quiero experimentar alguna aplicación Linux, puedo usar VMWare o VirtualBox para instalar allí alguna distribución.

Me gusta mucho la opción de la virtualización con VMWare o VirtualBox pero, si no hay mucha memoria, todo el sistema se vuelve bastante lento.

Viendo a los amigos de la comunidad Drupal Perú usando Linux y, considerando los temas que me gusta investigar, me animé a dar el salto para volver a usarlo más intensivamente.

Sin embargo, hay algunas cosas de desarrollo web para las que tengo herramientas habituales en Windows. Así que lo tengo a la vuelta para cuando lo necesite, mientras voy desarrollando alternativas.

No tan fácil como parecía
No es la primera vez que instalo Ubuntu. Incluso antes he hecho una instalación dual con Windows XP. En aquella ocasión aprendí que a veces el sistema de arranque de Windows y el de Linux se cruzan y hay que hacer algunas correcciones luego del proceso.

Esta vez, vi con agrado que había una interfaz incluida en el proceso de instalación para cambiar el tamaño de la partición Windows existente para hacer espacio a la nueva partición para Ubuntu. Además, no requería de ninguna operación previa de defragmentación. Supuese que era una señal de que el proceso sería más facil ahora, pero no fue así.

Puse el instalador en un USB (usando Lili USB Creator) y reinicié el sistema para arrancar desde ahí.

En el proceso de instalación, el reparticionamiento fue casi automático. Indiqué 50 GB para la nueva partición Linux. Luego continuó bien pero, casi al final, falló por alguna razón. Un mensaje de error irrecuperable. Reinicié el proceso.

La segunda vez hice el proceso desde el escritorio del Live CD. Ya no ocurrió el error irrecuperable y la instalación se completó, pero tardó bastante tiempo la descarga de los archivos de actualización y otros. Quizás hubiera dejado esa opción para después. Sin embargo, como estaba en el escritorio, podía navegar mientras esperaba :)

Cuando reinicié, esperaba que apareciera el menú de inicio de Grub (usado para iniciar Linux), pero la pantalla se quedó en negro, con el rectángulo que muestra el monitor cuando no recibe ninguna señal.

Probé reiniciar varias veces, sin resultado. Felizmente hice backup, pensé.

Por si acaso, repetí el proceso de instalación. Para no descargar las actualizaciones, desconecté el cable de red y así fue un poco menos el tiempo. Pero el resultado fue el mismo.

Felizmente, usando el navegador de archivos del Live CD podía comprobar que los archivos de Windows estaban allí. El problema era que se había perdido el arranque.

Hice un disco de rescate en otra máquina que también tiene Windows 7 y seguí el procedimiento de reparar el sector de inicio. Reinicié, pero seguía igual.

Una esperanza
Entonces, cruzado de brazos, vi como después de casi un minuto, en la pantalla apareció Ubuntu. Al parecer, el sistema si iniciaba, pero con un Grub silente. Sin Grub, ¿cómo escoger la opción de iniciar con Windows?

Investigando, encontré una solución para corregir el inicio perdido de Windows. Consiste en usar el disco de rescate para iniciar una consola y desde allí ejecutar:

bootrec /fixmbr
bootrec /fixboot

Funcionó y se inició Windows 7 normalmente.

Más o menos
Ahora, para tener un acceso a Ubuntu iba a intentar tratar con Grub, pero antes probé bajar el utilitario EasyBCD, que había visto mencionaban en los foros.

Allí, modifiqué el menú de inicio, agregando un nuevo item para sistema operativo Linux, tipo de inicio Grub2 (el usado por Ubuntu 11). Salve los cambios y reinicié.

Esta vez, apareció un menú de inicio provisto por Windows. Elegí Ubuntu. La pantalla se puso negra y, luego de un rato, apareció Ubuntu.

Corrigiendo el menú de Grub
Encontré una solución al problema de la pantalla negra antes de Ubuntu. Al parecer, no se estaba presentando bien el menú de grub. En la consola ejecuté:

sudo gedit /etc/default/grub.conf

Para editar el archivo de configuración de grub. En lugar de gedit también se puede usar otro editor, como nano.

En grub.conf, localizar la línea #GFX640x480 y descomentarla, de modo que queda:

GFX640x480

A continuación:

sudo update-grub

Al reiniciar la máquina, aparece primero el menú de inicio de Windows (el que configuré con ayuda de EasyBCD). Si elijo Ubuntu, aparece el menú de inicio de Grub. Bien.

Restableciendo el arranque de Grub
Quizás se podría simplificar el pasar primero del menú de inicio de Windows al menú de inicio de Grub.

Se puede conseguir reinstalando el menú de inicio Grub:

sudo grub-install /dev/sda

En mi caso, /dev/sda es el disco donde se coloca el inicio.

Al reiniciar la máquina, aparece primero el menú de inicio de Grub. Si elijo Windows, aparece el menú de inicio de Windows. Tiene sentido.

Para que no aparezca el menú de inicio de Windows, uso EasyBCD para quitar la opcion Ubuntu y además indicar que omita el menú de inicio.

Una vez hecho esto, al reiniciar la máquina, aparece sólamente el menú de inicio de Grub, desde donde se puede elegir Linux o Windows.

En resumen
Para instalar Ubuntu (11, Natty Narwhal) junto a un Windows 7, ya instalado:

No es necesario reparticionar el disco antes de correr el instalador de Ubuntu. Tampoco es necesario defragmentarlo.
Ejecutar el instalador de Ubuntu, eligiendo la instalación lado a lado, junto al Windows 7 existente e indicando el tamaño de la partición destinada a Ubuntu. Un mínimo recomendable suele ser 20 GB. Yo elegí 40 GB, pero puede ser tanto como se quiera.
Sí, luego de ejecutar la instalación, no se ve ningún menú que permita elegir qué sistema iniciar, aguardar un poco. En mi caso, me parece que luego de 30 segundos, se iniciaba Ubuntu.
Para corregir la falta de visualización del menú de inicio de Grub, editar el archivo /etc/default/grub.conf y descomentar la linea #GFX640x480.

Referencias

http://forums.scotsnewsletter.com/index.php?showtopic=45226

Unobstrusive wev dev

2011-05-20T14:27:00.001-05:00

Lea el artículo original en Unobstrusive web dev.

Programando Web

2011-05-16T15:18:00.004-05:00

Lea el artículo original en Programando Web.

.htaccess para proteger index.html

2011-04-27T12:41:00.002-05:00

Se puede usar .htaccess para proteger el acceso a un determinado archivo en un directorio. En este caso, se desea proteger el acceso a http://example.com/protegido/

.htaccess
En el directorio que contiene a index.html:

<FilesMatch index.html>
AuthUserFile /var/www/.htpasswd
AuthType Basic
AuthName "Pagina Privada"
Require valid-user
</FilesMatch>

.htpasswd
/var/www/.htpasswd se puede crear usando el comando htpasswd:

cd /var/www
htpasswd -c .htpasswd uuu

Donde uuu es el nombre del usuario al que se quiere dar acceso a ese directorio.

Files o FilesMatch
Inicialmente habia usado Files en lugar de FilesMatch, pero me permitía entrar al directorio omitiendo index.html en el url.

Por ejemplo, si el url era:

http://example.com/protegido/index.html

Podía entrar con:

http://example.com/protegido/

En cambio, con FilesMatch se protegieron ambos accesos.

Cómo sombrear filas alternas con CSS3

2011-04-23T11:47:00.003-05:00

A esta forma de presentar filas se le suele llamar cebra.

Caso Tabla

HTML

<table class="zebra">
  <thead>
    <tr>
      <th>Col0</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

CSS

table.zebra tbody tr:nth-child(2n+1) {
  background-color: #eef;
}

Normalmente, las tablas presentan sus celdas con un borde. Para ocultarlo, se puede usar el atributo html border="0". Sin embargo, también se puede hacer usando estilos, con algo como:

table.zebra {
  border-collapse: collapse;
  border-spacing: 0;
}

Caso Lista

HTML

<ul class="zebra">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

ul.zebra li:nth-child(2n+1) {
  background-color: #eef;
}

Normalmente, las listas presentan sus filas con un bullet. Para ocultarlo, se puede usar estilos, con algo como:

ul.zebra {
  list-style: none;
  padding: 0;
}

uphp

2011-04-15T15:22:00.001-05:00

Con HTML, el contenido se mezcla con etiquetas que permiten mostrarlo en un navegador.

CSS permite separar la data del formato de la data del contenido.

Javascript permite poner código en las etiquetas para manipular el documento e interactuar con sus elementos.

Unobstrusive javascript es una forma de usar javascript que procura mantener el código aparte. jQuery ayuda mucho en esto.

JSP, PHP, etc, permiten generar HTML, abriendo la puerta a la automatización y al uso de recursos como las bases de datos.

Frameworks web permiten para manejar el desarrollo de un site relativamente extenso o complejo.

El modelo de framework MVC (Modelo-Vista-Controlador), viene del mundo Smalltalk a la web para separar el desarrollo en esas tres capas.
En mi opinión, aumenta la inercia del proceso de desarrollo. Expresar una solución web en términos MVC se convierte en un problema adicional.

Drupal usa un modelo de framework diferente, ingenioso, permitiendo agregar libremente componentes que pueden colaborar entre sí.
También requiere algo de tiempo y trabajo aprender a pensar y expresar cualquier solución en sus términos. A cambio, a mi parecer, permite ser mucho más productivo que en cualquiera de las alternativas anteriores.

En general, estos frameworks requieren que aprendamos una nueva versión de lo que ya sabemos hacer en web. A veces, incluso hay que hacer ese reaprendizaje de una versión a otra del mismo framework.

¿No le parece que algo tiene que cambiar?
¿Habrá alguna forma de hacer dinámica una página estática sin tener que reescribirla?

Encontrando a QueryPath, algo como un puerto de jQuery para PHP, que facilita la manipulación de una página, me pareció que podría haber alternativas.

uphp es la búsqueda de una forma de desarrollar web en la que el código afecta al contenido pero se manteniene aparte.
De ese modo, se pueden respetar las páginas estáticas de un site mientras se lo vuelve dinámico.
Además, se podría usar, tal cual, soluciones HTML/CSS/Javascript que sean independientes del framework.

Quien sabe, quizás tambien se halle una forma de hacer todo eso y además separar la data del contenido de la data HTML.

Cómo definir un selector CSS que requiera dos clases

2011-04-07T17:24:00.002-05:00

El problema que tenía involucraba bloques similares a:

proyectos-vista_1

<div class="view view-proyectos view-display-id-page_1">
  ...
</div>

proyectos-vista_2

<div class="view view-proyectos view-display-id-page_2">
  ...
</div>

noticias-vista_1

<div class="view view-noticias view-display-id-page_1">
  ...
</div>

noticias-vista_2

<div class="view view-noticias view-display-id-page_2">
  ...
</div>

Necesitaba aplicar un estilo únicamente al bloque proyectos-vista_1. Podría ser más fácil si éste tuviera un id, pero no lo tenía (así lo construye Drupal, en este caso).

La solución la encontré en este artículo. Consiste en usar un selector como:

.view-proyectos.view-display-id-page_1 {
  ...
}

Qué sencillo. No me lo imaginaba :-) Ojalá te sirva de ayuda tambien.

Referencia
Defining A CSS Selector That Requires A Multi-Class Union

Separación entre párrafos en Flash

2011-04-05T12:14:00.001-05:00

Para aprovechar esta característica, el documento flash debe ser para Flash 10 y Actionscript 3.

Cuando defina un texto, asegúrese de que es de tipo TLF (no la opción Classic Text). Esto permite acceder a propiedades avanzadas para el control de texto como Spacing, que permite controlar el espaciado entre párrafos.

Algo que hay que tomar en cuenta es que, a diferencia de la mayoría de procesadores de texto, donde el espaciado después del párrafo se suma al espaciado anterior del párrafo siguiente, en flash se solapan. Lo que significa que si el espaciado antes del párrafo es 12px y el espaciado despues del párrafo es 24px, el espaciado entre dos párrafos no será 36px, sino 24px.

Referencia:
http://www.flashconf.com/flash-cs5/flash-cs5-paragraph-styles/

Cómo evitar que Chrome abra un PDF

2011-03-23T18:24:00.001-05:00

Normalmente, Chrome abre los enlaces a documentos PDF en la misma ventana. Quizás esto le parezca cómodo a algunas personas pero, al menos para mí, no lo es.

El problema
Si el documento es muy pesado, podemos tener una página en blanco largo rato, sin mayor indicación de lo que esta pasando. Prefiero descargar el documento y luego abrirlo cuando yo quiera.

Una forma es usando el clic secundario, Guardar como, en lugar de hacerle clic al enlace. El problema es que algunas veces no es obvio que el enlace va a abrir un PDF y es un poco molesto retroceder y corregir la acción.

Además, algunas veces no hay enlace, sino un botón de formulario, y entonces no se puede usar el Guardar como.

Configurando Chrome
Deshabilitar esto en Chrome no es tan obvio. No se encuentra la opción en la pantalla de configuración.

Una forma de hacerlo es entrar a la dirección:

chrome://plugins/

Aparecerá una lista de los plugins instalados. Ubique Chrome PDF Viewer y deshabilítelo.

Organizar ventanas en un snap

2011-02-19T01:31:00.000-05:00

AquaSnap es una utilidad que puede ser de mucha ayuda en el manejo de las ventanas.

Puede descargarla de http://www.nurgo-software.com/products/aquasnap, o también la versión portable desde http://portableapps.com/apps/utilities/aquasnap_portable.

Cuando la ejecuta, se coloca como tray icon (por la zona de su reloj) para que haciéndole doble clic pueda cambiar su configuración, si lo desea.

La forma de usar aquasnap es simple:

Si arrastra una ventana hacia uno de los bordes, la ventana se pegará hacia ese borde y, además, sus dimensiones ocuparán esa mitad de la pantalla.
Si arrastra una ventana hacia una de las esquinas, la ventana se pegará hacia esa esquina y, además, sus dimensiones ocuparán ese cuarto de la pantalla.
Si arrastra una ventana y la sacude, se tornará translúcida; podrá ver lo que hay debajo y se mantendrá así hasta que la sacuda otra vez.

Esto es con la configuración por default. Haciendo doble clic en el tray icon puede elegir otras opciones.

Resolviendo keys para Putty SSH a Hostmonster

2011-02-17T01:32:00.004-05:00

Hoy he pasado algunas horas resolviendo este tema.

ssh genera dos llaves (por ejemplo id_dsa -la privada-, e id_dsa.pub -la pública-).

Se pueden generar con alguno de los comandos:

ssh-keygen -t dsa

ssh-keygen -t rsa

Según el tipo que se desee.

Hostmonster también tiene un generador de llaves (al parecer ssh) que puede producir archivos similares.

Uno puede producir llaves de diverso tipo (dsa, rsa), con o sin password.

[ssh]----> id_dsa     (llave privada)
       +-> id_dsa.pub (llave pública)

[ssh]----> id_rsa     (llave privada)
       +-> id_rsa.pub (llave pública)

Los nombres pueden ser id_dsa, id_rsa, u otro cualquiera. Por ejemplo, yo estuve practicando con kobaonli_id_dsa, hp_id_dsa.

Putty es un programa que permite hacer conexiones SSH usando estas llaves (Connection/SSH/Auth).
Pero no puede usar las llaves privadas así generadas, requiere que antes sean convertidas a .ppk, con un programa como puttygen.

Puttygen tiene la opción Conversions/Import que permite importar una llave privada generada con ssh (u OpenSSH) y generar el .ppk correspondiente.
Sin embargo, tuve problemas para que puttygen (versión 0.60) reconociera llaves privadas que tuvieran password, así que generé llaves sin password.

[ssh]----> id_dsa ----[puttygen]----> id_dsa.ppk
       +-> id_dsa.pub

[ssh]----> id_rsa ----[puttygen]----> id_rsa.ppk
       +-> id_rsa.pub

Así que, en resúmen:

A) Usando llaves locales

- Usé ssh-keygen -t dsa para crear hp_id_dsa/hp_id_dsa.pub, sin password.
- Usé puttygen para importar hp_id_dsa y crear hp_id_dsa.ppk, sin password.
- En Hostmonster, CPanel, SSH/Shell Access, Manage SSH Keys, importé hp_id_dsa/hp_id_dsa.pub y luego en Manage Authorization autoricé su uso.
- Indiqué a putty que usara hp_id_dsa.ppk para el SSH/Auth.
- Me pude conectar a Hostmonster usando las llaves hp_id_dsa[.ppk]/hp_id_dsa.pub

[ssh]----> hp_id_dsa ----[puttygen]----> hp_id_dsa.ppk
       +-> hp_id_dsa.pub
           |
           v
          [hostmonster]

B) Usando llaves remotas

- En Hostmonster, CPanel, SSH/Shell Access, Manage SSH Keys, creé kobaonli_id_dsa/kobaonli_id_dsa.pub, sin password. Descargué la llave privada kobaonli_id_dsa a mi PC.
- Usé puttygen para importar kobaonli_id_dsa y crear kobaonli_id_dsa.ppk, sin password.
- Indiqué a putty que usara kobaonli_id_dsa.ppk para el SSH/Auth.
- Me pude conectar a Hostmonster usando las llaves kobaonli_id_dsa[.ppk]/kobaonli_id_dsa.pub

[hostmonster]----> hp_id_dsa ---->[pc]----[puttygen]----> hp_id_dsa.ppk
               +-> hp_id_dsa.pub

Referencias

Hostmonster Helpdesk: SSH Access - Generating a Public/Private Key
Crédito de la imágen: http://internetmarketingstrategydiva.com/wp-content/uploads/2009/12/success-blogging-keys.jpg

Cómo centrar un bloque en una página 2

2011-02-16T13:30:00.002-05:00

En el artículo Cómo centrar un bloque en una página, contaba sobre un método que venía utilizando para lograr centrar un bloque en una página.

Ayer, un amigo me mostró una página posicionada de ese modo que no cabía en la ventana de su navegador Safari. Este mostraba el centro pero no permitía alcanzar la cabecera, ni siquiera usando la barra de scroll. En otros navegadores, como Firefox, Chrome e incluso Internet Explorer, si un bloque no cabe en la ventana, se muestra lo que quepa, de arriba hacia abajo. Pero en el suyo lo hacía desde el centro hacia afuera.

Comprobé que otras páginas que había hecho usando ese método presentaban el mismo problema cuando las veía con Safari y reducía las dimensiones de la ventana.

Buscando la explicacion a esto, encontré el artículo Easy Vertical Centering with CSS, que muestra un método diferente a los usuales, bastante simple y que, sorprendentemente, funciona en todos los navegadores en los que lo he probado, incluyendo Firefox 3.6, Chrome 9, Safari 5, IE8 e IE6.

La idea
La idea básica es mover el top del bloque de contenido al centro de la página y luego corregir el desplazamiento subiéndolo la mitad de la altura del bloque de contenido.

Usualmente, en el bloque de contenido, se usa algo como:

#page {
  width: 960px;
  height: 684px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -342px;
  margin-left: -480px;
}

Pero presenta el problema del que estamos hablando.

Este otro método usa una técnica ingeniosa: usar un bloque flotante para jalar al bloque de contenido. Una propiedad del bloque flotante es que jalará mientras se pueda; si algo se interpone (como otro bloque o el borde de la ventana), dejara de hacerlo. Es justamente lo que se necesita.

Aquí, el HTML de una página que usa ese método:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}
body {
 background-color: #eed;
 min-width: 960px;
 min-height: 683px;
}
#vertical-float {
 float: left;
 height: 50%;
 margin-top: -342px; /* half vertical height*/
 width: 100%;
}
#page {
 clear: both;
 background: #fff;
 width: 960px;
 height: 683px;
 margin: 0 auto;
 overflow: auto;
}
</style>
</head>
<body>
<div id="vertical-float"></div>
<div id="page-wrapper">
  <div id="page">
    <h1>Content</h1>
  </div>
</div>
</body>
</html>

Observar que la información de la altura del bloque de contenido (#page) está presente tanto en el bloque de contenido como en el bloque auxiliar (#vertical-float).

Referencias

Easy Vertical Centering with CSS

Instalando Git en Centos 5

2011-02-15T13:04:00.001-05:00

Para comprobar si se tiene instalado Git, ejecutar:

git --version

Si no está instalado, puede instalarlo usando yum. Pero, en Centos 5, normalmente no está disponible un repositorio que contenga el paquete git.

Para comprobarlo, como usuario root, en la consola de comandos, ejecute:

yum install git

Obtendrá un mensaje que le dirá que el paquete git no está presente.

Puede agregar el repositorio EPEL (Extra Packages for Enterprise Linux), creando el archivo /etc/yum.repos.d/epel.repo:

/etc/yum.repos.d/epel.repo

[epel]
name=Extra Packages for Enterprise Linux 5 - $basearch
#baseurl=http://download.fedoraproject.org/pub/epel/5/$basearch
mirrorlist=http://mirrors.fedoraproject.org/mirrorlist?repo=epel-5&arch=$basearch
failovermethod=priority
enabled=1
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL

[epel-debuginfo]
name=Extra Packages for Enterprise Linux 5 - $basearch - Debug
#baseurl=http://download.fedoraproject.org/pub/epel/5/$basearch/debug
mirrorlist=http://mirrors.fedoraproject.org/mirrorlist?repo=epel-debug-5&arch=$basearch
failovermethod=priority
enabled=0
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL
gpgcheck=1

[epel-source]
name=Extra Packages for Enterprise Linux 5 - $basearch - Source
#baseurl=http://download.fedoraproject.org/pub/epel/5/SRPMS
mirrorlist=http://mirrors.fedoraproject.org/mirrorlist?repo=epel-source-5&arch=$basearch
failovermethod=priority
enabled=0
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL
gpgcheck=1

Si se procediera a la instalación ahora, la instalación no se completaría porque yum solicitaría /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL.

Para prevenir eso, descargue ese archivo antes:

cd /etc/pki/rpm-gpg
wget http://download.fedora.redhat.com/pub/epel/RPM-GPG-KEY-EPEL

Luego, ejecute:

yum install git git-daemon

Al final, debería aparecer una indicación de que el proceso se completó con éxito.

Para comprobar si se tiene instalado Git, ejecutar:

git --version

Quitar Facemood de la búsqueda de Firefox

2011-02-08T16:31:00.008-05:00

De algún modo instalé Facemood. De pronto uno se da cuenta de que trata de ser la máquina de búsqueda por default de tus navegadores. Parece un malware.

En Firefox, aunque el plugin de Facemood ya esté desinstalado, deja la barra de direcciones afectada. Si uno tipea allí alguna palabra, en lugar de enviarla a Google, como antes lo tenía configurado, lo envía a la página de Facemood.

Felizmente, encontré un modo de solucionar esto último (probado en Firefox 5, al menos). En la barra de direcciones de Firefox, entrar about:config. Luego de aceptar la advertencia, buscar keyword.URL. Verá que aparece la dirección de la página de Facemood. Reemplazarlo por http://www.google.com/search?q=

Referencia
http://www.flywithmysoul.com/2010/09/remove-facemood-from-firefox.html

Cómo listar sólo directorios en bash

2011-02-04T10:57:00.001-05:00

Hay varias formas. La primera me parece la más elegante (cuenta el que la compartió que la descubrió recien a los tres años de usar Linux):

ls -d */
ls -l | grep ^d
ls | grep /$

Referencia: http://www.linuxquestions.org/questions/programming-9/how-can-i-list-directories-only-in-linux-375219/

Software libre

2011-01-18T14:51:00.001-05:00

Cuando alguien se entera que hay en el mundo del software gente que contribuye voluntariamente diseñando, programando y probando programas que se distribuyen líbremente, a menudo se oye la pregunta ¿y que ganan ellos haciendo eso?

Puede ser difícil tratar de explicarle a alguien que te contempla con una mirada esceptica que es lo que ganan. Y la mirada esceptica se vuelve de confusión cuando no aparece mencionado el dinero. Porque eso es en realidad lo que preguntan, ¿de que forma ganan dinero por el trabajo que hacen?

Cuando uno va comprendiendo la respuesta, se da cuenta de que hay varias cuestiones previas que hay que atender. Cuestiones que tienen que ver con nuestros hábitos culturales.

La propia pregunta de cuánto dinero se gana por ese trabajo evidencia que damos por supuesto que trabajamos para ganar dinero. 'Por supuesto'. Si es lo que acaba de pensar, puede que al mirar un espejo descubra la mirada esceptica de la que hablo.

Hay una historia que cuenta de un millonario que estaba de vacaciones paseando por una playa y conversa con un pescador que encontró descansando bajo la sombra. Quizás podrías tener un bote más, le sugirió. ¿Para qué?, le preguntó el pescador. Podrías pescar más y tener más dinero. ¿Para qué?. Con el tiempo podrías tener una flota de barcos, y mucho dinero. ¿Para qué?. Cuando te retiraras, podrías descansar tranquilo y pasar el tiempo que quisieras con tu familia. Pero, eso es lo que estoy haciendo ahora.

A fin de cuentas, trabajamos por lo que queremos realizar con el dinero, pero llega a ser tan complicado obtenerlo y administrarlo que acabamos en medio del camino. Para dificultarlo más, realmente hay muchísima gente que, por diversas razones, trabaja en cosas que no les gusta, y llegan a pensar que el trabajo es simplemente algo que hay que hacer para obtener dinero.

La razón por la que hay gente que realiza trabajo voluntario sin recibir dinero es que recibe algo más. Cuando alguien disfruta el trabajo que hace, diseñando, programando, probando, el sólo hacerlo ya es una recompensa en sí misma. A esto se suma el producto que se logra; algo único, que encontró su propio camino, con la sinergía de todos. Es como si todos juntos construyeran una casa. Una sola persona no haría mucho con el salario que podria recibir por su trabajo. Tampoco nadie podría pagar la suma de todos los salarios. En la cultura ortodoxa de trabajar por dinero, el proyecto es imposible. Sin embargo, al trabajar por lo que realmente se quiere realizar, se realiza la casa.

Internet ha ayudado mucho a que este tipo de trabajo comunitario sea posible, porque facilita una forma de organización horizontal, distribuida, descentralizada. Es el tipo de organización con la capacidad de adaptación y el poder conjunto (pero no junto) que se necesita para cambiar el mundo en el lugar que queremos realizar. En estos proyectos, la libertad está no sólo en el software.

Pintar un grid con Photoshop

2011-01-03T10:20:00.002-05:00

1
Definir el patrón del grid.
Por ejemplo, para un grid de 100x100 se puede crear un nuevo documento, de 100x100 pixels. Luego hacer doble click en el layer Background (para desbloquearlo y se llame Layer 0). Después hacer doble click en el layer Layer 0 (para entrar a Layer Style) y allí elegir el estilo Stroke, Position: Center, Size: 1px.
Finalmente, Menú, Edit, Define pattern..., y dar un nombre, por ejemplo, Grid100x100.

2
Aplicar el patrón.
Abrir la imagen sobre la que se quiere pintar el grid. Ir a Channels, agregar un nuevo canal. Puede cambiarle el nombre (por default Alpha 1) a algo como Grid.
Seleccionar el canal y rellenarlo con el patrón: Menú, Edit, Fill..., Contents {Use: Pattern, elegir el patrón previamente definido}. Volver a seleccionar todos los canales que se hubieran deseleccionado.
Volver a Layers y agregar una nueva capa para pintar el grid. Se pintará usando una selección como máscara: Menú, Select, Load selection..., Source {Channel: Grid100x100}. Puede aprovechar y elegir Invert de una vez (para invertir la selección), o hacerlo en un siguiente paso (Menú, Select, Inverse).
Colorear la seleccion. Una forma es usando ALT+BACKSPACE. Otra forma es Menú, Edit, Fill..., Contents {Use: Color, elegir un color}.

Referencias

How to create a grid quickly and easily with Photoshop

Entrada directa al escritorio con Windows 7

2011-01-02T16:31:00.001-05:00

Al iniciarse Windows 7, puede ser que se detenga en una pantalla de usuarios antes de llegar al escritorio. Allí aparecen los iconos de cada usuario disponible, permitiendo elegir alguno para entrar, posiblemente con una contraseña.

Sin embargo, puede ser que, en su caso, no requiera esta seguridad, y esa pantalla signifique en el proceso de inicio una etapa extra que quisiera evitar.

Si es así, puede lograrlo ejecutando (Menú Inicio, Ejecutar) la orden:

control userpasswords2

Esto abrirá una caja de diálogo que muestra las cuentas del usuario. Hay que elegir el nombre de usuario con que usualmente ingresa (si hubiera más de uno), y desmarcar ahí la casilla que indica que los usuarios deben ingresar un nombre y contraseña para entrar. Cuando se le solicite una contraseña para asignar al usuario que seleccionó, puede dejar en blanco tanto el primer campo como su confirmación para indicar que no usará contraseña.

Luego de eso, salga de Windows y vuelva a entrar. Notará que la pantalla de selección de usuarios ya no aparece y se ingresa directo al escritorio.

Si, de pronto, quisiera volver a habilitar las contraseñas, use la misma orden y vuelva a marcar la casilla que indica que así sea.

Solucionando problema de visualización en Photoshop CS5

2010-11-30T16:06:00.002-05:00

Usando Photoshop CS5 (instalado en Windows 7 con 2 GB de RAM, tarjeta Nvidia Geforce), encontré que al usar CTRL+0 (para hacer que encajara el lienzo en la pantalla) a veces desaparecían los elementos de la imagen.

Para volverlos a ver, lo solucionaba probando otras opciones de zoom, como CTRL+1 o CTRL++ o CTRL+-, o desmarcando/marcando los iconos de visualización de los layers.

Busqué un poco en Google y me pareció que podía deberse a un problema con la tarjeta gráfica. Tal vez no tenía tanta memoria.

Entré al menú de Photoshop, Edit, Preferences, Performance, GPU Settings, Advanced Settings, Mode: Basic (antes estaba en Normal) para que use menos memoria.

Reinicié el programa y ahora funciona bien el zoom con CTRL+0.

Referencia: http://kb2.adobe.com/cps/404/kb404898.html

Cómo obtener las partes de una ruta usando javascript

2010-11-30T14:27:00.005-05:00

Una ruta como http://par1/par2/par3/par4/par5 se puede separar en php usando algo como explode().
En javascript, una forma de hacerlo es usando split(). Por ejemplo:

var path = 'http://par1/par2/par3/par4/par5';
var parts = path.split('/');
var n = parts.length;
var par5 = parts[n-1];
var par4 = parts[n-2];
var par3 = parts[n-3]; // y así sucesivamente...

Vea el artículo original en DrupaLab

Conociendo PHP (actualizado)

2010-09-23T15:16:00.003-05:00

ESTE AÑO repetí en el Insituto José Pardo la conferencia sobre PHP que hice el año pasado.

Actualicé un poco el powerpoint, que está disponible en SlideShare y tambien en Scribd.

Conociendo php (201009)

Vea más presentaciones de Antonio Kobashikawa Carrasco.

Solucionando los gadgets flash de Windows 7 64b

2010-09-17T23:34:00.001-05:00

Ocurre que en Windows 7-64b puede haber algunos problemas para correr gadgets que requieran flash.

Al intentar correrlos aparece un diálogo pidiéndonos permiso para correr Flash, acepto, pero nada parece ocurrir.

La solución la encontré en este post: http://www.sevenforums.com/customization/1499-windows-7-7000-x64-sidebar-flash-player-fix.html#post863632.

Allí, se facilita un parche que, al ser ejecutado, soluciona el problema: http://www.sevenforums.com/attachments/customization/87586d1280161565-windows-7-7000-x64-sidebar-flash-player-fix-windows_64bit_sidebar_flash_support.exe

A mi me ocurrió que el archivo que descargué tenía la extensión .download, en lugar del .exe esperado. Felizmente fue cuestión de renombrarlo y ponerle la extensión correcta para poder ejecutarlo.

Por si acaso, también está disponible en este enlace: http://ifile.it/q456acu/Windows_64bit_Sidebar_Flash_Support.exe

jQuery Fundamentals

2010-09-17T16:35:00.001-05:00

jQuery Fundamentals
Por Rebecca Murphey. Es un libro online introductorio a jQuery. Me parece muy bueno.

Ágiles 2010: 3ras Jornadas Latinoamericanas sobre Metodologías Ágiles

2010-09-08T13:56:00.003-05:00

Ágiles 2010 es una excelente oportunidad para encontrase con
profesionales de IT de la región, interesados en compartir sus
experiencias, debatir y capacitarse en temas relacionados con el
desarrollo de software a través del uso de metodologías ágiles.

Esta tercera edición, con sede en la ciudad de Lima, Perú, contará
con la presencia de especialistas locales e internacionales, quienes
compartirán su conocimiento durante los cuatro días que durará el
evento.

El programa incluye distintos tipos de actividades: presentaciones,
sesiones interactivas, talleres y espacios abiertos de debate.

Entre los invitados internacionales se encuentran los keynote
speakers Lee Devin y Joshua Kerievsky, que también estarán brindando
cursos durante el evento.

¡Inscríbete y se parte de Ágiles 2010!

CHM Reader en Firefox

2010-09-02T15:56:00.004-05:00

El tipo de archivo .chm es el que tienen típicamente los archivos de ayuda en Windows. También hay algunos textos que se distribuyen de ese modo. Allí, basta con hacerles doble clic y aparecerá dentro de un navegador especial (el Control de Ayuda HTML), que nos permite explorar el documento y leerlo.

Sin embargo, puede ser algo bastante incómodo. A veces las letras son demasiado pequeñas. Para hacer crecer la fuente del navegador CHM hay que hacer un cambio en las opciones de Internet del sistema, lo que afectará a Internet Explorer, por ejemplo.

Otras veces, podemos toparnos con un CHM que, por alguna razón, no son abiertos adecuadamente por el navegador CHM.

Esto puede ocurrir porque el CHM está bloqueado. Para desbloquearlo, hacerle click con el botón secundario del mouse, entrar a Propiedades y elegir Desbloquear.

Una alternativa bastante útil es usar CHM Reader, una extensión para Firefox (un motivo más para usarlo). Luego de instalar Firefox, si es que no lo está usando aún, puede instalar CHM Reader entrándo a https://addons.mozilla.org/en-US/firefox/addon/3235/

Después de eso, aparecera en el menú la nueva opción File, Open CHM File (Archivo, Abrir archivo CHM).

Luego podrá usar CTRL+ y CTRL- para aumentar o disminuir el tamaño de las fuentes. También podrá abrir los CHM problemáticos (al menos como con los que me he topado).

Un mapa con Raphael

2010-08-27T00:17:00.008-05:00

Raphäel es una biblioteca javascript que permite incorporar a la página imágenes vectoriales.

Píxeles y vectores

A diferencia de una fotografía formada por pixeles, una imagen vectorial está determinada por vectores. Mientras que hay que guardar la información de cada pixel, en el caso de los vectores sólo hay que guardar la información de sus extremos o puntos notables; los demás serán calculados a partir de ellos.

Eso permite que una imagen vectorial ocupe, en general, mucho menos espacio en disco que una imagen fotográfica. Además, se escala y siempre está nítida. No ocurre el 'pixeleo' que se suele notar en las fotos cuando se fuerza una ampliación.

Esas características hacen que sean una opción atractiva para gráficos web. Flash, por ejemplo, usa imágenes vectoriales.

SVG

SVG es un estándar XML para imágenes vectoriales en web. Raphael se apoya príncipalmente en ese estandar, de modo que cada elemento gráfico sea parte del DOM (el árbol XML que representa la página web), y provee adaptadores para compatibilidad entre navegadores (todavía no todos los navegadores soportan SVG del mismo modo).

El que un elemento gráfico sea parte del DOM permite manipularlo con javascript.

Usando Raphael

¿Qué tan fácil de usar es Raphael? Bueno, la entrada me pareció relativamente sencilla. Declarar la biblioteca raphael.js, un canvas y luego crear elementos gráficos como rectángulos, círculos, etc.
...
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

$(function() {

var paper = Raphael('canvas', 800, 600);

var circle = paper.circle(150, 150, 100);

var circle2 = paper.circle(150, 450, 100);

var ellipse = paper.ellipse(150, 150, 100, 50);

var ellipse2 = paper.ellipse(150, 150, 50, 100);

var ellipse3 = paper.ellipse(350, 350, 50, 100);

var rect = paper.rect(0, 0, 800, 600);

var rect2 = paper.rect(50, 50, 200, 200);

var rect3 = paper.rect(270, 50, 200, 200, 20);

var image = paper.image('images/bee.jpg', 490, 50, 100, 75);

var set = paper.set();

set.push(circle, rect3);

set.attr({fill: "gold"});

var text = paper.text(150, 280, 'Hello World!\nLos niños de Andalucía');

var path = paper.path("M50 50L250 250");

var path2 = paper.path("M250 50L50 250");

//paper.clear();

circle.paper.path("M10,10L50,50M50,10L10,50")

.attr({stroke: "red"});

ellipse2.remove();

ellipse2.show(); // not show because previous remove

ellipse.hide();

ellipse.show();

rect3.rotate(10);

image.rotate(80, 490, 50);

image.translate(100, 0);

image.scale(1.1, 1.1);

image.animate({'translation':'-100, 10'}, 1000, 'bounce');

circle2.animate({

"20%": {cx: 20, r: 20, easing: ">"},

"50%": {cx: 70, r: 120, callback: function () {}},

"100%": {cx: 10, r: 10}

}, 2000);

var c = paper.circle(200, 200, 50),

r = paper.rect(200, 200, 50, 50);

c.animate({cx: 20, r: 20}, 2000);

r.animateWith(c, {x: 20}, 2000);

var path3 = paper.path("M300,300c0,100 100-100 100,0c0,100 -100-100 -100,0z");

var spot = paper.circle(300, 300, 4).attr({fill: 'red'});

spot.animateAlong(path3, 4000);

}

</script>

...

...

El paso siguiente, la interactividad y el manejo de eventos sí me pareció más complicado:
...
  circle.drag(
   function(dx, dy) {// move
   this.attr({cx: this.ox + dx, cy: this.oy + dy, opacity: .5});
   },
   function() {// start
   this.ox = this.attr("cx");
   this.oy = this.attr("cy");
   this.attr({opacity: .5});
   },
   function() {// up
   this.attr({opacity: 1});
   }
  );
...
La propiedad .node permite manipular un elemento con jQuery. Sin embargo, tardé un poco en comprender que es mejor usar las funciones de manejo de eventos que provee Raphael, al menos para los gráficos. Resulta más simple y claro.

En el caso del drag, notar que se requieren tres funciones, que definen las acciones para move, start y up (en ese orden). La función que corresponde a move tiene los parámetros dx y dy (los diferenciales de movimiento), y la que corresponde a start tiene los parámetros ox y oy (el punto donde se hace click). Mientras se arrastra el objeto, dx y dy crecen contínuamente, así que implementar el drag no es tan simple como hacer un translate(dx, dy) (hacerlo provoca un desconcertante efecto acelerado), sino que hay que reflexionar un poco, como en el ejemplo, que los suma a la posición inicial.

Para el ejemplo del mapa, tardé varios días en descubrir el modo de usar hover y drag para que funcionaran como quería.

El mapa

La idea es tener el mapa del Perú con sus departamentos, y que estos se resalten al pasar el mouse sobre ellos. Al hacer click en alguno, se dispara alguna acción, por ejemplo mostrar su nombre en una caja.

Puede ver el demo aquí, y descargar el código fuente aquí.

Raphael se puede usar sólo, pero es de ayuda ayuda usar también jquery.
...
<style type="text/css">
  body {
   background-color: #222;
   color: white;
  }
  #wrapper {
   _position: absolute;
   _top: 50%;
  }
  #container {
   background-color: black;
   width: 700px;
   height: 500px;
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   margin: auto;
   overflow: hide;
   _position: relative;
   _margin: 0 auto;
   _top: -50%;
   _overflow: none;
  }
  .info {
   display: none;
   text-align: center;
   font-family: "Century Gothic", Helvetica, "Bitstream Vera Sans", sans-serif;
   font-size: 24pt;
   line-height: 100px;
  }
  #infobox {
   border: 1px solid #ccc;
   position: absolute;
   top: 150px;
   left: 350px;
   width: 300px;
   height: 100px;
   overlay: auto;
  }
  #test {
   display: none;
   color: #0f0;
  }
</style>
...

<script type="text/javascript">
  $(function() {

   //http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery
   $.ajax({
   type: 'GET',
   url: 'images/peru-h500.xml',// .svg renamed .xml for IE support
   dataType: 'xml',
   success: function(xml) {
   var r = Raphael('canvas', 700, 500);
   var map = {};
   var map_set = r.set();
   var active_fill = 'gold';
   var active_stroke = 'white';
   var normal_fill = $('body').css('background-color');
   var normal_stroke = '#ccc';
   var active = null;

   $(xml).find('path').each(function() {
   var id = (String)($(this).attr('id'));
   var path = (String)($(this).attr('d'));
   map[id] = r.path(path)
   .attr({fill:normal_fill, stroke: normal_stroke})
   .drag(
   // dx,dy van incrementandose
   // aqui calculo el diferencial continuamente
   function(dx, dy) {// move
   this.translate(dx-this.dx, dy-this.dy);
   this.dx = dx;
   this.dy = dy;
   //$('#test').html(dx+'--'+dy);
   },
   function(ox, oy) {// start
   //this.ox = ox;
   //this.oy = oy;
   this.dx = 0;
   this.dy = 0;
   this.toFront();
   this.attr({opacity: .5});
   //$('#test').html(ox+'-'+oy);
   },
   function() {// up
   // regresa a la posición original
   this.translate(-this.dx, -this.dy);
   this.attr({opacity: 1});

   // Este bloque lo hacia en un .click()
   // pero mejor aqui para que tambien funcione en IE

   // restablecer activo previo
   if (active) {
   active.animate({fill: normal_fill, stroke: normal_stroke}, 500, '>');
   }
   // activar actual
   active = this;
   active.animate({fill: this.color, opacity: 1}, 500, '>');

   // ocultar otras info
   $('.info').hide();
   // mostrar info actual
   $('#'+id).show().css('background-color', this.color);

   }
   )
   .hover(function() {
   this.color = Raphael.getColor();
   if (this!=active) {
   this.animate({fill: this.color, stroke: active_stroke}, 500, '>');
   }
   }, function() {
   if (this!=active) {
   this.animate({fill: normal_fill, stroke: normal_stroke}, 500, '>');
   }
   })
   map_set.push(map[id]);
   });// end each
   } // end success
   });

  });
</script>
...

<div id="wrapper">
  <div id="container">
   <div id="canvas"></div>
   <div id="test">[TEST]</div>
   <div id="infobox">
   <div class="info" style="display:block;">Perú</div>
   <div id="Arequipa" class="info">Arequipa</div>
   <div id="Ancash" class="info">Ancash</div>
   <div id="Apurimac" class="info">Apurímac</div>
   <div id="Ica" class="info">Ica</div>
   <div id="Lima" class="info">Lima</div>
   <div id="Ayacucho" class="info">Ayacucho</div>
   <div id="Piura" class="info">Piura</div>
   <div id="Lambayeque" class="info">Lambayeque</div>
   <div id="Tumbes" class="info">Tumbes</div>
   <div id="Tacna" class="info">Tacna</div>
   <div id="Puno" class="info">Puno</div>
   <div id="Huancavelica" class="info">Huancavelica</div>
   <div id="Cuzco" class="info">Cuzco</div>
   <div id="Junin" class="info">Junín</div>
   <div id="Ucayali" class="info">Ucayali</div>
   <div id="Pasco" class="info">Pasco</div>
   <div id="Huanuco" class="info">Huánuco</div>
   <div id="San_Martin" class="info">San Martín</div>
   <div id="Cajamarca" class="info">Cajamarca</div>
   <div id="Amazonas" class="info">Amazonas</div>
   <div id="La_Libertad" class="info">La Libertad</div>
   <div id="Loreto" class="info">Loreto</div>
   <div id="Moquegua" class="info">Moquegua</div>
   <div id="Madre_de_Dios" class="info">Madre de Dios</div>
   <div id="Titicaca" class="info">Lago Titicaca</div>
   </div>
  </div>
</div>

En los estilos aparecen #wrapper y #container para la técnica que permite centrar el #container absolutamente en la ventana.
También verá un div #test, que uso durante el desarrollo como consola de salida.
En un comienzo, copié a mano cada path (el atributo path.d dentro del .svg). Luego me pareció más práctico cargarlos desde un archivo.
Aquí los he cargado de un archivo svg externo peru-h500.xml
Originalmente se llamaba peru-h500.svg, pero lo renombré cuando descubrí que IE8 no lo procesaba como .svg.
El svg base lo obtuve de Wikipedia. Luego use Inkscape para dejar sólo los paths que necesitaba.
También corregí los id de los path para que fueran cadenas sin acentos ni espacios en blanco, ya que los iba a usar como claves de los arrays de propiedades que iba a crear.
Algo especialmente complicado en Inkscape fue lograr que desapareciera la transformación translate() para el grupo de paths, y que en su lugar se aplicara a cada valor.
Para ser sinceros, no estoy seguro de como lo logré, pero me parece que funcionó cuando desagrupé, seleccioné los paths, y elegí alinearlos respecto a la página (top y left).
Previamente, para cambiar el tamaño escalé y para cambiar el tamaño del canvas entré a propiedades del documento, fit.
Cuando pruebe el demo, arrastre uno de los departamentos para comprobar el efecto del drag.
He probado esta aplicación en FF5 (3.6.8), Chrome 6, y IE8.

Para mí es muy interesante las cosas que se pueden hacer con SVG y con Raphael. Ojalá este material le sirva de ayuda.

Personalizando la pantalla 404 en Apache

2010-08-13T15:39:00.001-05:00

Cuando se intenta acceder a una dirección que no se reconoce en el site, el webserver responde con una página de Error 404: Document Not Found.

Es posible personalizar esta página para que sea más informativa o, al menos, más agradable de ver que el mensaje en blanco y negro que viene por default.

En un servidor web Apache , es posible hacerlo modificando la página de error 404 del sistema, o indicando en su archivo de configuración el nombre de otra que preparemos para usar en su lugar.

Sin embargo, hay una opción que me parece mas flexible. Es usar un archivo .htaccess en el directorio, indicando cuál será el archivo que se presentara para el error 404.

Esto requiere que Apache tenga activado el módulo mod_rewrite y permita el rewrite en ese directorio. Me parece que suele estar configurado de ese modo en la mayoría de hostings.

Si se tiene acceso a la configuración de Apache (/etc/httpd/conf/httpd.conf en Linux CentOS), debe haber un bloque similar a:

<Directory "/var/www/html/mydir">
   Options Includes Indexes FollowSymLinks MultiViews
   AllowOverride FileInfo
   Order allow,deny
   Allow from all
</Directory&gt

Donde mydir es el directorio donde queremos colocar el .htaccess. También puede ser AllowOverride All, que incluye la opción FileInfo.

La configuración afecta al directorio y todos sus subdirectorios, a menos que para ellos se indique otra cosa.

.htaccess
ErrorDocument 404 /error-docs/HTTP_NOT_FOUND.html

Esto indica la página que se presentará cuando ocurra el error 404. La ruta es relativa a la raíz del servidor web, como en un URL. Por ejemplo, la ruta /error-docs/HTTP_NOT_FOUND.html, puede corresponder al archivo /var/www/html/error-docs/HTTP_NOT_FOUND.html.

En la página 404.html, ya que puede ser llamada desde cualquier ubicación, los url que se usen deben ser absolutos.

Páginas de error

Las principales son:

400: Bad request: Cuando el servidor no entiende la solicitud por un error de sintaxis.
401: Unauthorized: Cuando el usuario no ha sido autenticado para acceder.
403: Forbidden: El servidor no puede ejecutar la solicitud.
404: Not Found: El servidor no puede encontrar la direccion solicitada.
500: Internal Server Error: El servidor ha encontrado una situacion inesperada que no le concretar la respuesta.

Esta es una lista más completa que se podría incluir en el .htaccess:

ErrorDocument 400 /error-docs/HTTP_BAD_REQUEST.html
ErrorDocument 401 /error-docs/HTTP_UNAUTHORIZED.html
ErrorDocument 403 /error-docs/HTTP_FORBIDDEN.html
ErrorDocument 404 /error-docs/HTTP_NOT_FOUND.html
ErrorDocument 405 /error-docs/HTTP_METHOD_NOT_ALLOWED.html
ErrorDocument 408 /error-docs/HTTP_REQUEST_TIME_OUT.html
ErrorDocument 410 /error-docs/HTTP_GONE.html
ErrorDocument 411 /error-docs/HTTP_LENGTH_REQUIRED.html
ErrorDocument 412 /error-docs/HTTP_PRECONDITION_FAILED.html
ErrorDocument 413 /error-docs/HTTP_REQUEST_ENTITY_TOO_LARGE.html
ErrorDocument 414 /error-docs/HTTP_REQUEST_URI_TOO_LARGE.html
ErrorDocument 415 /error-docs/HTTP_UNSUPPORTED_MEDIA_TYPE.html
ErrorDocument 500 /error-docs/HTTP_INTERNAL_SERVER_ERROR.html
ErrorDocument 501 /error-docs/HTTP_NOT_IMPLEMENTED.html
ErrorDocument 502 /error-docs/HTTP_BAD_GATEWAY.html
ErrorDocument 503 /error-docs/HTTP_SERVICE_UNAVAILABLE.html
ErrorDocument 506 /error-docs/HTTP_VARIANT_ALSO_VARIES.html

Notas de compatibilidad

Cuando no se define una página de error, el navegador puede presentar su propia versión personalida. Seguramente lo habra notado. Los mensajes de "Página no existe" son diferentes en IE, Firefox, Chrome, etc.

Algo curioso es que Chrome insistira en presentar su propia versión, a menos que la nuestra tenga al menos 512 bytes de tamaño.
IE7, Firefox 3.6.8 y Safari 5 sí muestran nuestra versión si estuviera disponible.

Referencias

Una forma de maquetear

2010-08-13T02:23:00.001-05:00

El patrón base de la técnica que describo es usar un elemento posicionado absolutamente dentro de otro posicionado relativamente o absolutamente.

El uso de una imagen guía de fondo y la aplicación de transparencia a los elementos que queremos calzar es de mucha ayuda para posicionarlos con precisión.

Ojalá le sirva de ayuda en este tipo de tareas. Se agradecen comentarios y sugerencias.

Lea más aquí: http://www.scribd.com/doc/35824410/Una-forma-de-maquetear

MockApp: Maquetas para iPhone

2010-08-10T10:42:00.002-05:00

MockApp ayuda en la tarea de hacer la maqueta de una aplicación para iPhone.

Hay versiones para Keynote y Powerpoint.

Básicamente, son presentaciones que podemos reutilizar. Contienen los elementos tipicos de una aplicación para iPhone.

Puede descargarla aquí.

Desbloquear archivo en Windows 7

2010-08-04T13:39:00.002-05:00

A veces es frustrante cuando se quiere eliminar un archivo y el sistema responde que no es posible porque está siendo usado por otra aplicación. Sobre todo cuando no es evidente cuál es la otra aplicación.

LockHunter es un programa gratuito que se puede instalar para ayudar a encontrar cuál es la aplicación por la que se realiza el bloqueo, y permitir la eliminación si así lo queremos.

Disponible tanto para 32 bit como para 64 bit, lo puede encontrar en LockHunter.com

Crédito de la imágen: My System Tech

Programando una mejor sociedad

2010-07-28T15:15:00.007-05:00

Hoy, en Perú, como cada año, el Presidente da un mensaje a la nación.

Mientras lo escucho, reflexiono sobre el significado de las cosas que se hacen. Y el por qué se hacen de ese modo.

Yo no sigo con mucho detalle los acontecimientos políticos ni las noticias. Quizás podría decir que contemplo el panorama, y trato de entender.

Nacemos siendo habitantes del país de nuestros padres. Aprendemos a ser gobernados por reglas que alguien más creó. Pero luego vamos notando que podemos hacer algo al respecto.

Nuestro destino está influido por una sociedad que sigue reglas acordadas por ella misma. Es como si la sociedad se programara a sí misma.

En los detalles, tal vez la mayoría de la gente encuentre que la política y la programación son dos cosas muy diferentes, pero pienso que tienen algunas similitudes que podrían ayudarnos en la búsqueda de una sociedad mejor.

Qué tan buena es una sociedad. Cómo debería construirse. Qué tan bueno es un programa. Cómo debe construirse.

En el mundo de la programación tenemos experiencias y propuestas que quizás podrían aplicarse a la construcción de las reglas que guían nuestra sociedad. Principalmente las provenientes del movimiento de software libre, que han mostrado como cosas que antes parecían imposibles en realidad son muy posibles y prácticas. Se decía, por ejemplo, que, como cada vez que se agregaba un programador a un equipo se observaba un retraso en el avance y un aumento en la complejidad del proyecto, había un tamaño que jamás podría superarse. Los proyectos open source, como Linux, con miles de colaboradores alrededor del mundo, mostraron que el límite está determinado por la forma de organizarse. Una forma diferente de organizar el trabajo permitió coordinar el trabajo de muchísima más gente.

En nuestros proyectos locales, podemos tener la oportunidad de ver como nuestras decisiones afectan el trabajo que hacemos. Podemos ser como el soberano del proyecto de programación que implementamos. Ser el presidente de nuestro código. Y desempeñar también roles equivalentes al del legislador, magistrado, policía, etc. (quizás, cualquier sistema, alcanzado cierto nivel de complejidad, pueda generar roles como esos)

Algunas veces tenemos las mejores intenciones, y planteamos resolver las cosas de un modo que nos parece bueno, pero luego nos estrellamos con muros que nosotros mismos construimos.

Después de mucha prueba y error, los programadores han reunido un conjunto de buenas prácticas que sirven como pautas en nuestro trabajo. La experiencia de los miles de programadores en proyectos extensos también ha sido util para los programadores de proyectos más pequeños. Aquí menciono algunas:

El principio KISS (Keep It Simple as poSible*). Si hay dos maneras de hacer algo, es mejor usar la más simple. ¿Por qué? Cuando algo puede fallar, falla; así que es mejor minimizar el número de cosas que pueden fallar para facilitar el inevitable proceso de mantenimiento y mejora. Además, hay cierto grado de complejidad que los humanos podemos manejar con comodidad. Cuanto más simple, hay más capacidad mental disponible para la creatividad.

Reutilizar las cosas tanto como sea posible. Si algo funciona bien, no hay que estar repitiendo una y otra vez el mismo trabajo. Sin embargo, tener al mismo tiempo la libertad de reinventar la rueda y proponer alternativas, porque así es como se encuentran mejores opciones que puedan reemplazar a la anterior.

Minimizar el acoplamiento. Es decir procurar que el cambio que se hace en un componente no requiera hacer cambios coordinados en los demás. Esto facilita su mantenimiento y evolución.

Me pregunto por los montones de procedimientos que hay en nuestra sociedad. Por las duplicidades y los acoplamientos en las funciones municipales y ministeriales, en la policía y en el serenazgo. Por los pequeños feudos administrativos en los que se convierten las universidades, e incluso las facultades dentro de la misma universidad aunque sea pública. Por las absurdas reglas que se plantean y no se evalúan. Por el sistema de justicia que obliga a pelear una y otra vez las mismas batallas (¿por qué, si la justicia debiera ser igual para todos?). Por las reglas que no se siguen y las coordinaciones que no se hacen porque el protocolo resulta más complejo que el problema que se quiere resolver.

Las leyes y reglas mál dadas se observan en la práctica, al tratar de ejecutarlas. Igual que los frameworks en programación. Por más buenas intenciones que se hayan tenido al momento de darlas, por más que hayan funcionado en otros casos, para otras personas y otras circunstancias, cuando vemos que no funcionan en nuestro caso particular, debemos aceptar los hechos y tratar de hacer algo constructivo al respecto.

Es importante que las reglas sean simples, claras en sus intenciones, transparentes en su funcionamiento, y corregibles en su evolución. ¿Son así las leyes que tratan de aplicar en nuestra sociedad?.

Me parece también importante reconocer que telarañas de complejidad se pueden tejer cuando se trata de aplicar una regla que no se puede cumplir. Imaginemos el ejemplo absurdo de alguien que pusiera la regla de no respirar más de 30 veces por minuto. De pronto, todo el comportamiento de la gente cambiaría radicalmente. La gente no podría correr o hacer mucho esfuerzo porque la conduciría a un acto ilegal. Para verificar el cumplimiento de la norma se necesitaría policías que eligieran individuos sospechos (quizás demasiado chaposos) y les hicieran una auditoría. Seguramente habría excepciones para esos policías (que a veces tendrían que perseguir a los criminales) y los militares y agentes secretos. Aumentaría el trabajo de los jueces y abogados. Líderes sociales reclamarían ampliar el número a 31. Fuerzas conservadoras presionarían para disminuirlo a 29. Aparecerían libros y películas contando anécdotas y actos heroicos al respecto. Con el tiempo, tendríamos demasiada gente cuyo bienestar depende de la existencia de tal regla que, si alguien se preguntara por ella, nos tildarían primero de soñadores, luego de locos, y después de subversivos. Nos amedentrarían hasta que ellos mismos tuvieran una razón para hacerse la misma cuestión. He visto reglas así surgir incluso familias y en pequeños grupos de amigos. ¿Cuántas reglas como esa habrán en nuestra sociedad? Incluso las podrá reconocer en algunos dogmas religiosos.

Como programadores, podemos experimientar con reglas en las sociedades que representamos en un proyecto de desarrollo de software y aceptar con humildad que funciona y qué no funciona. Podemos tomar nota de ello, ganar experiencia, y desarrollar una intuición que puede servirnos para hacer una mejor tarea cuando tengamos la oportunidad de contribuir por una sociedad mejor.

* KISS, Keep It Simple, Stupid, era la versión original. Creo que el tono tenía la intención de llamar la atención entre amigos. Aquí uso una versión más cordial.

Crédito de la imágen: canada.com

Fondo de página redimensionable

2010-07-26T23:53:00.002-05:00

PROBLEMA

Cómo lograr que el fondo de una página sea redimensionable.

SOLUCION

La técnica consiste en colocar un img con un width=100%:

<img src="friends-and-moon.jpg" width="100%"/>

Sin embargo, a menos que se trate de un popup, aparecerán barras de scroll para permitir ver el resto de la imagen que no esté en pantalla.

Para evitar eso, se coloca el img dentro de un div con estilos adecuados:

body {
  margin:0;
}
#bg {
  width: 100%; height: 100%; left: 0px; top: 0px; position: fixed;
}
#container {
  position: absolute; top: 0; left: 0; width: 100%;
}
<!-- ... -->
<div id="bg"><img src="friends-and-moon.jpg" width="100%"/></div>
<div id="container">
<!-- content -->
</div>

Como se observa, luego el contenido de la página se puede colocar en un div posicionado absolutamente sobre la imagen. De ese modo se simula un fondo de página redimensionable.

El problema de la presentación del scroll se soluciona de este modo en los navegadores estandar, pero persiste en IE6.

Puede ver un demo aquí.

REFERENCIAS

How To: Resizeable Background Image

Personalizando bullets

2010-07-23T17:51:00.007-05:00

Normalmente, una lista tipo ul luce así:

Item 1
Item 2
Item 3

Se puede usar CSS para cambiar el tipo del bullet (que por default es disc):
list-style:disc

Item 1
Item 2
Item 3

list-style:circle

Item 1
Item 2
Item 3

list-style:square

Item 1
Item 2
Item 3

list-style:none

Item 1
Item 2
Item 3

list-style:url(flecha_roja.gif)

Item 1
Item 2
Item 3

Para controlar la posición del bullet, se puede usar la técnica de poner la imagen como fondo del item.
En este ejemplo aplico los estilos en línea, para ilustrar la idea. Sin embargo, en un caso real, lo usual es que use clases y bloques u hojas de estilo para indicar lo mismo.

<ul style="list-style:none;">
<li 
  style="background:url(flecha_roja.gif) 1px 2px
  no-repeat; padding-left:10px;">
  Item 1: Bullet más cerca y centrado</li>
<li
  style="background:url(flecha_roja.gif) right 2px
  no-repeat; width: 250px;">
  Item 2: Bullet a la derecha</li>
</ul>

Item 1: Bullet más cerca y centrado
Item 2: Bullet a la derecha

Puede ver un demo en aquí

Crédito de la imagen: http://www.robbinssports.com

Cómo centrar un bloque en una página

2010-07-09T18:01:00.014-05:00

Centrar un bloque tanto horizontal como verticalmente es algo que se requiere a veces. Lo ideal es que el centrado se acomode automáticamente cuando la ventana del navegador se redimensiona. La solución podría ser más fácil, pero la familia IE, dificulta un poco el problema.

Nota

Estas soluciones funcionan en la mayoría de navegadores, incluso en IE6, pero recientemente encontré que no es así en Safari. Puede encontrar un método alternativo, que funciona en todos los navegadores, en el artículo Cómo centrar un bloque en una página 2.

Soluciones

En los navegadores estandar (principalmente no-IE6), para lograr que un bloque, por ejemplo #content, de 400px por 100px, quede centrado en la página, se le puede aplicar los siguientes estilos:

    #content {
      width: 400px;
      height: 100px;
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      margin: auto;
      overflow: auto;
}

El truco aquí es que el margin: auto también sirve para el centrado vertical si se especifica height, position: absolute, y además top: 0; right: 0; bottom: 0; left: 0;
Una limitacion de esta solución es que la altura es fija. El overflow: auto es para que, cuando el contenido haga que #content sobrepase la altura especificada, aparezca un scroll.
En IE6, lo anterior no funciona. Es necesario colocar #content dentro de un #container, y usar los siguientes estilos:

    #container {
      position: absolute;
      top: 50%;
}
#content {
      width: 400px;
      height: 100px;
      position: relative;
      margin: 0 auto;
      top: -50%;
      overflow: none;
}

Aqui se usa la técnica de mover el top del #container hacia abajo el 50% de la altura de su contenedor, body, y luego el top del #content 50% hacia arriba de la altura del mismo #content (debería ser de su contenedor, #container, pero este es un bug de IE6, paradójicamente util para resolver este problema mejor que en el caso estándar, pues permite que la altura vaya más allá del inicial de 100px mientras el bloque se acomoda automáticamente siempre en el centro).
En IE7, lo anterior no funciona (así que hay cosas que funcionan diferente en IE6, IE7 y IE8). Es necesario agregar un #container2, y usar los siguientes estilos:

#container {

position: absolute;

height: 50%;

width: 100%;

}

#container2 {

width: 100%;

position: absolute;

bottom: 0;

}

#content {

background-color: gold;

width: 400px;

height: 100px;

overflow: auto;

position: relative;

margin: 0 auto;

top: 50%;

}

Para combinar estas soluciones en un paquete que funcione para ambos casos, se puede usar la técnica del hack underscore.
La idea de la técnica es simple e ingeniosa: Normalmente, una propiedad css que comienza con un _, #, un punto, o un número es ignorada por los navegadores estándar (de hecho, anteponer un número al nombre de la propiedad es un truco util para desactivarla), pero IE6 filtra la cadena quitándole ese primer caracter, si es _ o #, para usárla normalmente. De ese modo, sólo para IE6, _position, o #position, se vuelven position, por ejemplo. Del mismo modo, IE7 filtra el punto y .position se vuelve position.
Asi, luego de tener las cosas listas para los navegadores estándar, se puede intentar agregar o sobrescribir lo que necesitemos para IE6 e IE7, como se muestra a continuación:

#container {

_position: absolute;

_top: 50%;

.position: absolute;

.height: 50%;

.width: 100%;

}

#container2 {

.width: 100%;

.position: absolute;

.bottom: 0;

}

#content {

background-color: gold;

width: 400px;

height: 100px;

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

margin: auto;

overflow: auto;

_position: relative;

_margin: 0 auto;

_top: -50%;

_overflow: none;

.position: relative;

.margin: 0 auto;

.top: 50%;

}

Referencias

Vertical Centering in CSS

Numberguess en Drupal

2010-07-04T22:45:00.012-05:00

Lea el artículo en Drutacora: Numberguess en Drupal.

Zen Coding para editar HTML+CSS

2010-06-11T15:00:00.001-05:00

Zen Coding permite construir rápidamente bloques de código HTML y CSS a partir de secuencias mnemotecnicas.

Por ejemplo, html:4s puede expandirse para producir todo el esqueleto de una página HTM4 strict.

La siguiente secuencia:

div#page>div.logo+ul#navigation>li*5>a

Puede ser expandida para producir:

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Zen Coding es un plugin disponible para Notepad++, Aptana y Dreamweaver, entre otros. Está disponible en Zen Coding.

Zen Coding con Notepad++

La versión para Notepad++ puede descargarse de http://code.google.com/p/zen-coding/downloads/list.

En mi caso, descargue Zen.Coding-Notepad++.v0.6.1.zip, cuyo contenido copié en el directorio plugins del árbol de Npp (C:\Program Files (x86)\Dev\Notepad++\plugins).

Zen Coding usa Npp Scripting, que permite extender Npp mediante javascript.

Luego de eso, la siguiente vez que se inicie Npp encontrará el menú Zen Coding.

El uso básico es sencillo. Puede escribir una secuencia y luego expandirla presionando CTRL+E.

Montando HTML sobre un flash

2010-06-01T16:13:00.006-05:00

Problema:
Hay un objeto flash que debe funcionar como un botón que abra una ventana html flotante.

Solución:

Para abrir una ventana html flotante usaría window.open().
Encuentro que no es posible asociar a un objeto flash (definido con el tag object),un evento onclick.

Se me ocurre que podría cubrir el objeto flash con un bloque html de las mismas dimensiones al que si pudiera asociar un evento onclick.

Para eso, me baso en un patrón que aparece en Pro CSS and HTML Design Patterns, de Michael Bowers.
Consiste en posicionar absolutamente un div dentro de otro.

Hago que el div banner_container contenga al objeto flash, pero también al div banner_overlay, que lo cubrirá:

<div id="banner_container">
  <div id="banner_overlay">
  </div>
  <object...>...</object>
</div&gt

La clave está en hacer que banner_container tenga position:relative y banner_overlay tenga position:absolute. Además, ambos deben tener las mismas dimensiones del objeto flash, para que lo cubran exactamente.

#banner_container {
    position: relative;
    width: 200px;
    height: 100px;
}
#banner_overlay {
    position: absolute;
    width: 200px;
    height: 100px;
    border: 1px solid #abe;
}

Luego, se puede usar javascript sobre el div banner_overlay. Por ejemplo, con jquery:

$(document).ready(function() {
    $('#banner_overlay').click(function() {
        var w = window.open('ventana1.html', 'Ventana 1', 'width=400,height=300');
    });
});

Puede encontrar un demo aquí.

A través del código

2010-05-18T11:12:00.000-05:00

Dicen que quien no conoce la historia está condenado a repetirla. Es importante registrar las cosas.
Sin embargo, tiene que haber una forma de visualizar fácilmente aquello que se ha registrado. Para comprenderla. Quizás se debería decir, en realidad, que quien no comprende la historia es quien está condenado a repetirla.

Por ejemplo, uno puede tener un log con el tráfico de un website, o los mensajes de depuración de un programa, pero si no logra visualizar fácilmente la información contenida en esos registros, no la comprenderá, y se perderá en el papeleo.

En general, no se trata sólo de la historia. Para comprender algo es importante visualizarlo fácilmente, de alguna manera. La evolución de los lenguajes de programación pueden ser una manifestación de la necesidad de los programadores de comprender más fácilmente un programa. Assembler en lugar de binario. Cobol en lugar de Assembler. O C, Pascal, Basic, Smalltalk, Java, Ruby. Y, dentro de cada uno, algún framework o manera de organizar el código. Diagramas de flujo. UML. Herramientas visuales. Generadores de código. Vamos buscando una manera simple de ver el programa.

Es tan facil introducir complejidades en la organización del código que los hackers acuñaron la frase KISS ('Keep It Simple, Stupid', 'Mantenlo simple, estúpido'), para recordárnoslo, en tono de broma, pero muy en serio.

Del mismo modo que es difícil hacer reparaciones en una casa donde las tuberías están ocultas, es difícil reparar código que no está organizado convenientemente.

Cuando un programa falla, no suele ser una tarea fácil encontrar la causa. Esta no es inmediatamente visible. Hay que bucear en el código. Por eso los buenos programadores tratan que esté limpio y claro. El código que se optimiza y compacta para que quepa en un hardware económico, es uno que ha sido muy probado, porque es demasiado costoso de depurar en esa forma. Es mejor que haya una versión más amplia y clara, donde ocurra el desarrollo, y se haga el empaque de versiones seguras sólamente.

Es la misma idea que con los programas compilados. Programamos en texto, pero se usa el compilado binario, para que quepa mejor en el hardware. Imagínese tener que depurar diréctamente en el compilado. Por eso la mayoría depura en el texto fuente.

Quizás lo ideal sería que un programa pudiera ser visualizado como una caja transparente, con el flujo ocurriendo de manera obvia, de modo que fuera fácil encontrar la causa de cierto comportamiento. Quizás lo más importante sería que, al ver con más claridad lo que hay, imaginaríamos con más facilidad lo que podría haber.

La falacia de optimizar a cada paso

2010-04-30T00:15:00.002-05:00

De buenas intenciones está empedrado el camino al infierno.-- refrán popular

La optimización prematura es la raíz de todo lo maligno.-- Donald Knuth

Primero que funcione, luego se mejora.-- refrán hacker

Hay cierta forma de pensar, cierta filosofía, que convence a las personas de que es bueno optimizar cada paso antes de dar el siguiente. Programar, limpiar, programar, limpiar lo nuevo y lo anterior, programar... y así sucesivamente. Como si dar cada paso marcado perfecto fuera garantía de un buen trabajo.

Y no es así. Uno podría empeñarse, dando lo mejor de sí, su mejor esfuerzo, para ir derechito al abismo. Es un ejemplo algo extremo, pero ilustra la idea.

Hacer algo y limpiar, hacer algo y limpiar, es una muestra de ese tipo de pensamiento del que hablo. Obsesionado en el control. Imaginando la peor de las posibilidades. Sin confiar. Arrastrándose como esclavo.

Es algo que está presente no solo en la programación, sino en muchas otras actividades humanas. Hay supervisores que necesitan convencerse de que cada persona esta enfocada en su trabajo para poder estar tranquilos. Parejas que necesitan conocer cada movimiento diario de la otra persona. Padres que no dejan respirar a sus hijos. Es un estilo de pensar desafortunado que muchos heredan y transmiten sin reflexionar mucho en eso. O hasta pensando que es la mejor de las opciones.

Alguien criado de ese modo, que haya crecido de esa forma, y que viva aún así, puede extrañarse un poco al considerar la valía de las cosas en las que siempre ha creído. Dar cada paso de la mejor manera no asegura un destino correcto; es importante que la ruta sea correcta.

No puedes estar en medio de la nube y contemplar la forma de la nube al mismo tiempo. No puedes estar adentro y afuera a la vez. Es como tratar de servir a dos amos distintos al mismo tiempo.

Para que sea posible esmerarse en la correcta ejecución de un paso mientras se contempla el panorama, se requiere de dos conciencias. Como cuando un bailarín contempla a su amada sin pensar en los pasos de baile. La parte subconciente se encarga de mover los pies y del ritmo, mientras la parte consciente lo disfruta.

Para dibujar, pintar, o esculpir mejor, la conciencia debe estar elevada, para sentir aquello que se quiere representar, mientras las manos y los sentidos entrenados se ocupan de los detalles.

Para ir bien por una ruta, hay que visualizarla, sentirla, mientras nuestros pasos la recorren.

Es necesario ambas conciencias. Pero muchas personas han descuidado esa noción y se encuentran haciendo las cosas sin sentir lo que hacen ni a donde los lleva. Pienso que es porque no han experimentado esa conciencia elevada de la que hablo. No usan sino una solo conciencia, y se afanan en alcanzar la perfección de un trazo, de una pincelada, de un golpe de cincel, sin sentir la obra que están realizando. Y lo triste, a veces, es que se encuentra con otro igual que lo premia ante el mundo, santificando el extravío.

Programar y optimizar a cada paso es actuar así. Porque, ¿qué sentido tiene la optimización en cada paso?, ¿acaso contribuye a programar mejor o hace más fácil e interesante el camino?. Al contrario, lastra el viaje, y hace que uno vaya a la velocidad de quien camina con lodo hasta las rodillas.

Digamos que tienes mucho código abierto, explícito, pero lo entiendes y eso te ayuda a avanzar, te da ideas, te inspira. ¿No es mejor eso que código cerrado, que ya no se puede analizar porque está optimizado, que es un rompecabezas depurar, y cuyo sentido se ha perdido entre técnicas para reducir el consumo de memoria o de disco?.

En un viaje lo más importante no es ahorrar comida y caminar poco. Es más importante encontrar cosas que te permitan avanzar, que te inspiren, que hagan que la comida no importe ni el camino recorrido, sino lo que vives y a dónde te permite llegar.

Si encontraras un framework que te permitiera comunicarte con la computadora de una manera en que tus ideas fluyeran con soltura, que sintieras la sinergía, la esperanza, las posibilidades surgiendo, eso sería maravilloso. Después ya se podría optimizar.

Un esquema para desarrollo

2010-04-18T23:21:00.016-05:00

Lo empírico y lo convencional

He observado que, cuando hay una solicitud para hacer un sistema, mucha gente se esmera por seguir lo mejor posible cierto modelo de desarrollo. Pero se suele perder en el bosque, porque caminar con ahinco no garantiza que la dirección sea la correcta.

Cuando algo va mal, casi siempre es posible culpar a la gente. Que no se aplicó el modelo como debía ser. Cómo rebatir eso. Sin embargo, algo hay que hacer. Consideremos que el modelo de desarrollo pueda no ser tan bueno como pensamos. Y probemos.

En la forma empírica, uno empezaba directamente programando, y adaptando el código poco a poco. Se siente bien recibir el feedback de la computadora con cada paso.

Cuando uno estudia, le enseñan que es mejor determinar cuál es el problema y modelar cuál es la solución, antes de empezar a programar.

Si le preguntan a un desarrollador profesional típico, dirá que es mejor la segunda forma, la forma convencional. Yo no estoy completamente de acuerdo. Ni tampoco completamente en desacuerdo.

La forma convencional está bastante influenciada por la necesidad académica de poder evaluar a los estudiantes. Es más fácil hacerlo cuando explicas de antemano qué es lo que pretendes hacer antes de hacerlo. La solución se puede documentar, evaluar, optimizar, etc.

Esto también le es util al mundo. Cuando una empresa solicita un sistema, la forma convencional permite estimar el costo de antemano. Con esta venia, la forma convencional queda santificada en la currícula. Después de algunos años de ser condicionados haciéndolo de ese modo, también acabamos santificándolo nosotros.

Es un poco difícil cambiar las cosas santificadas, pero a veces hay que considerar los hechos.

En el mundo real, la conocida frase 'el cliente no sabe lo que quiere' refleja el hecho de que a menudo es muy difícil precisar el problema de antemano. Y, debido a eso, aún cuando el modelado fuera perfecto, nada garantiza que el producto final sea satisfactorio.

La mayoría de proyectos de desarrollo de software fallan. Se exceden en el tiempo, no satisfacen al cliente, o ambas cosas. Si la forma convencional estuviera en lo cierto, eso significaría que la mayoría de la gente no lo aplica bien, y no creo que ese sea el caso.

Pienso que no es culpa del cliente, ni de quien reune sus requerimientos. Sino que la causa es que no tenemos aún un método que permita precisar de antemano problemas que excedan cierta complejidad.

Cuando los problemas son relativamente sencillos, o han sido ampliamente recorridos, puede funcionar la forma convencional, pero no cuando los requerimientos son imprecisos y deban descubrirse sobre la marcha. Lo cual ocurre en prácticamente todos los desarrollos (quizás deberíamos reflexionar en el desfase académico sobre esta cuestión).

La prueba que guía

Cuando uno programa, hace pruebas para estar seguro que lo que se acaba de hacer hace lo que se espera. Es relativamente sencillo probar una función o módulo y más complicado probar un caso y aún toda la aplicación. Sin embargo, es necesario, si se quiere minimizar el número de errores que puedan llegar a la versión que probará el usuario.

Las pruebas unitarias permiten usar la computadora para probar una función. Diseñando y agrupando convenientemente las pruebas se pueden probar módulos, casos y hasta la aplicación completa. Esto hace más llevadero el proceso, hasta el punto en que se pueden usar como guía para el desarrollo.

Usar las pruebas como guía para el desarrollo, o Test Driven Development (TDD), es desarrollar primero la prueba que debe pasar el producto, y recién después el producto.

Las pruebas se van implementando según se van determinando los casos de uso.

La primera vez que se corra la prueba, sin ningún producto desarrollado, aparecerá una señal roja. Entonces el desarrollo se convierte en el juego de descubrir el camino más corto, lo mínimo necesario, para que la señal se vuelva verde. Así, el producto reflejará lo que la prueba requiera. La prueba sirve como guía para el desarrollo.

Modelar es optimizar

Con TDD, la optimización se posterga todo lo que sea posible, ya que la optimización prematura fácilmente conduce a compromisos y enredos innecesarios.

Cuando un producto pasa las pruebas, se puede refactorizar con seguridad. Es decir, se puede intentar ya sea cambiar el nombre de una función, extraer un fragmento de código para formar una función, reagrupar funciones en nuevas clases, etc. Si todo va bien, las pruebas continuarán mostrando la señal verde. Y si la señal es roja, no hay problema, podemos usar un sistema de control de versiones para deshacer los cambios y volver al último punto donde todo era verde.

Así, es más natural que el modelado vaya apareciendo en este punto. Si el modelado está bien, las pruebas lo dirán. En TDD, la principal guía del modelado es evitar las repeticiones y los acoples de código. Las repeticiones son código que se nota se puede factorizar (una idea similar al del álgebra, que extrae aparte los términos comunes), usando funciones, clases, o herencia. Los acoples ocurren cuando hay una dependencia innecesaria entre dos fragmentos de código. Es mejor cuando cada fragmento de código se pueda reemplazar sin peligro de efectos inesperados en otra parte.

Un esquema para desarrollo

En la forma de desarrollo empírica se sentía bien el feedback que daba la computadora en cada paso. TDD tiene algo de eso.

El modelado previo de la solución, aunque quizás correcto académicamente, no funciona demasiado bien en el mundo real. Y tiene, además, el efecto de contenernos las ganas. No soltamos el corcel hasta que tenemos listo el arado. Pero, entonces, ya no es divertido salir a correr si hay que arrastrar un arado al mismo tiempo. Es mejor ir ligeros desde el principio, aceptar los hechos, ser prácticos, y actuar en consecuencia.

Parece que desarrollar un sistema con requerimientos imprecisos es algo que necesariamente debe resolverse sobre la marcha, en un proceso de prueba y ajuste.

El siguiente es un esquema que toma varias ideas de Scrum y otras metodologías:

El proceso es de prueba y ajuste. El equipo de desarrollo y el cliente deben estar abiertos al cambio, a probar, equivocarse y corregir. El ambiente debe aceptar los errores como parte del proceso.
El punto de vista del cliente debe estar presente en el desarrollo. Como a menudo es difícil que pueda participar, se designa un intermediario. Puede ser una persona o un conjunto de personas, pero con una sola cabeza para la comunicación y la asignación de responsabilidades.
Se elije cuanto tiempo debe durar la etapa. Es más o menos al azar la primera vez. Entre 2 y 4 semanas.
Basado en el punto de vista del cliente, se obtiene un conjunto de requerimientos que podría esperarse estuvieran listos en esa etapa. Es más o menos al azar en la primera etapa. Los requerimientos parten de deseos del cliente. Finalmente cada uno se expresa como algo que cierto rol usa para realizar cierta tarea.
Cada requerimiento tiene un por qué, que a su vez tiene una justificación, y así sucesivamente. La cadena se puede seguir hasta un conjunto de principios más o menos estables que constituyen la necesidad que justifica el desarrollo.
Conforme avance el desarrollo estos principios y la jerarquía de justificaciones se irá haciendo más clara.
Luego, habrán requerimientos que no se admitirán porque no encajan en ese orden y, del mismo modo, podrán descubrirse requerimientos que inicialmente no se consideraron pero que son necesarios.
Basado en los requerimientos, el equipo hace una lista general de las tareas que estos requerimientos implicaría. Es una lista libre, donde cada uno puede anotar sin censura. Es además una lista abierta, que admitirá nuevos ingresos en cualquier lugar de la etapa. La lista debe ser visible, de libre acceso y fácil de mantener.
Antes de procesar la lista, el equipo reunido hace una lectura rápida de todas las tareas, simplemente para informarse de cuales son, y las agrupa en páginas de cierto tamaño. Esto es más o menos arbitrario. Puede ser un número entre 10 y 30 items por página.
Para procesar la lista, se hace un repaso tarea por tarea. Cuando uno o más miembros del equipo sienten que pueden atender una tarea, se pone a trabajar en ella durante el tiempo que consideren conveniente.
Si la tarea se completa, se tacha de la lista y se continúa el repaso hasta interesarse en alguna tarea. Si la tarea no se completa, se la vuelve a anotar al final de la última página, luego se tacha la anotación original y se continúa el repaso de tareas a partir de esa posición.
Al llegar al final de la página, se vuelve al comienzo.
Si se hace un repaso y ninguna tarea pendiente parece interesante de atender, todas ellas se resaltan y se coloca una X en una esquina de la página, antes de pasar a la siguiente página.
Al llegar al final de todas las páginas, se vuelve a la primera.
Puede ser ninguna de las tareas pendientes, que ahora estan resaltadas, sea interesante, porque no son realmente necesarias en ese momento. Si es así, la X se encierra en un círculo, para facilitar saltearse esas páginas la siguiente vez.
Las tareas urgentes se anotan al final de la lista y se procesan en dirección inversa, empezando desde el final.
La optimización se retrasa todo lo que sea posible. El código optimizado frecuentemente se hace más difícil de entender y reutilizar. Es conveniente que las abstracciones, simplificaciones, y generalizaciones se hagan lo más tarde posible. Y es en la optimización del modelo donde recién entraría a participar el arquitecto. Viendolo bien, un modelado apriori, como en la forma convencional, en realidad "contamina" la lista de requerimientos del cliente con la lista de requerimientos del arquitecto. En cambio, al hacerlo durante la refactorización del código, se hace sobre cosas que realmente se necesitan.
Para saber quién atiende cada tarea, y cuál es el estado actual del proceso, se pueden colocar marcadores removibles sobre los items de la lista.
Al inicio de cada semana, el responsable del equipo de desarrollo se reune en privado con cada persona para tener una visión de cómo está cada una y qué está haciendo. Hay cosas que se expresan mejor sin la presión del grupo.
Al inicio de cada día, el equipo dedida unos minutos en contar a todos que hicieron ayer, que harán hoy, y si tienen alguna dificultad. Hay cosas que es necesario que todos conozcan.
Al final de cada etapa se hace una evaluación de ese periodo. Ver qué cosas funcionaron bien y qué cosas podrían mejorarse.
En cada nueva etapa, se ajusta la duración del periodo y el tamaño de las páginas de la lista de tareas. También se borran todas X de las páginas con tareas pendientes, para incorporarlas nuevamente al proceso.

Cómo funciona

La forma de procesar la lista de tareas está basada en el sistema Autofocus, de Mark Foster.

La idea de dejar que el equipo atienda las tareas que les resultan interesantes es permitir que se desarrolle un inconsciente colectivo que ayude a determinar cuáles son realmente necesarias.

El sistema funciona como un ambiente que sólo deja sobrevivir aquellas tareas realmente necesarias para determinar el sistema. Es decir, el sistema se determina de modo evolutivo. Por eso, se da la libertad de anotar en la lista lo que sea, porque si no vale la pena hacerlo nadie lo hará, y si es necesario, tarde o temprano sucederá.

No es necesario gastar tiempo discutiendo cuales son las tareas, en qué orden hacerlas y quién las atenderá. El sistema facilita que estas cosas se resuelvan espontáneamente.

Ahora, a probar.

Enlaces:

Gmail para leer Hotmail y Yahoo Mail

2010-03-24T12:48:00.005-05:00

Gmail permite descargar el correo de otras cuentas (actualmente hasta un máximo de 5 cuentas), que tengan el servicio POP3 habilitado.

Por ejemplo, si alguien tienen más de una cuenta Gmail, puede configurar una de ellas para que todos los demás correos lleguen allí.

Lo mismo se puede hacer para una cuenta Hotmail.

Para que los correos de Yahoo Mail también puedan llegar, hay que habilitarle el servicio POP3.

Gmail leyendo Gmail

Normalmente, cada cuenta Gmail tiene habilitado el servicio POP3.

Entonces, elija primero la cuenta desde donde desea ver todas las otras e ingrese. Allí puede entrar a Settings (Opciones), Accounts and Import (Cuentas e Importar), Check mail using POP3 (Revisar correo usando POP3) y pulsar el botón Add POP3 email account (Agregar cuenta email POP3) para agregar los datos de cada una de las otras cuentas.

Para verificar que tiene la propiedad de la cuenta que quiere asociar, Gmail le enviará un mensaje a dicha cuenta un mensaje con un código de verificación, un enlace e instrucciones para hacer la validación. Es conveniente usar otro navegador para entrar a la otra cuenta Gmail, abrir el mensaje y copiar el código que se ingresará en la ventana que dejamos abierta en el primer navegador. Por ejemplo, entrar a una cuenta A con Firefox y a la cuenta B con Chrome o IE.

Entre las opciones de una cuenta asociada, si gusta puede marcar la automáticamente aplica una etiqueta a los mensajes de esta cuenta para que pueda distinguirlos fácilmente de los demás.

Gmail leyendo Hotmail
Puede asociar de modo similar una cuenta Hotmail.

Gmail leyendo Yahoo Mail
Si tienen una cuenta en Latinoamérica, tal vez habrá notado que desde hace algunos años el servicio POP3 está deshabilitado, a menos que adquiera Yahoo Mail Plus, que es un servicio pagado. Sin embargo, por alguna razón, las cuentas de Asia sí tienen el servicio POP3 habilitado en las cuentas gratuitas. Afortunadamente, es posible hacer el cambio.

Ingresando a su cuenta Yahoo Mail, puede entrar los datos de su cuenta. Puede ser que le tome un tiempo encontrar el enlace adecuado, pero es uno de los que aparece en la parte de arriba. Tal vez como un desplegable bajo su nombre de usuario (Edit My Account, Editar mi cuenta), o como un enlace simple (My Account, Mi cuenta).

Allí, por seguridad, le pedirá otra vez la contraseña, antes de conducirle al Account Info (Datos de la cuenta).
En la sección Accounts Settings (Opciones de la cuenta), entre a Set Language... (Establecer lenguaje...). Allí, podrá cambiar el Preferred Content (Contenido preferido) a Yahoo Asia.

Después de grabar los cambios, puede volver a mail.yahoo.com y entrar en Options (Opciones), POP & Forwarding (POP y Reenvíos), Set up or Edit... (Establecer o editar...), y marcar Web & POP Access (Acceso Web y POP). Además hay una opción que permite elegir entre recibir absolutamente todos los mensajes, o sólo aquellos que Yahoo no considere spam. Gmail tiene un filtro antismpam, así que parece buena idea pasarle todos los mensajes.

Luego de guardar la configuración en Yahoo Mail, se puede ir a Gmail y asociarla como en el caso anterior.

Referencias:

How to Enable POP3 in Yahoo! Mail

Resolviendo Drupal multisite

2010-03-12T02:09:00.003-05:00

Aunque la instalación y configuración inicial de Drupal es relativamente sencilla y directa, configurarlo para que varios sites compartan el mismo motor fue, para mí, casi un dolor de cabeza.

Drupal
Drupal es un CMS (Sistema administrador de contenidos) open source escrito en PHP. Es muy popular y, debido a su arquitectura especialmente extensible, que permite construir aplicaciones más allá del CMS, es considerado también como framework.

La instalación es simple. Se descomprime el archivo que se descarga de drupal.org en algún lugar del directorio web. Luego se accede a la dirección correspondiente y se siguen los pasos, que incluye indicar los parámetros de acceso a una base de datos MySQL (o PostgreSQL) y definir un usuario administrador.

Drupal Multi-Site
En el árbol drupal instalado hay un directorio sites. Allí, en el directorio default podemos colocar los archivos, módulos y temas del site. Además hay un directorio all, donde el manual, los tutoriales y los libros colocan los módulos y temas para que 'estén disponibles para todos los otros sites'.

Así que uno se imagina que puede tener más sites bajo ese mismo árbol, funcionando con el mismo motor. De hecho, esa configuración se denomina multi-site.

Pareciera que es algo que no se usa mucho, porque no lo mencionan en ningún material introductorio. En la documentación hay varios casos para leer. Si antes de hacerlo uno se imagina que bastará con crear otros subdirectorios con la misma estructura, encontrará que no es así.

Entonces, lógicamente, se lee un poco el manual... luego en los foros... blogs... googleando en la búsqueda de una explicación que quién iba a pensar sería tan difícil de encontrar. Es un problema algo frustrante. Al menos para mí; me tomó todo el día dar con una solución.

Mi ambiente
En un sistema con Windows 7, desarrollo usando XAMPP 1.7.1.

XAMPP es un paquete que facilita el desarrollo PHP/MySQL. Viene con Apache, PHP, MySQL y Mercury Mail preconfigurados para trabajar juntos, lo que es realmente un gran ahorro de tiempo, respecto a realizar manualmente cada instalación/configuración. Uso la versión 1.7.1 porque usa PHP 5.2, que no emite una alarma cada vez que un parámetro es pasado por referencia (lo cual en PHP 5.3 se ha vuelto deprecated). Y como muchos módulos que corren con Drupal 6.x tienen funciones con parámetros pasados por referencia me parece mejor ser un poco prácticos y usar una versión menos que la ultimita :)

XAMPP 1.7.1 viene con Apache 2.2.11, PHP 5.2.9, MySQL 5.1.33-community, entre otros paquetes (ver Old Version of XAMPP para más detalles).

Se supondrá que XAMPP está instalado en C:\bin\dev\xampp\. Eso significa que el directorio web es C:\bin\dev\xampp\htdocs\. Allí, Drupal 6.16 está instalado en test\drupal_101\. Es decir que, para acceder a mi drupal, el url es http://localhost/test/drupal_101/.

Podría ser más sencillo, pero no es demasiado complicado y creo que tener el drupal un poco metido en el árbol ayudará a ilustrar mejor el punto.

Mi solución

Los pasos que suelen aparecer en la mayoría de la documentación, foros, blogs y otras fuentes de internet mencionan virtualhosts o aliases en apache, .htaccess, hosts, subdominios y otras cosas complicadas.

Practicamente nadie se detiene a explicar el por qué la necesidad de estas complicaciones, o cuál es la idea básica del proceso. Y me parece que deberian hacerlo, porque aclara algo muy importante del funcionamiento de Drupal.

Cuando accedo a http://localhost/test/drupal_101/, Drupal eventualmente buscará un archivo settings.php. En una instalación típica lo encuentra en sites/default/settings.php.

Lo que no se nos dice con claridad es que, en realidad, Drupal usa el url como parámetro para determinar dónde buscar el archivo settings.php. De hecho, parece que default es el último lugar donde busca. Antes ha buscado en localhost.test.drupal_101. Puede hacer la prueba renombrando sites/default como sites/localhost.test.drupal_101 y ver que funciona igual. Sorprendente ¿no?

Si yo quisiera un nuevo site, digamos http://localhost/test/drupal_202/, lo que tendría que hacer es correr la misma aplicación pero bajo ese nuevo nombre. Es decir, lograr que al entrar a ese url se corra exactamente el mismo php que antes. Eso haría que Drupal busque el archivo sites/localhost.test.drupal_202/settings.php correspondiente. Y si existiera y estuviera bien configurado, listo, ¡tendríamos Drupal multi-site!

Pero ¿cómo hacer eso?. Ahí es donde la mayoría mete en el juego las complicaciones de los dominios, subdominios, hosts, virtualhosts, .htaccess, etc. Son soluciones válidas pero, en mi humilde opinión, hay un modo más sencillo, que está al alcance tanto de los usuarios Windows como Linux, y además ilustra bastante más cláramente lo que ocurre.

Abro una consola de comandos en el directorio que contiene a mi arbol drupal_101, htdocs/test/ (SHIFT+clic derecho, Open command window here), para ejecutar el comando mklink:

mklink /J drupal_202 drupal_101

Eso crea un enlace simbólico (una especie de directorio ficticio) que permite apuntar al directorio drupal_101 con un nombre nuevo adicional drupal_202.

mklink está disponible en Windows 7 y WIndows Vista. Para Windows XP puede usar el comando Junction (puede ver más información sobre esto en el post Enlaces simbólicos en Windows). En Linux usaría un comando similar a ln -s drupal_101 drupal_202 (allí primero se indica el destino y luego el link).

Hecho esto, al entrar a http://localhost/test/drupal_202/ uno esperaría ver lo mismo que si se entrara a http://localhost/test/drupal_101/. Después de todo se trata del mismo directorio, aunque tenga dos etiquetas. Pero, como Drupal usa el url como parámetro para determinar el lugar dónde debe estar el archivo settings.php, encontrará uno diferente en sites/localhost.test.drupal_202/ y así veremos un site también diferente.

En resúmen

Drupal usa el url como parámetro para determinar que settings.php usar. Y el settings.php determina el site que se carga. De ese modo podemos tener varios sites, si logramos entrar al mismo drupal usando diferentes nombres. Una manera sencilla de lograr eso es usando enlaces simbólicos. Eso me parece menos complicado que la alternativa de los aliases, y virtualhosts.

En el fondo, esta técnica aparece en la documentación cuando habla del uso de subdominios, pero la idea escencial está tan opacada por las otras dificultades que cuesta distinguirla. Ojalá este artículo sea de ayuda.

Posibilidades

Basta cambiar la configuración de la base de datos que aparece en el settings.php para que el site se transforme en algo completamente diferente. Jugar con esto me ayudó a entender un poco mejor la naturaleza de una aplicación drupal respecto de otras opciones.

El nombre localhost.test.drupal_202 sigue un patrón que se explica mejor en el comentario contenido en el archivo default.settings.php

Enlaces simbólicos en Windows

2010-03-11T18:25:00.007-05:00

En Linux, un enlace simbólico es un archivo o directorio ficticio que representa a un archivo o directorio real.

Por ejemplo, puedo tener un enlace simbolico /usr/bin/java en lugar de /usr/bin/java-1.6 (En este caso en particular me sirve para actualizar java sin tener que tocar los archivos de configuración que se refieren a /usr/bin/java).

En Windows 7, y también en Windows Vista, se puede hacer con el comando mklink.

También es posible usar una utilidad llamada Junction. Funciona para Windows XP en adelante y puede descargarse de Junction v1.05

La descarga provee un zip que contiene un único archivo ejecutable que se puede colocar en C:\Windows\. De ese modo, está disponible en cualquier lugar que se abra la consola de comandos.

En mi caso, necesitaba un enlace simbólico htdocs/site1.localhost que apuntara a htdocs/drupal/sites/site1.localhost
Para eso, me ubiqué en htdocs y ejecuté el comando:

mklink /D  site1.localhost drupal\sites\site1.localhost

o, usando junction:

junction site1.localhost drupal\sites\site1.localhost

A partir de allí, cuando entro a http://localhost/site1.localhost estoy accediendo al contenido de drupal/sites/site1.localhost.

Para eliminar el link:

rd site1.localhost

ó, usando junction:

junction -d site1.localhost

Nota:
Este es un paso intermedio en mi intento de lograr una configuración drupal multisite (lo que aún no consigo), sin embargo me ha parecido útil lo que se puede hacer con Junction por sí sólo. Ojalá que a ustedes también.

Desarrollo por capas

2010-03-09T16:55:00.004-05:00

Me parece que hay un paralelo en lo que pasa entre un desarrollador y el jefe del proyecto, respecto a su trabajo, con lo que pasa entre un cliente y el desarrollador, respecto a su producto.

El jefe del proyecto es el encargado de que los desarrolladores consigan el producto requerido. Y para hacerlo los organiza según cierta metodología (bueno, si hay suerte). Y suele ser una metodología genérica (waterfall, RUP, Scrum, ...).

Es como cuando un desarrollador trata de imponer una solución genérica a un cliente. Lo obliga a ejercitarse en un flujo de trabajo artificial en lugar del flujo de trabajo naturalmente determinado por sus necesidades.
Antes lo hacían a menudo, pero ahora los desarrolladores entienden que es mejor construir una solución específica, basada en las necesidades reales del cliente, en lugar de una basada en necesidades imaginadas.

De forma similar, sería necesario que la forma de organizar el desarrollo de un proyecto sea determinada por las necesidades reales del equipo de desarrollo, en lugar de necesidades imaginadas por el jefe de proyecto, o incluso por el gerente.

Es decir, se necesita una meta-metodología; algo que nos guíe en el proceso de encontrar la mejor organización para un escenario incierto de personas, recursos y problemas.

Por mi parte, me parece que hay que ser pragmáticos, flexibles, intuitivos y algo amigos de descubrir lo desconocido.

Por ejemplo, en el análisis de un problema relativamente extenso no vale la pena tener determinado de antemano todo lo que se requiere implementar.

Me parece que es mejor hacer una lista de lo que se nos va ocurriendo e ir organizándola en capas conforme llega y conforme nos vamos ocupando de las capas más internas, que contienen la base, lo más escencial. E ir cubriendo cada capa gradualmente, hasta llegar a las capas externas, las de los detalles menos escenciales.

Cada nuevo requerimiento justificado encajaría en alguna lugar de alguna capa. Las implementaciones se trabajarían por capas, dejando fuera de una iteración aquellas implementaciones que correspondan a otra capa.

Unshare un folder en Windows 7

2010-03-09T14:20:00.003-05:00

En Windows 7, se puede compartir un folder, o directorio, haciéndole clic derecho para entrar a Properties (Propiedades), Sharing (Compartiendo), Share... (Compartir...), luego indicando con quiénes desea hacer el sharing.

Sin embargo, no hay una forma clara de revertir eso. Tampoco hay un ícono que nos indique (como en los Windows anteriores) que cierto directorio está compartido.

Una forma de revisar los directorios compartidos es ejecutando el comando compmgmt.msc (Computer Management, Administración de la Computadora), o yendo al menú inicio, y haciendo clic derecho en Computer, Manage (Administrar).

Allí, elegir Shared Folders (Directorios Compartidos), Shares (Compartidos), seleccionar el directorio, clic derecho, Stop Sharing (Deterner Compartir).

Referencias:

Presentando con Prezi

2010-03-02T11:05:00.004-05:00

Prezi.com es un servicio que permite crear presentaciones muy originales de una manera muy original.

Más agil que la clásica serie de slides a la Powerpoint. Prezi permite usar libremente en una especie de papelógrafo infinito. Coloque sus anotaciones, imágenes, video, etc, en el tamaño y posición que desee. Luego defina una ruta de vuelo y listo. Prezi hará la ruta, subiendo, bajando y girando según la orientación del texto, produciendo un efecto muy, muy memorable.

El resultado reside online, se puede compartir en las redes sociales, como Facebook o Twitter, o incluirse en páginas web como esta. Además, también se puede descargar en un autoejecutable flash que puede llevar en su usb.

Prezi tiene planes pagados además del servicio gratuito.

Aquí un ejemplo que hice, usando un cuento, pero creo que notará la idea:

En la noche on Prezi

Resolviendo el Mercury de XAMPP

2010-01-23T09:41:00.003-05:00

XAMPP es un conveniente paquete que contiene Apache, PHP, MySQL y otros programas para facilitar la instalación y uso de un entorno de desarrollo PHP. Lo vengo usando satisfactoriamente desde hace varios meses. Sin embargo, me enfrasqué en un problema cuando necesité usar el Mercury que trae incluido para enviar emails. Aparentemente no funcionaba. Buscando y navegando mucho por internet, encontré estas páginas que me ayudaron a resolver el problema:

El primer enlace da una secuencia detallada de pasos. Muchos comentan que les funcionó muy bien, pero yo tuve un problema. Veía que las ventanas de los varios monitores que muestra Mercury decían offline, y un comando "telnet localhost 25" ejecutado en la consola me devolvía "Could not open connection to the host, on port 25".
Entonces, encontré el segundo enlace, donde un forista comentaba que los mensajes de offline se debían a un bug del módulo MercuryX y se debía deshabilitar. Así lo hice y, al reiniciar, el administrador de Mercury funcionó :-D, se enviaron los mensajes de prueba que tenía atascados e incluso pude hacer una prueba usando el telnet.

Resúmen de pasos

La idea del relay es usar un servidor SMTP externo, como el de GMail, para que Mercury envíe el correo a través de él. En teoría sería posible también usar un SMTP en localhost, pero como algunos proveedores no permiten que sus usuarios envíen correo de ese modo, el uso del relay parece más general.

En el archivo xampp/php/php.ini, ubicar las líneas correspondientes a [mail function] y editarlas para que quede algo como:

[mail function]
; For Win32 only.
; http://php.net/smtp
SMTP = localhost
; http://php.net/smtp-port
smtp_port = 25

; For Win32 only.
; http://php.net/sendmail-from
sendmail_from = postmaster@localhost

A continuación, configurar Mercury. En el administrador de Mercury (que se abre al pulsar su botón Admin en el panel de control de XAMPP), entrar a las opción de menú indicadas por cada título y realizar los cambios que se indican:

Configuration/Protocol modules...

Note que se han desahabilitado MercuryE y MercuryX, y se ha habilitado Mercury C.

Luego de desactivar/activar módulos es necesario reiniciar Mercury (salir del administrador y volver a entrar).

Configuration/Mercury core module...

Configuration/MercuryS SMTP server

El nombre en "Announce..." puede ser cualquiera. El IP es el del localhost (la página dice que usar el IP de la intranet, 192.168.x.x, no le funcionó).

Aquí se modifica la restricción para que se permita conexiones en el rango 127.0.0.1-127.0.0.1

Pero el punto más importante es desmarcar la casilla "Do not permit SMTP relaying of non-local-email"

Configuration/MercuryC SMTP client

Aquí indico que se use el SMTP server de gmail, según las recomendaciones de su página y usando el puerto 587 para SSL con STARTTLS. Si es su caso, verifique que el nombre de usuario incluya @gmail.com

Configuration/Manage local users

Se agrega el usuario postmaster, con privilegio de administrador.

Usando FTP_synchronize con Notepad++ en Windows 7

2010-01-11T11:49:00.005-05:00

Notepad++ es un editor de texto muy util para programar. Lo uso bastante para HTML, CSS, javascript, php, etc. Su menú encoding permite ver y cambiar de manera muy fácil el encoding de un archivo; por ejemplo, es sencillo pasar ANSI a Unicode UTF-8, con BOM o sin BOM, y viceversa (para una nota sobre lo que es ANSI, puede ver ASCII, ANSI, Roman 1, and What's All That?)

Lo había venido usando con uno de sus plugins, FTP_synchronize, y me sorprendió un poco descubrir que la nueva versión 5.6.3 que instalé ya no lo incluía por default.
Afortunadamente, es posible bajarlo [Edit files on FTP with Notepad++ plugin]. Puede hacerlo desde SourceForge::Notepad++ Plugins::FTP_synchronize

Yo bajé de allí el archivo FTP_synchronize_0_9_6_1_dll.zip. Al abrirlo hallé 2 dll y una nota indicando que aquel marcado con una A era para los Windows sin soporte para unicode (la A es por ANSI). Así que coloqué FTP_synchronize.dll en el directorio plugins de Notepad++, luego cerre y volví abrir el editor y encontré que FTP_synchronize aparecía en el menú plugins.

Configuré el acceso a una cuenta e ingresé a los directorios sin problema. Pero, cuando intentaba editar algún archivo, me aparecía el mensaje "Unable to create directory for file C". Aparentemente Windows 7 no deja escribir así nomás a los programas en el disco (aunque opino que debería dejar hacerlo en sus subdirectorios propios). Felizmente encontré en Internet una forma de solucionar el problema [Problems using the Notepad++ FTP_Synchronize Plugin with Vista].

Lo que yo hice fue ir al directorio de plugins de Notepad++ para crear manualmente el subdirectorio FTP_synchronize. Luego, fue necesario que le hiciera clic derecho para ver sus propiedades y modificar los permisos de acceso de Users sobre ese directorio, para que pudieran crear, eliminar, y modificar los archivos y directorios que pudiera contener.

Finalmente, pude editar el archivo que que quería (en mi caso era cambiarle el encode a UTF8 sin BOM).

Kohana101

2010-01-09T01:28:00.001-05:00

Aprendiendo Kohana estoy desarrollando el tutorial Kohana101, publicado por Oscar Bajner.

Viendo que no hay mucho material sobre Kohana disponible en español, se me ocurrió que sería buena idea ir traduciéndolo mientras doy estos primeros pasos.

Ojalá sea de ayuda a quienes estén interesados en probar este interesante framework pero, por alguna razón, necesitan más material en español.

Pueden encontrar la traducción bajo mi colección sobre Kohana, en Knol.

Trabajando con MVC

2009-11-12T16:49:00.005-05:00

Lo que suelo hacer es ir como el cangrejo, de atrás para adelante:

Hago una vista estática, con datos en duro. Lo pruebo.
Ubico los datos que podrían ser dinámicos y uso variables y lógica de vista para generar los datos en duro. Todo eso en la misma vista. Lo pruebo, debe funcionar igual que antes.
La lógica de vista queda en la vista, pero paso al controlador la asignación de valores en duro a las variables requeridas por la vista. Lo pruebo, debe funcionar igual que antes.
Paso a un modelo la generación de los datos en duro requeridos por el controlador para enviar a la vista. Lo pruebo, debe funcionar igual que antes.
Creo un sistema de tablas de donde el modelo pueda extraer los datos que he venido usando en duro. Lo pruebo, debe funcionar como antes.

En cada paso, me inclino por la solución más natural y simple disponible. Evito considerar requerimientos que podrían ser buenos para el futuro o para otro caso. De ese modo la solución tiene lo que se necesita y nada más. Evito compromisos innecesarios y disminuyo las probabilidades de efectos secundarios.

Luego que algo funciona, trato de eliminar duplicaciones, y luego optimizar. Es mejor postergar la optimización lo más que se pueda, ya que optimizar frecuentemente ensucia el código con trucos y técnicas que no dejan ver bien la lógica de la solución.

Programar código directamente optimizado es una trampa, una ilusión. Hace más lento el desarrollo y complica transitar cada escalón. Cuando algo falla, está todo tan enredado que prefieres descolgarte por la baranda que revisar la escalera.

Es mejor programar por niveles de complejidad, dejando la optimización para el final. Como cuando se construye una casa; los acabados no se ponen hasta el final. De otro modo los constructores gastarían energía y tiempo extra en cuidar un mobiliario y accesorios que les estorba el paso, y que encima nadie puede usar bien.

Breve crítica sobre el uso del idiomas y variables con prefijos

Reconozco que para resolver muchos tipos de problemas, así como para organizar las cosas suele ser más sencillo pensar de atrás hacia adelante, como en el inglés (me parece que no por nada los lenguajes de programación están en inglés). De afuera hacia adentro. De lo general a lo particular. La organización de directorios, nombres, etc se hace más clara y más compatible con otras organizaciones, que si se fuerza a usar español sólo porque sí.

Sin embargo, si mis conceptos están en español, las variables directamente relacionadas con ellos también aparecerán en español (por ejemplo los nombres de las tablas, modelos, controladores), pero todas las demás variables internas (como los contadores), prefijos, sufijos, etc mantienen el estandar de un desarrollo en inglés. No es práctico traducir el nombre de las entidades, porque frecuentemente habrán conversaciones sobre ellas y carga el desarrollo llevar un tabla de equivalencias y pensar con esas equivalencias encima. Cuantos más ligeros, mejor.

Así, uso producto_precio en lugar de precio_producto, entidad_caracteristica en lugar de caracteristica_entidad.

Además, uso setPrecio(), getProducto(), etc, porque es más corto que establecerPrecio(), obtenerProducto(), etc. Hay IDEs, como Eclipse, que tienen generadores de getters y setters.

Esta forma práctica de usar el idioma no tiene que ver con el respeto a la lengua materna o lo que recomiende la RAE para hablar. Eso es otro asunto. Lo importante es que el desarrollo sea claro, práctico, el mantenimiento fácil, y que el programa funcione.

Por otro lado, me parece innecesario el uso de prefijos sólo para señalar que cierta variable pertenece a tal módulo asociado a tal tabla de la base de datos del proyecto tal. Quizás puedan ayudar a ubicar la variable dentro del contexto del proyecto, pero es poca ganancia comparado con el lastre que significará usar esas variables en el día a día. Es mejor usar variables nombradas lo más naturalmente y simple que se pueda.

Además, siguiendo un orden natural y claro no se necesitará señalar 'que cierta variable pertenece a tal módulo asociado a tal tabla de la base de datos del proyecto tal'; todo eso se podrá deducir por contexto.

Claro que todo esto no es algo rígido. Son simplemente pautas que trato de seguir y que voy corrigiendo conforme veo más casos, me equivoco y aprendo.

Hello World en Kohana

2009-11-08T23:31:00.003-05:00

Kohana es un framework PHP derivado de CodeIgniter. Los desarrolladores de Kohana decidieron que participara más la comunidad, que se adoptara PHP5, y que hubiera un ORM para acceder a la base de datos, entre otras mejoras que venían reclamándose hacía tiempo en los foros de CodeIgniter.

He usado CodeIgniter para un proyecto. Pude aprender a usuarlo mucho más rápidamente que CakePHP (de hecho, fueron varios disgustos sucesivos al reaprender varias de las bibliotecas principales de Cake lo que me animó a buscar afuera y probar CI).

Usar CI es simple, claro, directo. Permite incorporar fácilmente muchas de las cosas que ya sepamos de PHP, en lugar de forzarnos a reaprenderlas, como me sucedió con Cake.
Además me gusta mucho la forma en que permite organizar los controladores y, principalmente, las vistas.
Sin embargo, extraño algunas cosas de Cake, como la forma de acceder a la base de datos y la forma de mantener disponibles los datos del formulario una vez enviado.

Leí que Kohana es interesante como alternativa a CI (mis siguientes pasos serían probar también Yii y Adventure PHP Framework), y he decidido probarla.

Lea más aquí: Cómo hacer Hello World en Kohana

La importancia de comprender el proceso de solución

2009-10-20T15:46:00.012-05:00

Muchas veces me he preguntado por qué frecuentemente parece tan problemático aplicar en proyectos del mundo real los esquemas de trabajo que aprendemos al estudiar.

El desarrollo de un sistema real suele ser un problema impreciso, a diferencia de los libros de texto, donde cada problema suele aparecer expresado de modo preciso.
Aún en los proyectos aparentemente simples, es normal encontrar imprecisiones en lo que el cliente tiene, lo que el cliente quiere y lo que realmente necesita.

Pero, aunque eso es un problema adicional al principal, pienso que no es la principal razón de las dificultades al desarrollar un proyecto.

Me parece que la principal razón es un problema de actitud frente a los problemas debido, básicamente, a la falta de comprensión de cómo se solucionan.

Muchas personas no han hecho nunca el intento de resolver algo desde cero. Casi siempre han podido solucionar lo que necesitaban adaptando o configurando una solución general desarrollada por alguien más.
Sin embargo, se les pone en proyectos de desarrollo que implican desarrollar desde cero, y entonces empiezan a ocurrir problemas.

Pienso que cuando una persona se ha acostumbrado a renunciar a buscar sus propias soluciones para usar las de otros, con el tiempo puede empezar a tener una visión distorsionada de lo que una solución es y del proceso necesario para lograrla.
Como las soluciones de otros suelen venir acabadas, pulidas y empaquetadas, una persona que no ha tenido experiencia hallando sus propias soluciones suele mirar con desconfianza el proceso de solución de otras personas.
Le es difícil entender la presencia de código auxiliar, y las sucesivas aproximaciones, simplificaciones y pruebas que ocurren en el proceso. Cree que las soluciones se deben construir tal cual se presentan al final, lo cual es como pretender que una casa se puede construir colocando cada parte con su cubierta y acabado final, cuando en realidad el proceso de construcción es por etapas.

George Polya escribió sobre el proceso de solución de problemas por uno mismo. Primero comprender el problema; familiarizarse con él; en qué consiste. Luego usar alguna estrategia de solución; quizás dividirlo, quizás simplificarlo, quizás expresarlo de otro modo, o en términos de problemas cuya solución conozcamos; probar y probar. Hallada la solución, comprobarla; ver si realmente satisface el problema. Finalmente, ver si puede hacerse de otro modo, quizás más rápido o con menos recursos.
Primero resolver la cuestión, luego optimizar la solución.

Pero cuando no se ha sido educado en solucionar problemas por uno mismo, sino en asimilar la solución de problemas tipo resueltos por otros, uno se puede llegar a acostumbrar a eso. Y, con el tiempo, llegar a pensar que todos los problemas se pueden resolver de ese modo.
Así, no es poco frecuente hallar personas que creen que toda solución debe aparecer ya optimizada.
La solución de un problema tipo puede aparecer optimizada porque ya es conocida.
La solución de un problema nuevo, en cambio, se construye gradualmente.

Muchas veces se dice que hay que evitar reinventar la rueda, y se mira con cierto desdén a una persona que lo intenta. Sin embargo, es importante. Porque quien lo hace entrena su mente en distinguir soluciones, y en construir el camino para hallarlas. Puede sentir cuál será el siguiente paso.

Quién sólo aplica soluciones es como alguien confinado a ir siempre por caminos ya trazados. Quizás tan temeroso que evita, aproximarse a los bordes, o siquiera mirar a los lados. Y, posiblemente, obstaculizando constantemente a quienes quisieran aventurarse más allá. Sin entender que los caminos no aparecen pavimentados de golpe, sino que deben construirse y, aún antes, descubrirse.

Solucionar un problema por uno mismo puede ser un proceso de exploración y descubrimiento, como aventurarse en un bosque. O también puede ser un proceso de sembrar, cultivar y cosechar.

Por supuesto que aplicar la solución de otro también tiene su mérito. Es una cuestión de técnica. De cómo, hecho el camino, lo puedo recorrer. Pero, ¿quién hace el camino?

Admitiendo que un proyecto tiene partes que desarrollar desde cero, debería dejarse espacio para el proceso de exploración y evolución que una solución desde cero necesariamente requerirá. ¿Lo hace usted?

Conociendo PHP

2009-09-24T17:27:00.007-05:00

Una presentación que hice para el Instituto José Pardo.
Viéndola desde SlideShare está además disponible el ppt original y las animaciones que no aparecen en la versión adaptada.

Conociendo PHP

Ver más presentaciones de Antonio Kobashikawa Carrasco.