Connect With WRD
feed via e-mail
feed via e-mail

DIY Map is a zooming & clickable map, built with Flash, that can be colored with data from a text file.

Using an external data helps using the same Flash file for representing different information.

Flash Maps

When a point is clicked & zoomed, any information can be displayed like a link or an address.

List of maps that can be downloaded are world map, USA map, Europe map & few other countries.

The application is free for personal & educational use and requires a licence for commercial use.

This is a free icon set with 50 PNG icons.

The icons in the set are glossy (web 2.0 look) & very nicely done.

PNG Icon Set

Sizes of the icons are 52*51px which is kinda unique.

Flowplayer is a free Flash media player that can configured & styled to fit your needs.

It supports multiple media types: FLV, H.264 coded MP4, JPG, PNG & MP3.

Free Video Player

Some features of Flowplayer:

  • Full screen mode
  • Progressive download
  • Ability to play multiple files in 1 stream & ability to include images
  • Streaming support: Flash Media Server, Wowza & Red5
  • Quick access to specific chapters via thumbnails
  • Protection against hotlinking to media files
  • Embed links

This Flash media player can also be controlled with JavaScript & from other Flash movies.

Besides the free GPL license, there are several other paid licenses. So, make sure you check the licensing before using it.

P.S. This is not a very fresh resource but realized that it was missing in WRD & here it is.

Image Gallery is a free Flash image gallery that comes with the source code.

Settings are configured from a XML file like the names of the categories, images & folders where the images resides.

XML Flash Gallery

The gallery presents the images randomly or with an order (can be set via the XML file).

When a thumbnail is clicked, original image is presented in a Lightbox like Flash pop-up, images in that gallery can be browsed easily & even viewed as a slideshow.

The demo of the gallery can be viewed from here. As there is no direct link for the source file in the website, you can download it from here.

P.S. I have contacted Tony Yoo (owner of the gallery) & yes, it is free.

Alfresco is an open source enterprise level CMS application.

It provides document management, collaboration (in beta), records management, knowledge management, web content management and imaging.

Open Source CMS

Alfresco is built with Java & can be installed in both Window & Linux environments via "all-in-one installers".

Some features of Alfresco:

  • Web Content Management
    • Web content authors can access and contribute content
    • Simply preview in-context changes to any web page or web application
    • Reduce the risk of error with simple a virtualization of changes against a live site
    • Use your tool of choice, such as Dreamweaver, for web interface development
    • The ability to preview in-context changes to any web application, including PHP, Ruby, JSF, Tiles, Struts, Groovy and .NET
  • Document Management
    • All content is available via a shared drive interface
    • All content is available from within MS Office
    • Work in an MS Office environment for authoring and viewing
    • Save, version, share, search and audit
    • & many more..

This application is great for any company who wants to manage all the information from one central including websites, documents & knowledge.

Flashmo, which was presented at WRD (here & here) a while ago has 3 new free Flash galleries.

Flash Image Galleries

The galleries are:

Images in the galleries can be edited via a XML file

All the galleries have the source FLA files & you can edit them to make the galleries fit your needs.

Ingrid is an unobtrusive jQuery component for creating very nice looking & effective datagrids.

It simply adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

jQuery Datagrid

With every display event, Ingrid sends a query to a dynamic file (ASP, Asp.Net, PHP..), which must be created by you (a PHP example exists).

The query then simply returns the results in a table format "how Ingrid expects them to be". And, that’s all.

For a demo, click here.

Info: Every user / developer has different experiences. Any more tips that you share in the comments will be appreciated.

"Why is my website slow?" is a popular question. And it is a vital problem for a website.

Faster the website, happier & more the visitors. That's a well-known fact.

There are several factors that may slow a website. In general, all of them can be solved. This just depends on how much effort you can spend on it.

How much time do you have?

You may not have enough time to spend on speeding up your website. Depending on your free time, you may choose the steps to apply like mentioned below:

  • I have very limited time: Apply step-1, step-2, step-4 & step-5 (only the compression parts) and step-6.
  • I have some time: Apply all of them except step-3 & step-8.
  • I rule the time: Go with them all.

Improve Website Speed

Most of the tips are the ones that you probably know. So, you can use the list as a checklist (which it normally is in my "customer notes sheet" : ) ).

Here are the tips:

1. Get A Fast & Less-Loaded Web Server

This is a must. Whatever you do to make your website faster, if it is served slow, there's nothing to do.

Make sure that the server your website is hosted has low ping values & it is not over-loaded. Specially if you've a database and/or using dynamic files (like asp,, php, ruby..) server over-load can kill the performance.

If you've a simple website with few visitors then shared hosting is ok. For a website getting popular, think of a VPS with guaranteed RAM & CPU usage. If the website is already popular, a dedicated server will be the best performing one.

2. Know When To Use GIF, JPG & PNG Files. 

Playing with the quality of images will dramatically lower the sizes of them while they will still be looking good.

GIF is suitable for images with few colors like logos, text & line art. When saving a GIF file, make sure you use a small color pallette (learn more).

JPG is good for images with lots of colors & details like photographs. Decrease the quality of a JPG image before saving. It will still look good for a web image (learn more).

PNG, a format specially for websites, has great quality – both transparent & non-transparent – is specially functional when you're in need of quality transparent images. Don't forget that IE6 has problems in displaying them (learn more).

3. Use XHTML – No Tables

This is easy to tell but may be harder to implement for anyone that has few experience with XHTML.

The thing is, tables are rendered slower than DIVs by browsers. You can do more with less code & no need to say it is much better to be compatible with any browser (including mobile browsers), in means of SEO, etc..

Update: There may be cases when using tables are much more logical like "tabular data". You may have to code a lot for creating the look of a simple 5 columned table. Don't do that & use tables when needed.

What is tried to be mentioned here is, use XHTML rather than tables in general. But don't try to draw images with XHTML.

4. Use CSS Smartly & Compressed

  • Mention every style in CSS files.
  • Find the common properties in objects, define them once & try not to repeat them.
  • If using a significant amount of totally different properties for a specific page, define them in another CSS file & only include on that page. So users viewing other pages won't need to download those properties.
  • Compress your CSS file (you may try this, this or this).

5. Merge & Compress JavaScript Files

Try merging JavaScript files prevent multiple includes (see step 6).

If a JavaScript file will be used only in few pages, try to include them inside those pages only (like CSS in step 4).

Compress JavaScript files. It lowers the size seriously & doesn't have any bad effects on your side. This & this are some of the popular compressors.

6. Manage Included Files Better

There may be several files included in webpages like CSS files, JavaScript files and other JavaScript files for statistic services, social bookmarking sites, widgets & more.

Try to decrease the number of these files:

  • If using digg-reddit-like voting widgets, don't use them in stories that won't hit the frontpage & remove the ones that were submitted few days ago as they won't have any help after sometime.
  • Use only 1 statistic service if possible. Every web-based service requires new files to be installed & they are called each time a page is loaded.
  • Host files on your side & don't use web addresses as file paths.
    • If you're using any JS frameworks like jQuery or MooTools, don't call the .js files from their websites but download & upload them to your website.
    • Don't try to call any file from a web address like "http://.." as this always requires dns queries to be done & will work slower.
  • PHP Speedy (WRD post)is a very effective solution that does all the combining & compressing automatically. You may want to try it.

7. Use HTTP Compression

HTTP compression is one of the most effective step with a little effort.

Today, almost every browser & web server supports HTTP compression. Using it, your files are sent to the visitor compressed & un-compressed on their side & you can have up to 90% success for the text based files (like HTML).

You have 2 popular choices with this:

8. Better Coding

This is for websites which does not use any ready-to-use systems like WordPress, Drupal, ExpressionEngine or similar (if you're using these then you're lucky as they are already well-coded).

Besides the better XHTML & CSS coding, the dynamic coding of the website directly effects the performance.

As you can guess, this is a huge subject. But there are some major things like:

  • Seperate the static & dynamic content. This will help writing less-code.
  • Create smart & effective functions. For ex: if you're going to use a user's name & birthdate at the same page, don't run 2 queries or functions, your function must call 2 of them. Simply, try to do everything once.
  • Connect to the database as few as you can & once connected, call only the data you need.
  • Try to keep database sizes small. If you've a large database, sometimes seperating it into several databases perform better, specially for the data which is reached not so often. From the server's point of view: 4-250mbs of dbs perform better than 1-1gb of db.

9. Cache Webpages

Caching is a superb way of decreasing the stress on the server by running more static files & less queries. It simply saves a static, HTML version of the page to be displayed & displays that file rather than the dynamic one.

For CMS applications like WordPress, there are already ready-to-use caching plugins (like WP-Cache). For PHP, here is a great article from SitePoint.

A small note, caching can also be done at the web server level. But if you're on a shared hosting account, you better be lucky to have it on.

What Do You Suggest?

Besides the tips mentioned above, what are your tips to make websites faster?

PrototypeXtensions is a Prototype.js and based JavaScript library.

It aims to add extra methods & components to Prototype.

Prototype Extensions

Currently, it has 3 components:

  • Core extension: class, cookie, event management & time calculations.
  • History: easy "set/get" parameter on hash of URL, observe the hash of URL & more.
  • Tabs: show / hide, select, Ajax / iframe.

Although the library is in very beta state, it is promising when considered what it currently does.

Jumpeye Components is giving away 3 FlashEff Premium Unlimited Licenses ($249 value/each) to WebResourcesDepot readers.

Details of the giveaway & how to join it can be found below the post.

What is FlashEff?

FlashEff is a Flash CS3 (and Flash CS4 ready) AS3 component for easing the animation process & creating stunning animations.

Tip: To see the beauty of the effects, click here to go to the effects gallery.

Flash Text Effects

It is also a collection of over 100 patterns (and growing) that enable cool animations and interactive actions on visual objects and texts. FlashEff can be used/customized from both, the visual interface and API.

The visual interface, FlashEff Panel, is a powerful online utility that loads inside your Flash CS3 IDE and configures everything for the FlashEff component.

FlashEff Effects

Using FlashEff, you can:

  • Create amazing animations with images, movieclips or text.
  • Create animated buttons without coding.
  • Perform commands and trigger actions on any event such as rollOver, press or doubleClik.
  • Add static or animated fitlers to any visual object within Flash CS3.
  • Most of the patterns can be combined to create complex animated objects.

FlashEff Pattern Creation Contest With $2500 Worth Prize!

Do you have advanced AS3 skills? Then create a pattern for FlashEff, submit it until 31 October 2008 & get the chance to be one of the winners who will earn $2500 worth prize.

Click here to see the details of the Pattern Creation Contest.

How To Win The Free Licenses?

Simply comment to this post & that’s all.

Winners will be selected randomly from commenters 1 week later (29 September 2008 – Thursday) with the SQL query below:

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

Good luck to all : ). 

Uptime Robot