S-024 – Integración de Daisy UI + TailWind CSS en Svelte

He vuelto a realizar, otra vez, el ejemplo de la Gestión de Videos, que ya he realizado muchas otras veces.

En este caso, sólo he utilizado Daisy UI + Tailwind CSS, porque creo que es una de las combinaciones que más se utilizan en los desarrollos de framework de JavaScript y que mejor se ajustan al aprendizaje de los que se inician en ellos.

También, quería resolver el uso de «drawer» (ventanas emergentes que aparecen por los bordes de la pantalla), que incorpora Daisy UI.

Objetivo

Obtener un ejemplo claro, potente y sencillo de utilización de Daisy UI + Tailwind CSS, utilice los «drawer» de Daisy UI.

Deseo utilizar esta base para realizar ejemplos de WEB Components y Tailwind CSS es excelente para la realización de APP de escritorio que se adapten perfectamente al uso en móvil.

DEMO: https://fhumanes.com/daisy-svelte/

Si te interesa este artículo, sigue leyéndolo en este enlace.

Utilizar Web Components de Material Web

🌐 Qué es Material Web

Material Web es la implementación oficial de Material Design en forma de Web Components. A diferencia de versiones anteriores (Material para Angular, Material UI para React, etc.), esta librería está construida directamente sobre estándares del navegador, sin depender de ningún framework.

Esto significa que sus componentes:

  • funcionan en cualquier proyecto HTML
  • se integran en React, Svelte, Vue, Angular o Vanilla JS
  • no requieren compilación especial
  • son totalmente reutilizables y encapsulados
🧩 Por qué es importante para los frameworks modernos

✔️ 1. Un único código funciona en todos los frameworks

  • Material para Angular
  • Material Components for Web (MDC)
  • Material UI (React) mantenido por la comunidad
  • Variantes no oficiales para Vue, Svelte, etc.

Un único componente funciona en todos los frameworks.

✔️ 2. Los frameworks modernos ya están optimizados para Web Components

React, Vue, Angular y Svelte han ido añadiendo soporte nativo para Custom Elements. Hoy, Material Web se integra sin hacks ni adaptadores en:

  • Svelte 5 (mi caso)
  • React 18+
  • Vue 3
  • Angular 17+

✔️ 3. Es la forma más estable de usar Material Design

Material Web es la implementación oficial de Material Design.

🏢 Quién mantiene y evoluciona Material Web

Material Web está desarrollado y mantenido por el equipo oficial de Material Design de Google

Esto implica:

  • soporte continuo
  • actualizaciones alineadas con Material Design
  • accesibilidad certificada
  • rendimiento optimizado
  • documentación oficial y ejemplos reales

Además, el repositorio es público y activo:

  • Google revisa PRs
  • Google publica releases
  • Google marca la hoja de ruta

Esto lo diferencia de otras librerías UI que dependen de comunidades externas.

🚀 Por qué es relevante esta solución

Material Web es hoy:

  • la implementación más moderna de Material Design
  • la más compatible con cualquier stack
  • la más fácil de integrar en proyectos PHP, ASP, JAVA, Vanilla, etc.
  • una buena forma de aprender Web Components reales
🌀Pero……

Como resumen particular, creo que esta implementación es muy buena y aunque no tenga asegurado su futuro, que me gustaría mucho, es lo que suele ocurrir con todos los temas de implementación de soluciones.

DEMO: https://fhumanes.com/wc-material/ y https://fhumanes.com/wc-material/index2.html

Es muy sencillo la personalización de los colores y del UI, siendo además muy fácil de definir los campos y sus validaciones

Si estas interesado en este tema, sigue leyendo el artículo en este enlace.

S-023 – Construir Web Components con Svelte 5

 

Un Web Component es un elemento HTML personalizado, creado con estándares del navegador (Custom Elements, Shadow DOM y HTML Templates). Permite encapsular HTML + CSS + JS en un único bloque reutilizable, sin depender de frameworks.


¿Dónde se utiliza?

Funciona en cualquier entorno donde exista HTML:

  • Aplicaciones web clásicas (PHP, Java, .NET)
  • Frameworks modernos (Svelte, React, Vue, Angular)
  • CMS (WordPress, Drupal)
  • Apps híbridas (Electron, Ionic)
  • Sistemas grandes con equipos múltiples

¿Cómo se usa en HTML?

Una vez registrado el componente, usarlo es tan simple como:

<mi-componente titulo="Hola" modo="dark"></mi-componente>

El navegador lo trata como si fuera una etiqueta nativa.

Repositorios de Web Components gratuitos

  • Web Awesome — RECOMENDADO Un conjunto completo y bien documentado, de Web Components profesional y gratis. Próximamente ejemplos de este conjunto de componentes
  • WebComponents.org — El mayor catálogo público de Web Components. Reúne componentes de Google, Vaadin, Shoelace, FAST y cientos de desarrolladores independientes.
  • Shoelace — Biblioteca moderna de componentes UI (botones, modales, tabs, formularios). 100% Web Components, sin framework y altamente personalizable.
  • Vaadin Web Components — Componentes empresariales de alta calidad: grids, formularios, layouts, pickers. Muy usados en aplicaciones corporativas.
  • FAST Components — Componentes de Microsoft, rápidos, accesibles y con diseño adaptable. Ideales para apps modernas.
  • Elix — Componentes avanzados de UI (carousels, date pickers, menús complejos) con un enfoque en accesibilidad y rendimiento.
  • PatternFly Elements — Componentes creados por Red Hat para interfaces profesionales y dashboards.
  • Lion Web Components — Componentes minimalistas y accesibles creados por ING, perfectos para formularios y validación.

Objetivo

Una vez que ya sabemos cómo construir Aplicaciones en Svelte 5, analizar los cambios a realizar para desarrollar WEB Components con Svelte 5.

Las funcionalidades que deseamos comprobar:

  • Integrarse en páginas HTML de aplicaciones WEB, del lenguaje PHP o ASP, etc.
  • Validas para instanciarse varias veces en la misma página (ejemplo páginas de Grid).
  • Poder pasar parámetros desde la aplicación WEB al inicio de la ejecución.
  • Poder enviar información desde dentro a la página HTML a través de eventos.
  • Poder recibir información desde dentro (Svelte 5) como evento, para su tratamiento en página HTML.

DEMO: https://fhumanes.com/pc_001

La imagen muestra un ejemplo de aplicación hecha con PHPRunner con (1) una app de Svelte 5 integrada y con (2) un Web Components hecho en Svelte 5.

Si estás interesado en el artículo,  sigue leyéndolo en este enlace.

Plugins jQuery vs Web Components

Presente y futuro de dos formas de extender la web

Durante más de una década, los plugins de jQuery (los actuales de PHPRunner) fueron la forma dominante de extender la web con componentes reutilizables. Desde sliders hasta calendarios, pasando por validadores de formularios, jQuery ofrecía una API sencilla y un ecosistema inmenso.

Pero la web ha evolucionado. Hoy, los Web Components representan un estándar nativo, moderno y sostenible para crear componentes reutilizables sin depender de frameworks.

Este artículo compara ambas tecnologías desde una perspectiva técnica y práctica, y analiza cuál es su papel en el presente y hacia dónde se dirige el futuro.

1. Qué son los plugins de jQuery

Los plugins de jQuery surgieron como una forma rápida y sencilla de encapsular funcionalidad en la época en la que:

  • el DOM era inconsistente entre navegadores
  • no existían módulos ES
  • no existían clases nativas
  • no existía Shadow DOM
  • no existían Custom Elements

Un plugin típico:

(function($){
    $.fn.miPlugin = function(options){
        return this.each(function(){
            // lógica del plugin
        });
    };
})(jQuery);
Ventajas históricas
  • API extremadamente simple
  • Ecosistema enorme
  • Resolvían problemas reales de compatibilidad
  • Fácil de integrar en cualquier web
Limitaciones actuales
  • Dependen de jQuery (carga extra)
  • No aíslan estilos ni HTML
  • No son reutilizables fuera del DOM global
  • No funcionan bien en arquitecturas modernas (SPA, SSR, microfrontends)
  • No aprovechan capacidades modernas del navegador

2. Qué son los Web Components

Los Web Components son un estándar nativo del navegador, compuesto por:

  • Custom Elements
  • Shadow DOM
  • HTML Templates
  • ES Modules

Permiten crear componentes reutilizables sin frameworks:

class MiComponente extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<button>Hola</button>`;
    }
}
customElements.define('mi-componente', MiComponente);

Ventajas modernas
  • No requieren librerías externas
  • Encapsulan HTML, CSS y JS
  • Funcionan en cualquier framework (React, Vue, Angular, Svelte, Java, ASP,  PHP, WordPress…)
  • Son estándar W3C
  • Son ideales para microfrontends y aplicaciones híbridas
  • Funcionan igual en desarrollo y producción
Limitaciones
  • API más compleja que jQuery
  • No todos los desarrolladores están familiarizados
  • El Shadow DOM puede complicar estilos globales
  • Requieren build tools si se usan con frameworks modernos (Svelte, React, etc.)

3. Comparación directa

Criterio Plugins jQuery Web Components
Dependencias jQuery obligatorio Nativo, sin dependencias
Encapsulación Ninguna Shadow DOM
Reutilización Solo en DOM global En cualquier framework o web
Rendimiento Medio Alto
Compatibilidad futura En declive Estándar W3C
Mantenimiento Ecosistema abandonado En crecimiento
Integración Fácil en webs antiguas Fácil en webs modernas
Soporte a largo plazo No garantizado Garantizado por navegadores

4. Presente: ¿qué se usa hoy?

En webs antiguas o legacy

Los plugins jQuery siguen existiendo porque:

  • ya están integrados
  • funcionan
  • migrar cuesta tiempo

Pero no se crean plugins nuevos.

En webs modernas

Los Web Components están creciendo rápidamente, especialmente en:

  • aplicaciones híbridas (PHP + JS moderno)
  • microfrontends
  • sistemas de diseño (Design Systems)
  • componentes compartidos entre equipos
  • integraciones con CMS (WordPress, Drupal, Prestashop)
  • frameworks modernos (Svelte, React, Vue)

5. Futuro: ¿qué dominará?

La tendencia es clara:

jQuery → mantenimiento mínimo
Web Components → estándar dominante

Los navegadores ya soportan Web Components de forma nativa, y los frameworks modernos (Svelte, React, Vue, Angular) pueden generar Web Components como output final.

Esto significa:

  • un componente creado hoy en Svelte 5 puede usarse en cualquier web dentro de 10 años
  • un plugin jQuery creado hoy probablemente no sobrevivirá

6. Conclusión

Los plugins de jQuery fueron una solución brillante para su época, pero hoy pertenecen al pasado. Los Web Components representan el presente y el futuro de los componentes reutilizables en la web.

La transición no es solo tecnológica: es un cambio de mentalidad hacia componentes nativos, encapsulados, interoperables y duraderos.

Para proyectos nuevos, la recomendación es clara:

Construir componentes como Web Components, idealmente usando un framework moderno como Svelte 5 para simplificar el desarrollo.

Estar atentos a las novedades sobre este tema
En los siguientes artículos os mostraré cómo estos nuevos componentes se pueden crear con Svelte 5 y cómo los podemos utilizar en PHPRunner y por extensión, en cualquier otro sistema que genere páginas HTML, JavaScript y CSS.

Guía para construir Plugins de PHPRunner
He creado una guía para construir los plugins de PHPRunner. Está ubicada en GITHUB, donde están todos los plugins que yo os facilito de forma gratuita.

S-022 – Ordenación de Jerarquías en árbol

Otra solución que tenía en el ámbito del lenguaje de PHP era la ordenación de jerarquías tipo árbol.  Es muy habitual contar con esta organización en tareas de un Gantt, estructura de personal en una compañía, etc., por lo que requerimos de un algoritmo para obtener esa jerarquía a partir de datos planos donde sólo se dispone del registro «padre» para montar esa estructura de árbol.

Objetivo

Disponer de un algoritmo en JavaScript que facilite un estructura jerárquica partiendo de registros que identifican cuál es el registro «padre».

DEMO: https://fhumanes.com/my-jerarquia/

Los campos con fondo amarillo son calculados.

(1) .- Es el orden de los registros según su estructura y su fecha de inicio.
(2).- Identificador de orden. Es el orden, teniendo en cuenta el nivel de dependencia.
(3).- Es el nivel de profundidad de la estructura para ese registro.
(4).- Indica si es un nodo maestro, que tiene registros dependiente de él.

Si te interesa esta información sigue leyendo el artículo en este enlace.