Conceitos Básicos sobre Aplicações em HTML5.

Este documento demonstra como criar um projeto em HTML5 no IDE e algumas das funcionalidades no IDE que suportam o uso de JavaScript e CSS no seu projeto. Neste documento, você cria uma aplicação simples em HTML5 que usa uma biblioteca jQuery JavaScript para modificar uma lista em uma página Web.

Este documento demonstra também como instalar a extensão NetBeans Connector para o browser Chrome na Chrome Web Store.

Para assistir a um screencast deste tutorial, consulte Vídeo com Conceitos Básicos das Aplicações em HTML5.

Para obter um tutorial sobre como usar o jQuery em uma aplicação Web Java do NetBeans, consulte o tutorial Usando jQuery para Aprimorar a Aparência e a Usabilidade de uma Página Web.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 6.8, 6.9, 7.4 e 8.0

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

Software ou Recurso Versão Necessária
NetBeans IDE, Java 7.4, 8.0
JDK (Java Development Kit) versão 7 ou 8
Browser Chrome --
Extensão NetBeans Connector para Chrome 1.0.0 ou acima
Recursos do projeto de Demonstração em HTML5 --
Modelo de site do projeto finalizado --

Observações:

  • O arquivo zip com recursos do projeto contém imagens JPG e o arquivo CSS de que você precisa para adicionar ao projeto neste tutorial.
  • Se você quiser comparar seu projeto com uma solução em funcionamento, poderá fazer download do 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.

Usando o IDE com o Browser Chrome

Para tirar o máximo proveito de algumas ferramentas disponíveis no IDE que suportam o desenvolvimento da aplicação em HTML5, é recomendável usar o browser Chrome e instalar a extensão Conector NetBeans da Chrome Web Store. Você só precisa instalar a extensão uma vez.

Quando instalada, a extensão NetBeans Connector adiciona um menu Ações do NetBeans que é acessível na barra de localização de URL quando você executa um projeto NetBeans em HTML5 no browser Chrome. O menu Ações do NetBeans permite ativar o Modo Inspecionar no NetBeans e redimensionar rapidamente a janela do browser para as dimensões dos dispositivos de exibição comum. O depurador de JavaScript também é ativado automaticamente quando você executa uma aplicação em HTML5.

Instalando a Extensão na Chrome Web Store

Você será automaticamente solicitado a instalar a extensão NetBeans Connector se executar um projeto da aplicação em HTML5 do NetBeans no IDE e selecionar o Chrome com Integração com o NetBeans como browser de destino. Este exercício demonstra como instalar a extensão criando e executando um projeto fictício em HTML5. Você pode ignorar esse exercício e instalar a extensão quando for solicitado pelo IDE ou instalar a extensão NetBeans Connector diretamente da Chrome Web Store.

Observação. O IDE abrirá a Chrome Web Store no browser default. Se o Chrome não estiver definido como browser default para o IDE, você deverá abrir a janela Opções e selecionar Chrome na lista drop-down Web Browser, na categoria Geral, antes de executar as próximas etapas.

  1. Selecione Arquivo > Novo Projeto para abrir o assistente de Novo Projeto.
  2. Selecione Aplicação em HTML5 na categoria HTML/JavaScript. Clique em Próximo.
  3. Especifique um Nome e um Local para o projeto. Clique em Próximo.

    Para este exercício, o nome não é importante.

  4. Selecione Nenhum Modelo de Site. Clique em Finalizar.

    Quando você clicar em Finalizar, o IDE criará um novo projeto em HTML5 e abrirá o index.html no editor.

  5. Confirme que Chrome com Integração NetBeans está selecionado na lista drop-down, na Barra de Ferramentas.
  6. Clique em Executar na barra de ferramentas.
  7. Clique em Ir para Chrome Web Store na caixa de diálogo Instalar Extensão Chrome.
    tela da caixa de diálogo Instalar Extensão Chrome

    Quando você clica em Ir para Chrome Web Store, a página NetBeans Connector é aberta na Chrome Web Store, no browser Chrome.

    Observação. A janela Instalar Extensão Chrome exibe um botão no qual você clicará depois da instalação da extensão.

    tela da caixa de diálogo Instalar Extensão Chrome
  8. Vá para o browser Chrome e clique em Adicionar ao Chrome na página NetBeans Connector. Clique em Adicionar quando você for solicitado a confirmar se deseja adicionar a extensão.
    tela da página do NetBeans Connector na Chrome Web Store

    Quando a extensão for instalada, você verá uma notificação de que a extensão foi adicionada. O ícone do NetBeans Connector ficará visível na barra de localização de URL quando você executar um projeto em HTML5 no NetBeans no browser Chrome.

    tela de confirmação de que a extensão foi instalada
  9. No IDE, clique em Executar Projeto Novamente na caixa de diálogo Instalar Extensão Chrome.

    Quando você clica em Executar Projeto Novamente, uma nova guia é aberta no browser Chrome e você vê a página de índice da aplicação em HTML5.

    Depois que a extensão é instalada, você vê o ícone NetBeans Connector na barra de localização de URL quando executa um projeto HTML5 no NetBeans no browser Chrome.

Se você abrir a página Extensões Chrome (chrome://extensions/) para o browser Chrome, verá que a extensão agora está ativada.

tela Extensões do Chrome

Observação. Como alternativa, você pode instalar a extensão NetBeans Connector diretamente da Chrome Web Store, executando as etapas a seguir.

  1. Inicie o browser Chrome e vá para a Chrome Web Store.
  2. Procure a extensão NetBeans Connector na Chrome Web Store.
  3. Clique em Adicionar ao Chrome nos resultados da pesquisa e clique em Adicionar quando for solicitado a adicionar a extensão.
    tela da extensão NetBeans Connector na Chrome Web Store

Instalação Off-line da Extensão

Se você não consegue estabelecer conexão com a Chrome Web Store, pode instalar a extensão NetBeans Conector incorporada ao IDE. Se você executa um projeto NetBeans em HTML5 e for solicitado a instalar a extensão NetBeans Connector, poderá executar as etapas a seguir para instalar a extensão, caso não consiga acessar a Chrome Web Store.

  1. Clique em Não Conectado na caixa de diálogo Instalar Extensão Chrome.
    tela da caixa de diálogo Instalar extensão Chrome
  2. Clique em localizar na caixa de diálogo para abrir a pasta de instalação do NetBeans IDE no seu sistema local que contém a extensão netbeans-chrome-connector.crx.
    tela Extensões do Chrome
  3. Abra a página de extensões Chrome (chrome://extensions/) no seu browser Chrome.
    tela Extensões do Chrome
  4. Arraste a extensão netbeans-chrome-connector.crx para a página Extensões no browser e clique em Adicionar para confirmar que deseja adicionar a extensão.

    Depois de adicionar a extensão, você verá que a extensão NetBeans Connector foi adicionada à lista de extensões instaladas.

  5. Clique em Sim, o plug-in está instalado agora na caixa de diálogo Instalar Extensão Chrome para abrir o projeto do NetBeans em HTML5 no browser Chrome. Você verá o ícone do NetBeans Connector na barra de localização da guia do browser.

Usando o Browser com Kit Web Incorporado

É recomendável executar suas aplicações em HTML5 no browser Chrome com a extensão NetBeans Connector instalada, quando você estiver desenvolvendo a aplicação. A opção Integração de Chrome com NetBeans é selecionada por padrão como destino de execução quando você cria uma aplicação em HTML5. No entanto, também é possível executar a aplicação em HTML5 no Browser com Kit Web Incorporado integrado ao IDE.

Quando você executa a aplicação em HTML5 no Browser com Kit Web Incorporado, o IDE abre a janela Web Browser no IDE. O Browser com Kit Web Incorporado suporta muitas funcionalidades ativadas no browser Chrome quando a extensão NetBeans Connector é instalada, incluindo modo Inspecionar, diversas opções de tamanho de tela e depuração de JavaScript.

Observação. Quando você escolhe Janela > Web > Web Browser no menu principal, o IDE abre o browser especificado como Web Browser na janela Opções.

Execute as etapas a seguir para executar uma aplicação em HTML5 no Browser com Kit Web Incorporado.

  1. Selecione Browser com Kit Web Incorporado na lista drop-down na barra de ferramentas.
    tela da lista drop-down de browsers de destino na barra de ferramentas
  2. Clique em Executar na barra de ferramentas ou clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Executar.

    Quando você executa a aplicação, a janela Web Browser é aberta no IDE.

    tela da janela Browser com Kit Web Incorporado

    É possível clicar nos ícones da barra de ferramentas da guia Web Browser para ativar o modo Inspecionar e alternar rapidamente entre os diferentes tamanhos de exibição.

Criando um projeto NetBeans em HTML5

Neste exercício, você usará o assistente de Novo Projeto no IDE para criar um novo projeto em HTML5. Para este tutorial, você criará um projeto em HTML5 muito básico que tem apenas um arquivo index.html. No assistente, você também selecionará algumas bibliotecas jQuery JavaScript para usar no projeto.

  1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
  2. Selecione a categoria HTML5e, em seguida, selecione Aplicação HTML5. Clique em Próximo.
    tela do modelo de Aplicação em HTML5 no assistente de Novo Projeto
  3. Digite HTML5Demo para Nome do Projeto e especifique o diretório no seu computador onde você quer salvar o projeto. Clique em Próximo.
  4. Na Etapa 3. Modelo de Site, selecione Nenhum Modelo de Site. Clique em Próximo.
    tela do painel Modelos de Site no assistente da Nova Aplicação em HTML5

    Quando você seleciona a opção Nenhum Modelo de Site, o assistente gera um projeto básico em branco do NetBeans em HTML5. Se você clicar em Finalizar agora, o projeto conterá apenas uma pasta Root do Site e um arquivo index.html nessa pasta.

    A página Modelo de Site do assistente permite selecionar em uma lista de modelos on-line populares de projetos em HTML5 ou especificar o local de um arquivo compactado .zip de um modelo de site. Você pode digitar o URL do arquivo compactado .zip ou clicar em Procurar para especificar uma localização no seu sistema local. Quando você cria um projeto com base em um modelo de site, os arquivos, as bibliotecas e a estrutura do projeto são determinados pelo modelo.

    Observação: Você deve estar on-line para criar um projeto baseado em um dos modelos on-line da lista.

  5. Na Etapa 4. Arquivos de JavaScript, selecione as bibliotecas JavaScript jquery e jqueryui no painel Disponível e clique no ícone de seta para a direita ( > ) para mover as bibliotecas selecionadas para o painel Selecionado do assistente. Por default, as bibliotecas são criadas na pasta js/libraries do projeto. Para este tutorial, você utilizará as versões "minimizadas" das bibliotecas JavaScript.

    Você pode usar o campo de texto no painel para filtrar a lista de bibliotecas JavaScript. Por exemplo, digite jq no campo para ajudá-lo a encontrar as bibliotecas jquery. Você pode usar Ctrl-clique nos nomes das bibliotecas para selecionar várias bibliotecas.

    tela do painel Bibliotecas de JavaScript no assistente da Nova Aplicação em HTML5

    Observações.

    • Você pode clicar no número de versão da biblioteca na coluna Versão para abrir uma janela pop-up que permite selecionar a ordem das versões de biblioteca. Por default, o assistente exibe a versão mais recente.
    • As versões minimizadas das bibliotecas JavaScript são versões compactadas e o código não é abrangente quando exibido em um editor.
  6. Clique em Finalizar para concluir o assistente.

    Quando você clicar em Finalizar, o IDE criará o projeto e exibirá um nó para o projeto na janela Projetos,e abrirá o arquivo index.html no editor.

    tela do painel Bibliotecas de JavaScript no assistente da Nova Aplicação em HTML5

    Se você expandir a pasta js/libs na janela Projetos, poderá ver que as bibliotecas JavaScript que você especificou no assistente do Novo Projeto foram automaticamente adicionadas ao projeto. Você pode remover uma Biblioteca JavaScript de um projeto clicando com o botão direito do mouse no arquivo JavaScript e escolhendo Deletar no menu pop-up.

    Para adicionar uma biblioteca JavaScript a um projeto, clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto. Você pode adicionar bibliotecas no painel Bibliotecas JavaScript da janela Propriedades do Projeto. Como alternativa, é possível copiar um arquivo JavaScript que está no sistema local diretamente na pasta js.

    Agora, você pode testar se o projeto é exibido corretamente no browser Chrome.

  7. Confirme que Chrome com Integração do Conector NetBeans está selecionado na lista drop-down do browser, na barra de ferramentas.
    tela da lista drop-down na barra de ferramentas
  8. Clique com o botão direito do mouse no nó na janela Projetos e selecione Executar.

Quando você seleciona Executar, o IDE abre uma guia no browser Chrome e exibe á página index.html default da aplicação. A janela Browser DOM é aberta no IDE e exibe a árvore DOM da página que é aberta no browser.

tela da aplicação na guia do browser Chrome

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 executar novamente 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.

tela do menu NetBeans na guia do browser Chrome

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.

Editando o Arquivo HTML

Neste exercício, você adicionará os recursos do projeto ao projeto e editará o arquivo index.html para adicionar links aos recursos e adicionar algumas regras de CSS. Você verá como alguns seletores simples de CSS, quando combinados com JavaScript, podem alterar significativamente a forma como a página é exibida em um browser.

  1. Faça download do arquivo compactado recursos do projeto e extraia o conteúdo.

    O arquivo compactado zip contém duas pastas com arquivos que você precisa adicionar ao projeto: pix e css.

  2. Copie as pastas pix e css na pasta Root do Site.

    Observação. Se você estiver observando a estrutura de diretório do projeto, deverá copiar as pastas na pasta public_html.

    tela do menu NetBeans na guia do browser Chrome
  3. Abra index.html no editor (se ainda não estiver aberto).
  4. No editor, adicione referências para as bibliotecas JavaScript que você adicionou quando criou o projeto, adicionando o seguinte código (em negrito) entre as tags <head> de abertura e fechamento existentes.
    <html>
      <head>
        <title></title>
        <meta charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
      </head>
      <body>
        TODO write content
      </body>
    </html>

    Você pode utilizar a funcionalidade de autocompletar código no editor para ajudá-lo.

    tela do recurso autocompletar código no editor
  5. Remova o comentário default 'TODO write content' e digite o seguinte entre as tags body.
        <body>
            <div>
    
                <h3><a href="#">Mary Adams</a></h3>
                <div>
                    <img src="pix/maryadams.jpg" alt="Mary Adams">
                    <ul>
                        <li><h4>Vice President</h4></li>
                        <li><b>phone:</b> x8234</li>
                        <li><b>office:</b> 102 Bldg 1</li>
                        <li><b>email:</b> </li>
                    </ul>
                    <br clear="all">
                </div>
    
                <h3><a href="#">John Matthews</a></h3>
                <div>
                    <img src="pix/johnmatthews.jpg" alt="John Matthews">
                    <ul>
                        <li><h4>Middle Manager</h4></li>
                        <li><b>phone:</b> x3082</li>
                        <li><b>office:</b> 307 Bldg 1</li>
                        <li><b>email:</b> </li>
                    </ul>
                    <br clear="all">
                </div>
    
                <h3><a href="#">Sam Jackson</a></h3>
                <div>
                    <img src="pix/samjackson.jpg" alt="Sam Jackson">
                    <ul>
                        <li><h4>Deputy Assistant</h4></li>
                        <li><b>phone:</b> x3494</li>
                        <li><b>office:</b> 457 Bldg 2</li>
                        <li><b>email:</b> </li>
                    </ul>
                    <br clear="all">
                </div>
    
                <h3><a href="#">Jennifer Brooks</a></h3>
                <div>
                    <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
                    <ul>
                        <li><h4>Senior Technician</h4></li>
                        <li><b>phone:</b> x9430</li>
                        <li><b>office:</b> 327 Bldg 2</li>
                        <li><b>email:</b> </li>
                    </ul>
                    <br clear="all">
                </div>
            </div>
        </body>
  6. Salve as alterações.

    Quando você salvar as alterações, a página é automaticamente recarregada no browser e deve ter aparência semelhante à da imagem.

    tela da página recarregada na guia do browser Chrome
  7. Digite as seguintes regras de CSS em linha entre as tags <head> no arquivo.
    <style type="text/css">
        ul {list-style-type: none}
        img {
            margin-right: 20px; 
            float:left; 
            border: 1px solid;
        }
    </style>

    Pressione Ctrl-espaço para usar o recurso autcompletar código no editor quando você adicionar as regras de CSS.

    tela do recurso autocompletar código das regras CSS no editor

    Se você abrir a janela do Browser DOM, poderá visualizar a estrutura atual da página.

    tela da janela Browser DOM que mostra a árvore DOM
  8. Adicione o link a seguir à folha de estilo (em negrito) entre as tags <head>.
    <head>
    ...
        <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
        <link type="text/css" rel="stylesheet" href="css/basecss.css">
    ...
    </head>

    A folha de estilo basecss.css é baseada em algumas das regras de CSS definidas na folha de estilo de CSS personalizada no tema "UI lightness" de jQuery.

    É possível abrir a folha de estilo basecss.css no editor e modificá-la para adicionar as regras de CSS que você adicionou na etapa anterior ou criar uma nova folha de estilos para as regras de CSS.

  9. Adicione o seguinte código entre as tags <head> para executar um script de jQuery quando os elementos da página são carregados.
        <script type="text/javascript">
            $(document).ready(function() {
    
            });
        </script>
    </head>

    O jQuery funciona conectando atributos e comportamentos do JavaScript aplicados dinamicamente a elementos do DOM (Modelo de Objetos do Documento). As instruções jQuery usadas neste exemplo deverão ser executadas somente depois de todos os elementos do DOM serem carregados pelo browser. Isso é importante porque os comportamentos do jQuery se conectam a elementos do DOM e esses elementos devem estar disponíveis para o jQuery para obtermos os resultados esperados. O jQuery cuida disso com sua função incorporada (document).ready, que segue o objeto jQuery, representado por $.

    Você também pode usar a versão abreviada desta função a seguir.

    $(function(){
    
    });

    As instruções para o jQuery tomam a forma de um método JavaScript, com uma literal opcional de objeto representando um array de parâmetros, e devem ser colocadas entre chaves {} dentro da função (document).ready para serem executadas somente no momento apropriado, que é após o DOM ser completamente carregado.

  10. Adicione o seguinte código (em negrito) na função (document).ready, entre as chaves {}:
        <script type="text/javascript">
            $(document).ready(function() {
                $("#infolist").accordion({
                    autoHeight: false
                });
            });
        </script>
    </head>

    Esse código chamará o script do widget accordion do jQuery que está incluído na biblioteca de IU do jQuery. O script do accordion modificará os elementos dentro do objeto do DOM identificado como infolist. Nesse código, #infolist é um seletor de CSS conectado a um elemento de DOM exclusivo que tem um atributo id com valor infolist. Ele é conectado usando notação de ponto ('.') típica do JavaScript à instrução jQuery que usa o método accordion() para exibir esse elemento.

    Na próxima etapa, você identificará um elemento na página como infolist.

    Observação. Você também especificou 'autoHeight: false' no snippet de código acima. Isso impede o widget accordion de definir a altura de cada painel com base na parte mais alta do conteúdo contida na marcação. Para obter mais informações, consulte a documentação da API do accordion.

    A seção <head>do arquivo index.html deve ter a aparência a seguir.

    <html>
        <head>
            <title></title>
            <meta charset="UTF-8">        
            <meta name="viewport" content="width=device-width">
            <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
            <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
            <link type="text/css" rel="stylesheet" href="css/basecss.css">
    
            <style type="text/css">
                ul {list-style-type: none}
                img {
                    margin-right: 20px; 
                    float:left; 
                    border: 1px solid;
                }
            </style>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("#infolist").accordion({
                        autoHeight: false
                    });
                });
            </script>
        </head>

    Você pode organizar seu código clicando com o botão direito do mouse no editor e selecionando Formato.

  11. Modifique o elemento <div> que circunscreve a página Conteúdo adicionando o seguinte seletor e valor id (em negrito).
    <body>
        <div id="infolist">
                

    Esse elemento <div> abrange o conteúdo da página (os quatro conjuntos de tags <h3> e tags <div> que você adicionou anteriormente no tutorial).

    É possível adicionar o seletor ao elemento na caixa de diálogo Editar Regras de CSS. Para abrir a caixa de diálogo Editar Regras de CSS, clique com o botão direito do mouse na tag <div> do editor e escolha Editar Regras de CSS no menu pop-up. Como opção, se o cursor de inserção estiver na tag <div> do editor, clique no botão Editar Regras de CSS (tela do recurso autocompletar código no editor) na janela Estilos de CSS (Janela > Web > Estilos de CSS).

    tela da janela Estilos de CSS

    Na caixa de diálogo Regras de CSS, selecione id como o Tipo de Seletor e digite infolist como o Seletor. Confirme que a opção Aplicar Alterações ao Elemento está selecionada.

    tela da caixa de diálogo Editar Regras de CSS

    Quando você clicar em OK na caixa de diálogo, uma regra CSS para o seletor infolist será automaticamente adicionada à folha de estilo basecss.css.

  12. Salve suas alterações de index.html (Ctrl-S; ⌘-S no Mac).

    Quando você salva as alterações, a página no web browser é recarregada automaticamente. Você pode ver que o layout da página mudou e que a página agora usa as regras de estilo de CSS definidas na folha de estilo basecss.css. Uma das listas abaixo de <h3> está aberta, mas as demais foram recolhidas. Você pode clicar em um elemento <h3> para expandir a lista.

    tela de projeto carregado no browser

    A função accordion do jQuery agora modifica todos os elementos da página que estão contidos no objeto DOM infolist. Na janela Navegador, você pode ver a estrutura do arquivo HTML e o elemento div identificado por id=infolist.

    tela da janela Navegador

    Você pode clicar com o botão direito em um elemento na janela Navegador e selecionar Ir para Origem para navegar rapidamente para o local desse elemento no arquivo de origem.

    Na janela Browser DOM, você pode ver os elementos DOM na página que é renderizada no browser e os estilos JQuery aplicados aos elementos.

    tela da janela Browser DOM

    Quando o modo Inspecionar no NetBeans está ativado no browser, a seleção de um elemento na janela do browser destaca o elemento na janela Browser DOM.

Salvando o Projeto como Modelo de Site

Você pode salvar seu projeto modelo como um modelo de site para ser usado como modelo para criar outros sites em HTML5 baseados no projeto. O site modelo pode incluir bibliotecas JavaScript, arquivos CSS, imagens e modelos para arquivos HTML. O IDE fornece um assistente para ajudá-lo a selecionar os arquivos que você deseja incluir no modelo do site.

  1. Clique com o botão direito do mouse na janela Projetos e escolha Salvar como Modelo no menu pop-up.
  2. Digite HTML5DemoSiteTemplate no campo Nome e especifique o local em que você quer salvar o modelo.
  3. Confirme se todos os arquivos foram selecionados. Clique em Finalizar.

    Se você expandir os nós da árvore na caixa de diálogo, poderá ver os arquivos que serão incluídos no modelo de site.

    Tela da caixa de diálogo Criar Modelo de Site

    É possível ver que esse modelo de site incluirá o arquivo index.html, a folha de estilo CSS, as imagens usadas no projeto e as bibliotecas de JavaScript. O site modelo também pode incluir quaisquer arquivos e testes de configuração.

    Quando você clicar em Finalizar, o IDE gerará o modelo de site como um arquivo compactado .zip.

Quando você quiser criar um projeto baseado no modelo de site, especifique o local do arquivo compactado .zip no painel Modelo do Site no assistente do Novo Projeto.

Resumo

Neste tutorial, você aprendeu como criar um projeto em branco em HTML5 que usa algumas bibliotecas jQuery JavaScript. Você também aprendeu a instalar a extensão NetBeans Connector para o browser Chrome e a executar projetos em HTML5 no browser. Quando você editou o arquivo index.html, viu que o IDE oferece algumas ferramentas que podem ajudá-lo a editar arquivos HTML e CSS.



Consulte Também

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

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

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo