Courses/Design & Technique-Essential Web Design/01

From Publication Station
Revision as of 13:16, 30 August 2016 by Andre (talk | contribs)

The Internet

A digital highway where many services/protocol take place

Documentary "World Brain" [1]

A Map of the Internet

Ingredients:

  • groups
  • several protocols - in place
  • Choose 3 (per groups) services/software/apps take place on the Internet. E.g. Skype, Gmail
  • place each service under the right protocol

Protocols:

  • World Wide Web (WWW)
  • Voice over IP (VOIP)
  • File transfer
  • Email (IMAP/SMTP/POP)
  • Instant messaging (IM)
  • Internet Relay Chat (IRC)

Some Services: Skype, Google Talk, We Transfer, Facebook, MSN Messenger, WhatsApp, BitTorrent,

What is the Web?

Create map using key words that define or are part of the web (Possible film - The web before the web...? )


The World Wide Web

A world wide documentation system, sometimes known as the Web, same times as WWW

Web's creation

  • conceptualized by Tim Berners-Lee at CERN
  • Berners-Lee was frustrated with the difficulty circulation of information inside CERN
    • diversity of computers with different systems
    • large number of projects and individuals
    • large amounts of information with no common system to organize and communicate this information

Tim-Berners Lee http://cache.boston.com/universal/site_graphics/blogs/bigpicture/lhc_08_01/lhc11.jpg

[Image source http://www.boston.com/bigpicture/2008/08/the_large_hadron_collider.html]

Web: publish and find information

Tim Berners-Lee wanted to create a system that would:

  • give access to files in different computers around the world.
  • link the files among themselves
  • facilitate the location and retrieval of information

"Suppose all the information stored in computers everywhere were linked … Suppose I could program my computer to create a space in which anything could be linked to anything. All the bits of information in every computer at CERN, and on the planet, would be available to me and anyone else. These would be a single information space". [2]

How

Tim Berners-Lee

  • devised a system that connected information through links (hypertext)
  • created a hyper text language: HTML (Hyper Text Markup Language)
  • wrote an interpreter for HTML (that transforms HTML code into visual form): a web browser [3]
  • implemented a systems of addresses - URL - that allowed files in remote computers to be called and reply by sending back a (usually) HTML file.

Result

  • The Web became a system where information was easier to find
  • users of host computers (servers) could easily decide what they said to the world, and also change it
  • users became publishers of content on the Web (not even needing access to a server in order to do it)
  • that publishing possibility and will triggered the creation of web publishing services and formats (Geocities, blogs, Tumblrs, Facebook walls ,etc)
  • in this context the user is not only a consumer, but also a producer of content (or publisher)

Quarter 1 - Me and the World - I am what I want

{{#section:Courses/Design & Technique-Essential Web Design/Q1|Common Ground: I am what I want}}



Software to install in your laptop

  • Text Editor - your design tool: Sublime Text, Gedit
  • Browser - the interpreter of HTML, but also a debug and prototyping space. (Read about what goes on behind the scenes in a Web browser


END


Editor, Browser, Go

  • Editor - your HTML writing tool
  • Browser - the interpreter of HTML, but also a debug and prototyping space. (Read about what goes on behind the scenes in a Web browser [4])

HTML

  • HTML is a markup language
  • meaning: content is marked with different "values"; e.g: paragraph, bold, italic, heading title, etc
  • marking is done through tags that wrap the content

http://publicationstation.wdka.hro.nl/go/kickoff/imgs/html.gif

  • In order to format content with tags you need to enter the content between an opening and closing element. As in the following case:

<h1>My Title</h1>

    • <h1> is the opening tag
    • </h1> is the closing tag
  • at times you'll find self-closing tags which have no content inside them, like horizontal rulers

or line breaks <br/>


essential HTML tags

Title Headers: <h1>,<h2>,<h3>,<h4>
Paragraph: <p>
Line break: <br />
italics: <i>
bold: <b>

Comments: <!-- comments -->


HTML skeleton

The previous tags only provided content formatting, yet to create any working web-page we need to always place the content inside a HTML page skeleton.

Skeleton.svg




See HTML Element Reference[5] for a exhaustive list of the HTML tags.

References, Notes and Optional Reading

  1. ↑ Degoutin, Stéphane, and Gwenola Wagon. World Brain Stéphane Degoutin & Gwenola Wagon, 2012. http://worldbrain.arte.tv.
  2. ↑ Berners-Lee, Tim. Weaving the Web. London: TEXERE, 2000.
  3. ↑ Simulation of the first Web Browser
  4. ↑ “Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction.
  5. ↑ Mozilla Foundation. “HTML Element Reference,” n.d. https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

“The Birth of the Web,” http://home.web.cern.ch/topics/birth-web .

Technical Resources

Optional Reading

Stephenson, Neal. “Mother Earth Mother Board.” Wired, http://archive.wired.com/wired/archive/4.12/ffglass_pr.html.

Abbate, Janet. Inventing the Internet. MIT Press, 2000.

“Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/01&oldid=3497’