Introducción

Creación de sitios web

El diseño de los sitios web ha evolucionado mucho desde hace ya bastantes años. En la actualidad, difícilmente una misma persona se hará cargo de todas las especificaciones de un proyecto, ya que hay muchas competencias que dominar. Entre ellas, el desarrollo, la ergonomía, el diseño, el rendimiento, la redacción de contenidos, el posicionamiento en buscadores, la estrategia de contenido, las ilustraciones y las animaciones...

Los lenguajes de la Web

Los sitios web están formados por páginas diseñadas con los lenguajes «fundacionales», que son HTML (HyperText Markup Language) y CSS (Cascading Style Sheets). HTML gestionará la estructura de las páginas y su contenido, mientras que CSS se encargará del formato de este contenido. Con estos dos lenguajes, es posible crear sitios principalmente estáticos, aunque se tiene la posibilidad de incorporar multimedia.

Pero, cuando se trata de interactuar de manera significativa con los visitantes, es necesario usar otros lenguajes, como JavaScript. Y para manejar grandes cantidades de información almacenada en una base de datos, será necesario utilizar lenguajes de servidor, como PHP.

Una breve historia de Internet

Internet, tal como la conocemos en la actualidad, es un avance tecnológico bastante reciente. Fue en marzo de 1989, en el CERN (Centro Europeo de Investigación Nuclear), cuando Tim Berners-Lee escribió el artículo «fundador» de Internet. En este artículo, titulado Gestión de la información: una propuesta, Tim Berners-Lee menciona en su introducción la gestión de la información a través de un sistema de hipertexto distribuido: «It discusses the problems of loss of information about complex evolving systems and derives a solution based on a distributed hypertext system». He aquí la URL de este documento: http://www.w3.org/History/1989/proposal.html

Después, a partir de octubre de 1990, comenzó realmente la historia de Internet. Puede consultar esta URL: https://www.w3.org/History.html, para conocer todas las fechas clave de esta historia desde 1945 hasta 1995. Y para obtener una cronología de la historia de la World Wide Web, consulte esta URL: https://www.w3.org/2005/01/timelines/timeline-2500x998.png

La evolución del HTML

En 1991 Tim Berners-Lee escribe los primeros «borradores» de HTML. En junio de 1993, un primer documento técnico especifica el lenguaje HTML: Hypertext Markup Language (HTML) A Representation of Textual Information and MetaInformation for Retrieval and Interchange (http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt).

Luego, es el W3C (Word Wide Web Consortium), creado el 1 de octubre de 1994, el que se encarga de la estandarización del HTML. A partir de este trabajo, se lanzan numerosas versiones de HTML, hasta la versión 5, estandarizada el 28 de octubre de 2014. Pero el trabajo del W3C es extremadamente lento porque utiliza un procedimiento que pasa por muchas etapas de trabajo y pruebas. Esto hace que se requieran muchos años para que una versión de HTML se estandarice en una recomendación oficial.

A partir de 2004, se pone en marcha otro grupo de trabajo, el Web Hypertext Application Technology Working Group o WHATWG (http://www.whatwg.org/), que tiene como objetivo acelerar la evolución de HTML publicando regularmente nuevas características, sin esperar a tener un documento estandarizado «muy grande» en una fecha determinada. Este es el HTML Living Standard. En 2017, se firmó un acuerdo entre el W3C y el WHATWG para trabajar juntos en la evolución de HTML. Más adelante, en 2019, el W3C firmó un acuerdo en el que otorgaba al WHATWG...

La evolución de las CSS

Antes de usar las CSS, el formato de las páginas web se realizaba mediante la inclusión de atributos de formato en las etiquetas HTML. Era largo y confuso de implementar. Bajo la dirección del W3C, y con HTML 4, aparecen las CSS Level 1, en diciembre de 1996 (https://www.w3.org/TR/REC-CSS1-961217.html). La principal ventaja de las CSS es que separan la estructura de las páginas y su contenido -hecho con etiquetas HTML- del formato y el diseño -hecho con CSS-.

Las CSS Level 1 y Level 2.1 también estaban normalizadas en un solo documento «grande». Con las CSS Level 3, publicadas en forma de borrador (draft) en diciembre de 1999, el WC3 cambia de estrategia y propone módulos «especializados» en un ámbito de formato e independientes entre sí. Esto acelera un poco la normalización de las CSS. Esta es la URL para seguir el progreso del trabajo relativo a las CSS3: https://www.w3.org/Style/CSS/current-work

En esta lista, a cada módulo se le asigna una denominación que indica su evolución en el proceso de normalización:

Las etiquetas van desde First Public Working Draft hasta Recommendation, cuando el módulo está completo y es estable.

También hay una segunda clasificación relativa al uso de las CSS. Todos los módulos se clasifican, según su uso en producción en los sitios web, en las siguientes categorías:...

La interpretación de CSS3 por los navegadores

Los módulos CSS3 del W3C están en constante evolución. Los navegadores web deben ser capaces de reconocer e interpretar las nuevas propiedades de CSS3. Para seguir el ritmo de esta evolución, el sitio When can I use (http://caniuse.com/) ofrece el servicio más completo y confiable sobre el nivel de compatibilidad de los navegadores con CSS3.

Para comprobar la compatibilidad de los navegadores con una propiedad determinada, basta con introducir su nombre en el campo de búsqueda. He aquí un ejemplo con la propiedad font-stretch:

Dependiendo de las versiones de los principales navegadores web, se indica el nivel de compatibilidad. Al pasar el cursor por encima de una versión de un navegador, se muestra una ventana emergente con información más detallada:

Finalmente, debe tenerse en cuenta que hay un enlace disponible a la derecha del nombre de la propiedad.

Este enlace muestra la página de la propiedad en el sitio web del W3C, de la cual mostramos un extracto:

CSS especializadas

1. Páginas web para imprimir

En ocasiones, los visitantes de un sitio web desean imprimir una página para conservar su contenido en papel. Se trata de un uso perfectamente legítimo, aunque hoy en día es algo poco habitual en esta era de hiperconectividad móvil con los teléfonos inteligentes.

Para ello, es necesario utilizar las media queries (que se explicarán en un capítulo específico) con una configuración adecuada. Sin embargo, dado que este libro está dedicado exclusivamente a las aplicaciones web, este caso particular no se tratará aquí.

2. Módulos para diseñadores gráficos

El W3C ofrece numerosos módulos especializados en animación y diseño gráfico, como el Shapes Module Level 1 y el Masking Module Level 1, que se clasifican en la categoría Testing, o los módulos Web Animations y CSS Transitions, que se encuentran en la categoría Refining. Estos módulos aún no son estables y están en desarrollo, por lo que no se abordarán en este libro. Aquí solo se tratarán los módulos que pueden utilizarse con garantías en entornos de producción, es decir, los clasificados como Completed y Stable.

3. La accesibilidad de los sitios web

La accesibilidad web es un tema de plena actualidad, regulado en España tanto para administraciones públicas como para ciertos sectores privados. Estas disposiciones obligan a:

Las personas jurídicas del sector público: Estado, comunidades autónomas, administraciones locales, universidades, hospitales, organismos oficiales, etc. (Real Decreto 1112/2018).
Entidades privadas: aquellas que gestionan servicios públicos o reciben financiación pública, por ejemplo, en ámbitos...