|
|
Well crud. I tried to use text effects on the links as I mentioned previously, but they all made everything look tacky combined with the colors of the page. I’ll have to leave the links as regular ones. Hah, well, some things can’t be helped. At least the regular links look fine, even if they do look a bit plain.
The About page also has a new addition. I added the Site Commentary, as required, as well as a link to this blog at the end of the commentary. I also kept the collapsing text for that page to keep everything above the fold. I was planning on removing the collapsing text, but the commentary wound up being longer than I thought it would. I really should have expected that.
Overall, I’m pretty satisfied with how the page turned out. Like I said in the commentary, the website was the most satisfying project I’ve done this semester. All of the instructional material was pretty easy to understand, so I really had no problems on that side. I suppose most of the problems I ran into was because I decided to hand-code everything in Notepad first before transferring and working on it further in Dreamweaver. That led to a lot of mistakes in the HTML. As I said in the face-to-face meeting, it was a habit that developed due to Dreamweaver arriving late in the mail. I wonder if I should try to break it. Writing the HTML did make it easier for me to understand things.
Well, that’s about it. Check out my site. I think I’d like to go further with it sometime. Maybe I’ll take Internet Architecture next.
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.
Ugh, finally! I was unable to post in the previous lessons because of problems being able to access my blog. Maybe I should have just stuck with Blogger for this. In any event, I’ve pretty much gotten all of the lessons thus far, plus I have the basic layout of my site. The only problem now is just getting my site to look right. First, I’m still having a bit of disconnect with pixel size. I’m still having trouble visualizing like, say, a box in my mind and then connecting that with x number of pixels in size and distance from the header. I really don’t want to use percentages for sizing and distance purposes. Second, I’m also having trouble finding the right background images to use for tiles on my site. I suppose I’ll just have to keep looking.
This was another reading that I was looking forward to since I wanted fancy buttons and collapsible menus for my website project. I was rather glad to find that the book listed a site where one could just generate buttons. I was afraid I would have to do it myself on an image editing program. The fact that there is also something for menus was also appreciated, though I was glad that the book had the steps down for the Javascript code. It made it easier to understand how the things work.
I’ll have to agree with the book on how annoying BGMs and sound effects on websites can be most of the time. It’s really rare that I find a site that does those things well. In any event, I was surprised that there were sites that offered to store and stream videos for people for free. I’ll have to look some of those up just in case.
Links for Lesson 8 that I liked (skipping WikiProject since I already know about it):
Footnote.com – Actually, I already knew about this, but I’m just linking it since I like it so much.
Libraryspot.com Image Resources
Read Write Web
This week’s readings were just what I was waiting for. While I’m not aiming to become a Javascript guru, I wanted to at least have some basic idea about it. Chapter 14 was a bit difficult to get through at first and did have some questions I was going to put up here, but at the end I did manage to understand it. I still have a bit of disconnect between the definition of HTML objects given in the book. Maybe I just need it explained in different words?
Chapter 13 was also interesting to read. I never really realized that AdSense is pretty customizable or that Amazon Associates can be that non-intrusive. Before reading the chapter I wouldn’t have bothered with putting ads on a site. Now I’m more open to the idea. On a somewhat amusing note, when I finished with the section on PayPal, they sent me an e-mail stating that they were about to close my account.
Lesson 7 sites I liked:
http://www.rsub.com/typographic/ – I liked this site. Informative without being overwhelming, plus it looks good and is easy to navigate.
http://ilovetypography.com/ – I Love Typography is another good resource. A bit more detailed than the previous site.
This week’s readings have peaked my curiosity towards typography. I didn’t even know there were specialized terms for letterforms, but I really should have expected it. I’ll probably go find some more readings on the history of typography when I have time. I also need to download the Arcade dingbat font. A question, though. Did the maker of that font get permission from the companies that own the characters in the font? I mean, there’s Mario, Pac-Man, Q-bert, the Galaga ship. . . I hope Nintendo’s lawyer ninjas haven’t, er, disposed of the creator.
Ugh, web rings. I always thought those things were horribly tacky and annoying to navigate through. I was pretty unsure about directories. They look rather, er, unimpressive, but after reading the chapter in the book, I’m more willing to give them a try. The sections on meta tags and search engines were a lot more helpful and interesting. Finding out how Google ads worked was very interesting. I didn’t know that AdWords was competitively priced. The last section on tracking visitors was a bit sparse. Since there were no links to analysis programs in the book, I’m assuming they’re easy to find? I’d rather have recommendations so I don’t have to sift through the dross.
I was rather surprised and relieved that creating forms can be that easy. I was also already familiar with Google groups, though I was disappointed there was no other sections on forums and message boards. I would have liked to have known what other free forum hosting services are available, especially those that won’t have overly intrusive ads.
Placing the more helpful of the links for last week’s lesson here:
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
http://www.textureking.com/
http://urbandirty.com/
The Color Contrast site was quite helpful in selecting colors. The site itself was cluttered with ads, but the information and tools that could be found in it were helpful enough for it to be a good resource. The Color Wheel wasn’t a really good tool, though. Too randomized for my tastes. The Contrast Analyzer and Color Wizard were a lot more helpful. The latter had a lot of options to play around with, and, with a bit of reading on information on the site, I think anyone can use it. The Analyzer is a godsend. People can avoid inflicting headaches with horrible color combos!
As for week 5′s readings, I must say I found the chapter on tables to be more interesting than the one on frames. I’ll admit to being one of those people MacDonald mentions that were turned off by frames back in the 90s. A lot of them just seemed so tacky and rather annoying, especially for bookmarking. I don’t believe I’ll be using frames for the website project.
Still, the tables were a bit worrying. I was rather glad to find out that the style sheets allowed for more ease and flexibility.
The Web Style Guide looks interesting, but I might just borrow it from the library. Still, at least there’s a link to the companion site. Very helpful. Universal Usability was also a pleasant read. It pretty much matched everything I have ever read on user-centered design: simplicity, visibility, accessibility. For both sites there was a good deal that matched Donald A. Norman’s seven usability principles from his book The Design of Everyday Things, which is one of my favorite books on usability.
I found jjg.net to be helpful also, but was disappointed that the site was a bit more sparse than the previous two. Smashing Magazine’s 50 Excellent Blog Designs were interesting to look at also. Even with some of the designs that I wouldn’t use, like Sketchblog, they were still fascinating and enjoyable to look at.
One thing I would have liked to have seen in the color chapter of Principles of Beautiful Web Design is a reminder that cultural considerations should also be made when choosing colors, especially for sites with international visitors.
I think, for my website, I’ll go with a right-column navigation, with a light blue and white color scheme. Other pages will include a resume page, a page on my hobbies and interests, and maybe a small photo gallery.
Ah, ICANN. While I do know of them, I only mostly knew about their general task of assigning domain names and IP addresses (making sure that no two are the same) and that they did not police the Internet (thank the heavens). The minutiae of their tasks and duties were unknown to me. For example, I was unsure under who’s laws ICANN was under. I was thinking it was under the U.S., but considering the worldwide reach of the Net that there would be some more stake from other nations. I was surprised that my first guess was right. I imagine there were and are disputes over ICANN being under California law’s jurisdiction. Now, about the design of the page. It’s pretty well-organized and navigation is easy, with the pages being consistent with each other. Having a search function also helps. Considering that work is in the global stage, it was a good idea (heck, a necessary one) to offer the site in multiple, widely-used languages. For the most part, the contents of the About pages are easy to understand, but there might be some terms that will be a bit hard for some casual visitors to understand. Though I suppose there won’t be too many of those.
The Internet Traffic Support site is pretty good. It fits horizontally on all of my browsers , no matter what the size, thanks to the liquid width layout, though vertically there’s a bit of scrolling down necessary. However, that information is composed of graphs and the eyecatching and most vital information is first seen. As for the content, this is pretty helpful for research purposes and for people like me who look at sites based in other continents , though for certain areas (like Africa), it’s not too helpful. Plus it’s free.
I was a lot less forgiving about Internet World Stats, if only because I was immediately accosted by a small window asking if I wanted to join their newsletter. It’s one of my pet peeves. Plus clicking on the country links opens up another window (which is a second strike). A third strike is sticking related links in the contents on the main page, which not only lengthens the page, but makes it seem more unorganized. In any event, the content is more detailed than Internet Traffic Support’s. The content also takes in information from other sources, which they site. There seems t o be no FAQ, which makes it a bit harder to find information. Still, the charts are easy enough to understand, so users shouldn’t have too much of a problem making heads or tails of the page.
The last two sites also make it obvious that they weren’t made by web designers, especially when compared to the rest of the links. In any event, the two sites serve their purpose adequately.
The CAIDA page is all right. Again, the liquid width lets it fit on different sizes. All of the content on the main page is immediately visible. The drop down menus for the navigation bar also makes it easy to navigate. That being said, there is a lot more content for the site, which is expected, as it is a collection of various organizations involved in Internet infrastructure compared to the two previous sites, which are more limited in scope and obviously less active in developing the Internet . CAIDA’s collection of tools they developed for the purpose of analysis is also impressive. CAIDA also seems to be more involved in policy creation regarding the Internet. The contents are things like research papers, so it’s less friendly to the casual surfer and requires a great deal more thought. The site will probably be more useful for those in research. I’d certainly use it as a resource if I had to write a paper on, say, Internet infrastructure.
Pew is laid out very well. Of all of the sites, it seems to be the most organized. The advanced search is a welcome option as well. Still, there’s a bit of scrolling to do in the main page. While the most eye-catching news titles are still above the cut, some of it does require scrolling down. It’s not as focused as the other sites on internet statistics and covers information on a variety of topics. Their actual internet research focused site, Pew Internet and American Life Project, seems a bit more sparse on information on the main page, but clicking on the links leads to the pages where the actual reports can be downloaded. In terms of design, it doesn’t match the main Pew site, which gives it a lack of visual connection to the main site. I also rather dislike the lightly colored geometric designs randomly strewn about in the background. It makes the site look less professional.
Nielsen really doesn’t look good on Opera. The tabs on the main body don’t stay on a single line. Also, most of the main content is below the cut. It’s not too far down to scroll, though. Also, I find it highly amusing that some of their foreign sites are better designed than the main one. Of all of the information on the site, the one that caught my eye was Nielsen’s VideoCensus, if only because it left me wondering as to why it took them this long to start analyzing online videos.
The chapters for this week were also easy to understand. I don’t have any questions, since they were all covered by the face-to-face meeting. I also finally got Dreamweaver in the mail! Took long enough.
The W3School site was helpful. It’s very user-friendly, since the most necessary information is grouped in a visible and easy-to-understand manner. The colors are also not very eye-searing. Personally, of the help provided by the site, I found the do-it-yourself examples and the web building references sections to be more helpful than tutorials.
I found the W3C site more interesting. I’m really interested in learning more about XML and the Semantic Web. I’ve done some reading on them for previous classes, and I’d like to know more about the nitty gritty on them, but since this is a class on the basics, I suppose we won’t be covering them in-depth?
|
|
