DanSolo's HQ http://www.dan-mitchell.co.uk Progress comes from the intelligent use of experience Tue, 09 Mar 2010 17:01:07 +0000 http://wordpress.org/?v=2.7 en hourly 1 Open Source And Live Web Analytics: SlimStat http://feedproxy.google.com/~r/webresourcesdepot/~3/U6AwUWWoeWY/ http://feedproxy.google.com/~r/webresourcesdepot/~3/U6AwUWWoeWY/#comments Tue, 09 Mar 2010 17:01:07 +0000 WebResourcesDepot http://www.webresourcesdepot.com/?p=1520 SlimStat is an open source web analytics application that collects & presents statistics information about your website.

It is built with PHP-MySQL & can be integrated into websites with JavaScript (like Google Analytics) or PHP.

SlimStat

For  the given period, the application can display:

  • the number of visitors/pageviews
  • referrer URLs, domains
  • search terms
  • browsers, OSs, countries, screen sizes

There is also a "paths" feature that shows a user's browsing path page-by-page.

You may be asking, "why to use SlimStat instead of Google Analytics?" The best answer would be "live stats".

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

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: , ,

Related posts

]]> http://feedproxy.google.com/~r/webresourcesdepot/~3/U6AwUWWoeWY/feed/ Spectrum Visualization with the HTML5 Audio Data API http://feedproxy.google.com/~r/ajaxian/~3/tVWFXrUtupI/spectrum-visualization-with-the-html5-audio-data-api http://feedproxy.google.com/~r/ajaxian/~3/tVWFXrUtupI/spectrum-visualization-with-the-html5-audio-data-api#comments Tue, 09 Mar 2010 11:20:07 +0000 Ajaxian http://ajaxian.com/?p=8690

The HTML5 specification introduces the

The above quote is from the Audio Data API extension that joins a bunch of juicy developer work in Firefox 3.7.

Thomas Sturm has taken that API and created a spectrum visualization a kin to some of the great work by Scott Schiller (using Flash).

There is a new onaudiowritten attribute:

PLAIN TEXT
HTML:
  1.  
  2. <audio src="song.ogg" controls="true"
  3.            onaudiowritten="audioWritten(event);">
  4. </audio>
  5.  

that lets you get access to info such as the spectrum:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.       function audioWritten(event) {
  3.         spectrum = event.mozSpectrum;
  4.        
  5.         var specSize = spectrum.length, magnitude;
  6.        
  7.         // Clear the canvas before drawing spectrum
  8.         ctx.clearRect(0,0, canvas.width, canvas.height);
  9.        
  10.         for ( var i = 0; i <specSize; i++ ) {
  11.           magnitude = spectrum.item(i) * 4000; // multiply spectrum by a zoom value
  12.          
  13.           // Draw rectangle bars for each frequency bin
  14.           ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
  15.         }
  16.       }
  17.  

Add to that the ability to write audio....

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var audioOutput = new Audio();
  3. audioOutput.mozSetup(2, 44100, 1);
  4.  
  5. var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
  6. audioOutput.mozAudioWrite(samples.length, samples);
  7.  

Nice work all around.

]]> http://feedproxy.google.com/~r/ajaxian/~3/tVWFXrUtupI/spectrum-visualization-with-the-html5-audio-data-api/feed/ Awesome Speech Bubbles With Pure CSS3 http://feedproxy.google.com/~r/webresourcesdepot/~3/L_-SiKOKes8/ http://feedproxy.google.com/~r/webresourcesdepot/~3/L_-SiKOKes8/#comments Tue, 09 Mar 2010 07:18:08 +0000 WebResourcesDepot http://www.webresourcesdepot.com/?p=1519 Nicolas Gallagher is sharing a creative way on creating good-looking speech bubbles with CSS3.

There are no images or JavaScript in the implementations but uses the :before and/or :after pseudo-elements to produce basic shapes.

The HTML remains semantic however we should remember that CSS3 is not fully supported by all major browsers & we may again require JavaScript to add this support (like IE7.js).

CSS3 Speech Bubbles

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

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: ,

Related posts

]]> http://feedproxy.google.com/~r/webresourcesdepot/~3/L_-SiKOKes8/feed/ 15 Best Free Online Tools for Web Design & Development http://feedproxy.google.com/~r/Webappers/~3/bjIE_ijfGcA/ http://feedproxy.google.com/~r/Webappers/~3/bjIE_ijfGcA/#comments Tue, 09 Mar 2010 07:13:38 +0000 WebAppers http://www.webappers.com/?p=2595 You can find a tool for just about anything online, there’s only one problem: they cost money, and in some cases, lots of it! Many online tools offer a free basic package for anyone to use, but these packages are often strictly limited, rendering these tools practically useless until you stump up the cash. In most cases, however, there are free alternatives available, many of which are very, very good indeed.

Below, you’ll find 15 Best Free Online Tools for Web Design and Development. Rather than narrow our focus, we’ve covered various aspects of the design and development process, to include the admin side of freelancing or running a small business.

No two tools listed below perform the same function; we’ve chosen our favorite tool for doing each job. You’ll find the best free online tool for project management, one for invoicing, one for screen sharing, one for instant messaging, one for mocking up layouts, and much more besides.

1. Redmine

Redmine is a great, free alternative to other pricey project management apps available online. It does pretty much everything you could possibly desire, albeit in a less polished way than some of its more expensive rivals. With Redmine, you can manage a large number of projects simultaneously, defining personal roles and assigning tasks to specific team members if necessary. You can track time and issues, create Gannt charts and calendars, create project wikis and forums, and manage documents and files.

2. Billing Boss

Billing Boss is a fantastic, free invoicing tool, designed especially for small businesses and freelancers, which lets you send an unlimited number of invoices to an unlimited number of clients, quickly and easily. All of your invoices are saved automatically and catalogued in a logical, understandable way. Billing Boss supports multiple currencies, is integrated with PayPal and is mobile friendly. You can even share your account with your bookkeeper or accountant.

3. Yuuguu

Yuuguu is a multi-platform screen-sharing tool, which allows Windows, Mac and Linux users to collaborate. You can quickly initiate an instant messaging session with a client or team member, sharing each others’ screens at the touch of a button. It’s perfect for working together on document presentations or for writing and editing documents in a group.

With Yuuguu, there’s nothing to download at either end, which means you can start sharing and communicating in seconds. The free Yuuguu package includes unlimited use with other Yuuguu users and 100mins/month use with non-Yuuguu users, as well as up to 5 participants in a single session.

4. FavIcon Generator

Looking for a quick and easy way to create favicons for your website, then look no further than Dynamic Drive’s excellent FavIcon Generator. It’s effortless to use, just select any image (provided it’s a gif, jpg, png, or bmp) you want to turn into a favicon and press Create Icon. Follow the simple instructions generated to create an eye-catching favicon that will help your website stand out in your users’ favourite lists.

5. Dropbox

For online storage, look no further than Dropbox, an ingenious tool for storing and sharing files between all of your computers and with other team members. Once installed, a Dropbox folder appears on your computer’s desktop. Drag files into the folder and they will automatically appear in the Dropbox folder on each one of your computers, laptops and smartphones. What’s more, every file is automatically added to another Dropbox folder on the Dropbox website, which is accessible from any computer in the world. Invite associates to access your Dropbox folder, for quick and easy file sharing.

6. BrowserShots

BrowserShots is a straightforward, free tool for checking what your website looks like in a wide range of different browsers. It really couldn’t be simpler to use. All you have to do is enter your website’s URL into the address bar at the top, check or uncheck to select which browsers you would like to get a screenshot from, and press Submit. You can fine-tune your search by screen size and color depth, as well as enabling or disabling JavaScript, Java and Flash.

7. toggl

toggl is the perfect time tracking tool for freelance web developers and designers who tend to get paid by the hour. As an online tool, it’s available from anywhere, which is great for those of us who frequently work away from the office. As well allowing you to create projects and start timing in a few clicks, toggl produces performance charts and other reports for you and your whole team to analyze. Toggl can be embedded in iGoogle, Netvibes and Gmail so that you can share your performance with others. It’s free for up to 5 users.

8. Google Docs

Google Docs is an online word processor and spreadsheet tool that’s free to everyone with a Google account. It works in much the same way as Microsoft Word, offering similar features in the form of multiple fonts, font sizes and colors, page numbering, bullet points, alignment, tables and spacing etc. It does not, however, offer headers and footers, footnotes or a powerful find and replace feature, which some people simply can’t live without.

The best thing about Google Docs is that it works seamlessly with Word, so you won’t have to worry about compatibility issues when working as part of a team. Google Docs really comes into its own when it comes to collaboration, however. Press the Collaborate tab to work on a document with several people at once.

9. mockingbird

mockingbird is a wonderfully useful tool, which lets you create mockups of websites in minutes. Simply drag and drop user interface elements into mockingbird, rearranging and resizing as you go to create a perfectly balanced page. You can add as many pages as you like, linking them all together to show clients or associates how users might navigate through your site.

Once you’ve created and saved a mockup, mockingbird issues you with a link which you can share with other people, or an embed code so that you can embed a mockup in your own website. It’s a lightweight tool with few features (there are, for instance, no templates to follow), but this makes it really quick and easy to use.

10. kuler

If you find choosing colors tricky, then take a look at kuler, a fully database driven Flash site created by Adobe Labs. With kuler, you can choose, create, modify, mix and match colors to your heart’s content, for free of course, until you happen upon the perfect color scheme for your website. Not only can you create your own color swatches, complete with RGB and HEX codes, you can save them and download other peoples’ swatches too. You can even extract color palettes from illustrations and photographs, uploading them or selecting them on Flickr. Once you’ve chosen the ideal color pallet, you can download it for use in Adobe Creative Suite.

11. Bespin

Bespin is a browser based code editor which attempts and succeeds to match the quality of traditional desktop editors. It offers standard editing features, as well as syntax highlighting, support for large files, undo/redo, preview files in browser and import/export projects. Bespin not only gives you access to your entire coding environment from any computer, it lets you collaborate in an effortless way, without the need for firewall configuration. Tweak away to your hearts content by using various plugins until youve created the perfect editor for you.

12. Pingdom Tools

Pingdoms Full Page Test imitates the way a web page is loaded in a browser, showing you exactly how long it takes for each object, including images, CSS, JavaScript, RSS, Flash and frames, to appear. The load time of each object is shown as a series of colored bars for quick and easy visual comparison. Order each object into a hierarchy to identify any problem areas. The Test also uncovers useful, general stats, such as total number of objects and total load time.

13. W3C Markup Validation Service

If youre stuck on a computer without an FTP client, you should use net2ftp. Its a free, web based FTP client which features all the standard FTP functions youd expect as well as various other features, including the ability to extract files and directories and download a selected group of files or directories as an archive. There are numerous plugins available to enhance your net2ftp experience and its integrated with Drupal, Joomla, Mambo, XOOPS and other Content Management Systems.

14. net2ftp

If youre stuck on a computer without an FTP client, try net2ftp. Its a free, web based FTP client which features all the standard FTP functions youd expect as well as various other features, including the ability to extract files and directories and download a selected group of files or directories as an archive. There are numerous plugins available to enhance your net2ftp experience and its integrated with Drupal, Joomla, Mambo, XOOPS and other Content Management Systems.

15.Pixlr

Looking for a solid image editor that doesnt cost an arm and a leg? Available in 13 languages, Pixlr provides a great, free alternative to Adobe Photoshop. Of course, it offers nowhere near the same level of functionality or performance, but you wouldnt expect it to. It can, however, handle most editing that designers do on a day-to-day basis. You can use layers and an array of filters and effects.

About the Author

Tom Walker is a writer and designer from Great Britain where he works for a Manchester based supplier of printing supplies including HP laser cartridges, inks and paper. His other creative writing is available on their blog, CreativeCloud.

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://feedproxy.google.com/~r/Webappers/~3/bjIE_ijfGcA/feed/ Traffic Light Feedback Giveaway – Winners Announced (And 50% Lifetime Discount) http://feedproxy.google.com/~r/webresourcesdepot/~3/lQ9IgvEiXvc/ http://feedproxy.google.com/~r/webresourcesdepot/~3/lQ9IgvEiXvc/#comments Mon, 08 Mar 2010 16:48:51 +0000 WebResourcesDepot http://www.webresourcesdepot.com/?p=1518 Last week, a post was announcing the giveaway of 3 annual Traffic Light Feedback accounts ( £180 GBP/account) to WebResourcesDepot readers.

Today, the winners are selected. But before that, let's remember:

What is Traffic Light Feedback?

It offers a very simple way of getting feedback from users: asking a question & having 3 clickable responses (green, yellow and red) where users don't have to fill anything.

Traffic Light Feedback

You can import customers lists easily & auto-send them the feedback forms with customized/branded templates. After all, it is possible to get reports.

And the winners are:

The winners are selected randomly with a database query and here they are:

  • krull (comment #115834)
  • Tuan (comment #116839)
  • Inwebdeveloper (comment #116257)

Congratulations to the winners and thanks to everyone for contributing.

50% Lifetime Discount Code

Traffic Light Feedback offers a special discount code to all WRD readers that enables you to get the service with 50% lifetime discount (the offer ends on: March 31st 2010).

The discount code is: AD8FGWEBRE .

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

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags:

Related posts

]]> http://feedproxy.google.com/~r/webresourcesdepot/~3/lQ9IgvEiXvc/feed/ modulr: a CommonJS module implementation in Ruby for client-side JavaScript http://feedproxy.google.com/~r/ajaxian/~3/88WWc8yFtWU/modulr-a-commonjs-module-implementation-in-ruby-for-client-side-javascript http://feedproxy.google.com/~r/ajaxian/~3/88WWc8yFtWU/modulr-a-commonjs-module-implementation-in-ruby-for-client-side-javascript#comments Mon, 08 Mar 2010 11:28:40 +0000 Ajaxian http://ajaxian.com/?p=8688

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // check to see if you are running inside of node.js and export if you are
  3. if (typeof GLOBAL == "object" && typeof GLOBAL['node'] == "object") {
  4.     exports.Appetite = Appetite;
  5. }
  6.  
]]> http://feedproxy.google.com/~r/ajaxian/~3/88WWc8yFtWU/modulr-a-commonjs-module-implementation-in-ruby-for-client-side-javascript/feed/ modulr: a CommonJS module implementation in Ruby for client-side JavaScript http://feedproxy.google.com/~r/ajaxian/~3/88WWc8yFtWU/modulr-a-commonjs-module-implementation-in-ruby-for-client-side-javascript http://feedproxy.google.com/~r/ajaxian/~3/88WWc8yFtWU/modulr-a-commonjs-module-implementation-in-ruby-for-client-side-javascript#comments Mon, 08 Mar 2010 11:28:40 +0000 Ajaxian http://ajaxian.com/?p=8688

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // check to see if you are running inside of node.js and export if you are
  3. if (typeof GLOBAL == "object" && typeof GLOBAL['node'] == "object") {
  4.     exports.Appetite = Appetite;
  5. }
  6.  
]]> http://feedproxy.google.com/~r/ajaxian/~3/88WWc8yFtWU/modulr-a-commonjs-module-implementation-in-ruby-for-client-side-javascript/feed/ Instant CMS For Static Websites: Phpns http://feedproxy.google.com/~r/webresourcesdepot/~3/CGsizJ4wl6A/ http://feedproxy.google.com/~r/webresourcesdepot/~3/CGsizJ4wl6A/#comments Mon, 08 Mar 2010 08:58:20 +0000 WebResourcesDepot http://www.webresourcesdepot.com/?p=1517 Phpns is an open source news/content management system that will enable you to add dynamic content to any website with one line of code.

The application is not a complicated or a full-featured CMS. Rather, it is a simpler one which is very suitable for managing basic websites.

Phpns

It comes with variables like adding pagination, displaying summary or the full content, RSS generation & much more.

Phpns is multi-user, can create SEO-friendly URLs & optionally, helps you create/manage templates.

The application is built with PHP, uses MySQL for storing the data & comes with a web-based installer.

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

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: ,

Related posts

]]> http://feedproxy.google.com/~r/webresourcesdepot/~3/CGsizJ4wl6A/feed/ Display Thumbnail for Image Uploads with jQuery http://feedproxy.google.com/~r/Webappers/~3/Pxp-W5PA2NM/ http://feedproxy.google.com/~r/Webappers/~3/Pxp-W5PA2NM/#comments Mon, 08 Mar 2010 07:01:10 +0000 WebAppers http://www.webappers.com/?p=2561 We’ve all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it’s hidden from you.

The solution is to use a little bit of JavaScript to upload the image as soon as it’s selected and display a thumbnail so we can easily review the form before we submit it. Head on over to the ZURB – Image Uploads with 100% Less Suck to see a complete demo and breakdown of the JavaScript they use to accomplish this.

ajax-image-upload

Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/ajax_upload
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://feedproxy.google.com/~r/Webappers/~3/Pxp-W5PA2NM/feed/ Open Source Video Conferencing: BigBlueButton http://feedproxy.google.com/~r/webresourcesdepot/~3/rbh3iPC3LgM/ http://feedproxy.google.com/~r/webresourcesdepot/~3/rbh3iPC3LgM/#comments Sun, 07 Mar 2010 08:45:27 +0000 WebResourcesDepot http://www.webresourcesdepot.com/?p=1516 BigBlueButton is an open source video conferencing application which is specifically built for remote learning but can be used for standard meetings as well.

The application enables multiple users to login & share their webcam or communicate via VOIP at the same time.

It is a very ideal application for presentations as users can upload PDF or office documents & keep everyone in sync with their current page, zoom, pan, mouse pointer etc.

Also, users can share their desktop with others easily.

BigBlueButton

There are 3 user types:

  • Presenter: can upload presentations & sharing their desktop
  • Viewer: have no authority within the conference, can only view & chat with other users
  • Moderator:can upload presentations, share the desktop & change user types of other users.

Users can raise hands to get the attention of the presenter, mute any other participants they want & chat between themselves in public or privately.

BigBlueButton completely relies on open source technologies & it can be improved further with the API provided.

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

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: , , ,

Related posts

]]> http://feedproxy.google.com/~r/webresourcesdepot/~3/rbh3iPC3LgM/feed/