Saturday, April 14, 2012

10 Online HTML5 Tools For Web Designers

If you haven’t heard, HTML5 is taking the web by storm! It is currently being enhanced by experts to provide us Web Designers & Developers with awesome new revolutionary web page features!

HTML5 Background Information

For those of you who are new to HTML5, here is some quick background information to get you up to speed.
  • HTML5 is the new language for presenting content on the Internet (at the time of writing this article it is still in beta but soon to be released in 2012).
  • HTML5 brings new features making it easy to incorporate video, audio, fonts, drag & drop, web graphics & animations into your web pages.
  • HTML5 is backwards compatible to don’t worry about your old designs in HTML 4 or XHML1 they will work just the same!
  • jQuery has started killing Flash, HTML5 will finish it off for sure.
10 Online HTML5 Tools For Web Designers

HTML5 Online Tools & Resources

Not known to many web designers, there are some really good online tools & resources which web designers should definitely take advantage of to help create those new innovative designs and stay ahead of the field! We have collected 10 of the best Online HTML 5 Tools & Resources for Web Designers. Enjoy!

Online Sprite Box Tool

Compressing images is all the rage these days and putting all your images in a “sprite” will both increase the speed of your image transitions and loading times. This Online Sprite Box Tool can help you design your images into sprites using this awesome jQuery, CSS3 and HTML5 tool.
html5 sprite box

Online 3D Sketch Tool

This is no ordinary sketch tool, it uses the power of HTML Canvas to create 3D drawing. To rotate the canvas in 3D, you need to hold down SPACE and then DRAG horizontally with your cursor. You can also make the drawing vibrate and draw in dashed lines too. Pretty Cool.
html5 sketch

Online Font Testing Tool

As a designer, choosing a decent font can be a tough process! Use this awesome font bookmark to instantly view any web page in a new font without changing any HTML or CSS! Harness the power of HTML5 and @font-face by dragging the font.ttf files into the top toolbar and they will appear in a list for quick view. There are hundreds of free websites just type in “Free Fonts” into Google.
html5 Fonts

Online Velocity Sketch Tool

Velocity sketch is a unique online HTML5 canvas drawing tool which you can create strange looking web like things. I did a quick one (in the screenshot) but I’m sure you web designers can be creative with such a tool and create something quite awesome.
html5 velocity sketch

Online Pattern Generator Tool

This online tool coule be pretty useful for web designers when it comes to creating page and header backgrounds or even heading backgrounds. I uses the power of HTML canvas to provide you with the pattern your looking for in seconds! It has heaps of options and is really easy to use! Great stuff.
html5 patternizer

Online XRay Tool

With Online XRay Tool can quickly view details of page elements on any webpage at the click of a button! Simply drag the bookmarklet on their website into your bookmarks, visit the webpage you want to analyse, click Xray bookmar then click any element on the page. It also can handle HTML5 elements such as canvas and provide you with the design information you need.
html5 XRay

Online Automatoon (animation) Tool

Automatoon is pure HTML5. Since no Flash is used, your animations will play just fine on iPhones, iPads, Android devices, and all common web browsers. Awesome-atoon!

Online HTML5 Audio Maker Tool

I think with the introduction of the the audio tag in HTML5 we will start seeing more and more websites utilize the power of audio. This is an online audio maker tool which can help introduce you to the new audio features HTML5 has to offer. There is also a online HTML5 video maker tool which does a similar thing.
html5 audio maker

Online SVG to HTML5 Canvas Tool

Most vector art packages (Illustrator, Inkscape etc) can export as SVG (Scalable Vector Graphics) and with this tool you can convert your SVG file into it’s HTML5 canvas equivalent.

Chrome Ajax Animator Tool

A HTML5 powered web-based animation suite (that has evolved from it’s Flash IDE alternative). It is now a cross-platform/cross-format animation tool that works both online and offline! You’ll need to have Google Chrome installed, see a quick video tutorial to get you started. Great tool for HTML5 animation beginners.

html5 Ajax Animator 

Courtesy:  Sam Deering is a professional JavaScript & jQuery developer and founder of a popular jQuery Blog. He is currently working as a Web Developer for Flight Centre Australia.

Ten Most Popular Firefox Plugins of Web Designers

Firefox is the browser of choice for most web designers. Not only does it display websites the way they should be displayed, but it also gives users the ability to add tons of functionality and customization through add-ons or plugins. Since Web designers spend most of their day working in a browser it makes since to be able to do things like make edits to css without switching to a different application.
If your a Firefox user, but have yet to try any extensions, here are 10 of the most popular among web designers. You should really give them a try. They may just make your life a lot easier.


firefox plugins
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Web Developer

firefox plugins
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. One of my favorite features of this extension is being able to edit css of any web page and see the results in real time.


firefox plugins
ColorZilla assists web developers and graphic designers with color related tasks – both basic and advanced. With it you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.


firefox plugins
Codetch gives you the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

Window Resizer

firefox plugins
Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. It supports the 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 resolution sizes.

Pixel Perfect

firefox plugins
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.


firefox plugins
Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Some of the key features include: multi-page document with background page, on-screen text editing with rich-text supports, and PNG rasterizing.


firefox plugins
FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.


firefox plugins
FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.


firefox plugins
MeasureIt allows you to draw out a ruler to get the pixel width and height of any elements on a webpage.
Here's some other articles that you will definitely find useful.

10 Best WordPress Sharing Plugins of 2012 To Get More Social Traffic

Popular Networking Tools for Freelance Web Designers

Responsive Web Design Templates and Frameworks

10 New Twitter Tools That Will Get You Tweeting

Wednesday, April 11, 2012

WebDesign Business Advice

Are wanna start your webdesign business... jus read following articles to  get a through knowledge....

  1. Starting A Web Design Business | Webdesigner Depot
    27 Jan 2011 – What do you think? Do you run your own web design business? Whatadvise would you offer to someone who is about to do the same?
  2. business advice » Jenn Mears Web Design
    28 Apr 2010 – There's a dizzying array of blogging platforms, services, widgets, feeds and gadgets out there that can make any busy business owner throw up ...
  3. Web Design Business Academy | Archive | Articles & Advice
    23 Mar 2011 – The competition is so fierce you may be even wondering if it is at all possible to earn a living with a web design business. In this article I want to ...
  4. Web design business advice needed! - DesignersTalk › DesignersTalk › Other Forums › Business
    Old 21-10-2004, 13:03. MarkyBoy. Registered User. Join Date: Oct 2004. Posts: 2.Web design business advice needed!
  5. Help and advice on expanding my web design business
    9 Jun 2009 – Hi. I started my own web design business 2-years ago. I`d been doing freelance web design on the side of my full-time job - and after getting ...
  6. Web Design Business Advice – Choice is the Profit Killer - Mark ...
    24 Apr 2008 – Web Design Business Advice Choice is the Profit Killer. I've recently been having some car trouble. The engine oil light came on and I've been ...
  7. Web design Bath, Bristol, Swindon
    Set your business apart from your competitors with great web design... and effectively with clear business advice then all you need to do is give us a call on +44...
  8. Ohio Web Designer application development programmer Ohio USA
    Custom Ohio web design developer company ohio, Web programming and ... But when you want a professional site that works with your business, is easy to ...
  9. Business Advice | HOW Design
    Get 6 Issues of. HOW for $29.96. Enjoy a full year's worth of creative inspiration,business and career advice, plus 500+ award-winning designs now!

    ALL the BEST....

Friday, April 6, 2012

TaffyDB - The JavaScript Database

TaffyDB is an opensouce library that brings database features into your JavaScript applications.


How you ever noticed how JavaScript object literals look a lot like records? And that if you wrap a group of them up in an array you have something that looks a lot like a database table? TaffyDB is a libary to bring powerful database funtionality to that concept and rapidly improve the way you work with data inside of JavaScript.

What makes it sticky

  • Extremely fast
  • Powerful JavaScript centric data selection engine
  • Database inspired features such as count, update, and insert
  • Robust cross browser support
  • Easily extended with your own functions
  • Compatible with any DOM library (jQuery, YUI, Dojo, etc)

Creating a JavaScript Database

Let's create a database containing a collection of posts one might find on service like Twitter or Facebook.
var newsfeed = TAFFY([
    {"id":1,"user":"kmart77","stars":3,"text":"JavaScript is a meal best served cold"},
    {"id":2,"user":"lukeisyourfather","stars":5,"text":"Anyone want to meet tonight at Fado?"},
    {"id":3,"user":"bemine","stars":3,"text":"I reallylike the new prirotity inbox #gmail"},
    {"id":4,"user":"keepit","stars":3,"text":"Laughing at this weeks fails video."},
    {"id":5,"user":"piegirl22","stars":3,"text":"It is impossible to change your clothes in a public bathroom. Ick."},
    {"id":6,"user":"kmart77","stars":3,"text":"@kmart77: Have fun in New York!"},
    {"id":7,"user":"justinb","stars":5,"text":"Please set the noise level to earthquake"}

Filtering for data

Now we have a TaffyDB collection containing the JSON objects (records) we passed in. Using the extensive API we can start accessing and working with our data.
newsfeed().count() // returns 7
newsfeed.sort("user") // sort records by username
But the real power comes into play once we start filtering for records. Think of this filtering as using data selectors (if you know jQuery) or building the a database query "where" clause (if you know databases).
newsfeed({user:"kmart77"}).count() // returns 1
// filter for posts where user is equal to kmart77
Keeping this JavaScript centric, we use an object literal to do the record lookup. No ugly string concatenations here.
Now that we understand basic filters lets look at some of the options we have for filtering
newsfeed({text:{ends:"#gmail"}}).count() // returns 1
// filter for posts where text ends with #gmail
// you can also use starts
newsfeed({stars:{gt:3}}).count() // returns 2
// filter for posts where the star rating is greater than 3
There are a lot more types of filtering including options to ignore case, use functions or regular expressions, and traverse objects within your database.

Working with data

When you filter for data you create a query. If you assign this query to a variable you can pass it around. It is not static and the data will be updated if other logic changes the underling records.
var kmart77 = newsfeed({user:"kmart77"});
// kmart77 is now a first class variable and can be passed to functions
So now that you have your query lets look at some of the methods you can use to work with the data it has access to.
kmart77.each(function (r) {
}) // for each record, call the function you've provided and alert the text of the post // returns an array with the text of each post
var kmart77_5Star = kmart77.filter({stars:5}); // apply another filter
kmart77_5Star.count() // returns 0
kmart77.count() // still returns 1

Modifying data

Let's make a basic change to a record:
// updates the star rating, returns a query object
Now let's insert another post:
newsfeed.insert({"id":8,"user":"justinb","stars":3,"text":"Have a great weekend everyone!"});
//inserts a new record
Finally let's do a remove:

//removes all records for user kmart77


For web reference-

Thursday, April 5, 2012

Best SEO Tools Free

  1. Free SEO Tools & Search Engine Optimization Software
    aaron wall
    by aaron wall · in 15,509 Google+ circles
    Free link analysis and keyword research tools brought to you by SEO expert Aaron Wall.
  2. Free SEO Tools - SEOToolSet - United States
    It provides users with powerful tools and information necessary for understanding and monitoring how sites of interest are seen by search engines and thus ...
  3. Free SEO Services - your source for free seo & web directory tools. link to Home · link to About Us · link to Our Blog · link to Login · link to Sign Up; link to ...
  4. 140 SEO TOOLS - The Tool Place - Free SEO ... - SEO Company
    View my Free SEO Tools page which has my own set of tools. ... The Free Keyword Tool by WordStream is the fastest, most accurate, most comprehensive ...
  5. Free SEO Tools
    Free search engine optimization tools and resources. Home of SEOpen, the SEOFirefox extension.
  6. The Best 15 Free SEO Tools Online - Top SEO Tools |
    13 Sep 2007 – We have used, reviewed, and analyzed many of the free seo toolsonline and have put together a short list of the top 15 free seo tools online.
  7. SEO Free Tools,SEM Tutorials,News,Panel,PageRank Checker and ... is providing lot of seo free tools to track your site perfomance. Also latest seo news, seo tutorials to improve your site ratings.
  8. Free SEO Tools - Investintech
    To help you get your website to the top of the Search Engine Results Pages (SERPs), we take a look at 101 Free SEO tools, techniques and resources (available ...
  9. Free SEO Tools
    SEO Tools - 77 free online tools to help you perform search engine optimization. ... Use our free SEO tools for your comprehensive search engine optimization, ...
  10. Best SEO Tools & Free Search Engine Optimization Software
    Best Webmaster SEO Tools for Website Analysis and Free Search Engine Optimization Software in One Place to Build a Successful Site for Increase Traffic.