Storing Data in The Client Saves information unique to users On - - PowerPoint PPT Presentation

▶
storing data in the client
SMART_READER_LITE
LIVE PREVIEW

Storing Data in The Client Saves information unique to users On - - PowerPoint PPT Presentation

Sep 29, 2022 132 likes •274 views

Storing Data in The Client Saves information unique to users On Server: Less network traffic Less processing power f-iacobelli@neiu.edu Web App Dev HTML 5 Ideas behind the standard Better use of resources (for Mobile) Get

slide-1
SLIDE 1

Storing Data in The Client

◮ Saves information unique to users ◮ On Server:

◮ Less network traffic ◮ Less processing power f-iacobelli@neiu.edu Web App Dev

slide-2
SLIDE 2

HTML 5

Ideas behind the standard

◮ Better use of resources (for Mobile) ◮ Get rid of plugins (like Flash) ◮ Largely seemless integration with Javascript, CSS and

DOM

◮ Markup to replace frequen or complex scripting

f-iacobelli@neiu.edu Web App Dev

slide-3
SLIDE 3

HTML5 Doctype

<!DOCTYPE html />

f-iacobelli@neiu.edu Web App Dev

slide-4
SLIDE 4

Canvas

<canvas id="myCanvas" width="300" height="300></canvas>

◮ Use Javascript to draw on it. ◮ (0,0) is at the top-left corner of the box.

Y

Coords.

X

(0,0) f-iacobelli@neiu.edu Web App Dev

slide-5
SLIDE 5

Drawing on a Canvas

Javascript to the Rescue

Start a javscript section. Obtain a context for the canvas ("2d"). Then draw

<script type="text/javascript"> var canvas = document.getElementById("drawing"); var context = canvas.getContext("2d"); context.fillStyle = "yellow"; context.fillRect(5,10,200,75); context.strokeStyle = "royalblue"; context.lineWidth = 6; context.strokeRect(4,9,201,76); </script>

f-iacobelli@neiu.edu Web App Dev

slide-6
SLIDE 6

Drawing Lines

Paths

Place the cursor with moveTo Draw a line with lineTo context.beginPath(); context.moveTo(10,10); context.strokeStyle="red"; context.lineTo(400,10); context.lineTo(400,100); context.stroke(); There are more attributes to add to a line (lineCap, lineJoin, etc.)

f-iacobelli@neiu.edu Web App Dev

slide-7
SLIDE 7

Arcs and Circles

Radians, Clockwise, Counter clockwise, Oh My

Arcs require 4 parameters

◮ x, y coordinates of the center ◮ r radius of the circle ◮ α, ω star and end angles of the arc in radians1. ◮ dir is Optional: true if clockwise, false for counter

clockwise context.arc(35,50, 0, Math.PI,true)

12π = 360o f-iacobelli@neiu.edu Web App Dev

slide-8
SLIDE 8

Curves

Quadratic

Quadratic curves require four parameters:

◮ ix, iy coordinates of the inflexion point ◮ x, y end point ◮ Starting point is given by last point in path

context.moveTo(10,10); context.quadraticCurveTo(25,5,95,50);

f-iacobelli@neiu.edu Web App Dev

slide-9
SLIDE 9

Gradients

Gradients require some process:

◮ createLinearGradient(x,y,p,q) start and end

coordinates.

◮ addColorStop(x,color) at what percentage of the line

to arrive at which color var gradient = context.createLinearGradient(0,0,400,400); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"navy"); context.fillStyle = gradient; context.fillRect(0,0,400,400); You can also have radial gradients.

f-iacobelli@neiu.edu Web App Dev

slide-10
SLIDE 10

Images

Instagram-like

drawImage takes 5 parameters

◮ imageName Canvas, video or image ◮ x, y top left corner of the image ◮ width, height of the image

drawImage(imageObj,x,y,width,height) Does not work very well

  • n all browsers.

f-iacobelli@neiu.edu Web App Dev

slide-11
SLIDE 11

Transformations

Scale and Translate:

◮ scale(width,height) scales width and height of path. ◮ translate(x,y) Translates the origin of the canvas to

(x,y)

f-iacobelli@neiu.edu Web App Dev

slide-12
SLIDE 12

More On Cavas

Event Handling

◮ Getting the cursor position: ◮

canvas.addEventListener("click", showCoords, function showCoords(e){ alert("X:"+e.pageX+" Y:"+e.pageY); } more at A simple game in JS.

f-iacobelli@neiu.edu Web App Dev

slide-13
SLIDE 13

SVG Graphics

<embed src="image.svg" type="image/svg+xml" />

f-iacobelli@neiu.edu Web App Dev