springpeople introduction to html5 and css3
TRANSCRIPT
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
1/20
SpringPeople Software Private Limited, All Rights Reserved.
SpringPeople Software Private Limited, All Rights Reserved.
Introduction to HTML5 & CSS3
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
2/20
SpringPeople Software Private Limited, All Rights Reserved.
Whats New in HTML5?
Client Side Storage
Web SQL Storage
Offline
Geo Location
Web Workers
Drag & Drop
New XHR
Web Sockets
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
3/20
SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
4/20
SpringPeople Software Private Limited, All Rights Reserved.
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)
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
5/20
SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
6/20
SpringPeople Software Private Limited, All Rights Reserved.
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/28/2019 SpringPeople Introduction to HTML5 and CSS3
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
8/20 SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
9/20 SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
10/20 SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
11/20
SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
12/20
SpringPeople Software Private Limited, All Rights Reserved.
HTML5 Form Validations
valueMissing
typeMismatch
patternMismatch
tooLong rangeUnderflow
rangeOverflow
stepMismatch
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
13/20
SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
14/20
SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
15/20
SpringPeople Software Private Limited, All Rights Reserved.
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]
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
16/20
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
17/20
SpringPeople Software Private Limited, All Rights Reserved.
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
-
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
18/20
SpringPeople Software Private Limited, All Rights Reserved.
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 -
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
19/20
SpringPeople Software Private Limited, All Rights Reserved.
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 -
7/28/2019 SpringPeople Introduction to HTML5 and CSS3
20/20
SpringPeople Software Private Limited, All Rights Reserved.
Q & A
+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]