Web Servers
Index is the designated homepage on the server. Therefore, if you don't specify a specific resource, then the index is the file that
will appear on the screen. For example, with the following URL, https://example.com/c.html, the server will load the c file. On the other
hand, with this URL, https://example.com, the server will load the index file. For the Apache server, OSU's server, this holds true;
however, other servers may use default.html instead of index.html. In this case, default.html is the designated homepage instead of
index.html. There are other servers as well that will look for index.js or index.php as the homepage.
When first opening the network tab of the inspector tool on the local file, there are three names to look at: index.html, main.css, and
main.js. The index file has an OK status, whereas the other two don't have any status linked to them. Comparing this to the web server,
there are five names to look at: a1-schofier/, main.css, main.js, executor.js, and favicon.ico. For the status, a1-schofier/, executor.js,
and favicon.ico all have OK status. Main.css and main.js now have a status of NOT FOUND. Another difference that is noticed between the two,
is that there is much more information given for the response headers web server version. For the local file, there is only content type
and last modified, whereas the network version has information such as server, accept-ranges, connection, content-encoding and much more.
For request headers, the information given between the two files is very different. The web server gives info such as accept, cache control,
connection, and others. For the file version, there is only Sec-Ch-Ua information.
The main.css and the main.js files do not have a status 200 because they don't exist yet. The only file that is being used to create this
webpage is an HTML file, not Cascading Style Sheets or a JavaScript file. The status code for the main.css and main.js files are 404 NOT
FOUND. If more information or different formatting was required for this file, then the main.css and main.js files could be written and
used. The favicon.ico file seems to be something linked through the server, therefore the file exists on the server and can be found. What
the status of the files essentials comes down to is what the server can find. The server has access to the favicon file, but the main files
were not created and aren't stored anywhere on the server.
The scheme for this URL is https://, which is a secure hypertext transfer protocol. The host domain is oregonstate.edu, which maps the
IP address to the server machine that holds the website information. The subdomain is web.engr. Finally, the resource is
/~schofier/a1-schofier/.
Frontend Design
Frontend design is about the experience for the user. This includes the color scheme, font, navigation scheme, and the interactive
experience. Some aspects to think about with the user experience is the response time, which is how long it takes for actions on the
website to load. Another important aspect, is the content depth level, which is how many levels a user has to traverse to get to the
desired content. The next aspect to consider, is the input devices, which is how the user inputs information into the website whether
that be a click, or moving the mouse, or using a keyboard to enter a character.
- Effective
- Helps the user to meet their goals and get accurate results
- Efficient
- The user is able to perform tasks with minimal steps and get the results quickly
- Easy to navigate
- Will the user be able to immediately understand how to locate and complete their goals and repeat their steps in future site
visits
- Error-free
- Will the user be able to complete their goals without any errors
- Enjoyable/Engaging
- The overall experience of using the website makes users want to return to the site for future needs
The purpose of page layout tags is to break up the flow of the content. These provide visual cues, such as, adding a new line both
before and after the element; however, these visual cues do very little on their own. Outside visual cues, the page layout tags help
the machine to understand which areas of the page include which components. For example, it provides information that tells the machine
what is a header and what is an article and what sections go together. This helps to create a more cohesive layout that can be better
provide information at first glance. This is done with sizing, bolding, page breaks, and other visual cues. The purpose of the header tag is to make sure the user knows they are on the same
site when they switch between pages. The purpose of nav tag was to get the user from one page to another. The purpose of the main tag is to hold all the
content. The purpose of the section tag is to be able to group the content by theme. The purpose of the article tag is to section out specific topics within a theme. The articles can be
given ID selectors to style each article individually. Finally, the purpose of the footer tag is to have the legal information, contact information and links to important
pages at the end of the website. Usually, a copy write symbol is used. The purpose of all these tags are to provide the machine with information about which area within the website contains
which components, which relates to the sizing and grouping of the content.
- External Anchors takes the user to a link outside the current website. This is done with an absolute path.
- Internal Anchors takes the user from one text item within the current page to another text item within the same
page. Typically, ID values are given to allow to jump from one section or article to another.
- Page-to-Page Anchors take the user from one page in the current website to another page in the current website. This is typically done in a nav block and uses relative
paths.
Optimizing Images
The 6 major specifications of images for the web are descriptive file name, small file size, exact dimensions, correct file format, reduced resolution, and color mode.
A descriptive file name is important because this improves search engine optimization (SEO). This will also help images be found by related searches because
search engine bots are able to categorize the images. Small file size is important to have a faster load time. Exact dimensions are important because having the correct size picture
for the correct space on the webpage will help to reduce load time. The correct file format is important because the correct image type will allow for the image to have better quality.
Reduced resolution is important because monitors render between 72 or 300+ pixels per inch. If the resolution is within the correct range, then the picture will come out better. Finally,
color mode is important because if the correct color mode is picked, the colors will come out as intended.
For line art and photos, the most appropriate file formats are SVG, GIF, PNG, JPG, and WebP.
SVG is best used for images for text because it creates the most crisp text. GIF is best when aliasing is a problem because a GIF uses anti-alias to turn the edges to one background
matte color. PNG is best with a variety of colors because there is less distortion. JPG file is best for photographs because they compress to small sizes, while keeping the rectangular
shape. WebP is best for photographic images as well and compress down small and keeps their rectangular shape like the JPG. The difference is that transparent backgrounds are possible.