2011.09.28 Open Community Technical Seminar @NIA Developing Web Application with HTML5 1 2 3 4 5 History&Milestone of HTML5 HTML5 MarkUp CSS3 JavaScript API Compatibility online handout tinyurl.com/html5d
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
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 14 Safari 5.1 Firefox 6 Opera 11 400 300 200 100 0 283 303 217 222 184 140 25 Meego 1.2 ios 4.3 ios 5 Android 2.3 Android 3.1 WP7 WP7.5 Mobile Browsers <HTML:Support/> 3
<BODY> <NAV> <HEADER> <NAV> <ARTICLE> <ASIDE> <ASIDE> <ADDRESS> <FOOTER> <HTML:Section/> 4
Form <form name="frm" autocomplete="off" novalidate="true" accept-charset="utf-8 EUC-KR"> DEMO : http://tinyurl.com/html5p1 Input tel url email datetime date month week number range search <HTML:Form/> 5
DEMO : http://tinyurl.com/html5p2 Output <output onforminput="value=parseint(input1.value)*parseint(input2.value)">1</output> DEMO : http://tinyurl.com/html5p3 List <input type="search" list="items"/> <datalist id="items"> <option value="samsung SDS" /> <option value="lg CNS" /> <option value="sk C&C" /> </datalist> DEMO : http://tinyurl.com/html5p4 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
DEMO : http://tinyurl.com/html5p5 http://tinyurl.com/html5p6 Validation&Attribute required pattern readonly min max step autocomplete placeholder autofocus form list <HTML:Form/> 7
DEMO : http://tinyurl.com/html5p7 http://tinyurl.com/html5p8 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.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
DEMO : http://tinyurl.com/html5p10 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% );
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
DEMO : http://tinyurl.com/html5p11 Media Query @media screen @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
DEMO : http://tinyurl.com/html5p12 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 : http://tinyurl.com/html5p13 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
DEMO : http://tinyurl.com/html5p14 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 : http://tinyurl.com/html5p15 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<10000000; i++) { if (i%10 == 0) { postmessage(i); 14
DEMO : http://tinyurl.com/html5p16 <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
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
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
Book Web <References/> 18
Developing Web Application with HTML5 http://open.egovframe.go.kr Presentation&Handout designed by Heo June (Samsung SDS)