Building A Scientific Calculator Using Bootstrap, JavaScript, And Native Web Technologies Is An Essay.

1.Critically evaluate the properties and capabilities of modern mobile devices and the specific issues relating to software development for them.
2.Demonstrate methods of selection and assessment of mobile devices and mobile application implementation techniques.
3.Identify the nature of communication from mobile devices and interface a mobile device to external hardware.

Designing the Web Application

The web application that is being developed here is a Scientific Calculator. It needs not any complex web technology to be developed, therefore, certain clusters of native web technologies have been used in order to deliver a fluid performance. It was necessary to enhance the User Interface and the look and feel of the application. The use of native HTML and CSS components and classes helped to keep the development phase simple (Fielding 2014). Furthermore, in order to elaborate on the design aspects of the website of the application, Bootstrap has been chosen to bring the responsive web design concept. Finally, the Calculator application’s logical operations have been carried out using the JavaScript framework and its library methods or functions (Shenoy and Sossou 2014).

The application is developed and designed with the motive to serve both the smartphone/tablet and the computer internet users. It was therefore necessary to choose a proper web framework that can handle the changing platforms for this application or website as one may opt to name it. For this purpose, a thorough search was necessary. It revealed quite a handsome number of options that can assist to build a responsive website. A responsive website is one that fixes the positions and sizes of its elements according to the screen sizes that it is being used in. Nene (2015), says the in a responsive website, the webpages can easily align themselves on a variety of devices with varying screen resolutions. This enhances the usability features of any application or website (Bryant and Jones 2012). A website designed with responsive web design adapts its layout according to the viewing environment by the means of fluid, proportion-based grids, CSS3 media-queries and flexible images. With the increase in mobile traffic on the internet, every web designer’s urgent requirement is to design for their client, the best possible responsive layout. JQuery Mobile and Bootstrap are two of the most common frameworks that offers the web developers and designers the scope to design hassle-free responsive layouts. Below, the Bootstrap framework will be critically attributed along with explanations about why it was chosen to design the Scientific Calculator application here.

Bootstrap is an open-source frond-end library that is used for the designing of websites and web-applications, developed by Twitter (Cochran 2012). It consists of CSS and HTML based templates for forms, buttons, tables, typography, navigation and many more. While JQuery Mobile is mostly a script based framework, bootstrap mostly concentrates on the front-end development only.

Choosing a Proper Web Framework

Bootstrap 4 has been developed with the motif to support all the commonly used web browsers like Firefox, Safari, Google Chrome, Internet Explorer and so on. Surprisingly, it is a framework that is supported by the IE8 versions as well. Bootstrap 3.0 adopted the mobile-first design philosophy that by default emphasises on responsive web design (Shenoy and Sossou 2014).

Bootstrap is a modular framework, consisting of series of Less stylesheets. These implement the various individual components of the toolkit. These stylesheets are commonly kept compiled within a bundle. These are included in the various webpages, with the programmer having the opportunity to choose which of the features that he wishes to keep and which not. Bootstrap provides various features to enhance the look and feel of a web design through the margin, padding and colour components. Every Bootstrap component contains of HTML structure, CSS declarations, and also accompanying JavaScript code, in some cases (Spurlock 2013).

The grid system is one of the most attractive features of the Bootstrap framework. The grid system and the bootstrap responsive design comes with a standard 1170 pixel grid layout. Alternatively, the developer can also opt to use a variable-width layout. However, in both the above said cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns according to the device display resolutions.

Bootstrap provides a set of stylesheets that provide basic style definitions for all necessary HTML components. These ranges from headings, buttons, other input elements to tables, divs and navigation bars. These provide a uniform, modern appearance for formatting all these images, texts and or form elements.

Apart from the above said regular HTML tags and elements, Bootstrap consists of other commonly used interface elements which are necessary to be implemented in order to design a responsive web design. These components are implemented as CSS classes, which must be applied to the required HTML elements in the webpages. These CSS classes are pre-compiled and stored in the open-source project that is available for free on the official website of Bootstrap (Mammen 2012). This makes it stand out from the rest. One can just mention this classes within their tag elements inside their HTML codes and can eventually view the changes in the web design. Hence, this allows the designers to re-use the CSS codes that are stored online and hence helps to save up on a lot of web designing time.

Bootstrap Framework and its Benefits

In order to perform the operations of the application, Javascript has been used. It allows the developers to dive deep into its library functions and use all necessary pre-written and compiled snippets of code. Javascript is a programming language or scripting language as many favours to call it. Since, the application here did not require any server end operations, there was not any urgent need to apply the extended JS frameworks like Ajax and so on. However, the javascript libraries will prove to be a great zeal designing and developing such logic based applications. Especially for this application, the Math library class of javaScript can provide most of the necessary methods like the trigonometric methods, the exponential methods and so on. It must also be noted that Bootstrap itself extends many of the native Javascript methods in order to provide the responsive features to the designers (Johansen, Britto and Cusin 2013).

The Calculator app designed here is based on the native HTML5 and CSS3 frameworks with assistance of the Bootstrap V3 for enhanced user interface. Furthermore, the JavaScript library functions help the user to interact with the system, provide the necessary inputs, get them processed and fetch the required outputs. The responsiveness of the web application is the catching point of the whole project (Heitkötter, Hanschke and Majchrzak 2012).

The application, as can be seen in the wireframe diagrams, is supported on all resolution screens. The web application aligns its layout according to the device. In this case, the broad screen Tablet has a different view of the application from that of the smartphone device. Having to implement the design of a mere calculator, the tablet offers the user with additional visual elements to keep them engaged while in the calculator app page. Whereas, in the smartphone, the user will view and access the application as a solo on the small mobile screen. This helps in the easy click-ability of the calculator buttons and fetch quick, hassle free results.

The home page on a broad device will seemingly attract more graphical attention of the user whereas, on the mobile device, it is all about the functionalities of it. The attractive background is presented narrowly on the screen whereas the welcome message and the button is emphasized upon.

The contacts page cunningly uses the grid system of the bootstrap framework to present the three different forms to the users. These forms have a varied layout on different devices. On the tabular or wide screen devices, all the forms are aligned side by side, whereas on switching to a mobile device, the forms get padded one upon the other and the user will have to scroll up and down to access the different forms (van der Merwe, van der Merwe and Visser 2012).

Javascript Framework for Logical Operations

One of the major accessibility features of the application is the navigation bar. This is the general feature that allows the users to navigate within the website to access all the different functionalities and information. To exaggerate the experience, special Bootstrap classes were used to make the navigation system more fluid. This means that the long navigational menu will be seem different on different devices. On a broad device, the user will be able to view the complete navigation menu at once, whereas on a mobile device, to save up the space and adhere to responsive layout concepts, the navigation menu is crippled into one menu under the Navigation Menu icon. The user can access these options after clicking on this icon.

The app development process included several stages. For me, it started with the design stage, graduated through the development phase and finally was completed with the testing phase. I had to first make choices for the designs of the application. This included the page designs on pen and paper. Two different sets of designs were made, one for the mobile device and the other for the broad screen tablets of PC screens. Then, the designs were brought to life digitally using the wireframe diagrams. This helped me to get a clear view of how the application is going to stand out, what are the features that I must put in and their positions, sizes and so on were all decided.

Once the sketch design stage was done with, it was time for the application to be built. It first included the HTML, CSS and Bootstrap designing phase. It took me about 5 days to design and test the complete website layouts and the calculator app using the above said design frameworks. I had to test the design on two different resolution screens, one being a PC monitor and the other an I-Phone. I had made sure to implement all the necessities to uplift the responsive design phenomena. It was one of my prime goals to make the application user friendly by providing a smooth and easy user interface.

Once done with the designing, it was now time to start with the javascript. I had faced a few problems in this phase. The coding part was easily done and compiled, thanks to the library functions that the Javascript framework provides; however, I had troubles linking the .js file to my html. Due to some unknown reasons the errors kept creeping in, therefore I had to decide upon giving up the separate javascript file, and instead write an internal script section within my html page. This had strikingly solved the issue and my app was up and running.

Application Features

However, on doing the testing part, I realized that there was still flaws in my design of the application. The application, though immensely fluid and responsive in nature may seem to be losing out of the screen on certain very small screen devices. This is one of the design bugs, which I must fix in the recent future. Apart from that, one huge weakness of this project is the graphics. The graphics used in the project are too mainstream and hence they need immediate up-gradations. Apart for these, the application works fine, especially the calculations are fast and correct every time. With more time in my pocket, I would like to sit on this for a while, try to add some more features to the application and finalize the build.

References

Bryant, J. and Jones, M., 2012. Responsive web design. In Pro HTML5 Performance (pp. 37-49). Apress, Berkeley, CA.

Cochran, D., 2012. Twitter bootstrap web development how-to. Packt Publishing Ltd.

Fielding, J., 2014. Beginning Responsive Web Design with HTML5 and CSS3. Apress.

Hall, P., 2013. The bootstrap and Edgeworth expansion. Springer Science & Business Media.

Heitkötter, H., Hanschke, S. and Majchrzak, T.A., 2012, April. Evaluating cross-platform development approaches for mobile applications. In International Conference on Web Information Systems and Technologies (pp. 120-138). Springer, Berlin, Heidelberg.

Johansen, R.D., Britto, T.C.P. and Cusin, C.A., 2013, May. CSS browser selector plus: a JavaScript library to support cross-browser responsive design. In Proceedings of the 22nd International Conference on World Wide Web (pp. 27-30). ACM.

Mammen, E., 2012. When does bootstrap work?: asymptotic results and simulations (Vol. 77). Springer Science & Business Media.

Nebeling, M. and Norrie, M.C., 2013, July. Responsive design and development: methods, technologies and current issues. In International Conference on Web Engineering (pp. 510-513). Springer, Berlin, Heidelberg.

Nene, A.R., 2015. Responsive Web Design. International Journal Of Engineering And Computer Science, 4(03).

Nixon, R., 2012. Learning PHP, MySQL, JavaScript, and CSS: A step-by-step guide to creating dynamic websites. " O'Reilly Media, Inc.".

Robbins, J.N., 2012. Learning web design: A beginner's guide to HTML, CSS, JavaScript, and web graphics. " O'Reilly Media, Inc.".

Shao, J. and Tu, D., 2012. The jackknife and bootstrap. Springer Science & Business Media.

Sharkie, C. and Fisher, A., 2013. Jump start responsive web design. SitePoint.

Shenoy, A. and Sossou, U., 2014. Learning Bootstrap. Packt Publishing Ltd.

Spurlock, J., 2013. Bootstrap: Responsive Web Development. " O'Reilly Media, Inc.".

van der Merwe, H., van der Merwe, B. and Visser, W., 2012. Verifying android applications using Java PathFinder. ACM SIGSOFT Software Engineering Notes, 37(6), pp.1-5.