Igor Escobar // Blog

PhotoFlow - Primeiro Release

Igor Escobar on Mar 11th 2008

Dia 10 de março foi lançado o primeiro release do PhotoFlow, pela DeenSoft.

O PhotoFlow foi criado utilizando Prototype e Scriptaculos, para que plug-in funcione, as duas bibliotecas são pré-requisitos.

O PhotoFlow, interpreta o seu arquivo xhtml aplica um efeito conhecido como CoverFlow igual a ilustração deste post.

Exemplo de uso

Primeiro coloque o entre as tags head as seguintes chamadas javascript e css:

PLAIN TEXT

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="protoFlow.js" type="text/javascript"></script>
<link href="protoFlow.css" rel="stylesheet" type="text/css" />

Logo após, configure a chamada do plug-in para o elemento que você deseja que o PhotoFlow Inteprete:

PLAIN TEXT

<script language="Javascript">
Event.observe(window, 'load', function() {
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'}); });
</script>

O seu código xhtml deve ficar da seguinte forma:

PLAIN TEXT

<p id="protoflow">
<img src="imgs/DSCN0940_91360.jpg" /></p>
<img src="imgs/stimme_von_oben_187192.jpg" />
<img src="imgs/Tropfen_1_Kopie_201721.jpg" />
<img src="imgs/farbraum_012_147508.jpg" />
<img src="imgs/IMG_4906_199357.jpg" />
<img src="imgs/Tropfen_1_Kopie_201721.jpg" />
<img src="imgs/Fries_201253.jpg" />
<img src="imgs/Fries_201253.jpg" />
<ul id="protoCaptions" class="protoCaptions">
<li>Caption 1</li>
<li>Caption 2</li>
<li>Caption 3</li>
<li>Caption 4</li>
<li>Caption 5</li>
<li>Caption 6</li>
<li>Caption 7</li>
<li>Caption 8</li>
</ul>
</p>

Para os interessados:
PhotoFlow first preview release
PhotoFlow Demos
Prototype JavaScript Framework
Scriptaculos Prototype Plug-in

Espero ter contribuído!
[]'s

Web Standards vs. Projeto em dia

Igor Escobar on Mar 7th 2008

Principalmente nas micro-empresas este é um dilema muito comum e recorrente na cabeça dos pobres desenvolvedores.

Muitas vezes o fator web standards nem é um pré requisito no projeto, acontece que a grande maioria dos programadores que entendem a essência dos Web Standards, gostam e sabem, o motivo da utilização dos padrões no projeto.

O grande problema surge, quando o cliente pede algo "lunar" e nós, desenvolvedores temos que entrar no mundo highlander do cliente e desenvolver soluções a altura.

Acontece que, geralmente, soluções mirabolantes requerem implementações mirabolantes, consecutivamente, o nível de manipulação do documento XHTML por meio de Javascript é alto e muitas informações são expostas na marcação HTML, para que o JavaScript possa se guiar.

Tenho certeza que de todos os meus leitores, pelo menos um! vai se identificar com um caso parecido.

O grande pensamento vem a cabeça:

- O sistema não esta validando, e agora? eu só consigo implementar esta solução desta forma, não consegui pensar em outra forma de implementar, e fazer com que meu código consiga se guiar de maneira eficiente, para manipular este documento.

- Perco mais 1, ou 3 dias pensando em uma nova solução somente para implementar esta solução sob o plano B ou deixo este erro de validação passar e sigo em frente com o cronograma?

Caros amigos, não se desesperem. Já se foi o tempo onde os programadores eram neuróticos por validação.

Isso já cansou de ser dito: - Validar o seu código pela W3C nada mais é do que verificar se o seu código esta "gramaticalmente" escrita de maneira correta, ele estar validado não garante que o seu código será renderizado da mesma forma em outros navegadores.

E entramos no dilêma da guerra dos browsers. Você segue os padrões, mas o browser do seu cliente não, e ai? o que acontece depois ? ...

Se você se preocupa com os padrões, ótimo!, Deve!

Colocar em risco o ciclo de vida do projeto por causa de um erro de validação não compensa para você nem para sua empresa, pode ter certeza que se você tiver somente este erro, o seu site/sistema não vai se comprometer ou deixar a desejar para o seu cliente.

Pense muito bem na hora de fazer esta decisão. Se você tem um código 100% validado, ótimo! se você tem próximo a 95% validado, ótimo também!

A grande sacada deste texto é mostrar pra vocês que foi se o tempo onde as pessoas eram loucas e fissuradas pelo validador da W3C. O validador deve ser somente ser usado como parâmetro para verificar a sintaxe do seu código XHTML, muitas coisas podem passar despercebido na correria do desenvolvimento, da mesma forma que muitas coisas podem ser corrigidas sem comprometer o andamento do projeto com a "ajuda" do validador.

Use o validador como uma ferramenta aliada e não como uma ferramenta inimiga.

O W3C é uma organização que documenta "recomendações" e não "obrigações", existe as recomendações que são extremamente fundamentais para a renderização e comportamento correto em diferentes plataformas, porém, temos que ter um meio termo para tudo.

Links

Espero ter contribuído!
[]'s

Filed in Internet, Java Script, Otimização, Semântica, Web Standards, web 2.0 | 9 responses so far

Iniciando com o JSON

Igor Escobar on Fev 27th 2008

Alguns dias atrás, recebi um e-mail de um leitor que acabou de iniciar em um novo emprego e seus supervisores lançaram a seguinte necessidade:

Na nossa empresa temos uma base de dados que ao fazer a consulta X, irá vai te retornar um JSON, ou seja, um valor que por sua notação é denominada JSON.

JSON quer dizer JavaScript Objection Notation, nada mais é do que um conjunto de chaves e valores, que podem ser interpretadas por qualquer linguagem. Toda essa estrutura, foi criada apartir do padrão ECMA-262 que por sua vez possui convenções muito semelhante às linguagens como C, C#, C++, Java, JavaScript, Perl, Python e várias outras. Com estas características o JSON se torna o formato ideal para troca de informações independente da linguagem.

Um estrutura JSON pode ser identificada por duas estruturas de dados:

Uma coleção de pares nome/valor. Em várias linguagens, isto é caracterizado como um object, record, struct, dicionário, hash table, keyed list, ou arrays associativas.

JSON Objeto

Ex:

PLAIN TEXT

var MeuBlog = {
nome:"Igor Escobar // blog",
ano:2008,
assunto:"Tecnologia",
getTitle:function(){
return ('TituloBlog:' + nome);
}
}

Uma lista ordenada de valores. Na maioria das linguagens, isto é caracterizado como uma array, vetor, lista ou sequência.

JSON Array

Ex:

PLAIN TEXT

["Igor Escobar // Blog", 2008, 0]

Viu só? é super simples se trabalhar com o JSON. Não se preocupe ao aplicar estas regras na prática, a teoria é valida para você entender como o JSON gera estes dados, no seu caso (e de muitos), você precisa decodificar um Array ou um Objecto JSON para a sua linguagem nativa.

Vou utilizar a linguagem PHP, como exemplo, para você entender como funciona e aonde entra o JSON nesta história toda.

JSON na Prática

Primeiro o PHP recebe os dados e envia estes dados para o JSON seja ele um Array ou um Objeto.
Depois o JSON codifica os dados e retorna este valor (uma inofenciva string) para uma variavel PHP que por sua vez é responsável por enviar esta váriavel para o banco com os dados codificados.

JSON na Prática

Estou disponibilizando aqui o JSON em:

Mais caso você precise da implementação JSON em outras linguagens basta ir até o site do projeto.

Na prática você só vai utilizar duas funções do JSON:

PLAIN TEXT

$JSON = new JSON();
// JSON - Encode
$dbValue = $JSON->;encode($objetoPHP); // Codifica um objeto PHP -> JSON

PLAIN TEXT

$JSON = new JSON();
// JSON - Decode
$dbValue = $JSON->decode($dbObject->campoComJson); // Codifica um objeto JSON -> PHP Object

E é exatamente isso que no caso do nosso "amigo do e-mail" precisa fazer. Você precisa receber este valor na estrutura de dados JSON e decodifica-lo para que sua linguagem nativa o entenda e interprete.

Possível problema

Se você estiver utilizando JSON -> JavaScript e este array/objeto JSON retornar uma estring é possivel que você tenha problemas com caracteres especiais e na hora de exibir apareça uns caracteres como (+%...etc).

Para corrigir este problema eu implemento em minhas funções javascript a seguinte solução:

PLAIN TEXT

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}
function urldecode(str) {
str = str.replace(/\+/g, ' ');
str = unescape(str);
return str;
}

E é isso caro "amigo do e-mail", conte-nos depois como foi a sua experiência iniciando com o uso do JSON e espero que este ajude todas as outras pessoas que forem iniciar com o mesmo.

Vale lembrar, eu só escrevi este texto por que o nosso amigo aparentemente precisava MUITO, pela iniciação no novo trabalho e claro o seu problema com certeza bate com o de muitas outras pessoas, principalmente, com o objetivo deste blog que é em primeiro lugar, reunir soluções de desenvolvimento em um único lugar.

Espero ter contribuído!
[]'s

Filed in JSON, Java Script, PHP, Utilidades | 6 responses so far

Mootools Extension: moo.rd

Igor Escobar on Fev 21st 2008

O moo.rd é uma extensão feita em JavaScript (orientado a objetos) cujo seu objetivo é extender as funcionalidades do já consagrado Mootools Plug-in.

Mais uma extensão para quem gosta de aplicar efeitos bem atrativos as suas aplicações além de vários outros recursos sem se preocupar se vai ou não funcionar em diferentes navegadores.

Nesta extensão você encontra todas as opções oferecidas pelo Mootools Plug-in só que com mais recursos.

Se você tem dúvidas a respeito da sua utilização e personalização, basta acessar o site oficial do moo.rd.

Vale frisar que, ao fazer o download do moo.rd, ele permite que você escolha somente os recursos que você vai utilizar, desta forma o arquivo ficar menor e sem desperdício de funcionalidades sobrecarregando sua aplicação.

Links Úteis

Espero ter contribuído!
[]'s

Filed in Ajax, DHTML, Frameworks, Java Script, Utilidades | No responses yet

Trabalhando com Mascaras em Java Script - Final

Igor Escobar on Fev 20th 2008

Esta implementação eu criei para os programadores que utilizam alguma função que faz o auto-tab automático entre os campos.

PLAIN TEXT

/**
* Formata o Campo de acordo com a mascara informada.
* Ex de uso: onkeyup="AplicaMascara('HORA', this);".
* @author Igor Escobar (blog@igorescobar.com)
* @param Mascara String que possui o nome da mascara de formatação do campo.
* @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
* @returns {void}
* @methods
- DATA:
- HORA:
- CEP:
- CPF:
- CNPJ
- TEL
- TELDDD
*/
function AplicaMascara(Mascara, elemento)
{
// Seta o elemento
var elemento = (elemento) ? elemento : document.getElementById(elemento);
if(!elemento) return false;
// DEFINE AS REGRAS DE FORMATAÇÃO DOS CAMPOS
var Regexs = {
DATA: /(([0-9]){2})(([0-9]){2})(([0-9]){4})/,
HORA: /(([0-9]{2}))(([0-9]){2})(([0-9]){2})/,
CEP: /(([0-9]{5}))(([0-9]){3})/,
CPF: /(([0-9]{3}))(([0-9]){3})(([0-9]){3})(([0-9]){2})/,
CNPJ: /(([0-9]{2}))(([0-9]){3})(([0-9]){3})(([0-9]){4})(([0-9]){2})/,
TEL: /(([0-9]){4})(([0-9]){4})/,
TELDDD: /(([0-9]){2})(([0-9]){4})(([0-9]){4})/
}
MyRegex = eval('Regexs.'+Mascara);
// INSTANCIA A REGRA REGEX PARA FORMATACAO
getRegexGroups = new RegExp(MyRegex);
// INSTANCIA A REGRA QUE VERIFICA SE O CAMPO POSSUI SOMENTE NÚMEROS
onlyNumbers = new RegExp(/^([0-9]+)$/);
// ESTE É O CAMPO COM AS IMPURESAS (DIGITADO PELO USUÁRIO FINAL)
var CampoSujo = elemento.value;
// RETIRA OS EXCESSOS DOS CAMPOS PARA QUE POSSAMOS APLICAR A MASCARA EM UM CAMPO LIMPO
var oValue = CampoSujo.replace(/([./;:,\-()]+)/g,"");
// VERIFICA SE A REGRA QUE ELE SE ESCOLHEU SE APLICA AO TEXTO DIGITADO NO CAMPO
if(getRegexGroups.test(oValue) == true){
//APLICA A REGRA NO CAMPO E FORMATA
switch(Mascara){
case 'DATA': oNewCampo = oValue.replace(getRegexGroups,"$1/$3/$5"); break;
case 'HORA': oNewCampo = oValue.replace(getRegexGroups,"$1:$3:$5"); break;
case 'CEP': oNewCampo = oValue.replace(getRegexGroups,"$1$3-$5"); break;
case 'CPF': oNewCampo = oValue.replace(getRegexGroups,"$1.$3.$5-$7"); break;
case 'CNPJ': oNewCampo = oValue.replace(getRegexGroups,"$1.$3.$5/$7-$9"); break;
case 'TEL': oNewCampo = oValue.replace(getRegexGroups,"$1-$3"); break;
case 'TELDDD': oNewCampo = oValue.replace(getRegexGroups,"($1)$3-$5"); break;
}
// Retorna o valor do elemento com seu novo valor
elemento.value = oNewCampo;
}
}

Observe que nos comentários do código possui as mascaras suportadas pela função. Se você precisar de alguma especifica, basta comentar este post detalhando a regra e eu retorno o comentário com a regra Regex para você agregar ao seu objeto.

Como Usar?

Exemplo:

PLAIN TEXT

<input name="data" onkeypress="AplicaMascara('DATA',this);" type="text" />

That's it!

A função AplicaMascara(); possui 2 parametros:

Nome da mascara que você quer aplicar
Objeto que será manipulado pela função JavaScript

É isso, essa implementação foi feita devido aos problemas apresentados pela implementação anterior que apresentou problemas em relação a precisão do auto-tab, fazendo com que o campo mudasse de foco antes do usuário terminar de digitar a data com a mascara por completo.

Espero ter contribuído!
[]'s

Desenvolvimento, Tecnologia e Informação, na ponta do lápis.

Archive for the 'Java Script' Category

PhotoFlow - Primeiro Release

Exemplo de uso

Leia também:

Web Standards vs. Projeto em dia

Iniciando com o JSON

JSON na Prática

Possível problema

Mootools Extension: moo.rd

Links Úteis

Trabalhando com Mascaras em Java Script - Final

Como Usar?

Leia também:

Procurar

Categorias

Histórico

Paginas