Archive for the Web Design Category

Many of you i’m sure are accustomed to dealing with many of the open source ecommerce/shopping cart applications and might understand what i’m about to explain to you. It’s so hard to find any good free templates/themes for any of these ecommerce applications. Most of them, especially OScommerce and Zen Cart are absolutely hideous looking right out of the box.

Free Ecommerce Theme from CSS Creme

CSS creme has put together a free CSS ecommerce template that looks pretty nice. It’s simple and coded together well so that you can customize it and use your imagination on top of what is already put together. If you are using an open source application like me, you will need to apply this template to your theme and make your customizations. But I know with me that this will save me some serious time on a few projects of mine.

Instead of recreating the wheel everytime I make a shopping cart website, I can build off an already CSS/XHTML built template and make my customizations after that. The free template comes with 3 pages:

  • Product Listing Template
  • Product Detail Template
  • Form Template (contact us)

That way you have enough to build off of with your Zen Cart theme or OScommerce theme or even Ubercart theme. This also could be a benefit if you are just putting together a quick shopping cart for a friend or relative for free, and you don’t have much time to put something elaborate together. Just throw this CSS template together with your theme and you are good to go.

Have you been to Barack Obama’s website and seen the cool slideshow that he has on his home page? There is actually a splash page that you have to go through first, before you get to the home page. But then you will see it. It looks like this:

Have a Slideshow on your site just like Barack’s!

Well guess what. Thanks to our friend Guillermo Rauch over at devthought.com, you can now have the same slideshow for free! Guillermo has put together a script in Mootools using a bunch of CSS to give you the same type of look and feel and cool slideshow effects that Barack has on his website. The script is fantastic looking and very lightweight so it doesn’t slow loading time up too much. See the Demo Here.

The Creation

Here is a little bit more of an explanation of the slideshow. “I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)

The Code

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used. The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.

The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly. You can download the files for this slideshow at Guillermo’s Blog at devthought.com

Slideshow 2 is an open source Mootools slideshow class for streaming and animating the presentation of images. It’s definitely one of the better looking slideshow’s out there. A very impressive look is given to your images in a much more professional manner. Here’s a screenshot of what it looks like (without mootools of course)

You can choose from a variety of different effects of course which gives you some good flexibility on how you want it to end up looking. The cool thing is that you can input your slideshow via HTML with one simple line of code. The example they give is this:

new Slideshow('show', ['1.jpg', '2.jpg', '3.jpg'], { controller: true, hu: ‘images/’ });

Here are the features as listed in the blog article that featured this tool from webresourcesdepot.com:

  • Dynamic resizing - Slideshow can accommodate any size presentation.
  • Thumbnails - intelligent, auto-scrolling, tracking, etc.
  • Full-featured controller - completely style-able with CSS.
  • Animated captions - plain text or formatted with HTML.
  • Fully accessible - Slideshow can be controlled with access keys.
  • Automagic slideshows - create slideshows from existing HTML images.
  • Varied hyperlinking options - allows for mashups with Lightbox, Slimbox, etc.
  • CSS slide transitions - designed in stylesheets, not javascript,
    allow for an infinite combination of effects (plus support for all
    Robert Penner transitions)
    .
  • Unobtrusive and degradable - Slideshow even functions with Javascript turned off!

So if you are looking for a cool javascript slideshow to add some spice to your website then try this one out. There is some good documentation to help you along the way in customizing it to fit your needs. Enjoy!

Oh boy have I been looking for something like this for a long long time! And I am just thrilled that it is Open Source! The Open Source world delivers again. This time with a flash Product Color Changer. Click on the link to see a demo of what it actually does. Basically this tool enables you to present the color variations of your product in simple and nifty way.

An Ecommerce Solution like None Other
I can’t tell you how many people over the years have asked me to build them functionality inn their ecommerce store similar to Nike and their shoe store. I’m not sure if they still have it, but in the past Nike would allow you to customize your shoe by color and a few other things. A very neat function that helps give the customer a better ability to “Shop” on your shopping cart website.

Below is just a screenshot of what this script does. Oh by the way, the script uses XML so that you can easily embed it into any CMS or Ecommerce solution.



Download the Open Source Product Color Changer!

A new plugin is out called the iWPhone Wordpress Plugin and Theme. The plugin automatically reformats your blog’s content for optimized viewing on the Apple iPhone and iPod touch. It detects the iPhone/iPod touch’s User Agent and serves up the content
with the special theme only to iPhone and iPod touch visitors, all
other browsers will view your WordPress blog with your current theme.

The “iWPhone WordPress Plugin and Theme” displays an optimized version
of your blog’s content, formatted perfectly to fit the iPhone/iPod
touch’s screen - no zooming in to read the content is necessary.

Demo Sites
If you have an iPhone or iTouch you can point your browswer to http://www.grokdotcom.com/ or to http://www.bazaarblog.com/ to see the live plugin in action.

Feature List

  • Formats your blog content for optimized viewing on the iPhone and iPod touch.
  • Automatically detects the iPhone/iPod touch’s Safari browser and
    only displays the custom theme to iPhone and iPod touch visitors, other
    visitors get your standard theme.
  • Simple iPhone/iPod-like theme with common interface elements that compliments the iPhone/iPod touch’s internal applications.
  • Images larger then 300 pixels wide are automatically scaled down to fit the iPhone/iPod touch optimized width.

Upcoming Features/Wish List

  • A clickable link or button that allows site visitors to switch between iPhone/iPod touch theme and normal site theme.
  • Ability to show Categories and Pages
  • Search functionality
  • An admin configuration screen that allows easy changing of various settings like header, footer and link colors.
  • A mechanism to gracefully remove/hide all content-types not
    currently supported on the iPhone/iPod touch (flash embeds and other
    non-supported formats/plugins)
  • An admin version (wp-admin) that allows WordPress administration and posting within the iWPhone interface
  • wp-cache compatibility

Tip for Designers & Developers - iPhoney
iPhoney is a free program that allows you as a designer or developer to see your work you are creating for the iPhone without actually needing an iPhone. Check out the website here… http://www.marketcircle.com/iphoney/

1. Fotobook
Fotobook is a WordPress plugin that will link to your Facebook account(s) and import all of your photo albums for use in your WordPress installation. It uses the Facebook’s API so importing your photos is a breeze. THIS IS MY FAVORITE ONE!

Demo available at http://www.aaronharp.com/photo-gallery/

2. NextGEN Gallery

  • Sortable Albums : Create your own sets of images
  • Upload a Zip-File with pictures : Upload pictures in a zip-file (Not in Safe-mode)
  • Watermark function : You can add a watermark image or text
  • JavaScript Effect : Use any available popular image effect : Thickbox, Lightbox or Highslide
  • Multiple CSS Stylesheet : Use a nice shadow effect for your thumbnails with your own CSS file
  • Slideshow : Full integrated flash slideshow
  • TinyMCE : Button integration for easy adding the gallery tags
  • Sidebar Widget : Show a slideshow, random or recent picture at your sidebar
  • Language support : Translated in more than 15 languages
  • Upload tab integration : You have access to all pictures via the upload tab
  • Tag support for images : Append related images to your post
  • Meta data support : Import EXIF, IPTC or XMP meta data
  • Sort images feature
  • Cool flash addons

Demo available at http://www.aroundtheworld.net/reizen/egypte/fotoalbum/

3. Yet Another Photoblog

  • A non invasive WordPress-plugin that converts wp into a easy useable photoblog system
  • Easy image upload - All wordpress post-features can be used
  • On the fly thumbnail generation - Use multiple thumbnail sizes where and when you need them: Thumbnail generation gets controlled from the template.
  • EXIF data processing and output
  • Self-learning EXIF filter - Your own cameras tags can be selected to be viewed.
  • Full i18n-Support through gnutext mo/po files
  • YAPB Plugin Infrastructure for extended functionality
  • Ping additional update-service-sites when posting a photoblog entry.
  • Nearly every WP-theme can become a photoblog in virtually no time.
  • Out of the box configurable “latest images” sidebar widget
  • You’ll get a photoblog system based on wordpress - Decide if you want to post a normal Wordpress article or a photoblog entry. Be free to use all available extensions / plugins of the WordPress platform ;-)
  • Be the owner of your own photos on your own webhost

4. flickrRSS
This plugin allows you to easily display Flickr photos on your site. It supports user, set, favorite, group and community photostreams. The plugin is relatively easy to setup and configure via an options panel. It also has support for an image cache located on your server.

Demo available at http://eightface.com/photos/

5. NextGEN-FlashViewer
The same NextGen plugin for Wordpress, only this time using The famous Adobe Flash Plugins (SimpleViewer, TiltViewer, AutoViewer, PostcardViewer)

Demo available at http://travel-junkie.com/geeky-stuff/wp-plugin-nextgen-flashviewer/

6. Inline Gallery

  • plug and play, just like any other Wordpress plug-in
  • easy to configure
  • does no processing on the images (except for getting the image metadata), so it’s lightning fast
  • you can have multiple galleries per post
  • integrated with Wordpress 2.0’s wysiwyg editor (the way QuickTags is implemented doesn’t allow easy placing of buttons in the toolbar, but that’s not a big problem, since you are editing code, anyway)
  • (since 0.2) output is customizable with templates

Demo available at http://m0n5t3r.info/photo-galleries/haggard-and-amorphis.html

7. AWSOM Pixgallery
AWSOM Pixgallery is an Image Gallery/Archive plugin designed to make it easier for Artists or Webcomic creators to set up a portfolio of their artwork. It features Automatic Watermarking, captioning using the Visual Editor or HTML, sorting, auto-thumbnailing, Comicpress theme support, per image/gallery commenting and more. It is a Wordpress native Plugin and does not require any config or file changes or outside tool integration to work; just activate the plugin and add a line of text to any post or page and your Gallery of Images will appear. All options are handled through the regular Wordpress Admin interface. More features are in development now such as tagging, extensive theme control through Admin interface, and more

Demo Available at http://www.awsom.org/awsom-pixgallery/?px=%2Fphotos%2F

8. Lightbox Gallery
The Lightbox Gallery plugin changes the view of galleries to the lightbox.
Lightbox display of Gallery
Tooltip view of caption of images
Displays the associated metadata with images

Demo Available at http://hiroaki.gentoki.com/