JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

¿Detectar dispositivos móviles mediante código? Una mala idea...

Hace poco alguien me preguntó cómo podía hacer, mediante JavaScript, para detectar si el dispositivo que estaba usando un usuario era o no un móvil. La idea era adaptar la interfaz y parte del JavaScript a ese caso concreto, para mostrar una interfaz y funcionalidad diferente para dispositivos móviles respecto a la "versión" de escritorio de la aplicación web. De entrada, detectar el dispositivo es una práctica muy poco recomendable. Hace ya bastantes años era lo habitual, pero en los últimos años, con la proliferación de dispositivos, navegadores, factores de forma, etc... y la velocidad con la que cambian las características soportadas por todos ellos, hacer una detección de tipo de dispositivo o navegador es una mala idea. La cadena de agente de usuario: mala idea Lo que se hacía hace mucho tiempo para detectar el tipo de dispositivo era utilizar la cadena de agente de usuario (User Agent) de los navegadores, para determinar el tipo de navegador, su versión y el sistema operativo... [Más]

Midiendo el rendimiento de nuestro código JavaScript de manera sencilla desde la consola

Hace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.Cronometrar códigoUna necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera ne... [Más]

Protege tu PC y tus discos externos de robos y pérdidas con TPM y Bitlocker

Cualquiera que maneje una computadora, especialmente si es un portátil, corre el riesgo de perderla o de que se la roben. Incluso un ordenador de sobremesa puede verse comprometido y hay bandas que roban en las empresas solo por los datos que pueden sacar de los PCs. Por ello es importante proteger los datos de cualquier sistema portátil que manejemos, en especial si se trata de una computadora de la empresa. Ya no solo por la información que tengamos, sino porque si perdemos o nos roban un ordenador empresarial, el asaltante podría tener acceso a toda la red interna de la organización. Además, si almacenamos claves u otra información valiosa en la maquina (nunca debemos hacerlo sin cifrar esa información) es todavía peor. Si tienes acceso físico a una maquina es bastante sencillo poder saltarse toda la seguridad y acceder usando cualquiera de las cuentas de usuario existentes, cambiándoles la contraseña. También es posible extraer el disco duro, pincharlo a otro equipo y utiliza... [Más]

Precarga y renderizado de páginas y recursos para mejorar el rendimiento de navegación

Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores. Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón "adelante" hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de "adelante" se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en c... [Más]

HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página. Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias. Un caso "extraño" se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros. Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo
, uno dentro de otro... [Más]

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Cómo evitar el uso de jQuery para tareas sencillas de manipulación de clases CSS en páginas web...

Se explica:
- Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
- Cómo quitar clases
- Cómo añadir clases
- Cómo alternar clases
- Cómo comprobar si un elemento tiene aplicada o no una determinada clase
- Cómo dar soporte a navegadores muy antiguos

tanto en jQuery como en JavaScript puro. [Más]

JavaScript: ¿qué diferencia hay entre funciones anónimas y con nombre?

En JavaScript tenemos básicamente dos formas de definir funciones. La primera y más tradicional es usando la palabra clave function y otorgándole un nombre a la función. Por ejemplo: function miFunc() { ..... //Código de la función } A esto se le llama declaración de funciones.Otro modo muy habitual es, simplemente, asignar una función anónima a una variable para trabajar con ella, algo así: var miFunc = function() { .... //Código de la función } A esto se le llama expresión funcional o asignación de funciones. De hecho es posible, aunque no frecuente, hacer una combinación de ambos estilos:var miFunc = function miFuncion(){ .... //Código de la función }Lo que constituiría una asignación de función con nombre.Todos estos casos son equivalentes, pero solo en apariencia. En todos ellos podemos llamar a la función escribiendo: miFunc(); y aparentemente todo parece funcionar del mismo modo. Sin embargo ¿existe alguna diferencia entre declarar una funció... [Más]

Utilidades: Vigilar páginas web en busca de cambios

Una de las herramientas más interesantes que he descubierto en los últimos meses es de la que voy a hablar ahora aquí. Se trata de Visualping, una utilidad para verificar periódicamente el contenido de una página y recibir alertas cuando cambia.Lo interesante es que la comparación la hace visualmente, de modo que analiza una captura visual de la página y si hay un cambio en determinado % de los píxeles, salta la notificación. esto permite obtener alertas no solo cuando cambia un texto, sino cuando cambia un color, una imagen, o la forma de un objeto por culpa del CSS.Yo lo uso, por ejemplo, para enterarme de cuándo hay nuevas versiones de algunas aplicaciones que no tienen actualización automática ni tampoco RSS u otra forma de estar al día de los cambios.Un ejemplo paradigmático es Filezilla Server. Este excelente servidor FTP Open Source se actualiza de tarde en tarde, y generalmente cuando lo hace es porque hay algún problema de seguridad que han solucionado. Su conocidísima versión... [Más]

Cómo procesar y tratar datos JSON con Excel

Hace 15 años parecía que el futuro del intercambio de datos pasaba por XML. Este lenguaje de marcas permitía definir estructuras de datos todo lo complejas que necesitáramos, con varios niveles de estructura anidados, y de manera sencilla pues está basado en texto. De hecho recuerdo que cuando apareció la plataforma .NET lo que más destacaban en la documentación era el soporte para XML (hasta el propio nombre se derivaba en cierto modo de que estaba preparado para la Red gracias a este soporte).Desde entonces ha llovido mucho, y las cosas han cambiado mucho también. En la actualidad existe un consenso bastante amplio en que el formato de intercambio de datos por antonomasia es JSON: JavaScript Object Notation. Este formato, basado en sintaxis JavaScript, tiene todas las ventajas del XML como el poder describir estructuras todo lo complejas que queramos, pero añade varias ventajas, como que es más fácil de leer y escribir por los humanos y, sobre todo, que es mucho más compacto para ser... [Más]