Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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
– each type has allowed attributes– type may have text content– a type of tag may have child tags
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
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
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
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….
<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>
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>
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)
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!
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); …
moving head horizontallyfunction moveovalh() { headx +=10; if (headx>300) { headx = 0;} var trans = "translate("+String(headx)
+","+String(heady)+ ") scale("+String(scalefactor)+")";
myHead.setAttributeNS(null,"transform",trans); }
changing scaleIn <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);}
General comment
• You may encounter other XML-based applications.
• There are general techniques and/but you also need to learn details of each application.
like…
• Google Maps API or twitter interface: you need to learn the objects– methods– attributes– events
Compare
• … coding with canvas based examplehttp://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!
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.
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
Facial attributes?
• What are possibilities?
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/
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).
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?
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/
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
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."
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/
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.)
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/
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.
