More Related Content Similar to SpringPeople Introduction to HTML5 & CSS3 (20) More from SpringPeople (20) SpringPeople Introduction to HTML5 & CSS31. © SpringPeople Software Private Limited, All Rights Reserved.© SpringPeople Software Private Limited, All Rights Reserved.
Introduction to HTML5 & CSS3
2. © 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
3. © 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
4. © 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)
5. © 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 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
6. © 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
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
7. © 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
8. © 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
9. © 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
10. © 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
11. © 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
12. © SpringPeople Software Private Limited, All Rights Reserved.
HTML5 Form Validations
• valueMissing
• typeMismatch
• patternMismatch
• tooLong
• rangeUnderflow
• rangeOverflow
• stepMismatch
13. © 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: 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
14. © 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
15. © 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]
16. © SpringPeople Software Private Limited, All Rights Reserved.
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
17. © 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
18. © 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
19. © 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
20. © SpringPeople Software Private Limited, All Rights Reserved.
Q & A
training@springpeople.com
+91 80 65679700
www.springpeople.com
A SpringSource Certified Partner and
VMware Authorized Training Center