Diseño web de la sede

Sé perfectamente que esta sede no será un ejemplo por su diseño, pero como me gusta la creación web y le he dedicado algún tiempo, quiero explicar algún detalle sobre cómo funciona esta web, desde el punto de vista de su arquitectura y diseño.

Arquitectura

Al estar la sede alojada en un servidor propio, puedo poner todo aquello que desee sin más límite que mi conocimiento y el hecho de que deseo utilizar exclusivamente software libre.

Cuando empecé con la sede ya conocía HTML, aunque estaba usando la versión 3.2. Y había estado tonteando con PHP, pero sin decidirme por avanzar. Así que estuve muchos meses escribiendo partes de la sede ayudándome de PHP y usando HTML 3.2 y un diseño basado en tablas para organizar el contenido.

Como la sede no tiene ninguna complicación en la colocación de los elementos, el uso de tablas no planteaba ningún problema, aunque era consciente de que las tablas no se deben utilizar para ayudarse en el diseño, sino simplemente para mostrar datos tabulares. Sabía que lo lógico era usar CSS (Hojas de estilo en cascada), pero no las conocía lo suficiente.

Así que a principios de 2004 decidí cambiar la implementación interna de la sede, aunque manteniendo el aspecto final, que es de mi agrado porque me permite clasificar con claridad el contenido.

La arquitectura consiste en basar el aspecto en hojas de estilo y la gestión del contenido en PHP, usando algunas bases de datos SQLite en puntos donde es necesario.

Implementación

En el directorio principal de la web hay una hoja de estilos, que será común a todas las páginas de la sede: tedecea.css. En ella coloco las definiciones de estilo que necesito para cualquier página. No me importa que luego no todas las páginas utilicen todos los estilos porque se ahorra ancho de banda de esta manera, ya que los navegadores mantienen en sus cachés locales este archivo css. Las decisiones de colores y de colocación de cada bloque van en este archivo.

Tambien en el directorio principal de la web se encuentra el archivo tedecea.php, que contiene varias funciones que iré explicando. Este archivo también será usado por todas las demás páginas de la sede, lo que me permite disponer en todas ellas de todas las funciones auxiliares que necesito.

Cada sección de la sede dispone de su propio directorio dentro del directorio principal. Así consigo que las URL a cada sección sean cortas. Cada sección comienza con un archivo index.php.

Veamos paso a paso cómo se van componiendo los distintos archivos de la sede tomando como ejemplo un index.php cualquiera.

Comienzo con un comentario HTML en el que pongo los datos básicos de la página:
Rápidamente incluyo el archivo con la definición de las funciones PHP, porque las quiero usar inmediatamente:
<?php require "../tedecea.php"; ?>

Si quieres ver el archivo de funciones PHP, puedes descargarlo: tedeceaphp.zip
Emito la declaración del tipo de documento usando una función PHP definida por mí:
<?php Tedecea_EmiteDTD ("HTML401strict"); ?>

Hacerlo así me permite escribir menos en cada página, que quede más clara (al menos a mí me lo parece) y además puedo emitir distintos tipos de documento, porque la función EmiteDTD admite varias cadenas distintas como valor del parámetro.
Siempre que puedo utilizo ya HTML 4.01 estricto, con lo que evito utilizar construcciones obsoletas (llamadas "deprecated" en inglés). Esto me ha llevado a descubrir que hay muchas expresiones HTML que yo creía muy normales pero que ya están anticuadas. Así que he tenido que buscar sus equivalentes CSS, lo que me ha resultado muy educativo.
Etiqueta de comienzo de HTML
<HTML>
La cabecera del documento la emito con otra función propia, que recibe como parámetro el título de la página web:
<?php Tedecea_EmiteCabecera ("(El título)", 'UTF-8'); ?>

La función EmiteCabecera() se encarga de incluir la hoja de estilos y el iconito de la sede.
Cuando necesito añadir más contenido a la sección HEAD, por ejemplo código en JavaScript, utilizo una llamada que añada las líneas necesarias:
<?php Tedecea_EmiteCabecera ("(El título)", 'UTF-8', 'codigo.js'); ?>

Para poder utilizar un número distinto de variables al invocar una función PHP hay que utilizar la familia de funciones PHP func_*().
El parámetro adicional que uso ahora mismo no tiene ningún valor, pero en un futuro lo podría tener.
Esta idea de que la sección HEAD completa sea manejada por una función me permite cambiar muy rápidamente un parámetro global de toda la sede. Por ejemplo, podría añadir un parámetro para controlar el modo de cachear las páginas.
Etiqueta de comienzo de BODY
<BODY>
Coloco el logotipo de la página, que es una imagen PNG generada con The GIMP usando el tipo de letra Street Corner de Apostrophic Laboratories en un script de generación de logotipos que programé yo mismo basándome en otro existente.
<?php Tedecea_EmiteLogotipo(); ?>

El logotipo es un enlace a la página principal de la sede.
El contenido que distingue cada página viene ahora, y lo distribuyo por módulos, así que cada uno lo comienzo con un pequeño comentario HTML
Cada módulo está formado por tres DIV: uno genérico, que agrupa visualmente al módulo, uno con el título, que tiene un color característico de fondo, y por fin el tercero con el contenido principal. Algo así:
<DIV CLASS="cuadro">
  <DIV CLASS="titulo2">(Título del módulo)</DIV>
  <DIV CLASS="contenido">
    (Contenido del módulo)
  </DIV>
</DIV>

He definido tres CLASS para los títulos, que diferencio por tamaños, usando definiciones de tamaño relativos de CSS.
Uno de los módulos que suelo incluir es el de "Posibilidades para seguir", para permitir una navegación por la sede fluida pero muy sencilla.
Utilizando otra función propia añado tres iconos que aluden a que las páginas pretenden seguir los estándares del WWW Consortium y funcionar correctamente en cualquier navegador:
<?php Tedecea_EmiteValidadores(); ?>

Este módulo solo lo pongo cuando realmente la página pasa el validador oficial. Si alguna página no lo tiene, es porque no he tenido tiempo de pulirla, aunque los errores que presenta son poco severos.
Concluyo el BODY y la página:
</BODY>
</HTML>

Navegadores

Me preocupa que la sede sea sea visible con cualquier navegador. Sé que es una tarea casi imposible, sobre todo porque los navegadores más antiguos no admiten muchas de las características que ahora son comunes en el diseño web. Pero aún así, compruebo el aspecto de la sede con cuantos navegadores puedo. Si tomas una captura de pantalla de pedroreina.net con un navegador que no está en esta lista y me lo mandas, probablemente lo añada. Y si la sede no se ve bien con tu navegador, dime cuál es y examinaré el problema cuando tenga tiempo.

A continuación hago un repaso del aspecto de la página con diferentes navegadores, agrupándolos por familias:

Mozilla

Desde que comencé a navegar por la WWW he utilizado productos de Netscape y su sucesora, la fundación Mozilla. He pasado por Netscape Navigator, Mozilla Navigator y Mozilla Firefox en muchas de sus versiones.

Netscape Navigator 4.73 Este antiguo navegador es realmente "una piedra en el zapato" para el diseño web. Su soporte CSS es bastante malo. Tardé mucho en pasar de un diseño de la web basado en tablas a un diseño basado en CSS precisamente porque con este navegador el nuevo diseño se ve realmente mal, como podéis comprobar. Al darme cuenta, por fin, de que quedaba muy poca gente que use este navegador, me decidí a dar el cambio. No creo que ya quede nadie que lo use. netscape473.png

Mozilla Navigator 1.0 Este fue mi navegador habitual durante muchos años, así que lógicamente la sede se ve bien en él. Se observa el iconito al lado izquierdo de la URL. El tipo de letra que tenía configurado era Helvetica 12px. El hecho de que con Mozilla la sede se viera bien de paso me garantizaba que también se va a ver bien con los navegadores "hijos" de Mozilla, es decir, aquellos que utilizan el motor de renderizado de Mozilla, llamado Gecko, como son Galeon y Firefox. mozilla.png

Mozilla Firefox 3.0 Usé tanto las versiones 1 de este navegador (poco) como la 2.0, con la que estuve mucho tiempo, y la 2.5. Tardé poco en pasarme a la 3.0, que me parece magnífica. firefox304.png

Konqueror

Konqueror 2.2.2 Esta era la versión de Konqueror que venía en Debian 3.0, Woody, la versión de GNU/Linux que utilizo para trabajar. Uso Konqueror de vez en cuando como gestor de archivos. Pero se ve que no tiene ningún problema para renderizar perfectamente la sede. No aparece el iconito. La letra que usa para el primer titular es claramente muy pequeña. konqueror222.png

Konqueror 3 Knoppix 3.2 ES viene con la versión 3 de Konqueror, así que hacer la prueba no cuesta nada. Se nota la mejora respecto a Konqueror 2.2.2: ahora aparece el iconito (incluso KDE lo coloca en la barra del título, qué detalle) y los tamaños de las letras son más adecuados. konqueror3.png

MS Internet Explorer

MS Internet Explorer 4 Sé que este navegador es muy antiguo, pero es la versión de MS IE que estaba instalada en el MS Windows 98 que venía con uno de mis portátiles antiguos. Se ve que este navegador muestra bastante bien la sede. No aparece el iconito y sin embargo aparece una barra de desplazamiento horizontal, y aunque haga la ventana más ancha, no desaparece; se debe creer que le falta espacio para renderizar algo, creo que la tabla con los iconos que hay casi al final. ie4.png

MS Internet Explorer 6 Sé que este es el navegador más usado del mundo, aunque a mi juicio sea inferior en calidad a muchos otros. Así que es obligatorio comprobar que la sede se ve bien con este navegador. Como se aprecia, tiene exactamente los mismos problemas que la versión 4. Tendré que estudiar cómo conseguir que se vea el iconito, ya que parece que MS IE no funciona como los demás. ie6.png

MS Internet Explorer 7 Intento comprobar cómo se ve la sede en las versiones de este navegador que va sacando su fabricante, pero no veo que consiga mejorar nada. Es más, sus navegadores me siguen pareciendo muy torpes en su uso normal. ie7.png

MS Internet Explorer 8 Aunque esta versión presenta mejoras evidentes respecto a la versión anterior gracias a que por fin copia características de otros navegadores, el motor de renderizado aún no ha conseguido representar correctamente mi web. Ya son muchos años sin conseguirlo. ie8.png

Opera

Este navegador ha conseguido hacerse un hueco en el mercado, aunque pequeño en los ordenadores de escritorio más importante en los aparatos más pequeños. Aunque a mí no me gusta mucho usarlo, encuentro que es un buen producto, que ofrece interesantes novedades, en constante desarrollo y con un grupo de desarrollo que está atento a que su navegador funcione en tantas plataformas como sea posible. Además, es agradable que aumente la variedad de navegadores en el mercado, eso es bueno para la WWW, en mi opinión.

Procuro mantener actualizada la versión de Opera que corre en mi ordenador de escritorio, con Debian, algo que es perfectamente sencillo de conseguir ya que los paquetes deb de Opera siempre me han funcionado correctamente, algo que demuestra, tal como yo lo veo, que si una empresa de software desea hacer programas que funcionen con GNU/Linux, lo pueden hacer perfectamente. Por lo demás, la sede se ve perfectamente con este navegador.

Opera 7.11 Usé esta versión de Opera con Debian 3.0. opera711.png

Opera 9.63 Tengo esta versión de Opera en Debian 5.0. opera963.png

Safari

Este interesante navegador de Apple está basado en KHTML también conocido como WebKit, el motor de renderizado de Konqueror. Cuando tuve el iMac, pude ver cómo queda la web con él: excelente, en mi opinión. safari.png

Google Chrome

En el momento de hacer esta captura de pantalla, Google hace meses que ha lanzado la versión para MS Windows de su navegador y hace días que ha dejado para descarga una versión beta para GNU/Linux, que a mí me funciona perfectamente. La sede web se ve correctamente en ambas, el navegador parece rápido y, aunque echo en falta en él muchas características, me resulta agradable navegar con él. Para la captura del navegador para GNU/Linux he utilizado las fuentes Droid a 14 puntos. chrome-win.png, chrome-linux.png

Modo texto

La navegación en modo texto es importante para mí; no es que la use mucho, pero en algunos momentos es magnífico que una sede web sea al menos manejable en modo texto.

Lynx No es el único navegador en modo texto, pero sí es un clásico. lynx.png

Android

El sistema operativo de Google pensado para teléfonos móviles incluye un navegador basado en WebKit, como Konqueror y Safari. La página se ve perfectamente. android.png

Editor de textos

Los ficheros los edito directamente en el servidor, mediante una sesión ssh. Utilizo un editor de texto para consola, ne, the nice editor, por supuesto con varias personalizaciones. Puedes ver una captura de pantalla de una sesión de edición: ne.png.

Durante algunos años usé NEdit, pero lo abandoné cuando empecé a usar cada vez más textos con codificación UTF8.

Anteriormente usé durante mucho tiempo el editor Zed, con este aspecto: zedx.png

Posibilidades para seguir

Volver a la página principal