Index, as it relates to websites and servers, is the home page for a website. It is the file that the servers will look for in the website's root directory when the website's URL is entered. For example, this page is the index.html, the Apache web server will use this file as the defualt home page. If there were other files in the root directory, those would be ignored unless specifically requested. Other severs could use a different file for their defualt home page for ecample Microsoft.Net uses default.html
When inspecting this page, you can see the requested URL and the request method, in this case, GET . The status code is next, indicating whether the request was successful, if some error occurred, or if further action needs to be taken. The status code shown for one would inspect this page is 200 OK, meaning the request was successful. Next up is the remote address of the website, the IP address. After address is the policy. More information can be found in the request header and response header sections, such as content type, server, language, cache control, connection, host, and user agent. If instead one were to inspect this webpage as a file on their computer, one would not see most of what they would see on the webpage, only the URL, request method, policy, and content type.
The favicon.ico file has a status code of 200 because it is in the host directory. Main.css and main.js have status codes of 404 instead of 200 because they are not in the website directory. Error code 404 not found.
The URL of this site is divided into multiple parts: the scheme, subdomain, domain, path to resource, and the item on the page. This website's URL is https://web.engr.oregonstate.edu/~pearceja/a1-pearceja/. The scheme is https, the protocol that the web client has to use in order to request the resource. https is similar to http but encrypts the data being sent to the server and the client, making the connection more secure. The subdomains are web and engr, while the domain is oregonstate.edu. The path to the page is ~pearceja/a1-pearceja.
Frontend Design
Frontend design is a design concept centered on creating a suitable experience for the user. This is done by creating a visual aspect that is consistent with it's color, illustraion, and typography scheme. As well as a navigation system that makes sense and is easy to navigate. Along with the visual aspect Frontend design also consists of the GUI(Graphical user-interface). GUI includes buttons and other types of interactive displays that change if a user interacts with them. Frontend design has a strong focus in usability and style. The users expectations with both style and usability change over time, meaning that it is important to constatnly keep up to date to the various trends in them.
Five Es of Usability
Effective:
The product must be productive at helping the user at achieving their goals and provide accurate results.
Efficient:
Users must be able to get results quickly and with the least amount of steps.
Easy to Navigate:
Traversing the product should be intuitive, users should be able to easily understand how to get where the want to be and remeber how they got there.
Error-free:
Learn the common errors user exerience with the product in order to avoid them.
Enjoyable or Engaging:
Will the user leave the site with a postive experience that will lead to them wanting to come back to the product?
Page layout tags are used to partition content of the page. The typical page inculdee the header,nav,main,section,article,aside and footer tags. The header tag specfies the site name, publisher and slogan. Design of the header is usually consistent throughout the the site to ensure the user knows the are still on it. The nav tag is used to allow the user to travel throughout the page and page to page on the site. The main tag holds the majority of the content on the page. The section tag is used to group content by theme typically with an headline that descibes the content in the section. A section usually contains articles which contain a specific topic realated to the theme of the section, with a headline describing the topic. The aside tag includes related content to the article that is placed on the right or left side of it. The footer tag holds legal information, contact information, links to important pages and a copyright statement.
External Anchors: link to outside websites using a URL
Internal Anchors: use ID tags that link to other parts of a page be it a article or a section
Page to page Anchors: link to other pages through referencing the file the page belongs to.
Optimizing Images
The six major speifications for images on the internet are a descriptive file name, small file size, exact dimensions, correct file format, reduced resolution, color mode. An image needs a descriptive file name to increase search engine optimizatio, this includes information on the contents of the image. An image should have a small file size to allow for faster loading times. This is usually done through the two main types of image compression, lossy and lossless compression. Lossy reduces file size by removing data which leads to pixelation, while lossless compression keeps image quality and removes redundant data. Using exact dimensions ensures that an image will fit on the page and load quickly and correctly. Images in a correct file format help with the speed and efficiency of the website, .PNG for graphics and sometimes line art photos, .JPG for online photos and .GIF for line art images. A reduced resolution allows for better loading times by decreasing the fie size. Color mode choice is important for consistency's sake, RGB for .PNG, .JPG, .SVG, .WebP and Indexed for .GIF and occasionally .PNG.
The common file types for line art are .GIF, .PNG, and .SVG. For photos .JPG and .WebP are typical. .GIF is best for flat colors and simple animations, .PNG is best with images with images with transparency and .SVG is best with logos and graphics, hence why all three are best for line art. .JPG is best for photos because of the multitudes of colors and high details leading to a greater compression rate .WebP is used for similar reasons.
Favicons
Favicons are small, distinctive icons representing websites, visible in browser tabs, bookmarks, and on mobile home screens. These icons are crucial for user experience, providing a quick visual reference for a website, aiding users in navigating multiple open tabs and easily identifying sites in a list of bookmarks. They're particularly helpful in maintaining brand consistency and recognition. Web developers specify favicons in the site's code, and browsers fetch them automatically, displaying them in various contexts to assist user navigation.
