Competency Based Learning

Material

Sector: Information and Communication Technology (ICT)

Qualification Title: Programming (.Net Technology) NC III

Unit of Competency: Perform Programming in HTML5 with JavaScript and

CSS3

Module Title: Performing Programming in HTML5 with JavaScript and CSS3

College for Research and Technology

 How to use this CBLM

Welcome to the Module “Performing Programming in HTML5 with

JavaScript and CSS3”. This module contains training materials and
activities for you to complete.

The unit of “Perform Programming in HTML5 with JavaScript and

CSS3” contains the knowledge, skills and attitude required for Programming
(.Net Technology) course required to obtain the National Certificate (NC) level
III.

You are required to go through a series of learning activities is order to

complete each of the learning outcomes of the module. In each learning
outcomes there are Information Sheets, Job Sheets, Operation Sheets,
and Activity Sheets. Follow these activities on your own and answer the
self-check at the end of each learning activity.

If you have questions, do not hesitate to ask your teacher for

assistance

Recognition for Prior Learning (RPL)

You have already some basic knowledge and skills covered in this
module. If you can demonstrate competence to your teacher in a particular
skill, talk to him/her so you did not have to undergo the same training
again. If you have a qualification or Certificate of Competency from previous
trainings show it to him/her. If the skills you required are consistent with
the relevant to this module, they become part of the evidence. You can
present these RPL. If you are not sure about your competence skills, discuss
this with your teacher.

After completing this module, ask your teacher to assess your

competence. Result of your assessment will be recorded in your competency
profile. All the learning activities are designed for you to complete at your
own pace.

In this module, you will find the activities for you to accomplish and
relevant information sheets for each learning outcomes. Each learning
outcomes may have more than one learning activity.
 This module is prepared to help you achieve the required competency
in receiving and relaying information. This will be the source of information
that will enable you to acquire the knowledge and skills in Programming
(.Net Technology) NC III independently at your own pace with minimum
supervision from your trainer.

PROGRAMMING (.NET TECHNOLOGY) NC III

COMPETENCY-BASED LEARNING MATERIALS

Lists of Competencies

No. Unit of Competency Module Title Code

Performing
Perform Programming in
Programming in HTML5
1 HTML5 with JavaScript
with JavaScript and
ICT313357
and CSS3
CSS3
Developing ASP.NET
Develop ASP.NET MVC 5
2 Web Applications
MVC 5 Web ICT313358
Applications
UNIT OF COMPETENCY: Perform Programming inHTML5 with JavaScript
and CSS3
MODULE TITLE: Performing Programming in HTML5 with JavaScript and
CSS3

MODULE DESCRIPTOR: This unit provides an introduction to HTML5,

CSS3, and JavaScript. This course helps
students gain basic HTML5/CSS3/JavaScript
programming skills. This course is an entry
point into both the Web application and
Windows Store apps training paths. The course
focuses on using HTML5/CSS3/JavaScript to
implement programming logic, define and use
variables, perform looping and branching,
develop user interfaces, capture and validate
user input, store data, and create well-
structured application. Further, this unit covers
the skills, knowledge and attitude required in
developing HTML5 websites. This also includes
an introduction to the Windows 8 platform and
the Windows Store apps.

NOMINAL DURATION: 60 Hours

LEARNING OUTCOMES:

Upon completion of this module, the trainee/student must be able to:

LO1: Develop basic HTML document using HTMP5 and CSS 3 syntax.
LO2: Create HTML5 document using advanced techniques with JavaScript
and CSS3.
LO3: Communicate with Remote Data Source and Create Objects and
Methods using JavaScript.
LO4: Create intuitive user interface and add offline support for web
applications.
LO5: Use CSS3 to create scalable graphics and animated user interface.
LO6: Implement real-time communications by using web-sockets and web
worker process.
LO7: Explore the Windows 8 platform and Windows Store Apps.
 LEARNING OUTCOMES NO. 1: Develop basic HTML document using
HTMP5 and CSS 3 syntax

CONTENTS:

 What is HTML?
 Web Server
 Domain Names
Understanding the HTML Tags
- <!DOCTYPE HTML>
- <HTML> </HTML>
- <Body> </Body>
- <br> </br>
- <p> </p>
- <i> </i>
- <h1> </h1> to <h6> </h6>
- <img> </img>

ASSESSMENT CRITERIA:

1. Domain model is produced to illustrate different business domain

features.
2. Business processes are documented using agreed representation
format.
3. Interaction diagrams are produced that describe in detail how the
objects will interact with the business logic to perform the methods or
functions of the business processes.
4. Interaction diagrams are documented using agreed representation
format.
5. An HTML5 document is created and configured according to user’s
specification.
6. The HTML5 document is designed using cascading style sheet 3
(CSS3).
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
 Observation in workplace
Interviews/ questioning
LEARNING OUTCOMES NO. 2: Create HTML5 document using advanced
techniques with JavaScript and CSS3.

Contents:

 HTML5 Structure Elements

 Using a code validator
 HTML5 APIs

ASSESSMENT CRITERIA:

1.1 Static pages are created using the new features available in HTML5.
1.2 CSS3 is used to apply basic styling to the elements in an HTML5 page.
1.3 Syntax of JavaScript is explained and how to use JavaScript with
HTML5 is described.
1.4 JavaScript code that manipulates the HTML DOM is written and events
are handled.
1.5 How to use JQuery is described to simplify code that uses many
common JavaScript APIs.
1.6 Forms that use the new HTML5 input types are created.
1.7 User input is validated and feedback is provided by using the new
HTML5 attributes.
1.8 JavaScript code is written to validate user input and feedback is
provided in cases where it is not suitable to use HTML5 attributes
1.9 Text elements are styled on an HTML5 page by using CSS3.
1.10 Styling is applied to block elements by using CSS3.
1.11 CSS3 selectors are used to specify the elements to be styled in a Web
application.
1.12 Graphical effects and transformations are implemented by using
the new CSS3.
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
 Observation in workplace
Interviews/ questioning
LEARNING OUTCOMES NO. 3: Communicate with Remote Data Source
and Create Objects and Methods using
JavaScript

CONTENTS:

 Retrieving the data with an HTTP request

ASSESSMENT CRITERIA:

1.13 Data are serialized, deserialized, sent and received by using

XMLHTTPRequest object.
1.14 Code that serializes, deserializes, sends, and receives data is simplified
by using the jQuery ajax method.
1.15 Benefits of structuring JavaScript code is described carefully to aid
maintainability and extensibility.
1.16 Best practices are explained for creating custom objects in JavaScript.
How to extend custom and native objects is described to add functionality.
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
 Observation in workplace
Interviews/ questioning
LEARNING OUTCOMES NO. 4: Create intuitive user interface and add
offline support for web applications

CONTENTS:

 Creating a Simple Offline Application

 Going Offline
 Going Offline
 Manifest Files

ASSESSMENT CRITERIA:

1.17 Drag and Drop and File APIs are used to interact with files in a Web application.
1.18 Audio and video are incorporated into a Web application.
1.19 Location of the user running a Web application is detected by using the
Geolocation API.
1.20 How to debug and profile a Web application is explained by using the Web
Timing API.
1.21 The need to detect device capabilities is described and reacted to different form
factors in a Web application.
1.22 Web page that can dynamically adapt its layout to match different form factors is
created.
1.23 Data is saved and retrieved locally on the user's computer by using the Local
Storage API.
Offline support is provided for a Web application by using the Application Cache API.
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
LEARNING OUTCOMES NO. 5: Use CSS3 to create scalable graphics and
animated user interface

CONTENTS:

 What are CSS Animations?

 The @keyframes Rule
 Delay an Animation
 Set How Many Times an Animation Should Run
 Run Animation in Reverse Direction or Alternate Cycles
 Animation Shorthand Property
ASSESSMENT CRITERIA:

1.24 Scalable Vector Graphics are used to add interactive graphics to an

application.
1.25 Complex graphics are drawn on an HTML5 Canvas element by using
JavaScript code.
1.26 CSS transitions are applied to elements on an HTML5 page, and write
JavaScript code to detect when a transition has occurred.
1.27 Different types of 2D and 3D transitions available with CSS3 are
described.
Complex animations are implemented by using CSS key-frames and
JavaScript code.
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
LEARNING OUTCOMES NO. 6: Implement real-time communications by
using web-sockets and web worker process

CONTENTS:

 How WebSockets Work

 Web Sockets – Definition

 Description of Web Socket Protocol

 URL
 WebSockets - Duplex Communication

 WebSockets - Implementation

 WebSockets - Events & Actions

ASSESSMENT CRITERIA:

1.28 How Web Sockets work is explained and how to send and receive data
through a Web Socket is described.
1.29 Web Socket API with JavaScript is used to connect to a Web Socket
server, send and receive data, and handle the different events that can
occur when a message is sent or received.
1.30 The purpose of a Web Worker process and how it can be used to
perform asynchronous processing as well as provide isolation for
sensitive operations is described.
1.31 Web Worker APIs from JavaScript code is used to create, run, and
monitor a Web Worker process.
Occupational health and safety standards in the workplace and 5S
disciplines are strictly followed as per enterprise policies and procedures.
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
LEARNING OUTCOMES NO. 7: Explore the Windows 8 platform and
Windows Store Apps

CONTENTS:

 Windows 8 major features

 Windows Store

 Microsoft Specialty Stores

ASSESSMENT CRITERIA:

1.32 Windows 8 platform, architecture, and features are described.

1.33 Basics of the Windows 8 UI and Windows Store app experience and how
it differs from Windows desktop apps are explained.
1.34 New API model, how it supports building Windows Store apps, and how
it supports multiple language-specific projections are explained.
1.35 Single-page based Windows Store apps is described
Windows store apps using MVVM (model-view-view-model) design pattern
with JavaScript are designed and implemented.
CONDTIONS:

The students/trainees must be provided with the following:

 Computer Software
 Visual Studio Express 2012 or higher
 Application servers
 SQL Server Express 2012 or higher
 Network Computer (on Windows 8 or higher) with peripherals
 Reference books
 Practice materials
 Learning materials/guide

METHODOLOGIES:

 Lecture/ Discussion
 Hands on
 Exercises
Demonstration

ASSESSMENT METHODS:

 Written exam
 Practical exam
 Information Sheet 1.1-1
Develop basic HTML document using HTMP5 and CSS 3 syntax

What is HTML?

HTML stands for Hyper Text Markup Language; it’s the standard
markup language for Web pages. HTML elements are the building blocks of
HTML pages, elements are represented by <> tags.

Web Server

A Web server is a program that uses HTTP (Hypertext Transfer

Protocol) to serve the files that form Web pages to users, in response to their
requests, which are forwarded by their computers' HTTP clients. Dedicated
computers and appliances may be referred to as Web servers as well.

Domain Name

A domain name is your website name. A domain name is the

address where Internet users can access your website. A domain name is
used for finding and identifying computers on the Internet. Computers
use IP addresses, which are a series of number. However, it is difficult for
humans to remember strings of numbers. Because of this, domain names
were developed and used to identify entities on the Internet rather than
using IP addresses.

A domain name can be any combination of letters and numbers, and it

can be used in combination of the various domain name extensions, such
as .com, .net and more.

The domain name must be registered before you can use it. Every domain
name is unique. No two websites can have the same domain name. If
someone types in www.yourdomain.com, it will go to your website and no
one else's.

Understanding the HTML Tags

<!DOCTYPE HTML>

The <!DOCTYPE html> declaration is used to inform a website visitor's

browser that the document being rendered is an HTML document. While not
actually an HTML element itself, every HTML document should being with a
DOCTYPE declaration to be compliant with HTML standards.
<HTML> </HTML>.

Most tags must have two parts, an opening and a closing part. For
example, <html> is the opening tag and </html>is the closing tag. Note that
the closing tag has the same text as the opening tag, but has an additional
forward-slash ( / ) character. I tend to interperet this as the "end" or "close"
character.

<Body> </Body>

The <body> tag defines the document's body. The <body> element contains
all the contents of an HTML document, such as text, hyperlinks, images,
tables, lists, etc

<br> </br>

The HTML <br> element produces a line break in text (carriage-return). It is

useful for writing a poem or an address, where the division of lines is
significant.

<p> </p>

The <p> tag defines a paragraph. Browsers automatically add some space
(margin) before and after each <p> element.

<i> </i>

The <i> tag defines a part of text in an alternate voice or mood. The content
of the <i> tag is usually displayed in italic. The <i> tag can be used to
indicate a technical term, a phrase from another language, a thought, or a
ship name, etc.

<h1> </h1> to <h6> </h6>

The HTML <h1> to <h6> tag is used to define headings in

an HTML document. <h1> defines largest heading and <h6> defines smallest
heading.

<img> </img>

The <img> tag defines an image in an HTML page. The <img> tag has two
required attributes: src and alt. Note: Images are not technically inserted
into an HTML page, images are linked to HTML pages. The <img> tagcreates
a holding space for the referenced image.
 Create HTML5 document using advanced techniques with JavaScript
and CSS3.

HTML5 Structure Elements

The Header Element

HTML5 semantics come into play with all of the new elements. As you will
see throughout this tutorial, the names of the structural HTML5 tags
indicate something meaningful about the content or role of the elements
they define. The header element is the perfect example. As you may have
guessed, it's designed for the header area of a page or page section.
The header often contains one or more of the heading tags h1 to h6.
However, the header can contain other elements as well. Add the following to
the body section of your page:

<header>

<h1>Breaking News</h1>

<div>Catch up on all the latest news stories.</div>

</header>

The Footer Element

Let's move straight on to the footer element since it's so similar to

the header. At the bottom of your page body, add the following:
<footer>

<p>This site is produced by Great Sites Inc.</p>

</footer>

The Nav Element

So far we have covered two elements almost every web page contains; now,
let's turn to another, the navigation section. The nav element is designed for
the main navigation part of a page, which will typically contain a list of links
to other pages on the site. Insert the following after your header element

<nav>

<ul>

<li><a href="#">Technology</a></li>

<li><a href="#">Business</a></li>
 <li><a href="#">Entertainment</a></li>

</ul>

</nav>

The Section and Article Elements

So far so intuitive, but now things get a little more complex.

The section and article elements have been the source of confusion for some
developers as there is some flexibility about how they are used. Essentially
the section element marks sections of the page or sections of another
element (such as an article element)

<section id="top_story">

</section>

<section id="other_news">

</section>

<section id="popular_stories">

</section>

<section id="multimedia_items">

</section>

Code Validation

Code validation is the process of checking that the coding of a web page is in
compliance with the standards and recommendations set by the World
Wide Web Consortium (W3C) for the web. Code validation helps to produce
clean code.

Web page HTML (Hyper Text Markup Language), Cascading Style Sheets
(CSS), hyperlinks (also know as links) and accessibility can be validated.

Code validation is done through the use of HTML validators, Cascading

Style Sheet validators, link checkers and accessibility validators
available on the Net or as downloadable software. Each type of validator will
be covered in this article and the resulting benefits of clean code explained.
HTML5 APIs

Using HTML Geolocation

The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

Example
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
 Communicate with Remote Data Source and Create Objects and
Methods using JavaScript

HTTP requests allow us to request resources that our application can make
use of. In the context of this article, this will generally mean requesting data
from some API over the Internet, or loading data from a JSON file over the
local network. These are HTTP requests that we are going to be launching
manually through our code.

However, HTTP requests are also used to load other resources in our
applications like images or CSS files. If you open up the debugging window,
go to the ‘Network’ tab, and reload any web page, you will probably see a
bunch of HTTP requests that are launched to load various resources.

In effect, an HTTP request is where the browser is given a particular URL

and asked to load the resource that lives at that URL (or, send data to that
URL).

The HttpClient and HttpClientModule

Many of the resources in our application are automatically loaded over the
network (e.g. images, JavaScript files, CSS files), but often we will need to
manually launch an HTTP request from our code to grab data. Generally, we
would do this when we need to load some data from an API or a JSON file.

In order to make HTTP requests in an Ionic/Angular environment, we need

to make use of the HttpClient and HttpClientModule that Angular provides.
This just happens to be the way that Angular deals with HTTP requests and
the HttpClient is provided to make it easier for us to launch HTTP requests
in an Angular environment. In different environments, the way in which you
launch an HTTP request will differ.
First, we must add the HttpClientModule to the root module of our
application:
Import the HttpClientModule in src/app/app.module.ts:

import { HttpClientModule } from '@angular/common/http';

Add the HttpClientModule to the imports array in src/app/app.module.ts:

imports: [

BrowserModule,

HttpClientModule,

IonicModule.forRoot(),

AppRoutingModule

],

By adding the HttpClientModule to our imports, we are making the

functionality that is necessary to make HTTP requests available throughout
the application.

With the HttpClientModule set up, we then need to inject the HttpClient into
any class where we want to launch an HTTP request.
Import the HttpClient into any files that contain classes where you want to
make HTTP requests:

import { HttpClient } from '@angular/common/http';

Inject the HttpClient into the constructor of any class where you want to make
HTTP requests:

constructor(private http: HttpClient) {

The example above injects the HttpClient as http which will allow HTTP
requests to be launched from anywhere within that class like this:
this.http.get('https://someapi.com/posts').subscribe((response) => {

console.log(response);

});

The Role of Observables in HTTP Requests

When dealing with the HttpClient it is important to have a basic

understanding of observables. In the code above, the get method that we
are calling on the HttpClient will return an observable. We subscribe to this
observable, which allows us to grab the response from the request.

In short, an observable provides a “stream” of data. By “subscribing” to that

stream, we can listen for that data and do something when it arrives. In the
example above, we are just simply logging out the response that the server
sends us. Among other things, observables are a way for us to deal
with asynchronous operations in our applications – meaning we can
continue running our application whilst some other request is running in
the background. If loading the data from the server is going to take 3
seconds, we don’t want to make our application freeze and wait until that
has finished executing.

For a more detailed introduction to observables, you may want to watch: An

Introduction to Observables for Ionic.

Since observables provide a “stream” of data, meaning that the “subscribe”

handler for an observable could be triggered many times, you might think
that if you were to run the following code:

this.http.get('https://someapi.com/posts').subscribe((response) => {

console.log(response);

});
That the console.log(response) line would be triggered every time that
the posts on the server changes – in essence, you could update your
application every time a new post is added on the server. This is a common
misconception, but it is not the case. Generally, the observable provided by
the HttpClient will only fire once.

If you want to stream data live from a server then you would want to look
into websockets.

GET Requests (Retrieving Data)

A GET request will allow us to retrieve data from a particular URL. We have
already covered what that looks like, but let’s take another look:

this.http.get('https://someapi.com/posts').subscribe((response) => {

console.log(response);

});

We call the get method and supply it with the URL that we want to make the
request to. Once the server has sent its response to our request, it will
trigger the handler we set up using subscribe. The response will contain the
data we were attempting to request.

As well as fetching data from a remote URL, we can also use a GET request
to load data from a local file. That might look something like this:

this.http.get('assets/some-data.json').subscribe((response) => {

console.log(response);

});

This file should be stored along with your applications other static assets in
the assets folder.
POST Requests (Sending Data)

As well as fetching data from a server, we can also send data to a server
through a POST request. A POST request is very similar in nature to a GET
request, except that it also contains an additional body/payload parameter:

this.http.post('https://someapi.com/posts', {

content: 'hello',

submittedBy: 'Josh'

}).subscribe((response) => {

console.log(response);

});

This would allow the server to retrieve the following data from our POST
request:

content: 'hello',

submittedBy: 'Josh'

The server would then likely use that data to create a new “post”. Notice that
the POST request still subscribes to the observable for a response.
Observables are not executed until they are subscribed to, so it is important
that you do this. However, even though we might not technically need the
response we get, a POST request can still send a response just like a GET
request can. We might use this just to verify that the server received and
executed the request correctly, or we might get some other useful
information back from the server.
 Create intuitive user interface and add offline support for web
applications

Checking for Browser Support

Before you try to use the Offline Web Applications API, it is a good idea to
check for browser support. Listing 12-1 shows how you can do that.

if(window.applicationCache) {
// this browser supports offline applications
}
Creating a Simple Offline Application

Let’s say that you want to create a one-page application that consists of
an HTML document, a style sheet, and a JavaScript file. To add offline
support to your HTML5 application, you include a manifest attribute on
the html element as shown in the Listing 12-2.
<!DOCTYPE html>
<html manifest="application.appcache">
.
.
.
</html>
Alongside the HTML document, provide a manifest file with
the *.appcacheextension) specifying which resources to cache. Listing 12-3
shows the contents of an example cache manifest file.

CACHE MANIFEST
example.html
example.js
example.css
example.gif
Going Offline

To make applications aware of intermittent connectivity, there are

additional events exposed by HTML5 browsers. Your applications may have
different modes for online and offline behavior. Some additions to
the window.navigator object make that easier. First, navigator.onLine is a
Boolean property that indicates whether the browser believes it is online. Of
course, a true value of onLine is not a definite assurance that the servers
that your web application must communicate with are reachable from the
user’s machine. On the other hand, a false value means the browser will not
even attempt to connect out over the network. Listing 12-4 shows how you
can check to see if your page is online or offline.
Listing 12-4. Checking Online Status

// When the page loads, set the status to online or offline

function loadDemo() {
if (navigator.onLine) {
log("Online");
} else {
log("Offline");
}
}
// Now add event listeners to notify a change in online status
window.addEventListener("online", function(e) {
log("Online");
}, true);
window.addEventListener("offline", function(e) {
log("Offline");
}, true);
Manifest Files

Offline applications consist of a manifest listing one or more resources

that browser will cache for offline use. Manifest files have the MIME
type text/cache-manifest. The SimpleHTTPServer module in the Python
standard library will serve files with the .manifest extension with the
header Content-type: text/cache-manifest. To configure settings, open the
file PYTHON_HOME/Lib/mimetypes.py, and add the following line:
'.appcache' : 'text/cache-manifest manifest',
Other web servers may require additional configuration. For example, for
Apache HTTP Server, you can update the mime.types file in the conf folder
by adding the following line:
text/cache-manifest appcache
If you are using Microsoft IIS, in your website’s home, double-click the
MIME Types icon, then add the .appcache extension with MIME
type text/cache-manifest in the Add MIME Type dialog.

The manifest syntax is simple line separated text that starts with CACHE
MANIFEST (as the first line). Lines can end in CR LF or CRLF—the format is
flexible—but the text must be UTF-8 encoded, which is the typical output for
most text editors. Comments begin with the hash symbol and must be on
their own lines; you cannot append a comment to other non-comment lines
in the file.

Listing 12-5. Example Manifest File with All Possible Sections

CACHE MANIFEST
# files to cache
about.html
html5.css
index.html
happy-trails-rc.gif
lake-tahoe.JPG
#do not cache signup page
NETWORK
signup.html
FALLBACK
signup.html offline.html
/app/ajax/ default.html

Let’s look at the different sections.

If no CACHE: heading is specified, the files that are listed will be treated
as files to be cached (caching is the default behavior). The following simple
manifest specifies that three files (index.html, application.js, and style.css)
must be cached:

CACHE MANIFEST

index.html

application.js

style.css

Similarly, the following section would do the same (you can use the same
CACHE, NETWORK, and FALLBACK headers multiple times in a manifest
file if you want to):

CACHE MANIFEST

# Cache section

CACHE:

Index.html

application.js

style.css

By listing a file in the CACHE section, you instruct the browser to serve
the file from the application cache, even if the application is online. It is
unnecessary to specify the application's main HTML resource. The HTML
document that initially pointed to the manifest file is implicitly included (this
is called a Master entry). However, if you want to cache multiple HTML
documents or if you would like multiple HTML documents to act as possible
entry points for the cacheable application, they should all be explicitly listed
in the cache manifest file.
 Use CSS3 to create scalable graphics and animated user interface

What are CSS Animations?

CSS animations allows animation of most HTML elements without using
JavaScript or Flash!

The @keyframes Rule

To define an animation you have to start with the @keyframes rule.

A @keyframe rule consists of the keyword “@keyframes“, followed by
an identifier giving a name for the animation (which will be referenced
using animation-name), followed by a set of style rules (delimited by curly
braces). The animation is then applied to an element by using the identifier
as a value for the animation-nameproperty. For example:
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}

/* apply it to an element */
.element {
animation-name: your-animation-name;

/* OR using the animation shorthand property */

animation: your-animation-name 1s ...
}

Delay an Animation

Start the animation after 2 seconds:

div {
animation-delay: 2s;
}
Set How Many Times an Animation Should Run

@keyframes example {

from { background-color: red; }

to { background-color: green; }

.view {

animation-name: example;

animation-duration: 4s;

animation-fill-mode: forwards;

Run Animation in Reverse Direction or Alternate Cycles

Play the animation forwards first, then backwards:

div {
animation-direction: alternate;
}

Animation Shorthand Property

Binding an animation to a <div> element, using the shorthand property:

div {
animation: mymove 5s infinite;
}

The animation property is a shorthand property for:

 animation-name
 animation-duration
 animation-timing-function
 animation-delay
 animation-iteration-count
 animation-direction
 animation-fill-mode
 animation-play-state
 Implement real-time communications by using web-sockets and web
worker process

How WebSockets Work

WebSockets provide a persistent connection between a client and server that

both parties can use to start sending data at any time.

The client establishes a WebSocket connection through a process known as

the WebSocket handshake. This process starts with the client sending a
regular HTTP request to the server. An Upgrade header is included in this
request that informs the server that the client wishes to establish a
WebSocket connection.

Here is a simplified example of the initial request headers.

GET ws://websocket.example.com/ HTTP/1.1

Origin: http://example.com

Connection: Upgrade

Host: websocket.example.com

Upgrade: websocket

Description of Web Socket Protocol

This protocol defines a full duplex communication from the ground up. Web
sockets take a step forward in bringing desktop rich functionalities to the
web browsers. It represents an evolution, which was awaited for a long time
in client/server web technology.

The main features of web sockets are as follows −

 Web socket protocol is being standardized, which means real time

communication between web servers and clients is possible with the
help of this protocol.

 Web sockets are transforming to cross platform standard for real time
communication between a client and the server.
  This standard enables new kind of the applications. Businesses for
real time web application can speed up with the help of this
technology.

 The biggest advantage of Web Socket is it provides a two-way

communication (full duplex) over a single TCP connection.

URL

HTTP has its own set of schemas such as http and https. Web socket
protocol also has similar schema defined in its URL pattern.

The following image shows the Web Socket URL in tokens.

WebSockets - Duplex Communication

Polling
Polling can be defined as a method, which performs periodic requests
regardless of the data that exists in the transmission. The periodic requests
are sent in a synchronous way. The client makes a periodic request in a
specified time interval to the Server. The response of the server includes
available data or some warning message in it.

Long Polling
Long polling, as the name suggests, includes similar technique like polling.
The client and the server keep the connection active until some data is
fetched or timeout occurs. If the connection is lost due to some reasons, the
client can start over and perform sequential request.

Long polling is nothing but performance improvement over polling process,

but constant requests may slow down the process.
Streaming
It is considered as the best option for real-time data transmission. The
server keeps the connection open and active with the client until and
unless the required data is being fetched. In this case, the connection is
said to be open indefinitely. Streaming includes HTTP headers which
increases the file size, increasing delay. This can be considered as a major
drawback.

AJAX
AJAX is based on Javascript's XmlHttpRequest Object. It is an abbreviated
form of Asynchronous Javascript and XML. XmlHttpRequest Object allows
execution of the Javascript without reloading the complete web page. AJAX
sends and receives only a portion of the web page.

WebSockets - Events & Actions

Web Sockets – Events
There are four main Web Socket API events −

 Open

 Message

 Close

 Error

Open
Once the connection has been established between the client and the
server, the open event is fired from Web Socket instance. It is called as the
initial handshake between client and server. The event, which is raised
once the connection is established, is called onopen.

Message
Message event happens usually when the server sends some data.
Messages sent by the server to the client can include plain text messages,
binary data or images. Whenever the data is sent, the onmessage function
is fired.
Close
Close event marks the end of the communication between server and the
client. Closing the connection is possible with the help of onclose event.
After marking the end of communication with the help of onclose event, no
messages can be further transferred between the server and the client.
Closing the event can happen due to poor connectivity as well.

Error
Error marks for some mistake, which happens during the communication.
It is marked with the help of onerror event. Onerror is always followed by
termination of connection. The detailed description of each and every event
is discussed in further chapters.

Web Sockets – Actions

Events are usually triggered when something happens. On the other hand,
actions are taken when a user wants something to happen. Actions are
made by explicit calls using functions by users.

The Web Socket protocol supports two main actions, namely −

 send( )

 close( )

send ( )
This action is usually preferred for some communication with the server,
which includes sending messages, which includes text files, binary data or
images.

get text view and button for submitting the message

var textsend = document.getElementById(“text-view”);

var submitMsg = document.getElementById(“tsend-button”);

//Handling the click event

submitMsg.onclick = function ( ) {

// Send the data

socket.send( textsend.value);

close ( )
This method stands for goodbye handshake. It terminates the connection
completely and no data can be transferred until the connection is re-
established.

var textsend = document.getElementById(“text-view”);

var buttonStop = document.getElementById(“stop-button”);

//Handling the click event

buttonStop.onclick = function ( ) {

// Close the connection if open

if (socket.readyState === WebSocket.OPEN){

socket.close( );

It is also possible to close the connection deliberately with the help of

following code snippet −

socket.close(1000,”Deliberate Connection”);
 Explore the Windows 8 platform and Windows Store Apps

Windows 8 major features

EASY GESTURES

Windows 8 is the first truly gestural version of Windows. The OS supports

intuitive simple touch gestures like swiping in from the left to switch apps
and swiping in from the right for the Charms menu. Semantic zoom is
another big winner. Whether you’re in the Start Screen or a specific app, like
the People hub, you can navigate using the pinch-to-zoom gesture to get a
high-level view. For example, you can use semantic zoom in the News app to
see all of the news sections available, instead of having to scroll through the
app. Other useful gestures include swiping in from the top of the screen for
app-specific commands and settings and dragging an app from the top down
to close it out.

LIVE TILES AND LOCK SCREEN

The apps you use in Windows 8 can feed you information without you even
having to open them. This is especially helpful with home-bred Microsoft
apps like Mail, Calendar, Photos and News, for viewing new e-mail,
upcoming events, thumbnail images and the latest headlines. Third-party
app developers can also take advantage of the Live Tile feature. For example,
LivingSocial shows you snippets of new deals in your area. If you’re sick of a
specific app’s constantly changing tile, you can always turn the Live Tile
feature off. Microsoft has also given more life to the lock screen in Windows
8. You can select up to seven apps that will constantly run in the
background and send notifications to the lock screen. You can also select
between the Weather and Calendar apps to show information on the Lock
Screen at all times. Got a meeting coming up? Your Lock Screen can tell
you.

SYSTEM-WIDE SEARCH

Windows 8 offers a great tool for searching for files, apps, and specific
settings directly from the Start Screen, just by typing. If an app comes with
built-in search, you’ll also be able to quickly search within that apps from
the Search charms bar. For example, say you want to search for “food
trucks.” The Windows 8 search will be able to look through any apps or files
related to food trucks, but you can also just tap Bing to jump into that app’s
search functionality.
REFRESH AND RESET

With Windows 8, Microsoft now offers a very easy way to refresh or reset
your PC. The refresh option is especially useful when you find your PC
acting slow or buggy. In a one-click or one-tap move, you can refresh the PC
without changing any of your files, Windows Store apps, or personalization
settings. All of the PC settings will be changed back to the default, and you
will lose any desktop programs since those are not synced with your
Windows Account. Still, if it comes down it, it’s a easy fix. Reset, on the
other hand, is great for when you want to hand off your old PC to a new
owner. If you want to make sure that everything is wiped, this is your go-to
button. No more having to delete individual files or go through
manufacturer-specific programs to figure it out. You can find both features
in the Charms bar: Click Settings, choose “Change PC Settings” and go to
the “General” section.

SETTINGS SYNC

No matter what PC, tablet or notebook you use, you’ll be able to sync your
personal settings. Thanks to the Microsoft account and Windows 8’s cloud-
friendly platform, your personalizations can travel with you. The “Sync your
settings” option within your PC settings lets you sync personalizations
(background, colors, lock screen and account picture), passwords, language
preferences, app settings, browser settings, and more. It makes using a new
device much easier and makes borrowing a friend’s tablet or notebook a
more personal experience.

SNAP VIEW FOR MULTITASKING

Windows Store apps, which default to full-screen mode, can also snap next
to each other for super simple multitasking. When you snap two apps side-
by-side, one occupies a small sliver of the screen (about one-fourth) on the
right or left. A second app takes up more space for a larger view. This is
especially useful for times when you want to, say, chat with a friend while
browsing the web. Or perhaps you want to view Map directions while your
road-trip partner (or kid) watches a movie. It’s a quick and simple way to do
two tasks at once, without having to constantly switch through apps, tabs,
or windows.
PIN ANYTHING

The Start Screen isn’t useful only for its Live Tiles and customization. It’s
also a virtual bulletin board where you can pin specific websites and
particular sections from apps. For example, you can pin individuals from the
People hub directly to your Start Screen for quick access. If you’re a big fan
of the Travel app but you only want to look at certain destinations, you can
pin them for convenience. Pin Shanghai to your Start Screen before your big
vacation, and switch it out for your next destination at a later date. You can
always pin and un-pin items from your Start Screen.

SHARE EVERYTHING

Windows 8 brings sharing to the fore. If something is shareable, Microsoft

wants you to share it, and not only with friends, but with other apps. When
you’re in an app, open up the charms bar and tap the Share button (or hold
the Windows key and the H key on your keyboard). You’ll see exactly where
you can share your item, whether it’s an image, link or section within an
app. The Share menu will let you post to your social networks and e-mail,
but you’ll also be able to share between apps. For example, you can share a
link for the weather in New York from the Weather app to the Clipboard or
Sticky Notes 8 (a third-party app I downloaded). The Share charm will even
start to recognize where and with whom you share the most.

TASK MANAGER

Not all of the best features are limited to the new Start Screen environment.
The Task Manager in Windows 8’s desktop environment is much improved.
The tool has several new features and is much more intuitive to use. Once
you launch the program, you’ll see a complete list of everything that’s
running on your device, separated by section: apps, background processes,
and Windows processes. You can see how much of your device’s resources
each app or process takes. You can also drill down even further. For
example, you can open up each window in a browser app or right click a
process and choose “search online” to understand what it does. The
Performance tab gives you an at-a-glance status update on your CPU,
Memory, Disk, Bluetooth, and Wi-Fi usage in moving charts. App history
shows you how much CPU and bandwidth your apps have used over time,
making it easy to identify which apps take the most resources. The Startup
tab lets you manage which apps will start automatically when you turn on
your computer. The Users tab shows you usage based on the devices
various users, while the Services tab lets you go through your services to
restart services. In short, the Task Manager adds much more functionality
in a far more attractive space.

THE INTERFACE

OK, this is a cop-out, but Windows 8’s best feature is its radically new
interface. Without it, you wouldn’t have all the other features mentioned
here. The stunning Start Screen UI enables a completely new Windows
experience. While you might have complaints about how it doesn’t work as
well with a keyboard and mouse -- or on a desktop PC -- it’s hard to label
Windows 8 as anything but a step forward for Microsoft. The chromeless,
full-screen Windows Store apps are incredibly slick, and navigating the Start
Screen is quick and seamless. Windows 8 is speedy, and the new look only
enhances this.

HONORARY MENTION: KEYBOARD COMMANDS

Yes, Windows 8 does work most naturally in a touch- or gesture-based

environment. But if you’re using a traditional mouse and keyboard,
Microsoft has enabled tons of new keyboard shortcuts to let you access the
best Windows 8 tools. Here’s a list of some of the most useful commands
(courtesy of Microsoft): Windows logo key + start typing: Search your PC
Ctrl+plus (+) or Ctrl+minus (-): Zoom in or out of many items, like apps
pinned to the Start screen or in the Store Ctrl+scroll wheel: Zoom in or out
of many items, like apps pinned to the Start screen or in the Store Windows
logo key + C: Open the charms Windows logo key + F: Open the Search
charm Windows logo key +H: Open the Share charm Windows logo key +I:
Open the Settings charm Windows logo key + K: Open the Devices charm
Windows logo key + O: Lock the screen orientation (portrait or landscape)
Windows logo key + Z: Open commands for the app Windows logo key +
PgUp: Move the Start screen and apps to the monitor on the right (apps in
the desktop won’t change monitors) Windows logo key + PgDn: Move the
Start screen and apps to the monitor on the left (apps in the desktop won’t
change monitors) Windows logo key + Shift+period (.): Snap an app to the
left Windows logo key + period (.): Snap an app to the right
 Windows Store

Windows Store is the online marketplace for Windows 8 and Windows

RT users to purchase and download apps.

Microsoft announced the Windows Store in September 2011 and opened the
marketplace in February 2012. As of October 2012, the Windows Store
contained about 3,600 apps

Microsoft Specialty Stores

There really is no better place to buy a new ultrabook, tablet or PC

than from the Microsoft Store. Sure you can buy products online, but
having access to a physical store is great for that instant gratification of
picking up your new gadget. You’ll only find those brick-and-mortar stores
in select malls across the United States, Canada and Puerto Rico. Those in
the United States are also set to get 11 new Microsoft Specialty Stores
throughout the month of May. Locations and details below.

Here are the 11 new locations coming and their opening date.

 North Point Mall - Alpharetta, GA - May 3

 The Oaks - Thousand Oaks, CA - May 13

 Park Place - Tucson, AZ - May 13

 Jordan Creek Town Center - Des Moines, IA - May 13

 FlatIron Crossing - Broomfield, CO - May 15

 North Star Mall - San Antonio, TX - May 15

 Westroads Mall - Omaha, NE - May 15

 The Mall in Columbia - Columbia, MD - May 17

 The Maine Mall - S Portland, ME - May 17

 Mall of Louisiana - Baton Rouge, LA - May 17

 Boise Towne Square - Boise, ID - May 17