Javascript

Si eres un desarrollador de Node.js, es muy probable que utilices nvm para gestionar las diversas versiones de Node en tu equipo. Esta herramienta resulta extremadamente útil al trabajar en varios proyectos, realizar pruebas en diferentes versiones de Node o ejecutar software en una versión específica que difiere de la que normalmente usas o la que viene pre-instalada en tu sistema operativo. Sin embargo, al emplear este servicio, es posible que necesites actualizar npm, y aquí te mostraré cómo hacerlo.

Actualizar NPM

NPM, o Node Package Manager, es la herramienta que se utiliza para gestionar las dependencias de JavaScript de una aplicación. También sirve como el servicio de alojamiento donde se almacenan dichas dependencias.

No obstante, en ocasiones pueden surgir actualizaciones para esta aplicación. Si utilizas NVM (Node Version Manager), actualizar npm no es tan sencillo como con cualquier otra aplicación, ya que su actualización dependerá de cada versión de Node.js instalada.

Por lo tanto, solo necesitas ejecutar este comando:

nvm install-latest-npm

¡Listo! Ya vas a ver como se va a descargar npm a su última versión y va a funcionar con nvm sin problemas.

La entrada Como actualizar npm cuando se usa nvm se publicó primero en El blog de Skatox.

TypeScript Origins: The Documentary es un documental creado por Keyboard Stories que explora el proceso de creación de TypeScript. Lo más me gustó de ese documental, es que cuenta con comentarios de sus creadores y de las personas involucradas en su desarrollo, presentación y difusión, ofreciendo una visión completa de la historia detrás de este lenguaje. Este documental de TypeScript es algo que no se deben perder si están involucrados de alguna forma con el mundo de la programación.

¿Qué tiene de importante TypeScript?

Si te parece extraño que hayan hecho un documental de TypeScript de este calibre, es porque actualmente es uno de los lenguajes mas populares. JavaScript probablemente es el lenguaje mas popular actualmente, pero tiene muchas carencias como la falta de tipado/tipos (para mí es una de las cosas por las cuales opino que no es un buen lenguaje) que permite entre muchas cosas, crear código mas complejo, ayudar a los programadores escribir mejores programas limitando el tipo de datos que se pueden guardar o pasar en funciones, optimizar la velocidad de ejecución de los programas, entre otros.

TypeScript nace como solución a este problema, expandiendo su uso rápidamente e inclusive siendo sustituto de JS en muchas compañías. Ademas de ser el lenguaje que hizo posible en su día a tecnologías como Angular y Visual Studio Code.

Mi opinión del documental de TypeScript

El documental comienza con los principales creadores narrando cuáles fueron las causas para desarrollar este lenguaje dentro de Microsoft. Luego, muestra un poco el proceso de desarrollo y, posteriormente, el lanzamiento al público. En estas partes, podemos recordar las conferencias en las que fue anunciado.

Me llamó la atención, cómo comentan que querían liberarlo bajo una licencia abierta pero Microsoft no estaba acostumbrado a eso. Pero con la nueva gerencia les tocó evolucionar y lo consiguieron.

En el proceso de creación de TS, vemos como el lenguaje fue usado para construir Visual Studio Code; posteriormente el equipo de Angular (del rival Google), se unió para hacer que TypeScript soportara decoradores gracias al proyecto AtScript.

Pero en vez de contarte mas, te recomiendo que lo veas a continuación:

Me pareció muy inspirador ver este documental de TypeScript. Ver la historia contada por los mismos creadores, observar como creció desde una idea para poder terminar otro proyecto, hasta ser uno de los principales lenguajes de programación, es muy placentero.

Ojalá hagan mas documentales de este tipo, tal vez uno de Visual Studio Code. Pues luego de ver este documental me dio curiosidad de cómo desarrollaron este editor.

Finalmente, te recomiendo aprender este lenguaje y hacer tu experiencia con JS mas placentera.

La entrada Documental de la creación de TypeScript se publicó primero en El blog de Skatox.

Este es un artículo que quería publicar hace un par de años. Quería escribir una comparación breve de React vs Vue para que cualquier persona con deseos de empezar con un nuevo proyecto o aprender front-end tenga una base de cual elegir. Pero siempre quedaba en borrador porque sentía que necesitaba mas experiencia con React (Vue lo uso diariamente en mi trabajo). Pero con la actualización de mis plugins de WordPress he logrado trabajar mas con React y poder hacer una comparación.

Comparación inicial entre React vs Vue

Algo que tienes que tener claro es que ambas tecnologías son librerias. No incluyen todos los componentes para hacer SPA. Pero si permiten crearlas y son la base para crear buenas interfaces dinámicas y ligeras.

Ambas tienen una funcionalidad similar pero con una sintaxis y forma de resolverlo diferente. Por ello, cuando quieres saber de React vs Vue debes enfocarte en cual se te hace mas fácil o te beneficia para tu próximo proyecto.

Ninguna es mejor que la otra, y todo se reduce a facilidad de conseguir programadores, documentación y cual se adapta a tu manera de pensar. Por eso lee los siguentes puntos que me parecen importante para que puedas elegir tu próxima librería de frontend.

Curva de aprendizaje y sintaxis

En mi opinión Vue es el mas fácil de aprender. La sintaxis es HTML con unos atributos especiales como v-if, v-if, v-model que permiten controlar el flujo de ejecución o generación del HTML, de resto es HTML estándar usando {{ }} (doble llaves) para mostrar las variables.

Actualmente posee dos formas de crear los componentes: usando Composition API y Options API. La diferencia entre ellas, es que la primera es parecida a la de React y esta enfocada en la facilidad de importar y reutilizar código. El otro, es la versión clasica donde creamos un objeto del componente con llamadas a los metodos, propiedades, datos, entre otras cosas.

También Vue tiene conceptos como variables computadas y asignación de modelos, que abstraen procesos que se harían manuales en otras librerias pero aqui se hacen de forma automática y podemos, por ejemplo, tener una variable que se compute automaticamente ante cambios, sin preocuparnos por desarrollar el proceso de actualización de la misma.

Aquí puedes ver un ejemplo de un componente sencillo que usa Composition API:

import { ref } from 'vue';

export default {
  setup() {
    const mostrarMensaje = ref(false);
    const nombre = 'María';

    const toggleMostrarMensaje = () => {
      mostrarMensaje.value = !mostrarMensaje.value;
    };

    return {
      mostrarMensaje,
      nombre,
      toggleMostrarMensaje
    };
  },
  render() {
    return (
      <div> 
        <h1>¡Bienvenido/a, {nombre}!</h1>
        <button onClick={toggleMostrarMensaje}>
          <span v-if="mostrarMensaje">Mostrar mensaje</span>
          <span v-else>Ocultar mensaje</span>
        </button>
        <p v-if="mostrarMensaje">Este es un ejemplo de sintaxis de renderización en Vue.</p>
      </div>
    );
  }
};

En cambio React usa JSX para renderizar los componentes. Es una sintaxis que mezcla XML con JS. Utiliza JS para controlar la lógica de renderizado y luego etiquetas HTML para definir los componentes y elementos de la página. Pero no es 100% igual, hay atributos como las clases que se llaman className, en vez de class y otros detalles que debes aprender.

Respecto a la parte de datos, utiliza algo llamado hooks que nos permite reutilizar el código mas facilmente. Aqui la data se maneja con estados. En mi opinión en React como no se abstraen tantas cosas, puedes tener mayor control de tu componente pero requiere que comprendas mejor el ciclo de video de ellos para obtener mejores resultados.

Aquí puedes ver un ejemplo de un componente sencillo que usa hooks:

import React, { useState } from 'react';

const Saludo = () => {
  const [mostrarMensaje, setMostrarMensaje] = useState(false);
  const nombre = 'María';

  const toggleMostrarMensaje = () => {
    setMostrarMensaje(!mostrarMensaje);
  };

  return (
      <div>
        <h1>¡Bienvenido/a, {nombre}!</h1>
        <button onClick={toggleMostrarMensaje}>
              { mostrarMensaje ? 'Ocultar mensaje' : 'Mostrar mensaje'}
        </button>
        { mostrarMensaje && <p>Este es un ejemplo de React JSX.</p> }
      </div>
  );
};

export default Saludo;

Aunque si observan ambos casos la sintaxis es muy similar, con saber buen HTML, no importa si es React vs Vue. Respecto a la sintaxis general

Documentación y comunidad

React debido a su popularidad posee una comunidad mas grande que provee mayor información y contenido. La documentación oficial es muy buena y enseña su uso sin importar que no tengas experiencia en la librería. Está dirigida a todo publico y me parece que nunca tuve dificultad para conseguir información para resolver problemas con React.

Vue también tiene una documentación muy buena, pero no es tan detallada. La comunidad es mas pequeña y en algunos casos debido a esto, no encontrarás mucha información o tutorial como los que existen en React.

En realidad ambos tienen documentación que te permiten aprender a usar estas tecnologías, solo que la de React tiene mas forma de tutorial y por el tamaño de su comunidad, te será mas fácil de encontrar solución a tus problemas.

Developer tools

Ambas librerías poseen herramientas para los navegadores a través de una extensión. En mi opinión las de Vue son mas cómodas, soporta gran variedad de tecnologías, permite ver mejora la información y son mas sencillas.

Captura-de-pantalla-2023-06-17-a-las-2.44.55-p.m

En cambio las de React, me pareció menos potente. A pesar de que puedes ver todos los componentes, no puedes editarlo o hacer operaciones avanzadas sobre los componentes. Y hay limitaciones como no poder usarlas dentro de un iframe que le quitan puntos.

Herramientas de desarrollo de React en Firefox

Pero ambas funcionan correctamente, permiten interactuar con los componentes y cumplen con el objetivo principal de ayudar al programador ver como se renderizan los componentes y ver las variables internas.

Mis recomendaciones

Si estás comenzando en el desarrollo front-end, considero que Vue es la opción ideal debido a su curva de aprendizaje suave y el uso de HTML simple para la creación de componentes visuales. No obstante, si tu objetivo es adquirir habilidades que te ayuden a conseguir trabajo, React es la elección más acertada debido a su mayor popularidad en el mercado laboral. Además, es posible encontrar una mayor cantidad de recursos e ejemplos para aprender, aunque es importante tener en cuenta que se requerirá un dominio previo de JavaScript y mayor esfuerzo inicial para dominarlo por completo.

¡Elige el que te parezca mas cómodo y se ajuste a tus necesidades! Comenta cual usas tú y por qué.

La entrada React vs Vue: ¿Cuál usar? se publicó primero en El blog de Skatox.

Vue.JS es una librería de Javascript que he estado recientemente para mis proyectos. Me gusta por la facilidad de crear vistas, contar con el código HTML, JavaScript y CSS en un mismo archivo de forma separada. Esto facilita ver la estructura del documento, ver los eventos y la apariencia en un mismo lugar. A continuación de hablaré del documental de la creación de Vue.js

Vue.js The Documentary

Pues hace unos meses salió un documental hecho por Honeypot sobre la creación de Vue.js. El documental de la creación de Vue.js se centra principalmente en su autor: su carrera en Google, la idea de crear este framewok, como comenzó a hacerlo, el inicio de su popularidad gracias a Laravel. También explica como actualmente está dedicado a tiempo completo a desarrollar esta biblioteca gracias al patrocinio de sus seguidores.

Te recomiendo ver este documental si has usado la tecnología o eres fanático de la programación. Está muy bien realizado y es entretenido, no me aburrí para nada en sus 30 minutos de duración. Cuenta con varias entrevistas y lo mejor es que son de las personas involucradas del proyecto, así que sabes que todo lo que comentan es real.

¿Cómo ver el documental de la creación de Vue.js?

A continuación te comparto todo el documental. Está hospedado en Youtube de forma gratuita, así que lo podrás ver sin problemas. Haz clic abajo y disfruta durante 30 minutos todo sobre la creación de Vue.js.

Si te gustó el documental sobre la creación de Vue.js, no dudes en compartirlo. Si conoces otro documental de programadores, deja tu comentario para verlo y así expandir mas el conocimiento.

Nota: si últimamente no has hecho aplicaciones del lado del cliente, te llama la atención aprender sobre JavaScript. Vue.js es la mejor opción (para mí) para iniciarte en este mundo.

La entrada Documental sobre la creación de Vue.js se publicó primero en El blog de Skatox.

Hace unos meses tuve la oportunidad de asistir al BrazilJS 2019 como conferencista. Allí dicté la charla con mayor asistencia de todas las que he dado, con 2000 personas aproximadamente y la más dificil que he tenido. Era sobre Aplicaciones de alto rendimiento con WebAssembly.

¿Por qué la mas difícil?

Obviamente se darán cuenta que mi idioma nativo es el español (je,je,je) y como la mayoría de los asistentes habla portugés no sabía si dar la charla en inglés o español. BrazilJS 2019 contaba con un traductor quien me dijo que podía hablar en cualquier idioma y él lo traducía al portugés. Hablando con varias personas, pregunté si debía hablar en español o en inglés. La mayoría me dijo que es mas fácil entender en inglés que español a pesar del parecido con el portugés.

Entonoces, como tenía las láminas traducidas al portugués (siempre traduzco las láminas al idioma nativo del sitio donde voy), tenía que:

Hablar en inglés.
Al ver las láminas para explicar estaban en portugués.
Mis notas y mi idioma nativo estabán en español.

Sin embargo, todo salió bien y pude disfrutar de compartir mis conocimientos ante 2000 personas presentes en el BrazilJS 2019.

¿Cómo es hablar ante tantas personas en un evento como BrazilJs 2019?

En un almuerzo con otros ponentes uno de ellos comentó que luego de 500 personas es casi lo mismo. Si tienes 500 o 2000 personas frente a ti es lo mismo, el campo visual no abarca a ver todos al mismo tiempo. En mi caso me pasó eso, es genial sabe que tanta gente te escucha al mismo tiempo pero no causa mayor nervio o se siente distinto al hablar frente a 400 personas.

Si tienen algún comentario o duda de la charla, pueden dejar un comentario o contactarme.

Espero que les haya gustado, compártanla con otros.

La entrada Mira mi charla de WebAssembly en el BrazilJS 2019 se publicó primero en El blog de Skatox.

Este año tuve la oportunidad de participar en el BrazilJS Conf del 2019. Para quienes no la conocen es la conferencia de JavaScript mas grande del mundo. Había enviado ponencia en las últimas 3 ediciones pero finalmente este año fui aceptado. Mis expectativas era que el evento iba a estar genial pero no sabía como era.

Cuando fui al escenario a realizar la prueba de sonido. Me sorprendí porque no sabía la magnitud del evento. El lugar contaba con puestos para 2000 asistentes y con 4 pantallas gigantes para mostrar la conferencia. Ademas que contaba con excelente organización para entretener a la audiencia y contar con 2 tarimas para no perder tiempo entre ponentes.

El formato de BrazilJS Conf 2019

El evento constaba de 3 días: el primero era de puros talleres y para los ponentes era el día de realizar pruebas. aquí tuve la oportunidad de ver un taller de Matías Johanson sobre el uso de redes neuronales en JavaScript, unas charlas de NIC Brazil y W3C sobre la des-centralización de la web. Pude entrar a una charla de marketing usando datos éticos, es decir, no obtenidos sin permisos de los usuarios o comprados a redes sociales. Me llamó la atención esta última porque no había pensado en que ahora el marketing se hace con datos robados de los usuarios.

El segundo día era el inicio real del evento. Me encantó que habían 2 tarimas, así cuando un ponente estaba por terminar el otro se preparaba y el cambio se hacía sin perder tiempo. También entre cada ponencia un grupo acústico tocaba la canción favorita del ponente entreteniendo la gente. El evento comenzó con un video introductorio de los organizadores, muy emotivo. Luego unas palabras de Jaydson Gomes sobre el trabajo realizado y lo que se esperaba allí. Pude entrar a varias charlas, todas muy buenas y algunas en inglés. Luego de finalizar el evento, varias asistentes organizaron una salida para compartir y conocernos mejor.

El último día seguía el mismo formato del anterior. Llegué un poco tarde por estar practicando mi charla y tenia que hacer una visita. Pero luego de dar mi charla pude disfrutar de todo el evento. En la sala de patrocinantes había un puesto para comprar camisetas donde aproveche y adquirí de VueJS y del evento. También habían unas barajitas con fotos de los ponentes del evento y podías pegarlos en un albúm. En los stands de patrocinios podías conversar con la gente de proyectos y ofertas laborales.

Desayunando con los ponentes del BrazilJS Conf 2019
Entrada del evento
Taller de Matías Johanson en el BrazilJS Conf 2019
Foto con varios ponentes del BrazilJS Conf 2019
Reinaldo Ferraz hablando sobre descentralización de la web
Jaydson Gomez hablando de la centralización de la web
Cómo hacer marketing con datos legales (no robados de los usuarios)
Con Erick
Stand de Patrocinantes
Stand de Patrocinantes
Agenda del BrazilJS Conf 2019
Jaydson Gomes dando la apertura del evento
Charla de Kenneth Christiansen
Charla de Erick Wendel
Charla de Ben Morss
Charla de Filip Stranis sobre ServiceWorkers
Charla de Matias Johanson
Con Drishti Jain
Charla de Gerard Sans sobre Angular
Con Eva y Orta
Representantes de iFood
Orta hablando de TS
André Natal Common Voice
Con Jaydson Gomes organizador del del BrazilJS Conf 2019
Con Felipe Moura organizador del del BrazilJS Conf 2019
Con varios ponentes y asistentes del BrazilJS Conf 2019
Con Cyntia Visalli y mi esposa

Mi ponencia sobre WebAssemby

Siempre que doy esta charla debo agregar contenido nuevo. Para este evento había agregado cosas nuevas como un demo de Doom 3, Google Keep, entre otros. Por eso no estaba preocupado por la calidad del contenido sino porque debía darla en inglés y no estoy acostumbrado a ello.

Traducí las láminas a portugués usando un traductor en línea. Posteriormente me ayudaron a acomodar algunos detalles. Me gustó ver a las personas emocionadas porque disfrutar el contenido escrito de mi conferencia en portugués. Recibí buenos comentarios en redes sociales sobre ello.

Miguel Useche hablando de Webassembly en el BrazilJS Conf del 2019 — Mi auto-retrato antes de comenzar la ponencia. Noten la cantidad de gente, es la mitad porque del otro lado había más.

Creo que me fue bien. Estaba un poco nervioso por tener que hablar en inglés, ver las notas en español pero las láminas en portugués. Respecto a la cantidad de gente, era tanta que no era posible enfocarse en todos, así que no era un problema.

Palabras finales

BrazilJS Conf fue uno de los mejores evento que he estado. Una organización increíble, excelentes temas y conferencistas. El lugar estaba equipado con todo. La ciudad de Porto Alegre es muy bonita, la gente es demasiado amigable. La comida es excelente, sobre todo las carnes. Buenos dulces y chévere para conocer.

Si alguna vez les llama la atención ir a un BrazilJS Conf, no duden e ir.

La entrada Mi experiencia en el BrazilJS Conf de 2019 se publicó primero en El blog de Skatox.

Estoy estrenando nuevo blog y nuevo dominio.

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

console.log no es un depurador. Es genial para averiguar qué está haciendo tu aplicación JavaScript, pero se limita a escupir una cantidad mínima de información. Si tu código es complejo, necesitarás un depurador adecuado. Es por eso que hemos agregado una nueva sección a el Firefox DevTools Playground, que trata sobre la depuración. Hemos creado cuatro lecciones básicas que usan el depurador de Firefox para examinar y arreglar una aplicación de tareas (to-do) en JavaScript.

Presentamos el Debugger Playground

Las lecciones son completamente gratuitas y el código de la aplicación de tareas está disponible para descargar desde GitHub.

Estas lecciones son un nuevo formato para nosotros y estamos muy emocionados de brindártelas. Siempre estamos buscando nuevas formas para ayudar a los desarrolladores a aprender cosas y mejorar el flujo de trabajo diario. Si tienes una idea, avísanos. Ampliaremos el Playground en los próximos meses y estamos encantados en escuchar de desarrolladores como tú.

Si no estas familiarizado con el depurador de Firefox, echa un vistazo a los documentos de depuración en MDN y mira este corto de introducción:

Ahora echemos un vistazo a una lección del nuevo Debugger Playground. ¿Alguna vez usaste console.log para saber el valor de una variable? Hay una manera más fácil y más precisa de hacerlo con el depurador.

Usa el depurador para saber el valor de una variable

Es mucho más fácil encontrar una variable con el depurador de Firefox que con console.log. Así es cómo funciona:

Echemos un vistazo a una aplicación sencilla de tareas. Abre la aplicación de tareas en una nueva pestaña.

Esta aplicación tiene una función llamada addTodo que tomará el valor del formulario de entrada, creará un objeto y luego lo insertará en un array de tareas. Probémoslo agregando una nueva tarea. Esperarás tener esta nueva tarea agregada a la lista, pero en su lugar verás “[object HTMLInputElement]”.

Algo está roto, y tenemos que depurar el código. La tentación es comenzar a agregar console.log por toda la función, para identificar dónde está el problema. El enfoque podría ser algo como esto:

const addTodo = e => {
 e.preventDefault();
 const title = document.querySelector(".todo__input");
 console.log('title is: ', title);
 const todo = { title };
 console.log('todo is: ', todo');

items.push(todo);
 saveList();
 console.log(‘The updated to-do list is: ‘, items);
 document.querySelector(".todo__add").reset();
 };

Esto puede funcionar, pero es engorroso e incómodo. También debemos recordar eliminar estas líneas después de corregir el código. Hay una forma mucho mejor de hacerlo con el depurador utilizando lo que se llama un punto de interrupción…

Aprende más en el Debugger Playground

El Debugger Playground cubre los aspectos básicos del uso del depurador de Firefox, examinar la pila de llamadas, establecer puntos de interrupción condicionales y más. Sabemos que hay una curva de aprendizaje abrupta para usar el depurador (y para depurar JavaScript), por lo que hemos creado una aplicación de tareas fácil de entender y decodificar. También es útil ejecutarlo en tu navegador web para mantener las cosas en orden durante tu día de trabajo. La aplicación está disponible aquí para descargar en GitHub. Tómalo y luego dirígete a el Playground para ver las lecciones.

Haznos saber qué te gustaría ver a continuación. Estamos trabajando en nuevas lecciones sobre las últimas tecnologías web y nos gustaría saber de ti. Publica en los comentarios que hay a continuación.

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por juliabis.

Flash hizo llegar vídeo, animación, sitios interactivos y, sí, anuncios a miles de millones de usuarios durante más de una década, pero ahora se se está marchando. Adobe dejará de soportar Flash para el año 2020. Firefox ya no lo soporta “fuera de la caja”, y Chrome tampoco. ¿Qué es lo siguiente? Hay toneladas de estándares abiertos que pueden hacer lo que Flash hace, y aun más.

Multimedia verdaderamente abierta

Flash prometió ofrecer una plataforma unificadora para construir y distribuir sitios web multimedia interactivos. Y, en su mayor parte, lo hizo. Pero la tecnología nunca fue realmente abierta y accesible, y Flash Player era demasiado voraz para los recursos de los dispositivos móviles. Ahora las alternativas de código abierto pueden hacer todo lo que Flash hace, y más. Éstas son las tecnologías que debes aprender si realmente quieres construir la web interactiva de mañana, ya sea que se haciendo animaciones web, juegos o vídeos.

Animación web

CSS

La animación CSS es relativamente nueva, pero es la forma más fácil de comenzar con la animación web. CSS está hecho para diseñar sitios web con reglas básicas que dictan diseño, tipografía, colores y más. Con el lanzamiento de CSS3, las animaciones ahora son parte del estándar, y como desarrollador, depende de ti indicarle al navegador cómo debe hacer la animación. CSS es legible por humanos, lo que significa que básicamente hace lo que dice el comando. Por ejemplo, la propiedad “animation-direction” hace exactamente eso: especifica la dirección de la animación.

Ahora mismo puedes crear animaciones sin problemas con CSS. Es simple crear keyframes (cuadros clave), ajustar el tiempo, animar la opacidad y más. Y todas las animaciones funcionan con cualquier objeto que haz diseñado normalmente con CSS: texto, imágenes, contenedores, etc.

Se pueden hacer animaciones con CSS, incluso no estando familiarizado con los lenguajes de programación. Al igual que muchos proyectos de código abierto, el código está disponible en la web para que juegues con él. Mozilla también ha creado (y mantiene) exhaustiva documentación sobre animación CSS. La mayoría de los desarrolladores recomiendan usar animación CSS para proyectos simples y JavaScript para sitios más complejos.

Los desarrolladores han estado animando con JavaScript desde los primeros días. Scripts básicos de mouseover (eventos de puntero) han existido por más de dos décadas. Hoy, JavaScript junto con elementos <canvas> de HTML5 pueden hacer cosas sorprendentes. Incluso scripts sencillos pueden producir grandes resultados. Con JavaScript, puedes dibujar figuras, cambiar colores, mover y cambiar imágenes, y animar transparencia. La animación JavaScript usa el formato SVG (gráficos de vector escalables) para las animaciones, lo cual significa que el arte se dibuja en vivo basado en reglas matemáticas en vez de ser cargada y pintada. Esto significa que se mantiene bien definido en cualquier escala (a esto se debe el nombre) y puede ser controlado completamente. SVG ofrece pintado sin aliasing, rellenos de patrón y gradientes, efectos de filtro sofisticados, recorte basado en líneas arbitrarias, texto y animaciones. Y, por supuesto, es una recomendación de estándar abierto de la W3c en vez de un binario cerrado. Utilizando SVG, JavaScript, y CSS3, los desarrolladores pueden crear animaciones interactivas impresionantes que no requieren formatos o reproductores especializados.

La animación JavaScript puede ser muy refinada, incluyendo rebotes, detención, pausa, rebobinación, or cambio de velocidad. También es interactiva y puede ser programada para responder a clicks o movimientos del puntero. La nueva API Web Animations, construida con JavaScript, te permite refinar animaciones con más control sobre los keyframes y elementos, pero todavía está en una fase experimental temprana y algunas características pueden no tener soporte en todos los navegadores.

Adicionalmente, las animaciones JavaScript pueden ser programadas para responder a campos de formulario, envío de formularios, y pulsaciones de teclas. Y eso lo hace perfecto para la creación de juegos web.

Juegos web

Por un tiempo, Flash dominaba los juegos web. Era fácil de aprender, usar y distribuir. También era robusto, capaz de ofrecer juegos masivos multijugador en línea a millones. Pero hoy es posible ofrecer la misma experiencia – si no incluso mejor – utilizando JavaScript, HTML5, WebGL y WebAssembly. Con los navegadores modernos y los marcos (frameworks) de código abierto, es posible crear juegos de disparos en 3D, juegos de rol (RPG), juegos de aventura y mucho más. De hecho, ahora incluso se pueden crear experiencias de realidad virtual totalmente inmersivas para la web con tecnologías como WebVR y A-Frame.

Los juegos web dependen de un ecosistema de frameworks y plataformas de código abierto para funcionar. Cada uno juega un papel importante: de visuales hasta controles, desde el audio a las redes. Mozilla Developer Network tiene una lista completa de las tecnologías que están actualmente en uso. Estas son solo algunas de ellas y para qué se usan:

WebGL

Permite crear gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento a partir del contenido web. Esta es una implementación soportada por la web de OpenGL ES 2.0. WebGL 2 va incluso más allá, posibilitando el nivel de soporte de OpenGL ES 3.0 en los navegadores.

JavaScript

JavaScript, el lenguaje de programación de la Web, funciona bien en los navegadores y continuamente se está haciendo cada vez más rápido. Se ha usado ya para crear miles de juegos, y constantemente se están desarrollando nuevos frameworks.

Audio HTML

El elemento <audio> permite reproducir fácilmente efectos de sonido simples y música. Si lo que necesitas es más complicado, ¡consulta la API de Web Audio para conocer el procesamiento de audio real!

API Web Audio

Esta API diseñada para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript, permite crear efectos de sonido impresionantes, tanto como reproducir y manipular música en tiempo real.

WebSockets

La API de WebSockets te permite conectar tu aplicación o sitio a un servidor para transmitir datos en tiempo real. Lo que la hace perfecta para juegos multijugador, ya sean basados en turnos o en eventos, servicios de chat y más.

WebRTC

WebRTC es una API ultrarrápida que puede ser utilizada en video-chat, llamadas de voz y aplicaciones web para compartir archivos en modo P2P. Se puede usar también para juegos multijugador en tiempo real que requieran baja latencia.

WebAssembly

Los motores de juego HTML5/JavaScript son ahora mejores que nunca, pero aún así todavía no pueden igualar el rendimiento de las aplicaciones nativas. WebAssembly promete ofrecer un rendimiento casi nativo a las aplicaciones web. La tecnología permite a los navegadores ejecutar código compilado C/C++, incluyendo a juegos creados con motores como Unity y Unreal.

Con WebAssembly, los juegos web podrán aprovechar la ejecución multihilo (multithreading). Los desarrolladores podrán producir juegos 3D avanzados para la web que se ejecuten casi a la misma velocidad que el código nativo, y sin comprometer la seguridad. Es un enorme avance para los juegos, y para la web abierta. Significa que los desarrolladores podrán construir juegos para cualquier computadora o sistema que pueda acceder a la web. Y debido a que se ejecutarán en navegadores, será fácil integrar los modos multijugador en línea.

Además, hay muchos motores de juegos HTML5/JavaScript. Estos motores se encargan de los aspectos básicos, tales como física y controles, y les brindan a los desarrolladores un marco / mundo sobre el que construir. Van desde ligeros y rápidos, como los motores 2D Atom y Quick, hasta motores 3D completos como WhitestormJS y Gladius. Hay docenas para elegir, cada uno con sus propias ventajas y desventajas para los desarrolladores. Pero al final, todos ellos producen juegos que se pueden jugar en navegadores web modernos sin plug-ins. Y la mayoría de esos juegos pueden ejecutarse en un hardware no tan potente, lo que significa que puede llegar a más usuarios. De hecho, los juegos escritos para la web pueden ejecutarse en tabletas, teléfonos inteligentes e incluso televisores inteligentes.

MDN tiene una amplia documentación sobre construcción de juegos web y varios tutoriales sobre construcción de juegos utilizando JavaScript puro y el framework de juego Phaser. Es un excelente lugar para comenzar el desarrollo de juegos web.

Vídeo

La mayoría de los servicios de vídeo ya han cambiado a la transmisión basada en HTML5 utilizando tecnologías web y codecs abiertos; pero otros se han apegado a los codecs FLV o FV4 basados en Flash. Como se dijo anteriormente, los formatos de vídeo Flash se basan en una forma de operar a través del software que puede recargar los recursos de los navegadores web y las plataformas móviles. Los codecs de video modernos pueden usar el procesamiento de hardware para la reproducción de vídeo, aumentando enormemente la capacidad de respuesta y la eficiencia. Lamentablemente, solo hay una forma de cambiar de Flash a HTML5: volviendo a codificar el vídeo. Eso significa convertir el material de origen en formatos compatibles con HTML5 a través de un convertidor gratuito como FFmpeg y Handbrake.

Mozilla está ayudando activamente a construir y mejorar el formato de vídeo HTML5 de código abierto WebM. Este desarrollo se basa en el contenedor Matroska y utiliza los codecs de video VP8 y VP9 y los codecs Vorbis u Opus.

Una vez que el contenido se haya convertido a un formato compatible con HTML5, se podrán volver a publicar los vídeos. HTML5 tiene controles de medios incorporados, por lo que no es necesario instalar ningún reproductor. Es extremadamente fácil; sólo es necesario usar una sola línea de HTML:

<video src="videofile.webm" controls></video>

Es preciso tener en cuenta que los controles nativos pueden ser inconsistentes entre los navegadores. Sin embargo, como están hechos con HTML5, es posible personalizarlos con CSS y vincularlos a su vídeo con JavaScript. Eso significa que puede crear accesibilidad, agregar tu marca y mantener el aspecto y la coherencia entre los navegadores.

HTML5 también puede manejar transmisión (streaming) adaptable, mediante Media Source Extensions (MSEs). Aunque pueden ser difíciles de configurar por sí solos, puedes usar reproductores preempaquetados como Shaka Player y JW Player, los cuales pueden manejar los detalles.

Los desarrolladores de MDN han creado una guía en profundidad sobre como convertir vídeo Flash a vídeo HTML5, que da muchos más detalles acerca de este proceso. Afortunadamente, no es tan difícil como parece.

Flash: lo que viene

El futuro de la web está abierto (eso esperamos) y Flash, a pesar de ser una gran herramienta para la creatividad, no ha sido lo suficientemente abierto. Afortunadamente, muchas herramientas de código abierto pueden hacer lo que Flash hace, y aun más. Pero estamos todavía en las primeras etapas, y la creación de animaciones, sitios web interactivos y juegos web requiere cierto conocimiento de codificación. Todo lo que necesitas saber ya está ahí, sólo esperando que lo aprendas.

Las tecnologías web abiertas prometen ser mejores de lo Flash ha sido, y serán accesibles para toda persona que tenga una conexión a Internet.

Hace pocas horas Mozilla ha liberado una nueva versión de Firefox en la que destacan la integración con GTK3 en Linux, mejoras en las seguridad del compilador JS en tiempo real, cambios en WebRTC y nuevas funcionalidades para Android e iOS.

Después de varios meses de pruebas y desarrollo, finalmente GTK3 ha sido incluido para la versión en Linux. Esto permitirá reducir la dependencia de las versiones antiguas del servidor X11, compatibilidad mejorada con HiDPI y sobre todo una mejor integración con los temas.

El nuevo navegador también mejora la seguridad del compilador de JavaScript Just in Time (JIT) de SpiderMonkey. La idea es influir en el código RWX (lectura – escritura – ejecución), que a veces provoca un riesgo. Inicialmente representa una excepción a las reglas del sistema operativo, especialmente el almacenamiento de datos en un área de memoria donde pueden ser ejecutados (leer), pero no escribirse.

Para remediar este problema, Mozilla he empleado un mecanismo denominado W^X. Su función es la de prohibir la escritura de JavaScript en áreas de memoria que contienen el código JIT. Este cambio será a expensas de un ligero descenso en el rendimiento, que se calcula de acuerdo con el editor en un rango de 1% a 4%. Por otra parte, se invita a los creadores de algunas extensiones para probar la compatibilidad de su código de tratar con este mecanismo.

También se ha mejorado el rendimiento y la fiabilidad de las conexiones de WebRTC, y permite el uso del módulo de descifrado de contenido para el contenido H.264 y AAC cuando sea posible. Mientras tanto, para los desarrolladores contamos con nuevas herramientas que ahora pueden emplear en sus trabajos, en este artículo publicado en el blog de Labs podrás conocer más al respecto.

Novedades en Android

El Historial y los Marcadores se han añadido al menú.
La instalación de complementos no verificados será cancelada.
Las página almacenadas en la caché ahora son mostradas cuando estamos sin conexión.
Las notificaciones sobre las pestañas abiertas en segundo plano ahora muestran la URL.
Firefox pedirá permisos para acceder a ciertos permisos en tiempo de ejecución y no al instalar la aplicación (Android 6.0 o superiores).
Durante el autocompletamiento mientras escribes una dirección ahora se incluye el dominio para hacer más fácil tu navegación.

Firefox para iOS

Añadida la localización en danés [da].
Los sitios sugeridos por defecto ahora pueden ser eliminados.
Los 5 primeros sitios del ranking de Alexa son mostrados a los nuevos usuarios.
Mejorado el manejo por parte del navegador de vínculos a Apple Maps y otras aplicaciones de terceros como Twitter.

Si prefieres ver la lista completa de novedades, puedes llegarte hasta las notas de lanzamiento (en inglés).

En estos momentos ya debes haber recibido esta actualización, pero si todavía no te ha aparecido la advertencia, puedes ir al menú “Acerca de” y hacer clic en el botón “Buscar actualizaciones”. Mientras que Firefox para Android puedes instalarlo desde Google Play.

Visto en Mozilla hispano.