CIS 3810

First up: Your Homework:

WATCH FILM HERE: http://vimeo.com/78979216

Your assignment is to watch the first part of All Watched Over by Machines of Loving Grace.  This is a three-part BBC2 series written and directed by British documentarian Adam Curtis.   Unlike Downloaded, I feel that Curtis’ film has more critics that find the film’s central theses to be flawed and his films laced with fallacies, and I encourage you all to watch the first film in the series with a critical eye.  After watching the film, I want you to take a screenshot of a scene you find interesting, include said image in an html document.  Beneath the screenshot image you are to write 200 words detailing your thoughts on the scene the image is meant to illustrate*.

Remember in our class on Tuesday I told you I want to give you a short homework assignment where you are to concentrate primarily on my expectations of you as academic writers.  I don’t want anyone to be shocked if they get a low score on Midterm Proposal A because they thought their copy/research was secondary to the techniques I’ve been demo-ing in class.  I’m not going to be overly strict, but I want the points made in your commentary to be cohesive/have cohesion.

*BONUS — If you use the following tutorial I’ve crafted in order to make a working animated gif as the central image in your homework I’ll give you BONUS points.  It has to be an animated image from All Watched Over by Machines of Loving Grace.

DEMO 4: The Animated Gif

For today’s demonstration I’m turning the class’ attention to the animated gif.  The animated gif is a fun addition to many html based deliverables, blog posts, and web apps.

Today I’m going to show you how to make this animated gif in particular:

Okay, I’ll admit, this isn’t exactly the most amazing animated gif out there, but it is made up of only six frames.  If you use this technique to create an image with more frames per second you might come away with something as cool as one of these:

Buzzfeed: 15-time-lapse-gifs-that-will-change-the-way-you-see-the-world

Brother Brain: A video game animated gif themed tumblr blog.

Ann Street Studio: Cinemagraphs

So let’s get to it… First we are going to need something to animate.  Personally I find The Internet Archive to be an excellent resource of public domain, copyright-free, and creative-commons films.  For this demo I selected a short film on the erupting volcanoes of Hawaii.

At the foot of the page there is a hyperlink for downloading the .avi file.  This is a video file containing the entire short film.  From there I opened up the film in a piece of software called VLC Player (An open source video player I highly recommend).

Next I took six screenshots from six successive seconds of digital video.  The issue here is that most digital video files do not play a frame of video per second, instead they usually play between 24 and 30 frames per second.  This is apparent when you see the choppiness in my final animated gif illustrated at the beginning of the tutorial.

Now I have a folder with all of my images in it.  I’m going to keep this open in my finder window (Windows Explorer if using a PC).  Now it is time to open Gimp.  I will be opening it and immediately setting it to single window mode for the purposes of this tutorial.

Next I want to open the first of the images I downloaded.  Notice I also changed their names to reflect the appropriate order of the animation.

Now we need to concentrate our attention to the top-right side of our user interface.  This may be located in a different position if you are in a different version of GIMP.  Regardless of where you find the layers panel, it should look similar to this:

What I want to do now is make sure that all of my images that will be necessary to create the animation appear in this panel.  I could create new layers, meticulously open up each image in a new space.  With Mac (not using a windows or linux machine for this tutorial) I can just drag each image file in succession to the top of the first image and I see their thumbnail representations appear in the layers panel.

But in my moving my files around, I created an empty layer and got my layers all out of order.  This is easily fixed, I just drag the images into correct order from within this layers panel, simple as that.

Believe it or not we are almost done.  You don’t believe me, well, check out the animation preview option illustrated here:

Now we could just stop here, export our image, and we would have a working animated gif.  But before we wash our hands of this, how about we give our animated gif some customization.  Maybe I want some images to play longer than others?  This is simple to accomplish, all we have to do is right click on each layer and access the Edit Layer Attributes option:

A box should pop up and here we will write in parenthesis next to the title of each layer the number of milliseconds we want each frame to appear in our animation

GIMP can recognize milliseconds (there are 1000 of them in one second), so most of the images appear for a slightly different amount of time in the context of what the animated gif will display.  Just by putting the time limits into parenthesis next to each titled layer in the layers panel we can give some specific instructions as to how quickly the animated gif will reach conclusion.

Now you can repeat the step where we looked at the animation preview if you are curious as to how your new time declarations affected your animation.

Well, it is time to finish our creation, so simply select FILE>EXPORT AS…

Which should bring up the following menu.  Make sure you select GIF image and declare your file with the .gif extension.

Now you should see the following final menu:

Now just a few adjustments and…

You have just exported your very own animated gif!!!  Congrats.

Now that we’ve gotten familiarized with putting a basic HTML document together, now things should start getting more fun, because we’re going to start filling such documents with content.  We’ve learned how to put images into our HTML documents, but since we don’t want to just build a website where we rip off other people’s image content (since in most instances that is downright illegal!  That just won’t do, you know, assuming you want to show your website off at some point.), we’re going to want something that will allow us to digitally edit, customize, and even create images.  We COULD use Photoshop, but that is so, what’s the word?  That’s right: EXPENSIVE!  And in this class my goal is to introduce you to quality FREE software, because it isn’t always easy to find something with that price tag that is quality.  GIMP is definitely quality, and you can do almost anything you can do in Photoshop with the software package.  So let’s get started…

First and foremost you need to download GIMP:

http://www.gimp.org/

Here are some reference docs/videos that might help you if you get stuck trying to run the software:

Getting Started with GIMP:

http://docs.gimp.org/en/getting-started.html

Installing GIMP on Windows 6 and 7:

https://www.youtube.com/watch?v=QewBtpplRzA

First I’d ask you to play around with it.  I recommend you do this before doing anything else.  See if you can use the pencil or paintbrush tool to draw a stick figure, or use the text tool, and see if you can get some witty saying to display.  Maybe something like “Prof Anderson is incredible!  He would be an incredible MTV VJ.”  Do they still have MTV VJs?  I digress…

Back to reality:  What are some things you might do in an image editor?  Well maybe you, as a budding scholar, want to write some commentary on a documentary film, and you want to customize and display some images to put said commentary into proper context?  Surprise alert: That is exactly what you’ll be doing for the homework due during our next Tuesday class meeting.

HOMEWORK ASSIGNMENT:

Watch Downloaded, perhaps Bill S. Preston Esquire’s cinematic swan song…

http://on.aol.com/video/downloaded—full-documentary-film-517844258

You need to find 3 scenes from this film that you feel you can write some commentary on.  Take 3 screenshots, size each screenshot at a width of 640 pixels and a height of 360 pixels, put the images into an html document, and beneath each screenshot write 200 words (600 words in total), and e-mail me the document and the images.

There are a lot of ways to take a screenshot on your computer.  I’m on a Mac at home, so I can literally just hit [COMMAND]+[SHIFT]+[4].  There are different techniques on Windows and Linux.  For the sake of getting you familiarized with GIMP, I’d ask you try to take a screenshot with this program.

Once you have GIMP open just go up to the top of your screen, find FILE, and beneath file you should see CREATE>, when you move your mouse over the word CREATE> you should see a SCREENSHOT option.  Move your mouse to SCREENSHOT and click.  You should have the video you are watching open at this point (Downloaded in the context of this class), and select “Select a region to grab”.  Now you should be able to hold your left mouse button down, or click your trackpad and hold, and you can select the video screen and let go when you’ve created a box around the image that you want to capture.

Note that my version of Gimp will almost certainly look slightly different than yours, as it is a customized version.

The image will now appear automatically in your GIMP editor window.  Now go back to the top of your computer screen and select the IMAGE option on the top toolbar.  Underneath you will see the CANVAS SIZE option.  Click this and in the WIDTH box write 640 and in the HEIGHT box write 360.

Now your canvas is the correct size, but your image… well… isn’t!  Well we can fix that.  Right click on the image and find the option TOOLS and hover your mouse over this option now move your cursor slightly to the right and select TRANSFORM TOOLS and now once again move your cursor to the right and select the SCALE tool.  Now make sure the four large squares that appear around your image touch the corners of the canvas.  Now in the SCALE interface window that should have appeared hit the SCALE button.  TA DA!  You now have an image that has the required dimensions.

See the 8 bigger boxes surrounding the square? Click and drag those with your mouse to resize the image.

Now you need to save your image.  Go to FILE > EXPORT AS.  Save each image with an extension (the three letters that follow the period in the file name) and write .png.

Now you should have an image that you can use your most non-heinously honed HTML skills to include in your HTML document (Remember make sure that whatever folder you store your image in, you store your html image in that same folder, or else your image will not show up (easily) when you are previewing your work before submission.

EXCELLENT!

So that’s it!  Again we’ll be going over this in class, but remember if you have any trouble JUST E-MAIL ME!  And I’ll walk you through the issues.

BONUS: Anyone that was enjoying the snippets of the Mailer v. Mcluhan video in class here is a link to the full video:

https://www.youtube.com/watch?v=PtzxWR-j1xY

The making of personal computers were a work in progress ever since the 1950s. Beginning with one of the most influential computers, the “Whirlwind” which was developed at Massachusetts Institute of technology  was the first computer to operate in real time. The Whirlwind set  foundation for future computers since it used video displays and later on led to the development of the Semi-Automatic Ground Environment (SAGE) as well business computers.

The future of computers had to be interactive in order for further development to occur. According to John McCarthy, developer of LISP,  computers had to have some sort of logic behind it. The “advice taker” would allow humans to deal with computers “in terms of their own common sense.”

Marshall McLuhan was a great thinker, he coined the idea that the way a message is received and interpreted depends on the medium by which it is conveyed (The medium is the message). Personally, I agree with this and it definitely stood out to me, for e.g. watching a trailer of a video game and actually playing a video game is a completely different experience. This same theory could be applied when trying to reach out to a specific group of people.

Computers have definitely evolved a great deal from the mid 1900’s where they were neither interactive or personal; from only being able to perform one task, to being able to satisfy almost all of its owner’s needs. The computer has become a cultural tool cornerstone in today’s world. This means that every day knowledge about computers are being passed on to the next generation  so they can further develop it to satisfy future needs.

From the idea of the Dynabook which was described as a personal computer for children we have laptops and tablets which make it easy for us to be ultra-mobile witch regards to large amounts of documents etc.

Today, computers are able to adapt to a user’s needs and even help inexperienced users to understand how a device works through use of a graphic user interface. This allows them to visualize and conceptualize things easier resulting in easier interaction with computers that facilitates “learning, discovery and creativity” although according to Manovich what media was did not follow the furtherance of digital development and growth through open source software.

*sorry about the late post, I had some internet issues over the weekend. *

For next Tuesday’s class please read:

pages 55 – 91 in your textbook

Watch the following video

https://www.youtube.com/watch?v=tQg4LquY0uU

You only have to watch from 00:13:00 minutes in to 1:05:00