2014年11月5日水曜日

コンリテⅠはHTML+CSSスパルタ実践ですた

11月1日~3日の3日間、各日9時~12時45分(最終日は押したので13時くらい)まで、コンピューターリテラシーⅠのスクーリングでした。
参加人数はたぶん50人くらいかな。
PCを借りるときに、ぼくが一番最後に借りて55番のPCだったから、たぶんそんなもんだと思う。

だいたいの日程はこんな感じ。

1日目|コンピューターの仕組み
1日目|Windowsの使用と各種操作
2日目|Webキャンバスの説明
2日目|HTMLとCSSについて
2日目|課題の説明と課題制作
3日目|課題制作・提出・発表~講評

↑これ、課題で作ったウェブページのインデックスそのまんまですよ(笑)

1日目は初歩的なことをやりますた。
2日目は当初1日目にやるべきだったムサビ通信のWEBキャンバス(ネットフォーラムとか)の使い方講座と、後半はHTMLとCSSの説明。続いて課題制作。

課題が最低限「授業のまとめ」と「自己紹介」の2ページを作り、ページを相互リンクさせるというものでした。
課題で作ったWEBページをごく一部だけになりますけど、思ったり感じたことと交えて書きますですよ。
(※著作権、肖像権関係抵触しまくるので、あまり画像をお見せできませんが・・・)

ぼくは課題のWEBページを5ページ構成で作りました。

┠ index.html(トップページ=授業のまとめのプロローグ)
┠ day1.html(1日目のまとめ)
┠ day2.html(2日目のまとめ)
┠ day3.html(3日目のまとめ)
┠ profile.html(自己紹介)

index.htmlを「授業のまとめ」としなくてはならなくて、授業を完全に聞いてなかったぼくは、どこをポイントにまとめていいかわからず、すっごい困りますた(6 ̄  ̄)
そこで、トップページ(index.html)をプロローグにしますた。

見た目はこんな感じ。


HTMLはこんな感じ。


CSSは全ページ共通でこんな感じ。


HTMLはマークアップとテキストくらいなのでそんなに長くないけど、CSSはそれなりにレイアウトしたので177行と長くなってしまいました。
なので、3行に改行した画像になってます。

はっきり言って、ここまでやる必要、皆無です。
2日目終って夜な夜な自宅でポチポチ作ってたときは、この上なくダサいのができたと思いましたけど、終ってみれば、ダサいのでも十二分でございました。

ちなみにキャプチャは自宅のPCでかなりブラウザの幅を広げて撮ってます。
メインコンテンツ(上下のグレーとメインの白いところ)のサイズは900pxで作りましたけど、最後の講評でプロジェクターに移すときに700pxくらいまでしか表示しませんでした。
なので、ぼくみたいに作るなら幅をかなり狭く作ったほうがいいかもです。

背景の画像は1枚の画像が可変でブラウザサイズにフィットするようになってるんですね。
シラバスかなんかで「XHTML+CSS」って書いてあったけど、今回は「HTML5+CSS3」でってことだったので、部分的にCSS3で遊んでみたですよ。

ちなみにこれのCSS3のコードはこれ。

body {
background-image: url('背景画像の相対パス');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}

でも、これだと画像がHTMLファイルの長さによっても可変するんですよ。
本当はブラウザサイズのみによって可変するCSSを書きたかったんだけど、結局TAさんに相談してもうまくいきませんでした・・・(/ー ̄;)
相談したTAさんは普段からWEBのお仕事をされているとのこと。
WEBのプロに聞いてダメならぼくなんかプロとは恐ろしくていえないレベルなので、ぼくのチカラぢゃダメだって、諦めました。

ブラウザサイズのみに対して可変する背景画像の配置。
やり方ご存知の方、ぜひぜひコメントまたはご連絡ください!
ネットで調べまくりましたが、ダメでした(/ー ̄;)


話を戻して・・・

コンリテⅠ、パソコンなんかほとんど触ったことない人には、ちょっとキツイかなって思いました。
ひとり、3日目に来なかった人(挫折者)が出ました。
その方と1日目、2日目にお話した方の話では、自宅でインターネットで調べ物をしたり、メールをするくらいパソコンを使っていたそうです。
それくらいパソコンに馴染んでいる方でも、HTML+CSSの壁は高かったのでしょう。
その方は残念ながら3日目にお姿を拝見することはありませんでした。

先生と少し、お話をしました。
「なんでHTML+CSSなんですか?」ってききました。
そしたら、こんなことをおっしゃってました。

「今はパソコンもタブレットもスマホも、WEBありきになっている現在、コンピューターにWEBは不可欠で、それを理解するにはこれが最良だと思ってやっている。
けれど、もしこのWEBとコンピューターの関係を理解するのにもっといい材料があればいいんだけど、今は他に思い当たらないからHTMLとCSSでWEBページを作るという過程で理解してもらえたらいいな~」
※すごくぼくの脳内で脳内変換しております。

ようするに、先生は、WEBページが基本的にHTMLとCSSを使って作られていて、それらがどのように作られていて、どんなタグがどんな現象を起こすのかを理解することによって、インターネットの基本を理解させようと思いましたですよ。

最後にコンリテ受けた身として思ったことを・・・あ、あくまでも憶測ですけど・・・

HTMLとかわけわからない方。
  • Windows環境で文字が打てる(書ける)
  • デスクトップ、フォルダ、ファイルの意味がわかる
  • 半角と全角の区別がつく
  • 事前に独学で「HTML」と「CSS」が何なのか、漠然とでもイメージできるところまで予習できる
  • ブラウザ、フォント、色(RGBとウェブカラー)が何なのかがわかる
  • 右クリックが使える
これくらいのスキルをもって挑んでおいたほうがいいかな、と思いました。
プラス、スクで制作をするときは・・・
  • リンクのところでマウスをオンする前と後の色に注意しましょう。淡い背景で濃い色の文字のリンクにマウスオンして、文字が白くなると、背景に文字が埋もれます。
    色について、注意しましょう
  • コンテンツ(内容)をまとめましょう。まとめ方は「見出し+画像+本文」とか「見出し+本文」とかあると思います。リンクはリンク、段落は段落。新聞を作るようにまとめましょう
  • リンクに注意してください。必ず相対パスで記述しましょう。絶対パスと相対パスの概念がわからないと、リンクが切れていて残念なことになります
  • 自己紹介は、名前くらいは書きましょう。スクーリングに参加した人と先生しか見ないの前提で作るWEBページなので、名前くらいはあったほうがいいみたいな雰囲気ですた。
  • リンクは、戻る、だけではなく、どこへ戻るかわかるように表記しましょう。
    たんに 戻る とするのではなく ←授業のまとめへ戻る とか←トップページへ戻る など、それをクリックしたらどこに戻るのかがわかるように表記しましょう
  • 作ったページのどのページからも作ったページすべてに移動できるようにリンクを作りましょう。ちなみにぼくはメニューバーを作ることで、どのページからも全ページにいけるようにしましたですよ


    これはDAY1(1日目)のページのメニュー。今1日目にいて、そこから全ページへいけることがわかると思うです。
    何気に「タグを正しく使えていればOK」といいつつ、こういう細かいところも講評で気にされてましたですよ。
ウェブのプロの方へ
  • ぼくが作ったのはたぶんやりすぎです
  • サンプルで提供されたタグは全て使わなくていいそうです
  • 適正にタグの意味を反映することが重要
  • コンテンツは内容の充実より、内容をどうまとめて、まとめたことをどう反映するかが重要。
  • JSとかCSS3とか何してもいいけれど、コンテンツ内容を伝えるためであればいいが、コンテンツ内容に関係なく、単なる装飾であれば評価はしない
  • 逆に単なる装飾がコードを汚したらマイナス評価(すなわち使わないにこしたこたーない)

そんなこんなで、なんとか終りました。
不合格はないでしょうけど、やりすぎた感が否めず、コンピューターのリテラシーを学んだ実感もなく、単位稼ぎしちゃった感満載のスクーリングでございました。チャンチャン(/_ _ )/♪

10 件のコメント :

  1. お疲れさまでございました〜。

    さすがにシステム系の科目をとっておられるので、楽勝のようでしたね。
    私のようにちゃちな作品でも80点とれたのですから、sizuさんは90点以上はいくのではないでしょうか?
    確かにプログラムにさわったことの無い人や文化系の人には厳しいスクだったかも知れませんね。私のように面倒くさい事が苦手な人間にもキツイかったです(笑;

    先生の意図も分りますが、やっぱり私としてはHPビルダーとかDreamweaverなんかの操作方法を習った方が現実的なような気がします。システム系の人は別としてですが・・・。

    お仕事も忙しい折におつかれさまでした〜

    返信削除
    返信
    1. ぼくのは無意味な装飾や遊びもあって、イガイと点数はいかないと思うですよ。
      先生に「なんでアプリケーション使っちゃダメなんですか?」って聞いたら、コンピューターはコードの塊みたいなもんだから、コードによって表示させたり動かしたりする指示をしていることを理解してほしいみたいなことを言っていました。
      WEBページを作ることではなく、コードとはどのようなものなのかを理解してほしかったみたいでございますですよ。

      ってか、ぜんぜんシステム系ぢゃないんですよ。
      もう、情報システム関連は脳みそブシャー:;:;:.,*+で、やっぱりコミュデしか道がないのかと日々悶々としております(笑)

      次、マルチメディア基礎ですね。
      お会いできるの、ちょー楽しみにしていますーヽ(*⌒∇⌒*)ノ

      削除
  2. 聞くところによると、sizuさんはムサビでは有名人だとか・・何の?
    私はいたって平凡な人間ですので有名人に会えるとはこちらこそ楽しみにしておりますよー!!

    返信削除
    返信
    1. Σ(- -ノ)ノ エェ!? ぼく、有名人なんですかっ???
      初耳です~
      きっと座学でいつも居眠りしてる人とか、そんなところでしょうかね・・・(笑)

      削除
  3. コンリテⅠお疲れさまでした。
    制作内容がずいぶん変わったみたいですね。
    僕のときは、好きなテーマのWEBページ(5ページ程度)だったけど…

    Illstratorやphotoshop使うのに、コードがまったく必要ないように
    WEB制作もブラックボックス化が進むと信じている僕としては、
    ガッチリ覚える気はさらさらありあませんが、
    コンピューター=コードっていうのはどうなんでしょうね…

    21日からは、マルチメディア基礎ですか。
    これも僕のときとは、カリキュラムも講師も変わったので
    内容はわかりませんが、がんばってください!

    では、では。

    返信削除
    返信
    1. すがPAPAセンパイ、コメントありがとうございます!
      スクーリングの内容って、先生が変わらなくても内容が変わるものなんですね。

      コンピューターを理解することとタグを手打ちすることが、どうにも脳みその中で繋がらないんですよね・・・
      コミュデとかですとWEBページにまとめての課題提出っていうのもあるわけですし、システムでもプレゼンをWEBで作成してブラウザベースで表示することもあるわけなんで、いっそのことデザ情行く人向けに「いっそのことWEB制作基礎」とかにしてしまったほうがいい気がしますた。。。

      マルチメディア基礎もだいぶかわったみたいですね。
      今回はDTPとかWEBとかの選択もなかったので、全員同じことをやるのでしょうか?
      いずれにしても、楽しみです!がんばりまっすヽ(ΦωΦ*)ノ

      削除
  4. お疲れ様でした。建前上はマル基やコンリテの知識があった前提での情報システム基礎1なので、問題なかったでしょう。
    そう、コードの理解は大切よ!

    返信削除
    返信
    1. コードの理解は大切!・・・なんだけど、今の時代におけるコンピューターリテラシー(「コンピューターを使いこなす能力(『電脳の教室P8』)」においては、必須アプリケーションの基本操作とかのほうが時代に即してると思うですよ。
      DOS-Vの時代ならいいかもしれんけどね・・・うほほ。

      削除
  5. はじめまして。
    10月29、30日とコンリテⅠを受講してきました。
    私は分からない側の人で、こちらのブログを参考に挑みました!
    札幌からPC担いでいくのは…でしたが、やはり授業内で消化できなく、ホテルに戻ってからも進めました。といっても最低ラインを自分なりに、ですが。
    無事、提出できました。助かりました。
    特に、分からない側の人がどのぐらい理解できているといいかを示していただけたのがよかったです。
    ありがとうございました。

    返信削除
    返信
    1. まるなさん、こん〇〇は!コメントありがとうです!
      ぼく、コンリテの隣の教室でスクーリングやってたんですよ。
      先生のマイクの声をBGMのように聴きながら作業してましたw
      で、廊下なんかですれ違うコンリテⅠ出てる人の顔がほとんど死んでて「ぼくのときと同じだなぁ~」と思ってみてましたw

      役にたったとのこと、よかったです。
      基本的にあんまり役にたつようなこと書いてないブログですけど、今後ともよろしくお願いします(´▽`)

      削除