Transcript W13 - Ken Cosh

269200 Web
Programming Language
Week 13
Ken Cosh
HTML 5
HTML5
• The latest new version of HTML
•
•
•
New markup
New Tags
New APIs
• Initial Release:- 28th October 2014
Browser Compatability
• In development for a decade, but still not 100% fully supported…
•
http://caniuse.com/#cats=HTML5
HTML5
• Leap Forward in web design, layout & usability
•
•
•
•
•
•
Graphics!
Tidies up HTML’s evolution
Geolocation handling
Web Workers
Local Storage
Mobile
THE CANVAS!
The Canvas
• Originally for Safari
• Allows graphics to be drawn on webpage
• Simply an element on the webpage with width & height, with an ID, so
Javascript can be used to draw graphics on it.
Canvas
<canvas id=‘mycanvas’ width=‘320’ height=‘240’>
This is a canvas element, but your browser isn’t HTML5!
</canvas>
<script>
$(document).ready(function(){
canvas = $('#mycanvas')[0]
context = canvas.getContext('2d')
context.fillStyle = 'red'
$(canvas).css("border", "1px solid black")
context.beginPath()
context.moveTo(160, 120)
context.arc(160, 120, 70, 0, Math.PI * 2, false)
context.closePath()
context.fill()
});
</script>
Canvas
Filling Rectangles
• fillStyle()
• fillRect()
• clearRect()
• strokeRect()
Gradients?
• Mixing from colour to colour…
•
context.createLinearGradient
•
•
•
•
4 parameters – x, y, width & height
Diagonal? – easy!
Multiple colours? – easy!
Radial rather than Linear? – easy!
•
context.createRadialGradient()
Canvas
• Filling with a pattern
•
•
•
•
image = new Image()
image.src = 'smile.png‘
pattern
= context.createPattern(image, 'repeat')
context.fillStyle = pattern
Text
• In case you need to place text into a canvas;
•
context.strokeText(‘ISNE Rocks!’, 0, 0)
Lines
•
•
•
•
lineCap
•
butt, round, square
lineJoin
•
round, bevel, miter
context.beginPath()
•
•
•
context.moveTo()
context.lineTo()
context.stroke()
context.closePath()
Images
•
Complex Computer Graphics operations
•
•
•
•
•
•
resize
shadows
compositing
lighter
darker
transforms
•
•
•
rotate
scale
skew
AUDIO & VIDEO
Audio & Video
• The web is not just about text & pictures
• No longer do we need to download and install a plugin player
•
•
•
remember RealPlayer?
FlashPlayer
RealAudio
Codecs
• Codecs (enCODer/DECoder)
•
HTML 5 supports several
•
•
•
•
AAC
MPS
PCM
Vorbis
• Different browsers support different codecs
HTML5 Audio & Video
• 2 new tags
•
•
<audio>
<video>
• inside the tags you link to each of the different codecs you support
Geolocation
Where are you?
• Satellite data?
•
GPS
• Data signals from known towers
• Fixed Wifi access points
• IP Address
Local Storage
Beyond Cookies
• Cookies are limited in size
• HTML5 allows access to a larger storage space (5-10MB depending on
browser)
• remains through page loads, different visits & reboot
localStorage object
• localStorage.setItem(‘username’, ‘ken’)
• username = localStorage.getItem(‘username’)
• localStorage.removeItem(‘username’)
• localStorage.clear()
Web Workers
Webworkers
• Can work in the background
• When it finishes, it creates an event to send information back