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>
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.
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..
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.
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.
Hoy traigo un pequeño CODE-KATA en PHP para iniciar el crawleo de una página web. Se trata de un pequeño script en PHP con el que listar lo que llamamos assets de una página.
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.
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.
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.
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.
El contenido es el rey para el posicionamiento, rezan muchos SEOs y muchas herramientas para SEOs. He leído por Internet que muchos hablan de que lo más importante para posicionar las páginas web es que el contenido sea bueno, que sea geniuno, interesante para el usuario.
Desde nuestro punto de vista, tenemos varios enfoques para hacernos una idea de si el contenido de una web es bueno. El más sencillo es la tasa que hay entre el texto y el código HTML, CSS y Javascript de nuestra web. Realmente, es la tasa entre el texto y el HTML, CSS y Javascript, aunque muchos se olvidan de que no sólo hay HTML.. Y muchas veces este CSS y Javascript puede ser tanto que la tasa de texto resultante baje demasiado. Todo esto se reduce en la tasa llamada Text to HTML ratio.
Este post es una puesta al día sobre herramientas de desarrollo, el mobile-first, el responsive, y la accesibilidad en la web. Es una puesta al día con esta herramienta de desarrollo web para proyectos mobile-first. Hablo de Bootstrap, que como reza en su web, es muy popular desde hace años:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Si tienes una plantilla contruída sobre Bootstrap, ya tienes una página preparada para todo tipo de dispositivos. Esta herramienta creada por Twitter es todo un referente desde hace años. Puede que tu web esté mejor o peor hecha, pero si tienes Bootstrap, ya tienes un buen punto de partida. Y una de las herramientas de mayor renombre. Así que si no lo has tenido en cuenta, ya es hora de cambiar el chip, y empezar a pensar de otra forma.
¿Qué es la Accesibilidad Web?
Si vamos al origen de la creación de la Web. No hablo de la creación de Internet, sino de la creación de la web. La web se creó en su origen para dar un acceso universal a la información. Normalmente se asocia la accesibilidad exclusivamente a las personas con alguna discapacidad, pero en la web, esto cobra un sentido más amplio. Aquí se añaden más variables, como pueden ser la resolución de pantalla, la capacidad de procesamiento, el software del navegador, el lenguaje del usuario, la velocidad de conexión, su ubicación geográfica, etc..
Es decir, que la Accesibilidad toma un concepto más amplio en la Web, que el que normalmente puede tomar fuera de Internet. Aquí entra en gran medida conceptos que repercuten directamente en el posicionamiento de la web, en la usabilidad. Entran conceptos que van a repercutir directamente en el éxito o fracaso, en mayor o menor medida, de los proyectos web.
Resumiendo, que sí que es muy importante la Accesibilidad Web, el diseño sensible al dispositivo y diseñar tu web pensando en los usuarios que nos visitan desde un móvil. Pensemos en que los robots de Google, o de cualquier otro buscador, necesitan que tu web sea accesible. Estos robots son entes ciegos, algunos tienen serias limitaciones de software, quizá no pueden ejecutar ciertas tecnologías como Javascript. Algo parecido a como puede pasar con los visitantes de un móvil de gama baja, con ordenadores antiguos, o con usuarios con velocidades de conexión lentas.
Muchas de estas restricciones las tenemos en los dispositivos móviles. Y si a esto le sumamos que cada día más personas andamos movilizados, ya tenemos un cóctel explosivo si es que todavía no nos hemos esforzado en esto.
Estado actual de las visitas desde móvil
No lo digo yo, sino que los creadores de la web, la WAI o el W3C llevan tiempo previniendo. Sino que Google lleva tiempo también dándole cada vez más importancia. Dejo aquí un par de ejemplos de cómo van aumentando las visitas desde dispositivos móviles. Primero mes a mes en un proyecto, quizá es por el verano que la gente usa más el móvil..
Aquí es donde tuve más curiosidad. ¿Sólo será por el verano? Así que miré que pasaba con respecto al año pasado..
Es un poco alarmante cómo van creciendo las visitas desde móvil, aunque ya ha sido anunciado a voces. Menos mal que tenemos el proyecto hecho con un diseño con Bootstrap 😉 A partir de aquí lo siguiente es ya pensar en que todos los visitantes son dispositivos móviles y exprimir nuestro proyecto haciendo los ajustes necesarios. Hazlo que seguro que merece la pena..
Haciendo unos ajustes en Bootstrap con SASS y LESS
Después de toda la teoría, más de un buen maquetador me había recomendado usar SASS y LESS. Así que ya voy a ir al grano para presentar estas tecnologías y cómo configurar un entorno de trabajo con Atom Editor y así ser más productivos en nuestro desarrollo mobile-first.
SASS y LESS son preprocesadores de hojas de estilo. Con estas tecnologías podemos simplificar la construcción de hojas de estilo CSS. Así, podemos añadir variables, funciones, anidar selectores de estilos.. siendo más productivos y teniendo un proyecto más mantenible a la larga. La idea es construir unos pocos ficheros, que se procesan, y generan el estilo resultante.
En Atom Editor tenemos dos auto-compiladores que funcionan muy bien, comprobado 😉 son el llamado sass-autocompile y el less-autocompile. No hay más que ir a la sección de instalación de paquetes de nuestro Atom Editor, buscar e instalar.
Como se puede ver en la imagen, se puede descargar una versión de Bootstrap preparada para usar SASS. Todos los ficheros tienen la extensión .scss porque son de SASS. Así que con un fichero styles.scss podemos reprocesar nuestro Bootstap para modificar el thema propio. En el momento en que se graba el fichero styles.scss, Atom Editor detectará que es un fichero .scss que procesar, y automáticamente generará el fichero styles.min.css listo para incluir en el HTML. En el fichero styles.scss de SASS, lo que tenemos es que, se modifican algunas cosas de los estilos de Bootstrap y a su vez se importan. Es decir, que todos los estilos estarán incluidos en una sola hoja de estilos, y finalmente el navegador sólo tendrá que descargarse un único fichero .css con todo unificado y comprimido.
Lo mismo funciona para LESS, es la misma idea, aunque la sintaxis es distinta. Algunos recomiendan SASS para los principiantes, pero realmente con la documentación a mano no veo ningún inconveniente a trabajar con LESS.
Unos enlaces relacionados
No debería de dejar enlaces, porque puede que te vayas de la web. Pero el objetivo de este post es echar un cable, así que ahí van xD
Poder definir variables, anidar estilos, etc.. le da mucha potencia a la maquetación. Si a esto le añadimos lo que comentaba al principio, pensando en los dispositivos móviles, podemos ajustar nuestra plantilla, para que sea lo más accesible desde cualquier tipo de dispositivo..
