SpringPeople Introduction to HTML5 and CSS3

7/28/2019 SpringPeople Introduction to HTML5 and CSS3

1/20

SpringPeople Software Private Limited, All Rights Reserved.


Introduction to HTML5 & CSS3


2/20


Whats New in HTML5?

Client Side Storage

Web SQL Storage

Offline

Geo Location

Web Workers

Drag & Drop

New XHR

Web Sockets


3/20


Client Side Storage

Old Way: Cookies

Small text files with name values pairs

Not very scalable

Accessible for any one on the client

Security issues, to some extant

New Way: Storage

Browser specific implementation to store name value pairs

Value can be number, string or any complex object

Accessible only for the owning application Two kinds of storage

Local Storage for persistence across browser sessions

Session Storage for persistence for a given session


4/20


Client Side Storage API

Feature Detection

If(typeof(localStorage) == undefined)

If(typeof(sessionStorage) == undefined)

Storing in storage

localStorage.setItem(name, value)

sessionStorage.setItem(name, value)

Retrieving from storage

localStorage.getItem(name)

sessionStorage.getItem(name)


5/20


Web SQL API

Creating database

var db = window.openDatabase()

Opens existing database or creates new

Executing DDL and DML queriesdb.transaction(function(tx){

tx.executeSQL(query, [binding_data], successFn, errorFn);

}

Reading data from result set

tx.executeSQL(query, [binding_data], function(tx,data){

// traverse data.rows.item


6/20


Geo Location

In-built support for GPS

Applications request the browser for the Geo Location information

Geo Location is a privacy issue

Browsers prompt the user before providing the information

Browser can be configured to deal with Geo Location requests from various

applicationsBrowser requests the device for the geo location information

Based on the IP Address and ISP

Based on GPS or Wi-Fi Geo or Cell Phone Location Data

Applications can retrieve geo location information

Altitude

LongitudeLatitude

Speed

Accuracy

Altitude Accuracy


7/20 SpringPeople Software Private Limited, All Rights Reserved.

Native Drag & Drop

Nodes can be made draggable

From drag source to drop targets

Events can be handled

dragstart

drag: fired repeatedly on the drag source

dragenter: fired on the current target

dragleave: fired on the current target

dragover: fires on the current target of the mouse

drop: fires on the current target dragend: fires on the dragsource

DataTransfer carries data during dragging



Web Workers

Browser & Concurrency

Browser was essentially single threaded

Asynchronous calls also run in the same thread

No support for concurrency Web Workers

Brings in concurrency

Each worker thread associates with a job/task

Main and worker threads communicate



Offline Web App

To run even without network connectivity

Updates when online

Builds Application Cache

Using cache manifest Window Events for connectivity

online and offline



New HTML5 Form Elements

tel Telephone number

email Email address text field

url Web location URL

search Term to supply to a search engine. For example, the search bar atop a browser.

range Numeric selector within a range of values, typically visualized as a slider

number A field containing a numeric value only progress

color Color selector, which could be represented by a wheel or swatch picker

datetime Full date and time display, including a time zone, as shown in Figure 8-3

datetime-local Date and time display, with no setting or indication for time zones

time Time indicator and selector, with no time zone information

date Selector for calendar date

week Selector for a week within a given year

month Selector for a month within a given yearColor selector, which could be represented by

a wheel or swatch picker


11/20


New HTML5 Attributes

Placeholder for input text elements

Autocomplete on/off/unspecified

Autofocus max one element per form

Spellcheck true/false for text & textarea List with Datalist for auto list

Step, Min and Max for range

Required for text


12/20


HTML5 Form Validations

valueMissing

typeMismatch

patternMismatch

tooLong rangeUnderflow

rangeOverflow

stepMismatch


13/20


Media

Two new media tags

Audio and video

Exposes scriptable API to the document

Tag defintion

Attribute: controls

Attribute: autoplayChildren: source with src attribute

Functions

load() to load the media file

play() to play the media file

pause() to pause the playing media filecanPlayType() to verify the compatibility


14/20


CSS Pseudo Functions

Selector:nth-of-type(even)

Selector:nth-of-type(odd)

Selector:nth-child(n)

Selector:nth-child(n+2) Selector:nth-child(2n)

Selector:nth-child(2n+4)

Selector:last-child

Selector:nth-last-child(n)

Selector:only-child


15/20


CSS3 Color & Borders

Color

RGB

RGBa with transparancy(0-1)

Opacity Borders

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

border-bottom-left-radius:20px;

Box-Shadow: top right bottom left rgba [inset]


16/20


17/20


Web Sockets

Answer to Polling & Comet SSP technologies

Need server support

Think of Node.js

Step-1 (Initial Handshaking) Browser sends WebSocket request to the server on HTTP

Server responds back with the upgraded protocol info

Response code must be 101

Step-2 (Actual communication)

Browser & server involves in full-duplex communication


18/20


Become a HTML5 & CSS3 Expert In

2 Days Flat

Attend the 2-Days HTML5 & CSS3 Workshop

View Complete Details
http://www.springpeople.com/courses/regular/html5-and-css3-jumpstart-training-course.phphttp://www.springpeople.com/courses/regular/html5-and-css3-jumpstart-training-course.php


19/20


Who will benefit?

Developers interested in designing, creating, and deploying HTML5 web

applications. It is valuable to both beginners and advanced developers

that already have experience in developing web applications.

View Complete Details
http://www.springpeople.com/courses/regular/html5-and-css3-jumpstart-training-course.phphttp://www.springpeople.com/courses/regular/html5-and-css3-jumpstart-training-course.php


20/20


Q & A

[email protected]

+91 80 65679700www.springpeople.com

A SpringSource Certified Partner and

VMware Authorized Training Center
mailto:[email protected]://www.springpeople.com/http://www.springpeople.com/mailto:[email protected]

Documents

SpringPeople Introduction to HTML5 and CSS3