N Screens problem: W3C Conference Redmond, Nov 15,2011 – Presentation Transcript
- THE N-SCREENS PROBLEM Building Apps in the world of TV & Mobile Rajesh Lal Senior Engineer
- Agenda 7 Key Challenges WebApp Develop Design N-Screens
- The N-Screens
- Mobile PCTablet TV
- 1. Design Problem: N Screens
- On the Go MobileScreen size 2-4”Distance 1’Connection 3GNot reliableHighly InterruptibleFinger Input
- Screen 7-14” TabletCasual EnvironmentDistance 1’Wi-Fi Loosely connectedInterruptibleInput Touch
- 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 Detection code <script src=”modernizr-1.7.js“/> Modernizr.canvas ? “Canvas” : “No canvas”; <script src=”jquery-latest.js“/> jQuery.support.ajax ? “Ajax” : “No Ajax”;
- Feature DetectionModernizrCanvas SVG Cross Window MsgAudio InlineSVG Web WorkersVideo WebGL Web SQL databaseAnimation Websockets TouchTransformation GeolocationDrag and Drop Local Storage
- Feature Detection jQuery.Support Ajax Cross Domain Resource Sharing (CORS) Fixed Position CSS Opacity CSS Float htmlNormalize
- 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 device-aspect-ratio@media 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 • …
- Challenge: Advanced Styles with CSS3 Prefix • -moz- • -ms- • -o- • -webkit-
- Workaround: Advanced Styles with CSS3 .style { -moz-border-radius: 1em; -ms-border-radius: 1em; -o-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
- 4/7 Animation When to Use SVG, Canvas, CSS3 and WebGL Animation?
- Animation: Challenge WebGL CSS3 Canvas & Animation SVG & JavaScript JavaScript
- 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: SVG <svg id=”svgElement” width=”800px” height=”600px” viewBox=”0 0 800 600″> <rect x=”0″ y=”0″ width=”100%” height=”100%” rx=”10″ ry=”10″ style=”fill: white; stroke: black;” /> <circle id=”circle0″ cx=”40″ cy=”40″ r=”40″ style=”fill: orange; stroke: black; stroke-width: 1;” /> </svg>
- 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: CSS3 var elem = document.getElementById(transelem); elem.addEventListener(click, function loop() { elem.style.left = „100px;}, false); #transelement { … -xxx-transition: opacity 1s ease; transition: opacity 1s ease; }
- 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]
Source Slide Share