Modification

            After last week’s cleaning up of the html file (news.html – I renamed it to news_hansen.html) that I worked on, it was time to moved on to modifying contents of the web page. Before I modified anything, I noticed that the section that listed lounge members was in a vertical one column list; it was also displayed right in the middle of the website. This also applies to the news feed section which it had the content display in the same style as the lounged members section.

            Basically, I modified the original code of just displaying the contents in a list to containing div tags to create columns within the list.  The result came out to be three columns of contents within the list. I also applied a similar design to the news feed section to place the news content in columns instead of just one column of content right in the middle. Now the modified site looks like this in the picture.

            For this week I will look into other contents in the site to see if there are any other things to modify or some current things that needs to fix. Also, I will look into fixing the mime-type of the svn so it will display the site correctly on Google Code.

           

Cleaning Up

            For this week the focus is on cleaning up the files so it doesn’t contain unnecessary code to make the files smaller in size. It also makes the code cleaner to look at and even easier to follow. For example, cleaning up and having less div tags in html and even ids makes it easier to locate where things begin and end.

            I selected the news.html (which will upload later on) and cleaned up as much of the ids in the div tags as I can. I only ran into some trouble with a part where I took out an id and the content disappeared from the site. Otherwise I managed to clean up most of the ids and combined some class into one div tag instead of separate div tags for each class. For example

            Original

            <div class=”content”>

                        <div class=”content-title”>

            Cleaned

            <div class=”content” class=”content-title”>

            Overall, this week’s progress is better than last week; unfortunately last week I was too ill to have done as much as I wanted. As of now with the cleaned up html file I will move on to making the page be responsive but still retain organize contents.

Lessify-Again

 

            Previously before Spring Break I was experimenting with the .less file to change the theme and experimented with the columns from Twitter Bootstrap. For this week I worked on the help.html.

            Basically, I applied what I done from the week before Spring Break and tried to maintain the content in an organize manner in small window. Well, nothing is better than a picture since picture is worth a thousand words.

          

           It does look very little work due to me falling ill this week. Stomach ache, fever etc kept me behind schedule. Hopefully I will fully recover by next week to work on more pages than just one.

Lessify

            Last week I experimented with getting the contents to be in perfect columns using Twitter Bootstrap. Although, not too successful, but it allowed me to understand a little bit more of how it really works. Initially I didn’t quite get what the @media tags were for, this week I understand that it’s for the browser screen size and different screen size will correspond to the spans which will create columns.

            Besides understanding more about the Twitter Bootstrap, I also had to understand the .less file really works. Fortunately this .less file is not too hard to understand, in fact I find it easier to understand than a CSS file. One reason is the use of variables that can represent hex value of a color etc. With one variable representing a color it can be used in other parts of the file with few modifications to create different shade.

            For this week I picked the energy.html that was designed by another person call Cam. Basically, I had to modify the provided .less file to change colors and get understanding of the file’s structure. I also experimented with different ways of creating columns to make the site look better in small window size. I managed to get the contents to move into kind of a organized way when in small version. However, still need to play with more to get everything in a more comfortable view in tablet or mobile size.

            Glad upcoming week is spring break which will give me more time to experiment and play around. I’m looking forward to make more progress even if it means the progress produce failure results. It will just give me a chance to learn more.

Bootstrap Organized

            After several weeks of experimenting with layout, background color and so forth we finally move on to experimenting with a responsive structure for Kukui Cup website. Before I viewed the tutorials and read through what Twitter Bootstrap is I thought it was something from Twitter.

            Initially, when I went through the tutorial of the first version of Twitter Bootstrap I was amazed at how it has a nicely planned out grid structure. As I understand things can be in rows and with the use of the class of span it can create columns to have everything organized. Now with the version 2 we can go onto the Customize and Download page (http://twitter.github.com/bootstrap/download.html) we can customize what will be included in the bootstrap.css file.

            I tried playing around with the home.html by taking out some parts and try to test out how to incorporate bootstrap.css into the website to make it responsive. Although, not too successful, but I at least saw how the content reorganized in certain size of a browser (e.g. tablet size browser window).

            For now more experiment must be done to understand how the styles work, and how to organize everything so when browser window gets to any size it will work like the examples provided from download. Overall this is a good start of having a decision on what responsive style to use so everybody can be focus and have improvements in upcoming weeks.

Makeover 3

            As of last week I worked on moving the contents around to different position and put in a new background color (Refer to last week’s blog for more information paste link here). Unfortunately last week’s design was a little mush up so this week I took one page (news.html) and tried to take things apart to create a partial design (view picture below).

            The picture above shows that my idea is to take away the icons in the nav bar and move it to the side to be replaced by a vertical menu and the other contents would be almost as it is in the original design with only color changes.

            Through the week I had a confusion of what was to be done, which brought me to borrow another member’s theme and edit what the project supervisor asked to edit to make it look better. Basically, I checked out the project and copy over Sean Chung’s theme and edited it so that content box on home.html with the large icons would be curved and took away that horizontal black line. Later on I found out that we can still work on our own design by using original files and to put in new colors.

            Overall, it was a week of a little more progress of understanding more about HTML and CSS and glad the confusion of what needs to be done is over. For this upcoming week will experiment on finding color schemes/backgrounds that would make the site to have the potential to make it look appealing before moving on to moving things around to make a complete new site.

Makeover 2

            For this week on my Kukui Cup website project I took apart one of the webpages and try to reconstruct it into the possible design I want. Also, pick a background that involves less mixture of colors. Basically, I went from colorful to a simple background approach.

            Last week I was thinking more of a nature background color and trying to move some contents to some places. Refer to last week’s blog for more information: Makeover. This week while reconstructing I took away that nature background color and went with simple white background with a greenish background for content boxes. As for the text color I went with a darkish green color to bring out the background of the content boxes.

            I was successful in getting the bar with links (we call it nav-links) to be on the side and act as a side menu. This time I was able to keep it within the container but out of the header (the part in the website that contains the Home button, user and floor info etc). As for the other contents I wasn’t too successful with moving it to the positions I want.

            Overall, my problem is still with how to get the contents to move to a certain position on a page. Whenever I move it I have trouble figuring out which kind of tag or code to type into CSS to actually place it nicely at a certain spot. That is why this time I was able to have a simple background and move some content, but the others wasn’t successful so things does seem mush up together. I hope that soon I will figure out a way to get everything place nicely and apply it to every page. 

Makeover

            After a few weeks of just going in circles without much progress on the redesign of Kukui Cup or even applying responsiveness to the website, I finally took a step to understand the code of where or what piece of code makes up the image etc on the Kukui Cup website.

            Initially I took apart the Home button and the nav-links section (a bunch of links that needs to some other pages) and played around without the images. I was successful in getting it to display just text and still retain its original position.

            Then later on it transition into experimenting with understanding where the other content boxes are located in the html file by their div tags. Also, going through the css file to see how the shape that contains the content (e.g. news feed) are created.

            For the redesign of the site I was successful in removing the images from the nav-links and recreated it into a left side kind of menu. I also picked lighter green background and kind of beige color for the content boxes. Here’s the piece of code that I’ve modified to display the nav-links in a left side vertical menu.

Then I experimented with trying to move the other contents into places to make it evenly spaced out to look like organized columns. However, I was unsuccessful in getting the other contents to switch spots to other places within the container. Although, trying to rearrange the content boxes wasn’t successful, but I will continue to experiment and research ways to place the content boxes in certain spots and learn more CSS and HTML coding.

Color Scheme

            For this week I have been told that for website design we shouldn’t make use of dark backgrounds. Also, the problem of selecting a good background color or even just what picture to use as a background is harder than what I initially think. With this discussed I realized that in web designing besides having features that meets the memorability, learnability etc requirements from HCI (Human Computer Interaction), background is also another important aspect in web design. If the website has a complementing background along with other content then it can appeal to the user and attract more users.

            With that in mind I got introduced to this website call method.ac which has couple other pages that helps people play around with things that affects how appealing a website is; such as font spacing. One of the pages was related to color, color.method.ac, which is like a game that allows user to find the perfect color for hue, complimentary and so forth. Therefore, I played around with the colors and I find it really hard to find a good combination of colors. However, I found out that sometimes some combination that we think wouldn’t work turns out to actually be a good choice, as indicated by the site. Here’s one of the times that I got a good selection of color when I was playing around with the colors.

            In the picture above the outer circle is a darker shade of green and the inner circle is a lighter shade of green. Initially I never thought these two similar colors, only difference is in the shade, would actually be a good selection. I always thought that a good color selection involving two different colors would be a good selection because one color would bring out the color of the other.

             Overall, this week was a good chance for me to play around with colors and set my mind to decide carefully of what I can use for the background of the Kukui Cup website. For upcoming weeks I would like to test out how to implement code to create a new design and test how it should look like in mobile or tablet design.

Image Scaling and Framework

            For these past few weeks I have been working on getting the web page for the Kukui Cup news section to be responsive. Basically, trying to get the content on the website to be organized based on the browser window size.

            The challenge for these past few weeks was trying to get the images that represented menu selection along with the header (black background behind the pictures) to move into position as the browser window gets smaller or bigger. Here’s an example of the menu selection

            To get things started I went back to the basics to learn how to resize image with a CSS file so I can understand where to edit in the actual code. I happen to come across this website http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale which taught me that resizing the image is related to the pixels.

            Besides learning the basics I also had to use a framework so that everything would be organized as the browser resizes. I have come across this framework call Skeleton http://www.getskeleton.com/. I find this framework to work quite well with the existing code. Only problem right now is to understand how to get things to a certain column or size and so forth with this framework.

            For now I will continue to play around and see what ways to have the images move along with the header while the browser window resizes. Also, experiment with the code to see if can put things in more columns so it will organized evenly.

Page Resizing 2

            Previously I was doing some research on HTML5 (Hyper Text Markup Language) and CSS3 (Cascading Style Sheets) to learn how I can implement code to transform web pages for the Kukui Cup project websites into a responsive web design web page(s). First is first, what is this project call Kukui Cup? Basically, it is an advanced energy challenge that aims to get people to practice positive changes in their energy behaviors.

            During this week of viewing the news.html file with my group I found out that incorporating responsive web design is a harder than what I expected. The hard part is mainly because of the html code included bunch of images and different sections (e.g. to display news and other results).

            Initially, I was testing with this responsive grid system call Responz http://dfsc.me/css/responz/. Unfortunately nothing happen because in there were differences in the class names that the news.html had that refers to the css file. Example the css file from Responz had no class name call container so the Responz css file didn’t work at all when I transfer over to the folder containing the news.html file. With the help of my team members I tested with another responsive system call Skeleton http://www.getskeleton.com/. Fortunately Skeleton provided a css file that has the class name call container and it happens to work find with certain parts of the news.html.

            From what I understand the <div> tags would put certain codes into a kind of collection for certain parts of the website. Basically, in those <div> tags I can give a class name from the css file so it will respond to the action (e.g. get smaller base on the specified amount of pixels) from the css file. Also, I notice that there were quite some images, which makes it harder to have it respond and organize when I change the size of the screen (browser).

           Overall, the most challenging part in this project was trying to get everything to be spaced out evenly when the browser was re-sized. It was still a great experience even though my team had difficulty finding the right parts to the images so we can figure out how to re-size it

Pages Resizing

Nowadays, accessing the Internet or even any computer apps is not restricted to only laptops or desktop. Technology has improved to the point where mobile phones (e.g. iPhone) are increasing exponentially. Everywhere you go you will see almost everyone holds their iPhone etc to access the Internet or something on their gadget. It is convenient in a way where you can access important information on the go, but the problem arise when the content of the webpage has to be loaded onto a certain screen size (depending on the gadget) or even the type of gadget. Good thing there’s responsive web pages.

Through my research I found out that responsive web design responds to an action made by the user based on the browser’s screen size. Basically, as you enlarge or reduce the size of the browser window with your cursor or you hands (if using a mobile phone) the content of that web page will resize to fit perfectly depending on the size of the browser or screen of the mobile phone.

As the contents get resized the graphics will also get affected. This is where HTML5 (Hyper Text Markup Language) and CSS3 (Cascading Style Sheets) come into the assistance along with responsive web design. Normally the graphics on the webpage are incorporated with the use of Flash. However, as the web pages get resized then it might be a problem having to worry about resizing the graphics with a separate application (since Flash have to be installed separately). With HTML5 programmers are able to incorporate media such as audio and video and CSS3 allows programmers to include array of styles (e.g. boxes) without the use of Flash. This greatly reduces the trouble of having to manage graphics with a separate application. To read more please refer to the following sites I have found about HTML5, CSS3, and responsive web design.

HTML5 Links

http://radar.oreilly.com/2011/07/what-is-html5.html

http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

http://msdn.microsoft.com/en-us/magazine/hh475813.aspx

http://www.pcworld.com/businesscenter/article/243130/adobe_flash_vs_html5.html

http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

CSS3

http://www.webteks.com/tech_beat_archive/march_newsletter/faq_from_you

http://www.howinteractivedesign.com/technology/rendering-responsive-web-designs-using-adapt-js

http://www.sitepoint.com/detect-css3-property-browser-support/

http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Responsive Web Design

http://www.webdesignshock.com/responsive-design-problems/

http://www.business2community.com/online-marketing/responsive-web-design-vs-separate-mobile-site-%E2%80%93-which-is-right-for-you-0104949

http://blog.openviewpartners.com/responsive-web-design-best-business-mobile-approach/

http://www.quora.com/Why-are-some-responsive-web-designers-using-px-and-not-em