8 VIC Discussion - Dancer 17

Once_UponATime
Mod-8.pps
Home>English homework help>8 VIC Discussion - Dancer 17

Elio L. Arteaga, MFA

VIC3400 – Visual Design for Globalized Media

History of the Internet

  • The Internet began in 1969 as a scientific/military research program named ARPANet (The Advanced Research Projects Agency Network).
  • Consisting of four computers, three
    in California and one in Utah, the
    experiment was to develop the
    world’s first system of transferring
    information reliably in the event of
    everyday network outages and possibly even the occasional global thermonuclear war (this was the Cold War era, after all).
  • Packet-switching—a system that enables small “packets” of data to be sent independently of each other to the destination computer—enables reliable transmission of data, and is the basis of the Internet today. But the entire look-and-feel of the Internet was not at all what you’re familiar with today. Most
    computer monitors displayed
    green, mono-spaced, all-caps
    type on a black background;
    if you’ve ever seen the 1983
    Matthew Broderick movie,
    WarGames, you know what
    I mean.
  • In 1985, ARPANet was handed over to the National Science Foundation. The NSF increased the network by opening five new supercomputer centers making the Internet an efficient way for government agencies and educational institutions to share information. Hobbyists joined the Internet and used it to send e-mail to each other, and access university libraries and government databases.
  • The Internet was opened to business and commercial interests around 1990. The World Wide Web was born. Graphics, photographic images, text, sound, animations, video, and interactivity came to the Internet. Companies called Internet service providers (ISPs) provided the general public with access to the Internet, usually for a monthly fee. Today, over a billion people worldwide log on the Internet’s 23.6 billion Web pages every day!1
  • 1WorldWideWebSize.com (2016).

Web Technology

  • Surfing the Web is easy and fun—a non-computer-literate person could type an easy-to-remember Web address, read the text on the page, view the images, and click on hyperlinks, identified by blue underlined text and also by the mouse pointer arrow turning into a pointing hand icon.

  • The language of the web is HyperText Markup Language, version 5, or HTML5. HTML specifies the content and structure of web pages. HTML tags are “semantic,” which means the tags themselves must have meaning in relation to the page.
  • Stylistic attributes such as colors, layout, fonts, sizes and background images are specified through Cascading Style Sheets, version 3, or CSS3. CSS separates the visual characteristics of web pages from its content, enabling different appearances for various media: desktop, mobile, or print.
  • Web pages are uploaded to a Web server, and become visible to anyone on the Internet. Typing in the page’s Web address (or URL) fetches that page and displays it on the viewer’s Web browser. Clicking on links within a Web page causes other pages to be downloaded and displayed on your browser. The illusion is that one is navigating through cyberspace, while in reality, pages are linked to each other, and clicking on the hyperlinks causes other pages to download and display on your computer’s browser window.

First Generation Web Pages

  • When the Web was first established, only scientists used it. Consequently, design was not an important consideration. The scientists’ goal was to efficiently transmit information, so the design of the first-generation Web pages resembled scientific dissertations.
  • Observe the design of Monsters in Galactic Nuclei created by John Kormendy and Gregory Shields of the University of Texas at Austin, Department of Astronomy:
  • http://chandra.as.utexas.edu/ stardate.html

The text goes all the way from the left to the right side of the page, as if it were a sheet of paper fed into a typewriter. Text jumps over images, rather than wrapping around them. All the titles are centered.

Second Generation Web Pages

  • As the general public began using the Web, it became clear that people wanted something they were already familiar and comfortable with. Web pages were a new technology; and most people still preferred to get their news from traditional sources such as newspapers and newsmagazines. The design of Web pages needed to resemble the design of printed pages in order for the Web-surfing public to embrace them. Web programmers created new tags to specify columns and other layout characteristics. Second-generation Web pages exhibited column layouts similar to those of their traditional media counterparts: newspapers or magazines. Consider the Miami Herald Web site:
  • http://www.miamiherald.com/
  • A banner running along the top of the Web page containing the name of the newspaper, a blue navigation bar along the left resembling a table of contents, and a vertical column grid are all characteristics of printed newspapers that have been translated to the electronic format of second-generation Web pages.

Third Generation Web Pages

  • Audiovisual technologies, such as ShockWave Flash (.SWF) and HTML5 Canvas, emerged in recent years that enrich web pages with media content. These are the third-generation Web pages. Consider Nike’s website, in which the static grid navigation of second-generation Web pages has been completely eliminated, replaced by video, music, and fluid, interactive navigation windows.
  • http://www.nike.com /

Long Scrolling Sites

  • The immense popularity of mobile devices (smartphones and tablets) has led to designs that enable unique human behaviors that never existed before. It’s possible to hold your smartphone in one hand and scroll with your thumb. This has led to the design of sites in which all the content is on only one page. To see all of it, just scroll. For example, see the http://macaw.co web site:

Parallax Scrolling Sites

  • With a little bit of extra coding that tests the position of the viewport in relation to the top of the web page, you can create engaging animations called parallax scrolling sites:
  • http://www.dangersoffracking.com/

Responsive Web Sites

  • One of the most important evolutions in web page design is that of responsive web sites. Responsive pages query the width of the browser window and change the layout of the page depending on whether it is viewed on a smartphone, tablet, laptop or desktop computer display.
  • Example: the World Wildlife Fund website.
    http://www.WorldWildLife.org/

Desktop

Smartphone

Tablet

Conventions

  • Conventions are concepts that don’t need to be explained to anyone, because (in theory) they should already be able to understand them. Internet Web pages make use of various conventions that go without saying, so I’ll say them anyway.
  • The most successful sites incorporate their navigation grids along the top and left margins. Why? Millions of people all around the world use different sized monitors. Web pages begin loading from the top-left corner, so if the navigation grid is placed on the right side or along the bottom, visitors with older, smaller monitors might not be able to navigate within the Web site, or they might have to scroll every time they need to change pages.
  • It’s rather common to see navigation grids arranged along the top and left edges, but they’re like that for a reason. As an example, take a look at the Apple website: http://www.apple.com/
  • Notice the navigation bar along the top of the Apple.com Web site. It is based on the metaphor of the index tabs. In a metal filing cabinet, you pull out a drawer and inside are horizontally stacked folders; only the little index tabs along the tops of the folders are visible. You grab a folder from its index tab, pull it up and it’s open.
  • On Apple.com (and others) a row of index tabs across the top are really links to other parts of the Web site. When you click on an index tab, the reality is that the browser downloads and displays another page, but the illusion is that the page comes to the front of the stack. The index tab appears in a different color to let the visitor know what part of the Web site they are viewing. This convention enables people to intuitively grasp this new technology because they are already familiar with filing cabinets. It also enables visitors to understand the scale of the site, and to keep track of where they’ve been and what they’ve yet to see.
  • Another conventional technique used in Web sites is to repeat the site’s logo on the top left corner of every page in the site, and to link the logos to the site’s home page, the first page visitors go to when they type the site’s URL. The reason for this has to do with the popularity of search engines like Google and Yahoo.
  • Typing in a search term in a search engine displays a list of results, which could potentially take visitors to pages buried deep within the destination Web site’s hierarchy. Clicking on the logo in the top-left corner enables visitors to find their way around the site, by quickly going back to its home page.
  • For example, let’s say Google took you to this page in CNN.com. A glance at the index tab navigation bar along the top reveals you are in the Politics section, but a quick click on the CNN logo on the top-left corner of the page takes you back to CNN’s home page.
  • Perhaps you might be asked to work on Web sites one day. With the explosive growth of the Internet, the Web is touching all areas of advertising, newspaper and magazine publishing, news Web site publishing, public relations and streaming video production.
  • It’s almost mandatory nowadays for an entrant into these fields to possess skills in web design. Successful candidates will build their skills by reading books, taking workshops and learning as much as they can. Knowledge is what separates the successful candidate from his or her peers.