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)

Web Technology and Standards Tutorial

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

제2부: HTML5
Jonghong Jeon
ETRI, PEC

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

35
CSS: A New Philosophy
 Separate content from presentation!
Title
Lorem ipsum dolor sit amet, con
sectetuer adipiscing elit. Suspen
disse at pede ut purus malesuad
a dictum. Donec vitae neque non
magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proi
n
tortor purus, luctus non, aliqua
m nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.
Bold
Italics
Indent
Content
(HTML document)
Presentation
(CSS Document)

CSS Intro
Styling with Cascading Stylesheets

37
CSS Introduction
Cascading Style Sheets (CSS)
 Used to describe the presentation of documents
 Define sizes, spacing, fonts, colors, layout, etc.
 Improve content accessibility
 Improve flexibility
Designed to separate presentation from content
Due to CSS, all HTML presentation tags and attribut
es are deprecated, e.g. font, center, etc.

38
CSS Introduction (2)
CSS can be applied to any XML document
 Not just to HTML / XHTML
CSS can specify different styles for different media
 On-screen
 In print
 Handheld, projection, etc.
 … even by voice or Braille-based reader

39
Why “Cascading”?
Priority scheme determining which style rul
es apply to element
 Cascade priorities or specificity (weight) are ca
lculated and assigned to the rules
 Child elements in the HTML DOM tree inherit s
tyles from their parent
• Can override them
• Control via !important rule

41
Why “Cascading”? (3)
 Some CSS styles are inherited and some not
 Text-related and list-related properties are inherited - color, font‐s
ize, font‐family, line‐height, text‐align, lis
t‐style, etc
 Box-related and positioning styles are not inherited - width, height,
border, margin, padding, position, float, etc
 <a> elements do not inherit color and text-decoration

42
Style Sheets Syntax
Stylesheets consist of rules, selectors, declarations,
properties and values
Selectors are separated by commas
Declarations are separated by semicolons
Properties and values are separated by colons
h1,h2,h3 { color: green; font‐weight: bold; }
http://css.maxdesign.com.au/

43
Selectors
Selectors determine which element the rule appli
es to:
 All elements of specific type (tag)
 Those that mach a specific attribute (id, class)
 Elements may be matched depending on how they ar
e nested in the document tree (HTML)
Examples:
.header a { color: green }
#menu>li { padding‐top: 8px }

44
Selectors (2)
Three primary kinds of selectors:
 By tag (type selector):
 By element id:
 By element class name (only for HTML):
Selectors can be combined with commas:
This will match <h1> tags, elements with class
link, and element with id top‐link
h1 { font‐family: verdana,sans‐serif; }
#element_id { color: #ff0000; }
.myClass {border: 1px solid red}
h1, .link, #top‐link {font‐weight: bold}

45
Values in the CSS Rules
Colors are set in RGB format (decimal or hex):
 Example: #a0a6aa = rgb(160, 166, 170)
 Predefined color aliases exist: black, blue, etc.
Numeric values are specified in:
 Pixels, ems, e.g. 12px , 1.4em
 Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
 Percentages, e.g. 50%
• Percentage of what?...
 Zero can be used with no unit: border: 0;

46
Default Browser Styles
Browsers have default CSS styles
 Used when there is no CSS information or any other
style information in the document
Caution: default styles differ in browsers
 E.g. margins, paddings and font sizes differ most ofte
n and usually developers reset them
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }

47
Linking HTML and CSS
 HTML (content) and CSS (presentation) can be linked in three
ways:
 Inline: the CSS rules in the style attribute
• No selectors are needed
 Embedded: in the <head> in a <style> tag
 External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag or @impo
rt directive in embedded CSS block
 Using external files is highly recommended
 Simplifies the HTML document
 Improves page load speed as the CSS file is cached

48
Text-related CSS Properties
color – specifies the color of the text
font‐size – size of font: xx‐small, x‐small, sma
ll, medium, large, x‐large, xx‐large, smaller,
larger or numeric value
font‐family – comma separated font names
 Example: verdana, sans‐serif, etc.
 The browser loads the first one that is available
 There should always be at least one generic font
font‐weight can be normal, bold, bolder, light
er or a number in range [100 … 900]

49
CSS Rules for Fonts (2)
font‐style – styles the font
 Values: normal, italic, oblique
text‐decoration – decorates the text
 Values: none, underline, line‐trough, overline,
blink
text‐align – defines the alignment of text or o
ther content
 Values: left, right, center, justify

50
Shorthand Font Property
 font
 Shorthand rule for setting multiple font properties at the same time
is equal to writing this:
50
font:italic normal bold 12px/16px verdana
font‐style: italic;
font‐variant: normal;
font‐weight: bold;
font‐size: 12px;
line‐height: 16px;
font‐family: verdana;

51
Backgrounds
 background‐image
 URL of image to be used as background, e.g.:
 background‐color
 Using color and image and the same time
 background‐repeat
 repeat‐x, repeat‐y, repeat, no‐repeat
 background‐attachment
 fixed / scroll
background‐image:url("back.gif");

52
Backgrounds (2)
background‐position: specifies vertical and h
orizontal position of the background image
 Vertical position: top, center, bottom
 Horizontal position: left, center, right
 Both can be specified in percentage or other numeric
al values
 Examples:
background‐position: top left;
background‐position: ‐5px 50%;

53
Background Shorthand Property
background: shorthand rule for setting background
properties at the same time:
is equal to writing:
 Some browsers will not apply BOTH color and image f
or background if using shorthand rule
background: #FFF0C0 url("back.gif") no‐repeat fix
ed top;
background‐color: #FFF0C0;
background‐image: url("back.gif");
background‐repeat: no‐repeat;
background‐attachment: fixed;
background‐position: top;

54
Background-image or <img>?
 Background images allow you to save many image tags from the
HTML
 Leads to less code
 More content-oriented approach
 All images that are not part of the page content (and are used on
ly for "beautification") should be moved to the CSS
54

55
Borders
border‐width: thin, medium, thick or numeri
cal value (e.g. 10px)
border‐color: color alias or RGB value
border‐style: none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, outset
Each property can be defined separately for left,
top, bottom and right
 border‐top‐style, border‐left‐color, …
55

56
Border Shorthand Property
border: shorthand rule for setting border properties at
once:
is equal to writing:
Specify different borders for the sides via shorthand rul
es: border‐top, border‐left, border‐right, borde
r‐bottom
When to avoid border:0
56
border: 1px solid red
border‐width:1px;
border‐color:red;
border‐style:solid;

57
Width and Height
 width – defines numerical value for the width of element, e.g. 2
00px
 height – defines numerical value for the height of element, e.g.
100px
 By default the height of an element is defined by its content
 Inline elements do not apply height, unless you change their displa
y style.
57

58
Margin and Padding
 margin and padding define the spacing around the element
 Numerical value, e.g. 10px or ‐5px
 Can be defined for each of the four sides separately - margin‐top, paddi
ng‐left, …
 margin is the spacing outside of the border
 padding is the spacing between the border and the content
 What are collapsing margins?
58

59
Margin and Padding: Short Rules
 margin: 5px;
 Sets all four sides to have margin of 5 px;
 margin: 10px 20px;
 top and bottom to 10px, left and right to 20px;
 margin: 5px 3px 8px;
 top 5px, left/right 3px, bottom 8px
 margin: 1px 3px 5px 7px;
 top, right, bottom, left (clockwise from top)
 Same for padding
59

61
+82-42-860-5333

제3부: Web Application
Jonghong Jeon
ETRI, PEC

제3부: Web Application
(13:30 ~ 14:50)

4
Web Page vs. Web Application
 Web Page(Site)
 HTML로 표현된 웹 문서(또는 페이지들을 제공)
 Web Application
 특정한 기능을 수행하도록 설계된 프로그램

6
HTML5를 바라보는 5가지 관점
차세대 웹 기술의 총합의 관점으로 HTML5
단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5
새로운 앱과 SW 환경으로서의 HTML5
모든 정보, 서비스와 사물을 묶는 관점으로 HTML5
인프라와 플랫폼으로서의 HTML5

7
HTML Standardization
WHAT-WG

8
HTML milestone
2012 2013 2014 2015 2016 2017 2018 2019 2020
HTML5.0 CR start …CR, LC REC … …
HTML5.1 FPWD --- LC + CR … CR REC
HTML5.x FPWD --- LC + CR … CR REC
HTML6.x FPWD --- LC + CR … CR REC
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation
WD: Working Draft CR : Candidate Recommendation REC: Recommendation

9
HTML5 Compatibility
http://html5test.com/results/desktop.html
http://html5test.com/results/mobile.html

10
HTML5 개발자 생태계의 성장

11
HTML5 관련 비즈니스 영역

12
HTML5에 대한 기대와 전망

14
우리가 바라는 HTML5 앱 모습

15
실제 구현 가능한 HTML5 앱 현실

16
그 결과를 받아본 고객의 표정

17
과유불급(過猶不及)
http://www.youtube.com/watch?v=UR4mlLiyjYo

19
네이티브 앱 vs. 웹 앱
왜 앱인가 ?
 Better Performance
 Better UI
 H/W Capability
 Offline
 Developer Support
 Monetization
 Enhanced Install/Update
19

20
웹 기술이 극복해야 할 요소들
 Performance
 Engine enhance (Script, Rendering)
 H/W Acceleration
 Web OS
 Offline
 HTML5 offline feature (application
cache, localStorage, online/offline
events)
 Device Capability
 Device APIs
 System Application APIs
 Web APIs (Web Intents, Web
Push…)
 Web OS
 Monetization
 Web Application Store & Native
Web App
 Developer Environment
 Developer Tools
 Javascript Frameworks
 UI
 WebGL, Web Audio API
 CSS4, DOM4
 Touch Events, GamePad API …
20

21
Native Web App
Native App
Web App
Web page
Native
Web App
Hybrid Web App
(Cross Platform)
Multi-platform support

22
The Web as an application platform
 Standards for Web Applications on Mobile: Feb 2013 current
state and roadmap
 http://www.w3.org/Mobile/mobile-web-app-state/

23
User Interactions
http://www.w3.org/2013/02/mobile-web-app-state/#User_interactions

24
Forms
http://www.w3.org/2013/02/mobile-web-app-state/#Forms

25
Device Adaptation
http://www.w3.org/2013/02/mobile-web-app-state/#Device_Adaptation

26
Graphics
http://www.w3.org/2013/02/mobile-web-app-state/#Graphics

27
Multimedia
http://www.w3.org/2013/02/mobile-web-app-state/#Multimedia

28
Sensors and hardware integration

30
Communication and Discovery

31
결국, HTML5 개발의 경쟁력 원천은 ?

33
Modern Web Applications
 JS Frameworks & JS Library

34
The Reach of JavaScript is expanding
Web Applications
HTML5 Games
Windows 8 HTML AppsBasic Web Pages
JavaScript Execution S
peed
DOM Interactions
Accelerated Graphics
Page Load Ti
me

35
Measuring JavaScript performance

36
Javascript : Event Processing

37
Javascript : Object control

39
Javascript : Graphics - HTML5 games
Bubble
s
setInterval(animate, 1000/60)
bs[i] = new Bubble(0, 1);
for (var i = 0; i < 1000; i++) {
bs[i].move();
for (var j = 0; j < i + 1; j++) {
Bubbles.collide(bs[i], bs[j]);
}
}
var distance2 = (b1.x–b2.x)*(b1.x–b2.x)+(b1.x–b2.x)*(b1.x–b2.x);
var magnitude = (dvx * dx + dvy * dy) / d2;
this.elem.style.left = this.x + "px";
this.elem.style.top = this.y + "px";
this.canvas.getContext("2d").putImageData(canvasImageData, 0, 0);
setInterval(animate, 1000/60)
bs[i] = new Bubble(0, 1);
for (var i = 0; i < 1000; i++) {
bs[i].move();
for (var j = 0; j < i + 1; j++) {
Bubbles.collide(bs[i], bs[j]);
}
}
var distance2 = (b1.x–b2.x)*(b1.x–b2.x)+(b1.x–b2.x)*(b1.x–b2.x);
var magnitude = (dvx * dx + dvy * dy) / d2;
this.elem.style.left = this.x + "px";
this.elem.style.top = this.y + "px";
this.canvas.getContext("2d").putImageData(canvasImageData, 0, 0);

40
Javascript: Application Frameworks

42
Sept 1995
Netscape
Aug 1996
Microsoft
June 1997
ECMAScript
//
Mar 1999
XHR
Feb 2005
Ajax
Aug 2001
IE6
Firefox
Safari
Chrome
Mobile
History of Javascript

43
http://en.wikipedia.org/wiki/JavaScript
History of Javascript

44
http://en.wikipedia.org/wiki/ECMAScripTechnical Committee 39 (TC39) of Ecma International.
Javascript Implementations

45
http://test262.ecmascript.org/
Javascript Conformance tests

47
JavaScript Library
웹 기술의 발전 및 다양한 요구에 따라 JavaScript는 기술적 역할 확대
http://www.remotesynthesis.com/post.cfm/50-javascript-html5-frameworks-and-related-tools
 DOM 탐색 및 제어
 HTML 요소 변경
 데이터의 유효성을 검사
 방문자의 브라우저를 감지
 쿠키의 저장, 검색
 API(WebSocket, Canvas, WebGL, Geolocation…)
 CSS 접근 및 변경(Responsive Web)
 Widget Drawing(Tabs, Tree, Chart..)
 단말을 제어하기 위한 기능
 UI Effect 이벤트 제어 및 애니메이션
 HTML DOM Tree접근 및 변경(Selector)
 AJAX를 통한 비동기 통신
자바스크립트 역할 JavaScrpit vs Java
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)

48
JavaScript Library
다양한 모바일 및 웹 서비스 개발 지원을 위한 JS Library가 개발되고 있음
jQuery와 JQuerymobile을 활용한 서비스 사례
1. 터치 스크린 장치에 최적화 : 대신 마우스 커서의 입력 장치로 손
가락 사용자 인터페이스 지원.
2. 모바일 웹 개발 프레임워크 : 모바일 장치 플랫폼을 위해 특별히
표준 UI 요소 및 이벤트 처리 제공
3. 크로스 플랫폼 : 다양한 모바일 디바이스 플랫폼에 대한 지원 등
IOS와 안드로이드는 사용자의 다양한 앱 개발 지원
4. 경량 : 현재의 대역폭 제한으로 인해 리소스 및 기능 파일의 용량
을 제한적으로 제공
5. HTML5와 CSS3 표준을 사용 : 대부분의 주류 모바일 장치를 지원
하고 최신 웹(모바일)브라우저에서 HTML5와 CSS3 등 W3C의 새
로운 표준 사양을 사용할 수 있는 기능을 제공
Source : http://sixrevisions.com/javascript/mobile%C2%A0web-development-frameworks/

49
JavaScript Web Framework
Ajax 기술을 활용한 다양한 오픈 소스 JavaScript Framework 개발
항목 JQuery Sencha
개발 난이도
(용량)
보통(80k) 높음(360k)
표현 자유도
(확장성)
보통 높음
지원 기능 많음(동영상, 차트..) 아주 많음(동영상, 3D, 차트,
개발 방식 마크업 기반 스크립트 기반 객체 개발
테마 특징
테마 롤러 도구 지원
(페이지별 JS 로딩)
Sass- Sassy CSS(초기 JS를 모두 로딩
하여 최초 구동 속도가 다소 느림-
CSS를 별도 프로그램 형식으로 개발)
기반 스크립트 Lib JQuery ExtJS
지원 기기
iOS, Android, 블랙베리, HP WebOS,
오페라, Firefox mobile
(스마트폰, 태블릿 지원)
iOS, Android, 블랙베리
(스마트폰, 태블릿 지원)
• Microsoft Ajax Control Toolkit(http://ajax.asp.net)
• Google Web Toolkit(http://code.google.com/webtoolkit)
• Dojo(http://dojotoolkit.org/)
• Magic Framework(http://www.jeffmcfadden.com)

50
다양한 jQuery UI 및 테마
jQuery
 jQuery(http://jquery.com)- 2013.06 현재 ver 1.10.1
 MIT, GPL v2 듀얼 라이센스
 클라이언트 사이드 자바스크립트 라이브러리, Ajax 개발 용이
 모바일 적용을 위한 jQuery Mobile을 통한 터치 이벤트 지원 및 다양
한 UI 테마 제공
 애니메이션, 이벤트 제어, CSS등 Responsive 웹 제작을 위한 최적의
솔루션
Ajax로 시작된 인터렉티브 웹 사이트는 최근 웹 어플리케이션 형태로 진화
jQuery는 다이나믹 웹 및 모바일 지원을 강화하면서 사용자 층 확대
Eclipse jQuery 설정 : http://kinjsp.pe.kr/lecture/eclipseJQuery.kin
http://menguy.tistory.com/532

51
jQuery
JQuery는 다양한 Plug-in을 통해 기능 확장을 지원하고 있음
Plug-in Archive를 통해 다양한 type의 Plug-in 프로젝트 관리
• Ajax
• Animation and Effects
• Browser Tweaks
• Data
• DOM
• Drag-and-Drop
• Events
• Forms
• Integration
• JavaScript
• jQuery Extensions
• Layout
• Media
• Menus
• Metaplugin
• Navigation
• Tables
• User Interface
• Utilities
• Widgets
• Windows and Overlays
PROJECT TYPES
http://speckyboy.com/2010/08/22/50-awesome-new-jquery-plugins/
http://speckyboy.com/2011/12/07/the-50-most-useful-jquery-plugins-from-2011/
Isotope is a jQuery plugin for intelligent, dynamic layouts.
Diapo is a free jQuery slideshow plugin. It is an open source project.

52
jQuery
데이터와 디자인 분리, 기능과 데이터(JSON)를 분리
jQuery는 다양한 플러그인으로 확장
　 가장 Simple 하면서 강력한 자바스크립트 라이브러리
- 적은 용량 : 31kb, 개발자 코드 229kb
- Built around CSS selectors
- 강력한 개발자 커뮤니티
- 현재 100대 웹 사이트에서 사용, 기술 서적 제공
　 문서 객체 처리 기능
- 웹 문서 내 객체 접근
- 웹 문서 이벤트 핸들링 용이
　 다양한 기능 제공
- 애니메이션 기능 추가 가능
- Ajax 기능 사용 가능
- 기존 브라우저에 대한 호환성 지원
- Plug-in을 통한 확장(jQueryMobile, jQuery Visualize)
* Pure JavaScript
divs =document.getElementByTagName*’div’);
for(i=0; i<divs.length; i++){
divs[i].style.display =‘none’
}
<head>
<script type="text/JavaScript"
src="jquery-1.4.2.min.js"></script>
</head>
$(“div”).hide();
Building the JavaScript
$(‘#menu’).addClass(‘hello’)
jQuery Object
Find some Element
Do something with item

53
Sencha
 Sencha(http://www.sencha.com)
 HTML5 표준을 준수하는 Ext JS 기반의 모바일 웹 어플리케이션용 JS 프레임워크
 Sench Touch 를 통한 모바일 디바이스 지원, 전용 개발 도구 지원
 도표 제작 및 엔터프라이즈 지원 강화
 Sencha.io: 클라우드 기반으로 다양한 스크린 사이즈의 디바이스에 대응
 PhoneGap 등 하이브리드 웹 앱 프레임워크와 연동
네이티브 수준의 터치 이벤트 처리 Sencha로 개발한 카드 게임 Sencha.io 개념도
• Sencha는 Ext.JS로 시작한 자바 스크립트 프레임워크로 PC & Mobile 지원
• 완성도 높은 웹 앱 프레임워크로 다양한 상용 제품군 확보

54
Sencha
• ExtjS 라이브러리를 기반으로 개발, ExtJS의 API 구조와 문법 체계를 계승
• 향후 SVG, VML을 기반으로 하는 Raphael을 통합하여 제공 예정
•ExtJS 라이브러리를 기반으로 개발
• 대부분의 소스코드는 JavaScript와 ExtJS 라이브러리로 구성
• Component Panel 기반(Java SWING과 유사)
• 자유도가 높은 ExtJS 스터디 필요
• Native앱과 유사한 UI를 제공
• JQueryMobile은 TOP/Bottom 영역에 고정바를 둘 수 없음(수정 가능)
• 통신 모델
• 기본적으로 URL이 1개뿐(특정 페이지를 직접 URL 입력으로 접근 시 추가 작업이 필요)
• 두번째 페이지 부터는 Ajax 통신을 이용해 화면을 로딩
• 데이터 핸들링은 JSON을 활용
• JQueryMobile vs Sencha Touch
• 기존 웹페이지를 모바일로 변경할 경우 JQueryMobile 사용이 유리
• 강력한 Native 앱과 유사한 서비스를 신규로 개발할 경우 Sencha Touch 사용

55
Kendo UI
• 상용 HTML5 UI Lib(1년 399$)로 JQuery보다 빠른 성능과 기술 지원 가능
• 풍부한 HTML5와 Grid등 기업용 UI 위젯, 강력한 데이터 소스, 터치 지원
Mobile Device Compatibility
• Android 2.0+
• iOS 3.0+
• BlackBerry OS 6.0+
• WebOS 2.2+
Supported browsers
• Internet Explorer 7+
• Firefox 3+
• Safari 4+
• Chrome
• Opera 10+

56
BootStrap
• 가볍고 간단한 오픈소스 기반 (아파치2.0 라이센스)의 HTML5, CSS3 UI 프레임워크
• 레이아웃과 기본 탬플릿을 통해 가장 쉽고, 빠르게 Responsive Web 기반 서비스를 구
축할 수 있음
• 기본 사항
• 많은 사이트에서 사용(안정성 검증)
• 설치까지 JS, CSS만 연결하면 사이트 완성
• 직관적인 UI와 쉬운 구조(사이트 단순)
• UI(Componets)
• 기본 CSS 기반 UI 컴포넌트 지원
• 별도 테마를 쓸 경우 멀티 디바이스를
지원하지 않을 수 있음
• JQuery UI Plug-in
• 커스터마이즈 기능을 기본으로 제공
• JQuery Plug-in 기능 지원
(http://addyosmani.github.io/jquery-ui-bootstrap/)
• http://www.initializr.com/ 등을 통해
제공 환경에 따라 쉽게 설치 구축 가능
• http://cornerstone.sktelecom.com/ 에서도 활용

57
CoreChain
• CoreChain4.0은 크게 Framework와 UI 버전으로 구성(HTML5 기반 웹페이지 모델링)
• MIT, GPL 라이선스 기반(Open Source)- 순수 국내 기술
• Framework
•One Object, Method Channing, Client Computing, Component 개념 적용
•One Object는 최상위 오브젝트로 메소드와 속성을 지정하기 위해 오브젝트를 생성하지 않음
•분산 클라이언트 연산을 통해 서버 자원의 효율적 사용(Calculator, Operator)
•CoreChain은 컴포넌트 개념으로 확장(사용자 개발 컴포넌트를 CoreChain에 등록해서 사용 가능)
• UI(Canvas)
•기본 Type UI 지원(Text, Number, FildSet, Label…)
•Combo, Form, Ground 기능 UI 지원
•Bar, Line, Circle Chart, Gide와 같은 Enterprise UI 지원
• API
•Data Format은 최종 Meta Data으로 설정
•클라이언트는 JSON 형태로만 작성하면 다양한 Format으로 변환
•지원 Format(Array, CSV, JSON, XML, HTML) 지원

58
Hybrid 기술 활용
• 모바일 서비스 개발을 위한 전용 어플리케이션 프레임워크에 활용
• JS 코드를 통해 Web-to-Native 기술이 보편적으로 보급되어 활용되고 있음
Javascript tools
App factories
Web-to-native Runtimes
Source translators

59
Hybrid 기술 활용
• Web-to-Native Wrappers(JavaScript을 통해 플랫폼의 Native API를 호출하는 방식)
• Runtime은 기본적인 실행 환경을 플랫폼에 설치한 후 구동하는 방식으로 제공
Vendor (Tool) Technology approach Authoring language Deploy. format
Adobe (Flex) SDK
addition to AIR
Runtime addition to AIR MXML Native, Hybrid
Appcelerator
(Titanium)
Runtime HTML5, CSS, JavaScript Native apps
PhoneGap (Nitobi-
Adobe)
Web-to-native app wrapper HTML5, CSS, JavaScript Hybrid
RhoMobile
(Rhoelements)
Runtime HTML5, JavaScript, Ruby Native
IBM (Worklight)
Runtime, Web-to-native app
wrapper (PhoneGap)
HTML5, CSS, JavaScript
Web apps, Hybrid,
Native
Ansca Mobile(Corona) Runtime Lua Native(Game)
RunRev (LiveCode) Runtime
WYSIWYG, LiveCode
(natural-like language)
Native
appspresso
Runtime, Web-to-native app
wrapper (PhoneGap)
HTML5, CSS, JavaScript Web apps, Native
AppMobi
Runtime (Mobius) Web-to native
app wrapper(PhoneGap)
HTML5, CSS, JavaScript Web apps, Hybrid

60
PhoneGap 소개
 PhoneGap
 HTML+JS로 제작된 웹 앱을 담는 컨테이너
 HTML5 + CSS3 + JS 로 개발
 다양한 모바일 플랫폼 네이티브 앱으로 변환
 기존에 웹 앱에서 불가능했던 디바이스 기능을 JS로 접근가능
• 가속도계, 카메라, 주소록, 파일, 네트워크 등 지원
• 스토리지, 푸시, GPS 등 사용 가능
 최근 PhoneGap Build 시스템 구축
• 클라우드 컨셉을 SW개발에 적용
• PhoneGap은 크로스 플랫폼 모바일 전용 어플리케이션 프레임워크
• 폭넓은 사용자 층을 기반으로 최근 클라우드형 빌드 시스템 제공

61
 웹 기술을 이용한 모바일/데스크탑 앱 개발 가능
 4,000개 이상의 iOS, Android 앱 릴리즈, 2011년 10,000개 이상의 앱 런칭 예상
 Main Features
 Web-based, cross-compilation tool
 Mac, Windows, and Linux support
 클라우드 기반 빌드 환경 제공
 최근 개발 툴 업체 Aptana 인수 후 전용 개발 도구 발표
Appcelerator Titanium
<Titanium으로 개발된 Wunderlist>
+

JavaScript 적용 기술 사례

63
Node.js
 Node.js(http://nodejs.org/)
 Node.js는 실질적으로 서버사이드 자바스크립트 실행환경과
라이브러리로 구성됨
 C++ Addon with Node.js
• V8 엔진도 C++ 로 작성된 라이브러리로 자바스크립트의 오브젝트를
만들거나 함수 호출등의 인터페이스 개발
• Node의 소스 트리 중 deps/v8/include/v8.h를 참고
 모든 Network I/O 는 NonBlocking , File I/O 는
Asynchronous
 Thread 방식에 비해 뛰어난 성능, 다양한 모듈 개발 중
 HTTPd , FTPd , IMAP, WebDAV 등 다양한 서버 프로토콜
지원(기 개발 지원)
 Node.js는 일부 CommonJS 명세를 구현하고 있으며, 쌍방향
테스트를 위해 Debug 환경을 포함
• 서버 V8 위에서 동작하는 이벤트 처리 I/O 프레임워크
• 확장성 있는 네트워크 프로그램 개발을 위해 고안
설치하기 : http://blog.doortts.com/209
http://www.youtube.com/watch?v=jo_B4LTHi3I
C,C++
JavaScript

64
HTML5 Canvas 기반 Chart, Grid JS Library
• Rgraph : 그래프 및 차트에 이용되는 데이터를 스크립트를 통해 RGraph 객체로 정의
• flot : JQuery 기반으로 데이터를 자동으로 분석해서 차트로 변환(MIT License)
• ZingChart : 유료(도메인), JSON 형태의 데이터를 분석해서 차트로 변환(갤러리)
http://www.rgraph.net/
http://code.google.com/p/flot/
http://www.zingchart.com/
- Mozilla Firefox 3.0+
- Google Chrome 1+
- Apple Safari 3+
- Opera 9.5+
- Microsoft Internet Explorer 8+ (see note)
Rgraph flot ZingChart

65
3D Library
• 3D화면을 캔버스에서 WebGL이나 SVG를 사용하여 랜더링 할 수 있도록 지원
• Three.js, Sprite3D.js, Canvas 3D JS Libary (C3이) 등을 주로 사용

68
MOST COMMON PROBLEMS
1. Slow Execution
2. Memory leaks
3. Poor Code Organization
4. Lack of Understanding

69
성능 개선을 위한 노력들
Developer Level
 Programming Best Practices & Tips
Engine Level
 Javascript Engine Race
 Javascript Interpreting mechanism Enhancement
Device Level
 Hardware Acceleration
• Web CL
• GPU Acceleration
Performance Measuring & Benchmark

70
1. JavaScript Best Practices
• Provide a clean separation of content, CSS,
and JavaScript
• De-reference unused objects
• Think Asynchronous
• Working with Objects
• Defer Loading Resources
• General JavaScript Coding Best Practices

71
1. Javascript 성능향상을 위한 10가지 팁
1. 지역변수를 정의하라.
2. with() 구문을 사용하지 말라.
3. 클로저를 적절하게 사용하라
4. 객체의 프로퍼티와 배열의 요소는 변수보다 느리다.
5. 배열속으로 너무 깊이 들어가지 말라
6. for-in 루프를 피하자 ( 그리고 함수호출에 기반한 반복도..)
7. 루프를 사용할 때 제어 조건과 제어 변수 변화를 결합하라
8. HTML 공통 객체(collection objects)를 사용하기 위한 배열을 만
들어라.
9. 웬만하면 DOM을 건드리지 마라!
10.CSS 클래스를 변경하라. 스타일 말고!
http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas
http://nodejs-kr.org/insidejs/archives/522

72
1. JavaScript Best Practices
 Do write fast objects
 Add all properties in constructor
 Don’t delete properties
 Use identifiers for property names
 Use getters and setters sparingly
 Avoid conditionally adding properties
 Avoid default property values on prototype objects
 Do use fast type-specialized arithmetic
 Be aware of number boxing
 Avoid unnecessary floating point math
 Enable type-specializing JIT compilers
 Do use arrays efficiently
 Don’t use objects as arrays and vice versa
 Pre-allocate on creation
 Enumerate efficiently
 Use typed arrays to avoid float boxing

73
2. Javascript Engine Race
 Mozilla
 Rhino, managed by the Mozilla Foundation, open source, developed entirely in Java
 SpiderMonkey (code name), the first ever JavaScript engine, written by Brendan Eich at Netscape Communications
 TraceMonkey, a tracing JIT compiler introduced with Firefox 3.5
 JägerMonkey, the engine introduced with Firefox 4[16]
 IonMonkey, further JIT compiler optimizations for SpiderMonkey,[17] introduced with Firefox 18[18]
 Tamarin, by Adobe Labs
 Google
 V8 - open source, developed by Google in Denmark, part of Google Chrome
 Opera
 Futhark, by Opera Software, replaced by Carakan in Opera 10.50 (released March 2010)
 Carakan, by Opera Software, used since Opera 10.50
 Safari
 JavaScriptCore, renamed to SquirrelFish and marketed as Nitro, for Safari
 Webkit
 SFX(SquirrelFish Extreme), a JavaScript engine for WebKit
 Other
 KJS - KDE's ECMAScript/JavaScript engine originally developed by Harri Porten for the KDE project's Konqueror web browser
 Narcissus open source, written by Brendan Eich, who also wrote SpiderMonkey
 Chakra, for Internet Explorer 9[19]
 dyn.js, open source, written by Douglas Campos and others[20]
 Nashorn, open source (pending), written by Oracle Java Languages and Tool Group[21]
http://en.wikipedia.org/wiki/JavaScript_engine

75
3. Javascript Interpreter
Dynamic (JIT) Static (AOT)
플랫폼 중립성 있음 없음
코드 품질 높음 좋음
동적 작동 활용 활용함 활용하지 않음
클래스와 계층에 대한 인식 인식함 인식하지 않음
컴파일 시간 제한됨. 런타임 비용이 든다. 제한이 적다. 런타임 비용이
없다.
런타임 성능 영향 있음 없음
컴파일 대상 JIT가 핸들함. 자가 핸들함.
동적 (JIT) 정적 (AOT)
시작 성능 조정 가능하지만, 좋지는
않다.
최상
스테디(steady) 상태 성능 최상 좋음
인터랙티브 성능 보통 좋음
결정적 성능 조정 가능하지만, 좋지는
않다
최상
현재 이 이미지를 표시할 수 없습니다.
http://www.ibm.com/developerworks/java/library/j-rtj2/index.html

76
3. Lifecycle of your JavaScript code
Core #1
Foreground
InterpreterByte CodeASTParser
Source Cod
e
Core #2
Background
Native Code
Background
Compiler

77
4. Hardware Acceleration
There are many needs require a level of compute
performace beyond the web platform as it exists today,
such as:
 consumption of high-quality digital video or music streams,
 complex image or speech recognition,
 manipulation and processing large pictures of nature or space,
 processing large sets of tabular data locally in the browser,
 complex animations with DOM elements (via DirectX or
OpenGL),
 exploring 3D worlds, Augmented Reality
 real-time audio and video editing,
 having an integrated development environment that runs
entirely in the browser

78
Why offload workloads to GPU from Javascript?
1. The browser is becoming an application platform.
2. Because of latency and for application
responsiveness, not everything can be done on the
server.
3. Examples: audio, video, games, rich internet
applications, bitcoin mining, etc.
4. Heterogeneous multicore parallel programming.
5. Offloading stuff to the GPU frees up the CPU.

79
From WebKit to the Screen
Architectural Interlude: The GPU Process
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

80
4. Web CL
 WebCL (Web Compute Language / Web OpenCL), from the
Khronos Group, executes on the GPU:
 http://webcl.nokiaresearch.com/index.html
 Extends Javascript.
 Runs in browser (Firefox + some mobile browsers).
 “OpenCL” centric; not surprising given its origins.
 Fairly wide base of support: Khronos, Nokia, Samsung …
 Chrome WebGL
 http://www.chromeexperiments.com/webgl

81
4. WebCL Demo
http://www.youtube.com/watch?v=9Ttux1A-Nuc&lr=1

82
4. GPU Acceleration
IE
Chrome
Firefox

83
4. GPU Acceleration Test
 http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

84
5. Performance Measuring
 Peacekeeper
 Online speed test by Futuremark, mainly using rendering, mathematical and memory operations. Takes approx. 5 minutes
for execution and tells results of other browsers with different CPUs. Does not respect operating system.
 Speed-Battle
 Test of JavaScript engine using simple algorithms. Displays results of other visitors (best, average, poorest) with same
operating system and browser version. Additional statistics page with browser ranking.
 SunSpider
 SunSpider is a benchmark suite that aims to measure JavaScript performance on tasks relevant to the current and near
future use of JavaScript in the real world, such as encryption and text manipulation.[1] The suite further attempts to be
balanced and statistically sound.[2] Version 0.9 was released by the WebKit team in December 2007.[3] It was well
received,[4] and other browser developers also use it to compare the JavaScript performance of different
browsers.[5] Version 0.9.1 was released in April 2010.[6] Internet Explorer 10 shows better results than Google Chrome.
IE10 managed to run the test in 123ms, while Chrome 19 ran the test in 155ms.[7] During Developer Summit in June 2012,
Microsoft demonstrated Internet Explorer Mobile 10out-performing the Galaxy S III, HTC One S, and iPhone 4S on iOS 6
Beta.[8]
 V8Bench
 JavaScript test suite by Google, used to optimize Google Chrome web browser. Chrome 15 achieves about two and half times
better results than Firefox 8 and Opera 11, and about three times better results than Safari 5 with this benchmark (tested on
Windows 7).[9] Does not test rendering performance.
 Dromaeo
 Mozilla test suite based on SunSpider tests. Takes several minutes for execution and displays very detailed information about
every single test task.
 JSLitmus
 Tests JavaScript speed.
http://en.wikipedia.org/wiki/Browser_speed_test

85
http://www.webkit.org/perf/sunspider/sunspider.html

86
 jsPerf: JavaScript performance playground
 자바스크립트 코드 블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이
더 성능이 좋은가 테스트
 250 test cases
• http://jsperf.com/browse
 Popular test cases
• http://jsperf.com/popular
 Example - StringMerge plusoperator VS arrayJoin
• http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run

87
Resources for Study
 Books
 JavaScript: The Good Parts (Crockford)
 JavaScript: The Definitive Guide (Flanagan)
 JavaScript Patterns (Stefanov)
 High Performance JavaScript (Zakas)
 Web CL
 http://www.khronos.org/webcl/
 http://www.chromium.org/developers/demos-gpuacceleration-and-webgl
 River Trail (Intel)
 https://github.com/RiverTrail/RiverTrail/wiki

88
+82-42-860-5333

제4부: Web Protocol
Jonghong Jeon
ETRI, PEC

제4부: Web Protocols
(15:10 ~ 16:30)

4
Traditional Web Architecture
Web
Resources
URI/IRI
RESTful
Web Connectivity
Presentation purpose
(for human interaction)

5
Evolution of Web Connectivity (1/2)
Source: http://www.w3.org/2013/Talks/dhm-wot/#/connectivity

6
Evolution of Web Connectivity (2/2)
XHR

10
XHR
 XMLHttpRequest is
a JavaScript object that was
designed by Microsoft and adopted
by Mozilla, Apple, and Google.
 It's now being standardized in the
W3C.

11
XHR support
 http://caniuse.com/#search=XHR

13
WebSoket
 WebSocket enables bidirectional, message-oriented streaming of
text and binary data between client and server. It is the closest
API to a raw network socket in the browser. Except a WebSocket
connection is also much more than a network socket, as the
browser abstracts all the complexity behind a simple API and
provides a number of additional services:
 Connection negotiation and same-origin policy enforcement
 Interoperability with existing HTTP infrastructure
 Message-oriented communication and efficient message framing
 Subprotocol negotiation and extensibility
 WebSocket is a set of multiple standards: the WebSocket API is
defined by the W3C, and the WebSocket protocol (RFC 6455)
and its extensions are defined by the HyBi Working Group (IETF).

15
WebSocket API
1. Open a new secure WebSocket connection (wss)
2. Optional callback, invoked if a connection error has occurred
3. Optional callback, invoked when the connection is terminated
4. Optional callback, invoked when a WebSocket connection is established
5. Client-initiated message to the server
6. A callback function invoked for each new message from the server
7. Invoke binary or text processing logic for the received message

16
Web Socket support
 http://caniuse.com/websockets.

20
Sever Sent Event
 HTML5 server sent events (SSE) are similar to web sockets. SSE
allow the server to asynchronously send data to the client.
 SSE differ from web sockets in that they only allow serverclient
communication.
mm1: Die Beratung für Connect

21
SSE support
 http://caniuse.com/#search=server

24
Background: What is a WebPage?
86 resources (3 resources, ‘96)
13 hosts
800+KB (34Kb, ‘96)
only 66% compressed (top sites are ~90% compressed)

25
HTTP/1.1 performance problems...
HTTP는 TCP 커넥션을 비효율적으로 사용해서 Latency 문제 발생

26
HTTP 2.0
 "HTTP 2.0 is a protocol designed for low-latency transport of
content over the World Wide Web“
 Improve end-user perceived latency
 Address the "head of line blocking"
 Not require multiple connections
 Retain the semantics of HTTP/1.1

28
Basic data flow in HTTP 2.0...

30
What is WebRTC?
Web Browsers with Real-Time-Communication
● Audio/Video Chat on the web.
● Accessed through Javascript API.
● Does not require plugins, downloads or installs.
● Multiple browsers, multiple platforms.
http://www.webrtc.org/faq

31
How did we get here?
Graphic by Jimmy Lee / jimmylee.info
http://venturebeat.com/2012/08/13/webrtc-is-almost-here-and-it-will-change-the-web/

32
WebRTC: the next (r)evolution in telecommunication!
Independence from network
Time
 Circuit-switched
 Electric gear
 Dedicated lines
 SIP, IP-based
 Somewhat interoperable
 IMS core (for carriers)
 Complex systems
 Pure IP
 Peer-to-peer (P2P)
 Need client software
 „Walled garden“
 Pure HTML5
 No plugin needed
 No client software
 Fully interoperable
PSTN
VoIP
WebRTC
P2P VoIP

33
WebRTC Standards Organizations
W3C
 Creator of HTML
 WebRTC WG creating JavaScript APIs
 ORTC CG (non standards track) creating extensions
IETF
 Creator of HTTP, FTP, email standards
 RTCWEB WG defining what the browsers do
(protocols)

34
WebRTC Use Cases

37
WebRTC API
DataChannel
 Peer 간의 Data를 주고 받을 수 있는 Tunnel api
 PeerConnection을 통해 생성됨.
 Datatype
• string,blob,ArrayBuffer,ArrayBufferView
 Chrome : 26+, Firefox : 22+

38
WebRTC support
 http://caniuse.com/#search=webrtc

40
Evolution of Web UI
Gopher
Keyboard
1차원
Link
Mosaic
Mouse
2차원
Link
PC
IE
Mouse
Event
Mobile
Touch
Sensing
1995 2000 2005 2010
Things
NUI
Sensing
&
Context
2015

41
NUI and Web
Source : 이정헌, 스마트 UI/UX 기술 동향
Touch Event
Web Speech Voice Browsing
Device APIs
System APIs

42
APIs for Hardware & Sensors
Geolocation
Motion sensors
Battery Status
Proximity sensors
Ambient Light sensor
Humidity sensor
Camera & Microphone
streams
NFC
Serial
Bluetooth
WiFi
Network Information
System Settings

43
Web Speech API
https://www.youtube.com/watch?v=qRolXPWqCSo

44
Multi-screen Interaction
Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/

45
Web Technology for small devices
Presentation Layer 없는 WoT

48
HTML5 어떻게 공부하나요 ?
HTML5 스펙 너무 어려워요! 게다가 모두 영어!
 한글 HTML5 번역본  http://j.mp/html5ko (clearboth.org)
그래도 내용이 너무 많아요
 웹 개발자를 위한 최소 스펙  http://j.mp/html5devel
디자이너/기획자도 알아야 하나요 ?
 많은 문서/책자들  HTML5: Edition for Web Authors, …
알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?
 Google의 선물  http://www.html5rocks.com
그 외에 꼭 추천해주실만한 것은 ?
 실전 HTML5 가이드 (한글 PDF)  http://j.mp/html5guide_ko
 기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들
참고: http://xguru.net/635

49
JavaScript 전성 시대
 JavaScript Libraries  http://bit.ly/tVFW6Y
 Application Frameworks, Server Side Library, Testing Frameworks
 Game Engines, Animation Library, Image manipulation
• Akihabara, IMPACT, enchant.js, Unity3D
 Server-side JavaScript
 Node.js : Evented Server-Side Javascript  http://nodejs.org
• Google Chrome의 Javascript Engine V8을 단독으로 사용
• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous
• Thread 방식에 비해 뛰어난 성능
• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈
 Javascript로 컴파일 되는 언어들  http://j.mp/hp2pnR
 CoffeeScript & Kaffeine : Javascript를 더 간결하게
 J2js  Java ByteCode to JS, Script#  C# to JS

50
서적들 - 모바일 HTML5 Web App 관련

51
서적들 - 디자이너/기획자를 위한 HTML5

52
서적 - 웹 UI/UX 디자인 관련

53
+82-42-860-5333

Web Technology and Standards Tutorial

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web Technology and Standards Tutorial (20)

More from Jonathan Jeon (20)

Recently uploaded (20)

Web Technology and Standards Tutorial