Your SlideShare is downloading. ×
0
The Tizen Web Platform,
where web apps feels right at home
Kenneth Christiansen / Alexis Menard
Web Platform Architects
In...
Agenda
Part 1: The runtime model
In this section, the Tizen Web Application model (aka Web Runtime) will be introduced
alo...
Part 1

The runtime model
What is Tizen
Tizen is new OS, backed by industry leaders
It is open and the focus is on web apps
It targets multiple devi...
What is Tizen
Brilliant support for latest HTML5 specs
Great performance, good implementations, emerging standards:
• Vibr...
Why betting on the web
Q: What is a web application?
Why HTML5 and the web platform:

•
•
•
•
•
•

Integration with existi...
Why betting on the web
Downsides

•
•
•
•
•
•

Timely access to new OS innovations
Offline support
Access to native capabi...
Timely access to new OS innovations
Tizen brings its own additional API’s

• These are optional (you should code as such) ...
Offline support
Packaged applications

•
•
•
•
•
•

Bundle HTML, CSS, other resources incl. manifest
Prepared for offline ...
Access to native capabilities
The additional Tizen API’s allows you to access a variety of things

• Bluetooth, Contacts, ...
Control over the application
A variety of API’s available

•
•
•
•

Deal with discharging battery or control display (Powe...
Interaction with the user interface
Great touch and mobile support

•
•
•
•

Touch interaction and touch events (web facin...
Store support

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

Creating an application
Creating a simple NFC application

We will walk through the
major steps for creating a
simple application accessing
hardwa...
How to get started
Get the Tizen SDK: (works on Mac OS, Linux and Windows)
https://developer.tizen.org/downloads/tizen-sdk
How to get started
Creating the NfcSimple Application
config.xml
Used when packaging and installing the application, contains attributes such...
Creating the NfcSimple Application
All TizenJS APIs are nested under the tizen object e.g.
tizen.time, tizen.power, etc.
M...
The packaged application
Tizen uses the wgt format to package the application.
It’s essentially a zipped file with all you...
The packaged application

To complete the Web Platform offering, Tizen offers couple of
JavaScript APIs you can use to mak...
NfcSimple: Get the default adapter and power it on
// Get the NFC adapter
try {
adapter = tizen.nfc.getDefaultAdapter();
i...
NfcSimple: Get notifications when a tag is detected
var onTagDetectedCB = {
onattach : function(nfcTag) {
nfcLog("NFC Tag'...
NfcSimple: Write to the tag
var newMessage = new tizen.NDEFMessage();
newMessage.records[0] = new tizen.NDEFRecordText(mes...
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 sid...
Part 3

Responsive design
and good practices
The market today
Different screen sizes/resolutions, densities and even different behavior

Image from the Responsible Web...
Post-PC – lots of different devices, happening now
Common solutions
Show desktop pages
Small text (mobile browsers enlarge...
How is the web structured?

Semantics aka HTML
Styling aka CSS
Behavior aka JavaScript
How is the web structured?

We want to be responsive

Semantics aka HTML
Styling aka CSS

Behavior aka JavaScript
How is the web structured?

We want to be responsive

Semantics aka HTML
Styling aka CSS

Behavior aka JavaScript the sema...
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 ar...
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 appli...
The media query
Example
<link rel=“stylesheet” type=“text/css” href=“core.css” media=“screen”>
<link rel=“stylesheet” type...
Size breakpoints
Media queries allow that you to add breakpoints given size
<link rel=“stylesheet” type=“text/css”
media=“...
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 insi...
Image resolution and
bandwidth savings
Retina, hi-res, etc.
Device units vs. density independent pixels aka CSS units

De-facto standard

CSS

pixels

height: 2p...
Media queries and future ideas
Use media queries today
#image { background: url(image.png); }
@media (-webkit-min-device-p...
Media queries and future ideas
Mat Marques suggested the <picture> element
<picture ...>
#image { background: url(image.pn...
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...
Viewport adaptation
Mobile browsers often lays out at 980px or similar
Then they fit the contents to the view, resulting i...
The viewport meta-tag
The meta tag takes care of that
<meta name=“viewport” contents=“width=device-width, initial-scale=2”...
CSS Device Adaptation spec
CSS version of the meta tag, easier to use
@viewport {
width: device-width;
}
@media screen and...
Advanced media queries
How to adapt behavior implemented in JavaScript
Query or listen
mql = window.styleMedia.matchMedium(“(max-width: 480px)”);...
Rounding up
Best approach
Rounding up

Responsive design is

There today!

And most works with any modern browser

Retina support, vw/hw units, dppx...
Best approach
Mobile first, consider bandwidth constraints
Add additional UI components for larger target screens, keeping...
Thank You!
License Notices
Except where noted, sample source code written by Samsung Electronics Co. Ltd and provided to you is licen...
Upcoming SlideShare
Loading in...5
×

SDC13 - Unleashing Your Inner Web App Developer Using Tizen

401

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
401
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "SDC13 - Unleashing Your Inner Web App Developer Using Tizen"

  1. 1. The Tizen Web Platform, where web apps feels right at home Kenneth Christiansen / Alexis Menard Web Platform Architects Intel Corporation #SDC13
  2. 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
  3. 3. Part 1 The runtime model
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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
  13. 13. Store support Packaged apps can be distributed via the Tizen Store: http://seller.tizenstore.com
  14. 14. Part 2 Creating an application
  15. 15. Creating a simple NFC application We will walk through the major steps for creating a simple application accessing hardware capabilities
  16. 16. How to get started Get the Tizen SDK: (works on Mac OS, Linux and Windows) https://developer.tizen.org/downloads/tizen-sdk
  17. 17. How to get started
  18. 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. 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. 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. 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. 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. 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. 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
  25. 25. NfcSimple: Try it on the phone
  26. 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.
  27. 27. Part 3 Responsive design and good practices
  28. 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. 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. 30. How is the web structured? Semantics aka HTML Styling aka CSS Behavior aka JavaScript
  31. 31. How is the web structured? We want to be responsive Semantics aka HTML Styling aka CSS Behavior aka JavaScript
  32. 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
  33. 33. Fluid grids (‘dimensions’), Flexible images and Media Queries This is the definition of Responsive Web Design
  34. 34. Time for exploration
  35. 35. How to accomplish something like this?
  36. 36. Fluid dimensions It’s all about layout Show, hide, change, reorder CSS to the rescue!
  37. 37. Fluid dimensions Lots of real estate One particular design
  38. 38. Fluid dimensions Less real estate A more compact styling
  39. 39. Fluid dimensions And it goes on… New layout constructs as Flexible box even supports reordering cells!
  40. 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. 41. Insert ‘new mindset’ here “ Use percentages (%), add min-width: …px To avoid breaking the design “
  42. 42. Insert ‘new mindset’ here But be aware Some words about sub-pixel layout and the lack there of.
  43. 43. Sub-pixel layout With a 6 column grid: 100% ÷ 6 = 16.67%
  44. 44. Sub-pixel layout With a 1000px viewport that is 166.67 Pixel per column, oh, oh…
  45. 45. Sub-pixel layout If we round to nearest pixel it won’t fit on screen
  46. 46. Sub-pixel layout If we round to nearest pixel it won’t fit on screen 167x6 = 1002
  47. 47. Sub-pixel layout Only fixed by sub-pixel layout Supported by IE and newest WebKit based browsers
  48. 48. Meet the Media Query
  49. 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. 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. 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. 52. Size breakpoints – Adobe Edge Reflow Adobe provides a nice tools for doing this
  53. 53. Sizing to the viewport
  54. 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; }
  55. 55. Image resolution and bandwidth savings
  56. 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. 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. 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”>
  59. 59. Viewport adaptation
  60. 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. 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. 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. 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
  64. 64. Advanced media queries
  65. 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); })
  66. 66. Rounding up Best approach
  67. 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. 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!
  69. 69. Thank You!
  70. 70. 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/).
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×