HTML5プロフェッショナル 認 定 試 験 レベル1 ポイント 解 説 無 料 セミナー 2016 年 6 18 ( ) in OCS2016Hokkaido ( 札 幌 コンペンションセンター) LPI-Japanパートナーインストラクター 鯨 井 貴 博 (Zeus IT Camp)
Linux Networkの 基 礎 から 現 場 経 験 を 活 かしたトラブルシュートまで 幅 広 い 講 義 を います! [プロフィール] LPIC レベル3 情 報 処 理 技 術 者 資 格 などを 保 有 し 現 場 ではネットワーク 構 築 海 外 メーカー 国 内 次 代 理 店 でのテクニカルサポート 業 務 を 経 験 講 師 として がIT 未 経 験 から 学 んできた 経 験 を 交 えた 講 義 を っている LPI-Japan 認 定 トレーナー オープンソース 技 術 開 発 研 究 所 本 Nginxユーザー 会 としても 活 動 中 [ 保 有 資 格 ] HTML5プロフェッショナル レベル1 ACCEL(Apache CloudStack 技 術 者 認 定 資 格 by LPI-JAPAN) LPIC レベル3 Core(301) LPIC レベル3 Mixed Environment(302) LPIC レベル3 Security(303) LPIC レベル3 Virtualization & High Availability(304) 情 報 セキュリティスペシャリスト/ 情 報 セキュリティマネジメント 応 情 報 処 理 技 術 者 / 基 本 情 報 処 理 技 術 者 MCP Microfoft Windows Server 2008 Active Directory Zeus It camp @ZeusITCamp BLOG http://opensourcetech.hatenablog.jp/ ITIL Foundation CCNA 2 MOS2010(word,excel)
3 本 のアジェンダ 0HTML5を 使 したサイト 1HTML5レベル1の 試 験 概 要 2HTML5レベル1を 学 習 する 上 でのポイント 3 技 術 解 説 4サンプル 問 題 5お 知 らせ 6 質 疑 応 答
0HTML5を 使 したサイト 4
これから 紹 介 するサイトが HTML5によって 作 られています! http://helloracer.com/webgl/ http://craftymind.com/factory/html5video/canvasvideo.html http://andrew-hoyer.com/experiments/cloth/ http://alteredqualia.com/canvasmol/#capsaicin http://www.thewildernessdowntown.com/ 5
1HTML5レベル1の 試 験 概 要 6
試 験 概 要 HTML5,CSS3,Javascriptなど 最 新 のマークアップに 関 する 技 術 と 知 識 を 公 平 かつ 厳 正 に 中 的 な 場 で 認 定 する 認 定 資 格 です 試 験 時 間 : 90 分 出 題 数 : 約 60 問 出 題 形 式 : 選 択 / 記 述 受 験 費 : 15,000 円 ( 税 別 ) 7
8
出 題 範 囲 1.1 Webの 基 礎 知 識 (HTTP HTML サーバ&ネットワーク Web 関 連 技 術 ) 1.2 CSS3 (スタイルシート CSSデザイン カスケード) 1.3 要 素 (HTML4.01 以 前 HTML5での 要 素 / 属 性 等 ) 1.4 レスポンシブWebデザイン (マルチデバイス 対 応 メディアクエリ 等 ) 1.5 オフラインWebアプリケーション ( 概 要 とマニュフェスト) 詳 細 は http://html5exam.jp/outline/objectives_lv1.htmlをご 確 認 下 さい 9
HTML5プロフェッショナル 認 定 試 験 は サーバエンジニア Webデザイナー データベースエンジニアなど 多 くに が 学 んでほしい 試 験 と 思 います なぜなら Webサーバ HTMLやCSS データベースは ブラウザからの 操 作 を 常 的 に 使 する 現 代 社 会 においては 相 互 に 強 く 連 携 しあうものだからです! 10
Linux Security HTML5 Network 11
2HTML5レベル1を 学 習 する 上 での ポイント 12
HTMLを 書 いてみる CSSでデザインをしてみる 様 々なホームページのソースを まくる まさに 使 ってみること! 13
学 習 教 材 LPI-Japan 認 定 教 材 アカデミック 認 定 校 http://html5exam.jp/measures/textbook.html http://html5exam.jp/measures/learning.html 14
他 の 技 術 解 説 セミナー 資 料 等 も 参 考 にする http://html5exam.jp/news/event/ 15 HTML5メールマガジンで 定 期 的 の 情 報 を する https://www.lpi.or.jp/html5exam/html5exam_mail/mail.php
サンプル 問 題 でテスト 対 策 http://html5exam.jp/measures/sample.html 16
合 格 者 の 声 を 参 考 にする http://html5exam.jp/merit/success.html Web 系 勉 強 会 などに 参 加 し 緒 に 学 べる 仲 間 を 探 す! #TechBuzz HTML5+JS 勉 強 会 (https://atnd.org/groups/html5) 17 html5j(http://html5j.org/)
3 技 術 解 説 18
HTML5とは 2014 年 10 28 にW3Cによる 勧 告 がされたHTMLフォーマット 以 前 のHTMLでは 実 現 することが 難 しかった 機 能 ( 描 画 位 置 情 報 利 など)をAPI(Application Programming Interface)として 定 義 し JavaScriptから 利 出 来 るなどしたもの つまりは より 由 度 が 増 した!! w3c(world Wide Web Consortium) http://www.w3.org/tr/html5/ 19
1.Webの 基 礎 知 識 20
HTTPによる 通 信 ブラウザ(クライアント) TCP 通 信 の 開 始 (TCP 3way handshake) Syn Syn Ack Ack Webサーバ TCP 通 信 の 切 断 HTTP Request GET /html5 / HTTP1.1 HTTP Response HTTP/1.1 200 OK Fin Ack Fin Ack 21
HTTP Request Method メソッド 名 説 明 GET HTTPリクエストURIで 指 定 されたリソース 取 得 POST Webサーバへのデータ 送 信 追 加 HEAD HTTPヘッダのみを 取 得 PUT 指 定 したリソースの 保 存 OPTIONS Webサーバのサポートしているメソッド 情 報 などを 取 得 DELETE 指 定 したリソースの 削 除 TRACE ループバック 試 験 に 使 CONNECT プロキシへSSLトンネリングなどを 要 求 22
HTTP Status Codes 23 ステータスコード メッセージ 説 明 1XX Informational 情 報 100 Continue 継 続 2XX Successful 成 功 200 OK リクエスト 成 功 3XX Redirection リダイレクション 301 Moved Permanently リソースが 恒 久 的 に 移 動 4XX Client Error クライアントエラー 401 Unauthorized 認 証 が 必 要 403 Forbidden アクセス 出 来 ない 404 Not Found リソースが 存 在 しない 5XX Server Error サーバエラー 500 Internal Server Error サーバ 内 部 エラー 参 照 元 :http://www.w3.org/protocols/rfc2616/rfc2616-sec10.html
パケットキャプチャなどのツールから メソッドやステータスコードは 確 認 出 来 る 24
URL(Uniform Resource Locator)の 構 成 要 素 URLとは インターネット 上 のリソースの 場 所 を す 字 列 である スキーム 名 ://ドメイン 名 :ポート 番 号 /ファイルパス?クエリ 字 列 #フラグメント 識 別 スキーム 名 (http ftp fileなど) ドメイン 名 (kujiraitakahiro.comなど) ポート 番 号 (80 443など) ファイルパス(index.htmlなど) クエリ 字 列 (x=abcde) フラグメント 識 別 (xxx) http://kujiraitakahiro.com:80/index.html?x=abcde#xxx また 似 たようなものであるURI(Uniform Resource Identifier)とは インターネットに 限 らずリソースの 場 所 を す 字 列 である 25
その 他 重 要 なキーワード Basic 認 証 /Digest 認 証 HTTP cookie HTTPヘッダー SSL/HTTPS 26
2. 要 素 27
1HTML4.01 以 前 の 要 素 及 び 属 性 <HEAD> <TITLE> <BASE> <META> <BODY> <DIV> <H1>~<H6> <P> <BR> <PRE> <TR> <TD> <TH> <LINK> <FORM> <INPUT> id 属 性 lang 属 性 など 試 験 ではこれらお 馴 染 みのものについても しっかり 把 握 しておく 必 要 がある 28
2HTML5で 追 加 された 要 素 及 び 属 性 <section> <article> <aside> <hgroup> <header> <footer> <nav> <figure> <figcaption> 書 構 造 化 の 為 に 追 加 <canvas> <audio> <video> <source> <track> <embed> <mark> <progress> <meter> <time> 描 画 動 画 / 声 再 外 部 アプリ 埋 め 込 み 等 の 為 に 追 加 <ruby> <rt> <rp> <bdi> <wbr> ルビやテキスト 表 の 為 に 追 加 29
<command> <details> <summary> <detalist> <keygen> <output> input 要 素 のtype 属 性 (tel/search/url/email/datetime/date/month/week/time/ datetime-local/number/range/color) style 要 素 のscoped 属 性 html 要 素 のmanifest 属 性 data-* 属 性 30
書 構 造 化 (セマンティック)とは? <div <header> id= header > ヘッダー <div id= content1 > <article> 記 事 1 <div id= content2 > <article> 記 事 2 <div <footer> id= footer > フッター サイドバー <aside> <div id= side > ブログをイメージすると わかりやすいかも! 31
Videoタグ( 使 する 属 性 による 違 いを てみましょう!) 32
<!doctype htlm> <head> <meta charset="utf-8" http-equiv="content-type" lang="ja"> <title>videoタグのテストページ</title> </head> <body> <h2>zeus IT Camp Ginzaから た 東 京 駅 </h2> <video src="ginza.mp4" height="576" width="1024" controls> <!-- autoplay loop preload posterなども 属 性 もあるよ --> </body> 33
ルビタグ( 使 する 属 性 による 違 いを てみましょう!) <ruby> 鯨 <rt>くじら</rt></ruby><ruby> 井 <rt>い</rt></ruby> <!-- 漢 字 毎 にルビ --> <ruby> 鯨 井 <rt>くじらい</rt></ruby> <!-- 全 体 にルビ --> 34
canvasタグ 様 々なメソッドを 使 して 線 や 円 などの 描 画 を うことが 出 来 る では 早 速 実 際 にやってみましょう!! 35
3HTML5で 廃 された 要 素 及 び 属 性 <basefont><big><center><font><strike><tt> CSSで 扱 えばいいので 廃 <frame><frameset><noframes> <acronym><applet><isindex><dir> あまり 使 されていなかったり 使 いやすさの 為 に 廃 link 要 素 のtarget 属 性 html 要 素 のversion 属 性 caption/iframe/img/input/object/ledgendなどの 要 素 のalign 属 性 body 要 素 のbackground 属 性 td/th 要 素 のheight/nowrap 属 性 hr 要 素 のsize 属 性 など 36
3.CSS3 37
CSSとは Cascading Style Sheetsの 略 で HTML(Hyper Text Markup Language)で 書 かれた 内 容 に 対 して どのような 飾 りつけ( 画 像 の きさや 幅 幅 や 字 の 装 飾 など)を うかという 仕 様 38
39
index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>cssのサンプル</title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body> <h1 id="first">cssのサンプルページ</h1> <div class="second">ここはdivタグで 表 されている 部 分 です</div> </body> </html> 40
index.css h1#first{ color:red; text-decoration: underline; } 字 アンダーラインで 装 飾 41 div.second{ background:orange; width:1000px; height:100px; padding:5px; border-color:brown; border-style:solid; border-width:7px; border-radius:30px; box-shadow:10px 10px 10px darkorange; text-align: center; font-size: 30px; font-style: italic; font-weight: bold; color: blue; } boxのサイズや 背 景 指 定 boxの 境 界 / 取 り/ 影 を 指 定 フォントに 関 する 装 飾
スタイルシートの 使 い 1 head 要 素 やbody 要 素 内 のstyle 要 素 にCSSを 書 く <html> <head> </head>, <html> <style type= text/css > p { color: red;} </style> 42
スタイルシートの 使 い 2 link 要 素 にて 外 部 のCSSを 読 み 込 む <html> <head> <link rel= stylesheet href= index.css type= text/css >, </head>, </html> 43
スタイルシートの 使 い 3 @importを 使 し CSS 内 から 外 部 CSSを 読 み 込 む @import url( index.css ); スタイルシートの 使 い 4 各 要 素 のstyle 属 性 でスタイルを 指 定 <p style= color: red; > Test Message </p> 44
CSSの 書 き セレクタ { プロパティ: 値 ; } 例 : p { color: red; } セレクタ p 要 素 を 指 定 プロパティ セレクタにおける 変 更 部 の 指 定 値 プロパティの 変 更 内 容 45
4.レスポンシブWebデザイン 46
レスポンシブWebデザインとは デバイスや 画 表 の きさによって CSSを 切 り 替 える など 47
表 するデバイス 等 の きさによって 画 像 サイズを 最 適 化!! 48
実 際 のWebぺージで てみると こんな 感 じです! http://www.muji.com/jp/ 49
しかし 最 適 化 を う 為 にはデバイス 等 の 解 像 度 について 知 っておく 必 要 がある! Galaxy S3 SC-06D(720 1,280) Galaxy Tab S 8.4 SC-03G(1,600 2,560) iphone6(1,334 750) ipone6s Plus(1,920 1,080) ARROWS NX F-04G(1,440 2,560) 4K(4,096 2,160) 50
51 <!doctype html> <html> <head> <meta=charset="utf-8"> <title>pictures Test</title> <link rel= stylesheet media= all href= small.css > <link rel="stylesheet" media="all" href="middle.css"> <link rel="stylesheet" media="all" href="large.css"> <link rel= stylesheet media= all href= xlarge.css > </head> <body> <img src=1200_400.png id="picture1"><br> <img src=900_300-1.png id="picture2"><br> <img src=900_300-2.png id="picture3"><br> <img src=600_200.png id="picture4"><br> </body> </html>
small.css ( 幅 640pxまで) @media screen and (max-width: 640px){ img#picture1 { max-width: 50%; height: auto; } img#picture2 { max-width: 70%; height: auto; } img#picture3 { max-width: 70%; height: auto; } img#picture4 { max-width: 100%; height: auto; } } middle.css ( 幅 640px 900pxまで) @media screen and (min-width: 640px) and (max-width: 900px){ img#picture1 { max-width: 75%; height: auto; } img#picture2 { max-width: 100%; height: auto; } img#picture3 { max-width: 100%; height: auto; } img#picture4 { max-width: 100%; height: auto; } } 52
large.css ( 幅 1200pxまで) @media screen and (max-width: 1200px){ img#picture1 { max-width: 100%; height: auto; } img#picture2 { max-width: 100%; height: auto; } img#picture3 { max-width: 100%; height: auto; } img#picture4 { max-width: 100%; height: auto; } } xlarge.css ( 幅 1920pxまで) @media screen and (max-width: 1920px){ img#picture1 { max-width: 100%; height: auto; } img#picture2 { max-width: 100%; height: auto; } img#picture3 { max-width: 100%; height: auto; } img#picture4 { max-width: 100%; height: auto; } } 53
5.オフラインWebアプリケーション 54
アプリケーションキャッシュとは オフラインでもローカルに 保 存 されたファイルから Webアプリケーション 等 が 利 できる 仕 組 みのこと サーバ 負 荷 軽 減 や 起 動 の 速 化 の 効 果 もあり! マニフェストファイルとは どのファイルをキャッシュするかを 指 定 する 為 のもの 55
マニフェストファイルのセクション CACHE MANIFEST 1 に 必 ず 書 くと 決 まり CACHE キャッシュするファイルを 記 述 省 略 可 FALLBACK URLからリソースが 取 得 出 来 ない 場 合 などに 利 される 代 替 ファイルを 指 定 NETWORK 必 ずネットワークから 取 得 するファイルを 指 定 56
HTML 内 でマニフェストファイルを 指 定 (html 要 素 でmanifest 属 性 を 指 定 ) マニフェストファイルでは キャッシュするファイル 名 を 記 載 57
各 ブラウザでは オプションメニューなどからキャッシュ 状 況 を 確 認 可! 58
Firefoxでは URL 欄 に about:cache とすれば 具 体 的 なキャッシュされているデータが 確 認 可! 59
60
4サンプル 問 題 61
サンプル 問 題 1 HTML5のコンテンツ モデルにおいて セクショニング コンテンツである 要 素 の 組 み 合 わせで 適 切 なものはどれか 正 しいものを1つ 選 びなさい A.h1 h2 h3 h4 h5 h6 B.footer header main section C.blockquote body fieldset figure td D.article aside nav section 62
サンプル 問 題 2 Data URIについての 解 説 で 誤 っているのを 選 択 してください A. 主 にWebサイト 表 の 速 化 のための 技 術 である B. 画 像 ファイルなど HTMLファイルの 外 にあるファイルの 場 所 を 指 すURIである C. 画 像 データのエンコードはBase64 形 式 で なわれる D.ブラウザによって 対 応 状 況 に 差 がある E.HTML CSSで 使 できる 63
サンプル 問 題 3 Web 制 作 においてCSSの 設 定 が 複 雑 化 し ともすれば 破 綻 しかねないケースがある 近 年 Web 制 作 のシー ンでCSSを 効 率 的 に 運 するための 運 管 理 命 名 規 則 などのルールや 指 針 がいくつも 発 表 されている 次 の 中 で CSSの 効 率 的 な 運 法 のルール 指 針 と 最 も 関 係 が 薄 いものはどれか 1つ 選 びなさい A.SMACSS B.DOM C.OOCSS D.BEM 64
サンプル 問 題 4 次 のlink 要 素 のうち style.css を 正 しく 読 み 込 む 書 き をしているものはどれか 2つ 選 びなさい A.<link href="style.css"> B.<link href="style.css" type="text/css"> C.<link rel="stylesheet" href="style.css"> D.<link rel="stylesheet" href="style.css" type="text/css"> E.<link rel="stylesheet" href="style.css" type="text/plain"> 65
サンプル 問 題 5 HTML5で 万 部 という 漢 字 にルビをふる 際 のマークアップとして 法 的 に 正 しくないものをすべて 選 びなさい A.<ruby> 万 部 <rt>おしゃまんべ</ruby> B.<ruby> 万 部 <rt>おしゃまんべ</rt></ruby> C.<ruby> 万 部 <rp>(</rp><rt>おしゃまんべ</rt><rp>)</rp></ruby> D.<ruby><rb> 万 部 <rp>(<rt>おしゃまんべ<rp>)</ruby> E.<ruby><rtc><rb> 万 部 </rb><rt>おしゃまんべ</rt></rtc></ruby> 66
サンプル 問 題 6 次 の 要 素 のうち セクションを す 要 素 ではないものはどれか 1つ 選 びなさい A.nav B.main C.aside D.article E.section 67
サンプル 問 題 7 スマートフォンでホーム 画 にWebページへのリンクを 作 成 する 場 合 に アイコンとして 使 される 画 像 を 指 定 するrel 属 性 を つ 選 びなさい A.apple-touch-icon B.touch-icon C.apple-touch-icon-precomposed D.touch-icon-precomposed 68
サンプル 問 題 8 メディアクエリの 記 述 として 間 違 っているものを1つ 選 びなさい A.@media screen and (color) {... } B.@media screen or (color) {... } C.@media screen and (color), projection and (color) {... } D.@media not screen and (color) {... } E.@media only screen and (color) {... } 69
サンプル 問 題 9 キャッシュマニフェストファイルで 必 ずネットワーク 経 由 でアクセスするリソースを 記 述 するセクションは 次 のうちどれか 正 しいものを つ 選 択 しなさい A.CACHE B.NETWORK C.FALLBACK D.ONLINE E.NOCACHE 70
サンプル 問 題 10 オフラインウェブアプリケーションにおけるマニフェストファイルに 関 する 記 述 として 間 違 っているものを1つ 選 びなさい A. には CACHE MANIFEST と 記 述 する 必 要 がある B.#から 始 まる はコメントとなる C. 対 象 ファイルとして 拡 張 が.html.html.cssのファイルのみ 指 定 可 能 である D.CACHE FALLBACK NETWORKの3つのセクションが 存 在 する E.マニフェストファイルは 通 常 Webサーバ 上 に 配 置 する 71
5お 知 らせ 72
73 詳 しくは http://www.zeus-enterprise.co.jp/
https://www.it-camp.jp/ 74
https://www.it-camp.jp/ 75
https://www.it-camp.jp/ 76
6 質 疑 応 答 77
Open the Future with HTML5. 78