Your SlideShare is downloading. ×
0
Web 2.0 with XML
                     24 September 2009
summer school




                     Building Dynamic Web Apps w...
Learning Objectives
summer school




  Understand the fundamentals of dynamic web applications.
  Learn how to apply web ...
Contents
summer school


  Lecture
  1.    Web 1.0 vs. Web 2.0
  2.    Web standards
  3.    Asynchronous communication
  ...
summer school




                                                                      Web 1.0 vs. Web 2.0




          ...
Web 1.0
summer school




  •  Very limited designs
       •  No images at first
       •  No CSS
  •  Completely static p...
Web 1.0 “applications”
summer school


  •  The introduction of forms allowed for some
     interactivity:
       •    Ini...
Web 2.0 applications (1)
summer school


  •  Rich designs
       •  Images, icons, colors, gradients, rounded
          c...
Web 2.0 applications (2)
summer school


  •  Fully interactive
       •  Client side: fade-in, fade-out, drag-an-drop, …
...
Web 2.0 applications (3)
summer school


  •  Much more lightweight
       •  Client (perhaps in concert with or server si...
summer school




                                                                                Web standards




      ...
Web 2.0 technologies
summer school


  •  Web standards
       •    HTML
       •    CSS
       •    JavaScript
       •  ...
Browser features
summer school


  •  Web 2.0 applications require specific client
     features
       •  JavaScript
    ...
Supported browsers
summer school


  •  Supported by all the major browsers
       •  Firefox and “Gecko”-derived browsers...
What, how, and why?
summer school


  •  What are web pages made of?
  •  How are they made?
  •  How do they work?




  ...
HTML
summer school


  •  “Standard” HTML
       •  Universally supported vocabulary
            •  div, span, h1, h2, tab...
CSS
summer school


  •  Applies presentation to HTML
       •    borders, margins
       •    colors
       •    fonts
  ...
JavaScript
summer school


  •  Web browser scripting language
       •  Quite modern and advanced
       •  Defined by EC...
XML
summer school


  •  Declarative markup language
       •  Arbitrary semantic complexity
            •  div, span, boo...
JSON: JavaScript Object Notation
summer school


  •  Native JavaScript notation
       •  Nested name/value pairs
  •  Ub...
What is a web page?
summer school




          Licensed under a Creative Commons Attribution-
                           ...
What is a web page?
summer school

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Page Title</title>




</he...
What is a web page?
summer school

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Page Title</title>




</he...
What is a web page?
summer school

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Page Title</title>


  <scr...
What is a web page?
summer school

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Page Title</title>         ...
What is a web page?
summer school

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Page Title</title>         ...
Why do Web 2.0 pages work?
summer school


  •  Standardization
       •    HTML
       •    CSS
       •    JavaScript
  ...
How do Web 2.0 pages work?
summer school


                                                                         •  Par...
How do Web 2.0 pages work?
summer school


                                                                         •    P...
How do Web 2.0 pages work?
summer school


                                                                         •    P...
How do Web 2.0 pages work?
summer school


                                                                         •    P...
How do Web 2.0 pages work?
summer school


  •  JavaScript gives the programmer almost
     complete freedom
       •    A...
How do Web 2.0 pages work?
summer school


  •  JavaScript gives the programmer almost
     complete freedom
  •  For secu...
Doing two things at once
summer school


  •  The browser is “single threaded”; it can only
     do one thing at time
  • ...
Doing two things at once
summer school


  •  The interpreter fakes it with:
  •  Events
       •  Changes to the environm...
Browser limitations
summer school


  •  Clients can do a lot, but
  •  Clients are ultimately limited
       •  Little me...
Overcoming browser limitations
summer school


  •  The goal:
       •  Allow the server to support my web application
   ...
summer school




                                                     Asynchronous communication




          Licensed u...
Asynchronous communication (1)
summer school


•  XMLHttpRequest
     •  The magic behind the curtain
•  Allows the client...
Asynchronous communication (2)
summer school


  •  Control returns to the browser while the
     request is being process...
XMLHttpRequest The Hard Way
summer school


  •  Create an array to hold requests, and build the
     infrastructure to in...
XMLHttpRequest The Hard Way
summer school


  •  Write a function to submit the request
   function loadXMLDoc(url) {!
   ...
XMLHttpRequest The Hard Way
summer school


  •  Write the callback handler and the function to
     process the values re...
XMLHttpRequest The Easy Way
summer school


  •  Include a JavaScript framework, like jQuery
  •  Use it
   $(“#someid”).g...
summer school




                                                                   JavaScript frameworks




          L...
JavaScript frameworks
summer school


  There are lots to choose from:
       script.aculo.us
       Prototype
       jQue...
Why I like jQuery
summer school


  •    Robust
  •    Concise
  •    Active developer community
  •    Large inventory of...
CSS frameworks
summer school


  •  There are lots of CSS frameworks as well:
       •    Blueprint
       •    Baseline C...
summer school




                                                                              Tutorial Session




     ...
Adding interactivity
summer school


     Imagine that you’ve written a web service
     which accepts a pair of lat/long ...
summer school




                                                                               Any questions?

         ...
Upcoming SlideShare
Loading in...5
×

web20

552

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
552
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "web20"

  1. 1. Web 2.0 with XML 24 September 2009 summer school Building Dynamic Web Apps with XML Norman Walsh Mark Logic Corporation Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  2. 2. Learning Objectives summer school Understand the fundamentals of dynamic web applications. Learn how to apply web technologies to introduce dynamic behavior to your web pages. •  HTML •  CSS •  JavaScript •  XML Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 2 Noncommercial-Share Alike 3.0 Unported License
  3. 3. Contents summer school Lecture 1.  Web 1.0 vs. Web 2.0 2.  Web standards 3.  Asynchronous communication 4.  JavaScript frameworks Tutorial Session 1. Incorporating simple dynamic behavior Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 3 Noncommercial-Share Alike 3.0 Unported License
  4. 4. summer school Web 1.0 vs. Web 2.0 Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  5. 5. Web 1.0 summer school •  Very limited designs •  No images at first •  No CSS •  Completely static pages Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 5 Noncommercial-Share Alike 3.0 Unported License
  6. 6. Web 1.0 “applications” summer school •  The introduction of forms allowed for some interactivity: •  Initial page provides a form •  Client data sent to server •  Server does some processing •  Results sent back to client •  Very heavyweight: •  No client-side interaction •  Result is always a complete refresh of the whole page •  Still very limited designs Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 6 Noncommercial-Share Alike 3.0 Unported License
  7. 7. Web 2.0 applications (1) summer school •  Rich designs •  Images, icons, colors, gradients, rounded corners, drop shadows, … •  They (can) look much more like desktop applications Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 7 Noncommercial-Share Alike 3.0 Unported License
  8. 8. Web 2.0 applications (2) summer school •  Fully interactive •  Client side: fade-in, fade-out, drag-an-drop, … •  Server side: type-ahead, spelling suggestions, forms processing… Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 8 Noncommercial-Share Alike 3.0 Unported License
  9. 9. Web 2.0 applications (3) summer school •  Much more lightweight •  Client (perhaps in concert with or server side processing) can update different parts of the page without updating the whole page Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 9 Noncommercial-Share Alike 3.0 Unported License
  10. 10. summer school Web standards Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  11. 11. Web 2.0 technologies summer school •  Web standards •  HTML •  CSS •  JavaScript •  XML •  Proprietary technologies •  Flash •  Silverlight Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 11 Noncommercial-Share Alike 3.0 Unported License
  12. 12. Browser features summer school •  Web 2.0 applications require specific client features •  JavaScript •  AJAX (XMLHttpRequest object) •  CSS Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 12 Noncommercial-Share Alike 3.0 Unported License
  13. 13. Supported browsers summer school •  Supported by all the major browsers •  Firefox and “Gecko”-derived browsers •  Safari and “Webkit”-derived browsers •  Internet Explorer (to varying degrees, with varying bugs) •  Opera •  Not universally supported •  Links and other “text only” browsers •  Screen readers •  Search engines Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 13 Noncommercial-Share Alike 3.0 Unported License
  14. 14. What, how, and why? summer school •  What are web pages made of? •  How are they made? •  How do they work? Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 14 Noncommercial-Share Alike 3.0 Unported License
  15. 15. HTML summer school •  “Standard” HTML •  Universally supported vocabulary •  div, span, h1, h2, table, … •  Supports a degree of “semantic” markup •  Most presentational decisions can be made elsewhere •  HTML vs. XHTML •  HTML5 vs. HTML vs. XHTML vs. … Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 15 Noncommercial-Share Alike 3.0 Unported License
  16. 16. CSS summer school •  Applies presentation to HTML •  borders, margins •  colors •  fonts •  graphics •  Sufficiently powerful for most web applications •  Continues to grow in sophistication •  Browsers lag by varying amounts Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 16 Noncommercial-Share Alike 3.0 Unported License
  17. 17. JavaScript summer school •  Web browser scripting language •  Quite modern and advanced •  Defined by ECMA •  JavaScript runs in the browser •  Extends the browser in application-specific ways •  Responds to user interaction •  Communicates with the server •  Updates underlying HTML and CSS Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 17 Noncommercial-Share Alike 3.0 Unported License
  18. 18. XML summer school •  Declarative markup language •  Arbitrary semantic complexity •  div, span, book, spreadsheet, widget-description, … •  Can be parsed without knowing the tag set •  Nearly ubiquitous support <book> <title>Acme Widget Reference</title> <price>13.95</price> <cover>http://example.com/cover.jpg</cover> <abstract>A reference to the Acme Widgets, what else? </abstract> </book> Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 18 Noncommercial-Share Alike 3.0 Unported License
  19. 19. JSON: JavaScript Object Notation summer school •  Native JavaScript notation •  Nested name/value pairs •  Ubiquitous support in JavaScript clients { "title" : "Acme Widget Reference", "price" : "13.95", "cover" : "http://example.com/cover.jpg", "abstract": "A reference to the Acme Widgets, what else?" } Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 19 Noncommercial-Share Alike 3.0 Unported License
  20. 20. What is a web page? summer school Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 20 Noncommercial-Share Alike 3.0 Unported License
  21. 21. What is a web page? summer school <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> </head> <body> <div class="navbar"> <ul> <li>Page 1</li><li>Page 2</li><li>Page 3</li> </ul> </div> <div class="body"> <h1>Page Title</h1> <p>This is a test, this is only a test.</p> </div> </body> </html> Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 21 Noncommercial-Share Alike 3.0 Unported License
  22. 22. What is a web page? summer school <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> </head> <body> <div class="navbar"> <ul> <li>Page 1</li><li>Page 2</li><li>Page 3</li> </ul> </div> <div class="body"> <h1>Page Title</h1> <p>This is a test, this is only a test.</p> </div> </body> </html> An initial model Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 22 Noncommercial-Share Alike 3.0 Unported License
  23. 23. What is a web page? summer school <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> <script type="text/javascript" src="/js/library.js"></script> <script type="text/javascript" src="/js/page.js"></script> <script type="text/javascript" src="/js/extra.js"></script> </head> <body> Scripts <div class="navbar"> <ul> <li>Page 1</li><li>Page 2</li><li>Page 3</li> </ul> </div> <div class="body"> <h1>Page Title</h1> <p>This is a test, this is only a test.</p> </div> </body> </html> Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 23 Noncommercial-Share Alike 3.0 Unported License
  24. 24. What is a web page? summer school <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> Stylesheets <link rel="stylesheet" type="text/css" href=”/cs/base-style.css" /> <link rel="stylesheet" type="text/css" href=”/cs/page-style.css" /> <script type="text/javascript" src="/js/library.js"></script> <script type="text/javascript" src="/js/page.js"></script> <script type="text/javascript" src="/js/extra.js"></script> </head> <body> <div class="navbar"> <ul> <li>Page 1</li><li>Page 2</li><li>Page 3</li> </ul> </div> <div class="body"> <h1>Page Title</h1> <p>This is a test, this is only a test.</p> </div> </body> </html> Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 24 Noncommercial-Share Alike 3.0 Unported License
  25. 25. What is a web page? summer school <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page Title</title> Stylesheets <link rel="stylesheet" type="text/css" href=”/cs/base-style.css" /> <link rel="stylesheet" type="text/css" href=”/cs/page-style.css" /> <script type="text/javascript" src="/js/library.js"></script> <script type="text/javascript" src="/js/page.js"></script> <script type="text/javascript" src="/js/extra.js"></script> </head> <body> Scripts <div class="navbar"> <ul> <li>Page 1</li><li>Page 2</li><li>Page 3</li> </ul> </div> <div class="body"> <h1>Page Title</h1> <p>This is a test, this is only a test.</p> </div> </body> </html> An initial model Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 25 Noncommercial-Share Alike 3.0 Unported License
  26. 26. Why do Web 2.0 pages work? summer school •  Standardization •  HTML •  CSS •  JavaScript •  XML and/or JSON •  More-or-less universal browser support •  Firefox •  Safari •  Opera •  Internet Explorer Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 26 Noncommercial-Share Alike 3.0 Unported License
  27. 27. How do Web 2.0 pages work? summer school •  Parse (X)HTML •  Build a DOM Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 27 Noncommercial-Share Alike 3.0 Unported License
  28. 28. How do Web 2.0 pages work? summer school •  Parse (X)HTML •  Build a DOM •  Load CSS •  Attach styles Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 28 Noncommercial-Share Alike 3.0 Unported License
  29. 29. How do Web 2.0 pages work? summer school •  Parse (X)HTML •  Build a DOM •  Load CSS •  Attach styles •  Load JavaScript •  Run scripts •  Attach event handlers Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 29 Noncommercial-Share Alike 3.0 Unported License
  30. 30. How do Web 2.0 pages work? summer school •  Parse (X)HTML •  Build a DOM •  Load CSS •  Attach styles •  Load JavaScript •  Run scripts •  React to events •  Change DOM •  Change Style Full disclosure: real •  Attach new events life is more complicated than this •  Repeat Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 30 Noncommercial-Share Alike 3.0 Unported License
  31. 31. How do Web 2.0 pages work? summer school •  JavaScript gives the programmer almost complete freedom •  Add or remove HTML elements •  Add, remove, or change CSS properties •  Move the input focus, change the cursor •  Create new windows •  Setup functions to run automatically in response to user events •  Change of focus •  Clicking or typing •  Communicate with the server Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 31 Noncommercial-Share Alike 3.0 Unported License
  32. 32. How do Web 2.0 pages work? summer school •  JavaScript gives the programmer almost complete freedom •  For security purposes, there are some limits: •  The same origin policy •  Browsers restrict or forbid “cross-site scripting” (XSS) Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 32 Noncommercial-Share Alike 3.0 Unported License
  33. 33. Doing two things at once summer school •  The browser is “single threaded”; it can only do one thing at time •  How can it respond to multiple situations simultaneously? •  It can’t, but the JavaScript interpreter fakes it! Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 33 Noncommercial-Share Alike 3.0 Unported License
  34. 34. Doing two things at once summer school •  The interpreter fakes it with: •  Events •  Changes to the environment detected by the interpreter •  “Handlers” are called automatically •  When the handler finishes, the interpreter resumes whatever it was doing before •  And callback functions •  Events by another name •  Giving the interpreter a handler to call when some request is complete Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 34 Noncommercial-Share Alike 3.0 Unported License
  35. 35. Browser limitations summer school •  Clients can do a lot, but •  Clients are ultimately limited •  Little memory •  Little horsepower •  Slow connections to the network •  Don’t think so? •  Think mobile phone, not desktop •  Servers are much less limited •  I can upgrade the server •  I can’t upgrade your desktop Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 35 Noncommercial-Share Alike 3.0 Unported License
  36. 36. Overcoming browser limitations summer school •  The goal: •  Allow the server to support my web application •  Augment (not interfere) with the user experience Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 36 Noncommercial-Share Alike 3.0 Unported License
  37. 37. summer school Asynchronous communication Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  38. 38. Asynchronous communication (1) summer school •  XMLHttpRequest •  The magic behind the curtain •  Allows the client to construct an HTTP request •  http://example.com/get-stock-quote?ticker=GOOG •  Asks the browser to perform the request •  GET •  Provides a callback or event handler to process the response •  updateStockTicker() Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 38 Noncommercial-Share Alike 3.0 Unported License
  39. 39. Asynchronous communication (2) summer school •  Control returns to the browser while the request is being processed, so the application continues to function normally •  The callback function can insert the response into the users experience with the application in any appropriate way Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 39 Noncommercial-Share Alike 3.0 Unported License
  40. 40. XMLHttpRequest The Hard Way summer school •  Create an array to hold requests, and build the infrastructure to initialize it. var xmlReqs = new Array();! function ReqObj(type, xmlhttp) { ... }! function getReqObj() {! var req = false;! if (window.XMLHttpRequest) { // native branch! req = new XMLHttpRequest();! } else if (window.ActiveXObject) { // IE branch! req = new ActiveXObject("Microsoft.XMLHTTP");! }! var reqobj = new ReqObj("busy", req);! xmlReqs.push(reqobj);! return reqobj;! }! Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 40 Noncommercial-Share Alike 3.0 Unported License
  41. 41. XMLHttpRequest The Hard Way summer school •  Write a function to submit the request function loadXMLDoc(url) {! var req = getReqObj();! if (window.XMLHttpRequest) { // native branch! req.xmlhttp.onreadystatechange = procReqChange;! req.xmlhttp.open("GET", url, true);! req.xmlhttp.send(null);! } else if (window.ActiveXObject) { // IE branch! req.xmlhttp.onreadystatechange = procReqChange;! req.xmlhttp.open("GET", url, true);! req.xmlhttp.send();! }! }! Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 41 Noncommercial-Share Alike 3.0 Unported License
  42. 42. XMLHttpRequest The Hard Way summer school •  Write the callback handler and the function to process the values returned by the call function processReqChange() {! for (var i = 0; i < xmlReqs.length; i++) {! if (xmlReqs[i].type == "busy" ! && xmlReqs[i].xmlhttp.readyState == 4) {! handleResponse(xmlReqs[i].xmlhttp);! xmlReqs[i].type = "ready";! }}}! function handleResponse(req) {! if (req.status == 200) {! var elem = document.getElementById(“someid”)! // ...processing statements go here... ! } else { ... }! }! Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 42 Noncommercial-Share Alike 3.0 Unported License
  43. 43. XMLHttpRequest The Easy Way summer school •  Include a JavaScript framework, like jQuery •  Use it $(“#someid”).get(url,! { param1: value1,! param2: value2 },! handleResponse);! function handleResponse(text,status,reqobj) {! ...! }! Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 43 Noncommercial-Share Alike 3.0 Unported License
  44. 44. summer school JavaScript frameworks Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  45. 45. JavaScript frameworks summer school There are lots to choose from: script.aculo.us Prototype jQuery MochiKit Railto Dojo Toolkit SproutCore midori •  My choice, having tried a few but by no means all of them, is jQuery Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 45 Noncommercial-Share Alike 3.0 Unported License
  46. 46. Why I like jQuery summer school •  Robust •  Concise •  Active developer community •  Large inventory of extensions Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 46 Noncommercial-Share Alike 3.0 Unported License
  47. 47. CSS frameworks summer school •  There are lots of CSS frameworks as well: •  Blueprint •  Baseline CSS •  YUI Grid CSS •  Elements CSS Frameworks •  CleverCSS •  Tripoli CSS Framework Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 47 Noncommercial-Share Alike 3.0 Unported License
  48. 48. summer school Tutorial Session Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  49. 49. Adding interactivity summer school Imagine that you’ve written a web service which accepts a pair of lat/long coordinates and returns a list of photographs contained within that rectangle Write a client application that •  Allows users to enter coordinates •  Validates the coordinates •  Updates the page with a list of matching photographs Licensed under a Creative Commons Attribution- www.xmlsummerschool.com Slide 49 Noncommercial-Share Alike 3.0 Unported License
  50. 50. summer school Any questions? Thank you for your attention Licensed under a Creative Commons Attribution- Noncommercial-Share Alike 3.0 Unported License www.xmlsummerschool.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×