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 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: prnet.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 prnet.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 "../prnet.php"; php?>

Tengo la pésima costumbre de usar "php?>" como etiqueta para finalizar la inclusión de código PHP. Lo hago por simetría con la etiqueta de comienzo, pero sé que no es lo oficial, así que ¡no lo hagáis!, usad la etiqueta correcta, que es "?>".
Si quieres ver el archivo de funciones PHP, puedes descargarlo: prnetphp.zip
Emito la declaración del tipo de documento usando una función PHP definida por mí:
<?php EmiteDTD ("HTML401strict"); php?>

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 EmiteCabecera ("(El título)"); php?>

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 construcción ligeramente diferente:
<HEAD>
<?php EmiteCabecera ("(El título)", 1); php?>
(Código adicional)
</HEAD>

Cuando llamo a la función EmiteCabecera() con un segundo parámetro adicional, la función no emite las dos etiquetas HEAD, así que las pongo a mano y así puedo añadir cualquier otro contenido. 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 EmiteLogotipo(); php?>

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 EmiteValidadores(); php?>

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.

Mozilla 1.0 Este es mi navegador habitual, 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 tengo configurado en Mozilla es Helvetica 12px. El hecho de que con Mozilla la sede se vea bien de paso me garantiza 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. Algunos de esos navegadores son Galeon y Firefox. mozilla.png

Konqueror 2.2.2 Esta es la versión de Konqueror que viene 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 4 Sé que este navegador es muy antiguo, pero es la versión de MS IE que está instalado en el MS Windows 98 de mi portátil, ya que no me gusta actualizar la versión de MS IE en las particiones físicas que tengo con MS Windows (el motivo es que de paso se actualizan más componentes de MS Windows y cada vez se pierde más el poco control que se tiene en MS Windows). Se ve que este navegador muestra bastante bien la sede. No aparece el iconito y sin embargo aparece la 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

Opera Este navegador se está haciendo un hueco en el mercado, aunque pequeño. No me gusta mucho, pero es agradable ver que aumenta la variedad de navegadores en el mercado. Procuro mantener actualizada la versión de Opera que corre en mi Debian 3.0. Por lo demás, la sede se ve perfectamente con este navegador. opera.png

Safari Este interesante navegador de Apple está basado en KHTML, el motor de renderizado de Konqueror. En mi iMac puedo ver cómo queda la web con él: excelente, en mi opinión. safari.png

Lynx 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

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 queda muy poca gente que use este navegador, me decidí a dar el cambio. Los que aún lo uséis, por favor, considerad actualizaros a Mozilla. netscape473.png

Editor de textos

Los ficheros los edito directamente en el servidor, mediante una sesión ssh que enruta el protocolo X a mi ordenador de escritorio. Utilizo un editor de texto para X Window pero que apenas requiere librerías X. El editor es Zed, pero en la versión para X Window. Utilizo mi propia configuración. Ya sabemos que esto de los editores es algo muy personal, así que evidentemente este que uso me gusta mucho. Lo único que hecho en falta es que este editor no tiene resaltado de sintaxis por colores en PHP (sí lo tiene en C, C++ y HTML), pero tampoco me causa ningún problema especial. Puedes ver una captura de pantalla de una sesión de edición: zedx.png

Posibilidades para seguir

Volver a la página principal