Todas las entradas de: admin

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.

Guía 99 – Crea un Plugin PHPRunner desde un Web Components

Como había indicado en el artículo anterior, he creado un plugin de View y de Edit, desde un Web Components de Awesome, en concreto del «Switch».

Hago un pequeño resumen de lo que hasta ahora hemos visto:

Y con este artículo, completo el ciclo, pues lo que nos quedaría son ejemplos concretos o aplicación de lo que hemos aprendido.

Objetivo

Creación de un plugin  de PHPRunner (View y Edit) de un Web Components de tercero (Awesome).

DEMO: https://fhumanes.com/wc_test2/

Para realizar las pruebas de integración realizar las operaciones CRUD, tanto de página completa como en INLINE.

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

Guía 98 – Utilizar Web Components de Awesome en PHPRunner

Este artículo muestra cómo de sencillo es utilizar Web Components de terceros en la parte de visualización de cualquier página.

La parte de edición, para ser integrada en PHPRunner es más compleja, pero en el siguiente artículo vamos a realizar algunos ejemplos, aunque soy consciente de que para los usuarios que son noveles en PHPRunner va a ser más difícil, si no hay alguien que le facilita la labor, escribiendo plugins de PHPRunner, que facilita su utilización. Voy a realizar un ejemplo, para ver si alguien se anima a construirlo para el colectivo de usuarios, porque yo no dispongo de tiempo para hacer esta labor.

Los Web Components que voy a utilizar el el ejemplo son los de Awesome. Seguro que hay otros muchos, pero estos, tienen buena documentación y son sencillos de utilizar.

Objetivo

Utilizar web components de Awesome para mostrar en un ejemplo básico cómo se pueden utilizar estos para variar el interface / UI de usuario de una aplicación de PHPRunner. En este caso vamos a modificar la visualización de contenidos.

Antes de entrar en la codificación, se ha hecho un ejemplo de HTML, para ver la sencillez de utilización de estos componentes. Los podéis revisar y para ver qué se ha escrito, podéis «ver el código fuente de la página» para que observéis lo simple que es.

DEMO: https://fhumanes.com/web_components/

La integración con PHPRunner se ha hecho cambiando la visualización de 2 campos:

  • Campo «Status», que es un campo de tipo checkBox y se muestra cómo Switch
  • Campo «Images», que muestra como Carrousel de miniaturas y de tamaño completo.

DEMO: https://fhumanes.com/wc_test1/

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

Guía 97 – Utilizar WEB Components en PHPRunner

En artículos anteriores hemos tratado:

En este artículo se explicará cómo utilizar los WEB Components en desarrollos PHPRunner.

Objetivo

  • Cómo podemos  utilizar esto WEB Components en desarrollos en PHPRunner.
  • Cómo construir el Backend SLIM4 – PHP, para comunicarnos con las variables de sesión del desarrollo PHPRunner y así poder utilizar la identificación del usuario para los 2 procesos de PHP (PHPRunner y SLIM4).

DEMO: https://fhumanes.com/pc_001

(1) es la integración de una App de Svelte 5 en PHPRuynner
(2) es la integración de un WEB Components hecho en Svelte 5 en PHPRunner.
(3) es la consola del navegador y las trazas que ven dejando los ejemplos para que se vean su funcionamiento.

Si estás interesado en este artículo, sigue leyéndolo 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.