You can use the HTML5 platform via NetBeans IDE to rapidly and intuitively create rich Web applications that support responsive web design paradigms, while targeting desktop and mobile platforms simultaneously.
Accelerated HTML5 Development Support
NetBeans IDE enables accelerated HTML5 Web application development, right from when you create a HTML5 project. And by “accelerated”, we mean “really, really fast”! When you start your development project, the IDE lets you select from a list of popular online templates for HTML5 projects as a starting point.
Once set up, the features described below, that is, the live preview of Web pages, the editor support, the debugging capabilities, and other supporting features, help you in developing, testing, and debugging your HTML5 applications.
Live Preview of Web Pages
Research has shown that WYSIWYG GUI designers are handy for newbies and for prototyping. However, what developers really need far more than WYSIWYG designers, throughout their development cycles, is deep integration with browsers. Being able to click in the browser and see where the related code is defined and being able to click in an IDE to see where the related items in the browser are found is far more useful. Two-way communication between IDE and browser ensures a genuinely helpful and seamless connection between your code and the associated page designs in the browser.
Therefore, now, in NetBeans IDE, through the use of the remote WebKit APIs accessed via a NetBeans/Chrome plugin and an embedded browser in NetBeans IDE, you have complete visibility and control of the code in the IDE, while getting instant visual feedback from pages loaded in the browser.
Responsive Web Design Capability
The IDE supports the use of “Responsive Web Design” architectures. It lets you select form factors for your Web page, directly in the browser, and instantly lays out visual elements in the Web page in the browser to that form factor. You can select from preset form factors, ranging from smart phones to desktops, in either portrait or landscape modes.
In addition to enhancing browser capabilities, the IDE’s CSS Style editor is also aware of media queries that the browser is currently displaying, and will place edits to the CSS into that media query automatically.
CSS Styling Support
The deep integration with WebKit browsers allows you to see changes that you make in the CSS Style window, live, as they happen, in the browser. No more guessing what CSS changes will look like until you refresh the browser. The changes are live and in the source code.
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.
Geertjan Wielenga is a principal product manager in Oracle for NetBeans IDE and has been a member of the NetBeans IDE Team since 2004.