Webデザインと 広 告 広 報 電 子 商 取 引 &ビジネス 情 報 管 理 1.Web 社 会 を 知 る ウェブで 私 達 の 生 活 はどう 変 わったのか? インターンネットの 検 索 機 能 を 活 用 した 情 報 収 集 ソーシャルネットワークによ るユーザ 同 士 の 情 報 共 有 価 格 ドットコム, 食 べログ 社 会 全 体 の 情 報 の 流 れが, 個 から 個 へ, 個 から 多 へと 交 差 している Webデザインをするにあたり, 意 識 をすること 情 報 発 信 者 として 意 識 することは? Webページ 作 成 の 基 本 言 語 文 章 構 造 HTML 視 覚 表 現 スタイルシート(CSSなど) 機 能 拡 張 スクリプト(JavaScriptなど) スタイルシート 文 書 の 見 栄 えに 関 する 情 報 ( 字 体 や 文 字 の 大 きさ 色 行 間 の 幅 修 飾 など)をひとまとめにしたデータやファイルなどのこと スクリプト ソースコードを 記 述 したら 即 座 に 実 行 できるようなプログラムのこと HTML Hyper Text Markup Language タグというマーク( 命 令 )を 使 って 文 書 の 構 造 を 指 定 文 字 の 大 きさや 色 の 変 化 画 像 を 表 示 等 ができる 1
タグ <タグ 名 >の 記 号 で 囲 まれた 半 角 の 英 数 字 のことで このタグを 使 っ てWebページは 作 られている <HTML>~</HTML> HTML 文 書 の 始 めに<HTML>タグを 記 入 し HTML 文 書 の 終 わりに</HTML> タグを 記 入 して HTML 文 書 全 体 をこのタグで 囲 みます ブラウザに 把 握 させ るために 必 ず 記 入 します <HEAD>~</HEAD> <HEAD>~</HEAD>を 記 入 して この 中 にヘッダー 情 報 を 記 入 します ここ には Webページを 作 成 すための 準 備 をする 場 基 本 的 には<TITLE>タグ 以 外 の 情 報 はブラウザ 上 には 表 示 されません <TITLE>~</TITLE> <HEAD>~< HEAD>の 中 に 記 入 してタイトルをつけます ここで 付 けたタイ トルは ブラウザのタイトルバーに 表 示 されるほか 履 歴 に 残 ったり お 気 に 入 りに 登 録 するときのタイトルとなります <BODY>~< BODY> このタグの 範 囲 内 に 記 入 された 内 容 が ブラウザ( 画 面 上 に)に 表 示 され ます この 中 にいろいろなタグを 使 いながら 本 文 を 記 入 していきます 画 像 を 表 示 する<IMG>タグや リンクを 貼 る<A>タグなどをこの 中 に 記 入 し 表 示 させたい 内 容 を 作 っていきます <b> ~ </b> 文 字 を 太 字 にするタグ <i> ~ </i> 文 字 を 斜 体 にするタグ <s> ~ </s> 文 字 に 取 り 消 し 線 を 引 くタグ <u> ~ </u> 文 字 に 下 線 を 引 くタグ <br> 改 行 を 行 なうタグ <hr> 水 平 線 を 引 く 例 :<hr size="10" color="#0000ff" noshade> <hr width="90%" color="#ff0000" align="center"> <html> <head> HTML 練 習 その1 <title> HTML 練 習 </title> </head> <body> <h1> 釧 路 の 観 光 </h1> <h2> 釧 路 という 異 国 を 旅 する</h2> </body> </html> 保 存 方 法 ファイル 名 に 注 意 する! 拡 張 子 を.html にする 2
<h1> 釧 路 の 観 光 </h1> <h2> 釧 路 という 異 国 を 旅 する</h2> <p> 北 海 道 の 東 南 部 に 位 置 する 釧 路 には 広 大 な 釧 路 湿 原 があります その 湿 原 により 独 特 の 風 土 文 化 が 培 われてきたように 感 じます ど こか 遠 くの 国 を 連 想 させてくれる 釧 路 は 日 本 の 中 の 異 国 かもしれ ません </p> <p> 釧 路 は 夏 は 涼 しく 空 気 も 水 も 海 産 物 農 産 物 も 安 全 安 心 です </p> <br /> <h2> 釧 路 食 べる 観 る 遊 ぶ</h2> <p> 釧 路 には,4 大 グルメがあります </p> 色 について ディスプレイで 見 ている 色 と, 実 際 に 印 刷 した 際 の 色 が 若 干 違 うことがある それはなぜか? </body> </html> ディスプレイは, 光 の 三 原 色 を 用 いる 印 刷 は 色 の 三 原 色 を 用 いる 光 と 色 の 基 準 となる 三 原 色 がことなるため,ディ スプレイと 印 刷 したものが 異 なることがある 光 の 三 原 色 を 混 ぜると 白 色 の 三 原 色 を 混 ぜると 黒 プリンタには CMYのほかに 黒 があるのはな ぜか CMYだけでは 純 粋 な 黒 ができないため 別 に 黒 を 用 意 している 全 体 の 配 色 の 決 定 <body bgcolor="" text="" link="" alink="" vlink=""> </body> 3
HTMLの 色 について 色 の 数 値 は, 16 進 数 を 用 いる 10 11 12 13 14 15 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F # 00 00 00 R G B #000000= 黒, #FFFFFF= 白, #FF0000= 赤 #00FF00= 緑, #0000FF= 青 <font > ~ </font> 書 式 を 設 定 するタグ 例 : <font size= 5"> ~ </font> <font color="#000000"> ~ </font> size="サイズ" サイズのところに1~7を 入 れて 指 定 します color="#000000" 色 は,6 桁 の16 進 数 で 指 定 します 2.ソーシャルメディアを 知 る ソーシャルメディアとは 誰 もが 参 加 できるスケーラブルな 情 報 発 信 技 術 を 用 いて, 社 会 的 インタ ラクションを 通 じて 広 がっていくよう に 設 計 されたメディア スケーラブル リソースの 量 に 比 例 して 全 体 の 処 理 能 力 が 増 す SNSの 目 的 ソーシャル ネットワーキング サービスの 主 目 的 は, 人 と 人 とのコミュニケーションにある 友 人 知 人 間 のコミュニケー ションを 促 進 する 手 段 や 場, あるいは 趣 味 や 嗜 好, 居 住 地 域, 出 身 校, 友 人 の 友 人 と いった 自 身 と 直 接 関 係 のない 他 人 との 繋 がりを 通 じて 新 た な 人 間 関 係 を 構 築 する 場 を 提 供 している SNS 上 では, 企 業 とユーザは 対 等 の 立 場 にある 代 表 的 なソーシャルメディア Facebook Google+ LINE Instagram Vine Twitter Pinterest Snapchat 4
SNSによるビジネスの 広 がり Webの 標 準 化 技 術 SNSを 活 用 して 個 人 やグループの 好 みに 合 わせた 広 告 配 信 など 関 連 ビジ ネスが 広 がっている 例 :FacebookをCRM 施 策 に 展 開 するソー シャルリスニングツール emsocial 1Webページの 作 成 で 使 われる 技 術 Webの 標 準 化 技 術 は, W3C(ウエ ブ 技 術 の 標 準 化 を 推 進 する 組 織 ) によって 決 められている HTML HyperText Markup Languageは,ウェブページを 作 成 するために 開 発 された 言 語 W3Cによって 標 準 化 が 行 われており, 大 半 のWebブラウザは 標 準 で HTML 文 書 の 解 釈 表 示 が 行 える CSS Cascading Style Sheet(カスケーディングスタイル シート)の 略 で,スタイルシート 言 語 の1つ Web ページのデザインやレイアウトを 定 義 するもの Java プログラミング 言 語 およびコンピューティングプラット フォーム ユーティリティ,ゲーム,ビジネスアプリ ケーションなど, 最 先 端 のプログラムの 基 礎 となって いる PHP Hypertext Preprocessorは,Webページを 記 述 するこ とに 特 化 したサーバーサイドスクリプト 言 語 Web 上 で 動 く 掲 示 板 やチャットなどを 作 成 するのに 便 利 なプ ログラム 言 語 Perl Common Gateway Interface の 略 で,WWW サーバの 中 で 外 部 プログラムを 実 行 するた めの 仕 組 み Flash 声 や 動 画,ベクターグラフィックスのアニ メーションを 組 み 合 わせてWebコンテンツを 作 成 するソフト また,それによって 作 成 さ れたコンテンツ < 箇 条 書 きを 設 定 するタグ> <ul> ~ </ul> 番 号 の 無 いリストを 作 るためのタグ <li> ~ </li> リストの 項 目 それぞれの 頭 につけるタグ これ が 無 いと 次 の 記 号 がつきません 例 :<ul> <li> 私 は </li> <li>あなたは </li> </ul> 5
<ol> ~ </ol> 番 号 つきのリストを 作 るためのタグ <li> ~ </li> リストの 項 目 それぞれの 頭 につけるタグです これが 無 いと 次 の 数 字 がつきません 例 :<ol> <li> 私 は </li> <li>あなたは </li> </ol> <h2> 釧 路 食 べる 観 る 遊 ぶ</h2> <p> 釧 路 には,4 大 グルメがあります </p> <ul> <li> 釧 路 ラーメン</li> <li> 釧 路 の 蕎 麦 </li> <li> 炉 端 焼 き</li> <li> 寿 司 さんま</li> </ul> <p> 釧 路 人 気 ランキング</p> <ol> <li> 勝 手 丼 </li> <li>ザンギ</li> <li> 地 酒 </li> </ol> <br /> <HR size="3" color="red" width="80%" align="center"> <MARQUEE direction= left behavior= scroll > 美 味 しい 釧 路 味 三 昧 </MARQUEE> </body> </html> 画 像 の 挿 入 画 像 名 は, 拡 張 子 まで 入 力 する ファイル 名 は, 半 角 英 数 字 にする ファイルサイズを 小 さくおさえる リサイズするソフトウエア 等 があるので 活 用 する Webページで 使 用 できる 画 像 ファイル jpg gif png 画 像 の 挿 入 のタグ <img src="img/kushiro01.jpg width="320" height="240" alt="kushiro01"> 画 像 の 場 所 幅 高 さ 表 示 されない 場 合 の 文 字 列 <div align="center">センターに 表 示 します</div> 位 置 を 指 定 する align=" " アライン は 水 平 方 向 valign=" " は 垂 直 方 向 の 指 定 を 行 う ブイアライン 6
背 景 に 画 像! <background = 表 示 したい 画 像 の 名 前. 拡 張 子 > 背 景 に 画 像 を 表 示 する <br /> <HR size="3" color="red" width="80%" align="center"> <MARQUEE direction="left" behavior="scroll"> 美 味 しい 釧 路 味 三 昧 </MARQUEE> <br /> <HR size="3" color="red" width="80%" align="center"> <p> <div align="center" valign="middle"> 釧 路 市 <br /> <img src="img/kushiro01.jpg" width="320" height="240" alt="kushiro01"> </div> </p> 表 作 成 列 を 増 やす <table> タグを 使 用 する 行 <td> Table Data <tr> Table Row 列 行 を 増 やす 列 と 行 7
CSSの 基 本 CSS (Cascading Style Sheets カスケー ディング スタイル シート) ウェブページのスタイルを 指 定 するための 言 語 ワープロソフトなどで 作 成 される 文 書 も 含 めて 文 書 のスタイルを 指 定 する 技 術 全 般 をスタイルシートという CSS 基 本 書 式 どこの どこの どうする セレクタ { プロパティ : 値 ; } 例 :h1{color : #FF0000 ;} CSSで,<h1>のフォントカラーを #FF00FFにするには,どのように 記 述 するのか 答 えなさい < 解 答 群 > { } color h1 #FF00FF : ; CSSによる 色 表 現 書 式 #FF0000 #F00 rgb(255,0,0) rgb(100%,0%,0%) 赤 を 表 している 8
外 部 CSSのファイルへリンク <link href="style.css" rel="stylesheet" type="text/css" media= all /> href: 外 部 参 照 するCSSファイルパスを 記 述 する rel/type: 外 部 参 照 するファイルの 種 類 media: 対 象 メディア(screen,print,handheld,tv) 次 の1~4にあてはまるものを 解 答 群 から 選 び, 答 えなさ い <link 1 ="style.css" 2 ="stylesheet" 3 ="text/css" 4 = all /> < 解 答 群 > media rel href type この 記 述 は HTML 内 に 記 入 する! フェイクアウト CSS 作 成 のボックスの 最 大 幅 と 最 小 幅 を 指 定 す るもの SIMについて SIMとは 電 話 会 社 の 通 信 回 線 を 使 い 通 話 やデータ 通 信 を 行 うのに 必 要 なICカードのこと SIMロック SIMフリー 端 末 SIMロック 端 末 NTTドコモ ソフトバンク au の 特 定 のSIMカードのみ 使 える 端 末 SIMロックフリー 端 末 SIMロックがかかっておらず どこの 携 帯 電 話 会 社 のSIM カードでも 利 用 できる 端 末 9
格 安 SIMとは? MVNOとは MVNO( 仮 想 移 動 体 通 信 事 業 者 Mobile Virtual Network Operator)という 事 業 者 が 大 手 通 信 キャリアに 比 べて 低 価 格 で 提 供 して いるSIMカード 携 帯 電 話 回 線 などの 無 線 通 信 基 盤 を 他 の 通 信 事 業 者 から 借 り 受 け 独 自 のサービスをくわえて 提 供 する 企 業 回 線 をまとめ 借 りし その 範 囲 内 でどれだけの ユーザーにどの 程 度 の 容 量 と 速 度 で 通 信 させる かを 調 整 することで 成 り 立 っている なぜ 格 安 SIMは 安 いのか? (1) 回 線 をまとめて 借 りている (2) 販 売 にかかわる 様 々なコストを 削 減 (3)データ 通 信 量 や 通 信 速 度 を 制 限 している 月 額 料 金 が 安 くなる プランを 柔 軟 に 選 べる 2 年 縛 りがない 格 安 SIMのメリット 初 期 費 用 (SIMカード 代 ) 3,000 円 ( 税 込 3,240 円 ) 110MB/ 日 コース 1,600 円 ( 税 込 1,728 円 ) 170MB/ 日 コース 2,080 円 ( 税 込 2,246.4 円 ) 3GB/ 月 コース 1,800 円 ( 税 込 1,944 円 ) 5GB/ 月 コース 2,150 円 ( 税 込 2,322 円 ) ナンバーポータビリティが 可 能 速 度 は,150mbps 通 信 容 量 使 用 後 は,200kbps http://service.ocn.ne.jp/mobile/one/?link_id=in_mobileone_navi_0001 格 安 SIMのデメリット キャリアメールとWebメール キャリア 関 連 サービスができない(キャリアメール キャリア 決 済 ) キャリアによる 端 末 価 格 の 割 引 を 受 けられない テザリングを 利 用 できないケースあり データ 通 信 の 制 限 が 厳 しい 話 料 は20 円 ( 税 抜 )/30 秒 で 基 本 的 に 無 料 通 話 分 はない 通 信 キャリアから 提 供 されていたキャリアメールができなくなる (@docomo.ne.jp,@ezweb.ne.jp,@softbank.ne.jpなど) キャリアメール @docomo.ne.jp @softbank.ne.jp といったアドレ スで 使 用 する 携 帯 電 話 キャリアが 提 供 するメールサービ スのこと Webメール Googleが 提 供 するGmail Yahooが 提 供 するYahoo!メール MicroSoftが 提 供 するOutlook.comなど インターネットに 接 続 してWebメールサイトやアプリからアドレスとパスワードを 設 定 すれば 誰 でも 簡 単 に 利 用 することができる 10
SIMフリー 端 末 を 用 いて, 格 安 SIMを 使 用 する 際 のメリットやディメリットを 述 べ,どのように 活 用 するべきか, 格 安 SIMを 提 供 する 会 社 の 営 業 担 当 になったつもりで 述 べなさい どこのSIMとプランがお 薦 めか? 11