Chapter 1
- Difference between internet and world wide web:
o The internet is the world’s public connection between millions of private computers and computer networks (technical)
o The world wide web is made of web servers that store web pages (visual)
è One of the resources of the internet
- Most important elements of a good website:
o Trustworthiness
o Timeliness
o Value
- Popular email software: Mozilla Thunderbird ® , Microsoft Outlook ® , or Windows Mail ®
- Internet Relay Chat (IRC) = AIM
- collaborative workspaces or virtual meeting spaces: WebEx, GoToMeeting
- weblogàblog
- massively multiplayer online games (MMOGs): Lineage and World of Warcraft
- wiki: a group of related Web pages to which content can be added, edited, or deleted by its users using a Web browser.
- Types of e- commerce transactions
o business- to- consumer ( B2C) = ETrade
o business- to-business ( B2B)
o consumer- to- consumer ( C2C) = eBay (online auction), craig’s list (classified ads)
- Internet access
o Public Switched Telephone Network ( PSTN)
è Dial-up: temporary connection that uses one or more analog telephone lines for communications.
· Regular (slowest way to connect) and High-speed (adds the service provider’s acceleration servers that store frequently requested Web pages- 7x faster)
· Advantage: low cost and easy access to existing telephone lines.
· Disadvantage: slow access speed
è Digital dedicated line: constant connection = higher quality
· Analog or digital (faster)
· 3 popular types:
o Integrated Services Digital Network ( ISDN) lines: set of standards for digital transmission of data over standard copper telephone linesà multiplexing
o digital subscriber lines ( DSL) – faster speed over copper tel. lines
o (asymmetric digital subscriber line ( ADSL): faster downloads than uploads)
o T- carrier lines: any of several types of digital lines that carry multiple signals over a single communications line.
o Cable television (CATV) lines: nonstandard, dedicated telephone line that allows home or business users to connect to the Internet over the same coaxial cable as television transmissions.
o fixed wireless
è uses satellite technology
è wireless fidelity ( Wi- Fi)
- Streaming media: video or sound that downloads to a computer continuously to be watched or listened to in real time
- Transfer rate: speed with which data can be sent from one device to another. Expressed in bits per second (bps) = thousands (Kbps)à millions (Mbps)
-
- Broadband: high- speed data transmissions over a communication channel that can transmit multiple signals at one time (ISDN, ADSL, CATV, etc)
- Internet service provider (ISP): a business that has a permanent Internet connection and provides temporary Internet connections to individuals and companies using one or more access methods: dial- up, high- speed dial- up, broadband, or wireless.
o Regional- NetNITCO
o National- Earthlink
- Uniform Resource Locator (URL)
o Hypertext Transfer Protocol ( HTTP)
o domain name/ IP address
o top-level domain (TLD) designation = .com, .edu, .org
- main web site categories: personal, organizational/ topical, and commercial
- search engines
o index: web site database
o spiders/robots
o metatags: special codes added to Web pages, contain information such as keywords and descriptive data regarding a page.
o Search engine optimization ( SEO): tools- meta tags, descriptive page titles, relevant inbound links from other sites and clearly written text
- search directory : builds its Web page index using human interaction. Web site information is submitted to a search directory by site owners. Then the information is reviewed by the search directory’s editors, who classify the site’s pages into categories
- Portals :Web sites that offer a starting point for accessing information
o General consumer portal- aol (early ISP), yahoo
o Personal portal- MyYahoo! (customizable)
o Vertical portal- specific info about specific areas of interest
o Corporate portal- runs on a company’s intranet
- W3C (World Wide Web Consortium): set technology standards for the web
- Web design tools
o Markup languages: use codes, called tags, to provide instructions about the structure and formatting of a document.
è HTML (Hypertext Markup Language): most current is 4.01. consists of tags <> and tag modifiers called attributes. * appearance and organization of content*
è XML (Extensible Markup Language): uses both predefined and customized tags to facilitate the consistent sharing of information. *defines content* ex:)
è XHTML (Extensible Hypertext Markup Language): hybrid of HTML and XML
è WML (Wireless Markup Language): XML- based markup language used to design Web pages specifically for microbrowsers on hand-held devices. Uses Wireless Application Protocol (WAP)
è CSS (Cascading Style Sheets): standardizes the appearance of Web page content by applying common styles to such elements as font, margins, positioning, colors, and more. Cascading refers to the order in which the different styles are applied.
o Scripting Languages
è used to write short programs, called scripts, that execute in real time at the server or in the Web browser when a Web page is downloaded.
è used to make Web pages dynamic and interactive.
è active content : made by JavaScript, Active Server Pages ( ASP), PHP: Hypertext Preprocessor ( PHP), and MySql
è Can be used by hackers to create malware (malicious software)
o text editor: software used to create plain ( ASCII) text files.
o HTML editor: text editor enhanced with special features that are used to more easily insert HTML tags and their attributesà HTML-Kit ® , CoffeeCup ® , BBEdit ® , and NoteTab ®
o WYSIWYG (what you see is what you get) Editorsà Adobe GoLive ® , Adobe Dreamweaver ® , InnovaStudio WYSIWYG Editor ® , Ephox EditLive! ® , and Microsoft Expression Web ®
è Drawbacks:
1. the page might look quite different when viewed with various versions of different browsers.
2. Some insert unnecessary code, creating larger, slower- loading Web pages.
3. Some might not adhere to the latest markup language standards.
o Web templates
è DreamTemplate, TemplateWorld, and TemplateMonster,
è Pixel Mill, Expression Graphics: templates can be easily modified WYSIWYG editor (dreamweaver)
o Content management system (CMS): facilitates the management of Web content development, including authoring, reviewing, editing, and publishing. ex:) Interwoven Teamsite ® and Typo3
o content repository : database where templates, style sheets, and other frequently used content elements, such as a logo graphic, are stored
- web design roles
o creative: aesthetics
è content writer/editor
è web designer
è artist/graphic designer
è multimedia producer
o high tech role: functionality and security
è web programmer
è database developer
è network/security administrator
o oversight
è content manager
è webmaster
Chapter 2
- Basic design principles
o Balance -- affects expressed mood -- and proximity -- place elements that have a relationship close to each other
o Contrast-- mix of elements to stimulate attention. -- and focus (focal point) -- center of interest or activity.
o Unity and visual identity -- combination of design elements identified with the site and its publisher.
è Logos, fonts, colors, tag lines
- Writing for the web
o Check for accuracy and pertinence of content as well as errors to establish credibility. Also post date of last update to prove currency
o Use chunked text to ensure scannability
o Avoid using blue or purple or underlining text because it usually indicates a link
o Inverted pyramid style - summary (or conclusion) on home page with links to pages with more details, and then any background information.
- Color for the web
o Color wheel
è Primary colors: red, blue and yellow
è Secondary colors: purple, green and orange’
è Cool colors – purple, blue and green - suggest tranquility and detachment
è Warm colors - yellow, orange, and red - associated with activity and power.
è Complementary colors: those directly opposite on the wheel. Generates contrast
o Computers project RGB color system (rg and b light)
è Values – levels of light intensity - 0-255
· Red = 255
· Green = 102
· Blue = 153
è Monitor displays: depends on color depth (bits)
· 8- bit = 256 colors
· 16- bit = 65,536 colors
· 24- or 32- bit = 16.7 million colors.
è Hexadecimal system:
· Used for colors in markup tags
· 16 symbols = A-F and 0-9
- Web publishing issues
o Technical issues
è Bandwidth: quantity of data that can be transmitted in a specific time frame (bps)
è Browsers
· graphical display browsers: along with text, display photographs, clip art, animations, and videoà firefox, internet explorer
· test webpage w/ different browsers--can vary as to the support levels they offer for HTML or XHTML tags, CSS, and scripting languages
· *add the HTML <> tag attribute alt= text to add alternative text to the image.
è Monitor resolution
· Pixel= picture element: single point in an electronic image
· Resolution: measure of a monitor’s sharpness and clarity, related directly to the number of pixels it can display
o Columns x row
o 1024 x 788 is most common
o Liquid design/layout:techniques use HTML layout tables or CSS to create Web pages that resize as the browser window resizes for any monitor resolution.
è legal issues
· copyright infringement
o **In the United States, published and unpublished intellectual property, such as Web page text or images, is protected by copyright, regardless of whether the property is registered with the U. S. Copyright Office. In general, the law states that only the owner may print, distribute, or copy the property. To reuse the property, permission must be obtained from the owner. The owner may also request compensation.**
o copyright notice: includes the word copyright or the symbol © , the publication year, and the copyright owner’s name.
· **content liability : Publishing a Web site might expose you to potential liabilities, such as copyright infringement, defamation, or libel, especially when your site’s content is gathered from many different sources or includes links to Web pages at other sites. For protection against these potential liabilities, you can choose to post at your site a disclaimer of liability notice prepared by an attorney.
è Privacy
· personally identifiable information ( PII) — Social Security numbers, credit card numbers, names, addresses, and telephone numbers
· encryption: process that changes data, encoding it so that it cannot be understood if an unauthorized person attempts to read it – used to protect PII (à decryption)
· Secure Sockets Layer ( SSL) protocol: used to safeguard confidential information transmitted over the Internet.
· Privacy policy statement: explains how any information submitted by a visitor or gathered automatically through server logs and cookies is used.
· Privacy and security standards certification programsà TRUSTe and BBBOnline.
è Accessibility/ Usability
· Web Accessibility Initiatice (WAI): consortium of government agencies, IT industry representatives, and nonprofi t organizations representing people with special needs.
· U. S. Congress instituted Section 508 of the U. S. Rehabilitation Act: requires that all U. S. government agencies use accessibility technologies and follow guidelines to ensure that people with special needs can access the public information posted to the agencies’ Web sites.
· Accessibility—for people with special needs—vs usability—good web design
Chapter 3
- The web site development planning process
o Design plan:
1. Define the site’s purpose
a. Goals: results you want your Web site to accomplish within a specific time frame à primary, secondary, etc.
b. Objectives: methods you will choose to accomplish the site’s goals.
c. Purpose statement: formal, written summary of goals and objectives
2. Identify the target audience
a. Demographic characteristics: age, gender, education level, income, etc.
b. Psychographic characteristics: lifestyle choices, purchasing preferences, political/ social group affiliations, etc.
c. Needs assessment:
· What are audience members expecting to gain from a visit to your Web site?
· What usability or accessibility issues are important to audience members?
· Are audience members generally experienced or inexperienced Web users?
· Will audience members have any cultural biases, norms, or customs that must be accommodated by the site’s design and organization?
3. Determine the general content
a. Home page
i. Who: Text name, graphic logo, tag line, copyright notation, etc.
ii. What: Summary text and images that show visitors what is available at the site
iii. Where: Easily identifi able links to other pages at the site to indicate where specific information or features are found
iv. Search feature
v. *use homepage to establish site and company’s visual identity (branding)
b. Underlying pages ex :)
· Product catalogs
· Checkout information
· Customer account information
· Customer service information
· Contact information
· Privacy policy and security information
· A business blog
c. Splash and entry pages: uses images, animation, and sound to capture visitors’ attention and draw them into the site for further exploration: *careful*
d. Multimedia: some combination of text, images, animation, audio, or video (interactive media)
e. Animated GIF/ Flash animation
f. Dynamically generated content: updates periodically and can appear on a site’s pages when triggered by a specific event, such as the time of day or by visitor request. à database
4. Select the structure: outline with text, make a flowchart or storyboard the way underlying pages and content link to the home page
a. Linear/tutorial
i. Progresses users one page at a time: used for instructional, historical or chronologically based sites
b. Random or webbed site structure: hypertext—visitors choose the order (smaller sites)
c. Hierarchical: categories and subcategories by an increasing level of detail,
5. Design the look and feel of the site
6. Specify navigation system
No comments:
Post a Comment