Download Website Development: Server Technologies, Hosting, and Management Services and more Assignments Web Design and Development in PDF only on Docsity!
Higher Nationals Assignment Brief – BTEC (RQF) Higher National Diploma in Computing Student Name/ID Number Do Tran Trong Hieu Unit Number and Title 10: Website Design & Development Academic Year 2020 - 2021 Unit Tutor Nguyen Ngoc Tan Assignment Title BKC Antiques and Auctions Issue Date 20/06/ Submission Date 05/07/ IV Name & Date Submission Format The submission is in the form of two documents/files:
- A technical information report for the IT administrator
- A 15-20 slide presentation to be presented to the owners of BKC with accompanying notes.
- A design document for the website
- Evidence of a multipage website for BKC
- Documentary/visual supporting evidence for the website to include a test plan and critical evaluations of the process Unit Learning Outcomes LO1 Explain server technologies and management services associated with hosting and managing websites. LO2 Categorize website technologies, tools and software used to develop websites.
LO3 Utilize website technologies, tools, and techniques with good design principles to create a multipage website. LO4 Create and use a Test Plan to review the performance and design of a multipage website. Assignment Brief and Guidance Scenario and activity You work for a creative web solutions and marketing company as a designer and content developer. A client ‘BKC Antiques and Auctions’ has asked if you could provide a web-based solution to support the digital marketing and selling of their antique and auction items. There is some resistance by the owners who do not see the benefit of having a website or online provision as the client is a very traditional ‘brick’ only based company. Lack of understanding about the costs, mechanics, and benefits of ecommerce, has held them back. However, two of their competitors have started selling antiques online and are getting much wider interest internationally, a market that BKC need to embrace if they are going to grow their customer base over the next two years. You will be expected to work alongside their newly appointed IT administrator who will be taking over after the project once a solution has been implemented. As the IT administrator has a limited knowledge regarding websites, your first task is to provide an understanding about server technologies, hosting, performance, user experience and requirements in terms of hardware and software. LO1 and LO Create a technical information report with sections addressing the following key areas for the IT administrator: ● DNS – purpose and types, including explanations on how domain names are organized and managed ● Communication protocols, the purpose and relationship between server hardware, operating systems and web server software with regards to designing, publishing and accessing a website ● Front-end and back-end website technologies, review the capabilities and responsibilities of the technologies. Ensure that these are explained to in your report to the administrator in terms of how these relate to the presentation and application layers. ● 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
can 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.
Assignment Brief
Task 1 - Server technologies and management services associated with hosting and managing websites (LO1) Differentiate the communication protocols, server hardware, operating systems and web server software with regards to designing, publishing and accessing a website. The Internet The Internet is a global WAN – a network of networks It is based on a client-server network model Hundreds of thousands of web-servers throughout the world provide resources and services to millions of clients Communication between computers on the Internet largely takes place using the TCP/IP protocol, although other protocols, such as FTP, are also used How the web works The client-server model Client and server operate on machines which are able to communicate through a network The server waits for requests from a client Server receives a requests from a client Performs a the requested work Or lookup the requested data And send a response to the client Servers: file servers, web servers, name servers Clients: browsers, clients Web browsers and servers A browser: is a program that can retrieve files from the world wide web and render text, images, or sounds encoded in the files. Ex: IE, Chrome, Mozilla A web server: is an application which waits for client requests, fetches requested documents from disk and transmits them the client. Apache MySQL The Application Layer Protocols Layer 7 of the OSI 7 Layer model is called the application layer. This layer defines Application layer protocols. The most common application layer protocols used between clients and web servers include:
DNS - A domain name system is a stunning technology. It helps us open IP addresses without delay. We can easily write the domain name and have DNS to find the IP address of the domain we are writing to. As in your phone's book, as well, as you want to find Mike, and you write "Mike", you do not want to remember his actual number, is it not excellent? DNS is an essential part of the Internet. It manages all the queries to IP addresses. In this way, it can detect various devices connected to the network. Information request If you want to access our website and you know the domain name. If you are writing it in your browser, if it first goes to your previous location, check for local caches, and the DNS query will not be found to find the answer. Recursive DNS servers If you do not go to the previous page, your computer will answer the reversed DNS server of your Internet service provider. You can get the result. If they do not, they will want to find information in a different location. Root name servers Your query can take a long way. The next step are the servers. They are the same as the intermediate ones. They do not know the answer, but know where to find it. Top-Level Domain (TLD) name servers Name servers will be forwarded to the left-right-side readings and the top TLD for the server (.com or other). These TLD clients will guide you at the right time with the correct server. Authoritative DNS servers Check DNS records for DNS records for information. There are other records, for example, we request our website to report the IP address for the site. Retrieve the record We provide a website with a record track record from an e-mail server. Its native memory is stored. If anyone wants a hostile record easily for the same website, if there is information already, it is not
necessary to travel through all these steps. All of these data expire. In this way, users will receive up-to- date information. The final answer Now it's sending this server to a report it to your computer. To save the computer, read the IP address and give your information to your browser. The browser connects to the web server, you can finally see the site. What is a domain name? A domain name or domain is a structural label that connects to a specific IP (Internet Protocol) address of a web hosting web host. Here is an example: https://domain.me is a domain name on our own website. We declare that you will see us. Let's look at the structure of the domain. Define the types of DNS and the uses of it, with clarifications on how domain names are structured. DNS TLD’s Examples of top level domains include: http://www.iana.org TLD’s (Top Level Domains) know about the location of a DNS server for individual domains but only forward the request rather than resolve the request. Examples of top level domains include: .com –commercial companies (Verisign) .org –non-commercial (public interest registry) .gov –US government use. .edu –education use. .ac.uk –UK academic/educational use. HTTP Server The term "web server" refers only to the HTTP server software that provides the functionality of the machine. HTTP is the web and HTTP server protocol, such as Microsoft's IIS and open source apache servers, accepting requests from the browser's browser, and replying HTML documents (web pages) and files. It also has a server (CGI script, JSPs, ASPs, etc.) and performs tasks such as searching databases and credit cards. Built in to hardware too
fast 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. Use multiple tools to capitalize on specific benefits of each tool, look to see if the data from all sources tells the same story. When the data is not telling the same story, there are deeper issues that should be resolved before performance data can be actionable. Identify and explain the common web development technologies and frameworks. Explain the tools and techniques chosen to the web application and hence justify, by giving reasons, why a web application is suitable for the given scenario. Web development comes with a huge set of rules and techniques every website developer should know about. If you want a website to look and function as you wish them to, you need to get familiar with web technologies that will help you achieve your goal. Developing an app or a website typically comes down to knowing 3 main languages: JavaScript, CSS, and HTML. And while it sounds quite complicated, once you know what you are doing, understanding web technology and the way it works becomes significantly easier.
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. Task 2 - Categories website technologies, tools and software used to develop websites (LO2)
Define the relationships between front-end and back-end website technologies and explain how the front-end and the back-end relate to presentation and application layers. Backend developer is responsible for this ‘not visual’ part of application. If there is need to save some information, it creates connection to DB and can do CRUD (create, read, update, delete) operation on records. Frontend developer is responsible for ‘visual’ part of application. He creates interface that you often clicks on. Relationship between them is really close. If you want to develop good product, you have to have harmonious team. Cooperation between those 2 types of developers is important at the beginning of project. They has to establish some data schema and authorization type for project Both are necessary components for a high-functioning application or website. It’s not uncommon for companies to get tripped up by the “front-end versus back-end” divide when trying to navigate the development of new software. After all, there are a growing number of tools on the market aimed at helping developers become more “full stack” oriented, so it’s easy for non-technicians to assume there isn’t a big difference between front- end and back-end specialists. Front-end and back-end developers do work in tandem to create the systems necessary for an application or website to function properly. However, they have opposite concerns. The term “front-end” refers to the user interface, while “back-end” means the server, application and database that work behind the scenes to deliver information to the user. The user enters a request through the interface. It’s then verified and communicated to the server, which pulls the necessary data from the database and sends it back to the user. Here’s a closer look at the difference between front-end and back-end development. What is Front-End Development? The front-end is built using a combination of technologies such as Hypertext Markup Language (HTML), JavaScript and Cascading Style Sheets (CSS). Front-end developers design and construct the user experience elements on the web page or app including buttons, menus, pages, links, graphics and more.
WordPress update breaks a template site that hasn’t been maintained by the template developer, you’re out of luck and are stuck running an older version of WordPress. This makes your site more vulnerable to hackers. Search engine optimization is better in custom-built sites. Web developers who build sites from scratch have the technical knowledge to make sure your site is optimized for search engines. It’s generally easy to see if a website was created using a template, or if it is custom-built. The first step is to view the site’s source code. Here’s how to access the code: In Google Chrome: Open the site and go to the “Tools” menu, and select “view source”; alternatively, hit Ctrl + U In Internet Explorer, Mozilla Firefox, or Apple Safari: Right-click on the website and choose “View source” You’ll see a page of source coding, which may be pretty intimidating if this is unfamiliar territory – but don’t worry, this isn’t difficult! Toward the top of the page, in the paragraph that begins
, scan through the code and look for the “generator” meta tag to see which Content Management System is being used. Examples: A website built on the WordPress platform may contain this: <meta name=”generator” content=”WordPress 3.8.1″ />. A website built on the Joomla platform may contain this: <meta name=”generator” content=”Joomla! 1.5 – Open Source Content Management” /> Compare and contrast the tools and techniques available to design and develop a custom-built web Applications. Website designing requires many important tasks like discipline production in website and website maintenance. While designing a simple or modern web page, you must have many things in your mind. There are many important website design area like: Web graphic design
Interface design Authoring User experience design Search engine optimization Standardized code and proprietary software Tools and technologies There are different tools and techniques used for designing webpage. It does not mean that all members in a team use the same tools and techniques for designing a webpage. While choosing your tool and technique for creating webpage, keep in mind all required things so that you will not face any problem in future. Tools those are used for website designing: Visual Studio Code Xampp Composer Simple technologies used for website designing are: HTML / CSS Javascript php Skills and technologies Bootstrap Framework: Laravel Page layout User interface design is totally affected by page layout. Page layout design of web page may be consistent or in consistent. For example, if you are designing a web page, you must set width and breadth same for each type of field. According to that page layout, units are sent to the web browser and which will be fitted into your browser display. Marketing and communication design Many type of markets are available that need to a website for successful run of their business. While designing website, you must keep in mind what type of website you are designing and what communication
There is a fundamental arrangement on our site. The principle objective is to tell the customer the best way to develop the structure before the site. Clients by and large maintain their own organizations. Proceed quickly on what they have to spotless and clean them. What occurs in the event that I don't utilize wireframes? By making a basic site structure, any natural situating can be immediately changed to address your customer's issues. A snappy clarification of what should be on the different pages of your site, regardless of whether it's a speedy layer on scratch paper. Components of a wireframe What to incorporate into a wireframe Consider the fundamental highlights when arranging every site page: header, footer, side sites and substance. From that point onward, consider extra components: Navigation Bars, Widgets and Buttons. When we have a thought regarding the components, we would now be able to begin our wireframe plan. All highlights of Wireframe are for the most part shown and take the accompanying focuses: There are many strategies to make a wireframe running from basic representations to a high constancy nearly completed wireframe. The apparatuses you choose to utilize rely upon individual inclination and undertaking prerequisites. A few people are searching for a less complex quick paced framework, while others are bound to trust mockups, in the event that they take a little longer time on the task scope. Each apparatus has its favorable circumstances and cares, and there is no "best" instrument for the wireframe. Any offices we use and any work for our benefit. HTML/CSS On the off chance that the HTML and CSS are in our expertise list, we can make a code and contact our photos. It's a less expensive device for wireframe on our site and offers notwithstanding frames.Creating
HTML wireframes may add time to your procedure from the time we start wireframe to the moment that we have customer endorsement. Be that as it may, it might well decrease extra correspondence and work after our wireframes are endorsed, since the outline has just been finished. Implement the designed system using PHP, JS and MySQL. Screenshots of important code lines with proper comments and user interfaces filled with sample data must be attached to the documentation. Apply a database design for the proposed system and provide the well normalized database design of the proposed system.
Website design for E-commercial
All Users (system-common interfaces) Home page Register page Login page (Using User Name, Password) Shopping page (To post forum)
Icons / Shortcuts
Functionalities
User Login All the system users will log in to the system by typing their user name and password on this interface Client profile This is the client’s profile page. For each client in my Online library System system they have their unique profile Client registration This web form is filled by the user or client operator
