HTML5 1 2019 8
1.5 API ( ) 1.5.1 API 1.5.2 API 1.5.3 API 1.5.4 API!2
HTML5 Web HTML5 Web Web HTML5 Web Web Web Web Web HTML5!3
Web HTML5 Web HTML Web Web Web API Web HTML Web Web!4
1 2 HTML/HTML5 HTML5 Javascript CSS Web API JavaScript Javascript Javascript Web D JavaScript CSS!5
1 2 HTML5 HTML5 Level1 (Markup Professional) HTML5 Level1 Exam 90 60 15,000 HTML5 1 5 Web "HTML5 Web " WEB " "HTML5 HTML5 90 40 45 15,000( ) HTML5 2 HTML5 1 5 HTML5 Level2 (Application Development Professional) HTML5 Level2 Exam Web " " " " Web Web "API!6
1 (1) Web CSS HTTP,HTTPS 8 HTML 9 Web 6 7 CSS 9 ( ) 2 ( ) 10 6 7!7
1 (2) Web API 4 5 3 API API 4 5 API 8 API 3!8
ᵒ ᵒ HTML5 ᵒ Web ᵒ Web!9
1.5.1 API video, audio HLS, MPEG-Dash, Media Source Extensions DRM Encrypted Media Extends Canvas SVG!10
!11
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
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
HLS!15
MPEG-DASH!16
Media Source Extensions!17
DRM!18
Encrypted Media Extensions!19
!20
Canvas!21
: 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
SVG!24
:SVG <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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="m140 130C130 180 60 180 50 130" fill-opacity="0" stroke="#1017f1" stroke-width="7" /> </svg>!25
1 A. : Canvas :SVG B. Apple: MPEG-DASH Microsoft:HLS C. : MSE :DRM D. : video : sound!26
1.5.2 API Geolocation API / DeviceOrientation Event, DeviceMotionEvent Touch Events, Pointer Events!27
(Geolocation API)!28
GeoLocation API GeoLocation API JavaScript ( 0 90 0 90 / 0 90 ) ( 0 180 0 180 / 0 ) / (GPS ) ( m )!29
/!30
Device Orientation Event Device Orientation Event Alpha,Beta,Gamma,(iOS ) Device Motion Events!31
!32
Touch Events!33
Pointer Events Pointer Events DOM3 Events,Touch Events Web (Safari,iOS )!34
2 A.Geolocation API GPS B.Pointer Events C.DeviceOrientation Events D.UI Events Touch Events!35
1.5.3 API WebStorage, Indexed Database API Application Cache, Service Workers Web Workers, Service Workers!36
HTML5 ( Cookie 4KB ) HTML5 Web Web Strage Indexed Database API!37
Web Strage!38
Indexed Database API!39
!40
Application Cache!41
Service Workers Web HTML ServiceWorker Web!42
!43
Web Workers!44
Service Workers Service Workers Service Worker HTTPS!45
3 A. Service Workers PC HTML B. Web Storage Indexed Database C. Application Cache D. Web Worker HTML!46
1.5.4 API AJAX XmlHttpRequest WebSocket, WebRTC Server-Sent Events!47
AJAX!48
XmlHttpRequest!49
!50
WebSocket API!51
WebRTC!52
!53
Server-Sent Events!54
4 A. XmlHttpRequest XML B. Server-Sent Events C. WebSocket Web D. WebRTC!55
1.5.1 API 1.5.2 API 1.5.3 API 1.5.4 API : 1. A 2. B 3. C 4. D!56
Open the Future with HTML5. [PEC] E-mail pec@pr.cri.co.jp http://www.c-place.ne.jp/ https://tlp.edulio.com/pec/seminars/!57