「Webの匠の会」

2012年8月23日木曜日

第１７回「Webの匠の会」を開催

２０１２年８月１８日（土）MICS「Webの匠の会」を開催しました。

先回に続いて、「資料６：　Javascript を使った表示例」についての学習を実施した。

１．js-s4.html の学習：写真のスライドショー
　　　　　　
　　　　http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s4.html

　　　　　　　　　　　　　　　　
　　　　　　　　
２．js-s5.htmlの学習：フレームの操作
http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s5.html

　　　⇒選択ごとに表示を変える
　　　⇒データを入力するとそれに対応した回答を出力する。
　　　⇒主画面の更新

３．js-s6.html：ウィンドウの操作
http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s5.html
　　　⇒指定した大きさで開くことができます。

JavaScriptを使用すると利用者とのインタラクティブなページが作成できます。
クライアント側でのプログラミング処理ですがPerlやPHPなどでのサーバ側での
プログラム処理との使い分け、動きのあるページの作成ではFlashなどとの
使い分けなども考える必要がありそうです。

HTML/CSSの学習から徐々に進めていますが、更に奥が深そうな世界です。
Webページで表現するコンテンツをどの様に表現するかは、Web技術の理解
に依存する部分も大きそうです。

そして、実際に実現できるまでには、さらなる努力を要する様です。

2012年8月9日木曜日

第１６回「Webの匠の会」を開催

第１６回「Webの匠の会」を２０１２年８月４日に開催しました。

　会を重ねるに従い参加者の学習も進んでいるようです。

　
１．参加者と庄司さんとの質疑応答の対応
　　「歩　ディサービスセンター」のページ　を作成に当たって質疑応答を実施

　
　　・<br clear="left"> と　<p style="clear:left">のどちらを使うか？
　　　⇒どちらでも良い。

　　・テーブルでのboderの指定は、
　　　⇒テーブルにクラスを指定して、更にクラスにプラ＋tr,tdを記述する。

　　などの質疑を実施した。

　　
　ホームページ作成では、テーブルの利用が有効ですが、質疑が良くわからない所も
あり再度、自分でも実施してみました。皆さんも機会があれば復習時に参照下さい。

　　　「Webの匠の会」の「Tableの利用学習」を参照下さい。

２．JavaScriptの学習：画像の切り替えの学習

　
　・ｊs-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も奥が深く、これからも継続が必要ですね！

2012年7月23日月曜日

第１５回「Webの匠の会」を開催

今回は、盆踊り大会など自治会での夏のイベント支援もあり、欠席者もあり、出席者からの質疑応答を実施しました。

１．参加者からの質疑応答
・テーブルのデザインを変える。
http://home.j07.itscom.net/sansaro/natu/saijikinatu.html
・テーブルの間にダミーのテーブルを設ける
・heightで高さを指定して、テーブル間の間を空ける
    ・スペース文字を入れる。 
・PCの画面サイズにより、画面表示が変わる。
<div>・・・・</div>
      ・960ピクセル
・数字の縦書き表示の変更
・英数小文字から漢字の数字に変更する。
http://home.j07.itscom.net/sansaro/ayumi/ayumi.html
・テーブルの破線の表示
テーブルのclass定義を設定する。
<table border=71' class="tb1">
   .tb1 {border-collapse: collapse;
         border:2px solid darkred;}
   .tb1 td {border:1px solid blue;}

庄司さんと質問者の応答ですが疑問点に対して、何も見ずに適切に回答できる記憶力に感心しました。Web技術を極めているのでしょう。

→Webページのデザインでは、見てもらう人に対して分かりやすく、見やすいページに改善するには色々な要素を考える必要があります。
Webページの作成技術力、見やすいデザインを作る感性、写真などの素材を加工するコンテンツの加工技術とデザイン力、そして、もっとも重要なのは、見て頂く人に分かり易い文章表現力です。１度作成したページを皆で見てもらい改善していくもの良いでしょう。

自分の趣味などをすすめていくと他の人にも伝えたい何かが自然と湧いてくるものです。自分が楽しかったこと、面白かったこと、苦労したこと、工夫したこと、色々な人や場所との出会いなど様々なことを伝えたい、共有したいことが出てくると思います。
その時に他の人にも見てもらい色々と工夫して表現するのが大切と感じました。
大切な家族、友人、仲間や遠く離れた見知らぬ人達にも伝えられるWebページができると良いですね！

2012年6月17日日曜日

第１3回「Ｗｅｂの匠の会」を開催

第１３回「Ｗｅｂの匠の会」を２０１２年６月１６日に開催

１．質疑応答の実施
　・Javascriptの事例を実施したがうまく動作しなかった。
　　　http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s1.html
　　　上記をコピーしての実施例の修正
　　　Javascriptの関数の作成位置を変更したら動作
functionの位置を<body></body>から<head></head>へ変更
　・写真の画像サイズの大きさを統一する
　　　小さい画像から拡大画像の大きさがバラバラになる現象
　・Javascriptの学習では、IEの設定の「スクリプトエラーごとに
　　通知を表示する」をオンにする。
　　「マイコンピュータでのファイルでのアクティブコンテンツの実行
　　　を許可する」

２．参加者のページの改善について
　　http://home.j07.itscom.net/sansaro/
　・マージ（ボーダーの外側）とパディング（ボーダーの中側）の違い
　　について
　・<table>タグの利用→不要な設定で変更
　・align="left"の設定についての解説（うかして、表示の回り込み）
　・&nbsp→ の設定誤りの修正
　・マージンの設定による表示の修正
　　<img>タグにstyle="float:left;margin-right:1em;"を追加
　・IEでの不要なスクロールバーの表示の対応
　　<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
　　でのTransitionalを削除する：IEの過去からの継承をやめる。
　・<body>への枠の色
　　padding:5px 10px 10px; boder:#ff9900 1px solid;
・cssでの複数タグへの同一設定について

３．他サイトの学習・解析について
　・「表示」→「ソース」にて、ソースを見る
　・「名前をつけて保存」にて、ソース、CSS、画像などを参照する。
　　　（一部をブラウザーにて解析

４．オートシェープサロンのページの検討
　オートシェープの会での作成成果を掲載するホームページを作成する。
　次回にページのイメージを作成し、本会で実現を検討する
　

2012年6月3日日曜日

第１２回「Ｗｅｂの匠の会」を開催

第１２回「Ｗｅｂの匠の会」を２０１２年６月２日に開催

１．参加者からの質疑応答
　　各自が作成したページに関する上手くできない点の質疑を実施
　　・テーブル設定（tr)の左寄せが有効にならない。
　　　　→同一ページのCSSでのセンター揃いでの指定との競合
　　・更新したページがすぐ反映されない。
　　　　→PCのローカルフォルダーでのキャッシュの問題
　　　　　作成者が練習用のサイトと本番サイトの２つを有している問題
　　・CSSの外部ファイル設定の指定（link)について　など

２．JavaScriptの関数の利用について
　　「資料５：　Javascript の基礎知識」項番12以降の学習
　　http://home.e02.itscom.net/shouji/raku/kouza/doc/doc-5.html#n12

３．資料６：　Javascript を使った表示例
　　http://home.e02.itscom.net/shouji/raku/kouza/doc/doc-6.html
　・小さな画像のサンプルから大きな画像を表示させる例
　・デジカメのサイズは、通常大きすぎるのパソコンの画面サイズに
　　予め調整する。
　（Photshop、ペイント、縮小専用、ホームビルダー（ウェブアートデザイナー）Windows Live ホトギャラリー）
　・例題：http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s1.html

４．例題２．画像のロールオーバー
　・例題：http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s2.html

５．画像のスライドショーの事例　など
　・例題：http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s4.html
　→タイマーの値を変えている（上限値、下限値など）

以上

2012年5月20日日曜日

第１１回「Ｗｅｂの匠の会」を開催

第１１回「Ｗｅｂの匠の会」を２０１２年５月１９日に開催

資料５：Javascriptの基礎知識の学習を実施

・//という記号以降、行末までがコメントとして扱われる。
・<script type="" >
</script>
が従来からの正しい表記ですが、
<script type="">-------
</script>
で現在は良い。
・外部ファイル化
・Javascriptの書き方（大文字、小文字の区別等）
・メソッドについて：長い文章の書き方
・Javascriptのデバッグについて
・オブジェクトについて：配列について
・プロパティについて
・イベントハンドラ―について
・Javascrpt疑似URL：Javascriptの関数を呼び出して実行する。
・変数について：数字と扱うか、文字として扱うかの解釈など
・配列について
・関数について
・変数、配列、関数の使い方の注意事項について

2012年5月5日土曜日

第１０回「Ｗｅｂの匠の会」を開催

第１０回「Webの匠の会」を2012年５月５日に開催

1.前回の開催にてTerapadを紹介など実施した。:Perlなどに利用する。　　　　　　　　　http://www.forest.impress.co.jp/lib/offc/document/txteditor/terapad.html
著者：寺尾　進氏のホームページ
http://www5f.biglobe.ne.jp/~t-susumu/

２．CSSの復習:http://home.e02.itscom.net/shouji/raku/kouza/doc/doc-3.html 　　
(1)特定のタグに設定する方式について　
(2)外部スタイルシートへの設定について　
(3)body:画面上の表示範囲（margin)を設定すると見やすくなる。　
(4)要素セレクタの利用：複数セレクタ、子孫セレクタ、子供セレクタ　
(5)クラススタイル（複数利用可）とIDスタイル（１箇所のみ利用可）について　
(6)疑似クラス：よく使われるのは、リンクに関する４種(linl,visited,hover,active) 　
(7)スタイルの継承（項１５）
(8) 親子関係などでのCSSの指定でのスタイルの宣言が重複したときの優先順位
（項16) 　
(9)表示、配置（項１６）：http://home.e02.itscom.net/shouji/raku/kouza/doc/doc-4.html 　(10)参加者のホームページの改善点の質疑　

以上

登録: 投稿 (Atom)