Class on Thursday 12.12.13

Today there is no lecture. We’re just going to spend the day working on our projects and I will come around and help those who ask for it.

A few reminders about the remainder of the semester

Friday 12.13: First Draft of site due

It doesn’t have to be the whole site. Just turn in what you  have. Turn it in by putting your files on the server and putting the URL in the Blackboard assignment (the assignment will be up on Blackboard shortly).

Tuesday 12.17: Optional Day

This is another day to work on your projects. It is optional, attendance is not required

Thursday 12.19 Final Projects Due

Attendance is mandatory. You will turn in and present your projects on Thursday.

 

Typography

Here are some resources I Mentioned on Typography and Google Web Fonts today:

Class on Tuesday 12.10.13 [Starting Late]

My train is delayed today so I will be getting to class about 10-15min late (I hope it doesn’t get delayed further, but I will update this if it does). 

This week we are working on your projects. I’m going to spend the time in class letting you all work on your projects and helping you out. I will stick around after class in the hallway on the 10th floor for 20-30 minutes to help make up for time and help out anyone I didn’t get a chance to talk with during class.

Class on 11.21.13 Thursday

Class on 11.21.13

Today we are going to start the class on project documentation. Then go back to looking at CSS layouts with some of the files from last class.

Midterm Projects

I have graded all that were turned in. I had an error with my feedback file, so I have to redo some of that. I hope to have it corrected by tomorrow morning.

Project Documentation

Project Proposal

The normal process is that the client comes to you with a brief or a request for proposal that outlines what kind of site they like. This can range from very formal process to just someone telling you they want you to make a site, talking to you about it and shaking hands on doing the project.

In this class you have the project requirements instead. Because a lot of the requirements are technical and not too typical for a project, I’m going to outline a few of the major ones you should consider when planning what your project is going to be about.

  • Pages: At least 4 pages
  • Content must be about a person, place, thing or idea. And it should be something specific.
  • Content must be different than the midterm. It’s OK to have a similar subject as long as the content changes.
  • You must attribute all media used: text, images, audio, video. Even if you create that media yourself. So when choosing your topic, choose something where you can find media.
  • Must use at least one audio or video element. The element must have controls and not start playing automatically, and it must make sense to include. It should either be directly related to the topic or, in the case of music, help to set the atmosphere you want for the project.
  • The design of this project will be more heavily graded, with more emphasis on the visual design things like alignment, typography etc.

After knowing what your site is about you have to plan

  1. Who will the audience be? Why will they want to see the site?
  2. What pages will be on the site
  3. What content will be on each page
  4. What the design will be like including layout of content and the visual appeal/atmosphere

To document your ideas for the above you will create a proposal with

  • A written description that address
    1. The topic of your site
    2. Your audience, who they are and why they want to visit your site
    3. A description of what you want the design to look like
  • A Sitemap diagramp to show the pages
  • Wireframe diagrams for each page

Sitemaps

http://webdesign.blogs.peopleio.net/planning/sitemap/
These are diagrams where each box represents a page on the site. It allows you to quickly show what pages will be on the site

Tool:
http://slickplan.com/

Wireframes

http://webdesign.blogs.peopleio.net/planning/wireframe/
These are detailed diagrams. One for each page in the Sitemap.

Tools:
Photoshop

https://marvelapp.com/

- this lets you link images and psd you have in dropbox and then turn them into clickable mockups quickly
- free, need Dropbox account

https://moqups.com

https://wireframe.cc

Mockingbird: https://gomockingbird.com/
- web based, 1 free with 10 pages then monthly

Pencil

http://pencil.evolus.vn/

free and OS, both desktop and Firefox based versions

http://wireframe.talltree.us/default.asp

http://www.mockflow.com/

Plan for rest of the semester

I have a page up about that:

CSS Layout.

We will contiue work from last class

Blank Page

Below is the markup for a blank page that inlcudes link to a css file. Everything that you want people to see needs to go in the <body></body> tags


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Your Title: appears in Tab on top of page</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h1>Main Site Heading (title)</h1>
</body>
</html>

Class on 11.19.13

Layout files from in class SampleLayouts_inClass.zip

This week we are going to take another look at CSS Layouts and then on Thursday do some of the prep requirements for the Final Project.

Final Project Overview

On Thursday we will go over some more details of the final but today we are going to look at the major requirements:

  • Pages: At least 4 pages
  • Content must be different than the midterm.
  • You must attribute all media used: text, images, audio, video. Even if you create that media yourself.
  • Must use at least one audio or video element. The element must have controls and not start playing automatically
  • The SAME header must be on each page. Same text in the heading, same html
  • The same navigation must be on each page. The navigation must be in a nav element and an unordered list in that.
  • The same footer must be on each page.
  • The layout on each page must be at least two columns. It can change slightly from page to page, but the header, nav and footer need to stay the same.
  • The homepage must be named index.html
  • You must use a reset.css stylesheet

On Thursday we will go over some of the documentation requirements like sitemaps, wireframes, proposals and the creative brief.

Layout

Download these files. We will go over them in detail in class.

SampleLayouts.zip

box-sizing: border-box

This is something that make it easier to calculate layouts. We’ll look at the files below and also the Layout examples for how it works.

border-box.zip

HTML5Shiv

https://code.google.com/p/html5shiv/
Older browsers don’t do HTML5. We will look at how we uses this in the Layout files to help it work.

Reset.css

For now it is easiest to just use Eric Meyer’s CSS Reset. Visit the link below and do a save as in your browser and save to your css folder.
http://meyerweb.com/eric/tools/css/reset/reset.css

Class on 11.12.13 Digital Video Introduction

The goal for today is for you to learn some of the science of human vision and the history of film and video so that you understand the context for some of the various technical terms and ideas you will need to be able to identify and use video in your web pages.

Technical Terminology

Without context these are hard to grasp. They’re listed here and then we will cover them again in context.

Persistence of Vision
Beta Movement
Phi Phenomenon
Zoetrope
Frame Rate
Frames Per Second (FPS)
Cathode Ray Tube (CRT)
Interlaced
Progressive Scan
LCD

Human Vision

Our eyes alone are not responsible for vision. They send the signals of what light is out there but it is up to our brains to interpret those signals. Film and video are basically based on understanding this relationship and using it to trick our brains into thinking a bunch of still images are actually moving.

Phi Phenomenon
http://andreacollo.wordpress.com/2013/09/30/a-weird-example-of-persistence-of-vision/
http://en.wikipedia.org/wiki/Phi_phenomenon
We are going to visit this link. But to prepare, when you go to it there is a box with two images. Focus your eyes in the middle between the images and not on each image. Watch for a while and remember what the faces look like. Then cover one side with your hand and watch again. What is the difference?

This illustrates the Phi Phenomenon where our eyes, especially in our peripheral vision (the edges of vision not what is centered in focus), try to blend separate images into one to smooth movement.

Beta Movement
http://en.wikipedia.org/wiki/Beta_movement
This has to do with our brains thinking that when what looks like the same thing appears in different locations along a path we see it as movement along a path.

Persistence of Vision
http://en.wikipedia.org/wiki/Persistence_of_vision

Go to this site and pick a pattern that is big, like the red and white zig zag.

http://lea.verou.me/css3patterns/

  • Look at it for 10-15 seconds.
  • Then close your eyes. ‘
  • What do you “see?”

This is the phenomenon that our eyes tend to hold an image for a bit even after it is gone. Sometimes called after image because you can see part of the image after it is gone. This is often used to explain the entire phenomenon of seeing movement in film and video but it is more about why we don’t see a flicker in the transition between images.

To make that transition smooth we need to refresh the image before the persistence of vision wears off. Open this document

Technical History of Film and Video

Long before we had film we knew that if you displayed a series of images fast enough you would get the illusion of movement. You can create this by hand when you draw something like a flip-book animation. A mechanical device that did this before film was the Zoetrope.

http://www.youtube.com/watch?v=-3yarT_h2ws

Not long after we figured out how to create a continuous roll of film that could be used to expose a number of images, we created motion picture cameras.

Frame Rate

Capture Rate

Display Rate

When images are being recorded to film each image is know as a frame. The number of images/frames recorded in a second is known as the frame rate. In the full process we have a capture rate, the rate at which the images are recorded and the display rate, the rate at which the images are shown back to people.

Relationship between Capture Rate and Display Rate

If the two rates are the same then you see normal motion, basically like it was when the images were rcorded. If the capture rate is much faster than the display rate then you will see slow motion. If the capture rate is slower than the display rate then you will see speeded up motion.

When film cameras were first made both the cameras and projectors were operated by a hand crank. It’s really hard to keep those rates consistent and so a lot of early film was jerky looking compared to what we see today.

http://www.youtube.com/watch?v=_oQu-vZWHTQ

http://www.youtube.com/watch?v=0AnPUJfwxGI

The new iPhone is an example of this where they allowed you to do slow motion by increasing the capture rate. When a camera can do this it is referred to as overcranking in a nod to the early days of hand cranked film: http://news.cnet.com/8301-1023_3-57605103-93/15-more-must-see-iphone-5s-slow-motion-videos/.

Here is an example of super slow motion at around 10,00 frames per second: http://www.youtube.com/watch?v=EUuIoBZJWMg.

To make that transition between frames smooth we need to change the image fast enough to kick the phi phenomenon and beta movements into gear and also do it before the persistence of vision wears off.

Watch this video to see how continuous images help us to “see” movement between images:
http://www.youtube.com/watch?v=qcPx9bi9d0c

It turns out that the speed needed for persistance of vision is also adequate for the phi and beta movements.

 

Open this document and we will find out more about how we got the frame rates used today.
PersistanceandFrameRateWorksheet.xlsx

Find the two numbers as outlined in the document.

Technical limitations of the display device

In order for capture rate and display rate to match, the device you’re using to display the film or video must be capable of displaying at the capture rate. In film this was not a problem but in early television it was a big problem. Part of that was the technology in the TV and part of it was in the way the images were broadcast.

Old Television Tubes
Orginal televisions make an image by essentially shooting electrons at a screen of phosphor coated material. These phosphors glow when hit by electrons. Orginal TVs were black and white because they were just these phosphors glowing at different amounts of lightness. When you put red, green and blue filters over them the glow with those lights. Here is an image:
http://www.flickr.com/photos/jhirsch/2163414684/

Cathode Ray Tube
That system of TV is known as cathode ray tube or CRT.
Some images: http://www.flickr.com/photos/audin/2324980526/, http://www.flickr.com/photos/renaissancechambara/442691040/
http://electronics.howstuffworks.com/tv3.htm

Persistence of Display
Television had to take into account the fact that the phosphors only stay lit about 15-20ms. This time is know as persistence of display. If they showed images at 24 frames per second on a television the image would only change every 42ms. After the first 20ms the phosphors would die out which meant that there would be a 22ms time where there was no image.

They could have solved the problem by simply increasing the frame rate to around 60 frames per second. However this would have required more than twice as many images as was captured on film.That would have meant more data and a higher amound of data. Early broadcast systems could not handle that data.

Interlacing
To fix this problem they came up with the idea of interlacing. This means that they break each image frame into two and only showed half of the image in each interlaced frame.

Progressive Scan
When computers came about, they originally had basically a TV display. As technology improved both TV and computer displays got better. One way was that they were able to use progressive scan where images were not interlaced. Because what you see on your computer is not generally from a broadcast TV signal then the data rate was not a problem and we began seeing more video that wasn’t interlaced.

LCD and LED
Modern displays use LCD or LED technology that allows lights to be continually on and can adapt to a number of different display rates.

Standards

Because there are so many interdependencies (capture rate, display rate, display resolution), the television and film industries have created a number of standards for how film and video are captured and displayed. This helps to make sure that what you record on your device can b seen by other people on their screens.

Resolution
In television the resolution of a display is normally given in the number of horizontal scan lines in the screen. Original TVs were had a lot fewer lines (lower resolution) then moved up to about 520 lines and eventually what we now call standard TV is usually translated to 640 pixels on a computer (generally computer screens are been capable of higher resolution than T V screens).

Then HD tv came along with 720 lines of resolution and 1080 lines of resolution. With this change also came a change in the aspect ratio. Most TVs today are capable of 1080 HD resolution.

Aspect Ratio
This refers to the ratio of the width to the height of the screen used to watch the film or video. Early film didn’t have many standards but generally shot at a 4:3 ratio. Starting around 1929 standards were developed for the film industry and we eventually got wider aspect ratios. 4:3 was also used for TV when it started.

Withe the move to HD the aspect ratio also changed to 16:9
The previous standard

Here is are some links on common resolutions and aspect ratios:
http://en.wikipedia.org/wiki/Aspect_ratio_(image))
http://www.reelclassics.com/Techtalk/aspectratio-article.htm

Class on 11.11.13 Organizing Sass Projects

Today to start the class we will look at using partials and organizing your project files

 

Folder Structure

There are a number of ways you can do this. What they all share in common is that you have a folder somewhere for your Sass files and another folder for the compiled css files. To keep things simple and to help me (and you) quickly see all of your folders, we will use the following structure:

RootFolder (name it appropriately)

css

sass

images

js

 

Sass Structure: Paritals

Today we are going to look into partials. This is a file that Sass will not output directly but is meant to be included into another file. You can tell a file is a partial because it starts with the underscore: _. For example _partial.scss.

So, why would you use partials? As you get to make more and more complex sites keeping everything organized is very difficult. Partials help you to organize files and find styles later. Also they allow teams of people to work more efficiently because different people can work on different files at the same time. Another reason is that it gets you thinking about developing your projects in a modular, reusable way. When you write your CSS this way you can take some of the partial files from one project to the next. Eventually you should have a base set of partials you can use to help kick off a project and make it that much easier to start.

We are going to use paritals to organize all of your CSS into modules. We will use the following partials and go over them in class:

_base.scss (here you setup your base colors,typography..)

_reset.scss  (sass version here : https://gist.github.com/trey/3524)

_utilities.scss (this is for mixins and extensions and bits of code that are generally helpful and might be reusable)

_elements.scss (this is where you style base HTML elements, p,

_layout.scss  (this is where major media queries go)

_components.scss (these are reusable sections of oyur site like navigation, search, buttons, Most of these things will be classes that are styled)

_specific.scss (this is where page and section specific css goes)

 

This structure is just one way of doing it. There are many ways and you may find something that is easier or better for you.

 

We will use these files to help explore these concepts and to do some in-class homework.

Sass_organization.zip