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 (
o
, que no dicen claramente lo que representan.
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.
El resultado: tenemos un HTML estancado, anticuado y que no termina de cumplir bien con su propósito original
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?
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…
- 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
-
¿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.
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
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
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).
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
–
La noticia
«El HTML está muerto», según este programador, y estas son las razones (también habla de cómo podríamos resucitarlo)
fue publicada originalmente en
Genbeta
por
Marcos Merino
.
México tiene una jornada laboral de 48 horas y un problema de exigencia al presentismo que lleva a muchas personas a echar muchas más que estas horas. En primavera se hacía público que de cada cuatro mexicanos trabaja más de 48 horas a la semana.
Ya hemos visto cómo es el país de la OCDE que más horas trabaja aunque en la práctica eso no se traduzca a productividad porque los trabajadores agotados no rinden bien como demuestran infinidad de estudios y la propia realidad.
Ahora que por fin el Gobierno de México se pone serio para lograr llegar a implementar una jornada laboral de 40 horas como tantos otros países del mundo, un grupo de empresarios reclama que, en ese caso, sea sin descansos.
Advertencias como en España
La Concanaco, Confederación de Cámaras Nacionales de Comercio, Servicios y Turismo, plantea que se permita el pago por hora efectivamente trabajada, que las 40 horas no incluyan pausas y que se abra la puerta a la flexibilidad voluntaria entre empleador y trabajador para acordar jornadas de 48 horas si así lo desean, como recoge Xataka.
Fabian Octavio De La Torre, presidente, ha hecho un reel de la mano de la Concanaco diciendo que aunque ahora se pagan 48 horas, se acaban trabajando 45 y, con pausas activas, solo se producen 42. Según él, si la jornada se reduce a 40, “serían apenas 34 horas productivas”.
Igual que sucede en España con la patronal cuando se habla de la reducción de jornadas laborales y también con el sector servicios, Concanaco ya ha hablado varias veces de que ve inviable implementar este cambio, aunque muchos sean los países del mundo que trabajan 40 horas o incluso menos, y mantienen economías muy fuertes.
Ya hace unos meses, en un reporte de El Financiero, su presidente, Octavio de la Torre, advirtió que la iniciativa implicaría que los empresarios terminen pagando 48 horas de salario por solo 34 horas efectivas de trabajo.
Además, El Sol de Puebla ha publicado que líderes empresariales de ese estado consideran que hasta un 5% de las empresas locales podrían cerrar si la reforma no se adapta a las realidades del mercado, según sus palabras.
No hay que olvidar que cuando en España se ha ido subiendo el salario mínimo (varias veces en los últimos años de la mano de Yolanda Díaz como Ministra de Trabajo), los empresarios alertaron en muchas ocasiones cómo se iban a arruinar muchas empresas… y en la práctica el país ha logrado reducir el paro como nunca antes desde la crisis de 2008.
La productividad y las horas trabajadas
Quienes más horas se pasan en la oficina de la OCDE son las personas de México y Colombia, este último registra una media de 2.400 horas. Es decir, alrededor de 1.100 horas más que un empleado germano.
Sin embargo, mirando la productividad, en el fondo de la clasificación de la OCDE se encuentra México, donde una hora de trabajo de media aporta 22,2 dólares (18,7 euros) a la economía, prácticamente cinco veces menos que en Irlanda (el país líder en el listado de productividad).
Vía | Xataka
Imagen | Foto de Howen en Unsplash
En Genbeta | Dividir un puesto de trabajo entre dos personas para tener más tiempo libre: pasa desde hace tiempo y hay webs que lo promueven
–
La noticia
Un grupo de empresarios mexicanos pide que las semanas de 40 horas no tengan descansos: lo ven «inviable»
fue publicada originalmente en
Genbeta
por
Bárbara Bécares
.
