Jacob Barber

Web Servers

In the context of websites and servers, an index most commonly refers to the index page of a site. When a request is made to a web server that does not specify a path to a specific resource, (i.e., when a request for “/” is made), web servers will return the designated homepage. This homepage is a file in the root directory, and in most real-world applications (including the Apache web server used by OSU Engineering) it is mapped to “index.html”. Because an index page is the default resource loaded from a web server, it is considered the homepage of the web application, and usually features top-level information most critical to visitors to a website. However, while “index.html” is the most common mapping, other mappings exist, such as in Microsoft's .NET platform, which allows the use of “default.html”. Additionally, servers may also search for “index.js” or “index.php” as the homepage.

The Inspector tools in the web browser provide in-depth information about the current page being viewed, ranging from details about the HTTP request and HTTP response, to performance and memory usage details, to the source code of the page itself. Comparing the file details of the page hosted on the web server to the local file, the primary difference can be noted in the request/response pairs for each file. In the local file, the request and response headers are minimal, featuring only the content type, URL, request method, response code, and the Last-Modified date. By contrast, the request/response headers in the server file are far more detailed, containing numerous additional headers specifying information about the connection and the resource provided from the server, even as the content of the resources is identical.

As described in the Exploration Module “Transfer a file to a web server”, the favicon.ico file is provided automatically by the OSU server. As a result, the file returns status 200, indicating the server was able to locate the resource and provide it in the HTTP response. The HTML boilerplate generated at the beginning of Assignment 1 includes references to two source files, main.css and main.js, but did not generate said files. These files, however, are not provided by default by the OSU server, and no files with those names exist in the source directory. Thus, the web server is unable to locate those resources and returns code 404.

The URL for this page is as follows: https://web.engr.oregonstate.edu/~barberja/a4-barberja/index.html, and can be broken down into the following components. The Scheme is “https”, referring to the secure HTTP protocol. The Subdomain is “web.engr”. The Host Domain is “oregonstate.edu”. The Resource Path is “~barberja/a4-barberja/index.html”, which specifies the direct path to access the resource from the server.

Frontend Design

Frontend design is the software development discipline pertaining to designing the experience of how a user interacts with a piece of software. This includes surface-level details such as the visuals of the software--color scheme, layout, typography, etc.--as well as encompassing more fine-grained aspects. Beyond visual design, frontend designers are concerned with the user experience of navigating their software, ensuring the program is easy to understand and use, and reducing friction in the form of load times or bugs. Additionally, frontend design is concerned with accessibility in order to make the software available to as many users as possible. A major pillar of frontend design is Usability Engineering, the core tenants of which are summarized in the Five “E”s of Usability, described below.

The Five “E”s of Usability

Effectiveness

Software should be effective at helping a user achieve their goals. Usable software ensures that users achieve accurate, consistent results. Furthermore, usable software should do this in a manner that instills confidence in a user of said accuracy.

Efficiency

Usable software enables users to complete tasks through straightforward procedures requiring a minimal number of steps. Longer processes create friction for users and force them to spend longer using the software, leading to a less enjoyable experience.

Ease of Navigation

Software should be easy and intuitive to navigate, especially for new users. The more time that users must spend understanding how to use a piece of software, the less time they are able to dedicate to achieving their goals. Additionally, if new users cannot understand how to use a piece of software intuitively, they are less likely to use it at all.

Error-Free

Usable software seeks to guarantee a seamless experience, with no bugs or errors stemming from standard use. Designers must strive to anticipate common errors, and ensure that potential bugs and unforeseen issues provide as little impact to the user experience as possible.

Engagement

Software should be designed to be engaging to the target audience. Users of a piece of software should leave each interaction with it free of frustration and with a willingness to return for future use. This “E” requires an understanding of the industry standards and visual design expectations of the target user, while also encompassing the previous four “E”s to consider the entire experience holistically.

Page layout tags allow web developers to section website content based on the categorization of said content. While the default visual behavior of each layout tag is often similar or identical, categorizing content with these tags enables machines (such as search engine bots or screen readers) to understand where in a page specific components are located. Additionally, they allow developers to apply visual styling to specific content based on which section it is contained in. There are numerous page layout tags which shall be explored in the following paragraphs.

The <header> element indicates the content contained within is the banner or masthead of the site. Typically, header content is consistent across each page of the site and commonly includes marketing materials such as the name and logo of the site publisher. The <nav> element indicates the content within contains links to navigate to other locations on the site. This block can be used in multiple locations and can contain different sets of links.

The <main> element contains the primary block of content for the page, such as articles, media, etc. It is often subdivided into further content blocks for organizational purposes. The <section> element denotes that the content within is thematically linked. Content within can be further subdivided using additional tags, but all content in a <section> should be related. The <article> element indicates that the content within pertains to a single specific topic. <article> elements can typically be found within <section> elements. It is common practice to mark individual <article> elements with #topic tags to allow for individual styling and to aid in navigation with anchors.

The <aside> element typically includes content related to that contained in an <article>, floating to the left or right of the article and utilizing a distinct style. This location property can also be utilized to create sidebars. The <figure> element functions similarly to the <aside> element, but rather than containing text content, it will typically contain media such as an image or video. This element wraps around a <figcaption> element which contains a text description of the media for screen readers and machines. The <blockquote> element is designed to contain extended quotations that should be distinct from a single paragraph. These elements commonly have a distinct style applied to make them stand out from the rest of the content in an article or section.

The <footer> element appears typically at the bottom of a page and commonly holds contact and legal information, as well as links to important pages (typically contained in a <nav> element). At minimum, even if no other content is contained, footers should contain the owner's copyright statement. Finally, the <div> element lacks style or dimension, and most often serves as a placeholder for dynamic content. It can also be used as a divider for content where other page layout elements do not readily apply.

1. External Anchors link to content outside the current website. This is accomplished by setting the href attribute to the destination URL.
2. Page-to-Page Anchors link to other pages in the current website. Since pages on a single website are typically contained within the same directory, the href attribute can be set to the relative path for a given page. This removes the need to utilize a specific URL for this type of navigation.
3. Internal Anchors link to destinations on the current page. In order to accomplish internal navigation, “id” attributes must be used in page elements (such as in <article> elements). These ID attributes can then be utilized as destinations for the anchor via the use of a hashtag and the ID name. For example, if an article is given the attribute id="topic", an anchor can be created as <a href="#topic">, which will navigate to that location on the page. Additionally, ID tags can be used in External and Page-to-Page anchors to directly navigate to a specific location on a different page.

Images on the Web

Most modern websites utilize images in their design. Ranging from photos, to diagrams, to logos, to other smaller visual elements, image files are an integral part of a website's visual presentation. Most image files, however, are not ready for “out-of-the-box” use in a webpage. Users expect websites to load quickly, fit the dimensions of their screen, and to be easy and convenient to navigate. Therefore, image files utilized on a webpage must be optimized for that purpose, adhering to six specifications. These specifications shall be explored in the following paragraphs.

First, all images should have a descriptive file name. In order to improve search engine optimization, file names should describe the content image as concisely as possible, ideally with a few keywords. The formatting of the title should contain hyphens. For example, a photo of a red ball in a meadow at sunset, saved as a JPG file, might be named “red-ball-meadow-sunset.jpg”.

Next, all images should be saved in the file format most appropriate for the content of that image. Photographs should be saved as JPG or WebP files. The compression algorithms utilized to create images in these file formats are well suited to highly-detailed, noisy images, which aid in hiding compression artifacts. Additionally, the compression algorithms can be tuned to various quality levels, allowing more control over the tradeoff between file size and image quality.

By contrast, line art (such as graphics or diagrams) should be saved as either a PNG, a GIF, or an SVG. All three of these file-types allow for transparency. PNGs and SVGs utilize an alpha channel (which allows for semi-transparent pixels), while GIFs utilize 8-bit transparency (allowing for “on-off” transparent pixels). PNGs are ideal for static artwork with a high level of detail. SVGs are vector graphics, which means the visual information is stored mathematically, rather than as pixels. This function allows for SVGs to be resized without any degradation of quality, making them excellent for logos. GIFs utilize a limited color palette, but support animation, making them useful for displaying simple animated images. SVGs also support animation, but require additional implementation by the web developer, whereas GIF animation is a built-in feature. PNGs and SVGs are lossless file formats, whereas GIFs, JPGs, and WebPs are lossy.

This leads to another specification for optimized images: that they should have a small file size. Users expect images to be served quickly to their browser, and space on web servers is limited. Optimized images should be of the smallest file size possible to facilitate a smooth user experience. This can be accomplished through manipulation of compression algorithms when saving images. Most image editing tools allow for fine-tuning of parameters to balance image quality with file size.

File size can additionally be reduced by adjusting the dimensions of the image. Smaller images have, by their nature, a smaller file size. Furthermore, optimized images conform to the viewing environment of the user. Images should be cropped to remove any excess whitespace or unnecessary details. Another consideration for optimized images is the resolution of the image with regard to the monitor viewing the webpage. Most monitors render between 72 and 300 pixels per-inch (ppi). Some monitors render at an even higher resolution. It is increasingly becoming standard for websites to save multiple resolutions of image files in order to serve the optimal image for a given resolution.

The final specification that must be considered is the color mode of the image. Images optimized for web should be saved with the RGB color mode, save for GIFs, which utilize an Indexed color mode. This ensures that browsers will correctly render the image files.