ADC meetup Session.02

1,473 views
1,443 views

Published on

2011年6月11日に開催された、「ADC meetup ROUND01」で使用したスライドです

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,473
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

ADC meetup Session.02

  1. 1. 向けSESSION 2 ン 作 ォ 制 フ の ト ト マ サー イ ス eb W ぐち まこと たに
  2. 2. ドイツの水だよ ltzer@ se
  3. 3. マカロン本
  4. 4. イト ホサスマ
  5. 5. ? イト ホサスマ
  6. 6. その前に... Smart Phone スマートフォン ホ スマホ
  7. 7. その前に... Smart Phone スマートフォン スマホ
  8. 8. その前に... ! ケタ違い!
  9. 9. イト ホサスマ
  10. 10. スマホサイト Yahoo! Japan http://ipn.yahoo.co.jp/
  11. 11. スマホサイト NAVER http://www.naver.jp/m/
  12. 12. 縦+横のスマホサイト H2O Space. ... 開発中
  13. 13. PC+スマホサイト ぐるなび http://mobile.gnavi.co.jp/
  14. 14. PCサイトそのまま
  15. 15. PCサイトそのまま
  16. 16. マルチスクリーン BLOG 未来館のひと http://blog.miraikan.jst.go.jp/
  17. 17. 今後はマルチスクリーン?✓ 制作の手間・費用✓ PCでもWebKitが主流に✓ コンテンツの有効活用
  18. 18. マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
  19. 19. L5 TMH
  20. 20. Why HTML5? ✓ 新要素で、ファイルすっきり ✓ 作るの簡単 ✓ 新機能で次世代Web
  21. 21. HTML5の新要素✓ <article> 記事・内容✓ <section> コンテンツの区分け✓ <aside> 本体のコンテンツの補足情報など✓ <hgroup> 見出しをグループ化する✓ <header> ヘッダ、<footer>... フッタ✓ <nav> ナビゲーションなどなど
  22. 22. HTML5の将来性✓ 位置情報を利用したサイト制作 Done!✓ フォームの強化 Done!✓ Webのオフライン利用 Now!✓ ビデオのインライン再生✓ 操作性の向上
  23. 23. HTML5の新機能
  24. 24. HTML5の新機能 ✓ placeholder=”例” ✓ type=”number” type=”email” ✓ autocapitalize=”off” ✓ autocorrect=”off”
  25. 25. HTML5の注意点 ? iPhone OS 3.xは HTML5の新要素に非対応
  26. 26. HTML5の注意点 HTML5 reset css 検索
  27. 27. S3CS
  28. 28. Why CSS3?✓ セレクタ強化で、要素をバシッと指定✓ 表現力強化で、画像削減 (角丸、グラデーション、複数背景、シャドウ)✓ CSSアニメーションでサクサク
  29. 29. Why CSS3? !
  30. 30. メディアクエリー<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 320px)">widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
  31. 31. マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
  32. 32. マルチスクリーンを攻略せよ✓ HTML5✓ CSS3✓ メディアクエリー✓ WebKitのプレビュー環境
  33. 33. moDe
  34. 34. とめま
  35. 35. には いう訳 せんと きまい
  36. 36. Android...
  37. 37. user-scalableを noに<meta name="viewport"content="width=device-width;user-scalable=no">
  38. 38. zoomプロパティを変更jQuery(window).bind(load resize,function() { if ( navigator.userAgent.indexOf(Android) > 0 ) { var zoom = jQuery(window).width()/500; }}
  39. 39. 文字サイズを調整if ( zoom < 1) { jQuery(#pages-3 a...).css(font-size, 60%);} else { jQuery(#pages-3 a...).css(font-size, 90%);}
  40. 40. とめ こそ ま今度
  41. 41. まとめ✓ スマホを考慮したデザイン✓ マルチスクリーンとAndroid✓ DWは開発にも活用できる!
  42. 42. h2o space 検索

×