Sunday, February 28, 2016

 Channel 2 news reporter

Thursday, February 25, 2016

What's due Tuesday (3/1)

By next class, get through Step 3 of the Dreamweaver Tutorial – you'll have tine to hit Step 4 on Tuesday, and we'll review a few elements of Step 3 in Tuesday's class.

Also – for Tuesaday, I want everyone to bring the content (text and images) you're planning to use for the homepage of your site. This doesn't have to be an extensive collection of material – but should include:

1. A header (which you've already worked on - and which should include some sort of "tagline")

2. Introductory text – probably at least a paragraph getting deeper into what your site is about.

3. Any images beyond the header image.

4. Names for all your Nav buttons.

The wireframe you developed for your homepage should be useful as a basic thumbnail of the content. If you're making a blog for the class, you should have all the text and images you need for your first blog post.

Resources for Today

Link here - steps 3 and 4 are for today:

Video of the day.

Thursday, February 18, 2016

School Closure Today (2/18)

SNC is official closed due to weather today - so no class today. Enjoy the snow.

Tuesday, February 16, 2016

Oh Wow! An escalator! (Drumming at the London Underground)

References for 2/16 (Tuesday)

And here's a link to a tutorial that steps you through page creation from scratch, using Dreamwever - download the sample files, and we'll be stepping through the first four parts of the tutorial – parts 1 and 2 today, and parts 3 and 4 on Thursday:

There are a couple things in the tutorial that don't quite map to the current DreamWeaver interface:

1. There is no "page title" field in the menu bar - you'll have to set the page title in the code itself.

2. There is not a "structure" field in the Insert pane – you'll find all the insertable elements by scrolling down in the Insert pane.

3. If the "properties" bar does not show up, you can show it by selecting Window > Properties.

4. You will have to insert the list items when making the nav bar. You can get to that through the Insert pane.

Monday, February 8, 2016

Work for today (Tuesday, 2/9)

There are a couple things I'd like you to do for today's class. Each of you has, at this point, picked out a website in the same "genre" of site you want to make for this class.

Before this coming Thursday, I'd like you to do three things. You should be able to get them done during this class period. They are:

1Write and print out a list: what were the elements you liked about the site you picked? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

2. Create a wireframe for the homepage of the site you picked, as well as a wireframe for one of the "second level" pages (that is, one of the pages you get to by clicking on the nav bar), and a flowchart for the site (refer to this previous blog post for visual references).
I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Pencil or ballpoint pen on unlined paper would be great (and if you need to, you can steal some unlined paper from the copier on the second floor). Just make sure the names for all the navigation and content are legible.

The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. The rationale for asking for two wireframes stems from most sites having homepages that function differently than their "interior" pages, so it's necessary to have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.

A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.

The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).

3. Gather and write elements for the homepage of the site you'll be creating for this class. Don't worry about designing it and laying it out – but what text and images do you need for your home page? Thinking of how "reading for the internet" is easier when the information is broken up into short chunks, what do you need to efficiently tell the story of what your site is "about?" Think of:

A. The name for your site.

B. A "tagline" or "headline" that lays out the purpose of the site.

C. One or two paragraphs that expand on the purpose of the site, and give a sense of the "voice" of the site.

D. Some images that support and tell the story of what the site is about. For many of you, you might not have the images shot yet – in that case, google some images that have the look and feel of the images you ultimately want for the site.

We'll look over all this material in Thursday's class.

Thursday, February 4, 2016

My Link and Video

I want to create a journalistic/data-driven resource for people looking for information about housing disparity around Lake Tahoe.

I found some good examples of multimedia journalism and data visualization here.

Also, Youtube clip of the day!
Ian Von Herbulis

I picked Jeremy Cowarts website. Jeremy is a photographer, works with famous people and big names.

Resources for Thursday (2/4)

Using list elements to make a nav bar:

After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:

1. change the names of all the nav buttons, and make them all external links to actual websites.

2. change the font face in the nav bar.

3. change the color of the nav bar, including in the "hover" state.

4. change the dimensions of the padding on the nav bar.

We'll also talk about wire framing, and lay the groundwork for:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):

2. You'll make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):

Wednesday, February 3, 2016

Reminder for thursday (2/4)

Bring a link to a website in the "genre" of the website you'd like to make for this class. Thanks!

Tuesday, February 2, 2016

Text editor link

Please download this – Sublime Text.