初めてのパソコン / 福田博同 2013年

(1)

音声と図解

ホームページ作成入門

高齢者・障がい者の方が使いやすいHTML5で学ぶ

2015

年度

公開講座 4

月

25

日,

5

月

2

日跡見学園女子大学文学部准教授

福田博同

(2)

準備編 • 見本コピー(実習) ダウンロード • パソコンと周辺機器 • 起動と終了(実習) • フォルダを作る(実習) • タッチタイピング • 日本語入力 • MS-IME • よく使うショートカットキー • エディタを使う • ファイルの保存 – CD-RWへ保存 • 単語登録(実習) ホームページの仕組み(説明) • 元の文書の作り方 • 静止画ファイル • 音ファイル • 動画ファイル • HTML文書 • スタイルシートアクセシビリティページ • チェッカー • HTML5の理解

(3)

５月

2 日

•ブログの理解

•図のファイル作成法

–ペイント形式

–写真撮影

–ドロー形式

–画面キャプチャ

•音ファイル作成法

–マイク録音

–MIDI作成

–テキスト2音声変換

•動画のファイル(説明)

•絵日記サイト完成

•アップロード方法(説明)

(4)

見本のコピーと保存

1. 教材CD-RWを開く 1. 教材CD-RWには、フォルダ「m見本」がある 2. デスクトップに移動 2. ウェブサイトからダウンロード（著者許可済み） 1. Google検索→ キーワード「artnavi 電脳」→ 「公開講座」→ 「2014-15年度」→ 「gift」フォルダをクリック 2. ダウンロード先をデスクトップにする 3. 編集後、リムーバルメディア（USBやCD-RW等）へ保存

(5)

アプリ

の

ダウンロード

(1)説明

評判やウィルスチェック等でウィルスのないアプリをダウンロード IEにGoogleをダウンロード（自宅実習）→ 利用可能 • 方法は次頁 Google ウィルスか

(6)

アプリ

の

ダウンロード

(2)説明

Googleツールバーのダウンロード方法 • 「Google インストール」で検索 • 「Google ツールバーのインストール」をクリック • 同意してダウンロードをクリック

(7)

アプリ

の

ダウンロード

(3)

プラグイン

• 同意してダウンロードをクリックします（Tab キーで選択し、改行） • いくつか同意してインストールされる説明：Google ツールバーなどはプラグインといい、ブラウザに追加されます。 PDFファイル閲覧や、Flash アニメーション、ブログなどの新着情報を届けるRSSフィードなど

(8)

アプリのダウンロード方法

(5)

電子メール

固定電話同様にプロバイダ契約した電子メールが必要 • 契約した接続方法で電子メールを設定しておく • ウィンドウズには「電子メール」が付属。 • ウィンドウズキーを入れ、outlookと入れ。 • ウィザードに従いメールを設定。

(9)

アプリのダウンロード方法

(6)圧縮と解凍

• ファイルはZipやLHA などで圧縮 • ダウンロードしたZIP ファイルの解凍方法（説明） 1. Zipファイルを右クリック 2. すべて展開をクリック 3. 展開ウィザードが出るので従う 4. 解凍される • LHAファイルは解凍ソフトをダウンロードし使用

(10)

パソコンと周辺機器

パソコン本体に加え入力装置にはキーボードマウスマイクビデオ, カメラ, スキャナ等があり、出力装置にはプリンターモニタスピーカープロジェクター等入出力装置には HDD,CD/DVD, USBや、 LANや無線LANなどがあります

質問！ LANとは何ですか？構内のネットワークです

(11)

起動(実習）

電源

を入れると

パソコン

が起動し

「

Ctrl + Alt + Del

を入

れてください」

と

言われ

ます。

左手でCtrlキーとAlt

キー

を押し、

右手でDeleteキー

を押

します。

「パスワードを入れよ」

と

言われます

。

パスワードを入れ

、

Enterキー

で確定します

Ctrl + Alt + Deleteを入れよ Pass wordを入れよ <a href=“”></a> YouTube復習(3分02秒から）

(12)

パソコンの

パスワードとは

はい、ここでは

ウィルスからの防御のためのコン

ピュータの合言葉を意味しておりま

す。

パソコンを購入し、最初の起動時

に設定します。忘れないようにしま

しょう。

後でパスワードを変更する方法：

スタート→ コントロールパネル→

ユーザーアカウント→ 変更する

ユーザーアカウント

で設定しなおします。

起動（説明）へ_戻る

(13)

終了

(実習）

• 終了は「ウィンドウズキー」を押し「右矢印キー」でシャットダウンに行き、 Enterキーで終了します

。

(14)

フォルダ作成

(実習)

データ保存のためフォルダ作成法(実習) • ウィンドウズキー+D キーでデスクトップに行く • Ctrl + Shift + Nキーまたは • (右クリック→新規作成→フォルダ） • そのまま名前を入れる • 例：「HTML作成法」 • 最初にアルファベットを入れると便利画面切り替えはAlt + Tabキー YouTube復習(5分54秒から)

(15)

タッチタイピング

見ないでキーボードを打つと能率的で老眼になってもパソコンが利用できます。なるべくマウスを使わない • 左人差し指を Fキーに • 右人差し指を Jキーに置きます。左人差し指は 4RFV 5TGB 右人差し指は 6YHN 7UJMが守備範囲です • 定番ソフトをダウンロードするにはインターネットを見ます

(16)

日本語入力

Windowsには、 MS-IMEが付いています。昔から定評のATOKや、無料のGoogle日本語入力が良く使われています。では、MS-IMEで説明します。

(17)

MS-IME

MS-IMEのメニューはワープロやエディタの文字入力画面で、 Ctrl+F10キーで出てきます。次にPキーでIMEパッド、 Wキーで単語登録などに切り替えられます。ローマ字漢字から、「直接ひらがな入力」にするには、 Alt + 「カタカナ・ひらがな・ローマ字キー」「漢字」から「全角英数」等切り替えは、 Ctrl+F10,Nキー

(18)

IMEパッド

Ctrl+F10,PでIMEパッドを開く •文字一覧, 手書き, ソフトキーボード, 画数、部首検索が出る。文字一覧では文字コード（Unicode, Shift-JIS, JISなど）とフォントを指定可能パソコンはShift-JISだが、多言語対応のUnicodeも可能、Web上のデータは Unicodeへ向うメール等の文字化け＝コード変換不適切が原因

(19)

よく使うショートカットキー

マウス使わないと格段に作業が速いよく使うショートカットキーは少ないので覚えてしまいましょう • エクスプローラ: ウィンドウズキー+E • アプリ開始 • アプリ切り替え: Alt+Tab

(20)

よく使うショートカットキー 2

• コピー:Shift+→キーで範囲選択し、 Ctrl+Cキーでコピーし、 • 貼付: 範囲選択し、 Ctrl+Vキーでペーストします • 切取り: Ctrl+X • 復活: Ctrl+Z • ハイパーリンク: Ctrl+K

(21)

岡部正隆･伊藤啓編 ★スタート： Windowsキー（田キー） ★エクスプローラ：田にEキー ★画面切り替え： AltにTabキー ★漢字変換：スペースバー ★決定： Enterキー ★ファイル保存： CtrlにSキー ★別名保存： AltにFキー、Aキー ★終了： AltにF, XキーかCキー ★複写： CtrlにCキー ★切取： CtrlにXキー ★削除：範囲選択、Deleteキー ★貼付： CtrlにVキー ★復活： CtrlにZキー ★アドレス取得： AltにDキー ★ハイパーリンク： CtrlにKキー ★パソコン終了：田にUキー

(22)

エディタ試し←文書作成・編集

Editorやワープロソフト、プレゼンテーションソフト、 HTMLエディタ、電子書籍作成ソフトなどで、文書を作成・編集・保存し、印刷したり、インターネット共有もできます。

(23)

エディタを使う

単に文字を入力、編集するソフト文字コード：Shift-JIS以外にUnicode。UTF-8で保存 • ウィンドウズは「メモ帳」 • 手順：スタート→ メモ帳と記入→ 検索で出るのでクリックし起動

(24)

エディタを使う

右端折り返しとフォントの大きさを変えてみる • Alt→ O→Wキー折り返し • Alt → O →Fキーフォント変更 • 文字を入れる • 漢字は「半角全角キー」 • 何か入れる • スペースで変換 • Enterキーで確定 • シフトキーは上段にある文字

(25)

ファイルの保存（実習）

• CtrlキーにSキーで保存 • 最初は「ドキュメント」画面が開きます。 • 名前を入れます。例：m見本 • Enterキーで保存されます m見本.txt

(26)

CD-RWへ複写（フォーマット）

1. DVD-RWトレイボタンを押すと開く 2. CD-RWを入れる 3. トレイを押す 4. エクスプローラー画面が出る 5. DVD-RWをクリックか Enterキー 6. メニューが出る 7. 名前を入れる 8. 「USBフラッシュドライブと同じように,,,」をクリック 9. フォーマット開始これで書き換え可能な CD-RWができる

(27)

CD-RWへ複写（実習）

• 開いているアプリや文書をすべて閉じ、 Alt+F4キー（右上の ☓印） • エクスプローラを2つ出すウィンドウズキー+E を2回 • DVD-RWを開く • ドキュメントのファイルをコピー • DVD-RWフォルダへ貼付け

(28)

単語登録

よく使う文章を単語登

録すると便利

1. 文書編集中

2. 右下弁当箱のよう

なMS-IMEを開く

3. 単語、よみを入れ

確定：例<a

href=“”></a>を

「あ」で登録

4. 閉じる

5. 「あ」と入れると

<a href=“”></a>も

でる

2 3

(29)

ホームページの仕組み

1. 元の文書、図、表、音、動画等を作る 2. HTML形式やXHTML形式ファイルへ変換 3. プロバイダ等へファイル転送 4. ブラウザで読むプロバイダのサーバ見る人サイト開設者見る人インターネット

(30)

元の文書の作り方

1. ブログやMedia WikiはWeb上で書く 2. エディタやHTMLエディタで書く→保存 3. ワープロソフトで書く → 保存 → 変換 4. プレゼンテーションソフトで書く→ 保存 → 変換 5. 表計算ソフトで書く → 保存 → 変換 6. データベースを作る → 保存 → 変換 サイト開設者 YouTube復習(2分12秒)

(31)

静止画ファイル

拡張子

Web用ファイル

• ペイント形式で描く

ペイント, Gimp bmp, tif など gif, jpg, png • ドロー形式で描く（ぎざぎざなし）

Inkscape (フリー) svg svg

Illustrator ai, pdf, svgなど jpg, pdf, png, svg, tif等 Power Point ppt pdf に印刷 ○ HTMLで出力 ×(理由：MSのみ) • 写真を撮る tiff, bmp, jpg jpgで出力 • スキャナーで写す bmp, jpg, pdf jpg, pdf • PC画面をキャッチ bmp, jpg jpgへ変換 • 詳細はノートを参照サイト開設者

(32)

元の音ファイル

拡張子

Web用ファイル

• 録音マイク録音サウンドレコーダー、超録など使用 | .wav | .aiff | bwf ディジタル録音機 ICレコーダ mp3, wma リニアPCMレコーダー: wav DSD (ハイレゾ)録音: .DSF • DAW ソフトで作曲例:cwp, mml （代表的ファイル形式例を記載） Web用に変換

.ogg | .mp3 | .ra | .aac | .wma |.m4a

mp3, wma Wav, mp3 FLAC, WAV, DSD .mp3 | .mid | wav

(33)

動画ファイル

拡張子

Web用ファイル

• ビデオ撮影通常STD画質撮影 MPEG2,AVI ハイビジョンHVCSD撮影 MPEG4-AVC • ソフトで描く Flashアニメーション FLA SMILアニメーション RM,MOV 3Dアニメーション Blenderほか（代表的ファイル形式例を記載）サイト開設者 コンバーターや編集ソフトで変換 QT, RM, SWF, WMV, H.264, MOV等 高スペックPCと編集ソフトで変換 FLV, MPEG4-AVC/H.264 等 SWF, アニメーションGIF等 SMI VRML, SWF,X3D等

(34)

HTML文書（ファイル名.html)

<html>

<head>

この文書の属性（著者だとかキーワードとか

スタイルとか）

</head>

<body>

見える部分図とかはすべてリンクで可能

</body>

</html>

(35)

HTML/XHTML

と

CSS

（スタイルシート）

• HTMLは文書を、スタイルはCSSを使う。

– 理由：文書と見映えの分離：メンテナンス性

– アクセシビリティ

– SEO（検索エンジン対策）

– W3C（Webの仕様を決める団体）国際標準

詳しくは

• ユーザビリティ___スタイルシート作成 / 筆者

(36)

見本のスタイルシート解説

詳しくはユーザビリティ___スタイルシート作成 / 筆者ですが見本の解説ファイル名： dunWhite120.css(意味：dun焦げ茶地White 白文字120%の大きさ)

body { /* 背景焦

げ茶文字白120%大

きい */

width:90%;

margin:1% auto;

background-color:#320;

color:white;

}

a{ color:yellow; }

a:visited{ color:#ff6

; }

h1{

font-size:135%; }

h2{

font-size:130%; }

h3{

font-size:125%; }

h4{

font-size:120%; }

h5{

font-size:115%; }

h6{

font-size:110%; }

p.right {text-align:

right;}

p.center

{text-align: center;}

p.left {text-align:

left;}

背景色文字色リンクの色見出しの大きさ段落の右寄せ Body部の設定

(37)

見本のスタイルシート解説.2

header, nav,

section, footer {

display:block;

margin:1px auto;

padding:5px;

}

header {

text-align:left;

padding:10px;

background-color:#210;

color:white;

}

header h2 {

text-align:left; }

header ul, header li

{

display:inline;

}

div.hidari{

float:left;

line-height:1.5;

margin:1px

auto;

background-color:#320;

color:white;

}

div.migi{

float:right;

line-height:1.5;

margin:1px

auto;

background-color:#320;

color:white;

}

Header,nav,section,footerの設定テキスト左寄せ行間

(38)

見本のスタイルシート解説. 3

nav {

float:right;

font-size:90%;

line-height:1.4;

margin:2px auto;

display:inline;

background-color:#320;

color:white;

}

#nav ul li{

display: inline;

}

nav.hirari {

background-color:#320;

color:white;

float:right;

font-size:90%;

line-height:1.4;

margin:2px auto;

}

section {

float:left;

width:98%;

line-height:1.5;

background-color:#320;

color:white;

}

p.resizeimage img

{ width: 100%; }

p {

margin: 0;

}

箇条書き余白

(39)

見本のスタイルシート解説

aside{

float:right;

width:20%;

line-height:1.3;

font-size:90%;

background-color:#320;

color:white;

}

footer {

clear:both !important

;

text-align: right;

font-size:85%;

background-color:#320;

color:white;

}

form.migi

{float:right;}

form.hidari

{float:left;}

サイドバーフッター部：脚注

(40)

HTML, CSS

の

アクセシビリティチェック

• W3C Markup Validation Service

• Another HTML -lint gateway

/石野恵一郎氏(HTML4まで)

• W3C CSS Validation Service

• 色覚チェック

/ 岡部正隆氏、伊藤啓氏

• aDesigner

/ 浅川千恵子氏グループ

(41)

HTML5とは（背景説明）

•1986年, SGML（Standard

Generalized Markup Language）がISO 規格となる。テキスト文の特定文字をタグで囲み、コンピュータが意味を解釈できるようにするマークアップ言語。記法は複雑。 •1990年, ティム・バーナーズ＝リー (CERNに所属していた) HTML （ハイパーテキスト・マークアップ・ランゲージ）,URL（アドレス）, HTTP（ハイパーテキストの通信規約）などからなるWorld Wide Web(WWW) を立ち上げる(典拠) –HTMLは一般的なタグを決め、 SGMLをインターネット対応に特化し、普通の人が利用しやすいようにした(神崎正英氏解説)。

(42)

HTML5とは

(背景説明その2)

•1993年, CERNがWWWを公開

•NCSAのマーク・アンドリーセン WebブラウザのMosaic（後の

Netscape Navigator → Mozilla Firefox)を公開→画像が利用しやすい（インターネットマガジン (199412)） 1994年,ティム・バーナーズ＝リー等標準化団体WWWコンソーシアム (W3C)結成

1995年,Sun Microsystems社、Java （Javaとは）を公開、JavaScriptを公開 (JavaScriptとは:All About記事) ブラウザのNetscape2等で動画を表現→

(43)

HTML5とは

(背景説明その3)

•1996年, Internet Explorer 3公表 – Netscape Navigatorとのブラウザ機能の拡張合戦開始 •1998年, W3CがXMLを勧告 –SGMLをWWW用に改良したもの (XML1.0仕様/村田真ほか訳) –例えば、異なるシステムでもメタデータを同一にすると検索できます •1999年, W3CがHTML4.01を勧告 (邦訳) –HTMLとスタイルシートとの分離 •1999年, W3CがWCAG(Webコンテンツアクセシビリティガイドライン）を勧告 (邦訳) –視覚障害者・聴覚障害者・肢体不自由者もインターネット文書を読めるための基準

(44)

HTML5とは

(背景説明その4)

•2000年, W3CがXHTML1.0を勧告 (邦訳) –XMLから自動的にHTML文書に変換するための共通形式 •2009年, Linked Dataの提案(ティム・バーナーズ＝リー) –タグでデータの主語・述語・目的語を理解できるようにし、オープンデータが連携できるデータの WWW •2014年, HTML5を WHATWGが作成、W3Cが後に加わった「最新HTML 勧告」(邦訳) –（W3CはXHTML1.0の後継を断念し、HTML5に）

(45)

HTML5の利点

• 音声、静止画、動画等に特別なプラグイン(追加機能)が不用 • PCとモバイル（スマフォやタブレット端末）の区別なくWebページを書ける • タッチパネルでフリック(軽くはたいて移動)やピンチ（摘んで拡大縮小）などが出来る • 縦書レイアウトも標準装備 • リフロー（再流動）型サイト作成が可能 • タグにセマンティクス（意味）を加えた（例：<header>は文頭, <nav>は道案内, <article>は記事, <footer> は文末） • ローカル保存データ枠の拡大 • モバイルでは、JavaScriptで位置情報の取得、など

(46)

HTML5の欠点

• 未対応ブラウザがある • ついアクセシビリティへの配慮を忘れがちになる • 音声、動画等、主要ブラウザに表示するため複数のファイルが必要となる • XMLから自動出力するためには、 XHTML形式のタグを行うことで解決(XHTML5)

(47)

Head部：例：

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>ここにホームページ名を書きます</title> <!--[if IE]> <script

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

(48)

Head部：例：

function changeCSS(sURL) {

var obj = document.getElementsByTagName("link"); obj[0].href = sURL; } //--> </script>

(49)

Body部

<h1 itemprop="name">ここに見出しを書きます</h1>

<p class="right" itemprop="description">この段落に何か書きます</p> </header>

(50)

Body部

<p>ナビゲーション</p> <ul>

<li><a href=“link1.html”>リンクしたいファイル名を書きます</a></li> <li><a href=“link2.html” target=“new”>次のリンクを書きます</a></li> </ul>

<hr />

</form> </nav>

(51)

Body部：例： 2/3

<h2>文章の見出しを書きます</h2>

この段落に何か書きます</p> <p class="resizeimage">

<img src="sakura01.jpg" alt="画像説明" /> <br /> この段落に何か書きます </p>

</article> </section>

(52)

Body部：例： 2/3

<p><span itemprop="title"><a href="ファイル名.html" target="_top">トップページの呼び出し語</a></span> | <a

href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> | <span itemprop="name">作者名を書きます</span> | <time

itemprop="startDate" datetime="2014-04-26">2014年4月26日</time> - <time itemprop="lastDate" datetime="2014-05-10">2014年</time> |

<span itemprop="url"><a href="ファイル名.html">次ページへ</a></span> </p>

</footer> </body> </html>

初めてのパソコン / 福田博同 2013年

音声と図解

ホームページ作成入門

高齢者・障がい者の方が使いやすいHTML5で学ぶ

2015

公開講座 4

25

5

2

福田 博同

５月

2

日

•ブログの理解

•図のファイル作成法

–ペイント形式

–写真撮影

–ドロー形式

–画面キャプチャ

•音ファイル作成法

–マイク録音

–MIDI作成

–テキスト2音声変換

•動画のファイル(説明)

•絵日記サイト完成

•アップロード方法(説明)

見本のコピーと保存

アプリ

の

ダウンロード

(1)説明

アプリ

の

ダウンロード

(2)説明

アプリ

の

ダウンロード

(3)

プラグイン

アプリのダウンロード方法

(5)

電子メール

アプリのダウンロード方法

(6)圧縮と解凍

パソコンと周辺機器

起動(実習）

電源

を入れると

パソコン

が起動し

「

Ctrl + Alt + Del

を入

れてください」

と

言われ

ます。

左手でCtrlキーとAlt

キー

を押し、

右手でDeleteキー

を押

します。

「パスワードを入れよ」

と

言われます

。

パスワードを入れ

、

Enterキー

で確定します

パソコンの

パスワードとは

はい、ここでは

ウィルスからの防御のためのコン

ピュータの合言葉を意味しておりま

す。

パソコンを購入し、最初の起動時

に設定します。忘れないようにしま

福田博同

見える部分図とかはすべてリンクで可能

– 理由：文書と見映えの分離：メンテナンス性