new norm of html5

85

Upload: dynamis-

Post on 16-Apr-2017

974 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: New Norm of HTML5
Page 6: New Norm of HTML5
Page 7: New Norm of HTML5
Page 8: New Norm of HTML5
Page 10: New Norm of HTML5

ECMAScript2015

CSS Snapshot 2015

WHATWG

HTML

W3C HTML5

Elements& Syntax

WAI-ARIA

HTML5Parser

WebWorkers

WebSockets

API

Canvas2D

multimedia

ContentModel

appcache

sections

HTML5Forms

Server-Sent ev.

Filter

Layout

MediaQueries

trans-form

Tran-sitions &Anima-

tions

FlexBox

MultiColumn

Fonts

UserInter-face

Shapes

textdecora-

tion

Pro-mise

ClassModule

blockscope

TypedArray

ArrowFunc.

TemplateLiterals

Gene-rators

Micro-data

Itera-tors

Proxy

Collec-tions

Mask-ing

WebStorage

Page 11: New Norm of HTML5

NetInfo

WebSocket

Protocol

APNG

Full-screen

ECMAScript2015

CSS Snapshot 2015

WHATWG

HTML

W3C HTML5

URL

HTTP

TLS

Elements& Syntax

WAI-ARIA

HTML5Parser

WebWorkers

WebSockets

API

Canvas2D

multimedia

ContentModel

appcache

sections

HTML5Forms

Server-Sent ev.

geo-location

Orientation

Notifi-cations Presen-

tation

SSL

Opusmp3

H.264

FilterSVG WOFF

MathML RSS

Layout

MediaQueries

trans-form

Tran-sitions &Anima-

tions

FlexBox

MultiColumn

Fonts

UserInter-face

Shapes

textdecora-

tionIndexed

DB

vibra-tion

SMIL

VP10

HSTS

CORS

RDFRDFa

DNT

VP9WebM

OpenMedia

VP8

HTTP/2

PNG

BatteryStatus

SharedWorkers

WebCrypto

PageVisibility

File

PointerEvents

Pro-mise

CSP

ClassModule

blockscope

TypedArray

ArrowFunc.

TemplateLiterals

Gene-rators

Navi.Timing

Beacon

WritingMode

WebAnima-

tions

IETF

OGP

Micro-data

dataURL

Itera-tors

Proxy

Collec-tions

Permi-ssions

DOM

fetch

EMEBrotli

Mask-ing

Progressive Enhancement

WebStorage

QuarksMode

UIEvents

QUIC

Origin

HPKP

Page 12: New Norm of HTML5

NetInfo

WebSocket

Protocol

APNG

Full-screen

WebRTC

HTML Components

ECMAScript2015

CSS Snapshot 2015

WHATWG

HTML

W3C HTML5

URL

HTTP

TLS

Elements& Syntax

WAI-ARIA

HTML5Parser

WebWorkers

WebSockets

API

Canvas2D

multimedia

ContentModel

appcache

sections

HTML5Forms

Server-Sent ev.

geo-location

Orientation

Notifi-cations

Game-pad

MediaStream

datachannel

Presen-tation Push

SSL

MediaRecorder

Opusmp3

H.264

ServiceWorker

FilterSVG WOFF

MathML RSS

Layout

MediaQueries

trans-form

Tran-sitions &Anima-

tions

FlexBox

MultiColumn

Fonts

UserInter-face

Shapes

textdecora-

tionIndexed

DB

vibra-tion

SMIL

VP10

HSTS

CORS

RDFRDFa

DNT

VP9WebM

OpenMedia

VP8

HTTP/2

PNG

WebAudio

BatteryStatus

GenericSensor

SharedWorkers

SIMD

WebCrypto

temp-lates

ShadowDOM

CustomElements

PageVisibility

FIDO

GridLayout

File

PointerEvents

MIDI

Speech

Pro-mise

CSP

ClassModule

blockscope

TypedArray

ArrowFunc.

TemplateLiterals

Gene-rators

AsyncFunc.

Navi.Timing

Beacon

Exclu-sions

WritingMode

WebAnima-

tions

IETF Khronos

OGP

Game, VR & HighPerformance Apps

Progressive Web Apps

Real-TimeCommunications

DeviceControl

Extensiblefor Anything!

Micro-data

dataURL

ORTC

WebVR

SharedMem.

Itera-tors

Proxy

Collec-tions

asm.js

Permi-ssions

DOM

WebGL

fetch

WebAssembly

EMEBrotli

Mask-ing

Progressive Enhancement

WebApp

Manifest

WebStorage

QuarksMode

UIEvents

QUIC

Origin

Blue-tooth

USB

HPKP

Page 15: New Norm of HTML5
Page 17: New Norm of HTML5
Page 19: New Norm of HTML5

“Implementations and specifications

have to do a delicate dance

together”

Page 20: New Norm of HTML5

“focus on standardizing new low-level capabilities”

Page 21: New Norm of HTML5

“仕様と実装と利用の競演が織りなすオペラ”

Page 22: New Norm of HTML5
Page 26: New Norm of HTML5

// 左から右へ水平に、上から下へ垂直方向に .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; }

Page 30: New Norm of HTML5

LO+257)�&�����

Page 31: New Norm of HTML5
Page 32: New Norm of HTML5
Page 33: New Norm of HTML5
Page 34: New Norm of HTML5
Page 35: New Norm of HTML5
Page 36: New Norm of HTML5
Page 37: New Norm of HTML5

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

Page 38: New Norm of HTML5
Page 39: New Norm of HTML5
Page 40: New Norm of HTML5

BI>G�E�!�6834#)R/�

Page 41: New Norm of HTML5
Page 45: New Norm of HTML5

<!-- 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>

Page 48: New Norm of HTML5

BI>G�E�!����$K<#)�

Page 49: New Norm of HTML5
Page 50: New Norm of HTML5

�0;?D(�*"���

Page 51: New Norm of HTML5
Page 52: New Norm of HTML5
Page 53: New Norm of HTML5

H��%E$A9�+R@��� ���� �

Page 55: New Norm of HTML5
Page 56: New Norm of HTML5
Page 63: New Norm of HTML5
Page 64: New Norm of HTML5
Page 65: New Norm of HTML5
Page 66: New Norm of HTML5
Page 68: New Norm of HTML5
Page 69: New Norm of HTML5
Page 70: New Norm of HTML5
Page 71: New Norm of HTML5
Page 72: New Norm of HTML5
Page 73: New Norm of HTML5

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

Page 74: New Norm of HTML5
Page 75: New Norm of HTML5
Page 76: New Norm of HTML5
Page 77: New Norm of HTML5
Page 78: New Norm of HTML5
Page 79: New Norm of HTML5
Page 80: New Norm of HTML5
Page 81: New Norm of HTML5
Page 82: New Norm of HTML5
Page 83: New Norm of HTML5
Page 84: New Norm of HTML5

���!6834��-Q�S�"��

Page 85: New Norm of HTML5