Finalizamos con el ciclo de artículos inspirados en el modelo L5 constituidos por una introducción sobre Desarrollo multinivel para aplicaciones basadas en el web, Modelado de datos e implementación de la base de datos (Primer Nivel: L5), Lógica de programación (Segundo Nivel:L5), Estructura de contenidos (Tercer Nivel:L5), Diseño Gráfico (Cuarto Nivel: L5) y terminamos con la Maquetación de la aplicación.

Nuestro usuario final estará en contacto con nuestra aplicación através del navegador y las tecnologías que soporta son XHTML, CSS y JavaScript, principalmente. Para muchos de los diseñadores y programadores esta parte envuelve un cierto grado de expectación.

Al existir tantas alternativas de navegadores, debemos tener especial cuidado en que nuestro sitio sea “renderizado” por la mayoría de ellos. El que nuestro sitio este accesible para la mayoría es importante; que este accesible para todos es trascendental (en este aspecto, me refiero a lo estupendo que es, que se vea bien en todos).

Las diferencias en el modo de trabajo de cada uno hace que para muchos profesionales de integración y maquetación, sea un completo dolor de cabeza, el tratar de dar soporte a cada uno, con sus diferencias. Pero debemos de recordar que nuestra misión es que nuestro proyecto pueda ser visto por nuestros usuarios, sin importar su sistema operativo, navegador y configuraciones especiales.

Es perfectamente comprensible que creamos que existe mucha dificultad en lograr el soporte para todos. Esta será una labor constante; reparando y probando el desempeño del sitio en diversas configuraciones poco a poco y corrigiendo los fallos que puedan existir.

Maquetar para múltiples dispositivos

Este tema puede llegar a ser un tanto controversial. ¿Por qué deberíamos preparar nuestro sitio para que sea visto en diferentes dispositivos? ¿Vale la pena hacer un esfuerzo en que mi proyecto pueda verse en un computador, un teléfono o mi iPod?. En mi opinión la respuesta es afirmativa, según mis perspectivas de proyecto.

El maquetar para más de un explorador ya es un reto en si; el hacerlo para teléfonos con acceso a Internet de alta velocidad, hace que mi aplicación sea y se vea más potente. Pero, ¿Cómo puede maquetarse para múltiples dispositivos?.

La respuesta es usar plantillas y dotar a la aplicación de un sistema de detección del explorador y/o dispositivo. Por ello, es importante que si vamos a realizar una aplicación bajo esta estos paradigmas, las salidas deben ser en un formato estándar, con el cual, al cambiar entre distintos temas, no estemos redundando en programación, duplicando scripts, etc.

Existen en la actualidad, varios sistemas de manejo de plantillas. Para los desarrolladores en PHP, el más conocido es Smarty. Este sistema de plantillas trabaja bajo una estupenda metodología de separación del contenido del diseño, dotando al archivo de la plantilla de un conjunto de etiquetas, que le permite agregar programación y trabajando con las variables enviadas desde el lenguaje.

Existen otros sistemas de plantillas en diferentes lenguajes. Muchos frameworks ya cuentan con un sistema de plantillas diseñado para aprovechar las características del lenguaje y hacer más fácil el crear temas y hacer la maquetación del sitio.

Yo doy un voto a la forma en que trabaja Smarty, también existe un sistema de plantillas bajo Ruby que interpreta el formato de archivo de Smarty. Una idea en cuanto al uso de varias plantillas es que se concentra en un archivo la información que va a salir en determinado momento (podría ser un archivo por salida o por proporción de contenido a volcar) y que el archivo que contiene la salida pueda determinar el tema que hay que desplegar.

Cuando diseñamos un tema para el navegador y posteriormente lo maquetamos debemos tomar en cuenta varios aspectos:

  • Utilizar con cuidado los tamaños de los elementos. En la actualidad, el estándar de navegación en tamaño de resolución de pantalla es 1024×768. Muchos desarrolladores cuentan con monitores con una capacitad mayor. Es recomendable que maquetemos a esta resolución estándar y que nuestro sitio se vea con un diseño adaptativo. Algunos expertos recomiendan el uso de valores em en vez de valores en pixeles para que el texto se adapta al tamaño de la resolución.
  • Cuando maquetemos, hagamoslo según los estándares. La utilización de estándares asegurará que el navegador tratará el documento de una mejor manera. Pero no nos asegura un 100% de soporte.

Maquetación para una actualización

El ejemplo más claro en cuanto al factor de diseño y maquetación es el cambio de paradigma del modelo convencional basado en una estructura de tablas a la actual, basada en contenedores fluidos y div’s.

El formato HTML como tal va camino a una profunda reestructuración y actualización del modelo (HTML 5 y XHTML 2), dejando fuera ciertos elementos considerados obsoletos e introduciendo otros nuevos, llamados etiquetas semánticas. El desarrollo de cualquier proyecto debe contemplar la actualización para el futuro, tanto del diseño como de la parte estructural del lenguaje que lo sustenta. Esto nos dice que no debemos dejar abandonado el proyecto.

Además, también debemos contemplar los cambios que se producen a nivel de exploradores. Lo que funcionaba perfectamente en la versión anterior del programa, pueda que en la nueva funcione de manera distinta.

Por ejemplo: la versión 6 o anterior de Internet Explorer no contaba con soporte nativo para el despliegue de imágenes en formato PNG; sino a través de un filtro, podría lograrse el tan esperado efecto de transparencia.

Esto causo que por largo tiempo, las páginas HTML no pudieran incluir imágenes en este formato. La solución a este caso fue el uso de tecnologías como Flash (que incluía otros efectos). Otro ejemplo es el tan sonado caso Microsoft-EOLAS, por el cual Microsoft tendrá que modificar el comportamiento de los objetos embebidos como QuickTime, Java Applets, Flash, etc. Incrustandoles un marco de activación.

Todos estos cambios que se vienen en nuevas versiones hacen que la experiencia del usuario cambie. Debemos estar atentos a ellos para solucionarlos. Como conclusión a esta sección del artículo puedo inferir que preparar la maquetación para una actualización simplemente nos ayudará a mejorar, agilizar y optimizar los cambios futuros que debamos desarrollar.

Separación completa del esquema HTML, CSS y JavaScript

Al fin llegamos a la parte práctica del artículo. ¿Por qué separar la maquetación en HTML, CSS y JavaScript?. La respuesta es bastante obvia. Para mejorar el rendimiento. Los beneficios son bastantes, igual que los retos:

  • HTML proporciona la estructura
  • CSS define el diseño de los elementos
  • JavaScript le da una funcionabilidad adicional

Al separar la presentación al usuario estamos:

  • Mejorando el rendimiento dado que consumimos menos ancho de banda en transferencia.
  • Reutilizando código, diseño, etc.
  • Agilizando el proceso de actualización. El tiempo que nos lleve realizar la actualización es directamente proporcional al número de archivos que debamos cambiar para realizar dicha actualización.

Descargar el ejemplo.

En el modelo L5 la maquetación es la fase última de desarrollo del proyecto. Hasta aquí hemos realizado un gran esfuerzo para construir una aplicación que cumpla con las expectativas de nuestro cliente y usuarios, a la vez que sea robusta y este bien estructurada.

Hemos aplicado una metodología de desarrollo clara, sencilla y basada en muchos conceptos nuevos y otros que posiblemente ya hemos escuchar, pero que ya enfocados sobre el modelo son simples de entender y aplicar.

El propósito fundamental de esta guía fue proponer el modelo L5 como un esquema de separación de las capas de desarrollo de proyectos para Internet. La oportunidad está abierta para aquellos que sepan llevar a cabo proyectos importantes, sostenibles y estables.