





























Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
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
An overview of web design and development, focusing on server technologies, communication protocols, and search engine optimization. It covers the role of DNS servers, web communication protocols, recommended hardware requirements for web servers, and the importance of SEO in web design. Additionally, it discusses various website technologies, tools, and software used in web development.
Typology: Schemes and Mind Maps
1 / 37
This page cannot be seen from the preview
Don't miss anything!






























[Document subtitle]
Unit Number and Title: Unit-10 Web Design and Development Academic Year: 2022 Assignment Number: Assignment- 1 Student ID: PF Student Name: Aung Myo Thaw
LO1: Explain server technologies and management services associated with hosting and managing websites. P1 Identify the purpose and types of DNS, including explanations on how domain names are organized and managed. What is DNS? DNS is an essential part of the Internet. It manages to translate all the inquiries into IP addresses, and like this, it can identify different devices that are connected to the network. The Domain Name System (DNS) maps human-readable domain names (in URLs or in email address) to IP addresses. For example, DNS translates and maps the domain google.com to the IP address 8.8.8.8. Domain Name System (DNS) is a name resolution protocol that translates hostnames to IP addresses and vice versa. A DNS server is a host that runs the DNS service, and it is configured to do the translation for the user transparently by using TCP/UDP port 53. TCP port 53 is also used for DNS zone transfers. UDP 53 is used for DNS lookups and browsing. DNS is a hierarchical database where the data is structured in a tree, with the root domain (.) at the top, and various subdomains branch out from the root, much like the directory structure of a UNIX or Windows file system. Purpose of DNS Every device that is connected to the internet has its own IP address. DNS servers use name servers, which essentially act as a directory of IP addresses and domain names. These name servers also dictate how each domain name maps to an IP address. A single master name server would be massive and unwieldy, so there are tons of different name servers which store this information. Plus, domain names can each map to several IP addresses. So, when a human enters a web address, a DNS will match it with the IP address which computers can interpret. The process of DNS resolution involves converting a hostname into a computer-friendly IP address. For the web browser, the DNS lookup occurs "behind the scenes" and requires no interaction from the user’s computer apart from the initial request. Types of DNS Root server (also called a DNS root server or a root server for short) is responsible for fundamental functions when it comes to translating domain names into IP addresses: it answers client requests in the domain name system’s root zone (the root zone marks the largest layer in the DNS’ name space). Here, the root name server doesn’t execute the name resolution itself and instead informs the requesting client about which other name server (DNS server) it can obtain further information from regarding the desired IP address. It contains all the names and IP addresses of all the top-level domains (TLDs). This data belongs to an important function: the root server relies on this file if it names the name server that contains the necessary details of its request. But even if they only forward requests, root name servers are indispensable when it comes to name resolution. Without them, the DNS would not be able to function in its current form. A root server works on the domain name system’s root and is to some extent plays the most important role when it comes to registering and naming web addresses. Resolver also called a recursive resolver , is a server designed to receive DNS queries from web browsers and other applications. The resolver receives a hostname - for example, www.google.com
by the local network, an Internet Service Provider (IP), a mobile carrier, a WIFI network, or other third party. The resolver starts by looking in its local cache or that of the operating system on the local device - if the hostname is found, it is resolved immediately. If not found, the resolver contacts a DNS Root Server and receives details of a TLD Name Server. Via the TLD Name Server, it receives details of an Authoritative Name Server , and asks it for the IP that matches the requested hostname. When it receives the IP, the query is resolved. How domain names are organized and managed. Domain Names are host names that the Domain Name System (DNS), uses to identify and map to websites and other Internet Protocol (IP) resources. A good parallel would be to think of domain names as street names. Street names are important because they help people navigate. The IP addresses, on the other hand, are the geographical location of the streets themselves, The Domain Name System (DNS) is a hierarchical naming system that helps users to find their way around the internet. Registering a domain name by using GoDaddy.com GoDaddy is also known as a web hosting provider, but we can also buy a domain name from them. Step 1: Look up a new domain name first. If we haven’t come up with a good name yet or are assessing different options, GoDaddy has a nice set of extra features to help us out. We can use the Bulk Domain search to check a bunch of domain ideas for eligibility in a click. Or we can play around with their free domain name generator to get some alternative suggestions if our primary choice is already taken. If we are running a small business, going into a heated negotiation with some cyber squatters may not be the best investment of our time and budgets. Wait out and see if the other person forgets to renew their domain or abandons it so that we could snatch it then. GoDaddy has a Domain Backordering service where we can reserve our place in line for a specific domain. If there’s more than one buyer, the domain goes on auction. Step 2: Once you’ve made your pick, grab all the TLDs you want to your basket and then select your renewals period (1 to 10 years). GoDaddy regularly runs different promos, so it’s easy to get a really affordable domain with them. Also, the annual rate includes:
specific type of communication to occur and dictating the content of the message sent during communication. Why communication protocol is important Communication protocols are important because they provide active participation in the signal sending, messaging, receiving and exchanging of different kinds of files and others. Communication protocols are mostly important for processing information from one device to another one. Protocols provide the rules by which a message may be sent over a computer network. Standards provide implementation criteria for data transfer, such as the technical and bandwidth specifications required. Protocols are not defined for operating systems, but they will be implemented by operating systems. Protocols provide the rules by which a message may be sent over a computer network. Standards provide implementation criteria for data transfer, such as the technical and bandwidth specifications required. Protocols are not defined for operating systems, but they will be implemented by operating systems. Protocols provide the rules by which a message may be sent over a computer network. Standards provide implementation criteria for data transfer, such as the technical and bandwidth specifications required. Protocols are not defined for operating systems, but they will be implemented by operating systems. Types of protocols There are various types of protocols that support a major and compassionate role in communicating with different devices across the network. There are Transmission Control Protocol (TCP), Internet Protocol (IP), User Datagram Protocol (UDP), Post Office Protocol (POP), Simple mail transport Protocol (SMTP), File Transfer Protocol (FTP), Hyper Text Transfer Protocol (HTTP), Hyper Text Transfer Protocol Secure (HTTPS), Telnet and Gopher. Among them I will going to explain the most popular and well-known types of protocols which are familiar with users. Hyper Text Transfer Protocol (HTTP) Hyper Text Transfer Protocol (HTTP) is the most widely used web communications protocol. If you look in the Address field of your web browser right now, it's likely you'll see "http://" at the front. HTTP is a classic "client-server" protocol. Users click a link on their web browser (the client), and the browser sends a request over the internet to a web server that houses the site the user requested. The server sends back the content of the site, such as text and images, which display in users' web browsers. HTTP is an unsecure communications protocol because the data it sends back and forth between a browser and a server is unencrypted and can be intercepted by third parties. Hypertext Transfer Protocol Secure (HTTPS) HTTPS is similar to HTTP, but different in that it combines with a security protocol called SSL/TLS to provide secure client-server communications over unsecure networks such as the internet. You're
most likely to see HTTPS protocols on ecommerce websites that ask for personal financial information like credit card numbers. You know a website is using HTTPS protocols when you see the "https://" in the web address displayed in your browser's Address field. File Transfer Protocol (FTP) As the name implies, the File Transfer Protocol (FTP) is primarily used to transfer files such as documents, images, music, etc., between remote computers. Users have to log on to an FTP server either through a command line interface or through one of the many FTP graphical client programs available. Once logged on, users can navigate through the remote server's file structure, moving, renaming, deleting, and copying files as if it were their own computer. Telnet Telnet is one of the oldest communication protocols. Like HTTP, a Telnet client is used to access remote servers. However, unlike HTTP, where you only request specific files, Telnet is used to actually log on to the remote server and perform functions as if you were sitting in front of the server terminal. Telnet is rarely used now since it is an unsecure protocol that does not encrypt data sent between remote computers. What kinds of protocols need to access website Most of the time, people browse the internet by using a web browser. A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content. A web browser lets user’s computer to communicate with web servers around the world and giving them the right information’s with just a few clicks away. Different web browsers have different way of retrieving information’s, but one thing they have in common is web communication protocols. Web communication protocols are technology used to transfer information across the internet. For example, a web browser uses these protocols to request information from a web server, which is then displayed on the browser screen in the form of text and images. The degree to which users can interact with that information depends on the protocol. Purpose of communication protocols For any data transmission within a network, it is imperative to consider an effective protocol which defines certain rules, conventions or guidelines. It is with the help of such protocol; a secure communication can be established amongst different network nodes for the exchange of data. To explain further, protocols are defined as separate layers where each layer is specifically designed to perform a specific task. For a protocol specification, it is significant to specify its main operation which needs to be formed along with the technique using which protocol will function. The increasing need of a safe and secure data transmission has given rise to the importance to understand communication protocols. Moreover, the proper identification of the type and rules, allows the user or an organization to generate even better results. Also, the right understanding is important due to the variation in the types of communication protocols. The usage of communication protocols assures enhanced security to network communication among communicating network nodes. Different types of communication protocols define certain rules for establishing communication between two different network nodes. Communication protocols can be incorporated either in hardware or software elements and are mainly used in the digital communications for communication among the network nodes. What is Server Hardware
The web server is designed to manage large-size websites. The service offers the services for free, but technically it is not shared as an open-source application. It supports Windows, Linux, Unix operating systems. Run almost all kinds of script and programming languages on the web server. Lite Speed Server Lightspeed server is known for the high speed and great performance while the data rendering and transfer on the web. It offers high stability to the application and reduces stress on the memory. The light-speed server is compatible with the Apache server. You can run the Lightspeed on apache without needing the change any programs or operating systems. Run both the application at the same time without the drop in the network. How Does a Web Server Software Work? The web browser program communicates with the web server using the Hypertext Transfer Protocol (HTTP). It is the technology used to protect the client’s data and prevent it from leaking on the web. The content product on the web is encoded in the Hypertext markup language (HTML Web server focuses on delivering the stored files to the web browser when the user requests the query on the website. It uses various methods to process the data at speed and reduce the time it takes to pass the content from the security filter. When the web server receives a request for content for a web page, such as https:// www.google.com/index.html and maps that Uniform Resource Locator(URL) to a local file on the host server. In this case, the file index.html is somewhere on the host file system. The server then loads this file from disk and serves it out across the network to the user’s Web browser. This entire exchange is mediated by the browser and server talking to each other using HTTP. This workflow is shown in the figure below. Because this simple arrangement, which allows the serving of static content such as Hyper Text Markup Language (HTML) and image files to a Web browser was the initial concept behind what we now call the World Wide Web. The beauty of its simplicity is that it has led to much more complex information exchanges being possible between browsers and Web servers. The most important expansion on this was the concept of dynamic content (i.e., Web pages created in response to a user’s input, whether directly or indirectly). The oldest and most used standard for doing this is Common Gateway Interface (CGI). This is a pretty meaningless name, but it basically defines how a Web server should run programs locally and transmit their output through the Web server to the user’s Web browser that is requesting the dynamic content. For all intents and purposes, the user’s Web browser never really has to know that the content is dynamic because CGI is basically a Web server extension protocol. The figure below shows what happens when a browser requests a page dynamically generated from a CGI program.
Types of the operating system:
MACOS : It is the proprietary operating system by Apple that supports iOS development. M1 Evaluate the impact of common web development technologies and frameworks with regards to website design, functionality and management. The impact of common web development technologies Many products have been launched in the online world in recent years, which are most popular these days. The product reviews with interactive graphics can help our business website to stay ahead in the cutthroat competitive world. With these advanced features and functionalities, we’ll leverage the perks for our website, which gives us business a huge profit. There are numerous updated changes available with the assistance of technology, the changes can work in the favor of web development requirements. Innovation web design is one of the latest trend brands in the digital world. As the transit of the years, the startups are focusing on fetching the user’s attention through innovative design. However, appealing designs have a high chance to get noticed by users. Visual design is now considered as the marketing strategy. Experts are now integrating motion UI into their web apps and websites. Motion user interface design has been the current market demand. Since the year 2018, the motion user interface has been widely accessible across the devices with the help of SaaS libraries technologies. Motion UI design makes the websites more interactive. The approach involves CSS transitions included with libraries and animated elements. Developers spend less time on building digital products, which eventually saves the price of web development. Types of common web development technologies: HTML, CSS, JavaScript, and PHP. HTML HTML stands for Hyper Text Markup Language. It’s one of the fundamental technologies required for web development. It provides the base structure for a web page. HTML code ensures that all the content on a website is properly formatted. This is so our Internet browser can display the content as intended. Without HTML, a browser couldn’t display text or load images and other elements. HTML5, the most current version of HTML, specifies a large number of Application Programming Interfaces (API integration services) that can be used with JavaScript for a more interactive and dynamic website: Canvas is an HTML5 element used to draw images and shapes and manipulate them. It can also be used for more complex cases such as game graphics and animations. Web Storage is used to store information right in the browser. Some examples of this would be storing user login information and saving user preferences for a website. Web Storage is used to store information right in the browser. Some examples of this would be storing user login information and saving user preferences for a website. Web Storage is used to store information right in the browser. Some examples of this would be storing user login information and saving user preferences for a website. Service workers enable a script that keeps running in the background when a web page is opened and is mainly used in websites with offline capabilities. It makes pages available offline and allows for the use of web push notifications. It can send these notifications even when our browser isn’t open. Functionality of HTML HTML is works with close and open tags which make them as element to create simple output in web browser. Think of HTML elements as the building blocks of a web page. Elements are defined by their opening and closing tags and can be nested within other elements. Web developers use elements to structure a web page into sections, headings, and other content blocks. In example, if the element is
shadows, rounded corners, and gradients find use in just about every web page. These design enhancements can make the site look appealing when used appropriately. Formerly, to use these techniques, we had to resort to many complicated methods with lots of coding and HTML elements. We tolerated these workarounds, as there was no other way of achieving these techniques. But now, CSS3 allows us to include these designs directly, leading to simpler and cleaner, and fast pages. JavaScript JavaScript is the most used language by startups for a few reasons. It can be used as both a front- end and back-end programming language. Compared to other languages, JavaScript is comparatively easy-to-learn (although all languages come with some difficulties), and it’s used everywhere in custom web application development. It’s also constantly being updated and expanded with new features. Functionality of JavaScript JavaScript permits users to interact with web pages. JavaScript enables developers to develop multiple things on a web page like: display or hide data with one click, Change the color of a button by hovering the mouse over it, Side through carousels on the landing page, Zoom in or out function on an image, Show a timer or count-down on a website, Play audio/video on a web page, Exhibit animations and employ a drop-down hamburger menu. Apart from web pages and applications, designers can use JavaScript to design simple servers and back-end frameworks with Node.js. JavaScript can be used to build browser games. They are a great way for beginner developers to practice and perfect their JavaScript skills. Building web servers and designing server applications Various JavaScript frameworks can be used for designing and building web and mobile apps. JavaScript frameworks provide a collection of JavaScript code libraries that equip developers with pre-written code for routine programming features and tasks-like a word-for-word framework to build websites or web applications. Popular JavaScript front-end frameworks include Angular, React, React Native, and Vue. Many enterprises employ Node.js, a JavaScript runtime environment created on Google Chrome’s JavaScript V8 engine. Some famous instances include PayPal, Netflix, LinkedIn, and Uber. PHP PHP is the most common language in web development. WordPress, a content management system (CMS) that powers 34% of the Internet, is built on PHP. Finding a good developer can be difficult regardless of language, but choosing a popular one like PHP will give you a larger pool of developers to choose from and work with. PHP also comes with extensive online documentation and tutorials for troubleshooting and support. Functionality of PHP PHP is widely used to make dynamic web pages within very short time. Sending email, Receive email with PHP is very easy. Perfect language to work with data Select, Insert, Delete, Update records in database. Can be used to collect data from registration form, Login forms. Send and Receive cookies data stored on client machine. Control user-access on websites and store session data on servers with PHP is easy. And also encrypt data securely and compress files. Can also be used to resize and photo enhancement.
Why use Bootstrap Bootstrap has a huge number of resources available online on their official website and on other websites too. Bootstrap official website itself provides a great documentation and that is really helpful in creating a new website and has a lot of themes and templates that we can use. So we don’t really have to go much far to get started and go on with bootstrap. At the same time, we can go outside the bootstrap website and look for resources provided by other websites. There are plenty of websites that provide tutorials, even more, collection of themes, templates, plugins, UI Kits, which we can select according to our taste and include in our project. Bootstrap gets updated continuously and the creators always provide these updates in a timely manner. Bootstrap accelerates the creation of layouts by providing a great number of templates and ready-made solutions. Sites created using Bootstrap are identically displayed on different devices and in modern browsers. Working with Bootstrap is not difficult; it only requires basic skills and having some basic knowledge working with layouts. Many themes for popular content management systems (CMS) are developed using Bootstrap, which proves its quality level. In essence, it is a framework containing the components of CSS, HTML and JavaScript, as well as its own styles and fonts. Reduce Time Consuming If we want to reduce the time of development and want to launch an application as quickly as possible, then go right ahead and get the ready-made blocks of code that Bootstrap allows us to use. This can save us a ton of time in development as we don’t have to start everything from scratch and also give us can make it our own with our own inputs. Bootstrap also has ready-made themes and templates that we can choose from. There are plenty of other resources also that provides us with free and premium themes and templates. All we need to do now is download them, make some changes to suits our needs. Sites developed with Bootstrap are similar to each other: the same structure, navigation, buttons. Each new site is similar to the many already created ones, and this does not seem professional so trying not to use ready-made solutions will help create unique websites. That being said, it is important to understand all the tools offered by Bootstrap so as to maximize their use in development. Responsiveness A website that requires zooming in and out when used on a mobile device doesn’t make up for a good user experience. Users would like to use a website that is compatible with the size of the screen that they are using. One that doesn’t make us zoom in or out just for reading the content of the website. This is what a responsive website do. They scale up or down to the screen size of the device they are being used on, only show certain parts that are required and hide some parts that are not significant, toggle selections etc. Bootstrap is a great choice for making a responsive website. With the great fluid grid system and responsive utility classes creating a responsive website is a smooth and easy task. Now Bootstrap is mobile first. That means developing a website is primarily for a mobile device and then we add responsive behavior to devices with increasing screen sizes. Which makes sense given the rate with which mobile data traffic is increasing and is likely to surpass PC traffic. Another reason is that it can be easily customized. If we don’t have time to create a website from scratch and we use a template to kick-start our project but at the same time we need a distinct and unique look, then we can customize it. All we need to do is create our own custom CSS file and make changes and include the CSS file in the HTML code of our original website. Another way of customizing Bootstrap is to customize it at the time of download. Bootstrap allows us to change the defaults values of the variables and not include components, plugins etc which we will not be needing. All we now need to do is compile and download our custom version of bootstrap in their customize page. Excluding the components that we do not need helps decrease the bootstrap file size that we download. Consistency
People want to know who they are working with. After all, they will be entrusting us with their priced processions or assets. Our website is the face of our business online. It should be backed by an efficient UI or user interface. This involves a user-friendly, responsive, and visually-pleasing design. If first impression last, then we want our website to impress our visitors off the bat. Whether it’s a website for physicians, lawyers or a SAAS company, have it aligned with the color schemes images, icons and buttons used. Work with a professional web developer Working with an experienced team will help improve our website's technical aspect. Features such as ease of navigation, website speed, and mobile friendliness should not be ignored. This will ensure that once people visit our website, they will stay on and even see again. Remember that the search engines also use this information to rank our website, as it means the user experience was good. Don’t ignore the social media Creating a business account on Facebook, LinkedIn, and other social media platforms is a simple way to get noticed. Once we have these accounts, actively make posts, and it doesn't' have to be about promoting our business all the time. We can post helpful guides. Embed our social media accounts on our website and enable content sharing. Make sure to engage our online readers by responding to comments or messages. We can also make our social media a posting place for an important company and tax notices. If our clients' think they need to follow us to get noticed about tax due dates, this can bring in new followers. This is a sure way for our online readers to spread the good word about our business. Include fresh and educative content Publishing regular fresh content helps to build a returning audience. New content helps our website in various ways. First, we can target a broader range of keywords, including long-tail keywords and phrases. More fresh content means more links and more linkable content for others to link to, which is important as backlinks are essential for SEO. When someone links to content on our site, search engines find that as a mark of trust and give our website a boost. At the same time, we can use fresh content to answer questions that our target audience is likely to find useful. Including videos offering tips or in case we have had the latest speaking engagement on accounting-related issues. Ensuring our content to compliance requirements or any industry regulations. The accounting or financial industry operates in a strict regulatory environment which we must remember that. Updating voice search for our website. It’s established that voice search is easy, especially now that more advanced voice recognition technology continues to be more accurate and quicker. One way to optimize for voice search is to include more conversational phrases in our content, may it be on-page or off-page elements or blogs. LO2 Categorize website technologies, tools and software used to develop websites. P3 Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to presentation and application layers. What is Front-End? The front end is also commonly referred to as the client side, or more broadly speaking, the user interface. While many people use front end to describe website-related development, it can refer to any software that a user interacts with. The front end is what the user touches and interacts with
when completing the transaction. They are action oriented, easy for the user to engage with, and help a company or website collect valuable information. Front-end work can improve not only mobile and desktop sites but video social media tools as well. Front-end developers can help the browser edit and compress videos and render better visual displays. Web Design Techniques used by front end web-site are responsive web design, modern design languages and frameworks. The most popular front-end languages are HTML, CSS, JavaScript. HTML HTML5 is a programming language whose acronym stands for Hyper Text Markup Language. It is a system that allows the modification of the appearance of web pages, as well as making adjustments to their appearance. It also used to structure and present content for the web. With HTML5, browsers like Firefox, Chrome, Explorer, Safari and more, can know how to display a particular web page, know where the elements are, where to put the images and where to place the text. Apart from HTML5, there are other languages that are necessary to give format and interactivity to a site, but the basic structure of any page is first defined in the HTML5 language. Thanks to HTML5, users can access websites without being connected to the Internet. One of the main features of developing HTML applications is that the final result is completely accessible. That is, you can access this application from a computer, tablet or mobile phone. Even if you change devices, you can still access the web application via the respective URL, which is not the case with a mobile application. Most web applications run from the cloud. A common example is mail clients like Gmail, which also have a mobile application. CSS CSS (Cascading Style Sheet) is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML. JavaScript JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. The core client-side JavaScript language consists of some common programming features that allow you to do things like storing useful values inside variables. If user ask for a new name to be entered then store that name in a variable called name. Operations on pieces of text (known as “strings” in programming). In the above example it takes the string “Name 1” and join it to the name variable to create the complete text label. Running code in response to certain events occurring on a web page. When it used click event to detect when the label is clicked and then run the code that updates the text table. Moreover API(Application Programming Interfaces) provide JavaScript when building the client-side. What is Back-End? Backend development (often called the “server-side” development), is the creation of everything that goes on behind the scenes of a website or application that the user can’t see. Data is collected from external servers and applications and filters this information back into the website to process user requests. If users are buying something online, they need to enter their information into the website. That information will then be stored in a database that was created on a server and will be processed