CSS3 ikon
A HTML5 és CSS3 támogatására, problémamentes megjelenítésére pár éve még nemigen voltak felkészülve a böngészők, és még most sem 100 %-os minden elem és tulajdonság támogatottsága. Ezt hivatott látványosan és egyszerűen bemutatni a html5readiness.com weboldal, ahol az egyes böngészők színeket kaptak, és egy nagy, szivárvány szerű ábra egy-egy sugara egy adott HTML5 elemnek, CSS3 tulajdonságnak felel meg. Az időben is visszamehetünk, egészen 2008-ig, azért itt elég jól látszik, mi minden változott azóta a böngészők piacán.
Mint minden böngészőgyártó (vagy ha nem böngészőgyártó, akkor bizonyos technikákat propagáló) cég, a Google - talán elsőként - elkészített egy oldalt, ami teljes egészében a HTML5 oktatását és népszerűsítését célozza meg, elég szemléletesen, ráadásul a playground.html5rocks.com aldomainen gyakorolni is lehet, a Studio alatt komplett, kész HTML5 / CSS3 példákat találhatunk letölthető forráskóddal.
A HTML5ROCKS Studio interaktív példái közül ízelítőként néhány:
Az oldal másik fontos, gyakran hivatkozott része pedig a HTML5 prezentáció, ami a leírónyelvben rejlő lehetőségeket mutatja be szellősen.
A blogspot rendszerén belül öt új nézet jelent meg - szándékosan nem sablont írtam, mert egyrészt nem a sablonok között találjuk, emellett inkább alternatív, helykímélő nézetben jeleníti meg blogunkat - inkább egy szépen formázott RSS feedre emlékeztet a megjelenés.
A nézetek természetesen kihasználják a HTML5 - CSS 3 nyújtotta lehetőségeket, és AJAX is van a dologban - a legszebb és leglátványosabb a Mosaic és a Snapshot névre hallgató megjelenítés, ezek főleg a képekben gazdag blogokat - fotóblogokat, gasztroblogokat - dobják fel - a bejegyzéseket mindössze egy címmel és kisképpel jelenítik meg, majd ha föléjük visszük az egeret, CSS 3 transform / transition tulajdonságok segítségével picit "kiemelkednek", és megjelenítik a bejegyzés rövid részletét.
A nézetek használatához mindössze a blog URL végére be kell írni: /view
Az első nézet betöltődése után váltani tudunk az 5 nézet között: Flipcard, Mosaic, Sidebar, Snapshot, Timeslide
Élő példa: http://googleblog.blogspot.com/view/mosaic
A Google kezdte a html5rocks.com prezentációs weboldallal és HTML5-homokozóval, majd még jóval a stabil Internet Explorer 9 megjelenése előtt a Microsoft is elkészítette a saját demó oldalát, hogy megmutassák, bizony már az IE9 is meg tudja jeleníteni a canvas, svg, vagy mondjuk az aside html elemeket.
A Mozilla Firefox már egy ideje támogatja a html 5-öt, de a FF4 állítólag még jobb ebben (hardveres gyorsítás, 3D a böngészőben - WebGL), ezért hát ők is létrehoztak egy reprezentatív oldalt Web O' Wonder néven, ezen funkciók és az újabb webes technológiák, megoldások bemutatása végett - az eredmény pedig meg kell hagyni, kifejezetten szépre - látványosra sikerült!
A megszokott <video>, <audio>, <canvas> elemek bemutatásán túl van itt egy, a Naprendszeren és bolygóin körbevezető "alkalmazás", HTML5 alapú játékok, a 3D-t a webre hozó WebGL bemutatók és CSS3 animációk egyaránt.
Ami pedig a WebGL megoldásokat illeti: amennyiben maga a videokártya támogatja a ezt a funkciót, működik - viszont sok esetben maguk a driverek már nem naprakészek, ezért szükség lehet ezek frissítésére - erről a Mozilla demo oldala is figyelmeztet egy értesítéssel.
A CSS3 újdonságai közé tartozik az egyes HTML elemek dinamikus megjelenése is - persze ez még erősen böngészőfüggő, hiába jelent meg az IE9, és bár az emberek jelentős része az önmagát frissítő "alternatív" böngészőket használja, ettől függetlenül még sok gépen csücsükél valamelyik elavult Internet Explorer verzió, ami nem kifejezetten nyitott az újdonságokkal szemben - még akkor sem, ha a CSS3 tulajdonságok egy része nem is annyira újdonság...
Korábban csak a javascript vagy flash kínálta megoldások jöhettek szóba, amennyiben pár dinamikus elemmel akartuk gazdagítani weboldalunkat, ebben a tekintetben a CSS 3 azonban már jóval több olyan lehetőséget kínál, amit pont a böngészők gyenge támogatása végett visszabutított CSS 2.1.
Pár ilyen - az alább hivatkozott példaoldalon is szereplő - tulajdonság:
Eme két CSS tulajdonságot pedig egy kiváló példával mutatja be szerzője - a ha a lemezborító fölé visszük az egeret, tokjukból kicsusszanó bakelitlemezeket kapunk cserébe :)
A zurb.com reprezentatív oldalán találhatunk még további CSS3 példákat is - a napjainkra már egyre gyakrabban előforduló text-shadow és @font-face tulajdonságok, továbbá az átlátszóságot "biztosító" rgba színek egyaránt megtalálhatók itt.
Az aviary.com egy mindent-az-egyben típusú online szerkesztőcsomag, van itt az alapszintű és fejlettebb, rétegeket is támogató képszerkesztőktől [ Phoenix Image Editor ] kezdve a vektoros grafikák készítésére alkalmas [ Raven Vector Editor ] és színsémák készítésére alkalmas [ Toucan Color Palette Editor ] programokon át a zeneszerkesztőig [ Myna Audio Editor ] / zenekészítőig [ Roc Music Creator ] és a [ Peacock ] vizuális effektkészítőig minden.
A komplett csomag használata ma már ingyenes (korábban némileg korlátozott volt), a rendszer mögött rejlő technológia egy része, a felület azonban flash-ben lett elkészítve.
A korábbi HTML verziókhoz képest azonban HTML 5-ben a JavaScript API-n keresztül több látványos és funkciógazdag megoldásra van lehetőség, például a <canvas> elemen keresztül a rajzolásra is. Ezt meg is ragadták az Aviary fejlesztői, és elkészítették a HTML5 Photo Editor névre hallgató, elsősorban alapvető funkciókra használható online alkalmazást, ami azonban az eddigiektől eltérően beágyazható - azaz már saját weboldalunk adminisztrációs felületén keresztül is használhatjuk a továbbiakra:
A webes eszközökhöz egyébként léteznek a weboldalak képernyőképének lementésére / a választott online programmal való megnyitásra alkalmas Firefox és Google Chrome (Talon) kiegészítők, illetve a Chrome Web Store megjelenése után már "webalkalmazások" is (tulajdonképpen csak az adott szolgáltatásra mutató parancsikonok a Chrome "New Tab" megoldásán).
A beágyazható fotószerkesztőt több webes szolgáltatás is felhasználta már, példaául a szintén HTML5 alapú Momentile [ picture-a-day photo diary ] képmegosztó, a Facebookos ismerősök képeit buheráló Kaptur vagy a rrripple, a HyperPublic, a Pyclif (eme képmegosztó forrásában is ott figyel a HTML5 doctype), a Facebookon megjelenő webáruházak készítésére alkalmas Highwire, továbbá a Market Publique webboltjába feltöltött ruhák képeit is ezzel az eszközzel lehet korrigálni. A kutyatartók - tenyésztők közösségi oldala, a Dogster is alkalmazza az Aviary által kínált megoldást - szóval lassan külön bejegyzést lehetne írni arról, hány weboldal - webes szolgáltatás használja ezt a viszonylag fiatal, ám kétségkívül ötletes webalkalmazást.
A Google most már bevisz minket a múzeumokba is - természetesen egy HTML 5 alapú webalkalmazással, amit a Chrome Web Store megfelelő oldaláról önálló App-ként telepíthetünk is, ha Google Chrome böngészővel látogatjuk meg:
https://chrome.google.com/webstore/detail/aafjiaooblldgcephecfcafbmckcfeep
Találhatunk itt képeket és "3 dimenziós" múzeumi körutat a new yorki Metropolitan-ból, a moszkvai Tretyakov Galériából és a pétervári Ermitázsból, de a prágai Museum Kampa, a berlini Alte Nationalgalerie és természetesen a Smithsonian is terítékre kerül.
Szép. Innovatív. Letisztult. HTML 5.
A Google Chrome Web Store alkalmazásai között leltem rá a Divvr névre hallgató HTML 5 alapú online rajzprogramra.
A webdesignerek, fejlesztők számára szinte nélkülözhetetlen oldal tulajdonképp egy tutorialt készített, ahol szokásukhoz híven részletesen leírják egy HTML 5 oldal kódolását a vázlattól a kész oldalig. Természetesen a forrás is letölthető és van "előnézet" is: Coding a HTML 5 Layout from Scratch
Kedvenc blogmotorunk, a Wordpress se maradjon ki a szórásból - a jövőben egy külön bejegyzést is kívánok a HTML 5 alapú WordPress sablonoknak szentelni, addig is:
Demó - H5 WordPress Theme download
Sablon demo - Clean HTML 5 Template download
