jQuery MobileとHTML5
Upcoming SlideShare
Loading in...5
×
 

jQuery MobileとHTML5

on

  • 1,320 views

2013/7/24の第2回HTML5ビギナーズの発表資料です。

2013/7/24の第2回HTML5ビギナーズの発表資料です。

Statistics

Views

Total Views
1,320
Views on SlideShare
1,261
Embed Views
59

Actions

Likes
6
Downloads
7
Comments
0

2 Embeds 59

https://twitter.com 56
http://s.deeeki.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery MobileとHTML5 jQuery MobileとHTML5 Presentation Transcript

    • jQuery  Mobile  と  HTML5 2013/07/23 第2回  HTML5ビギナーズ Toru  Yoshikawa  (@yoshikawa_̲t) ×
    • Who? Google  Developer  Experts  (Chrome) html5j/HTML5とか勉強会スタッフ/ビギ ナー部  (副部⻑⾧長) HTML5  Experts.jp  エキスパートNo.3 Web先端技術味⾒見見部  (顧問)/⽇日本jQuery   Mobileユーザー会  (管理理⼈人)/Sublime  Text   2  Japan  Users  Group  (管理理⼈人)/allWebク リエイター塾  jQuery  Mobile担当講師 Blog:  http://d.hatena.ne.jp/pikotea/ 吉川  徹  /  Toru  Yoshikawa @yoshikawa_̲t
    • Agenda jQuery  Mobileとは? jQuery  Mobileで利利⽤用されているHTML5の機能
    • jQuery  Mobileとは?
    • jquerymobile.com
    • jQuery  Mobileの概要 モバイルサイト構築のためのフレームワーク HTML5ベースのユーザーインターフェース jQueryのプラグインとして動作する ⾮非常にシェアが⾼高い 活発な開発と豊富な情報量量
    • jQuery  Mobileの特徴 デザイナーでも簡単にインタラクティブなサイト を作ることができる デベロッパーでも簡単にリッチなサイトを作るこ とができる
    • Live  coding
    • jQuery  Mobileで利利⽤用されている HTML5の機能
    • jQuery  Mobileの設定 data-‐‑‒*  attributes <div  data-‐‑‒role=”page”>    <div  data-‐‑‒role=”content”>        <!-‐‑‒-‐‑‒  コンテンツ  -‐‑‒-‐‑‒>    </div> </div>
    • ボタンなどの⾓角丸 border-‐‑‒radius .ui-‐‑‒corner-‐‑‒all  {    border-‐‑‒radius:  0.6em; }
    • ボタンや背景などのグラデーション linear-‐‑‒gradient .ui-‐‑‒btn-‐‑‒up-‐‑‒b  {    background-‐‑‒image:   linear-‐‑‒gradient(#5f9cc5,  #396b9e); }
    • ボタンなどの影 box-‐‑‒shadow .ui-‐‑‒shadow  {    box-‐‑‒shadow:  0  1px  3px; }
    • テキストの影 text-‐‑‒shadow .ui-‐‑‒btn-‐‑‒hover-‐‑‒c  {    text-‐‑‒shadow:  0  1px  0  #fff; }
    • ページ遷移アニメーション(変形) CSS3  Transform transform:  rotateY(-‐‑‒90deg)  scale(0.9); 変形・拡⼤大縮⼩小
    • ページ遷移アニメーション CSS3  Animations @keyframes  popin  {        from  {  transform:  scale(.8);  opacity:  0;  }        to  {  transform:  scale(1);  opacity:  1;  } } .pop.in  { animation:  popin  350ms; }
    • パネルや細かなパーツのアニメーション CSS3  Transitions .ui-‐‑‒panel-‐‑‒animate  { transition:  transform  350ms  ease; }
    • レスポンシブウェブデザイン CSS3  Media  Queries @media  all  and  (max-‐‑‒width:  35em)  {    /*  styles  */ }
    • その他 History  API jQuery  Mobileでは、ページ遷移で  pjax  (Ajax  +   pushState)というテクニックを利利⽤用している 遷移先のページをAjaxでとってきて ページのURLを書き換えて、あたかもそのペ ージにアクセスするようにする(※リロード してもそのページがちゃんと⾒見見える)
    • Getting  more jQuery  Mobileではじめるモバイルサイト/アプリ制作 http://slidesha.re/11bc17l jQuery  Mobile  1.1  最新情報  &  Tips http://slidesha.re/16WsnPO jQuery  Mobile  1.2  最新情報  &  Tips http://slidesha.re/12evK8O jQuery  Mobileカスタマイズ⾃自由⾃自在  v1.2 http://slidesha.re/16WspaC jQuery  Mobile  1.3  最新情報 http://slidesha.re/19f2OzT
    • Thank  you!! (  @yoshikawa_̲t  )