Bb's RealTech

I was quite pleased to see all of the activity related to SVG in the HTML5 working group's public email list. I agree with those who say that HTML5 needs to be able to work with any unknown vocabulary via namespaces, rather than try to coerce a HTMLized version of SVG and MathML. A case in point is the vocabulary items providing metadata information about the image that Inkscape puts into SVG documents. Creative Commons, Dublin Core, its own stuff–Inkscape believes in metadata.

In the meantime, I will continue using XHTML with my SVG design integration. I was momentarily peeved about the repetition of the "draconian" error handling of XHTML every time anyone even mentions the topic. However, I've since decided that rather than be peeved, I should feel flattered. According to the people who talk about the "draconian" nature of XHTML, I must then be some kind of superwoman to be able to support it. Hey, go me.

Burningbird currently demonstrates my new philosophy of design, though not necessarily using a specific design I will keep–though it is bright and cheerful in a "Horton Hears a Who" way, and I need bright and cheerful with all the rain and flooding we're having. As I've mentioned in a couple of earlier posts, the site uses a relatively simple SVG image as flexible background, in addition to other SVG for decorative accents. For IE or other user agents that can't process SVG, I provide a tiny repeating blue striped background, so that they don't get a plain page. Different but decent.

Though I use the rgba function to set the semi-transparent background of the center column and sidebar, I first define a background color using hex notation:

.column
{
        background-color: #fff;
}
.column
{
        background-color: rgba(255,255,255,0.8);
}

Browsers that don't support the rgba function yet will pick up the hex notation, getting a nice coordinated blue center column, with white for content and sidebar; otherwise, they'll pick up the rgba notation, with a completely transparent center column, and semi-transparent sidebar and entry area.

Safari and Firefox support rgba, but Opera doesn't at the moment (it most likely will in the next beta release). However, again the design is such that it degrades gracefully and looks decent even without support for this CSS3 color module attribute. Or I think it looks decent, though lord knows I'm not a web designer. Let's say my use of the technology is sound, but my design sense may suck, depending on your perspective.

I've also implemented text-shadow, in this weblog and at Burningbird. The sub-headings have a very tiny text-shadow, which really makes the text pop out nicely:

        text-shadow: #ccc 1px 1px 2px;

Opera and Safari both support text-shadow, but there's no adverse impact with browsers that don't. It adds a nice polish, but that's all it is, polish. I really like it, though, and can't wait until Firefox implements it.

All in all, Safari is currently the browser with the most advanced support for my design concepts, with Firefox a close second.

Uploaded with plasq's Skitch!

Another interesting point on the design is the flexibility as to scale. The background scales large for larger monitors, but the entire content will resize based on browser window size, as well as font size and resolution. If you resize the window small enough, the sidebar pushes to the bottom. This is not a bug–the sidebar gets pushed out of the way when the web page is accessed by a smaller device, such as an iPhone. It's still there, but not taking up valuable real estate.

In fact, the photo and the bright yellow box currently showing also demonstrate the scaling–the yellow box is a SVG element that is constrained to size to the parent container, but preserve aspect ratio; the photo will display at its maximum width, but scale down as the window scales. All in all, the site can scale to an infinite width or down to a minimum 40em in width, and still be readable. The site even works with my Kindle, either using the mobile CSS, or when using the Kindle's advanced web browsing, the scaled down width and the blue stripe background (though in gray tones, of course).

Best of all, you can zoom the text and the whole site zooms out, so that the words per line length is consistent.

Uploaded with plasq's Skitch!

That's the key to my site designs in the future–not trying to get the sites to look the same in all devices, but looking good for each. Or at least good enough while still giving me the opportunity to try out new technologies. We've fixated too much in the past on making sure a site looks "the same" in all browsers. We've crippled our creativity trying to make sites look "the same" in all browsers. This was someone's anal design "rule" set out long ago, and it's time we toss the bugger aside.

I promised Bud a writing on SVG and performance, especially as compared to raster images (such as PNG, JPEG, and GIF). I actually checked out the WebKit code to see how it manages graphics, and was surprised at how easy I was able to follow the code considering that I haven't worked with C++ since my old Windows programming days. The WebKit code is well organized and documented, with a minimum of tricksy coding. It really is an excellent product–not the least of which that it will probably be the first browser to pass Acid3. It or Opera, they're both very close.

Anyway, the writing will be coming after my site redesign, after I finish proofs, after I get the next book started, but I wanted to quickly mention my discovery, in the course of my explorations, how committed Apple is to the use of SVG–in browser and out–because of the scalability. Think of it: if you have a desktop icon that you want to look good in a tiny screen, as well as a monster 60 inch television, would you want to use raster images? Of course not. OK, then, would you want to invent a graphics format, or use one that already has extensive tool support, as well as earning you brownie points with the development and open source communities?

*beep* time's up

Apple chose wisely. Still, I was surprised at the strength of commitment Apple has to the integration of SVG into its products. And this despite HTML5 disapproval. Hey, go fruit.

Update Opera is stating they've reached 100/100 on Acid3. Congratulations Opera! Can't wait to get my hands on a working tech preview. When I do, I'll run it against the *Firefox Minefield edition, and the latest WebKit build and we'll see how they're all doing. The real test is getting 100/100 with a publicly accessible browser version.

I will declare a winner in my Acid3 races once I've seen the 100/100 with my own little eyeballs. Being as I'm superwoman and all.

*Oh, and IE8, too.

A hopeful piece of news from yesterday was about the possibility that Apple will be using SVG for the iPhone rather than Flash.

The advantages? SVG is lightweight, SVG is standard, SVG scales beautifully, SVG doesn't have to be licensed, and Safari already implements much of the SVG 1.1 specification. Not to mention there's a version of SVG coming out just tailored for mobile devices.

Other talk based on Apple's rejection of Flash for the iPhone is that Steve Jobs will use Silverlight, instead. I have to assume there's a lot of drinking going on at these conferences.

I don't have the spare income to indulge myself in all the new toys that come along. However, I considered the Sprint refund to be 'found' money, and used it to buy myself not one, but two new toys: a Kindle eReader, and an AppleTV.

The AppleTV is a little box that connects to your TV through an HDMI cable and to your computer and iTunes either wirelessly, or via an ethernet cable. I can use the box to look at video podcasts, watch movies or television shows, peruse photos from my local drive or via Flickr, watch YouTube videos, and listen to music.

Before the recent software update, I had to find podcasts through iTunes on my computer and sync to the AppleTV. Now, I can search and browse on podcasts directly from AppleTV. Apple still needs to filter the podcasts to those that can only play on AppleTV, but most can so it's not too much of a hassle. Many of the podcasts are pretty lame, but some of the podcasts, such as those for the Hubble podcast and the Spitzer Science Center, are in HD and absolutely exquisite. Best of all, the podcasts I've checked out to this point are free.

I can sync television shows and movies from my computer to the AppleTV. After the recent software update, I can also rent movies and buy TV shows directly through the AppleTV interface. Apple is still adding movies to its library, but about 70 are in HD, and at least a couple of hundred are in SD. I don't know how the movies look on the 50 inch televisions, but they look great on my smaller 27-inch 720p TV.

The movies aren't cheap. An older movie rents for 2.99, 3.99 for HD quality. A new release is 3.99/4.99. If you have Netflix, it's going to be cheaper to get your movies through that service. However, I've found that blu-ray movies sent from Netflix fail about 50% of the time. Being able to rent through Apple provides a second avenue for HD content. Plus, it's a nice option when the weather is cold and there's nothing else to watch.

The movies are ready to view in about one or two minutes after making the purchase (TV show) or rental (movie). I've found, though, that waiting until about 2-3% is downloaded works best.

You can sync music, but I only have the smaller 40GB machine, and don't want to load it down with music. I also prefer to listen to music through my other computer, which is connected to nice speakers.

I can watch YouTube videos through the AppleTV, but I've not found it worthwhile. The YouTube photos look bad on a computer monitor, much less on a bigger TV screen.

Where I've found the AppleTV to be particularly useful is with photos. You can choose to sync a local directory with your AppleTV, copy photos to this directory, and they're automatically uploaded to the machine. I can watch the photos in a slideshow, which is a great way to check out the pictures for flaws, bad cropping or focus, and so on.

There's something about seeing the photos on the larger screen, while you're seated several feet away, to get a good, objective view of the images. Since the AppleTV is connected to the TV through an HDMI cable, I get a nice, sharp view of the pictures. In addition, I can have the AppleTV use my photos, rather than its own built-in pictures, for the very nice screensaver. I'd like to have that screensaver for my Macs.

When I get bored looking at my own work, I can connect to a .mac or Flickr account, and add as many Flickr contacts as I want in order to look at other people's photos. So, who has a .mac account I can try?

The AppleTV interface is very easy to use, and the box is small and out of the way. It runs a bit warm, which is typical for an aluminum Apple product. Whatever you do, do not stack it on your DVD player. The remote is very small, about the size of an iPod nano. So far I haven't lost it, knock on aluminum. Unfortunately, AppleTV is restricted to US access at this time, but the Apple company has stated it will be rolled out to other countries hopefully later in the year.

Is the AppleTV worth the money? I wouldn't buy one of the larger hard drives. The AppleTV is not separate storage from your computer, because it works by syncing so you're really not getting any additional space. I do think the smaller versions are worth the money, especially if you don't have a computer that supports a DVI or HDMI connection. It's been fun viewing the different podcasts, and the device is a nice alternative if you don't have cable (which I don't). If you're a photographer, the photo slideshow capability is especially useful.

Note that Apple has refurbished AppleTVs for sale for 199.00 at the Apple store. It's not much of a savings, but thirty bucks is thirty bucks–enough for 5-10 movie rentals.