We store all quizzes in one JSON format that we JSON.stringify as text. LocalStorage was a natural choice since the data was simple enough and did not require advanced indexing. HTML5 MathBoard implements this feature using HTML5 localStorage using the SnowUI DAO interface. MathBoard allow users to save their quiz to later replay them. In the Web version of MathBoard, we use many HTML5 features: Local storage # Instead, we decided to spend more time polishing the keyboard interface than implementing the drawing board. While it could have been fancy to implement it, drawing numbers with a mouse is not very practical. One feature in the iPad version that didn't make much sense for the PC interface was the drawing board. TAB support was added to move from one input field to another and the ← and → arrows cycles through values. A repeat behavior was implemented for click and keydown so that users can accelerate the value change when the mouse or the keyboard is pressed. The vertical line can also be dragged to quickly change values. HTML5 Version SettingsĪs in the iPad interface, we allow the user to click on the left and right arrow to change the value of a control. The port to HTML5 was pixel perfect: iPad vs. The solution was adding support for keyboard shortcuts and replicating UI controls using CSS positioning. We wanted the same high fidelity representation in the Web interface. The MathBoard input controls on the iPad are highly polished. On the iPad you have only the touch interface, on the PC you need take into consideration both mouse and keyboard. touch #Īnother key difference between the iPad and Web version is the input interface. HTML5 screen orientation Input: keyboard/mouse vs. Consequently, we reorganized the UI design and moved the settings panel to the right side, on a sliding view (animated by CSS3 transitions). The iPad MathBoard is exclusively vertically oriented, which was not optimal for PC displays as they are generally used in a horizontal fashion. When porting the application to HTML5 for PC usage, we had to make several modifications to the design and user-interaction of the application. It provides a DOM centric MVC mechanism and a flexible way to build custom components while leaving the opportunity for the application developer to use any widget/controls library or custom code he or she deems optimal. SnowUI is a simple yet powerful MVC framework on top of jQuery. SnowUI: jQuery provides a great API and best practice to work with the DOM, however, for the HTML5 MathBoard application we needed an MVC or MVP style framework to orchestrate all of the different views.jQuery also has the benefit of being more DOM centric, which tends to make the design and implementation of an application closer to HTML. jQuery: While HTML5 has many of the advanced selectors that make jQuery so great, we decided to stick with jQuery anyway as it gave us a very robust and mature way to manipulate the DOM and related events.HTML5: Since we do not have any HTML4 support requirements, we decided to go with HTML5 as the base.Given the requirements, we decided to go with the following architecture: Make a 1.0 version with all the features but the problem solver in less than a month.Make the application "server-less" so that the application runs entirely on the client and could be hosted on a static server or Google Chrome packaged application.Implement 100% of the applicable features.PC/Mac with keyboard/mouse vs touch screen). High fidelity port of the original iPad application look and feel and user interface.The key requirements for this HTML5 porting project were the following: N2N-Apps focuses on quality and speed of delivery.ĭownload MathBoard for the Chrome Web Store Download MathBoard for the Chrome Web Store (free version) Requirements # The company was funded in 2010 by Jeremy Chone whom, after 11 years of engineering and management experience from Netscape, Oracle, and Adobe, decided to share its expertise with businesses to build high-quality Web and Mobile applications. N2N-Apps is a Software Development company focusing on building next generation of Web and Mobile application with HTML5 technology. The goal was to do the highest fidelity port of the iPad application to HTML5. MathBoard on iPad, a PalaSoftware application, is a highly polished application with many subtle but natural animations and a unique realistic look and feel.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |