GRC Final

URL (Uniform Resource Locator)

Click the card to flip 👆

1 / 30

Terms in this set (30)

http: hypertext transfer protocol

www: world wide web (host)

domain name: calpoly.edu

/grc: folder directory

/course.html: file name and extension

Basic HTML structure

See powerpoint

Various graphics, files formats, their uses and qualities

.JPG Joint Photographic Experts Group: Lossy
Best for photographic images
Determine the compression amount during creation

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

.PNG Portable Network Graphics
Lossless
Best for graphical images
Index colors or have more colors
Contains gamma information
Not fully in use
Adobe Fireworks native file format

File naming structure and organization

Make file names logical, understandable

Use lowercase letters

Never use spaces

May use ~ _ - .

Web pages must have extension .htm or .html

Graphics files should have extension for its format
.jpg .gif .swf .mov .png

Other Files Names:

.HTML Hypertext Markup Language
.CSS Cascading Style Sheets
.LBI Library Files
.MOV Quicktime Movie
.SWF Shockwave File (Flash)

Sit Structure

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.

Difference between Framesets, Tables, Layers, and boxes (CSS)

TABLES:
Columns and Rows form cells
Cells can be joined and split
Border or no border
Color table or cells
Absolute or relative
Alignment of content
Padding and spacing

Color system for Web pages (hexadecimal)

216 Common colors
MAC monitors are brighter
RGB, INDEX, Hexadecimal

Tables and boxes- padding, spacing, images, tiling, and cell coloring.

See example on the powerpoint

Various types of links (text, graphic, hotspots, email, documents)

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 mailto:youremail@calpoly.edu.

Links:
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: easy-poll.com 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

Other sets by this creator

72 terms

58 terms

18 terms

22 terms

Verified questions

literature

Work with your class to craft and revise a thesis statement about sportsmanship in the novel Tangerine. Copy it here:

Verified answer

vocabulary

Choose the letter of the best synonym of the word "aptitude" from the phrase "aptitude in science".

a. experience

b. fame

c. opinion

d. failure

e. talent

Verified answer

literature

Anticipation Guide: Before you read the article on the next page, read the statements below and mark each statement as either true or false in the "Before Reading" column.

Before Reading	After Reading
		1. The average American child is exposed to almost 22,000 television commercials a year.
		2. American youth typically spend more time with various media (TV, iPods, cell phones, and instant messaging) than they do in the classroom.
		3. Twenty-five percent of kids say that buying a certain product makes them feel better about themselves.
		4. American children aged 12 to 17 will ask their parents for products they have seen advertised an average of three times until the parents finally give in.
		5. Over half of American kids say that nagging their parents for products almost always works.
		6. Advertising aimed at children is estimated at $\$ 5$ billion.

Verified answer

literature

Supplying the Correct Tense. Supply the progressive form the verb as directed in parentheses. We ----- the dancer carefully all evening. (watch-past perfect progressive)

Verified answer