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

Transcription

1 音声と図解ホームページ作成入門 高齢者 障がい者の方が使いやすい HTML5 で学ぶ 2015 年度公開講座 4 月 25 日, 5 月 2 日跡見学園女子大学文学部准教授福田博同

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

3 5 月 2 日 ブログの理解 テキスト 2 音声変換 図のファイル作成法 ペイント形式 写真撮影 ドロー形式 画面キャプチャ 動画のファイル ( 説明 ) 絵日記サイト完成 アップロード方法 ( 説明 ) 音ファイル作成法 マイク録音 MIDI 作成

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

5 アプリのダウンロード (1) 説明 評判やウィルスチェック等でウィルスのないアプリをダウンロード Google ウィルスか IE に 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 フォルダ作成 ( 実習 ) 画面切り替えは Alt + Tab キー データ保存のためフォルダ作成法 ( 実習 ) ウィンドウズキー +D キーでデスクトップに行く Ctrl + Shift + N キーまたは ( 右クリック 新規作成 フォルダ ) そのまま名前を入れる 例 : HTML 作成法 最初にアルファベットを入れると便利 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 Illustrator ai, pdf, svgなど jpg, pdf, png, svg, tif 等 Power Point ppt pdf に印刷 HTMLで出力 ( 理由 :MSのみ) svg 写真を撮る 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 Web 用に変換.ogg.mp3.ra.aac.wma.m4a mp3, wma Wav, mp3 FLAC, WAV, DSD DAW ソフトで作曲例 :cwp, mml.mp3.mid wav ( 代表的ファイル形式例を記載 )

33 サイト開設者 動画ファイル拡張子 Web 用ファイル ビデオ撮影 通常 STD 画質撮影 MPEG2,AVI ハイビジョン HVCSD 撮影 MPEG4-AVC コンバーターや編集ソフトで変換 QT, RM, SWF, WMV, H.264, MOV 等 高スペック PC と編集ソフトで変換 FLV, MPEG4-AVC/H.264 等 ソフトで描く Flashアニメーション FLA SMILアニメーション RM,MOV 3D アニメーション Blender ほか 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 部の設定 背景色 body { /* 背景焦げ茶文字白 120% 大きい */ width:90%; margin:1% auto; backgroundcolor:#320; color:white; } リンクの色 a{ color:yellow; } a:visited{ color:#ff6 ; } 文字色 見出しの大きさ h1{ fontsize:135%; } h2{ fontsize:130%; } h3{ fontsize:125%; } h4{ fontsize:120%; } h5{ fontsize:115%; } h6{ fontsize:110%; } 段落の右寄せ p.right {text-align: right;} p.center {textalign: center;} p.left {text-align: left;}

37 Header,nav,section,footer の設定 header, nav, section, footer { display:block; margin:1px auto; padding:5px; } header { text-align:left; padding:10px; backgroundcolor:#210; color:white; } テキスト左寄せ header h2 { textalign:left; } header ul, header li { display:inline; } div.hidari{ float:left; lineheight:1.5; 行間 margin:1px auto; backgroundcolor:#320; 見本のスタイルシート解説.2 color:white; } div.migi{ float:right; lineheight:1.5; margin:1px auto; backgroundcolor:#320; color:white; }

38 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%; 見本のスタイルシート解説. 3 line-height:1.5; backgroundcolor:#320; color:white; } p.resizeimage img { width: 100%; } p { margin: 0; }

39 見本のスタイルシート解説 aside{ float:right; width:20%; line-height:1.3; font-size:90%; } color:white; footer { サイドバー フッター部 : 脚注 clear:both!important ; text-align: right; font-size:85%; backgroundcolor:#320; backgroundcolor:#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 規格となる テキスト文の特定文字をタグで囲み コンピュータが意味を解釈できるようにするマークアップ言語 記法は複雑 信規約 ) などからなる World Wide Web(WWW) を立ち上げる ( 典拠 ) HTML は一般的なタグを決め SGML をインターネット対応に特化し 普通の人が利用しやすいようにした ( 神崎正英氏解説 ) 1990 年, ティム バーナーズ = リー (CERN に所属していた ) HTML ( ハイパーテキスト マークアップ ランゲージ ),URL( アドレス ), HTTP( ハイパーテキストの通

42 HTML5 とは ( 背景説明その 2) 1993 年, CERN が WWW を公開 NCSA のマーク アンドリーセン Web ブラウザの Mosaic( 後の Netscape Navigator Mozilla Firefox) を公開 画像が利用しやすい ( インターネットマガジン (199412)) WWW は一気に普及 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 が WCAG(Web コンテンツアクセシビリティガイドライン ) を勧告 ( 邦訳 ) 視覚障害者 聴覚障害者 肢体不自由者もインターネット文書を読めるための基準 1999 年, W3C が HTML4.01 を勧告 ( 邦訳 ) HTML とスタイルシートとの分離

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

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=" </script> <![endif]--> <meta name="author" content=" 作者名を書きます " /> <meta name="description" content=" このページの説明文を書きます " /> <meta name="keywords" content=" キーワードを書きます, 次のキーワードも " />

48 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>

49 Body 部 <body itemscope itemtype=" <header id="header"> <h1 itemprop="name"> ここに見出しを書きます </h1> <p class="right" itemprop="description"> この段落に何か書きます </p> </header>

50 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')"> </form> </nav> <input type="button" value=" 印刷スタイル " onclick="changecss('css/print.css')">

51 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>

52 Body 部 : 例 : 2/3 <footer> <p><span itemprop="title"><a href=" ファイル名.html" target="_top"> トップページの呼び出し語 </a></span> <a href=" <span itemprop="name"> 作者名を書きます </span> <time itemprop="startdate" datetime=" ">2014 年 4 月 26 日 </time> - <time itemprop="lastdate" datetime=" ">2014 年 </time> <span itemprop="url"><a href=" ファイル名.html"> 次ページへ </a></span> </p> </footer> </body> </html>