GrandmaTV Web application Michal Schovanek, Jan Dohnal

Summary Task Example of some activities Example of appropriate XML file GUI GUI screenshots Technical solution Conclusion

Task Design and implement user friendly web application that will be used to get input data for GrandmaTV Talking Head system. Task for web application is to get list of activities including multimedia section and create input XML file for GrandmaTV Talking Head system.

Example of activities Dad Karel plays football in football playground in Prague every week on Wednesday. Family Novakova visit folks in Moravia in the beginning of each month.

Example of appropriate XML file part 1 weekly Wednesday play football with friends football playground in Prague sound.mp3 video.avi picture1.jpg picture2.png picture3.bmp happy

Example of appropriate XML file part 2 monthly month beginning visit folks Moravia sound.mp3 picture.jpg sad

GUI part 1 Web page is divided into three parts On the top is place for some logo On the left side is tree navigation to the XML file for better orientation On the right side is page content Web pages are aligned to the center Three types of screens XML screen Single person / group screen Activity screen

GUI part 2 Supported operations with XML files, single persons / groups, activities Adding Deleting Modifying Browsing Multimedia section in activity screen supports Adding multimedia files Deleting multimedia files Viewing multimedia files All operations in multimedia section are instant without reloading screen, switching head mood pictures too

XML screen

Single person / group screen

Activity screen

Activity screen – edit mode

Technical solution part 1 Web pages are valid XHTML strict Using div layout and valid CSS styles JavaScript for validation on client side and confirmation message boxes PHP 5 for processing on server side AJAX for processing multimedia attachments in activity edit screen without reloading page

Technical solution part 2 Web application is object oriented The one and only page is index.php which includes funtions.php that contains all needed functions (for showing screen, processing and storing XML etc.) Main page switches between screen through GET parameters and calls appropriate functions from functions.php file Working with XML files manages DOM extension in PHP 5.

Technical solution part 3 All created xml files are stored on the server in feeds directory All multimedia attachments are stored on the server in attachments directory, that contains sub directory structure, for example karel\single\dad-Karel\0\ Deleted XML and multimedia files stay stored on the server When is XML file modified (for example we add some activity), changes are immediately stored on the server, there is no need to click some save xml file button

Testing Testing were made by two people: application developer and usability tester Application developer made new versions and introduced tester to the GUI and features Usability tester tested application and made some notes and suggestions to the developer Application was tested in Internet Explorer, Firefox, Opera (Windows) and Safari (Mac OS) Optimized for Firefox and Safari

Conclusion We made user friendly internet application that is able to get input data from user and create appropriate XML file for GrandmaTV Talking Head system and store it on the server There is also possible to edit or delete stored xml file structure Application is stable and ready to use