PowerPoint プレゼンテーション - PDF 無料ダウンロード

HTML5 とは 2014 年 10 月正式勧告マルチデバイスマルチメディア対応リッチクライアントアプリケーションのプラットフォーム広義では CSS3 や JavaScript による 3D グラフィック WebSocket デバイスアクセスクライアントストレージ等も含む 4 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

HTML5 プロフェッショナル認定試験とは特定非営利活動法人 LPI-Japan が実施する HTML5 および周辺技術の知識レベルを測る認定制度です試験の難易度を示す2 種類のレベルがあり段階的に受験します Level1 Level2 マルチデバイスに対応した静的なWebコンテンツを HTML5を使ってデザイン作成できるレベルシステム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的 Webコンテンツの開発設計ができるレベル 5 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

受験について基本的に試験方式はコンピュータベーストテスト (CBT) ですが学校などの団体受験用にペーパーテスト (PBT) も選択可能です通年受験可能試験の詳細は以下の通り問題数試験時間合格ライン約 65 問 90 分約 7 割回答方式殆どが選択式 ( 複数回答あり ) 記述式も 1 問程度受験料 15,000( 税抜 ) 7 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

Web の仕組み HTTP HTTPとは Webクライアント ( ブラウザ ) とWebサーバー間でコンテンツを送受信するための通信方法を規定したもの WebクライアントからWebサーバーに対しての要求をリクエストといいそれに対してWebサーバーから応答を返すことをレスポンスという WWW リクエスト (URL を指定 ) レスポンス (HTML を渡す ) HTML Web クライアント WEB サーバー 12 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

HTTP に関する頻出問題メソッドの種類 ( リクエスト ) GET/POST/HEAD/PUT/DELETE などステータスコードの種類 ( レスポンス ) 1xx 2xx 3xx 4xx 5xx 情報成功転送クライアントエラーサーバーエラーヘッダの種類 ( リクエストレスポンス ) User-Agent/Referer/Content-Type など 13 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

セキュリティ ( 攻撃手法と対策 ) SQL インジェクション入力フォームなどに SQL 文を挿入しデータベースを不正操作するクロスサイトスクリプティング (XSS) 掲示板などに悪意のある JavaScript のコードを書き込む 14 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

SQL インジェクション正常な問合せ 1 一般ユーザーの操作 ID を表示 http://shop.example.com/item.php?id=5 RDB 2 データベース側での処理 SELECT * FROM items WHERE id = '5'; 16 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

SQL インジェクション不正な問合せ 1 攻撃者の操作 ID を表示 http://shop.example.com/item.php?id=' OR 1 = 1;-- RDB 2 データベース側での処理 SELECT * FROM items WHERE id = '' OR 1 = 1;--'; id が空文字か 1==1( 実質検索条件なし ) -- 以降は無効化全データが抽出されてしまう! 17 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

SQL インジェクション対策方法 1 特殊文字をエスケープする開発言語が用意しているエスケープ関数などを利用する対策方法 2 あらかじめ SQL を用意しておき可変の部分だけを置き換えるプリペアードステートメントという仕組みを利用する 18 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

XSS XSS とは? 掲示板などのユーザーの登録した文字列が公開される場所にスクリプトを埋め込む攻撃主な被害正規ユーザーのクッキー盗難フィッシングサイトへの誘導サイト改ざん正式名称 Cross Site Scripting 19 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

XSS XSS の例掲示板 2 スクリプトを含んだ文章が掲載される <script> location.href = "http://crack.example.com" </script> 1 スクリプトを投稿 3 閲覧別のサイトに誘導されてしまう! 攻撃者一般ユーザー 20 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

その他ネットワークサーバ関連ドメイン /DNS/ プロキシ / ロードバランサ / ファイアーウォールデータベース SQL の種類 (CREATE/DROP/SELECT/INSERT/DELETE/UPDATE) Web 広告ペイパークリック / アドワーズ / アフィリエイト / コンバージョンレート 22 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

HTML5 の特徴 HTML5 の例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> サンプル </title> </head> <body> <p> 本文 </p> </body> </html> 省略できる属性が増えシンプルなシンタックスにセマンティック Web 対応 ( 見た目ではなく意味を重要視する ) 24 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

セクショニング要素 (HTML5 で追加 ) header( ヘッダ ) nav( ナビゲーションリンク ) section( 汎用的なセクション ) article( 記事として独立したセクション ) article( 記事として独立したセクション ) aside ( サイドバーや広告など ) footer( フッタ ) 25 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

video 要素 /track 要素 (HTML5 で追加 ) 動画の再生 (video)/ 字幕の表示 (track) <video src="video.mp4" controls autoplay loop></video> 26 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

progress/meter 要素 (HTML5 で追加 ) タスクの進捗状況を表す <progress value="75" max="100">100% 中 75% まで完了 </progress> 範囲内の数量割合などを表す <meter value="75" max="100" min="0">100 人中 75 人が回答 </meter> 27 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

ruby 要素 (HTML5 で追加 ) ルビを付与する <ruby> <rt> <rp> 対象テキストをマークアップルビテキストを指定ルビ未対応ブラウザでのみ表示 <ruby> 子守熊 <rp>(</rp><rt> コアラ </rt><rp>)</rp></ruby> ルビ対応ブラウザルビ未対応ブラウザ 28 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

バリデーション属性 (HTML5 で追加 ) バリデーション属性 <input> 要素に付与すると submit 時にチェックを行ってくれる required 必須 pattern 正規表現 min 最小値 / max 最大値名前 :<input type="text" required> 郵便番号 :<input type="text" pattern="^[0-9]{3}-[0-9]{4}$"> 年齢 :<input type="number" min="18" max="99"> 30 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

input type 属性値 (HTML5 で追加 ) input type 属性値 urlやemailを指定した場合フォーム送信時にURL メールアドレスの形式として正しいかバリデーションが行われる rangeを指定するとレンジバーが colorを指定するとカラーパレットが表示されるなど UIの拡張が行われる URL:<input type="url"> メールアドレス :<input type="email"> 数値 :<input type="number"> 検索キーワード :<input type="search"> 電話番号 :<input type="tel"> 日付 :<input type="date"> 範囲 :<input type="range"> 色 :<input type="color"> 31 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

マルチカラムレイアウトマルチカラムレイアウト ( 段組みレイアウト ) 長い文章などを指定したカラム数に分割して表示することができるマルチカラムレイアウトは長い文章などを指定したカラム数に分割して表示することができますこれは 3 つのカラムに分割したイメージです 34 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

フレキシブルボックスフレキシブルボックス ( 可変ボックスレイアウト ) 要素の中央揃えや均等揃えなどの配置を簡単に行うことができる主軸 ( 交差軸 ) 交差軸 ( 主軸 ) Flex アイテム Flex コンテナ Flex アイテム Flex アイテム 35 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

色 rgbt とは赤緑青の含有量を 0( 色なし ) 255( 原色 ) の範囲で表す方法カラーコード RGB を 6 桁の 16 進数で表現したコード #ff00ff; 赤が ff(255), 緑が 00(0), 青が ff(255) なので紫になる R G B の各 2 桁がすべて同じ値の場合に限り省略表記が可能 #ff00ff; #f0f; 37 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.

アニメーション transition プロパティスタイルを変更した際に変化の過程をアニメーションで表示する例 : 要素にマウスカーソルが乗ったら背景色を赤から青に変化させる animation プロパティ transitionとの違いはアニメーションを連続で実行することができる例 : 要素にマウスカーソルが乗ったら背景色を赤青緑黄色のように変化させる 38 Copyright Asial Corporation. LPI-Japan 2015. All Rights All rights Reserved. reserved.