wra 210 march 31st ppt
TRANSCRIPT
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?