El diseño de webs va evolucionando según pasan los años. Un detalle que particularmente me llama la atención por estos días, es como uno siendo diseñador gráfico, puede empezar a resolver unas cuantas cuestiones, muchas relacionadas con la programación o bases de datos, sin tocar directamente una aplicación destinada a tal fin. Hoy en día, con un buen conocimiento de html, y un basico conocimiento de php, podemos producir webs potenciadas por diferentes tipos de contenidos, buscando aplicaciones o sitios que sirvan contenidos o brinden servicios a tal fin.

Este artículo no pretende ser una guía super completa o un catálogo. Si citar unas cuantas aplicaciones o sitios web, que he utilizado en diseño de varios sitios, y que me han resuelto la parte funcional en gran parte. En al mayoría de los casos, hay que tener una cuenta en los sitios como Flickr o Twitter, en otros casos es probable que si querramos tener mayor control de las situaciones, debamos instalar el software en nuestro servidor, como el caso de Wordpress.

Los elegidos en esta oportunidad son:

Flickr es la comunidad para compartir fotografías más grande del planeta. La registración es gratuita, y uno puede subir sus fotos con pocas limitaciones, o pagar un fee anual de 25 dólares por una suscripción que elimina todos los límites en la cuenta.

Lo interesante, es que se puede categorizar el material en sets (carpetas), por tags (palabras clave) y demás funcionalidades. Luego esas fotografías pueden ser importadas desde otras webs o desde un blog.

Hoy en día existen numerosos scripts que hacen fácil la tarea de incorporar imágenes de flickr en nuestro website. 
Pueden chequear:

• moopix
• Flickr Photo Album for WordPress.

Youtube es un sitio revolucionario, no sólo por poner al alcance de cualquier navegante un potencial de difusión de su propio material, así como la consulta de miles de videos que la misma comunidad cibernauta publica, sino también por constituirse en un método simple y fácil de integrar contenidos en video en nuestro website. No necesitamos potentes servidores, ni preocuparnos por el límite de transferencia de nuestro sitio, ya que todo el trabajo es realizado por los servers de YouTube.

Hacerlo es tan fácil como copiar el código html que el mismo sitio nos provee en nuestra propios documentos o blogs.

WordPress es una aplicación con la cual podemos crear un blog en segundos. Hoy en día, lo que antes era un software de descarga e instalación super rápida, ofrece dos soluciones.

1. Wordpress.org
   La tradicional, es bajar el software, que es gratuito. Hecho esto, subimos el programa a nuestro servidor, y lo configuramos en segundos. Esta opción es la que yo reocmiendo, ya que luego será mucho más flexible la configuración y customizacion del blog desde un host propio.
2. Wordpress.com
   Para los que conocen Blogger o sitios similares, esta es la respuesta que la popular plataforma ofrece: crear un blog remoto, tan sólo suscribiéndose al servicio.

Twitter es un atajo entre un blog y un SMS de un teléfono celular. Esta aplicación web funciona bajo el lema ¨¿que estas haciendo ahora?. Suscribirse es gratis, y lo interesante de este servicio, es que apunta a mantenernos conectados con nuestros compañeros de trabajo, familia, amigos, etc, a través de cortos mensajes de texto plano, que se ingresan mediante la web de twitter, o via celulares, etc.

Particularmente interesane, es que estas actualizaciones o ¨updates¨, están disponibles en formato de un feed RSS. Con este formato, podemos incluirla desde multitud de lugares, entre ellos, y por que no, nuestro website o blog.

Estas son tan sólo unas pocas herramientas que existen hoy en día, en esta famosa web 2.0, y que nos permiten descentralizar los contenidos de nuestro propio sitio web, permitiéndonos no sólo ahorrar espacio de almacenamiento, sino también independizarnos de nuestro servidor, y aprovechar servicios externos para incorporar contenidos vía remota, cuando no estamos con todas las contraseñas encima, o cuando estamos en un viaje y queremos mantener actualizados nuestros sitios. 

Eduardo Cesario

Retomando el tema, el panorma reinante para el diseño web es increiblemente amplio y accesible. Intentaré en estas líneas hacer un breve recorrido de lo que considero más sobresaliente.

Hoy en día, como decía en la primer parte de este artículo, diseñadores gráficos y web nos acercamos mucho más a la funcionalidad y usabilidad de una web, gracias, en parte, a la popularización del trabajo con estándares, como son el xhtml estricto y las hojas de estilo (cascade style sheets). Uno de los colectivos de conicentización más importantes del mundo en cuanto a este punto, es el CSS Zen Garden . En mi experiencia particular, fue la ventana introductoria a este nuevo, y al principio desafiante, mundo de la usabilidad, pudiendo participar en este proyecto con Organica Creativa .

Acompañando a esta revolución orientada a la funcionalidad y usabilidad, también hubo mucho avance en cuanto a la programación web, y la posibilidad de incluir trozos de código, o mini aplicaciones, en nuestros propios sitios web, sin pagar un centavo, gracias a numerosos proyectos comutiarios del tipo Open Source.

La herramienta de animación por excelencia, Flash (de Macromedia, hoy en día de Adobe) siguió su progreso en cuanto a facilidad de uso y estandarización. Actualmente, su uso es más a conciencia en los sitios web, no como al principio de los 90´s, donde todo era un gran sitio animado. Las interfases integran partes realizadas en flash, para enriquecer la experiencia visual que ofrece esta poderosa herramienta, pero no subordinan el uso y la experiencia de un sitio a ésta.

Todos estos vientos de cambio, auspiciosos en mi criterio, vienen acompañados de una verdadera revolución social-virtual, de la mano de la web 2.0, y los sitios web orientados, cada vez más, a la experiencia social, y al intercambio y disponibilidad de todo tipo de contenidos online.

Todo este relato me lleva a concluir en donde quería focalizarme: ¿Cómo es que se verifican todas estas influencias en los sitios web actuales?

Principalmente, en las numerosas nutrientes que disponemos hoy, para transmitir información y contenidos a través de sitios web de terceros, lo que yo denomino, Descentralización de Contenidos.

Sobre esto hablaré en la próxima entrega.

Eduardo Cesario

Cuando empecé con esto del diseño web, allá por el año 1999, recuerdo bien la situación del diseño. Por aquel entonces, ya lo básico del lenguaje html había sido mostrado, y algunos se aventuraban a usar los, por entonces, poco compatilbes scripts en java para enriquecer la experiencia en los sitios (a mediados de los 90, en realidad).

A fines de dicha década, y con el boom de las .com en Argentina, cualquier empresa lanzaba su sitio web, por demás ambicioso, y con la tecnología en lo que hace a la funcionalidad y accesibilidad, ni por asomo comparable a lo que es hoy.

¿El resultado? muchas compañías invirtieron en una empresa que supusieron pagaría con ganancias muy pronto.

Error.

Sólo sobrevivieron las que realmente estaban dispuestas a soportar un mediano período de inversión a pérdida.

Es por ese tiempo, que el boom del diseño web era diseñar complejas interfases visuales diseñadas con Macromedia (snif) Flash.  Con la tecnología de banda ancha e internet a alta velocidad recien asomando (al menos en nuestro país), la mayoría de usuarios debían tolerar excesivos períodos de ´preload` de una introducción a un sitio web, que ni siquiera sabían si valía la pena navegar.

La paradoja termina siendo que hoy en día, ya entrados los 2000, este modelo de diseño complejo y demandante, ha dado paso a los sitios web centrados en contenidos, en la internet social, y en la usabilidad y accesibilidad al usuario final. Algo más impensado aún, es que el html vuelve con mucho más vigor que por aquel entonces, y la concientización sobre uso de estándares se hace mucho más presente en nuestros días. El javascript es mucho más estable y utilizado ampliamente. Los lenguajes de programación para web (php, ajax, ruby on rails) hacen al diseñador la vida más fácil, ya que podemos utilizar código que se obtiene libremente, para dar vida a nuestros sitios, ¡sin enloquecer!

Así, el escenario para nosotros los diseñadores, ha cambiado radicalmente, para mejor.

Continuará…

Eduardo Cesario

Me escribió Sigurd Magnusson, Chief Marketing Officer de SilverStripe , un atractivo CMS, para pedirme si podían realizar una adaptación de Organica Creativa para su producto.

"Realmente disfruto tu trabajo para  CSS Zen Garden (#188 Organica Creativa) y estaba pensando si nos darías permiso para adaptarlo a una plantilla (template) HTML código abierto, a ser usada con SilverStripe, un CMS código abierto, basado en PHP. Estamos buscando sólo templates de calidad sobresaliente, y el tuyo encaja perfectamente con nuestra busqueda, en mi opinión!"

Así es que tratándose de un proyecto open source, no dudé un segundo en dar el permiso para que el diseño siga expandiéndose por el mundo, nada más gratificante que a la gente le guste mi trabajo.  En breve habrá novedades sobre la adaptación a SilverStripe.

Eduardo Cesario

Hoy en día en el universo de Internet, tener un blog no es novedad para nadie. Si bien hay muchos sitios o proveedores que brindan el servicio de blogs gratuitos, lo más interesante de la experiencia de tener uno, no es sólo poder compartir notas y artículos que me parecen interesantes, sino también hablar con su diseño. Para mi la experiencia de tener un blog es completa cuando más personal es el diseño de la interface de dicho sitio.

Claro está que todo este planeamiento es posible, siempre y cuando contemos con algunos conocimientos para llevar a cabo el diseño de la interfase:

1. Limitaciones Técnicas: es fundamental tener conocimiento en manejo de software para diseño web, tratamiento de imagen y armado de sitios. De esto surge la primer limitación, acaso la más fácil de resolver, que es la parte técnica y de aprendizaje de manejo de herramientas. Yo utilizo para armar un blog: Fireworks, Dreamweaver y algún programa de ftp.
2. Limitaciones Teórico/Conceptuales: a toda la cosmética y funcionalidad, es necesario sostenerla con una buena idea, que a su vez debe ser traducida a una buena idea gráfica. Este tipo de planteo es más teórico y supone conocimientos de diseño gráfico, interfases en la web y navegación

Cabe aclarar que este artículo presupone que el punto 1 está resuelto. Lo que propongo aquí es contarles como abordo el proceso de diseño de un blog, no en cuanto al detalle técnico, sino al proceso y la evolución de la idea, en torno a la plataforma Wordpress.

 1. Elegir la plataforma de publicación.

Elijo Wordpress porque es la mejor plataforma que conozco para llevar adelante un blog con muy poco esfuerzo, y es altamente personalizable. Es gratuito, y la instalación no nos llevará más de 5 minutos, y con conocimientos mínimos.

2. Entender y visualizar la estructura.

Hablando sintéticamente, la estructura de un típico blog de Wordpress está organizada en pocas y autodescriptivas partes:

• HEADER (Encabezado): que se repite en todas las páginas.
• CONTENT (Contenido): generalmente donde se ubicarán los posts. Es la sucesión de los mismos.
• SIDEBAR (Barra lateral): es la barra de navegación que se presenta en la homepage sobre el lado derecho, y que podemos configurar de manera que aparezca en todas las páginas.
• FOOTER (pie): una especie de colofón donde ubicaremos copyright y demás.

Entendiendo a grandes rasgos como se estructura un blog, se puede empezar el plenamiento del diseño con este simpole esquema, teniendo en cuenta que los contenidos (texto, imágenes, videos, etc) estarán "contenidos" en estos bloques. Si propongo un fondo que continúa en varias partes, hay que prestar particular atención a los empalmes del mismo, los colores, etc, para que la experiencia visual sea armónica.

3. Boceto, boceto, y más boceto…

Creo que en mi epitafio van a poner "Muerto bocetando…". Es fundamental para llegar a un buen diseño, plasmarlo antes en papel. Las primeras imágenes mentales aparecen siempre como deslumbrantes en nuestro cerebro, pero es un grave error ir de nuestra imaginación creadora directamente a la computadora. Seguramente el resultado será tosco y desalentador.

4. Dar vida al boceto en fireworks.

El paso siguiente es ubicar dentro del material creado en papel, el que más me guste y sienta que va con mi idea, y la imagen mental que tengo. Con el archivo original a un tamaño representativo de la realidad promedio de navegantes (digamos 1024 x 1024 píxeles), monto en una capa (layer) el boceto, y la bloqueo. Luego trabajo en capas adicionales, cada detalle, desde colores de fondo, texturas, tipografía y bullets.

En primera instancia, llevo el boceto scaneado a Fireworks, y lo "calco" 

A medida que incorporo elementos, voy probando distintas variantes sobre la marcha.

Sigo probando, pero voy agregando elementos reales de la estructura del blog: titulares, posts y sidebar, simulados. 

5. Dejar que el diseño crezca hasta el prototipo final.

Lo más probable es que la imagen mental y el resultado en pantalla difieran. Es bueno poder amalgamar elementos o recursos que provengan de otros bocetos. Muchas veces fluyen conceptos gráficos a través de la serie de dibujos y bocetos que se hicieron.

6. Codificar las hojas de estilo (CSS).

Para cada sección de la estructura que describí en el punto 2, así como para el documento en general, podemos definir tipografía, colores, fondos, espaciados, etc. Ponerme a detallar tags y modificadores de CCS, escapa a la idea de este artículo. Lo importante es entender que cada zonificación del diseño, tanto a grandes rasgos, como en el más mínimo detalle, puede ser personalizado y diseñado mediante Cascade Style Sheets.

7. Grabar, subir, testear.

Mi método se fundamentea en diseñar las hojas de estilo, subirlas al servidor e ir refrescando continuamente la página, al menos en Explorer y Mozilla, para ver "en vivo" los resultados del diseño. Dado que Wordpress reagrupa los "bloques" de la estructura, en principio puede resultar difícil editar cada pedacito de código (el header, content, sidebar y footer son "pedazos" de codigo, que se ensamblan al momento de mostrar el blog). Una técnica que uso es hacer el preview en el browser, y el documento HTML a la carpeta local donde estoy trabajando con el blog. Se puede editar esa hoja de estilos y aplicarla al archivo descargado, para ver el "todo" de la página del blog de forma más organizada.

El proceso de diseño descripto es el que uso habitualmente a la hora de diseñar un blog, aunque en general, puede ser trasladado a unas cuantas piezas más. En este caso particular, las imágenes que ilustran el artículo corresponden al diseño del blog de sobreexpuestos , completamente dedicado a la fotografía.

Espero encuentren este artículo de utilidad, me gustaría escuchar comentarios sobre que les pareció.

Eduardo Cesario

Hemos finalizado el rediseño de un website para un nuevo cliente: MicroMED System.

Esta empresa se dedica, desde 1989, al desarrollo y comercialización de implantes e instrumental quirúrgico en la especialidad de Artroscopía y Traumatología, logrando los mas altos niveles de calidad en implantes osteointegrables.

El proceso de diseño 

Para llevar a cabo la tarea, primeramente se hizo un relevamiento del sitio web actual, evaluando las diferentes secciones y apartados, para poder elaborar así un diseño más funcional, y con un alto criterio estético.

Como segundo paso, esencial para nosotros en el proceso de diseño, se procedió a bocetar unas ideas simples en papel, para poder así tener una visión general del planteo nuevo de diseño a implementar. A continuación pueden verse los bocetos realizados para la homepage:

Como se menciona anteriormente, es esencial poder replantear el diseño, de manera que este sirva a la comunicación, imagen y objetivos de la empresa. En este caso particular, debimos considerar los siguientes puntos:

1. Un sitio cuyo público principal, serán profesionales de la medicina, que cuentan con muy poco tiempo para encontrar la información que desean.
2. Un diseño super funcional, con un alto criterio estético.
3. Rigurosidad formal, ya que el mercado meta del cliente apunta a un target donde la precisión, exactitud y limpieza son esenciales (medicina y cirugía)
4. Una alta claridad formal para el planteo de la página y sus contenidos.
5. Una paleta de colores sólida, pero que no moleste a la lectura rápida y ágil.
6.  Una línea conceptual y gráfica, basados en la metáfora de "laboratorio".

El tercer paso es la presentación de nuestras propuestas gráficas, aquí hemos hecho un mix entre los bocetos, para darles forma con lo mejor de cada uno. En el caso de la homepage, se han planteado dos variantes, bajo el mismo criterio:

La primera plantea dos navegaciones, una textual, y otra con una botonera en flash, más sugestiva, cuya idea es una segunda forma (no imprescindible) de navegarla de manera más sutil. Para usuarios que no lleguen a usar dicha navegación, se plantea una textual (montada sobre un fondo azul oscuro), donde cada area es claramente enunciada.

A continuación se puede apreciar el 'esqueleto' funcional de la página de inicio, con las porciones de pantalla asignadas a las distintas funcionalidades del sitio:

De esta forma, encontramos 3 grandes áreas:

1. Animada (en color verde): donde se ubican fotos relacionadas con la parte del sitio que se está navengado, y opcionalmente, una navegación intuitiva, sólo basada en los botones rectangulares, que acompaña a la textual.
2. Navegación textual (en color rojo oscuro): que se incluye como navegación principal, y es la más directa y clara a la hora de buscar los contenidos.
3. Contenidos (en color naranja): donde se ubican los contenidos textuales, e imágenes a desarrollar, para cada sección.
   Area azul: es un menú de navegación que funciona contextualizado en el sector del sitio en el que uno se encuentra, siempre y cuando sea necesario: por ejemplo, en la homepage, despliega las novedades y el link al catálogo.

La segunda variación de homepage, es similar a la anterior vista, con el único cambio que se elimina la botonera superior (en la parte animada) y se gana espacio arriba, haciendo el sitio más compacto, y dejando la navegación encargada a la parte textual, más clara y directa.

El concepto del diseño 

Los recursos formales y conceptuales del diseño, han sido insinuados ya en este texto, pero podríamos agregar:

• Utilización de diagonales, valiéndonos de los triángulos en el logo como inspiradores, generan tensiones y dinámica al sitio, sin quitar precisión, exactitud y prolijidad al diseño, además de connotar esos valores.
• Paleta de colores potente: azul, naranja, y blanco, manteniendo la linea corporativa de la empresa, pero contrastándolos de forma inteligente para lográr un sitio pregnante y llamativo al ser navegado.
• Limpieza, cuidado y ajuste: todo ello traducido por el diseño cuidado y el alto detalle a la hora de hacer convivir colores, formas y zonas de navegación.

Para finalizar esta presentación, incluímos, siguiendo esta línea proyectual, la página principal de productos, con el diseño propuesto:

Pueden visitar el nuevo sitio en la siguiente url: www.micromedsystem.com. 

Eduardo Cesario

Si bien el PageRank de Google no es un índice que garantice un éxito en cuanto a visitas o ventas (en el caso que vendamos productos o servicios), lo que si nos va a brindar es respeto a nivel mundial: cuanto más Pagerank tengamos en nuestro sitio, más seriedad y prestigio éste tiene.

Probablemente si sos un webmaster, o algún especialista en SEO (Search Engine Optimization), esto no será ninguna novedad.

Pero pasa que a veces entramos en un sitio web, y vemos que el pagerank es 7, luego al rato es 4, etc. Ahora, ¿porque el Pagerank fluctúa?  La respuesta es sencilla: Google funciona con diferentes servidores, y como era de esperar, son más de uno (19 al menos). Cuando hay actualizaciones en el Datacenter (centro de datos), hasta que nuestro índice de Pagerank es uniforme, pueden pasar horas, incluso días.

Todo esta introducción es para presentarles una herramienta que encontré en la red, en realidad, un sitio web: la url es www.magnifind.net , y este sitio ofrece unos cuantos servicios, pero el más interesante es el PageRank Explorer, que testea contra los 19 servidores de google nuestro PageRank actual, abajo les muestro una captura del test sobre el sitio de Criatura Creativa Studio :

Mi experiencia dice que cuando el número es uniforme, el índice se ha estabilizado, y lo más probable es que se muestre así por un tiempo prudencial. Cuando el valor se empieza a repartir en los diferentes servidores, eso indica un posible cambio a uno de los dos valores.

La realidad es que tampoco hay una certeza exacta de como funciona esta actualización, pero me pareció intersante compartir con ustedes este recurso y mis apreciaciones al respecto.

Espero sus comentarios.

Eduardo Cesario

Hace unos días había anunciado el lanzamiento del sitio dedicado a Organica Creativa .

Si bien eso ocurrió, ahora se puede decir que el sitio es funcional, ya que cuenta con contenidos dobre las diferentes mutaciones que ha sufrido este diseño:

1. La versión original para Dave Shea y su CSS Zen Garden .
2. La versión para WordPress, que es la que actualmente estoy usando en este blog.
3. La adaptación para DirectToWeb, de Ravi Mendis de Apple.

Planeo seguir agregando contenido al sitio, y enriquecerlo cada vez más. Hay un anuncio importante en el site, acerca de la plataforma WordPress, pero no voy a decir nada por acá, asi pasan por la página de Organica Creativa y lo chequean ustedes mismos.

Eduardo Cesario

El trabajo de un diseñador usando CCS y xhtml strict, puede ser muy tedioso, sobre todo a la hora de testear diferentes navegadores. Ni hablemos de la situación actual: Microsoft lanzando un navegador nuevo, el IE7, que implica desinstalar la versión previa de Explorer para poder ser usado.

Mientras hoy estaba dando forma a un nuevo sitio basado en estándares, me agarró la paranoia: ¿y si todo el cuidado que estoy teniendo para que esto se vea bien en Explorer 6 y Mozilla Firefox es en vano?

El motivo de la paranoia es más que válido: siempre que Microsoft actualiza uno de sus productos estrella (en este caso, Internet Explorer), los efectos colaterales de esa actualización suelen ser:

• Incontables fallas de seguridad en el navegador
• Caos total en la forma de mostrar las páginas que funcionaban "maravillosamente bien" en la versión anterior

Pero el motivo de este breve artículo no es hacer leña del browser caído, ni mucho menos.

Dando vueltas por la web, llegué a varios sitios que hacen capturas (screenshoots) de como se ve una dirección web en diferentes navegadores, e incluso, diferentes plataformas. Me he topado con un sitio muy interesante, pero pago, y de ninguna manera pensaba pagar por este servicio.

Finalmente encontré browsershots.org.

Este sitio no sólo es gratuito, sino que muy eficaz: uno tipea la url a testear, y la página encola el pedido, hasta que en un momento devuelve las capturas de  los navegadores en cuestión (17 para Linux, 4 para Windows, 1 para Mac). Uno puede ver los previews de las capturas, hacer click y ampliarlas (a la resolución solicitada, si es que pedimos una en particular) y ver el resultado final.

Como si fuera poco, además de diferentes plataformas y navegadores, browsershoots.org nos permite testear nuestro sitio con los siguientes parámetros:

• Resolución de pantalla
• Javascript
• Macromedia Flash
• Profundidad de Color
• Java
• Plugins Multimedia 

 Muy recomendable, espero les sea de utilidad.

Eduardo Cesario

El tema parece simple, pero en realidad, es crucial.

Todos los que hacemos diseño, o al menos los que recibimos una formación proyectual y conceptual, se nos ha inculcado desde el principio, la importancia de un boceto para llegar a dar forma a lo que será la idea/concepto final de nuesto diseño.

Hasta ahí vamos bien, ahora, ¿qué pasa cuando lo que tenemos que representar es un diseño en plantilla xhtml/css? 

En realidad esta pregunta, que puede parecer obvia, no lo es tanto. Algunos dirán "me bajo una plantilla prearmada y la modifico", si, pero se supone que la plantilla la estamos creando y diseñando nosotros, por ende, esa respuesta queda descartada del razonamiento.

"Empiezo a codificar con un editor visual del tipo Dreamweaver, y voy usando las paletas para guiarme": esa es una posible solución, pero no para la persona que recién se está adentrando en el mundo xhtml: sabemos que un div mal cerrado puede producir un desastre en nuestro diseño…

"Codifico todo de cero", pero cómo hacer eso sin tener la idea realmente definida, y la destreza aplicada a esa resolución.

Lo que yo propongo es lo siguiente: revalorizar nuestra capacidad de dibujar y bocetar (por más que no seamos Leonardo Da Vinci, de hecho, yo estoy muy lejos de serlo), para poder visualizar con mucha más claridad y de forma más amena, lo que vamos a intentar decirle al navegador que haga.

Estoy hablando de un boceto no para concebir la idea gráfica (se supone que ese/esos ya los hicimos antes de plantear la estética, concepto, etc.), sino uno que va a ser una suerte de mapa de como descompondremos el cuerpo del documento en divs o areas para ser traducidas a código.

A continuación detallo un ejemplo para un diseño que estamos haciendo en el estudio:

Primero tenemos el layout o plantilla, en mi caso, un png, hecho en Fireworks. La primer parte es observación pura, determinar que áreas vamos a separar, agrupar, etc.

En nuestro block o cuaderno, hacemos un rápido esquema representando en abstracción, la plantilla supuesta.

Yo recomiendo:

• Usar 'cotas' para medir en pixels o porcentajes las areas a designar.
• Usar rectángulos para separar los divs.
• Colocar aunque sea abreviado, el nombre para cada div.
• Tratar de utilizar la menor cantidad de zonas.
• Usar nuestra inteligencia, para poder visualizar cual solución es la mejor y menos costosa.

En esta figura, si bien no es lo más clara posible,vemos el resultado de superponer el boceto de la estructura, sobre el diseño original: si bien no tienen que coincidir fielmente, este paso es completamente ilustrativo y no es necesario hacerlo, me tome el trabajo para que vean como conviven ambas figuras.

Ahora si: en nuestro boceto original no se veía con mucha claridad el trabajo, pero si lo aprolijamos un poco, vemos detalladamente cada una de las zonas o divs en las cuales descompondremos el cuerpo del documento xhtml, para llegar al resultado final.

Si bien este procedimiento/método no nos va a solucionar el problema que representa la crudeza de encarar un diseño xhtml, la compatibilidad en diferentes browsers/plataformas, la 'reinterpretación' de cada browser de nuestro código, etc, puedo garantizar que hace el trabajo mucho más ameno, y que con el paso del tiempo, hasta quizás podamos prescindir de este paso para diseñar.

Espero les haya sido de utilidad.

Eduardo Cesario