La web ha evolucionado enormemente desde sus inicios, pero en algunos aspectos cruciales sigue anclada en el pasado. Mientras tecnologías como WebAssembly (WASM) ganan terreno incluso en el servidor, las páginas web que usamos todos los días todavía funcionan con sistemas viejos como el DOM, HTML y CSS, que fueron creados hace décadas y no están pensados para las necesidades de hoy.

En su blog profesional, el desarrollador Steven Wittens ha expuesto con detalle esa idea (y dejado caer, al final, algunas posibles soluciones) en un texto que propone repensar, desde su misma base, los fundamentos del desarrollo web.

¿Qué es el DOM y por qué es un lío?

Cuando visitas una página web, tu navegador construye una especie de "árbol" interno para entender y mostrar el contenido. Ese árbol se llama DOM, que significa Document Object Model o "Modelo de Objetos del Documento".

Imagina que el DOM es como una maqueta de LEGO de la página, donde cada bloque representa un elemento: un título, una imagen, un botón, etc. Suena bien, ¿verdad? El problema es que este sistema se ha vuelto tan viejo y complicado que ya nadie lo entiende del todo bien… ni siquiera los expertos.

Por ejemplo, en Google Chrome, un solo bloque de esa maqueta (document.body, que es básicamente el cuerpo de la página) tiene más de 350 funciones y propiedades diferentes. Y si hablamos del estilo (colores, márgenes, tamaños), hay más de 660 opciones solo para eso.

Es como tener una caja de herramientas tan grande que ya no sabes qué usar, ni cómo. Además:

• Muchas herramientas están obsoletas (ya no se usan, pero ahí siguen).
• Varias hacen lo mismo, pero de formas diferentes.
• Algunas cambian cosas en la página de maneras inesperadas.

Debido a este caos, la mayoría de desarrolladores modernos evitan trabajar directamente con el DOM. Usan herramientas más fáciles y organizadas (como React o Vue), que simplifican todo.

Y aunque hay intentos por mejorar esto, como los Web Components (una forma más moderna de crear partes reutilizables de una página), llegaron tarde y no son muy populares porque son difíciles de usar.

HTML: ¿Y la semántica, dónde quedó?

HTML es el lenguaje básico con el que se construyen las páginas web. Su objetivo original era permitir que los sitios fueran claros y organizados: con títulos, párrafos, listas, artículos, comentarios… todo bien etiquetado.

Eso se llama semántica: usar etiquetas que explican qué es cada parte del contenido, no solo cómo se ve.

Pero, aunque han pasado más de 10 años desde que salió la versión vigente de HTML (HTML5), seguimos sin tener etiquetas para cosas tan comunes como un hilo de conversación (<thread>) o un comentario (<comment>). Eso significa que los desarrolladores tienen que improvisar y usar etiquetas genéricas como <div> o <article>, que no dicen claramente lo que representan.

En Genbeta

No suele considerarse a HTML y CSS lenguajes de programación... pero hay quien no está de acuerdo (y tienen buenos argumentos)

Además, las reglas para usar las etiquetas "correctamente" son confusas. Por ejemplo, según algunas guías, un artículo dentro de otro artículo podría considerarse un comentario... pero eso no tiene mucho sentido, ¿verdad?

Hoy en día, las grandes decisiones sobre cómo evoluciona HTML las toman principalmente los creadores de navegadores (como Google o Apple), no una comunidad abierta. ¿Y qué han hecho? Pues en lugar de rediseñar o simplificar HTML, han ido agregando pequeñas cosas nuevas aquí y allá, como quien sigue parcheando una prenda vieja.

CSS: ¿por qué alinear cosas en la web es tan difícil?

CSS (siglas en inglés de "hojas de estilo en cascada") es lo que usamos para darle forma y colores a una página web: tamaños, márgenes, colores, posiciones, etc. Pero a pesar de ser tan importante… muchas veces parece estar en contra nuestra.

¿Te ha pasado que simplemente quieres poner dos cosas una al lado de la otra, o que algo quede centrado en la pantalla, y por más que lo intentas no pasa lo que esperas? No estás solo.

El problema principal es que CSS no funciona como creemos.

Imagina que tienes una caja con dos cajones adentro y que quieres que cada cajón ocupe la mitad del espacio. Lógico, ¿no?

<div>
 <div style="height: 50%">...</div>
 <div style="height: 50%">...</div>
</div>

Pero CSS no lo entiende así. En realidad, necesita que primero le digas cuánto mide la caja grande. Si no lo haces, simplemente ignora tus instrucciones.

Esto es porque CSS trabaja de una forma algo rara: primero mira el contenido (lo que hay dentro) y luego decide qué tamaño debería tener el contenedor. Es como si compraras una caja para tus cosas... después de ver cuántas cosas tienes.

¿Cómo se soluciona eso? Bueno, el CSS moderno tiene herramientas como Flexbox, que ayudan a distribuir mejor el espacio entre elementos. Pero hasta esas herramientas cuentan con sus propios problemas.

SVG: potente pero caótico

SVG son las siglas en inglés de "gráficos vectoriales escalables". Es una tecnología que permite dibujar cosas como iconos, gráficos, logotipos o ilustraciones directamente dentro de una página web, sin que se vean borrosas al hacer zoom. Resulta útil porque...

En Genbeta

Así se ha ido complicando la arquitectura detrás de las aplicaciones web en los últimos 26 años

• Puedes cambiar el tamaño de un dibujo sin perder calidad.
• Puedes modificar colores, formas o posiciones con código.
• Incluso puedes hacer que reaccione al pasar el mouse o hacer clic.

Pero, aunque SVG sea tan polivalente, usarlo en combinación con HTML y CSS puede volverse un lío por varias razones:

• No 'habla el mismo idioma' que CSS: Aunque a veces puedes aplicar estilos CSS a los dibujos SVG, no siempre funcionan igual. Hay reglas que se comportan diferente o simplemente no aplican.
• Es complejo: Para hacer un dibujo, tienes que escribir instrucciones como <path d="M150 0 L75 200 L225 200 Z" />. ¡Sí, eso es un triángulo! Pero no es precisamente amigable a la vista ni fácil de entender.
• ¿Cuándo usar SVG y cuándo HTML?: A veces puedes hacer una figura con HTML y CSS, otras veces necesitas SVG. Pero no hay una regla clara. Elegir entre uno u otro puede depender de detalles técnicos molestos.
• Algunas cosas útiles solo están en SVG: Por ejemplo, si quieres detectar clics en formas con bordes irregulares (como una estrella), SVG lo hace fácil. HTML y CSS... no tanto.

La pesadilla del 'kitbashing web'

A lo largo de los años, el desarrollo de interfaces web ha evolucionado a base de "parchar" las herramientas existentes. Esto ha dado lugar al fenómeno del kitbashing, un término tomado del modelismo donde se ensamblan modelos a partir de piezas que no estaban diseñadas para funcionar juntas. En la web, esto se traduce en construir interfaces sofisticadas combinando HTML, CSS y SVG en formas para las que nunca fueron concebidos.

Esto ocurre porque HTML y CSS no fueron pensados originalmente para hacer aplicaciones. Se crearon para mostrar documentos, como artículos o noticias, no para hacer cosas como editores de texto tipo Google Docs o chats como WhatsApp Web.

Ejemplos de lo difícil que puede ser:

• Un chat que se quede pegado abajo (como en WhatsApp):
  Parece algo básico, ¿no? Pero lograr que la ventana del chat se quede abajo cuando llega un nuevo mensaje requiere escribir código personalizado cada vez. No hay una forma fácil y automática de hacerlo con HTML y CSS.
• Copiar y pegar texto con formato: Si alguna vez copiaste texto de una página web y lo pegaste en otro lugar, sabrás que a veces se conserva el color o el estilo… y a veces no. Hacer que eso funcione bien en una app web requiere "trucos invisibles", como poner elementos escondidos fuera de la pantalla para que el sistema entienda qué se está copiando.
• Listas y tablas muy largas (como una hoja de cálculo): Mostrar muchos datos (como en Excel) es difícil en una web. Si lo haces directamente, la página se vuelve lenta. Para solucionarlo, los desarrolladores tienen que "engañar" al navegador: solo muestran una parte de la lista y cambian lo que se ve a medida que el usuario se desplaza.
• Cajas que se vean bien en diferentes tamaños de pantalla: Ajustar el diseño para que se vea bien en un celular y en una computadora suena lógico, pero hacerlo con HTML y CSS puede ser muy complicado. A veces hay que escribir muchas reglas específicas, o usar herramientas externas que tratan de hacerlo más fácil.

En Genbeta

Estos son los errores que todo desarrollador web debería evitar (si no quiere perder tiempo y energía), según este experto

Canvas: ¿una solución?

Ante las limitaciones evidentes del DOM y CSS, algunos desarrolladores y estándares emergentes han puesto sus ojos en una alternativa radical: usar <canvas> como plataforma principal para renderizar interfaces. La propuesta más notable en esta línea es HTML-in-Canvas, que plantea la idea de renderizar fragmentos de HTML dentro de un <canvas>, permitiendo personalizar completamente su presentación visual.

Suena atractivo: ¿por qué no aprovechar la potencia gráfica de Canvas para superar las deficiencias del modelo de caja y de estilo del navegador? Pero este enfoque trae consigo una gran cantidad de obstáculos tanto técnicos como filosóficos.

Para empezar, la API propuesta sigue estando atada al DOM, lo que significa que los elementos a renderizar deben seguir existiendo dentro del árbol de documentos para ser interpretables. Esto introduce una contradicción: si necesitas <canvas> para librarte del DOM, ¿por qué seguir dependiendo de él para dibujar?

Además, para lograr interactividad, el sistema obliga a reimplementar el modelo de interacción desde cero: gestión de eventos de mouse, teclas, estados de foco, accesibilidad... todo debe recrearse manualmente.

Se trata de un sistema donde el desarrollador asume el control absoluto, pero también la carga completa, como si estuviera desarrollando usando un motor de videojuegos.

Uno de los principales argumentos a favor de usar canvas es que “al menos es programable”. Pero en realidad, es un recurso extremadamente limitado:

• No tiene acceso directo a fuentes del sistema ni a APIs nativas de layout de texto.
• No ofrece herramientas nativas para manejar accesibilidad, localización o compatibilidad móvil.
• No permite reusar eficientemente estilos, efectos ni interacciones predefinidas del navegador.

¿Y entonces, qué?

Después de todo lo que hemos visto, queda claro que el modelo actual de cómo se construyen las páginas web —usando HTML, CSS y el famoso DOM— está roto, pero eso no significa que no haya solución. De hecho, según Wittens es totalmente posible mejorar todo esto… si nos atrevemos a cambiar las bases. Así que, ¿qué deberíamos hacer?

Empezar con una estructura más clara

Hoy en día, cuando haces una web, terminas mezclando muchas cosas: contenido, estilo y comportamiento. Todo está enredado.
Lo ideal sería separar mejor:

• Lo que se muestra (el diseño).
• Cómo se comporta (la interacción).
• Qué significa cada cosa (la semántica).

En Xataka

La web se ha convertido en un lugar horrendo para mucha gente. Así que están reconstruyendo su versión 1.0 como refugio

Tener estos tres aspectos separados haría que todo fuese más fácil de desarrollar, mantener y escalar.

Diseñar pensando en cómo se hacen apps hoy

Las páginas web de hoy ya no son solo documentos, son aplicaciones completas, como redes sociales, editores de texto, videojuegos… Y para eso necesitamos herramientas más modernas. Cosas como React, Vue o Svelte existen precisamente porque el sistema base (HTML+CSS+DOM) no da la talla.

Así que ¿por qué no rediseñar esas bases para que lo moderno ya venga incorporado?

• Que los cambios en la pantalla sean automáticos cuando cambie algo en el sistema.
• Que podamos mover elementos o cambiar estilos sin pelear con reglas raras de CSS.
• Que el código sea fácil de leer, escribir y entender.

Ya hay ejemplos funcionando

Wittens insiste en que no estamos hablando de fantasías, pues ya hay proyectos reales que ya están probando cómo se podría hacer todo esto mejor. Uno de ellos, por ejemplo, es Use.GPU, un sistema visual hecho con tecnología nueva llamada WebGPU. ¿Qué logra?

• Interfaces mucho más rápidas y suaves.
• Diseños con menos líneas de código.
• Posicionamiento de elementos que por fin tiene sentido (sí, centrar cosas es fácil).
• Efectos visuales sin trucos raros ni dolores de cabeza.

Y esto lo ha hecho una sola persona, con un sistema más claro y moderno que toda la maquinaria actual del navegador.

También hay navegadores nuevos como Servo y Ladybird que están empezando de cero. No arrastran todo el peso de 30 años de web, así que pueden tomar decisiones más inteligentes desde el principio.

Imagen | Marcos Merino mediante IA

En Genbeta | En esto consiste la labor de un desarrollador Full Stack: un perfil laboral todoterreno

En el mundo de la programación lleva mucho tiempo vigente un debate acerca de si los lenguajes HTML y CSS, que son la base del desarrollo web, son o no 'lenguajes de programación'. Sea en discusiones online o no, no es infrecuente encontrarnos con programadores de lenguajes de programación 'de verdad' siendo cortantes cuando oyen a alguien sugerir que sabe programar sólo porque ha aprendido HTML.

En StackOverflow, de hecho, se preguntan por qué tienden a ser "tan pendantes" con este tema, mientras que algunos diseñadores web consideran que los programadores con 'pedigree' son demasiado dogmáticos en su definición de lenguajes.

Pero no se trata de un debate baladí: a nivel técnico, es importante tener claro qué constituye un lenguaje de programación y qué no lo hace. Y también tener claro qué son realmente capaces de hacer HTML y CSS, para despejar cualquier duda sobre la etiqueta más correcta a aplicarles.

Lo primero que hay que tener claro es qué criterio utilizar para decidir qué es un lenguaje de programación y qué no. Y el más habitual y tradicional para ello es la capacidad de un lenguaje para ser 'Turing-completo'. Pero, ¿qué demonios es eso?

¿Turing-Qué?

Un lenguaje de programación se considera Turing-completo cuando tiene la capacidad de realizar cualquier cálculo que una Máquina de Turing pueda llevar a cabo. La pregunta es obvia, entonces, es "¿Qué es una Máquina de Turing?".

Como habrás supuesto ya, el Turing al que no dejamos de hacer referencia es Alan Turing, el padre de la computación moderna, popularizado por su trabajo con las computadoras Enigma durante la Segunda Guerra Mundial.

Pero esas no son las máquinas a las que nos referimos, sino a un dispositivo abstracto que Turing teorizó en 1936, que contaba con las siguientes características:

• Consta de una cinta infinita dividida en celdas, una cabeza de lectura/escritura que se mueve a lo largo de la cinta y un conjunto finito de estados y reglas de transición.
• Puede leer y escribir símbolos en la cinta, cambiar de estado según las reglas y moverse hacia la izquierda o la derecha.

En Genbeta

La estructura IF-THEN-ELSE: su origen y su papel en la creación de la inteligencia artificial

Esta descripción puede parecer simple, pero es una abstracción utilísima con la que Turing demostró que -si bien hay problemas que, efectivamente, una computadora nunca podrá resolver- si un problema puede resolverse mediante un algoritmo, puede resolverse con una máquina de Turing.

Por lo tanto, ser 'Turing-completo' significa que el lenguaje en cuestión debe ser capaz de simular cualquier algoritmo de computación, realizando para ello tres tareas fundamentales:

• Leer y escribir sobre un medio de almacenamiento.
• Controlar el flujo de ejecución mediante instrucciones condicionales (como if/else) y bucles (como for o while).
• Modificar su propio código o estado durante la ejecución.

Tres ejemplos rápidos de lenguajes Turing-completos serían Python, Java y C++.

HTML y CSS, sin embargo, no cumplen con estos criterios: HTML es un lenguaje de marcado utilizado para estructurar contenido en la web, mientras que CSS es un lenguaje de estilo usado para describir la presentación visual de un documento HTML.

HTML y CSS, más de lo que parecen (¿pero no lo suficiente?)

HTML: El HTML ha sido la columna vertebral de la web desde sus inicios. A primera vista, HTML puede parecer un lenguaje simple que se limita a definir encabezados, párrafos y enlaces, pero en realidad, ha evolucionado para incorporar elementos más avanzados, como multimedia, formularios interactivos con elementos de entrada y validación, almacenamiento local...

CSS: Por otro lado, el CSS se encarga de dar estilo y formato a los elementos HTML. Más allá de ser simplemente un conjunto de instrucciones de presentación estática, CSS también involucra el uso de conceptos lógicos: los 'media queries', son reglas condicionales que permiten que las páginas web se adapten a diferentes tamaños de pantalla y dispositivos. Han existido incluso exploits para vulnerabilidades de Mozilla Firefox basados únicamente en CSS.

Pero nada de esto basta para convertirlos en lenguajes Turing-completos. Así que, ¿hay más que argumentar o terminamos aquí la discusión sobre si son o no lenguajes de programación?

vía r/ProgrammerHumor

¡Tenemos un último testigo, señoría!

Un desarrollador web llamado Eli Fox-Epstein presentó una forma de simular la Regla 110 utilizando CSS y HTML en un evento llamado Hack && Tell en 2011. Dicha 'Regla' es un modelo de autómata celular (un patrón unidimensional compuesto por varios unos y ceros, que van evolucionando de acuerdo a ciertos patrones) creado por Stephen Wolfram que, pese a su extraordinaria simplicidad, en 2004 se demostró que es Turing-completo.

La simulación de Rule 110 en CSS se basa en la idea de que el código CSS puede representar el estado de las células en un autómata celular, y las interacciones de los elementos HTML pueden simular las reglas de transición de Rule 110. Cada paso del autómata celular se ejecuta mediante cambios en el DOM (Modelo de Objetos del Documento) y se aplican reglas de estilo condicionales en CSS para representar los cambios de estado.

En este enlace tienes todos los detalles necesarios (fragmentos de código incluidos) para comprender este peculiar experimento.

Lo que nos interesa es que si un modelo de autómata celular Turing-completo puede ser simulado con CSS3 y HTML5, eso significa que, si no ambos lenguajes, la suma de ambos sí puede considerarse Turing-completo... y, por tanto, un lenguaje de programación con todas las de la ley.

Imagen | Marcos Merino mediante IA + Foto de Alan Turing (dominio público)

En Genbeta | Escribe en once lenguajes de programación sabiendo sólo uno de ellos con esta herramienta web

Es una realidad que programar en pocos años no será algo opcional, y pasará a ser obligatorio para conseguir uno de los puestos de trabajo que están surgiendo debido a la revolución tecnológica que vivimos. Pero también es una realidad que sentarnos a estudiar, sobre todo cuando ya se tiene una edad, es algo laborioso y pesado para muchas personas.

Ante esta situación hay que buscar otras formas de aprender que no sea ponerse delante de una web a leer y a practicar código. Y es por ello que os traemos un interesante proyecto que se basa en aprender a programar de manera gratuita mientras con juegos retro. Y aunque parece algo que no casa muy bien, el aprender con el jugar, lo cierto es que se hacen las lecciones realmente amenas.

Una nueva forma de aprender a programar gratis

La página en cuestión es Codedex.io y nada más entrar nos encontramos una interfaz que a nosotros particularmente nos encanta al trasladarnos a los juegos antiguos. En esta primera pantalla se va a tener que pulsar en Espacio para comenzar a responder preguntas sobre lo que quieres conseguir desarrollando para iniciar el juego adecuado para ti.

Todo comienza con una muy buena historia que va a guiarte por toda esta aventura de aprendizaje en un lenguaje concreto. A partir de aquí se presentará una interfaz con diferentes apartados y diferentes niveles que vas a tener que ir superando, hasta llegar al final para poder crear tu propio proyecto.

Dentro de cada uno de los ejercicios del bloque (por los que se consigue experiencia al completar) se puede encontrar una consola a la derecha para poder ir ejecutando el código que se va proponiendo en las lecciones que se encuentran a la derecha. Para ir guardando todo este progreso es importante crear una cuenta con la que se irá sincronizando en tiempo real.

En Genbeta

Aprende a programar con Python gratis con este curso: muy visual y con acceso a todo el código

Hay que destacar que en esta web se va a poder aprender Python, HTML, JavaScript y CSS así como encontrar diferentes retos para poder practicar todo lo que se ha aprendido, independientemente de la formación a través de juegos que hemos comentado. Es por ello que estamos ante una interesante forma de aprender nuevos lenguajes de programación, con una experiencia de fondo que sin duda te va a encantar si eres amante de los juego retro.

En Genbeta | Los mejores cursos para aprender a programar desde cero gratis

Este artículo está encabezado por la imagen de una Nintendo Game Boy... cuya única peculiaridad es que, antes de que hiciéramos la pertinente captura, no era una imagen ni por asomo: sólo el resultado de utilizar código CSS (siglas de 'hojas de estilo de cascada') en una página web.

La imagen en cuestión es una creación del desarrollador y streamer español 'Manz', que la publicó ayer en Twitter acompañado de sendos enlaces a una demo visual y al correspondiente repositorio de código. Te animamos a entrar en el primero e intentar hacer clic con el botón derecho sobre la 'imagen'... ¡A ver si eres capaz de lograr que aparezca aquello de 'Guardar imagen como'!

⬅ Izquierda: La fotografía original
➡ Derecha: Código CSS (sin usar imágenes)

🤯¿Qué te parece?
<👇> Links en el siguiente tweet pic.twitter.com/z6aLLp9O5U

— Manz 🇮🇨⚡👾 (@Manz) January 26, 2023

Y si no sólo te has quedado boquiabierto con el truco, sino que te pica la curiosidad sobre cómo es posible hacer algo así, sigue leyendo (claro que, si por el contrario, ya tienes una idea básica de cómo hacerlo, revisar el enlace a GitHub te mostrará las herramientas y recursos usados por Manz para lograrlo).

Una explicación rápida

Crear una imagen usando únicamente tecnología CSS se diferencia poco o nada de la creación de un gráfico vectorial (esas imágenes que puedes ampliar indefinidamente sin que se pixelen); lo que ocurre es que, en lugar de usar para ello un software de ilustración vectorial como Adobe Illustrator usamos una dosis generosa de código CSS (y algo de HTML para poder mostrar el resultado, por supuesto).

Al igual que ocurre con las vectoriales, la forma de crear una imagen CSS se basa en ir separando y superponiendo cada capa de la misma. Por supuesto, cuanto mayor es el realismo buscando en el resultado, mayor número de capas hay que crear para no simplificar en exceso las formas y colores.

Créditos: Miguel Mangialardi

Eso, en el caso del CSS, exige lo siguiente:

• Un campo 'div' para cada capa.
• Una clase CSS asignada a cada 'div'.
• Clases CSS complementarias que definan los estilos a aplicar al citado 'div'.

Esto se puede hacer directamente tecleando código CSS y HTML en un editor de texto, o bien recurriendo a los múltiples frameworks y herramientas de desarrollo web disponibles en el mercado.

En Xataka

Cómo vectorizar una imagen

Y es que el CSS no permite sólo crear formas geométricas y colores, también degradados... y sombras. Y las sombras pueden resultar fundamentales a la hora de dotar de volumen (y, por tanto, de realismo) a una imagen antes plana. La diferencia, como se observa en la siguiente es notable; y para lograrlas basta con utilizar las propiedades 'text-shadow' y 'box-shadow' del estándar CSS:

Créditos: Mustapha Aouas

Lo anterior forma parte de otro ejemplo magnífico de Game Boy creada íntegramente con CSS, sólo que esta incluye sus propios juegos desarrollados con JavaScript:

Check out this CSS art of a Gameboy I made with a small peculiarity, it's actually playable 🕹
Link 👉 https://t.co/NhuY6SguLv

What's your highest score? Mine is 90...almost 💯

Use your keyboard if you're on a laptop
Made with the #angular game engine & #javascript #html #css pic.twitter.com/oavVNkAsqV

— Mustapha Aouas (@TheAngularGuy) November 25, 2021

Una vez que has entendido eso, quizá quieras pasarte por el canal de YouTube de Manz, donde nos muestra un 'paso a paso' cómo crear una Game Boy con CSS:

Párate un momento a pensar cómo visualizas mentalmente un hiperenlace; asociamos de tal manera ese concepto con el adjetivo 'azul' que cuando, hace cinco años, Google se atrevió a 'pintar' los suyos de negro, resultó tan chocante que el asunto se convirtió en noticia.

Bien es cierto que desde que existen las hojas de estilo CSS los enlaces puede tener cualquier color y formato, pero azul (y subrayado) es el aspecto por defecto de los hiperenlaces en todos los navegadores (y hasta en procesadores de texto, como MS Word). Y lo ha sido desde… bueno, desde siempre. ¿O no?

Resulta interesante preguntarse acerca del cuándo y el 'por qué' se vinculó —nunca mejor dicho— el concepto de hiperenlace con el color azul, habida cuenta de que dicho concepto es anterior a la generalización de los monitores a color.

Hace unas semanas, en el blog corporativo de Mozilla (fundación desarrolladora del navegador Firefox) intentaban responder a esta pregunta, recopilando toda una serie de datos de gran interés.

En Xataka

Cuando Mosaic dominaba el mundo (de los navegadores)

Érase una vez el hiperenlace (pero no era azul oscuro)

El hiperenlace nació antes incluso que la World Wide Web o la misma informática personal, con el Proyecto Xanadú en 1964, aunque bien es cierto que nunca llegó a pasar de lo teórico.

El primer paso en el mundo de lo práctico de los hiperenlaces llegó de la mano del software de publicación HyperTIES (para sistemas DOS). Y sí, ya entonces eran azules… pero azul cian, no el típico tono de azul que usamos hoy en día en los enlaces de las webs.

Captura de pantalla de HyperTIES.

Cuando Windows 1.0 permitió el desembarco de las interfaces gráficas a 'todo' color, también traía bajo el brazo otro elemento que seguimos usando hoy en día: los hiperenlaces con subrayado. Pero dichos hiperenlaces seguían siendo negros, pese al abundante uso del azul en los encabezados y bordes de las ventanas.

Cuando, dos años más tarde, Tim Berners-Lee empezó a trabajar en su proyecto de una World Wide Web, su navegador WorldWideWeb (escrito todo junto) presentaba los hiperenlaces con subrayado, pero seguían apareciendo en blanco y negro.

Cuando Apple y Microsoft marcaron tendencia, y Mosaic se sumó

La vinculación del azul a los hiperenlaces tuvo que esperar a los años 90, pero curiosamente llegaron de la mano de Apple y Microsoft, no de los recién aparecidos navegadores web: el software HyperCard de Apple ya coloreaba en azul oscuro sus enlaces cuando se hacía clic en ellos (aunque seguían siendo negros por defecto) y Windows 3.1 ya hacía lo propio con los iconos en 1992, contribuyendo a normalizar la vinculación entre el azul y los elementos interactivos de la interfaz.

Windows 3.1.

Un año más tarde, por fin, la versión 0.13 del navegador Mosaic anunciaba en su listado de cambios la adopción de los hipervínculos azules con subrayado continuo para los enlaces no visitados, y púrpura con subrayado discontinuo para los ya visitados.

Ese mismo año, el navegador Cello adoptó también el aspecto 'azul subrayado'… pero para representar los encabezados de las webs (h1, h2, etc). Al año siguiente (1994), tanto Cello como el recién nacido Netscape Navigator adoptaron el naciente 'estándar' impuesto por Mosaic. Internet Explorer hizo lo propio cuando nació en 1995.

Sin embargo, si bien el 'cuándo' ha quedado suficientemente bien establecido, el por qué sigue siendo una incógnita. No se puede atribuir a un criterio de estandarización del W3C, pues no se creó hasta 1994; y la relación de contraste entre el azul oscuro y el texto negro es de 2.3:1, claramente insuficiente si el contraste hubiera sido el fin perseguido.

Hay que buscar, por tanto, el motivo en otra parte: todo parece indicar que los desarrolladores de Mosaic se sumaron a una tendencia que ya habían inaugurado 'offline' tanto Apple como Microsoft, de vincular 'azul' e 'interacción'.

Las hojas de estilo en cascada (más conocidas como CSS) son el lenguaje de diseño (y una de las tres grandes bases, junto a HTML y JavaScript) de la World Wide Web, el lenguaje que permite a los desarrolladores dar formato a las páginas web aplicándoles estilos que alteran aspectos como colores, tipografías o espaciados.

Y ahora, este lenguaje nacido en 1996 está quizá a punto de experimentar uno de los mayores cambios de su historia. Según publica Miriam Suzanne, miembro del CSS Working Group del W3C (el organismo encargado de establecer los estándares de las tecnologías web), se ha aprobado el paso de la especificación de CSS Nesting de la actual fase de 'borrador para editores' a la de 'primer borrador de trabajo público'.

Esto lo introduce en el proceso de revisión de propuestas conocido como 'Recommendation Track', lo que puede desembocar en su inclusión en la versión estándar del lenguaje CSS. La versión online, aún clasificada como 'borrador para editores', especifica que la propuesta estaba disponible "únicamente para su debate" y que "su publicación aquí no implica la aprobación de su contenido por parte del W3C".

Pero, ¿qué es 'CSS Nesting' (literalmente, 'anidamiento CSS')? Fundamentalmente, se trata de permitir que las reglas CSS puedan expresarse de forma anidada, incluyendo bloques de código unos dentro de otros, una opción no disponible por ahora de manera nativa.

En Genbeta

Seis webs y canales de YouTube para aprender CSS desde 0 hasta nivel experto

Todo esto con el fin de:

1. Hacer el código más legible.
2. Aumentar su modularidad y la facilidad de mantenimiento de las hojas de estilo.
3. Reducir la duplicación de código.

Veamos un ejemplo:

Hoy en día, cuando escribimos CSS, nos vemos obligados a dominar los 'selectores CSS' para definir las reglas aplicables a nuestro sitio y precisar a qué elementos queremos aplicar determinado estilo. El objetivo del anidamiento CSS es que tengamos que utilizarlos mucho menos a menudo, porque usando el indentado ya estaremos supliendo su labor (de una manera, además, mucho más legible para humanos).

Esto conllevará algunos cambios de sintaxis. Por ejemplo, '&' pasará a convertirse en el selector de anidamiento para establecer reglas condicionales. Así en

.ejemplo { background: grey;

&:hover { background: red; } }

En este ejemplo, el selector &:hover está haciendo referencia, realmente, a .ejemplo:hover; es decir, a aquellos casos en que tengamos el ratón sobre el elemento 'ejemplo'.

Trabajar desde ya con el nuevo borrador

Pero, ¿qué hacer si nos ha gustado la idea y queremos empezar a trabajar con CSS siguiendo las recomendaciones del borrador? Fácil: los navegadores no entenderían la nueva sintaxis y la web resultante no podría visualizarse correctamente.

A no ser, claro, que recurriéramos a una herramienta de transformación de CSS como PostCSS, que ya cuenta con un plug-in (postcss-nesting) para transformar CSS anidado en el CSS ajustado al actual estándar…

… así, utilizando herramientas de terminal como npm y npx, podremos instalar PostCSS y usarlo luego para transformar ficheros .pcss (anidados) en .css.

Tanto esta opción como una futura oficialización del 'CSS Nesting' constituyen alternativas al uso de preprocesadores CSS tan populares como SASS (aunque éstos cuentan con otros atractivos además del uso del anidamiento).

Muchos de vosotros recordaréis y habréis leído/jugado la colección de libros 'Elige tu propia aventura', que en los años 70 inauguró lo que llamamos 'ficción interactiva': libros en los que eran tus propias decisiones como lector ("Si llamas a la puerta, pasa a la página 100, si sales corriendo, pasa a la página 105") las que determinaban la evolución de sus tramas.

Los tiempos de gloria comercial para estos libros pasaron hace ya años, en parte por la competencia de los videojuegos, que ofrecían una forma aún más interactiva e inmersiva de ficción interactiva. Sin embargo, existe un formato híbrido entre ambos: los videojuegos interactivos basados en (hiper)texto, que sustituyen el "pasa a la página X" por un clic de ratón.

Te presento a Twine 2

La buena noticia es que, en comparación con los videojuegos más 'tradicionales', este formato resulta mucho más fácil de programar si usamos las herramientas adecuadas. En este caso, vamos a echar un vistazo introductorio a la más popular de ellas, Twine 2, un editor 'open source' de ficción interactiva que genera juegos basados en HTML5, CSS y JavaScript y está disponible para Windows, Linux y Mac OS X… y también está disponible en una versión 100% online.

Nosotros, sin embargo, vamos a instalarlo desde dicha web (el proceso de instalación no tiene ningún misterio); una vez que lo iniciemos, estaremos ante una ventana como esta:

Para iniciar nuestra primera historia interactiva, bastará con hacer clic en el botón verde nombrado 'Historia'. Aparecerá un cuadro de diálogo para que indiquemos cómo denominaremos este historia: tras escribir el nombre, sólo debemos clic en 'Añadir'.

Eso nos situará ante una pantalla en la que cada recuadro es una escena que —una vez vayamos añadiendo más— aparece enlazado con otros según se estructuren los posibles 'trayectos de lectura'.

Si hacemos doble clic sobre la primera escena, podremos editar su título y contenido. Escribiremos nuestra primera escena (puede ser tan breve o extensa como estimes oportuno), e incluiremos, en algún lugar del texto 'hiperenlaces' a una o varias nuevas escenas, que se crearán automáticamente una vez cerremos la ventana de edición:

Para crear los hiperenlaces, basta con utilizar el editor de la parte superior de la ventana, seleccionando el texto y pulsando en el botón 'Link'. Si especificamos un 'Passage name', podremos establecer un nombre concreto para la nueva escena, lo cual será de gran utilidad una vez empecemos a acumular escenas en el editor.

Y, por supuesto, pulsando en el botón 'Reproducir' de la ventana principal, podremos ir visualizando en nuestro navegador cómo nos está quedando el juego:

Visualización de la primera escena. No, el talento literario no viene incluido con el software, ¿cómo lo has notado?

En Xataka

En el principio fue la aventura conversacional

Las opciones que nos brinda el editor

Un repaso al editor nos muestra las opciones que existen para dar formato al texto (negritas, cursivas, títulos, listas, color de texto y fondo)… pero también podremos recurrir a formas más complejas de personalizar lo que se muestra al usuario editando el CSS y el JavaScript del juego. Ah: también es posible insertar imágenes, vídeo y audio insertando etiquetas HTML.

Con un poco de maña, puede quedarnos algo tan resultón como esto:

Captura de pantalla de 'Shadows of Huntshire', disponible en Itch.io.

Además de eso, podemos ver que el editor también nos permite usar macros, variables, generador de números aleatorios, comandos condicionales, etc. Así, es posible recurrir a métodos más propios de los juegos de rol (como las tiradas de dados) o hacer que una elección pasada del jugador repercuta en otra escena recurriendo a variables (del tipo de 'Si tocó la Gema Maldita, restar 20 puntos de vida cuando entre en el Templo del Mal').

Sabiendo eso (tranquilo, hay múltiples tutoriales disponibles en Internet), sólo tenemos que seguir añadiendo escenas hasta completar la(s) trama(s) de nuestra aventura y conducir al usuario al 'FIN'. Una vez hecho podremos publicar nuestro juego como HTML... o utilizar alguna herramienta de terceros para generar un archivo ejecutable:

La gente de Humble ha publicado un nuevo Bundle en su sección de software, y esta vez se trata de una oferta de cursos de desarrollo web front end en la plataforma de aprendizaje online Pluralsight. Puedes pagar tan poco como 1 euro para obtener acceso al primer nivel del Bundle con cuatro cursos.

O, puedes pagar entre 13 y 16 euros para hacerte con el resto del contenido. En total son 20 cursos que se pueden desbloquear en el Humble Software Bundle Learn Front-End Web Development. Se te dará una clave para reclamar cada curso en Pluralsight de forma permanente.

Normalmente el acceso a los cursos ahí está anclado a una suscripción de 26 euros por mes, por lo que con este Bundle pagas menos de dos tercios de lo que cuesta un solo mes de suscripción por acceso ilimitado a esos 20 cursos.

Paga 1 euro y desbloquea

• Your First Day with HTML: un tutorial para aprender lo básico del software que se usa para crear sitios web, sintaxis HTML estructura del documento, y algunas etiquetas HTML básicas.
• JavaScript Module Fundamentals: fundamentos de la escritura de JavaScript modular y mantenible utilizando formatos, loaders y bundlers populares.
• Introduction to CSS: todos los conocimientos necesarios para empezar a trabajar con las hojas de estilo en cascada (CSS) y el diseño web.
• Creating Offline-first Mobile Apps with HTML5: cómo construir aplicaciones móviles offline-first utilizando HTML5, almacenamiento offline y service workers.

En Genbeta

Free for dev: una lista de software y productos para desarrolladores que tienen versiones gratis

Paga 13,71 euros y desbloquea todo lo anterior más:

• JavaScript: Functions: conocimiento fundamental para escribir código modular.
• HTML5 Advanced Topics: aprender a crear aplicaciones nativas de Internet enriquecidas.
• Creating Page Layouts with CSS: aprende a construir un sitio web móvil responsivo.
• Building on HTML5: Optimizing for Data, Communication and Offline Apps: aprende desde las estrategias para almacenar objetos de datos sencillos hasta utilizar la base de datos del navegador.
• Debugging Sites Using Chrome DevTools: cómo utilizar el potente conjunto de herramientas incluidas en Chrome para diagnosticar y solucionar rápidamente los problemas de las aplicaciones del lado del cliente.
• Working with Text and Lists in HTML: aprende a mostrar texto y listas en tu sitio web.

Paga 16,46 euros o más y desbloquea todo lo anterior junto a:

• HTML, CSS, and JavaScript: The Big Picture
• Front End Web Development: Get Started
• Learn Basic HTML5 and CSS3 by Building Your First Web Page
• Creating Forms in HTML
• Building Websites with HTML, CSS, and JavaScript: Getting Started
• HTML5 Fundamentals
• Styling Websites with CSS
• Optimizing and Deploying a Website
• JavaScript Best Practices
• Building Websites with HTML

98.css es un archivo CSS que toma el HTML semántico y lo hace ver bonito. O al menos esa es la forma en la que el desarrollador detrás del proyecto lo describe. En otras palabras, se trata de una librería CSS para construir interfaces que se vean como Windows 98.

La idea es ofrecer todo un sistema de diseño para recrear lo más fielmente posible las interfaces viejas, como las del antiguo sistema operativo de Microsoft. Sí, esas interfaces donde los botones están muy bien definidos, igual que los _checkbox_, los cajones de texto, las barras, etc.

Cero JavaScript

El objetivo principal de este proyecto es la accesibilidad. La librería depende del uso de HTML semántico y no contiene nada de JavaScript, lo único que hace es darle estilo a tu código en HTML utilizando algo de CSS. Lo que quiere decir que 98.css es compatible con tu _framework frontend_ favorito.

Para usar la librería existe una guía dentro de la misma web, también hay ejemplos de su uso con React, y con JavaScript. Puedes instalarla desde la página de lanzamientos del proyecto en GitHub, o puedes usar npm.

En Genbeta

Este YouTuber arregla webs mal diseñadas para que sus desarrolladores (y cualquiera) aprendan sobre UI

Para su creador, 98.css es simplemente un proyecto tonto y divertido con el que ejercitar su músculo open source, pero aparte de eso, no deja de ser un proyecto interesante para comparar las viejas interfaces de antes con las modernas. Especialmente por el tema de accesibilidad.

El diseño de UI actual, especialmente en el escritorio, aunque más estilizado tienen a dejar que desear en cuanto a accesibilidad. La poca diferenciación de colores y relieves en barras de herramientas, botones y menús tienden a confundir bastante. En la época de Windows 98 las cosas quizás no eran tan "bonitas", pero si que eran funcionales. Ahí hay un debate.

Las páginas web se componen de miles de elementos, algunos de ellos más visibles que otros. En concreto, las tipografías de los textos, los colores que se escogen para las mismas, y el contenido multimedia, son lo que perciben todos los usuarios de un simple vistazo.

Para todos aquellos que quieran conocer en profundidad estos tres elementos, traemos una herramienta disponible para Google Chrome y aquellos navegadores que soporten sus extensiones. Su nombre es CSS Peeper, y nos permite inspeccionar de una forma bastante visual los elementos de una página web.

En Xataka

Cinco extensiones para Chrome y Firefox si lo que te interesa es leer artículos sin distracciones

Una de las mejores formas de inspeccionar elementos visuales en una página web

Esta extensión se define como un "visor CSS inteligente", que nos permite, como su propio nombre indica, acceder a los códigos de estos elementos de las web, de un modo bsatante visual. No viene de más recordar que CSS es un lenguaje que se utiliza para diseñar los distintos estilos de los elementos que vemos en las páginas web. Al instalar la extensión y abrirla, veremos tres apartados principales, general, colors, y assets.

El primero de estos apartados (general) es el que se nos abre al iniciar la extensión, y nos permite conocer las fuentes que está utilizando la página web, así como cierta información (peso total y tiempo de carga) sobre los propios elementos CSS que las componen.

En este apartado, vemos la información referente a las tipografías usadas en el website.

El segundo nos muestra de una forma muy visual, cada uno de los códigos de color que componen la página. Si posamos el ratón por encima de alguno de estos códigos, veremos la opción de copiar al portapapeles, para poder introducir este código en cualquier otra web o programa.

En el segundo apartado, tenemos acceso a los códigos de color de la página, y a un botón para llevarlo al portapapeles.

En tercer lugar, encontramos un apartado en el que podemos encontrar todos los elementos de imagen de la página. La cosa no se queda aquí, ya que también podemos descargalos con tan solo pulsar sobre ellos. La herramienta detecta si están en formato JPEG o PNG, y los descarga respetando dicho formato original.

Si descargas varios archivos, o quieres descargarlos todos de golpe, la extensión los comprimirá en un archivo .zip para que el proceso sea más rápido y cómodo.

En el tercer apartado podremos descargar el contenido multimedia de la página web.

La cosa no acaba aquí

Por si parecían pocas funciones, CSS Peeper incluye un inspector manual de elementos, a través del cuál pulsando sobre los distintos elementos visuales de la página, obtendremos información sobre su tamaño, fuente, alineación, código de color, espaciado de letra...

El selector de CSS Peeper nos permite acceder a la información de cada uno de los elementos visuales de la página.

Como habrás visto a lo largo de las imágenes, una de las principales bondades de CSS Peeper es el mimo que tiene su interfaz, bien diseñada, con una línea moderna. Del mismo modo, la facilidad de uso de la herramienta es un punto a tener en cuenta, ya que realiza los procesos de forma automática, nos deja copiar y descargar con tan solo un click, y nos muestra la información ordenada y de forma clara.

La extensión está disponible para Google Chrome y todos aquellos navegadores que soporten sus extensiones, de forma gratuita. Su peso es de 280KB, y según la tienda de Google cuenta con más de 100.000 usuarios y una puntuación de 4.7 estrellas sobre 5.

Descargar | CSS Peeper