Web Design & Development.pdf

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.69 MB, 32 trang )

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

Higher Nationals inComputing

WEB DESIGN & DEVELOPMENTAssignment No.1

Learner’s Name: Hà Thế Hải

Class: GCS1006ID: GCS210662Assignment due:Assignment submitter

</div>Trang 2<div class="page_container" data-page="2">

Assignment Brief 1 (RQF)

Higher National

Certificate/Diploma in Computing

Student Name/ID Number: Hà Thế Hải- GCS210662

Unit Number and Title:Unit 10: Website Design & Development

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

Learning OutcomePassMeritDistinctionLO1 P1 Identify theM1 Evaluate the D1 Justify the tools

purpose and types ofimpact of commonand techniques chosenDNS, includingweb developmentto realize a customexplanations on howtechnologies andbuilt website.domain names areframeworks with

organised andregards to websitemanaged.design, functionality

P2 Explain the and management.M2 Review the

purpose and

relationships betweeninfluence of searchcommunicationengines on websiteprotocols, serverperformance andhardware, operatingprovide evidence-systems and webbased support forserver software withimproving a site’sregards to designing,index value and rankpublishing andthrough search engineaccessing a website.optimisation.

capabilities andof tools andrelationships betweentechniques availablefront-end and back-to design and developend websitea custom builttechnologies andwebsite.explain how these

relate to presentationand application layers.

P4 Discuss the

differences betweenonline websitecreation tools andcustom built sites withregards to designflexibility,performance,functionality, UserExperience (UX) andUser Interface (UI).

</div>Trang 4<div class="page_container" data-page="4">

ASSIGNMENT 1 FRONT SHEET

QualificationBTEC Level 5 HND Diploma in ComputingUnit number

Unit 1: Programming

and titleSubmission

Date Received 1st submission

Date Received 2nd submissionDate

Huynh Thi My Trang

Student declaration

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

Student’s signature

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

Grading grid

❒ Summative Feedback: ❒ Resubmission Feedback:

Grade:Signature & Date:

Assessor Signature:Date:

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

Format: The submission is in the form of two documents/files

● A ten-minute Microsoft® PowerPoint® style presentation which can be shared withyour colleagues for feedback. The presentation can include links to performance datawith additional speaker notes and a bibliography using the Harvard referencingsystem. The presentation slides for the findings should be submitted with speakernotes as one copy.

● An extended guidebook or detailed report that provides more thorough, evaluated or critically reviewed technical information on all of the topics covered in the presentation.

● The individual Assignment must be your own work, and not copied by or from another student.

● If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must reference your sources, using the Harvard style.● Make sure that you understand and follow the guidelines to avoid plagiarism.

Failure to comply this requirement will result in a failed assignment.

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

TABLE OF CONTENT

I. Domain name system – DNS (P1)...9

1. What is DNS?...9

2. Purpose and type of DNS...10

3. How domain names are organized...11

II. Explanation of web element (P2,M1)...11

1. Communication protocol web (P2)...11

2. Server hardware (P2)...12

3. Server software (P2)...13

a) Server operating system: Window, Linux...13

b) Web server (Apache, IIS)...13

III. Website technologies (P3)...14

1. Explanation of static and dynamic web...14

2. Driver to front-end and back-end technologies...16

3. Clarify the capabilities and relationship front end and back end...17

4. Explanation of Presentation and Application layers...18

IV. Online creation tools and custom built...19

1. Give examples of online creation tool (WIX.com) (P4)...19

2. Comparison table (P4)...25

V. Evaluate the impact of common web development technologies and frameworkswith regards to website design, functionality and management (M1)...26

1. What is framework ?...26

2. Which framework is used in web development...26

VI. Review the influence Search engine (M2)...27

1. Concept of search engine...27

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

I. Domain name system-DNS(P1)1. What is DNS?

– The domain name system (DNS) is a naming database in which internet domain names are located and translated into Internet Protocol(IP) addresses. The domain name system maps the name people use tolocate a website to the IP address that a computer uses to locate that website.

For example, if someone types "example.com" into a web browser, aserver behind the scenes maps that name to the corresponding IP address. An IP address is similar in structure to 203.0.113.72.– Each device connected to the Internet has a unique IP address whichother machines use to find the device. DNS servers eliminate the need for humans to memorize IP addresses such as 192.168.1.1 (in IPv4), ormore complex newer alphanumeric IP addresses such as

2400:cb00:2048:1::c629:d7a2 (in IPv6)Reference: (john Burke, no date).

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

2. Purpose and type of DNS

a) The purpose of DNS:

– The purpose of DNS resolution involves converting a host name (such as www.example.com) into a computer-friendly IP address (such as 192.168.1.1). An IP address is given to each device on the Internet, and that address is necessary to find the appropriate Internet device - like a street address is used to find a particular home. When a user wants to load a web-page, a translation must occur between what a user types into their web browser (example.com) and the machine-friendly address necessary to locate the example.com web-page.

-In order to understand the process behind the DNSresolution, it’s important to learn about the different hardware components a DNS query must pass between. For the web browser, the DNS lookup occurs"behind the scenes" and requires no interaction from the user’s computer apart from the initial request.

b) Type of DNS: have three type of DNS:– DNS queries:

DNS query is also known as a DNS request. So, it is a request for information that is sent from the user’s computer to ask for the IP addressto a DNS server. This means the DNS client is querying the DNS server to get the IP address, related to that domain.

Three types of queries occurs in DNS query: Recursive Query, IterativeQuery,Non-Recursive Query

– DNS Servers:

DNS servers convert domain names into IP addresses. It takes request from human and converts that into machine IP addresses that make easierto reach the origin server. DNS Resolver,DNS Root Server,Authoritative Name Server

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

3. How domain names are organized

Domain names are organized via subdomains which are subordinate levels of the Domain Name System root domain. Top-level domains (TLDs) are the first-level set of domain names, and include generic top-level domains (gTLDs) such as .com, .net and .org as well as country code top-level domains (ccTLDs).

The ccTLDs are noted to the right of the dot, such as .fr or .Au in the examples google.fr and google.com.Au. Under Top-level domains, thereare second and third-level domain names in the DNS hierarchy, such as DomainTools or Google. These domains are typically available for end-users to reserve so they can run web sites, create publicly accessible Internet resources, and connect the Internet to local area networks. Second level domains typically provide the name of the organization and/or are descriptive of the service provided, while third level domains is typically used to refer to a specific server within an organization. Domain Names are used for different purposes, including application-specific naming, addressing, and in various networking contexts to establish:

– Simple identification of host names and hosts.Host names appear as an element in Uniform Resource Locators (URLs) for Internet resources, such as web sites. For example, the www in

www.google.com is a third level domain, and .com is a top level domainwhile google is a second level domain.

– Simple, easily memorable names.Domain names are useful because they are memorable. For example, books.com is easier to remember thanthe Internet Protocol (IP) address of 65.204.48.126.

To learn more about who manages the architecture and top-level development of the Internet domain name space, read our article on Whatis ICANN, and how Does it Relate to Registries and Registrars

II. Explanation of web element (P2,M1)1. Communication protocol web (P2)

Web communication protocols are technology used to transfer information across the internet. For example, a web browser uses theseprotocols to request information from a web server, which is then displayed on the browser screen in the form of text and images. The degree to which users can interact with that information depends on the protocol

Below are some of web communication protocols used:-Internet Protocol (IP)

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

IP is also known as Internet protocols and they are the main protocol in the Internet protocol suite. With the ability to transfer data over the network and help establish the internet through Internet Protocol routing.

IP provides a service that sends uncertain data so a packet may arrive outof order, it may arrive out of order. IP is very common in today's internet.Today's application information network layer protocol is IPv4 or IPv6.-Hypertext Transfer Protocol (HTTP)

HTTP is the data communication platform for the World Wide Web. Hypertext is structured text that uses hyperlinks between nodes containing the text. HTTP is an application protocol for distributed andhybrid hypermedia information systems.

HTTP default port is 80 and 443. Both of these ports are secure.-Transmission Control Protocol (TCP)

Transmission Control Protocol (TCP) is the core protocol of the InternetProtocol Suite. TCP originates from a network implementation, in addition to the Internet Protocol. Therefore, the Internet Protocol Suite isoften referred to as TCP/IP. TCP provides a reliable delivery method based on a stream octet (8-bit data block) over network IP. The main feature of TCP is the ability to issue commands and check errors. All major Internet applications such as the World Wide Web, email, and file transfers are based on TCP.

-Hypertext Transfer Protocol over SSL/TLS (HTTPS)

HTTPS is used with HTTP to provide the same services, but with asecure connection provided by SSL or TLS.

Default port of HTTPS is 443.

2. Server hardware (P2)

On the hardware side, a web server is a computer that stores webserver software and a website's component files (for example, HTMLdocuments, images, CSS stylesheets, and JavaScript files). A webserver connects to the Internet and supports physical data interchangewith other devices connected to the web (MDN web docs, no date).

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

3. Server software (P2)

On the software side, a web server includes several parts that controlhow web users access hosted files. At a minimum, this is an HTTPserver. An HTTP server is software that understands URLs (webaddresses) and HTTP (the protocol your browser uses to view webpages). An HTTP server can be accessed through the domain names ofthe websites it stores, and it delivers the content of these hostedwebsites to the end user's device (MDN web docs, no date).

a) Server operating system: Window, Linux

-window

: Windows Server is a branch of the operating system for servers produced by Microsoft Corporation. Its purpose is to help usersreliably and securely manage their infrastructure, as well as provide a stable server environment.

-linux:

Linux is a computer operating system developed since 1991 based on the Unix operating system and written in C language.Because Linux is released for free and has many outstanding advantages, Linux still holds a strong position in the hearts of users before big companies like Windows or macOS.

b) Web server (Apache, IIS)-Apache:

Apache, or to use its full royal title The Apache HTTP web server, is an opensource Web server application managed by the Apache Software Foundation.The server software is freely distributed, and the open source license means users can edit the underlying code to tweak performance and contribute to the future development of the program – a major source of its beloved status among its proponents. Support, fixes and development are handled by the loyal user community and coordinated by the Apache Software FoundationAlthough Apache will run on all major operating systems, it is most frequently used in combination with Linux. These two, combined with MySQL database and PHP scripting language, comprise the popular LAMP Web server solution.

When it comes to performance, conventional wisdom has it that Apache is just OK, a bit better than IIS but quite a bit slower than its main open-source rival Nginx. This has been borne out by objective tests. Though by no meansslow for most general tasks, Apache is still held back by two of its main features:

IS (Internet Information Services) is Microsoft’s web server offering, playingsecond fiddle to market leader Apache. As is expected of a core Microsoft product, it only runs and is bundled on Windows operating systems, but is

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

otherwise free for use. It is a closed software product and supported by solely by Microsoft. Although development is not as open and quick as the open-source user-supported nature of Apache, a behemoth like Microsoft canthrow formidable support and development resources at its products, and IIS has fortunately benefitted from this. Actually it is one of the few Microsoft products that even its detractors (grudgingly) agree can stand toe-to-toe with its open source rival and even trounce it soundly in some areas. There is a lite version called IIS Express that has been installable as a standalone freeware server from Windows XP SP3 onwards. But this version only supports http and https.

IIS is reported as being slightly behind Apache in terms of performance. However, these results are tainted because the underlying operating system environment cannot be equalized in order to set an equal base. IIS is inextricably tied with Windows (for example IIS can easily pass and receive process threads from the Windows OS), and Apache simply cannot perform as well there. But both Apache and IIS are still handily beaten in terms of performance by the Nginx web server.

The information displayed on the web is called a database. When a user accesses the browser, these databases are sent to the browser in words, sounds or numeric data, tables or various forms.

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

What is dynamic website?

When designing dynamic websites, web developers will develop the web using the most advanced programming languages such as PHP, ASP.NET, Java,... and using powerful data platforms such as My SQL, Access, etc. MSSQL.

This makes it easy for dynamic web owners (Business Owners) to manage their content and operate their website. From there, the web is always refreshed because it is easy to update regularly through the use of webmastersoftware update tools.

b) Dynamic website:

Static Website (Static Website) is another way of calling old version websites, almost the name says a clear difference to the dynamic website above.

Is a term to refer to websites that are usually designed with little to no need to change and update. This type of web is just a plain HTML document, without an accompanying database and is responsible for publishing information like a newspaper.

From there, users when accessing this website will not be able to chat or have any interaction with it. The content of the static web will be molded right from the time of programming, so if you want to add or remove content, the manager must know how to make a new mold like reprinting a new newspaper.

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

What is a static website?

Having read through the two concepts of a dynamic website and a static website, there must be a lot of people praising the dynamic website. But let's go to the next section to have a specific look at the advantages and

disadvantages of these two types of websites.

In case people want to learn more about the basic structure and interface of awebsite, please refer to the article What is a website for more information? Benefits, basic structure and operating interface of the website

2. Driver to front-end and back-end technologies

Front end and back end are terms used by programmers andcomputer professionals to describe the layers that make uphardware, a computer program or a website which are delineatedbased on how accessible they are to a user. In this context, theuser refers to an entity that could be human or digital.

- Front-end:

The front end and it includes all software or hardware that is part of a user interface. Human or digital users interact directly with various aspects of the front end of a program, including user-entered data, buttons, programs, websites and other features. Most of these features are designed by user experience (UX) professionals to be accessible, pleasant and easy to use. The front end of a system include:

Design and markup languages like HTML, CSS and JavaScript. Search engine optimization (SEO).Usability and accessibility testing.

Graphic design and image editing tools.

</div>