269200 Web Programming Language Week 4 Dr. Ken Cosh Introducing Javascript.
269200 Web Programming Language Week 14 Ken Cosh HTML 5.
-
Upload
noel-austin -
Category
Documents
-
view
225 -
download
0
Transcript of 269200 Web Programming Language Week 14 Ken Cosh HTML 5.
269200 Web Programming
LanguageWeek 14
Ken Cosh
HTML 5
HTML5
• The latest new version of HTML
• New markup
• New Tags
• New APIs
• Initial Release:- 28th October 2014
Flash
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>
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>
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
• scale
• skew
• rotate
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