24 agosto, 2016

Cortina (overlay) de Loading usando CSS, v2

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.

24 abril, 2016

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

CONTROLE DE VERSÃO - O melhor amigo do desenvolvedor!

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.

19 abril, 2016

Depurando site no IIS sem precisar elevar o Visual Studio

Mensagem do Visual Studio solicitando executar como administrador para depurar site no IIS

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.

26 outubro, 2015

Cortina (overlay) de Loading usando apenas CSS

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.

Exemplo da cortina de loading com animação