1. Webdesign 1 Foundation Computing I'd kill for a Nobel Peace Prize.

2. 2 of 71 Web Design and Authoring  World Wide Web created whole new way of publishing information  Special roles include: Web programmers Web design artists Web navigation specialists Content experts and authors

3. 3 of 71 HTML  Standard format/language for Web documents: hypertext markup language  Markup language: Comprises normal text of document together with tags  Tags provide format, structure and references to other files, eg. multimedia, other web documents

4. 4 of 71 Examining the HTML  You can look at the HTML of a Web page by selecting View->Source in Internet Explorer  Try it!  As you will see, HTML is not a very easy language to read (or write)  You can directly edit HTML using a text editor such as Notepad

5. 5 of 71 Learning HTML  You are not expected to be an HTML expert!  A lot of web designers use WYSIWYG editors such as FrontPage or Dreamweaver  They often work side by side in code and layout view!  Learn enough of the basic tags to produce simple web pages or make minor changes to a web page  Refer to the HTML Tutorial www.sci.usq.edu.au/courses/csc1402/resources/html

6. 6 of 71 Overall File Structure HTML Tutorial Document body text here.  will look like this: click hereclick here

7. 7 of 71 Code HTML Tutorial Document body text here.

8. 8 of 71 Common HTML Tags  Level 1 Heading  Paragraph  line break   click here  bold  emphasis  underlined  centred text Click here

9. 9 of 71 Common HTML Tags Level 1 Heading Paragraph line break click here bold emphasis underlined centred text

10. 10 of 71 Another example Birgit's Web Page Birgit's Web Page My favourite colour is blue. My favourite sport is softball. My favourite movie is Whalerider. I could say some interesting things here. Click here Click here

11. 11 of 71 Another example Birgit's Web Page Birgit's Web Page My favourite colour is blue. My favourite sport is softball. My favourite movie is Whalerider. I could say some interesting things here.

12. 12 of 71 Spaces, gaps, new lines This will be printed In the same line as the text above. To create a line break you need to use Or to start a new paragraph. Or to add extra space between words in a sentence. Click here Click here

13. 13 of 71 Spaces, gaps, new lines This will be printed In the same line as the text above. To create a line break you need to use Or to start a new paragraph. Or to add extra space between words in a sentence.

14. 14 of 71 Navigating the Web  Each document can have numerous active links (using the HREF tag).  Someone browsing can follow a long sequence of links moving from web page (document) to web page.  Browsers keep track of where you have been so you can move back/forward.

15. 15 of 71 Adding Links  Say I wanted to put a link to the USQ website onto my web page.  I could add the following: I work at USQ. URL for link Text to display for link  is called an anchor tag

16. 16 of 71 Adding Images Name of file with image Text to display if image unavailable Click here Click here  Say I wanted to include a graphic image or photograph  I could add the following: Image must be in same folder as HTML file. You can add a “path” if the image is stored elsewhere.

17. 17 of 71

18. 18 of 71 Writing code  In future, you may use a WYSIWYG editor to write HTML code  For assignment 7, you may not! Do not save in your browser Save in Notepad only!!! Edit in Notepad only!

19. 19 of 71 Web Page Design Issues  Page will not appear exactly the same everywhere Different computer screens, fonts etc. Different browsers (eg PDA) Default settings (eg font size) Different operating systems (eg playing WMV files on Mac)  Size and download time

20. 20 of 71 Web Page Design Issues (2)  Content versus aesthetics  Consistent Look-and-Feel Common page layout, heading etc. Navigation bars/buttons Fonts, colours, alignment

21. 21 of 71 Download Time  Common modems are 56 Kbps  Effective download speeds across the Internet can be substantially less  WYSIWYG editors will show the download time for a page over a standard modem  Keep images small (eg. < 100K) by using GIF or JPEG compression (see final module)

22. 22 of 71 Separating Content and Formatting  A web site with many pages can share the same formatting information, eg. Colours & backgrounds Font size, colour, face Location of sections on screen Separate printable view  Use Cascading Style Sheet (CSS) http://www.csszengarden.com/

23. 23 of 71 Write Less!  Guidelines Be succinct Write for scannability Use hypertext (links to other pages)  Reading from computer screens is about 25% slower than reading from paper  People don’t like reading from screens  Write 50% less text

24. 24 of 71 Scannability  Users rarely read every word  Structure articles with headlines  Use meaningful rather than "cute" headings  Use highlighting and emphasis to make important words catch the user's eye.

25. 25 of 71 Web Sites  A web site is a collection of related web pages, generally maintained by a single person or organisation  A web page is a separate HTML file  With frames, a web page may comprise many HTML files  Images and other multi-media components are separate files also, eg. GIF, JPEG Click here Click here

26. 26 of 71 Good Web Site Design  Make the site's purpose clear  Help users find what they need  Make navigation easy  Use visual design to enhance not distract  Less is more!  Use meaningful graphics  Alt text and titles  Accessible

27. 27 of 71 Bad Web Site Design  Animations  Orphan Pages  Long Scrolling Pages  Lack of Navigation Support  Outdated Information  Overly Long Download Times  Links that don’t work

28. 28 of 71 Quiz  What does the Privacy Act regulate?

29. 29 of 71 Quiz (2)  What does the Freedom of Information Act allow?

30. 30 of 71 Quiz (3)  What is the purpose of the Spam Act?

31. 31 of 71 Quiz (4)  What is the purpose of Copyright?

32. 32 of 71 Quiz (5)  Which HTML tag will include a line break? A. B. C. D.

33. 33 of 71 Quiz (6)  Which HTML tag will make text bold? A. B. C. D.

34. 34 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

35. 35 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

36. 36 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

37. 37 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

38. 38 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

39. 39 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

40. 40 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

41. 41 of 71 Quiz (8)  How will the following HTML code appear in a web browser? The quick brown fox jumped over the lazy dog.

42. 42 of 71 Quiz (8)  How will the following HTML code appear in a web browser? The quick brown fox jumped over the lazy dog.

43. 43 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

44. 44 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

45. 45 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

46. 46 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

47. 47 of 71 Quiz (10)  What is good website design? What is bad website design?

48. 48 of 71 Missing links from last week  Social context: http://www.copyright.org.au/  CSS (cascading style sheets) http://www.csszengarden.com  HTML http://www.w3schools.com/tags/default.asp Allows you to try the code!  Colour contrast http://www.lighthouse.org/color_contrast.htm  Bad web design http://websitesthatsuck.com/

49. 49 of 71

50. 50 of 71

51. 51 of 71 Missing links from last week  Social context: http://www.copyright.org.au/  CSS (cascading style sheets) http://www.csszengarden.com  HTML http://www.w3schools.com/tags/default.asp Allows you to try the code!  Colour contrast http://www.lighthouse.org/color_contrast.htm  Bad web design http://websitesthatsuck.com/

52. 52 of 71 Browser (in)compatibility  Firefox vs Internet Explorer  Default font size

53. 53 of 71 Use Hyperlinks  Split information up into chunks connected by hypertext links: Each chunk can be brief The full hyperspace can contain much more information than would be feasible in a printed article Long and detailed background information can be relegated to secondary pages  Let readers select those topics they care about and only download those pages

54. 54 of 71 Structuring a Website  Help people navigate a web site: arrange pages hierarchically like sections and sub-sections  Provide links to the next, previous page, the parent and children pages and to the "top" home page  Consistent menu on every page (similar to TOC), in same location  Bread crumbs? http://www.usq.edu.auhttp://www.usq.edu.au

55. 55 of 71

56. 56 of 71 Example Web Site Structure Page 3 Home Page Page 1.1 Page 1 Page 2 Page 3.1Page 3.2

57. 57 of 71 A Shallow Site Design Home Page Page 1 Page 2Page 3Page 4Page 5Page 6

58. 58 of 71 A Deeper Site Design Page 1 Page 1.1 Page 1.1.2 Page 2.1 Page 2.1.1 Page 2.1.1.1 Page 2 Home Page Page 1.1.1

59. 59 of 71 Big or complex Documents?  What if you want to make available: A big report written in Word? An Excel spreadsheet? A PowerPoint presentation?  Don’t assume the person viewing your web site has Microsoft Office!  Convert to Adobe PDF format, eg. using Adobe Acrobat or CutePDF.

60. 60 of 71 Static & Dynamic Pages  You will create static pages Look the same until you edit them  Dynamic pages change over time, eg. Stock prices, sporting results etc. Webmail  Uses server side programming languages such as CGI, ASP, JSP and PHP

61. 61 of 71 Forms and CGI  Web pages can also be set up to allow users to input data into boxes or form fields  User clicks a "submit" button and the information is sent back to the web server  Normally handled by CGI – the Common Gateway Interface, eg. the details may be emailed to someone

62. 62 of 71 Active Pages  Web page interacts with user, eg. Image rollover Calculations Complex animations  Uses client side scripting such as JavaScript or VB Script.  More complex user interaction by downloading an applet, e.g. Java.

63. 63 of 71 Web Hosting  Many ISPs provide users with some space to place a small web site  Larger web sites may require paid web hosting arrangements  Usually you build your web site on your local computer and then upload it to the web server using FTP or perhaps a “content management” web page  Every USQ students has some web space on the student server http://studentweb.usq.edu.au (FTP) http://studentweb.usq.edu.au (FTP) http://studentweb.usq.edu.au/home/lochb (view) http://studentweb.usq.edu.au/home/lochb (view)

64. 64 of 71

65. 65 of 71

66. 66 of 71

67. 67 of 71

68. 68 of 71

69. 69 of 71

70. 70 of 71 Web Hosting Issues  Available Space  ISP’s server reliability and performance  Your own domain name? Domain name registration  CGI support, eg. for enquiry forms being emailed to you

71. 71 of 71 Getting Found  Various ways to ensure people find your website: Publicise URL Links from another website  Portals  Link exchange Tell a search engine  Use meta tags to tell the search engine keywords (see Study Book)