Download Assignment 2 Web Design & Development and more Assignments Web Design and Development in PDF only on Docsity!
PROGRAM TITLE: ……WEB ………………………………......
UNIT TITLE: ……Website Design & Development……………. ASSIGNMENT NUMBER: …………………1…………………………....... ASSIGNMENT NAME:...... BKC Antiques and Auctions ……….. SUBMISSION DATE: ……………28/04/ 2022 ……………………….... DATE RECEIVED: …………………28/04/ 2022 …………………………… TUTORIAL LECTURER: ………Nguyen Duc Giang …………......... WORD COUNT: …………………… 12428 ………………………………… STUDENT NAME: ………Do Long Nhat……………………………. STUDENT ID: ………………BKC12174……………………………… MOBILE NUMBER: …………0901569964………………………
Summative Feedback: Internal verification:
● Discuss 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) As you will need to also create more awareness amongst the owners, who are still skeptical, about the costs and projected benefits, you have decided to put together a presentation. That looks at the options available in terms of user experience, search engine types and the tools and techniques that can be used when designing a custom-built website. Design a presentation 15-20 slides with accompanying notes that will support the next part of the project involving the website design for BKC Antiques. Even though a visual presentation is the best format to aide understanding, you have also decided to include extensive accompanying notes that evaluate the concepts introduced. The presentation should address the impact of common web development technologies and frameworks with regards to website design, functionality, and management. The influence of search engines on website performance; provide evidence-based support for improving a site’s index value and rank through search engine optimization. You will need to ensure that the owners know what is meant by the key terms and provide examples linked to the antiques business and/or auction arena. You want the owners to sign off the first stage as quickly as possible so that you can progress onto the design. Therefore, ensure that you have fully evaluated a range of tools and techniques that can be used to design and develop a custom-built website for BKC. LO3 and LO The owners, following your presentation and technical information report are fully onboard with you developing their website. They would like a design that captures their current stock and new arrivals. They would like information on their website about events such as auctions and themed days at their barn warehouse in Suffolk looking at different types of antiques, focusing on different periods, different types e.g., ‘furniture’ or ‘paintings’. Feature pages of special items for sales and online purchasing has also been discussed. The information provided by BKC should support you in creating a design document and from that a branded, multipage website supported with realistic content. The design document should showcase a multipage website, supported with medium fidelity wireframes (giving details about the layout and how things will work/function) and a full set of client and user requirements. Once the design document is complete with appropriate principles, standards, and guidelines you will then move onto physically producing a branded, multipage website supported with realistic content for BKC. For the benefit of the owners, you will also need to include supporting documentation justifying what you have done, why and what testing that has taken place. Provide written and /or visual evidence of the following: ● A critical evaluation of the design and development process for the website against the design document analyzing any technical challenges. At the very least, the evaluation should compare the multipage website that you have created to the original design document.
● A suitable test plan that identifies key performance areas. Use this to review the functionality and performance of BKCs website. ● Provide an evaluation of the Quality Assurance (QA) process and review how this was implemented during the design and development stages. For the IT administrator you have agreed to provide a critical evaluation of the test plan results including a review of the overall success of the multipage website. This evaluationcan be used to identify areas of success, but also provide justified recommendations for areas that require improvement in the future, if the business wishes to expand or embrace e- commerce further.
Example How does the server and protocol work on a website? ....................................... 21 LO2: Categorize website technologies, tools and software used to develop websites Front-end and back-end website technologies, review the capabilities and responsibilities of the technologies .............................................................................................................. 22 Front-End ............................................................................................................................ 22 Back-End: ........................................................................................................................... 27 Full-Stack: ........................................................................................................................... 29 Briefly, the difference between the front end and the back end: ........................................ 29 Html: ................................................................................................................................... 30 CSS: .................................................................................................................................... 30 JavaScript: ........................................................................................................................... 30 bootstrap:............................................................................................................................. 30 Building and designing websites from scratch: .................................................................. 31 Use of ready-made website design templates: .................................................................... 31 But when is using ready-made templates a bad thing? ...................................................... 31 The distinction between a user interface (UI) and a user experience (Ux) is as follows: ... 32 LO3: Utilize website technologies, tools and techniques with good design principles to create a multipage website What occurs in the event that I don't utilize wireframes? ................................................... 33 What to incorporate into a wireframe ................................................................................. 33 All highlights of Wireframe are for the most part shown and take the accompanying focuses................................................................................................................................. 34 Website design for E-commercial ....................................................................................... 34 My webpage design: ........................................................................................................... 36 The product page: ............................................................................................................... 44 Test website: ....................................................................................................................... 45 Recommendations for site improvement ............................................................................ 46 Critically evaluate the web design and development process against your design document and analyse any technical challenges you faced in development ....................................... 46 LO4: Create and use a Test Plan to review the performance and design of a multipage website Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages .................................................................................. 48 Test Objective ..................................................................................................................... 48 Unit Testing ........................................................................................................................ 48 System Testing .................................................................................................................... 48
Conclusion: .......................................................................................................................... 50 References............................................................................................................................ 50 Figure 1: Manage Domain Listings .................................................................................... Figure 2: The communication Protocol .............................................................................. Figure 3: Example. .............................................................................................................. Figure 4: Website's homepage ............................................................................................ Figure 5.1: The code of the website's homepage ................................................................ Figure 5.2: The code of the website's homepage ................................................................ Figure 5.3: The code of the website's homepage ................................................................ Figure 6.1: CSS ................................................................................................................... Figure 6.2: CSS ................................................................................................................... Figure 6.4: CSS ................................................................................................................... Figure 6.4: CSS ................................................................................................................... Figure 7: Product page ........................................................................................................ Figure 8: Test website. ........................................................................................................ Figure 9 : Login Admin ....................................................................................................... Figure 10 : Add customer .................................................................................................... Figure 11 : Test website ....................................................................................................... Figure 12 : Example.............................................................................................................
LO1: Explains server technologies and management services involved in
hosting and managing web pages
What is DNS? DNS stands for (Domain Name System), and it is a system that stores information about domain names in a database that is distributed over the Internet, and the dns links information and addresses with associated domain names, such as when writing www.google.com from www.google.com. The DNS returns the domain name, which is 74,125,224,72, through the Internet link; in other words, DNS works to translate domain names from words to addresses (IP address). Addresses were first used to address the Internet and all of its services. Consider how inconvenient it would be if you had to memorize the IP address and write it down every time you wanted to access the web. How difficult, if not impossible, would it be to deal with hundreds or tens of addresses that we only know in an abstract way? As a result, the need for a system that converts addresses to clear, legible names and their meaning for us emerged, and this system is the DNS protocol. As a result, DNS works to build a database containing records that link IP addresses to names expressed in a hierarchical structure. The DNS server The DNS server is an abbreviation for (Domain Name System), and it is a system that stores information about domain names (Domain Names) in a database that is distributed over the Internet, and the DNS names are connected to www.go.com. The DNS returns the domain name 74,125,224,72 via the Internet connection. To put it another way, the DNS translates domain names from words to addresses (IP address). How DNS works? When you want to access a site, for example www.google.com, the browser sends a query to find out the IP to the DNS server defined on your device (it will be called the local server). The DNS searches for the IP if it is stored in the local database or in the cache, and if found, it sends after in response to the inquiring device, then the matter ends. cache: are the addresses that the server has previously inquired about and keeps them for a limited period so that he can refer to them directly if you ask him again without the need to reinquire about them in a recursion way. What is the recursion method? The local server starts the recursion method, starting from the highest level of the hierarchy, which is the root, so it sends a query to one of the root name servers (and it is defined automatically) and this is a query about the first part of the requested address, i.e., “com.” Then the root server responds to the query by sending a list of authorized DNS servers with information about the required TLD, specifically com. “Then the local server returns the query process to one of the TLD servers that it has connected to in the list. In turn, the TLD sends the server address authorized with the domain to the local server. The local server sends to the authorized server a query about the address google.com and this time through a reply with the private IP address. The desired location.
What is the benefit of DNS? DNA: is useful when entering a specific site, for example (google.com), it is easy to access it by typing the name of the site, but it is difficult to be able to save the IP address of the site itself which is 207,142,131.206 and thus The DNS provides an easy way for users to deal with and connect to URLs on the network. DNS System Structure: We will briefly get acquainted with the basic components of working a domain name system:
- Domain Name Space: where the site’s files are saved and stored, and it can be defined by the site’s database.
- Server: The DNS server contains the IP information and addresses on the network. So that if a user sends a request in order to get the information and the server does not exist, then the request is passed to another server to fulfil the request.
- Domain name: It is a name used on the Internet to denote a specific site, as any site contains a Domain Name to denote the work of the site and its divisions, and the choice of the domain is close to the name of the organization or its work.
- Zone File: This file contains all the resource records (information) related to the Domain Name, and the file is saved and managed by the Domain Name Server.
- Domain Name Server: This server responds to users' inquiries, and there is at least one main server for each domain.
- The Resolver: It is a device that, on behalf of the users, sends inquiries about any information in the system, and then sends the final result to the inquirers.
- User: who is the beneficiary of this service from the system; So that he can deal with the DNS to get the required information. How does the DNS name or divide domains or domains? Domain naming technology is based on the hierarchical grouping of names where “Domains” define several different levels in a hierarchical structure, and these levels are:
- Root Domain: represents the highest level in the hierarchical structure and is indicated by a period (.).
- Top-Level Domains: This level is represented by two or three-symbol abbreviations that express the type of organization, geographical location, or even anything. Top Level Domains can contain Second Level Domains, in addition to users.
- Second Level Domains: This level can contain users, and other domains called “Sub domains”.
- Hostnames: Hostnames refer to computers on the Internet or in a private network, and hostnames are always on the far left within the name. What is a domain name?
- .bb – Barbados
- .ca – Canada
- .de – Germany
- .is – Iceland Analyze the effect of search engines on website performance Provide evidence-based support for improving a site’s index value and rank through search engine optimization. Success in search engine optimization (SEO) requires not only an understanding of where Google’s algorithm is today but an insight to where Google is heading in the future. Based on my experience, it has become clear to me Google will place a stronger weight on the customer’s experience with page load speed as part of their mobile-first strategy. With the investment Google has made in page performance, there are some indicators we need in order to understand how critical this factor is now and will be in the future. For example: AMP — Specifically designed to bring more information into the search engine results pages (SERPs) in a way that delivers on the customer’s intent most expeditiously. Google’s desire to quickly serve the customer “blazingfast page rendering and content delivery” across devices and media begins with Google caching more content in their own cloud. Google Fiber — A faster internet connection for a faster web. A faster web allows for a stronger internet presence in our everyday lives and is the basis of the success of the internet of things (IoT). What the internet is today is driven by content and experience delivery. When fiber installations reach critical mass and gigabit becomes the standard, the internet will begin to reach its full potential. CSS CSS is a Cascading Style Sheet. CSS web designers can change the colors, fonts, animations and websites. They look good. LESS – a CSS pre-compiler to make working with CSS easier and add functionality SASS – a CSS pre-compiler to make working with CSS easier and add functionality
- Programming languages Languages of the programming language to communicate and what to do in it. Languages in different languages (English, Spanish, French, Chinese, etc.) have a variety of programming
languages. Not better than the other. Developers usually make a couple better than others, because they are merely talented. The following are just a few of their backing and languages
- JavaScript – used by all web browsers, Meteor and lots of other frameworks
- Coffee script – is a kind of “dialect” of JavaScript. It is viewed as simpler and easier on your eyes as a developer but it complies (converts) back into JavaScript
- Python – used by the Django framework and used in a lot of mathematical calculations
- Ruby – used by the Ruby on Rails framework
- PHP – used by WordPress
- Go – newer language, built for speed Google Developer Guidelines — 200 - millisecond response time and a one-second top of fold page load time, more than a subtle hint that speed should be a primary goal for every webmaster. Now that we are aware page performance is very important to Google, how do we as digital marketing professionals work speed and performance into our everyday SEO routine? A first step would be to build the data source. SEO is a data-driven marketing channel, and performance data is no different from positions, click-through rates (CTRs) and impressions. We collect the data, analyze, and determine the course of action required to move the metrics in the direction of our choosing. With page performance tools it is important to remember a tool may be inaccurate with a single measurement. I prefer to use at least three tools for gathering general performance metrics so I can triangulate the data and validate each individual source against the other two. Data is only useful when the data is reliable. Depending on the website I am working on, I may have access to page performance data on a recurring basis. Some tool solutions like DynaTrace, Quantum Metric, Foglight, IBM and TeaLeaf collect data in real time but come with a high price tag or limited licenses. When cost is a consideration, I rely more heavily on the following tools: Google Page Speed Insights — Regardless of what tools you have access to, how Google perceives the performance of a page is really what matters. Pingdom.com — A solid tool for gathering baseline metrics and recommendations for improvement. The added capability to test using international servers is key when international traffic is a strong driver for the business you are working on. GTMetrix.com — Similar to Pingdom, with the added benefit of being able to play back the user experience timeline in a video medium. WebPageTest.org — A bit rougher user interface (UI) design, but you can capture all the critical metrics. Great for validating the data obtained from other tools.
Evidence suggests that a good burial image can increase translation rates in a website. The best way to apply the signature based on the search terms is according to the relevant keywords. The simplest tool is to add 'alt' and 'title' tags to images. Technology recommended by Google Publication Guides. The 'Alt' tag describes the function of the image and its image. Tell us what's on the screenwriter's screenshots
- Update content regularly The simplest and simplest idea is that you would like a higher quality than Google. A very well-ranked blogger says, "I'm not paying attention to a ton of tons; I'm often trying to push as much of the content as possible."
- Watch broken links Web links are based on, and SEO's basics are on the background of your website. When someone clicks a link to a broken Web site, bad things will happen - the user's frustration, our credibility reduces, and our page rankings are detrimental. So, broken links is a very bad thing for SEO. Web Development Frameworks Web development frameworks are a starting point of items that a developer can use to avoid doing the simple or mundane tasks, and instead get right to work.
- Angular Angular is one of the latest web technologies designed specifically for developing dynamic web applications. With this framework, you can easily create front-end based applications without needing to use other frameworks or plugins How to create domain names? A domain name consists of two sections, separated by a period. For example, google.com, the first section is google and the second section is com, the second section of the domain name refers to the activity for which the site is used, so the word com refers to a company, the word net refers to a network, and the word org denotes to an organization, and there are hundreds of suffixes that have appeared to facilitate the process of managing sites, however, the most popular at the moment is the com domain, followed by the .net domain.[ CITATION tec 18 \l 1033 ]
Figure 1: Manage Domain Listings
It is responsible for user data, and programs running on the Internet use it to send SMS messages (datagrams). HTTP (Hypertexts Transfer Protocol) Hypertext transfer, used to transfer resources in the Internet, is the basic and popular method of transmitting data in the Internet, and it is mainly used to publish and receive HTML pages. HTTPs (HyperText Transfer Protocol Secure) Secure hypertext transfer, constitutes a secure version of the HTTP protocol, where the letter s stands for Secure, meaning secure, and the protocol guarantees a secure connection between the user's browser and the web server[ CITATION Qua20 \l 1033 ] DNS (Domain Name System) Domain Name System, this protocol follows a technique that links the IP number of the website to the name of DOMIN, which makes it easier to remember the name of the site, ease of access to it, search for it and ease of reading DHCP (Dynamic Host configuration Protocol) Host automatic configuration protocol, which automatically assigns IP to devices connected to the network. ICMP (Internet Control Message Protocol) Internet Control Message Protocol, used by operating systems on networked computers for error messages such as problems with the service being unavailable SMTP (Simple Mail Transfer) Sending simple mail. This protocol is one of the TCP / IP protocols and is used for receiving and sending e-mails FTP (File Transfer Protocol) File Transfer. This protocol is used while you download software and application updates on your device from the Internet, as this is the FTP function.
Figure 2: The communication Protocol What is the server: The server is not much different from regular computers, as it contains almost all the components of the computer, but it differs in that its components are often larger and its capabilities stronger. The most important of these capabilities is its high-speed Internet connection, a constant power supply, in addition to a strong cooling system because the server will work 24 hours a day, all days of the year. Example of server in website field The Web server: On the other side of the communication channel, is the server, which serves the document as requested by the client. The server appears as only one device by default: This is because it could actually be a collection of servers, load sharing (load balancing) or a complex piece of software interrogating other computers (such as a cache, database server, or e-commerce servers), To create the document in whole or in part on demand As mentioned above, a server is a PC with some additional features. Therefore, the components of the server are not very different from the components of regular computers. The following are the major hardware components of the server:
- Case: the computer box, which is a folder or box that houses all of the server's components.
- CPU: The CPU is the server's brain, and it is in charge of performing the majority of tasks as well as controlling the server.
- RAM: This is a type of storage media that is extremely fast and stores the programs and files that are currently running.
- Storage Device: This is where files are saved, and there are two types: hard disk drives (HDD) and solid-state drives (SSD).
- Cooler: It is a fan or an integrated system that is in charge of cooling the processor and the rest of the server components.
