「情報数学」サポートページ　【インタラクティブWebページの作成】

インタラクティブWebページ作成実習

1. HTMLによる静的Webページの作成
   • 模擬授業のトップページを作成
   • HTMLの基本の学習
2. Java Script による動的ページの作成
   1. サインカーブのグラフ
   2. ヒストグラム
   3. 2次方程式の解法ソース
   4. 簡単な3択問題ソース
3. Java Script を用いた実際の数学教育コンテンツの作成
4. 模擬授業

具体的内容

0. 準備

1. 自分のフォルダ（Z:ドライブ）のwwwフォルダに，"rensyu"フォルダと"contents"フォルダを作成してください。
   
   

1. HTMLによる静的Webページの作成

1. メモ帳を開き，index.htmlを作成しましょう。
   　　本実習の成果となるトップページを例題として作成します。
   
   
   1. このソースを打ち込みます。
      • 表示はこのようになります。
      • 「3.実際の数学教育コンテンツの作成」のときには，自分たちの構成する模擬授業に合わせて，このファイルをさらに修正します。
   2. このファイルは，wwwフォルダの直下に保存します。
   3. 人の作品を見るときは，
      　　　　http://tsfile.cc.okayama-u.ac.jp/アカウント名/
      とします。アカウント名は，その人のアカウント名です。
      
      
2. 上記のタグを利用して，自己紹介のページを作成してみましょう。
   1. "z:\contents" に "selfintro.html" として保存します。
      
      

2. Java Script による動的ページの作成

1. 次の動的ページをマスターしましょう。まず，「実際の動作」を確認し，ソースをメモ帳などで打ち込みましょう（"z:\rensyu" に保存します）。同時に，ソースの各JavaScriptの意味を確認しましょう。
   
   
   1. サインカーブのグラフ
      • ソース
      • 実際の動作
        
        
   2. ヒストグラム
      • ソース
      • 実際の動作
        
        
   3. 2次方程式の解法
      • ソース
      • 実際の動作
        
        
   4. 簡単な3択問題
      • ソース
      • 実際の動作
        
        
2. 慣れない間は，ソースを直接打ち込む方がよいですが，慣れてきたら（JavaScriptの意味がわかってきたら），ソースをコピーしてメモ帳に貼り込み，自分好みに改良していくようにしましょう。
   
   

3. 数学教育コンテンツの作成

1. 題材（単元）を決めます。
2. Webページの作成します。
3. 授業用に全体の構成を考えます。
   1. 指導の目的や指導展開を決める。
   2. "z:\www\index.html"の該当部分を加筆修正する。
   3. 必要なら，説明用のHTMLを追加してもよい。
      
      
      参考Webページ
      • WebPageで使えるJavaScript （リンク集を参考に）
      • JavaScriptサンプル集
      • きままにSCRIPT　（ポップアップのテクニックが充実）
        
        

4. 模擬授業

評価用紙

[授業計画へ]　[講義資料へ]　[トップページへ]