2012年8月18日(土)MICS「Webの匠の会」を開催しました。
先回に続いて、「資料6: Javascript を使った表示例」についての学習を実施した。
1.js-s4.html の学習:写真のスライドショー
http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s4.html
2.js-s5.htmlの学習:フレームの操作
http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s5.html
⇒選択ごとに表示を変える
⇒データを入力するとそれに対応した回答を出力する。
⇒主画面の更新
3.js-s6.html:ウィンドウの操作
http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s5.html
⇒指定した大きさで開くことができます。
JavaScriptを使用すると利用者とのインタラクティブなページが作成できます。
クライアント側でのプログラミング処理ですがPerlやPHPなどでのサーバ側での
プログラム処理との使い分け、動きのあるページの作成ではFlashなどとの
使い分けなども考える必要がありそうです。
HTML/CSSの学習から徐々に進めていますが、更に奥が深そうな世界です。
Webページで表現するコンテンツをどの様に表現するかは、Web技術の理解
に依存する部分も大きそうです。
そして、実際に実現できるまでには、さらなる努力を要する様です。
横浜市緑区にあるNPO法人MICSの有志がホームページを中心としたWebページの学習・研究を行う会のブログです。人生経験の豊富なメンバーが揃っています。メンバーの作成した淡彩画です。
2012年8月23日木曜日
2012年8月9日木曜日
第16回「Webの匠の会」を開催
第16回「Webの匠の会」を2012年8月4日に開催しました。
会を重ねるに従い参加者の学習も進んでいるようです。
1.参加者と庄司さんとの質疑応答の対応
「歩 ディサービスセンター」のページ を作成に当たって質疑応答を実施
・<br clear="left"> と <p style="clear:left">のどちらを使うか?
⇒どちらでも良い。
・テーブルでのboderの指定は、
⇒テーブルにクラスを指定して、更にクラスにプラ+tr,tdを記述する。
などの質疑を実施した。
ホームページ作成では、テーブルの利用が有効ですが、質疑が良くわからない所も
あり再度、自分でも実施してみました。皆さんも機会があれば復習時に参照下さい。
「Webの匠の会」の「Tableの利用学習」を参照下さい。
2.JavaScriptの学習:画像の切り替えの学習
・js-s2.html:JavaScriptでの画面の切り替え例
・js-s2.htmlを作成するコーデイング:
http://home.e02.itscom.net/shouji/raku/kouza/doc/doc-6.html#n2
・Q&A(写真の説明をクリックすると説明文を表示例は?)
⇒MICSのホームページ例を紹介⇒課題で検討
・スライドショー:js-s3.html
説明のテキスト
・タイマーの利用
setTimeoutとsetIntervalの違いについて
上記の説明を受けての学習成果として、写真の表示と説明分を連動したページを作成しました。
小さなサムネール写真のタイトルをみてクリックすると拡大写真とその説明が出る方式に挑戦しましたが、まだまだ未完成です。
写真の拡大表示時と説明文、スライドショーの学習
しかし、なかなかJavaScriptも奥が深く、これからも継続が必要ですね!
会を重ねるに従い参加者の学習も進んでいるようです。
1.参加者と庄司さんとの質疑応答の対応
「歩 ディサービスセンター」のページ を作成に当たって質疑応答を実施
・<br clear="left"> と <p style="clear:left">のどちらを使うか?
⇒どちらでも良い。
・テーブルでのboderの指定は、
⇒テーブルにクラスを指定して、更にクラスにプラ+tr,tdを記述する。
などの質疑を実施した。
ホームページ作成では、テーブルの利用が有効ですが、質疑が良くわからない所も
あり再度、自分でも実施してみました。皆さんも機会があれば復習時に参照下さい。
「Webの匠の会」の「Tableの利用学習」を参照下さい。
2.JavaScriptの学習:画像の切り替えの学習
・js-s2.html:JavaScriptでの画面の切り替え例
・js-s2.htmlを作成するコーデイング:
http://home.e02.itscom.net/shouji/raku/kouza/doc/doc-6.html#n2
・Q&A(写真の説明をクリックすると説明文を表示例は?)
⇒MICSのホームページ例を紹介⇒課題で検討
・スライドショー:js-s3.html
説明のテキスト
・タイマーの利用
setTimeoutとsetIntervalの違いについて
上記の説明を受けての学習成果として、写真の表示と説明分を連動したページを作成しました。
小さなサムネール写真のタイトルをみてクリックすると拡大写真とその説明が出る方式に挑戦しましたが、まだまだ未完成です。
写真の拡大表示時と説明文、スライドショーの学習
しかし、なかなかJavaScriptも奥が深く、これからも継続が必要ですね!
登録:
投稿 (Atom)