Etiqueta: HTML • JnjSite.com

PHPUnit: cómo testear cualquier código legacy en PHP

2021-11-03 - Categorías: General / PHP

Este es un codekata para programar tests de las páginas web legacy. El tratar de testear código legacy en PHP puede parecer bien complicado. Puede no haber casi encapsulamiento en objetos, estando todo construido a base de scripts embebidos entre el HTML, CSS y JavaScript. Una web legacy es el caso más complejo, pero este codekata también sirve para cualquier otro código en servicios web, scripts sueltos, encapsulado en objetos, dividido por capas o arquitecturas hexagonales.

Estos códigos legacy se pueden testear de varias formas. Se pueden establecer tantos puntos de control como queramos. Como mínimo podemos crear tests de aceptación, funcionales, crawleando, creando tantos tests como queramos sobre los casos de uso. Pero si queremos obtener la cobertura visualizando cada línea de código por la que ha pasado la ejecución, no podemos crawlear la web y ya está. Así PHPUnit no obtendrá la cobertura del código ejecutado. Además, se puede también establecer puntos de control, atendiendo al contenido de las respuestas, navegando por el HTML de dichas respuestas.

Continuar leyendo..

Symfony: registro de usuarios, reset password, login..

2021-10-02 - Categorías: CSS / General / HTML / PHP / Symfony

¡Hola de nuevo! Esto es un codekata, esta vez para páginas web construidas con Symfony, con registro, autenticación y autorización de usuarios. Se trata de un clásico para generar toda la estructura necesaria para crear desde cero un proyecto funcional en unos minutos.

Hasta la versión 4 de Symfony teníamos vendors, como FOSUserBundle, con lo que estas cosas de registros de usuarios venían hechas. Ahora a partir de la versión 5 de Symfony también, tenemos de casa componentes para integrar estas cosas, generando códigos y configuraciones en pocos minutos.

Vamos al grano y lo vemos?¿ ??

Continuar leyendo..

Creando una API Restful con la API Platform desde cero

2021-07-04 - Categorías: HTML / JavaScript / PHP / Symfony

Aquí llega otro sencillo codekata o howto para crear una API Restful en PHP, from scratch, en pocos minutos, sobre Mysql o Mariadb, y usando esta joya del software llamada API Platform.

A esta API se le puede conectar cualquier otro software como una aplicación en React, Angular, WordPress, Magento.. aplicaciones hechas en varios lenguajes como Java, Python, PHP, JavaScript, etcétera. Estas APIs son una forma de conectar sistemas de forma totalmente estándar.

Este post es continuación de este sobre crear APIs a partir de proyectos funcionales, o complemento de este otro sobre cómo filtrar elementos en la API Platform. También se complementa con este post posterior sobre PHP y una clase estándar para consulta de APIs.

Continuar leyendo..

Esqueleto para mensaje de cookies

2021-03-17 - Categorías: CSS / General / HTML / JavaScript

¡Hola de nuevo! Hoy vengo a compartir otro codekata para construir nuestro propio mensaje de cookies. Están teniendo bastantes visitas las páginas en JnjSite sobre este tema de las cookies. Y he recibido ya varias consultas a la web sobre este tema. Así que aquí estoy de nuevo compartiendo mi granito de arena en todo esto de la programación.

Se trata de un sencillo esqueleto de página web, con puro JavaScript, CSS y HTML. No se utiliza ni jQuery ni ningún elemento extra para que si has llegado aquí buscando algo de esto, lo puedas copiar y pegar a tu web, y adaptarlo a como quieras ?

Continuar leyendo..

Datatables: filtrando entre rangos de fechas por columnas

2021-02-20 - Categorías: General / JavaScript

Comparto aquí otro codekata o howto. Simplemente es una forma de filtrar entre fechas por columnas usando Datatables. Nunca lo había hecho, y buscando por Internet no he encontrado la solución, así que jugando un poco con JavaScript aquí que lo dejo..

Partiendo de un post anterior sobre Datatables con botones, lo he reescrito para permitir el filtrado entre fechas. Posiciona en la segunda columna unos campos de texto. Y al poner dos fechas, una fecha desde y una fecha hasta, entonces filtra los datos de la tabla mediante JavaScript.

Continuar leyendo..

WordPress: mejorando el rendimiento con Query Monitor

2020-12-23 - Categorías: General / PHP / WordPress

En la incansable búsqueda por conseguir hacer que las cosas funcionen lo mejor posible, me he encontrado con un plugin que vengo a compartir en este post. Se trata un plugin que todo desarrollador de WordPress debería de conocer, el Query Monitor.

Es un plugin que una vez instalado te muestra detalladamente qué es lo que está pasando dentro de WordPress para poder depurar, mejorar todo y aumentar el rendimiento de la web. Es una manera de tener una visión global del funcionamiento, número de consultas a la base de datos, plantillas cargadas, tiempos, errores/notificaciones/advertencias en la programación, y un largo etcétera..

Continuar leyendo..

Carga opcional de Google Analytics y otros, desde JavaScript

2020-11-29 - Categorías: JavaScript

Hoy traigo de nuevo otro codekata, esta vez en JavaScript. Para evitar el uso de cookies, y la carga opcional de ficheros JS. Traigo el cómo cargar o no Google Analytics opcionalmente mediante JavaScript. Es decir, son unas rutinas de carga de ficheros JavaScript, o de funciones que se ejecuten, si el visitante ha aceptado o no el uso de ciertos servicios que usemos en una web.

Esto se puede usar para Google Analytics o para otros servicios que carguen a partir de JavaScript como anuncios, pixeles de conversión, etc..

Continuar leyendo..

Cómo hacer peticiones AJAX con JavaScript, desde cualquier frontend, al backend de WordPress

2020-08-02 - Categorías: JavaScript / PHP / WordPress

Una persona me ha hecho una pregunta sobre WordPress. Curioseando para responder al comentario, inspeccionando las llamadas con el Monitor de Red, me he dado cuenta de una funcionalidad muy interesante que nos brinda WordPress. Resulta que tenemos disponible otra forma de desacoplar el frontend de una instalación WordPress, pero seguir disfrutando del backend de WordPress. Podemos programar con esto en mente, para trabajar la información usando llamadas AJAX que ataquen al CMS.

Rizando el rizo un poco, estas llamadas AJAX, incluso se podrían hacer desde otro tipo de programas que no fueran webs..

Es decir, tenemos un ‘endpoint’ con la ruta wp-admin/admin-ajax.php al que podemos atacar. Y a partir de este punto de entrada podemos crear plugins o themes, con lo que podemos programarle lo que queramos en la parte de backend. Por otro lado, en la parte de frontend, al atacar este endpoint podríamos así desacoplar más todo el frontend, y usar cualquier tecnología de frontend como podría ser Angular, React, Vue, etc.. o incluso otro tipo de programas de escritorio o aplicaciones nativas de móviles.

Continuar leyendo..

Rejilla de contenidos mobile-first con puro HTML y CSS

2020-06-18 - Categorías: General

El diseño sensible al dispositivo, responsive o mobile-first, que se adapta al tamaño de la pantalla en donde se visualiza una web, se puede construir con puro HTML y CSS. Con unos pocos estilos, y estructura en los contenidos, podemos manejar la disposición de éstos contenidos en pantalla.

Si nos fijamos en cómo se visualiza el contenido en rejilla de uno de los principales framework mobile-first, que se llama Bootstrap, salta a la vista que se basa en dos ideas. La primera es el visualizar las cajas en pocas filas con muchas columnas cuando la pantalla en lo bastante ancha. Y mostrar las cajas en muchas filas con pocas columnas cuando hay pocos pixeles de ancho de la pantalla.

Continuar leyendo..

WordPress: haciendo una plantilla de página

2020-05-10 - Categorías: PHP / WordPress

Este post es un codekata o howto sobre WordPress para hacer plantillas de páginas individuales. Es decir, tenemos lo que se llaman temas completos para el frontend de WordPress. En los temas de WordPress todo el diseño web viene definido, y a veces nos traen una serie de plantillas que se pueden asignar individualmente a cada página, a cada post, a cada contenido..

Estas plantillas de página, podemos además maquetarlas y programarlas para que tengan cierto aspecto visual. Podemos crear nuevas y definir nuevas estructuras. Por ejemplo, en el tema de Customizr que estoy usando actualmente en este blog, tenemos una plantilla de página que nos proponen, y podemos crear nuevas replicándola y editándola fácilmente.

Continuar leyendo..

JavaScript: las Progressive Web Apps y el futuro de las aplicaciones para móviles

2020-04-14 - Categorías: General / JavaScript / SEO

¿Qué te parece si te dicen que se puede desarrollar una web, que se puede instalar como si fuera una aplicación nativa, en cualquier sistema operativo como Android, iOS, Mac o Windows? Ya sea en móviles o PCs de escritorio.. ¿Y si no hace falta que se publique en las App Store de cada sistema operativo? ¿Y si se actualizara también automáticamente?

Pues esta tecnología ya está entre nosotros desde hace unos pocos años, y la mayoría de los navegadores más usados ya son compatibles. Estas aplicaciones también pueden almacenar información en el navegador, acceder a la cámara, micrófono, GPS, se pueden usar sin conexión, son seguras porque obligan al uso de SSL, pueden acceder a las notificaciones push para mostrar notificaciones de escritorio y de móviles, etc..

Continuar leyendo..

Javascript: objetos y ficheros, escalando un programa

2020-04-13 - Categorías: General / JavaScript

Sencillo codekata o tutorial para comprender cómo en Javascript se importan ficheros, o se puede organizar el programa en varios ficheros. No es plan tener todo junto en un mismo fichero. Hay que encapsular todo en objetos, en ficheros, con funciones, todo bien desacoplado, etc.. para que el programa sea mantenible y legible.

A partir del Ecma Script 6 tenemos disponible en Javascript mecanismos para esto. Una sugerencia es lo siguiente. Cargar como módulo un fichero principal y dentro de este a base de import lo demás. Dependerá del proyecto que quizá entonces hay que usar una estructura definida..

Continuar leyendo..

HTML

¡Suscríbete a las novedades!