Week 8 – Links

Here are some of the links from this week’s readings.  I’m playing catch-up, so everything is going to be out of order for a bit.  I just hope I can catch up quickly before I get too far behind.  Right now, I feel like I’m having to go back and redo a bunch that I already did, just because I was so spaced out for a week.  I guess heavy medications will do that.  I feel like I barely remember anything.  I just have to take a really deep breath and collect myself, I think.

Difference between ID and Class – This explains the difference between the two, why when need them, and when to use, or not use, each of them.

CSS Typography – This is an article from Digital Web Magazine on how CSS can help you with typography and why typography still matters in web design.

We also read another chapter in our textbook “The Principles of Beautiful Web Design”.

Links that others may find useful that we were referred to:

One of the coolest typography websites out there – www.ilovetypography.com.  I’ve linked to this on my old school blog for well over a year.  This website is just awesome.

Other articles:

• The Anatomy of Web Fonts
• Combined Font Survey Results – which fonts do users really have installed?
• Glossary of Font Terms – things like ascender, descender and x-height

As far as assignments, we were to work on the banners begun in week 5, an animated .GIF assignment, and our resumes.  I am still somewhere between week 6 and week 7 in trying to figure out where I am and where I’m supposed to be.  I hope to hear back from my professor within the next few days, because I don’t like feeling so clueless and brain dead.  I am now at day 4 of only ibuprofen.

I will catch up.  Somehow.

Week 6 – Links, etc

This week we discussed navigation methods and consistency.  We also started to delve into CSS a little bit.

With website navigation, consistency is key.  If there is one type of navigation and another type on the second page, you will confuse your users.  They won’t think it’s clever, they’ll be irritated.  Let’s face it.  When you build a website, it’s because you want people to visit.  If you irritate your users, you won’t have repeat visitation.  Therefore there are a few items you need to be aware of when designing a navigational scheme.  These are placement, design, readability, direction and hierarchy.  In addition, you must consider the navigational method you will use.  Your choices are images, rollovers, text links, or drop down menus.

CSS,  Cascading Style Sheets, are a set of predefined rules that affect a document.  They allow you to make mass changes within a document, or over a group of documents.  It is important to be specific in writing CSS.  The three main parts in a CSS rule are the selector, the property and the value.

Here are the links to various websites and videos that we visted and/or watched this week.  If I have any additional comments, I will put them with the link.

On this page, Matt Brown of Adobe, talks about good website design.  He lists several links at the bottom of the article that are also good resources – except that one is no longer valid.  Obviously he needs to take some of his own advice about usability.  I’m including the three that I found most helpful.

• Vincent Flanders – I’ve linked to his website before, but it bears another mention.
• Robin Williams – No, not the comedian.
• Jakob Nielsen – This link is to a page that Mr. Brown specifically recommends.

These two, also from Jakob Nielsen, were directly assigned.  I’d never heard the term “breadcrumb navigation” before, but I’ve seen it used and it’s something I greatly appreciate, particularly on large, complex websites.

• Breadcrumb Navigation Increasingly Useful
• Fresh vs. Familiar: How Aggressively to Redesign

Examples of Traditional Navigational Styles:

Column based navigation with text links:

• http://www.cnn.com/
• http://www.baltimoresun.com/

Dynamic Drop Down:

• http://www.monster.com/

Basic Navigation with subnavigation menus:

• http://www.macys.com/

CSS-driven text navigation with subnavigation menus:

• http://www.peta.com/
• http://www.baltimore.org/

Breadcrumb text navigation:

• http://www.peachpit.com/articles/article.aspx?p=664662

I need now to finish up revising my banner assignment, plus adding a couple things to my resume.  I haven’t got a couple of the things asked for, though, so that may pose a problem.  Additionally, I broke another tooth earlier this evening and it is killing me.  Time to call the dentist.  I’d hoped nothing would happen until my next appointment, but that’s 2 weeks away.

Meeting with Mimi Stoops at 9am on Thursday.  I do not like this.

Final Project Proposals

For this class, we have a rather large, important final project.  Basically, we are to design a website from start to finish.  The website can be for a small business, a local charity, a community group, or our own portfolio.  I have a couple ideas I’m mulling around.

The one I’d most like to do is a new website for Annapolis Biscotti.  I’ve worked for the company on and off for just over 4 years.  Currently the company has nothing more than a placeholder.  The owner, Heather, and I have discussed bringing the business to the web, including online ordering and shipping.  I truly believe this is what she needs to do in order to keep the business viable.  I have some photographs that I took during production over a year ago.  I could easily take more the next time we bake, plus I believe Heather has promotional literature that I could draw from.  There would be pages that would discuss the history of the company, the baking process/ingredients, where to find the product locally, and, of course, a way to order biscotti.  The problems I foresee are keeping the site within the parameters of the assignment and pinning Heather down long enough to get the information I need.  Currently, her email is bouncing and she hasn’t returned my phone call.  She may, however, be out of town again.  She does travel fairly often.

My second option would be a portfolio website for myself.  I do have some content already, from the classes I’ve taken at AACC.  As I’m currently taking two classes this semester, that will give me additional content beyond what I already have.  I could easily scan in some of my film photography, since those photographs are quite different in style from my digital photos.

I had been using my original school blog as a sort of mini-portfolio, but a more professional site would definitely be a benefit, should I ever start working in this field.

Week 5 Links

I’ve decided that the Educational Links list on the sidebar is getting a little too crowded, so from now on I’m going to list the weekly links in a post.  I’ll have them tagged as Weekly Links so that they’ll be easier to find.

This week we’ve started reading more about CSS.  We’re also still reading about things you should never do when designing a web page.

Guidelines for Visualizing Links

Top Ten Mistakes in Web Design

AdobeTV|Dreamweaver CS4:  Styling Text in the CSS Property Inspector

Links from Chapter 3 in The Principles of Beautiful Web Design, by Jason Beard, which is all about texture in web design:

• Flip Flop Flyin
• Six Apart
• Proposed specs for the next version of CSS
• Creating Custom Corners & Borders by Søren Madsen
• Thrashbox by Ryan Thriash
• Nifty Corners by Alessandro Fulciniti
• Nifty Corners Cube
• Spiffy Corners by Greg Johnson
• Spanky Corners by Alex Walker
• Fish Marketing
• CSS Drop Shadows II: Fuzzy Shadows by Sergio Villarreal
• Easy CSS Drop shadows
• Nuby on Rails
• Making IE 5+ use background-attachment: fixed
• Veerle Pieters’ blog
• What are application skins?
• Tattered Fly
• That Wicked Worn Look
• Jason Santa Maria
• Yes Insurance
• Let’s Play Music
• What is Web 2.0?
• Mozilla
• New Bamboo – use of gradients and whitespace
• The Photoshop Anthology: 101 Web Design Tips, Tricks and Techniques

Stock Photography Websites:

• Getty Images
• Jupiter Images
• Fotosearch
• Corbis Images
• Shutterstock
• iStockphoto

Week 4 Links

Adobe Videos:

• Understanding Fireworks
• Fireworks Interface
• Importing and Exporting Images
• Smart Guides and Tool Tips
• Using Kuler Colour Themes
• Understanding Styles and Symbols

International Advertising Bureau

Color Matters – Symbolism

Colorstrology

Color in Motion

Adobe’s Kuler

Video: Using Kuler

Webpagesthatsuck.com

Videos: Navigation issues

Video: Ridiculously bad navigation

Mystery Meat Navigation

The 10 Worst Web Site Uses of Navigation for 2008

Nominations for some of 2009’s worst

Article Summarization

One of our assignments this week was to read the article Speed Up Your Website with Better Image Optimization in Photoshop.  How’s that for a mouthful?

Basically the article is about how to get the best loading speed for images without sacrificing too much quality.  Let’s face it, we want people to see what we have taken the time to put on our websites, but if load times are arduous, many people will say to heck with it, and they’ll go elsewhere.

The first, and main point the article makes, is that you should never use the Save or Save As functions in Photoshop.  Instead, Save For Web & Devices will give you much more control while also giving you the ability to preview how your image will appear under different compression algorithms.  It will also tell you the final size of your file for each option, whether you choose to safe as a .jpg, a .gif, or a .png.

What you’ll want to choose will depend on the type of image you are working with, but no matter what that is, definitely give it some thought instead of blindly doing a Save.  Not only will your readers thank you, but if you pay by bandwidth, it could save you a considerable amount of money over time.

Week 3

It seemed to work pretty well last week, so I think I’ll just copy over my preliminary notes.

Absolute v relative links:

• Absolute links include the full website address.  Relative links usually only include the final bit and are dependent on the directory structure of the website.  They can be viewed locally on the computer (offline) as well as online.  They can be just about any type of file, though only some of them can be opened in a browser.  Other types of files will be downloaded

An IMG tag is the most common way to add graphics to an html page.  Web standard for graphics is 72 dpi.

There are 2 main types of files used.

• JPEG – joint photographic experts group.  Compression is “lossy”, which means that it throws away subtle colour differences.  The larger a file size, the better the quality, and vice versa.  It’s important to find a balance between quality and size, but you have to remember that once an image has been compressed (and saved), the compression can’t be reversed.
• GIF – graphic interchange format.  It uses a compression algorithm and it is a lossless compression.  It’s better for type, vector, flat or hard-edged images.  It can also handle animation.
• PNG is less standardized, but is becoming more common.  They’re larger than GIF files and do not always display properly in older browsers.  This means you have to create 2 different files to substitute an alternative.

I have an article and a book chapter to summarize, which I post separately.

We’re also getting started with Fireworks this week.  Fireworks is something I knew absolutely nothing about, but it’s really cool.  You can work with both vector images and bitmaps in the same program.  That’s just crazy talk there.

Fireworks CS4 can import Photoshop files and still maintain all of the information, including layer hierarchy.  I’m stunned.  This is going to take a little while to process.

Week 2

This week I took notes while I watched some of the tutorial videos on lynda.com.  By the way, if you have a need to learn just about any type of technical or creative software on the market, check them out.  There are some free videos available or you can subscribe to their service.  Considering the cost of purchasing training videos or taking an actual class, the cost is quite reasonable.

Anyway, back to my notes.  I’ve decided to just post them as I wrote them, with some slight editing for spelling errors that happened due to the speed at which I was typing.

• When you put an image on a page, or link to another file, Dreamweaver puts code on the page which then tells the browser where it can find the file or image.  If you move things around outside of Dreamweaver, you would have to make any changes manually.  If you do it via the file panel, Dreamweaver updates all the links automatically.  It also updates the links on other pages that link to that page.
• You can create new files and folders through the Files panel.  If you create a new file, always remember to add the extension, such as .html.
• It’s possible to change the Document Type Declaration if you mess up or if you bring in a page from an old website.  Dreamweaver will change the coding so that the page will then have the correct standards for the new DTD.

This is really just the tip of the iceburg.  I had yet another root canal, making me a bit fuzzy headed again this week.  I’m still on penicillin for the abscessed tooth, but even so, I think everything is really starting to sink in.  I may enjoy this class yet.  My main hope is that I will no longer fear coding, and so far, it’s looking a little less scary each day.

Week 1 Summary

I’m starting off at a slight disadvantage. I’d forgotten just how much it hurts to have a root canal – and I had two of them on Thursday. I’m not exactly sure how much I’ll retain from the readings this week. It’s a good thing I read quickly, as I’m sure I’ll have to reread everything.

Speaking of reading, here are two of the articles we read. The first is a review of 25 coding editors, including Dreamweaver. The second explains FTP software.

I still need to build my first webpage that isn’t a blog.

As part of our class requirements, we needed a subscription to Lynda.com. This is a site that Deke McLelland is always recommending, and I’ve taken advantage of several of the free tutorials on the site before. I definitely suggest checking them out. There is an enormous amount of information there on everything from the Adobe suite of products to basics like Excel and Word.

One of our tutorials suggested that we check out W3C – the World Wide Web Consortium. On this site, you can find out exactly what xHTML is and why it’s better than HTML. Under W3C A to Z are most of the topics that one would need for this or any other web design course.

Oh, and before I sign off, remember, the internet and the World Wide Web are not the same thing. The Internet is basically a whole bunch of networks. The Web is the documents, or pages, contained on those networks.

CAT 274

Hey guys! It’s a new semester and I’m back with two new classes. For one of my classes, I am required to blog. This makes me happy, since blogging is fun.

This semester, I am taking CAT 274, which is actually Web Design, and Art 120, Digital Photography. I’m guessing this blog and my main blog will both go through some changes over the next several months as I learn how to accomplish things beyond the templates available.

I may be required to move this blog over to WordPress. I do hope not, but if I do, I will link any new blog back to this one.

We are supposed to post a photo of ourselves. I am in the process of having a lot of dental work done, so I don’t smile in photos yet. This pic is of myself (on the left) and my friend Anne. It was taken at the Borders in Chapel Hill, NC, the day after Christmas.