Statuses

Animációk HTML5-ben

In Kurrens/ajánlott on 2011. március 23. szerda by Nacsa Sándor Címkézve: , , , , , , , , , , , , ,

Egy régi-régi ismerősöm vetette fel, hogy animált tartalmat szeretne a legkülönfélébb mai eszközökön megjelentetni. Ilyenkor ugyebár az embernek rögtön a HTML5 jut eszébe és keresni kezd. Ezen keresgélés eredményéről legjobb a Szoftver aktualitások-ban beszámolni, hiszen sok helyen felmerülhet ilyen igény a különféle eszközök gyors megjelenése következtében, és egyáltalán nem triviális választ találni (még a weben sem) erre a tulajdonképpen triviális kérdésre.

A Google keresés azt mutatja, hogy pont márciusban nagyon megnőtt az érdeklődés ebben az ügyben (826 ezer találat a <HTML5 animation>-re) .

Ebből a legelején kibukott, hogy az Adobe Labs március 8-án Technical Preview formában megjelentette a Wallaby-t, mellyel Flash animációkat (Flash Professional – FLA – fájlokat) lehet HTML5-re konvertálni. Erről a magyar weben is lehet olvasni. A termék wikijében lévő Features and Support mutatja, hogy mit is támogat. A Wallaby wiki bevezetőjéből kiemelném még, hogy (kiemelés tőlem):

  • The focus for this initial version of Wallaby is to do the best job possible of converting typical banner ads to HTML5. Wallaby does a good job of converting graphical content along with complex, timeline-based animation to HTML5.
  • At this time, the Wallaby HTML5 output uses Webkit specific CSS3 tags and therefore is not compatible with Firefox, IE9, or other HTML5 browsers. Supported Webkit browsers include Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod).
  • Wallaby’s design goal was not to produce final form HTML ready for deployment to web pages. Instead it focuses on converting the rich animated graphical content into a form that can easily be imported into other web pages in development with web page design tools like Dreamweaver.

Az alábbi videó ebben a megcélzott kontextusban (Flash banner-ek konvertálása) mutatja a terméket és annak gyakorlati lehetőségeit:

White Horse Flash Engineer Lars Jacobson walks through the process of converting a Flash banner to HTML5 using Adobe Labs’ new tool, Wallaby. Jamie Beckland, Emerging Media Manager, narrates how Wallaby can save time, but still need expertise to clean up post-conversion errors. Digital marketers who are looking for a quick win for the iPad, iPhone, and other iOs devices should consider using Wallaby on simple Flash content.

A magyar weben megjelent cikkek az okokat emelik ki. A Hungarian Adobe User Group (HAUG) hírében ezt találjuk (kiemelés tőlem):

A Wallaby kódnévre keresztelt kísérleti technológia funkciója az volna, hogy az Adobe® Flash® Professional (FLA) file-t átalakítsa HTML (HTML5) file-okká. Ez lehetővé tenné, hogy a grafikai és animációs tartalmakat olyan helyen is meg lehessen jeleníteni, ahol nem támogatott a Flash futtatási lehetőség, mint például iPhone-on, iPaden vagy iPod Touch-on. HTML konvertálás után szerkeszthetővé válik a file, akár az Adobe Dreamweaver® szoftver segítségével, akár manuálisan is.

Az Adobe tehát eszköz oldalról is meg fogja oldani a HTML5 animáció problémáját, noha maga a HTML5 technológia koránt sem annyira erős ebben a tekintetben, mint az övé. Mindez azonban még a jövő zenéje, hiszen a konverziós szoftver még csak kezdeti fejlesztési stádiumban van, no és a HTML5-nek és különösen a böngészőkben való implementációknak van még hova fejlődni ebben a tekintetben.

Mire képes ma leginkább a HTML5 animáció? Ezt legegyszerűbben a HTML5 hivatalos logo JavaScript-es animációja mutatja: ld. http://www.kevs3d.co.uk/dev/html5logo/. Még ennél is egyszerűbb, további példák a Web Animations and Transitions in HTML 5 oldalon találhatók.

Hogy ismerősöm konkrét igényének kielégítésére mennyire képes a mai HTML5 technológia azt viszont ilyen egyszerűen nem lehet eldönteni. Hiába keresünk ugyanis HTML5 alapú animációs eszközöket, amelyeket ajánlhatnék neki, hogy azok segítségével maga győződhessen meg a lehetőségekről, ilyenek egyszerűen még nincsenek. Legalábbis én nem találtam ilyeneket.

Egyelőre látni lehet a Microsoft IE9 kapcsán néhány bemutató lehetőséget, például:

Ezt egyébként a http://beautyofthewebhu.cloudapp.net/#/productguide (A web szépsége) oldal termékbemutató aloldalán magyar kisérő hanggal is megnézheti mindenki (+ magyar mellékelt szöveggel), ahogyan ugyanonnan további magyar videók is megnézhetők a lehetőségek kitapasztalására.

vagy

This video is made to promote the latest campaign for Internet Explorer 9: FrameRate Fest. With this video, we invite all creative developers to go wild with HTML5! You can upload your interactive HTML5 art on frameratefest.com and win an Xbox 360 + Kinect. Are you up for this challenge? Create a stunning masterpiece and share your frame!

A http://www.frameratefest.com/-on pedig már elég teljes választékát lehet látni a pályaműveknek, hiszen március 25. a határidő (ld. meghirdetés). Az oldalon a Hall of Fame-en lehet látni a legtöbb szavazatot kapott frame-eket.

Google oldalról pedig a Sports Illustrated Magazin kisérleti példányát bemutató videót ajánlanám a lehetőségek bemutatására (bár animációs szempont csak felhasználói felület célokra használnak ebben animációt, és meglehetősen egyszerűeket):

A collaboration between TWF, Google, and SI for the Google I/O 2010 Keynote Presentation. Narrated by SI Editor, Terry McDonell. Developed in HTML5 using: CSS Animation, Embedded Fonts, Drag & Drop, HTML5 Video, Geolocation, Web Workers, App Cache, Web DB, Feeds, Google Maps API, Google Buzz API, Rails, Lazy Loading Pages, (And no Flash).

Alternatív lehetőség a jelenlegi határok érzékelésére a zseniális magyar Prezi szoftver Flash-ről HTML5-re való átírásának az esete, amelyről Hardi János és Bódi Ádám tartottak tavaly szeptemberben előadást a stockholmi Disruptive Code konferencián. Az Experiences of migrating a Flash based Prezi to HTML5 – Adam Bodi & Janos Hardi (2011. szeptember 30.) bejegyzésben beágyazott videófelvétel megtekinthető. Az animációra vonatkozó lényeg [9:50]-től kezdődik azzal, hogy miért nem a JavaScript alapú utat választották, majd [15:40]-től a CSS3 transzformációkkal való megvalósítást mutatják be.

A [25:40]-től kezdődő kérdés-felelet részből kiderül, hogy akkor még csak kísérleti projektként hajtották ezt végre, az editorhoz hozzás sem nyúlva, így kb. 2 hónapnyi idő alatt állítottak elő egy a Flash-es Prezivel egyenértékű változatot. A legnehezebb feladatnak a fontok támogatása bizonyult (Prezi sajátosságok miatt nyilván). Elmondták azt is, hogy az ideális megoldásban, nevezetesen a minden platformon HTML5 alapú Preziben még nem tudnak gondolkodni. Többek között azért, mert a számukra szükséges CSS3 szintet még nem minden böngésző támogatja. Az iPad alapú Prezi termék elkészítését (ami persze a Flash Apple általi kitiltása miatt csak Safari HTML5-ös lehet) ugyanakkor ezek után tisztán üzleti döntéstől függőnek mondták.

És valóban most januárban meg is jelent az iPad változatú Prezi. Lásd: Show prezis anywhere on the iPad (2011. januárt 10.). Ajánlanám még az Academy: Inserting Animations in Prezi [Balázs Turai, 30 March 2010] Prezi prezentációt, amiből látni lehet többek között, hogy micsoda animációk lehetnek a Preziben.

7 hozzászólás to “Animációk HTML5-ben”

  1. […] RÉSZLETEK ITT. Elküldve 2011. 03. 23. 13:53 by Nacsa Sándor Megtekintve: 0 alkalommal Támogatóink | Kapcsolat | Tagok | Adatvédelmi nyilatkozat | Felhasználási feltételek | 2011, DevPortal // // //> //> $(document).ready(function () { $('ul.sf-menu').superfish(); }); […]

  2. Fölöttébb érdekes, kíváncsi vagyok, mit lehet kihozni ezekből a lehetőségekből. D

  3. Sanyi, A Mobil Pikniken is tartott a Prezi egy előadást. Itt kifejezetten az volt a végkifejlet, hogy mindent megpróbáltak, 6 emberhónapnyi munkát beleöltek bedőlve a HTML5 hype-nak – de képtelenség volt HTML5 alapon iPadra a Prezi megjelenítést megcsinálni. A teljesítményen, kép-és font minőségen kívül olyan akadályokba is ütköztek, hogy a mobil Safari csak 20 MByte memóriát adott a weboldalnak, miközben volt 200 megás prezi is…

    A végén OpenGL-el és natív kóddal csinálták meg az iPad verziót. A Mobil Piknikes prezit itt találhatod:
    http://prezi.com/z48v2auv4qjd/prezi-az-ipaden-a-html5-ig-es-tovabb/

    • András, igen hasznos információ. Köszönöm. Persze tudnunk kell, hogy itt a Mobile Safari-ról van szó, ráadásul egy korábbi változatról. A iOS 4.2-es (tavaly november) Mobile Safari-ban például már van inline SVG, amit a Prezi prezi — többek között — hiányol. No és most márciusban jelent meg az iOS 4.3 és az abban lévő Mobile Safari jelentősen tovább lépett (például a benne megjelent Nitro JavaScript engine kb. 2-2.5-szer gyorsabb).

      Maga a nagy Safari (Safari 5) egyébként a — nevezzük így — “grafikai” szempontból a FireFox 4 szintjén áll, és mindkettő jelentősen elmarad a Chrome 11-től, de még ennél sokkal jelentősebben az IE9-től:
      Browser CPU GPU FPS Elves
      Working Presents Packed
      per Minute
      IE 9 100% 20% 56 50 238
      Chrome 11 100% 16% 41 14 71
      Firefox 4 100% 4% 13 1 4
      Safari 5 100% 10% 20 1 4
      ld. Comparing Hardware Accelerated SVG across Browsers with Santa’s Workshop (2011. március 9.)

      Ezért roppant érdekes lesz a MIX’11-en megismerni az IE9 Windows Phone 7-be kerülő változatát.

      Akárhogy is: míg az iOS és — tegyük hozzá — Android vonalon valószínűleg csak 2012-re oldódnak fel és csak fokozatosan a Prezi HTML5-ben való megvalósításának korlátai, addig SzVSz Microsoft vonalon az IE9-nek köszönhetően már telefonon is feloldódnak 2011 karácsonyára.

      Javasolt iOS és Android infó:
      Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support (2010. november 23.)
      Android 2.2 Froyo browser: HTML5, accelerometer, Flash Player 10.1 and more (2010. július 5.)
      Android 2.3 Gingerbread: the browser (2010. december 6.)
      What’s new on Safari for iPhone 4.3 and iPad 4.3 (2011. március 10.)

      VAGYIS: a HTML5 hype és a mobilos implementációk funkcionális teljessége (pontosabban iOS és Android esetben korlátozottsága) plusz a “nagy” HTML5[és társai] böngészők desktop szintű alkalmazásokra való alkalmassága (pontosabban FireFox 4 és Safari 5 esetben korlátozottsága) ma már egyértelműen különválasztandók mindenféle HTML5 alkalmassági kommunikációban. Ezt mutatja a legelején hivatkozott Comparing Hardware Accelerated SVG across Browsers with Santa’s Workshop (2011. március 9.).

      Másképpen fogalmazva: amíg IE9 és Chrome 11 alapokon teljes mértékben igaz a desktop “grafikus” alkalmazásokkal való versenyképesség (persze a HTML5 és társai szabványok adott támogatottsági korlátai mellett, pl. IE9 “csak” 2G), addig a többire — még a mostani legújabb változatok mellett is — ez csak (akár erősen) korlátozottan igaz.

      Az állításom az, hogy még ez a kettős állapot is megszűnik 2012 során. Ami persze nem azt jelenti, hogy az addig piacra került Apple iOS és Android eszközökön is megszűnik majd ez a kettős állapot.

      Mellesleg hardver szempontból már a 2011-es telefon chip-ek élvonala is közel jutott a desktop gyorsítási szintekhez 3D-ben. Lásd:
      Marvell ARMADA beats Qualcomm Snapdragon, NVIDIA Tegra and Samsung/Apple Hummingbird in the SoC market [again] (2010. szeptember 23.)
      “Ultimate 3D graphics performance with quad unified shaders for 200 million triangles per second (MT/s)”
      — ami egyébként nem kevesebbet, mint ezt jelenti: Marvell’s tri-core ARM chip has near-PS3-level graphics (2010. szeptember), mivel a Sony Playstation 3 GPU-ja 250 millió háromszög per másodperc teljesítményű

  4. […] (2011. május 27.) – HTML5 mint univerzális platform: van-e alternatívája? (2011. május 23.) – Animációk HTML5-ben (2011. március 23.) – Minőségi webfejlesztés: kezdeményezés és helyzetkép (2011. augusztus […]

  5. […] RÉSZLETEK ITT. Elküldve 2011. 03. 23. 13:53 by Nacsa Sándor Lementve: HTML5 Megtekintve: 953 alkalommal Tweet Kapcsolat Tagok Adatvédelmi nyilatkozat Felhasználási feltételek   ©2012 // // // //> //> […]

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: