Web Statistics and other useful tools

• http://www.w3counter.com/globalstats.php
• Calendar: jQuery plugin for Google calendar (thanks, Kosta!)
• http://jquerymobile.com/
• http://www.codecademy.com/ - Learn to Code
• http://www.phonegap.com/ - Open source mobile framework
• http://jqtouch.com/ - jQuery plug in for mobile applications
• http://www.w3.org/P3P/
• http://cupcakeipsum.com/
• Web Storage API: http://www.adobe.com/devnet/html5/articles/html5-storage-apis.html#articlecontentAdobe_numberedheader
• Character Entity Reference: http://digitalmediaminute.com/reference/entity/

JQuery, CSS3 and HTML5 tricks, tips and tutorials

• http://html5advent2011.digitpaint.nl/
• http://lea.verou.me/css3patterns/
• JQuery Zoom: http://www.labs.skengdon.com/imageZoom
• http://html5test.com/
• http://caniuse.com/#
• http://www.modernizr.com/
• ctrl+shift+j open Chrome developer pc and cmd+opt+j on a mac
• http://html5boilerplate.com/
• http://www.blueprintcss.org/
• http://lessframework.com/
• Extra plus for this one: http://css3pie.com/ - with a tag line of progressive internet explorer, this one promises to help you resolve your IE css3 woes
• And when you are done adding all your gradients and such, try this site: http://compass-style.org/ an open source css framework for writing clean, compressed code
• 7 Principles that make your website more engaging

  Changing Education paradigm

  https://www.elance.com/p/blog/2011/08/web-and-programming-resources-roundup.html

  http://webdesignledger.com/tips/web-design-trends-in-2011

  10 Things I have learned - Dr. Milton Glaser

  http://imakewebthings.github.com/deck.js/#intro

The Mobile Web

• http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html - combining viewport and media queries
• http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/ - a good basic explanation of @media queries
• http://www.thecssninja.com/css/iphone-orientation-css
• http://blog.intercom.io/gimmicks-and-patterns-in-interface-design/
• http://hacks.mozilla.org/2009/06/media-queries/
• Safari Guidelines to media queries, for iphone and ipad dimensions
• Dimensions for all media, using media query: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://www.w3.org/TR/css3-mediaqueries/ - W3C word on using media queries
• Tips for creating mobile sites - very clear instructions on using media queries
• Neil Tan's lecture on responsive web design: Responsive Web Design
• A List Apart: Responsive Web Design
• Examples: http://andrew-hoyer.com/experiments/walking/ | http://beta.theexpressiveweb.com/
• Mobile Viewport: https://github.com/shichuan/mobile-html5-boilerplate/wiki/Mobile-Viewport/ca13a1b63bff73769aa179e0effe2cd4bd4e3312

CSS Design helpful links

• Flexible images: http://unstoppablerobotninja.com/entry/fluid-images
• PNG transparency fix in IE6: http://24ways.org/2007/supersleight-transparent-png-in-ie6
• Perfect Multi-column Liquid Layouts
• CSS Layouts and IronMeyers CSS Layouts
• CSS Menu generator
• Open source Photoshop alternatives
  Wordpress Themes
  Section 508
• Cheat sheets: all kinds!
• iPhone 3G tester
• HTML5
• W3C Validator
• icon tools

Web Design (business):

• How to write requests for information: http://www.netdynasty.com/articles/request-for-information-template.asp and http://webdesign.about.com/od/freelancing/qt/project_form.htm will help you get started.

Private message system

• http://codecanyon.net/item/simple-private-message-system/104565
• http://www.pixel2life.com/publish/tutorials/608/simple_private_messaging_system/
• login page: http://www.pctalknet.com/php/login.php | http://www.phpeasystep.com/phptu/6.html

Design stuff:

• Illustrator cheat sheets: http://www.wellsdrew.com/education/illustrator/
• Online royalty free clipart: http://www.clker.com/
• http://www.bamagazine.com/
• Smashing Magazine
• Photoshop alteratives: GIMP (student recommended), list of several alternatives
• PNG Optimizer for the MAC suggested by Scott Cooksey
• Google free sites
• http://www.p51labs.com/lightwindow/
• http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
• http://www.css3menu.com/index.html
• http://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
• Responsive web design (A List Apart): http://www.alistapart.com/articles/responsive-web-design/
• HTML5/CSS3 example: http://www.20thingsilearned.com/cloud-computing/2
• http://issuu.com/ - thanks Loretta, who provided both the link and this example

Helping your study skills:

• http://www.educationatlas.com/study-skills.html (thanks, Misty!)

New Ideas:

• Calling lightbox from Flash
• The Ultimate WebDev Cheatsheet (including html5) - thanks Franky!
• Code Flickr: http://code.flickr.com/

Portfolio Books and Book binding:

• http://thekeyprintingandbinding.com/

Tips & Tutorials for Layouts:

Links courtesy of AICA-SF graduate, David Carmona:

• create-a-clean-and-colorful-web-layout-in-photoshop/
• 30-easy-to-follow-photoshop-layout-design-tutorials/

And some additional information:

• http://abduzeedo.com/10-awesome-free-photoshop-brushes
• http://www.opensourcetemplates.org/
• /free-css-layouts-and-templates/
• http://circleboxblog.com/2009/resources/9-tileable-grunge-textures/

Photography Resources:

• http://www.greenstockmedia.com/ - a good GREEN alternative for your photography needs by a former student, Mike Kahn
• Mike also sent along some excellent tips for SEO
  The attached SEO cookbook and supplement PDFs are a great educational tools for search engine optimization. It was created by PhotoShelter which manages photographer archives/websites, and I actually utilize their services, however the information is largely platform agnostic. I think you and your students will get a lot out of
  • http://pa.photoshelter.com/mkt/seo
  • http://pa.photoshelter.com/mkt/seo-kit-for-photographers
• Stock Xchange
• Can Stock Photo Clip Art and Stock Photos Can Stock Photo offers professional royalty free stock photography at affordable prices. The site's high-quality images start at $1, and a generous license agreement gives users the flexibility they need. Whether you need an image for advertising, presentations, brochures or just decoration, Can Stock Photo has you covered with its database of more than 1 million images! The site offers free weekly downloads with thousands of new images added every week.

Teaching Tips:

• Courtesy of Mark Condon: http://honolulu.hawaii.edu/

CSS fixes

• Clearfix in CSS: http://www.webtoolkit.info/css-clearfix.html
• 3 pixel jog in IE6: http://www.positioniseverything.net/explorer/threepxtest.html
• Making Your Footer Stick: http://fortysevenmedia.com/

CSS Blueprints:

• from Franky: Awesome CSS blueprint.
  http://www.blueprintcss.org/

Documenting your work, reference material

• Wilson Web, an online database of research on a wide range of subjects
• http://www.corkdump.com/ - everything about everything multimedia
• From Lisa Martinikis: http://okaydave.com/ - an inspiring archive of his portfolio and documention of the process. A must see.
• http://freelancefolder.com/42-questions-every-freelancer-should-ask-their-clients/ submitted by David Carmona, 2009 graduate.

Blogs:

• Blogger (standalone system)
• WordPress (choose the option to incorporate within your site)
• WordPress Toolbox from Smashing Magazine (Thanks, Jarques!)
• http://ma.tt/2007/08/browser-stats/ Browser Stats from the blog of Matt Mullenweg, co-founder of the open-source blog company WordPress

Contracts

• http://www.davidairey.com/using-freelance-graphic-design-contracts/ (thanks, Lisa!)
• http://www.wilsonweb.com/worksheet/pkg-con.htm
• http://www.ecommerceattorney.com/webcontract.html
• http://www.allgraphicdesign.com/graphicdesign-contractsforms.html
• http://provider.com/contracts.htm

Student recommendations:

Best of Photoshop Tutorials by Smashing Magazine (great magazine recommended for online subscription!)

Free Web Hosting: http://www.000webhost.com/. Untested but posted by Diana

Test your design on different browsers: http://browsershots.org/ from our own John Johnson.

I recently stumbled onto Corkdump, which seems to be a repository for web developers.
http://www.corkdump .com/ from former SWAP president, Jarques Pretorius

From our good friend, David Carmona at http://redescape.net/, the links and his comments below:

Targeted towards designers:
http://www.bluevertigo.com.ar/bluevertigo.htm

--Free Patterns (must give credit, if your site gets big)
http://www.squidfingers.com/patterns/

Color Charts

http://www.moma.org/interactives/exhibitions/2008/colorchart/

Return To The Top

Targeted towards developers:

http://www.devlisting.com/

http://redescape.tumblr.com/post/24130883

--SEO Lovers (good friend of mine developed this, useful SEO)

http://redescape.tumblr.com/post/25703793

Basic Web Design

• Free FTP: http://www.smartftp.com/
• This is that site that makes html code for movies http://cit.ucsf.edu/embedmedia/step1.php
• Yale C/AIM Web Style Guide - Perhaps the most cited site (get it?) for web design. Though full of good advice, it is not universally praised. See the Critique of Yale Style Manual for an alternative view. Personally, I like it's feel alot.
• Online resources guide for graphic design tools - Covers the basic Adobe suite of design tools
• Web Development by John December - A rather busy site with a different approach to organizing the do's and don't of creating sites.
• Web Style Resources -- Tips - A collection of sites that contain quick tips. Don't miss the Sucky to Savvy page, which has examples of the good, bad and ugly.
• W3 Org's Style Document - They wrote the language, so pay attention to what they say.
• webdevelopers.com is a comprehensive resource for everything from tutorials, scripting, usability, etc. For this class, check out their web design section.