Mobile Notes HTML/CSS/JavaScript

So today we looked at some useful HTML/CSS/JS code for Mobile devices. Such as removing the top bar that occurs on ipods using a simple Javascript code. Having the mobile respond to mobile devises and resize for them was a simple bit of html here. And I guess thats it! two simple pieces of code to make your mobile webpage look a little more awesome.

TOPGamer – application online mockup

So I redesigned the layout for this app a bit on some of the screens and I think over all it looks better. Grayson and I created a mockup of how this app would look using HTML and CSS which can be found here.

This slideshow requires JavaScript.

This is the new mockup that was made.

Gamer App – mockup

Hello again!

So this past two weeks our web essentials class has been working on designing an app! We were given the target audience “Gamer” and the behavior we are trying to change is “Balance/Life/Work”.

This is generally how the app is intended to flow (left to right), but the last five images can toggle between all of them. Perhaps that means I should create a back button for the other two (minus the first image) hmm… Well here are all the other images with a closer version!

This slideshow requires JavaScript.

Web Portfolio – Update

Another update for my web portfolio! The old site has been taken down, and the new one can be found here! Some minor changes and more to come! I still want the eye to move, but for now I just want something solid and presentable.

Updates will be coming soon about the app Grayson and I are creating!

Mobile Behavour Changer

Today we started brain storming about a mobile app that is designed to change someones behavior. Given “The Gamer” and “Balance/life/work” my partner and I decided we would try to limit gaming time and reward engaging in other activities through this app.

Three things our app must include are calendar, reviews, and reminders.

Friends and family will be a support group for a gamer trying to balance their life. They can buy points to give to the gamer for achieving goals, and participating in other activities. These points will go to some material goal they are saving up for.

They can keep a daily log of their actives and plan other events with the calendar, which will be viewed and rated by them and their friends. By setting a goal and timing it, the app will remind them when time is up. If they want to finish their game they can press ‘snooze’. Completing the game within a short span of time will give them more points.

In class someone suggested there be different levels for keeping a low gaming time and potentially names for each level (gold, silver, bronze ranking?) potential name for this project could be gamerESC.

We will be using a template very similar to the image bellow to design the app and the navigation flow for next week.

Uploaded Portfolio – version one

Hello hello! So I have a working copy of my portfolio web-page up online now which can be found here. There is a few bugs apparently because the font doesn’t appear in Safari, but otherwise its pretty good! Details regarding each piece of work need to be shown but I’ll hopefully get to that over the next week.

The design has changed quiet a bit since the first draft.

This slideshow requires JavaScript.

Portfolio Webpage – revised

Alright! So after eyeballing a few peoples portfolios last week I came to the realization that my webpage was to cluttered and wasn’t as dynamic as I would like from an interactive webpage.

My friend suggested that I create a sphere with samples of all of my work, but to have a sphere that would be spin and be dynamic, and functional would be very challenging. I started looking to other shapes and possibilities and how they could relate to the over all biology theme I had developed for this website.

I decided on the honey comb hexagon shape as it is a reoccurring pattern in nature, and to create a sense of depth for this webpage. I think the over all look becomes much more interesting and clean to look at. The squares will highlight as you roll over them.

For the alteration of the “about” page I choose a new larger image and fixed it to the desired proportions for the new background.

I considered the “leave a comment portion of the webpage for quiet awhile. Originally I thought it would be interesting to have comments displayed throughout the “space” created. As the code would be fairly complex for such a task, I minimized the work, and think it still maintains a cohesive appearance.

This would be a close up of the program when a hexagon is clicked. It will reveal the project, a few images of the process, as well as some notes on the project.

Anyhow, and comments would be welcome regarding design suggestions or code. This is my current mockup for my webpage.