And So It Ends...

As we continue removing more and more unneeded divs, my goal for this week was to "complete" the profile page and continue to another if given the chance.

After my theme being rejected, I decided to use more realistic clouds for a background and change the colors of the widgets to green to give the page a more "natural, yet playful" feel. I'm not sure how this will roll with the group, but my friends say it looks okay. Once this was done, I learned that Twitter Boostrap contains a class that modifies table tags and makes them nicely responsive. However, it adds a weird hover action that might not work with mobile devices since you can't exactly "hover" with a mobile device. Here is my "final" result in both full and mobile size:

I had some extra time so I decided to move on to the help page. I was curious on making videos responsive so I decided to tackle that challenge. It after searching for a few tutorials, I found some code that I decided to use (and gave credit to) in my .less file. It works very nicely and the YouTube video actually responds to the change in the size of the screen. Also, I found out that YouTube has an opt-in trial to turn all YouTube flash videos to html5 videos by opting in here. Once opt in, all YouTube videos. Like the profile page, I removed other unnecessary div tags, which was fairly simple since I already knew what to look for. Here is my "final" result in both full and mobile size:

I will continue working through the weekend. My goals for the weekend will be to get it looking nice in a tablet size and fix the badge images in the profile page to make them respond nicely as well.

So Many Divs @__@

No one really likes to clean, especially when it comes to cleaning up code that seems like a child came him and started mashing on the space bar and the return key. However, when it's done, modifications and changes can be done much quicker. The goal for this week was to remove as many unnecessary <div> tags from the html as possible. This would reduce the amount of lines in the file as well as make the file look cleaner. Another part of this task required removing necessary "id" properties in the <div> tags that had to be there. In the beginning, I thought this would be a relatively simple task, however it was full of headaches just like every other task is.

For this task, I chose to clean up the Profile page from the Kukui Cup Website. Removing the extra tags proved to be pretty simple. However, this meant that indentation would be off. After removing as many extra <div> tags that I could find, I had to go back and fix the indentation of the lines of code that remained. This took a few hours and by the end, my head was spinning.

I had some extra time on my hands, so I continued to rework the page because the way the information was being displayed in the widget boxes was ugly. The widgets contained data pulled from a back end, so I had to create my own information for the sake of making the page look as it would with some information. Currently, at the full version, the information is displayed nicely, even though it covers multiple lines. However, when it gets to the mobile size, it looks a bit funny. This is mostly because the widths I am using for the table columns are fixed (I know  I'm not supposed to, but I needed some kind of idea of how long "100%" would be when determining the size of the table). I plan to fix the tables in the next couple of days to insure that they respond nicely, but for now, I'm more worried about the overall source code so that these changes can be made quicker.

Back to Responsiveness

Sorry for being MIA for a week. It was spring break and we were given a nice short vacation, but now it's back to work. This week was used to begin working on more of the Kukui Cup pages and making them responsive, and making them use our LESS file instead of the old and clunky screen.css.

For this task, I am currently working on the Profile page. Using the Twitter Bootstrap framework, I was able to get the page to be responsive, however, in my opinion, it does not look visually appealing yet. I set my page up similar to those of the tutorials we watched about Twitter Bootstrap using a 2-column layout and putting each widget into rows. It works, however the huge gap between the "My Badges" widget and the "My Achievements" widget throws the page slightly out of proportion. Also, I personally don't like how the widgets touch the edge of the page. Even though we're losing pixels, I personally feel that adding a small (maybe 10px) padding to each side would make the page look much better. The only problem might be the loss of pixels when viewing on a mobile device. Our group will meet soon to determine the fate of that padding, but for now, the most important thing is making the page respond nicely.

Another thing I've been working on, is trying to find a nice editor for LESS files. So far, no luck. I did manage to find one that is built on Eclipse's XText plugin, but it doesn' work. Even after fighting with it for an hour or so, no luck. If any other suggestions are out there, I would greatly appreciate it.

Not a lot of drastic changes have been made this week. I had a huge project due for another class so a large amount of time was spent considering a different layout. It still seems a little too plain in my opinion, but that is a topic for another time.