TODAY

1)Module 5 reminders

2)Incorporating external pieces into web designs

3)Activity: MOCK IT UP!

4)Homework

MOD 5

Module 5 is due next week (April 5th). Hopefully you

are well on your way to finished, but if not, please

don’t forget to work on it this weekend.

Remember that your product should look something

in the neighborhood of this:

INCORPORATING

One of the things we’ve mentioned but only briefly

done (during the activity with the Kobe page design)

is incorporating external elements into a website.

There are basically three ways this can work:

1) Embedding offered code

2) Adding modified code based on directions

3) “Stealing” code (it’s fun to steal!)*

*Phill does not advocate crime

Embedding

Embedding code is so simple that we often make it

more difficult than it is. To execute an embed, all you

need to do is locate the embed code, copy it, go to

your html document, and paste the embed code into

the your code wherever you want the element to be.

Let me show you an example using our good friends

at YouTube.

Sites with embeddable

content will usually offer a

link. Click on it, locate the

code, and copy it.

Here it takes two clicks– on

the embed button, then in

the window.

From there, you simply go into

your code, to the space where

you want the media, and paste

in the embed coding. Like so.

Then, sweet

success. That

media box in

DW means you

have embedded

a video!

Adding Code

More likely than simply embedding, though, you will

sometimes need to “customize” your code with a

little something that you’re not quite ready, as a

designer, to create by hand.

Maybe, for example, you want a specific CSS

navigation but you have no idea how to create it.

So you find it. Maybe you find it here.

Sites that offer

code generation

or tutorials will

often– almost

always– include

directions. The

ones with this

file are step-by-

step.

So easy that

creepy Geico

Caveman could

do it!

“Stealing” code

I am using the term “stealing” here playfully. But the

concept is basically this: if you see something you

like on a website and you can’t figure out how to do

it, locate it in the source code and see if you can

copy it/modify it to work.

With the existence of external stylesheets and

scripts, this isn’t as easy as it once was. But it’s still

a great way to learn and explore.

Activity time

So team Spartyblog.Com loved your wireframes.

Really. They’re hyped up.

Now they want to see a mock-up.

A mock-up, basically, is an image of what the page

will look like. You can create it however you feel you

can best convey the page to the audience.

So hop to it! Mock some stuff up!

Homework

In class next time we will shift gears ever-so-slightly.

We are going to create mock-ups/advanced

wireframes of your final project sites.

We’ll talk about how that’ll work then do it.

No readings for the weekend.

Your Twitter question: Do we want to take

some time to talk about ethics in web

design, or would you rather spend the

rest of class focusing on the projects?