Web Apps

400 views
308 views

Published on

In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
400
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Web Apps

    1. 1. Web Apps
    2. 2. web apps• HTML5 allows you to create immersive, “app-like” experiences in the browser.• The capability (and emerging ubiquity) of HTML5 support allows you to deliver experiences that are on par to those delivered by traditional desktop, tablet and mobile apps.
    3. 3. #graph Sketchpadhttp://hashgraph.iamanengineer.net/ http://mudcu.be/sketchpad/HTML5 Canvas HTML5 CanvasDrag and Drop Events Drag and Drop Events
    4. 4. flickr Browser Zygote Bodyhttp://www.gabereiser.com/flickr/index.html http://www.zygotebody.com/Flickr API WebGLjQuery Animation Drag and Drop Events
    5. 5. web apps single page visual momentum audio / video media tactile / drag and drop persistent storage offline capability responsive layout full screen on mobile
    6. 6. single page apps• HTML5 Web Apps typically run “within a single page.”• Unlike a ‘traditional’ client-server app, there are no links to ‘other’ pages or ‘traditional’ form submission events.• This is because links to other pages interrupt the user experience and cause a “transitional jolt”
    7. 7. single page apps• However, your app may still change your page’s DOM, or download fragments of HTML (structure) or XML / JSON (data) from a server• But the browser’s URL always points to the same document (although the URL after the fragment identifier (the # symbol) may change.
    8. 8. single page apps• Single page apps generally provide a much more seamless user experience because entire Web pages don’t need to reload - providing faster response times and overall greater visual momentum.
    9. 9. Media
    10. 10. <audio> and <video>• The HTML5 <audio> and <video> tags allow you to deploy media content on your website / web app without the use of a plug-in.
    11. 11. <audio> and <video>• There are many audio and video containers and codecs, and not all are supported across all browsers.• Containers are envelopes that contain audio and video streams : e.g. - *.ogv, *.webm and *.mp4 are container formats.
    12. 12. <audio> and <video>• Whereas video codecs determine how visual data is compressed or decompressed within a stream : Theora, VP8 and H.264 are examples of codecs.• Audio containers and audio codecs are often the same format standard : examples include : Vorbis (*.ogg), MP3 (*.mp3) and AAC (*.m4a, *.aac)
    13. 13. GOTCHA : not all browsers support all formatsIt’s usually a good idea to encode video / audio in multipleformats so that it can be played on a wide range of browsers.Some good places to check for browser support :http://en.wikipedia.org/wiki/HTML5_video#Browser_supporthttp://en.wikipedia.org/wiki/HTML5_audio#.3CAudio.3E_element
    14. 14. HTML5 <video> element<!-- Stream the video as H.264 - not supported across all browsers --><video src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_h264.m4v"width="960" height="540" preload="none" controls> <!-- Fallback content if the <video> tag not supported --> <!-- Provide the video as a self-contained QuickTime MOV file --> <p>Notation is a HTML5 location-based Web App.</p> <p>We cant show you the video in the browser, but you can still view it : </p> <p><a href="http://collectionweb.cs.uow.edu.au/isit207/notation_demo.mov"></a></p></video>
    15. 15. <audio> <video>• The src attribute indicates where the video file is. (Although in many ways it’s better to use the <source> element.• For the <video> element, you should also always explicitly set the width and height attributes so that the element doesn’t adjust / change size as the video loads. (It looks very jarring otherwise).
    16. 16. loading / playback• The preload attribute indicates how the media file should download to the browser when the page loads : none indicates that no pre-download should occur, and auto, which indicates that the movie should start downloading automatically.• Set autoplay="true" if you want your media file to play when the page loads.
    17. 17. other attributes• controls - if you set this attribute within the <video> or <audio> element, your browser will overlay playback controls for you over your video• loop - if set, it will restart the video when it ends.• muted - if set on <video>, it will mute the volume by default when playback starts.
    18. 18. the <source> element• Used by both <audio> and <video> elements, the <source> element allows you to specify multiple source files along with a MIME type and a codec, so that your browser ‘knows’ which one to download.• It allows you to make your video work across all browsers.
    19. 19. add cross-browser support for our video we do this via converting our H.264 file into Theora and VP8 formats and using the <source> tag<video width="960" height="540" preload="auto" controls> <!-- Video is encoded in H.264, VP8 and Theora formats --> <!-- The browser will decide which one to use --> <source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_h264.m4v" type="video/h264; codecs=avc1.640029, mp4a.40.2"> <source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_theora.ogv" type="video/ogg; codecs=vp8, vorbis"> <source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_vp8.webm" type="video/webm; codecs=theora, vorbis"> <!-- Fallback content if the <video> tag not supported --> <!-- Provide the video as a self-contained QuickTime MOV file --> <p>Notation is a HTML5 location-based Web App.</p> <p>We cant show you the video in the browser, but you can still view it : </p> <p><a href="http://collectionweb.cs.uow.edu.au/isit207/notation_demo.mov"></a></p></video>
    20. 20. http://www.mirovideoconverter.com/
    21. 21. add a ‘poster image’ to our movieThis image is displayed as a placeholder before the movie isplayed<video width="960" height="540" preload="auto" poster="poster.jpg" controls> <!-- Video is encoded in H.264, VP8 and Theora formats --> <!-- The browser will decide which one to use --> <source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_h264.m4v" type="video/h264; codecs=avc1.640029, mp4a.40.2"> <source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_theora.ogv" type="video/ogg; codecs=vp8, vorbis"> <source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_vp8.webm" type="video/webm; codecs=theora, vorbis"> <!-- Fallback content if the <video> tag not supported --> <!-- Provide the video as a self-contained QuickTime MOV file --> <p>Notation is a HTML5 location-based Web App.</p> <p>We cant show you the video in the browser, but you can still view it : </p> <p><a href="http://collectionweb.cs.uow.edu.au/isit207/notation_demo.mov"></a></p></video>
    22. 22. Canvas
    23. 23. HTML5 <canvas>• HTML5 <canvas> allows you to programmatically draw things.• It grants you very fine control over the individual pixels within your page.• HTML5 <canvas> was, in some ways, intended to replace Flash.
    24. 24. HTML5 <canvas>• Canvas is not supported for Internet Explorer 8 or below. But you can try :• ExplorerCanvas (http:// excanvas.sourceforge.net/)• Google Chrome Frame (http:// www.google.com/chromeframe)
    25. 25. drawing on <canvas>• You draw on canvas via its 2D context• Think of a context as the “imaginary pen” : you tell it to create shapes, lines and fills on a canvas, and then it ‘draws’ it for you.
    26. 26. chequerboard
    27. 27. declare the <canvas> element<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>HTML5 Canvas Demo</title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"type="text/javascript"></script> <script src="script.js" type="text/javascript"></script></head><body> <div id="container"> <div id="chequerboard"></div> <canvas id="target" width="450" height="450"> <p>HTML5 Canvas is not supported in this browser.</p> <p>Have you considered downloading <a href="http://www.google.com/chromeframe">Google Chrome Frame</a>?</p> </canvas> </div></body></html>
    28. 28. body { background-color: #DEDDD7; font-family: "Helvetica", Arial, sans-serif; color: #666666;}#container { position: relative; width: 960px; height: 540px; margin-top: 100px; margin-left: auto; margin-right: auto;}#container canvas { position: absolute; left: 510px; top: 0;}#chequerboard { position: absolute; top: 103px; left: 59px; width: 245px; height: 245px;}
    29. 29. draw a simple circle// jQuery document.ready handler$(document).ready(function() { drawCircle();});// Converts degrees to radiansfunction degToRad(degrees) { return (Math.PI/180) * degrees;}// Draws a simple circle on the canvasfunction drawCircle() { var canvas = $(#target)[0]; if (canvas.getContext) { var context = canvas.getContext(2d); context.beginPath(); context.strokeStyle = rgba(68, 68, 68, 1); context.lineWidth = 1 context.arc(225, 225, 225, degToRad(0), degToRad(360), false); context.stroke(); }}
    30. 30. refactor drawCircle() so you can re-use itconcentric circles == a target!// Draws a circle for a given radius,// fillStyle and strokeStylefunction drawCircle(radius, fillStyle, strokeStyle) { var canvas = $(#target)[0]; if (canvas.getContext) { var context = canvas.getContext(2d); context.beginPath(); context.strokeStyle = strokeStyle; context.fillStyle = fillStyle; context.lineWidth = 1 context.arc(225, 225, radius, degToRad(0), degToRad(360), false); context.stroke(); context.fill(); }}// Draws the targetfunction drawTarget() { drawCircle(225, rgba(0, 0, 0, 0), rgba(68, 68, 68, 1)); drawCircle(220, rgba(0, 0, 0, 0), rgba(68, 68, 68, 1)); drawCircle(150, rgba(0, 0, 0, 0), rgba(68, 68, 68, 1)); drawCircle(145, rgba(0, 0, 0, 0), rgba(68, 68, 68, 1)); drawCircle(75, rgba(0, 0, 0, 0), rgba(68, 68, 68, 1)); drawCircle(70, rgba(102, 68, 74, 1), rgba(0, 0, 0, 0));}
    31. 31. create a generic chequerboard style.chequerboard-tile { width: 45px; height: 45px; position: absolute;}
    32. 32. write a function that creates the chequerboard// Creates the chequerboardfunction createChequerboard() { // TODO : Create the chequerboard tiles // TODO : Draw the chequerboard tiles}
    33. 33. create the chequerboard tilesvar currentTileClass = chequerboard-tile-black;// Add the chequerboard backgrounds and tilesfor (var leftOffset = 0; leftOffset < 245; leftOffset += 50) { for (var topOffset = 0; topOffset < 245; topOffset += 50) { // Add the tiles background $(<canvas width="45" height="45" />).addClass(chequerboard-tile-background).css({ left: leftOffset + px, top: topOffset + px }).appendTo(#chequerboard); // Add the tile itself $(<canvas width="45" height="45" />).addClass(currentTileClass).css({ left: leftOffset + px, top: topOffset + px }).appendTo(#chequerboard); // Switch the tiles colour (so it alternates black & white) if (currentTileClass == chequerboard-tile-black) { currentTileClass = chequerboard-tile-white; } else if (currentTileClass == chequerboard-tile-white) { currentTileClass = chequerboard-tile-black; } }}
    34. 34. draw the chequerboard tiles// Draw the black chequerboard tiles$(.chequerboard-tile-black).each(function() { var context = this.getContext(2d); context.fillStyle = rgba(85, 85, 85, 1); context.fillRect(0, 0, 45, 45);});// Draw the white chequerboard tiles$(.chequerboard-tile-white).each(function() { var context = this.getContext(2d); context.fillStyle = rgba(238, 238, 238, 1); context.strokeStyle = rgba(170, 170, 170, 1); context.fillRect(0, 0, 45, 45); context.strokeRect(0, 0, 45, 45);});
    35. 35. drag and drop• HTML5 supports the ability to natively drag and drop elements.• This is done by making elements draggable, and handling the dragstart, dragend, dragover and drop events.
    36. 36. drag and drop capability to the chequerboard// Creates the chequerboardfunction createChequerboard() { // DONE : Create the chequerboard tiles // DONE : Draw the chequerboard tiles // TODO : Make the tiles draggable // TODO : Make the target respond to drag events}
    37. 37. define a .draggable class.draggable { cursor: move;}
    38. 38. make the tiles draggable$(.chequerboard-tile-black).addClass(draggable);$(.chequerboard-tile-white).addClass(draggable);$(.draggable) .attr(draggable, true) .bind(dragstart, function() { dragSourceElement = this; $(this).css({ opacity: 0.5, box-shadow: 0px 0px 5px rgba(0, 0, 0, 1.0) }); }) .bind(dragend, function() { $(this).css({ opacity: 1.0, box-shadow: none }); })
    39. 39. make the target respond to drag events$(#target).each(function() { $(this).bind(dragover, function(event) { event.preventDefault(); console.log(dragover event fired!); }); $(this).bind(drop, function(event) { event.preventDefault(); console.log(drop event fired!); $(dragSourceElement).hide(); });});
    40. 40. Data Storage
    41. 41. HTML5 storage• HTML5 provides a new set of APIs to store data persistently.• HTML5 Local Storage allows you to do this via simple key-value pairs• There are other features, such as WebSQL and IndexedDB that provide SQL database-like access on the client.
    42. 42. HTML5 LocalStorage• Uses key-value pairs• localStorage.getItem(key) : retrieves an item from local storage of a specified key.• localStorage.setItem(key, val) : sets an item to local storage of a specified key and value.
    43. 43. colourshift walkthrough
    44. 44. web apps on iOS• We can make colourshift look and feel like an app on an iOS device.• We only need to make a few changes in our code to do this.
    45. 45. add the <meta> and <link> tags<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>colourshift</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> <script src="jquery.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script></head><body> <!-- Body content goes here --></body></html>
    46. 46. but ...• Unlike a real native app, this Web App still requires an Internet connection to function.• For a more “true” app-like experience, it’s necessary for us to ...
    47. 47. go offline
    48. 48. HTML5 App Cache• The HTML5 Application Cache allows your web app to “work offline.”• It works by looking up a file, called a cache manifest, that determines the files that are required for it to work offline.• The browser checks the cache manifest for any updates, and downloads (or re- downloads) files as necessary.
    49. 49. create the cache manifestsimple text file that describes files relative to index.htmlCACHE MANIFEST# version 0.1index.htmlstyles.cssjquery.jsscript.js
    50. 50. link it within index.html<!DOCTYPE html><html lang="en" manifest="appcache.manifest"><head> <meta charset="utf-8"> <title>colourshift</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> <script src="jquery.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script></head><body> <!-- Body content goes here --></body></html>

    ×