MEDP 150 - Media and Film in a Digital Age

Saturday, December 12, 2015

Study Guides:

Guide:
sarawentworth.com/150/150FinalExamStudy_Guide_FA15.pdf
Slides:
sarawentworth.com/150/Final_slides.pdf

All lecture slides are available on Blackboard.

Web sites and extra credit assignments are due by Sat. December 19th.

We will not have lab that day, this is an online assignment.

Extra credit assignments should be posted to your web site on it's own page and linked to from the home page.

As a reminder, the web sites can be as simple or as complex as you wish to make them.
Design and navigation will be 30% of the overall grade.

• Can I find everything easily?
• Are there any dead ends?
• Are there any broken links?
• Is there continuity in style between pages?

The rest is content (are all of the assignments there, with required text?).

Note:

To link back from your index.html in your narratives folder to your index.html in your medp150 folder:

<a href="../index.html">Home</a>

Friday, December 4, 2015

Dec 4th

Final Websites:

The final website will be 10% of your final grade.

Requirements:

All of the assignments, with required text

User experience: Can I find everything easily? Is everything labeled well? Do all of the links work? Do I get stranded on any pages with no way out?

Design: Is there continuity of design between pages? Are your images of similar widths and heights?
How have you used color and alignment to help the user navigate your site?

I have created two templates using tables and CSS for you to work with.
You can use these for reference, or use them directly by replacing the wireframe images with your own assignments, changing the variables in CSS to suit your needs, etc. Working with other people's code is a good way to learn to program.

Centered
Left-Aligned

Remember, there are several ways to add CSS to your website:
http://www.w3schools.com/css/css_howto.asp

• Directly in the HTML tags (Inline Styles):
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

• In the header (Internal Style Sheet):
<head>
<style>
body {
    background-color: #00FFFF;
}
h1 {
    color: #333333;
    margin-left: 40px;
}
</style>
</head>

• In a linked External Style Sheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
where mystyle.css is a separate document

Colors can be defined by word:
http://www.w3schools.com/tags/ref_colornames.asp
Or by number
http://www.w3schools.com/tags/ref_colorpicker.asp

Saturday, November 21, 2015

Nov 21

Create a web-based non-linear story. For this assignment, you can use photography, iIllustration, montage, or simple text to create a narrative with multiple story paths which can be navigated using hyperlinks. 80% of the imagery and all of the text used must be your own original content.
1) Map out your narrative, using illustrator or simply a pen and paper.
2) Develop the imagery/text for each page.
3) In your MEDP150 folder, create a new folder named narrative. In this new folder, create a new images folder. Save your html file for this project, including a new index.html, directly in the narrative folder. If you are using external style sheets, make a css folder.
4) Post your project to the web, ensuring that all of your links work.

There must be at least three possible endings
There must be multiple ways to get to each one.

Examples:
http://fmundergrad.hunter.cuny.edu/~krioutchkovac/narr/continue.html
http://fmundergrad.hunter.cuny.edu/~deveciogluc/medp150/page13.html
http://slimedaughter.com/games/twine/girlwaste/play.html

In-Class Example:
http://fmundergrad.hunter.cuny.edu/~wentworths/medp150/narrative_example/

Tables:
http://www.lynda.com/HTML-tutorials/Displaying-data/365960/378906-4.html

Intro to CSS
http://www.htmldog.com/guides/css/

Styling tables:
http://www.lynda.com/HTML-tutorials/Styling-borders/365960/378915-4.html

Text style generator:
http://www.cssfontstack.com/arial

Style sheets:
http://www.w3schools.com/css/css_howto.asp

Common CSS topics
http://www.lynda.com/CSS-tutorials/Working-fonts/80436/90611-4.html

Adding Audio:
http://www.w3schools.com/tags/att_audio_autoplay.asp

Saturday, November 14, 2015

UXD, continued

From your wireframes, create a mockup of your app.

It must include separate layers containing:

• guides

• App elements

• interaction labels

Upload to your web site:

• Your (second) 200 word write-up

• exported mock-ups without labels/interactions

• exported mock-ups with labels/interactions

Creating a color palette

http://www.lynda.com/Illustrator-tutorials/Working-color-groups/370378/412101-4.html

Adding master elements

http://www.lynda.com/Illustrator-tutorials/Adding-master-elements/108130/109850-4.html

Importing images

http://www.lynda.com/Illustrator-tutorials/Placing-linked-images-Illustrator/370378/412133-4.html

Clipping masks

http://www.lynda.com/Illustrator-tutorials/Using-clipping-masks/370378/412136-4.html

Saturday, November 7, 2015

Start work on UXD homework Assignment

In the UXD lecture we discussed what interactivity is and various approaches to make these experiences more user friendly. On a basic level UXD considers what the purpose of the interactive experience is, asks who is the audience and how can design thinking make the meeting of these two as productive as possible. For this two part project you will work in groups of three. Each group will create a proof of concept for a smart phone app which they will present in class.

Part 1 will be due on Nov14th and will contain

1) a minimum of 200 words describing the app. This description will include what it does: who its primary users are, what might be particular to the way these user might use technology that might be different from other groups erg. grade school age technology users interact with technology in very specific ways that would be very different from senior citizens and software geared to these demographics are made with this in mind.

2) a wire frame of the main screen of the app. Upload this to your website.

Part 2 will be due on Nov 21st and will contain a visual mock up of the main screen and at least one of the secondary screens of the proposed app. Each group will also include a 200 word description explaining how the way visual and interactive elements would help the user to understand how to use app. Upload this to your website

You are free to develop this project with the imaging software of your choice that was covered in class (photoshop or illustrator)

Use any mobile phone preset in the Photoshop or Illustrator New Document dialog box.

Keep in mind Don Norman’s Design Principles from ‘Design of Everyday Things:’

• Visibility- can I see it?

• Feedback - what is it doing now?

• Affordance - how do I use it?

• Mapping - where am 1 and where can I go?

• Constraint - why can’t I do that?

• Consistency - I think I have seen this before?

and the Gestalt Design Principles:

• Similarity

• Continuation

• Closure

• Proximity

• Figure/Ground

• Symmetry and order

Creating Grids with guidelines:

http://www.lynda.com/Illustrator-tutorials/Defining-grid-your-artboards/368388/374155-4.html

Layer Structure:

http://www.lynda.com/Illustrator-tutorials/Creating-layer-structure-your-wireframe/368388/374153-4.html

Creating App Elements

http://www.lynda.com/Illustrator-tutorials/Developing-screen-template-specific-devices/368388/374154-4.html

UI Placeholders

http://www.lynda.com/Illustrator-tutorials/Creating-common-UI-placeholders/368388/374158-4.html

Friday, October 30, 2015

Oct 30th Lab

Animation:

Create three different animations:

1 straight ahead, exported as a continuous loop

1 pose to pose, exported as a seamless continuous loop (first and last pose identical)

1 typewriter effect, exported so that it only plays once, and then stops

Export each image as an Animated GIF, and upload to your web site, using the <img> tag.

Include 50 words on each image:

What elements and principals of art did you use? What feeling were you attempting to portray, and how did you achieve this?

Class Handout

Theory of Animation:

https://www.youtube.com/watch?v=v8quCbt4C-c

Straight Ahead:
https://www.youtube.com/watch?v=wjLANKAjJQc&feature=youtu.be
Pose to Pose
http://design.tutsplus.com/tutorials/create-flash-animations-entirely-in-illustrator--vector-3254

Saturday, October 24, 2015

Saturday Oct 24th Lab - Midterm Review/Animation

Midterm Review:
All of the Lecture Slides and midterm review questions have been posted to Blackboard

As requested, here are the slides from class.
Don't use this as an excuse to not study the lecture slides and Lynda videos.
This is only a sampling of the types of questions that may be asked. Get to know the lecture slides and lynda videos as well as you can.

Slides

Animation:

Straight Ahead:
https://www.youtube.com/watch?v=wjLANKAjJQc&feature=youtu.be
Pose to Pose
http://design.tutsplus.com/tutorials/create-flash-animations-entirely-in-illustrator--vector-3254