footer - CBNU 웹메일

Download Report

Transcript footer - CBNU 웹메일 

웹 프로그래밍 소개
류관희
충북대학교
강의교재
한번에 배우는 HTML5+자바스크립트,
지닌 마이어(김지원 옮김), 한빛미디어, 2011
HyperText
 1965, Nelson
HyperCard
 1987 Apple
3
World Wide Web
 1990, CERN
– Tim Berners-Lee
“Information Management: A Proposal”
Tim Berners-Lee, CERN
March 1989, May 1990
4
Mosaic Web Browser
 1993, Marc Andreessen & Eric Bina
– NCSA, Univ. of Illinois
5
WWW Consortium
 1994, http://www.w3c.org
6
Web Browsers 1st Stage
• Netscape
– 1994~1997 1.0~4.8
– 1998 오픈소스 발표
v4.0
– 2000 Mozilla 기반
– 2007 AOL v7.0
• Microsoft
– 1995
v4.0
– 1999
– 2008
v8.0,
– 2010
v1.0 ~ 1997
v5.0, 2001 v6.0
v7.0, 2009
v9.0
• 치열한 경쟁
– 비표준 태그크로스 브라우징
– 반독점금지법, 2000 미 대법
원
7
Web Browsers 2nd Stage
 1996 Opera, Norway
 2002 Mozilla
(2007 Netscape 9.0)
 2004 Firefox (Phoenix, Firebird)
 2003 Safari
 2008 Chrome
8
Development of Web
9
HTML5 History
HTML
HTML versions







1991, HTML 1.0 (Berners-Lee)
1995, HTML 2.0 (IETF)
1997, HTML 3.2 (W3C)
1997, HTML 4.0 (W3C)
1999, HTML 4.01 (W3C)
2000, XHTML 1.0 (W3C)
?? , XHTML 2.0
• Xform, Xframe, DOM대신 XML event, RDFa, 일부요소 추가
11
Why “new HTML” ?
–
–
–
–
Fail of XHTML2
Developer Productivity
Browser Compatibility
Rich Web functions: Flex, Silverlight, AIR
Now, Web is a Platform
Web on Everything
12
Web Platform is Accelerating
13
Key Developer Challenges
14
WHATWG
 WHAT Working Group
– Web Hypertext Application Technology
– Open Community, 2004
– W3C는 유료 회원에게만 개방
 Developing
– Web Form 2.0, Web Application 1.0
15
New Activities on W3C, 2005
 Web Application Format WG
• Web Form 2.0, Widget, etc.
 Web API WG
• XMLHttpRequest, DOM3, File Upload, etc.
HTML WG created, 2007
• 600+ invited experts, open mailing-list
16
 HTML의 발전 역사
17
Standard &
Web Development
HTML5 Standard
Service Model
HTML Events
Source: http://channy.creation.net
19
W3C Standards (in draft)
http://www.w3.org/TR/html5/
20
HTML (HyperText Markup Language)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
</head>
<body>
<header>
<h4>HTML5 Introduction</h4>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="http://www.google.com">Google</a>
<a href="http://www.facebook.com">Facebook</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>We have...</p>
<p>For example...</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
21
CSS (Cascading Style Sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
…
body {
background-color:#6698FF; /* sky blue */
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header {
background-color:#F88017; /* dark orange */
display:block;
color:#FFFFFF; /* white */
text-align:center;
}
header h2 {
color:#B1FB17; /* green yellow */
}
nav {
display:block;
width:25%;
float:left;
}
…
22
Javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
<script type="text/javascript">
function mHandler() {
document.getElementById("para1").innerHTML =
"Most Americans began this week not knowing
who Joseph Kony was. That's not surprising:
most Americans begin every week not knowing
a lot of things, especially about a part of the
world as obscured from their vision as Uganda,
the country where Kony and his Lord's
Resistance Army (LRA) commenced a brutal
insurgency in the 1980s that lingers to this day.";
}
</script>
</head>
<body>
…
<section>
…
<p id="para1" onmouseover="mHandler()">We
have...</p>
<p>For example...</p>
…
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
23
HTML + CSS + Javascript (+ Ajax)
Document Structure + Contents
HTML
A fast and concise
JavaScript Library
jQuery
CSS
Javascript
Appearance
Functionality
Ajax
Dynamic User Interfaces
24
A Rough History of Web Standards
91-92
93-94
HTML 1
HTML 2
95-96
97-98
HTML 4
99-00
01-02
03-04
05-06
07-08
XHTML1.
0
CSS 1
CSS 2
JavaScript
1.0/1.1
JavaScript
1.2,
JavaScript
1.3,
DOM
DOM 2
11-12
13-14
HTML 5
Web 2.0
W3C
09-10
JavaScript
1.5
CSS3
Ajax,
JavaScript
1.6
JavaScript
1.7
JavaScrip
t1.8
DOM3
WHATWG
1999년 HTML4.01권고, 이후 XHTML에 주력
2004년 워크숍에서 HTML 새로운 표준화를 바라는
브라우저 제작사의 제안을 배척 (XHTML2에 주력)
2004년 애플, 모질라, 오페라 등 브라우저 제작사 들 자체
표준화 단체 결성(WHATWG)
2007년 HTML5 제정에 협력할 것을 표명
2008년 HTML5가 W3C의 초안으로 공개
2009-10 HTML5 사양 최종 심사 청구
2009-07 XHTML2 WG 활동을 중지하고
HTML5 표준화 작업 진행
사양의 업데이트를 진행 중
25
What is HTML5?
 HTML5 will be the new standard for HTML, XHTML, and the HTML
DOM.
 HTML5 is still a work in progress. However, most modern
browsers have much HTML5 support.
 HTML5 is a cooperation between the World Wide Web
Consortium (W3C) and the Web Hypertext Application Technology
Working Group (WHATWG).
 WHATWG was working with web forms and applications, and
W3C was working with XHTML 2.0. In 2006, they decided to
cooperate and create a new version of HTML.
26
HTML5 Development Rules
 The following rules for HTML5 were established:
–
–
–
–
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
More markup to replace scripting
HTML5 should be device independent
 Browser Support
– HTML5 is not yet an official standard, and no browsers have full
HTML5 support.
– But all major browsers (Safari, Chrome, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest versions.
27
HTML5 퀵 스타트
[HTML 문법 기술 방법]
- MIME 타입 : text/html
- HTML5 파일 확장자 : .html 또는 .htm
- HTML5 파일의 시작부분에 DOCTYPE 선언
: <!DOCTYPE html>
- 첫 태그인 <html> 태그는 다음과 같이…
: <html lang="en">
[lang 속성]
: <html lang=“kr">
- 문서의 언어 정보 제공.
-주로 검색엔진에서 활용
- 문자 인코딩 지정 방법
-음성 장치(speech synthesizers)에서도
: <meta charset=“UTF-8”>
활용
-속성 값 참조 사이트
http://ko.wikipedia.org/wiki/ISO_639
28
HTML5 퀵 스타트
[HTML 문법 기술 방법]
- HTML 문법 상세 몇 가지..
1) 종료 태그를 기술해서는 안되는 요소
: meta, area, base, br, col, command, embed, hr, img, input,
keygen, link, param, source
- 틀린 예)
<meta charset=“UTF-8”></meta>
- 맞는 예)
<meta charset=“UTF-8”>
<meta charset=“UTF-8”/>
29
HTML5 퀵 스타트
[HTML 문법 기술 방법]
- HTML 문법 상세 몇 가지..
2) 속성에 관해
- 속성 값에 인용부호 생략 가능
- true/false 값을 가지는 속성 속성 값 생략 가능
- 값이 false인 경우는 속성 지정 자체를 하지 않음.
<input id="age" type="number" disabled>
<input id=age type=number disabled="true">
<input id=age type=number disabled="disabled">
<input id="age" type="number">
30
HTML5 퀵 스타트
[HTML 문법 기술 방법]
- HTML을 이용한 마크업 예
<!DOCTYPE html>
<html lang="kr">
<head>
<title>문서의 제목입니다.</title>
<meta charset="UTF-8">
<style type="text/css">h1 {font-size: 2em;}</style>
</head>
<body>
<h1>HTML을 이용한 마크업 예제</h1>
<p>단락 1</p>
<input id="age" type="number">
</body>
</html>
31
HTML5 퀵 스타트
[HTML5에서 없어진 요소]
- 주로 화면 표현과 관련된 요소
- big, blink, marquee, frame관련 요소, applet 등
- 후방 호환성을 위해 브라우저에서는 제대로 표시
- 가능한 사용하지 않도록 주의
[HTML5 문서 검증]
- http://html5.validator.nu
[HTML5 Outliner]
- http://gsnedders.html5.org/outliner
32
Block element vs. Inline element
 All HTML elements are naturally displayed in one of the following
ways:
– Block takes up the full width available, with a new line before and
after (display:block;)
– Inline takes up only as much width as it needs, and does not force
new lines (display:inline;)
– Not displayed Some tags, like <meta /> and <style> are not visible
(display:none;)
33
Block Element vs. Inline Element
 Block Elements
– <div>
• Your general-purpose box
– <h1> ... <h6>
• All headings
– <p>
• Paragraph
– <ul>, <ol>, <dl>
• Lists (unordered, ordered and definition)
– <li>, <dt>, <dd>
• List items, definition list terms, and definition list definitions
– <table>
• Tables
– <pre>
• Indicates a block of preformatted code
– <form>
• An input form
– <blockquote>
• Like an indented paragraph, meant for quoting passages of text
34
Block Element vs. Inline Element
 Inline Elements
– <span>
• Your all-purpose inline element
– <a>
• Anchor, used for links (and also to mark specific targets on a page for
direct linking)
• HTML5 부터 다른 블록요소를 감쌀 수 있게 되었음.
– <strong>
• Used to make your content strong, displayed as bold in most browsers,
replaces the narrower
• 시각적으로 두꺼운 글씨 + 의미적으로도 강조
– <bold> or <b>
• bold tag
• 시각적으로 두꺼운 글씨
– <em>
• Adds emphasis, but less strong than <strong>. Usually displayed as italic
text, and replaces the old
– <i>
• (italic) tag
35
Block Element vs. Inline Element
 Inline Elements
– <img />
• Image
• alt attribute should be specified.
<img src="p.gif" />
<img src="p.gif" alt="p" />
– <br>
• The line-break is an odd case, as it's an inline element that forces a new
line. However, as the text carries on the next line, it's not a block-level
element.
– <input>
• Form input fields like and
– <abbr>
• Indicates an abbr.
– <acronym>
• Working much like the abbreviation
36
New Elements in HTML5
 Semantic Tags
(시맨틱 : 사람뿐만 아니라 기계가 이해할 수 있는 정보)
– Well-defined Document Structure
<html>
<body>
<div class=“header”>..</div>
<div class=“content”>..</div>
<div class=“footer”>..</div>
</body>
</html>
<div id=“header”>
<div id=“nav”>
<div id=“article”>
<div id=“aside”>
<div id=“footer”>
<html>
<body>
<header>..</header>
<section class=“content”>
..
</section>
<footer>..</footer>
</body>
</html>
<header>
<nav>
<article>
<aside>
37
<footer>
New Elements in HTML5
 Semantic Tags
– Well-defined Document Structure
Header
Navigation
Section
Article
Footer
Article
Aside
Footer
Article
Footer
Footer
38
New Elements in HTML5
 Semantic Tags
– Various content-specific tags (which browsers support with various
appearance)
– Common appearance can be styled with CSS
<!DOCTYPE html>
<html>
<body>
meter tag: <meter value="0.6">60%</meter><br/>
progress tag: <progress value="0.5">Half way!</progress><br/>
datetime input tag: <input type="datetime"/><br/>
</body>
</html>
Chrome 17.0
IE 9.0
Firefox 10.0
Opera 11.61
39
New Elements in HTML5
 Semantic Tags
40
New Elements in HTML5
 Semantic Tags - Primary layout engines
– Webkit (Apple Safari/iOS, Chrome/Android, Symbian, Blackberry,
Amazon Kindle)
• Open-source engine
• Supports the most common features of HTML5 & a large amount of
CSS3
• Desktop Chrome supports 33% of HTML5
– GecKo (Firefox, Netscape)
– Open-source engine
– Desktop Firefox supports 50% of HTML5
– Trident (Internet Explorer/IE Mobile)
• Desktop IE 9 supports 25% of HTML5
• Windows 7 Mobile - New! Improved! But is it selling?
– Presto (Opera, Opera Mini)
• Leading HTML5 Browsers
41
New Elements in HTML5
Tag
Description
<section>
For a section in a document. Such as chapters, headers, footers,
or any other sections of the document
<article>
Independent, self-contained content. An article should
be possible to distribute it independently from the rest of
the site (e.g., Forum post, newspaper article, blog entry
user comment)
<aside>
For content aside from the content it is placed in.
The aside content should be related to the surrounding
content
<command>
A button, or a radiobutton, or a checkbox
<details>
For describing details about a document, or parts of a document
<summary>
A caption, or summary, inside the details element
<figure>
self-contained content like images, diagrams, photos, code, etc.
<figcaption>
The caption of the figure section
42
New Elements in HTML5
<section>
<h1>WWF</h1>
<p>The World Wildlife Foundation was born in 1961...</p>
</section>
<article>
<a href="http://blog.netscape.com/2007/12/28/end-of-support-fornetscape-web-browsers">Netscape is dead</a><br />
AOL has a long history on the internet, being one of the first companies
to really get people online.....
</article>
<details>
<summary>Copyright 1999-2011.</summary>
<p>All pages and graphics on this web site are the property of the
company Refsnes Data.</p>
</details>
<figure>
<figcaption>A view of the pulpit rock in Norway</figcaption>
<img src="img_pulpit.jpg" width="304" height="228" />
</figure>
43
New Elements in HTML5
Tag
Description
<footer>
For a footer of a document or section, could include the name
of the author, the date of the document, contact information,
or copyright information
<header>
For an introduction of a document or section, could include
navigation
<hgroup>
For a section of headings, using <h1> to <h6>, where the
largest is the main heading of the section, and the others are
sub-headings
<mark>
For text that should be highlighted
<meter>
For a measurement, used only if the maximum and minimum
values are known
<nav>
For a section of navigation
<progress>
The state of a work in progress
<time>
For defining a time or a date, or both
<wbr>
Word break. For defining a line-break opportunity.
<nobr>
No line Break.
44
New Elements in HTML5
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<footer>This document was written in 2009.</footer>
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br />
<meter value="0.6">60%</meter>
<nav>
<a href="default.asp">Home</a>
<a href="tag_meter.asp">Previous</a>
<a href="tag_noscript.asp">Next</a>
</nav>
45
New Elements in HTML5
HTML5 Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Favorite Sites </title>
<meta charset="UTF-8">
<style>
header {
font-family:Georgia,"Times New Roman",serif;
text-align:center;
font-size:30px;
display:block;
}
article {
text-align:left;
font-size:20px;
margin:20px;
display:block;
font-family:"Century","Tahoma", sans-serif;
}
46
New Elements in HTML5
footer {
font-family:Georgia,"Times New Roman",serif;
text-align:center;
font-size:15px;
display:block;
}
</style>
</head>
<body>
<header>Favorite Sites </header>
<article>
My Academic website, <a
href="http://faculty.purchase.edu/jeanine.meyer">http://faculty.purchase.edu/jeanine
.meyer</a> is where I put information about my courses, along with publications
and other activities.
</article>
<article>
My daughter, Aviva, is active in the <a href="http://stolenchair.org">Stolen Chair
Theater company.</a> The next production involves Victorian photo-collage.
</article>
<footer>This is my first html5 webpage</footer>
<body>
</html>
47
New Elements in HTML5
• Using Meter (계량의 사용)
– <meter>60%</meter>
– <meter>3/5</meter>
– <meter>6 blocks used
(out of 10 total)</meter>
– <meter value="0.6">Medium</meter>
48
New Elements in HTML5
• Using Progress (진행상태의 사용)
– <progress>Step 3 of 6</progress>
– <progress>50% Complete</progress>
– <progress value="0.5">
Half way!
</progress>
49
New Elements in HTML5
The object's downloading progress:
<progress value="22" max="100">
</progress>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14">Valentines
day</time>.</p>
<nobr>
일반적으로 브라우저의 폭보다 긴 문장의 내용을 입력하면 어떻게 될까요?
기본적으로 브라우저 창에 모든 문장을 나타낼 수 없으면 화면에 자동으로
스크롤바가 나타납니다. 그런데 이 태그를 이용하면 줄이 바뀌지 않아 브라
우저보다 긴 부분은 화면에 보이지 않습니다. 이 태그가 적용된 부분에서 줄
을 바꾸려면 <wbr> 태그를 이용합니다.
</nobr>
50
New Advanced Elements in HTML5
media
Tag
Description
<audio>
For multimedia content, sounds, music or other audi
o streams
<video>
For video content, such as a movie clip or other vide
o streams
<source>
For media resources for media elements, defined ins
ide video or audio elements
canvas
Tag
Description
<canvas>
For making graphics with a script
51
HTML5 Audio & Video
 Audio/Video
– Play audio/video in the browser
– Do not need a plugin
– Accessible through JavaScript
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
52
HTML5 Audio
Supported Audio Format
Example
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
53
HTML5 Video
Supported Video Format
Example
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
54
HTML5 Canvas
What is HTML5 Canvas
 The HTML5 canvas element uses JavaScript to draw graphics on
a web page.
 A canvas is a rectangular area, and you control every pixel of it.
 The canvas element has several methods for drawing paths,
boxes, circles, characters, and adding images.
Create a Canvas Element
<canvas id="myCanvas" width="200" height="100"></canvas>
55
HTML5 Canvas
 Canvas
– Dynamic and scriptable rendering of 2D/3D images
– Uses JavaScript to draw
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
56
HTML5 Canvas
Example 1
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
57
HTML5 Canvas
Example 2
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
58
HTML5 Canvas
Example 3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="img_flwr.png";
cxt.drawImage(img,0,0);
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
59
HTML5 Canvas
 Canvas
– Example 1. 게임 http://www.gamesforthebrain.com/game/oooze/
– Example 2. 페인터 http://bomomo.com/
60
HTML5 Canvas
 Canvas
– Example 3. 사진 Slideshow (Dynamic!)
http://www.lo2k.net/experiments/flickr/28791827@N00
– Example 4. Photo effect
http://www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas/
61
New Input Type Elements in HTML5
New Input Type
Tag
Description
tel
The input value is of type telephone number
search
The input field is a search field
url
The input value is a URL
email
The input value is one or more email addresses
datetime
The input value is a date and/or time
date
The input value is a date
month
The input value is a month
week
The input value is a week
time
The input value is of type time
datetime-local
The input value is a local date/time
number
The input value is a number
range
The input value is a number in a given range
color
The input value is a hexadecimal color, like #FF8800
62
New Input Type Elements in HTML5
Example
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" method="get">
Homepage: <input type="url" name="user_url" /><br />
E-mail: <input type="email" name="user_email" /><br />
Number 1: <input type="number" name="points" min="1" max="10" /><br />
Number 2: <input type="range" name="points" min="1" max="10" /><br />
Date: <input type="date" name="user_date" /><br />
Color: <input type="color" name="user_color" />
<input type="submit" />
</form>
</body>
</html>
63
New From Elements in HTML5
form
Tag
Description
<datalist>
A list of options for input values
(like keyword suggestion/autocomplete)
<keygen>
Generate keys to authenticate users
<output>
For different types of output, such as output written
by a script
64
New From Elements in HTML5
Example (works well with Firefox, not chrome)
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
65
New From Attribute in HTML5
New Attributes in Form
66
New From Attribute in HTML5
Example - autocomplete
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete
works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
67
New From Attribute in HTML5
Example - autofocus
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>
</body>
</html>
68
New From Attribute in HTML5
Example - pattern
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
</body>
</html>
69
New From Attribute in HTML5
Example - placeholder
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3Schools" />
<input type="submit" />
</form>
</body>
</html>
70
New From Attribute in HTML5
Example - required
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
</body>
</html>
71
New From Attribute in HTML5
Example - form
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
<p>The input field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="user_form" />
</body>
</html>
72
New From Attribute in HTML5
Example – formaction, formmethod, formnovalidate
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br
/>
<input type="submit" formmethod="post" value="Submit as admin" /><br />
<input type="submit" formnovalidate="true" value="Submit without validation" /><br
/>
</form>
</body>
</html>
73
New From Attribute in HTML5
Example – multiple
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>Try selecting more than one file when browsing for files.</p>
</body>
</html>
74
New From Attribute in HTML5
Example – novalidate
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.jsp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
</body>
</html>
75
HTML5 Global Attributes
Global Attributes
 draggable
<!DOCTYPE html>
<html>
<body>
<p draggable="true">This is a paragraph. It is draggable. Try to drag this
element.</p>
</body>
</html>
 accesskey
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com/" accesskey="w">W3Schools</a><br />
<a href="http://www.google.com/" accesskey="g">Google</a>
<p><b>Note:</b> Use Alt + <i>accessKey</i> to access the element with
the specified access key.</p>
</body>
</html>
76
HTML5 Global Attributes
Global Attributes
 contenteditable / spellcheck
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true" spellcheck="true">This is a praggagraph. It is
editable. Try to change this text.</p>
</body>
</html>
 tabindex
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com/" tabindex="2">W3Schools</a><br />
<a href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
<p><b>Note:</b> Try navigating the links by using the "Tab" button on
you keyboard.</p>
</body>
</html>
77
HTML5 Global Attributes
Global Attributes
 title
<!DOCTYPE html>
<html>
<body>
<p><abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>
</body>
</html>
78
HTML5 LocalStorage
Storing Data on the Client
 HTML5 uses JavaScript to store and access the data.
 HTML5 offers two new objects for storing data on the client:
 window.localStorage - stores data with no time limit
 window.sessionStorage - stores data for one session
 Earlier, this was done with cookies.
 Cookies are not suitable for large amounts of data, because they
are passed on by EVERY request to the server, making it very slow
and in-effective.
 In HTML5, the local stored data is NOT passed on by every
server request, but used ONLY when asked for.
 It is possible to store large amounts of data without affecting
the website's performance.
79
HTML5 LocalStorage
Example 1
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter will continue.</p>
</body>
</html>
80
HTML5 LocalStorage
Example 2
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
sessionStorage.pagecount=1;
}
document.write("Visits: " + sessionStorage.pagecount + " time(s).");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter has been reset.</p>
</body>
</html>
81
What’s New in HTML5?
 More Functions in HTML5
일반적으로 HTML5라 불리는 범위
Geolocation
Canvas
Web Workers
오프라인
커뮤니케이션
드래그&드롭
Video&Audio
Data Cache API
File API
Web Storage
HTML5
Server-Sent
Events
Indexed
Database API
Web Sockets
Web SQL
Database
………
82
HTML5 Features
 더 풍부한 웹 애플리케이션
–
–
–
–
–
–
–
–
동영상이나 음성 재생(video&audio 요소)
자유로운 2D/3D 그래픽(canvas 요소)
오프라인에서도 작동하는 애플리케이션
도메인 간의 통신 구현
Client측 데이터 저장(Web Storage, Web SQL DB 등)
백그라운드 처리 수행(Web Workers)
서버로부터의 데이터 푸시 & 쌍방향 통신(Web Sockets 등)
로컬 파일의 내용을 읽어들임(File API)
 의미성있는 마크업
– Symantic: 사람뿐만 아니라 기계가 이해할 수 있는 정보
– 문서구조나 문서 안의 데이터의 의미를 나타내는 사양 포함
83
HTML5 Features
 높은 접근성 (Accessibility)
– 높은 접근성이란… 장애가 있는 사람들에게까지도 웹을 쉽게 이용할 수
있도록 돕는것
• 예) 시각장애자의 경우 음성브라우저 이용 웹 컨텐츠 이용.
– header, footer, section 등 프로그램이 문서구조 이해
– HTML5는 WAI-ARIA(Web Accessibility Initiative – Accessible Rich
Internet Application)라는 접근성 향상을 목표로 한 사양 포함.
 외부 플러그인 (Plugin) 사용을 최소화
– 목표 – Plug-in의 완전 제거
• E.g., flash!
– 대신 각 Browser들이 관련 Tags 들에 대한 완벽한 구현 및 표현
 Device 독립적
– “Web app”의 등장에 기여
84
모바일 어플리케이션에 대한 구분
85
모바일 어플리케이션에 대한 구분
 Native App.
– Written in a programming language for a targeted operating system
• Apple iOS Devices: iOS SDK, using Objective-C
• Android Devices: Android SDK, using Java
– Have access to all features of the hardware
• Camera, GPS, Accelerometer, Microphone, etc.
– distributed via the respective app “marketplace”
• iTunes App Store, Android Marketplace
– iOS apps are subjected to rigorous testing/acceptance process;
Android apps are submitted to the Marketplace with little oversight
– Development fees:
• Apple: SDK is free (registration required), $99 to submit apps to App
Store
• Android: SDK is free, $25 to submit apps to Android Marketplace
86
모바일 어플리케이션에 대한 구분
 Web App.
– Web-based applications written with traditional web programming
languages
• HTML, CSS, Javascript, Ajax
• Flash
– Have limited access to device hardware (depends on platform)
– Can be used cross-platform (some restrictions apply)
– Most are intended to be used when the device is online; some have
capabilities for offline use
– No centralized marketplace. It’s Free!
• 하지만, 최근 Desktop Web App의 Marketplace로서 Chrome Web Store의
등장 주목
87
Native App. vs. Web App. vs. Hybrid App.
 개발자 관점의 재활용 측면
– Native App
• 디바이스/OS 별로 “디자인 + 프로그램 코드“을 새롭게 개발
• 서버의 통신모듈 및 데이터 정도만 재활용 가능
– Web App
• 여러 스마트폰 플랫폼에서 “디자인 + 프로그램 코드”를 모두 재활용
• 서버의 통신 모듈 및 데이터도 당연히 재활용
• 단점: Device hardware 이용 제한
– Hybrid App
• Web App과 거의 비슷한 재활용성
88
Native App. vs. Web App. vs. Hybrid App.
 이용률
– Native App
• 다운로드 후 다음날 실행 비율은 30%
• 한달 후에도 활발히 이용하는 사용자 5%미만
• 사용비율 : 게임 ↑, 정보성 어플 ↓
– Web App
• App 구입 및 설치에 대한 비용 無
• 배포 이슈에의 자유로움
– Hybrid App
• …
89
Native App. vs. Web App. vs. Hybrid App.
 사용자 인터페이스(이벤트처리)
– Native App
• App 직접컨트롤 (멀티터치, swipe…)
– Web App
• HTML 링크를 클릭하는
것과 동일
– Hybrid App
• 기본적으로는 HTML 링크 클릭과 동일
• 필요하면 App 직접컨트롤 기능 구현 가능
90
Native App. vs. Web App. vs. Hybrid App.
 수정 및 배포
– Native App/Hybrid App
• 프로그램 수정, 스토어 업로드, 이용자 업데이트하는 일련을 과정을 거쳐야
함으로 수정에 따른 배포 지연
– Web App
• 서버 프로그램을 업데이트하면 바로 반영되므로 수정 및 배포가 용이
91
Native App. vs. Web App. vs. Hybrid App.
 향후 전망
– Web App은 OS에 비종속적인 높은 호환성과 효율적인 플랫폼
– 인터넷 관련 Device에 브라우저는 기본적으로 탑재
– Web이 Native App의 대부분 기능을 흡수하여 OS로서 Brower 플랫폼
으로 진화 중
•
HTML5, Device API, Web GL
– 여러 가지 제약은 시간이 지나면 해결될 것임
– 그러나, 그 시간이 얼마나 걸릴지…
92
Is Really “Web App + HTML5” Winner?
 문제점 1. 모바일 브라우저 파편화
– 현재 각 브라우저마다 HTML5 마크업/기능 지원 사항이 모두 다름
• 각 사항에 대한 향후 일정 파악도 힘듦
93
Is Really “Web App + HTML5” Winner?
 문제점 1. 모바일 브라우저 파편화
– Layout Engine Comparison – Mobile Browsers
• http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
94
Is Really “Web App + HTML5” Winner?
 문제 2. 화려한 그래픽이 요구되는 App에 대해서 Flash 보다
뒤쳐지는 그래픽 처리 능력과 복잡한 코드 구성
– Flash: 1998년 시장에 공개, 발전을 거듭하여 시장에 뿌리를 내린 상황
– HTML5: 2004년에 처음 등장하여 이제 막 업계에서 관심을 받음
95
Is Really “Web App + HTML5” Winner?
 문제 3. 아직 표준 완성이 안됨
– HTML5는 아직 진행 중인 기술
– HTML5 표준을 통제하는 주체가 W3C라고 하지만, 표준은 표준일 뿐!
 문제 4. 보안에 취약하다.
– 클라이언트에서 동작하는 스크립트가 지니고 있는 영원한 숙제
– 개발단계에서 보안문제에 대해 많은 고민을 하면서 개발해야 함
 [참고] HTML5의 11가지 (기술적 사항에 대한) 불편한 진실
– http://blog.creation.net/505
96
모바일 기반 포탈 앱
 모바일 기반 포탈 앱
– 하이브리드웹 기반으로 모바일 디바이스, 운영체제 상관없이 동일한
화면 제공
97
Web/Hybrid App App 기반의 게임
 Web/Hybrid App App 기반의 게임
– http://www.html5games.net/
– 대 히트작 앵그리버드는 대표적인 HTML5기반게임으로
모바일 디바이스, 크롬 브라우저 등으로 다양하게 이식되어 제공
– HTML5 기반의 Web/Hybrid App게임들은 아직은 Native Web에 비해
간단한 조작성과 게임성을 지님
98
Chrome Web Store
 Chrome Web Store
– Chrome 브라우저상에서 이용 가능한 Web App 장터
• 크롬 OS와 같은 웹 기반 클라우드 OS가 활성화되면 높은 성장 가능
– Evernote, Quick note, Picasa, Angry bird, Plants vs Zombie 등의 히트
앱 등록
– HTML5 기반의 Web App 이 많이 업로드되고 있음
• 하지만, 아직은 Flash 기반의 Web App이 더 많은 것으로 파악됨
99
Prospects for HTML5
 대다수 전문가들은 HTML5가 현존하는 플러그(Flash등)인 기반 프로
그램 구동 및 모바일 Native App을 대체할 것으로 전망함
 하지만, 그 시기가 문제…. 본격 확산 시기에 대해서는 아무도 확답을
제시하지 못하고 있음
 만약 현 시점(2012년 3월)에서 상용 제품 수준의 App을 개발하고자
한다면… HTML5은… 아직은 다소 시기상조!
– 그럼 2012년 7월은? 2012년 하반기는?...
– 간과하지 말아야 되는 사항…
• Flash나 iOS, Android 등 Native App 플랫폼이 보편적으로 이미 확산되어서
소비자들이 큰 불편을 느끼지 못하고 있음
– Prototype나 비상용 제품 개발은 HTML5 개발 방향이 옳다고 생각됨
100
Prospects for HTML5
 그럼 언제?
101
Prospects for HTML5
 HTML5를 견인하는 계기들…
102
References
 Hickson, I. (Eds.). (2011). HTML Living Standard Retrieved from
http://www.whatwg.org/specs/web-apps/current-work/multipage/
 HTML5 Tag Reference
– http://www.w3schools.com/html5/html5_reference.asp
103
References
 HTML5:A vocabulary and associated APIs for HTML and XHTML
– http://www.w3.org/TR/2010/WD-html5-20100624/
– 웹 브라우저 개발자를 위한 Spec.
 HTML5 differences from HTML4
– http://www.w3.org/TR/2010/WD-html5-diff-20100624/
– http://channy.creation.net/project/html5/html4-differences/
– HTML5 입문자가 읽기에 적당
• HTML5:The Markup Language
– http://www.w3.org/TR/2010/WD-html-markup-20100624/
– 웹 개발자를 위한 Spec.
104
References
• http://html5test.com
– 사용중인 브라우저의 HTML5 지원 현황 파악 가능
– 크롬-219, IE8-27, Firefox-139, Safari-165, Opera-129(만점:300)
• http://html5demos.com
– HTML5 Demos and Examples
• http://www.canvasdemos.com
– HTML5 Canvas Demos
• http://www.html5rocks.com/
–
구글이 만든 HTML5 guides
105
References
• http://html5gallery.com/
– HTML5 기반의 웹 사이트 모음
• http://html5doctor.com/
– HTML5 마크업 관련 블로그 및 Q&A
• http://hacks.mozilla.or.kr/
– 한국 모질라 Hacks
• http://webstandards.or.kr
– 국내 최초 웹 표준 커뮤니티
– 실전 HTML5 가이드 제공.
• http://channy.creation.net/
– 윤석찬님 블로그 (한국 모질라 커뮤니티 리더)
106