MetsuOS

Construyendo la plena inclusión a través del videojuego

Curso Estructura de CSS Dinámico con Efemérides 🟡③

Curso Estructura de CSS Dinámico con Efemérides

KB

Arquitectura de Sistemas Mutables, Accesibilidad Universal y Automatización

Este curso propone un viaje técnico desde la rigidez de una estructura base inamovible hasta la fluidez estética de las efemérides. Aprenderemos a diseñar interfaces que "recuerdan" fechas especiales, mutando su piel sin comprometer la semántica ni la accesibilidad para ningún usuario.

Módulo 1: Filosofía y Análisis de Sistemas Mutables

CSS con Efemerides Lección 1 - El concepto de diseño por efemérides - El equilibrio entre identidad fija y narrativa visual

CSS Efemerides Lección 1 - El concepto de diseño por efemérides - El equilibrio entre identidad fija y narrativa visual.

Esta lección explora la metamorfosis de la interfaz: cómo dejar de concebir el diseño como un objeto estático para entenderlo como un ente cronológico. Un sistema que respira y reacciona al tiempo, pero que mantiene una estructura tan sólida que la usabilidad jamás se ve comprometida.

Continua leyendo en ... CSS con Efemerides Lección 1 El concepto de diseño por efemérides El equilibrio entre identidad fija y narrativa visual 🟡③

CSS Efemerides Lección 2 Auditoría técnica de Metsuke.com: Análisis crítico del sistema actual (JS + CSS Overwrite)

CSS Efemerides Lección 2 Auditoría técnica de Metsuke.com: Análisis crítico del sistema actual (JS + CSS Overwrite).

En esta lección vamos a sumergirnos en una auditoría técnica detallada del sistema que se usa actualmente en Metsuke.com, basado en JavaScript (JS) para la lógica y sobrescrituras de CSS para los estilos. El foco está en evaluar sus puntos fuertes y débiles, especialmente en cómo maneja los cambios visuales temporales, como efemérides (fechas especiales como aniversarios, eventos históricos o celebraciones estacionales).

Continua leyendo en CSS con Efemérides Lección 2 Auditoría técnica de Metsuke.com Análisis crítico del sistema actual (JS + CSS Overwrite) 🟡③

CSS Efemerides Lección 3 La

CSS Efemerides Lección 3 La "Estructura Inmune" Definición de los pilares del layout que garantizan la usabilidad frente al cambio.

La Estructura Inmune es el "esqueleto de titanio" de una web diseñada para el cambio constante. En un entorno de Efemérides, donde un sitio puede cambiar de un diseño minimalista (Día de la Paz) a uno barroco y saturado (Carnaval) en 24 horas, la estructura debe garantizar que los órganos vitales del sitio (navegación, lectura y conversión) no se vean comprometidos por la "infección" estética.

Continua leyendo en ... CSS Efemerides Lección 3 La "Estructura Inmune" Definición de los pilares del layout que garantizan la usabilidad frente al cambio 🟡③

  • Lección 4: El ciclo de vida de una efeméride: Flujo lógico desde el dato cronológico hasta el renderizado final.

Módulo 2: El Ecosistema de Preprocesadores (Decisión Técnica)

Módulo 3: Metodologías y Accesibilidad Universal

Módulo 4: Design Tokens y Diccionario de Diseño

Módulo 5: Lógica de Programación en CSS

Módulo 6: Implementación Detallada por Elementos (Enciclopedia HTML & A11y)

Análisis exhaustivo de la estructura base, variación temática y requisitos WCAG para cada etiqueta.

Módulo 7: Subproyecto - El Generador Automático de CSS

Módulo 8: Elementos Visuales, Rendimiento y Despliegue

Referencias Bibliográficas

WIP Revision de fuentes bibliograficas

Fuentes que apoyan este enfoque

  1. W3C (2023). 🟡③🌐 .- Estándar técnico detallado que extiende WCAG 2.1 con nuevos criterios para mejorar la accesibilidad en dispositivos móviles y para personas con discapacidades cognitivas o de visión baja.
  2. Curtis, N. (2016). 🟡③🌐 .- Artículo técnico sobre la creación de lenguajes de diseño compartidos y la importancia de la nomenclatura funcional en sistemas modulares para mejorar la colaboración entre equipos. (enlace de referencia no disponible)
  3. Da Silva, T. (2018). 🟡③🌐 .- Vídeo educativo que muestra la implementación técnica de tokens de diseño utilizando Sass y Style Dictionary para gestionar variables visuales de forma escalable. (enlace de referencia no disponible)
  4. WebAIM. 🟡③🌐 .- Guía práctica exhaustiva sobre principios de accesibilidad por teclado, cubriendo indicadores de enfoque, orden de navegación y pruebas de interacción para usuarios con discapacidades motoras.

Fuentes que refutan o cuestionan este enfoque

  1. Heydon Pickering. 🟡③🌐 .- Repositorio de patrones de diseño algorítmico que utiliza CSS moderno para crear interfaces resilientes y escalables sin depender de breakpoints fijos.
  2. Google Chrome Developers (2023). 🟡③🌐 .- Conferencia técnica sobre la evolución de CSS nativo (nesting, variables, container queries) y su capacidad para ofrecer las funcionalidades que antes requerían preprocesadores. (enlace de referencia no disponible)
  3. Nielsen Norman Group. 🟡③🌐 .- Artículo fundamental sobre las 10 heurísticas de usabilidad, destacando cómo el cumplimiento de estándares y la consistencia reducen la carga cognitiva del usuario.
  4. Reid, L. (2021). 🟡③🌐 .- Ponencia sobre los riesgos de accesibilidad asociados al diseño dinámico y los cambios bruscos de contexto visual que pueden desorientar a usuarios con discapacidades. (enlace de referencia no disponible)

One More Thing

Un escenario de retrocomputación del siglo 24

¡Desbloquea el poder de MetsuOS y descubre que la privacidad y la seguridad son la clave para desencadenar tu verdadero potencial en línea!

Contenido registrado en Safe Creative

Logo Safe Creative
¡Usa el código de promocional 7ZYM4Z y ahorrate unos eurillos en tu suscripcion de Safe Creative!

MetsuOS Needs You!

Apoyanos en este proyecto difundiendolo en tus redes, o mejor, haznos una donación a la cuenta paypal para poder dedicar más tiempo y recursos a el. No olvides comentarnos que parete te interesa más junto con tu donación.

En este momento, además de mantener los servicios, estoy centrado en crear la siguiente iteración del software que me permite hacer todo esto y creando una biblioteca personal física para poder contrastar contenido.

Sobre el sistema de validez de un contenido en MetsuOS

Empezando a incorporar los niveles de validación de un contenido (también llamada sabiduría o niveles de conocimiento) ⚫🔴 🟡 🟢 🔵⚪ ¿Qué són?

Sobre la categorización de los tipos de conocimiento

La Metsukeología (de Metsuke vision global y logos conocimiento) es la ciencia que estudia el conocimiento como un conjunto potencial de conocimiento del que podemos obtener, procesar o percibir partes concretas dentro de un marco contextual específico, y cuyo contexto general real está muy por encima de lo que somos capaces, como especie, de percibir, procesar e integrar de forma completa (definición en progreso).

La Metsucología (de Metsu aniquilación - en este contexto en forma de colapso - , logos conocimiento) es la ciencia que estudia como extraemos verdades percibidas - colapsadas - como conocimiento desde nuestra perspectiva real (tanto epistemológico como gnoseológico) al tomar una parte específica del conocimiento metsukeológico potencial enmarcado en un contexto concreto, obligando a colapsar el conocimiento potencial en conocimiento específico (definición en progreso).

Mas sobre el contexto

DISCLAIMER: Mi consideración de anticientífico respecto al consenso científico es una hipotesis de trabajo propia, que supone que toda asignación de validez, incluso aquella derivada de la conclusión por acumulación de evidencia NO debe ser supeditada a debate, ni acuerdo, debe ser algo probabilistico sin intervención del ego humano. Podría estar equivocado y, en este punto, es donde se aplicaría entonces ese mismo consenso que ahora considero no valido (incluso dañino)

Existen indicadores para algunas cuestiones adicoinales como los siguientes:

Cuando hablamos de un contenido que incluye un texto que hace referencia a otro.

También aplicaremos el Sistema de fiabilidad de fuentes y credibilidad de contenidos de la OTAN 🔴②, este sistema incluye una valoración de la fiabilidad de la fuente de A a F (siendo A la de mayor fiabilidad) y una varloración de credibilidad del contenido de 1 a 6 (siendo 1 la mayor credibilidad).

En MetsuOS la agregaremos al final uniendo amos valores como si fuera una coordenada. Por ejemplo: ⚫①-D4 o 🟡③-B2. Esto ayudarña a contextualizar la información sobre la solidez del conocimiento al que se hace referencia en cada momento.

Hay que tener en cuenta que, cuando hay elementos subjetivos o parcialmente subjetivos, el punto de referencia seré yo mismo. Quizá más adelante pueda objetivizar esto más (seria lo deseable), pero en tanto no tenga herramientas que me lo permitan, debo ceñirme al principio de honestidar intelectual, y esperar que mis sesgos dañen lo menos posible la información (en parte este es el nudo gordiano que pretendo resolver, y por ello es dificil resolverlo a priori).

Así de forma resumida, podríamos decir que esta definición es nivel 🔴② (Rojo2 xD) ¿Crees que me dejo algo? Si es así por favor ayudame a mejorarlo contactándome a través de X (Twitter) en mi cuenta, @metsuke 🌐

Consulta la versión completa de la descripcion en ⚫🔴🟡🟢🔵⚪ (🔴②) Un poco más de detalle