web研究会

Web 25回例会
ゴールデンウイーク気分も抜け切れない５月８日(土)1：30pm～小樽美術館研修室に於いてＷｅｂ研究会例会が行われました。今日の学習は、3月・4月例会で作成し、5月で背景画像も入れ完成したsample17.htmlをFFFTPでアップロードするでした。

今日の学習
①『練習site』の中のフォルダ( css・js・photo/17・img・images )に空のindex.htmlを入れる確認作業と、jsフォルダに( jquery.cycle.all.pack.js・ jquery-1.7.min.js・jquery-1.9.1min.js・lightbox.css・lightbox.min.js)を入れる確認作業を行いsample17.htmlとsample17.cssがアップロードできる状態を確認する。
②『練習site』で確認したフォルダと、sample17.htmlとsample17.cssを、『Webken-〇〇』にコピーペーストする。
③FFFTPを開き接続。sample17.htmlとsample17.cssと追加されたjsや、画像を選択し転送します。(jsはsample17で追加した.jsのみ)・photo/17(17フォルダの画像)です。
④サーバー側に転送されたことを確認し切断します。

転送も上手くいき、４pm例会を終了しました。今日の出席者は１３名でした。
投稿者
みぞいゆき
投稿日
2015/05/11(Mon) 01:43
No.
95

続 Web研究会 25回例会

ファイルをアップロードする準備をしましょう

投稿者
みぞいゆき
投稿日
2015/05/11(Mon) 22:34
No.
96

続 Web研究会 25回例会

アップロードする自分のページやファイルについて、再確認する。・・・・①

投稿者
みぞいゆき
投稿日
2015/05/11(Mon) 22:38
No.
97

続 Web 25回例会

確認作業・・・②

投稿者
みぞいゆき
投稿日
2015/05/11(Mon) 22:40
No.
98

Ｗｅｂ研究会 第24回例会
巷では、統一地方選もラストスパート、明日からはまた日常が戻ってきます。今年は寒の戻りもあったものの桜の開花は早めとか報じられます。
４月11日(土)1：30pmより生涯学習センターレピオにて、Ｗｅｂ研究会の27年度が始動しました。あいさつで久原部長さんより今年度の抱負にも触れられました。また２６年度会計報告の後学習に入りました。

今日の学習
①ヘッダー画像をスライドさせる方法に、例としてcycleSlider(サイクルスライダー)・FlexSlider(フレックス)・NiboSlider(ニーボ)の３パターンが紹介されました。今月はcycleSliderを３月迄に作ったページにとり入れます。
②cycleSlider編では、3月迄に学習したsample17.temp.htmlに追加記述をしていきます。記述で.htmlに２ツのjavscriptを、cycleSliderの画像の動き方などを決めるjavscriptを追加しました。
③cycle Slideするあらかじめ用意してきた画像をtopimageとして入れて下さい。　
④.cssでcycleSlideの追加のcssを記述してください。
⑤bodyに背景画像を入れました。詳しくは『Ｗｅｂ研究会2015.04.11』のテキスト１ページ～２ページ目を参照してください。

５月例会の予定は背景画像も入れたら完成と成りますので、Ｗｅｂにアップの予定です。今日の学習は午后４時まで熱心に進められました。参加者は１２名でした。
投稿者
みぞいゆき
投稿日
2015/04/12(Sun) 00:21
No.
94

Ｗｅｂ研究会　第２３回例会
暴風雪の影響で交通網が乱れ、ＪＲ札樽間も長雨の為線路上に
崩落などあり不通になるなどもありましたが天候も回復、ＪＲ
も１４日は回復しホッとした処です。今日は皆さん早めに研修
室に入りました。

今日の学習
①今日の配布のフォルダ(2015.03.14)をＭｙsite内の資料倉庫
フォルダに入れる。
a.フォルダ2015.03.14の中には4個のフォルダ(js・images・
　css・photo)と４個のファイル-(sample17.temp.css ・
　sample17.temp.html ・ キャプション.txt ・メインコンテ
　ンツ.txt)がある。

b.フォルダphoto内には-(フォルダ17) がある。
　このフォルダ17 に 宿題で用意してきた画像(指定されたサ
イズ)を入れます。

②"topimage"に画像を入れます
<div class="topimage"><img src="photo/17/〇〇〇.jpg"
alt="">

③画像上に表示される"topimagecaption"を入れます。
<div class="topimagecaption">
　　　　　　　　↓
　　<span>〇〇〇短い文章〇〇〇</span>
　　<span>〇〇〇短い文章〇〇〇</span></div>

④(sample17.temp.css)にcssを追加し"topimagecaption"が
　適用されるようにする。方法は以下です。
　※今日の配布のフォルダ(2015.03.14)の中にある(キャプシ
　ョン.txt)を開くと/* topimagecaption--*/がある。の中の
　(13行目 ～ 38行目の ｝迄)を選択し、コピーしたら
　(sample17.temp.css)に戻り
　/* 　ナビゲーション----------*/の上の行に、貼り付ける。
　※文字の色や大きさを変えたい・captionの右配置を変えた
　いときなどはＣＳＳスタイルで.topimagecaptionを右クリ
　ック→スタイルの変更でそれぞれ色の選択・配置で数値な
　ど入れて変更します。

⑤文章の途中に『lightbox』に画像を入れました。
　<div id="main">の<section>に<h2>見出し２</h2>がありま
　す。この下の
　<p class="clearfix">ああああ<spanclass="alignright">
　<a href="◎◎◎.jpg" data-light box="samp"><img src=
　"〇〇〇.jpg"></a></span>ああああ</p>
</section></div><!--/main-->
　※"◎◎◎.jpg"は大きい画像を"〇〇〇.jpg"は小さい画像
　を入れます。

⑥メインコンテンツにlightbox(画像を拡大表示)を表示させ
　るための準備をします。
　フォルダ(2015.03.14)内の『メインコンテンツ.txt』を開
　き、以下を選択しコピーします。
　<link href="js/lightbox.css" rel="stylesheet"
type="text/css" />
　<script src="js/jquery-1.9.1.min.js" type="text/
javascript"></script>
　<script src="js/lightbox.min.js" type="text/
javascript"></script>

　(.html)の<head> ～ </head>の中に貼り付けます。貼り付
　ける場所は"css/base.css"の下にscriptは
　<link href="sample17.temp.css" rel="stylesheet">の下
　に貼り付けます。　

　　　↓(下記のようになる)

　<head>
　<meta charset="utf-8">
　<title>タイトル</title>
　<link href="css/base.css" rel="stylesheet">
　<link href="js/lightbox.css" rel="stylesheet" type=
　"text/css" />

　<link href="sample17.temp.css" rel="stylesheet">
　<script src="js/jquery-1.9.1.min.js" type="text/
　javascript"></script>
　<script src="js/lightbox.min.js" type="text/
　javascript"></script>
　</head>

⑦フッターをbodyの幅にします(htmlとｃｓｓファイル)
　に下記のように追加します
a.( htmlで)
<div class="footer-wrapper">
　</div>
b.(cssで)
.footer-wrapper {
width: 1024px;
margin: 0px auto 0px auto;
}

⑧<div id="sub"><aside><section>
<h2>サブ部見出し２</h2>について・ほかは２月例会
に於いて学習済み

★３/１４(土)1：３０pm～４：２０pm美術館に於いて行
われました。今日の学習は主に『 lightbox 』につい
て詳しく学習しました。

　いつもながらとても懇切丁寧に作成された久原部長さ
んのテキストです。時間を掛けましたので皆さんは
　プレビュー画面では『 lightbox 』が正しく表示され
　たようです。
※スライドする画像は翌月に詳しくする予定、ページの
　完成は翌月以降の予定になります。楽しみですね！

　出席者は１３名でした。
投稿者
みぞいゆき
投稿日
2015/03/16(Mon) 00:28
No.
89

続 Ｗｅｂ研究会　第２３回例会


学習風景　1　　さぁー　始めよう！

投稿者
みぞいゆき
投稿日
2015/03/17(Tue) 01:40
No.
90

続 Ｗｅｂ研究会　第２３回例会


学習風景　2　テキストを頼りに

投稿者
みぞいゆき
投稿日
2015/03/17(Tue) 01:41
No.
91

続 Ｗｅｂ研究会　第２３回例会


学習風景　3

投稿者
みぞいゆき
投稿日
2015/03/17(Tue) 01:45
No.
92

続 Ｗｅｂ研究会　第２３回例会


学習風景　4

投稿者
みぞいゆき
投稿日
2015/03/17(Tue) 01:46
No.
93

Ｗｅｂ研究会　第２２回例会
雪明かりの路も始まった2月7日、Ｗｅｂ研究会2月例会は世話役の私達が、いつもご支援戴いております高木秀二さまをお招きし『Web』研究会の学習の様子をご覧戴くと共に、講演をお願い致しました。

==================
≪高木秀二様の講演≫
「ホームページ作りは」
・良い見本に出会うこと
・規約にに従っている
・易しいこと
・美しいこと

「HTML5」で「HTML5」の技術がアプリの開発や利用の土台に成っていて、その技術を利用するには世界共通の使用、共通の言語、共通のインターフェイスが必要であることです。
「HTML5」の技術は、単にホームページを作るだけのものではなく、パソコン・タブレット・スマホ・など、家電では例えば空調機・電気メーターの計測 器・テレビを見ているときテロップなど人体に関するものなど様々なものに利用され HTML5は著しい技術の進化に繋がっている。

●「HTML5歴史」
◎「HTML4」と「HTML5」の違い
「HTML4」は
・テ－ブルレイアウトを使う。
・プレイヤーを使う。開発は独自仕様を許す。

◎「HTML5」で「HTML4」と著しい違いは、
・新インターフェイスなど・動的処理・アドオンプレイヤーを廃止した。
　　 ( 代表的なものにフラッシュプレイヤーがある。)
・標準化した(世界共通)・独自仕様を認めない)
・HTML5はCSSで レイアウトする
・「HTML5」の技術は多様である

● ＩＴ世代間の格差
「コミニュケーションツールの進化」
☆メール
※旧世代は：クライアントメールはパソコンに保管（POP方式）なので、パソコンから離れるとメールが読めない。　　
※新世代は：Webメール(IMAP＝クラウドに置いてる)ので何処でも読め利用できる。

☆パソコン＆マルチデバイスの利用は
※旧世代は：ＰＣはマウスでクリック・ハードデスク・CD・DVD・USBを使う。
※新世代は：マルチデバイスでスマホ、タブレット、ＰＣ使う。指先でタッチ、滑らして操作。音声認識もある。コミュニケーション手段は、メール以外に、ライン、ツイッター、フェースブックなどを使う。
※新世代のシェアはWebメールは80％以上の人が使っている

ITは、めまぐるしく進化をしました。わずか10年余り前頃は想像しなかった(シニアネット誕生の頃)。これからはどの様な進化をするのでしょう。
ITの進化を体験しないとなかなか理解できないようになってきました。解らないからと云って解らないものから遠ざかるのではなく、乗り遅れないためには理解しようとする努力が、これからのシニアに求められるでしょう。

せめて『Web研究会』のホームページ作りは進化に取り残されないように
1.新しい体験(自己流解釈を排除し、正しい知識を取り入れ)
2.最新の技術(テンプレートを使用し、易しく作る工夫をし)
3.美しいデザインのページ
を目指してください。そのためにテンプレートは最新のページ作りを目指し提供支援致します。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

とお話して戴きました　
講演後、汎用性の高いテンプレートを使っての学習をして下さいました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
≪今日の学習≫
●テンプレート(sample17.temp.html)を作成する
◎準備：
1.今日の配布テキスト(2015.02.07フォルダ)を自分のサイトのMysiteの資料倉庫フォルダに納める
2.今日用意してきた画像を→photoフォルダの中のフォルダ17内に納めます
3. 1.2.の資料を、練習site内に納めます　
◎web4を起ち上げる→サイト(s)→サイトを開く→自分のサイトを選択→開く→sample17.temp. html・sample17.temp.cssをダブルクリックする。
※以下を変更したり画像を差し替えて下さい
〇<title>タイトル</title>と<h1 id="pagetitle">〇〇〇</h1>を変える。
〇<nav>→<ul>の<li><a href="#">〇〇〇</a></li>も変更
〇<div class="topimage"><img src="photo/〇〇〇.jpg" alt=""></div>
〇<div id="main">
<section>
<h1>〇〇〇</h1>
<h2>〇〇〇</h2>
〇<p class="clearfix">文章は長めページのバランス考える入れる</p>
〇文章内に画像を入れる
<div id="sub">
<aside>
<section>箇所にある画像の部分以下をコピーして<span class="alignleft"><img src="photo/〇〇〇.jpg"></span>を文章中に貼り付ける(文章のバランスを考えて下さいね)
〇画像を右側に配したいときは<span class="alignleft">を→<span class="alignright">に変えて下さい。
☆今日は皆さん画像をサイズ変更し用意して来て戴きましたので全員が完成し良かったです。後は、自分のページに思いが伝わるような文章を入れたら完成ですね
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

高木さまの　講演とテンプレートを使ったページ作成の学習は、とても興味深い内容で『Web研究会』だけで聴くには勿体ないお話でした
おたる生涯支援センター『レピオ』で1:30pm～4:00pmをで行われました参加人数は12名でした。
投稿者
みぞいゆき
投稿日
2015/02/09(Mon) 15:41
No.
85

続 Ｗｅｂ研究会　第２２回例会

よいページのはじまりは

投稿者
みぞいゆき
投稿日
2015/02/09(Mon) 16:07
No.
86

続 Ｗｅｂ研究会　第２２回例会

学習の様子

投稿者
みぞいゆき
投稿日
2015/02/09(Mon) 16:09
No.
87

続 Ｗｅｂ研究会　第２２回例会

記念に写真を

投稿者
みぞいゆき
投稿日
2015/02/09(Mon) 16:10
No.
88

Ｗｅｂ研究会　第２１回例会
今年初めてのＷｅｂ研究会の例会です。前日まで吹き荒れた暴風雪でしたが、
今日は落ち着きホッとしましたね。
学習の初めに久原部長さんから新年の挨拶の後学習に入りました。

～ ～ 今日の学習 ～ ～

〇今日配布のフォルダ(2015.01.10)を資料倉庫に入れる。
〇フォルダ2015.01.10内のフォルダには、photoと４個のファイルがある。
〇(photo)フォルダ内にはフォルダ(s2)がある。(s2)をコピーし、練習siteの
　photoフォルダ内に(s2)フォルダ貼り付ける。
※予め用意してきた自分用の画像ファイルも(photoフォルダ)に納めておきます。
〇４個のファイルの内k-sample2.1.html・k-sample.cssをコピーし、練習siteに
　貼り付ける
〇 Web４を起ち上げて、サイトを開く→Mysite ※練習siteからk-sample2.1.html
・k-sample.cssを選択してください
〇k-sample2.1.htmlで自分の用意してきた画像と入れ替えをします(画像サイズは
　指定されたサイズにして下さい)
〇受講された皆さんが、ある程度画像を入れ替えたところで、tab1・ tab2・ tab3
の画像(contentsに設置した最初の３個の画像のことです)を其々クリックした時
　ページの画面と画像が入れ替わるのを見、これからどの様なページを作り上げて
　行くのか、再度説明する。

※２月もsample2.1.thmlのページを作っていく予定ですので、完成させるようにし
ましょう。



★今日の学習は『レピオ』に於き、1：30ｐｍ～4：00ｐｍ　参加者は１２名でした。


追伸：例会報告係より
　　　例会報告は休んだ方にも、どんな内容だったか分かり易く途中で出席が億劫
　　　に成ったりしないように心掛けたいと思います。
　　　少し長文に成りますがこれからも宜しくお願い致します。
投稿者
みぞいゆき
投稿日
2015/01/11(Sun) 12:01
No.
81

続 Ｗｅｂ研究会　第２１回例会


学習　1

投稿者
みぞいゆき
投稿日
2015/01/16(Fri) 22:11
No.
82

続 Ｗｅｂ研究会　第２１回例会


学習　2

投稿者
みぞいゆき
投稿日
2015/01/16(Fri) 22:12
No.
83

続 Ｗｅｂ研究会　第２１回例会


学習　3

投稿者
みぞいゆき
投稿日
2015/01/16(Fri) 22:13
No.
84

Ｗｅｂ研究会　第２０回例会
毎日寒波のお見舞いですね！本格的な雪のシーズンを迎えたようですね。
１３日(土曜日)レピオに於いて午後１時～４時迄、第２０回Ｗｅｂ研究会例会がが行われました。

①ＵＳＢで配布されたファイルは、2014.12.13フォルダを資料倉庫にコピーする。
　2014.12.13フォルダの中の７個の、css・font・font-awesome・fonts・images・img・jsフォルダ
　をコピーし、練習siteと自分の名前の付いたwebkenフォルダに貼り付け上書き保存すること。

②今回の例会では、11月に完成した「sample1.10.html」と「sample1.10.css」をFFFTPでＷｅｂに
　アップロードするでした。以前の例会でも何度か確認いたしましたFFFTPを開きます。

a、●ホストの設定名●ホスト名●ユーザー名●パスワード●ローカルの初期フォルダ(自分のMysite
　 に入っているwebkenフォルダです)●ホストの初期フォルダを確認のうえ接続しました。
b、接続画面(左側のローカルサイト側)で今回ＵＰするsample1.10.htmlとsample1.10.cssと
　 photoフォルダ(今回ＵＰする写真)と例会最初に配布した７個のフォルダも選択して、転送ボタン
(アップロードボタン)をクリック。 時間は結構掛りますが、転送が終わると右側のサーバー側には
　 選択したフォルダとhtmlファイルと cssファイルが並びます。
c、切断ボタンを押し終了します。

ｄ、ＵＰしたページを見てみます。クローム(GoogleChrome)・ファイヤフォクッス( Firefox)・
　　I・Eなど検索バーに既に、皆さんに配布されたアドレスの最後尾にsample1.10.html と記述し
　　検索しご確認ください。

③　久原部長さんより、新年から作るページの紹介と写真の用意などの説明がありました。

※　次の例会は１月１０日(土曜)です。　『来年も元気でお逢いいたしましょう』

　　例会参加者は１３名でした。
投稿者
みぞいゆき
投稿日
2014/12/15(Mon) 00:03
No.
78

続 Ｗｅｂ研究会　第２０回例会


ＦＦＦＴＰ転送設定を確認して・・・

投稿者
みぞいゆき
投稿日
2014/12/18(Thu) 00:01
No.
79

続 Ｗｅｂ研究会　第２０回例会


学び合い！教え合い！

投稿者
みぞいゆき
投稿日
2014/12/18(Thu) 00:04
No.
80
Pages:

Page: | 1 | 2 | 3 | 4 | 5 | 6 |

先頭へ戻る
閲覧回数
12390

最新の技術で綺麗なホ-ムペ-ジ作成を目指すクラブです。月1回の例会ですが、希望の方にはサロンで補習を行っています
最新のwebページ作成に興味のある方はクラブ員までお申込み下さい。

Web研究会のページ

「WelcomeBoard」は、皆様の日常の声をお聞かせ戴いています。貴方の投稿お待ちしてます。

閉じる

修正または削除

処理

記事No

照合キー

閉じる

新記事投稿

おなまえ
タイトル
コメント
掲載画像
照合キー 修正、削除のときに必要です（英数字で8文字以内)
合言葉
文字色 ■ ■ ■ ■ ■ ■ ■

- Joyful Note -