Simcoemedia Design Guide - A design guide for web, print, video and audio

Type the text for '(built-in shadow tiddler)'

Type the text for 'ADOBE RGB'

ASP stands for [[Active Server Pages]]

Active Server Pages is Microsoft's server side script engine designed for Windows Servers. This script allows the construction of Dynamic Web Pages allowing the web user to interact with databases and other web page functionality such as the use of sessions.

Adobe's gamma settings

config.options.chkHttpReadOnly = false;\n

Anton Corbijn is the legendary designer, photographer and film-maker who has worked with the likes of U2, Depeche Mode, Nirvana, Simple Minds and other classic bands.

See [[Tim Berners-Lee]]

Read and write Microsoft Office documents as well as ''OpenOffice'' format.\nhttp://www.openoffice.org\n\nEdit photographs and illustrations with ''GIMP''\nhttp://www.gimp.org\n\nRecord your audio material with ''Audacity''\nhttp://audacity.sourceforge.net/\n\nInstall ''multiple versions of Internet Explorer'' on your PC\nhttp://tredosoft.com/Multiple_IE\n\nView WMV files on your Apple Mac by downloading ''Flip4Mac''\nhttp://www.microsoft.com/mac/products/flip4mac.mspx\n\nCreate a blog or news page using Wordpress\nhttp://www.wordpress.com\n\nSend large files over the internet using ''YouSentIt.com''\nhttp://www.yousendit.com/\n\nView your images in an interactive 3D environment with ''PicLens''\nhttp://www.piclens.com\n\nPlace pins on a map to show your location and your clients with ''Zeemaps''\nhttp://www.zeemaps.com

''Definition'' according to http://www.wikipedia.com\n\n>A blog is a website where entries are made in journal style and displayed in a reverse chronological order. @@Blogs often provide commentary or news on a particular subject@@, such as food, politics, or local news; some function as more personal online diaries. A typical blog combines text, images, and links to other blogs, web pages, and other media related to its topic. Most blogs are primarily textual although some focus on photographs (photoblog), videos (vlog), or audio (podcasting), and are part of a wider network of [[social media]].\n\n

''CYAN'' - this is made up of green and blue LIGHT equally. It contains no RED. Designing with CYAN can include creating darker skin tones, enhancing flesh colours, brightening shadows or deepening darker colours. CYAN is not typically used on its own and designers often go for BLUE.\n\n''MAGENTA'' - this is equal amounts of RED and BLUE LIGHT and is a direct compliment of GREEN [opposite on the colour wheel]. Widely used in fashionable times for decorative home items and clothing. One theory about magenta is that its proximity to red again stimulates, excites and creates activity ie not a calming colour like blue or green.\n\n''YELLOW'' - the most visible yet most eye-fatiguing colour in the visible spectrum. Associated with the sun, happiness, positivity. Very few designers would typically pick this as their favourite and it is often associated with children eg through products.\n\nThe ''K'' in CMYK is refering to KEY [or usually BLACK]. Essentially KEY is refering to the 'key plate' where the artwork is held together by black elements or outlines.\n\nCombining pure cyan (C), magenta (M), and yellow (Y) pigments would result in black by absorbing, or subtracting, all colors. For this reason they are called subtractive colors. Black (K) ink is added for better shadow density. (The letter K came into use because black is the "key" color for registering other colors, and because the letter B also stands for blue.) Combining these inks to reproduce color is called four-color process printing.

The problem with using different devices such as computers, digital cameras and scanners is that they all have different limitations on how they can translate colour reflected from every day objects such as grass, trees and other visual elements. To understand in which space the device is operating it must be calibrated to a standard space to see where colours are added or removed in relation to this.\n\nWhen using a computer, use the ADOBE GAMMA SETTINGS under the CONTROL PANEL options to balance the screen to its correct calibration. Then select correct colour management scheme under the COLOUR SETTINGS in Photoshop and Illustrator - region based settings are often most accurate and using ADOBE RGB workspace with RELATIVE COLOURMETRIC is a good setting to use.\n\nBy switching on GAMUT WARNING you are able to get highlights on any colours outside the working space [eg CMYK, RGB]. You can then make alterations to the image where necessary by using options such as HUE / SATURATION levels to correct the image for output - as many colours as possible with then be viewed accurately prior to print. Alternatively, use the COLOUR RANGE tool for a more accurate or location specific \n\nBLACK POINT COMPENSATION is the way a colour managed system will account for a black point on a different device's colour management system.\n\nTo select the closest CMYK equivalent for a nonprintable color: click the triangle in Illustrator and Photoshop to adjust to the CMYK value.\n\nTo select the closest Web-safe equivalent for a non-Web-safe color: click the cube to adjust to the correct colour.\n

- HUE - another name for colour\n- SATURATION - the purity of a hue. Less saturated colours are mixed with a neutral / grey / black tone.\n- VALUE - how dark or light a hue appears to be relative to black or white. By squinting eyes a judgement of relative hue can be established.\n- TINT - the level of solidity of a colour usually seen as a % white\n- Use colour wheels and colour theory to generate attractive colour schemes.\n\nCOMPLIMENTARY - the exact opposite on the colour wheel\nANALOGOUS - any three adjacent hues are placed together can also be varied to be 'every other colour' around the palette\nSPLIT COMPLIMENT - take a hue then choose colours either side of its compliment\nTRIADS - any three hues equally spaced on the colour wheel\nMONOCHROMATIC - a single hue that may be used as a selection of tints.\n\n"A well chosen ink can be flooded over a surface, featured in any number of lighter tints or combined with one or two other inks for cost effective impact." \n\n- Using white next to a hue can make the hue look cooler. Using black next to a hue can make the hue look warmer.\n- Higher saturations of ink makes elements look closer to the viewer and lower saturation or % tints make the object / text look further away. Things further away are duller.\n- Use higher contrast for smaller text.\n- When creating body text it is always best not to use tints. At such small scale the effect will be that the printing methods may make the type look jagged due to the addition of white / background colour\n\n- the K in CMYK is refering to KEY [or usually BLACK]. Essentially KEY is refering to the 'key plate' where the artwork is held together by black elements or outlines.\n\n- MAGENTA - this is equal amounts of RED and BLUE LIGHT and is a direct compliment of GREEN [opposite on the colour wheel]. Widely used in fashionable times for decorative home items and clothing. One theory about magenta is that its proximity to red again stimulates, excites and creates activity ie not a calming colour like blue or green.\n\n- CYAN - this is made up of green and blue LIGHT equally. It contains no RED. Designing with CYAN can include creating darker skin tones, enhancing flesh colours, brightening shadows or deepening darker colours. CYAN is not typically used on its own and designers often go for BLUE.\n\n- YELLOW - the most visible yet most eye-fatiguing colour in the visible spectrum. Associated with the sun, happiness, positivity. Very few designers would typically pick this as their favourite and it is often associated with children eg through products.\n\n- Combining pure cyan (C), magenta (M), and yellow (Y) pigments would result in black by absorbing, or subtracting, all colors. For this reason they are called subtractive colors. Black (K) ink is added for better shadow density. (The letter K came into use because black is the "key" color for registering other colors, and because the letter B also stands for blue.) Combining these inks to reproduce color is called four-color process printing.

The problem with using different devices such as computers, digital cameras and scanners is that they all have different limitations on how they can translate colour reflected from every day objects such as grass, trees and other visual elements. To understand in which space the device is operating it must be calibrated to a standard space to see where colours are added or removed in relation to this.\n\nWhen using a computer, use the Adobe Gamma Settings under the Control Panel options to balance the screen to its correct calibration. Then select correct colour management scheme under the [[COLOUR SETTINGS]] in Adobe Photoshop and Adobe Illustrator - region based settings are often most accurate and using [[ADOBE RGB]] workspace with [[RELATIVE COLOURMETRIC]] is a good setting to use.\n\nBy switching on [[GAMUT WARNING]] you are able to get highlights on any colours outside the working space [eg [[CMYK]], [[RGB]]]. You can then make alterations to the image where necessary by using options such as [[HUE]] / [[SATURATION]] levels to correct the image for output - as many colours as possible with then be viewed accurately prior to print. Alternatively, use the COLOUR RANGE tool for a more accurate or location specific \n\nBLACK POINT COMPENSATION is the way a colour managed system will account for a black point on a different device's colour management system.\n\nTo select the closest [[CMYK]] equivalent for a nonprintable color: click the triangle in Illustrator and Photoshop to adjust to the [[CMYK]] value.\n\nTo select the closest [[Web-safe]] equivalent for a non-Web-safe color: click the cube to adjust to the correct colour.

It is hard to predict the emotional responses generated by colour as they often vary from person to person. However, there are a few general principles to be noted such as:\n\n''OWNERSHIP'' - a brand such as ORANGE picked a colour that was out of fashion [was last in fashion in the late 60's then used throughout the 70's on many decorative patterns.] ORANGE have layed claim to this colour through strong marketing and promotional material.\n\n''CORE COLOURS'' - most companies use a core of primary or secondary colours as these are most bold and decisive for advertising and branding. Daz uses a strong blue and orange to good effect. O2 uses intense blue.\n\nRED - is one of the most used colours and has been used to represent PASSION, DANGER, PLEASURE, FRIENDLINESS and WARMTH. Red is often used in restaurants as a way of communicating warmth, passion but also movement - it is not a calming colour and therefore people are inclined to eat and move on. \n\nBLUE - There is a human tendancy to respect darker hues. This may be due to the fact that they are less obvious colours to work with [eg primaries being obvious choices with simple messages]. Dairy Milk have claimed their own blue colour as their own.\n\nPINK / MAGENTA - T-mobile have claimed magenta as the main colour they use for their product branding. Again, there are limited associations with other products.\n\nCULTURAL ASSOCIATION - black is used for mourning in the west, but in some eastern countries it is usually white. PINK and PURPLE have a very indian flavour and GOLD / BLACK / RED have far eastern associations.\n\nRULES - Realistically, there are general themes and rules regarding colour but these are often not sustainable for the general population. People have differences of opinion and taste.

This is the methods and process of arrangements of [[components]] such as text and images within a piece of design work or art. 'Good composition' should communicate a theme or concept through the arrangement or composition of appropriate [[components]].\n\nBy varying distances between [[components]] of a design creates interest and variances that appeal. Spacial relationships should be carefully planned and noted as can be used to create [[grouping]].\n\nWhen using images symmetry or placing an object 'dead centre' can often draw attention to an element to gain maximum attention. Symmetry in a photograph or [[layout]] can sometimes be percieved as boring or [[unimaginative]] and can lead to confusion as to which elements are important.

Overview

The print process can be broken down into the following areas:\n\n1. The design brief\n2. Selection of material such as illustrations, images and text\n3. [[Prepress]]\n4. On press\n5. Publication and distribution

Design for Web is the process of creating design work in appropriate formatting to be written to the [[World Wide Web]]. The most common method for producing content for [[The Web]] is using [[HTML]] which can be read by common [[web browsers]] available on typical home and office based computer systems.\n\nThere are several methods for creating content for the web but typically if information is to be distributed on the web it will be written in [[HTML]] by [[hand-coding]] the necessary [[mark-up language]] or using a [[WYSIWYG editor]] such as [[Macromedia Dreamweaver]] that creates the necessary code for the editor therefore reducing the need for extensive coding knowledge.\n\nWhilst there is no particular organisation that governs or dictates how the internet should function or operate, there are organisations pushing for the establishment of standards and ideals. One prominent group is the [[World Wide Web Consortium]] also known as the [[W3C]]. The W3C's mission is "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web."

See [[Macromedia Dreamweaver]]

There are several FONT TYPES:\nSAN SERIF - without the serifs\nSERIF - include serifs. These originate from days when a chisel was used.\nSCRIPT - based upon handwriting.\nNOVELTY - stylised.\nDINGBAT - shapes, icons for use in text or other.\n\nLEGIBILITY is the 'ease with which text can be read'. Are headlines large enough to attract attention in relation to the body of text? Can the body of text be easily read?\n\nITALIC - less readable in large blocks\n\nSANS SERIF - less readable in large blocks\n\nSCRIPT - may sacrifice legibility as eye trys to follow style of letter shapes. Some fonts can be deliberately difficult to read as a matter of attracting attention.\n\nSERIF - the ideal font style for large blocks of text due to the serif providing a more comfortable line for the eye to pass over the lettering. The ideal is a San Serif font with upper / lower case letters in appropriate places.\n\nLEADING - is the amount of space between lines of text. This is often set at 2 points above the point value of the main text. Eg 12 point helvetica with 14 point leading. This provides a more comfortable space between lines of text. Where negative leading is used, lines are packed closer together to save space and condense items.\n\nLETTERSPACING - can be increased if a more 'open' feel will add to the theme or style or can be slightly reduced to fit the space the text can be placed within.\n\nITALICS - less readable in large blocks of text

PHI or THE GOLDEN SECTION is derived from the fibonacci series. PHI is essentially ''1.618'' or by dividing a measurement by 1.618 you will get the larger measurement. The golden section can be seen in nature, architecture and other design works. There is a natural comfort in dividing elements of a design into thirds then using 1:2 ratio.\n\nThe fibonacci series is created by adding the last two digits of a sum. See example:\n\n''0+1 = 1\n1+1 = 2\n1+2 = 3\n2+3 = 5\n3+5 = 8\n5+8 = 13''

HTML stands for [[HyperText Markup Language]] and is the main language for creating web pages on the [[internet]] and was created by the creator of the [[World Wide Web]], [[Tim Berners-Lee]]. At the time, HTML was not a specification as it was available in several formats when originally created, but a language for [[Berners-Lee]] and his colleagues used to communicate their research findings.\n\nHTML was defined in formal specifications that were developed and published throughout the 1990s and has grown into more strict coding specifications aimed at mass media and cross media support such as the specification for [[XHTML]] in 2002. HTML is made up of several entities / objects: elements, attributes, data types and character references.\n\nAt the head of every page of HTML there is a DTD or Document Type Definition. When read by a browser, this establishes how the browser should treat the individual page of HTML. There are generally 3 flavours or standards of HTML derived from the 4.01 revision:\n\nSTRICT: where elements not included in HTML 4.01 are not allowed.\nTRANSITIONAL: where elements previous to HTML 4.01 are allowed.\nFRAMESET: where mostly frame related elements are allowed.\n

See [[HTML]]

Type the text for 'InterfaceOptions'

This is where the designer has the majority of control in any design task from designing a website home page to a [[page]] in a brochure. We will mainly focus on layout for PRINT here.\n\nBefore DTP became accessible as a mainstream method for producing design work, a designer would need to prepare a photocopy of an image or photograph to be put in place withing the layout by a Finishing Artist. Designers, along with a team of production staff, would also need to produce a Camera Ready Copy [CRC] (sometimes just refered to as Artwork [A/W]) of the text and images. This system of creating prepress documents is very rarely used now and would only be used as a matter of emergency!\n\nThe initial part of the layout process should 99% of the time start with a paper and pencil sketch of where text and images could be placed. This will give a clear idea of information flow before the job is started and can save considerable time in unproductive re-arranging. Do the rearranging swiftly by pencil in the early stages.\n\nOnce the designer feels that he or she has reached a suitable conclusion in their sketch and layout work, using simple boxes to represent images and text, then it is time to use a program like Adobe's InDesign to begin to create a layout suitable for sending directly to a print company for the ON PRESS part of the process.\n\nInDesign uses a WYSIWYG interface for representing the layout of text and images on a predetermined page size. However, screen fonts are inferior in quality to printer fonts and therefore, strictly speaking, screen fonts are a lower quality representation of the final product. The WYSIWYG interface is able to generate guides, rulers, stylesheets and effects to assist in the production of a document. \n\nInDesign can export direcly to a print ready [[PDF]] document [Portable Document File with a .pdf file extension].\n\nVarying distances between components of a design creates interest and variances that appeal. Spacial relationships should be carefully planned and noted. They can be used to create [[groupings]].\n\nWhen using images symmetry or placing an object 'dead centre' can often draw attention to an element to gain maximum attention. Symmetry in a photography can sometimes be percieved as boring or unimaginative as this can lead to confusion as to which elements are important.\n\nThe [[Golden Section]] can be used to great effect in the layout of documents, web pages or other visual design work.

/***\n|''Name:''|LegacyStrikeThroughPlugin|\n|''Description:''|Support for legacy (pre 2.1) strike through formatting|\n|''Version:''|1.0.1|\n|''Date:''|Jul 21, 2006|\n|''Source:''|http://www.tiddlywiki.com/#LegacyStrikeThroughPlugin|\n|''Author:''|MartinBudden (mjbudden (at) gmail (dot) com)|\n|''License:''|[[BSD open source license]]|\n|''CoreVersion:''|2.1.0|\n|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|\n\n***/\n\n//{{{\n\n// Ensure that the LegacyStrikeThrough Plugin is only installed once.\nif(!version.extensions.LegacyStrikeThroughPlugin)\n {\n version.extensions.LegacyStrikeThroughPlugin = true;\n\nconfig.formatters.push(\n{\n name: "legacyStrikeByChar",\n match: "==",\n termRegExp: /(==)/mg,\n element: "strike",\n handler: config.formatterHelpers.createElementAndWikify\n});\n\n} // end of "install only once"\n//}}}\n

This is a [[WYSIWYG editor]] development tool for creating web content. This Macromedia [[software]] holds 70% of the market share. The program allows developers and designers to create HTML content and later versions support [[Javascript]], [[CSS Design]] and styling. \n\nMacromedia's early versions were criticised for not creating code that is [[W3C]] compliant and many designers complain of too much additional or messy code being placed within the final HTML output.\n\nOne of the useful elements of this software is the ability to work on a design then preview the results immediately in any browser available on the host computer. For example a PC may typically have IE6 and Mozilla Firefox installed and the developer can flip between these browsers when previewing code.\n\nDreamweaver has some useful 'Extensions'. These are small programs that integrate within Dreamweaver using the Extensions Management software included. Essentially, these small programs can add extra functionality to Dreamweaver and save a developer or designer many hours of hand-coding.

[[Design for Web]]\n[[Design for Print]]\n[[Video Production]]\n[[Audio Production]]\n[[Composition]]\n[[Colour]]\n[[Typography]]\n-------------------\n[[Simcoemedia]]\n[[Useful Books]]\n[[Useful Web]]\n

The [[Simcoemedia]] Design Guide has been created with TiddlyWiki and represents the notes, ideas and findings of research into the [[design process]]. This is not a comprehensive guide, but a growing, developing document aimed at collecting descriptions of design theory and practice. This guide has been produced by [[Pete Simcoe]], [[Simcoemedia]]: http://www.simcoe.co.uk

''General info''\nFreelance Designer based in Nottingham, UK. Originally trained in Industrial Design, Peter has spent the past 10 years working with multimedia and in June 2002 established a company called [[Simcoemedia]].\n\n''Interests''\nInterests are visual design, music, film, photography, playing [[electric guitar]] and [[synth]].\n\n''Favourites''\nFavourite designer: [[Anton Corbjin]]. \nFavourite bands: [[Simple Minds]], [[Depeche Mode]]\nFavourite films: [[Bad Boy Bubby]], [[Buffalo 66]]

Once the design brief is delivered and the illustrations, images and text are selected, the next part of the print process is PREPRESS. This is when all the elements required for a project are assembled.\n\nPREPRESS, in modern terms, usually involves the use of popular Desktop Publishing software such as Adobe's Indesign or Quark Xpress to bring all the elements together on a digital space that represents a 'page' in the real world. However, before the 'page' reaches its final material such as A4 paper, a plastic carrier bag or a Compact Disc, it will be converted to the necessary format for the ink to be applied to the media. This may be a lithographic plate, a silkscreen or a gravure cylinder - these carry the ink from the ink source to the product itself. with the advent of the World Wide Web, File Transfer Protocol and email, it has never been easier for professional designers and amateur designers to send their prepress files in the form of InDesign [INDD], Quark [QXP], Illustrator [AI] and even Photoshop [PSD] to their printer for a swift turnaround.\n\nThree important elements in PREPRESS are: [[LAYOUT]], [[COLOUR MANAGEMENT]] and [[PREFLIGHT CHECK]]. These three elements form the majority of preparation of the document for the next steps.

Use this rule to get the best results when scanning:\n\nScanning Resolution [dpi] = [(@@Target width@@ [px,mm]) / (@@Original Width@@)[px,mm]] x @@Screen Ruling@@ [lpi] @@x 2@@

In terms of the [[World Wide Web]], Server Side Technologies or Server Side activity are those processes performed by the Server or Host computer rather than the computer in the home / college / workplace as it is necessary to perform tasks within the Server computer to ensure system stability, security or efficiency. Typical examples of such technologies are [[ASP]] or [[PHP]] amongst others.

Simcoemedia is the company set up by [[Pete Simcoe]] in June 2002. Simcoemedia produces design work for clients from a variety of industries across the UK in the areas of [[Design for Web]], [[Design for Print]], [[DVD]] with audio production as a developing strand.

A design guide for web, print, video and audio

Simcoemedia Design Guide

displayArea {background-color: #ffccff; }\nmainMenu {border: 1px solid #ffff88; }\ncommandPanel {background-color: #008800; }\n

[[Concept]] \n[[Components]] \n[[Composition]]\n\nThe Three C's are often used to support the design process. By actively making a note of the concept a designer can convey the overall theme of a project. By examining what components the designer has access to it is then possible to combine the theme and components in a composition that achieves the design goals.

See [[World Wide Web]]

A TiddlyWiki is like a [[Blog]] because it's divided up into neat little chunks of stored information, but it encourages you to read it by hyperlinking rather than sequentially: to put it alternatively, a non-linear blog analogue that binds the individual [[microcontent]] items into a cohesive whole.\n\nOne of the typical purposes of a [[Blog]] is to create a series of sequential information blocks based upon events whereas a [[Wiki]] is typically used to create building blocks of information based upon the need to explore information non-sequentially [or possibly navigating through unknown elements of a subject whilst not spending energy on known topics].

The creator of the [[World Wide Web]] and its original [[HTML]].

Typography has been described as the process of ''making language visible'' or setting it in type using fonts, font size, line length, [[leading]] and letter spacing or [[kerning]] - it is on of the basic building blocks of [[design for print]] and theory states that good typography and text design should help communicate an idea with clarity.\n\nThe alphabet we use today was originally designed around 1100BC [although there are many letters originally used in mediaeval times no longer used today]. The way that lettering and words were constructed formed a very densely packed pattern on a sheet of paper in early traditional typesetting - this lead to the use of the words derived from ''textus'' [woven pattern]: textura, black letter, text. Often there were greater areas of black ink upon a page compared to the white space of unused paper.\n\n>"The best typography never gets noticed". [Herb Lubalin]\n\n>"Good typography is like a crystal wineglass, thin as a bubble and just as transparent. It's purpose is to reveal rather than hide the beautiful thing it is meant to contain." [Beatrice Warde]\n\n[[FONT]] is a set of typographic characters. The group of shapes that represent letters. These are designed to work visually together. A font is also known as a TYPEFACE.\n\nTYPE is measured in points. There are 72 points in 1 inch. You cannot rely on a 72 point font being 1 inch in height as there is variation in actual size across the board of 72 point type - this is due to the way metal blocks were originally measured in [[early printing methods]].\n\n

| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |\n| 22/3/2008 22:16:5 | YourName | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 22/3/2008 22:23:0 | YourName | [[simcoemedia.html|file:///C:/Documents%20and%20Settings/designer/Desktop/simcoemedia.html]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 22/3/2008 22:28:35 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com/#Composition]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 28/3/2008 17:24:28 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/#YourName]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 28/3/2008 17:30:35 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/#YourName]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |\n| 28/3/2008 17:34:16 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/#YourName]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 7/4/2008 23:32:53 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 7/4/2008 23:34:13 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 7/4/2008 23:41:8 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 15/4/2008 12:25:47 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 17/4/2008 8:10:5 | Pete Simcoe | [[/|http://simcoemedia.tiddlyspot.com//#%5B%5BWYSIWYG%20editor%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 18/4/2008 23:48:23 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#%5B%5BUseful%20Books%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 19/4/2008 0:2:55 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |\n| 19/4/2008 0:11:41 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 19/4/2008 0:14:43 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com/]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 19/4/2008 9:7:54 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#%5B%5BDesign%20for%20Print%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |\n| 19/4/2008 9:11:47 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#%5B%5BDesign%20for%20Print%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |\n| 19/4/2008 9:21:26 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#PluginManager%20AdvancedOptions%20Composition%20%5B%5BUseful%20Books%5D%5D%20%5B%5BDesign%20for%20Web%5D%5D%20Typography%20FONT%20%5B%5BDesign%20for%20Print%5D%5D%20Prepress%20LAYOUT%20page%20%5B%5BGolden%20Section%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |\n| 19/4/2008 9:36:20 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#PluginManager%20AdvancedOptions%20Composition%20%5B%5BUseful%20Books%5D%5D%20%5B%5BDesign%20for%20Web%5D%5D%20Typography%20FONT%20%5B%5BDesign%20for%20Print%5D%5D%20Prepress%20LAYOUT%20page%20%5B%5BGolden%20Section%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |\n| 19/4/2008 9:43:21 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#PluginManager%20AdvancedOptions%20Composition%20%5B%5BUseful%20Books%5D%5D%20%5B%5BDesign%20for%20Web%5D%5D%20Typography%20FONT%20%5B%5BDesign%20for%20Print%5D%5D%20Prepress%20LAYOUT%20page%20%5B%5BGolden%20Section%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |\n| 19/4/2008 16:49:12 | Simcoemedia | [[/|http://simcoemedia.tiddlyspot.com//#%5B%5BBest%20'Free'%20Online%20Software%5D%5D]] | [[store.cgi|http://simcoemedia.tiddlyspot.com/store.cgi]] | . | index.html | . |

/***\n|''Name:''|UploadPlugin|\n|''Description:''|Save to web a TiddlyWiki|\n|''Version:''|3.4.4|\n|''Date:''|Sep 30, 2006|\n|''Source:''|http://tiddlywiki.bidix.info/#UploadPlugin|\n|''Documentation:''|http://tiddlywiki.bidix.info/#UploadDoc|\n|''Author:''|BidiX (BidiX (at) bidix (dot) info)|\n|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|\n|''~CoreVersion:''|2.0.0|\n|''Browser:''|Firefox 1.5; InternetExplorer 6.0; Safari|\n|''Include:''|config.lib.file; config.lib.log; config.lib.options; PasswordTweak|\n|''Require:''|[[UploadService|http://tiddlywiki.bidix.info/#UploadService]]|\n***/\n//{{{\nversion.extensions.UploadPlugin = {\n major: 3, minor: 4, revision: 4, \n date: new Date(2006,8,30),\n source: 'http://tiddlywiki.bidix.info/#UploadPlugin',\n documentation: 'http://tiddlywiki.bidix.info/#UploadDoc',\n author: 'BidiX (BidiX (at) bidix (dot) info',\n license: '[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D]]',\n coreVersion: '2.0.0',\n browser: 'Firefox 1.5; InternetExplorer 6.0; Safari'\n};\n//}}}\n\n////+++!![config.lib.file]\n\n//{{{\nif (!config.lib) config.lib = {};\nif (!config.lib.file) config.lib.file= {\n author: 'BidiX',\n version: {major: 0, minor: 1, revision: 0}, \n date: new Date(2006,3,9)\n};\nconfig.lib.file.dirname = function (filePath) {\n var lastpos;\n if ((lastpos = filePath.lastIndexOf("/")) != -1) {\n return filePath.substring(0, lastpos);\n } else {\n return filePath.substring(0, filePath.lastIndexOf("\s\s"));\n }\n};\nconfig.lib.file.basename = function (filePath) {\n var lastpos;\n if ((lastpos = filePath.lastIndexOf("#")) != -1) \n filePath = filePath.substring(0, lastpos);\n if ((lastpos = filePath.lastIndexOf("/")) != -1) {\n return filePath.substring(lastpos + 1);\n } else\n return filePath.substring(filePath.lastIndexOf("\s\s")+1);\n};\nwindow.basename = function() {return "@@deprecated@@";};\n//}}}\n////===\n\n////+++!![config.lib.log]\n\n//{{{\nif (!config.lib) config.lib = {};\nif (!config.lib.log) config.lib.log= {\n author: 'BidiX',\n version: {major: 0, minor: 1, revision: 1}, \n date: new Date(2006,8,19)\n};\nconfig.lib.Log = function(tiddlerTitle, logHeader) {\n if (version.major < 2)\n this.tiddler = store.tiddlers[tiddlerTitle];\n else\n this.tiddler = store.getTiddler(tiddlerTitle);\n if (!this.tiddler) {\n this.tiddler = new Tiddler();\n this.tiddler.title = tiddlerTitle;\n this.tiddler.text = "| !date | !user | !location |" + logHeader;\n this.tiddler.created = new Date();\n this.tiddler.modifier = config.options.txtUserName;\n this.tiddler.modified = new Date();\n if (version.major < 2)\n store.tiddlers[tiddlerTitle] = this.tiddler;\n else\n store.addTiddler(this.tiddler);\n }\n return this;\n};\n\nconfig.lib.Log.prototype.newLine = function (line) {\n var now = new Date();\n var newText = "| ";\n newText += now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getFullYear() + " ";\n newText += now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" | ";\n newText += config.options.txtUserName + " | ";\n var location = document.location.toString();\n var filename = config.lib.file.basename(location);\n if (!filename) filename = '/';\n newText += "[["+filename+"|"+location + "]] |";\n this.tiddler.text = this.tiddler.text + "\sn" + newText;\n this.addToLine(line);\n};\n\nconfig.lib.Log.prototype.addToLine = function (text) {\n this.tiddler.text = this.tiddler.text + text;\n this.tiddler.modifier = config.options.txtUserName;\n this.tiddler.modified = new Date();\n if (version.major < 2)\n store.tiddlers[this.tiddler.tittle] = this.tiddler;\n else {\n store.addTiddler(this.tiddler);\n story.refreshTiddler(this.tiddler.title);\n store.notify(this.tiddler.title, true);\n }\n if (version.major < 2)\n store.notifyAll(); \n};\n//}}}\n////===\n\n////+++!![config.lib.options]\n\n//{{{\nif (!config.lib) config.lib = {};\nif (!config.lib.options) config.lib.options = {\n author: 'BidiX',\n version: {major: 0, minor: 1, revision: 0}, \n date: new Date(2006,3,9)\n};\n\nconfig.lib.options.init = function (name, defaultValue) {\n if (!config.options[name]) {\n config.options[name] = defaultValue;\n saveOptionCookie(name);\n }\n};\n//}}}\n////===\n\n////+++!![PasswordTweak]\n\n//{{{\nversion.extensions.PasswordTweak = {\n major: 1, minor: 0, revision: 3, date: new Date(2006,8,30),\n type: 'tweak',\n source: 'http://tiddlywiki.bidix.info/#PasswordTweak'\n};\n//}}}\n/***\n!!config.macros.option\n***/\n//{{{\nconfig.macros.option.passwordCheckboxLabel = "Save this password on this computer";\nconfig.macros.option.passwordType = "password"; // password | text\n\nconfig.macros.option.onChangeOption = function(e)\n{\n var opt = this.getAttribute("option");\n var elementType,valueField;\n if(opt) {\n switch(opt.substr(0,3)) {\n case "txt":\n elementType = "input";\n valueField = "value";\n break;\n case "pas":\n elementType = "input";\n valueField = "value";\n break;\n case "chk":\n elementType = "input";\n valueField = "checked";\n break;\n }\n config.options[opt] = this[valueField];\n saveOptionCookie(opt);\n var nodes = document.getElementsByTagName(elementType);\n for(var t=0; t<nodes.length; t++) \n {\n var optNode = nodes[t].getAttribute("option");\n if (opt == optNode) \n nodes[t][valueField] = this[valueField];\n }\n }\n return(true);\n};\n\nconfig.macros.option.handler = function(place,macroName,params)\n{\n var opt = params[0];\n if(config.options[opt] === undefined) {\n return;}\n var c;\n switch(opt.substr(0,3)) {\n case "txt":\n c = document.createElement("input");\n c.onkeyup = this.onChangeOption;\n c.setAttribute ("option",opt);\n c.className = "txtOptionInput "+opt;\n place.appendChild(c);\n c.value = config.options[opt];\n break;\n case "pas":\n // input password\n c = document.createElement ("input");\n c.setAttribute("type",config.macros.option.passwordType);\n c.onkeyup = this.onChangeOption;\n c.setAttribute("option",opt);\n c.className = "pasOptionInput "+opt;\n place.appendChild(c);\n c.value = config.options[opt];\n // checkbox link with this password "save this password on this computer"\n c = document.createElement("input");\n c.setAttribute("type","checkbox");\n c.onclick = this.onChangeOption;\n c.setAttribute("option","chk"+opt);\n c.className = "chkOptionInput "+opt;\n place.appendChild(c);\n c.checked = config.options["chk"+opt];\n // text savePasswordCheckboxLabel\n place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));\n break;\n case "chk":\n c = document.createElement("input");\n c.setAttribute("type","checkbox");\n c.onclick = this.onChangeOption;\n c.setAttribute("option",opt);\n c.className = "chkOptionInput "+opt;\n place.appendChild(c);\n c.checked = config.options[opt];\n break;\n }\n};\n//}}}\n/***\n!! Option cookie stuff\n***/\n//{{{\nwindow.loadOptionsCookie_orig_PasswordTweak = window.loadOptionsCookie;\nwindow.loadOptionsCookie = function()\n{\n var cookies = document.cookie.split(";");\n for(var c=0; c<cookies.length; c++) {\n var p = cookies[c].indexOf("=");\n if(p != -1) {\n var name = cookies[c].substr(0,p).trim();\n var value = cookies[c].substr(p+1).trim();\n switch(name.substr(0,3)) {\n case "txt":\n config.options[name] = unescape(value);\n break;\n case "pas":\n config.options[name] = unescape(value);\n break;\n case "chk":\n config.options[name] = value == "true";\n break;\n }\n }\n }\n};\n\nwindow.saveOptionCookie_orig_PasswordTweak = window.saveOptionCookie;\nwindow.saveOptionCookie = function(name)\n{\n var c = name + "=";\n switch(name.substr(0,3)) {\n case "txt":\n c += escape(config.options[name].toString());\n break;\n case "chk":\n c += config.options[name] ? "true" : "false";\n // is there an option link with this chk ?\n if (config.options[name.substr(3)]) {\n saveOptionCookie(name.substr(3));\n }\n break;\n case "pas":\n if (config.options["chk"+name]) {\n c += escape(config.options[name].toString());\n } else {\n c += "";\n }\n break;\n }\n c += "; expires=Fri, 1 Jan 2038 12:00:00 UTC; path=/";\n document.cookie = c;\n};\n//}}}\n/***\n!! Initializations\n***/\n//{{{\n// define config.options.pasPassword\nif (!config.options.pasPassword) {\n config.options.pasPassword = 'defaultPassword';\n window.saveOptionCookie('pasPassword');\n}\n// since loadCookies is first called befor password definition\n// we need to reload cookies\nwindow.loadOptionsCookie();\n//}}}\n////===\n\n////+++!![config.macros.upload]\n\n//{{{\nconfig.macros.upload = {\n accessKey: "U",\n formName: "UploadPlugin",\n contentType: "text/html;charset=UTF-8",\n defaultStoreScript: "store.php"\n};\n\n// only this two configs need to be translated\nconfig.macros.upload.messages = {\n aboutToUpload: "About to upload TiddlyWiki to %0",\n backupFileStored: "Previous file backuped in %0",\n crossDomain: "Certainly a cross-domain isue: access to an other site isn't allowed",\n errorDownloading: "Error downloading",\n errorUploadingContent: "Error uploading content",\n fileLocked: "Files is locked: You are not allowed to Upload",\n fileNotFound: "file to upload not found",\n fileNotUploaded: "File %0 NOT uploaded",\n mainFileUploaded: "Main TiddlyWiki file uploaded to %0",\n passwordEmpty: "Unable to upload, your password is empty",\n urlParamMissing: "url param missing",\n rssFileNotUploaded: "RssFile %0 NOT uploaded",\n rssFileUploaded: "Rss File uploaded to %0"\n};\n\nconfig.macros.upload.label = {\n promptOption: "Save and Upload this TiddlyWiki with UploadOptions",\n promptParamMacro: "Save and Upload this TiddlyWiki in %0",\n saveLabel: "save to web", \n saveToDisk: "save to disk",\n uploadLabel: "upload" \n};\n\nconfig.macros.upload.handler = function(place,macroName,params){\n // parameters initialization\n var storeUrl = params[0];\n var toFilename = params[1];\n var backupDir = params[2];\n var uploadDir = params[3];\n var username = params[4];\n var password; // for security reason no password as macro parameter\n var label;\n if (document.location.toString().substr(0,4) == "http")\n label = this.label.saveLabel;\n else\n label = this.label.uploadLabel;\n var prompt;\n if (storeUrl) {\n prompt = this.label.promptParamMacro.toString().format([this.toDirUrl(storeUrl, uploadDir, username)]);\n }\n else {\n prompt = this.label.promptOption;\n }\n createTiddlyButton(place, label, prompt, \n function () {\n config.macros.upload.upload(storeUrl, toFilename, uploadDir, backupDir, username, password); \n return false;}, \n null, null, this.accessKey);\n};\nconfig.macros.upload.UploadLog = function() {\n return new config.lib.Log('UploadLog', " !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |" );\n};\nconfig.macros.upload.UploadLog.prototype = config.lib.Log.prototype;\nconfig.macros.upload.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir, backupDir) {\n var line = " [[" + config.lib.file.basename(storeUrl) + "|" + storeUrl + "]] | ";\n line += uploadDir + " | " + toFilename + " | " + backupDir + " |";\n this.newLine(line);\n};\nconfig.macros.upload.UploadLog.prototype.endUpload = function() {\n this.addToLine(" Ok |");\n};\nconfig.macros.upload.basename = config.lib.file.basename;\nconfig.macros.upload.dirname = config.lib.file.dirname;\nconfig.macros.upload.toRootUrl = function (storeUrl, username)\n{\n return root = (this.dirname(storeUrl)?this.dirname(storeUrl):this.dirname(document.location.toString()));\n}\nconfig.macros.upload.toDirUrl = function (storeUrl, uploadDir, username)\n{\n var root = this.toRootUrl(storeUrl, username);\n if (uploadDir && uploadDir != '.')\n root = root + '/' + uploadDir;\n return root;\n}\nconfig.macros.upload.toFileUrl = function (storeUrl, toFilename, uploadDir, username)\n{\n return this.toDirUrl(storeUrl, uploadDir, username) + '/' + toFilename;\n}\nconfig.macros.upload.upload = function(storeUrl, toFilename, uploadDir, backupDir, username, password)\n{\n // parameters initialization\n storeUrl = (storeUrl ? storeUrl : config.options.txtUploadStoreUrl);\n toFilename = (toFilename ? toFilename : config.options.txtUploadFilename);\n backupDir = (backupDir ? backupDir : config.options.txtUploadBackupDir);\n uploadDir = (uploadDir ? uploadDir : config.options.txtUploadDir);\n username = (username ? username : config.options.txtUploadUserName);\n password = config.options.pasUploadPassword; // for security reason no password as macro parameter\n if (!password || password === '') {\n alert(config.macros.upload.messages.passwordEmpty);\n return;\n }\n if (storeUrl === '') {\n storeUrl = config.macros.upload.defaultStoreScript;\n }\n if (config.lib.file.dirname(storeUrl) === '') {\n storeUrl = config.lib.file.dirname(document.location.toString())+'/'+storeUrl;\n }\n if (toFilename === '') {\n toFilename = config.lib.file.basename(document.location.toString());\n }\n\n clearMessage();\n // only for forcing the message to display\n if (version.major < 2)\n store.notifyAll();\n if (!storeUrl) {\n alert(config.macros.upload.messages.urlParamMissing);\n return;\n }\n // Check that file is not locked\n if (window.BidiX && BidiX.GroupAuthoring && BidiX.GroupAuthoring.lock) {\n if (BidiX.GroupAuthoring.lock.isLocked() && !BidiX.GroupAuthoring.lock.isMyLock()) {\n alert(config.macros.upload.messages.fileLocked);\n return;\n }\n }\n \n var log = new this.UploadLog();\n log.startUpload(storeUrl, toFilename, uploadDir, backupDir);\n if (document.location.toString().substr(0,5) == "file:") {\n saveChanges();\n }\n var toDir = config.macros.upload.toDirUrl(storeUrl, toFilename, uploadDir, username);\n displayMessage(config.macros.upload.messages.aboutToUpload.format([toDir]), toDir);\n this.uploadChanges(storeUrl, toFilename, uploadDir, backupDir, username, password);\n if(config.options.chkGenerateAnRssFeed) {\n //var rssContent = convertUnicodeToUTF8(generateRss());\n var rssContent = generateRss();\n var rssPath = toFilename.substr(0,toFilename.lastIndexOf(".")) + ".xml";\n this.uploadContent(rssContent, storeUrl, rssPath, uploadDir, '', username, password, \n function (responseText) {\n if (responseText.substring(0,1) != '0') {\n displayMessage(config.macros.upload.messages.rssFileNotUploaded.format([rssPath]));\n }\n else {\n var toFileUrl = config.macros.upload.toFileUrl(storeUrl, rssPath, uploadDir, username);\n displayMessage(config.macros.upload.messages.rssFileUploaded.format(\n [toFileUrl]), toFileUrl);\n }\n // for debugging store.php uncomment last line\n //DEBUG alert(responseText);\n });\n }\n return;\n};\n\nconfig.macros.upload.uploadChanges = function(storeUrl, toFilename, uploadDir, backupDir, \n username, password) {\n var original;\n if (document.location.toString().substr(0,4) == "http") {\n original = this.download(storeUrl, toFilename, uploadDir, backupDir, username, password);\n return;\n }\n else {\n // standard way : Local file\n \n original = loadFile(getLocalPath(document.location.toString()));\n if(window.Components) {\n // it's a mozilla browser\n try {\n netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");\n var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]\n .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);\n converter.charset = "UTF-8";\n original = converter.ConvertToUnicode(original);\n }\n catch(e) {\n }\n }\n }\n //DEBUG alert(original);\n this.uploadChangesFrom(original, storeUrl, toFilename, uploadDir, backupDir, \n username, password);\n};\n\nconfig.macros.upload.uploadChangesFrom = function(original, storeUrl, toFilename, uploadDir, backupDir, \n username, password) {\n var startSaveArea = '<div id="' + 'storeArea">'; // Split up into two so that indexOf() of this source doesn't find it\n var endSaveArea = '</d' + 'iv>';\n // Locate the storeArea div's\n var posOpeningDiv = original.indexOf(startSaveArea);\n var posClosingDiv = original.lastIndexOf(endSaveArea);\n if((posOpeningDiv == -1) || (posClosingDiv == -1))\n {\n alert(config.messages.invalidFileError.format([document.location.toString()]));\n return;\n }\n var revised = original.substr(0,posOpeningDiv + startSaveArea.length) + \n allTiddlersAsHtml() + "\sn\st\st" +\n original.substr(posClosingDiv);\n var newSiteTitle;\n if(version.major < 2){\n newSiteTitle = (getElementText("siteTitle") + " - " + getElementText("siteSubtitle")).htmlEncode();\n } else {\n newSiteTitle = (wikifyPlain ("SiteTitle") + " - " + wikifyPlain ("SiteSubtitle")).htmlEncode();\n }\n\n revised = revised.replaceChunk("<title"+">","</title"+">"," " + newSiteTitle + " ");\n revised = revised.replaceChunk("<!--PRE-HEAD-START--"+">","<!--PRE-HEAD-END--"+">","\sn" + store.getTiddlerText("MarkupPreHead","") + "\sn");\n revised = revised.replaceChunk("<!--POST-HEAD-START--"+">","<!--POST-HEAD-END--"+">","\sn" + store.getTiddlerText("MarkupPostHead","") + "\sn");\n revised = revised.replaceChunk("<!--PRE-BODY-START--"+">","<!--PRE-BODY-END--"+">","\sn" + store.getTiddlerText("MarkupPreBody","") + "\sn");\n revised = revised.replaceChunk("<!--POST-BODY-START--"+">","<!--POST-BODY-END--"+">","\sn" + store.getTiddlerText("MarkupPostBody","") + "\sn");\n\n var response = this.uploadContent(revised, storeUrl, toFilename, uploadDir, backupDir, \n username, password, function (responseText) {\n if (responseText.substring(0,1) != '0') {\n alert(responseText);\n displayMessage(config.macros.upload.messages.fileNotUploaded.format([getLocalPath(document.location.toString())]));\n }\n else {\n if (uploadDir !== '') {\n toFilename = uploadDir + "/" + config.macros.upload.basename(toFilename);\n } else {\n toFilename = config.macros.upload.basename(toFilename);\n }\n var toFileUrl = config.macros.upload.toFileUrl(storeUrl, toFilename, uploadDir, username);\n if (responseText.indexOf("destfile:") > 0) {\n var destfile = responseText.substring(responseText.indexOf("destfile:")+9, \n responseText.indexOf("\sn", responseText.indexOf("destfile:")));\n toFileUrl = config.macros.upload.toRootUrl(storeUrl, username) + '/' + destfile;\n }\n else {\n toFileUrl = config.macros.upload.toFileUrl(storeUrl, toFilename, uploadDir, username);\n }\n displayMessage(config.macros.upload.messages.mainFileUploaded.format(\n [toFileUrl]), toFileUrl);\n if (backupDir && responseText.indexOf("backupfile:") > 0) {\n var backupFile = responseText.substring(responseText.indexOf("backupfile:")+11, \n responseText.indexOf("\sn", responseText.indexOf("backupfile:")));\n toBackupUrl = config.macros.upload.toRootUrl(storeUrl, username) + '/' + backupFile;\n displayMessage(config.macros.upload.messages.backupFileStored.format(\n [toBackupUrl]), toBackupUrl);\n }\n var log = new config.macros.upload.UploadLog();\n log.endUpload();\n store.setDirty(false);\n // erase local lock\n if (window.BidiX && BidiX.GroupAuthoring && BidiX.GroupAuthoring.lock) {\n BidiX.GroupAuthoring.lock.eraseLock();\n // change mtime with new mtime after upload\n var mtime = responseText.substr(responseText.indexOf("mtime:")+6);\n BidiX.GroupAuthoring.lock.mtime = mtime;\n }\n \n \n }\n // for debugging store.php uncomment last line\n //DEBUG alert(responseText);\n }\n );\n};\n\nconfig.macros.upload.uploadContent = function(content, storeUrl, toFilename, uploadDir, backupDir, \n username, password, callbackFn) {\n var boundary = "---------------------------"+"AaB03x"; \n var request;\n try {\n request = new XMLHttpRequest();\n } \n catch (e) { \n request = new ActiveXObject("Msxml2.XMLHTTP"); \n }\n if (window.netscape){\n try {\n if (document.location.toString().substr(0,4) != "http") {\n netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');}\n }\n catch (e) {}\n } \n //DEBUG alert("user["+config.options.txtUploadUserName+"] password[" + config.options.pasUploadPassword + "]");\n // compose headers data\n var sheader = "";\n sheader += "--" + boundary + "\sr\snContent-disposition: form-data; name=\s"";\n sheader += config.macros.upload.formName +"\s"\sr\sn\sr\sn";\n sheader += "backupDir="+backupDir\n +";user=" + username \n +";password=" + password\n +";uploaddir=" + uploadDir;\n // add lock attributes to sheader\n if (window.BidiX && BidiX.GroupAuthoring && BidiX.GroupAuthoring.lock) {\n var l = BidiX.GroupAuthoring.lock.myLock;\n sheader += ";lockuser=" + l.user\n + ";mtime=" + l.mtime\n + ";locktime=" + l.locktime;\n }\n sheader += ";;\sr\sn"; \n sheader += "\sr\sn" + "--" + boundary + "\sr\sn";\n sheader += "Content-disposition: form-data; name=\s"userfile\s"; filename=\s""+toFilename+"\s"\sr\sn";\n sheader += "Content-Type: " + config.macros.upload.contentType + "\sr\sn";\n sheader += "Content-Length: " + content.length + "\sr\sn\sr\sn";\n // compose trailer data\n var strailer = new String();\n strailer = "\sr\sn--" + boundary + "--\sr\sn";\n //strailer = "--" + boundary + "--\sr\sn";\n var data;\n data = sheader + content + strailer;\n //request.open("POST", storeUrl, true, username, password);\n try {\n request.open("POST", storeUrl, true); \n }\n catch(e) {\n alert(config.macros.upload.messages.crossDomain + "\snError:" +e);\n exit;\n }\n request.onreadystatechange = function () {\n if (request.readyState == 4) {\n if (request.status == 200)\n callbackFn(request.responseText);\n else\n alert(config.macros.upload.messages.errorUploadingContent + "\snStatus: "+request.status.statusText);\n }\n };\n request.setRequestHeader("Content-Length",data.length);\n request.setRequestHeader("Content-Type","multipart/form-data; boundary="+boundary);\n request.send(data); \n};\n\n\nconfig.macros.upload.download = function(uploadUrl, uploadToFilename, uploadDir, uploadBackupDir, \n username, password) {\n var request;\n try {\n request = new XMLHttpRequest();\n } \n catch (e) { \n request = new ActiveXObject("Msxml2.XMLHTTP"); \n }\n try {\n if (uploadUrl.substr(0,4) == "http") {\n netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");\n }\n else {\n netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");\n }\n } catch (e) { }\n //request.open("GET", document.location.toString(), true, username, password);\n try {\n request.open("GET", document.location.toString(), true);\n }\n catch(e) {\n alert(config.macros.upload.messages.crossDomain + "\snError:" +e);\n exit;\n }\n \n request.onreadystatechange = function () {\n if (request.readyState == 4) {\n if(request.status == 200) {\n config.macros.upload.uploadChangesFrom(request.responseText, uploadUrl, \n uploadToFilename, uploadDir, uploadBackupDir, username, password);\n }\n else\n alert(config.macros.upload.messages.errorDownloading.format(\n [document.location.toString()]) + "\snStatus: "+request.status.statusText);\n }\n };\n request.send(null);\n};\n\n//}}}\n////===\n\n////+++!![Initializations]\n\n//{{{\nconfig.lib.options.init('txtUploadStoreUrl','store.php');\nconfig.lib.options.init('txtUploadFilename','');\nconfig.lib.options.init('txtUploadDir','');\nconfig.lib.options.init('txtUploadBackupDir','');\nconfig.lib.options.init('txtUploadUserName',config.options.txtUserName);\nconfig.lib.options.init('pasUploadPassword','');\nsetStylesheet(\n ".pasOptionInput {width: 11em;}\sn"+\n ".txtOptionInput.txtUploadStoreUrl {width: 25em;}\sn"+\n ".txtOptionInput.txtUploadFilename {width: 25em;}\sn"+\n ".txtOptionInput.txtUploadDir {width: 25em;}\sn"+\n ".txtOptionInput.txtUploadBackupDir {width: 25em;}\sn"+\n "",\n "UploadOptionsStyles");\nconfig.shadowTiddlers.UploadDoc = "[[Full Documentation|http://tiddlywiki.bidix.info/l#UploadDoc ]]\sn"; \nconfig.options.chkAutoSave = false; saveOptionCookie('chkAutoSave');\n\n//}}}\n////===\n\n////+++!![Core Hijacking]\n\n//{{{\nconfig.macros.saveChanges.label_orig_UploadPlugin = config.macros.saveChanges.label;\nconfig.macros.saveChanges.label = config.macros.upload.label.saveToDisk;\n\nconfig.macros.saveChanges.handler_orig_UploadPlugin = config.macros.saveChanges.handler;\n\nconfig.macros.saveChanges.handler = function(place)\n{\n if ((!readOnly) && (document.location.toString().substr(0,4) != "http"))\n createTiddlyButton(place,this.label,this.prompt,this.onClick,null,null,this.accessKey);\n};\n\n//}}}\n////===\n

\nBelow are a list of useful books:\n\n\n''DESIGN BASICS INDEX'', JIM KRAUSE\nISBN 0-7153-2053-X [£14.99]\nhttp://www.amazon.com/gp/product/1581805012/103-1368802-4017408?v=glance&n=283155\n\n''GRAPHIC DESIGN'', CHARLOTTE + PETER FIELL\nISBN 3-8228-3878-0 [£4.00] \nhttp://www.taschen.com\n\n''GRAPHIC DESIGN THAT WORKS'', CHERYL DANGEL CULLEN\nISBN 1-59253-279-7\nhttp://www.rockpub.com\n\n''MAEDA AND MEDIA'', JOHN MAEDA\nISBN 0-500-28235-8 [£19.95]\nhttp://www.maedastudio.com\n\n''PRODUCTION FOR GRAPHIC DESIGNERS'', ALAN PIPES\nISBN 1-85669-268-X [£19.95]\nhttp://www.amazon.co.uk/exec/obidos/ASIN/185669268X

See the following links for useful websites:\n\n[[Best 'Free' Online Software]]\n[[Websites for Designers]]\n[[Websites for Musicians]]\n[[Websites for Video Production]]\n[[Experimental and Miscellaneous]]\n\n

See [[World Wide Web Consortium]].

The term stands for ''What You See Is What You Get'' and is a user interface that allows the user to view something very similar to the end result while the document or image is being created. For example, a user can view on screen how a document will look when it is printed to paper or displayed in a Web browser.\n\nExamples of this would be [[Microsoft]] Word for creating documents for printing. Adobe Illustrator for creating posters, flyers or associated material. [[Macromedia Dreamweaver]] for creating [[HTML]] pages for the [[World Wide Web]].

This document is a ~TiddlyWiki from tiddlyspot.com. A ~TiddlyWiki is an electronic notebook that is great for managing todo lists, personal information, and all sorts of things.\n\n@@font-weight:bold;font-size:1.3em;color:#444; //What now?//   @@ Before you can save any changes, you need to enter your password in the form below. Then configure privacy and other site settings at your [[control panel|http://simcoemedia.tiddlyspot.com/controlpanel]] (your control panel username is //simcoemedia//).\n<<tiddler tiddlyspotControls>>\n@@font-weight:bold;font-size:1.3em;color:#444; //Working online//   @@ You can edit this ~TiddlyWiki right now, and save your changes using the "save to web" button in the column on the right.\n\n@@font-weight:bold;font-size:1.3em;color:#444; //Working offline//   @@ A fully functioning copy of this ~TiddlyWiki can be saved onto your hard drive or USB stick. You can make changes and save them locally without being connected to the Internet. When you're ready to sync up again, just click "upload" and your ~TiddlyWiki will be saved back to tiddlyspot.com.\n\n@@font-weight:bold;font-size:1.3em;color:#444; //Help!//   @@ Find out more about ~TiddlyWiki at [[TiddlyWiki.com|http://tiddlywiki.com]]. Also visit [[TiddlyWiki Guides|http://tiddlywikiguides.org]] for documentation on learning and using ~TiddlyWiki. New users are especially welcome on the [[TiddlyWiki mailing list|http://groups.google.com/group/TiddlyWiki]], which is an excellent place to ask questions and get help. If you have a tiddlyspot related problem email [[tiddlyspot support|mailto:support@tiddlyspot.com]].\n\n@@font-weight:bold;font-size:1.3em;color:#444; //Enjoy :)//   @@ We hope you like using your tiddlyspot.com site. Please email [[feedback@tiddlyspot.com|mailto:feedback@tiddlyspot.com]] with any comments or suggestions.

''Definition'' according to http://www.wikipedia.com\n\n>A Wiki is a type of Web site that allows the visitors themselves to easily add, remove, and otherwise edit and change some available content, sometimes without the need for registration. This ease of interaction and operation makes a wiki an effective tool for collaborative authoring. The term wiki also can refer to the collaborative software itself (wiki engine) that facilitates the operation of such a Web site, or to certain specific wiki sites, including the computer science site (an original wiki), WikiWikiWeb, and on-line encyclopedias such as Wikipedia.

The ''World Wide Web'' describes the hardware space within which [[text]], [[video]], [[audio]] and [[image files]] can be read / written. These are located on the web by a series of [[Unique Resourse Identifiers]]. Each specific item has its own identifier. The World Wide Web is available via the [[Internet]] and is also know as ''The Web'' or ''WWW''.\n<<<\nThe WWW project merges the techniques of information retrieval and hypertext to make an easy but powerful global information system. The project started with the philosophy that much academic information should be freely available to anyone. It aims to allow information sharing within internationally dispersed teams, and the dissemination of information by support groups. [[Tim Berners-Lee]]\n<<<\n

>The consortium was created to ensure compatibility and agreement among industry members in the adoption of new standards. Prior to its creation, incompatible versions of HTML were offered by different vendors, increasing the potential for inconsistency between web pages. The consortium was created to get all those vendors to agree on a set of core principles and components which would be supported by everyone. [Wikipedia]

In this document there may be two meanings for the use of the word. \n\n''Firstly'', in relation to the implementation of web technologies, accessible web pages have passed specific standards set by [[W3C]] in its guidelines for web design and production. They are programmed in a way that a variety of users across browsers, platforms and screen types all have the best chances of being able to use the web information for the purpose it was originally intended. This usually includes the use of [[screen-reading softwares]] that allow those with limited sight to have information from a page read back to them via the software translator. Pages must be constructed carefully to allow meaningful information to be read back to the user / viewer / listener.\n\n''Secondly'', the state of being accessible may simply refer to the type and complexity of language used in descriptions of [[web technologies]]. The principle to adhere to in the construction of information is that a basic level of web interaction in it's reader audience is assumed - potentially the reader has [[surfed around]] a little with the help of a search engine [[search engine]] such as [[Google]], possibly bought some items [[online]] or booked a holiday but has no experience of setting up or managing[[wiki's]], [[content management systems]], [[blogs]], [[mailing lists]], [[Myspace]] accounts experience and limited ability to make connections between these technologies. All descriptive text must cater for this level of web experience, therefore making information ''accessible'' or 'easy to understand'.

The method from which a design is created. Whilst there is no exact science that dictates the way ideas are created, there are several methods a designer may employ to begin or enhance the process of reaching a high quality finished product:\n\n1. [[Brainstorming]] - what could we do?\n2. [[Reverse Brainstorming]] - how can we make the project fail?\n3. [[Brainmapping]]

Grids assist in the placement of text and images on a page. There are a variety of grid patterns that can be employed to ensure that the text and images not only compliment one another but also are accessible and easy to follow. Newspapers, for example, can allow the use of 5 or 6 columns of text across the page through careful design of the grid to allow an editor to place images in a variety of sizes or formats such as portrait or landscape images.\n\nIt is advisable that a single column of text in a novel does not exceed 12 words per line and seven words for something like a magazine. If the text is too wide then this affects readability as the eye has difficulty finding its way back to the beginning of the next line. See Verdana as a classic example of text designed to be read at a variety of sizes.\n\nAlthough some grids can look complex, the idea is that the user need not use all the grid elements on every page but can select the most suitable guides for producing a layout that looks coherant with the rest of the document. This may be in terms of title location, borders, header and footer locations.

People like information to contain structure so attention can be given to the most important elements and energy dispersion highest where most needed. View this as a matter of time / energy. Information can be divided, resized, isolated.\n\nEmphasis is the process of generating elements that stand out from the rest. Priority of information, priority of messages understood by the viewer. Boldness, colour and constrast are some of the methods typically used.\n\nAn element of decisiveness is required on the designers part. If all elements are 'shouting' then how can a message get across.

In terms of the production of webpages, hand-coding is the process of inputting code or data without the use of a [[WYSIWYG editor]]. In the use of [[Macromedia Dreamweaver]] the user can use CODE VIEW, DESIGN VIEW or a mixture of both [which is particularly useful as the user can view the layout and production preview whilst looking at the code the editor is producing [Dreamweaver has been criticised for poor coding quality especially when measured against [[W3C]] compliant standards.]\n\nAnother reason to use the process of hand-coding would be to produce code that a WYSIWYG editor is unable to create. For example, Dreamweaver is still unable to produce a [[Cascading Style Sheets]]''[CSS]'' based layout and therefore a designer must get his hands dirty by using CODE VIEW to input CSS values. The preview in [[IE6]] and / or [[Mozilla Firefox]] is still the most convenient way to preview any designer's input.

A hyperlink is an automated cross reference link within a block of [[hypertext]] that directs the user to relevant information in a non-linear way. The user can simply jump to the location, on the world wide web for example, using a [[Unique Resource Identifier]] found on a web page then obtain the required information from the new source before moving on to the next information location using yet another hyperlink.

Hypertext is typically referring to a non-linear or non-traditional way of storing information. The most frequently discussed form of hypertext document contains automated cross-references to other documents called [[hyperlink]]s. Selecting a [[hyperlink]] causes the computer to load and display the linked document. \n\nA single [[online]] document such as a [[web page]] can contain many hyperlinks to different documents located on [[servers]] throughout the globe. You can also find hyperlinks embedded into [[Microsoft Word]], [[OpenOffice]] documents or [[Adobe PDF]] documents as these formats can also contain [[enriched-text]].

This is typically text combined with extra information about text. However, there are also mark-up language specifications for images and other elements that may typically be found on a modern web page.\n\n''There are three classes of mark-up language:''\n\n''PRESENTATIONAL:'' the structure of a document is defined by cues in the way that the data is presented. For example, in this wiki, using certain symbols defines whether the element is in ''bold''. Alternatively, using comma seperated values in the transferal of an address book from Microsoft's Outlook Express determines where data will be placed in a transfered address book.\n\n''PROCEDURAL:'' Examples of procedural-markup systems include Tex, Lout and PostScript. Procedural markup has been widely used in professional publishing applications. This type of markup consists of instructions on how to present text and a series of instructions of how to undo formatting. MS Word, OpenOffice and other [[Desktop Publishing]] software will use this system of markup.\n\n''DESCRIPTIVE:'' This sort of mark-up is used to display information related to text but not necessarily related to the way it appears. For example, a date and time stamp applied to a selection of updated texts could be described as descriptive markup.\n\n

A page can be described as the physical media that passes through the printer. The printable area is the part of the page that an offset lithography process print machine, an inkjet or laserjet printer can apply ink to. In industrial settings to make sure that the ink covers the whole of a standard European A4, a US letter or an A3 page, an oversize stock will be used.\n\nThe structure of a page in a typical magazine, for example, usually contains a [[grid]] system to assist in positioning text, images and illustrations and margins - the head [top], foot [bottom], back edge [next to spine / fold] and the fore edge [opposite from the spine]. Two back edges combined together form the gutter of the page and also refers to the spacing between columns. The foot is normally greater in size than the head and the fore edge twice the width of the back edge in traditional printing. Jan Tschichold discovered that the margins of medieval manuscripts followed proportions:\n\nRatio of text area to page size was = 2:3\nDepth of printed area to page width = 1:1\nback edge [2], head [3], fore edge [4], foot [6] = 2:3:4:6\n\nFor a page to be printed correctly in an industrial context, there is usually the need for BLEED. This is the term used for the extra image information that is required for a printers cutting edge to cut through media with ink upon it rather than assuming that a print machine will be so accurate that the ink need only cover the exact size of the job. For example, a blue book cover should have an extra 3mm colour around the edge of the job so that the blade of the cutter trims through solid colour with a small tolerance to spare.

This is the process of analising a sequence of tokens or data blocks to determine a file's gramatical structure - it is also known as ''syntax analysis''. Once parsing is complete a file may be presented as an assembled structure. This is typically used in the way that computers generate / read images and text files. A ''parser'' is the term given to a program that can create / analise parsing.

In the early days of [[The Web]], the method for obtaining information was a crude [[FTP]] process where the user would access files via a simple text driven interface such as [[Fetch]]. The big explosion in the use of web browsers came in 1992 when [[NCSA Mosaic]] was developed and grew as the World Wide Web grew in popularity and size. Members of the Mosaic project left NCSA to form a company that would later be known as Netscape Communications Corporation - the company that released Netscape Navigator in 1994, the same year that Microsoft released its first version of [[Internet Explorer]].\n\nSince the start of the [[browser wars]] in 1994, several competitors have entered the browser market including [[Safari]] for the [[Apple Macintosh]], Mozilla's [[Firefox]] and other minority browsers such as [[Opera]].