HTML5クイズ!
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5クイズ!

on

  • 10,045 views

デブサミ2012のhtml5j.orgブースで実施された「HTML5クイズ!」の解説です。

デブサミ2012のhtml5j.orgブースで実施された「HTML5クイズ!」の解説です。

Statistics

Views

Total Views
10,045
Views on SlideShare
3,075
Embed Views
6,970

Actions

Likes
3
Downloads
10
Comments
0

9 Embeds 6,970

http://www.atmarkit.co.jp 6948
http://webcache.googleusercontent.com 8
http://aitcms-w.atmarkit.co.jp 4
http://preview.itmedia.co.jp 4
http://pre-www.atmarkit.co.jp 2
http://us-w1.rockmelt.com 1
http://www.icm-report.com 1
http://akeytoti.jugem.jp 1
http://honyaku.yahoofs.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5クイズ! Presentation Transcript

  • 1. HTML5クイズ! 2012/3/13(火) nifty 第27回HTML5とか勉強会 Toru Yoshikawa ( @yoshikawa_t )
  • 2. @デブサミ2012HTML5クイズ!やりました
  • 3. 豪華景品! 総参加者 207名 !
  • 4. Summary2日間での総参加者207名うち初級コース123名、上級コース84名Google、Microsoft、Mozilla、Opera、W3C、Yahoo!に協力頂き、景品としてノベルティを提供して頂きました。感謝!クイズの得点によって貰える景品が変わり、ランキングの表示も100点は、上級コースは1名、初級コース4名という難度の高いクイズに…開発は3日ぐらい?、問題作成はほとんど前日に、当日に問題アレンジ…
  • 5. アンケート項目HTML5について、どんな要素やAPIがあるのか概要を 47.82%知っている。HTML5について、実際に調べたり、記述したことがあ 66.18%る。概要は知らないが、調べたり記述したりしたことがあるひと (49.07%)
  • 6. HTML5クイズ!にチャレンジ
  • 7. Rule最初の2問のアンケートで両方とも「はい」を答えると上級コース、それ以外は初級コース各コース5問、同点は回答スピードが早いほうが上位になる上級コース上位2名、初級コース2名に景品プレゼント!初級コース、上級コースいずれでも、両方でも参加可能(上級コースは得点数、初級は回答スピードが肝?)デブサミ2012にて既にクイズをやったことのある人は景品のほうは辞退して頂けると助かります(参加はOK!)未参加者の方へのネタバレは注意!
  • 8. クイズ中…
  • 9. HTML5クイズ!一般公開アドレス http://bit.ly/html5quiz
  • 10. 解説
  • 11. 初級コース
  • 12. 初級コース 第1問 [SEMANTICS]HTML5では、<font>要素が廃止された。 正しい 間違い
  • 13. 初級コース 第1問 [SEMANTICS] 正答率64.23%間違い HTML5では、見た目にしか影響し ない要素は廃止された(見た目は35.77% 正しい CSSで定義する) 64.23% 他にもbig、center、uなどの要素 が廃止されている samllは、注釈や細めを表す意味に 変更された
  • 14. 初級コース 第2問 [OFFLINE & STORAGE]Local Storageに保存されたデータでもブラウザを再起動すると消える。 正しい 間違い
  • 15. 初級コース 第2問 [OFFLINE & STORAGE] 正しい 正答率84.55% 15.45% Session StorageとLocal Storageの 違いを問う問題。 Local Storage は、ブラウザを再起動しても保存間違い される。消えてしまうのはSession Storage84.55% その他の注意点として、Session Storageは、複数ウィンドウ間で 共有できない
  • 16. 初級コース 第3問 [MULTIMEDIA]ウェブページに埋めこまれているビデオをプラグインなしで見るにはHTML5が必要になる。 正しい 間違い
  • 17. 初級コース 第3問 [MULTIMEDIA] 正答率67.48%間違い video要素を利用するとプラグイン32.52% なしでビデオを再生できる(再生 正しい できるコーデックは限られる) 67.48% ただし、現状では動画再生アプリ が立ち上がるデバイスもある 最初は、「iPhone・iPadでビデオ を見るには∼」だったが、Quick
  • 18. 初級コース 第4問 [GRAPHICS & EFFECTS]Canvasには、アニメーション用の機能がある。 正しい 間違い
  • 19. 初級コース 第4問 [GRAPHICS & EFFECTS] 正答率17.07%間違い 正確には、Canvas 2D Context。17.07% 2Dグラフィックスのための仕様 で、アニメーションについては規 正しい 定されていない 82.93% Canvasでアニメーションを表現す るためには、紙芝居のようにする svgには、anime要素などがある
  • 20. 初級コース 第5問 [CSS3]CSS Animationsでアニメーションを定義するブロックは@keyframesと呼ばれる 正しい 間違い
  • 21. 初級コース 第5問 [CSS3] 正答率45.56% 初級コースにはやや難しいと思わ 正しい れる知識問題間違い 45.56% @keyframesでアニメーションを定54.44% 義する。from、to、xx%で記述 要素に適用するには、animation- nameでアニメーション名、 animation-durationで時間を指定す る
  • 22. 上級コース
  • 23. 上級コース 第1問 [SPECIFICATION]HTML5仕様の現在の状態は? 最終草案(Last Call Working Draft) 勧告候補(Candidate Recommendation) 勧告案(Proposed Recommendation) 勧告(Recommendation)
  • 24. 上級コース 第1問 [SPECIFICATION] 勧告 正答率36.90% 7.14%勧告案 最終草案 HTML5は、2011年5月25日にLast20.24% 36.90% Callが宣言された 勧告候補 ここでいうHTML5は、Markupや Microdata、Canvasなど 35.71% 勧告は、2014年を予定しているが 果たして…
  • 25. 上級コース 第2問 [DEVICE ACCESS]Geolocation API Level2で加わった主な変更として最も適切なのは何か? 住所の情報を取得できるようになった GPSや基地局情報など、位置情報の取得元を選択できるようになっ た 現在地から目的地までのルート情報を取得できるようになった 大きな変更は特にない
  • 26. 上級コース 第2問 [DEVICE ACCESS] 変更なし   住所取得 正答率19.05% 8.33%ルート取得 19.05% Geolocation API Level2では、17.86% Addressインターフェースが追加さ れ住所が取得できるようになった 取得元の選択 位置情報の取得元については抽象 54.76% 化されている ルート取得に関する規定はなし
  • 27. 上級コース 第3問 [OFFLINE & STORAGE]Indexed Database APIについて正しいものはどれか? データベースの操作はSQLで行う オブジェクト・ストアには、JavaScriptのオブジェクトを保 存できる オブジェクト・ストアの作成や変更は、いつでも可能である
  • 28. 上級コース 第3問 [OFFLINE & STORAGE] 正答率65.48% SQL操作いつでも定義変更可     11.90% Indexed Databaseは、KVS型の 22.62% データベース。SQL操作は、Web SQL Databaseで可能。 JSオブジェクト保存可 JavaScriptオブジェクトの保存が 可能(structured clone) 65.48% IndexedDBでは、スキーマの変更 はVERSION_CHANGEトランザク ションで行う(DBのopen時)
  • 29. 上級コース 第4問 [CONNECTIVITY]セキュアなWebSocketであるwssスキームがデフォルトで使用するポート番号はどれか? 80 81 443 815
  • 30. 上級コース 第4問 [CONNECTIVITY] 正答率53.57% 「80」「815」20.24% 14.29% WebSocketが利用するポートの問 「81」 題。HTTP/HTTPSと同じポートを 11.90% 利用するため、ルータやFWを越 えることができる特徴を持つ「443」 あとは、HTTPS(SSL)のポート番号 53.57% を知っているかどうか もちろん他のポートを利用可能
  • 31. 上級コース 第5問 [MULTIMEDIA]Web Audio APIの仕様として定められている機能で間違っているものはどれか 複数のスピーカーを使って3D音場を再現できる デバイスのマイクから入力した音をルーティングするこ とができる ブラウザが基本的なエフェクト機能を実装している
  • 32. 上級コース 第5問 [MULTIMEDIA] 正答率35.71% 3D音場 20.24% Web Audio APIは、音声の再生、生基本エフェクト用意 成を可能とする仕様 44.05% 音声の出力方向を調整するAudio マイク入力をルーティング Node(Panner)などでマルチチャネル 対応 35.71% マイク入力を取得する機能はない 基本的なエフェクトが用意されてい いる
  • 33. おまけ
  • 34. おまけ問題 [WebGL]WebGLの仕様はOpenGL ES 2.0ベースだが、異なる部分も存在する。以下の定数の内、WebGLでしか定義されていないものはどれか UNPACK_FLIP_Y_WEBGL UNPACK_ALIGNMENT PACK_ALIGNMENT
  • 35. ランキング発表http://bit.ly/html5quiz2
  • 36. HTML5は最新情報をキャッチアップするのが大変ですね
  • 37. 今すぐhtml5j.orgに参加!
  • 38. Thank you!!