Friday, June 10, 2005

Web development notes - Rounded corners in Mozilla



Here's another cool thing I recently discovered while making the MovableType templates for the new version of my personal journal I'm developing right now; one piece of supplemental code in your CSS document will cause Mozilla-based browsers (like Firefox and Netscape 8) to display a box of text with rounded corners. I'm attaching a few screenshots of it in action, for those who are not currently on a Mozilla-based browser themselves. (And really, if you haven't switched to Firefox yet, you've got no one to blame but yourself.) Achieving the effect couldn't be easier; simply add the following attribute to the CSS specification of any element you want to affect:

{ -moz-border-radius: 20px; }

...using whatever number and unit of measurement you wish, of course. All other browsers will ignore this attribute and simply display the text as it would normally look; Mozilla-based browsers, though, will recognize the attribute, and display the rounded corners like seen in the screenshots above. This can also be individually defined for each corner, like so:

{ -moz-border-radius: 0px 20px 0px 0px; }

...to get some of the cool effects like you see above, where only one corner out of the four has been rounded. (The numbers affect the corners in the following order: top-left, top-right, bottom-right and bottom-left.)

Anyway, nothing too earth-shattering here, but definitely a cool option for presenting something special to users of Mozilla-based browsers. Happy curving!

Web development notes: Using access keys effectively on mobile-friendly pages

Regular readers know by now that I'm currently developing my first MovableType templates, in preparation for finally moving my personal journal off my Geocities page this summer (where it's been for six years) and over to my main site, where I'll finally be able to automate the entry and posting process (and also be able to send updates for the first time from my palmOne Treo, like what I can currently do with this Blogspot page). One of the new templates I'm designing is one for mobile devices, which should help quite a bit for all you poor souls out there like me who are doing all their web surfing through a Palm, PocketPC or Blackberry; one of the things I just successfully implemented and tested is a pervasive use of "access keys" in the mobile version, which I thought I'd explain how to do here, for others who would like to take advantage of this truly powerful option for mobile-friendly sites.

The "accesskey" attribute for HTML was originally designed years ago, to let people designate keyboard shortcuts on a web page for users of desktop computers. Basically, the attribute can be used on any anchor tag or form tag, and looks like the following in your code:

<a href="newpage.html" accesskey="1">new page (or press 1)</a>

...with whatever number (or any keyboard character) you want to use. Then if someone on a Windows computer types Alt-1, or a Mac owner types Cmd-1, the browser will automatically load that link for them and take them to the new page. But the beauty is that the developers of most mobile web browsers have activated access keys as well, which means that simply pressing this key on a phone's keypad will accomplish the same exact action too. So now I have all the major sections of my mobile version tied to access keys, so that a user can hop around to all the different areas without ever having to use their stylus or touch their screen; clicking '3' will take a person to my "about" page, '4' to the mobile version of my publishing comany, '5' to my contact page, etc. (Granted, there are no actual pages there yet for people to view; but the automatic jumping and loading process using access keys is definitely working.)

To let people skip from one part of a page to another part of the same page, simply use an anchor tag without a link, like so:

<a name="top" accesskey="1></a>

I use two such anchor tags in my mobile template, for example, one at the top of the page and one at the bottom. Since the mobile versions of web pages are insanely longer than the desktop versions (because of the tiny little screens), having such anchors can be a real godsend for mobile-device owners who wish to quickly jump straight to the top or the bottom of a page.

Access keys - learn 'em, love 'em, use 'em!

Tuesday, June 07, 2005

Beta version 0.1 of my new website now live

For those who don't already know, I'm switching the location of my personal journal this summer, from the Geocities page it's been the last six years to my main website. I'm doing this so I can finally power my journal through MovableType, so that I can post entries there straight from my mobile device, a Palm Treo. (My Geocities page can only be updated through a desktop computer, and regular readers know that I have neither home nor work internet access through a desktop. It means that I have to spend money at an internet cafe whenever I currently update my personal journal - which leads to situations like what happened last month, where I didn't have enough money to go to an internet cafe so literally couldn't update my personal journal for a month, month and a half. Sigh.)

Anyway, the good news is that I've been diligently teaching myself MovableType over the last couple of months, and actually now have a public beta version of the new blog up for people to check out - it's at my sandbox, which is located at jasonpettus.com/blog. Along with the new template, there's also a new 2,000-word entry about what went into designing the template, why the sections look as they do, and what's coming next in the process. Although some elements of that page are still not yet live, other parts are - like the RSS feed listed there, which design geeks can subscribe to this second, if they want to follow along this summer as I update the template and document the bugging/decoding process. The trackbacking information found there is accurate as well, if you end up writing about the new page at your own blog and wish to ping me.

The switch is going to be great, to tell the truth - for the first time as an online journaler, I'm going to be able to assign categories to my entries, let people search my site through a proprietary engine, let people subscribe to a notification mailing list, and all the other stuff the cool-kid bloggers have had for years now. Yet I went out of my way as well to make it not look like a typical blog page, and have come up with several elements that I'm quite proud of. Anyway, you can go check it out yourself to see what I'm talking about; I'd love to hear your comments and beta-testing feedback too, which you can send to ilikejason at hotmail dot com. (Don't forget to include what browser you're on, which version you have of that browser, the platform on which it's running, and the size of your computer monitor, in order to provide the maximum amount of help to me that you can.)

Monday, June 06, 2005

Wired's guide to NextFest

An electronic guide from Wired magazine to their upcoming NextFest, being held at the end of the month here in Chicago, which I am volunteering to work so that I can attend for free, since I am unemployed (sigh). Are you attending as well? Drop me a line at ilikejason at hotmail dot com and we can make plans to meet up and take goofy photos of each other, which I will then be posting in real time here to [metafeed] all weekend from my Palm Treo, as well as goofy audio interviews with interesting people I meet.

Northwest Airlines: A tragedy in one act

ACTORS: Table of executives at Northwest Airlines, dressed appropriately, waving laser pointers and cups of Starbucks at each other. SCENE: Harried meeting in a tasteful conference room. This play takes place without an intermission.

CLUELESS IDIOT 1: Okay, people, our customers are leaving us in droves. Seriously, it's like rats deserting a sinking ship out there these days. We've got to come up with a way to reconnect with our customers again, people. How do we do it? What do they want?

CLUELESS IDIOT 2: Oh, oh! How about if we... You know how we got rid of airline meals a long time ago, in our first round of punishing customers for the mistakes we make? And how we just give out pretzels and peanuts now?

CLUELESS IDIOT 1: Yeah?

CLUELESS IDIOT 2: How about if we get rid of the pretzels and peanuts too?

CLUELESS IDIOT 1: I like it! See, this is thinking outside of the box here, people! We need more of this kind of stuff!

CLUELESS IDIOT 3: Ooh, ooh! How about if we... Yeah, if we get rid of all the magazines the customers used to read during the flight? It'll save us $565,000 a year!

CLUELESS IDIOT 1: And how much did the airline lose overall just in the last three months?

CLUELESS IDIOT 3: Um... $458 million.

CLUELESS IDIOT 1: (Dramatic pause) Brilliant! It's gold! What else, people, what else? We're on a roll here!

CLUELESS IDIOT 4: Eek! Eek! I know! We'll charge customers $2 per bag to check them in at the front door, instead of it being the free service it is now!

CLUELESS IDIOT 1: Oh, now, wait, I think that's going a little too far.

CLUELESS IDIOT 4: Sorry, sir.

CLUELESS IDIOT 1: I'm just yanking your chain! I love it! People, if our customers don't come flocking back in droves after we introduce all these ways to just keep screwing them worse and worse and worse for all the mistakes in management and overinflated salaries we clueless, bloodthirsty executives have perpetrated...I don't know WHAT will lure them back! Cigars all around, boys!

ALL: Yay!

BLACK OUT. CURTAIN.

(Thanks for the Associated Press for providing all the facts and figures quoted above. Now playing at the Theatre Building, Friday nights at 9 pm.)

Yahoo Groups, 360 blogs now RSS-enabled

Hallelujah - Yahoo has finally gotten around to offering RSS feeds for their mailing-list groups and for blogs by members of the 360 social network. Read all the details concerning both here. (Thanks to Planet Movable Type for pointing this out. Don't forget, I have a 360 account too, as well as a 360 blog; my particular blog is simply a private list of resources I find on the web for MovableType tutorials and plugins, but fellow MovableType geeks should feel free to now subscribe to it if they want, if they're interested in seeing those resources as well.)

Extree! Extree! Sun-Times Kicks Ticker! Read all about it!

It's official - the Chicago Sun-Times has become the first major American newspaper to stop reprinting the closing quotes of the stock market. And why should newspapers be going to the trouble anymore, really? Anyone who's rich and smart enough to own stock is also going to be rich and smart enough to have an internet connection, and the knowledge of how to check their quotes at any time of the day they want. Thanks to Eric Zorn of the Chicago Tribune for pointing this out, and for including this great quote at the end of his entry - "...[L]ook for stock tables to join ocean-liner schedules in the things-we-used-to-print file."

Boeing starts Supergeek blog for engineers, test pilots

Ubergeeks unite! Boeing has started sponsoring a blog for the the flight test crew of the 777-200LR, a group which includes such cool nerds as industrial engineers and test pilots. Don't be shied away - they actually write in a very engaging, conversational style there. (Thanks to Neville Hobson for pointing this out.)

Thank God - '.xxx' domain finally approved

As reported by CNET in this particular case, ICANN finally approved the sale and use of a new .xxx domain for websites. Well, it's about damn time, I say. Longtime readers will know that I have a curious relationship with the adult entertainment industry, because of a book I wrote in 2002 and then a magazine column in 2003, and that I count both several porn producers and adult actors/actresses as my friends. These people without a single exception have been wanting this new domain for years and have been repeatedly calling for it, because of how much easier it's going to make it to reliably filter adult content off certain browsers without worrying about accidentally filtering out legitimate content as well. Aboveground pornographers are business people too, just like every other enterpreneur, and they like everyone else want to avoid as much legal hassle as possible; all the adult content providers I know very much only want to sell to fellow adults, and worry even more than conservative mothers about how to keep their stuff out of the hands of children - because they'll be the ones arrested for it if it happens, not the conservative mothers.

The new .xxx domain will allow all legitimate pornographers to move their adult material to a specially marked site now, where not only the front page but every other page of the site as well is marked with this special tag at the end. It will allow browsers at libraries, schools, and homes with small children to effectively click one "block all .xxx pages" box and elegantly filter everything on the planet that ends with that tag; but since it's common knowledge that the .xxx domain is strictly for adult material, there's no chance of an academe or mainstream company accidentally using that domain themselves and having their safe material accidentally banned, like what often happens with the wave of filtering software we're currently using. It's a simple solution and a powerful one, and my prediction is that in just a few years from now, we'll see just this one act responsible for being able to filter something like 75 to 80 percent of all legitimate porn on the web from childrens' eyes. It's not a complete solution, for sure, but definitely a step in the right direction, and any adult content provider out there worth their salt is as glad to see it as you are as a parent.

New cool stuff from Gizmodo

Much like MAKE magazine, Gizmodo.com also had a bunch of items recently that I wanted to mention here, so I thought I'd again combine them all into one entry...

Stickers with cool patterns that you can buy for $8 and place over the flywheel of your iPod to jazz it up. Or, you know, for 50 cents you could have Kinko's xerox whatever pattern you want on a piece of sticky paper and make one yourself. (original entry)

Retro-Electro: A new book by Rizzoli on the sublime pleasures of early-'80s computing. You know, I still have all my old TRS-80 stuff from high school in my parents' basement, and it all still works - would I be the coolest kid on the block or what if I set it all up again in my apartment here in Chicago? Okay, probably "what." (original entry)

For $6,000, purchase your own metal hipster martini bar for home use. Includes Kohler fixtures, in-line water purifier and in-line water heater; can be installed indoors or out. (original entry)

Thanks, Gizmodo!

New cool stuff from MAKE

MAKE magazine has had a number of items recently that I wanted to point out, so I thought I'd combine them all into one entry...

Free software for hosting your own Massive Multiplayer Online Role Playing Game (or MMORPG, as the kids say). The whole thing's run off PHP and XHTML, and gives you such options as live chat, a map editor, loot system and more. Coming soon - "Poetry Slam: The Role Playing Game!" (original entry)

New Live 5 software could revolutionize the act of mash-ups. New program will apparently accept your MP3s, automatically tempo-match files and slice up beats for your future manipulation. Hmm, hmm, hmm. (original entry)

Your own digital camera for 20 bucks...no, really! Instructions for hacking into the "one-use digital cameras" the CVS chain of convenience stores sell. (original entry)

Thanks, MAKE!

Positioning is dead; long live Wikification

FusionBrand has an interesting editorial up right now, claiming that the traditional theory of 'positioning' in marketing is now dead. For those who don't know, positioning is a theory about marketing that first became popular in the late 1960s - the idea is that your company or brand occupies a certain 'position' in your customer's head, and that anytime a specific idea is thought of, that customer automatically thinks of your product. (Cooly-designed cutting-edge computers = 'Apple.' You see what I'm saying.) Your product is going to occupy a position in that customer's head no matter what you do, so the goal then is to have it occupy the position that you want it to, or that would benefit you the most. So you use mass advertising to sell an overall "message" of what your brand or company is, and you "position" your brand into the place in the customer's brain where you want it to exist, by repeatedly hammering your message into them over and over again.

With the ongoing death of mass advertising, though, according to this editorial, and the rise of customized advertising, viral marketing, the blogosphere and other community-oriented developments, the rules for successfully marketing your company are rapidly changing. A better metaphor, then, might be the 'wikis' we're starting to see pop up more and more all over the web - pages of content just like any other site, but these group-written and -edited by a whole crowd of people, and with a group consensus eventually emerging of what that page should be and what it should look like. The benefits of using such a theory for your marketing, according to the editorial, include the fact that you're hearing much better what your customers actually want from you in order to make them insanely happy, since your entire corporate message is now driven by them, not by your advertising people. Also, your "message" hits home in a much more powerful way, because it's driven by actions instead of words; instead of endlessly running commercials about what great customer service you have, you actually go out and achieve great customer service, which makes a much greater impression on your customer than any empty promise in a commercial ever could. And third, unlike positioning this is actually measurable - if you know precisely what your customers want, you can statistically keep track of how well you're getting it to them.

It's a very intriguing article that sets certain marketing rules on their head that we've been taking for granted for over 30 years now. Definitely worth taking a look. (Thanks to the Small Business Del.icio.us watchlist for pointing this out.)

Make your own audio tour guides

Interesting article in the New York Times on the rise of people recording their own audio tours of museum exhibits, then offering them as MP3s that others can listen to on their iPods as they walk through the exhibit themselves. It's already given me an idea for this arts center I'm trying to open these days; to have the artist walk through the gallery and explain each piece on audio, then offer up those MP3s for anyone who wants to walk through the gallery themselves with their iPod (or conversely, click through the virtual gallery online while listening to iTunes). And what kind of fun stuff could you record an audio tour of for others to listen to on their iPod? How about your neighborhood? A guide to cool live-music spots in your city? Audio comments to your online vacation photos?