Thadomal IEEE-HTML5-Workshop
Upcoming SlideShare
Loading in...5
×
 

Thadomal IEEE-HTML5-Workshop

on

  • 3,190 views

Workshop on HTML5 conducted at Thadomal Shahani Engineering College, Mumbai.

Workshop on HTML5 conducted at Thadomal Shahani Engineering College, Mumbai.

Statistics

Views

Total Views
3,190
Views on SlideShare
2,451
Embed Views
739

Actions

Likes
0
Downloads
59
Comments
0

4 Embeds 739

http://www.rominirani.com 731
http://www.linkedin.com 5
https://www.linkedin.com 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • IE9 Beta has started supporting some parts HTML5 Guiding Principles: Compatibility : Utility : Interoperability: Universal Access : Languages support, Abilities Simplicity : Simpler DOCTYPE, Meta Tags. Plugin Free paradigm : Flash
  • New Elements that bring structure to your documents. These elements are based on studies conducted looking at the markups from thousands of sites. E.g. Most people have a “nav” class to indicate navigation, so why not have a “nav” tag.
  • Normal form elements are still available like checkbox, text, button, radiobutton, password, textarea
  • Mention that browsers render it differently. For e.g. in the Safari Mobile browser, if the input type is phone, then only a numeric keypad is shown.
  • Mention that browsers render it differently. For e.g. in the Safari Mobile browser, if the input type is phone, then only a numeric keypad is shown.
  • Previously possible with Flash, VML, Silverlight Very complex to do in JavaScript without plugins (for example, rounded corners or diagonal lines) Provide native drawing functionality on the Web Completely integrated into HTML5 documents (part of DOM) Can be styled with CSS Can be controlled with JavaScript
  • element dissection Supports fallback Autoplay Preload Controls Poster Height and Width Src
  • navigator.geolocation getCurrentPosition watchPosition Both the methods take same parameters success function error function options
  • Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
  • Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
  • Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
  • Native applicatons have a big advantage of being installed on the device and available if network is not possible. Yes – not all functionality can be available but the user can use the application. Mobile applications if they want to be touted as good as native apps must support offline availability.
  • navigator.on/off events are only supported by few browsers : Firefox, Opera, IE
  • Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch. More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before. data between client and server more efficiently than ever before.

Thadomal IEEE-HTML5-Workshop Thadomal IEEE-HTML5-Workshop Presentation Transcript

  •  
    • Name : Romin Irani
    • Official Title : Principal Architect @ Xoriant
    • Unofficial Title : Jack Of All Trades
    • Vital Stats :
      • Mobile Applications
      • Cloud
      • Web APIs
    • Writer & Reviewer for various publications from Wrox, O’Reilly & Addison Wesley
    • Freelance writer covering Web 2.0 APIs at ProgrammableWeb ( http://programmableweb.com )
    • HTML5 – A Brief History
    • HTML5 Browser Support
    • HTML5 Features/Demos/HandsOn
    • The Road Ahead
    • WHAT : Next generation HTML
    • WHO : WHATG, W3C, IETF
    • WHEN : 2004, 2008, July 2014
    • All vendors support it ! (Is that true?)
    • Semantics
    • Graphics
    • Multimedia
    • Device Access
    • Offline
    • Connectivity
    • Performance/Integration
    • CSS3
    • Keep it simple (Example doctype)
    • Structural meaning
    • Richer Set of Tags
    • Eliminated Several Tags too
    • <header>
    • <nav>
    • <section>
    • <article>
    • <footer>
    • <aside>
    • Aims to make development and usage of forms easier.
    • 13 New Types introduced for user input.
    • Additional attributes like : placeholder , required , autofocus.
    • Coding for validations is made easier.
    • Support varies across browsers but is compatible.
    • Input Types
      • email
      • phone
      • url
      • date, datetime, month, week, time, datetime-local)
      • color
      • search
      • number and range
    • <input type=“email” placeholder=“Enter email address” required autofocus/>
    • <input type=“phone”/>
    • <input type=“search” placeholder=“Type your search here”/>
    • <input type=“url” />
    • <input type=“date” />
  • Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
    • Canvas API
    • SVG
    • WebGL
    • CSS3 3D
    • 2D Drawing API
    • Functions : line, arcs, rectangle, fills
    • Allows styling via CSS
    • Allows control via Javascript
    • Can be used for:
      • Charts, Animation, Images and other complex rendering.
    • Audio and video are first class citizens in the HTML5 web
    • A plug-in free world
    • Simple tags : <video>, <audio>
    • Even Simpler usage:
      • <video src=“demo.mp4”></video>
      • <audio src=“song.mp3”></audio>
    • Control via APIs
      • Play
      • Pause
      • Stop
    • Different browsers support different containers and Audio/Video formats.
    • Containers : H264 and Ogg
    • Codecs:
      • Audio : AAC, MP3, Vorbis
      • Video: H264, VP8, Thedora
    • Need to provide more than 1 format.
    • Browser will play the one that it supports.
    • This situation is not likely to change.
    • <video controls>   <source src=&quot;mov1.ogg&quot; type=&quot;video/ogg&quot; />   <source src=&quot;mov2.mp4&quot; type=&quot;video/mp4&quot; /> </video>
    • Currently - Geolocation API
    • Coming soon
      • Audio/Video input access to microphones and cameras
      • Local data such as contacts & events, and even tilt orientation.
    • Determine where the device is. Find it right in the browser.
    • Useful for providing location based services.
    • User should be allowed to opt in.
    • API allows for both : one time location and continuous location.
    • n avigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true});
    • function showCurrentLocation(position){
    • //position.coords.latitude //position.coords.longitude;
    • }
    • Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
    • Allows local storage of application data on the device.
    • 5MB per domain.
    • Key component to Offline usage.
    • Types of Storage options:
    • S imple API for storing values in easily retrievable JavaScript objects which persist across page loads
    • window.localStorage
    • getItem(key)
    • setItem(key,value)
  • interface Storage { readonly attribute unsigned long length ; getter DOMString key (in unsigned long index); getter any getItem (in DOMString key); setter creator void setItem (in DOMString key, in any data); deleter void removeItem (in DOMString key); void clear (); };
    • Network is not available all the time.
    • The application must be available even if the server is done.
    • Application Cache to the rescue.
    • Stores the specified resources (HTML,CSS,JS) on the client.
    • Combine Application Cache with Offline Storage to provide availability.
    • 3 Steps to implementing AppCache
      • Define manifest
        • CACHE + NETWORK + FALLBACK
      • Reference manifest
      • Specify right manifest MIME Type in Server
    • Demo
    • Performance & Integration
      • Web Workers , XMLHttpRequest 2
    • CONNECTIVITY : WEB SOCKETS
    • CSS3
    • IndexedDB
    • Indic Mobile Conference application
    • Mobile Web application
    • Works well with Webkit browsers
    • Lets go !
    • Drag and Drop
    • Content Editable
    • Audio / Video
    • CSS 3
    • Differing browser support & behaviour
    • Use sites like HTML5Test.com, CanIUse.com to understand Browser support for HTML5
    • Fallback behaviour is important
    • Great time to get started today!
    • Be prepared for changes
    • All vendors are supporting it
  •  
    • W3C : http://dev.w3.org/html5/spec/Overview.html
    • HTML5 Rocks: http://www.html5rocks.com
    • Mark Pilgrim : http://diveintohtml5.org
    • Remy Sharp : http://html5demos.com
    • HTML5 Tech Spec : http://developers.whatwg.org
    • Modernizr : http://www.modernizr.com/
    • Caniuse : http://www.caniuse.com
    • HTML5Test : http://www.html5test.com
    • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
    • Q & A
    romin.k.irani @ gmail.com iRomin