Javascript, Recortar Imagem (+Preview)

Publicado; dezembro 6, 2007 | Autor: | Filed under: JavaScript, Prototype, Script.aculo.us | Tags: , , , , , | 28 Comments »

Prototype

Eu achava que já tinha visto de tudo, mais dessa vez me surpreendi.

Sempre estou a procura de coisas que irão facilitar a vida de nossos clientes, e um dos pontos que eu sempre achei que fosse necessário nos sistemas era o tratamento das imagens enviadas pelo usuário.

Como assim ?

Imagina, um usuário comum que acessa o seu sistema de gerencia de conteudo, o mesmo envia uma imagem sem nenhum padrão (dimensão – acontece SEMPRE) para dar enfoque as notícias , e você já sabendo disso limitou na exibição usando a biblioteca GD do PHP as dimensões, seja cortando a imagem ou seja re-dimensionando, agora vamos aos problemas:
Leia o resto deste post »

Javascript, Galeria de Fotos (Script.aculo.us)

Publicado; dezembro 5, 2007 | Autor: | Filed under: JavaScript, Prototype, Script.aculo.us | Tags: , , , , , | 6 Comments »

Prototype

Como alguns já perceberam, eu tenho uma certa paixão por Javascript, e por essa razão to sempre fuçando.

Desta vez descolei uma galeria de fotos feita utilizando prototype + scrip.taculo.us com direito a legenda na foto, legenda externa com div e ZOOM que é o grande diferencial (0 zoom é muito loko).

A galeria de fotos foi criada por Thomas

Requisitos Básicos

Script.aculo.us : http://script.aculo.us/downloads
Leia o resto deste post »

Javascript, Calendário (+Input) usando MooTools

Publicado; novembro 29, 2007 | Autor: | Filed under: JavaScript, MooTools | Tags: , , , , , | 4 Comments »

Mootools

Antes de mais nada uma breve resumo do que seria o mootools:

“Um framework compato e orientado a objetos em JavaScripts para aplicações Web”

Igual o prototype ? Talvez melhor, depende dos recursos que você precisa.

Voltando ao que interessa neste post, eu estava como de costume lendo algumas coisas relacionadas a javascript quando me deparei com esse calendário feito em javascript que utiliza o mootools e fiquei abismado, justamente por já ter usado outros que sempre são pesados e de aparência bem duvidosa.

Print dos exemplos (detalhe eu tratei a imagem, ou seja, fico ruim):

Calendário Javascript Mootools

Isso mesmo, um calendário de gente grande, fico muito show de bola e sua utilização é bem simples, basta voce baixar o framework mootools e o arquivo do calendário (existe um outro com os opcionais bem legal) e todos os arquivos você encontra no site:
Leia o resto deste post »

Javascript, Sobrecarregando Métodos

Publicado; novembro 16, 2007 | Autor: | Filed under: JavaScript | Tags: , , , , | 1 Comment »

Lá estava eu navegando internet a dentro quando me deparei com um artigo muito, mais muito interessante, talvez só pra mim, mais mesmo assim interessante.

Sobrecarregar métodos em javascript, mais como assim ?

Quem nunca passou pelo seguinte problema:

Função 1 = Função 2, só que função 1 preciso passar id e função 2 preciso passar id e nome, então o que voce faz ? POG, normalmente cria-se duas funções ou realiza a famosa pergunta “empty ?” (vazio ?), e como não é possível o sobrecarregamento de métodos no javascript diferente do que acontece por exemplo no java, isso se tornava inviável a medida que os parametros cresciam.
Leia o resto deste post »

Formatando moeda com javascript

Publicado; novembro 5, 2007 | Autor: | Filed under: JavaScript | Tags: , , , , , , , | 18 Comments »

Quem nunca perrengou pele net a procura de um algoritmo eficiente para formatar moeda em um campo texto?

Bom, se assim como eu você não tem tempo e/ou não esta disposto a passar dias e noites a fio desenvolvendo seu próprio script, vale a pena usar esse ai embaixo. Eu catei na net ha um tempo atrás e tem sido muito útil para aplicações mais simples. Ele cria uma mascara de moeda enquanto estamos digitando.

Não sei quem é o autor, pois como eu disse peguei na net. Só fiz uma pequena alteração, pois o script original não permitia a entrada de teclas que não fossem numéricas, assim era complicado corrigir um numero quando eu digitava errado.

Script:


function formataMoeda(objTextBox,SeparadorMilesimo, SeparadorDecimal,e){
var sep = 0;
var key = '';
var i = j = 0;
var len = len2 = 0;
var strCheck = '0123456789';
var aux = aux2 = '';
var whichCode = (window.Event) ? e.which : e.keyCode;
// 13=enter, 8=backspace as demais retornam 0(zero)
// whichCode==0 faz com que seja possivel usar todas as teclas como del, setas, etc
if ((whichCode == 13) || (whichCode == 0) || (whichCode == 8))
return true;
key = String.fromCharCode(whichCode); // Valor para o código da Chave

if (strCheck.indexOf(key) == -1)
return false; // Chave inválida
len = objTextBox.value.length;
for(i = 0; i < len; i++)
if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal))
break;
aux = '';
for(; i 2) {
aux2 = '';
for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += SeparadorMilesimo;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}
objTextBox.value = '';
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
objTextBox.value += aux2.charAt(i);
objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
}
return false;
}

Chamada ao script:

Como podem perceber este script apresenta um erro de sintaxe, esse erro acontece pois o plugin do wordpress não esta escapando corretamente o código. No link abaixo voces encontrarão o mesmo post com o script corrigido.
http://blog.zuntto.com/javascript-formatando-moeda-com-mascara/

http://www.couto.zuntto.com

Type File (Arquivo), Customizado

Publicado; fevereiro 4, 2007 | Autor: | Filed under: Flash, JavaScript | Tags: , , , , , | 2 Comments »

FLASH (SWL) UPLOAD ARQUIVO

Customizar, alterar, editar, transformar e inovar o campo de upload.

Sem dúvida é uma das coisas mais fascinantes que já achei até hoje, sempre me perguntei se teria como alterar o input type=”file” (campo de arquivo para os íntimos), aliás eu não só já me perguntei como já experimentei testar alterando pelo CSS, buscando alternativas para o campo em javascript, entre outros, sem muito sucesso (ps: com o ruby on rails é outra história).

O figura que desenvolveu a solução penso em algo incomum eu diria, fazer upload pelo flash e pedi uma mãozinha pro javascript.

Flash ? isso mesmo flash, ele desenvolveu um sisteminha que pode ser chamado a partir de um link ou de uma imagem que irá abrir a caixa de seleção de arquivos e ao pressionar em abrir (ok), ele salva o arquivo no diretorio desejado (com barra de progresso) e ainda resgata os eventos do botão de cancelar e abrir (ok), úteis para se quiser criar um campo do tipo text e preencher com o nome do arquivo.

ps : Muitos falam que com AJAX tem como, mais não tem como isso já foi provado em alguns blogs interncionais (chique), aliás tem como, no firefox, e se você informar ao usuário que ele tem que alterar umas 1000 coisas no about:config do browser.

Eu realmente só acreditei quando testei aqui, então vale a pena da uma olhada :

SWFUpload em ação (demo e código).

Documentação : leia pois é necessário duas varíaveis do apache em OFF, aqui já estavam.

Links Corrigidos:

SWFUpload – Demos (Muito melhor que a verão anterior) 

SWFUpload – Download  e Tutorial 

Eles deram um UP legal, e agradeço ao felipe por mencionar que o link estava quebrado.

Player de MP3 em Javascript

Publicado; fevereiro 4, 2007 | Autor: | Filed under: JavaScript | Tags: , , | 12 Comments »

PLAYER MP3 JAVASCRIPT

Update: Sugiro uma olhada em: Sound Manager 2

Twitter: @jonathanisaac

E eu achando que só o com flash que dava pra ter um tocador de música (player) eficiente e agradável aos olhos.

Mais que surpresa, um espanto. Vagando novamente pela internet de madrugada achei um script (js) muito eficiênte para tocar música (mp3), cheio dos efeitos a lá script.aculo.us, e muitas funcionalidades, dentre elas, volume, pular música, mover cursor entre o tempo da música e dois skins alternativos (um pouco de paciência da cria um skin tbm) o nome da beldade é jsAMP MP3 Player .

Além de todo o conjunto do script o autor também disponibiliza alguns outros suportes relacionados a som.

preview:

PLAYER MP3 JAVASCRIPT

Referências : Site/Blog do Autor, Player em Ação (preview).

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.