• Save
Webpage & Multimedia Design- class01
Upcoming SlideShare
Loading in...5
×
 

Webpage & Multimedia Design- class01

on

  • 704 views

Course overview

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

Statistics

Views

Total Views
704
Views on SlideShare
704
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webpage & Multimedia Design- class01 Webpage & Multimedia Design- class01 Presentation Transcript

  • WebPage & Multimedia Design
    - Print syllabus
    • Group assignment01: key words
    • print gp assignment things
    Class01:
    • Knowing each other
    • Syllabus review
    • Internet & WWW
    • Group assignment01
  • Course Overview
    Learning outcome
    Class schedule
    Assignments
    Contact
  • Course Overview
    Explore the basic knowledge of web production
    Demonstrate the effective utilization of web/multimedia technology
  • 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.
  • Internet
    Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html
  • 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
  • Internet
    1st Internet Browser – Mosaic (1993)
    Imgsrc: http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/
  • 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/
  • Internet
    Top 10 languages used in the Internet
    Imgsrc: http://russiansphinx.blogspot.com/2011/01/place-of-russian-language-in-internet.html
  • Internet
    Facebook as of 2010: 518 million users
    Imgsrc: http://www.hubspot.com/facebook-for-business-marketing-hub/
  • Internet
    What is the difference between
    Internet & World Wide Web (WWW)
    Imgsrc: http://depositphotos.com/2515879/stock-illustration-Internet-world-wide-web-design.html
  • 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
  • Internet
    Source of news, facts and figures
    Communication
    Entertainment
    Banking & e-Commerce
    Educational medium …
    Any example from the above?
  • Internet
    Evolution of the web: http://evolutionofweb.appspot.com/?hl=zh
  • 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
  • WWW
    URL: Uniform Resource Locator  where?
    IP add: Internet Protocol address  32-bit number
    Google.com
    74.125.71.147
  • 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:
  • 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
  • WWW
    Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535
  • WWW: types
    Imgsrc: http://www.slideshare.net/wlakmal/01-introduction-to-internet-i?src=related_normal&rel=1948535
  • WWW: Portal
    Offers a variety of services
    Usually free
    Any example?
  • WWW: Portal
  • GUI
    Interaction with audience
    Users’ control
    Easy and clear way
  • Brief History
    ~1969: a research project in the states
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • 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
  • Brief History
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
    • IE replaced Netscape during late 1990s
    • Erosion of browsers in 2003
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
    • 1995
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
    • Dot-com bubble in ~1995-2000
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
    • Search in 1998 with minimalist interface
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
  • Brief History
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • Brief History
    Imgsrc: http://www.slideshare.net/tijs/web-design-trends-for-2010
  • GUI
    Graphic User Interface
  • 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
  • WWW - hyperlinks
    Allows readers to choose their own pathways (invented by Ted Nelson)
    Interactive browsing
    Imgsrc: http://www.webtechstrategies.com/marketing-options.php
  • Web Design - software
    Netscape composer
    Microsoft Frontpage
    Adobe Dreamweaver
    Adobe InDesign
    Adobe Muse
    Adobe Flash
  • Web Design - Process
    Imgsrc: http://www.sagemedia.ca/process.php | http://www.o2i.ae/?page_id=507
  • Web– Designer’s role
    • ~ architect
    • Know the brand
    • Know the audience
    • Know the content
    • Understand the web process
    • Communicate ideas to clients and audience
    • Design: Control the look & feel & consistency
    • Design: visually pleasing and easy to use
    • Design, Scripting, Coding and Testing
    • 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)
  • 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