E como todos já devem  estar sabendo, eu fui o feliz ganhador do Macbook no Concurso do Blogblogs, e estava esperando ele chegar para migrar tudo e voltar a escrever com tudo.

Para acompanhar o backstage dos posts e outras generalidades me siga no twitter.

Umas das grandes vantagens do jQuery, é que ele permite que toda a programação em javascript seja feito separado do HTML, sem nem mesmo a necessidade de chamar eventos ou escrever trechos de códigos diretamente em páginas HTML. Isto ajuda a manter o conceito de desenvolvimento em camadas, permitindo que o conteúdo (HTML), os estilos (CSS) e os comportamentos (Javascript) fique em arquivos separados.

Para começar a utilizar o jQuery em seus projetos, é necessário basicamente de dois arquivos: um é  o motor do jQuery e possui cerca de 50 Kb, e pode ser baixado no site oficial do projeto  (ou diretamente por este link) e o outro é um arquivo em branco, que eu geralmente chamo de scripts.js, que será o arquivo que nós utilizaremos para escrever os códigos em javascript. Feito isso a última coisa que precisa ser feito é importar os dois scripts para a página HTML que o jQuery será utilado, da seguinte forma:

Seletores

Equeça os terriveis getElementBy…  O jQuery possui o simpático atalho $(”seletor”) que permite selecionar elementos DOM com os mesmos conceitos do CSS, basta trocar o argumento seletor pelo seletor em CSS que será selecionado e em seguida passar o método que você deseja utilizar neste elemento, como podemos ver no exemplo abaixo a utilização do atalho addClass que adiciona uma nova classe ao elemento.

Além dos seletores por herárquia, o jQuery também possui seletores personalizados que conseguem filtrar elementos de uma forma mais específica do que com apenas CSS, como selecionar apenas o primeiro de uma lista, ou selecionar apenas os elementos com um determinado atributo, entre outros. Geralmente os seletores personalizados são declarados da seguinte forma:

Neste exemplo foi utilizado o seletor personalizado :first que seleciona apenas o primeiro li da lista.

O Evento onLoad(), Agora é document.ready()

Para evitar erros, é recomendado que os códigos em javascript só comecem a ser executados depois que todos os elementos da página terminarem de ser carregados, por isso o jQuery possui o método document.ready(), que permite passar uma função com arugmento que será chamada após a página ser terminar de ser carregada. Ele é declarada da seguinte forma:

O código acima é um exemplo simples da utilização da jQuery, onde na primeira linha, o método document.ready() chama a função passada a ele como parâmetro, como explicado à cima, e na segunda linha o elemento body foi selecionado e adicionado a ele um elemento <p> imprimindo “Olá Mundo” na tela.

A API do jQuery

O jQuery também possui um conjunto de métodos que facilitam acessar as propriedades dos objetos DOM podendo: modificar a Aparência de elementos HTML com CSS, responder as interações do usuário, obter informações sem refresh ou criar Animações utilizando com a ajuda do CSS. Grande parte dos métodos do jQuery são cross-browser, ou seja, o código terá compatibilidade entre os navegadores.

Assim como o Javascript, o jQuery também segui os conceitos de dot syntax, por isso, para acessar as propriedades ou métodos de um objeto DOM é necessário utilizar um ponto para acessar cada método ou propriedade. No exemplo abaixo podemos ver este conceito em prática:

Na segunda linha do código acima, os elementos p foram selecionados utilizando o seletor de elementos do jQuery ($()) para ser atribuido uma borda vermelha de 1px neste elemento.

Eventos com o Mouse  (Bind)

Este artigo irá abordar apenas os eventos de mouse, pois eventos merecem um artigo aparte. O evento Bind é utilizado para chamar uma função quando determinada ação do mouse for feita sobre um elemento. A sua estrutura é a seguinte $(seletor).bind(tipo, função), a princípio ela parece ser um pouquinho mais complicado, mas é tão simples quanto os outros atalhos, basta substituir tipo, pelo tipo de evento que será tratado e função, pela função que será chamada, como podemos ver no código abaixo:

Na segunda linha do código acima, os elementos a contidos em elementos p foram selecionados e passado a eles que quando eles receberem uma ação do tipo click a função é chamada e ela faz com que  ela próprio (this) desapareça lentamente.

Além do evento click, o jQuery possui muitos outros tipos de eventos, mas como este artigo é apenas um passagem rápida sobre as principais funcionalidades,  os tipos de eventos,  e as outras funcionalidades fascinantes do jQuery terão seus artigos específicos, para serem melhores exploradas.

Para que não fique muito extenso, este artigo acabou sendo dividído em 3 posts, sendo o próximo uma lista das redes sociais brasileiras sobre design.

Abaixo eu procurei citar as 5 principais comunidades de design que eu sinto afinidade:

Behance

Com uma interface extremamente simples e elegante, Behance.net se caracteriza pela frequência das atualizações e alta qualidade dos trabalhos publicados entre as páginas de seus usuários, além de manterem a Behance Magazine, uma revista online que tem como objetivo publicar artigos, insights e entrevistas para ajudar profissionais criativos.

Computer Love

Desde 2006 a plataforma social Computerlove permiti que designers não só divulgem trabalhos ou conheça novos tabalhos, mas também escrevão artigos por meio de um blog e publiquem suas imagens por uma galeria de fotos e sites favoritos no bookmarks, tudo centralizado na página pessoal do usúario no serviço.

FFFFOUND!

Encontrou uma imagem intressante? Compartilhe com outras pessoas no FFFOUND!, uma rede social que tem o objetivo de organizar as imagens mais inspiradoras da internet e o serviço já conta quase 26.000 trabalhos publicados, tornando umas das melhoras fontes de inspiração da internet.

Colour Lovers

A comunidade Colour Lovers permite a designers compartilharem suas experências, estudos e influências de cores com outros membros, e exemplificar estes coceitos. Além de terem criado o Copaso: um avançado construtor e organizador de paletas de cores.

Humble Voice

A rede social Humble Voice não é tão popular quanto as outras à cima, mas seu conteúdo é muito bem divídos em 5 principais categorias: música, video, fotografia, Arte/Design e “Redação Publicitária” e os trabalhos publicados são de ótima qualidade.