""the web is agreement""

Day 1, part B: A brief history and explanation of the internet

Ashley Williams, NYCDA
Tuesday, 5 March 2013

What is the internet?



BUT SRSLY


  • TRUE: The Internet's infrastructure doesn't reflect people's usual experience of it
  • TRUE: "Elders of the Internet" - determine the accessibility of the Internet 
  • TRUE: Multiple people can use the Internet at once
  • FALSE: "The Internet doesn't weigh anything"
  • FALSE: The Internet is wireless

How do websites work



GET SERVED


HTTP Protocols:
  • GET (read-only) - transmit data from server to client
  • PUT - create or update a resource
  • DELETE - remove a resource, the opposite of put
  • POST - similar to put, will get into more later

The object of these protocols is a Universal Resource Location, better known as URL.

scheme://domain:port/path?query_string#fragment

ANATOMY OF A BASIC WEBSIte


<!DOCTYPE html>
<head>
<meta/> <!-- INFO -->
<link href="stylesheet.css"> <!-- CSS -->
<script> 
<!-- JAVASCRIPT -->
</script>
</head>
<body>
  <!-- CONTENT GOES HERE -->
</body>

HTML


  • HTML is markup for content. It is a way to take your content and explain what it is. 
  • HTML is a set of tags
  • The tags are opened, and then closed
  • Tags can surround text or other tags, or both
  • Tags can have attributes, these are written inside the tags
  • The set of these objects for a site is called the Document Object Model (DOM)

e.g. 
<header/>, <ul class="ingredients"/>, <article id="234"/>, <div/>, <a href="link.html"/>

CSS

  • CSS stands for cascading stylesheets
  • CSS is a way to style objects in the DOM
  • You can target different types of objects, such as tags, attributes of tags (e.g. class or id), or object relationships such as first, or last, or parent/child 
  • The way styles are applied "cascades", meaning that rules can sometimes overlap, and that the rule that ends up being expressed based on the rules of the cascade (more on this next week)

e.g. 
button#get_started:hover {
    color: yellow;
}

Javascript

  • Javascript is used to create *mostly* client-side interactions
  • Javascript has many libraries and frameworks. Some common ones are jQuery, DoJo, Prototype, D3, angular, backbone, node, ember, AJAX
  • Javascript, like CSS, allows you to target specific things in the DOM and change their presence/position or attributes in the DOM (via HTML) or their presentation via (CSS)
  • We will use AJAX and jQuery in this class

e.g. $("p.important:hover").effect('highlight')

GOTTA KEEP EM SEPARATED

Maintainable code is good code; therefore:

  • Avoid inline styles in your HTML
  • Avoid changing CSS in your Javascript, instead modify the attributes of the DOM elements
  • Keep your HTML semantic; i.e. have it match the content, not the layout or style you want





Everything must have a beginning... and that beginning must be linked to something that went before... Invention, it must be humbly admitted, does not consist in creating out of a void, but out of chaos

Web standards

  • HTML, CSS, and JS are living, breathing things, written by people
  • Browsers are living, breathing things, written by people
  • The way browsers interpret HTML, CSS, and JS are called "Web Standards"
  • Web standards are living, breathing things, written by people

Effectively, the Web is agreement. We decide to use Web Standards and browsers agree to support them.

Problems

  • Multiple standards bodies = multiple standards
  • Concurrent incompatible standards means that some information was only accessible on certain browsers
  • Search engines are the navigation of the web, yet a lot of the web is "marked up" for presentation and not content
  • FLASH
  • browser development is moving faster and faster, and standards are not keeping up with the demand

Browsers

  • Mozilla Firefox (moz)
  • Google Chrome, Safari, Mobile Safari (webkit)
  • Internet Explorer (ie)
  • Opera (o, webkit)

it's complicated


  • Browsers support different parts of HTML5 and CSS3
  • Browsers may support them with browser-tags, or without
  • Browsers may support a deprecated version of a standard

  • There are multiple versions of browsers, and those versions affect the above 3 issues

Ideally, all browsers are moving towards full feature support of HTML5 and CSS3, without the need for browser tags.

HTML5 and css3

Goals:
  • Allow for further semantic separation between content, style, and interaction
  • Stop concurrent and incompatible doctypes
  • Browser incompatibility a result of simply not supporting a feature, not supporting a different type of the same feature
  • Further enable the idea of "graceful degradation"

Summary

  • The internet is a set of clients and servers who transfer information between each other using protocols.
  • HTTP protocols (GET, PUT, DELETE, POST) are the most common.
  • Basic websites are made with HTML, CSS, and JS, which is sent from the server and processed on the client in the browser.
  • The browser processes this code in "accordance" with web standards.
  • Different browsers have different "accordances" and support different sets of and parts of standards.
  • HTML5 and CSS3 are a move to unify web standards and browser support, but it's still a tricky issue.

REsources:

GO DEEPER:

Made with Slides.com