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
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:Milestone/> 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"/> Input tel url email datetime date month week number range search <HTML:Form/> 5
Output <output onforminput="value=parseint(input1.value)*parseint(input2.value)">1</output> List <input type="search" list="items"/> <datalist id="items"> <option value="samsung SDS" /> <option value="lg CNS" /> <option value="sk C&C" /> </datalist> 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
Validation&Attribute required pattern readonly min max step autocomplete placeholder autofocus form list <HTML:Form/> 7
Audio&Video <audio id="bgm" src="./music.mp3" controls /> <audio controls> <source src="./music.aac" /> <source src="./music.ogg" /> </audio> document.getelementbyid("bgm").play(); Codec IE FireFox Chrome Safari Opera MP3 O X O O X A U AAC O X O O X D Ogg X O O X O I Wav X O 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
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
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
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
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 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
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]); ); DB param id version name size callback WebWorkers 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 onmessage = function(event) { for (var i=parseint(event.data); i<10000000; i++) { if (i%10 == 0) { postmessage(i); 14
Drag&Drop <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 function dragdrop(event) { alert(event.datatransfer.getdata("fromtext")); var text = event.datatransfer.getdata("text/plain"); var files = event.datatransfer.files; <API:Drag&Drop/> 15
Server-Sent Event var source = new EventSource("/SampleEvent.do"); Service request Event Source Controller event-stream source.onmessage=function(event) { alert(event.data); View retry: 2000 data: Sample Event 32 event : servertime data : 14:10:11 Event Handler <EGOV:ServerSentEvent/> 16
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> <EGOV:Compatability/> 17
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 <EGOV:Polyfills/> 18
Book Web <References/> 19