Goshtied
http://ddm.caad.ed.ac.uk/mscpages/0910/groups/projectis/letsparty/

Alba Organics
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group2/home.cfm

Noman
http://ddm.caad.ed.ac.uk/mscpages/0910/s0971087/noman/index.php

RE_DE
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group6/index.cfm

INA
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group3/INA/index.cfm

Hidden Place
http://ddm.caad.ed.ac.uk/mscpages/0910/s0974033/HiddenPlace/index.php

Design I&O
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group1/dio/

Ushirt
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group8/

Contemporary Harvest
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group4/FinalPages/index.cfm

CakePunch
http://webdbdev.ucs.ed.ac.uk/ddm/2009-2010/group7/index.cfm

API stands for Application Programming interface. Application providers (e.g. Google, Yahoo etc.) may offer a set of methods and classes for interfacing with the data and services that they host, so that their content and code can be used by third party users.

For example, a simple example might be to use a BBC weather feed on your own locally focused website.

http://newsrss.bbc.co.uk/weather/forecast/5/ObservationsRSS.xml

Here’s a list of some websites that offer open APIs

• Amazon
• Ebay
• Digg
• Flickr
• Delicious
• Google
• Yahoo (Pipes)
• BBC (Backstage)

What is a Mashup?

A mashup takes advantage of information already available on the internet. Instead of adding new content to the web, they reorganise and combine data to suit a particular purpose.

We’ll work with the Flickr and Google Maps APIs, but also see some of the other examples listed.

• http://ddm.caad.ed.ac.uk/dynamic/apiflickr.html
• http://ddm.caad.ed.ac.uk/dynamic/googlemaps
• http://delicious.com/mikegreer/mashup/
• http://mashupawards.com/winners/

• Javascript Basics
• The Document Object Model
• Javascript examples
• Tabbed form example
• Toggled list example
• Form validation example
• Quicktime swap example

Links

• Mozilla Developer Resources
• jQuery
• DHTML Drag (Brainjar)
• DHTML Drag (Dynamic Drive)
• Dynamic AJAX Content (Dynamic Drive)
• Form validation tutorial (W3Schools)
• Validating forms with Cold Fusion

http://ddm.caad.ed.ac.uk/handbook/category/dynamic-web-design-p00177/

Synopsis

This course introduces the challenges of setting up a web site integrating interaction with databases, web services and other technologies that are common to many creative, as well as commercial, applications.

Course notes

Here are links to course notes, tutorials etc. Note that some of the notes are out of date in various ways, e.g. there may be some broken links or links to examples that currently don’t work (due to things changing on the CF server).

As far as I know, all the CF material that actually appears in the notes should work, even if online versions of it no longer exist. Some of the notes will not be used in lectures this year, or material may be re-ordered or augmented with other things, but the notes may still be of interest. This page may be added to as we go along.

Additionally to the lecture notes, there are:

• theCF forms tutorial
• theCF database tutorial.

1. ColdFusion/MySQL introduction
2. (Instructions for using local servers)
3. More ColdFusion
4. Dynamic HTML
5. Evaluation/usability
6. Defensive programming plus cookies/sessions
7. ColdFusion Components (and the ImageServer)
8. Working with APIs
   
9. XML
10. Flash Remoting
11. Project Alpha Website Reviews
12. Some useful SQL snippets

Note (not all of these things will necessarily be referred to in this year’s

lectures or tutorials):

material relating to Flash Remoting (not Dynamic Flash as above) is in the

directory …\2009\test\Remoting (on the CF server);

• examples of consuming web services are in …\test\currency.cfm and quote.cfm;
• simple “content manager” (example by Richard Coyne) templates are in …\2009\test\ContentManager;
• example of image processing tag is here.

Any problems, just let me know …

John.

Pick a page you like / dislike / use online, take a screen shot of it, and annotate it any way you wish (either by printing it out or in a software package).  Work in groups or individually.  Be harsh with your critique, really point out the flaws in the website you have chosen.  Present the flaws in your site briefly.  Be even more brief about the site’s strengths.  You should be prepared to explain / defend your opinions.

(screen shot on a mac: command, shift + 3, or command, shift + 4 to allow you select a part of the screen).

Examine

• Look and feel
• Novelty / originality
• Layout
• Interface/ interaction design
• Technical issues
• Clarity
• Flexibility

Are there any universal web design rules we can agree on?

Image from:  38minutes.ning.com/profiles/blogs/this-is-how-to-write-a-brief

Out there, in the real world, design briefs are used as contracts between designer and employer. In some circumstances, the employer will have already formulated the design brief and how it will be  costed and realised but often, it is down to the designer to deal with this issue because the client has not decided what they want yet.

One of the main reasons why you should write your own design brief is because you understand what you are capable of, what needs to be done when, and you, the designer, have the design-language to hand that you understand and can interpret.

Design briefs are very useful because they tell you when you are going off brief, they define your working parameters. They give confidence to the people you are working with that you know what you are doing and that your progress can be checked. You know what you are being paid for too.

Here’s some advice from Peter Philips on the Design Council’s website:

http://www.designcouncil.org.uk/resources-and-events/Business-and-public-sector/Guides/Briefing/Reasons/

A review of Peter Phillips’ book Creating the Perfect Design Brief is here;

http://www.underconsideration.com/speakup/archives/001931.html

However, neither the finished design, or its brief need to be perfectly synchronised. It is sometimes in the misunderstandings and misinterpretation of intentions that interesting accidents take place.  You’ll have observed this yourselves in your own work, when your initial idea or concept evolves into something quite different as you actually make it.

A common difficulty working with employers is that they have a pre-defined notion of what they want, that they would like things to look or sound a certain way. They then tie the designer to a guide example they wish to be emulated. This can be quite terrifying and sometimes soul destroying.  However, emulation is no small challenge and can be a very creative process, unpicking and analysing the guide example for what is distinctive, trying to understand why the client has asked for this and then perhaps even trying emulate the methodology that was used on the example you’ve been given can be very good ways to develop technique. Designers and painters have all done this in order to gain a deeper understanding of the work of their masters e.g. Gerald King copying the old masters.

You might find this debate interesting:

From here: adland.tv/content/south-african-bmw-ad-plagiarizes-artists-work

For more discourse on the issue of plagiarism and art:

The Conflict

It is often thought that there is a conflict between the creative process and completing a design brief on time and to specification. Creativity is a risky, indulgent, luxurious, flexible, deviant and exploratory form of study, it tends to resist borders and deadlines preferring to push beyond defined parameters. A design project on the other hand may need to meet some very specific requirements outlined and defined in advance. Very difficult briefs may also specify something creative and ‘never seen/heard before’ and this expectation may be folded into the brief and given a time or monetary allocation both of which tend also to be resisted by “creativity”. This kind of request can be analysed however, what does the client already know about, what would “seem” new and original to them for example?

However, creativity can also expand in confined spaces; as Plato said, “Necessity is the Mother of Invention” Plato, The Republic. http://www.bartleby.com/59/3/necessityist.html

By putting borders around your work, placing yourself within a framework, you actually put yourself in a position where you can be creative.  There is something to resist and push against and this works for design and composition.

Stress

Stress is an optional extra in design. Basically, you can choose to work stressed or choose to work cool. Whether you are stressed or not, the deadline still needs to be met.

In some circumstances, a bit of stress can help get the juices flowing but too much stress and in the wrong area and you might find you are wasting time. Stress is best if it is managed and a good design brief can help you manage it by allowing you to see how and when you are off target, devoting energy in the wrong area. Some people even think of stress as a luxury and surveys of how stressed people are suggest that it is the more financially comfortable who claim to be most stressed (people in full time employment).

Try this stress survey.

Have a look at this short article

Life Hacking

See the wikipedia article.

Life hacking is a way of dealing with problems in order to get them done. It comes from computer programmers who in order to solve a problem resist the temptation to make software that is perfect, bug free and solves multiple problems but instead solves the problem in hand and leaves perfection for later (or someone else).

This can be a very good lesson in design. Often we want to make the whole project work seamlessly. Perhaps by taking lots of high resolution photographs to make a graphical logo. A life hack might mean that you develop a vector graphics logo that is infinitely scalable.

Getting things Done

David Allen’s book Getting things done (2003) provides a philosophy for getting things out of your head and onto paper where they can be managed in a more organised way. Essentially, if you can deal with something in less than 3 minutes, do it there and then, if it might take longer and you don’t have the time, add it to your list and deal with it later. With it out of your head, it no longer causes stress.

Allen, D. (2003). Getting things done : the art of stress-free productivity. New York, Penguin.

A provisional brief from a a real-world graphic designer to a client

This brief was generated following a meeting with the project manager. It is written out in longhand dealing with issues discussed at the meeting.

Dear XXXXX

Following our meeting on 23 January I am submitting an outline of the design brief for your approval. Please make any amendments or additions to the text as necessary.

Outline Brief

Design of a series of documents in PDF form for XXXXXXXXXXX, to be used to XXXXXXXX

Size and Format

Each document will be available in a PDF form that can downloaded from the XXXXX website, emailed to prospective clients or printed within high street print services. As the documents will be printed on domestic printers the design should not require full-bleed printing and should restrict text to printable areas (e.g. not place information on colour-coded edges). Each document will be A4 size and typically two to four pages in length.

Content

The content, similar to the example given, will consist of text and images supplied for each XXXX by representative members of each department. Department staff will be able to source images from slide libraries, the Company Web Officer and other collections within the departments and Company as a whole. The designer will be responsible for editing, adjusting or cropping supplied images as appropriate. Text for each course would be supplied in a single document and in a format which allows copying and pasting (e.g. Microsoft Word).

Design Requirements

We discussed the aims of the Company to provide printed information which looks focused, contemporary and ‘slick’. The documents’ design should be consistent across the Company possibly differentiated through colour for individual departments. We looked at the current Company Literature for comparison but specific tie-in with its design was not required. We looked briefly at typefaces and noted that the Company’s specific compliancy restrictions on font size et al. do not apply.

Communication

The designer should liaise with directly with project manager for the project as a whole and with a single representative from each department to obtain content for each section.

Timescale

As Company information is given out throughout the year the COMPANY has no specific deadlines. No timescales were outlined as content is yet to be prepared. If this is expected to take some time the initial design could be created using either headings and dummy text or text and images from the Department example given [let me know if you would like me to do this]. Timescales for preparing content and subsequent design deadlines would be decided by individual departments and project manager

If you or your colleagues would like to discuss any part of this do contact me via any of the details above.

Kind regards

XXXXXXXX

Some Good Advice from an Edinburg-Based design cooperative

http://www.graphics.coop/print/briefing-meetings.html

Graphic design blog, another useful resource

http://www.graphicdesignblog.co.uk/would-design-students-be-interested-in-seeing-real-briefs/

Advice to Clients who have to write design briefs

http://www.cleardesignuk.com/design-brief.html

More Examples

• http://elise.com/web/a/writing_a_creative_brief.php
• http://www.peachpit.com/articles/article.aspx?p=102277&seqNum=2
• http://www.gotomedia.com/downloads/sample_creative_brief.rtf
• http://www.adobe.com/resources/techniques/resources/define/creative_brief.rtf
• http://www.davidairey.com/10-tips-for-writing-graphic-design-briefs/
• http://justcreativedesign.com/2008/09/26/how-to-write-an-effective-design-brief/
• http://articles.sitepoint.com/article/requirements-gathering
• http://www.graphicdesignblog.co.uk/why-is-a-good-design-brief-so-important/
• http://www.marketing-designers.com/design_brief.html
• http://identityworks.com/tools/guidelines_and_standards_manuals.htm

Writing your own project brief

It is helpful if you have a structure you can follow that will allow you to measure your progress as you work.

The model would be different in different contexts. You would do well to think about your context and work within in.

For example at University we usually ask for critical framework for the ideas and create our briefs and courses to a context of learning and developing individual/group creative output. This model may not work in the real-world but helps in an educational situation.

Description/Idea: including context: A description of the idea, where it comes from and perhaps why it will be worth working with.

Project Aims: What is the central aim of the project?

Learning outcomes: What do you expect to learn?

Practical outcomes: What will actually be presented?

Resources Required: Systems, tools, access to equipment or people?

Timeline: When will things will be done by and in what order?

Bibliography/References/Tools/Utilities: A standard requirement

It’s benefits include: a high degree of interactivity and adaptability including frame based and ‘programmed’ animations.

Task

The News loves motion graphics.  Illustrate (by way of a very short animation) a historical event which happened on this day in history (29th October).

• http://news.bbc.co.uk/onthisday/default.stm
• http://www.on-this-day.com/onthisday/thedays/alldays/oct30.htm

Publish the html file and embedded flash movie into a folder called ‘news’ in your sites directory and post a link to the ddm messageboard

Tips

For motion tweening, you *must* convert your graphic to a symbol. To do this, select the graphic on the stage and select Modify > Convert to Symbol from the top menu. At this stage keep the symbol as type ‘Movie Clip’. Remember to name your symbol to be something meaningful!

Once your graphic has been converted to a symbol you can create a motion tween by selecting the graphic and right-clicking (or ctrl-click on a mac) and choosing ‘Create Motion Tween’.

Flash will insert a number of frames for you and automatically select the final frame of the sequence. Drag your symbol to the part of the stage you wish it to end up in and Flash will create the motion path. By positioning the playhead along the timeline you can create other tween points.

You can import other types of graphics into Flash using File > Import > Import to Library (or Import to Stage)

You can publish an HTML file containing your Flash movie by selecting File > Publish  (N.B. you might want to amend the Publishing settings first).

Useful Flash Links

• http://www.w3schools.com/Flash/default.asp
• http://www.flashkit.com/tutorials/
• http://www.entheosweb.com/Flash/flashcs4_animation.asp
• http://www.kirupa.com/developer/flash/index.htm
• http://www.kirupa.com/developer/flashcs4/video/motiontweens_cs4.htm
• http://www.10000words.net/2008/09/8-flash-tips-and-tricks-one-big-cheat.html
• Adobe CS4 Motion Tweens

Key to this is the use of the media query

We can insert this code into our header to supply 2 stylesheets for screen and smartphone.

<style type=”text/css”>
<!–
@import url(”css/advanced.css”) screen;
@import url(”css/iphone.css”) only screen and (max-device-width: 480px);
–>
</style>

finally we need to tell IE to do the right thing!

<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]-->
<!-- tell iPhone not to shrink mobile website -->

next we can control the 'shrinking' of the screen for iphone


<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />

Setting the width of the viewport (default is 980px) eliminates any empty space from the page

Links

• http://www.w3.org/TR/css3-mediaqueries/
• http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/
• http://www.alistapart.com/articles/putyourcontentinmypocket/
• http://furbo.org/2007/07/24/one-line-of-code/
• http://www.iphonetester.com/
• http://multimedia.journalism.berkeley.edu/tutorials/elements/embedding/

This is an abstract exercise. No text or explanation on theweb page please. No clipart or images by other people from the Internet. Focus on quality and interest value. Take account of colour contrasts and contrast of extension. Use http://kuler.adobe.com or http://colr.org

Remember, it doesn’t have to mean anything to be cool.

Links

http://www.worqx.com/color/

We’ve already looked at images using the img tag, but we still need to optimise images before they are added to a web page.  You can do this in Photoshop by first resizing the image for you page (Image > Image Size), and then using ‘Save for Web and Devices’ (File > Save for Web & Devices).  The dialogue box which pops up will allow you to compare your image at different levels of compression.  Obviously, there is a trade off between quality and loading time, and you need to decide what suits your users best.

You can also optimise images from within Dreamweaver.  Place your cursor in the img tag, and go to the Properties panel at the bottom of the page:

In the Edit section of the panel, you can export your image to photoshop or optimise it directly in Dreamweaver.  Clicking the optimise button (the one which looks like a clamp) opens up a new dialogue.  On the left, you can pick the % quality of the image to retain.  On the right, you can see your work of art slowly destroyed.

Video – Youtube / Vimeo

Vimeo lets you upload good quality video without ruining it.  It also now comes in hd, if that’s your thing.  You can embed a vimeo player into your site by clicking on the ‘Embed’ button on the video itself:

Copy the code from the dialogue box which pops up, and paste it directly into your HTML.

Note that this doesn’t just embed the video, but the whole vimeo player, so vimeo buttons and links to other videos are obligatory.

Youtube offers similar functionality: the embed code is on the right of the page, under the video description.  Copy and paste this into your code to embed the youtube player.

Video – quicktime

1. In Dreamweaver, go to Insert > Media > ActiveX and hit enter.
2. Dreamweaver will add some code, and links to scripts to your page.  When you next save, it will place a copy of these scripts into a folder called ‘Scripts’ in your site.
3. Place your cursor in the object tag (here: <object width=”32″ height=”32″>).
4. In the properties panel at the bottom of the page, you should see this:
5. Tick the ‘Embed’ box.
6. Click the folder icon at the end of the ‘Src’ section, and browse to your video (make sure it’s within the folder of the site you’re working on).
7. You’ll also need to specify the width and height of the video in the W & H fields.  Add an extra 15px to the height to account for the video controls.
8. To control the video playback, click the ‘Parameters’ button.  You might want to add parameters for ‘autostart’, ‘controller’ or ‘loop’ (which can each have a value of ‘true’ or ‘false’).

Flash

Flash is brilliantly simple to add in Dreamweaver.  From the top bar, go to ‘Insert > Media > Flash’.  From the ‘Select File’ dialogue that opens, pick the .swf file you want to embed.  If you need to change any properties of the swf, place your cursor in the lower half of the code, and go to the Properties panel at the bottom of the page.  You can resize, set a background colour, or add parameters to pass to the swf (depending on its design).

Sounds

There is a flash audio player here but feel free to use others.

It’s probably a good idea to wrap each instance of the player in a div to give you more control of the page layout.

To offer audio files for download, place a link to the file in your site, along with an instruction to the user to “Right click the link and select Save As / Save Target As”.  Alternatively, you could create a zip of the file (or several files), and provide a link directly to this.

Just like with video and images, you’ll need to optimise audio for the web.  Particularly, if using flash, you’re best to stick to mp3s.  mp3 versions of your sounds are available on infrar.ed.  On the page for an audio resource on infrar.ed, right clickone of the links at the bottom, and chose Copy LInk Location.  If you’re not signed in to EASE, you’ll get something like this:

http://blue.caad.ed.ac.uk/infrared/_getResourcePreview.cfm?id=00000&level=2

Which is what we want, although we’l need to delete the ‘&level=2′ if we want it to work in the flash player linked above.

If you are signed into EASE, copy the public URL from the top of the page (http://blue.caad.ed.ac.uk/infrared/_getResource.cfm?id=00000) and add ‘Preview’ after ‘Resource’:

http://blue.caad.ed.ac.uk/infrared/_getResourcePreview.cfm?id=00000

To get a whole folder of links, use the ‘Show List of Links’ button at the top of the folder.

Flash slide show

Dreamweaver has a Flash slide show component which we can use without having to fire up Flash.  Go to ‘Inset > Media > Image Viewer’. Choose where to save this flash component (place it into your site’s ‘media’ folder, or similar).  Place your cursor into the second half of the code (after ‘<object…’).  In the right hand panel, you should see the following:

By clicking on the value for ‘imageURLs’, you can change the array of images which the slide show will display.  At a minimum, you should also change what the images will link to (if anything) and the image captions.

You’ll find that you end up with a fairly generic slide show, which a fairly large interface and powerpoint-esque transitions.  To make an image rotator, you can switch the controls off (showControls to ‘No’) and tell the slide show to auto play (slideAutoPlay to ‘Yes’).  Finally, you can control the transition type by clicking on its value (’Random’), and then pick from the menu which appears.

An example image rotator.

Even using thes fairly simple components, we can build some fairly complex pages.  By slicing up an image into thin pieces, and creating multiple instances of the same flash payer, we can create some interesting effects:

Parliament remix.

A page within a page.

You can use iFrames to embed other web pages into your own site.  In your HTML page:

<iframe src="http://ddm.caad.ed.ac.uk" height="200" width="560"></iframe>

A lot of the above methods of remixing the web are fairly quick and dirty, and are often not ideal for producing pristine sites.  However, you should find that you can produce sites fairly rapidly with these techniques, which will be handy for this afternoon’s task.