Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

New Norm of HTML5

1.266 visualizaciones

Publicado el

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

Publicado en: Tecnología

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.

×