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

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

Marcadores: , , , , , , , , ,


postado por mikhail  # 11/21/2009 09:11:00 AM