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

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

1

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

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

4 ブログと HTML の違い Editor で HTML 文書を書く → 保存 HTML-Editor で書く → 保存 ワープロソフトで書く → 保存 → 変換 プレゼンテーションソフトで書く → 保存 → 変換 表計算ソフトで書く → 保存 → 変換 CMS で書く ブログや SNS や Wiki で直接書く Web 上で書く サイト開設者 目次へ

5 ブログ・ SNS 1. 安全なサイトから選 ぶ 1. ブログ 例： Hatena ダイ アリー Blogger Yahoo! ブログ twitter Hatena ダイ アリー Blogger Yahoo! ブログ twitter 2.SNS 例： mixi Facebook Myspace ( 音楽 系 ) mixi Facebook Myspace 2. 申し込み：メールで 確認、開設 3. 管理や設定でプロ フィール設定 4. 日記を書く ・投稿す る 5. コメント、トラック バックに返信、スパ ム管理 目次へ

6 Hatena ダイアリーで試してみよう 1.Hatena ダイアリー ( リンク ) に行く ( リンク ) ２．必要事 項を記入 目次へ

7 Hatena ダイアリーで試してみよう 3. 登録終了後、 Hatena ダイアリーにログインする 4. ブログトップをクリックする 目次へ

8 Hatena ダイアリーで試してみよう 5. 管理画面でデザインを選んだり 6. プロフィールを書きます 7. 記事を書きます 見本 :artnavi の日記見本 :artnavi の日記 目次へ

9 Blogger で試そう 1.Blogger(link) に入 ります(link) Google アカウント に入ります 目次へ

10 Blogger で試そう 取得後 Blogger に入り ます レ イアウトやテンプレートで カスタマイズ します ブログを表示してみましょう ( 例 : 心眼 ) ( 例 : 心眼 ) 目次へ

11 元ファイル作成 方法： 図ペイントで 描く スタート（ Windows キー） プログラム (p キー ) アクセサリー ペイント 目次へ YouTube 復習 (7 分 54 秒から )

12 ペイント キャンバスサイズ、円の書 き方 キャンパス色とサイズ 円や四角等の書きかた 目次へ YouTube 復習 (11 分 14 秒から YouTube 復習 (11 分 14 秒から )

13 ペイント スプレーとバケツ スプレー バケツ 円と色 目次へ

14 ペイント 保存 ファイル 別名保存 保存場所 デスクトップ 自分のフォルダ zu のフォルダ ファイル種類 すべてにして 拡張子 jpg ！ bmp ではない 動画等様々な「作り方」は ArtNavi の「インターネットプレゼンテーション 入門」をインターネットプレゼンテーション 入門 目次へ

15 デジタル写真撮影 ファイル形式は JPEG か TIFF→ コンピュタも扱 う 1. 撮影 2. つなぐか、メール添 付 3. 画像処理ソフトで Web 用に編集： Windows には「ペイ ント」あり 1. スタート → 「ペイ ント」 → 起動 →  画像フォルダの画像 を「ペイント」にド ラッグアンドドロッ プ  トリミング → サイズ 変更 4. 半角英数でファイル 名を Web ページの フォルダに保存 5. 埋め込みかリンク 目次へ YouTube 復習 (8 分 46 秒から )

16 デジタル写真撮影 2. 画像フォルダの 画像を「ペイン ト」にドラッグ アンドドロップ 3. トリミング 4. サイズ変更 4. 半角英数でファイル 名を Web ページの フォルダに保存 1. ファイル 2. 名前をつけて保存 3. 例： sakura01.jpg 5.Web ページに埋め込 みか、リンクする ２ 3 4 目次へ

17 静止画像作成、埋め込み 詳細 ArtNavi1ArtNavi1 → ユーザビリティ → Web サイト作成 → HTML ファ イル作成 → 図の埋め込みを参照 ユーザビリティWeb サイト作成 HTML ファ イル作成 図の埋め込み 静止画の作成 (YouTube 復習 :7 分 54 秒 ) 静止画の作成YouTube 復習 :7 分 54 秒 ペイントソフト (YouTube 復習 :11 分 14 秒 ) ペイントソフトYouTube 復習 :11 分 14 秒 ドローソフト カメラで撮影 OCR で読み込む OCR で読み込む パソコン画面を複写 目次へ

18 元ファイル作成 方法： 音ファイル Google→ artnavi1Google→ artnavi1 → 芸術工房 → 音楽 → 芸術工房 音楽 「作ろう ♪ インターネットで芸術音楽を」 「作ろう ♪ インターネットで芸術音楽を」 録音と音の編集 ＭＭＬで作曲 MIDI で作曲 MIDI で作曲 テキスト → 音声ファイル作成 テキスト → 音声ファイル作成 目次へ

19 テキスト → 音声ファイル作成 ( 自習 ) 文字を入れて音声に変換する ソフト利用 1.Softalk や「棒読みちゃ ん」をダウンロード → 解 凍Softalk棒読みちゃ ん 2. 起動 3. テキストを書く 4. 録音ボタンを押す 5. 保存する → フォルダを指 定 → 名前を入れる → 実行 → 変換される 1 2 3) 何か書く 4) 録音ボタンを押 す 目次へ

20 テキスト → 音声ファイル作成 ( 自習 ) Wav ファイルを Mp3 にす る方法 1. 「えこでこツール」 をダウンロード → 解 凍えこでこツール 2. 起動 3.Wav ファイルをド ラッグアンドドロッ プ → 出力を mp3 にす る → 変換 4. 保存 1 2 ← 3 目次へ

21 音声・動画の埋め込み方 ArtNavi1 → ユーザビリティ → Web サイト作成 → HTML ファ イル作成 → 音・動画の埋め込み を参照 ・リンク再生リンク再生 ・音 (MIDI) 埋め込み ・音 (MP3) 埋め込み音 (MIDI) 埋め込み音 (MP3) 埋め込み ・動画の埋め込み ・動画 (RealMedia) 埋め込み ・動画 (Flash) 埋め込み ・動画 (YouTube) 埋め込み動画の埋め込み動画 (RealMedia) 埋め込み動画 (Flash) 埋め込み動画 (YouTube) 埋め込み 目次へ

22 アップロードする 1. メールアドレスが必要 2. 安全な無料サイトから選ぶ – Yahoo GeocitiesGoogle apps 等 Yahoo GeocitiesGoogle apps 3. 申し込み、メールで確認、開設 4. 管理や設定でプロフィール設定 5. ファイル転送 FFFTP などのソフトで転送 目次へ

23 分かりやすいホームページ ターゲットを絞る – 日常日記だけ – 多趣味でも１つの趣味だけ ほかの趣味は、それぞれ違うサイトに 1 ページに詰め込まない – ALTAIR(link) で朗読してもらって 5 分以内link 授業終了：ご不明な点は artnvi8200 ＠ yahoo.co.jp 目次へ