May 18, 2022 Making Websites in Computer Skills Class

 Hello everyone. This is Robert Songer, Associate Professor and Computer Skills teacher at Hakusanroku Campus. The weather has been getting warmer and we are starting fresh new classes at ICT—it must be spring! Since this is my first time writing for the Hakusanroku Journal, I would like to give a little introduction of myself and my classes.

 I specialize in computer programming and software engineering subjects in the Department of Science and Technology curriculum. Most of my classes are for the 4th and 5th year students at Kanazawa Campus where they learn things like the Python programming language, software development processes, managing databases, and computer graphics (CG) which is a new topic this year. Sadly, I do not teach at Hakusanroku Campus in the spring semester so I will miss out on enjoying the warm mountain weather and seeing the monkeys in the fields. My classes at Hakusanroku are the Computer Skills classes for 1st year and 2nd year students in the fall. That means I get to drive into the mountains on snowy roads for my early morning classes every week. But I don’t mind! As a native of Michigan State with its cold and snowy winters I am perfectly comfortable in snowy environments.

 In the 1^st year Computer Skills class, Professor Ohtsuka and I teach how to make web pages. We introduce the students to HTML, the language of the Worldwide Web. I like to say that the wonderful thing about the Web is that anybody can use the Web to learn about the Web. Even you reading this now in a browser can see the HTML source of this page. On a PC, you can right-click on the page and choose “view source” or “inspect”. Then the browser will show you all the source code that it uses to display the images, colors, and text that you see on the page. Of course, for a complicated page like this one, the source code will be equally complicated if not more!  
 
 In addition to HTML, the 1^st year students also learn about CSS which is a scripting language (a kind of simplified programming language) for describing the appearances of a web pages. While HTML defines the structure of the page, such as where to put headings and images, CSS describes the visual properties of elements on the page, such as what color the text should be and how big to make the images. When they working together, HTML and CSS can be quite powerful technologies with seemingly infinite possibilities for building and designing web pages.

 Every day in class, the students practice what they learn on their computers in the Computer Lab. We do hands-on activities on interactive websites designed for learning these web technologies. One of the websites we use is called Code.org (https://code.org) which has a lot of interactive lessons for individuals as well as entire classrooms to use in learning about computer technologies. The lessons show everything students need to see on screen at the same time. Instructions are at the top of the screen, an editor window for writing source code is at the bottom left, and a view window showing the result is at the bottom right. This is a much simpler way to learn compared to the way modern web developers create websites. Usually, a developer will need to use many different software programs at one time and continuously switch between windows while they work. I think the students can really appreciate having everything they need in one window by using Code.org instead.

 After spending most of the semester learning about web page design, the final project is a portfolio website. The students plan and build a website to show off the activities and projects that they do at ICT. They are free to choose what content and layout they want to use for the website while they decide how to express themselves through visual design. In the end, all the students upload their websites to a hosting service called GitHub Pages (https://pages.github.com/) for anybody to see.

  I am impressed to see the students’ creativity and ingenuity at organizing their original ideas on a page. You can see their websites, too! I have collected a couple links to student pages from 2021 to share with you here. Please check them out below and take a look at what the students themselves chose to share about their first year at ICT.

Lucas Kusamoto
https://luca-1011.github.io/Portofolio/index.html
Kan Kinoshita
https://kan-kinoshita.github.io/Portfolio/index.html

Robert Songer

　みなさん、こんにちは。准教授のロバート・ソンガーです。私は白山麓キャンパスではコンピュータスキルズを教えています。暖かくなってきて、国際高専では新学期が始まりました。つまり春ですね。初めて白山麓ジャーナルの記事を書くので、私自身と私が受け持つ授業について少し紹介したいと思います。

　私は国際理工学科のカリキュラムの中で、コンピュータプログラミングとソフトウェアエンジニアリングの分野を担当しています。ほとんどの授業は金沢キャンパスの４、５年生を対象としており、学生はプログラミング言語Pythonやソフトウェア開発、データベースの管理、今年度から新たに加わったコンピュータグラフィック（CG）を学びます。残念ながら、前学期は白山麓キャンパスで授業を受け持っていないので、山で暖かい気候を楽しんだり、野外で猿をみたりすることができません。白山麓キャンパスでの授業は、後学期に行われる１、２年生を対象としたコンピュータスキルズです。つまり、毎週早朝から始まる授業のために、雪道の山を車で運転することになります。でも気になりません！冬は寒く、雪の多いミシガン州出身の私は、雪のある環境でもまったく問題ありません。

　１年生のコンピュータスキルズの授業では、大塚教授と私でWebページの作り方を教えています。そこではWorldwide Webの言語であるHTMLを紹介しています。Webの素晴らしいところは、誰でもWebを使ってWebについて学ぶことができるということです。今、ブラウザでこれを読んでいるあなたも、このページのHTMLソースを見ることができます。パソコンでは、ページを右クリックして「ページのソースを表示」または「検証」を選びます。すると、このページの画像や色、文字を表示するために使っているソースコードをすべて表示してくれます。もちろん、このような複雑なページの場合、ソースコードも同じように複雑になります。

　1年生はHTMLに加えて、Webページのデザインを記述するためのスクリプト言語（簡易プログラミング言語の一種）であるCSSについても学習します。HTMLが見出しや画像の配置などページの構造を定義するのに対し、CSSは文字の色や画像の大きさなど、ページ上の要素の視覚的な特性のために記述します。それが連携する場合、HTMLとCSSを一緒に使うことで、Webページの構築やデザインに無限の可能性を秘めた強力な技術となるのです。

　学生たちは授業で学習したことを毎回コンピュータ室で実践しています。Web技術を学習するために作られたインタラクティブなWebサイトで、実践的な活動をします。私たちが使用しているWebサイトの１つであるCode.org（https://code.org）は、個人だけではなくクラス全体でコンピュータ技術について学べるインタラクティブなレッスンがたくさんあります。このサイトでは、必要な情報すべてを画面上で同時に見ることができます。画面上部には指示、左下にはソースコードを書くためのエディターウィンドウ、右下には結果を示すビューウィンドウが表示されます。これは、Web開発者がWebサイトを作成する方法と比べると、かなりシンプルに学習することができます。通常、開発者は一度にたくさんのソフトを使い、ウィンドウを切り替えながら作業をする必要があります。学生は、代わりにCode.orgを使うことで、必要な情報すべてを1つのウィンドウに表示することができ、作業がやりやすくなると思います。

　後学期の大半を費やしてWebページのデザインについて学んだ後、最終プロジェクトとしてポートフォリオサイトを作成します。学生たちは国際高専で行っている活動やプロジェクトを紹介するWebサイトを企画・構築します。どのようなコンテンツやレイアウトにするか、またビジュアルデザインでどのように自分を表現するかなど、自由に選択することができます。最終的には、GitHub Pages（https://pages.github.com/）というホスティングサービスにアップロードし、誰でも見ることができるようにします。

　独創的なアイデアを1つのWEBサイトにまとめる学生たちの創造性や創意工夫に感心しています。2021年度、一部の学生が制作したWebサイトを紹介しますので、以下のリンクから、国際高専で彼らが1年生の時に体験した出来事の中で一番伝えたかったことをぜひご覧ください。

草本 留嘉寿さん
https://luca-1011.github.io/Portofolio/index.html
木下 観さん
https://kan-kinoshita.github.io/Portfolio/index.html

ロバート・ソンガー