Control : Django Project

Real World Project

Abstract

In this project, we are creating a control music website that is a platform of music to entertain the users of their own choice and taste. Similarly, the problem we are trying to solve are that by creating this website it will be helpful for the users to listen the song of the artist where it will also be useful for artist to uphold their songs. For instance: if an artist has released a new song then we will insert this song in our website where users can listen to it which provides artist with the opportunity to curate their personal make more cautiously than social media and provide the users  with a space dedicated to their favorite artists.. As it is an online streaming platform where admin inserts the song of the artist and its album whether it is new or old and users can listen to the song by streaming it online.

With the help of this platform it will combine many several kinds of media all in one place that provides a way for the users to quickly and conveniently get a feel for the songs of the artists. Similarly, users can preview the songs uploaded by the admin where admin can only update the song data in the home page. Similarly, in the top page users can get the most trending songs which are listened by the others users also in the website. Similarly, users can also see the latest songs and albums of the artist in the new page. Similarly, users can also search the song according to the albums, songs and artists name in the search button. Moreover, in the library page users must have to sign up and login to add the song in their list where they don’t have to search it again and again. Similarly, in this website songs genre will also be categorized.

Introduction

Overall, this project can be known as Control Music website. This website is all about new experience listening to the music by entertaining the users by providing different songs according to their demand and taste. As the control music website is different from the other music platforms as the design of the control music website is different from other musical website as it has been designed with the help of usability as with the use of usability in the control music website it made it easy for the user to find what they are searching for and made it convenient for the users to interact with the website. While designing the control music all of the things were taken into the consideration to meet the user’s needs and requirements. Similarly, in the control music website users don’t have to reload the page as all of the required things are displayed in one page which makes the design of the website unique from the other musical website as well. As in the control music website there is home page, top page, new released songs page, recently played songs page and library page where to add song in the library page users must have to sign up or login into the website.

 Analysis

Before design this app we have gone through various analysis for the design of the interface, the feature that should be implement in our design as respected to the website. We have gone through various music streaming platform that exist, to gather data that can be consider while creating our website. We gather data by dividing the website into 3 field, Interface of the website, Feature of the website and the working strategy of the website. First of all, we see the design of the website and count the interface of the website that shows the efficiency, like if there are many panels in the website that will make confusion to the user so we have to create the app with clear and minimum interface that is effective and full filled all the feature as like other streaming platform. After that in the second stage we see the feature provided by the existing platform like and calculate the unique feature of the each website to analysis what type of feature they are providing and how effective is that for the user, show that we can make our own feature that can help for the user or to provide more effective feature by calculating each feature of every platform. At the final stage we analysis all the working pattern or strategy of the each platform to see the performance of the respective feature and how they work and how that is effective for the user. We also consider which app is working for which geography market. We have analysis app from USA, Sweden and India. This all things help use to create a platform that is more effective for the user and in the market. The website that we have analysis are SoundCloud, ApplePlay, Spotify and Gana.

For the website we have added many functional and non-functional features which are effective for the user. Feature are given below by showing how it is functional and non-functional feature.

Functional features:

Login and sign up: As this function helps admin to see the enrollment of the user in the website.

Audio player: As a user can change music and length of the music in this panel.

New: As a user can see and explore newly update music from this panel.

Albums:  User can see the list of music from particular artist songs list in this panel.

Library: User can create their own library by adding their favorite songs.

Notification: Website will notified a user in order any new songs are released.

Top: User can see the top trending music and album in this panel.

Recently: User can see the history of the listen music by them.

Non-functional feature:

Forget password: If user forget their password, the admin will send a verification code in the user email for the verification.

Notification: There will be another notification for the user in the mail to notified and updated. Usability: Page will not reload during loading different page and user have less

Case diagram:

This case diagram show the interaction of the user with the website. This how they can use this website and it show full work frame of the website. As seen in the figure, if user visiting first time in this website user will see the login panel for login. But user have no access to login then user will go to another panel of sign up where user will full filled the need required information. Then user will try login again. Then user will be able to enter in the website and there user can interact with many features of the website. Where two main feature of the website is searching music and create library. Let’s say user is trying to add music in the library, user will pull request of adding library then website will send request to admin to notify that user is try to add in library.  And there is another working frame where developer and admin work together for more maintenance and new Update in every new season for more different user interface. As this case diagram show the how this system work and the individual task done by different member for the website.

Aim

The main aim of this project is to provide online music streaming platform. Where admin insert the song and user can streaming online through web browsers and can add to their favorite song in their library for quick access. This project help artist to promote their song.

Objective

· It promotes the different kind of songs around the world.

· It entertains the users.

· The users can gain skills in musical performance.

· The users will not feel difficult to find the song because we are trying to put a maximum number of songs in this website.

· To develop the ability for sustained thinking in or about music.

Features

1. Home: The users can preview song uploaded by admin. Only admin can update the song data. User can create, read, update and remove songs from their library.

2. Recently: User can see the recently played song in these page.

3. Favorite: They can list the song in favorite features.

4. Rate: They can rate the song according to their favorite.

5. New: User can see the newly released songs in this page.

6. Search: It will help to users to search the song.

7. Shuffle: It helps user to play random songs.

8. Share: User can share song data with link which will redirect to control website.

9. Signup/Login: The users must login to add the song in their list.

10. Repeat: Repeat the songs/ playlist.

11. Audio player: Where user can play song. And can change the song.

12. Library: User can customize their songs on library in this page.

13. Top: User can use the trending songs in present time.

14. Queue: Playing the playlist/album in queue.

Implementation

Frontend

The technologies that are implemented in the Control Music website are CSS, HTML, and JavaScript. The frontend of the website is the part where user can interacts with the system. While creating and developing the control music website different buttons, colors, logo, text, fonts which are the basic parts of CSS, HTML and JavaScript are used for leading all these things into the action. Furthermore, the frontend is not only a CSS and HTML things as the website must be responsive in different size of screens such as mobile-first projects on the web from using bootstrap, CSS, HTML and JavaScript as bootstrap aids to quickly generate the ideas from the implementation of the grid system which are responsive, dominant plugins and wide prebuilt elements are also built on jQuery. Similarly, jQuery is used as a framework as jQuery is fast, smaller and a feature of the JavaScript library. With the use of jQuery, it makes the things like HTML document traversal. Similarly, it will be useful in animation and event handling.

Moreover, the control music website design is in responsive design as it is very significant that can help to resolve a lot of problems and difficulties for the website. As it will style the control music website in a mobile-friendly manner and will improve the way how it will be looking on the devices that have both large and small screens. Similarly, it will keep the images from being larger than the screen width. Similarly, it will also help to develop the rankings in search engines.

Home Page
Top songs page
Implementation of code of top songs.
New Released Song Page.
Recently Played Songs Page.
Library Page.
Displaying songs in library page according to artist’s name
Displaying the songs according to albums of artist in library page.
Displaying the playlists in library page.
Login Page.
Implementation of code of Sign In.
Sign up Page.

Backend

The technologies that are implemented in the Control Music website for the backend purpose is Python where Django framework is used in it.  As Django is a meeting of Python libs that lets in the fast creation of a qualitative Website.  Moreover, python is used in the backend as it is very convenient to work with Python. Furthermore, it is useful in the creation of the maximum value in the long term. Similarly, there is use of web scraping as it lets fast and effective extraction of data in the form of news from various sources. As the web scraping tool will load the URLs that is set by the users and will render the whole website where it will be convenient to extract any data of web by simple point-and-click and file in an achievable format. Similarly, there is use of Application Programming Interface (API) as it helps to retrieve and send data. Moreover, API is a set of functions that lets an application to data access and interact with operating systems, software components and micro services. As API conveys the users reaction to the system where as it sends the systems reaction back to the user. Similarly, there is implementation of AJAX as it lets the web pages which can be updated asynchronously from the exchanging of data with the web server. As AJAX helps to update the parts of a web page where there is no necessity of reloading the entire page.

Setting path in the urls.py.
Creation of models.
Sign in Function.
Sign in Function.
Search Function.
Library Function.
Favorite Function.

Database

Similarly, the database that is used for the backend purpose in the Control Music website is Apache and MySQL.

List of Table

Songs details in meta data table.
Playlists details in table.
Artists details in table.

Agile

Similarly, there is implementation of Agile in this project because it improves the quality and mainly it focuses the users and it tries to fulfill all the requirements of users

Future Enhancement 

This is a group work project we have made control music website, in this website we have made many feature but also we want upgrade in our website so some of features we want to add in future are listed below: 

  • There will one of the features i.e. Voice Search that we want to add in future. This feature let users to search by their voice in searching field. This feature mainly helps to differently able person; it may be save the time for all types of users.
  • In the future, there will be a feature i.e. Premium as if users want to download the song the user needs to pay. The paying method will be accepted through card. Till now we have not decided the amount but we have decided that the amount will be……so that all can afford. We will have 3 option to pay first is 1 month premium, 3 months and 1 year. Downloaded song will also be available in offline mode
  • Similarly in the near future we will create an app version  for this website as for now control music is in website, in future it will be upgrade in application so that all users can download in their mobile and enjoy in every time. But this application can only be run, if device is connected to internet but they can download in offline mode their song after paying to application. 
  • In the audio settings, users will be able to select different kinds of settings for listening online i.e. Streaming quality or offline i.e. Download quality. As in the streaming quality greater the stream quality, there will be use of more data. Similarly, in the download quality greater the download quality, there will be use of more space. 
  • Similarly, there will also be a new feature such as where users can view the lyrics of the songs while it is played as they can also get the information about the song such as interesting facts behind the motive of writing this song.
  • Similarly, another update in the Control Music website is that users will be able to remove the search history as they can filter it out whatever the songs they searched.
  • Similarly, another update in the Control Music website is that users will be able to link their account with other apps as the Control Music account will never integrate with a third party app without the consent of the user.
  • In the near future, there will be another update in the Control Music website i.e. Concert page where users can find the available concerts of the artist they love and find out when and where the artists  are performing live.
  • Follow to brands or artist: Follow is the new feature which we want to add in future. The user can follow to brands or artist by clicking their profile according to their choice. The list of follow which user has done will be appear in user profile. They can unfollow too by clicking twice on follow button.
  • Group: We will try to add this feature. In this feature the users can listen song in group .To listen song in group they have to send the link to their friends which they have been currently listening.

Design

Which programming paradigm you are going to apply for implementing your application?

Programming Paradigm refers to solve the error using the programming language and it also help to do task related to programming language. While implementing programming paradigm there are lots of rules which need to follow. It consist many programming language. It is here to make the programming easy so can easily understand.  There are four kinds of Programming Paradigm which are listed below:

1. Imperative Programming Paradigm: This programming paradigm is known as one of the oldest paradigm and it established on Von-Neumann architecture.

Advantages

  • It is very easy to apply
  • Loops, Variables are hold in this programming                                                                                         

Disadvantages

  • It is very hard to solve problem
  • In this programming, parallel programming is not able to done

2. Logical: Logical problems are solved by this programming for example: Sudoku

Advantages

  • It is very easy to solve because of the software itself solve the problems.

Disadvantages

  • In first users were not served properly because of few fund.

3. Functional Programming Paradigm: It is the function that is based on mathematical function and it is mainly focus on what to solve and how to solve. It’s mainly focus on expression rather than statements.

Features of Functional Programming Paradigm

  • Pure Function
  • Recursion Function

Advantages

  • It tried to remove the cause of errors.

Disadvantages

  • It doesn’t have more efficiency

4. Object Oriented Programming

We are using Object Oriented to apply for implementing in our application. This is one of the popular paradigm. Object Oriented is defined as programming paradigm which is based on the object and it also defines data type of the data structure. It is a computer programming model that helps to make the design of software instead of function and logic. Object Oriented tries to increase productivity .The table who has unique attributes and behavior is known as object.

Advantages of Object Oriented Programming:

1. Object Oriented Program can be reused and easy to main the code.

2. It is more suitable for large amount of data rather than small.

3. It can also be perform in real based scenario.

4. It is cheap while developing the software.

5. It improved in software maintainability.

Class diagram

Class Diagram is part of Unified Modeling Language (UML) and it is a type of static structure diagram that shows the different types of system classes and it shows their attributes, their operations and their relationship among them. It is the back bone of programming paradigm. We use object oriented because in object oriented because we have to make class diagram through the class diagram the complexity will be remove and we will gain more information. The relation of table in website will be explained in detail. The people who don’t know much about technical they can easily understand through class diagram.

Class is refers to container which has the collection of variables and methods. Only one class can be created in program and there will no memory allocated. It is also known as the logical entity. Examples of class are Human Being, Place, and Car.

Object is instance of class which can created multiple object in single class. It has the physical existence which means when its created memory space will be allocated. Example of object are Shyam, Kathmandu, and Accent.

Class Diagram

From the above diagram we can say that we have five tables i.e. Favorite, Profiles, Album, Recent and Artist. Relation of Recent to Profile is many to many because in profiles there can be more recent song which user listened and in recent there can be many profiles where there will be record of different user. Similarly, Favorite and Profile has also many to many relation, User can save many Favorite song. Arrow sign refers to Profiles depends on album but album don’t have information of profile. Likewise Album depends on artist.

Thus, this is class diagram of our website” Control Music”

Conclusion

Overall, this project is all about music management system i.e. Control Music website where users can listen to any type of songs and albums of the artist of their choice and taste. Similarly, it provides an opportunity to the artist where they can gain more fame as many users will be listening their songs. As in this website admin can only update the songs where users can preview the songs uploaded by the admin.

Similarly, while doing this project analysis was done to gather its requirement where class diagrams are also used to explain the relationship between the entities. Moreover, in the website for the frontend there is implementation of programming languages such as HTML, CSS, and JavaScript and for the frontend framework jQuery is used. Similarly, for the backend there is implementation of programming languages such as python and for the backend framework Django is used and Database servers MySQL and Apache are used. Similarly, while doing this project the tasks were assigned to each and every group members of Control Music website. However, while doing this project there were also many errors in the code with the help of our lecturer and also because of the teamwork we were able to accomplish this project. Similarly, we were able to enhance our coding skills.

References

Features – Spotify

https://support.spotify.com/us/using_spotify/features/

Case Study – Spotify

https://www.sarahkdesign.me/case-study-spotify

An Introduction to Usability and User Experience in Web Design

https://www.a2hosting.com/blog/usability-and-user-experience/#:~:text=In%20web%20design%2C%20usability%20refers,to%20find%20what%20they%20need.&text=Usability%20is%20about%20functionality%2C%20while,the%20name%20suggests)%20about%20experience.

Functional Programming – Introduction – Tutorialspoint

https://www.tutorialspoint.com/functional_programming/functional_programming_introduction.htm

What is an API? The (Complete) Application Programming Interface Definition

https://www.bigcommerce.com/blog/what-is-an-api/#what-is-an-api

Appendix(s)

This is the home page of the website where user can see and explore music.
This page show top trending music of the week for the user. Music will place according to number that are played most of time.
In this page user can create their library where user can see library according to the songs, albums, playlist etc.
This is the audio player where user can change pause/ play, backward and forward and show other details about songs. User can see this audio player in every panel to make user easy to access to the player.

User-Centered Interface Design : Designing for Usability

Toilet App : SUMMATIVE REPORT

1.    ABSTRACT

I made a design for an app called Toilet. To make use of the technology this app is designed.  I used Balsamiq wireframe to design the mid fidelity of app to know what can be improved in app and its features. Later, using the concept applied to Balsamiq wireframe I designed high fidelity wireframe in Adobe XD. Everything was taken in consideration like App there, fonts, features and community to help people through app. Prototype was made to simulate real app like mobile environment.

Whole purpose of building app is to provide people facility with ease. Modern problem needs modern solution. It removes hassle of asking someone for help. 

Here this app provides information of toilet. User of this app can see the location of toilet and know if the toilet is paid or free. This app is also telling if disable has facility in toilet or not.

People can view their timeline and they can also download offline maps as they wish. Main value from this app is that they can get information from this app and also contribute to app which again benefits user.

2.    INTRODUCTION

I like to travel for photography. In many cases I felt very difficult to ask someone where the toilet is. So, I was thinking if there was any app for our country to be specific. I luckily found one app “Any Time Toilet “. Soon that happiness turned off. I found that app incomplete. Data of toilet were very less. And so, the design of app, we couldn’t take a direction to the nearest toilet.

Offline maps could come handy but there was no option.

I learned Adobe XD to design the usability of that app from ground level. UI design was simple but to make UX it was quite time consuming and tough.

This app has importance of its own. This app can help Nepal in “Khulla disha pisab mukta”. It can come in handy to many people with various age group. It is importance for Sociable, outgoing people who follow travels and trends. The app uses location from the mobile device using GPS and helps to find the toilet nearby.

I used the usability method to make new upgrade possible. User testing was done on this prototype. Search were added in order to find toilet and its location. You can easily have this app simply by going to Appstore and installing it.

The final output of this app is great. User can find toilet and its details. User can also save their money if they can find free toilet nearby. They can use location or search feature. They can tract their activities. They can contribute to the community which will benefit them. People can actually rate and review the toilet. This app is can also be used as accessibility. There were lots of feature missing in the original app. This prototype can be the science of making technology work for people. On the basics of learnability, user can access important data at first and other at few or less taps. This app is designed in the sense of efficiency, usability and satisfaction in mind.

3.    BACKGROUND AND MOTIVATION

Toilet app can come handy to all the people of Nepal. We can find the nearest toilet with details. Once downloaded offline maps toilet app can run offline only requires GPS to be turned on. App is designed to complete task in few clicks. This app can be useful to various age group. This app can also come handy for disabled people. This app was basically created to increase our self-esteem. Many people find difficult to approach other person to ask and only to listen no we don’t have toilet or I don’t know.

So, this could address the problem of modern society and impact the old ways of awkwardness. User now can know if the toilet is paid of not, even when they are not nearby toilet. Download offline maps were not available in ANY TIME TOILET app so, its was added to address problem. User have can also contribute by adding, rating and reviewing toilet, which will directly benefit others.

3.1 Problem space

Here idea is that if user enters data which will populate on explore tab and if others enter toilet data then it appears in individual user and can be benefited. Which is win-win situation for everyone. It should be lot easier to find toilet.

The app standard was taken to consideration. Suitable color palate theme was chosen with font.  Lots of feature were recommended and were tested and examined later. Critical evaluation of an object was carried out.

This app does some basic stuff to users like previewing toilet on maps and also in list view. User can preview their contribution through app. They can get their points

App theme is chosen for UCD. Font were used like normal ones but with little tweaked ones like ‘nexa’ font. And app animation to make impression on users. Shows cool animation on refresh/ reload.

4.    METHODOLOGY

4.1 UCD

UCD (User-centered design) is mainly about designing user friendly interactive technologies to meet potential users needs or demand. An optimistic approach to invent new solutions are User-centered design. UCD different stages are establishing requirements, understanding user needs, evaluating designs, prototyping alternative designs, etc. System that were used for app and designed were considered to design/ build something beautiful and useful. It can improve productivity, reduce human error.

Understanding the user needs data were gathered by user research method. By observation, interview, questionnaires, focus groups, participant analysis data gathering techniques were applied. While developing any project there are methods used for the goal of the project, in this project research method is used. It can help in build a new product, fact validation and solving problem. Asking user question or task to perform, gathering information and developing as UCD.

Story board can be any visual representation of sequence of story or film and break down of any sequence of action into individual frame. It can be from drawing of pen and paper or digital drawing with direction and dialogues to unfold the story.

4.2 PERSONA

5. FORMATIVE USER STUDY

5.1 Formative study on Toilet app was done by PACT Analysis:

People:

To all individual who will be user of new toilet app:

•             users will be in the age around 12 to late 40’s.

•             travelling people who follow travels, trends and are more sociable,

•             Traveler or normal people.

All targeted users of above ages would already have the level of skill to use this app, as this app is similar to almost all apps in Appstore. All targeted audience know where they are going or travelling and they are motivated. I see my audience as a healthy people who are always on the go with fast life styles.

Activities:

This app will be used for short period of time. People will use to navigate to near toilet. They can also see their activities in their timeline. User can still use app to know more about same place with more description. Target people can make their collection to share it or to keep it for themselves. The app will have responsive layout so that user will be able to view all content on different screen size. There should not be any latency in app as the user wants quick updates with less data consumed. User will be able to download for offline use.

Context:

App is designed to use anywhere at any location. It can be used at home or on the go. To find the nearest toilet you may use Wi-Fi or need a cellular connection. As the app lets user to choose username and password of their choice which adds security to the app and user’s data. The timeline section of user will be private. User can download offline maps while in Wi-Fi to use it later.

Technology:

Toilet app will not be easy wasting on the battery or consuming more battery it will access data and location while on the app, After the application is closed or in background it will use nearly zero power and data. The design of the toilet app makes it easy for usability and the look and feel of the toilet app is simple and productive. The application will be smooth and reliable to the user, by this giving an excellent experience to them. User that wants to use this app can easily download from play store or Appstore on their mobile devices.

5.2. HTA

HTA stands for Hierarchical Task Analysis. Hierarchical task analysis (HTA) is a widely used type of Task analysis where a high-level task is decomposed into a hierarchy of subtasks. An HTA is sometimes referred to as a hierarchical decomposition. When designing a new system, hierarchical task analysis lets you explore various possible approaches to completing the same task. When analyzing an existing system, it can help you to optimize particular interactions.  (Hierarchical Task Analysis, 2020)

0. Using Toilet App

   1. Get your own location         

   2. Search toilet

   3. Select toilet from the list    

               3.1 Get direction of toilet

               3.2 Check toilet status paid or free

               3.3 Check if it is available for disable people

               3.4 Rate and then Review the toilet

               3.5 See rating and Read reviews

   4. View used toilet history

               4.1 Sorted by recently

               4.2 Sort by most visited

  5. check offline maps

               5.1 click download on any state map to be downloaded

               5.2 Refresh to check map availability or expiry

5.3 Turn on auto update to automatically update offline maps on background

5.4 Turn on download over cellular data

plan 0: do 1 if you need your location, do 1 and go to 3, if you cannot get location then to find the toilet

do 2 and go to 3

Plan to download offline maps on cellular data

Do 5 go to offline maps tab, do 5.1, 5.2 and 5.4.

HTA using toilet app

5.3 Story boarding

Story Board

6. FIRST PROTOTYPE

A software is tested using technique in which a certain part of all part is repeatedly tested to ensure that the app or website is correctly placed or tested or not. Gorilla Testing is suitable for this method for thoroughly examine prototype. Five users were taken for usability testing. Mobile prototype was used for testing. App technology were tested and so the app design. Both qualitative and quantitate data was captured. An approach to recurring guide testing procedure is taken.  We can clearly see that we can developed an android app first. Gorilla testing can be helpful cause it is neither unique nor performed without preparation.

User can have onboarding experience which can say about this app in slides.
Also gives user beautiful prompt on location access.
App let you know activity logs based on location history and searches.
Maps can be downloaded for offline uses.
Location of toilet can be shared and saved in collection.
User can contribute in this app, which is presented with animations.
User must feel secure with their data.
signup page can take username field for easy login.
Email verification process is added for security purposes.
Cool animation in introduced for user patience while verifying.
user can login or User can easily sign up with other services too.
After login in user will not have to go through onboarding and login process again. Explore tab prompts, while app searching its location.
User can search now and find list view of toilet.
user can preview detail view on any list click
On timeline tab we can see recently visited history and share it or clear it left swipe.
Rate it with right swipe and filter it by recently or most visited.
We can download maps for offline uses.
User can reload to check any updates.
We can see the save tab which helps to save toilet in collection and share or unshare.
User A can follow user B collection. user A or user B can further share this collection to user C.
We can create new collection.
Contribution tab was added for growth of community which indirectly helps users.
user can drag on map to add exact position of toilet.
User can provide details which is verified and later populated in map.

6.2 USER EVALUATION OF FIRST PROTOTYPE

Methodology is best way to evaluate prototype for usability testing. In this prototype Gorilla testing is done since it doesn’t require sum of money and does not require specific research skills. It can be used as a demonstration the value of research and user testing.

After completion of first prototype usability test should be performed. We need users to perform usability testing. Usability test consent form were made so that user participating in testing can know what’s the drill. After user consent form was signed users were asked to perform task listed below.

A. Task

  1. Can you show me how to register using email?
  2. Can you show me how you find the nearest toilet?
  3. Show me details of nearest toilet?
  4. Share the nearest toilet.
  5. Save nearest toilet to your collection.
  6. Show me your most visited toilet?
  7. How do you upload display image?
  8. Show me how to add a toilet?
  9. Download offline maps of state 1?
  10. Create new collection.
  11. Finally, can you show how to logout?

B. Look and feel

  • Do you like theme of app?
  • Is this well-organized?
  • Is this app complex to use?
  • Do you think you need technical person to run this app?
  • Do we need app onboarding?


6.3 First usability test: data capture sheet

The researcher should fill in:



6.4 Satisfaction

The app was pleasant to use (please tick as appropriate)

Look and feel

  1. Do you like theme of app?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Is this well-organized?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Is this app complex to use?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Do you think you need technical person to run this app?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Do we need app onboarding?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
Bar chart showing Satisfaction after usability testing of prototype 1.

6.5 Requirements for user evaluation of first prototype

Tester marked word

1st tester performed well; he was confused on direction button as share button.

2nd user thinks it is very important to have onboarding to an app. She finds it hard to figure out to perform certain task and then later could do any task due to learnability. She wanted to see further process in contribution.

3rd tester performed all task with excellency and finds theme of app very pleasant. He would like to add automatically updating offline maps on background.

4th tester took time to figure out detail view of nearest toilet.  He found difficult to unfollow the saved collection which was already followed.

5th tester finds app is easy to use in few clicks and says people will finds app complexity will decrease as more the user gets using it.

7. SECOND PROTOTYPE

Further walkthrough of contribution
user can also further share the collection. User can now easily unfollow.
user can toggle auto update and forget the Hassel to always check update. user can also download over mobile network

After completion of first prototype usability test were performed. We found users to perform usability testing. Usability test consent form were given so that user participating in testing can know what’s the drill. After user consent form was signed users were asked to perform task in which user found lots of interesting things in the app related to ideas and well app designed. There were also something that user found missing or hard to use. User needed more on contributions so that it could be guided path to earn point. Tester found one critical function was missing in which user has to update maps manually time to time which can be done easily with automatic updates turned on.

There were lots of thought too be added to prototype. Second prototypes was made putting some idea and ease in mind. Share sheets were designed, Automatic updates were made available with simple toogle. Now user can also download maps on cellular network. Guided contribution were added later for user ease. There is now option to unfollow the following collection. User can also further share followed collection. These all above feature were added by which all requirement were addressed. Both qualitative and quantative data were captured in testing.

7.1 USER EVALUATION

After completion of second prototype usability test should be performed. We need same users to perform usability testing. Since usability test consent form were made so that user participating in testing can knew what’s the drill. Tester were asked to perform task listed below.

A. Task

  1. Can you show me how to download using mobile network?
  2. Can you show me how to turn on auto update?
  3. Show me how you can further share followed collection?
  4. Unfollow collection of top.
  5. Show me how to add a toilet?

B. Look and feel

  • Is this well-organized?
  • Is this app complex to use?
  • Do you think you need technical person to run this app?
  • Do we still need app onboarding?


7.2 Second usability test: data capture sheet

The researcher should fill in:

7.3 Satisfaction

The app was pleasant to use (please tick as appropriate)

Look and feel

  1. Do you like theme of app?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Is this well-organized?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Is this app complex to use?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Do you think you need technical person to run this app?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
  • Do we need app onboarding?
 Strongly disagreeDisagreeUndecidedAgreeStrongly agree
1    
2    
3    
4    
5    
Bar chart showing Satisfaction after usability testing of prototype 2.

7.4 Requirements for user evaluation of second prototype

Tester marked word

1st tester performed well again; now he able to identify direction button as share button. He did every test well.
2nd user likes onboarding thinks it is very important to have onboarding to an app. She did not find app hard to use because of learnability of app. She now likes further process in contribution.
3rd tester performed all task with excellency and finds theme of app very pleasant. He like how automatically updating offline maps on background is added to website. He also compliments on offline maps downloading over cellular networks.
4th tester took no time to unfollow followed collections. He likes the app UI.
5th tester finds app is easy to use in few clicks and says people will finds app complexity will decrease as more the user gets using it. He likes app theme and overall, everything.

8.DISCUSSION AND FUTURE WORK

There are lots of feature to added which will be added in future. There were maps to zoom in and out and list view to show nearest toilet, we could be able to preview it in details view. So even after second prototype are made there are lots of small feature which could make more difference in term of usability:
a. Even though design is good later again usability test can be done to improve design and get access to anything with fewer clicks. Lots of focus to design and features were given to wireframe and then first prototype, after usability testing there were changes to make in first prototype. So, second prototype were made after that there were even more features to bring to the app so it was pushed to future work.

b. Custom maps can be made which can replace google maps used in toilet app. User could tap on maps to get toilet details. A better integration of precise location history so that user can get smarter list in timeline tab. Starred collection should be easy to save if user click in save in detail view of toilet the popup should come in which user can save or create new collection easily.

c. Collection could be sorted by recently, most place added or by alphabetically. Also, for future work user could see each other profiles with point to compete to each other and also a chart board to show top 100 contributor.

d. User should be able to change their name, username which is left for future work. User can share their profile card in which other user can see contribution made by that user. User should have option to open app from last state so that if he/she was on contribution menu nav and exits the app, next time he/she launches app it would directly open contribution menu nav.
Later in future, features should be added and third prototype should be made and tester should be participated, of course with consent form. Testing should be done. Since it is never ending process, there should be more or less changes to survive modern world. In future work we can also raise funds and donations so that we can make public toilet on many busy places at first and later covering the areas.

9.REFERENCES

Usabilitybok.org. 2020. Hierarchical Task Analysis | Usability Body Of Knowledge. [online] Available at: <http://www.usabilitybok.org/hierarchical-task-analysis> [Accessed 21 August 2020].

10. APPENDICES

10.1 Testers

1
2
3
4
5

10.2 Scanned consent form

MongoDB : Games Data

Task 1: MongoDB : Game Data

1. Create a database named <> and a collection named <> and insert the above data.

2. What is Map-Reduce? Explain the working of map-reduce with an example

3. Write a reduce function that calculates the total score for each player with the publisher name and count the number of players in each team.

4. Count the number of players in Hays Wise.

5. Remove the player “Alpha” from Ape Escape.

6. Update player name “Jordan” to “Michael” and score to 300.

7. Show all the number of players with their publisher name.

8. Show total goals scored by each country name.

Task 2: Development of a graph database for a given dataset

Find “Task_2_PremierLeauge_2019.csv” file from the Moodle. The dataset contains
information about the English Premier League (EPL) matches. You are expected to
design and create a graph database to visualize the dataset and to answer the following
queries:

  1. Create a Data Model diagram for “Task_2_PremierLeauge_2019.csv” dataset.
  2. Create nodes and relationship according to the Data Model which you have created
    in question no 1.
  3. Show all the EPL team involved in the season.
  4. Count all the matches refereed by each referee.
  5. Who refereed the most matches?
  6. How many matches “Arsenal” won as the away team?
  7. Display all the matches that “Man United” lost.
  8. Display all matches that “Liverpool” won but were down in the first half.
    Note:
    Find “Task 2 – Match Keywords.txt” file for the keywords used in the EPL matches.

Task 3:

“Column-oriented storage in a database system are more suitable for analytical
reporting than the row-oriented database.” Justify this statement with suitable
example.

=>

Task 1

Question 1

Insert into collection 1
Insert into collection 2
Insert into collection 3
Result in table
Result in JSON

Question 2

MapReduce is a programming framework that allows data to be distributed and processed parallelly on a large sets of data environment. MapReduce consists of two primary tasks, Map and Reduce.

But the overall process of MapReduce can be divided into 6 stages; Input, Input Splits, Mapping, Shuffling, Reducer and Final Output.

Map reduce chart

To further evaluate the stages of MapReduce with an example, the fig (6)’s breakdown as following:

Input: The initial stage of MapReduce is to gather inputs and store it into blocks of data as provided in one big cluster.

Input Splits: This stage splits every blocks of data and prepare for mapping.

Mapping: Mapping breaks down every unique set of data, in this case every unique set of words and group them together within the block.

Shuffling: Shuffling is responsible to group the similar data from all the other cluster of data and group them together.

Reducer: Reducer reduces the block sizes as unique data of the blocks is divided into key and value pair, key being the actual data and value being the frequency of similar data.

Final Output: Finally, the reduced blocks are clustered into one with each unique data with their frequency as final output of data.

Question 3

Map reduce function
Map reduce result

Question 4

Task 1 question 4 query and result

Question 5

Task 1 question 5 query and result

Question 6

Task 1 question 6 query and result

Question 7

Task 1 question 7 query and result

Question 8

Task 1 question 8 query and result

Task 2

Question 1

Arrow diagram of EPL

Question 2

Neo4j graph create query
Graph result

Question 3

Task 2 question 3 query
Task 2 question 3 result in text 1
Task 2 question 3 result in text 2

Question 4

Task 2 question 4 query
Task 2 question 4 result in table 1
Task 2 question 4 result in table 2
Task 2 question 4 result in table 3

Question 5

Task 2 question 5 query
Task 2 question 5 result in table

Question 6

Task 2 question 6 query and result

Question 7

Task 2 question 7 query and result

Question 8

Task 2 question 8 query and result

Task 3

“Column-oriented storage in a database system are more suitable for analytical reporting than the row-oriented database.”

Column oriented database stores data by systematically arranging data by column of field, maintaining all of the data integrated with a field adjacent to each other in memory of database. This arrangement of tables is an important factor in analytic query performance because of the drastic reduction of overall disk input and output requirements and ultimately reduces the amount of data needed to load from disk (What Is A Columnar Database? – AWS 2020).

For example, on how a normal table is stored in column-oriented database. Let’s take the following table as a sample.

ItemPriceWeight
iPhone9991
Samsung S98991.2
Google Pixel 37991.5
Example table

Each column is divided into separate storage disk, in first storage only the values of “Item” is stored.

Storage 1
Item
iPhoneSamsung S9Google Pixel 3
Column oriented data storage 1

On second storage only the values of price are stored.

Storage 2
Price
999899799
Column oriented data storage 2

On third storage only the values of weight are stored.

Storage 3
Weight
11.21.5
Column oriented data storage 3

The difference in this storage pattern is what makes retrieval of column field for data analysis quick and effective. If analysis had to make for getting the sum of prices of items, the columnar database goes to the storage 2 where all prices are stored and retrieves the values out of it. This saves much processing time and memory because it does not have to go through all rows to get those values of prices.

Advantages of Column Oriented Databases

  • Fast at retrieving and comparing data of column values.
  • Quick aggregation on larger datasets.
  • Compresses data column wise reducing memory usage.

Disadvantages of Column Oriented Databases

  • Lacks efficiency for online transaction processing usage.
  • Can be comparatively show when queries involve only a few rows.

References

Kiran, R., 2020. Mapreduce Tutorial | Mapreduce Example In Apache Hadoop | Edureka. [online] Edureka. Available at: <https://www.edureka.co/blog/mapreduce-tutorial/> [Accessed 19 August 2020].What Is A Columnar Database? – AWS (2020) available from <https://aws.amazon.com/nosql/columnar/> [19 August 2020]

Data and Information Retrieval

Task 1: Database design

Introduction
The International Space Station (ISS) is a habitable artificial satellite in low Earth
orbit. It is the ninth space station to be inhabited by crews following previous orbital
stations that were launched by the US the former Soviet Union and later Russia. The
ISS is intended to be a laboratory, observatory and factory in space as well as to
provide transportation, maintenance, and act as a staging base for possible future
missions to the Moon, Mars and beyond. In order to support the crew and overall
operation of ISS the space agencies in charge of running the station conduct regular
missions to launch spacecraft carrying payloads of essential or replacement
equipment up to ISS. A payload inventory, see table below, is recorded of each
mission, consisting of the space agency leading the mission and the equipment
payload to be sent up to ISS. The overall weight of the payload is also determined in
order to calculate the fuel needed for orbital insertion of the spacecraft to successfully
rendezvous with ISS.

Currently there is no database being used for managing the payload inventory
information in the table above.
This task is split up into two parts:

  1. In its current form, it’s a traditional DB. Keep it that way? Your call. Explain your
    decision.
  2. Design the database for the information above. Implement the DB using any
    method of your choice (SQL, MongoDB, Cassandra DB or Graph DB).
    Note:
    If it is a relational database it should be normalized first.

Task 2: Poster of ethics associated with a medical database

A hospital is considering producing a database from patient data it has collected over
the past 20 years to analysis itself and to sell to other interested parties. You should
create an A3 sized poster to describe ethics issues that the hospital should consider
before creating, analysis and making available this database. There are various
documents on the web on how the create a poster using PowerPoint. Please explore
these before you start.
Evidence:
You should create you’re A3 sized poster in PowerPoint and save it as a pdf
document for submission with your report. Your poster should identify ethical factors
that need to be considered when developing and analysis such a medical database,
offer recommendations to the hospital and drawn conclusions.

Task 3: A data mining system for a Hospital

A hospital has been collecting a great deal of data on their patients and have heard
that use of data mining could improve their service. They would like you to create a
brief report that includes the following:
i. What data mining is and an appropriate data mining application for the
Hospital.
ii. How you would go about creating the system using the data mining life
cycle below.
iii. If the small amount of data (diabetes.arff) collected so far by the hospital
is appropriate for assessing if a person has diabetes.
iv. The use of a data mining model such as a multilayer perceptron or
decision tree to determine whether a person has diabetes. Note, you will
need to use a data mining tool like WEKA to create your model and use
the diabetes.arff data to train and test this model.

Deliverable:
Include a report section that addresses the four sections above and fulfils the marking
criteria.

Task 4: Your Big Data Big Idea

Identify and implement an idea that you have about how you would use Big Data for
something intriguing.

  1. Purpose an idea and clearly outlined (What is the purpose of your data collection
    and analysis). In the lecture notes above, you can see that each idea is specific and
    has a specific purpose.
  2. Acquire the Data. You can do that in many ways including using available public
    large data sets.
  3. Analyze the data in order to achieve the objective you set out for yourself in step 1.
  4. Produce a report the includes your results, data visualization and thoughts.
    Evidence:
    Write a short report about what you did and how it worked out. No more than 1000
    words. You should carry out research into these areas and reference your work using
    the CU Harvard Style.

=>

Task 1: Database design

Question 1

I have proposed MongoDB for ISS database design and created the collection according to the data.

MongoDB is a document-based database which is built on a scale-out architecture for scalable applications which means it is a structure that allows collaboration of machines to work together which can ultimately create fast systems that handle huge amounts of data. Document based databases are flexible which means it can handle variations in the structure of documents and data (Why Use MongoDB & When to Use It?, 2020).

I have particularly used MongoDB because:

  • The document data model is a powerful method that can store and retrieve data quickly.
  • MongoDB can easily support larger volumes traffics and data.
  • MongoDB can enable collaboration between larger of team members.
  • MongoDB can store, manage, and search data with variety of data types like text, geospatial, and even time series dimensions.

Question 2

Collection create query 1
Collection create query 2
Collection create query 3
Final result in tabular format
Final result in JSON format 1
Final result in JSON format 2
Final result in JSON format 3

Task 2: Poster of ethics associated with a medical database

Ethical poster for hospital

Task 3: A data mining system for a Hospital

Question 1

Data mining is the process of exploring and analyzing sets of data to uncover efficient and meaningful patterns. The aim of data mining is to predict future trends and outcomes from historical or past data (Data Mining Explained, 2020).

The application of data mining can be as follows

  1. Database marketing
  2. Credit risk management
  3. Healthcare and bioinformatics
  4. Fraud detection
  5. Spam filtering
  6. Sentiment analysis

Data mining in healthcare

Healthcare professionals can use statistical models to predict the future of patient’s health condition per the risk factors. Other data like Demographic, family, and genetic data can be used to model a dataset which can help patients make changes in their lifestyle to prevent or lower the onset of negative health conditions preemptively.

Benefits of data mining

Automated Decision-Making: Data Mining can allow healthcare services to continually analyze data and automate the critical decisions of patient’s future without the delay of human judgment.

Accurate Prediction and Forecasting: Data mining can facilitate efficient planning and can provides healthcare services with reliable prediction of patient’s health based on past trends and current conditions.

Cost Reduction: Data mining can allow more efficient use and allocation of healthcare resources. They can plan and make best decisions with accurate prediction that will result in maximum cost reduction.

Question 2

Stages of Data Mining

Problem definition

In context to hospital and healthcare services, the prime factor of problem definition in data mining can be the forecast or prediction of future health risk of a patients. It can also aid healthcare employees to make critical decisions upon proceeding to either financially or medically. 

Data gathering

The data for hospital can be gathered with old data entries of hospitals. This is one of the important and early stages of data mining process. The data gathered should be consistent, accurate and meaningful.

Model Building

After data is collected next step is to build a data model for prediction of future trends. The model can be trained using different approaches along with different algorithms as per the needs of hospital.

Use Knowledge

Finally, upon completing the data modeling, it can be used to evaluate and predict the future outcome of patients related with the old patient’s behavior and sickness. The predictions will be relevant as per the data fed in training. If the results are inconsistent and inaccurate, future evaluation and filtration of data can be retrained for better outcomes.

Question 3

The small amount of data provided for data modeling is not effectively relevant in case of data mining. One of the primary reasons for this irrelevancy is that the prediction of small data modeling is very limited and inconsistent. For example, I have created 2 data modeling trees; one with small amount, with 7 datasets being fed to model data and another with around 700 datasets.
The tree made from small data is separated with 2 leaves only each extending from preg.

Upon evaluating, the result shows that it the preg is less than or equals to 4 it is tested negative and if greater than 4 it is positive.

While the decision tree made from big amount of data has multiple leaves extending from plas and preg is a sub leaf of it.

When comparing both the decision tree, there is a huge difference between them. The critical differences are the variables and nodes of each other and the result predicting whether it’s positive or negative.

If the data with any other variables other than preg like mass, age, pedi or preg are provided to predict from the first data model, the result will certainly be inconsistent and inaccurate. Where as from the second data model it can easily predict the strong and accurate result from those variables.

It’s not that we cannot make the data model from small amount of data, but the results, predictions and forecasts are highly in risk of being inaccurate. Hence, the more the data provided to model for a data mining, the better the result and prediction outcomes it can offer.

Question 4

Data mining Weka 1
Data mining Weka 2
Data mining Weka 3
Data mining Weka 4
Data mining Weka 5
Data mining Weka 6
Data mining Weka 7
Data mining Weka 8
Data mining Weka 9
Data mining Weka 10

Task 4: Your Big Data Big Idea

Question 1

I have a proposal of providing the data analysis and visualization of datasets of Netflix Tv shows and movies. The main idea behind this data analysis is to get an in-depth knowledge of data of Netflix. The size and amount of data of Netflix and how the data are divided into their data types. Additionally, I think it would to efficient and effective to break the huge data of Netflix to gain insights like how many shows are movies and how many are tv shows. Likewise, it would also be interesting to discover the differences in data within the dataset.

I will be visualizing the whole network of data, and also other charts and graphs are generated to aid some valuable insights to the dataset of Netflix.

Question 2

I have acquired this dataset of Netflix on website of Kaggle. URL for this particular dataset: https://www.kaggle.com/shivamb/netflix-shows. I have not used all the data provided by the link, but I think the remaining data I have used is enough to show my findings.

Dataset example of Netflix for visualization

Question 3

There are total 6236 numbers of unique records in this dataset. There are 6 columns on the dataset with headers as; id, type, title, rating, duration and description.

The id is the unique id of the show, the type contains either the Netflix show is a TV show or a Movie. The title is the main title of the show. The rating shows categorizes show in TV-rating like “TV-14”, “R”, “TV-Y”, etc. The duration consists either the count of seasons of show or total minute of a movie. Description is simply the description of a show.

Question 4

Data visualization using Gephi
Edges of R rated shows of Netflix
Data visualization – Top 10 shows of Netflix according to duration
Data visualization – Total number of Netflix shows with ratings
Data visualization – Total number of Tv shows and movies

References

MongoDB. 2020. Why Use Mongodb & When To Use It?. [online] Available at: <https://www.mongodb.com/why-use-mongodb> [Accessed 17 August 2020].

MicroStrategy. 2020. Data Mining Explained. [online] Available at: <https://www.microstrategy.com/us/resources/introductory-guides/data-mining-explained#healthcare> [Accessed 19 August 2020].

Django : NepaliGallery Website

1.1    Requirements

For this task you must design and implement your own website. You are free to choose your own ideas for this website. Your website must cover the following points:

  1. You must be creative in designing your website. Your website needs to offer novel solutions or distinct features to other existing/similar websites.
  2. You must use tools and technologies taught during this module such as HTML, CSS and JavaScript.
  3. You must use either Flask or Django as a templating framework.
  4. You must use either MySQL or PostgreSQL as database.
  • You must NOT use commercial software and/or 3rd party packages/libraries. For example, using Dream-weaver or Drupal to create your website is not allowed.

You must submit a reflective report for the website you created. The word limit for your report is 1,000 (+/- 10%) words. Your report must:

  1. Consider what you have learnt over the term.
  • Discuss each of the technologies you have used in creating the website.
  • Be reflective. For example, you must discuss your website was built in this way, and what you would do differently in the future.
  • Make good use of illustrative examples such as screenshots and code snippets.
  • On the cover page of your report, you must clearly mark a link to your Github repository where the source codes of your website can be accessed.
  • On the cover page of your report, you must clearly mark a link to your YouTube videocast.

Chapter 1 Introduction

1.Brief Introduction of the system

I have design clear and attractive website which includes different Html, CSS and JavaScript codes, well placed nav bar, image slider etc. I have included background image which can easily attract visitors view. Every JavaScript code that I have used helps my website run fast and functionally. I have used MySQL as the database system. Video I have made and upload describes even more clear about my web development.

2.Features of the system

My feature system includes a quality web content. It is clear and user friendly for the navigation. Although it is very simple and professional web design. Every links that I have used is very clear and connect speedy. It is well responsive also. My website and its content can optimize for different browsers, devices and users. It is one of the main features you need in your websites because if your website is not optimized well for mobile data users and download speed, users may leave your website. Responsive web design is key.

3.Aims

My aims are to gain even more knowledge from this subject web development which could help me more in future also. I have improved certain things about designing only but I need to learn more things about backend and database system to be successful in future.

4.Objectives

One of the basic objectives of my websites is that user can view my project at any time. It is very fast and easy for anyone. There is less chances of getting error when opening the website. It is user authenticate platform so user can update any information’s or id they can.

5. What I have learned

I have learned to use bootstrap codes, JavaScript function and codes which I didn’t knew before.  Learning from basic things to the vast one makes me even more clear. I have learned how to make my website viewed on mobile size using bootstrap rather than media query. Using bootstrap makes my work even faster.

Chapter 2 Frontend

  1. For front end I have used different technologies such as html, CSS and JavaScript. Html and CSS is very easy to use whereas JavaScript makes me a bit hard to learn. But I have used JavaScript code in certain place which made my website even more faster and attractive.
Home page in pc
Home page in mobile size
Responsive design in mobile size
responsive design in pc size

2. With the utilization of responsive design, all the contents and pages easily blend across all the devices and screen resolutions. And whenever you are viewing the website on your mobile phones or a laptop, it is very easy to navigate in spite of the differing screen sizes. With responsive design your user can easily read and navigate the site with the minimum resizing and scrolling.

Chapter 3 Databases

  1. I have used MySQL as the database for the for website developing and it is very comfortable to linked with my project.
  2. There are some advantages and disadvantages of MySQL that I have noted down:

Advantages

  • It is very fast and easy to use.
  • It is widely adopted

Disadvantages

  • It is very hard to scale
  • It always supports mainly and readable contents.
Tables on database
image of user’s photo database

Chapter 4 Backend

  1. My backend process is very clear and very easy to use also. I have used all needed codes and function in PyCharm. Different functions for login, signup form, and add, update and delete are completely set up and utilized. I have also included URLs, views system forms and app. I have linked different html pages perfectly. It can run at anytime with different browsers.
  2. Django is the technology that I have used as python frameworks when developing web. I think Django is one of the best and reliable technology for any web developers. I have installed it easily and migrate it with MySQL for the backend process too.
inserting data into database
previewing data in database
updating data in database
deleting data from database

3. It is used when you are testing your website in different platforms. It also provides different services to your websites in different devices such as smartphones, pc, laptops etc.

Chapter 5 Project Issues

1.Issues during the project development

During the project I was unable to view my updated images which was solved later. Browser was not working properly when I was running my project. I tried multiple times for multiple file upload which was unsuccessful, so I decided to implement this work on future update. I had issues sending mail while resetting password which was solved later.

One of the main limitations of my websites is the contents that I have included during my website. All contents are clearly visible and easy to use. Different icons that I have set in my website is working properly. Navigation bar is easily navigating with each other. User can easily choose and input their username password of their own while logging in signing up their personal data.

2.Future Works

Implement like and unlike button on this photography website. Nepali Gallery could be better if the artists could sell their photography and art in this website. Payment system is left for future work. Multiple file upload is missing for users will be implemented later. I am happy to say that is less future work to be done as this website works wonderfully for my project criteria.

Conclusion

After the completion of Modern web design, I came to know about bootstrap, JavaScript and Django. Website became easier to design with bootstrap. Lot of line of code were already defined. Work flow became easier, lots of time were saved. While creating slider I implemented JavaScript to make it functional. Backend was done using Django and MySQL as database. I learned that we could design database table form models.py which can be easy later for migration to new system. Over all this project was fun to implement my course work.

Website : nepaligallery.com

Nepali Gallery

Report : Computer and crime

Technology and its Legal, Social and Ethical Context

Computer and crime

computer is an electronic programmable machine where the actual machinery is hardware and the instructions and data are software. In this era computer is used for different purposes depending on one’s needs and wants. With the increasing number of computer users’ crimes involved by the use of a computer and a network are increasing day by day. Using computers for illegal purposes like; committing fraud, trafficking intellectual property, stealing identities, or violating privacy, plotting a virus, hacking someone’s computer etc. are examples of cybercrime or computer crime. The very first recorded cybercrime is supposed to be recorded in 1820 where textile manufacturer in France named Joseph-Marie Jacquard, produced the device loom which allowed the repetition of the series of steps used in the weaving of special fabrics. Because of absence of proper rules and regulations in Nepal business organizations used electronic materials and computers for fraud. However, the exact date recorded for the first cybercrime couldn’t be found in Nepal till now.  With the technological advancement computer crimes are now increasing rapidly in many countries and are becoming very serious problems that are costing up to billions of dollars. The advancement on information technology and cyberspace has made this world as a small global village. People can get access of all information about the world from their home using internet. The trends of global terrorism have also changed because of IT. Cybercrime has become a new weapon for the potential threat in international peace and global security. As government and business entities use computer for their day to day operation criminals are getting easy access to the data and information via. cybercrime related activities. So, we can say without any doubt that cyber and computer crime will keep increasing as it is networked internationally, which makes computer criminals to get access of it easily.

The application of scientific knowledge for the fulfillment of practical aims of human beings and to make difference as well as manipulate the human environment is known as technology while the moral principles that regulate technology behaviors can be called technology ethics. Nepal is a developing country landlocked by the two largest countries China and India. Nepal is so much influenced by the progress and development brought out by the information technology. So, talking on the context of Nepal, information and technology is being used for the competitiveness, growth and the need of modern world as well to advance, expand and to sustain national economy. If technology ethics are followed by the citizens or by IT users, IT can play important role to increase productivity in public administration, communication, infrastructure, industry and agriculture of countries like Nepal. Technology ethics ensure effective, efficient and economic IT operation by implementing appropriate IT system. Technology has helped people to raise their living standards and to solve problem. Although, technology has brought positive as well as negative impact on day to day human life. There are some people who take advantage of technology for the purpose of committing crimes which has led to the cybercrime. So, to prevent cybercrimes cyber laws should be enforced and technology ethics should be implemented.

With the implementation of new delivery channel such as ATM, internet banking, mobile banking etc. by Banks and financial institutions there have been increased risk of financial loss and electronic fraud along with other banking risk. Cyber fraud can be done by both internal and external parties of an organization. So, in such scenarios, it is important to regulate and guide IT related activities in institutions to strengthen the organization for tackling with emergency cyber fraud, managing information technology prudently and migrating risk aroused from implementation of information technology. So, there is necessity of technology ethics in modern world. For the potential ethical implication for the future in such financial sectors, as well as other sectors where there is maximum use of information technology can be:

Promote sound and robust technology risk management system as well as strengthen system security in the organizational environment.

There should be a board approved information security policy.

They need to conduct Risk assessment periodically as well as an organization should take necessary measures to ensure that all of its employees, consultant and contractors are aware of information security policy.

Appropriate implementation of physical and environmental control should be taken into consideration of threat for example, geographical location, building configuration, neighboring entities etc.

Focus on security health and detect as well as fix vulnerabilities.

Configuration with highest level of security setting in operating system, firewall and system software.

Development and implementation of comprehensive computer virus protection mechanism.

Deployment of strong cryptography and end-to-end encryption to protect customers PIN, user password and other security sensitive data in networks and in storage.

  • Maintaining confidentiality, integrity and availability.
  • Evaluation of data risk.
  • Application of additional controls if using wireless network.
  • CCTV installation at ATM’s.
  • Outsourcing management.

Replacement of magnetic stripe cards with chip-based cards.

If I were on a position to make change, I would apply following resolutions to mitigate ethical tensions in Banks and Financial institutions:

Update User Passwords time to time:

Before the beginning of new fiscal year, organizations should change the passwords on all office computers and electronic devices, that means everything that needs a parole. Renovating user passwords is an inconvenient job, but understanding the persistency of today’s hackers is an important task to do. The shorter the passwords, the easier to decode the password. Hackers mostly use different types of operations to access the data, so the data safety depends on how strong the passwords are. So, creating a password policy can help to manage the passwords of all employees which creates a culture of password security in an organization.

Updating All the Software to Their Latest Version

Newer technology is always better. Since an updated device or computer is equipped with the latest security patches it is always harder to crack. Office software used in day to day transaction needs to be regularly updated by the IT department/ by the employees themselves if possible. Software updates provide more security & improve the performance of computers, allowing them to run faster and handle multiple applications in a breeze.

Educating Employees on how to deal with Online Attacks

Every staff of an organization should have knowledge about potential threats that are lurking online and the safety measure to protect their devices as well as ways of sorting out phishing e-mails, practicing proper password management, deterring hackers etc. At least once a year, there should be scheduled an online security seminar for employees to keep them up to speed with the latest online threats and also making them understand the new security measures and encouraging employees to share any helpful tips they know can help to reduce ethical problems.

Substantive criminal law provisions are found to be covering the most common forms of computer crimes in huge no. of countries unlike the situation related to digital evidence. Very a smaller number of countries have addressed specific aspects of digital evidence and also international binding standards are lacking.  

The Electronic Transaction and Digital Signature Act 2004, also known as the cyber law, was passed in 2004. Before 2004, Public Offence Act used to regulate cybercrimes in Nepal and even though Nepal Police were not aware about the technical aspects of cybercrimes they used to deal with them. That means; the sanctions were not effective and relative to the crime committed by the guilty party.

Cyber world in Nepal is now regulated by Electronic Transaction Act (EAT) 2063 which acts as a shield for the users against cybercrimes like deleting data, hacking, software piracy, invite criminal and civil sanctioning to individuals and institutions, stealing e-documents and posting defamatory information etc. This law has tight rules and regulation but as there is lacking of proper monitoring and updates the cyber law is present but, not efficient. In the growing technological world EAT has been fixed constant. Internet provides easy access to the data and information but at the same time it threats privacy related issues. Nepal is facing massive hindrance, threats and challenges because of nation lacking good governance, proper mechanism and measures to cater that need at time of emergency and proper policies based on research works. Due to the rapid growth in technological world with the emerging new global commerce in ideas, information and services cyber law has become essential part of day to day operation. Information Technologies (IT) has changed most of the human activities like trade, education, entertainment, communication, culture and knowledge and as a result, there is increasing need to develop and modernize the law to utilize technological improvements and to guarantee that the government can respond to computer crime and crime related issues that come along with developments. The cyber law works under legal issues like freedom of expression, intellectual property, privacy and jurisdiction but due to the lacking of cyber forensic and investigation chances of catching the criminals has deemed. Cyber Law of Nepal has to overcome the challenges it has been facing till date to protect online communication from being turned into a serious crime.

Every aspect of our lives has changed due to technology and also impacts provided by technological changes are huge in modern community. One of the greatest business challenges is How to manage the process of cultural change. Now different countries are adopting different cultures and countries are digitally divided by access and availability. Email, skype, telephone or social medias are the major facets of todays’ global communication culture. But still understanding and respecting the differences is the key to successful communication in this era. Humans are social creatures, so human interactions cannot be replaced by any technologies. For the effective communication both the human and digital elements are to be used, that is body language is still the powerful key of communication.  Different possible technologies are dividing cultures. In another word we can say that Technology directly influence culture and vice versa. When culture changes the change innovates the technology and with the technological evolution cybercrimes also get increased increasing the risk in data management and privacy leaking issues. Change in technological culture can create massive bad impacts like, misrepresentation, stereotyping and the risk of loss of culture and intellectual property rights, unmonitored access, negative influence on social values, loss of group identity and individualism etc. It can also have positive impacts like it allows the spread of customs, language and the products, it allows people to be able to attain goods and services easily, makes easier to understand global community and their cultures etc. Technology has increased the opportunity for education, improved communication, allowed people to participate in a wider and worldwide society. So, we can conclude that the change in technological culture has improved human life in some expect but still it has many negative impacts. It has increased the risk of cybercrimes and not respecting each other’s values and norms.

                  Hence in conclusion we can say that, computer has made our life easier but along with the benefits we have to bear some negative impacts brought out by the technological changes. Enacting the proper rules and regulations for the computer related crimes can help in regulation of cyber ethics thus helping to build the better world for today and tomorrow. All people should give their best to maintain ethics and to flourish a great technological culture in a modern world.

Reference
Medium. (2020). Cyber Crime in context to Nepal. [online] Available at: https://blog.sitehawk.io/cyber-crime-in-context-to-nepal-e294a06fa710 [Accessed 13 Feb. 2020].
Globalsign.com. (2020). 7 Cybersecurity Resolutions for 2017. [online] Available at: https://www.globalsign.com/en/blog/7-cybersecurity-resolutions-for-2017 [Accessed 13 Feb. 2020].

A self-reflective essay on the skills learned during the course of your STW 201CS- Effective Communication Skills program. Include any strengths, weaknesses, and personal areas of development.

In this reflective essay as a template for this assignment I am using Gibbs Reflective Cycle. Every person interaction varies how they interact with other people. This is a expressing adverse reflection on importance of self-awareness and personal development. In other term it is a detail inspection from their own behaviors of one’s outlook on life.

By examining myself and friends’ feedback to me to become aware of myself. Conscious of my privileges, perceptions, prejudices, beliefs, core values and behaviors. Aware of blind spots, my strengths and weaknesses. I have learned many things throughout the semester. I can say effective communication is about understanding the intentions and emotion behind the information, we also need to listen and gain full meaning of what others say or convey to us and make them feel that we are hearing them and also understanding them. Yes, it is about more than exchanging information.

Effective communication sounds like it is done without conscious thought, but many times when we try to communicate to people something goes away from the correct path. People have different perspective and maybe misunderstand us or have frustration, there might be conflict. This can cause us difficulty at work, relationship or college.

For us communication skills can intensify our connection with others, improve team work, our overall emotional and social health, problem solving and build significant respect and trust. So, we need learning skills to improve communication with our sir, friends and family.

 

Weaknesses

My first interpretation is I usually get tense and overburdened when there is assignment or any types of workload. I usually avoid taking risky or even related activities. Yes, it is not good characteristic as an aim to be IT manager in future. I should always be ready to take risk and deal with it. My behavior changes with a people around me when sometimes things do not work out properly. Because a leader should have ability to tackle and manage tough situation instead, I get hyperactive, which is not good characteristic of my personality.

Common barriers that stops me from communicating effectively:

Lack of Focus:  We need to stay focused and avoid distractions. I easily get distracted. When we are multitasking, we can’t communicate effectively. If we are checking Facebook, we are likely to miss some clues in conversation.

Out of control emotion and stress:  We can learn how to rapidly calm down before continuing a conversation to avoid misunderstanding and conflicts. When I am emotionally overwhelmed or stressed out, I am likely to misread another person.

Negative body language: tapping my feet, crossing my arm or avoiding eye contact are my negative body language. If I disagree with somebody’s saying I usually use these body languages. Avoiding sending negative signal is important.

Inconsistent body language: My body language mostly doesn’t match what I am saying. Our listener can feel like we are being dishonest with them.

Strengths

My strength actually is my special skills. I think they are gift to me. Everybody has some special skills. I have many skills one of them is athletic. I love sports weather I’m playing them or watching them. I always know what I want and I try my hardest to get it. I can also say myself as very hard working and very determined person. Currently my strength includes my passion and honesty toward my work. I am always confident and positive regarding my targets and aims. I can take quick decision and right or good decision among all of above. Along with these, I can motivate group of people and do team work. If I make target I work day and night and I achieve my goal since I am responsible person.

Personal Areas of Development

Looking back to everything that I have learned in effective communication. I knew that I have some personal areas to be developed. I am not kind of listener person. I have poor body language. I am not engaged listener.

Here are some areas that I will be developing:

Focusing fully on the speaker: We can’t listen consistently to anyone for long time. My main distraction here is phone. We need to be focused on the moment to really pick up fine details and important clue in conversation. We can try repeating the speakers or influencers word to stay focused if we find hard to concentrate.

Spiritual Development: Spirituality plays vital role whether you follow religion or not. Truth be told, Religion and spirituality are actually two altogether different things and we can be spiritual without being even the slightest bit religious. When I work on improving my spirituality, I am making deeper connection with the world around me. This help me learn more about myself and it can help me in other area of personal development.

Conclusion

Personal development refers to a set of exercise that one can participate for the propose of enhancing identity and self-knowledge.  It includes ability and potential advancement, working of human capital just as employability, improving the quality of life, and last but not least playing a role towards the realization of aspirations and dreams.

Office Solutions Development: The Health and Energy Centre

Introduction
You are a self-employed IT contractor and have been approached by the Director of The
Health and Energy Centre to provide advice on the software needed for a new information
system at the centre. The centre has been providing health and fitness classes for
thousands of people for the past twelve years.
The Director has decided that he wants to sell health and fitness goods in addition to
offering health and fitness classes. He is interested in purchasing Project Management
Software to help him achieve a new system. He is also interested in how data mining
software could benefit the centre and he would like advice on application software that
would help advertise the centre’s services and products.

=>

Task 1 – Application software and business processes

a)   Explain the purpose of project management software and discuss, with reference to FOUR (4) examples, FOUR (4) ways that project management software could benefit the Health and Energy Centre.

The software which is used for resource allocation, project scheduling, planning and change management. It helps person to manage budgeting, quality management with cost control on expenses and time management.

  • Risk analyzation and taking measures:

it sees the future hazard and take measures for the issues that may emerge in the coming future.

  • Cost management:

it sees where and how much the measure of money must be contributed in an alternate segment for activity of the venture.

  • Quality management:

it decides and supervise the quality and time for the assignment to be finished.

  • Resource allocation:

it gives legitimate diagram to the client from the information given by the about step by step instructions to apportion the assets in a viable manner

Benefits of the health and energy center in the ways that a project management software is through:

  • Time Management:

for various errand execution the middle can utilize venture the executives programming to oversee time and designate staff as indicated by errand that must be performed.

  • Risk evaluation:

evaluation of the hazard should be possible by the utilization of venture the board programming through which Center can go for broke a few measures for market hazard to avert misfortunes.

  • Task Monitoring:

(measure, assess, right) this product assesses the assignment and take measures to address the mistake. for example, in the event that the item brought for the Center is outdated or will cause hurt in any capacity to the client those items ought to be supplanted with great ones.

  • Budget management:

for the diverse errand and for the pay the executives of the staff which will give legitimate diagram of the interest in various parts.

b)   Discuss how data mining software could benefit the center and support your answer with reference to EIGHT (8) features of data mining software.

  • Perceives client necessity which could be satisfied.
  • It gives legitimate examined information to the Center to expand its business further.
  • It makes decision making on a product that are to be available for customer.
  • It makes work easier by the data which was collected.
  • It makes simpler for promoting through information gathered from client looking for related administrations and items given by the Center.
  • Data mining is useful to anticipate future patterns wellness items and administrations.
  • showcase examination on wellbeing and wellness classes and item offers movement identified with it.
  • It encourages understanding client needs.

c)   Identify FOUR (4) types of application software that could be used to market the services and products offered at The Health and Energy Centre and for FOUR (4) marks explain how each type of software that you have identified could be used to promote the center’s services and products.

The four types of application software are-

  • Enterprise Software:

It manages prerequisite of association and stream of information.

  • Words Processing Software:

The program is utilized for making type papers, letters, word sheets and so forth. Example:  MS word

  • Information employee Software:

 It can handle creation projects and needs in the department. Example- PowerPoint

  • Database Software:

This product stores information that are connected to the project management software. example- MS excel.

Task 2 – End-user development

a)   If staff at the center are involved in developing elements of application software they will need to plan carefully. Outline SEVEN (7) factors that the staff will need to consider when planning end user development.

  • The worker must make the application that is comprise of differ comparable working procedure as the application client have utilized previously.
  • The application must fill in according to the necessity gave by the provider.
  • The application they are making must be maintainable because any moment there can be chances of making modification according to the requirement.
  • The client must have legitimate learning of programming and coding so they could appropriate programming language which will be reasonable for their task.
  • The security arrangement of the application must be made excellent so the information robbery and other hacking stuff isn’t possible.
  • The producer must have confidence to give documentation about the project.
  • Before starting the project in first they have to manage the budget system.

 


b)   Describe NINE (9) potential problems that the center could face if its end users are involved in developing elements of application software.

  • Staff are not prepared so they can’t set up a legitimate arrangement and estimation to build up the product it isn’t effectively.
  • Staff have not learning of programming and coding so they may set aside a lot of effort to build up the product.
  • Their created Software there may be botch in the total outcome.
  • Programming are does not tried legitimately so it contains numerous blunder and bugs while programming testing time.
  • It may occur errors in financial management.
  • Programming ought to be grown yet its plan probably won’t be all around reported so it is inadequately.
  • Programming were not organization so it can’t keep running on various stages.
  • Programming are does not tried legitimately so it contains numerous mistake and bugs while programming testing time
  • Staff are not trained to develop the software efficiently.

c)   Explain how problems arising from end user development can be avoided. Support your answer with NINE (9) recommendations.

  • There may be poor comprehension between experienced engineer they have to discuss the misconception.
  • User Interface must be made so every client could utilize and effectively get it.
  • The file should be kept safe and the work should be done nicely.
  • It may occur bug in code we have to consult to expert programmer.
  • The testing should be done properly for the future reference.
  • There should be present of validation while doing the program.
  • The user interface must be made easy so all the users can understand.
  • Before making any changes, they have to consult to the excellent programmers.
  • In the documentation there should be explained properly.

Task 3 – Advanced features and functions of Microsoft Word

a)   Create a macro that demonstrates how a word processing feature can be undertaken more efficiently if it includes automation.

  • Initiating macros
Initiating macros
  • Recording the macro and giving style to bold and Italian and underlining the text.
Recording the macro and giving style
  • Start to record macros.
button design and start of macros record.
  • Macro successfully completed by clicking the toolbar and selecting the remaining paragraph .
Macro successfully completed by clicking the toolbar
  • Code of macros
macros function performed.

b)   The Director has asked you to create an additional macro to demonstrate the efficiency of automation in a word-processed document.

Macros name
recording the macros
start initiating name
mail merges- value data placement
mail merges data placement
inputting the data in mail merges
making macros for mail merges
making macros step 5
step 6 of mail merges
Code for macros
Testing macros worked

Task 4 – Advanced features and functions of Microsoft Excel

a)   The Director has requested that you produce an interactive form that facilitates the following:

creating a form in excel
Form created
Form data input
code for application form

b)   You have been asked to add to the interactive form that you have produced for Task 4 You should edit the macro so that the following actions occur:

form with macros level showing message
form with macros level showing buttons
codes of form
message code of form

Conclusion

The health and fitness center have asked for following queries which was solved in this task. Application software and business process with end user development was done. We also have used advanced feature and function of Microsoft word and excel.

References

               Opentextbc.ca. (2019). 12. Budget Planning – Project Management. [online] Available at: https://opentextbc.ca/projectmanagement/chapter/chapter-12-budget-planning-project-management/ [Accessed 30 Apr. 2019].

Designing and Developing a Website : MardiDrama Club

Introduction
MardiDrama Club is a fun after school and weekend club that is open to children between
the ages of 5-16. It offers a fun programme but also teaches children some of the
fundamentals about speaking and helping them develop confidence.

Scenario
MardiDrama Club have approached you and asked you to develop a new website for
them. Although they currently won’t be taking any payments online, they hope to develop
this later in the year. They need you to create a website which will allow parents to find
out about the different drama classes that are available and to register for these. The
website should be visual and should be viewable on different devices.

MardiDrama have the following basic requirements for the contents of the website:
• Home Page: This page will advertise the different classes (Musical Theatre, After
School, Holiday Programmes) and should have three image links to these classes.
Relevant social media buttons and search bar should be included on a clean
looking home page which includes interactive elements which grabs the attention of
the visitor.
• Blog: This page will provide up to date information about events and classes
happening in the Drama Club.
• Register: This page will allow parents to register their child for one of the classes.
Registration will be via email following the completion of an online form.
• About: This page should give parents an overview of the different classes and the
club which started in 2001. It should have space for information about the teacher
and links back to the contact page and blog.
• Where: This page should include an interactive map of the club’s location in
Taunton.
• Classes: This page should provide videos and information about the different
classes including payment information (£15.00 or equivalent per hour).
• Events: This page provides a list of the events that take place in the drama club
such as Nativity, Summer Play or guest appearances from well-known stars from
the industry.

At the initial stage of the development process, you are required to make an HTML/CSS
prototype of the website that will clearly show MardiDrama Club how the final website
could work.
Content hasn’t been provided. Suitable content can be found on the web e.g. images of
drama clubs. Use creative commons (https://ccsearch.creativecommons.org/) or
Wikimedia Commons (http://commons.wikimedia.org/wiki/Main_Page) as a starting point
to find content. Remember the content you include in your site must be licensed for re-use.
Do not spend excessive amounts of time researching and gathering content. The
purpose is to provide a clear indication of how the final website could look and function.
The client would provide the actual content at a later point if they are happy with the
website you have proposed.

Task 1 – HTML
The website must be developed using XHTML 1.0 Strict or HTML 5 and feature a
minimum of SEVEN (7) interlinked pages which can be viewed also on a mobile device.
The website must feature the content described above and meet the following criteria:
• Feature between 7 and 10 HTML pages.
• Have a lightblue background colour.
• Be usable in at least TWO (2) different web browsers including a mobile device.
You should consult your tutor for guidance on the specific browsers and versions
you should use.
• Be viewable on monitors with screen resolutions of 1024×768 without users having
to scroll horizontally.
• Integrate and use a range of media appropriately.
• Embed functional multimedia components in your site.
• Demonstrate a good application of web design principles and be easy to navigate
and use and really captures the attention of the parents.

=>

I have used HTML 5 for designing website. HTML 5 is latest version of HTML. We use <!DOCTYPE html> syntax for declaration. The default character encoding in HRML 5 is UTF-8.

            HTML 5 consists of new element such as <header>, <section>, <article>, <svg>, <canvas>, <audio>, <video>, <footer> and attributes like number, date, time, calendar, and range.

doctype declaration
Firefox Preview
Chrome Preview
Resolution 1024*768 – no horizontal scroll
Image link on the home page
social media links
Search Bar
HTML CODE OF THE FORM
INTERFACE OF THE HTML FORM
CSS used for html form a
CSS used for html form b
CSS used for html form c
CSS used for html form d
CSS used for html form e
multimedia elements used – video
Background Color Sky-blue

Types of images

I have used PNG format for my design of website. PNG file format has many advantages over jpeg and gif. PNG has higher compression rate. It has better compression rate. This type of file is easy to low while user has low internet connection.

PNG helps in transparency layer image. It also has built in gamma correction due to which user can see an image which was meant to see while captured. It is open standard and free license which is developed by W3C and will always be free. This is why I choose PNG format for websites.

Accessibility features used in your media

There is not much accessibility feature in this web design. Though I have used alt tags for image alternative. Placeholder are used for thumbnail so that it’s easy for video preview. There is play, pause, Fullscreen, play picture in picture and also user can download for offline on the go.

Task 2 – CSS

Create external CSS file that specifies the design for the website. Each of the HTML pages must link to this CSS file. There should be no use of the style attribute or the <style> element in the website.

The boxes on the home page should include relevant elements such as border radius,
box-shadow, hover etc.
Include CSS animation-timing for at least one of the elements on the home page.
Add in a mediarule which changes the background colour from lightblue to white when the
browser window is 600px wide or less

=> CSS stands for Cascading Style Sheets. The way I used external CSS because It is style sheet language used for explaining the presentation of document written in a markup language like hyper text mark of language. It is useful for designing the website with its respective viewing specific experience.

External CSS link

CSS selectors

Id: It identify one element. It is indicated as “#” in CSS.

Class: It identifies one and more than one CSS elements. It is indicated as “.” In CSS.

Inheritance: It is last thing we need to investigate for all the information. It is also used to understand what style is applied in the element.

Multiple selectors: It is usually used for grouping. Any type of valid selector can be placed in that group and match up as same style-based property.

Descendant: All the elements that are descendants of a specified element are always matched with descendant selector.

CSS
Search Box
Animation
Media Query code
white background on width 600px

Task 3 – Test the Website and Write a Test Report

You must use the W3C validation service (http://validator.w3.org/) to check your HTML and
CSS code. You should attempt to remove as many non-compliant features as possible.
Make sure ‘show source’ is selected and save the output from this tool.
Test the website using at least TWO (2) different web browsers. Record any significant
differences between the rendering of the two browsers and attempt to diagnose the cause.
You do NOT need to modify your code to correct any differences between browsers.
Please consult your tutor for advice on the specific browsers you should use for testing.
Write a short report describing your testing. Provide a description of any outstanding
problems and recommendations for fixing them and include a clear description of the
differences between the brewers and the reasons for these. Add in a description of how
the site works on a mobile device and the reasons for these.

Validation and Browser testing:

Browser testing was done. While testing in chrome Version 73.0.3683.86 (Official Build) (64-bit) I found the design and layout was awesome. It looked well designed in width 600px. I also tested my design in Firefox Quantum 66.0.3 (64-bit). The result was quite different. I found that search bar icon was not in place. While I looked for 600px width I found that everything was working well and design was awesome.

Home page validation

Home Page Validation
Home Page error

Blog page validation

Blog Page Validation
Blog Page Error

All HTML page validation

There was same warning Because of header and footer and I found one error in google maps embedded link and also there were some warnings.

CSS validation

CSS validation

Mobile Validator

mobile validator

Findings

At the end, I have corrected the warning and errors while testing all the design of website. There was some mismatch in paragraph. I corrected headers and navigation too. After completion I found some warning. Some warning was ignored and many were removed. I also found error in google maps embedded link which was ignored. Now. After all validation I have seen no errors to be corrected.

Chrome Output
Firefox Output

There were lots for problem and mismatch code due to which there was mismatch in overall design. Finally, after solving all problem on chrome, the design in chrome seems to be perfect. There was the same design as I had designed in photoshop.

After that, I looked same code on Firefox I found that the search icon was somehow below. There was design mismatch. So, these are the only problem that I faced while seeing output on both web browser. First of all, I looked into code to find some error but I only found warnings which didn’t affect website.

The recommendation of fixing is to see output on different website and the give extra code that fixes all the design mismatch for all the browser individually.

Task 4 – Critical Evaluation

Analysis of the website

You are required to write a short report (500 words) analysing the website you have
submitted.
You should:
• Evaluate and demonstrate an understanding of accessibility issues
• Evaluate the effectiveness of the CSS and what improvements you feel should be
made to this file now you have completed it
• Explain the advantages and disadvantages of using various types of multimedia file
formats
• Explain the advantages and disadvantages of different types of multimedia
elements in relation to different contexts
• Recommend improvements for further development of the website.
This analysis must include a discussion of the accessibility of the website and the ways in
which the website has been designed to support mobile users.

Additional Information for Clarification
Consult with your tutor/lecturer if you are uncertain about any aspects of the assignment.
The website must be developed using XHTML 1.0 Strict or HTML 5 and CSS. No other
technologies should be used. You do not need to write any computer programs for this
assignment.
The purpose of this assignment is to show abilities in web design. Although you should be
wary of needlessly adding features, websites that demonstrate a range of HTML features
used appropriately have the potential to gain higher marks. For example, a form that
features a range of different form elements applied in a useful and relevant way would
generally score a higher mark than a simple form that only uses text boxes to gather data.

Accessibility of the website:

Internet is vast, World Wide Web have conquered the world. Accessibility of website is very import on modern website designing and developing. In this modern world almost, all website is designed as accessible. In the current world there is room for all the differently able people. This is understood by designer and developer too. This website has much accessibility feature in this web design. Though I have used alt tags for image alternative. Placeholder are used for thumbnail so that it’s easy for video preview. There is play, pause, Fullscreen, play picture in picture and also user can download for offline on the go.

Designed to support mobile users

There is lot of mobile device than laptop in hand of people. Everyone takes mobile devices anywhere they want because they are portable and are cheaper comparatively laptop. There are more people surfing internet in their mobile devices so it’s also important to develop a well designed mobile friendly website for user accessibility too. As the task, I have also designed for the mobile devices that has less than 600px width. So, there is white background and beautifully designed website on every mobile device. They can easily read the content of web page. Photo and video have simplified there is all sort of feature included so that user can use as what they find easy.

Effectiveness of the CSS

CSS (Cascading Style Sheets) is an external file which is linked in HTML (Hyper Text Mark of Language). Since our website is viewed in many screen sizes, we also need to provide specific media query to each screen size which can be frustrating in HTML. This can be used for one CSS file rather than editing bulky content pages. For each site, all the CSS ought to be structured by a single, focal plan gathering. Two reasons: First, brought together plan is the best way to guarantee a steady style and receive one of the principle rewards of templates. Second, most of Web content makers are not equipped for planning and composing great templates.

Multimedia file formats

Adding Video and Audio elements to a Site page make it simpler to grab user attention users. Visual is the most prominent sight and sound options, locales additionally add audio and intuitive substance to crave in and hold the taking of consideration of the users which is major advantage. While HTML5 content-based sites are more intricate than site of the past, they are yet limited from numerous points of view. It is hard to speak to a brand/brand’s picture without including audio or video substance to help it. All things considered, mixed media departments are every now and again favored by promoting offices as a result of their capacity to totally show banding.

There are also some drawbacks too. Loading time of video can increase which is not to for modern website developers, compatibility of video differs with web browser. There are lots of web browser currently and many people has their choice in browsers. It is also harmful for search engine ranking.

Types of multimedia elements

Text is one of the media components utilized in the site. Ordinarily we can discover it from Web. Human are utilizing texts to speak with other individuals. From Web we can utilize Email to send instant message to other individuals, we additionally can utilize share status or offer anything you need to share to give your companion or family realize what is at the forefront of your thoughts. We likewise can share or give data in forum. While most Internet browsers suit numerous audios, video, and visual photo documents groups, problem can occur.

Conclusion

In this assignment I have designed well accessible website for Mardi Drama Club. I also have done testing of website and I also have done critical evaluation to find better version of this website. I have only used HTML and CSS for this website.

Reference

Fileformat.info. (2019). Multimedia File Formats. [online] Available at: https://www.fileformat.info/mirror/egff/ch10_02.htm [Accessed 30 Apr. 2019].

Preview Website

Mardi Drama Club

Designing and Developing Object-Oriented Computer Programs : Language Trainer

Introduction
The mind is like any part of the body – it needs exercise to stay healthy. There are many
cognitive training regimes that exist for that, but one of the most effective for memory is
the game known as ‘concentration’. In this game, fifty-two cards are laid face down on a
table. Each player takes a turn flipping over a card and then attempting to flip over a
second card with the same colour and value. For example, if we flip over the five of hearts
we would want to flip over the five of diamonds as our secondary selection. If we make a
match, the cards are removed and added to our score. If they don’t match, they are flipped
back face down and the other player is given an opportunity to flip two matching cards.
Players continue taking turns until all cards have been matched.
This is a powerful technique for training observational faculties and short-term memory,
and it’s your job for this assessment to write a piece of software that implements this
system with a difference – you’ll be looking to match English words and their translation for
several languages (two for the purposes of this assessment). For example, we might want
to match the English word ‘Hot’ with the French word ‘chaud’. For the purposes of this
assessment, it does not matter what language you use but the flashcards presented at
https://www.studystack.com/ would be an appropriate place to find suitable pairings. You
can use whatever language you like otherwise.
Your application should present players with a grid of fifty-two buttons, and each of those
will map on to a word or its translation. Each player will select a button, which will reveal its
contents, and a second button which will do the same. If there is a match, the buttons
should disappear, and the player should get a point. If not, the contents should be hidden,
and control should go to the next player.
The system then needs to allow the following:
• It needs to permit for players to choose a word set.
• It needs to create a grid of twenty-six words and their translations and map those to the
UI
• It needs to keep track of turn order and player actions within a turn
• It needs to eliminate used words from the UI
• It needs to track score and matches of buttons.
• A high score table of players and scores for each language should be retained
The program will also need to store user data such as name, success rates with particular
words, average score and average time to complete a game.
Your program then will need to perform the following operations:
• Set up the GUI
• Provide a way to add, modify and delete word sets.
• Provide players a way to choose word sets
• Set up an internal representation of words to their translation
• Map UI buttons to the words in the word set
• Implement a turn order for players
• Award points based on matching words and their translation
• Disable UI elements based on correctness of matches.
• Save the user data and statistics of each user along with the high score table.

Task 1

For a program which fully meets the requirements of the brief as
outlined above.

Class

dB connection

Db Connection 1
DB Connection 2
DB Connection 3
DB Connection 4

Player

Player Class

Word

Word Class

Forms

Add Player

Insert form 1
Insert Form 2
Insert Form 3

Game

GameForm 1
Game Form 2
Game Form 3
Game Form 4
Game Form 5
Game Form 6
Game Form 7
Game Form 8
Game Form 9

Dash

Dash Form 1
Dash Form 2
Dash Form 3

Insert

Insert form 1
Insert form 2
Insert Form 3

Update

Update Form1
Update Form 2
Update from 3

View

View Form 1
View Form 2

Task 2- Testing

Black Box

IdFormDescriptionTest ValuesExpectedActualResult
1Insert PlayerInserting player namePlayer1: test Player2: testGame form should be opened and insert player form should be closedGame form is opened and insert player form is closedPass
2Insert PlayerTesting Back button Insertplayer form should be closed and dash should be openedInsertplayer is closed and dash is openedPass
3GameTesting loading of player name from insert player formPlayer1:test Player2:testGame should load with player1 and player 2 nameGame is loaded with player1 and player2 namePass
4GameTesting English button click at first Button should display English language wordButton displays English language wordPass
5GameTesting Nepali button at first Messagebox showing “Please select English word first” should be displayedMessagebox showing “Please select English word first” is displayedPass
6DashTesting start button click Dash should be closed and insertplayer form should be loadedDash is closed and insertplayer form should be loadedPass
7UpdateTesting update buttonId:25 Word1: Test Word2:TestMessagebox showing “Updated” should be displayedMessagebox showing “Updated” is displayedPass
8UpdateTesting delete buttonId:25Messagebox showing “Deleted” should be displayedMessagebox showing “Deleted” is displayedPass
Black box test

Whitebox

White Box 1
White Box 2
White Box 3
White Box 4
White Box 5
White Box 6
White Box 7
White Box 8
White box all

Task 3- Class Diagram

Class Diagram