Bem, estas são as bases de construção de aplicações web e juntando a PHP por exemplo e quem sabe XML, a quantidade de tecnologias que é necessário dominar para criar uma aplicação web pode ser realmente grande. Existem várias alternativas, como o GWT e outros para tornar a criação de aplicações dependente de apenas uma linguagem, mas nem sempre serão tão versáteis como se pode desejar.
E nisto que tenho estado a mexer, com JQuery a ajudar. E devo dizer que se torna por vezes bastante difícil separar código de apresentação em especial quando o lado servidor necessita de alterar a apresentação em si.
Mas tirando isso vou partilhar dois pequenos “snippets” relativos a tornar uma aplicação web a comportar-se mais como uma aplicação de desktop.
Desactivar botão direito
Isto pode ser algo controverso, mas já lá vai o tempo em que era uma táctica para evitar que se visse o código fonte da página. Acho esta técnica útil em imitar o comportamento de aplicações desktop porque estas só mostram o menu de botão direito se tiverem algo para mostrar, de outro modo porque mostrar o menu do browser? Talvez em determinadas áreas mostrar um menu da aplicação em si.
$(document).ready(function(){$(document).bind('contextmenu',function(e){return false;});});
Código muitíssimo simples em JQuery. Podendo-se fazer bind de uma função apropriada nas zonas que se realmente quer o botão direito a funcionar.
Impedir a selecção de texto
Mais uma vez isto não é para proteger os conteúdos. Faz-me um bocado de confusão poder seleccionar certos textos, como por exemplo o de botões, quer sejam elementos formatados para parecer botões como os inputs.
[unselectable=on]
{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
cursor: default;
}
Este CSS é algo ligeiramente estranho e tudo tem razão de ser:
- Estamos a criar uma nova propriedade de elementos de nome unselectable, que quando igualada a on irá fazer com que o elemento use o estilo definido. A razão para colocar o estilo deste modo é que o Internet Explorer suporta esta propriedade exactamente com o efeito que desejamos.
- Utilizamos -moz-user-select: none; para alcançar o efeito no Firefox
- Utilizamos -khtml-user-select: none; para termos o efeito em browsers Webkit
- O estilo user-select: none; é o correcto em CSS 3, mas no entanto, como podem calcular pelos estilos já indicados, não é ainda suportado totalmente em todos os browsers.
- O rato passa normalmente para o cursor de selecção quando sobre texto, isto é evitado com o cursor: default;
Atenção a ter é que, como é uma propriedade, não é herdado pelos elementos filhos, esses continuarão a ter texto seleccionável na maioria dos browsers.
Para utilizar basta:
<span unselectable="on">Não podes seleccionar isto</span>
Consegui verificar o funcionamento em IE8, Firefox 3.6.3, Chrome 5.0.375.29 dev (que altera o cursor do rato para o de selecção sempre que se arrasta o rato) e Opera 10.53. O meu Safari 4 recusa-se a arrancar sem crashar imediatamente por isso não deu para ver.
InfoAnatomia 