Pasar de Flash a HTML, CSS y JavaScript

 

 

 


Índice
  1. Video
  2. Fondo de vídeo
  3. Interacción y juego
    1. SOLO UN REFLECTOR
    2. Golpe de cubo
    3. Motores de juegos HTML5
  4. Soporte del navegador
  5. Tipografía
  6. Animación
  7. Responsive Web Design
  8. Collaboration
  9. Conclusion
    1. Further Reading

Más sobre Simón ↬

 

  • Implemente rápidamente. Implementar inteligentemente
  • Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis
  • Es increíble ver hasta dónde han llegado los estándares web. Flash fue una de las razones por las que mucha gente empezó a crear sitios web. Flash fue una de las razones por las que Simon Owen comenzó a crear sitios web. Fue pionero en muchas áreas y esto llevó a que la gente creara cosas increíbles con él. A lo largo de los años, ha hecho avanzar mucho la web. Sin embargo, el anuncio oficial de Adobe de dejar de admitir Flash genera preocupaciones. Estas son algunas de las cosas innovadoras que Flash podía hacer en aquel entonces y cómo podemos hacerlas hoy.

    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ás muy poco HTML y un archivo SWF incrustado. Esto significó algunas cosas. En primer lugar, el navegador no soportaba Flash de forma nativa, por lo que había que descargar el complemento 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 trasladó todos sus vídeos 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 en día podemos hacer muchas cosas que antes sólo eran posibles con Flash. No sólo eso, sino que podemos hacerlo de una manera mucho más accesible y eficaz. Repasaré algunas de las cosas innovadoras que Flash podría hacer y cómo podemos hacerlas hoy.

    Descargo de responsabilidad : Amo Flash y siempre tendrá un lugar en mi corazón, pero al menos para mí su tiempo ha pasado. En caso de que se lo esté preguntando: todavía hay muchas interfaces y motores ejecutándose en Flash, especialmente para juegos, y este artículo aborda algunas de las cuestiones que son muy relevantes allí.

    Video

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

    Flash usaría la objectetiqueta, así:

    object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" 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" 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 podemos simplemente escribir video src="filename.mp4" /, aunque es importante tener en cuenta los diferentes formatos de vídeo en distintos navegadores, siendo los más populares MP4, Ogg y WebM. Yendo un paso más allá, es posible no solo admitir la videoetiqueta, sino también ofrecer opciones alternativas útiles:

    videosource 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" 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=overimage=placeholder.jpgfile=flash-player.swf?videoUrl=filename.mp4" //object !-- Text Fallback -- pNo video support found. Please download the video below, or upgrade your browser: https://browsehappy.com//p/videoul lia href="linktomovie.mp4"MP4 format/a/li lia href="linktomovie.ogv"Ogg format/a/li lia href="linktomovie.webm"WebM format/a/li/ul

    Fondo de vídeo

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

     

    https://www.youtube.com/embed/iMhq63PX8cA?controls=0showinfo=0rel=0autoplay=1loop=1mute=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 ocupe toda 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 vídeo para que esté centrado y 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, con el propio Mr. Smashing Magazine presentando una charla:

    Vea la demostración de fondo del vídeo del lápiz usando YouTube de Simon Owen ( @s10wen ) en CodePen .

    Interacción y juego

    Otra cosa en la que Flash destacó 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, estaba valorada en más de 900 millones de libras esterlinas y todavía sigue en funcionamiento.

    SOLO UN REFLECTOR

    JUST A REFLEKTOR es un vídeo 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 algún momento usar tu cámara web para que tú mismo aparezcas en el video musical.

    El sitio web Just A Reflektor hace un gran uso de las tecnologías web modernas para crear un vídeo musical interactivo.

    Golpe de cubo

    Hoy en día existen en línea algunos experimentos fantásticos de Chrome basados ​​en la web, como Cube Slam . Cube Slam es un juego que utiliza WebRTC (una tecnología web abierta), que te permite chatear por vídeo y jugar dentro del navegador. Aunque Flash se usaba mucho para video chat, 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.

    Cube Slam es un experimento de Chrome basado en la web que permite chatear por vídeo mientras se juega.

    Motores de juegos HTML5

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

    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 perfectamente tanto en navegadores de escritorio como móviles sin tener que descargar una aplicación; la ventaja de 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, ¡solo presiona la URL y juega!"

     

    — goodboy digital, estudio de caso de Star Wars Arcade Fanfics de Harry Potter en Español

    Me encanta especialmente esta parte: "¡Simplemente presiona la URL y juega!" Uno de mis primeros recuerdos sorprendentes 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 sigue sorprendiéndome hasta el día de hoy!).

    Soporte del 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 el navegador. El soporte del navegador es generalmente bastante bueno hoy en día y Can I Use puede ayudarnos a conocer rápidamente el estado del soporte del navegador para una especificación particular. Sin embargo, todavía existen discrepancias que podrían causar problemas. Por lo tanto, si está de acuerdo con admitir solo navegadores que estén instalados con el complemento Flash con el que está trabajando, entonces probablemente no encontrará ningún problema entre navegadores.

    Tipografía

    Flash fue diseñado 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 X:100.3 :100.7y, 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 que si usara una fuente de 8 píxeles pero la configurara en 10 píxeles, se desalinearía con la cuadrícula y, nuevamente, quedaría borrosa.

    Afortunadamente, hoy en HTML y CSS contamos con una gran cantidad de herramientas que nos ayudan. Podemos configurar las fuentes como una unidad absoluta en px(píxeles) o, más común hoy en día, usar emsy remspara ayudar con el diseño web responsivo (trataré más sobre esto más adelante).

    Otro problema con Flash y la tipografía fueron las fuentes. Si una fuente no estuviera disponible en el dispositivo, se proporcionaría una fuente alternativa. Para evitar esto en Flash, puede incrustar la fuente en el .swfarchivo. 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 el reemplazo escalable de Flash Inman (sIFR). sIFR permitió reemplazar el texto HTML con Flash. Antes de esto, para utilizar fuentes personalizadas, usábamos imágenes. Sin embargo, el uso de imágenes no permitía seleccionar texto y significaba que había que crear imágenes manualmente. A partir de sIFR, a los desarrolladores se les ocurrió Cufón. Cufón evitó el uso de Flash utilizando 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 era posible seleccionar texto.

     

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

    • Fuentes de Google
    • kit de tipos
    • Fuente Ardilla

    En Chrome y Firefox (y, con suerte, pronto, Safari), tenemos font-displayCSS. Si está utilizando una fuente personalizada, de forma predeterminada el navegador esperará hasta obtener la fuente personalizada. Si no puede obtener la fuente personalizada, utilizará una fuente de respaldo (la velocidad varía según el navegador, pero suele ser de 3 segundos). Esto se conoce como destello de texto invisible (o FOIT). Para mejorar este escenario, podemos utilizar 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, duplicarlo a lo largo de la línea de tiempo y luego agregar una interpolación.

    con lápiz de Simon Owen ( @s10wen ) en CodePen .

    Un ejemplo que muestra la pestaña 'Rendimiento' de Chrome Developer Tool.

    It’s also possible to debug potential performance issues that may arise when dealing with animation. In Chrome Developer Tools, there’s a “Performance” tab. By clicking this, then the “Record” circle icon, we can see a range of useful information. This technique greatly helped me when I built Mind’s Annual Report 2012-13, particularly the section of the website that has a map with animated circles showing the locations of Mind shops. Initially, the map section was loaded at the start, which caused repaint issues. Using the “Performance” tab, I was able to identify and update this, so the map only started animating when it was in view.

    , scalable vector graphics (SVGs) have become more and more widespread on the web. SVG is an XML-based markup that enables us to create vector graphics for the web. It works extremely well with animation and I’ve had the pleasure of building some websites that make use of this: the Mind report website (previously mentioned) and How Clean Is England? which Sara mentioned on Twitter! Thanks Sara!

    Mind’s Annual Report website made use of SVGs and animation to create a fun way to display their statistics for the year.
    The How Clean Is England? website was heavily based on illustration. SVGs and CSS animations helped to make the illustrations look crisp and keep file sizes to a minimum.

    Responsive Web Design

    One of the main pitfalls of building a website in Flash today is the lack of media queries. Today, mobile and tablet usage has surpassed that of desktop. In order to create the best experience, we must create a website that is accessible on all of these devices. On many devices, Flash will simply not load at all, and even if it did, it would most likely breach the viewport’s width or would scale and be unusable.

     

    Using media queries, we can create a layout that responds to the content. Here’s an example:

    div pLorem 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; }}

    See the Pen Simple Media Query Example by Simon Owen (@s10wen) on CodePen.

    , we could use typeof(x);, and this would output “number”. Another option would be to create a function and use isNaN to detect whether it is “not a number”:

    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."

    Collaboration

    With HTML, CSS, and JavaScript (and many other coding languages), Git and GitHub make collaboration extremely easy. For example, if I wanted to edit the HTML of Smashing Magazine’s “Author Template,” via GitHub, I could click the “Fork” button. This would create a version of the files (also known as the repository) under my own name. I could then make any amendments I like and submit a pull request. This would give the owner at Smashing Magazine the ability to review my pull request and accept or reject it. Once accepted, the code would go in the main repository.

    There are a number of great reasons for working in this way: You always have a backup of your work; you can revert to previous versions of your work, and collaboration becomes very easy. Someone could be working on one section of the website, or on the CSS or JavaScript, and when each team member has finished, you could review the changes and pull them in as required.

    If we tried the same with Flash, it would be a lot more difficult having to save and send an .fla file each time. If multiple people were to work on the same .fla, things could get very confusing. With HTML, CSS and JavaScript, it’s’ possible to do a “diff” on the code, which allows us to compare and review the code. We can even select certain code chunks, bring them in, or comment on them for further review and work.

    Conclusion

    Flash was one of the reasons I started building websites. It pioneered in a lot of areas, and this led to people creating amazing things with it. Over the years, it’s pushed the web forward a great deal. Adobe’s official announcement of dropping support of Flash, though, does raise concerns. It would be a massive shame if millions of websites using Flash were lost. There’s a petition to open source Flash and Shockwave. I do hope we don’t lose it forever. We’ve had some great — and weird — times.I’ll leave you with this classic example of the “weird” to which I refer:

    Here are the lyrics, if you’d like to sing along.

    Further Reading

    • What Do You Need To Know When Converting A Flash Game Into HTML5?
    • Recreating YouTube’s Ambient Mode Glow Effect
    • How To Draw Radar Charts In Web
    • Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering

    (ra, hj, al, il, mrn)Explore more on

    • Flash
    • HTML
    • CSS
    • JavaScript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Pasar de Flash a HTML, CSS y JavaScript

    Pasar de Flash a HTML, CSS y JavaScript

    Índice Video Fondo de vídeo

    programar

    es

    https://aprendeprogramando.es/static/images/programar-pasar-de-flash-a-html-947-0.jpg

    2024-05-20

     

    Pasar de Flash a HTML, CSS y JavaScript
    Pasar de Flash a HTML, CSS y JavaScript

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20