Kelps

Cortina (overlay) de Loading usando CSS, v2

2016-08-24T09:33:00.001-03:00

Em outubro eu fiz um post mostrando como criar e usar uma cortina de loading usando CSS. Uma coisa muito boa daquela abordagem é que sua implementação não depende de nenhum markup html extra nas páginas. O visual é criado 100% em CSS e para usar basta acrescentar o class “loading” no body da página usando um javascript bem simples.

Desde então o projeto onde usei esse loading evoluiu e eu fiz algumas melhorias naquela implementação:

O loading antes funcionava apenas no body da página, agora funciona em elementos individuais também (div, por exemplo)
O loading não é mais imediato, passando a aparecer de forma gradual apenas após 1.2s da solicitação, assim se o processamento for muito rápido o overlay não aparece. Além disso a apresentação gradual do loading é mais agradável visualmente.
O loading agora protege a página/elemento contra cliques, assim o usuário não conseguirá clicar novamente em botões ou elementos da página enquanto o loading estiver definido, mesmo dentro do período de 1.2s descrito acima.

Comecei mudando o CSS body.loading:after para .loading:after e trocando seu position de fixed para absolute. Isso faz com que ele passe a funcionar em qualquer elemento. Depois disso eu acrescentei uma série de outros estilos no CSS. Para facilitar a compreensão eu coloquei comentários explicativos a seguir:

/*animações que serão usadas para exibir o overlay de loading. Estão repetidas 3 vezes mudando apenas o prefixo para oferecer suporte no maior número possível de browsers.*/

/*A animação vai durar 2s, sendo que nos primeiros 60% o overlay estará invisível e a partir daí aparecerá gradualmente até atingir 60% de opacidade*/

@-moz-keyframes loading-anim {

  0%,

  60% {

    opacity: 0;

  }

  100% {

    opacity: 0.6;

  }

}

@-webkit-keyframes loading-anim {

  0%,

  60% {

    opacity: 0;

  }

  100% {

    opacity: 0.6;

  }

}

@keyframes loading-anim {

  0%,

  60% {

    opacity: 0;

  }

  100% {

    opacity: 0.6;

  }

}



/*muda o ponteiro do mouse e faz com que cliques parem de funcionar para evitar processamento duplicado*/

.loading{

  cursor:wait;

  pointer-events:none;

}



/*faz o loading que não for no body aparecer apenas sobre o elemento sofrendo loading (por isso foi alterado de fixed para absolute)*/

body .loading{

  position:relative;

}



/*muda o loading do body de volta para fixed e limita seu tamanho para o tamanho da janela*/

body.loading:after{

  position:fixed;

  max-width:100vw;

  max-height:100vh;

}



/*acrescentadas as chamadas à animação definindo seu tempo em 2s*/

.loading:after {

    opacity: 0.6;

  -moz-animation: loading-anim 2s ease-in-out;

  -o-animation: loading-anim 2s ease-in-out;

  -webkit-animation: loading-anim 2s ease-in-out;

  animation: loading-anim 2s ease-in-out;

    pointer-events:auto;

    content: "";

    cursor: wait;

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,.7) url("data:image/gif;base64,...") no-repeat center center;

}

Abaixo tem um CodePen mostrando o código acima em funcionamento.

Controle de Versão - Acabaram as desculpas para não usar

2016-04-24T11:23:00.001-03:00

Estamos em 2016 e eu ainda me impressiono com a quantidade de desenvolvedores e até mesmo empresas que não controlam a versão do seu código fonte, seja por questões culturais, “falta de tempo”, custo ou falta de informação.

Até uns 15 ou 20 anos atrás, custo até poderia ser considerado um argumento válido, principalmente em se tratando de desenvolvimento para Windows, já que a maioria das soluções conhecidas eram ferramentas pagas e a maioria das empresas de pequeno porte sequer teria orçamento para esse tipo de despesa. É claro que já existiam soluções grátis e até mesmo de código aberto, mas até recentemente pouquíssimas empresas ou mesmo indivíduos confiavam em soluções livres para desenvolvimento profissional “sério”.

Eu mesmo, no começo da minha carreira (em meados de 2000), trabalhei em um projeto cuja versão confiável do código era aquela que estava sendo executada no servidor do site (ASP) e nos meus projetos pessoais e da faculdade o controle de versão que eu fazia consistia em arquivos zip do diretório do código fonte, nomeados como aplicacao_1.zip, aplicacao_2.zip, aplicacao_3.zip, etc.

Desde então, já trabalhei com diversos sistemas de controle de versão: SourceSafe, Clear Case, CVS, SVN, TFS, Mercurial e Git. De fato, no início a tarefa de configurar e usar alguns desses sistemas de controle de versão não era trivial, mas hoje não há mais desculpas. Há agora controles de versão para todos os gostos e eu pretendo mostrar aqui algumas opções que todo desenvolvedor deveria conhecer. As opções que vou mostrar podem ser usadas com custo inicial ZERO e esse é o principal motivo desse post.

Eu acredito em código aberto e na minha opinião, todo desenvolvedor sério deve se envolver de alguma forma com open source, nem que seja apenas acompanhando um projeto sem nunca contribuir com código. Só o fato de acompanhar será um incentivo para os mantenedores do projeto e até mesmo solicitações de funcionalidade ou relatos de bugs são uma forma de contribuição muito importante.

Para os propósitos deste artigo vamos dividir projetos em 2 perfis distintos:

Código Aberto - projeto cujo código fonte está disponível de forma pública para qualquer pessoa que tenha interesse. Pode ou não aceitar contribuições de terceiros e sempre deverá ser respeitada a licença de uso escolhida pelo criador.
Código Fechado – projeto pessoal ou corporativo cujo código fonte está disponível apenas para uma pessoa ou grupo de pessoas. Pode ser que o produto final do projeto seja de livre uso, mas o acesso ao código fonte é restrito e claramente limitado.

Para ambos os tipos de projeto acima, minha recomendação de controle de versão é o Git, mas com soluções diferentes de hospedagem. No próximo post vou entrar em mais detalhes sobre minha escolha do Git.

Uma coisa importante de dizer aqui é que Git e GitHub são 2 coisas distintas! Git é um sistema de controle de versão open source criado em 2005 por Linus Torvalds (pai do Linux) e GitHub é uma plataforma e comunidade de desenvolvimento de código aberto que hospeda repositórios Git.

Agora vamos às minhas recomendações:

Código Aberto – Git com repositório central hospedado no GitHub.
- GitHub oferece repositórios ilimitados para projetos open source com custo ZERO, ou seja, você pode criar quantos projetos quiser no GitHub sem custo algum, mas esses projetos serão públicos e qualquer pessoa terá acesso ao código fonte.
- Sistema de Issue Tracking para relatos de bugs e solicitações de novas funcionalidades. Qualquer usuário do GitHub pode relatar um problema ou sugerir novas funcionalidades nos projetos públicos.
- Apesar de o repositório ser público, seu criador tem total controle sobre quem tem permissão para realizar commits.
- Qualquer usuário do GitHub tem permissão para criar um patch e submeter para o criador do projeto por meio de um Pull Request, mas o criador se reserva o direito de aceitar ou não o Pull Request ou até mesmo adicionar outros usuários como contribuintes do projeto.
Código Fechado – Git com repositório central hospedado no Visual Studio Team Services (também conhecido como VSO, VSTS ou visualstudio.com).
- VSTS é o oposto do GitHub pois oferece projetos e repositórios privados ilimitados com custo ZERO para projetos com até 5 desenvolvedores.
- Ótimo sistema de Issue Tracking (chamados Work Items no VSTS) para relatos de bugs, solicitações de funcionalidades, controle de progresso e roadmap.
- Permite adicionar stakeholders ilimitados. Stakeholders são usuários que têm acesso ao projeto no VSTS, mas apenas para com objetivo de criar e acompanhar Work Items (Issues). Stakeholders não têm acesso ao código fonte.
- Sistema de Build e Release robusto e extremamente fácil de usar com 240 minutos/mês sem custo. O sistema de Build pode inclusive ser usado com projetos hospedados fora do VSTS, como por exemplo no GitHub (mais detalhes em um próximo post).
- Constante evolução. O time responsável pelo Visual Studio, TFS e VSTS na Microsoft adotou o modelo de desenvolvimento de software Agile, com sprint de 3 semanas, ou seja, o VSTS é atualizado em média 1 vez/mês com correções, melhorias e novas funcionalidades. Vale acompanhar o blog de Brian Harry, Vice Presidente da divisão de Cloud e um dos responsáveis atualmente pelo VSTS.
- Não há opção para criação de repositórios públicos.

Ambas as sugestões acima também oferecem opções pagas. O GitHub permite a criação de repositórios privados por um custo mensal e o VSTS permite adicionar mais desenvolvedores e/ou funcionalidades aos repositórios pagando individualmente ou por meio de assinatura MSDN, mas meu foco aqui era falar das possibilidades sem custo.

Algumas pessoas/empresas temem usar um controle de versão online, por diversos motivos. Os tempos hoje são outros e ambas as minhas sugestões acima são empresas extremamente sérias, sólidas, idôneas e responsáveis. Ambas têm termos bastante extensos sobre privacidade e segurança. Eu poderia até ter falado da opção de usar um servidor TFS local no lugar do VSTS, mas meu objetivo aqui era mostrar opções grátis (TFS local requer uma licença que tem um alto custo) e que MUITOS desconhecem, além é claro da complexidade da manutenção e atualização do servidor local que passaria a ser nossa responsabilidade. O serviço VSTS é tão robusto e seguro que a própria Microsoft o utiliza agora para muitos dos seus próprios produtos como o Visual Studio e o TFS e VSTS, no lugar de servidores internos. Isso para mim é prova mais do que suficiente de que é seguro e robusto o suficiente para times e projetos de qualquer tamanho e importância, pois se não fosse assim a Microsoft não arriscaria colocar seus códigos fontes online dessa forma.

Este é apenas meu primeiro post de uma série sobre o estado do controle de versão em 2016. Nela pretendo mostrar como tirar proveito dos diversos recursos e serviços que temos à nossa disposição hoje para desenvolver software com alto nível de controle e qualidade, da forma mais simples possível e de preferência sem custo algum. No próximo post vou entrar em mais detalhes sobre minha escolha do Git como controle de versão e mostrar como utiliza-lo de forma simples e eficiente com ambas as soluções citadas.

Depurando site no IIS sem precisar elevar o Visual Studio

2016-04-19T15:27:00.001-03:00

Uma coisa que me incomoda bastante é ter que executar o Visual Studio como Administrador para poder depurar um web site hospedado no meu IIS local.
Eu entendo perfeitamente o motivo disso, mas para quem não sabe, segue abaixo uma explicação rápida:

Por questões de segurança, usuários só têm permissão para depurar seus próprios processos, ou seja, não podem depurar processos de outros usuários. Isso acontece para proteger aplicações contra vírus e códigos maliciosos que poderiam interferir em outros aplicativos ou mesmo manipular a memória com intenção de corromper ou obter dados sigilosos.
Sites no IIS são executados sob o usuário definido em seus Application Pools, portanto o seu usuário que está executando o IIS não tem permissão para depurar esses processos.
Mesmo que seu usuário faça parte do grupo de administradores do computador, de modo geral ele roda como se não fosse administrador para proteger o sistema e só muda para modo elevado se você tentar executar alguma ação que necessite dessa permissão. Quando isso acontece, aparece aquela modal perguntando se você realmente deseja executar como administrador.

A solução mais comum que se encontra na internet para esse problema costuma ser executar o Visual Studio como Administrador, mas essa solução me incomoda bastante pelos seguintes motivos:

Perdemos a integração com o shell do Windows, ou seja, não conseguimos mais arrastar e soltar arquivos do Windows Explorer para o Visual Studio (justamente pelo fato de serem processos de usuários diferentes)
Ao dar um duplo clique em um arquivo qualquer que esteja vinculado ao Visual Studio (.sln, .csproj, .cs, .aspx, etc..) ele será aberto em uma nova instância do Visual Studio, mesmo que já exista uma instância aberta. Se configurarmos o Visual Studio para sempre abrir como Administrador, para cada arquivo que tentarmos abrir a partir do Windows Explorer teremos uma nova instância do VS.
Sempre que executamos o Visual Studio como Administrador aparecerá aquele prompt de segurança para confirmarmos a operação, ou pior, teremos desabilitado o prompt para parar de incomodar e com isso reduzido a segurança do computador como um todo.

Uma solução que eu tentei uma vez foi configurar o Application Pool dos meu sites no IIS para serem executados com meu usuário, mas nunca consegui fazer essa alternativa funcionar como deveria.
Até que achei uma solução onde não procurava: Remote Debugger!

Pelos meus testes tem funcionado perfeitamente. É bem simples de usar:

Execute o aplicativo Remote Debugger como Administrador (ele é instalado junto com o Visual Studio).
No Visual Studio, faça o procedimento normal de Debug > Attach to Process…, mas no campo Qualifier (onde deve estar escrito o nome do seu computador), mude para 127.0.0.1:4020 (ou outra porta qualquer que esteja configurada no Remote Debugger). Para ver a porta, vá em Tools Options no Remote Debugger.
Agora é só achar o processo do IIS que está executando o site em questão e depurar!

Se esses passos acima funcionarem, há uma opção melhor onde não será mais necessário iniciar o Remote Debugger sempre que for usar.

Basta instalar o serviço do Remote Debugger usando o aplicativo Remote Debugger Configuration Wizard, que também é instalado com o Visual Studio. A única pergunta que lhe será feita é para qual tipo de rede você vai permitir o debug. Eu marquei apenas a opção de redes Private.
Depois vá ao gerenciador de Serviços do Windows e altere esse serviço recém instalado para que seja executado com seu usuário e não com o usuário LocalSystem. Se não fizer isso, sempre que tentar anexar o processo para depuração será solicitado um usuário e senha.

Meu computador agora está com o serviço do Remote Debugger configurado e em modo automático, assim não preciso mais abrir meu Visual Studio como Administrador para depurar sites hospedados no IIS.

Update 23/05/2017: Link para a página de download do Remote Tools for Visual Studio 2017 e link direto, caso a página seja alterada no futuro: vs_remotetools.exe

Cortina (overlay) de Loading usando apenas CSS

2015-10-26T12:38:00.001-02:00

Neste momento estou trabalhando em um projeto migrando para HTML a parte em Silverlight de um dos produtos da empresa onde trabalho. Esse designer se comunica com a aplicação por meio de web apis, que podem demorar um pouco para responder dependendo do volume de dados e carga do servidor.

Depois de ter trabalhado alguns anos em uma agência eu aderi à filosofia de que código HTML deve ter relevância semântica sempre que for possível, evitando a inclusão de atributos e tags desnecessários ao máximo. Com isso você acaba com um código mais limpo, menor, mais fácil de dar manutenção, mais fácil de alterar visualmente no futuro via css e mais leve de processar no browser.

Quando a aplicação fizer uma chamada para a api que demorar um pouco, eu precisava exibir uma tela de “loading”, mas eu queria fazer isso da forma mais limpa possível. Graças ao pseudo-seletor de css ::after, que eu adoro, eu fui capaz de criar essa tela usando apenas CSS, sem acrescentar nenhuma tag no HTML.

Como funciona:

Parte 1 - O pseudo-seletor ::after (e seu irmão ::before) permite incluir conteúdo, via css, “depois” ou “antes” do conteúdo do elemento que você está selecionando. Eu escrevi “depois” e “antes” entre aspas pois não é exatamente o que muitas pessoas pensam. O conteúdo será incluído ainda dentro do elemento selecionado, mas antes ou depois do conteúdo normal do mesmo. O conteúdo desse pseudo seletor deve ser definido pela propriedade “content” do css, e pode ser qualquer texto. Exemplo: você pode colocar uma citação na sua página escrevendo <cite>sua citação</cite> e fazer com que ela seja exibida entre aspas usando o css cite::after, cite::before{content:’”’; font-size:1.5em;}.

Adicionei a seguinte chamada na minha folha de estilo: body.loading:after{content:””; cursor:wait; position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.7);}. A partir de agora, se eu adicionar o class “loading” no body da página, vai aparecer um overlay preto com 70% opacidade sobre toda a página. O truque aqui foi que deixei o content vazio, mudei o cursor para espera e o position para fixed, para que esse pseudo elemento que acabei de criar ficasse com sua posição absoluta em relação à janela do browser. Definindo top, left, right e bottom para 0 eu deixei o elemento do tamanho da janela. Até aqui tudo bem, tudo o que temos é uma cortina cobrindo a página. Eu poderia ter colocado a palavra “carregando…” no content e teria ficado bom, mas eu quiz algo mais, o que nos leva à parte 2.

Parte 2 – Imagem em Data URI. Todos os browsers modernos suportam a definição inline de elementos que normalmente são externos (imagens, css, js, etc…). Você pode definir a propriedade “src” de uma tag “img” usando esse recurso e isso é inclusive recomendado se a imagem for pequena, para reduzir o número de requests feitos pelo browser. Para representar imanges assim você deve convertê-la para uma string em formato base64. Isso também pode ser usado em CSS, ou seja, você pode definir imagens de background dessa forma e ter um layout, com imagens, que não depende de nenhum arquivo externos exceto o .css. Se você trabalho com Visual Studio e tem a extensão Web Essentials instalada, basta clicar em qualquer imagem no Solution Explorer que você encontra uma opção que cria a string base64 da imagem selecionada.

O que eu fiz foi gerar um gif com a animação de loading que eu queria usar e acrescentar no css que já havia criado. No final da linha eu acrescentei um “no-repeat center center”, para que essa imagem de fundo fique exatamente no meio da janela do browser, independente da resolução ou tamanho da janela. O código ficou mais ou menos assim (não cabe o código base64 inteiro dessa imagem no print abaixo):

Parte 3 – Eu só precisei utilizar javascript nessa solução para aplicar o class “loading” no body da página, sempre que fosse necessário. No próximo post eu mostro a solução javascript que usei para simplificar o uso da tela de loading de forma inteligente e exibindo a animação apenas nas operações demoradas.

PS.: os pseudo-seletores ::before e ::after e o uso de Data URIs são suportados apenas a partir do Internet Explorer 8 e em todos os outros browsers modernos, porém no IE8 os pseudo-seletores devem ser escritos com apenas 1 “:” (notação do CSS2.1). A notação mais correta atualmente (CSS3) utiliza é “::” é suportada a partir do IE9 e em todos os outros browsers, mas se usar a notação do CSS 2.1 também vai funcionar em todos os browsers.

Abaixo tem um Codepen que fiz mostrando o resultado final de forma interativa. Clique no botão “load” para ver a cortina de loading.

See the Pen qOoKaM by Kelps Leite de Sousa (@kelps) on CodePen.

Build 2015 – Build Tour São Paulo

2015-04-10T11:06:00.001-03:00

A conferência Build é o meu evento técnico preferido, desde que a Microsoft extinguiu o MIX em 2011, mas infelizmente eu não irei para o Build em São Francisco esse ano. Por um lado essa é até uma boa notícia, com a cotação do dollar do jeito que está, mas não tem preço a oportunidade de interagir diretamente com o pessoal da Microsoft e outros profissionais, além de rever velhos amigos, conhecidos e MVPs do mundo todo com quem normalmente interajo apenas por redes sociais e e-mails.

Mas o evento este ano conta com uma novidade: O Build Tour! Uma turnê de mini eventos de 1 dia por várias cidades ao redor do mundo, trazendo alguns palestrantes da Microsoft e apresentando muitas das novidades que serão mostradas em São Francisco no final desse mês. O evento principal em São Francisco será entre os dias 29/abril e 1/maio e o Build Tour começa um pouco depois, em Londres e Nova York, no dia 18/maio e termina em Los Angeles no dia 15/junho, passando pela Alemanha, México, Cingapura, Nova Zelandia, Australia, Coréia do Sul, França, China, Holanda, Republica Tcheca, India, Itália, África do Sul, Canadá e, o mais importante, Brasil!

Sim, o Build Tour fará uma parada em São Paulo no dia 21/maio! Será a 4º parada do evento. Ainda não tem muitos detalhes sobre o evento (como local e lista de palestras), mas as inscrições já estão abertas e eu estarei lá com certeza.

Para saber mais detalhes sobre o evento, acompanhar as atualizações e fazer sua inscrição, acesse o site https://saopaulo.build15.com/. Para saber mais sobre Build Tour como um todo ao redor do mundo, acesse https://www.build15.com/.

Não se esqueça também que, como já é de costume todos os anos, os Keynotes do primeiro e segundo dias do Build em São Francisco serão transmitidos ao vivo em http://www.buildwindows.com/ nos dias 29 e 30 de abril, por volta das 12:30, e praticamente todas as palestras são gravadas e disponibilizadas para visualização e download em aproximadamente 48h, ou seja, mesmo que você não possa via para o evento em São Paulo no dia 21/maio, ainda poderá aproveitar o excelente conteúdo técnico.

Se você for para o evento em São Paulo, me procure para bater um papo!

Navegacao localhost com Project Spartan no Windows 10

2015-03-31T23:55:00.000-03:00

Se você está usando o Preview do Windows 10 então provavelmente estava tão ansioso quanto eu para poder testar logo o Spartan, novo navegador de internet da Microsoft. Ontem (30/03/2015) foi liberado para o grupo FAST o update 10049, contendo a primeira versão pública do Spartan.

Como era de esperar de um desenvolvedor web, a primeira coisa que fui testar foi um site que está hospedado no IIS do meu computador. Para a minha surpresa, a página nao carregou de forma alguma, mesmo estando funcionando normalmente nos outros navegadores instalados no mesmo computador.

Como todo bom beta tester, a primeira coisa que fiz foi relatar este problema para a Microsoft, usando o aplicativo Windows Feedback do Windows 10, detalhando o que eu tentei fazer e inclusive adicionando prints de tela. Como no meu computador de trabalho eu não coloquei o Windows 10 ainda (achei melhor ter pelo menos 1 computador com Windows 8.1, "just in case..."), não tive como continuar testando e só pude voltar a "brincar" quando cheguei em casa.

Após fuçar um pouco eu me dei conta de uma coisa: O Spartan é um aplicativo Metro/Modern/Universal/Windows. Sendo assim ele está sujeito às mesmas restrições de qualquer aplicativo que façamos para a loja. Uma dessas limitações é que esses aplicativos, por padrão não têm permissão para fazer requesições web de loopback, ou seja, requisições para a própria máquina. Isso inclui localhost, "nome-do-computador", entradas no arquivo de hosts local, etc... Este recurso se chama AppContainer e é um mecanismo de segurança dos aplicativos da loja.

Como sou desenvolvedor web, uma ferramenta que uso bastante é o Fiddler, para monitorar e depurar tráfego http de projetos em que trabalho. Acontece que o Fiddler tem uma configuração que nos permite criar excessões de loopback para que aplicativos da loja possam realizar requisições locais.
Para realizar essa configuração basta acessar o menu Tools > Win8 Loopback Exemptions ou clicar na opção WinConfig da barra de ferramentas.

Após isso será exibida a tela abaixo, contendo a lista de aplicativos da loja, onde você poderá informar quais estão isentos da restrição de loopback. Agora basta escolher o Project Spartan, salvar a configuração e usar o novo navegador com seu sites locais normalmente. Espero que nos proximos builds do Windows 10, ou pelo menos antes da versão final o Spartan já venha com essa exceção configurada por padrão.

PS.: Uma segunda opção para editar as regras de exceção é o aplicativo open source Windows 8 Loopback Exempltion Manager disponível no Codeplex: http://loopback.codeplex.com/. Se você quiser entender como funciona essa lista de exceção, dê uma olhada no código fonte desse aplicativo.

Resolvendo mudanca automática de layout de teclado no Windows 8

2014-10-15T12:36:00.001-03:00

Desde quando instalei o Windows 8 no meu computador, ainda durante o beta, eu notei um comportamento estranho e que me incomodava muito: O layout do meu teclado mudava “sozinho”.

No início eu achava que era a sincronização de configurações que estava fazendo isso, mudando o layout do meu computador do trabalho para o layout de casa e vice-versa. Para a maioria das pessoas isso não seria um problema, pois normalmente teriam todos os teclados com o mesmo layout (ABNT2 para o teclados nacionais). Mas para mim isso é um problema pois tenho 3 computadores:

Desktop em casa com teclado USB ABNT2
Laptop no trabalho com teclado Americano (comprado nos EUA) + Teclado ABNT2 wireless da Microsoft
Surface Pro 2 com Type cover Americana

Para “resolver” isso eu desabilitei no PC Settings o sincronísmo das configurações de teclado e língua

Agora, cada um dos meus computadores tem suas próprias configurações individuais neste aspecto. Meu Surface e deskto em casa não tiveram mais problemas, pois ambos têm apenas 1 teclado, mas meu laptop no trabalho continuou apresentando mudanças de layout do teclado “aleatórias” e eu não conseguia descobrir a causa. Passei a achar que o Windows 8 tinha alguma lógica interna que tentava ser “esperto” e descobrir o layout do teclado, mas estaria se perdendo por ter 2 teclados físicos com layouts diferentes.

Por um tempo, para mitigar o problema, eu removi o teclado com layout americano das configurações no meu laptop e dexei apenas o ABNT2 que é o que uso para trabalhar, mas essa configuração não é boa se eu tiver que ir para alguma reunião ou cliente com o laptop pois nesses casos o teclado estaria errado. Acabei colocando o teclado americano novamente e tendo que conviver com a mudança “automática” do layout.

O ideal seria que o Windows identificasse automaticamente o hardware que estou usando e se adaptasse de acordo, ou seja, se eu digito no teclado se fio ele sabe que é ABNT2, se eu digito no teclado do laptop ele sabe que é padrão americano, e a língua que estou usando continuaria sob meu controle. Mas não é assim que funciona.

Finalmente, depois de MUITO tempo trocando chaves e acentos (o que é particularmente ruim em .NET pois as chaves e ; e aspas são alguns dos caracteres que mudam de lugar nesses 2 layouts) eu descobri o motivo das mudanças de layout “automáticas” e como resolver o problema. Até o Windows 7 a tecla de atalho para mudança de layout era shift + alt. No Windows 8, são 3 teclas de atalho: shift + alt para mudar a lingua, ctrl + shift para mudar o layout de teclado e Windows + barra de espaço para mudar entre as conbinações configuradas de teclado + lingua. Viram o problema? Ctrl + shift é uma tecla MUITO usada em edição de texto, principalmente se você trabalha escrevendo código. Agora está explicado e a solução é bem simples.

Como temos 3 formas de mudar o layout do teclado e língua, posso facilmente desabilitar 2 delas e mantar apenas 1 que faça ambas as alterações. Sendo assim, vou desabilitar shift + alt e ctrl + alt e deixar apenas o Windows + espaço. Para fazer isso, siga os passos abaixo:

No painel de controle, acesse a tela de configurações de língua e vá em configurações avançadas, conforme no print abaixo.

Escolha a opção de mudar as teclas de atalho da barra de línguas, clicando no link abaixo.

Note que no meu computador tem 2 línguas e 2 layouts de teclado, mas apenas a opção de trocar entre eles tem tecla de atalho. Selecione esta opção e clique no botão de mudar sequencia de teclas

Agora bastou mudar para a primeira opção, dar Ok em todas as janelas e pronto, problema resolvido.

De agora em diante, se eu quiser mudar o teclado por estar usando o nativo do laptop ou quiser mudar a língua para ficar com correção ortográfica correta ao escrever em inglês ou português basta usar a tecla Windows + espaço até marcar a combinação desejada de teclado e língua.

Realmente, escolher Ctrl + shift como atalho padrão para mudar o layout de teclado foi uma idéia muito, muito ruim. Fazer essa configuração vir ativa por padrão foi pior ainda. Espero que essa dica ajude mais gente que esteja com o mesmo problema que eu estava.

Webcast sobre Novidades no WPF 4.5 - MVP Showcast 2014

2014-08-25T13:50:00.001-03:00

Entre 15 de setembro e 09 de outubro deste ano acontecerá a quarta edição do MVP ShowCast, um evento virtual gratuito sobre tecnologias Microsoft, composto por webcasts transmitidos ao vivo por MVPs e outros profissionais conhecidos da comunidade técnica brasileira. O evento é organizado por MVPs com o apoio da Microsoft e será composto por 64 sessões, sendo 32 de TI e 32 desenvolvimento de software.

Este ano eu apresentarei uma sessão no dia 08/10 as 20:00 sobre as Novidades no WPF 4.5. Se você tiver interesse nesta ou em outras sessões do evento, basta se inscrever nelas pelo site e esperar pelo dia da apresentação. Não percam essa oportunidade.

Integrando o botão voltar do Windows Phone com o controle WebBrowser

2014-01-06T11:54:00.000-02:00

Recentemente trabalhei em um projeto para Windows Phone onde a aplicação continha um mix de telas xaml e webviews (páginas web hospedadas nos servidores da empresa). O uso de webviews era um requisito da empresa pois as funcionalidades existentes nessas páginas não estavam disponíveis por meio de apis e tais apis não serão disponibilizadas no futuro próximo.

Para dar uma boa experiência para os usuários da aplicação, queríamos que o botão voltar do aparelho também afetasse a navegação do webview, fazendo com que o usuário não perceba que estã em uma webview e a aplicação inteira tenha um comportamento consistente. Já vi várias aplicações no Windows Phone que usam webviews sem fazer isso e a experiência é péssima pois você está no webview, usa o voltar do aparelho para tentar ir para a página anterior e acaba saindo da navegação do webview por completo e indo para a tela anterior ao webview (o aplicativo Audible é um exemplo desse comportamento ruim).

Para fazer essa integração com o botão voltar não basta assinar o evento do voltar do telefone e chamar o voltar do webbrowser pois é necessário saber se o webbrowser ainda tem para onde voltar e temos que tomar cuidado para não entrar em um looping de backstack (navegando entre páginas que foram chamadas usando o back, fazendo com que a pilha nunca acabe).

Para realizar isso de forma correta, precisamos controlar a navegação do webview. Esse controle consiste em criar e manter uma lista contendo as urls navegadas e um método que decide se o webview ainda pode voltar. A única limitação da solução proposta neste post é que ela só funciona corretamente para casos onde a navegação entre as páginas em modo webview passa parametros via url (querystring) e não via post. Se alguma página for navegada via post, o back pode não vai voltar para ela como o usuário espera. No caso da aplicação que eu estava trabalhando isso não seria um problema, mas se fosse seria necessária uma solução bem mais complexa que envolveria injeção de javascript nas páginas do webview.

O controle da navegação é feito assinando o evento “Navigated” do controle WebBrowser. Abaixo segue o código comentado usado nesse event handler.

int GoingBack = 0; //contador indicando se está voltando
Uri CurrentPage = null;
Stack<Uri> NavigationStack = new Stack<Uri>(); //pilha de navegação

/// <summary>
/// conta quantas páginas foram navegadas para saber se pode voltar.
/// ignora a contagem quando a navegação foi feita usando back
/// </summary>
void webview_Navigated(object sender, NavigationEventArgs e) {
    lock (this) {
        if (GoingBack > 0) {
            GoingBack--;
        } else {
            if (CurrentPage != null) {
                NavigationStack.Push(CurrentPage);//acrescenta a página de onde está saindo na pilha de navegação
            }
        }
        CurrentPage = e.Uri;
    }
}

O NavigationEventArgs do evento acima tem uma propriedade chamada NavigationMode que teoricamente indicaria se a navegação é do tipo New, Back, Forward ou Refresh, mas não está sendo usada pois ela não indicou os valores corretos nos meus testes, mesmo quando eu estava usando “history.back();” ou “history.go(-1);” via javascript injection no webview. Por isso foi necessário controlar se está sendo feita navegação de back e quais páginas estão na pilha.

O segundo método usado para esse processo é o responsável por tentar efetuar a navegação do webview para a página anterior e informar se conseguiu.

/// <summary>
/// Tenta navegar o browser para a página anterior. Se conseguir retorna true, se não houver página anterior ou der erro, retorna false.
/// </summary>
bool TryGoBack() {
    lock (this) {
        if (NavigationStack.Count > 0) {
            try {
                GoingBack++; //incrementa o contador de navegação voltando
                webview.Navigate(NavigationStack.Pop()); //remove a última página navegada da pilha e navega para ela
                return true;
            } catch { }
        }
    }
    return false;
}

A última parte do processo todo é assinar o evento do botão back do telefone usando o código abaixo:

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e) {
e.Cancel = TryGoBack();
if (!e.Cancel) base.OnBackKeyPress(e);
}

Se sua aplicação tiver mais de um lugar que utilize webviews, você pode criar um controle para encapsular o webbrowser e os 2 primeiros métodos, mas o evento do botão voltar deverá ser assinado em cada página que usar esse controle, pois não é possível assinar o evento do voltar a partir de controle. Não esqueça de fazer o método TryGoBack ser public se encapsular o controle, para poder chamar a partir da página.

DISCLAIMER: Este código é disponibilizado “as is”, e atende às necessidades descritas acima, mas deve ser bem testado para garantir que funcionará da forma desejada em outras aplicações. Este código funciona tanto para Windows Phone 7 como 8.

Xbox One no Brasil

2013-12-03T16:23:00.001-02:00

No dia 22 de novembro de 2013 ocorreu o lançamento do Xbox One em 13 países, entre eles o Brasil (quem diria?). Comprei o meu em pré-venda online dia 22/06 e recebi no dia 25/11.

Fiquei muito contente pelo simples fato de o Brasil ter feito parte do primeiro grupo de países onde o novo console seria disponibilizado, algo que não é muito comum para nenhum tipo de lançamento de artigos de tecnologia, mas talvez isso seja um sinal de que estão começando a dar maior importância para o Brasil de uma forma geral.

Pré-venda no Brasil

Como era de se esperar as lojas brasileiras ainda não estão preparadas para lançamentos desse tipo. A maioria das lojas online não conseguiu entregar os aparelhos no dia do lançamento, mesmo tendo tido mais de 5 meses de período de pré-venda para planejar a logística. Olhando nas reclamações na internet ainda é possível encontrar pessoas que não receberam seus consoles quase 15 dias após o lançamento! E o problema não foi muito diferente nas lojas físicas, onde pouquíssimas unidades foram disponibilizadas e a maioria já estava vendida no dia do lançamento, fazendo com que muita gente interessada não conseguisse comprar.

Kinect

O novo Kinect (que agora não é mais vendido à parte e faz parte do pacote) sofreu um ENORME avanço. Meu Kinect anterior mora na caixa em que veio pois minha sala não tem espaço suficiente para que ele funcione corretamente e os comandos eram tão poucos, específicos e imprecisos que não justificavam seu uso. Este novo sensor em comparação é espetacular. Com ele é possível navegar por praticamente toda a interface do console usando apenas voz, exceto algumas telas específicas (configurações) ou para digitar textos. Tenho usado constantemente o Netflix sem o auxílio de controle algum e devo dizer que continuo surpreso com a qualidade do reconhecimento de voz. Aliás, navegar e comandar o console por voz é na maioria dos casos muito mais rápido do que utilizar o controle ou gestos.

Ele também é muito mais tolerante com relação à distância do sensor e posicionamento. Minha TV está colocada de lado com relação ao meu sofá e a uma distância bem pequena, mas mesmo assim o sensor me reconhece perfeitamente todas as vezes. Ao me reconhecer ele já me autentica e carrega minhas configurações, o que é fantástico.

Inteface e aplicativos

A inteface do novo Xbox é bem familiar para que já usa o Xbox 360 ou Windows 8, mas nesse novo console está bem mais próxima do esquema de tiles do Windows 8 e Windows Phone. A navegação é simples e intuitíva e o sistema responde com muita agilidade a todos os comandos e aplicativos.

A lista de aplicativos disponíveis no Brasil é menor que nos EUA, mas os mais importantes estão todos lá, tendo inclusive alguns nacionais: Netflix, Saraiva Player, Sky Online, Telecine, Vivo Play, Crackle, Machinima, Muu, SporTV, TED, Twitch e Youtube. Como no 360 é necessário ser assinante Live Gold para poder usar qualquer um desses aplicativos e nem todos estão no mesmo nível de qualidade (o Youtube por exemplo não responde direito aos comandos de voz e tem navegação bem ruim, mas o Netflix está excelente).

Além dos aplicativos acima temos o Internet Explorer 10, que roda de forma excelente e muito rápido, bem diferente da experiência encontrada no 360, onde ele já estava no limite do hardware. A experíencia de usar o IE no Xbox One é muito semelhante a versão “Metro” do IE no Windows 8, sem plugins mas com suporte avançado a HTML5 abas e até modo InPrivate.

Resumo

Por enquanto estou muito satisfeito e até impressionado com meu novo console. Este é apenas o primeiro post de uma série que estou preparando sobre os recursos suportados, jogos e funcionalidades da versão brasileira do console.

Windows 8 + Xbox 360 + compartilhamento via charm de dispositivos

2012-11-15T19:02:00.001-02:00

Acabei de publicar um vídeo no Youtube mostrando um exemplo de aplicação para Windows 8 usando charm de devices para exibir vídeo no Xbox. No futuro vou fazer um artigo mostrando como programar seu aplicativo para Windows 8 para que suporte essa funcionalidade mas por enquanto, assistam ao vídeo e tirem proveito do recurso que já está presente em alguns aplicativos da Loja do Windows 8, como por exemplo as apps de Música, Fotos, Vídeos.

Este vídeo foi feito utilizando o Surface RT e Nokia Lumia 920 com WP8 que todos os que foram ao Build 2012 ganharam.

MVP em Silverlight pelo terceiro ano seguido!

2012-10-01T13:09:00.001-03:00

Acabei de receber o comunicado de que o meu MVP em Silverlight foi renovado pelo terceiro ano consecutivo! Quem aí quer prova maior de que o Silverlight ainda está no páreo?

Este ano será excepcional para todos nós, desenvolvedores XAML. Prevejo muito Silverlight, Windows Phone e Windows 8 no futuro.

Que comece outro ano de XAML!

.NET Client Profile “troll” e suas mensagens incorretas de erro de referência

2012-08-13T15:27:00.001-03:00

Este é um pequeno erro meio troll do .NET que já me pegou desprevinido algumas vezes e hoje “atacou” outro desenvolvedor aqui da equipe.

A partir do .NET Framework 3.5 foi criado um novo target de compilação chamado “.NET Framework 3.5 Client Profile”, que nada mais é do que um subset do .NET completo, com objetivo de permitir criar aplicações que podem ser instaladas mais rapidamente em computadores que não tenham o .NET 3.5 instalado pois precisam de apenas uma parte dele. Em teoria a idéia é muito boa e válida para produtos que serão distribuidos pela web, mas acaba sendo desnecessário na grande maioria dos casos. Projetos feitos usando esse “.NET Framework 4 Client Profile” têm as seguintes limitações:

Só podem fazer referencias a outros projetos que também sejam Client Profile
Não podem ter nenhuma dependencia de .ASP.NET
Não podem usar WCF Avançado
Não podem fazer uso de MSBuild em runtime

Mas o que me faz chamar essa funcionalidade de troll é que vários templates de projeto do Visual Studio 2010 usam o Client Profile como padrão (WPF, Windows Forms, Console, Windows Service, Empty Project …). Então em nossa solution nós temos uma class library contendo todos os objetos da aplicação e mapeamento do banco de dados e outra class library com todas as regras de negócio, mas quando criamos uma aplicação Console que faria algumas rotinas batch, ela dava erro de compilação dizendo que não havia conseguido achar a classe da regra de negócios, apesar de a referencia estar correta e o intellisense mostrar todos os métodos. Aparentemente esses templates de projeto não usam mais o “cliente profile” por padrão no Visual Studo 2012.

Então, se você criar um projeto não ASPNET, em .NET 3.5 ou 4.0, fizer referencia(s) a outro(s) projetos mas receber um erro de classe ou referencia não encontrado, verifique se o seu projeto não está usando o Cliente Profile. Isso pode lhe poupar bastante tempo e frustração.

//build/ 2012 lotado em menos de 1h!

2012-08-08T20:06:00.001-03:00

Como eu havia postado anteriormente, hoje ao meio dia a Microsoft abriu as inscrições para a conferência BUILD 2012 e, como não poderia deixar de ser, a internet no meu trabalho caiu faltando apenas 2 minutos para começarem as inscrições :S

Eu sabia que, diferente de outras conferencias da Microsoft (incluindo BUILD 2011), as inscrições para esta conferencia seriam muito concorridas. Felizmente a internet voltou a funcionar por volta de 12:10 e eu consegui fazer minha inscrição, mas não em tempo para pegar o desconto dos primeiros 500 a se inscreverem.

O desconto acabou em aproximadamente 3 minutos e as vagas acabaram em menos de 1 hora! Isso significa que a Microsoft este ano conseguiu gerar o mesmo nível de espectativa e ansiedade que a Apple costuma gerar com seus lançamentos. Será que alguém ainda tem alguma dúvida de que este evento será fantástico e que este é de fato o ano da Microsoft?

E você, também conseguiu garantir sua participação?

Windows 8 atinge RTM

2012-08-01T14:06:00.001-03:00

Hoje a Microsoft anunciou que atingiu o milestone RTM do Windows 8 e Windows Server 2012. Isso significa que a versão final está pronta e foi disponibilizada para fabricantes de PC.

Para o público geral o Windows só estará disponível para compra a partir do dia 26 de outubro, mas quem tem assinatura MSDN ou TechNet já poderá fazer download da versão final no próximo dia 15 de agosto (em exatamente 2 semanas), junto com as versões finais das ferramentas de desenvolvimento.

Quem comprar um computador novo com Windows 7 hoje poderá fazer upgrade para o Windows 8 Pro por apenas US$ 14,99 a partir do dia 26 de outubro. Computadores comprados antes poderão fazer o upgrade por US$ 39,99.

Todas essas notícias são excelentes, tanto pela disponibilidade quanto os valores. Agora é só esperar mais um pouquinho para poder começar a desfrutar da versão final.

Eu já estou usando a consumer preview desde de o lançamento tanto no trabalho como no meu laptop pessoal e o único problema que tive até agora foi com vídeos no laptop pois os drivers ainda não estão 100% no consumer preview. Espero que isso se resolva agora com RTM. Agora é começar a me preparar para zerar essas máquinas pois daqui duas semanas vou instalar o Windows 8 em todos os computadores que uso :)

PS.: Sim, naquela foto que está no meu Live Tile de Fotos está o Renato Haddad, Scott Guthrie e eu (eles são bem altos).

Usando LINQ com listas não genéricas

2012-08-01T10:45:00.001-03:00

Hoje, mais uma vez eu me deparei com um “problema” relativamente comum: Usar LINQ em uma lista, coleção ou enumerável não generic (ocorre bastante quando se lida com código legado ou de aplicações mais antigas). Isso não é possível nativamente pois o LINQ trabalha apenas com generics por causa de inferencia de tipos.

Para não ter que colocar loopings no código apenas para migrar de não generico para genérico há 2 Extension methods bem simples que podemos usar:

Cast<type>() – converte a coleção inteira para um IEnumerable<type> do tipo informado. Praticamente não há impacto de performance pois internamente ele simplesmente faz um cast explicito para o tipo solicitado e devolve o objeto. O único problema deste método é que se houver algum objeto na coleção sendo convertida que não seja do tipo solicitado, ocorrerá uma exceção quando seu código chegar neste ítem.
OfType<type>() – converte a coleção para um IEnumerable<type> do tipo informado, mas contendo apenas com os ítens que são do tipo solicitado. Este é mais seguro para quando você estiver usando uma coleção que pode conter objetos de tipos diferentes mas apenas um tipo lhe interessa. Há um pequeno impacto de performance pois antes de retornar cada ítem este é testado para ver se é do tipo correto e se não for, os seguintes são testados até encontrar um que seja ou acabarem os ítens.

Ou seja, para listas de objetos em código legado não generic mas onde o tipo é conhecido e garantido, a primeria opção é melhor. Para outros casos, use a segunda. Abaixo tem um pequeno exemplo de uso desse código:

var col = new Collection();
col.Add("text");
col.Add("text2");
col.Add(1);
col.Add("text4");

var keysCast = col.Cast<string>();
var keysOfType = col.OfType<string>();

var resultadoT = (from k in keysOfType 
                  select k).ToArray();

var resultadoC = (from k in keysCast 
                  select k).ToArray();

Neste exemplo, o LINQ que popula resultadoT funcionará corretamente e resultadoT conterá 3 ítens, mas o LINQ de resultadoC vai gerar uma exceção ao tentar fazer cast explicito do inteiro 1 para string. Se a linha que acrescenta 1 na collection col for comentada, as duas queries LINQ funcionarão.

\\BUILD\ Windows 2012

2012-07-25T23:34:00.000-03:00

Hoje a Microsoft finalmente anunciou a data da segunda versão do \\BUILD\, sua nova conferencia de desenvolvimento e design (substituta do PDC e MIX). A edição deste ano será no campus da Microsoft em Redmond, Washington de 30 de Outubro até 2 de Novembro.

As inscrições abrem no dia 8 de Agosto a partir das 12:00 (meio-dia) no horário de Brasília, no site http://www.buildwindows.com/. Nesse dia começarão a ser divulgadas neste mesmo site mais informações sobre as sessões e assuntos que serão apresentados no evento.

Se você (assim como eu) pretende ir, eu sugiro que faça sua inscrição no dia 8 de agosto, assim que for possível pois devido às novidades e lançamentos da Microsoft este ano e ao fato de ser em Redmond eu acredito que as vagas vão esgotar bem rápido.

Assita ao Windows Phone Summit ao vivo

2012-06-20T10:51:00.001-03:00

Hoje, às 13:00 (horário de Brasília) será transmitido ao vivo pelo Channel 9 via Live Streaming o Windows Phone Summit.

Não há muitos detalhes concretos sobre o conteúdo que será apresentado no evento, mas sabemos que finalmente teremos maiores informações sobre o Windows Phone 8.

Se você se interessa por desenvolvimento em XAML em geral ou simplesmente quer saber mais sobre o futuro do Windows Phone, este evento será imperdível.

Segue abaixo uma lista de rumores sobre o que talvez seja anunciado/explicado hoje:

Suporte a processadores com múltiplos núcleos
Telas HD e novas resoluções
Suporte a cartões de memória
Maior integração com Skype
Mais funcionalidades e personalizações no aplicativo da câmera
Suporte a NFC tanto para pagamentos como para compartilhamento de conteúdo e emparelhamento de dispositivos
Integração com Windows 8
IE10
Maior controle sobre consumo de banda de dados e monitoramento de bateria
Uso do mesmo núcleo do Windows 8 ou um subset dele
Subset das APIs e ferramentas de desenvolvimento de aplicações Metro do Windows 8 para desenvolver para Windows Phone 8
Possibilidade ou não de atualização dos aparelhos atuais para a nova versão do sistema operacional

Eu vou assistir ao streaming live com certeza, e você?

http://channel9.msdn.com/Events/Windows-Phone/Summit

A hashtag que está sendo utilizada no Twitter é #wpsummit

A importância de in-app purchases

2012-03-18T13:14:00.000-03:00

Monetização é um assunto que tem ganhado cada vez mais importância nesse nosso mundo agora repleto de app stores. Todas as plataformas de smartphones e até SO de computadores pessoais estão começando a aderir a essa idéia de ter uma loja centralizada como principal ou até mesmo única forma de instalar aplicativos e isso traz benefícios para todos os envolvidos.

Para o usuário é extremamente conveniente pois facilita muito a busca e instalação de novos aplicativos. Usuários com menos conhecimentos técnicos são ainda mais beneficiados pois app stores removem praticamente toda a complexidade do processo de instalação e atualização dos aplicativos.
Para o desenvolvedor a app store significa uma enorme oportunidade de negócios pois aumenta muito sua visibilidade e com isso as chances de seu aplicativo ser encontrado, comprado e recomendado.
Para o dono da plataforma há duas grandes vantagens:

Financeira: recebem um percentual sobre as vendas dos aplicativos
Estratégica: a partir do momento que um usuário investe uma certa quantia em aplicativos para aquela plataforma, isso acaba aumentando sua fidelidade à própria plataforma, diminuindo as chances de que ele migre para outra plataforma.

Mas eu tenho notado uma tendência últimamente. Apesar de app stores e seus valores baixos (muitas vezes contados em centavos) tornarem aquela compra impulsiva mais recorrente, mais e mais pessoas começaram a associar internet com "é de graça" e isso significa que estão menos dispostas a pagar, mesmo que pouco, por coisas que acham que podem conseguir "sem custo" na internet. O mais estranho é que isso se aplica à compra de aplicativos, mas não necessariamente à compra/assinatura de serviços ou conteúdo.

Um bom exemplo disso são alguns dos joginhos disponíveis no Facebook e seu modelo de micro-transações onde é necessário gastar dinheiro de verdade para comprar coisas para usar no jogo e avançar mais rápido ou ter algo que outras pessoas não têm. Tenho tias que já chegaram a gastar quantias que eu aposto que jamais teriam gasto se aquele fosse o preço para comprar e jogar.

Mas o que me motivou a escrever este post é que infelizmente o Marketplace do Windows Phone 7 não tem um sistema de micro-transações (também conhecidos com in-app purchases) disponível para os desenvolvedores convencionais. Há alguns jogos na categoria Xbox Live que usam micro-transações integradas à sua conta da live, mas todos são feitos pela própria Microsoft então eles meio que não contam (ex.: Beaks and Beards e Bug Village).

Não há nada que impeça o desenvovedor de desenvolver seu próprio esquema de micro-transações usando parecerias com cartões de crédito ou PayPal, mas a experiência para o usuário não seria a ideal nesses casos pois poucos usuários estão dispostos a disponibilizar seus dados de cobrança para qualquer aplicativo, principalmente depois de já terem feito isso com o próprio Marketplace da plataforma.

Outro problema que tenho notado é que, o modelo de trial do Windows Phone 7 não está surtindo o efeito que era desejado. Muitos usuários acabam nem tentando alguns aplicativos pagos com trial e partem direto para opções grátis (muitas vezes inferiores). Com isso diversos desenvolvedores passaram a publicar 2 versões de seus aplicativos, uma grátis, muitas vezes igual com anuncios e outra paga com trial onde os anuncios são desativados depois que você compra. Há também alguns desenvolvedores que estão publicando conteúdo como se fossem aplicativos. Há revistas, jornais e até quadrinhos que ao invés de ter um único aplicativo onde cada edição é apenas um conteúdo extra pelo qual você paga separadamente ou faz uma assinatura, são publicados diversos aplicativos, um para cada edição, poluíndo o Marketplace e inflando a loja sem acrescentar novidades reais.

É por isso que eu fiquei muito animado ao saber que a loja do Windows 8 vai suportar micro-transações desde o começo. Este recurso pode ser utilizado para resolver os 2 problemas acima. Com suporte a micro-transações na plataforma, os desenvolvedores podem publicar aplicativos efetivamente grátis, mas com capacidade de ter funcionalidades desbloqueadas, anuncios removidos ou compra/assinatura de conteúdo sem que o usuário precise divulgar seus dados financeiros para o desenvolvedor. Mais uma vez é um cenário onde todos ganham pois o usuário não precisa se preocupar em confiar ou não do desenvolvedor e fornecer novamente seus dados financeiros pois a Microsoft fará a cobrança e o repasse para o desenvolvedor. O desenvolvedor não precisa se preocupar com a segurança e armazenamento de dados sigilosos de seus clientes nem com a integração com os sistemas das empresas de cartão de crédito e a Microsoft ainda garante uma renda extra, ajudando a baixar ainda mais o custo e aumentar a viabilidade da plataforma.

Na conferencia BUILD que ocorreu no final de 2011 houve algumas paletras que abordaram esse assunto tanto do ponto de vista estratégico como técnico, com diversos exemplos de como utilizar as apis e suas diversas possibilidades. Espero que este recurso seja trazido para a plataforma do Windows Phone também. Abaixo tem o link de duas sessions com foco na Store do Windows 8 e monetização de aplicativos:

Introducing the Windows Store

Enabling trials and in-app offers in your Metro style app

Usando css media queries no Windows Phone 7

2012-03-13T14:21:00.000-03:00

O desenvolvimento moderno de web sites tem introduzido tantos novos conceitos e abordagens que acaba sendo difícil para uma grande parte dos desenvolvedores se manterem atualizados.

Uma ideia que defendo com muita garra é o desenvolvimento de sites com layout fluído, capazes de identificar e se adaptarem ao dispositivo onde estão sendo exibidos. Já vi diversas tecnicas para atingir este proposito mas a maioria delas normalmente consiste em criar versões mobile do site. Eu não gosto dessa abordagem por alguns motivos:

normalmente são hospedadas em urls diferentes da versão “normal”
costumam requerer alguma forma de detectar que está em um dispositivo móvel para poder redirecionar para a url da versão móvel
reaproveita pouco do desenvolvimento realizado na versão “normal”

É aí que entra um recurso do CSS chamado media queries. Media queries foram criadas originalmente para permitir a criação de folhas de estilo css diferentes e específicas para meios distintos (exibir no monitor, impressão, etc…), mas recentemente, com os atuais avanços nas engines dos browsers modernos tanto no desktop como em smartphones este recurso evoluiu para permitir a criação ou adaptação de folhas de estilos que se adaptam à resolução da tela, entre outros aspectos.

Para mim esta abordagem é muito mais elegante e efetiva pois permite que um site seja construído e depois seja simplesmente adaptado para resoluções distintas, reorganizando, redimensionando ou até mesmo ocultando elementos na tela,

Todos os browser modernos de smartphones têm suporte em algum nível a este recurso e o Windows Phone não é diferente. A partir da versão 7.1 do Windows Phone (Mango – equivalente à versão 7.5 do SDK) o Internet Explorer passou a usar a engine do IE9 (o IE do Windows Phone 7.0 era baseado no IE7). Isso significa que praticamente tudo que é suportado nativamente no IE9 também é suportado no WP7.1 (com exceção de plugins e um ou outro recurso que não fazia sentido nesse tipo de aparelho).

Abaixo segue um exemplo do html necessário para que possamos tirar o máximo proveito de media queries tanto em browsers de desktop como mobile:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <meta name="Viewport" content="width=device-width,user-scalable=no"/>
  <meta charset="utf-8" />
  <title>Titulo da pagina</title>
  <link href="Styles/tema1/main.css" rel="stylesheet" type="text/css" />
</head>

Neste pequeno fragmento de html já temos diversas coisas interessantes:

Doctype html, que é o doctype do html5. Em browsers modernos (no IE a partir da versão 9), este doctype faz com que a página seja renderizada seguinda o mais recente conjunto de regras definidas para html5.
Meta tag X-UA-Compatible faz com que versões do IE anteriores à versão 9 renderizem a página no modo de compatibilidade mais avançado que suportarem.
Meta tag Viewport define quais serão os limites de resolução modo de zoom utilizados pelo browser quando em dispositivos mobile. Neste caso estamos definindo que a página deve ser renderizada respeitando a largura do dispositivo e que não haverá zoom no conteúdo.

Mas isso por si só não é suficiente para termos um site adaptável. Precisamos também de uma folha de estilo capaz de adaptar o conteúdo. É aí que entra a tal da media query. No arquivo main.css referenciado acima, poderiamos ter algo assim:

#header {
  height:80px;
  background:#000;
  margin:0 auto;
  width: 900px;
  color:#fff;
}

@media (max-device-width:900px), (max-width:900px){
  img{
    max-width:100%;
  }

  #header {
    height:auto;
    width: 100%;
  }
}
@media (max-device-width:474px), (max-width:474px){
  #footer{
    display:none;
  }
}

Notem que há duas estruturas @media que definem algumas regras. Essas estruturas são as média queries que se encarregarão de adaptar o conteúdo da página de acordo com a resolução do browser (funciona até se você redimensionar a janela do browser no computador). No exemplo acima, o css normal define algumas propriedades para o elemento com id “header”. Depois há uma instrução de media query que altera as propriedades de alguns elementos se a resolução do browser tiver até 900px de largura. Depois há uma segunda instrução que esconde o elemento com id “footer” caso a largura do browser seja até 474px. Um truque bacana que coloquei neste exemplo foi que restringi a largura de todas as imagens para a largura do browser, assim quando a página for aberta em um smartphone, por exemplo, não haverá scroll lateral por causa de alguma imagem grande que esteja no site, mas imagens pequenas não serão afetadas.

O mais interessante desse processo todo é que se o site for bem construído não será necessário mudar nada na página para ter uma versão mobile. Além disso, se o browser não suportar media queries, ele simplesmente não vai entender o @media e vai ignorar tudo que estiver naquele bloco, o que significa que esta folha de estilo não afetará negativamente o site quando executado em browser mais antigos.

Neste momento estou trabalhando em um novo layout para este blog seguindo esta abordagem, para que fique mais confortável ler os posts a partir de smartphones. Espero conseguir arrumar tempo para finalizar este layout logo. Para ver um excelente exemplo deste método em ação, acesso o blog do Scott Hanselman (você pode utilizar qualquer browser e redimensionar a janela ou acessar a partir do seu smartphone).

Veja o suporte dos browsers às novidades de html5, css3 e javascript

2012-01-06T09:58:00.001-02:00

Hoje eu reencontrei um site muito útil que eu já havia visto algum tempo atrás mas havia perdido o link. O site se chama “When can I use…” e contém diversas tabelas comparativas mostrando o suporte dos principais browsers às novidades de CSS, HTML5, SVG, Javascript e outros.

Clicando nos links das funcionalidades é possível ver as tabelas comparativas de suporte dos browsers e também é possível mudar os filtros para exibir outras funcionalidades.

As tabelas de comparação contam também com alguns browsers de smartphone, mas o Windows Phone não consta na lista (tem apenas iOS, Android, Opera Mini e Opera Mobile). Mas isso não é um problema pois o IE do Windows Phone usa a mesma engine de renderização do desktop, com a única diferença de que não suporta plug-ins, então basta olhar a versão do IE normal na lista para ver se suporta a funcionalidade desejada. O IE do Windows Phone 7.0 (versão lançada na Europa e EUA em 2010) usa a engine do IE 7 e o Windows Phone 7.1 (Mango, lançado em 2011, inclusive no Brasil) usa a engine do IE 9.

Se você estiver trabalhando em um projeto usando HTML5, este site com certeza será muito útil para ajudar a identificar os pontos críticos do projeto do ponto de vista de suporte e portabilidade entre plataformas.

Exibir/Ocultar caracteres ocultos no Visual Studio 2010

2012-01-02T11:21:00.001-02:00

O Visual Studio 2010 tem diversos recursos que estão muito bem escondidos nos seus vários menus e telas de configuração, mas são acessíveis por teclas de atalho. Isso é vantajoso em diversas situações pois pode agilizar a utilização desses recursos mas também pode se tornar uma irritação ou mesmo um problema se você por acaso acionar uma dessas teclas de atalho por acidente e não souber como voltar atrás. Foi o que aconteceu com um colega no trabalho recentemente.

Por acidente esse colega acionou uma tecla de atalho do Visual Studio 2010 que ativa a exibição de caracteres ocultos (white space). Em outras palavras, o Visual studio passou a exibir todos os espaços e marcação de final de arquivo na tela. O resultado foi algo semelhante à imagem abaixo:

Não parece ser algo muito irritante neste exemplo pois há pouco código, mas em arquivos com centenas de linhas de código e em arquivo com html esse modo de visualização é bastante irritante e chega a atrapalhar a produtividade pois polue visualmente a tela. Esse colega passou quase 2 meses trabalhando com essa configuração pois não conseguia encontrar um meio de desfazer e voltar ao modo normal de visualização. Ele chegou inclusive a reinstalar o Visual Studio mas não adiantou pois o instalador não removeu as configurações problematicas.

Hoje eu dei uma pesquisada um pouco mais a fundo e acabei encontrando a solução. A opção do menu para essa configuração se encontra em Edit > Advanced > View White Space e pode ser acionada pela tecla de atalho Ctrl+E, S (que foi o que aconteceu com meu colega).

Mas existe mais um “alerta” aqui: O submenu Advanced só aparece se houver um arquivo de código aberto. Se o seu Visual Studio não estiver com um arquivo de código aberto ou estiver em modo design, esse submenu não aparece e, consequentemente fica impossível achar a configuração apenas explorando a interface do Visual Studio.

Portanto, tome cuidado com as combinações de teclas que usa e não saia digitando teclas aleatórias enquanto estiver pressionando as teclas Ctrl ou Alt, pois você pode acionar acidentalmente uma configuração oculta do Visual Studio ou mesmo executar uma ação indesejada (como fazer um check-in de código incompleto, por exemplo).

Atualizações automáticas silenciosas no Internet Explorer a partir de Janeiro/2012

2011-12-15T16:24:00.001-02:00

Uma excelente notícia para quem desenvolve para Web: Hoje Ryan Gavin anunciou no blog oficial do Internet Explorer (em inglês) os planos para implementação de atualizações automáticas silenciosas no IE, começando já em janeiro de 2012 no Brasil e Austrália (isso mesmo, Brasil fará parte do piloto).

Essas atualizações ocorrerão, como o próprio nome diz, de forma automática e silenciosa, sem necessidade de nenhuma intervenção do usuário e possivelmente (pele menos é o que esperamos) sem reiniciar o computador. Esse tipo de atualização já é comum para usuários do Google Chrome.

Mesmo sendo automáticas e sem intervenção, ainda será possível optar por não atualizar (há casos de empresas que têm aplicações que dependem de versões específicas do browser e não podem simplesmente atualizar), ou mesmo remover a atualização e voltar para a versão anterior, mas o padrão agora será a atualização automática para a última versão.

A atualização será para a última versão disponível na plataforma do usuário, ou seja, usuários do Windows XP receberão o IE8 e usuários do Vista e Windows 7 receberão o IE9 (e IE10, quando for lançado).

Agora é esperar que essa atualização realmente diminua de forma substancial o tamanho da base instalada de IE6 e IE7 (e talvez IE8 também, mas não tanto) para que possamos desenvolver sites e aplicações com mais tranquilidade e menos dores de cabeça, além de ajudar a convencer os clientes de que não será mais tão imprescindível suportar versões tão antigas do browser da Microsoft.

versão traduzida para português do post sobre este anuncio

Steve Jobs, 1955 - 2011

2011-10-05T22:18:00.000-03:00

Não sou um Mac, sou um PC, mas isso não muda em nada o fato de que o mundo ficou um pouco mais feio e triste hoje, com a perda de Steve Jobs para um câncer no pâncreas.

Desde quando comecei minha carreira como desenvolvedor, em 2000, eu trabalho com PCs e tecnologia primariamente da Microsoft, então acho que deve ser no mínimo estranho me ver fazendo aqui um post sobre o falecimento de Steve Jobs, mas ninguém pode negar que ele revolucionou todo o mercado de tecnologia.

Minha carreira começou como programador web, mas eu sempre me interessei bastante em fazer as coisas de forma a serem simples para o usuário (e se possível, para o desenvolvedor também). Na época esse conceito não tinha um nome nem era muito difundido, mas hoje chamamos de UX (experiência do usuário). Em toda minha carreira eu me dediquei a criar software seguindo o que considerava a melhor experiência possível. Comecei a focar mais intensamente nessa área a partir de 2007, com o surgimento do Silverlight, inicio da difusão do HTML5 e a crescente atenção dada pela Microsoft a design e UX. Hoje, sou o especialista de UX e novas tecnologias na empresa onde trabalho e adoro o que faço. Devo muito ao Steve, pois se há alguém responsável por UX finalmente ter se tornado um assunto importante, ele foi esse alguém.

O único iProduto que tenho é um iPod Touch, que foi comprado 6 meses atrás quando eu estava ajudando em um projeto para portar uma aplicação de iOS para Windows Phone 7. É um bom aparelho e não me arrependo da compra, mas uso apenas para jogar e fazer testes de desenvolvimento.

Apesar de eu não ser muito fã da linguagem de design dos softwares da Apple, é impossível negar o impacto que eles têm no nosso mercado atual. Steve mudou o mundo ao mostrar que a experiência do usuário é o mais importante, não a tecnologia. As coisas devem ser fáceis de usar, simples de entender, práticas e belas ao mesmo tempo. Se não tiver esses 4 requisitos, não terá o sucesso que poderia ter.

A morte de Steve serve também para mostrar que ele era humano, como nós. Um humano extraordinário, mas humano, o que significa que todos temos esse potencial de mudar o mundo, fazer a diferença, mas apenas poucos conseguimos.

Para mostrar como Steve Jobs foi importante, basta olhar para quem já fez algum pronunciamento sobre seu falecimento e prestar atenção na mensagem que cada um tentou passar: Bill Gates, Barak Obama, Michael Bloomberg, Steve Wozniak, e muitos outros que nem dá pra citar aqui.

Por tudo isso, obrigado Steve. O mundo ficou um pouco mais feio e triste hoje. Meus mais sinceros sentimentos a todos seus amigos e familiares. Descanse em paz.

Exemplo do novo PivotViewer do Silverlight 5 apresentado no TechEd Brasil 2011

2011-10-02T19:01:00.001-03:00

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