Exam #1 Review. Web Expressions

Size: px

Start display at page:

Download "Exam #1 Review. Web Expressions"

Kerry Beasley
5 years ago
Views:

1 Exam #1 Review Web Expressions

2 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

3 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

4 Project Planning 1. Brainstorming 2. Design - storyboard 3. Build 4. Test The most important element for designing your webpage is to understand your objective and know your audience.

5 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

6 File Management

7 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

8 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

9 Intellectual Property Rights

10 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.

11 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

12 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.

13 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.

14 Peer Review Process

15 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

16 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?

17 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,.

18 Why do people visit a web site 1. Obtain information 2. Purchase or donate 3. Entertainment

19 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

20 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 IF your home page is in the Home folder and named home Your Home Page file pathname is M:\Home\home.htm

21 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.

22 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

23 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

24 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

25 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

26 Multimedia on the Web

27 The Two Major Effects of Digitization Multimedia (VISTA) Video Image Sound Text Animation Interactivity

28 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

29 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.

30 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

31 Type Live (typed) or Drawn Measured in Points = 72 points = 1 inch 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

32 Photoshop Features Photoshop many capabilities Use the on-line help type in keyword adjust brightness, contrast, colors, etc Resize image Crop Selection -> magnetic lasso, quick selection tool, rectangular, elliptical, magic wand, spot healing brush with Content Aware feathering edges with transparency cut and paste between images move, rotate Eraser, background eraser, magic eraser Replace color Text (size, color, font, warp, special effects) Vary opacity Save for web select file format There are many features Learn how to Learn Combine features Edit -> Undo or Ctrl-Z or Alt-Ctrl-Z for multiple undo

33 File -> New Size Resolution Color Mode Background (White or Transparent)

34 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

35 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

36 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

Final Exam Review. Web Expressions

Final Exam Review. Web Expressions 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