Estreando o novo blog, vou mostrar como criar experiências de Silverlight e DeepZoom para suas aplicações.

Introdução ao DeepZoom

O Deep Zoom é uma ferramenta poderosa que foi introduzida com o Silverlight 2. Com essa ferramenta é possível criar contextos de visualização de imagem muito interessantes.

Abaixo segue o link de um exemplo muito legal de aplicação criada utilizando Deep Zoom.

Acredito que o Deep Zoom pode trazer uma grande vantagem em aplicações de E-commerce, fazendo com que possamos trazer uma experiência diversificada aos usuários de nossas aplicações, trazendo como benefícios uma nova forma de navegar por entre os produtos, sem necessitar de paginação e mostrando inicialmente para o cliente apenas informações que realmente interessam aos clientes.

Utilizando o Deep Zoom Composer

Para criar esta aplicação estou utilizando as seguintes ferramentas:

Visual Studio 2008

Silverlight 3
Silverlight Toolkit 3

Deep Zoom Composer

Como primeira parte dentre dois posts, vou mostrar como criar uma aplicação Silverlight com DeepZoom utilizando o Deep Zoom Composer.

Após a instalação do Deep Zoom Composer, você o encontra no seu Menu Iniciar -> Programas -> Microsoft Expression -> Deep Zoom Composer

Após a abertura do programa, vamos criar um novo projeto e denominá-lo de TesteDeepZoom.

A tela inicial do Deep Zoom Composer mostra o primeiro de três passos que é a escolha das imagens. Clique no botão Add Image no canto superior direito e adicione quantas imagens quiser.

No meu caso, adicionei 3 imagens de exemplo do Windows 7, note que as imagens aparecem na lista ao seu lado direito, e uma pré-visualização é exibida no painel principal.

Após estar satifisteito com as imagens que vai utilizar, clique no segundo passo que é a composição das imagens

Nesta tela, você tem diversos componentes que estão descritos no diagrama abaixo. Você pode arrastar as imagens da parte inferior da tela e adiciona-las a composição. Logo após basta redimensionar as imagens e posicioná-las de acordo com seu gosto. Note que você tem a barra de visualização no canto inferior esquerdo que é muito útil quando você estiver criando uma composição com muitas imagens. 

Legenda:

1) Definição de camadas da composição
2) Painel de Visualização Geral
3) Área de escolha de imagens

 Agora, vamos exortar o nosso projeto para uma aplicação Silverlight:

Nesta tela, você verá imediatamente um preview de como ficará nossa composição. Temos diversas formas de exportação.

Clique na aba Custom no canto direito.

Você verá no painel Output Types as opções:
1) Images (Exportas as imagens da composição)
2) Silverligh Deep Zoom (Projeto de Silverlight com o Deep Zoom aplicado em Multi Scale Image) Vou abordar esse assunto mais profundamente em outro post
3) Seadragon Ajax (Outra solução muito interessante que pretendo abordar em outro post mais pra frente)

Escolha a opção Silverligh Deep Zoom. Coloque um nome para a aplicação. Ex.: TesteDeepZoom
Escolha aond eo projeto será criado

No painel abaixo mantenha as configurações padrões e troque apenas o Template para Deep Zoom Classic + Source (pretendo criar um post avançado sobre o DeepZoomComposer também, onde irei abordar mais funcionalidades da ferramenta)

Clique em exportar, aguarde a exportação e você verá a janela abaixo com as opções de Ver no Broeser, abrir a pasta do projeto,  abrir a pasta com as imagens geradas pelo Composer.

Clique em abrir a pasta do projeto e você verá a solução de Visual Studio criada e pode reaproveitar os controles e códigos criados em sua aplicação Silverlight.

Sua primeira aplicação Deep Zoom está pronta!!!

Agora é a parte em que o desenvolvedor me pergunta:

"Legal! Mas como eu faço isso dinamicamente com as imagens da minha base relacionadas com meus produtos???"

Isso meus amigos... é assunto para meu próximo post, onde mostrarei como criar uma aplicação Deep Zoom dinamicamente com C# e base de dados.

Espero que o post seja útil para que você comece a ver como funciona o Deep Zoom e comece a enxergar novas maneira de criar suas aplicações.

Até a próxima Arqinovação!!!