HTML5

Target Audience: CAST Administrators

Summary: This document provides a guide based on CAST’s field experience on how to configure Spring based applications using CAST AIP. These configurations are used over and above CAST AIP 8.2.x HTML5 offering (see Reference Materials below for links) to overcome limitations such as missing links. The applicability of this guide should have assessed for newer versions of CAST AIP and Extension.

Introduction to HTML5

This section gives a brief overview of the framework.

HTML5 is the fifth major standard of HTML. Development of the standard began in 2007 and HTML5 websites started becoming mainstream in 2010. The final HTML5 standard was officially standardized by W3C on October 28, 2014.

The previous HTML standard, HTML 4.01, was standardized in 1999 – fifteen years before the HTML5 standard was published. However, in the decade preceding HTML5, most websites were written in XHTML, a more strict version of HTML published in 2000. HTML5 was designed to supersede both HTML 4 and XHTML by providing web developers with a simpler standard that includes several new features for the modern web.

The table below includes a list of new elements, or tags, introduced in HTML5 that are used to define the structure of a document.

HTML Tags

Tag	Description
<!DOCTYPE>	Defines the document type
<html>	Defines an HTML document
<title>	Defines a title for the document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a thematic change in the content
<!-...->	Defines a comment

Formatting

Tag	Description
<acronym>	Not supported in HTML5. Use <abbr> instead. Defines an acronym
<abbr>	Defines an abbreviation or an acronym
<address>	Defines contact information for the author/owner of a document/article
<b>	Defines bold text
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead. Defines big text
<blockquote>	Defines a section that is quoted from another source
<center>	Not supported in HTML5. Use CSS instead. Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<del>	Defines text that has been deleted from a document
<dfn>	Represents the defining instance of a term
<em>	Defines emphasized text
<font>	Not supported in HTML5. Use CSS instead. Defines font, color, and size for text
<i>	Defines a part of text in an alternate voice or mood
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<pre>	Defines preformatted text
<progress>	Represents the progress of a task
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<small>	Defines smaller text
<strike>	Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<time>	Defines a date/time
<tt>	Not supported in HTML5. Use CSS instead. Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<var>	Defines a variable
<wbr>	Defines a possible line-break

Forms and Input

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<button>	Defines a clickable button
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

Frames

Tag	Description
<frame>	Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5. Defines a set of frames
<noframes>	Not supported in HTML5. Defines an alternate content for users that do not support frames
<iframe>	Defines an inline frame

Images

Tag	Description
<img>	Defines an image
<map>	Defines a client-side image-map
<area>	Defines an area inside an image-map
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content
<picture>	Defines a container for multiple image resources

Audio / Video

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements (<video>, <audio> and <picture>)
<track>	Defines text tracks for media elements (<video> and <audio>)
<video>	Defines a video or movie

Links

Tag	Description
<a>	Defines a hyperlink
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>	Defines navigation links

Lists

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dir>	Not supported in HTML5. Use <ul> instead. Defines a directory list
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<dd>	Defines a description of a term/name in a description list
<menu>	Defines a list/menu of commands
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu

Tables

Tag	Description
<table>	Defines a table
<caption>	Defines a table caption
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting

Styles and Semantics

Tag	Description
<style>	Defines style information for a document
<div>	Defines a section in a document
<span>	Defines a section in a document
<header>	Defines a header for a document or section
<footer>	Defines a footer for a document or section
<main>	Specifies the main content of a document
<section>	Defines a section in a document
<article>	Defines an article
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
<data>	Links the given content with a machine-readable translation

Meta Info

Tag	Description
<head>	Defines information about the document
<meta>	Defines metadata about an HTML document
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document

Programming

Tag	Description
<script>	Defines a client-side script
<noscript>	Defines an alternate content for users that do not support client-side scripts
<applet>	Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet
<embed>	Defines a container for an external (non-HTML) application
<object>	Defines an embedded object
<param>	Defines a parameter for an object

Versions of HTML5 Framework supported by CAST

This section highlights the HTML5 versions supported by CAST AIP 8.2.x

HTML5 and JavaScript : http://doc.castsoftware.com/display/DOCEXT/HTML5+and+JavaScript

HTML5 and JavaScript - 1.8 : http://doc.castsoftware.com/display/DOCEXT/HTML5+and+JavaScript+-+1.8

Technology (version)	Supported
HTML (1 to 5)
JavaScript (1 to 1.8.1)
JavaScript ECMA 6
CSS (1 to 3)

Function Point, Quality and Sizing support
This extension provides the following support:

Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist
Function Points(transactions)
Quality and Sizing

File Types expected for CAST Analysis

This section highlights all the file types that can be expected to be delivered if the application has implemented this framework.

html
js

HTML5

This section gives a brief overview of HTML5.

How to identify the implementation of HTML5:

This section details the approach for identifying the presence in java

In your html file you would be able to find this tag: <meta charset="UTF-8">

HTML5 Description:

This section gives a brief overview of HTML5.

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

It is a new version of the language HTML, with new elements, attributes, and behaviors,
and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

Designed to be usable by all Open Web developers,the tags classified into several groups based on their function.

Sample Tags	Description
<header>	Defines the webpage header
<footer>	Defines the page footer
<nav>	Defines the navigation bar
<main>	Defines the main content of a webpage
<article>	Defines an article within a page
<section>	Defines a section of a document or article
<aside>	Defines content outside a page's primary content

How to configure HTML5 in CAST AIP:

This section describes all the CAST configuration steps to be followed in order to configure HTML5 based application.

The following objects are displayed in CAST Enlighten:

Icon	Description
	JavaScript file
	HTML5 Source Code
	HTML5 CSS Source Code
	HTML5 CSS Source Code Fragment
	HTML5 JavaScript Function
	HTML5 JavaScript Source Code
	HTML5 JavaScript Source Code Fragment
	HTML5 Web Socket Service
	HTML5 Get XMLHttpRequest Service
	HTML5 Update XMLHttpRequest Service
	HTML5 Post XMLHttpRequest Service
	HTML5 Delete XMLHttpRequest Service

Server Manager Configuration

This section describes the Server Manager Configuration Steps.

Install below listed Extension & Manage it using Server Manager on your schema.

Downloading a new version of an extension
The following section describes how to download a new version of an existing extension. For this example, we have already been using a version of the AngularJS extension and we want to install a new version to take advantage of bug fixes and new Quality Rules. To do so:

- As shown in the image below, select:
1. the Updates option (this option displays all extensions that are available on the remote server that are a more recent version of an extension that has already been downloaded to the local machine)
2. the Latest versions only option (CAST recommends this option to filter out previous releases of extensions)
3. the Long term support only option (CAST recommends this option to filter out pre-release or BETA releases)

- In the image above there is one extension available. This is a more recent version of the AngularJS extension that we have been using already with CAST AIP.
- Select the required extension and click the Upgrade button:

- The new version of the extension will now download to the local machine. In the following image we can see that the newer version of the AngularJS extension (1.8.0) has been placed on disk in %PROGRAMDATA%\CAST\CAST\Extensions (CAST AIP 8.x.x) or in <CAST_installation_folder>\CustomPlugins (CAST AIP 7.3.x) along side the existing version:

Pre Analysis Configuration

This Section describes the CMS Configuration which is required to set HTML5

Using the CAST Management Studio

Accept and deploy the Version in the CAST Management Studio. No Analysis Units will be created automatically relating to the HTML5/JavaScript source code - this is the expected behavior. However, if your HTML5/JavaScript related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

Enlighten

This Section gives an overview of the Enlighten diagram.

Once the analysis/snapshot generation has completed, you can view the results in the normal manner:

CAST Management Studio analysis content

CMS Configuration

This Section describes the CMS Configuration which is required to set HTML5 in CAST.

In the Current Version tab, add a new Analysis Unit, selecting the Add new Universal Analysis Unit option:

Edit the new Analysis Unit and configure in the Source Settings tab:
- a name for the Analysis Unit
- ensure you tick the HTML5/JavaScript option
- define the location of the deployed HTML5/JavaScript source code (the CAST Management Studio will locate this automatically in the Deployment folder):

Do not add a dependency from this Analysis Unit to another client Analysis Unit.

Run a test analysis on the Analysis Unit
Make sure you have manually run the Import Assessment Models option.

TCC Configuration

This Section describes the TCC configuration which needs to be set.

eFile [or] .html files as Entry point

Reference Materials

Topic	Link
UTF-8 and Unicode	http://www.utf-8.com/
HTML5 Introduction	https://www.w3schools.com/html/html5_intro.asp
HTML5	https://en.wikipedia.org/wiki/HTML5
Learn HTML5 Programming From Scratch	https://www.udemy.com/learn-html5-programming-from-scratch/
HTML5 Features	https://www.codecademy.com/articles/html5-features
HTML5	http://www.websitenero.com/application/content/html-module/basic-html/what-is-html.html
HTML 5 Demos and Examples	https://html5demos.com/
HTML5 Event Handling	https://dzone.com/refcardz/html5-new-standards-web-interactivity?chapter=9
Rendering form template for HTML5 forms	https://helpx.adobe.com/aem-forms/6/html5-forms/rendering-form-template.html
HTML5 : Form Input Elements	http://www.tutorialsdesk.com/2012/09/the-element-in-html5.html
HTML5 Events	http://www.tutorialsdesk.com/2012/09/html5-events.html

HTML5 - Best Practice