Assignment Hand In

Your assignments are due on Monday the 14th at 9:30am, please fill out an assignment cover sheet and hand the assignments in to Student Services in building 3. If you’ve lost your cover sheet, you can download it here – Assignment Cover Sheet.

Student Services won’t accept late assignments, so if you can’t meet that deadline you’ll need to contact me and get it to me somehow. If you don’t have my email address, it is katie (at) deliciousmint.net.

The Secret Foundation of Web Design

http://www.drawar.com/articles/the-secret-foundation-of-web-design/232/

jQuery Image Galleries

If you do a Google search for jQuery image galleries you’ll have no shortage of options. I’d suggest finding one that seems to be very popular as it means they’ll have a good community & support base that can help you out if you get stuck.

The following are jQuery galleries that I use and can recommend:

• jQuery Cycle – http://jquery.malsup.com/cycle/
• jCarousel – http://sorgalla.com/jcarousel/
• Nivo Slider – http://nivo.dev7studios.com/
• Coda Slider, can be used for text and other content too – http://jqueryfordesigners.com/coda-slider-effect/
• Another Coda Slider – http://www.ndoherty.biz/demos/coda-slider/1.1.1/
• Galleria – http://galleria.aino.se/
• Supersized – http://www.buildinternet.com/project/supersized/

Flash Image Galleries

The main Flash galleries I’ve used are:

• SimpleViewer – http://simpleviewer.net/simpleviewer/
• AutoViewer – http://simpleviewer.net/autoviewer/

James was using a different one so he may be able to give you the code for that if neither of the above options are suitable for you.

Advice from my friends who are web designers

I asked my designer friends for some tips for students who are learning web design. This is the advice they have for you:

• to have a lot of patience
• suggestion for them to learn and use Fireworks? out with tables, in with divs. CSS ftw.
• Be very clear about the goal of your site is – who’s going to go to us it, why and how.
• Set your workspace up properly – measure in pixels, get grids set to 1px increments. Keep your output device in mind…
• Web isn’t print and can’t be treated the same. Make sure everything is “on pixel”. Be aware that you need to show clients functionality as if you don’t spell it out they can’t visualise it & can potentially be disappointed with results. Communicate too much rather than not enough – your client will be nervous if you are a student, and if you explain what you’re doing and involve them in the process, they will be more understanding if you do make a mistake – and you will as web is tough. Be flexible.
• Also remember u are not the user. Don’t just make shit up, use established conventions like YUI as a base for the important functionality
• Make sure it’s build-able. Learn code / ask a developer pre-designing. Wireframe so u know what’s on each page – get sign off 1st!
• Don’t be too precious about your design/build, because the client’s always going to change it at the last minute…
• Hell yeah. Remember above all else that you’re in a service industry. People are entitled to request changes 2 your work
• don’t forget to talk to the client about maintainance/updating time, and training if a CMS.
• And most of all… Remember to LOL… The World Wide Web is a fun place to be.
• Do what you say you’ll do and treat people with respect. The industry is WAY too small to be burning bridges.
• Try something new in every project. It doesn’t have to be big new
• Follow @smashingmag loads of good links to build skills & knowledge
• Always remember: You rock the grid, the grid doesn’t rock you.
• It’s not print.

Week Nine

Flickr

• Create a badge on Flickr’s website to embed on your website

Twitter

• Create a badge on Twitters website to display your latest tweet(s) on your website.
• Create an RSS enabled micro blog using Twitters API
• Twitter libraries
• php-twitter (my preferred PHP Twitter class)

Google Maps

Pamela Fox from Google gave a talk called at Web09 earlier this year titles “Avoiding Red Dot Fever: Tips for Improving Usability of Maps Mashups”. It was a series of tips for ways web developers could improve the maps on their sites, based on her experiences seeing many badly-designed maps over the past two years. You can download her slides here.

Mashups

• http://www.hypetape.com/ – By Jarred Bishop
• http://www.faabric.com/ – by Jarred Bishop
• http://twistori.com/ – using Twitter’s search API
• http://woozor.com/ – A Google Maps / Weather.com mashup providing 10 day weather forecasts all around the world.
• http://portwiture.com/ – Grabs photography from Flickr that matches the content of your most recent Twitter updates.
• http://helveti-tweet.geenius.co.uk/ – A stylish stream of Twitter updates that mention the word Helvetica.
• http://lolwr.us/ – Create LOLCATS style images by matching tweets with photos from Flickr.

Week Eight

Resources:

• How to submit a form using AJAX (so that the page doesn’t have to reload when the submit button is pressed)
• Stack Overflow – great resource for troubleshooting programming questions.

Local mailing lists:

• NZ Web Dev mailing list
• PHP Users group

Local meetups:

• Web Meetup – the biggest, great for learning and also for meeting people in the industry. Also, free beer & pizza.
• PHP Meetup
• Drupal Meetup – Drupal is my favourite open source content management system
• Magento Meetup – Magento is an open source e-commerce solution
• Girl Geek Dinners

Week Seven

To execute PHP on your computer:

• MAMP
• WAMP
• XAMPP

PHP Tutorials:

• http://www.w3schools.com/php/
• http://www.php.net/manual/en/

Week Six

Bad HTML tags – if you are using Dreamweaver or similar, make sure it isn’t using tags like these.

A tool to help create a navigation matrix, useful for creating CSS rollovers for menu items.

JavaScript Frameworks:

• jQuery
• Prototype
• MooTools
• Scriptaculous
• Dojo
• EXT Js

Great source for learning specific effects in jQuery – jqueryfordesigners.com. Also see the tutorials on jquery.com.

Text Replacement:

sIFR – uses Flash.

Cufon – I suggest using this, it’s what we covered in class.

Week Five

HTML Editors:

• Coda
• Espresso
• TextMate
• Notepad++ (for PC)

FTP Clients:

• FireFTP (Firefox Add-on)
• Transmit
• Cyberduck
• FileZilla (Free, for all platforms)

Firefox Add-ons:

• Firebug
• HTML Validator
• Web Developer Toolbar
• Colorzilla
• MeasureIt

Recommended Books:

• Web Standards Solutions: The Markup and Style Handbook
• Bulletproof Web Design
• Handcrafted CSS
• Designing with Web Standards
• CSS: The Definitive Guide
• HTML Dog: The Best-Practice Guide to XHTML and CSS
• Sexy Web Design
• Accessible XHTML and CSS Web Sites