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

Cómo usar ffmpeg para editar video

FFmpeg es una potente herramienta con la que podemos convertir entre formatos de video, rotar, reducir tamaño, calidad o resolución, y muchas otras operaciones, todo ello automatizado desde una terminal.

Una de mis herramientas preferidas para conversión multimedia es ffmpeg. Se trata de una herramienta de línea de comandos que permite realizar multitud de tareas relacionadas con video, audio o incluso imágenes.

Aunque su uso no es excesivamente complejo, la gran cantidad de parámetros, combinaciones y el inmenso abanico de formatos y sus características, hacen que el uso de ffmpeg sea poco intuitivo cuando empezamos a utilizarlo (o incluso más tarde, si no lo tenemos bien claro).

En este artículo vamos a explicar como utilizar esta herramienta de forma sencilla, dando un repaso a las tareas de edición de video más comunes y prácticas, viendo ejemplos prácticos para aplicar.

Instalación de ffmpeg

La herramienta ffmpeg es multiplataforma, por lo que puede instalarse en cualquier sistema, ya sea GNU/Linux, Windows o Mac. En el caso de Windows, la página tiene varias versiones (static, shared y dev). Aconsejo instalar la versión static de 64 bits (si nuestro sistema es de 64 bits), que contiene una carpeta bin con el archivo ffmpeg.exe que nos interesa. Dicho archivo puede colocarse en una carpeta que esté en el PATH del sistema, o simplemente colocarlo en una carpeta del sistema como C:\windows, por ejemplo.

Si acostumbras a trabajar en una terminal de texto bajo windows, mira primero el artículo Cómo mejorar la terminal de Windows donde encontrarás algunos consejos para instalar ConEmu y Chocolatey y tener una potente terminal de texto.

En el caso de GNU/Linux puedes utilizar el comando apt-get install ffmpeg. En Windows, si tienes ya instalado Chocolatey, puedes usar choco install ffmpeg.

Obtener información de un video

Una vez instalado, podemos ver información sobre nuestros videos de la siguiente forma:

ffmpeg -i video.mp4

El parámetro -i indica que se va a indicar un archivo de entrada (en nuestro caso, el video) y a continuación, dicho archivo. Obtendremos que ffmpeg nos devuelve gran cantidad de información. La parte clave es la que resalto a continuación:

  • Naranja: Se trata del comando que escribimos en la terminal de texto para lanzar ffmpeg y realizar alguna acción. En este caso, obtener información del video.
  • Verde/Amarillo: Características del archivo en general (duración y bitrate del video+audio, por ejemplo).
  • Azul: Información sobre el canal de video: codec, resolución, proporción de aspecto, calidad de video, fps, etc...
  • Rojo: Información sobre el canal de audio: codec, frecuencia de muestreo, calidad de audio, etc...

Con esto puedes obtener información sobre un archivo de video y sus características.

Conversión entre formatos de video

Uno de los puntos fuertes de ffmpeg es que permite realizar practicamente cualquier tipo de conversión entre los diferentes formatos de video y audio (que no son pocos). El único requisito es tener una idea general de los diferentes codecs que existen, por lo que recomiendo altamente leer Formatos de video: todo lo que deberías saber y Formatos de audio: todo lo que deberías saber antes de comenzar a utilizar ffmpeg. De esa forma, teniendo clara la diferencia de un contenedor y un codec, de los diferentes formatos que existen y otras cuestiones, es muy sencillo utilizar ffmpeg.

Podemos realizar conversiones aprovechándonos de las extensiones comunes de ciertos formatos de video, ya que ffmpeg los detecta automaticamente. Por ejemplo:

ffmpeg -i video_original.avi video_destino.mp4

En este ejemplo, le indicamos a ffmpeg que el formato de entrada es video_original.avi (mediante el parámetro -i) y que lo convierta a un archivo de destino al cuál le hemos indicado la extensión .mp4. De esta forma, ffmpeg busca los codecs de video y de audio apropiados para este formato (automáticamente selecciona h264 para video y aac para audio).

Veamos otro ejemplo haciendo una conversión de MP4 a MKV (matroska):

No obstante, podemos ser más específicos y personalizar los formatos que queremos utilizar. Por ejemplo, especificando el codec de video y el codec de audio que queremos en el archivo de destino:

ffmpeg -i video_original.mp4 -vcodec libx264 video_264.mkv
ffmpeg -i video_original.mp4 -vcodec libx265 video_265.mkv

En ambos ejemplos anteriores estamos creando un archivo de video Matroska (MKV), con canal de audio vorbis en ambos casos. Sin embargo, en el primer ejemplo, estamos utilizando el codec de video h264 (mediante la librería libx264), mientras que en el segundo ejemplo utilizamos el codec de video h265 (mediante la librería libx265), aún en desarrollo y futuro sucesor de H264.

Los resultados son bastante interesantes, puesto que el primer archivo resultante ocupa 120MB, mientras que el segundo 69MB. Ambos a 1080p (HD) y con la misma aparente calidad (eso sí, el segundo tarda más en comprimir y crearse).

También podemos hacer lo mismo con los canales de audio:

ffmpeg -i video.mp4 -vcodec copy -acodec mp3 h264_mp3.mkv
ffmpeg -i video.mp4 -vcodec copy -acodec aac h264_aac.mkv
ffmpeg -i video.mp4 -vcodec copy -acodec libvorbis h264_vorbis.mkv

Observa que en estos casos, hemos especificado copy en el codec de video, lo que obliga a ffmpeg a no hacer conversión de formatos de video, sino utilizar el que ya tiene (ahorrando mucho tiempo porque no hay que recomprimir el video), mientras que le especificamos el codec de audio mediante acodec.

Tanto en vcodec como en acodec tenemos que especificar la librería de codec a utilizar. En el caso de especificar el formato (como por ejemplo, «mp3»), el ffmpeg se encarga de seleccionar la librería más apropiada (libmp3lame, en este caso).

[...]

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

Cómo configurar Atom Editor (y sus mejores plugins)

Atom es un editor de código open source desarrollado por GitHub. Su mejor característica es su alta personalización. Aquí tienes algunos de sus mejores paquetes (plugins).

Hace algún tiempo, escribí esta guía de Sublime Text (que te aconsejo que repases, ya que la mayoría de las funciones que comento se aplican exactamente igual en Atom). En dicha guía, hablaba de uno de mis editores de código para desarrollo web favoritos: Sublime Text. Sin embargo, con el paso del tiempo GitHub ha mejorado sustancialmente su editor de código Atom, un editor open source con el objetivo de convertirse en la alternativa libre de Sublime Text, clonando la mayoría de sus características estrella, y mejorándolo en muchos otros aspectos.

En la actualidad, Atom es el editor que más utilizo. Hay varias opciones interesantes encima de la mesa, cada una de ellas con sus ventajas e inconvenientes: Atom Editor, Adobe Brackets, Sublime Text y Visual Studio Code son las que creo que merecen los 4 primeros puestos. Existen otros editores para programar, incluso si prefieres programar en terminal de texto, pero personal y subjetivamente, creo que Atom es la opción ideal por un sólo detalle: su alta capacidad de personalización. Es cierto que Atom es notablemente más lento que Sublime Text, pero confío en que sea algo que se vaya solucionando con el tiempo. No obstante, recomiendo siempre que cada usuario pruebe cada uno de ellos y saque sus propias conclusiones.

Recientemente, Atom ha anunciado que, de forma similar a como hace Google Chrome u otros navegadores, ha establecido varios canales diferentes para su editor: un canal beta, un canal estable y un canal de desarrollo. Con esto podremos utilizar la versión que más nos interese, dependiendo si buscamos estabilidad o las últimas novedades disponibles.

El núcleo de Atom

Atom está desarrollado mediante Electron, un framework que utiliza NodeJS y Chromium para crear aplicaciones de escritorio, por lo que la propia plataforma está construída con tecnologías web como HTML y CSS. Esa es una de las razones por la que es tan personalizable (y no tan rápida como otras nativas).

Si vamos al menú View / Developer / Toggle Developer Tools o pulsamos CTRL+ALT+I, podemos abrir las herramientas de desarrollo de Chromium, pudiendo ver la estructura interna del programa. Esto es muy interesante, puesto que si tenemos conocimientos de HTML y CSS, en el menú File / Open your stylesheet podremos modificar una hoja de estilo LESS para personalizar estilos del propio editor y así personalizar su aspecto a nuestro gusto mediante propiedades de CSS.

Los paquetes de Atom, su funcionalidad estrella

Como comentabamos, la mejor característica de Atom es su alta personalización. Practicamente puedes configurar cualquier detalle del editor, que tiene ya una gran comunidad detrás que desarrolla y crea cada vez más paquetes y plugins para extender el funcionamiento del programa base.

Para buscar e instalar paquetes, sólo tenemos que ir al menú File / Settings / Install y escribir el nombre de lo que queremos buscar en la caja del buscador que nos aparece. A la derecha de dicho buscador apreciaremos que podemos marcar Packages o Themes. En el primer caso buscaremos paquetes, o lo que es lo mismo, plugins para añadir funcionalidades extra al editor. En el segundo caso estaremos buscando temas, o sea, paquetes diseñados para cambiar la apariencia visual del editor.

Más adelante observaremos que Atom tiene los paquetes categorizados en varias secciones: Core, que son los paquetes que vienen incorporados de serie, mientras que Community engloba los paquetes que descargamos y que están desarrollados por miembros externos a los desarrolladores de Atom.

La filosofía de Atom es tener un editor totalmente modular, de modo que si hay alguna funcionalidad de serie del editor que no utilizamos, podemos desactivarla en los paquetes core, y así descargar de trabajo al editor.

Por ejemplo, yo no suelo utilizar el árbol de directorios de la izquierda, por lo que suelo desactivar paquetes como tree-view o lenguajes en los que no programo como language-clojure, language-objective-c o language-ruby-on-rails, entre otros. Observa que puedes desactivar temporalmente (Disable) o desinstalar permanentemente (Uninstall) los paquetes, dependiendo del uso que vayas a darle a dicha característica.

Soporte para lenguajes

Estos últimos paquetes que mencioné en el punto anterior, que comienzan su nombre por language-, son unos paquetes especiales que incorporan la sintaxis de un lenguaje de programación para ser reconocido por el editor. Atom incorpora varios de estos paquetes de serie, como por ejemplo, language-css, language-csharp, language-html o language-java, entre muchos otros.

Sin embargo, otros lenguajes como language-jade, language-latex o language-postcss no vienen incorporados de serie, y pueden instalarse mediante paquetes de la comunidad, que son creados para extender y añadir más características.

Una de las características que siempre solemos buscar en un buen editor es la función de autocompletado del lenguaje que estamos utilizando, para así mostrarnos sugerencias al escribir una o varias letras, por si no recordamos exactamente la palabra clave que ibamos a escribir.

En Atom, es aconsejable tener el paquete autocomplete-plus para dotar de un motor de autocompletado, y luego, los paquetes del lenguaje en cuestión, como podrían ser autocomplete-css, autocomplete-python o autocomplete-php, para CSS, Python y PHP, respectivamente.

[...]

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

1 2 3 4 ... 390 #