Web Technology and Standards Tutorial

AR을 위한 HTML5 및 웹 표준
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr

2
Agenda
09:30 ~ 10:50 : 제1부: Web Technology
10:50 ~ 11:10 : 휴식
11:10 ~ 12:30 : 제2부: HTML5
12:30 ~ 13:30 : 점심식사
13:30 ~ 14:50 : 제3부: Web Application
14:50 ~ 15:10 : 휴식
15:10 ~ 16:30 : 제4부: Web Protocols
16:30 ~ 16:50 : 휴식
16:50 ~ 18:10 : 제5부: HTML5 코딩 실습

3
튜토리얼의 목표
Web Technology에 대한 이해
웹 표준 기술에 대한 이해
웹 마크업 기술 및 웹 API 에 대한 이해
웹 응용 구성 방식에 대한 이해
새로운 웹 기술들에 대한 이해

4
발표자
 ETRI 표준연구센터 서비스표준연구실

제1부: Web Technology
(09:30 ~ 10:50)

8
W3C20
http://www.youtube.com/watch?v=Jzxc_rR6S-U
8

13
In The Beginning .....
 World Wide Web (Tim Berners-Lee, 1989)
 universe of network-accessible information
 anyone, anywhere, anytime
 Client to server interactions

19
Evolution of World Wide Web
1995 Amazon 1997 interpark

20

21
 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP
 HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다
나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계
 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹
 XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아
니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는
단계
 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장
 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이
끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련
 4단계 (2010~2014) : 웹 앱의 시대, 모바일과 N-Screen 시대
 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web
API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정
보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
 5단계 (2015~??)

22

23
Evolution of HTML
HTML Tags
Arguments
& Lawsuits
HTML5

24
JavaScript evolution
ValidationValidation
Dynamic jumble of scriptsDynamic jumble of scripts
jQueryjQuery
FrameworksFrameworks
There is no JavaScriptThere is no JavaScript

25
CSS evolution
style mishmashstyle mishmash
cascadecascade
IE6IE6
bootstrapbootstrap
typography is everythingtypography is everything

26
web evolutionary stages
The World Wide Web is bornThe World Wide Web is born
Web 2.0: Dynamic, BuzzWeb 2.0: Dynamic, Buzz
AppsApps
SocialSocial
SemanticSemantic

Why HTML5 and Web Technology ?

28
Our Dream ?
http://youtu.be/6Cf7IL_eZ38

31
Online/Off-line Convergence
31

32
Online/Off-line Convergence
32

33
Technology Cycles
Source: Mary Meeker, INTERNET TRENDS D11 CONFERENCE , 2013

36
Changes (무선네트워크 진화)
아날로그폰
아날로그
음성통화
디지털폰
디지털
음성통화
피처폰/스마트폰
IP 기반
데이터서비스 시작
고성능 스마트폰
All IP 기반
데이터서비스 확산
가상 스마트 기기
All IP 기반
초고속 데이터
서비스
아날로그망 GSM/CDMA망 WCDMA망 OFMDA망 ??
음성 통신 서비스의 시대 데이터 통신 서비스의 시대

37
Changes (스마트 기기와 단말)
Source: http://slidesha.re/yMfSyy

38
Device, I/O, UI 기술의 진화
Source: Morgan Stanley, Mobile Internet Report, 2010.4

39
단말 환경과 개발 환경의 변화

42
Fragmentation is a big problem
Fragmentations
Device
Screen
Platform
Service
Application
Content

43
Cross Platform, Hybrid, HTML5

45
Web Platform
Web Services Platform Technology
(Web Resources)
Web
Client Platform
Technology
Web
Server Platform
Technology

47
Case : Video
 http://www.justafriend.ie/

48
Case : WebGL + LocalStorage
 http://chrome.angrybirds.com/

49
Case : SVG + WebGL
 http://www.cuttherope.ie/

50
Case : Audio
 http://daftpunk.themaninblue.com/

51
Case : Web Audio
 http://www.technitone.com

52
Case : Web Audio
http://aikelab.net/websynth/
http://airtightinteractive.com/demos/js/reactive/

53
Dynamic Editor by Bret Victor
http://worrydream.com/

컨버전스 환경을 위한 차세대 웹 기술

55
Convergence == 3M
3M(Mutli-Screen, Multi-Platform, Multi-Device)

56
[1] Web and TV
 W3C Activity
 http://www.w3.org/2011/webtv/Activity
 Web and TV Interest Group
 http://www.w3.org/2011/webtv/
 Task Forces
• Testing TF [testing]
– Identify Requirements for testing from a “Web and TV” perspective act as a bridge between
ongoing activities in W3C and other organizations interested in testing W3C specifications
• Media APIs TF [apis]
– Merges the work of the Recording and Downloading Media, Terminal Capabilities and Content
Metadata Exposure and Content Synchronization TFs. with the following focus:
• Stereoscopic 3D Web [3dweb]
– Investigate impact of 3D Video/Graphics on HTML and other web standards
• Timed Text [tt]
– Develop recommendations to facilitate the use of TTML and WebVTT content on the Web,
including interoperability with other timed text formats.

57
[1] HTML5 기반 스마트 TV 플랫폼

58
[2] Web and Automotive
 Workshop
 http://www.w3.org/2012/08/web-and-automotive/summary.html
 W3C BG - Adam Abramski (Intel) and Andy Gryc (QNX)
 http://www.w3.org/community/autowebplatform/
 Sub Task Teams
• Navigation /SubTaskTeamsNavigation
• Web Application Security /SubTaskTeamsAppSecurity
• Voice Recognition, Speech, Text-to-Speech /SubTaskTeamsSpeech

59
[3] Web and Publishing
 eBooks: Great Expectations for Web Standards
 11-12 February 2013, New York, USA
 http://www.w3.org/2012/08/electronic-books/
 eBooks & i18n: Richer Internationalization for eBooks
 4 June 2013, Tokyo, Japan
 https://www.w3.org/2013/06/ebooks/
 Publishing and the Open Web Platform
 September 16th and 17th, Centre Pompidou, Paris
 http://www.w3.org/2012/12/global-publisher/

62
[5] System application
Phase 1 (2013) Phase 2 (2014~)
 Bluetooth API
 Browser API
 Calendar API
 Device Capabilities API
 Idle API
 Media Storage API
 Network Interface API
 Secure Elements API
 System Settings API
http://www.w3.org/2012/sysapps/

64
GPU Acceleration
IE
Chrome
Firefox

65
HTML5 Game engine
http://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o

66
Demo
 http://slides.html5rocks.com/
 http://bradshawenterprises.com/tests/formdemo.php
 http://www.chromeexperiments.com/
 http://workshop.chromeexperiments.com/stars/
 https://developer.mozilla.org/ko/demos/
 Firefox OS simulator
 Video
 http://www.youtube.com/watch?feature=player_embedded&v=q7BjhX3K-5w#!
 Audio
 http://aikelab.net/websynth/

67
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333
http://mobile2.tistory.com/m

AR을 위한 HTML5 및 웹 표준
제2부: HTML5
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://www.etri.re.kr

제2부: HTML5
(11:10 ~ 12:30)

4
http://evolutionofweb.appspot.com/

5
The History of HTML5 – emerging
2004
 “WHAT” Working Group is born (Apple, Mozilla, Opera)
2006
 W3C announces it will work with “WHAT” WG
2008
 1st version of HTML5 is published (by Ian Hickson)
 HTML5 is a continually evolving technology that will never be
absolutely “finished”
2008
 Firefox 3 becomes HTML5 compatible (Chrome, Safari, IE)
Reference: http://i2mag.com/wp-content/uploads/2012/07/TheHistoryofHTML5.gif

6
The History of HTML5 – growing
2010.1
 YouTube offers HTML5 video Player
2010.4
 Steve Jobs “trashes” Flash in an open letter
2010.5
 Scribd documents switch to HTML5
2010.8
 Arcade Fire’s HTML5-based interactive film is a hit
2010.12
 Chrome Web Store opens

7
The History of HTML5 – explosion
 2011.3 – Disney buys HTML5 gaming start-up “Rocker Pack”
 2011.4 – FT, attracted more 2M users, 10 months after launch
 2011.7 – Pandora begins moving to HTML5
 2011.8 – Amazon creates Kindle Cloud Reader
 2011.8 – Twitter rolls out new HTML5 version for iPad
 2011.9 – 34% of Alexa’s top 100 sites use HTML5
 2011.9 – Boston Globe opens subscription-only BostonGlobe.com
 Uses responsive design and CSS3
 2011.11 – Adobe stops making Flash for mobile devices
 2012.4 – Flickr gets a new HTML5 uploader (large files)
 2012.6 – LinkedIn creates 95% HTML5 native app for the iPad
 2012.6 – Wix.com: +1M HTHML5 websites created by users
 90 days after the publishing platform released its HTML5 website builder
 2013.1 –+1B(1,000,000,000) HTML5-compatible smartphones

8
해외의 주요 HTML5 적용 서비스들
분야 이름 (개발사) 사이트
HTML5 서비스
시작일
동영상
구글 YouTube http://www.youtube.com/html5 2010.01
Netflix http://www.netflix.com 2010.12
Vimeo http://vimeo.com 2010.01
문서
작업
SlideShare http://www.slideshare.net/html5 2011.09
구글 Docs http://docs.google.com 2010.04
구글 Gmail
구글 Clendar
http://www.gmail.com
http://google.com/calendar
2011.09
소셜 Facebook’s Spartan 2011.08
전자책 Amazon Kindle https://read.amazon.com/ 2011.09
신문사 영국 Financial Times http://apps.ft.com/ftwebapp/ 2011.06
게임
Angry Birds
http://chrome.angrybirds.com
http://facebook.angrybirds.com
2011.05
Cut the Rope http://www.cuttherope.ie 2012.01
Fieldrunner http://fieldrunnershtml5.appspot.com 2011.10

9
HTML5 & Web App Technology Timeline
CSS1
Javascript
CSS2 CSS3
DOM1 DOM2 DOM3 DOM4
2010 2011
AJAX
HTTP
Canavs Web Workers AppCache
W3C
Web
App.
Specs.
XHR2
WebGLGeolocation FileAPI
WebFontAudio/Video
Web form
2012 2013
HTTP2
HTML5 Working Draft
hollobit@etri.re.kr

10
HTML5
 HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것
통칭되는 “HTML5”
HTML5
(Hypertext Markup Language 5.0)
콘텐츠 내용과 형식을 표현
CSS3
(Cascading Style Sheet 3.0)
콘텐츠 표현 방법을 정의
JavaScript
각종 API를 통해
기능을 표현
문서 구조의 의미를 명확히 하여
디자인과 프로그램의 독립성을 확보
서로 다른 다양한 브라우저 상에서
일관된 표현 기능 제공, 효과적이고 편
리한 표현 방식의 변경
풍부한 기능과 자원을 제어할 수
있는 로컬 어플리케이션
 문서구조의 상세화
 멀티미디어
 폼과 이벤트 등
 표현 기능 모듈화
 웹 폰트
 Web Storage
 Web Worker
 Web Socket
 Geolocation API

11
HTML5
 Web Application은 HTML, CSS, JavaScript의 협주곡
통칭되는 “HTML5”
HTML5
콘텐츠 내용과 형식을 표현
CSS3
콘텐츠 표현 방법을 정의
JavaScript
각종 API를 통해
기능을 표현
문서 구조의 의미를 명확히 하여
디자인과 프로그램의 독립성을 확보
서로 다른 다양한 브라우저 상에서
일관된 표현 기능 제공, 효과적이고 편
리한 표현 방식의 변경
풍부한 기능과 자원을 제어할 수
있는 로컬 어플리케이션
 문서구조의 상세화
 멀티미디어
 폼과 이벤트 등
 표현 기능 모듈화
 웹 폰트
 Web Storage
 Web Worker
 Web Socket
 Geolocation API

13
HTML5의 주요 특징
 Offline / Storage
 Web SQL Database
 Local Storage
 IndexedDB
 Application Cache
 Realtime / Communication
 Web Workers
 Web Socket
 Web Notifications
 File / Hardware Access
 Native Drag & Drop
 Desktop Drag-In (File API)
 Desktop Drag-Out
 FileSystem APIs
 Geolocation
 Device Orientation
 Speech Input
 Semantics & Markup
 Better semantic tags
 Markup for applications
 Descriptive link relations
 Microdata
 ARIA attributes
 Web Form
 Graphics / Multimedia
 <Video> / <Audio>
 Canvas 2D
 Canvas 3D (WebGL)
 Inline SVG
 CSS3
 CSS Selectors
 Web Fonts
 Nuts & Bolts
 History API

14
Simplified Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.o
rg/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
HTML4/XHTML
• HTML 4.01 Strict
• HTML 4.01 Transitional
• HTML 4.01 Frameset
• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• XHTML 1.1

15
Simplified Character Set
HTML4
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8">
HTML5
<meta charset=utf-8>

16
 Better layout structure: new structural elements
 <section>
 <header>
 <nav>
 <article>
 <aside>
 <footer>
<header>
<footer>
<nav> <aside>
<section>
<header>
<article>
<footer>
New Layout Structure

17
New Layout Structure (2)
Elements like header and footer are not meant to be o
nly at the top and bottom of the page
Header and footer of each document section
 Not very different from <DIV> tag but are more semanticall
y well defined in the document structure

18
<nav>
<header>
<canvas>
<ruby>
<article>
<video>
<audio>
<command>
<hgroup>
<dialog><details><datalist>
<footer><figure><embed>
<keygen> <mark>
<output>
<meter>
<section>
<source>
New HTML5 Tags
<aside>
<rp><rt>
http://dev.w3.org/html5/markup/elements.html#elements

19
New Tags
<article>
 For external content, like text from a news-article, blog, foru
m, or any other external source
<aside>
 For content aside from (but related to) the content it is plac
ed in
<details>
 For describing details about a document, or parts of a docu
ment
<summary>
 A caption, or summary, inside the details element
http://html5.clearboth.org/

20
New Tags (2)
<mark>
 For text that should be highlighted
<nav>
 For a section of navigation
<section>
 For a section in a document(e.g. chapters, headers, footers)
<wbr>
 Word break. For defining an appropriate place to break a lo
ng word or sentence
Other tags
 <command>, <datalist>, <details>, <progress>, etc.

21
<s> <strike>
<big>
<acronym>
<basefont>
<center>
<frame>
<font><dir>
<noframes>
<frameset>
<tt>
<u>
Removed Tags in HTML5
<applet>

22
New Media Tags
Media Tags
 <audio>
• Attributes: autoplay, controls, loop, src
 <video>
• Attributes: autoplay, controls, loop, height, width, src
<audio width="360" height="240" controls= "controls" >
<source src="someSong.mp3" type="audio/mp3">
</source>
Audio tag is not supported
</audio>

23
Embed Tag – New Syntax
<embed>
 Defines embedded content, su
ch as a plug-in
Attributes
 src="url", type="type"
<embed src="helloworld.swf" />

24
New Attributes
 New attributes
Attribute Description
Autocomplete ON/OFF. In case of “on”, the browser
stores the value, auto fill when the
user visits the same form next time
Autofocus Autofocus. Input field is focused o
n page load
Required Required. Mandates input field val
ue for the form submit action
Draggable True/false indicates if the element
is draggable or not

25
HTML5 Form
 HTML5 의 새로운 input type들
 Search, tel, url, email
 datetime, date, month, week, time, and datetime-local
 Number, range, Color
 Mobile 에서 number, email, url 지원을 추가
 placeholder attribute를 지원
<label for="email">Email address</label>
<input id=“email” type="email" placeholder="jonathan@example.com">

26
HTML5 Form - New input types
Input Type Purpose Notes
tel For entering a telephone number.
tel does not enforce a particular syntax, so if you want to ensure a
particular format, you can use pattern or setCustomValidity() to do
additional validation.
search
To prompt users to enter text that they want to
search for.
The difference between search and text is primarily stylistic. Using a
n input type of search might result in the input field being styled i
n a way that is consistent with that platform’s search fields.
url For entering a single URL. url is intended for entering a single website address (absolute URL).
email
For entering either a single email address or a li
st of email addresses.
If the multiple attribute is specified, then multiple email addresses
can be entered, separated by commas.
datetime
For entering a date and time with the time zone
set to UTC.
date For entering a date with no time zone.
month
For entering a date with a year and a month, bu
t no time zone.
week
For entering a date that consists of a week-year
number and a week number, but no time zone.
time
For entering a time value with hour, minute, sec
onds, and fractional seconds, but no time zone.
datetime-local For entering a date and time with no time zone.
number For numerical input
Valid values are floating point numbers (whole and decimal numbe
rs).
range
For numerical input, but unlike number, the actu
al is not important.
The implementation of the range control is a slider in most browse
rs that support it.
color For choosing color through a color well control. The value must be a valid lowercase simple color such as #000000.

27
HTML5 Form - New input attributes
Attribute Purpose Notes
autofocus
Focuses the input on the element when the pa
ge is loaded.
autofocus can be applied to input, select, textarea,
and button.
placeholder
Gives the user a hint about what sort of data t
hey should enter.
The placeholder value is displayed in light text until the element gets f
ocus and the user enters some data. It can be specified on input and t
extarea.
form
Specifies one or more forms to which the inpu
t element belongs.
By using the form attribute, the input elements can be placed anywher
e on the page, not just within the form element. Also, a
single input element can be associated with more than one form.
required
A boolean attribute that means the element is
required.
The required attribute is helpful for doing browser-based validation wit
hout using custom JavaScript.
autocomplete
For specifying that a field should not autocom
plete or be pre-filled
by the browser based on a user’s past entries.
The autocomplete attribute for fields like a credit card number or one-
time password, which you don’t want autocomplete. By default, autoco
mplete is in the on state, so if you want to disable it, set it to off.
pattern
For validating an element’s value against a reg
ular expression.
When using a pattern, you should also specify a title value to give the
user a description of the pattern that’s expected.
dirname
For submitting the directionality of the control
with the form.
For example, if the user entered text data with right-to-left directionali
ty and the input element contained the dirname attribute, then an indi
cation of the right-to-left directionality would be submitted along with
the input value.
novalidate
For disabling form submission validation when
specified on a form element.
formaction
For overriding the action attribute on the form
element.
This attribute is supported on input and button elements.
formenctype
For overriding the enctype attribute on the for
m element.
formmethod
For overriding the method attribute on the for
m element.
formnovalidate
For overriding the novalidate attribute on the
form element.
formtarget
For overriding the target attribute on the form
element.

28
Canvas
 Allows dynamic, scriptable rendering of 2D shapes and bitmap im
ages
 Low level, procedural model
 Updates a bitmap
 Does not have a built-in scene graph
 Consists of a drawable region defined in HTML
 Has height and width attributes
 Accessible by JavaScript Code
 Used for building graphs, animations, games, and image composi
tion

29
Canvas Example
 In HTML:
<canvas id="example" width="200" height="200">
This is displayed if HTML5 Canvas is not supported.
</canvas>
 Access with JavaScript:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

30
Canvas Example
 In HTML:
<canvas id="example" width="200" height="200">
This is displayed if HTML5 Canvas is not supported.
</canvas>
 Access with JavaScript:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

31
SVG
 SVG stands for Scalable Vector Graphics
 A language for describing 2D-graphics
 Graphical applications
 Most of the web browsers can display SVG just like they can displ
ay PNG, GIF, and JPG
 Internet Explorer users may have to install the Adobe SVG Viewer
 HTML5 allows embedding SVG
 Directly using <svg>...</svg>
 https://developer.mozilla.org/en/SVG

32
SVG Example
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf‐8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200"
xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50"
fill="red" />
</svg>
</body>
</html>

33
SVG Gradient Example
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg
">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%"
r="50%" fx="50%" fy="50%">
<stop offset="0%"
style="stop‐color:rgb(200,200,200);stop‐opacity:0"/>
<stop offset="100%"
style="stop‐color:rgb(0,0,255);stop‐opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
</svg>

Web Technology and Standards Tutorial

More Related Content

What's hot

Viewers also liked

Similar to Web Technology and Standards Tutorial

More from Jonathan Jeon

Web Technology and Standards Tutorial