PhoneGap en pocas palabras es un framework para el desarrollo de aplicaciones móviles que posibilita a los desarrolladores a que implementen sus proyectos utilizando las tecnologías estándar de web: HTML5, CSS3 y Javascript, y este las convierte a aplicaciones híbridas, es decir, aplicaciones nativas de las diferentes plataformas móviles existentes que tienen acceso a gran parte del API nativo.

Tomado de http://www.phonegap.com/

Esto lo logra empaquetando la aplicación web original con un navegador basado en webkit para desplegarla como si fuera una aplicación verdaderamente nativa.

Actualmente este framework soporta seis de las principales plataformas móviles del mercado: iOS, Android, Blackberry, PalmOS, Windows Mobile y Symbian.  Para mas información acerca del estado actual del soporte en cada una de estas plataformas consultar las características soportadas.

Existen otros frameworks similares a este entre los que se destacan Appcelerator Titanium, Mobl y Sencha Touch de los cuales espero estar escribiendo mas adelante.

En este artículo se describirá el proceso de instalación de PhoneGap, la creación de un proyecto base para el desarrollo con este framework y la elaboración de un ejemplo simple.

Instalar PhoneGap.

Descargar la última versión disponible del framework desde la siguiente ubicación.

https://code.google.com/p/phonegap/downloads/list

Para efectos de la documentación se utilizará la versión 0.9.5.1 que corresponde con las mas reciente para esta fecha.

$ wget http://phonegap.googlecode.com/files/phonegap-0.9.5.1.zip

Se descomprime el paquete recién descargado y se mueve a su ubicación final.

$ unzip phonegap-0.9.5.1.zip

$ mkdir ~/phonegap

$ mv phonegap-0.9.5.1 ~/phonegap/0.9.5.1

Crear la plantilla base de un proyecto Android.

A continuación se relacionan los pasos que se deben realizar para crear un proyecto PhoneGap para Android utilizando Eclipse y el plugin ADT instalados anteriormente.

Iniciar Eclipse y crear un nuevo proyecto a través del menú File > New > Android Project.

Crear un nuevo proyecto Android

En el diálogo de información del proyecto a crearse especificar al menos los siguientes campos y presione el botón Finish para continuar.

1. Nombre del proyecto (project name).
2. API de Android a utilizarse (build target).  En este caso se utilizará el API 2.2.
3. Nombre de la aplicación (application name).
4. Crear una actividad (create activity).

Información básica del proyecto Android

En el Explorador de Paquetes (package explorer)  de Eclipse crear bajo el proyecto una carpeta /assets/www y otra /libs.

Copiar en la carpeta /assets/www el archivo phonegap.0.9.5.1.js y copiar en /libs el archivo phonegap.0.9.5.1.jar.  Ambos archivos se encuentran bajo el directorio ~/phonegap/0.9.5.1/Android creado durante el paso de instalación anterior.

Estructura del proyecto Android

Hacer clic derecho sobre el directorio /libs y seleccionar el menú Build Path > Configure Build Path… Allí en la pestaña Libraries agregue la referencia a /libs/phonegap.0.9.5.1.jar presionando el botón Add JARs…

Agregar al proyecto la referencia al JAR de PhoneGap.

Realizar las siguientes modificaciones al código fuente de la actividad.  Este archivo se ubica bajo la carpeta /src del proyecto (/src/com.jimezam.phonegap.demo/App.java en este caso).

1. Reemplazar la línea 3 (import android.app.Activity;) con la siguiente: import com.phonegap.*;
2. En la línea 6 cambiar la superclase de App de Activity a DroidGap.
3. Reemplazar la línea 11 (setContentView(R.layout.main);) con la siguiente: super.loadUrl("file:///android_asset/www/index.html");

Hacer clic derecho sobre el archivo AndroidManifest.xml y seleccionar el menú Open With… > Text Editor.  A este documento realizar las siguientes modificaciones.

1. Agregar el siguiente texto entre la apertura de la etiqueta <manifest> y la apertura de la etiqueta <application>.

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

2. Agregar el siguiente atributo a la etiqueta <activity>.

android:configChanges="orientation|keyboardHidden"

Modificaciones al documento AndroidManifest.xml.

Finalmente crear el archivo /assets/www/index.html con el código fuente para la demostración.

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap demostration with Android</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello Android's World with PhoneGap</h1>
</body>
</html>

Ejecutar el proyecto en el emulador.

Seleccionar el menú Run > Run As > Android Application.

Ejecutar como aplicación Android.

Estos son un par de ejemplos de aplicaciones web simples ejecutándose con PhoneGap en el emulador de Android.

Hola Mundo web con Android

The Simple List 0.1

Enlaces.

• PhoneGap.
  http://www.phonegap.com/
• PhoneGap get starter guide.
  http://www.phonegap.com/start#android
• PhoneGap, Android and Eclipse quickstart.
  http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart
• PhoneGap documentation directory.
  http://wiki.phonegap.com/w/page/35502422/Documentation-Directory

Esta es una aplicación muy sencilla que se desarrolló en PHP para el sexto Congreso Colombiano de Computación.  Todo comenzó cuando no me resultó cómoda la manera como el sitio web desplegaba la programación del evento: por bloques de auditorios siendo las filas conferencias y las columnas los días de las mismas.

Programación del 6CCC (versión original)

Este estilo de presentación no es conveniente ya que no me permite visualizar fácilmente que conferencias se están realizando en un momento dado para poder decidir a cual de ellas asisto, es decir, el estilo idóneo de presentación de las conferencias debería ser en el que cada bloque representa un día del evento, cada fila un rango de tiempo específico y cada columna un auditorio donde se estén realizando las conferencias.  De esta manera, una vez ubicado el rango de tiempo que se desea consultar sólo será necesario revisar las columnas para determinar las conferencias a las que se puede asistir.

Ya que manipular manualmente esta información  para poder determinar cuales eran las conferencias que quería ver era demasiado engorroso decidi implementar una solución computacional muy simple.  Inicialmente la iba a desarrollar en Javascript por completo manipulando el árbol DOM pero me dí cuenta que podría serle de utilidad a otras personas también y preferí no sobrecargar al navegador del cliente con las operaciones de transformación del contenido del programa.  El resultado final fue el siguiente.

Programación del 6CCC (versión mejorada)

El prototipo.

Las premisas eran las siguientes.

• No sobrecargar al cliente con cálculos en Javascript para facilitar la consulta desde móviles.
• No requerir que se ingrese la información de la programación nuevamente, se debería tomar de la programación existente directamente.
• Actualizarse automáticamente a la par de la programación original (esta última debería respetar su estructura HTML).
• Facilitar la lectura de la información.
• Facilitar la consulta de las conferencias presentándose en un momento específico del día y cuales se están presentando en este mismo momento.
• Permitir la personalización de la presentación (esto se obtuvo mediante la implementación de una vista independiente de la lógica de procesamiento y de clases CSS).

El prototipo se implementó en PHP sin ningún tipo de framework especializado y utilizando la técnica de web scraping para obtener directamente la información de la página web original de la programación, de ahí que fuera necesario que esta respetara su estructura HTML durante las actualizaciones.  Para esto se utilizó la librería phpQuery la cual permite entre otras cosas obtener secciones de código HTML mediante rutas de selectores CSS de manera similar a jQuery.

Conclusiones.

• El uso de phpQuery para las necesidades del prototipo no fue tan simple ni intuitivo como lo es el uso de jQuery, sin embargo una vez entendida su implementación, permitió desarrollar la funcionalidad necesaria.
• La programación original contaba con múltiples inconsistencias: diferentes formatos de fecha, la presencia de un día adicional en la programación general, la presencia de las temáticas generales de los bloques de conferencias en el mismo contenido de las conferencias, conferencias sin hora específica y, filas y columnas vacías para generar espacios en las tablas.  Por este motivo el prototipo incluye varias validaciones para solventar estos problemas que dificultan la adquisición de la información.
• El prototipo toma la fecha y hora del sistema para determinar las conferencias que se están presentando actualmente (tanto para resaltarlas en el listado como para mostrarlas al inicio de la programación).  No se tuvieron en cuenta diferencias en la zona horaria.
• El prototipo no pudo ser incluído en el sitio web del congreso ya que fue desarrollado utilizando PHP 5.3 (utiliza una función anónima en PHP) mientras que el hosting utilizado por la página era 5.2 y no se contaba con la información necesaria para convertir la sintáxis de la función anónima al estilo antiguo.
• El código fuente del prototipo fue liberado bajo la licencia Creative Commons Attribution 3.0.

Enlaces.

• Demostración del prototipo, versión 0.1.
  http://demo.jorgeivanmeza.com/PHP/6CCCProg/0.1/
• Obtener el código fuente del prototipo.
  http://demo.jorgeivanmeza.com/PHP/6CCCProg/
• Librería phpQuery.
  http://code.google.com/p/phpquery/
• Sexto Congreso Colombiano de Computación (6CCC).
  http://www.6ccc.org/

Preparé el prototipo de esta aplicación web muy simple para experimentar con algunas librerías que tenía por revisar, que a pesar de ser muy sencillas de utilizar es bueno ir conociendo para determinar mas adelante cual de todas las disponibles es la idónea.

Esta es de manera resumida la funcionalidad del prototipo.

• Obtiene cierta cantidad de tweets de ciertos usuarios predefinidos.
• Los tweets son alamcenados en caché por una cantidad específica de tiempo.
• El acceso a la página no requiere de ningún tipo de autenticación por parte del usuario.
• Cuando el usuario accede al sitio web, el sistema elige un tweet azar y lo muestra.
• La elección del tweet se realiza sobre los almacenados en el caché.  Si no hay caché o este es demasiado viejo, entonces se renueva automáticamente.
• Los mensajes que no se encuentran escritos en español son traducidos automáticamente a este idioma.
• Se prepara un enlace corto a la información del tweet.
• Se presenta un QRCode con el enlace corto al tweet para ser fácilmente consultado por dispositivos móviles.

Herramientas.

Estas fueron las herramientas utilizadas durante el desarrollo del prototipo.

1. Netbeans (IDE).
2. SQLite (persistencia del caché).
3. Blueprint CSS Framework (framework para la presentación).
4. PHP (lenguaje de programación).
5. Yii PHP Framework (framework de desarrollo web).
6. Extensión de CURL para Yii (acceder al servicio REST fácilmente).
7. API REST de Twitter (obtener los mensajes).
8. Google Translate Service (servicio de traducción de textos).
9. jquery-qrcode para la generación de los códigos QR.
10. jquery-urlshortener que utiliza el servicio de bit.ly (acortador de URLs).

Prototipo.

Prototipo de Give Me a Tweet

Instalación.

El código fuente del protitpo puede obtenerse desde la siguiente ubicación.

https://github.com/jimezam/Give-Me-a-Tweet/tree/v1.0

Para la ejecución de la aplicación web se requiere que se cuente además de la infraestructura web, con PHP con soporte para SQLite y CURL, y la distribución del Yii PHP Framework (1.1.7 o similar) en una ubicación conocida.

Finalmente se deberán modificar los siguientes archivos para ajustarlos a la infraestructura local.

index.php:

$yii=dirname(__FILE__).'/../../yii-1.1.7.r3135/framework/yii.php';
$config=dirname(__FILE__).'/protected/config/main.php';

Ajustar estas rutas a la ubicación real del framework.

protected/views/tweet/show.php:

$.shortenUrl.settings.login  = 'USUARIO';
$.shortenUrl.settings.apiKey = 'LLAVE DEL API';

Modificar estos valores para que correspondan con la información del propietario del servicio.  Esta información se puede obtener de manera gratuita en el sitio web de bit.ly para desarrolladores.

Enlaces.

• Netbeans.
  http://netbeans.org/
• SQLite.
  http://sqlite.org/
• jQuery.
  http://jquery.org/
• Blueprint CSS Framework.
  http://www.blueprintcss.org/
• PHP.
  http://php.net/
• Yii PHP Framework.
  http://www.yiiframework.com/
• Extensión CURL para Yii.
  http://www.yiiframework.com/extension/curl/
• Introduction to developing with @twitterapi.
  http://dev.twitter.com/pages/intro-to-twitterapi
• Twitter, get statuses and user timeline.
  http://dev.twitter.com/doc/get/statuses/user_timeline
• Plugin jquery.qrcode.js.
  http://jeromeetienne.github.com/jquery-qrcode/
• Plugin jquery-urlshortener.
  https://bitbucket.org/jiaaro/jquery-urlshortener/wiki/Home

Después de instalar y configurar los módulos para mantener las traducciones del contenido en el portal basado en Drupal 6, el siguiente paso era crear la barra de banderas que permitiera cambiar fácilmente entre los distintos idiomas del portal.

Procedimiento.

1. Instalar el módulo Consistent Language Interface que provee al bloque Consistent Language Interface block (languageinterface).
   http://drupal.org/project/languageinterface
2. Editar page.tpl.php e incluír el siguiente fragmento de código donde se desea la barra de banderas.

   <?php
       $flags = module_invoke('languageinterface', 'block', 'view', 0);
       print $flags['content'];
   ?>

3. Personalice la presentación de la barra con CSS ya que su estructura es básicamente una lista no ordenada.  Para establecer la distribución horizontal como la de la imagen propuesta, agregue el siguiente código en la hoja de estilos del tema.

   #language-interface
   {
       padding: 0;
       margin: 0;
   }
   #language-interface li
   {
       display: inline;
       list-style-type: none;
       padding: 0;
       margin: 0px 5px 0px 0px;
       height: 12px;
   }

4. Si desea puede además establecer estilos particulares para cada idioma, la clase CSS deberá llamarse igual que el código del idioma.  Además es posible resaltar al idioma actual utilizando la clase active.

Enlaces.

• Consistent Language Interface.
  http://drupal.org/project/languageinterface

El primer paso para desarrollar cualquier interfaz de usuario basada en HTML debería ser el remover los estilos introducidos por defecto por el navegador web, con esto podríamos estar [un poco mas] seguros que los estilos implementados van a tener un igual comportamiento entre los diferentes tipos de navegadores web.

Hacer esto es muy fácil, sólo es necesario incluír el siguiente estilo provisto por Yahoo! al inicio de la hoja de estilos principal (la primera que se carga).

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#hd:after,#bd:after,#ft:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#hd,#bd,#ft,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

Otra forma de hacerlo es simplemente hacer una referencia a esta hoja de estilos desde los servidores de Yahoo!.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">

Enlaces.

• YUI Reset CSS.
  http://developer.yahoo.com/yui/reset/
• Basic Test Suite for YUI Reset.
  http://developer.yahoo.com/yui/examples/reset/reset-simple.html
• Using reset stylesheets.
  http://www.webmonkey.com/tutorial/Using_Reset_Stylesheets

Distribución típica de una página web

Esta es la distribución típica de una página web.  Esta compuesta por los siguientes elementos.

• Cabecera.
• Columna izquierda.
• Contenido central.
• Columna derecha.
• Pies.

De acuerdo con los estándares actuales, es preferible utilizar divs en lugar de tables (donde sea humanamente posible) ya que el documento HTML debería encargarse de definir el contenido mientras que a través de la definición de estilos (CSS) se debería establecer la presentación, es decir, como se ordena y distribuye el contenido a lo largo y ancho de la página web.

Como lo he mencionado en otras ocasiones para mi CSS es todavía una ciencia oculta, hay muchas cosas que frecuentemente se me enrredan cuando utilizo CSS.  Sin embargo ultimamente lo he estado utilizando un poco mas y he adquirido mas práctica y cada vez me siento mas a gusto con utilizándolo.

Ahora implementar este diseño es algo sencillo para mi … bueno, casi.

Parto de la siguiente estructura de contenido.

        <div id='pagina'>
            <div id='cabecera'>
                Cabecera <br />
            </div>
            <div id='colizq'>
                Columna Izquierda <br />
            </div>
            <div id='contenido'>
                Contenido <br />
            </div>
            <div id='colder'>
                Columna Derecha <br />
            </div>
            <div id='pies'>
                Pies
            </div>
        </div>

El resultado inicial es claramente inaceptable.

Resultado #1

Agregamos un poco de estilo para enrriquecer a la presentación.

    #pagina
    {
        width: 1024px;
        margin: auto;
        background-color: pink;
    }

Con esto le damos un ancho suficiente para visualizar correctamente el contenido del sitio y lo centramos para que se vea bonito en monitores mas anchos.

    #cabecera
    {
        padding: 5px;
        background-color: orange;
    }
    #colizq
    {
        padding: 5px;
        background-color: yellow;
        width: 300px;
    }
    #contenido
    {
        padding: 5px;
        background-color: blue;
        width: 394px;
    }
    #colder
    {
        padding: 5px;
        background-color: red;
        width: 300px;
    }
    #pies
    {
        padding: 5px;
        background-color: green;
    }

Les damos colores diferentes a cada una de las partes para diferenciarlas, un padding para separar un poco el borde del contenido de cada uno de los divs y en el caso de la parte central, el ancho específico que se requiera.

Resultado #2

Ya tiene cara de algo, pero no necesariamente lo que estamos buscando.  Es necesario ordenar las columnas izquirda, centro y derecha para que se ubiquen de la forma como sus mismos nombres lo indican.

En CSS esto equivale a decirle a los divs que floten (float) en la dirección que queramos.

    #colizq
    {
        float: left;
        padding: 5px;
        background-color: yellow;
        width: 300px;
    }
    #contenido
    {
        float: left;
        padding: 5px;
        background-color: blue;
        width: 394px;
    }
    #colder
    {
        float: left;
        padding: 5px;
        background-color: red;
        width: 300px;
    }

El atributo adicionado les indica a los divs que vayan flotando y arreglándose a la izquierda cada vez que son agregados a la presentación.

Resultado #3

En algunos casos, cuando continúan mas divs y necesitamos que se alineen en una la siguiente fila, es necesario indicarle a un div específico que no permita que otros divs floten a uno/ninguno de sus lados.  Para esto se utiliza el atributo clear (left, right, none, both).

Para el caso de la sección de los pies se complementaría de la siguiente manera.

    #pies
    {
        padding: 5px;
        background-color: green;
        clear: left;
    }

Hasta ahí todo es muy fácil: un pequeño paso para el lector, pero hace un año fue un gran paso para mi.  Pero aún me queda una duda por solucionar.

Qué pasa cuando las columnas -patriotas- tienen altos de diferente longitud ?

Resultado #4.

Se nota ese sobrante rosado bajo las columnas izquierda y derecha ?

Si revisamos las clases CSS, la rosada es la #pagina, esto significa que #colizq y #colder no están ocupando el mismo espacio vertical que #contenido hasta #pies y está dejando ver la capa inmediatamente inferior.

Para los "diseños" que comúnmente utilizo esto no es un problema ya que me gustan los diseños minimalistas y el blanco es mi fondo preferido.  Pero que va a pasar el día en que necesite que una columna sea de un fondo diferente del resto ?

Mi pregunta es: cómo hago para que las columnas ocupen la totalidad del espacio vertical disponible entre #cabecera y #pies ?  La duda persiste.

Enlace: código de demostración.

Mi IE 7.0.5730.11 no entiende la instrucción position:fixed de CSS!

Tuve que implementar la solución expuesta por http://www.gunlaug.no/contents/wd_additions_15.html.

* html div#miDivId
{
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + 5: document.body.scrollTop + 5);
}

Véalo en vivo y a todo color siguiendo este enlace.

El ejemplo anterior tomado de Matthew Levine estaba elegante pero no quiso funcionar en IE.

Simplifiqué un poco el ejemplo y esto fue lo que obtuve.

Me hace falta lograr que las columnas izquierda (azul) y derecha (rojo) ocupen tanto espacio como ocupe la columna central (salmón), sin embargo si utilizo height: 100% intentan tomar el alto de la pantalla.

Por ahora este es un gran paso para -mi- humanidad en la lucha contra las cajas.

El archivo de prueba puede descargarse del siguiente enlace: test_div2a.html.

Una de las cosas de las que en realidad no he logrado entender completamente es el box model (modelo de cajas) de CSS. Yo quiero hacer lo que la teoría sugiere: en el HTML dejar sólo el contenido y en CSS especificar como se va a presentar esa información. Según esto, yo quiero que el layout (distribución) de mi página esté dada por el CSS con DIVs y no en el HTML con TABLE. Pero ah que cosa mas extraña para mi.

Le he sacado tiempo en varias oportunidades pero no lo he logrado. Lo mas cerca que he estado funcionaba perfecto en Firefox pero se corría inexplicablemente en IE … como siempre.

Hoy amanecí con ganas de volver a intentarlo y encontré un par de enlaces muy interesantes. Entre ellos me gustó In Search of the Holy Grail de Matthew Levine quien se toma su tiempo para explicar la implementación de una página con tres columnas, dos de ellas de ancho fijo y el centro líquido (consume el tamaño complementario) y con una estructura de DIVs simple, tal y como yo la quería.

<div id="header">Este es el header</div>
<div id="container">
<div id="center" class="column">Este es el centro</div>
<div id="left" class="column">Esta es la izquierda</div>
<div id="right" class="column">Esta es la derecha</div>
</div>
<div id="footer">Estos son los pies</div>

Este código HTML produce el siguiente resultado después de ser mezclado con el CSS correspondiente.

Como siempre … en Firefox funciona perfecto, lo acabo de probar en IE7 y se enloquece, a pesar de que el autor menciona que funciona en los principales navegadores.

El archivo de prueba que utilicé se puede descargar del siguiente enlace: test_div.html.

Espero mas adelante tener un poco mas de tiempo y hacerlo funcionar ya que no quiero seguir haciendo páginas basadas en TABLEs.

Otro enlace relacionado con el tema que se ve prometedor es Layout Gala (http://blog.html.it/layoutgala/) en el que se presentan varios diseños basados en columnas.