2018 – #1

2018 – #1 – メディアデザイン実習J

 

Web制作に関わる技術の概要

 

ハック/デザイナ/PG/html/js/文法
※古い資料なので適宜読み飛ばします

 

クライアントサイド vs サーバーサイド

 

人間のWeb利用 vs プログラムのweb利用(Web API)

 

コーディング環境

 

エディタについて
エディタは最近では、Atom、Bracket、SublimeTextなどがよく使われます。
Mac標準の「テキストエディット」や、Windows標準の「メモ帳」は使用すると痛い目にあいます。
またこの授業ではDreamWeaverはサポートしません。
DreamWeaverは本当の初心者にはいいのかもしれませんが、ソフトを使うことの意味が大きすぎて、ソフトに使われるような融通の効かない制作スタイルになってしまいます。誰でも使えるように作られた高額なソフトの使い方を勉強することは、スキルとは言えません。

 

Boilerplateについて

 

ブラウザについて
ウェブには標準の技術仕様というのがいろいろあります。RFCとかW3Cとか。
ブラウザは、仕様に合わせながら、それぞれ異なる企業が実装したソフトに過ぎないので大小さまざまな違いがあります。
CSSやJavaScriptのコードの解釈そのものが違ったりもします。つまり、このブラウザでは動くのに、こっちでは動かない!ということがあります。かつてほどではありませんが、ブラウザの互換性の問題を甘く見てはいけません。
「Google Chrome」は、もっとも標準的で、処理速度も速く、最新の仕様に対するアップデートも早いブラウザです。
まずは、Chromeを標準のブラウザとみなしてChromeで確認しながら制作し、そのあとでSafariやFirefoxで動作確認して修正する、という手順が最も効率的です。

 

さて、みなさんそれぞれウェブ制作のスキルにばらつきがあると思います。
まずは、HTML/CSS/Javascriptによる比較的簡単なサンプルを確認しましょう。
それぞれ、自分一人で作ることが出来るかどうか、考えてみてください。

  1. ボタンがクリックされたらオブジェクトが右に移動する
  2. ボタンがクリックされたら背景が変わる
  3. ページ切り替えの際にカーテンのようなアニメーション
  4. JSとHTML5による ルパン三世タイトルコール
  5. iTunesからジャケット画像を取得して表示

みなさんの多くにとって、いきなり上記デモのようなものを自分でゼロから作るのは、少し難しいかもしれません。
制作にあたって、まずはJavaScriptの基礎について抑えておく必要があります。

このなかで、「オブジェクト」というのが少しわかりにくかったのではと思います。
オブジェクトを理解するためにも、コードの「写経」をしてみましょう。

HML/CSS/jQueryのおさらい

「写経 syakyo」・・・すでに存在するコードをそのまま書き写すこと。プログラマーの間でしばしば用いられるスラングのようなもの。

おさらいも兼ねて、以下のサンプルコードを、自力で打っていってみてください。

コピペしても何の意味ないですからねー。
プログラマーやコーダーは、一時間あたり何行書けるか(生産性)を求められる、アスリートのような職業でもあります。
早く書ければ、それだけ多く間違ってもいい時間の余裕ができます。
早く書ければ、それだけ面白いものを次々作っていけます。

 

この「写経」の目的は、いくつかあります。
まずはJavaScriptのプログラミング(コーディング)に、形から入って、慣れてもらうこと。
そして、バグ(書き間違い・考え違い)とデバッグ(修正)を経験してもらうこと。
まだコードの意味はわからなくても構いません。

 

もうひとつのポイントは「JavaScriptコンソール」(Chrome)※の使用です。
Chrome Windows:[ツール] – [JavaScript コンソール] を選択する (参考サイト
Chrome MacOSX:[その他のツール] – [JavaScript コンソール] を選択する
 もしくは、共通:ページのどこかで[右クリック] – [要素を検証] – [Console]
 
※この「コンソール」は、どのモダンブラウザにも同じようなものが用意されています。
Safariの場合 ・IEの場合 ・Firefoxの場合
もともともは2009年ごろに誕生したFirefoxの「FireBug」というプラグインだったのですが、あまりにも便利なため、あっという間に全ブラウザで標準搭載されるようになりました。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です