HTML5 Mendel Rosenblum CS142 Lecture Notes - HTML5 HTML - - PowerPoint PPT Presentation

▶
html5
SMART_READER_LITE
LIVE PREVIEW

HTML5 Mendel Rosenblum CS142 Lecture Notes - HTML5 HTML - - PowerPoint PPT Presentation

Oct 07, 2022 559 likes •738 views

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

slide-1
SLIDE 1

CS142 Lecture Notes - HTML5

HTML5

Mendel Rosenblum

slide-2
SLIDE 2

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
slide-3
SLIDE 3

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

slide-4
SLIDE 4

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>

slide-5
SLIDE 5

CS142 Lecture Notes - HTML5

Thurst: Get rid of problematic browser plug-ins

  • Timed media playback: <video> and <audio>

○ Eliminate Adobe Flash

slide-6
SLIDE 6

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
slide-7
SLIDE 7

CS142 Lecture Notes - HTML5

What is scalable?

Non-Scalable Scalable

slide-8
SLIDE 8

CS142 Lecture Notes - HTML5

Example of SVG

https://commons.wikimedia.org

slide-9
SLIDE 9

CS142 Lecture Notes - HTML5

SVG

slide-10
SLIDE 10

CS142 Lecture Notes - HTML5

Drawing - Canvas

  • Canvas: alternative to SVG

○

All drawing is done from JavaScript

○

3D support - WebGL

<canvas id="canvas1"> Your browser doesn’t support canvases </canvas> <script> var canvas = document.getElementById("canvas1"); 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()

slide-11
SLIDE 11

CS142 Lecture Notes - HTML5

Canvas Example

slide-12
SLIDE 12

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: timestamp, longitude, latitude, accuracy, altitude

slide-13
SLIDE 13

CS142 Lecture Notes - HTML5

Drag and Drop

  • Mark elements draggable: <img draggable="true">
  • New events:

○

  • ndragstart: when user “picks” up object to drag

○

  • ndragover: when user drags object over an HTML element

○

  • ndrop: 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);

slide-14
SLIDE 14

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.

slide-15
SLIDE 15

CS142 Lecture Notes - HTML5

Offline support

  • Storage - Application Cache
  • "online" and "offline" events
  • Local file access
slide-16
SLIDE 16

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