In web development, the index is the designated homepage in a http request. When the GET method is received,
this is the first file the server looks for to return to the client. It allows access to the response and request headers. Under the General tab, the Request URL,
Request Method, Status Code and Referrer Policy can be seen. The response header displays the content type as well as the date of last modification.
If the Response tab, to the left of the headers tab, is clicked, the raw data that was sent after the HTTP request can be seen and is
typically a JavaScript, HTML, or CSS file.
Viewing a file from a local computer gives you the directory of the file on the computer hard drive. A local view does not include favicon.ico image.
On a web server, a view contains the IP address of remote access. The request and response headers contain different directories compared to the local file.
The favicon.ico exists on the server, since it is from the OSU servers. That is why it has 200 code. The main.css and main.js files have a status code of 400 because they do not exist.
The web domain my this project is https://web.engr.oregonstate.edu/~wongco/a1-wongco/. The scheme is https. The subdomain is web.engr.
The host domain is oregonstate.edu. The path is ~wongco/a1-wongco/. There is no specified port number, fragments
or query parameters in the web domain.
Frontend Design
The concept of frontend design is about creating an attractive, user-friendly, and responsive interface for websites and web applications.
It combines creative design with technical implementation to provide a seamless and enjoyable user experience.
This includes the user interactive experience, visual design, and the interface of a page.
These concepts are the forefront for determining the usability of a website or an application.
The five "E's" of usability are:
Effective
How well does the site help users accomplish their goal for using the site?
Efficient
Is the site easy to use? We want the user to reach their end goal with the least number of steps.
Easy to navigate
The site should be intuitive on how to navigate around a page, especially for new users.
Error-free
Can the site detect any mishaps from the user and workaround those issues without breaking?
Enjoyable
The site should be engaging to the user. Do they want to come back after the other for E's and the overall experience?
The purpose of page layout tags is to break up the flow of content for a webpage or an app. The < header >
tag is sued for the banner of a site. This could include a name, company, publisher, etc. The < nav > tag is used for navigating the user to
different pages of a website. It can be used multiple times to access a home page or location of an image. The < main > tag is the primary
block that holds the bulk of the content on a webpage. The < article > tag is used to specify a second level header regarding a single topic.
The < aside > tag includes elements related to a specific article. The < figure > tag is used to contain media. The
< blockquote > tag is designed for containing quotations. The < footer > tag will hold legal information, contact information,
and links to critical pages. The < div > tag is a placeholder for dynamic content. It is also used for dividing up other tags.
Anchors can be used to link to internal, external or from page-to-page content within an app/site.
The basic structure of an anchor element is the opening tag with the href attribute, a description of the link, and then the closing tag.
An external anchor is a hyperlink that acts as a digital gateway to external sources beyond the scope of a website. It employs the < a > tag, specifying the href attribute with an absolute path and the ID value of an article, allowing developers to seamlessly incorporate these links into web pages.
An internal anchor enables users to navigate to different sections or parts of the same page without needing to leave the current webpage. Developers achieve this by using the < a > tag and specifying the href attribute with a relative path, seamlessly integrating these links into web pages.
Anchors within the navigation block establish connections between pages, sections, and articles by utilizing relative paths. This enables seamless page-to-page, section-to-section, and article-to-article linking capabilities, fostering efficient navigation throughout the website.
Optimizing Images
There are six major specifications for optimizing images on the web. The first specification is a descriptive file name. Searching for
images should be concise with as few words as possible. This allows access to image files without needing to be too descriptive or wordy. The next
specification is a small file size. Reducing file space allows it to be loaded faster on devices. There are two primary file compression methods:
lossy compression, which sacrifices image quality by discarding selected pixels, and lossless compression, which reduces file
size without any loss in visual quality. The next specification is the exact dimensions. Fitting an image to the exact dimensions on a web page will
allow it to run faster. For example, loading a 8000px wide image on a 600px wide block will cause the image to load slowly. Another specification is having the correct file format. This includes
having photos as .JPG files, line-art images as GIF files, etc. Reduced resolution allows monitors to load more pixels per inch on
the monitor space. This goes along with less resolution having smaller file sizes that can be loaded faster. The last specification is having the proper color mode.
RGB is typically used for PNG, .JPG, .SVG, and .WebP files while indexed is used
for .GIF and sometimes .PNG files.
The most suitable file formats for photographs are .JPG and .WebP. This is because photographs have millions of color and are taken with great detail, which are too big for the web. JPG and .WebP
can compress the photos to small file size and remain rectangular. This allows photos to be loaded quickly with minimal loss in quality. When it comes to line art, the ideal file
formats to use are .PNG, .SVG, or .GIF. .PNG files have true transparency through alpha channels. This allows them to be placed over any type of color without distortion. They also maintain very sharp lines and clarity.
.SVG files are mathematically derived and marked with XML, which allows for 2-D, interactive, or animations. .GIF files have 8-bit transparency and support animations. They also have indexed color mode.
Favicon
Favicons play a crucial role for both browsers and devices by providing a swift means of site identification in the browser's tab area. This visual cue significantly enhances user clarity,
allowing them to quickly associate a particular icon with a specific web page or app they've accessed or bookmarked previously. This not only streamlines navigation but also improves
the overall browsing experience. Currently, the most common file formats for favicons besides .ICO are .SVG and .PNG.
Corey Wong