Wednesday, May 5, 2010

Refactoring: less is best

Every programmer has probably done code refactoring at least once in their lifetime. It's not something that they enjoy doing but it must be done in order to keep the program up-to-date or with new features being added. The best way to reduce the amount of refactoring is to write clean code. Doing it right the first time reduce the amount of work you will have to do in the future. It might take longer the first time to write clean code compare to sloppy code, but the extra time spent doing it will save countless hours of refactoring in the future.

As a student programmer, we tend to write quick sloppy codes that satisfy the requirements of the program. That's because we tend to have the mentality of writing the code once, get a passing grade, and we'll never have to look at it again. This practice is "okay" in an academic sense, but its a failure as a programmer in the real world. Codes produce in the real world are constantly being reviewed, reused, and refactored by yourself and others. So save yourself time, stress, and humiliation by doing it right the first time around.

If your a java programmer, I recommend getting or reading "The Elements of Java Styles". Its a great book that gives pointers on writing clean Java codes. I'm sure that there are similar books for other programming languages that you could read to improve on writing cleaner codes.

Friday, April 30, 2010

More than one way to skin a cat or webpage

If you haven't heard of the saying "More than one way to skin a cat", it pretty much means that there are more than one way to do something, or that there are several possible ways of achieving something. This saying cannot be more true in terms of web designs. Web designing methods are constantly changing as new languages and technologies come out. The once popular table layouts are quickly being replaced by the use of CSS.

Even within CSS, there are multiple ways of creating the same layout and style. This is mainly due to new implementations within the language. Majority of current CSS layout on the web are column-like created by using the "float" property in CSS2. With the development of CSS3, it introduces a new box model called "flexible box model". This new box model is optimized for fluid design. The children within the box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children allowing for easy expansion.

The latest "skin"(theme) I made for my current CSS project is a UNLV (University of Las Vegas) theme. The layout that I followed was the one on their main page: www.unlv.edu. For this theme, instead of using the usual float property to create the layout, I used the flexible box model from CSS3. Because CSS3 is still in the development phase, this feature is still experimental and requires browser specific tags. Even with these tags, its still sometimes glitchy and requires you to refresh your browser a few times until you see the changes. And this feature is not supported at all with Internet Explorer, so if I can't get it to work atleast 100% on the other main browsers (Firefox, Safari, Chrome), I will probably change the layout back to using the stable float property.

Below is a screenshot of my UNLV theme for the Dorm Energy Competition.


If you want to find out more about the flexible box mode, check out these sites:
  • future of CSS: the flexible box model

  • flexible box model specifications on w3.org
  • Wednesday, April 21, 2010

    CSS+List=Easy Navigation

    Have you ever gone to a website to find a specific information that you know is on that site, but was unsuccessful or took a very long time to find it due to poor site navigation? It's quite the shame when a website has a lot of useful information on it but has poor usability due to its navigation. Have designers forgotten that a successful website requires a good navigation menu?

    Navigation menus are not that hard to make as one may think. One good and easy approach that I've found is to use a list. Yes, all you need to use is a plain old unordered list and a bit of CSS to make a simple yet effective navigation menu. You can even make advance menus such as multi-layer and drop-down menus using nested lists.

    Using the simple HTML unordered list below:
    <ul> 
    <li><a href="#">Home</a></li>
    <li><a href="#">Resources</a>
    <ul>
    <li><a href="#">Dorm Energy</a></li>
    <li><a href="#">Energy Hub</a></li>
    <li><a href="#">Have Fun</a></li>
    </ul>
    </li>
    <li><a href="#">Energy Data</a>
    <ul>
    <li><a href="#">Real-Time</a></li>
    <li><a href="#">Hour</a></li>
    <li><a href="#">Day</a></li>
    <li><a href="#">Week</a></li>
    <li><a href="#">Month</a></li>
    </ul>
    </li>
    <li><a href="#">Billboard</a></li>
    <li><a href="#">About</a></li>
    </ul>


    you can create a horizontal or vertical navigation menu with some simple tweaks on the CSS scripts. This is called the "Suckerfish Drop-downs".





    Rather than me explaining how this works, you can check out the original post on creating a Suckerfish Dropdowns. This post takes you step-by-step explaining what each step does. Any beginners can easily follow these steps to create their very own navigation menu.

    So there you have it folks. There is absolutely no excuse for having poor navigation on any website.

    Wednesday, April 14, 2010

    CSS: Reaching a milestone of web design

    For the last month, I've been working on a CSS project to create different themes for the Dorm Energy Competition webpage. CSS was fairly new to me and as I began to learn more about the language, I realize that this simple language is packed with powerful styling capabilities. As a person who learns best from hands-on experience, I jumped right into it to create my first theme, the "Dark" theme. I tried to apply what I've learned from the tutorials to create a theme that pleasing and reflects my creativity. Below is the outcome of my first attempt.


    I was quite please with it until after I reviewed the design of a similar website for Saunders Hall Energy Competition. After seeing some of the design pitfalls on that website, I realized that my theme also contains similar pitfalls. I have always been a person that focus on function over form, but have I lost myself in this overwhelming power called CSS?

    Luckily it was just a momentary lapse of judgement, so I quickly fixed the over sized menu images and background image to give more screen real estate for the content. Here final result of the dark theme. (There was an empty space so my creative side told me to add the door background image for more effect.)


    Feeling that the Dark theme is presentable as is, I wanted to move on to my next theme. I decided to do a "Windmill" theme similar to the one for our T-shirt/button design, but for this design I wanted to incorporate a minimalist design. Something that looks clean and simple yet follows the theme. Here is the result of the Windmill design:


    I am quite please with this theme and thought it looked a lot better than the Dark theme. It is clean and simple and everything played well together for the theme. I got pretty lucky finding images on the web to fit into the theme with very little editing of it. All editing was done using Paintbrush, a Mac version of MS Paint.

    I realized that image editing plays a major role in CSS designs. In order to use CSS to its fullest, you will need to have right images or image editing skills to create such images. Many images on the web have copyright watermarks on them, making them unusable. Half of the time I spent was looking for and editing images.

    For now I feel like I have reached a milestone as a web designer, graduating from a complete newbie to maybe an amateur/average designer. Thank you for following me on this first half of my journey and look forward to the second half.

    Wednesday, April 7, 2010

    Background: Personalization and more...

    Like most people, we like to personalize our own belongings to make it feel like "us". Something that will make it unique and distinguish it from the rest. What is the first thing you do to personalize your computer? Well, the first thing that most people and I tend to do is change the default wallpaper or background to personal picture or a picture that reflex us.

    With personal home pages and social networking sites becoming so popular, everyone is jumping on the bandwagon. So is just changing the background on your page good enough to make it feel like you? Well, the answer is yes and no. If you just changing the background to a different image, it doesn't really speak much about you. But don't worry, with a bit of CSS, you can create multiple effects just by using the background.

    One bad thing about web designing in the past was that everything we create has a boxy look, so web designers has gone to great lengths to create rounded-conrners. With CSS, rounded corners can be create by using rounded-corner images for the top heading and footer background. This method does the job but it was a painful because you will have to create the rounded-corner images to match the content and add nonsemantic markup to your code.



    Another effect you can do using the background is to add the drop shadow effect. This method will need you to create a "drop shadow" image similar to the one below and using it as a background with its position set to "bottom right". Quite troublesome but it does the job.


    Well, thanks to CSS3 you don't have to go through all that trouble just to create rounded-corners and drop shadows. The new "border-radius" property allows you to create rounded-corners just by setting the radius of the borders. But because it's still a new feature you will need to add add prefixes for browser-specific.
    This can be done by adding " -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; " to the CSS. And for the "drop shadow" effect, you can use the "box-shadow" property.
    This can be done by adding " box-shadow: 3px 3px 6px #666;" to the CSS.

    The last effect I want to go over is the Opacity property which can give your design an extra dimension. This can be done by adding "opacity: 0.8;" to the CSS where "0.8 = 80% opacity.

    Below are some screenshot from my current project using these effect. It's still unfinished and I'll be making many changing to it to make it more "pleasing to the eyes".



    In this screenshot, you can see that I used a dark image for background and a lightbulb as the background for each menu selection to go with the "dark" theme.

    Here is another screenshot of the bottom of the page:


    In this screenshot, you can see the use of the rounded corners and the drop shadow effect at the bottom of the content box. The background of content box also has an opacity effect on it so the background image of the webpage will not get covered when you resize the browser window.

    It's currently not that great of a design so as i learn more about CSS and continue to work on this, I will show you the new changes.


    Reference: "CSS Mastery Advanced Web Standards Solutions Second Edition"

    Tuesday, March 30, 2010

    CSS: The Good And The Bad

    If you didn't know by now, Cascading Style Sheet (CSS) is a very powerful tool for web design. So with any great power, comes great responsibilities. Sadly misuse and improper use of such power happens very often with beginners. So after going over some of the online tutorials and reading some of the tips and tricks of CSS, I want to share some of my findings with you, which will hopefully reduce some of the bad habits and instill some good ones.

    Separate CSS from Code
    First off, CSS can be use in three ways: Inline, embedded, and external. External CSS is the preferred choice because all pages in your website with similar elements can have the same style from one single CSS file. Embedded CSS is place in the head tag of the HTML file, and applies styling only to that page. Inline CSS is just like HTML styling where it's place inline with the element code. This method should be avoided because it only applies style to that one element. Inline CSS are typically used for testing.

    Minimal Work
    Writing less code reduces the amount of work and makes it easier to maintain. HTML should be marked up using the most appropriate tags for the content, reducing the use of "id" and "class". This in turn will minimize the amount of CSS need.

    One way of minimizing CSS is to let the hierarchy do some of the work for you. Applying style to top level such as the body tag will let all content on that page inherit the styling. Another way is to group selectors that use the same style by putting them on one line using the same rule. Lastly, learning some CSS shorthand will reduce the amount of time and code needed.

    Blast from the Past
    Tables are the thing of the past and should not be use for design purpose. Rather than using tables, you should use div instead. If you are converting from table to div, you should know that div tag is a block-level element that defines a section, thus it should be use correctly and not overused.
    Declaring font size by using pixels is still commonly used but should also be avoided because with the varieties of screen size and resolution being used today, having a fixed font size will different effects on different resolutions. Instead, try declaring font size using the em unit such as 1em or 1.5em. This practice allows easy changing of your entire site's font size by simply changing the BODY tag’s (or any other container tag’s) font-size property.

    Validate your work
    Last but not least, make sure you always validate your pages using both the HTML validator and the CSS validator. Using these validators will ensure you that you are following the standards.



    Well, after browsing the web to find some good examples of CSS that I could use for my current project, Here are some sites that I think we all could get some ideas from:

    www.ndesign-studio.com adds personality and flare while keeping it simple.


    www.carbonica.org nicely incorporate images relating to the theme into the menu and links. Also divides the page into columns which I find to increase usability.


    www.yellowstonepark.com contains drop-down sub menu when you hover over each main menu choice, which I feel that it makes navigating to a specific page much quicker and easier.


    foxie.ru was list as a good design but after looking at the source code, I found that the site was done completely using tables, which in turns makes it a bad design. The artistic value is there but they completely threw usability and maintainability out the window.



    Following these guidelines will not make you the best web designer, but will guide you down the right path....

    Reference:
    8 Common CSS Mistakes
    How to Develop with CSS
    15+ CSS Tips and Tricks
    Table vs. Div

    Friday, March 19, 2010

    CSS: Magic of web design

    Have you ever wonder how some webpages look so nice while others just look like plain text? If you said it was because it was done professionally using expensive web design software, well you're partially correct. Any novice web designer (like me) can make webpages that are presentable without the need of any special software. All we need to learn in conjunction with HTML is another markup language called CSS (Cascading Style Sheets). Currently, CSS is the most used method for styling websites and for good reasons. CSS is fairly easy to learn, works great with most browsers (minus earlier versions of Internet Explorer, but who really uses IE by choice?), and contains numerous styling functionalities. And the best part it, It doesn't cost you a penny. Here is a before and after picture of a website with and without CSS.
    Without CSS:

    With CSS:


    There are numerous tips and tutorials online where you can learn CSS without the need of a textbook. A great beginner's tutorial for CSS can by found on w3schools.com. And if you never made a webpage before, you might want to check out their HTML tutorial before hand.

    The next project that I'll be on will be involving CSS. Kelli and I will be working on George's Pinax website for UH Dorm Energy. For this project we will be creating different layouts and themes for the website to eventually find the best design for it. But like every design, we will of course keep functionality and usability in mind. As I learn more about CSS, I hope to be able to create websites that will look as stunning as the examples on CSS Zen Garden.

    We're both fairly new to CSS so we'll be going through some of the online tutorials and probably look at other website designs that we think we could incorporate into the UH Dorm Energy website.

    For more tips and tricks on CSS, take a look at Philip Johnson's CSS bookmarks.

    Thursday, March 11, 2010

    HEEP: Milestone 2

    MileStone 2 is knocking at our doors and we are able to answer with 3 working gadgets. After showing our prototypes to profession Johnson, some small changes were made. All that is left is to "gadgetized" or package it into iGoogle gadgets. Luckily there is a developer tool in the Google Gadget API called Google Gadget Editor that allows user to quickly edit and host gadgets. We just had to paste our code into the "content" section and it'll package it into a gadget. So without further a due, here are our 3 deliverable gadgets.

    Don't Waste Money
    This Gadget displays the HEEP Rebate + Money Saved. It gives the consumer a birds eye view of how much they will earn by choosing an EnergyStar model. The savings is automatically displayed as the yearly and upfront rebate savings. This application provides users a means to view the estimated savings they will receive as a result of purchasing one of the listed top energy star related appliances. The application calculates the difference in yearly electrical consumption of the selected energy star model and an average value for similar non-energy star models. The consumption of the energy star models are determined by the manufacturer’s specifications. The amount of savings is calculated using the current kilowatt cost.




    Negawatt
    This Gadget displays displays the estimated amount of negawatts generated by HEEP rebates for the current year. A negawatt (negative watt ) is assumed to be one watt of power saved. Each appliance's generation and percentage is displayed in the pie chart, which allows users to see the estimated amount of negawatts generated by each of the rebate appliance categories. The amount of energy savings is also displayed as a monetary value. This estimated value is calculated using the current kilowatt cost and the estimated total amount of negawatts generated.




    HCEI Goals
    This Gadget displays our progress towards achieving the Hawaii Clean Energy Initiative goals of reducing energy generation by 30% and having 40% of energy generation from renewable sources by the year 2030. The visualization shows the comparison of our total energy generation and energy generation by renewable sources to projected linear data towards achieving the HCEI goals by the year 2030. The dark-colored lines are actual data and the corresponding light-colored lines are the projected data. The overlapping of these lines shows the start of the Hawaii Clean Energy Initiative and shows how our current energy generation is compared to the projected goals.



    These gadgets can be found simply by searching for it on iGoogle or you can click on the direct links to each gadgets below:
    Don't Waste Money
    Negawatt
    HCEI Goals

    Our next step is to schedule a meeting with the HEEP folks to present these gadgets to them. We did not create 2 of the gadgets that they have specific because we are still unclear on how to present such data. Hopefully they will like what we have so far and we'll see if they still would want us to make the 2 gadgets that they specified. Wish us luck in our presentation.

    Tuesday, March 2, 2010

    HEEP: Mock-Ups to Prototypes

    For the last 2 weeks now, our group have been redesigning and making new mock ups of our applications for the HEEP website. After making numerous changes, we have some good news for everyone. We are now done with the mock-ups and are moving on to making prototypes. Here are some of the prototypes that we have been working on this week:

    Appliance Savings Application: Instead of making it for one type of appliance, we've decided to show a table of different types of appliances and allow the user to choose a model of the appliance with a drop-down menu. By doing it this way, we can display all the appliance in one single application. We also added in the rebate amount into the savings category to make it more enticing for the users.


    Rebate Negawatt Generation: This application looks almost exactly like its mock-up. It contains a pie chart that displays the Negawatt generation from each type of appliance rebate from HEEP. One functionality that we're still working on is the tooltip pop-up that displays information about "Negawatt".


    Progress Towards HCEI Goals:This visualization displays Hawaii's progress towards achieving the goals set in the HCEI. It will display current data along with projected data that acts as objectives/markers for each year's progress. we have not found out how to separate the actual data from the projected data at this time. An option that we hope to use is the "fill" option in Google visualization to have a fill for actual data and no fill for projected data. We were unsuccessful in finding any information in the Visualization API or Google search. We are hoping that someone will reply to the post we've made on the discussion group.


    There is still a lot of work ahead of us in order to make these and the other prototypes deliverable for milestone 2. I will definitely keep you updated with our progress.

    Tuesday, February 23, 2010

    HEEP: Design iterations

    This week after receiving more feedback from professor Johnson, we've made a few more changes to improve our applications. One change that was made, which affected all of our applications is the tab interface. We decided to removed the tab interface from our designs to give the web design company more freedom of implementing it on the page. Starting with the Negawatt application, we added a definition of a negawatt so users would know what a negawatt is, and we added more descriptions for the pie chart by adding in a legend. Below is a screenshot of the new negawatt application.



    The next design change we've made was on the Top EnergyStar Model application. It's a small change suggested by Robert to rephrase the amount of money consumers can saved to the extra amount of money consumer will pay by NOT switching to an EnergyStar Model.



    The Appliance calculator application that we've created was a good idea, but its an old idea and a version of it is already being used on the EnergyStar website. we tried to think of a way to apply it specifically to HEEP but we couldnt come up with anything so we decided to scrap that application.

    A few other refinements that we've made were on the visualization applications. We decided to split the Energy Generation graph into 2 graphs to better represent what we're trying to show. The first of these graphs will show the projected energy consumption by percentage from each source and the second graph will show the energy consumption by its value from each source. We also added data for every year to make the graph look more proportional by years and an indicator line to show the beginning of the HCEI which will be used as the base value to meet HCEI's goal.



    The final change we made was a small change to the Oil Consumption graph to change it to actual value rather than the difference between each year. This way it's easier for users to put large amount of oil that we're consuming into perspective.



    We're hoping that after these changes, we can begin implementing prototypes for these applications. MileStone 2 is creeping up on us and we really want to have some deliverables to show the HEEP forks. Come back next week to hear the good news.

    Wednesday, February 17, 2010

    HEEP: Mocking up some changes

    So last week, I've said I will keep you guys updated on my HEEP project. So we presented the ideas we've came up with to professor Johnson in our Thursdays meeting and the overall feedback was that it was good that we were thinking outside the box but some of the applications were a bit too complicated. Also as a developer, we should always give what the costumer ask for, such as the HEEP report card that we've replaced with the Appliance report card.

    Since we were doing so much redesigning, professor Johnson advised us to make mockups of our applications rather than jumping straight into implementing it. It was a really good idea since looking at the mockups gave us a better idea of how some of the functionalities were seem be more confusing or bothersome than being useful.

    So after another trip to the drawing board, These are some of the applications that we're came up with:

    Negawatt Application: it displays the Negawatt generated by switching from a non-EnergyStar appliance to an energyStar. For those of you who dont know what a negawatt is, it's a term used to describe energy that was saved or not used by being energy efficient. So in our case, it was the energy from switching to an EnergyStar appliance. The pie chart will show the amount generated from each different types of appliance.


    Top EnergyStar ModelsThis is a simple visualization that shows the top EnergyStar models with the energy usage difference and the amount of money saved compare to an average non-EnergyStar model. It also acts as a recommendation page for users to use when looking for a replacement.


    Appliance Calculator:We simplify the calculator to make it require less user input. All that the user have to do now is select roughly how old their current fridge is and the style from the icons. Hit calculate and viola, they'll get a rough estimate of how much money their current model uses compare to new EnergyStar model. This makes the application easy enough for kids and grandmas to use.


    Oil visualizations We made some slight changes to these visualization, In the energy consumption visualization, we added in the energy source of "conservation" which are negawatts or energy that we didnt use/need. These projected data goes hand and hand with the Hawaii Clean Energy Initiative goals which states that 30% of the 70% clean energy will be energy that was saved. and for the Oil Consumption visualization, we changed it from a bar graph to a line graph.









    We're still brainstorming on what to design for the HEEP report card and CDD applications. These applications are seriously giving us a hard time but it was requested by HEEP themselves so we have to come up with something to show them. Hopefully with more research, we'll think of something that is to their liking. Wish us luck.

    Tuesday, February 9, 2010

    HEEP- reaching the first milestone in the user's shoes

    Entering the 4th week of our project and reaching our first milestone, I have to say that things have not been going according to our plans. Our initial notion that we got from the meeting with HEEP was to create a gadget that would display a "report card", "oil usage", and Cooling degree days". After getting some ideas on what to implement for each of these application, we requested for the necessary data from HEEP. Unfortunately, HEEP does not have the data that we needed at this moment, so we decided to generate our own data.

    After our meeting with professor Johnson, we've realized that our implementation may not be the most practical considering that we're still not exactly sure on how they want to present those information. They know that they want a gadget that will display information to their users, but it may be that they themselves are still not 100% sure of what/how they want to do it at this moment.

    So it was back to the drawing board and some critical thinking. But this time, we've removed the blinders and are thinking outside the box. We put ourselves in the user's shoes and thought of information that we want to see or use. Ideas started coming out since we stopped limiting ourselves to just using visualizations to present information. Some of these Ideas include:

    • Appliance report card (rather than HEEP report card)

      • Compare top energyStar model to a cheap non-energyStar model
      • Show the amount of time it'll take to make-up the price difference from savings on electric bill
      • Show the total savings from the average lifespan of each of the appliance.

    • Appliance Calculator

      • Allow users to compare their specified energyStar model to a cheap non-energyStar model
      • Calculate the amount of time it'll take to make-up the price difference from savings on electric bill
      • Show the total savings from the average lifespan of each of the specified appliance.

    • Cooling Degree Days Calculator (Usage)

      • User enter power usage and temperature of a specific year
      • Calculate the total and percent of change in power usages per cooling degree day

    • Cooling Degree Day Calculator (Generation)

      • User enter power generated for 2 specified years and base
      • Calculates the total and percent of change in power generation per cooling degree day

    • Energy Generation (Visualization)
    • Changes in Oil Consumption (Visualization)


    From a user's point of view, we think that having these useful tools (calculators) would be a great addition to the page and rather than having a report card to display HEEP's performance, it would be more useful to have a report card that displays the appliance's performance instead. All of these are still just ideas that we intend to present to HEEP in the near future. We'll see what kind of feedback we're receive from them and continue from there. But I'm hoping that they'll be happy with these designs. I'll keep you guys updated

    Tuesday, February 2, 2010

    Clearer picture- Visualization

    Entering the 3rd week of the HEEP project, we finally have a better understanding of Google Visualization and how to use it. A good part of Visualization is that it works great with data on Google Spreadsheet. Although the data that we've received from HEEP was in an Excel spreadsheet format, It was organized by rows rather than columns making it harder to use query statements. So we're decide to import the useful information from their spreadsheet into a new spreadsheet on Google Docs.

    Once that was done, the ball began rolling as we were able to create sample gadgets using the data from Google spreadsheet and some chart templates in Google Visualization. We finally have something to show the HEEP folks. Our first intention was to make our own visualization rather than using the sample templates. But after our meeting with professor Johnson, he recommended that we use sample templates for now so we will have something to show to HEEP. This way, they will have a general idea of how it will look like and suggest any chances they want to make, rather than waiting for us to make own our visualization which would be wasted time if its not what they want.



    As of right now, we are still waiting for more data for some of the application they requested. Below is the sample of our Oil Price and Consumption gadget: You can find more Chart Samples here.

    Tuesday, January 26, 2010

    Meetings for a clearer picture

    After our first meeting with HEEP, we have gotten a better picture of what they want us to do. It was fairly similar to what we had in mind. Instead of a web application, we are going to design a widget to be placed on their new webpage. This widget will display various information to the users, such as the price of oil, a weekly report card of HEEP's progress, a cooling degree day chart, and a variation of the stoplight application.

    I have mention before that HEEP have contracted an outside design company to create their new webpage. To make our collaboration transparent, HEEP has told the design company to leave an allotted space on webpage blank in place of where the finished widget will be place. This way, all they had to do is place our code into that allotted space and it should blend in with the rest of the page.

    We had many "grand" ideas of how to implement this, but what we have found out after meeting with professor Johnson was these "grand" ideas might not be the most practical ways of implementing it. So after our meeting, we've decided the best way to implement this widget is to use Google Visualization and incorporate that with Google Docs. We will start with the Price of Oil widget first and see how that will turn out. We're giving ourself a deadline of 1 week for that widget.
    So come back next week to find out our results.

    Tuesday, January 19, 2010

    Huge Leap with HEEP

    This semester, we are taking a huge leap into real world software engineering. For the first time, we will be doing a collaboration project with people outside of the school. We will be working with people from the Hawaii Energy Efficiency Program (HEEP) to add an embedded web application to their website.

    HEEP is a program created to inform Hawaii consumers to be more energy efficient. Their site currently contains information on alternative energy source such as solar energy and provides incentives for people to use such alternatives. They are currently in the process of designing a new website which they have already outsourced to a mainland company to do.

    For this project, we will be collaboration with HEEP and the web design company in adding a web application to the new website. Some of the suggested applications are similar to the stoplight application and Oahu's grid application that we used in last semester's wicket project below.



    We currently do not know the exact scope of the project since our first meeting with HEEP will not be until tomorrow. We hope that we will get a lot of our questions answers during the meeting and get a better picture of what we will be working on.

    One concerns that we are worry about is how the design company feel about this collaboration. Since they were initially hired to do the job, we have to make sure that we do not "step on anyone's toes" or offend anyone.

    This project seems like a great project to began the new year and I'm looking forward to getting my first experience working with professionals in our field.