あるくテック

「分かる」をつくりたい。

プログラミングの授業例 リンクを設定する

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

今回はWebサイト制作においてとても重要な機能である「リンク」を学習する授業についてです。

リンクとは

Webページ上の文字や画像をクリック、またはタップして、別のページに移動するための機能です。

これは、エクセルやワードなどで行う「ファイルを開く」という操作に該当します。「ファイル」→「開く」→「ファイル名入力」→「開く」といった一連の作業を、Webでは一回のクリックまたはタップで実現しているといえます。しかもWebの場合、全世界のファイルを開く、そして見ることができる訳です。

今のWebサイト、そしてインターネットの普及の立役者ともいうべきリンクは、現在のWeb制作においても欠かせない機能です。

 

授業概要

今回はプリントの概要を説明をします。以前に配布したプリントは、テキストを参照しながら行うものだったため、プリント単体で掲載しても分かりにくいのが理由です。

「リンクを理解する」 

Mission1)ページ間リンクとページ内リンクの違いが分かる。設定できる
確認方法 まとめの問題を説明することができる。

 

サーバにある実習用データを各自にコピーしてください。

 

作業内容
1)実習用データのindex.htmlについて、テキストを参考にページ間リンクとページ内リンクを設定する。

 

まとめの問題
1)リンクとはどのような仕組みですか

 

2)リンク2種類について設定方法を説明しましょう
・ページ間リンク(他のページへ移動する)

 

 

・ページ内リンク(同じページ内の別の場所へ移動する)

 

 

小学生から大人まで、ぜひ「リンク」で遊んでみて!

リンクは、簡単なHTMLプログラムの記述だけで、Webサイトの動きを作ることができるので、小学生から大人まで気軽に取り組めます。

たとえばこんな感じ。

  1. シンプルなHTMLファイルのテンプレートを準備しておく。
  2. ブラウザで好きなWebサイトを開き、URLアドレスをコピー。
  3. HTMLファイルをテキストエディタで開き、コピーしたURLアドレスを指定された箇所にペースト。
  4. ブラウザからHTMLファイルを開いて、動作確認!

応用編としてクリックやタップをしたら

  • 写真を見せる(リンク先を画像ファイルに)
  • Googleマップを使って案内したい場所へのリンクを埋め込む
  • スマホからアクセスした人にダイヤル発信してもらえるようにする(href属性の"tel:"を使う)

などもあるので、楽しいと思います。

プログラミング教育にも

今年4月から、小学校でプログラミング教育がいよいよスタートします。

Webページを作るには、「テキストエディタ」(Windowsならメモ帳でOK)と「ブラウザ」(Google ChromeやSafariなど)があれば、シンプルなものなら作れてしまうのもメリットです。

普段なんとなくスマホでタップして使っていたリンクを自分で作れた!という体験は、身近なものがプログラミング言語で制御されていることを体験を通して知る良い機会になると思います。

授業のながれ

授業は、課題の説明、活動、振り返りという流れで行います。活動の時間をできるだけ多く取るために、最初の教員からの課題の説明は必要最小限にとどめています。

プログラミングの授業では、よく自転車に乗れるかどうかに例えて活動の大切さを伝えていました。

「自転車の乗り方を人からどんなに上手に聞いたとしても、実際に自分で乗れるようになるためには自分で乗って練習しないといけない。」

活動の時間を通して、自分で作業や説明ができるようになることがゴールです。

『学び合い』について

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

 

arukutech.hatenablog.com

 

通信制大学で学ぶ - 社会人になってから学ぶ良さ

「年だから」という言葉をつい使っていませんか?

今回は一旦社会人になってから改めて大学で学ぶことの良さについて書いてみます。

実はまた編入していました。

2016年4月に通信制の大学に編入して2018年3月に無事に卒業したのですが。

2018年9月に再度編入して大学生(+社会人+家庭人)生活が再スタートしていました。(※2020年3月に卒業予定です。)

年を重ねたからこそのメリット

後がない(笑)

もう後がないといった状況は実はものすごい大きなパワーになります。なぜならあれこれ迷って立ち止まっている余裕などないからです。

やろうと決めたら、周りの目を気にしている暇などなく、記憶力の衰えもなんとか工夫してカバーする以外に方法はなく(笑)、自分の納得のためには全力でやり切るしか道は残されていません。

若い頃、将来も可能性もどこか漠然としていて、でも無限に広がっているようにも感じて、1つに選びきれなかったり集中しきれなかったりしたことはありませんか?

大人は違います。本当に良い意味で、後がないんです。これは強みだと思います。

 

老年期の課題(!?)

 目指す大人がいるというのは、誰にとってもとても幸せなことだと思います。そんな大人にいつかなれたらいいですね(遠い目)。

少し話が脱線します。教育学者のハヴィガーストは、老年期の課題を「統合か絶望」と唱えました。

自分の人生が意味のあるものだったと思えるかどうかで、老後の生活の受け止め方、幸福度が分かれるというわけです。

青年期の特徴と課題

ここで青年期の特徴と課題にも触れておきます。

今はなんでもスピードが早いです。流行も、技術の進歩も。そうなると順応性の高さで若い人は有利です。となると経済やメディアなどにおいて若い人をターゲットにしたものが締める割合が高くなります。その方が消費されるからです。

すると社会そして文化の中心が若者中心となり、かつては大人を気取ることがカッコいいとされた時代もあったと思いますが、若者も大人も若々しいことが一層良いこととされる風潮に傾きます。

それは若い人にとっての難しさにもなり得ると考えます。 例えば、あまりに「若さ」の価値が高いと、年を重ねることは若さを失うことになってしまうからです。自分の価値が将来どんどん減っていってしまうように思えるのですね。 将来若さが失われたら、今度は自分が若い人に立場を奪われるのではないか、という不安感をもつこともあるでしょう。長年熟練の技を鍛えるような職業ではそういったことは起こりにくいかもしれません。ただ若さも熟練も簡単に比較できることではなく、個人や職種にもよるでしょう。

あらためて、「大人になって学ぶこと」を考えてみる。

今後はAIやロボットの進歩も考えると、、、本当に先の見えにくい世の中ですね。

この際年齢に拘らず、いろいろな人、出来たら別の職業や別の年代の人に会うことはとても良いことだと思いませんか。通信制大学のスクーリング授業ではそういったことが一気に叶うのもメリットでした。

経験が増えれば増えるほど、より深く理解できることも増えていくはずです。(ヴィゴツキーの構成主義と照らし合わせて考えてみたいとことですが、それはまたいずれ)

実は大人になってから学ぶと、新しい知識に対して、より驚きを持って学んでいけることが多いのではないかと思います。

 

もしも目上の人に、または年を重ねる自分自身にどうしても夢を持てないときががあったら。そんな心配はないと思います。メガネをちょっと新しくする感覚で、これまでとは違う気分で生活を見つめ直してみませんか。私はとても楽しみです。

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

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

テーブルとは

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

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

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

Dreamweaverについて

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

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

授業概要

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

 

『学び合い』について

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

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

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

フォームとは

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

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

授業概要

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

パタン1

 

 パタン2

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

『学び合い』について

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

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

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

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

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

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

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

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

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

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

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

 

例えば、

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

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

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

授業概要

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

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

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

 

『学び合い』について

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

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