印刷用4月25日

by user

on 28 марта 2017

Category: Documents

>> Downloads: 1

views

Report

Comments

Description

Download 印刷用4月25日

Transcript

印刷用4月25日

音声と図解
ホームページ作成入門
高齢者・障がい者の方が使いやすいHTML5で学ぶ
2015年度公開講座 4月25日, 5月2日
跡見学園女子大学文学部准教授福田博同
4月25日
準備編
• 見本コピー(実習) ダウンロード
• パソコンと周辺機器
• 起動と終了(実習)
• フォルダを作る(実習)
• 単語登録(実習)
ホームページの仕組み(説明)
• 元の文書の作り方
• 静止画ファイル
• 音ファイル
•
•
•
•
タッチタイピング
日本語入力
MS-IME
よく使うショートカットキー
• 動画ファイル
• HTML文書
• スタイルシート
アクセシビリティページ
• エディタを使う
• ファイルの保存
– CD-RWへ保存
• チェッカー
• HTML5の理解
目次へ
５月2日
•ブログの理解
•図のファイル作成法
–ペイント形式
–写真撮影
–ドロー形式
–画面キャプチャ
•音ファイル作成法
–マイク録音
–MIDI作成
–テキスト2音声変換
•動画のファイル(説明)
•絵日記サイト完成
•アップロード方法(説明)
目次へ
見本のコピーと保存
1. 教材CD-RWを開く
1. 教材CD-RWには、フォルダ「m見本」がある
2. デスクトップに移動
2. ウェブサイトからダウンロード（著者許可済み）
1. Google検索→ キーワード「artnavi 電脳」→ 「公開講座」→
「2014-15年度」→ 「gift」フォルダをクリック
2. ダウンロード先をデスクトップにする
3. 編集後、リムーバルメディア（USBやCD-RW等）へ保存
目次へ
アプリのダウンロード(1)説明
評判やウィルスチェック等
でウィルスのないアプリを
ダウンロード
IEにGoogleをダウンロード
（自宅実習）→ 利用可能
• 方法は次頁
Google ウィルスか
目次へ
アプリのダウンロード (2)説明
Googleツールバーのダ
ウンロード方法
• 「Google インストー
ル」で検索
• 「Google ツールバー
のインストール」をク
リック
• 同意してダウンロー
ドをクリック
目次へ
アプリのダウンロード (3)プラグイン
• 同意してダウンロード
をクリックします（Tab
キーで選択し、改行）
• いくつか同意してイン
ストールされる
説明：Google ツールバーな
どはプラグインといい、ブラ
ウザに追加されます。
PDFファイル閲覧や、Flash
アニメーション、
ブログなどの新着情報を届
けるRSSフィードなど
目次へ
アプリのダウンロード方法(5)電子メール
固定電話同様にプロバ
イダ契約した電子メール
が必要
• 契約した接続方法で
電子メールを設定し
ておく
• ウィンドウズには「電
子メール」が付属。
• ウィンドウズキーを入
れ、outlookと入れ。
• ウィザードに従いメー
ルを設定。
目次へ
アプリのダウンロード方法(6)圧縮と解凍
• ファイルはZipやLHA
などで圧縮
• ダウンロードしたZIP
ファイルの解凍方法
（説明）
1. Zipファイルを右ク
リック
2. すべて展開をクリッ
ク
3. 展開ウィザードが出
るので従う
4. 解凍される
• LHAファイルは解凍
ソフトをダウンロード
し使用
目次へ
パソコンと周辺機器
パソコン本体に加え
入力装置には
キーボード
マウス
マイク
ビデオ, カメラ,
スキャナ等があり、
出力装置には
プリンター
モニタ
スピーカー
プロジェクター等
入出力装置には
HDD,CD/DVD, USBや、
LANや無線LANなどが
あります
質問！ LANとは何ですか？
構内のネットワークです
目次へ
起動(実習）
電源を入れると
パソコンが起動し
「Ctrl + Alt + Delを入
れてください」と言われ
ます。
左手でCtrlキーとAlt
キーを押し、
右手でDeleteキーを押
します。
「パスワードを入れよ」と
言われます。
パスワードを入れ、
Enterキーで確定します
Ctrl + Alt + Deleteを入れよ
Pass wordを入れよ
<a href=“”></a>
YouTube復習(3分02秒から）
目次へ
パソコンの
パスワードとは
はい、ここでは
ウィルスからの防御のためのコン
ピュータの合言葉を意味しておりま
す。
パソコンを購入し、最初の起動時
に設定します。忘れないようにしま
しょう。
後でパスワードを変更する方法：
スタート→ コントロールパネル→
ユーザーアカウント→ 変更する
ユーザーアカウント
で設定しなおします。
起動（説明）へ戻る
目次へ
終了(実習）
• 終了は
「ウィンドウズキー」を押し
「右矢印キー」でシャットダ
ウンに行き、
Enterキーで終了します。
目次へ
フォルダ作成(実習)
データ保存のためフォル
ダ作成法(実習)
• ウィンドウズキー+D
キーでデスクトップに
行く
• Ctrl + Shift + Nキー
または
• (右クリック→新規作
成→フォルダ）
• そのまま名前を入れ
る
• 例：「HTML作成法」
• 最初にアルファベット
を入れると便利
YouTube復習(5分54秒から)
画面切り替えはAlt + Tabキー
目次へ
タッチタイピング
見ないでキーボードを打
つと能率的で老眼に
なってもパソコンが利
用できます。なるべくマ
ウスを使わない
• 左人差し指を
Fキーに
• 右人差し指を
Jキーに置きます。
左人差し指は
4RFV 5TGB
右人差し指は
6YHN 7UJMが守備範囲
です
• 定番ソフトをダウンロー
ドするにはインター
ネットを見ます
目次へ
日本語入力
Windowsには、
MS-IMEが付いていま
す。
昔から定評のATOKや、
無料のGoogle日本語入
力が良く使われていま
す。
では、MS-IMEで説明し
ます。
目次へ
MS-IME
MS-IMEのメニューは
ワープロやエディタの文
字入力画面で、
Ctrl+F10キーで出てきま
す。
次にPキーでIMEパッド、
Wキーで単語登録など
に切り替えられます。
ローマ字漢字から、「直
接ひらがな入力」にする
には、
Alt + 「カタカナ・ひらが
な・ローマ字キー」
「漢字」から「全角英数」
等切り替えは、
Ctrl+F10,Nキー
目次へ
IMEパッド
Ctrl+F10,PでIMEパッドを
開く
•文字一覧, 手書き, ソフト
キーボード, 画数、部首検
索が出る。
文字一覧では文字コード
（Unicode, Shift-JIS, JISな
ど）とフォントを指定可能
パソコンはShift-JISだが、
多言語対応のUnicodeも
可能、Web上のデータは
Unicodeへ向う
メール等の文字化け＝
コード変換不適切が原因
目次へ
よく使うショートカットキー
マウス使わないと格段
に作業が速い
よく使うショートカット
キーは少ないので覚え
てしまいましょう
• エクスプローラ: ウィ
ンドウズキー+E
• アプリ開始
• アプリ切り替え:
Alt+Tab
目次へ
よく使うショートカットキー 2
• コピー:Shift+→キー
で範囲選択し、
Ctrl+Cキーでコピー
し、
• 貼付: 範囲選択し、
Ctrl+Vキーでペース
トします
• 切取り: Ctrl+X
• 復活: Ctrl+Z
• ハイパーリンク:
Ctrl+K
よく使うショートカットキー
：まとめ
「色盲の人にもわかるバリアフリープレゼンテーション法」より
岡部正隆･伊藤啓編
★スタート： 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キー
目次へ
目次へ
エディタ試し←文書作成・編集
Editorや
ワープロソフト、
プレゼンテーションソフト、
HTMLエディタ、
電子書籍作成ソフト
などで、
文書を作成・編集・
保存し、印刷したり、
インターネット共有もできます。
目次へ
エディタを使う
単に文字を入力、編集す
るソフト
文字コード：Shift-JIS以外
にUnicode。UTF-8で保
存
• ウィンドウズは「メモ帳」
• 手順：スタート→ メモ
帳と記入→ 検索で出
るのでクリックし起動
目次へ
エディタを使う
右端折り返しとフォントの
大きさを変えてみる
• Alt→ O→Wキー
折り返し
• Alt → O →Fキー
フォント変更
• 文字を入れる
• 漢字は「半角全角
キー」
• 何か入れる
• スペースで変換
• Enterキーで確定
• シフトキーは上段に
ある文字
目次へ
ファイルの保存（実習）
• CtrlキーにSキーで
保存
• 最初は「ドキュメント」
画面が開きます。
• 名前を入れます。
例：m見本
• Enterキーで保存さ
れます
m見本.txt
目次へ
CD-RWへ複写（フォーマット）
1.
DVD-RWトレイボタン
を押すと開く
2. CD-RWを入れる
3. トレイを押す
4. エクスプローラー画
面が出る
5. DVD-RWをクリックか
Enterキー
6. メニューが出る
7. 名前を入れる
8. 「USBフラッシュドライ
ブと同じように,,,」をク
リック
9. フォーマット開始
これで書き換え可能な
CD-RWができる
目次へ
CD-RWへ複写（実習）
• 開いているアプリや
文書をすべて閉じ、
Alt+F4キー（右上の
☓印）
• エクスプローラを2つ
出す
ウィンドウズキー+E
を2回
• DVD-RWを開く
• ドキュメントのファイ
ルをコピー
• DVD-RWフォルダへ
貼付け
目次へ
単語登録
よく使う文章を単語登
録すると便利
1. 文書編集中
2. 右下弁当箱のよう
なMS-IMEを開く
3. 単語、よみを入れ
確定：例<a
href=“”></a>を
「あ」で登録
4. 閉じる
5. 「あ」と入れると
<a href=“”></a>も
でる
2
3
目次へ
ホームページの仕組み
1.
元の文書、図、表、音、動画等を作る
2.
HTML形式やXHTML形式ファイルへ変換
3.
プロバイダ等へファイル転送
4.
ブラウザで読む
見る人
プロバイダのサーバ
サイト開設者
インターネット
見る人
目次へ
元の文書の作り方
サイト開設者
1.
ブログやMedia WikiはWeb上で書く
2.
エディタやHTMLエディタで書く→保存
3.
ワープロソフトで書く
4.
プレゼンテーションソフトで書く→
保存 → 変換
5.
表計算ソフトで書く
→
保存 → 変換
6.
データベースを作る
→
保存 → 変換
→
保存 → 変換
YouTube復習(2分12秒)
目次へ
サイト開設者
静止画ファイル
•
•
ペイント形式で描く
ペイント, Gimp
拡張子
Web用ファイル
bmp, tif など
gif, jpg, png
ドロー形式で描く（ぎざぎざなし）
Inkscape (フリー) svg
svg
Illustrator
Power Point
ai, pdf, svgなど
ppt
jpg, pdf, png, svg, tif等
pdf に印刷 ○
HTMLで出力 ×(理由：MSのみ)
•
写真を撮る
tiff, bmp, jpg
jpgで出力
•
スキャナーで写す
bmp, jpg, pdf
jpg, pdf
•
PC画面をキャッチ
bmp, jpg
jpgへ変換
•
詳細はノートを参照
目次へ
サイト開設者
元の音ファイル
•
拡張子
録音
マイク録音
Web用に変換
.ogg | .mp3 | .ra | .aac | .wma |.m4a
サウンドレコーダー、超録など使用
| .wav | .aiff | bwf
ディジタル録音機
ICレコーダ
mp3, wma
リニアPCMレコーダー: wav
DSD (ハイレゾ)録音: .DSF
•
Web用ファイル
DAW ソフトで作曲
（代表的ファイル形式例を記載）
例:cwp,
mml
mp3, wma
Wav, mp3
FLAC, WAV, DSD
.mp3 | .mid | wav
目次へ
サイト開設者
動画ファイル
•
拡張子
Web用ファイル
コンバーターや編集ソフトで変換
QT, RM, SWF, WMV, H.264, MOV等
ビデオ撮影
通常STD画質撮影
MPEG2,AVI
ハイビジョンHVCSD撮影
高スペックPCと編集ソフトで変換
FLV, MPEG4-AVC/H.264 等
MPEG4-AVC
•
ソフトで描く
Flashアニメーション FLA
SMILアニメーション RM,MOV
3Dアニメーション
Blenderほか
（代表的ファイル形式例を記載）
SWF, アニメーションGIF等
SMI
VRML, SWF,X3D等
サイト開設者
HTML文書（ファイル名.html)
<html>
<head>
この文書の属性（著者だとかキーワードとか
スタイルとか）
</head>
<body>
見える部分図とかはすべてリンクで可能
</body>
</html>
目次へ
目次へ
HTML/XHTMLと CSS（スタイルシート）
• HTMLは文書を、スタイルはCSSを使う。
– 理由：文書と見映えの分離：メンテナンス性
– アクセシビリティ
– SEO（検索エンジン対策）
– W3C（Webの仕様を決める団体）国際標準
詳しくは
• ユーザビリティ___スタイルシート作成 / 筆者
目次へ
見本のスタイルシート解説
詳しくはユーザビリ
ティ___スタイルシート作
成 / 筆者ですが見本
の解説
ファイル名：
dunWhite120.css(意
味：dun焦げ茶地White
白文字120%の大きさ)
文字色
color:#320;
color:white;
リンクの色
}
a{ color:yellow; }
a:visited{ color:#ff6
;}
見出しの大きさ
h1{ fontbody { /* 背景焦 size:135%; }
げ茶文字白120%大 h2{ fontきい */
size:130%; }
width:90%;
h3{ fontmargin:1% auto; size:125%; }
backgroundh4{ font-
Body部の設定
背景色
size:120%; }
h5{ fontsize:115%; }
h6{ fontsize:110%; }
段落の右寄せ
p.right {text-align:
right;}
p.center {textalign: center;}
p.left {text-align:
left;}
目次へ
Header,nav,section,footerの設定
見本のスタイルシート解説.2
header, nav,
header h2 { textsection, footer {
align:left; }
display:block;
header ul, header li
margin:1px auto; {
display:inline;
padding:5px;
}
}
テキスト左寄せ
div.hidari{
header {
float:left;
text-align:left;
行間
linepadding:10px;
height:1.5;
backgroundmargin:1px
color:#210;
auto;
color:white;
background}
color:#320;
color:white;
}
div.migi{
float:right;
lineheight:1.5;
margin:1px
auto;
backgroundcolor:#320;
color:white;
}
目次へ
見本のスタイルシート解説. 3
nav {
float:right;
font-size:90%;
line-height:1.4;
margin:2px auto;
display:inline;
backgroundcolor:#320;
color:white;
箇条書き
}
#nav ul li{
display: inline;
}
nav.hirari {
backgroundcolor:#320;
color:white;
float:right;
font-size:90%;
line-height:1.4;
margin:2px auto;
}
余白
section {
float:left;
width:98%;
line-height:1.5;
backgroundcolor:#320;
color:white;
}
p.resizeimage img
{ width: 100%; }
p{
margin: 0;
}
目次へ
見本のスタイルシート解説
サイドバー
aside{
float:right;
width:20%;
line-height:1.3;
font-size:90%;
backgroundcolor:#320;
color:white;
}
footer {
フッター部：脚注
clear:both !important {float:left;}
;
text-align: right;
font-size:85%;
backgroundcolor:#320;
color:white;
}
form.migi
{float:right;}
form.hidari
目次へ
HTML, CSSのアクセシビリティチェック
• W3C Markup Validation Service
• Another HTML -lint gateway /石野恵一郎氏(HTML4まで)
• W3C CSS Validation Service
• 色覚チェック / 岡部正隆氏、伊藤啓氏
• aDesigner / 浅川千恵子氏グループ
では心当たりの会社等を調査してみましょう
目次へ
HTML5とは（背景説明）
•1986年, SGML（Standard
Generalized Markup Language）がISO
規格となる。
テキスト文の特定文字をタグで囲
み、コンピュータが意味を解釈で
きるようにするマークアップ言語。
記法は複雑。
•1990年, ティム・バーナーズ＝リー
(CERNに所属していた)
HTML （ハイパーテキスト・マーク
アップ・ランゲージ）,URL（アドレ
ス）, HTTP（ハイパーテキストの通
信規約）などからなるWorld Wide
Web(WWW) を立ち上げる(典拠)
–HTMLは一般的なタグを決め、
SGMLをインターネット対応に特化
し、普通の人が利用しやすいよう
にした(神崎正英氏解説)。
目次へ
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等で動画を表現→
WWWは一気に普及
目次へ
HTML5とは (背景説明その3)
•1996年, Internet Explorer 3公表
– Netscape Navigatorとのブラウ
ザ機能の拡張合戦開始
•1998年, W3CがXMLを勧告
–SGMLをWWW用に改良したもの
(XML1.0仕様/村田真ほか訳)
–例えば、異なるシステムでもメタ
データを同一にすると検索できま
す
•1999年, W3CがHTML4.01を勧告
(邦訳)
–HTMLとスタイルシートとの分離
•1999年, W3CがWCAG(Webコンテン
ツアクセシビリティガイドライン）を勧告
(邦訳)
–視覚障害者・聴覚障害者・肢体
不自由者もインターネット文書を
読めるための基準
目次へ
HTML5とは (背景説明その4)
•2000年, W3CがXHTML1.0を勧告
(邦訳)
–XMLから自動的にHTML文書に
変換するための共通形式
•2009年, Linked Dataの提案(ティム・
バーナーズ＝リー)
–タグでデータの主語・述語・目的
語を理解できるようにし、オープン
データが連携できるデータの
WWW
•2014年, HTML5を WHATWGが作
成、W3Cが後に加わった「最新HTML
勧告」(邦訳)
–（W3CはXHTML1.0の後継を断
念し、HTML5に）
目次へ
HTML5の利点
• 音声、静止画、動画等に特別なプ
ラグイン(追加機能)が不用
• PCとモバイル（スマフォやタブレッ
ト端末）の区別なくWebページを書
ける
• タッチパネルでフリック(軽くはたい
て移動)やピンチ（摘んで拡大縮
小）などが出来る
• 縦書レイアウトも標準装備
• リフロー（再流動）型サイト作成が
可能
• タグにセマンティクス（意味）を加え
た（例：<header>は文頭, <nav>は
道案内, <article>は記事, <footer>
は文末）
• ローカル保存データ枠の拡大
• モバイルでは、JavaScriptで位置
情報の取得、など
目次へ
HTML5の欠点
• 未対応ブラウザがある
• ついアクセシビリティへの配慮を忘
れがちになる
• 音声、動画等、主要ブラウザに表
示するため複数のファイルが必要
となる
• XMLから自動出力するためには、
XHTML形式のタグを行うことで解
決(XHTML5)
目次へ
Head部：例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ここにホームページ名を書きます</title>

<meta name="author" content="作者名を書きます" />
<meta name="description" content="このページの説明文を書きます" />
<meta name="keywords" content="キーワードを書きます,次のキーワード
も" />
目次へ
Head部：例：
<meta http-equiv="default-style" content="dun" />
<link rel="stylesheet" title="dun" href="css/dunWhite120.css" />
<link rel="stylesheet" title="hanten" href="css/print.css" />
<script type="text/javascript"> <!-function changeCSS(sURL)
{
var obj = document.getElementsByTagName("link");
obj[0].href = sURL;
}
//-->
</script>
</head>
目次へ
Body部
<body itemscope itemtype="http://schema.org/WebPage">
<header id="header">
<h1 itemprop="name">ここに見出しを書きます</h1>
<p class="right" itemprop="description">この段落に何か書きます</p>
</header>
目次へ
Body部
<section>
<nav>
<p>ナビゲーション</p>
<ul>
<li><a href=“link1.html”>リンクしたいファイル名を書きます</a></li>
<li><a href=“link2.html” target=“new”>次のリンクを書きます</a></li>
</ul>
<hr />
<form>
<input type="button" value="通常"
onClick="changeCSS('css/dunWhite120.css')">
<input type="button" value="印刷スタイル"
onClick="changeCSS('css/print.css')">
</form>
</nav>
目次へ
Body部：例： 2/3
<article>
<h2>文章の見出しを書きます</h2>
<p><img src="top.jpg" width="100" height="80" alt="画像説明" />
<br />
この段落に何か書きます</p>
この方法を推奨
<p class="resizeimage">
<img src="sakura01.jpg" alt="画像説明" /> <br />
この段落に何か書きます </p>
</article>
</section>
目次へ
Body部：例： 2/3
<footer>
<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>