Jeez Tech » Google

2000 to 2010. A Decade Of Wonders

Kerasiotis Vasileios — Fri, 04 Dec 2009 19:56:49 +0000

Since we move into a new decade in less than a month, I researched a little and tried to find what happened during the decade from 2000 to 2010 in the programming world, and web developing in general, as well as some major events about Internet and computing. I run across many programming languages, frameworks and projects that really deserve to have a spot in this decade’s history. Most texts are from Wikipedia and the list is a compilation of personal consumptions about which event was bigger and deserved to be mentioned.

I would also like to state that I might have missed some events and it would be great if you add your favorite ones in the comments.

Here is a list of what I found:

2000

Official Launch of Windows 2000 – Microsoft’s replacement for Windows 95/98 and Windows NT.
Be Inc. released BeOS R5 for PowerPC and x86, which was the first release of BeOS for x86 to have a freely downloadable version which could be fully installed on a user’s hard drive.
eDonkey2000 client and server software is released by Jed McCaleb, introducing hashing into decentralized file sharing.
Netscape6, K-Meleon and Galeon web browsers born from Mozilla. This was also the year for Konqueror.

C#

This is the year where C# was born. C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg, the designer of Borland’s Turbo Pascal, who has said that its object-oriented syntax is based on C++ and other languages. James Gosling, who created the Java programming language in 1994, called it an ‘imitation’ of that language. The most recent version is C# 3.0, which was released in conjunction with the .NET Framework 3.5 in 2007. The next proposed version, 4.0, is in development.

2001

Apple released Mac OS X. At its heart is Darwin, an Open Source operating system based on BSD.
Microsoft released Windows XP, based on Windows 2000 and Windows NT kernel.
BitTorrent released by Bram Cohen.

Drupal

Originally written by Dries Buytaert as a message board, Drupal became an open source project in 2001. Drupal is an English rendering of the Dutch word “druppel”, which means “drop” (as in “a water droplet”). The name was taken from the now-defunct Drop.org website, whose code slowly evolved into Drupal. Buytaert wanted to call the site “dorp” (Dutch for “village”) for its community aspects, but made a typo when checking the domain name and thought it sounded better.

Drupal is now considered one of the most sophisticated content management systems in the world with millions of installations and thousands of people involved in it’s development.

Visual Basic.NET

Visual Basic.NET is the evolved Visual Basic. Visual Basic .NET (VB.NET) is an object-oriented computer programming language that can be viewed as an evolution of Microsoft’s Visual Basic (VB) which is implemented on the Microsoft .NET Framework. Microsoft currently supplies Visual Basic free of charge.

2002

eMule is released and soon becomes the eDonkey2000 network’s most popular client.
Suprnova.org torrent index goes online.
Blogs go popular
Camino, Firefox and Epiphany was born.

2003

The Pirate Bay (TPB) bittorrent tracker is founded by Gottfrid Svartholm, Fredrik Neij, and Peter Sunde. It is based in Sweden.
The Safari web browser was created.

Wordpress

WordPress is an open source blog publishing application and can be used for basic content management. It was first released in May 2003 by its co-founders Matt Mullenweg and Mike Little as the successor to b2/cafelog. It is powered by PHP and a MySQL data back-end.

As of September 2009, Wordpress is used by 62.8 million websites in the US and 202 million websites worldwide. It won the best overall CMS award from Packt publishing last month.

Delicious

The precursor to Delicious was Muxway, a link blog that had grown out of a text file that Schachter maintained to keep track of links related to Memepool.

In September 2003, Schachter released the first version of Delicious. In March 2005, he left his day job to work on Delicious full-time, and in April 2005 it received approximately $2 million in funding from investors including Union Square Ventures and Amazon.com.

Yahoo! acquired Delicious on December 9, 2005.

Scala

The design of Scala started in 2001 at the École Polytechnique Fédérale de Lausanne (EPFL) by Martin Odersky, following on from work on Funnel, a programming language combining ideas from functional programming and Petri nets. Odersky had previously worked on Generic Java and javac, Sun’s Java compiler. Scala was released late 2003 / early 2004 on the Java platform, and on the .NET platform in June 2004. A second version of the language, v2.0, was released in March 2006.

2004

Mozilla Firefox 1.0 released, Microsoft Internet Explorer’s biggest competitor since Netscape Navigator.

Facebook

Mark Zuckerberg invented Facemash on October 28, 2003 while attending Harvard as a sophomore. The site represented a Harvard University version of Hot or Not, according to the Harvard Crimson. That night, Zuckerberg was blogging about a girl who had dumped him and trying to think of something to do to get her off his mind.

Today, Facebook has reached 350 million registered users, it worths more than 5 billion us dollars and is one of the most searched keywords on Google.

Flickr

Flickr was developed by Ludicorp, a Vancouver-based company that launched Flickr in February 2004. The service emerged out of tools originally created for Ludicorp’s Game Neverending, a web-based massively multiplayer online game. Flickr proved a more feasible project and ultimately Game Neverending was shelved.

Today Flickr is the place for users to share personal photographs, the service is widely used by bloggers as a photo repository.

Groovy

Groovy is an object-oriented programming language for the Java platform, and is the second standard language for the Java platform, the first being the Java programming language. It is a dynamic language with features similar to those of Python, Ruby, Perl, and Smalltalk. It can be used as a scripting language for the Java Platform.

2005

The social browser “Flock” was born. It integrated many web services (blogger, Flickr etc) built into the browser.

Joomla

Joomla! came into being as the result of the fork of Mambo by the development team on August 17, 2005. At that time, the Mambo name was trademarked by Miro International Pvt Ltd, who formed a non-profit foundation with the stated purpose to fund the project and protect it from lawsuits.

By October, 2009, the 2009 Open Source CMS Market Share Report reached the conclusion that Joomla! is the web’s most popular open source content management system. That conclusion was based on an extensive analysis of rate of adoption patterns and brand strength and was backed by a survey of users.

Zend Framework

The Zend framework was PHP’s reply on frameworks like Ruby on Rails and the Spring Framework. Today, Zend framework is one of the most used and powerful PHP frameworks. Zend framework’s libraries can be used as separate libraries without using the rest of the framework.

Symfony

Symfony is a web application framework written in PHP which follows the model-view-controller (MVC) paradigm. Released under the MIT license, Symfony is free software. Yahoo! used Symfony for it’s bookmarks and answers services. Delicious uses Symfony and Dailymotion also ported it’s code to use Symfony.

F#

F# is a strongly typed language that uses type inference. As a result, data types need not be explicitly declared by the programmer; they will be deduced by the compiler during compilation. However, F# also allows explicit data type declaration. Being a .NET language, F# supports .NET types and objects. But it extends the type system and categorizes types as immutable types or mutable types.

2006

AmigaOS 4 was released by Hyperion Entertainment (VOF) under license from Amiga, Inc. for AmigaOne registered users.

jQuery

jQuery was born that year. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. jQuery managed to become the de facto tool to use, to perform complex Dom manipulation and website behavior varying from animation effects to form validation and Ajax.

Hundreds of jquery plugins are available in the official plugins directory and every day more plugins are created from jQuery users.

Twitter

Twitter began in a “daylong brainstorming session” that was held by board members of the podcasting company Odeo in an attempt to break out of a creative slump. At that meeting Jack Dorsey introduced the idea of an individual using an SMS service to communicate with a small group, a concept partly inspired by the SMS group messaging service TXTMob.

Today Twitter is the SMS of the Internet. It is one of the most promising social networks and many start-ups use it’s API for offering services based on Twitter.

2007

Microsoft Corporation launches Windows Vista

Clojure

Clojure (pronounced like closure) is a modern dialect of the Lisp programming language. It is a general-purpose language supporting interactive development that encourages a functional programming style which enables simplified multithreaded programming.

Clojure runs on the Java Virtual Machine and the Common Language Runtime. Clojure honors the code-as-data philosophy and has a sophisticated Lisp macro system.

2008

Netscape dropped support for “Netscape Navigator”.
Google’s web browser, Google Chrome debuted. It will later be used as the base for Chrome OS.

YQL

Yahoo! query language (YQL) is an SQL-like query language created by Yahoo! as part of their Developer Network. YQL is designed to retrieve and manipulate data from APIs through a single Web interface, thus allowing mashups that enable developers to create their own applications.

Initially launched in October 2008 with access to Yahoo APIs, February 2009 saw the addition of open data tables from third parties such as Google Reader, the Guardian, and The New York Times. Some of these APIs still require an API key to access them. On April 29th of 2009, Yahoo introduced the capability to execute the tables of data built through YQL using JavaScript run on the company’s servers for free.

2009

Microsoft releases Windows 7, two years after Windows Vista was released.

Opera Unite

Opera Unite is an extensible framework that allows for several web services to be hosted from the user’s computer, including a web server for hosting a site, file and photo sharing, chat room, and streaming media. Opera ASA has given the Opera Community the API to create new or improved services for the Opera Unite Platform, and many have already done so. An Opera Unite user’s running services can be accessed from a dedicated web page hosted on the user’s Opera Community account, and can be accessed by any browser (though the host must use Opera).

Chrome OS

At November 19, Sundar Pichai, the Google vice president overseeing Chrome, demonstrated an early version of the operating system, which included a desktop that closely resembled the Chrome browser, but with tabs for frequently used Web-based applications. The netbook running the operating system booted up in seven seconds, a time Google is working to improve.

Chrome OS is an open source operating system based on Linux kernel and uses Chrome as it’s UI.

Google Wave

Google Wave is a self-described “personal communication and collaboration tool” announced by Google at the Google I/O conference on May 27, 2009. It is a web-based service, computing platform, and communications protocol designed to merge e-mail, instant messaging, wikis, and social networking.

Closure

The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more. The Closure Library is server-agnostic, and is intended for use with the Closure Compiler.

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what’s left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Google Go

The initial design of Go was started in September 2007 by Robert Griesemer, Rob Pike and Ken Thompson, building on previous work related to the Inferno operating system. Go was officially announced in November 2009, with implementations released for the Linux and Mac OS X platforms.

What events occured in this decade that are your favorites? Please drop a comment and tell us!

How I Imagine Google Chrome OS

Kerasiotis Vasileios — Sat, 14 Nov 2009 15:56:07 +0000

Based on the latest rumors, Google is about to release Chrome OS (Google’s own operating system) during the next weeks. Some speculations are already there about it. The most sure speculation is that Chrome OS will be a Linux. Many people started making assumptions of the new OS, about it’s features and uses. Some of them believe that it will be a lightweight operating system with Google application shortcuts on the desktop but…

When we talk about Google, we are talking about a company that doesn’t do things without the “know how” and the “know why” principle. Google has been preparing the ground for it’s operating system the last 3-4 years now and July 2009 was not a month that Google’s CEOs woke up and said “Hey, lets make an operating system”.

Fake image I made based on my imagination about Chrome OS

Lets see what Google says to us about the Chrome OS:

Speed, simplicity and security are the key aspects of Google Chrome OS. We’re designing the OS to be fast and lightweight, to start up and get you onto the web in a few seconds. The user interface is minimal to stay out of your way, and most of the user experience takes place on the web. And as we did for the Google Chrome browser, we are going back to the basics and completely redesigning the underlying security architecture of the OS so that users don’t have to deal with viruses, malware and security updates. It should just work.

Note the keywords above:

Speed
Simple
Secure
Web based

Let’s analyze the text above and try to imagine how Chrome OS will look, work and behave.

Speed

Google says that Chrome OS will be fast and lightweight. The user interface will be minimal, so the only thing I can think of is that the Chrome browser will be the main application and the File Manager of this operating system. The OS will load the necessary drivers for Internet connection and Chrome browser will load upon startup of the system.

Simple

Since the only application to load on the operating system is the Chrome browser, most of the time users will be using the browser to do anything. Some other applications might exist as standalone programs but not on the default install of the system.

Secure

Being secure is something time will tell. Based on my speculations though, security will be achieved from the philosophy of the system. Chrome OS will be focused on cloud computing. This takes care of viruses since nothing needs to be installed on the system for applications to work. If we count in some technologies that are on their way to production stage like HTML5 and it’s storage database, applications will be able to work offline too when Internet connection is not available.

Storage

Chrome OS will probably be using an online service for storage. With a variety of services available on the net, it will be a piece of cake to add storage devices on your PC. I assume that classic storage devices will also be supported since Chrome OS will need it to store itself.

Users

Chrome OS will allow many people to work on the same machine, allowing remote connections on the system with a “Sign in with your Google Account” dialog where each Google user will be able to login to the system provided the PC owner gave access to that user. The same thing that happens with your Adsense or Analytics account.

The Desktop

A Google Wave aware desktop will be able to allow users to collaborate and communicate right from the desktop. Even if having a desktop will be an option.

Applications

Here is a list of some applications for the new OS. These will not be just web shortcuts to their online versions but standalone applications that will be using APIs to operate:

Media Player: YouTube
Available as a standalone app. Google is serious about HD on YouTube and by using a standalone version of YouTube is nice way to deliver high quality movies to the user.
Image Manager: Picasa
The existing Picasa application and Picasa web albums is a great example on how most of Chrome OS apps will be.
File Manager: Chrome
Even if by making Chrome, the default file manager of it’s operating system, would raise some complaints about monopoly from it’s users, this is how the whole thing is in my head.
Office: Google Docs
Calendar: Google Calendar
Able to manage your tasks in real time with other users with a heavy usage of the CalDAV API.
Image Editor: SketchUp
Just like Picasas case.
Collaboration: Google Wave

Google’s new language “Go”, will have it’s share on the Chrome OS. Many applications delivered by Google or third parties will use Go’s compilers to build executables and apply upgrades and patches. This allows more thoughts on how Chrome could be used for developing purposes.

The wait is over?

When i tried to find some images to use for this article, I stumbled upon this post that states to have installed Chrome OS and gave some screenshots to the public:

Image of a said to be : Installation of Chrome OS

System Setings

I saw these images after the article was finished. Honest!

Real Diamonds Google Hosted Projects

Kerasiotis Vasileios — Thu, 12 Nov 2009 18:21:59 +0000

Google is on fire the last months. We witnessed numerous projects coming out as Google products. Projects like Wave, the Closure JS library, the “Go” programming language and the GWT (Google Web Toolkit) are only some of them. All of these projects are hosted on Google’s project hosting so, I did a little research to find some more projects.

My research turned out to be a resources heaven since I found some really neat projects (Some of them might not include files to download but are really interesting and I think you could bookmark them for future reference). Here is a quick list of the projects that I found interesting.

Quick Search Box for the Mac

Google Quick Search Box is an open source search box that allows you to search data on your computer and across the web.
With Google Quick Search Box you can search for information from just about anywhere. You can then perform actions on the search results, such as launching applications, emailing friends, or playing a song.

SiteBricks – A fast, light, web framework powered by Guice

Sitebricks is a simple development layer for web applications built on top of Google Guice. Sitebricks focuses on early error detection, low-footprint code, and fast development. Like Guice, it also balances idiomatic Java with an emphasis on concise code.

Guice – A lightweight dependency injection framework for Java 5 and above

Put simply, Guice alleviates the need for factories and the use of new in your Java code. Think of Guice’s @Inject as the new new. You will still need to write factories in some cases, but your code will not depend directly on them. Your code will be easier to change, unit test and reuse in other contexts.

Jaiku Engine

JaikuEngine is a social microblogging platform that runs on AppEngine. JaikuEngine powers Jaiku.com. Jaiku uses the Django framework as well as most of its development process.

Native code for web apps

Native Client is an open-source technology for running native code in web applications, with the goal of maintaining the browser neutrality, OS portability, and safety that people expect from web apps.

AxsJAX – Access-Enabling AJAX

The AxsJAX framework helps inject accessibility features into these applications so that users of adaptive technologies such as screen readers and self-voicing browsers experience the same level of interactivity that is now taken for granted by users of Web 2.0 applications.

Software Construction Toolkit

A set of extensions to the open-source SCons build tool (www.scons.org).

Explorer Canvas

Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.

Goopy Functional

Goopy Functional is a python library that brings functional programming aspects to python.

Caja

Caja allows websites to safely embed DHTML web applications from third parties, and enables rich interaction between the embedding page and the embedded applications. It uses an object-capability security model to allow for a wide range of flexible security policies, so that the containing page can effectively control the embedded applications’ use of user data and to allow gadgets to prevent interference between gadgets’ UI elements.

PIWI

PIWI is an XML/XSLT Transformation Framework written in PHP. It’s basic concepts and ideas have been stolen from the great Java-Applications Apache Cocoon and Apache Forrest. Cocoon is still a great web framework, but very complex and of course in Java, which makes it not useful for people who want the power for their small project, but not the pain. Apache Forrest on the other hand is a publishing framework; powerful too but hard to install and quite complex. PIWI addresses some of the problems.

Re-Write3

rewrite3-framework provides an object orientated framework with XSL used for all (server side) transformations to render the client output e.g. xHtml, Ajax.

JavaScript HTML Extractor

This library allows you to extract parts of HTML using ready made functions. You can get inner,outer HTML, class names and attributes easily with this one.

Ajax Stack

An AJAX framework for developing pure AJAX applications like gmail or google maps. Development of your application is kept in logical order, i.e. HTML for page content, CSS for your website style and JavaScript for your website’s functionality. The framework handles compiling your entire website into a single static JavaScript file that can be easily versioned and served from any web server.

Amplio Vita JSLib

A pack of JS libraries to aid in development.

JS Core

JS Core is a small but versatile JavaScript framework, providing cross-browser work with the DOM, CSS and AJAX. The framework does not cause conflicts with other scripts and can be used in projects of any complexity. Structure js-core provides a convenient mechanism for extending the standard functional.

GSkinner

A collection of public AS3 classes released under MIT Licensing by gskinner.com .

Programming Languages

I also came across some interesting programming languages. Give them a try.

Fusion

Fusion is a powerful high level programming language that merges several feature from Ruby, Python, Java, C++, Haskell, Pascal, Visual Basic, in a only language.
It’s implemented by a compiler written in Haskell that transform Fusion code in Ruby code. It’s probable that in the near future the code will be compiled in various agile programming languages, like Python or PHP.

Tycho

Tycho is a new programming language designed for language oriented programming (LOP). Combined with a very dynamic runtime, Tycho programmers can define syntax and semantics that bring the code closer to the problem domain. At its heart, it’s a dynamically typed language that runs on the .Net Framework. It’s object oriented but requires no classes. Aspect orientation is achieved with actors.

Toupl

Toupl is a super programming language, designed for text generation tasks. Syntax based on Foobar 2000 Tagz Script, but modified and extended for more power, symmetric, easy and generic.

Sense Script

Script programming language. All You need to use it is one, small DLL, so You can use sense script in every form – for example in your application.

Noop

Noop (pronounced noh-awp, like the machine instruction) is a new language experiment that attempts to blend the best lessons of languages old and new, while syntactically encouraging what we believe to be good coding practices and discouraging the worst offenses. Noop is initially targeted to run on the Java Virtual Machine.

Use Google’s Power To Create Powerfull Search Engines (Part II)

Kerasiotis Vasileios — Tue, 27 Oct 2009 17:50:45 +0000

In our previous article, we learned how to create a custom search engine using Google’s infrastructure. In this article, we will go through some remaining aspects of this wonderful API and we will also create a custom search engine using what we learned till now.

Refinements

Refinements AKA search suggestions are little tips that we show to our users to help them narrow their search. For example, if someone searches for “python”, our search engine does not know if the user is looking for the snake family of pythons or the programming language. So, we could help our users refine their search by providing some search suggestions like:

python language
python programming
python tutorial
python snake
etc

To create refinements you need to either add them through the control panel or by using an annotations XML file. The code needed to add each refinement label is:

The Facet element has this structure:

Facet
- FacetItem - The refinement link that is displayed at the top of the results page.
  - Label name
    - Rewrite
    - IgnoreBackgroundLabels
  - Redirect

Each Facet elements can have up to four FacetItem child elements. You can create as many refinement labels as you want and display up to 16 refinement links in the search results page. Here is an example on how we can add the above example to a custom search engine file:


 Universities

 

 
 
 
 lecture OR lectures
 
 
 

 
 
 
 homework OR assignment OR assignments

Tagging Sites With Refinement Labels

You can tag sites with refinement labels. Each annotation can have multiple labels, which means that the same site can be used in other search engines and be ranked differently. This example shows how to do this in the annotations file:

Appending Search Queries

If you want to help your users by providing refinement links that add helpful search terms to their queries, you can use the Rewrite element in your refinements. The element appends the search terms to your users’ queries when they click a refinement link. The Rewrite element can have up to 100 characters, all of which should be lowercase, except for uppercase search operators such as OR. So based on the refinement labels we can use the rewrite child element and do this:


 
 
 homework OR assignment

Now. Each time the user clicks on the Homework refinement link, the query will be appended with “homework OR assignment”. This way, our search engine will show more relevant results than it would for just homework.

Redirecting Search Queries

You can also redirect the user to another site when he/she clicks on a refinement label. For example you can redirect a user to the PHP Manual when he clicks on the refinement link. This can be done like this:


 Universities

Using Synonyms

You can expand your users’ search queries by using synonyms, which are variants of a search term. This helps the users since when a user searches for “photoes” our search engine will bring up results for “images”, “landscapes” and “screenshots” too. While the example mentioned is many times handled by Google itself, some other words might not. So for example a user that searches for “sf” might sometimes looking for Symfony, others for Sourceforge and some other times for San Francisco. It is up to you to determine what you want the engine to bring up based on your audience. To add synonyms you must add the code in the Context file of your CSE.

Example:


 
 equity
 share

Each query term (SynonymEntry element) can have with up to ten variants (Synonym elements). The variants could be single words or phrases. You can define multiple query terms, so long as you not exceed a total of 500 variants.

Creating Special Results

For any reason, you might want to bring a search result that you think that it answers your user’s queries to the top by creating special results. The two types of special results are:

Promotions - simple results with links to relevant webpages.
Subscribed links – result snippets for a set of queries. Subscribed Links directly answers your users’ questions and save them from some research work. A type of subscribed link is this one that answers the question to everything.

Before you start creating special results, determine which type best suits your needs. Promotions are simpler and easier to create, while subscribed links have richer features but require significantly more planning, development, and troubleshooting.

Promotions

Unlike other Custom Search features, you create the XML for promotions not in the context file nor the annotations file, but in its own file. The following code describes promotions for a search engine on programming tutorials:

You can have up to 2,000 promotions in your account. You can allocate the promotions across the search engines in your account any way you like. Let’s say you have two search engines in your account. You can apportion 2,000 promotions to one search engine and nothing to the other; or you can apportion up to 1,000 promotions to each search engine.

Subscribed Links

To better understand the subscribed links feature, just go to Google and search for “AJAX”. The first result is the “AJAX (programming)” article on wikipedia. If you wanted your users to get info about the AJAX hero, you could use a subscribed link to do this.

To enable the subscribed links you created using the control panel:

Go to the Basics tab.
Select the Enable special results, such as subscribed links and promotions check box.
Click Save Changes.

and to add them in the context file you should do something like this :


 ...
 ...
 ...

You can find the SubscribedLink creator id you should download the context file generated by the control panel and find the creator attribute of the CustomSearchEngine element.

Creating a Demo Search Engine

As we promissed, we are going to create a demo search engine that will facilate most of what we learned through these two articles about custom search engines. Try this search engine. Try to search for something that has to do about programming and also try searching for “css”,”css tutorial”,”tutorial” and “programming tutorial”.

These are the files:

Annotations file

Context File



 JSLSE
 JavaScript Libraries Search Engine
 
 
 
 
 "php manual" OR "java manual" OR "ruby manual" OR "groovy manual" OR "scala manual" OR "python manual"
 
 Manual

Use Google’s Power To Create Powerfull Search Engines (Part I)

Kerasiotis Vasileios — Sat, 24 Oct 2009 17:51:45 +0000

Did you know that you can use Google’s power to create custom search engines and then use them on your site or whenever you need them? Well, if you didn’t, then this post will try to provide some info about this feature.

To create a Google custom search, there are some simple steps you have to follow. First of all, you have to go to the Custom Search website and click on the “Create a Custom Search Engine” button. The next screen will ask you some things about your search engine:

Search Engine Name
Search Engine Description
Search Engine Language
What do you want to search
This is where you decide where your search engine will look for results. There are 2 options:
- Entire web
- Only sites I select
Select some sites
- Here you put the sites your search engine will look into. Put one site per line. You can also use wildcards for searching entire domains (eg: *.domain.com), entire sites (eg: www.domain.com/*) or parts of sites (eg: www.domain.com/*2009* for all pages within 2009).
Select an edition
This is where you specify the type of the search engine to use. There are 2 options here:
- Standard Edition: Free with ads
- Business Edition: Starts at $100 per year, no ads on results pages.

The next screen will let you tryout your search engine. If the results are what you expected, you press on the “Finish” button and you are done. Your search engine is ready. A list with all your search engines will be displayed and you can visit it by just clicking on it’s name.

Some Custom Search Engines Worth Visiting

Here is a list of some neat engines we found and one that we created for you:

WordPress Plugin Repository – Searches wordpress.org plugin repository, for lack of a proper search engine
Wordpress Search – Search for sites relevant to wordpress development and deployment.
Drupal Developer Search Engine – Search engine for Drupal developers to search many Drupal related sites.
Search Drupal Modules – Ever had trouble finding that Drupal module you know just has to exist? Someone must have already created it… well now you can find it!
Twitter Search – A Twitter Search Engine.
Java Search Engine – Java Programmers and Technical Search.
JSLSE - Our custom search engine. This one searches more than 10 JavaScript Libraries sites.

Beyond Simple CSEs

After your custom search engine creation, you can use various tools to personalize your search engine. For example you can change it’s look and feel, add annotations, link the search engine to your Adsense account and earn money, promote some sites to appear higher than the others based on specific queries, refine the results and you can also invite up to 100 friends to contribute to your search engine. There are usage statistics provided for your CSE too.

If you invite someone to contribute, he/she will be able to add refinements to your CSE and use the Google Marker bookmarklet which allows the user to add refinements and labels to pages. You will also be able to use their refinements too.

The Control Panel is a great way to customize your CSEs but if you want to go further, you should learn how to use the XML or TSV custom search format.

Defining CSE Specifications

A basic specifications file looks like this:


 RealClimate
 Science behind global warming and climate change.

and includes the following elements:

CustomSearchEngine
- Title
- Description
- Context
  - BackgroundLabels
    - Label
- LookAndFeel

There are also some optional elements that you can use between the Context element. These are:

SubscribedLinks
Enables subscribed links in your search results page. Subscribed links is a form of special results that you create for a set of pre-defined queries. It is a way to directly answer your users’ questions in the results page.
AdSense
Associates the search engine with your AdSense account. Make money with your custom search engine by connecting it with your Google AdSense account.
Enterprise Account
If you upgraded to Google Site Search, it lists your contact information. You can change the attribute values to update your information.

Selecting Sites to Search With XML

If you want to create a simple CSE with 2 – 10 sites’s results included, then the Control Panel is what you are looking for. But, if you want to use more than 50 or 100 sites in your search engine, then the best thing to do is to list all sites in a file and upload it. You can create annotations files using 3 formats:

OPML – Outline Processor Markup Language
TSV – Tab Separated Values
XML

The most powerful but also the most complex format is XML. You can do anything that the CSE API allows you to do with this format. TSV is easier but with some restrictions on features and OPML is the easiest format to use since it allows you to use already made annotations files but you have less features from the other 2 formats.

The OPML Format

OPML is a type of XML format that was originally developed for defining ordered lists of elements or outlines, but it is now also commonly used for web feeds. If you have OPML files from some feed aggregators, you can upload the OPML file without bothering with typing each site. Custom Search grabs the value of the OPML attribute htmlUrl and adds it to the list of sites to search. You can upload multiple OPML files for each of your search engines.

Example OPML File:


 
 Bicycles
 Fri Mar 14 23:21:11 PDT 2008
 Fri Mar 14 23:21:11 PDT 2008

The TSV Format

The easiest format to create is the TSV. The only thing to do, is to open your spreadsheet editor and allocate a column for each of the fields. Save the file with a .tsv extension and upload it. The TSV file should have a specified format. The 2 required fields are:

URL
Label

and there are 3 optional fields:

Comment
Score
Custom field – This one is a field that you can add for your reference since it does not affect the search engine. To create one, you must prefix it with “A=”. For example A=Contributor

Example TSV file:

URL     Label     Comment     A=Contributor
www.cancer.gov/cancertopics/types/liver/*     _cse_Ansi-stoubiq   government site     John
www.medicinenet.com/liver_cancer/*     _cse_Ansi-stoubiq     site on symptoms     Bill
www.webmd.com/hw/cancer/*     _cse_Ansi-stoubiq     great site for patients!     John
www.oncologychannel.com/*/treatment     _cse_Ansi-stoubiq     Steve

The XML Format

To get the most out of your CSE, you should use the XML format. There are 3 ways to use this format:

One Annotations file per CSE
One Annotations file for all your CSEs
Context files with inline annotations

You can use any of the ways above since you can always change the way by just copy pasting. The following is an example of XML annotations. It is roughly the XML version of the TSV example in the previous section. It includes the same elements, except for custom attributes, which are available only in the TSV format. This annotations file tells Custom Search to include everything under www.webmd.com/hw/* but exclude everything under www.webmd.com/hw/cancer/*:

Example XML File:



 
 
 government site
 

 
 
 site on symptoms
 

 
 
 great sites for patients!

Hosting Your Annotations File On Your Own Server

Google allows you to host your own annotations on your server and to be able to use more than 5000 annotations, create annotations with scripting languages like PHP and update it as frequently as you want. To host your annotations, you have to create the file, upload it to your host and tell the CSE where to find this file. You can link annotation files together and use a large number of annotations that end up to 50 files!!

Example External Annotations:

Tweak The Ranking of Your CSE

You can also change the way your CSE ranks the results. For any reason, you might want to change the way the results are ranked. This can be done by using keywords, weighted labels and scores. While keywords and weighted labels are defined in the Context, scores are defined in the annotations file.

Keywords

With keywords, you can quickly change the results. Your CSE will boost pages that contain your keywords.

Keywords example:

Labels

You can use two kinds of labels: search engine labels and refinement labels. Search engine labels determine which sites should be covered by the search engine.Refinement labels, on the other hand, are visible to your users and show up as links.

Search Engine Labels example:

Refinement Label example:


 
 
 lecture OR lectures

Whether a site is promoted, demoted, or excluded depends on the search engine label it is associated with. A search engine label can have the following modes:

ELIMINATE
Excludes sites tagged with this label from your search engine.
FILTER
Includes only sites tagged with this label, and excludes everything else.
BOOST
Show sites tagged with this label higher in the results.

Weights

Weights let you define how much a label should promote or demote a tagged site. The values for weights can range from -1.0 to +1.0. The weight range gives you fairly refined control over sites. A positive weight in the label emphasizes sites tagged with it, while a negative weight, de-emphasizes.

A weighted label example:

A very useful attribute of the Label element is “top”. You can manualy set the order of your rankings this way:

Tagging Sites

You can tag your annotations with your labels this way:

Scores

Scores are used to order sites using the same label. So you can order a site this way:

I hope this info was of some value to you. On the second part of this article, we will cover some special aspects of Custom Search Engines like search suggestions, appending queries, special results, subscribed results, look and feel and we will also create a custom search engine that will use all the features covered in the 2 articles.

Google Visualizations From A To Z

Kerasiotis Vasileios — Mon, 19 Oct 2009 20:26:23 +0000

Google has released an API that you can use to create nifty visualizations for your webpages and applications. So basicaly it is an easy way to present data in ways like :

Piecharts

Barcharts

Radar Charts

and many more interesting ways.

So, lets see how we can use this great API to display our data in a more informative way. For demonstration purposes, we will create a simple page where some statistics will be presented using the API. The statistics will be pulled from a spreadsheet that we have previously uploaded to the Google Docs service with simple SQL like queries. The application will look like this:

We will be able to select the visualization type to use from the dropbox and the visualization will be displayed in the big white box.

Creating the Spreadsheet

Nothing special here. We will just create a simple spreadsheet with some fictional values. Then we will link this spreadsheet to our application.

Go to Google Docs and create a new spreadsheet. We will name it vistutorial and it will have 4 columns :

Name
Age
Salary
Programming Language

The spreadsheet will look like this:

Now we need to get the URL that we will use to our application. Select the cells you want to be visible, go to Insert->Gadget and select any gadget from the list. Any gadget will do. Click on the “Apply and Close” button and the gadget will be displayed in a floating window. On the upper right corner of the gadget window, you can see an arrow, click on it and select “get query data source url”. The URL to use in our application will be displayed. Copy this URL and note it somewhere.

Using Visualizations

All you need to use Google visualizations is to: load some JavaScript files provided by Google, create a Div layer in your page and draw the visualization. This can be better shown in a 1-2-3 steps example:

1) Load Libraries:

2) Create the visualization container:

3) Draw the visualization:

//Load the visualization library with the visualization packages that we will use
google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart','gauge']});
//Draw the piechart with our data
var chart = new google.visualization.PieChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340, is3D: true});

Implementing Visualizations to Our App

The first thing we need to do is to create our application’s layout.

HTML:


Google Visualization Tutorial

CSS:

#container{
 width:768px;
 margin:0 auto;
 padding:10px;
 background-color:#C9CFFF;
 min-height:500px;
}

select{
 width:200px;
 margin-right:100px;
}

#header{
 margin-bottom:30px;
}

#logo{
 float:right;
}

#vis_chart{
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #000; padding: 10px;
 clear:both;
 background-color:white;
 min-height:400px;
}

On the first part, we are including the API library from Google, after that, we load the visualization library and we specify the packages we want to load:

google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart']});

We also assign a method to the change event of the select element. The function initialize is responsible for our data to be available to our application:

function initialize() {
 // Replace the data source URL on next line with your data source URL.
 var query = new google.visualization.Query('http://spreadsheets.google.com/tq?range=A1:D11&headers=-1&key=0AtbpzGdXYTjpdDdkUlNLcjV2ZWNZNUVveFZzdU05dmc&gid=0');

 // Send the query with a callback function.
 query.send(handleQueryResponse);
}

In order to use your spreadsheet with the function above, you should replace the URL provided with the one you got from your gadget.

We see that the initialize method, will do a :

query.send(handleQueryResponse);

This, tells us that the callback function that will handle the query response is handleQueryResponse which we will use to set the visualization to the one selected from the dropbox:

function handleQueryResponse(response) {
 var element = document.getElementById('visualization').value;
 if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 return;
 }
 var data = response.getDataTable();
 //first clear the visualization container
 document.getElementById('vis_chart').innerHTML = '';
 switch(element){
 case "Table":
 var chart = new google.visualization.Table(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 case "PieChart":
 var chart = new google.visualization.PieChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340, is3D: true});
 break;
 case "LineChart":
 var chart = new google.visualization.LineChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 case "MotionChart":
 var chart = new google.visualization.MotionChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 case "ImageChart":
 var chart = new google.visualization.ImageChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 }
}

This is it! Our application is able to get data from our spreadsheet and present it with the visualization of our choice. You can test the application at this stage and see how it works.

Using the Query language to get specific cells

The visualization API supports an SQL like query language that we can use to select, perform actions and data manipulation to our data. For example we could select data based on any cell of our spreadsheet. Lets try to extend our application so that it will be able to display data based on selective criteria. We will add a radio group that will “order” our application to display data by programming language.

The first thing to do is add the radio group:

Filter by:
 ASP
 C
 Java

 PHP
 Ruby
 VB

and the JavaScript function to handle the query:

function filter(){
 var element = document.getElementById('languageselect');
 for (var i=0; i
We set an optional query here:
query.setQuery("select * where D='"+lang+"'");
This selects all rows from our spreadsheet that the programming language (the D column) equals the language we chosen. For an example of this new feature you can check here.
Handling Events
You can handle events generated from user actions on your visualizations too. For example we can display the logo of the programming language the person codes in upon selection of a person. To handle events, we have to listen to the events generated by the visualization and handle the data. This can be done by doing this:
google.visualization.events.addListener(table, 'select', selectHandler);
The above code will add a listener to the select event of the table visualization and it will call the selectHandler method to handle the event. So, based on this line of code, lets add the feature described above (display language logo) to our application. We need a placeholder for our logo:

and we should also modify our handleQueryResponse method and add the listener to our visualization. Our function now looks like this:
function handleQueryResponse(response) {
 var element = document.getElementById('visualization').value;
 if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 return;
 }
 var data = response.getDataTable();
 //first clear the visualization container
 document.getElementById('vis_chart').innerHTML = '';
 switch(element){
 case "Table":
 var chart = new google.visualization.Table(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 case "PieChart":
 var chart = new google.visualization.PieChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340, is3D: true,title: 'Jeez Tech Visualization Demo'});
 break;
 case "LineChart":
 var chart = new google.visualization.LineChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 case "MotionChart":
 var chart = new google.visualization.MotionChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 case "ImageChart":
 var chart = new google.visualization.ImageChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 }
//Here we add the listener:
 google.visualization.events.addListener(chart, 'select', selectHandler);
//We set 2 global vars to be available for our handler :
window['data'] = data;
 window['chart'] = chart;
}
Now, the only thing to do, is to add the selectHandler method. Just a simple method that will switch case on the programming language value and display the appropriate image:
var selectHandler = function(){
 var chart = window['chart'];
 var data = window['data'];
//get the selection object
 var selection = chart.getSelection();
 var message = '';
//go through the object
 for (var i = 0; i < selection.length; i++) {
 var item = selection[i];
//Select the third column of the selected row
 var str = data.getFormattedValue(item.row, 3);
 }
 document.getElementById('langlogo').innerHTML = "";
}
Our application is able to handle select events now. You can check it out.
Here is a screenshot of the application :
Our Visualization API demo
We are ready. Our application is now able to display visualizations, filter them and handle user generated events. The  Google Visualizations API is a great tool to create awesome presentations of your data to your pages and applications. We will get back on it in a future post, explaining how you can implement your own data source and some other cool uses of the API.

A Google Wave Guide For Dummies

Kerasiotis Vasileios — Thu, 08 Oct 2009 17:51:55 +0000

Today i got my invitation for Google’s new service called “Google Wave”. It was not something new to me since i already had access to the sandbox but today i finally found some time to play with it. I found some excellent features and some things that i think it would be great if the guys at Google implement in the near feature. We use simple plain language in this article. Wavelets,blips and other stuff might be difficult for some users to follow.

We also found that waves are easier to follow on Google Chrome (wonder why?) since the memory amount used when using it with Firefox and Opera is much larger than Google’s browser and that live typing is something folks at Google should reconsider adding it as an option.

The interface

This is how Wave looks like this (the red sections are to explain what each section is and does):

This is what each red section is:

1) The navigation menu. An easy way to find your waves, edit your settings (still under construction), your saved searches will appear here and you can also create folders to organize your waves.

2) Your contacts are here. You can add other people, see recent waves from each person and ping them. Ping is a kind of a private wave that will do what it’s name implies. Notifies the user of your presence. You can also start a new wave with a user and automatically add the user as a participant.

3) This is where some Google search magic takes place. You can do nearly anything from this section. You can start a new wave by clicking on the “New Wave” button, search for waves about something, for example : “php”, you can search using custom search terms like:

by: Username here. Shows waves started by the user or a wave where the user added some participants
with: email or username here. Shows waves where the user participated in.
in: folder here. Shows waves in the folder.
tag: tag name here. Shows waves tagged with this tag.

The “me” keyword can be used with “by” and “with” and will display waves associated with the active user.

4) The active waves for the active user. If the wave includes a gadget, it will display a green puzzle image next to the wave text. If the wave has attachments, it will display an attachment image next to the wave text. If the wave has new messages or edits, the number of new messages will be highlighted with green color. Read only waves are marked with a gray colored Muted sign.

5) The participants of the current wave. You can add as many participants you want in a wave or remove someone (not ready yet). A very interesting feature is that you can drag a contact in a wave to add as a participant too.

6) Some basic commands that allow you to reply, mute, trash or mark a wave as read or spam. When you go to edit mode (when you write a message or edit one) this section looks like this:

You see some text formating tools. Some of them you already know what they do but there are 4 more tools there:

The attachment icon will let you upload a file into a wave, the G+ button will popup a window that will let you search with google and add the result in the wave. The next button lets you add a Google gadget in the wave. This means that all gadgets found here can be used in a wave. The next 2 buttons are wave extensions. Extensions are plugins that add extra functionality to a wave. As a reference, the first button adds a Yes/No/Maybe gadget and the second one adds a maps gadget.

7) Here is how a gadget looks like in a wave.

8) Actions for reacting with the message. You can edit it, leave a reply to this message or a private reply that will be visible only by the author of the message or any participant that you want. You can also copy the message to a new wave and start a new wave that has other purpose of the wave you are into.

9) A message.

10) Existing replies of a message.

11) You can tag a wave here. You can then search for this wave with this tag.

12) This button will let you download all files in the active wave, upload new files or create a new wave with these files.

Cool additions and uses

It would be great if wave could understand the filetype of a file and open it in a wave. For example a user uploads a video or a flash movie and the file starts playing at once or with a click on a play button. A user uploads a document and a new wavelet is created with the contents of the file.

Waves could become nice slideshow aware image galleries too. For example a user embeds a wave to a site and sets the wave to show images as a slideshow. So the only thing needed are the images to be dropped into the wave.

Commenting on blogs, replying on forums or creating blogs and forums based on Google wave are some of the first things that come in mind of many people but the “wave” is something bigger.

We will come back with some insights of the API too in a future post.