1. Trang chủ
  2. » Luận Văn - Báo Cáo

Web Design & Development.pdf

32 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Web Design & Development
Người hướng dẫn HUYNH THI MY TRANG
Trường học Higher Nationals in Computing
Chuyên ngành Computing
Thể loại Assignment
Năm xuất bản 2022-2023
Định dạng
Số trang 32
Dung lượng 5,69 MB

Cấu trúc

  • 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)
  • 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 frameworks (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)
    • 2. Concept of SEO (27)
  • VII. Evaluate a range of tools and techniques available to design and develop a (28)
    • 1. Tools (28)
    • 2. Techniques......................................................................................................... 30 REFERENCE (30)

Nội dung

Domain name system – DNS (P1)

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 to locate 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, a server 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 which other 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), or more complex newer alphanumeric IP addresses such as

Reference: (john Burke, no date).

Purpose and type 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 DNS resolution, 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 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 address to 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, Iterative Query,Non-Recursive Query

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

DNS server created a DNS record to give important information about the domain or host name and its current IP address.

The common DNS record types are –Address mapping record (A record),IP version 6 address record (AAAA record),IP version 6 address record (AAAA record),Service Location (SRV Record),Text Record (TXT record),Start of Authority (SOA Record),Name Server Record (NSRecord),Reverse-lookup pointer record (PTR Record).

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, there are 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 domain while 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 than the Internet Protocol (IP) address of 65.204.48.126.

For a comprehensive understanding of the management of the Internet's domain name system, refer to our article on ICANN This organization plays a crucial role in overseeing the architecture and top-level development of the domain name space, ensuring the stability and interoperability of the Internet.

Explanation of web element (P2,M1)

Communication protocol web (P2)

Web communication protocols enable the transfer of information across the internet They facilitate the communication between web browsers and servers, allowing browsers to request and display information from servers as text or images on users' screens The level of user interaction with this information is determined by the specific protocol being used.

Below are some of web communication protocols used:

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 out of 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 and hybrid hypermedia information systems.

HTTP default port is 80 and 443 Both of these ports are secure.

Transmission Control Protocol (TCP) forms the backbone of the Internet Protocol Suite (TCP/IP), providing a reliable delivery mechanism for data via network IP Its key feature is error-checking and command execution, making it essential for web applications, email, and file transfers.

-Hypertext Transfer Protocol over SSL/TLS (HTTPS)

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

Default port of HTTPS is 443.

Server hardware (P2)

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

Server software (P2)

On the software side, a web server includes several parts that control how web users access hosted files At a minimum, this is an HTTP server An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view web pages) An HTTP server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites 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 users reliably 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, or to use its full royal title The Apache HTTP web server, is an open source 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 Foundation Although 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.

In terms of performance, Apache consistently falls behind its main open-source competitor, Nginx Objective testing has demonstrated that Apache is slower than Nginx, despite being faster than IIS This performance lag is primarily attributed to two of Apache's defining features.

IS (Internet Information Services) is Microsoft’s web server offering, playing second 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 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 can throw 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.

Website technologies (P3)

Explanation of static and dynamic web

Dynamic website (Dynamic Website) is a specialized term used to refer to websites that are supported by a web development software This type of website is designed with additional information processing and data retrieval.

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.

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 webmaster software 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.

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 a website, please refer to the article What is a website for more information? Benefits, basic structure and operating interface of the website

Driver to front-end and back-end technologies

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

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).

Graphic design and image editing tools.

Web performance and browser compatibility.

The back end refers to parts of a computer application or a program's code that allow it to operate and that cannot be accessed by a user. Most data and operating syntax are stored and accessed in the back end of a computer system Typically the code is comprised of one or more programming languages The back end is also called the data access layer of software or hardware and includes any functionality that needs to be accessed and navigated to by digital means.

The back end of a system include:

Programming and scripting languages like PHP,

Python and C# Automated testing frameworks.

Database management and data transformation Cybersquatting and data backup practices.

Clarify the capabilities and relationship front end and back end

Front-end development focuses on the user-facing side of a website Front-end developers ensure that visitors can easily interact with and navigate sites by using programming languages, design skills, and other tools

They produce the drop-down menus, layouts, and designs for websites.

Front-end debs use computer programming languages like JavaScript, Hyper Text Markup Language (HTML), and Cascading Style Sheets (CSS) to design websites

In web development, each programming language plays a distinct role in constructing a website HTML forms the skeletal framework of the site, outlining its content and structure CSS then adorns the site with visual elements and design enhancements JavaScript takes it a step further, introducing interactive features and dynamic functionality While front-end developers typically focus on these core languages, proficiency in additional programming languages such as Python, PHP, or Ruby can further enhance their skill set.

Front-end development requires technical expertise and creativity to ensure websites' user interfaces look correct and function properly Front-end debs work with back- end developers, designers, and user experience analysts.

Some of the capabilities of front-end development include:

- Optimize website performance for faster loading times

- Create visually appealing user interfaces

- Build responsive designs that work across different devices

- Implement accessibility features for users with disabilities

Back-end developers focus on the server side of websites They use technical skills to perform the behind-the-scenes work that creates a website's structure and overall functionality, allowing a site's front end to exist These professionals create a site's operations, databases, and application programming interface (API).

Most employers require back-end debs to hold bachelor's degrees in computer science, programming, or web development Some back-end debs can find employment without earning four-year degrees by learning through relevant work experience or boot camps.

With additional training, education, or certifications, some back-end developers can translate their experience into higher-paying careers as software engineers Below, we explain some skills that back-end developers usually possess. + Some of the capabilities of back-end development include:

- Store and manage data in a database

- Scale your website or app to handle heavy traffic

- Develop algorithms and logic to handle complex business rules

- Implement security measures such as user authentication and encryption b) Relationship:

More specifically, Front End is the part that displays outside the interface and interacts with the user So it pays attention to the important side, the authority and the easy-to-use local layout And Back End is the work related to the database stored inside to display to the server

Explanation of Presentation and Application layers

Acts as the data layer on the network This layer on the data transfer computer translates the data sent from the Application layer into a common format And at the receiving computer, this Layer is converted back from the General Format to the Application layer format This layer performs the following functions:

Translate encoded characters from ASCII to EBCDIC.

Convert data, for example from an integer number to a motion sign number.

Compress data to reduce the amount of data transmitted on the network. Encrypt and decrypt data to ensure security on the network.

The application layer is the layer that provides the main interface for the user to interact with the application program Through software, services, and protocols, users can access information and data on the network Some examples of applications in this layer include: Web, Mail, FTP, Telnet

Online creation tools and custom built

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

Wix.com or WIX is a platform that allows users to create an online website by drag and drop WIX integrates with HTML5 and is extremely simple to use You only need to register for an account and you can use WIX tools to design your own website or blog.

Currently, the platform is widely used in 190 countries with more than

Home template when you visit wix.com website editor

Here are tools to help you design your intro or announcement page.

Here are tools to help you design the page elements you want on your website.

Steps to add products to the store some example photos of the website:

Comparison table (P4)

Online creation tools Custom built website

Based on available design templates and themes

Full control of the design, high allow Custom solutions.

Have performance limit due to predefined code and the infrastructure.

Can be optimized for performance, resulting in Faster loading time

Provides a limited set of suitable built-in function for basic websites.

Can be designed to include different functions, for example like advanced search Functionality and customization integration with third party software UX

Provide a consistent UX based on per-determined Samples and designs element.

Designed with UX in mind and according to specific regulations needs and preferences of target objects.

UI options based on predefined templates and design elements

Can be designed with a fully customization (UI) fit your needs target's preferences audiences.

Evaluate the impact of common web development technologies and frameworks

What is framework ?

A framework is a structure that you can build software on It serves as a foundation, so you’re not starting entirely from scratch Frameworks are typically associated with a specific programming language and are suited to different types of tasks.

Let’s say you’re building a house You could pour the foundation and frame the house yourself It would take a lot of time, but you could do it If all of that were already done for you, though, it would save you quite a bit of effort — especially if it was done by expert home builders.

A house isn’t complete with just the framework, though Similarly, a framework in software development is a starting point, but you add higher-level functionality to it to make it work.

Which framework is used in web development

Express is a development framework that uses Node.js and is compatible with other website languages like Kraken and Sails. Express is a common choice because it offers a seamless transition from client-side to server-side It's beneficial to web designers who want a simple, fast framework that supports full applications because it offers a good amount of flexibility and is easily salable

Django is a framework that uses a model-view-template (MVT) layout using a Python language It offers many add-on features like convention over configuration and DRY patterns of design Django is most beneficial for web designers who need a truly secure website. The framework offers many tools that can lower security threats and keep information secure.

ASP.NET is an open-source framework that comes fromMicrosoft and uses the C# language This means that ASP.NET can use HTML and CSS languages It gives designers the ability to create websites on a desktop or mobile device This framework is good for website designers who want web design capabilities that focus on productivity and speed.

Review the influence Search engine (M2)

Concept of search engine

Search engines are able to return results quickly—even with millions of websites online—by scanning the Internet continuously and indexing every page they find.

When a user enters a search term, the search engine looks at the website page titles, contents and keywords it has indexed and uses algorithms (step-by-step operations) to produce a list of sites—with the most relevant websites at the top of the list.

Companies use search engine optimization (SEO) to help search engines recognize their websites as highly relevant to particular searches Popular search engines include Google, Bing and Yahoo.

Concept of SEO

SEO stands for Search Engine Optimization which means search engine optimization It is the process of helping businesses increase the quality and traffic of their website by improving the ranking and visibility of their website or web pages on search engines.

SEO is commonly employed by business owners seeking growth or improved online sales Website managers and brand builders for businesses also utilize SEO on their websites and content to enhance their online presence.

Evaluate a range of tools and techniques available to design and develop a

Tools

Tool 1 (Netbean) Cross-platform compatibility

VS Code is available on multiple platforms, including

Windows, Mac OS and Linux, make it easy to collaborate with other developers using different operating systems.

Difficulty for beginners: VS Code can be overwhelming for beginners due to its wide range of features and functionalities It takes a while to learn how to use it effectively.

VS Code has a rich library of possible extensions and plugins enhance your workflow

Knowledge Requirement: VS Code is not the website builder but the code editor, so you need and help you design and develop a

Custom websites are more efficient. some knowledge of web development technologies such as HTML, CSS, and JavaScript to use it effectively.

VS Code has a built-in debugger that allows you to debug your code while writing it This makes it easy to identify errors and fix them quickly.

Can use many resources in device: VS Code is a powerful code editor can consume a lot system resources, especially when work on big projects this can slow down your computer.

Techniques 30 REFERENCE

Server-side support script, dynamic permissions Content

May be vulnerable security problem otherwise properly coded

Tech 2 (HTML…) Provide structure and semantics for web pages

Allows styling and website customization design

May be limited to interactivity and function

Allows styling and website customization design

Can be complicated and difficult finding fault

1. https://www.techtarget.com/searchnetworking/definition/do main-name-system(joh burke)

2. https://www.educba.com/dns-types/ (Accessed: April 13, 2023)

3. https://www.domaintools.com/support/what-is-a-domain-name- and-what-does-it-do/#:~:text=Domain%20names%20are%20org anized%20via,%2Dlevel%20domains%20(ccTLDs).

4. https://www.domaintools.com/support/what-is-a-domain-name- and-what-does-it-do/#:~:text=Domain%20names%20are%20org anized%20via,%2Dlevel%20domains%20(ccTLDs).

5. https://vtcc.vn/giao-thuc-truyen-thong-la-gi/#giao-thuc-truyen -thong-trong-mang-may-tinh

6. https://bkaii.com.vn/tin-tuc/621-nhung-giao-thuc-mang-ban- n en-biet

7. https://maychusaigon.vn/windows-server-la-gi/

8. https://www.computerscience.org/bootcamps/resources/frontend- vs-backend/#:~:text=Front-end%20development%20focuses

%20on%20the%20visual%20aspects%20of%20a,create%20i 9. https://sinhvientot.net/topic/tang-trinh-dien-presentation-layer/ 10. https://www.codecademy.com/resources/blog/what-is-a- framework/

11. https://www.bdc.ca/en/articles-tools/entrepreneur-toolkit/templates- business-guides/glossary/search-engine#:~:text=A%20search

%20engine%20is%20a,indexing%20every%20page%20they

Ngày đăng: 13/05/2024, 14:53

w