Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

animacion en html5

No description
by

elberth cabrales

on 3 December 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of animacion en html5

Animación enHTML5 Adobe Presenta Utilidad para Convertir Flash en HTML5 Editores Phase 2 Conclusión
Con la llegada de HTML5 y CSS3 se abre un nuevo mundo de posibilidades para las animaciones gráficas en la web. Después de pasar por el reinado durante años del recurso del GIF animado, y ahora que Flash empieza a dejarse un poco de lado (por los mismos inconvenientes que ha tenido siempre y por la fuerza comercial de Apple), llega el momento de mirar al frente y aprovechar las oportunidades que nos brindan HTML5 y CSS3.

Los nuevos estándares permiten una flexibilidad y potencia muy grandes para la creación de animaciones, además de hacerlasindependientes del dispositivo en el que se está visualizando: ordenadores, móviles, iPads, tabletas… Herramientas novedosas para el desarrollo de animación en html5 el lenguaje que esta cambiando la web Te facilitan el desarrollo de animación
en html5 sin saber programar en
javascript. Ya existen varias herramientas de calidad muy alta para la creación de animaciones HTML5 y CSS3, sobre todo en el entorno Mac. Además de resultar herramientas cómodas para trabajar y que contengan todas las opciones que necesita cada tipo de usuario, es muy importante entender el estado actual de estas tecnologías web y del soporte de los diferentes navegadores. En los sitios web de cada aplicación suelen detallar esta información y las posibles incompatibilidades que pueden surgir actualmente.
El desarrollo web está viviendo una revolución con la llegada de HTML5 que, por supuesto, afecta directamente al mundo de las animaciones visuales, que tienen que adaptarse a las últimas tecnologías y tendencias. Y estas herramientas serán unos aliados perfectos para conseguirlo. En el contexto de la convención Adobe MAX, Rik Cabanier, uno de los ingenieros de Flash, demostró una pequeña herramienta para convertir animaciones y videos que están en Flash a HTML5.
Si bien hace un tiempo comenzó la pelea entre Apple y Adobe por el tema de la compatibilidad de Flash para los dispositivos con iOS, éstos no son los únicos productos que ocupan ese formato. HTML5 se está expandiendo en la web. Bajo esa noción, Adobe aplicó su idea de “ayudar a los clientes a resolver problemas reales” y está empezando a incluir soporte para HTML5 en varios de sus programas.
Ya ofrece plugins para Illustrator CS5 y Dreamweaver CS5 ademas de una herramienta de exportación de contenido de Illustrator en HTML5. Pero lo que hace la herramienta que vemos arriba es distinto: toma una animación en Flash, terminada, y la traspasa a HTML5 en un par de segundos. No sólo eso, sino que también te apunta los elementos que no puede convertir. Y lo mejor es que no lo exporta como una película entera sino que mantiene la individualidad de los elementos que hay en ella para poder trabajar con ellos separadamente.
La herramienta de conversión a HTML5 todavía está en desarrollo y aún no está disponible para descarga.

Vía: Fayerwayer.com Adobe Edge la versión Preview 4 de Adobe Edge, porque todavía no han publicado Tumult Hype

es la mejor opción calidad-precio actualmente para crear animaciones en HTML5 y CSS3. Disponible sólo para Mac, es una herramienta muy completa a un precio asequible (39,99 doral) con la que no sólo pueden construirse animaciones. Tiene todas las facilidades para el usuario que no tiene ni idea de programación y muchísimos recursos para los usuarios más avanzados, todo ello en una interfaz muy lograda y fácil de usar.
El inspector de Hype es la parte más importante, desde ahí podemos definir todas las propiedades de nuestra animación o de cada elemento, además de definir las acciones y eventos asociados: clicks, rollovers, comienzos/finales de escenas, eventos de teclado…
También en el inspector se puede marcar la opción de avisarnos en todo momento deposibles problemas de compatibilidad con cada navegador, incluyendo los móviles.
Hype permite exportar las animaciones al formato widget de iBooks Author y está integrado con Dropbox para subir automáticamente tus animaciones y probarlas/compartirlas online rápidamente.
Puedes probar una versión gratuita durante 30 días de Hype descargándola desde la web oficial. Sencha Animator Sencha Animator es el editor de animaciones en HTML5 y CSS3 más popular del momento. Lleva bastante tiempo entre nosotros, es un software maduro y muy completo disponible para Windows, Mac y Linux. Su precio es el más elevado de todos (199$ con 30 días de prueba gratuíta) y cuenta con la ventaja de estar totalmente integrado con el resto de herramientas de Sencha ,
una infraestructura y framework muy completo para la creación de aplicaciones HTML5. Purple Animator Una herramienta más sencilla y también más barata (15,99) es Purple Animator, también disponible sólo para Mac. Es un editor con las herramientas fundamentales para la creación de animaciones en HTML5 y CSS3. Aunque no permite todas las posibilidades de Hype, sí tiene las más importantes y consigue que sea una herramienta sencillísima de utilizar.
Todavía tiene mucho que mejorar en la gestión de eventos y acciones en las animaciones, pero sin embargo tiene algunas características muy interesantes como la importación de ficheros PSD (Photoshop) con todas sus capas.
Las animaciones de Purple también están preparadas para exportarlas y añadirlas comowidgets animados en iBooks Author utilizando un plugin gratuito.
Full transcript