Level1_ key

Size: px

Start display at page:

Download "Level1_ key"

こうごかりこめ
4 years ago
Views:

1 HTML

2 1.5 API ( ) API API API API!2

3 HTML5 Web HTML5 Web Web HTML5 Web Web Web Web Web HTML5!3

4 Web HTML5 Web HTML Web Web Web API Web HTML Web Web!4

5 1 2 HTML/HTML5 HTML5 Javascript CSS Web API JavaScript Javascript Javascript Web D JavaScript CSS!5

6 1 2 HTML5 HTML5 Level1 (Markup Professional) HTML5 Level1 Exam ,000 HTML5 1 5 Web "HTML5 Web " WEB " "HTML5 HTML ,000( ) HTML5 2 HTML5 1 5 HTML5 Level2 (Application Development Professional) HTML5 Level2 Exam Web " " " " Web Web "API!6

7 1 (1) Web CSS HTTP,HTTPS 8 HTML 9 Web 6 7 CSS 9 ( ) 2 ( ) !7

8 1 (2) Web API API API 4 5 API 8 API 3!8

9 ᵒ ᵒ HTML5 ᵒ Web ᵒ Web!9

10 1.5.1 API video, audio HLS, MPEG-Dash, Media Source Extensions DRM Encrypted Media Extends Canvas SVG!10

11 !11

12 video <video controls="controls" src="video/video.m4v"></video> controls src <video controls="controls"> <source src="video/video.webm" type="video/webm"> <source src="video/audio.m4v" type="video/mp4"> </video>!12

13 audio <audio controls="controls" src="audio/audio.mp3"></audio> controls src <audio controls="controls"> <source src="audio/audio.mp3" type="audio/mpeg"> <source src="audio/audio.aac" type="audio/aac"> </audio>!13

14 !14

15 HLS!15

16 MPEG-DASH!16

17 Media Source Extensions!17

18 DRM!18

19 Encrypted Media Extensions!19

20 !20

21 Canvas!21

22 : Canvas <canvas id="cv" width="300" height="300"></canvas> <script> // canvas var cv = document.getelementbyid('cv'); var ctx = cv.getcontext('2d'); // ctx.fillstyle = 'rgb(128,100,162)'; // ( ) ctx.beginpath(); // ctx.arc(70, 70, 60, 0, Math.PI*2, false); // ctx.fill(); // </script>!22

23 !23

24 SVG!24

:SVG <svg version="1.1" xmlns="http://www.w3.

25 :SVG <svg version="1.1" xmlns=" width="200" height="200" > <circle cx="95" cy="95" r="90" opacity="1" fill-opacity="0" stroke="#1017f1" stroke-width="3"/> <rect x="50" y="50" width="20" height="50" fill="#1d24f2"/> <rect x="120" y="50" width="20" height="50" fill="#1d24f2"/> <path d="m C " fill-opacity="0" stroke="#1017f1" stroke-width="7" /> </svg>!25

26 1 A. : Canvas :SVG B. Apple: MPEG-DASH Microsoft:HLS C. : MSE :DRM D. : video : sound!26

27 1.5.2 API Geolocation API / DeviceOrientation Event, DeviceMotionEvent Touch Events, Pointer Events!27

28 (Geolocation API)!28

29 GeoLocation API GeoLocation API JavaScript ( / 0 90 ) ( / 0 ) / (GPS ) ( m )!29

30 /!30

31 Device Orientation Event Device Orientation Event Alpha,Beta,Gamma,(iOS ) Device Motion Events!31

32 !32

33 Touch Events!33

34 Pointer Events Pointer Events DOM3 Events,Touch Events Web (Safari,iOS )!34

35 2 A.Geolocation API GPS B.Pointer Events C.DeviceOrientation Events D.UI Events Touch Events!35

36 1.5.3 API WebStorage, Indexed Database API Application Cache, Service Workers Web Workers, Service Workers!36

37 HTML5 ( Cookie 4KB ) HTML5 Web Web Strage Indexed Database API!37

38 Web Strage!38

39 Indexed Database API!39

40 !40

41 Application Cache!41

42 Service Workers Web HTML ServiceWorker Web!42

43 !43

44 Web Workers!44

45 Service Workers Service Workers Service Worker HTTPS!45

46 3 A. Service Workers PC HTML B. Web Storage Indexed Database C. Application Cache D. Web Worker HTML!46

47 1.5.4 API AJAX XmlHttpRequest WebSocket, WebRTC Server-Sent Events!47

48 AJAX!48

49 XmlHttpRequest!49

50 !50

51 WebSocket API!51

52 WebRTC!52

53 !53

54 Server-Sent Events!54

55 4 A. XmlHttpRequest XML B. Server-Sent Events C. WebSocket Web D. WebRTC!55

56 1.5.1 API API API API : 1. A 2. B 3. C 4. D!56

57 Open the Future with HTML5. [PEC]

HTML5Lv2_ key

HTML5Lv2_ key HTML5 2 The HTML5 Logo is licensed under Creative Commons Attribution 3.0.Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ The HTML5 Logo is licensed under Creative Commons Attribution