View
432
Download
0
Category
Preview:
Citation preview
AR을 위한 HTML5 및 웹 표준
Jonghong JeonETRI, 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 Technology10:50 ~ 11:10 : 휴식11:10 ~ 12:30 : 제2부: HTML512:30 ~ 13:30 : 점심식사13:30 ~ 14:50 : 제3부: Web Application14:50 ~ 15:10 : 휴식15:10 ~ 16:30 : 제4부: Web Protocols16: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
Past : World Wide Web
12
World Wide Web (1989~1991)
13
In The Beginning .....
World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions
14
WWW & Browser(Navigator)
15
Web Browser Architecture
16
FirefoxOS Architecture
17
Web Page Loading procedure
18
Web Page Loading procedure
19
Evolution of World Wide Web
1995 Amazon 1997 interpark
20
Evolution of World Wide Web
21
Evolution of World Wide Web
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
Evolution of World Wide Web
23
Evolution of HTML
HTML TagsArguments
& LawsuitsHTML5
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
29
Our Dream ?
30
Our Dream ?
31
Online/Off-line Convergence
31
32
Online/Off-line Convergence
32
33
Technology Cycles
Source: Mary Meeker, INTERNET TRENDS D11 CONFERENCE , 2013
34
Changes
35
Changes
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
단말 환경과 개발 환경의 변화
40
Top 5 Form Factors, 2015
41
Cross Platform Flexibility
42
Fragmentation is a big problem
Fragmentations
Device
Screen
Platform
Service
Application
Content
43
Cross Platform, Hybrid, HTML5
Web Platform Technology
45
Web Platform
Web Services Platform Technology(Web Resources)
Web Client Platform
Technology
Web Server Platform
Technology
46
Web Platform Architecture
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/
60
[4] HTML5 and Web OS
61
[4] FirefoxOS Architecture
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/
63
[6] Multi Platform Game
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/mhttp://twitter.com/hollobit
AR을 위한 HTML5 및 웹 표준
제2부: HTML5Jonghong JeonETRI, 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 Technology10:50 ~ 11:10 : 휴식11:10 ~ 12:30 : 제2부: HTML512:30 ~ 13:30 : 점심식사13:30 ~ 14:50 : 제3부: Web Application14:50 ~ 15:10 : 휴식15:10 ~ 16:30 : 제4부: Web Protocols16:30 ~ 16:50 : 휴식16:50 ~ 18:10 : 제5부: HTML5 코딩 실습
제2부: HTML5
(11:10 ~ 12:30)
4
Evolution of World Wide Web
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
Reference: http://i2mag.com/wp-content/uploads/2012/07/TheHistoryofHTML5.gif
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
Reference: http://i2mag.com/wp-content/uploads/2012/07/TheHistoryofHTML5.gif
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/calendar2011.09
소셜 Facebook’s Spartan 2011.08
전자책 Amazon Kindle https://read.amazon.com/ 2011.09
신문사 영국 Financial Times http://apps.ft.com/ftwebapp/ 2011.06
게임
Angry Birdshttp://chrome.angrybirds.com
http://facebook.angrybirds.com2011.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
12
HTML5 ?
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.org/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 only 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 sentenceOther 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-inAttributes src="url", type="type"
<embed src="helloworld.swf" />
24
New Attributes
New attributes
Attribute DescriptionAutocomplete 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 on page load
Required Required. Mandates input field value 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 typesInput 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 an input type of search might result in the input field being styled in 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 list 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, but 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, seconds, and fractional seconds, but no time zone.
datetime-local For entering a date and time with no time zone.
number For numerical inputValid values are floating point numbers (whole and decimal numbers).
range For numerical input, but unlike number, the actual is not important.
The implementation of the range control is a slider in most browsers 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 attributesAttribute Purpose Notes
autofocus Focuses the input on the element when the page is loaded.
autofocus can be applied to input, select, textarea,and button.
placeholder Gives the user a hint about what sort of data they should enter.
The placeholder value is displayed in light text until the element gets focus and the user enters some data. It can be specified on input and textarea.
form Specifies one or more forms to which the input element belongs.
By using the form attribute, the input elements can be placed anywhere on the page, not just within the form element. Also, asingle 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 without using custom JavaScript.
autocompleteFor specifying that a field should not autocomplete or be pre-filledby 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, autocomplete 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 regular 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 directionality and the input element contained the dirname attribute, then an indication 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 form element.
This attribute is supported on input and button elements.
formmethod For overriding the method attribute on the form element.
This attribute is supported on input and button elements.
formnovalidate For overriding the novalidate attribute on the form element.
This attribute is supported on input and button elements.
formtarget For overriding the target attribute on the form element.
This attribute is supported on input and button elements.
28
Canvas
Allows dynamic, scriptable rendering of 2D shapes and bitmap images
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 composition
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 display 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>
Cascading Style Sheets (CSS)
35
CSS: A New Philosophy
Separate content from presentation!
Title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam 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 contentDue 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 rules 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
40
Why “Cascading”? (2)
41
Why “Cascading”? (3)
Some CSS styles are inherited and some not
Text-related and list-related properties are inherited - color, font‐size, font‐family, line‐height, text‐align, list‐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 commasDeclarations are separated by semicolonsProperties 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 applies 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 RulesColors 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 @import 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 textfont‐size – size of font: xx‐small, x‐small, small, 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, lighter 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 other 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 horizontal 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 Propertybackground: shorthand rule for setting background
properties at the same time:
is equal to writing:
Some browsers will not apply BOTH color and image for background if using shorthand rule
background: #FFF0C0 url("back.gif") no‐repeat fixed 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 only for "beautification") should be moved to the CSS
54
55
Borders
border‐width: thin, medium, thick or numerical value (e.g. 10px)border‐color: color alias or RGB valueborder‐style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outsetEach 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 rules: border‐top, border‐left, border‐right, border‐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. 200px
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 display 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
60
The Box Model
61
JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333
http://mobile2.tistory.com/mhttp://twitter.com/hollobit
AR을 위한 HTML5 및 웹 표준
제3부: Web ApplicationJonghong JeonETRI, 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 Technology10:50 ~ 11:10 : 휴식11:10 ~ 12:30 : 제2부: HTML512:30 ~ 13:30 : 점심식사13:30 ~ 14:50 : 제3부: Web Application14:50 ~ 15:10 : 휴식15:10 ~ 16:30 : 제4부: Web Protocols16:30 ~ 16:50 : 휴식16:50 ~ 18:10 : 제5부: HTML5 코딩 실습
제3부: Web Application
(13:30 ~ 14:50)
4
Web Page vs. Web Application
Web Page(Site) HTML로 표현된 웹 문서(또는 페이지들을 제공)
Web Application 특정한 기능을 수행하도록 설계된 프로그램
5
HTML5 Revolution
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 RecommendationWD: 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에 대한 기대와 전망
13
그러나….
14
우리가 바라는 HTML5 앱 모습
15
실제 구현 가능한 HTML5 앱 현실
16
그 결과를 받아본 고객의 표정
17
과유불급(過猶不及)
http://www.youtube.com/watch?v=UR4mlLiyjYo
18
HTML5의 현실과 이슈
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
NativeWeb 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
29
Network
30
Communication and Discovery
31
결국, HTML5 개발의 경쟁력 원천은 ?
HTML5 & Web Application
33
Modern Web Applications
JS Frameworks & JS Library
34
The Reach of JavaScript is expanding
Web ApplicationsHTML5 Games
Windows 8 HTML AppsBasic Web Pages
JavaScript Execution Speed
DOM InteractionsAccelerated Graphics
Page Load Time
35
Measuring JavaScript performance
36
Javascript : Event Processing
37
Javascript : Object control
38
Javascript : DOM control
39
Javascript : Graphics - HTML5 games
Bubbles
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
What is Javascript ?
42
Sept 1995Netscape
Aug 1996Microsoft
June 1997ECMAScript
//
Mar 1999XHR
Feb 2005Ajax
Aug 2001IE6
FirefoxSafari
ChromeMobile
History of Javascript
43
http://en.wikipedia.org/wiki/JavaScript
History of Javascript
44http://en.wikipedia.org/wiki/ECMAScripTechnical Committee 39 (TC39) of Ecma International.
Javascript Implementations
45
http://test262.ecmascript.org/
Javascript Conformance tests
III. JavaScript Library
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/
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
49
JavaScript Web FrameworkAjax 기술을 활용한 다양한 오픈 소스 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)
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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.kinhttp://menguy.tistory.com/532
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
51
jQueryJQuery는 다양한 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.
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
53
Sencha
Sencha(http://www.sencha.com)
HTML5 표준을 준수하는 Ext JS 기반의 모바일 웹 어플리케이션용 JS 프레임워크
Sench Touch 를 통한 모바일 디바이스 지원, 전용 개발 도구 지원
도표 제작 및 엔터프라이즈 지원 강화
Sencha.io: 클라우드 기반으로 다양한 스크린 사이즈의 디바이스에 대응
PhoneGap 등 하이브리드 웹 앱 프레임워크와 연동
네이티브 수준의 터치 이벤트 처리 Sencha로 개발한 카드 게임 Sencha.io 개념도
• Sencha는 Ext.JS로 시작한 자바 스크립트 프레임워크로 PC & Mobile 지원• 완성도 높은 웹 앱 프레임워크로 다양한 상용 제품군 확보
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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 사용
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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+
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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/ 에서도 활용
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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) 지원
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
58
Hybrid 기술 활용
• 모바일 서비스 개발을 위한 전용 어플리케이션 프레임워크에 활용• JS 코드를 통해 Web-to-Native 기술이 보편적으로 보급되어 활용되고 있음
Javascript tools
App factories
Web-to-native Runtimes
Source translators
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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) RuntimeWYSIWYG, LiveCode
(natural-like language)Native
appspresso Runtime, Web-to-native appwrapper (PhoneGap)
HTML5, CSS, JavaScript Web apps, Native
AppMobiRuntime (Mobius) Web-to native
app wrapper(PhoneGap)HTML5, CSS, JavaScript Web apps, Hybrid
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
60
PhoneGap 소개
PhoneGap
HTML+JS로 제작된 웹 앱을 담는 컨테이너
HTML5 + CSS3 + JS 로 개발
다양한 모바일 플랫폼 네이티브 앱으로 변환
기존에 웹 앱에서 불가능했던 디바이스 기능을 JS로 접근가능
• 가속도계, 카메라, 주소록, 파일, 네트워크 등 지원
• 스토리지, 푸시, GPS 등 사용 가능
최근 PhoneGap Build 시스템 구축
• 클라우드 컨셉을 SW개발에 적용
• PhoneGap은 크로스 플랫폼 모바일 전용 어플리케이션 프레임워크• 폭넓은 사용자 층을 기반으로 최근 클라우드형 빌드 시스템 제공
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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>
+
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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/209http://www.youtube.com/watch?v=jo_B4LTHi3I
C,C++
JavaScript
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
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
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
65
3D Library
• 3D화면을 캔버스에서 WebGL이나 SVG를 사용하여 랜더링 할 수 있도록 지원
• Three.js, Sprite3D.js, Canvas 3D JS Libary (C3이) 등을 주로 사용
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
Javascript Performance Issues
67
Javascript Performance
68
MOST COMMON PROBLEMS
1. Slow Execution2. Memory leaks3. Poor Code Organization4. 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-zakashttp://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
74
2. Javascript Engine Race
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 #1Foreground
InterpreterByte CodeASTParserSource Code
Core #2Background
Native CodeBackground 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
4. Hardware Acceleration
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
4. Hardware AccelerationFrom 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 onWindows 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
5. Performance Measuringhttp://www.webkit.org/perf/sunspider/sunspider.html
86
5. Performance Measuring
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
JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333
http://mobile2.tistory.com/mhttp://twitter.com/hollobit
AR을 위한 HTML5 및 웹 표준
제4부: Web ProtocolJonghong JeonETRI, 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 Technology10:50 ~ 11:10 : 휴식11:10 ~ 12:30 : 제2부: HTML512:30 ~ 13:30 : 점심식사13:30 ~ 14:50 : 제3부: Web Application14:50 ~ 15:10 : 휴식15:10 ~ 16:30 : 제4부: Web Protocols16:30 ~ 16:50 : 휴식16:50 ~ 18:10 : 제5부: HTML5 코딩 실습
제4부: Web Protocols
(15:10 ~ 16:30)
4
Traditional Web Architecture
WebResources
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
7
RESTful Web
8
Web Platform Architecture
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
WebSocket
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 WebSocketconnection 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).
14
WebSocket
15
WebSocket API
1. Open a new secure WebSocket connection (wss)2. Optional callback, invoked if a connection error has occurred3. Optional callback, invoked when the connection is terminated4. Optional callback, invoked when a WebSocket connection is established5. Client-initiated message to the server6. A callback function invoked for each new message from the server7. Invoke binary or text processing logic for the received message
16
Web Socket support
http://caniuse.com/websockets.
Server Sent Event
18
Server push technologies
19
Server push technologies
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 serverclientcommunication.
mm1: Die Beratung für Connect
21
SSE support http://caniuse.com/#search=server
HTTP 2.0
23
HTTP History
24
Background: What is a WebPage?
86 resources (3 resources, ‘96)13 hosts800+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
27
HTTP/2 in one slide…
28
Basic data flow in HTTP 2.0...
WebRTC
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)
mm1: Die Beratung für Connect
34
WebRTC Use Cases
mm1: Die Beratung für Connect
35
WebRTC connection
36
WebRTC API
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
Advanced Web UI
40
Evolution of Web UI
Gopher
Keyboard
1차원Link
Mosaic
Mouse
2차원Link
PCIE
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 APIsSystem APIs
42
APIs for Hardware & Sensors
GeolocationMotion sensorsBattery StatusProximity sensorsAmbient Light sensorHumidity sensorCamera & Microphone
streamsNFCSerial
BluetoothWiFiNetwork InformationSystem 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
46
New Device & New UX
대응 전략
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
JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333
http://mobile2.tistory.com/mhttp://twitter.com/hollobit
Recommended