Exam #1 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 offscreen 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”

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