Rachael's DHTML blog

A Farewell: The DHTML Journey

2008-12-09T19:35:00.002-07:00

Sixteen weeks ago my classmates and I ventured forth from the relative safety of our computer desks, and began a voyage of joy and frustration that we called DHTML. The first half of the journey was pretty smooth. The weather was fair and the road was mostly free of potholes.

On the second half of the journey, however, a giant black hole called JavaScript opened up and swallowed the entire class. That was kind of a bummer. But our passage through the black hole wasn’t completely in vain. It was, above all else, a bonding experience. I’ll never forget my comrades in arms and their valiant struggles against the beast. Their bravery and sleepless nights will go down in the annals of history as one of the finest accomplishments of this generation.

How does this great adventure end, you may ask? Well, I don’t really have the answer to that question yet (you can ask again on Monday after 4 o’clock). As for this traveler, however, I suspect that the journey stops there.

Events

2008-11-30T12:00:00.000-07:00

“Did you encounter problems?” Oh, come on. Of course I encountered problems. The key for me seems to be persistence. I just keep trying everything I can possibly think of, until something works. Sometimes it doesn’t make any logical sense why it works, but it works, and that’s better than nothing. I also look at everybody else’s to see how they got theirs to work, but that’s only good if someone has actually gotten it to function correctly. And like Jason, I use Firebug and if all else fails, I Google it. (I haven’t actually had much luck with that though.)

For me, events have started to make JavaScript more practical. A lot of the stuff we did before didn’t really seem to have much purpose. It was neat, but not really very useful. But with these last couple of assignments, we’ve been able not only to allow the user to input information that we take and process but also let the user control how they interact with our site. Now we’re really starting to see what JavaScript can do for us.

The DOM

2008-11-17T18:35:00.003-07:00

I read the W3Cs info on the DOM, but I have to say I didn’t find it particularly helpful. (They lost me pretty quickly.) Like most things the W3C does, it seems as if the main importance of the DOM is in standardization. If the rules are the same all the time, it’s easier for everyone to use—those developing the web, and those using the web. Browser vendors are forced to conform to a set of rules, and as a result, things like JavaScript run more efficiently across browsers. Everything works all the time, and everyone’s happy.

I, personally, am pretty neutral as far as the DOM is concerned. I don’t love it as much as, say, chocolate, and I don’t hate it as much as, for example, Nazi’s. So I guess it falls somewhere in the middle of that. Actually, it’s pretty logical, and for the most part, makes sense. The thing I think the book always leaves out is the practical application. I pretty much get the structure of it, but how do I use it? The example we did in class helped a little, but I really don’t think I’m understanding the true power of the DOM just yet.

(Sorry, I’d write a better posting, but all my brain power is currently reserved for JavaScript use.)

JavaScript

2008-10-31T14:30:00.002-06:00

I equate JavaScript with trying to learn a new language: I don’t understand it a lot of the time, but the more I practice the better I’ll get. I seem to be at a place right now, where all the individual pieces sort of make sense, but I can’t quite put them all together in any sort of logical manner. It’s sort of the equivalent of baby talk, hopefully by the end of the semester I’ll be up to speaking in complete sentences.

Contrary to popular misconception, Java and JavaScript are not the same thing. Java is a programming language that creates stand-alone applications, and JavaScript is a scripting language that has to be placed inside an HTML document to work. (Here’s a short article that explains the differences pretty well: http://www.dannyg.com/ref/javavsjavascript.html if you can ignore the comic sans-ish type face in the title.)

What really hurt JavaScript (besides the rather unfortunate name that is always confusing people) is that there were no standards early on. JavaScript would work completely differently in the different browsers. It was a nightmare to try to get your JavaScript to work right for all users. But now that they’ve started standardizing, it has started to become more popular again.

Mobile Devices

2008-10-12T12:23:00.003-06:00

Designing for mobile devices seems to be the wild west of the web. It’s crazy, not all devices will display the same, and there aren’t standards for how the devices work— so the manufacturer decides the format. Of course, the good old W3C is working on mobile device standards (http://www.w3.org/Mobile /), and they give some good tips on how to make your site more mobile friendly. For example, style sheets are better than tables, validate your site, make sure you have text alternatives for images (like alt tags) since many mobile users turn off image capabilities, and keep things small (like page titles, urls, and such). Although, this is just good advice in general.

An article on the Cameron Moll website (http://www.cameronmoll.com/archives/000415.html) talked about some different options that are being developed, the article is a few years old, but hopefully is still relevant. One thing they talk about is the use of handheld style sheets. You could simply add another style sheet to your site that would set the display for handheld devices. This seems like a good idea to me, unfortunately, support on devices is hit and miss. Another option is the .mobi top level domain. Like .gov is for government pages, .mobi would be for mobile devices. The W3C cautions against this (http://www.w3.org/2004/07/dotmobi_diwg.html) because .mobi would only be for use on mobile devices and not really accessible on other formats, defeating the purpose of a global internet—available for everyone.

This is a really big, and complicated subject, but the Cameron Moll article gives a good list of what works on mobile devices and what doesn’t, that I found kind of helpful:

Typography

Heading tags are decently supported. However, many devices display some at the same size and weight (e.g. h1 and h2 = identical).
p is reliable
strong and bold are well supported
However, em and i are not as well supported
font-size is almost useless (currently). Consider using headings instead to control font sizing.
font-family - don’t even bother with it. Nearly all devices currently default to a proprietary sans-serif.

Lists

ul and ol are well supported
dl is decently supported
Consider using ol instead of ul for navigation lists. This allows the use of accesskey, which is fairly well supported on a variety of devices. Users can then quickly access menu items via keypad numbers. For example, try accessing menu items on Yahoo Mobile using only the keypad of your mobile device. Word of caution: There are concerns surrounding accesskey (e.g. keystroke conflicts), and it will likely be deprecated in the future. See “The Future of Accesskeys”.

Images

Nearly all current devices display images
However, users may browse with images turned off. Always use alt text (which, of course, is recommended practice anyway).
Use images as little as possible, only where contextually relevant. Keep in mind some users may be paying through the nose per KB of mobile web data.
If you must use text in an image, consider bitmap fonts for optimal clarity. Example: “mobile edition” type rendered using Silkscreen, shown in the image at right.
Be aware that some device browsers may downsize the image to fit within the screen width. Wide images may therefore become illegible.
background-image support is decent at best. However, background-color is somewhat well supported.

Miscellany

Surprisingly, floats are supported rather well. However, how practical is floating elements on a 200px-wide screen?
border-style support overall is sketchy, but border-style: solid is probably the most reliable of the bunch
margin and padding support is decent. However, use cautiously with screen real estate, and use em or % instead of px.
JavaScript support is hit or miss, more ‘miss’ than ‘hit’ currently

Accessibility

2008-10-03T14:17:00.003-06:00

When looking for information on anything relating to web standards, where would you go but the w3c schools website. The w3’s Web Accessibility Initiative’s purpose is to make the web usable by all people. Straight from the source :

“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. ”

As the internet becomes more and more important in our daily lives, it also needs to become more accessible to the general public. As web designers, it’s our job to make our sites as accessible as possible, not just for the greater good of mankind, but also just for plain practicality. If your site isn’t accessible, maybe that user won’t buy your product. They’ll go to a site that meets their needs better. From a business standpoint, accessibility it a must.

For a list of sites to test accessibility you can go to http://www.w3.org/WAI/ER/tools/.

Analyzed Websites

2008-09-18T19:33:00.000-06:00

“Woot.com is an online store and community that focuses on selling cool stuff cheap.” I love www.woot.com, it’s a very fun site. They sell only one item per day at dirt cheap prices. (Yes, I’ve bought stuff from them, it’s hard to resist sometimes.) I look at this site just about every day. Now for the details: this site is set up using CSS and not tables. It isn’t exactly the prettiest site I’ve ever seen, but it gets the job done. I’m not particularly fond of the color scheme, and I really don’t like the white bar that the woot item sits on—it blends in with the background. There’s tabbed navigation across the top which is a little bit small and hard to find. The text is not resizable, but the images do have tags, so they aren’t completely ignoring accessibility. Unfortunately, it doesn’t validate (95 errors, ouch!) What I like best about this site is really the concept. It’s just fun.

The HGTV television network’s website, www.hgtv.com, is another site I visit often. The basic layout of the site is simple and attractive, unfortunately it’s so overcrowded and completely visually overloading that it’s really very difficult to find what you’re looking for. The main navigation is set up as tabs across the top with drop down menus, it’s fairly straightforward. The problem is there are so many additional areas of navigation that it gets very confusing. Navigation on the top, on the bottom, links all through the middle of the page—there’s just too many things to click on! The text doesn’t scale, and there are no tags on images, which is a good indication that no one was thinking of accessibility at all. They do seem to use CSS primarily, but there were 147 errors when I tried to validate it. Overall, this site’s a pain to use.

Last but not least, I looked at www.newegg.com. Newegg.com sells computers, computer parts, and other technology related items. It isn’t the most exciting and beautiful site I’ve ever seen, but it does have a lot going for it. Even though it’s a site with a lot of products and multiple ways to find these products, it doesn’t feel overwhelming, and it quite easy to use. The navigation is very clear and easily identifiable. All navigation areas have either the blue or gold background of the Newegg logo. They use CSS instead of tables and seemed to take accessibility into account (which makes sense for a shopping site, or they might loose some of their customers). This site does have a mind blowing 562 errors, which is a lot for a site catering to computers and computer geeks. All in all, easy to use and worth a look.

Microsoft Office 2007

2008-09-09T16:42:00.004-06:00

Microsoft offers a student version of Office 2007 for $59.95. It includes Word, Excel, PowerPoint, Groove, Publisher, Access, Outlook, InfoPath, One Note, and Accounting Express. It’s straight from the Microsoft website, so it's legitimate as far as I can tell. Go to http://www.microsoft.com/student/discounts/theultimatesteal-us/default.aspx to check it out.

I just thought this might be useful information, pass it on to anyone you know who might need it.

Blog 2 - Web Development Perceptions

2008-08-27T17:17:00.000-06:00

I “should have a solid foundation in HTML and CSS”? Great. Now you tell me. Alright, well I guess I feel pretty solid on HTML, but I think I’ve just scratched the surface as far as CSS is concerned. You see, HTML is simple and finite—if there’s an opening tag, there’s a closing tag. It’s completely logical. But CSS is not quite so set in stone. For me anyway, I feel like CSS is just a process of trail and error—if I fish around long enough I’ll get what I want.

Anyway, I guess I should get on with the actual topic. Web Design in a ton of fun. I like being able to build a site completely from scratch. What concerns me is that there seems to be many ways to create websites automatically. Programs that you just put your information in and it builds the site for you off of a template are all over the place. It just makes me wonder if there’ll be enough need for designers. Will we become obsolete at some point? I hope not, or I’m just wasting my time in school. I suspect that our skills will have to progress past just designing websites into some of the more advanced applications to keep relevant. Like Ryan said on his blog, to stay in technology you really have to be a lifelong learner.

As the web grows larger and larger I really feel like my impact on society, as a web developer, gets smaller and smaller. There are so many websites now that it’s difficult to get yours noticed at all. We’re coming to point of information overload that I think will eventually completely turn people off.

I’m no psychic though, so we’ll have to wait and see.

Blog 1 - This is my DHTML blog

2008-08-26T17:55:00.001-06:00

I have to admit, I’m not much of a blogger. I certainly have many opinions about things, and I generally don’t mind sharing those opinions with others, but I usually choose not to put them in writing. No proof of what I’ve said that way, you see. So anyway, this part of DHTML is going to be a challenge for me, but I’ll give it a try.

This is my third semester at CSI in the Graphic Design program. I’m doing both the print and web emphasis, and enjoy both. I took both HTML and Web Design last fall. That was my very first experience with any sort of web site building, and I was a little surprised to find how much I really enjoyed it. Unfortunately, I didn’t have any web classes last spring, so I haven’t even looked at any HTML or CSS for an entire year. (I know I should’ve tried to keep up with it, but I admit I was too lazy.) So I’m sure it’ll take me a few weeks to get back into the swing of things.

Everyone tells me that this class is really difficult, but I have to admit, I’m still looking forward to it. I’m excited to learn some Javascript and find out what all I call do with that, and I definitely need the opportunity to hone my CSS skills. So I suspect I’ll learn a lot this semester.

That’s all I can think of for today. Sorry it’s not more interesting.