Watkins Web 1 Course Blog

James Muspratt | 02/13/11

Browser Tools for Web Developers

Here are links to the browser tools I’ve mentioned in a few classes:

  • Safari has a dedicated Developer menu that you can turn on. Go to Safari > Preferences > Advanced and check “Show Develop menu in menu bar”. Now you can use the Develop menu to turn stylesheets off, show the Web Inspector, etc. You can also right-click a particular element on a web page and choose “Inspect This” to see that area of code and the styles that are being applied to it. (This “Web Inspector” is active by default in Chrome).
  • The excellent Web Developer Toolbar does similar tricks and more, allowing you to outline elements, view a page’s CSS, etc. It’s available for Firefox and Chrome and gets installed as an extra toolbar — in Firefox it’s a big toolbar with icons, but with Chrome it’s a subtle Gear icon off to the right of your address bar.

Tags:

James Muspratt | 02/12/11

CSS Selector Cheat Sheet

Hi everyone, just thought this cheat sheet might help as you continue to refine your first project. These are what I see as the most common kinds of CSS selectors that you need for your pages:

What we want to style HTML CSS Rule
“All paragraphs” <p>Sample</p> p {color:red;}
“All paragraphs with a class of special” <p class="special">Sample</p> p.special {color:red;}
“The (only) paragraph with an id of first” <p id="first">Sample</p> p#first {color:red;}
“Anything with a class of warning” <p class="warning">Sample</p>, but also <ul class="warning">, <div class="warning">, etc. .warning {color:red;}
“Paragraphs in the maincontent div” <div id="maincontent"><p>Sample</p></div> div#maincontent p {color:red;}
“List items in ingredients unordered lists” <ul class="ingredients"><li>Sample</li></ul> ul.ingredients li {color:red;}

Tags:

James Muspratt | 02/09/11

Project 1 Final Details

Hi everyone, here are some details about Project 1.

Submitting and Archiving

  • Both parts of Project 1 are due on February 16, in class. I will pass around a flash drive and have you copy your files onto it. Please make sure you have your final files at the beginning of class: I recommend bringing them in on a drive and having backup copies in your email or on the server, just in case.
  • Unless you have (reasonable) objections, I will be posting your projects to the website so the class can view and learn from them.
  • To help with that process, please name your files as follows: Create two folders, one called lastname-project1a and the other lastname-project1b. Inside each, put files called index.html and style.css. Don’t forget to update the <link> tag in your HTML to refer to the new name of the CSS file.

Criteria for Grading

Remember that this project is both about writing valid, semantic code and employing compelling, refined, or inventive typography. As you get closer to finalizing your projects, please take into account the critiques you heard from the class in the past two weeks: in some cases this is a matter of small tweaks to spacing or fonts, with others it’s a matter of making bigger choices about what your design is trying to accomplish.

In no particular order, here are the core questions I’ll be asking:

  • Does the HTML and CSS validate? If not, is there a clear reason why not?
  • Is the mark-up written to be semantic and structural, rather than presentational?
  • Has basic care been taken to proofread the text for transcription errors, extra spaces, etc.?
  • Have proper HTML entities been used for non-ASCII typographic characters like curly quotation marks, apostrophes, dashes, ellipses, fractions, etc.?
  • If appropriate to the design, have typographic “finer points” been observed? Do the quotation marks hang, do drop-caps line up with their baseline, have small caps been used?
  • Does the typography retain its legibility and character if the text is resized up or down a level?
  • Does the typography — not just choice of typeface, but also the measure, leading, type sizes, arrangement, and color — convey a thoughtful idea about, or approach to, the particular text? In other words, do the whole set of typographic “moves” add up to a coherent design?

James Muspratt | 02/09/11

Feb 9 class canceled

Hi everyone, class is canceled tonight due to weather. See you Monday!

Tags:

James Muspratt | 02/08/11

Show and Tell Full Schedule

Here is the schedule for show and tell for the rest of the semester:

1 19 —
1 24 —
1 26 aaron
1 31 katelyn, don
2 02 xavier
2 07 rex, courtney
2 09 jill
2 14 adam a
2 16 eric
2 21 richard
2 23 mark
2 28 kelsey
3 02 steve
3 07 adam f
3 09 katelyn
3 14 (break)
3 16 (break)
3 21 (critiques)
3 23 (critique)
3 28 aaron
3 30 don
4 4 xavier, jill
4 6 rex, courtney
4 11 adam a,
4 13 eric, richard
4 18 mark2, kelsey
4 20 steve, adam f
4 25 (critique)
4 27 (critique)
5 02 —
5 04 —

Tags: /

Don Mann | 02/08/11

Don's show and tell

This website, I think is really good, I like how the designer of the website molded it to Storm Thorgerson style. Each of the tabs for different pages has radial movements if you place the mouse on them, I think that's impressive since I can't do that. To me, I think the website is somewhat simple to navigate and I think it's clever that each piece of work has an eye on the lower right side, if you click on it it tells you info on how the work was made.

Tags:

James Muspratt | 02/07/11

Reading for February 9

Hi all, please read the following for Thursday:

Tags:

James Muspratt | 02/07/11

The CSS Box Model

Here are tonight’s slides on the CSS Box Model.

Tags:

James Muspratt | 02/06/11

Critique for Group B on Monday

Just a reminder, if you are in Group B, we will be reviewing your first project tomorrow night (Feb 7).

Group B (updated)
Adam Filer
Don Mann
Xavier Payne
Rex Runyeon
Courtney Spencer
Jill Thompson
Kelsey Ullrich
Steve Womack

Tags:

James Muspratt | 02/04/11

Reading for February 7

Here is the assignment for Monday, February 7:

  • Read Zeldman, Ch. 10.
  • Continue working on both parts of Project 1
  • If you are in Group B, get your prose text to the point that you can present it and get feedback from the group. Think of questions you want to ask the group, whether they relate to design or code or both.

Tags:

James Muspratt | 02/04/11

Stories within Stories

Cut Book

On Wednesday, Adam's treatment of Kafka's Metamorphosis brought up the idea of creating new stories within books through typography. This is the book project I mentioned in class. Jonathan Safran Foer (better-known as a novel-writer) collaborated with designer Sara de Bondt to create Tree of Codes, a new work made entirely from the book Street of Crocodiles.

Read Good Magazine's post about the project.

Tags:

Katelyn Joughin | 02/03/11

My Three Website's

This first website is Muse. I am not sure what this website is about but this site was stumbled upon and it was so strange and different that I had to show you guys. Something I didn’t like about it was that you could only click on the hand to naviate and there was no real understanding of what was going on.

This second website The Sum was my favorite! This is an online portfolio and freelance company. I love the whole design and the navigation. It was so clean and clear. One thing I really liked that I have not seen before was their logo moved down the page as you scrolled down the page. It was always on the left side floating and never covered anything up. I thought it was really unique. I also liked that everything was black and white except their own work which was displayed in color.

This last website Morgen Thau Film. It was a movie website featuring this interactive timeline of events that were in the movie. I also loved the loading screen. Since it was a flash website it took some time for the site to load. While it was loading, it was not your average loading bar, it was a sentance and had sayings that kept your interest. This site amazed me from the beginning.

Tags:

James Muspratt | 02/03/11

Typography Resources

Tags:

James Muspratt | 01/31/11

HTML and CSS References

A few of you were asking if there is a single list somewhere of common CSS properties and HTML tags. Here is what I found:

HTML

CSS

Tags:

James Muspratt | 01/31/11

Critique Wednesday

Please remember we will be doing a mid-project critique of the work of Group A on Wednesday. Bring in the current state of both texts and be prepared to describe your intentions for the design, as well as questions you have for the group.

Group A
Adam Agee
Eric Andre
Richard Cook
Mark Fentriss
Adam Filer
Karissa Goff
Aaron Johnson
Katelyn Joughin
Group B
Don Mann
Xavier Payne
Rex Runyeon
Courtney Spencer
Jill Thompson
Kelsey Ullrich
Steve Womack

Tags:

James Muspratt | 01/31/11

Web Typography

Here are the Web Typography Slides from tonight. I guess the URLs of the sites (below each screenshot) are only clickable if you open the PDF using a recent version of Preview for Mac (not Acrobat).

Tags:

Steve Womack | 01/31/11

A Good Resource & Tutorial

I was googling around trying to get some specifics on certain CSS terms and syntax and found a great tutorial site. I found it very useful.

Hit This Link

Steve

Tags:

James Muspratt | 01/31/11

CSS Reset

It is almost always a good idea to put a CSS reset at the top of your stylesheet. This clears all of the default spacing and style values that a browser would normally add, and means the rules you right will get the expected results more often. 


/* Reset the browser defaults on everything */
body * {margin:0; padding:0; border:none;text-indent:0;text-decoration: none;outline:none;}

Tags:

Aaron Johnson | 01/28/11

Website show and tell; www.sonnyt.com

Online Portfolio of Sonny Tulyaganov

I found this site interesting because it accomplishes many of the same effects as a flash site, yet uses no flash at all. The buttons animate when clicked and bring up an interface that lets you scroll down through his portfolio. All the animations have a delay on them, which is neat at first but gets tedious when navigating through the different pages. It's just a simple portfolio site and there are only three main pages though so perhaps it isn't meant to be viewed more than once.

The layout is interesting and minimalistic, which is typical of many modern portfolio sites. It utilizes a continuous long page that you scroll down to display his portfolio pieces, which cuts down on the amount of clicking and simplifies navigation. Interesting to note is that he seems to have embedded his blog into the site as well. Perhaps this utilizes RSS in some way to recreate the blog, rather than making an actual portal to another site.

Tags:

James Muspratt | 01/27/11

Show and tell schedule

Here is the schedule for the next few weeks for show and tell:
  • Jan 31: Katelyn, Don
  • Feb 2: Xavier
  • Feb 7: Rex, Courtney
  • Feb 9: Jill

Tags: