WebPage & Multimedia Design<br />- Print syllabus<br /><ul><li>Group assignment01: key words
 print gp assignment things</li></ul>Class01:<br /><ul><li> Knowing each other
Syllabus review
 Internet & WWW
Group assignment01 </li></li></ul><li>Course Overview<br />Learning outcome<br />Class schedule<br />Assignments<br />Cont...
Course Overview<br />Explore the basic knowledge of web production<br />Demonstrate the effective utilization of web/multi...
Rules<br />Attendance: >15 mins count as absent. No more than 4 classes<br />Attentive in class: no facebook / eating / ma...
Internet<br />Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html<br />
Internet<br />Email (1972)<br />1st Bulletin Board System (1978)<br />Domain name (1984)<br />World Wide Web (1990) coined...
Internet<br />1st Internet Browser – Mosaic (1993)<br />Imgsrc: http://royal.pingdom.com/2011/01/12/internet-2010-in-numbe...
Internet<br />1996 : ~45 million<br />1999 : ~150 million<br />2000 : ~407 million<br />2004: ~600-800 million<br />2010: ...
Internet<br />Top 10 languages used in the Internet<br />Imgsrc: http://russiansphinx.blogspot.com/2011/01/place-of-russia...
Internet<br />Facebook as of 2010: 518 million users<br />Imgsrc: http://www.hubspot.com/facebook-for-business-marketing-h...
Internet<br />What is the difference between <br />Internet & World Wide Web (WWW)<br />Imgsrc: http://depositphotos.com/2...
Internet<br />Also known as “The NET”<br />global data communication system<br />Interconnected computer networks<br />Use...
Internet<br />Source of news, facts and figures<br />Communication<br />Entertainment<br />Banking & e-Commerce<br />Educa...
Internet<br />Evolution of the web: http://evolutionofweb.appspot.com/?hl=zh<br />
WWW<br />World Wide Web / Web / W3<br />A system of interlinked hypertext documents (accessed via Internet)<br />Web page ...
WWW<br />URL: Uniform Resource Locator  where?<br />IP add: Internet Protocol address  32-bit number	<br />Google.com<br...
WWW<br />Imgsrc: http://en.kioskea.net/contents/www/navigateur.php3<br />Website: a group of HTML files that are stored an...
WWW<br />Download/Upload<br />Receive/send a file over the network<br />Web pages are stored in computers called web serve...
WWW<br />Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535<br />
WWW: types<br />Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535<br />
WWW: Portal<br />Offers a variety of services<br />Usually free<br />Any example?<br />
WWW: Portal<br />
GUI<br />Interaction with audience<br />Users’ control<br />Easy and clear way<br />
Brief History<br />~1969: a research project in the states<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-f...
Brief History<br />- Very slow speed (max 56K) via tel line connection<br />- Sound of dial-up internet: http://www.youtub...
Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
Brief History<br /><ul><li>IE replaced Netscape during late 1990s
Erosion of browsers in 2003</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
Brief History<br /><ul><li>1995</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
Brief History<br /><ul><li>Dot-com bubble in ~1995-2000</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-...
Brief History<br /><ul><li>Search in 1998 with minimalist interface</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-de...
Brief History<br />
Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
GUI<br />Graphic User Interface<br />
GUI<br />Copy<br />Imgsrc: http://www.pocketdos.com/tutorial_drdos_ins.htm | http://www.tech-faq.com/how-do-you-copy-and-p...
WWW - hyperlinks<br />Allows readers to choose their own pathways (invented by Ted Nelson)<br />Interactive browsing<br />...
Web Design - software<br />Netscape composer<br />Microsoft Frontpage<br />Adobe Dreamweaver<br />Adobe InDesign<br />Adob...
Upcoming SlideShare
Loading in...5
×

Webpage & Multimedia Design- class01

775

Published on

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
775
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Webpage & Multimedia Design- class01"

  1. 1. WebPage & Multimedia Design<br />- Print syllabus<br /><ul><li>Group assignment01: key words
  2. 2. print gp assignment things</li></ul>Class01:<br /><ul><li> Knowing each other
  3. 3. Syllabus review
  4. 4. Internet & WWW
  5. 5. Group assignment01 </li></li></ul><li>Course Overview<br />Learning outcome<br />Class schedule<br />Assignments<br />Contact<br />
  6. 6. Course Overview<br />Explore the basic knowledge of web production<br />Demonstrate the effective utilization of web/multimedia technology<br />
  7. 7. Rules<br />Attendance: >15 mins count as absent. No more than 4 classes<br />Attentive in class: no facebook / eating / make full use of class time<br />Assignment: No late submission / re-submission ; 5 marks deduction per day applied.<br />
  8. 8.
  9. 9.
  10. 10. Internet<br />Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html<br />
  11. 11. Internet<br />Email (1972)<br />1st Bulletin Board System (1978)<br />Domain name (1984)<br />World Wide Web (1990) coined by Tim Berners-Lee<br />Imgsrc: http://www.dn-trade.com/domain-name-trading.php<br />
  12. 12. Internet<br />1st Internet Browser – Mosaic (1993)<br />Imgsrc: http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/<br />
  13. 13. Internet<br />1996 : ~45 million<br />1999 : ~150 million<br />2000 : ~407 million<br />2004: ~600-800 million<br />2010: ~1.95 billion<br />2011(Q1): <br /> 2,095,006,005 <br />Img src:http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/<br />
  14. 14. Internet<br />Top 10 languages used in the Internet<br />Imgsrc: http://russiansphinx.blogspot.com/2011/01/place-of-russian-language-in-internet.html<br />
  15. 15. Internet<br />Facebook as of 2010: 518 million users<br />Imgsrc: http://www.hubspot.com/facebook-for-business-marketing-hub/<br />
  16. 16. Internet<br />What is the difference between <br />Internet & World Wide Web (WWW)<br />Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html<br />
  17. 17. Internet<br />Also known as “The NET”<br />global data communication system<br />Interconnected computer networks<br />Use the standard TCP/IP (Internet Protocol Suite)<br />Network of networks<br />Software + hardware infrastructure<br />Carries information<br />Imgsrc: http://en.wikipedia.org/wiki/File:Internet_as_cloud.svg<br />
  18. 18. Internet<br />Source of news, facts and figures<br />Communication<br />Entertainment<br />Banking & e-Commerce<br />Educational medium …<br />Any example from the above?<br />
  19. 19. Internet<br />Evolution of the web: http://evolutionofweb.appspot.com/?hl=zh<br />
  20. 20. WWW<br />World Wide Web / Web / W3<br />A system of interlinked hypertext documents (accessed via Internet)<br />Web page may contain multimedia objects: text, image, video…<br />Tim Berners-Lee:<br />Write the first browser, WWW in 1990<br />
  21. 21. WWW<br />URL: Uniform Resource Locator  where?<br />IP add: Internet Protocol address  32-bit number <br />Google.com<br />74.125.71.147 <br />
  22. 22. WWW<br />Imgsrc: http://en.kioskea.net/contents/www/navigateur.php3<br />Website: a group of HTML files that are stored and connected to internet (collection of web pages)<br />Distributed information system<br />Web browser:<br />
  23. 23. WWW<br />Download/Upload<br />Receive/send a file over the network<br />Web pages are stored in computers called web servers<br />Imgsrc: http://en.kioskea.net/contents/www/navigateur.php3<br />
  24. 24. WWW<br />Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535<br />
  25. 25. WWW: types<br />Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535<br />
  26. 26. WWW: Portal<br />Offers a variety of services<br />Usually free<br />Any example?<br />
  27. 27. WWW: Portal<br />
  28. 28. GUI<br />Interaction with audience<br />Users’ control<br />Easy and clear way<br />
  29. 29. Brief History<br />~1969: a research project in the states<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  30. 30. Brief History<br />- Very slow speed (max 56K) via tel line connection<br />- Sound of dial-up internet: http://www.youtube.com/watch?v=gsNaR6FRuO0<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  31. 31. Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  32. 32. Brief History<br /><ul><li>IE replaced Netscape during late 1990s
  33. 33. Erosion of browsers in 2003</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  34. 34. Brief History<br /><ul><li>1995</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  35. 35. Brief History<br /><ul><li>Dot-com bubble in ~1995-2000</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  36. 36. Brief History<br /><ul><li>Search in 1998 with minimalist interface</li></ul>Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  37. 37. Brief History<br />
  38. 38. Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  39. 39. Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  40. 40. Brief History<br />Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010<br />
  41. 41. GUI<br />Graphic User Interface<br />
  42. 42. GUI<br />Copy<br />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<br />
  43. 43. WWW - hyperlinks<br />Allows readers to choose their own pathways (invented by Ted Nelson)<br />Interactive browsing<br />Imgsrc: http://www.webtechstrategies.com/marketing-options.php<br />
  44. 44. Web Design - software<br />Netscape composer<br />Microsoft Frontpage<br />Adobe Dreamweaver<br />Adobe InDesign<br />Adobe Muse<br />Adobe Flash<br />
  45. 45. Web Design - Process<br />Imgsrc: http://www.sagemedia.ca/process.php | http://www.o2i.ae/?page_id=507<br />
  46. 46. Web– Designer’s role<br /><ul><li>~ architect
  47. 47. Know the brand
  48. 48. Know the audience
  49. 49. Know the content
  50. 50. Understand the web process
  51. 51. Communicate ideas to clients and audience
  52. 52. Design: Control the look & feel & consistency
  53. 53. Design: visually pleasing and easy to use
  54. 54. Design, Scripting, Coding and Testing
  55. 55. Professional web designer: expert in programming & coding</li></li></ul><li>Group Assignment01: 10%<br />Form a group of 3-4 people<br />Pick a website that you think is good, why? (at least 5 pts)<br />Pick a website that you think is bad, why? (at least 5 pts)<br />You will receive a term for research & presentation<br />e-book/ social media/ blogging/ instant messaging/ web feeds/ web2.0/ html5/ css/ jquery/ javascript/ flash/ podcast/ CMS<br />Answer the question: How does the term relate to web design? Any example?<br />Document the findings in a digital file (with screen capture/image) for submission<br />Present to class on Class03 (~10 mins)<br />
  56. 56. more reference book/text<br />Smashing magazine: http://www.smashingmagazine.com/<br />Site inspire: http://siteinspire.com/<br />Web lol: http://designlol.net/<br />Internet: http://en.wikipedia.org/wiki/Internet<br />A brief history of the Internet: http://www.walthowe.com/navnet/history.html<br />The role of aesthetics in Web Design (2007): http://www.nordicom.gu.se/common/publ_pdf/247_thorlacius.pdf<br />

×