Design

Web design tools - Web resources

Web design tools and

web resources

The following list contains the content, tools and resources I use to create websites. Content is updated regularly... and I have a large backlog of more free resources to add. Also I may break this page down into tabs or pages at some point. Do you have any great tools or icons or techniques that are not on this list? Tell me. All the content listed here is free for commercial use unless otherwise marked. If this page is of value to you, consider giving me some Delicious love. Thanks!

---

Javascript

• jQueryDownload | Site | Cheat Sheet | Docs | Plugins
  My favorite Javascript framework with a small footprint at 20k.
• SWFObject 2.1 Download | Site | FAQ
  Defacto script for embedding Flash content.
• OffspringDownload | Site
  Auto-applies .first-child, .last-child, & .only-child classes.
• Dean Edwards IE7 ScriptDownload | Site
  Library makes IE5/6 behave like IE7.
• NicEditDownload | Site
  Turns any textarea into a WYSIWYG editor.
• Reflection 2.0Download | Site
  Adds a wet-floor effect to any image.
• JSLintSite
  Identifies problems in JavaScript programs.
• Jash: Javascript ShellSite
  Cross-browser Javascript command-line debugging tool.

jQuery Essential Widgets

• jQuery UI 1.5.3Download | Site
  Official jQuery user interface components and interactions. This makes several plugins obsolete, like Tabs and Accordion.
• jdMenu 1.4.1Download | Site
  Accessible, hierarchical dropdown menus.
• idTabs 2.2Download | Site
  Simple tab plugin.
• Accordion 1.6Download | Site
• ThickBox 3.1Download | Site
  jQuery-compatible Lightbox clone.
• Cycle 2.32Download | Site
  Highly configurable slideshow plugin with many options.
• Easy SliderDownload | Site
  Make images or content slide horizontally or vertically on click.
• InnerFadeDownload | Site
  Fades any set of elements like a slideshow, a news ticker etc.
• jQuery FancyZoomDownload | Site
  Free jQuery version of Cabel Sasser's FancyZoom.

jQuery Specialized Widgets

• Tipsy 0.1.2Download | Site
  Facebook-style tooltips utilizing anchor's title attribute.
• Auto-Grow TextareaDownload | Site
  Modifies a textarea to grow vertically as it becomes full.
• Input HintsDownload | Site
  Displays in-field hints on text input elements.
• markItUp! 1.1.5Download | Site
  Turns textarea tag into a markup editor with various syntaxes.
• jEditable 1.5.1Download | Site
  Makes any element a click-to-edit, Ajaxified item.
• BlockUI 2.14Download | Site
  Prevents activity with the window or elements when using AJAX.
• jCarousel 0.2.3Download | Site
  Scroll items in horizontal or vertical order with controls.
• Custom Checkboxes 1.1.0b2Download | Site
• Date Picker 2.1.2Download | Site
• Table Sorter 2.0.3Download | Site
• Ingrid Datagrids 0.9.1Download | Site
• Star RatingDownload | Site
• Farbtastic 1.2 Color PickerDownload | Site

jQuery "Extensions"

• jQuery MetadataDownload
  Embed metadata in HTML tags. See code for examples.
• jQuery Easing 1.3Download | Site
  jQuery library for advanced sliding-type animations.
• Bgiframe 2.1.1Download | Site
  Used when you show elements over a select control in IE6.
• More Selectors 1.1.3.1Download | Site
  Adds a plethora of interesting selector options.

PHP/MySQL

• CodeIgniter 1.7.0Download | Site | Docs | Forums
  Easy, documented framework by the devs of ExpressionEngine.
• pChart 1.2.7Download | Site | Docs
  PHP classes to render high-quality charts.
• mySQLDumperDownload | Site
  Quality backup solution for large mySQL databases.
• PHP Development GuidelinesSite
  Best practices for PHP development from the EE guys.
• PHPMailer 2.3Download | Site | Tutorial
  Send email with attachments, HTML and embedded images.
• TAR/GZIP/BZIP2/ZIP Archives 2.1Download | Site
  Builds and downloads zip+ files on the fly.
• ROS PDF ClassDownload | Site
  Module-free creation of PDF documents from within PHP.

Flash Components

• Open Source FLV PlayerDownload | Site | Docs
  "OS FLV" - Open source, embedable player for Flash video.
• JW FLV Player 3.12€30 | Download | Site
  SWF file that displays FLV videos. Free for personal use.
• SlideShowPro$29 | Site | Wiki
  Gallery and slideshow Flash component. 60 options.
• MonoSlideShow$19.95 | Site | Manual
  Gallery and slideshow SWF file. 150 options.
• XSPF Flash MP3 Music Player (Slim)Download | Site
  SWF file that plays mp3 songs and playlists.
• Date Slider 1.1Download | Site
  SWF file that selects a date range.
• amChartsFree/€85/€275 | Site
  Customizable Flash charts. Free version embeds link to vendor.
• TWF Flash Uploader€15/€50 | Site
  Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools

• IETester 0.2.3Download | Site
  IE8b2, IE7 IE6 and IE5.5 on Vista & XP in one browser! WOW!
• IE6 & 7 on Mac IntelDownload These | Then Follow This
  Run IE on Mac Intel for free with Sun's VirtualBox.
• Standalone IE6Download | Site
  Download a standalone version of IE6 you can install in XP.
• Create Favicons in PhotoshopMac Plugin | Win Plugin
  Install this PS plugin to add ability to save in .ico format.
• Javascript Email Enkoder (Spam protection)Site
  Protect email addresses by converting into encrypted JavaScript.

Bookmarkelets

• Web Development BookmarkletsSite
  Tools for manipulating Javascript, CSS, and DOM in browser.
• Allan Jardine's "Design" BookmarkletSite
  Four overlaid tools: Grid, Guides, Measurement, Crosshair.
• XRAY BookmarkletSite
  Select any page element and display its style info.
• Visual Event BookmarkletSite
  Visually show what events are attached to DOM elements.

Grid Design

• 960 Grid SystemDownload | Site
  Grid system based on 960px wide design in 2 column widths.
  12 column - 60px wide columns, 20px gutters.
  16 column - 40px wide columns, 20px gutters.
• Blueprint CSS 0.8Download | Site
  24 column grid with typography, utlities & reset included.
• GridMaker2Rows & Columns | Columns Only | Site
  Essential Photoshop script that creates custom grids.
• Grid DesignGridr Buildrrr | Designer | Calculator
  Tools to design and preview grid systems.
• Syncotype BookmarkletSite
  Overlays a customizable baseline grid on your web page.

Content Generators

• Preloader GraphicsAjaxLoad | LoadInfo | Preloaders.net
  Online tools to customize an animated ajax/loader graphic.
• Stripe GraphicsStripe Generator | Stripe Mania
  Online tools to customize background stripe tiles.
• Background Maker (Tiled Backgrounds)Site
  Online tool to make pixel-by-pixel tiled backgrounds.
• favicon.ccSite
  Online tool to generate favicons.
• CornerShopSite
  Online tool to generate rounded corner graphics and code.
• Dummy Text GeneratorSite
  Best tool for generating dummy content. Highly configurable.
• LipsumLipsum | Lorem2 | html-ipsum | Text
  Generic lorem ipsum copy for roughing in content.

Pixel Icons

• Silk IconsDownload | Site | Preview
  1,000 16x16 PNG icons with transparency. A must have set.
• Silk Companion IconsDownload | Site | Preview
  420 Silk-style 16x16 PNG icons with transparency.
• BSN Mini Icons 2Download | Site | Preview
  113 10x10 grayscale gif icons with transparency.
• Diagona Icons$19.95 | Download | Site | Preview
  400 10x10 and 16x16 PNG icons with transparency. Purchase to remove Creative Commons attribution requirement.
• Fugue Icons$49.95 | Download | Site
  1263 16x16 PNG icons with transparency. Includes PSDs to modify. Purchase to remove Creative Commons attribution requirement.
• SizconsDownload 16x16 | 12x12 | Site | Preview
  43 16x16 and 12x12 PNG icons with transparency.
• Aqua Gloss IconsDownload | Site | Preview
  32 128x128 PNG icons with transparency. 32px resizes shown.
• Kombine Developer IconsDownload | Site | Preview
  45 32x32 PNG toolbar-style icons with transparency.
• Matt Ball's Developer IconsDownload | Preview
  44 32x32 TIFF toolbar-style icons with transparency.
• Danish Royalty Free IconsDownload | Site | Preview
  96 32x32 PNG toolbar-style icons with transparency.
• Sekkyumu Developpers Icons [sic]Download | Site | Preview
  105 32x32 PNG/.ico toolbar-style icons with transparency.
• Quality Royalty Free Icons
  Jasperhauser.nl Icon Design - 102 icons for $65.
  IconDrawer - 140 icons for $84 plus 48 add-ons for $29.
  IconShoppe - 56 Stockholm icons for $45 with free minis.
  MicroIco - 64 mini 8x8 icons for $6.
  N.Design - 175 12x12 plus 82 8x8 for $30.
  Kombine - 264 32x32 icons for $60.

Vector Icons

• ClickBits$49 | Site
  792 arrows & web-related icons in OpenType font format.
• InfoBits$29 | Site
  188 web-related icons & dingbats in OpenType font format.
• 165 Vector Icons by GoSquaredSite | Preview
  Free, useful icons in SVG, JPG and Illustrator CS2 format.

Backgrounds & Styles

• Illustrator - Basic Gradients by GoSquaredSite
  Free, Web2.0-style gradients in SVG or Illustrator CS2 format.
• Illustrator - Web 2.0 Gradients by dezinerfolioSite
  130 Illustrator gradients. Matches PS gradients below.
• Photoshop - Web 2.0 Gradients by dezinerfolioSite
  130 Photoshop gradients.
• Photoshop - Web 2.0 Layer StylesSite
  131 Photoshop layer styles by deszinerfolio.com.
• Photoshop - Web 2.0 Gradients by EuphorishSite
  70 Photoshop gradients.

Hosting

• ServInt - Current host of choice$49 | Site | Review
  Solid virtual private server host. Have many sites with them.
• BlueHost - Decent shared host$7 | Site | Review
  Am currently hosting some small to medium sites here.
• DreamHost - Another low-cost host$6 | Site
  Many colleagues have small to medium sites hosted here.

Browser Compatibility

• PNG Support in IEDownload | Site | Code
  Enable transparent PNG support in IE.
• PNG Support in IE (CSS Only)Site | Code
  Enable transparent PNG support in IE6 using only CSS.
• Whatever:hover in IEDownload | Site | Code
  Enables css :hover support in IE.
• IE Browser Filtering/TargetingSite | Code
  Some hacks to target different browsers.
• Misc Browser WorkaroundsCode
  Click the code link to see some collected browser workarounds.

CSS & HTML Techniques

• Sliding DoorsSite
  Not just for tabs, this technique is by far the most useful of all.
• Taming ListsSite
  Transform the meager list into something useful.
• CSS ResetEric Meyer's | Yahoo YUI Reset
  Reset all CSS styles to a baseline. Season to taste.
• Clearing Floats without Extra MarkupSite | Code
  My method of choice for clean float clearing.
• Resize a Popup to Fit an Image's SizeSite | Code
  Make a popup window resize perfectly to the image.
• Sticky FootersBest method | Alt Method
  Tested cross-browser solution for sticky footers.

Typography

• FontSquirrel - High Quality FREE FontsSite
  Free, hand-picked, licensed-for-commercial-use fonts.
• Facelift Image ReplacementDownload | Site
  Dynamically generate text in custom fonts with PHP/JS combo.
• Typical Cross-Browser Font CascadesSite | Sample
  Use these fonts lists when specifiying fonts in your css.
• Alternative Font CascadesSample
  Interesting alternative cascades.
• Default Mac FontsSite | Show
  
• Default Windows FontsSite | Show
  

Firefox Extensions

• Firebug 1.3Install | Site
  Edit, debug, and monitor CSS, HTML, and JavaScript live.
• Web Developer's ToolbarInstall | Site
  Adds a menu and a toolbar with various developer tools.
• View Formatted SourceInstall | Site
  Displays formatted source and CSS info for each element.
• YSlowInstall | Site
  Analyzes pages and tells why they're slow. REQUIRES FIREBUG.
• Dust-Me Selectors 2.11Install | Site
  Dust-Me Selectors finds unused CSS selectors in your site.
• UrlParamsInstall | Site
  Displays the GET and POST parameters of a web page.
• Link CheckerInstall | Site
  Checks all links on a webpage and reports broken ones.

Essential Mac Software

• MAMP 1.7.2Download | Site
  Self-contained local hosting. (M)ac, (A)pache, (M)ySQL, (P)HP.
• VirtualHostX 1.1.1$9 | Download | Site | Tutorial
  Host multiple sites on your Mac. Extremely useful with MAMP.
• CSSEdit 2.6€29.95 | Download | Site
  The best CSS editor on the market. An absolute must-have.
• TextMate 1.5.7€39 | Download | Site
  The best text editor ever.
• Sequel Pro 0.9.3Download | Site
  Successor to invaluable CocoaMySQL. Gives direct access to MySQL databases on local and remote servers. Donationware.
• Coda 1.6$99 | Download | Site
  Popular all-in-one web development application.

SEO / Site Evaluation

• Social BookmarkingAddThis | ShareThis | Tell a Friend
  Widgets helps visitors post bookmarks to social media sites.
• Website GraderSite
  Measures effectiveness of a site based on SEO, traffic, etc.
• W3C ToolsMarkup Validator | Link Checker | CSS Validator
  Tools to check the validity and accuracy of your site.
• Keyword Suggestion ToolSite
  Meta tool that helps you research keywords a variety of ways.

Domains

• DNSstuffSite
  Configure, monitor & fix problems with your domain & email.
• PickyDomains - Custom Domain Names$50 | Site
  Creates a good/available domain name for only $50.
• Domain Searchesbustaname.com | nameboy.com
  Domain name searches and combination helpers.
• SSLmatic - Cheap SSL Certificates$19.99 | Site
  Discounted SSL certs from RapidSSL, GeoTrust and Verisign.

Analytics, Monitoring & Testing

• Google AnalyticsSite
  Free and full-featured analytics engine.
• Mint$30 | Site
  Popular self-hosted analytics app by Shaun Inman.
• userflySite
  Run instant usability studies using your real users.
• Are My Sites Up?Site
  Keeps an eye on your sites and warns you if they go down.

Services

• Harvest - Biz ManagmentFREE/$12/$40/$90 | Site
  Very good service for tracking time, logging expenses, invoicing clients, etc...
• Etherpad - Collaboration ToolSite
  Collaborate on any text programming document.
• Campaign Monitor - Bulk EmailSite
  Email sending for designers. $5 + 1¢ per address per mailing.
• Web Development Project EstimatorSite
  Estimate time & materials required for a web project.

Cheat Sheets

• Web Technologies.htaccess | mod_rewrite | PHP | MySQL
• RelatedRegex

Marcadores: Design, Download, Downloads, Ferramentas, Internet, Links, MySQL, Tools, Tutorial, Web

---

# 11/21/2009 09:11:00 AM, Comentários, Links para esta postagem,