I'm In Control

Just like last week, we took another half-step back in the redesign of the Kukui Cup page. This, time we worked primarily on redesigning the back-end framework by ideally making it easier to make changes to all the pages at once by setting up "global" CSS files that would affect the all the pages when changed. At the same time, the plan was to also separate the "local" CSS files. This was a lot easier said, than done.

At the start of the week, I was able to more or less separate the "about" page's CSS file and originally thought that was a great idea. However, after continuing working on the others, I just confused my self and ended up starting over (which lead to much more headaches). In the end, it kind of worked out, but I feel like the theme files (which are still currently still the screen CSS file), could be broken down farther into smaller, more manageable files that would eventually lead to a smaller margin of error when making changes to the page. More could have been done, but it is midterm time and lots of stuff are going on at the same time. However, I've committed an equal amount of time to working on making sure this file structure will be as efficient as possible to prevent (or limit) bumps in the road later because of a bad file structure. I also did not have time to start looking into more color palettes (outside of the one used in the mockup from last week), but I do have some ideas in mind that I'm hoping to mess around with within the next couple of days.

Kukui Cup Redsign Challenges

So we've hit a bump on the road to redesigning the Kukui Cup Page. Its basically a "one step forward, two steps back" kind of deal. Last week, we had a crash course in responsive web design and more or less got a working page that nicely responds to the browser size, however the aesthetics of the page were horrendous. The white background and the neutral colored widget boxes made the site look bland and overall, boring. Because of this, production of the actual responsiveness to the page has come to a stop, and an overall redesign of the page aesthetics has begun.

Each of us were responsible to submit our own mockups as to what we felt the Kukui Cup page should look like. For my design, picking out a new color palette was the hardest part. The process of finding contrary colors that had a "natural, earthy" feel to it was quite difficult without running into a puke colored green or a poop colored brown. I personally have only dabbed into webdesign and graphic arts, and along with working with a graphic arts major a few years back, I learned quite a bit about Adobe Photoshop and was able to use that to create my mockup. My inspiration for my design was to keep it organized, making especially the navigation bar seem like it was one in the same with the page, by having it be part of the overall layout and not have it in it's own box floating around in space somewhere. However, with my new concept, comes new challenges. A lot of images are involved including the "tabbed" navigation bar. Making all of those responsive may be a bit of a challenge since we haven't got a working fluid image yet, but it is definitely doable.

Overall, the page came out to nearly what I wanted it, and modifications can always be made. If I can somehow get a hold of my old coworker and talk to him about color schemes that would help a lot since not many (if any) of us know anything about graphic design. If not, research about contrary colors would have to be done and I'm not sure how successful that would be. Here is what the page looked like after the first redesign.

However, after meeting with the group, and learning new constraint, especially how the "Quest" bar worked, changes to the left side bar had to be changed because a lot of text would be displayed when the "Quest" bar is used. After some redesign the page looks like this.

Kukui Cup Responsive UI Week 2

We are currently into the second week of working on the project for the Kukui Cup and a lot of things have happened. Let's see, where to start off. Well, first of all, I switched groups. I am now part of the Makahiki-rui group that consists of three members plus myself. The group seems to have a much better communication and everyone is giving their best to contribute. Because of the change, it took me some time to figure out the group's code structure. After reading through code, it was actually quite simple, however I wasn't really sold on the use of a fluid grid.

Secondly, after having our previous site reviewed, the responsiveness worked, however, the page was aesthetically unappealing. Because of this, lately, we have been talking about possible designs for the page as well as possible color schemes to implement. At the same time, we have also looked into possible frameworks. We chose to try the skeleton framework as it was the easiest to read. However, actually implementing it into the current site was difficult. In the end, adding ID properties to already existing css files proved to be the most efficient for now.

As of now, we are considering using a color scheme similar to that of the movie and game, Tron. A dark background with an electric color scheme. The desktop layout will be similar to the currently existing one, the tablet layout will be similar to a video game where buttons will be at the bottom and a built in "screen" will be fixed in the center of the page and will show information. The mobile aspect will be similar to the current facebook mobile application. A simple large print interface with a menu tab that pops out offering the user options to go to other pages. It is still a working progress and learning how to do some of these things will be another future challenge for the group.

Because we are in the process of figuring out a layout, the responsiveness of the page is limited to just familiarizing ourselves and getting comfortable with CSS3 and HTML5. Once we have an agreement on a new site layout and have a working nonresponsive site up and running, making the page responsive should be easy. In theory anyway.

Attempt at Responsive Web Design

This week, our group made an attempt at redesigning an already existing webpage into a responsive one. For this experience, we chose to redesign the "news" section of the site as it was already shown to be in two columns. Our goal was to simply make the second column move under the first column once the page was resized. Then after tons of research, we decided to use the Skeleton framework as the source was the most organized and was easy for us to read.

Once we understood the examples provided, we began experimenting. Miraculously, after inserting a new <div> tag around the "2nd column", and calling the appropriate class from the skeleton.css file, it magically appropriately moved under the "1st column" after the screen was minimized. This is because the css files recognizes the screen size and allows the change to happen. This got us thinking about how to start making the other items on the page responsive, but since a lot of it are jqueries, it is quite difficult and requires slightly more research.

The Future of Website Design

Smartphones and tablet PCs are exponentially growing in numbers in the computing market. These days, people can literally carry a computer in their pocket or in their bag. However, to compensate for convenience, the size of the screens being used must be sacrificed to often times just slightly larger than a credit card. So how do we adjust for this? Mutlitouch compatibility introduced pinch to zoom and that made it slightly easier. It allowed users to zoom in to what would be tiny text then scroll around the page to read the material. This worked for a while (and is still in use in a lot of website) but can be frustrating to those who use smartphones and/or tablets to read regularly. So this is where HTML5, CSS3, and responsive web design come into play.

HTML5 is the next generation of HTML (Hypertext Markup Language) that allows developers to incorporate media objects such as video and sound without the use of a flash player. CSS3 is the next generation of CSS (Cascading Style Sheet) that allows the customization of objects through CSS, something that was also done through the use flash at most times. So basically these two things are replacing flash. And why replace flash? From what I understand, because flash is technically a third party application, it continues draining battery on the mobile device much faster than if the page were to simply render the HTML and CSS codes and nobody likes carrying around a dead mobile device. The combination of HTML5 and CSS3 allow web developers to create responsive websites that are easily read on any device rather it be on a 24" desktop monitor or a 4" smartphone screen. Below are some links to the various topics mentioned. Some give very distinct examples, some offer API information, and others are simply a more detailed explanation of the topic.


Links to helpful HTML5 pages
http://www.w3schools.com/html5/default.asp
http://www.switched.com/2010/05/11/what-is-html5-and-why-should-you-care/
http://msdn.microsoft.com/en-us/ie/aa740476
http://www.inmotionhosting.com/infographics/html5-cheat-sheet/
http://www.apple.com/html5/

Links to helpful CSS3 pages
http://www.w3schools.com/css3/default.asp
http://webdesign.about.com/od/css3/a/differences-css2-css3.htm
http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
http://css3generator.com/

Links to helpful responsive web design pages
http://ux.fusionapps.com/2011/12/23/what-is-responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

Modification of Hale-Aloha-CLI-TNT

Remember the Hale-Aloha-cli project from a few weeks ago? (if not, you can read about it in the earlier blogs). Well, for this part of the project our group (hale-aloha-cli-tiger) swapped codes with the hale-aloha-cli-tnt group in an attempt to modify and enhance each other's projects.

From the start, it took our group some time to even get started. The other group's code used reflection to link their command modules to the command processor while ours was simply hard coded. Because of this it took us a little while to figure out how reflection worked and how it processed the classes. Once we got and idea of how reflection worked, it was time to get started. 

Because of reflection, not changes had to be made to the group's command processor. The only thing we had to follow was their defined interface and how the processor processed the commands and their arguments. There were three commands we had to add to the existing code and because there was three people in our group, each of us were responsible for working on a single command each. The three additional commands were:

• set-baseline [tower | lounge] [date]
• This command defines [date] as a baseline for [tower | loung] and gets the power value for each of the 24 hours for [date]. Additionally [date] is an optional parameter and defaults to yesterday if not given.
• monitor-power [tower | lounge] [goal] [interval]
• This command prints out a timestamp and the current power for [tower | lounge] every [interval] seconds. Additionally [interval] is an optional parameter and defaults to 10 seconds if not given. The command is terminated by pressing any key on the keyboard.
• monitor-goal [tower | lounge] [goal] [interval]
• This command prints a timestamp and current power being consumed by [tower | lounge], and whether it is meeting its power conservation goal. [goal] is an integer between 1 and 99 and defines the percentage reduction from the baseline for this [tower | lounge]. This command also will not work unless the set-baseline command was previously called.

For this modification, I was responsible for the set-baseline [tower | lounge] [date] command. This command was very similar to some of the commands from the first part of this project and a lot of lines of code were reused. I had difficulty with the timestamps at first and the code kept returning 0.0 kWh. After a few hours of debugging and asking group members for help, I was able to get the command working fairly quickly and have be accessible to the monitor-goal command. Overall, the quality of my personal additional command is okay compared to the other commands implemented. I was overall more impressed by the reflection used in the command processor.

As a group we were able to complete all the additional tasks. The only problem we ran into was stopping the monitor-power command using any key. We were able to get it to stop while using the return/enter key, but not when any other key is pressed. The command, however, still prints out the required information. As for the other two additional commands, we were able to get them fully functional based on our understanding of the requirements.

In terms of the Three Prime Directives of Software Engineering: 

• Does the system accomplish a task?
• Can an external user successfully install and use the system?
• Can an external developer successfully understand and enhance the system?

The hale-aloha-cli-tnt application fulfills them all excellently. The system does indeed accomplish the task of querying the WattDepot server and returning various forms of data. An external user (in this case our group) was easily able to install and get the project working on our local systems. External developers (our group) was able to successfully understand and enhance the system. Even though we were not able to meet all of the requirements for the additional commands, we were able to add a semi-working command to the application.

Taking over a preexisting code is a pretty rough task. If the original code is unstructured, contains few comments, and/or is hard to read, modifying it becomes very difficult as a lot of time is spent trying to figure out how the code works. Our group was lucky enough to enhance code that was structured extremely well and provided a very strong base for additional modifications. I learned a lot from taking over this project and will use this experience in the future to make sure that any code I work out either alone or in a group is made as simple as possible so that an external developer can simply make modifications.

Review of hale-aloha-cli-tnt

The three prime directives should be looked at whenever you try to review a code. The three prime directives are:

• Does the system accomplish a task?
• Can an external user successfully install and use the system?
• Can an external developer successfully understand and enhance the system?

We can use these directives to review how user friendly the code is to both the end user as well as an external developer.

For this project assignment we were to, as a group, create a system that accesses data from the WattDepot server for the Hale Aloha dormitories at the University of Hawaii at Manoa. The system would be a command line interface system that does the following:

• Gets the current power for a tower or a lounge
• Gets the daily energy for a tower or a lounge for a given date
• Gets the total energy for a tower or a lounge from a given date until now
• Ranks the Towers by energy consumption between two given dates

In addition to these commands, we were to design the system in a way where additional commands may be added later.

            For this review, I took a look at the hale-aloha-cli-tnt system. It is a command line interface based system that makes use of the WattDepot server to gather information.

So what is WattDepot? If you haven’t read my earlier blogs, then here is a brief summary of WattDepot is. WattDepot is an open source, RESTful web service that collects electricity data (such as power and energy). For more information, check out this link.

Let’s review the system using the Three Prime Directives.

Does the system accomplish a useful task?

            The overall functionality of this application meets all the basic things that were required. The project is able to successfully retrieve the current power of a tower/lounge, get the energy for a tower/lounge from a specific date after 22 November to the current date, get the energy usage for a tower between two given dates as long as the were after 22 November, and finally give a sorted order from least to most between two dates as long as the dates were after 22 November. The reason the dates had to be after 22 November is because the server failed around that time and the only accessible data is from after 22 November.

Can an external user successfully install and use the system?

            The homepage contains very precise information about what the system does, however the sample input and output is located in a User Guide wiki page. Like mentioned earlier, the User Guide wiki page contains a sample input and output for the system along with simple instructions on running the system. In the download page, the group offers the option to download an executable jar file for those simply wishing to run the application. In addition to this, they also offer an executable jar file along with their source files so that the external users do not need to compile the system first before executing it. The distribution file contains a version number along with a timestamp for external users to monitor any changes and how long ago the changes took place.

            In terms of testing, both valid and invalid commands were used. The following are the commands and the type of output it gave:  “help”

·      “help”

o  Gives the proper output.

·      “current-power Lehua”

o   Gives the proper output of Lehua’s power.

·      “current-power lehua”

o   Gives a bad syntax error showing that it is case sensitive

·      “Current-power Lehua”

o   Gives a bad command error showing that the command checker is also case sensitive

·      “daily-energy Lehua 2011-11-23”

o   Gave the proper output of Lehua’s daily energy

·      “daily-energy Lehua 2012-11-23”

o   Gives a bad date error.

·      “daily-energy Lehua 11-23-11”

o   Gives a bad syntax error showing that the date must be properly formatted

·      “daily-energy Lehua 11-23-2011”

o   Gives a bad syntax error that there is only one way to write the date.

·      “daily-energy Lehua 2011-10-21”

o   Gives a date error showing that the date should be after 22 November.

·      “energy-since Lehua 2011-11-23”

o   Gives the proper output of the amount of energy used in Lehua since 23 November

·      “energy-since Lehua 2011-12-25”

o   Gives a date error

·      “rank-towers 2011-11-23 2011-11-25”

o   Gives the proper output rating the towers from least to most.

·      “rank-towers 2011-11-25 2011-11-23”

o   Gives both a date error and a bad syntax error showing that it recognizes that the start date is after the end date.

·      “quit”

o   quietly closed the application

Overall, the system does very well and is very useful. The system did not crash when providing bad inputs and it provided correct and useful outputs when providing valid commands.

Can an external developer successfully understand and enhance the system.

            The Developer’s Guide wiki page provides clear instructions on how to build the system once the sources are downloaded. Quality assurance is done automatically by running ant –f verify.build.xml that runs checkstyle, PMD, and findBugs. The wiki instructs the user to run this command first before any sort of additional modifications to the code to ensure the original code didn’t have any errors. In terms of coding standards, the wiki page mentions the eclipse format and provides a link to the xml document for users to use. The application wiki mentions that it follows issue driven project management and continuous integration. Continuous integration is a practice in where smaller pieces of code are verified for validation at smaller increments instead of at the end of construction. Often times, each integration is automatically verified (in our case using the “ant” tool) and assists the group find out who, when, and what broke the code if there is a build failure. Issue driven project management is a practice in which the over build is broken down into smaller issues, usually about two days worth of work. For this project, we submitted issues in Google Code and used that service to also monitor and add our issues. A link is provided to the continuous integration server to that is associated with the application. The only thing the Developer’s Guide is missing is how to construct the JavaDoc documentation. The information contained in the Developer’s Guide is very concise and doesn’t contain any useless information.

JavaDoc Review

            I was successfully able to create a JavaDoc documentation successfully. After reading through the various class documentations, the documentation shows that the entire application is linked together by the Processor class. The package names are named appropriately where the Main class is contained in a higher-level directory, the command processor is in a subdirectory of the main directory, and the various commands are also in a subdirectory of the main directory.

Build System Review

            Using the ant command “build.xml”, I was successfully able to build the system without any errors. The author(s) of each piece of the code are listed in the source code to allow external users to know who wrote each piece of code. In terms of coverage, after running JaCoCo, the project doesn’t have 100% coverage.  In some cases such as the Main, Processor, and InvalidArgumentException classes, the coverage is 0% mainly because test cases were not made for those classes. However, the sub-100% coverage is due to the fact that none of the test cases contain a case where the author asserts an invalid statement. The current set of test cases successfully tests the application pretty well for the valid inputs. However, because of the lack of test cases for invalid inputs, there is a slight chance that an external user may create an enhancement that calls throws some random exception and the external developer may have no idea why it is being called.

Coding Standards Review

            What I found to be really nice is that each of the command classes were formatted in the same way (because of the interface class). What I found to be very surprising at the same time was hardly any private methods were used. But this is okay since WattDepot provides a lot of the methods already. The only files I had small problems reading was the Main class and the CommandManager class. In the main class the only thing I had issues with was figuring out when the IOException would be thrown. Documentation on what would have thrown it would have been nice. The CommandManager class was beautifully written using some advanced Java techniques that I have not come across before and because of this I had some problems reading and had to take some time to do a bit of research on some of the things. This is was not a problem caused by the author.

Issues Page Review

            The issues page associated with this project makes it very clear on who worked on which part of the system. It seems that a different person worked on different classes in the system and because of this, if an external developer had any questions about the system, it would be very easy for them to contact the author(s) that worked on that piece of the system. In the group of three, it seems that two of the developers did more of the work. The other group member worked on a single command class, its test case, the Main class, and the Help class. Most of these classes were fairly short and it is clearly shown in the amount of issues posted by that author. However, I would give him a slight break, as he is an undergraduate student working with a two graduate students.

Continuous Integration Server Review

            The Jenkins continuous integration server shows the progress of failed and good builds. Other than at the very beginning of the project between build three and four where the time it took to fix the project was about a day and a half, all failed builds were fixed within an hour. Most were even fixed in as little as 10-15 minutes. As for commits that were associated with issues, less than nine out of ten of them were related to an existing issue.  However, the group was pretty close to having nine out of ten commits be associated with issues; approximately eight out of ten.

Conclusion

            Based on my review of the hale-aloha-cli-tnt system, I have come to the conclusion that an external developer could successfully understand and possibly enhance its features. Although some of things are slightly advanced for where we are, the enhancements would be relatively simple because the sources are very uniformly organized. The overall system works very well and I was not able to make it crash. The source codes are documented so that most users would be able to understand it, however I would like to have seen comments around some of the exceptions and the things they caught. The group did a very good job implementing it, as well as a very good job working as a group.