In the session, the Tizen Web Application model (aka Web Runtime) will be introduced along with the major features. We will walk through the major steps for creating a simple application accessing hardware capabilities. 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.
Potential of AI (Generative AI) in Business: Learnings and Insights
SDC13 - Unleashing Your Inner Web App Developer Using Tizen
1. The Tizen Web Platform,
where web apps feels right at home
Kenneth Christiansen / Alexis Menard
Web Platform Architects
Intel Corporation
#SDC13
2. Agenda
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
4. What is Tizen
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.
5. 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
6. Why betting on the web
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
7. 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
8. Timely access to new OS innovations
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.
9. Offline support
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
10. Access to native capabilities
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
11. Control over the application
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)
// 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();
12. Interaction with the user interface
Great touch and mobile support
•
•
•
•
Touch interaction and touch events (web facing)
Screen Orientation Lock
Fullscreen support – per element
Viewport meta tag
18. Creating the NfcSimple Application
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
19. 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.
20. The packaged 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.
21. The packaged application
To complete the Web Platform offering, Tizen offers couple of
JavaScript APIs you can use to make a richer application
22. 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);
}
23. 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);
24. 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
26. 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.
28. 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
29. 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
30. How is the web structured?
Semantics aka HTML
Styling aka CSS
Behavior aka JavaScript
31. How is the web structured?
We want to be responsive
Semantics aka HTML
Styling aka CSS
Behavior aka JavaScript
32. How is the web structured?
We want to be responsive
Semantics aka HTML
Styling aka CSS
Behavior aka JavaScript the semantics
We want to keep
but change the rest
39. Fluid dimensions
And it goes on…
New layout constructs as Flexible box even
supports reordering cells!
40. 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 “
41. Insert ‘new mindset’ here
“ Use percentages (%), add min-width: …px
To avoid breaking the design “
42. Insert ‘new mindset’ here
But be aware
Some words about sub-pixel layout and
the lack there of.
49. 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!
50. 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) {
...
}
51. 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
52. Size breakpoints – Adobe Edge Reflow
Adobe provides a nice tools for doing this
54. 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;
}
56. Retina, hi-res, etc.
Device units vs. density independent pixels aka CSS units
De-facto standard
CSS
pixels
height: 2px
width: 2px
height: 2px
width: 2px
Device
pixels
Retina
x4
57. 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); }
}
58. Media queries and future ideas
Mat Marques suggested the <picture> element
<picture ...>
#image { background: url(image.png); }
<source media=“(min-resolution: 2dppx)” source=“image@2x.png”>
@media (-webkit-min-device-pixel-ratio: 2) {
<source ...>
<img src=“image.png”>
#image { background :url(image@2x.png); }
</picture>
}
Apple suggested
<image src=“image.png” srcset=“image.png 1x, image@2x.png 2x”>
60. 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
61. 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.
62. 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.
63. 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
65. 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);
})
67. 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
68. 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!