Andrey Pedro Lefkum

Ae galera:

Documentação do Prototype:
http://www.prototypejs.org/api

A migração dos softwares do continente Desktop para o continente Web é inevitável, porém há um grande problema em termos de usabilidade e cultura. Como fazer para tornar o usuário adepto dessa migração? Quais caminhos devem ser tomados para minimizar essa mudança?

Vamos tentar visualizar como os usuários que já estão a 10 anos em um mesmo software e não conhecem muito a área WEB, como por exemplo, ao invés de menus agora utilizam links, que a tela do sistema é toda recarregada para uma requisição, enfim, várias mudanças e fogem da cultura do usuário em termos de software.

O que podemos fazer para amenizar as “dores do usuário”?

• Criar um menu no formato desktop, ou seja, no topo do seu aplicativo;
• Remover botões do navegador, para não confundir com o sistema, observe que estamos falando de sistema e não de site;
• Ícones abaixo do menu (Arquivo Editar Exibir);
• Teclas de atalho para abrir módulos;
• Passar com ENTER cada campo dentro de um formulário;
• Foco no primeiro campo ao abrir uma tela.

Na verdade o foco ao abrir tela já deveria ser um pré-requisito de qualquer sistema.

Imagine o usuário do seu software abrir um sistema em ambiente WEB e questionar, “É Web?”, foi o que aconteceu com aplicativo que criamos aqui na empresa, então fica essa idéia pra quem quer assim como nós surpreender seus clientes diretos e indiretos que seriam respectivamente os diretores de empresa e usuários do software.

Não que o ambiente WEB seja um “bixo de sete cabeças”, mas muitos usuários possuem um certo medo, e somente de acessar um sistema e ver uma “carinha” parecida a do que estava utilizado, já o conforta!

Vejam:
http://www.feyasoft.com/home.htm;jsessionid=E665FC8241F8060B1268D8D9166C600D

Biblioteca utilizada (interessante):
http://extjs.com/download

Vamos lá galera, por uma WEB mais interativa e com muita usabilidade!
Os usuários agradecem!

Por: Andrey Pedro Lefkum

Ae Galera…

Pra quem usa muito AJAX, e precisa selecionar options em um formulário vai a seguinte função:

function selecionaUmaOpcao(campo, valor) {

for(i = 0; i < campo.length; i++) {

if(campo.options[i].value == valor) {
campo.options[i].selected = true;
break;
}
}
}

para utilizá-la:

selecionaUmaOpcao(document.formulario.campo, ‘13′);

parâmetro1 = Campo que será selecionado o option;
parâmetro2 = Quando encontrar esse valor deixa o option selecionado.

É isso ae…

depois de muito tempo sem postar… correria.. voltando a ativa.

Abraço

Ae pessoal, uma função para retornar qual radio está selecionada, utilizei ela em um gerenciador de OS que estou criando.

Postei aqui, porque quando estava aprendendo me batia nisso. =D

function retornaSelecionado() {
var i;

/* Caso só tenha um campo rádio */
if(document.formulario.ordemServicoCodigo.length == undefined) {
return document.formulario.ordemServicoCodigo.value;
}

/* Passa Opção por Opção no RADIO */
for(i = 0; i < document.formulario.ordemServicoCodigo.length; i++){
if (document.formulario.ordemServicoCodigo[i].checked) {
break;
}
}

return document.formulario.ordemServicoCodigo[i].value;
}

Olá pessoal, para quem quer fazer uma janelinha verde e chata igual essa do meu blog quando é acessado pela primeira vez, ae está o código:
Qualquer dúvida deixar RECADO / POST
– Script –
<script src=“_js/prototype.js”></script>
<script>

var objeto1 = “”;
var objeto2 = “”; var valor = “”;
var valor2 = “”;
var tipoAlpha = “”;
function ocultaJanelas() {
objeto1 = $(’aviso’).style;
objeto2 = $(’avisoSombra’).style;
valor = 90;
valor2 = 10;
tipoAlpha = 1;
mudaAlpha();
}
function mostraJanelaComAlpha() {
objeto1 = $(’aviso’).style;
objeto2 = $(’avisoSombra’).style;
objeto1.display = “block”;
objeto2.display = “block”;
valor = 0;
valor2 = 0;
tipoAlpha = 2;
mudaAlpha(); }
function mudaAlpha() {
objeto1.opacity = (valor / 100);
objeto1.filter = “alpha(opacity=” + valor + “)”; // IE/Win
objeto1.KhtmlOpacity = (valor / 100); // Safari 1.1 or lower, Konqueror
objeto1.MozOpacity = (valor / 100);
objeto2.opacity = (valor2 / 100);
objeto2.filter = “alpha(opacity=” + valor2 + “)”; // IE/Win
objeto2.KhtmlOpacity = (valor2 / 100); // Safari 1.1 or lower, Konqueror
objeto2.MozOpacity = (valor2 / 100);
//alert(valor);
if(tipoAlpha == 1) {
valor = valor - 10;
valor2 = valor2 - 10;
if(valor > 0) {
window.setTimeout(”mudaAlpha();”,50); }
else {
objeto1.display = “none”;
objeto2.display = “none”;
}
}
else if(tipoAlpha == 2){
valor = valor + 10;
valor2 = valor2 + 1;
if(valor < 100) {
window.setTimeout(”mudaAlpha();”,50);
}
}
}
</script> <style #avisoSombra { left:31%; background-color:#000; border:2px solid #000; z-index:99; } #aviso { position:absolute; background-color:#CCFF80; border:1px solid #d0d0d0; left:30%; z-index:100; }> #aviso, #avisoSombra { position:absolute; width:360px; height:230px; padding:10px; font:12px Verdana; display:none; } #aviso h1 { font:12px Verdana; font-weight:bold; padding:4px; background:#99BF60; color:#fff; border:2px solid #fff; }
</style>
<div id=“avisoSombra” style=“top:31%;”></div>
<div id=“aviso” style=“top:30%;”>
<h1>Olá Nobre Visitante</h1>
Se você está olhando esse modesto blog do Sr. Andrey… Sera interessante que deixasse um comentário! <br /><br /> Caso não atenda as minha rinvidicassão nois vai destrui teu computa-dor! <br /><br /> Att., <br /> <br />
Andrey
<br /><br />
<center>
<input type=“button” value=“Fechar Janelinha que enxe o s…” onclick=“ocultaJanelas();”>
</center>
</div>

– Fim Script –

Download:

Janelinha com Alpha

Código que achei na NET:

Interessante!

var popup = null;

function Abrir() {
if (popup!=null && popup.closed)
alert(”A Janela foi fechada.\n Abrindo novamente.”);

if (popup!=null && !popup.closed){
alert(”A Janela já está aberta.\n Vou focá-la.”);popup.focus();
}
else {
popup = window.open(’menu_relatorio1.htm’,'Jan’,'height=350,width=200′);popup.focus();
}
setTimeout(’Abrir()’, 10000); //javascript trabalha com milesimos
}

Abrir();

Pessoal que gosta de JS e não tem muito domínio do JS, segue um PDF que mudará sua vida

=D

Clique no link a baixo para visualizar o documento:

Dicas JS

Até mais!

Olá Pessoal!

Bom esse exemplo abaixo vai para nosso amigo Mauricio que mandou um comentário em um dos POST’s querendo um exemplo como o exemplo abaixo

A funcionalidade é a seguinte, quando o usuário digita a data de nascimento, e da um tab ou clica fora do campo é chamada uma função que calcula a idade e a retorna. O valor retornado é jogado no campo com id idade.

Bom é isso ae!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt” lang=”pt”>
<head>
<title>Exemplo</title>
<script type=”text/javascript”>
function calculaIdade(data,dataHoje) {

x = data.split(”/”);
h = dataHoje.split(”/”);

if(x[0] > 31 || x[1] > 12 || x[2] > h[2]) {
alert(’Data de Nascimento inv疝ida!’);
return 0;
}

anosProvisorio = h[2] - x[2];

if(h[1] < x[1]) {
anosProvisorio -= 1;
}
else if(h[1] == x[1]) {
if(h[0] < x[0]) {
anosProvisorio -= 1;
}
}

return anosProvisorio;
}
</script>
</head>
<body>
Data de Nascimento: <input type=”text” name=”dataNascimento” onblur=”document.getElementById(’idade’).value = calculaIdade(this.value,’<?php echo date(”d/m/Y”);?>’);” />
Idade: <input type=”text” id=”idade” />
</body>
</html>

Verifiquei com o Google Analytics que várias pessoas buscam validação de “Login” e Senha em Javascript, e vou colocar a minha opinião sobre esse tipo de uso para a linguagem.

Javascript deve ser usado para facilitar a navegação do usuário em um sistema ou site, ou seja, informando � ele que é obrigatório o preenchimento de tal campo antes mesmo de submeter a página, para não ter que validar lá com outra linguagem dinâmica e retornar na mesma página para dizer que está faltando tal campo. Lembrando que nunca se deve deixar uma validação por conta do JS, use sempre uma redundância que na verdade não é bem redundância, mas enfim, valide sempre as informações através do PHP, ASP, seja qual for a linguagem, após o usuário submeter a página.

Mas para essa validação em Javascript, existe uma controvérsia se você usar o AJAX para fazer essa validação, por que nesse caso a página não é submetida, mas da mesma forma é verificado a veracidade das informações através de linguagens dinâmicas no servidor. Mas tome cuidado, qualquer detalhe esquecido na sua validação AJAX na parte JS pode ser fatal para a seguraça de seu sistema!

Bom é isso, esse Google Analytics ajuda muito
Espero que ajude alguém na formação de opinião sobre o uso do JS.
Por: Andrey Pedro Lefkum

Esse POST merece um 10, pois sofri para encontrar essas duas linhas na NET!

Bom, é o seguinte, para que está usando o FCKeditor (Editor estilo word para WEB), e está precisando pegar o texto que a pessoa digitou para gravar temporariamente através do AJAX, ou até mesmo dar um alert essas duas linhas são a sua salvação!

function pegaTextoFCKeditor() {
var oEditor = FCKeditorAPI.GetInstance(’mensagemCorpo’);
mensagemCorpo = oEditor.GetXHTML();

alert(mensagemCorpo);
}

A variável mensagemCorpo, você usa da maneira que desejar!

Tá eu sei que isso é fácil, mas demorei duas horas para encontrar, isso quer dizer que não devem existir muitos POST disso na NET, e que algum louco vai precisar!

Valeu!