JavaScript

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, o este otro relacionado sobre Datatables con botones de descarga.. 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..


Symfony: tutorial 11: los formularios

2018-12-26 - Categorías: PHP / Symfony
Symfony creación de formularios

Continuando con la serie de tutoriales de iniciación a Symfony, vengo aquí con otra de las mejores cosas que tiene Symfony. Esta vez se trata del manejo y creación de los formularios. Podríamos seguir creando formularios a la antigua, mediante HTML, construyendo poco a poco dichos formularios. Pero si quieres ser realmente productivo construyendo aplicaciones que gestionan mucha información, interactuando con los usuarios, deberías de usar ésta herramienta y aprovechar lo que Symfony nos ofrece.

Continuar leyendo..

Nueva versión del sencillo mensaje de aceptar cookies para tu web

2018-12-01 - Categorías: General
Monstruo come galletas

Un lector me ha escrito consultando sobre un post algo antiguo, sobre cómo poner un sencillo mensaje de cookies en una web. La verdad es que no me he explicado muy bien en aquel post, los navegadores han cambiado durante estos últimos años, JavaScript también.. así que aquí estoy compartiendo otro mensaje de aceptar cookies más actual.

Este mensaje de aceptar cookies es una actualización de aquel antiguo que vengo usando en nuevos proyectos. Es un mensaje hecho artesanalmente que puedes copiar y pegar para tu web. El único requisito que tiene es que necesitas usar la librería de jQuery para que funcione. jQuery hoy día es como un estándar, hace tan bien su trabajo de acceder al DOM de las páginas web, que cómo no usarlo en todos los proyectos.

Continuar leyendo..

Symfony: tutorial 7: depurando todo con lupa, el profiler

2018-10-04 - Categorías: PHP / Symfony

Symfony web profiler

En este post de la serie de iniciación a Symfony, traigo una review del perfilador de Symfony, el profiler. Es una gran herramienta de desarrollo web que nos brinda Symfony. Podemos ver muchos datos internos de cómo funciona todo por dentro: la petición y respuesta, rendimiento, envío de formularios, validaciones, datos de las excepciones, logs… pasando por Doctrine, enrutamiento.. Continuar leyendo..


Popup de Mailchimp para WordPress

2018-08-27 - Categorías: Magento / Prestashop / Symfony / WordPress
Popup de Mailchimp de jnjsite.com

He tenido problemas para poner un popup de Mailchimp en esta web. Así que aquí estoy compartiendo la solución. He tratado de usar la utilidad que viene en el panel de control de Mailchimp. Pero todo apunta a que tengo algún conflicto entre los Javascripts de Mailchimp, los Javascripts de mi plantilla, algún plugin de cacheado o del minificado del código fuente. En fin, que no funcionaba y he terminado antes haciendo el popup artesanal que se puede ver en la barra lateral derecha de la web.

Si has tenido el mismo problema, aquí dejo mi solución, que espero que funcione en el 100% de las webs. Simplemente necesitas tener instalado en la web jQuery, el resto viene todo en el código de abajo. Se puede copiar y pegar en el widget de WordPress donde lo quieras y adaptarlo para tu web.

Continuar leyendo..

Del código fuente a la ejecución de los programas

2018-06-08 - Categorías: General
Programming programando

Ya tenemos el código fuente, ¿y ahora? ¿cuál es la magia que hace posible que un código fuente se ejecute?

Todo programa necesita un traductor, que compile o interprete el código fuente para que pueda ser ejecutado. Es una primera diferencia que puede marcarse entre los lenguajes de programación, ya que un lenguaje puede ser interpretado, compilado, o incluso ambas cosas. Además, la ejecución puede ser dependiente de la máquina, o ejecutarse en una máquina virtual, que te independiza de la máquina.

Por ejemplo los lenguajes funcionales o lógicos suelen usarse primeramente interpretados, como Prolog o Haskell mientras se desarrolla, pero también tenemos disponible un compilador para mejorar su eficiencia. PHP es interpretado, aunque ha habido compiladores para mejorar su eficiencia de ejecución. Cabe destacar como curiosidad la Hip Hop Virtual Machine de Facebook que crearon para agilizar PHP, que precisamente compila los ficheros fuente a un código objeto intermedio más rápido de ejecutar. Javascript, Typescript, Ruby, también son interpretados. C, C++, VB, C# son compilados, es decir, se necesita compilar el código fuente a códigos objeto, estos códigos objeto a su vez se linkan, se retraducen, para ejecutarse finalmente en la máquina.

Continuar leyendo..

AWS: sirviendo un píxel de conversión con el CDN de CloudFront

2017-12-18 - Categorías: Amazon Web Services / General
Cloudfront logo

Una de las tareas más interesantes para saber si las cosas sirven para algo en tu negocio de Internet, consiste en seguir a las visitas. Es decir, consiste en el seguimiento de la conversión, mediante lo que se llaman píxeles de conversión. Es decir, si queremos saber si un canal de entrada a tu web convierte o no, si los anuncios que ponemos en otras webs, si los enlaces de redes sociales, emails, etc.. sirven de algo. Para esto debemos de llevar un seguimiento de dicha entrada a tu web.

Continuar leyendo..

© 2024 JnjSite.com - MIT license

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