Compression in Action
URL structure
DNS and Domain Names
How a URL is shown
scheme://user@subdomain.host:port/path?query#fragment
https://www.ric.edu/academics/undergraduate-programs/undergraduate-performing-fine-arts-programs#art-studio
https://blackboard.ric.edu/webapps/blackboard/content/listContentEditable.jsp?content_id=_3319256_1&course_id=_88505_1&mode=reset
When we type in a URL, we're really trying to reach a file on a server, i.e. a computer on a network
Computers on networks are identified by IP address
People aren't going to remember 54.173.165.221, with ports and logins, but they can remember ric.edu
There's a whole DNS lookup process and I think it's really well explained in How DNS Works
Most basic version: the URL points to a file, which then shows
More complicated version: the URL acts as a query that tells a separate file what content to show. Often done with databases, but sometimes
We'll talk about what these files actually are next week!
Important to scope your project
Choices you make matter to your users
Do you even need another file?
What tools will you need to implement a given design?
HTML - The single key filetype of the web
HTML is often generated programmatically by PHP
PHP: Hypertext Preprocessor
Increasingly, HTML created by Javascript
In typical format, it's a way to showcase interaction on web
JavaScript parses the "DOM" - Document Object Model
Now, you can build whole apps just in JavaScript, but we're going to stick with traditional implemetations.
The critical thing with creating websites is that it's all just text.
Just a text file on a server, when linked from an HTML file, changes how the HTML is styled on the page
The most common form of non-text media on the web
The most basic image on computers in general
Completely uncompressed file
Every pixel represented by 3 bytes representing Red, Green, Blue
Just not really used on the web, but acts as sort of the base of all image files
Created by Microsoft for Windows 1.0
Package file of BMPs or (later) PNGs
Only place it's really used is in Favicons
Largely replaced by individual PNGs
Created by Compuserve for images on their network
First major compressed image format
Uses lossless compression with LZW, which looks for similar patterns in the file and simplifies those patterns to repeated strings.
Really great explanation on Wikipedia of compression encoding
Biggest drawback is color depth: can only support 256 colors in image
Supports animation, with each frame being a whole image
Supports transparent pixels.
Well, not much anymore, but
Big innovation: lossy compression, so much smaller filesizes
Uses Discrete Cosine Transform, which translates the pixels to cosine waves to model pixel values.
This is used in MP3s and MP4s as well!
If it's an image on the web, you should start with JPEG and determine other filetype from there
PNGs actually a pretty old file format
Original problem was that Windows and IE didn't support well until IE9!
Lossless compression, using 2 methods. The first is similar to GIFs, and the second is similar to ZIPs
Transparency is better than GIF: supports an "alpha channel" which allows for opacity on a scale
More color options than GIF: up to 24-bit colors
Because lossless compression, higher quality than JPEG
SVG is radically different than other images because it's a vector format and can be inlined into the HTML in a human-readable way
Vector format means that it isn't like BMP in that it doesn't use individual pixels to define image.
XML is very similar to HTML, but takes any kind of tag instead of just HTML tags, so can describe anything
Because it's in the DOM, it's editable with JavaScript
Intended to replace both PNG and JPEG
Uses multiple compression formats at once, both lossy and lossless
Typically roughly 10% smaller than the same PNG or JPEG
Way fewer options in both, in part because of non-web compatibility
Used to use plugins for rich media, like Flash, but now native to HTML
2 choices: MPEG-4 & WebM
MPEG-4 is basically a string of JPEGs put together.
WebM is basically the video version of WebP.
3 choices: MP3 & WAV & OGG
MP3s use the same lossy compression algorithm as JPEGs to make files significantly smaller. However, it does make audiophiles cry.
WAVs are uncompressed audio files. These can be really large for any meaningful length of audio, but they're going to sound the best.
OGG is an alternative lossy compression filetype for audio. The big difference is that it's an open-source filetype.