JavaScript

Uno de los lenguajes de programación más potentes y en pleno auge. Se pueden programar desde partes incrustadas en webs, entre HTML y CSS.. a completas aplicaciones para móviles y escritorios.

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>

Hola mundo con VueJS

2020-04-10 - Categorías: General / JavaScript
VueJS hola mundo 2

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: almacenando datos en el navegador de los visitantes

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

Todos estamos como locos venga a poner mensajes de cookies en las webs 🤪 pero hay otras 4 formas, que aquí dejo en estos codekatas, para guardar información en los navegadores de los visitantes. Estas otras formas, además, permiten guardar incluso más información que con las cookies 🤔 información totalmente segura y única para cada visitante.

Esta es la evolución natural de las webs hacia el mundo de los escritorios de los PC y aplicaciones para móviles. Es el siguiente paso para convertir una web normal, en una aplicación web instalable en PCs y móviles. Estas webs que se pueden instalar, y pueden trabajar sin conexión a Internet, se llaman PWAs (Progressive Web Apps). Además, las PWAs no necesitan instalarse desde la App Store de Google, ni de Apple, ni de Microsoft 😜 se instalan directamente porque son la misma web.. pero esto es tema para otro post..

Continuar leyendo..

Datatables y Symfony: cargando tablas con cantidades ingentes de datos

2019-02-19 - Categorías: JavaScript / PHP / Symfony
Symfony y Datatables, cargando cantidades ingentes de datos mediante AJAX.

Continuando con un post anterior sobre mostrar tablas de datos interactivas, traigo hoy otro CODE-KATA, hecho en Symfony 4 para probar el Datatables más a fondo. En aquel post empecé a testear el Datatables con pocos datos. Datatables es un plugin de jQuery con el que en poco tiempo, listas, ordenas y filtras tablas de datos de forma muy profesional.

Ahora estoy probando cómo funciona sobre un proyecto con ingentes cantidades de datos, en concreto con una tabla con 622,001 registros. Llegado a éste extremo, no puedes cargar el 100% de los datos en el servidor, enviarlos al navegador, y pintarlos. Si lo haces, el navegador se sobrecargará, no podrá pintar la tabla, o irá muy muy lento.

Continuar leyendo..

Datatables: listando y filtrando tablas de datos con Javascript

2019-02-11 - Categorías: General / JavaScript
Datatables simple, cargando desde HTML los datos
Proyecto de pruebas en el que se listan sitios web bajo estudio SEO.

Ya estoy de nuevo por aquí compartiendo una verdadera joya del software, el Datatables. Esta es una herramienta para desarrollo frontend, que mediante JavaScript, crea unas tablas de datos muy profesionales para tus proyectos en muy poco tiempo. Se trata de un plugin de jQuery, que le da vitaminas a la presentación de datos en el navegador del cliente.

JavaScript actúa en la parte de frontend, es decir, tenemos que enviarle al navegador el HTML, CSS y JavaScript con el Datatable configurado. Entonces, en el navegador del cliente, mediante JavaScript, se regenerará el contenido web de la tabla para hacer los listados, ordenados y filtrados de la tabla de datos.

Continuar leyendo..

© 2021 JnjSite.com - MIT license

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