Course overview Internet and WWW GUI Web Design and process Group Assignment01

3. Syllabus review

4. Internet & WWW

6. Course Overview Explore the basic knowledge of web production Demonstrate the effective utilization of web/multimedia technology

7. Rules Attendance: >15 mins count as absent. No more than 4 classes Attentive in class: no facebook / eating / make full use of class time Assignment: No late submission / re-submission ; 5 marks deduction per day applied.

10. Internet Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html

11. Internet Email (1972) 1st Bulletin Board System (1978) Domain name (1984) World Wide Web (1990) coined by Tim Berners-Lee Imgsrc: http://www.dn-trade.com/domain-name-trading.php

12. Internet 1st Internet Browser – Mosaic (1993) Imgsrc: http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/

13. Internet 1996 : ~45 million 1999 : ~150 million 2000 : ~407 million 2004: ~600-800 million 2010: ~1.95 billion 2011(Q1): 2,095,006,005 Img src:http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/

14. Internet Top 10 languages used in the Internet Imgsrc: http://russiansphinx.blogspot.com/2011/01/place-of-russian-language-in-internet.html

15. Internet Facebook as of 2010: 518 million users Imgsrc: http://www.hubspot.com/facebook-for-business-marketing-hub/

16. Internet What is the difference between Internet & World Wide Web (WWW) Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html

17. Internet Also known as “The NET” global data communication system Interconnected computer networks Use the standard TCP/IP (Internet Protocol Suite) Network of networks Software + hardware infrastructure Carries information Imgsrc: http://en.wikipedia.org/wiki/File:Internet_as_cloud.svg

18. Internet Source of news, facts and figures Communication Entertainment Banking & e-Commerce Educational medium … Any example from the above?

19. Internet Evolution of the web: http://evolutionofweb.appspot.com/?hl=zh

20. WWW World Wide Web / Web / W3 A system of interlinked hypertext documents (accessed via Internet) Web page may contain multimedia objects: text, image, video… Tim Berners-Lee: Write the first browser, WWW in 1990

21. WWW URL: Uniform Resource Locator  where? IP add: Internet Protocol address  32-bit number Google.com 74.125.71.147

22. WWW Imgsrc: http://en.kioskea.net/contents/www/navigateur.php3 Website: a group of HTML files that are stored and connected to internet (collection of web pages) Distributed information system Web browser:

23. WWW Download/Upload Receive/send a file over the network Web pages are stored in computers called web servers Imgsrc: http://en.kioskea.net/contents/www/navigateur.php3

24. WWW Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535

25. WWW: types Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535

26. WWW: Portal Offers a variety of services Usually free Any example?

27. WWW: Portal

28. GUI Interaction with audience Users’ control Easy and clear way

29. Brief History ~1969: a research project in the states Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

30. Brief History - Very slow speed (max 56K) via tel line connection - Sound of dial-up internet: http://www.youtube.com/watch?v=gsNaR6FRuO0 Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

31. Brief History Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

33. Erosion of browsers in 2003Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

37. Brief History

38. Brief History Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

39. Brief History Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

40. Brief History Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010

41. GUI Graphic User Interface

42. GUI Copy Imgsrc: http://www.pocketdos.com/tutorial_drdos_ins.htm | http://www.tech-faq.com/how-do-you-copy-and-paste-in-windows.html | http://youressential.blogspot.com/2009_03_29_archive.html

43. WWW - hyperlinks Allows readers to choose their own pathways (invented by Ted Nelson) Interactive browsing Imgsrc: http://www.webtechstrategies.com/marketing-options.php

44. Web Design - software Netscape composer Microsoft Frontpage Adobe Dreamweaver Adobe InDesign Adobe Muse Adobe Flash

45. Web Design - Process Imgsrc: http://www.sagemedia.ca/process.php | http://www.o2i.ae/?page_id=507

47. Know the brand

48. Know the audience

49. Know the content

50. Understand the web process

51. Communicate ideas to clients and audience

52. Design: Control the look & feel & consistency

53. Design: visually pleasing and easy to use

54. Design, Scripting, Coding and Testing

56. more reference book/text Smashing magazine: http://www.smashingmagazine.com/ Site inspire: http://siteinspire.com/ Web lol: http://designlol.net/ Internet: http://en.wikipedia.org/wiki/Internet A brief history of the Internet: http://www.walthowe.com/navnet/history.html The role of aesthetics in Web Design (2007): http://www.nordicom.gu.se/common/publ_pdf/247_thorlacius.pdf