Busca

Boas práticas de Desenvolvimento com Padrões Web

jQuery é bom para designers

No começo da web JavaScript era considerado uma linguagem de programação completamente difícil e inútil. Afinal, depois de uma semana estudando a linguagem, o sujeito só conseguia escrever um script que validasse um formulário de contato que muitas vezes dava erro em outros browsers que não o Internet Explorer. Isso acontecia porque tanto o Netscape [...]

05/08/2008 por Michael Granados
57 Comentários

No começo da web JavaScript era considerado uma linguagem de programação completamente difícil e inútil. Afinal, depois de uma semana estudando a linguagem, o sujeito só conseguia escrever um script que validasse um formulário de contato que muitas vezes dava erro em outros browsers que não o Internet Explorer. Isso acontecia porque tanto o Netscape quanto o Browser azul tinha seus prórpios padrões de implementações de solução para o Javascript que era ainda estava engatinhando como linguagem.

Dessa forma, muitos códigos proprietários solucionavam problemas em determinado browser, que faziam o programador javascript (sim, isso já foi cargo) fazer muita volta para solucionar em outro browser. Isso acarretava em problemas imensos em manutenção. O cliente, em um belo domingo de sol ligava e dizia que o formulário estava “pulando”, muitas vezes acompanhado de um não sei nem o que é browser/navegador: “eu dou dois cliques no ícone da internet e entro”. Então lá ia o programador e precisava revisar dois, três códigos que faziam a mesma coisa em navegadores diferentes.

Ainda bem que, assim como o HTML e o CSS, o JavaScript também sofreu sua padronização, facilitando a criação de scripts que facilitam muito a vida do designer, deixando o designer cada vez mais feliz sem precisar consultar um programador. Uma dessas soluções foi a biblioteca jQuery. Uma biblioteca tão simples que designers conseguem fazer ótimos efeitos com apenas algumas linhas de comando.

Vamos a um exemplo/tutorial prático: um menu com submenus. Quando a pessoa clicar no link o submenu deve aparecer, com um efeito de slide.

Para o html usamos uma marcação simples, indicando quem é o menu e quem é o submenu.

<ul class="menu">
<li><a href="#">Item 1</a></li>
<li class="itemPai">Item 2</li>
<ul class="subMenu">
<li><a href="#">SubItem 1</a></li>
<li><a href="#">SubItem 2</a></li>
<li><a href="#">SubItem 3</a></li>
</ul>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>

Para ativar o jQuery você precisa baixá-la do site oficial (é apenas um aquivo js pequenininho) e coloque-a de preferencia na pasta ou em uma subpasta de onde está seu aquivo html, precisamos colocar a seguinte linha (de preferencia entre as tags <head> e </head> ):

<script type="text/javascript" src="pasta/onde/está/a/jquery.js"></script>

Após a inclusão da jQuery podemos usá-la sem problemas. Coloque seu código entre as tags <script> e <script> depois da chamada da jQuery. Tenha em mente que todo o que você vai fazer é chamado pela chave $ e interligamos os comandos com pontos. Então, para chamarmos o elemento que queremos colocar uma ação, no caso clicar, usamos a chave $ e para referenciamos, usamos as mesmas chamadas que usamos para o css.

$('ul.menu li.itemPai')

Agora, linkamos esse objeto com a ação click, ou seja quando a pessoa clicar no link propriamente dito.

$('ul.menu li.itemPai').click()

E passamos para ele uma função que fará nosso efeito de slide.

$('ul.menu li.itemPai').click(function(){
// Aqui virá a função
})

Agora, a função que fará o efeito. Chamamos com a chave $ quem queremos animar e o linkamos com o tipo de animação. Para o efeito de slide (ou seja, encolher e esticar o elemento dando a ilusão de que ele está saindo de trás do outro elemento para baixo) a jQuery tem dois efeitos prontos que são: slideUp que recolhe o elemento e slideDown que expande o elemento. Ainda temos o slideToggle, que recolhe o elemento se estiver expandido ou vice-versa. Então iremos usar slideToggle para este efeito. Também usamos o return false para fazer com que o link não seja executado, retirando o usuario da nossa página.

$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})

E voilá, o efeito está pronto. Exceto por um problema… Se você colocar este script antes do seu menu, ele não vai funcionar porque você esta referenciando um elemento que ainda não existe para o navegador, logo ele não pode referenciar ninguém. Uma solução seria colocar o seu script após o seu código html, mas isso vai contra uma das práticas de tableless que é trabalhar com camadas e, assim como o CSS, não é interessante deixar ele entre o código html por n razões. A outra solução faz parte do escopo do jQuery que faz com que seu script só rode após o carregamento completo do seu código html. Para isso basta criar uma função que englobe seu script dentro da chave $. Ficando assim:

$(function(){
$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})
})

Isto resolve nosso problema. Agora, precisamos esconder nosso submenu quando a página carregar. Fazemos isso via javascript e não via css porque não queremos que o menu fique invisivel para pessoas que não usam javascript. Para isso, a jQuery tem a função hide que esconde um elemento (display:none). Se você quiser fazer o contrario, basta usar show no lugar de hide.

<script type="text/javascript">
$(function(){
$('.menu .submenu').hide()
$('ul.menu li.itemPai').click(function(){
$('.menu li .submenu').slideToggle()
return false
})
})
</script>

E esse é o nosso script final que pode ser visto aqui e aqui com aplicação de CSS básico. O interessante da jQuery é que ela é bem inuitiva e tem muitas coisas que já vem no escopo dela que resolvem muitos problemas que os designers querem desenvolver, mas não querem que um programador faça por ser uma coisa tão simples de fazer. jQuery é a parte da programação que os designers sentiam falta e muitas vezes contornavam com um arquivo flash que destruia a semantica de área como o menu que acabamos de construir.

57 Comentários
Leia também:

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

57 Comentários

Bruno Rocha 05/08/2008 às 11:34

A Jquery realmente mudou minha vida!

(sem exageros).

Eu realmente consegui mais produtividade nos projetos,
mas este post poderia se chamar:
“como desaprender Java Script”

eu me tornei dependente da Jquery, não consigo mais escrever funções em Java Script , é automático, eu simpleemente já penso na sintaxe da Jquery.

Muito bom e realmente produtivo, mas é preciso tomar cuidado para não se tornar dependente destes frameworks.

Fernanda 05/08/2008 às 11:44

Olá!

Só uma coisa. Por navegação TAB o item2 passa batido no exemplo. Isso torna o menu inacessivel em alguns aspectos.

Valdinei dos Santos 05/08/2008 às 12:01

Testei aqui no Firefox e no Opera a página de exemplo que vc disponibilizou e não funcionou em nenhum dos dois. :(

Felipe Mafra 05/08/2008 às 12:06

Poxa, muito bom! Eu nunca me arrisquei com muitos javascript por achar que era complicado e deixava tudo pro programador. Agora vou me aventurar mais. Esse post foi o pontapé que faltava :)

Mas é como a Fernanda disse, a navegação por TAB não funciona. Tem um jeito de contornar isso?

Yuri Goytacaz 05/08/2008 às 12:07

falta um na , pois tá dentro de outra , corrigindo:

Item 1
Item 2

SubItem 1
SubItem 2
SubItem 3

Item 3
Item 4
Item 5

Yuri Goytacaz 05/08/2008 às 12:08

Rogério 05/08/2008 às 12:15

aaaaaaaa, foi mal. Era pra clicar no unico que nao era link. Intuitivo…

Ricardo 05/08/2008 às 12:20

na minha opiniao o certo seria “jQuery TAMBÉM é para designers”
concordo que pros designers ela ajuda pakas com essa parte visual, mas a parte de backend e sistemas mais complexos só um programador avançado faz, e bem feito
abs

Isacc Araújo 05/08/2008 às 12:25

Ótimo artigo. Só uma correção a ser feita: a ul.subMenu deve ficar dentro da li.itemPai, assim:

Item 1
Item 2

SubItem 1
SubItem 2
SubItem 3

Item 3
Item 4
Item 5

Yuri Goytacaz 05/08/2008 às 12:31

a ul com classe subMenu precisa estar dentro duma li também.
era isso.

Isacc Araújo 05/08/2008 às 12:31

Ótimo artigo. Só uma correção a ser feita: a ul.subMenu deve ficar dentro da li.itemPai, assim:

<ul class=”menu”>
<li><a href=”#”>Item 1</a></li>
<li class=”itemPai”>Item 2
<ul class=”subMenu”>
<li><a href=”#”>SubItem 1</a></li>
<li><a href=”#”>SubItem 2</a></li>
<li><a href=”#”>SubItem 3</a></li>
</ul>
</li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
</ul>

Eughenio Constantino 05/08/2008 às 12:35

Sim, essas bibliotecas são bem legais, mas vou indicar outra: PROTOTYPE.

Essa sim é bem completa, e muito, muito mais solida que a jQuery, utilizo bastante as duas, mas a Prototype é uma maravilha, agora, há o Scriptaculous, uma biblioteca só de efeitos que trabalha junto com a Prototype, tem de tudo e dá pra fazer tudo, ajax com efeitos são simples de ser feito e quem já conhece javascript terá controle de tudo que a biblioteca faz.

Experimentem.

Matheus 05/08/2008 às 13:47

Muito bom mesmo este artigo.
Como o Felipe disse, eu tbm nunca me arrisquei em js, agora com esse artigo, vou me aventurar mais.

Valeuzão.

Paulo de Tarso F. M. 05/08/2008 às 14:08

Muito bom artigo.

Mas queria alertar sobre um bug que há na versão sem CSS no IE7. Tudo bem, hoje em dia quase impossível alguém querer utilizar um menu assim, crú, né? mas é só para registrar: quando clicamos no Item 2, beleza, o efeito ocorre e tals, bonitinho. Mas ao encolher o submenu, ele sofre um deslocamento para a direita.

Como falei, não sei até onde devemos nos preocupar com isso, mas se de repente alguém perceber uma suposta quebra de layout, por exemplo, já sabe onde atacar primeiro.

Um grande abraço!

Juarez P. A. Filho 05/08/2008 às 14:14

Eu tenho usado/aprendido jQuey com muita frequência nos meus últimos projetos e realmente sua facilidade é de encher os olhos.
Bom tutorial para mostrar para os Designers de plantão que eles podem fazer mais com os recursos disponíveis hoje.
@Fernanda e @Felipe Provavelmente no exemplo o autor não estava preocupado com esse quesito, porém basta colocar o item2 dentro da tag e pronto, já fica acessível via teclado… O CSS para deixar bonito é com vocês. =D

Juarez P. A. Filho 05/08/2008 às 14:22

Oops… Desculpem por não ter colocado assim: tag <a>
Abraços.

Gabriel Gilini 05/08/2008 às 14:40

Juarez, acontece que mesmo com a âncora no item 2, o menu não será expandido quando o usuário pressionar a tecla enter, ou espaço. A minha solução seria a inserção de um evento onfocus no item falado, assim quando o “tab” passasse por ele, o menu seria expandido como no click.

Marcelo Cajueiro 05/08/2008 às 15:34

Muito bom o tutorial, confesso que eu pensava que era mais complexo.

Abraços.

Julio Vedovatto 05/08/2008 às 17:58

Sugiro somente a troca do título do artigo, do jeito que foi feito, ofende em minha opinião, pois uso jQuery e não sou designer. :B

jQuery é uma ferramenta facilitadora de programação, tem uma parte muito boa de UI, mas ela não fica só nisto como você deu a entender no artigo. Tem um ótimo controle em Ajax, manipulação de eventos, de DOM, etc.

Sugiro o título algo como: JQuery como facilitador de programação

[]’s

Joana 05/08/2008 às 20:23

Mais ou menos como o colega acima, eu nunca tive muita coragem de ler artigos sobre jquery, mas esse me mostrou de uma maneira simples como é simples!
obrigada!

hospedagem de sites 05/08/2008 às 20:42

num futuro próximo que sabe tudo mude, inventem outra linguagem e o java se esquece…

Seyfertt 05/08/2008 às 21:46

Muito interessante, eu desde alguns meses atrás estava a olhar esse jQuery. Espero que este post incentive outros designers assim como eu.

Guilherme Rambo 05/08/2008 às 22:46

jQuery é realmente para designers :D

Se alguém tiver interesse, eu estou publicando uns screencasts de jQuery lá no blog: http://www.screencaster.com.br/jquery-criando-menu-em-arvore-e-menu-accordeon/

[Artigo]: Diogo Eis me decepcionou « Julio Vedovatto 06/08/2008 às 02:52

[...] [Artigo]: Diogo Eis me decepcionou Publicado 06/08/2008 Artigos Tags: diego eis, jQuery, tableless Estava na minha leitura diária de feeds, quando me deparo com um post vindo do Tableless que me deixou revoltado, o post se chama:  jQuery é para designers. [...]

Felipe Magalhães 06/08/2008 às 10:03

Já cheguei a correr atrás de jQ um pouco, mas uma coisa me intriga: IDE.

Existe alguma q realmente minimize o tempo de desenvolvimento/aprendizado com jQ? (afinal, estamos falando de uma nova maneira de se trabalhar js, com funções novas, e nem sempre há disponibilidade de tempo para para e se dedicar somente ao aprendizado disto. Uma IDE auxiliaria bastante no aprendizado e no desenvolvimento disso)

abraço

obs.: sou programador (asp/cf) hehehe

Igor 06/08/2008 às 10:30

Realmente os framworks de JavaScript ajudam, e muito!

Testei vários, inclusive o jQuery, mas preferi ficar com o MooTools.(que é um pouco menos famoso)

Muito bom o artigo!

Neto 06/08/2008 às 10:34

Bom post, além de ajudar a galera do “design” acho que o JQuery (e qualquer outro framework) ajuda muito mais os programadores com uma visão um pouco mais para frente em determinados projetos.

Julio César Bitencourt 06/08/2008 às 11:20

Fiz uma pequena alteração para inclusão de um segundo sub menu.

O script:
$(function(){
$(’.menu .subMenu’).hide()
$(’ul.menu li.itemPai’).click(function(){
$(this).children(’ul’).slideToggle()
return false
})
})

O xhtml:

Item 1
Item 2

SubItem 1
SubItem 2
SubItem 3

Item 3

SubItem 1
SubItem 2
SubItem 3

Item 4
Item 5

Felipe Jacob 06/08/2008 às 11:23

É muito legal mesmo. Eu já usei, mas no meu caso nem sempre vale a pena.

Recomendo visitar também:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Abraços!

Gabriel Gilini 06/08/2008 às 13:21

@Felipe Magalhães

Com certeza o tempo de aprendizado é recuperado na melhora da produtividade rapidinho, gaste algumas horas para aprender que vale a pena.

Mas não se limite ao jQ, ele é muito bom, mas temos outras grandes opções como os já citados Prototype e MooTools, além do dojo que é super completo.

@Eughenio Constantino

Me diga porque você acha prototype mais sólida que jQuery. Eu já usei prototype por um bom tempo, e agora, geralmente, uso jQ em meus projetos. E posso afirmar com toda a certeza que não deve em nada para o prototype, inclusive é mais produtivo.

JunioR 06/08/2008 às 15:53

Aproveitando o post, o jquery tem uma comunidade brasil. jquerybrasil.com

[s]

JunioR

brasilportais 07/08/2008 às 17:02

Verifiquei algumas funcionalidades do Jquery mais
ficarei mesmo com Java script, já estou familiarizado.

Bruno Rocha 07/08/2008 às 18:54

Eu estou terminando uma classe C# que permite progranar Jquery no Visual Studio.NET 2008

pra quem usa aspx é uma mão na roda, JQuery com o Mouse!

Rafael Zamana 08/08/2008 às 11:44

Fala fio…

Primeiro post e ainda por cima com erro

Valeu a dica

e se cuida

ATer 08/08/2008 às 21:09

poxa fui dar uma olhada e econtrei umas coisas legais mesmo.. vou colcoar a usar…

Diego 13/08/2008 às 10:07

A tendencia é esta mesmo, facilitar cada vez mais a vida dos designers, mas acho que sempre havera espaço para o programador tambem.

Abraços

http://www.sapoloko.com/

Christian 16/08/2008 às 23:25

Eu concordo com o rapaz ali que falou sobre a Prototype ser mais madura; já me deparei com algumas coisas da jQuery que não funcionam em em browser específico, por exemplo, enquanto nunca me deparei na Prototype (uso ela há 3 anos em quase todos os projetos) com algo que não fosse 100% crossbrowser.
E não gosto também de que na jQuery ao pegar objetos usando o $ ele não retornar objetos DOM.

Mas, tem uma coisa da jQuery que é muito bacana: os plugins. Muito fácil de fazer plugins, uma grande quantidade deles feitos pela comunidade. Nisso, ela é disparada melhor.

Sérgio Michels 17/08/2008 às 14:40

Pelo menos para mim, a JQuery foi bem mais funcional e agilizou meu processo de desenvolvimento.

Além disso, a comunidade e os plugins fazem a diferença.

A documentação é outro ponto forte da JQuery, pois nem todas as pessoas possuem facilidade em aprender a sintaxe.

Alexandre 17/08/2008 às 22:08

Tento não pensar assim: isso é bom para isso, e aquilo somente para aquilo.
Uso Corel e Inskape…
Depende aonde e o que fazer…

Leonardo Sánchez 17/08/2008 às 22:46

Só para constar… para deixar o item 2 acessível pela tecla TAB deve-se adicionar um link (href), vazio… no exemplo citado o item não é acessado pq ele está sendo reconhecido somente como texto ;)

Mootools vs. jQuery » JulioGreff 18/08/2008 às 09:15

[...] preferem jQuery. Não é à toa, ela é extremamente simples de ser usada. Nunca ouviu dizer que jQuery é para designers? Isso também não significa que usuários mais experientes ou experts na linguagem não irão [...]

jQuery é bom para designers | Canal da Tecnologia 18/08/2008 às 15:07

[...] No começo da web JavaScript era considerado… Leia mais [...]

Andre 18/08/2008 às 15:56

Por enquanto estou usando o Mootools, mas me parece que o jQuery é melhor… Assim que achar um framework ideal vou fazer um uma classe que gera menus dinamicos de camadas infinitas e com suporte à usabilidade. A idéia é fazer os botoes -> -< abrirem os menus!

Eughenio Constantino 18/08/2008 às 16:34

A Prototype é mais madura. Não sei se é a mais antiga, em ajax é a que tem o maior controle de tudo, você controla até se o usuário tiver algum problema de conexão e como o Christian falou 100% crossbrowser. Plugins, eu não posso falar nada pois nunca usei e precisei, tudo que precisei o prototype tinha. Até os efeitos o scriptaculous dá conta do recado.

Bom, até o momento eu tenho o prototype tatuado no meu braço(dando uma de zune guy, rs).

Abraços.

junior neo 04/09/2008 às 14:16

Muito bom esse artigo

vlw

Gustavo Bordoni 04/09/2008 às 22:46

Acho que de todas a Jquery é o que vem crescendo mais rápido, eu tenho usado o Jquery em muito de meus projetos, e agora vou me atualizar, usando também o Prototype e o Mootools, que são outras duas frameworks muito interessantes.
Mas já me aventurei, nas duas e a que tive melhor redimento e leveza foi no Jquery.

Kandrad 08/09/2008 às 16:44

Banaca este JQuery, simples e fácil de usar. Uma pergunta. E se eu quiser implementar um menu com vário níveis, este menu teverá ter um controle capaz de perceber quando o menu esta na parte inferior da tela caso esteja deverá abrir o sub-menu para cima(para não ter que rolar a tela). Por exemplo suponhamos que o menu esteja na vertical do lado direito da tela.
Exeste alguma função que faça este controle?

WordPress Blog » Blog Archive » Mootools vs. jQuery 05/10/2008 às 12:42

[...] preferem jQuery. Não é à toa, ela é extremamente simples de ser usada. Nunca ouviu dizer que jQuery é para designers? Isso também não significa que usuários mais experientes ou experts na linguagem não irão [...]

Mudança 18/10/2008 às 14:58

Legal :D
so que queria um que ao passar o mouse aparecesse um submenu!

7 coisas que todo desenvolvedor web deveria saber » JulioGreff.net 06/11/2008 às 15:22

[...] Além da própria linguagem, aprenda a usar alguma biblioteca, como Mootools, jQuery ou Prototype. Aliado a essas ferramentas, você poderá criar aplicações muito mais interessantes em muito menos tempo. Mas atenção: não aprenda somente a biblioteca, sem aprender antes JavaScript puro. Afinal, saber só jQuery é coisa de designer. [...]

Djjin 09/12/2008 às 17:13

Aqui não funcionou lol

mas fazer o que, no fim, é tudo javascript, facil de fazer, só ter paciência (:

mas eu concordo, acho mais fácil pegar um pronto e me habituar a usar comandos prontos, afinal o cara que fez é o único que sabe, na vida é assim, quem sabe faz, quem num sabe copia ^^

uheAOIEUI (:

Transportadora 26/01/2009 às 18:06

Interessante ahsiuahsiuas
Vou aderir ao meu site!

Marcio Rocha 28/02/2009 às 11:19

Afinal, saber só jQuery é coisa de designer. [...]
Assim como saber programar e nada de design centrado no usuário é coisa de programador. Dá pra fazer uma relação interessante entre o designer e o programador e entre o engenheiro e o arquiteto.
O engenheiro, assim como o programador, está interessado na maneira e nos materiais com que se constróem a projeto, já o designer e o arquiteto estão interessados na relação do homem como a casa ou com o site, ou seja, preocupados com a interação humana em ambos os casos. Um é mais importante que o outro, não creio. São complementares e igualmente importantes. Mas tecnologia é assim, ela é boa quando não aparece. Quando ela se integra ao projeto e usufruimos de seus benefícios, silenciosamente, quase sem percebê-la. Na maioria das vezes que a percebemos, é quando ela falha.

Rafael Librenz 05/04/2009 às 15:14

Michael, só tem um problema:

XHTML Strict não permite ul dentro de ul. Pelo menos foi isso que eu entendi dos erros que o validador da W3C citou quando tentei validar o HTML do link de exemplo.

Rafael Librenz 05/04/2009 às 16:09

Já descobri o problema!

A ul que vai ganhar display:none via jQuery tem que ficar dentro da li que ativa ela, assim:

‹ul class=”menu”›
‹li›‹a href=”#”›Item 1‹/a›‹/li›
‹li class=”itemPai”›Item 2
‹ul class=”subMenu”›
‹li›‹a href=”#”›SubItem 1‹/a›‹/li›
‹li›‹a href=”#”›SubItem 2‹/a›‹/li›
‹li›‹a href=”#”›SubItem 3‹/a›‹/li›
‹/ul›‹/li›
‹li›‹a href=”#”›Item 3‹/a›‹/li›
‹li›‹a href=”#”›Item 4‹/a›‹/li›
‹li›‹a href=”#”›Item 5‹/a›‹/li›
‹/ul›

(espero que esse código apareça direito nos comentários)

Com isso consegui validar o HTML e ainda me solucionou o problema que eu estava tendo depois que troquei o click da jQuery por hover (os itens da ul que surgia sumiam assim que eu tentava colocar o mouse em cima deles).

Jadiel Almeida.com 06/04/2009 às 14:30

Olá muito boa materia, tenho um theme do wp que usa o JQuery, mas as funções nao estao ativa, existe algum arquivo que precisa ser upado no servidor para a função do jquery funcionar?
Grato