Recommended
More Related Content
Similar to Sendai.html5#2
Similar to Sendai.html5#2 (20)
Sendai.html5#2
- 1. 東北デベロッパーズコミュニティ Sendai.html5 #2 スマートフォンサイト製作とHTML5+CSS3 有限会社ノヴァトレード 若林 怜帆人 2012年6月30日
- 4. 本編の前に・・
- 5. トルコ語講座
- 6. トルコ共和国 トルコ共和国（トルコきょうわこく、トルコ語: Türkiye Cumhuriyeti）、通称トルコは、西アジアのアナトリア半島（小ア ジア）と東ヨーロッパのバルカン半島東端の東トラキア地方を領 有する、アジアとヨーロッパの2つの大州にまたがる共和国。首都 はアナトリア中央部のアンカラ。 http://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AB%E3%82%B3
- 8. トルコ語・・・アルタイ諸語 定説には至っていないが 日本語もアルタイ諸語に 含めることがある （wikipedia アルタイ諸語）
- 9. 発音練習
- 10. 日本語にない母音 Ö Ü İ
- 12. スマートフォンサイト基礎
- 13. スマートフォンサイトの特徴 画面が小さい タッチ操作 縦横比が可変 回線が遅い 製作においてHTML５＋CSS３前提
- 14. 対応状況を調べる http://www.findmebyip.com/litmus/ http://caniuse.com/
- 15. スマートフォンならではの コンテンツ SPからの利用を想定したコンテンツ PCと利用機会が異なる SNSとの連携
- 16. PCサイトのスマートフォン閲覧対応 元々PC向けだったコンテンツを スマートフォンからの閲覧も考慮して 最適化を行う
- 20. UAにSPぽいものが含まれていたら /sp/アクセスしたファイル名に転送 RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone| iPod|iPad|Android|BlackBerry) RewriteRule ^sp - [L] RewriteCond %{HTTP_USER_AGENT} (iPhone| iPod|iPad|Android|BlackBerry) RewriteRule ^(.*)$ /sp/$1 [R]
- 21. アプリケーションで テンプレート切り替え 例） CakePHP AppController.phpのbeforeFilter （必ず通る処理） if(preg_match('!iPhone|iPod|Android|BlackBerry!' , $ua)) { $this->layout = 'smartphone'; }
- 22. @mediaルール（Media Queries) @media ルールで 適用させるcssファイルを 振り分ける http://m.yahoo.co.jp/
- 23. そのまま タッチ操作やズームを考慮して SPからも使いやすいように 一部要素を最適化する
- 24. スマートフォンサイトの特徴に沿った施策 画面が小さい・・UI、表示コンテンツ タッチ操作・・UI、リンク、メニュー 縦横比が可変・・リキッドデザイン 回線が遅い・・リクエストやファイル サイズを減らす
- 25. 題材の紹介
- 26. HTML５とスマートフォンサイト
- 27. DOCTYPE宣言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ↓ <!DOCTYPE html>
- 28. 文字コード指定 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ↓ <meta charset="UTF-8">
- 29. section要素 <div id=”header”></div> <div id=”main_article”></div> <div id=”footer></div> ↓ <header></header> <article></article> <footer></footer> http://www.w3.org/TR/2011/WD-html5-20110525/sections.html http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
- 30. ソースコードの確認
- 31. Web Storage ブラウザにデータを蓄積する 欲しいデータが保存済みなら リクエストが発生しない そのセッションのみのSession Storage 永続的なLocalStorage
- 32. CSS３とスマートフォンサイト
- 33. level3セレクタ 属性セレクタ 擬似クラス 擬似要素 http://www.w3.org/TR/selectors/
- 34. CSS3プロパティ CSS Gradients Text Shadow Border Radius など・・・ http://meiert.com/en/indices/css-properties/
- 35. CSS3ジェネレータの使い方
- 36. 表示速度の違い
- 37. おまけですが Data URI scheme WebStorage使ってみました
- 38. まとめ HTML5＋CSS3を使うと 簡潔な記述でリクエストの少ない スマートフォンサイト向けの コーディングができる
- 39. 東北デベロッパーズコミュニティ Sendai.html5 #2 ご清聴ありがとうございました 有限会社ノヴァトレード 若林 怜帆人 2012年6月30日