講義の概要

目的

  • HTML、CSSを復習し、Webページの構造やデザインの基本を学ぶ
  • JavaScriptを学習し動きのあるWebページを可能にしている技術について知る。
  • ライブラリやAPI活用して、より簡単に、より洗練されたWebページの作成が可能なことを理解する。
  • 上記の実習を通して自分を取り巻くIT環境について理解を深める

詳細は→シラバス

JavaScriptでどんなことができるか　JavaScript Introduction　by w3cschools

ウェブ情報処理実習Ⅰからの接続について

（授業と関係なく、講義中盤までに、自習しておくこと）

ウェブ情報処理実習Ⅱ では、すべての人にとってあたらしい学習事項である、JavaScript について学習するところから始めます。

授業の後半では、ウェブ情報処理実習Ⅰで学習済みのCSSの知識をベースとして、CSSによるページレイアウトやCSS3で新しく追加された表現などを見ていく予定です。

ウェブ情報処理実習Ⅰの講義の範囲の内容について、なるべく早い時期に、以下の資料を参考に復習しておきましょう。

内容と予定

  • JavaScript の学習
  • JQuery, Canvas + JavaScript, API
  • HTML及びCSSの復習
  • CSSによるレイアウトやCSS３で追加された表現について, Bootstrap
  • スキルチェック, 制作実習

実習の準備

ブラウザの設定

.html と　ブラウザの関連付けを変更
  1. 拡張子が、.html であるファイルの上で右クリック、プロパティを選択　
  2. 変更をクリック　
  3. Google　Chrome を選択　

エディタの設定

秀丸の設定　1　編集時の文字コードの設定
  1. 秀丸を起動し、メニューバーの[その他]から動作環境を選択する。　
  2. 左下の、上級者向け設定にチェックを入れ、[設定の対象]のファイルから、エンコード１を選択し、標準のエンコード　と書かれているボタンを押す　
  3. エンコードの種類を、unicode(UTF-8)としておく　
  4. 自動判定で開くときのエンコードの判定の優先順位もUTF-8が上に来るように順序を変えておく　
秀丸の設定　2　保存時の文字コードの設定
  1. メニューバーの[その他]からファイルタイプ別の設定を選択　
  2. 設定の対象のその他から保存・読込みを選択し、エンコードの種類の指定をUnicode(UTF-8)とする　
フォントやタブの間隔の指定
  1. メニューバーの[その他]からファイルタイプ別の設定を選択、設定の対象のフォントから読みやすいフォントとサイズを選択（デフォルトの表示に慣れている場合は、変更しなくてもよい）　
  2. 設定の対象の体裁→タブで、字下げのタブを何文字分にするか設定できる。　
  3. 設定の対象の体裁→デザイン→表示で、全角スペースを記号で表示するよう設定しておくと、不具合を見つけやすい。 　

実習１　実習用フォルダとひな形ファイルの準備

実習用フォルダの作成
  • デスクトップにweb2という名前のフォルダを作成
  • web2のフォルダ内部にhtmlという名前のフォルダを作成
ひな形ファイルの作成
  • 秀丸を起動
  • 以下のようなファイルを作成
  • hinagata.htmlという名前で、フォルダhtml 内部に保存する
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html_hinagata</title>
</head>
<body>

</body>
</html>

5行目<meta name="viewport....は、いろいろなデバイスでよりよく表示できるようにするための措置
詳しくは→外部サイト　てっく煮ブログ　http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/ 2016-09-13 閲覧
または、W3cschools　http://www.w3schools.com/css/css_rwd_viewport.asp2016-09-15 閲覧

注意点
  • ファイル名、フォルダ名は、半角、英数、小文字のみを使用
  • ソースを記述する際に全角スペースを使わない（日本語入力モードの状態でスペースキーを押さない）
  • ソースの中に記述されている文字コード、エディタで編集中の文字コード、保存するときの文字コードを一致させておく。

実習２　メモの作成

講義で覚えたことをメモしていくファイルを作成
  • word を起動
  • メモのタイトル・学生番号氏名などを記入し、今日覚えたことがあればメモしておく
  • web2フォルダ内部に、memo　というファイル名で保存

宿題

次回までに、次の文言を、大文字小文字間違えずに、できれば、キーボードを見ないで、速やかに打てるように練習しておきましょう！

document.getElementById('demo').innerHTML

タッチタイピングの練習方法は、こちら

キーボードの配列表は、こちら

今日の授業内容に関連する資料

html ひな形のおこしかた
dotinsatll
web1資料(この資料では文字コードしていがutf以外になっているので注意)
Wordの使い方
簡単な文書作成
デザイン性のある文書作成
JavaScript でどんなことができるかについて知る
JavaScript Introduction　by w3cschools

授業全体の参考となる資料

時間のあるときに、ちらちら、見ておきましょう！

この回の成果物

  1. web2/html/html_hinagata.html