tizen web ui frameworkでデザインを組み込んでみた
DESCRIPTION
Tizen Web UI Frameworkを1日で組み込んでみた感想の発表。わりとすっとできる。TRANSCRIPT
Tizen Web UI Frameworkで
デザインを組み込んでみた
@tommmmy
秋葉ちひろ／Baidu Japan
デザイナー／アートディレクター
• Webサイト制作 - 7年ぐらい• HTML歴 約15年• CSS歴 約10年• Android XMLレイアウト - 数ヶ月• Tizen SDK 約1日
Tizenとの出会い
• 関西の村岡さんて人が「TizenTizen」と連呼していた
• 今村さんが勉強会を開催していた• 今村さんがDevPhoneを持っていた
目標
• いろいろなデバイスで動くアプリを全般的に手がけるアートディレクター
• Webサイト• Androidアプリ、Metroアプリ• Tizen、Firefox OS、etc...
Tizen Web UI Framework
• jQuery Mobileによく似ているらしい• Tizenのシステムデザインっぽい• 実際に組み込んだらどうなるんだろう
この勉強会のために
Content
Footer
Header
Content
Footer
Header
Content
Footer
Header
Page
Content
Footer
Header
Page
<div data-role="page" id="one">
<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 -->
Content
Footer
Header
Content
Footer
Header
<div data-role="page" id="one"> <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 -->
<div data-role="page" id="two"> <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 -->
Content
Footer
Header
Content
Footer
Header
<a href= "#two" >2ページめへ</a>
<body>
</body>
https://developer.tizen.org/documentation
Widgets > Control Bar
<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>
<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>
<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>
勝手に架空アプリ！
• 架空アプリのUIデザインを考えてみる
この勉強会のために
<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>
<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 -->
<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 -->
<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 -->
<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>
<li data-role="list-divider">A</li>
<li><a href="#">Adam Kinkaid</a></li>
<div data-role="content" data-scroll="y" data-handler="true">
<ul data-role="listview">
</ul>
</div>
id="friends"
<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 -->
<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 -->
すごい簡単！
• Documentsからコードをコピペするだけ
• ほぼ必要なWidgetsはそろっているような気がする
この勉強会のために
ひとつ問題が…
くろい！
デモ
• Web Simulator Applicationが立ち上がらない
• 実機もうまくつながらない• エミュレーター遅い
この勉強会のために
もっとかわいくしたい…
header_bg.jpg
footer_bg.png
http://www.colorzilla.com/gradient-editor/
Tizen Web UI Framework
• ありものをごにょごにょして整形する
• 実はけっこうたいへん• 自由度が低い
次の機会には…
• 自作のHTMLをぶちこんでみる• どこまでいけるのか？
http://akibahideki.com/blog/html5gtug.html
Thank you so much!