Project 6 pt 1/3

Posted on by 
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
      .site {
        float:left;
      }

      iframe {
        float:left;
        margin-bottom:30px;
        height:800px;
        width:700px;
      }
    </style>
<iframe src="http://www.foxnews.com/">
  <p>Your browser does not support iframes.</p>
</iframe>
<iframe src="https://en.wikipedia.org/wiki/Donald_Trump">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Project 6: MASHUP

Posted on by

Youtube Multiplier Mashups:

  1. http://www.youtubemultiplier.com/5acbd96cd84a3-jurassic-park-evolution.php (Comparing the “welcome to jurassic park scene” with the new and old movie, showing how different yet similar they are)
  2. http://www.youtubemultiplier.com/5acbdae9dbc96-uptown-funk-ft-alvin-and-the-chipmunks.php (A video mashup of Bruno Mars Uptown Funk music video with the Alvin and the Chipmunks Uptown Funk video and audio, really funny to watch)

HTML mashups:

3. https://codepen.io/jessglasson/pen/NYoqPJ (“A Dads Dream” webpages of stock market, NYTimes, sports, and weather all next to each other as my mashup)

4. https://codepen.io/jessglasson/pen/oqmXjG (“Bookworm”: a dictionary and thesaurus webpage next to each other, perfect tool for writing papers)

Project 0 Week 10

Posted on by

Facebook perhaps has one of the worst tagging systems I have ever encountered.  Currently I am still coming up with problems when I try to tag people who I am not friends with.  I want people who are in my pictures to be able to tag themselves.  For some reason permissions for that is not allowed, however not only is it not allowed for other people, I can’t do it either.  How in the world is it that a person can’t edit nor tag their own album?  How do I not have permission to tag my own album?  At first, I was thinking perhaps it has to deal with the permissions of other peoples accounts, however they were able to do it with other photos.  Thus, I checked under account and settings and timeline and tagging where a lot of people are saying to turn off review tags.  Well my review tags has always been turned off though.  This is seriously just so frustrating to me.  Not only do I have issues with this but I had issues earlier with simply uploading the photos as facebook as I was initially trying to upload the album onto the page I was sharing it with but it was only uploading small amounts of the photos in my album, it only worked once I decided to upload it on my own account and share it to the page.  I assume perhaps that’s where the problem lies, but this button stating you don’t have permission to add tags on to your own album should not exist.  If it’s your album and you are logged in to your account you should always have permissions to change it.  Meanwhile, I can upload all of this on flickr in very little time and be able to easily edit in tags and share to other people.

Project 6

Posted on by

http://www.youtubemultiplier.com/5acbacd46cc2a-eating-on-tv-with-guy-and-gordon.phphttp://www.youtubemultiplier.com/5acbaf4b371bd-mcconaughey-is-weird-as-hell.php

HTML Mashup 1

<!DOCTYPE html>
<html>
<head>
<body>
<div class=”site”><iframe src=https://www.nestle.com/aboutus width=”600″ height=”300″></iframe></div>
<pre>
</pre>
<div class=”site”><iframe src=https://splinternews.com/free-water-bottles-will-no-longer-be-provided-to-flint-1825094963 width=”600″ height=”300″></iframe></div>
<pre>
</body>
</head>
</html>

 

HTML Mashup 2

<html>
<head>
<body>
<div class=”site”><iframe src=http://www.foxnews.com/tech/2018/04/09/new-foam-armor-for-tanks-can-pulverize-enemies.html width=”600″ height=”300″></iframe></div>
<pre>
</pre>
<div class=”site”><iframe src=https://www.theguardian.com/us-news/2018/mar/24/washington-march-for-our-lives-gun-violence width=”600″ height=”300″></iframe></div>
<pre>
</body>
</head>
</html>

 

Project 0 Week 10

Posted on by

When clicking through all of my subscriptions to clear the little number that’s usually to the left on YouTube, I ended up on Markiplier’s channel and saw he uploaded a video about his dog. I literally only clicked the video because it was about dogs, and I was super surprised to see that it was trending. Even more surprising to me was at the time of me watching this video, the video had been uploaded 4 days ago and it was still somehow trending. The whole thing, even though it wasn’t a big deal, made me think about how YouTube works and what videos YouTube cares about. Markiplier has a lot of subscribers so it’s more likely he would be trending, but the trending videos I normally see are music videos or movie trailers so I still thought it was strange. I thought maybe because the video was about a cute animal it might get it more views to push it into trending. Even then, I wonder how well the video did prior to me watching it. Had it been trending for the enitre 4 days? How does trending work? I also think the whole thing is funny because his dog was in the video less than half of the time, and the rest of the video was him recommending other videos that she was in to the viewers to go watch. I’m not trying to like call Markiplier out on promoting himself or anything, especially because the video isn’t that long so of course he’s just gonna say what he has to say, but it’s still weird how this video ended up trending when it’s supposed to be about the dog but the video itself is mostly telling viewers to watch other videos about the dog.

Observe 4/9

Posted on by

So for this week, I experienced something that I never have experienced before in my life: I was unable to access something on the internet because it wasn’t available in my country. Maybe that says something about how America-centric my world view is, but I think It is also interesting that the idea of country specific access is still a thing in this day and age. I know that some countries have some websites blocked for political reasons; for example many American websites are blocked in China because they don’t want their people to admire the western lifestyle, they want them to focus solely on nationalistic and communistic ideals. But for more democratic countries in the world, why are things not available in every country that is able to access the website itself? I think of the internet as being this “locationless medium”, it exists in cyberspace and shouldn’t be limited by any physical location. The world wide web extends across the world, so why can’t I access all the things on it? Is it a technical limitation that may be solved in the coming years? Or is it an exclusivity thing, limiting some access only to IP addresses from certain countries? I don’t know myself, but it would be interesting to find out.

Observe 6 – option 1

Posted on by

Usually I kind of struggle to find a subject to do an Observe on, but this week I knew immediately.

On Thursday, I got a Google News notification on my phone; in the past, these notifications have usually been about political headlines (which is a nice way of saying that Google occasionally lets me know when Donald Trump does something stupid). This notification informed me that filmmaker David Lynch had released a game called “David Lynch Teaches Typing.”

My first question was why google thought I’d be interested in that. I know I haven’t done any recent searches on Lynch, or typing, or even computer games.

My only guess is that Google knows I’m into Nine Inch Nails, and that the group has collaborated with Lynch multiple times in the past. I guess? Honestly, this one’s beyond me. The game itself is a topic for another day, and deserves to be the topic of its own Observe.

Observe 5 – option 1

Posted on by

I ended up watching a lot of TV on Amazon Prime over the weekend, and I noticed a couple of new things. The first was that sometimes there’s an ad before an episode begins, which looks like this:

When you move your cursor, a tiny little button with the word “Skip” in dark gray text appears in the lower right hand corner:

Clicking the button skips the ad and takes you straight to the actual content. . . but you can only click it if you can see it, and Amazon makes it really hard to see. I couldn’t see it in the screenshot even when I turned my brightness up all the way. This is, undoubtedly, because Amazon doesn’t want you to skip the ad. In fact, you don’t even know it’s an option unless you happen to move your cursor around. Jeez.

code for mitch and kathleen

Posted on by 
<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }

    body {
        font-size:180%;
        font-family:"Open Sans";
    }

    .dot {
      position:absolute;
      height:6px;
      width:6px;
      background-color:black;
      border-radius:50%;
    }
  </style>

  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();

  var randomColor = Math.floor(Math.random() * 128);
  
// config here

  firebase.initializeApp(config);

  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");
  var boxLocation = db.ref("boxLocation");
  var mydir = db.ref("dir");
  var userCount = db.ref("userCount");
  var seenUserCount = 0;


  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];

    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    //newDot.css("background-color",100);
    j('#container').append(newDot);
  });

  erase.on('value',function() {
    j('.dot').remove();
  });

  boxLocation.on('value',function(dataSnapshot) {
    var position = dataSnapshot.val();
    j('#log').text(position);

  });

  userCount.on('value',function() {
    seenUserCount++;
    if(seenUserCount > 2) seenUserCount = true; 
    console.log("suc: "+seenUserCount);
  });

  // runs when the page is fully loaded
  j(document).ready(function() {
    userCount.transaction(function(current) {
      return current+1;
    });

    j(document).keydown(function(e) {
      var direction;

      console.log("WHAT");
      if(e.keyCode == 37) direction = "left";
      else if(e.keyCode == 39) direction = "right";

      console.log(direction);
      
      mydir.transaction(function(current) {
        return direction; 
      });



    });

      j('body').click(synth1);

    function synth1() {
      console.log("here");
      if(seenUserCount == true) return;
      else { console.log("play sound"); }
    }


    j(document).mousemove(function(e) {
      var position = e.pageX+","+e.pageY;


      dot.transaction(function() {
        return position;
      });

    });
  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>

</body>
</html>

Click Confetti HTML

Posted on by 
 
<!DOCTYPE html>
<head>
  <title>Click Confetti</title>
 
  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }
 
    body {
        font-size:180%;
        font-family:"Open Sans";
    }
 
    .dot {
      position:absolute;
      height:30px;
      width:30px;
      background-color:black;
      border-radius:50%;
      opacity: 0.5;
    }
  </style>
 
  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body>
 
<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();
 
  function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
   

  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCdUZeJTXzbqEXfVzskUFOoY-Mqh9TnyvU",
    authDomain: "click-function-test.firebaseapp.com",
    databaseURL: "https://click-function-test.firebaseio.com",
    projectId: "click-function-test",
    storageBucket: "click-function-test.appspot.com",
    messagingSenderId: "257165968755"
  };

 
  firebase.initializeApp(config);
 
  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");
 
  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];
 
    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    newDot.css("background-color",getRandomColor);
    j('#container').append(newDot);
  });
 
  erase.on('value',function() {
    j('.dot').remove();
  });
 
 
  // runs when the page is fully loaded
  j(document).ready(function() {
    j(document).keypress(function() {
      erase.set(Math.random());
    });
 
 
 
    j(document).click(function(e) {
      var position = e.pageX+","+e.pageY;
 
      dot.transaction(function() {
        return position;
      });
 
    });
  });
 
 
</script>
 
  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>
 
</body>
</html>

Sample Drawing on Firebase Code

Posted on by 
<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }

    body {
        font-size:180%;
        font-family:"Open Sans";
    }

    .dot {
      position:absolute;
      height:6px;
      width:6px;
      background-color:black;
      border-radius:50%;
    }
  </style>

  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();

  var randomColor = Math.floor(Math.random() * 128);
  
  // PUT YOUR CONFIG HERE

  firebase.initializeApp(config);

  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");

  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];

    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    //newDot.css("background-color",100);
    j('#container').append(newDot);
  });

  erase.on('value',function() {
    j('.dot').remove();
  });


  // runs when the page is fully loaded
  j(document).ready(function() {
    j(document).keypress(function() {
      erase.set(Math.random());
    });



    j(document).mousemove(function(e) {
      var position = e.pageX+","+e.pageY;

      dot.transaction(function() {
        return position;
      });

    });
  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>

</body>
</html>

Project 7 Ideas

Posted on by
  • Display the difference in time between the time you’ve spent on the page and the time the person who’s been on the page the longest has been on the page. Changes once that oldest person leaves, so eventually the time difference would be 0sec if you became the oldest person. –> place in line.
  • You have your own slider (like for volume — 1-100 scale) and you get a celebratory notification if your spot on the slider is the same as your partner’s spot on the slider.
  • A new chair icon placed at the user’s choice in a designated space for the number of people “sitting in a room with you” –> virtual copresence, dibs on your spot.
  • “Warmer/colder search” like Marco Polo –> color changes from red to blue shades as your position in a circle moves closer to another person’s position. Hide and seek to the mystery location of your partner.
  • Dense grid of “lights” like an LED grid –> clicking on a spot turns it on and off, creates a rudimentary pixelated image.
  • Light increases brightness/radius with the more people who join a page –> would hit max diameter before max opacity. Every person who enters the space brings their own “candle”.

Project 7: Ideas (to interact (again))

Posted on by
  • only happy/sad buttons, changes background,
  • happy/sad buttons, one gets the buttons, one gets the background color
  • only get a minute to post something, never ending story, another view of whole story
  • mad lib style, one writes and marks nouns/adjectives/verbs, other fills in verbs
  • can’t double text, can’t speak until spoken to
  • setting up prisoner’s dilemma
  • noise button, must press button along with other person to stop noise
  • background changes color depending on the amount of users on page
  • post things, not people on social media

Jayson & Rachel Project 7 Ideas

Posted on by

What are its inputs and outputs? It’s mechanisms of communication?

Resist the desire to grow the system—focus on one single exchange.

What does your system say about networked communication?

How does limiting interaction to one pathway expand the potential of that pathway over its previous usefulness (e.g. as one of many mechanisms of interaction)?

1. remove login/signup function
2. remove/obscure usernames
3. remove date and/or time of posts
4. implementing expiration date on people you follow – based on how active you are with said person on website
5. when accessing certain articles/posts on website (i.e political or government news or editorials) you are required to answer a basic or common sense question before you are allowed to share, like or comment on said article/post
6. charge people a certain amount of money depending how active they are on site
7. a counter that keeps track of every “__” that appears on your newsfeed
8. an account that gets deleted if not accessed once every two weeks – to prevent it from being deleted (if not accessed within two weeks), you must pay a fine that increases each time you encounter said fine.

Project 7 Ideas

Posted on by

dots where you click that other people can see

limited character one time messenger

Counter when you click something

Every time you share something your counter would go up

website that changes pictures of dogs whenever you click

only emoji communication

Every time you like something, the background color changes

text box that is like a mini game with one other person from friend list

Project 7 Ideas-Chase&Maggie

Posted on by
  1. Keeping the ball afloat game-multiple users pressing a button to keep a ball in the air and see how long they can keep it up.
  2. Two piles, pushing a button will remove one item from a pile and add it to the other. Users decide how they want to balance the piles.
  3. Chat function-create a story: two users make a story one word at a time alternating turns, you can view the stories and vote for which you like.
  4. Blind Mad Libs- people log onto the site and are presented with a box to input a verb, adjective, adverb, noun, etc. Then after all the blanks had been filled they can view the story with what other people have inputted.
  5. Similar to idea two, large group of people on land and you can press a button to put them on a boat. If you put too many on the boat it sinks and resets.
  6. The screen is a color, you control the amount of red, green, blue in the image by pressing buttons, as well as the tint/shade.
  7. Virtual garden: people water the plants and provide sunlight. Plants die if they are neglected for too long.
  8. Snake game: multiple people controlling it a la twitch plays pokemon, but much harder.