GRC Final

URL (Uniform Resource Locator)
Click the card to flip 👆
1 / 30
Terms in this set (30)
.JPG Joint Photographic Experts Group: Lossy
Best for photographic images
Determine the compression amount during creation

.GIF Graphic Interchange Format
Best for graphical images
Index colors (can be adjusted)
Simple Animation

.PNG Portable Network Graphics
Best for graphical images
Index colors or have more colors
Contains gamma information
Not fully in use
Adobe Fireworks native file format
Three click rule
See Amazon page example

Single Page Design: simplest, everything goes on a single home page

Flat Pattern: All pages are arranged as peers, every page is accessible from every other page. Great for standard topic sites that include: Home, About Us, Contact, Products.

Index: Additional lists of content. Content organized in a way to make it easier to find. Similar to traditional indexes like dictionaries and phone books.

Strict Hierarchy: A system where the user can only access a lower-level page via its parent page. Structure for sites with Message boards, Threads, and Posts.

Hub and Spoke: Useful for multiple, distinct linear workflows.
Text Links
Select the text that will have a link. Like the button link, type in the link in the Link area located in the HTML portion of the Properties panel.

Links to other pages.
Same process as above. Good practice to use all lowercase letters in file naming.

Link to another website.
Copy the URL and paste it in the Link area as other links are made in the HTML portion of the Properties panel. If you wish to have that site open in a separate browser window, choose _Blank from the Target drop down choice in the Properties panel.

Link to email
In the Link area type

To another page in the same site

To an anchor on the same page or a spot on another page in the same site

To another site

To files such as docs, PDF, sound, and Quicktime
Components of a Web PageHTML (Hypertext Markup Language) Provides the content and Meta information JavaScript Interactivity and Function CSS (Cascading Style Sheets) Appearance and LayoutTransition from Tables to CSSTables Issues Accessibility Abundant Code Difficulties rendering on PDAs and Cell Phones CSS Inception W3C Described CSS in 1996- little use 1998 release of version 2.0 included ability to position elements The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article we're going to look at how to use them, when to use them, and everything else you need to know.Meta tagsMeta tags provide metadata about the Web page. There are many types of meta tags such as author, key words, and description. These are placed inside the head tags of the Web page. Insert Meta Tags for keywords, and description by choosing Insert>HTML>Keywords or Description. <meta name="revisit-after" content="2 days"/> <meta name="title" content="Jelly Bean Candies/> <meta name="keywords" content="jelly beans, candy, gifts " /> <meta name="description" content="The Best Website on the Web. " /> <meta name="robots" content="index,follow,all" /> Meta tags are snippets of text that describe a page's content; the meta tags don't appear on the page itself, but only in the page's code. We all know tags from blog culture, and meta tags are more or less the same thing, little content descriptors that help tell search engines what a web page is about.Create a simple flow chart for a website indicating linked pagesWeb page accessibility considerationsWeb accessibility means that people with disabilities can perceive, understand, navigate, and interact with and contribute to the Web Common considerations Label of images with ALT tags (readers) Legal Obligations (Section 508)Generational Web page designGeneration 1: The first generation of websites was basically little more than computerized scientific papers. At the time, computers had limited memory, bandwidth was minimal, and browsers were not able to interpret complex designs. Gen 2: Second generation websites were developed as browsers became more sophisticated and color monitors became affordable. Frames and tables allowed text to be placed in columns. Many sites featured background images that repeat to form tiles, and they also displayed animated GIFs. Gen 3: Third generation websites came about as broadband became available to the average user. These sites were developed with the same design ideas used to develop CD ROMs. Browsers became equipped with plug-ins to automatically install specialized, free software allowing the display of multi-media messages Gen. 4: Fourth generation websites are similar, in design respects, to third generation websites; however, they incorporate technology such as: online purchasing, instant messaging, and live broadcasting.Add-ons to Websites (maps, searches, counters, blogs, RSS, Podcasts)MAPS: Mapquest provides three formats. Copy and paste HTML code. Google requires an account. Counters: Blogs: WordPress, Myspace, Movable type, TypePad, Blogger, Custom/Others RSS: Really Simple Syndication, RSS is a method that uses XML to distribute web content on one web site, to many other web sites. Clients "subscribe" and use a "reader" or "aggregator" to do fast browsing for news and updates. Like a custom newspaper. Podcasts: Broadcasting of audio or video. As streaming media or syndicated through a service like Apple iTunes. garage band.Bounce RateInternet marketing term for web traffic. The percentage of visitors who enter the site and "bounce" (leave the site) rather than continue viewing other pages within the same site.Principles of Interaction or Interface DesignHow people interact with devices: Consistency Visibility Learnability Predictability Feedback Not the behavior of the interface, rather it's the behavior of people that the design is focused on.CSS parts (selector, properties, value)Selector: what is to have a rule applied Property: what attribute is to be applied Value: Specification of attribute Selector: Property: ValueSelector Types:Elements (Tags): Rule applied specifically to that element (tag) Example - P (paragraph), H1 (heading) P {font-family:verdana,geneva,san-serif;} Class: Rule can be applied to multiple elements Can have any name (no spaces and starts with ".") Example - .any name .itemname {font-size:10px;} ID: Rule applied to only one element on a page Mainly used for positioning Example - #sidebar #header {border:2px solid #000000;}CSS typical format structureSet type specifications, background color, links color, and other attributes Embed for a single page, a single element, or as a linked file that affects many pages Reduces file sizes Quick updates and changesANIMATION: Why Flash is popular for use on the Web?More recently Flash animation files,(SWF files), are being used for animation on Web pages, and in some cases, entire Websites. The file formats are small in size and their ability to provide action and interaction have made them a favorite of Web designers.ANIMATION: Frame types (frame, key frame, and blank keyframe)A keyframe is a frame where a new symbol instance appears in the Timeline. Like films, Adobe Animate CC documents divide lengths of time into frames. In the Timeline, you work with these frames to organize and control the content of your document. You place frames in the Timeline in the order you want the objects in the frames to appear in your finished content. You can also add a blank keyframe to the Timeline as a placeholder for symbols you plan to add later or to explicitly leave the frame blank.ANIMATION: Cell, Motion and Shape Tween (animation types)Animate can tween, or automatically fill in, the property values between the property keyframes in order to produce fluid animations. A tweened frame is any frame that is part of a motion tween. A static frame is any frame that is not part of a motion tween. You arrange keyframes and property keyframes in the Timeline to control the sequence of events in your document and its animation. A cel, short for celluloid, is a transparent sheet on which objects are drawn or painted for traditional, hand-drawn animation. Traditional Animation. (2D, Cel, Hand Drawn) 2D Animation. (Vector-Based) 3D Animation. (CGI, Computer Animation) Motion Graphics. (Typography, Animated Logos) Stop Motion. (Claymation, Cut-Outs)ANIMATION: Ways to publish SWF files, and other typesHow TOC links and chapters are created for ePubs using Indesign (paragraph styles) and how graphics are placed (in-line).TOC: in Indesign, with paragraph styles and chapters with Indesign (inline)Common video editing and 3D software programsAnimation: Adobe Flash 3D Images and Animation: 3D Studio Max Maya Sketch Up Blender Unity (gaming) imovie, final cut pro, motion (digital video) Premiere (digital video) Camtasia (digital Video) Motion Garage Band (podcast) iDVDTypes of eBooksPDF format Webpage ePubs Interactive ebooks AppsAdvantages/disadvantages of eBooksAvailable 24/7 Quick update/modification Inexpensive alternative to print "Readable" on various devices Multimedia content External content Content tools (bookmarks, glossary, notes) Green ICT Sustainability Strategy