プログラミングの授業例 テーブル

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

テーブルとは

テーブルはWebページ上で表を作成して文字や画像を配置するためのHTMLプログラムの機能です。表とはいっても、エクセルのような計算機能などはありませんので、必要であればJavaScriptなどを使って機能をプログラムすることになります。

Webページのデザインによってはテーブルを使わないこともありますので、HTMLやCSSの基礎として学ぶ内容としては、リスト（li,ul, ol）に比べて最近は学習の優先度は低くなったものかもしれません。Dreamweaverを用いてWebページを制作する場合、テーブルタグの知識がなくてもとりあえずは作れてしまうとも思います。

とはいえタグの入れ子構造を学ぶのにも良い題材であるので、クラスの到達度や進捗状況など応じて組み込んでいました。

Dreamweaverについて

DreamweaverはWebサイトを制作するためにおそらく今現場で最も使われているアプリケーションの１つです。よく知らない方にとっては、そして学生達も最初は、ワープロなどで文書を作るようにWebサイトが作れる、という期待を持っているようですが、実際にはHTMLやCSSの基礎は理解していないと厳しいです。

例えば「作業をしていたらレイアウトが突然崩れた！」といった不具合が出た時に、ある程度HTMLとCSSを知っていないと対処できません。

授業概要

授業で配布したプリントは次のようなものです。 （授業はテキストエディタを用いたWebサイト制作の授業向けで、Dreamweaverを用いた授業向けではありません。）

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、様々なサイトや書籍がありますのでぜひ一度ご覧ください。

プログラミングの授業例 フォーム

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

フォームとは

Webページ上でユーザが入力するための仕組みです。例えばユーザ登録をする時に画面上で氏名、メールアドレス、住所などを入力することや、オンラインストアで注文したい商品の個数を入力することを実現している機能です。

HTMLプログラムでは、ユーザが入力するための部品をWebページ上に配置し各種設定をします。

授業概要

授業で配布したプリントは次のようなものです。 

パタン１

 パタン２

プリントはクラスの様子に合わせて作成してください。クラスにとって難し過ぎず、易し過ぎずが良いと思います。

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、様々なサイトや書籍がありますのでぜひ一度ご覧ください。

プログラミンの授業例 CSSのセレクタ

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

CSSのクラスセレクタと複合セレクタを理解する

今回はWebサイト制作の授業の中でも、Webページの装飾に関わるCSSプログラムのセレクタについての授業例です。

CSSではWebページのどの部分に装飾を行うか（文字や背景の色の変更や、パーツのレイアウトなど）を、セレクタを使って指定します。

そしてこのセレクタが初学者には分かりにくく、講義を聞いたり手本のとおりにプログラムを作ってみてなんとなく分かった気がしても、実際に自分でWebページを作ってみると困る学生が多くいました。

そこでできるだけ授業の課題だけでなく、試行錯誤できる時間の確保や授業環境が大切と考えていました。

課題中のHTMLプログラムの難易度について

CSSプログラムを学ぶ時には、仕組み上必ずHTMLプログラムも必要になります。つまり、授業の中でCSSとHTMLという２つのプログラミング言語を同時に扱う必要がある訳です。あくまで学習の中心はCSSですので、HTMLプログラムの内容や難易度は適切にしておきたいところです。

なぜなら同じWeb制作を学ぶといっても、目的は様々だからです。

例えば、

・Bracketsなどのテキストエディタを用いてプログラミングの理解をメインに行う授業

・Dreamweaverを使ったWeb制作技術をメインに学ぶ授業

前者はプログラマやネットワークエンジニアを目指す学生が多い学科で行われるため、プログラミングそのものへの理解がより求められます。それに対して後者はWebサイトのデザインを学びたい学生が多い学科で行われるため、プログラミングの習得に合わせてDreamweaverの複雑な操作も覚えなくてはならないといった違いがあります。

授業概要

以下は、テキストエディタを用いたWebプログラミングの授業で配布したプリントの例です。

※今回から下記サイトを参考にPDFファイルを埋め込んでみました。

はてなブログにPDFを埋め込む方法 - リバ農ブログ（仮）

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。教員の授業観などを学生に共有しつつ学習を進めて行きます。

授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないと考えています。そのため、もし私のプリントを参考にして下さる方は、『学び合い』についての多くのサイトや書籍がありますのでぜひ一度ご覧ください。

プログラミングの授業例 HTMLとCSSを併用する

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

HTMLとCSSを併用する

今回はWebサイト制作の授業の中で、Webページ上に表示する文字や画像情報を記述したHTMLファイルに、文字色やレイアウトなどの装飾を記述したCSSを連動させる方法を学習した授業についてです。

最初に反省

今プリントを見直すと、授業のねらいが多すぎて学生達にとってはどこまでやればいいのか不安になったかもしれないと思いました。

こうなった背景としては、この年の授業スケジュールがタイトだったことや、学生の理解度にばらつきがあったことで、ここまでは最低限クリアしてほしいことをMissionとして、よりチャレンジできる人はチェックポイントも、という意図でした。

改善の余地がありです。

授業概要

授業で配布したプリントは次のようなものです。

「HTMLとCSSの連携」

Mission：HTMLとCSSを両方使ってWebページを作ることができる。

課題　下記のフォルダ＆ファイル構成で、HTMLとCSSを連携させた１つのWebページを作る。

フォルダ＆ファイル構成

GWフォルダの中に、index.htmlとstyle.cssが入っている。

※実際には樹形図で指示

作業

１）index.htmlとstyle.cssファイルを作成する。

２）index.htmlに見出し１と段落を作る。

見出し1にはゴールデンウィークにしたこと、言った場所など。段落にはその説明を表示させる。

（文章は短くてOK）

３）index.htmlとstyle.cssを連携させること。

ヒント：linkタグを使う。

４）style.cssにCSSを記述し、文字色や背景色を設定する。

チェックポイント

HTMLとCSSの役割の違いを説明できる。

CSSの「タグセレクタ」の役割を説明できる。

反省の追加

「技術」を身に付けるのか、「考え方」を理解するのか、ゴールの種類もいくつかあると思います。そういったことも今後は明確に分けて考えていけたらと思います。

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、『学び合い』についての様々なサイトや書籍がありますのでそちらもぜひご覧くださいね。

arukutech.hatenablog.com

プログラミングの授業例 相対パスを学ぶ

『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。

今回は相対パスの理解についての授業です。私は複数の専門学校でいくつかの科目を担当していましたが、これはWebサイト制作に関する科目の中で行いました。

相対パスと絶対パス

これらはWebサイトを制作するときには欠かせない知識の１つで、ファイルやフォルダの場所を指定する方法です。相対パスと絶対パスは、道案内や住所に例えられることが多いかもしれません。

例えば相対パスは、「（今いる建物の中の）ここから２つ上の階のAという部屋」といったように、ある地点（現在地など）を基準に位置を説明します。

それに対して絶対パスは「○○県○○市○○区○○番地　Xビル５階A号室」といった指定方法です。
どちらも決められたルールに従っていれば間違いなくファイルやフォルダを指定できるとはいえ、Webサイトの制作においては相対パスを使うことで、納品後の誤動作などを防ぐことなどができるため必須の知識といえます。

授業概要

授業で配布したプリントは次のようなものです。

「相対パスを理解する」

Mission１）相対パスをHTMLの中で使うことができる。

Mission２）相対パスについて説明することができる。

次の例題を利用しても構いません。

例題　下記のようなフォルダ構成でデータが保存されている。次の問題に答えましょう。

ファイルとデータの構成について（あるフォルダの中に下記ファイルとフォルダが入っているとします。）

index.html

pic01.jpg

imagesフォルダ中にpic11.jpgとpic12.jpgがある

profileフォルダ中にprofile.htmlがある

※実際には樹形図で表示

１）Index.htmlで画像ファイルpic01.jpgを表示させるには、index.htmlの中に記述するimgタグはどのようになるか？

２）Index.htmlで画像ファイルpic11.jpgを表示させるには、index.htmlの中に記述するimgタグはどのようになるか？

３）profile.htmlで画像ファイルpic01.jpgを表示させるには、profile.htmlの中に記述するimgタグはどのようになるか？

４）profile.htmlで画像ファイルpic12.jpgを表示させるには、profile.htmlの中に記述するimgタグはどのようになるか？

５）profile.htmlで表示される文字列「トップページへ」をクリックするとindex.htmlへジャンプするようなリンクの設定をするには、profile.htmlにどのようなaタグを記述をすれば良いか？ 

 求められたMissionをクリアできたのかについてはクラスの状況に合わせて方法を変えてみていました。『学び合い』で使われるネームプレートでの確認、学生をランダムで指名して答えてもらう、振り返りのための問題を出題する、などです。

振り返りの問題例

フォルダ構成（課題用のフォルダ中に下記ファイルとフォルダがある）

index.html

pic01.jpg

imagesフォルダ中にtitle.jpgとmenu1.jpgがある

accessフォルダ中にaccess.htmlとimgフォルダ(map.jpg含む)がある。

※実際には樹形図で表示

問１）index.htmlに画像を表示するための記述について答えましょう。

　A）title.jpgを表示するためにindex.htmlに記述するimgタグを書きましょう。

　B）map.jpgを表示するためにindex.htmlに記述するimgタグを書きましょう。

問２）access.htmlに画像を表示するための記述について答えましょう。

　A）title.jpgを表示するためにaccess.htmlに記述するimgタグを書きましょう。

問3）access.htmlに表示される文字「トップページへ」をクリックしたときに、index.htmlへジャンプするようなリンクの設定について。index.htmlに記述するaタグを書きましょう。

〇Mission２　相対パスについて説明することができる。

問1）相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？（記述スペースが足りないときは、裏へ）

振り返り

こうやって見てみると、最初のMisson（達成課題）をもう少し具体的にできたらと思いました。授業ではおそらく口頭で補足説明をしたのだろうと思いますが、例えばMission2「相対パスについて説明することができる。」については、振り返りの問題「相対パスを知らない人（後輩、家族）に説明しなければいけないとき、あなたならどうやって説明しますか？」の方が、指示が明確なので学生もより動きやすいだろうと思いました。

『学び合い』について

『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、様々なサイトや書籍がありますのでぜひ一度ご覧ください。