S-012 – Desarrollo COMPLETO de aplicación Shopping

Llevo mucho tiempo sin publicar ningún artículo nuevo. Creo que este os va a gustar mucho, eso espero, porque estoy muy contento con el resultado.

Es una aplicación completa, Front-End en Svelte 5 y Back-End en PHP SLIM 4. He mejorado en mi codificación, en ambas plataformas, y el resultado es más legible, mantenible  y sencillo.

La APP es la misma que hice en PHPRunner, después la hice en REACT y ahora está hecha en Svelte 5.
Me gusta utilizar este ejemplo por:

  • Está orientada a que funcione en el Móvil y en el PC.
  • Tiene gestión de usuarios y de roles.
  • Maneja ficheros (imágenes), texto, password, números, fechas, check, etc. Gestiona GRID y FORMS.
  • Controla las sesiones en el server y estas sesiones tienen un tiempo de caducidad, por no utilización de la aplicación.
  • El modelo de datos es sencillo.
  • Y la gestión de la aplicación, que no es relevante en el ejercicio, es muy simple y facilita la compresión rápida para su uso.

Objetivo

Disponer de un ejemplo completo en Svelte 5 y PHP SLIM, con la utilización de las guías publicadas, que sirva como base para las personas que deseen incorporarse al desarrollo de aplicaciones en Svelte 5.

DEMOhttps://fhumanes.com/my-shopping/

Están los usuarios admin/admin y usuario/usuario. Ruego que no destruyáis los ejemplos para que otros puedan utilizarlos y os propongo que os registréis para tener un «ambiente» particular para vosotros. En el email, podéis utilizar el vuestro o poner uno ficticio. Si es el vuestro recibiréis un email, para que veáis que se puede hacer «TODO», desde la parte del server.

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

Nuevo plugin PHPRunner -Sqlcodemirror5-

Un desarrollador ha realizado una solución para generar informes en Excel y para esa generación incluye sentencias de SQL para acceder a los datos. Para la representación de esos SQL necesitaba un plugin para resaltar la sintaxis y me ha solicitado este plugin que una vez terminado, pongo a la disposición de todos para que el que lo necesite lo pueda descargar e instalar.

Podéis descargarlo de la página de los Plugins.

S-010 – Upload de ficheros en Svelte + SVAR + Reducción tamaños

Para la APP de «Compra», similar a la que hice en REACT y que llamaré «Shopping» necesitaba resolver cómo subir ficheros en Svelte5 + componentes de SVAR, y eso he hecho, hacer el ejemplo con componentes de SVAR para que en los formularios creados con EDITOR de SVAR, pueda incluir ficheros entre sus campos.
He aprovechado, y he incluido la funcionalidad de reducción de las imágenes en el navegador, de tal forma que la imagen que suba al server ya tiene todos los ajustes que necesita.

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

Si trabajáis con los componentes de SVAR (os lo recomiendo), esta solución tiene el «detalle» de la creación del componente para los UPLOAD, ya que no es un tipo estándar del CORE de SVAR, por eso la solución tiene 2 ficheros App.svelte y fileField.svelte.

Si os interesa este tema y deseáis tener los fuentes, accede a la totalidad del artículo.

S-010 – Upload de ficheros en Svelte – actualización 10/09/2025

Para completar un poco más este artículo, creo que es necesario la realización de la reducción y compresión , si se considera necesario, de la imagen antes de llegar al servidor.

Si comprobáis el tamaño de las fotografías que hace vuestro móvil, veréis que son enormes, más de 2MB de tamaño y de 4000 px de ancho, prácticamente, imposibles de tratar en las aplicaciones de gestión y asegurar el funcionamiento de forma rápida.

Este ejemplo lo que hace es reducir la imagen y presentarla, antes de enviar al servidor, por lo que la gestión es mucho más rápida que hacer todo esto apoyado en la gestión del server.

DEMO: https://fhumanes.com/my-resizeImage-app/

El código es JavaScript, por lo que demás de funcionar en Svelte, podría funcionar en cualquier otro entorno, incluyendo PHPRunner.

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

S-011 – Desarrollo de aplicaciones Svelte5 multi-idiomas

He solicitado a una IA que me describa las ventajas y los inconvenientes de desarrollar aplicaciones Multi-idiomas.

Es muy importante que tenga esta arquitectura aunque inicialmente sólo tengas un idioma.

Ventajas de desarrollar aplicaciones multi-idioma

1. Accesibilidad global

  • Permite que usuarios de distintas regiones accedan y comprendan la aplicación sin barreras lingüísticas.
  • Aumenta el alcance potencial del producto sin necesidad de rehacer la interfaz.

2. Mejora de la experiencia de usuario

  • El usuario se siente más cómodo y valorado al interactuar en su idioma nativo.
  • Reduce la fricción y mejora la retención.

3. Escalabilidad sin dolor

  • Si se diseña con un sistema de internacionalización (i18n) desde el principio, añadir nuevos idiomas es cuestión de incorporar archivos de traducción, sin tocar el código base.
  • Svelte5, con su enfoque modular, permite que los textos estén desacoplados del componente, facilitando el cambio de idioma sin alterar la lógica.

4. Ventaja competitiva

  • En mercados saturados, ofrecer soporte multilingüe puede ser el factor diferenciador.
  • Mejora la percepción de marca como inclusiva y profesional.

5. Cumplimiento normativo

  • En algunos países, ofrecer contenido en el idioma oficial es obligatorio para ciertos sectores (educación, salud, administración pública).
Inconvenientes (¡pero todos tienen solución!)

1. Mayor esfuerzo inicial

  • Requiere planificación: definir estructura de archivos, claves de traducción, y lógica para cambiar idioma.
  • Pero si se hace bien desde el principio, el esfuerzo se amortiza rápidamente.

2. Gestión de traducciones

  • Necesitas mantener consistencia entre idiomas, revisar calidad lingüística y actualizar textos en paralelo.
  • Solución: usar herramientas como i18next, locize, o incluso sistemas propios con JSONs bien estructurados.

3. Contenido dinámico

  • Los textos generados por usuarios o APIs externas pueden no estar traducidos.
  • Solución: marcar claramente qué contenido es traducible y cuál no, o usar traducción automática como apoyo.

4. SEO multilingüe

  • Si la app es pública, hay que cuidar que los motores de búsqueda indexen correctamente cada idioma.
  • Solución: usar rutas específicas por idioma (/es, /en, etc.) y etiquetas hreflang.
Buen diseño = cambios sin dolor

Si desde el inicio se estructura la app con un sistema de claves de traducción (por ejemplo: t(‘welcome_message’)), cambiar el idioma es tan simple como cargar otro archivo de traducción. No se toca el HTML, ni los componentes, ni la lógica. Solo se cambia el contexto lingüístico.

En Svelte5, esto se puede lograr con:

  • Stores reactivos para el idioma actual.
  • Archivos .json por idioma.
  • Componentes que consumen las traducciones sin acoplarse al idioma específico.

Objetivo

Disponer de una solución ara desarrollos multilingües, con costes muy reducidos y fáciles de entender y de aplicar. Debe contemplar los temas de fechas y edición de números.

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

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

Blog personal para facilitar soporte gratuito a usuarios de React y PHPRunner