Web Foundation - Introduction

323 views

Published on

Introduction presentation for Web Foundation -- MCAD Fall 2010

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
323
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Foundation - Introduction

  1. 1. Web Foundation CLASS ONE Introduction MINNEAPOLIS COLLEGE OF ART AND DESIGN Post-Baccalaureate Certificate in Graphic Design – Fall 2010
  2. 2. Before we begin... What are your first memories of using the Internet and the Web?
  3. 3. PART ONE A Brief History of the Internet and the Web
  4. 4. The Internet before the Web The World Wide Web came into existence about twenty years ago. But the Internet is much older. So what was it like before the Web?
  5. 5. To start with, it looked a little different.
  6. 6. From mainframes to Keyboard Cat in 50 years http://www.youtube.com/watch?v=9hIQjrMHTv4
  7. 7. The Internet in the 80s and early 90s: Oh my, it was slow ‣ Only access was via large networks or dial-up modems ‣ Modems were extremely slow: 300 BAUD (early 80s) 0.03 k/s 2400 BAUD (late 80s) 0.24 k/s 14.4k BAUD (early 90s) 1.4 k/s 28.8k BAUD (mid-90s) 2.8 k/s 56k BAUD (late 90s) ~4.8 k/s
  8. 8. No, seriously, it was really slow ‣ Weight of the cnn.com home page today: around 311k 300 BAUD 3 hours 2400 BAUD 22 minutes 14.4k BAUD 3.7 minutes 28.8k BAUD 2 minutes 56k BAUD 1 minute BROADBAND A few seconds
  9. 9. The electronic frontier... ‣ The early Internet enabled a variety of information-exchange activities: ‣ E-mail ‣ Usenet newsgroups ‣ Telnet (to connect to other systems) ‣ FTP (File Transfer Protocol – file exchange) ‣ Bulletin Board Systems ‣ Chat rooms ‣ Listserv email lists
  10. 10. ...was a wilderness of information ‣ However, there was no overarching method for finding anything ‣ Everything was connected, but you still needed to know where to look ‣ Text-based terminals used arcane key commands and were not user-friendly ‣ Internet culture was insular and focused around a niche audience
  11. 11. A Bulletin Board System in the news http://www.youtube.com/watch?v=eSyTFvrihkM
  12. 12. Every Internet guy in the 80s http://www.youtube.com/watch?v=yFF0oQySsh4
  13. 13. Private playgrounds spring up ‣ As the Internet grew in popularity, various regional and national service providers appeared ‣ The largest providers created proprietary content networks exclusively for their paying audiences:
  14. 14. The Internet becomes, um, pretty ‣ These closed networks brought a whole new visual flair to online communication ‣ AOL quickly surpassed its rivals
  15. 15. AOL commercial (1995) http://www.youtube.com/watch?v=rdxiH7zJCfI
  16. 16. A link from the past... ‣ Hypertext — one of the fundamental underlying technologies of the Web ‣ Conceived in the 60s, popularized in the 80s by Apple’s HyperCard
  17. 17. ...becomes the key to the future ‣ Tim Berners-Lee – researcher at CERN, the European Organization for Nuclear Research ‣ 1990 – Conceived and created a hypertext-based system for linking and displaying pages of information ‣ He dubbed it the “World Wide Web”
  18. 18. Tim Berners-Lee did it for you http://www.youtube.com/watch?v=1IQFjTnDozo
  19. 19. Open and everywhere ‣ The Web differed from everything that came before it: ‣ It was hyperlinked and capable of displaying both text and graphics ‣ It was openly accessible to anyone with Internet access ‣ Anyone could publish Web pages
  20. 20. But it wasn’t quite what you think ‣ The Web was envisioned largely as a network for academic exchange ‣ Designed to separate content from presentation ‣ HTML (Hypertext Markup Language) was intended to add semantic meaning to content: <meaning>content</meaning>
  21. 21. When the Web went commercial, all that went out the window.
  22. 22. PART TWO The Web Goes Commercial
  23. 23. Web History Timeline The Early The Boom The Lean The Social Days Years Years Era 05 00 04 06 08 09 01 02 07 10 03 95 97 98 94 96 99 93 20 20 20 20 20 20 20 20 20 19 20 20 19 19 19 19 19 19
  24. 24. The Web gets rolling: 1993-1994 ‣ Marc Andreessen creates Mosaic, the first graphical Web browser, and goes on to form Netscape ‣ Jerry Yang and David Filo launch Yahoo!, a growing Web directory ‣ Berners-Lee founds the W3C World Wide Web Consortium
  25. 25. The Early Days: 1994-1996 ‣ “We have a Web site!” ‣ Simple, then more sophisticated ‣ Browser battles ‣ Netscape vs. Internet Explorer (and AOL) ‣ Small screens – 640 x 480 pixels ‣ Limited palette – 256 colors ‣ Small page sizes – ~50k maximum
  26. 26. The Early Days: 1994-1996 640 x 480 1024 x 768 SCREEN SIZE WEB COLOR PALETTE
  27. 27. The Early Days: 1994-1996 ‣ Layout was initially very rudimentary Minimal image Grey background options Very little Full-width typographic pages control
  28. 28. The Early Days: 1994-1996 ‣ Browser-specific tags allowed background colors and images, finer type adjustments and more — but that was cheating ‣ Tables allowed more complex layouts — but that was even more cheating ‣ The single-pixel GIF spacer nearly brought about the end of the world ‣ Thus began the semantic war
  29. 29. The Early Days: 1994-1996 ‣ Ad banners first appeared (and would never go away again) ‣ Search existed, but was far less effective, and there were many players ‣ E-commerce still relatively small ‣ Everyone was experimenting to figure out what worked
  30. 30. The Early Days: 1994-1996 ‣ The Web became a cultural phenomenon ‣ Business was excited and optimistic
  31. 31. Hotwired – circa 1994 Dithered Imagemap colors Default Blue-bordered background images
  32. 32. Hotwired – early 1995 “Fake” columns More concise masthead Consolidated Blue hyperlinks site navigation
  33. 33. Hotwired – late 1995 Task-focused Netscape-only navigation background color Shift to more magazine-like feature graphics
  34. 34. Hotwired – early 1997 Increasingly information-heavy layout Daily updated content bubbles to the top Detachable Javascript navigation Frames!
  35. 35. Hotwired – 1997/98 Dynamic HTML is used (and abused) Experimentation as a driving force – staying on the cutting edge Screensaver-like execution (trendy at the time)
  36. 36. The Boom Years: 1997-2001 The Early The Boom The Lean The Social Days Years Years Era 05 00 04 06 08 09 01 02 07 10 03 95 97 98 94 96 99 93 20 20 20 20 20 20 20 20 20 19 20 20 19 19 19 19 19 19
  37. 37. The Boom Years: 1997-2001 ‣ Money entered the Web in vast quantities ‣ Being online was simply a requirement for most businesses ‣ E-commerce started to take off ‣ “.com” became a buzzword, and companies could increase their valuation simply by adding it to their name
  38. 38. The Boom Years: 1997-2001 ‣ Major Web sites were now multi-million- dollar extravaganzas ‣ The technology race continued ‣ Web startups appeared by the hundreds, and soaked up billions of dollars in venture capital ‣ Nobody had any idea how to make money, but nobody cared
  39. 39. The Boom Years: 1997-2001 ‣ Just about anything related to information or commerce went online ‣ Banking and stock trading ‣ Buying books, tickets, clothes ‣ Ordering pizza and groceries ‣ Major newspapers and magazines ‣ Video (though in a small way) ‣ Games ‣ Music downloads (legal and illegal)
  40. 40. The Boom Years: 1997-2001 ‣ Dynamic HTML and Flash brought movement, sound and interactivity http://www.thefwa.com/flash10/
  41. 41. The Boom Years: 1997-2001 ‣ As the Web became an integral part of people’s lives, some worried about how easy it was to use ‣ Usability became a growing field of study and practice ‣ The Web standards movement grew up to bring order to the chaos of browser idiosyncrasies
  42. 42. The Boom Years: 1997-2001 ‣ The Web became a major cultural force ‣ Online communities grew ‣ Average people started personal home pages, to talk about... nothing ‣ Blogging became a trend ‣ Optimism and excitement were still in the air...
  43. 43. Then this happened.
  44. 44. The Lean Years: 2001-2005 The Early The Boom The Lean The Social Days Years Years Era 05 00 04 06 08 09 01 02 07 10 03 95 97 98 94 96 99 93 20 20 20 20 20 20 20 20 20 19 20 20 19 19 19 19 19 19
  45. 45. The Lean Years: 2001-2005 ‣ The dot-com bubble burst, killing millions ruining the party ‣ Stock prices plummeted, companies were delisted and many went bankrupt ‣ Lots of hip Web designers (like me) got laid off ‣ The climate changed dramatically
  46. 46. The Lean Years: 2001-2005 ‣ The Web’s early years were spent partying and blowing money on stupid things, but now it was time to grow up ‣ The experiments largely ended, and companies focused on ROI and measurable results ‣ Smaller Web sites, more focus on customer needs
  47. 47. The Lean Years: 2001-2005 ‣ Search became the focal point ‣ Google found the magic formula for truly effective search results, called PageRank ‣ The rise of effective Web search dramatically transformed the way we use information, possibly forever ‣ The rise of search also greatly changed the way we design the Web
  48. 48. The Lean Years: 2001-2005 ‣ ROI imperative, focus on user needs, search-oriented thinking and usability concerns led to the rise of User Experience as a field ‣ Best practices and a variety of ways of researching and modeling user behavior started to make the Web more effective (if a bit less fun)
  49. 49. The Lean Years: 2001-2005 ‣ Blogging grew from a niche activity to a media phenomenon ‣ Many bloggers went from being hobbyists to being professionals ‣ Blogs began to rival traditional media as primary information sources — major newspapers and magazines started blogs as well
  50. 50. The Social Era 2005-present The Early The Boom The Lean The Social Days Years Years Era 05 00 04 06 08 09 01 02 07 10 03 95 97 98 94 96 99 93 20 20 20 20 20 20 20 20 20 19 20 20 19 19 19 19 19 19
  51. 51. The Social Era: 2005-present ‣ As Web technology and bandwidth continued to evolve, a new generation became the driving force ‣ Where the first ten years of the Web were about content delivery and browsing, the new era would be creating and sharing ‣ It got started with a concept widely known as Web 2.0
  52. 52. The Social Era: 2005-present ‣ Web 2.0 is a catch-all term for a variety of converging ideas and technologies: ‣ User content creation and sharing ‣ Marketing as a conversation ‣ Client-side presentation technologies ‣ Simplified, task-focused interface design ‣ Connecting as a means of adding value ‣ Mashups of existing technologies
  53. 53. The Social Era: 2005-present ‣ Video became arguably the key content delivery mechanism ‣ Increasing adoption of broadband made video watching easy ‣ YouTube made personal videos a massive cultural force ‣ Creating a viral video became a way for anyone to become a quasi-celebrity ‣ Video culture largely cut across social boundaries
  54. 54. The Social Era: 2005-present ‣ Sharing made the Web social ‣ Facebook, Twitter, Flickr and other sites made sharing content easy ‣ Sharing became a way to define one’s identity online and build social credibility ‣ The combination of sharing and online profiles created an parallel online social culture in which people could define themselves separately from their real-life personas
  55. 55. But what does it really mean? http://www.youtube.com/watch?v=NLlGopyXT_g
  56. 56. So that’s where the Web came from. Next we’ll discuss where it’s going.
  57. 57. PART THREE The Web Today (and Tomorrow)
  58. 58. But first... How you use the Web: a quick self-analysis
  59. 59. Who is using the Internet?
  60. 60. Who is using the Internet?
  61. 61. What are they using it for?
  62. 62. What are they using it for?
  63. 63. How the Web has changed ‣ In thinking about the Web’s impact today, we need to look at how it has evolved: ‣ Sharing is integral ‣ Video has become ubiquitous ‣ Viral culture is unpredictable, uncontrollable ‣ Speed is everything ‣ Trust has become a key factor ‣ Change is happening faster and faster ‣ Control by external forces is more difficult
  64. 64. Group Exercise ‣ Break into about 5 groups ‣ Choose one topic from the list on the previous page ‣ Spend 15 minutes discussing and researching it ‣ Be prepared to discuss what it means, why it’s important, and show examples of the principle in action online
  65. 65. A look at the Web’s impact on Business Culture Entertainment Information Use
  66. 66. The Web and Business ‣ The Web has changed the way business functions at every level: ‣ Communication ‣ Information and research ‣ Advertising and marketing ‣ Customer relationship management ‣ Sales (online and offline) ‣ Customer service ‣ Supply chain and manufacturing
  67. 67. The Web and Business ‣ The Web has also disrupted a variety of industries: ‣ The music business ‣ Newspaper and magazine publishing ‣ Television and movies ‣ Journalism as a profession ‣ The effects of the Web’s evolution on these industries are still being felt, and their future is still uncertain
  68. 68. The Web and Culture ‣ The Internet has contributed to mass culture, with viral media and memes traversing the globe in hours ‣ At the same time, it has helped niche culture to flourish, with corners of the Web devoted to every conceivable topic or point of view
  69. 69. The Web and Culture ‣ The Web is all about connection, and it connects people in many ways: ‣ Social media ‣ Forums and chat rooms ‣ Commenting on blogs ‣ Online dating ‣ Online phone calls ‣ Transactions via eBay, Craigslist ‣ Online gaming
  70. 70. The Web and Culture ‣ Social media have had a huge impact on the way people interact with companies and brands ‣ Companies are using Facebook, Twitter, Foursquare and other tools to connect with their customers ‣ People are increasingly defined by their output online
  71. 71. The Web and Entertainment ‣ Music is widely available online, via iTunes, YouTube, MySpace and legal and illegal downloads ‣ The RIAA claims $12.5 billion in annual losses to piracy — the real impact is difficult to determine ‣ The Web has allowed artists to bypass the music industry, and sell and market their music directly to their fans
  72. 72. The Web and Entertainment ‣ The Web competes with television for your attention, and it has been winning ‣ YouTube offers millions of clips, in addition to thousands of pirated movies and shows available online ‣ Hulu and Netflix offer legal alternatives, and television producers and networks have embraced them rather than fight a losing battle
  73. 73. Content can come from anywhere... http://www.youtube.com/watch?v=3eooXNd0heM and it can be made by anyone
  74. 74. The Web and Information ‣ We consume information voraciously today, and much of that information comes from the Internet ‣ We read news online, watch videos, send email, update our Facebook status, shop, share funny links and much more, often while watching TV and listening to music at the same time
  75. 75. The Web and Information ‣ The ubiquity of Internet search, on the desktop and now mobile, has made information accessible like never before ‣ Search gives us a level of access to information that libraries, encyclopedias and other media never have ‣ At the same time, that information must be analyzed and vetted, and it can create a false sense of understanding
  76. 76. The Web and Information ‣ In addition to wacky videos, blogs have become a major source of information ‣ Blogs often break news stories ‣ Bloggers are often featured as experts or pundits within mainstream news, and are often treated like journalists ‣ Blogs have significantly eaten into both the authority and revenues of the mainstream media
  77. 77. The Web and Information ‣ This “cult of the amateur”* has not been without its critics, however ‣ The rise of user-generated content has challenged the idea of “experts” and intellectual authority ‣ Low quality, misinformation, factual errors and sheer volume are problems ‣ Ubiquitous free content makes professionalism more difficult * Refers to The Cult of the Amateur: How Today's Internet Is Killing Our Culture – Andrew Keen, 2007
  78. 78. Now let’s look at some Web sites!
  79. 79. Web site categories ‣ Marketing ‣ E-Commerce ‣ Entertainment ‣ Information / News ‣ Tools / Task-oriented ‣ Social / Community
  80. 80. Site analysis exercise ‣ Choose a site in each of two of the categories ‣ For each site, tell us the following: ‣ How it works / what it does ‣ The strategy (why they took that approach) ‣ Its major content or functionality ‣ What it does well ‣ What could be improved
  81. 81. Homework ‣ Choose two sites in each of four of the categories (the four you didn’t choose) ‣ In a Word document, include: ‣ Name and URL of each site ‣ How it works / what it does ‣ The strategy (why they took that approach) ‣ Its major content or functionality ‣ What it does well ‣ What could be improved ‣ Compare the two and discuss the differences

×