Dicas – Acessando provedores FTP diretamente no browser

Precisou de algum arquivo hospedado em um servidor FTP e o lugar onde está não lhe dá acesso, seja lá qual for o motivo?

Precisou subir algum arquivo para um servidor FTP urgentemente mas não tinha um programa de acesso ao dito protocolo?

Seus problemas acabaram! Ou quase…

O fato é que tive essa necessidade em uma situação muito parecida. Sabe como é, rede desconhecida, falta de privilégios, roteador e firewall bloqueando tudo, enfim. Na falta destes recursos, não me veio outra coisa na cabeça senão dar uma “Googleada” (olha a propaganda, mas quem disse que o Google precisa de propaganda?) a procurada das tão famosas ferramentas baseadas em Web. Com a existência de coisas como o Google Docs, Maps, Zoho, enfim, todo tipo de aplicação Web 2.0 que a gente vê por aí, pensei, deve ter algo desse tipo também. Fiz a pesquisa meio sem esperança, mas não é que, além de achar várias opções, elas são bem profissionais?

A que acabei utilizando foi o net2ftp, que pode ser acessada no seguinte link:

http://www.net2ftp.com

Além da interface ser muito bacana, é bem intuitiva e tem suporte ao idioma português brasileiro. Uma mão na roda. Apesar de não ter muito ajax e suas firulas, funcionou perfeitamente e muitos testes que fiz, mantendo em cookies inclusive o último diretório acessado, o que ajuda bastante se estiver em um determinado contexto.

Obviamente devem haver outras, mas o net2ftp me impressionou além de tudo pela simplicidade. Fica aí a dica.

Abraços

Tomás

Dicas Web – Agilize o desenvolvimento de suas páginas

Essa dica foi enviada pelo blog do Adsense, comunidade que apóia usuários e editores do programa de afiliados do Google Adsense. A maior parte das dicas foca em aprimorar os rendimentos do programa, porém, algumas vezes surgem algumas dicas de melhorias em sites e ferramentas. Convenhamos, quem dispensaria uma dica da equipe do Google?

A dicas se concentram em plugins do browser Mozilla Firefox que auxiliam na manutenção de sites dinâmicos dentro do próprio browser, sem precisar de ferramentas adicionais instaladas no computador.

Lá vão elas:


Você está sempre trabalhando nas páginas do seu site e na implementação do AdSense? Alterando o HTML ou o PHP, criando imagens e código toda hora? Se a resposta é sim, existem complementos (add-ons) do Mozilla Firefox que podem ajudar a agilizar o processo de criação. Abaixo estão alguns que podem ser bastante úteis:

 

ColorZilla – https://addons.mozilla.org/pt-BR/firefox/addon/271

Esse complemento informa qual é o código RGB ou hexadecimal da cor que você estiver vendo na tela, para ajudar a criar uma logomarca para seu negócio que tenha o tom certo de azul, por exemplo. A ferramenta ainda permite salvar paletas de cores personalizadas enquanto você navega, para usar mais tarde em outros designs.

MeasureIt – https://addons.mozilla.org/pt-BR/firefox/addon/539

Meça, em pixels, a altura e largura de qualquer elemento de uma página. O uso é muito simples e você descobre rapidinho quanto espaço tem sobrando para colocar aquele novo bloco de anúncio do AdSense. 🙂

IE View – https://addons.mozilla.org/pt-BR/firefox/addon/35

Você costuma abrir o Internet Explorer para ver como sua página aparece? O IE View permite ver como a página ficaria se você estivesse usando o IE, sem se preocupar em abrir outro navegador. Você também usar esse complemento para navegar em sites que não se comportam bem no Firefox.

WebDeveloper toolbar – https://addons.mozilla.org/pt-BR/firefox/addon/60

Essa barra de ferramentas multiuso dá acesso fácil a recursos como controle da exibição de Java e Javascript, elementos de formulários e CSS, mudança da resolução da tela (para você ver como seu site ficaria numa resolução menor), validação de HTML e muito mais.


A esta lista, que já está bem bacana, acrescentaria somente os seguintes plugins:

 

FireBug – https://addons.mozilla.org/firefox/addon/1843

Firebug é uma extensão para o Mozilla Firefox que adiciona ao navegador inúmeras ferramentas para facilitar a tarefa de desenvolvimento de páginas web. Ele possibilita a identificação e eliminação de erros de programação, edição e também o monitoramento de CSS, HTML e JavaScript presentes em qualquer página da internet.

DOM Inspector – https://addons.mozilla.org/firefox/addon/1806

O DOM Inspector é um painel que exibe pra você a árvore de elementos criada pelo navegador ao renderizar a página. Ele se torna especialmente útil quando você precisa resolver problemas em códigos feitos por outras pessoas ou códigos feitos por você mesmo há muito tempo e que não estão muito bem organizados. Ele auxilia também na depuração de scripts da página, oferecendo junto com o FireBug, um console completo de depuração com recursos como CallStack, Watch, Breakpoints e outros.

A explicação dada aqui está longe de ser completa. Cada extensão mereceria um tutorial próprio, alguns bem extensos, mas como a intenção inicial é dar uma idéia, já possível curtir um pouco do que cada um faz, e faz muito bem.

Quais são seus complementos favoritos para desenvolvimento de páginas de web? Deixe um comentário!

Abraços

Tomás

Javascript – Campo texto permitindo somente digitação de números

Uma necessidade bem comum em sistemas comerciais voltados para web é a validação/consistência de valores inseridos em campos ou controles. Porém, como sabemos, os controles HTML e seu contexto são bem, digamos, “traiçoeiros”.

Não temos neles toda a riqueza de uma interface gráfica ou um controle efetivo de seus eventos. Mas como o Javascript tem se tornado cada vez mais indispensável na construção desses sistemas, mesmo não tendo que sê-lo, nada como apelar para ele em casos como esse.

A função disponibilizada abaixo garante por meio do onkeydown evento Javascript que somente valores numéricos sejam digitados em um campo texto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/*
* função para permitir a digitação de números decimais e inteiros
*/
function ForceNumericInput(event, This, AllowDecimal, AllowMinus)
{
if(arguments.length == 1)
{
var s = This.value;
// garante que o sinal de "-" seja o primeiro do índice
var i = s.lastIndexOf("-");
if(i == -1)
return;
if(i != 0)
This.value = s.substring(0,i)+s.substring(i+1);
return;
}
switch(event.keyCode)
{
case 8:     // backspace
case 9:     // tab
case 37:    // left arrow
case 39:    // right arrow
case 46:    // delete
event.returnValue = true;
return;
}
if(event.keyCode == 189)     // sinal de número de negativo
{
if(AllowMinus == false)
{
CancelEventExecution(event);
return;
}
// aguarda até que o controle tenha sido atualizado
var s = "ForceNumericInput(document.getElementById('"+This.id+"'))";
setTimeout(s, 250);
return;
}
if(AllowDecimal && event.keyCode == 188)
{
if(This.value.indexOf(",") >= 0)
{
// restringe a digitação de apenas uma vírgula
CancelEventExecution(event);
return;
}
event.returnValue = true;
return;
}
// permite caracteres entre 0 e 9
if(event.keyCode >= 48 && event.keyCode <= 57)
{
event.returnValue = true;
return;
}
CancelEventExecution(event);
}
/*
* Cancela a execução de uma function mapeada por um evento
*/
function CancelEventExecution(event)
{
if (navigator.appName == "Netscape")
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
}

Para aplicar a função em um controle input, as opções seriam as seguintes:

Para permitir a digitação de números inteiros de decimais positivos ou negativos

1
2
<input type="text" name="TextBoxNumeric" id="TextBoxNumeric" value=""
    onkeydown="ForceNumericInput(event, this, true, true)" />

Para permitir a digitação de inteiros positivos ou negativos

1
2
<input type="text" name="TextBoxNumeric" id="TextBoxNumeric"
    value="" onkeydown="ForceNumericInput(event, this, false, true)" />

Para permitir a digitação de inteiros e decimais positivos

1
2
<input type="text" name="TextBoxNumeric" id="TextBoxNumeric"
    value="" onkeydown="ForceNumericInput(event, this, true, false)" />

Para permitir a digitação de somente inteiros positivos

1
2
<input type="text" name="TextBoxNumeric" id="TextBoxNumeric"
    value="" onkeydown="ForceNumericInput(event, this, false, false)" />

A função acima tem como base um exemplo postado no site CodeProject (http://www.codeproject.com/KB/scripting/JavaScriptForceNumInput.aspx), porém, com a limitação de funcionar apenas no Internet Explorer.

Foram aplicadas algumas correções como a permissão de navegar por meio da tecla TAB, o que não estava previsto na função original. A função CancelEventExecution foi criada para garantir o cancelamento da execução do evento em navegadores não Internet Explorer. também foi necessário adicionar o parâmetro event, que é implícito no nvagedor da Microsoft, mas precisa ser informada nos demais.

Com isso, a função passar a funcionar corretamente na maior parte dos navegadores.

Aplicando ao função no ASP.NET

Abaixo segue um pequeno exemplo de como aplicar esta função a um controle TextBox no ASP.NET:

1
2
3
TextBox.Attributes.Add("onkeydown", string.Format(
"ForceNumericInput(event, this, {0}, {1});",
true.ToString().ToLower(), true.ToString().ToLower()));

Abraços

Tomás

ASP.NET – Bug no controle CalendarExtender/MaskedEditExtender do AJAX Control Toolkit

Dependendo da versão do AjaxControlToolkit utilizada, é preciso atentar a alguns bugs que ocorrem em alguns dos controles que o pacote disponibiliza.

Neste caso, o erro com que me deparei foi o seguinte, assumindo que o Depurador de Javascript do Internet Explorer esteja ativado:

Erro em tempo de execução do Microsoft JScript: ‘null’ é nulo ou não é um objeto

Ao enviar a execução para o Visual Studio, o erro acontece na seguinte execução:

var oldElement = newElement.cloneNode(true);

O erro ocorre numa combinação do uso dos controles CalendarExtender e MaskedEditExtender. O erro ocorre especificamente na função _switchMonth. Aparentemente, algumas data informadas no controle com MaskedEditExtender sem que o controle CalendarExtender tenha sido alguma vez chamado, e consequentemente criado, o bug é gerado. Um exemplo de data que gera o bug é 01/01/0002, dentre outras possíveis.

O erro ocorre por conta do seguinte código.

var newElement = this._modes[this._mode]; // new Element is NULL
var oldElement = newElement.cloneNode(true); // CRASH BOOM BANG.

A partir do Release 10920 do AjaxControlToolkit, o problema é resolvido. Porém, caso tenha alguma dificuldade com atualização de componentes ou se precisou promover alterações no toolkit que resultou em algo personalizado, o código que corrige o erro é:

this._isAnimating = true;

// Added by Deepak Chawla 23 July 2007 BUG: When the mask edit auto complete calls the calendars delegate body might not have been built
if (this._modes[this._mode] == null) // NEW CODE
this._buildBody(); // NEW CODE

var newElement = this._modes[this._mode];
var oldElement = newElement.cloneNode(true);

Referências:

http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=11121

http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941

Tomás