MetroUI-Apps-HTML-5 iconHTML5

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)

(tick)

JavaScript (1 to 1.8.1)

(tick)

JavaScript ECMA 6

(error)

CSS (1 to 3)

(tick)


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

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.


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:

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:


Pre Analysis Configuration

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

Using the CAST Management Studio

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:


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

TCC Configuration

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


Reference Materials

TopicLink
UTF-8 and Unicodehttp://www.utf-8.com/
HTML5 Introductionhttps://www.w3schools.com/html/html5_intro.asp
HTML5https://en.wikipedia.org/wiki/HTML5
Learn HTML5 Programming From Scratchhttps://www.udemy.com/learn-html5-programming-from-scratch/
HTML5 Featureshttps://www.codecademy.com/articles/html5-features
HTML5http://www.websitenero.com/application/content/html-module/basic-html/what-is-html.html
HTML 5 Demos and Exampleshttps://html5demos.com/
HTML5 Event Handlinghttps://dzone.com/refcardz/html5-new-standards-web-interactivity?chapter=9
Rendering form template for HTML5 formshttps://helpx.adobe.com/aem-forms/6/html5-forms/rendering-form-template.html
HTML5 : Form Input Elementshttp://www.tutorialsdesk.com/2012/09/the-element-in-html5.html
HTML5 Eventshttp://www.tutorialsdesk.com/2012/09/html5-events.html