Tizen Web UI Frameworkでデザインを組み込んでみた
•
5 gostaram•1,312 visualizações
Tizen Web UI Frameworkを1日で組み込んでみた感想の発表。わりとすっとできる。
Recomendados
Mais conteúdo relacionado
Semelhante a Tizen Web UI Frameworkでデザインを組み込んでみた
Semelhante a Tizen Web UI Frameworkでデザインを組み込んでみた (20)
Último
Último (8)
Tizen Web UI Frameworkでデザインを組み込んでみた
- 1. Tizen Web UI Frameworkで デザインを組み込んでみた @tommmmy 秋葉ちひろ／Baidu Japan
- 2. デザイナー／アートディレクター • Webサイト制作 - 7年ぐらい • HTML歴 約15年 • CSS歴 約10年 • Android XMLレイアウト - 数ヶ月 • Tizen SDK 約1日
- 3. Tizenとの出会い • 関西の村岡さんて人が 「TizenTizen」と連呼していた • 今村さんが勉強会を開催していた • 今村さんがDevPhoneを持っていた
- 4. 目標 • いろいろなデバイスで動くアプリを 全般的に手がける アートディレクター • Webサイト • Androidアプリ、Metroアプリ • Tizen、Firefox OS、etc...
- 5. この勉強会のために Tizen Web UI Framework • jQuery Mobileによく似ているらしい • Tizenのシステムデザインっぽい • 実際に組み込んだらどうなるんだろう
- 8. Header Header Content Content Footer Footer
- 9. Page Page Header Header Content Content Footer Footer
- 10. Header <div data-role="page" id="one"> <div data-role="header" data-position="fixed"> </div><!-- /header --> Content <div data-role="content"> </div><!-- /content --> Footer <div data-role="footer" data-position="fixed"> Header </div><!-- /footer --> </div><!-- /page --> Content Footer
- 11. Header <body> <div data-role="page" id="one"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> Content </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="two"> Footer <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> Header </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> Content </body> <a href= "#two" >2ページめへ</a> Footer
- 13. Widgets > Control Bar
- 14. <div data-role="footer"data-position ="fixed"> <div data-role="controlbar" data-style="toolbar" > <ul> <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> -------------- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> </ul> </div><!-- /controlbar --> </div>
- 15. <div data-role="footer"data-position ="fixed"> <div data-role="controlbar" data-style="toolbar" > <ul> <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> -------------- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> </ul> </div><!-- /controlbar --> </div>
- 16. <div data-role="footer"data-position ="fixed"> <div data-role="controlbar" data-style="toolbar" > <ul> <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> -------------- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> </ul> </div><!-- /controlbar --> </div>
- 19. <div data-role="page" id="timeline"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> <a href="#timeline">Timeline</a> <a href="#tweet">Tweet</a> <a href="#friends">Friends</a> <a href="#profile">Profile</a>
- 20. <div data-role="page" id="timeline"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 21. <div data-role="content"> <ul data-role= "listview" > <li class="ui-li-2line-bigicon1"> <span class="ui-li-text-main"> It’s so fun to styling Tizen! </span> <span class="ui-li-text-sub"> tommmmy </span> <img src="img/tommy.jpg" class="ui-li-bigicon"> </li> </ul> </div><!-- /content -->
- 22. <div data-role="page" id="tweet"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 23. <input type=”text”> <input id="slider5" name="slider5" data- popupenabled='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text- right='99'/> <div data-role="button"> Send Tweet </div>
- 24. <div id="friends" data-role="content" data-scroll="y" data-handler="true"> <ul data-role="listview"> <li data-role="list-divider">A</li> <li><a href="#">Adam Kinkaid</a></li> </ul> </div>
- 25. <div data-role="page" id="friends"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 26. <div data-role="page" id="profile"> <div data-role="header" data-position="fixed"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page -->
- 27. この勉強会のために すごい簡単！ • Documentsからコードをコピペする だけ • ほぼ必要なWidgetsはそろっている ような気がする
- 28. ひとつ問題が くろい！
- 31. この勉強会のために デモ • Web Simulator Applicationが立ち 上がらない • 実機もうまくつながらない • エミュレーター遅い
- 32. もっとかわいくしたい
- 41. Tizen Web UI Framework • ありものをごにょごにょして 整形する • 実はけっこうたいへん • 自由度が低い
- 44. Thank you so much!