Transcript PowerPoint Presentation - TEP 231: New Technologies for Learning

Instructional Design
• with a focus on web page and site
(collection of web pages) design
Instructional Design
• Perceptual principles: “bottom up”
• Analysis of goals: “top down”
Perceptual principles
• Motion attracts attention
• Consistency promotes rapid perception
• Color choices are important
Adding multimedia
• Local clip art collections
• Internet clip art collections
• Scanned graphics, digitized sound and
video
Can I use multimedia I find on
the Internet?
• or multimedia I convert from another
medium?
•
•
•
•
Technical answer: yes, easily
Legal answer: no
Ethical answer: yes in some cases
Practical answer: yes in many cases
“found” web graphics
• Technically: you can copy by moving cursor
over graphic; on Mac, hold down mouse
button; on Win, right click. Select “Save
this image as ...” from pop-up menu
• Legally, every image is automatically
copyrighted at the moment of its creation
and you cannot use it unless you have
explicit permission
“found” web graphics (cont.)
• Ethically: you should respect the intellectual
property rights of others. If they give permission
(for example, by allowing the graphic to be put in
a free clip art collection), then it is okay
• Practically: if it is a simple graphic used for noncommercial educational uses, then “fair use”
covers you (unless it is a cartoon or movie
character or recent popular music)
Gestalt principles
for interface design
• http://tepserver.ucsd.edu/~jlevin/gp/
Gestalt Psychology
• Developed in Germany in the early 1920s
• Focused on studies of perception and
problem solving
• “The whole is different from the sum of the
parts.”
• (not the same as “Gestalt therapy”)
Gestalt perceptual
organization principles
•
•
•
•
proximity
similarity
good figure
common fate
Proximity
• Things that are spatially close are perceived
to be a group.
Implications of proximity
for web design
• Those things that are placed together on a
web page tend to be perceived as
conceptually grouped.
• Put things nearby on your web page that
you want your readers to think of as the
same; put things far apart on the page that
you want them to think of as different.
Similarity
• Things that are perceptually similar are
perceived as a group.
Implications of similarity
for web design
• Those things that are similar on a web page tend to
be perceived as conceptually grouped.
• Make things on your web page similar (using
color, shape, size, etc.) that you want your readers
to think of as the same; make those you want to be
seen as different not similar.
Good figure
• Things that can be perceived as forming an
easily recognizable figure will be grouped.
Good figure
What shape do you see?
Implications of “good figure”
for web design
• Those things that are form a recognizable
shape on a web page tend to be perceived as
conceptually grouped.
• Place things on your web page in a
recognizable shape that you want your
readers to think of as the same.
The "squint test"
• To see if you have a good perceptual design
your web page, squint your eyes, and see if
what you see in the blurry image still makes
some sense.
The “inverted L” design
• Banner across the top; choices across the
left
Implications of “common fate”
for web design
• Importance of motion as an attention
attractor and organizer.
• Animation as attracting attention to the web
page
• Continued animation as attracting attention
to the animation (and AWAY from the rest
of the page
Appropriate uses of motion
• Motion attracts attention
• Continued motion continues to attract
attention
Animated gifs
• Useful for attraction attention to a page
• Very useful if they stop after a while, so that the
viewer can then look at the rest of your page (use
free graphic editors to set the duration of the
animation)
• Beware of overuse, since web viewers are
beginning to associate animated gifs with
advertisements which they automatically ignore
Using a graphic editor to have an
animated gif stop after a while
• http://cter.ed.uiuc.edu/courses/Edpsy387/su01/animation/
Jim’s worst nightmare web page
• http://faculty.ed.uiuc.edu/j-levin/animanic/
• (Note: This is an example of what NOT to
do ;-)
Color choices are important
• Michelle Hinn’s An Altenative Web Design
Guide
Consistency
• Consistent layout of a coherent set of web
pages
• Consistency with emerging conventions (the
inverted L layout, with navigation along the
left edge and a title graphic along the top)
• Consistency with what your audience
expects
Some design guidelines
• One screen in size if at all possible (with
links)
• Careful and planful use of animation
• Care with colors and backgrounds
Goals and design
• Important to keep in mind your goals for
creating a web page, and select elements
that help accomplish those goals
• For each element that you consider adding
to a page, ask yourself "Does this help me
achieve my goals for this page or not?" If
it doesn't, don't add it.
Your personal web page
• Who is the audience? (are there multiple
audiences? If so, multiple personal web
page!)
• What do you want them to learn from
viewing your web page?
• What do you want to accomplish with your
web page? (inquiry, self-communication,
construction, expression uses)
Other personal web page uses
•
•
•
•
•
•
•
•
•
Portable bookmark file / social bookmarking
Web weaving
Job seeking
Community building
Photo album
Fund raising / consciousness raising
Educational
Persuasive
communication
eportfolios
• Exemplars of own best work
• Create your own web page with eportfolio
elements (or if you have one already, add
eportfolio elements)
eportfolios with students
• Michelle Jacobs’ project
Exemplary personal web pages
• Your choices
Before next class
• Create a new web page containing your
major project proposal, and submit the
name and the URL to TAPPED IN project
proposal conference
Major Project Proposal
• What issue or question related to the use of
new technologies in education would you
like to address?
• What is set of learners would you like to
focus on?
• Look at the major projects from TEP 231 in
2003 to see examples.
Breaktime!
Lab time
• Create a new web page with your major
project proposal, transfer it and your
personal page to your web folder, and post
the name and URL to TAPPED IN
Snacks for Monday
• Carrie & Rachel
• Thanks to Melissa H. & Kathryn for today’s
snacks
Creating a new web page
• Start your web editor (Dreamweaver, Netscape
Composer, whatever)
• Select File -> New
• Start typing and formatting
• Save
– New name
– No spaces or punctuation marks except “-” or “_”
– End in “.html” or “.htm”
Creating a link
• Choose "Insert" -> "Hyperlink"
• Type in the text to have a link from (that
will become blue and underlined)
• Paste in the URL (for absolute links to sites
outside your own site)
– URL has to be complete (ie. include the http:// )
Creating a "relative" link
• For links between your own files, you can
Choose "Insert" and "Hyperlink", but then
click on the folder icon next to the link box
and choose the file. That will put in a
"relative link", with JUST the filename.
• Advantages of relative links:
– Shorter
– More portable (will still work if you move your
files to another server)
"Publishing" your web files
• To "publish" your web files, you simply
transfer them from your local computer to a
computer that is running web server
software
• The computer we will use: tep239.ucsd.edu
• Several ways to transfer files over the
Internet; today we will use FTP
Putting your files on the server
with Dreamweaver
• New Site
• Select your folder for the local folder
• For the remote server:
–
–
–
–
–
Access: FTP
FTP Host: tep239.ucsd.edu
Host: sites/
Login:
Password:
Putting files on server…
• If you want them automatically put on your
server space, click that box.
• If not, leave it unclicked, and when you
want to put a changed file, click on the "file
management" icon
and select "Put"
Your URL is …
http://tep239.ucsd.edu/~yourusername/yourfilename.htm
or
http://tep239.ucsd.edu/~yourusername/yourfilename.html