Categories
Technology Writing

Notes from the book part two

Summary:   Wherein author picks up both stick and carrot, paying particular attention to the attached metadata: Me relate stick. Me relate carrot. Me class hitting. Stick class hit. Carrot class eat. Me relate Microsoft. Translation: I am hitting the stick with Microsoft, while eating a carrot.

  • Open source developers, providers of free or inexpensive shareware applications, those working on open standards and specifications, or providing documentation, tutorials, and help for all of the above: you almost make me believe there is a land over the rainbow, and that it has fairies and unicorns and we never have to wear shoes. I don’t thank you, as often enough, and as much as you deserve.
  • Speaking of which: whoever came up with the original idea for CSS, you deserve chocolates
  • Everyone is mad at Apple for iPhone, but I don’t care: Safari 3 is a wonderful browser. Color management, far out. And Opera? Thanks for standing up for standards. Firefox, you’re cool, too, but you need to commit to implementing one spec before you start on others. Oh, and it would be really nice if you didn’t crash so much. No, really that would be cool.
  • The WhatWG and (X)HTML5 efforts are, in my opinion, not the best use of resources. We’ve spent years separating presentation values from page layout, only to turn around and make the same mistake with semantics. Accessibility is in; accessibility is outMachine versus human semanticsIndent versus blockquote. Hey! Poem markupSVG isn’t ‘semantically rich’ . When semantics have to be hard coded into the syntax, satisfaction will never be guaranteed. Open models, not new specs. When will they ever learn? When will they e-v-e-r learn.
  • Regarding microformats: Using “rel”, “class”, and “profile”, as the only available means in which to add semantics to markup is the same as using LOLCats to re-define the Bible: it’s pidgin markup. “Me class sitting. Me relate chair. Chair relate desk. Me class watching. Me relate windows. Window relate Woman. Woman class running. Woman relate street. Woman class feeling. Feeling relate weather. Weather class cool. Weather class fall. Me class wistful. Me class wishing. Me relate woman.”–this is my sad attempt to describe my sitting in a chair at my desk, looking out through my open window at a woman jogging along in the wonderfully cool fall weather, wishing I was her instead me being here at the computer. At some point in time, simplicity breaks down and you want a richer method in which to express your meaning.
  • Chew on this: pictures as data, as well as visual, entities.
  • Canvas is cool, but SVG is better. It’s not just because SVG elements become part of the Document Object Model (DOM) and are easily scriptable. It’s because we can find SVG similar to what we want, copy it, manipulate it, and we don’t have to know any scripting. I wanted images of musical notes and searched on “music notes svg”, which led me to this Wikipedia page and this (as well as this) public domain SVG. I copied the SVG file and deleted the SVG creating the bars–no bitmap tool magic needed to pull the notes separate from the bars. I split the notes into two separate images by coping and pasting the two different elements. I copied the SVG for both into this post, and scaled them into tiny little representations of themselves. Though the browser had to reach to scale them so small, we’re not left with a tiny little bitmap blobsI did think about using the following image, copied from this resource. Oh look, the original SVG contains metadata defined using RDF/XML. Isn’t it marvelous when you can merge rich, well defined XML vocabularies together? Just like that?
  • Silverlight: Why? There’s nothing in Silverlight 1.0 that doesn’t exist as an open standard and can’t be supported for IE applications–if Microsoft would just support them. Silverlight as a 2D graphics system? Both SVG and Canvas are 2D graphics systems. Microsoft supports form controls like buttons? Hey! Guess what we’ve had in HTML for years? Silverlight 1.1 integrates web browser and ASP.NET functionality, which means you can use your Microsoft Visual Studio and Microsoft Web Expression applications to create Rich Internet Applications? Fantastic! It still doesn’t change the fact that Microsoft pushed its browser on the same developers it’s trying to suck into the Silverlight world, and then abandoned it, and us, for five years; effectively holding up advances in internet development for half a decade.
  • Adobe Flex/AIR: Why? It’s true that Flash has done much for us over the years, and we’re grateful, but we’re ready to move into a new era of open standard applications and, frankly, Adobe, you’re rather hit and miss when it come to ‘open’ and ‘standard’. Take your SVG plug-in. It’s cool and we thank you for providing it so that IE users could see what they’re missing using a half-assed browser. Now you’re going to pull the plug-in and your support for it. Why not open source it, and let the open source community decide if it wants to continue to support it? Is it because, as has been noted elsewhere, you want us to consider converting [our] SVG application to an Adobe Flex® application? Golly, I just love these opportunities to get sucked into another bloated, proprietary application environment. It makes me feel so good when you finally, inevitably, stop.
Categories
Weather

Dodging bullets

St. Louis dodged the bullet this week, but then got hit with the canons. From Jo Mannies, my favorite columnist at St. Louis Today:

President George W. Bush is cancelling his plans to visit St. Louis on Thursday, and is instead flying out to California to view the damage caused by the wildfires and comfort victims.

Saved!

Vice President Dick Cheney will be coming here Thursday instead.

Not!

President Bush flying to California during the disaster…that’s interesting. He did the same thing during Katrina. Must be a jerk reaction.

Oh, sorry, I meant knee jerk reaction. Damn keyboard.

Categories
Programming Languages SVG

Color sampling and SVG gradients

More fun with SVG.

I’m rather surprised there isn’t more general ‘design’ work using SVG. True, you really should have your pages as XHTML and not many people are ready to jump on that bandwagon. Still, once you’ve bit the bullet, you can have a lot of fun with your pages and incorporating SVG.

My newest experiment is actually combining PHP image functions with dynamically generated CSS entries, which also control the random photo header. All the SVG elements are dynamically created based on colors sampled in whatever is the current header image. I used the photographer’s ‘rule of thirds’ to pick four outer points and then sampled the middle. I use the sampled colors to generate CSS values used to style 4 small circles in the top of my sidebar and rounded-corner gradient-filled ‘caps’ to my individual comment entries.

I had to make some tweaks to make the gradient comments work. First, the SVG element had to have the display setting set to ‘block’ in CSS; otherwise, the browsers generated space following the object. I’m assuming that the SVG element is treated like the IMG element is in strict XHTML mode: treated as an inline element, and given a ‘text descender’ space. Second, just as with images, fixed widths work best for gradients, and the viewport for each SVG element has to be fixed to work with Safari 3.

The gradients don’t work with Firefox 2.x if you access the page using a page fragment, such as clicking on a specific comment. This is a bug that has been fixed in Firefox 3.x. It does work with the latest Opera and Safari 3. The page degrades nicely for non-SVG browsers.

I’m not sure if I’ll keep the SVG effects, or even take it further with creating entire page color schemes based on color sampling of the image. I may look at embedding additional data directly in the images to control both the CSS and the SVG.

I do want to implement ‘caching’ for the ‘blog pulse’ I created earlier. The best time to cache the pulse would be each time a new comment is saved, probably to a database table I’ll create for other uses. The color sampling, though, may not need caching. The gradient effect can be a little slow, but most of the ‘slowness’ is from the fact that the header image is quite large. Then there’s the random selector for the image–I imagine this can be improved through the use of caching.

Frankly, I don’t load my sidebar with dozens of widgets, hook into that abysmal google syndication service, nor do I embed dozens of YouTube videos in my posts. My little use of SVG is nothing compared to all of this, and, unlike the other services, doesn’t impact on the loading of the page contents.

Still playing. I’ll worry about performance when I’m finished playing.

For your own playing: SVG is in page, PHP dynamic modification code, import into your CSS file using: @import “photographs.php”;

The only drawback to all of these changes is Internet Explorer. None of this is going to work with IE. None of what I’m doing, though, impacts on the page layout, or the text or even the generated CSS style settings. The IE users won’t get some of the effects, but they’ll get the weblog content. I’m not going to try and use Silverlight or VML or a plug-in to work around these issues, either. I figured if the Microsoft people don’t care that their users are missing out on the fun pieces of the web that’s Microsoft’s problem, not mine. That browser has killed too much of my fun over the years–enough is enough.

Categories
Books Photography Writing

Lessons from the book

Lessons learned so far from the book:

  • Photoshop, still king. After working with several photo and graphics editors, I can say with a great deal of certainty that Photoshop really does deserve the respect it’s been given. Adobe’s habit of re-arranging its products with every release, paranoia about stolen software (somewhat justified) and high price tags aside, the product is the best.
  • There are other good photo editing tools. Having said that Photoshop is the best, there are other excellent photo editing tools, including GIMP. I tried out the new GIMP 2.4 and was very impressed with the application. What’s important to remember about GIMP is that it’s one of the few that isn’t claiming to be a “Photoshop killer”. It considers itself to be a unique photo editing product.
  • Of the other products I explored, Paint Shop Pro has gotten a lot of flack for only being 8-bit, and deservedly. It still has an extraordinary number of photo effects, though. Paint.NET is not–not ready for prime time, that is.
  • Photoshop Elements is fun Elements is more than Photoshop with much of the guts torn out. Elements really is focused at a different audience. It doesn’t have much of the fine control that Photoshop provides, true. It does, however, support what most people want from a photo editor, and a whole lot of new functionality that most people would find fun. Since I have my TV hooked up to my computer, I adored Element’s ability to generate a widescreen HD-compatible slideshow movie with music of a folder of photos.
  • The next Photoshop will be an online tool. I’m amazed at the number of online photo editors. I’m doubly amazed with all the hyperbole surrounding them. These tools are described variously as the next Photoshop Killer or the next Photoshop, period. Even Adobe is coming out with an online tool. My first test for each of the online photo editors I looked at? Uploading and opening a RAW image file. Puts the whole ‘online’ photo editor thing into perspective.
  • Colorful black and whites. I don’t think I’ve realized how colorful black and white photos really are until I started exploring, in depth, the many ways one can convert a color photo into a black & white. This exercise should be a requirement for every class teaching black & white photography.
  • Snag-It is great for screen captures and Skitch has an interesting social network facility, but my favorite screen capture tool ended up being Faststone’s Fast Capture. I found it more comfortable to use then the other two products.
  • I will accept software that dynamically resizes my photos for online display, only if you let me use my new Grease Monkey script that removes all the conjunctions from your writing.
  • Most important graphics tools. The most important tool both for editing photos and creating graphics is the Gaussian Blur. You can do without most other things, but you can’t do without the Gaussian Blur.
Categories
SVG Writing

Blog pulse

Summary:   beep…beep…svg…beep…beep…

I need to refocus on the book, but you’ll be seeing the tangible aspects of writing a book on web graphics throughout my web sites in the weeks to come. For instance, if you’re using an SVG capable browser, you might notice the ‘squiggle’ line across my header. That’s my ‘blog pulse’. It reflects my updated comment count for the last 80 posts. Of course, you know what this means: if my blog pulse straight lines flatlines, my weblog is dead. You hold the life of my blog in your hands.

Currently the ‘pulse’ isn’t viewable to IE or other non-SVG enabled browsers. The Adobe SVG Viewer won’t pick up the SVG, as I’m embedding the SVG directly into the page’s XHTML. That’s the whole reason I bit the bullet and converted to XHTML in the first place.

I could convert the example to using the Canvas object and Google’s ExplorerCanvas library, or perhaps use Sam’s SVG to Silverlight Workbench. Frankly, even though I have a lot of visitors using IE, as long as the information represented in the graphics is either available in other formats or non-essential, I may just blow off IE.