Constandina Tutten's Weblog

Loved, LOVED Chapter 2 in The Principles of Beautiful Web Design, which was all about color.  For one because I am not the slightest bit artistic naturally so this is really neat stuff to learn about, and two, because this really appeals to the part of me that started out as a psychology major when I was an undergrad.  I really enjoyed learning about all the different kinds of color schemes.  I’m leaning towards doing a food-related website for our project, and color is something I’ve really been pondering.  In my head I envisioned a lot of brown.  I think I’d like to go with a monochromatic look.  Bottom line, I found this chapter really engrossing.  It has so far been my favorite thing to learn about.

For this week’s lessons, we visited the following websites:

webstyleguide.com: Really easy to use.  Laid out the whole table of contents and had lots of straightforward, easy to understand information.  The site itself was very “clean” and made use of a lot of white space.  I liked that there were not lots of distractions and fussy graphics that took away from how much useful information was available.

universalusability.com: Ooh, I think I liked this one even more than webstyleguide.com, even though it seemed to encompass a lot of the same sort of material, because the design of the site was so awesome.  It had pretty much the same layout, with the table of contents left-justified and not a whole lot of filler to confuse the eye, but the blue and yellow color scheme was so gorgeous.

jjg.net: Jesse James Garrett’s website.  Very simple design, a left-justified list of his published works, followed by articles he has written and interviews with him.  I particularly liked his article The Psychology of Navigation (Digital Web, 12/2002).

smashingmagazine.com: 50 great blog designs.  My favorites were Susay, which had a vertical navigaton bar that looked like sections of a notebook you could thumb through.  I’ve never seen a vertical menu before.  Dollarshort, which had a sort of unsophisticated nature/tree type of graphic, but all in fall colors which I am immediately drawn to.  Brad Frost’s Blog, which had kind of a cartoonish looking mouth graphic that the blog posts appeared in (ie, what is coming out of the author’s mouth; pretty inventive).  Clemente, which had what was referred to as a “vintage” look, kind of  like an antique manuscript/artwork/printing on vellum type of thing.  I like the idea of an “antique” looking format for very modern technology.  And Ollie Kavanagh, which had a purple and blue dominant look to it.  What really struck me is the photo of who I assume is the author that was so beautifully rendered on the page it looked almost 3-dimensional.  Some of these blogs were truly works of art.

Chapter 8 in Creating a Web Site deals with linking pages.  Honestly, this chapter did nothing but confuse me.  I was having a lot of trouble linking pages correctly when we did it during our class session at the beginning of the semester, even though I was fortunate in getting some helpful tips from a classmate.  It seemed like I was going about it the right way but I could not get my pages to link consistently.  While I had thought the rest of the chapters we’ve been assigned in this text have been very easy to follow, that was not the case for me with this one.  My plan is to go to the library this week to see if I can find some books specifically on Dreamweaver.  Hopefully I can find one that will clear things up for me a bit.

Chapter 7 in Creating a Web Site is all about graphics.  I felt like this was a chapter I should go over with a fine-toothed comb because this is where I got hung up in the past.  In other words, in our past exercises when I tried inserting graphics, I could not get them to render properly in my web page.  Now I think the problem is that I did not have the image I wanted to use in the correct folder.  It was also great to get some clarification on the various image formats and what the differences and advantages were to using gif vs. jpeg vs. png formats.  I had only recently even heard the term “png.”  I was compiling a slide show several months ago and scanning photos on a scanner I had not used much.  I inadvertently scanned one of my photos as a pdf (and then could not go back and re-scan the original photo because I had borrowed it from someone) and then was unable to use it in the slide show.  My computer genius brother was able to convert the image to a png for me so that I was able to use it.  According to said brother, png is an acronym for “permanent network graphic” (I did not see that spelled out in the textbook).  The chapter also discussed such topics as graphical text, background images, and sizing images correctly.  I feel like I have a much better grasp of how to work with graphics having gotten through this chapter.

Since I already read ahead earlier in the semester and commented on Chapter 1 in The Principles of Beautiful Web Design, I am not going to post any further discussion here.

In the 6th chapter of Creating a Web Site, we learned what seems to be like everything there could possibly be to know about style sheets.  To being with, we learned the difference between external, internal, and inline style sheets.  Clearly I will be using the external type in my own website.  I read about the reasons why it might at times be preferable to use the internal and inline versions but I still really don’t understand why it would not as a general rule make more sense to always use the external type.  I really like the idea that any changes you make to the style sheets are reflected consistently throughout the website, rather than having to go in and edit element by element.  I was interested to learn why style sheets are referred to as “cascading.”  The visual I had in my head is that the formatting rules were put in place on the index page and “cascaded” down to the rest of the pages (rather like seeing all of the pages in a website scroll down and the rules spilling over to each new page.  If that makes any sense).  I was way off base there, since “cascading” evidently refers to which rules dictate how a web page will end up looking if there are various, conflicting sets of rules in place.  And this too appeals to my sense of not liking to leave things up to chance.  I also think the idea that this could be worked to my advantage, if I wanted to override one particular element on one particular page, is pretty interesting.  This chapter also discussed rules about inheritance and class selectors, and I also found the discussion about colors interesting (because there are so many, and I think it’s neat that you can dictate a color that is so precisely specific when there are 16.7 million colors possible in the RGM system).  What I found really interesting was the information about fonts.  Again, something I assumed would be the “easy” part about designing a website, before I understood how many variables go into fonts, sizing, spacing, etc., when you have to take into account that your site will be viewed on any of a number of browsers or phones or whatever visitors to your site are using.

Chapter 5 in Creating a Web Site is entitled “XHTML Text Elements.”  AT this point this is starting to get somewhat complicated for me, I’ll admit, but I’m trying to take it slow and pay attention to what I’m reading and the examples.  I liked that the text very clearly points out the difference between structuring a page (for example, breaking a whole pages of text into paragraphs) and formatting a page (like going in and putting all of those paragraphs into italics).  Until now  I considered those terms to be interchangeable.  This chapter also introduces the concept of cascading style sheets, which I’m glad we had the opportunity to go over in our mandatory class meeting.  And given my rather limited technical expertise I like the idea of style sheets.  They seem like a real time (and sanity) saver and a great way to ensure a consistent look to all the pages in a website.  This chapter also discusses formatting processes such as proper spacing, bulleted lists, italics, bold text, subscript and superscript, and even special characters and how to format text in a foreign language.

Icann.org – The website for the Internet Corporation for Assigned Names and Numbers.  This is a private entity that is responsible for coordinating the ip addresses and domain names of all content on the internet with the goal of making it equally accessible to users worldwide.  Pretty interesting stuff.  I remember when I played around with building a website several years ago and spending a considerable amount of time coming up with what I felt was the right domain name; it must be a monumental task to maintain any kind of order when it comes to the millions of websites online today.  One term I heard for the first time on this website was the term, “whois information.”  I actually researched it on some other websites and I now realize that the term, pronounced “who is,” is the information linking a particular person to a particular website, and that it is important to maintain the security of this type of information.  The Icann website itself had a very clean, spare look, mostly white with shades of blue for contrast, in a 3 column formart.  It was very user friendly.

Internettrafficreport.com – This website displays information regarding the reliability of the internet.  The site is updated every 5 minutes and lists both indexes both globally and by continent.  The index is measured on a scale from 0-100 where 100 is the fastest and most reliable internet speed.  One of the things I learned on this site is that the test used to measure connection speed is called a “ping.”  I was interested to read an actual definition of this term because I’ve heard it used so many times when I’ve been on the phone with tech support for my high speed internet at home.  The website itself was quite spare with only a few pages and a 2 column layout.  No a whole lot of graphics to distract.

Internetworldstats.com – This is a REALLY information-dense site.  It displays what appears to be every possible kind of information relating to internet usage, both worldwide and by country.  There are also links to various other relevant sites (such as icann.com) as well as many coaching sites.  Graphically, the site uses a lot of blue text and yellow accents, which I would think would be distracting (I would think with such a vast amount of information it would be preferable to stick with regular black text on white for greater ease in reading) but it actually seems to work quite well.

Caida.org – The website of The Cooperative Association for Internet Data Analysis.  This site is dealing with internet research that is really detailed and technical.  It seems clearly geared more toward someone who is not a novice with this kind of stuff.  Whereas a site like internettrafficreport.com was very user-friendly and easy for me to read through and understand with even my limited technical skills, caida.org was somewhat intimidating.  A lot of small text and complicated technical jargon.  I don’t think I would want to go back to this site unless it was an absolute requirement.

Pewresearch.org – This site is awesome!  The logo at the top of the page reads “the numbers, facts, and trends shaping your world,” and it seems to be a complete free-for-all of information that is relevant NOW.  And not just in terms of internet technology, but in terms of politics, social issues, and the whole gamut of other things.  I can see where a website like this would be a huge resource in terms of coming up with a website design that is filled with up to the minute appeal.  The site is a 3 column design, not a whole lot in the way of graphics, with links to tons and tons of articles as well as interactive features like surveys.  I will be viewing this site extensively in the future, just because of how interesting it is.

Nielsen-netratings.com – Another site offering various tools for understanding the online consumer in order to optimize the impact of your web site.  Still a lot of technical information, but not as intimidating as caida.org.  3 column design, black text, lots of accents in shades of light blue.  I think that made the site a little”calmer” and easier for me to look at without getting nervous about how detailed it was.

USF Web Style Guidelines – All of the information including copyright, acceptable use, etc., that we need to be aware of when designing a web site and posting the information on USF’s web space. An easy to view 2 column design on this page.

This week we were assigned to visit and critique the websites www.w3.com and www.w3/schools.  Let me just say that I thought the w3 (otherwise known as the World Wide Web Consortium) website,  was awesome.   It is set in a 3-column format and even though it contains a vast amount of information, it still gives the impression of being uncluttered.  It was really easy to navigate around the site.  I was interested to read in one of the more recent briefs posted that there is currently a program in development called EmotionML, which is a markup language that it going to take user emotion and personality into account.  I think this concept is kind of mind-boggling and can only imagine what imlications it could end up having.  I also read up on the member organizations that comprise the W3.  I was interested to see that Mitre was one of the founding members of the Consortium, and I say that because my dad works for Mitre; it was neat to get his perspective on some of the information I obtained from the W3 site.  I also read up on the history of the W3 and of the web in general.  I am absoluely in awe of people like Tim Berners-Lee.

The other site we visited contained links for various tutorials, and I ran though those for HTML, XHTML, CSS, and the tutorial on building a website.  Again, the site itself was extremely user friendly, all of the links to the tutorials appeared in the left column of the home page and the design was clean and free of needless distractions.  The tutorials themselves were great.  Clearly geared toward the novice web designer.  I feel like I would have been able to follow them fine even if I hadn’t already had some background knowledge under my belt.

Chapter 4 in Creating a Web Site is all about the various types of web design software and how to use them.  In view of the fact that using a text editor to create HTML pages is tedious and prone to user error, most web designers graduate to more sophisticated programs once they’ve learned the basics.  The text did stress that learning HTML from scratch, from the ground up, is still really important, and I agree.  I think I would have been lost if I hadn’t obtained the basic knowledge before delving into this chapter.  There are evidently several choices when it comes to web editin software, ranging from the free to the 3-figure ones.  The free editors recommended were Nvu, Amaya, HTML-Kit, and CoffeeCup Free HTML Editor.  The downsides noted associated with using the free software ranged from being less on the user-friendly side than the more expensive editors, as well as a lack of technical support (Nvu, as the software has not had developers working on it for the past several years).  The text went on to explain that at present, the 2 most widely used “top-tier” text editors are Adobe Dreamweaver and Microsoft Expression Web and gave a breakdown of how to complete the foundation tasks of building individual web pages, managing groups of pages to create a single website, and uploading finished material to the web.  I am sooooo glad we were able to walk through this information step-by-step in our class.  Though I admittedly griped a little about the trip to Tampa, because I live in St. Augustine and it was a 3.5 hour drive each way, it was so worth it.  The only issue I ran into with building the various web pages was the process of linking each page to the other.  I tried to follow along with the instructor and also, thankfully, had some assistance from a helpful classmate who knew a heck of a lot more about this stuff than me, but I still could not get my pages to link together properly.  I am currently using the free trial version of Dreamweaver on my home computer while I wait for the regular version that I ordered to arrive, so I think I need to hit the manual and delve a little deeper into where I’m going wrong.