Webpage & Multimedia Design- class01

  • 681 views
Uploaded on

Course overview …

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
681
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WebPage & Multimedia Design
    - Print syllabus
    • Group assignment01: key words
    • 2. print gp assignment things
    Class01:
    • Knowing each other
    • 3. Syllabus review
    • 4. Internet & WWW
    • 5. Group assignment01
  • Course Overview
    Learning outcome
    Class schedule
    Assignments
    Contact
  • 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.
  • 8.
  • 9.
  • 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
  • 32. Brief History
    • IE replaced Netscape during late 1990s
    • 33. Erosion of browsers in 2003
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • 34. Brief History
    • 1995
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • 35. Brief History
    • Dot-com bubble in ~1995-2000
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • 36. Brief History
    • Search in 1998 with minimalist interface
    Imgsrc: 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
  • 46. Web– Designer’s role
    • ~ architect
    • 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
    • 55. Professional web designer: expert in programming & coding
  • Group Assignment01: 10%
    Form a group of 3-4 people
    Pick a website that you think is good, why? (at least 5 pts)
    Pick a website that you think is bad, why? (at least 5 pts)
    You will receive a term for research & presentation
    e-book/ social media/ blogging/ instant messaging/ web feeds/ web2.0/ html5/ css/ jquery/ javascript/ flash/ podcast/ CMS
    Answer the question: How does the term relate to web design? Any example?
    Document the findings in a digital file (with screen capture/image) for submission
    Present to class on Class03 (~10 mins)
  • 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