CMPS 179. UX for Designing 3D, Anima2on, and Interac2on for the Web. Name Professors: Here Reid Swanson & Matt Maclaurin

Transcription

1 CMPS 179 UX for Designing 3D, Anima2on, and Interac2on for the Web Name Professors: Here Reid Swanson & Matt Maclaurin TA: Title Peter Here Mawhorter (Arial)

2 ARIAL CMPS NARROW 179: Today TITLE Wait list Groups Ques/ons? ebay API Raphael

3 CMPS ARIAL 179: One NARROW API To Rule TITLE Them All Client Alerts Shopping Finding

4 CMPS ARIAL 179: NARROW Shopping TITLE API Useful FindPopularItems FindPopularSearches Somewhat Useful GetItemStatus Decep/vely Not Useful GetUserProfile

5 ARIAL CMPS NARROW 179: Finding TITLE API Find all items (by keyword) that sold through auc/on on October 31, 2012 with at least 2 bids that ended in a sale

6 ARIAL CMPS NARROW 179: Finding TITLE API Find all items (by keyword) that sold through auc/on on October 31, 2012 with at least 2 bids that ended in a sale // Filter the results url += "&itemfilter(0).name=endtimefrom"; url += "&itemfilter(0).value=" + fromdate; url += "&itemfilter(1).name=endtimeto"; url += "&itemfilter(1).value=" + todate; url += "&itemfilter(2).name=listingtype"; url += "&itemfilter(2).value=auction"; url += "&itemfilter(3).name=minbids"; url += "&itemfilter(3).value=2"; url += "&itemfilter(4).name=solditemsonly"; url += "&itemfilter(4).value=true"; hqp://developer.ebay.com/devzone/finding/callref/extra/fndcmpltditmsrqst.tmfltr.nm.html

7 CMPS ARIAL 179: NARROW Assignment TITLE 1 hqp:// the- facebook- offering- compares.html

8 CMPS ARIAL 179: NARROW Assignment TITLE 1 hqp:// retail- sales.html

9 CMPS ARIAL 179: NARROW Vector Graphics TITLE

10 CMPS ARIAL 179: NARROW Vector Graphics TITLE

11 CMPS ARIAL 179: NARROW Vector Graphics TITLE 600px 300px 150px SVG ~13KB ~13KB ~13KB PNG ~25KB ~66KB ~156KB

12 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 <svg xmlns=" version="1.1"> <rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;" /> </svg>

13 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 <svg xmlns=" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

14 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 <svg xmlns=" version="1.1"> <line x1="0" y1="0" x2="200" y2="200 style="stroke:rgb(255,0,0);stroke-width:2"/> </svg>

15 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 <svg xmlns=" version="1.1"> <polygon points="200,10 250, ,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>

16 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 <svg xmlns=" version="1.1"> <path d="m150 0 L L Z" /> </svg>

17 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 <svg xmlns=" version="1.1"> <path d="m q " stroke="blue" stroke-width="5" fill="none" /> </svg> hqp://

18 CMPS ARIAL 179: NARROW SVG in TITLE HTML5 Transforms

19 ARIAL CMPS NARROW 179: Raphael TITLE

20 ARIAL CMPS NARROW 179: Raphael TITLE Wraps SVG commands in an OO framework Basic shapes, paths, curves Styles Anima/ons Access via the DOM Event handlers Extend via simple plugin mechanism

21 ARIAL CMPS NARROW 179: Resources TITLE Raphael home page hqp://net.tutsplus.com/tutorials/javascript- ajax/ an- introduc/on- to- the- raphael- js- library/ Some simple pens hqp://codepen.io/reidswanson/pen/efprb hqp://codepen.io/reidswanson/pen/bizyf hqp://codepen.io/reidswanson/pen/hqzbb hqp://codepen.io/reidswanson/pen/psbdl hqp://codepen.io/reidswanson/pen/aqkjd Raphael documenta/on hqp://raphaeljs.com/reference.html Will post graph code