The index file is the designated home page for a website on the web server. This is
the file that the web application returns whenever a GET request is received for the URL. Since the Apache
server is being used for this site, the file will be designated as index.html by default. Other
servers may use default.html, index.js, or index.php. Servers will generally locate and use HTML
files before other file types.
Developer tools show information about the HTTP request and the HTTP response.
The request URL, request method, status code, and IP address for the request URL are shown here. The request
headers give information to the server that the server uses to form its response. When inspecting the
file details from the web server, the full request and response headers are shown. Whereas when using
the local computer, a limited amount of information is shown. While the local computer shows a request
URL that has a file scheme, the web server file has an HTTP scheme.
The favicon.ico file is used for the display of the favicon, or favorite icon. This is the
icon displayed on the browser tab. The OSU server automatically provided this. When this file is
inspected with the developer tools, the status code 200 is shown. This code means that the request
was successful. The main.css and the main.js files were created by the boilerplate template that was
used. They have not been modified yet, so they remain empty files. This is why they return a 404 or
not found code.
The URL for this website is https://web.eng.oregonstate.edu/~taftji/a1-taftji/.
The scheme is the protocol for how the client and server exchange information. For this website,
it is HTTPS. Most websites use HTTPS, which is the encrypted version of HTTP. Other schemes include FTP, FTPS, SMS,
and FILE. Orgeonstate.edu is the host domain for this site. The host domain is the name of the
server hosting the website. This will map to the server's IP address. This site also has the subdomain
web.engr. Subdomains are subsections of a server. Within the URL, they will be appended before the
domain. The path to the resource ~taftji/a1-taftji/. It identifies the resources on the server, or
which files will be accessed.
Frontend Design
Frontend design creates the user experience. This includes the visual design of
the page. Parts of the visual design include the color scheme, the font and typography scheme, the photography,
icon, and illustration scheme, as well as the navigation system. The frontend experience also includes
the graphical user-interface and the interactive experience. An important aspect of frontend design is
user usability. Usability refers to the quality of the user's experience interacting with the
product. We describe the factors that contribute to usability as the five E's.
Effective
How effective a product is will be determined by how well and accurately a user meets their
objective.
Efficient
An efficient product will help the user complete tasks using the fewest steps possible. In
other words, the user will be able to reach their objective quickly.
Easy to navigate
Even a user who has never used the product should be able to understand how to complete their
objective by clicking or searching. They should also be able to easily remember how to navigate through the
product, when they need to complete their task again.
Error-free
To keep the product accessible and available, it should be free of errors. Designers should learn
how users create errors and find a solution to those errors.
Enjoyable or Engaging
This refers to the user's overall experience with the product. The content and design needs to
be catered to the user's so that they return.
Block-level elements split pages into different components, or blocks. Page-layout tags
help machines know which area of the page has these components. Some of these tags include header, nav, main,
section, article, and footer. A header is the banner for a site. Nav blocks will navigate the user to other pages.
The primary block of content is represented by the main tag. Content with similar themes is grouped using the section
tag. While article is used for a single specific topic. Footers are located below the tag. Usually they will contain
legal information, contact information and links to critical pages.
Using Anchors
The anchor tag <a> will display a description of the content that the link will navigate to. The
attribute HREF is assigned to the URL of the content that is being linked.
An anchor can be used to link external content. It is best to use an absolute path to
navigate users to content outside the site. An absolute path uses the complete URL of the outside resource, including
the scheme, subdomains, domain, directory/folder, and file names.
An anchor can navigate to other content within the page by using an ID attribute. When an ID
attribute is used for a tag, the IDs value and a hashtag are used to define the reference of the anchor. It is best
to use a relative path or URL when linking internal content. A relative URL refers to a location that
is related to the file we are using for the URL. If the file that is being linked is in the same directory, then the
file name can simply be used as the URL.
Navigation anchors can either be used for global or local navigation. A global anchor
will link to other pages. A local anchor will link to content within the page. These types of anchors are often
decorative, and button-like. Since users are expecting this format, this will make the site more usable for the
user.
Optimizing Images
Image optimization increases usability. Optimized images load quickly, save storage space, and are easy
for the user to find and view. Optimized images have a descriptive file name, a small file size, exact dimensions, the
correct file format, reduced resolution, and a color mode. Descriptive file names make it easier for browsers to find
and improve search engine results. Compressing image files and reducing the dimensions of an image
decreases the file size as well as load times.
The most appropriate file format for line art use lossless compression, such as .GIF,
PNG, and .SVG. It is appropriate to use a file format with lossy compression for photographs, such as .JPG, and .WebP
are most appropriate. Use lossless compression formats for images that have more detail and where loss of image quality
is noticeable. Utilize lossy compression formats when a greater reduction in file size is needed and loss of quality is
not as obvious.
Favicons
A favicon is a symbol for a site or app. It is in the browser tab, to easily identify the
site. Browsers use favicons to identify and/or open sites or apps. When saving the site or app to a bookmark or favorite
list, browsers save the image and use it as an anchor to that list. Favicons also save apps to device screens and search
engine results.
Cascading Stylesheets
Cascading stylesheets(CSS) allow designers to override the pre-set HTML element styles.
Stylesheets control how the contentof a site looks and behaves. The use of stylesheets improves a site's usability
because they ensure that the output is readable, and legible. Designers use style sheets to add dimension to sites by
manipulating color, imagery, spacing, changing fonts, and placement. With all of these options, designers can ensure
that the site meets all brand standard needs.
The most efficient and preferred method to incorporate a style is to create one or more external
files or global stylesheet that links to the HTML file. These files utilize the .CSS extension. Style can also be
embedded by using the <style> tag. Attributes and values can be added to an element inline
to create style. Using JavaScript, JavaScript template literals can be used, or the document object
model(DOM) can be manipulated to add style.
