juliabis
commented
6 years ago Primera colaboración
Pregunta: ¿es en este cuadro de texto que se sube la traducción? ¿O hay que enviarla / subirla de otra manera?
Gracias desde ya!
La vida después de Flash: Multimedia para la Web abierta
Por Dustin Driver Publicado el 29 de agosto de 2017 en Animations, Games, HTML5, JavaScript, Web APIs, and Web Developer Toolbox
Flash hizo llegar video, 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 admitir Flash para el año 2020. Firefox ya no admite Flash "fuera de caja", y Chrome tampoco lo admite. ¿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 se debe aprender si realmente se quiere construir la web interactiva de mañana, ya sea que se estén haciendo animaciones web, juegos o videos.
Animación web
CSS
[CSS animation] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) es relativamente nuevo, 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 se procesan en el estándar, y como desarrollador, depende de usted 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" (animación-dirección) hace exactamente eso: especifica la dirección de la animación.
Ahora mismo puedes crear animaciones sin problemas con CSS. Es simple crear keyframes, ajustar el tiempo, jugar con la opacidad y más. Y todas las animaciones funcionan con cualquier objeto que hubieses 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 hagas tus ensayos con él. Mozilla también ha creado (y mantiene) exhaustiva documentación sobre animación CSS. La mayoría de los desarrolladores recomiendan usar CSS animation para proyectos simples y JavaScript para sitios más complejos.
Juegos web
En un momento, Flash hacía las reglas en los juegos web. Fue 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. Estos son solo algunos 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 utilizado en 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
Web Audio API
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 WebSocket 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 -tanto sean basados en turnos o en eventos (turn-based or even-based gaming)-, 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 (engines) como Unity y Unreal.
Con WebAssembly, los juegos web podrán aprovechar la tecnología multihilo (multithreading). Los desarrolladores podrán producir juegos 3D 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 motores Atom y Quick 2D, hasta motores 3D completos como WhitestormJS y Gladius. Hay docenas para elegir, cada una 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 video ya han cambiado a la transmisión basada en HTML5 utilizando tecnologías web y códecs abiertos; pero otros se han quedado pegados a los códecs FLV o FV4 basados en Flash. Como se dijo anteriormente, los formatos de video Flash se basan en una forma de operar a través del software que puede afectar los recursos de los navegadores web y las plataformas móviles. Los códecs de video modernos pueden usar el procesamiento de hardware para la reproducción de video, aumentando enormemente la capacidad de respuesta y la eficiencia. Lamentablemente, solo hay una forma de cambiar de Flash a HTML5: volviendo a codificar el video. 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 video de WebM y de código abierto HTML5. Este desarrollo se basa en el contenedor Matroska y utiliza los códecs de video VP8 y VP9 y los códecs Vorbis u Opus.
Una vez que el contenido se haya convertido a un formato compatible con HTML5, se podrán volver a publicar los videos. 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:
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 video con JavaScript. Eso significa que puede crear accesibilidad, agregar su propia marca y mantener el aspecto y la coherencia entre los navegadores.
HTML5 también puede manejar adaptaciones en la transmisión, mediante extensiones para fuentes de medios (Media Source Extensions: MSEs). Aunque pueden ser difíciles de configurar por sí solos, puedes usar reproductores preempaquetados como Shaka Player y JW Player con los que se pueden manejar los detalles.
Los desarrolladores de MDN han creado una guía en profundidad sobre como convertir video Flash a video 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 (¡por suerte!) 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 alguna vez fue, y serán accesibles para toda persona que tenga una conexión a Internet.
jvillalobos
https://hacks.mozilla.org/2017/08/life-after-flash-multimedia-for-the-open-web/