Now that the holidays are almost here…

I wish you all a joyful and peaceful time. Wherever you are and whatever you celebrate, enjoy time with your family, rest, relax, take some time off and recharge. All the best for the new year. See you in 2012!

I recently had a need for a PHP script that queries a MySQL database for location-based point data (a LatLong coordinate and some descriptive information) and then creates a KML-file from that data on the fly. A file like this can then easily be loaded into Google Maps, Google Earth and other geospatial applications. In my case, I loaded it into a Google Maps API-based map viewer.

Because a KML-file is in essence a text-based XML-file, it is very easy to create it from a script. The most important part of this is that is must adhere to the correct formatting. For details on this, consult the KML standard definition - especially if you want to include anything other than placemarkers.

If you have a need for a similar implementation, feel free to copy the code below and use it in your project. Just create a new PHP file (e.g. “kml.php”) and paste the script into it. Don’t forget that you will have to modify it for your database setup and table columns (mine were id, name, description, lng, lat). Other than that, it should just work.

You can check whether it works if you paste the file’s URL into the Google Maps search field. The placemarks should then just show up on the map.

<?php

// Define the database info
// -- Modify for your case --
define("DB_SERVER", "mysql");
define("DB_USER", "root");
define("DB_PASS", "");
define("DB_NAME", "my_database");
define("DB_TABLE", "my_db_table");

// Important so that the filetype is correct
header("Content-type: application/xml");

// Print the head of the document
printf("<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<kml xmlns=\"http://earth.google.com/kml/2.0\">
<Document>");

// You can include a default map view using the following lines
// -- Delete this block if you don't need it --
printf("<LookAt>
  <latitude>42.390185</latitude>
  <longitude>-72.528412</longitude>
  <range>1200</range>
  <tilt>0</tilt>
  <heading>0</heading>
</LookAt>");

if ($db = mysqli_connect(DB_SERVER, DB_USER, DB_PASS)) {

  mysqli_select_db($db, DB_NAME);

  $query = "SELECT * FROM " . DB_TABLE;

  // You could add some WHERE statements here to filter the data

  // DESC means newest first
  $query .= " ORDER BY id DESC";

  // Finally query the database data
  $result = mysqli_query($db, $query);

  // Now iterate over all placemarks (rows)
  while ($row = mysqli_fetch_object($result)) {

    // This writes out a placemark with some data
    // -- Modify for your case --
    printf('
      <Placemark id="%d">
        <name>%s says:</name>
        <description>%s</description>
        <Point>
          <coordinates>%f,%f</coordinates>
        </Point>
      </Placemark>',
    htmlspecialchars($row->id),
    htmlspecialchars($row->name),
    htmlspecialchars($row->description),
    htmlspecialchars($row->lng),
    htmlspecialchars($row->lat)
    );

  };

  // Close the database connection
  mysqli_close($db);

};

// And finish the document
printf("
</Document>
</kml>");

?>

This code is really just applicable for simple KML generators. For a more in-depth look at this, go to this page on Google’s Help on KML. Admittedly there also could be a bit more error-handling.

SketchUp QR from Alexander Schreyer on Vimeo.

As you may have noticed, I have been experimenting with QR codes lately. There’s just so much fun you can have with these little black-and-white icons. For your Friday enjoyment, here is a list of where I have used them so far:

3D QR code

The example video above is simply a vectorized QR code with randomly extruded faces.

T-Shirts

A fun way to say something on a shirt without displaying it as letters. Also a great way to link to your website. It just looks a bit nerdy…

Signage

I realized that there was no good way to link visitors in our building to our departmental website. Therefore, a good-size QR code (filled with a grass pattern) got added to the signage. In the next iteration, I think I’ll make it a little smaller (and also add the URL).

Want to make your own? Just google “QR code” and use any of the free generators out there.

Now that the year is almost over, it’s time to step back and look at what we all built over the past weeks…

Wherever you are and whatever you celebrate, enjoy your holidays and some relaxing time with your families. I wish you all the best for the new year!

Cheers,
Alex

P.S.: Yes, it’s another SketchUp Christmas model. This time I had fun using the new solids tools.

The task of setting up a new website that is CMS-driven can be quite complex. After all, there are many different CMS software packages available (many are luckily open source and free) and a complex, corporate website can be quite extensive and could contain sub-sites (“micro-sites”) as well. What I want to propose here, however, is a tool that is “just enough” for a small- to medium-size site. Often, selecting a too complex management software can lead to extensive training needs and confusion by the users that likely will underutilize the available functionality as a result. So “just enough” would be the best approach.

For these reasons, my site-building tool of choice in the past has been WordPress. Although it is often considered to be a blogging platform, it is a very capable and very easy-to use software package that can easily handle a good size site with a variety of add-on functionality (provided by plugins). You can find an overview of the core features here. Sample sites that use WordPress are shown here – use them as inspiration. And did I mention that it is free?

Beyond WordPress, other CMSs are Joomla, Drupal and many more. Feel free to look at these, too, and make up your mind on the features you need and how the site will be implemented and managed.

So what’s next for you? These are your steps to success:

1 – Analyze your Current Website, Web Presence and Needs

Start this process by looking at what you have right now. What you basically need at this point is a sitemap for your current site that shows its content (pages, documents, media files), how it is organized and what kinds of content it contains.

Generate a sitemap either by exporting it from a site management software (like Dreamweaver) or by simply going through your site – page by page – and drawing out the content on a piece of paper in the shape of an organizational map. For example, if you have a hierarchy-based site structure draw the sitemap as a tree map. If you have lots of timeline-based items (“news” items), sketch those as well. This sitemap will give you an idea how you will organize the new site.

(Image: Wikipedia)

At this point, it might also be a good idea to think about your web presence in general. Will it be important for you to have your own domain (a URL like alexschreyer.net) and do you need any email accounts under that domain name? Do you want to expand your current web offerings and offer interactive tools such as a forum to your site? All of this will help you get a clearer image of what it is you will need to build.

It is also important to figure out who will do what on the new website. Who will be the administrator(s) that are in charge of maintaining the site’s software and can add or remove features and users? Who will be the editors that can supply or edit content? The benefit of the new WordPress-based website will be that these functions can easily be distributed among many people.

2 – Set up Hosting and Secure Your Domain

What you need next is your own web property. This can be done in a multitude of ways. Before you start looking at the options, ask yourself how much effort you (or someone else in your organization) want to commit to maintenance and how much control you want to have over the site’s design and feature extensibility.

Your main hosting options are:

• Sign up with WordPress.com.
  This allows you to start a website very quickly. You can start adding content right after signup and you benefit from a minimal maintenance load because your website is hosted and the software is maintained by the folks who run this service. For $17 per year, you can also get your own domain (e.g. www.yoursite.com) and make your site look like you hosted it yourself.
  The downside of this method is that you have only limited design options (you have to pick from a number of templates) and that you have to cope with limitations such as occasional ads, limited users and limited media hosting (at least in in the free version).
• Get managed WordPress hosting.
  This option is similar to the first, only that you are now registering with companies that usually sell plain webspace. This means that the packages they offer often include domain registration, email accounts and web space (to allow you to host your own videos, for example). Another benefit is that you typically have more freedom to modify your WordPress installation.
  The downside of this option is that you may end up with more maintenance tasks (this is very much depending on the hosting package you choose, though).
• Get some web space and host WordPress yourself.
  This option gives you the most freedom. You can install WordPress and customize it any way you like (by installing design themes and modifying them or by installing plugins). You can even run multiple websites in one webspace. For example, this website is hosted with 1and1 (in their Linux Home package). These packages also come with at least one domain and multiple email accounts. Check your hosting company of choice for the features you need.
  The downside of this method is that you are in charge of all the maintenance. While WordPress is very easy to maintain, you will still have to do it all yourself (apply software upgrades, maintain database and other backups etc.).
• Host WordPress on your own computer.
  If you decide to go this route, then you are in charge of setting up your own server (including the PHP scripting engine and the MySQL database), installing WordPress and pointing the domain at your computer. This is quite involved and carries a heavy maintenance load. On the plus side, this will be likely your cheapest option – especially if you already have a fast internet connection and maybe even a dedicated IP (as may be the case on a university computer). Because all the software is available for free, the only part you need to pay for is the domain registration, which can be under $10 per year.

3 – Set up WordPress and Configure it as a CMS

Depending on the choice you made in the last step, you may automatically have WordPress installed in your webspace by now. If you picked the third or fourth option, then follow these simple steps to install WordPress yourself.

Once everything is up and running, start by modifying general settings and setting up plugins. Here are some tips:

• Set up a custom welcome page.
  Under Settings > Reading pick a static page as your home page if you don’t want to have your news items be your site’s most prominent feature.
• Set up descriptive permalinks.
  I like using “/%category%/%postname%/” as my permalink structure. Search engines seem to like it and will give you a good ranking.
• Make sure your site is visible for search engines.
  Under Settings > Privacy make sure you select the option that makes your site visible to search engines.
• Set up comments only on the pages where you actually want to have a discussion.
  Comments are a great feature of WordPress. You can even use them for mini-discussion forums on your pages or posts. When you set up comments, don’t forget to activate Akismet (the plugin that came with WordPress) so that you have less spam. It is a good idea to disable comments by default and just activate them where you need them.
• Add users.
  Based on the lineup of Administrators and Editors that you determined earlier, add people to your WordPress site. Many hands make for light work on website admin tasks, too. Just remember to give everyone a quick intro to the features so that you don’t end up with problems later. It is also a good idea to discuss formatting standards for consistency.
• Add plugins.
  This is where you expand the core functionality of WordPress. Depending on the plugins you choose, installing them ranges from extremely easy to a bit more involved. Because it is easy to try out different ones, go ahead and do so until you find the ones you like. A good starter list for a CMS is the following. You can add them from within WordPress under Plugins > Add New.
  • Breadcrumb NavXT – Adds breadcrumbs to your pages so that visitors know where they are on your site.
  • Dagon Design Sitemap Generator – You need a sitemap for the lost visitor somewhere.
  • External Links – Opens all external links in separate windows so that visitors don’t navigate away from your site.
  • Google XML Sitemaps – Simplifies integration with Google’s search.
  • Related Posts – Show your visitors what else you have on your site.
  • WP-DBManager – Helps you maintain the database.
  • YOURLS: WordPress to Twitter - Use this or a similar plugin to integrate with social networks like Twitter.

4 – Move Content to the New Site

At this point, you could focus on the design of your site (step #5 in this list). It might, however, be easier to settle on the final design if the content is already in place (stay with step #4 in that case). Whichever process you choose, at this point, you’ll likely want to do a bit of each in parallel. It might also be a good idea to get some people moving content over while others work on finding the best visual theme for your site. Choose the approach that makes most sense for you.

Now you are ready to move content from your old site to the new WordPress site. For common needs, follow this template:

• Move hierarchical pages to “Pages” in WordPress.
  Simply create a new “Page” in WordPress for each page on your old site and then copy the content over. When you create the new pages, put them into the correct place by selecting the appropriate “Parent Page”. For example, add a personal page under a “People” page (by selecting the “People” page as the “Parent”). Top level pages (such as the “People” page) have no parent page.
  When you copy content over, remember to download and then re-upload any non-text content like images or files.
• Move timeline-based items or categorized non-hierarchical items to “Posts” in WordPress.
  Set up categories in the WordPress admin area for the categories that you need. These would be categories like “News” or “Projects”. Then start copying content over to those categories by pasting relevant pages from the old site into “Posts” on the new site.
• Move media items into WordPress using a relevant plugin.
  If you want to host video or extensive image collections in your WordPress installation, then you are best off if you install a media-manager plugin and upload your media using its interface. For example, I use Nextgen Gallery for my photo galleries and wordTube for my videos.
  If this sounds too daunting, then consider hosting your media externally (on YouTube or Flickr, for example) and embed it on your pages. This has the added benefit that you are not paying for the download bandwidth.

WordPress has many more options to organize content. If you need a more customized solution, begin by reading about custom taxonomies.

5 – Design the Site

After you moved all your content over to the new site, it is time for you to review the new site and see if everything is presented as good as possible. Look at the same content in different themes. Play around with widgets (under Appearance in the admin area) and settle on a design that works best in your case. If you feel up to it, go ahead and modify the CSS or any of the template files (if you have access to them).

Look at magazine-style themes if you want to go away from the blog-like templates (blog posts on the left and timeline on the right). There are many free, high-quality themes available. The new Twenty-Ten default theme that ships with WordPress is a great place to start in any case.

6 – Set up Forwarding

After you remove your old site, you’ll be left with links somewhere on the internet that point toward your old URLs. It is best if you set up some forwarding on that site. Here are some options:

• Static error page.
  You can now move all of your old site’s content (the HTML pages) off that site. You could move them to an “Old” subdirectory on the old webspace, for example – then they are still there if you need them.
  Afterwards, add a static HTML page to your site and put some content in it that has a link to your new site (save it as notfound.html). Finally, add a file in the web space that is called “.htaccess” (don’t forget the dot at the beginning). In it, add this line:
  ErrorDocument 404 notfound.html
  This line will redirect any incoming visitors to the notfound.html page that tells them where to go now.
• htaccess redirecting.
  This is the more elegant version. Read about it on any of these sites.

7 – Deploy and Lean Back

Now you can tell everybody about your new site and wait for Google to index it. You will enjoy the simpler maintenance that WordPress provides you in no time.

Don’t forget to make sure you do regular backups of the database as well as any uploaded files. It is also a great idea for any site to start looking at site statistics. Depending on your preferences, you can sign up with free services like Google Analytics or Statcounter.

If this was helpful for you, add a link to your new WordPress-driven site in the comments below.

Links:

• New to WordPress – Where to start
• WordPress as a CMS
• Comprehensive Guide for WordPress as a CMS
• And another one…

While many functions in WordPress (the self-hosted kind) work like a charm, this one gave me the run-around a few days ago: The auto-saving post revisions that got added to WordPress a few releases back.

On our departmental website (http://eco.umass.edu/) that I created in WordPress (works great for this purpose, it’s the “Just-enough CMS!”) we had a problem where our longer pages wouldn’t show the visual editor when we tried to edit a page. The recent problem happened especially on this page. If you look at the entire thing, you’ll notice that the text body consists of approx. 2700 words. It happened on other pages, too – all very long pages.

As it turns out, WordPress was saving an unlimited number of revisions for these pages. Unbeknownst to me, there is no limit set in WordPress on the number of revisions – which inevitably leads to a rapid increase of the size of the posts database table. This did then lead to some kind of a time-out when the WordPress admin page was rendered, which prevented the WYSIWIG editor from loading.

The fix for this is to add a line like any of the following two examples to the wp-config.php file in the WordPress root directory. I will make sure I set this on all of my sites from now on! Having revisions is great but there’s no reason to push it too far (especially on shared hosting).

/* Limit post revisions to 20 */
define('WP_POST_REVISIONS', 20);
/* Disable post revisions altogether */
define('WP_POST_REVISIONS', 0);

It is also important to realize that these settings only take effect after they are set and a page is re-saved. To do a wholesale revisions cleaning of an entire blog (which I still may do to reduce the database size), it is better to look for a plugin that does that automatically.

I had read about this trick before but had never had a need to try it out – until now. So here’s a nifty trick for any self-hosted WordPress installation:

If you want to add a webpage outside of a WordPress installation that has its own design, yet relies on some of the functions of the main WordPress installation (such as the loop), then you can simply create a “WordPress-enabled” page by adding the following PHP statement to the top of the page:

require('../wp-blog-header.php');

By doing this, WordPress will be loaded with the page while the template will not. It will also not show up anywhere in the WordPress site as it is not a post or a page. You can then go ahead and invoke any WordPress core or plugin function and use its data.

In my case, this worked well for an LCD “news display” for our building. I guess, you could also use this approach for a mobile-enabled site (although there are nice WordPress plugins that do this well. In any case, here is a sample of a WordPress-enabled “index.php” file located outside the wordpress installation. To modify it for your needs, simply adjust the path to wp-blog-header.php and you are good to go.

<?php
  /** Loads the WordPress Environment to have access to functions */
  require('../wp-blog-header.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My lightweight wordpress page</title>
  </head>
  <body>
    <h1>News</h1>
    <ul>
      <?php query_posts($query_string . '&cat=3&posts_per_page=5'); ?>
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <li><?php the_title(); ?></li>
      <?php endwhile; else: ?>
      <li>No news at this time.</li>
      <?php endif; ?>
    </ul>
  </body>
</html>

See the image on top of this post for a sample of our installation. You can also look at the “live” version here (optimized for a 720p widescreen LCD TV).

I was once again changing the design of one of my websites when I realized that it would be great if I could just move things around on a page to preview the changes – without any coding. As it turns out, there is a solution to that problem: A bookmarklet and a few lines of JavaScript did the trick. Using jQuery and its UI extension, this actually turned out to be rather simple to implement.

Drag the link (“LIQUID PAGE”) shown below to your browser’s bookmarks toolbar. You can then use it on any web page. Simply load the page and then click the link. Be aware: You cannot try the functionality out on this page by simply clicking the link (it’s in an iframe). Please also note that there is a slight delay after clicking while some Javascript (i.e. jQuery) is being loaded – just wait for the confirmation dialog.

So what can you do with this? Beyond the obvious tweaking of existing web page designs, it should not be forgotten that this may hold potential for playing tricks on unaware browser users. It is – of course – also fun to just reorder (read: destroy) a well-known page design…

Before:

After:

Updates:

• I added a function that removes all “overflow” properties (after user confirms). Therefore everything can be moved everywhere on a page. Just be aware that you cannot test nested DIVs this way. Also, the page layout may break due to overflowing text.

Caveat: Works best with Firefox, Chrome, Safari – as usual.

Thanks: The code is based on the jQuery UI ThemeRoller bookmarklet implementation.

To follow those posts, either click on “follow” in Twitter:

http://twitter.com/alexschreyer

Or subscribe to my Twitter RSS feed:

http://twitter.com/statuses/user_timeline/21881607.rss

Enjoy!

P.S.: Of course, you can also subscribe to this site’s various RSS feeds using the buttons at the top of this page.

As announced in their latest blog post, Google has just released an optimization feature for their online spreadsheets (which, of course, are part of Google Docs). With this new feature, linear optimization problems can be solved easily. This is a great feature and makes online spreadsheets even more Excel-like and usable. Here are some of the features:

• Minimization or maximization of target cell, but no target value optimization. TIP: Minimize the difference to a target value if you need this.
• Select (unlimited?) cells as design variables. Restriction to positive values is possible.
• Add (unlimited?) constraints. These can be “<=”, “=” or “>=”. Since the dialog has no scroll function, the number of constraints is apparently limited by the screen height.
• Due to the nature of the optimization algorithm, only linear problems can be computed. This means that formulas may not contain power functions or decision-based formulas (IF-THEN).

I haven’t tried this feature out yet on a real problem, but my main performance question would be whether the calculation uses Javascript in the local browser (likely) or uses Google’s server resources, which may speed things up  on a large problem.

For more help and information on this feature, look at the relevant Help page. And if you need an optimization solution for Excel spreadsheets that is based on Genetic Algorithms, check out my handy tool.