1 / 29

Advanced Topics

Advanced Topics. SVG. Facial Recognition. Filter bubble and auto-complete. Homework: Catchup. Presentations (for some), Final review. XML. eXtended Markup Language General format in which people (organizations) agree on uses text and tags tags have types and

varuna
Download Presentation

Advanced Topics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Topics SVG. Facial Recognition. Filter bubble and auto-complete. Homework: Catchup. Presentations (for some), Final review

  2. XML eXtended Markup Language • General format in which people (organizations) agree on uses • text and tags • tags have types and • each type has allowed attributes • type may have text content • a type of tag may have child tags

  3. Scalar Vector Graphics • application of XML • standard independent of HTML • defines shapes • can be modified by coding • may produce better results and easier than drawing on canvas • You can research possibilities

  4. JavaScript support Use general methods such as • document.getElementById • document.getElementsByTagName returns an array • somenode.childNodes returns a NodeList of all the child nodes of somenode • somenode.nextSibling returns the next sibling node

  5. SVG • (using the tree-like structure of any XML), can be named parts and subparts • primitives include circle, ellipse, polygon, rect, line, path • path includes ways to produce arcs and Bezier curves • primitive text • can apply transformations such as translate in the XML or with code • topmost tag is <svg …> • fill versus stroke

  6. Scalar Vector Graphics • Applicationshttp://faculty.purchase.edu/jeanine.meyer/html5/html5logoscalesvg.html for the HTML5 Logo and to http://faculty.purchase.edu/jeanine.meyer/html5/littlejoesvg2.html for the cartoon. • Note: you can do better….

  7. <svg id="wholesvg" height="600" width="800" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <text x="45" y="60" font-family="'Gill Sans Ultra Bold', sans-serif"; font-size="54" >HTML</text> <g id="shield" transform="translate(0,80)"> <polygon points="39 250, 17 0, 262 0, 239 250, 139 278" fill="#E34C26"; /> <polygon points="139 257, 220 234, 239 20, 139 20" fill="#F06529"; /> <polygon points="139 113, 98 113, 96 82, 139 82, 139 51, 62 51, 70 144, 139 144" fill=#EBEBEB"; /> <polygon points="139 193, 105 184, 103 159, 72 159, 76 207, 139 225" fill="#EBEBEB"; /> <polygon points="139 113, 139 144, 177 144, 173 184, 139 193, 139 225, 202 207, 210 113" fill= "#FFFFFF"; /> <polygon points="139 51, 139 82, 213 82, 216 51" fill="#FFFFFF";/> </g> </g> </svg>

  8. My peanut shaped head: note 3rd circle erases some lines <svg id="place" height="400" width="600"> <g id="head"> <circle id="upper" cx="60" cy="100" r="50" fill="tan" stroke="black"/> <circle id="lower" cx="60" cy="154" r="50" fill="tan" stroke="black"/> <circle id="middle" cx="60" cy="125" r="40" fill="tan" stroke="transparent"/> </g> </svg>

  9. Dynamic SVG possibility • to change SVG elements using code • to create new SVG elements using code • I do this to scale HTML5 logo, add features to the head (namely the eyes, nose and mouth and the hair), move head (including any added elements)

  10. Method for changing attributes • setAttributeNS(namespace, attribute, value) • the namespace parameter can be null, which seems to mean a default namespace. It works for these examples!

  11. myLeftEye = document.createElementNS(svgNS,"ellipse"); … myLeftEye.setAttributeNS(null,"id","myLeftEye"); myLeftEye.setAttributeNS(null,"fill","blue"); myLeftEye.setAttributeNS(null,"stroke","black"); … myLeftEye.setAttributeNS(null,"cx",leftx); myLeftEye.setAttributeNS(null,"cy",eyey); myLeftEye.setAttributeNS(null,"rx",ex); myLeftEye.setAttributeNS(null,"ry",ey); myHead.appendChild(myLeftEye); …

  12. moving head horizontally function moveovalh() { headx +=10; if (headx>300) { headx = 0;} var trans = "translate("+String(headx)+","+String(heady)+ ") scale("+String(scalefactor)+")"; myHead.setAttributeNS(null,"transform",trans); }

  13. changing scale In <body> Head scale <input type="range" onChange="changescale(this.value)" min="10" max="300" value="100"/> In <script> function changescale(val) { scalefactor = val/100; var trans = "translate("+String(headx)+","+String(heady)+") scale("+String(scalefactor)+")"; myHead.setAttributeNS(null,"transform",trans); }

  14. General comment • You may encounter other XML-based applications. • There are general techniques and/but you also need to learn details of each application.

  15. like… • Google Maps API or twitter interface: you need to learn the objects • methods • attributes • events

  16. Compare • … coding with canvas based example http://faculty.purchase.edu/jeanine.meyer/html5/html5logoscale.html Do research for comparisons in terms of space and time: many articles, but still not settled to me. Learn both!

  17. Facial Recognition • One approach is to define a set of attributes • Data may be termed a signature or signature vector or … • May be important to have factors that are independent of size • for example, ratio of space between eyes to distance from center of left eye to right eye • Match faces by matching vectors or calculating distance between vectors • so non-numerical attributes need way of determining distance • may be weighting: certain factors are more important than others.

  18. Discovery approach • Define a large number of attributes and • experiment with groups of pictures of the same person • to see what attributes produce the best matches

  19. Facial attributes? • What are possibilities?

  20. Filter bubble • Term coined by Eli Pariser at a TED talk: different Web applications/programs [attempt to] guess what you want to find out, perhaps using auto-complete, based on the programs information about you… • http://www.thefilterbubble.com/

  21. Example given… • One person Googles Egypt and gets as the list of sites news about Arab Spring • Another person gets information on tourist travel to Egypt • … • Note: original Google produced one list, ordered by its page-rank algorithm that APPEARED to boost better (?) sites, sites that OTHER sites pointed to as being that keyword(s).

  22. More • Facebook (and others) take view that your friends are best source of information. • Google's Search plus Your World boosts information already on your computer as best source of information • When is this true? • When is it not true?

  23. Filters based on • past behavior • personal information • current location • ??? Maybe even before you ask!http://www.technologyreview.com/news/507451/how-google-plans-to-find-the-ungoogleable/

  24. Real-time bidding • Advertisers (that is, people wanting to place display ads to get the biggest return) contract with certain companies (Google, FaceBook, BlueKai, others) to place an ad to a specific audience • In some cases, the advertiser offers to pay a specific amount and the intermediary holds an auction and places the ad of the winner. • 12% of display ads this year. Expected to go to 34% in 2017 • http://www.nytimes.com/2012/12/02/magazine/who-do-online-advertisers-think-you-are.html?pagewanted=all

  25. Targeted marketing • For the companies (Google, FaceBook, etc.) "I am not the consumer—I am the product, waiting to be sold to advertisers. Inevitably, some people will be considered more valuable than others, and they will live in different virtual worlds as a result."

  26. Issues • There is shopping vs. research vs. news • This is [somewhat] independent of the bubble we may put ourselves in for getting news and opinions. • Private (to yourself): did you vote in line with your demographic? • Still and again, call for a Do Not Track system: industry set up a system so people can opt out • some would prefer system requiring users to opt in! • Visit bluekai: http://www.bluekai.com/

  27. Experiment • computer on podium (to which I signed in, but I can choose whether or not to sign into Google) • anyone in class with laptop or tablet or phone • What should we look up? • Egypt • HTML5 • Anna Karenina • ?? • Visit bluekai to see existing data. (May not be much, but do their exercise.)

  28. News items • Predictions from Georgia Tech on cyber threats:http://www.gatech.edu/newsroom/release.html?nid=170981 • Interview on future of computer science: http://www.engr.uky.edu/news/2012/11/the-future-of-computer-science-an-interview-with-ken-calvert-and-jim-griffioen/

  29. Homework! • Use SVG and create an application that draws 3 red circles, different sizes on the screen and provides a button to change all circles to blue (or application of similar complexity) OR • Do experiments (you and someone else) to see if Google or Bing or something else produces different results. Check out bluekai (note: this is just one company.) OR • Read the two news stories, summarize INCLUDING terms used in class. Offer your own opinions.

More Related