• Save
SpringPeople Introduction to HTML5 & CSS3
Upcoming SlideShare
Loading in...5
×
 

SpringPeople Introduction to HTML5 & CSS3

on

  • 623 views

SpringPeople HTML5 & CSS3 Training course is for developers interested in designing, creating, and deploying HTML5 web applications. It is valuable to both beginners and advanced developers that ...

SpringPeople HTML5 & CSS3 Training course is for 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.

Statistics

Views

Total Views
623
Views on SlideShare
623
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SpringPeople Introduction to HTML5 & CSS3 SpringPeople Introduction to HTML5 & CSS3 Presentation Transcript

  • © 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
  • © 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
  • © 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)
  • © 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
  • © 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
  • © 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
  • © 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
  • © 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
  • © 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
  • © 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
  • © SpringPeople Software Private Limited, All Rights Reserved. HTML5 Form Validations • valueMissing • typeMismatch • patternMismatch • tooLong • rangeUnderflow • rangeOverflow • stepMismatch
  • © 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
  • © 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
  • © 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]
  • © 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
  • © 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
  • © 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
  • © 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
  • © 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