Alex Weber

Ultimamente tenho trabalhando bastante com o MySQL em vários PCs diferentes e sempre tem aquele problema chato de ter que manter o banco de dados atual em todos eles, depois de cada mudança.

No início fazia tudo pelo phpMyAdmin mas depois aprendi alguns atalhos no terminal do linux que facilitam bastante a vida:

#Para os exemplos: usuário "alex" e senha "alex123"

#Exportar o banco normalmente
mysqldump -ualex -palex123 nomedobanco > nomedobanco.sql

#Exportar o banco com bzip2
mysqldump -ualex -palex123 nomedobanco | bzip2 > nomedobanco.sql.bz2

#Importar o banco normalmente (.sql)
mysql -ualex -palex123 nomedobanco < nomedobanco.sql

#Importar o banco com bzip2
bunzip2 < nomedobanco.sql.bz2 | mysql -ualex -palex123 nomedobanco

#Exportar apenas rotinas
mysqldump --routines -ualex -palex123 --no-create-info --no-data --no-create-db --skip-opt nomedobanco > nomedobanco-routines.sql

Demorei um pouco pra me acostumar mas é bem mais prático do que ter que fazer de qualquer outra forma!

Como assim?  Você quer dizer usando jQuery não é?

Não!

Cada vez que aprofundo os meus conhecimentos de Javascript me vem à cabeça o artigo do lendário Douglas Crockford, aonde ele o qualifica qualifica como  “a linguagem de programação mais incompreendida do mundo”.

E convenhamos, não é a toa!  Como o pessoal do jQuery e outras bibliotecas já descobriu, o javascript pode fazer muito mais do que validar formulários e dar alerts e confirms… O surgimento destas bibliotecas foi uma faca de dois gumes pois apesar de ser enormemente responsável pelo ressurgimento da linguagem e por torná-la popular, também fez com que poucas pessoas de fato saibam usá-lo sem o auxílio de uma biblioteca… e eu me incluo neste grupo!

Recentemente decidi tentar criar algo em js puro e gostaria de compartilhar algumas coisas.

Objetos no Javascript

Quem já trabalhou com JSON com certeza já conhece o tal do “Object Literal”:

{
    nome : 'Alex',
    idade : 26
}

Pois aí está a forma mais simples de um objeto Javascript, o tal do literal! Veja outro exemplo: (e desculpem a falta de criatividade…)

function carro(params){
    this.velocidadeAtual = 0;
    var velocidadeMax = 100;

    this.acelerar = function(){
        if(this.velocidadeAtual < velocidadeMax){
            this.velocidadeAtual += 10;
            alert('vroom');
        }
    }
}

var car = new carro();
alert(car.velocidadeAtual);
car.acelerar();

O objeto pode ser instanciado e os seus métodos e propriedades podem ser acessados pela instância... legal não é? E aí, está se perguntando porque usei var para declarar uma variável e this pra declarar a outra?

Escopo de Métodos e Propriedades
obs - eu uso os termos métodos e funções intercaladamente, assim como propriedades e atributos...

Quando se está trabalhando com objetos no javascript, apesar de não existir palavras-chave delimitadoras de escopo como public ou private, é possível obter o mesmo resultado usando this e var, respectivamente.

Tal como o PHP e outras linguagens orientadas a objetos, o this se refere à instância do objeto, até aí sem novidades... Já o var tem a sua visibilidade delimitada ao escopo atual, ou seja, se for declarada dentro da função não será visível fora dela. Neste caso, o efeito resultante é o de uma variável privada.

E finalmente...

Herança

Antes de mais nada, não dá pra frisar o suficiente que o javascript não possui um sistema de "herança clássica". Na verdade nem possui classes e os seus objetos são "prototipados", ou seja: são definidos na hora para atender a uma necessidade. Existem várias formas de obter o efeito de herança entre objetos e isto é até hoje um tema para o qual não há uma só solução. Veja um exemplo simples:

function ClassePai() {
    this.teste = function(){
        alert('teste da classe pai');
    }
}

function ClasseFilho() {

}

// agora a parte legal, vamos herdar os métodos da classe pai
ClasseFilho.prototype = new ClassePai();

// testando
var filhote = new ClasseFilho();
filhote.teste();

Em conclusão: O javascript é uma linguagem bastante subestimada e poderosa, que pode ser usada para agregar bastante valor e transformar completamente a experiência do usuário no seu site. E claro, use o jQuery, YUI, MooTools, etc... só não se esqueça como programar em javascript!

Leia mais
http://ejohn.org/blog/simple-javascript-inheritance/
http://javascript.crockford.com/prototypal.html
http://www.sitepoint.com/blogs/2006/01/17/javascript-inheritance/
http://ajaxpatterns.org/Javascript_Inheritance
http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm

Semana passada queria criar um efeito de lightbox para um trabalho e enquanto escolhia qual usaria começei a pensar no quão difícil ou não seria eu mesmo criar um plugin com este efeito.

Meu foco era criar algo leve e simples, que poderia ser utilizado sem uma linha de CSS e que não precisaria de nenhuma configuração complicada, apenas incluir e chamar o método.

Pensei em como implementaria a solução e comecei a brincar e em algumas horas saiu a primeira versão do plugin: jQuery Litebox!

Demonstração | Página do Projeto | Download

Como sempre, estou aberto a críticas e sugestões!

Demo | Download Link

A biblioteca jQuery dispensa introduções e rapidamente tornou-se a biblioteca de javascript mais usada.  Apesar de ser poderosíssima por si só, é comum e prático usar plugins para estender o jQuery.  Ao longo dos quase 2 anos em que conheço o  jQuery usei inúmeros plugins, até criei alguns e hoje possuo um pequeno arsenal de plugins que acabo usando frequentemente.

Estes são 10 dos que mais uso e gosto, espero que seja útil!

Colorbox

Outro que dispensa introduções, o lightbox é prático, elegante e resolveu de uma vez por todas a questão de popups no javascript.  É aquela famosa técnica de escurecer toda a janela do navegador e dar destaque a uma foto ou outro conteúdo.

Quem meche com javascript há alguns anos com certeza já usou algumas das várias iterações tanto do lightbox original, escrito pelo Lokesh Dhakar, quanto dos inúmeros clones, entre os quais o Thickbox se destacou bastante.

O plugin que mais tenho usado ultimamente para estes fins é o Colorbox, porque ele é leve e simples, além de oferecer uma API bem compreensiva para ser estendido. Todas os prompts do jogo de memória que fiz foram usando o colorbox.

Link: Colorbox

Cycle

Simplesmente sensacional! Este plugin (também disponível tanto na versão lite, sem efeitos adicionais) permite criar slideshows usando vários efeitos diferentes para transições.  Ele possui várias opções e é muito customizável.  É muito fácil adicionar botões para controlar o slideshow ou miniaturas das fotos que ganham foco quando elas aparecem no slideshow.  É o plugin que usei na apresentação do meu portfólio.

Link: Cycle

Datepicker

Outro plugin das quais existem várias variações, foi originalmente criado por Marc Grabanski e, posteriormente, oficialmente anexado ao jQuery UI.  A versão standalone do plugin que não requer o jQuery UI é mantida por Keith Wood, um co-autor do plugin original.

É um pequeno calendário popup que facilita demais a escolha de datas no preenchimento de formulários.  Ele é fácil de customizar usando CSS e também de traduzir trocando as variáveis no código javascript.

Link: Datepicker

Easing

Um dos plugins mais subestimados na minha opinião, permite adicionar easing às animações do jQuery.  O que isto quer dizer?  Simplesmente, permite “ajudar” as animações customizadas, modificando-as de várias maneiras. O jeito mais fácil de entender realmente é olhando os exemplos.  O easing é tipicamente utilizado em conjunto com outros plugins.

Link: Easing

Easytip

Nada mais é do que um tooltip alternativo em vez daquele amarelo padrão da maioria dos navegadores.  Incialmente usa o atributo title do elemento é muito fácil de customizar.  Este plugin é do tipo “instalar e esquecer ” e é muito útil quando se quer esta funcionalidade mas não há tempo para desenvolver algo mais elaborado.

Link: Easytip

Hoverintent

Outro plugin na mesma categoria do Easing; é um que não faz uma diferença gritante imediata mas acrescenta aquela coisa sutil a mais que agrega bastante valor ao trabalho.  O que este plugin faz é tentar adivinhar o que o usuário pretende fazer com o mouse (no bom sentido).

Ele é derivado do método hover() do jQuery mas permite um grau bastante fino de customização.  Serve para suavizar eventos do tipo mouseOver e mouseOut ao calcular a velocidade do movimento do mouse para determinar se está apenas passando pelo elemento ou se de fato parou em cima.

Link: Hoverintent

jqwysiwyg

Este plugin com nome quase impronunciável é utilizado para criar caixas de texto editáveis com controles de edição.  Pense nele como um TinyMCE ou CK/FCKEditor lite. O plugin é leve e prático para quando se quer dar mais liberdade para o usuário editar um campo mas não precisa necessariamente de algo tão complexo quanto os dois editores mencionados.

Link: jqwysiwyg

LiveQuery

Sem dúvida o plugin mais revolucionário e útil que já encontrei!  Ele permite delegar eventos a elementos que ainda não existem no DOM.  Ou seja, é particularmente útil quando está lidando com elementos criados dinamicamente ou com elementos que são removidos e depois adicionados de volta à pagina. Você pode estar se perguntando qual a utilidade deste plugin já que a partir da versão 1.3 o jQuery introduziu o método live() que faz exatamente isto… Em primeiro lugar o método live foi baseado neste plugin!  E em seguindo lugar o live() permite apenas um subconjunto dos métodos do jQuery e também não permite delegar um callback que não seja um evento.

Complicou?  Fique tranquilo, é bem mais simples do que parece!  Só mantenha em mente quando lidando com elementos dinâmicos que se o live() não funcionar como esperando, o LiveQuery pode ser a solução!  Usei este plugin bastante nos jogos de memória e campo minado que fiz.

Link: LiveQuery

prettyPhoto

O que!  Mais um clone de lightbox??  Pois é!  A razão pela qual uso tanto este quanto o Colorbox e o motivo de incluir ambos nesta lista é simples: cada um se adequa melhor a uma tarefa específica.  O Colorbox é melhor para diálogos modais e pode ser estendido facilmente, já o prettyPhoto, como indica o nome, é ideal para mostrar fotos (e vídeos, flash, etc).

O prettyPhoto é um plugin mais bonito e possui efeitos legais que agregam valor neste contexto.

Link: prettyPhoto

Superfish

De longe o melhor plugin para criar menus que já usei.  Ele facilita demais a criação de menus drop-down que funcionam em qualquer navegador.  O plugin é muito flexível e pode ser usado em conjunto com o HoverIntent (descrito acima), SuperSubs (para submenus de larguras variáveis) e também o bgiframe para evitar problemas de z-index no Internet Explorer 6.

Porém, o plugin não faz mágicas e é necessário criar o HTML e CSS direito para que funcione perfeitamente, mas como há vários exemplos no site do plugin, fica fácil!

Link: Superfish

É isso!

Estes são alguns dos plugins que eu mais uso, e você, quais plugins considera indispensáveis?

Demo | Download Link

Finalizei hoje a provável versão final do plugin de jQuery CoolInput!

Para quem ainda não conhece, veja a página do projeto.

A nova versão traz a possibilidade de especificar a dica (ou ‘hint’) manualmente sem ter que usar algum atributo e também permite que esta mesma configuração seja feita de uma maneira mais prática.

Como sempre, estou aberto a críticas e sugestões!

Cliente: Assirati

Trabalho: Desenvolvimento do novo site da Assirati a partir da identidade visual criada pelo Jumbo

Data: Maio 2009

Características:

• Seção de clientes dinâmica com jQuery
• CSS e Javascript 100% cross-browser
• Design by Jumbo

Link: www.assirati.com.br

O grande inimigo dos desenvolvedores web é o Internet Explorer, devido ao seu suporte incompleto e má implementação dos padrões de CSS.

O Internet Explorer 8 até que melhorou bastante em relação às versões antigas mas ao invés de facilitar a nossa vida, apenas a complicou porque agora não basta fazer ajustes gerais para o IE; muitas vezes é necessário ajustar o CSS tanto para o IE8 quanto para o IE7 e 6.

Agora imagine uma situação em que não fosse necessário usar condicionais e hacks, em que servíssemos apenas um stylesheet e funcionasse perfeitamente em todos os navegadores.  Parece sonho né?  Mas nao é!

Com o PHP e algumas regras no Apache é possível criar folhas de estilo dinâmicos e resolver todos estes problemas.

Li um excelente artigo estes dias que explica todo este processo de maneira bastante compreensiva, vale a pena conferir!

Link: Supercharge Your CSS with PHP Under the Hood

Demo | Download Link