Em teoria tudo é muito bonito, mas é quando se põe em prática que vemos quando as novidades são realmente boas ou não. O René de Paula acabou de postar um excelente exemplo prático de uso do Silverlight com DeepZoom. O exemplo é um poster que mostra para onde vão os impostos dos americanos. Vale dar uma olhada para se inspirar….

Interessante também que o site original está em PHP, mostrando que não é obrigatório hospedar a aplicação em um site .NET.

Para onde vai o imposto dos americanos… em DeepZoom (post do René)

Silverlight DeepZoom – DAT09 – Wallstats – The Art of Information (link original)

Sei que estou devendo um post sobre os meus testes com o ASP.NET MVC, mas tenho estado mais ocupado do que eu esperava ultimamente. Enquanto isso, vale uma lida nas últimas informações postadas por Scott Guthrie e Phil Haack.

Scott Guthrie

• ASP.NET MVC Source Refresh Preview: Informações sobre atualizações do código fonte do ASP.NET MVC que foram publicadas no CodePlex e estarão presentes no próximo preview.
• April 11th Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Visual Studio, Silverlight: Links diversos sobre MVC, Silverlight, ASP.NET, AJAX e Visual Studio.

Phil Haack

• ASP.NET MVC Preview of a Preview: Informações sobre a última atualização de código fonte publicada no CodePlex.

Baseado no post do Ebertom, resolvi postar uma série de videos engraçados e interessantes sobre… Porquê Flex? AIR?

Why Flex

WhyFlex

WhyAIR

Why AIR
Because is Rocks!

Why Flex
Because is Rocks (GuitarPro Version)

Why Flex

Why AIR

Why Flex

Why FlashPlayer?

Why Flex?
By IgorCosta

Mais videos:
http://www.youtube.com/results?search_query=Why+Flex
http://www.30onair.com/all/

Abraços

\o/

Como prometi em um post anterior, vou detalhar aqui alguns dos conceitos e motivações por trás do gerador de thumbnails que disponibilizei no CodePlex como parte integrante de uma biblioteca para agilizar desenvolvimento ASP.NET chamada CNZK Web Library. O código que está no CodePlex não contém ainda uma documentação formal mas está bem comentado. Vou mostrar o motivo de algumas das decisões que tomei no desenvolvimento dessa classe e tentar explicar o funcionamento de alguns trechos de código.

Para começar: As Motivações

Eu coordeno um time de desenvolvimento responsável por diversos projetos dos nossos clientes. Para poder dar conta de todos os projetos de desenvolvimento ou manutenção de sites com eficiência e agilidade foi necessário desenvolver e aplicar metodologias e padrões. Durante algumas reuniões nós tentamos identificar pontos em comum entre os projetos que pudessem ser padronizados e transformados em uma biblioteca para evitar que o trabalho fosse refeitos todas as vezes. Um ponto que era muito importante para mim era que a utilização dessa biblioteca fosse o mais simples possível, para encorajar o seu uso e aperfeiçoamento.

A geração de thumbnails de imagens pode não parecer muito óbvia quando se analisa os pontos em comum entre sites, até o momento em que você começa a olhar o código das áreas de administração do site e vê a complexidade que é embutida no código para fazer upload de 2 ou 3 imagens para cada produto ou item de uma página. Além disso, tem mais outros 2 fatores que foram muito importantes na decisão de fazer o gerador de thumbnails: Gerenciamento de muitos arquivos em disco no webserver; Facilidade e agilidade de uso da área administrativa do site.

Essa biblioteca do Codeplex não contemplará apenas o gerador de thumbnails. Há diversas outras classes que já tenho prontas ou parcialmente prontas que estão apenas passando por uma limpeza de código antes de fazerem parte da biblioteca. A classe de thumbnail foi escolhida para ser a primeira por ser a que estava em estado mais maduro e por ter sido a melhor testada e mais utilizada da biblioteca até agora em nossos projetos.

Segundo passo: Decisões Técnicas e Arquitetura

A idéia inicial era fazer uma classe que tornasse possível redimensionar facilmente as imagens no momento do upload, para que o usuário não precisasse fazer upload de2 ou 3 imagens diferente apenas por causa do tamanho. Após fazer uma primeira versão eu notei que isso não agilizaria muito o processo de desenvolvimento e também não seria um componente muito reutilizável.

Então eu encontrei um capítulo em um livro que mostrava como fazer um HttpHandler para redimensionamento de imagem. O código no livro trabalhava de forma semelhante ao código que eu gerei, mas o tamanho final das imagens não era parametrizável e as miniaturas geradas eram armazenadas em disco. Essas duas características ainda não eram exatamente o que eu queria, então eu fiz a minha versão.

HttpHandlers são um recurso extremamente interessante do ASP.NET, pois nos possibilitam criar a nossa própria extensão de arquivo e tratá-la da forma que precisarmos, como se fosse um novo tipo de arquivo. O único problema em se criar sua própria extensão de arquivo é que será necessário regitrar essa extensão no IIS e informar que ela deverá ser processada pelo ASP.NET para que o código do seu handler seja executado (aliás, é isso que o ASP.NET faz com as extensões aspx, ascx e axd). A extensão axd já é utilizada pelo ASP.NET justamente para processamento de handlers (um exemplo disso é o trace.axd).

Então, o que eu fiz foi implementar uma classe extendendo IHttpHandler e registrar a minha classe como sendo o handler para qualquer chamada que for feita para arquivos com a extensão ".thumb.axd". Para o IIS, o que interessa é a extensão axd, que indica que o ASP.NET deve processar a requisição. Eu poderia ter usado apenas a extensão ".thumb", mas teria que registrá-la no IIS do servidor do site, o que não seria muito prático, principalmente levando em consideração a quantidade de ambiente que precisariam ser configurados (desenvolvimento, homologação, produção, etc…).

Como Funciona

Eu tentei tornar a utilização simples, rápida e pouco intrusiva. Uma das vantagens de utilizar a extensão .axd, é que o IIS está configurado para simplesmente repassar qualquer requisição feita à arquivos com essa extensão para o ASP.NET, sem sequer verificar se o arquivo realmente existe. Isso tornou possível que eu utilizasse a extensão que escolhi (.thumb.axd) como sufixo das imagens originais. Assim eu poderia chamar um thumb para uma imagem usando a seguinte URI: "/img/foto.jpg.thumb.axd".

Agora tudo que eu precisava era passar alguns parâmetros para que o handler soubesse qual deveria ser o novo tamanho da imagem. Como eu não queria que a url ficasse poluída, fiz com que os parâmetros de tamanho (que são obrigatórios) fossem passados como se fizessem parte do nome do arquivo, da seguinte forma: "/img/foto.jpg.200×150.thumb.axd". Pronto, agora posso redimensionar qualquer imagem nos meus sites. Outra vantagem é que os profissionais de interface podem utilizar esse controle sem nenhuma interferência dos programadores, poupando trabalho dos 2 lados.

Superficialmente, a lógica que o código segue é a seguinte:

• Verifica se a URI solicitada está no formato correto, utilizando Expressão Regular.
• Obtém a imagem que será redimensionada. Verifica se a imagem original existe.
  • Se existir, abre o arquivo e obtém suas dimensões. Nesse momento é configurado o cache, vinculado ao arquivo original.
  • Se não existir, verifica se está configurado um arquivo padrão para imagem não disponível e o abre.
  • Se não houver arquivo padrão, cria uma imagem em memória com os dizeres "Imagem não disponível".
• Faz o cálculo das proporções da imagem, para verificar se o tamanho solicitado é proporcional ao original.
  • Se o tamanho solicitado for proporcional, redimensiona a imagem para o novo tamanho.
  • Se não for proporcional, calcula o redimensionamento da imagem para que caiba no novo tamanho.
• Cria uma nova imagem em memória com o tamanho solicitado.
• Redimensiona a imagem obtida (original ou de aviso) para o tamanho proporcional calculado.
• Coloca a imagem redimensionada centralizada dentro da nova imagem.
• Define qual será o tipo de output (se o original for gif, a saída será gif. se não for gif, a saída será jpg).
• Faz o output da imagem, codificada no formato correto.

Alguns pontos interessantes desse handler:

Os thumbnails gerados são armazenados em cache para evitar sobrecarga de processamento no servidor. Esse cache está vinculado ao arquivo da imagem original, ou seja, se a imagem original for alterada o cache expira.

Sempre será retornada uma imagem, existindo ou não a original. Isso poupa bastante código de verificação nas páginas e problemas de layout.

A imagem redimensionada não será distorcida. Se a imagem original não estiver nas mesmas proporções da solicitada, ela será redimensionada proporcionalmente para caber no tamanho solicitado.

O peso das páginas vai diminuir, poupando banda dos usuários do site e tornando o carregamento da página mais rápido.

Outros parâmetros

Esse controle não faz apenas redimensionamento de imagens. Conforme as necessidades foram surgindo, novas funcionalidades foram desenvolvidas. Abaixo tem uma lista do que o controle faz, além de redimensionar imagens:

• Definição da cor de fundo. É possível definir a cor de fundo utilizando o parâmetro "bg" na URI. Essa cor será visível quando a imagem for de proporções diferentes da solicitada ou quando for gerada a "imagem não diponível".
• Definição da cor de frente. Parâmetro "fg". É a cor que será utilizada no texto de "imagem não disponível".
• Definição de texto. Parâmetro "txt". É o texto que aparecerá em "Imagem não disponível".
• Definição do método do cálculo de proporção. Parâmetro "inside". Define se a imagem deve ser redimensionada para caber inteira dentro da nova proporção ou se haverá cortes nas bordas. Os cortes são feitos em apenas 2 lados, no caso de inside=false.
• Definição de máscara. Parâmetro "mask". É possível colocar uma máscara translúcida sobre a imagem. A cor e opacidade da máscara são fornecidas no formato ARGB, em um hexadecimal de 8 caracteres. Ex.: mask=88FF0000 é igual a uma máscara vermelha com 50% de opacidade.
• Definições globais no web.config. É possível definir valores padrão para todos os parâmetros acima, exceto a máscara, no web.config da aplicação.

Documentação

Estou finalizando uma documentação completa do código, com exemplos e detalhes de todos os parâmetros. Essa documentação será disponibilizada no Codeplex ainda nesta semana.

Resumo

Expliquei um pouco sobre o motivo da criação dessa biblioteca e detalhei melhor o funcionamento do gerador de thumbnails. Achei melhor não colocar nenhum código neste post pois o objetivo aqui não era ser técnico. Quem quiser mais detalhes, pode baixar o código fonte no projeto CNZK Web Library no Codeplex e dar uma olhada. Se houver qualquer dúvida ou sugestão, basta postar um comentário no Codeplex neste blog.

Mais uma notícia quentinha vinda da nave mãe: Adobe Photoshop Express Beta.Esse lançamento já era esperado pela comunidade ja que o produto é uma versão online do famoso editor grafico da empresa e é feito usando outro produto da empresa, o Flex.Já é possivel usar o programa nessa fase beta e o plano dispõe [...]