Uit onderzoek blijkt dat de goedheiligman wekelijks 73 miljoen euro in het laatje van webwinkeliers strooit.

Blauw Research bekeek voor belangenvereniging Thuiswinkel.org hoe de online omzetten zich in november ontwikkelden in de aanloop naar de komst van de kindervriend.

De Rotterdamse vorsers constateerden dat Nederlanders deze weken tussen de 350 en 400 miljoen euro online uitgeven aan cadeaus.

Door het jaar heen bedraagt de weekomzet bij de ondervraagde groep 53 miljoen euro. Sinds 1 november ligt dat peil echter op 73 miljoen euro, een toename van 38 procent

De sinterklaas periode is daarmee verantwoordelijk voor 6 procent van de omzet van Nederlandse webwinkels. De gezamenlijke omzet komt naar verwachting namelijk op 6 miljard euro uit.

Opvallend is dat de totale detailhandel in Nederland in deze periode, dus ook in de fysieke winkelstraten, juist fors lager ligt. De omzet ligt tussen de 7 en 8 procent lager op 450 miljoen euro. Online maakt daar een kleine tien procent van uit.

Bij het onderzoek zijn leveranciers van diensten, zoals aanbieders van verzekeringen, reizen en tickets, buiten beschouwing gelaten.

De top vijf van online Sinterklaasgeschenken bestaat uit:

1. Kinderkleding
2. Mobiele telefoon
3. MP3-speler
4. Navigatieapparatuur
5. Digitale camera

In de VS stegen de digitale omzetten rondom ‘cyber monday’, wat het begin van de decembermaand markeert, met 5 procent ten opzichte van vorig jaar.

Een jaar na de lancering van het open source webwinkelpakket Magento is er veel belangstelling van ontwikkelaars en winkeliers.

Onder professionele bouwers is het Magento dat de klok slaat. Je komt bijna geen OScommerce meer tegen. Beginnende webwinkeliers komende in hun zoektocht naar de juiste software nog vaak OScommerce tegen, maar niet zelden gaan ze met Magento van start.

Een vergelijkend overzicht op Google Trends bevestigt de vermeende opmars van Magento:

Afgelopen jaar groeide de vraag naar Magento-programmeurs met een factor 13, de vraag naar OScommerce-programmeurs steeg met een factor 5.

Magento werkt net als Red Hat Linux. De software is gratis en wie aanvullende of ondersteunende diensten wil, kan die inkopen.OScommerce, ook open source software, is in zijn fundamenten verouderd. Het is niet geschikt voor deze tijd. Het pakket ontbeert schaalbaarheid, marketingmogelijkheden en is zo rigide dat het aanpassen van templates een grote opgave is.

Jira ICT publiceerde onlangs een integratie van CMS Joomla en e-commercepakket Magento.

Het aantal geregistreerde Magento-gebruikers steeg in vier maanden met 35.000 tot 120.000. De software werd ruim een miljoen keer gedownload.

Het aantal installaties zou een veelvoud daarvan kunnen zijn. Onlangs verscheen er voor grote bedrijf een betaalde versie van Magento. Die kost vanaf 8.900 dollar per jaar en biedt ondernemingen actieve ondersteuning van producent Varien.

• Web based Tools to speed up your web development
• List Of Must Have Addons For Programmers In Web Development

Nonetheless, feel free to suggest any good material you have for your web development! One thing to note, i recommend you to visit List Of Must Have Addons For Programmers In Web Development before reading this list. The list on the programmer side may have some useful tools you will need as a designer too.

Screengab

One of the easiest screen capture addon in Mozilla Firefox. The captured image can either be saved into your hard disk as an image file or you can just captured it into your memory and insert into your favorite image editor and edit the image! Can’t get what you want on your screen? Grab it instead!

Pixel Perfect

Pixel Perfect required Firebug to work.  By toggling the composition on and off, the developer can visually see how many pixels they are off in development.  It saved the last CSS position of your development and compare with the current one. It is something similar to PageDiff just that it is usually used by designers. Great stuff designer must have!

Opera View

Opera View like what it named render the page you are viewing as Opera. This helps you check your design compatibility with Opera. Excellent if you are working on cross browser design which you should.

MeasureIt

Every desinger will agree that MeasureIt is something necessary in your designing cycle. You want to measure something with ruler or with MeasureIt?

IE NetRenderer

Similar to many IE view,tab etc. but this will render the current page to IE view. Very similar to Opera view but just that it is for Internet Explorer.

Font Finder

Saw a font used by some attractive site? Use Font Finder to check out what font is being used on their site! Very easy to use, just right click and select font finder! Best for simplify human being like me!

Firesizer

Firesizer is a plugin you should not miss. There are other plugin that did the same as Firesizer but this is the most simple to use plugin you can find for resizing your browser in different size.  This is best used to check on your design on different browser size. What will happen to it? Better check.

Web developer

Web developer one of the most popular plug-in for Mozilla Firefox! Why? It provides you with all the informatin you need on development in CSS! It provides all the information contains on the web CSS sheet and give you a detail information you need on a particular website. The most awesome feature is the edit CSS which allows you to edit your CSS page on the fly! This is a must have add-on for your Mozilla Firefox if you are in to web design and font end programming.

FireShot

FireShot is similar to ScreenGrab. They both capture browser screen shot. But unlike ScreenGrab, FireShot gives you the ability to edit and insert stuff onto your captured image. Below list the amazing stuff FireShot can do.

• uploaded to FREE public screenshot hosting
• saved to disk (PNG, GIF, JPEG, BMP)
• printed
• copied to clipboard
• e-mailed
• sent to configurable external editor for further processing.

If you are prefer simple and basic function scroll up and click ScreenGrab if you prefer multiple function please click FireShot image. =)

CSSViewer

CSSViewer is a simple CSS view tool for you to view on elements on the page. If you have webdeveloper, this may not be what you want. But to be simple this is quite good.

ColorZilla (25/4/2009)

ColorZilla one of the important design tool i forgotten! This is used to check the color of a particular element in your browser, adjust it and paste it on another program. Great stuff!

Status-bar Scientific Calculator (25/4/2009)

You will need this scientific calculator to help you calculate width and height or some graphic animation. This is something you will find it handle. It allows you to calculate on the browser instead of searching for the calculator on your desktop. We are talking about speed up web development ain’t we? =D

CoolPreview (25/4/2009)

need inspiration? But there are so many links available? Preview it before clicking it then! This way you only see what you like and filter all the bad ones. Perfect for generating ideas and inspiration!

GidFox (29/6/2009)

GridFox Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.

Firebug

Every developers  love Mozilla Firefox for the particular reason that Firebug is there to assist you on your aJax and JavaScript needs. It automatically detect your errors and show a nice error bar below your browser just like this.

Firebug can be use to optimize your codes as it provides you with all the load time of each individual script on the web and many other useful information you used on your script. Firebug also contains a feature that allow you to inspect element changes on the HTML while your code is manipulating the DOM. There are just so many benefits in this application that its a MUST have add-on if you are using Mozilla Firefox for your development.

IE Tab

If you think IE View is not a bad application for testing your site on IE using Mozilla Firefox, you should try IE tab then. It allows you to open a IE browser instead! AWesome! Window update anyone?

Html Validator

Help you debug your HTML structure to check for any error on your HTML. It provides a nice icon to indicate whether your HTML codes are properly written. Furthermore, it also helps validate other pages that you send in via ajax!  This is great for WC3 Validation tools! The addons errors indication are shown below

• errors: HTML errors that Tidy cannot fix or understand.
• warnings: HTML errors that Tidy can fix automatically
• (optional) accessibility warnings: HTML warnings for the 3 priority levels defined in W3c WAI

Add N Edit Cookies

If you deal with cookies  a lot, this is something you must have! It gives you the ability to edit and add cookies on the fly! Especially when you are dealing with server sided scripting or log in page.

FireFTP

This is one of the important addon you should have if you are dealing with server scripting. Imagine clicking left and right between your browser and ftp client and pile up all the different application during your web development. This help development much faster and cleaner.

YSlow

Ever wonder whether your site is optimized? developed by Yahoo group, this addon tells you your website problems and why it is slow! It grade your website and tell you where to improve so that you won’t be lost guessing where to improve on your site to better enhance its peformance. Great stuff for your optimization need.

Live HTTP Headers

another great tool a developer must have. Live HTTP Headers let you view information on the http header LIVE checking out what kind of cookies is being sent to your site, edit request header and even reply an URL! This application usage is as follow

• Help debugging web application.
• See which kind of web server the remote site is using.
• See the cookies sent by remote site.

FirePHP

PHP user must see application! Especially for people who deal with ajax and PHP, this will be useful for you. This will stop you wondering what the heck is happening on your server side when calling on ajax. This small addon of firebug keep a log on firebug console and tell you what is happening on PHP. But this required firebug to be installed and other required too. Nonetheless, this is quite useful. (read up the requirement by clicking on the image of FirePHP above to read it on their development site)

Session Manager

Session Manager saves and restores the state of all windows – either when you want it or automatically at start up and after crashes. Additionally it offers you to reopen (accidentally) closed windows and tabs. If you’re afraid of losing data while browsing – this addon allows you to relax. This is most appropriate when dealing with log in web portal and your script just crush up your browser and required you to login again. Speed up your development.

Total Validator

Performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screen shots using 32 browsers on Windows, Linux, and OS/X. Like it? i do =D

Console

Update on default console on Mozilla Firefox. It provides a better overall error details compare to the default ones on Firefox. Web development must have upgrade.

XML Developer Toolbar

if you deal with a lot of XML, this is an addon that you might want to have. It just speed up the overall procedure of you dealing with XML.

Library Detector

finally, if you haven’t had any chance of dealing with framework library such as dojo, jquery,mootools, etc. i think you should start digging your resources. This addon gives you the information on what library the current view website is using. Quite useful for digging technology!

User Agent Switcher (23/04/2009)

User Agent Switcher is REQUIRED in web development. Especially when your script or deign is catering for different browser. This will definitely help you tons during web development. This means no more switching browser to test your script for cross browser compatibility.

PageDiff (23/04/2009)

What pageDiff does is to compare your pages during web development. You will find this pretty useful when dealing with DOM manipulation.  You can save the page and edit all you want then compare with the version you have previously saved. Pretty useful i must say.

CodeBurner (25/4/2009)

Another Addon for Firebug to make it more powerful. This extension allows you to do a lookup on HTML and CSS element in Firebug! Furthermore, it gives you detailed list of the HTML tags, attributes and CSS that are being used by the element you are inspecting, including browser support. It comes very handy when you don’t remember what worked in what browser or if you need to refresh your memory about an unusual tag or CSS rule. Including links to get further information about a particular element, attribute or style is welcomed too together with the search feature. Great stuff!

FireCookie (25/04/2009)

Another extension for firebug (who need other extension when everyone is aiming at firebug) . It allows you to manage to view cookies using Firebug. Similar to Add n Edit cookie just that this is for Firebug.

JavaScript Deobfuscator (25/4/2009)

Pissed when you can’t view the code being obfuscated by the web master? Try this then! This deobfuscator the code and allow you to view it normally but only activate this when you actually need it as it takes up quite a lot of resources.

FireCookie (19/09/2009)

A very powerful search plugin that allows you to seek for API within second.

Notice i did not provides some of the very famous color detection etc. addon from Firefox. Those will be on other section not under developers. I will place it on web master and designer instead.  So that i can maintained all the great plugin i have been currently utilised. The web designer ones is up at List Of Must Have Addons For Designers In Web Development

Internet is een medium dat veel gebruik maakt van termen die voor veel mensen niet duidelijk zijn. Vandaar dat ik heb gekozen voor een duidelijke uitleg binnen de twee hoofd producten die Moodl bied: webdesign, grafisch ontwerp.

Met de nieuwe site wil ik u beter informeren over ontwikkelingen binnen de (web)design branche en de service die Moodl u te bieden heeft.

Veel leesplezier op moodl.nl!

Met creatieve groet,

Michiel van Ruiten
freelance multimedia designer

Where to find excellent typefaces

• Hoefler & Frere-Jones
  H&FJ works with brand leaders in every sector, developing original typefaces and licensing fonts from its library of nearly 1,000 designs.
• Porchez Typofonderie
  An independent digital type foundry in France, designing, manufacturing and selling high quality typefaces for adventurous digital typographers.
• OurType
  Founded in 2002, OurType is managed by three partners: Fred Smeijers, Corina Cotorobai and Rudy Geeraerts.
• Village
  The union of eleven young type foundries who have decided to go it alone, together.
• P22
  Creates computer typefaces inspired by Art, History, and sometimes Science.
• FontShop
  Around for 16 years, since the dawn of digital type.
• Fonts.com
  Searchable database of more than 150,000 fonts.

The history of logo design

• History of popular logo designs
  Categorised in alphabetical order with a search feature too.
• The Evolution of Tech Company Logos
  How famous logo designs came to be, from Neatorama
• The Evolution of Car Logos
  More historical insights from Neatorama
• Branding Firefox
  A short insight into the history of the Firefox internet browser brand

Logo design trends

• Logo trends in 2009
  From LogoOrange.com. I don’t like these logo trend articles much, and feel that trends are for those who like to waste their money following fashion. But I know they prove popular, so here you are.
• Logo trends in 2008
  Another from LogoOrange.com.
• 2009 trends // 2008 // 2007 // 2006 // 2005 // 2004 // 2003
  Bill Gardner, of LogoLounge, takes us on a trip through trends from the last decade according to the logos that have been uploaded to his website — many thousands.

A selection of logo articles

• 100 unused logos and what they reveal about my design inclinations
  An excellent insight behind the designer by Armin of Speak Up.
• 6 reasons why a logo should cost more than your lunch
  Tara of Graphic Design Blog writes a short but sweet article.
• Logo Notions
  Jeff Fisher’s insightful collection of logo design articles on Creative Latitude.
• Logos with a meaning
  An extra insight into a selection of logos, by Ivan of CreativeBits.
• How many speech bubble logos have you seen lately?
  A fraction of what’s going down out there in Web Bubble Logo Land.
• Logo design guide
  youthedesigner.com offers some stellar advice for designing logos.
• The LogoWorks saga
  A huge collection of articles about the multi-million dollar business, LogoWorks.
• Is your logo design phallic?
  A little logo humour to lighten the mood.

Logo design books

• Marks of Excellence
• Logo by Michael Evamy
• cidoc.net’s corporate identity book list
• Identity Crisis
• LogoLounge 4 // LogoLounge 3 // LogoLounge 2 // LogoLounge
• Tres Logos // Dos Logos // Los Logos
• Decoding Design by Maggie Macnab
• Logo Design Love: A Guide to Creating Iconic Brand Identities, one worth waiting for

World renowned design agencies

• Lippincott
• Pentagram
• Johnson Banks
• The Brand Union
• Tayburn
• The Partners
• ico design
• Minale Tattersfield
• FutureBrand
• Chermayeff & Geismar

Independent logo design portfolios

• David Airey
  That’s me. Nothing much to write home about. Have a look at these guys instead.
• Denis Radenkovic, of 38one
• Andrew Sabatier
• Raja Sandhu
• David Pache
• Roy Smith
• Nancy Wu

Logo design awards

• Wolda // 2008 winners showcase
  This is what used to be called Eulda (below), but has since expanded into the World Logo Design Awards (Wolda)
• Eulda 2007 winners // 2006 winners
  The winning entries from the European Logo Design Awards (Eulda) from 2007 and 2006.
• Identity: Best of 2007 winners // 2006 winners
  The results of an international logo design competition, judged by a very experienced panel.
• Logo Design Love Awards
  View the winners from the inaugural Logo Design Love Awards, featuring the best blog logos around.

Blogs about logo design

• Brand New
  Excellent discussion focusing solely on corporate and brand identity work.
• Logo design category on David Airey.com
  An added insight into logo design from yours truly.
• logolog
  A logo log from 38one.
• bLog-oMotives
  Jeff Fisher’s logo design blog.
• Speak Up on Identity
  The branding and identity category on Speak Up.

Adobe Illustrator tutorials

• N.DESIGN STUDIO
• Smashing Magazine
• Tutorial Blog
• Revitalise your logo with a Crescent Swish
  “Can I get a swoosh with that?” a little humour from Logo Hell.

Logo design showcases

• FIFA World Cup logos from 1950 to 2010
• 50 Olympic logos from 1924 to 2016
• Top 10 Rock Band Logos
• The Logo Design Love category for logo designs
• 10 examples of simple effective logos

Style guides and manuals

• Identityworks: Tools – Guidelines and Standards Manuals
• Channel 4 identity style guides
• Corporate Identity Documentation
• Boston University Brand Identity Standards
• NHS Brand Guidelines

Further resources

• Iconic logo designers
  A rundown of the world’s most iconic designers and their logos.
• Corporate identity catalogue
  If you want to discover the typefaces and Pantone references for some of the world’s main identies, look no further.
• Forums for logo design feedback
  Upload your designs and let the constructive criticism commence.
• LogoLounge
  Inspiration from all levels of design expertise.
• Designguide’s logo gallery
  English translation of a German site about design and logos.
• LogoPond
  Similar to LogoLounge, only free, more inspiration from all ability levels.
• The big page of branding and corporate identity resources
  Covers manuals, guides, trademarking, laws, and more, from LogoOrange.com
• The Identity Archives Project
• 5 websites for free vector logo downloads
  For those times when you need a well-known .eps file, in a hurry

by Glenn Murray | Divine Write

If you’re like most other CEOs, the term “search engine optimization” will mean very little. Either that or it means expense! But it doesn’t have to be that way. If you feel like you’re standing in a dark room handing money to strangers to get you in the search engines, then this article is for you.

Introduction

This is an article written by a business owner for other business owners and CEOs. It explains Search Engine Optimization (or SEO) in layperson’s terms. It won’t make you an expert, but it will give you some insight into what you’re spending your money on, what you should be spending your money on, and just as importantly, what you shouldn’t.

But before launching straight into an explanation of SEO, let’s talk a bit about search engines. Approximately 75%-80% of website traffic comes through search engines. What’s more, research shows that most people don’t look beyond the first 2 pages of search results. This means if your website doesn’t rank in the first 2 pages of the major search engines, it’s only receiving 20% of its rightful traffic. and revenue. (And remember, being ranked number 1 when you search for your company name or web address doesn’t count. You need to rank highly for the words your customers use at search engines.)

The biggest concern for search engine companies like Google, Yahoo, etc., is finding content that will bring them more traffic (and thus more advertising revenue). They do this by using complex algorithms to determine whether a site is useful and should be included in their search results.

This is where SEO comes in.

SEO is the art of ranking in the search engines. Nothing more, nothing less.

SEO means creating your site such that the search engines consider it useful. The two main weapons in your arsenal are:

• Keywords
• Links to your site

Keywords

Figure out what words your customers are looking for at search engines, and use those words at your site. By frequently using keywords that are important to your customers, you tell the search engines what you do. These keywords are used in your copy and in the code behind the page. Generally speaking, the more you use the keywords, the more relevant you are to searches in that field.

Keywords in Your Copy
The use of keywords in your copy is easy to understand. But it’s not easy to do. You can’t just pepper your site with a meaningless array of words. The trick is using the most important keywords a lot without compromising the readability of your copy. It’s a balance between writing for the search engines and writing for your reader.

TIP: If you find this too time consuming, a website copywriter can take care of it for you. And if you know your keywords already, it should cost you no more than normal web copy.

Keywords in Your HTML Code
The use of keywords in your HTML code is harder to understand, but it’s easier to do. There are four main places these keywords are used:

• Keywords
• Description
• Alt
• Title

TIP: When you hear people talking about meta tags, this is what they’re talking about. To see how meta tags are used in practice, go to Google and pretend you’re a customer. Search for something your customers would search for. e.g. If you’re in car audio, search for “car audio”. Click on the first couple of results to bring up their website. Right-click on the home page, and select “View Source”. You’ll see a whole lot of code. You can ignore most of it. What you’re looking for are the following.

meta name=”KEYWORDS” CONTENT=”keyword 1,keyword 2,keyword 3″

meta name=”DESCRIPTION” CONTENT=”Meaningful description of page using the main keywords”

img src=”filename.gif” alt=”Meaningful description of picture using the main keywords”

The title of the page using the main keywords
Take a look at the way the creators of the site have used keywords in these areas, and follow their lead. You already know they’re ranked highly, so chances are they’ve done a good job.

Links to Your Site

Now that you know how to tell the search engines what you do, let’s talk about how to convince them you’re important.

Links to your site (or “inbound links”) are the most important factor in ranking. The more links you have to your site from other sites, the better your ranking (related sites generate better rankings).

TIP: Think of the Internet as a big election. All the websites in the world are candidates, and all the links to those websites are votes. The more votes (links) a candidate (website) has, the more important it is, and the higher its ranking.

There are many possible ways to generate links. Some are dubious (like auto-generation software). Others are legitimate, but offer limited results (like asking customers and suppliers to list you on their sites, and adding your site to various business directories). You can experiment with these methods, but I’ve always found the best way to generate inbound links is to write helpful articles and let publishers of newsletters and e-zines use them for free – on the proviso that they link back to your site.

People who publish e-Zines and newsletters are always hungry for quality content. And there are websites out there dedicated to giving them just that. If you submit a well written, relevant, helpful article to one of those sites, you can have thousands of newsletter publishers ready to snap it up. Then you just sit back and watch the links multiply!

TIP: This method is beneficial in other ways too. Readers of your article will see that you know what you’re talking about, and because you’re published, they’ll see you as an authority.

It’s impossible to say how much time you’ll need to spend generating links. You just have to keep at it until you have achieved a high ranking. Even then, you’ll still need to dedicate some ongoing time to the task, otherwise your ranking will drop.

Summary

So to cut a long story short, it comes down to this. If you have a lot of the right keyword phrases, used in real sentences, distributed realistically throughout your site, and a lot of links from other relevant sites, you stand a good chance of being ranked highly.

That’s what you’re paying your providers for. And that’s what SEO is all about.

Adapt or Die: The Google ranking algorithm has been modified, and you need to adapt immediately.

Ian Lurie at Conversation Marketing posted a thorough description of the changes to SEO and some great advice for how to adapt. Here are the major points, but definitely check out Ian’s original article for tips on what to do.

Key Takeaways:

• User Behavior now has an affect on Google’s ranking algorithm.
• Organic Click-Thru Rate (CTR) is going to be huge in 2009 (The percentage of people who click on your unpaid search listing versus those who see it and don’t click.)
• Time On Site Will Matter (The amount of time someone spends on your web site after they click on an unpaid Google search results.)
• Use web traffic analytics to find the best combination of headline, copy, layout and offer on your pages. Run multiple tests to find the combination that increases time-on-site and produces greater pageviews.
• You’ll Need to Track:
  • How many visitors you get from organic search results.
  • Which keywords generate the best traffic and whether or not they’re branded (include your brand name)
  • Bounce rate from organic search visits. How many visitors from organic search look at one page and leave without clicking to another page? The more folks that leave, the higher your bounce rate. A high bounce rate is bad.
  • Conversion rate. Hard to believe, but what really matters is sales, and leads and stuff.

Lees hier het originele artikel

1. Programmers

HTML Cheatsheet

HTML Entities References

HHTML/XHTML Character Entities

XHTML Character Entity Reference

HTML 5 Cheat Sheet (Updated 7 July 2009)

ASCII Character Codes Table & Cheat Sheet

PHP 5 Cheat Sheet

PHP Cheat Sheet (V1)

PHP Cheat Sheet (V2)

PHP Reference Sheet

PHPQuickReference Widget

note: Mac OS only.

Seess (CSS v1,2,3 widget)

note: Mac OS only.

CSS Blueprint

CSS Cheat sheet

CSS Shorthand Cheat Sheet

CSS Shorthand Cheat Sheet

Regular Expressions Cheat Sheet

JavaScript and Browser Object Quick References

JavaScript Reference

2. Open Source

jQuery 1.2 Cheat Sheet

jQuery Visual Map

jQuery v1.2 Cheat Sheet

MooTools v1.2 Cheat Sheet

jQuery v1.3 Cheat Sheet

jQuery v1.3.2 Cheat Sheet

jQuery v1.3 Wallpaper

Prototype Cheat Sheet (v1.6.2)

Prototype (v1.5.0)

WordPress Help Sheet

WordPress SEO Cheatsheet (Updated 29 June 2009)

Advance WordPress Cheatsheet  (Updated 29 June 2009)

Drupal 6

Jooml 1.5 Basic Template Cheat Sheet

Magento Events Cheat Sheet

3. Designers

Adobe Pen Tool Cheat Sheet

Adobe Brush Tool Cheat Sheet

Adobe Lasso Tool Cheat Sheet

Photoshop Quick Reference Sheet

Photoshop Secret Shortcuts

Adobe Illustrator Shortcuts

Photoshop Keyboard Shortcut (CS, CS2, CS3, CS4, etc.)

Illustrator CS3 Keyboard Shortcuts

Mac: Illustrator CS3 Keyboard Shotcuts

Windows: Illustrator CS3 Keyboard Shotcuts

Illustrator CS2 Keyboard Shortcuts

Mac: Illustrator CS2 Keyboard Shortcuts

Windows: Illustrator CS2 Keyboard Shortcuts

Dreamweaver CS3 Keyboard Shortcuts

Mac: Dreamweaver CS3 Keyboard Shortcuts

Windows: Dreamweaver CS3 Keyboard Shortcuts

Other Adobe Keyboard Shortcuts

Mac:

• InDesign CS2 Keyboard Shortcuts
• InDesign CS3 Keyboard Shortcuts
• InDesign CS4 Keyboard Shortcuts
• Illustrator CS2 Keyboard Shortcuts
• Illustrator CS3 Keyboard Shortcuts
• Illustrator CS4 Keyboard Shortcuts
• Dreamweaver CS3 Keyboard Shortcuts
• Dreamweaver CS4 Keyboard Shortcuts

Windows:

• InDesign CS2 Keyboard Shortcuts
• InDesign CS3 Keyboard Shortcuts
• InDesign CS4 Keyboard Shortcuts
• Illustrator CS2 Keyboard Shortcuts
• Illustrator CS3 Keyboard Shortcuts
• Illustrator CS4 Keyboard Shortcuts
• Dreamweaver CS3 Keyboard Shortcuts
• Dreamweaver CS4 Keyboard Shortcuts

Black & White Cheatsheet For Photoshop

Photoshop CS3 Training Reference Sheet

Fireworks CS3 Training Reference Sheet

Paper Size

Standard Web Banners Size

Commercial Envelopes

InDesign Cheat Sheet

Photoshop Toolbox Reference

Adobe Photoshop Element’s Organizer Cheat Sheet

Font Card

Web Safe Font

Web Safe Color Chart

Browser Safe Color Chart

Color Hexagon

Color Reference Guide

4. Others

SEO Web Developer Cheat Sheet

CheatSheet.org

Note: Most cheatsheets can be found in here. Great stuff!

gotAPI

DZone Refcards ( For Developers )

Further Udate

These updates are from 02 August 2009 onwards. Not much images available after the initial release but the resources are still pretty gathered.

• Ajax Cheat Sheet
• Prototype Dissected Cheat Sheet
• XSL FO Reference
• XML Schema – Structures Quick Reference
• XML Schema – Data Types Quick Reference
• XML Quick References
• W3C DOM Compatibility Tables
• Browser Compatibility Interactive Table
• Scriptaculous Combination Effects Cheat Sheet
• Scriptaculous Cheat Sheet
• AJAX for ASP.net Cheat Sheet
• MySQL Reference Sheet
• SQL Injection Cheat Sheet
• Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

For Mozilla Firefox developers, there is a list of useful plugin that may be useful for you. Nonetheless, this article will also be equally interesting for your collection. Web based tools has become a powerful tool for many users nowadays not only developers and designers are using it but even normal users love it. In this article, i will share with you a list of web based tools which i personally keep. Hopefully, you can use it and speed up your own web development.

Please take note that the 28 in the title is the initial release of tools i have, this post will be updated with more web based tools in the future.

If anyone suggested something good for web based tools or i found any, i will update this list again. I believe this will be the largest collection of web based tools on the internet which is consistently updated and maintained.

Koders

Koders a search engine that allows you to search for any codes not only PHP. There are many valuable source code available in Koders that you should be aware of. This is a must have link for your web development need! This will definitely speed up your development process.

gotAPI

This is also another must have link. gotAPI is another search engine that provides you with the essential API for your reference need.  It allows you to search for any methods or rule for that particular language. This is not only limited to the above picture shown on their website. They also provides API for frameworks and application language API such as C++, j2SE and lots more. MUST CHECK THIS OUT! This is a one stop reference need for your web development!

POG

POG is a web based tool that automatically generates clean & tested Object Oriented code for your PHP4/PHP5 application. This way you won’t have to repeatly generate all these codes manually whenever you want to start a new PHP class. It makes your backend web development quicker and more secure for beginner objecct oriental programmers in PHP.

PHPAnyWhere

This online editor gives you one best thing. Portable. Imagine you do not have to keep any codes and editor with you when you are outstation or your computer just breaks down? If you are a busy person who is required to handle both family and work. This maybe the thing you are looking for. It allows you to code anywhere and definitely speed up your web development and secure your coding copies.

CompressorRater

Compressor rater compress your javascript and rate those compressing algorithm in each library such as YUI compressor, gzip, etc.. This is useful to compress your javascript codes with more than 1 library and get the smallest site to optimal your website load time. It provides you with the duration and the amount of size reduced by the library. This means that no matter what, there will always be one library out there that can compress and optimize your complex javascript codes. Optimize your web development now!

Javascript Regular Expression Validator

Need a JavaScript validator for your regular expression? Try this site. Other than validation, it also provides you with useful library and resources for you to work with regular expression.

Javascript beautifier

This is not something really impressive about but its something i need. Especially when I’m writing tutorials to share as i tend to write my codes in 1 straight line without break,this web based JavaScript application helps organize my code neatly so that my visitor can read and understand. Definitely a useful JavaScript organizer for my web development need.

JavaScript Regex Generator

This is one of the kind. This helps simplify your brain and optimize your web development by generating regular expression for your pattern matching need.

JSBin

JSBin is used to test your snippets of codes on the fly. Just paste all your codes into JSBin and debug your code in there.  You can save the snippets and share with others online. People can review and help you with this snippets URL you provide. However, if the URL is being left alone for 3 months without review by anyone, it will automatically be deleted from the server.

JSLint

JSLint is one of the hardly see JavaScript online verifier. It verify your codes to see if there is any errors on your JavaScript. There are many features and settings that you can use to customize verification algorithms to suit your needs. If there is no debugging tools, you should use this.

CleanCSS

Unlike many CSS compressor out there which may possible cause your CSS to break down, CleanCSS provides you with a ‘only safe optimizing’ option. It also provides many other related things other than optimizing and compressing. It helps you to format you CSS nicely for viewing purposes too. Other features include merge shorthand,sorting and etc.

CSS Redundancy Checker

Have many CSS rules and forgotten which one is useless? CSS Redundancy checker can help you! It helps you check which CSS rule is currently not in use and can be removed safely. Perfect stuff for optimize web development purposes.

Selectoracle

This is something you may like if you are not a professional CSS coder and wish to understand the code written by certain code. Selectoracle translates your CSS rule set into pure English so that you could understand and improve your CSS skill. Definitely great stuff for people who just started or is interested in getting their CSS skill brush up.

Tinglets

A cross browser CSS web application. Tingelets are a set of bookmarklets that you can be placed in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s). This tells you where have your dynamic content has disappeared to and it make tracing easier.

PXtoEM.com

This is one of the tool you will only find one way either px to em or em to px. This web base tool provides both way!(finally)  It is extremely useful for you when dealing with css and dynamic effect. Finding the exact pixel or em will really save you a lot of time on web development

Conditional CSS

Don’t wish to write weird symbols just to perform some hack that some browser cannot be detected? Use conditional CSS instead. It allows you to write CSS rule set in conditional if-else case. This way you can cater for all different browser need without losing readability of your CSS rule set.

CSSFly

Mozilla Firefox has webdeveloper addon extension for editing CSS on the fly. Other browser have CSSFly! CSSFly not only allows you to edit your CSS but also xHTML on real time to build up your template before throwing the CSS or xHTML code to your web server. Debugging has never been easier with CSSFly. This is one of the most useful web based application you should know when debugging any layout issues with other browsers.

Pingdom Tools

Pingdom test your web efficiency just like YSlow in Firefox, Unlike YSlow, it does not tell you what to improve. But with information on which page is rendering slowly, you should be able to improve your site in no time!

W3C CSS Validation

Unfortunately, CleanCSS does not have a validation service built-in for you. Before you use CLEANCSS, it is best to validate your CSS. What place more reliable than the old W3C Offical site CSS validation service?

W3C HTML Markup Validation

The official W3C HTML Markup validation service. When all fail, this is most reliable!

mobiReady

Using mobile phone for surfing purposes is getting more and more common nowadays. Ensuring that your site is also compatible to mobile web browser is equally important nowadays. mobiReady is a testing tool to evaluates mobile-readiness using industry best practices & standards. It provides you with a report and a in-depth analysis on how well your site performs on a mobile  device. Want to cater for mobile user? This web based tool is something you cannot miss.

Wave

WAVE is a free web accessibility evaluation tool. It helps you to check any broken link on your page and report back to you. As you know, even humans do not like broken links not to mention search engine spiders. It is important that you ensure that your site is free from broken links! There is also a Firefox addon for WAVE.

Browsershot

Browsershots is a web based tool that makes screen shots of your web design in different browsers. This way you will know whether your website is having problem with other older browsers that user might be using currently. It has many browser support and is able to test your site compatibility with different screen size. Excellent for testing your web development design!

Webwait

WebWait work similar as PingDom, the differences is that webwait allows you to bring up a bookmark icon and benchmark any website you came across. If PingDom doesn’t work for you, webwait will definitely serve you unconditionally.

test everything

This is a crazy web based tool. It basically allows you to test EVERYTHING. From SEO to Validation to quality, its everything. If you are not aware of this tool. You should visit them up and play with it. Its really interesting.

TAW

Unlike WAVE which is also a web accessibility testing tool, TAW is like an old man telling you and advicing you what you should not do and what you should have done on your site. In order to improve your site web accessibility.

Geotak Netrender

Ever wonder how will your website looks like when it goes way down to IE4.0? If you have like i do (which scare the hell out of me), you should visit this site.  It provides you with various version of Internet explorer for you to test your website. This web based tool helps verify your website compatibility with Internet Explorer.

Net2FTP

Don’t have a ftp application on the PC you are using right now? Use this web based ftp instead. It is very easy to use and allows you to ftp anywhere!

Total Validator

Total Validator is a free one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like. Something impressive that i missed. This is something you must bookmark for your web development.

HTML Tidy

Some company web portal pages are just horrible. Looking at how the HTML is being written all over the place just give me headache. If you are like me, try HTML Tidy and it might just save your time on your web development.

Rockstar Apps

There are two application currently in Rockstar Apps that can definitely assist you on your web development need, Rockstar Optimizer and Web Profiler. RockStar Optimizer helps you optimize your website entirely by compressing, concatenating, rebuilding your CSS and JavaScript. On the other hand, Rockstar Web Profiler give you in deep information on your web application and site. Information such as the duration spend on server and client side, resources being used in a chart and etc. which is of course more powerful than most simple web based application. But you will have to register in order to use. It is a free service by Rockstarapps.com. Credit goes to Bob who suggested this amazing tools.

prettyprinter

This is a multi code beautifier! it can beautifier PHP, Java, C++, C, Perl, JavaScript, CSS in one box. This means that if you have multiple different languages in your code, this can be in great help when individual beautifier won’t work. An example will be HTML+CSS+JavaScript page.

HTML2PDF converter

Tired getting on to website just to take a look at those web cheat sheet? This safe LOT’s of time by converting all these cheatsheet on the web into pdf and save them into your local computer. Definitely make your life easier looking at cheat sheet instantly on the wall!

Strip Generator

i haven’t found my love for this application yet. But this application help you create the perfect strip for your web design. Pretty easy and cool. Most designer will love this site.

URL2jpg

JavaScript CSS properties references

Don’t know which element properties can be used while coding in JavaScript to style your document? This site provides you with all the necessary CSS properties references that can be used in JavaScript!

Don’t want to change to pdf format? Change your cheatsheet to jpg format instead! Just place them into the url and convert them to a size selected and your web cheat sheet will instantly become an image for your wallpaper!

Color Suckr

Something necessary for your web designing process. This online tool helps you create a color scheme out of the image you use in your web design!

Aviary Screen Capture

This might be the next cross browser checking tools you will be using in the future. This is a screen capture tool but currently do not have the ability to capture screen with different browser yet. However, it is being implemented. We shall wait and see!

Hurl

Hurl Overview from defunkt on Vimeo.

The video said it all. Other than just sending HTTP Request, there are, of course, other things that can be done with this tool.

Spoon Browser

An interesting web based tool that allows you to run different version of browser on your local disk without the necessary to install the standalone version. However, it does required you to install a plugin in order for all these to work. But you will be able to run different type and version of browser to test your web site. Pretty cool.

HTML Entity Character Lookup

This web based tools allows you to quickly search for any HTML entity character with just a few click. Something both Web developers and designers would really LOVE to have. This tools really help reduce time to search for a particular entity on Google!

Anything Else?

The above materials are arrange according to groups. Hope this is useful for you guys! Any other fine made web based tools that you are using for your web development and i’m not? Inform me about it!