Year: 2008

Categories
Just Shelley

The long way home

Before weblogging and RSS—long before Facebook, Twitter, or the next poor bastard service, doomed to be worshiped and then sacrificed on some given Friday—I used to write long essays I’d publish online by hand editing the HTML and posting the static files. Having to manually create the HTML template and design, incorporate navigation, and craft the links and images, took a considerable amount of time.

To justify the time, I wanted to make sure that what I published was worth the effort. I would research a story and edit and re-edit it, and look for additional resources, and then re-edit the story again. My one essay on the giant squid actually took two months to research, and days, not minutes, to edit. Even after publication, I would tweak the pages as old links died, or to refine a section of the writing.

Now, we have wonderful tools to make it easy to put writing or other content online. We can think of a topic, create a writing about it, and publish it—all in five or less minutes. We’ve also come to expect that whatever is published is read as quickly. We’ve moved from multi-page writings, to a single page, to a few paragraphs, to 140 characters or less. Though there is something to be said for brevity, and it takes a true master to create a mental image that can stand alone in 140 characters or less, there still is a place for longer writings. We don’t have to be in a continuous state of noise; a race to create and to consume.

Other than a few posts, such as this, all writings at Just Shelley will be spread across pages, not paragraphs, or characters. Such length will, naturally, require a commitment of your time in addition to your interest. However, I can’t guarantee that your time will be well spent, or even that your interest will be held (though the former will, naturally, be dependent on the latter). All I can guarantee is that I probably took longer to create the writing than you will in reading it.

I am using a tool to publish, true, and even providing an Atom feed. There are no categories, tags, or taxonomies, though, because everything here fits under one bucket: it is something that interests me. Taxonomies would just clutter the site’s zen-like structure, as well as set expectations I’m almost certainly not going to fulfill.

To further add to my state of web regression, I’ve not enabled comments, though I’d love to hear from you through some other means. As anachronistic as it may seem nowadays, this is not a site that’s community built. It’s not that I don’t care about you or community, or that I’m asking you to be a passive observer. My hope is that if I don’t inspire you—to talk, to write, to howl at the moon— I make you think; if I don’t make you think, I provide comfort; if I don’t comfort, I entertain; if I don’t entertain, at a minimum, I hope I’ve kept you in the house long enough not to be hit on one of those rare occasions when a meteorite falls from space and lands in front of your home just as you were leaving.

Just Shelley is my place to be still, and my invitation for you to be still with me.

My tree

Categories
SVG

XHTML and template.php

Since I use inline SVG in all of my sites, I need to serve my pages up as XHTML. I couldn’t find a Drupal module or option that triggers Drupal to serve the pages up as XHTML, so I added the following code at the very top of the page.tpl.php page:

<?php
header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
    header("Content-Type: application/xhtml+xml; charset=utf-8");
else
    header("Content-Type: text/html; charset=utf-8");
?>

All this code does is check whether the user agent can support XHTML. If it can, the page is served up as XHTML; otherwise HTML. Using embedded PHP in page.tpl.php for the theme works as desired. However, the content type of the page no longer agrees with the content-type meta element, which is included within the $head variable.

  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>
    <!--[if lt IE 7]>
      <?php print phptemplate_get_ie_styles(); ?>
    <![endif]-->
  </head>

One solution would be to not print out the $head variable and just hard code all of the head entries. However, when you add a new module, such as the RDF module, which adds entries to the $head variable, you either have to hard code these in, also, or you lose functionality.

Instead, I used the template.php file, which is used to override default Drupal behavior. Specifically, I created a variant of _preprocess_page for my subtheme, used this to access $head, and alter it.

function flame_preprocess_page(&$vars) {
  $head = $vars['head'];
  $head = str_replace("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />",
              "<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=UTF-8\" />", $head);

  $head = str_replace("<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Burningbird's RealTech RSS\" href=\"http://realtech.burningbird.net/rss.xml\" />\n","",$head);

  $vars['head'] = $head;
}

I am still getting my head around customization in Drupal, and will have a follow-up posting later, after I’ve had more time to work through issues. In the meantime, from my understanding, the _preprocess_page passes in an array of system variables, each of which can be accessed and altered, as I’ve done in the code example. The subtheme naming is essential, otherwise I would overwrite the use of the function within the Garland theme.

There is another theme specific function for overriding variables called _phptemplate_variables, but I gather that was Drupal 5 and the approach I used is Drupal 6.x and forward.

Now, the head entries are as I want them, and modules such as RDF can add their entries without me impacting on their work. More importantly, with the addition of the XHTML support, I can add inline SVG and the SVG will display correctly for those browsers that support inline SVG.

(Note this image is now included using the IMG element. I’m now using WordPress, and WordPress does not allow inline SVG.)

hello world in svg

Categories
SVG

The SVG Radial Gradient

Chapter 7 in the book provides an introduction into some of the many useful elements in SVG. Included is a discussion of the two gradients, linearGradient and radialGradient. They can’t be used to create a visual element by themselves, but are, instead, used to fill any shape that takes the fill attribute. For instance, one of the book examples defines four radialGradients, which are then used to fill four different circles. The last two circles in the example demonstrate how the radialGradient can be used to provide spherical highlights, especially when using a monochromatic color scheme, as shown in the fourth circle.

The following is the radialGradient definition used to fill the fourth circle in the example:


<radialGradient id="gradient4" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
      <stop stop-color="white" offset="0%" />
      <stop stop-color="#666" offset="50%" />
      <stop stop-color="black" offset="100%" />
</radialGradient>

The stop elements are used to define the colors for the gradient, in this case white from 0 to 50%, and then gray from 50% to 100% black. SVG user agents, like the browser you’re using (which, hopefully, supports SVG), derive the radialGradient from these stops in combination with the other radialGradient attributes. From the example given, these attributes are:

 

  • cx and cy define the size of the radialGradient’s outer circle and are equal to the 100% stop value
  • r is the length (size) of the gradient circle
  • fx and fy are the focal point for the gradient, equal to the 0% stop value

 

In the example, the focal point of the radial gradient is set to 30% along both x and y axis, which places it in the upper-left. If both were set to 50%, then the focal point would be in the exact center of the gradient.

An attribute that was not given explicitly in the previous examples was the spreadMethod, which provides instruction in how to fill the shape when the radialGradient is smaller than the containing element. The possible values are: pad, spread, and repeat, with pad being the default.

In the >third example, three circles are filled with three different radialGradients. The cx and cy values are 30%, the fx and fy values are 20%, the length is 50%. All that differs between the circles is spreadMethod, which is, from left circle to right: reflect, repeat, and pad. The reflect value causes the gradient to repeat, from the outside in; the repeat value repeats the pattern literally, which can lead to rather abrupt transitions; the last option, pad, fills in the remaining area of the circle with the color given for the 100% stop.

When creating radialGradients, you’re not restricted to three stops or different saturations of the same color. The following SVG example has a radialGradient that uses 6 different stops, with six different colors, creating a nice neon light effect. The radialGradient is then used to fill a rectangle, rather than a circle.

Four issues with the radialGradient, all specific to browsers. I’ve found that the reflect spreadMethod can cause minor havoc with the Firefox 3.x browser in the Mac, pushing down the size of the area, without necessarily impacting on the visual rendering. This makes it a bit tricky to define a view port, or include the SVG using the object element. Opera 9.5b has some rendering delays when using gradients, and Safari/Webkit doesn’t respect the object’s transparent background. You’ll also need to use a SVG plug-in with Internet Explorer. I’ll have more on the issues of browser SVG support in a follow up writing, which I’ll link here when finished.

To see radialGradient in action, check out the following from Open Clip Art:

Dave Pena’s Sakura, which uses opacity and the radialGradient to create the soft hues and gradual coloration. This image was pulled from the downloadable archives.

A wonderful workstation by Kobo. Notice the hard “light streak” across the monitors? I discuss this use of a light streak to provide an impression of a hard, shiny plastic surface in the book.

A tasty cake from Jean Victor Balin.

Zipped files of all the book examples can be downloaded from the O’Reilly book support site.

Categories
Media SVG Writing

Working…

I’m almost ready to go live with the site. Right now I’m trying to create a custom Drupal theme from this site’s design. Once that’s finished, then we’ll be in business.

The image below was created by converting two bitmap graphics, the book cover and a painter’s easel, into one combined image using SVG–Scalable Vector Graphics.

Though the book cover image was large enough for my intended use, the easel wasn’t and using SVG allows us to resize images beyond the original and without pixelation. The combined image was sized to what you see here, and then re-converted back into a bitmap graphic, in this case a PNG.

I used Vector Magic to convert the bitmap images to SVG and Inkscape to convert back to the bitmap. Inkscape also has a bitmap trace function to convert from bitmap to vector (SVG), but I’ve not found it to be as good as Vector Magic for my purposes.

I received my inspiration for the drop shadowed clip art used in all of my sites from the old English/Victorian toy theaters. These wonderful creations featured static backdrops painted like a theater set, with characters that could be clipped or cut out from a book, pasted to a stick and then used to re-create a specific play. Ironically enough, toy theaters lost their popularity with the advent of television, itself endangered by the increasing use of the web to deliver video content. What goes around, comes around.

All is not lost for toy theater, though. Released last year and with a planned US release of this summer, a new movie adaption of Dante’s Inferno was created with modern theme and as toy theater. If your computer can swing it, select the HD trailer. Note that this trailer does have a mature theme.

For the more ambitious, a laptop framed in a toy theater box.

Categories
Burningbird

One hundred and forty characters

This is my first post in RealTech using Drupal. Once I finally figure out how the template system works and finish setting up my other sites, perhaps I’ll be able to write something again.

I’m not sure what I’ll be writing, other than I know that nothing I write will be less than 140 characters in length.