Google Maps API, Mapplets and KLM

Google offers an API to embed Google maps into personal websites. A Google Maps key is needed to access the API, to apply for the key you need to have a Google account and to agree to the terms and conditions of Google Maps API. The key can be generated online on the Google signup webpage.

Google maps are integrated in a website with Javascript. Embedding static maps without Javascript by using image tags is also possible.

The Google API accepts certain parameters. Some are required while others are optional. The parameter list is given below:

  • center of the map : This parameter takes a comma-separated {latitude, longitude} pair
  • zoom : Maps on Google Maps have an integer “zoom level” which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 19 (the highest zoom level, down to individual buildings) are possible within the normal maps view.
  • size : width and height of the map in pixels; 640×640 is the largest image size allowed
  • format : gif, png or jpg for images
  • maptype : satellite, terrain, hybrid, and mobile (default = roadmap)
  • markers : one or more markers to attach to the image at specified locations. This parameter takes a string of marker definitions separated by the pipe character (|)
  • path : a single path of two or more connected points to overlay on the image at specified locations. This parameter takes a string of point definitions separated by the pipe character (|)
  • span : a minimum viewport for the map image expressed as a latitude and longitude pair
  • frame : specifies that the resulting image should be framed with a colored blue border
  • hl : the language to use for display of labels on map tiles
  • key : the Maps API key for the domain on which this URL request takes place
  • sensor : specifies whether the application requesting the static map is using a sensor to determine the user’s location

The process of turning an address into a geographic point is known as geocoding. Goggle provides a GClientGeocoder object to convert a string address into a latitudes and longitudes.

A marker descriptor contains a string defining the location to place the marker and the visual attributes to use when displaying the marker. These strings contain the following variable values:

  • {latitude} (required) specifies a latitudinal value with precision to 6 decimal places
  • {longitude} (required) specifies a longitudinal value with precision to 6 decimal places
  • {size} (optional) specifies the size of marker from the set {tiny, mid, small}
  • {color} (optional) specifies a color from the set {black, brown, green, purple, yellow, blue, gray, orange, red, white}
  • {alphanumeric-character} (optional) specifies a single lowercase alphanumeric character from the set {a-z, 0-9}. Note that default and mid sized markers are the only markers capable of displaying an alphanumeric-character parameter. tiny and small markers are not capable of displaying an alphanumeric-character

An online tool to create map-markers is available on the donkeymagic website.

The Google geo-developer website prodides documentation, tutorials, code samples, demos, guides and more ressources. A blog for Google geo-developers provides tips and tricks and announcements of new features concerning Google maps. Personal Geo Content can be submitted to Google, guidelines are available on the KLM webpage. KML is a file format used to display geographic data in an Earth browser such as Google Earth, Google Maps, and Google Maps for mobile.

Another useful option are Mapplets, mini-applications that run within Google Maps. You can create Mapplets that add new features or overlay your data on Google Maps.

Mike Williams published a great tutorial about the Google maps API.

eBay API

Today, I registered for an eBay Development account. The eBay Developers Homepage provides support, documentation, code samples, API keys, affiliate programs, forum, sandbox, tools, release notes and system announcements.

A sandbox key and a production key can be generated on the personal account page. There are different API’s available : shopping, merchandising, feedback, trading, client alerts, large merchant services, platform notification, research. The developer center is segmented in Windows, Java, php, Javascript, Flash and other. The eBay community codebase contains several open-source projects.

I started using the shopping API (view guide) which is optimized for response size, speed and usability. This API allows to search for eBay items, products and reviews, user info, and popular items and searches. You are able to retrieve public eBay data in a buyer-friendly view, for easy consumption by buyer-focused applications. The call reference (version 613) of the eBay shopping API is available on the following link. The call “FindItemsAdvanced” is the most useful and enables you to search for items on eBay based on many possible input fields and filters. Detailed informations are available here.

Google Analytics API launched

On april 21th, Google announced that the Google Analytics Data Export API beta is now publicly available to all Analytics users. The API will allow developers to extend Google Analytics in new and creative ways that benefit developers, organizations and end users.

A list of featured examples from Google customers is available at the Google developer website. All the documentation needed to use the API is found on the same website.

FeedBurner

FeedBurner is a Chicago-based company that provides media distribution and audience engagement services for blogs and RSS feeds. Its Web-based tools, including an extensive feed and blog advertising network, help publishers promote, deliver, and monetize their content on the Web and make feed-based content more accessible and manageable for its end users. In 2007, FeedBurner was acquired by Google.

A FeedBurner Blog is available at the Google website. FeedBurner Stats is Google’s analytics offering for blogs, websites and feeds of all kinds. The service is free with every FeedBurner feed and provides publishers with a comprehensive view of their audience.

The FeedBurner Stats service for feeds provides the following feed-related information:

  • Subscription data (e.g. number of subscribers by day, previous week, last 30 days and all time) and Reach data (the estimated number of individuals clicking or viewing your feed content in a given day)
  • Breakdown of feed readers and aggregators, email services, web browsers and bots by which subscribers are accessing your content
  • Clickthrough tracking
  • Uncommon uses — sites where your content has been resyndicated including other blogs, directories and even spam sites
  • Item enclosure downloads (podcasts)
  • Live hits, conveniently translated to your local time zone

For even more insight, you can activate the following PRO features for no charge:

  • Reach
  • Item views

Today I activated FeedBurner for my Blog.

(http://feeds2.feedburner.com/InteractiveRichMedia)

RSS feeds about contemporary arts

I assembled the following list of handselected rss-feeds about contemporary art :

Luxembourg News :

Integrate rss feeds in a webpage

Last update : December 28, 2011
To integrate rss (Really Simple Syndication) feeds in a webpage, different technical solutions are available.

XSL Transformations

rss feeds are xml documents. To transform xml documents into another format like XHTML or HTML, XSL Transformations (XSLT) are used. XSL stands for Extensible Stylesheet Language. I tried this technique in 2006 with the artpet.lu website and I run into several problems with browser incompatibilities needing browser specific code selectors in the related javascript file.

Javascript widgets

A second possibility is to use a Javascript widget displaying the parsed rss data provided by a third party rss to HTML service.

The following list shows a few rss to javascript providers :

Flash Widgets

Some rss  to HTML providers offer Flash widgets to display the parsed rss data.

PHP

PHP coupled up with HTML is the favored method for showing RSS feeds on a website when it comes to search engine optimization.

Among the php scripts, Magpie RSS, published by Kellan Elliot-Mcrea under a GPL licence, is widely considered to be the most robust option, with SimplePie coming as a second best with the less restrictive BSD license and a few additional features. SimplePie is a fast and easy to use PHP library for parsing RSS and Atom, written by Ryan Parman and Geoffrey Sneddon. There are a number of alternative RSS-Libraries for PHP, including lastRSS.php, PEAR::XML_Feed_Parser, PEAR::XML_RSS, rss2array and PHP RSS News Parser.

I installed SimplePie on my hosted webserver a few years ago. The provided testscript to ensure that the basic requirements have been addressed by the server and that you have everything you need to run SimplePie properly is very helpful.

simplepie

simplepie

I use the php technique at the www.lesliesartgallery.eu website.

Late 2011, I prefer the Google Feed API solution to quickly integrate feeds on my websites.

Google Website Optimizer

Google recently launched the Website Optimizer, a tool that can help you improve the effectiveness of your website by allowing you to test different versions of your site content to determine what will best attract users.

Website Optimizer uses two types of testing: A/B testing and multivariate testing.

An A/B experiment allows you to test the performance of two (or more!) entirely different versions of a page. You can change the content of a page, alter the look and feel, or move around the layout of your alternate pages; there’s plenty of design freedom with A/B testing.

Multivariate tests, on the other hand, allow you to test multiple variables — in this case, sections of a page — simultaneously. For example, you could identify the headline, image, and promo text as parts of your page you’d like to improve, and try out three different versions of each one.

A/B experiments are the simpler version of testing with Website Optimizer. Experiments can run on many webpages of a website.

Website Optimizer needs a Google Analytics Account, because it uses the same powerful tracking technology that is used in Google Analytics to collect experiment data. The performance of experiment pages won’t be impacted, with the possible exception of the very first page-load after you have added the tracking code.

A quick start guide is available at the Google site. Different test strategies are possible (time on page,  conversions, clicking rates, landing pages, …).

Website Optimizer scripts will fail W3C validation because they meet browser requirements which do not strictly adhere to the W3C guidelines. There is no workaround available for these errors.

Understanding Google Analytics

During the creation of a new website, I was able to have a closer look on the internal working of Google Analytics. Four computers were used to test the first layout of the new website connected to three different IP adresses. The setup was the following :

  • PC 1 : Windows XP, screen resolution 1024 x 768, three browsers : IE 8.0.6001, Firefox 3.08, Chrome 1.0.154.153
  • PC 2 : Windows XP, screen resolution 1024 x 768, three browsers : IE, Firefox, Chrome
  • PC 3 : Windows XP, screen resolution 1280 x 1024, browser IE
  • PC 4 : Windows Vista, screen resolution 1280 x 800, browser IE

Google Analytics reported 18 visits from 8 unique visitors during two days, which is correct if every used browser is considered as a unique visitor (use of cookies). The reported screen resolutions, operating systems, browser versions and flash versions were correct.

The unique pageviews can not be higher than the total number of unique visitors, which was the case. The 18 visits were segmented in 8 visits from new visitors and 10 visits from returning customers.

Customer loyalty

Customer loyalty

In the visitor loyalty report, the visits were indicated as :

  • 1 times : 8
  • 2 times : 5
  • 3 times : 3
  • 4 times : 1
  • 5 times : 1

Web Design : block and inline elements

Block elements take up the full width of the page and are naturally displayed on a new line. Block elements can not be nested within inline elements.

Examples of block elements :

  • <div>
  • <h1> … <h6>
  • <p>
  • <table>
  • <ul>, <ol>, <dl>
  • <li>, <dt>, <dd>
  • <form>

Inline elements only take up as much width as is required to display the element and will not force a new line. A width or height will not displayed on an inline element.

Examples of inline elements :

  • <span>
  • <img>
  • <a>
  • <strong>
  • <em>

With the CSS command “display: inline” block elements can be altered to behave as inline elements. By floating these elements, it will give the appearance of an inline element  but will also allow you to style them as if they were block elements. Therefore width and height can be applied to float’s successfully irrespective of whether the element has a default display of block or inline which is the reason why float’s are used so much in web design.