Web Servers
In relation to websites and servers, "index" refers to the homepage
of a website. This means that the index file is the one that the server searches
for when a URL is input into a browser without specifying a specific page on that
site. We can attribute this to the fact that most webpages have it set up so that
the request for the page '/' is set up to be redirected to the "index" file.
This file is usually in the form of an index.html file, but it can also be that the
server looks for an index.js or index.php file.
In a browsers network tab, a person is able to see the page's status, method, IP, policy, language,
cache instructions, and browser version. When a file's details are viewed from the web server, the Network tab
allows you to see how long it took the server to respond to the request for the file. In the local file, this takes
a much shorter period of time since the file is already locally available, while getting it from the web server takes
a bit longer. In the web server request, there are also two files, executor.js and favicon.ico, which are not present
in the local Network tab. For both, the index page showed a GET method which was in response to a request for the html page by the browser.
The favicon.ico file has a status of 200 since the GET request for the icon went through and is now available to view on
the local computer. On the other hand, the files main.js and main.css have an error code of 404 since the files were not
found. This does not seem to be in error, as no files with those names were created nor uploaded to the remote server.
The URL that is used to access my web file is https://web.engr.oregonstate.edu/~galvanmi/a1-galvanmi/. In this URL, the
scheme is "https://". We also have two subdomains: one subdomain is "web." and another is "engr." The host domain is
"oregonstate." with the extension "edu". After that we have the path to the page, which in this instance is "~galvanmi/a1-galvanmi/".
Frontend Design
Frontend Design incorporates the visual design of the product and how the user interface is set up. The overall goal of
frontend design is to build a product that is easy to use, appealing to the user, and makes the user keep coming back
to use the services offered by the product. In the case of developing a webpage or app, this includes making sure that the
user is capable of navigating through the product, meeting their goal and doing so with ease and in a timely manner. In order
to get to this stage, the team in charge of this design goes through cycles of user-testing and using the feedback from these tests
to see what the frontend team can improve on in their design.
The Five E's of Usability
- Effective
- Allows the user to meet their goals with great accuracy
- Efficient
- Allows the user to gets results quickly and with few steps
- Easy to Navigate
- Allows the user to immediately understand how to interact with product
- Error-free
- Ensures that there are few accessibility and availability issues
- Enjoyable/Engaging
- Fits the unique needs of the user and give a good overall experience
The Purpose of Each of the Page Layout Tags
Page layout tags are used to break up and section off the content. The header element usually
contains the name, publisher, and marketing slogan, and is used to indicate the banner for an app or site.
The nav element takes users from one page to another. The main element indicates the primary block that holds content.
The section element is used to group together content that is all related but is not able to stand by itself. The
article element is often used within a section element and indicates a more narrowed down or specific topic.
The aside element includes related content to one side of an article, typically in a different style. The figure and figcaption
elements put media content related to the article to one side of it. The blockquote element is used for longer quotes and is typically styled
differently from the paragraphs, making it is easy to distinguish.
How anchors link
- Link to external content through href attribute using an absolute path
- Link to internal content through href attribute using IDs
- Link from page-to-page through href attribute using a relative path
Optimizing Images
The six major specifications of images for the web are that they have a descriptive file name,
a small file size, exact dimensions, a correct file format, a reduced resolution, and a color mode.
These specifications are used to ensure that a browser displays an image in its correct size and that
it loads it in the fastest possible speed given the device the browser is on.
The file format most appropriate for photos is JPG as it allows the files to be resized and compressed without distortion.
This is useful when trying to save space on a server and assures a faster loading speed for images in a browser.
The file format most appropriate for line art is PNG as they can be placed over different colors without distortion and the
background shows through blank and transparent areas.
Favicons
Browsers and devices use favicons to quickly identify a site or app using an icon. This icon is usually a symbol that is formatted
in multiple different ways so that it can be utilized on different types of devices and browsers. In terms of browsers, favicons are
frequently located as a symbol on a tab, and as applications, the symbol is what makes up the image of the application.
