Hyper Text 1965 Nelson Hyper Card 1987 Apple

Hyper. Text 1965, Nelson Hyper. Card 1987 Apple 3

World Wide Web 1990, CERN – Tim Berners-Lee “Information Management: A Proposal” Tim Berners-Lee,

Mosaic Web Browser 1993, Marc Andreessen & Eric Bina – NCSA, Univ. of Illinois

WWW Consortium 1994, http: //www. w 3 c. org 6

Web Browsers 1 st Stage • Netscape – 1994~1997 1. 0~4. 8 – 1998

Web Browsers 2 nd Stage 1996 Opera, Norway 2002 Mozilla (2007 Netscape 9. 0)

HTML versions 1991, HTML 1. 0 (Berners-Lee) 1995, HTML 2. 0 (IETF) 1997, HTML

Why “new HTML” ? – – Fail of XHTML 2 Developer Productivity Browser Compatibility

WHATWG WHAT Working Group – Web Hypertext Application Technology – Open Community, 2004 –

New Activities on W 3 C, 2005 Web Application Format WG • Web Form

Standard & Web Development HTML 5 Standard Service Model

HTML Events Source: http: //channy. creation. net 19

W 3 C Standards (in draft) http: //www. w 3. org/TR/html 5/ 20

HTML (Hyper. Text Markup Language) <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML 5</title> </head>

CSS (Cascading Style Sheet) <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML 5</title> <link rel="stylesheet"

Javascript <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML 5</title> <link rel="stylesheet" href="html 5. css">

HTML + CSS + Javascript (+ Ajax) Document Structure + Contents HTML A fast

A Rough History of Web Standards 91 -92 93 -94 HTML 1 HTML 2

What is HTML 5? HTML 5 will be the new standard for HTML, XHTML,

HTML 5 Development Rules The following rules for HTML 5 were established: – –

HTML 5 퀵 스타트 [HTML 문법 기술 방법] - HTML 문법 상세 몇 가지.

HTML 5 퀵 스타트 [HTML 문법 기술 방법] - HTML을 이용한 마크업 예 <!DOCTYPE

Block element vs. Inline element All HTML elements are naturally displayed in one of

Block Element vs. Inline Element Block Elements – <div> • Your general-purpose box –

Block Element vs. Inline Elements – <span> • Your all-purpose inline element – <a>

Block Element vs. Inline Elements – <img /> • Image • alt attribute should

New Elements in HTML 5 Semantic Tags (시맨틱 : 사람뿐만 아니라 기계가 이해할 수

New Elements in HTML 5 Semantic Tags – Well-defined Document Structure Header Navigation Section

New Elements in HTML 5 Semantic Tags – Various content-specific tags (which browsers support

New Elements in HTML 5 Semantic Tags - Primary layout engines – Webkit (Apple

New Elements in HTML 5 Tag Description <section> For a section in a document.

New Elements in HTML 5 <section> <h 1>WWF</h 1> <p>The World Wildlife Foundation was

New Elements in HTML 5 Tag Description <footer> For a footer of a document

New Elements in HTML 5 <header> <h 1>Welcome to my homepage</h 1> <p>My name

New Elements in HTML 5 Example <!DOCTYPE html> <html lang="en"> <head> <title>Favorite Sites </title>

New Elements in HTML 5 footer { font-family: Georgia, "Times New Roman", serif; text-align:

New Elements in HTML 5 • Using Meter (계량의 사용) – <meter>60%</meter> – <meter>3/5</meter>

New Elements in HTML 5 • Using Progress (진행상태의 사용) – <progress>Step 3 of

New Advanced Elements in HTML 5 media Tag Description <audio> For multimedia content, sounds,

HTML 5 Audio & Video Audio/Video – Play audio/video in the browser – Do

HTML 5 Audio Supported Audio Format Example <!DOCTYPE html> <body> <audio controls="controls"> <source src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="song.

HTML 5 Video Supported Video Format Example <!DOCTYPE html> <body> <video width="320" height="240" controls="controls">

HTML 5 Canvas What is HTML 5 Canvas § The HTML 5 canvas element

HTML 5 Canvas – Dynamic and scriptable rendering of 2 D/3 D images –

HTML 5 Canvas Example 1 <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var

HTML 5 Canvas Example 2 <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var

HTML 5 Canvas Example 3 <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var

HTML 5 Canvas – Example 1. 게임 http: //www. gamesforthebrain. com/game/oooze/ – Example 2.

HTML 5 Canvas – Example 3. 사진 Slideshow (Dynamic!) http: //www. lo 2 k.

New Input Type Elements in HTML 5 New Input Type Tag Description tel The

New Input Type Elements in HTML 5 Example <!DOCTYPE html> <body> <form action="demo_form. jsp"

New From Elements in HTML 5 form Tag Description <datalist> A list of options

New From Elements in HTML 5 Example (works well with Firefox, not chrome) <!DOCTYPE

New From Attribute in HTML 5 New Attributes in Form 66

New From Attribute in HTML 5 Example - autocomplete <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example - autofocus <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example - pattern <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example - placeholder <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example - required <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example - form <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example – formaction, formmethod, formnovalidate <!DOCTYPE html> <body>

New From Attribute in HTML 5 Example – multiple <!DOCTYPE html> <body> <form action="demo_form.

New From Attribute in HTML 5 Example – novalidate <!DOCTYPE html> <body> <form action="demo_form.

HTML 5 Global Attributes § draggable <!DOCTYPE html> <body> <p draggable="true">This is a paragraph.

HTML 5 Global Attributes § contenteditable / spellcheck <!DOCTYPE html> <body> <p contenteditable="true" spellcheck="true">This

HTML 5 Global Attributes § title <!DOCTYPE html> <body> <p><abbr title="World Health Organization">WHO</abbr> was

HTML 5 Local. Storage Storing Data on the Client § HTML 5 uses Java.

HTML 5 Local. Storage Example 1 <!DOCTYPE html> <body> <script type="text/javascript"> if (local. Storage.

HTML 5 Local. Storage Example 2 <!DOCTYPE html> <body> <script type="text/javascript"> if (session. Storage.

What’s New in HTML 5? More Functions in HTML 5 일반적으로 HTML 5라 불리는

모바일 어플리케이션에 대한 구분 Native App. – Written in a programming language for a

모바일 어플리케이션에 대한 구분 Web App. – Web-based applications written with traditional web programming

Is Really “Web App + HTML 5” Winner? 문제점 1. 모바일 브라우저 파편화 –

References Hickson, I. (Eds. ). (2011). HTML Living Standard Retrieved from http: //www. whatwg.

References § HTML 5: A vocabulary and associated APIs for HTML and XHTML –

References • http: //html 5 test. com – 사용중인 브라우저의 HTML 5 지원 현황

Slides: 106

Download presentation

Hyper. Text 1965, Nelson Hyper. Card 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. w 3 c. org 6

Web Browsers 1 st Stage • Netscape – 1994~1997 1. 0~4. 8 – 1998 오픈소스 발표 v 4. 0 – 2000 Mozilla 기반 – 2007 AOL v 7. 0 • Microsoft – 1995 v 4. 0 – 1999 – 2008 v 8. 0, – 2010 v 1. 0 ~ 1997 v 5. 0, 2001 v 6. 0 v 7. 0, 2009 v 9. 0 • 치열한 경쟁 – 비표준 태그 크로스 브라우징 – 반독점금지법, 2000 미 대법 원 7

Web Browsers 2 nd Stage 1996 Opera, Norway 2002 Mozilla (2007 Netscape 9. 0) 2004 Firefox (Phoenix, Firebird) 2003 Safari 2008 Chrome 8

Development of Web 9

HTML 5 History HTML

HTML versions 1991, HTML 1. 0 (Berners-Lee) 1995, HTML 2. 0 (IETF) 1997, HTML 3. 2 (W 3 C) 1997, HTML 4. 0 (W 3 C) 1999, HTML 4. 01 (W 3 C) 2000, XHTML 1. 0 (W 3 C) ? ? , XHTML 2. 0 • Xform, Xframe, DOM대신 XML event, RDFa, 일부요소 추가 11

Why “new HTML” ? – – Fail of XHTML 2 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 – W 3 C는 유료 회원에게만 개방 Developing – Web Form 2. 0, Web Application 1. 0 15

New Activities on W 3 C, 2005 Web Application Format WG • Web Form 2. 0, Widget, etc. Web API WG • XMLHttp. Request, DOM 3, File Upload, etc. HTML WG created, 2007 • 600+ invited experts, open mailing-list 16

Standard & Web Development HTML 5 Standard Service Model

HTML Events Source: http: //channy. creation. net 19

W 3 C Standards (in draft) http: //www. w 3. org/TR/html 5/ 20

HTML (Hyper. Text Markup Language) <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML 5</title> </head> <body> <header> <h 4>HTML 5 Introduction</h 4> </header> <div id="container"> <nav> <h 3>Nav</h 3> <a href="http: //www. google. com">Google</a> <a href="http: //www. facebook. com">Facebook</a> </nav> <section> <article> <header> <h 1>Article Header</h 1> </header> <p>We have. . . </p> <p>For example. . . </p> <footer> <h 2>Article Footer</h 2> </footer> </article> </section> <footer> <h 2>Footer</h 2> </footer> </div> </body> </html> 21

CSS (Cascading Style Sheet) <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML 5</title> <link rel="stylesheet" href="html 5. css"> </head> <body> … body { background-color: #6698 FF; /* sky blue */ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 0 px auto; max-width: 900 px; border: solid; border-color: #FFFFFF; } header { background-color: #F 88017; /* dark orange */ display: block; color: #FFFFFF; /* white */ text-align: center; } header h 2 { color: #B 1 FB 17; /* green yellow */ } nav { display: block; width: 25%; float: left; } … 22

Javascript <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML 5</title> <link rel="stylesheet" href="html 5. css"> <script type="text/javascript"> function m. Handler() { document. get. Element. By. Id("para 1"). inner. HTML = "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 1980 s that lingers to this day. "; } </script> </head> <body> … <section> … <p id="para 1" onmouseover="m. Handler()">We have. . . </p> <p>For example. . . </p> … <footer> <h 2>Footer</h 2> </footer> </div> </body> </html> 23

HTML + CSS + Javascript (+ Ajax) Document Structure + Contents HTML A fast and concise Java. Script Library j. Query 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 CSS 1 CSS 2 Java. Script 1. 0/1. 1 Java. Script 1. 2, DOM 99 -00 01 -02 03 -04 05 -06 07 -08 XHTML 1. 0 DOM 2 W 3 C 11 -12 13 -14 HTML 5 Web 2. 0 Java. Script 1. 3, 09 -10 Java. Script 1. 5 CSS 3 Ajax, Java. Script 1. 6 Java. Script 1. 7 Java. Scrip t 1. 8 DOM 3 WHATWG 1999년 HTML 4. 01권고, 이후 XHTML에 주력 2004년 워크숍에서 HTML 새로운 표준화를 바라는 브라우저 제작사의 제안을 배척 (XHTML 2에 주력) 2004년 애플, 모질라, 오페라 등 브라우저 제작사 들 자체 표준화 단체 결성(WHATWG) 2007년 HTML 5 제정에 협력할 것을 표명 2008년 HTML 5가 W 3 C의 초안으로 공개 2009 -10 HTML 5 사양 최종 심사 청구 2009 -07 XHTML 2 WG 활동을 중지하고 HTML 5 표준화 작업 진행 사양의 업데이트를 진행 중 25

What is HTML 5? HTML 5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML 5 is still a work in progress. However, most modern browsers have much HTML 5 support. HTML 5 is a cooperation between the World Wide Web Consortium (W 3 C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, and W 3 C was working with XHTML 2. 0. In 2006, they decided to cooperate and create a new version of HTML. 26

HTML 5 Development Rules The following rules for HTML 5 were established: – – New features should be based on HTML, CSS, DOM, and Java. Script Reduce the need for external plugins (like Flash) More markup to replace scripting HTML 5 should be device independent Browser Support – HTML 5 is not yet an official standard, and no browsers have full HTML 5 support. – But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML 5 features to their latest versions. 27

HTML 5 퀵 스타트 [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

HTML 5 퀵 스타트 [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

HTML 5 퀵 스타트 [HTML 문법 기술 방법] - HTML을 이용한 마크업 예 <!DOCTYPE html> <html lang="kr"> <head> <title>문서의 제목입니다. </title> <meta charset="UTF-8"> <style type="text/css">h 1 {font-size: 2 em; }</style> </head> <body> <h 1>HTML을 이용한 마크업 예제</h 1> <p>단락 1</p> <input id="age" type="number"> </body> </html> 31

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 – <h 1>. . . <h 6> • 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 Elements – <span> • Your all-purpose inline element – <a> • Anchor, used for links (and also to mark specific targets on a page for direct linking) • HTML 5 부터 다른 블록요소를 감쌀 수 있게 되었음. – <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 Elements – <img /> • Image • alt attribute should be specified. <img src="p. gif" /> <img src="p. gif" alt="p" /> – • 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 HTML 5 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 HTML 5 Semantic Tags – Well-defined Document Structure Header Navigation Section Article Footer Article Aside Footer Article Footer 38

New Elements in HTML 5 Semantic Tags – Various content-specific tags (which browsers support with various appearance) – Common appearance can be styled with CSS <!DOCTYPE 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 HTML 5 Semantic Tags 40

New Elements in HTML 5 Semantic Tags - Primary layout engines – Webkit (Apple Safari/i. OS, Chrome/Android, Symbian, Blackberry, Amazon Kindle) • Open-source engine • Supports the most common features of HTML 5 & a large amount of CSS 3 • Desktop Chrome supports 33% of HTML 5 – Gec. Ko (Firefox, Netscape) – Open-source engine – Desktop Firefox supports 50% of HTML 5 – Trident (Internet Explorer/IE Mobile) • Desktop IE 9 supports 25% of HTML 5 • Windows 7 Mobile - New! Improved! But is it selling? – Presto (Opera, Opera Mini) • Leading HTML 5 Browsers 41

New Elements in HTML 5 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 HTML 5 <section> <h 1>WWF</h 1> <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> 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 HTML 5 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 <h 1> to <h 6>, 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 HTML 5 <header> <h 1>Welcome to my homepage</h 1> <p>My name is Donald Duck</p> </header> <footer>This document was written in 2009. </footer> <hgroup> <h 1>Welcome to my WWF</h 1> <h 2>For a living planet</h 2> </hgroup> <p>Do not forget to buy <mark>milk</mark> today. </p> <meter value="2" min="0" max="10">2 out of 10</meter> <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 HTML 5 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: 30 px; display: block; } article { text-align: left; font-size: 20 px; margin: 20 px; display: block; font-family: "Century", "Tahoma", sans-serif; } 46

New Elements in HTML 5 footer { font-family: Georgia, "Times New Roman", serif; text-align: center; font-size: 15 px; 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 html 5 webpage</footer> <body> </html> 47

New Elements in HTML 5 • 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 HTML 5 • Using Progress (진행상태의 사용) – <progress>Step 3 of 6</progress> – <progress>50% Complete</progress> – <progress value="0. 5"> Half way! </progress> 49

New Advanced Elements in HTML 5 media Tag Description <audio> For multimedia content, sounds, music or other audio streams <video> For video content, such as a movie clip or other video streams <source> For media resources for media elements, defined inside video or audio elements canvas Tag Description <canvas> For making graphics with a script 51

HTML 5 Audio & Video Audio/Video – Play audio/video in the browser – Do not need a plugin – Accessible through Java. Script <!DOCTYPE html> <body> <video width="320" height="240" controls="controls"> <source src="movie. mp 4" type="video/mp 4" /> <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. mp 3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html> 52

HTML 5 Audio Supported Audio Format Example <!DOCTYPE html> <body> <audio controls="controls"> <source src="song. ogg" type="audio/ogg" /> <source src="song. mp 3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html> 53

HTML 5 Video Supported Video Format Example <!DOCTYPE html> <body> <video width="320" height="240" controls="controls"> <source src="movie. mp 4" type="video/mp 4" /> <source src="movie. ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </body> </html> 54

HTML 5 Canvas What is HTML 5 Canvas § The HTML 5 canvas element uses Java. Script 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="my. Canvas" width="200" height="100"></canvas> 55

HTML 5 Canvas – Dynamic and scriptable rendering of 2 D/3 D images – Uses Java. Script to draw <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var c=document. get. Element. By. Id("my. Canvas"); var cxt=c. get. Context("2 d"); cxt. move. To(10, 10); cxt. line. To(150, 50); cxt. line. To(10, 50); cxt. stroke(); } </script> </head> <body onload="draw(); "> <canvas id="my. Canvas" width="200" height="100" style="border: 1 px solid"> Your browser does not support the canvas element. </canvas> </body> </html> 56

HTML 5 Canvas Example 1 <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var c=document. get. Element. By. Id("my. Canvas"); var cxt=c. get. Context("2 d"); cxt. fill. Style="#FF 0000"; cxt. fill. Rect(0, 0, 150, 75); } </script> </head> <body onload="draw(); "> <canvas id="my. Canvas" width="200" height="100" style="border: 1 px solid #c 3 c 3 c 3; "> Your browser does not support the canvas element. </canvas> </body> </html> 57

HTML 5 Canvas Example 2 <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var c=document. get. Element. By. Id("my. Canvas"); var cxt=c. get. Context("2 d"); cxt. move. To(10, 10); cxt. line. To(150, 50); cxt. line. To(10, 50); cxt. stroke(); } </script> </head> <body onload="draw(); "> <canvas id="my. Canvas" width="200" height="100" style="border: 1 px solid #c 3 c 3 c 3; "> Your browser does not support the canvas element. </canvas> </body> </html> 58

HTML 5 Canvas Example 3 <!DOCTYPE html> <head> <script type="text/javascript"> function draw() { var c=document. get. Element. By. Id("my. Canvas"); var cxt=c. get. Context("2 d"); var img=new Image(); img. src="img_flwr. png"; cxt. draw. Image(img, 0, 0); } </script> </head> <body onload="draw(); "> <canvas id="my. Canvas" width="200" height="100" style="border: 1 px solid #c 3 c 3 c 3; "> Your browser does not support the canvas element. </canvas> </body> </html> 59

HTML 5 Canvas – Example 1. 게임 http: //www. gamesforthebrain. com/game/oooze/ – Example 2. 페인터 http: //bomomo. com/ 60

HTML 5 Canvas – Example 3. 사진 Slideshow (Dynamic!) http: //www. lo 2 k. net/experiments/flickr/28791827@N 00 – Example 4. Photo effect http: //www. p 01. org/releases/Tilt-shift_photo_effect_in_Canvas/ 61

New Input Type Elements in HTML 5 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 #FF 8800 62

New Input Type Elements in HTML 5 Example <!DOCTYPE html> <body> <form action="demo_form. jsp" method="get"> Homepage: <input type="url" name="user_url" /> E-mail: <input type="email" name="user_email" /> Number 1: <input type="number" name="points" min="1" max="10" /> Number 2: <input type="range" name="points" min="1" max="10" /> Date: <input type="date" name="user_date" /> Color: <input type="color" name="user_color" /> <input type="submit" /> </form> </body> </html> 63

New From Elements in HTML 5 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 HTML 5 Example (works well with Firefox, not chrome) <!DOCTYPE html> <body> <form action="demo_form. asp" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W 3 Schools" value="http: //www. w 3 schools. 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 HTML 5 New Attributes in Form 66

New From Attribute in HTML 5 Example - autocomplete <!DOCTYPE html> <body> <form action="demo_form. jsp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /> Last name: <input type="text" name="lname" /> E-mail: <input type="email" name="email" autocomplete="off" /> <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 HTML 5 Example - autofocus <!DOCTYPE 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 HTML 5 Example - pattern <!DOCTYPE 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 HTML 5 Example - placeholder <!DOCTYPE html> <body> <form action="demo_form. asp" method="get"> <input type="search" name="user_search" placeholder="Search W 3 Schools" /> <input type="submit" /> </form> </body> </html> 70

New From Attribute in HTML 5 Example - required <!DOCTYPE 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 HTML 5 Example - form <!DOCTYPE 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 HTML 5 Example – formaction, formmethod, formnovalidate <!DOCTYPE html> <body> <form action="demo_form. jsp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /> <input type="submit" value="Submit" /> <input type="submit" formaction="demo_admin. asp" value="Submit as admin" /><br /> <input type="submit" formmethod="post" value="Submit as admin" /> <input type="submit" formnovalidate="true" value="Submit without validation" /><br /> </form> </body> </html> 73

New From Attribute in HTML 5 Example – multiple <!DOCTYPE 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 HTML 5 Example – novalidate <!DOCTYPE html> <body> <form action="demo_form. jsp" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> </body> </html> 75

HTML 5 Global Attributes § draggable <!DOCTYPE html> <body> <p draggable="true">This is a paragraph. It is draggable. Try to drag this element. </p> </body> </html> § accesskey <!DOCTYPE html> <body> <a href="http: //www. w 3 schools. com/" accesskey="w">W 3 Schools</a> <a href="http: //www. google. com/" accesskey="g">Google</a> <p><b>Note: </b> Use Alt + <i>access. Key</i> to access the element with the specified access key. </p> </body> </html> 76

HTML 5 Global Attributes § contenteditable / spellcheck <!DOCTYPE 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> <body> <a href="http: //www. w 3 schools. com/" tabindex="2">W 3 Schools</a> <a href="http: //www. google. com/" tabindex="1">Google</a> <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

HTML 5 Global Attributes § title <!DOCTYPE html> <body> <p><abbr title="World Health Organization">WHO</abbr> was founded in 1948. </p> <p title="Free Web tutorials">W 3 Schools. com</p> </body> </html> 78

HTML 5 Local. Storage Storing Data on the Client § HTML 5 uses Java. Script to store and access the data. § HTML 5 offers two new objects for storing data on the client: Ø window. local. Storage - stores data with no time limit Ø window. session. Storage - 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 HTML 5, 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

HTML 5 Local. Storage Example 1 <!DOCTYPE html> <body> <script type="text/javascript"> if (local. Storage. pagecount){ local. Storage. pagecount=Number(local. Storage. pagecount) +1; } else { local. Storage. pagecount=1; } document. write("Visits: " + local. Storage. 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

HTML 5 Local. Storage Example 2 <!DOCTYPE html> <body> <script type="text/javascript"> if (session. Storage. pagecount){ session. Storage. pagecount=Number(local. Storage. pagecount) +1; } else { session. Storage. pagecount=1; } document. write("Visits: " + session. Storage. 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 HTML 5? More Functions in HTML 5 일반적으로 HTML 5라 불리는 범위 Geolocation Web Workers Canvas 오프라인 커뮤니케이션 드래그&드롭 Video&Audio Data Cache API File API Web Storage HTML 5 Server-Sent Events Indexed Database API Web Sockets Web SQL Database ……… 82

모바일 어플리케이션에 대한 구분 Native App. – Written in a programming language for a targeted operating system • Apple i. OS Devices: i. OS 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” • i. Tunes App Store, Android Marketplace – i. OS 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

Is Really “Web App + HTML 5” Winner? 문제점 1. 모바일 브라우저 파편화 – Layout Engine Comparison – Mobile Browsers • http: //en. wikipedia. org/wiki/Comparison_of_layout_engines_%28 HTML 5%29 94

Prospects for HTML 5 그럼 언제? 101

Prospects for HTML 5를 견인하는 계기들… 102

References Hickson, I. (Eds. ). (2011). HTML Living Standard Retrieved from http: //www. whatwg. org/specs/web-apps/current-work/multipage/ HTML 5 Tag Reference – http: //www. w 3 schools. com/html 5_reference. asp 103

References § HTML 5: A vocabulary and associated APIs for HTML and XHTML – http: //www. w 3. org/TR/2010/WD-html 5 -20100624/ – 웹 브라우저 개발자를 위한 Spec. § HTML 5 differences from HTML 4 – http: //www. w 3. org/TR/2010/WD-html 5 -diff-20100624/ – http: //channy. creation. net/project/html 5/html 4 -differences/ – HTML 5 입문자가 읽기에 적당 • HTML 5: The Markup Language – http: //www. w 3. org/TR/2010/WD-html-markup-20100624/ – 웹 개발자를 위한 Spec. 104

References • http: //html 5 test. com – 사용중인 브라우저의 HTML 5 지원 현황 파악 가능 – 크롬-219, IE 8 -27, Firefox-139, Safari-165, Opera-129(만점: 300) • http: //html 5 demos. com – HTML 5 Demos and Examples • http: //www. canvasdemos. com – HTML 5 Canvas Demos • http: //www. html 5 rocks. com/ – 구글이 만든 HTML 5 guides 105