Month: March 2008

Categories
Specs SVG Technology

State of SVG, state of the Bird

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.

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.

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.

Categories
Art Money

Stop creating and get a real job

Recovered from the Wayback Machine.

I don’t know that I agree with Nick Carr’s assessment that the Bebo deal is equivalent to sharecropping. Anyone who contributes anything to any social networking site should be aware that what they contribute will eventually be monetized in some way by the site owner. In other words, if you want to give it away for free so that others profit, I don’t necessarily have a lot of sympathy.

I did like what Broadstuff had to say on the issue, though.

A good rule of thumb with the mass Tech Media is that when such howls of outrage are heard, the howlee is generally onto something. And what Bragg is articulating in essence is this simple thought – the only real difference between the New Music Aggregators and the (automatically despised) Olde Aggregators is that the Olde Industry actually paid the artists something.

That, in a nutshell, is the bottom line on this discussion. It’s not whether the artists knew they weren’t going to get paid or not, but the fact that we hold social networks like Bebo up to high acclaim while sneering at the old record companies, when both groups profit from the efforts of the artist. However, it is only the old companies, those badies, that actually pay for music. Even if the payment is considered miniscule, it is pay and is a whole more than you’ll ever get for your efforts at Bebo or any other site that promises you “fame”.

The intrinsic value of fame on Bebo aside, I am irked to see this discussion used, yet again, for the cry that all art demands to be free and that artists should be happy with getting attention. If artists want to pay the rent or buy food, then they should get a “real” job, and quit whining because people download their stuff for free.

According to people like Michael Arrington all recorded music should be given away for free, and artists make their only income from concerts. If they can’t make their living from concerts, or busking for tossed dimes in the subway, than they should consider music to be their hobby, and get a job digging ditches.

Of course, if we apply the Arrington model to the music industry, we should be able to download all the songs we want–as long as we’re willing to sit through an ad at the beginning and in the middle of every song. Isn’t that how Techcrunch makes money? Ads in the sidebar, taking time to download, hanging up the page. Ads at the bottom of the posts we have to scroll past to get to comments? And in between, loud, cacophonous noise?

It angers me how little value people in this online environment hold the act of creativity. Oh we point to Nine Inch Nails and Cory Doctorow as examples of people who give their work away for free but still make a living. Yet NIN levies an existing fame, selling platinum packages at several hundred a pop to make up for all the freebies, and Doctorow has BoingBoing as a nice cushion for the lean years. They bring “fame” to the mix, and according to the new online business models, you have to play the game, leverage the system if you really want to make a living from your work. We don’t value the work, we value the fame, yet fame doesn’t necessarily come from any act of true creativity.

All you have to do to generate fame nowadays is be controversial enough, say enough that’s outrageous, connect up with the right people in the beginning and then kick them aside when you’re on top to be successful. You don’t have to have artistic talent, create for the ages, or even create at all–just play the game. If you do it right, you get Techcrunch. If you do it wrong, there’s the ditch.

Though I may not agree completely with what Nick wrote in the previously linked post, I agree wholeheartedly to what he wrote in a follow-up post, written in response to Arrington’s statement, Recorded music is nothing but marketing material to drive awareness of an artist.

As a poem, one assumes, is nothing but marketing material to drive awareness of a poet. As a sculpture is nothing but marketing material to drive awareness of a sculptor. As a film is nothing but marketing material to drive awareness of a director.

In the fallen world of the social network, “awareness” is the highest, most noble accomplishment that anyone could possibly aspire to. Because, you see, “awareness” is a monetizable commodity.

In a world where the only measure of success is attention, can anyone truly be great?

Categories
Burningbird Technology Weblogging

WordPress 2.5: Looks

Recovered from the Wayback Machine.

Though I will be using Drupal for portions of my site, I’m still debating whether to continue using WordPress for purely weblog activities, such as at RealTech. I decided to download the WordPress 2.5 release candidate 1, give it a run.

I’ve moved most of my XHTMLating work to plug-ins, so I didn’t have the problems with overwriting source code. The plug-ins I do use worked without a hitch, including the one that XHTMLates comments (though the commenter’s name field doesn’t support internationalization at this moment).

I like the new dashboard, which does a good job of putting important information at the top. I don’t like the fact that you still don’t have a lot of options–or at least I can’t see them–for eliminating all of the crud that gets pushed at you. I don’t care about top plug-ins. I don’t care about other WP weblogs of note.

As for the new site design, I like the coloring, but I do not like all of the design changes. Case in point is the Write Post page, with post in process.

Look at all that wasted space. There are four headers above the Write Post page, and in the Write Post page, we now have to scroll down to control comments, pick categories, add tags. Yet what takes up the valuable real estate to the right? Related items, ie how to manage comments, posts, etc. When you’re writing a post, what are the items you’re most likely to edit for that post on a regular basis? I would say tags and categories, as well as comment status. You’re not worried about managing categories or comments.

I do like that the Delete button is now more obvious, rather than buried at the bottom of the post. In addition, I was happy to see a link to draft entries rather than forcing us to filter on draft to find a post in process. There’s also only one Save button for a post now, equivalent to the older “Save and Continue editing” function.

I also like the fact that you can edit the permalink, though the creators didn’t go far enough–you should also be able to pick which category goes into the formal permalink. I had hoped that the developers would also list existing tags in the tag area, but you still have to guess what tags you have if you don’t want to add new ones.

On the other hand, I do think the media management capabilities are superior in this version. If you serve video, you can now more easily manage your video, as well as music and image files. For instance, you can click on more than one file to upload, rather than have to upload individually. The application will then upload all the files, and for photos, attempt to use the photo’s EXIF file to fill in the relevant information, though the application doesn’t seem to like my photos’ EXIF sections.

However, if you’re tempted to have WordPress 2.5 create an in-page gallery, think again if you’re serving your pages up as XHTML: the generated gallery HTML is not valid.

This is a trivial error to fix, and I’ve sent the error information into the special feedback email address. However, this does demonstrate something I find a little disquieting–the WordPress developers are not running their sites as XHTML, themselves, in order to ensure WordPress provides both valid HTML and XHTML. Nor are the developers validating what they generate. If they did, they would realize that their sites don’t validate.

Worse, the validation errors are such blatant errors that even relatively inexperienced web developers–and web designers–should have caught them early, and prevented their occurrence at this late stage of WordPress 2.5 development. The only assumption I can make is that form is taking precedence over function with this release. Definitely not an attitude I would have expected considering the involvement in the development of WordPress 2.5 by known standards luminaries.

The page containing the gallery does not open in Firefox, Safari, or Opera because these browsers read the page as XHTML, and the page has invalid markup. However, the page does open in IE8. Perhaps the underlying issue is that IE8 is the browser of choice for the WP development team.

In the other sections, if you make any updates in the user page you have to type in your password again, or it tells you that you only entered it once. That’s annoying. The rest of the pages seem the same, except for a new Media Library, which shows what images are used where. Handy if you want to track down in which posts a specific image has appeared.

Overall, the interface is cleaner and media file management has definitely improved, but the usability has, in my opinion, taken a couple of major hits. I include in this category the freedom to serve our pages up as valid XHTML without having to struggle with invalid generated page markup.

Now, I’ll publish and see what happens to the feeds.

Categories
Specs Web

Joel Spolsky: Crap is good

Recovered from the Wayback Machine.

Joel Spolksy just spent several thousand words and accompanying diagrams saying one thing: we did things crappy in the past, and we should continue doing things crappy in the future because crap is easy.

Where do I start?

This upcoming battle will be presided over by Dean Hachamovitch, the Microsoft veteran currently running the team that’s going to bring you the next version of Internet Explorer, 8.0.

At a minimum Microsoft can go off and do its own thing in total isolation, and in the long run, Microsoft will end up being the loser. The more I work with SVG and the new CSS, the more I find that I can develop using the new technologies, and the page still works for IE but I don’t have to make it look the same for IE. As long as the page is clean, legible, and accessible via IE, it doesn’t have to look the same for IE as it does for the Big Three (Firefox, Safari, and Opera).

So I’d say that Hachamovitch is a player, but only to the extent that Microsoft wants to be a part of a larger community.

In practice, with the web, there’s a bit of a problem: no way to test a web page against the standard, because there’s no reference implementation that guarantees that if it works, all the browsers work. This just doesn’t exist.

Question: can you see this page?

There is no practical way to check if the web page you just coded conforms to the spec.

Question: can you see this page?

There are validators, but they won’t tell you what the page is supposed to look like, and having a “valid” page where all the text is overlapping and nothing lines up and you can’t see anything is not very useful. What people do is check their pages against one browser, maybe two, until it looks right. And if they’ve made a mistake that just happens to look OK in IE and Firefox, they’re not even going to know about it.

I’m trying to untangle this one mentally and failing. What Spolsky seems to be saying is that standards don’t matter, because people don’t test in all browsers, and standards somehow make lines not even up. Or something.

He can’t possibly be saying that standards break the web. Can he?

Actually, he can.

Standards are a great goal, of course, but before you become a standards fanatic you have to understand that due to the failings of human beings, standards are sometimes misinterpreted, sometimes confusing and even ambiguous.

The precise problem here is that you’re pretending that there’s one standard, but since nobody has a way to test against the standard, it’s not a real standard: it’s a platonic ideal and a set of misinterpretations, and therefore the standard is not serving the desired goal of reducing the test matrix in a MANY-MANY market.

DOCTYPE is a myth.

A mortal web designer who attaches a DOCTYPE tag to their web page saying, “this is standard HTML,” is committing an act of hubris. There is no way they know that. All they are really saying is that the page was meant to be standard HTML. All they really know is that they tested it with IE, Firefox, maybe Opera and Safari, and it seems to work. Or, they copied the DOCTYPE tag out of a book and don’t know what it means.

There’s at least four separate thoughts in these few seemingly related paragraphs. First: there really are no standards, because standards are a thing of the mind. Second, because standards are a thing of the mind, one can’t test pages against a standard. One such standards thing is DOCTYPE, which really doesn’t exist because no one knows what it does, and people just copy it, anyway. Therefore…

I must admit to getting lost at this point. Who’s on first?

And so if you’re a developer on the IE 8 team, your first inclination is going to be to do exactly what has always worked in these kinds of SEQUENCE-MANY markets. You’re going to do a little protocol negotiation, and continue to emulate the old behavior for every site that doesn’t explicitly tell you that they expect the new behavior, so that all existing web pages continue to work, and you’re only going to have the nice new behavior for sites that put a little flag on the page saying, “Yo! I grok IE 8! Give me all the new IE 8 Goodness Please!”

And indeed that was the first decision announced by the IE team on January 21st. The web browser would accommodate existing pages silently so that nobody had to change their web site by acting like the old, buggy IE7 that web developers hated.

A pragmatic engineer would have to come to the conclusion that the IE team’s first decision was right. But the young idealist “standards” people went nuclear.

It’s been a long time since I’ve been called a “young idealist”. I wonder how Sam Ruby likes being called a young idealist? I’m surprised Spolsky didn’t pat us all on the heads, offer us a cookie. But wait, it gets better…

Almost every web site I visited with IE8 is broken in some way. Websites that use a lot of JavaScript are generally completely dead. A lot of pages simply have visual problems: things in the wrong place, popup menus that pop under, mysterious scrollbars in the middle. Some sites have more subtle problems: they look ok but as you go further you find that critical form won’t submit or leads to a blank page.

Fancy that…this young idealist’s web sites both worked with IE8, right out of the box. In fact, the only problem I’ve had with IE8 is with Netflix and that’s because of the ActiveX controls and nothing to do with standards.

I think we’ll find that most web sites don’t break with IE8, or if they do, they’re just as likely break with Firefox 3b, and Opera 9.5b, and the latest WebKit. There’s a reason you have a long beta period for a browser–to give people time to make any necessary fixes in order to have the browser work with the page once the browser is released out of beta.

True, there are sites that will continue to break with IE8 once it’s released. If you want to find them, go to the geocities.com web sites, and search on muscle cars. Better yet: “Unicorn rainbow pony”. Heck, even most of them will *probably work.

Some of those pages can’t be changed. They might be burned onto CD-ROMs. Some of them were created by people who are now dead. Most of them created by people who have no frigging idea what’s going on and why their web page, which they paid a designer to create 4 years ago, is now not working properly.

So the web has to stop because a web site has been burned on a CD, or the person who created the site is dead? Isn’t that equivalent to saying, “No, you can’t have blu-ray, because I still have VHS tapes”? Or maybe more in line with, “No, you can’t have that vaccine because there are people in the world who think the plague is caused by evil spirits, and we have to halt our practice of medicine until they catch up.”

You know, it is OK to let old pages break. There is nothing so valuable online today that we have to halt all further progress of the web because of the off chance a page won’t be viewable in a modern browser. If it were truly that valuable, it wouldn’t be that vulnerable.

Leaving aside vapid, sexist twaddles such as, Mmhmm. All you smug idealists are laughing at this newbie/idjit. The consumer is not an idiot. She’s your wife. So stop laughing (speaking of which, it doesn’t matter where the quote arises, Joel, only your use of it to prove a point), Spolsky’s whole pitch is basically a race for the bottom. Crap has happened in the past, and therefore we should continue supporting crap in the future. Not only support old crap, but encourage new crap because, frankly, people are too stupid to learn how to do things right. She’s your wife, indeed.

In response to Spolsky’s writing, Sam Ruby wrote, If people want web browsers that work with actual web sites, they still have three choices. Three good, solid choices, created by three organizations populated by people who don’t believe we have to be stuck with muscle cars, unicorns, rainbows, and ponies forever.

*Do scroll down the page and look at the comment annotating the page view counter.

Categories
Burningbird

Having one’s cake

Recovered from the Wayback Machine.

I’ve now mapped out a plan for moving forward on the organization of my site, including which tools to use, where and even some preliminary designs. I’ve also played around more with incorporating SVG into a site design, as well as trying out some of the newer CSS3 design attributes. I’m finding out that one can have one’s cake and eat it to.

For instance, you can use SVG for a site design, and the site doesn’t have to look either plain or ugly with IE–just different. If you’re comfortable with different, this isn’t a bad way to move forward with the more advanced browsers, such as Firefox/Gecko, Opera, and Safari/Webkit (the Big Three), while still accounting for a more primitive browser like IE.

Right now, today, at Realtech I have an experimental design up called “World War”, featuring both a photo from an air show, as well as three different SVG images. Only the photo shows with IE, but rather than have a completely white page, I added a background color and repeating background pattern, both of which are overlayed by the SVG ‘background’ image that the Big Three can see.

This is where it gets a little tricky. The SVG element supports both a width and a height attribute. If you specify the width and height in the element as SVG attributes, not in the CSS style attribute, Internet Explorer ignores both, which means the SVG element takes up no page space in IE.

However, the Big Three understand that width and height are supported attributes for SVG container elements, like the SVG element, itself. All three support the width and height setting directly in the SVG element. Not only that, but both Safari and Opera get a bit snitty if you don’t use these attributes and instead set the width and height using CSS, only.

The end result of this mechanization is that the Big Three see the SVG images and override the background image and background color. True, they still load the background image, but since it’s so tiny, it’s not a significant load on the server or client. Best of all: no conditional references have to be used, either in HTML, CSS, or JavaScript. If IE were ever to support SVG someday, the browser would then process the SVG just like the Big Three.

I continued this concept into using some CSS3 attributes. CSS 2.1 provides the meat of web page design, but CSS3 is the desert, and what’s a good meal without desert?

I use the rgba color function when setting the background color for both my sidebar and my article title bars. The rgba function takes four parameters: the three decimal values, in a range from 0 to 255, for the red, green, and blue channels, respectively, and a fourth representing the alpha channel. The alpha channel is what controls the transparency. Using the rgba function allows us to create semi-transparent backgrounds.

I could use a variation of opacity setting, including the CSS3 opacity attribute, as well as the older moz-opacity, filter, thing. However, the opacity settings effect the opacity of the element on which it is set and any child elements. Using the rgba function for the background-color creates a semi-transparent background for the element on which it is set, but has no impact on the child elements. (For more on opacity and rgba, see A brief introduction to Opacity and RGBA.)

What about a gracefully degrading design? For user agents that don’t support rgba, what I’ve found is that we can specify a background color using non-rgba functionality:

.sidebar
{

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

Either the agent will pick up the non-rgba background color, or it won’t pick up any background color at all. In the latter case, the behavior that the browser demonstrates is that it recognizes a supported CSS attribute (background-color), but not the value (rgba). Therefore it flushes the previously set background color, but doesn’t apply the new background color.

(I believe the former behavior is the correct, while the latter behavior is the incorrect. If you any input on this, please leave a note in comments.)

Combined, these two CSS background-color attribute settings result in the following: the sidebar and the inner panel background are both semi-transparent with Safari and Firefox, which support rgba; Opera doesn’t currently support rgba, but will pick up the earlier, solid white background-color; IE doesn’t pick up any background color, and both items are transparent.

Another CSS3 attribute I use that gracefully degrades is the new text-shadow attribute. With text-shadow, I can add shadow to text, such as the title in the page header. If the browser supports the text-shadow attribute, the shadow displays; otherwise, no shadow.

The text-shadow attribute takes four parameters: the color of the shadow, the x coordinate of the shadow as it relates to the original element; the y coordinate; the radius of the applied blur. I currently have the following text-shadow attribute setting on my main title:

text-shadow: #333 2px 2px 4px;

This CSS setting creates a dark gray shadow, offset 2 pixels to the right and bottom of my current text, with a blur radius of 4 pixels–a relatively soft shadow. The shadow shows with Opera and with Safari, though not with Firefox or IE. As long as no dependency is placed on the shadow (i.e. text the same color of the background, depending on the shadow to make the text show), the look degrades gracefully for browsers that don’t, currently, support text-shadow.

Best of all, when the text-shadow attribute is eventually supported by a browser, the shadow is displayed without any further intervention or modification of the page design. All you have to do to is accept that a page will look different in different browsers. Not “bad”, different. If you’re willing to live with “different”, you can have a lot of fun now with new design elements