My highschool bookshelf

The application encourages senior high school students to use electronic reading aids, such as their tablets, in the classroom, by introducing digital versions of the school handbooks. Students have access to a list of handbooks that they can browse by chapter. Commenting is enabled for each page with the use of drawing and editing markup tools. The application serves the needs of Greek high school students in specific. The application was created with Notepad++ (Don Ho, 2011), a free source code editor and uses web technologies such as HTML5, the JQuery Mobile framework and a custom JQuery Mobile CSS theme.  Data are stored in a document-oriented database (CouchDB) that provides the necessary storage and synchronization facilities. CouchDB is accessible through an HTTP-based REST API that allows simple and straightforward deployment. In terms of scaling, CouchDB is fault-tolerant and self-sufficient and can handle increases in concurrent requests without complaining. It also provides a flexible document-based structure, powerful mapping and easy-to-use replication (Brown, 2012). To access the database server, we use the “Futon” native web-based interface that is built in CouchDB. All the interactions with CouchDB are through HTTP (GET, PUT, DELETE). JSON as a native data structure format works well with the JavaScript engine embedded into CouchDB and enables easy exchange of data with the web application. All the data generated by CouchDB is generated as JSON, which makes the processing information very flexible. The document structure required careful consideration. Top-level fields are used to store book data and chapter data are stored as compound elements to ensure consistency. A simple design document defines two views that we need to display chapter and book details and create and update notes related to each book chapter. The following image shows how information is retrieved from the database.

Note that the index generated by the view is in a form of a B-Tree (O’REILLY MEDIA, INC, 2011) which makes the process of retrieving information very quick. To visually represent the information, the app uses the jQuery Mobile HTML-5 based user interface system.  In this framework we have created a custom theme (theme-z) with custom icons using “ThemeRoller for jQuery Mobile” (THE JQUERY FOUNDATION, 2010). In terms of a responsive design, the use of media queries in CSS was considered important in order to handle device browser differences for different smartphones and tablets. The app currently provides access to nine books that account for more than 1700 pages altogether. It is flexible and it can grow easily to support more books without the need to add or change the HTML structure or the Javascript code. The advantage of this web app is that it uses the Multi-page template structure of jQuery Mobile to dynamically create a page with a list of available books and a page with the title, image, description and chapters for each book in the same HTML document. The pages are accessed in the DOM by a unique ID which is the ID of the book document in the database. At this point it is important to mention that with CouchDB we control not just the data but also the source code. Thus, the HTML, CSS, JS and other files are stored as attachments to the design document in our database.
In the image below, you can see the main functionality of the app and the HTML pages that provide it. “Main.html” contains the splash screen and main menu screen. In this page, “Help.html” and “Category.html” are loaded and inserted to the DOM with the loadPage() method of  the $.mobile object for faster access to the “Help” and “Book catalogue” pages. The CSS-based transition effects of the jQuery Mobile Framework are used to navigate from and to the pages. When the user opens the “Book Catalogue” the pre-loaded “category.html” displays a list of the available books. When the user picks a book from the list, the pre-loaded book page is displayed with an expandable list of the book chapters.

The file “chapter.html” is responsible for the browsing of the chapter pages and the management of notes. To provide a native way to scroll and zoom content the app uses iScroll (MATTEO SPINELLI, 2011), a script that enables developers to have a scrolling central area. The app also uses fixed positioning for the header and footer that is provided by the jQuery Mobile framework. For the users of tablets, the app enables the cross-platform touch event features (“swipeleft”, “swiperight”) of jQuery Mobile. We made the decision to disable these events for users of smartphones because of the inconvenience that is caused by smaller screens. This app feature is also controlled by a media query. The user can also tap the footer buttons to go back and forth in the chapter.

Test plan and results

The purpose of the test plan is to communicate known issues, identify required resources and related information and ensure that all issues are addressed before release. I have shared a copy of the test plan on Scribd.