Websites

WPtouch

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

In an attempt to become more mobile friendly, I decided to try out WPTouch 2.0 Pro. At a cost of $29.00 for a single user, it seemed worth the price. One of the things that intrigued me the most was the ability to have the mobile site run in “Web-App” mode. This would mean a nice icons for my home page and quick access to the page. However, this feature is only available for iPhones/iPads so I was quite disappointed that it did not work on my Android phone. Despite this, I must say that the resulting website looks nice and does have that “mobile app” vibe.  Unfortunately, it does not seem to load all that fast and I am not sure there is really any significant gain in load time over a standard site.

I am hoping that the next release will be an improvement in speed and Android support.

Using Worperss Posts for Dynamic Content

Posted in: HTML5, Websites, WordPress by koolkat on October 5, 2010 | No Comments

In working on the website for the Allied Arts Foundation, I was able to take advantage of WordPress’ post to create dynamic content for my website.

First, on the home page I use the post’s  excerpt and featured image to feed the slideshow:

global $post;
$featured_posts = query_posts('category_name=Featured Artists&orderby=ID&order=ASC');
foreach( $featured_posts as $post ) {
setup_postdata($post);
?>
<div style="width:960px;">
<div>
<h2><?php the_title() ?></h2>
<?php $sub_head = get_post_custom_values('excerpt-subhead', $post->ID); ?>
<h3><?php echo $sub_head[0]; ?> </h3>
<?php the_excerpt() ?>
<p><a href=" <?php echo get_permalink($post->ID); ?>"><span>read more</span></a></p>
</div><!-- .homeleft -->
<div>
<?php
if (has_post_thumbnail()) {
echo get_the_post_thumbnail($post->ID, $size='full');
}?>
</div><!-- .homeright -->
</div><!-- .hometop -->
<?php }
?>

I also have a custom category template for my “artists” category (category-3.php). On this page, I take advantage of the jCarousel plugin:


jQuery('#mycarousel').jcarousel({
// Configuration goes here
});


And then this html and php:

<ul id="mycarousel">
<?php while ( have_posts() ) : the_post(); ?>
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'numberposts' => 999
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
//echo apply_filters('the_title', $attachment->post_title);
//the_attachment_link($attachment->ID, false);
$custom_image = '<li><a href="'. get_permalink($post->ID).'">'.wp_get_attachment_image($attachment->ID, $size="thumbnail", $icon = false).'</a></li>';
echo $custom_image;
}
}
?>
<?php endwhile; // End the loop. Whew. ?>
</ul>


Of course, there is all of the CSS needed for the carousel. Most of this is shipped with the plugin so I just need to modify it to meld with the look and feel of my theme.

Today’s Tea launches

Posted in: Ecommerce, Websites by koolkat on October 4, 2010 | No Comments

New e-commerce website www.todaystea.net. You can buy fabulous loose tea and tea products as well as learn about tea and its benefits.
The website was build using WordPress along with the Shopp plugin.

HTML5 video

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

I finally had the opportunity to experiment with HTML5 video along with fallback. I tried using jwplayer as my fallback based on video_for_everybody but kept getting javscript errors. I finally just opted form embed tags as my fall back which works perfectly. The site is still in testing status but you can check it here.

jQuery Cluetip

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

I have been working with using jQuery Cluetip plugin to show sites when areas of a map are “moused” over. It seems to work perfectly except for smart positioning. It does not change the position of the tip when the browser window is too close to the right or bottom. I have used the Cluetip plugin previously for links so I am wondering if it is related to using it with an image map?

New HTML 5 site in progress

Posted in: Websites by koolkat on August 9, 2010 | No Comments

I am currently working on a new website for the Allied Arts Foundation. The site is built on a WordPress platform and is my first HTML 5 site.
While this site is still a work in progress, you can check out the test site here: http://www.alliedarts.koolkattest.com/

Mobile Websites

Posted in: Mobile Websites, Websites by koolkat on July 12, 2010 | No Comments

With mobile becoming more and more important, many web designers and developers are creating websites specifically for this platform. However, many sites designed for the computer web browser display reasonable well on smart phones. As a user of an Android-based phone, one thing that always annoys me is that phone numbers on the sites are not clickable. Of course, if you code something like:

<a href="tel:+15551112222">555 111 2222</a>

you will get an error if you try to open the link in a computer web browser.

So, should we all at least use some “light detection” capabilities such as Lightweight Device Detection in PHP? I am beginning to think this may become more and more important.

CSS3

Posted in: Websites by koolkat on July 8, 2010 | No Comments

I have been busy trying out CSS3 with a recently launched website .

Felipa'a Home Page - Safari

Felipa'a Home Page - IE

So, I wanted to showcase some useful css techniques that I used with this site.

First, you will probably have to click the image to enlarge it to see the detail. Notice, that on the Safari page you get a rounded button and the text has a small shadow. This is accomplished with CSS:

background:white;
text-decoration:none;
padding:8px 15px;
color:#46b5d0;
margin-top:10px;
margin-right:10px;
float:right;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
font-size:1.2em;
-webkit-transition:color 2s ease-out;
-moz-transition:border color 2s ease-out;
-o-transition:border color 2s ease-out;
transition:bordercolor 2s ease-out;
text-shadow: 1px 1px 0 rgba(127, 127, 127, .5);


The border-radius creates the rounded button and the text-shadow property gives that beveled look to the text. While we must still rely on browser-specific properties to accomplish this, the code includes the standard properties which hopefully will soon be implemented by all of the major browsers.

Outbound Life

Posted in: Websites by koolkat on June 2, 2010 | 1 Comment

Just finished helping out with some last minute CSS for Outbound Life. Site promotes outdoor activities along with a social networking to enable members to connect with other outdoor enthusiasts.

Custom WordPress Themes

Posted in: Websites by koolkat on May 24, 2010 | No Comments

Launching a new site Seattle WordPress Themes