webs



Gulp 4 + Browser-sync programando para varios navegadores

2020-12-04 - Categorías: JavaScript
Testing Browser-sync

Ando poniéndome al día de nuevo, con este howto o codekata, mientras que les comparto en este post sobre estas joyas de la informática. Se trata de Browser-sync y de Gulp, herramientas para desarrollar localmente más rápido páginas web.

Con Browser-sync nos evitamos el continuo F5 para refrescar los navegadores con cada cambio mientras que trabajamos, además de que podemos probar en múltiples dispositivos las páginas web mientras que vamos construyendo. Y además con Gulp, podemos tener programadas una serie de rutinas de trabajo, como combinar hojas de estilo, ficheros JavaScript, minificarlos, etc.. para así poder trabajar también más rápido y mejor.

No he encontrado por Internet un howto para Gulp 4, así que aquí estoy compartiéndolo mientras que he conseguido hacerlo funcionar. Con este howto, queda programado en Gulp el lanzamiento de Browser-sync, junto con unas rutinas básicas de JavaScript y CSS, para un entorno básico de página web.

Continuar leyendo..

Scripts y técnicas de despliegue continuo para una web con Git

2020-11-16 - Categorías: General / Magento / PHP / Symfony / WordPress

Automatizar la publicación de nuevas versiones es una técnica de desarrollo de aplicaciones que se denomina Despliegue Continuo o Continuous Deployment en inglés (CD). Se suele usar junto con el Continuous Integration (CI), en el que se elabora una serie de pruebas automáticas sobre el software.

Tener esto automatizado nos ahorra mucho tiempo, nos dará velocidad en todos estos pasos intermedios ya que no tendremos que repetirlos continuamente, y podremos centrarnos en desarrollar para cada iteración.

Durante las pruebas puede notificarnos en caso de errores, realizar todo tipo de chequeos, o elaborar documentación sobre el proyecto para el resto del equipo. Pero una vez que tenemos el primer paso montado del CI, es interesante seguir con el segundo paso del CD. A continuación comparto unos scripts e instrucciones para una web en WordPress, Symfony o Magento 2, con GitHub o BitBucket. Así es como funciona también aquí en JnjSite.com..

Continuar leyendo..

Cómo hacer que Google Analytics no use cookies y otras configuraciones

2020-10-25 - Categorías: General
Monstruo come galletas

Hoy dejo aquí un truco, y referencias, a la documentación oficial para cumplir con las Leyes sobre cookies y poder seguir disfrutando de la herramienta de análisis de visitas llamada Google Analytics.

Para el que no lo conozca, Google Analytics es una de las herramientas gratuitas de analítica web más usadas en Internet. Nos informa de cómo está funcionando nuestra web, al tiempo que nos da todo tipo de informes para que podamos saber qué tal se comportan los usuarios en general en una página web.

Continuar leyendo..

Cómo acceder a localhost dentro del emulador de Android

2020-06-24 - Categorías: Drupal / General / GNU/Linux / Magento / PHP / Prestashop / Symfony / WordPress

Dejo aquí un howto, un apunte resumen, para configurar el emulador de Android y poder programar accediendo a localhost, desde el dispositivo emulado. Se hace haciendo lo que se llama port forwarding en el dispositivo emulado desde ciertos puertos al host de nuestro sistema operativo. Esto sirve para probar Service Workers (PWAs) localmente, webs localmente, apps que accedan a servicios que estemos programando localmente, etc..

Continuar leyendo..

Cómo empezar un cortafuegos en PHP

2020-06-08 - Categorías: Drupal / Magento / PHP / Prestashop / Symfony / WordPress
WAF Web Application Firewall

Este post es un sencillo howto para ejecutar un código, antes de cualquier ejecución en PHP en una aplicación web. Sirve para montar lo que se llama un WAF en la capa de aplicación, cuyas siglas significan Web Application Firewall.

Así después, le podemos añadir toda la lógica que necesitemos. Con ésta técnica, en cada petición que se reciba en PHP, se ejecutará lo que pongas en el WAF antes de la ejecución de nuestra aplicación web.. 🧐

Continuar leyendo..

WordPress: cómo crear una tabla para un plugin

2020-06-08 - Categorías: PHP / WordPress
Logo de WordPress

Este es un pequeño codekata o howto para crear un plugin que cree una tabla en la base de datos. Como reza la documentación oficial, no se recomienda crear nuevas tablas para almacenar los datos, pero según que caso, puede ser la mejor opción, tendremos entonces que ocuparnos nosotros de su mantenimiento.

El siguiente código simplemente es un esqueleto de plugin con el que se puede crear una tabla en el momento de la activación de dicho plugin. También cuando se desactiva el plugin se borrará dicha tabla.

Continuar leyendo..

GNU/Linux: montando un sistema de despliegue manual con Git

2020-05-10 - Categorías: General / GNU/Linux
GNULinux

Dejo aquí un pequeño howto o codekata para configurar un despliegue manual de una aplicación mediante Git. Con este codekata se instala el repositorio en un directorio, mientras que los ficheros de trabajo que finalmente corren la aplicación estarán en otro directorio diferente. Internamente los sistemas de despliegue automatizado usan configuraciones de este estilo para hacer lo que se llama Continuous Deployment (CD).

Para este post sólo se trabaja la forma manual de hacer el despliegue. Que si quisieras, podrás automatizarlo añadiendo luego webhooks a tu repositorio, y recibir estos webhooks para lanzar este despliegue.

Clonado del repositorio

Suponiendo que queremos poner la aplicación y repositorio en el mismo directorio, vamos al directorio y podemos ejecutar lo siguiente:

git --work-tree=./la_app/ clone git@servidor-de-repos.com:ruta/al/repo.git el_repo

Si estamos en el directorio /ruta/al/directorio/ entonces se crearán los siguientes directorio:

  • /ruta/al/directorio/el_repo/
  • /ruta/al/directorio/la_app/

No tienen que existir los directorios para que Git pueda crearlos.

Comandos de despliegue machacando modificaciones

cd /ruta/al/directorio/el_repo/
git checkout master
git fetch --all
git reset --hard origin/master
# aquí otros comandos especiales de tu app como borrar cachés, archivos temporales, etc..

Javascript: objetos y ficheros, escalando un programa

2020-04-13 - Categorías: General / JavaScript
Logo de 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..

Javascript: tomando una foto de la cámara en una web

2020-04-13 - Categorías: General / JavaScript
Logo de Javascript

Pequeño howto o codekata para tomar una foto desde la webcam en una web. Con este script incrustado en una web, se le preguntará al usuario por el permiso para acceder a los dispositivos de vídeo y audio disponibles en el dispositivo. Entonces si el usuario da permiso para su uso, se mostrará una caja con el vídeo y audio que se reciben en tiempo real. Sólo se usa HTML y Javascript.

Simplemente se pinta en la caja de video el stream de vídeo con audio en tiempo real. Y tenemos también un canvas en donde podemos pintar una captura de un fotograma del vídeo que estamos viendo. La captura del fotograma que se pinta en el canvas se hace con el botón disponible.

Continuar leyendo..

Javascript: obtener las coordenadas geográficas de una visita a la web

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

Sencillo codekata para obtener las coordenadas de una visita a una web mediante Javascript. Funciona en navegadores de ordenadores y dispositivos móviles. Mostrará un mensaje emergente cuando se haga la consulta de las coordenadas. Devuelve latitud y longitud según el navegador.

Este script pide al navegador las coordenadas. Si estamos en un móvil con Android con Google Chrome, por ejemplo, el GPS del dispositivo móvil le servirá las coordenadas exactas al navegador, y el navegador a la web, si el usuario da el permiso.

Al grano, el código fuente

<!DOCTYPE html>
<html lang="es" dir="ltr">

    <head>
        <meta charset="utf-8">
        <title>JnjSite.com: Javascript Geolocation</title>
    </head>

    <body>
        <h1>JnjSite.com: Javascript Geolocation</h1>
        <p>Your current location is latitude <span id="spanLatitude"></span> degrees and longitude <span id="spanLongitude"></span> degrees.</p>
        <p id="theError"></p>
        <script type="text/javascript">
            function positionSuccess(position) {
                alert('SUCCESS');
                document.getElementById('spanLatitude').innerHTML = position.coords.latitude;
                document.getElementById('spanLongitude').innerHTML = position.coords.longitude;
                console.log(position);
            }

            function positionError(error) {
                alert('ERROR');
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        document.getElementById('theError').innerHTML = "User denied the request for Geolocation."
                        break;
                    case error.POSITION_UNAVAILABLE:
                        document.getElementById('theError').innerHTML = "Location information is unavailable."
                        break;
                    case error.TIMEOUT:
                        document.getElementById('theError').innerHTML = "The request to get user location timed out."
                        break;
                    case error.UNKNOWN_ERROR:
                        document.getElementById('theError').innerHTML = "An unknown error occurred."
                        break;
                }
            }
            window.onload = () => {
                if (navigator.geolocation) {
                    alert('Browser has Geolocation');
                    navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
                } else {
                    alert('Browser do not support Geoloation');
                }
            };
        </script>
    </body>

</html>

© 2021 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.