Este ejercicio era algo que quería emprender hace mucho tiempo. Los componentes de SVAR, me gustan, me parecen bastantes completos, creo que pueden ser muy eficientes para escribir código rápidamente y que también pueden ser muy útiles para aquellos que empiezan en el desarrollo, porque hay muchas que hacen por tí y que suelen estar muy bien hechas.

Ahora bien, para mí, tiene una definición de temas que es bastante «oscuro», ya que no disponen de una documentación sencilla y completa, para que podamos ajustar estos temas a nuestra necesidades o gustos.

Al haber terminado el ejemplo de Tailwind CSS y Daisy UI, ver la facilidad que ofrecen a los desarrolladores para los ajustes de UI de las aplicaciones, pensé que una solución de ese tipo requería los componentes de SVAR.

Objetivo

Integrar Tailwind CSS + Daisy UI + SVAR, de cara a mejorar la funcionalidad de personalización del UI de los desarrollos hecho con los componentes de SVAR.

DEMO: https://fhumanes.com/movie-svar/

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

Después de múltiples ejemplos, integrar las mismas soluciones que integré en PHPRunner (aplicaciones Web), me he cuestionado si estoy utilizando Svelte adecuadamente y sobre todo, con los productos más habituales que los programadores «nativos» de Svelte, utilizan.

De ahí surgió la utilización de estos productos:

• Para interface de aplicación, UI.- He seleccionado Tailwind CSS, que prácticamente es un estándar y que es utilizado masivamente por todos (mucho más que Bootstrap) y se complemente con Daisy UI que facilita el uso de TailWind CSS y nos dota de Temas, componentes para la iteración con el usuario, etc. Muy, muy importante y excelente solución, que nos soluciona la escritura de los componentes de iteración con el usuario.
• Para la lógica y validación de los formularios.- Los productos seleccionados no tienen tanta difusión, pero son un buen ejemplo del ecosistema de soluciones que hay en el entorno de Svelte.
  Felte, nos soluciona la arquitectura de los formularios y Zod, nos facilta la definición de esquemas de validación de los datos de entrada de los formularios.

Objetivo

Repetir el proyecto de Bootstrap Svelte, con este kit de productos más propio del ecosistema de Svelte y verificar las bondades de utilización de las soluciones más habituales de los componentes de Svelte.

Se mantiene la aplicación de Back-End desarrollada en PHP SLIM4.

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

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

Este componente lo he utilizado con PHPRunner (aplicación Web) y para las aplicaciones de Gestión en una oficina es una solución muy potente, pues se asemeja a una tabla Pivot de Excel, pero con muchas ventajas:

• Recupera los datos de la base de datos de forma inmediata y su visualización es muy potente.
• Desde la propia visualización se puede realizar actualizaciones en los registros, de tal forma que la gestión es mucho más rápida y dinámica.

Como en otras librerías, se ha hecho 2 integraciones:

• CDN – Utilizando la versión de librería de JavaScript.
• NPM – Utilizando la versión de módulo de JavaScript.

Objetivo

Disponer de una solución potente de Pivot Grid para el entorno de Svelte y aprovechando el conocimiento previo, verificar que la solución de DevExpress, aunque en la web no lo indiquen, se puede utilizar perfectamente con Svelte 5.

DEMO

• NPM – https://fhumanes.com/pivotgrid-svelte/
• CDN – https://fhumanes.com/pivotgrid2-svelte/

Si te interesa este tema, sigue leyendo el artículo en este enlace.

Quien tenga conocimiento de mis artículos del Blog, recodará que tengo algunos artículos sobre el uso del Calendario y Gestor de Recursos de DayPilot. Es un producto muy utilizado en los desarrollos Web y dispone de características muy bonitas y prácticas. Desde mi punto de vista, lo considero con mejor UI y características que FullCalendar.

Aunque dispone de una versión Open Source, esta versión es muy, muy reducida y no la he tenido en cuenta para esta integración, ya que  si necesitamos esta solución en un proyecto, creo que se puede pagar una licencia del mismo, dada la calidad que va a dar al proyecto.

Objetivo

En la web del fabricante no se indica que se puede utilizar con Svelte, pero veremos en el ejemplo que podemos utilizar la web Web JavaScript, para los desarrollos de Svelte.

Como objetivo, el ejemplo debe incorporar:

• Funcionamiento en Svelte 5 y utilización en código reactivo.
• Definición de calendario de día, semana y mes, disponiendo de una guía de 3 meses para poder navegar entre fechas.
• Etiquetado y coloreado de actividades.
• Operación de navegación para reposición de los datos (ahora son fijo, pero se dispone del ejemplo para hacer la petición de las acciones entre fechas).
• Evento de clic en una actividad o obtención de los datos de la acción. (para operaciones CRUD de actividad).
• Se ha personalizado para español, así se facilita la adaptación a otros idiomas.

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

Si te interesa este tema, sigue leyendo el artículo completo en este enlace.

Si deseas disponer de un entorno completo para hacer aplicaciones, necesitas tener resuelto cómo implementar «un calendario» para agenda de citas, reuniones, etc. He estado esperando que SVAR UI publique su alternativa, pero hasta este momento, no lo ha hecho y por ello he trabajado con más detalle la solución de FullCalendar que del entorno del que venimos (PHPRunner y WEB), es el más habitual y tenemos experiencia en su utilización.

Este tema fue tratado en la guía S-004 aunque en dicha guía tuve muchas dificultades en su uso, quizá por el enfoque que me ofreció la IA en ese momento y en esta versión es un ejemplo mucho más completo, con todas las funciones aplicables, y desde mi punto de vista, muy bien resueltas.

Objetivo

Disponer de un ejemplo de Calendario y de «Timeline» de Recursos, con la biblioteca de Jacascript FullCalendar. El ejemplo incluye:

• Vista de calendario de diario, semana, mes y año (multimeses) y de Recursos de diario, semana y mes.
• Ajuste del producto para el Español (fácil adaptación a cualquier otro idioma).
• Disponibilidad de Tooltip en la actividades.
• Acción de clic sobre una actividad y control sobre los datos de la actividad.
• Funcionamiento de la reactividad en el producto.

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

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.