Artigo .net Magazine 61 - Deep Zoom

Artigo da Revista .NET Magazine - Edição 61.

Esse artigo faz parte da revista .NET Magazine edição 61. Clique aqui para ler todos os artigos desta edição

 

Clique aqui para ler esse artigo em PDF.

 

Deep Zoom

Conheça a nova tecnologia da Microsoft para composição de imagens para Web

 

Deep Zoom em português significa algo como zoom profundo. É uma tecnologia que permite a exibição na Web de imagens de alta resolução de forma otimizada utilizando técnicas de composição. Para que uma imagem com grande quantidade de dados seja exibida rapidamente, o Deep Zoom particiona a imagem em pedaços menores. Para permitir uma transição suave, é criada uma pirâmide com recortes de menores resolução, que é apresenta ao usuário. A Figura 1 exemplifica esta pirâmide.

 

Figura 1. Exemplo da pirâmide de recortes criado pelo Deep Zoom. A base da pirâmide encontra-se a imagem com maior resolução

 

A imagem original é a inferior, na base. A outras menores com menos resolução, são geradas a partir desta maior. Quando apresentado ao usuário, as imagens de menor resolução são apresentadas antes, e depois as imagens maiores são enviadas, conforme o usuário for aumentando o Zoom. A transição é bem suave dando uma excelente experiência ao usuário, otimizando a banda e recursos do servidor.

 

Nota do DevMan

A Google utiliza uma forma semelhante para exibição dos mapas de seu aplicativo GoogleMaps. O GoogleMaps utiliza QuadTree para armazenar uma pirâmide de imagens em diferentes resoluções. QuadTree (ou Q-tree) é utilizado para particionar um espaço bidimensional. Com uma estrutura de dados em forma de árvore, cada nó interno por ter até 4 nós filhos, assim cada quadrante é subdividido em outros quatros, seja quadrado, retangular, ou outra forma arbitrária. Q-Trees podem ser classificadas de acordo com o tipo de informação que representa, incluindo áreas, pontos, retas e curvas. Em suma, cada "quadrante" de Q-tree representa uma parte do espaço bidimensional de 2n x 2 n pixels. Caso esteja interessado em saber mais, recomendo o site: www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

 

Exemplos reais

Uma explicação teórica com certeza não é o suficiente pra esclarecer o que essa tecnologia realmente pode fazer por nós. Portanto vamos ver dois sites que fazem uso do Deep Zoom para exibir de uma forma totalmente diferente suas imagens de alta resolução.

Acesse o site www.deepzoomobama.com. Um grande mosaico com imagens em alta resolução de 10.000 por 10.000 pixels composto por mais de 12.000 thumbnails (imagens menores), enviados pelos apoiadores do Obama, através de seu site formam o rosto do então novo presitente americano Barak Hussein Obama. Através do Deep Zoom é possível ver o rosto de cada pessoa que enviou fotos para site. Conforme você for aumentando o zoom, outras imagens vão carregando, de forma bem dinâmica, provendo uma boa experiência ao usuário. O Deep Zoom utiliza como base o MS Silverlight. Na Figura 2 vemos a abertura do site.

 

Figura 2. DeepZoomObama.com

 

Outro exemplo de web site" [...] continue lendo...

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados