Advertise here with BSA

PhotoShow is a free and open source PHP application for creating and managing a web gallery.

The application works without a database and uses the folder structure for creating the hierarchy of the galleries (supports unlimited sub-galleries).

Images can be added either from the admin panel via a drag 'n' drop uploader or directly from the filesystem. Organizing the folders/images, editing and deleting them are also accomplished with the same methods.

There is support for multiple users and groups where each can have different permissions.

PhotoShow can auto-generate thumbnails of images, display the EXIF data and allows others to comment them.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Tooltips are tiny user interface elements which are very useful in displaying information "on request" without breaking the attention/focus.

WRD had previously featured qTip and it now has a new version, qTip2, with lots of improvements and new, exciting features.

The plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag 'n' dropped and animated items) or mouse.

Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

It has built-in Ajax integration and can load any remote data. qTip2's website has lots of creative demos including 3rd part service and various popular plugin integrations.

P.S. The download package can be customized to şnclude only the features needed and a converter exists for upgrading from the 1st version.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

bgStretcher is a jQuery plugin that proportionally resizes the background-image to fill the entire viewport.

It can be used with a single image just for the resizing feature or multiple images as a slideshow.

The slideshow can be browsed with pagination and prev-next buttons besides the autoplay and there are multiple transition types offered.

Further customization is possible by defining the slideshow speed, delay between each item and sequence mode (in an order or randomly).

Also, methods exist for playing and pausing it from any custom events.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Mimicking the interactions offline is always popular in the world of computers.

Page-flips are one of the most popular ones of them in web design. They are implemented very successfully in Flash, many websites, documents, magazines are being created/published each day.

With the capabilities of new web technologies, we can also expect them to be accomplished using only HTML, CSS and JavaScript (remember "20 Things I Learned"? It is also open source).

There are several easy-to-use jQuery plugins that offer a good page-flip experience and help creating book-like interfaces. Here they are:

Turn.js

A jQuery plugin that has lovely and smooth page flip transitions.

The first page acts as the cover and the rest can be browsed by simply turning the pages from any desired corner.

Turn.js is only 15kb, works on mobile & tablet browsers as well and makes use hardware acceleration.

jPageFlip

jPageFlip is a highly customizable jQuery plugin for book-like interfaces.

It can -optionally- flip pages on mouse clicks and has support for transparent + semi-transparent image files.

P.S. The plugin performs better on WebKit browsers.

Booklet

Booklet is probably the plugin with most options in this list as it allows configuring each variable.

The JavaScript turning page effect is not that strong as it keeps things within corners (no overflows from the book itself) but works solid.

Pages can be turned manually, via keyboard, prev-next links or automatically (autoplay). Each page also has a unique URL (using hashtags).

It has support chapters, ca show page numbers and callbacks exist for further interaction.

imBookFlip

imBookFlip plugin can display the book-like content in an iframe or directly on the page.

Its pages can be set to turn when manually clicked or as an auto play, sadly, no support for dragging a page.

Also, its API allows directly pointing to a desired page.

FlipPage

This plugin also keeps the page flip effect inside/over the images displayed (that ends up in a 2D-like experience).

It makes use of HTML5-CSS3 + hardware acceleration and works also in mobile browsers.

Other Solutions

The list above includes the latest and more frequently updates ones. However, there are few more options like:

• jFlip
• CSS Page Flip (works better in WebKit)

Any better JavaScript alternatives with (or without) jQuery? Please feel free to share them.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements.

The library is framework independent and has support for line, bar, candle, pie and bubble charts.

There are lots of customization options offered like the ability to define titles, subtitles, colors, labels on/off and so many others for each and every possible variable.

Flotr2 outputs are interactive, they can be set to respond to the actions of the user. And, they can be extended with plugins (there are already several ones that can add interactions, new decorations, etc.).

Charts and graphs work in all major browsers (including IE6) and they are mobile compatible.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Almost every website needs a form. Whether it is for asking visitors to contact you, an online job application or an event registration.

Also, forms need to be secure, user-friendly and the data collected must be reachable for analyzing/responding easily.

Ajax Form Pro, a professional and downloadable PHP application, which was featured before, now has a new version with more features and they are giving away 3 Developer licenses ($67/each) and offering a 20% discount to WRD readers.

Joining the giveaway is so easy, details are mentioned at the bottom of this and here is more information about the app:

The application has an administration panel for creating a form with:

• any input types (including file uploads)
• settings like the text to be displayed (or redirection to any URL) after submission, if the contents of the form will be e-mailed to anyone..
• custom styling and layout
• captcha enabled or not

and allows us to integrate it into web pages either with the generated PHP code or via an iframe.

Form can be styled either with the settings provided or using a custom CSS for advanced/complete styling.

It is created with usability in mind; the validator is real-time, works as-you-type, forms degrade gracefully for users without JavaScript and an option exists for displaying them inside a lighbox (so you can provide a link to anything which will display the form without leaving the page).

To sum up, Ajax Form Pro is a so useful application not only for creating secure forms but also for keeping/reaching the data collected in a single, organized interface.

A discount for WRD Readers

Ajax Form Pro is offering a 20% discount to WRD readers with the coupon code AFPWRD (which is valid for the next 2 weeks).

Here are the shortcuts to the pages for using the coupon codes:

• Single License
• Developer License
• Extended License

How to join the giveaway?

In order to get a chance win one of the 3 Developer Licenses, simply comment to this post and winners will be selected randomly with the query below on 8 February 2012 (1 week later):

SELECT * FROM wp_comments WHERE comment_post_id=2779 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to everyone.

The winners

Here they are:

• Kunule (comment #506883)
• Leon (comment #506936)
• chromus (comment #506748)

Congratulations and thanks very much for joining.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Tree menus are great for displaying nested data in a user-friendly and easy-to-browse interface.

jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output.

It has support for any depth, clicking each item can show/hide the sub-levels and drag 'n' dropping elements from one node to another is possible, the interface will adjust the levels accordingly.

There is no limit in the contents to be used inside each item, any HTML elements are supported (except  <ul> and <li>) and the plugin is so handy for visualizing hierarchical data (org. chart, family tree, computer network, etc.).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.

However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

For implementation on many images, "how practical would it be to use polyClip.js" is open to discussion however, for only few images, it can be a huge byte-saver.

And, it is supported in most browsers including IE7 (with Excanvas).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

WordPress offers a huge space for creativity and flexibility when designing and developing new websites.

Any type of website can be built on top of it: from blogs to newspapers, corporate websites to landing pages and even social networks. All you need is a theme coded to handle that functionality.

Yes, WordPress theme development. That is an easy process for experienced hands who knows the capabilities of the application and familiar with its functions and "not too hard" for others.

To simplify developing new themes, there are awesome WordPress theme frameworks and starter themes that you can use as a base for skipping the repetitive steps and begin with an optimized playground.

Here are the 34 free and good-quality ones that will save your time from searching them. And, in the bottom, you can find a comparison table for these WordPress theme frameworks.

Roots

The main power of this framework is its extremely clean WordPress code output, clean head and URLs (even for the head, CSS and JS paths).

Upon its activation, it automatically applies many useful customizations (like creating a homepage, defining the permalink structure, etc.).

Roots has 2 widget areas and it includes Blueprint CSS, 960.gs, the 1140px Grid, Adapt.js, Less Framework 4, Foundation by Zurb, and Bootstrap by Twitter.

Skeleton

It is a theme aimed at helping you build simple, uncluttered, useable, and mobile-friendly websites.

Skeleton has styling for typography and form elements + includes simple tabs and accordions.

The theme is based on and inspired from Skeleton Responsive Boilerplate, Theme Options Framework, Thematic Framework, Formalize and TwentyTen Theme.

P.S. There are also optional styles for bbPress and Jigoshop.

Bones

Bones is a theme following the mobile first approach that has a detailed + organized CSS, in-depth documentation with tutorials and details on every level.

There are 3 versions:

• classic
• responsive
• HTML version for projects

Many useful features exist including page navi, breadcrumbs, related posts and HTML5 video with fallback.

It is based on 960.gs, 320 and Up Extension, HTML5 Boilerplate.

Gantry

Gantry has a detailed admin interface with 65 base widget positions and 38 layout combinations that provide a huge space for customization.

There are lots of built-in features including the CSS and JS compression, speed-optimized codebase, several widgets and gizmos such as font-sizer, Google Analytics, to-top smooth slider, IE6 warning message, etc.

Starkers

Starkers is a completely naked  WordPress theme built to be a starting point for theme designers.

It’s a stripped-back version of the ‘Twenty Ten’ theme that is bundled with each WordPress download.

The theme is based on YUI Reset and it is totally unstyled.

Wonderflux

Wonderflux is a solid, easy to update and flexible platform you can use for any WordPress project.

It has location-aware template parts that allow you to concentrate on the content, not the code.

The framework comes with a fully dynamic CSS grid system, simple administration controls and over 100 display hooks.

Reverie

Reverie is a HTML5 WordPress framework based on ZURB's Foundation and HTML5 Boilerplate.

It can almost be used out-of-the-box. There are 2 widget areas; sidebar and footer and 2 menus (top navigation menu and footer information menu). Also works with bbPress 2.0.

Thematic

Thematic is a good option for using as-is or as a blank WordPress theme for development.

There are built-in with styles for popular plugins and many theme filters + hooks are available.

The theme has 13 widget areas + multiple layout options and it is strongly advised to use a child theme for customization.

Whiteboard

Whiteboard focuses on simplicity and includes only the core WP functionality.

it supports WordPress features such as manageable menus, background, and header image besides featured images, several widget areas, and more.

The framework uses LESS for mobile support and responsive outputs. The code is lightweight + well-commented and there is support for child themes.

Presswork

The big thing that separates this PressWork from others is its unique front-end editor.

Google fonts selector is integrated to this front-end editor to easily select your fonts. A PSD file is included to customize the design and it has 2 widget + 2 menu areas.

Constellation Theme

The Constellation theme is a great base for any WordPress-powered website.

It has the styles for creating responsive pages, has a HTML5 code and comes with a flexible grid system.

The theme is based on the HTML5 Boilerplate.

TwentyTen Five

This theme is an HTML5-powered version of the default WordPress TwentyTen theme.

It is cleanly coded, using the theme and integrating new features on it is pretty easy.

Elastic

There are several important stuff behind Elastic: a visual theme editor, a theme engine, and a set of protocols that link these two.

It aims to bring a new approach to editing and creating themes which both developers and end-users will find easy to work with.

Flexible

Flexible is a carefully-coded child theme of the default Twenty Ten theme and built-with any browser size in mind.

It has a Facebook FanGate integration and packed with Themekit (which is a plugin for plain simple customization via WordPress editor).

WP Paintbrush

WP Paintbrush comes with a built in front-end editor that enables anyone willing to quickly create a unique design for their website.

The editor has a drag 'n' drop interface for placing theme sections, comes with fixed or fluid layouts and much more.

Html5 Shell

mimoYmima has implemented an improved body tag that includes many valuable information about the page loaded.

There are smart sidebar disabling methods which could come handy, several @font-face examples and dynamic sidebar + custom template examples packaged with the framework

The code is commented clearly for easing the production process and it uses Modernizr + HTML5 reset css

Gantry is based on 960.gs.

Hybrid

This framework has many custom widget areas, widgets, hooks, shortcodes, page templates and many options to easily customize your website.

It is being improved continuously and has a community growing around it.

HTML5 Reset

This blank theme focuses on making a solid HTML5 compatible starting point for WordPress theme development.

It also has some additional features such as built-in analytics and starter CSS declarations for basic WP elements.

HTML5 Reset is based on digwp.com's Blank WordPress Theme, Modernizr and HTML5 Reset.

The Buffet

The framework has many SEO features including breadcrumbs and jQuery improvements such as comments form validation, SuperSleight for IE6, superfish menus or jBreadcrumb.

It is also compatible with many plugins and fully localized, ready for translation.

The theme includes 960.gs and Blueprint CSS.

Simon

This framework includes useful options such as free icons, typography, breadcrumbs and form designs.

There are also multiple post formats to ease theme customizations.

It has support for widgets, child themes and comes with a clean code.

Handcrafted WP

This one may not count as a framework, but it is an almost-naked starter theme with many useful features such as cleaner head code, integrated analytics, support for menus, post formats and custom post types.

The theme also has a widget-ready sidebar and dashboard.

Handcrafted WP is based on Toolbox Starter theme and HTML5 Boilerplate.

ToolBox

If you want to make your own theme and want it to be ready for HTML5, ToolBox may satisfy your needs.

It is a blank theme in plain and semantic HTML5 markup with almost no CSS.

Thematic-html5boilerplate

This is a WordPress theme using HTML5 Boilerplate and based on Thematic ToolBox (and other Thematic themes).

H5 Theme Template

H5 includes a full pack of theme files and folders with each file having all the latest WordPress functionality.

It is built with easy customization and personalization in mind and serves as a solid starting point for your next HTML-5-based theme.

Brave New World

This theme has no layout and styling except the modified version of Eric Meyer’s reset CSS and a baseline typography.

Although it is such a plain theme, it is built with HTML5, WAI-ARIA in mind and supports hCard + hAtom microformats.

1140 Fluid Starkers

This theme is the combination of Starkers + the 1140 CSS Grid and great for anyone looking for a responsive naked theme.

Indeziner

Indeziner is a starting point for creating websites using WordPress with no hassle.

It has a fully customizable homepage, almost every section can be enabled/disabled and bundled with a slideshow, gallery page and Flickr integration.

Blank Themes

Blank Themes offer 1, 2, 3 column blank themes to start from with the variations of sidebar locations.

There is also a blank portfolio theme that can be easily customized and used for your own portfolio.

rtPanel

rtPanel has a developer centric framework which is useful for developers willing to tweak codes with hooks and functions.

The framework also provides control over content and design for anyone who is not so familiar with coding and web-development.

Sandbox

Sandbox and various other themes from plaintxt.org provide a strong and clean structure with rich semantic classes powered by dynamic functions and microformats.

The themes are minimal and can be good starting points for new themes.

Suffusion

Suffusion is a cross-browser theme with a bunch of options.

It has 19 widget areas, one/two/three column, fixed-width and flexible-width formats, 10 pre-defined templates, 18 pre-defined color schemes, 2 customizable multi-level drop-down menus, featured posts, a magazine layout, tabbed sidebars, widgets for Twitter, social networks, Google Translate and more.

Foundation

Foundation is a blank starter theme that has all the core features needed to creating a new theme.

It is a nice kit for developing responsive websites, uses Orbit as a content slider and based on ZURB's Foundation Framework + HTML5 Boilerplate.

StartBox

StartBox is a theme framework that makes rapid web development and WP theme creation simple for both designers and developers.

It comes pre-loaded with customizable theme options, several widget-ready areas and custom widgets, 6 pre-defined layouts and a comprehensive documentation.

Yoko

Yoko is a modern three-column blog theme and it comes with a custom social links widget and shortcodes for text columns, info boxes and highlighted text.

It also provides various post formats and uses Google Web Fonts.

Comparison Of WordPress Theme Frameworks

Themes	Capabilities
	HTML5	Responsive	Mobile	SEO	Admin Int.	Micro formats	IE Hacks	Basic Styles
Roots
Skeleton
Bones
Gantry
Starkers
Wonderflux
Reverie
Thematic
Whiteboard
Presswork
Constellation Theme
TwentyTen..
Elastic
Flexible
WP Paintbrush
Html5 Shell
Hybrid
HTML5 Reset
The Buffet
Simon
Handcrafted
ToolBox
Thematic-html5boil.
H5 Theme Template
Brave New World
1140 Fluid Starkers
Indeziner
Blank Themes
rtPanel
Sandbox
Suffusion
Foundation
StartBox
Yoko

 

Author: Devrim Vardar

Devrim Vardar is a talented web developer who also writes fiction and non-fiction besides code.

He can be found at Stild.com and via Twitter.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

In order to save space and display the content only when requested, expanding/collapsing panels are used widely.

Using jQuery, such a functionality is very easy to implement with methods like toggle, show, hide and several others.

jQuery-Collapse is an ultra-lightweight (<1kb minified) plugin built specifically for this case with added features.

It allows us to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events.

There is also cookie support which remembers the state of the content panels and displays them accordingly when the page is re-visited.

The plugin is also designed with WAI-ARIA in mind that helps the web pages being more accessible to people with disabilities.

And, it is also cross-browser, completely tested in major browsers (including IE6).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)