Download - Multimedia & The World Wide Web
![Page 1: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/1.jpg)
Multimedia & The World Wide Web
winny
HCI 201 Multimedia and the www
![Page 2: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/2.jpg)
Review!
winny
HCI 201 Multimedia and the www
![Page 3: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/3.jpg)
URL: Universal Resource Locator
• Four parts to each one (some parts optional)– Protocol – Domain name or server IP address – Director(ies) – File name
http://facweb.cs.depaul.edu/yqwang/index.htm
Protocol Domain Name Directory File Name
winny
HCI 201 Multimedia and the www
![Page 4: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/4.jpg)
HTML Skeleton
<html><head>
<title>Title of this web page</title>
</head>
<body>Stuff you want to present on this page
</body>
</html>
winny
HCI 201 Multimedia and the www
![Page 5: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/5.jpg)
The Flesh on an HTML document
• Tags + Contents + Comments• Comments
<!-- some explanation of your code -->• Contents <body>
- Text (included)- Multimedia obj & pictures are linked
winny
HCI 201 Multimedia and the www
![Page 6: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/6.jpg)
Tools for the Web Designer
• An editor– Text editor– Dreamweaver/FrontPage, etc
• A browser– Not really necessary, but you want to test
your work• A connection to the Internet and access to a
web server.
winny
HCI 201 Multimedia and the www
![Page 7: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/7.jpg)
Controlling page layout with tables
• Separate pages into different sections- Create one table for the entire page.
- Add content into cells:
TextImagesFormsTables…
Link list
Company logo
Image
winny
HCI 201 Multimedia and the www
![Page 8: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/8.jpg)
Nesting Tables
winny
HCI 201 Multimedia and the www
![Page 9: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/9.jpg)
Nesting Tables
winny
HCI 201 Multimedia and the www
![Page 10: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/10.jpg)
Organization and Site Structure
• Organizing your site carefully from the start can save you frustration and time later on
• Break down your site into categories and put related pages in the same folder
winny
HCI 201 Multimedia and the www
![Page 11: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/11.jpg)
Your local files structure
Lab machine
Your folder
AssignmentsPic folderImages
pic1
pic2
pic3
Media folderpage1 page2 page3
animation
sound
Homepage:Index.htm
Define site!
winny
HCI 201 Multimedia and the www
![Page 12: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/12.jpg)
Your directory structure
lab machine
winny
HCI 201 Multimedia and the www
DePaul Student Server
public_html
web folder
![Page 13: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/13.jpg)
Your directory structure
your account (root)
public_html
AssignmentsPic folderImages
pic1
pic2
pic3
Media folderpage1 page2 page3
animation
sound
HomepageIndex.htm
winny
HCI 201 Multimedia and the www
![Page 14: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/14.jpg)
Root Main Page Company Services
Service A Service B Images
Products Product A Product B Images
ProductA.jpgProductB.jpg
About Us Company History Bios Images
Contact Images
ImagesPhoto1.jpgLogo.gif
A More Elaborate Site
winny
HCI 201 Multimedia and the www
![Page 15: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/15.jpg)
Source File Management
• You should ... – Establish and follow file naming conventions
• Lowercase• Underscore between words
– Keep a copy of all source files in your possession• Don't rely on DePaul, your employer, or your
ISP to keep your work
winny
HCI 201 Multimedia and the www
![Page 16: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/16.jpg)
Source File Management
• You should ... – Make a working copy of files before making
sweeping changes, then use the working copy once you are sure everything works
– Create an archive of sources that you are not actively using, but may want to use sometime
winny
HCI 201 Multimedia and the www
![Page 17: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/17.jpg)
Error Checking
• ALWAYS check and double-check the site for spelling and grammatical errors
• Make sure the images and links are all working properly (TEST!!!)
• Errors make a site appear to be unprofessional
winny
HCI 201 Multimedia and the www
![Page 18: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/18.jpg)
Troubleshooting
• Make sure you refresh your browser if you have made a repair to the code and come back to look at it again
winny
HCI 201 Multimedia and the www
![Page 19: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/19.jpg)
Before you start it is important to determine what the site will look like and how it will be organized!
winny
HCI 201 Multimedia and the www
![Page 20: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/20.jpg)
Content matters most!
Prepare it as much as possible, as early as possible.
• What content already exists and what must be created?
• How often does the content change, or should it change?
• What resources are required to create and maintain the site?
winny
HCI 201 Multimedia and the www
![Page 21: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/21.jpg)
Content
Brainstorm ideas for your website!Organize the content into clear and intuitive
categories.What’s the navigational structure – roadmap?
winny
HCI 201 Multimedia and the www
![Page 22: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/22.jpg)
Make the content readable
• Good combinations for web page
• Bad combinations for web page
Blue on White Yellow on Black
White on Gray Red on Pink
Yellow on White Blue on Purple
Red on Green Green on Orange
winny
HCI 201 Multimedia and the www
![Page 23: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/23.jpg)
Content to prepare:
• Images – Logos – Products – Decorative – Navigational
• Information – Articles – News – Calendar of events – Contact names and numbers – Reference material
winny
HCI 201 Multimedia and the www
![Page 24: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/24.jpg)
Page Design
– Style: What's the overall impression you're trying to create?
– Layout: Will the page composition be conventional or unconventional? How will the different elements be arranged into visual groupings? How will the navigation options be presented?
– Words: Which tone of voice is best for the site's purpose and audience?
• Page design ideas should first be sketched out on paper. Working out your ideas on paper allows you to quickly explore different design ideas
winny
HCI 201 Multimedia and the www
![Page 25: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/25.jpg)
Web Design
• The heart of design is communication.• The basic rule for any design is “Form follows
function.” • Design must support function to the fullest
extent possible.• Think of web site navigation.• The coordination between form and function is
invisible to the user when done well and painfully obvious when it is not.
winny
HCI 201 Multimedia and the www
![Page 26: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/26.jpg)
Page content hierarchies
• Most important elements should be at the top/left of the page
• Consider monitor size/resolution• Left to right
winny
HCI 201 Multimedia and the www
![Page 27: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/27.jpg)
Page Design– make decision
• Shape as a design Element: – Square/round/wavy?
• Choose a set of color palette
• Keep those decision consistency • Visual design should reflect
– The purpose of the site– The identity of the Web site sponsor– And contribute to the site's usability
winny
HCI 201 Multimedia and the www
![Page 28: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/28.jpg)
winny
HCI 201 Multimedia and the www
![Page 29: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/29.jpg)
Unity
winny
HCI 201 Multimedia and the www
![Page 30: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/30.jpg)
Direction
winny
HCI 201 Multimedia and the www
![Page 31: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/31.jpg)
winny
HCI 201 Multimedia and the www
Direction
![Page 32: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/32.jpg)
winny
HCI 201 Multimedia and the www
Color-> feeling, some samples:
![Page 33: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/33.jpg)
winny
HCI 201 Multimedia and the www
![Page 34: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/34.jpg)
winny
HCI 201 Multimedia and the www
![Page 35: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/35.jpg)
winny
HCI 201 Multimedia and the www
![Page 36: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/36.jpg)
winny
HCI 201 Multimedia and the www
![Page 37: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/37.jpg)
winny
HCI 201 Multimedia and the www
![Page 38: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/38.jpg)
Then, make decision:
• Functionality – Static pages – Forms – Commerce – Multimedia – Chat – Search – Login – Database-driven
winny
HCI 201 Multimedia and the www
![Page 39: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/39.jpg)
Flowcharting
• Try arranging your content in different ways to find the best fit, should information be – Presented alphabetically?– Grouped into categories?– Presented along a timeline?– Sorted from simple to complex? – Organized into a hierarchy?
• With these things in mind, you can construct a flowchart showing the structure of the Web site as a whole
• A good flowchart of your site design shows-- How pages will be organized -- & the paths between pages
winny
HCI 201 Multimedia and the www
![Page 40: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/40.jpg)
Design
• Most people visit Websites to find information or to accomplish some task– The content of the site should be organized in a
way that is meaningful and useful to the intended audience
• Users need a logical structure so they know where they are and how they get there
• It is important to anticipate what the user will want to do, how he or she will use each section of the site, and in what order
winny
HCI 201 Multimedia and the www
![Page 41: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/41.jpg)
Web Aesthetics
• Speed– Do more with less– Use images sparingly– Select the most suitable image format
(jpeg/gif/png)– The more high-bandwidth media you use, the
more you will limit your audience
winny
HCI 201 Multimedia and the www
![Page 42: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/42.jpg)
Navigation
• Most people ask four basic questions when they are getting around (anything).. – Where am I? – Where can I go? – How will I get there? – How can I get back to where I once was?
winny
HCI 201 Multimedia and the www
![Page 43: Multimedia & The World Wide Web](https://reader030.vdocument.in/reader030/viewer/2022032708/56812ca8550346895d9152a7/html5/thumbnails/43.jpg)
Navigation
• Navigation that really works should... – Be easily learned – Remain consistent – Provide feedback – Appear in context – Offer alternatives – Communicate the site hierarchy – Provide clear visual messages – Be appropriate to the site's purpose – Support users' goals and behaviors
winny
HCI 201 Multimedia and the www