Storytelling within the Web

My last assignment for the week is called Storytelling within the Web worth four stars. I had to take a website and recreate it by hacking.

   

http://weca4.makes.org/goggles/weca4s-remix-of-small-pet-supplies-for-rabbits-ferrets-amp-others-petsmart-

Steps:

1.I went to the webpage Not Digital Truth Telling

2.Clicked on week 9

3.I scrolled down to the section telling stories within the web and clicked on the link storytelling within the web right above the section raw code.

4. Clicked on the X-Ray Goggles link under telling stories within the web, and downloaded the application to my computer.

5.I found the website (petsmart) I wanted to use  and clicked on x-ray goggles.

6.Changed the code in the website and made it into a new website

7. Clicked the P or publish button on x-ray goggles.

 

This assignment was hard but a lot of fun. I realized that changing the text in the website using x-ray goggles was very easy. The hardest part about x-ray goggles was changing the images. It took me quite some time to realize all I needed to do was use x-ray goggles on the image I wanted use and place the code in place of the current images code. I then came across a new problem , I didn’t know how to get most of the images to fit in the space I was given. After looking at a few different pictures I soon found the code to change the images height and length. I choose to use squirrels because UMW has so many squirrels on campus that the squirrels became almost like the campus pets. I enjoyed recreating a website on my own image, and I hope my squirrel webpage amuses you as much it did to me.

 

 

Perfect Engagement Ring

Thinking about getting engaged? You have to check out my friends at Mordor Jewlers. Find this great new ring on their website right here. This particular ring is really hot right now. Get it for only 299.99. A bargain.

I used Etsy because the format is relatively simple. Using the XRay Goggles was really easy to edit pages and it was kind of fun seeing what I could do to change the page.

This was a 4 star assignment that was mandatory this week.

Here are some screenshots of me making my “The One Ring” page.

Screen Shot

 

 

 

 

Ex Ray Goggles screen shot

Assignment #1

My first assignment of the week that I chose to do was an assignment called Find a Digital Tool worth 3 stars. This assignment required you to find an online tool and create a brief tutorial on how it works.

Here is my tutorial on Pixlr:

Pixlr is very similar to Photoshop and can be used for free, pixlr is a good tool to help you create fun pictures, posters, etc. It is a web design app that mainly focuses on image use.

Here is what Pixlr looks like:

Screenshot_2015-10-21-22-59-19-1

1.When you first enter pixlr  it will ask you whether you would like to use pixlr express or pixlr editor, click on pixlr editor.

2. Then pixlr will ask if you would like yo get your image from, I usually choose open an image from my computer because it is easier.

Screenshot_2015-10-21-22-59-19-2

3. Once you have your image up you can start working on the image

4.Make sure whenever you do something to an image all other layers are turned off otherwise the task you wanted to do will happen to all layers. To turn layers on and off click the check marks on the layer box on the left hand side of pixlr:

images

Here a few useful tools in pixlr:

1.This is the lasso tool:it allows you to trace a part of the image and separate it from its background

pixlr-lasso-tool-300x92 (2)

2.This is the cropping tool:This tool is used to crop an image

crop (2)

3.This is the move tool: Used for moving an image where you want it to go

movetool

4.This is the clone stamp tool: This allows you to clone a spot on an image you want to use somewhere else

imgres (2)

5.Here is the eraser tool: It allows you to erase a mistake you made(its the pink button)

images (2)

 

Pixlr is a great tool to use if you want to photo edit without spending money on Photoshop. I use Photoshop for any photo editing I want to do and the two tools I use the most are the image mover and lasso tools.I enjoyed making the tutorial because I have never made one before now. It was interesting figuring put what tools are the most important and what basics to cover.In making the tutorial i had to brush up on my pixlr skills but it helped me learn more about the program in the process. I hope my tutorial was helpful and can create a good bases for you to learn how to use pixlr.

OBS.

Hello Everybody!

This week is all about web assignments and reviewing radio shows! We were required to complete a number of assignments two of which had to equal a total of 6 stars and had to come from the Web Assignments bank.

The Assignment

This assignment is worth 3.5 stars and the exact requirements are: “Find a cool, easy to use digital tool online! Write up a brief tutorial on how to use it, and what it can be used for.”

The Story

I sat there for a few minutes and thought of everything I have used so far. I didn’t want to go discover something new because that might take up a lot of time and there was the possibility that I would find something, try it, and dislike it, in which case I wouldn’t want to recommend it to anybody. I finally decided to give a brief tutorial on OBS which stands for Open Broadcasting Software. I have two main reasons for choosing this. One, it is free and very well made. It allows for simple screen capture but also allows you to customize your recordings and screen in any way you want so that you can actually make really great looking screen capture or game capture videos! Two, it is heavily used for live broadcasting on platforms such as Twitch and to make YouTube videos. Live broadcasting is becoming a huge thing and a part of our culture now. Some people are completely unaware that live broadcasters make a living by having many subscribers and that there are literally million dollar gaming competitions and teams of people who play games professionally. So, if you want to be well prepared for the cyber future we are heading for, it’s important to understand what digital tools people use and how they use them.

The Tutorial

The first thing you would want to do is to download OBS from their website which is linked in the above section. The image below shows what the download page looks likes and you just have to select the proper operating system download for your computer.

Screen Shot 2015-10-25 at 6.08.01 PM

Once you have OBS installed, it’s time to play around with the basics. The image below is what your screen will look like when you first open OBS. It is also the screen where you can start adding some of the things you want. If you look down you will see some options including boxes for “Scenes” and “Sources”. This is where you want to start.

Screen Shot 2015-10-25 at 6.11.34 PM

Click on the “+” sign in the “Sources” box. The sources are what you will be capturing, using as a camera source, and audio source. The menu will give you options for audio, video, screen capture, and even images. If you have a microphone or a webcam, it will come up under your options once you plug it in. The Image below is an example of what your screen looks like once you have selected some sources. Take note, that sources will overlap in the order that you have them added. If you want an image to be behind your webcam screen, you must drag it below the webcam source in the little white box. The beauty of this is that you can resize and moved things around to your liking and with some tweaking, you can make a beautiful screen that includes pictures, text, a recording of what you are doing on your lab top and a video recoding of yourself. Also, at this point you may be wondering “Okay, so that’s the SCENES box all about?” that box simply allows you to make different screen capture creations. Maybe in one you want your image background to be a mountain scene and you want the video recording of yourself in the top left corner, and in the other scene, you want your video recording to be smaller and in the right corner. In this case you will add multiple scenes and customize them and just switch between whatever ones you want when you go live or start recording.

Screen Shot 2015-10-25 at 6.19.47 PM

Next, let’s take a look at some preferences. In the upper left hand corner, click on “OBS” and it will give you a drop down menu. The first thing should say “preferences…” and that’s where you need to click. You will get a whole menu with different aspects of OBS that you can explore and change. “General” will allow you to change the language and theme. “Stream” is where you will set up your live stream if you have a live stream key which you will get once you set up an account with a streaming platform like Twitch.  “Output” is where you can change what location your recordings get saved to and in what format (.mov, .mp4, etc…). “Audio” is something I don’t really touch because I usually do not need to change anything and for simple recordings, you may not need to mess with it. However, if you want to become an OBS expert, I suggest further watching and reading tutorials on what you can do. “Video” allows you to change resolution and frames per second at which you are recording and streaming. Once again, there are options here that you need not change unless you are well versed in video terminology. “Hotkeys” is a great place to set up hotkeys for easy one-click recording and various other adjustments. Finally “Advanced” is where you can set up recording delays ( which may be necessary when streaming). There are other advanced options here as well that you may not need to change unless you are very skilled and know what you are doing.

Screen Shot 2015-10-25 at 6.28.16 PM

Last but not least, below is a quick video of everything I just described. Take a look at it to get the feel of how OBS works!

The Sound of Salesmen

I would do an intro for this entry, but I’m running short on time as is, so I’ll just tell you that this assignment also ballooned to three-and-a-half stars, compared to the plain three it had when I first selected it. Long story short, I have to, quote, “find a cool, easy-to-use digital tool online,” and “write up a brief tutorial on how to use it, and what it can be used for.” In other words, think ABC’s Shark Tank, if it were exclusively made for the people who brought you Napster and Facebook.

Audacity Pitch 1

Today, I’m going to pitch Audacity to you. Now, Audacity is a downloadable audio editor that’s been available for public use since May 28, 2000. It’s main selling point has been two-fold: Not only can you record audio for editing from multiple sources – including directly, if your computer contains the right equipment – but it has also been used in the editing process of whole albums. That’s because of the available use of several editing techniques, such as the standard fade-outs and fade-ins, which are common with most recorded materials; trimming the audio, to cut out any noticeable mistakes; or simply normalizing the audio, entirely, to get rid of any background noises that might interfere with the recording during playback, which also makes Audacity perfect for potential podcast producers.

Audacity Pitch 2

Once your computer is finished downloading both Audacity itself, and the LAME file needed to import MP3s onto it, from your designated “safe” sites, simply record whatever it is you wish to hear. Whether its from a separate source, or by pressing the “Record” button on Audacity, chances are, once its uploaded, you’ll be able to hear it once the playback begins.

Audacity Pitch 3

From there, it’s off to the races you go, as every potential form of sound manipulation is now at your command. From testing the credibility of “backwards audio messaging” rumors with the Reverse feature, to creating your own singing lesson for the local choir with the Change Pitch option, anything goes!

Audacity Pitch 4

For example, if you wanted to sound like you were visiting a cavern, select the audio in full – or parts of it, if you want to take it slow – by typing in the starting, and ending, times of the part you wish to edit on the Selection Start and End/Length bars, conveniently located near the bottom of the screen. Go up to Effect, and choose the “Echo” selection, before pressing the “Play” button on Audacity, to hear the end result for yourself. If you’re satisfied with what you hear, save it as an Audacity file – and, later, as its own MP3 – by going up to “File,” selecting “Save Project As,” and typing in the title of your choosing, before repeating the process once more, this time clicking on “Export Audio” to save your finished project as whatever form of audio you need, including WAV and MP3! If not, just press the “X” button at the top-left corner of the audio file to permanently delete it… unless you happened to save it as its own file before you clicked on that button, which means you can have even more fun with it tomorrow!

Audacity Pitch 5

With that, I earn seven stars, when I only wanted six, for my Web Assignment efforts this week, as well as complete all of the necessary requirements on my checklist.

What’s the Buzz?

Another week is in the books, and another two challenges are completed, as this time, I had to do two Web Assignments worth no less than six stars. Naturally, I chose two three-star tasks to check off this part of my weekly list, but this one managed to have its score balloon to three-and-a-half stars by the time I managed to get everything in order.

To make an embarrassingly long story short, even if I am too late for that, the task I’m referring to is the “BuzzFeed Personality Quiz, which I used to – albeit quickly, due to time constraints – construct a quiz modeled after a favorite anime series of mine.

Based on one of the earliest-known works of Detective Conan creator Gosho Aoyama, Magic Kaito 1412 may have only aired in Japan, starting around this time last year, but I openly enjoy it, even now, as it’s willing to take the tropes we normally associate with the mustache-twirling villains of old, and subverts them, for both dramatic and comedic effects, depending on the situation.

How else could you justify the fact than an aspiring stage illusionist decides to become a jewel thief to solve the mystery of his father’s (supposed) murder; his childhood friend uses a janitor’s mop as a weapon, whenever she gets angry; one of their classmates is a wicked, young witch whose only goal in life is to make every man in the world her slave – with the help of Lucifer as a spirit guide; and another one’s basically Sherlock Holmes, but without the drug addiction? This is what I was looking at with the task before me; it was a chance to see which high school archetype you are… if that school was in the “Land of the Rising Sun,” and your class clown doubled as the “Magician Under the Moonlight.”

The process began with the usual round of paperwork: Log on to BuzzFeed, preferably with my Google+ account; select “Make a Post,” “More” and “Quizzes,” in that order; and then, see what I could do with what the site could provide me. It was practically smooth sailing from that point onwards, as I gave four personality profiles when I was only asked for three, each one connected to one of the main characters in Magic Kaito – the titular phantom thief, Kaito Kuroba; the police inspector’s daughter, Aoko Nakamori; the scarlet temptress, Akako Koizumi; and the son of the superintendent general, Saguru Hakuba.

MK1412 BuzzFeed 1

Admittedly, the toughest part was the construction of the questions, themselves. Again, tying everything I know about Magic Kaito into a personality test was going to be a close call, but I think I made everything work out for the best, right on down to the photo selection for each question, and possible outcome of the test.

MK1412 BuzzFeed 2

The writing process took more time than I expected, but if it wasn’t for last-minute inspiration from the likes of Baggage and The Newlywed Game, as well as the idea to end everything on the biggest potential stealth pun of them all, I wouldn’t have gotten the necessary minimum of six questions needed for the test to be published. To be fair, starting the test off with a question about making the best possible entrance into a party didn’t hurt, either.

MK1412 BuzzFeed 3

Overall, everything worked out for the best, and this first set of stars was well-earned. This is easily my favorite project of the week, and I am more than satisfied with the effort I put into it.

As for the final product, I recommend that you take the test for yourself, here.

Mandaalynnn the Eagle

For my final Web Assignment of the week, I am completing the required assignment Storytelling Within The Web:

From the Spring 2011 ds106 class came the idea of changing up an existing web page to tell a new story” you will be intervening in the code and design of a website of your choice to tell a story. You are not to photoshop the design of the site, but rather intervene in the actual html and CSS of the site—though you can photoshop particular images on the site. Essentially you alter the content of a web page (content, images) to make it tell a new story. Originally we recommended doing this using the Firebug extension in the Firefox browser, which does work, but is unfortunately easy to lose your work. We currently recommend Mozilla Hackasaurus — install the X-Ray Googles in any browser and use it to re-cast the content of any web page. When you blog it, include both a screen capture in your post, but you will also need to upload the web files (HTML and media files) to your own site so it can exist as a stand alone URL. (see our olderFirebug Tutorial) Consider using news sites, social media profiles, product pages, movie review pages etc. The simpler the design of the page, the easier it will be (think Craig’s List).

To be honest, I was completely confused and scared by this assignment, so I saved it until today to complete. However, I found this incredible tutorial created by Daniel Adams, a past DS106 students. He made a video on his blog that is simple and easy to understand, which perfectly explains how to complete the assignment. I completed the assignment given the instruction he provides in the tutorial video.

In honor of Homecoming Weekend and school spirit, I decided to alter the content of my Instagram profile web page to resemble that of our new school mascot, Mandaalynnn the Eagle! Below is the original web page and then the altered webpage.

Screenshot 2015-10-25 at 3.27.43 PM

Screenshot 2015-10-25 at 3.36.42 PM

I made several changes to my original web page in order to achieve the final product. I will list them below:

  1. Change profile image to that on our Mary Wash eagle mascot.
  2. Change username from “mandaalynnn” to “mandaalynnn the eagle”.
  3. Edited the About Me/Bio section to reflect the new name, important dates and info. (1908- Year MWC/UMW was founded; Pro Deo Domo Patria– UMW’s motto; UMW main website)
  4. Alter the number of posts and followers (1908 total posts, and 5,000 followers for the approximate number of undergrad and graduate students that attend UMW).
  5. Change the three most recently posted images to UMW appropriate images (university seal and logo, Lee Hall).

Pack your bags, we’re taking a trip!

This assignment was really simple but I had a lot of fun doing it. For 3.5 stars, the assignment required me to create a Pinterest board and pin to it all things that reflected my dream vacation(s).

pin1

The pins on my vacation board range from Disney World to climbing Mount Kilimanjaro to road-tripping across the United States. I know it’s only a matter of time before I make these dreams into realities. Traveling has always been something I’ve been interested in and I do plan to actually take all the trips I’ve pinned to my Pinterest board.

Some of the specific posts on my Pinterest are:

Travel guides for Disney World which is at the top of my list of dream vacations.

pin3

A guide on how to travel across the United States without spending a lot of money.

pin4

And lastly, a list of parks in Canada that are great vacation spots. I included this one because my dream is to travel outside the country and I figured it’d be start in the country closest to home, our neighbor to the north, Canada.

 

pin5

What I Was Really Hoping for After All the Radio Show Work (Storytelling Within The Web Assignment)

I think it’s safe to say that every DS106 student was fairly relieved when the radio show assignment finally came to a close last week. It was tough work coordinating the work of 6 people over the web to make one cohesive radio show. So when I went to the DS106 web page to check out the assignments for week 9, I was glad to see that it didn’t look like too much work. I’ve taken a few coding courses and I work with computers at work, so messing around with a little html, especially with the help of a tool like X-ray Goggles, didn’t seem too tough. All I had to do was mess around with a website a bit to tell a story? Easy peasy! The question was what site to use as the base for this assignment. There are so many options. I could use a Google search, a newspaper article, a product page, or any other number of things. But as I was reading the DS106 page and thinking about how it would be so much nicer to just sit back and relax all week, my idea came to me. The story I wanted to tell was what I would have loved to see on that assignment page! After completing all the radio show work, it would have been a serious treat to go to the page looking for this week’s assignments only to be told that we were given the week off. So that’s what I did. I  used X-ray Goggles to edit the Week 9 assignment page to something that I would have loved to see this week. It’s ridiculous and doesn’t make much sense, but I figured I’d have some fun with it. So I’ll link to the page below and include some screenshots as well.

Week 9: Don’t Do Anything!

123

4

5

I followed the link on the (real) week 9 assignment page to find the X-ray Goggles tool. To use it, you just have to pin it on your bookmark toolbar, so that’s what I did. Then I went back to the assignment page and got to work. The first thing I changed was the title. Have to set the tone, right? It wouldn’t have made much sense to leave it as “Week 9: Don’t believe anything you read on the web.” Okay, looking back, it actually would have been an okay title considering what comes after it. But “Week 9: Don’t do anything!” was much more straightforward.

I changed the first paragraph from “Stories in/of the web” to “Watch a movie!” I suggested one of the most ridiculous movies I know of and took advantage of the picture spot that was already included in the html code to include a shot from the film. All I had to do was find the image I wanted to use, copy its URL, and then replace the URL saved in the html code of the picture.

I couldn’t figure out how to get rid the the embedded Soundcloud audio, so I decided to work around it. I kept the title of the second section the same and kept the mention of the radio show in the following paragraph. Of course, I changed some of the text to make it suit the page I was creating. The next item on the original page was the table outlining who needed to review which show. I couldn’t get rid of that either, so I just changed it to something ridiculous. I said that I needed help choosing the name of my new dog and changed several of the boxes to have terrible dog names. I actually kept all of the DS106 students’ names because that would have been a lot more unnecessary work. It’s hard coming up with 40 names for a dog, okay?

For the rest of the article, I worked with what was already there or changed it to something else if it really didn’t fit. I included a Joke of the Week section containing one of my favorite images on the web. At the bottom of it all, I changed one of the boxes under “Leave a Reply” to require the punchline to your favorite knock-knock joke.

I considered changing the links along the left hand side of the original page, but it wouldn’t have made much sense, so I left them. I published the new site, copied the source, saved it as a .txt file, changed it to html, and opened it…to find out that all the formatting that was shown in the page I was working on had disappeared. The links on the left-hand side of the page overlapped all of the text. I couldn’t figure out how to change that, so I ended up just deleting them all. Not great because now the page doesn’t look exactly like the original, but oh well. It might be for the better anyway. God forbid somebody stumble upon my page tomorrow and think that they have nothing due.

Etsy sells Everything!

etsysellseverything

Man, Etsy really does sell everything! From homemade baby clothes to human skulls, you can find just about everything on Etsy. And look! They’ll even do a custom order for you!


 

So for our required Storytelling Within the Web assignment, we had to change a site to something that tells a story. I decided to go with the Etsy route (because it’s rather infamous for selling just about anything you could think of). And, based of my recent searches on the site (don’t worry about it), altered the page of a mink skull to be a human skull.

I used the Mozilla X-ray Goggles, which made everything very simple. You really just click on what you want to change, alter it in the little textbox that pops up, and then hit update. Really, changing the web has never seemed so easy.

Here’s the original site (in case you too would like animal skulls to be in your search history forever), and here’s my altered site.

I now know the approximate height and width of an adult human skull!