Categoría: JavaScript • JnjSite.com

Gulp 4 + Browser-sync programando para varios navegadores

2020-12-04 - Categorías: JavaScript

Ando poniéndome al día de nuevo, mientras que les comparto en este post sobre estas joyas de la informática, con este howto o codekata. 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 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..

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..

Preparando un plugin de WordPress para publicar, ahora con Gulp

2020-10-17 - Categorías: JavaScript / WordPress

Dejo aquí otro pequeño codekata o howto sobre Gulp, en JavaScript, para preparar los directorios de publicación de un plugin para WordPress. La semana pasada publiqué lo mismo en Shell Script, pero como en JavaScript se puede hacer de todo, lo he transcrito para usar con Gulp. Así podemos automatizar el flujo de trabajo dentro de los otros flujos de trabajo Gulp. Así nos independizamos del sistema operativo y nos beneficiamos de los extras que nos trae Gulp con sus plugins, para hojas de estilo CSS, JavaScripts, tratamiento de imágenes, etcétera.

Simplemente genera una estructura de directorios bajo el directorio extra/ dentro del proyecto siguiendo el patrón de estructura propuesto para WordPress, a partir de un plugin en desarrollo bajo el directorio /wp-content/plugins/your-plugin-slug/. Es necesario tener instalado Nodejs, Gulp 4 por lo menos, y las dependencias necesarias. Al lanzarlo, si falta algo en tu sistema te lo dirá. En teoría es multiplataforma.

Continuar leyendo..

Una forma de trabajar SASS con Gulp

2020-09-19 - Categorías: CSS / JavaScript

Este es un pequeño codekata o howto para configurar un proyecto SASS con Gulp. Un proyecto en el que tengamos unos fuentes hechos con SASS, de forma que, continuamente se reprocesen con cada cambio detectado, generando las hojas de estilo finales en CSS normal.

Continuar leyendo..

El ABC con Gulp, un hola mundo

2020-08-30 - Categorías: General / JavaScript

¡Hola de nuevo! Hace tiempo que no escribo, pero ya estoy por aquí de nuevo. He seguido avanzando con mis tareas y vengo a traer con este post otra joya de la informática. Imagino que muchos especialistas del frontend ya lo conocerán, se trata de Gulp. Pero si no lo conoces, esta es una de estas herramientas de las que hay que conocer, de las mustknow.

Gulp es una herramienta JavaScript que ejecutamos mientras que desarrollamos en local. Nos automatiza muchas tareas de forma que podemos hacer cosas automáticamente como optimizar imágenes, optimizar ficheros CSS minimizándolos, combinándolos. Podemos automatizar también el tratamiento de los ficheros JavaScript, combinándolos, comprimiéndolos, etc.. De igual manera incluso podemos automatizar despliegues, montar un servidor local para probar mientras desarrollamos. También podemos refrescar el navegador automáticamente cuando cambiamos algo en algún fichero, o retrabajar los ficheros con cada cambio, monitorizando los cambios, y un largo, muy largo, etcétera.

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..

Javascript: hola mundo con Node.js

2020-06-06 - Categorías: JavaScript

Javascript es uno de los lenguajes de programación más populares. Se pueden hacer aplicaciones para webs, de escritorio, para móviles, aplicaciones de servidor como microservicios o también aplicaciones de consola. Es un lenguaje de programación interpretado, no compilado, te permite OOP, y aunque sea imperativo, también permite la programación funcional.

Con todas estas cosas, a fecha de hoy, podemos programar en Javascript fuera de los navegadores gracias al entorno de ejecución de Node.js. Viene a ser lo mismo que el JRE para Java, el runtime de PHP, o el CLR del .NET framework.. pero en este caso es para Javascript. Este post es un sencillo howto o codekata para comenzar a usarlo.

Continuar leyendo..

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

2020-04-14 - Categorías: Drupal / General / JavaScript / Magento / Prestashop / SEO / WordPress

¿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..

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

- Categorías: General / 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>

Hola mundo con VueJS

- Categorías: General / JavaScript

Uno de los principales frameworks Javascript a fecha de hoy es VueJS. Los más populares, según los resultados en varias páginas encontradas con Google, son Angular, React y VueJS. Y en concreto VueJS me ha sorprendido por lo sencillo de empezar a usarlo.

Es un framework progresivo para desarrollo del frontend, que hace que podamos comenzar a usarlo progresivamente. Es decir, podemos usarlo en parte para hacer algo muy concreto en una parte de la web, o más, incluso llegando a ponerlo a controlar el frontend al 100%. Es una librería muy ligera, que proporciona un sistema, a base de Javascript con el que con directivas y poco más, podemos hacer que la web sea mucho más interactiva sin tener que picar casi código Javascript.

Continuar leyendo..

JavaScript

Al grano, el código fuente

¡Suscríbete a las novedades!