Final Exam Review
Web Expressions
This course is a Creative Thought Direction in PSU’s
General Education program
• Creative Thought courses emphasize the skills
of
– critical thinking, reading, writing, listening and
speaking,
– and working with information technology
Information Technology
•
•
•
•
•
PCs with Windows 7
Electronic mail
World Wide Web (WWW)
Blogs
Adobe Creative Cloud
– Web page – Dreamweaver
– Image processing –Adobe Photoshop
– Animation – Flash
• Sound Editing – Audacity
• Video Format Converter – Adobe Media Encoder
• Video Production – Windows Live Movie Maker
Project Planning
1.
2.
3.
4.
Brainstorming
Design - storyboard
Build
Test
The most important element for designing your webpage is to
understand your objective and know your audience.
Brainstorming Rules
•
•
•
•
•
Postpone and withhold your judgment of ideas.
Encourage wild and exaggerated ideas.
Quantity counts at this stage, not quality.
Build on the ideas put forward by others.
Every person and every idea has equal worth
File Management
All information is Stored in Files
Data
Images
Executable programs
Music
Etc.
Files have a name and an extension
–
Filename.ext
You assign the file name, the application that you used to
create the file assigns the extension – thus the extension
indicates the type of file:
.exe – executable file
.doc – Microsoft word document
.ppt – Microsoft Power Point
.html – web page document
There are hundreds of file type extensions. Examples
File Management Operations
•Create a folder
•Create folders within folders
•Create a file – use a certain application e.g. MS Word, Dreamweaver, etc.
•Delete a file
•Copy a file
•Move (cut) a file
•Print a file
•Locate a file -- search
•View file attribute details –
•name,
•file type,
•date created or modified,
•Size
•Minimize, maximize, restore, close Window
Intellectual Property Rights
Secures Creative Effort
• Copyright law secures for the creator of a creative
effort the exclusive right to control who can make
copies, or make works derived from the original
work.
• A work is copyrighted when it is in tangible form.
• Work that is publically accessible, such as on the
web, does not mean in is in the “public domain,” in
the context of intellectual property law (which
includes copyright, patents, and trademarks), and
can be used without permission of the author.
Creative Commons
Another Approach to Copyright
• Creative Commons offers a flexible range of
protections and freedoms for authors and artists. We
have built upon the "all rights reserved" of
traditional copyright to create a voluntary "some
rights reserved" copyright. We're a nonprofit. All of
our tools are free.
• Learn more
What Are Patents, Trademarks, Servicemarks, and
Copyrights?
• Although there may be some similarities among these kinds of
intellectual property protection, they are different and serve
different purposes.
– A patent for an invention is the grant of a property right to the
inventor, issued by the Patent and Trademark Office
– A trademark is a word, name, symbol or device which is used in trade
with goods to indicate the source of the goods and to distinguish them
from the goods of others.
– A servicemark is the same as a trademark except that it identifies and
distinguishes the source of a service rather than a product.
–
Copyright is a form of protection provided to the authors of “original
works of authorship” including literary, dramatic, musical, artistic, and
certain other intellectual works, both published and unpublished.
What is Netiquette?
Simply stated, it's network etiquette -- that is,
the etiquette of cyberspace. And "etiquette"
means "the forms required by good breeding or
prescribed by authority to be required in social
or official life." In other words, Netiquette is a
set of rules for behaving properly online.
A good rule is to follow the same standards as in
“real life.”
Peer Review Process
What is a Peer Review?
• A peer review is a formal review of a document
produced by a colleague, fellow scholar, or
expert.
• Peer reviews describe the strengths and
weaknesses of a document.
• Peer reviews evaluate a document and argue
whether it should be published or presented.
• Peer reviewers advise writers how to improve
their document
How Should the Author Respond to the Peer Reviewer
1. Concise summary of peer reaction to work.
2. Which elements of the peer-review are you
incorporating into your work?
3. How has your work changed as a result of the
review?
A Design Project Involves Several Steps
•
•
•
•
•
•
•
•
•
Understand the problem
Brainstorm solutions
Introduce the constraints
Choose the solution
Paper design
Actual design
Evaluate
Revise
Evaluate, revise, ….
Why do people visit a web site
1. Obtain information
2. Purchase or donate
3. Entertainment
Web Page Design Mistakes
• Poor Use of Text Size, Contrast, Font
• You should be able to look at the home page of
any site and figure out what the site is about
within four seconds. If you can't, your site has
failed.
• Using design elements that get in the way of
your visitors
• Too much material on one page.
• Boring, Useless Intro
Web Site Organization
• All Web sites are organized around a home page that acts as a
logical point of entry into the system of Web pages in a site.
All pages in the Web site should contain a direct link back to
the home page. The World Wide Web URL for a home page is
the Web "address" that points users to the Web site.
• Your Web Site URL is
http://oz.plymouth.edu/~yourloginname
• IF your home page is in the Home folder and
named “home”
• Your Home Page file pathname is
– M:\Home\home.htm
The Master page Layout Grid
The goal is to establish a logical and
consistent approach to where basic
graphic identity elements, navigation links,
and other essential information appear on
every page within your site. Terminology
is also crucial here: choose your words
carefully for links and titles, and solicit
comments (peer review) and feedback
from fellow team members and site users. A
misleading or confusing label or phrase can
ruin the functionality of a link.
Web Page Layout -The thirty square inches at the top of a
home page comprise the most visible
area of the Web site. Most readers will
be looking at your site on a seventeen- to
nineteen-inch monitor, and the top four
or five vertical inches are all that is sure
to be visible on their screens.
Think in terms of newspapers – “Above
the fold”
Page Length
• Researchers have noted the disorientation
that results from scrolling on computer
screens. The reader's loss of context is
particularly troublesome when such basic
navigational elements as document titles, site
identifiers, and links to other site pages
disappear off-screen while scrolling
Page Length Guidelines
• In general, you should favor shorter Web
pages for:
– Home pages and menu or navigation pages
elsewhere in your site
– Documents to be browsed and read online
– Pages with very large graphics
Designing with Color
Monochromatic Color Scheme
The monochromatic color scheme uses variations in
lightness and saturation of a single color. This scheme
looks clean and elegant. Monochromatic colors go well
together, producing a soothing effect. The
monochromatic scheme is very easy on the eyes,
especially with blue or green hues. You can use it to
establish an overall mood.
A color scheme based on analogous Colors
The analogous color scheme uses colors that are
adjacent to each other on the color wheel. One
color is used as a dominant color while others are
used to enrich the scheme.
A color scheme based on complementary
colors
Two colors on opposite sides of the color wheel,
which when placed next to each other make both
appear brighter.
A color scheme based on nature
Take care with text colors and background colors
Dreamweaver
WebEx Operations in Dreamweaver
•Save all files e.g. webpage, images, etc. in M:\Home
•Home page name – home.html. Your URL for your home page is oz.plymouth.edu/~yourlogin-name
•File names – case sensitive, no blanks or special characters (*, #, etc.)
•Setup Table for organization – row, columns, 100% width, merge and split cells, set border
width , CellPad, CellSapce
•Insert text – Select font, size, bold, italic
•Align in cell – Horiz, Vert
•Link to – existing WWW pages and pages on your web site
•Link from -- live (typed) text, image, images map, jump menu
•Anchors – links to specific place on current page, or another page at a specified place on
page
•Images – Resize/crop before inserting; use image maps to link from specific “hot-spot” on
image, Image rollover changes image display
•Color design – text, links, cell, page, background images; see “page properties”
•Jump Menu – provides a series of links from a menu bar
Multimedia on the Web
The Two Major Effects of Digitization
• Multimedia (VISTA)
– Video
– Image
– Sound
– Text
– Animation
• Interactivity
How the Computers Capture, Store,
Transmit Multimedia
• All multimedia is converted into digital form called
binary digits (bits) represented as 1’s and 0’s or on
and off
• Each multimedia object has a code associated with it
e.g. text is represented by an ASCII code
• Typical codes for images on the Web are JPEG, GIF,
PNG
• Sound Codes are wav, midi, mp3
• Video codes are mpeg, avi
The Process of Displaying a Web Page
• Data and instructions from the server or host
computer are sent to the local or client
computer.
• The instructions are in a computer
programming language called hypertext
markup language (html)
• The browser interprets the instructions and
causes the action.
The Look of the Web Page on the Client
Computer Depends on -• The design of the web page
• The ability of the Web Page design software to
convert the page to html
• The capability of the network to transmit the html
instructions and data
• The capability of the browser to interpret the
instructions
• The capability of the client computer to act on the
instructions
Type – Live (typed) or Drawn
• Measured in Points = 72 points = 1 inch
•
10 - 12 point is usually the minimum for reading
• Typeface or Font
• Style – bold, underline, italics, color
• Live text choice is limited by the capability of
the browser.
• For more artistic text for banners or headers
use “Drawn Text” such as from Photoshop
Images
• Advantages of GIF files
– GIF is the most widely supported graphics format on the
Web
– GIFs of diagrammatic images look better than JPEGs
– Supports transparency and interlacing
– Supports GIF animations
• Advantages of JPEG images
– Huge compression ratios mean faster download speeds
– JPEG produces excellent results for most photographs and
complex images
– JPEG supports full-color (24-bit, "true color") images
Advantages of PNG files
-- Color resolution of jpg and transparency of gif
Data Compression
• Bitmap images are very large file size
• Codecs (computer programs) compress and
decompress files to make them much smaller
by:
– Removing repetition
– Pixel averaging
– Dynamic range reduction
• Jpeg and Gif are the most common for Web
pages
Keep in mind –
•Digital camera pictures must be reduced to fit on web page
•Some web page images are “thumbnails”,
approximately 100 by 100 pixels. Enlarging can make them fuzzy.
•Jpeg is best for photographic images (millions of colors)
•Jpeg does not do transparency
•GIF are best for “cartoon” or line type images (only 256 colors)
•GIF does transparency (and animation)
•PNG does both millions of colors and transparency
•There is a tradeoff between image quality and size and format
•Use the smallest file size that still has desired quality on the web page
•Resize images before inserting on the web page
Blogs
What is a Blog?
A Personal Presence on the Web
• Generally speaking, it's an online journal
comprised of links and postings in reverse
chronological order, meaning the most recent
posting appears at the top of the page.
• Weblogs typically link to blog postings, and
many allow readers to comment on the
original post, thereby allowing audience
discussions.
Lurk Before You Leap
• Browse some blogs of interest to find some
that you feel comfortable participating in.
– Subject
– Content
– Tone
– Audience
– Update frequency
Sound on the Web
Sampled Sound
• Sound wave is digitized by sampling at twice the
highest frequency
• Converted to a number representing the volume
(amplitude)
• Stored in a computer file
• Can represent any sound
• Referred to as a wave file – usually a file extension
.wav
• Often compressed to reduce file size
• Can be used for any sound – voice, instrument, etc.
Musical Instrument Digital Interface (MIDI)
• Not sampled – includes a code representing -–
–
–
–
Musical note
Loudness
Length of time
Type of instrument
• Not compressed
• Generated by a synthesizer
• File extension .mid
Characteristics of sampled, compressed
and Midi files
• Sampled files are very large depending on the
highest frequency being recorded and length of
recording. E.g. wav extension
– voice – less than 8 kHz – sample 16kHz
– symphony orchestra – 22 kHz – sample 44 Hz, Mono
• Compressed sound is sampled sound processed to
make the file smaller without sacrificing sound
quality e.g. mp3 extension
• Midi are much smaller files but can represent only
musical instruments e.g. mid extention
Preparing Sound for the Web – Create a
File
•
•
•
•
Use pre-recorded sound
Record from microphone
Use “text-to-sound” synthesizer
Edit – mix sounds, cut, cut-and-paste, add
effects (Audacity)
• Record musical instrument sounds from
synthesizer (not usually edited in computer)
Video on the Web
What is Video?
• Video is a series of images played at a certain
rate – frame rate
• Digital Video
– Each image consists of a number of pixels
depending on size and color depth
•
•
•
•
•
e.g. 700 x 525 pixels = 367,500
at 30 frames/sec = 10,000,000 bits B&W
with 1 byte (8 bits = 256 colors) = 10MB
=> 10 MB per second of video
Can adjust size, frame rate and color depth
Video Compression
codec – (coder-decoder plugin)
• Similar to image compression
–
–
–
–
repetition and patterns
averaging
range reduction
frame difference
• Several formats
– quick-time .mov
– Moving Picture Experts Group (mpeg) – .mpg
– Audio-Video Interlace - .avi
-- Windows Media Video - .wmv
Using Movie Maker to produce a
movie
1. Design the movie on paper
2. Get images – resize to common size
3. Get music
4. Open Movie Maker application and produce movie
a. Sequence
b. Titles and text
c. Narration
d. Transitions between slides and within slide
e. Add music – your own or “built-in”
f. Save movie
g. Preview movie
Animation
Frame Animation
• Displays a series of still images, or frames, at a
certain rate to give the impression of motion.
• Can be created Photoshop and special GIF
animation software.
Vector Animation
• More complex and used to move an object
along a path, or vector
• Objects defined by mathematical equations
rather than drawn
• “Flash” is a popular software for vector
animation
• The Timeline organizes and controls a
document’s content over time in layers and
frames.
Flash Animation based on two basic
operations called Tweens
Motion Tween
Shape Tween or Morph
Keyframes are inserted on the timeline -Instances on the stage (e.g. tweens, sound, background)
start and end with a keyframe.
Web Accessibility
Awareness of the Web Accessibility
Issue
The foundation of any kind of commitment to web accessibility is
awareness of the issues. Most Web developers are not personally
opposed to the concept of making the Internet accessible to
people with disabilities. In fact, most accessibility errors on web
sites are the result of ignorance, rather than malice or apathy. A
large proportion of developers have simply never even thought
about the issue.
The major categories of disability types are:
• Visual
– blindness, low vision, color-blindness
• Hearing
– deafness
• Motor
– inability to use a mouse, slow response time,
limited fine motor control
• Cognitive
– learning disabilities, distractibility, inability to
remember or focus on large amounts of
information
Policies and Procedures
The best approach for a large organization is to create an
internal policy that outlines specific standards, procedures, and
methods for monitoring compliance with the standards and
procedures.
Content Accessibility Guidelines of the W3C (World Wide Web
Consortium), that no content is allowed to go live on the web
site until it has been verified to meet this standard, and that the
site will be re-examined quarterly for accessibility errors.
Your Web Expressions Toolbox
Three ways to use web pages -WWW via the Internet
Local via an Intranet
Individual Computer
Tools may be used in other
applications or stand-alone
Image Editing
- Photoshop
Sound Editing
WEB Page
Power Point
MSWord
Stand-alone
x
x
x
x
x
link
x
x
x
x
Video
x
x
link
Flash Movies
x
x
link
PERCENTAGE REMEMBERED
COMPARED to METHOD of LEARNING
1
10%
Of what we read
2
20%
Of what we hear
3
30%
By watching a demonstration
4
50%
Combining #2 and #3
5
70%
Combine #4 with writing out notes of what you
learn
6
90%+
All of the above plus application or practice
Review Quizzes
Study Final Exam Example Test
Check from my Calendar for Day and
Time of Final Exam