In April, for example, I developed a whole new WordPress-Theme called “JavaScript-OperatingSystem-Theme” (“JS-OS-Theme“). I’ve chosen this extraordinary name, because it’s based on JavaScript (and PHP of course, the WordPress-part!) and looks and behaves like an operating system. For all those of you who can speak German: Ihr könnt euch diesen Screencast ansehen, in dem ich das Theme ausführlich vorstelle. For all those of you who can’t: Enjoy the “ö”s and “ü”s in the last sentence and believe that all your stereotypes about Germany are true. Or go directly to trial.me-blogs-it.com – I’ve installed the Theme for experimental purpose and the test-posts are all in English!

I’ve done even more things in May!

Now, in June I began to teach myself Objective-C to write Mac and iPhone-Apps! I’ve already done a dozen of “Hello, World!”-Tutorials, yet I haven’t learned anything at all… But before I begin to bore you with this I rather tell you about the two other projects which ended up in further subdomains:

The first one is a simple WYSIWYG-Editor. I had to google for a long time until I found how to write one actually: The secret behind wysiwyg-editors is an iframe with the JavaScript-method designMode = “on”;

function id2obj(id) {if(document.getElementById) {return(document.getElementById(id))} else if(document.all) {return(document.all.id);} }
var Idocument = id2obj('showHTML').contentWindow.document;
Idocument.designMode = "on";

The special thing about this wysiwyg-Editor: Next to the wysiwyg-Editor is a textarea with the sourcecode of the wysiwyg-editor. Now, if you type into the textarea, the sourcecode is simultaneously turned into HTML and shown in the wysiwyg-editor. If you edit something in the wysiwyg-editor (btw: For all those of you who don’t know what this cryptical “wysiwyg” actually stands for: It means “What you see is what you get” – you know, this Britney Spears song!) the sourcecode changes in the textarea at the same time! Unfortunately it doesn’t work in Firefox. It probably doesn’t work in the Internet Explorer, but that’s a thing I don’t care about!

The last new subdomain: I was shocked when I read a study (I don’t know how old it was) in which it says that almost a quarter of all Internet users have a screen resolution of 800×600! I wanted to know how my sites actually look like in those screenresolutions and have written a simple php-file which makes customized resolutions possible: 800×600.me-blogs-it.com

JavaScript-OperatingSystem-Theme WordPress screenshot

Basic structure

 The Logo and the Eye-catcher (on this site it’s the “comic-me”) are position: absolute; so that they can blast the structure and create a feeling of three-dimensionality by laying over the other parts. Then I added some features which I don’t know from other sites – so I guess, they’re new:

Subscription bar

Instead of creating a big RSS-icon and place it somewhere conspicuously on the site, I collected all feeds in a simple subscription bar and put it on top of the site. I tried to make it as simple and tidy as possible. When you click on “Mail-Feed subscription” for example, you don’t open a new site, but a new area in which all you have to enter is the substantially needed Email-adress. I can imagine to enhance the bar by removing the atom-Feed-link and using feedburner’s Smartfeed-link instead, and adding a twitter-link in return.

About

Sometimes, when I visited blogs for the first time, I didn’t know what the blog stood for and looked for an “About”-link. I wasn’t always able to find one. So I wanted my first-time-visitors to see immediately what this blog is about instead of adding such an about-link to my footer/header/sidebar/whatever. Therefore I created the about-text right next to the Logo.
Yet, visitors who haven’t visited the site for the first time don’t need to read the about-text with every single site-view. That’s why I made the text collapsible. The setting (collapsed / not collapsed) is saved in a cookie, so you don’t have to collapse it again afterwards.

Eye catcher 

The logo is in the center, the about-text is on the right, so what is on the left? I used the space to place an eye-catcher. On me-blogs-it it’s the comic-me, which give’s the site a face and a personal note.

You notice: The actual innovations are all made at the top of the site. And here are some things you may wonder about:

Three-column

I don’t fancy two-column themes. Three-column themes where the sidebars are next to each other look weird. So I decided for three-column where the sidebars are at the sides – next to the content.

Centered

There are still sites where the content is squashed at the left side. I think these times are slowly running out and a centred look will establish. I mean, look at all the big sites – they already have their content centered: Google, YouTube, MySpace, flickr, Gawker, twitter, facebook, Techcrunch, Blogger, Gizmodo, RapidShare, Microsoft, Apple, AOL, eBay… and so on.

Missing White-Space

This is actually made by my modification of the theme. I use the overall-color to signify subjectivity. White-space is neutral, my blog however isn’t – that’s why I don’t wanted to have too much white-space.

No JavaScript required

There are some people out there who don’t have JS enabled. Yet my site does need JS – for example in the subscription bar when the email-adress-input has to fold out. I didn’t want to handicap these non-JS-people and looked for ways to get the information if JS is enabled or not before the site is even built-up in the browser so I could react on it via PHP. But I didn’t find a way to accomplish that. So I solved the problem in another way: When the site is built-up in the browser non-JS-enabled and JS-enabled people see the same things. But as soon as the site is ready, a JS-function makes the parts which need JS (e.g. the subscription bar) visible and hides the parts which are actually only made for the non-JS-visitors. So, only the visitors who have JavaScript enabled also see the parts which require JS.

UPDATE: Okay… Everything has failed. The Plugin is now in its original shape again. -.-