web technology and standards tutorial

AR을 위한 HTML5 및 웹 표준

Jonghong JeonETRI, PEC

Email: [email protected] 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


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 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 ([email protected]) +82-42-860-5333

http://mobile2.tistory.com/mhttp://twitter.com/hollobit


제2부: HTML5Jonghong JeonETRI, PEC




2

Agenda


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

[email protected]

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="[email protected]">

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.


formmethod For overriding the method attribute on the form 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 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




제3부: Web ApplicationJonghong JeonETRI, PEC




2

Agenda


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


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)


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


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.


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


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/209http://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이) 등을 주로 사용


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




제4부: Web ProtocolJonghong JeonETRI, PEC




2

Agenda


제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

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)


34

WebRTC Use Cases


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

