Open Webapps & intro to Firefox OS Powered smart TV.

Open Web Apps by @kurrisudarshan

Webapp vs Website

Difference b/w a cell phone and a smartphone.

Websites are built to provide information Where as Webapps allows
users to perform actions

Still Confused..!! News Site is a website Your Gmail is
a webapp

Responsive web App

App that adapts itself across various screens

Why responsive apps?

Why do developers need a native app?

• Performance • Offline access • Periodic Background Processing •
Notifications • Sensors • OS-specific features NATIVE APP

Have you ever thought why to build a webapp as
it doesn’t provide the features like offline support, push notifications etc., which native apps provide.

Gone are the days to criticise the web.

The web has become way more powerful than you think.

Web APIs, Service Workers & PWA has brought the web
to the next level.

• Performance • Offline access • Periodic Background Processing •
Notifications • Sensors • OS-specific features

Firefox OS has brought the sensors into the playground with
WebAPIs & Firefox OS Specific APIs.

OFFLINE ACCESS ====> SERVICE WORKERS

• SERVICE WORKER is a Programmable Network Proxy. • It
sits b/w the application and the server. • More about service workers will be covered in the later talk by Madhukar.

PROGRESSIVE WEBAPPS

New way of experiencing the mobile

• Doesn’t require an app store to install an App.
• Visit a site/app. • Add it to the home screen from your favourite browser. • When you first visit a visit/app service workers are installed. • These service workers provide caches the content for the offline support & other features(Push Notifications). • This way you can access the content offline. • You can get notifications even when your app isn’t running.

• Progressive ---- Work for every user regardless of browser
• Responsive ---- Fit any form factor (mobile,tablet,desktop) • Connectivity Independent ---- Work Offline (Service Workers) • App-Like ---- App Style model & Interactions • Fresh ---- Uptodate (Service Workers) • Safe ---- HTTPS/TLS (to prevent snooping) • Discoverable ---- Search Engine Support (W3C Manifests) • Re-Engageable ---- Push Notifications (Service Workers) • Installable ---- Keep apps on the Home Screen • Linkable ---- Progressive Web Apps

Browser support for PWA?

DEMO APPS: • https://www.pokedex.org/ • Flipkart Lite • https://sv-ginger.appspot.com/ •
Offline Wikipedia https://wiki-offline.jakearchibald.com/wiki/Rick_and_Morty For more app demos: • https://operasoftware.github.io/pwa-list/

We travelled way far in this journey. Let’s have a
quick demo on how to build an app.

• Favourite Text Editor (In my Case it is Sublime
Text3) • Firefox Browser of your choice (Mine is Firefox Developer Edition) Familiarity with web Languages: • HTML5 • CSS3 • JAVASCRIPT Tools Needed:

index.html <!DOCTYPE html> <html> <head> <title> Demo App </title> <link
rel="stylesheet" type="text/css" href="Theme.css"> <script type="text/javascript" src="logic.js"></script> </head> <body> <header> <div id=”hw”>Hello World</div> </header> </body> </html> HTML CODE STRUCTURE

CSS CODE Theme.css body{ color: green; font-size: 24px; margin: 44%;
}

JAVASCRIPT Logic.js var elem = document.getElementById(“hw”); elem.innerHTML=”Say Hello..!!”;

manifest.webapp

Firefox OS for smart TV’s

RESOLUTION: Device pixel ratio of TV’s is different to most
mobile devices • Full HD ---- 1920x1080 • Ultra HD (4k) ---- 3840x2160 • Other resolutions 1280x720 Note: Average distance b/w the viewer & the screen is 10 feet(3 mts).

Control Mechanisms & Navigation • TV Remote • TV Remote
app on a smartphone • Game Controller Ensure all selectable items in the app are accessible using a standard TV remote.

Guidelines for developing a smart TV app

• Simpler the design, the better • Provide the info
that is totally necessary • Design flat rather than deep • Include 5% margin in all directions • Selected item focus state is visible & clear for users. • For loading time, Display a loading animation to provide a visual confirmation • Provide audio feedback (Ex: Sound effects for buttons). • Avoid the need for user input as much as possible. • Enable autocomplete and search history features.

Clickable Elements Buttons Size: • 150x150 for UHD(4K) • 75X75
for Full HD (1920X1080) • 50X50 for 1280X1080 Text & Visual Elements • Font Size (Prefer use SanS Serif) • Avoid excess visual noise, distraction • Small font sizes leads to eye strain • Notifications should be meaningful as they are distracting in some situations.

Pop Up:

Note on Privacy: • As many of the family members
can access the TV avoid the need for registering or logging unless it’s important. • Purchasing on ecommerce sites.

Testing your app on TV Simulator

Resources • Firefox OS TV workshop boilerplate https://github.com/elin-moco/tv-workshop-boilerplate • JavaScript
Spatial Navigation https://github.com/luke-chang/js-spatial-navigation/

WEB API’s

WEB API’s Web apps uses these API’s either • to
access the device hardware, or • to access the data stored on the device, or • to communicate with other devices, or • for other features (like Alarm API, Push API). https://developer.mozilla.org/en-US/docs/WebAPI

Firefox OS Specific API’s These are the API’s designed with
the Firefox OS in mind. As Firefox OS is built on gecko these are OS specific API’s. https://developer.mozilla.org/en- US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_de vice_APIs

For Demos on open Web Technology: https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies

Keep rocking the web

Thank You @kurrisudarshan www.coderlogue.com

Open Webapps & intro to Firefox OS Powered smar...

Open Webapps & intro to Firefox OS Powered smart TV.

More Decks by SudarshanReddy kurri

Other Decks in Technology

Featured

Transcript