Samantha Jarrah

Web Servers

If a resource is not specified in a URL, then most web servers are configured to return the file at the path "/index.html" when the web application receives a GET request. This is also called the designated homepage on the web server. Most web applications will return "index.html" from the root directory when it receives a GET request with '/' and no specified resource.

I notice a few differences between my website when looking at it through the web server versus my local computer. I can see this information by right-clicking the screen and selecting "Inspect" and then selecting the "Network" tab. They both have the same request method, GET, and the same status code of "200 OK". The status on the files "main.css" and "main.js" is 404 through the web server and (failed) through the local computer; in order to get a 404 error, there needs to be some communication with a server, which is why 404 is not the status when looking at the page on my local computer. There are far more request/response headers when looking at the site through the web server. Through the local computer, the response headers are Content-Type and Last-Modified, whereas through the web server the response headers are Accept-Ranges, Connection, Content-Encoding, Content-Length, Content Length, Content-Type, Date, ETag, Keep-Alive, Last-Modified, Server, and Vary. The request headers through the local computer are sec-ch-ua, sec-ch-ua-mobile, and sec-ch-us-platform. Through the web server, the request headers are Accept, Accept-Encoding, Accept-Language, Cache-Control, Connection, Cookie, Host, Pragma, Referer, sec-ch-ua, sec-ch-ua-mobile, sec-ch-ua-platform, Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, Sec-Fetch-User, Upgrade-Insecure-Requests, and User-Agent. Neither request has a body since GET requests do not have bodies, but they both have the same response body which is the HTML for the web page. When accessing the site through my local computer, I am accessing "index.html" directly whereas the request through the web server is for "a1-jarrahs/" which defaults to "index.html". The server being used for my web page is Apache/2.4.6. When looking at the time column, it is significantly quicker when accessing it through the local computer vs the web server. It takes 17.5 times as long to access the homepage through the web server versus my local computer. Lastly, when going through the web server, there is a favicon.ico that is visible on the tab as well as a JavaScript file named executor.js.

The favicon.ico file has a status of 200 because that file is found. On the flip side, the main.css and main.js files do not exist in the server, hence the 404 error meaning that the resource cannot be found.

The URL to my webpage is: https://web.engr.oregonstate.edu/~jarrahs/a1-jarrahs/ The scheme is "HTTPS", the subdomain is "web.engr", the host domain is "oregonstate.edu", and the resource is "~jarrahs/a1-jarrahs/".

Frontend Design

Frontend design is about the entire experience a user has with a website. This includes all visual aspects such as color schemes, fonts icons, illustrations, etc. Navigation systems are an important aspect of user experience. If a user can easily jump between pages and locate their desired content, they are likely to return to the website in the future. Lastly, frontend developers must always keep usability in mind when designing websites. Usability is all about creating a website that is easy to navigate, has no errors, is enjoyable to use, and can help users efficiently find the content they desire.

The 5 "E"s of Usability

Effective

In order to be considered usable, a product must be effective at helping a user meet their goal.

Efficient

A usable product must enable users to perform tasks with the least number of steps. Users want to get their results quickly.

Easy to navigate

Users who have never used the product, must be able to easily figure out how to locate the content they are looking for. A highly usable product will also have a method of clicking/searching for content that is easy to remember.

Error-free

In order to avoid accessibility and availability issues, a product should be error-free. Try learning how users create common errors so that you can write code to handle those errors.

Enjoyable/Engaging

You want your audience to return and use your product again, so ensure that the content and design is both enjoyable and engaging for your intended audience.

Page layout tags help to break up the flow of content on a webpage. They are displayed by browsers with a line break before and after, with all other styles applied through CSS. Importantly, page layout tags help machines, such as search engine robots or screen readers, understand the various components of the webpage. The header element, includes any of the following: name, publisher, or marketing slogan within the banner/masthead. The nav element helps users navigate between pages. The main element signifies the primary block of content. Next, there is the section element, used for thematic groupings of content. The content should all be related but not able to stand on its own. Within sections, you may have article elements. Aside elements include content that relates to the article and is usually floating to the left/right of the article. The figure and figcaption elements include media and a blockquote contains extended quotes. At the end of a page, there is a footer element that holds legal information, contact info, copyright info, year of publication, or owner's name. Lastly, there is the div element which is used when no other element makes sense.

Optimizing Images

There are 6 major specifications for images used on the internet. Images should have descriptive file names to assist search engine bots in properly categorizing the image for users searching for related images; it helps to improve search engine optimization. In order to have the fastest load time possible, images should have a small file size. High resolution images should only be provided to high resolution devices. Ensure that images are cropped and reduced in size to fit the space of a web page. An image that is too large will load slowly, potentially losing customers. Images should be in the correct file format to be properly displayed. Depending on the monitor, a differing number of pixels per inch can be displayed, so multiple image sizes should be provided. This is done through resolution reduction. Lastly, the color mode for .PNG, .JPG, .SVG, and .WebP should be RBG and should be Indexed for .GIF.

As mentioned above, images should be in specific file formats. Photos are typically .JPG, line-art is typically .GIF or 8-bit .PNG, and graphics with true transparency should be 24-bit .PNG

Cascading Stylesheets

Stylesheets define how a webpage looks visually. They can help improve usability by ensuring the webpage is readable, legible, and follows brand requirements. A benefit to stylesheets is that they can be used on multiple pages, making the design process more efficient. Stylesheets can also be used to set rules for media queries to accommodate devices of varying size.

Incorporating style into a webpage can be done externally through a stylesheet. All pages of the website that link to the stylesheet can use these styles, making it an efficient way to add styles. Mostly used for one-off style changes, styles can be defined internally as well. You can embed styles using the style tag. You can also style inline by using an attribute and value within an element. If there are JavaScript functions, style can be added through JavaScript template literals. Lastly, the Document Object Model (DOM) can be manipulated in regular JavaScript.