1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H

Size: px

Start display at page:

Download "1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H"

주랑 비
5 years ago
Views:

1 Open Community Technical Developing Web Application with HTML History&Milestone of HTML5 HTML5 MarkUp CSS3 JavaScript API Compatibility online handout tinyurl.com/html5d

2 1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference HTML2 Specification Released W3C Established Netscape Navigator 1.0 Released 1995 Internet Explorer 1.0 Released HTML2 Recommendation Released 1997 HTML3.2 Recommendation Released HTML4 Recommendation Released 2000 XHTML 1.0 Specification Released 2008 HTML5 Draft Published <HTML:History/> 1

3 Start Working Working Draft Last Call Candidate Recommendation Proposed Recommendation W3C Recommendation HTML5 Recommendation will be in 2022 We've moved to a more incremental model without macro-level milestones We take the next step, announcing 2014 as the target for Recommendation Right now, You can start using HTML5 stuff Ian Hickson WHATWG Jeff Jaffe Ian Hickson HTML5 HTML We moved to a new development model where the technology is not versioned and instead we just have a living that defines the technology as it evolves <HTML:Milestone/> 2

400 300 200 100 0 327 253 286 296 141 41 IE9 IE8 Chrome 12 Safari 5 Firefox 5 Opera 11 Currnet Browsers 330 220 231 329 293 312 296 Upcoming Browsers 110 0 IE10 Chrome

4 IE9 IE8 Chrome 12 Safari 5 Firefox 5 Opera 11 Currnet Browsers Upcoming Browsers IE10 Chrome 14 Safari 5.1 Firefox 6 Opera Meego 1.2 ios 4.3 ios 5 Android 2.3 Android 3.1 WP7 WP7.5 Mobile Browsers <HTML:Support/> 3

5 <BODY> <NAV> <HEADER> <NAV> <ARTICLE> <ASIDE> <ASIDE> <ADDRESS> <FOOTER> <HTML:Section/> 4

6 Form <form name="frm" autocomplete="off" novalidate="true" accept-charset="utf-8 EUC-KR"> DEMO : Input tel url datetime date month week number range search <HTML:Form/> 5

7 DEMO : Output <output onforminput="value=parseint(input1.value)*parseint(input2.value)">1</output> DEMO : List <input type="search" list="items"/> <datalist id="items"> <option value="samsung SDS" /> <option value="lg CNS" /> <option value="sk C&C" /> </datalist> DEMO : Unit <progress value="872" max="1000">87.2%</progress> <meter min="0" max="10" value="1" low="3" high="8" optimum="5">1</meter> <HTML:Form/> 6

8 DEMO : Validation&Attribute required pattern readonly min max step autocomplete placeholder autofocus form list <HTML:Form/> 7

9 DEMO : Audio&Video <audio id="bgm" src="./music.mp3" controls /> <audio controls> <source src="./music.aac" /> <source src="./music.ogg" /> </audio> document.getelementbyid("bgm").play(); A U D I O Codec IE FireFox Chrome Safari Opera MP3 O X O O X AAC O X O O X Ogg X O O X O Wav X O O O O WebM X X O X O V Mpeg X X X O X I H.264 O X O O X D E Theora X O O X O O WebM X X O X O <HTML:Media/> 8

DEMO : http://tinyurl.com/html5p9 functioin drawstar() { var context = document.getelementbyid("canvas").getcontext('2d'); context.save(); context.fillstyle="#333333"; context.

10 DEMO : functioin drawstar() { var context = document.getelementbyid("canvas").getcontext('2d'); context.save(); context.fillstyle="#333333"; context.fillrect(50,50,200,200); context.strokestyle="#ffff00"; context.fillstyle="#ffff00"; context.beginpath(); context.moveto(150,60); context.lineto(80,230); context.lineto(230,110); context.lineto(80,110); context.lineto(230,230); context.lineto(150,60); context.fill(); context.stroke(); context.restore(); Canvas <canvas width="300" height="300" id="canvas"></canvas> <HTML:Media/> 9

11 DEMO : color : rgb(255,0,0); Alpha color : rgba(255,0,0,0.5); Shadow box-shadow: 10px 10px 10px #000000; -webkit-box-shadow: 10px 10px 10px #000000; -moz-box-shadow: 10px 10px 10px #000000; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.29, rgb(255,0,0)), color-stop(0.65, rgb(240,110,110)), color-stop(0.83, rgb(255,156,156)) ); <HTML:CSS/> 10 Radius Gradient background-image: -moz-linear-gradient( center bottom, rgb(255,0,0) 29%, rgb(240,110,110) 65%, rgb(255,156,156) 83% );

12 Transform transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -moz-transform: rotate(-10deg); transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -moz-trasition:opacity 0.5s ease; Transition <HTML:CSS/> 11

13 DEMO : Media screen and (max-width: 480px) and (orientation:portrait) <link rel="stylesheet" media="print" href="print.css"> screen tty tv projection aspect-ratio color height handheld print braille speech all width monochrome orientation resolution <HTML:CSS/> 12

14 DEMO : Geolocation navigator.geolocation.getcurrentposition(success, error, option); function printlocation(event) { alert("lat : "+event.coords.latitude); alert("lng :"+event.coords.longitude); watchposition(success, error, option); clearwatch(watchid); event object latitude longitude altitude accuracy altitudeaccuracy heading speed timestamp DEMO : localstorage.setitem("key","value"); localstorage.getitem("key"); localstorage.removeitem("key"); addeventlistener("storage",eventhandler); function eventhandler(event) { alert("storage changed"); storage method length key(index) getitem(key) setitem(key, value) removeitem(key) clear() event object key oldvalue newvalue url storagearea WebStorage <API:Geolocation&WebStorage/> 13

15 DEMO : WebSQL database = opendatabase("mydb","1","my database",1024*1024); function createdb() { database.transaction(function(tx) { tx.executesql("create table if not exists Sample(id integer primary key autoincrement, data)"); ); function insertdata(data) { database.transaction(function(tx) { tx.executesql("insert into Sample (data) values (?)",[data]); ); Deprecated API DB param id version name size callback DEMO : function startworker() { worker = new Worker("./worker.js"); worker.onmessage = function(event) { document.getelementbyid("results").innerhtml = event.data; worker.postmessage(document.getelementbyid("results").innerhtml); function stopworker() { if (worker) { worker.terminate(); <API:WebSQL&WebWorkers/> worker.js WebWorkers onmessage = function(event) { for (var i=parseint(event.data); i< ; i++) { if (i%10 == 0) { postmessage(i); 14

16 DEMO : <div class="item" draggable="true" ondragstart="dragstart(event)" ondrop="dragdrop(event)">item 1</div> function dragstart(event) { event.datatransfer.setdata("fromtext",event.target.innerhtml); drag events dragstart dragenter dragover dragleave drop dragend Drag&Drop function dragdrop(event) { alert(event.datatransfer.getdata("fromtext")); var text = event.datatransfer.getdata("text/plain"); var files = event.datatransfer.files; <API:Drag&Drop/> 15

17 Detecting Browser Supports window.localstorage!!document.createelement('canvas').getcontext typeof context.filltext == 'function' document.createelement("input").setattribute("type","url")!== "text" Modernizr.localStorage Modernizr.canvas Modernizr.canvastext Modernizr.inputtypes.url FallBack <progress value="2" max="10">20%</progress> <video src="/movie.mp4" controls> <embed src="/movie.flv" type="application/x-shockwave-flash"> Download Video : <a href="/movie.mp4">movie</a> </embed> </video> <COMP:Browser/> 16

18 HTML5 Shiv address, article, aside, figure, footer, header, hroup, menu, nav, section { display: block; document.createelement("article"); document.createelement("section");... <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> WEBSHIMS Chrome Frame <COMP:Polyfills/> 17

19 Book Web <References/> 18

20 Developing Web Application with HTML5 Presentation&Handout designed by Heo June (Samsung SDS)

1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H

1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H 2011.07.27 Open Community Technical Seminar @NIA HTML5 with egovframework 1 2 3 4 5 History&Milestone of HTML5 HTML5 MarkUp CSS3 JavaScript API EgovFramework PDF http://tinyurl.com/html5d ios http://tinyurl.com/html5p