Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.

Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.

Casi todo HTML en una única página

Muy interesante el ejercicio realizado por Patrick Weaver en su página A Blog Post With Every HTML Element:

After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy).

I had previously done some work to make sure that <figure> and <figcaption> elements were layed out nicely for images with associated captions, and I had been impressed with various Recurser’s implementation of footnotes or sidenotes1, and have been thinking it would be interesting to see what other interesting layouts were possible with just HTML.

I could, element by element, continue to add support (mostly by making CSS updates for each element to fit in with the rest of my style choices) as I came across specific needs for them, but not one to shy away from an exhaustive exploration, I decided to write this post and attempt to use every element.

A goal of the post, was to avoid delaying other future posts with CSS updates on a previously unused element, but in reality it took a year and a half to make all the updates for just this post! I am using the MDN Web Docs list of HTML elements as a reference which has more than 100 tags divided into a few categories, which I will also use in this post. Many of the tags like <html> don’t make sense to include in the text of a blog post, but if you’re viewing this post on, then every one of the elements is used somewhere on this page.

Cómo escribir CSS en el año 2023

En Writing CSS In 2023: Is It Any Different Than A Few Years Ago? se explica cómo se debe escribir CSS en la actualidad y así evitar escribir CSS viejuno:

CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet).

Guía de diseño adaptativo moderno

En The Guide To Responsive Design In 2023 and Beyond se explica todo esto:

Using Modern CSS

  • The typography is responsive to the viewport width via clamp() function.
  • The spacing is responsive to the viewport width via clamp() function.
  • The hero section is responsive to its content via flexbox wrapping.
  • The cards grid is responsive to the available space with minmax(), no media queries.
  • The card component is responsive to its wrapper via size container queries and style container queries.
  • The margins and paddings are responsive to the websites language via logical properties.

Using Media Queries

  • The site navigation is responsive to the viewport width.
  • The theming is responsive to the user preferences in their operating system.
  • The card hover effect is responsive to what the user is using (touch vs mouse).

Juego sobre diseño de interfaces de usuario

En User Inyerface, un juego auténticamente cabrón sobre las peores formas de diseñar interfaces de usuario nos presentan el juego User Inyerface:

User Inyerface es la definición literal de juego cabrón, de esos diseñados para ser difíciles tirando a imposibles. Se trata de avanzar de unas pantallas a otras siguiendo las instrucciones, pero la interfaz de usuario es tan engañosa que incluso pasar de una página a la siguiente es casi imposible.

Noticia en la web del W3C sobre el 30 aniversario del dominio público de la Web


Today marks the 30th anniversary of the release of the World Wide Web into the public domain, for general use, and at no cost, on 30 April 1993 by CERN.

This quiet gesture, advocated by Web inventor Sir Tim Berners-Lee, has had implications beyond what he or anyone imagined at that time: the Web, free for everyone, has changed our lives.

Please, join me in taking a moment to appreciate the impact and the sheer magnitude of the revolution that started just two years prior. “Try it”, Sir Tim noted in his August 1991 email introducing the World Wide Web – and since then, billions of people have.

H. G. Wells también imaginó la Web

Se suele nombrar a Vannevar Bush como uno de los pioneros que imaginó la Web. Así lo cuento en mi vídeo “Historia de la Web: su nacimiento (parte 1)”:

Ahora he descubierto que H. G. Wells, el famoso escritor británico de ciencia ficción, también imaginó en sus escritos World Brain algo que se asemeja mucho a la actual Web (o Internet, aunque no son lo mismo):

In 1937, H. G. Wells proposed a predigital, freely available World Encyclopedia to represent a civilization-saving World Brain.

In a series of talks and essays in 1937, H. G. Wells proselytized for what he called a “World Brain,” as manifested in a World Encyclopedia—a repository of scientifically established knowledge—that would spread enlightenment around the world and lead to world peace. Wells, known to readers today as the author of The War of the Worlds and other science fiction classics, was imagining something like a predigital Wikipedia. The World Encyclopedia would provide a summary of verified reality (in about forty volumes); it would be widely available, free of copyright, and utilize the latest technology.

Of course, as Bruce Sterling points out in the foreword to this edition of Wells’s work, the World Brain didn’t happen; the internet did. And yet, Wells anticipated aspects of the internet, envisioning the World Brain as a technical system of networked knowledge (in Sterling’s words, a “hypothetical super-gadget”). Wells’s optimism about the power of information might strike readers today as naïvely utopian, but possibly also inspirational.