Fonts for Web & Blog

Fonts on the web
Originally there was only a limited set of fonts available to website builders. Even now, the fonts readily available in a web browser differ per platform. Even those that do not aim at advanced typography want to have some control over their fonts, for both 'titles' and 'content'

CSS font stack
To overcome the problem of differences in available fonts in various web browsers, css allows a web designer to define a 'stack' of multiple font-families. The browser simply use the first font that is available. The downsides of course are: 1) still a limited set of fonts available, and 2) your page will look different in every browser, especially when using less supported fonts.

Text as image
For titles (ie non-changing pieces of text), one can present text as an image. These images are created upfront in an image editor. This allows you to use every font you can find. Even nowadays this is still often done for titles and such, but has 2 downsides: 1) Google only indexes text, 2) inflexible: for every change in text or font you have to go back to your image editor.

Custom fonts
Nowadays, it is also possible to add custom fonts to your website. This functionality is available in 'most browsers'. This may sound discouraging, but as a web designer, this is often the best you'll get anyway and because of font stacking (see above), it is really easy to present a very practical alternative.

Options
For those who want to do stuff manually, I gladly refer to this post. As often, there's workarounds needed to increase the spread of browsers that will understand you. In such cases, it is nice to make use of frameworks that do this for you.

Google font API
Google font API is such a framework. It is accompanied by a set of freely available font directory. All you have to do is include a css file from Google's server, and you can use the font in your css font definitions as any other font:

<link href="http://fonts.googleapis.com/css?family=Font+Name" rel="stylesheet" type="text/css">

You can define multiple font families (ie 'fonts'), as well as font styles (such as regular, bold, italic, bold-italic).

Blogger fonts
Let's look at Blogger, then Wordpress.com. Blogger enables you to change HTML and CSS, so you are free to go. I realized along the way, though, that Blogger makes it even easier! In the template editor, under 'advanced' you can not only select 'commonly' used web fonts such as Arial and Georgia, but also all (?) available free fonts from the Google font directory. Awsome!

Wordpress and TypeKit
Here we go. Wordpress.com. Here I even needed it more, because I haven't found a way to increase my font size without paying for custom css. TypeKit is really well integrated into Wordpress. The tool itself is quite nice, but due the the degrees of freedom it wants to offer you, quite complex. If you want to stick to 'free', you are limited to 2 fonts and 1 website. For me it was enough to test things.

You have to subscribe to TypeKit, and enter your TypeKit id in your Wordpress dashboard. Then you can use the TypeKit website to select a font and css tags the font should be attached to (if you are lucky, and the template you chose is already in the list, TypeKit does a lot of the work for you). If you publish and wait (they say it may take a few minutes), you should see the changes applied to your blog.

So, although you are limited when keeping it free, it is possible to use TypeKit to change fonts to non-web fonts in Wordpress. In practice however, I found this quite tedious, and previewing is not an option, due to the delay after pressing the publishing button.

Closing remarks
So all together, you can add 'custom' fonts to your webpage, or blog. In Blogger it is super easy, in free Wordpress.com unpractical but doable using TypeKit. Google font API is your friend if you have your own website. Realize however that a full font, including different styles and with extended character sets can become quite big files. Adding 4 fonts to your page can really add up. So be selective in which styles, characters and fonts you really need.

Wordpress.org

In my previous post I did a little comparison of Blogger and Wordpress.com, both free online services to host your blog with lots of extras. Wordpress however is orginally an application you can install on your own server. This Wordpress is still alive, kicking and available through wordpress.org. I thought it was nice to evaluate this and share my thoughts on my blog. So here we go.

CMS or Blog?
Full fledged Wordpress.org is more than just a blogging tool. You can also make entire websites with it, comparable to Joomla and Drupal. So it is not just a blogging tool but can be seen as a full fledged Content Management System (CMS). For now I'm leaving Joomla and Drupal out of the equation by the way.

Basics
Wordpress is just a pack of files. It requires PHP and MySQL. Installing is quite easy: download, upload to your server (more about server specifics later!), edit wp-config.php: enter MySQL settings and copy-paste some salt'n'pepa, visit the site with your browser and easily complete the install from there. Now you have something that looks a lot like what you see when subscribing through wordpress.com. But in this case, this is really only the beginning!

Themes & Plugins
Wordpress can easily be extended with plugins and themes. Themes take care of the looks of your site, plugins come in all forms and shapes. Many plugins behave as a widget: a small piece of UI/functionality you can customize place in your (side)bar. The availability of themes is extensive, even if you don't want to pay. WordpressThemeBase has a lot of them and provides one-click browsing from one theme preview to the next. Wordpress.org also provides both themes and plugins. And if your not satisfied, just write your own (adjustments).

Installation of themes & plugins
Installation of themes and plugins can be done in two ways. First, you can upload them by ftp. Luckily, every theme or plugin is just a single folder that contains everything it needs. Further configuration can be done in your browser through the dashboard. Much more convenient is installing plugins directly from the dashboard. You can search, preview and download/install them really, really, really easily.  That is, if this works on your host (this type of interaction requires a bit more 'freedom' which is not allowed by every host and sometimes may require a bit of tweaking from your side).

Wordpress.org VS wordpress.com
The huge amount of plugins and themes available if you install Wordpress.org yourself makes all the difference with Wordpress.com. I'd almost say Wordpress.com is bad publicity for what this platform is actually capable of!

Free 
Well, this difference fades a little I guess if you are willing to pay for Wordpress.com, but you don't need to pay for the .org version either, do you? Well... you do need a host that serves your pages. Nowadays there is free PHP/MySQL hosting available, but do they work with Wordpress? I first tried Awardspace, 000webhost and Dreamhost Apps. But I wasn't pleased. The first two were slow and I couldn't get the installation-from-backend to work, 000webhost even banned me from my site for a day. The latter only provides a pre-installed version with a limited set of plugins and themes. They say you can edit your themes but I don't think you can upload stuff.

Space1 troubles
I also tried  a payed hosting provider I am with (Space1), but their MySQL version was too old. They did provide an auto-install for an older version of Wordpress, but I fear that many plugins would be incompatible. And that problem would worsen over time since I also couldn't upgrade Wordpress (because of the MySQL version AND because their php safe mode didn't allow scripts to run long enough for an upgrade to run smoothly).

Finally
Finally, I came across x10hosting. It did take a little bit of guessing to get it uploaded and get MySQL running over there (there's a forum though, with lots of knowledge already available). But once that hurdle was out of the way, everything else worked like a charm, including installing themes and plugins from the dashboard in the browser! Perhaps there will be times the server is slower than it was when I was testing it, but for now it looks like a decent solution. Your url will be a little bit trashy (their words) like blah.x10.mx. But you can connect your own domain if you want to (if you have one). This is of course not much different from Blogger and Wordpress.com.

Perhaps, when the next offspring blog is coming up, I will try and use wordpress.org on x10hosting!

Wordpress

As I wrote before, I used Wordpress to create my first experimental offspring blog using Wordpress (this one is using Blogger). For those that are about to put up a blog, or are just interested, here's a quick overview for you of my (first) experiences with switching platforms.

Wordpress
So Wordpress is originally this open source project that offers you a system you can install on your (hosted) server, it helps you to easily build a website or a blog. Since it is open source, and since there's a huge community around it (a necessity when using open source products, always look at the past and future  release schedules and the activity of the surrounding community), there's a huge amounts of resources (templates, plugins, books, forums, etc) available. Nice! The project itself is free, but some of the extensions cost money (which actually presents opportunities for developers and designers! I'm taking mental note of my own remark!).

Two flavors: wordpress.com and wordpress.org
So what's with wordpress.com vs wordpress.org? Well, the latter (.org) is where you get the stuff that you have to install and configure yourself (see previous section). Wordpress.com is a platform comparable to Blogger, that offers you a pre-installed wordpress blog / site, including an url in the form yourblog.wordpress.com. The basic functionality is free of charge. The .com version is what I'll be discussing in this post! Maybe you can also install Wordpress (.org) on a free webhost (000webhost is the most obvious choice here), I must try that once and blog about it!

Wordpress.com
So I went to wordpress.com, spent some time in registration process (it's quite straightforward) and before I knew it my blog was online. So far, so good. And comparable to Blogger. Next, I needed a simple but effective layout. I didn't want to spent days designing something, because of the nature of the project.

Templating
Just as Blogger, Wordpress.com offers you a choice of templates. These templates often have (a few) configurable options, such as changing the layout (1, 2 or sometimes even 3 columns), the location of the sidebar (left vs right) and the header image. In contrast to Blogger, I had a hard time finding a template that I really liked. In my opinion, most of the templates are rather crappy. 'No worries', I thought, 'I know CSS'. And I started to change some colors and text sizes, switching back and forth between a browser tab with the online editor and one with a preview.

Money
At some point I noticed a remark: to actually saving the CSS, I needed to pay money. I have to say I don't know how much, and perhaps it could be worth it, but once again this was totally against the whole idea of the project. Furthermore, Blogger does offer you the opportunity to change CSS. Also, Blogger offers you to go mad on the template's HTML, including whatever you want (such as Google Analytics, but more about that later). For Wordpress.com, if you want to go beyond the default offerings, you have to pay.

Posting
You can write posts in Blogger with an editor inside the browser, just as for Google's Blogger. You can embed pictures, videos, mark up your text, etcetera. You attribute tags and categories to your post easily. There's a auto-saving feature and version control. Also, you can schedule a post for later. I don't think Blogger has version control, but all other features it does have as well. However, I found Blogger's editor much more flexible, user friendly and intuitive. I've been having a hard time putting in extra newlines in the Wordpress editor, and inserting videos from another place than Dailymotion and Youtube didn't seem to work. You can edit HTML in Wordpress.com but if you insert an embedded vid or even a BR tag, and switch back or save the post, it's gone. I have to say even Blogger's editor is being a pain sometimes with inserting seemingly random tags that put more whitespace than I want, but this I can easily fix later in HTML mode. I've had much more troubles with Wordpress' editor. Both have a read-bore break-here tag, but the Wordpress template I chose templated the read-more link so hideously I decided not to use it.

Widgets / Gadgets
Blogger gives you lots of gadgets due to its compatibility with OpenSocial and iGoogle, and you can even create your own (see this post). Wordpress does have comparable functionalities and there must be a lot of cool things available, but not in the free online Wordpress.com version. Okay you have a few nice ones, and you could misuse the feed-reader gadget a little, but that's really it.

Useful stuff
Since you can not edit Wordpress.com's HTML, signing up for Google's Webmaster Tools could be a problem. Luckily, there's an option in the tools section in which you can set your identification code. So, this is actually a really nice feature! It does the same for Yahoo! Site Explorer and Bing Webmaster Center. I didn't even know these so this presents a great learning and blogging opportunity for later!

Community
Wordpress.com does seem to present more of a community. If you use certain tags, your post pops up in Wordpress site wide lists for those tags. I've seen a few people come in this way. Also, you can search all wordpress.com blogs. The comment system is linked to your Wordpress.com account, so your Gravatar (something else, maybe I will be talking about this in a later post) is visible and people are directly linked to your blog. This is actually the same in Blogger. It does present opportunities to generate traffic.

Pinging & Google
Both Blogger and Wordpress do the basic broadcasting to search engines such as Google for you.

Final verdict
Blogger vs Wordpress.com, without willing to pay for anything. I have to say: Blogger wins. Especially if you have some knowledge about HTML and CSS. Wordpress.org might be another story, but I'll have to come back to that later.

OpenSocial

While working on my tiny my-2do gadget I came across something called OpenSocial. I had maybe once heard something about it but otherwise I had now idea what it was. I decided to dive into it a little for my own knowledge, and write about it here for others' knowledge.

API's
As you might have noticed, many social websites, such as LinkedIn, Facebook, etc, enable third parties to develop applications for their site. These applications can integrate into the social-ness of the website (ie get friends list and stuff) via so called API's (Application Programming Interfaces). The problem was that each site used their own API's, so unless they had too much time on their hand programmers had to choose.

OpenSocial: Open, Social, StandardOpenSocial is pushed forward by Google, but is for the web, not just for Google. It enables (web) developers to build applications for all social sites (that adapt to OpenSocial) at once. The developer now only has to learn about the OpenSocial API's to make an application work on all platforms.

Who's in?< Opensocial.org shows a list of social sites that are exposing the OpenSocial API's to developers. Interesting names are LinkedIn, MySpace, Hyves, iGoogle, Orkut. The big name that is missing obviously: Facebook, although apparently there is some adapter software you can use to run your OpenSocial app on Facebook as well.

Hit?
I could not find a video about OpenSocial itself that was less than 2 years old. Maybe this is because the original videos are still relevant enough? Also a lot of webpages discussing OpenSocial are of comparable age. Also, in the beginning, security issues came up.

Alive?
Is OpenSocial still alive? Yes, I think it still is! For instance MySpace announced this month it will be providing an OpenSocial .Net container and keep on supporting OpenSocial.

Interesting?
Yes, OpenSocial is interesting, at least for me, because you can reach a lot of people as a developer, and you can make use of existing platforms and libraries. Furthermore, the main techniques you have to know for OpenSocial are HTML and JavaScript. Check.

My-2do

I wanted a todo list on my blog, that I could edit, and others could see, as a 'gadget'. I decided to make one myself. I won't give any details, that would become a multi-page tutorial, but I'll show you which components / platforms / techniques I used so you can for yourself decide what's out there.

Google Gadgets
Blogger's layout is very flexible. You can add gadgets (in my language, Blogger calls them widgets), made by Google, third parties, or yourself. These are defined / built like any other gadget for iGoogle. That was interesting for me for two reasons:

1. Because of this there exists a lot of documentation already, from Google itself and probably also in communities on the web. Auto-didactic as I am, this can make or break a project!
2. I could extrapolate my efforts to other Blogger as well as iGoogle users. Not a necessity but definitely an extra motivation: the effort / learning investment opens up a lot of new opportunities.

XML + http-request

Gadgets are defined as an XML file. You can host them with Google (I learned that afterwards) but I hosted it somewhere else. The XML file contains information for the user-settings dialog, as well as the HTML of the gadget itself. You can spice this up with JavaScript, including access to dedicated libraries from Google (for example to get the current blog's posts). I decided to host the app itself at Google's App Engine. Because of that, the XML was quite simple: just an empty DIV and a few lines of JavaScript that used 'gadgets.io.makeRequest' to fetch the list from App Engine.

App Engine

App Engine is 'part' of the gadget system, it was just my choice for making the server-side part of the application. I could have just as well installed a LAMP stack (Linux - Apache - MySQL - PHP) on my home server and host it from there. App Engine however offers a bunch of free resources and can scale up very easily. The main reason however is that I am currently learning App Engine.

I use Java (GAE/J) and decided to try out JDO persistence this time. Although others say JDO and JPA are comparable, I think there is more documentation for JDO available. Oh, I use Eclipse as my IDE, together with Google App Engine plugin, it makes life on App Engine a lot easier.

To get things rolling even faster, I decided to use the Google account login feature of App Engine. This means that I don't have to worry about the user system. 

Structure

Currently the whole system is very basic: one applet to edit your todo list (there's one list per email address), another applet that exposes your todo list to the outside world behind a 'custom' url. This url was first baked into the xml. That's stupid of course so I rewired it so the todo list ID is configurable by the user. 

Feature stuff

There's more to do: styling the edit page, making edits possible from within the blog (as long as you are logged in), multiple todo lists, styling the todo list, marketing, earning money, selling out, buying an Alfa Romeo Giulietta. :-D

Where?

Okay you want to be a beta beta beta test beta test test tester? Here's how to implement:

- Go to my-2do.appspot.com (and log in with your Google Account)

- Add items to your list

- Copy the ID to the clipboard

- Go to blogger, add gadget, use your own, paste this URL: http://hosting.gmodules.com/ig/gadgets/file/107797948841842070898/my-2do.xml

- Done

Let me know if this doesn't work or if you have cool feature requests :-D