Todas las entradas de: admin

S-001 Aplicación de ejemplos de Svelte

Este, mi primer ejemplo de código de Svelte, es una recopilación de algunos de los ejemplos del tutorial de Svelte, más los 3 últimos ejemplos que son un ejemplo de mantenimiento de una gestión de películas.

Como os he indicado, en muchos de estos ejemplos he utilizado las IA’s (ChatGPT, Geminis y DeepSeek). La de DeepSeek, es la que más se confunde, pero en todos los casos, los resultados son bastantes buenos.

Objetivo

Disponer de una App, que me permita recordar los ejemplos del tutorial y algunos ejemplos adicionales, de cara a que me sirva de recordatorio rápido.

Demo: https://fhumanes.com/my-svelte-demo/

Si estás interesado en este tema y deseas acceder al código del ejemplo, sigue este enlace.

Novedades de Svelte

Para conocer las características de Svelte, te ruego que leas este artículo.

Estoy fascinado con las posibilidades de React, pero reconozco que es muy difícil para aquellos que su mayor desarrollo en informática ha sido los lenguajes 4GL’s y/o lo desarrollos de «low_code» como PHPRunner.

Estuve preguntando a las AI y al final me nombraron esta solución como ideal para aquellos que conocen HTML, CSS y JavaScript. Las herramientas de desarrollos de UI (interfaz), en estos momentos, están copadas por soluciones de JavaScript (React, Vue, etc.) por lo que creo que es ahí donde debemos estar, pero no podemos, ni debemos, olvidar nuestros conocimientos de ahí que debemos aprovechar todo lo que conocemos. Y por eso, creo , que la solución es Svelte.

Estoy trabajando en una solución de:

  • Frontend .- Svelte, desarrollando APP de sólo una página (SPA para móvil) o multi-página, para optimizar SEO
  • Backend.- PHP, con SLIM, para los Rest Api necesarios para comunicar los datos de las bases de datos persistentes y los procesos masivos, que los sistemas requieran.

Svelte tiene una excelente documentación y tutoriales en https://svelte.dev/. Os aconsejo que estudies con el Tutorial. Te va a explicar todos los conceptos y sintaxis que requieres para empezar y te lo va a explicar y demostrar a través de ejercicios, muy prácticos.

También, utilizar las IA’s. Todas ellas te va a explicar qué es Svelte y te lo van a poder comparar con cualquier otro conocimiento que tengas para así comprenderlo mejor. Siempre recordar, que las IA’s os van a poder dar ejemplos completos o parciales, de lo que necesitéis. Yo he trabajado con ChatGPT,  DeepSeek, Gemini y Copilot.

Para los ejemplos que he estado haciendo y que próximamente publicaré, he estado trabajando con el complemento de Bootstrap (versión 5.3), para que así estos ejemplos se parezcan a los desarrollos en PHPrunner (pero con versiones actualizadas que todavía faltan años a que las incorpore XlineSoft).

Esta es la lista de artículos que he publicado:

Guía 96 – Mejorar la presentación de los Lookup simples o múltiples

En los casos en que en la presentación de la información de una tabla cambiamos un «id» por un «nombre o clave», en la visualización vemos un texto que normalmente es simple pero suficiente. Cuando en vez de tener un sólo valor en el campo tenemos múltiples valores, la presentación de esos textos, uno detrás de otro, separados por una coma, normalmente es insuficiente.

Objetivo

Mejorar la visualización de los campos «Lookup» resaltando los valores, tanto en el Lookup estándar como si se utiliza algún Plugin (Los plugins ya tienen versión para PHPRunner v11)

DEMO: https://fhumanes.com/test_lookup/

Si estás interesado en este articulo o deseas obtener el código, sigue este enlace.

Migración de Plugin a versión 11 de PHPRunner

Actualización - 31/05/2025

Una copia de este mensaje la publiqué en el foro de XlineSoft, pero por alguna circunstancia ha sido borrada.

Mi objetivo era indicar a los usuarios que han utilizado algún plugin de esta web que ya tienen versión para PHPRunner v11 y para aquellos que hayan podido desarrollar algún plugin, cuáles son los problemas que yo he encontrado.

Ya he terminado la revisión y los problemas que he encontrado son:

  • Se ha controlado más los nombre de los ficheros, por ejemplo antes funcionaba como nombre de fichero editcalculator.php y ahora tiene que ser EditCalculator.php.

 

  • En versión 10, se puede utilizar la función «$this->addJSSetting()«, en las 2 funciones que se escriben para la lógica de los plugins, «function initUserControl()» y «function buildUserControl()«, que son las funciones de inicialización y construcción del plugin.
    En versión 11, sólo se puede utilizar, con resultado correcto, en la «function initUserControl()» y no en «function buildUserControl()«. No da error, pero la información que se pretender llevar al JavaScript, no llega.

 

  • En la Build 43439 de versión 11, persiste un error de refresco de información en las actualizaciones «inline» y «popup» (en las que se actualiza la información de LIST por Ajax) y eso repercute en los plugines en los que para visualizar los datos se utiliza el LOOKUP estándar de PHPRunner.

(1) Así aparece la información cuando se ejecuta el LIST.
(2) Así aparece (no se hace la conversión del ID, por el NAME), después de un EDIT o ADD.

Por ahora, mientras no se resuelva el problema, lo podéis cambiar por codificación indicando que en VIEW se utiliza el tipo «CUSTOM», con un código similar a este:

$in = $value;

if ( $value <> '' ) {
    $rs = DB::Query(
    "SELECT group_concat(
           concat('<span class=\"badge \">',name,'</span>')
           order by name ASC
           separator ' , ') names
    FROM prueba_plugin_lv
    WHERE idprueba_lv IN ( $in )"
    );
    while( $data = $rs->fetchAssoc() )
    {
    $value = $data['names'];
    }
}

Y en CUSTOM CSS:

.badge {
  /* Bordes más cuadrados (reduce el radio de borde) */
  border-radius: 3px !important; /* Valor original en BS3 es 10px */
  
  /* Opcional: ajustar padding para más "cuadratura" */
  padding: 3px 6px !important; /* Ajusta según necesites */
  
  /* Opcional: otros estilos para parecerse más a una etiqueta */
  font-weight: normal !important;
  font-size: 85% !important;
  background-color: #777 !important; /* Color de fondo estándar */
  color: white !important;
}

DEMO: https://fhumanes.com/plugines_v11/

En la Demo no he aplicado el «work around» que os he indicado para resolver el problema 3

En la página de plugins está todos los plugins para versión 11 y los anteriores para versión 10.
Los de versión 11 tendrán los prefijos Edit_ y View_ de cada uno de los plugins.

Guía R-011 – Utilización de Plantillas

He estado revisando algunas plantillas disponibles (FREE) para React y son excelente y hay una gran cantidad de ellas.

¿Por qué utilizar plantillas? Porque de entrada, te facilitan una gran labor de «presentación» de tu aplicación, además de tener una estructura de directorios y ficheros que te explican cómo se debe construir un proyecto grande y ordenado, y además,  te facilita una gran cantidad de código de calidad para tu aplicación.

¿Qué problemas tiene? Esta es mi conclusión, por lo que puede que para otro perfil pueda tener otros.

  • Normalmente, hay muchas plantillas de alta calidad que utilizan los componentes que ellos mismos han producido y eso te «obliga» a que tu proyecto se basen, principalmente, en esos componentes. A mi me gustan los componentes y soluciones de Material UI. Son los que he utilizado en artículos anteriores.
  • El código que te entrega es de alta calidad y por lo tanto, necesitas tener buen conocimiento de React y del conjunto de componentes que utilizan en la Plantilla. Casi todos los casos disponen de una documentación que explica cómo está construido.
  • No son aplicaciones completas (lógicamente), por lo que falta toda la parte del Server y siempre o casi siempre, te venden una versión PRO que es mucho más completa y relativamente barata.

DEMO: https://fhumanes.com/mantis-react/

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