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 364dcd2 Automated site publishing by Jenkins build 417
364dcd2 is described below
commit 364dcd2ac50e0c1ed799ae8b4d358d63ca63e5ba
Author: jenkins <bui...@apache.org>
AuthorDate: Sat Jan 19 13:16:31 2019 +0000
Automated site publishing by Jenkins build 417
---
.../kb/docs/webclient/html5-gettingstarted.html | 257 +++++++++++----------
1 file changed, 131 insertions(+), 126 deletions(-)
diff --git a/content/kb/docs/webclient/html5-gettingstarted.html
b/content/kb/docs/webclient/html5-gettingstarted.html
index 01b6176..9624b84 100644
--- a/content/kb/docs/webclient/html5-gettingstarted.html
+++ b/content/kb/docs/webclient/html5-gettingstarted.html
@@ -84,21 +84,15 @@
<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>
-<li><a href="#_offline_installation_of_the_extension">Offline Installation of
the Extension</a></li>
-</ul>
-</li>
+<li><a href="#_using_the_ide_with_the_chrome_browser">Using the IDE with the
Chrome Browser</a></li>
<li><a href="#_using_the_embedded_webkit_browser">Using the Embedded WebKit
Browser</a></li>
<li><a href="#_creating_a_netbeans_html5_project">Creating a NetBeans HTML5
Project</a></li>
<li><a href="#_installing_and_using_bower">Installing and Using Bower</a></li>
<li><a href="#_editing_the_html_file">Editing the HTML File</a></li>
<li><a href="#template">Saving the Project as a Site Template</a></li>
<li><a href="#summary">Summary</a></li>
-<li><a href="#seealso">See Also</a></li>
+</ul>
+</li>
</ul>
</div>
<div class="sect1">
@@ -128,14 +122,6 @@
</thead>
<tbody>
<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><a
href="https://netbeans.org/downloads/index.html";>NetBeans IDE, Java</a></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">8.1 or
above</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><a
href="http://www.oracle.com/technetwork/java/javase/downloads/index.html";>Java
Development Kit (JDK)</a></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">version 7
or 8</p></td>
-</tr>
-<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a
href="http://www.google.com/chrome";>Chrome Browser</a></p></td>
<td class="tableblock halign-left valign-top"><p
class="tableblock"> — </p></td>
</tr>
@@ -153,41 +139,67 @@
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p><strong>Notes:</strong></p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>The <a
href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip";>project
resources zip file</a> contains the JPG images and the CSS file that you need
to add to the project in this tutorial.</p>
-</li>
-<li>
-<p>If you would like to compare your project with a working solution, you can
download the <a
href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip";>+
site template+</a> of the finished project.</p>
-</li>
-<li>
-<p>This document assumes you have some basic knowledge of, or programming
experience with HTML, CSS, and JavaScript.</p>
-</li>
-</ul>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+The <a
href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip";>project
resources zip file</a> contains the JPG images and the CSS file that you need
to add to the project in this tutorial.
+</td>
+</tr>
+</table>
</div>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+If you would like to compare your project with a working solution, you can
download the <a
href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip";>+
site template+</a> of the finished project.
+</td>
+</tr>
+</table>
</div>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+This document assumes you have some basic knowledge of, or programming
experience with HTML, CSS, and JavaScript.
+</td>
+</tr>
+</table>
</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">
+<div class="sect2">
+<h3 id="_using_the_ide_with_the_chrome_browser">Using the IDE with the Chrome
Browser</h3>
<div class="paragraph">
<p>To take full advantage of some of the tools available in the IDE that
support HTML5 application development it is recommended that you use the Chrome
browser and install the NetBeans Connector extension from the <a
href="https://chrome.google.com/webstore/";>Chrome Web Store</a>. You only need
to install the extension once.</p>
</div>
<div class="paragraph">
<p>When installed, the NetBeans Connector extension adds a NetBeans Actions
menu that is accessible from the URL location bar when you run a NetBeans HTML5
project in the Chrome browser. The NetBeans Actions menu enables you to enable
Inspect in NetBeans Mode and to quickly resize the browser window to the
dimensions of common display devices. The JavaScript debugger is also
automatically enabled when you run an HTML5 application.</p>
</div>
-<div class="sect2">
-<h3 id="_installing_the_extension_from_the_chrome_web_store">Installing the
Extension from the Chrome Web Store</h3>
+<div class="sect3">
+<h4 id="_installing_the_extension_from_the_chrome_web_store">Installing the
Extension from the Chrome Web Store</h4>
<div class="paragraph">
<p>You will automatically be prompted to install the NetBeans Connector
extension if you run a NetBeans HTML5 application project from the IDE and
select Chrome with NetBeans Integration as the target browser. This exercise
demonstrates how to install the extension by creating and running a dummy HTML5
project. You can skip this exercise and install the extension when you are
prompted by the IDE or install the NetBeans Connector extension directly from
the Chrome Web Store.</p>
</div>
-<div class="paragraph">
-<p><strong>Note.</strong> The IDE will open the Chrome Web Store in the
default browser. If Chrome is not set as the default browser for the IDE you
need to open the Options window and select Chrome in the Web Browser dropdown
list in the General category before you perform the following steps.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+The IDE will open the Chrome Web Store in the default browser. If Chrome is
not set as the default browser for the IDE you need to open the Options window
and select Chrome in the Web Browser dropdown list in the General category
before you perform the following steps.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -281,8 +293,17 @@
image::images/html5-chrome-netbeanshome.png[title="NetBeans Connector page in th
</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>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+Alternatively, you can install the NetBeans Connector extension directly from
the Chrome Web Store by performing the following steps.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -299,8 +320,8 @@ image::images/html5-install-extension1.png[title="NetBeans
Connector extension i
</ol>
</div>
</div>
-<div class="sect2">
-<h3 id="_offline_installation_of_the_extension">Offline Installation of the
Extension</h3>
+<div class="sect3">
+<h4 id="_offline_installation_of_the_extension">Offline Installation of the
Extension</h4>
<div class="paragraph">
<p>If you are unable to connect to the Chrome Web Store you can install the
NetBeans Connector extension that is bundled with the IDE. If you run a
NetBeans HTML5 project and you are prompted to install the NetBeans Connector
extension, you can perform the following steps to install the extension if you
are not able to access the Chrome Web Store.</p>
</div>
@@ -335,18 +356,25 @@
image::images/html5-offline-extension3.png[title="NetBeans Connector extension i
</div>
</div>
</div>
-</div>
-<div class="sect1">
-<h2 id="_using_the_embedded_webkit_browser">Using the Embedded WebKit
Browser</h2>
-<div class="sectionbody">
+<div class="sect2">
+<h3 id="_using_the_embedded_webkit_browser">Using the Embedded WebKit
Browser</h3>
<div class="paragraph">
<p>It is recommended that you run your HTML5 applications in the Chrome
browser with the NetBeans Connector extension installed when you are developing
the application. The <strong>Chrome with NetBeans Integration</strong> option
is selected by default as the run target when you create an HTML5 application.
However, it is also possible to run your HTML5 application in the Embedded
WebKit Browser that is bundled with the IDE.</p>
</div>
<div class="paragraph">
<p>When you run the HTML5 application in the Embedded WebKit Browser the IDE
opens the Web Browser window in the IDE. The Embedded WebKit Browser supports
many of the features that are enabled in the Chrome browser when the NetBeans
Connector extension is installed, including Inspect mode, various screen size
options and JavaScript debugging.</p>
</div>
-<div class="paragraph">
-<p><strong>Note.</strong> When you choose Window > Web > Web Browser in
the main menu the IDE opens the browser that is specified as the Web Browser in
the Options window.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+When you choose Window > Web > Web Browser in the main menu the IDE
opens the browser that is specified as the Web Browser in the Options window.
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>Perform the following steps to run an HTML5 application in the Embedded
WebKit Browser.</p>
@@ -375,10 +403,8 @@ image::images/html5-embedded1.png[title="List of target
browsers for HTML5 appli
<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>
</div>
</div>
-</div>
-<div class="sect1">
-<h2 id="_creating_a_netbeans_html5_project">Creating a NetBeans HTML5
Project</h2>
-<div class="sectionbody">
+<div class="sect2">
+<h3 id="_creating_a_netbeans_html5_project">Creating a NetBeans HTML5
Project</h3>
<div class="paragraph">
<p>In this exercise you will use the New Project wizard in the IDE to create a
new HTML5 project. For this tutorial you will create a very basic HTML5 project
that only has an <code>index.html</code> file. In the wizard you will also
select some jQuery JavaScript libraries that you want to use in the project.</p>
</div>
@@ -406,8 +432,17 @@ image::images/html5-newproject2.png[title="Site Templates
panel in the New HTML5
<div class="paragraph">
<p>The Site Template page of the wizard enables you to select from a list of
popular online templates for HTML5 projects or to specify the location of a
<code>.zip</code> archive of a site template. You can type the URL of the
<code>.zip</code> archive or click Browse to specify a location on your local
system. 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>
</div>
-<div class="paragraph">
-<p><strong>Note:</strong> You must be online to create a project that is based
on one of the online templates in the list.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+You must be online to create a project that is based on one of the online
templates in the list.
+</td>
+</tr>
+</table>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -471,10 +506,8 @@ image::images/html5-js-selectbrowser.png[title="Browser
selected in dropdown lis
<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>
</div>
</div>
-</div>
-<div class="sect1">
-<h2 id="_installing_and_using_bower">Installing and Using Bower</h2>
-<div class="sectionbody">
+<div class="sect2">
+<h3 id="_installing_and_using_bower">Installing and Using Bower</h3>
<div class="paragraph">
<p>In this exercise you will set up Bower (<a
href="http://bower.io";>bower.io</a>) and use it to download the JavaScript
libraries that you’ll use in the sections that follow.</p>
</div>
@@ -510,18 +543,29 @@ image::images/html5-bower-4.png[title="bower4"]</p>
</div>
<div class="title">Figure 8. bower5</div>
</div>
-<div class="paragraph">
-<p><strong>Notes.</strong></p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+You can click on the library version number in the Version column to open a
popup window that enables you to select older versions of the library. By
default the wizard displays the most recent version.
+</td>
+</tr>
+</table>
</div>
-<div class="ulist">
-<ul>
-<li>
-<p>You can click on the library version number in the Version column to open a
popup window that enables you to select older versions of the library. By
default the wizard displays the most recent version.</p>
-</li>
-<li>
-<p>For this tutorial, choose the latest version of the libraries.</p>
-</li>
-</ul>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+For this tutorial, choose the latest version of the libraries.
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>When you have completed this step, you should see the below.</p>
@@ -541,10 +585,8 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</ol>
</div>
</div>
-</div>
-<div class="sect1">
-<h2 id="_editing_the_html_file">Editing the HTML File</h2>
-<div class="sectionbody">
+<div class="sect2">
+<h3 id="_editing_the_html_file">Editing the HTML File</h3>
<div class="paragraph">
<p>In this exercise you will add the project resources to the project and edit
the <code>index.html</code> file to add links to the resources and add some
CSS rules. You will see how a few simple CSS selectors when combined with
JavaScript can significantly change how a page is displayed in a browser.</p>
</div>
@@ -806,8 +848,17 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="paragraph">
<p>In the next step you will identify an element in the page as
<code>infolist</code> .</p>
</div>
-<div class="paragraph">
-<p><strong>Note.</strong> You also specified ‘autoHeight: false’
in the above snippet. This prevents the accordion widget from setting the
height of each panel based on the highest content part contained within the
markup. For more information, consult the <a
href="http://docs.jquery.com/UI/Accordion";>accordion API documentation</a>.</p>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<div class="title">Note</div>
+</td>
+<td class="content">
+You also specified ‘autoHeight: false’ in the above snippet. This
prevents the accordion widget from setting the height of each panel based on
the highest content part contained within the markup. For more information,
consult the <a href="http://docs.jquery.com/UI/Accordion";>accordion API
documentation</a>.
+</td>
+</tr>
+</table>
</div>
<div class="paragraph">
<p>The <code><head></code> section of the <code>index.html</code> file
should look as follows.</p>
@@ -922,10 +973,8 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<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>
</div>
</div>
-</div>
-<div class="sect1">
-<h2 id="template">Saving the Project as a Site Template</h2>
-<div class="sectionbody">
+<div class="sect2">
+<h3 id="template">Saving the Project as a Site Template</h3>
<div class="paragraph">
<p>You can save your project as a site template that you can use as a template
to create other HTML5 sites that are based on the project. The site template
can include JavaScript libraries, CSS files, images and templates for HTML
files. The IDE provides a wizard to help you select the files that you want to
include in the site template.</p>
</div>
@@ -961,55 +1010,11 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<p>When you want to create a project that is based on the site template you
specify the location of the <code>.zip</code> archive in the Site Template
panel of the New Project wizard.</p>
</div>
</div>
-</div>
-<div class="sect1">
-<h2 id="summary">Summary</h2>
-<div class="sectionbody">
+<div class="sect2">
+<h3 id="summary">Summary</h3>
<div class="paragraph">
<p>In this tutorial you have learned how to create an empty HTML5 project that
uses a couple jQuery JavaScript libraries. You also learned how to install the
NetBeans Connector extension for the Chrome browser and run the HTML5 project
in the browser. When you edited the <code>index.html</code> file you saw that
the IDE provides some tools that can help you to edit HTML and CSS files.</p>
</div>
-<div class="paragraph">
-<p><a
href="/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20HTML5%20Applications">Send
Feedback on This Tutorial</a></p>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="seealso">See Also</h2>
-<div class="sectionbody">
-<div class="paragraph">
-<p>For more information about support for HTML5 applications in the IDE on <a
href="https://netbeans.org/";>netbeans.org</a>, see the following resources:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="html5-editing-css.html">Working with CSS Style Sheets in HTML5
Applications</a>. A document that continues with the application that you
created in this tutorial that demonstrates how to use some of the CSS wizards
and windows in the IDE and how to use the Inspect mode in the Chrome browser to
visually locate elements in your project sources.</p>
-</li>
-<li>
-<p><a href="html5-js-support.html">Debugging and Testing JavaScript in HTML5
Applications</a>. A document that demonstrates how the IDE provides tools that
can help you debug and test JavaScript files in the IDE.</p>
-</li>
-</ul>
-</div>
-<div class="paragraph">
-<p>For more information about jQuery, refer to the official documentation:</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p>Official Home Page: <a href="http://jquery.com";>http://jquery.com</a></p>
-</li>
-<li>
-<p>UI Home Page: <a href="http://jqueryui.com/";>http://jqueryui.com/</a></p>
-</li>
-<li>
-<p>Tutorials: <a
href="http://docs.jquery.com/Tutorials";>http://docs.jquery.com/Tutorials</a></p>
-</li>
-<li>
-<p>Documentation Main Page: <a
href="http://docs.jquery.com/Main_Page";>http://docs.jquery.com/Main_Page</a></p>
-</li>
-<li>
-<p>UI Demos and Documentation: <a
href="http://jqueryui.com/demos/";>http://jqueryui.com/demos/</a></p>
-</li>
-</ul>
</div>
</div>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@netbeans.apache.org
For additional commands, e-mail: commits-h...@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
