Web Design & Development, Assignments of Web Design and Development

Download Web Design & Development and more Assignments Web Design and Development in PDF only on Docsity!

WEB DEVELOPMENT

Trần Nguyễn Tấn Sang- GCS

ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Student ID

Class Assessor name

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that making a false declaration is a form of malpractice.

Student’s signature

Grading grid

P1 P2 P3 P4 M1 M2 M3 D

ASSIGNMENT 1 BRIEF

Qualification BTEC Level 5 HND Diploma in Computing

Unit number 10: Website Design & Development

Assignment title Web Services Presentation and Guidebook

Academic Year^2018 –^2019

Unit Tutor

Issue date Submission date

IV name and date

Submission Format:

Format: Two ten-minute Microsoft® PowerPoint® style presentations to be presented to your colleagues

Submission Students are compulsory to submit the assignment in due date and in a way requested by the

Tutors. The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/ Note: The Assignment must be your own work, and not copied by or from another student or from books etc. If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must reference your sources, using the Harvard style. Make sure that you know how to reference properly, and that understand the guidelines on plagiarism. If you do not, you definitely get failed

Unit Learning Outcomes:

LO1 Explain server technologies and management services associated with hosting and managing websites.

LO2 Categorise website technologies, tools and software used to develop websites.

Assignment Brief and Guidance:

You work as a full-stack web team leader for a leading creative web solutions and marketing company. Your team is about to have a big contract to develop an online shopping mall.

One of the preparation tasks is to choose appropriate tools and techniques to realise a custom built website.

As part of your role, you have been asked to create an engaging presentation to help train junior staff

members on basic web technologies including hosting and website management as well as server technologies. Your presentation should not only explain basic knowledge in the domain but also points out the impact of these technologies to website design, functionality, management or performance.

You also need to present more technical presentation to senior staff members to discuss about front-end, back-end technologies as well as other tools, techniques and softwares used to develop website from simple (online website creation tools) to complicated (custom built). Your presentation will be used as guidance of choosing suitable tools and techniques for the next project.

P1 Identify the purpose and types of DNS, including

explanations on how domain names are organised and

managed.

• The domain name system (DNS) is a naming database in which internet domain names are located and translated into internet protocol (IP) addresses. The domain name system maps the name people use to locate a website to the IP address that a computer uses to locate a website
• Purpose of DNS: The sole purpose of the DNS system is to make your browsing more comfortable. You really don’t want to remember all those number-dot-numbers-dot-more-numbers, right? It’s a lot easier to remember facebook.com or some other domain. When you enter that pretty domain name, the browser will search through the DNS system and find the exact IP address of the corresponding website.
• Types: o Top-Level Domains (TLD):  .com: shorthand for commercial, .com was the first top-level domain in common use. While .com was initially created for use by commercial organizations, restrictions on this were not stringent. By the mid-1990’s, .com had become the most popular and commonly used type of top-level domain for businesses, websites, and email.  .net: shorthand for network, .net was created expressly for institutes that partook in network technologies such as an internet service provider or an infrastructure company. Like with .com, the restrictions meant to limit .net to networking purposes, was never upheld and it became one of the more popular top-level domains, with many seeing it as a close second to using the .com top level domain.  .edu: shorthand for education, .edu was made for education institutions. Although it was intended for universities everywhere, the TLD .edu became associated with only educational centers in America. Schools from other countries will use .edu in conjunction with their country-level domain, which we will discuss in the next section below.  .org: shorthand for organization, .org was created for nonprofits. As we’ve seen with these other top-level domains, such intentions were often not upheld or enforced over time. These days, .ors is used as top-level domain by nonprofits, for-profit businesses, schools, and communities.  .mil: shorthand for military, .mil was created expressly for U.S. military branches. Unlike the other different types of top-level domains, this restriction is still upheld. Now, it is quite common for .mil to use second and third-level domains in conjunction with the .mil TLD.  .gov: shorthand for government, .gov, like .mil, was restricted for American federal governmental agencies and personnel use only. These days, .gov is used by governmental agencies, programs, cities, states, towns, counties, and native American tribes. o ccTLD - country code Top Level Domains

 The best known generic TLD's include .com, .net, .biz, .org and .info - these can be registered by anyone, anywhere in the world. However, some of the new gTLD's more recently released have various restrictions. o gTLD - generic Top Level Domain o IDN ccTLD - internationalised country code top-level domains o Second level o Third level o Subdomain

• Domain names are formed by the rules and procedures of the Domain Name System (DNS). Any name registered in the DNS is a domain name. Domain names are organized in subordinate levels (subdomains) of the DNS root domain, which is nameless.

P2 Explain the purpose and relationships between

communication protocols, server hardware, operating

systems and web server software with regards to designing,

publishing and accessing a website.

• 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.
• Types : o HyperText 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. o 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. o 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. o 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

file sharing services to share files over a network.

o Server Software:  Server operating system (Window, Linux): Both operating systems can be used as two different means to various ends. While Windows offers more complex functions for structuring work and communication flows, Linux scores with its status of being the preferred option for web applications, such as content management systems.  Web server: Web server is the server that installs programs serving web applications. The Webserver is capable of receiving requests from web browsers and sending responses to clients via HTTP or other protocols. There are many different web servers such as: Apache, Nginx, IIS, ...

P3 Discuss the capabilities and relationships between front-

end and back-end website technologies and explain how these

relate to presentation and application layers.

• Explanation of static and dynamic web: o Websites are separated into two different types: static and dynamic. Static websites are ones that are fixed and display the same content for every user, usually written exclusively in HTML. A dynamic website, on the other hand, is one that can display different content and provide user interaction, by making use of advanced programming and databases in addition

to HTML. As you can tell, static websites are easier to create, while dynamic websites require more work.

• Drive to front-end and back-end technologies o Front-End:  The front end of an application is the visible part of it that the user interacts with. The main purpose of the front end is to deliver effective interactivity and display of the content and data in an appealing, neat and simple to understand manner. Essential features to be built into the front end part of web development include: markup, style, accessibility, cross-browser, cross-platform and cross-device functionality, templates, CMS and web frameworks, usability and performance.  There is a particular set of technical skills, tools and knowledge base required for front end development, whether your business is implementing this in-house or outsourcing it to an experienced web development company. Some of these are explained below:  HTML: Web pages are created by using a markup language called Hypertext Markup Language (HTML). It is a considered to be a language that is easily understood and interpreted by web browsers, and is widely used to showcase content to users. HTML and its latest version HTML5 are widely held as the de facto industry standard for creating webpages.  CSS: Cascading Style Sheets (CSS) complements HTML by providing the styling required for an attractive interface. It offers various stylizing options, such as fancy fonts, buttons, flash lights, and templates. CSS is required for the effective presentation of the webpage.  JavaScript: It is a dynamic programming language that is used to add interactivity to web pages. JavaScript makes possible the integration of multimedia on the web page or the app page and features, such as drag-and- drop, polls and quizzes, and video scrolling. o Back-End:  The back end of the web application is basically the brains behind the front end. It comprises three components: server, application and database. It is a link between the server and the user. Most of the coding for the web application can be found in the back end and the quality of this code will determine how the website functions. Knowledge of required programming languages and database, as well as of the server side architecture is essential to prevent sluggish performance, continuous crashes or errors.  The following programming languages and frameworks are used, mostly individually, to create a robust back end:  Ruby on Rails: Ruby on Rails is a web development framework, designed to ease the effort involved in coding through simpler syntax grammar. This Model-View-Controller (MVC) framework employs Ruby as the programming language. It can be implemented on most web servers and is compatible with popular databases.  PHP: Hypertext Preprocessor is a popular server-side script language and interpreter. It can be embedded into HTML – when the code is run on the

 Character/string conversion  Data compression  Graphic handling  The presentation layer mainly translates data between the application layer and the network format. Data can be communicated in different formats via different sources. Thus, the presentation layer is responsible for integrating all formats into a standard format for efficient and effective communication.  The presentation layer follows data programming structure schemes developed for different languages and provides the real-time syntax required for communication between two objects such as layers, systems or networks. The data format should be acceptable by the next layers; otherwise, the presentation layer may not perform correctly. o Application layer:  The Application Layer is the seventh layer of the seven-layer OSI model. Application layer interface directly interacts with the application and provides common web application services. The application layer also makes a request to the presentation layer. Application layer is the highest level of open systems, providing services directly for the application process.  Application layer functions:  Transport access and management: It allows a user to access, retrieve and manage files in a remote computer.  Mail services: It provides the basis for email forwarding and storage facilities.  Virtual terminal: For various reasons, it can be said that the standardization of terminals has completely failed. The OSI solution to this problem is to define a virtual terminal that is really just an abstract data structure that takes the abstract state of the actual terminal. This abstract data structure can be operated by both the keyboard and the computer and reflects the current state of the data structure on the display. The computer can query this abstract data structure and change this abstract data structure so that the output appears on the screen.  Other functions: In addition to the three functions above, there are some other functions: directory services, remote job entry, graphics, information communication and so on.

P4 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).

• Some website creation tools:

o Wix:

Pros Cons

Easy to use drag-and-drop functionality

Free plan domain names look like this: yourname.wixsite.com/yoursite – they’re not

the catchiest! Wide range of templates The free plan sticky ads are very noticeable Majority of features available on free plan

Can’t change your template once your site goes live Endless scope for customization

o Weebly:

Pros Cons

A reasonable free plan domain name: yoursite.weebly.com

Limited features on free plan

Sell for free (currently US only) Not as much creative freedom as Wix Good SEO prompts – ideal for businesses that want to be found through Google

Pop up ad in the corner is quite distracting

• Comparison between Web creation tool and Custom built:

Online creation tool Custom built

Design flexibility Easy to design.^ A template

site can generally be launched in a matter of weeks, if the content id pretty much ready to go this is, however, often not the case — and is often a significant barrier to getting a site launched) and your developer’s schedule is clear. Depending on the complexity of what you want, a custom site will take significantly longer.

Custom-built sites are flexible and can grow with you. Down the road you might need significant changes to not only the design, but also the functionality of your site. If you’re working with a template site, you may have to start over in the event of major changes. It’s much easier to add new features to a custom site.

Performance Slow, because their developers

don't know what the final page will look like. It might be a simple static website with a contact form. Or there might be a blog or a store, or both. Many layout elements need to be supported a lot of unnecessary code is loaded. While ideally only the necessary modules should be loaded, this requires more architecture work for the makers of the website builder.

Faster, because the developer know the final page will look like, therefore there are not redundant code

Functionality Functionality can be^ limited in

template sites.

Functionality is unlimited and easily to be updated and maintained

UX Less better than custom built^ Deliver an exceptional user

experience to your website visitors.

UI Your site may look like

everyone else’s. Skilled designers can minimize this

With a custom website, you are allowed and encouraged to show your company culture and

If you are building an e-commerce site, it is important that you have Angular.js in your toolkit for great results. o React JS (Javasript)  An open-source JavaScript library, React.js is maintained by Facebook while being supported by a massive community of developers. Though it is an e-commerce website development tool, React.js is particularly useful in the development of user interface for the website applications. o Node JS (Javasript)  Node.js is decidedly the best when you are looking to build a lightweight, yet highly efficient website. It is uncanny how perfectly well it works with real-time applications that have a huge amount of data running through on distributed devices. Node.js is more than a mere framework. It has the ability to ensure scalability and fast network applications as they are capable of dealing with multiple applications at the same time without compromising on performance. o Spring (Java)  Coming from Pivotal Software, Spring is the most popular app development framework for enterprise Java. The framework is popular among a huge section of developers globally for creating high performance and strong web apps. The framework is particularly known for creating JVM-based systems and applications that are simple, portable, fast, and flexible. The framework uses Java and has been used for creating websites like Mascus and Allocine.

• The impact of common web development technologies and framework with regards to website design, functionality and management o Pros and cons of framework and web development technologies:  Frameworks are straightforward representations of a programming language, as they are easy to learn and get the job done in no time. However, excessive use of these development tools often eradicates one’s chances of getting the real deal – learning the language with a much more comprehensive overview. Think of it as going to college, only you never really get the thrill of it because you were homeschooled.  The fact that most programmers consider frameworks the quickest means to understanding a programming language is often than not a far-fetched idealism. Because most times, they tend to abandon the task of learning how a language works once the job is done and completed. We all are a victim of this at some point, so there is no denying that

M2 Review the influence of search engines on website

performance and provide evidence-based support for

improving a site’s index value and rank through search

engine optimisation.

• Definition of Search engine : Search engine is a service that allows Internet users to search for content via the World Wide Web (WWW). A user enters keywords or key phrases into a search

engine and receives a list of Web content results in the form of websites, images, videos or other online data.

• Definition of SEO : Search engine optimization (SEO) is the process of growing the quality and quantity of web traffic by increasing the visibility of a website or a web page to users of a web search engine. SEO refers to the improvement of unpaid results (known as "natural" or "organic" results) and excludes direct traffic and the purchase of paid placement. Additionally, it may target different kinds of searches, including image search, video search, academic search, news search, and industry- specific vertical search engines. Promoting a site to increase the number of backlinks, or inbound links, is another SEO tactic. By May 2015, mobile search had surpassed desktop search.
• Technical solution to improve website index based on SEO 1) Publish Relevant Content  Quality content is the number one driver of search engine rankings and there is no substitute for great content. Quality content created specifically for your intended user increases site traffic, which improves your site's authority and relevance. 2) Update Content Regularly  Regularly updated content is viewed as one of the best indicators of a site's relevancy, so be sure to keep it fresh. Audit your content on a set schedule (semesterly for example) and make updates as needed. 3) Metadata  When designing website, each page contains a space between the tags to insert metadata, or information about the contents of your page. If you have a CMS site originally produced by the UMC web team will have pre-populated this data for you. However, it is important for you to review and update Metadata as your site changes over time. 4) Have a link-worthy site  Focus on creating relevant links within the text. Instead of having "click here" links, try writing out the name of the destination. "Click here" has no search engine value beyond the attached URL, whereas “Michigan Tech Enterprise Program” is rich with keywords and will improve your search engine rankings as well as the ranking of the page you are linking to. Always use descriptive links by linking keywords—it not only improves search engine optimization, but also adds value to your readers, including those with disabilities or who are using screen readers. 5) Use alt tags  Always describe visual and video media using alt tags, or alternative text descriptions. They allow search engines to locate your page, which is crucial—especially for those who use text-only browsers or screen readers.

M3 Evaluate a range of tools and techniques available to

design and develop a custom built website.

• Tools:

Advantages Disadvantages

Netbeans -^ Working

synchronously with

• NetBeans creates the configuration file itself

• Very popular for web apps
• Easily embedded into HTML
• Large community of programmer support
• Open-source
• Highly scalable
  • Not optimized for desktop apps
  • Runs slightly slower than other programming languages
  • The ease of customization makes it more error-prone and harder to find the errors

.NET -^ Designed specifically for

both web-based and desktop Windows applications

• Easy-to build forms and APIs (platforms to communicate between applications)
• Very useful for cloud- based applications
• Highly scalable
• Early notification system if a coder makes errors
• Full of pre-coded options
  • Steeper learning curve
  • Small support community (relative to PHP)
  • Not optimized for UNIX systems (Linux, macOS)
  • Requires Visual Studio Integrated Development Environment
  • Requires Microsoft license (closed source)

HTML -^ First advantage it is

widely used.

• Every browser supports HTML language.
• Easy to learn and use.
• It is by default in every windows so you don't need to purchase extra software. - It can create only static and plain pages so if we need dynamic pages then HTML is not useful. - Need to write lot of code for making simple webpage. - Security features are not good in HTML. - If we need to write long code for making a webpage then it produces some complexity.

D1 Justify the tools and techniques chosen to realise a custom

built website.

• I choose Eclipse tool because: o Eclipse organizes imports well and does a good job presenting different programming languages. o Eclipse auto formats source code allowing customization and increased readability. o Eclipse reports errors automatically to users rather than logging it to the console. o Eclipse has coding shortcuts and auto-correction features allowing faster software development.

• I choose Java technique because: o The syntax is familiar to the myriad programmers that know any other C based language. o Java (the platform) has a very large and standard class library, some parts of which are very well written. o Java provides a platform for behavioral transfer from one address space to another. This is particularly evident in the dynamic class loading mechanisms of RMI (Remote Method Invocation). o Good portability (certainly better than that of nearly any compiled alternative) o Simplified syntax (compared to C++) o Language design not committee driven o Comprehensive documentation o Lots of available code and third-party libraries

References:

https://en.wikipedia.org/wiki/Domain_name#:~:text=Domain%20names%20are%20formed%20by,root%20domain% 2C%20which%20is%20nameless.

https://www.eyerys.com/articles/web-communication-protocols

https://techterms.com/definition/server#:~:text=For%20example%2C%20a%20computer%20connected,designed% 0specifically%20for%20server%20functionality.

https://www.conceptatech.com/blog/difference-front-end-back-end- development#:~:text=The%20term%20%E2%80%9Cfront%2Dend%E2%80%9D,a%20request%20through%20the%20i nterface.

https://blog.stoneriverelearning.com/front-vs-back-end-web-development-your-ultimate- guide/#:~:text=The%20frontend%20of%20a%20website,the%20server%2C%20application%20and%20database.\

https://wpamelia.com/static-vs-dynamic- website/#:~:text=Static%20websites%20are%20ones%20that,databases%20in%20addition%20to%20HTML.

https://www.invensis.net/blog/difference-between-front-end-and-back-end-development/

https://en.wikipedia.org/wiki/Application_layer#:~:text=An%20application%20layer%20is%20an,IP)%20and%20the% 20OSI%20model.

https://www.quicksprout.com/ways-to-improve-seo-ranking/

https://www.websitebuilderexpert.com/website-builders/best/free/#wix

https://mayecreate.com/blog/custom-web-design-vs-website-template/