SpringPeople Introduction to HTML5 & CSS3

© SpringPeople Software Private Limited, All Rights Reserved.© SpringPeople Software Private Limited, All Rights Reserved.
Introduction to HTML5 & CSS3

© SpringPeople Software Private Limited, All Rights Reserved.
What’s New in HTML5?
• Client Side Storage
• Web SQL Storage
• Offline
• Geo Location
• Web Workers
• Drag & Drop
• New XHR
• Web Sockets

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

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)

Web SQL API
•Creating database
•var db = window.openDatabase()
•Opens existing database or creates new
•Executing DDL and DML queries
•db.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

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
applications
•Browser 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
•Longitude
•Latitude
•Speed
•Accuracy
•Altitude Accuracy

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

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

HTML5 Form Validations
• valueMissing
• typeMismatch
• patternMismatch
• tooLong
• rangeUnderflow
• rangeOverflow
• stepMismatch

Media
•Two new media tags
•Audio and video
•Exposes scriptable API to the document
•Tag defintion
•Attribute: controls
•Attribute: autoplay
•Children: source with src attribute
•Functions
•load() to load the media file
•play() to play the media file
•pause() to pause the playing media file
•canPlayType() to verify the compatibility

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

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]

CSS3 Selectors
• Combinators
– selector1 > selector2
• Selector2 is direct child of selector1
– selector1 ~ selector2
• selector1 and selector2 share same parent
• Attributes
– selector[attribute]
– selecor[attribute=value]
– selector[attribute^=substring] //Value starts with substring
– selector[attribute$=substring] //Value ends with the substring
– Selector[attribute*=substring] //value contains substring

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

Become a HTML5 & CSS3 Expert In
2 Days Flat
Attend the 2-Days “HTML5 & CSS3 Workshop”
View Complete Details

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

Q & A
training@springpeople.com
+91 80 65679700
www.springpeople.com
A SpringSource Certified Partner and
VMware Authorized Training Center

SpringPeople Introduction to HTML5 & CSS3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to SpringPeople Introduction to HTML5 & CSS3

Similar to SpringPeople Introduction to HTML5 & CSS3 (20)

More from SpringPeople

More from SpringPeople (20)

Recently uploaded

Recently uploaded (20)

SpringPeople Introduction to HTML5 & CSS3