As an introduction to each semester I outline the World Wide Web architecture and place the course disciplines in a wider context. The aim is to get a high altitude perspective of your coming work for the programme. Please refer to Appendix A, The Client/Server Model .

The content of the semester is two areas of technology in the area of client side activity, re the Client/Server-Model: XHTML and CSS, structuring page content and presentation of it will be the first third of the curriculum. The remaining two thirds will be work with the visualization and animation tool Flash . The Design and Visualization teacher will teach you the mechanics of Flash as a tool. I will teach you the inner programming of your animations by teaching you the programming language ActionScript 3.0 which is part of Flash.

[ Lloyd08 ] Chapter 1.

We have a whole lot of territory to designate before starting with the techie details that you have all come to learn.

• What programs do you need?
• How are you going to organize your work?
• Where in space are you? Cyberspace that is.

Last things first. We shall placing the technology of web in larger context on the architectural map of your programme. Take a look at the client/server-model at Appendix A, The Client/Server Model .

Next let us talk a bit about organization. [LLoyd08] has something about it in chapter 1. In order not to be overly specific at this early stage, I'll just say that you should create a specific folder on your computer for the work that we do in this module and it's successor modules. Eventually we will move this folder, and that is so much easier than if you had to move ten folders. Call it web or something like that. Already two rules of thumb:

I have answered the questions in reverse order, because I want to give you overview before detail, principle before implementation. Now, first question last, what programs? The easy and not helpful answer is that I couldn't care less, it is entirely up to you. Not very nice, so let me rephrase a bit.

We need for the Interaction part of the program specifically a good editor, we need a good browser. Later we will need more. When we as interaction designer create web pages we work with detail. So we need an editor that let's us write text and which does not change anything we write. It must be store exactly as we write it. No compression to save space, no changes to improve your work, nothing like that. In the beginning not even help! A little later when you have gained a bit of experience we will use editors that help you without changing what you write. Lloydi recommends Notepad in Windows, or TextEdit on Mac. In Linux the essential test is traditionally vi.

With those editors you can create documents, but sooner or later you would like to see them through the eyes of your viewers. Don't forget you have a potential of more than a billion viewers on the internet. For that we use the browser, mentioned in the talk about clinet/server. Your choice of browser for viewing is essentially yours. You must, however, think about your viewers as well. So you have to look at your own documents with the browsers of your viewer. In other words you must be familiar with many browsers.

When we design and develop web documents, I am not nearly as liberal as I am with your choice of editor. You will as the fundamental development browser use Firefox because for that purpose it is the best. You are not absolved from cheking in other browsers, but you get better help, and hence you do better work when your first check is always in Firefox.

These were the fundamental web tools. Later there will be web server software, programming languages and database management systems.

The second main part of the semester, Flash, is a system that has to be installed on you computer. This will work on Mac and Windows, but does not exist on Linux. Here we shall only work with the programming part in ActionScript 3. That could conceivably be done on Linux as well. Viewing Flash work is easy on any platform. So later in this semester you must install Flash (or in Linux, the Flex SDK) on your computer.

I am going to present you with a text file in 3 steps. The name of the file is x.txt:

1. test line

   Here is the browser representation (use File--> ).

   

2. <i>test line<i>

   Here is the browser representation (use File--> ).

   

3. <h1>test line</h1>

   Here is the browser representation (use File--> ).