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
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
Typology: Essays (university)
1 / 36
This page cannot be seen from the preview
Don't miss anything!
Summative Feedback: Internal verification:
1. What is DNS? DNS stands for Domain Name System, which is an important part of web infrastructure. DNS provides the service of receiving requests containing domain nameservers and responding with the corresponding IP address and vice versa. For example, when typing a domain name into the browser's address bar, the computer performs a DNS lookup, returning a web page with the IP address of the Web server associated with the requested domain name. DNS was born and gradually became the core of the Internet because of the benefits it brings: There will be a lot of domain names updated every day, along with a lot of ever- changing IP addresses. With DNS, users will only need to remember domain names that can be easily queried without having to remember complicated, unfriendly IP addresses such as 192.168.1. DNS can help users save time accessing previously visited websites by remembering and prioritizing the domains that have been queried. 2. How DNS works To better understand how DNS works, we must first have an understanding of domain names. Domain name A domain name consists of several parts, each made up of the numbers 0 to 9 and alphabet characters, and is conventionally concatenated, separated by a ".". The principle of naming domain names is to be short, easy to read, user-friendly, so they can be read by humans. And in particular, because they are associated with a unique IP address, the domain names set must also be unique and so they are also considered as an identifier. Example: google.com. Where "google" is the domain and ".com" is the top-level domain Top-level domains (TLP) are the most hierarchical set of domain names and include the generic top-level domain (gTLP) used by all countries participating in the Internet, and domain names country code premium (ccTLP), usually appended to the right end of the name (eg: google.com.vn) How DNS works
II. Web Server
1. What is Web Server? Web server is a computer with large capacity, running at high speed, installing software used to manage or install web sites. Webserver includes both hardware and software based on a number of available protocols. 2. Functions of Web Server This server is used for many purposes: To store and manage server software, website information, related information on the internet and user information during internet connection Process and respond to requests from clients using HTTP, HTTPS, SMTP,... and some other methods; Exchange resources with other computers or other devices that share the same connection to the web server; 3. How Web Server works Image 2. How Web server works All information about the website is stored on a web server, so when the client requests access to a certain address, it sends the request to the web server. There, the server performs a series of processes to resolve the domain name to an IP address, that IP address will be considered in the cache priority, if there is information there, it will access the website. and return it to the user. If not, a web server will build the required file. If both processes fail, the web server returns an error message to the browser. 4. Web Communication Protocols A protocol is a set of rules that regulate how data is sent between devices connected together. To take on the role of Webserver, it used some of the following protocols:
HTTP (The Hypertext Transfer Protocol): It communicates on the basis of TCP/IP to deliver data, transport hypertext (HTML files, image files, media, ...) on www (World Wide Web) and display in users' web browsers. It can be used for Webmail. Image 3. HTTP HTTPS (HyperText Transfer Protocol Secure): HTTPS is a protocol that uses an additional SSL (Secure Sockets Layer) certificate to encrypt data in transit. This security certificate is used to increase the security of the web server with the web browser. HTTPS has a higher level of security than HTTP, and the access speed is slightly slower, although not dramatically. Image 4. HTTPS SMTP (Simple Mail Transfer Protocol): is the standard TCP/IP protocol for sending electronic mail (e-mail) over the internet. It establishes the communication channel between the sending mail server and the receiving mail server, as well as the connection channel between the mail client and the mail server Image 5. SMTP POP3 (Post Office Protocol version 3): POP3 is a protocol for connecting to a mail server and downloading email to a computer via an email client like Outlook, Windows Mail, or...v.v. (laasy mail gốc trên sv đi) IMAP (Internet Message Access Protocol): In addition to POP3, IMAP is also used to pull emails to the email client, but the difference with POP3 is that it only pulls email headers, the email content is still on the server. This is a 2-way communication channel,
A server system is most important to have an HTTP server, because it is the URL interpreter, it is a required element to help display the requested information from the client in the network. Some popular Web Server software:
III. Front-end and Back-end website technologies, review the capabilities and responsibilities of the technologies Image 13. Front-end vs Back-end
1. Front-end 1.1. What is the Front-end Technologies? The front-end is the display on the screen of a website that the user can see and can interact directly and then receive a response from the system. A complete front-end is composed of all elements that are: paths, layouts, content, graphics, images and buttons. All of these things must be presented clearly, vividly and aimed at the user audience It presents the software content and allows the end user to interact with the system, so it is at the presentation layer in the OSI model. 1.2. Front-End Technologies To meet user needs, front-end technology also needs to be developed more. However, the purpose that it aims to still be the friendliness, the ability to interact with users and the performance of that website. The front-end developer is responsible for programming the presentation layer, and they are seen as an intermediary between the designer and the back-end developer. The technology is to understand and define the layout from the designer's final blueprint and code it into the front-end code and based on that the back-end developer can understand it and build it completely. Improve functionality, act in accordance with the application
Image 14. Front-end Technologies All other libraries and front-end engineering are built on top of three main languages: a.HTML (Hypertext Markup Language) HTML is a hypertext markup language. It consists of many elements that are used to create the basic structure of a web page and to create links between web pages. HTML helps web browsers to read, understand and accurately display information for users. The general structure of an element is the piece of content that it wants the browser to display in a pair of <> </> tags, or some kind of tag with only one <>. Each element has a rieeng function, which can help display text, titles, images, videos, ... and the names of tags are enclosed in curly braces, regardless of case. For example:
Hello world
This p tag helps display the words "Hello world" to the browser screen when accessing this .html file. b. CSS (Cascading Style Sheets) CSS used to decorate and beautify interface pages based on HTML tags. CSS provides enough material to change the default color, size, style, ... of HTML tags. CSS allows you to do this independently of the HTML that makes up each web page. Using CSS well, will help bring technology closer to the user. For example: p { color: red; } In this example, we have CSS with a p tag in the HTML file. The contents of the attributes to be changed will be enclosed in {} brackets and separated by a semicolon ";". The attribute values are followed by a colon ":". As in the example, the color scheme of the text will change to red. c. JavaScript JavaScript is the most common of the three, run on the client and separately on each client. Javascript's job is to process HTML objects in the browser. It can intervene with actions like add / remove / edit CSS properties and HTML tags easily. Programming in JavaScript delivers a dynamic user experience with Databases - used to manage and connect them to web data, can return exactly the data requested by the user MySQL is the most popular data management system for the web. Web developers choose MySQL because it is high-speed, stable, secure and easy to use. Currently it also supports most operating systems such as Windows, MacOS, ... The largest web applications such as Facebook, Twitter, YouTube, Google, ... all use MySQL for data storage purposes. Server: because the back-end works on the server, if you don't know enough about the server, it will be difficult for developers to operate smoothly
3. Difference between Front-end and Back-end Front-end and Back-end are two separate parts when it comes to making a website. They work in tandem with each other, complementing each other, but still have distinct differences Front-end Back-end Visual aspect User can see and interact Users cannot see and interact Activity Create interface, website beauty Make the website work, handle the web operation process Place of activity client (client-side) server (server-side) Programming language HTML, CSS, JavaScript Ruby, C++, Java, Python, ... User interaction Allows users to interact Do not allow users to interact Frameworks Angular.js, React.js, jQuery, SASS, and Flutter Laravel, Express, Spring, and Django
IV. 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)
1. What is UI and UX? Image 16. UI vs UX User Interface (UI) A UI is everything the browser screen displays to the user, including buttons, screen layout, graphics, motion, icons, typography, and more. The goal of user interface design is to attract users first. UI must ensure that the layout, graphics are clear, beautiful and linked together. It must bring the brand's identity to the design and also be friendly, users can easily understand how to use the product. UI design includes the following formats: Graphical user interface (GUI) deals with how users interact with the system's digital dashboards and images Voice Control Interface (VUI) allows users to interact with the system through voice Gesture-based interfaces commonly used in virtual reality (VR) User experience (UX) UX focuses on solving problems and developing experiences during user interactions with specific products or systems. The user experience design must be clear, focus on the object, the product. The products created must be fully functional, logical, accessible, easy to understand and must be interesting and engaging.
However, such available features often carry a large amount of space, causing the website to be overloaded, causing some interruptions in the process of storing and running the program. That will directly affect the brand's SEO performance Some popular online web creation tools: WordPress, Squarespace and Wix Custom built sites With custom built sites you will not be limited in terms of tools, colors, font styles,..., you are free to be creative with your designs. That will create a unique identity for you, for your brand. But to produce a complete website based on custom built sites you need to have programming knowledge, you need to invest a lot of time and budget for that project. The use of this customization tool is further encouraged by its durability and flexibility. You will be able to easily and continuously update and change the code to be able to match the trend of the brand over time.
4. Different between online web creation tools (template) and custom builder sites Online web creation tools Custom built sites Design flexibility It was very quick to start making the first blueprints, because they were pre- designed and just changed the content. However, in the long run, when the enterprise wants to change some parts of the design later on, it will be time- consuming and complicated, sometimes having to completely change from scratch. Starting to develop a website can take a long time, from weeks to months. However, custom-built websites will be able to easily expand, add new functionality, or be able to change any of the designs or features. Performance Since the models are built around a wide variety of needs, when making it, engineers try to add as many features as possible to meet the needs of the masses. And when an enterprise chooses that model, some features may not be used, causing the memory to fill up and causing loss of performance. A custom website will focus on only the features the business really needs and evolve it. That results in very centralized code, less redundant data, and it won't affect website performance Functionality You can still add functionality, but are limited in what the template allows. Some high specification functions may be charged or may not be added at all. You can do all you want without being limited User Experience (UX) Limited, not diverse experience functionality. The site is buggy, has poor security The website is built in general and oriented to the needs of customers. Can be easily changed to keep up with user trends and support timely error correction, enhancing user experience.
User Interface (UI) Pretty diverse, but your website may have to use the same template with many others Beautiful but unique. You can freely design your own way and create your own branding V. System analysis and evalution
1. Technology To complete this project I used the following technologies: Web browser: I used it to access the website. The browser receives that request and displays it on the requested web page in formats such as text, images, videos, etc. HTML: is a hypertext markup language. It is used to create the basic structure of a website and create links between web pages. HTML helps to display content in the format of text, images, ... through <> </> tags Image 18. HTML in my project CSS: I have used CSS to decorate the website, make it more beautiful, attractive and create a unique personality for the brand. Specifically, I use CSS to arrange the page layout, determine the position, adjust the font, color, ... everything that is displayed on the screen.
