Todas las entradas de: admin

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.

S-010 – Upload de ficheros en Svelte

En la revisión de temas necesarios para hacer una aplicación siempre existe la necesidad de cargar (upload) ficheros desde el Navegador.

Existen varias estrategias para enviar archivos desde el navegador al servidor, cada una con sus ventajas y desafíos. Las más comunes son:

1. Envío tradicional con formularios HTML (multipart/form-data)
  • El navegador gestiona automáticamente la codificación del archivo.
  • El servidor (como PHP) recibe los datos en $_FILES, lo que facilita la validación y almacenamiento.
  • Sin embargo, este método puede ser menos flexible en aplicaciones SPA (Single Page Application) como las que se construyen con Svelte.
2. Envío mediante JavaScript usando FormData
  • Permite una integración más dinámica con el frontend.
  • Se puede combinar con fetch o XMLHttpRequest para enviar los datos sin recargar la página.
  • Ideal para validar y preprocesar los archivos en el cliente antes de enviarlos.
3. Codificación en base64 y envío como JSON
  • El archivo se convierte en una cadena base64 y se envía como parte de un objeto JSON.
  • Útil cuando se quiere incrustar la imagen directamente en el HTML o en una base de datos.
  • Aunque aumenta el tamaño del archivo (~33%), permite una visualización inmediata sin necesidad de rutas físicas

Objetivo

Codificar un ejemplo simple, donde se pueda revisar el funcionamiento de los campos de tipo «file» y cómo se accede a la estructura de datos del fichero/s y cómo se accede al contenido del mismo.

También, cómo se pueden tratar esos ficheros en el server (PHP SLIM 4.0)

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

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

Actualización plugin de Telegramia

Acabo de actualizar el plugin de Telegramia (cuenta caracteres o palabras en un campo de entrada).

Este plugin lo creo MIB.

El problema se presenta si se desea borrar un registro que tenga algún campo que utilice este plugin. Sale una ventana de confirmación de borrado, que no funciona y nunca permite borrar el registro.

El problema se presenta porque el plugin utiliza la librería de Sweetalert muy antigua , con lo que se carga esta versión en vez de la que incorpora PHPRunner, creo, que desde la versión 10.8.
La solución es eliminar esta librería del plugin y dejar la de PHPRunner.

He hecho pruebas y funciona perfectamente.

La nueva versión está en formato de los plugines de versión 11 y está en este enlace: https://fhumanes.com/blog/download-adjuntos/4416.

 

S-009 – Gestor de Stores y menú de App, aplicación SPA en Svelte

Al igual que hice en React, tengo intención de hacer una aplicación que contemple páginas publicas, páginas privadas, gestión de acceso, etc.

Soy consciente, que una solución completa conlleva bastante código y que esos ejemplos, para los que se inician no son prácticos, pues con tanto código no se sabe por dónde empezar, pero si que es un buen ejercicio para aquellos que desean realizar un aplicativo completo.

En este artículo se va a utilizar 2 soluciones que se requieren para ese tipo de desarrollo y así, en estos ejemplos espero que sean más sencillos para el aprendizaje de estos concepto.

Objetivo

  1. Utilización de Stores y Memoria local, para guardar datos de sesión. En esta solución nos basaremos para almacenar el TOKEN que acreditará la autorización de acceso de los usuarios. El concepto de Store es mucho más amplio que la autenticación y se puede utilizar en muchos otros aspectos.
    DEMO: https://fhumanes.com/my-store-app/

    Podéis probar con admin/admin o con fernando/1234

  2. Disponer de una solución de menú de aplicación para aplicaciones SPA (sólo una página), que sea muy simple para poderlo adaptar a nuestras necesidades.
    DEMO:
    https://fhumanes.com/my-nav-app/

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