btec level 5 hnd diploma in computing website design development

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b> ASSIGNMENT 1 FRONT SHEET</b>

<b>Unit number and title</b> 10: Website Design & Development

<b>Re-submission Date^{Date Received 2nd}submission</b>

<b>Student declaration</b>

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that making a false declaration is a form of malpractice.

<b>Student’s signatureGrading grid</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>❒ </b>

<b>Summative Feedback: </b>

<b>❒ </b>

<b>Resubmission Feedback:</b>

<b>Signature & Date:</b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

How DNS works: _How DNS are organized...6

_ How DNS are managed...7

II.Explain the purpose and relationships between communication protocols, server hardware, operating systems and web server software with regards to designing, publishing and accessing a website...7

1.Communication Protocols...7

2.Web server hardware...8

3.Operating systems...8

4.Web server software...8

III.Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to presentation and application layers...9

1.Knowledge about web...9

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

2.Font-end...10

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

4.Relationship Between Front-end and Back-end...12

5.How Front-End and Back-End Relate to Presentation and Application Layer...13

IV.A Discuss the differences between online website creation tools and custom built sites with...14

regards to design flexibility, performance, functionality, User Experience (UX) and User Interface (UI).. 14

1.Online website creation tools...14

2.Custom Built Websites...15

3.The differences between online website creation tools and custom built sites...16

Visualization is the first step in the web design process, and it can be carried out manually or automatically. The website isthen created using HTML and CSS. The scripts that are utilized to create web pages are HTML and CSS. HTML managesthe page's "bones" and basic structure, whereas CSS controls the page's style and look. Web design is a term used to describe the process of creating a website's user interface (client-side) design, which includes author markup. In the broader context of web development, there are certain overlaps between web design and web engineering. In the broadercontext of web development, there are certain overlaps between web design and web engineering. An important idea for internet designers to understand is usability.

<b>I.</b>

<b>Identify the purpose and types of DNS, including explanations on how domain names are organised and managed.</b>

<b>1. Introduce of web</b>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>Define: The World Wide Web (WWW), commonly known as the Web, is an information system enabling documents </b>

and other web resources to be accessed over the Internet<small>.</small>

<b>Web works under Client-Server Model:</b>

Servers are computers that house websites, apps, or other online content. When a client device requests a webpage, the server sends a copy of the requested page to the client machine, where it is then downloaded and displayed in the user's web browser.

Clients are the ordinary online user's internet-connected devices and any software on those devices that allows them to access the internet.

<b>For a website to function, a few basic technologies are required:</b>

HTML stands for Hyper Text Markup Language. It’s one of the fundamental technologies required for web development. It provides the base structure for a web page.

Browsers are the interpreters of the web. They request information and then when they receive it, they show us on the page in a format we can see and understand.

CSS is a Cascading Style Sheet. CSS let’s web designers change colors, fonts, animations, and transitions on the web. They make the web look good.

A server is where the application code is typically stored. Requests are made to the server from clients, and the server will gather the appropriate information and respond to those requests.

Protocols are standardized instructions for how to pass information back and forth between computers and devices.

Universal Resource Identifier, or URL. a special "address" that is used to identify each web site and is unique. Itis also frequently known as a URL.

<b>2. What is DNS?</b>

<b>Define: A computer server that holds a database of hostnames and their associated IP addresses is referred to as a </b>

"DNS server," also known as a "name server" or "domain name system server." In most cases, the DNS server resolves or translates the hostnames to the requested IP addresses. DNS servers communicate with one another using specific protocols and specialized software.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

g p p p

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>Purpose: All machines connected to the internet, from our computers and smartphones to the servers that deliver </b>

content for large websites, use numbers to locate and communicate with one another. These numbers are referred to as IP addresses. The DNS server helps translate these numerical addresses into the domain names that we enter when we browse the internet.

<b>Types of DNS servers: </b>

Recursive server. The recursive server takes DNS queries from an application, such as a web browser. It's the first resource the user accesses and either provides the answer to the query if it has it cached or accesses the next-level server if it doesn't. This server may go through several iterations of querying before returning an answer to the client.

A Root Server: The root server gets the first request and delivers a response that informs the DNS resolver of the address of the Top Level Domain (TLD) server that holds the site’s information. A top-level domain is the .com or .net section of the domain name that you typed into the address box.

A TLD Server: The DNS resolver queries the TLD server, which returns the Authoritative Name Server.

An Authoritative Name Server: Lastly, the DNS resolver will send a query to this server in order to determine theprecise IP address of the website you are attempting to display.

<b>How DNS works:</b>

<b> _ </b>

<b>How DNS are organized: DNS servers translate URLs and domain names into computer-friendly IP addresses. They </b>

transform what a person types into a browser into something the machine can use to discover a webpage. DNS resolutionrefers to the translation and lookup process.

<b>The following steps make up the fundamental process of a DNS resolution:</b>

1) The user enters a web address or domain name into a browser.

2) The browser sends a message, called a recursive DNS query, to the network to find out which IP or network address the domain corresponds to.

3) The query goes to a recursive DNS server, which is also called a recursive resolver, and is usually managed by

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

the internet service provider (ISP). If the recursive resolver has the address, it will return the address to the user, and the webpage will load.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

4) If the recursive DNS server does not have an answer, it will query a series of other servers in the following order: DNS root name servers, top-level domain (TLD) name servers and authoritative name servers.

5) The three server types work together and continue redirecting until they retrieve a DNS record that contains the queried IP address. It sends this information to the recursive DNS server, and the webpage the user is looking for loads. DNS root name servers and TLD servers primarily redirect queries and rarely provide the resolution themselves.

6) The recursive server stores, or caches, the A record for the domain name, which contains the IP address. The next time it receives a request for that domain name, it can respond directly to the user instead of querying other servers.

7) If the query reaches the authoritative server and it cannot find the information, it returns an error message.

<b>_ How DNS are managed: The Internet’s DNS system works much like a phone book by managing the mapping between</b>

names and numbers. DNS servers translate requests for names into IP addresses, controlling which server an end user will reach when they type a domain name into their web browser. These requests are called queries.

<b>II.Explain the purpose and relationships between communication protocols, server hardware, operating systems and web server software with regards to designing, publishing and accessing a website</b>

<b>1. Communication Protocols</b>

<b>Define: The proper descriptions of digital message formats as well as rules are known communication protocols. </b>

The main function of these protocols is to exchange messages from one computer system to another.

<b>Purpose: Communication protocols allow different network devices to communicate with each other. They are used</b>

in both analog and digital communications and can be used for important processes, ranging from transferring files between devices to accessing the internet.

<b>Common types of communication protocols include the following:</b>

Automation: These protocols are used to automate different processes in both commercial and personal

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

settings, such as in smart buildings, cloud technology or self-driving vehicles.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

Instant messaging: Instantaneous, text-based communications on smartphones and computers occur because of a number of different instant messaging network protocols.

Routing: Routing protocols permit communication between routers and other network devices. There are also routing protocols specifically for ad hoc networks.

Bluetooth: Ever-popular Bluetooth devices — including headsets, smartphones and computers — work due to a variety of different Bluetooth protocols.

File transfer: If you have ever moved files from one device to another, either via a physical or digital medium,you’ve used file transfer protocols (FTP).

Internet Protocol: Internet Protocol (IP) allows data to be sent between devices via the internet. The internet could not operate as it currently does without IP.

<b>2. Web server hardware</b>

<b> Purpose: Web server hardware is connected to the internet and allows data to be exchanged with other </b>

connected devices, while web server software controls how a user accesses hosted files. The web server process is an example of the client/server model. All computers that host websites must have web server software. Web servers are used in web hosting, or the hosting of data for websites and web-based applications -- or web applications.

<b>3. Operating systems</b>

Purpose: Manage the computer's resources, such as the central processing unit, memory, disk drives, and printers.Establish a user interface, and execute and provide services for applications software. Keep in mind, however, that much of the work of an operating system is hidden from the user; many necessary tasks are performed behind the scenes. In particular, the first listed function, managing the computer's resources, is taken care of without the user being aware of the details. Furthermore, all input and output operations, although invoked by an applications program, are actually carried out by the operating system.

<b>4. Web server software</b>

Purpose: Server software is software that is intended to be executed, managed, and used on a computer server. It

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

allows and simple use of underlying server computing capacity for a variety of high-end computing services and functions. Web server software is accessed through the domain names of websites and ensures the delivery of the

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

site's content to the requesting user. The software side is also comprised of several components, with at least an HTTP server. The HTTP server is able to understand HTTP and URLs.

<b>5. Relationships between communication protocols, server hardware, operating systems and web server software.</b>

Communication protocols are necessary to allow clients and servers to interact efficiently, even though the client and server know very little about one another. If a client has a working id (possibly nothing) and a correct password (possibly null), then it can present requests to the server, and the server will reply with answers to the queries. This allows the broadest possible mix of clients and servers.

Server hardware is usually based on a large number of identical computers, with many CPUs, loads of RAM,and extensive persistent storage. Servers work best with a good caching solution to allow the entire complexto scale up so it can handle a large number in concurrent requests.

Server operating systems are almost always a version of Linux. There are other solutions, but the Linux model has become the dominant server operating system. Client operating systems and range from Windows, macOS, Linux, along with Android and Apple smartphones.

Server software stacks can be very complex, with load-balancers distributing incoming requests across multiple web servers, and accessing large datastores, handled by a variety of data access protocols. This is probably the most complex part of the entire space and it is managed by highly competent professionals. If not, chaos will reign.

<b>III.Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to presentation and application layers.</b>

<b>1. Knowledge about web</b>

Web 1.0, or static web, which consists of basic HTML pages and auxiliary files like Cascading Style Sheets (CSS) andJavaScript (JS), was too antiquated since it didn't adapt to new information, which made static websites user-blind and

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

solely based on assumptions. Moreover, Web 2.0 or a dynamic web that combines both. Web-commerce is dominated by back-end and front-end development. A stage play would be a suitable analogy for contrasting backend with

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

frontend development. The set and the actors are what the audience sees as the backside is the staff managing the lighting and soundboard behind the scenes.

<b>2. Font-end</b>

<b>Define: The front end of a website is everything the user either sees or interacts with when they visit the website. It is </b>

responsible for the total look and feel of an online experience.

<b>Font-end technologies:</b>

JavaScript has been around for the past quarter of a century. The programming language is well-known for revolutionizing the web due to its dynamic capabilities. Dynamic describes content that is susceptible to change,

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

whereas static content is immovable. Before the emergence of JavaScript, the web as a whole was static in

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

nature. A web page was simply a block of text. Then JavaScript came about, enabling interactivity, like scrolling,clicking, and much much more.

HyperText Markup Language (HTML), alongside JavaScript and CSS, is a foundational web technology. Its basic purpose is to structure text which occurs by formatting documents for display on a web page.

Cascading Style Sheets (CSS) denotes the styling and presentation of a document. For instance, any HTML document counts on CSS to manage the visual details of the web page. Layouts, colors, and fonts are all underthe jurisdiction of CSS

React, or ReactJS, is a front-end JavaScript library for building UIs and UI components. React was developed and is maintained by a small team of developers at Facebook.

Angular is a TypeScript web application framework, and a reliable component of the MEAN tech stack — or MongoDB, Express.js, Angular, And Node.js. TypeScript is a superset of JavaScript which extends static typing, permitting stronger type safety for detecting errors quickly.

Flutter is a UI software development kit (SDK) courtesy of Google. Along with Flutter, developers employ the speedy programming language Dart and the resourceful graphic engine Skia for building cross-platform apps. Benchmarks demonstrate that Dart is even faster than JavaScript, and Skia works with APIs from a variety of development platforms to abstract platform-specific graphics and render native UIs.

Vue.js is a progressive, MVVM JavaScript framework. By being progressive, Vue.js encourages incremental adoption. Vue.js designer Evan You created the project after using AngularJS. He decided to extract the best features from Angular and build something lightweight.

Bootstrap is a CSS framework with design templates for typography, forms, buttons, navigation, and similar interface modules. You can think of Bootstrap as a toolkit for building the front-end of responsive sites with easeand speed. Themes and icons come equipped with Bootstrap's pre-built components.

<b>3. Back-end</b>

<b>Define: A backend technology is anything used server-side to build stable and efficient web architectures. Back-end </b>

technologies include programming languages, databases, communication mechanisms, or frameworks that make up the building blocks of a web application’s back-end.

</div>