After introducing some of books, I will now share my online resources. There are a lot of toolkits, frameworks or libraries out there, free to use, with powerful features or a lot less typing for you as benefit. The one that all these toolkits rely on is called »prototype«. It is an AJAX Framework which is providing a lot of useful functions to make your Javascript work a lot easier. One of my problems was to get the correct X and Y coordinates from a mouse event. The corresponding DOM properties would be »clientx« and »clienty« and everything worked fine in Firefox but Safari would show a different behavior. If you scrolled down on a website the clienty value that Safari would give you is the actual clienty + the distance you scrolled down – which made it real ugly to add a tooltip to the mouse cursor unless I had a browser detection … . This is where prototype.js came into play because it is providing stuff like this in neat functions. All I needed to do is adding prototype.js to my site. Of course I had to look for the right function as well but that was it. There was no need for me to write the browser detection which saved me a lot of time (This bug is already in Safaris / Webkit bugtracker). But it can do so much more. You can easily build XMLHttpObjects, get references of XHTML elements and and and … seriously it can do a lot. There is only one really bad thing about it – there is no official documentation. However some other people tried to fix that as good as possible. Jonathan Snook published on his site the very useful prototype.js cheat sheet and then there is a list of articles which cover the usage of prototype.js on prototypedoc.com. If you read the books which I mentioned in my previous post you will probably get around by looking directly into the prototype.js file.

One of the libraries / toolkits that rely on prototype.js is script.aculo.us. The name is weird but this piece of javascript gives you a handful of very pretty animated visual effects. In contrast to prototype scriptaculous is very well documented thanks to the use of a wiki. You can try out all the effects on the demo page. The basic visual effects are filed under »Combination Effects Demo«. Just to give you a tiny example of what you can do click here

Other, similar frameworks / toolkits are rico and dojo. Of course they have some unique distinguishable features but they also cover a few of scriptaculous.

One of the smaller toolkits is called »Lightbox« which provides a nice way of viewing pictures on websites. Instead of opening pop-ups it puts another layer over the website showing the picture. It looks really nice and is easy to implement. Go to the website and check out the demos.

Of course, wikipedia is another good resource to find the meaning of all these fancy web 2.0 related buzzwords.

The next post will cover my personal experience while investigating Javascript.

[Addition]

I just found a blog entry that lists a lot more Javascript frameworks than mine, if you’re interested go take a look.

Technorati Tags:
web, ajax, web 2.0, javascript

Instead of writing one article of enormous length I decided to break it into pieces. It is all about Javascript which is catching my attention for quite a while now. In fact it is the number one reason for the lack of posts in my blog for the last couple of weeks. While I was getting into Javascript I wrote down a lot of stuff which I wanted to mention here in my Blog and I think its the best start to tell you what helped me getting started. First of all I read through three books. I use the web a lot to get the information I’m looking for but when it comes to programming there is nothing better than a good book so here is the book review:

The first book which I read was »Professional Javascript for Web Developers (published by Wrox Press)«. It is everything the title says. It tells you about Javascript in general, DOM Methods, Event Handling, RegExp, Style Manipulation, XMLHttpRequest and much more. No matter what your question about webpages and javascript is, there is a very good chance of getting the answer from this book.

The second book I want to point out is »Javascript: The Definite Guide 4th Edition (published by O’REILLY)« which gives you a very detailed, easy to swallow piece of Javascript. You learn a lot about Object Oriented Programming in Javascript and since everything in Javascript is an Object you should know about it as much as you can. The Book also provides a huge language reference which is pretty helpful too. The book is from 2004 so the DOM / Web part of the book is not really up to date but Oreilly announced the 5th Edition for August 2006 and is very likely that they will include a massive update on the web specific topics. Another plus of this book is Oreillys style of writing. As I said, its really pleasant to read, if you are interested.

Another book which I bought two weeks ago is »DOM Scripting: Web Design with JavaScript and the Document Object Model (published by Friends of ED)«. The Book instantly became a lot of more than positive feedback from all directions. I think it is a very good addition to the previous mentioned books because it takes all the theory and puts it into action. The book provides real examples which the reader can try out in order to play with it by himself. It is also easy to read, not too dry and accurate.

After reading these books you should have a pretty good idea about Javascript and its beauty. You should be a lot more familiar with objects, you will be hungry for prototype functions and anonymous functions and you will even know what »Unobtrusive Javascript« means and why it is good practice.

The next post will be about the online resources.

There you will find out how this stuff works

Technorati Tags:
web, ajax, web 2.0, javascript

I’m using Textmate on a daily basis for editing XHTML because of its rich and intelligent auto-completion features. Since I started using it I wrote twice as much code (at least) with a lot less actual typing. For those who wonder »how?« there is a screen cast online showing some of the many features of Textmate.

Enjoy and try yourself!

Now its 2006, Google Maps and Google Mail are interesting like cold coffee but the hype these projects started is still going on. Everyday there are new »Web 2.0« apps popping up. None of them is doing something really new, right now they are busy combining all of the early »Web 2.0« apps like flickr, del.icio.us, news.google.com, technorati plus some online community functionality. Of course you can’t come up with a new web app without animated effects like color fades or transparency fades. But what really is Web 2.0? I know this question is a common one but so far it seems there are still more questions than answers so I’m gonna say something about it too. First of all, if this is Web 2.0 then one might guess that everything before that was Web 1.0. In my opinion, now is Web 1.0 and everything before now was some crappy alpha or beta release. When Tim Berners-Lee put the very first webpage online this was something like the developer preview release, when mosaic, the first graphical browser for webpages, came out it was something like an early alpha release, the »browser wars« were like the beta releases where the developers tried out to add even more new features and the users cried for standards they could rely on. Well, now we have like Web 1.0 Release Candidate 2. It is still not stable because IE7 will take some more time to be ready but when it is, we can officially rely on technologies like XHTML 1.0, CSS 2.1, Javascript 1.5, XML 1.0 and DOM Level 1, 2 and eventually 3 but thats maybe for the 1.0.1 release. That is of course only the technical part of the web, what about the other goals? If you consider having information available in hypertext as a goal, I’d say we’ve reached version 1.5. Links were always popular, if you had no content at all on your webpage the one thing you would have, was your link collection to other websites. In the early days though, it wasn’t really helpful to have links because there weren’t many interesting sites so there wasn’t really much to link to. For me the breakthrough really came with wikipedia. The way hyperlinks are used in the wikipedia is extremely helpful and I think it is one of the best implementations of hypertext out there. We may reach hypertext version 2.0 with XHTML 2.0 where every element can have a href attribute.

Another term you’ve probably heard already is »the semantic web« which describes the idea of giving the content of the web a computer-understandable meaning. How? Well, a webpage has a header, a body tag, a title tag and a tag for meta information. Your blog has posts, every post has a title which is held within a h1 tag and a body which is encapsulated in a p tag. So a computer can »see« what the title of the webpage is, or what headlines belong to which paragraphs and so on. In my perception the semantic web really started with the blog hype. You post an article on your blog, somebody reads it and mentions your post in his/her blog and then sends a trackback to your blog saying »Hey I read your post, I mentioned it in my Post on my Blog, here is the link to it« which appears as a comment in your blog. What happens now is that the search bots (or internet bots) visit your page and not only understand the plain html structure of your blog but also follow its semantic structure. They find your post, they follow the trackbacks and this way they not only get what you said to a specific topic but also what others said to the same topic. This way you can assign a certain relevance to posts. Lets say the google bot finds out that 25 other blogs have some sort of reference to your post then the google bot considers you post as pretty relevant for the given topic. By making your content understandable for computers / programs you also make it way more accessible for other human beings to find it. This way it is way easier to group content by certain topics or themes and even by relevance. You are able to search for quality not only quantity and that makes the web a better, more productive place.

I think when google started its search engine the semantic web started because the google results were based on some sort of relevance algorithm which was way ahead of altavistas or lycos engine. Yahoo! is and was another story because they had actual human beings who looked at websites before they were put into the yahoo web directory. Then, I think sometime in 2002, technorati went online. They focussed on being a blog search engine and it worked quite well. Because blogs have well structured content, they work very well when you analyze them like I described before. With technorati you are able to find blog posts to certain topics, sometimes way ahead of news.google.com. You can filter them through simple searches, tags, relevance of topics, relevance of single posts, language and of course time. I think the semantic web definitely reached version 1.0 as well. I’m not sure how far this concept can be extended but there is no doubt about that the semantic web is a good idea.

The last thing I want to cover is participation and again wikipedia really cracked a lot of heads. People who were like »This wikipedia article is complete bullshit« got answers like »Well its a wiki, you can change it«. Suddenly there was something that everybody could contribute too for some sort of higher cause – knowledge, free knowledge. This was just the best cause somebody could come up with, who would have something to say against »people contributing to a free encyclopedia«? Blogs of course on the other side also cracked a lot of heads and more people got inspired to contribute something to the web whether it was useful or not. The blog software provided by communities or open source projects made it easy to publish your thoughts, even without knowledge of HTML and CSS.

Okay, there were a lot of leading 1’s in this post so far except for CSS 2.1 and you have to remember how long it took to get to this point, again, its 2006. On August 6th, 1991 Tim Berners-Lee put the very first webpage online, that’s 15 years! Considering this Web 1.0 sounds like we haven’t really achieved much. This is why I can understand the need for the term »Web 2.0«. I think it describes more the mindset of the people than the actual technology that we are using right now. See, it took a lot of time to convince people of the web, it took a lot of time to figure out how we want the web to be and what we could use it for. In fact we are still in the process of figuring out what we could use the web for and it took a lot of time to get us all inspired to think of such things. Now in 2006 the web is more alive than ever before, people are trying to reach the frontiers of what can be done with the current technology and they are already asking for the next generation (XHTML 2.0, CSS3, etc …) and I think that is what »Web 2.0« really stands for. The wikipedia version of Web 2.0, to which I linked in the beginning of this post, is pretty close to my interpretation. Web 2.0 does not necessarily make use of AJAX or fading colors or anything like that – if you want to be Web 2.0 make your web app well structured, semantic, standard compliant and useful, make it accessible.

Technorati Tags:
web, ajax, semantic web, web 2.0