lim jia sheng,
0344034.

BDCM
.Interactive Design
::lectures

---

lectures:

[1]: The Web & How it Works

We were first brought in & briefed through the MIB. Then, we were given a little """lecture""" about blogging & their integration into a designer's journey. So if you're reading this blog, hello.

What are Webpages, Browsers, & Websites

A Webpage

A document with all/a subset of text, images, sound, & video accessible from the web via any internet connected device with a web browser.

Single web page sites (Parallax sites/Landing page)

They are long. (A single long page)

Figure 1.1.1, Example of a single web page site, 27/8/2021

A web browser

A program that fetches data via HTTP & renders the retrieved data onto the screen.

Figure 1.1.2, 2021 Browser marketshare, 8/2021

Browsers are lucrative because of SEO optimization, as they provide data & charge for rankings in their algorithms.

A website

A set of webpages that are stored/hosted on servers. They're typically designed for specific purposes & have domain names to be identified.

Figure 1.1.3, Example of a website, 27/8/2021

It's made with 3 web technologies:

• HTML (Hypertext Markup Language)
  • Provides structure & meaning of the webpage.
• CSS (Cascading Stylesheets)
  • Styles & lays out the webpage.
• JavaScript
  • Dynamizes the webpage.

Website vs Landing page

A landing page has one single purpose, a microsite if you will.

Figure 1.1.4, Differences between a typical page & the landing page

Static vs Dynamic Websites

To change or not to change — A philosopher somewhere, probably.

Static

• Fixed number of pages.
• Fixed content & structure.
• Same content from whoever, wherever, whenever.

Dynamic

• Generates pages in real-time.
• Possible different content per person, place, time.
• Can be controlled from a Content Management System (CMS).

Hi to whoever's curious, client-side statically rendered pages using hash routing/JS's history API, can emulate dynamic/server-side rendered pages. SEO suffers the same though.

Figure 1.1.5, Big fat infographic to choose between them, 27/8/2021

Domain & Web Hosting

Domains

A domain is a unique set of characters that identifies a website. It's equivalent to a street address.

The browser will look up a Domain Name Server (DNS) to find the actual location of the website on the internet when a URL is requested.

Figure 1.1.6, Infographic splitting apart a URL, 27/8/2021

Web Hostings

A hosting server is where a website's data — media, formatting, backups — is stored. It's equivalent to a landlord, leasing out & maintaining server space.

Frontend vs Backend vs Fullstack

Frontend

Client-side — the part that's build to interact with users directly.

Backend

Server-side — the part where the front-end interacts with to get stuff from databases, servers, applications.

Fullstack

Client & server side — Normally describes a person who can play magic with both equally.

Types of Websites

Figure 1.1.7, Types of websites + task instructions, 27/8/2021

Figure 1.1.8, Week 1 task thing, 27/8/2021

[2]: Web Standards & HTML

What are web standards

The World Wide Web (WWW) as an information ecosystem where content created is fed into the web, & passed through the browser to allow others to access that information. Let the browsers be the different shaped holes, & the information being the pegs — a square peg won't fit in a round hole.

Without web standards, every website would have to be crafted per browser, to be able to pass through the "Chrome-shaped hole" for example. Web developers actually had to go through this in the 90s with the lack of standardization, & create 3 or 4 versions of a website for compatibility with all browsers. Feature updates would have to be cross-ported to each version as well. Hell.

Fortunately, web content was largely text based, so a website block would fit through the majority of the holes. However, browsers further developed, more & more stuff were implemented. If one would want to take advantage of it, they'd no longer fit through other browser holes. Browser versions were now tied with your own website's versions, as they'd possibly break your sh*t.

& that's how web standards were introduced.

Objective

To ensure browser makers adhered to a standardized way of doing things, prioritizing cross-compatibility between them.

Why?

• Keeps the web free & accessible.
• Simplifies source code; reduces dev & maintenance time.
• Enable backward compatibility.
• Maintain good SEO

Standards Development Organisations (SDOs)

• Internet Engineering Task Force (IETF)
• World Wide Web Consortium (W3C)
• WHATWG
• ECMA TC39
• Web Standards Project (WaSP)

The Web Accessibility Initiative (WAI)

A standard by the W3C to facilitate accessibility with features for HTML.

HTML scripting

HyperText Markup Language (HTML) is used to design web pages using a markup language. It annotates text so that it's both machine & human readable.

HyperText

The link between web pages.

Markup

The definition of a text document's structure with HTML tags.

Figure 1.1.9, HTML Anatomy, 3/9/2021

WWW vs Internet

• WWW
  • encapsulates the way information is accessed on the internet.
• Internet
  • encapsulates the devices connected.

HTML Page Structure

The essential building block elements (eg. !DOCTYPE, html, head, title, body)

Figure 1.1.10, HTML structured anatomy, 3/9/2021

Elements & tags

Predefined tags & elements tell the browser how to display stuff.

• • Declares that the document is of HTML type.
• • Base container for everything in the webpage.
• • Container for "behind the scenes" elements; mostly boilerplate.
  • eg.

Figure 1.1.11, HTML source vs rendered, 3/9/2021

Nesting

Each container/element encapsulates each other; the parent element contains the child element.

Figure 1.1.12, Nesting structure of basic HTML page, 3/9/2021

Text formatting elements

• • Bold.
• • Itallics.
• • Underlines.

NOTE: u & i is only typically displayed as itallic & underlined. Per spec, they only signify "an alternate voice or mood" & "unarticulated" respectfully.

List elements

• • Unordered list. Encapsulates
  • 's
  • • Ordered list. Encapsulates
    • 's
    • • List item.

  Figure 1.1.13, Unordered list example, 3/9/2021

  Links

  • • Hyperlink.
    • A href attribute needs to be added to direct the link.

  Images

  • • Image.
    • A src attribute needs to be added as the source of the image.

  [3]: Web stuff

  HTML Tips

  • Close the tags
  • Use proper page structure/semantics (one & , content inside , etc.)
  • Use proper file & folder structure/semantics (index.html, no space in filenames, folder per file type, etc.)
  • Use proper code structure/semantics (include protocol — http://, https:// — in href="")

  Web images file format

  JPEG (Joint Photographic Experts Group)

  • Most commonly used
  • Lossily compressed
  • Good for photos, not for graphics
  • Does not have an alpha channel — no transparency

  PNG (Portable Network Graphic)

  • Losslessly compressed, based on LZW compression
  • Has alpha channel — yes transparency

  GIF (Graphical Interchange Format)

  • Limited to 8 bits per pixel (256 colours per image)
  • Supports saving sequences of images in one file — yes animations

  Website layouts

  Most sites are organized in multiple columns, created using

  /'s, & positioned + styled using CSS.

  Even though tables can be used to create layouts, it's designed to present tabular data insted.

  Responsive layouts

  's + CSS can create responsive layouts to provide optimal viewing — easy reading and navigation with a minimum of resizing, panning, & scrolling — across a range of devices.

  Figure 1.1.14, Common website resolutions, 10/9/2021

  Division

  Figure 1.1.15, Typical website layout, 10/9/2021

  tags groups/divides/sections out a HTML document, enabling them to be styled separately in CSS.

  [4]: Intro to CSS

  Cascading Style Sheets (CSS), controls layout, formatting, & presentation.

  Why CSS

  1. Separate content from form.

     Figure 1.1.16, Example of separation of content & form, n.d

  2. Add style to HTML elements

     Figure 1.1.17, Example CSS declaration, n.d

  Adding style

  • Specifying what the style looks like

    • Called the CSS style “Declaration”

    • {
          font-size: 10px;
          background-color: #ffffff;
          color: #222222;
          margin: 20px;
      }
      

  • Naming the HTML (or XML) element to which the style applies

    • Referred to as specifying the CSS “Selector”

    • body, p, .class, #id, *
      

  Cascading

  A more-specific selector beats out a less-specific selector.

  .red { color: red }
  body { color: black }
  
  /* .red {} will be applied instead of body {} */
  

  This is generally true except in few edge cases:

  • If there's a tie in specificity, the one declared the latest in the file will override the earlier.
  • When the !important tag is applied, it overrides everything.

  Where to add CSS?

  Internal stylesheet

  Using a

  <head><style type='text/css'>CSS Code Here</style></head>
  

  External stylesheet

  Using a tag to reference styles in a different file. This is usually preferred.

  <link rel='stylesheet' href='style.css' type='text/css'>
  

  Inline style

  Using a style='' attribute on a HTML tag.

  <p style='font-size: 14px;'>Text</p>
  

  [5]: Dreamweaver

  A website development software around for >20 years. Initially developed by Macromedia which was acquired by Adobe.

  This lecture was just taking us through how to use it, best described using the slides itself.

  [6]: Website layout & structure

  Planning website structure

  1. Rough outline
  • Keywords
  • Audience
  • Content
  2. Consider
     • Monitor sizes (Convention — 960px:700px)
     • UX
     • Browsers
  3. Find hosting

  Creating sitemap

  1. Homepage
     • What should it do.
     • What's its conversion goal.
  2. Themes/categories
     • eg. running shoe section, skating shoes sections
  3. Branch from homepage

  Figure 1.1.18, Example sitemap, n.d

  Creating wireframe

  • Keep loose, simple, clean
  • Order pages
  • Get feedback & adjust accordingly