Já abordámos a programação HTMLprogramação PHP anteriormente e agora é altura de iniciarmos o nosso Guia jQuery! A esta altura você provavelmente já consegue criar as suas próprias páginas HTML / CSS com alguma qualidade, mas aquilo que se pretende não é apenas alguma qualidade, mas sim a melhor qualidade. Para adicionar mais qualidade, beleza e também funcionalidade aos seus websites, deverá considerar utilizar jQuery como um complemento que o ajudará a alcançar o que pretende. jQuery não poder ser utilizado sem Javascript, pois sem Javascript você não poderá adicionar os comportamentos, sofisticadas interacções e outras funcionalidades ao seu website. Certamente deverá saber também que Javascript é considerado um “monstro” da programação, super complexo que nem todos conseguem dominar, e é aí que está o segredo jQuery guardado. Alguns dos gigantes da internet, como o Google, WordPress ou Amazon utilizam jQuery nas suas páginas. Porquê? É isso que lhe vamos dar a entender com o Guia jQuery da Escola Criatividade!

jQuery

1. O QUE HÁ DE TÃO BOM NO JQUERY?

jQuery é um facilitador no meio da dificuldade – torna possível mexer com efeitos, pedidos AJAX ou mesmo com o DOM, de uma forma tão fácil que lhe irá dar imenso gozo utilizá-lo. Além de tudo o que está inerente ao que referimos anteriormente, jQuery permite-lhe ainda simplificar o seu código e torná-lo mais leve para que o carregamento da suas páginas web seja mais rápido. Quer saber mais? Continue a ler!

1.1 – COMPATIBILIDADE COM NAVEGADORES

Um dos grandes benificios da utilização de jQuery é a compatibilidade com os navegadores. Qualquer pessoa que tenha escrito código Javascript de um modo extensivo sabe quais são os problemas de compatibilidades com os navegadores – um design que esteja correcto no Mozilla Firefox e Internet Explorer 8, pode estar completamente errado no Internet Explorer 7, e este é só um exemplo! A equipa de desenvolvimento do jQuery está ciente das questões criadas pela compatibilidade com os navegadores, e mais importante que isso é que eles sabem o porquê das diferenças e passam isso para a biblioteca jQuery, criando uma das ferramentas com mais taxa de compatibilidade a nível dos navegadores – tudo aquilo que você criar com jQuery irá seguramente ser suportado por todos os navegadores, incluíndo aquele que é o favorito para capturar erros: Internet Explorer 6. Só com esta questão irá poupar imenso tempo, dinheiro e saúde!

1.2 – SELECTORES CSS3

Este é um ponto brilhante, em que jQuery consegue garantir que a tecnologia do futuro, CSS3, consegue ser compatível com a tecnologia anterior, nomeadamente o Internet Explorer 6. Dá para imaginar? Quando CSS3 chegou havia imensos problemas de compatibilidades entre os navegadores relativamente às novas funcionalidades que a actualização trazia. Se você tem interesse em aprender os selectores, sugerimos a leitura do nosso artigo Programação CSS para iniciantes (Parte IV) e os seus antecessores.

1.3 – JQUERY UI

jQuery já foi amplamente utilizado para criar widgets e efeitos, alguns dos quais justificaram com a sua qualidade o facto de fazer parte da própria biblioteca jQuery. No entanto, a equipa jQuery decidiu em prol de manter a biblioteca jQuery focada naquilo que torna jQuery tão bom, criar um pacote , uma nova biblioteca que pode ser aplicada ao jQuery, complementando-a. Essa biblioteca é chamada de jQuery User Interface (jQuery UI) e contempla uma panóplia de efeitos e widgets avançados que são acessíveis a todos e completamente personalizáveis através do uso de temas. Sliders, caixas de diálogo, calendários e muito mais, todas estas funcionalidades estarão à sua disposição para que você além de criar fantásticos produtos, os crie de forma a que utilize menos tempo, e consequentemente ganhe mais dinheiro. Mesmo que você utilize jQuery para uso pessoal, irá sair sempre a ganhar!

1.4 – PLUGINS

A equipa jQuery fez um grande trabalho ao tornar a biblioteca jQuery extensível ao incluírem um framework que possibilita a extensão da biblioteca, possibilitando e facilitando dessa forma a criação de plugins que podem ser utilizados nos projectos jQuery, bem como ser partilhados entre desenvolvedores. Algumas das particularidades mais avançadas que antes figuravam na biblioteca jQuery, foram transferidos sob forma de plugin para tornar a biblioteca base do jQuery leve e rápida. Não se preocupe, qualquer funcionalidade adicional que você precise, poderá facilmente obtê-la no website de plugins jQuery em http://plugins.jquery.com/.

1.5 – CÓDIGO LIMPO

A separação entre os scripts e a apresentação de página é uma boa prática no caminho do desenvolvimento web, embora ofereça uma série de obstáculos. jQuery torna bastante fácil livrar-se do seu código markup de script em linha, graças à sua capacidade de interligar os elementos através de métodos fáceis. O facto de jQuery não ter um método de inserção de código em linha, faz com que haja a necessidade de separar o código, o que no final acaba por ser bom, obtendo um código limpo e muito legível, dando espaço a alterações futuras com rapidez e acuidade.

2. FAZENDO DOWNLOAD DO JQUERY

Fazer o download da biblioteca jQuery é o método mais utilizado para usufruir de todo o seu potencial. Pode sempre obter a última versão da biblioteca jQuery no seu site oficial em http://jquery.com/. Na altura da criação deste artigo, a versão mais recente é a 1.7.1

3. UTILIZAR JQUERY

No nosso artigo anterior intitulado Tutorial jQuery: o que é e como usar o jQuery! já fizémos a abordagem de como utilizar o jQuery, mas nunca é demais relembrar num novo artigo. Existem dois métodos que você pode aplicar para utilizar jQuery – ou fazendo download dos ficheiros e enviando para o seu servidor, e linkar directamente para esses ficheiros, ou então linkar directamente para os ficheiros alojados no Google ou na Microsoft. Vejamos como:

Utilizando ficheiros localmente:

Depois de fazer o download dos ficheiros, introduza o seguinte código na secção <head> do seu documento:

<script type="text/javascript" src="jquery-1.7.1.js"></script>

Note que neste caso o ficheiro da biblioteca jQuery encontra-se no mesmo diretório que o documento. Se optar por introduzir o ficheiro da biblioteca jQuery em outro diretorio, é necessário indicar o caminho no src=” “.

Utilizando ficheiros remotos (Google):

Insira o seguinte código na secção <head> do seu documento.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Nota: Este código irá sempre buscar a última versão disponível da biblioteca jQuery!

A alternativa, linkando para a versão actual:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Utilizando ficheiros remotos (Microsoft):

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

4. COMPRIMIDO OU DESCOMPRIMIDO?

É possível utilizar duas versões da biblioteca jQuery, uma comprimida e outra descomprimida. A versão comprimida é mais conhecida como “minified” e a descomprimida mais conhecida como “development”. Então quais são as diferenças? Se você é um utilizador jQuery e não pretende desenvolver novos plugins nem criar nada de novo, apenas utilizar o existente, a versão minified é a mais certa para si. Isto porque ambas as versões contêm o mesmo código, apenas foram removidos espaços e encurtados os nomes de variáveis. Assim você poderá reduzir os gastos em tráfego e otimizar o carregamento das suas páginas web. Se está interessado em abrir o ficheiro da biblioteca jQuery, sugerimos fortemente a versão development, pois a versão minified é praticamente ilegível. Gostaria de saber mais sobre como melhorar a sua programação? Consulte os artigos 10 dicas para se tornar um melhor programador PHP8 Estratégias para Programar Mais Rápido!

NÃO PERCA A CONTINUAÇÃO!

Não perca a continuação do Guia jQuery da Escola Criatividade, que lhe continuará a trazer informação e conteúdo útil que certamente poderá aplicar no seu dia-a-dia enquanto desenvolvedor ou curioso da área!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. MS Empregos e Oportunidades
    8 de fevereiro de 2012

    Olá,

    Ótimo o seu artigo, estou precisando me empenhar em JQuery mas meio sem tempo, então pego o WordPress, um tema Pro e faço meu trabalho.

    Mas programar no dedão, quero aprender com certeza.

    Abraços



    • Diogo Espinha
      20 de fevereiro de 2012

      Olá MS Empregos e Oportunidades, obrigado pela sua visita e comentário!

      Abraço



  2. Jessica
    27 de abril de 2012

    Olá…tudo bem??
    Já pesquisei em vários sites, e até agora não consegui resolver meu problema.
    Tenho no meu blogger um gadjet de slides e esta semana inseri o zoom Jqueri..só que o slide parou de funcionar..
    Percebi então que os códigos dos dois (jquer e slides) estão um sobre o outro, pois nos tutoriais de onde eu peguei esses códigos, pediam que eu colasse os códigos logo acima da tag .

    Segue abaixo:

    (até aqui é o código do slide, abaixo começa do do zoom)

    $().ready(function() {
    $('a.zoom').each(function(i) {
    $(this).easyZoom();
    });
    });

    Como eu faço para que os dois trabalhem sem se confrontar entre si??? Por favor…me ajudem!!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz