“Loading” em páginas web (ou resposta ao usuário)

Da série “vou postar para não perder”, esse é um daqueles pequenos macetes que quem é webdesigner sabe fazer bem feito, mas quem não é do ramo apanha (meu caso).

Há um certo tempo, houve a necessidade de ajustar um projeto desenvolvido por terceiros, de forma que o usuário fosse notificado de que a requisição de um formulário estava sendo processada, bloqueando múltiplos cliques. Como não havia nenhum tipo de aviso na tela, o usuário, que é usuário, pressionava o botão diversas de vezes, criando vários registros.

Com muito custo eu consegue achar um script que fosse simples e fácil de entender. Repito: não tenho tanta familiaridade com o desenvolvimento web e tampouco domino o Mentaway, framework utilizada por eles. Usei rapidamente em um projeto na faculdade, mas não me aprofundei.

Bom, missão dada é missão cumprida, da forma mais elegante possível. Esse script usa o Ajax e fez direitinho o que eu queria e do jeito que eu estava pensando. Nada mais justo compartilhar com vocês.

#1: criação do script

Você pode adicionar este código na sua biblioteca de scripts, que obviamente esteja referenciada no html, ou então incluí-lo diretamente no código-fonte da página (meio tosco, mas funciona).


// função executada no evendo onclick do botão de envio do form para mostrar aviso de processamento
<script language="JavaScript" type="text/JavaScript">
function loading() {
document.getElementById("progressBackgroundFilter").style.display = "inline"
document.getElementById("processMessage").style.display = "inline"
}
</script>

<!-- Aviso de processamento de registro -->


<div id="progressBackgroundFilter" class="progressBackgroundFilter" style="display:none">
</div>


<center>


<div id="processMessage" class="processMessage" style="display:none">
<span style="font-family:Tahoma;font-size:small">Aguarde...</span>


<img src="style/images/ajax-loader.gif" alt="Loading..." />
</div>


</center>
<!-- Fim aviso de processamento de registro -->

#2: ajustar o botão do formulário

O seu botão deve ficar no formato abaixo.

<!-- Exemplo de botão para o form -->
<input class="art-button" type="submit" name="search" value="Confirmar" onclick="javascript:loading()" />

#3: editar o CSS

Por fim, ajuste seu CSS, incluindo o código a seguir.

// Inserir no css

.processMessage
{
 position: fixed;
 top: 39%;
 left: 41%;
 padding: 10px;
 width: 20%;
 z-index: 1001;
 background-color: #fff;
 border: outset 3px #6389ab;
}
.progressBackgroundFilter
{
 position: fixed;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 overflow: hidden;
 padding: 0;
 margin: 0;
 background-color: Gray;
 filter: alpha(opacity=60);
 opacity: 0.60;
 z-index: 1000;
}

Mais fácil que isso, só tirando doce de criança, não é? Os ajustes ficam por conta do freguês. Eu não me lembro se cheguei a mexer em alguma parte do CSS, já faz tanto tempo que nem dá para tentar lembrar.

PS: a imagem usada neste exemplo (linha 20 do passo 1) você encontra aqui.

Texto: Oração dos estressados

Quem usa a internet há quase dez anos, vai lembrar-se da febre das apresentações em Power Point. Confesso, meus amigos, que não abria nenhuma, a não ser um caso ou outro que o título me interessava. O texto que compartilho agora tem a sua versão .ppt ou .pps também (extensões dos arquivos gerados pelo programa da Microsoft), mas no email que recebi estava no corpo da mensagem. Aí sim eu leio!

Oração dos Estressados

Por Luís Fernando Veríssimo (autoria não confirmada pela que vos escreve)

Senhor, dê-me serenidade para aceitar as coisas que não posso mudar, a coragem para mudar as coisas que não posso aceitar e a sabedoria para esconder os corpos daquelas pessoas que eu tive que matar por estarem me enchendo o saco.

Também, me ajude a ser cuidadoso com os calos em que piso hoje, pois eles podem estar conectados aos sacos que terei que puxar amanhã.

Ajude-me, sempre, a dar 100% no meu trabalho…

  • 12% na segunda-feira,
  • 23% na terça-feira,
  • 40% na quarta-feira,
  • 20% na quinta-feira,
  • 5% na sexta-feira.

E… Ajude-me sempre a lembrar, quando estiver tendo um dia realmente ruim e todos parecerem estar me enchendo o saco, que são necessários 42 músculos para socar alguém, e apenas 4 para estender meu dedo médio e mandá-lo para aquele lugar…

Que assim seja! Viva todos os dias de sua vida como se fosse o último. Um dia, você acerta!

Fonte: recebido por email.

PS: hoje (quarta-feira, véspera de feriado) pode ser considerado sexta-feira? 😛

 

Defenestração – Dicionário Catadupas #1

Pessoas lindas!

Se tem uma coisa na vida que eu gosto muito é do português. Sim, nosso idioma é lindo, seja na fala ou na escrita. Aprender novas palavras e explorar seu significado, origem e história é muito interessante. Mas nem sempre foi assim. Se você não curte uma historinha, pule os próximos quatro parágrafos.

Uma breve recordação

“A long time ago, in a galaxy far far way”, eu era uma menina rabugenta que odiava estudar Português. Meu amor pela Matemática, confesso, sempre foi maior. Soma-se a isso a incapacidade de alguns professores em despertar o interesse dos alunos pelo conteúdo da sua disciplina. Quem vem da escola pública, como eu, sabe muito bem do que estou falando.

Tudo mudou quando, procurando aprender mais Matemática, fui fazer escola técnica de eletrônica. Parece frase de filme, mas é a pura verdade. Foi quando tive professores que pareciam realmente gostar de ensinar e sabiam do que estavam falando. Situação que poucas vezes encontramos no ensino público. Como já tinha um apreço pela leitura, me senti encorajada até mesmo a discutir literatura com eles. Foi uma experiência única.

E assim comecei a ter outra visão de uma disciplina que acreditava não gostar, mas que no fundo só não entendia. Ao começar a enxergar a lógica existente por trás de cada regra, foi mais fácil entender e aplicar.

Em homenagem ao nosso incompreendido idioma, estou inaugurando a seção “Dicionário Catadupas”. Serão apresentadas algumas palavras desconhecidas, seu significado e, caso possível, a origem e derivadas. Já escrevi anteriormente sobre algumas delas, começando pelo nome do blog (que você pode conferir aqui), sobre o que é a profissão de calceteiro (link aqui) e a palavra mais amada pelos mineiros (curioso? Veja aqui do que estou falando).

Diccionario, no eres
tumba, sepulcro, féretro,
túmulo, mausoleo,
sino preservación,
fuego escondido,
plantación de rubies,
perpetuidad viviente
de la esencia,
granero del idioma.

Pablo Neruda, “Oda al Diccionario”.

Defenestração

A palavra de hoje é: defenestração. Já tem muito tempo ou vi esse termo e nunca mais me esqueci dele. A intenção era, como estou fazendo agora, escrever sobre ela. Mas acabava postergando. Só que ela nunca me abandonou. Curioso, não?

Defenestração. [Do fr., défenestretion.S. f. Ato de atirar alguém ou algo pela janela fora: A defenestração de Praga ocorreu em 1618.

Ou ainda:

Defenestrar. [Lat. defenestrare] V. t. d. 
1. Atirar (algo ou alguém) pela janela.  
2. Fig. Afastar ou expulsar (de cargo, partido, etc.)

Do francês: fenêtre (janela).

Em outros idiomas:

  • Alemão: Fenstersturz
  • Espanhol: Defenestrar
  • Francês: Défenestrer
  • Inglês: To defenestrate
  • Italiano: Defenestrare
  • Latim: Defenestrare

História

Dois fatos históricos ocorridos na capital da República Checa, são conhecidos pela “Defenestração de Praga”. O primeiro, datado de 1419, resultou na morte de sete membro do conselho da cidade, que se recusaram a libertar prisioneiros hussitas. Os homens foram atirados pelas janelas e caíram sobre lanças.

A segunda, e mais famosa, aconteceu em 1618, sendo o estopim da Guerra dos Trinta anos. Revoltados com as proibições impostas a eles, alguns protestantes jogaram pela janela do palácio real de Praga os representantes do sacro imperador romano-germânico Fernando II. Diferentemente do primeiro evento, eles não morreram, mas foram humilhados ao caírem em um fosso cheio de palha e detritos orgânicos.

Atualmente a palavra é mais utilizada com sentido de se livrar de alguém politica ou administrativamente, demitindo-a ou marginalizando-a.

Siglas:

  • Fig – figurado (sentido)
  • fr. – Francês
  • S. f. – Substantivo feminino
  • V. t. d. – Verbo transitivo direto

Fontes:

  1. FERREIRA, A. B. H. Novo Dicionário da Língua Portuguesa. Rio de Janeiro: Editora Nova Fronteira, 1975.
  2. FERREIRA, A. B. H. Mini Aurélio: o dicionário da língua portuguesa. Curitiba: Positivo, 2010.
  3. Wikipedia
  4. Barbosa, E. A Origem das Palavras. Bazar Editoria, 2010.