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]

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

Cómo obtener una referencia al ámbito global en cualquier entorno JavaScript (HTML, Node.js, Windows Scripting Host...)

El ámbito global de JavaScript es el ámbito superior en el que se definen las variables y que contiene algunas de las funcionalidades globales del entorno de ejecución. Se trata de un objeto especial que: Siempre está disponible Se llama de manera implícita, es decir, no es necesario mencionar su nombre explícitamente para usar sus métodos o propiedades, al contrario que con cualquier otro objeto. Según indica el estándar ECMAScript, este objeto global no dispone de constructor ni de prototipo y no se puede invocar como una función al igual que el resto de los objetos. Si en un fragmento de código JavaScript definimos una variable o una función como estas fuera de todo contexto, o sea, para simplificar, sin ser dentro de una función): var miVar = 0; function sumar(a, b) { return a+b; } Lo que estamos haciendo es crear sendos miembros en el objeto global, que es el que constituye ... [Más]

Precedencia de codificaciones en una página web

En informática existen muchas maneras diferentes de representar texto, de modo que pueda representar diversos conjuntos de caracteres, ideogramas y símbolos.Al principio todo era muy sencillo, pero poco útil. Los estadounidenses desarrollaron la informática y, como no, la hicieron totalmente "anglocéntrica" desarrollando el conjunto de caracteres ASCII (American Standard Code for Information Interchange). ASCII era capaz de representar 128 caracteres diferentes del alfabeto anglosajón. Por lo tanto no había ni tildes, ni "eñes" ni por supuesto caracteres cirílicos, ideogramas japoneses, etc...En la actualidad existen infinidad de maneras de codificar los caracteres para almacenarlos, transmitirlos y mostrarlos en un sistema informático. El más común y utilizado en el mundo es UTF-8 (Unicode transformation Format-8). UTF-8 es capaz de codificar millones de caracteres diferentes y dispone de todos los símbolos usados en lenguajes humanos, además de otro tipo de representaciones (como emo... [Más]

SNI: usar certificados SSL para varios dominios desde la misma IP (con IIS 8.0)

Cuando un navegador se conecta a un servidor web usando el protocolo comúnmente conocido como SSL (Secure Sockets Layer, de manera más formal SSL/TLS: Transport Layer Security), las comunicaciones se cifran entre ambos con el triple objeto de:Evitar que se puedan inspeccionar (cifrado)Evitar que se puedan modificar (no repudio)Autenticar al servidor, y opcionalmente al cliente, aunque no es lo habitual (autenticación).El handsahe de TLS se produce antes de que se intercambien cabeceras algunas entre cliente y servidor. Es decir, que en la comunicación que se inicia todo el tráfico va encriptado, incluso las propias peticiones, lo cual incluye el propio nombre de dominio al que nos conectamos. Esto presenta una dificultad para el servidor ya que hasta que recibe la petición y la descifra no sabe a qué dominio nos queremos conectar, pero si no lo sabe ¿cómo sabe qué certificado debe utilizar?La respuesta tradicional a este problema ha sido que cada certificado SSL estuviese asignado a un... [Más]

Off-Topic: Nuevo curso de programación profesional con JavaScript

Los que seguís con asiduidad este blog habréis notado que he estado un poco ausente durante las últimas semanas. Aparte de que he estado creando mucho material para nuestro blog para programadores de campusMVP, el principal motivo ha sido que durante los meses de verano y hasta finales de la semana pasada he estado trabajando duramente en crear un nuevo curso para campusMVP: JavaScript profesional para desarrolladores y diseñadores web Ha sido un trabajo bastante duro a pesar de que ya he escrito varios libros sobre el tema, principalmente porque he tratado de crear un curso muy práctico, y al mismo tiempo que sirviera para el mayor número de programadores posible. Para ello, aparte de la teoría correspondiente (que es mucha) he grabado más de 13 horas de vídeos prácticos y muchos ejemplos Esto que puede parecer relativamente poco, es mucho para un curso como este que tiene además gran cantidad de material teórico escrito (que también es muy necesario). Y es que además, entre preparaci... [Más]

Uso de condiciones complejas en instrucciones switch de JavaScript (y otros lenguajes)

La instrucción switch en JavaScript nos permite tomar decisiones a partir de una lista de posibles valores que se compraran con una variable. Por ejemplo, si tenemos una variable "x" y queremos realizar una acción en función del valor que tenga ésta, escribiremos esto: switch (x) {   case 0:      //Acción para el 0      break;   case 1:      //Acción para el 1      break;   case 2:      //Acción para el 2      break;    ........   default:      //Acción por defecto} Esta instrucción de control de flujo nos evita tener que crear multitud de condicionales if-then anidados para conseguir el mismo efecto. Así, podemos poner cada uno de los valores posibles y realizar las acciones pertinent... [Más]

Después de las media queries llegan las feature queries en CSS3

Si alguna vez has utilizado Modernizr sabrás que esta biblioteca de JavaScript te permite determinar qué características soporta un navegador y cuáles no, tanto mediante código como mediante CSS (gracias a unas clases que añade a tu página por código). La verdad es que Modernizr está muy bien, pero añade complejidad a las páginas y puede afectar al rendimiento ya que debe procesarse antes de poder aplicar las correcciones apropiadas. ¿No sería estupendo que pudiésemos hacer este tipo de comprobaciones directamente con reglas CSS? Al igual que CSS3 nos trajo las media queries para poder hacer consultas sobre el medio en el que se visualiza una página, introdujo también las “CSS feature queries” que se consiguen mediante el uso de la palabra clave @supports en las reglas CSS. Del mismo modo que las media queries usan regiones de tipo @media para agrupar reglas qu... [Más]

Evitar parpadeo de color blanco mientras carga un marco interno en una página HTML

Hoy un truco rápido pero interesante. Si tienes una página HTML en la que debes incluir un marco interno que muestra recursos de otras páginas lo normal es que simplemente insertes el iframe y punto. Por ejemplo <iframe src=“/modulo/OtraPagina.aspx” style=”width:100%;height:30px;”> Lo malo de hacer esto es que el contenido del marco lógicamente comienza a cargar más tarde que el de la propia página, y por regla general observamos durante una fracción de segundo (o puede que más si la carga es lenta) un espacio en blanco en donde va a estar situado el nuevo contenido. Si el fondo de la página principal no es blanco se notará un montón y producirá una especie de “parpadeo” que se notará, puede resultar molesto y además queda poco profesional. Un primer intento que podemos hacer para solucionarlo es cambiar el color del fondo del marco para que coincida con el fondo de la página. Pero no funcionará porque lo que tenemos dentro del marco es un nuevo documento HTML... [Más]

Recuperar la vista de diseño y la vista partida para HTML en Visual Studio 2013

Hasta ahora estábamos acostumbrados a que en Visual Studio pudiésemos editar páginas HTML usando un diseñador que nos permitía alternar entre tres vistas diferentes: Design: edición visual de la página, pudiendo sacar partido a herramienta gráficas y facilitándonos la escritura de textos, creación de tablas, etc... Source: edición directa de código fuente HTML, con ayuda “intellisense”, etc... pero nada visual. Split: dividía el diseñador en dos zonas, mostrando en cada parte los dos modos anteriores, de modo que podíamos editar visualmente algo y ver los cambios reflejados en el código y viceversa. En Visual Studio 2013 sin embargo, la primera vez que editamos una página HTML nos damos cuenta de que esta característica ya no está disponible y sólo disponemos de la vista de código. En Visual Studio 2013 han escrito de nuevo desde cero el editor de HTML, que no tiene nada que ver con el anterior aunque se parezcan en el modo “source”, y han dejado fuera estas funcionalida... [Más]