Seznámení s technologií Deep Zoom

Pokud jste ještě neslyšeli o technologii Silverlight, doporučuji k nastudování můj článek na ExtraWindows.cz, Nezbytná výbava pro práci s webem, kde je Silverlight popsán. Ve zkratce řečeno, Silverlight je reakce Microsoftu na technologii Flash. Vyžaduje stažení miniaturního doplňku do webového prohlížeče a umožní prohlížení nejrůznějších multimediálních či jiných dynamických stránek. Silverlight je podporován v Internet Exploreru, Firefoxu a Safari na platformách Windows a Mac OS X, podpora pro Linux by měla být také na dobré cestě.

Deep Zoom je jedna z nových vlastností připravovaného Silverlight 2. Představte si obrázek o rozměrech několika desítek tisíc pixelů. Myslím, že s jeho zobrazením by měl problém už i běžný prohlížeč fotek v počítači. Pokud byste něco takového umístili na web a chtěli po uživatelích, aby si jej zobrazili ve svém webovém prohlížeči, pak by vás kvůli dlouhé době stahování jistě odkázali do patřičných mezí. Deep Zoom to však řeší, a to bez jakékoli námahy na straně tvůrce i uživatele.

Deep Zoom v praxi

Implementace Deep Zoom z pohledu návštěvníka webové stránky vypadá tak, že se mu zobrazí běžně vypadající obrázek nebo fotka v jeho webovém prohlížeči. Jakmile však použije kolečko myši (nebo nějaký připravený ovládací prvek na stránce), dojde k přiblížení obrazu. Nemění se přitom rozměry obdélníku, ve kterém je fotografie zobrazena, mění se pouze míra jejího přiblížení. Jednoduše si zoomujete obraz. To, co zprvu vypadá jako běžná fotka pak po zoomu může jít až do neuvěřitelných podrobností.

Do prohlížeče jsou přitom odesílána data nutná pro zobrazení jen části výřezu nazoomovaného obrázku a to navíc jen v aktuální úrovni podrobností. Tím se výrazně šetří nároky na přenos dat.

Jak funguje Deep Zoom na skutečných webových stránkách se můžete přesvědčit už dnes - samozřejmě za předpokladu, že jste svůj prohlížeč vybavili podporou pro Silverlight. Koukněte například na stránku Hard Rock Memorabilia. Na první pohled to vypadá, že je zde několik malých, rozmazaných snímků poskládaných vedle sebe.

Zkuste však použít kolečko myši nebo klepnout na některou z položek v navigačním panelu nalevo. Fotografie se přiblíží a vy si ji budete moci do detailu prohlédnout.

Teď si zkuste představit, jak obtížné (co do objemu dat a nároků na výkon počítače) by bylo něco takového realizovat, kdyby se do prohlížeče načítal jeden velký obrázek (což zde ve skutečnosti máme) a třeba pomocí JavaScriptu se posunovalo zobrazení nějakého jeho výřezu.

Weby používající Deep Zoom

Další zajímavé ukázky konkrétního využití technologie Deep Zoom:

• Deep Zoom Obama

U posledního se krátce zastavím. Všimněte si, že fotografie prezidentského kandidáta je tvořena z dvanácti tisíců malých obrázků s tvářemi jeho příznivců. Fotografie Obamy zobrazená 1:1 by měla rozměry 10 000 x 10 000 pixelů.

Jak začít s Deep Zoom?

Pro fanoušky nových technologií, kteří by již nyní chtěli začít s tvorbou webů postavených na Deep Zoom, je určen program Deep Zoom Composer. Jde o velmi jednoduchý nástroj, s jehož pomocí si poskládáte výsledný obraz složený z několika menších fotografií. Přidejte do něj zdrojové soubory a natahejte je na plochu. Deep Zoom Composer pomůže s jejich zarovnáním a nastavením stejné výšky nebo šířky.

Hotový obraz pak exportujete ve formátu PNG nebo JPEG, přidat k němu můžete i automaticky vygenerovaný základ pro zobrazení ve webovém prohlížeči. Aby nedošlo k mýlce, Deep Zoom Composer je určen pro sestavování obrázků, které pak pomocí Silverlightu a Deep Zoom budete zobrazovat na nějaké stránce. Neslouží již přímo pro sestavení webové stránky se všemi jejími ovládacími prvky. To je již záležitostí nástrojů ze sady Microsoft Expression, resp. Visual Studia s patřičným doplňkem pro vývoj Silverlightových aplikací.

Máte-li tip na další zajímavý web používající Deep Zoom, dejte o něm vědět ostatním v komentáři pod článkem.