Blog

Designing for mobile with HTML5

Posted in: Mobile Websites, Websites by koolkat on March 14, 2011 | No Comments

Seeking to leverage my HTML, CSS and jQuery skills, I decide to try to develop a web app aimed at mobile devices. I was able to add in Apple icons, geolocation and viewports but stumbled on a most fundamental point; what makes a good mobile design?

Of course, I am still struggling with this but really look forward to the mobile design workshop at Event Apart Seattle.

Google Map API V3 – revisited

Posted in: Websites, WordPress by koolkat on March 10, 2011 | No Comments

In my previous posts on using the Google Map API, I did not address how slow the geo-coding (converting addresses to latitude and longitude) process is.  I wanted to find some method of  caching the data for a reasonable period of time so that the map loads quickly but I still can get address changes in a timely manner.

Since I am using WordPress, this led me to transients.  I added my transient function to the after_setup_theme hook, which runs  before the init hook since I wanted to cache the data as soon as possible. Here is the code I used in functions.php:

add_action( 'after_setup_theme', 'rotary_setup' );

if ( ! function_exists( 'rotary_setup' ) ):
function rotary_setup() {
$markers = array();
$markerRow = 0;
if (false === ($value = get_transient('map_data'))) {
$rotaryclubs = simplexml_load_file('http://www.ismyrotaryclub.org/club/Clubmeetings.cfm?D=5030&ClubTypeIDs=0,4&xsl=http://rotary5030.org/xsl/MeetingsX.xsl');
foreach($rotaryclubs->CLUB as $club) {
if (strlen (strval($club->MEETINGADDRESS)) >0 ) {
$address = urlencode($club->MEETINGADDRESS . ' ' . $club->MEETINGCITY . ' ' . $club->MEETINGSTATECODE . ' ' . $club->MEETINGPOSTALCODE);
$geocode = simplexml_load_file('http://maps.googleapis.com/maps/api/geocode/xml?address=' . $address . '&sensor=false');
$markers[$markerRow] = array("clubname"=>strval($club->CLUBNAME), "address"=>strval($geocode->result->formatted_address),"lat"=>strval($geocode->result->geometry->location->lat), "lng"=>strval($geocode->result->geometry->location->lng));
$markerRow++;
}
}
set_transient('map_data', json_encode($markers), 60*60*12);
}
}
endif;

Notice a few things about this code:

1. It is basically the same method of pulling XML data and creating JSON outpu
2. The transient data expires in 12 hours
3. We check to see if the transient data exists before running the code.

To use this code to build the map I added the following to my header.php:

<script type="text/javascript">
var data = <?php echo get_transient('map_data'); ?>;
</script>

Then my initialize() javascript function no longer needs to call getJSON as I already have the data. The new function looks like this:

function initialize() {
if (jQuery("#map_canvas").length > 0) {
var latlng = new google.maps.LatLng(47.6062095, -122.3320708);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); for (i=0; i
addMarker(data[i].lat, data[i].lng, data[i].clubname, data[i].address)
}
}
}

You can view the results of the geo-coding on this website.

Short South Management + Development Blog

Posted in: Websites, WordPress by koolkat on | No Comments

Short South Management + Development of Grand Rapids, MI  specializing in property management  now has a WordPress blog that coordinates with the rest of the website.

WordPress Contact Form 7 – Part 1

Posted in: Websites, WordPress by koolkat on March 7, 2011 | No Comments

Many WordPress users rely on the Contact Form 7 plugin to create a contact form that can be emailed.  There have been many posts and videos on how to install and configure the plugin, so I won’t cover that here. Instead, I am going to show a few sites which take the contact page to the next level.

Custom Layout

If you take look at the form below, you can see it is changed from the usual “out of the box” layout you get when Contact Form 7 is installed:

1. In order to get this form to work we need to do the following:
2. Install and activate the Really Simple CAPTCHA plugin.
3. Edit the Contact Form 7 settings so you end up with the following:

Form Layout

Email Header

Email Message

To get our contact form to look like the one we:

1. Remove all the code from the Form area except for the submit code
2. Add the new fields with the appropriate names and IDs after selecting the Generate Tag dropdown. You will need to add the <p> and <label> tags yourself.
3. Following the directions on the screen to copy the fields to the Form and Message area. Note, that for this form we replace the [your-name] field with our [first-name] [last-name] fields in both the Message Body area and the Mail area.

When we have finished filling out the form and saving our changes, the one remaining item is the CSS.

.wpcf7-form {margin-top:20px;}
.wpcf7-form label {
float:left;
text-align:right;
display:block;
margin-right:0.5em;
width: 8em;
font-weight:bold;
}
.wpcf7-form input[type="radio"] {
vertical-align:top;
}
div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {
border:1px solid #EC8800 !important;
}
p#wpcf7-indicates-required {
font-size:.9em;
color:#888888;
}

And for the submit button, you will see rounded corners in Firefox or WebKit (safari, chrome) browsers as well as IE9:

input[type="submit"]{
background:#0b2678;
color:#FFFFFF;
padding:3px;
border:none;
font-size:1.1em;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
letter-spacing:.07em;
}
input[type="submit"]:hover, input[type="submit"]:focus{
color: #ababcc;
}

The actual page can be found at http://createthelifeyouimaginecoaching.com/contact/.

See http://www.koolkatwebdesigns.com/wordpress-contact-form-7-part-2/ for another example.

Google Map API V3

Posted in: Websites by koolkat on February 10, 2011 | No Comments

Although I have frequently used the Google Maps API, I have not needed to geocode (get the latitude and longitude coordinates) more than a few addresses at a time. My initial approach was to use the API geocoder class that is part of the Google Maps API. I was very surprised that after successfully geocoding about 20 addresess,  the API returned OVER_QUERY_LIMIT instead of a valid geographic location. It turns out that despite the fact that I only had 50 addresses to geocode, I was running into the issue of submitting geocoding requests at too fast a rate. According to the documentation, I should have been using the the HTTP Geocoding Service. I then needed to get back the results from the geocoding service to create the map and added the markers. I solved the problem using a combination of  PHP and jQuery.

First, be sure to include the following:

1. The current version of the jQuery library
2. <script type=”text/javascript” src=”<a href=”view-source:http://maps.google.com/maps/api/js?sensor=true”>http://maps.google.com/maps/api/js?sensor=true</a>”></script>


<script type="text/javascript">
var map;
var info_window = new google.maps.InfoWindow({content: ''});


function initialize() {
jQuery.getJSON("clubLocations.php" , function(data) {
var latlng = new google.maps.LatLng(47.6062095, -122.3320708);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
for (i=0; i<data.length; i++) {
addMarker(data[i].lat, data[i].lng, data[i].clubname, data[i].address)
} });

}


function addMarker(lat, lng, title, note) {
var myLatlng = new google.maps.LatLng(lat, lng)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:title
});
marker.note = note;
google.maps.event.addListener(marker, 'click', function() {
info_window.content = '<div>Directions to <a href="http://maps.google.com/maps?daddr=' +marker.note +'" target="_blank">' + marker.getTitle() + '</a> </div>';
info_window.open(map, marker);
});
return marker;
}
</script>


<script type="text/javascript">
jQuery(document).ready(function() {
initialize();
});
</script>


So, what does all of that do? It pulls in the JSON encoded data created clubLocations.php and loops through creating the markers and info window. As for the PHP code, we use SimpleXML to process the results from the HTTP Geocoding Service.

<?php
session_start( );
if (!isset($_SESSION['json'])) {
$markers = array();
$markerRow = 0;
$geocode = simplexml_load_file('http://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false');
$markers[0] = array("clubname"=>strval($club), "address"=>strval($geocode->result->formatted_address),"lat"=>strval($geocode->result->geometry->location->lat), "lng"=>strval($geocode->result->geometry->location->lng));


$_SESSION['json'] = json_encode($markers);
}
echo $_SESSION['json'];
?>


Note: In the actual website, we have a series of addresses to loop through so we would increment $markerRow and put the resulting array into $markers[$markerRow] . You can view the results of the geocoding on this website.

See http://www.koolkatwebdesigns.com/google-map-api-v3-revisited/ for an update.
See

WordPress Backup Buddy Plugin

Posted in: Websites by koolkat on January 26, 2011 | No Comments

I just started using the premium plugin Backup Buddy from iThemes. I wanted to use something like this so I could move a website under development on my test server to its real host. In order to test it out, I first ran it on a local install of WordPress and was satisfied with the results so I went for the real thing.
Along with WordPress, sll of my plugins, posts, pages, settings and attachments we installed saving me tons of time and hassle. The only issue I ran into was that some of my posts and pages ended up with non-displayable characters. I thing this may be related to the database character set but I am not completely certain about that. In any case, you can see the site I moved with Backup Buddy at http://createthelifeyouimaginecoaching.com/

WPtouch Mobile and Custom Templates

Posted in: Mobile Websites, Websites by koolkat on January 10, 2011 | No Comments

WPtouch does not support custom post types or templates out of the box.   However, it is relatively straight-forward to get your custom posts to show up. For my website, there are two pages that use custom templates in its desktop or non-mobile modes. Each template uses a specific category to display the posts. The pages are http://www.koolkatwebdesigns.com/blog/ and http://www.koolkatwebdesigns.com/website-design-portfolio/.

At first, the mobile version of these pages had no content with only the page title and the social icons showing up. So, taking advantage of the child themes available in WPtouch 2.1, I took action. Here are the steps (excluding iPad):

1. Select the Classic (2.1) and click “Copy as child”.
2. Using your favorite FTP program copy the contents of wptouch-data/themes/classic-child-1 to your local computer.
3. Also copy page.php from wp-content/plugins/wptouch-pro/themes/classic/iphone to the wptouch-data/themes/classic-child-1 directory on your local computer.
4. Rename page.php in wptouch-data/themes/classic-child-1 directory on your local machine to page-{id}.php. Where id is the id of the page with the custom posts. So, in my case I ended up with page-5.php for my blog.
5. Edit the style.css in the same directory to include the following (you will see why later):
   1. .blog-posts .content {
      display:block;
      }
6. Since the WPTouch theme will generate classes that will cause your content to have the style display:none, edit your page-{id}.php and add blog-posts right after the second occurrence of rounded-corners-8px so you have a line like this:
   1. <div class=”<?php wptouch_post_classes(); ?> rounded-corners-8px blog-posts”>
7. Modify the line of code that has <h2><?php wptouch_the_title(); ?></h2> so it can link to post to its single page display:
   1. <h2><a href=”<?php wptouch_the_permalink()?>”><?php wptouch_the_title(); ?></a></h2>
8. Now, its time the update the wordpress loop.
9. Replace the following lines of  code:
   1. <?php if ( wptouch_have_posts() ) { ?>
      <?php wptouch_the_post(); ?>
10. With this line (cat=10 should be replaced with what your post category is):
    1. <?php query_posts(‘cat=10′); while (wptouch_have_posts()) : wptouch_the_post() ?
11. Note the php style I am using here and if you use the same thing you will also need to replace the closing bracket with:
    1. <?php endwhile; ?>
12. Finally, call <?php wp_reset_query(); ?> before <?php get_footer(); ?>

Mobile Icons for your Website

Posted in: Websites by koolkat on December 21, 2010 | No Comments

Many websites take advantage of the favicon to give that extra bit of uniqueness and professionalism to the site. This is typically done with code something like this:

<link href="http://www.koolkatwebdesigns.com/favicon.ico" rel="shortcut icon">

And,when you go to my site, you will see a tiny “kool kat” on the browser tab or before the address bar.

Now, of course, many people are using iPhones and iPads as their primary device. Wouldn’t it be great if they could access your website right from their devices home page? Well they can! All you have to do is include a link like this as part of your html head section:

<link href="http://www.koolkatwebdesigns.com/koolkat-mobile.png" rel="apple-touch-icon">

Notice the rel=”apple-touch-icon”. This is what gives you this ability. Then, when your site visitor is browsing your website on the iPad, he/she just “add this site to “add to home screen” from the Safari menu and your icon is now on the device home page with a direct link to your website.

Kool Kat Web Design’s iPad/iPhone icon

The icon should be 57px x 57px. I created my icon from an initial .png file at this site http://www.flavorstudios.com/iphone-icon-generator.

IE 9

Posted in: Websites by koolkat on December 13, 2010 | No Comments

I just created a new word press install and realized the TwentyTen theme does not display correctly in Internet Explorer 9. The header is way off to the right!

Make Your Own QR Barcodes

Posted in: Websites by koolkat on November 3, 2010 | No Comments

While browsing through the Sephora print catalog, I noticed it was filled with lots of QR Barcodes directing the reader to YouTube videos of various products.   For those of you not familiar with the QR barcodes, they are the 2-dimensional barcodes that seem to be popping up in magazines and other print media.  The QR stands for quick response which is exactly why such barcodes are useful – you can store links, contacts, video and now, even other barcodes.

I helped my friends at Azalea Software put together a free online barcode generator at http://www.qr-barcodes.com/online-generator. The code works by first using jQuery’s validation plugin to make sure the text is valid and formatting the data. FInally, a jquery ajax call loads a .png QR barcode via Google’s Chart API.  Once you have your cool QR barcode, you can scan it on you Android cell phone using Azalea’s QRdvark app.