sdc13 - unleashing your inner web app developer using tizen

#SDC13

The Tizen Web Platform, where web apps feels right at home

Kenneth Christiansen / Alexis Menard Web Platform Architects Intel Corporation

Part 1: The runtime model

In this section, the Tizen Web Application model (aka Web Runtime) will be introduced

along with its major features.

Part 2: Creating an application

We will walk through the major steps for creating a simple application accessing

hardware capabilities

Part 3: Responsive design and good practices

Furthermore, we will look at good practices for adapting responsive design, allowing

the application to target future Tizen devices, using different resolutions, screen sizes

and interaction models

Agenda

Part 1 The runtime model

Tizen is new OS, backed by industry leaders

It is open and the focus is on web apps

It targets multiple devices, not just mobile phones

In many ways, it is ahead of its time with the focus on web and the extensions to the web platform.

What is Tizen

Brilliant support for latest HTML5 specs

Great performance, good implementations, emerging standards:

• Vibrate

• Battery

• Screen lock

Not to forget device API’s currently being standardized in the W3C

What is Tizen

Q: What is a web application?

Why HTML5 and the web platform:

• Integration with existing cloud services

• Most flexible layout engine

• Reuse existing code and knowledge

• Cross platform “promise”

• Immediate update and distribution control (hosted apps)

• Responsive design

Why betting on the web

Downsides

• Timely access to new OS innovations

• Offline support

• Access to native capabilities

• Control over the application (life cycle, launching, etc)

• Store support

• Interaction with the interface (viewport, orientation lock, touch control,…)

Tizen brings the promises of HTML5 and aims at closing the gaps to native

Why betting on the web

Tizen brings its own additional API’s

• These are optional (you should code as such) and only available on Tizen

• General purpose API’s are being standardized in the W3C together with

Mozilla, Intel, Samsung a.o.

Timely access to new OS innovations

Packaged applications

• Bundle HTML, CSS, other resources incl. manifest

• Prepared for offline support

• Based on the W3C Widgets specs

• Localization support

• Query manifest from applications

• Permission control

Offline support

The additional Tizen API’s allows you to access a variety of things

• Bluetooth, Contacts, Callhistory, NFC, Local Filesystem, etc.

• Capabilities are controlled by permissions control similar to that of

Android apps

Access to native capabilities

A variety of API’s available

• Deal with discharging battery or control display (Power API)

• Query manifest (widget.description, widget.version, etc.)

• Launch application and receive result (App Control API)

• Schedule tasks: Launch app at a given time (Alarm API)

Control over the application

// when the alarm is triggered the app is launched if not already running var alarm = new tizen.AlarmAbsolute(new Data(2013, 10, 4, 8, 0)); tizen.alarm.add(alarm, “org.tizen.browser”);

Tizen.application.getCurrentApplication();

Great touch and mobile support

• Touch interaction and touch events (web facing)

• Screen Orientation Lock

• Fullscreen support – per element

• Viewport meta tag

Interaction with the user interface

Packaged apps can be distributed via the Tizen Store: http://seller.tizenstore.com

Store support

Part 2 Creating an application

We will walk through the

major steps for creating a

simple application accessing

hardware capabilities

Creating a simple NFC application

Get the Tizen SDK: (works on Mac OS, Linux and Windows)

https://developer.tizen.org/downloads/tizen-sdk

How to get started

How to get started

config.xml

Used when packaging and installing the application, contains attributes such as

ID, name, content (primary HTML file to load), and icon.

index.html

Contains the User Interface: afew labels, a text input to enter the text that is

going to be stored on the tags, and a button to start writing

main.js

Will contain the logic of the application; deals with the NFC chip and with

updating the user interface

Creating the NfcSimple Application

All TizenJS APIs are nested under the tizen object e.g.

tizen.time, tizen.power, etc.

Most of the APIs are driven by exceptions and event listeners when

asynchronous.

Creating the NfcSimple Application

Tizen uses the wgt format to package the application.

It’s essentially a zipped file with all your images, and html/css/js files in it.

The wgt package is sent over to the phone and installed using the web

runtime of Tizen, which will add a shortcut on the launch screen.

The packaged application

To complete the Web Platform offering, Tizen offers couple of JavaScript APIs you can use to make a richer application

The packaged application

NfcSimple: Get the default adapter and power it on

// Get the NFC adapter try { adapter = tizen.nfc.getDefaultAdapter(); if (!adapter.powered) { adapter.setPowered( true, // Enable NFC adapter onPowerOn, // Handle success function () { console.log("Power on failed") }); // Handle failure } else { onPowerOn(); } } catch (err) { console.log(err.name + ": " + err.message); }

NfcSimple: Get notifications when a tag is detected

var onTagDetectedCB = { onattach : function(nfcTag) { nfcLog("NFC Tag's type is " + nfcTag.type); // now that Tag is detected, call read try { if (!nfcTag.isSupportedNDEF) { nfcLog('Tag does not support NDEF'); return; } nfcLog('Tag supports NDEF; reading messages...'); nfcTag.readNDEF(readCB, onError); } catch (err) { console.log(err); } } ... adapter.setTagListener(onTagDetectedCB);

NfcSimple: Write to the tag

var newMessage = new tizen.NDEFMessage(); newMessage.records[0] = new tizen.NDEFRecordText(message, 'en-US', 'UTF8'); nfcTag.writeNDEF(newMessage, onSuccess, onError);

• NDEF is the NFC Data Exchange Format

• Tizen provides a set of APIs to ease manipulating them for read and write

NfcSimple: Try it on the phone

NfcSimple: End result

After deploying to the phone, you should see a result

very similar to what is shown on the right side:

Using standard HTML5, plus a few of the Tizen API’s

it is possible to write really complex and useful

applications.

The Tizen UI Framework (based on jQuery Mobile)

can help you create a Tizen like UI with very little

effort.

Part 3 Responsive design and good practices

The market today

Different screen sizes/resolutions, densities and even different behavior

Image from the Responsible Web Design – www.abookapart.com/products/responsive-web-design

Post-PC – lots of different devices, happening now

Common solutions

Show desktop pages

Small text (mobile browsers enlarge smartly!)

Lots of annoying pinching and panning

Sniff the user agent

Different content sources

Hard to test property

Breaks when UA string or browser changes

How is the web structured?

Semantics aka HTML

Styling aka CSS

Behavior aka JavaScript

How is the web structured?

Semantics aka HTML

Styling aka CSS

Behavior aka JavaScript

We want to be responsive

How is the web structured?

Semantics aka HTML

Styling aka CSS

Behavior aka JavaScript

We want to be responsive

We want to keep the semantics

but change the rest

Fluid grids (‘dimensions’),

Flexible images and

Media Queries This is the definition of Responsive Web Design

Time for exploration

How to accomplish something like this?

Fluid dimensions

It’s all about layout

Show, hide, change, reorder

CSS to the rescue!

Fluid dimensions

Lots of real estate One particular design

Fluid dimensions

Less real estate A more compact styling

Fluid dimensions

And it goes on… New layout constructs as Flexible box even

supports reordering cells!

Do not use fixed sizing Say what???

Designers are commonly used to the fixed medium,

and as ‘the control freaks they are ;-)’ they want to

achieve pixel perfection

“

“

Insert ‘new mindset’ here

“ “

Use percentages (%), add min-width: …px

To avoid breaking the design

Insert ‘new mindset’ here

But be aware

Some words about sub-pixel layout and

the lack there of.

Sub-pixel layout

With a 6 column grid:

100% ÷ 6 = 16.67%

Sub-pixel layout

With a 1000px viewport that is 166.67

Pixel per column, oh, oh…

Sub-pixel layout

If we round to nearest pixel it won’t fit

on screen

Sub-pixel layout

If we round to nearest pixel it won’t fit

on screen

167x6 = 1002

Sub-pixel layout

Only fixed by sub-pixel layout

Supported by IE and newest WebKit based browsers

Meet the Media Query

The media query

Media queries allow you to specify a condition for a block of CSS

If that block is met, the block is applied to your HTML

If not, it is completely ignored

They are an awesome fit for real needs!

The media query

Example

<link rel=“stylesheet” type=“text/css” href=“core.css” media=“screen”> <link rel=“stylesheet” type=“text/css” href=“print.css” media=“print”>

Format

@media screen and (max-weight: 3kg) and (color), (orientation: portrait) { ... }

Size breakpoints

Media queries allow that you to add breakpoints given size

<link rel=“stylesheet” type=“text/css” media=“screen and (max-device-width: 480px*)” href=“shetland.css” /> @media screen and max-width: 480px) { .column { float: none; } }

* Be aware of viewport adaptation

Size breakpoints – Adobe Edge Reflow

Adobe provides a nice tools for doing this

Sizing to the viewport

The new viewport related vh/vw units

Viewport width, viewport height units per 100

Want to make sure an element fits inside 1/3 of the viewport?

No need to measure with JavaScript, just use the new units

.element { width: 33vw; } img { max-height: 95vh; }

Image resolution and bandwidth savings

Retina, hi-res, etc.

CSS pixels

Device pixels

height: 2px

width: 2px

height: 2px

width: 2px

De-facto standard Retina

x4

Device units vs. density independent pixels aka CSS units

Media queries and future ideas

Use media queries today

#image { background: url(image.png); } @media (-webkit-min-device-pixel-ratio: 2) { #image { background :url(image@2x.png); } }

Near future

@media (min-resolution: 2dppx) { // or (min-resolution: 192dpi) #image { background :url(image@2x.png); } }

Media queries and future ideas

#image { background: url(image.png); } @media (-webkit-min-device-pixel-ratio: 2) { #image { background :url(image@2x.png); } }

Mat Marques suggested the <picture> element

<picture ...> <source media=“(min-resolution: 2dppx)” source=“image@2x.png”> <source ...> <img src=“image.png”> </picture>

Apple suggested

<image src=“image.png” srcset=“image.png 1x, image@2x.png 2x”>

Viewport adaptation

Viewport adaptation

The CSS viewport is not always the actual 1.0 scale browser view

Keep in mind that the browser view is in CSS units (not device ones)

But then how can a mobile browser fit a whole desktop page?

And not break the layout?

They lie! Most mobile browsers do not layout pages at their true Browser view

Viewport adaptation

Mobile browsers often lays out at 980px or similar

Then they fit the contents to the view, resulting in != 1.0 scale

This is useless for web apps which should use 1 CSS px as 1 UI px.

The viewport meta-tag

The meta tag takes care of that

<meta name=“viewport” contents=“width=device-width, initial-scale=2”>

Very flexible, somewhat ‘quirky’ and hard to understand

<meta name=“viewport” contents=“width=device-width”>

If device-width above is 320 (iPhone default) it will be scaled differently

in portrait than in landscape. Adding ‘maximum-scale=1’ make it “overflow” to 480 in

landscape, as it wasn’t allowed to scale.

CSS Device Adaptation spec

CSS version of the meta tag, easier to use

@viewport { width: device-width; } @media screen and (width: 397px) { @viewport { width: 500px; } }

Supported already by IE 10 (partial), IE10 mobile, Opera and trunk Webkit

Advanced media queries

How to adapt behavior implemented in JavaScript

Query or listen

mql = window.styleMedia.matchMedium(“(max-width: 480px)”); if (mql.matches) { alert(“Gotta have a pizza tonight!”); } // Lets subscribe to changes! mql.addListener(function(result) { alert(result.matches); })

Rounding up Best approach

Rounding up

Responsive design is There today!

And most works with any modern browser Retina support, vw/hw units, dppx is new, but should be universally supported

a year from now

Best approach

Mobile first, consider bandwidth constraints

Add additional UI components for larger target screens, keeping

the former in mind

Less subpages

Cut the crap, promote what matters

Less is more!

Thank You!

License Notices

Except where noted, sample source code written by Samsung Electronics Co. Ltd and provided to you is licensed as described below. Copyright © 2010-2013, Samsung Electronics Co. Ltd. All rights reserved except as otherwise explicitly indicated. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other

materials provided with the distribution. Neither the name of the Samsung Electronics Co. Ltd nor the names of its contributors may be used to endorse or promote products derived from this software

without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED

TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Other source code displayed in this presentation may be offered under other licenses. Apache 2.0 Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. Creative Commons 3.0 Attribution License Portions of this presentation are reproduced from work created and shared by Google (http://code.google.com/policies.html) and used according to terms described in the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).