Credit image

Browser Wars: La historia de la guerra de navegadores

Browser Wars (La guerra de los navegadores) es una historia que comienza en 1993, con los primeros navegadores web y que dura hasta nuestros días, ¿quieres conocerla?

Hace mucho tiempo, en un ciberespacio muy, muy lejano, se ideó un sistema para que cualquier navegador web (cliente) que sea utilizado para acceder a una página web tuviera una identificación interna denominada User Agent (Agente de usuario). Este Agente de usuario no era más que una cadena de texto establecida por los creadores del navegador para identificar de que aplicación se trata.

Basta con acceder a la consola Javascript del navegador, en el caso de Chrome pulsando CTRL+SHIFT+I, y escribir navigator.userAgent para observar la identificación del navegador en cuestión.

Si te has puesto a curiosear entre los datos que aparecen, te habrás extrañado al comprobar que muestra información confusa. ¿Por qué aparece la palabra "Safari" si se trata de un Google Chrome? ¿Por qué aparece la palabra "Mozilla" si es un Internet Explorer? Son preguntas que suelen surgir mucho en mis cursos de Javascript y que tienen una explicación histórica que muestra el delicado problema de la retrocompatibilidad unido al hecho de tener que depender de los navegadores más utilizados, algo que sufrimos frecuentemente en todo lo relativo a web.

La cadena de texto User Agent es uno de los datos que debe entregar el navegador al acceder a una web para identificarse. De hecho, no tiene porque ser realmente un usuario con un navegador, podría tratarse de un acceso no humano (robot) como GoogleBot, el crawler de Google que se encarga de revisar un sitio web para posteriormente indexarlo en el buscador, o FacebookExternalHit, un robot de Facebook que revisa la URL cada vez que alguien pone un enlace en un mensaje privado a otro usuario en dicha red social. Cada uno de estos robots entrega su propia cadena de texto de identificación al entrar en el sitio web.

Episodio I: El despertar de la fuerza

Alrededor del año 1993, aparecieron los primeros navegadores web gráficos. ViolaWWW fue el primero de ellos, y Mosaic, aunque fue el segundo, se hizo mucho más popular. Incluso hoy en día podemos descargar las diferentes versiones de Mosaic desde la web del NCSA (aunque para funcionar en sistemas actuales debemos tener una máquina virtual o emulador con los sistemas operativos correspondientes).

En este primer navegador, el agente de usuario era muy simple, y su finalidad era identificar el navegador que se utilizaba, junto a su versión. Estos datos eran registrados en los logs de los servidores web, que posteriormente se podrían procesar para realizar análisis estadísticos, como actualmente lo hace Google Analytics y antiguamente se utilizaban aplicaciones de servidor del estilo de AWStats o Webalizer que generaban estadísticas con cierta frecuencia. La identificación del navegador Mosaic era algo similar a esto:

NCSA_Mosaic/1.0

Poco más tarde, se darían cuenta de que los usuarios podían utilizar el navegador desde diferentes plataformas, por lo que sería conveniente identificar otros detalles como el sistema operativo y la versión o características del mismo, algo que nos daría más control sobre la situación del usuario. Para ello, se modificó el user agent para así poder reflejarlas:

NCSA_Mosaic/2.0 (Windows 3.1)
NCSA_Mosaic/2.6 (X11; SunOS 4.1.3 sun4m)

Mientras tanto, cerca de 1994, aparecía Netscape Navigator, un navegador creado desde cero por algunos de los fundadores de Mosaic. Su nombre código nos sonará bastante: Mozilla. El nombre se originó de la unión de «Mosaic» y «killer», además de su sonoridad similar a «Godzilla», ya que el objetivo de Netscape era «destruir» Mosaic, que era el navegador más utilizado del momento. A parte del nombre código de Netscape, Mozilla era la mascota de Netscape, un lagarto originalmente verde y morado (que posteriormente se volvería rojo). Con el tiempo, Netscape acabaría siendo el navegador más utilizado, reemplazando a Mosaic que terminaría por abandonarse su desarrollo.

El User agent de las primeras versiones de Netscape era algo parecido a esto:

Mozilla/3.0 (Macintosh; U; PPC Mac OS X; es-ES)
Mozilla/3.0 (Win95; I)
Mozilla/3.0 (X11; I; AIX 2)
Mozilla/4.0 [es] (Win95; U)

Utilizaba su nombre código para hacer referencia al navegador, el sistema operativo (Macintosh, Win95, AIX...) y algunos datos adicionales como el idioma del navegador o el nivel de cifrado utilizado:

  • N: Sin cifrado
  • I: Cifrado débil (40 bits)
  • U: Cifrado fuerte (128 bits)

Hasta la salida de la versión 6, Netscape introdujo alguna variación, donde colocaba el idioma del navegador entre corchetes en la parte central (como se ve en el último ejemplo), justo antes de indicar el sistema operativo, esquema que abandonaría poco después.

Episodio II: Las guerras clon

Internet Explorer hacía su aparición por esa época, basándose en el código de una versión comercial de Mosaic, perteneciente a una empresa llamada Spyglass, e incluyéndolo de serie en el sistema operativo Windows para intentar competir contra Netscape (y evitar pagar derechos). Es entonces cuando empezaría la era de las guerras entre navegadores, concretamente entre Netscape Navigator e Internet Explorer, sin androides y sables láser, pero con todo tipo de artimañanas para sobresalir por encima del otro.

[...]

Queda el 72% del artículo
Leer artículo completo

10 alternativas a PowerPoint: crear presentaciones web

¿Quieres crear presentaciones web en HTML5? Existen varios frameworks Javascript con los que podrás crear sorprendentes diapositivas de forma muy sencilla.

Necesitamos crear varias diapositivas para presentar y explicar un tema o trabajo, pero luego queremos colgarla en Internet. Probablemente, la opción más tradicional es utilizar PowerPoint y hacer alguna presentación con él. O quizás con KeyNote, Google Docs o Prezi.

Aunque siempre está bien tener una versión alternativa, o subir un PDF a SlideShare o SpeakerDeck para ir sobre seguro, mi opción favorita suele ser utilizar un framework Javascript para hacer diapositivas basadas en la tecnología nativa de la web: HTML5, CSS3 y Javascript.

Las razones por las que prefiero las presentaciones web son varias, pero se resumen en una: «la potencia de la web, en mis diapositivas»:

  • Puedo utilizar transiciones CSS y animaciones CSS para hacer diapositivas interactivas.
  • Puedo crear formularios interactivos para demostraciones en vivo.
  • Puedo incluir videos de Youtube, Vimeo o mediante etiquetas <video> de HTML5. Idem con audios de SoundCloud o etiquetas <audio>.
  • Puedo incluir código Javascript para interactuar con diapositivas o páginas.
  • Puedo moverme facilmente entre diapositivas o personalizar su funcionamiento.
  • Puedo editar facilmente las diapositivas o corregir errores desde el código fuente.
  • Puedo preparar varios temas (oscuro y claro) y cambiarlos con un solo click.
  • Cualquier navegador moderno las soporta (algunas incluso se adaptan a móviles).
  • Puedo modificar la presentación (erratas, por ejemplo) facilmente si la tengo subida a Internet.

Pero como desarrollar una presentación desde cero podría ser algo tedioso, existen varios frameworks o «librerías» Javascript que facilitan dicha tarea, simplificándolo considerablemente hasta el punto de sólo necesitar saber HTML (o ni siquiera eso).

1. Impress.js

Este es uno de mis frameworks preferidos para crear presentaciones. Impress.js permite crear llamativas presentaciones pudiendo utilizar efectos 2D/3D para movernos entre diapositivas, simplemente indicando con clases las diferentes diapositivas y utilizando algunas opciones y parámetros para movernos en los diferentes ejes X, Y y Z o utilizar otros efectos de transformaciones.

Aunque estas herramientas limitan bastante las posibilidades del framework, Strut editor permite crear diapositivas de una forma más sencilla y visual, siendo compatible con impress.js y con bespoke.js (ver más adelante).

Algunas presentaciones de ejemplo:

Github | Impress.js

2. Reveal.js

Mi segundo framework preferido para crear presentaciones web se llama Reveal.js. Es muy sencillo y práctico, aunque no es tan potente como el anterior. Reveal.js tiene un flujo de diapositivas muy intuitivo, ya que muestra una cruceta en la esquina inferior-derecha donde puedes ver hacia donde te puedes mover en la presentación.

Por defecto, puedes ir avanzando diapositivas en horizontal (hacia la derecha), pero también permite colocar diapositivas en vertical, y así poder organizar mejor los temas de la presentación.

Algunas presentaciones de ejemplo:

Github | Reveal.js

3. Stack.js

Stack.js es una librería minimalista que permite hacer presentaciones basadas en scroll vertical (o alternativamente, con teclado), pasando entre diapositivas cuando la barra lateral llega a la parte superior. Permite diseños responsive (se adapta al tamaño del navegador), ejecutar eventos cuando una diapositiva está visible, entre otras cosas. Ideal para presentaciones minimalistas y elegantes.

Github | Stack.js

[...]

Queda el 55% del artículo
Leer artículo completo

¿Navegador lento? Guía para acelerar Chrome

¿Chrome va muy lento? ¿Tienes problemas con el navegador? En este artículo damos un repaso a una serie de consejos para mejorar su rendimiento.

Si te hicieran la pregunta «¿Cuál es el programa que utilizas con más frecuencia?», muy probablemente la respuesta sería el navegador web. Aunque Mozilla Firefox le suele seguir en el segundo puesto, Google Chrome es el navegador más utilizado con gran diferencia.

Las razones suelen ser muy variadas: funcionalidades, velocidad, estabilidad, implementación y actualización constante con mejoras y características técnicas, gran comunidad de extensiones, facilidad de uso e integración con servicios web y un largo etcétera.

¿Navegador muy lento? Guía para acelerar Google Chrome

De hecho, si también preguntáramos cuál es el principal problema de Google Chrome, es muy probable que obtuvieramos la misma respuesta: su alto consumo de memoria RAM. Lejos quedaron los días en los que los navegadores eran sencillas aplicaciones para mostrar una simple página web. Actualmente tienen soporte de pestañas para abrir múltiples páginas a la vez, extensiones que modifican el comportamiento del navegador (o de la página que visitas), posibilidad de reproducir audio y video nativamente, o incluso de generar contenido multimedia 3D para crear animaciones o juegos en los que se utiliza la tarjeta gráfica del sistema. Todo esto, se refleja en el consumo de recursos del sistema, por lo que podemos necesitar un equipo potente dependiendo del uso que le estemos dando.

Comportamiento habitual de Google Chrome

Resumiendo: una de las principales preocupaciones de los usuarios al utilizar Google Chrome es que el navegador puede ser bastante lento. En gran parte, esto es tarea de los desarrolladores de Chrome, aunque nosotros también podemos ajustar al máximo ciertos detalles del navegador para que funcione lo mejor posible. En este artículo hablaremos precisamente de eso: Cómo conseguir que nuestro Chrome sea más rápido.

Gestión de memoria: Chrome consume demasiado

Como habíamos mencionado, uno de los mayores problemas de Chrome suele ser que consume demasiada memoria RAM. Esto normalmente ocurre porque tenemos sobrecargado el navegador con muchas características que puede que no estemos utilizando. El primer paso debería ser analizar e investigar cuanto consume Google Chrome y que partes son las que más RAM están utilizando.

Pulsando CTRL+SHIFT+ESC, podemos acceder al Administrador de tareas de Windows (o usar el del sistema que estemos utilizando) y veremos lo que consume cada ventana del navegador (proceso chrome.exe), pero no cada parte individual. Sin embargo, Google Chrome tiene su propio administrador de tareas, donde se puede diferenciar y ver la memoria que está utilizando cada pestaña o página abierta y cada extensión cargada en el navegador.

Administrador de tareas de Google Chrome

Para ello, simplemente pulsamos SHIFT+ESC (o botón derecho sobre la barra de título del navegador y seleccionar Administrador de tareas). En esa ventana podemos ver el consumo de RAM (Memoria), el uso de procesador (CPU) o el uso de conexión (Red). También podemos pulsar con botón derecho sobre la cabecera y activar columnas como Memoria de Javascript, Memoria de la GPU o Caché de imagen entre otros, para saber cuanto están consumiendo en cada sección concreta, lo que puede ser especialmente útil para los desarrolladores.

Mediante este panel, podremos averiguar que páginas son las que más memoria consumen, ya que como podemos ver, no es lo mismo abrir Spotify que abrir Twitter. También podemos abrir una nueva pestaña y escribir el siguiente texto: chrome://memory-redirect. Esto no es más que una página interna especial de Chrome que nos muestra información técnica e incluso la opción de comparar la memoria que consumen otros navegadores, respecto a Google Chrome.

Deshabilitar extensiones prescindibles

El lector habrá llegado a la conclusión más evidente de esta guía, quitar extensiones que no utilice de Chrome. En el punto anterior, se reflejaban dichas extensiones y cuanta memoria RAM consumía cada una. Esto nos puede servir para detectar si existe alguna extensión que esté consumiendo demasiado, o simplemente para revisar y desactivar temporalmente.

Puedes desactivar temporalmente extensiones de Google Chrome

Podemos pulsar en el botón de las 3 líneas (hamburguesa) y seleccionar Más herramientas / Extensiones, o simplemente escribir chrome://extensions/ en una nueva pestaña. Con esto llegaremos a un panel de configuración donde podemos eliminar o deshabilitar temporalmente las extensiones, para que no consuman memoria RAM.

Cada usuario debe considerar las extensiones que son necesarias para sus hábitos de navegación y cuales puede desactivar temporalmente o eliminar por completo.

Y hablando de hábitos... Aunque no esté directamente relacionado con la velocidad del navegador, adquirir buenos hábitos con el método geek conseguirá aumentar nuestra productividad y ahorrar tiempo.

Desactivar pestañas inactivas

En este punto, el usuario podría pensar que cuantas más extensiones desactive o elimine, más memoria ahorrará. Y es cierto, salvo con una excepción: The Great Suspender. Si eres de los que tiene el hábito de dejar múltiples pestañas abiertas, probablemente para revisar después aunque al final no lo hagas por cuestiones de tiempo (no estás sólo, te entendemos), esta extensión te vendrá muy bien.

Se trata de una extensión que vigila nuestro navegador y suspende las pestañas que llevan más de cierto tiempo sin utilizarse. Cuanto más tiempo pasa, menos probable es que volvamos a esa extensión que tenemos pendiente en el navegador, por lo que con esta extensión seguimos teniendo las pestañas en nuestro navegador, pero no consumen memoria RAM en absoluto.

The Great Suspender: Suspende las pestañas que no estés utilizando

The Great Suspender | URL

La extensión es muy personalizable y nos permite reanudar la pestaña simplemente pulsando encima. También nos permite indicar una lista blanca de sitios que no queremos que se suspendan, especificar el tiempo para empezar a suspender pestañas, recuperar automáticamente pestañas cuando se pulse en ellas, suspender pestañas sólo cuando estés con una batería y muchas otras opciones más.

Si por alguna razón, esta extensión no te convence, tienes otras alternativas como Tab Hibernation, Tab Memory Purge o Tab Mem Free. También tienes Tabs Outliner, un poco más orientada a la organización de pestañas.

[...]

Queda el 60% del artículo
Leer artículo completo

Cómo crear GIF animados en 3D (Split-Depth GIF)

¿Te has encontrado con alguno de estos GIF animados en 3D? En este artículo te explico como crearlos de forma sencilla.

Con el renacimiento de los GIF animados en los últimos años, ha nacido también un curioso fenómeno en el que podemos ver GIF animados con lo que parece un efecto 3D muy llamativo y sorprendente, todo ello a simple vista, sin necesidad de utilizar gafas especiales.

¿Cómo crear GIF animados en 3D?

Este fenómeno (que no deja de ser un truco visual) se ha bautizado en Internet con el nombre de SplitDepthGIF (GIF animados con profundidad dividida). En este artículo veremos en que se basa y como crear uno de forma fácil y sencilla.

1. ¿Qué es un «Split Depth GIF»?

Como ya hemos comentado, se trata de un GIF animado modificado especialmente para exagerar el efecto tridimensional de una secuencia de imágenes y conseguir una profundidad y efecto 3D muy realista.

Rocket Raccoon (Guardianes de la Galaxia) en un Split Depth GIF

2. ¿Es un GIF animado en 3D?

Realmente, no. Se podría catalogar como pseudo-3D, ya que la imagen está realmente en dos dimensiones, pero nos aprovechamos de una serie de características que facilitan el que se perciba como algo que podría parecer 3D: poca profundidad de campo (objeto en primer plano sobre fondo borroso), tamaño de objetos respecto al espectador, y sobre todo, unas líneas divisorias generalmente blancas.

[...]

Queda el 86% del artículo
Leer artículo completo

1 2 3 4 ... 18 #