Resources and Tools for Web Developers
Ranking System:
I chose to rank the resources and tools in the order that I thought was important, starting with the first item in the category being the most important, proceeding down to what I felt was the least important in the category. As this was subjective, I felt that this was the best way for me to "suggest" what I thought was the best ranking in each category.
Resources:
CSS:
Web Based resource: http://24ways.org/2009/working-with-rgba-colour this site shows/tells how you can make areas such as menus transparent so you can have a background image that can be seen
Web Based resource: http://www.barelyfitz.com/screencast/html-training/css/positioning/ this web site does a good job of explaining absolute and relative position using divs and CSS – I still use it from time to time as a refresher.
Web Based resource: http://www.zenelements.com/blog/css3-text-shadow/ This site deals with some of the CSS3 coding that has been approved. I plan to use it as a resource when I do the Web Trends Demo on my web site! I think it is really cool that they are taking web typography to a new level!
Web Based resource: http://www.web3mantra.com/tag/css3-tools/ has resources for HTML5 and CSS3, including a browser compatibility chart, and a HTML5 visual cheat sheet.
Web Based resource: http://www.webresourcesdepot.com/3-tools-for-easier-css3-transition-timing-functions-cubic-bezier/ an interesting site for creating CSS3 transitions.
Web Based resource: http://sixrevisions.com/css/css3-techniques-you-should-know/ some good stuff about CSS3 and what you can do with it.
Web Based resource: http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/ has new techniques and tools. This really has some nice techniques involving gradients.
HTML:
Web Based resource: http://html5test.com/ this site checks your browser's compatibility with HTML5. Of Course, IE stunk, Firefox was not too bad, and Chrome did pretty well.
Web Based resource: http://www.web3mantra.com/tag/css3-tools/ has resources for HTML5 and CSS3, including a browser compatibility chart, and a HTML5 visual cheat sheet.
Web Based resource: http://thinkvitamin.com/code/23-essential-html-5-resources/ has 23 resources for HTML5.
Accessibility:
Web Based resource: http://wave.webaim.org/ This analyses a site for accessibility. What is cool is that you can down load a free version for FireFox, and one as an extension for Dreamweaver.
Web Based resource: http://usabilitygeek.com/10-free-web-based-web-site-accessibility-evaluation-tools/ This site has about ten accessibility tools that you can use.
Color Schemes:
Web Based resource: http://www.colorhunter.com/ Color scheme generator creates schemes from photos/art by browsing your computer to find the image, which you then upload and it gets analyzed and you get a report back.
Web Based resource: http://www.pictaculous.com/ another color scheme generator for photos.
Web Based resource: http://www.degraeve.com/color-palette/ Color scheme generator creates schemes from photos/art on an existing web site.
Miscellaneous:
Web Based resource: http://thinkvitamin.com/design/5-advanced-photoshop-techniques-for-web-designers/ more Photoshop techniques for web designers.
Web Based resource: http://sixrevisions.com/photoshop/25-photoshop-tutorials-for-web-designers/ 25 tutorials for web designers.
Web Based resource: http://www.lipsum.com/ this site helps to generate fill in text until you either generate the true text, or your client gets it to you.
Web Based resource: http://webdesignledger.com/author/jkthomas I think the author does a nice job of assembling a lot of useful information for web designers.
Web Based resource: http://www.webmaster-elements.com/ more resources for web developers.
Web Based resource: http://www.greepit.com/ has open source resources for web developers.
Web Based resource: http://speckyboy.com/2009/02/02/50-of-the-best-ever-web-development-design-and-application-icon-sets/ Icons and more icons.
Tools:
FireFox:
Web Based resource: http://tips.webdesign10.com/web-developer-toolbar.htm this is a web developer toolbar for FireFox. This is a free add on for FireFox.
Web Based resource: https://developer.mozilla.org/en/Venkman Venkman is a JavaScript de-bugger add on for FireFox.
Web Based resource: https://addons.mozilla.org/en-US/firefox/addon/total-validator/ Total validator – validates your sites.
Web Based resource: https://addons.mozilla.org/en-US/firefox/addon/ use this link to add the following add ons, or do it directly from FireFox: ColorZilla, Firebug, Image Zoom, JavaScript Debugger, and many others.
Web Based resource: http://tools.seobook.com/seo-toolbar/ FireFox add on for SEO.
Adobe:
Web Based resource: http://www.dmxzone.com/go?5618 this is a free add on extension for Dreamweaver. I find it to be very useful, and easy to modify.
Web Based resource: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&;extid=1047409 This is an extension for Photoshop, which allows you to enlarge photos without losing details. It does run around $200, and I have used it in the past. I think it might well be worth getting as you might have a client that needs to have images enlarged, but does not want them to have the jaggies.
CSS/HTML:
Web Based resource: http://css3please.com/ a cross browser CSS3 generator.
Web Based resource: http://csssprites.com/ CSS sprite generator.
Web Based resource: http://webarti.com/best-CSS3-button-maker/ A button maker/generator using CSS3. Note, this cannot be used in IE, as it does not currently fully support CSS3 – although some of the coding is supported in IE.
Web Based resource: http://css3generator.com/ this is a CSS3 generator, it gives you the codes, and shows you what it looks like. I tested it in Firefox.
Web Based resource: http://www.colorzilla.com/gradient-editor/ this is a css3 gradient generator that has the look and feel of a Photoshop or Illustrator gradient creator.
Web Based resource: http://www.shoutmeloud.com/css3-tools-to-accelerate-your-websites-work-flow.html has an assortment of tools to generate such things as a button maker and transforms.
Web Based resource: http://www.patterncooler.com/ a pattern maker for backgrounds.
Web Based resource: http://gradients.glrzad.com/ a gradient generator for CSS3.
Miscellaneous:
Web Based resource: http://www.woorank.com/ this is a web site analysis tool.
Web Based resource: http://www.gimp.us.com/gimplp2/index-yahoo.php?pk=4860 Gimp is a free photo editor with capabilities that come close to Photoshop.
Web Based resource: http://www.computerarts.co.uk/features/10-wireframing-tools-web-designers use to develop wire framing for web developers.
Web Based resource: http://www.addme.com/ This has tools for promoting your web presence for search engine submission, has a link checker, meta tag generator, and a couple of others. Of course, the catch is, if you want a professional SEO, there is a link for that also, but it will cost you if you sign up.
Web Based resource: http://webdesignledger.com/category/tools the author of this web site has a lot of info on tools we could be using.
Web Based resource: http://colorschemedesigner.com/ another tool for generating color schemes for a web site.
Web Based resource: http://zscreen.en.softonic.com/?ab=3 a tool for doing screen captures.
Web Based resource: http://buildorpro.com/ allows a developer to change a web site in real time to see what can be done with it – does not alter the actual web site.
Must haves:
Web Based resource: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&;extid=1047409 this is an extension for Photoshop, which allows you to enlarge photos without losing details. It does run around $200, and I have used it in the past. I think it might well be worth getting as you might have a client that needs to have images enlarged, but does not want them to have the jaggies.
Web Based resource: http://spyder.datacolor.com/product-mc.php Calibrate you monitor for true color. Over time, the color integrity of your monitor degrades, and needs to be recalibrated. A must have for anyone dealing with clients that have corporate colors that need to be matched exactly – not to say that the clients monitor is any better, but you are on the safe side. I think it costs under $200 to get, depending upon the version you purchase – the cheapest version should work for most people.