Our Final App is Finished!

We ended up working until the very last minute to add some extra features to our app so I actually forgot to do last week’s blog post. I will do one more for this class and then I will use this blog to report on any of my new classes that require a blog, which start April 20th

Tying Up Loose Ends

My small contribution was done last week, so I was really glad for the opportunity to get the code up and running after both teammates added their work several times. I was able to come up with lines of code to help them get passed a place they were stumped on as well. One design team member worked after I submitted our ‘finished’ app to conform with his wishes. He ended up adding new features, which work, so that’s that. It’s done.

Our App

It’s not pretty, but it’s functional. You signup, login, it flips over and shows seven bars with the name of the days of the week on them and two buttons at the bottom for help and to reset the form. You click a day and it opens up to show three input fields for Name, Time, and Location. It’s a really basic program. The point of the course was that we experience what it is like to develop an application in the real world. The weeks of research, learning new types of code and technologies, planning, design and finally the excitement of getting down to work, feeling not good enough, overcoming fears, and the triumph of getting the code to work all mixed together in a massive sprint. It’s a neat experience.

Conclusions

We could of done a lot better on the file structure. The reason things got lost is one teammate’s bad habits. They created a new file for each version, fine, but it wasn’t the teams current version, just theirs. Things were lost as I tried to merge the files together by hand. Another thing was that all the CSS, JS and HTML were mostly in one huge file. This made it hard to spot changes. It also made it hard to follow the code at times, but it was a learning experience. I think we can expect good things from these two. There are a few bad habits they need to learn how to conquer, but they will. I hope to stay in contact. Good kids.

Good User Interface and More…

We’re over the hump! Six more weeks and if we’re lucky they’ll cut the last one down to three days.

Our Meeting

We had one teammate absent (he’s moving) and my audio and video never finished connecting to our Google+ HOA, so our other teammate was the only presenter. Not to be put off by this, I did my presentation on my own. I covered good user interface. Hopefully it will work for me next time I need it. I have several nephews and a niece who constantly paw at my headphones. I was afraid they were broken! Thankfully, they still work fine.

Good User Interfaces

I covered ten topics that are important for good user interface based on information I found in this article. There are 12 items in their list, but only 10 applied to our team:

1) Highlight important info as it appears. Use CSS Animation or Transitions to highlight newly AJAX’d info to an area of the screen. IE: Draw the eye to it.

2) Have keyboard Shortcuts. It’s important to have as many ways for your user to navigate your app as possible. Use tabbed menus, site menus and intuitive keyboard shortcuts. IE: Make them meaningful.

3) Use color coding. Help people identify the various aspects of a webpage with a central color coding scheme.

4) Personalization. Allow people to personalize their user experience. Avatars, user names, colors, text, etc.

5) Tooltips/user messages. Have small popup windows with helpful messages to guide your users along. Make sure they can be turned off and are closable.

6) Color code/use icon for each tooltip/user message. This helps users a lot. Match an icon/color with each message type and users will be able to see what’s going on by site. This works for things that are used over and over. For unique messages, create a standard popup window so the user knows that they should read it. Always make the window closable!

7) Tabbed navigation. It looks nice and is trending right now. Very convenient for smaller screens.

8) Darkened window behind popup window. Make the main screen a bit darker while another screen pops up. This shows a change of focus.

9) Use Slideshows (or light boxes). Even pages of text can be presented in a slide show. Light boxes for a series of photos. It looks really slick.

10) Make forms short. Your app may be used on really small screens. Make sure to keep them short. Use multiple ones for different things. Have a way at the beginning to choose the type of form you need, or some such thing. Make it easy!

CSS Animation

I made a green circle bounce based on a tutorial I found. I had to come up with the -webkit- part of the code myself. That was fun. Pretty simple. Now I know.

JavaScript Objects

I played around with JavaScript Objects again. This time I wanted to use a function to construct my objects. You basically set something up like this:

JavaScript
function functionName (arg1, arg2, arg3) {
this.attribute1 = arg1;
this.attribute2 = arg2;
this.attribute3 = arg3;
}

Next we add the objects were setting up:

JavaScript
var myObjectA = new functionName(argA, argB, argC);
var myObjectB = new functionName(argA, argB, argC);
var myObjectC = new functionName(argA, argB, argC);
var myObjectD = new functionName(argA, argB, argC);
var myObjectE = new functionName(argA, argB, argC);

What happens here is that each object (myObjectA, etc.) calls the construction function and passes the three arguments enclosed in the parentheses. Each call to the function assigns the appropriate argument to the appropriate attribute. Now the object and its parts can be pulled up with the objectName (myObjectA).attribute name. As in myObjectA.attribute3. Very useful code indeed.

Conclusions

Well, no surprises here. It was a good week. We have one more week of teaching ourselves the nine topics and then we move on to the coding!

Week 2: Meetings and Some Coding

This week was pretty light. We had two team meetings and taught each other code. We created a new Github repository for our code snippets and I posted to the HTML/CSS/Javascript board this week.

Setting up Team 4

I volunteered to setup my teams online resources. I setup a Github repository, created a team folder on my Google Drive and started a Team Meeting Minutes document in that folder. I started a Google+ Community for our team and invited everyone I needed to invite, including our instructor. Finally, I started a Google Calendar for our team. This was a lot of fun.

First Meeting

My duties continued as I was directed to start the HOA’s this week and keep the Team Meeting Minutes. I had a problem remembering where to send the invites from on HOA, but they both responded instantly to my invite. We decided to use the photo and tag line I chose for our Community page and set some ground rules. We planned for the next meeting and adjourned. I headed over to record the minutes on Google Docs and to post a link to our team meeting’s recording from Youtube to our Google+ community.

Second Meeting

I started this meeting on time and remembered to send the invites out. They both responded instantly. We chatted for a minute and then we did our planned presentations. I taught CSS Transitions, the others taught CSS Animation and Javascript Objects. We made plans for next week and we were done. I posted the team minutes on Google Docs and a link to our team meeting’s recording from Youtube to our Google+ community.

Understanding Portfolio

I set up another repository on Github to keep my code snippets in. I linked the repository to my Netbeans and started a new project for it. I created HTML files for the code I and my team mates shared with each other and called it a night.

Conclusion

This week was fun and frustrating. The instructions are somewhat lax. I wish they were a bit more clear on what we need to do. Other then that, I am enjoying myself. Investigating the 9 topics we need to learn will be the focus of the next six weeks. It should be a lot of fun.