Michael Gaigg: Über UI/UX Design

24Jul0

Highlights of Week 29/2011

Posted by Michael Gaigg

9Nov1

Web GIS: Principles and Applications [Paperback]

Posted by Michael Gaigg

Web GIS

Web GIS


I'm happy to introduce a new book which was co-authored by my colleague Pinde Fu: "Web GIS: Principles and Applications".

I'm really excited about this, not only because good GIS resources are scarce but also because he used screenshots of applications that I have designed over the past years, e.g. geodata.gov, GeoPortal Toolkit, Loma Linda Medical Center Response System, HydroViewer.

How much better can it get when your design ends up in a book?

Audience

While the content of the book is targeted at readers at all skill levels I can see it as a great teaching source as well as invaluable resource for managers and aspiring GIS developers to understand the principles of web applications.

Content

The content of the book is focused on the conceptual level (you won't find code samples) by trying to be systematic and as comprehensive as possible which I believe was done superbly. Nevertheless the authors do cover important new developments like geospatial Web services (REST), geobrowsers, cloud computing, geoportals, mashups, mobile GIS, Gov 2.0, geotagging, ArcGIS APIs for JavaScript, Flex, and Silverlight.

Table of Contents

  1. GIS in the Web Era
  2. Technical Basics
  3. Geospatial Web Services
  4. Geospatial Mashups
  5. Mobile GIS
  6. Geoportals
  7. NSDI in the Web 2.0 Era
  8. Web GIS Applications in E-Business
  9. Web GIS Applications in E-Government
  10. Hot Topics and New Frontiers
Suggested reading:
14Oct0

ArcGIS Silverlight App: World Bank Data Mapper

Posted by Michael Gaigg

World Bank Data Mapper

World Bank Data Mapper

The World Bank Data Mapper is the latest mapping application published by the Esri Applications Prototype Lab (thanks Richie).

The app is built using Esri's ArcGIS API for Microsoft Silverlight and the recently published (free) web API of the World Bank that provides access to up to 50 years of economic, financial and health data.

Besides mastering some technical challenges (missing cross-domain access file, amount of web requests) the map viewer looks sharp and straight forward without the usual template-related overkill of functionality - great job visualizing all this economic data. Let's see which other - maybe analytical? - mapping tools will follow...

Oh, of course, have a look at the working app and download the full source if you are interested to see how the pros did it.

5Oct1

Templates for Building Map Applications with ArcGIS API for JavaScript

Posted by Michael Gaigg

Templates for ArcGIS API for JavaScript

Templates for ArcGIS API for JavaScript

Creating web mapping applications has never been easier.

Esri offers a multitude of API's, from Silverlight to Flex and JavaScript.

Without discussing the design approach for your particular user-specific needs, I want to point to some great template resources that can serve as a starting point for customizing your app. The templates are based on ArcGIS Explorer Online viewer.

Follow this really nice tutorial on how to access the template gallery to get started.

10Aug2

How to use the Google Font API

Posted by Michael Gaigg

Google fonts available

Google fonts available

If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

  • easy to implement (as I will show)
  • well supported by IE, Firefox, Safari and obviously Chrome
  • open-source
  • free (I should have mentioned first huh?)

End Result

Tangerine font

Code Example

<html>
<head>
&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;
<style>
body {
	font-family: 'Tangerine', arial, serif;
	font-size: 2em;
}
</style>
</head>
 
<body>
This text is in <strong>Tangerine</strong>.
</body>
</html>

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.

The variant parameter can be omitted for use of default.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'&gt;

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'&gt;

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).

Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time.

The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses.

Are you using any other Font library?