DIGITAL STORYTELLING. Ntombesisa Mateyisi. A Project submitted in partial fulfillment of the requirements for the degree of.

Transcription

1 DIGITAL STORYTELLING by Ntombesisa Mateyisi A Project submitted in partial fulfillment of the requirements for the degree of BSc (Honours) University of the Western Cape 2016 Date: January 16, 2017

2 University of the Western Cape Abstract DIGITAL STORYTELLING By Ntombesisa Mateyisi Supervisor: Professor Isabella Venter Department of Computer Science Abstract Developments in technology will, by nature, impact our lives. This research is carried out to show that through digital storytelling and the use of information and communication technologies we can see how our daily lives provide us with rich content meaning creating and sharing stories via digital storytelling. The introduction of new media and information and communication technology enables greater variety of formats and content beyond conventional text in the application and discourse of public history. The aim of this project is to create a digital web application to capture digital stories in South Africa. Many more people, and communities, are waking up to the power of their own voice in media, and are finding the means to express themselves and their communities through new media. This project also focuses on the growth of digital literacy and information and communication technologies in South Africa.

3 TABLE OF CONTENTS Table of Contents...I List of figures... III List of Tables... IV Acknowledgments... V Glossary... VI CHAPTER THE USERS REQUIREMENT DOCUMENT (URD)... 1 Introduction... 1 Brief description of the problem... 2 Complete description of the problem... 2 What is expected from a software solution?... 3 What is not expected from the software?... 3 Conclusion... 3 CHAPTER REQUIREMENTS ANALYSIS DOCUMENT (RAD)... 4 Introduction... 4 Break down the problem into high level constituent parts... 4 Deep analysis of these parts and identification of all relevant details... 5 Identify existing solutions... 5 Tools to be used... 6 Link these solutions to the problems, especially with respect to details... 6 Suggest the best solution and break it into parts... 6 Devise ways to test the solution... 7 Conclusion... 7 CHAPTER USER INTERFACE SPECIFICATION (UIS)... 8 Introduction... 8 Description of the complete user interface... 8 What the interface looks like to the user... 9 How the user interface behaves How the user interacts with the system Conclusion CHAPTER OBJECT ORIENTED ANALYSIS (OOA) Introduction Data dictionary defining exactly what each object represents Class diagrams and relationships Conclusion CHAPTER OBJECT ORIENTED DESIGN (OOD) Introduction An inner detail of class attributes (datatypes) and methods (functions) Pseudo-code Conclusion... 21

4 CHAPTER CODE DOCUMENTATION (CD) Introduction Sign up page Login page Upload function Watch function Upload function Search function Conclusion CHAPTER TESTING DOCUMENT (TD) Introduction Functional Testing Unit Testing User Testing Conclusion CHAPTER USER S GUIDE (UG) Introduction Digital Storytelling system Conclusion Appendices Appendix A Appendix B Appendix C Appendix D Appendix E Bibliography Index ii

5 LIST OF FIGURES Number Page Figure 1: Web Application video sharing by Jens Loeffler 5 Figure 2: Web Application main screen 9 Figure 3: The Sign up page 10 Figure 4: The Login page 10 Figure 5: The Landing page shows themes of shared stories 11 Figure 6: Activity Diagram 12 Figure 7: Use Case diagram for user interacting with the system 13 Figure 8: The Class diagram 16 Figure 9: Bar Graph 33 Figure 10: Pie Chart 34 iii

6 LIST OF TABLES Number Page Table 1: Attributes description for classes 19 Table 2: Inner details description of class methods 20 Table 3: Project plan for term 1 38 Table 4: Project plan for term 2 39 Table 5: Project plan for term 3 40 iv

7 ACKNOWLEDGMENTS I would like to express my sincere gratitude to my supervisor Prof. IM Venter for the continuous support of my Honours project and related research, for her patience, motivation, and immense knowledge. Her guidance helped me in all the time of research and writing of this thesis. v

8 GLOSSARY API Application Programming Interface is a set of routines, protocols, and tools for building software and applications. Digital Storytelling (DS) is the practice of combining narrative with digital content, including images, sound, and video, to create a short movie, typically with a strong emotional component (Robin, 2008). FLV Flash Video is a file format used by Adobe Flash Player and Adobe AIR to store and deliver synchronized audio and video streams over the Internet. ICT Information and Communication Technologies is an umbrella term that includes any communication device or application, encompassing: radio, television, cellular phones, computer and network hardware and software, satellite systems and so on, as well as the various services and applications associated with them, such as videoconferencing and distance learning (Vaishnav and Kuechler, 2015). LLD Low Level Design NGO Non-Government Organization OOA Object Oriented Analysis OOD Object Oriented Design PHP Hypertext Preprocessor, is a script language and interpreter that is freely available and used primarily on Linux Web servers. RAD Analysis Requirement Document takes the URD a starting point and looks at the problem from a designer s point of view. USABILITY TESTING A technique used in user-centered interaction design to evaluate a product by testing it on users. UIS User Interface Specification URD User Requirements Document it is a document that describes the problem from the users point of view. vi

9 C h a p t e r 1 THE USERS REQUIREMENT DOCUMENT (URD) Introduction We live in a world that is influenced by technology. Everything around us is changing, the way we communicate, how we work and share information. In general terms, digital storytelling is defined as telling stories and sharing information by simply making a short video by combining images, sound, text and voice (Robin, 2008). Digital storytelling is one method for using information and communication technologies (ICTs) to support the educational process and engage students in learning more about these technological tools. Digital storytelling is commonly used by people to tell their own stories, and it allows users a chance to create a social community around these stories (Yuksel et al., 2011). In traditional culture stories are the units of knowledge to live by and the art of conversational storytelling is slowly disappearing from our lives (Lambert, 2012). This research does not focus on the issues about accessing the technological tools and how to use them. The focus is on the use of ICTs to share stories via digital storytelling. Users view of the problem I interviewed children and adults in Mfuleni and students at the University of the Western Cape. The problem encountered by users in Mfuleni Community Center is that they feel there is a need to equip teachers and students with skills and knowledge on how to integrate information and communication technologies (ICTs) in the classroom digital storytelling will possibly inspire them to make use of technology since they have mentioned they have computers in their school (see Appendix A). Students at the University of the Western Cape were interviewed (see Appendix B) and they stated that not

10 having the technical skills knowledge to use software is a problem. Furthermore they feel they lack the skill of how to tell a story, and how to link one section to the next. Centers in communities such as the Mfuleni NGO feel that in order for them to be more knowledgeable about digital storytelling and to inspire their people and students to share information about projects they develop, they will need people to teach students how to use technological tools. Digital storytelling will help to bring about change in their communities (see Appendix A). Brief description of the problem There is a need to educate people about the use of technology and how to change from traditional ways of sharing information to modern ways via digital storytelling. The Mfuleni NGO and some university students do not have the technical skills and software tools to share information and stories via digital storytelling. The use of information and communication technology is still a problem to many and adapting and changing old ways of doing things in schools and community centers are still not being done as they are afraid of adapting evolving technologies (Robin, 2008). Complete description of the problem Communities and higher education institutions (HEI s) are not aware of the potential value of digital storytelling. The system and how education is presented in classrooms, show that HEI s are still struggling to employ evolving technologies (Bozalek et al, 2013). Information sharing and knowledge transfer through digital storytelling has a big impact on the youth opinions in community centers and schools (Sadik, 2008). 2

11 What is expected from a software solution? Since the users lack certain skills the system will be easy to use, user friendly and it will be simple to navigate through it. The system is expected to allow users to view stories shared by other users in the public forum and it will allow users to register into the system. When the user is registered they will be able to login and post their digital stories. The system will be accessible using smartphones since almost all people in South Africa (7, 9 million) have access to smartphones (Poushter, 2016). The users will be able to post videos, pictures and add some text to pictures when they post them. What is not expected from the software? Users will have to use their own tools such as word processing, video-editing software s to create their digital own stories, these tools will not be made available on the platform. Conclusion In this chapter the user s view of the problems regarding digital storytelling are discussed where users identified problems such as not having enough knowledge and having technical skills to create their own digital stories. Based on the problems that have been identified, a software solution is identified that will help users and the researcher also looked at the things that are not expected from the software solution. 3

12 C h a p t e r 2 REQUIREMENTS ANALYSIS DOCUMENT (RAD) Introduction In chapter 1 the user requirements and the problems that users are facing with regard to digital storytelling were identified. These problems were addressed based on a research that was conducted by the researcher. In this chapter the requirements analysis is done, looking at the problem from the designer s point of view. The focus is on the system software needed to implement the user requirements. 1. Users: a. Can access the system via their smart phones, and b. Will not have to have ICT know-how. 2. The system: a. Will allow users to become members first by registering and logging in once registered. b. Will have a database that will keep users information for safety and security. c. Will allow the user to upload media types such as videos, images and text. Break down the problem into high level constituent parts Sign Up and login: Each user will have to sign up first by providing username and password. Once the user is registered, the user can login into the system. Viewing and adding posts: When the user is logged in, the user can start posting stories which can include voice, video and text into the system. 4

13 Deep analysis of these parts and identification of all relevant details In Figure 1 the process of posting a digital story is shown. This process, allows a user to login to the web application and then a video of the digital story will be sent to the web server (Flash media). The Encoding server will encode the file and the encoded FLV file will be sent to Flash media server, to the screen a message will be sent to show that the video has been uploaded. Figure 1 Web Application video sharing by Jens Loeffler Identify existing solutions Existing solutions for digital storytelling include Story-Center where they create stories for transforming lives and communities, they let users register and then they assist users to create their digital stories (Reference). The administrator or the Story center is responsible for sharing the stories on the platform. Since 1993 they were known as The Center for Digital Storytelling and in 2015 they changed 5

14 their name to StoryCenter (Xu et al, 2011). Other storytelling platforms include; Facebook, Twitter, Instagram and many more. These applications have the functionalities required by Digital Story platforms. These media platforms are mainly centered on sharing photos, links, and quick thoughts. These social platforms will not be useful for my target group as they are not focused on only sharing photos and links but rather to share their thoughts. >>>explain Tools to be used The following tools will be used to develop the web application; MySQL for creating and installation of database, PHP, HTML, CSS, JavaScript to create functions and for making the web application compatible for mobile phones and tablets. Link these solutions to the problems, especially with respect to details Making use of the provided solutions to overcome the problems users identified would be by means of engaging users on how to use ICTs. By doing this they will be able to communicate a message through a non-traditional medium, and also to experiment with tools of digital storytelling to enhance their story: music, video, images and voice. Using ICTs will help users to build the culture of sharing and understanding the power of storytelling and the impact it has on listeners. Suggest the best solution and break it into parts The best solution would have the following functions; Sign up and login function: This function will take the users sign up details and add them to the database. Upload (Digital stories) function: this function will allow users to upload their digital stories. 6

15 Logout function: this function will start the session, and then terminate it and the redirect the user to the homepage. Devise ways to test the solution The system will be tested by 7 people. They will be given specific tasks to complete. They will also be interviewed using a set of probes and also be given a questionnaire to complete after they completed the tasks. The method of testing that will be used is Functional testing, Unit testing and User testing. Conclusion This chapter looked at the user requirements from the designer s point of view and a brief description of the designer interpreting the user s problems was discussed. Existing solutions, tools to be used and how the system will be tested was discussed and a best solution was proposed. 7

16 C h a p t e r 3 USER INTERFACE SPECIFICATION (UIS) Introduction The user requirements were evaluated in the previous chapter. This chapter describes the user interface, what it looks like, and how the user interacts with the program. This chapter does not describe how the interface will be implemented and what the program does behind the interface. Description of the complete user interface The User Interface Specification (UIS) consist of the following options: - Landing page a web page that a user or visitor arrives at or land on. - The register and login button this is the button the user will click to create an account and the user will be directed to the his/her page after registering and login. - The upload part user will get an option to upload videos, text, photos and audio to his/her home page where the digital story can be created. - The search button user will get an option to search existing images and be able to use those images in their posts. - The Forum button this will redirect the user to a page where his/her will see all the posts made by other users and the posts they have made under specific themes, this is open to users and visitors. Users can also set their profile settings to indicate with whom they will share their digital stories. 8

17 - The logout button this is the button that will log the user out of their account and directs them to the home page where they can sign in if they want to make some posts. What the interface looks like to the user Figure shows the start page or home page of the web application Figure 2 Web Application main screen This main screen (see Figure 2) shows the buttons Sign up and Login that the users will press to become a member and be able to post everything they want to share with other users. 9

18 Figure 3 The Sign up page The screen as depicted in Figure 3 will pop up after the user has clicked the Sign up page. The user will then be redirected to a landing page where they can view digital stories. Figure 4 the Login page When the user clicks the Login page the user will be requested to enter his/her username and password (see Figure 4). The user will then be redirected to the user s profile page where the user can view or upload stories in their own personal work space. 10

19 Figure 5 The Landing page shows themes of shared stories Figure 5 illustrates the landing page that will display stories shared by users publicly. Each story falls under a certain category or theme such as social stories or environmental stories. A user will have a choice whether to share their stories publicly or to only save it in their personal work space. How the user interface behaves The interface allows the user to sign up and login with a distinctive username and password, the login details must be authenticated before the user can get access to the system. When the user made a mistake to login the system will notify the user to enter correct username or password depending on the incorrect provided login information. Once the login is successful, the home page will be displayed allowing the user to navigate through the application to post and share media and to also search for media they might want to use for example a picture posted by another user. 11

20 How the user interacts with the system Figure 6 Activity Diagram Figure 6 shows how the user interacts with the system through the interface, the activity diagrams shows all the steps the user follows when navigating through the system. The following steps state the interaction: 1. The user sign up and login to the system 2. The system authenticates user login information 3. The system displays home interface with the menu available 12

21 4. The user selects the upload button 5. System retrieves folder where the user can select the media they want to share 6. The user select media and post it 7. When done user returns to home page 8. The user logs out of the system Use Case Diagram Figure 7 Use Case diagram for user interacting with the system 13

22 Figure 7 illustrates the activities a user performs when interacting with the system. And Figure 7 also illustrate the role an Administrator will play when users upload content. Conclusion In this chapter the user interface was specified on how the user will interacting with the system and how the interface will look like to the user. The next chapter will go into details about Object oriented design. 14

23 C h a p t e r 4 OBJECT ORIENTED ANALYSIS (OOA) Introduction In the previous chapter the user interface specification was specified and looked at how the user will interact with the system and how the interface will look like to the user. This chapter will look at object oriented analysis view of the problem, where every object will be described and documented in the data dictionary. This will also show the relationships between the objects. Data dictionary defining exactly what each object represents Interface object the interface object will characterize one main interface that users will interact with; it will have links to other functions of the system. This will allow users to sign up for account and login, upload media files and view files other users shared and also search for images. Database object this object represents the database. Database contains tables that are used to store user s details, registration details and files users will upload. Administrator object this object helps on the security side, Administrator monitors the content users upload into the system, and if content uploaded is inappropriate Admin removes it. User object this object basically contains information about the users. UploadFile upload object when users upload their files to the system and can be viewed in the interface. 15

24 Class diagrams and relationships The individual objects of the system communicate to ensure that the system achieve its goal that is to display media files shared by users. The class diagram (see Figure 8) illustrates the relationship between the object and how they work together. User query a request, Info retried from database Figure 8 the class diagram 16

25 The class diagram shows the relationships between objects in the system (see Figure 8). User and server are the main objects in the class diagram as explained in the previous section that explain the objects. Conclusion This chapter looked at the systems objects and relationships. The class diagram is used to illustrate the interaction between user and system. The diagram also shows how the objects interact with each other. 17

26 C h a p t e r 5 OBJECT ORIENTED DESIGN (OOD) Introduction In this chapter we will look at the Low Level Design (LLD). This chapter will define the datatypes for the attributes and also define the algorithms and implementation details of the classes. We will also look at the inner attributes and methods of the classes. Table 1 Class Attributes User Database Username: needed for authentication Datatype: string, e.g myusername Password Datatype: needed when user logs in Datatype: alpha-numeric, e.g my12pass Store(), stores data that is sent from the database UploadFile Files from computer file system, e.g videos or pictures 18

27 An inner detail of class attributes (datatypes) and methods (functions) Table 1: Attributes description for classes Class Attributes User Username: username of user needed for authentication Datatype: string Example: myusername Password: password of user needed for when user logs in Datatype: characters and numbers Example: My123pass Interface interfacename: store names of interfaces needed when displaying interfaces Datatype: String Example: Sign Up interface Database String database_name: stores database names tablename: stores database table names UploadFile filename: file the user will upload storage: will be stored in a file system then save url to database Example: video or picture 19

28 Table 2: Functions of the classes Class name Method Administrator Username: username of Admin needed for authentication Datatype: string Example: myusername Password: password of user needed for when user logs in Datatype: characters and numbers Example: My123pass Interface displayinterface(): display different interfaces e.g. login, home page or sign up Database storedata(): stores data to the database, user details, media files users will share or upload into the system. Pseudo-code Login Function: user logs in to the system by entering their login details; username and password, else redirect user to sign up page if they are not registered. if(user click login button){ search user on the database for username and password if(user details match){ login to the application else if (user details don t match){ display user not found then open sign up page } } } Upload media files: users can upload and share media files such as video and images. 20

29 If (user click upload) { Then display browse button User click on browse button Open files in file system of computer Select file to upload Then click upload button } Search images function: this function allows users to search for existing images and use them in their posts. If (user click search){ Enter keyword Display images match keyword Else if(keyword not found){ Return try different keyword Then click share or upload button } } Conclusion This chapter looked at the inner details of the class attributes and how the user will interact with the system. In this chapter we also looked at the pseudocode for the following functions; login function where a user was redirected if they are not existing users. Upload function where a user has a choice to upload videos or images and share them with other users. The search function, users can search into the system for images they would like to use. Navigate function where a user can navigate through the system by viewing existing images by using left and right arrow to see latest or images uploaded some time ago. This chapter basically considered at the Low Level Design of the system. 21

30 C h a p t e r 6 CODE DOCUMENTATION Introduction In the previous chapter we looked at the Low Level Design of the system. The datatypes for the attributes and also define the algorithms and implementation details of the classes were defined. Also the state and sequence diagrams of the system were defined and explained. In this chapter snippets of the full documentation of the code is presented. In each code snippet a few lines explain what the function does. Sign up page The function Register allows users to register using their username, and a password. <!-- The function Register, it delas with all the registration part where a user registers using their username, and a password inoder to become a member.--> <?php session_start(); //start user session if (isset($_post['register_btn'])) { $db = mysqli_connect("localhost", "root", "ratsu", "authentication"); $username = preg_replace('#[^a-z0-9]#i', '', $_POST['username']); $ = mysqli_real_escape_string($db, $_POST[' ']); $password = ($_POST['password']); $password2 = ($_POST['password2']); //duplicate data checks for username and $sql = "SELECT id FROM users WHERE username='$username' LIMIT 1"; $query = mysqli_query($db, $sql); $u_check = mysqli_affected_rows($db); 22

31 // $sql = "SELECT id FROM users WHERE ='$ '"; $query = mysqli_query($db, $sql); $e_check = mysqli_affected_rows($db); //form data error handling, //checking username, and password if details have been entered if($username == "" $ == "" $password == ""){ echo "Please fill in all the fields"; exit(); } //check username if its already taken else if($u_check > 0){ echo "The username you entered is already taken"; exit(); } //check address if its already used in the system else if($e_check > 0){ echo "That address is already in use in the system"; exit(); } //making sure username characters are between 3 and 16 else if(strlen($username) < 3 strlen($username) > 16){ echo "Username must be between 3 and 16 characters"; exit(); } //making sure username is valid by not allowing it to start with numeric values else if(is_numeric($username[0])){ echo "Username cannot begin with a number"; exit();} else if($password!= $password2){ echo "The two passwords don't match"; exit(); } //create user account if all the above rules have been passed else{ $password = md5($password); $sql = "INSERT INTO users(username, , password, avator) VALUES('$username', '$ ', '$password', $avator)"; $query = mysqli_query($db, $sql); $userid = mysqli_affected_rows($query); 23

32 ?> //creating user directing to keep user files uploaded if(!file_exists("user/$username")){ mkdir("user/$username", 0755); } //$_SESSION['message'] = "You are now logged in"; $_SESSION['username'] = $username; header("location: index.html"); //redirect to home page } echo "You have been successfully registered!"; exit(); } Login page The function Login, logs a user into their profile page where a user logs in using their username and password in order to access the personal work space. <!-- The below function Login, logs a user into their profile page where a user logs in using their username and password inoder to access the personal work space.--> 24

33 <?php session_start(); //user session starts $db = mysqli_connect("localhost", "root", "ratsu", "authentication"); if (isset($_post['login_btn'])) { $username = ($_POST['username']); $password = ($_POST['password']); $password = md5($password); //hashing password before storing, for security purposes $sql = "SELECT * FROM users WHERE username='$username' AND password='$password'"; $result = mysqli_query($db, $sql); $row = mysqli_fetch_row($result); if (mysqli_num_rows($result) == $row[1]) { $_SESSION['message'] = "You are now logged in"; $_SESSION['username'] = $username; header("location: categories.html"); //redirect to home page >>> in this case it should redirect to page=profile not created yet } else if(mysqli_num_rows($result) == 2){ $_SESSION['message'] = "You are now logged in"; $_SESSION['username'] = $username; //redirect to home page header("location: user2.html"); } else{ //if user doesn't have an account error message will be displayed $_SESSION['message'] = "Username/ password combination is incorrect"; } }?> Upload function This function allows the user to brows on their computer the file they would like to upload into the system and share it with other users. <?php $db = mysqli_connect("localhost", "root", "ratsu", "v-u-a-p"); 25

34 //mysqli_select_db(); if (isset($_post['submit'])){ $name = $_FILES['file']['name']; $temp= $_FILES['file']['tmp_name']; move_uploaded_file($temp, "uploaded/".$name); $url = " $sql = "INSERT INTO videos(name, url) VALUES('$name', '$url')"; mysqli_query($db, $sql); //mysqli_query("insert INTO `videos` VALUE ('', '$name', '$url')"); }?> <a href="videos.php">videos</a> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" name="submit" value="upload" /> </form> <?php if(isset($_post['submit'])){ echo "<br />".$name." has been uploaded"; }?> Watch function This function performs the part where a file is retrieved from the database and a user is able to click on a video which will then be streamed. <?php //$db = mysqli_connect("localhost", "root", "ratsu", "v-u-a-p"); $query = "SELECT * FROM `videos`"; mysqli_query($db, $query) or die('error getting data'); $result = mysqli_query($db, $query); while($row = mysqli_fetch_assoc($result)){ $id = $row['id']; $name = $row['name']; $url = $row['url']; echo "You are watching ".$name."<br />"; 26

35 echo "<embed src='url' width='560' height='315'></embed>"; }?> Upload function This function creates the user profile, where a user is able to set their profile picture and upload stories. <?php //the file name upload.php is the same as index.php $db = mysqli_connect("localhost", "root", "ratsu", "v-u-a-p"); //mysqli_select_db(); if (isset($_post['submit'])){ $name = $_FILES['file']['name']; $temp= $_FILES['file']['tmp_name']; move_uploaded_file($temp, "uploaded/".$name); $url = " $sql = "INSERT INTO videos(name, url) VALUES('$name', '$url')"; mysqli_query($db, $sql); //mysqli_query("insert INTO `videos` VALUE ('', '$name', '$url')"); }?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video upload and playback</title> </head> <body> <a href="videos.php">videos</a> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" name="submit" value="upload!" /> </form> <?php if(isset($_post['submit'])){ echo "<br />".$name." has been uploaded"; } 27

36 ?> </body> </html> Search function This function creates the user profile, where a user is able to set their profile picture and upload stories. <!-- This is a Search function that allows a user to search for videos that have been shared y other users--> <?php if(isset($_post['submit'])){ if(isset($_get['go'])){ if(preg_match("/^[ a-za-z]+/", $_POST['name'])){ $name=$_post['name']; //connect to the database $db = mysqli_connect("localhost", "root", "ratsu", "authentication"); or die ('I cannot connect to the database because: '. mysql_error()); //-select the database to use $mydb=mysql_select_db("digitalstories"); //-query the database table videos $sql="select ID, filename FROM videos WHERE filename LIKE '%". $video. "%' OR video_gallery LIKE '%". $filename."%'"; //-run the query against the mysql query function $result=mysql_query($sql); //-create while loop and loop through result set while($row=mysql_fetch_array($result)){ $FirstName =$row['firstname']; $LastName=$row['LastName']; $ID=$row['ID']; //-display the result of the array echo "<ul>\n"; echo "<li>". "<a href=\"search.php?id=$id\">".$firstname. " ". $LastName. "</a></li>\n"; echo "</ul>"; } } else{ echo "<p>please enter a search query</p>"; 28

37 ?> } } } Conclusion This chapter looked at the code documentation of the main functions. In this chapter all the details of the main functionalities were documented with few lines explaining what each function does. 29

38 C h a p t e r 7 TESTING DOCUMENT (TD) Introduction In this chapter the researcher will look at the testing of the digital storytelling system. This chapter will describe how the system is tested to prove that it works successfully, taking a closer look at functionality testing, user testing and system testing. Functional Testing The software application is tested thoroughly to verify that it meets the functional and technical specifications. This testing process verifies that each function of the software application operates in conformance with the requirement specification. Unit Testing The purpose of this testing is to verify that each unit of the software application performs as designed. This is achieved by simply creating dummy accounts to test using the existing usernames already stored in the database to test the units individually and independently for proper operation. 1. Sign Up Username, and password are entered on the sign up form. Then the register button is clicked to submit the information and it is stored into the database. The user profile is then created after the user clicked the register button, directing the user to its own personal page. 2. Login Username and password is used to login to the system. The system detects whether the username and password already exist in the database 30

39 and if they do not exists an error message is displayed and if the details are correct the user session is started. 3. Uploading Video Digital stories are shared by selecting the upload button in the users profile page. The user selects the file from their computers file system and click open button to upload it. Then the uploaded file is added to the database and displayed on the users profile page. 4. Logout Logout function ends the user s session and redirect the user to the home page. User Testing Usability testing was used as the method of testing. This type of testing is used to evaluate a product or service by testing it with representative users. Seven people were used to complete a set of tasks given to them while the researcher observes and takes notes; these tasks were completed using the User Guide. The goal of this process is to identify any usability problems, collect data and to determine the user s satisfaction of the product. Two questionnaires set of questionnaires was used, the other questions were open-ended questions where a participant was interviewed by the researcher, whereas the other questionnaire was a single-select option. The reason for using two set of questionnaires was to get more insight on what participants think about the system. Each participant completed two set of questionnaires, where they had to answer questions after completing the task they were given (see Appendix D) and where they had to tick answers (see Appendix E). A consent form was used as a confirmation that participants agree to take part in the research study. Each participant signed the consent from to agree on participating in the research study (see Appendix G). 31

40 Feedback from participants The participants found that the sign up and login process was simple and easy to follow. It did not take much time to finish the tasks. The users managed to create their profile successfully after signing up and accessed profile to upload digital stories. The participants also mentioned that the process of uploading and sharing stories was good and straight forward nothing much was needed. The participant s encountered problems when the option for selecting to share their stories under a certain theme was not working properly and they recommended for it to be fixed as they said it would add to the uniqueness of the platform. Most (85%) of the participants found out that the whole process from signing up, to login and up to sharing digital stories was easy to follow and took less than expected time, which is a good thing. 32

41 The following is a representation of the testing done Figure 9 Bar graph 33

42 Figure 10 Pie Chart The two graphs above represent a data that was collected during the testing process. The bar graph was for open ended questions where participants were interviewed. The pie chart was used for the single select response questions. This data showed that the system is good and it can also be improved in some of the functionalities and the interface. 34

43 Summary of the feedback The overall, the interface was simple, easy to navigate, understandable and well presented. There are a few things that can be improved that include the look of the interface and more options for the user profile page, to customize it and add friends and also to provide list of more functionality. Each of the system units were tested using unit testing, some of the units were working and some were not working as expected due to problems that were encountered and they can still be fixed and improved. The functionality of the system also needs improvement as the system has to function according to how the user requirements were stated. Conclusion The focus on this chapter was on testing. We looked at Unit testing and Usability testing and explained how each testing was performed. Participants gave a feedback and a summary based on the feedback was made. 35

44 C h a p t e r 8 USERS S GUIDE (UG) Introduction In the previous chapter the testing of the software system is explained in detail. In this chapter we provide a user s guide which tells the user how to use the system, a step-by-step approach giving details of each subsystem on how it works is provided. Digital Storytelling system The first page that will appear when a user access the system will be a home page, an option to sign up or login to the system will also appear on the home page. In order to share digital stories, each user needs an account and they can create it by registering and then access it using their login details. - Sign Up a. Enter details required in the sign up page. - Login a. Enter username and password b. Click on login when done - Posting a digital story a. Click upload button b. Select file on your computer file system c. Click open - How to share it publicly a. Click one of your digital stories b. Select category to share it under c. Click share 36

45 - Logout a. User clicks on logout and then it will be redirected to the home page where they will see all the digital stories shared by other users. Whenever a user wishes to share a story, they must login first. Conclusion This chapter looked at the User s Guide on how to use the system. A detailed step by step guide was discussed on how to access the system and perform all the tasks a user would like to do. 37

46 38

47 APPENDICES Appendix A Interview questions posed to NGO personnel at Mfuleni Community This project aims to help people from community centers and students in different schools, where a web or mobile application will help them to share stories and transfer knowledge via digital storytelling. 1. What do you think about digital storytelling? 2. Have you ever used it in your community center? 3. What do you think is important about digital storytelling? 4. What problems would you come across if you were to implement the use of digital storytelling in your community center? Appendix B Interview questions posed to different students at the University of the Western Cape Interview with different students at the University of the Western Cape 1. Do you think digital storytelling is an effective learning tool for students? 2. How do you think it will help students? 3. Would you recommend it to other students to engage in Digital Storytelling? 4. What is important about digital storytelling? 5. What problems you think you would face when you want to create your own digital stories? 39

48 Appendix C Consent Form Digital Storytelling This study entails the following: a) Answering a short questionnaire and mark sheet of few questions b) Interview about Digital Storytelling. If you are happy to participate in this research project please complete this form. Please tick each box accordingly and return the signed copy to the researcher I confirm that I have read and understand the purpose of this questionnaire and have had the opportunity to ask questions. I understand that my participation is voluntary and that I am free to withdraw at any time, without giving any reason. I will not provide any security-related information to the interviewer. I give permission for the information I provide to be used for research purposes (including reports, publications and presentations), with strict preservation of anonymity. This means that any information I give will not be individualized and will be part of a collection of data that cannot be traced to one individual or team. Please tick to confirm O O O O Name of participant... Date... Signature... 40

49 Appendix D Questionnaire These questions will be answered by the participants after interacting with the Digital Storytelling System. The intention is to use the feedback to improve the system. a) Did you manage to complete all the tasks? b) How did you find the sign up and login process? c) How did you find the layout of the system? d) If you could change one thing on the system what would it be? e) Any problems or suggestions on the color scheme? f) What would encourage you to use the system in future? g) If you were to review this system what score would you give it out of 10? h) Anything else you care to share on how you found the system? 41

50 Appendix E Questionnaire Please tick your answer. a) How easy was it to find what you were looking for in the system? o Extremely easy o Very easy o Somewhat easy o Not so easy o Not at all easy b) Did you take more or less time than you expected to find what you were looking for on the system? o A lot less time o A little less time o About what I expected o A little more time o A lot more time c) How visually appealing is the system? o Extremely appealing o Very appealing o Somewhat appealing o Not so appealing 42

51 o Not at all appealing d) How easy do you find the system? o Very easy to use o Easy to use o Neither easy nor difficult to use o Difficult to use o Very difficult to use e) How likely would you recommend this system to a friend or a colleague? Not at all likely Extremely likely Appendix F These are the task to be completed by participants. - Sign Up a. Enter details required in the sign up page. - Login a. Enter username and password b. Click on login when done - Posting a digital story a. Click upload button b. Select file on your computer file system c. Click open - How to share it publicly a. Click one of your digital stories 43

52 b. Select category to share it under c. Click share - Logout a. User clicks on logout and then it will be redirected to the home page where they will see all the digital stories shared by other users. Whenever a user wishes to share a story, they must login first. 44

53 Appendix G These are the Consent forms completed by participants. The number of participants was 7, appendix G has all the attachments of the completed and signed consent forms. 45

54 46

55 47

56 48

57 49

58 50

59 51

60 52

61 Table 3 Project Plan for Term 1 53

62 Table 4 Project Plan for Term 2 54

63 Table 5 Project Plan for Term 3 55

64 Table 5 Project Plan for Term 4 56

65 57

66 BIBLIOGRAPHY Bozalek, V., The use of emerging technologies for authentic learning: A South African study in higher education. British Journal of Educational Technoloy, pp Dumas, J.S. and Redish, J., A practical guide to usability testing. Intellect Books. Lambert, J., Digital storytelling: Capturing lives, creating community. Routledge. Miller, E. A., Digital storytelling. Doctoral dissertation, UNIVERSITY OF NORTHERN IOWA. Poushter, J., Smartphone Ownership and Internet Usage Continues to Climb in Emerging Economies. Pew Research Center: Global Attitudes & Trends Robin, B. R., Sigital storytelling: A powerful technology tool for 21st century classroom. Theory into Practice, pp Runeson, P., A survey of unit testing practices. IEEE software, 23(4), pp Sadik, A., Digital storytelling: A meaningful technology-integrated approach for student learning. Edicational technology research and development, pp Vaishnavi, V.K. and Kuechler, W., Design science research methods and patterns: innovating information and communication technology. Crc Press. Xu, Y., Park, H. and Baek, Y., A New Approach Toward Digital Storytelling: An Activity Focused on Writing Self-efficacy in a Virtual Learning Environment. Educational Technology & Society, 14(4), pp

67 Yuksel, P., Robin, B. R. & McNeil, S., Educational uses of digital storytelling around the world. In Proceedings of Society for Information Technology & Teacher International Conference, pp

68 INDEX A API vi Activity diagram 12 C Class diagram 8 D Digital Storytelling vi Database 16 I R RAD 4 U UIS 8 Use Case 13 Usability Testing 37 P Pseudocode 20 ICT vi O OOA 15 60