2008年6月13日金曜日

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

0 件のコメント: