HTML5 Mendel Rosenblum CS142 Lecture Notes - HTML5
HTML continually being extended ● Standard driven by different constituent groups ● Huge: many new features covering many areas ● HTML5 - now at least partially implemented in most browsers CS142 Lecture Notes - HTML5
Thrust: Extend markup language to define semantics ● Document structure (rather everything being a div with a class attribute) ○ <article>, <section>, <header>, <footer>, <summary>, <aside>, <details> ○ <mark>, <figcaption>, <figure> ○ <nav>, <menuitem> ● Semantic elements provide structural information for programs that search/manipulate HTML ○ Particularly useful for accessibility CS142 Lecture Notes - HTML5
Thust: Make presentation easier ● East Asian character pronunciation support <ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> ● Common graphical elements ○ < meter min="200" max="500" value="350"> ○ < progress value="70" max="100">70 %</progress> CS142 Lecture Notes - HTML5
Thurst: Get rid of problematic browser plug-ins ● Timed media playback: <video> and <audio> ○ Eliminate Adobe Flash CS142 Lecture Notes - HTML5
Thrust: Drawing - Scalable Vector Graphics (SVG) ● Text, lines, curves, filled shapes ● Rotations, transparency, gradients ● Graphical objects are HTML DOM objects, such as <svg height="100" width="100"> <circle cx="25" cy="25" r="15" stroke="green" fill="white" stroke-width="5"/> </svg> ● Can modify objects under JavaScript control CS142 Lecture Notes - HTML5
What is scalable? Non-Scalable Scalable CS142 Lecture Notes - HTML5
Example of SVG https://commons.wikimedia.org CS142 Lecture Notes - HTML5
SVG CS142 Lecture Notes - HTML5
<canvas id="canvas1"> Drawing - Canvas Your browser doesn’t support canvases </canvas> ● Canvas: alternative to SVG <script> ○ All drawing is done from JavaScript var canvas = ○ document.getElementById("canvas1"); 3D support - WebGL var context = canvas.getContext("2d"); context.strokeStyle = "#ff0000"; context.lineWidth = 8; context.beginPath(); context.moveTo(50, 100); context.lineTo(200, 100); context.lineTo(200, 50); context.lineTo(150, 50); context.lineTo(150, 150); context.stroke() CS142 Lecture Notes - HTML5
Canvas Example CS142 Lecture Notes - HTML5
Thrust: Device Access ● Camera <input type="file" id="take-picture" accept="image/*"> ● Touch hardware Events: touchstart, touchend, touchmove, touchcancel ● Geolocation ○ navigator.geolocation.getCurrentPosition(callback); ○ navigator.geolocation.watchPosition(callback); ■ Asks user first: t imestamp, longitude, latitude, accuracy, altitude CS142 Lecture Notes - HTML5
Drag and Drop ● Mark elements draggable: <img draggable="true"> ● New events: ○ ondragstart : when user “picks” up object to drag ○ ondragover : when user drags object over an HTML element ○ ondrop : when user drops object ● Passing information from source to target: ○ One or more type-value pairs ○ In ondragstart handler: ■ event.dataTransfer.setData(type, value); ○ In ondragover and ondrop handlers: ■ var value = event.dataTransfer.getData(type); CS142 Lecture Notes - HTML5
Web workers: run JavaScript code in the background var w = new Worker("workerCode.js"); Worker code does not have access to DOM. Communicates with main window via postMessage . CS142 Lecture Notes - HTML5
Offline support ● Storage - Application Cache ● " online " and " offline " events ● Local file access CS142 Lecture Notes - HTML5
Web app integration into mobile environment ● Mobile apps have better platform access ○ Device sensors, mobile OS data (e.g. contacts, etc.), acceleration hardware ○ Some limitations in web app access is by design What if your app needs more? ● Option #1: Run your web app in an extended browser application ○ Extended browser gives needed access yet still runs HTML/JavaScript ● Option #2: Write your own native application ○ Different development environment but app looks like a native app ○ Have to toss the HTML/JavaScript but can use the models CS142 Lecture Notes - HTML5
Recommend
More recommend
