Davi Ferreira blog!

Esqueça as funções javascript alert() e confirm()

Davi Ferreira — Thu, 20 Nov 2008 15:04:21 +0000

Uma das coisas que mais me incomoda em sistemas web é a enorme quantidade de alertas do sistema. Confirmações, perguntas, informações — todos utilizando o visual padrão do sistema operacional. É impressionante a quantidade de sistemas que insistem em bombardear o usuário com os famigerados alert() e confirm() do javascript. No entanto, para nossa felicidade, a evolução do javascript permitiu que estes verdadeiros inimigos da usabilidade fossem substituídos por versões mais elegantes e amigáveis. Conheça uma delas, o plugin m2brDialog, para jQuery.

Apesar de neste artigo você conferir um método para substituir as janelas padrões de sistema, gostaria de começar com o seguinte conselho: evite o uso de confirmações. O Windows Vista é a maior prova de que inúmeras perguntas e avisos incomodam — e muito — qualquer usuário. Algumas alternativas incluem avisos de confirmação mais discretos, como o modelo lançado pelo Google, exibido no canto superior da tela, ou perguntas inline, exibidas de forma dinâmica diretamente no miolo do sistema. É claro que, em alguns casos, é necessário impedir que o usuário clique ou execute qualquer funcionalidade antes de confirmar a ação. É aí que entra o m2brDialog.

O objetivo principal deste plugin é substituir completamente o uso de alertas e confirmações padrões. Possui como dependências o framework javascript jQuery, além de sua extensão para interfaces caso você queira habilitar a opção de arrastar a janela. O m2brDialog funciona baseado no evento clique e seu visual é totalmente customizável, todo baseado em CSS — o tema padrão utiliza o set de ícones Tango, mas nada impede que você implemente suas próprias imagens.

Caso você precise de uma introdução ao jQuery, leia os primeiros parágrafos de meu artigo sobre uma interface drag and drop utilizando o framework.

Download: m2brDialog

Opções da extensão jQuery m2brDialog()

Confira o conjunto de opções disponíveis para configurar o alerta exibido:

largura	valor inteiro que define a largura do aviso, em pixels
altura	valor inteiro que define a altura do aviso, em pixels
tipo	string indicando o tipo do aviso, estando disponíveis as seguintes opções: alerta, erro, pergunta e info
titulo	string a ser exibida no título do aviso
texto	conteúdo da mensagem do alerta
draggable	true ou false para definir se o usuário pode arrastar e mover o aviso (depende da extensão jQuery UI)
botoes	array com o conteúdo, tipo e links dos botões do aviso
tempoExibicao	tempo de duração da exibição do alerta, em segundos
condicao	array com funções que determinam a condição se o alerta deve ser exibido ou não (saiba mais abaixo)

m2brDialog na prática

Faça a chamada para os arquivos javascript do jQuery e do plugin m2brDialog dentro da tag de seu HTML, bem como o link para a folha de estilos.

No exemplo abaixo, buscamos todos os elementos (links) que possuam a classe "link-alerta" e atribuímos um alerta com a mensagem "Teste m2brDialog":

Agora vamos criar uma janela de confirmação em todos os elementos com a classe "m2brdialog-pergunta", com os botões confirmar e cancelar. Caso o usuário clique em confirmar, será redirecionado para o link www.daviferreira.com. A janela também terá a propriedade de drag and drop:

Funções condicionais

Em alguns casos, precisaremos de uma condição para exibir ou não o alerta. Por exemplo, em um formulário, exibir a mensagem de alerta apenas se algum campo obrigatório não tiver sido preenchido. É para isto que serve o parâmetro de configuração avançada condicao. Esta propriedade recebe um vetor com duas funções. A primeira representa a condição e a segunda a URL de retorno caso esta condição seja verdadeira. Vejamos como funcionaria no exemplo do formulário citado anteriormente:

<form name="frm-newsletter" id="frm-newsletter" method="post" action=""> <label for="email">Seu e-mail</label> <input type="text" name="email" id="email" size="60" /> <input type="button" id="btn-newsletter" value="OK" /> </form> <script type="text/javascript"> $(document).ready(function(){ $('#btn-newsletter').m2brDialog({ tipo : 'erro', titulo : 'Erro!', texto : 'Por favor, preencha o campo e-mail', condicao : { origem : function() { return ($('#email').val() ? true : false); }, retorno : function() { return true; } } }); }); </script>

Note que na opção de configuração condicao são passados dois valores: origem e retorno. Na origem estamos validando o campo de id email, verificando se ele foi preenchido. Caso retorne true, ou seja, caso ele esteja preenchido, o alerta é ignorado e o script executa a função retorno — no nosso exemplo um simples return true;. O alerta de erro apenas será exibido caso o campo esteja vazio.

Demo: veja o m2brDialog em ação!

Pra finalizar, uma gambiarra

Nem sempre o alerta será exibido a partir de um clique em algum link ou botão. Uma função AJAX, por exemplo, pode retornar um alerta. Neste caso, utilizamos o código abaixo:

Sim, uma tremenda de uma gambiarra! O que este código faz é criar um elemento , simular seu clique e depois destruí-lo. Vamos supor que sua função retorna um aviso de operação concluída. Seria só chamar o nosso alertaPadrao desse jeito:

E aí, curtiu? Em caso de dúvidas ou sugestões, envie um comentário utilizando o formulário abaixo. Até a próxima!

Atualizações [26/11/2008]

Código-fonte e arquivo CSS do script atualizados com correções enviadas pelo leitor Rômulo, envolvendo bugs nas versões 6 e 7 do Internet Explorer. Valeu, Rômulo!

Atualizações [08/12/2008]

A rapaziada levantou a bola nos comentários sobre como passar um código dinâmico para nossa janela de confirmação, para o caso de uma listagem com exclusão, por exemplo.

No código a seguir você confere como atingir este objetivo utilizando o método each() nativo do jQuery. O primeiro passo é criar o HTML da tabela. Note que no atributo id do estou passando o código de nossos registros.

Agora, através da chamada .each() varremos todos os elementos da tabela de resultado com a classe item-excluir e atribuímos nossa m2brDialog passando o código dos registros no Sim do botão.

Clique aqui para conferir este exemplo.

Manipulando e redimensionando imagens com PHP

Davi Ferreira — Fri, 07 Sep 2007 02:52:27 +0000

Quem nunca precisou desenvolver uma galeria de imagens? Ou até mesmo um simples módulo para destaques de um site, com o redimensionamento automático de fotos para a capa? Manipulação de imagens é uma das tarefas mais comuns em sistemas web e pode vir a ser uma tarefa chata caso toda vez você tenha que reinventar a roda e reescrever dezenas de linha de código para adequar a manipulação aos desejos do cliente.

Neste post apresento uma classe desenvolvida na agência web M2BRNET em parceria com o camarada Paulo Coutinho, exclusivamente para o tratamento e manipulação de imagens utilizando PHP e sua extensão GD.

A classe, apelidada de m2brimagem, ainda está em seu estágio inicial, mas já possui métodos para redimensionamento e conversão de formatos, entre outros. Algumas funções foram reaproveitadas e todos os devidos créditos acompanham o arquivo fonte.

Pré-requisitos

Para utilizar a classe, será necessário o download de sua última versão no link abaixo além de um servidor com php instalado com suporte à biblioteca GD.

m2brimagem.class.php

Exemplo 1

Agora vamos ao que interessa! Neste primeiro exemplo realizaremos um redimensionamento simples, mantendo a proporção da imagem com a opção crop.

teste.php

O primeiro passo é instanciar o objeto da classe imagem, carregando no construtor a imagem que será manipulada:

Logo na sequência validamos a imagem através do método valida. Caso o resultado seja 'OK', executamos os métodos para redimensionamento e geramos a nova imagem com saída no navegador. Se a imagem não existir, ou simplesmente não for um arquivo de imagem, o script retornará a mensagem de erro.

Clique aqui e veja o arquivo teste.php em ação!

Exemplo 2

Vamos agora dar uma leve incrementada em nosso arquivo teste.php, fazendo com que ele passe a receber via parâmetros as novas dimensões da imagem e o nome do arquivo, permitindo assim o redimensionamento on the fly:

A imagem abaixo está sendo redimensionada em tempo real utilizando o exemplo anterior (confira aqui a imagem original).

Exemplo 3

E que tal varrer todo um diretório, criar thumbnails e ao mesmo tempo manter as imagens originais? Alguém aí falou em galeria de imagens?

Voilá! No exemplo acima, o script varre o subdiretório galeria, procura por arquivos do tipo JPG e cria suas miniaturas dentro de galeria/thumbs/.

Exemplos rápidos

Confira alguns outros métodos da classe m2brimagem em ação:

Marca d'água

Flip

Texto / legenda

Como citei no início deste post, a classe ainda está em um estágio inicial do desenvolvimento. Diversas melhorias já estão na nossa lista. Para participar e acompanhar o desenvolvimento, enviar comentários, dúvidas e correções, acesse a página do projeto no Google Code.

Atualizações [26/11/2008]

O leitor Giolvani enviou uma implementação de um método para adicionar marcas d'dágua com posicionamento fixo. Segue o exemplo de uso:

Clique aqui para conferir todos os posicionamentos disponíveis.

Já nosso amigo CACA-[COBRA] identificou um bug no método de marcas d'água. O parâmetro alfa não estava funcionando corretamente. Na verdade, trata-se de uma limitação da biblioteca GD. Para utilizar transparência na marca d'água, é necessário usar a função imagecopymerge ao invés da imagecopy. O problema é que ela não preserva a transparência original do PNG.

A correção que fiz foi a seguinte: caso você passe um valor para alfa, a classe utilizará a imagecopymerge para criar a marca, gerando uma trasparêcia global para a imagem, mas perdendo o fundo (ou qualquer outra parte) transparente da imagem de marca original. Caso opte por preservar esta transparência original, basta passar o valor de alfa como nulo.

Para entender melhor, veja este exemplo.

Finalizando, também foram corrigidos alguns bugs, incluindo um que afetava a qualidade de imanges JPEG quando a saída era direta no navegador. O método resize (redimensionamento sem especificar crop ou fill) também foi alterado: agora seu redimensionamento não preserva a proporção, distorcendo a imagem se necessário - para manter a proporção passe somente a altura ou largura.

Interface drag and drop com jQuery

Davi Ferreira — Sun, 12 Aug 2007 04:47:14 +0000

Customização é um dos principais conceitos da web 2.0 — deixar o usuário participar ativamente em seu website, seja com conteúdo ou com um visual personalizado. Neste artigo você confere como montar uma interface drag and drop (arrastar & soltar) utilizando a biblioteca javascript jQuery, permitindo ao usuário montar uma página a seu gosto, escolhendo a disposição dos boxes de conteúdo disponíveis no site.

Este tutorial é voltado para quem domina HTML e CSS e tem, pelo menos, uma relativa noção de javascript.

jQuery

Antes de começar, vamos falar um pouco da jQuery. Trata-se de um framework que visa facilitar a programação em javascript, tornando o código mais simples, flexível e infinitamente mais elegante. Além de ser bem leve, a jQuery conta ainda com uma comunidade bastante ativa e uma vasta gama de plugins (seu ponto forte).

Veja a seguir um exemplo de código escrito em javascript convencional e uma versão do mesmo código com jQuery.

javascript:

jQuery

Notaram a diferença? Vamos entender o código jQuery, por partes:

$('#box') — o símbolo do dólar, seguido por parênteses, é o construtor da jQuery. Graças a ele você não precisa mais perder tempo digitando document.getElementById toda vez que precisar capturar um objeto HTML pelo id. O seletor $('#box') representa o elemento HTML de id box. Alguns outros exemplos de seletores são:

$('a') — pega todos os elementos do documento html;

$('div.caixa') — pega todos os elementos div que possuem a classe caixa;

$('a[@title]') — todos os elementos que possuem o atributo title declarado;

$('input[@type=checkbox]') — todos os inputs do tipo checkbox.

.css() — a propriedade .css funciona para exibir ou atribuir um valor CSS de um elemento HTML. No exemplo acima, atribuímos a cor "#ff0000" à propriedade background-color do nosso elemento de id box. Para exibir a propriedade ao invés de atribuir um valor, basta omitir o segundo parâmetro, por exemplo:

Confira algumas outras propriedades dos seletores jQuery:

.attr() — retorna/manipula os atributos de um elemento, como title, src, rel, href etc.;
.val() — retorna/manipula o campo value de elementos input;
.html() — semelhante à propriedade innerHTML do javascript convencional;
.text() — retorna somente o texto, sem as tags HTML, de um elemento.

É claro que isso não cobre quase nada do que a jQuery tem a oferecer. Para conferir a lista completa de seletores, comandos, propriedades e métodos visite o wiki do projeto em docs.jquery.com.

Arquivos necessários

A interface drag an drop que iremos desenvolver aqui utiliza os plugins de interface disponíveis neste link e nosso código será baseado no módulo Sortables.

O primeiro passo é declarar os arquivos javascript no de nosso documento HTML.

Observação: neste exemplo, estamos utilizando uma versão completa do arquivo interface.js, com todos os seus módulos, mas nada impede (e eu até recomendo) que você utilize no seu projeto final uma versão compactada apenas com os módulos necessários. Você pode conferir a lista de dependências do Sortables acessando este link.

Downloads:

Elementos da interface

Agora vejamos o que é necessário, esquecendo um pouco a parte de javascript, para a construção de uma interface drag and drop. Que elementos vamos utilizar?

No mínimo uma área para soltar os elementos arrastados;
Alguns elementos que serão arrastados e soltos nas áreas disponíveis no site;
Uma área temporária de ajuda, para indicar onde o elemento que está sendo arrastado pode ser solto;
Todo elemento arrastável deve possuir um handle, ou seja, alguma área dentro do próprio elemento onde o usuário irá clicar para arrastá-lo.

Sendo assim, definiremos as seguintes classes CSS para identificar os elementos de nossa interface:

recebeDrag
itemDrag
dragAjuda

No caso do handle não utilizaremos uma classe, mas sim um elemento específico: a tag

.
Todos os elementos com a classe recebeDrag servirão de base para os elementos arrastáveis. Estes, por sua vez, virão acompanhados da classe itemDrag. O elemento de ajuda (dragAjuda) não precisa ser declarado no documento HTML — o plugin de interface da jQuery se encarrega de fazer isso, apenas o CSS precisa ser criado. Todo itemDrag deve ainda possuir um elemento H2 para arrastá-lo. Nossa estrutura ficou assim:

E o CSS:
div.recebeDrag { min-height: 50px; } div.itemDrag { margin: 7px; border: 1px solid #ccc; padding: 7px; } div.itemDrag h2 { cursor: move; background-color: #ff3300; color: #fff; padding: 3px; } .dragAjuda { border: 3px dashed #0066cc; width: auto !important; }
Monte um documento HTML com o CSS acima e inclua quantas áreas e ítens quiser para efetuarmos nosso teste.

document.ready

Com nosso HTML pronto, agora resta apenas instanciar o elemento Sortable da jQuery. Ao invés de utilizar o bom e velho onload no body, vamos adotar uma abordagem mais elegante e garantida, já que espera todo o DOM ser carregado antes de ser executada. Ao final de nosso HTML, antes de fecharmos o , utilizaremos o seguinte código javascript:

O comando/seletor $(document).ready funciona, de certa forma, como o . Estamos solicitando que, ao carregar o documento, os elementos div com a classe recebeDrag sejam inicializados como objetos Sortables. Logo em seguida declaramos os parâmetros aceitos na nossa interface drag and drop, bem como as ações a serem executadas quando o elemento é mudado de lugar, quando tem início a ação de arrastar e quanto termina esta mesma ação.

O bloco dos parâmetros é bem simples. Primeiro, utilizando o parâmetro accept, definimos que os divs com a classe recebeDrag aceitarão apenas elementos com a classe itemDrag arrastados dentro deles. Os quatro parâmetros seguintes são referentes às classes e estilos CSS. helperclass define a classe do elemento que demarca áreas em que os divs itemDrag podem ser soltos. hoverclass e activeclass são as classes de estado active e hover para o elemento recebeDrag. Já o parâmetro opacity define o nível de transparência de um elemento, podendo variar de 0 a 1.

handle, conforme explicado anteriormente, define o elemento HTML que servirá como "link" para arrastar os divs itemDrag.

E, por fim, as ações:

onChange — qualquer função declarada neste parâmetro será executada quando um elemento for arrastado e solto, e sua posição inicial for alterada. É ideal para executar comandos AJAX para gravar a posição em banco de dados ou arquivo, ou simplesmente setar um cookie ou uma variável de sessão. No nosso exemplo estamos apenas executando a função nativa $.SortSerialize, que retorna as posições de cada elemento do recebeDrag, sem gravar nada.
onStart — é executada quando tem início o movimento de arrastar o div. Em nossa interface estamos executando o plugin de autoscroll da jQuery, para que o movimento de arrastar e soltar não fique limitado a área visível do navegador.
onStop — executada quando o movimento de arrastar é interrompido.

Interface em ação

Clique aqui para conferir um exemplo bem simples da nossa interface drag and drop. O CSS e o javascript foram todos declarados no arquivo, basta exibir o código-fonte para entender melhor o funcionamento do nosso exemplo.

Para visualizar a versão final deste teste, visite o site beta do Democracia.

Sugestões de funcionalidades

Opção para fechar e minimizar as janelas arrastáveis;
Possibilidade para adicionar ou remover boxes de conteúdo da interface.

Referências

Atualização [06/12/2008]

Muita gente me pergunta sobre isso, então aí vai um exemplo utilizando cookies para salvar o posicionamento e ordenação definidos pelo usuário.

Exemplo com cookies

Os cookies estão sendo gerenciados diretamente via javascript, através do plugin jCookie: http://plugins.jquery.com/project/cookie.

Confira o que mudou no código. Na propriedade onchange do elemento sortable adicionamos o método $.cookie() para criar um cookie relacionado à cada coluna:

E, após carregar o documento, verificamos se o cookie existe e definimos o posicionamento dos boxes nas colunas:

Simples, não?

Formulários sem tabelas

Davi Ferreira — Tue, 29 May 2007 19:31:32 +0000

Se você é um cara antenado, já deve saber que não é correto utilizar tabelas para layouts de páginas HTML. Tabelas devem ser usadas apenas para seu propósito original: tabulação de dados. Para todo o restante, como alinhamento de textos, imagens e qualquer outro elemento em uma página, existem as folhas de estilo.

Aprenda a montar corretamente um formulário web utilizando CSS, evitando o uso de tabelas para o alinhamento de textos e campos.

Vamos começar falando de tags HTML esquecidas na grande maioria dos formulários encontrados na web, são elas: fieldset, legend e label. Observe o form abaixo:

Login:

Usuário:
Senha:

Agora vejamos o mesmo formulário utilizando as tags nativas do HTML para forms, eliminando o uso da tabela:

A tag label vem acompanhada do parâmetro "for" (para) contendo o "id" do campo a que se refere (precisa ser o "id" e não o "name"). Note que alguns tipos de input já vem com uma label embutida, como os botões. Neste caso você declara a label no parâmetro value, diretamente na tag.

Fieldset indica um grupo de campos associados a um mesmo tema. No nosse exemplo, o fieldset login possui os campos usuário e senha. Finalizando, legend está para fieldset como label está para input, ou seja, é um rótulo do conjunto de campos.

O código ficou bem mais simples, mas ainda falta alinhar o texto com os campos, como no formulário com tabelas. Nada que um pouco de CSS não resolva:

Observe as possibilidades de formatação com a utilização de CSS e das tags fieldset, legend e label. O formulário fica muito mais organizado e pode ter uma apresentação muito mais agradável, basta caprichar nas bordas e espaçamentos. Hora de conferir um pouco mais sobre algumas das propriedades CSS utilizadas neste exemplo:

display: block - Como o próprio nome sugere, exibe o elemento como um bloco, permitindo maior flexibilidade na hora de alinhá-lo com outros elementos na página.

float: left - A propriedade float move um elemento para a esquerda ou direita de seu elemento “pai”. Por exemplo, um elemento com a propriedade float:left é interpretado como um bloco e é sempre alinhado à esquerda (até encontrar um outro elemento com float ou clear). Caso você esteja iniciando agora na montagem de páginas com CSS, fique ligado nesta propriedade, pois ela será muito utilizada para criação de colunas, posicionamento de imagens etc.

clear: left - No nosso caso, a tag br com a propriedade clear: left impede com que elementos com float: left sejam alinhados à sua esquerda. Funciona, basicamente, como o início de uma nova linha no que se refere a elementos flutuantes.

Legal, não? Neste link você encontra alguns exemplos avançados de formulários CSS. Espero que tenham gostado e até a próxima!

Definindo cores para seu layout

Davi Ferreira — Sun, 27 May 2007 01:58:16 +0000

Neste artigo mostrarei algumas dicas para escolher melhor as cores de seu próximo website. Além de alguns exemplos, você confere também ferramentas disponívies online, como o Kuler da Adobe, para a escolha e composição de tonalidades.

A escolha de cores para um site web representa metade de um design. Escolher as cores certas pode tomar boa parte do seu tempo na concepção e criação de um projeto. O primeiro passo é analisar o foco da empresa ou produto. Por exemplo, caso seja o site de um restaurante italiano as cores vermelhas/quentes surgem em primeiro plano. O segundo passo é agradar o cliente. Nem sempre a combinação de tonalidades escolhida por você irá cair no gosto do cliente e você poderá acabar com cores completamente diferentes da escolha inicial. Frases como "mas eu gosto daquele amarelo vibrante!" tornam o trabalho de um webdesigner bastante divertido!

Abaixo algumas das tonalidades utilizadas por mim em alguns projetos, incluindo este blog (primeira opção):

Ao escolher as tonalidades para um projeto, opte pelo menor número de cores possíveis e trabalhe em cima da logomarca da empresa/produto. Também tenha em mente a idéia de cores contrastantes, para facilitar a leitura e destacar elementos em um layout. Por exemplo, em uma palheta de três cores, uma deve estar em contraste com as outras duas. Ou seja, a palheta deve possuir uma cor suave e duas cores escuras; ou uma cor suave, uma média e uma escura.

Ferramentas online

Para facilitar a sua vida, diversas ferramentas estão disponíveis na web para a seleção de tonalidades (confira a lista de links mais abaixo). Uma delas é o Kuler, da poderosa Adobe. Desenvolvido em tecnologia Flash, o projeto funciona como uma espécia de comunidade, onde é possível compartilhar palhetas de cores e votar nas suas tonalidades preferidas. Além disso, caso você possua a suíte de aplicativos da Adobe, pode exportar suas tonalidades no formato .ASE (Adobe Swatch Exchange).

Confira outros links:

Fotos

Uma outra técnica legal para criar um tema de cores é utilizar uma foto como base. Utilizando o Photoshop, você pode adquirir facilmente uma palheta de cores utilizando o filtro mosaico em uma imagem. Confira um exemplo:

No final das contas, o que vale mais do que qualquer coisa é a sua intuição na hora de escolher o tema de cores para um website. Portanto, use sua criatividade e lembre-se: keep it simple!