Download Capabilities Presentation

New Horizons Computer Learning Centers
Unit 622 HTML5 Application Development Fundamentals
Aims and Objectives
Aims
This unit has been designed to help a learner build an understanding of these topics:
Manage the Application Life Cycle, Build the User Interface by Using HTML5, Format the
User Interface by Using CSS, Code by Using JavaScript. Learners are expected to be able
to demonstrate this understanding, so that on successful completion of this unit they will
be able to: manage the Application Life Cycle, build the User Interface by Using HTML5,
format the user interface by using CSS and code by Using JavaScript
Objectives
•
•
•
•
•
Know how to manage the application life cycle.
Know how to build the user interface using HTML5.
Know how to format the user interface using CSS
Know how to code using JavaScript
Be able to create HTML5 based web applications.
platform fundamentals
describe platform fundamentals
Keywords
Semantic Tags
HTML5 APIs
Modernizr
platform fundamentals
describe platform fundamentals
Plan
Design UI
Update
Manifest
Test and
Debug
Build App
Write
Code
Package
Validate
Deploy
platform fundamentals
describe platform fundamentals
Windows App Package Manifest File
platform fundamentals
describe platform fundamentals
platform fundamentals
describe platform fundamentals
Keywords
DOM
BOM
application states
describe how to manage the state of an application
Keywords
localStorage
sessionStorage
Cookies
Application Cache
application states
describe how to manage the state of an application
Keywords
localStorage
sessionStorage
HTML5 touch enabled application
describe how to debug a HTML5 touch enabled application
Keywords
Touch Events
touchstart
touchend
touchmove
HTML5 touch enabled application
describe how to test a HTML5 touch enabled application
publish an application to a store
describe how to publish an application to a store.
HTML5
identify HTML5 tags to display text content
Keywords
Semantic tags
HTML5
identify HTML5 tags to display graphics
Keywords
figure element
figcaption element
HTML5
identify HTML5 tags to display graphics
HTML5
identify HTML5 tags to display graphics
Keywords
canvas api
HTML5
identify HTML5 tags to display graphics
HTML5
identify HTML5 tags to display graphics
Keywords
SVG
HTML5
identify HTML5 tags to play media
HTML5
identify HTML5 tags to play media
Keywords
video element
HTML5
identify HTML5 tags to play media
Keywords
audio element
HTML5
identify HTML5 tags to organise content
HTML5
identify HTML5 tags to organise content
Keywords
div
article
section
main
nav
aside
header
footer
HTML5
identify HTML5 tags to organise content
HTML5
identify HTML5 tags to organise content
HTML5
identify HTML5 tags to organise content
HTML5
identify HTML5 tags to organise content
HTML5
identify HTML5 tags to organise forms
HTML5
Identify HTML5 tags for input
HTML5
Identify HTML5 tags for validation
HTML5
identify HTML5 tags to organise forms (Validation)
CSS
describe core CSS concepts
CSS
describe core CSS concepts
Selector
p
Declaration
{color: brown;}
Property
Value
CSS
describe core CSS concepts
Sans serif
Serif
d
p
t
d p t
CSS
describe core CSS concepts
Keywords
floats
absolute positioning
CSS
describe core CSS concepts
CSS
describe core CSS concepts
CSS
describe core CSS concepts
CSS & UI
describe how to arrange user interface (UI) content using CSS
CSS & UI
describe how to arrange user interface (UI) content using CSS
CSS & UI
describe how to arrange user interface (UI) content using CSS
CSS & UI
describe how to arrange user interface (UI) content using CSS
CSS & UI
describe how to arrange user interface (UI) content using CSS
A parent flexbox
with three child
boxes (flexbox
items)
Modifying the
third child box
to fill the
available space
CSS & UI
describe how to arrange user interface (UI) content using CSS
CSS & UI
describe how to arrange user interface (UI) content using CSS
CSS & UI
describe how to arrange user interface (UI) content using CSS
Keywords
flexbox
cssgrid
CSS & Text Flow
describe how to manage the flow of text content using CSS
CSS & Text Flow
describe how to manage the flow of text content using CSS
CSS & Text Flow
describe how to manage the flow of text content using CSS
CSS & Text Flow
describe how to manage the flow of text content using CSS
column-rule: 3px dashed blue;
column-gap: 3em;
CSS & Text Flow
describe how to manage the flow of text content using CSS
CSS & Graphic Effects
describe how to create graphic effects using CSS.
JavaScript
describe how to manage Java Script
JavaScript
describe how to manage Java Script
JavaScript
describe how to update the UI using JavaScript
JavaScript
identify JavaScript animation code
JavaScript
describe how to access data using JavaScript
HTML5
access data using JavaScript
JavaScript
identify code that responds to touch
JavaScript
identify HTML5 API code
HTML5 Web Application
build user interface using HTML5
HTML5 & CSS3
format user interface using CSS
HTML5 & JavaScript
access data using JavaScript.
Q&A