Index as it relates to websites and servers is that when it is in the root directory it is called
the homepage of the web server/application. When a GET request comes in for / it returns the
index.html file.
Not all servers return index.html file, some depending on the server return index.html, index.js or
index.php.
You can see quite a bit of information in the Web Dev/Inspector Network tab, it
says
there are 3 requests.
Clicking on index.html in the headers it shows the request method, the status code, response
headers, request headers. What is different about the file's details is the request URL is from my
computer is
a lot longer
than from the web server. My request URL has some percentage signs in its URL, unlike the web server
URL
which has none.
The favicon.ico file has a status of 200 because the OSU server provides the file automatically,
which is why it had a code status of 200 as it was a successful
request.
Status Code References says that when we get an error of 400-499 it's
because the server program sends back that the request was not valid and the server program could
not
fulfill it. For main.css and main.js we get error code status 404, the requested resource is not
found on the
server, so it failed to get the resource, unlike the successful favicon.ico file.
The URL to my web file is https://web.engr.oregonstate.edu/~duquec/a1-duquec/ . The
scheme is the first part the HTTPS and is followed by a
colon, so the scheme is https://.
In the URL for static files typically the path is the physical location
of a file on the web server
so the path to the resource is /~duquec/a1-duquec/. The
subdomain is appended to
the front of the domain name, so the subdomain is web.engr., with the domain being
oregonstate.edu.
Frontend Design
The concept of frontend design is about making an application, whether web or
mobile, an
engaging and enjoyable experience for the user. The user can be anyone young or old, so you have to
make
it an accessible experience for everyone, including those with disabilities. While thinking of the
design
it has to be interactive but not too complicated. Visually has to look presentable in a computer or
mobile device, and has to think of how to respond when there is a delay in response time.
Effective
This means that the user gets their goals met, whatever they were trying to search/find the
results were found.
Efficient
This means that the user was is able to find what they searched for as quickly as possible with
the least amount of steps.
Easy to navigate
Users who may have never visited the website or app can quickly or intuitively navigate the site
and find what they are looking for.
Error-free
Users should not encounter errors, extensive testing should take place to ensure there are no
common errors and if they run into them,
they are quickly fixed.
Enjoyable
The user should find the experience delightful and frustration free, they should come back
because the four previous E's worked
so well, they want to come back.
The purpose of page layout tags are for splitting up content into their own blocks
of content, but also for developers to categorize
what they are writing into their own appropriate tag. It also helps search robots and screen readers
know what they are reading and in the screen reader's
case let the user know. There are very many tags like the header tag, that has the
site's info such as name and publisher.
There is the nav tag that lets you know that where the links are to other pages.
The main tag that has most of the
that page's content.
External content is very different from internal content and page-to-page as it links to an
outside website or websites, the anchor
tag needs a URL to specify where the link is taking the user.
For internal content, you link to a specific part within the same page. You add an
ID attribute with a unique value to the anchor tag
and you use that value on the part of the page you want to link to by using a hashtag.
For page-to-page anchor requires the name of the file. If the file is in the same folder you
require
the name without needing ./ otherwise
you need to name the directory it is in. If going down a directory you name the
directory use the / and then the name of the file.
While moving up a directory, you use ../ with each .. going up a directory to
reach
where you want, and use / to go down the desired
directory to reach the file you want.
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, color mode. They're a great way to have your
images fit inside the page and load faster
and have users not wait for an image to load, as it is almost instantaneous. It is best for images
to be put in the correct file format, so it
can look as good as possible. The file name to be named descriptively as possible for search engine
optimization, to find and use the image when
a user is searching for related images, and for screen readers to help those with understand what the
image is.
For photography the best formats are JPG and WebP, while the best
file formats for line art are
PNG, SVG, and GIF. SVG and GIF are best for
animated images, SVG looks better and is for 2D
interactive images, while GIF is very commonly used for short animated photo/video sequences. PNG is
better for biomorphic shapes but can also do
screenshots, but the photo may become pixelated. That is why it is better to use JPG or WebP for
photography, as the image quality won't be reduced
unless you have high compression.
Favicons
Favicons can be saved in .GIF, .PNG, .ICO, and .SVG file formats for the browser
and devices to read but as the module says
complexity and requirements for Favicons can change. On the web use a generator to make your files
for several browsers and devices but depending
on the browser version or device version it may not work. The browser or device then reads the files
and displays an image on the tab to identify
the site it is in. A company like Microsoft will use their logo to let the user know they are on the
Microsoft website by looking at the tab.
