Na palestra de Silverlight 5 que apresentei este ano com Rodrigo Kono no TechEd Brasil, mostramos a nova versão do PivotViewer que vem no SDK do Silverlight 5.

Esta nova versão tem diversas melhorias, principalmente no que diz respeito ? forma de montar e utilizar a coleção de dados. Nesta nova versão não é mais necessário pré-processar a coleção usando Excel ou DeepZoom Composer e praticamente tudo pode ser feito usando Binding.

Abaixo tem um link para fazer download do código fonte do exemplo que apresentamos. Para usar este exemplo é necessário ter instalado o Tools do Silverlight 5 RC. Em breve vou publicar novos posts com mais detalhes sobre esta e outras novidades do Silverlight 5, mas por enquanto, aproveitem este exemplo.

PivotViewerSample.zip

Os duendes das estatísticas do WordPress.com analisaram o desempenho deste blog em 2010 e apresentam-lhe aqui um resumo de alto nível da saúde do seu blog:

O Blog-Health-o-Meter™ indica: Uau.

Números apetitosos

Um Boeing 747-400 transporta 416 passageiros. Este blog foi visitado cerca de 12,000 vezes em 2010. Ou seja, cerca de 29 747s cheios.

?

Em 2010, escreveu 23 novo artigo, aumentando o arquivo total do seu blog para 80 artigos. Fez upload de 2 imagens, ocupando um total de 85kb.

O seu dia mais activo do ano foi 16 de agosto com 110 visitas. O artigo mais popular desse dia foi C#.

De onde vieram?

Os sites que mais tráfego lhe enviaram em 2010 foram social.msdn.microsoft.com, google.com.br, devmedia.com.br, rederia.net e pt-br.wordpress.com

Alguns visitantes vieram dos motores de busca, sobretudo por exemplo de aplicação desktop c# vs 2010, flavia moreira, sites super interessantes, video aula silverlight e reconhecimento de voz c#

Atracções em 2010

Estes são os artigos e páginas mais visitados em 2010.

C# novembro, 2008
3 comentários

Sobre mim agosto, 2008
54 comentários

Sites super interessantes agosto, 2008
3 comentários

Populando Datagrid usando LINQ TO SQL em Silverlight agosto, 2008
16 comentários

WPF E RECONHECIMENTO DE VOZ março, 2009
4 comentários

Navegue pelo diagrama de classes do .NET Framework 4 utilizando o Deep Zoom (use o scroll do mouse e função clicar/arrastar), é show de bola!

Para experimentar em tela cheia: http://tinyurl.com/DotNetFramework4PosterDeepZoom

Ou faça o download do Poster .NET Framework 4 em  PDF.

Divirta-se!

Nesta vídeo aula você irá aprender como trabalhar com o componente RichTextBox do Silverlight.  Para começar a desenvolver um editor de texto

em:

http://www.dowhile.com.br/videos/silverlight/175-criando-um-editor-de-texto-parte-i.html

Abraços,

Comentem!

Estamos de volta!

Ficamos quase quatro meses distantes dos microfones. Todos nós estivemos envolvidos em projetos pessoais que tomaram uma boa parte do tempo e ainda tivemos o problema do fuso horário do Sonnino que estava no GMT+5.

Agora normalizado, voltamos com novas idéias e boas informações para sua orientação e atualização.

Se você acompanha o XAMLCast, deve ter percebido que a numeração mudou – decidimos acabar com a contagem por temporadas, pois afinal o XAMLCast é uma coisa só. Logo, contando 4 episódios da 1a temporada, 2 do Tech-Ed 2007 e mais 9 da segunda temporada, você vai ouvir agora o Episódio 16 do XAMLCast!

Claro que não conseguimos falar de tudo que aconteceu nestes últimos 3 meses e meio. Porém falamos dos acontecimentos mais importantes desde o MIX10 e também de algumas boas novidades fresquinhas.

Neste episódio falamos de:

• O indiscutível Visual Studio 2010 – http://msdn.microsoft.com/en-us/vstudio/default.aspx
• Novidades do Silverlight 4 – http://www.silverlight.net/getstarted
• Silverlight no Windows Phone – http://www.silverlight.net/getstarted/devices/windows-phone
• Expression Studio Ultimate – http://www.microsoft.com/expression
• Blend Fundamentals Training – http://www.microsoft.com/expression/resources/BlendTraining
• Moonlight 3 com próximas atualizações baseadas no Silverlight 4 – http://www.dotnetrocks.com/default.aspx?showNum=568
• ReactiveXaml – http://github.com/xpaulbettsx/ReactiveXaml e http://blog.paulbetts.org/index.php/category/programming/reactive-extensions/
• MSN na Copa – http://www.msnnacopa.com.br
• Behavior desenvolvido pelo Kelps para download no Expression Gallery – Deep Zoom Tag Filter Behavior: http://gallery.expression.microsoft.com/en-us/DeepZoomTagFilter
• Especial: Kelps entrevista  Tim Heuer no MIX10 – http://www.youtube.com/watch?v=yQ75swHZ5Pw (post completo em breve)

Para assinar:

• Feed RSS: http://www.xamlcast.net
• iTunes/iPod: pcast://www.xamlcast.net
• Zune: zune://subscribe/?XAMLCast=http://www.xamlcast.net

O XAMLCast também está no Twitter!

- Twitter oficial: @xamlcast (e hashtag #xamlcast)

- Siga os XAMLCasters:

• @kelps
• @robertos_br
• @rodrigokono

- Adicione o Twibbon do XAMLCast ao seu avatar!

• http://twibbon.com/join/XAMLCast

Até o próximo!

Abraços,

Kelps, Roberto Sonnino e Rodrigo Kono

Acabei de publicar no Expression Gallery uma behavior para filtrar imagens em uma colleção do Deep Zoom.

Essa behavior, quando aplicada a um objeto do tipo MultiScaleImage, permite que se filtre as imagens dessa coleção de forma semelhante ao que acontece no site Memorabilia do HardRock Café.

O uso da behavior é muito simples:

• Anexe a behavior à um objeto MultiScaleImage.
• Defina as propriedades Source e MetadataUri da behavior respectivamente para a url da galeria e o arquivo de metadados da galeria.
• Defina o valor da propriedade Filter da behavior para o filtro que quer aplicar.

A behavior trabalha com o arquivo de metadados gerado pelo Deep Zoom Composer para saber quais tags estão associadas a cada imagem. Ela entende tags separadas por vírgula (,) tanto para atribuir às imagens quanto para filtrar. Filtrar por múltiplas tags vai exibir todas as imagens que tenham pelo menos uma das tags do filtro.

O arquivo de metadados não precisa ser necessáriamente o mesmo gerado pelo Composer, mas deve ter o mesmo formato. A behavior o campo ZOrder do arquivo de metadados para saber qual é cada imagem, portanto, se esse arquivo for gerado manualmente deve se tomar o cuidado de garantir que estão sendo atribuídas as tags às imagens certas e sempre que a galeria for atualizada o arquivo de metadados também precisará ser atualizado.

A behavior também expõe uma propriedade (AvailableTags) que é um array contendo todas as tags disponíveis na galeria atual. Isso pode ser bem útil se quisermos exibir na tela todas as tags, como fiz no exemplo que está no Expression Gallery.

Cada vez que o filtro for alterado, a galeria será filtrada e ocorrerá uma animação para exibir as imagens desejadas. É possível controlar o tempo dessa animação e sua função de Easing.

As imagens são posicionadas de forma a preecher o espaço do controle da melhor forma possível, mas ainda preciso melhorar a lógica para quando apenas uma imagem é exibida.

Também há espaço para melhorias no algorítmo de posicionamento, no que diz respeito ao alinhamento das imagens do lado direito.

O código fonte está disponível no Codeplex. Sugestões, melhorias e bug fixes podem ser reportados lá ou aqui no blog.

Em breve estarei aumentando essa biblioteca do Codeplex com outras behaviors e helpers.

Ahhh, quem gosta de futebol pode ver essa behavior em ação em http://www.msnnacopa.com.br.

Pessoal, hoje vou falar sobre um recurso do Silverlight que está sendo muito utilizado atualmente, o Deep Zoom.

Antes de mais nada, você precisa baixar o Deep Zoom Composer, que é a ferramenta utilizada para desenvolver as aplicações em Deep Zoom. Você pode fazer o download do Deep Zoom gratuitamente através deste link.

A idéia desse artigo é passar uma visão geral da tecnologia para servir como base no desenvolvimento de suas aplicações. Iremos iniciar com uma breve introdução ao Deep Zoom e logo após explicarei as 3 etapas para seu desenvolvimento. Vamos lá!

O que é Deep Zoom?

O Deep Zoom Composer é uma ferramenta gratuita da Microsoft baseada em Silverlight onde você poderá criar uma coleção de imagens de várias resoluções e tamanhos e organizá-las ao seu gosto na etapa de composição. Após isso você poderá exportar ou publicar seu trabalho em uma página da web. Tudo isso com poderosos efeitos de Zoom que permite uma visualização  de altos níveis de detalhes de forma rápida, prática e fácil para quem deseja utilizar imagens de grandes resoluções em seu site.

Para utilizar o Deep Zoom Composer, é necessário instalar o plug-in do Silverlight em seu computador. Caso ainda não tenha, baixe gratuitamente através do Windows Update.

Exemplos de utilização do Deep Zoom:

Existe uma infinidade de coisas que você poderá desenvolver utilizando os recursos do Deep Zoom Composer, desde aplicações artisticas até complexos mosaicos de imagens.
Alguns casos onde a ferramenta se adequa perfeitamente:

• Mapeamento
• Banners Online
• Fotografias 3D
• Galeria de Fotos
• Catálogos Visuais
• Exibição de fotos em alta resolução

E alguns grandes cases de sucesso dessa tecnologia:

• Site da NASA
  

• Hard Rock Memorabilia
  

Criando seu projeto em Deep Zoom:

Abra o Deep Zoom Composer e crie um novo projeto.

Após a criação do seu projeto, você irá ver uma interface semelhante a esta:

Essa é a interface padrão do Deep Zoom composer. A Microsoft tentou aproximar ao máximo do padrão de interface do nosso querido Blend para que os desenvolvedores trabalhem em um ambiente extremamente familiar.

A interface é bastante simples, contendo apenas a barra de tarefas, o menu com as etapas necessárias para o desenvolvimento do seu projeto (Import, Compose e Export) e as funcionalidades referentes à etapa selecionada.

Vamos saber um pouco mais sobre cada uma das três etapas do ciclo de desenvolvimento da aplicação:

1ª Etapa, Importando suas fotos (Import):

Consiste na etapa de seleção das imagens que irão compor seu projeto, você poderá selecionar suas imagens clicando em “Add Image” (fotos de exemplo do Microsoft Students to Business Vitória/ES ).

2ª Etapa, Trabalhando com suas fotos (Compose):

Nesse passo, vocês irão utilizar as fotos inseridas na primeira etapa para compor seu projeto, é a etapa mais importante do processo de criação do seu projeto. É onde a criatividade entra em ação para desenvolver composições inovadoras utilizando os recursos da ferramenta:

• Slideshow: Ferramenta que permite a criação de apresentações de slides em Deep Zoom;
• Menu: Pemite a inserção de um menu de acesso em seu projeto, é muito útil para localizar um imagem dependendo da dimensão do seu projeto;
• Internal Links: É onde você poderá configurar links internos na sua aplicação, esses links poderão fazer chamadas à imagens ou áreas configuradas em seu projeto;
• External Links: Com esse recurso, você poderá criar chamadas a qualquer site da internet facilmente.

Todos esses recursos podem ser acessados/configurados ao clicar com o botão direito em qualquer objeto de seu projeto.

3ª Etapa, Exportando seu projeto (Export):

Terminou de compor seu projeto em Deep Zoom? Agora você pode exportar seu projeto utilizando os recursos disponíveis no workspace “Export”. Caso queira visualizar sua composição poderá utilizar o “Output Preview”.

Por padrão, você terá duas formas de exportar seu projeto: Via DeepZoomPix (antigo PhotoZoom) ou Customizar uma exportação (Custom).

Basicamente, o DeepZoomPix é utilizado como uma alternativa simples e rápida de publicar o seu projeto na web imediatamente após a sua criação. Já na exportação customizada, o arquivo compilado do projeto é salvo em seu computador para que publique onde quiser.

Publicando via DeepZoomPix:

1. Na aba do DeepZoomPix, faça o login utilizando o seu Windows Live ID (example555@hotmail.com) , caso não possua um Windows Live ID, clique aqui e crie um agora mesmo;
   
2. Após o login, uma nova página se abrirá para que escolha o local de publicação do seu projeto. Você tem duas opções: Salvar seu projeto em um novo álbum ou adicioná-lo à um álbum existente;
   
3. Clique em Publish e pronto! Seu projeto será publicado no site do DeepZoomPix.

Na exportação customizada você poderá exportar seu projeto para o Silverlight Deep Zoom (padrão), para o Seadragon Ajax (ancestral do Deep Zoom) ou, ainda, poderá exportar apenas a pirâmide de imagens formada (Images).

Para as três opções, basta que selecione um nome para seu projeto, o local de destino no seu computador e as configurações das imagens e clique em Export. Caso queira visualizar sua aplicação antes de exportar, existe a opção Preview com esta função.

Agora basta aguardar a exportação ser concluída. A duração desta etapa dependerá do tamanho, qualidade e resolução utilizadas na composição.

Após a conclusão do processo de exportação do seu projeto, você visualizará a janela abaixo.
Clique em Preview in Browser para visualizar seu projeto.

O seu projeto será exibido no Internet Explorer. Clique com o mouse sobre a sua composição e arraste-a para onde quiser. Com o scroll do mouse, você pode usar o efeito de zoom para ampliar e diminuir as imagens, permitindo visualizar em detalhes cada parte da foto.

Agora, basta inserir o arquivo .xap que foi gerado no local especificado na exportação em seu site/aplicação.

–
Quer saber mais sobre o assunto?

http://www.microsoft.com/brasil/windows/deepzoom/default.mspx

http://msdn.microsoft.com/en-us/library/cc645050(VS.95).aspx

http://www.silverlight.net/learn/quickstarts/deepzoom/

–

Qualquer dúvida é só deixar um comentário.
Abraços.