HND Level 4 Unit 10 Website Design and Development Assignment 1, Essays (university) of Web Design and Development

Download HND Level 4 Unit 10 Website Design and Development Assignment 1 and more Essays (university) Web Design and Development in PDF only on Docsity!

Website Design

and Development

Assignment 1

Unit - 10

Table of Contents

• P1 Domain Name System
• P2 Communication Protocols, server hardware, operating system, web server software
• P3 Front-end and Back-end website technologies
• P4 Online website creation tools and Custom-built sites
• M1 Impact of web development technologies and frameworks
• M2 Influence of search engines on website performance
• M3 Tools and techniques available for custom built website development
• D1 Technologies and tools chosen
• References
• Picture links

Third-level domain

The third-level domain is the part that is found on left of the second-level domain. For example in www.youtube.com , www is the third-level domain. The most used third-level domain would be www. Registration and management of Domain Names Internet Corporation for Assigned Names and Numbers, mostly known as ICANN is a non-profit organization responsible for a lot of functions that helps the Internet to run smoothly. This includes managing and coordinating IP addresses, domain names and DNS. It is also responsible for accrediting registrars like GoDaddy. Registrars are independent companies that allow the public to purchase and register domain names. When you purchase a domain name, it must also be registered with ICANN. ICANN required registrars collect information about every purchaser like name, address, phone number and email. This information is also referred to as WHOIS data. As a governing body, ICANN’s goal is to provide accurate and timely access to WHOIS data. To accomplish this, they accredit registrars that work under contract with ICANN. WHOIS is a term used to describe all of the purchaser info collected and maintained by registrars, which then then make available to public. Anyone can use a WHOIS lookup to search for the owner of a domain name assuming that it is not privately registered. In addition, ICANN periodically assesses the effectiveness of WHOIS to determine whether it promotes consumer trust, safeguard registrant data and meets legitimate need of law enforcement. Types of DNS Servers

Recursive resolvers

A recursive resolver (also known as a DNS recursor) is the first stop in a DNS query. The recursive resolver acts as a middleman between a client and a DNS nameserver. After receiving a DNS query from a web client, a recursive resolver will either respond with cached data, or send a request to a root nameserver, followed by another request to a TLD nameserver, and then one last request to an authoritative nameserver. After receiving a response from the authoritative nameserver containing the requested IP address, the recursive resolver then sends a response to the client. During this process, the recursive resolver will cache information received from authoritative name servers. When a client requests the IP address of a domain name that was recently requested by another client, the resolver can circumvent the process of communicating with the nameservers, and just deliver the client the requested record from its cache

TDL nameservers

A TLD nameserver maintains information for all the domain names that share a common domain extension, such as .com, .net, or whatever comes after the last dot in a url. For example, a .com TLD nameserver contains information for every website that ends in ‘.com’. If a user was searching for google.com, after receiving a response from a root nameserver, the recursive resolver would then send a query to a .com TLD nameserver, which would respond by pointing to the authoritative nameserver (see below) for that domain. Management of TLD nameservers is handled by the Internet Assigned Numbers Authority (IANA), which is a branch of ICANN. The IANA breaks up the TLD servers into two main groups: Generic top-level domains: These are domains that are not country specific, some of the best- known generic TLDs include .com, .org, .net, .edu, and .gov. Country code top-level domains: These include any domains that are specific to a country or state. Examples include .uk, .us, .ru, and .jp. There is actually a third category for infrastructure domains, but it is almost never used. This category was created for the .arpa domain, which was a transitional domain used in the creation of modern DNS; its significance today is mostly historical

Root nameservers

The 13 DNS root nameservers are known to every recursive resolver, and they are the first stop in a recursive resolver’s quest for DNS records. A root server accepts a recursive resolver’s query which includes a domain name, and the root nameserver responds by directing the recursive resolver to a TLD nameserver, based on the extension of that domain (.com, .net, .org, etc.). The root nameservers are overseen by a nonprofit called the Internet Corporation for Assigned Names and Numbers (ICANN). Note that while there are 13 root nameservers, that doesn’t mean that there are only 13 machines in the root nameserver system. There are 13 types of root nameservers, but there are multiple copies of each one all over the world, which use Anycast routing to provide speedy responses.

Authoritative nameservers

When a recursive resolver receives a response from a TLD nameserver, that response will direct the resolver to an authoritative nameserver. The authoritative nameserver is usually the resolver’s last step in the journey for an IP address. The authoritative nameserver contains information specific to the domain name it serves (e.g. google.com) and it can provide a recursive resolver with the IP address of that server found in the DNS A record, or if the domain has a CNAME record (alias) it will provide the recursive resolver with an alias domain, at which point the recursive resolver will have to perform a whole new DNS lookup to procure a record from an authoritative nameserver (often an A record containing an IP address). Cloudflare DNS distributes authoritative nameservers, which come with Anycast routing to make them more reliable.

P2 Communication Protocols, server hardware, operating system,

web server software

Communication protocols It can be said that the computers are just like humans as they also follow rules and protocols for communication. Communication protocols are a system of formats and rules that allows communication between computing systems. They are critical in telecommunications systems because they are created for efficiency and consistency. These protocols can cover error detection, error correction, authentication, data transmission and signal transmission. Communications protocols can be implemented in both hardware and software. There are many ways the computers can communication by using different protocols available. There are many types of protocols used in order to allow communication between two devices across the network. Here are some of them. ➢ Transmission Control Protocol (TCP): TCP is one of the popular communication protocol which can used for communication between two devices across the network. The message that is sent between the devices are divided into series of packets when the message is sent from the source and those packets are then reassembled when it reaches the destination. ➢ Internet Protocol (IP): IP is usually used along with TCP. This purpose of this protocol is to deliver data packets between the source device and destination device by checking the IP address information within the packets. ➢ Simple mail transport Protocol (SMTP): it is a standard protocol for sending and receiving emails. ➢ File Transfer Protocol (FTP): this protocol is used for transferring files and programs from one device to another.

HDD 50 GB available space 100 GB available space Operating System Operating System (OS) is a software that operates in the background of a computer system. It allows users to interact with the computer without having to know the machine language. Without OS, the computers will not be user friendly and it would be impossible for people to work on the computers daily. Every computer system needs at least one OS to load and run programs and applications like MS Office, Browsers, Games, etc. Below are some popular operating systems for the computers.

Windows

Windows is one of the most used and familiar operating system. It started from Windows 95 back in 1995 and the latest OS released is Windows 10 and Windows 11 is going to be released soon too. The reason why it is most used is because it is user-friendly and the start-ups and loading operation is fast too. For basic website design and development with Windows OS, only an editor like VSCode is needed therefore it is easy and cheap.

Mac OS

Even though Apple computers are more expensive than the computers that uses Windows, to some individuals, Apple seems to have better quality and flexibility. For back-end web development, MacOS is similar to Linux which many servers operate on, thus, the development is easier.

Linux

Most of the developers prefer using Linux as it is open source and also due to its ability to install everything quickly that developers need for their environment. Even Andriod OS, one of the most used mobile OS, is built upon Linux. Web server software Web server is a type of computer program that is utilized on a computing server. The basic function of the web server is to store and deliver requested web contents to the users. This process is done by utilizing Hypertext Transfer Protocol (HTTP). The web contents consist of images, texts, videos, stylesheets and etc. A web server not only supports HTTP, but also SMTP for sending emails and FTP for transferring files and storing data. The primary purpose of the web server is to display website content to the users. When the user request to view a website by entering URL in the web browser address bar, the web browser sends HTTP request to the Internet to view the web page that corresponds to the address that is entered. DNS converts the entered address into an IP address and after that directs to a web server that hosts the web page. The web page is then returned and displayed on the user’s browser. Nowadays, Apache server is the most widely used web server in the world as it is an open source software which can be installed easily on almost all the operating system available. Developed by the Apache Software Foundation, it manages almost all websites available today as it is secure, reliable and fast. Nginx is also an open source web server software like Apache. Even though it was initially released as a webserver, it is now also used as a HTTP cache, reverse proxy and load balancer. It was developed to provide low resource usage, stability, simple configuration and high performance. Instead of creating new processes for each web content requests, Nginx uses an uses an offbeat, event-driven method where requests are managed in a single action.

Common web development technologies Since computers cannot communicate with each other like people do, they have to rely on codes instead. Web development technologies consists of markup languages and multimedia packages that computers use to interact with other computers. When creating a website, the developer should know and be familiar with these languages, which are:

HTML

HyperText Markup Language (HTML) is a front-end technology and it is used for creating the website’s structure and layout.

CSS

Cascading Style Sheets (CSS) is also a front-end technology and is a crucial part of website development. CSS is used for styling and formatting the website. It describes how the website is displayed and its layout. It is used along with HTML to add colors texts, background, change font styles, sizes and etc.

JavaScript

It is the programming language of web development and is used to add interactive elements to the websites to engage with the users.

MySQL

MySQL is a database query language and is used for back-end development. Using this allows the developer to collect data of anything and store them in tables.

PHP

PHP Hypertext Preprocessor is a scripting language for backend development and is used for creating dynamic webpage that can interact with databases. Frameworks Framework is a set of pre-written resources and tools that are used by developers when creating websites and web applications. It can be used as a basic when starting website creation. The purpose of framework is to offer a standard structure to developers so that the developers do not have to start writing the whole website from scratch.

Bootstrap

Bootstrap is also one of the popular front-end frameworks that developers use for easier and faster web development.

Node.JS

Node.js is perfect to use when creating a lightweight and structured website.

Ruby on Rails

Ruby on Rails is a dynamic web application framework and is mainly used for developing a high- speed application.

Angular JS

Angular is an open-source front-end web development framework managed by Google Angular Team.

P3 Front-end and Back-end website technologies

When developing a website, it has two sides: front-end and back-end. Front-end development focuses on the visual part of a website which users can see, touch and experience. Font-end development utilizes technologies like HTML, CSS, JavaScript and etc. Back-end development focuses on the part of the website that cannot be seen by the users. The back-end is normally made up of three segments, which are server, application, and database. Back-end development usually uses technologies like MySQL, PHP and etc. Front end and back end are like the two sides of the same coin. By combining both of them, the developers can create dynamic websites like online shopping and online banking. For example, if a person orders an item, they have to visit the website and interacts with the front-end. After that person has entered their information, the application stores the information in the database which is built on the server. Front End Technologies

JavaScript

JavaScript is a front-end scripting language used when creating a dynamic website. The developers can create interactive elements for the website with JavaScript. There are two methods to utilize JavaScript in an HTML file. The first method is to write all the JavaScript codes in the same HTML file and the other method is to write the codes in a separate file and then linking it with the HTML file. The JavaScript file can be identified by the file extension ‘.js’. Even though JavaScript is usually used to interact with objects in HTML, it can also be written to internet with objects that are not in HTML like CSS properties and browser plugins. In order to write JavaScript, the developers only need basic text editor tools like Notepad for Windows and Gimp for Linux.

CSS

Cascading Style Sheets is a design language that is used to narrow down the process of making web pages look colorful and attractive. By using CSS, the developers can change the color of the texts written on the webpage, font-size, font-style, color of the background, size of images, alignments of texts and many more effects. There are three types of CSS: inline CSS, internal CSS and external CSS. For inline CSS and internal CSS, the codes are written in the same HTML file while for external CSS, the codes are written in a separate file, which is then linked with the HTML file by using HTML tags. The CSS file can be identified by the extension, ‘.css’. Like JavaScript, CSS codes can written in simple text editor tools.

HTML

HyperText Markup Language is the most important markup language used when creating a website so that the information can be displayed. Most websites are made up of texts, images and other information and HTML can be used to display them to the users through the web browsers. The extension for html file can be ‘.htm’ or ‘.html’. HTML files can also be written in simple text editor tools, just like CSS and JavaScript. Most of the young developers confuse HTML as a programming language even though it is a markup language. Back End Technologies

PHP

Hypertext Preprocessor (PHP) HTML is an open source scripting language that is widely-used for web development. PHP codes can be embedded into HTML codes to create dynamic elements in web pages. Developers have unlimited control over the web server by using PHP. They can either process a credit card or add user information to the database, by writing PHP codes in one HTML file.

<?php> Echo “ Today is “. date(“l”). “. “; ?> Here is the latest news. In the example above, the code, <?php informs the web browser to use PHP program to execute all the codes that follows till the closing tag, ?>. The texts or codes that is written outside the PHP tags will be interpreted as HTML codes. The text ‘Here is the latest news’ is just an output to the browser. The code, .date(“l”) is a built-in PHP date function that will display the current day of the week. On the user’s browser the output will look like this: Today is Monday. Here is the latest news.

MySQL

MySQL is a relational database management system that is based on SQL, Structured Query Language. SQL is used for adding, deleting and modifying data in the database. MySQL is open source and can be found on web servers. The website that utilizes MySQL might have web pages that need to access information from database. This type of pages are called dynamic web pages as the information for each page is selected from the database and is displayed on the page. Presentation Layer The presentation layer from OSI seven layers is responsible for taking in the requests sent from the user and displaying the requested information on the browser by converted the data into a user-friendly way. After receiving the request from the user, it then forwards the request to the application layer. The presentation layers that is comprised of HTML, CSS and JavaScript is transmitted to a device through a browser and is then displayed to the user. The relationship between presentation layer and front-end development is that they are used for interacting with the users. The presentation layer is created from the front-end development. Application Layer The application layer, sometimes referred as business layer, acts as a link between presentation layers and database layer and is responsible for synchronizing communication between those two layers. The application receives the request from the presentation layer and allows the user to access the data from the server that is hosting the requested information. Figure 3.1 Presentation layer and Application layer

Here is a list of most-used online website creation tools:

• Adobe Dreamweaver
• Sublime Text
• Notepad++
• Flutter
• Atom
  • InVision cloud
  • Visual Studio Code
  • Google web designer
  • Microsoft Expression Web 4 Below are the explanations about some of the tools.

Adobe Dreamweaver

Adobe Dreamweaver is a simplified coding engine that allows real-time previews of the contents as the developers make edits to the code. Developers can also star their next responsive website project from a template or build from scratch. And with Git support and code hints, they can custom-build all kinds of HTML assets like emails, E-commerce sites, portfolios, blogs and many more.

Atom

Atom is an open source, hackable desktop code editor from GitHub. The developers can use this tool to access thousands of open source packages, explore text edit themes built by the atom community and work in CSS, HTML and JavaScript. They can also run Teletype for Atom to share workspaces for synchronous code editing.

Sublime Text

Sublime text is one of the popular code editors that is useful for website design and development and it can be downloaded and installed for free on Windows, Mac and Linux. It has many plugins and packages to customize the software according to your own liking. Differences Online website creation tools Custom built sites Design flexibility Limited Unlimited Performance Fast Slow Functionality Limited Unlimited User Experience (UX) User-friendly Might not be user-friendly User Interface (UI) User-friendly Might not be user-friendly

M1 Impact of web development technologies and frameworks

Impact of web development technologies

Web design

Creating the whole web design from start to finish by writing custom codes only will make the designing process much longer than using frameworks. However, most frameworks are created for the speed of execution and not for creating the results that you want. By using technologies like HTML, CSS and JavaScript to write all the codes, it helps the developers to understand and learn more about these codes. Mastering to understand the codes will allow developers to enhance their creative minds and make websites that looks unique and attractive.

Functionality

It might take time for you to research about the basic functions and services a website should have and it will even take longer to write codes for it. However, once you have mastered all the codes for functions and services, anything is possible. Instead of relying on the function code written in the frameworks, you can add more functions of your own that might be suitable for your business. You can add more functions and services depending on the user experience as it is unlimited.

Management

Since you write all the codes by your own ideas and inspiration, the whole thing will be familiar to you and if want to make some changes to the code it would be a piece of cake since you understand everything. However, if you are working in a team, it can cause some inconveniences since everyone will have to try to understand all the codes if they want to edit something and it might results in some bugs and errors if someone tries to abruptly change the code without try to understand first. Impact of frameworks

Web design

Using frameworks for web deign will be fast and take less time as the codes are written already so you just have to copy paste the whole thing into your editor. You don’t need to spend time writing CSS codes to format the webpage and instead you can focus on other important stuff. Some developers may not have creative ideas for designing the website so the frameworks allow them to take the codes that looks decent. Even if they just take the default class and don’t bother to change any further to make the design look better, at least it will be better than them trying to do it themselves. However, the websites that uses frameworks look similar to each other with only minor differences like business name and their products.

Functionality

In frameworks, the functions and services are pre-written so you don’t have to write the basic functions and services that a website should have. Not only it saves time, it also allows you to either add more functions or delete some of them according to the user requirements. These frameworks will be compatible for any browsers are they are well-tested in all of the browsers unless you add more customization but the core classes should be fine in all browsers. However, there might be still be limits for the amount customization you can add to the pre-written codes. But if you make a mistake when editing pre-made function or when adding new functions, you just have to copy paste the framework again. You don’t have to go through the trouble of looking for bugs and errors.

Management

When it comes to building large front-end applications, using frameworks takes lesser work than writing all the codes. They are also much more organized so when you want to customize

Ways to improve the website’s index value and rank

Keyword research

Keywords are the words and phrases that people type into search engines to find what they are looking for. Keywords are important because it set the entire foundation for search engine optimization. The basic goal of SEO is to rank your pages for keywords that your target audience or customers are searching for and if you are not ranking for keywords that actually get searched, then your SEO efforts are kind of meaningless. Keyword research is the process of finding keywords that people are inputting into search engines. In order to choose keywords that are worth targeting, the first thing to do it so check if your keyword has search demand. Search demand represents the volume of monthly searches made for a keyword and this is measurable with a keyword metric called ‘search volume. By knowing what kind of keywords people uses when search for contents that are related to your business, it can bring more visitors to your website.

Get to know your users

Everyone thinks that SEO is just about on page or link building. But here is a fact, Google wants to rank what is best for users. The way you can get to know what is best for your users is by surveying them. By using tools like SurveryMonkey and Hotjar, you can find out what your users love and what they don’t. By adapting your content, services, products, you are much more likely to get more traffic from Google because you are creating the best user experience. These days Google is looking at what is called use metrics. Those are things like people coming to your site after they click, they search for a keyword and they click on your listing. And Google even look at how many percentages of those people are clicking the back button right away. That tells google that people are not liking what they are seeing. Google also look at things like, time on site, bounce rates, pages per visitor and even how long your website takes to load. By surveying people, you will get what is ticking people off and why are they leaving and not buying from you. Fixing these things doesn’t just help improve your conversions, but it also helps improve your ranking in Google because you are providing the best user experience.

Focus on content

Google has an update called Hummingbird and with Hummingbird what they decided to do is, website that just have content on everything won’t do as well as websites who focus on one single topic and are super thorough. For example, imagine you have a web page around dating and it is talking about Five Ways You Can Land a Dream Date. If you end up breaking down your web page into parts like; go to Match.com, sign up and you will find a match after you created a profile, the website is not going to do that well. However, if you write a web page that tells things like; How to create a profile on Match.com, the ideal picture, the ideal description and how to be funny and how they should respond to people and engage with them, and go really in-depth and explain every little thing that they should do, people will find it very informative and useful.

Make sure the design is on point

Studies shows that people largely judge your site based on design first and content second. So, if your site looks messy and too confusing with many colors used, you can expect a really high bounce rate. It doesn’t also means that your site needs to win design awards or look fancy. In fact, a simple design tends to work better than the complicated ones. Having a clean design can make it easy for visitors to read and skim.

Optimize title tag

A title is an HTML markup that specifies that title of a web page. The two most common places where it can be found are in search results pages and in the browser tab. Title tag is important because it influences your click-through rate in Google search results. And for quite some time, SEOs have hypothesized that higher click-through rates can increase the site ranking. It is a good idea to optimize for a click-through because more clicks mean more traffic and more traffic means more visitors and customers. Title page optimization can be done by creating a title that is click- worthy and not clickbait. And keep the title within 50–60 characters.

M3 Tools and techniques available for custom built website

development

Nowadays, there are many tools and techniques that developers can use to create custom built website. In fact, there are so many of them that even developers cannot stick to using one tool only. They have to use all of them to make a very cool looking website since not every tool can offer the functions that developers want. Below are pros and cons of some the website design tools. Adobe Dreamweaver

Pros

❖ Does not have to type all the codes with the help of auto-complete feature ❖ Spell checker and error syntax checker feature shows mistakes clearly ❖ Preview mode allow users to see real-time design ❖ Helps beginner understands coding easily ❖ Easy to find where different languages are written ❖ Users receive auto-fill code suggestion

Cons

❖ System is a bit complex ❖ Setup file is large ❖ Monthly subscription is expensive ❖ Not having enough RAM will result in the app slowing down and crashing ❖ Takes time to learn the interface ❖ Not browser-based so there can be differences between preview in the app and browser Sublime Text

Pros

❖ Can handle large projects with million lines of codes ❖ Auto-complete feature saves time ❖ Color-coded syntax makes it easier to read ❖ Free trial is unlimited ❖ Tab selection make it easy to compare multiple files at once ❖ Has many shortcuts, which save time ❖ Multiple selection allows the user to change many similar things at once with ease

Cons

❖ Constantly asks the user to buy the license if they are using free version ❖ Only few plugins and extensions available ❖ No auto-saving ❖ Lacks printing plugin ❖ Too many updates and features Atom

Pros

❖ Free to use ❖ Clear interface ❖ Can handle large files without crashing ❖ Support extensions ❖ Has clear color-coded syntax

D1 Technologies and tools chosen

If I were to design and develop a website for a company or for my own business, I would choose Bootstrap to get basic frameworks and use Sublime Text to add my own customization to the frameworks. To design a visual mock-up for my website, I will use Photoshop. Photoshop offers a large number of tools and technique to quickly and easily create and iterate over a UI design without having to tamper around with code. It was never built to be a UI design tool, its core strength has always around photography and editing photos however, due to its layer-based editing system, it will become easy to use once you get familiar with it. With Photoshop, Brand Logos can be created and photos can be cropped in order to fit the website layout. As for the languages, I will use HTML5, CSS3 and JavaScript to design the website. HTML5 is the latest version HTML and it works on all the browsers. CSS3 is also the latest version of CSS with many new features which makes it easier to understand the codes. JavaScript will be use to add interactive elements to my website. Bootstrap will also be used to add basic frameworks to my website. Bootstrap is chosen because it can reduce the amount time it will take for me to write codes for the whole layout and designs. It also supports both HTML5 and CSS3. For each design, there is an extensive number of components available and it also adds responsivity to the website so that the website can adapt to any device. It also has responsive grid that allows me to quickly layout my web page by using the bootstrap grid by creating columns and rows. There are many of text editors available that allows me to create web pages but if I were to choose one of them it would be Sublime Text Editor. The reason why I chose Sublime Text is because it can support large project files and it also allows user to work in multiple files at once with tab selection. Even though there is no auto-save feature, I can see if my files have been saved or not by looking at the icon in the tab selection bar. And when if there is so many closing tags at one place, I can check which closing tag is related to which opening tag by just clicking on one of them. Due to the color-coded syntax, it also allows me to see the differences between codes like whether the written code is an attribute or a tag or a value. With many shortcuts and auto-complete feature available, it can shorten the amount of code I have to write. For example, If I want to copy the codes from the line above to the line below, I can simple click “Ctrl+Shift+D” and the code will be copied and pasted without having to move the cursor. As for the auto- complete feature, if I write an opening tag closing tag will be written automatically, therefore I won’t have to spend time writing the closing tag code. And if I want to see the preview of my design, I can right-click on the document and click on “open in browser” to open the file on my default browser, instead of opening the html file from the file manager.

References

https://www.trustradius.com/products/sublime-text/reviews?qs=pros-and-cons https://www.trustradius.com/products/atom/reviews?qs=pros-and-cons https://brandongaille.com/16-adobe-dreamweaver-pros-and-cons/ https://www.techradar.com/news/best-web-development-tool/ https://www.mtu.edu/umc/services/websites/seo/ https://www.searchenginejournal.com/11-seo-tips-tricks-to-improve-indexation/288521/ https://www.icecubedigital.com/blog/advantages-of-custom-built-sites-vs-online-website- builder-tools/ https://www.websitebuilderexpert.com/website-builders/free/ https://e-tutes.com/lesson2/session-presentation-and-application-layers/ https://www.kenzie.academy/blog/front-end-vs-back-end-whats-the-difference/ https://economictimes.indiatimes.com/definition/web-server https://www.freecodecamp.org/news/which-operating-system-would-be-better-for-web- development/ https://www.techopedia.com/definition/25705/communication-protocol https://www.alemba.help/help/content/topics/prerequisites/prereqs/prereq%20web%20svr.htm