N Screens problem with HTML5: W3C Conference Redmond, Nov 15,2011 @iRajLal

Design and User Experience

Building Apps in the world of TV & MobileTHE N-SCREENS PROBLEMRajesh LalSenior Engineer

How to build an app for multiple devices in a most effective manner?1

Agenda

N-Screens DevelopDesignWebApp 7 Key Challenges

This is my plan for next 30 minutesI am going to talk about the N Screens we are discussing here. Then I will talk about the Design Problem for these N-Screens, By design problems I mean the difference in the context in which these screens devices are used. Then I will discuss the development problems you might face when creating apps for these devices. Particulary I will talk about two prominent ways to develop on these devices and talk about the Pros and Cons of them, and then we will see Why WebApp is the positive story every developer is talking about. Then I am going dive into technical Implementation Problems and how to solve them

2

The N-Screens

- The Context - How to develop Apps for N-screens - Why the HTML5/ WebApp Solution - What are 8 Key Challenges - Where to look for latest specifications W3 Working Groups 3

TV

MobileTablet PC

We are talking about these 4 types of devices. A Smartphone with an advanced browser A tablet device A PC and a TV

There are two things common in all these devicesThey are all Connected to the internetWe can develop Apps for each of them

4

1. Design Problem: N Screens


On the GoScreen size 2-4Distance 1Connection 3G Not reliableHighly InterruptibleFinger InputMobile

A volatile scenarioShort attention spanDivided attention InterruptibleDynamic environment

6

Screen 7-14Casual EnvironmentDistance 1Wi-Fi Loosely connectedInterruptibleInput Touch

Tablet


7

Screen size 14-27 Computer DeskDistance 2Reliable LANFocusedKeyboard Mouse

PC


8

Screen size 25-65 Couch Distance 10 LAN Fast connection Total Emersion D-Pad RemoteTV


9

2. Developing Apps for N Screens

Native vs. WebApp


Native: Developing Apps for N-Screens Pros Each Screen with an SDK Great for THAT deviceRobust Device APIs

11

Native: Developing for N-ScreensCons Learning curve for each SDK Multiple Programing Languages Time and Effort for every device Maintenance Versions Objective CC++JavaQt, QMLXAMLC#

12

3. The WebApp Solution

Web Application 1.0

W3C: Original specification 13

WebApp: Developing for N-ScreensA WebApp is an application created using HTML, CSS and JavaScript. App in the Web browser (Full screen)WebApp in a native container (Hybrid)

14

History

HTML can be unanimously credited for the success of the World Wide Web. The ease of the simple text based markup language, made the html pages very easy to learn, and so very popular. HTML5 Web Apps are meant for mobile devices but it is the result of five major phases of the web evolution. The old Web Web ApplicationsRich Internet ApplicationsHTML5 specification Mobile Web RevolutionThe Old WebHTML started as simple web pages development. A basic set of HTML tags were available for rendering tables, images, anchors, etc. in a web page. The HTML page is rendered in the browser sandbox and could not access users computer. A simple light weight text files, called Cookies were used to save users session information in the form of key value pairs. HTML also allowed including CSS (cascading style sheets) files for separating style from the structure and included a Scripting language, JavaScript for basic programming on the client sideWeb ApplicationsWith the popularity of the web, a more robust distributed application framework started called web applications. These web applications used a client-server architecture, where client side technologies like HTML, CSS and JavaScript were used for programming the front end, and the heavy lifting was done at the server side. HTML was still the thin client with the minimal access to the computer. A Rich set of programming languages like Java, PHP, and ASP were used at the server side. These server programs generated HTML pages which are emitted to the users browser. The server programming language could access data on the server and can do advance functionality but client side programming was limited to basic scripting like form validations.Rich Internet ApplicationsAs the web evolved the need for richer functionality like 3D, animations, web camera integration and data access grew and, web browser extensions like XPCOM and ActiveX object technologies like Adobe Flash, Java Applet and Microsoft Silverlight became popular. These technologies provided rich islands of functionalities and are also referred as Rich Internet Applications. ActiveX technology was also used for Media players and animated advertisements. Adobe Flash and Microsoft Silverlight objects in the HTML page had bigger storage in the client computer, and could access computers audio and video hardware. Browser extension technology XPCOM allows accessing computer functionality and data through a native dynamic link library.

HTML5 Specification While the web was evolving with standardization of CSS and JavaScript in different types of browser, W3C and other companies came together and based on the all the previous usage and requirements of the web, created a specification for the next version of HTML, called HTML5 with a rich set of capabilities. HTML5 had a number of advanced tags for drawing, media player capabilities, content structuring tags and validation in HTML. It also had a local database with bigger Web storage options without the need of an embedded Object. It gave offline Web Application, Geo location and multi threads functionality. It also had Web sockets for peer to peer communications. The CSS3 specification supported by HTML5 included an advanced CSS effects, transitions and animations.Mobile Revolution While HTML5 specification was being created, simultaneously there was a mobile revolution, which started with the advent of advanced smartphones like iPhone, Android, and MeeGo devices. With the need of web on the mobile browser a new paradigm shift took place. There was a demand for accessing device capabilities from the web browser. The device access events and APIs started becoming a standard of its own. Device APIS like Touch and Gesture Events, Capture API for Audio, Video and Webcam captures, Contacts API, Calendar API, Web Notification, Device Status and Battery consumption, Device Orientation, etc. became a part of HTML5 specifications. These advanced APIs together with CSS3 gave birth to a new kind of application called Web Apps. Web AppsA Web App is a web application hosted in a remote server but which look, feel and behave like a native mobile application.

15

WebApp: Developing Apps for N-Screens Pros One SDK Easy to Develop Powerful HTML5 APIsCSS3

16

WebApp: Developing for N-ScreensCons Work in Progress Challenging when porting to many Screens

17

4. Seven Key Challenges

And How to Work Around Them


1/7 Feature Detection Which Feature Your Screen Support ?

19

Feature DetectionOld methodNew method

20

Feature Detection

In the code

raw21

Feature DetectionUse libraries Modernizr jQuery.support

raw22

Feature Detectioncode

N Screens problem with HTML5: W3C Conference Redmond, Nov 15,2011 @iRajLal

Technology

Transcript of N Screens problem with HTML5: W3C Conference Redmond, Nov 15,2011 @iRajLal