// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Trabalhando com Folhas de Estilo CSS em uma Aplicação em HTML5
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Trabalhando com Folhas de Estilo CSS em uma Aplicação em HTML5 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Trabalhando com Folhas de Estilo CSS em uma Aplicação em HTML5

As aplicações em HTML5 costumam combinar HTML, CSS e JavaScript para criar aplicações executadas em um browser e exibidas em diversos dispositivos, incluindo smartphones, tablets e laptops. Este documento demonstra como o IDE oferece ferramentas que podem ajudá-lo a trabalhar com regras de CSS para modificar o layout de uma aplicação. O IDE também fornece suporte para criar e usar os pré-processadores Sass e LESS CSS em sua aplicação.

A extensão NetBeans Connector para o browser Chrome pode ajudá-lo a exibir aplicações da forma como elas seria, exibidas em vários dispositivos. A extensão ativa o browser Chrome e o IDE para se comunicarem um com o outro. O modo Inspecionar no NetBeans pode ajudá-lo a localizar elementos no seu código-fonte, selecionando-os no browser. Depois que você selecionar um elemento no browser, poderá usar o IDE para exibir as regras de CSS e as propriedades aplicadas a esse elemento.

Para obter detalhes sobre como instalar a extensão NetBeans Connector para o browser Chrome, consulte o tutorial link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5 +].

Para observar um screencast deste tutorial, consulte link:../web/html5-css-screencast.html[+Vídeo do Trabalho com Folhas de Estilo CSS em Aplicações HTML5+].

== Para concluir este tutorial, você precisará dos recursos a seguir:

|===
|Software ou Recurso |Versão Necessária 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE, Java+] |7.4, 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |7 ou 8 

|link:http://www.google.com/chrome[+Browser Chrome+] |-- 

|link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+Extensão NetBeans Connector para Chrome+] |1.1 ou mais recente 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+HTML5DemoSiteTemplate.zip+] |-- 

|Pré-processador de CSS |link:http://sass-lang.com/install[+Sass+] ou
link:http://lesscss.org/[+LESS+] 
|===

*Observações:*

* O modelo link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+HTML5DemoSiteTemplate.zip+] é um modelo de site que você irá usar ao criar o projeto.
* Se você quiser comparar seu projeto com uma solução em funcionamento, poderá fazer download do link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoCssSiteTemplate.zip[+modelo de site+] do projeto acabado.
* Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.


== Criando a Aplicação do NetBeans em HTML5

Neste tutorial, você utilizará um site modelo para criar o projeto em HTML5. O modelo de site que você usa neste tutorial é o mesmo que foi salvo como modelo de site no tutorial link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5+]. Se você tiver executado as etapas do tutorial Conceitos Básicos, poderá usar o modelo de site que salvou na última seção. Como alternativa, você pode fazer download do modelo de site HTML5DemoSiteTemplate.zip.

Execute as etapas a seguir para criar a aplicação de um modelo de site.

1. Faça download do modelo HTML5 (link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+HTML5DemoSiteTemplate+])
2. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
3. Selecione a categoria *HTML5*e, em seguida, selecione *Aplicação HTML5*. Clique em Próximo.
4. Digite *HTML5DemoCss* para nome do projeto e especifique uma localização. Clique em Próximo.
5. Selecione a opção *Selecionar Modelo* e clique em Procurar para localizar o modelo de site ( ``HTML5DemoSiteTemplate.zip`` ). Clique em Finalizar. 
image::images/html5-css-newproject.png[title="Especifique o modelo de site no assistente Nova Aplicação em HTML5"]

Quando você clica em Finalizar, o IDE cria o projeto e abre o arquivo  ``index.html``  no editor. Na janela Projetos, você pode ver que o projeto contém  ``index.html`` , uma folha de estilo CSS, algumas bibliotecas JavaScript e algumas imagens. As janelas Regras de CSS e Navegador também são abertas no IDE.


== Exibindo a Aplicação em Dispositivos Diferentes

Neste tutorial, você executará a aplicação no browser Chrome com a extensão NetBeans Connector instalada. Quando a extensão for instalada, você poderá usar o menu do NetBeans no browser para redimensionar facilmente a janela do browser e exibir a aplicação como ela apareceria em dispositivos comuns.

*Observações.* Para esse tutorial, é recomendável usar o browser Chrome e instalar a extensão do NetBeans para Chrome. Consulte o tutorial link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5+] para obter detalhes sobre como instalar a extensão NetBeans Connector.

Execute as etapas a seguir para executar a aplicação no browser Chrome.

1. Confirme que Chrome com Integração NetBeans está selecionado na lista drop-down, na Barra de Ferramentas.
2. Clique no botão Executar na barra de ferramentas para executar a projeto no browser Chrome.

No browser, você pode ver uma menu expansível simples.

Você perceberá que há uma barra amarela na guia do browser que o notifica que o NetBeans Connector está depurando a guia. O IDE e o browser são conectados e podem se comunicar um com o outro quando a barra amarela está visível. Quando você inicializa uma aplicação HTML5 do IDE, o depurador JavaScript é ativado automaticamente. Quando você salva as alterações em um arquivo ou faz alterações em uma folha de estilos CSS, não precisa recarregar a página, pois a janela do browser será atualizada automaticamente para exibir as alterações.

Se você fechar a barra amarela ou clicar em Cancelar, quebrará a conexão entre o IDE e o browser. Se você interromper a conexão, será necessário iniciar a aplicação em HTML5 a partir do IDE.

Você obsevará também que o ícone do NetBeans ficará visível no campo do local do URL do browser. É possível clicar no ícone para abrir um menu que oferece várias opções para alterar o tamanho de exibição do browser e para ativar o modo Inspecionar no NetBeans.


[start=3]
. Clique no ícone Abrir Ação do NetBeans no campo URL do browser para abrir o menu NetBeans e selecionar Retrato do Tablet no menu.

A janela é redimensionada para o tamanho de um browser do tablet em modo retrato. O menu é estendido para preencher o lado direito e todo o menu ficar visível.

image::images/html5-css-tabletbrowser1.png[title="Tamanho de exibição de Retrato do Tablet no browser"]

Se você selecionar um dos dispositivos default no menu, a janela do browser se redimensionará de acordo com as dimensões do dispositivo. Isso permite que você veja como será a aparência da aplicação no dispositivo selecionado. As aplicações em HTML5 geralmente são projetadas para responder ao tamanho da tela do dispositivo em que são exibidas. Você pode usar regras de JavaScript e CSS que respondam ao tamanho da tela e modificar a forma como as aplicações são exibidas, de maneira que o layout seja otimizado para o dispositivo.


[start=4]
. Clique no ícone NetBeans novamente e selecione Paisagem do Smartphone no menu do NetBeans.
image::images/html5-css-tabletbrowser2.png[title="Selecione Paisagem do Smartphone no menu do NetBeans no browser"]

A janela é redimensionada para o tamanho de um smartphone em orientação paisagem e você poderá ver que a parte inferior do menu não fica visível sem a rolagem de tela.

image::images/html5-css-smartphonebrowser1.png[title="Janela do browser redimensionada para Paisagem do Smartphone"]

Na próxima seção, você modificará a folha de estilo para que seja possível exibir todo a menu sem rolar a tela em um smartphone ma view Paisagem.


== Modificando o Layout

Deve haver a possibilidade de fazer algumas pequenas alterações no elementos da página, de forma que nenhum rolagem de tela seja necessária. Essas alterações só devem ser aplicadas quando o tamanho do browser equivaler ao de um smartphone ou for menor. Quando está em orientação de paisagem, a janela do browser de um smartphone tem 480 pixels de largura e 320 pixels de altura.


=== Criar uma Folha de Estilo de Mídia

Neste exercício, você criará uma nova folha de estilo e adicionará uma regra de mídia para dispositivos com exibições de smartphone. Em seguida, você adicionará alguma Regras de CSS à regra de mídia.

1. Clique com o botão direito do mouse no nó da pasta  ``css`` , na janela Projetos, e escolha Nova > Folha de Estilo em Cascata no menu pop-up.
2. Digite *mycss* como Nome de Arquivo. Clique em Finalizar.

Quando você clicar em Finalizar, a nova folha de estilo será aberta no editor.


[start=3]
. Adicione a regra de mídia a seguir à folha de estilo.

[source,java]
----

/*My rule for smartphone*/
@media (max-width: 480px) {

}
----

Toda regra de CSS que você adicionar entre colchetes para esta regra será aplicada apenas quando a dimensão do browser for de 480 pixels de largura ou menos.

Crie modelos de código para os snippets de código que você usa mais frequentemente. Você pode criar modelos de código CSS na guia Modelos de Código na categoria Editor da janela Opções.


[start=4]
. Salve as alterações.

[start=5]
. Abra  ``index.html``  no editor.

[start=6]
. Adicione o link a seguir à folha de estilo entre as tags  ``<head>``  no  ``index.html`` . Salve as alterações.

[source,java]
----

<link type="text/css" rel="stylesheet" href="css/mycss.css">
----

Você pode usar a funcionalidade autocompletar código no editor para ajudá-lo a adicionar o link à folha de estilo.

 
=== Adicionando Regras de CSS

1. No browser Chrome, clique no ícone do NetBeans e selecione Inspecionar no Modo NetBeans, no menu.
2. Clique ma imagem no browser.

Um elemento é realçado quando selecionado no modo Inspecionar. Nesta tela, você pode ver que a imagem está realçada de azul.

image::images/html5-css-selectimage.png[title="Imagem selecionada no browser Chrome."]

No IDE, você pode ver que as regras e propriedades de CSS aplicadas ao  ``img``  são listadas na janela Estilos de CSS. A guia Seleção da janela Estilos de CSS tem três painéis que oferecem detalhes sobre o elemento selecionado.

image::images/html5-css-styleswindow1.png[title="Janela Estilos de CSS quando a imagem é selecionada."]


==== Painel Superior

No painel Propriedades da janela, é possível ver que seis pares propriedade-valor são aplicados ao elemento  ``img`` . Três dos pares ( ``borda`` ,  ``flutuação``  e  ``margem`` ) são aplicados via regra CSS para o elemento  ``img`` . Os três pares restantes são aplicados porque o elemento  ``img``  herda as propriedades dos seletores de classe que são aplicadas aos objetos que contêm o elemento  ``img`` . Você pode ver claramente a estrutura do DOM na janela Navegador. A propriedade  ``borda``  está selecionada no momento no painel Propriedades da janela Estilo CSS.


==== Painel Central

No painel central Estilos Aplicados, você pode ver que a propriedade  ``borda``  e o valor especificado em uma regra CSS definem o elemento  ``img`` . A regra está localizado na linha 12 do arquivo  ``basecss.css`` . Você pode clicar no local do painel para abrir a folha de estilo no editor.


==== Painel Inferior

O painel inferior exibe todas as propriedades definidas na regra CSS para a regra que está selecionada no painel central. Nesse caso, é possível verificar que a regra para  ``img``  define as propriedades  ``borda`` ,  ``flutuação``  e  ``margem`` .


[start=3]
. Clique na guia Documento na janela Estilos de CSS.

[start=4]
. Selecione o nó  ``css/mycss.css``  e clique no botão Editar Regras de CSS (image::images/newcssrule.png[title="Botão Editar Regras de CSS"]) para abrir a caixa de diálogo Editar Regras de CSS.
image::images/html5-css-styleswindow2.png[title="Caixa de diálogo Editar Regras de CSS"]

[start=5]
. Selecione o Elemento como Tipo de Seletor e digite *img* como Seletor.

[start=6]
. Selecione  ``css/mycss.css``  como Folha de Estilo e *(max-width:480px)* como Na Regra. Clique em OK.
image::images/html5-css-editcssrules.png[title="Caixa de diálogo Editar Regras de CSS"]

Quando você clica em OK, o IDE cria uma regra de CSS para  ``img``  na folha de estilo  ``css/mycss.css``  entre os colchetes da regra de mídia. A nova regra agora está listada no painel Estilos Aplicados.


[start=7]
. Clique na guia Seleção na janela Estilos de CSS.

Você pode ver que há duas regras de CSS para  ``img`` . Uma das regras está localizada em  ``mycss.css``  e a outra em  ``basecss.css`` .


[start=8]
. Selecione a nova regra  ``img``  (definida em  ``mycss.css`` ) no painel Estilos Aplicados da janela Estilos de CSS. 
image::images/html5-css-styleswindow2.png[title="Estilos para o elemento selecionado na janela Estilos de CSS."]

No painel inferior da janela, você pode ver que a regra não têm propriedades.


[start=9]
. Clique em Adicionar Propriedade na coluna esquerda, no painel inferior da janela Estilos de CSS e digite *largura*.

[start=10]
. Digite *90px* na coluna direita próxima à propriedade  ``width``  e tecle em Voltar ao teclado. 
image::images/html5-css-styleswindow3.png[title="Painel Propriedades da Imagem da janela Estilos de CSS"]

Quando você começar a digitar na coluna de valor verá que uma lista drop-down exibirá valores comuns para a propriedades  ``width`` .

Quando você acessa a chave Retornar a imagem no browser é automaticamente redimensionada para ficar com 90 pixels de largura. O IDE adicionou a propriedade à regra de CSS na folha de estilo  ``mycss.css`` . O editor a folha de estilo deve agora conter a regra a seguir.


[source,java]
----

/*My rule for smartphone*/
@media (max-width: 480px) {

    img {
        width: 90px;
    }

}
----

Algumas alterações adicionais precisam ser feitas na folha de estilo porque o menu ainda não cabe na janela.


[start=11]
. Selecione o elemento ( ``<ul>`` ) da lista não ordenada na janela do browser.
image::images/html5-css-smartphonebrowser2.png[title="Elemento da lista selecionado no browser"]

Quando você seleciona o elemento, pode ver que  ``<ul>``  está selecionada na janela Browser DOM e você pode ver os estilos aplicados a esse elemento na janela Estilo de CSS.

image::images/html5-css-browserdom.png[title="Listar elemento selecionado na janela Browser DOM"]

Se você selecionar  ``font-family``  na janela Estilos de CSS, poderá ver que a propriedade e o valor  ``font-family``  são definidos no seletor de classe  ``.ui-widget`` .


[start=12]
. Clique no arquivo  ``index.html``  no editor e clique na guia Documento na janela Estilos de CSS.

[start=13]
. Expanda o nó  ``css/mycss.css``  ma janela de Estilos de CSS.
image::images/html5-css-styleswindow4.png[title="Folha de Estilo selecionada na guia Documento da janela Estilos de CSS"]

[start=14]
. Clique no botão Editar Regras de CSS (image::images/newcssrule.png[title="Botão Editar Regras de CSS"]) na janela Estilos de CSS para abrir a caixa de diálogo Editar Regras de CSS.

[start=15]
. Selecione a Classe como Tipo de Seletor e digite *ui-widget* como Seletor.

[start=16]
. Selecione * ``css/mycss.css`` * como Folha de Estilo e *(max-width:480px)* como Na Regra. Clique em OK.

Quando você clica em OK, o IDE adiciona a nova regra à folha de estilo  ``mycss.css``  e abre o arquivo no editor. Se o arquivo não for aberto no editor, você pode clicar duas vezes na regra  ``ui-widget``  no nó  ``css/mycss.css``  na janela Estilos de CSS para abrir a folha de estilo. O cursor é colocado na linha que contém a regra na folha de estilo.


[start=17]
. Adicione a propriedade e o valor (em negrito) a seguir à regra para a  ``ui-widget`` .

[source,java]
----

.ui-widget {
    *font-size: 0.9em;*
}
----

Quando você altera o valor na folha de estilo, a página o atualiza automaticamente na janela do browser.

Você pode digitar a propriedade e o valor no editor e usar o recurso autocompletar código para ajudá-lo. Como alternativa, selecione a regra  ``.ui-widget``  no painel superior e clique no botão Adicionar Propriedade no painel inferior para abrir a caixa de diálogo Adicionar Propriedade.

image::images/html5-css-csseditor1.png[title="Recurso autocompletar código no editor"]

Depois de adicionar a regra, você pode ver que o menu agora se ajusta à página.

image::images/html5-css-smartphonebrowser3.png[title="Página exibida no browser com novas regras de CSS aplicadas"]

[start=18]
. Clique no ícone do NetBeans no browser e selecione Retrato do Tablet no menu.

Quando a janela do browser é redimensionada, você pode ver que as alterações na folha de estilo não afetam a exibição quando o tamanho da tela é maior do que 480 pixels de largura.


== Usando Pré-processadores de CSS

Além das ferramentas para editar os arquivos CSS padrão, o IDE também suporta o uso de pré-processadores Sass e LESS CSS para gerar folhas de estilo para suas aplicações. O IDE fornece assistente para gerar arquivos do pré-processador de CSS e para especificar diretórios com watch. Se você especificar um diretório com watch, os arquivos CSS serão gerados automaticamente cada vez que você modificar os arquivos do pré-processador de CSS no diretório.

*Observação.* Para usar um pré-processador de CSS é necessário instalar o software do pré-processador e especificar o local do executável. Você pode especificar o local do executável na janela Opções.

1. Instale o software do pré-processador de CSS no sistema local.

O IDE suporta os pré-processadores link:http://sass-lang.com/[+Sass+] e link:http://lesscss.org/[+LESS+]. Este tutorial demonstra como usar Sass para gerar os arquivos CSS, mas a configuração para LESS é semelhante.

*Observação.* Se estiver instalando o LESS no OS X pode ser necessário confirmar se o Node.js pode ser encontrado no diretório  ``usr/bin`` . Para obter detalhes, consulte a seguinte link:http://stackoverflow.com/questions/8638808/problems-with-less-sublime-text-build-system[+nota+].


[start=2]
. Expanda o projeto HTML5Demo na janela Arquivos.

[start=3]
. Clique com o botão direito do mouse na pasta  ``public_html``  na janela Arquivos e escolha Nova > Pasta no menu pop-up.

Se Pasta não for uma opção no menu pop-up, escolha Outro e selecione o tipo de arquivo Pasta na categoria Outro do assistente Novo Arquivo.


[start=4]
. Digite *scss* para Nome do Arquivo. Clique em Finalizar.

Quando você clicar em Finalizar o IDE gerará a nova pasta na pasta  ``public_html`` .


[start=5]
. Clique com o botão direito do mouse no nó da pasta  ``scss`` , na janela Projetos, e escolha Novo > Arquivo Sass no menu pop-up.

[start=6]
. Digite *mysass* como o Nome do Arquivo.

[start=7]
. Clique em Configurar para abrir a guia Pré-processador de CSS na janela Opções.

[start=8]
. Digite o caminho para o executável Sass ou clique em Procurar para localizar o executável em seu sistema local. Clique em OK para fechar a janela Opções.
image::images/html5-css-cssoptions.png[title="Página exibida no browser com novas regras de CSS aplicadas"]

[start=9]
. Selecione Compilar Arquivos Sass ao Salvar no assistente Novo Arquivo. Clique em OK.
image::images/html5-css-newsass.png[title="Página exibida no browser com novas regras de CSS aplicadas"]

Quando clicar em OK, o novo arquivo  ``mysass.scss``  de Sass será aberto no editor.


[start=10]
. Adicione o seguinte em  ``mysass.scss``  e salve suas alterações.

[source,java]
----

img {
    margin-right: 20px; 
    float:left; 
    border: 1px solid;

    @media (max-width: 480px) {
        width: 90px;
    }
}


.ui-widget {
    @media (max-width: 480px) {
        font-size: 0.9em;
        li {
            color: red; 
        }
    }
}
----

Ao salvar o arquivo, o pré-processador gera um arquivo  ``mysass.css``  de CSS na pasta  ``css`` . Se abrir  ``mysass.css``  no editor, você poderá ver as regras que foram geradas no arquivo  ``scss`` . Por default, as informações de depuração de CSS são geradas em  ``mysass.css`` . Quando não quiser mais que as informações de depuração sejam geradas, você pode desativar a geração em uma guia Pré-processadores de CSS na janela Opções.

*Observações.*

* Quando quiser modificar as regras de CSS você deve editar o arquivo  ``mysass.scss``  do pré-processador de Sass e não a folha de estilos  ``mysass.css``  porque a folha de estilos é gerada novamente cada vez que o arquivo do pré-processador é modificado e salvo.
* Para documentação sobre a sintaxe de Sass e outras funcionalidades de Sass, consulte a link:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#[+referência de Sass+].

[start=11]
. Abra  ``index.html``  e faça as seguintes alterações no link da folha de estilos de  ``mycss.css``  para  ``mysass.css`` . Salve as alterações.

[source,java]
----

<link type="text/css" rel="stylesheet" href="css/*mysass.css*">
----

Quando salvar o arquivo, a página do browser será atualizada automaticamente. Você poderá ver que os elementos do item da lista agora estão em vermelho.


[[summary]]
== Resumo

Neste tutorial, você aprendeu a adicionar e modificar as regras de uma aplicação em HTML5 para aprimorar a forma como a aplicação é exibida com um tamanho de tela menor. Você exibiu a aplicação em um browser que foi redimensionado ao tamanho de um smartphone padrão. Você usou o Modo Inspecionar no NetBeans no browser Chrome para ajudá-lo a localizar as regras de estilo de CSS e depois modificou as regras para otimizar o layout para uma tela menor.

link:/about/contact_form.html?to=3&subject=Feedback:%20Working%20With%20CSS%20Style%20Sheets%20in%20an%20HTML5%20Application[+Enviar Feedback neste Tutorial+]


[[seealso]]
== Consulte Também

Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em link:https://netbeans.org/[+netbeans.org+]:

* link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5+]. Um documento que demonstra como instalar a extensão NetBeans Connector para Chrome e criar e executar uma aplicação simples em HTML5.
* link:html5-js-support.html[+Depurando e Testando JavaScript em Aplicações em HTML5+]. Um documento que demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE.
* Capítulo link:http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm[+Desenvolvendo Aplicações HTML5+] em link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG[+Desenvolvendo Aplicações com o NetBeans IDE - Guia do Usuário+]

Para obter mais informações sobre o jQuery, consulte a documentação oficial:

* Home Page Oficial: link:http://jquery.com[+http://jquery.com+]
* Home Page da IU: link:http://jqueryui.com/[+http://jqueryui.com/+]
* Tutoriais: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+]
* Página Principal da Documentação: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+]
* Demonstrações de IU e Documentação: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]