Pasar de Flash a HTML, CSS y JavaScript

En la década de 2000, era común ver sitios web creados con Flash. Al ver el código fuente de un sitio web, a menudo verá muy poco HTML y un archivo SWF incrustado. Esto significaba algunas cosas. En primer lugar, el navegador no admitía Flash de forma nativa, por lo que tenía que descargar el complemento de Flash. A los navegadores les resultaba difícil acceder al SWF para leer el contenido. Entre otras cosas, esto tuvo un efecto perjudicial en el SEO y la accesibilidad.

En 2007, se lanzó el iPhone. No era compatible con Flash. En 2015, Google movió todos sus videos de YouTube a HTML5. En julio de 2017, Adobe anunció oficialmente que dejaría de funcionar en Flash para 2020. La gente usaba Flash porque podía hacer cosas que HTML, CSS y JavaScript no podían hacer en ese momento. Es increíble ver hasta dónde han llegado los estándares web (y lo que está por venir).

Hoy podemos hacer muchas cosas que antes solo eran posibles con Flash. No solo eso, sino que podemos hacerlo de una manera mucho más accesible y eficiente. Repasaré algunas de las cosas innovadoras que Flash podría hacer y cómo podemos hacerlas hoy.

Descargo de responsabilidad: amo a Flash, y siempre tendrá un lugar en mi corazón, pero al menos para mí, su tiempo ya pasó. En caso de que se lo pregunte: todavía hay muchas interfaces y motores ejecutándose en Flash, especialmente para juegos, y este artículo aborda algunos de los problemas que son muy relevantes allí.

Video

Una de las mejores cosas que anunció Flash fue el video, que ofrecía soporte básico ya en 2002. No fue hasta 2009 que se introdujo la etiqueta <video> en Chrome, Safari y Firefox. Además, Internet Explorer (IE) 8 no admitía la etiqueta <video> y no fue hasta 2011, cuando se lanzó IE 9, que obtuvo soporte.

Flash usaría la etiqueta <object> , así:

 <object class codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400"> <param name="movie" value="filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>

No es el mejor código, pero funcionó.

Ahora, simplemente podemos escribir <video src="filename.mp4" /> , aunque es importante conocer los diferentes formatos de video en los navegadores, siendo los más populares MP4, Ogg y WebM. Yendo un paso más allá, es posible no solo admitir la etiqueta <video> , sino también ofrecer alternativas útiles y alternativas:

 <video width="320" height="400"> <source src="filename.mp4" type="video/mp4" /> <source src="filename.webm" type="video/webm" /> <source src="filename.ogv" type="video/ogg" /> <!-- Flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=filename.mp4" width="320" height="400"> <param name="movie" value="flash-player.swf?videoUrl=filename.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=placeholder.jpg&file=flash-player.swf?videoUrl=filename.mp4" /> </object> <!-- Text Fallback --> <p>No video support found. Please download the video below, or upgrade your browser: https://browsehappy.com/</p> </video> <ul> <li><a href="linktomovie.mp4">MP4 format</a></li> <li><a href="linktomovie.ogv">Ogg format</a></li> <li><a href="linktomovie.webm">WebM format</a></li> </ul>

Fondo de vídeo

Debido a que YouTube utiliza la etiqueta <video> y tiene una API, es posible crear un video de fondo de pantalla completa. Tome el siguiente código de enlace de video de YouTube, por ejemplo:

 https://www.youtube.com/embed/iMhq63PX8cA?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1

Usando los diferentes parámetros, es posible cambiar la forma en que se comporta el video.

 controls=0 Hides the controls. showinfo=0 Hides extra information. rel=0 Hides related content. autoplay=1 Auto plays the video when the site is loaded. loop=1 Loops the video. mute=1 Mutes the sound.

Para obtener una lista completa, consulte la API de IFrame Player.

Usando CSS, podemos configurar el video para que se fije en su posición y llene la pantalla.

 .video { background: #000; position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }

Y con el uso de consultas de medios, podemos configurar el video para que esté centrado y podemos ayudar a mantener la relación de aspecto correcta.

 @media (min-aspect-ratio: 16/9) { .video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video { width: 300%; left: -100%; } }

Aquí está el ejemplo reunido, con el propio Mr. Smashing Magazine presentando una charla:

Interacción y juegos

Otra cosa en la que Flash sobresalió fue en la interacción y los juegos. El popular sitio web Miniclip se fundó en 2001 y albergaba una amplia gama de juegos Flash. En 2008, se valoró en más de 900 millones de libras esterlinas y todavía sigue en funcionamiento.

SOLO UN REFLECTOR

JUST A REFLEKTOR es un video musical interactivo que rivaliza e incluso supera las capacidades de Flash. Con el uso de varias tecnologías web, ahora es posible interactuar con el video usando un dispositivo móvil, así como en un momento usando su cámara web para que usted mismo aparezca en el video musical.

golpe de cubo

Hay algunos fantásticos experimentos de Chrome basados ​​en la web en línea hoy en día, como Cube Slam. Cube Slam es un juego que utiliza WebRTC (una tecnología web abierta), lo que le permite chatear por video y jugar un juego dentro del navegador. Si bien Flash se usó mucho para chat de video, tenía una serie de inconvenientes en comparación con WebRTC: dependía del complemento Flash, requería un servidor de medios y tenía varias implicaciones de seguridad y un rendimiento deficiente.

Motores de juego HTML5

Hay una serie de motores de juegos HTML5 y JavaScript. El siguiente ejemplo hace uso de canvas y WebGL . WebGL (Biblioteca de gráficos web) es una API integrada en JavaScript que permite gráficos 2D y 3D interactivos dentro de la etiqueta <canvas> .

Como se menciona en la propia publicación de Good Boy Digital sobre el proyecto (los creadores del ejemplo):

"Star Wars Arcade realmente traspasa los límites de lo que es posible con las tecnologías HTML5 y WebGL. Esto permite la creación de una única compilación que funciona a la perfección en los navegadores de escritorio y móviles sin tener que descargar una aplicación; la ventaja de esto es poder ofrecer una experiencia 'similar a una aplicación' en todos los dispositivos para que cualquiera pueda disfrutarla al instante. Sin contraseñas, sin tiendas de aplicaciones, ¡simplemente presione la URL y juegue!"

— goodboy digital, estudio de caso de Star Wars Arcade

Me encanta especialmente esta parte: "¡Simplemente presione la URL y juegue!" Uno de mis primeros recuerdos "Wow" de la web fue tener mi propio sitio web en 1999 y poder escribir esa URL en cualquier computadora conectada a la web y verla. Me pareció absolutamente increíble que esto fuera realmente posible (¡y continúa asombrándome hasta el día de hoy!).

Compatibilidad con navegador

Una de las ventajas de crear algo, especialmente un juego, debido a la complejidad adicional, en Flash que sigue siendo relevante hoy en día es la compatibilidad con navegadores. La compatibilidad con navegadores es generalmente bastante buena en estos días, y Can I Use puede ayudarnos a averiguar rápidamente el estado de la compatibilidad con navegadores para una especificación en particular. Sin embargo, todavía hay discrepancias que podrían causar problemas. Por lo tanto, si está de acuerdo con que solo los navegadores compatibles estén instalados con el complemento Flash con el que está trabajando, es probable que no encuentre ningún problema entre navegadores.

Tipografía

Flash se diseñó originalmente como una herramienta de animación. Como tal, tenía varias limitaciones con la tipografía.

Flash tenía un sistema de cuadrícula de píxeles. Si la tipografía se colocara en la cuadrícula en X:100.3 :100.7 y, por lo tanto, fuera de alineación con la cuadrícula de píxeles, se vería borrosa.

Como resultado, descubrí que las fuentes de píxeles eran útiles porque se ubicaban en la cuadrícula y permanecían nítidas. Otra limitación aquí sería si usa una fuente de 8 píxeles pero la establece en 10 píxeles, se desalinearía con la cuadrícula y, nuevamente, se vería borrosa.

Afortunadamente, hoy en HTML y CSS, tenemos una gran cantidad de herramientas para ayudarnos. Podemos configurar las fuentes como una unidad absoluta en px (píxeles) o, más común en estos días, usar ems y rems para ayudar con el diseño web receptivo (hablaré más sobre esto más adelante).

Otro problema con Flash y la tipografía fueron las fuentes. Si una fuente no estaba disponible en el dispositivo, se proporcionaría una fuente alternativa. Para eludir esto en Flash, puede incrustar la fuente en el archivo .swf . Sin embargo, al hacer esto, aumentó el tamaño del archivo y, por lo tanto, el tiempo que tardaría el SWF en descargarse y aparecer.

Dicho esto, lo que era posible con Flash era Scalable Inman Flash Replacement (sIFR). sIFR permitió que el texto HTML fuera reemplazado por Flash. Antes de esto, para usar fuentes personalizadas, usábamos imágenes. Sin embargo, el uso de imágenes no permitía seleccionar texto y significaba que tenía que crear imágenes manualmente. Pasando de sIFR, a los desarrolladores se les ocurrió Cufon. Cufon evitó el uso de Flash al usar una versión SVG y VML de una fuente. Era más rápido que sIFR y no requería el complemento Flash; pero, nuevamente, con esta técnica, no fue posible seleccionar texto.

Hoy, tenemos la regla CSS @font-face y una gran cantidad de fuentes web estándar disponibles:

• Fuentes de Google
• Juego de escribir
• Ardilla de fuente

En Chrome y Firefox (y, con suerte, pronto en Safari), tenemos font-display en CSS. Si está utilizando una fuente personalizada, de forma predeterminada, el navegador esperará para obtener la fuente personalizada. Si no puede obtener la fuente personalizada, utilizará una fuente de respaldo (la velocidad varía según los navegadores, pero generalmente es de 3 segundos). Esto se conoce como un destello de texto invisible (o FOIT). Para mejorar este escenario, podemos usar lo siguiente:

 @font-face { font-display: swap; }

Al usar swap , veremos el texto inmediatamente usando la fuente de respaldo. Cuando se carga la fuente personalizada, el navegador cambiará la copia de seguridad por ella. De esta manera, el usuario puede leer el contenido tan pronto como esté disponible.

Animación

Una de las cosas que Flash hizo muy bien fue la interpolación. La interpolación se utiliza para animar elementos. En Flash, puede crear un elemento en un fotograma clave, duplicar ese fotograma clave a lo largo de la línea de tiempo y luego agregar una interpolación.

Con HTML y CSS, podemos aplicar la misma animación usando @keyframes , transform y animation .

 <div class="box"></div>

 .box { width: 100px; height: 100px; background-color: #333; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } div { animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-direction: alternate; } 

Con Chrome Developer Tools, podemos inspeccionar y ajustar la animación yendo a Chrome Dev Tools → Cmd + Shift + P → Animation .

También es posible depurar posibles problemas de rendimiento que pueden surgir cuando se trata de animación. En las herramientas para desarrolladores de Chrome, hay una pestaña de "Rendimiento". Al hacer clic aquí, luego en el ícono circular "Grabar", podemos ver una variedad de información útil. Esta técnica me ayudó mucho cuando construí el Informe Anual de Mind 2012-13, particularmente la sección del sitio web que tiene un mapa con círculos animados que muestran las ubicaciones de las tiendas Mind. Inicialmente, la sección del mapa se cargaba al principio, lo que provocaba problemas de repintado. Usando la pestaña "Rendimiento", pude identificar y actualizar esto, por lo que el mapa solo comenzó a animarse cuando estaba a la vista.

Gráficos vectoriales

La web se ha beneficiado y todavía se beneficia enormemente de la cuidadosa consideración del tamaño del archivo. A principios de la década de 2000, la web se veía principalmente en computadoras de escritorio, con módems de acceso telefónico lentos. Una imagen simple puede tardar segundos o incluso minutos en cargarse. Para ayudar con esto, Flash hizo un uso intensivo de gráficos vectoriales. El uso de gráficos vectoriales, cuando corresponda, en lugar de imágenes JPEG o GIF, redujo significativamente el tamaño del archivo y, por lo tanto, se carga más rápidamente en la web.

En los últimos años, y en particular gracias a Sara Soueidan, los gráficos vectoriales escalables (SVG) se han generalizado cada vez más en la web. SVG es un marcado basado en XML que nos permite crear gráficos vectoriales para la web. Funciona extremadamente bien con la animación y he tenido el placer de crear algunos sitios web que hacen uso de esto: el sitio web del informe Mind (mencionado anteriormente) y How Clean Is England? que Sara mencionó en Twitter! ¡Gracias Sara!

Diseño web adaptable

Uno de los principales escollos de la creación de un sitio web en Flash hoy en día es la falta de consultas de medios. Hoy en día, el uso de dispositivos móviles y tabletas ha superado al de las computadoras de escritorio. Para crear la mejor experiencia, debemos crear un sitio web que sea accesible en todos estos dispositivos. En muchos dispositivos, Flash simplemente no se cargará en absoluto, e incluso si lo hiciera, lo más probable es que rompiera el ancho de la ventana gráfica o se escalara y quedara inutilizable.

Usando consultas de medios, podemos crear un diseño que responda al contenido. Aquí hay un ejemplo:

 <div class="someContent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi enim id ratione blanditiis voluptate dolore necessitatibus culpa maxime eius assumenda eveniet dolores odit sunt repellat, rerum amet delectus vel.</p> </div>

 .someContent { color: green; } @media screen and (min-width: 400px) { .someContent { color: yellow; } } @media screen and (min-width: 600px) { .someContent { color: red; } } 

ActionScript frente a JavaScript

ActionScript se usa en Flash y, por lo tanto, tiene el mismo escollo de los archivos SWF mencionados anteriormente, ya que requiere el complemento Flash. JavaScript, por otro lado, está disponible en todos los navegadores modernos.

Veamos un ejemplo de configuración de una variable en ambos y sus diferencias:

 var x:Number = 42;

 var x = 42;

Con ActionScript, declaramos que la variable es un número. Si a la variable se le asigna algo más, obtendrá un error. JavaScript está escrito de forma flexible, lo que significa que podríamos asignar la variable como otra cosa, como una cadena:

 var x = '42';

En JavaScript, si quisiéramos comprobar que es un número, podríamos usar typeof(x); , y esto generaría "número". Otra opción sería crear una function y usar isNaN para detectar si “no es un número”:

 function isNumber(value) { if (isNaN(value)) { return value + ' is not a number.'; } return value + ' is a number.'; } console.log(isNumber(42)); // "42 is a number." console.log(isNumber('forty two')); // "forty two is not a number."

Colaboración

Con HTML, CSS y JavaScript (y muchos otros lenguajes de codificación), Git y GitHub facilitan enormemente la colaboración. Por ejemplo, si quisiera editar el HTML de la "Plantilla de autor" de Smashing Magazine, a través de GitHub, podría hacer clic en el botón "Fork". Esto crearía una versión de los archivos (también conocida como repositorio) bajo mi propio nombre. Luego podría hacer las modificaciones que desee y enviar una solicitud de extracción. Esto le daría al propietario de Smashing Magazine la capacidad de revisar mi solicitud de extracción y aceptarla o rechazarla. Una vez aceptado, el código iría al repositorio principal.

Hay una serie de excelentes razones para trabajar de esta manera: siempre tiene una copia de seguridad de su trabajo; puede volver a versiones anteriores de su trabajo y la colaboración se vuelve muy fácil. Alguien podría estar trabajando en una sección del sitio web, o en el CSS o JavaScript, y cuando cada miembro del equipo haya terminado, podría revisar los cambios e incorporarlos según sea necesario.

Si intentáramos lo mismo con Flash, sería mucho más difícil tener que guardar y enviar un archivo .fla cada vez. Si varias personas trabajaran en el mismo .fla , las cosas podrían volverse muy confusas. Con HTML, CSS y JavaScript, es posible hacer una "diferencia" en el código, lo que nos permite comparar y revisar el código. Incluso podemos seleccionar ciertos fragmentos de código, traerlos o comentarlos para una revisión y trabajo adicionales.

Conclusión

Flash fue una de las razones por las que comencé a crear sitios web. Fue pionero en muchas áreas, y esto llevó a la gente a crear cosas asombrosas con él. A lo largo de los años, ha impulsado mucho la web. Sin embargo, el anuncio oficial de Adobe de dejar de admitir Flash genera preocupaciones. Sería una gran lástima que se perdieran millones de sitios web que utilizan Flash. Hay una petición para abrir Flash y Shockwave. Espero que no lo perdamos para siempre. Hemos tenido momentos geniales y extraños. Los dejo con este clásico ejemplo de lo “raro” al que me refiero:

Aquí está la letra, si quieres cantar.