Construyendo el portal de Tery Software - Maqueteado

Primero que todo se realiza el maqueteado de lo que será el sitio web, es decir una especie de croquis donde se pueda apreciar la distribución de información y la diagramación. Al maquetear tenemos una visión futurista, imaginamos la información, la ubicación, colores, animaciones, etc…

El mayor énfasis que se hizo en el maqueteado fue en un portal orientado al usuario final, de navegación simple y cómoda, sofisticado, estético, con la información a la mano, cumpliendo los estándares de codificado y garantizando una página atractiva a los motores de búsqueda (Clave en el posicionamiento).

El primer paso es crear la estructura en XHTML, la ídea principal es hacer uso correcto del lenguaje para garantizar una web con buena semántica y sin etiquetas de estilo impropias (Ej: font, center, bgcolor). Lo que garantiza esto, es que la web sea entendida por la mayoría de navegadores, y además tener una web donde la semántica y estructura están claramente separadas del estilo visual.

Drupal es un CMS construido bajo la arquitectura (Modelo - Vista - Controlador) MVC. A grandes rasgos este tipo de arquitectura busca distribuir la aplicación en tres partes diferentes que se comunican entre sí, garantizando aplicaciones de fácil mantenimiento y escalables. La razón por la que se toca el tema es porque Drupal utiliza motores de plantillas para comunicar la lógica y la parte de interfaz de usuario. Básicamente el motor de plantillas permite combinar el XHTML con las variables y resultados provenientes del controlador (Componente Lógico), lo que nos garantiza seguir disfrutando de la potencia de Drupal (Manejo de contenido) aún cuando cambiemos totalmente el HTML.

Algo a tener claro es que Drupal no es una herramienta para hacer sitios estéticos y de elevado concepto gráfico. No hay que perder de vista que lo que el navegador interpreta siempre es HTML , de modo que la potencia de Drupal no radica en el diseño por el contrario, en garantizar una unión excelente entre el HTML (Vista) y una robusta parte lógica de manejo de contenido, usuarios, etc… Por supuesto esto no quiere decir que no existan sitios Drupal de excelente estética, de hecho la mayoría lo son. Esta parte ya depende de un buen diseñador.

Bueno después de la introducción manos a la obra, primero se redacta todo el HTML teniendo en cuenta ciertas prácticas:

1. Crear un documento cuya estructura sean Divs, en lo posible no utilizar tablas “tableless”.

2. A cada Div asignarle un Id único, con el que después nos podamos referir a el en la hoja de estilos.

3. Hacer un uso correcto de la semántica del XHTML, usar etiquetas <h1> cuando sean títulos de primer nivel, <strong> para información importante, etc…

4. Toda etiqueta que se abre debe ser cerrada, de acuerdo al estándar.

Una vez realizada la estructura viene la parte importante, ¿ cómo se combina la vista HTML con la parte lógica de Drupal?

Resumiendo, Drupal almacena los resultados de sus operaciones lógicas en variables predefinidas propias de su entorno. Luego esas variables se asignan al motor de plantillas para emplearlas en la impresión de la vista. El motor que se eligió para el tema grafico de nuestro portal fue PHPTemplate. Este motor permite utilizar directamente código en php dentro del HTML con solo abrir las etiquetas <?php ?>; sin embargo, para que el documento sea interpretado por el motor su extensión debe ser cambiada a tpl.php.

Lo que sigue es hacer uso de la variables proporcionadas por Drupal para imprimir los contenidos, bloques, menús, títulos que Drupal genera en su lógica. En un ejemplo sencillo, si se quiere imprimir el título de la pagina y luego el contenido dentro de un div al que identificamos como contenido tendríamos algo de este estilo:

<html>
<head>
<title><?php print $head_title ?></title>
</head>
<body>
<div id="contenido>
<?php print $contenido ?>
</div>
</body>
</html>

Donde las variables empleadas ($title, $content) son variables que Drupal tiene por defecto en su API y que se imprimen formateadas es decir con HTML incluido (En su mayoría).

Para referencia en la sección de descargas de nuestra web (Tery - Descargas) se encuentra un resumen (En Inglés) de las variables propias que proporciona Drupal para uso con PHPTemplate.


One Response to “Construyendo el portal de Tery Software - Maqueteado”

Leave a Reply