A Painting: La Lessive by Thérèse-Marthe-Françoise Cotard-Dupré (French, 1877 – 1920

WorldWideWeb - The Distributed

  1. Search the web
  2. Creating your own website
  3. Energy efficiency
  4. Conventions

Just like literature and art the web is both social and aestetic; and simple in it's essence.

The world wide web was about social and aestetic engagement and, behind all the wasted energy that spits out "content" and "services", it still is.

Search the web

Marginalia "is an independent DIY search engine that focuses on non-commercial content".

Wiby is a search engine that focuses on old web content and sites that are more suiable for low performance computers:

In the early days of the web, pages were made primarily by hobbyists, academics, and computer savvy people about subjects they were personally interested in. Later on, the web became saturated with commercial pages that overcrowded everything else. All the personalized websites are hidden among a pile of commercial pages.

Create your own website

Neocities allows you to publish and host your own website for free; no ads. You do not need any technical know how. Try it out with the html-tags below.

redbean is an open source webserver if you want to host your website on your own computer. No installation is needed and it runs on all major operating systems. Created by the awesome Justine Tunney.

Energy efficiency (or, break some rules: keep it simple)

Formatting

These are the only html-tags you need to get your point across:

<title></title>			Page title
<h1></h1>			Heading 1
<h2></h2>			Heading 2
<h3></h3>			Heading 3
<p>				Paragraph
<b></b>				Bold/important
<i></i>				Italic/emphasized
<blockquote></blockquote>	Quoted section
<br>				Line break
<a href=""></a>			Hyperlink
<ol|ul><li></ol|ul>		Ordered or unordered list (ol or ul) and list item (li)
<dl><dt><dd></dl>		Description list (dl), term (dt), description (dd)
<hr>				Horizontal rule/graphical line

Some tags like title, h1, h2, h3, b, i, a, ol, dl and blockquote needs to be closed (/) so that their formatting doesn't spill out on the text below.

pre is another tag that has been used in this document to show text and code as it is, without any formatting.

Design - CSS optimization

A favicon is not needed. The web browser will, however, try to fetch one anyways. To satisfy the browser without adding an .ico file, put this line at the top of your document:

<link rel="icon" href="data:,">

Styling is not needed. It would be better if people would create their own styling in their browser. However, to help the non-technical human on the other side of the screen, you can add some styling before the title tag like so:

<style>html{margin:0 auto;max-width:70ch;line-height:1.6}</style>

Document and image sizes - 14 KB rule

The main rule we go by for both html documents and images is to keep the sizes to a maximum of 14 kilobyes. The size of this document is around 7 KB.

The reason for a 14 KB rule is that the TCP protocol that handles the communication between the host (web server) and your client (web browser) starts out by sending 10 packets of 1460 bytes of information. That corresponds to one round trip of data. Satellite internet, which has become all the rage today and has bad latency, is one reason for wanting to keep the round trips as low as possible.

The html document and images are fetched independently even though the image file is linked within the html document. So, if you want to show two images together with your text, then it would be three round trips as long as you keep each file to a maximum of 14KB.

Critical Resources and the First 14 KB - A Review

An example html document

<link rel="icon" href="data:,">
<style>html{margin:0 auto;max-width:70ch;line-height:1.6}</style>

<title>My personal Website</title>

<h1>A nice descriptive title</h1>

<p>
Sometimes one might want to
<i>emphazise</i>
some word or maybe even catch the readers attention by making the text
<b>bold</b>.

Conventions

It is adviced to use strong, em, q, cite instead of b and i. However, our interest here is to save space in data transfers and also to keep things simple. Read more about these tags at: W3Schools.

Break the rules, keep it simple.


Send comments and suggestions to comments@legnered.se