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.
Favicons
Favicons are the small image found at the top of the website tab. Browsers and devices use favicons so users can tell what site they are on just by looking at the browser tab. The little image
is usually a company logo or some small image that clearly represents the website. Outside a browser, the favicon can be seen on a phone or smartwatch, or in a favorites list. When a website is
bookmarked, its favicon is saved as well to help identify the website. Favicons can be in .GIF, .PNG, .ICO, or .SVG file format, but .SVG and .PNG are the most common. If a favicon generator is used,
it will create multiple different files in different sizes to fit the need of any broswer that is opening it. For example, some of the sizes created are 192x192 pixels, 512x512 pixels, 16x16 pixels,
and 32x32 pixels. For reference, a normal computer browser will use the 192x192 pixels. The HTML needed for the favicon is also provided by the favicon generator. The code will look like this
<link rel="icon" type="file type here" sizes="size here" href="file name here"/>
CSS
The main reasons to incorporate stylesheets in websites and apps are to create unique websites and to create a better user experience. With stylesheets, companies are able to select a color scheme that best
defines their company and import company images into the background so that the user is always reminded of where there are. Without the style sheets, every website and app would follow the same default HTML
style and make every single website look essentially the same. The stylesheets allow for different style to be picked, which is what makes each website look different. It also gives the creator the ability to
make style choices that will best represent the needs of their website. As for creating a better user experience, the style sheets allow the creator to make buttons that can be pressed easily and change so the
user knows which button they are about to click on. It also allows for the creator to organize information so that it is slightly inside the main screen so users don't have to look across the screen every time
they want to read the information. Another way that stylesheets improve usability is by organizing pictures. These are just a few ways that usability can be increased by stylesheets.
The 5 ways to incorporate styles are external, embedded, inline, JavaScript template literals, and regular JavaScript by manipulating the Document Object Model. External style sheets will look like this <link rel
= "stylesheet" href = "file name here"/> or @import "file name here" and is found in the global head of the website. This will take the stylesheet file given and apply the style to the whole website. This is the most
effective way to incorporate style because it separates the style information from the HTML information. This makes it easier to edit either the style or HTML on its own. The other methods incorporate the style
through HTML or JavaScript. Embedded will look like this <style> "input style information here" </style>. This is done inside the HTML file and is used only for one-time styling. Another way to style in the HTML
file is with the inline option. Inline styling looks like this <h1 style = "style information here" >. This is done when setting up a tag and again only for one time styling. The last two methods, JavaScript and regular JavaScript, can be done within a
JavaScript file. The JavaScript template literals method looks like this const orangeHeading = style.h1` color: orange; `;. The final method looks like this document.getElementsByTagName('h1').style.color = 'orange';. These methods
are also one time styling. The reason the last 4 methods are best used only for one-time styling is because they can only apply style to one section of the HTML at a time and don't allow for the separation of the styling information.
