Transcript HTML 5 & CSS 3
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
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)