Screen size 14-27” Computer Desk Distance 2’ Reliable LAN PC Focused Keyboard Mouse
Screen size 25-65” Couch Distance 10’ LAN Fast TV connection Total Emersion D-Pad Remote
2. Developing Apps for N Screens Native vs. WebApp
Native: Developing Apps for N-Screens Pros • Each “Screen” with an SDK • Great for THAT device • Robust • Device APIs
Native: Developing for N-Screens Cons Objective C • Learning curve for each SDK Java • Multiple Programing Languages C# C++ • Time and Effort for every device Qt, QML XAML • Maintenance • Versions
3. The WebApp Solution Web Application 1.0
WebApp: Developing for N-Screens A WebApp is an application created using HTML, CSS and JavaScript. • App in the Web browser (Full screen) • WebApp in a native container (Hybrid)
History“Old" HTML Web RIAs HTML5 WebApp Applications Basic Server Script Media Advanced Touch Table, Img Client-Server Players Canvas Camera Cookies Thin Client Plug-ins Media Contacts Sandbox Validation Extensions Storage Calendar CSS Object Tag Web db Notification JavaScript Pvt. Storage Geo location Battery Audio video Offline Orientation XPCOM Drag Drop Acceleromet Threads CSS3
WebApp: Developing Apps for N-Screens Pros • One “SDK” • Easy to Develop • Powerful HTML5 APIs • CSS3
WebApp: Developing for N-Screens Cons • Work in Progress • Challenging when porting to many Screens
4. Seven Key Challenges And How to Work Around Them
1/7 Feature Detection Which Feature Your Screen Support ?
Feature Detection Feature Browser Detection Detection Old method New method
Feature DetectionIn the code
Feature Detection Use libraries • Modernizr • jQuery.support
Feature DetectionModernizrCanvas SVG Cross Window MsgAudio InlineSVG Web WorkersVideo WebGL Web SQL databaseAnimation Websockets TouchTransformation GeolocationDrag and Drop Local Storage
2/7 Layout Detection How to adapt the layout to the device form factor?
Layout Detection Media Orientati Queries Viewport on JavaScript
Layout Detection Media-queries enable style sheets tailored for different ’width’, ‘height’ and ‘color’
Media Queries: Layout Detection <link rel="stylesheet" href="handheld.css" media="only screen and (max-width: 480px), handheld" /> <link rel="stylesheet" href="default.css" media="screen" /> <link rel="stylesheet" href="wider.css" media="only screen and (min-width: 1200px)" />
Media Queries: Layout Detectionhandheld Default screen Wider screen http://www.lancs.ac.uk/
Media Queries: Layout Detection jQuery.mediaqueriesThe script adds basic Media Query-Support (min-width and max-width in px units ) to all browsers <script src="jquery.mediaqueries.js“></script>
LayoutMedia Query for [email protected] screen and (device-aspect-ratio: 16/9)@media screen and (device-aspect-ratio: 32/18)@media screen and (device-aspect-ratio: 1280/720)@media screen and (device-aspect-ratio: 2560/1440)
Orientation Media Query for Orientation*@media screen and (orientation:portrait) { /* Portrait styles */}@media screen and (orientation:landscape) { /* Landscape styles */} *DeviceOrientation Events specification at W3C
ViewportViewable area on the screen<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
3/7 Advanced Styles How to utilize CSS3 for Advanced Graphics ?
Advanced Styles with CSS3 • Background • Border Radius • Drag and Drop • Opacity • Transformation • …
Animation: SVG • 2D vector graphics using XML • Object retained in the memory • Full DOM support • SVG elements can be styled • Check Modernizr.svg / Modernizr.inlinesvg Perform better when smaller number of elements and large surface
Animation: Canvas: Context 2D • Bitmap drawing area • Rectangles, lines, arcs, paths • Stateless • No DOM support, single element • Check Modernizr.canvas Perform better when large number of objects and surface is small
Animation: CSS3 • Styles for Individual elements • Use CSS3 animation if available • Better than JavaScript based animation • Check Modernizr.csstransitions Can perform better with GPU acceleration
Animation: WebGL (Canvas Context: webgl) • Canvas based 3D implementation • Use GPU acceleration • Supported only in a few browsers • Check Modernizr.webgl
5/7 Media How to use Audio-Video?
Audio: Big Challenge Open AL Audio Web RIA Audio Data - Audio - Firefox Webkit HTML5 Flash/ Audio Silverlight Not suitable for Sfx
6/7 Ajax How to use Ajax and do Cross Domain call?
Ajax: XMLHttpRequest CORS Write a Cross JSONP Proxy Origin Resource Hybrid Not sharing App Standard
Ajax: XMLHttpRequest • Cors Server code self.response.headers.add_header ("Access-Control-Allow-Origin", "*") • Check jQuery.Support.Ajax jQuery.Support.cors
7/7 HTML5 APIs How to use HTML5 advanced APIs in all Screens? & What are PolyFills and Shims?
HTML5 API: Challenge HTML5 API Polyfills and Shims JavaScript Code
HTML5 API: Polyfills and Shims? Provide support for missing features. • Polyfills: Replicate standard feature API • Shims: Own API with useful features
W3C Working Groups And other resources
Where to look for more information W3C Working Groups http://www.w3.org/Mobile/ http://www.w3.org/TR/css3-mediaqueries/ http://www.w3.org/2011/audio/ http://www.w3.org/testing/browser/ http://www.w3.org/Graphics/SVG/WG/wiki/Main_Page http://www.w3.org/TR/cors/ http://dev.w3.org/geo/api/spec-source-orientation.html Other Resources http://www.modernizr.com/ http://api.jquery.com/jQuery.support/ http://Html5rocks.com http://mediaqueri.es/
The future is already here—it’s just not veryevenly distributed. - William Gibson Thank You @rajeshlalnokia [email protected]
IoT Gadgets is dedicated to bring you all the Internet of Things IoT news that pertains to gadgets. Simple. We love for you to join us on this journey.