Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.
por Alexandre Magno
Postado em 21/01/2010 por Alexandre Magno
jQuery UI, projetos jQuery, SWFUpload e Jquery, Jquery, Javascript
Ler comentários (18 comentarios)

Depois de fazer um esforço para mudar a estrutura do plugin em como é chamado e não mais depender dos parâmetros do swfupload, refiz toda a lógica de opções do plugin e abstrair todas as opções do upload.
Sendo assim, o plugin agora só tem um parâmetro que são as opções do plugin. Antes passando as opções do swfupload o desenvolvedor poderia quebrar o funcionamento atual sobrescrevendo eventos. Nesta versão o plugin possui todas as configurações e assim pode extender e customizar sem afetar as atuais funcionalidades.
Os requisitos para o funcionamento do plugin estão listado abaixo:
Suporte:
* Não houve teste no IE6
Utilização
Primeiro, você deve incluir o plugin e suas dependências:
<link type="text/css" href="jquery.jqswfupload.css" rel="stylesheet" /> <script language="JavaScript" type="text/javascript" src="libs/jquery-1.3.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="libs/jquery-ui-1.7.1.custom.min.js"></script> <script language="JavaScript" type="text/javascript" src="libs/swfupload.js"></script> <script language="JavaScript" type="text/javascript" src="libs/jquery.jqswfupload.js"></script>
Esta ordem é importante para que o plugin possa funcionar corretamente.
jqswfupload usa a biblioteca swfupload em conjunto com o jQuery. Então ele sobrescreve um simples input de arquivo com um sistema de upload múltiplos baseado em flash que possui todo o controle de progresso e tamanho do arquivo.
A marcação mínima para que o plugin possa funcionar está listada abaixo:
<div id="upload-container"> <form action="upload.php" method="post" enctype="multipart/form-data"> <div id="upload-placeholder"> <input type="file" name="Filedata" /> <input type="submit" value="upload" /> </div> </form> </div>
Com esta marcação você pode invocar o plugin com as seguintes opções:
<pre>/*
* jQuery upload - main file
*/
$(document).ready(function(){
$("#upload-container").jqswfupload({
onUploadStart: function(file) {
$('#debug-bar').append('Upload Started: '+file.name);
},
onFileSuccess: function(file,data,response) {
$('#debug-bar').append('File success: '+ file.name + data);
},
onFileError: function(file,code,message){
$('#debug-bar').append('File Error: '+ file.name + message);
},
totalSize: '100 kb',
uploadUrl: upload_uri + 'upload.php',
// The post sent to server in the same request as the file object
post_params : {
'type' : 'swfupload',
'test' : 'val'
}
});
});</pre>
O plugin usa um parâmetro, um objeto literal de opções
$('container').jqswfupload(options);
onFileQueue(file)
onDialogClose(files_selected,files_queued,total_queued)
onSwfuploadLoaded()
onUploadStart(file)
onUploadProgress(file,completed,total)
onFileComplete(file)
onFileError(file,error,message)
onFileSuccess(file,data,response)
//formato dos parametros adicionais
post_params : {
"post_param_name_1" : "post_param_value_1",
"post_param_name_2" : "post_param_value_2",
"post_param_name_n" : "post_param_value_n"
},
Para uma completa referência das opções do swfupload, veja a documentação do swfupload
Aqui está uma lista das dúvidas frequentes que podem ocorrer ao utilizar o jqswfupload:
SWFUpload é uma ótima biblioteca utilizada amplamente em grandes projetos para realizar uploads múltiplos. Ela torna fácil a integração do flash com a interface web que não seja puramente nesta tecnologia. Entretanto, o swfupload tem muitos eventos, callbacks e opções que permite a flexibilidade para o desenvolvedor criar a experiência completa de upload utilizando javascript para criar todo o dom necessário para fazer isto acontecer. Este plugin é baseado na experiência do usuário utilizada no upload de fotos do Flickr. Toda a interface pode ser customizada por CSS. Com algumas vantagens, o jqswfupload estende as funcionalidades do swfupload, como progresso geral de arquivo e limitação de tamanho máximo da fila, não simplesmente limitar o tamanho de um único arquivo. O plugin foi construído para tornar este tipo de upload da "maneira jQuery de ser" que com uma linha você pode ter tudo funcionando e você tem o objeto de opções para ter o poder de mudar de acordo com sua necessidade.
Provavelmente a opção upload_url do swfupload não está correta. Não se esqueça de tornar o link absoluto ou relativo ao caminho do plugin.
Provavelmente você não colocou corretamento o arquivo swf ou não modificou a opção flash_url. Não se esqueça que esta opção é relativa ao template.
Sim, usando o plugin você consegue usar os eventos do plugin que são análogos a vários eventos do swfupload, a diferença é que eles são acionados depois da interface gerada, sendo assim você pode personalizar e executar as ações que desejar
O script upload.php simplesmente prova que a cada upload realizado o script é chamado. O script pode ser escrito em diferentes linguagens de servidor e é assumido que quem esteja utilizando este plugin tem algum conhecimento prévio com envio de upload e o está utilizando para melhorar a experiência do usuário que é prejudicada com o upload de arquivos ormal. Se tiver algum exemplo de implementação do script de upload, por favor, entre em contato
Postado em 14/03/2009 por Alexandre Magno
Ler comentários (2 comentarios)
Uma das regras de melhores práticas para otimizar a perfomance de um site, de acordo com o Yahoo é colocar a tag script logo antes do fechamento da tag body do documento. Existe uma falha em fazer esta afirmação como regra.
Quando a página é carregada, o Browser ao carregar a tag script interrompe o processamento do restante do documento até que ele seja carregado completamente. Sendo assim, parece lógico você utilizar a tag script na parte inferior do documento ao invés do inseri-la no head (o mais utilizado). Desta forma o browser renderiza completamente, deixando para renderizar o script logo após a página ser carregada, dando uma reposta ao usuário mais rápida.
Situações como o Google Analitics, que orienta o usuário a inserir o script (captação para obter as estatísticas da página) na parte inferior, isto se aplica da forma correta, pois a página é carregada sem que o script do Google cause o decrescimento de perfomance no site. No entanto, no caso onde o script a ser carregado contém alguma interação com o usuário, este caso não deve ser aplicado pois se a página for renderizada ele está apto a interagir e clicar em links que possui eventos que não foram atribuidos a aquele elemento podem comprometer ao uso do site. Desta forma, o usuário pode interagir no momento inapropriado e não ter a experiência esperada do sistema.
A perfomance não deve afetar a integridade do sistema, então neste caso precisa ser balanceada. Mesmo sendo uma prática ditada pela Yahoo, ela possui esta grande falha e devemos saber dicernir melhores práticas para tomar decisões para melhorar perfomance.
Dependendo do tamanho dos scripts, a diferença de perfomance é considerável. Para tentar minimizar este problema, eu utilizo o carregamento de scripts sob demanda que desenvolvi para não carregar scripts desnecessários na página que muitas vezes nem use algum plugin do jQuery ou biblioteca exterior.
Postado em 30/01/2008 por Alexandre Magno
Ler comentários (12 comentarios)
Originalmente escrito por Mike Alsup no blog Learning jQuery
Eu tenho desenvolvido plugins do jQuery por um tempo e me acostumei com um estilo bastante particular de desenvolver plugins para meus scripts. Este artigo pretende compartilhar o padrão de desenvolvimento que eu achei extremamente útil para a autoria de plugins. Ela parte do pressuposto que você já tenha conhecimento do desenvolvimento de plugins para jQuery. Se você um autor de plugin novato, por favor leia o Guia de autoria de plugins do jQuery (inglês, por enquanto
)
Há poucos requerimentos que eu acho fazer um plugin se comportar bem:
Eu analisei esses requerimentos um a um, e trabalhei em cima dele para construir um simples plugin que pisca o texto.
Postado em 22/08/2007 por Alexandre Magno
PHP, Ajax, Jquery, Javascript
Ler comentários (24 comentarios)
Vou mostrar neste post como validar em tempo real um login antes dele poder digitar a senha. Assim, quando o usuário digitar um login e pressionar TAB ou clicar com o mouse no campo de senha ele será alertado se este login é valido ou não. No exemplo que vou mostrar exibe um alerta, mas você pode fazer de outras maneiras, como mudar a classe do campo, adicionar uma mensagem, dentre outras coisas.
Usando ajax, você pode fazer requisições no servidor em qualquer evento javascript, seja um clique em um link ou um caractere digitado no teclado. Basta usar a imaginação e competência para usar no lugar certo e de uma maneira que facilite a vida, ao invés de complicar.
O raciocínio é o seguinte. Quando o usuário sair do campo de login (evento onBlur do javascript), uma requisição com o método $.post do Jquery será feita, passando o valor digitado no campo de login para ser processado. Se for encontrado algum registro no banco ele retorna em forma de xml o valor, caso contrário retorna outro valor. Esse valor então é processado na função de callback do método $.post e assim pode-se escrever um alerta ou usar o Jquery para fazer o que for preciso para alertar o usuário de que o login está errado.
Com poucas linhas de código é possível fazer isto com Jquery:
$("input[@name=login]").blur(function(){ var login = $(".login").val(); $.post("login_request.php",{login: login}, function(data){ var retorno = parseInt($(data, 'login').text()); if(retorno) { alert("login encontrado"); // mais ações podem ser // adicionadas aqui para o login // encontrado } else { alert("login não encontrado"); // mais ações podem ser // adicionadas aqui para o login // não encontrado } }); });
No código acima, o campo com o atributo name com o valor login é selecionado e passado um evento blur do Jquery, que equivale ao evento onBlur do Javascript, ou seja, quando o usuário sair do campo ele é acionado. O valor do campo de login, que possui também uma classe login é guardada na variável login, para ser usado pelo método $.post do Jquery, que irá passar esse valor para o arquivo login_request.php que irá retornar o XML com a resposta do login encontrado ou não. O código do callback aceita como parâmetro data, que é o xml retornado para ser trabalhado com o Jquery, assim nas linhas:
var retorno = parseInt($(data, 'login').text());
O jquery seleciona o nó login e pega o valor dele através do método text. Preste bastante atenção na notação $(data,'login'). Ela procura uma tag login com a referência em data(o nó principal do xml, como se fosse o body). O parseInt irá transformar o valor em número, que é 1 para o login encontrado e 0 para o não encontrado. Assim a estrutura condicional abaixo irá emitir dois alertas caso retorne 1(verdadeiro) ou 0(falso).
O código do arquivo PHP encontra-se abaixo:
header('Content-type: text/xml'); $login = $_POST['login']; include('global.php'); $db = conectar(); $consulta = "SELECT login from dados where nome='$login'"; $resultado = mysql_query($consulta,$db); $encontrado = mysql_num_rows($resultado); echo ' <principal><login>' . $encontrado . '</login></principal>';
O PHP irá fazer a consulta e irá verificar se há na tabela dados o login com o nome passado pelo método $.post do Jquery. Então ele irá retornar um XML com essa estrutura caso for encontrado:
<principal><login>1</login></principal>
Com isto fizemos passamos para o Jquery e trabalhamos como foi explicado acima.
O exemplo abaixo possui os seguintes logins na tabela para teste: alexandre, daniel e joao. Qualquer valor que não seja este digitado no login irá alertar como usuário não encontrado.