Top rated never dies » Domênico Citrângulo

jQuery para iniciantes – Métodos

Domênico Citrângulo — Mon, 25 Feb 2013 12:35:36 +0000

Porém, antes de começar a falar sobre métodos, vamos relembrar como funciona a sintaxe básica jQuery, pois ela será importantíssima para entender como interagir com os elementos da página:

Como vimos nos posts anteriores, no exemplo acima, a primeira parte da linha é responsável por selecionar o elemento com o qual queremos interagir. Nesse caso, selecionei o elemento , ou seja, todo o corpo da página. Logo depois, utilizo o método .css() para alterar uma propriedade css deste elemento. Este tipo de sintaxe é bastante comum quando trabalhamos com jQuery. Sobre a primeira parte, os seletores, nós já falamos. Agora vamos à segunda etapa, os métodos.

Exemplo 1

Veja a demonstração abaixo. Navegue pelas abas Javascript, HTML e Result para ver todo o código e o live preview:

Veja que no exemplo acima, na aba Javascript [claro], usamos 2 seletores e 2 métodos jQuery:

$('#botao1').click(function () {

$(‘#botao1′) – aqui usamos o seletor ‘#botao1′ para selecionar o elemento HTML Mudar a cor do background
.click(function () { – este método nos ajuda a vincular [bind] uma função ou método [neste caso, a mudança de background] ao evento de clique do objeto selecionado ['#botao1'].

$('body').css('background-color', '#f90');

$(‘body’) – aqui usamos mais uma vez um seletor jQuery, agora para selecionar a tag
.css(‘background-color’, ‘#f90′); – o método .css() é usado para alterar propriedades CSS do elemento selecionado [].

Perceba que o método .css() recebe 2 parâmetros. O primeiro é o nome da propriedade que queremos alterar [background-color], o segundo é o valor que queremos atribuir a esta propriedade [#f90];

Exemplo 2

OK, alterei a cor do background, e daí? Daí que com esta mesma sintaxe você pode usar vários outros métodos jQuery.
Veja mais um exemplo:

O exemplo acima usa o mesmo seletor do primeiro código para vincular uma função ao evento clique do nosso botão, mas depois utiliza seletor e método diferentes.

$('#botao1').click(function () {

$(‘#botao1′) – aqui usamos o seletor ‘#botao1′ para selecionar o elemento HTML Ocultar/Mostrar título
.click(function () { – este método nos ajuda a vincular [bind] uma função ou método ao evento de clique do objeto selecionado ['#botao1'].

$('h1').slideToggle();

$(‘h1′) – seletor jQuery ‘h1′ selecionando a tag

.slideToggle(); – o método .slideToggle() aplica uma animação do tipo slide ao elemento selecionado [h1] ocultando-o se ele estiver visível ou exindo-o se estiver oculto.

Usamos exatamente a mesma sintaxe do primeiro exemplo, alterando apenas o elemento com o qual estamos trabalhando [de body para h1] e o método utilizado [de .css() para .slideToggle()].

Exemplo 3

Veja mais este exemplo, agora utilizando o método .append():

Aqui, repetimos mais uma vez a primeira linha, vinculando uma função ao evento clique do botão, mas usamos um outro método dentro da função:

$('ul').append('Outro item
');

$(‘ul’) – seletor jQuery ‘ul’ selecionando a tag

.append(‘
Outro item
’);

.append()

Acima, usamos o método .append() para adicionar itens a uma lista. Veja que a sintaxe é exatamente a mesma dos outros exemplos.

Conclusão

Apesar da sintaxe extremamente simples e reutilizável [os exemplos acima usam praticamente a mesma sintaxe], podemos usar jQuery para as mais diversas tarefas e aplicações. Acima, mostrei apenas 4 (.click(), .css(), .slideToggle() e .append()) de dezenas de métodos disponíveis na biblioteca. Não perca tempo e comece a pesquisar mais métodos na documentação da jQuery. Você irá descobrir que há muitos deles que pode começar a usar agora mesmo e que com certeza facilitarão a sua vida.

Quer saber mais?

Confira os posts anteriores da série jQuery para iniciantes:
- jQuery para iniciantes
- jQuery para iniciantes II – Sintaxe e seletores

Como criar QR Codes dinamicamente

Domênico Citrângulo — Sat, 09 Feb 2013 14:37:52 +0000

Download

Demo

E com isso, novas necessidades surgem. Uma delas é a de criar QR codes dinamicamente. Imagine por exemplo um display eletrônico que exibe várias ofertas de produtos para clientes que estão na rua, no metrô ou em um estádio de futebol. Ao invés de mostrar o endereço de um link, por que não mostrar também um QR code? Ao invés de ter que digitar a url, tudo que os espectadores precisam fazer é apontar o celular para o código para serem então direcionados ao site do anunciante.

Quando preciso usar QR codes dinamicamente em projetos web, uso o QR Code Generator for JavaScript criado por Kazuhiko Arase. Veja como usá-lo abaixo:

function createQRCode(text, containerId, typeNumber) {
	var qr = qrcode(typeNumber || 4,'M'); // errorCorrectLevel = M
	qr.addData(text);
	qr.make();
	document.getElementById(containerId).innerHTML = qr.createImgTag();
};
createQRCode('http://www.toprated.com.br', 'exemplo1', 8);

No exemplo acima, criei uma função simples que recebe 3 parâmetros:
text é o texto (string) que será convertido para QR Code
containerId é o id do elemento onde será inserido o QR Code
typeNumber é o número de pontos, o que também influencia no tamanho da imagem e quantidade de caracteres da suportados

A vantagem dessa biblioteca é a independência de outros frameworks, o que faz com que você possa usá-la em conjunto com jQuery, Mootools, ou qualquer outra. Além disso, esse método não necessita de qualquer outra requisição HTTP, ao contrário da Google Chart API, que também pode ser usada para criação de QR Codes.
Além de JavaScript, há versões Java, Ruby, PHP, Python e AS3.

Mas se você é um adepto do jQuery, pode utilizar o wrapper jQuery.qrcode criado por Lars Jung, que deixa tudo ainda mais simples, como a possibilidade de usar cores:

jQuery("#exemplo2").qrcode({
	width: 200,
	height: 200,
	color: '#3a3',
	text: 'http://www.toprated.com.br'
});

Marcar e desmarcar checkboxes usando jQuery

Domênico Citrângulo — Sun, 27 Jan 2013 13:53:29 +0000

jQuery 1.6+

Nas versões jQuery 1.6 e superiores, use s função .prop() para alterar a propriedade “checked” do checkbox, assim:

//marcar
$('.seuCheckbox').prop('checked', true);
//desmarcar
$('.seuCheckbox').prop('checked', false);

*: observe que neste exemplo estamos manipulando o checkbox através da sua classe “.seuCheckbox”.

jQuery 1.5 e anteriores

Use a função .attr() para marcar a caixa de seleção, alterando o valor do atributo “checked”. Desmarque o checkbox removendo este atributo:

//marcar
$('.seuCheckbox').attr('checked','checked');
//desmarcar
$('.seuCheckbox').removeAttr('checked');

*: observe que neste exemplo estamos manipulando o checkbox através da sua classe “.seuCheckbox”.

A função .prop() foi adicionada a partir da versão 1.6, por isso precisamos usar a .attr() no jQuery 1.5-.

(Via)

Como obter o valor de query strings via javascript

Domênico Citrângulo — Sun, 27 Jan 2013 13:33:32 +0000

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Basta passar o nome do campo que você quer resgatar como parâmetro da função. Por exemplo, para a url: http://www.toprated.com.br/?nome=MeuNome&idade=25

getParameterByName('nome');

A função retornará “MeuNome”.

Curso de Design, Lição 2 – Encontre seu estilo

Domênico Citrângulo — Sat, 16 Jun 2012 21:58:38 +0000

Porém, com o tempo, é preciso encontrar a sua especialidade ou um estilo próprio. O seu estilo é aquele em que você se sente mais à vontade e no qual seu trabalho flui com maior naturalidade. Nem sempre é fácil, e ele não aparece de uma hora para outra. São necessários estudo e experiência para amadurecer e aperfeiçoar seu estilo. A chave para acelerar esse processo é sempre manter um olhar critico sobre seus trabalhos. Em retrospectiva, quais ficaram melhores? Em quais deles você teve mais dificuldade e o resultado não foi tão bom? Quais tiveram uma melhor repercussão? Por que?

Identifique seus pontos fortes e busque dar foco a eles. Identifique aquelas áreas que não são a sua praia e não passe a vida tentando ser aquilo que você não é.

Algumas pessoas são incríveis ao trabalhar com tipografia, outras ilustram muito bem; há profissionais que dominam usabilidade e constroem experiências perfeitas de navegação, outros manipulam imagens e criam maravilhas no Photoshop. Sem falar naqueles que criam animações e filmes 3D absurdos. São habilidades espetaculares e super valorizadas, mas você não precisa fazer tudo isso ao mesmo tempo. Ninguém faz.

Muitas vezes, amigos e pessoas que visitam o Top Rated me perguntam sobre que curso de Design devem fazer ou qual a melhor faculdade de design na minha opinião. Nem sempre tenho uma resposta para essas perguntas e por isso comecei a pesquisar sobre o assunto e perguntar para colegas qual o melhor curso de Design na opinião deles. Conversando sobre o assunto percebi que existem grandes cursos por aí, com ótimos professores e conteúdo. Porém, percebi também que existem algumas coisas, alguns macetes, que só se aprende na prática, no dia-a-dia. Por isso criei esta série de posts, com a qual espero ajudar aqueles que estão começando estudar ou já estão estudando Design.

Download: 5 Ótimos Players de Vídeo HTML5

Domênico Citrângulo — Fri, 08 Jun 2012 17:22:55 +0000

HTML5 Video Player with Multiple Skins

Demo – Download

Vplayer – Video player with Gallery

Demo – Download

HTML5 Blue Video Gallery

Demo – Download

HTML5 Video Gallery with Live Playlist

Demo – Download

Tejas – Premium HTML5 Video Player

Demo – Download

Curso de Design, Lição 1 – Copie

Domênico Citrângulo — Thu, 07 Jun 2012 16:30:19 +0000

É óbvio que essas pessoas não vão vender aquele quadro como sendo criação sua. São alunos, estudantes, que usam as grandes obras para entender como os profissionais conseguiram criar aquelas imagens. Ao copiar grandes telas, percebem cada nuance, cada tonalidade de cor, contraste e textura usados. São detalhes tão minuciosos que passam despercebidos e só conseguimos identificá-los ao tentar reproduzi-los.

Pois é, copiar é uma das melhores maneiras de aprender. Não é à toa que grandes pintores muitas vezes começavam a carreira como alunos de outros mestres e estudavam copiando as telas de seus mentores.
Portanto, não tenha vergonha de copiar. Procure referências, grandes trabalhos e layouts e tente copiá-los. Copie cada detalhe, entenda as cores usadas, os espaçamentos, contraste, bordas, como cada elemento se relaciona com o todo. Você vai perceber que ao tentar reproduzir aquela criação, vai aprender muito mais do que conseguiria apenas observando-a.

Por fim, o mais importante: assim como os estudantes de artes não vendem os quadros copiados, não use o layout ou peça que você copiou em projetos seus. A invés disso, tente criar algo novo a partir dessa experiência. Experimente usar as técnicas que você aprendeu reproduzindo outros trabalhos em momentos e situações diferentes, combinando elementos de peças e layouts diferentes. Essa é uma das maneiras mais divertidas de se trabalhar.

Tutoriais para Photoshop: 48 ótimos efeitos para fotos

Domênico Citrângulo — Tue, 03 Apr 2012 13:34:15 +0000

Aplicando efeito "Lomo"

Trabalhando com blendings e exposure

Tutorial Tilt-shift avançado

Técnica do falso Tilt-shift

HDR usando layers

Imagens HDR de alta qualidade

Photoshop HDR Tutorial

Usando a funcionalidade HDR do Photoshop

Vignette 2.0

Como usar brilho para dramatizar suas fotos

Melhorando paisagens

Usando máscaras para aprimorar imagens de paisagens

Correção de cor

Correção de cor via Levels

Ajuste de cor seletivo

Como usar contraste para aprimorar as cores de uma imagem

Contraste local

Nitidez real usando Unsharp Mask

Técnicas para uso do Unsharp Mask

Reduzindo ruído de imagens escuras

A ferramenta Levels

Usando as curvas

Técnicas de nitidez avançadas

Aplicando efeitos de luz

Como combinar imagens

Retoque facial

Técnica avançada para colorir imagens

Removendo objetos de fotos

Colorindo imagens preto e branco

Usando o Channel Mixer

Ajuste rápido para fundos estranhos

Envelhecendo imagens

Suavizando texturas de pele

Combinando smart objects para obter efeitos avançados

Efeito Infravermelho

Aplicando efeito Tilt-shift simples

Aplicando contraste em partes específicas da imagem

Nitidez controlada

Composições

Gaussian Blur

Como funciona o Lens correction

Vanishing Point Filter

Técnicas simples de retoque facial

4 Técnincas simples para criar imagens criativas

Método manual para coloração de imagens preto e branco

A maneira correta de converter imagens coloridas em preto e branco

Brincando com as cores dos cabelos

Criando uma imagem do pôr-do-sol

jQuery para iniciantes – Sintaxe e seletores

Domênico Citrângulo — Sun, 01 Apr 2012 23:08:36 +0000

Sintaxe jQuery

Chamamos esse modo de escrita de sintaxe básica do jQuery. Vamos relembrar, pois é importante entender como ela funciona:

Então podemos dizer que quando usamos o jQuery, sempre selecionamos um dado elemento da página e aplicamos um método a este elemento. Isso significa que boa parte da sua habilidade em programar e desenvolver usando o jQuery depende da sua capacidade em selecionar corretamente os elementos da página. É isso que vamos aprender agora.

Seletores

É possível usar os seletores jQuery para selecionar elementos de várias maneiras diferentes. As três principais são:

- Por tag: Seleciona todos os elementos da mesma tag. Exemplos:
$(‘p’) : Seleciona todos os

da página;
$(‘div’) : Seleciona todos os

$(‘a’) : Seleciona todos os

- Por class: Seleciona todos os elementos da mesma classe. Exemplos:
$(‘.linkmenu’) : Seleciona todos os elementos da classe “linkmenu” (Ex. );
$(‘.subtitulo’) : Seleciona todos os elementos da classe “subtitulo”
$(‘.banner’) : Seleciona todos elementos da classe “banner”;

- Por id: Seleciona o primeiro elemento que tenha o id especificado. Exemplos:
$(‘#menu’) : Seleciona o primeiro elemento que tenha o id “menu” (Ex.

);
$(‘#titulo’) : Seleciona o primeiro elemento que tenha o id “titulo”
$(‘#rodape’) : Seleciona o primeiro elemento que tenha o id “rodape”;

Combinando seletores

Outra coisa que você pode fazer é combinar esses diferentes tipos de seletores, como você já faz no css.

Sempre que você colocar um seletor na frente de outro separado por um espaço significa que deseja selecionar dentro do primeiro. Por exemplo:
$(‘#menu a’) : Seleciona todos os que estiverem dentro de #menu. Se a página tiver outros fora do #menu, estes não serão selecionados.;
$(‘#menu .sel’) : Seleciona todos os elementos de classe “sel” que estiverem dentro de #menu;
$(‘div #link’) : Seleciona os elementos de id “link” que estiverem dentro de um

;

Se você não separar as palavras, selecionará os elementos que contenham a classe ou id especificado:
$(‘div.sel’) : Seleciona apenas as

que tiverem a class “sel”;
$(‘div#link’) : Seleciona apenas as

que tiverem o id “link”;

Estas são as formas mais básicas dos seletores jQuery. Existem muitas outras opções, operadores e maneiras de selecionar elementos na página, mas por enquanto vamos ficar com essas. Garanto que já é possível fazer coisas incríveis utilizando apenas estes seletores.

No próximo

Seletores são importantes, mas como disse no início, eles representam metade da ‘mágica’do jQuery. No próximo post falarei sobre os métodos jQuery, usados para manipular os elementos que selecionamos.

jQuery para iniciantes

Domênico Citrângulo — Thu, 09 Feb 2012 23:04:11 +0000

Antes de mais nada

Para começar, pare de pensar em jQuery como um monstro desconhecido. Por enquanto, pense apenas que é um arquivo JavaScript (.js) que você deve incluir na página, dessa forma:

Pronto, você já está usando jQuery na sua página. Bom, na verdade você ainda não está usando porque ainda não fez nada com ela, mas todos os seus métodos já estão disponíveis caso você queira usar.

O que é jQuery?

Tecnicamente falando, podemos dizer que jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML.
Agora, falando praticamente vamos ver o que isso significa:

jQuery é uma biblioteca JavaScript…

Parece estranho pensar em um arquivo como uma biblioteca. Porém é exatamente isso que ele é. Mas ao invés de livros, essa biblioteca tem métodos. Muitos métodos. E cada um desses métodos foi criado para cumprir uma determinada tarefa. Por exemplo, existem métodos para alterar o valor de um campo de formulário, para inserir um novo elemento na página, para aplicar um efeito de animação em um elemento, etc… (Explicação: pense em elemento como sendo cada tag html dentro da sua página: por ex:

, ).

Agora algo importante para ter em mente: jQuery não irá fazer com que tudo funcione automaticamente para você. Ele não faz mágica. Você ainda terá que escrever o código javascript e pensar em como fazer cada coisa… Aí você pergunta: então pra quê que eu vou usar esse treco se vou ter que saber escrever javascript de qualquer jeito?!?! Isso leva à segunda parte:

jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts…

A primeira grande vantagem em usar o jQuery é que todos os seus métodos [ok, não todos, mas 99%] foram criados para funcionar em qualquer browser (IE, Firefox, Chrome, Safari, Opera, …) e já foram testados, alterados e corrigidos um milhão de vezes. É isso que esse “cross-browser” (entre browsers) quer dizer: você pode usar os métodos jQuery sem se preocupar se o que você está fazendo vai funcionar no IE ou no Safari. Se funcionou em um, funciona em todos [como disse, em 99% dos casos].

A segunda grande vantagem é que os métodos jQuery são muito simples de usar e requerem muito pouco código. Algo que precisava de 10, 20 linhas de código com javascript ‘cru’, pode ser feito com 2, 3 linhas usando os métodos jQuery.

jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML

Para fechar, apenas tenha em mente que esse “client-side” significa que tudo o que vc faz com o jQuery acontece no computador do usuário, mais especificamente no browser. Isso por que o jQuery é uma biblioteca javascript, e o javascript sempre roda no browser do usuário, diferentemente de linguagens como o PHP ou ASP que rodam no servidor onde o site está hospedado.

Primeiros passos

Para começar, vamos fazer alguma testes bem básicos para entender como jQuery funciona. A primeira coisa a fazer é importar a jQuery para sua página. Como disse no início, para fazer isso basta usar essa linha:

Ok, agora temos todos os métodos jQuery à nossa disposição e podemos começar a escrever nosso código. Como primeiro exercício, vamos criar um botão que quando clicado usará um método jQuery para alterar uma das propriedades do elemento dessa página. Vou colocar o código completo abaixo e explicá-lo linha por linha:

Mudar background-color

Bem, vamos ver o que o código acima faz e entender os primeiros métodos jQuery.

Mudar background-color

A primeira linha não tem segredo. É apenas o nosso botão, que na verdade não passa de um link ;

Selecionando elementos com $()

$('#botao_exercicio1').click(function(){

Toda vez que você ver um $() no código, entenda como jQuery(), isso porque o sinal ‘$’ nada mais é que uma abreviação de ‘jQuery’, o que é ótimo pois assim você não precise ficar escrevendo ‘jQuery’ toda hora (como eu acabei de fazer).

Dentro dos parênteses colocamos sempre um ‘seletor’, usado para indicar com qual elemento queremos trabalhar. Nesse caso, vou selecionar o botão no qual quero colocar a ação de mudar a cor de fundo da página. Existem várias maneiras de selecionar um elemento html, uma delas é usando o id do elemento, colocando ‘#’ na frente dele, exatamente como fazemos no CSS: $(‘#botao_exercicio1′). OK, selecionei o botão que tem o id=botao_exercicio1. Agora o que vou fazer com ele?

.click(function(){

Depois de selecionar nosso botão, vou usar mais um método: o click(). Este método é usado para anexar alguma ação (método) toda vez que o elemento selecionado for clicado. Chamamos esse tipo de ligação, entre um evento (clique) e uma função, de listener.

Então não se perca: importamos o jQuery para a página, criamos um botão, selecionamos o botão usando $(“#botao_exercicio1″) e agora anexamos um listener ao evento click do botão. Agora vamos definir o que acontecerá quando o botão for clicado.

css(‘background-color’, “#f90″)

$('body').css('background-color', "#f90");

A primeira parte dessa linha você já deve ter entendido. Estou mais uma vez usando o $() para selecionar um elemento da página, desta vez o . Perceba que dessa vez não usei o sinal de “#”, porque não preciso de um id para selecionar o elemento que eu quero. Só existe uma tag na página então posso usar apenas o nome da tag.

Depois de selecionar o , uso o método css() para alterar uma propriedade CSS do elemento. Obviamente, nesse caso vou alterar a propriedade background-color. O método recebe dois parâmetros: a propriedade que será alterada (background-color) e o valor que quero dar à propriedade (#f90). Perceba que eu poderia usar o mesmo código para mudar qualquer propriedade CSS que quisesse. Depois basta fechar os parênteses e chaves que ficaram abertos.

Teste o que acabamos de fazer:

Mudar background-color do

Voltar ao background original

Observações

- Perceba que nesse exemplo estamos importando o jQuery de um servidor do Google (https://ajax.googleapis.com). O Google disponibiliza a jQuery e várias outras bibliotecas gratuitamente e você pode usar esse mesmo endereço no seu site. É o que chamamos de CDN (Content Delivery Network).

- Você deve sempre importar a jQuery antes de escrever seu código JS. Caso contrário, seus métodos não estarão disponíveis.

- Note ainda que escrevemos o código JS depois do elemento que estamos selecionando (o botão), caso contrário, ele também não estaria disponível. Falaremos mais sobre isso no próximo post.

Termos

Método – método é um trecho de código escrito com o intuito de executar uma tarefa específica. Cada método tem um nome que usamos para executá-lo. Métodos também podem receber parâmetros, que serão usados em sua execução. Em geral, um método é bastante similar a uma função, com 2 diferenças principais:
- um método recebe implicitamente o objeto do qual foi executado
- pode operar utilizando dados e outros métodos contidos dentro da classe do objeto.

No próximo

No próximo post vamos falar um pouco mais de seletores e sintaxe jQuery.