Oliver Mendez Lopez

Web Servers

The majority of web servers are modeled so that the / (slash) is shown in the file. /index.html. Index.html is seen in the root directory, where it is also called the designated homepage. Web applications are also programmed to return the file when a FET request is received with a / (slash). It may also come in different names, such as default.html, index.js, and index.php. You will also find the HTTP request and responses inside index.html when you open web development options.

In the Web Dev/Inspector Network tab, new files appear: executor.js, favicon.ico, and a1-mendezlo/. Contrarily, index.html is absent. On a local computer, there's no HTTP request for index.html, but on a web server, it's present, marked by the "GET" method. Additionally, details like status and both header request and header response data are evident when observing from the web server, setting it apart from the local view.

Main.css and main.js both have a status code of 404, and their reason phrase would be "Not Found". This would tell us that neither of these files are found or exist on the server. Favicon.ico with a 200 status means that the server successfully located the file.

The scheme would be found at the beginning of all URLs and would be "HTTPS." The subdomain would be found after and would be web. The host domain would be engr.oregonstate.edu; for many, this would be ".com," though due to it being an educational institution, It would have ".edu". The resources would be "/~mendezlo/a1-mendezlo/", which would send a user to a specified space inside the website.

Frontend Design

Front-end design is about creating the best experience for your users. When making your visual designs, as well as an enjoyable and interactive space for your user. This would include the graphical user interface (GUI). Frontend is very well known for its visual designs, such as making sure your application has a color scheme, font and typography, photos, icons, and illustration schemes. As well as making sure that the user can navigate, understand where to find something quickly, and have an enjoyable experience while doing so.

Effective

When making an application, you want to make sure that it is "effective" at reaching the goals of the users. Making sure that they receive accurate results when traversing your application. An effective application makes sure that everything is working and that the user can complete their goal without facing any obstacles.

Efficient

When making sure that when a user is using your application, they will be able to complete their "goal" with the least amount of steps, make sure that the user will not face any unneeded steps or steps that may waste the user's "time." This also affects how quickly your users can get the results that they need.

Easy to navigate

When a user enters your application, you want to make sure that they can "navigate" through it. When a user first enters the application, you want them to be able to understand where they will be able to reach their goal or find the needed information. Navigating through, you want to make sure it is simple for them to remember for when they next visit.

Error-free

When creating your application, you want to make sure that you "avoid" any possible issues that could come from your user trying to use it. Going through and seeing possible problems that your users may face is important to make sure that they are not pushed away. When you want to make sure that the user will have the issue resolved, things such as error messages and instructions can help deter this.

Enjoyable

When a user enters your application, you want to make sure that the user has a positive experience. Depending on the application's theme, your application should be for your user's intended audience and should gather information that you want them to find. The application should also be engaging with the user to make them want to come back.

There are 10-page layout tags. The "header" tag is normally used as the banner of the application and could contain the name, publisher and slogan. It can be found on all pages. The "nav" tag can be used multiple times and is normally used to send users from the current page to another. The "main" tag normally holds the content of the application, such as tutorials or galleries. The "section" tag is used to group similar content together, and inside of it is normally the "h1", which is the first child. The "aside" tag is used for including content related to the article and is normally in a different style. The "figure" tag is similarly used as the "aside" tag, but instead is normally media, such as videos or images. The "blockquote" tag is for extended quotations that would be too long for a paragraph. The "footer" tag is where you will find legal information about the application, most commonly the owner's copyright statement. The "div" tag is used for dynamic content, it can also be used for dividing content when no other element makes sense to use.

1. Anchors link to external contents through links to a URL, which is found outside the website. After clicking on it, they will be redirected to another website. This can help the user in many ways, such as if they need to find the source or additional information.
2. The way anchors link internally is by using IDs. The value is used with hashtags to reference the anchor. The link would then send you to another part of the same application that the user is in.
3. The way you would use an anchor for page-to-page is by using the "nav" tag and setting the "a" tag. This creates a hyperlink between the pages. By specifying the desired URL. This will help the user navigate from page to page.

Optimizing images

The six major specifications for images on the web are a descriptive file name, a small file size, exact dimensions, the correct file format, reduced resolutions and color mode. All of these are important because they help with improving search engine optimization (SEO), reduce files for the fastest load time, fit your images into your web page, and make sure your file format is easier to identify if you put it in the correct format.

Photos, the best file formats for them are JPG and WebP. Because JPGs are mainly used for photography, they compress smaller but still remain rectangular. WebP would also follow the same reasoning as JPG, even if the quality decreases, they will still be good. In line art, the best file formats for them are PNG, SVG and GIF. PNGs are used because they are known to have true transparency and can be placed without any distortions of the colors. SVGs are mathematically derived and marked with XML, which helps with two-dimensionality and animation. They also hold a lot of text and have a crisp look to them. GIFs are popular because they have 8-bit transparency and can hold animations (which is what they are most popular for).