Web General

Table of contents
  1. Rersources
  2. Terminology
  3. Folder structure
  4. Naming files/folders
  5. Web Platform
  6. History of web
    1. HTML
    2. CSS
    3. Designing
    4. JavaScript
    5. Web Platform
    6. Progressive enhancement

Rersources

  • link Web Platform Contribution Guide
  • link Resilient web design by Jeremy Keith
  • link MDN Learn: Browsing the web

Terminology

  • Web page (or “page”) - Document that can be displayed in a web browser, like a HTML document.
  • Website (or “site”) - Collection of web pages grouped together into a single resource, with links connecting them together.
  • Web server - Computer that hosts a website on the internet.
  • Search engine - Web service that helps people find web pages, such as Google, Bing.
  • Interoperable - Different implementations behave exactly the same for a given case.

Folder structure

  • index.html
  • images folder
  • styles folder
  • scripts folder

Naming files/folders

  • Lowercase with no spaces.
    • Web servers are case-sensitive. Having all names in lowercase helps reduce random errors.
    • In terminal, file names need to be quoted if containing spaces.
    • In URL, the space is converted to %20, which can create bugs if the system assumes file names and URLs match perfectly.
  • Use hyphen (-) instead of space.
  • Do not use backward slashes to reference file paths on Windows. HTML can handle forward slashes on Windows.

Web Platform

link Web Platform Contribution Guide

Collection of standardized application programming interfaces (APIs) that programmers use to make web pages and web applications.

  • Browser
    • W3C
    • WHATWG
  • Ecma International
    • Ecma-262, Ecma-402, Ecma-404 (collectively ECMAScript)
  • OpenJS Foundation
    • Node.js
    • Node Global
  • IETF
    • HTTP
  • Unicode Consortium
    • Unicode standard
    • Text related issues like bi-directional text, line-breaking
  • IEEE
    • IEEE 802.11 WLAN
    • IEEE 754 Floating-Point Arithmetic
  • ISO
    • Standards organizations like W3C will publish ISO standard, to allow governments to require these standards for policy and procurement purposes.
  • Khronos
    • WebGL
  • IANA
    • DNS Root, IP addressing

History of web

link Resilient web design by Jeremy Keith

HTML

Tim-Berners-Lee working at CERN in 1980s, created a personal project ENQUIRE to manage information. To expand the program to large amount of data being created at CERN, he pitched the idea in Information Management: A Proposal, which became the World Wide Web. CERN already had a network of networks, connected via telephone wires, since 1960s and the early adopters were universities and scientific institutions.

Initial research was funded by DARPA, but the engineers designed the network to withstand censorship, not a nuclear attack. This is reflected in the protocoals designed as well, like TCP/IP only cares about how packets of data should be moved around, and not about the content of the packets.

Hypertext was coined by Ted Nelson, who was originally working on his own hypertext system called Xanadu. Both Ted Nelson and Tim Berners-Lee were influenced by Vannevar Bush, who was in turn influenced by Paul Otlet. Tim though, people would hypertext to link to non-HTML resources, like word, excel, other computer files. But people began to create fully-fledged documents directly in HTML.

CERN was using SGML internally, and Tim Berners-Lee used SGML as a starting point for HTML. And the first version came out with 21 elements, with a proprietary element NEXTID, which only worked on Tim’s machine running NeXTSTEP operating system. Tim created the first web browser, called WorldWideWeb, which only worked on NeXT machines.

Nicola Pellow, an intern at CERN, created the first cross-platform browser called Line Mode Browser, making the web accessible to everyone.

To solve issues with interoperability i.e. what should browser do when it encounters something that it doesn’t understand, browsers will ignore tags they don’t understand. This allows to add new tags, and knowing exactly how old browsers will treat it; they will ignore the tag and display the content.

CSS

New tags kept being added to HTML, but most of these tags were focused on visual than the meaning of content. Hakon Wium Lie, also working at CERN at the same time as Tim Berners-Lee, proposed a Cascading Style Sheets to describe the presentation of HTML documents. And together with Bert Bos, they created the syntax of CSS.

In 1996 David Siegel published Creating Killer Websites book, outlining series of ingenious techniques for creating eye-catching designs out of the raw HTML tags. Like using a transparent GIF as an IMG element to control amount of whitespace in the design. Or using TABLE element to recreate any desired layout.

Web designers didn’t use CSS because of the browser war between Microsoft Internet Explorer and Netscape Navigator, who would invent their own separate HTML elements, and designers were forced to write for both browsers. A group of web designers formed Web Standards Project, and began lobbying Microsoft and Netscape to abandon their proprietary ways and adopt standards.

Dave Shea created CSS Zen Garden to showcase what could be done with CSS. And more importantly separate the concern between HTML and CSS.

Designing

In 20th century, Swiss style was created to provide guidelines for designing for print pages. This included using grid systems and typographic scales based on the preceding centuries of design. Knowing the ratio of the dimensions of a page, designers could position elements with maximum effort (page is constraint, and grid system is used to impose order).

When transitioning to web, David Siegel’s Creating Killer Websites, showed everyone how TABLE and GIF hacks can be used to create any websites. So designers took the same approach from print media (where page ratio is fixed) to the web, even though the browser window if not of fixed size.

It started with designing for monitors that are 640 pixels wide, then 800 pixels, 1024 pixels, and ultimately settling oni the magic number 960 pixels.

One reason why this happened, is because there were no tools created specifically for visualizing layouts on the web. Instead designers had to use the existing tools, which were focused on print media.

Photoshop was one tool utilized by graphic designers, which started with fixed canvas size. Then came Macromedia’s Dreamweaver for web design, which operated on WYSIWYG (What You See If What You Get), which would not always work on the web. Some assumptions that were prominent in first decade of twenty-first century

  • everyone was browsing with a screen wider than 960px.
  • everyone had broadband internet access, so no need to optimize the number and file size of images.
  • everyone was using a modern web browser with the latest plug-ins installed.

In 2007, Steve Jobs released iPhone which can be used to browse the Web. Before iPhone, mobile devices could only display a specialized mobile-friendly file format called WML.

Designers started with segmenting desktop (m.example.com) and mobile (mobile.example.come) into separate domains. This approach was termed the mobile web. User-agent of the browser was used to identify what subdomina to use. But this became cumbersome as the list of browsers increased. And with the introduction of iPad, the distinction between mobile and desktop became less clear.

Over time the illusion of one-size-fits-all approach to web design began to evaporate, and was gradually replaced with the acceptance of the ever-changing fluid nature of the web.

In April 2010 Ethan Marcotte gave a talk at An Event Apart in Seattle, about reponsive design in architecture. The idea that buildings could change and adapt according to the needs of the people using the building. One month later he expanded the idea in an article called Responsive Web Design, published on A List Apart (referencing A Dao Of Web Design article by John Allsopp). Article by John by originally rejected by the community since they did not want to change their ideaology from print media.

Luke Wroblewski cointed the term Mobile First.

Orignally, web design was dictated by the designer, with users having no choice but to accomodate the site’s demand, like screen size, or network speed. Now web design can if focused on the universal nature of the World Wide Web i.e. everyone should be able to use the web.

JavaScript

John Postel (worked on ARPANET, precursor to Internet) created the Robustness Principle, also known as Postel’s Law

Be conservative in what you send; be liberal in what you accept.

This philosophy is true for declarative languages like HTML, CSS. Declarative language is where you describe the desired outcome without providing step-by-step instructions on how to achieve it.

Imperative languages provide more power than declarative languages. The main downside being sytax needs to be perfect, hard to learn. In the browser, the only choice for imperative language is JavaScript.

In 1996, Brendan Eich working at Netscape created the first imperative language for the web in 10 days. First it was called Mocha, then launched officially as LiveScript, then marketing department changed it to JavaScript, hoping to ride the Java wave hype.

Two main early uses were form validation (to get quicker feedback then getting response from server), and rollovers (swapping out images to mimic hover effect).

Over the history of JavaScript, features that became popular were moved to HTML, CSS (as it is easier to write declarative langauge).

Ethan Zuckerman used JavaScript to spawn window with an advertisement in it.

In 2005 Jesse James Garett published an article Ajax: A New Approach to Web Applications, which popularized a technique for JavaScript to send and receive data from a web server without refreshing the whole page, resulting in smoother user experience.

Tim O’Reilly used the phrase Web 2.0 around the same time to describe new wave of web products and services. Not clear what exactly made Web 2.0 (rounded corners, gradients or JavaScript, Ajax or new business models). Launching the age of web apps (hard to provide definition except use cases).

After the standardization of HTMLv4 in 1999, the World Wide Web Consortium published XHTML 1.0. It was a stricter way of writing HTML (moving HTML from declarative to imperative side). XHTMLv2 was abandoned. Interseting how later everyone moved to JavaScript which is also imperative.

Web Platform

Platform is an incrorect term, as platforms are controlled and predictable. WWW is the opposite.

iOS is a platform. If you build an ios app and someone has an ios device, you know they will get 100% of your software. On Android they will get 0%.

Web on the other hand is a continuum. You can’t be sure how many web technologies will be supported. Some people will get 80% or 90%, others 20%.

Progressive enhancement

What does designing a thing in layer looks lik

  • A chair in a room.
  • A room in a house.
  • A house in an environment.
  • An environment in a city plan.

In web the benefit of layering is separation of concerns, which allows enhancements to be applied according to the capabilities of the end user’s device.

Tha layers of web

  • JavaScript and CSS build on top of HTML.
  • HTML requires a URL to be reachable.
  • URL reachability depends on HTTP protocol.
  • HTTP protocol depends on TCP/IP.

Progressive enhancement asks that designers start from the lowest common denominator (well marked-up document), and then add as many features on top as they want. If any feature is not supported, the browser will just ignore it. Websites do not need to look exactly the same in every browser. People using the old browsers should get the same content as the new browsers, but that dosen’t mean they should get the same experience as well.

Progressive enhancement means providing core functionality to everyone. The enhancements can be browser specific.

Use this approach to implement progressive enhancement in web (this approach can help with technical debt, as you can throw the enhancements and start over)

  1. Identify core functionality (most people come to your website to read, write, buy, sell, not to tap or scroll).
  2. Make it available using the simplest possible technology.
  3. Enhance, which can include adding interactions like swiping, tapping, clicking, scrolling, dragging, dropping.

Example news website

  1. Core functionality is to show the article. So serve plain HTML at a URL (the url should be simple and easy to read and share).
  2. Enhance, by adding your own stylesheet.

Example social network

  1. Core functionality is sending and receiving messages. For displaying message, plain HTML is enough. For sending message, HTML with form and a button for submit is enough.
    • People can now send and receive messages no matter that device or browser they are using.
  2. Improve the experience without breaking the fundamental activity.

https://resilientwebdesign.com/chapter7/