The Current Status of HTML5 Technology and Standard The
Total Page:16
File Type:pdf, Size:1020Kb
The current status of HTML5 technology and standard HTML5 관련 최근 주요업계 동향은 ? 22 HTML5 vs (Flash vs Silverlight) 33 44 <Source: http://www.apple.com/ipad/ready-for-ipad/ > <Source: http://www.apple.com/html5/ > 55 66 <Source: http://mashable.com/2010/05/07/google-reader- adds-html5-support/> 77 <Source: http://www.computerworld.com/s/article/print/9178558/Google_to_use_HTML5_i n_Gmail?taxonomyName=App+Development&taxonomyId=11 > 88 Google to use HTML5 in Gmail Speed is a feature Goal is to get Gmail to load in under a second Offline support HTML5's database standards New features downloadurl: a new data transfer protocol HTML6 ??? Code size 443,000 lines of JavaScript 978,000 lines with comments 99 Google I/O Conference Chrome Web Store an existing web app a serverless app 1010 Google I/O Conference HTML5 Tweetdeck App 11 11 Google I/O Conference WebM Project 12 12 <Source: http://www.html5rocks.com/> 13 13 < Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-c ompatible-microsoft-joining-antiflash-movement/ > 1414 IE9 : HTML5와 GPU <Source: IE9 : HTML5와 GPU 발표자료 (황리건) > 15 15 MS IE9 Preview #3까지 출시 HTML5 비디오/오디오와 SVG 지원 예정 GPU 활용한 랜더링 기능 지원 IE9 공식 버전은 언제 출시 ??? HTML5를 지원하는 모바일 브라우저 로드맵은 ??? 1616 17 17 H.264: 31% ( Q2/09 ) 66% ( Q1/10 ) Flash : 69% ( Q2/09 ) 26% ( Q1/10 ) <Source: Encoding.com via TechCrunch> 1818 HTML5 표준 개요 및 특징은? 19 19 HTML Timeline 20 20 [ Source : Appleinsider ] What is HTML5 ? Structure and Semantic APIs 2121 HTML Design Principles <Source: http://www.w3.org/TR/html-design-principles/ > 22 22 Document Representations (문서 표현) HTML 5 XHTML 5 Document application/xhtml+xml text/html DOM The DOCTYPE <!DOCTYPE html> Just 15 character HTML5 doc !!! Case-insensitive Backwards compatibility How about Google page ? Is it based on the HTML5 ? 2424 HTML5 Basic Structure Common structures Differentiation & Style. How about Semantic? What is the potential of new elements? E.g. Search engine, etc [ HTML4] 2525 [ HTML5] Example 26 26 New Elements in HTML5 New Markup Elements – for better structure New Media Elements – for media content The Canvas Element – for drawing New Form Elements and Input type attribute values 2727 New Markup Elements – for better structure <mark> for indicating text as marked or highlighted <time> for declaring the date and/or time within an HTML document. 2828 New Markup Elements – for better structure <meter> for indicating a scalar measurement within a known range, or a frac tional value <progress> for representing the progress of a task 2929 New Markup Elements – for better structure Tag Description For external content, like text from a news-article, blog, forum, or any ot <article> her content from an external source For content aside from the content it is placed in. The aside content shoul <aside> d 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> For grouping a section of stand-alone content, could be a video <figcaption> The caption of the figure section For a footer of a document or section, could include the name of the auth <footer> or, the date of the document, contact information, or copyright informati on <header> 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 mai <hgroup> n heading of the section, and the others are sub-headings 3030 New Markup Elements – for better structure Tag Description <mark> For text that should be highlighted For a measurement, used only if the maximum and minimum values are k <meter> nown <nav> For a section of navigation <progress> The state of a work in progress <ruby> For ruby annotation (Chinese notes or characters) <rt> For explanation of the ruby annotation <rp> What to show browsers that do not support the ruby element For a section in a document. Such as chapters, headers, footers, or any ot <section> her sections of the document <time> For defining a time or a date, or both 3131 New Media Elements – for media content 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 For media resources for media elements, defined inside video or audio ele <source> ments <embed> For embedded content, such as a plug-in 3232 New Form Elements and Input type attribute values Tag Description <datalist> A list of options for input values <keygen> Generate keys to authenticate users <output> For different types of output, such as output written by a script 3333 New Form Elements and Input type attribute values Type 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 3434 Web Forms Placeholder text An autofocus attribute 3535 Web Forms 36 36 Form Demo HTML5 input UI support Payment form 3737 (Reference) HTML5 elements 28 New Elements are added & 7 elements are changed 3838 HTML5 Features Canvas / SVG Local Storage Video / Audio Web Socket Geolocation Web Workers Offline web apps More features … Web SQL Database 3939 Canvas What is Canvas ? Dynamic and interactive graphics Draw images using 2D drawing API •Lines, curves, shapes, fills, etc. Useful for Graphs, Applications, Games, etc. [http://www.liquidx.net/plotkit/ ] [ http://canvaspaint.org/ ] [http://www.benjoffe.com/code/demos/canvascape/] 4040 Canvas Example <canvas id="myDrawing" width="200" height="200"> </canvas> <h1>Hello World!</h1> var drawingCanvas = document.getElementById('myDrawing'); var context = drawingCanvas.getContext('2d'); // Create the yellow face context.strokeStyle = "#000000"; context.fillStyle = "#FFFF00"; context.beginPath(); context.arc(100,100,50,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); 4141 Canvas Demo Appspot RectangleWave Canvascape - "Experimenting With Textures“ Depth of Field 4242 SVG What is SVG ? Scalable Vector Graphic HTML-like tags for drawing <!DOCTYPE html> <html> <body> <svg width="200" height="200"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> </svg> </body> </html> 4343 SVG Demo Photos SVG Filter 4444 Video / Audio HTML4에서 Flash 동영상 추가 45 45 Video / Audio Embedding multimedia will get easier through the user of tags like <audio> and <video> <Source: Dive into html5> 4646 Video / Audio 마크업 <video> and <audio> as easy as <img> 애트리뷰트 •src, width, height, controls, poster, autoplay, autobuffer, loop 하나 이상의 미디어 타입 처리 4747 Video / Audio 자바스크립트 메소드 •play(), pause() 애트리뷰트 •volume, muted, currentTime 이벤트 •loadeddata, play, pause, timeupdate, ended 4848 Video Demo CanvasVideo Video Showcase (Apple) 4949 Geolocation Geolocation API brings browser-based location to your apps navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } ); 5050 Offline Web Apps Web apps need to work everywhere Database and app cache store user data and app resources locally 5151 Offline Web Apps App Cache List resources that you want to take offline cache.manifest file /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css /stickies.css /js/stickies.js HTML file <body manifest="./cache.manifest"> </body> 5252 Web SQL Database Databases right in the browser Around 5MB per domain Accessible across tabs and windows Based on SQLite Features: Transaction, SQL queries var db = window.openDatabase (" NoteTest ", "1.0“, "Example DB“, 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } ); 5353} Web Storage Key/value pair (hash) storage Hash-based storage of strings (not objects). 10 MB per zone. Two kinds: sessionStorage: •Die when browser closes •Not shared between tabs localStorage •Crash-safe •Shared BW tabs / windows and sessions – but not zones. 5454 Web Sockets TCP for the Web a next-generation bidirectional communication technology for web applications if ("WebSocket" in window) { var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { // Web Socket is connected. You can send data by send() method. ws.send("message to send"); .... }; ws.onmessage = function (evt) { var received_msg = evt.data; ... }; ws.onclose = function() { // websocket is closed. }; } else { // the browser doesn't support WebSocket. } 5555 Web Sockets 구글 크롬 개발자 채널 버전 4.0.249.0. Web Socket을 기본기능으로 지원 Web Socket extension for Apache HTTP Server pywebsocket •testing or experimental purposes •mod_pywebsocket •mod_python •mod_ssl for wss •http://code.google.com/p/pywebsocket/ jWebSocket http://jwebsocket.org/ 5656 Web Sockets HTML5 Web Sockets and the Need for Speed! The Web Sockets experience is 55 times faster than XHR http://www.kaazing.com/blog/?p=301 http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo ) 5757 Web Workers API for running background scripts Threads for Web apps Browser Support Firefox 3.5 Safari 4 Chrome 4 Useful for gaming, graphics, crypto and etc. 5858 Web Workers Workers ‘parent’ page 접근 제한 예제 The parent page <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script> worker.js function findPrimes() { // ..