ゼミ2(2004)

後期

後期は「なるべくおき楽にウェブページを作成・更新するにはどうすればよいか」がテーマです。このテーマに関してまとめたものをドンドン公開してください。

HTMLの表組みを用いたレイアウト

HTMLの表組みを使ってウェブページのレイアウトをしてみます。 最近はレイアウトに CSS を使うのが主流ですが、 CSS に対応していないブラウザもあるため HTML だけでレイアウトを行う方法も良く使われています （Yahoo! などのページレイアウトでも使われています）。
今回はテキストエディタでウェブページのレイアウトを行います。 もともとウェブページを作るにはそれなりに手間がかかりますが、 さらにレイアウトも行うとなるとかなり面倒な話になってきます。 ここで経験する煩雑な作業を踏まえて、次回以降は CSS、PukiWiki・Blog、 ホームページビルダなどを使ってできるだけ楽にページの作成・更新を行う方法を 探っていくことにします。

• 配布資料は修正中です。
• ページのレイアウト（補足）

PukiWiki

PukiWiki はネット上のホワイトボードみたいなもので、 ブラウザから簡単に情報を書き込むことができます。 卒研や、何か一つのテーマをみんなで探求していくときに便利に使えそうです。 ちなみにこのページも PukiWiki システムで作成されています。

• PukiWikiの使い方
• PukiWiki を基にした SiteDev というのもあるようですね。

Blog

PukiWikiと同じように、blogもブラウザから簡単に情報が書き込めるシステムです。 PukiWikiとの大きな違いは個人の日記作成に特化していることでしょうか。

• blogの作り方

HTMLとCSSを用いたレイアウト

前々回に HTML の表組みだけでレイアウトを行いましたが、 大変に苦労したと思います。 今回は、HTML で表現していた装飾部を CSS を用いて表すことにします。 CSS はスタイルを指定するためのものですので、 HTMLだけで見栄えを指定するよりも簡潔になります。

• 配布資料
  css.pdf
• 参考文献
  • シーズ 著, [改訂第4版]HTMLポケットリファレンス, 技術評論社, 2003.
  • エ・ビスコム・テック・ラボ 著, スタイルシートスタンダードデザインガイド, 毎日コミュニケーションズ, 2004.
  • とほほのWWW入門

ツールの利用（ホームページビルダ）

ホームページビルダでは「どこでも配置モード」で 簡単にレイアウトができます。どれだけ簡単にできるのかを体験することにします。

• 配布資料
  HPbuilder.pdf
• 参考文献
  エクスメディア, 超図解わかりやすいホームページ入門ホームページ・ビルダーVersion8編, エクスメディア, 2004.

発表では「ロールオーバ機能」についてちょっとだけ説明がありました。 この伏線は今後の JavaScript の発表などでつながりそうですね。

ツールの利用（モジラコンポーザ）

モジラコンポーザ（ネットスケープコンポーザ）は いわゆる HTML エディタと呼ばれているもので、 ウェブページ作成の補助として使う場合に向いています。 とりあえずメモ帳などのテキストエディタで作成するよりは断然便利です。 ここでは、実際にモジラコンポーザを使って、 少しでも楽ができることを体験します。

• 配布資料
  composer.pdf

• 演習のための素材
  

JavaScript の利用

JavaScript はウェブの必修言語とも言われ、 さまざまなページで使われています。 ここではクライアントサイドプログラミングとサーバサイドプログラミングの 違いを学び、JavaScript の言語使用とさまざまな使用例を紹介します。

• 配布資料
  javascript.pdf
• ロールオーバのソース訂正
• http://page.freett.com/tadahp/FandQ/19991128.htm

自宅でウェブサーバを立てる

自分の家のパソコンをウェブサーバに仕立てて、 ドメインを取得して公開するまでを説明します。 意外に簡単にできます （もちろん、立てた後はセキュリティに十分な注意が必要です）。

• 配布資料
  wwwsetup.pdf

• リンク
  • AN HTTPD

Flashムービーの作成

Flash（フラッシュ）は Macromedia社が開発したアニメーション作成ソフトです。 作成したアニメーションは Web上で再生ができるようになっています。 Flash を使うと、音声やベクタ形式のグラフィック （もちろん、普通の画像も扱えます）を組み合わせてアニメーションや、 また、マウスやキーボードに反応するインタラクティブなものも作成できます。 今回は、Flash のアニメーション機能について説明し、 実際に簡単なアニメーションを作成することにします。

• 配布資料
  flash.pdf

• リンク
  • FLASH道場
  • FLASHパワーリファレンス

フリーソフト Liveswif を用いたFlashムービーの作成

Liveswif は Flash のアニメーションファイルが作成できるフリーソフトです。 Flash は有料ですが、Flash によって作成されるアニメーションファイル(swf)の 仕様は公開されているため、 Flash以外のソフトウェアでもFlashのファイルが作成できます。 今回は、Flash と見た目や使い勝手が良く似ているフリーソフト Liveswif について 説明し、実際に簡単なアニメーションを作成することにします

• 配布資料
  Liveswif.pdf
  • Liveswif
  • Liveswif日本語化パッチ

LifeWithPhotocinema を用いたムービーの作成

Life With PhotoCinema を使うと、 写真データをもとにして簡単なムービーを作成することができます。 Flash でも同じことは行えるのですが、 Life With PhotoCinema の場合にはカッコいいムービーが自動的に 作成され、とてもおき楽です。 今回は、デジカメで撮影した8枚程度の写真から実際にムービーを作成してみることに します。

• 配布資料
  photocinema.pdf