This is an automated email from the ASF dual-hosted git repository.
git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/incubator-netbeans-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new e8cdcfb Automated site publishing by Jenkins build 228
e8cdcfb is described below
commit e8cdcfb03b1d27c11d31e74002544c10053f2f7d
Author: jenkins <[email protected]>
AuthorDate: Mon Jan 14 14:44:06 2019 +0000
Automated site publishing by Jenkins build 228
---
.../kb/docs/webclient/html5-gettingstarted.html | 96 +++++++---------------
1 file changed, 29 insertions(+), 67 deletions(-)
diff --git a/content/kb/docs/webclient/html5-gettingstarted.html
b/content/kb/docs/webclient/html5-gettingstarted.html
index e619679..a81d207 100644
--- a/content/kb/docs/webclient/html5-gettingstarted.html
+++ b/content/kb/docs/webclient/html5-gettingstarted.html
@@ -80,8 +80,12 @@
<div class='grid-container main-content'>
<div id="toc" class="toc">
<div id="toctitle"></div>
-<ul class="sectlevel2">
-<li><a href="#_contents">Contents</a></li>
+<ul class="sectlevel1">
+<li><a href="#_getting_started_with_html5_applications">Getting Started with
HTML5 Applications</a>
+<ul class="sectlevel3">
+<li><a
href="#_to_complete_this_tutorial_you_will_need_the_following_resources">To
complete this tutorial, you will need the following resources.</a></li>
+</ul>
+</li>
<li><a href="#_using_the_ide_with_the_chrome_browser">Using the IDE with the
Chrome Browser</a>
<ul class="sectlevel2">
<li><a href="#_installing_the_extension_from_the_chrome_web_store">Installing
the Extension from the Chrome Web Store</a></li>
@@ -97,7 +101,8 @@
<li><a href="#seealso">See Also</a></li>
</ul>
</div>
-<div id="preamble">
+<div class="sect1">
+<h2 id="_getting_started_with_html5_applications">Getting Started with HTML5
Applications</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This document demonstrates how to create an HTML5 project in the IDE and
some of the features in the IDE that support the use of JavaScript and CSS in
your project. In this document you will create a simple HTML5 application that
uses a jQuery JavaScript library to modify a list in a web page.</p>
@@ -108,50 +113,6 @@
<div class="paragraph">
<p>For a tutorial on how to use jQuery in a NetBeans Java web application, see
the tutorial <a href="../web/js-toolkits-jquery.html">Using jQuery to Enhance
the Appearance and Usability of a Web Page</a>.</p>
</div>
-</div>
-</div>
-<div class="sect2">
-<h3 id="_contents">Contents</h3>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp.png" alt="netbeans stamp">
-</div>
-<div class="title">Figure 1. Content on this page applies to the NetBeans IDE
7.4 and 8.0</div>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="#installchrome">Using the IDE with the Chrome Browser</a></p>
-</li>
-<li>
-<p><a href="#installchrome1">Installing the Extension from the Chrome Web
Store</a></p>
-</li>
-<li>
-<p><a href="#installchrome2">Offline Installation of the Extension</a></p>
-</li>
-<li>
-<p><a href="#webkit">Using the Embedded WebKit Browser</a></p>
-</li>
-<li>
-<p><a href="#createproject">Creating a NetBeans HTML5 Project</a></p>
-</li>
-<li>
-<p><a href="#usingbower">Installing and Using Bower</a></p>
-</li>
-<li>
-<p><a href="#editingpage">Editing the HTML File</a></p>
-</li>
-<li>
-<p><a href="#saving">Saving the Project as a Site Template</a></p>
-</li>
-<li>
-<p><a href="#summary">Summary</a></p>
-</li>
-<li>
-<p><a href="#seealso">See Also</a></p>
-</li>
-</ul>
-</div>
<div class="sect3">
<h4 id="_to_complete_this_tutorial_you_will_need_the_following_resources">To
complete this tutorial, you will need the following resources.</h4>
<table class="tableblock frame-all grid-all spread">
@@ -210,6 +171,7 @@
</div>
</div>
</div>
+</div>
<div class="sect1">
<h2 id="_using_the_ide_with_the_chrome_browser">Using the IDE with the Chrome
Browser</h2>
<div class="sectionbody">
@@ -278,7 +240,7 @@ image::images/html5-offline-extension1.png[title="Install
Chrome Extension dialo
<div class="content">
<img src="images/html5-rerun-dialog.png" alt="html5 rerun dialog">
</div>
-<div class="title">Figure 2. Install Chrome Extension dialog box</div>
+<div class="title">Figure 1. Install Chrome Extension dialog box</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -295,7 +257,7 @@ image::images/html5-chrome-netbeanshome.png[title="NetBeans
Connector page in th
<div class="content">
<img src="images/html5-install-extension2.png" alt="html5 install extension2">
</div>
-<div class="title">Figure 3. Confirmation in that extension was installed</div>
+<div class="title">Figure 2. Confirmation in that extension was installed</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -317,7 +279,7 @@ image::images/html5-chrome-netbeanshome.png[title="NetBeans
Connector page in th
<div class="content">
<img src="images/html5-install-extension3.png" alt="html5 install extension3">
</div>
-<div class="title">Figure 4. NetBeans Connector extension is enabled in Chrome
Extensions</div>
+<div class="title">Figure 3. NetBeans Connector extension is enabled in Chrome
Extensions</div>
</div>
<div class="paragraph">
<p><strong>Note.</strong> Alternatively, you can install the NetBeans
Connector extension directly from the Chrome Web Store by performing the
following steps.</p>
@@ -407,7 +369,7 @@ image::images/html5-embedded1.png[title="List of target
browsers for HTML5 appli
<div class="content">
<img src="images/html5-embedded2.png" alt="html5 embedded2">
</div>
-<div class="title">Figure 5. Embedded WebKit Browser window</div>
+<div class="title">Figure 4. Embedded WebKit Browser window</div>
</div>
<div class="paragraph">
<p>You can click the icons in the toolbar of the Web Browser tab to enable
Inspect mode and to quickly switch between different display sizes.</p>
@@ -465,7 +427,7 @@ image::images/html5-newproject3.png[title="Tools panel in
the New HTML5 Applicat
<div class="content">
<img src="images/html5-projectswindow1.png" alt="html5 projectswindow1">
</div>
-<div class="title">Figure 6. JavaScript Libraries panel in the New HTML5
Application wizard</div>
+<div class="title">Figure 5. JavaScript Libraries panel in the New HTML5
Application wizard</div>
</div>
<div class="paragraph">
<p>You can now test that your project displays correctly in the Chrome
browser.</p>
@@ -488,7 +450,7 @@ image::images/html5-js-selectbrowser.png[title="Browser
selected in dropdown lis
<div class="content">
<img src="images/html5-runproject.png" alt="html5 runproject">
</div>
-<div class="title">Figure 7. Application in the Chrome browser tab</div>
+<div class="title">Figure 6. Application in the Chrome browser tab</div>
</div>
<div class="paragraph">
<p>You will notice that there is a yellow bar in the browser tab that notifies
you that the NetBeans Connector is debugging the tab. The IDE and the browser
are connected and are able to communicate with each other when the yellow bar
is visible. When you launch an HTML5 application from the IDE the JavaScript
debugger is automatically enabled. When you save changes to a file or make
changes to a CSS style sheet you do not need to reload the page because the
browser window is automatical [...]
@@ -503,7 +465,7 @@ image::images/html5-js-selectbrowser.png[title="Browser
selected in dropdown lis
<div class="content">
<img src="images/html5-runproject2.png" alt="html5 runproject2">
</div>
-<div class="title">Figure 8. NetBeans menu in the Chrome browser tab</div>
+<div class="title">Figure 7. NetBeans menu in the Chrome browser tab</div>
</div>
<div class="paragraph">
<p>If you select one of the default devices in the menu the browser window
will resize to the dimensions of the device. This enables you to see how the
application will look on the selected device. HTML5 applications are usually
designed to respond to the size of the screen of the device on which they are
viewed. You can use JavaScript and CSS rules that respond to the screen size
and modify how the application is displayed so that the layout is optimized for
the device.</p>
@@ -546,7 +508,7 @@ image::images/html5-bower-4.png[title="bower4"]</p>
<div class="content">
<img src="images/html5-bower-5.png" alt="html5 bower 5">
</div>
-<div class="title">Figure 9. bower5</div>
+<div class="title">Figure 8. bower5</div>
</div>
<div class="paragraph">
<p><strong>Notes.</strong></p>
@@ -568,7 +530,7 @@ image::images/html5-bower-4.png[title="bower4"]</p>
<div class="content">
<img src="images/html5-bower-6.png" alt="html5 bower 6">
</div>
-<div class="title">Figure 10. bower6</div>
+<div class="title">Figure 9. bower6</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -610,7 +572,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-fileswindow.png" alt="html5 fileswindow">
</div>
-<div class="title">Figure 11. NetBeans menu in the Chrome browser tab</div>
+<div class="title">Figure 10. NetBeans menu in the Chrome browser tab</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -645,7 +607,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-editor1.png" alt="html5 editor1">
</div>
-<div class="title">Figure 12. Code completion in the editor</div>
+<div class="title">Figure 11. Code completion in the editor</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -724,7 +686,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-runproject3.png" alt="html5 runproject3">
</div>
-<div class="title">Figure 13. Reloaded page in in the Chrome browser tab</div>
+<div class="title">Figure 12. Reloaded page in in the Chrome browser tab</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -752,7 +714,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-editor2.png" alt="html5 editor2">
</div>
-<div class="title">Figure 14. Code completion of CSS rules in the editor</div>
+<div class="title">Figure 13. Code completion of CSS rules in the editor</div>
</div>
<div class="paragraph">
<p>If you open the Browser DOM window you can see the current structure of the
page.</p>
@@ -761,7 +723,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/dom-browser.png" alt="dom browser">
</div>
-<div class="title">Figure 15. Browser DOM window showing DOM tree</div>
+<div class="title">Figure 14. Browser DOM window showing DOM tree</div>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -905,7 +867,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-cssstyles.png" alt="html5 cssstyles">
</div>
-<div class="title">Figure 16. CSS Styles window</div>
+<div class="title">Figure 15. CSS Styles window</div>
</div>
<div class="paragraph">
<p>In the CSS Rules dialog box, select <code>id</code> as the Selector Type
and type <strong>infolist</strong> as the Selector. Confirm that Apply Changes
to the Element is selected.</p>
@@ -914,7 +876,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-cssrules.png" alt="html5 cssrules">
</div>
-<div class="title">Figure 17. Edit CSS Rules dialog box</div>
+<div class="title">Figure 16. Edit CSS Rules dialog box</div>
</div>
<div class="paragraph">
<p>When you click OK in the dialog box a CSS rule for the
<code>infolist</code> selector is automatically added to the
<code>basecss.css</code> style sheet.</p>
@@ -933,7 +895,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-runproject5.png" alt="html5 runproject5">
</div>
-<div class="title">Figure 18. The final project loaded in the browser</div>
+<div class="title">Figure 17. The final project loaded in the browser</div>
</div>
<div class="paragraph">
<p>The jQuery accordion function now modifies all the page elements that are
contained in the <code>infolist</code> DOM object. In the Navigator window
you can see the structure of the HTML file and that the <code>div</code>
element that is identified by <code>id=infolist</code> .</p>
@@ -942,7 +904,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/navigator3.png" alt="navigator3">
</div>
-<div class="title">Figure 19. Browser DOM window</div>
+<div class="title">Figure 18. Browser DOM window</div>
</div>
<div class="paragraph">
<p>You can right-click on an element in the Navigator window and choose Go To
Source to quickly navigate to the location of that element in the source
file.</p>
@@ -954,7 +916,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/dom-browser3.png" alt="dom browser3">
</div>
-<div class="title">Figure 20. Browser DOM window</div>
+<div class="title">Figure 19. Browser DOM window</div>
</div>
<div class="paragraph">
<p>When Inspect in NetBeans Mode is enabled in the browser, when you select an
element in the browser window the element is highlighted in the Browser DOM
window.</p>
@@ -987,7 +949,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-sitetemplate.png" alt="html5 sitetemplate">
</div>
-<div class="title">Figure 21. Create Site Template dialog box</div>
+<div class="title">Figure 20. Create Site Template dialog box</div>
</div>
<div class="paragraph">
<p>You can see that the site template will include the
<code>index.html</code> file, the CSS style sheet, the images used in the
project, though not the JavaScript libraries since Bower can be used by anyone
using the template to manage the libraries. The site template can also include
any configuration files and tests.</p>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
