웹프로그래밍소개 HTML5 새로운기능 류관희 충북대학교
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> <html> <body> <header>..</header> <section class= content >.. </section> <footer>..</footer> </body> </html> <div id= header > <div id= nav > <div id= article > <header> <nav> <article> <div id= aside > <aside> <div id= footer > 2 <footer>
New Elements in HTML5 Semantic Tags Well-defined Document Structure Header Navigation Section Article Footer Aside Article Footer Article Footer Footer 3
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 4
Semantic Tags New Elements in HTML5 5
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 6
Tag <section> <article> <aside> <command> <details> <summary> <figure> <figcaption> New Elements in HTML5 Description For a section in a document. Such as chapters, headers, footers, or any other sections of the document 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) For content aside from the content it is placed in. The aside content should be related to the surrounding content A button, or a radiobutton, or a checkbox For describing details about a document, or parts of a document A caption, or summary, inside the details element self-contained content like images, diagrams, photos, code, etc. The caption of the figure section 7
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> 8
New Elements in HTML5 Tag <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <time> <wbr> <nobr> Description 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 For an introduction of a document or section, could include navigation 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 For text that should be highlighted For a measurement, used only if the maximum and minimum values are known For a section of navigation The state of a work in progress For defining a time or a date, or both Word break. For defining a line-break opportunity. No line Break. 9
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> 10
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; } 11
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> 12
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> 13
New Elements in HTML5 Using Progress ( 진행상태의사용 ) <progress>step 3 of 6</progress> <progress>50% Complete</progress> <progress value="0.5"> Half way! </progress> 14
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> 15
New Advanced Elements in HTML5 media Tag <audio> <video> <source> canvas Tag <canvas> Description For multimedia content, sounds, music or other audi o streams For video content, such as a movie clip or other vide o streams For media resources for media elements, defined ins ide video or audio elements Description For making graphics with a script 16
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> 17
Supported Audio Format HTML5 Audio 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> 18
Supported Video Format HTML5 Video 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> 19
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> 20
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> 21
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> 22
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> 23
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> 24
Canvas HTML5 Canvas Example 1. 게임 http://www.gamesforthebrain.com/game/oooze/ Example 2. 페인터 http://bomomo.com/ 25
Canvas HTML5 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/ 26
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 27
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> 28
form New From Elements in HTML5 Tag <datalist> <keygen> <output> Description A list of options for input values (like keyword suggestion/autocomplete) Generate keys to authenticate users For different types of output, such as output written by a script 29
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> 30
New From Attribute in HTML5 New Attributes in Form 31
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> 32
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> 33
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> 34
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> 35
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> 36
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> 37
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> 38
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> 39
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> 40
Global Attributes draggable accesskey HTML5 Global Attributes <!DOCTYPE html> <html> <body> <p draggable="true">this is a paragraph. It is draggable. Try to drag this element.</p> </body> </html> <!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> 41
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> 42
Global Attributes title HTML5 Global Attributes <!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> 43
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. 44
Example 1 HTML5 LocalStorage <!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> 45
Example 2 HTML5 LocalStorage <!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> 46
More Functions in HTML5 What s New in HTML5? 일반적으로 HTML5 라불리는범위 Geolocation HTML5 Web Storage Canvas 오프라인 Web Workers 커뮤니케이션 드래그 & 드롭 Web Sockets Data Cache API Video&Audio Web SQL Database File API Server-Sent Events Indexed Database API 47
HTML5 Features 더풍부한웹애플리케이션 동영상이나음성재생 (video&audio 요소 ) 자유로운 2D/3D 그래픽 (canvas 요소 ) 오프라인에서도작동하는애플리케이션 도메인간의통신구현 Client측데이터저장 (Web Storage, Web SQL DB 등 ) 백그라운드처리수행 (Web Workers) 서버로부터의데이터푸시 & 쌍방향통신 (Web Sockets 등 ) 로컬파일의내용을읽어들임 (File API) 의미성있는마크업 Symantic: 사람뿐만아니라기계가이해할수있는정보 문서구조나문서안의데이터의의미를나타내는사양포함 48
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 의등장에기여 49
모바일어플리케이션에대한구분 50
모바일어플리케이션에대한구분 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 51
모바일어플리케이션에대한구분 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 의등장주목 52
Native App. vs. Web App. vs. Hybrid App. 개발자관점의재활용측면 Native App 디바이스 /OS 별로 디자인 + 프로그램코드 을새롭게개발 서버의통신모듈및데이터정도만재활용가능 Web App 여러스마트폰플랫폼에서 디자인 + 프로그램코드 를모두재활용 서버의통신모듈및데이터도당연히재활용 단점 : Device hardware 이용제한 Hybrid App Web App 과거의비슷한재활용성 53
Native App. vs. Web App. vs. Hybrid App. 이용률 Native App 다운로드후다음날실행비율은 30% 한달후에도활발히이용하는사용자 5% 미만 사용비율 : 게임, 정보성어플 Web App App 구입및설치에대한비용無 배포이슈에의자유로움 Hybrid App 54
Native App. vs. Web App. vs. Hybrid App. 사용자인터페이스 ( 이벤트처리 ) Native App App 직접컨트롤 ( 멀티터치, swipe ) Web App HTML 링크를클릭하는것과동일 Hybrid App 기본적으로는 HTML 링크클릭과동일 필요하면 App 직접컨트롤기능구현가능 55
Native App. vs. Web App. vs. Hybrid App. 수정및배포 Native App/Hybrid App 프로그램수정, 스토어업로드, 이용자업데이트하는일련을과정을거쳐야함으로수정에따른배포지연 Web App 서버프로그램을업데이트하면바로반영되므로수정및배포가용이 56
Native App. vs. Web App. vs. Hybrid App. 향후전망 Web App 은 OS 에비종속적인높은호환성과효율적인플랫폼 인터넷관련 Device 에브라우저는기본적으로탑재 Web 이 Native App 의대부분기능을흡수하여 OS 로서 Brower 플랫폼으로진화중 HTML5, Device API, Web GL 여러가지제약은시간이지나면해결될것임 그러나, 그시간이얼마나걸릴지 57
Is Really Web App + HTML5 Winner? 문제 2. 화려한그래픽이요구되는 App 에대해서 Flash 보다뒤쳐지는그래픽처리능력과복잡한코드구성 Flash: 1998 년시장에공개, 발전을거듭하여시장에뿌리를내린상황 HTML5: 2004 년에처음등장하여이제막업계에서관심을받음 58
모바일기반포탈앱 모바일기반포탈앱 하이브리드웹기반으로모바일디바이스, 운영체제상관없이동일한화면제공 59
Web/Hybrid App App 기반의게임 Web/Hybrid App App 기반의게임 http://www.html5games.net/ 대히트작앵그리버드는대표적인 HTML5 기반게임으로모바일디바이스, 크롬브라우저등으로다양하게이식되어제공 HTML5 기반의 Web/Hybrid App 게임들은아직은 Native Web 에비해간단한조작성과게임성을지님 60
HTML5 를견인하는계기들 Prospects for HTML5 61
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 62
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. 63
http://html5test.com References 사용중인브라우저의 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 64
http://html5gallery.com/ HTML5 기반의웹사이트모음 References http://html5doctor.com/ HTML5 마크업관련블로그및 Q&A http://hacks.mozilla.or.kr/ 한국모질라 Hacks http://webstandards.or.kr 국내최초웹표준커뮤니티 실전 HTML5 가이드제공. http://channy.creation.net/ 윤석찬님블로그 ( 한국모질라커뮤니티리더 ) 65