Website Designing
alisgh
new_compressed_zipped_folder.zipITC216_ITC589_week01.pptx
ITC216 & ITC589
Week 1 – Background to Multimedia
This week we will cover:
The evolution of the Internet, Internet standards organizations, and the difference between the Internet, intranets, and extranets.
The beginning of the World Wide Web, ethical use of information on the Web, Web Accessibility, and future Internet trends.
An introduction to Multimedia and the difference between online and offline Multimedia
Learning Outcomes
2
2
Everything that can be invented has been invented.
Charles H. Duell, Commissioner, U.S. Office of Patents, 1899
Famous predictions
3
I think there is a world market for maybe five computers.
IBM Chairman, Thomas Watson, 1943
Famous predictions
4
Computers in the future may have only 1,000 vacuum tubes and perhaps weigh only 1.5 tons.
Popular Mechanics, 1949
Famous predictions
5
There is no reason for any individual to have a computer in their home.
Ken Olson (President of Digital Equipment Corporation) at the convention of the World Future Society in Boston, 1977
Famous predictions
6
640K ought to be enough for anybody
Microsoft Chairman, Bill Gates, 1981
Famous predictions
7
Telecommunications
Some were sceptical : ‘The telephone is probably a good thing for the Americans, but here in London we have enough messenger boys.’
Some more visionary ‘The telephone is such an important invention... that there will come a time when every town and city will have one.’
In the beginning
8
When phone came along no technological parallel
Had a long development and large learning exp for society
When fax came along was not such a big deal cos it was just a diff way of doing the same thing
Internet on the other hand is a new way of doing a new thing and we still arent really sure what that thing is at the moment
Tel co’s see as future for comms
Pubs - future for pubs
Broadcasters talk about web TV and so on
Who knows what dir the net will take on in the future - who would have guessed back when tel was first invented we’d be where we were today?
Question
How long do you think the Internet has been around?
Internet
Interconnected network of computer networks
ARPAnet
Advanced Research Project Agency
1969 – four computers connected
NSFnet
National Science Foundation
Use of the Internet was originally limited to government, research and academic use
1991 Commercial ban lifted
Evolution of the Internet
10
Internet is everywhere - you cant watch TV or radio without ads encouraging you to visit their websites.
The Internet began as a network to connect computers to research facilities and universities and was started with 4 computers in 1969
Advanced research projects agency
National Science Foundation was developed and then connected to arpanet
From 4 in 1969
To 100,000 in 1989
In 1991 the ban on commercial activity was lifted and by the end of 1992 there were over 1 million hosts and by 2006 439 Million hosts
10
Reasons for Internet Growth in the 1990s
Removal of the ban on commercial activity
Development of the World Wide Web by Tim Berners-Lee at CERN (1991)
Development of Mosaic, the first graphics-based web browser at NCSA – easier to use
11
11
Growth of Internet
Hobbes Internet Timeline
www.zakon.org/robert/internet/timeline /
12
12
How many website were there in 1990?
(when I was in high school…)
How many website were there in 2000?
How many websites are there now? (approx)
Questions
Changes in telecommunications
Cheaper, increased reliability
Ability to transmit large quantities of data
Move from analogue to digital
More service providers
As a result
Computer networks, data communication became common
Use of computers for international telecommunications available to all
How did we get here
14
Notes
What do you think has driven Internet growth in the past 5 years?
Question
http://www.netvalley.com/intval1.html
http://vlib.iue.it/history/internet /
A great video that explains the history of the Internet in 8 minutes: www.youtube.com/watch?v=9hIQjrMHTv4
Some more history links
16
To continue more history - look at
Client/Server: An architecture that allows the distribution of computing tasks between/among two/more computing resources.
Client: The computer requesting a service
Server: The computer providing the requested service
The Client/Server (C/S) Model
Server – designed to address a client’s request
Client – any computer connected to a server within a network
A cluster of computers (called clients) connected to one or more servers to form a network
Allow authorized user to access any programs/application residing on the server
Client/Server Network
Client/Server Network (Cont’d)
Benefits
Centralized security control
Simpler network administration than peer-to-peer network
Centralized password
More scalable
Ideal for computers that are far apart
Drawbacks
Network failure - clients are helpless if server fails
Specialized staff are needed
Higher costs
Client requests a specific page
Server locates page and serves it up to client as a transaction
Pages identified by URL
Pages are bundled into packets for transmission
Uses Transmission Control Protocol/Internet Protocol (TCP/IP)
Internet Communication
Packet
Grouping of data for transmission on a network
Large messages are split into a series of packets for transmission
Protocol
A rule governing how communication should be conducted between two parties, two computers, or a sources and a destination
Internet Protocol
Set of rules used to pass packets
Information Transfer
Permanent Connection
Local Area Network (LAN)
Cable modem
Asynchronous digital subscriber (ADSL)
Dial-Up Connection
Online mode
Offline mode
Telecommunication Infrastructure of the Internet
Intranet
A private network contained within an organization or business used to share information and resources among coworkers.
Access to the intranet is normally controlled by an authentication process which checks the user’s rights to access requested information
Extranet
A private network that securely shares part of an organization’s information or operations with external partners
Intranet & Extranets
23
When an intranet connects to the outside internet, usually a gateway or firewall protects the intranet from unauthorised access
Privacy and security are important issues - digital certificates, encryption of messages and VPN’s (virtual private networks) are some technologies used to provide security and privacy
23
The Internet Society
A professional organization that provides leadership in addressing issues related to the future of the Internet
IETF-- Internet Engineering Task Force
RFC – Requests for Comments
IAB – Internet Architecture Board
Internet Standards & Coordination
24
IETF - protocol engineering and development part of Internet - development of new internet stand specifications
IAB - defining overall archtecture - provides guidance and direction to IETF
24
ICANN - The Internet Corporation for Assigned Numbers & Names
Non-profit organization
Main function is to coordinate the assignment of:
Internet domain names
IP address numbers
Protocol parameters
Protocol port numbers.
Internet Standards & Coordination
25
25
Individual networks and country transmission nets are independent
Control really only exists at a technical standards level
Does control host numbering and names to keep host addresses unique, like telephone numbers.
Packet Switching
Break messages into small pieces called packets
Route packets individually across network
The Internet
W3C – World Wide Web Consortium
Develops recommendations and prototype technologies related to the Web
Produces specifications, called Recommendations, in an effort to standardize web technologies
WAI – Web Accessibility Initiative
Web Standards and the W3C Consortium
27
27
WAI – Web Accessibility Initiative
Develops recommendations for
web content developers,
web authoring tool developers,
developers of web browsers, and
developers of other user agents to facilitate use of the web by those with special needs.
WCAG
Web Content Accessibility Guidelines http://www.w3.org/WAI/WCAG20/quickref/
Web Accessibility
28
28
Section 508 of the Rehabilitation Act
requires that government agencies must give individuals with disabilities access to information technology that is comparable to the access available to others
Web Accessibility
29
29
What is Multimedia
Combination of different media represented in digital form
Combination of different media is not new
Integration of media is natural
Multimedia
30
“any combination of two or more media, represented in digital form, sufficiently well integrated to be presented via a single interface, or manipulated by a single computer program.”
Chapman & Chapman, 2004.
“a multimedia system is a system that is interactive and uses more than one medium in an integrated way. The media are rich media and are stored media”
Barfield, 2004
“the combination of a variety of communication channels into a coordinated communicative experience for which an integrated cross-channel language of interpretation does not exist.”
Elsom-Cooke, 2001
“any combination of text, art, sound, animation, and video delivered to you by computer or other electronic or digitally manipulated means.”
Vaughn, 2004
Some definitions
31
Multimedia - example
32
Is computer-based multimedia the next leap forward for human expression?
33
Want to encourage you to think
And form your own opinions
Not tell me what you think I want to hear
Small group - lecture / tutorial
Pose this question
“The implementation of multimedia capabilities in computers is just the latest episode in a long series: cave painting, hand-crafted manuscripts, the printing press, radio and television… These advances reflect the innate desire of man to create outlets for creative expression, to use technology and imagination to gain empowerment and freedom for ideas.”
Glenn Ochsenreiter, Director, Multimedia PC Council.
34
35
Applications
Education and training
Business
POS and ‘Kiosks’
Entertainment and gaming
Government and politics
Reference and data dissemination
Computer-mediated communications
Where do we use Multimedia?
36
As said before - mm is still relatively new and new developments are constantly changing the boundaries between what can be successfully achieved over the Internet, an intranet (a high speed, dedicated, private, local area network), and what is best left to the stand-alone computer with or without a CD-ROM.
Some of the areas where mm has already been used are:
“Interactivity empowers the end users of your project by letting them control the content and flow of information.”
Vaughn, 2004
Interaction
37
Pg 15 of chapman - diff view
Interactivity is a misnomer - altho we do and will continue to use the term in broad terms - when a computers role is to present choices and respond to them - it cannot be seen to be keeping up its end of the bargain. - chapman says the only true interaction can occur when another person is involved. Some games for example - only interaction with fellow players is when you try to kill them.
Vaughn
When you allow an end user to control what and when the elements are delivered.
Needs to be used approp - summers
Can be used to shape info to a users particular needs
It can be used persuasively - persuade users to take on a service on take on your info - con artists and salespeople alike know that if your goal is to get users to act in some way - then you can encourage that action by building a pattern of active agreement and involvement. Ethics is the only diff
“A picture is worth a thousand words” - but is it enough?
“Seeing is believing” - but experience brings understanding.
People learn or absorb information in different ways.
Why use Multimedia?
38
one or two words could make all the diff to clarifying a pic
Seeing something happen dynamically in a video, animation (even cartoon) or movie is often much more readily understood than reading or hearing the same concept.
Helps demonstrate subjects that require time, movement etc. to understand
* Supports different learning styles
* Adds interest to learning materials
* Supports those with special needs
Local
Hard drive
CD ROM
DVD
Online
Use Internet and WWW to interact with a remote application
Hybrid
Online and Local
Intranet multimedia application
Multimedia Delivery
39
Storage / speed
An extension of multimedia that utilises the Internet and WWW to access and deliver data and applications.
Can provide
Current information and data
24hr access
Global access
Cross platform delivery
Online Multimedia
40
Server and client software
Authoring software
Media size and data rate
Interaction required
Pre-loading and streaming
Synchronisation
Run-time environment
Online VS CD ROM
41
URLs not up to date
Information content not up to date
Over-done effects/graphics
Users can modify your designs in the browser – change text size, turn off images, turn off sound
Users have different platforms
Bandwidth limitations
Problems with Online Multimedia
42
Self explan
Exercise 1
Scenario: you are creating a website for the new tram line that is being currently built in Sydney.
What are the advantages and disadvantages of using online multimedia on this site?
What kinds of multimedia could be helpful to explain and promote this service?
Exercise 2
Scenario: You are researching the competition to help you create an interactive website for a cool new sunglasses.
Find 3 different competitor's websites using Google
For each website you visit, write down the name of the site, its URL, and:
Describe each site in terms of its multimedia elements.
Discuss whether its multimedia content is appropriate and where additional media content might improve the site.
Think about some criteria you could use to rate the sites – how would you decide which website is the best?
Please purchase your textbook!
Think about which assignment topic you would like to choose.
Before next week
45
image1.jpeg
image2.jpeg
image3.jpeg
image4.png
ITC216_ITC589_week02.pptx
ITC216 and ITC589
Week 2 – Topic 1
1
2
What is Web Accessibility?
Web accessibility means that people with disabilities can use the Web.
More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
Web accessibility also benefits others, including older people with changing abilities due to aging or people who are temporarily injured or ill.
People who are blind or have vision impairments can use appropriate equipment and software to gain access to banking services, online grocery shopping, and electronic documents in audio or large print form
People who are deaf or have hearing impairments could have more immediate access to captioning or transcription of audio material
Many people whose disability makes it difficult for them to handle or read paper pages can use a computer, for example with a modified keyboard or with voice control
Worldwide Web publications may provide an effective means of access for people whose disability makes it difficult for them to travel to or enter premises where the paper form of a document is available.
What is Web Accessibility?
Accessibility barriers
Millions of people have disabilities that affect their use of the Web.
Currently most Web sites and Web software have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web.
As more accessible Web sites and software become available, people with disabilities are able to use and contribute to the Web more effectively.
What are some conditions or disabilities that can affect computer/Internet use?
Question
Accessibility benefits everyone
Web accessibility also benefits people without disabilities.
For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations.
This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, and people with changing abilities due to aging.
As issued by the Australian Human Rights Commission under section 67(1)(k) of the Disability Discrimination Act 1992
Authorises the Commission to issue guidelines for the purpose of avoiding discrimination.
World Wide Web Access: Disability Discrimination Act Advisory Notes
www.hreoc.gov.au/disability_rights/standards/WWW_3/www_3.html
Australian Requirements
The provision of information and online services through the Worldwide Web is a service covered by the DDA. Equal access for people with a disability in this area is required by the DDA where it can reasonably be provided.
This requirement applies to any individual or organisation developing a Worldwide Web page in Australia, or placing or maintaining a Web page on an Australian server.
Disability Discrimination Act 1992 ("the DDA")
This includes pages developed or maintained for purposes relating to employment; education; provision of services including professional services, banking, insurance or financial services, entertainment or recreation, telecommunications services, public transport services, or government services; sale or rental of real estate; sport; activities of voluntary associations; or administration of Commonwealth laws or programs. All these are areas specifically covered by the DDA.
In addition to these specific areas, provision of any other information or other goods, services or facilities through the Internet is in itself a service, and as such, discrimination in the provision of this service is covered by the DDA. The DDA applies to services whether provided for payment or not.
Disability Discrimination Act 1992 ("the DDA") cont.
The Web is an important resource:
Education
Employment
Government
Commerce
Health care
Recreation
Therefore it is essential that the Web provides equal access and equal opportunity to people with disabilities.
Why Web Accessibility is Important
11
The Australian Human Rights Commission believes that the Web Content Accessibility Guidelines that have been developed by the W3C Consortium provide the most comprehensive set of benchmarks for assessing the accessibility of websites, and represent current international best practice in accessible web design.
The WAI:
Develops
Strategies
Guidelines
Source materials
Resources
To make the Web accessible to people with disabilities
Welcomes
Participation from around the world
Volunteers to review, implement & promote guidelines
Dedicated participants in Working Groups
Web Accessibility Initiative - WAI
12
WCAG 2.0 is a stable, referencable technical standard.
It has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust.
WCAG 2.0 is now the standard to be used for all new web content.
Web Content Accessibility Guidelines
13
The WCAG 2.0 applies to all Web content
Not specific to any one Web technology.
WCAG 2.0 is organized around four design principles for Web accessibility:
Content must be perceivable
Interface elements in the content must be operable
Content and controls must be understandable
Content must be robust enough
Each principle has guidelines
Each guideline has success criteria
WCAG 2.0
14
[Priority 1 or Level A]
A Web content developer must satisfy this checkpoint.
[Priority 2 or Level AA]
A Web content developer should satisfy this checkpoint.
[Priority 3 or Level AAA]
A Web content developer may address this checkpoint..
Priorities & Levels
15
Text Alternatives:
Guideline 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
Non-text Content:
1.1.1 All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)Understanding Success Criterion 1.1.1
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
WCAG 2.0 examples of Level A
16
WCAG 2.0 - Quick reference
http://www.w3.org/WAI/WCAG20/quickref/
WCAG 2.0 Quick Reference List
1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.2 Time-based Media: Provide alternatives for time-based media.
1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure.
1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
2.1 Keyboard Accessible: Make all functionality available from a keyboard.
2.2 Enough Time: Provide users enough time to read and use content.
2.3 Seizures: Do not design content in a way that is known to cause seizures.
2.4 Navigable: Provide ways to help users navigate, find content and determine where they are.
3.1 Readable: Make text content readable and understandable.
3.2 Predictable: Make Web pages appear and operate in predictable ways.
3.3 Input Assistance: Help users avoid and correct mistakes.
4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
17
Examine pages using graphical browsers
Use a graphical user interface (GUI) browser
Turn off images, and check for alternative text
Turn off the sound, and check for text equivalents.
Use browser controls to vary font-size
Test with different screen resolution, and check that horizontal scrolling is not required
Change the display colour to grey scale and check that the colour contrast is adequate.
Implementation – quick test
18
.
Without using the mouse, use the keyboard to navigate through the links and form controls on a page
Examine pages using specialized browsers
Use a voice browser or a text and examine
Is equivalent information available through the voice or text browser as is available through the GUI browser?
Is the information presented in a meaningful order if read serially?
Implementation – quick test
19
Evaluating accessibility early and throughout development can identify accessibility problems early when it is easier to address them.
Simple techniques can determine if a Web page meets some accessibility guidelines.
There are evaluation tools that help with evaluation.
However, knowledgeable human evaluation is required to determine if a site is accessible.
Evaluating the Accessibility of a Web Site
20
Images and animations: Use the alt attribute to describe the function of each visual.
Image maps. Use the client-side map and text for hotspots.
Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
10 Quick tips for improving accessibility
21
Graphs & charts. Summarize or use the longdesc attribute.
Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
Frames. Use the noframes element and meaningful titles.
Tables. Make line-by-line reading sensible. Summarize.
Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG
10 Quick tips for improving accessibility
22
List as many accessibility problems as you can find on these sites:
Exercise
24
Copyright & copyright laws
Censorship
Authorship and ownership
Other Legal Issues
25
Obtaining rights
New works
Derivative works
Copyright
26
“ There is a serious issue facing multimedia developers. Now that they have tools to creatively modify things, how much of someone else’s image, music, or video clip needs to be modified before ownership changes? This is up for grabs. There is a law called ‘fair use,’ which comes into play in a very limited way here. But I think there needs to be a law called ‘fair modification’”
Trip Hawkins, Chairman,
Electronic Arts
Derivative works
27
Australian Copyright Council
Information Sheets for:
Internet: copying from
Digital Agenda Amendments
Broadband Content
Music: copying MP3s, CDs and audio-cassettes
Videos & DVDs: copying
Copyright links
28
Australia’s Censorship System
http://libertus.net/censor/auscensor.html
Australia’s Internet Censorship System
http://libertus.net/censor/netcensor.html
Censorship
29
Developer ownership
Copyright on new works
Permission
Fair use
Public Domain
Trademarks
Plagiarism
Authorship / Ownership
30
Testing
Many IT systems and websites fail
Most fail as a result of inadequate testing. It is hard to get authors, programmers, managers, clients, etc. to realise just how much time and effort is needed for adequate testing in all the possible combinations of circumstances.
In addition, multimedia applications over the WWW need to be tested on all possible delivery platforms. This is often impossible so you must test:
on the targeted delivery platform
on as many platforms and as many variations of them as you can afford
in a planned and methodical way
keeping detailed records of your tests
Alpha testing is internal testing to confirm that your product works.
This includes unit testing, component testing, and system testing. During this time you will compress files, edit for misspelled words and unclear directions, broken links, and sync audio and video.
You will also test your product on the lowest common denominator machines to make sure download times are acceptable.
Devise clear testing procedures.
Study the effectiveness of design prototypes and acknowledge weaknesses.
Devise clear bug-reporting procedures and recheck corrected bugs systematically
Alpha testing
32
Check images and sounds as early as possible
Check
Graphic objects
Screen text – spelling, etc
Sound
Movies/videos
Hot spots/image maps
Unit testing
33
Test on as many hardware and OS platforms as possible
Test as many typical configurations as possible
Configuration testing
34
clicking anywhere on the screen
double-clicking as opposed to single-clicking
clicking outside the programs window to suspend it and then resuming.
running on all anticipated hardware configurations
changing the monitor's resolution to see how colours display at lower resolution
Random testing
35
Real world trials
Best if devised and supervised by people not originally involved in the production of the site
The second phase of software testing in which a sampling of the intended audience tries the product out.
Beta testing can be considered "pre-release testing."
Beta test versions of software can be distributed to curriculum specialists and teachers to give the program a "real-world" test.
Beta testing
36
Usability Testing
Usability testing of web sites is:
an essential element of quality assurance
a true test of how people actually use a web site
easy when you know how
A usability test is:
a series of individuals using a site under guidance from a facilitator
a test of whether outsiders can successfully use a web site
Usability Testing
Usability – allowing the user to manipulate the web’s sites feature to accomplish a particular goals. Three measures:
Effectiveness
The accuracy and completeness with which users complete a particular task
Efficiency
The resources expended in relation to the effectiveness of the user
Satisfaction
The comfort and acceptability of the web site to the user
Usability Testing
What are you testing?
With all tests you want to discover whether the user:
gets the point of the page(s)
understands the navigation system
can guess where to find things.
In a general test you want to know:
how do users interact with the web site you are testing?
what is difficult for people to do?
where do they get lost?
what makes sense to them?
what makes them feel distrustful or insecure?
what do they like and what do they hate?
In a specific test you might want to know, for example:
can the user accomplish a key task?
can the user find something specific?
Running the test
Users should be:
not have been involved with the web site in any way
completely new to the web site (so don't ask the same person twice)
familiar with using the Web in general.
Prepare a script
Introduce yourself
Reassure, establish rapport: 'Please think aloud, you cannot make mistakes, we are testing the site (not you).'
Clarify: purpose of test, confidentiality issues.
State task or tasks, e.g.: 'What might you click on if you wanted to find out about a home loan?'
Allow users to try to accomplish the task in their own way.
End the test: say thank you, reply to previously unanswered questions, give payment or a gift if appropriate.
Running the test
Sit the user down and run through the first part of your script. Then turn on the computer and show the first web page you're testing. Start the test.
Notice the user's behaviour, and note every occasion the user:
hesitates, worries, or is forced to think
misunderstands something
gets frustrated or annoyed
gives up
You are only an observer. Watch the user do what comes naturally.
Don't help.
Much of the time you'll just be probing, and encouraging the user to say what they're doing and thinking.
Use everyday language, not jargon.
Keep calm: you want the user to find faults! Don't take it personally.
Write everything down.
Don't interfere or ask leading questions.
Observation
Interview / verbal report
Thinking aloud
Questionnaire
Auto data-logging program
Software support
Data collection
42
After the test
Report on test
Write a 1-2 page report simply noting each problem the user found. Do it immediately while the test is fresh in your mind.
Optional: mark each problem as serious, less serious, or preference. ('Preference' means matters of opinion, such as whether the colours are nice. Preferences don't affect usability.)
Recommend solutions only if you are required to do so. Clearly differentiate your recommendations from your observations.
Give your report to the appropriate person or group: e.g. the owner or web development team.
Links about usability testing
The following links provide details on what is and how to conduct a useability test. After reading these sites feel free to expand your knowledge of this area by finding more related resources. An Australian Government site on usability testing : www.finance.gov.au/publications/user-profiling-and-testing-toolkit/ Recommended procedures www.webpagecontent.com/arc_archive/124/5/ Two useful usability test methods explained.
Reading 1, Horton, S. (2006)
Reading 3, McCracken, D. (2004)
Chapter 11.7, Felke-Morris text
Last week’s reading:
Chapter One - Felke-Morris
Optional
Screen readers www.webaim.org/articles/screenreader_testing/
Readings
45
Questions from Reading 3
How is program debugging similar to testing with a prototype?
What is the difference between formative and summative evaluation?
What is the difference between user-based and expert-based evaluation?
What is a test scenario? Where should you look for information to build test scenarios?
When testing with a paper prototype, how much of the website do you need to prototype?
What is thinking aloud? Why is it valuable during a user-based test?
What activities should the team carry out after the testing session?
image1.jpeg
ITC216_ITC589_week03.pptx
Web Development & Design Foundations
ITC216 and ITC589 - Week 3
1
Identify the skills, functions, and job roles needed for a successful web development project
Describe the standard System Development Life Cycle
Apply the System Development Life Cycle to web development projects
Describe other common system development methodologies
Choose a domain name
Describe web hosting alternatives
Evaluate web hosting alternatives
2
Learning Objectives
2
Project Manager
Information Architect
Marketing Representative
Copy Writer & Editor
Content Manager
Graphic Designer
Database Administrator
Network Administrator
Web Developer
3
Skills and Functions Needed for a Successful Large-Scale Project
3
The skills and functions are essentially the same as on a large project
Each person may wear many “hats” and juggle their job roles
Example: The web developer may also be the graphic designer.
Some job roles may be outsourced
Most Common: An external web site provider is used so there is less (if any) need for a Network Administrator.
4
Skills and Functions Needed for a Successful Small Project
4
Finding the right people to work on a project is crucial
Consider:
work experience
portfolio
formal education
industry certifications
Alternative: Outsource all or portions of the project to a web design/development firm
5
Project Staffing Criteria
5
6
System Development Life Cycle
Problem Definition
Feasibility Study
Analysis
Design
Coding
Testing
Use
6
7
Multimedia Development LC
Problem Definition
Feasibility Study
Analysis
Design
Prototyping
Final authoring
Evaluation
Content creation
Testing
Production
7
8
The Development Process
Life cycle
8
1/3 of your time to be spent on each:
Problem definition, feasibility, analysis/design, prototyping
Final authoring, content creation, production
Testing and evaluation
9
Time allocation
9
Determine the intended audience
Determine the goals or mission of the web site
Short-term goals
Long-term goals
Develop measurable objectives such as:
Number of visitors
Percent of product sales
Main Job Roles Involved:
Client, Project Manager, Information Architect, Marketing Representative, Senior Web Developer
10
Web Development: Conceptualization
10
Determine the following:
information topics
functionality requirements (high-level)
Determine “what” a site will do – not “how” it will do it
environmental requirements
Content requirements
If a redesign, compare the old approach with the new approach
Review competitor’s sites
Estimate costs
Cost/Benefit analysis
11
Web Development: Analysis
11
Analysis
Client organisation’s mission
Applications objectives
Audience & audience level
Constraints
Requirement specifications
Delivery platform
All must be documented and approved
12
Analysis, Planning & Design
12
Clearly state the purpose of development. Is it:
To provide information
Educational
To gather information
Selling a product or range of products
Promotion of a company / a product
For communication (internal, external)
13
Analysis cont..
13
Planning - people, time & budget
Allocation of personnel and equipment resources
Scheduling the project (project timing)
Estimating: time, money and people
Establish and monitor a project budget (costing)
Identify and manage potential risks that could hinder the project
14
Planning
14
Determine the site organization
Prototype the design
Determine a page layout design
Document each page
Main Job Roles Involved:
Information Architect or other Analyst, Graphic Designer, Senior Web Developer, Content Manager, Client, Project Manager, Marketing Representative
15
Web Development: Design
Main Navigation Area
15
Software packages, languages, file formats
Naming conventions - data, files, variables
Layouts
Modules
Documentation
16
Specifying standards
16
Choose a web authoring tool
Organize your site files
Develop and individually test components
Add content
Main Job Roles Involved:
Project Manager, Senior Web Developer, Web Developer, Graphic Designer, Database Administrator, Content Manager
17
Web Development: Production
17
Test on different web browsers and browser versions
Test with different screen resolutions
Test using different bandwidths
Test from another location
Lots of testing!
Main Job Roles Involved:
Project Manager, Web Developer, Tester (sometimes web developer, sometimes Quality Assurance person), Client, Content Manager
18
Web Development: Testing
18
Automated Testing Tools and Validation
Automated Testing (Link checkers, etc.)
W3C XHTML and CSS validation tests
Usability Testing
Testing how actual web page visitors use a web site
Can be done at almost any stage of development
Early –use paper and sketches of pages
Design stage – use the prototype
Production & Testing phase – use actual pages
19
Web Development: Types of Testing
19
User or Client Testing
Client will test site before giving official approval for site launch
Approval & Launch
Obtain sign-off form or email from client
Upload files to web server
Create backup copies of files
MAKE SURE YOU TEST THE WEB SITE AGAIN!
20
Web Development: Approval & Launch
20
21
Contingency plans
21
Maintenance – the never-ending task…
Enhancements to site
Bug fixes to site
New areas to be added to site
A new opportunity or issue is identified and another loop through the development process begins.
22
Web Development: Maintenance
22
Re-visit the goals, objectives, and mission of the web site
Determine how closely they are being met
Develop a plan to better meet the goals, objectives and mission
23
Web Development: Evaluation
23
Establishes a Web presence for your business/ organization
New Business
choose domain name while selecting company name
Established Business
choose a domain name that relates to your established business presence
Domain Names
24
24
Describe your business
Be brief, if possible
Avoid hyphens
TLD (top level domain name)
.com, .net, .biz, .info and others
.org for non-profits
Brainstorm potential keywords
Avoid trademarked words or phrases
Know the territory (use Google to check competitors!)
Verify availability
Choosing a Domain Name
25
25
There are many domain name registrars, including
Visit Registrar, choose name, check availability, pay with credit card or Paypal
Registering a Domain Name
26
26
Some organisations administer a Web server in-house and host their own Web site.
Many companies use a Web host provider.
A good Web hosting service will provide a robust, reliable home for your web site.
A poor Web hosting service will be the source of problems and complaints.
Do not use free/cheap Web hosting for a commercial web site.
27
Web Hosting
27
Hosting Needs: Small to Medium Web Site
Virtual Hosting
The web host provider's server is divided into a number of virtual domains and multiple web sites are set up on the same computer.
Consider:
Future growth and scalability of web host
Operating System
Types of server-side processing supported
Bandwidth of Internet connection
Both local and national web host providers
Guaranteed uptime – service level agreement (SLA)
Technical support
28
Types of Web Hosting(1)
28
Hosting Needs: Large to Enterprise Web Site
Dedicated Web Server
Co-located Web Server
Consider:
National web host providers
Guaranteed uptime – service level agreement (SLA)
Bandwidth of Internet connection
Technical Support
29
Types of Web Hosting(2)
29
Dedicated Web Server
The exclusive use of a rented computer and connection to the Internet that is housed in the Web hosting company's premises.
The server can usually be configured and operated remotely from the client company or you can pay the web host provider to administer it for you.
30
Dedicated Web Server
30
Co-Located Web Server
A computer that your organization has purchased and configured.
Your organization effectively rents space at the web host provider's location.
Your server is kept and connected to the Internet at their location.
Your organization administers this computer.
31
Co-Located Web Server
31
See the Web Host Checklist (Table 10.1)
32
Choosing a Virtual Host
Operating System
Web Server Software
Bandwidth
Technical Support
Service Agreement
Disk Space
Uploading Files
Canned Scripts
Scripting Support
Database Support
E-Commerce Packages
Scalability
Backups
Site Statistics
Domain Name
Price
32
For each of these projects describe the likely end-users:
A portfolio site for a filmmaker showcasing his projects
A portal for people living in a small country town to connect them to services in the area
An online technology magazine with the latest gadgets
A website about education options in Australia for overseas students
For each end-user described above, write down what kind of computer platform they would need and any limitations they might have.
Exercise 1
Exercise 2
Use the Web to access some of the sites which include multimedia features.
List what sorts of multimedia they have placed on their sites.
Describe what techniques they have used to present their products/services. This will give you an idea of what is possible with multimedia technology and may also show you some of the drawbacks.
Exercise 3
For each step in the Development Process, list the tasks that you think you will need to do to complete your assignment for ITC216/589
E.g. Analysis Stage – Find out client’s mission, client’s reason for website, research competitors website, etc.
Readings
Chapter 4 & 12 from textbook (Felke-Morris)
Reading 4
image1.jpeg
image2.png
image3.png
image4.jpeg
ITC216_589_week04.pptx
Week 4
Basic Web Design
ITC216 and ITC589
Describe the most common types of Web site organization
Create clear, easy Web site navigation
Design user-friendly Web pages
Improve the readability of the text on your Web pages
Use graphics appropriately
Create accessible Web pages
Describe design principles
Describe Web page design techniques
Apply best practices of Web design
2
Learning Objectives
2
Highly variable
are capable of remarkable feats
can perceive and respond rapidly to external stimuli
solve complex problems
create masterpieces
We - Us - Human Beings
3
3
Highly variable and subject to
lapses of concentration
changes in moods
changes in motivation and emotion
have prejudices and fears
make errors and misjudgements
etc.
We - Us - Human Beings
4
4
Systems that are easy for the user to use, reduce error by applying psychology
We can use our understanding of the way people act and react in their environment
Human Element a Central Concern
5
5
Human-computer interaction is a cognitive activity, i.e. it involves the processing of information in the mind
Aim in multimedia design
to ensure this information processing activity is within the capabilities of the users’ mental processes
Provides knowledge about the range of user capabilities
Helps identify and explain the nature and causes of problems users encounter
Cognitive Psychology
6
6
Key Areas of Cognitive Psychology
Perception
Attention
Information Processing
Memory
Learning
Mental Models
7
7
Our environment has many hundred stimuli
We can attend to only one (or two) of them at any instant
We choose (or filter) which stimulus(i) to attend to
That is we have limited attention capabilities
This act of filtering is call Selective Attention
Attention
8
8
We construct a model of the external world that is an interaction between the seen environment and previously stored knowledge that allows us:
a more stable view of our world
to perceive our world as three- dimensional
to perceive three-dimensional objects in two-dimensional fields, eg. the computer screen, photos
Visual Perception
9
9
Two-dimensional
Can display information as:
text
graphics
animation
video
sound
or any combination of these
Visual Perception of the Computer Screen
10
10
Good Screen Design ensures
legible text
no screen flicker
distinction between foreground and background
uncluttered
meaningful content to the user
meaningful structure to the user
Visual Perception of the Computer Screen
11
11
Hierarchical
Linear
Random (sometimes called Web Organization)
12
Web Site Organization (Navigational Structure)
12
A clearly defined home page
Navigation links to major site sections
Often used for commercial and corporate Web sites
13
Hierarchical Organization
13
Be careful that the organization is not too shallow.
Too many choices a confusing and less usable web site
Information Chunking
“seven plus or minus two” principle
George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory
Try not to place more than nine major navigation links on a page
14
Hierarchical - Too Shallow
14
Hierarchical Too Deep
Be careful that the organization is not too deep.
This results in many “clicks” needed to drill down to the needed page.
User Interface “Three Click Rule”
A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.
15
15
A series of pages that provide a tutorial, tour, or presentation.
Sequential viewing – some things need to be read in order, for example instructions or a recipe.
16
Linear Organization
16
Random Organization
Sometimes called “Web” Organization
Usually there is no clear path through the site
May be used with artistic or concept sites
Not typically used for commercial sites.
17
17
Make your site easy to navigate
Provide clearly labeled navigation in the same location on each page
Most common – across top or down left side
Can also provide “breadcrumb” navigation for complex sites
Types of Navigation
Graphics-based
Text-based
Interactive Navigation Technologies
Image Roll-overs
Flash
Fly-out or dropdown menus using scripting
Web Site Navigation Best Practices
18
18
Accessibility Tip
Provide plain text links in the page footer when the main navigation is non-text media such as images, Flash, or scripting.
19
Web Site Navigation Best Practices
19
Use a Table of Contents (with links to other parts of the page) for long pages.
Consider breaking long pages in to multiple shorter pages using Linear Organization.
Large sites may benefit from a site map or site search feature
20
Web Site Navigation Best Practices
20
Repetition
Repeat visual elements throughout design
Contrast
Add visual excitement and draw attention
Proximity
Group related items
Alignment
Align elements to create visual unity
21
Basic Design Principles
21
Design for your target audience
Appropriate reading level of text
Appropriate use of color
Appropriate use of animation
22
Web Page DesignTarget Audience
22
Use colors and animation that appeal to your target audience
Kids
Bright, colorful, animations, interactive
Young adults and older teens
Dark, often low contrast, mysterious, explore for themselves
Older people
Light backgrounds, clean colours, larger text
Everyone:
Good contrast between background and text
Easy to read
Avoid animation if it makes the page load too slowly
23
Web Page Design Colors & Animation
23
Site visitor forms a first impression within the first 8 seconds
Colour is the most important design element in a Web site
Choose colours that are simple and not distracting
Choose colours that reflect your audience’s values and cultural preferences
Colour and Its Psychological Effects
24
24
Colour choice
Colour choice
Here is a really helpful site for choosing font colour/background colour:
www.webmasterorbit.com/compare-color-combinations.html
Major Colours and Their Psychological Effects
| Red | Red is the most emotionally intense colour. It is the colour of love but also anger and danger. It creates attention, but tends to overtake other colours on the page. Red jumps forward on the screen. | |
| Blue | Blue is the colour of the sky and the ocean—peaceful and calming. It creates an optical impression that objects are farther away than they really are. | |
| Green | Nature, health, optimism, good luck. Green is the colour of money and has strong associations with finance and economic stability. But it is a mixed bag. It is linked with envy, sickness, and decaying food. It does not do well in a global market. | |
| Yellow | Cheerful sunny yellow is the first colour the eye processes. It is an attention-getter and represent optimism, hope, and precious metals. It tends to be overpowering in large areas. | |
| Purple | Purple is a complex colour and is the hardest colour for the human eye to discriminate. It represents spirituality, mystery, intelligence, royalty, luxury, wealth, and sophistication. |
27
27
| Orange | Orange represents energy, balance, warmth, and vitality. It is a colour most hated by Americans. The colour is more liked by Europeans and South Americans. | |
| Brown | Brown is the colour of earth and is quite abundant in nature. It represents reliability, comfort, and endurance. Men more than women tend to prefer brown over other colours. It can be considered dull and boring. | |
| Gray | Intellect, futurism, modesty, sadness, old age. It is the easiest colour for the eye to view. | |
| White | Purity and innocence, cleanliness, precision, sterility, but also death. It reproduces freshness and is quite popular at luxury Web sites. It gives the sense of being “pristine” | |
| Black | Power, sophistication, death, mystery, fear, unhappiness, elegance. It signifies death and mourning in many Western cultures. |
Major Colours and Their Psychological Effects (Cont’d)
28
28
Web site colours take on different cultural hues
Use a colour that is acceptable to various cultures
Blue is the most globally accessible colour
Age, class, and gender differences
Web sites for young children favor brighter, more solid colours
Men (generally) are attracted to cooler colours like blue and green
Women often prefer warmer colours like orange and red
Colour and Individual Differences
29
29
Colour perception problems are widespread
Colour deficiency can occur in any population, economic class, or ethnic group.
Most colour-blind people have red-green perception deficiency
Any designer should be aware of the problem
Understand how colour deficiency works
Any text on any mixed-colour background is inviting trouble
Accessibility Tip: Many individuals are unable to distinguish between certain colors (especially red and green).
See http://www.vischeck.com/showme.shtml
Colours for the Colour Blind
30
30
Web pages do NOT look the same in all the major browsers
Test with current and recent versions of:
Internet Explorer
Firefox, Mozilla
Opera
Mac versions of above
Safari for Mac
Design to look best in one browser (probably Internet Explorer) and degrade gracefully (look OK) in others
31
Web Page Design Browser Compatibility
31
Test at various screen resolutions
Most widely used:1280x1024, 1024x768 and 800x600 (older computers)
Design to look good at various screen resolutions
Centered page content
Set to either a fixed or percentage width
32
Web Page Design Screen Resolution
32
A sketch of blueprint of a Web page
Shows the structure of the basic page elements, including:
Logo
Navigation
Content
Footer
Wireframe
33
Place the most important information "above the fold“ (top part of screen visible without scrolling).
Use adequate "white" or blank space
Use an interesting page layout
34
Web Page Design Page Layout(1)
This is fine, but a little boring. See the next slide for improvements in page layout.
34
Better
35
Web Page Design Page Layout(2)
Best
Columns make the page more interesting and it’s easier to read this way.
Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.
35
Ice Design
AKA rigid or fixed design
Fixed-width, usually at left margin
Jello Design
Page content typically centered
Often configured with a fixed or percentage width such as 80%
Liquid Design
Page expands to fill the browser at all resolutions.
36
Page Layout Design Techniques
36
Avoid long blocks of text
Use bullet points
Use headings and subheadings
Use short paragraphs
37
Text Design Best Practices
37
Use common fonts:
Arial, Verdana, Times New Roman
Use appropriate text size:
medium, 1em, 16px, 12 pt, 100%
Use strong contrast between text colour & background colour
Use columns instead of wide areas of horizontal text (like a newspaper).
38
Text Design “Easy to Read” Text
38
Bold text as needed
Avoid “click here”
Hyperlink key words or phrases, not entire sentences
Separate text with “white space” or empty space.
Chek yur spellin (Check your spelling)
39
Text Design “Easy to Read” Text
39
Be careful with large graphics!
May take too long to download
Use the alt attribute to supply descriptive alternate text
Be sure your message gets across even if images are not displayed.
Use animation only if it makes the page more effective and also provide a text description.
Build clear navigation aids
40
Graphic Design Best Practices
40
Web Content Accessibility Guidelines 2.0 WCAG 2.0
http://www.w3.org/TR/WCAG20/Overview
http:// www.w3.org/WAI/WCAG20/quickref
Based on Four Principles (POUR)
Perceivable Content must be Perceivable
Operable Interface components in the content must be Operable
Understandable Content and controls must be Understandable
Robust. Content should be Robust enough to work with current and future user agents, including assistive technologies
Short article to read: www.smartplanet.com/blog/bulletin/disabled-americans-demand-digital-versions-of-wheelchair-ramps/15838
41
Designing for Accessibility
41
Table 4.1 in your Textbook (pg 92)
Page Layout
Browser Compatibility
Navigation
Color and Graphics
Multimedia
Content Presentation
Functionality
Accessibility
Online version available here: http:// terrymorris.net/bestpractices
Hint: you can use this for your blog entries…
42
Web Design Best Practices Checklist
42
Exercise 1
List the four basic principles of design.
View the home page of CSU ( www.csu.edu.au) and describe how each principle has been applied.
Have a look at: www.csu.edu.au/special/brand/?utm_source=brand&utm_medium=homepage&utm_campaign=promo
This explains how the new “branding” was designed and has some great information about design principles used.
Exercise 2
Using your Assignment topic (Healthy Habits, Mystery Machine, etc.) find 3 logos for similar companies using Google.
Paste them into a Word document and underneath discuss in 1 paragraph the colours and fonts used. If any shapes/pictures are used in the logo, include them in your discussion.
Exercise 3
Using your Assignment topic (Healthy Habits, Mystery Machine, etc) think about the colours that will be suitable for your topic and target audience.
What words, letters, or images could be used in the logo?
You can sketch on paper or try to design with shapes in Word.
This site helps you to find colours that look good together: http://colorschemedesigner.com/
Exercise 4
View your Assignment 1 chosen web site
Maximize and resize the browser window.
Decide whether the site uses ice, jello, or liquid design.
Adjust the screen resolution on your monitor (Start > Control Panel > Display > Settings) to a different resolution than you normally use.
Does the site look similar or very different?
Readings for this week
Word Documents in Week 4 folder - Design Phase and Analysis Phase.
Chapter 4 – from Felke Textbook
Reading 5 – from readings book
image1.jpeg
image2.png
image3.png
image4.png
image5.png
image6.png
image7.jpeg
image8.tiff
image9.tiff
image10.tiff
image11.jpeg
ITC216_589_week05.pptx
Online Multimedia
Week 5
HTML5 and CSS Basics
HTML5:
HTML5 syntax, tags, and document type definitions
The anatomy of a web page
Formatting the body of a web page
Formatting the text on a web page
Physical and logical style tags
Special Characters
Connecting Web pages using hyperlinks
Learning Objectives
2
2
Cascading Style Sheets (CSS):
Describe the evolution of style sheets from print media to the Web
List advantages of using Cascading Style Sheets
Use color on Web pages
Create style sheets that configure common color and text properties
Apply inline styles
Use embedded style sheets
Create CSS class and id selectors
Learning Objectives
3
3
Evolution of HTML
Markup Languages
SGML – Standard Generalized Markup Language
A standard for specifying a markup language or tag set
HTML – Hypertext Markup Language
The set of markup symbols or codes placed in a file intended for display on a web browser.
Element or tag – individual markup code
Attribute – modifies the purpose of a tag
5
5
Markup Languages
XML – eXtensible Markup Language
A text-based language designed to describe, deliver, and exchange structured information.
It is not intended to replace HTML – it is intended to extend the power of HTML by separating data from presentation.
6
6
Markup Languages
XHTML – eXtensible Hypertext Markup Language
Developed by the W3C as the reformulation of HTML 4.0 as an application of XML.
It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML.
7
7
Markup Languages
HTML 5
The next version of HTML 4 and XHTML 1
Currently in draft status – will be finalized in 2014
Incorporates features of both HTML and XHTML
Adds new elements
Eliminates some elements
Intended to be backward compatible
8
8
Each individual markup code is referred to as an element or tag.
Each tag has a purpose.
Tags are enclosed in angle brackets, "<" and ">" symbols.
Most tags come in pairs; an opening tag and a closing tag.
E.g. <body>…</body>
HTML Elements
9
9
Your First HTML5 Web Page
<!doctype html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8" />
</head>
<body>
... body text and more HTML tags go here ...
</body>
</html>
10
10
Anatomy of a HTML5 Web Page
DTD – describes the markup language syntax
HTML tag – contains the web page document
Head tag – contains the head section. The head section contains information that describes the web page document
Title tag – Text displays in title bar of window
Meta tag – describes the character encoding
Body tag – contains the body section
The body section contains the text and elements that display in the browser viewport.
11
W3C Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page.
XHTML Document Type Definition (DTD)
XHTML 1.0 Transitional
This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. We will use this DTD in this text
XHTML 1.0 Strict
Requires exclusive use of Cascading Style Sheets. We will not use this.
XHTML 1.0 Frameset
Required for pages using XHTML frames. We will use not use this.
12
12
XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
13
For HTML5 this DTD definition is replaced by :
<!DOCTYPE html>
13
XHTML First Web Page
XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> an opening tag
.... page info goes here
</html> a closing tag
HTML5 Alternative
<!DOCTYPE html>
<html lang= “en” >
<html> an opening tag
.... page info goes here
</html> a closing tag
14
14
Head Section Contains information that describes the web page document
<head>
…head section info goes here
</head>
Body Section Contains text and elements that display in the Web page document
<body>
…body section info goes here
</body>
Head & Body Sections
15
15
The Heading Element
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
16
The Paragraph Element <p> tag
Paragraph element
<p> …paragraph goes here… </p>
Groups sentences and sections of text together.
Configures a blank line above and below the paragraph
Align attribute
deprecated in XHTML
obsolete in HTML5
17
The Line Break Element <br> tag
Line Break element
Stand-alone tag
Called a void element in HTML5
…text goes here <br> This starts on a new line….
Causes the next element or text to display on a new line
18
The Horizontal Rule Element <hr> tag
Horizontal Rule element
Stand-alone tag
<hr >
Configures a horizontal line on the page
In HTML5, it should be used to indicate a thematic break at the paragraph level
19
The Blockquote Element <blockquote>
Blockquote element
Indents a block of text for special emphasis
<blockquote>
…text goes here…
</blockquote>
20
Phrase Elements
Indicate the context and meaning of the text
Display inline with the text
Common Logical Style Tags
<strong></strong>
To cause text to "stand out" from surrounding text. Usually bold. <strong>This is important</strong>
<em></em>
To cause text to be emphasized in relation to other text on the page. Usually italics.
<em>Please note</em>
21
XHTML List Basics
Unordered List
Description List (XHTML Definition List)
Ordered List
22
Unordered List
Displays information with bullet points
Unordered List Element
<ul> Contains the unordered list
List Item Element <li> Contains an item in the list
23
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
24
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
25
New name for HTML5
This element was called a Definition List in previous versions of HTML and XHTML.
Uses:
Display a list of terms and descriptions
Display a list of FAQ and answers
The Description List element <dl> tag Contains the definition list
The dt Element <dt> tag Contains a term or name Configures a line break above and below the text
The dd Element <dd> tag Contains a definition or description Indents the text
Description List
26
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
27
Display special characters such as quotes, copyright symbol, etc.
Character Code
© ©
< <
> >
& &
Special Entity Characters
28
The div element <div>
Purpose:
Configure a specially formatted division or area of a web page
Generally used in page layout
There is a line break before and after the division.
Can contain other block display and inline display elements
29
29
Writing Valid HTML
Check your code for syntax errors
Benefit:
Valid code more consistent browser display
W3C XHTML Validation Tool
Additional HTML5 Validation Tool
30
The Anchor Element <a>
The anchor element
Specifies a hyperlink reference (href) to a file
Text between the <a> and </a> is displayed on the web page.
<a href="contact.html">Contact Us</a>
href Attribute
Indicates the file name or URL Web page document, photo, pdf, etc.
31
31
More on Hyperlinks
Absolute link
Link to other websites
<a href="http://google.com">Google</a>
Relative link
Link to pages on your own site
Relative to the current page
<a href="index.html">Home</a>
32
32
More on Relative Linking
<a href="shampoo.html">Shampoo</a>
(page in the same folder)
<a href="../index.html">Home</a>
(page in folder one level above)
<a href="../services/bathing.html">Dog Bathing</a>
(up one folder and down into “services” folder)
33
33
Opening a Link in a New Browser Window
The target attribute on the anchor element opens a link in a new browser window or new browser tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
34
34
Email Hyperlinks
Automatically launch the default mail program configured for the browser
If no browser default is configured, a message is displayed
<a href="mailto:[email protected]">[email protected]</a>
35
35
Linking to Fragment Identifiers
A link to a part of a web page
Also called named fragments, fragment ids
Two components:
The element that identifies the named fragment of a Web page. This requires the id attribute.
<div id="top"> ….. </div>
2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. <a href="#top">Back to Top</a>
36
Note the use of the # in the anchor tag!
36
Skip to Content
37
Cascading Style Sheets (CSS)
Overview of Cascading Style Sheets (CSS)
See what is possible with CSS:
Visit http://www.csszengarden.com
Style Sheets
used for years in Desktop Publishing
apply typographical styles and spacing to printed media
CSS
provides the functionality of style sheets (and much more) for web developers
a flexible, cross-platform, standards-based language developed by the W3C.
39
39
CSS Advantages
Greater typography and page layout control
Style is separate from structure
Styles can be stored in a separate document and linked to from the web page
Potentially smaller documents
Easier site maintenance
40
40
Types of Cascading Style Sheets
Inline Styles
Embedded Styles
External Styles
Imported Styles
41
41
Description of the Types of Cascading Style Sheets
Inline Styles
Configured in the body of the web page
Use the style attribute of an HTML tag
Apply only to the specific element
Embedded Styles
Configured in the head section of a web page.
Use the HTML <style> element
Apply to the entire web page document
External Styles
Configured in a separate text file with .css file extension
The HTML <link> element in the head section of a web page associates it with the .css file
Imported Styles
Similar to External Styles
We’ll concentrate on the other three types of styles.
42
42
The “Cascade”
43