Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

New Norm of HTML5

1.261 Aufrufe

Veröffentlicht am

HTML5 感。で使用したスライド
http://html5exam.jp/newsdetail/seminar20161016/

Veröffentlicht in: Technologie

New Norm of HTML5

  1. 1. 
 

  2. 2.
  3. 3.
  4. 4. WHATWG HTML W3C
 HTML5 Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. Micro- data Web Storage
  5. 5. ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. Filter Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Pro- mise Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Micro- data Itera- tors Proxy Collec- tions Mask- ing Web Storage
  6. 6. Net Info Web Socket Protocol APNG Full- screen ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Presen- tation SSL Opus mp3 H.264 FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Battery Status Shared Workers Web Crypto Page Visibility File Pointer Events Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Navi. Timing Beacon Writing Mode Web Anima- tions IETF OGP Micro- data data URL Itera- tors Proxy Collec- tions Permi- ssions DOM fetch EME Brotli Mask- ing Progressive Enhancement Web Storage Quarks Mode UI Events QUIC Origin HPKP
  7. 7. Net Info Web Socket Protocol APNG Full- screen WebRTC HTML Components ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Game- pad Media Stream data channel Presen- tation Push SSL Media Recorder Opus mp3 H.264 Service Worker FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Web Audio Battery Status Generic Sensor Shared Workers SIMD Web Crypto temp- lates Shadow DOM Custom Elements Page Visibility FIDO Grid Layout File Pointer Events MIDI Speech Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Async Func. Navi. Timing Beacon Exclu- sions Writing Mode Web Anima- tions IETF Khronos OGP Game, VR & High
 Performance Apps Progressive Web Apps Real-Time
 Communications Device
 Control Extensible
 for Anything! Micro- data data URL ORTC WebVR Shared Mem. Itera- tors Proxy Collec- tions asm.js Permi- ssions DOM WebGL fetch Web Assembly EME Brotli Mask- ing Progressive Enhancement Web App Manifest Web Storage Quarks Mode UI Events QUIC Origin Blue- tooth USB HPKP
  8. 8.
  9. 9.
  10. 10. “Implementations and specifications have to do a delicate dance together”
  11. 11. “focus on standardizing new low-level capabilities”
  12. 12. “仕様と実装と 利用の競演が織 りなすオペラ”
  13. 13.
  14. 14. // 左から右へ水平に、上から下へ垂直方向に .exampleText1 { width:75px; writing-mode: horizontal-tb; } // 上から下へ垂直に、左から右へ水平方向に .exampleText2 { height:75px; writing-mode: vertical-lr; } // 上から下へ垂直に、右から左へ水平方向に .exampleText3 { height:75px; writing-mode: vertical-rl; } // 上から下へ垂直に、すべてのグリフを左へ横倒し .exampleText4 { height:75px; writing-mode: sideways-lr; } // 上から下へ垂直に、すべてのグリフを右へ横倒し .exampleText5 { height:75px; writing-mode: sideways-rl; }
  15. 15. 
 

  16. 16. 
 
 

  17. 17.
  18. 18. var ab = new ArrayBuffer(1024); var sab = new SharedArrayBuffer(1024); var worker = new Worker("worker.js"); console.log(uInt8Array.byteLength); // 1024 worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); // ArrayBuffer は Worker に渡すとメインスレッドではクリアされる console.log(uInt8Array.byteLength); // 0 console.log(sab.byteLength); // 1024 worker.postMessage(sab, [sab]); // SharedArrayBuffer は Worker に渡してもメインスレッドに残る console.log(sab.byteLength); // 1024
  19. 19.
  20. 20. <!-- A-Frame ライブラリの読み込み --> <script src="aframe.js"></script> <!-- 3D シーンの定義 --> <a-scene> <!-- アセットの定義 --> <a-assets> <video id="video" src="360video.mp4"></video> </a-assets> <!-- 全天球動画の読み込み表示も専用タグで超簡単 --> <a-videosphere src="#video"></a-videosphere> </a-scene>
  21. 21.
  22. 22. 
 
 
 
 

  23. 23. 
 

  24. 24.
  25. 25.
  26. 26. 
 
 

  27. 27. 
 
 

  28. 28. 
 
 

  29. 29. { "short_name": "れっさーもふもふ", "name": "レッサーパンダのもふもふ素敵アプリ!", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" }
  30. 30.
  31. 31.
  32. 32.
  33. 33.
  34. 34.

×