Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing...
Transcript of Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing...
![Page 1: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/1.jpg)
Tizen UX Layouter & Composer
Hirotaka Suzuki HI CORPORATION
![Page 2: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/2.jpg)
Agenda
• ApplicaBon development workflow • Tizen UX Layouter – Simple, easy and intuiBve prototyping tool
• Tizen UX Composer – UI/UX framework and authoring tool for embedded device
![Page 3: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/3.jpg)
![Page 4: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/4.jpg)
![Page 5: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/5.jpg)
Contents Developer/Publisher
Device Maker
HTML5
Linux A Linux B Tizen
![Page 6: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/6.jpg)
Mobile Contents
Game
Other 59.7% 40.3%
![Page 7: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/7.jpg)
• Non-‐games • Corporate apps – Apps developed by corporaBon as part of their products
![Page 8: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/8.jpg)
A typical development workflow
idea coding publish
![Page 9: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/9.jpg)
A typical development workflow
idea coding publish
proposal pitch approval
![Page 10: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/10.jpg)
A typical development workflow
idea coding publish
proposal pitch approval
team up designing engineering
![Page 11: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/11.jpg)
A typical development workflow
idea coding publish
proposal pitch approval
team up designing engineering
![Page 12: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/12.jpg)
A typical development workflow
idea coding publish
proposal pitch approval
team up designing engineering
porBng
![Page 13: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/13.jpg)
Pitch your idea to execuBves
![Page 14: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/14.jpg)
Pitch your idea to execuBves
• PowerPoint may tell – Look & Feel – What screens look like – What the app looks like
• PowerPoint cannot tell – Touch & Feel – How screens switch from each other – How the app feels like
![Page 15: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/15.jpg)
SoluBon: create a prototype
![Page 16: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/16.jpg)
SoluBon: Tizen UX Layouter
![Page 17: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/17.jpg)
SoluBon: Tizen UX Layouter
• Quick prototyping • No coding • Runs on real devices • Auto-‐generate some useful documents – Screenshots – Screen transiBon diagram
![Page 18: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/18.jpg)
![Page 19: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/19.jpg)
SoluBon: Tizen UX Layouter
• Quick prototyping • No coding • Runs on real devices • Auto-‐generate some useful documents – Screenshots – Screen transiBon diagram
![Page 20: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/20.jpg)
Form a dev team and start building
coding
team up designing engineering
![Page 21: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/21.jpg)
Form a dev team and start building
coding
team up designing engineering
Tizen UX Layouter
![Page 22: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/22.jpg)
designers engineers
![Page 23: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/23.jpg)
SoluBon: share a common language
![Page 24: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/24.jpg)
SoluBon: Tizen UX Composer
![Page 25: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/25.jpg)
SoluBon: Tizen UX Composer
• UI/UX authoring tool and libraries • Easy animaBon ediBng • Quick event mapping • HTML5 exporBng • Work directly with Tizen UX Layouter • Supports various devices/pla^orms • Highly opBmized for embedded devices
![Page 26: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/26.jpg)
Authoring tool
designers
UI/UX data
libraries
engineers
SoluBon: Tizen UX Composer
applicaBon
HTML5 content
Tizen UX Layouter
![Page 27: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/27.jpg)
![Page 28: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/28.jpg)
![Page 29: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/29.jpg)
Bring your apps to other pla^orms
idea coding publish porBng
![Page 30: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/30.jpg)
SoluBon: Tizen UX Composer
• Not a player-‐content approach • Directly export HTML5 contents • Libraries support various pla^orms
![Page 31: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/31.jpg)
Player-‐content may not work well
(Especially for embedded devices, such as digital camera, cam coder, automoBve, IVI, and so on.) 1. We don’t need that big all-‐in-‐one player. 2. Player is closed and unable to modify to fit to
our needs.
![Page 32: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/32.jpg)
SoluBon: Tizen UX Composer
• UI/UX authoring tool and libraries • Work directly with Tizen UX Layouter • Easy animaBon ediBng • Quick event mapping • Simple HTML5 export • Supports various devices/pla^orms • Highly opBmized for embedded devices
![Page 33: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/33.jpg)
A typical development workflow
idea coding publish
Tizen UX Composer
Tizen UX Layouter
Tizen SDK
![Page 34: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/34.jpg)
![Page 35: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/35.jpg)
![Page 36: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/36.jpg)
• We’re exhibiBng at the booth G8. – Tizen UX Layouter – Tizen UX Comoser – Mediaplayer demo app
![Page 37: Tizen&UX Layouter&Composer&download.tizen.org/misc/media/conference2013/... · team&up designing engineering A&typical&developmentworkflow idea coding publish proposal pitch approval](https://reader034.fdocuments.us/reader034/viewer/2022042406/5f20514dba20ed1d4c526642/html5/thumbnails/37.jpg)