A REPORT

ON

(Design and Development of an Interface for Educational Videos)

BY

Name of the Student: ID.No:

Vaibhav Jain 2013B5A4842H

AT

(Birla Museum, Birla Institute of Technology & Science)

A Practice SchoolI station of

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI

(June, 2015)

A REPORT

ON

(Design and Development of an Interface for Educational Videos)

BY

Name(s) of the ID.No. (s) Discipline(s) Student(s)

Vaibhav Jain 2013B5A4842H MSc (Hons.).Physics+ Mechanical Engineering

Prepared in partial fulfillment of thePractice School-I Course

AT

(Birla Museum, Birla Institute of Technology & Science)

A Practice SchoolI station of

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI

(June, 2015)

BIRLA INSTITUTE OF TECHNOLOGY AND SCIENCEPILANI (RAJASTHAN)

ACKNOWLEDGEMENTS

I would like to sincerely thank Dr. V. N. Dhaulakhandi (Director of Museum, Bits Pilani), BITS Pilani for giving me the opportunity to undergo a Project in Design and Development of an Interface for Educational Videos. I would also like to express my special gratitude to Dr. Bharti Khungar and Dr. Vikramjeet Singh for their valuable support and guidance throughout the semester. I would also like to thank her because of the pain they took to provide me with the study material. They were a constant source of inspiration for me. I would like to express my gratitude to the BITS Library and Bits Museum which provided me with the references as and when required.

- Abhishek

BIRLA INSTITUTE OF TECHNOLOGY AND SCIENCE, PILANI (RAJASTHAN)Practice School DivisionStation: Birla Science MuseumCentre PilaniDuration 22 days Date of Start 22/06/2015Date of Submission 17/06/2015Title of the Project: Design and Development of an Interface for Educational Videos

ID No./Name: 2013B3A1495P Abhishek AgarwalDiscipline: MSc (Hons.).Economics + Chemical Engineering

Name(s) and designation(s) of the expert(s): Mr. Vikram Jeet Singh, Museum Project Manager Name(s) of the Project Areas: App DevelopmentAbstract : In this project, an interactive touch-based interface has been developed by using the software, Visual Studio compatible with Windows 8 (32 bit) or higher version of operating system having a .NET framework. The skeleton of the application has been developed using XML and C# programming language. The videos have been extracted from the DVDs of How It Works series and made compatible with the app by converting each video into .wmv video file format.Signature(s) of Student(s) Signature of PS Faculty Date Date

Table of contents

Contents Page no.

Introduction 6

Explanation of the main page:

7

Using grid template for designing the app

11

C # programming language and its usage in Visual Studio

17

Conclusion 20

Appendicies20

Glossary 25

Introduction

The following are the logistics and operational analysis of the video systemization project:Initially, we collected the information on all the categories of How It Works series provided to us. Thereafter, we collected all the relevant pictures and categorized their respective videos into different sets of folders broadly named as Human Biology, Science, Space, etc. In all, we made 7 such categories under which we segregated each of the related videos into different sub-categories. For example, under the category of Human Biology, 13 different sub-categories were made on the basis of body systems like Circulatory system, Nervous system, etc.

Explanation of the main page:

A xaml schema is an abstract definition of a set of xaml instances. Xmals are used as namespace identifier to give instructions to various applications.

(Code)

DefaultViewModel is of type IObservableMap defined in Layout Aware Page. It is an easy way to pass data from the code behind the xaml page and xaml page itself. It sets the key of groups equal to the collection returned from SampleDataSource.

25

Grid in XAML defines rows and columns of a page. StackPanel will take any item inside of it and stack them either horizontally or vertically. These layout controls control the display of one or more controls or items that are inside them.

(5 times)

Hub Class represents a control that displays groups of content in a panning view. Hub header and hub section are its properties. Hub header defines two columns where in one column it creates a text block with text as the app name. Hub Section defines three rows.

Using grid template for designing the appThe Basics of XAML in visual studio are easy to learn. Visual studio provides you some great templates to work on with. These templates give you a head start in developing the app. Templates make your way easier. You just have to go in and do some tiny tweaks and changes to various items and tailor it to your needs. There is a data binding process in VS which connects the ui and the recourses. What it does is that it tells the xaml code what is to be shown. You just have to put a binding attribute in the xaml classes and it will pick the data from the assets through the path provided as the value to the binding attribute.So lets start with grid template.Open the VS and select the new project option from the left. It will open an dialog box from where you select visual c# and then windows. It leaves you with some templates on the right hand sides which are different in-built templates. Choose grid template. And name it whatever you want we named it app4.

We see our project loaded in solution explorer and main area. When we run this program, an app will pop out which is the frame work of our main app. this is the same framework which we wanted and it has come to us for free. This is what I mentioned earlier that these templates put us way ahead in the league of app development.Now close the app and see the solution explorer. We have several files there.Select the items detail file here which will give us a preview of that file in the preview window on the top and the code on the bottom.

Now to modify this template according to our requirement we will have to bind some data to the code, make changes in the layout and add some functionality.With XAML we can also include CSS in our designing. The style feature is designed with CSS language which works as the template for aesthetics of the elements inside that block of code.

We can make layout with the c# as well but that makes the coding a headache and messy thats why we need XAML to perform that task for us.

When we look at the code we see a lot of binding attribute written. Binding attribute links a elements inside the layout with a resource file in the database of the image.There are two types of variable data sourses : dynamic and static.Dynamic variables are called from outside the code while static variables are called from inside the code.

The binding attribute is linking the tile with a image in the resources of the app but as it is a template it shows a solid fill which is defined by the schema of visual studio itself.

To bind the desired data in the app we will create new folder inside the solution explorer named image and add all the image items inside this image folder.In the same way we can add a data folder and add text items in it. Now onwards whenever a image will be called from the binding attribute, respective image will be picked from the image folder and will be assigned to the tile.

C # programming language and its usage in Visual StudioC# is a modern, general-purpose, object-oriented programming language developed by Microsoft and approved by European Computer Manufacturers Association (ECMA) and International Standards Organization (ISO).C# was developed by Anders Hejlsberg and his team during the development of .Net Framework.C# is designed for Common Language Infrastructure (CLI), which consists of the executable code and runtime environment that allows use of various high-level languages on different computer platforms and architectures.The following reasons make C# a widely used professional language: It is a modern, general-purpose programming language It is object oriented. It is component oriented. It is easy to learn. It is a structured language. It produces efficient programs. It can be compiled on a variety of computer platforms. It is a part of .Net Framework.

C # is a back end programming language. It works behind the scenes and is responsible for the processes going inside the computer when user interacts with the icons on the interface. The code used is as follows with supporting comments highlighted in green and the rest of the code in black except the language keywords which are in dark blue.

''' ''' A page that displays an overview of a single group, including a preview of the items''' within the group.'''

Public NotInheritable Class GroupDetailPage Inherits Page

''' ''' NavigationHelper is used on each page to aid in navigation and ''' process lifetime management '''

Public ReadOnly Property NavigationHelper As Common.NavigationHelper Get Return Me._navigationHelper End Get End Property Private _navigationHelper As Common.NavigationHelper

''' ''' This can be changed to a strongly typed view model. '''

Public ReadOnly Property DefaultViewModel As Common.ObservableDictionary Get Return Me._defaultViewModel End Get End Property Private _defaultViewModel As New Common.ObservableDictionary()

Public Sub New() InitializeComponent() Me._navigationHelper = New Common.NavigationHelper(Me) AddHandler Me._navigationHelper.LoadState, AddressOf NavigationHelper_LoadState End Sub

''' ''' Populates the page with content passed during navigation. Any saved state is also ''' provided when recreating a page from a prior session. ''' ''' ''' The source of the event; typically ''' ''' Event data that provides both the navigation parameter passed to ''' when this page was initially requested and ''' a dictionary of state preserved by this page during an earlier ''' session. The state will be null the first time a page is visited.

Private Async Sub NavigationHelper_LoadState(sender As Object, e As Common.LoadStateEventArgs)

' TODO: Create an appropriate data model for your problem domain to replace the sample data

Dim group As Data.SampleDataGroup = Await Data.SampleDataSource.GetGroupAsync(DirectCast(e.NavigationParameter, String)) Me.DefaultViewModel("Group") = group Me.DefaultViewModel("Items") = group.Items End Sub

''' ''' Invoked when an item is clicked. ''' ''' The GridView (or ListView when the application is snapped) ''' displaying the item clicked. ''' Event data that describes the item clicked.

Private Sub ItemView_ItemClick(sender As Object, e As ItemClickEventArgs)

' Navigate to the appropriate destination page, configuring the new page ' by passing required information as a navigation parameter

Dim itemId As String = DirectCast(e.ClickedItem, Data.SampleDataItem).UniqueId Me.Frame.Navigate(GetType(ItemDetailPage), itemId) End Sub

#Region "NavigationHelper registration"

''' The methods provided in this section are simply used to allow ''' NavigationHelper to respond to the page's navigation methods. ''' ''' Page specific logic should be placed in event handlers for the ''' ''' and . ''' The navigation parameter is available in the LoadState method ''' in addition to page state preserved during an earlier session.

Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs) _navigationHelper.OnNavigatedTo(e) End Sub

Protected Overrides Sub OnNavigatedFrom(e As NavigationEventArgs) _navigationHelper.OnNavigatedFrom(e) End Sub

#End Region

End Class

Conclusion

On a concluding remark, we would like to say that the idea we had at the back of our mind while preparing the interface was to bring the mundane and prosaic to life and turning the ordinary into extraordinary. We all knew that people from different academic backgrounds would come as the customers and hence the real challenge was to make an interface that would relating the models to people through a user friendly interaction that would be suitable for all the age groups, is invariably versatile in its conduct appealing to the myriad, technology makes ordinary the extraordinary and all the technological knowledge has paid off in creating a fast, efficient and user friendly interface. It has bright, eye catching images for the videos individually and a stern austere categorization.

AppendicesCode of Group Items Page

Code for Item Detail Page

Glossary:

JSON: JSON(JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999.

.NET:The.NET Frameworkis asoftware frameworkdeveloped byMicrosoftthat runs primarily onMicrosoft Windows. It includes a largeclass libraryknown asFramework Class Library(FCL) and provideslanguage interoperability(each language can use code written in other languages) across severalprogramming languages.XML:Extensible Markup Language(XML) is amarkup languagethat defines a set of rules for encoding documents in aformatwhich is bothhuman-readableandmachine-readable. The design goals of XML emphasize simplicity, generality and usability across theInternet. It is a textual data format with strong support viaUnicodefor differenthuman languages. Although the design of XML focuses on documents, it is widely used for the representation of arbitrarydata structuressuch as those used inweb services.