「Webの匠の会」: 2012

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)参加者のホームページの改善点の質疑　

以上

2012年4月9日月曜日

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

２０１２年４月７日（土）１０：００～１２：００に第８回の例会を開催しました。
　下記を庄司さんから説明をして頂きました。

1.IE9のの新機能の解説
　　http://home.e02.itscom.net/shouji/raku/kouza/ie9/index.html
・特に、設定しないとIEは最新版に自動更新されます。
・分離できるタブに関する説明
・ピンで固定されたサイトの作成：個別に良く使うサイトの利用に便利
・タスクバーにサイトを登録し、かつ、更に、ピンで固定したサイトを登録可能
・同様にメニューバーでも利用できる。
・タスクバー、メニューバー、スタートメニューに登録できる。
→サイトでコンテンツが豊富なものは、これを利用すると好きな所へジャンプが容易となる。

2.上記の固定サイト機能への対応方法（Webページでの実現方式）
　
　　http://home.e02.itscom.net/shouji/raku/kouza/ie9/doc-1.html
・ファビコン（Favicon, Favorite icon の略）の作成
・ファビコンを作成してくれるサイトを利用する。
　　http://tools.dynamicdrive.com/favicon/
・予め作成したい画像をローカル作成して、サイトにアップロードする。
　（gif形式で、キャンパス・ウェブアートデザイナー、Photoshopなど
　　で背景を透明にして作成する。）
・16X16、32X32、48X48の３種を合体したファビコンを１つ作成する。
　（ケースバイケースで自動選択して表示される）
・作成したファビコンをサイトからローカルフォルダーへダウンロードする。
・サイトの<head>～</head>の中に<link>タグを使用して記述する。
・IE９では、更に<meta>タグに静的ジャンプリストを設定することができる。

　有効性に比べてファビコンを知っている人がほとんどいない、適用している
ホームページが少ないことに驚きました。

3.HTML5サポートについて
http://home.e02.itscom.net/shouji/raku/kouza/ie9/doc-2.html

4.IE9の性能向上について
IE８から大分改善させている。
http://home.e02.itscom.net/shouji/raku/kouza/ie9/doc-2.html

　　時間切れで説明は、次回以降に継続

2012年3月18日日曜日

第７回「Wenの匠の会」開催

２０１２年３月１７日に第７回の「Webの匠の会」を開催
今回は、欠席者が多く、８名の参加者でした。
主に参加者者からの質問に対する検討が中心でした。
１．庄司さんからのメッセージ
・庄司さん作成の会のテキストのWord版の完成の紹介
・HTMLの標準化について：HTML５はまだ標準化の見通しは立っていない。
・HTMLでは、ブラウザ依存の内容があり、庄司さん作成のテキストの範囲の利用が良い。
２．主要な質疑
・ページ上にタグの記述が表示される：タグに”>”が入力漏れ
・その他の表示不良：終了タグの記述もれ
・Sift_jisコードにない文字をどのように記述するか？：墨東綺贉（濹）
・CSSでのPタグのインデント指定を一部のPタグについて、解除する方法：
一つだけであったので、PタグをDIVタグに変更した。
・外部スタイルシート、内部スタイルシード、要素内のスタイル設定の優先順位
についての説明
・同一ページを画面表示する時と印刷表示する時の設定を変える
@media screen と　@media print　にて実施する。
・コンテンツのアイコン等の作成は？
→ホーム・ページ・ビルダーのウェブアートデザイナーを利用している。
以上が概略の質疑です。

2012年3月3日土曜日

２０１２年３月３日の例会を実施

今回は先生役の匠が欠席の中での開催でした。
会員相互のWebページの学習・検討を実施。
・テーブル形式のセルの結合とテーブル内の文字の開始の表示位置の設定
（EXCELでのセルの設定について）
・テーブルのボーダーの表示・非表示による見え方の相違
・テーブルの幅のサイズと表示文字数・改行設定による表示に乱れの改善
・Webページの検索エンジン対応（SEO）について
・Webページのメインタイトルについて
などを相互に改善点などを検討・学習した。
http://micshp.web.fc2.com/nozawa/index.html
http://www.green.dti.ne.jp/mochida/
等について

2012年3月2日金曜日

横浜市緑区にあるNPO法人みどりITみどりＩＴコミュニティサポーターズ（ＭＩＣＳ：略称MICS）は、横浜市市民へのITサポートを目的活動しています。横浜市と連携してパソコン初心者を支援する「めだかの学校」（予約なしで受付のパソコンなんでも相談）（毎週；火・木・土曜日の午後に開催）、「めだか塾」（パソコンの入門講習）を行っています。さらに、横浜市や地域団体と連携して、「IT講習会」を定期的に開催しています。詳しくは、MICSホームページ：http://homepage3.nifty.com/Mics/　を参照下さい。

ここでは、長年MICSのホームページを担当したWebページ作りの匠や趣味でホームページを作成している会員の方々がおります。会員及び会員の推薦する希望者が集まり、「Webの匠の会」を立ち上げました。WebページをHTML/CSS、JavaScript、さらには、CGI（当面Perl)を使用して本格的に取り組む学習・研究集団です。といっても６０才代から７０才代の「人生の匠」の方々です。若い人も大歓迎です。各自、趣味も豊富で、各種コミュニティ活動にも参加しながらWebページ作りも挑戦しています。女性の方々が特に、活発に参加しています。

現在、一番若手の自分（もうすぐ６５才）が幹事役を務めています。ITシステムのベテランですが、Web作りは６０の手習いです。趣味の一つとして色々なWebページ作りに挑戦しながら支援しています。

http://micsweb.web.fc2.com/

そのような幹事役の自分が「Webの匠の会」の参加メンバーの取り組む姿をブログで紹介できればと考えています。

IT利用は、若い人は勿論、シニアにとっても趣味にコミュニティ活動に、さらには、家族・親族・友人のつながりに役立ちます。とりわけ、Webページは有効です、ホームページ、ブログ、SNSなど多様な仕掛けに挑戦してみたいと考えています。

シニア世代のWeb技術に疎い方々でもWebページを作成する姿を少しでもご紹介して、何か新しきことに挑戦する励みになればと考えます。

i2MICS(「Webの匠の会」幹事)

2012年2月18日土曜日

会の先生役が入門テキストを整備

２０１２年２月１８日の例会
「Webの匠の会」でWebページ作成の技術を指導して頂いている方が約８０ページのテキストを完成して、自身のWebページで公開して頂きました。大変な力作で、初心者が取り組む教材として最適です。感謝です。
PDF版とWebページ版があります。早速、プリントアウトして読んでいます。また、会の中で、適時説明を受けて学習しています。仲間と学ぶ、良き指導者につく、非常に良い環境に恵まれました。
このうち、HTMLの作成部分についての講義を終了しました。
また、参加者のホームページのレビューし、一部内容の見直しを検討しました。
若いころからの思い出を「三叉路」として随筆風に作成していますが、人生経験の深さと文章力を感じます。

これからもまだまだ先を長く、楽しみながら会が運営できればと考えています。

登録: 投稿 (Atom)