Learning with Video is the Way...

...For me at least.

Last week at work some co-workers made a little video one-minute video about the library to put on our website as an introduction for new employees of the organization. Later, I learned in a staff meeting that the video had been posted on YouTube and then embedded into the webpage because the web guy didn't know Flash and hadn't been able to figure out how to build a video player to be hosted on our own server. After the meeting, I found a two video tutorials (video 1, video 2) on Adobe.com that explained how to do this and sent the links to the web guy.

This weekend, I watched the tutorials, and then built myself a Flash player using Dreamweaver. It took about two and a half hours from start to finish, including the video encoding time, and wasn't hard at all.

Inspired by all of this free, online video learning, I also watched a tutorial of how to use the Bridge (I guess I can cross one thing off the list already). Even though the software is really basic, its made it much easier to manage all of the images that we have on our site.

I want to take my html/css knowledge up a few notches, from intermediate to a rock-solid dependable skill set, and I need to figure out what my next learning resource will be to achieve css mastery. I don't want to only half-learn it before I move on to Database Management and CS50. I've looked at a bunch of books on Amazon (if you know my name you can check out my wishlist) but I can't decide what what to get. I wish Head First had an advanced book, but that would go against the point of the series.

Any suggestions?

Harvard rocks

Before I get started with this week's post, I want to say two things:

1. Shane's presentation was the most engaging and informative 45 minutes I've had at CSC in a long time. He's able to communicate the convergence of theory and practice in a realistic and unforced way. He is doing exactly what I want to do, and is a great role model to have in the community.


2. I am so proud of Nick's increased excitement in the MLIS program after Shane's visit. Finally he is starting to believe all the things (Joyce and) I tell him about the desirability of all his skills he thinks are no big deal. :)

Now on to why Harvard rocks:

Open courseware is blowing my mind. A few months ago, at the beginning of the semester, I downloaded several courses from the iTunes U store from Harvard and MIT. This week I started watching Harvard's CS50: Intro to Computing, and it is amazing. The professor, David Malan, is wonderful and has a great way of using analogies and creative demonstrations to illuminate a concept. The Fall 2007 version of the course (that I am watching) is available at cs50.tv, and this semester's version of the course (happening right now) is at cs50.net. The best part of the course podcasts is that all the supporting material is also available online -- the syllabus, assignments, notes, slides, quizzes and solutions.

This open courseware discovery has really improved my feeling about large research institutions, particularly Harvard, Yale, or MIT -- not only in terms of reaching outside the Ivory Tower, but also in terms of teaching and learning support for undergraduates. Harvard has quickly gone from a school that I would never consider attending to one that has earned my attention.

I would really like to bring the Harvard CS50 course into my education at St. Kate's. Maybe an independent study where I follow the CS50 curriculum? (Whatd'ya think, Joyce? You up for it? We could learn together -- the class starts with C and ends with PHP.) There is also the possibility of taking a Harvard summer or continuing ed class online for credit and transferring it back to St. Kate's (although CS50 isn't offered that way).

I've made myself stop watching the podcast because I have other homework to do, and because I'm hoping that the next time I start watching it I'll be getting credit for it.

Teamwork

Nick's right. We have totally different working styles, but as the project has come along, we've learned a lot about how each of us prefers to work, and the aspects of a project that are important to each of us. We've hashed everything out, and in the process, managed to keep our strong friendship. I understand now how our learning styles have really impacted our experience: Nick is not a visually-oriented person, and I am very much so. Especially with the extensive css-retooling of the site, these preferences have really become prominent. Combined with my perfectionistic tendencies and over-achiever drive, I can sometimes be an intense partner to work with, and Nick has handled this well, at times not afraid to push back or stand his ground. Websites are rarely made in isolation (at least the good ones aren't) and I think the kind of butting heads teamwork that Nick and I have experienced is not only common in web development but also leads to a better product.

1 Trick Pony

I look at websites completely differently now.

It's not that I just starting admiring or noticing websites and paying attention to the ones that impress me with their functional designs. I've always done that.

No, it's that when I see one of those websites, now I think "I want to learn how to do that!" The more I master css, the more I think that I might be able to teach myself some other languages and technologies. I don't want to be a one-trick-xhtml-and-css-pony. I've made myself a list of what's next:

1. dhtml
2. javascript
3. php
4. python
5. asp
6. ajax

And that's not even mentioning the database management class next semester that will give me a better understanding of Access and at least an introduction to SQL. And Flash is starting to interest me a bit -- when it's done well (which is rare.) And I also really want to figure out how to use the Bridge in CS3 so that I can have full integration between Photoshop and Dreamweaver. There's a video tutorial about that on lynda.com but it costs money...

Web Design Tip of the Week

What do you do when you've made a nice sketch of what you want your website to look like, but you don't have enough time to build it because you're too busy being a kick-ass design firm?

You animate your sketch and throw it up on the web.

Taking Shape.

I feel like my css knowledge is finally starting to knit itself together into a more cohesive, intuitive understanding.

This week, when I realized that the image file for the search button was corrupted and could not be repaired, and that even if I made a replacement image it would still be an image and not be readable if the browser was sized up, I instead replaced that image with an all-css-styled xhtml button.

Although writing the code for the button took only about two minutes, I spent another hour figuring out what inheritance and competing code issues were getting in the way of the browser displaying the new style. But the real point is that i did figure it out, and the button does work, and also fits with our design theme.

It's hard for me that we won't get to redo the entire site (beyond the scope) and that we won't be able to take the site much farther stylistically (beyond the time frame). Part of me wishes that we were doing a site that was a bit flashier, but I know that we are also doing a very *useable* site, and while that is ultimately more important, it doesn't feel very glam.

Validation.

I went through css hell and back again this week.

And reading through online posts for help, I discovered that generally there are two schools of thought on old-school html vs. new school xhtml: why bother to convert to css/who-the-f***-cares vs. standards rule/I'm-more-compliant-than-you-are!

And I found out I am in the latter camp (somewhat begrudgingly).

Working with tables, I was about to pull my hair out, and working with css is the same way, only with a small, dim light at the end of the tunnel.

As a big proponent of interoperability (of all kinds), I understand the need for standards.

Additionally, it's somewhat akin to learning art techniques... You don't necessarily have to know the rules to break them, but knowing the rules allows you to break them with intention, panache, and an understanding of the consequences that follow.

That said, the css/xhtml learning curve is steep...

Web Gratitude

This week I really got down to working on the website project for class. I spent hours on the cataloging interface page and created many text boxes for the advanced search features. Nick and I had decided that anything that was beyond the scope of the class would just be represented with an image rather than functional code, but I can't help it... I had working text boxes and I wanted to add the feature Nick and I planned on in the mockups -- dynamic default text that disappears when the user clicks on the box, and reappears if the user leaves the box without entering anything. It was relatively easy to find a tutorial that would walk me through the steps of creating my own code of having the text disappear on focus, but I couldn't get the text to reappear when the user left the box empty and clicked outside the box (or in another box).

This whole week I turned over the problem in my head, doing research on my lunch break. I would go to bed at night, and I couldn't stop thinking about html -- my wife even made up an html-related lullaby to try to keep my head from exploding.

Then I stumbled upon the onblur attribute of the input element, and I knew I'd found the mate the the onfocus attribute that I'd already used to clear the default text from the box. Over several hours last night, I tweaked my guesses at the code until it worked -- effectively by reversing the code for the onfocus event. Here's the working box.

This whole week, devoted to getting text to disappear and reappear in a box, gave me a new respect for web developers and how complicated it is the code all the fancy tricks that I take for granted as a web user. All that little stuff that creates a positive user experience is a lot of time and effort!

Usability Testing

This week I sat in on usability testing for a redesign of our homepage where I work. I was fascinated by the fact that the user sped through the ten tasks in the test in about two minutes, when I imagine that it would have taken her about 20 minutes to find the same items on the previous website. (If she hadn't given up already).

The difference in the pages is like night and day -- the designers have managed to take a page that was pretty much a static homepage a la 1993 and turn it into an actually useful portal of frequently used links and content. However, there were still issues related to terminology. The only times the user was confused was when she was looking for information that used jargon that she was unfamiliar with, or when the terminology used in the test prompts was different from, although synonymous to, terms used on the site itself.

Watching this user navigate through confusing terms reinforced my decision to use the heading "our materials" as opposed to "catalog" in the project website. "Materials" has a broader connotation than "catalog", and it's more representative of the website offerings that go beyond a mere online catalog. This is especially important since all the library's items have only been minimally cataloged, and do not have strong subject cataloging or other descriptors that help make catalog searching powerful. That is why the featured materials highlights and subject guides are so necessary for the collection; it's in desperate need of curation to make up for the bare-bones cataloging that often renders many of the items inaccessible in catalog searches.

Web Accessibility

Because I promised...

I'm glad that all of our assigned texts stress the importance of web accessibility and view it as a requirement of competent web design.

However, I am so ready to have the conversation move beyond screen readers.

I understand the focus on vision impairment because the Web is primarily a visual medium. But even within the community of people with visual impairments, screen readers are not the whole story. People with low or no vision may use magnifiers, software overrides for high contrast page displays, adaptive mouses, or braille keyboards. Web designers are not immune from the verbal laziness that accounts for many people using the term screen reader to encompass the entire concept of web accessibility.

Going beyond screen readers also means web design for people with disabilities other than visual impairment. This includes people who are hard-of-hearing or deaf, have physical impairments, cognitive impairments or differences, communication disabilities, epilepsy or other seizure disorders, or a combination of disabilities.

Traditionally, web designers have paid very little attention to the needs of users with cognitive disabilities. As a former special education instructor, I vividly remember the 30 minutes I spent on election day trying to explain to an 18-year-old student with cognitive disabilities that his participation in an online survey at www.vote.com was not the same thing as officially casting a ballot in the presidential election.

And for anyone who is reading this and thinking:
But how many different kinds of users are we supposed to be designing for?
Will accessible web design detract from the experience of users without disabilities?

My response is this:
Designing with accessibility in mind is creating good, universal design. Universal design is design that enhances the online experience of all users.

Improving a site's accessibility for individuals who are blind also improves its accessibility to individuals who access the web in environments that prohibit visual web surfing, such as in the car. Improving a site's accessibility for individuals who do not have use of their hands also improves its accessibility for individuals who must use their hands for other things while accessing the web. - Web Accessibility In Mind

Not yet convinced about the importance of web accessibility?
Try these simulations:
(Note: Requires Shockwave plug-in and is not configured for FireFox3.)

• Screen reader simulation
• Low vision simulation
• Dyslexia simulation
• Distractibility simulation

Information Architecture in Web Design

What was the major thing I learned this week about myself as web designer?

I hate cluttered and wordy websites, and that ironically, these are often the websites one would expect to better better designed, such as W3C.org (and to a lesser degree the Information Architecture Institute). I look forward to learning more about information architecture -- maybe there's a reasoning behind all that cluttered text that I just don't understand yet.

What was the major thing I learned this week about the collaborative process?

I like taking on more than is reasonable, and Nick is good at keeping the scope to an appropriate level. "Scope Creep" is a term I've only learned in the last year, but I soon realized its an issue I've had since grade school. That's the perfectionist in me...

Concepts on deck...

Web accessibility.

Luckily the laziness of large retailers like Target is giving way to better accessibility for those with disabilities, but we have a long way to go. More on that next week.

LIS 7530: Introductory Entry

I currently work at the a special library in St Paul as the senior library assistant. Prior to my current position, I worked at the Jefferson-Madison Regional Library in Charlottesville, Virginia, and the Mills College Library in Oakland, California. I received my B.A. in psychology from Mills College and am halfway through the St. Kate's MLIS program.

My time at St Kate's has allowed me to entertain various career goals, and currently I am focusing on learning as much as I can from this class so that I can begin preparing for a career in information architecture and usability.

I have built simple webpages using HTML editors like Dreamweaver and iWeb, but I am excited to learn to code by hand. I would like to strengthen my HTML knowledge, so I can move on to learning other languages that will help me be more competitive in the post-graduation job market.

Thing #1

I created this blog. I had never made a blog before, but it was actually quite easy because the Things on a Stick directions were clearer than the Blogger directions, and I already had a Google Account and a Yahoo! account. I also already had a Yahoo! avatar created from using Yahoo! messenger at work. So far I like the way Blogger is fairly intuitive, and that things are easier to customize than in Myspace profiles.