Open Source Resources for Web Application Developers

I think many readers are familiar with this awesome Javascript CSS Menu by Devthought, but I really need to include it in WebAppers. Fancy Menu is nothing to do with Flash. it is a custom navigation bar with some cute Javascript effects that will certainly impress your friends. It requires Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible.

Requirements: Internet Explorer 6+, Firefox and Safari
Demo: http://devthought.com/cssjavascript-true-power-fancy-menu/
License: License Free

• 1 Comment

PHP/SWF Charts is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data. Use PHP scripts to generate or gather the data from databases, then pass it to this tool to generate Flash (swf) charts and graphs. PHP/SWF Charts makes the best of both the PHP and SWF worlds. PHP scripts provide integration, and Flash provides the best graphic quality. It supports many charts types, Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite and Joined. Can you ask for more? They have the following main features.

• Web charts and graphs from dynamic data
• Live and interactive chart updates without reloading the web page
• Clickable charts, and drill-down
• Animated transitions
• Printable charts
• Simple and flexible chart generation

PHP/SWF Charts is free to download and use. The free, unregistered version contains all the features except for:

1. Clicking a chart takes the user to the PHP/SWF Charts web site
2. No displaying charts inside another flash file
3. No technical support, and no product updates by e-mail

Requirements: Flash Player 6+, Server with PHP Support
Demo: http://www.maani.us/charts/index.php?menu=Gallery
License: License Free

• 8 Comments

We can use this CSS Compressor made by CSS Drive to compress the CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two. It can also strip all of your comments automatically as well. However, I suggest that you keep your original CSS file, it can make your life much easier if you need to edit your CSS file.

Requirements: No Requirements
Demo: http://www.cssdrive.com/index.php/main/csscompressor/
License: License Free

• 2 Comments

Thousands of royalty free photos for websites, PowerPoint presentations, newsletters, forums, blogs, schools and homework in FreeDigitalPhotos.net. All images can also be used for artist’s reference, and video productions. All royalty free images may be used for commercial and non commercial work – If you use a free image on a website, you must place a text hyperlink on that website to FreeDigitalPhotos.net. This includes forums, blogs and networking sites such as MySpace. Many images are now available in higher resolution for $5 or $10 (depending on image size). Your photo can be downloaded instantly following secure online payment.

Requirements: Terms of Use
Demo: http://www.freedigitalphotos.net/
License: License Free

• 1 Comment

I think many people are familiar with PollDaddy which is an online tool, which allows you to create free polls and place them on your website, blog, MySpace, hi5, Friendster or Xanga account or anywhere online.

PollDaddy is simple and flexible, allowing you to customize our styles to match your website or email campaign. Deliver your poll through JavaScript, flash, direct link, widget or RSS to survey your user’s opinions.

It looks really nice as well. You can choose different themes for your polls. The only drawback is that there is a PollDaddy.com link on your polls.

Requirements: No Requirements
Demo: http://www.polldaddy.com
License: License Free

• 1 Comment

Code Central has shown us how easily one can create a lightbox using YUI’s Dialog class. The lightbox incorporated many new features, along with old features such as drop and drag, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser’s window area). You can also hide the lightbox conveniently by clicking on the image.

Requirements: Firefox 2+, Netscape 8+, IE 6+, Opera 9+
Demo: http://test.thecodecentral.com/demos/lightboxrev/lightbox.html
License: License Free

• 1 Comment

Jonas Rask Design has created a set of beautiful 32 x 32 px toolbar icons. He has decided to release these free for developers and private individuals alike. You can use them in your applications, in your toolbar, on your website. It’s entirely up to you. A credit or backlink is not required but appreciated. Package includes ICNS,PNG, TIFF, Mac Icons and Pixadex iContainer versions. Enjoy.

*UPDTAE 19 July 2008
Site has been moved. You can download this set of icons on http://jonas.seph.ws/stuff/drf.zip

Requirements: No Requirements
Demo: http://jonas.seph.ws/
License: License Free

• 5 Comments

When we are talking about fonts, we should not miss this one. Typetester is an online application for comparison of the fonts for the screen. Its’ primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Requirements: Modern Browsers with Javascript Enabled
Demo: http://typetester.maratz.com/
License: License Free

• 3 Comments

You can create screenshots and screencasts easily for your web application easily now. Jing sits nicely on your desktop, ready to capture and share your stuff at a moment’s notice. Simply select an area of your screen, capture it as an image or record it as a video, and then click Share. Jing conveniently places a URL to your content on your clipboard ready for you to paste the URL into any of your conversations. Your content is hosted on Screencast.com, for which they are providing a complimentary account to all participants during this project. Users have 200MB of space for storing screenshots and screencasts and 1 GB of bandwidth that renews monthly. The Screencast.com account will remain available to you for the duration of the project.

Requirements: No Requirements
Demo: http://www.jingproject.com/
License: License Free

• 5 Comments

If you ever intend to develop a web application, I believe you have already had the idea what and how the application is. If this is not the case, I do not think meditations at home will help you to get amazing ideas. A web application will be constructive and productive only if they are innovative or tailor-made to demands. I prefer looking around to feel the trend and sense people’s need. There is also plenty of information at the internet. Digg, StumbleUpon and Delicious is such a web site of revealing the trend of needs that I shall not miss.

Inspiration and Design

When the type of application you decided to develop has been finalized, the user interface and the homepage, i.e. the very first thing that users perceive, is the determinant factor whether your application will be successful or not. A good design of the homepage/user interface may attract and so retains users while a bad one shall repulse users forever. Inspiration may flash through your mind. Yet, a look at the high standard CSS Galleries, e.g. CSS Remix and CSS Mania will certainly provides you with much inspiration. You can also enjoy top quality web applications sites like Webware and SEOmoz’s Web 2.0 Awards and see how an intuitive, elegant and yet powerful web applications may be.

Choosing a Framework

Now that the design and features of your web application are ready, you then choose the best or your most familiar programming language to begin with. No matter what programming language you are going to use, I strongly suggest choose one with “framework”. (more…)

• 1 Comment