You need to upgrade your Flash Player to version 10 or newer.

Our Category: tools

A 5-Step Checklist for Mobile Website Design

mobile web | Tips | tools | Web Design 0 No Comments

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren?t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn?t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I?ve missed important steps, or wish to touch upon any of them.

 

Choose the Right Markup

In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it?s important to choose one markup language and stick to it. Explore your customer?s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.

WML Read More

30 Greatest Online Project Management and Collaboration Tools For Easy Communication!

collaboration | communication | Freelance | online | project management | tools | Web Design 1 1 Comment

Project management and collaboration skills play a major role in every business and often the outcome of a project is highly affected by the initial planning and monitoring stages of a project. Project management is especially important for small and flexible businesses where all the work is based on a few people who have to communicate and develop the workflow. Globalization has made collaboration even more essential since many modern businesses like web design agencies don?t even have a constant address ? people all around the world are working from their home.

Web-based project management and collaboration tools are the top choice of hundreds of entrepreneurs and thousands of small and medium size businesses. These tools will maximize your productivity, organization, and help you keep on top of your projects effortlessly. Keep track of your projects, manage your workers, set milestones, schedule your work, upload your files, send invoices, sync with your mobile ? all of these features and more make these apps almost necessary.

Continue reading if you?re looking for your first project management app or just seeking to check out alternatives. With a lot to choose from it might be frustrating to find the right app for you. This article presents some of the best project management and collaboration tools out there. There are also tools for brainstorming ideas, hosting conversations and even managing a newsroom. Each of them share common general features, however each of them also has something unique to offer. Most of these tools come with a fixed monthly price, some of them you?ll have to pay for per user and month. Also a trial period is available with most of them so you?ll have the chance to examine and check out if it?s the right choice. Each description contains brief features the service offers as well as the pricing plans.

1. Teambox

Teambox-project-management-collaboration-tools

Teambox is voted Read More

Web Development Tools, Elements and Techniques

app | extensions | Tips | tools | Web Design | web development 0 No Comments

When I was starting out as a web developer, I had to face some struggles when finding solutions to some of my problems. I had to learn and try new things but there weren?t as many tutorials as there are today. The best alternative was to learn and study from the work of others, analyzing their process and work methods.

These days, it seems like a new tutorial appears every minute, but personally I believe that looking at actual implemented solutions is still a powerful way to learn, and you also have many tools and methods at your disposal which can help you see and figure out how your favourite websites were built. Everything you need to know and learn is right in front of you and at your disposal.

Web Development Tools and Extensions

The traditional view source code option was not enough for a good code inspection. It became very important for a web developer to have a toolbox that could provide him with a set of possibilities specifically made for code analysis and inspection within a web browser. Those tools are called Developer Tools and are usually installed by default or as an extension/plugin, working directly from the browser itself. With the developer tools you can see all the source code of a webpage as you did before with the traditional View Source Code option, but with way more options and functionality than before. You can inspect, edit, watch live results and much more.

Google Chrome (Developer Tools) / Safari (Developer Tools)

Google Chrome Developer Tools

You may be wondering why am I including Chrome Developer Tools and Safari Developer Tools together, well that?s because they belong together. The Developer Tools is part of the Webkit open source project which means Safari and Google Chrome share the same code base, they even share the same layout.

So let?s start with Chrome, my new favourite. Google Chrome?s Developer Tools is very recent compared with others like Firebug (Firefox), but it?s growing fast and getting better and better with each new version.

The same obviously applies to Safari.

?The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the WebKit open source project, where the tools are called Web Inspector.?

?All of Safari?s powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.?

For a better understanding, you can check the links below.

Google Chrome Developer Tools

Safari Developer Tools

Firefox (Firebug)

Firebug

With Firefox the smart solution for a web developer is definitely Firebug, one of the most popular Firefox extensions out there. Although the Webkit Developer Tools is growing at a really fast pace, Firebug is probably the most complete and mature tool you can have for web development and code analysis.

?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.?

Firebug?s interface and work process is extremely similar to Chrome?s Developer Tools (or vice-versa).

Firebug

Opera (Opera DragonFly)

Opera Dragonfly

This is Opera?s gem for code analysis and inspection. It?s surprisingly powerful and personally I would put it in third place right behind Google Chrome?s Developer Tools. The downside is definitely the aesthetics but its features and cross-device compatibility places Dragonfly among the best.

?A full suite of tools are ready at your disposal. Debug JavaScript, view the DOM, monitor network traffic, preview resources, edit colors and a whole lot more. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered.?

For more information, check the link below.

Opera Dragonly

Internet Explorer (Developer Tools)

Internet Explorer Developer Toolbar

Yes, Internet Explorer has one too. Although the interface looks a bit old and not as good as other solutions since it lacks some functionality, it can be almost as good as the competition.

?The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.?

You can learn more about it at the link below.

Internet Explorer Developer Toolbar

How To

Check a website font

Check another's website font

With real text (not an image of text), the first and easiest way is by using Developer Tools / Firebug, so if you have it just select the text, inspect element and you should immediately see on the right side the font or font-family property which tells you the font that?s being used. Another way to do it is by using an extension/plugin for this purpose. There are probably similar plugins for other browsers like Chrome, but if you?re using Firefox, you have a great add-on called Context Font. With Context Font all you need to do is select the text (again, needs to be real text and not an image), right-click on it and you will immediately get the font and size used.

If the font you?re looking for is being used as an image, you have only one way to do it. One of the many places you can do this is myfonts.com. Upload your font and follow the steps.

Good luck!

Check the box model of an element

Check the box model

The box model represents the visual structure of the elements of a webpage using the corresponding properties like width, height, margin, padding and border, according to the visual formatting model. It?s possible to check the box model of any page and element using Developer Tools or Firebug. In order to do that, you just need to inspect the desired element and select Metrics on the right side of the Developer Tools panel. With Firebug, you need to select Layout (not Metrics).

Copy all text content of an element with Developer Tools

Copy all text content of an element

This one is a popular trick which is achieved by using the Developer Tools console. So let?s say you would like to copy this article?s text without the need of having to select all the content with your cursor (particularly useful on very long pages with too much text). To do that, inspect any element on this article page and look for the text container?s name from which you would like to copy the text (which in this case is called articlesContainer), now go to the console option and write the following command: copy ( articlesContainer.innerText ). Now paste the text anywhere you want and you are done! You?ve just copied the text inside our articlesContainer which corresponds to our main article text.

Bookmarklets

Min

Min

MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

Website

Design

Design's Spry Media

Design is a suite of web-design and development assistive tools which can be utilized on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

Website

Favelet Suite

Favelet Suite

When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets included. Simply click the link you want to invoke the favelet. An ?info? icon is available to take you to the favelets information page on slayeroffice. Included in the suite: Color List, Document Tree Chart*, HTML Attribute Viewer, HTTP Header Viewer, Hidden Field, Modifier, JavaScript Object Tree*, MODIv2, Mouseover DOM, Inspector, Object Dimensions, Page Info, Remove Children, Resize Fonts, Ruler**, Show Source, Style Sheet Tweak*, Style Sheet Viewer*.

Website

W3C Markup Validators

W3C Markup Validators

Quick markup validations of any web document.

Website

45+ iPhone Apps To Keep You On Top Of the Edge Wherever You Go

Apple | applications | apps | business | iPhone | Productivity | tools | Web Design 0 No Comments

iPhone has gained popularity rapidly and is a must have gadget for nearly everyone now. Even I, an old clumsy Nokia owner, have finally realized it. iPhone is not your typical phone you pull out only to make a call. It can do much more than that. And with over 350 000 apps it would be silly not to fully use the potential this phone?s offering. But which apps to choose and which are worth the money? It can be rather frustrating to pick the right ones for you in all that mess.

This article is here to help you and presents 45+ of the most useful, efficient and awesome apps to keep you on top of the edge every time you use your iPhone ? be as productive as possible wherever you go. The apps collected in this article range from advanced bookmarking services to simple photo effect tools. These fantastic apps will help you increase your productivity greatly and get the best from your iPhone. You might ask if you can afford all that? Don?t worry, most of these apps are actually free or at a ridiculously low price for the value you get.

Organizing

These apps will help you to organize your notes, photos, bookmarks and synchronize them across your computer and other compatible devices. The USB flash era is over ? DropBox is the new ultimate service for transferring files quickly and efficiently.

1. Evernote (free)

Evernote-useful-iphone-apps

Evernote for iPhone lets you create notes, snap photos, and record voice memos that you can then access any time from your iPhone, computer, or the web.

2. ZooTool ($1.99)

Zootool-useful-iphone-apps

Zootool for iPhone makes it easy to bookmark, organize and share your favorite images, videos, documents and links from all over the web.

3. Dropbox (free)

Dropbox-useful-iphone-apps

Dropbox is a free service that lets you bring all your photos, docs, and videos anywhere. After you install Dropbox on your computer, any file you save to your Dropbox will automatically save to all your computers, your iPhone and iPad and even the Dropbox website! With the Dropbox app, you can take everything that matters to you on the go.

4. inClass (free)

Inclass-useful-iphone-apps

inClass, the amazing student organizer, is here to help you survive school. No matter how complex your school schedule is inClass will help you keep track of all your courses and even alert you before class so that you are never late again. Not only that, but it will help you keep track of your tasks by reminding you that one is due soon, so no more procrastination.

Business

Take your business with you in your phone. These apps will help you track, manage and take care of your finances and business.

1. Mint (free)

Mint-useful-iphone-apps

Personal finance tools from Mint. Track, budget and manage your money on-the-go. Sign up for a Mint account, add your online banking accounts and access your personal finances ? all from your iPhone. Get started for free.

2. Billings Touch (free)

Billings-touch-useful-iphone-apps

Billings Touch takes the Apple Design Award winning time tracking and invoicing experience from the Mac and puts it in your pocket.

3. Outpost 2 ($19.99)

Outpost-useful-iphone-apps

If you use Basecamp, you use it because you want to be productive. You use it because you want a simple solution to what once was a big problem for you. Now, you can use Basecamp on your iPhone, iPod Touch and iPad just as you?ve always wanted to.

4. MiniBooks for FreshBooks ($14.99)

Minibooks-useful-iphone-apps

MiniBooks puts the popular web invoicing software FreshBooks in the palm of your hand. Manage your clients, send invoices, run timers, and record payments, all while on the go. Plus, MiniBooks fully synchronizes with your FreshBooks account, so you have access to your account even when you?re off the grid. All this for less than FreshBooks? monthly subscription fee.

5. Scanner Pro ($6.99)

Scanner-pro-useful-iphone-apps

Scanner Pro transforms iPhone into portable scanner in your pocket. It lets you scan multipage documents, email them and even upload to Dropbox, MobileMe iDisk or any other WebDAV enabled server. Evernote integration is there too.

Task Management

To-do lists, RSS readers, project management, brainstorming ? keep track of your everyday life in your pocket. These amazing apps will help to get things done right.

1. 42tasks (free)

42tasks-useful-iphone-apps

42tasks is a tasks management and collaboration app, with cloud synchronization. The 42tasks app will boost your productivity. You can organize your to-do lists and tasks, assign them to other people, share projects and view custom reports.

2. Remember The Milk (free)

Remember-milk-useful-iphone-apps

Take your to-do list anywhere with this feature-packed app; never forget the milk (or anything else) again. Remember The Milk (RTM) for iPhone, iPod touch and iPad connects with the popular online service of the same name. With millions of users worldwide, Remember The Milk is everywhere you are: from mobile to the web to apps including Outlook, iCal, Gmail, Google Calendar, Twitter, and more. Learn more at www.rememberthemilk.com

3. Springpad (free)

Springpad-useful-iphone-apps

Springpad is a free application that lets you quickly and easily save ideas and information you want to remember on the web, on your iPhone and on your iPad.

4. Instapaper ($4.99)

Instapaper-useful-iphone-apps

Save web pages for later offline reading, optimized for readability on your iPhone or iPod touch?s screen. Featured by Apple and critically acclaimed by top blogs, newspapers, and magazines.

5. Things ($9.99)

Things-useful-iphone-apps

Things is a beautifully focused and amazingly intuitive task manager. Other to-do applications either oversimplify or are too difficult to use. Either way you are not getting stuff done. Things instead has the right balance between ease of use and powerful features.

6. Quickie to Do ($1.99)

Quickie-useful-iphone-apps

Fastest to-do list in the store, perfect for ad-hoc, spur of the moment lists. Simple and efficient, a pleasure to use.

7. LocationMinder ($1.99)

Location-minder-useful-iphone-apps

LocationMinder allows you to set reminder alarms that trigger based on location. Even when the app is not running, you will receive the reminders when you reach the area. Designed specifically to work with a new technology in the iPhone 4 for very low power consumption and high accuracy.

8. Wunderlist (free)

Wunderlist-useful-iphone-apps

Wunderlist makes it downright simple to organize your daily life. Just create a list and start filling it with things that need to be completed. Keep track of your more important tasks with reminders and notifications.

9. Reeder ($2.99)

reeder-useful-iphone-apps

Google Reader client with dozens of useful features.

10. MobileRSS (free)

mobilerss-useful-iphone-apps

MobileRSS is a fully-featured Google Reader client for iPhone, iPod Touch, and iPad. We?ve built a ton of powerful and exclusive features onto an elegant and familiar design platform which makes reading the news fun again. We think you?ll like it! This free version of MobileRSS has ads which can be removed by upgrading to the ad-free MobileRSS

Designer

Are you an author on Envato marketplace or just need quick access to your FTP server? These apps will suit designers, developers and other creatives who just love to paint on their phone.

1. cliqcliq Colors (free)

Cliq-colors-useful-iphone-apps

Colors is an easy-to-use color picker for discovering, converting, and managing colors and palettes.

2. WhatTheFont (free)

What-font-useful-iphone-apps

Ever seen a great font in a magazine ad, poster, or on the web and wondered what font it is? Whip out your iPhone and snap a photo, and WhatTheFont will identify that font in seconds.

3. Leaflet ($1.99)

Leaflet-useful-iphone-apps

Leaflet is an iPhone app designed for Envato marketplace publishers. Keep track of all of your account related information including comments, earnings breakdown, statement list and receive push notifications for both new sales and comments. You can also respond to comments and view individual statement entries all in one beautifully designed interface.

4. FTP On The Go (1,59 ?)

Ftp-useful-iphone-apps

An FTP client for the iPad, iPhone, and iPod touch.

5. Zen Brush ($2.99)

Zen-brush-useful-iphone-apps

Zen Brush is an app that allows you to easily enjoy the feeling of using an ink brush to write or to paint. It allows anyone to easily perform fluent strokes while not compromising on the fascinating texture of a real ink brush. Create works that radiate the right atmosphere by choosing the best background template from our large collection.

Photography

Picture can save a thousand words. These apps will help to keep your memorable pictures safe, share them with your friends and enhance them with cool effects right in your phone.

1. Instagram (free)

Instagram-useful-iphone-apps

3.75 Million users love Instagram! It?s a free, fun, and simple way to make and share gorgeous photos on your iPhone.

2. Adobe Photoshop Express (free)

Photoshop-express-useful-iphone-apps

Adobe Photoshop Express software lets you use simple gestures to quickly edit and share photos from your mobile device. Enjoy having your photo and video library right in your hand ? without wasting your device?s valuable storage space.

3. Photopod ($0.99)

Photopod-useful-iphone-apps

Take all your photos from Flickr, Facebook, Twitter, Picasa, Tumblr and Dropbox everywhere you go, on your iPhone or iPod Touch. Find the photos you want to see in seconds, edit and crop them or instantly upload the photos you just took with your iPhone to multiple networks without the need to open a new account.

4. PhotoSync ($1.99)

Photosync-useful-iphone-apps

PhotoSync will transform your photo handling forever. It?s the first app that makes wireless transfer of your photos/videos from or to your computer and other i-Devices ? a breeze. PhotoSync also transfers to Dropbox, Facebook, Picasa, Flickr, SmugMug and FTP. You need never use a cable again.

5. QuickShot with Dropbox ($0.99)

Quickshot-useful-iphone-apps

QuickShot simplifies the process of uploading photos to Dropbox. Every picture you take is immediately uploaded without the need for any additional actions. It has all the familiar camera features found in other apps, plus a few not found anywhere else. Queue multiple photos, upload photos in the background, and access all of the standard camera functionality from QuickShot?s simple interface.

6. Camera Plus (free)

Camera-plus-useful-iphone-apps

Camera Plus is a free camera app for your iPhone 4, 3GS, 3G and iPod touch to capture photos instantly with some great controls, add cool effects and share them with your Facebook, Twitter or Flickr friends on-the-fly!.

Social

Twitter and Facebook aren?t the only social networks out there. Play photo games, write diary, listen to thousands of mixes straight away from your phone.

1. Piictu (free)

Piictu-useful-iphone-apps

Part photo game, part social camera, piictu is a fun + simple way to talk and play with piics from your mobile phone.

2. Momento ($2.99)

Momento-useful-iphone-apps

Momento is a unique diary/journal writing application which provides a quick and easy way to privately record moments throughout your day. Connect with popular web services, such as Twitter, Facebook, Flickr, Instagram, Foursquare, Gowalla, YouTube, Vimeo, Digg and Last.fm, to collect and display your online activity as part of your diary.

3. 8tracks Radio (free)

8tracks-useful-iphone-apps

8tracks is handcrafted internet radio ? a ?social? alternative to Pandora. Featuring hundreds of thousands of mixes created by people who know and love music, the 8tracks iPhone app gives you easy, free and mobile access to the best collection of playlists on the web.

4. Skype (free)

Skype-useful-iphone-apps

Call, video call and instant message anyone else on Skype for free with Skype for your iPhone, iPod touch or iPad.

5. Path (free)

Path-useful-iphone-apps

Path is the simple and private way to share life with close friends & family.

6. GroupMe (free)

Groupme-useful-iphone-apps

Free group messaging with anyone you know. Works on any phone.Now works over data?no text plan required.

7. Spout ($0.99)

Spout-useful-iphone-apps

Introducing Spout, the newest way to enjoy news, messages, tweets and comments; delivered to your screen as a beautifully rendered up-to-the-second display of social content.

8. Bump (free)

Bump-useful-iphone-apps

Bump makes sharing with people as simple as bumping two phones together. Just pick what you want to send, then hold your phones and gently bump hands with another Bump user. And now, you can message with your friends who aren?t near you ? just add them as a friend inside of Bump and start messaging immediately ? it?s kind of like a long-distance ?virtual bump?.

Other

All the other fantastic apps that doesn?t fit in any other category. Check out Ben the Bodyguard trailer to find out what I?m talking about.

1. Fast ($1.99)

Fast-useful-iphone-apps

Fast is an innovative writing system that will save you time when typing your sms, mail, or more generally any text. The feature that differentiates Fast from other writing systems is that Fast learns from what you write, and updates itself by drawing from your vocabulary.

2. Ben the Bodyguard (3,99 ?)

Ben-bodyguard-useful-iphone-apps

Ben protects photos, contacts, passwords and other sensitive stuff on your iPhone or iPod touch. He?s your own personal security expert. Peace of mind on the go with a distinct attitude and opinion. Ben?s guarantee ? ?Your secrets are safe with me.?

3. Gas Cubby ($4.99)

Gas-cubby-useful-iphone-apps

Gas Cubby is the ultimate tool for tracking gas mileage and vehicle maintenance. Whether you?re a hypermiler, or just want a reminder to change the oil, Gas Cubby will save you money and keep your vehicle operating at its peak.

4. blip.me (free)

Blip-useful-iphone-apps

blip.me is a fun, useful, and free way to turn your mobile phone into a push-to-talk walkie-talkie.

5. Find My iPhone (free)

Find-phone-useful-iphone-apps

Find My iPhone is free for anyone with an iPhone 4, iPad, or 4th generation iPod touch (iOS 4.2 or later required).* Just sign in with your Apple ID on your qualifying device and turn on Find My iPhone to allow you to locate it. Then use the same Apple ID to turn on Find My iPhone on your other iOS 4.2 (or later) devices including iPhone 3G, 3GS, or iPod touch (2nd generation or later). Find My iPhone is also included with a MobileMe subscription.

6. Rowmote Pro ($4.99)

Rowmote-useful-iphone-apps

Rowmote Pro is the ultimate wireless remote, trackpad, and keyboard. A gorgeous universal app for iPhone, iPod Touch, and iPad, with everything from a multitouch trackpad to full extended keyboard support, and with no-configuration control of dozens of the best Mac applications, it is a must-have for any home media center or presentation.

7. Free Full Screen Private Browsing (free)

Full-screen-useful-iphone-apps

Finally, you can view all your websites privately and in full screen for free. This is the simple, no frills web browser you?ve been waiting for.

8. Where (free)

Where-useful-iphone-apps

Join more than 4 million people who rely on Where everyday to answer the question, ?Where should I go next??

9. quiQR ($1.99)

Quiqr-useful-iphone-apps

quiQR ? Real-time QR code reader and creator

50 New And Crazy Cool jQuery Plugins From Year 2011

2011 | Coding | cool | JQUERY | JS & AJAX | plugins | tools | Web Design | webdesign 0 No Comments

With 2011 a little over half over it?s the right time to look at, and uncover, the current trends of web design and development. It?s sure been a helluva ride for jQuery and it?s growth just doesn?t stop. With more than 40% of websites using jQuery now it?s no longer possible to ignore this efficient, powerful and lightweight tool.

jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.

1. jbar

Jbar-new-cool-jquery-plugins-2011

jbar is a jQuery plugin that transforms an unordered list <ul> into a toolbar with dropdown menus.

2. e24TabMenu

Tabmenu-new-cool-jquery-plugins-2011

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.

3. Simple jQuery Fluid Thumbnail Menu Bar

Fluid-thumbnail-new-cool-jquery-plugins-2011

The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.

4. Accordion Multilevel Menu

Accordion-new-cool-jquery-plugins-2011

The plugin has a boolean initialization option accordion. If you set this value to ?true? the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.

5. DropKick

Dropkick-new-cool-jquery-plugins-2011

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu look good.

6. jQuery Resize And Crop

Crop-resize-new-cool-jquery-plugins-2011

jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.

7. Cloud Zoom

Cloud-zoom-new-cool-jquery-plugins-2011

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.

8. Simple jQuery Image Hover Effect

Image-hover-new-cool-jquery-plugins-2011

This is a simple technique to animate an image when hovering using jQuery?s animate() effect.

9. Easy Image Zoom

Image-zoom-new-cool-jquery-plugins-2011

Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.

10. ImageLens

Image-lens-new-cool-jquery-plugins-2011

Use this jQuery plug-in to add lens style zooming effect to an image,

11. ImageSelect

Image-select-new-cool-jquery-plugins-2011

ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

12. jQuery Mapz

Maps-new-cool-jquery-plugins-2011

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.

13. jQuery Image Gallery

Image-gallery-new-cool-jquery-plugins-2011

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

14. JbhSlider

Jbhslider-new-cool-jquery-plugins-2011

JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.

15. jQuery.slideBanjo

Slidebanjo-new-cool-jquery-plugins-2011

jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.

16. Slides

Slides-new-cool-jquery-plugins-2011

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

17. jShowOff

Jshowoff-new-cool-jquery-plugins-2011

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ?slides? from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.

18. Tiny Carousel

Tiny-carousel-new-cool-jquery-plugins-2011

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

19. gSlider

Gslider-new-cool-jquery-plugins-2011

gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.

20. Craftyslide

Craftyslide-new-cool-jquery-plugins-2011

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

21. JQuery Wysiwym

Wysiwym-new-cool-jquery-plugins-2011

JQuery-Wysiwym is a wysiwym (What You See Is What You Mean) editor. It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode.

22. leanModal

Ieanmodal-new-cool-jquery-plugins-2011

A super simple modal window plugin that works with your CSS. Perfect for hidden page content. Uber light at just 780 bytes (minified). Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.

23. jQuery-preloader

Preloader-new-cool-jquery-plugins-2011

This jQuery plugin preloads CSS, JS, HTML and images with visual loader, fast and very small (~2Kb).

24. Zebra_Dialog

Zebra-dialog-new-cool-jquery-plugins-2011

Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery, meant to replace JavaScript?s alert and confirmation dialog boxes and built using the jQuery Plugin Boilerplate.

25. Double Vision

Double-vision-new-cool-jquery-plugins-2011

A jQuery 1.6.1 plugin used for moving text from input?s to textarea.

26. Textarea Code Editor

Code-editor-new-cool-jquery-plugins-2011

This plugin transforms textareas into code editors with the following advantages: indentation with the Tab key, intelligent home key, auto indent on enter.

27. Easy Paginate

Easy-paginate-new-cool-jquery-plugins-2011

This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects.

28. Activity Indicator

Activity-indicator-new-cool-jquery-plugins-2011

Activity Indicator is a resolution independent indicator that works in any browser.

29. jQuery File Upload

File-upload-new-cool-jquery-plugins-2011

jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.

30. Color Animation

Color-animation-new-cool-jquery-plugins-2011

With jQuery?s animate function, you can animate all kinds of css-properties. What?s really missing from jQuery is animating colors. This plugin will add this feature.

31. jQuery Formwizard

Form-wizard-new-cool-jquery-plugins-2011

The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.

32. jQuery Spinner Control

Spinner-control-new-cool-jquery-plugins-2011

Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.

33. jEscape

Jescape-new-cool-jquery-plugins-2011

This extension captures all the keydown events faster and less time writing code, you?ll profit.

34. jPaginator

Paginator-new-cool-jquery-plugins-2011

A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.

35. Snippet

Snippet-new-cool-jquery-plugins-2011

Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

36. HTML5 jQuery Music Player

Html5-music-player-new-cool-jquery-plugins-2011

A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.

37. jQuery Link Preview

Link-preview-new-cool-jquery-plugins-2011

jLinkPreview is a plug-in for jQuery Library which simply allows you to see a link?s preview image before you visit them by just hovering on it. Link preview will appear by your cursor when you hover.

38. My QR Code

Qr-code-new-cool-jquery-plugins-2011

This plugin generate QR code for mobile devices using Google Chart API with jQuery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.

39. jQuery TagBox

Tagbox-new-cool-jquery-plugins-2011

This is a jQuery plugin to help add tags like input in your forms.

40. jRumble

Rumble-new-cool-jquery-plugins-2011

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It?s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

41. MobilyMap

Mobily-map-new-cool-jquery-plugins-2011

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

42. Grid Navigation

Grid-navigation-new-cool-jquery-plugins-2011

jQuery plugin for achieving some neat grid navigation effects.

43. Simple Overlay

Overlay-new-cool-jquery-plugins-2011

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

44. diagonalFade

Diagonal-fade-new-cool-jquery-plugins-2011

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you?re off and away.

45. Smart Spin

Smart-spin-new-cool-jquery-plugins-2011

Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.

46. jQuery Credit Card Validation

Credit-card-new-cool-jquery-plugins-2011

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.

47. Ajax PayPal Cart

Ajax-paypal-new-cool-jquery-plugins-2011

AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.

48. jQuery.folderPreview

Folder-preview-new-cool-jquery-plugins-2011

jQuery.folderPreview is a jQuery plugin that takes a series of images and positions them so that they appear within a folder graphic. This enhances the attractiveness of a browsing UI system, allowing the user to visualize the contents of the folder.

49. jQuery Lifestream

Lifestream-new-cool-jquery-plugins-2011

Show a stream of your online activity with jQuery

50. QuoVolver

Quovolver-new-cool-jquery-plugins-2011

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

30 Of The Most Useful Google Products You Should Consider Using Daily

google | News | online | products | tools | Web Design | webdesign 0 No Comments

Most of us are using Google and its services everyday. Their search engine, Gmail and Youtube are some the most popular Google products. But how many of you knew that Google has, for example, a tool for creating charts? And if you knew, were you actually using it?

Google has dozens of undiscovered, yet excellent products, people don?t know about. In Google Labs itself you can find plenty of useful tools and products for web designers and developers. Furthermore all Google services are free to use and that makes them appealing alternatives to paid products of a similar nature. For example, Google Docs can be a great alternative for Microsoft Office since it?s free, light and easy to use. This article presents 30 useful, practical and smashing products, tools and services from Google that you should consider using daily.

1. News

News-google-products-didnt-know-about

Google News is a computer-generated news site that aggregates headlines from news sources worldwide, groups similar stories together and displays them according to each reader?s personalized interests. The articles are selected and ranked by computers that evaluate, among other things, how often and on what sites a story appears online.

2. Reader

Reader-google-products-didnt-know-about

Google Reader constantly checks your favorite news sites and blogs for new content. Whether a site updates daily or monthly, you can be sure that you won?t miss a thing. With your Google Reader public page, you can share your favorite items with your friends, simply by sending them to relevant links.

3. Bookmarks

Bookmarks-google-products-didnt-know-about

With Google Bookmarks, you can save shortcuts to your favorite webpages and navigate to them in seconds. Unlike browser bookmarks that are stored on a single computer, Google bookmarks are stored in your Google Account. This means you can access them from any computer with an internet connection.

4. Alerts

Alerts-google-products-didnt-know-about

Google Alerts are email updates of the latest relevant Google results (web, news, etc.) based on your choice of query or topic. Enter the topic you wish to monitor, then click preview to see the type of results you?ll receive.

5. Sites

Sites-google-products-didnt-know-about

Google Sites is a free and easy way to create and share web pages. With Google Sites you can easily create rich web pages, collect all your info in one place and control who can view and edit it. You don?t need any knowledge of HTML and it?s free to use.

6. Blog Search

Blog-search-google-products-didnt-know-about

Blog Search is Google search technology focused on blogs. Blog Search helps users to explore the blogging universe more effectively, and perhaps inspire many to join the revolution themselves. Whether you?re looking for Harry Potter reviews, political commentary, summer salad recipes or anything else, Blog Search enables you to find out what people are saying on any subject of your choice.

7. Trends

Trends-google-products-didnt-know-about

With Google Trends, you can compare the world?s interest in your favorite topics. Enter up to five topics and see how often they?ve been searched on Google over time. Google Trends also shows how frequently your topics have appeared in Google News stories, and in which geographic regions people have searched for them most.

8. Gmail Labs

Gmail-labs-google-products-didnt-know-about

Gmail Labs is a testing ground for experimental features that aren?t quite ready for primetime. While you may find some awesome stuff there, you have to keep in mind that these features can break at any time or disappear altogether. However they may work so well that they graduate and become regular features.

9. PubSubHubhub

Pub-subhubhub-google-products-didnt-know-about

PubSubHubbub is a simple, open, server-to-server publish/subscribe protocol as an extension to Atom and RSS. Parties speaking the PubSubHubbub protocol can get near-instant notifications via WebHook callbacks when a feed they are interested in is updated.

10. Contacts

Contacts-google-products-didnt-know-about

Google Contacts is a place to import, store and view all of the contact information that?s important to you. You can also create your own groups of contacts to easily email many people at once.

11. Knol

Knol-google-products-didnt-know-about

Knol is a Google project that aims to include user-written articles on a range of topics. Knol allows you to communicate, collaborate and share your knowledge with the world.

12. Moderator

Moderator-google-products-didnt-know-about

Google Moderator is a tool that allows distributed communities to submit and vote on questions for talks, presentations and events. Suggested questions as well as user votes are seen in real-time.

13. Tasks

Tasks-google-products-didnt-know-about

With Google Tasks you can add new tasks, set due dates or add notes, and (most satisfyingly) check them off as you?re done. Your task list stays up to date no matter how you access it. It?s a simple list that?s with you everywhere you go. You can access Google Tasks from your Google Mobile, Gmail, Calendar or iGoogle.

14. Docs

Docs-google-products-didnt-know-about

With Google Docs you can create and share your work online and access your documents from anywhere. Manage documents, spreadsheets, presentations, surveys, and more all in one easy to use productivity suite. What?s handy you can embed your created forms and use them in websites.

15. Checkout

Checkout-google-products-didnt-know-about

Google Checkout allows buyers in over 140 countries to purchase goods and services using a credit or debit card through our fast, secure checkout process. Google Checkout also helps you increase sales with the Google Checkout badge that can be displayed on your AdWords ads and Product Search listings.

16. Fusion Tables

Fusion-tables-google-products-didnt-know-about

Google Fusion Tables is a modern data management and publishing web application that makes it easy to host, manage, collaborate on, visualize, and publish data tables online. There?s also a gadget that that helps you create animated flash charts & graphs for your web pages, blogs & Google Pages.

17. Double Click

Double-click-google-products-didnt-know-about

Google?s DoubleClick products provide ad management and ad serving solutions to companies that buy, create or sell online advertising. The world?s top marketers, publishers, ad networks and agencies use DoubleClick products as the foundation for their online advertising businesses. With deep expertise in ad serving, media planning, search management, rich media, video and mobile, our DoubleClick products help customers execute their digital media strategy more effectively.

18. Art Project

Art-project-google-products-didnt-know-about

With Google Art Project you can explore museums from around the world, discover and view hundreds of artworks at incredible zoom levels, and even create and share your own collection of masterpieces.

19. Shopper

Shopper-google-products-didnt-know-about

Google Shopper helps you find information on millions of products. Google Shopper recognizes products by cover art, barcode, voice and text search. You can find local and online prices, reviews, specifications, videos, and more to help you make the best purchasing decision. With one click you can save items to your shopping list and share with your friends.

20. Voice Actions

Voice-actions-google-products-didnt-know-about

Voice Actions for Android lets you control your phone using your voice. Call contacts and businesses, send messages, browse the web, and complete common tasks. You can do pretty much anything with it ? send simple text messages or get directions.

21. Code Search

Code-search-google-products-didnt-know-about

Google Code Search helps you find function definitions and sample code by giving you one place to search publicly accessible source code hosted on the Internet. With Google Code Search, you can use regular expressions to search more precisely, restrict your search by language, license or filename and view the source file with links back to the entire package and the webpage where it came from.

22. Code Labs

Code-labs-google-products-didnt-know-about

In Google Code Labs, you?ll find developer products that are experimental. Some of these will one day graduate out of labs, others may remain experimental or even be shut down. That?s what a lab is for. Likewise, graduating from Google Code Labs is a big step that indicates our long-term commitment to that product.

23. Webmaster Tools

Webmaster-tools-google-products-didnt-know-about

Google Webmaster Tools provides a free and easy way to make your website more Google friendly. With webmaster Tools you can see how Google crawls, indexes and ranks your website, see how many people found your site in search results, and how many people clicked on it and much more.

24. Browser Size

Browser-size-google-products-didnt-know-about

Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the ?90%? contour means that 90% of people visiting Google have their browser window open to at least this size or larger.

25. Page Speed

Page-speed-google-products-didnt-know-about

Page Speed Online analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

26. Web Toolkit

Web-toolkit-google-products-didnt-know-about

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.

27. reCAPTCHA

Recaptcha-google-products-didnt-know-about

reCAPTCHA is a free CAPTCHA service that protects your site against spam, malicious registrations and other forms of attacks where computers try to disguise themselves as a human; a CAPTCHA is a Completely Automated Public Turing test to tell Computers and Human Apart. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc

28. Web Elements

Web-elements-google-products-didnt-know-about

Google Web Elements allow you to easily add your favorite Google products to your website. It?s a great alternative if you don?t want to create your own search engine, for instance.

29. Installable Web Apps

Installable-web-apps-google-products-didnt-know-about

Installable web apps are a way of making Google Chrome treat certain websites like apps. People can find installable web apps using the Chrome Web Store. Many installable web apps are hosted apps?normal websites with a bit of extra metadata. You can build and deploy hosted apps exactly as you would build and deploy any web app, using any server-side or client-side technologies you like.

30. Dashboard

Dashboard-google-products-didnt-know-about

Google Dashboard is an online tool that allows Google Account holders to view all their personal information Google is storing on their servers. It?s pretty handy to manage all your Google service accounts at one place and keep them up to date.

Discover more

There are actually many more products, especially for you designers and developers. Like I mentioned before, Google has a great number of lesser known, yet powerful, development and coding tools. Listing them all would be useless, however there?s no reason why you shouldn?t check them out yourself. Here are some websites where you can learn about Google products and their features.