| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> |
| <html> |
| <head> |
| <title>HTML5 Web Development Support</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"> |
| </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>HTML5 Web Development Support</h1> |
| <p><a href="../../images_www/v7/3/features/html5-dev.png"><img |
| alt="Java Enterprise application development in the NetBeans IDE" |
| src="../../images_www/v7/3/features/html5-dev-cut.png" border="0"><br/> |
| <span class="font-11">Click image for fullscreen preview</span></a><br/></p> |
| <p class="intro"> |
| Starting with NetBeans IDE 7.3, new features to support and enhance the development |
| experience with client side Web applications that utilize the HTML5 family of technologies |
| have been introduced. You can use this to rapidly and intuitively create rich Web applications |
| that support the responsive web design paradigm targeting desktop and mobile platforms |
| simultaneously. In addition, you can use HTML5 technologies within <a href="../java-on-server/index.html">Java EE</a> and <a href="../php/index.html">PHP</a> applications. |
| </p> |
| <div class="line"> </div> |
| |
| <!-- left text section start --> |
| <a name="o2"></a> |
| <span id="im1" class="overview-left"><a href="../../images_www/v7/3/features/nodejs-app.png" class="cbox" title="HTML5 application development support"><img src="../../images_www/v7/3/features/nodejs-app-cut.png" width="320" alt="" /></a></span> |
| <h2>Node.js Development Support</h2> |
| <p> |
| The NetBeans IDE enables quick and easy development with the |
| Node.js runtime environment. Via wizards and templates, you |
| can rapidly set up your Node.js applications and use |
| NetBeans IDE for running, debugging, and testing.</p> |
| <p>Alternatively, you can use the built-in integration with Express |
| to create front-end JavaScript applications with Node.js |
| on the back-end.</p> |
| <p>The IDE recognizes Node.js code and provides coding assistance |
| and highlighting.</p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> |
| <span id="im1" class="overview-right"><a href="../../images_www/v7/3/features/html5-app.png" class="cbox" title="HTML5 application development support"><img src="../../images_www/v7/3/features/html5-app-cut.png" width="320" alt="" /></a></span> |
| <h2>Accelerated HTML5 Development Support</h2> |
| <p> |
| The NetBeans IDE enables accelerated HTML5 Web application development right |
| from when you create a HTML5 project. You can select from a list of popular |
| online templates for HTML5 projects or specify the location of a .zip archive of a site template. |
| When you create a project based on a site template, the files, libraries and the |
| structure of the project are determined by the template.</p> |
| <p>Alternatively, you can use all the HTML5 features described below |
| after creating <a href="../java-on-server/index.html">Java EE applications</a> |
| and <a href="../php/index.html">PHP applications</a>. |
| <p> |
| Once set up, the live preview |
| of Web pages, editor support, debugging capabilities and other features, help |
| in developing, testing and debugging your HTML5, Java EE, and PHP applications.<br/><br/> |
| <a href="../../kb/docs/webclient/html5-gettingstarted.html" class="arr-link">Getting started with HTML5 Development</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 href="../../images_www/v7/3/features/html5-preview.png" class="cbox" title="Live preview of Web pages"><img src="../../images_www/v7/3/features/html5-preview-cut.png" width="320" alt="" /></a></span> |
| <h2>Live Preview of Web Pages</h2> |
| <p> |
| Better than WYSIWYG as most professional developers would confess, the deep |
| integration with Chrome and the internal Embedded WebKit Browser, |
| both of which are WebKit based, ensures |
| a seamless connection between your code and the page design. |
| </p> |
| <p> |
| Through the use of the remote |
| WebKit API's, you continue to have complete visibility and control of the code in the IDE |
| while getting instant visual feedback from the browser page. <br/> |
| </p> |
| |
| <p><b>Note:</b> Live web preview of web pages is also available on mobile devices, |
| that is, not only on Chrome and the internal Embedded WebKit Browser, but also |
| on Chrome on Android and on Mobile Safari on iOS. |
| </p> |
| |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> |
| <span id="im3" class="overview-right"><a href="../../images_www/v7/3/features/html5-layout.png" class="cbox" title="Layouting Options"><img src="../../images_www/v7/3/features/html5-layout-cut.png" width="320" alt="" /></a></span> |
| <h2>Responsive Web Design Capability </h2> |
| <p> |
| NetBeans IDE supports the use of Responsive Web Design architectures |
| by letting you select various form factors for your Web page and instantly laying out the |
| visual elements of the Web page in the browser to that form factor. You can select from a |
| range of preset form factors ranging from smart phones to desktops, in either |
| portrait or landscape modes. |
| </p> |
| <p> |
| In addition to enhancing browser capabilities, the IDE's CSS Style editor is also |
| aware of the media query that the browser is currently displaying and will place edits |
| to the CSS into that media query automatically.</p> |
| <div class="line"> </div> |
| <!-- left text section end --> |
| |
| <!-- right text section start --> |
| <a name="o2"></a> |
| <span class="overview-left" id="im4"><a href="../../images_www/v7/3/features/javascript-editing.png" class="cbox" title="JavaScript support"><img src="../../images_www/v7/3/features/javascript-editing-cut.png" width="320" alt="" /></a></span> |
| <h2>Enhanced JavaScript Support</h2> |
| <p> |
| The JavaScript support in the IDE has been overhauled. Support includes |
| JavaScript framework-specific syntax coloring, code completion, as well as other |
| editing and refactoring tools. |
| </p> |
| <p>The following JavaScript frameworks are supported: jQuery, JSON, Knockout, Ext Js, |
| AngularJS, JsDoc, ExtDoc, and ScriptDoc.</p> |
| <p> |
| You can |
| also now control the formatting options for the JavaScript language itself, |
| in the Options dialog box. |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <!-- left text section start --> |
| <a name="o1"></a> |
| <span id="im5" class="overview-right"><a href="../../images_www/v7/3/features/html5-css-rules.png" class="cbox" title="Edit CSS Rules"><img src="../../images_www/v7/3/features/html5-css-rules-cut.png" width="320" alt="" /></a></span> |
| <h2>CSS Editing and Styling Support</h2> |
| <p>Editing support for Sassy CSS and LESS CSS preprocessors is provided, including |
| syntactic and semantic coloring for language constructs, indentation, reformatting, |
| code folding, and file templates. Code completion and refactoring tools are available |
| for variables and mixins. |
| </p> |
| <p> |
| Deep integration with WebKit browsers allows you to see the changes that |
| you make in the CSS Style window, live, as they happen, in the browser. No more |
| guessing what the CSS changes will look like until you refresh the browser. |
| The changes are live and in the source code.</p> |
| <p> |
| You can also "inspect" from the browser and the CSS Style window will display the |
| CSS rules of the element you have selected in the browser automatically. You can |
| now edit your CSS from the CSS Style window using properties, or go directly to |
| the CSS source code and edit from there, with code completion and inline documentation.<br/><br/> |
| <a href="../../kb/docs/webclient/html5-editing-css.html" class="arr-link">Working with CSS in HTML5 applications</a> |
| </p> |
| |
| <p><b>Note:</b> CSS editing and styling support is also available on mobile devices, |
| that is, not only on Chrome and the internal Embedded WebKit Browser, but also |
| on Chrome on Android and on Mobile Safari on 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 href="../../images_www/v7/3/features/html5-device.png" class="cbox" title="HTML5 device support"><img src="../../images_www/v7/3/features/html5-device.png" width="320" alt="" /></a></span> |
| <h2>Mobile Device Support and Cordova Development</h2> |
| <p>Develop applications in HTML5, JavaScript, and CSS3 and let the IDE |
| create native distributions for you, via its Cordova/PhoneGap support. Each |
| HTML5 project in the IDE can be turned into a native iOS or Android |
| package and be deployed to the native device directly from the IDE. |
| <p> |
| The IDE lets you visually edit CSS files and debug JavaScript in |
| the Chrome browser and the embedded WebKit browser, as well as |
| directly on iOS devices (Safari) and Android devices (Chrome). |
| </p> |
| <p><b>Note:</b> Any kind of web application, whether it is HTML5, Java EE, or PHP, can be tested |
| and debugged on a mobile device. |
| </p> |
| <div class="line"> </div> |
| <!-- right text section end --> |
| |
| <table> |
| <tr> |
| <td class="valign-top"><h2>Debugging & Testing</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Web Services Consumption</h2></td> |
| <!--<td></td>--> |
| <td class="valign-top"><h2>Cross Browser Compliance</h2></td> |
| </tr> |
| <tr> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| <p> |
| <span class="overview-centre" id="im5"><img src="../../images_www/v7/3/features/html5-debug-cut.png" width="200" alt="" /></span><br/> |
| You can debug JavaScript code with the Chrome browser, |
| the internal Embedded WebKit Browser, |
| the Chrome browser on Android, and the Mobile Safari browser on iOS.<br/><br/> |
| <a href="../../kb/docs/webclient/html5-js-support.html" class="arr-link">Debugging and Testing JavaScript</a> |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%;padding-right:10px;"> |
| |
| <p> |
| <span class="overview-centre" id="im6"><img src="../../images_www/v7/3/features/html5-rest-client-cut.png" width="200" alt="" /></span><br/> |
| Easily access your enterprise data by creating |
| JavaScript clients for RESTful Web services. <br/><br/>Using the RESTful |
| JavaScript client wizard, quickly generate a JavaScript client for |
| a RESTful Web service located in a NetBeans project containing the |
| Web service. |
| </p> |
| </td> |
| <!--<td> </td>--> |
| <td class="valign-top" style="width:33%"> |
| <p> |
| <span class="overview-centre" id="im7"><img src="../../images_www/v7/3/features/html5-css-doc-cut.png" width="200" alt="" /></span><br/> |
| Ensure that your application works across multiple browsers. |
| <br/><br/>With the inline documentation available via code completion, the |
| IDE informs you about browser support for particular |
| code constructs.<br/> |
| </p> |
| </td> |
| </tr> |
| </table> |
| <h2>See Also</h2> |
| <ul class="bigger"> |
| <li><a href="/community/releases/81/index.html">NetBeans IDE 8.1 Release Page</a> for a list of highlighted features in the latest stable release.</li> |
| <li><a href="../../kb/trails/php.html">PHP and HTML5 Learning Trail</a> for tutorials that will help you get started.</li> |
| </ul> |
| |
| </div> |
| </body> |
| </html> |
