PROSEM 2002/2003 (EDER 677 L.91 ) Sept 25 LAB: SCREEN DESIGN AND WEB SITE DESIGN

1. PROSEM 2002/2003 (EDER 677 L.91 )Sept 25 LAB:SCREEN DESIGN ANDWEB SITE DESIGN

2. Reference material & Live Links Coming up..… • 1. An overview of export tools, web editors and course management tools • 2. Principles of screen design activity a (“take-home” collaboration, done in Groups of Three

3. Reference material & Live Links Student Portfolio Assignment Let’s take a look at the Course home page.. It’s all explained there…. That’s where you’ll need to put things on the web… http://www.ucalgary.ca/~ekowch/P/prohome.html

4. Reference material & Live Links Fear not, gentle reader… • The creation of web materials is something that we do in full courses, as with Instructional design. • That said, we have experts in our class who can help you learn simple Composer page creation, and to ship your file to the acs server. • We have staff in the Doucette trained to help you and they are wonderful. • I will set up a special Centra session for those who need help on this… let’s see how this goes (Leo has a presentation too). • Let’s take a look at the following reference materials first… and see how it goes! Be patient, there is help all around. I learned this mostly from a fellow masters’s student, who will always be one of my heros!

5. A simple concept -- we create a Web page as a special format of file, And we place it where the WWW can Get to it! Drop your file onto A special server that Connects to the WWW The server deals with requests from the outside world to see your file. ftp Create a page of stuff in Netscape composer Ie: Save as: myportfolio.html on Your hard drive The web carries only files of type .html Your html files can contain pictures of type .gif or .jpeg Or movies, or sounds… Reference material & Live Links

6. Reference material & Live Links Web Editors and Course Management Tools Key Concepts: • FTP Access • Export Tools • Web Editors • Courseware Management Environments • This section is borrowed and revised from Norm Vaughan, with thanks. Norm taught this class last year.

7. Reference material & Live Links FTP (file transfer protocol) Access.. First, you need software that will ship things from your PC to the server. Here it is: FTP Tools PC Computers - the software you can download • WS_FTP Download Site http://www2.mtroyal.ab.ca/506LE.exe • WS_FTP Tutorial http://www2.mtroyal.ab.ca/ftp/ Apple Computers • Fetch Softworks http://fetchsoftworks.com/ or • http://www.apple.com/downloads/macosx/internet_utilities/captainftp.html

8. Reference material & Live Links U of C - FTP Access - moving your files onto the server Using your FTP software (previous page .. WS_FTP, WebSling, Fetch) you can ship files if you access the server correctly… her is how • Host Name: ftp.acs.ucalgary.ca • Host Type: username • UserID: – aix account (same as WebCT access) • Password - aix account (same as WebCT access) • Account – (leave blank) • If you are using IE the path will be: • ftp://username@ftp.acs.ucalgary.ca • If you are using Netscape: • ftp://username@ftp.acs.ucalgary.ca/u#/username

9. Reference material & Live Links U of C – Web Site Address http://www.ucalgary.ca/~aixusername/ Tips: • Be sure to copy files into your public_html folder • Use of an index.htm file • File names on the web are case sensitive and do not accept spaces • Remember that graphic images (.gif, .jpg) are linked not embedded in your html pages – they need to also be ftp’d to the server • For permissions and other info – refer to the following site: http://www.ucalgary.ca/it/web/personal.html

10. Reference material & Live Links Export Tools HTML Export Tools - Issues • Examples - MS Word, MS Excel, Adobe Pagemaker, Composer • Because of the nature of HTML, many of the Export tools will produce pages with very inelegant HTML code. Sometimes they produce code that is not compatible across browsers. This makes a mess. • Export tools are useful in allowing a user to re-purpose existing material onto the web. They aren’t necessarily the right tool to use when building a web page from scratch, but they are a good start if you can’t do HTML coding. • Westin Yoshimura is a genius at helping you with Netscape Composer, and he can help you a lot - (wyoshimu@ucalgary.ca) • Doucette Library call 403-220-6052 • While the exports are getting better, there will probably always be a market for web editors, tools designed specifically to author web pages.

11. Reference material & Live Links Export Tools HTML Export Tools • Microsoft Word will let you convert .doc & .ppt files to .html (it is tricky) http://www.microsoft.com/ • Corel WordPerfect does the same for their word processor product http://www.corel.com/products/ • Adobe PageMaker does this too, http://www.adobe.com/prodindex/pagemaker/main.html

12. Reference material & Live Links Web Editors HTML - WYSIWYG Editors - Examples • Adobe GoLive http://www.adobe.com/prodindex • Netscape Communicator http://www.netscape.com • Netscape Communicator Tutorials http://www.mtroyal.ab.ca/adc/workshops/biol/tutorial.htm • Macromedia Dreamweaver http://www.macromedia.com/software/dreamweaver/ • Microsoft FrontPage http://www.microsoft.com/ Reference Site:http://www.atl.ualberta.ca/articles/web/editorsummary.cfm

13. Principles of Screen Design • Making your information easy to see and learn is essential. • There are many web sites to help you do this. • The most important concept: Clarity. • Use white space, white backgrounds are best, and make sure you can navigate back to “home” from every page, so no one gets lost. • See the next page for excellent links on screen design:

14. Screen Design Principles: Resources • A great primer on web page development http://www2.mtroyal.ab.ca/%7Envaughan/norm/webtoolsintro/v3_document.htm • The top ten mistakes we make when we begin making web sites by Jacob Nelson http://www.useit.com/alertbox/9605.html • A place to learn more about web page creation - a bit more involved… http://www.bignosebird.com/ • Free web page development software and the ability to host your web site for free as well. http://www.homestead.com/ • The U of C’s site for new web page makers.. Great stuff; http://www.acs.ucalgary.ca/~smzess/htmlpage/htmlfram.htm • This site has been designed as a tutorial to teach basic HTML programming to people with little or no programming experience, who would like to create their own web page http://www.ucalgary.ca/~smzess/ • A nice step by step guide.. http://www.cs.trinity.edu/%7Ethicks/WebSiteDesign/WebGuidelines.html NAVIGATION • How to build an easy to navigate site: (excellent) http://www.sev.com.au/webzone/design/navigation.asp Try these out, and surf to find more sites… many resources for this will be on the course home pages soon, linked under this topic but these are plenty!

15. Reference material & Live Links Site Planning Creating the message • BRAINSTORM • What is my “point”? • What are my supporting “points” • Rank them according to importance • Do a Concept Map or Site Map on Paper • What will my “presentation” look like? • Cool, fun, formal, plain, dynamic • How much time to I want to spend? • Text is fastest • Color and fonts take some more time • Pictures need to be scanned into a file and put into the web page • Animated graphics can be harvested from the web (free spaces) and inserted • Music is powerful.. And it takes time to edit and get into your page • Video is the most powerful message maker - we study that Semester II • Tech Stuff • Learn to operate Composer, harvest files, save everything… scan…import from word… I will hold a couple of tutorials for the technical stuff.. Designing the space.. Remember.. Coolness takes more time