Categories
Web

Shock, Awe, Economics, and the Web

Battered into a fetal ball by waves of bad economic news, only surfacing to watch an occasional crash and bash flick, such as Iron Man, I discovered my own personal bailout via Naomi Klein’s book, “The Shock Doctrine: The Rise of Disaster Capitalism”. Oddly enough, it wasn’t something that Klein wrote (though she has many interesting points and I hope to write more on her book at a later time). No, it was a quote by the master of the Chicago School, Milton Friedman, himself, that loosed my death grip on self. As introduction to his book, Capitalism and Freedom, Friedman wrote:

only a crisis—actual or perceived—produces real change. When that crisis occurs, the actions that are taken depend on the ideas that are lying around. That, I believe, is our basic function: to develop alternatives to existing policies, to keep them alive and available until the politically impossible becomes politically inevitable.

The irony that the free market system Friedman loved so well is now experiencing its own “shock and awe”, as corporations grasp at despised government intervention, like a baby its bottle, has not escaped me. But for me, the operative phrase in this quote is “the actions that are taken depend on the ideas lying around”. This is totally irreverent to the problems we’re facing, and I apologize in advance for seeming to trivialize the very difficult times we’re all facing, but when I read this phrase I thought to myself, “Internet Explorer, your days are numbered.”

Consider this: movement forward in the web has been stymied in recent years because, we’re told, thousands of corporate intranets, and millions of corporate employees using these intranets are dependent on tricks and hacks put into place to support Internet Explorer 6. Add to this the, in my opinion, anal fixation that web pages must look the same in every browser, and most of our page design has been stuck like a bug in pitch.

Now that the corporations are downsizing in order to preserve what they can of executive compensation, the machines on which these applications run are being sold for scrape, tossed out along with the other chaff (i.e. employees). And those still employed, frankly, have other concerns than whether IE supports opacity or not.

I don’t believe I’m alone in seeing the Friedmanesque possibilities of our current economic disaster. What better explanation for the recent production release of Google’s Chrome browser? Google released Chrome from its beta utilizing a speed for which the company is not known. After all, isn’t the GMail still in beta? Come to that, isn’t the Google search engine still in beta?

Then there’s the fact that Chrome is currently only supported in Windows, just like IE. Only like IE, as a matter of fact. No, I am sure that Google sensed corporate shock, and moved quickly to displace IE in the hearts and minds of upper management—not to mention the hearts and minds of millions of newly unemployed workers who are no longer subject to the intransigence of corporate IT. If by doing so, Chrome also kicks Firefox, Opera, and Safari in the face in its haste, eh, casualties of war.

I am not displeased by Google’s move. After all, Chrome supports XHTML and some SVG, both of which Microsoft seems incapable of implementing. However, there is some confusion about what Chrome is, or is not, capable of supporting. True, Chrome has utilized the excellent WebKit, which also serves as the soul of Safari. However, as others have discovered and my new experimentation in web design demonstrates, Chrome has a different graphics engine (Skia) than Safari/Webkit. In the interests of “stripping” down the browser to make it lean and mean for web applications, the developers also made it rather, um, unattractive. At least for now. If you view this web page using Chrome, you will see that Google currently does not support the CSS3 text-shadow property, though it does support box-shadow. It also supports border-radius, though badly—the anti-aliasing is less than optimal, as is the support for alpha transparency.

While it is true that text-shadow, box-shadow, and border-radius are CSS3 properties, and thus not part of a released specification, they are supported in Safari 3.1 (and Firefox 3.1 and partially in Opera 9.x). Because of the Webkit tie-in between Safari 3.1 and Chrome, people may be confused when what works in Safari, does not work in Chrome. Well, those people who don’t have other, more pressing, worries.

Screenshot of Chrome in action

Categories
Graphics/CSS

Incorporating CSS3

With the growing support for CSS3 in most of the major browsers, including Firefox, Safari, Opera, and now Chrome, I decided to incorporate the use of CSS3 properties into my own site designs. In addition, I also used an SVG graphic whenever I wanted a background that sized with the page.

The CSS3 properties I’m most interested in are text-shadow, box-shadow, border-radius, border-image, in addition to support for RGBA opacity. No more having to use kluge methods to add curved corners, or shadow text; no more stretched transparent PNGs, or layered DIV elements in order to provide border images. Though not all browsers support all of the properties, as long as we use the effects carefully, the designs should degrade, nicely.

text-shadow

The text-shadow attribute is from the CSS3 Text Module, which is currently in candidate recommendation. It’s implemented as follows:

h2 { text-shadow: #ccc 1px 1px 2px }

The first parameter is the color specification used for the shadow, the second and third are the shadow offsets (horizontal distance to the right, vertical distance to the bottom), and finally the radius of the blur. The setting just described is quite subtle, and the shadow effect not immediately apparent when looking at my sites. I use the above CSS setting to add a level of richness to the header text in my sites, rather than create a noticeable text shadow.

I use more distinctive text-shadow settings for my site titles, including another subtle effect for the Secret of Signals web site. Though it may not be apparent, there is a text-shadow applied to the header, but the offsets are set to zero, which creates a “glow” around the text—white for inactive, red for when the header link is active—rather than a distinctive title.

#header h1.site-name a {
  color: #fff;
  text-decoration: none;
  text-shadow: #fff 0 0 6px;
}

#header h1.site-name a:hover {
  text-shadow: #f00 0 0 6px;
  color: #f00;
  text-decoration: none;
}

The text-shadow works with Safari 3.1, Opera 9.6 and up, and the beta of Firefox 3.1. Neither Chrome nor IE8 currently support text-shadow.

box-shadow

The box-shadow CSS3 property is part of the backgrounds and borders module, which is currently only in draft status. Since this module and the properties it describes are a work in progress, we need to apply the new effects, like box-shadow, using each company’s CSS extension naming procedure:

  • -moz-box-shadow for Mozilla/Firefox 3.1
  • -webkit-box-shadow for Webkit/Safari 3.0 and up and Chrome

The syntax for box-shadow is:

  -moz-box-shadow: 1px 1px 10px #00f;
  -webkit-box-shadow: 1px 1px 10px #00f;
  box-shadow: 1px 1px 10px #00f;

In addition to the extension listings, I also include the final box-shadow property, so that I don’t have to modify my CSS style sheet when the module reaches candidate recommendation status.

The first two parameters are the shadow offset, just like with text-shadow. The third is the radius of the shadow blur, and the fourth the color of the shadow. This setting is what I use for the blue menu bar in the top, right corner of Secret of Signals in addition to the shadow effect I use around the sidebar and content area in this space. Again, as with the text-shadow effect described earlier, using a small offset and a large blur radius creates a “glow” around the box, rather than a sharply defined shadow. The larger the blur radius value, the more diffuse the shadow effect.

In this site, I’m using the box shadow to “soften” the hard edges of the sidebar and content columns, as well as enhance the “candle effect” of my incorporated Burningbird symbol. In Secret of Signals, I’m trying to emulate the glowing blue buttons we see on our USB devices. In MissouriGreen, I use a more traditional shadow effect around the top menu items.

Currently box-shadow is not supported by IE or Opera. The box-shadow does work with Chrome, but when combined with the next CSS3 property I’m covering, border-radius, the effect is less than optimal.

border-radius

The border-radius property is also a part of the CSS Backgrounds and Borders module currently in work at the W3C, and as such, each browser that supports it, does so with its own extension naming. To me, the border-radius property is important because with it, we can finally begin to simplify our web sites, eliminating all of the nested div elements we’ve used in order to create the effect of rounded corners.

The following is an example of the syntax used with border-radius:

  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;

The parameter represents the “radii of a quarter ellipse that defines the shape of the corner of the outer border edge”, according to the specification documentation, and is a shorthand technique for the longer specification of each corner:

border-top-left-radius:     30px;
border-top-right-radius:    30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius:  30px;

Currently, I am using a border-radius for the columns and menu list in Secret of Signals, and the columns in this space. However, the corner curvature does not show for the menu items in Safari and Chrome, as neither browser currently implements border-radius for list (li) elements. However, both Safari 3.x and Chrome, in addition to Firefox 3.x and up, do support the border-radius on the div elements acting as columns.

One caveat when it comes to using border-radius with box-shadow together: Chrome does not map the edge of the box shadow to the curved border, leaving a rather disfiguring “black” filling in the gap between. Of all the browsers and effects, this is the only instance where an applied effect does not degrade well.

border-image

The last CSS3 property I have incorporated into my sites, at least for now, is the use of border-image at MissouriGreen. This is a wonderful CSS property that is a little tricky to implement, but well worth the effort. As with border-radius and box-shadow, it is part of the CSS Backgrounds and Borders module.

I created a single image to use in my MG borders.

[image gone]

I wanted this image to serve as border or my individual posts, except that I wanted the top leaf to be at the top, left border, the bottom two leaves to form my bottom, right border, and I wanted the tips of the leaves to “stretch” to form an enclosure for the text block.

The CSS specification I use is:

  -moz-border-image: url('leaves.png') 48 52 43 40 stretch stretch;
  -webkit-border-image: url('leaves.png') 48 52 43 40 stretch stretch;
  border-image: url('leaves.png') 48 52 43 40 stretch stretch;

The parameters for the property are the URI for the image, four values that determine, respectively, the height of the top edge for both top corners, the width of the right edge, for both right corners, the height of the bottom edge, and the width of the left edge. The final two parameters instructs the browser how to scale or tile the border image.

In MissouriGreen, the upper leaf in the border image is 50 pixels tall and 45 pixels wide; the two lower leaves are 55 pixels wide, about 45 pixels tall. When I specify 48 pixels for the upper corners, the part of the image that would be used for the upper right corner is transparent pixels, and so no image shows. However, the part of the image used for the upper left is the solitary leaf, but the amount I specify feels just above the end of the stem.

The width I give for both right corners again uses only transparent pixels for the upper right corner, but the two leaves are used for the bottom right. Again, though, the width I specify falls just to the right of the end of the leftmost leaf.

The bottom edge falls just short of the top of the rightmost leaf in the double pair. For the left width, the amount given places the edge just before the tip of the solitary leaf’s right border.

MissouriGreen border image

How the border image fills the space given around the nodes is based on where I set the edges in the previous four values (notice all were just before the leaves’ terminating edges), and the next two parameters, in my example both given as stretch. The first parameter determines what happens to the image’s top, middle, and bottom border, while the second parameter controls the left and right borders. The allowable values are “stretch”, which means to stretch the image, and “round”, which will tile the image, rounding it in such a way that it fits within the given space.

By using stretch, what I’ve done is instruct the browsers to take the leaf tips and stretch them out, along the sides, top, and bottom. Since the image is stretched, and the dimensions I provided show leaf tips ending in transparency, the ends stretch, more or less, evenly along the sides, top, and bottom, creating an open enclosure around the text.

Other uses of the border-image property can specify a different border image for each border, as well as an image with graphics that would scale and tile nicely to fully enclose the space—the W3C Borders and Background module includes a nice example.

RGBA

The support for RGBA comes with the CSS Color Module Level 3, which is in draft state. Most browsers support an RGB color space, but only Firefox, Safari, Chrome, and now Opera 10 beta, support RGBA.

Why RGBA is important is that it gives us the ability to define the opacity for an element, without having to use the opacity property, which not only impacts on the element, itself, but also the contents of the element. With RGBA, I can set both the color and alpha transparency of an element (the -A part), and not impact on the opacity of the contained elements.

#sidebar-wrapper { background-color: rgba(255,255,255,.80); }

The first three parameters are the Red-Green-Blue values for the color (in this case, white), and the fourth is the alpha transparency value, in this case an 80% opacity value. I use this value for my sidebar at this site, and other variations for the content, and the footer. As you can see, setting the alpha transparency of the background for these page content areas does not impact on the opacity of their contents.

Opera 9.x doesn’t support RGBA, but you can specify an RGB setting, first, and the browser will pick that up and use it.

This is one where IE does not degrade gracefully. If you specify an RGBA value, IE doesn’t understand it but rather than use the previously defined RGB setting, it falls back on its default. However, there is a simple trick to get around the problem. IE also doesn’t support certain of the advanced selector syntax, while other browsers do. A simple, cross-browser solution for using RGBA is the following:

#footer { background-color: #fff; }
html>body #footer { background-color: rgba(255,255,255,0.8); }

Degrading Gracefully

None of these effects currently work with IE8, the box-shadow, border-radius, and border-image don’t work with Opera, and text-shadow doesn’t work with Chrome, but the sites look fine without any of these effects. The only problem I’ve experienced is with Chrome and mixing border-radius and box-shadow, and I’ve left the effects, as a reminder to Google that it’s better not to implement support for specific CSS properties, rather than do a half-assed job of it.

Though not specific to CSS3, I also used SVG as background for this site and Secret of Signals: a wavy background in reds to represent the ‘signal’ in Secret of signals; and a white on blue curvy effect in this site to represent smoke, and to complement the “soft corner” effect I was creating. Both are deliberately sized just to the original browser window, not the entire contents, as the latter stretches the patterns too much. However, resizing the browser window will re-size the pattern. Opera, Firefox, Safari, and Chrome all pick up the SVG, IE does not.

For more on CSS3, I recommend CSS3.info.

Categories
Diversity Technology

Women in Tech: Maria Webster

Virginia DeBolt has posted another in her series on Women in Technology, this one about Maria Webster from .51. It’s a terrific interview, and appreciations to Virginia in her effort to promote more awareness of women in tech.

Maria is an Über geek, with interests that cross the lines from computers to electrical engineering, ham radio, to physics, and all points between. And Tron, which reminded that I hadn’t seen this movie in years.

Categories
Healthcare

Why are all those states dark blue?

Now this is damn clever: using Google searches to trend flu outbreaks. Google is aggregating flu-related searches into trending where flu outbreaks might be occurring, or about to occur.

So far, knock on wood, the flu trend graph shows low activity for Missouri.

Categories
Semantics

RDFaification of Drupal 6

You don’t have to wait for Drupal 7 to RDFaificate your Drupal site. I spent yesterday tweaking my space, and if you access the site now with a tool, such as the Semantic Radar Firefox add-on, you’ll see all sorts of semantic goodness. I used a combination of plug-ins and theme modifications to make my changes, and will probably add to the overall effect over time.

What simplified my RDFa integration is that my site was already being served up as valid XHTML, via a modification to my page.tpl.php file:

<?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");
?><!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="<?php print $language->language ?>">

The PHP code checks with the user agent accessing the page. If the user agent accepts XHTML, the code returns the pages as XHTML; otherwise, the pages are returned as HTML. However, the DOCTYPE I had been using was a SVG+MathML DOCTYPE, because of my sometimes use of embedded SVG. To validate as XHTML+RDFa, though, you need to use the RDFa DOCTYPE.


<?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");
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" 
   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<head profile="http://ns.inria.fr/grddl/rdfa/">

The namespaces in the HTML opening tag don’t reflect all that I’ll use in my pages, just the ones I used for RDFa annotation sprinkled, liberally, throughout the page. When I use embedded SVG, I can just add the SVG namespaces directly into the opening SVG element tag. I could add the namespaces now, but I don’t always use embedded SVG.

One unfortunate consequence of switching DOCTYPEs is that when I do use embedded SVG, the page won’t validate. However, this won’t impact on the user agents and their ability to process the SVG correctly, so I’ll just have to live with the invalidation errors. That’s the joy of DOCTYPEs.

Another change is to the opening HEAD tag, where I added the GRDDL profile. This lets data consuming agents know that I’m, first of all, using RDFa, then secondly, using the latest transform profile for RDFa. After all, once the data is provided, we assume someone will want to do something with the data.

I’m ready, now, to begin adding RDFa annotation. Some of the changes I can make directly to the theme pages, such as adding an attribute/value pair of property=”dc:title” to my header element that references my site’s title (“Burningbird’s RealTech”). I also added annotation within the node, via node.tpl.php, again adding property=”dc:title” to each individual site entry’s title.

Other annotation, though, required either the use of a Drupal module, or custom code. For instance, one change I wanted to make was to add a a property=”dc:subject” to my vocabulary terms. In my template.php file (used to override and extend the theme templating engine), I added a taxonomy term function that will not only append the vocabulary to each term, but also annotate the result with the RDFa dc:subject notation:

// split out taxonomy terms by vocabulary
function burningbirds_print_terms($nid) {
     $vocabularies = taxonomy_get_vocabularies();
     $output = '<ul class="links inline">';
     foreach($vocabularies as $vocabulary) {
       if ($vocabularies) {
         $terms = taxonomy_node_get_terms_by_vocabulary($nid, $vocabulary->vid);
         if ($terms) {
           $links = array();
           $output .= '<li property="dc:subject">' . $vocabulary->name . ': ';
           foreach ($terms as $term) {
             $links[] = l($term->name, taxonomy_term_path($term), array('rel' => 'tag', 'title' => strip_tags($term->description)));
           }
           $output .= implode(', ', $links);
           $output .= '</li>';
         }
       }
     }
     $output .= '</ul>';
     return $output;
}

In the node.tpl.php file, I then replaced the existing print $terms line with a reference to my custom terms display function:

    <div class="taxonomy">
      Tagged: <?php print burningbirds_print_terms($node); ?>
    </div>

Other areas that can be annotated with RDFa in an entry are the author and date, but I didn’t have to code these or modify the theme template directly. Instead, I downloaded and installed the Submitted By module. Once installed and activated, this module provides an “Appearance” field in the content type form, which you can use to modify the “submitted by” line in posts.

By default, the template engine generates a line with the author’s username, linked to their user profile, and the date and time when the entry was created. I modified the field to show the author’s name, without linking to the author profile, since I’m the only author. I also modified the post date to just the date. Time, to me, just isn’t relevant for my site. Adding the appropriate RDFa annotation results in the following pattern:

<span property="dc:creator">[author-name-raw]</span> on [day], <span property="dc:date">[yyyy]-[mm]-[dd]</span>

Now that I’ve annotated several elements in the page with RDFa, I went shopping around at various semantic websites to see what else they were providing by way of semantic markup. At Danny Ayers weblog my Semantic Radar toolbar alerted me to the presence of SIOC (Semantically-Interlinked Online Communities Project) data, one of the recommended data types supported by Yahoo’s SearchMonkey. I did a little research and found the SIOC Drupal module, which I downloaded and installed.

The SOIC module automatically generates SIOC, which can be accessed as a direct RDF export. I gather that the module also adds a link to this metadata via the menu system, but I found this only works with a theme like Garland’s. I wanted to be able to integrate a link in the header of my web pages, to page specific SIOC exports, wherever applicable. I checked the module’s documentation, and elsewhere, but couldn’t find anything on automatically adding this link, so decided to add it myself in my theme.

In Drupal, at least 6.x, you can add a preprocess function that will pre-process web page data before the page is displayed. I had such a pre-process function already, to modify my header to a) remove the RSS 2.0 link, and b) modify the content type meta tag to reflect my XHTML content type. It was a simple matter to modify this code to include a conditional check to see if the page being served is the Drupal front page, and if not, whether the page is presenting a node of type story, blog, or user. If the former, I provided a link to the site’s main SIOC export URL; the later, one specific to the node:

function burningbirds_preprocess_page(&$vars) {

  $head = $vars['head'];
  $node = $vars['node'];
  $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);
    
  if (drupal_is_front_page()) {
    $head .= '<link rel="meta" type="application/rdf+xml" title="SIOC" href="http://realtech.burningbird.net/sioc/site" />';
  } else if ($node->type == 'story' || $node->type == 'blog' || $node->type == 'user') {
    $head .= '<link rel="meta" type="application/rdf+xml" title="SIOC" href="http://realtech.burningbird.net/sioc/node/';
    $head .= $node->nid;
    $head .= '" />';
  }

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

For the node pages, I check to see if the node type is blog, story, or user, as these are the only node types currently supported by the SIOC module. Once this change was in effect, a header link to the SIOC file now appears with the main site page, and with blog, story, and user pages.

This is a start, as I explore other ways to annotate my site with metadata. I also plan on using metadata annotation when I do reviews and other specific types of writing. In addition, I’ll probably add a generic FOAF page, as well as utilize other vocabularies as they present themselves. If you don’t have the Semantic Radar toolbar installed, you can use the W3C RDFa extractor to extract the site’s RDFa. You can see the SIOC by accessing the exporter for the site or an individual entry, such as this story.