Website Development: Serving Technologies, Hosting, and UX, Lecture notes of Computer science

Download Website Development: Serving Technologies, Hosting, and UX and more Lecture notes Computer science in PDF only on Docsity!

WEBSITE DESIGN AND

DEVELOPMENT

By: Ibrahim Zitouni

[DATE]

[COMPANY NAME]

[Company address]

Contents

• Introduction.................................................................................................................................................
• The purpose of DNS Servers........................................................................................................................ - How DNS works................................................................................................................................... - The difference between the servers:................................................................................................... - How domain are managed and organized...........................................................................................
• systems and web server software with regards to designing, publishing and accessing a website............. Explaining the purpose and relationships between communication protocols, server hardware, operating - Communication protocol.................................................................................................................... - Server hardware.................................................................................................................................. - Operating systems............................................................................................................................... - Web server software............................................................................................................................
• explaining how these relate to presentation and application layers........................................................... Discussing the capabilities and relationships between front-end and back-end website technologies and - Front-End............................................................................................................................................. - Back-End.............................................................................................................................................. - Conclusion...........................................................................................................................................
• Front-end and Back-end relate to presentation and application layers.......................................................
• design flexibility, performance, functionality, User Experience (UX) and User Interface (UI).................... Discussing the differences between online website creation tools and custom built sites with regards to
• wireframes and a full set of client and user requirements........................................................................ Creating a design document for a branded, multipage website supported with medium fidelity
• multipage website supported with realistic content................................................................................. Using the design document with appropriate principles, standards and guidelines to produce a branded, - Creation of the Website.....................................................................................................................
• performance of my website....................................................................................................................... Creating a suitable Test Plan identifying key performance area and use it to review the functionality and
  • Test plan................................................................................................................................................
• References.................................................................................................................................................

The user's URL should travel through several servers in a normal DNS query prior to actually acquiring an IP address. The 4 servers that work together to supply the client with the appropriate IP address are: DNS Recursor: By contacting the DNS recursor, the DNS client queries the DNS resolver. An appropriate IP address is then determined by using a different DNS server. Resolver responds to the request as if it were a client after retrieving it from client. Domain names are resolved by four kinds of DNS servers: root servers, top-level domain servers, and authoritative servers Root nameservers : DNS root zones are managed by root name servers across the internet. The servers are responsible for responding to root zone request queries. Name servers corresponding to a specific TLD are used to reply to inquiries. TLD nameservers: Well within TLD name, a TLD nameserver maintains the IP address of the second-level domain. The query is then passed to the domain's nameserver, which releases the website's IP address.

Authoritative nameservers : Your DNS query is answered correctly by an authoritative nameserver.

Nameservers that handle authoritative communications are master servers, sometimes referred to as primary nameservers, and slave servers, sometimes referred to as secondary nameservers. Unlike the slave server, which is a carbon replica of the master server, the zone records are maintained on the master server. In case of a failure of the master server, it serves as a backup.

The difference between the servers:

Authoritative nameservers:

In the phone book comparison, consider the IP address as the phone number and the URL of the website as the name of the person. Authentifying DNS servers copy the "phone book" linking these IP addresses to their domain names. When DNS nameserver queries are made recursively, they reply with information about specific websites. The responses include the IP addresses of the domains whose data was retrieved. The authoritative domain name servers are in charge of specific geographic areas like a country, a firm, or a neighborhood. An authoritative DNS server fulfills two purposes, regardless of the area served. The server first saves a list of domain names together with their IP addresses. Recursive nameservers: Whenever a user types a URL into their web browser, recursive DNS receives it. Recursive DNS servers try to find out if the URL's IP address already exists in their cache memory after this. If the IP address is already known to the browser, the recursive DNS server will give it to it. Once this has been accomplished, the URL can be used to access the website.

How domain are managed and organized

In specialty databases, domain names are grouped. These databases can be found in the global domain registrar system. The DNS system converts IP addresses into human-readable hostnames (Domain Name

System). In the domain names, second- and top-level domains are used. The domain's human-readable hostname is, in fact, the second-level domain. The three types of top-level domains are generic top-level domains (gTLDs), country code top-level domains (ccTLDs), and new top-level domains (nTLDs). The Internet Corporation for Assigned Names and Numbers, or ICANN, is the organization in charge of registering domain names. As a result, ICANN is in charge of managing these names. It is in charge of assigning IP addresses. Explaining the purpose and relationships between communication protocols, server hardware, operating systems and web server software with regards to designing, publishing and accessing a website.

Communication protocol

Communications protocols, which are a set of laws comprising algorithms for interacting between digital components, include data representation, signaling, verification, and data error detection. Through communications protocols, electronic devices (and other devices) are able to receive and transmit data. The protocol presents numerous benefits when used by computer networks, such as streamlined operations, simplified application integration, and user-friendly interfaces. Internet protocol SMTP (Simple Mail Transfer Protocol), HTTP (HyperText Transfer Protocol), TCP (Transmission Control Protocol), IP (Internet Protocol), and FTP (File Transfer Protocol) transport data over the Internet. Other protocols include POP3 (Post Office Protocol), MIME (Multipurpose Internet Mail Extension), and WAP (Wireless Application Protocol). Purpose of communication protocol These protocols are essential for computer systems to send and receive messages, as well as for telephony. The protocols specify semantics, synchronization, language, and communication rules. HTTP, FTP, UDP, SMTP, POP3, and other protocols are examples.  HTTP (Hypertext Transfer Protocol) : an application layer protocol for transmitting multimedia documents like HTML. This protocol is intended for use by web browsers and web servers to communicate.  File transfer protocol (FTP): This is a widely used internet protocol for exchanging files between computers using a TCP/IP connection. The most common file transfer protocol is based on a two-way communication channel between the server and the client. The main goals of FTP are

The server provides services to clients using a dedicated server operating system (computer network operating system), which is powered by a scalable CPU and large-capacity RAM and runs administrative software to handle access control and resources in it. The server's job is to deliver services to various users on a network, each with their own set of requirements. The major goal is to share data, which is defined as continuous activity over a long period of time and the completion of tasks, in order to keep our job running smoothly and boost productivity.

How server hardware works

Servers execute memory tests periodically before installing and operating remote management services. The hard drive controller then continues to boot the disks rather than doing so all at once. The purpose of a gradual start is to prevent overwhelming the power supply. They then move on to the RAID system, where the backup device must be tested to ensure it is working properly. This process can take a long time when compared to a machine that only takes a few minutes to boot. It's possible that users won't need to reboot for months or even years.

Operating systems

The operating system is the main piece of software that controls the computer's hardware and software. Once installed, the starter program will manage all other application programs on the machine. The operating system, sometimes known as the "OS," interacts with the hardware of the computer and provides services to the programs. The operating system acts as a bridge between the user and the machine's hardware, allowing users to quickly create and run programs. Many components and functions are included in the OS. There are three major elements.  Kernel: This is where all computer hardware components get their foundational level control.  User Interface: This element enables users to engage with the system via graphical icons, the desktops, or a command line.  The application programming interface (API): an element that enables programmers to construct modular code. Android, iOS, Mac OS X, Microsoft Windows, and Linux are all instances of operating systems.

Purpose

An operating system is the software that keeps everything on a device together. The operating system interacts with the device's hardware. It increases the usability of the computer system, allowing it to be used more efficiently. The operating system connects hardware and users, making it easier to access and utilise other resources. A user-friendly interface should allow people to use computers and manage computer resources. Tracks which applications and users are using which resources, assigns resource requests, resolves conflicting demands from multiple programs and users, and protects users from hardware resource details.

How operating systems work

As well as organizing hardware and software, an operating system handles input and output devices, allowing the device to function in a flexible manner. Device drivers are written by hardware manufacturers to interface operating systems with their devices. Applications delegate tasks to operating systems, such as printing something. A printer driver interprets commands from the operating system and sends the appropriate signals to the printer. There is no concern about the type or operation of your printer by the printing program. Operating systems handle these details.

Web server software

A web server is a server with advanced functionalities that is used to store data for a portion of an internet-connected computer network. This server is required for any internet service to function. The web server might be either hardware or software, or both. On the hardware side, the web server is the computer that stores and transmits the website's component files (e.g., HTML, pictures, CSS, and javascript files) to the end-user. It has an Internet connection and can exchange physical data with other web-connected gadgets. Web servers are composed of various components that control how stored content is accessed by web users. The HTTP server is the simplest of these components. Web servers, also known as HTTP servers, decode URLs (web addresses) and HTTP requests (the protocol used by your browser to view web pages). A file needs to be hosted on a server and requested through HTTP to be loaded into a browser on its most basic level. The HTTP server responds to an HTTP request when it receives a request from the correct web server address. By inputting domain names, it hosts websites and delivers their content to end users.

Purpose

A web server can host one or more websites, and it handles incoming requests and sends responses to the user's browser using the HTTP or HTTPs protocols. It processes data and sends information to clients via PCs linked to the Internet using HTTP, a standard for transmitting files to Web browsers, and other protocols. The Web Server can send Web pages to clients across the Internet (or Intranet) using HTTP, as well as other protocols. HTTP is a protocol for sending files to Web browsers.

How web server works

Every Web Server has an IP address and, in some cases, a Domain Name. By installing a Server Software software package on a computer or server and connecting to the Internet, any computer or server can

position. Developers of specific front-end languages, like "JavaScript developers," work with front-end languages.

Back-End

The site's back-end, often known as the "server-side," is where it works, updates, and changes. This contains databases and servers that are not accessible through a browser. Programmers and developers are terms used to describe people who work on the backend. Back-end developers' key concerns include security, structure, and content administration. They are usually familiar with and capable of using HTML and CSS, but it is not their major focus. Back-end developers, or at the very least back-end development, are required for a dynamic site. A dynamic website is one that is constantly changing and updated. The majority of websites are dynamic rather than static. Dynamic sites include Facebook, Google Maps, and this blog. Because their content is continually changing and updated, blogs are dynamic sites. A database is required for a dynamic site to function effectively. The database stores all information, such as user profiles, uploaded photographs, and blog articles. Because they need to work with something the database understands, web developers use computer languages like PHP or.Net. They build code that talks with the server and then instructs the browser on how to access the database.

Conclusion

Hopefully, I've explained the distinctions between front-end and back-end web development clear. It's a complicated problem, especially because there isn't a clear industry standard for what belongs in the front-end and what belongs in the back-end. However, many people are working in and comprehend both the front-end and back-end of websites. These people are referred to as "full stack developers." Keep in mind that the front-end is tied to the browser and everything that is sent to it if the distinction between front-end and back-end is still unclear. If it has anything to do with a database, it's back-end related. Front-end and Back-end relate to presentation and application layers It is a logical construct that separates concerns between a piece of software's graphical user interface (front end) and the data access layer (back end), as well as the physical infrastructure or hardware. While the server may do some presentation work in a client–server architecture, it is often considered the back end while the client is typically the front end. By separating the display layer from the server side, backend developers can avoid a lot of the complexities in maintaining web applications, allowing them to concentrate on model architecture and business logic. With its wide range of power, it provides ample capabilities for presentations. Developers can almost completely replace traditional server-side controls in web application development using Rich Internet Application (RIA) technologies, and mature front-end frameworks like Backbone and Knockout.

Discussing the differences between online website creation tools and custom built sites with regards to design flexibility, performance, functionality, User Experience (UX) and User Interface (UI) Template Website Custom-built Website Advantages  Custom websites are far more expensive than template ones.  Template sites are simple to set up.  The sophistication of templates is increasing.  Unlimited Customization  A professional image Disadvantages  The website may not appear to be innovative.  Users' graphic design and navigation abilities are restricted.  Some of the templates aren't well-made or updated.  Template sites may have restricted capability. The method of building a website is versatile, and it requires awhile to build one from the ground up.

Web Design

Today's web designers are generally professional graphic designers who have specialized in visual design such as:  Diagrams  Infographics  Interactivity  Icon development  Color theory  Typography  Creative concepting Although a web designer could have a basic understanding of information architecture (IA), HTML, and JavaScript coding, most designers typically work with a web developer to write production-ready code and an information architect to create the IA. From a visual and messaging standpoint, the web designer is indeed concerned on the client's image.

UX Design

The term "UI Design" is more closely associated with front-end development in websites, which involves reducing complex data, processes, and workflows into simple displays and flows that make any complicated task seem simple. UI Design is very much a fusion of design and programming. Many website experiences include all three of these elements, as web design, user experience design, and user interface design are not mutually exclusive. As a potential customer who is considering partnering with several firms, we will restrict our agency search if we can specify what is most important to us. Agency websites make use of wording in order to highlight their strengths. Creating a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user requirements As shown above, the screenshot shows the client (SNT auction) asking me to make the website based on what they provide customers.I will now show designs of the wireframe of the different pages of the website.

This first page is designed to be the home page which would be the first page that would pop up after the user has clicked on the website, I will provide the title of the company followed by a brief description of what the company offers.

The next wireframe shows the about page, for this section of the website, I will give a brief description f what the company is as well as does. I will then give a detailed description of what the products are but also give a history on antiques. This section will not require that much effort in regards to the complexity of building a page. For the final wireframe, I designed the contact page. On the left side of the page it would show how the users could contact as well as where to go if they wanted to visit the auction place in person. On the right side I will create a submission form which would allow the customer to send an enquiry about the product or the business itself.

Using the design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content For this section I will show how I made the website for the SNT auction company. How I made the website Adobe Dreamweaver The first version of this product, which is now called Adobe Dreamweaver, came from Macromedia. Adobe Systems purchased the above company in 2005, resulting in the software continuing to be produced as Adobe Dreamweaver. It is used to create websites that are compatible with multiple types of devices and is primarily used when a specific website or application must be developed. As a result of its user-friendly interface and excellent features, Dreamweaver is considered incredibly easy to use. As a result, users must have a basic understanding of HTML and CSS before they can use it for creating various types of web content. As well as Microsoft Windows and Mac OS X, the software is available for both platforms. Furthermore, numerous scripting languages, including ASP and PHP, as well as ColdFusion and JavaScript, are embedded within the aforementioned software. Web developers use this software to create a specific web application for mobile phones, tablets, and other devices. Web developers use this software for creating or editing the pages of websites, as well as creating applications for mobile devices. Dreamweaver is gaining popularity due to its ease of use, and it is the most commonly used software today. There is also the importance of the inclusion of Designer, which means that one does not have to be familiar with all the scripting languages and web technologies supported by the software. This program also makes it easier for users to create more advanced web content by including the code changer. There is also the fact that users can greatly influence performance of the software by making it user-friendly. Adobe Dreamweaver is thus thought to be the best tool to use in most situations. Initially, IT professionals around the world criticized the software while it was launching, but this wasn't always the case. HTML codes are created visually rather than for the creation of specific content, as they are not based on a particular purpose. It is well known that manually writing HTML code results in far superior content, thus many IT professionals believed that this method of development would not be beneficial. Fortunately, they were soon persuaded otherwise, and Adobe Dreamweaver became well-known as one of the best tools for creating high-quality web applications.

This part shows me closing the project of the website, the title says “antique store” this will change to “SNT auction” in order to create a more branded site. I will now show screenshots of all the pages I have created. The background came with the template, it makes the website less boring to make it beneficial. The first page is the home page I made, I gave a brief a description of what the company does as well as the title.

Under the home page, I will showcase the different types of items that SNT antiques and auction would have up for sale so to see if they are interested with the item. The next page I made an about our shop page, in where I spoke about antiques and auction sits in general as well as gave a brief history on antiques. This page will be the penultimate page I will make.