1-10 iPhone SDK for Web Developers.m4v

ビデオのメモ

Web技術
　Java script
　　getElementsBy_Class_Name_
　　　エレメントのアレイを返す
　　var myDivs = document.get getElementsBy_Class_Name_("myDivClass")

　　　Selectors API
　　　CSSのセレクタを得る
　　var fooOrBar = document.querySelector("#foo, #bar"); // 次のセレクタ
　　var warnings = document.querySelectorAll("p.warning") // 全てのセレクタ

　Native SVG ベクトル画
　　Scalable Vector Graphics 1.1
　　<img src="asf-logo.svg" style="height:90%;width:90%;">
　　background-image: url("asf-log.svg")

　CSS Effect アニメーション
　　変形（回転など）
　　　-webkit-transform : trasform_function
　　　-webkit-transform-origin : 3dpoint trasform_function

　　　skew(angle)ひねり
　　　scale(number)拡大縮小
　　　rotate(angle)回転
　　　translate(number)移動
　　移動
　　　-webkit-transition-property : opacity; //透明などのスタイル
　　　-webkit-transition-duration : 2s; // 2秒で移動
　　　-webkit-transition-timing-function : linear; // 移動速度
　　　-myyElement.style.opacity = "10%"; // 最終の透明度

　　アニメーション CSS Animation
　　　-animation-name : 'bounce'; // キーフレーム名の指定
　　　　キーフレームの例
　　　　@keyframes 'bounce' {
　　　　　0 { top: 100px; }
　　　　　25% { top: 150px; }
　　　　　50% { top: 200px; }
　　　　　75% { top: 150px; }
　　　　　100% { top: 100px; }
　　　-animation-duration : '2s'; // アニメーションの時間
　　　-animation-iteration-count : 1; // 繰り返し回数
　　アニメーションはハードウェアで実行

　　offline Data クライアント側のデータベースAPI
　　　HTML 5規格
　　　JavaScript API
　　　　openDatabase
　　　　 myDB = openDatabase("noteDB", "1.0", "My Database", 200000);
　　　　　データベース名、バージョン、概要、サイズ
　　　　executeSQL
　　　　 myDB.executeSql("INSERT INTO NoteTable (id, note,) VALUES ( ?, ?)", [note.id, note.text]);
　　　SQL syntaxが使える
　　　Transactionをサポート
　　　セキュア 同じドメインのみアクセス

　　フル スクリーン モード
　　　SafariのURL欄とToolbarを表示せずにWebサイトを表示できる
　　　Homeスクリーン アイコンが必要
　　　　apple-touch-icon.png または
　　　　<link rel="apple-touch-icon" href="/customIcon.png"/>
　　　メタタグも必要
　　　　<meta name="apple-touch-fullscreen" content="YES" />

　　ジェスチャ イベント
　　　JavaScriptのハンドラ
　　　 gesturestart
　　　 gesturechange
　　　 gestureend
　　　回転、拡大縮小ができる
　　　 <div ongesturestart="handleGesture()"> </dive>
　　　mouseEventsの代用

ツール
　iPhone Simulator
　Dashcode