Todas las entradas de: admin

S-026 – Crear DashBoard con ApexChart en Svelte

Aquel que me haya seguido desde 2017, sabrá que me gusta mucho la solución de AnyChart, pero que ésta es de pago, aunque los que trabajamos con PHPRunner, la licencia de PHPRunner incluye una licencia de AnyChart para integrar gráficos en sus desarrollos.

Este producto ApexCharts, es también un producto de muchas posibilidades y de excelente calidad, que dispone de una licencia Community, por lo que podremos utilizarlo en casi todas las posibilidades.

Aparte de analizar los tipos de gráficos, sus posibilidades, etc., se quiere probar su funcionamiento en Svelte 5 con Runas y su integración con TailWind CSS y Daisy UI.

Objetivo

Construir un ejemplo de aplicativo donde integremos ApexCharts, TailWind CSS y Daisy UI, y analizar las posibilidades de construcción de DashBoard.

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

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

S-025 – Creación componente DataGrid con Daisy UI

Una de las cosas que se repiten muchísimas veces es disponer de un «DataGrid», para mostrar y navegar por los elementos de una tabla.

En los ejemplos hasta ahora mostrados, he utilizados soluciones hechas 100% con código Svelte 5 y en otras ocasiones el DataGrid de alguna librería como las de SVAR. He intentado utilizar ApexGrid, como DataGrid general y reutilizable para «todo», pero me he encontrado que sólo me funcionaba en inglés y no he sido capaz de ponerlo en otros idiomas.

Objetivo

Partiendo del DataGrid hecho con código Svelte 5 y utilizando Daisy UI, realizar un componente de DataGrid que pueda reutilizar en los proyectos de cara a simplificar,  optimizar y minimizar el código necesario para disponer de DataGrid para las tablas de un proyecto.

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

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

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.

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.