Difference between revisions of "Courses/Design & Technique-Essential Web Design/01"

From Publication Station
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<slidy theme="a"/>


==The Internet==
=The Internet=
A digital highway where many services/protocol take place


==ARPANET: the first computer network==
[http://worldbrain.arte.tv Documentary "World Brain"] <ref>Degoutin, Stéphane, and Gwenola Wagon. World Brain Stéphane Degoutin & Gwenola Wagon, 2012. http://worldbrain.arte.tv.</ref>


== Context for the creation of the ARPANET ==
==A Map of the Internet==
* USA, 1960s
Ingredients:
* Cold War - consequences of a nuclear attack
* groups
* Soviet Union launched in 1957 Sputnik - the first satellite
* several protocols - in place
* Sputnik trigger a space race between US and the Soviet Union: if the US only had a change to win, if they invested in scientific development.
* Choose 3 (per groups) services/software/apps take place on the Internet. E.g. Skype, Gmail, Mail (Mac software), MSN, Whastapp, WeTransfer, Facebook, BitTorrent, etc.
* ARPANET was created by the Advanced Research Projects Agency (ARPA) (later called DARPA)
* place each service under the right protocol


==Aims for the ARPANET==
Protocols:
* create access to remote computers, connected to the network
* World Wide Web (WWW)
* be capable of withstanding communications in the face of an attack
* Voice over IP (VOIP)
** decentralized network
* File Transfer
* allow a variety of computers to join the network and be accessed
* Email (IMAP/SMTP/POP)
* foster collaborative scientific research
* Instant messaging (IM)
* Internet Relay Chat (IRC)


==Characteristics of the ARPANET==
* Distributed network: each node connects to more than 1 other node
** destruction of a node would not interrupt communication


[[File:Brand-networks-topologies.jpg|3 network topologies]]
=The World Wide Web (WWW)=
 
[[File:ARPANET-nodes-1971.jpg|ARPANET nodes 1971]]
 
==Killer App: Email==
* At first the network was not heavily used
* It was difficult to access and use the different computers on the network: each its specificities, which one had to learn
* the creation of electronic mail, brought many more users to network, which were simply using to communicate
* the network change from a resource sharing system to '''a communication system'''. 
 
==Internet: the network that connected networks==
* by 1980 several digital networks, were functioning, besides ARPANET both in US and Europe:
** USENET, BITNET, FidoNet (Bulletin Board Network), etc
* these were isolated networks, not connected interconnected. 
* the task was to connect this networks
* to the wide and integrated network was given the name Internet
 
Listen to a radio program on Bulletin Board Networks: [http://www.npr.org/templates/story/story.php?storyId=120649723|The 'Wild And Woolly' World Of Bulletin Boards]
 
Documentary "World Brain" <ref>Degoutin, Stéphane, and Gwenola Wagon. World Brain Stéphane Degoutin & Gwenola Wagon, 2012. http://worldbrain.arte.tv.</ref>
 
 
 
 
-----
 
==The World Wide Web==
A world wide documentation system, sometimes known as the Web, same times as WWW
A world wide documentation system, sometimes known as the Web, same times as WWW


==Context of Web's creation==
==Web's creation==
* conceptualized by Tim Berners-Lee at CERN
* conceptualized by Tim Berners-Lee at CERN
* Berners-Lee was frustrated with the difficulty in circulation inside CERN
* As response to his frustration with the difficulty to share information inside and outside CERN
** diversity of computers with different systems
** diversity of computers with different systems
** large number of projects and individuals
** large number of projects and individuals
** large amounts of information with not common system for organizing and communicating this information
** large amounts of information with no common system to organize and communicate this information
 


[[File:tim-berners-lee.jpg|Tim-Berners Lee]]
[[File:tim-berners-lee.jpg|Tim-Berners Lee]]
http://cache.boston.com/universal/site_graphics/blogs/bigpicture/lhc_08_01/lhc11.jpg
http://cache.boston.com/universal/site_graphics/blogs/bigpicture/lhc_08_01/lhc11.jpg


Inside one of CERN experiments.  [http://www.boston.com/bigpicture/2008/08/the_large_hadron_collider.html Source]
[Image source http://www.boston.com/bigpicture/2008/08/the_large_hadron_collider.html]


 
==Web: publish and find information==
==Aim: find information==
Tim Berners-Lee wanted to create a system that would:
Tim Berners-Lee wanted to create a system that would:
* give access to files in different computers around the world.
* give access to files in different computers around the world.
Line 77: Line 46:
==How==
==How==
Tim Berners-Lee  
Tim Berners-Lee  
* devised a system that connected information through link (hypertext)
* devised a system that connected information through '''links''' (hypertext)
* created a hyper text language: HTML (Hyper Text Markup Language)
* created a '''hyper text language''': '''HTML''' (Hyper Text Markup Language)
* wrote an interpreter for HTML (that would transform HTML code into visual form): a '''web browser''' <ref>[http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html Simulation of the first Web Browser]</ref>
* wrote an '''interpreter for HTML''' (that transforms HTML code into visual form): a '''web browser''' <ref>[http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html Simulation of the first Web Browser]</ref>
* implemented a systems of address - URL - that allowed files in remote computer to be called and reply by sending back a (usually) HTML file.
* 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==
==Result==
Line 88: Line 56:
* users became publishers of content on the Web (not even needing access to a server in order to do 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)
* 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 no not only a consumer, but also a producer of content (or publisher)  
* in this context the user is not only a consumer, but also a producer of content (or publisher)  
 


----
----
 
<references/>
 
==  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 <ref>“Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction.</ref>)
 
 
==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:
<nowiki><h1>My Title</h1></nowiki>
** <nowiki><h1></nowiki> is the opening tag
** <nowiki></h1></nowiki> is the closing tag
 
* at times you'll find '''self-closing tags''' which have no content inside them, like horizontal rulers '''<code><hr /></code>'''
or line breaks <nowiki><br/></nowiki>
 
 
== essential HTML tags ==
<pre>
Title Headers: <h1>,<h2>,<h3>,<h4>
Paragraph: <p>
Line break: <br />
italics: <i>
bold: <b>
 
Comments: <!-- comments -->
 
</pre>
 
 
== 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'''''.
 
[[File:skeleton.svg]]
 
 
 
 
 
 
 
See HTML Element Reference<ref>Mozilla Foundation. “HTML Element Reference,” n.d. https://developer.mozilla.org/en-US/docs/Web/HTML/Element.</ref> for a exhaustive list of the HTML tags.
 
==References, Notes and Optional Reading ==
 
<references />
 
“The Birth of the Web,”  http://home.web.cern.ch/topics/birth-web .
 
==Technical Resources ==
* https://developer.mozilla.org/en-US/docs/Web/HTML - HTML (HyperText Markup Language)
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element - HTML element reference
*
*
=== 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.

Latest revision as of 05:52, 5 September 2017

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, Mail (Mac software), MSN, Whastapp, WeTransfer, Facebook, BitTorrent, etc.
  • 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)


The World Wide Web (WWW)

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

Web's creation

  • conceptualized by Tim Berners-Lee at CERN
  • As response to his frustration with the difficulty to share information inside and outside 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)


  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
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/01&oldid=6742’