May 14, 2008

Shelley Powers' Amazon weblog

Mix and Match Graphics

My own Painting the Web site is up, though not yet live. I'm still working through porting the theme to Drupal. I've used Wordpress in the past and how themes are customized differs quite dramatically between the two tools.

In the meantime, you can check out the page graphic, which not only has an unusual background, but also demonstrates some of the tools I covered in the book.

The graphic is a combination of two separate images: the book cover, as well as an artist easel from WP Clip Art, a compilation site consisting of clip art and other images donated to the public domain. The book cover image was large enough for my purposes but the easel wasn't, so once I had both graphics, I used the VectorMagic online web service to convert both to vector graphics, in this case, Scalable Vector Graphics or SVG. SVG is a wonderful vector graphic technology supported in Firefox, Opera, and Safari, as well as a host of drawing tools. I use it for everything.

After the easel was converted to SVG, I resized it to the size you see at my site. Adding the book cover to the easel was simple--I just copied and pasted the SVG for the cover into the easel SVG file, since SVG supports nested SVG elements. I resized the book cover, and then I used SVG transformations to skew the cover so that it matched the perspective of the canvas in the easel image. I made the edits directly in the SVG file using a text editor, but could have easily made the changes in a drawing tool that supports SVG.

I've found that doing this type of work--scaling and skewing--with a vector graphic results in a better, more polished image, than trying to do this work as a bitmap image, such as a JPEG or PNG. In particular, scaling with a bitmap leads to pixelation and generally bad results.

I had the option of incorporating the resulting SVG into the Painting the Web page directly, but complex SVG images can take time for the browser to process, as well as being problematic for Internet Explorer, which doesn't natively support SVG. Instead, I used the free drawing/paint tool Inkscape to convert the vector graphic back into a bitmap, specifically a PNG since I want to maintain the transparent background.

Two last modifications. I used Photoshop CS3 to add a drop shadow to the image, since I like a "cutout" feel for my clip art based graphics. Drop shadows are easy with Paintshop. All you have to do is make sure the background for the clip art is transparent and unlocked, select Layer from the top menu, and then Layer Style from the dropdown.

(Another tool I could have used to add the drop shadow is the freely available GIMP, which I also cover in the book.)

Lastly, since the image is a bit large, I wanted to make the file size as small as possible so I used PNGCRUSH to optimize the image file. You don't always end up with a significant savings when optimizing PNGs, but in this case, I saved about 25% on the file size.

I kept the original SVG for the image, in case I want to make a larger image some day.

by Shelley R Powers at May 14, 2008 09:10 PM

May 12, 2008

Shelley Powers' Amazon weblog

Examples and Having Fun

I see that Painting the Web is now available at Amazon. I hope you all have as much fun reading the book as I did writing it.

O'Reilly should be posting the examples for download at the book's official O'Reilly web page later this week. Included is a rather large file with several RAW photos used in the examples in the earlier chapters of the book.

I'm also in the process of putting up my own web site devoted to all things related to web graphics, not just the book. I'll post another note here when it's ready.

This isn't  a book for pros, and doesn't cover the usual web design, photography material. It's more of an exploration of the various tools and technologies for creating web graphics.  Included is coverage of SVG, the canvas element, CSS, Ajax effects, the famous "Web 2.0" graphics like reflection and shiny buttons. web design, how to best prepare photos for online display, and even several chapters on the many libraries for creating and modifying graphics.

I focused primarily on open source tools, which is why I didn't cover either Flash or Silverlight. However, I don't think you'll mind, as there is so much you can do with the tools and technologies I did cover.

If you have any questions on the material, do feel free to contact me directly, or through the O'Reilly web site.

by Shelley R Powers at May 12, 2008 02:35 PM

May 06, 2008

Shelley Powers' Amazon weblog

Warning on one of the links in the book

Painting the Web should be hitting the streets, soon, and I'm in the process of packaging up all the examples, creating the book support site, as well as double checking all the links in the book.

Speaking of links, I'll be adding an updated links page at the book site, which isn't quite live yet. However, I didn't want to wait to add this message, which is a warning about one of the sites reference in the book.

In Chapter 15 I talk about photo metadata, which is information about the photo. One of the photo metadata libraries I referenced in the book is PHP-JPEG,  which can be found at ozhiker.com. When I checked the site this last week, I found that the site pages have been hacked, and code inserted that will attempt to load malware into your computer.

I notified both the site owner, as well as the hosting companies associated with the site, about the malware injection and they have disabled the account. In the meantime, disregard the reference to the PHP-JPEG library and site in Chapter 15 and don't attempt to access the site.

by Shelley R Powers at May 06, 2008 05:51 PM

April 23, 2008

Burningbird's RealTech

Last Post

This is my last post in the RealTech Wordpress weblog. RealTech will be back, though whether it will be a weblog or stories, tutorials, and the like, I don't know yet. Whatever I do will be implemented in Drupal.

I'm finding that Drupal really is a good solution for me, and not just because of the better support for both rich semantics and SVG. Drupal provides multiple types of publication models, including books and "stories", the latter of which can be considered a "weblog", but could equally be considered nothing more than a story published online.

I've long wanted the capability in Wordpress to be able to associate a group of pages into a book, with an order specific navigation, rather than loosely into a category. Drupal supports this functionality, in addition to the category-based grouping. The tool also has better support for taxonomies, in addition to being able to fine tune the exact URL for each writing.

I also like the architecture of the modularization. Drupal isn't a slam dunk installation, but then it's not the same as a pure weblogging tool. It is a true content management tool, which means you'll have a better time planning ahead with your installation than just throwing something out.

I'm not going to try importing my old posts. Instead, for both this site and Burningbird I'm cleaning out old crap and then I'll be using the Linux utility wget to create a static copy of the site. I'll then move the static pages in to replace the old dynamic web pages:


wget --mirror -w 3 -p --html-extension http://realtech.burningbird.net

Adding the following into the .htaccess file ensures the SVG in the page works for people using an SVG-enabled web browser, while still allowing IE access:


RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

You wouldn't believe how much cruft I had in Burningbird. Remember, this is a weblog I've had for over seven years. It's also a weblog that started out with bad HTML markup, now being served up as XHTML. It is getting to the point that unless I really like a post, if it's broken in XHTML, I delete it.

Too many of the posts, too, were nothing more than notes about "I'm going to do something", "I am doing something", "I have done something", and preserving these types of posts is tantamount to collecting old Avon bottles. In addition, so much of my old writing was maudlin. Maudlin, histrionic, and full of hyperbole. It was exhausting just reading some of the old material. I found myself saying, all too frequently, "Oh my god, there she goes again"–about my own writing, which is a sad state.

I'm also fixing up the posts that I am keeping, including repairing broken links (using a tool, Xenu to find them).

When I'm finished, hopefully this weekend, the site will probably be hundreds of pounds lighter.

Creating the static copies frees up the .htaccess files, as well as "cleans" up the god awful redirect mess I have now. I'm also using the Google Webmaster tools to eliminate entire subdirectories that are gone. Since I stopped caching my stuff a long time ago, once the stuff is cleared, it's gone. This aggressive cleaning will result in more 404/410 pages, inspiring me to be more creative with the error pages.

I'm not ready to move out new pages yet. I want to make sure I'm happy with my re-organization, as well as tool use. I'm made a lot of bad decisions the last several years, primarily because I ended up following some new meme or another. Now, I want to make sure what I end up with is what I want for the long term–not something that scratches a momentary itch, or puts me in the middle of the bees.

I don't like "Under construction pages", not the least of which the images are too damn cute for words, and "under construction" provides no useful information. Instead, I'm creating "to-do" lists for all of my sites that provides a brief explanation of what the site is, as well as an indicator of recent activity, and planned for activity in the future. An example can be seen at my Shelley Powers site, or Painting the Web.

I doubt that anyone would be interested in following along with this process, but then, I didn't think Twitter would take off, either. If you are interested, I started an account at Ta-da Lists, where I will list my to-do items, and when they are completed. You can also follow along with my Burningbird Twine.

Speaking of Twine, I do have invitations for it, and for Aviary, the online graphics tool system. I created an Invites email address at invites@burningbird.net, which will provide an auto-responder message letting you know what invites for what app I have available. This way if you ask for an invite for Twine or Aviary, or whatever I currently have invitations for, you'll get immediate feedback on whether you can expect the invitation, or if the invitations are all gone. The invite request will then get forwarded to me to issue the invite.

My two book support sites, one for Adding Ajax and one for Painting the Web, are my priority, so I'm not sure when anything else will be finished. I probably won't have my main Burningbird page up before these two sites are ready, but the main Burningbird feed will be running from the start. I'm continuing to use Sam Ruby's Venus, and the main Burningbird feed will continue to be housed at http://burningbird.net/feeds/atom.xml. Note that this will be my feed for everything–all the writings and what not from all my sites. Once I take down the Wordpress weblog at the top level, I'll then redirect my older feeds to this new location.

If you're interested in Ajax, you'll probably want to check out the Adding Ajax page when finished. It's not just a book splash page. I'll be adding new writings related to Ajax, as well as reviews, code, and book support stuff.

The same with the Painting the Web site. Painting the Web promises to be my most "fun" site, especially if you're interested in photography and/or web graphics. The splash page I have now doesn't represent what I'll have when I'm finished. I'm not quite sure about all aspects of the page design yet. Page design is always the hardest task for me. Tech is easy.

I don't know all I'll be doing as I go forward, but I do know that all of you have made the last seven years of my life a richer experience. I must have broke an anti-matter mirror seven years ago, because I've had seven years of good luck, not bad. I want to thank you for your time and interest, not to mention patience with my many flights of fancy.

by Shelley at April 23, 2008 05:42 PM

April 18, 2008

Burningbird's RealTech

Earthquake

update

A second earthquake is now happening. Aftershock. Oddly enough, the aftershock is more unnerving.

It was a 4.6.

I'm still groggy, I'm still not sure, but we may have had a significant earthquake here in St. Louis. More when I have more info.

update There was an earthquake, with a magnitude of 5.4 5.2, in Illinois, approximately 204 km (127 miles) from St. Louis.

earthquake location

by Shelley at April 18, 2008 09:40 AM

Some links are not active yet

Burningbird phoenix logo