Hypermedia 2009

Week Eleven

hypermedia2009 — Tue, 20 Oct 2009 22:12:56 +0000

Content Management Systems

Drupal – the best, good for pretty much any type of site : )
WordPress – good for blogs or small websites that need content managed pages and a small amount of extra functionality
Magento – good for standalone online stores
Ubercart – Drupal’s ecommerce module, great for websites that need to sell online and have extra functionality too.
Silverstripe – New Zealand created CMS
ExpressionEngine – good commercial CMS
Perch – a really little Content Management System

A great new post about usability testing by Robert Hoekman Jr is on A List Apart – recommended reading.

Week Ten

hypermedia2009 — Thu, 08 Oct 2009 22:38:54 +0000

Jeffrey Zeldman – Rules-based Design – http://www.zeldman.com/daily/0403b.shtml#ap3003

A List Apart article on fluid grids – http://www.alistapart.com/articles/fluidgrids

Ethan Marcotte wrote the above article, his website is http://unstoppablerobotninja.com/ – try resizing the browser and notice how the elements resize to fit the new width. http://thevintageaviator.co.nz/ is another example of this, but not to the same extent as Unstoppable Robot Ninja.

Smashing Magazine has an article on usability – http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/ and members of the IxDA disagree with some points – http://www.ixda.org/discuss.php?post=46010&search=usability

My friend and Unitec graduate / ex-Hothouser Vicky Teinaki writes at Johnny Holland – http://johnnyholland.org/ and has provided us with some usability resources that you may find helpful:

Books: Steve Krug’s ‘Don’t Make Me Think’ – very good, also Alan Cooper’s ‘The Inmates are Running the Asylum’, anything by Jacob Nielsen.

Sites: UPA http://www.upassoc.org , Jared Spool’s UIE podcasts/newsletters http://www.uie.com/
Jacob Nielsen is always good, though his site is a bit sore on the eyes http://www.useit.com/alertbox/20030825.html
Jennifer Tidwell’s ‘Designing Interfaces’ is online http://designinginterfaces.com/
Also the Yahoo Pattern Library http://developer.yahoo.com/ypatterns/ (Another name to look at would be Christian Curmlish from Yahoo – a ‘pattern detective’ who does a lot about social user interfaces).
Donna Spencer owns cardsorting: http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide
Andy Budd does a lot on Guerrilla Usability Testing (his workshop in 07 was great, think these are most of the slides!http://www.slideshare.net/andybudd/guerilla-usability-testing )

The IXDA mailing list also has a lot on this stuff too.
Case studies could include the Digg redesign process from Daniel Burka: http://www.webdirections.org/resources/daniel-burka-interaction-design-case-studies/ and http://media.ixda.org/interaction08/video/Saskia_Idzerda.mp4 Sakia on redesigning the Sony Ericsson store.

Vicky is insanely smart and posts a lot of useful links on Twitter, so if you use Twitter you should follow her!

Week Nine

hypermedia2009 — Thu, 24 Sep 2009 22:24:00 +0000

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

hypermedia2009 — Thu, 17 Sep 2009 23:28:44 +0000

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:

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

hypermedia2009 — Fri, 11 Sep 2009 00:16:07 +0000

To execute PHP on your computer:

PHP Tutorials:

Week Six

hypermedia2009 — Sat, 05 Sep 2009 05:08:44 +0000

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:

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

hypermedia2009 — Thu, 27 Aug 2009 22:44:00 +0000

HTML Editors:

FTP Clients:

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

Firefox Add-ons:

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

Week Four

hypermedia2009 — Fri, 21 Aug 2009 06:57:22 +0000

Will is going to put a PDF on the server about the Photoshop / Saving for web stuff we covered today – if it’s not there soon hit him up about it.

Create an image map – How to create an image map, with clickable regions. Each region is a hyperlink.

GIMP – Free, open source image editor in case you don’t have Photoshop at home.

Week Three

hypermedia2009 — Thu, 13 Aug 2009 22:59:12 +0000

Again, notes and code from today are on the Student Resources server, in the folder called Katie Graham. Please email me (katie@deliciousmint.net) if you have any questions during the week.

CSS Resources:

20 Useful CSS Tips for Beginners
CSS Tutorials

Web-safe Typefaces:

Article on Wikipedia
List of web-safe fonts
Web-safe font tester

Week Two

hypermedia2009 — Fri, 07 Aug 2009 00:31:16 +0000

Notes from today are on the Student Resources server, in the folder called Katie Graham. I’ve also put the HTML documents from today in there too, in case you need to refer back to my code.

Remember that when working in TextEdit that you need to change the format to plain text. Also, if you have closed your file and need to re-open it, you’ll need to open it in a browser and copy and paste the source code – right click on the page and choose view source to do this.

Meta tag resources: