Web Applications

What is a Web App, Anyway?

So you're probably asking yourself "What is a web app, anyway?". A web app, or web application, is simply an active web page, usually that performs calculations, or displays information specific to a request. This differs from a normal web page, because a normal, or static, page has set content, such as text and images, that does not change.

Web applications can come in all shapes and sizes. A simple web app that runs within the browser might be a page that calculates your BMI given your weight, height and age, or maybe converts pounds into kilograms. These types of apps can be useful for many basic operations and are generally used to add value to your website when basic calculations are needed or simple choices can be made by the user to show specific information (such as having a drop-down box with 4 colors, and when the user picks blue, it shows a picture of your product in blue).

Mid-level web apps generally work between the browser and the web server to show specific data, or perform more complex calculations/operations based on user input. These types of apps are generally backed with a database that contain the information to display, or the information to use the calculations. An example of this type of app can be shown in an inventory system CodePro Software made for Townsley Electrical Contractors. This app stores all of the supplies and tools used by the company in a database housed on the web server, then when a tool or supply is taken out of inventory, it is marked as being at a particular job. Now, the location of every tool and supply can be tracked, and when the tool is returned, it is checked back into inventory. Also, if the job is completed, and everything is brought back to the inventory room, the job can be marked as complete, and everything is automatically checked back in.

Complex web apps are applications that run within a browser, but work very similar to programs that run natively on your computer. A good example of this type of application is the Google Calendar. One of the most sophisticated online calendars, this web-based app allows for complex operations such as showing dialog boxes for user input, including custom content, such as showing calendars for picking dates, etc. It includes drag and drop operations to move appointments around or change their duration. These types of applications are extremely complex, but give users the ability to perform high-level tasks, and allow for versatile functionality all within a web-based environment, which means no additional software to install, updates happen automatically because the browser always gets the latest version from the web server, and best of all, these applications work across different operating systems, so a user on a Mac and a user on a Windows PC can use the exact same application.

Why Web Apps?

Web apps are increasing in popularity for several reasons, here's a few of the major ones:

1. Now that mobile devices are in the mix, the number of different platforms that support web browsing is staggering. There's also a multitude of different mobile device platforms, like Blackberry, iPhone (iOS), Android, Palm OS, etc. All of these platforms have their own app store, which means if you want an application for your product or business, like a catalog for example, for each of those devices, you can either create an app for each platform, or you can create a web app that is designed for mobile devices, and reach all of those audiences.
2. The days of static web pages are quickly going obsolete for sites that have a large bank of content, such as products to sell, or a multitude of services that are provided. In years past, the only way to show these things was to have a huge page that listed everything, which was usually difficult to navigate through and impossible to organize, or to give the user a series of drop-down boxes that they had to choose a major category, click "Go", then present them with the next sub-category drop-down box, click "Go", and so on, until you could give them what they needed. This option is very time-consuming, and most users would not bother. With a web app, all of this can be done much more quickly and efficiently without having to reload the whole page every time. In fact, as soon as the user makes a selection from a drop down, or types a search term, the page can start showing results right away!
3. These days, with the abundance technology, many users simply enjoy a good widget, something to keep them involved in the site they are viewing and interacting with it, versus it just spitting content at them. Whether that widget is a simple BMI calculator when they are reading an article about weight loss, or a side bar with a poll in it that allows them to vote on how they feel about a product or article they are reviewing.
4. Web apps, for the most part, are accessible from any platform that has a browser, and in many cases can be tailored to work with browsers of all capabilities, ranging from the cheapest phone your carrier provides, to the most expensive smart phone, to a desktop PC or tablet. Simply put, for many projects, they are the most cost effective way to build and application that can reach the most users.
5. Finally, web apps are easy for users. The user doesn't need to install anything. The browser handles all of the security, so there's no fear of having your antivirus software get in the way, or wonder if you're downloading something that contains a virus. All the user has to do is go to a web page and start using the application.

Web Apps to Fit (Almost) Any Need

Cloud-based computing is all the rage these days. That's because it is the easiest for the user, and generally, it allows the user to "store all their content in the cloud and access it from anywhere". I'm sure you've heard those pitches before. And, it's actually true. If I run an application that keeps track of my inventory, and it's stored on my computer, I can only get to it from my computer. But if I have a web app that performs the same function, with the proper access, I can reach that inventory list from anywhere.

And all of this mention of web apps and widgets might get you thinking that they always have to be free, but that's not the case either. Sure a web app that helps a customer find the right product based on a series of questions or a search box is helpful, and would be a free service, but a there are many web apps that are built into pay-for-service type sites. A good example of this might be a website associated with your gym, that with your membership (or even better, with a premium membership), you can track all of your stats online. This type of web app may include showing your weigh-in history, measurements, personal trainer recommendations, etc. All of which you can access once you have your login information, which comes with the premium membership.

At this stage, web apps can be built to perform almost all of the functions that a PC or Mac-based application can do, we call them platform-specific applications, but not all. Most of the limitations revolve around limitations in the capabilities of HTML and Javascript functionality. The nice thing about that, is that because of the rise in web-based applications, those standards are ever-evolving to catch up to the capabilities of platform-specific applications. The other limitations are generally due to security vulnerabilities, such as direct access to your computer/devices hard drive, etc. Those limitations are generally good ones, which keep your computer safe, and web developers honest.

Sample Web Apps

By their nature, most of the web apps that CodePro Software has created, are not accessible to the public, since they contain private information for the person or company they were developed for. Nonetheless, the following are some examples of web apps created by CodePro Software, along with descriptions, and pertinent links.

Personal Apps

Given my profession, I can't help but create little apps for all kinds of things to help with personal needs and things around the house. Below are a few items that I created for my personal use that are small web-based applications that help save time and/or allow my family to collaborate on projects.

• Online Rolodex - This is a basic contacts database. It includes space for multiple phone numbers (of different types -- work, mobile, home), email accounts, IM screen names, addresses, etc. It also has options for birthdays, company, job title, and contact category (editable). It has many features, including the ability to search for a contact, display a list of all contacts for one or more categories so a list can be printed and used as an easy paper reference and all the contact information that can are links, such as email addresses are links to pop-up your mail client with that email address, and addresses open a new window with a google map of that address. The best part about the app is that I created it a long time ago before cloud-based contact lists, like contacts in gmail, etc. existed. So, it is still my central contact list, and I have created functionality to export and import contacts from all the other applications that I have used over the years, including Palm Pilot, Microsoft Outlook, and Gmail contacts. I have also created handy options to display a birthday list that cana be ordered by name, or by the nearest birthday date
• Checklists - When it comes to productivity, you can't beat a good checklist. As a parent, I've also determined that checklists are good, since at this stage, it's hard to remember everything I need to and make sure I can keep an eye out for the kiddo. So, I have a todo app that I use on my phone for normal things, and items that I need to get done, but what I found I needed were things that I needed to keep track of repeatedly, primarily the contents of our son's diaper bag. For an organized guy like me, it was always frustrating to be out to eat, at a park, or at the zoo, and be missing something important for our son, like not having enough diapers, missing his favorite toy, or missing the all important wet wipes. So, I created a little app that I could include all the things that we needed in the diaper bag, and before leaving the house, I check the list. If there's something I needed, it was easy to see, and toss it in. If we were out and were running low on the diapers or wet wipes, I would just uncheck it from the list, so that the next time we headed out of the house, I saw we were missing that, and toss some more in. The list would order by the unchecked items first, so it was easy to see what was missing. This worked out so well that I expanded the app to include multiple checklists, and there are ones that we use for family vacations to make sure we don't forget the phone chargers or the extra batteries for the camera. At this point, I have 7 different lists, which include the ones mentioned plus things like the spring cleaning checklist, camping trip checklist, among others.
• Fuel Log - In life, there are many necessary evils, and dealing with rising gas prices is certainly one of them. About 7 years ago I created a web app that would track my fuel usage, and be able to output stats and graphs for pertinent information, such as miles per gallon, price, number of days between fill-ups, etc. The app is handy to use from my smart phone, and allows me to track my spending on gas, and see how well my car is doing on gas mileage. It also comes in handy at tax time to be able to estimate how many miles I've driven over the year for mileage exemption purposes.

Tool Inventory App

CodePro Software developed a web-based tool inventory database for Townsley Electrical Contractors. The system contains every tool owned by the company, the quantity of that type of tool owned, the condition of the tool, and the location of each of them. There is also a miscellaneous field for notes, etc. The system is designed so that the master list can be sorted by the tool, location or condition to easily find a tool, or see what tools are at what location. When changing the location of a tool, the system uses a suggestion box, so that as you type the location, any matching locations will show up. If you type a location that does not yet exist, the system will automatically add it. When you remove the last tool form a location, and the location is no longer needed, the location will be automatically deleted (for instance, when a particular job is completed). When a tool is removed from a location, the quantity that was at that location is automatically added back to the "Shop" location, which is the company's office.

The system was designed to perform two primary functions. The first was to make the inventory process easier, and eliminate human error as much as possible, such as math errors that result in the quantity of a tool exceeding more than actually exists, or being less than actually exists. The second goal was to make the process as easy as possible to keep the inventory up-to-date. Previously, when a tool was moved, the foreman on the job would have to call the office and a spreadsheet would be updated to change the information. If a tool came back to the shop, the spreadsheet would get updated the next time an inventory was done, which included printing out the spreadsheet, going to the tool room, making notes on the pager, then coming back to the computer and updating the spreadsheet. Now, the process can be done by the foreman, with their own login to track changes, and when a tool is moved, they can update the inventory from their phone. When the weekly inventory of the shop is done, the app is used on a smart phone and checked/updated right in the tool room without the extra back-and-forth

The other key to this system is that there is a specific interface for mobile devices, that hides less important columns to make sure that the important information is fully visible and accessible from a touchscreen interface. There is also an option to view the "full site", if needed.

NCAA Bracket System

CodePro Software developed another web-based tool for Townsley Electrical Contractors to handle their annual NCAA Championship Bracket. Townsley Electrical Contractors has hosted an NCAA pool since 1992, and the pool coordinator had always kept track of the points for each player in the pool by hand, and updated the points weekly. The online system not only allows this to be done automatically for all the players when the results bracket is updated, but also allows the participants in the pool to see their current standing and how they match up to other players in the pool. Every year I have added new features to the system to keep it interesting for all the players, including showing a favorites bracket that shows a bracket comprised of the top picks for each game across all of the players brackets, a "What If?" feature that lets a participant fill out the remaining games of the results bracket to see what the final scores would be if the winners they chose for each remaining game actually happened, and a "Compare" feature that lets a user compare 2 or more players' brackets to see the differences.

To my knowledge there is not another online bracket system out there that has quite the fun features that the TEC bracket system has, and those added features keep participants coming back each year to play in the TEC pool, even though most of the participants have access to other pools sponsored by their companies or other friends.

As an added bonus, the site has a specific interface designed for mobile devices of differing capabilities to allow for all the participants to check their points standing from anywhere. The system detects if the device is very limited, like an old cell phone that doesn't event support HTML tables, and provides basic data like the results of the last games played in the current round and the top point standings of the players. It detects if the device is a smart phone, and will display the most pertinent data, just in a layout that is better suited for a smaller resolution display, and will even change the layout of the bracket when displayed so that it can be viewed easily on the smaller resolution display.

Online Calendar System

By far, though, the most complex web application that CodePro Software has created is for the National SAM Innovation Project. The TimeTrack™ Web Application grew out of a stand alone PC version CodePro Software created for them back in 2007.

The SAM Innovation Project is an initiative to get school principals focused more on instructional tasks, versus managerial tasks. The idea is that by add a SAM (School Administration Manager) to the faculty of a school to take care of the majority of the managerial work, such as dealing with building maintenance, student discipline, office work, etc., the principal is able to focus on instructional leadership, such as working with teachers on lesson plans, observing classrooms and working with students.

With that goal in mind, there has to be a way to quantify the results of the process and setting goals. The TimeTrack™ idea started as a complex spreadsheet, then moved to a PC-based application, then ultimately moved to it's current incarnation of a web application. The application is essentially a calendar system, that allows the principal/SAM to enter in events for what the principal does each day, such as classroom walkthroughs, meetings with teachers or parents, etc. and allows them to specify what type of activity it is -- Instructional, Management, Personal. With all of the principal's time accounted for, the system can then show over all how time is spent, compare the instructional percentages to goals set for each month, and provide a clear picture of the progress a school is making in the program. This output includes many graphing options, tabular output, and a few dashboards to show the top information useful to the users. The calendar itself is highly functional and supports complex operations such as showing dialog boxes for event input and updates, drag-and-drop operations to move events, or change their durations. It provides multiple views, including day, work week, week and month. There is a side bar that provides a smaller calendar to easily navigate to a specific day, and in that side bar are links to the most useful summary pages, like the dashboards. Also, all calendar updates happen asynchronously, without the page fully refreshing, to make the user experience as seamless and friendly as possible.

Also because Apple™ products are often very integrated with the public school system, we have design specific interfaces for the system when viewed on an iPhone, and a separate specific interface when viewed on an iPad. These interfaces optimize the user experience specifically for the user of those devices