Profissionais TI - Pra quem respira informação » JQuery

Desenvolvimento web: 5 motivos para aprender jQuery

EstiloFacil — Mon, 11 Apr 2011 12:42:22 +0000

Atualmente quem trabalha com web se vê cada vez mais necessitado de utilizar e aprender novas ferramentas.

Muitas podem ser consideradas supérfulas, porém, algumas são essenciais pra quem deseja fazer um bom trabalho e uma delas é a jQuery.

jQuery pode parecer complicada e até ser muito código para aprender à primeira vista, mas como o próprio slogam diz: “write less, do more”.

Vou apresentar agora 5 motivos para você aprender jQuery e finalmente ajudar a tornar a web um lugar melhor:

1 – Produza mais – jQuery te permite fazer coisas que normalmente se digitaria muito pra fazer usando javascript comum. Com o objeto jQuery ($) podemos selecionar muitos objetos da página ao mesmo tempo e tratá-los de acordo com nossa vontade. Veja alguns exemplos:

Ao levar o mouse no link com id “palavra”, tornar visível a div com id “dica”:

objlink = document.getElementById("palavra");
objlink.onMouseOver = function(){
document.getElementById('dica').style.visibility = 'visible';
}

O mesmo código em jQuery:

$('a#palavra').mouseover(function(){
$('div#dica').show();
});

2 – Efeitos especiais – A biblioteca jQuery já vem com muitos efeitos prontos, além dos que você já pode utilizar, tais como o método animate(), show(), hide(), fadeIn() e fadeOut(). Utilize esses métodos pra dar um ar mais profissional ao seu site.

3 – Modularização – jQuery oferece um grande suporte à modularização, graças à possibilidade de criar plugins. Com isso podemos facilmente aproveitar nossos códigos mais utilizados, como também utilizar centenas de plugins prontos disponíveis na net, o que nos poupa um grande tempo.

4 – Validações de formulários – Quem trabalha com web sabe que não existe coisa mais chata que validar grandes formulários. Imagine dizer para o usuário que cada um dos 60 campos do formulário é obrigatório, que alguns precisam validar email e outros precisam validar se o formato é um telefone válido. Isso parece ser uma grande dor de cabeça, mas graças à alguns plugins do jQuery, tudo isso pode ser resolvido com algo em torno de 5 ou 6 linhas de código.

5 – Trabalhe com ajax – jQuery oferece um grande suporte para trabalhar com ajax. Podemos utilizar as funções post() e ajax() para realizar solicitações assíncronas, tudo isso com suporte à callback, ou seja, suporta a chamada de uma função assim que tal evento ocorrer. Exemplo: ao término da solicitação, chamar um alert();

Por enquanto é isso galera! Se você deseja conhecer mais sobre a jQuery, considere uma busca no Google ou até mesmo um curso online.

Fonte: Blog Estilo Fácil

jQuery – A Biblioteca do Programador JavaScript – 2ª edição

Profissionais TI — Sun, 23 May 2010 13:40:01 +0000

Autor: Maurício Samy Silva
ISBN: 978-85-7522-237-9
Páginas: 544
Ano: 2010

Compre este livro!

Descrição

jQuery propicia a criação de scripts de uma forma tão simples e intuitiva que consegue com meia dúzia de linhas os mesmos efeitos de um script de 30 a 40 linhas desenvolvido com JavaScript tradicional. Simplicidade foi a diretriz que norteou John Resig na criação da biblioteca.

Este livro, na primeira parte, apresenta a biblioteca e um estudo da sintaxe e emprego dos seletores e comandos jQuery, desenvolvendo scripts de exemplo para cada um deles, que podem ser examinados ao vivo em arquivos disponíveis para download no site do livro. Na segunda parte, são desenvolvidos vários scripts de emprego real, todos comentados e disponíveis para download.

Ajax com ASP .NET e jQuery (Parte 1)

Michel Banagouro — Mon, 17 May 2010 11:21:54 +0000

Olá pessoal do Profissionais TI!

Disponibilizei em meu blog o primeiro de uma série de posts sobre a utilização do Ajax no ASP .NET utilizando a biblioteca JQuery. Neste post eu criei um tutorial passo a passo bastante simples para que vejam como é fácil trabalhar com essas duas linguagens para criar aplicativos para web mais completos e eficientes para os usuários utilizarem.

Confira no endereço: http://www.mbanagouro.net/blog/post/ajax_com_asp_net_e_jquery.aspx

Espero que gostem e até o próximo post!

jQuery em Ação – Alta Books

Profissionais TI — Thu, 01 Apr 2010 01:27:16 +0000

“O livro é muito bom com exemplos bastantes concretos. Mas para que se tenha o maior proveito desse livro sugiro que se tenha algum conhecimento em javascript, isso torna bem mais fácil compreender alguns conceitos. Eu indico ele pra quem está começando com jQuery.”

Comentário deixado no post – http://bit.ly/aJTvE8 – Abraão Levi

_____________________________________________________

Editora: Alta Books
ISBN: 9788576083085
Origem: Nacional
Ano: 2009

Compre este livro!

Descrição

Pura e simplesmente, este é o objetivo deste livro: ajudar você a aprender como fazer mais em suas páginas de aplicativos da web com menos script. Seus autores, um deles um colaborador e propagador do jQuery e o outro um usuário ávido e entusiástico, acreditam que o jQuery é a melhor biblioteca disponível atualmente para ajudá-lo a fazer isso.

Este livro tem por objetivo prepará-lo para usar o jQuery rápida e eficazmente e, quem sabe, se divertindo no caminho. A API central do jQuery é toda discutida e cada método API é apresentado em um bloco de sintaxe fácil de digerir, que descreve os parâmetros e valores de retorno do método. Pequenos exemplos de uso efetivo das APIs são incluídos. E, para aqueles grandes conceitos, nós oferecemos o que chamamos de páginas de laboratório. Essas páginas abrangentes e divertidas são uma maneira excelente de ver as nuances dos métodos jQuery em Ação sem a necessidade de você mesmo escrever um mar de códigos.

Nós poderíamos continuar sem parar com o jargão de marketing dizendo a você o quanto este livro é maravilhoso, mas você não quer perder tempo lendo isso, quer? O que você realmente quer é enfiar os braços nos bits e bytes até os cotovelos, não é?

jQuery: A Bíblia do Programador JavaScript

Jackson Caset — Tue, 09 Mar 2010 01:25:36 +0000

“O livro é muito prático para a consulta das funções utilizadas no dia-a-dia do programador web e também muito indicado para os iniciantes, pois relata de maneira clara as funcionalidades do framework jQuery. Surpreendente é a partir de um tempo de estudo, reduzir 70% de escrita de JavaScripts e ganhar mais funcionalidade e recursividade.”

Comentário deixado no post – http://bit.ly/aJTvE8 - Tiago Luis Facco

Editora: Novatec
Autor: MAURICIO SAMY SILVA
ISBN: 9788575221785
Origem: Nacional
Ano: 2008

Saiba mais sobre este livro

Aprenda a criar efeitos de alto impacto em seu site com a biblioteca JavaScript mais utilizada pelos desenvolvedores web

jQuery é uma poderosa biblioteca JavaScript criada para simplificar a criação de efeitos visuais e de interatividade em websites. Desenvolvedores especialistas em JavaScript, ao conhecerem as maravilhas de que a biblioteca é capaz, com certeza vão se perguntar: ?Por que não pensei nisso antes??. Iniciantes, com noções rudimentares de JavaScript, experimentarão uma curva de aprendizado inimaginável para aqueles experientes com a linguagem.
jQuery propicia a criação de scripts de uma forma tão simples e intuitiva que consegue com meia dúzia de linhas os mesmos efeitos de um script de 30 a 40 linhas desenvolvido com JavaScript tradicional. Simplicidade foi a diretriz que norteou John Resig na criação da biblioteca.

Aprenda jQuery no curso online da TreinaWeb

Jackson Caset — Wed, 17 Feb 2010 21:20:16 +0000

JQuery é um framework/biblioteca JavaScript, utilizado para a interação entre o JavaScript e o HTML/XHTML. É muito utilizado para codificação de JavaScript assíncrono (AJAX) e principalmente para a manipulação de elementos (DOM).

Porque aprender?

No mercado de trabalho atual, o JavaScript é sem duvida, após o HTML, a linguagem mais utilizada para o desenvolvimento de websites. O JQuery (Framework JS mais utilizado no mundo) irá simplificar a codificação e interação com o HTML/XHTML de forma CrossBrowser (De acordo com os Padrões da Web).

O que você poderia saber? / Pré-requisitos

Duração do curso / Carga horária

A carga horária dos cursos varia de pessoa para pessoa, em alguns aspectos como: Tempo disponível, facilidade de aprendizado, necessidade de revisão, etc. Por isso, não se tem uma carga horária pré-definida, pois o foco é no aprendizado e não no tempo em curso.

Obs: Ao adquirir um curso, você tem até 40 dias de acesso para concluí-lo. Caso a aquisição seja de um pacote de cursos, o prazo vai de 6 meses a 1 ano de acesso.

A maioria dos cursos possuem carga horária média de 24 horas. No certificado, é impressa a carga horária real utiliza em curso (arredondada para cima).

Mais informações no site da TreinaWeb!

Polaroid Gallery (Galeria de Fotos) com jQuery UI

Robson Loschi — Fri, 11 Dec 2009 11:12:08 +0000

Um tempo atrás, eu estava desenvolvendo um sistema e procurei na net por uma galeria de fotos interessante. Me deparei com essa belíssima galeria em flash.

Entretanto, notei alguns pontos que me fizeram desistir de usá-la, principalmente:

Ser em flash (praticamente aboli o uso do flash depois que conheci o jquery).
Seu tamanho e o conseqüente tempo de carregamento.

Procurando por uma solução, acabei encontrando algumas usando CSS3 o que também inviabilizava o que eu queria realizar.
Acabei por entender o que eu queria fazer e desenvolvi a técnica demonstrada aqui e descrita abaixo utilizando o JQuery. Antes, porém, permitam-me algumas ressalvas:

Eu poderia ter criado um plugin, mas ele dependeria de tantos outros que eu achei melhor não fazê-lo.
Se eu estivesse usando esse script em produção, eu teria utilizado o smartoptimizer e concatenado os js e css.
Esse script utiliza js obstrusivamente, ou seja, só funciona com js habilitado no navegador. É muito fácil resolver isso, mas onde foi utilizado, não era uma necessidade.
A aparência poderia ser mais próxima da galeria em flash se assim desejássemos.
Só acho viável utilizar tantos scripts externos se boa parte deles já tiver sido carregada em páginas anteriores.

Pra começar, coloque o seguinte código HTML, muito fácil de entender e adaptar:

A seguir, vamos utilizar css para cuidar da aparência de nosso script (mas não só da aparência):

//Vamos dar cor ao fundo:
body, html{ background:#9E967F;}
//Definimos  as características que as imagens dentro da div Polaroid terão:
#polaroid img{
	border:none;
	background:#FFFFFF;
	padding: 5px 5px 13px;
	position:absolute;
}
//Mudamos o cursor do mouse para ‘move’ sobre as imagens:
#polaroid img:hover{
	cursor:move;
}
//Definimos o tamanho da div Polaroid pra controlar a disposição das imagens:
#polaroid{
	width:500px;
	height:500px;
}
//Definimos o tamanho da div centeredbox que é usada para direcionar o efeito transfer da jquery ui:
#centeredbox{
	width:250px;
	height:250px;
}
//Definimos o estilo para o efeito transfer da jquery ui:
.ui-effects-transfer { background:#FFFFFF; }

Agora, incluímos um arquivo css externo do plugin slimbox, o jQuery , o jQuery ui e alguns plugins:

Pra terminar a mágica, um pouco de js:

//Função para gerar números aleatórios em js
function randrang(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}
//Evento onready do jquery
$(function(){
	//Criamos a variável thumbs que vai servir como parametro para
	//o slimbox
	thumbs = '[';

	//Para cada imagem dentro do container #polaroid...
	$("#polaroid img").each(function(){
		//posicionamos aleatóriamente
		var top = randrang(0,$("#polaroid").height());
		var left = randrang(0,$("#polaroid").width());
		$(this).css('top',top+'px');
		$(this).css('left',left+'px');
		//pegamos o endereço da imagem
		thsrc = $(this).attr('src');
		//extraímos o prefixo tn_
		src = "photos/"+thsrc.substring(10);
		//pegamos o título da imagem (que servirá de legenda)
		title = $(this).attr('title');
		//adicionamos a imagem à variável thumbs
		thumbs += '["'+src;
		//se houver um título, adicionamos ele também
		if (title)
			thumbs += '","'+title;
		thumbs += '"],'
	});
	//retiramos a vírgula final de thumbs (isso é POG)
	tempthumbs = thumbs.substring(0,thumbs.length -1);
	//o uso de 'eval' é necessário pro slimbox funcionar
	//depois, fechamos a variável thumbs com ']'
	thumbs = eval (tempthumbs+']');

	//Aqui, tornamos as imagens dentro de #polaroid arrastáveis e...
	$("#polaroid img").draggable({
		//Fazemos com que as sombras a sigam quando forem arrastadas
		drag: function(){
			$(this).next().css('top',$(this).css('top'));
			$(this).next().css('left',$(this).css('left'));
		}
	});
	//Posicionamos as sombras
	$('.shadow').shadow({ color: "#444", offset: 3, opacity: 0.3 });

	//Centralizamos #centeredbox
	$("#centeredbox").center();
	//Pra terminar, criamos o evento onclick para cada imagem
	$("#polaroid img").click(function(){
		//Capturamos o índice da imagem
		index = $("#polaroid img").index(this);
		//Criamos o efeito transfer da imagem para #centeredbox e...
		$(this).effect('transfer',{ to: "#centeredbox", className: 'ui-effects-transfer' },500,function(){
			//Chamamos o plugin slimbox no 'callback'
			//Passando a 'array' (na verdade não é uma array) de imagens e títulos
			//e o índice da imagem clicada
			$.slimbox(thumbs,index);
		});
		//Preciso explicar o que isso faz?
		return false;
	});

});

O leitor atento vai perceber que a sombra não acompanha a imagem tão bem quanto deveria, isso é a principal limitação desse script (mas não a única). Se tiver sugestões para resolver isso, para melhorar o script ou tiver dúvidas, basta postar nos comentários.

Veja o resultado aqui.

Livro: Ajax com jQuery de Maurício Samy (Maujor)

Jackson Caset — Tue, 20 Oct 2009 18:53:29 +0000

Leitura indispensável pra quem deseja aprender a utilizar Ajax com o fantástico Framework javascript, jQuery.

Título: Ajax com jQuery
Autores: Maurício Samy Silva
ISBN: 978-85-7522-199-0
Número de páginas: 328

Compre este excelente livro agora mesmo!

Utilize o código promocional PROFISSIONAISTI e ganhe 20% de desconto.

Sobre o livro

Ajax com jQuery é uma poderosa combinação das funcionalidades do AJAX com a simplicidade que jQuery proporciona ao desenvolvimento com JavaScript. Seja você um especialista ou um iniciante no uso de AJAX, certamente ficará maravilhado ao descobrir uma metodologia completamente diferente, inovadora, intuitiva e infinitamente mais simples de desenvolvê-lo.

Este livro apresenta uma visão geral do AJAX segundo a maneira tradicional de desenvolvimento, recapitulando seus conceitos básicos, dissertando sobre os métodos e propriedades do objeto XMLHttpRequest e explicando passo a passo os scripts fundamentais que, reunidos, formam uma biblioteca mínima para uma requisição AJAX. Ainda, aborda os diferentes tipos de arquivos possíveis de ser requisitados e ilustra cada caso com um exemplo prático em funcionamento no site do livro. Descreve detalhadamente os métodos e funcionalidades da biblioteca jQuery para AJAX. Inclui também exemplos práticos que podem ser implementados e cujo funcionamento pode ser conferido no site do livro.

Site oficial do livro: http://livroajaxjquery.com.br

jQuery Tools – Mais uma boa opção para desenvolvedores web

Jackson Caset — Thu, 11 Jun 2009 18:01:50 +0000

Olá PTI’s

Sendo um desenvolvedor web, tenho a obrigação de ficar sabendo de tudo que sai de novo pela rede a fora, e hoje, acabei conhecendo mais uma biblioteca bacanetz que utiliza o framework jQuery e que promete nos ajudar em tarefas executadas quase que diariamente.

A jQuery Tools é uma biblioteca que possui alguns dos componentes javascript mais utilizados atualmente em websites e aplicações web, tais como: navegação em abas, tooltips, janelas modais e outros.

A biblioteca pode chegar a apenas 5.8KB se utilizadas formas de compressão de código eficientes e pode ser configurada, estilizada e extendida da forma que o programador desejar. Possui uma boa documentação e um fórum ativo para tirarmos quaisquer dúvidas, reportarmos problemas e etc.

A jQuery Tools é open source sobre as licenças MIT e GPL 2+.

Interessado em conhecê-la? Acesse o site da biblioteca e após seus testes deixe suas impressões comentadas abaixo.

Espero que seja útil

border-radius: Caixas com cantos arredondados

Klaus Peter Laube — Sun, 22 Feb 2009 19:11:46 +0000

Border Radius no Firefox

Olá galera!

Para dar início a série de posts práticos sobre Desenvolvimento Web, hoje vou dar algumas dicas que solucionaram quase todos os meus problemas com layouts “arredondados”. Por que quase todos? A resposta: Algumas destas dicas não se aplicam ao IE ou ao Opera .

Há uma implementação da CSS 3 que prevê o suporte dos navegadores ao “desenho” de caixas com cantos arredondados (ainda não suportado pelos navegadores). A maneira mais comum de fazermos isto é utilizando imagens, css e elementos HTML não-semânticos. Ok, até aí tudo bem… mas e quando estamos tratando de fundos em degradê?! A coisa complica.

Pesquisando sobre o assunto, pude constatar que o Webkit e o Gecko (motores do Safari e do Firefox, respectivamente) possuem soluções proprietárias para renderizar border-radius:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Adicionamos a propriedade especificada pela CSS 3 só para não ficarmos com o peso na consciência, e para garantir que nossa caixa fique visível para futuros browsers que suportem este padrão:

border-radius: 5px;

Em Opera isso não se aplica. Há várias outras formas de desenhar cantos, inclusive utilizando SVG e Canvas. No Dev.Opera podemos ver um exemplo de input com cantos arredondados através de SVG.

Border Radius no Safari

No site do Maujor há uma proposta de border-radius com PNG transparente que achei bem prática de se implementar (e aparentemente é cross-browser).

Para os amantes da jQuery, há um plugin chamado jQuery Corners que é capaz de reproduzir border-radius decentemente em qualquer browser conhecido (de uma maneira pouco usual para o Opera… mas é capaz). Se você não quer utilizar uma framework javascript para isso, é capaz de utilizar também a biblioteca CurvyCorners.

Fica a dica…

Até a próxima