3. HTML5 Standard
Essential Training
넥스트 플랫폼 대표 / UI Developer
동 준 상 (naebon1@gmail.com)
저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential
번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developer's Cookbook
3
4. HTML5 Standard
Essential Training
넥스트 플랫폼 대표 / UI Developer
동 준 상 (naebon1@gmail.com)
저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential
번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developer's Cookbook
4
5. 목차 핵심직무능력 향상을 위한
HTML5 표준 활용 기술과 전략
01 HTML5 표준과 모바일웹 05 모바일웹 페이지 작성
02 HTML5 멀티미디어 06 터치기반 UI 프레임워크
03 HTML5 API 표준 07 Device API 표준
04 CSS3 실전적용 08 하이브리드 모바일 웹/앱
5
6. 02
HTML5 Multimedia
HTML5 Multimedia
HTML5 Rich Interactive App
Responsive web app with HTML5
6
7. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section
header
nav
command
7
8. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section article
header footer
nav canvas
command details
8
9. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section article hgroup
header footer audio
nav canvas embed
command details datalist
9
10. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section article hgroup aside
header footer audio video
nav canvas embed figure
command details datalist time
10
11. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section article hgroup aside
header footer audio video
nav canvas embed figure
command details datalist time
11
12. 02 HTML5 마크업 표준
HTML5 New Tags
Content Tags
section article hgroup aside
header footer audio video
nav canvas embed figure
command details datalist time
12
13. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video
13
14. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video Offline Editable
14
15. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video Offline Editable
DragDrop History
15
16. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video Offline Editable
DragDrop History Protocol Protocol
16
17. 02 HTML5 마크업 표준
HTML5 New APIs
Associated APIs
Geolocation
Web Worker
17
18. 02 HTML5 마크업 표준
HTML5 New APIs
Associated APIs
Geolocation 2D Canvas
Web Worker Web Sockets
18
19. 02 HTML5 마크업 표준
HTML5 New APIs
Associated APIs
Geolocation 2D Canvas Local Storage
Web Worker Web Sockets Messaging
19
20. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4)
H.264
20
21. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4)
H.264
AAC
Safari, IE9, Flash
21
22. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4) OGG (.ogv)
H.264 Theora
AAC
Safari, IE9, Flash
22
23. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4) OGG (.ogv)
H.264 Theora
AAC Vorvis
Safari, IE9, Flash Chrome, Ffox, Op
23
24. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4) OGG (.ogv) WEBM (.webm)
H.264 Theora VP8
AAC Vorvis
Safari, IE9, Flash Chrome, Ffox, Op
24
25. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4) OGG (.ogv) WEBM (.webm)
H.264 Theora VP8
AAC Vorvis Vorvis
Safari, IE9, Flash Chrome, Ffox, Op Chrome, Ffox, Op
25
26. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
<video controls height="360" width="640“>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
</video>
26
27. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video | Converter
27
28. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video | Converter
28
29. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video | Converter
29
30. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
30
31. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포
멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니
메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,
1999년에 W3C 표준으로 채택됐다.
31
32. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포
멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니
메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,
1999년에 W3C 표준으로 채택됐다.
32
33. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포
멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니
메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,
1999년에 W3C 표준으로 채택됐다.
Inkscape SVG Tool
33
35. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트
방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구
현한다.
35
36. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트
방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구
현한다.
<canvas id="myCanvas"></canvas>
var cvs = document.getElementById('myCanvas');
var ctx = cvs.getContext('2d');
var img = new Image();
img.src = 'tiles.png';
36
39. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
ctx.drawImage(img, sourceX, sourceY, sourceWidth,
sourceHeight, destinationX, destinationY,
destinationWidth, destinationHeight);
39
40. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
ctx.drawImage(img, sourceX, sourceY, sourceWidth,
sourceHeight, destinationX, destinationY,
destinationWidth, destinationHeight);
var sourceX = 1200;
var sourceY = 0;
var sourceWidth = 400;
var sourceHeight = 346;
40
41. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
ctx.drawImage(img, sourceX, sourceY, sourceWidth,
sourceHeight, destinationX, destinationY,
destinationWidth, destinationHeight);
var sourceX = 1200;
var sourceY = 0;
var sourceWidth = 400;
var sourceHeight = 346;
var destinationX = 0;
var destinationY = 0;
var destinationWidth = 400;
var destinationHeight = 346;
41