I didn’t mention it last week (but I did mention it in the last face-to-face meeting), but my computer decided to die on me. The only things that were affected were the earlier files I was going to use for my portfolio (the more recent stuff was backed up) and the .txt file that I had my backups for the blog posts on. Or so I thought. I was deleting the unnecessary files I uploaded over the course of the semester onto my site and I found that I had uploaded the text file along with the other crap I had. Woo hoo! I won’t have to rewrite everything! So I’m copy-pasting it here along with this week’s update!
March 14
I do not freaking believe this. Why can’t I sign on my blog!? I freaking typed in my password correctly several times! Slowly! With me looking at each key as I chicken-pecked it! What the hell!?Okay, okay. Missing one week won’t be so bad. I do write everything on Notepad before copy-pasting it onto the blog.So originally I was going for a deep sea blue scheme for my site. However, the picture I was going to edit for the title banner didn’t really look good, so I had to change my plans. I did find this awesome picture of Mount Fuji in my photos, so I decided to use that instead. After removing the portion I wanted to use for the banner, I had to crop and resize
it to fit the site’s dimensions. I then did a few tests with Firefox, Opera, and Internet Explorer to make sure the banner looked right. An interesting effect I found was that on IE and Firefox, the title banner image would cover most of the width of the page, which is what I wanted. However, on a maximized Opera window on my 1366×768 pixel screen, the banner’s left side would align with the central panel’s left side, which gave it the appearance of a layout that I previously considered using. I found this effect to be quite awesome and left it as is.I didn’t have too much trouble with GIMP, though I wish it would just automatically close the previous pictures instead of keeping them open. Also, adding text to the picture was a bit of a pain in that I often wound up moving the image around when I tried to click on the text box to move it. Arrrgh! In any event, I chose to have the site’s name and subtitle on the upper left side, and the title of the current page on the lower right corner. I made this decision due to how nice this arrangement looked.
On a side note, I had trouble choosing a name for my site. I eventually gave up and settled on Nolanda, as in my USF ID.
Anyway, I also edited the open and close arrow images I’m going to use for the site. Instead of going for a transparent background for the arrows, I just decided to fill in the white areas with the same color as the background. I also went with a slate-blue color for the arrows themselves to give it a bit of texture and to match Mt. Fuji’s colors.
I still don’t know what to do for the background, though. I’ll just leave it as it is for now.
I also went to ButtonGenerator.com to get my menu buttons. I did have to adjust the size a bit in GIMP so that they didn’t look so tiny.
March 20
Still can’t sign in. Gonna ask again.So, since my site is going to be a professional site (with potential Japanese employers being one of the primary audiences), I decided to go with a right-aligned set up. The reason? First is due to many people having the mouse and cursor start on the right side. Second is the fact that in Japan, most books and magazines open from right-to-left, even if the text is still in a left-to-right alignment.
I also decided to make div tags for the menu and the central portion of the page. The main text goes in the central panel, and the menu gets buttons that link to the site’s individual pages. I’m also using the change image effect via Javascript for the buttons to make the site look more sophisticated.
I’ve also finalized my pages. They are the main page, an About page featuring a short bio on myself and commentary on the site, my Resumé page, a Portfolio page, and a Links page.
At the moment the entire site looks like something puked out by the Nineties, but I just wanted everything up there. I also had to make sure my bio photo was properly sized. I did a bit of work with in terms of contrast and brightness, since the way the sunlight was hitting me in the photo made it less than ideal. I’m still having trouble with the more advanced features of GIMP, but I don’t think they’ll be a problem with regards to the site. I’m not aiming to make it image heavy.
On an unrelated note, I also put in text links, the copyright, and my e-mail address at the bottom of the central panel.
March 28
Screw it, if I can’t sign in this week, I’ll just put it in on my site.Most of the work for this week was done on the resumé page. To get everything arranged similarly to the Word version of my resumé, I decided to use tables, despite my earlier resrvations.
Those reservations were well-founded.
Seriously, it was such a pain manipulating the empty cells so that every line had the proper spacing! I had to make sure everything looked good on at least Firefox, Opera and Internet Explorer! Aligning each word vertically was also such a huge hassle! At least I managed to get everything to look the way I wanted it too.
I also decided to use collapsing text. I’m not too fond of pages that go below the fold, so I decided to use Javascript to have each section of the resumé (Education, Experience, Special Skills, References) be collapsible. The people I showed it to were impressed, so I kept it. I did hit a few snags when I forgot to change the numbers on a few of the Image IDs so that they would switch between the open and closed arrow images when clicked on, but that was easily fixed after looking at the code.
Of course I decided to include a link to the Word version of my resumé. After this, the basic layout should be done.
Anyways, by April 4 I was able to get back on the blog. Now, for this week, I worked on the borders for the panels and the images. I got rid of the borders for the menu links, which was easy. I also had no trouble with the borders for the title banner, the About page image, and the central panel. I wanted it to look like the banners and panels were piercing through the clouds (or at least floating above them) and to give the site a more three-dimensional texture. From what the people I’ve had testing the site tell me, it seems to have succeeded.
Speaking of clouds, I finally managed to find a solution to my background problem. Namely, make it on my own! Once again, I used GIMP’s paintbrush (with the “Use color from gradient” box checked) and blurring tools to create a cloudy GIF to use as a background. I used the GIMP tutorial site to show me how to do this.
As I mentioned above, I also had various people test out my site on their computers and browsers. Everything seems to be working fine, according to them. They went through every page and link so far to see if everything was working properly. I also tested the pages on various browsers, with the primary focus being on Opera, Firefox and IE. I also made sure that the layout effect in Opera that I mentioned in the March 14 post was still intact.
I couldn’t get permission from some of the organizations in the link page to use their images to use for the links to their sites. I’m considering using text effects, but I might just decide to skip it if it proves too difficult to implement.