Krishna Mohan Koyya Glarimy Technology Services http://www.glarimy.com

HTML 5

 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)

Client-side SQL Storage

 Web SQL Storage for persisting relational data  Much better than in storing in localStorage  Offers SQL semantics  Can perform CRUD operations  Supports data binding in the queries  Offers transaction demarcation  Browser specific implementation  But consistent interface  Data accessible only for the owning application

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

Geo Location API

 Feature Detection  If(navigtor.geoLocation)  Getting the position  navigator.geoLocation.getCurrentPosition(function(posi tion){ // Access coordinates console.log(position.coords.altitude) Console.log(position.coords.speed) Console.log(position.coords.accuracy) } // and etc.,

Native Drag and 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

    

Web Workers API

Prepare the job in a separate file (ex: job.js) Create the worker in main thread to perform the job  var worker = new Worker(‘job.js’) Stopping the worker thread  worker.close() Post messages   From main to worker thread  worker.postMessage(string/json); From worker to main thread  postMessage(string/json); Register listeners for message events   worker.addEventListener(‘message’, callback); // in main addEventListener(‘message’, callback); // in worker

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

Offline Web App API

 Feature Detection  If(window.applicationCache)  Referring the manifest file   The manifest file    CACHE  Files to be cached NETWORK  Files to be loaded from the server only FALLBACK  Files to be used in case original files are not available

New HTML 5 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 HTML 5 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

HTML 5 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

      

Media: Scriptable Attribute Values

Autoplay  loop Sets the media clip to play upon creation or query whether it is set to autoplay.

 Returns true if the clip will restart upon ending or sets the clip to loop (or not loop).

currentTime  Returns the current time in seconds that has elapsed since the beginning of the playback. Sets currentTime to seek to a specific position in the clip playback.

controls  Shows or hides the user controls, or queries whether they are currently visible.

volume  Sets the audio volume to a relative value between 0.0 and 1.0, or queries the value of the same.

muted  Mutes or unmutes the audio, or determines the current mute state.

autobuffer  Tells the player whether or not to attempt to load the media file beforeplayback is initiated. If the media is set for auto-playback, this attribute is ignored.

Audio Control

Play

Multi Column

 Styling  -moz-column-count: 2;   -webkit-column-count: 2; -moz-column-gap: 20px;   -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5;  -webkit-column-rule: 1px solid #ddccb5;  Programmatic Control   style.MozColumnCount

Style.MozColumnGap

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

Form Element Functions

 selector:disabled  selector:checked  selector:enabled

CSS3 Color & Borders

 Color  RGB   

Borders

 RGBa with transparancy(0-1) Opacity

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

Web Socket API

 Creating Web Socket connection  New WebSocket(url, [protocols])  Events  socket.onOpen

 socket.onMessage

 socket.onClose

 socket.onError

 Sending Message  socket.send(message)