| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> |
| <html> |
| <head> |
| <title>Suporte ao Desenvolvimento Web HTML5</title> |
| <meta http-equiv="content-language" content="en"> |
| <meta name="description" content="DESCRIPTION HERE"> |
| <link rel="stylesheet" type="text/css" href="../../features.css"> |
| <link rel="stylesheet" type="text/css" href="/images_www/js/colorbox/colorbox.css"> |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| <body> |
| <script type="text/javascript" src="/images_www/js/colorbox/jquery.colorbox-min.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| $('a.cbox').colorbox({rel:'cbox',opacity:0.7}); |
| }); |
| </script> |
| <div style="margin:10px 20px 0px 0px;"> |
| <h1>Suporte ao Desenvolvimento Web HTML5</h1> |
| <p><a href="../../images_www/v7/3/features/html5-dev.png"><img alt="Desenvolvimento da aplicação Corporativa Java no NetBeans IDE" border="0" src="../../images_www/v7/3/features/html5-dev-cut.png"><br /> <span class="font-11">Clique na imagem para exibição em tela inteira</span></a><br /></p> |
| <p class="intro"> |
| A partir do NetBeans IDE 7.3, foram introduzidos novas funcionalidades para oferecer suporte e melhorar a experiência de desenvolvimento com aplicações Web no lado do cliente que utilizam a família de tecnologias HTML 5. Você pode usá-lo para criar interessantes aplicações Web de forma rápida e intuitiva, que sejam compatíveis com o paradigma de design Web direcionado a desktops e plataformas móveis ao mesmo tempo. Além disso, você pode usar as tecnologias de HTML5 nas aplicações <a href="../java-on-server/index.html">Java EE</a> e <a href="../php/index.html">PHP</a>. |
| </p> |
| <div class="line"> </div> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im1"><a class="cbox" href="../../images_www/v7/3/features/html5-app.png" title="Suporte ao desenvolvimento da aplicação HTML5"><img alt="" src="../../images_www/v7/3/features/html5-app-cut.png" width="320" /></a></span> |
| <h2>Suporte Acelerado ao Desenvolvimento em HTML5</h2> |
| <p> |
| O NetBeans IDE permite o desenvolvimento acelerado da aplicação Web HTML5 logo que você cria um projeto em HTML5. Você pode selecionar em uma lista on-line de modelos comuns de projetos em HTML5 ou especificar a localização de um arquivo .zip de um modelo de site. 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.</p> |
| <p>Se preferir, você pode usar todas as funcionalidades de HTML5 descritas abaixo, após criar as <a href="../java-on-server/index.html">aplicações Java EE</a> e as <a href="../php/index.html">aplicações PHP</a>. |
| <p> |
| Depois de configurados, a funcionalidade de visualização ao vivo das páginas Web, o suporte ao editor, a capacidade de depuração e outras funcionalidades ajudam no desenvolvimento, no teste e na depuração das aplicações em HTML5, Java EE e PHP.<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-gettingstarted.html">Conceitos Básicos do Desenvolvimento em HTML5 </a> |
| </p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im2"><a class="cbox" href="../../images_www/v7/3/features/html5-preview.png" title="Visualização ao vivo das páginas Web"><img alt="" src="../../images_www/v7/3/features/html5-preview-cut.png" width="320" /></a></span> |
| <h2>Visualização ao Vivo das Páginas Web</h2> |
| <p> |
| Melhor que o WYSIWYG, como a maioria dos desenvolvedores profissionais admitiria, a forte integração com o Chrome e o Browser interno Incorporado do WebKit, ambos baseados no WebKit, garante uma conexão inigualável entre seu código e o design da página. |
| </p> |
| <p> |
| Com o uso das APIs remotas do WebKit, você continua a ter visibilidade completa e controle do código no IDE, obtendo feedback visual instantâneo da página do browser. <br /> |
| </p> |
| |
| <p><b>Observação:</b> a visualização ao vivo das páginas Web também ficam disponíveis nos dispositivos móveis, ou seja, não apenas no Chrome e no Browser interno do WebKit Incorporado, mas também no Chrome e Android e no Mobile Safari em iOS. |
| </p> |
| |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im3"><a class="cbox" href="../../images_www/v7/3/features/html5-layout.png" title="Opções de Layout"><img alt="" src="../../images_www/v7/3/features/html5-layout-cut.png" width="320" /></a></span> |
| <h2>Recurso de Design para Web Responsivo </h2> |
| <p> |
| O NetBeans IDE suporta o uso de arquiteturas de Design da Web Responsivo, permitindo a seleção de vários fatores para sua página da Web e o layout instantâneo de elementos visuais da página da Web no browser para esse fator de forma. Você pode selecionar entre uma série de fatores de forma predefinidos, variando de smartphones a áreas de trabalho, nos modos paisagem ou retrato. |
| </p> |
| <p> |
| Além de aprimorar os recursos dos browsers, o editor CSS Style do IDE também considera a consulta de mídia que o browser está exibindo no momento e insere, automaticamente, edições no CSS nessa consulta de mídia.</p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/javascript-editing.png" title="Suporte a JavaScript"><img alt="" src="../../images_www/v7/3/features/javascript-editing-cut.png" width="320" /></a></span> |
| <h2>Suporte Aprimorado a JavaScript</h2> |
| <p> |
| O suporte a JavaScript no IDE foi aprimorado. O suporte inclui codificação por cores da sintaxe específica do framework de JavaSript, recurso de autocompletar código e também outras ferramentas de edição e refatoração. |
| </p> |
| <p>Os seguintes frameworks de JavaScript são suportados: jQuery, JSON, Knockout, Ext Js, AngularJS, JsDoc, ExtDoc e ScriptDoc.</p> |
| <p> |
| Agora também é possível controlar as opções de formatação da linguagem JavaScript na caixa de diálogo Opções. |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> <span class="overview-right" id="im5"><a class="cbox" href="../../images_www/v7/3/features/html5-css-rules.png" title="Editar Regras de CSS"><img alt="" src="../../images_www/v7/3/features/html5-css-rules-cut.png" width="320" /></a></span> |
| <h2>Suporte de Estilo e de Edição de CSS</h2> |
| <p>Suporte de edição aos pré-processadores Sassy CSS e LESS CSS, incluindo coloração semântica e sintática para construtores da linguagem, recuo, reformatação, dobramento de código e modelos de arquivo. As ferramentas autocompletar código e da refatoração estão disponíveis para variáveis e mixins. |
| </p> |
| <p> |
| A profunda integração com browsers Webkit permite ver as alterações feitas na janela de Estilo do CSS ao vivo, enquanto elas acontecem no browser. Não é mais necessário adivinhar como será a aparência das alterações de CSS, até a atualização do browser. As alterações ocorrem ao vivo e no código-fonte.</p> |
| <p> |
| Você também pode "inspecionar" a partir do browser, e a janela Estilo CSS exibirá as regras de CSS do elemento selecionado no browser automaticamente. Agora, você pode editar CSS usando as propriedades da janela Estilo de CSS ou ir diretamente para o código-fonte de CSS e fazer as edições, com recurso de autocompletar código e documentação em linha.<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-editing-css.html">Trabalhando com CSS em Aplicações HTML5</a> |
| </p> |
| |
| <p><b>Observação:</b> o suporte ao estilo e à edição de CSS também ficam disponíveis nos dispositivos móveis, ou seja, não apenas no Chrome e no Browser interno do WebKit Incorporado, mas também no Chrome e Android e no Mobile Safari em iOS. |
| </p> |
| |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/html5-device.png" title="Suporte ao dispositivo HTML5"><img alt="" src="../../images_www/v7/3/features/html5-device.png" width="320" /></a></span> |
| <h2>Suporte ao Dispositivo Móvel e Desenvolvimento do Cordova</h2> |
| <p>Desenvolver aplicações em HTML5, JavaScript e CSS3 e deixar o IDE criar distribuições nativas para você, por meio de seu suporte Cordova/PhoneGap. Cada projeto HTML5 no IDE pode ser ativado em um pacote de iOS e Android nativo e pode ser implantado para o dispositivo nativo diretamente do IDE. |
| <p> |
| O IDE permite que você edite visualmente os arquivos CSS e depure o JavaScript no browser Chrome e o browser do WebKit incorporado, bem como diretamente nos dispositivos iOS (Safari) e Android (Chrome). |
| </p> |
| <p><b>Observação:</b> qualquer tipo de aplicação Web, seja HTML5, Java EE ou PHP pode ser testadas e depurada em um dispositivo móvel. |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <table> |
| <tr> |
| <td class="valign-top"><h2>Depuração e Teste</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Consumo de Serviços Web</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Conformidade entre Browsers</h2></td> |
| </tr> |
| <tr> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| <p> |
| <span class="overview-centre" id="im5"><img alt="" src="../../images_www/v7/3/features/html5-debug-cut.png" width="200" /></span><br /> Você pode depurar o código JavaScript com o browser do Chrome, o Browser com Kit Web Incorporado, o browser do Chrome no Android e o browser do Mobile Safari no iOS.<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-js-support.html">Depurando e testando JavaScript </a> |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| |
| <p> |
| <span class="overview-centre" id="im6"><img alt="" src="../../images_www/v7/3/features/html5-rest-client-cut.png" width="200" /></span><br />Acesse facilmente seus dados corporativos criando clientes JavaScript para serviços Web RESTful. <br /><br />Usando o assistente de clientes JavaScript para RESTful, gere rapidamente um cliente JavaScript para um serviço Web RESTful localizado em um projeto NetBeans contendo o serviço Web. |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%"> |
| <p> |
| <span class="overview-centre" id="im7"><img alt="" src="../../images_www/v7/3/features/html5-css-doc-cut.png" width="200" /></span><br />Certifique-se de que sua aplicação funcione em vários browsers. <br /><br />Com a documentação em linha disponível com o recurso de autocompletar código, o IDE informa sobre o suporte do browser para construções de código específicas.<br /> |
| </p> |
| </td> |
| </tr> |
| </table> |
| <h2>Consulte Também</h2> |
| <ul class="bigger"> |
| <li><a href="/community/releases/81/index.html">Página da Release NetBeans IDE 8.1</a> para obter uma lista de funcionalidades realçadas na última versão estável.</li> |
| <li><a href="../../kb/trails/php.html">Trilha de Aprendizado de PHP e HTML5</a> para tutoriais que o ajudarão a começar.</li> |
| </ul> |
| |
| </div> |
| </body> |
| </html> |
