Friday, November 20, 2009

50+ Great Tools for Tracking your Website Traffic

These tools will help you to better understand your website traffic, analyze and monitor all the visitors on your website. You will get access to huge information about your site’s audience. These tool will give you a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more about your website visitors.

Web Traffic Visualization

clicktrack

ClickTracks offers intuitive, insightful analysis of your web site. It shows you campaigns, site navigation patterns, PPC, SEO and ROI stats instantly. It is a web analytics program that uses a radically different architecture, making it easy for marketers to perform desktop datamining activities that are difficult or impossible to implement using traditional web analysis methods. Clicktracks includes overlaid navigation view, PDF and Excel report export, parameter and cookie stats, tabular campaign report, internal search analysis, visitor segmentation with labels, keyword ranking report, E-mail campaign tracking, geographic location report, and more.

Crazy Egg is a tool to supplement your analytics with stunning visuals and actionable data. his program is for people who want more ad revenue, for those who care what visitors do, or need to make improvements. With this program you can create tests to figure out what people are doing on your website. Get a picture of where people clicked on your site. find out where people click based upon the things like: Top 15 Referrers, Search Terms, Operating System, Browser, etc. Share data with people who matter to you. Clients, bosses, imaginary friends, and people you are trying to sell ad space to.

Indextools provides e-business leaders accurate, insightful and timely intelligence about the effectiveness of their Web efforts, thereby helping them to increase sales, reduce marketing costs and provide a higher level of service to their customers and partners. IndexTools specializes in delivering on-demand web analytics solutions to the enterprise and SME market.

Intellitracker is the smart way to drive your business. It redefines web analytics and delivers interactive business intelligence to the heart of your business.

VisitorVille applies video game principles to help you easily visualize and better understand your web site traffic statistics.

Blog and RSS Feed Analysis

mint

Feedburner is the leading provider of media distribution and audience engagement services for blogs and RSS feeds. Its Web-based tools help bloggers, podcasters and commercial publishers promote, deliver and profit from their content on the Web.

MeasureMap helps you understand what people do at your blog, and what influence you are having on the world.

Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages and searches can all be taken in at a glance on Mint’s flexible dashboard.

Performancing is a home for professional bloggers. A place where those that want to make money from their blogs can learn, and perfect the art of making a living from weblogging.

Pheedo’s FeedPowered advertising platform converts your RSS feeds into rich, dynamically updating advertising that engages your audience. Leverage your existing RSS assets to extend your brand, drive traffic, and acquire new feed subscribers. Pheedo retrieves your RSS feed several times an hour and updates your FeedPowered advertisements with any newly published items. Great for time-sensitive content and frequently updated offers.

Technorati is a site that measures the popularity of blogs based on the number of people that have “favorited” them using the service.

Market Research Data and Site Rankings

compete

Alexa provides the statistics for all of the Internet. It lets you compare your blog to another one.

Compete provides information on every site on the Internet including site traffic history and competitive analytics; a site specific trust assessment; and a list of all available promotions.

comScore is a global Internet information provider. It maintains massive proprietary databases that provide a continuous, real-time measurement of the myriad ways in which the Internet is used and the wide variety of activities that are occurring online.

Hitwise online competitive intelligence service provides daily insights on how 25 million people interact with over 1 million web sites in 160+ industries. Its unique, global network of Internet usage data is integrated into the user friendly service, helping you better plan, implement and report on your online branding, search marketing, content strategies and online partnerships.

Nielsen//NetRatings offers web analytics package for you to be able to compare your site with others in your industry. Produces widely followed research reports in dozens of different Web verticals.

Analytics Software Packages

deepmetrix

Google Analytics helps you learn even more about where your visitors come from and how they interact with your site. It makes it easy to improve your results online. Write better ads, strengthen your marketing initiatives, and create higher-converting web sites. Google Analytics is free to all advertisers, publishers, and site owners.

Site Meter’s comprehensive real time website tracking and counter tools give you instant access to vital information and data about your sites audience. With the detailed reporting you’ll have a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more.

WebSTAT makes Web analytics easy and cost-effective. Its hosted analytics software tracks and stores web statistics for businesses and non-profit organizations of all sizes. You don’t need thousands of dollars to get a good web traffic analysis package.

Hitslink offers a Professional and Enterprise version of their web-based real-time reporting package. It offers a conversion tracking of pay-per-click campaigns. You can track user definable events, such as, promotions and downloads as well on your site.

iPerceptions provides analytic solutions looking at customer behavior both online and off. It helps you discover the issues that matter most to the customers.You will know: what changes to the site will enhance your visitor’s level of satisfaction , strengths and weaknesses of your visitor’s experience, who, when, and why visitors are coming to your site.

WebTrends enables you to provide your visitors with the most engaging experience possible. Measure and test all aspects of the online experience from marketing to site content and usability—all of which increase visitor engagement and conversion rates. With functional reporting for each department, from marketing to merchandising to business analysis, you can answer the questions that are most important to the overall business as well as each department.

imWare tools suite is a software-as-a-service package that helps instantly add interactivity and web analytics to content rich web sites. Hundreds of customers have simplified interactivity and web analytics on their sites by deploying imWare. It is comprised of four tools and an accompanying web analytics package. All tools are hosted by Clickability and are simple to deploy.

Clickfoxs patented, proven software enables companies to transform existing customer data into true, objective insight by showing customers’ step-by-step behavior within interactive systems and across the enterprise. ClickFox can translate interactions from multiple service touchpoints into an intuitive, visual map, revealing quickly and easily what customers actually do and why, so that companies can align customer needs with their business objectives.

Clickstream is a fully featured ASP delivered web analytics solution provided by Clickstream in conjunction with its partners. The automation and elimination of tagging inherent in the Datasherpa Platform enables the delivery of enterprise analytics out of the box with virtually no setup or maintenance costs. For the first time hosting providers are able to deliver enterprise level functionality at a minimal cost, thereby creating a significant new revenue stream.
Datasherpa Web Analytics can be configured for different levels of service depending on the hosting provider’s needs and customer segmentation. The solution can be deployed virtually or on premise.

Coremetrics a company that provides most accurate and complete record of visitor behavior—capturing every click of every visitor over time, and storing them in Coremetrics’ LIVE (Lifetime Individual Visitor Experience) Profiles secure database.

DeepMetrix provides a web analytics solution. Get campaign tracking, conversion, ROI, visitor segmentation and commerce, plus powerhouse features like CRM, data mining and A/B testing.
For end-to-end website tracking, LiveSTATS.BIZ delivers more for less. The proof is in the feature set, and the price will have you wondering why other solutions cost so much.

Fireclick makes Web analytics easy through a hosted application service that automatically gathers and stores data for online businesses. No set-up fee. No training fee. No expensive consulting required. To report, present, and share the analysis of data, Fireclick provides a comprehensive suite of tools unmatched in the industry. Fireclick provides integration of Web analytics with paid search engines, e-mail providers, affiliate programs and more in order to provide a consolidated view of all site activity.

MetriServe provides all the web statistics and web analytics tools you need to find out in real-time who your visitors are, where they are coming from and how they are using your web site. Use this valuable knowledge to sell more products and services and to improve your advertising campaigns.

Moniforce‘ s webSensor Enterprise is a high-quality web analytics solution that provides insight into your website visitors’ behaviour. You can immediately work with the results from webSensor Enterprise. You know exactly where to make changes that will attract more visitors, make sure visitors return more often,increase the conversion rate from visitor to customer , improve the effect of online marketing campaigns.

Mtracking’s ASP web analysis service gives accurate real time reports on the marketing performance of your web site, e-marketing and online campaigns.

Nedstat enable you to improve the effectiveness and profitability of your online communication and business. It makes website analytics straightforward and accessible. Nedstat offers a wide range of reporting possibilities on campaigns, content and conversion.

SPSS offers software and solutions that help organizations direct and automate decisions to meet their goals and achieve measurable competitive advantage.

Omniture provides organizations with actionable, real-time intelligence regarding their online strategies and marketing initiatives. Omniture helps organizations quickly identify and understand the most profitable paths through their Web sites, where visitors are dropping off, what’s driving critical success events, and how different segments of visitors interact with the Web site.

OneStat.com -provides different web analytic solutuions. With instant access to dozens of live interactive reports, it helps to improve the effectiveness of your online and offline marketing initiatives.

Optimal IQ offers product for monitoring click fraud.

Quova protects your business against online fraud by verifying user locations. It increases your revenues and improves user experience with geographically targeted online marketing.

SiteClarity translates complex data into a clear and actionable format that presents multiple layers of insight into online customer behavior. As an enterprise tracking and reporting solution, SiteClarity delivers a centralized solution across all operational areas including marketing, site optimization, and customer retention. Unlike other solutions, SiteClarity tailors its reports and services to meet your specific business needs. Focused reporting packages and power administration tools provide a deeper understanding of online customers to re-define and optimize online strategies.

StatCounter is a free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats. Insert a simple piece of our code on your web page or blog and you will be able to analyze and monitor all the visitors to your website in real-time.

With WebAbacus software, you can find out which areas of your site are the most productive; understand the true effectiveness of your marketing campaigns; work out which products are most attractive to different customer segments or discover who is reading your information and what they’re doing with it. More importantly you can also find out out what isn’t working, together with the best way to put it right.

WebtraffIQ is a web analytics agency, providing a complete campaign tracking platform. This enables our clients to see how various online and offline marketing techniques are working, in effect creating a rich picture of a web site’s activities.

Maximine’s High-Performance Site Analytics(HPSA) solution is explicitly designed to address the demanding challenges of today’s mission critical web environments. As sites become increasingly large, complex and dynamic, compounded by accelerating growth in the number of user-contributors, MAXAMINE produces the solution that delivers all three performance imperatives required for enterprise business success: coherent solution that provides maximum cost-efficiency, flexibility and analytic capacity; fast implementation and rapid customization with dynamic on-the-fly search and query capabilities, quality control and reporting.

Labels:



Thursday, November 19, 2009

100 Essential Firefox Add-Ons for Librarians

Firefox is an incredibly flexible browser that has proven popular among many Internet users. And as libraries become more web savvy, librarians often find themselves adopting the Firefox browser. If you're one of those librarians, check out our collection of awesome tools you can add on to Firefox. If you're not, take a look at everything you're missing out on.

Communication

Stay in touch with patrons, students, coworkers, and the community with these add-ons.

  1. Twitterbar: Tweet from your browser's address bar and share useful links using this add-on.
  2. Webmail Notifier: Get notified about unread emails with this add-on.
  3. Meebo: This add-on lets you put all of your buddy lists in one convenient place in your browser.
  4. FoxLingo: This handy add-on will translate web pages and searches automatically.
  5. Shareaholic: Using Shareaholic, you can easily share urls, twitters, bookmarks, and so much more.
  6. Facebook Toolbar: Supercharge your library's Facebook experience with this ultraconvenient toolbar.
  7. Digg This!: Digg stories from the right-click menu with this add-on.
  8. StumbleUpon: Browse reviewed sites and share your favorites with this add-on.
  9. ScribeFire: With this blog editing add-on, you can post without ever leaving Firefox.
  10. TinyURL Creator: Create tiny URLs quick and easy using this add-on.
  11. Email This!: Using this add-on, you'll save time by being able to send highlighted text and links straight from your browser.
  12. WordLearner toolbar: Using this toolbar, you'll be able to improve your foreign language vocabulary.

Organization

Keep all of your browser work neat and clean with these add-ons that offer organization.

  1. Colorful Tabs: This add-on will make every tab a different color so that you can distinguish between them more easily.
  2. Open IT Online: Open your documents and images right in Firefox using this add-on.
  3. PermaTabs: Using PermaTabs, you'll have tabs that automatically open every time you launch Firefox.
  4. ReminderFox: Save your memory and sanity with this add-on that sends you date-based reminders and to-do list items.
  5. Morning Coffee: With this add-on, you can open up pre-set web pages for each day of the week.
  6. Vertigo: With Vertigo, you can get more screen size by putting tabs on the side.
  7. AutoFill Forms: Use this add-on to have forms automatically filled in for you.

Research & Citation

Corral your notes, get help with answers, and more, all with these useful add-ons.

  1. Clipmarks: Capture important bits from around the web using Clipmarks.
  2. Google Notebook: Using Google Notebook, you can take notes right in your browser.
  3. Fleck: Fleck allows you to add notes and comments on web pages for yourself and others.
  4. Googlepedia: When you use Googlepedia, every time you search with Google, you'll see a relevant Wikipedia right alongside your results.
  5. Taboo: If you keep lots of tabs open for reference later, use this add-on that allows you to save them elsewhere.
  6. Endnote: Endnote allows you to easily download a citation from Firefox.
  7. Copy Plain Text: Using this add-on, you can turn all web page text into plain unformatted text.
  8. Yoono: Start a scrapbook of resources, or just see what others have discovered by using this add-on.
  9. Screengrab: Save pages for archiving and sharing with this add-on that will save entire pages or portions of a page as images.
  10. Answers: Get answers as fast as one click using this add-on.
  11. Fireshot: Take snapshots of pages, annotate them, and save them in a number of different formats with this add-on.
  12. Who is this Person?: Using this add-on, you can highlight any name on a web page and find their information on Wikipedia, LinkedIn, IMDB, and lots more.
  13. Surf Canyon Search Engine Assistant: With this add-on, you can find what you're looking for faster.
  14. Hyperwords for Firefox: Get access to references, searches, conversions, translations, and lots more using Hyperwords.
  15. 1-Click Answers: You can click any word to get definitions, facts, and more using this add-on.
  16. Dictionary Search: This add-on looks up selected words in an online dictionary.

Bookmarking

These add-ons will make it easy for you to stay on top of useful web links.

  1. del.icio.us Bookmarks: Put your del.icio.us bookmarks right in your browser with this add-on.
  2. Bookmarks LinkChecker: Find broken links in your bookmarks with this checker.
  3. Zotero: Use Zotero to store citations and notes in Firefox.
  4. Column Bookmarks: This add-on allows you to view your bookmark list in a column and avoid excessive scrolling.
  5. WebMynd: Record your visual browsing history using WebMynd.
  6. Bookmark Duplicate Detector: With this add-on, your bookmarks will be more organized than ever.
  7. Copy URL+: With Copy URL+, you can copy a site's URL, title, and lots more.
  8. MyPortal: MyPortal will create a page with all of your bookmarks.
  9. Enhanced Bookmark Search: This add-on makes the bookmark search much easier to work with.

Development

If you're in charge of maintaining your library's website, you'll get lots of use out of these add-ons.

  1. Firebug: Work on CSS, HTML and JavaScript in your browser with Firebug.
  2. Web Developer: With this add-on, you'll get a toolbar to help you validate code, edit images, and lots more.
  3. Yslow: Find out why the page you're on is slow and with Yslow.
  4. CSS Viewer: Use this add-on to view CSS information in your browser.
  5. Fire Sizer: See how your pages look in different dimensions using this development add-on.

Media

Take advantage of all that music, video, and other media has to offer, right from your Firefox browser.

  1. FoxSaver: This add-on will show digital photos when your browser goes idle, so you can display fun vacation photos or even your library's logo.
  2. FoxyTunes: You can listen to music, check out lyrics, and more, all with this add-on.
  3. Download Embedded: With this add-on, you can download all embedded files on a web page, including animations, music, and more.

Search

Turn Firefox into a lean, mean, searching machine with the help of these add-ons.

  1. CustomizeGoogle: Enhance Google search results with links to Yahoo, MSN, and more, and remove unwanted items like spam using CustomizeGoogle.
  2. GoogleTabs: This add-on will open up the first 10 search results in their own tabs.
  3. Groowe Search Toolbar: This toolbar bundles functions from lots of diferent search engines, including Google, Wikipedia, and del.icio.us.
  4. SEO for Firefox: With this add-on, all of your searches will show Google page rank, age, and more under results.
  5. Add to Search Bar: Put the search functionality of any web page on your browser bar with this add-on.
  6. GoogleEnhancer: GoogleEnhancer offers icons, numbers, and highlighting embedded in Google search results.
  7. Interclue: With this add-on's tooltip windows, you'll get extra information, previews, and loads more.
  8. Google Advanced Operations Toolbar: Get shortcuts to some of Google's advanced search functions with this toolbar.
  9. Googlebar Lite: This search toolbar adds 12 different search types and more.

Supercharged Browsing

If you spend a lot of time using Firefox, you're sure to appreciate all that these add-ons have to offer.

  1. FasterFox: Make your Firefox experience faster using this add-on.
  2. Snap Shots for Firefox: Use this add-on to get a preview of any website when you hold your mouse over the link.
  3. IE Tab: Embed Internet Explorer in your Firefox browser using this add-on.
  4. iMacros for Firefox: With this add-on, you can record and replay repetitious work performed on Firefox.
  5. FireGestures: Using FireGestures, you can customize mouse gestures to execute a variety of commands.
  6. SessionSaver: Use Session Saver to make sure you never lose your previous tabs.
  7. PDF Download: Open up PDF documents as HTML and save yourself some time using this add-on.
  8. Faviconize Tab: This add-on reduces your tabs down to favicons so that more will fit.
  9. Flashblock: Keep annoying Flash animations at bay with Flashblock.
  10. BlueOrganizer: This add-on enhances the content of web pages by turning addresses into Google maps links, book reviews into Amazon Wish List entries, and lots of other functions.
  11. Feed Sidebar: Stay on top of your feeds right in your browser using Feed Sidebar.
  12. Snap Links: With Snap Links, you can draw a box around links you'd like to open.
  13. Tab Scope: Using this add-on, you can hover over a tab for a preview of the web page.
  14. Google Preview: See thumbnails of sites you're looking up in Google search.
  15. DownThemAll!: This download manager and accelerator will supercharge your browsing experience.
  16. Nuke Anything: Hide just about anything via right-click with Nuke Anything.
  17. URL Fixer: If you're constantly making URL typos, check out this add-on that will fix them for you.

Privacy & Security

Save yourself from the evils of viruses, phishing, and other Internet maladies by using these add-ons.

  1. NoScript: NoScript will help you prevent JavaScript and other executable content from running without your permission.
  2. Password Exporter: Keep your passwords safe using this add-on.
  3. BlockSite: Prevent yourself from accidentally visiting malicious sites using BlockSite.
  4. Add N Edit Cookies: Add and edit session and saved cookies with this add-on.
  5. Dr. Web Anti-Virus Link Checker: With Dr. Web's add-on, you can check links for viruses before you visit them.
  6. BugMeNot: Avoid having to register for information with this add-on.
  7. TabRenamizer: Keep your tab titles private using TabRenamizer.
  8. Adblock Plus: Get rid of ads on web pages with Adblock Plus.
  9. SiteAdvisor: Find out if a site is safe or not using SiteAdvisor.
  10. SplitLink: Using SplitLink, you'll be able to see the true URL you're visiting.
  11. TrackMeNot: Use TrackMeNot to protect yourself against search data profiling.
  12. FoxyProxy: With FoxyProxy, you'll enjoy advanced proxy management.
  13. Sxipper: Let Sxipper accurately fill in forms, passwords, and more for you.

Patrons

These add-ons will help make Firefox more patron-friendly.

  1. LibX: LibX allows you to provide library-specific searches right in the Firefox browser.
  2. Glubble Family Edition: With this parental control suite, you can ensure that browsing stays appropriate for elementary school age children.
  3. Print Preview: Cut down on mistakes and wasted paper by letting patrons preview their prints in Firefox.
  4. Public Fox: Make Firefox a public web browser and control preferences, add-ons and other options.
  5. Netcraft Toolbar: Block malicious sites using the Netcraft Toolbar.
  6. Menu Editor: Cut down on toolbar menus that patrons don't need to use with this add-on.
  7. Greasemonkey: Control the way webpages are presented using Greasemonkey.
  8. WOT: This useful add-on will warn users about risky websites before visiting them.
  9. Image Zoom: Use Image Zoom to make viewing extremely large photos easier for your patrons.

Labels:



Monday, November 16, 2009

CSS Shorthand Guide

There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way. I’ve found quite some interesting unknown quirky facts about these shorthands…


Background


Backgrounds can be tricky. Nevertheless, effective when condensed correctly. The syntax for declaring the background shorthand values are as follows:


background properties


element
{
background-color: color || #hex || (rgb / % || 0-255);
background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}



Believe it or not, all these properties can be combined into one single background property as follows:


the background shorthand property


element
{
background: #fff url(image.png) no-repeat 20px 100px fixed;
}

The Unknown


Often times developers find themselves wondering What if I leave out this value or that one? How will that effect the design?. Good questions.


By default, the background property will assume the following when you do not declare each value of the properties.


default background property values


element
{
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

Lesson learned: be careful on what you don’t declare. By chosing to not declare a value on a shorthand property, you are explicitly declaring the above default settings. For example, let’s look at the following example.


background shorthand example (unexplicit)


element
{
background:red url(image.png);
}

This would be the same as declaring the following values:


background shorthand example (explicit)


element
{
background:red url(image.png) repeat top left scroll;
}

Font


Font is perhaps the trickiest. However, it follows the same rules as the background shorthand property. All that you do not declare will have unexplicit values. Here is the font shorthand specification:


font properties


element
{
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";
}

The default values for the font shorthand property are as follows:


default font property values


element
{
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}

And of course without any further ado. The font shorthand property syntax:


the font shorthand property


element
{
font:normal normal normal inhert/ normal inherit;
}

Here is where it gets tricky. The fact that font-style, font-variant, and font-weight all come “normal” out of the box, you may need to pay a little more close attention when you’re styling elements that come with default browser styles like <h1> - <h6> or <strong> and <em>. For example, styling the strong element:


strong element styled with font


strong
{
font:12px verdana;
}

By writing the above into your style sheet, you will be unexplicitly removing the font-weight:bold default browser style that is applied to strong elements.


Last but not least (for -font- that is), a real world example:


font shorthand property example (unexplicit)


p
{
font:bold 1em/1.2em georgia,"times new roman",serif;
}

This would be the same as declaring the following properties:


the font shorthand property (explicit)


p
{
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,"times new roman",serif;
}

Border


Let’s not waste time discussing the warnings. The same rules apply from here on out. This is all you need to know


border properties


element
{
border-width: number+unit;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}

becomes this:


the border shorthand propertie


element
{
border: 4px groove linen
}

Don’t ask me how that would look. The fact that “linen” is in there, things could get scary. Nevermind the matter, here is where ‘border’ gets funny.


border examples


p
{
border:solid blue;
}
/* will create a '3px' solid blue border... who knows where 3px came from?? */

p
{
border:5px solid;
}
/* will create 5px solid 'black' border... default must be black?? */

p
{
border:dashed;
}
/* will create a '3px' dashed 'black' border... 3px black lines unite! */

p
{
border:10px red;
}

p
{
border:10px;
}

p
{
border:red;
} /* these just don't even work */

One thing to specially take note about declaring a border without a color, the default will be ‘black’ unless otherwise noted through an explicit or inherited ‘color’ property. See the following examples:


border color examples


p
{
border:dotted;
color:red;
}

/* will create a 3px dotted red border */ /* ----------------------------- */


body
{
color:blue;
}

body p
{
border:5px solid;
}
/* will create a 5px solid blue border */ /* ----------------------------- */

Get it? Got it. Good! (isn’t that a song?) Anyway. On with this


Margin and Padding


These are by far the easiest. Just think about the hands of a clock starting at noon, and follow the hour. For the sake of brevity, we’ll be working with margin (since it’s a shorter word). So for all cases of margin, the same rules apply to padding.


margin properties.


element
{
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}

… combined into the margin superpowers:


the margin shorthand property


/* top right bottom left */  element {    margin: auto auto auto auto;  }

Of course, you may declare your margin with one, two, three, or four values. Here is how each scenario will be played out:


margin fun


/* adds a 10px margin to all four sides */ 

element
{
margin:10px;
}
/* adds a 20px margin to top and bottom and a 5px margin to left and right */


element
{
margin:20px 5px;
}

/* adds a 50px margin to top and a 10px margin to left and right
and a 300px margin to bottom */


element
{
margin:50px 10px 300px;
}

Understood? Let’s keep going. This is fun isn’t it! (whatever, you like it).


Outline


Quite frankly, this property has dropped off the existence of the design radar. Mainly because of lack of browsers supporting this CSS 2.1 standard (yep, it’s an actual property), but nonetheless, it too has a shorthand property. This property follows the exact same (or same exact - they mean the same thing) specification as the ‘border’ shorthand property. But, for purposes of this being a Guide, it must be here. So:


outline properties


element
{
outline-width: number+unit;
outline-style: (numerous);
outline-color: color || #hex || (rgb / % || 0-255);
}

Outline written as shorthand:


outline shorthand property


element
{
outline:3px dotted gray;
}

For purposes of trying to keep things from repeating, please see the border shorthand section on this document to understand the odds, ends, and quirks of the outline property.


List-style


This is it. The last one. It’s rarely used frequently. Hence rarely. That is why I kept it until the end (sorry, the best was first in my own opinion). Here is the list-style properties:


list-style properties


element
{
list-style-type: (numerous);
list-style-position:inside || outside;
list-style-image:url(image.png);
}

Here is the defaults:


list-style property defaults


element
{
list-style-type:disc;
list-style-position:outside;
list-style-image:none;
}

And for the sake of final brevity. Here is a simple example:


list-style shorthand property example


ul li
{
list-style:square inside url(image.png);
}

/* in this particular case if image.png is not available then a square will be
provided as secondary */

Labels:



Thursday, November 12, 2009

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

1.7 reasons why you really should learn jQuery

7-reasons-why-learn-jquery

2. jQuery Crash Course

Introduction to Jquery, further reading and basics.

jquery-crash-course-tutorial

Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!

jquery-for-absolute-beginners-video-tutorials

4. 10 jQuery Tutorials for Designers by WebDesignerWall

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

jquery-tutorials-for-designers

5.4 Jquery Easy Tips And Tricks Tutorial

jquery-easy-tricks-tutorial

6.jQuery Essentials Presentation at MinneWebCon (102 pages)

Very well written jquery essentials presentation. Really worth the time.

jquery-essentials-presenation

7.12 Useful and Handy jQuery Tips and Tricks

ueness-useful-handy-jquery-tips-tutorials

8.Improve your jQuery – 25 excellent tips

Great tips, even some intermediate users could now know few of these.

25-excellent-tips-jquery-tutorial

9.Build An Incredible Login Form With jQuery

In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.

sliding-panel-login-form-jquery-tutorial

Demo

10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast

photo-admin-site-jquery-php-tutorial

11.Building a jQuery-Powered Tag-Cloud

jquery-tag-cloud-tutorial

12.Wordpress Sidebar Turned Apple-Flashy Using jQuery UI

This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.

wordpress-sidebar-apple-flashy-tutorial-jquery

Demo

13.How to Load In and Animate Content with jQuery

animate-content-with-jquery

Demo

14.Create a Slick Tabbed Content Area using CSS & jQuery

slick-tabbed-content-area-tutorial-jquery

Demo

15.Styling Buttons and Toolbars with the jQuery UI CSS Framework

Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

styling-buttons-and-toolbars-jquery-tutorial

Demo

16.jQuery Slideshows With the Cycle Plugin

The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.

jquery-slideshow-cycle-plugin-tutorial

Demo

17. InnerFade with JQuery

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.

innerfade-with-jquery-tutorial

Demo

18.Creating a Dynamic Poll with jQuery and PHP

jquery-poll-php-tutorial

Demo

19.Setting Equal Heights with jQuery

setting-equal-heights-jquery-tutorial

Demo

20.jQuery Tools: Scrollable

Scroll your HTML with eye candy

scrollable-jquery-tutorial

Demo

21.jQuery Tools: Tooltips

tooltip-jquery-tools-tutorial

Demo

22.jQuery Tools: Overlay

Yet another, beautiful image displaying way – similar to popular Lightbox, but this one seems to be more elegant.

overlay-jquery-tools-tutorial

Demo

23.jQuery Tools: Expose

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.

expose-jquery-tools-tutorial

Demo

24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast

amazing-music-player-jquery-tutorial

Demo

25.Create an Amazon Books Widget with jQuery and XML

amazon-books-widget-jquery-tutorial

Demo

26.Creating a “Filterable” Portfolio with jQuery

This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.

filterable-jquery-portfolio-tutorial

Demo

27. jQuery Hover Sub Tag Cloud

jquery-sub-tab-cloud-tutorial

Demo

28. How To Build Quick and Simple AJAX Forms with JSON Responses

contact-form-ajax-jquery-tutorial

Demo

29. Simple jQuery Spy Effect

jQuery Spy Effect scrolls the list in a beautiful way.

jquery-spy-effect-tutorial

Demo

30. Slider Gallery Tutorial: Screencast

A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

slider-gallery-jquery-tutorial

Demo

31. Semantic Blockquotes with jQuery

Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.

semantic-blockquotes-jquery-tutorial

32. Jcrop – the jQuery Image Cropping Plugin

jquery-image-cropping-plugin

Demo

33. Horizontal Scrolling Menu made with CSS and jQuery

horizontal-scrolling-menu-jquery-tutorial

Demo

34. jQuery Sequential List Tutorial

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

sequential-list-jquery-tutorial

Demo

35. How easy to create a slide tabbed box using jQuery

howto-slide-tabbed-box

Demo

36. How to Mimic the iGoogle Interface

This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

howto-mimic-igoogle-interface-jquery-tutorial

Demo

37. jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

jgrowl-plugin-tutorial

38. Creating accessible charts using canvas and jQuery

accessible-charts-using-jquery-tutorial

Demo

39. jQuery and Google Maps Tutorial

This tutorial will walk you through how to get started using jQuery inside the Google Maps environment.

google-maps-interaction-jquery-tutorial

Demo

40. How To Create An Amazing jQuery Style Switcher

his tutorial will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

style-switcher-jquery-tutorial

Demo

41. How-To: Reddit-style Voting With PHP, MySQL And jQuery

This tutorial will show you how to create a voting system similar to Reddit with jQuery, PHP and MySQL.

reddit-vote-howto-php-mysql-jquery-tutorial

Demo

42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

This tutorial will explain how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.

selecting-styling-external-links-jquery-tutorial

Further Reading, Advanced Tips and Tutorial Sites

43.Official Jquery Tutorial Directory

As first add is obvious, but on their official website you can find many tutorials related to mastering Your Jquery skills even in several different languages.

jquery-tutorial-site

44.LearningJquery

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. They have tutorials for all skill levels, and each entry is categorized by level of difficulty.

learning-jquery-tutorial-website

45.15 Days Of jQuery

Examples and tutorials to help you learn JQuery – it hasn’t been updated for a while, but still a lot of useful articles you’ll find there.

15-days-of-jquery-tutorial-website

46.jQuery for Designers

Learn how easy it is to apply web interaction using jQuery – beautiful tutorials and website, if you still can’t find what you need, you can even request a tutorial.

jquery-for-designers-tutorial-website

47.Ultimate Jquery List

jQuery Ajax tutorials to jQuery UI examples, you’ve found the ultimate list of tutorials and plugins for jQuery! Everything from Ajax file uploaders to RSS feed plugins, all on one of the longest pages you’ll ever scroll.

ultimate-jquery-library

48. Bassistance

This blog is about programming (with focus on web applications and JavaScript), music and other stuff the author happens to write about. It’s also the home of several jQuery plugins.

bassistance-jquery-website

49. Remi Sharp’s Blog

Site with several good tips and articles related to jquery, also the same man behind useful tutorial site – jQueryForDesigners I showcased above.

remi-sharp-blog-jquery-articles

Online jQuery Cheat Sheets

50.VisualJquery 1.2.6

An online cheat sheet and visual reference to Jquery, where you can find Jquery functions well explained, updated to jQuery 1.2.6. version. While playing with Jquery, this website seems to be a very useful place to visit.

visual-jquery-online-cheat-sheet

51.jQuery 1.2 cheatsheet wallpaper

The size of wallpaper is 1280×960, two color variations.

jquery-cheat-sheet-wallpaper

52.jQuery 1.2 Cheat Sheet (*pdf file)

jquery1

53. ColorCharge Jquery CheatSheet

jquery-cheat-sheet-colorcharge

Labels: