Category: Technology

Categories
SVG

SVGWeb and the XML Issue

I’ve been playing around with SVGWeb, liking the library more over time. I re-created the SVG in HTML5 example, and at first it didn’t work. I thought it could be because SVGWeb couldn’t manage the metadata element, but when I loaded the page in Firefox, with Firebug, I found that the SVG/XML still had the bugs I inserted to test whether the Firefox nightly would correct the HTML-enabled errors—the example still had an unquoted attribute, and elements with missing tag ends. In fact, I got XML error messages within the Firebug console exactly I would expect such errors if I loaded the SVG directly in the browser.

SVGWeb manages SVG for browsers that can handle SVG by creating an XML document of the SVG. You can tell, because if you click the circle with the new example, all of the namespaces for the RDF/XML elements are handled properly, even though the page is parsed as HTML. To me, this is the way SVG should be handled in a document, whether the document is parsed as HTML or as XHTML. This pretense that SVG is not XML when its in HTML is patently absurd. It doesn’t map to anything that exists in the real world.

The SVGWeb library is a wonderful tool, but I would really prefer all that functionality be embedded directly in the browser handling of SVG in HTML. I read the past discussions on SVG in HTML, about how trying to maintain the XML nature of SVG within HTML would require “exceptional parsing rules”, or something of that nature. It seems, though, that SVGWeb is managing the issue just fine, and doing so without having to make one change to any parser for any browser. SVGWeb works by generating a SVG document and inserting the document into the DOM (if the browser supports SVG). Technically, this is little different than what happens for inline SVG in XHTML now. So why is this a perfectly acceptable approach when using script, but not acceptable when not using script?

I’m also aware of the discussions about mixing content, such as SVG in MathML, and MathML in SVG, and HTML5 in both. I made another copy of the example, this time inserting an HTML5 paragraph element into the SVG. Since the syntax I used was proper XML (no unquoted attributes, closing paragraph), it parsed without an error, but the paragraph didn’t display. Of course not, because there is no paragraph element within SVG, and the SVG is treated as an SVG document, not an SVG in HTML document. The thing is, though: the paragraph wouldn’t do anything in SVG within an XHTML document today.

However, returning to the example I linked earlier, I did insert HTML into the SVG using the SVG foreignObject element, with proper syntax, and as you can see, the HTML does display correctly. In fact, if you scroll down, I also created a second SVG element, this time with MathML as the foreignObject contents, which renders fine in Firefox, and partially everywhere else, depending on MathML support.

All of this works, and works well, when using SVGWeb. You can even access namespaced Rdf/XML elements in the XML, using the proper namespace functionality, but the page still validate using Validator.nu. All of the portentous grumblings about the horrors of mixing HTML and XML just don’t ring as ominously when one can see that, contrary to the dire warnings, and tales of potential woe, the two can mix. Unfortunately, the only way to mix the two, now, is to be dependent on a Google JavaScript library. Don’t get me wrong: I’m grateful for the library. So grateful, in fact, that I don’t recommend the use of SVG inline with HTML unless you use this library.

I just don’t like being dependent on JavaScript for that which should be and can be, natively supported in a browser. This approach requires library intercession for all instances of SVG use, which means the SVG markup won’t be accessible to server-side applications that disregard the script element. This JavaScript dependency also means the SVG won’t be visible if scripting is disabled, even though SVG does not require scripting support. When scripting is enabled, the approach is still inherently inaccessible.

These are the two choices facing us with SVG in HTML: SVG/XML treated as HTML, and all the problems this causes; or SVG/XML treated as XML, but requiring JavaScript.

Categories
SVG

SVG in HTML

I’m writing an article on using SVG for site decoration and backgrounds. Since SVG is now allowed in HTML via HTML5, it seemed a good time to introduce people to the concept. Especially since the nightly build of Firefox 3.7 has a configuration option (“about:configure”) where you can enable HTML5.

To test the new option in the Firefox nightly, I created a simple file, with a SVG red circle that can be resized with JavaScript. (HTML5 version and XHTML version).

Clicking on the circle will resize it, but also throws up some alerts outputting information about metadata in the element, including namespace, prefix, and element tag name. I wanted to see how Firefox parsed the SVG via HTML, as compared to XHTML. After all, it’s not unusual for SVG files to have namespaced entities in them, for metadata (Creative Commons RDF/XML), or even placed by a tool (Inkscape).

The results are about what I expected. The namespace, prefix, and tag element name all displayed according to their namespace goodness in XHTML, but the namespace didn’t work with the HTML parsing.

To me, this isn’t a showstopper. People who have been working with the DOM and JavaScript have had to deal with differences through the years, such as event handling differences between IE and the rest of the browser world. You just check to see MIME type of page, and either expect to look for the localname as a mashup between prefix and local name, or it’s handled properly.

It’s a little *challenging because prefixes aren’t always going to be the same. However, for the most part, if you need to access the data, you can either control the prefix used, or you can work through the differences without having to resort to rocket science. I rather expect both Dojo and jQuery to incorporate this functionality, once HTML5 gets wider use.

I also have been trying the new SVGWeb product from Google, and fine folks like Brad Neuberg, which enables SVG in HTML for all browsers, including IE. It does this by incorporating a JavaScript library that implements most of the SVG in Flash. Since Flash is pretty much ubiquitous, folks won’t have to install something new for the page to work.

I’ve used SVGWeb to manage the background image for The SVG Feed, which is now formatted as HTML5, and served as HTML. It works nicely in Safari, Opera, Firefox, and even SVG-challenged Chrome, but IE has a problem. Unfortunately, height and width are handled differently with IE as compared to the other browsers, so the values are coming up null in IE. However, Brad has added this as a bug, and I expect this page will work in the next iteration of the product.

Now, there are some differences between SVG parsed by an HTML5-enabled browser, and using SVGWeb. My earlier example embedded SVG directly in the page, but SVGWeb expects an inline SVG element to be enclosed in a script tag:

<script script type="image/svg+xml">
<svg...
</script>

Embedded SVG in a script tag won’t work if you’re only dependent on HTML5 parsers. However, SVGWeb also works with HTML5 parsers, so you’re set, either way.

Until all browsers support SVG, in HTML or XHTML, SVGWeb provides the first real breakthrough in using SVG on the web. And here you thought that SVG was only good for **Scrapbooking.

*It’s a little more challenging for server-side applications parsing the web page, but again, the differences aren’t insurmountable.

**The background SVG I’m using for my site originated as a scrapbook pattern for the cutting machine, Cricut.

Categories
Technology Weblogging

WordPress attacks

I’m usually good about reminding (nee nagging) my friends about updating their WordPress weblogs, but in case any of you missed the last upgrade, there’s a good chance your weblog may have been seriously compromised. Lorelle covers the exploit and how you can tell if your site has been compromised.

From other discussions, I gather that if your site has been compromised, it’s going to be a mess to try to fix the problem, because the hacked software is now a part of the database, so exporting your data and re-building won’t help.

It’s not unusual for CMS to develop security problems that need fixing, but I am a little surprised that there’s been no official statement from the WordPress folks and the parent company, Automattic about this issue. Regardless of notification, it’s really important to always update your sites when security releases are issued, no matter what software you use. When I get an update notice for my Drupal sites, I update immediately. If updating is too much of a hassle, or you’re intimidated by the process, then you need to hire someone to help you with upgrades, go with a hosted solution, or change your software.

update Robert Scoble’s site was one that was hacked. There’s an interesting discussion on this at FriendFeed though how long that link will be viable, is hard to say.

I found it disingenuous of Matt Mullenweg to blame Rackspace for the problem Scoble had because of the WordPress exploit. Having said that, security updates rarely impact on plug-ins, and if a plug-in is broken, disable it and do the security update, anyway. I don’t know of any module in Drupal, outside of core, that I am so dependent on that I can’t upgrade Drupal based on a security release. But then, the modularization architecture with Drupal is different than that for WordPress.

As for Scoble, I feel for him, but he’s got plenty of free support. I feel worse for the folks who have to go it alone when trying to fix their sites. Hopefully some of the new articles on this story will provide the help you need, including one just released by Matt at WordPress. I’d offer to help, but I don’t run WordPress now, and I’m becoming less familiar with the tool with each new release. Still, if you’re desperate, holler, and I’ll see what I can do.

Categories
Social Media Technology

The Tweet stuff: When it absolutely positively has to get there

If we’ve learned one thing from this week’s massive attack against the very fabric of our social connectivity, it’s that clouds don’t make the best stuff on which to build.

Twitter, in particular, has shown how very vulnerable it is—a vulnerability we share as we become more dependent on Twitter for most of our communication with each other. Oddly enough, I needed to contact someone about a business opportunity just as Twitter universe began to crumble, but all I had was her Twitter name—I couldn’t find her email address. Since Twitter was down, I couldn’t connect up with her for hours.

Of course, massive DDoS isn’t all that common, but Twitter still hasn’t recovered from the attack. As I’ve been playing with new Twitter accounts this week, I found varying degrees of responsiveness across the accounts, probably based on how busy they are; possibly based on how many followers a person has. None of the accounts would allow me to change most profile information, including the design. As you can see with my new integrated @shelleypowers Twitter account, I haven’t been able to change the picture, or to delete or add a new background image. I’ve had varying success with just posting a new message.

I have never liked centralized systems, though I understand their appeal and worth. It always seems, though, that just when you start to depend on the centralized service something happens to it.

Yahoo is now out of the search engine business, and with its new business partnership with Microsoft, its side applications like delicious are now vulnerable. I’ve managed to replace delicious with Scuttle, though I no longer have the social aspect of delicious. However, my Scuttle implementation does an excellent job with bookmarks, which is what I needed.

Then NewsGator sent an email around this last week telling all of us that our NewsGator feed aggregator is being replaced by Google Reader. I don’t like Google Reader. More importantly, I really don’t want to give Google yet more information about me. So, I replaced my NewsGator/NetNewsWire installation with a Gregarius implementation. It took me some time to get used to the new user interface, and I’ve had to password protect the installation, but I’m not dependent on a centralized feed aggregator, which can, and did, go away.

Twitter, though. I was not a big Twitter fan at first, but I can see the benefits of the application, especially if you want to point out an article or something else to folks, and have it quickly, virally spread, in a nice swine flu-like manner. It’s fun to have a giggle with folks, too. But the darn thing is centralized, and not only centralized, vulnerable and centralized, which gives one pause.

I have an Identi.ca account, too, but most folks are in Twitter. You can integrate the two by linking your identi.ca account to Twitter, as I have. Still, identi.ca is also centralized, just located in a different slice of the internet pie.

I finally bit the dust this week, and installed my own version of Laconica which is the microblogging software used with identi.ca. There were a couple of glitches, not the least of which were two very minor programming typos in the install program (yes, I have turned these in to the developers and it should be fixed, soon). However, the application is actually quite easy to use. I’ve had fun playing around with a new theme.

Just like identi.ca, you can connect an individual Laconica account up with Twitter, but doing so would cut my identi.ca account out of the picture. Beyond just the identi.ca issue, I also want to be able to display a list of links in my burningbird.net sidebar, with expanded URLs, so folks get search engine mojo. I could aggregate tweets, but you end up with shortened URLs, not expanded URLs when you go from tweet to sidebar. Besides, a sidebar link and a tweet are not the same thing, with the same structure.

I finally created my own tweet workflow, as I like to call it.

  • First, I installed Laconica, created a single user account (at this time), and then disabled registration. I don’t want to run a Twitter alternative.
  • Next, I found software, RSSdent, which will take an RSS feed and submit the items as tweets to identi.ca/Laconica. What I did was modify the application to submit the body of the feed without a link to the feed. The reason I don’t want the URL is that the feed I’m syndicating is my newly created Laconica installation. The body of the items will have the links that matter. Since I didn’t need any URL shortening (happening sooner in the process), I was able to trim much of the code, leaving a nice simple little application.
  • I set up a cron job so that items posted to my individual Laconica account will get posted to my identi.ca account every hour.
  • I connected my identi.ca account to my main Twitter account, at @shelleypowers. Now, when an item is posted in my identi.ca account, it gets posted to Twitter.
  • I can individually post in my Laconica account, but I also want to capture the links for my main Drupal installation, at Burningbird. There is a Drupal Twitter module, which works with identi.ca (by using indenti.ca/api as the alternative URL), or a Laconica account (in my case, using laconica.burningbird.net/api/). The only problem, though, is that this module is used to post a status update reflecting a new weblog post, not an interesting link. It gives you options to post the title, post link, and/or author, but not the body.
  • To work around the problem, I created a new content type, linkstory, with a custom content field (via CCK) that contains the link of interest and it’s link text. When I create a new linkstory, the body contains the tweet text and the expanded or shortened URL (depending on how long the URL is), but the CCK field contains the expanded link and the text I want for the link text.
  • I then created a view to display the content field text and URL, but not the body, or title of the posting.
  • I copied the Twitter module and did a small tweak (tweak, twitter, tweet — my head just blowed up) so that it outputs the body of the post, when I provided the !body label.
  • When a new linkstory is posted, the full link and link text get put into the sidebar, while the post body, containing the possibly shorted URL and any message get posted to my Laconica account.

The full workflow is: create a new linkstory or regular post in Drupal, which gets posted to my Laconica account via my modified Twitter module. Once a hour, these postings are picked up by rssdent, and posted to identi.ca. Posting on identi.ca automatically posts to my Twitter account.

If Twitter goes offline, the posts still get made to identi.ca. If identi.ca goes offline, the post is still made to my Laconica account, and the fully expanded URL for the link is posted to my main web site. My rssdent application keeps trying, once an hour, to post to identi.ca, and hence to Twitter. My modification to the Twitter Drupal module was an addition, so I can tweet posts and links, alike.

It sounds like a lot of work, but it was only about a day’s fun playing around. I plan on submitting my small Twitter Drupal module tweak as a patch, and hopefully it will be accepted. It only adds new functionality at the cost of one line of code. I’ll check in my fork of rssdent, but I need to figure out how github works. The Laconica installation didn’t require any modification, once I made the code corrections. These corrections should be incorporated into the original application, hopefully soon.

Now, this isn’t spamming. Everything gets posted to one place, though if people are subscribed to my Twitter and identi.ca accounts (or even my Laconica account), they’ll get an echo effect. This is just me grabbing hold of a little independence, while still partying with the communes. Setting my Bird free.

update I’m still getting familiar with the Twitter/Laconica API, but received a message via my identi.ca account from csarven about remote subscriptions. I can subscribe to identi.ca folks, as well as other Laconica sites, using the REST API. For a Laconica site, attach “?action=remoteSubscribe” to the URL, and you’ll get a page to enter the nickname of the person to whom you want to subscribe (at that site), and your remote profile, such as http://laconica.burningbird.net/shelleypowers. Or if you’re not logged into the system, just clicking the subscribe button next to the person’s avatar will open the Remote subscription page, automatically.

Once you enter the remote subscription request, you’re then taken back to your own site, where you have to accept the request. This prevents spamming. Once accepted, when you access your Home location, the postings from your remote friends will show up, in addition to postings from your friends who are local. You can also reply to the individual.

This functionality is also available for Twitter, built-in, but on my system, trying to use it caused errors. This is a known bug and a fix is currently being developed.

This is truly distributed, and decentralized, connectivity. You can’t take a system like this down, no more than you can take all email down, or all weblogs down. Way of the future.

Now, I must find out what other goodies are in the API…

Categories
Technology

Embedded fonts with font-face

I’m experimenting with my first attempt at using embedded fonts here at RealTech. I’m using the Gentium Basic TrueType font, which I downloaded from Font Squirrel. Since Internet Explorer doesn’t support truetype fonts, I had to use the ttf2eot application to convert the truetype into EOT, which is what Microsoft supports. Edward O’Connor has a nice writeup in how to use ttf2eot. I downloaded my copy of the utility, since I couldn’t get the Macports version to install. You can also use Microsoft’s WEFT utility on Windows.

(update There is also a Gentium Basic font-face kit that contains everything you need, including EOT files and a stylesheet.)

Once I had both versions of all the font files uploaded to my server, I added the CSS for the font-face rules. You can add these rules as a separate file, or include them in your stylesheet, whatever rings your bell:

/* For IE */

@font-face {
        font-family: 'Gentium Basic';
        src: url('GenBasR.eot');
}

/* For Other Browsers */

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Regular'),
             local('GentiumBasic-Regular'),
             url('GenBasR.ttf') format('truetype');
}

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Italic'),
             local('GentiumBasic-Italic'),
             url('GenBasI.ttf') format('truetype');
        font-style: italic;
}

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Bold'),
             local('GentiumBasic-Bold'),
             url('GenBasB.ttf') format('truetype');
        font-weight: bold;
}

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Bold Italic'),
             local('GentiumBasic-BoldItalic'),
             url('GenBasBI.ttf') format('truetype');
        font-weight: bold;
        font-style: italic;
}

Notice that there are separate files for bold and italic fonts, as well as the ‘normal’ font. All are included, and all are given the same font-face alias, in this case “Gentium Basic”. It’s up to the user agent to determine which font to use in which circumstance (normal weight versus bold, normal text versus italics), Once the fonts are defined, they’re used wherever you would use standard fonts:

#rap {
  width:960px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background-color: #fff;
  color: #444;
  font: 0.9em/1.5em "Gentium Basic", Georgia,serif;
  font-style: normal;
}

I provide fallback fonts, for browsers that don’t support font-face.

So, how are these font rules working in various browsers?

Browsers that don’t support font-face yet, such as Opera 9.64, pick the fallback web safe font, as they should.

Safari 4 supports font-face, though the page can show up oddly until the fonts are downloaded to the person’s machine. If you’ve accessed a web site and no text shows, but underlines are appearing for the links, chances are the person is using font-face. The “blank” text doesn’t last long, though, depending on how fast your connection is, and how fast the web server serves up the font.

Once the font is loaded, Safari uses the fonts as described in the CSS3 specification.

Firefox has support for font-face beginning with 3.5. It doesn’t have the download hiccup that Safari seems to have, because it uses the default web font until the font is downloaded, and then redraws the text. (From what I can see, other browsers such as Opera 10.0 beta 2 do the same.)

Using Browsershots and my own PC, I’ve found that Internet Explorer also makes use of the fonts, in the EOT format I’ve provided. However, it doesn’t support the font style and weight specification.

Chrome is using WebKit, which would lead one to think that it supports font-face, but I’ve not seen webfonts work with Chrome. Again, just because Chrome is using the WebKit engine, doesn’t mean the Chromium graphics engine (Chrome’s own graphics engine) supports the same functionality that Safari or WebKit’s graphics engine have.

Opera 10.0 has been a problem for me. All of the fonts are showing as italic in Opera 10 beta 2. I don’t think there’s a problem with my CSS, and have since filed a bug with Opera. When the fonts are installed on the desktop, then Opera 10.0 seems to work. If not, you get italics.

update Thanks to Philippe, I’ve updated the stylesheet. IE does not support the font weight and style setting, so you only specify the one EOT file, for the basic font. In addition, the local setting in the stylesheet provides a local file name for the font, for the browser to use rather than have to download the font. Opera 10 does work when the file is local, but not when downloaded.

Also thanks to Baldur, whose use of Gentium Basic inspired me to try it at my site.

Update

Bruce Lawson added a comment that Opera is aware of the problem, and working on a solution.

I received an email from Stefan Hausmann,who wrote:

@font-face has been disabled in Chrome [1] because of “security concerns”. They announced webfonts support months ago, then disabled them by default, but failed to communicate that to the general public. They’re working on reenabling them by default [2].

In the meantime, you can use the –enable-remote-fonts command line switch. It’s still buggy on Chromium 4.0.202.0 where I tested it. Sometimes web fonts don’t render at all, sometimes single words don’t render (as if they were transparent) or only when selected. Sometimes selecting text with web fonts crashes the browser.

[1] http://code.google.com/p/chromium/issues/detail?id=9633 [2] http://code.google.com/p/chromium/issues/detail?id=17818