Seznámení s technologií Deep Zoom

Když na jaře letošního roku Microsoft představil novinky v připravovaném Silverlight 2, upozornil také na technologii Deep Zoom. Jde o zajímavou novinku, která umožňuje do webového prohlížeče servírovat data pro zobrazení gigapixelových fotografií bez nutnosti stahování velkých objemů dat. Pospojované fotografie s vysokým rozlišením, oskenované dokumenty s vysokým DPI, obojí můžete nabídnout k zobrazení do webového prohlížeče a návštěvník stránky přitom stáhne pouze minimum potřebných dat.

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.

Seznámení s technologií Deep Zoom

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.

Seznámení s technologií Deep Zoom

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:

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.

Seznámení s technologií Deep Zoom

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.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru