The index in relation to websites is known as the homepage. The file index.html returns the
homepage from the root directory whenever a GET request is received for the symbol "/".
The index server is where the contents are stored in a directory and searches can be performed to
locate contents within the server.
When inspecting the index page, under the Network tab output screen, you can see the request URL,
request method, status code, content-type, etc. The URL shows "https://web.engr.oregonstate.edu/~parkson/a1-parkson/".
The request method shows "GET" which is a request method that retrieves data. The status code shows "200 OK", which shows
the connection was successful. The content-type shows "text/html", which shows there is text used for the site.
The first difference seen between viewing the file detail from a web server versus the local computer
is the request URL. On the web server, the request URL shows "https://web.engr.oregonstate.edu/~parkson/a1-parkson/"
whereas on the local computer, the request URL shows "file:///C:/Users/Colin/Documents/CS290/Module%201/a1-parkson/index.html".
The second difference that can be seen is that favicon.ico is present on the web server but isn't present
on the local computer. A third difference is that the web server shows a remote address, whereas there
is none on the local computer. Also, there are significantly more response headers on the web server such as accept-ranges, connection,
content-length, content-encoding, date, and server. None of these are present on the local computer. The local
computer only shows content-type and last-modified under response headers.
The main.css and main.js files show an error code of "404 Not Found", which indicates that these two
resources can't be found on the server. This is because there is no CSS or JavaScript content present
on the current index page. CSS or Cascading Style Sheets is a language that allows developers to add
styling to their webpages, such as colors and fonts. JavaScript is a different language that allows
developers to implement separate programs that create interactivity within the web browser.
The favicon.ico file adds an icon that is displayed next to the title page in the browser tab.
This file shows a 200 status code or successful request because the icon is currently present on the browser web page.
This is because the index file was transferred through FTP to a web server directory that has the icon coded in.
The URL for the web file shows as follows: "https://web.engr.oregonstate.edu/~parkson/a1-parkson/".
The scheme or protocol pertaining to the URL is HTTPS. HTTPS is an encrypted standard protocol where a browser can send
or receive messages to or from a web server. The subdomain is "web.engr". Subdomains function as separate
sections which additional content is added to to create its own hierarchy. The host domain is "oregonstate".
This is the main domain of the webpage. The resources are "~parkson/a1-parkson" which are paths to the
resource on the server.
Frontend Design
Frontend design is the process of creating a user interface that is both visually
appealing and intuitive in use for the user. To make a webpage visually appealing,
there are several visual designs that are important to consider such as a consistent
color scheme, font scheme, matching illustrations and a navigation system that the
user has no problem understanding. Frontend design also focuses on improving the user's
interaction on a webpage, thus heightening the overall experience. There are 5 key
usability factors called the Five "E"s that are addressed when
evaluating the user's overall experience.
Effective
How well the product is made which helps the user meet their goal accurately.
Efficient
How fast the user is able to meet their goal by eliminating unnecessary steps.
Easy to navigate
How intuitive the product is where users aren't questioning where to click to
locate their goal.
Error free
Eliminating any roadblocks that prevent the user from getting to their goal.
Enjoyable
How engaging the product is and if the user is inclined to use it again.
Page layout tags are an important part of designing a webpage as they section off content and tell the
machine where to place certain components. There are 10 page layout tags. The
first is the header element. This element usually
includes the name, publisher and marketing slogan of the application or website in order
to ensure the user that they are on the same site. The second element is the nav
element. This element takes the user from the current page to other
pages such as main menu, search, location, and contact links. The third element
is the main element. This element is the primary block that
holds the content of the webpage such as stories, and images in a gallery. The fourth element is
the section element. This element is used to group content
that is related but unable to stand alone. The sections will usually include a headline
followed by a description of the section and a few articles that contain similar content.
The fifth element is the article element. This element
is seen in the section element and is used to group similar content together. The sixth
element is the aside element. This element includes content
related to an article and is usually seen on the left or right of the article. This element is
usually used to create sidebars for navigation. The seventh element is the figure element.
This element is used similarly to the aside element but usually contains
media files. The eighth element is the blockquote element.
This element is usually used when there are quotations that are too long to put in a paragraph. They
have a different visual style from paragraphs. The ninth element is the footer element
which is used to hold legal information such as the copyright statement,
contact information and links to important pages. The final element is the div element.
This element is used as a placeholder for dynamic content.
An external anchor links to a URL which navigates the user outside the current website.
This is done by hyperlinking the external URL in the anchor.
An internal anchor adds hyperlinks of different pages within the same website so that the user
can navigate freely from one page to the next. A few examples of different pages can include menu, location and a contact us page.
A page-to-page anchor links elements within the same page, navigating the user from one
text item to another. This is done by using IDs and anchoring specific text words so that when these
words are clicked, they jump to the specified ID'd section.
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
improves the search engine optimization or SEO which allows other users to find your image and other
related images. The file size is reduced in order to decrease load time for the user. Dimensions
of an image are also cropped and reduced to fit the dimensions of your web page and decrease load
time. Images are saved in the correct file format for the best color and quality when they are
compressed. Image resolution is also reduced to decrease load time. Color modes are based on the
file type of the image such that RGB is for .PNG, .JPG, .SVG, and .WEBP, and .GIF uses Indexed.
The most appropriate format for photos is .JPG and WebP because these formats reduce the file size
of large detailed, high quality and colorful images in order to reduce load time for the user.
Line art is formatted with .GIF, .PNG, and .SVG because line art is typically much simpler with
less colors than photos.
Favicons
Favicons also known as favorite icons or touch icons, are used to quickly
identify a site. They are located in the browser tab, on a smart watch, cellphone, and are used
as company logos or apps. Favicons are symbols that get modified and saved in multiple file
formats in order to be compatible with different devices and browsers.
Cascading Stylesheets
Incorporating stylesheets in websites and apps are crucial to website development as they allow for
consistency, efficiency, flexibility, and accessibility. The stylesheet acts as a global styling guide
for your website, allowing for quick changes and faster website loading as the stylesheet is already
cached in the browser when viewing other links within your website. It is also a great way to ensure
you are adhering to brand requirements. Stylesheets also improve usability, readability, and
legibility.
There are five ways to incorporate styles - external, embedded,
inline, JavaScript and regular JavaScript.
External CSS is done by linking a stylesheet file to a global head area of the website. This method
is preferable as it is efficient in designing an app or website. The second way is embedding the style
by using the style tag within the HTML code. The third way is placing the style inline with an element.
The fourth way is using JavaScript template liberals, which defines a variable with the style you want
and changes the element to that style. The fifth way is using regular JavaScript, which manipulates the
Document Object Model. This coding tells the HTML document to find the tag for the
specified element and update the style that was written.
Sondra Park