ICON College of Technology and Management
Department of Computing
HND in Computing
Unit 10: Web Design and Development
Lecturer: Sanjib Raj Pandey
Submitted by: Andrei Florin Lamasanu
ID No: 18278
Session: Winter 2022
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Unit 10: Web Design and Development, Study Guides, Projects, Research of Web Design and Development
Unit 10: Web Design and Development
Typology: Study Guides, Projects, Research
2020/2021
1 / 42
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download Unit 10: Web Design and Development and more Study Guides, Projects, Research Web Design and Development in PDF only on Docsity!
ICON College of Technology and Management
Department of Computing
HND in Computing
Unit 10: Web Design and Development
Lecturer: Sanjib Raj Pandey
Submitted by: Andrei Florin Lamasanu
ID No: 18278
Session: Winter 2022
Contents
- DNS..................................................................................................................................................
- Structure.......................................................................................................................................
- Server types..................................................................................................................................
- systems, and web server software.................................................................................................... The purpose and interactions between communication protocols, server hardware, operating - Server Hardware...................................................................................................................... - Server Software........................................................................................................................
- The connections between website front-end &back-end.................................................................
- Front end......................................................................................................................................
- Back end.....................................................................................................................................
- Definition of Presentation and Application layers:................................................................
- Application Layer..................................................................................................................
- Presentation layer...................................................................................................................
- Front-end & Back-end relate to presentation and application layers.....................................
- The distinctions between internet website builders and custom-built websites............................
- UX / UI......................................................................................................................................
- Website builder Tools............................................................................................................
- Custom Built Sites.................................................................................................................
- Website Builder Tools Vs Building Custom sites.................................................................
- UX / UI......................................................................................................................................
- Wireframes for the web pages.......................................................................................................
- The multipage website...................................................................................................................
- Testing............................................................................................................................................
- Programm evidence.......................................................................................................................
- Reference List................................................................................................................................
Structure Labels are the components of a domain name. The domain hierarchy is read from right to left and each section signifies a subdivision. The domain name is usually included in the URL. The TLD appears after the period in the domain name. You may pick from a variety of top-level domains, including.com,.org, and.edu. Some, like.us or.ca for the United States and Canada, may signify a country code or geographic location. Each label on the left side of the TLD corresponds to a separate subdomain of the domain to the right. In the URL www.facebook.com, for example, "facebook" is a subdomain of.com, and "www." is a subdomain of facebook.com. Each label can have up to 63 characters, and subdomains can have up to 127 levels. It is possible to have a total domain character length of up to 253 symbols. Other rules include not using hyphens at the beginning or end of labels, and not using a TLD name that is entirely numerical.. Server types In order to complete a DNS resolution, various server types are required. The order in which a query runs through the four name servers is described in the following table. They either offer the requested domain name or link you to other name servers. Recursive server. DNS queries are sent to the recursive server by a software, such as a web browser. It's the user's first resource, and it either serves the query result if it's cached, or it sends the request to the next-level server if it doesn't. This server may go through numerous query cycles before responding to the client. Root name server. If the recursive server does not have the response cached, it transimts a query to this server first. The root name server is a directory of all the servers that will hold the requested information. These servers are administred by the Internet Corporation for Assigned Names and Numbers specifically the Internet Assigned Numbers Authority. TLD server. The top-level domain - the.com,.edu, or.org in the URL - sends the inquiry to the root server. This is a more detailed section of the search. Organizational Hierarchy: The examples of these Top-level Domains are given below: Domain Purpose : .com - commercial organizations; .edu - educational organizations;
.gov - government institutions; .mil - military groups; .net - major network support centers; .org - Nonprofit organizations and others; .int - International organizations (DNSMap - articles - what are top-level domain (TLD) name servers?, no date). Authoritative name server - is the final checkpoint in a DNS query. These servers are in charge of the subdomain section of the domain name and have comprehensive knowledge about the domain. DNS resource records, such as the A document, that convey specialised information about a domain are stored on these servers. They submit the needed information to the recursive server, which sends it back to the customer and caches it for future lookups (What is DNS? How Domain Name System works, no date). Figure 2: DNS Record Request Sequence (Cloudflare, 2019)
The purpose and interactions between communication protocols, server
hardware, operating systems, and web server software
Web communication protocols are a sort of internet-based technology that allows you to send and receive data. These protocols, for example, are used by a web browser to request certain data from a web server, which is subsequently displayed as text and graphics on the browser screen. The protocol establishes the level of interaction that consumers have with the data (Aditya, 2012). Different types of Internet Protocols are used for different purposes:
SMTP (Simple Mail Transfer Protocol): For sending and distributing outgoing emails, certain protocols are essential. This protocol extracts the recipient's email address from the message's header and adds the message to the outgoing mail queue. And as soon as the email is delivered to the recipient's email address, it is removed from the outgoing list. FTP: This protocol always used to move data from one device to another. This is a client-server system. When one computer requests a file transfer from another, the FTO establishes a connection between the two machines and authenticates them using their ID and password. After then, the desired file transfer occurs between the computers. PPP: known as a communication protocol that allows two communicating devices to establish a direct connection. This protocol specifies the rules by which two devices will communicate information and authenticate with one another. When a user connects his PC to an Internet Service Provider's server, for example, PPP is used. PPP is also used to connect two routers for direct communication. HTTPS : HTTPS is a Hypertext Transfer Protocol extension and it's used for encrypted and authenticated communication across a computer network using the SSL/TLS protocol. So, while most websites use the HTTP protocol, if the website receives sensitive information such as credit card numbers, debit card numbers, or one-time passwords, an SSL certificate must be placed to make the website more secure. As a result, before entering any sensitive information on a website, we should verify that the link is HTTPS. It may not be safe enough to enter important information if it is not HTTPS. A server is a computer or system which delivers resources, data, applications, or applications to other computers called clients across a network. When computers exchange resources with client machines, they are referred to as servers. Among the various types of servers are web servers, mail servers, and virtual servers. (Server, no date). Server Hardware Piece and components make up the hardware. Servers typically have a rack mount chassis with a power supply, a system board, one or more CPUs, memory, storage, a network interface, and a power supply. Most server hardware supports out-of-band management via a specific network port. In administration allows you to manage and monitor your domain controller at a low level, independent of operating system. Remotely turning on or off a server, installing an operating
system, and monitoring its health are all possible using out ofband management systems. Servers are frequently classified into groups based on their intended use. The following are some examples of the various pieces of hardware available: A web server is a programme that responds to requests for HTML pages or data. The customer in this case is a web browser. An application server is a piece of software that offers the business logic for an application programme and operates on a device in a connected circuit. Proxy server: an programme that connects an end point equipment, such as a computer, to the server from which a user or client requests a service. A mail server is a piece of software that receives emails from both local and remote transmiters and routes them to the appropriate recipients. A file server is a device that centrally stores and manages data files so that they may be accessed by other devices on the same network (What is a server? - definition from, no date). Server Software Server operating system (Window, Linux): Both operating systems may be utilised to accomplish different goals. While Windows has more advanced features for organising work and communication processes, Linux excels as the chosen platform for online applications like content management systems (Linux vs. Windows: a comparison of the best web server solutions, no date). Web server: A web server is a computer that runs programmes that provide web applications. The Webserver may receive requests from web browsers and respond to those requests using HTTP or other protocols. There are several web servers available, including Apache, Nginx, and IIS.
The connections between website front-end &back-end
Programmers and computer professionals use the terms front end and back end to describe the layers that make up hardware, software, or websites, and they are divided into two groups based on how user-friendly they are. A human or a digital entity is referred to as a "user" in this context. For a number of reasons, system designs are divided into front end and back end components. Breaking down projects in terms of necessary abilities is most popular in
drag/drop, polls and quizzes, and video scrolling, on your web page or app page (R., 2018). Back end The back end refers to the parts of code that allow software to run but are not visible to the user. The back end of a computer chain stores and accesses the majority of data and operating syntax. The code is usually written in one or more well-known programming languages. The back end, often known as the data access layer of hardware or software, is responsible for any function that requires digital access and navigation. (Fitzgibbons, 2019). The following are a few components and systems that focus on the back end of a system: PHP, Python, and C# are examples of programming and scripting languages. Frameworks for automated testing. Scalability and availability of the network. Data transformation and database management. Cybersecurity and data backup procedures are both important. The following scripting languages and frameworks are generally used independently to develop a good back end: SQL: Structured Query Language is the industry standard for relational database management systems. It's used to connect with the back end's database. SQL statements are used to execute data update and retrieval activities. PHP: The Hypertext Preprocessor is a server-side scripting language and interpreter that is extensively used. It might be embedded in HTML, meaning that when the code is run on the server, HTML is generated and sent to the user. PHP's advantages include scalability, simplicity of deployment, and easier code. Ruby on Rails (RoR): Ruby on Rails is a digital marketing platform that makes creating simpler by using a shortened structural structure.The Model-View-Controller (MVC) framework uses Ruby as its programming language. It can be deployed on most web servers and is compatible with most major databases (R., 2018). Definition of Presentation and Application layers: Application Layer An Application Layer is the seventh of the seven levels in the OSI model (Figure 4). The application layer interface communicates with the programme directly and performs
conventional web app activities. The application layer sends a request to the presentation layer. The application layer, which exposes services directly to the application process, is the highest level of open systems. Application layer functions: Transport access and management: It enables users to access, retrieve, and manage data stored on a distant computer. Mail services: It serves as the foundation for email forwarding and storage. Virtual terminal: For various reasons, it can be said that the standardization of terminals has completely failed. The OSI solution to this problem is to define a virtual terminal that is really just an abstract data structure that takes the abstract state of the actual terminal. Other functions: In addition to the three functions above, there are some other functions: directory services, remote job entry, graphics, information communication and so on (Router-switch.com, 2020). End-user applications such as web browsers and email programmes employ the application layer. It defines protocols that allow software to communicate and receive data and present it in a meaningful way to users. The Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP), Post Office Protocol (POP), Simple Mail Transfer Protocol (SMTP), and Domain Name System (DNS) are all application layer protocols (DNS). Presentation layer The presentation layer is layer 6 of the Open Systems Interconnection (OSI) model, which has seven layers. It is used to send information to the application layer in a precise, well known, and standardised way (layer 7). The presentation layer is in charge of the following tasks: Character & string conversion; Data compression; Graphic handling; Data encryption/decryption. The presentation layer is in charge of translating files from the application layer to network format. Data can come in a variety of formats and from a number of different sources. As a result, the presentation layer is in responsibility of transforming all formats into a standard format so that communication may be efficient and effective.
The distinctions between internet website builders and custom-built
websites
UX / UI
The word "UX" is an acronym for " User Experience ." UX design is a left-brain thinker component a digital encounter that encompasses developing applications and other software products, as well as designing websites. While a the experience of the end user is important to a good web designer, a UX designer is someone who looks at things from a user's perspective. adding a user-centered methodology takes it a step farther.. (Regensburg, no date). For websites with some complexity, a significant focus on UX may be a good fit because:
- Multiple user types;
- Multiple products or services catering to different audiences;
- Size of the website;
- Merger or acquisition. UI stands for User Interface , and it comes from the application sector, where a product's User Interface is the product. UI designers are known for their expertise in creating machine-to- human interfaces. In UI Design, the adage "Form Follows Function" is the operating principle. When it comes to websites, UI Design is more closely associated with front-end development, which entails taking complicated data, activities, and workflows and condensing them into intuitive displays and flows that make something complex look easy. In a nutshell, UI Design is the meeting of programming and design. Website builder Tools A variety of reasons have contributed to the popularity of website creation tools. You can use these tools to make a website even if you don't know how to code. These are typically offered as special services by website hosting companies. An editor, theme selection, and the ability to drag and drop various components such as images, text, headers, and other elements to design a website are among the features available. Using website-building software, you don't need any specific skills to create a website. While fully prepared templates are straightforward to use and provide built-in modification possibilities, they quickly become large and sluggish to load (Bhavin, 2020).
As a result, the site's SEO performance may be affected. Furthermore, the bulk of these applications are flash-based, making Google's interpretation of them more difficult. Additionally, because these systems are self-contained, they do not offer assistance with website maintenance. Few examples of online tools are: WordPress, Wix, Boostrap, Dreamweaver, Figma. Figure 5: Templates vs Custom build websites (Johansson, 2014) Custom Built Sites A website reflects the face and the tone of any company. As a result, it's critical that it stands out and also is unique to its customers. A custom created site would be excellent for any business if you have the funds and enough time. To build a site from the ground up, you'll need to hire the right team that will take the time to learn about your company. Such sites are more cost-effective in the long run since they can be readily changed to adapt to your institution's growth. (Bhavin, 2020). It's usually easy to tell if a website was constructed from scratch or was based on a template. The first step is to examine the source code of the website. Here's how to get your hands on the code: In Chrome, go to: Open the site and click "view source" from the "Tools" menu; alternatively, press Ctrl + U. If you're using Internet Explorer, Mozilla Firefox, or Apple Safari, do the following: Choose "View source" from the context menu when you right-click on the webpage.
guidelines, since any erroneous information might result in a client reporting your site to Google or other engine platforms. (Bhavin, 2020). Regarded performance, functionality, UX, UI and design flexibility i have found the major differences between custom websites and online creation tools presented in the table below: Custom Built Web Sites Online website tools Design Flexibility Takes longer to make changes Easy to make changes even though the design is limited. Performance High Performance Low Performance Functionality Functionality is unlimited Functionality can be limited in templates sites. User Experience Very good experience Not that good as custom built web sites User Interface Unlimited interfaces Limited interfaces
Wireframes for the web pages
Wireframing is a method for laying out the structure of a website. A wireframe is a diagram that depicts how content and functionality on a website should be organised, taking user needs and journeys into account. Wireframes are used early in the development process to create the basic foundation of a page before visual design and content are added. Before i started to design my web site, i have created the wireframes of pages i wanted to include. I used draw.io to make the wireframes.
Figure 6: The wireframe of “Home Page”
Figure 8: The wireframe of “Apartments Page”
Figure 9: The wireframe of “Contact Page”