\n{{topic{Arduino and Bluetooth}}}\n\nToday I'll talk briefly about the business of using WI-FI to communicate with the Arduino Bluetooth (Arduino BT) board.\n\nThe Arduino Bluetooth board is just like a regular Arduino board, except instead of a USB to serial interface, (which is used to program the board, as well as provide serial comms.) it uses a Bluetooth stack. This stack is a class 1 Bluetooth device, which means it has a range of 100 meters.\n\nThis makes all sorts of projects possible, because 100 meters is a very accommodating distance.\n\nRemember that you don't have to know ''too'' much about electronics to work with Arduino. Take a look at the tutorials and examples on the Arduino site for examples of what you can do.\n\nSome sites that might inspire you:\n\nhttp://www.littlebirdelectronics.com\nhttp://www.makezine.com\n\nProgramming the Arduino BT is no harder than programming the regular Arduino, however programming the mobile phone end of things is a little trickier. Here's what I've learned:\n\n* If you like using Mac OS X to develop your mobile Java apps., you're out of luck (unless something's changed in the last month.) as the development environments I've encountered on the Mac don't support serial programming, which you of course require to communicate with the Arduino BT.\n* Once again I'll give you the advice of starting simply, and try and get the following working:\n# establish a simple numeric communication pathway from the Arduino to a serial terminal, and vice- versa. This means that when the Arduino BT sends a number, it should appear in the serial terminal. Similarly, when you type a number into the serial terminal, your program in Arduino should expect this number, and for example light an L.E.D.\n# establish a simple numeric communication pathway from Mobile Processing / J2ME to a serial terminal, and vice- versa. \n# remove the serial terminal from the situation- thus creating a 'join' between the mobile phone environment and the Arduino BT.\n\nDo some research yourself, consider the benefits of using Arduino (BT or regular) in your projects, and start to plan the possible usages of these technologies in your projects.\n\nCheck out the Bluetooth library for MB, in particular the Client class.\n\n\n{{topic{Project advice}}}\nI'll give you a few minutes to get your stuffs together, and then I'll come around once again and give you some more advice on how to advance your projects.
Here's a [[working Bluetooth UTF example|BT_UTF]] that I've spent a lot of time preparing! Load it into 2 BT phones and see how you go...\n\n[[BT_UTF]]\n\nI realise that some of you are better programmers than others. I'll spend about 10 minutes explaining how the BT_UTF sketch works, to not only help you understand how it does its limited task, but also to help you understand how you can benefit from its design and extend it to suit your own purposes.\n\nNow, here's how today will work;\n\nThere could be up to 25 of you requiring help, and if we say there's 170 minutes of class, that's only about 6-7 minutes I can spend with each of you. 15 students means about 11 minutes each. Therefore, I'll be concentrating on giving you pointers in the right direction, and less on designing the architecture of your projects.\n\n
2005, Semester One\n\n\n2005, Semester Two\n\n\n\n
1. Marks handout\n\n2. What we'll cover in the next 4 sessions:\n\nThis week: Bluejacking\nNext week: Arduino\nThe week after that: Arduino and Bluetooth\nThe week after that: Project Consultation\n\n3. My blog\nhttp://coolfusion.com.au/cool.html\n\n4. Bluejacking\n\n4. Mobile Processing recap\n\n5. Project Consultation\n\n----\n\n''Bluejacking''\n\n"Bluejacking is the sending of unsolicited messages over Bluetooth to Bluetooth-enabled devices such as mobile phones, PDAs or laptop computers, sending a vCard which typically contains a message in the name field (i.e. for bluedating or bluechat) to another Bluetooth enabled device via the OBEX protocol." (from Wikipedia)\n\n\n''Bluesnarfing''\n\n"Bluesnarfing is the unauthorized access of information from a wireless device through a Bluetooth connection..." (from Wikipedia)\n\n\n''Bluecasting''\n\n"Although arguably neologism bluecasting is gradually gaining ground as a common term for the provision of any small digital media to suitable media provisioning enabled devices over Bluetooth via the OBEX protocol. Where by "small digital media" does not exclusively mean advertisements but could include photos, podcast style audio content, video, mobile ticketing, games (especially those written in J2ME) or even other applications." (from Wikipedia)\n\n\n''Wardriving''\n\nWardriving is the process of sampling the open/closed status of wireless networks, and leaving a physical mark in the real world to allow those "in the know" to share that information.\n\nHere's an interesting article on Wardriving: http://papers.ssrn.com/sol3/papers.cfm?abstract_id=585867\n\n\n''Resources''\n\nUm.. the Internet.\n\nSeriously though: http://www.bluejackingtools.com/\n\n\n\n''Mobile Processing''\n\nAs you're probablly aware, using Mobile Processing can simplify the Nomadic Computing development process enormously. There may be those in this class who prefer to develop J2ME more directly, for more control. I'd imagine most of you would be more comfortable in MP, and indeed those who can handle J2ME most likley don't require my help in that department.\n\nSo, here's a quick recap of developing in MP. We'll create a simple graphical app and transfer it to 'my' Nokia N80.\n\nThis set of steps can be thought of as a required technical milestone for all of you.\n\n1. Open MP\n2. In Preferences, check that the 'Mobile' section is set up correctly, i.e. the right toolkit is selected. (More for those with their own machines)\n3. Paste in this code:\n\n\n{{{\n\nint x;\nint y;\nint side;\n\nvoid setuo(){\n\n background(51);\n noStroke();\n fill(204,0,0);\n\n x = 100;\n y = 100;\n side = 50;\n\n}\n\n\nvoid draw(){\n\n background(25,25,200);\n\n rect(x%width, y%height, side, side);\n\n if (random(100) < 40){\n x--;\n }\n else{\n x++;\n }\n\n if (random(100) < 40){\n y--;\n }\n else{\n y++;\n }\n\n\n if (random(100) < 50){\n side++;\n if (side > 100) {\n side =100;\n }\n }\n else\n {\n side--;\n if (side < 2) {\n side = 2;\n }\n }\n\n}\n\n}}}\n\n4. Save the sketch under any name you like.\n\n5. Autoformat the code. Note that I did this //after// saving- in Arduino, Processing and Mobile Processing I've seen the auto format delete the last 75% of my code on occasion. (But only when there was some error in the code)\n\n6. Build and run the code. The emulator should appear, and a simple white box on a blue background is your reward for a successful completion of this step. No joy? Then improve your attitude. No joy with gettting this to run? Shouldn't happen in this case, as I've already checked //this// code, but in general when you're developing your own apps this will be the step when syntax bugs crawl out of your woodwork.\n\n7. If you're happy with the way things ran, now it's time to send the code to your phone. Choose "Export Midlet", and after a time you'll find a new set of files in the same location in which you saved the sketch. Transfer those files to your phone. From here it gets phone-specific, but usually a .jad or a .jar is involved.\n\n\n{{justyImportant{Of course, you'll need to be able to master this process before going any further!}}}\n\nWhen debugging your apps, it's a good idea to test that the process above works with the //simplest of sketches//- i.e. one that doesn't use any Bluetooth, GPS, media player, etc. That is, "bells and whistles". Do this before you try to track down bugs in such bells and whistles.\n\n\n''Project Consultation''\n
\n{{topic{Arduino}}}\n\nhttp://www.arduino.cc\n\nArduino is a physical-computing platform that allows the rapid and comparatively easy prototyping of electronic circuits. An Arduino 'board' is a microcontroller attached to a USB interface. The Arduino software development environment allows the (again, comparatively easy) development of software for the Arduino hardware system.\n\nToday I'll show you a couple of 'proof of concepts' that I've used Arduino to develop. If you've seen my blog, you will have seen a number of final applications of the Arduino platform.\n\nIf you're interested in Arduino, check out their site, specifically:\n\n* The Arduino Forum\n* The Arduino Blog\n* The Arduino Tutorials\n\nSimilar to last week's 'proof of concept', I'll show you now how to program these boards with a simple program.\n\n\n{{topic{OBEX}}}\n\nOBEX is an object exchange protocol with the following attributes:\n\n* Interruptable- object transfer may be interrupted and resumed- ideal for wireless devices.\n* Binary data- unlike HTTP, data is transferred as binary data.\n* Implementable over different layers- e.g. Infrared, Bluetooth.\n\n\nBluejacking uses this protocol.\n\n{{justyQuestion{Why would we want to use this protocol, instead of a simple serial port connection?}}}\n\n\n''Resources''\n\nhttp://java.sun.com/j2me/docs/wtk2.2/docs/UserGuide-html/bluetooth.html\nhttp://java.sun.com/j2me/docs/wtk2.2/docs/UserGuide-html/demonstrations.html#wp35208\nhttp://www.wirelesspronews.com/wirelesspronews-14-20041213IntroductiontoBluetoothandJ2ME.html\nhttp://www.j2meolympus.com/forums/TopicThread.jsp?TopicID=4709\n\n\n\n''Research''\nIf we get time today, we can start to research how to go about programming for OBEX. Again, I suggest a simple proof of concept- to get one phone to 'talk' to another phone. (i.e. send some information, and receive some information). \n\nThe first of the four links I've provided you with above will show you how to set up the Java Wireless Toolkit to work with OBEX. Please spend some time over the next week ensuring that you are able to work with OBEX.\n\n\n{{topic{System Development Methodologies}}}\n\nOK. This one could get a lot more boring that I'll let it. (It certainly did in my undergraduate computer science degree) However, from my discussions last week it occurred to be that I could share some of the techniques that I use as a systems designer. To be clear, I see a systems designer in a slightly different light to 'just' a software engineer. For a start, hardware is also involved, but more importantly, a systems designer plans out a project from a variety of viewpoints. Let's get stuck in:\n\n//Methods of perceiving the system://\n\n* Top-down. You've heard me mention this before, in the context of 'breadth first'.\n* Bottom-up. Ensuring that the lowest-level of functionality is working.\n* Modularity. Splitting a project into modules, and ensuring those modules inter-operate correctly.\n* Prototyping. Achieving small milestones, rather that trying to complete an entire project in one sweep.\n\n//Tools for designing the system://\n\nTop-down: I whipped out the paper and pen a few times last week, in order to show some of you how to plan out a system from a high level. I'll draw an example one on the whiteboard right now.\n\nBottom-up: Define small pieces of functionality and code/build them, testing as you go. These are modules.\n\nModularity: The other aspect to modularity is how your modules will work together. Needless to say, even if all the modules in your system work correctly on their own, this is no guarantee that they will work with each other. Thus, as part of the modular design process, it's wise to strictly define the how those modules pass information between each other.\n\nPrototyping: Testing as you go cannot be recommended highly enough. Build your system up from simple components, and as you integrate new parts into your project, test, test and test again. You really don't want to get to the last step and find things are broken. Most of you will be familiar with this concept; adding features and then ''boom'' the thing breaks. In this case you know what broke it. Without testing as you go, you'd miss this vital information.\n\n\n
Hopefully this will make things perfectly clear. Let's imagine your name is Justin Clayden. (You ''wish!'') Your login is jcla8108.\n\nIt all starts with your student page- that is, you the student in general, including all the units of study you're doing here. The address for this would of course be:\n\nhttp://www.arch.usyd.edu.au/~justin\n\nGo on, click it!\n\n
Here is the [[presentation I gave at AI2006|AI2006.html]]. You'll need the Shockwave Flash plugin to view it. It's 800x600 so at to fit into most browsers. If you'd like to see the original 1024x768 version (which is clearer) click [[here|AI2006b.html]].\n\n//note that the controls to this presentation are at the bottom of the page.//
[[Artificial Intelligence 2006|http://www.comp.utas.edu.au/ai06/]]\n
\nJustin James "Justy" Clayden is a research assistant and teacher in the Key Centre for Design Computing and Cognition, in the Faculty of Architecture, at the University of Sydney. He works with [[electronics|http://www.coolfusion.com.au/cool.html]], software applications, and people. :)\n\nHe runs a business called [["Cool Fusion"|http://www.coolfusion.com.au]] (brand new site as of Jun '07) and plays in a funk band [["Condasleeza"|http://www.coolfusion.com.au/condasleeza/index.html]].\n\n{{justyImportant{He runs an art/geek site that you can't help but subscribe to [[here|http://www.coolfusion.com.au/cool.html]].}}}\n\nHis interests include [[skateboarding|http://www.coolfusion.com.au/slamless/index.html]], [[gardening|http://members.optusnet.com.au/~justy256/]], astronomy, electronics, [[animation|http://www.coolfusion.com.au/outpost/index.html]], etc, etc.\n\n\n[img[Happy Justy on a rock|img/TasSk82.jpg]]\n\n<<tagCloud systemConfig>>
ActionScript is Macromedia's Flash's language.
Bachelor of Informatics obtained from 1994 Griffith University, in Brisbane, QLD.
{{{\n// ReadWriteUTF - a technical proof-of-concept for sending and receiving data via Bluetooth.\n// written and tested by Justin James Clayden September 2007\n\n// Bluetooth is event- driven. That is, our sketches may attempt to connect at any time, but they must be ready \n// to accept an incoming connection at any time. Note that the libraryEvent handler is called in response to \n// Bluetooth events.\n\n// This sketch is state-driven. This simplifies the code by centralising it within the state machine.\n\nString ver = "0.1.1";\n\n// Import the library\nimport processing.bluetooth.*;\n\n// These are the states that define the state machine.\n\n// Init and Idle\nfinal int STATE_Init = 0;\nfinal int STATE_Idle = 1;\n\n// Connecting to another phone and sending data\nfinal int STATE_DevicesSearch = 2;\nfinal int STATE_DeviceFound = 3;\nfinal int STATE_DevicesDone = 4;\nfinal int STATE_ServicesSearch = 5; \nfinal int STATE_ServiceFound = 6;\nfinal int STATE_ServicesDone = 7;\nfinal int STATE_ServiceConnecting = 8;\nfinal int STATE_ServiceConnected = 9;\nfinal int STATE_SendingData = 10;\nfinal int STATE_SendingDataIdle = 11; \n\n// Receiving a connection from another phone\nfinal int STATE_AwaitingConnection = 12;\nfinal int STATE_ClientConnected = 13;\n\nfinal int STATE_ConnectedTerminated = 14;\n\n\n// How long to delay between changing states- set high for debugging \nfinal int chillFactor = 500;\n\n// This is the variable that holds the state\nint state;\n\n// A variable for messages\nString msg = "Starting up..";\n\n// Any special errors can go here\nString err = ""; \n\nPFont font;\n\n// The variable holds an instance of a BT object\nBluetooth bt;\n\n// An array of discovered services\nService[] services = null;\n\n// Connection to other device\nClient c;\n\n\nvoid setup(){\n\n // Not much to do here, as it's taken care of in the state machine\n\n // set up font\n font = loadFont(FACE_MONOSPACE, STYLE_PLAIN, SIZE_SMALL);\n textFont(font);\n\n // The first state \n state = STATE_Init;\n\n}\n\nvoid draw(){\n\n // draw() is the only time that the screen is updates, \n // so if we want any messages to appear, they have to\n // be drawn here. Thus, we need to be sure that the \n // updateStatus() handler is called when states are\n // changed.\n\n // Run the state machine\n switch(state){\n\n case STATE_Init: \n // Start the BT\n bt = new Bluetooth(this);\n updateStatus(); \n chill();\n msg = "Started up OK.";\n state = STATE_Idle; \n break; \n\n case STATE_Idle: \n // We wait here until the user chooses to 'host' or 'find'\n msg = "1. Allow connections\sn\sn2. Discover devices"; \n updateStatus();\n break; \n\n case STATE_DevicesSearch: \n updateStatus();\n break; \n\n case STATE_DeviceFound: \n updateStatus();\n chill();\n state=STATE_DevicesSearch;\n break;\n\n case STATE_DevicesDone: \n updateStatus();\n chill();\n // Look for services\n\n state=STATE_ServicesSearch;\n break; \n\n case STATE_ServicesSearch: \n msg = "Looking for a service to join...\sn\sn"; \n\n updateStatus();\n break; \n\n case STATE_ServiceFound:\n updateStatus();\n chill();\n state=STATE_ServicesSearch;\n break;\n\n case STATE_ServicesDone: \n String tList = "Services found:\sn\sn"; \n for (int i = 0, len = length(services); i < len; i++) {\n tList += i + ". " + services[i].device.name + "\sn";\n }\n msg = tList;\n updateStatus();\n chill();\n state=STATE_ServiceConnecting; \n break; \n\n case STATE_ServiceConnecting: \n // We wait here until the user selects a service\n break; \n\n case STATE_ServiceConnected:\n updateStatus();\n chill();\n state=STATE_SendingDataIdle; \n break;\n\n case STATE_SendingData:\n sendData();\n updateStatus();\n chill();\n state = STATE_SendingDataIdle;\n break; \n\n case STATE_SendingDataIdle:\n msg = "Press any key to send a random string"; \n updateStatus();\n chill();\n break;\n\n case STATE_AwaitingConnection:\n updateStatus();\n break;\n\n case STATE_ClientConnected: \n // Attempt to read in the sent data\n try { \n int ca = c.available();\n if (true){//ca > 0){\n background(200,0,200);\n String tString = c.readUTF(); \n msg = "Received: " + tString;\n c.writeInt(1);\n c.flush();\n updateStatus();\n chill();\n }\n else {\n err = "Client was not available (" + ca + ")";\n }\n }\n catch (PException pe) { \n c.stop();\n c = null;\n state = STATE_ConnectedTerminated;\n }\n updateStatus();\n break; \n\n case STATE_ConnectedTerminated:\n updateStatus();\n break;\n\n\n\n } // switch\n\n\n} // draw\n\n// Send data\nvoid sendData(){\n String tMsg = randomMessage(); \n msg = "Sending this: " + tMsg;\n if (c == null) {\n err = "Client was null"; \n return; \n }\n\nint ca = c.available();\n if (true){//ca > 0){\n background(20,250,20);\n c.writeUTF(tMsg);\n c.flush();\n }\n else {\n err = "Client was not available (" + ca + ")"; \n }\n}\n\n\n// Externally triggered (by Bluetooth) events\nvoid libraryEvent(Object library, int event, Object data){\n\n if (library == bt){\n\n switch(event){\n\n // This phone has found a device, and the data Object will contain the information of that device. \n case Bluetooth.EVENT_DISCOVER_DEVICE:\n msg = "Found device at: " + ((Device) data).address + "...";\n state = STATE_DeviceFound;\n updateStatus();\n break;\n\n // The device discovery process has completed. \n case Bluetooth.EVENT_DISCOVER_DEVICE_COMPLETED:\n msg = "Found " + length((Device[]) data) + " devices.";\n state = STATE_DevicesDone;\n updateStatus();\n break;\n\n // This phone has discovered a service on another device\n case Bluetooth.EVENT_DISCOVER_SERVICE: \n msg = "Found a service on " + ((Service[]) data)[0].device.address + "..."; \n updateStatus();\n state = STATE_ServiceFound;\n break;\n\n // The service discovery process has completed\n case Bluetooth.EVENT_DISCOVER_SERVICE_COMPLETED:\n services = (Service[]) data; \n msg = "Search complete.";\n updateStatus();\n state = STATE_ServicesDone;\n break;\n\n // ANother phone has connected to us, so accept any sent data\n case Bluetooth.EVENT_CLIENT_CONNECTED: \n msg = "A Client has connected!";\n c = (Client) data;\n state = STATE_ClientConnected;\n\n break;\n\n }\n\n } // library == bt\n\n}\n\n\n\n// Keyboard input. \n// Very simple- any key will get things moving\nvoid keyPressed() {\n\n switch (state){\n\n // Only allow initial input if we're idle\n case STATE_Idle:\n\n // Allow connections from other devices \n if (key == '1'){\n bt.start("BT_UTF"); \n msg = "Awaiting connection";\n state = STATE_AwaitingConnection; \n updateStatus();\n }\n\n if (key == '2'){ \n // Search for other devices\n\n msg = "Searching...";\n bt.find();\n state = STATE_DevicesSearch;\n updateStatus();\n }\n\n break;\n\n case STATE_ServiceConnecting: \n if (services != null) {\n if ((key >= '0') && (key <= '9')) {\n int i = key - '0';\n if (i < length(services)) {\n c = services[i].connect(); \n state = STATE_ServiceConnected;\n }\n }\n }\n break;\n\n\n case STATE_SendingDataIdle:\n state = STATE_SendingData;\n break;\n\n } // switch state\n\n}\n\n\n// Refresh the textual display\nvoid updateStatus(){\n String message = "Bluetooth UTF v" + ver + "\sn\snState: " + stateName(state) + "\sn\sn" + msg + "\sn\sn" + err; \n text(message,3,4,width-4,height-4); \n}\n\n\n\n// Chill function\nvoid chill(){\n delayMillis(chillFactor); \n}\n\n// Delay function\nvoid delayMillis(int rDelayInMillis){\n int mil = millis();\n while (millis() - mil < rDelayInMillis) { \n // Do nought\n }\n}\n\n\n// Exit gracefully\nvoid destroy() {\n bt.stop();\n}\n\n\n\n// Return a human-readable String that describes the state rStateNum\n// Also, set the background colour to give an easily-seen visual indication of what's happened. \nString stateName(int rStateNum){\n\n switch(rStateNum){\n\n case STATE_Init: \n background(50,50,50);\n return "Init"; \n\n case STATE_Idle: \n background(0,50,0);\n return "Idle"; \n\n case STATE_DevicesSearch: \n background(0,0,50);\n return "Searching for devices"; \n\n case STATE_DeviceFound: \n background(0,0,150);\n return "Device found";\n\n case STATE_DevicesDone: \n background(0,0,250);\n return "Done searching for devices"; \n\n case STATE_ServicesSearch: \n background(50,0,0);\n return "Searching for services"; \n\n case STATE_ServiceFound:\n background(150,0,0);\n return "Service found";\n\n case STATE_ServicesDone: \n background(250,0,0);\n return "Done searching for services"; \n\n case STATE_ServiceConnecting: \n background(100,50,100);\n return "Service connect"; \n\n case STATE_ServiceConnected:\n background(200,0,0);\n return "Connected to service"; \n\n case STATE_SendingData: \n background(150,150,0);\n return "Sending data"; \n\n case STATE_SendingDataIdle: \n background(150,150,0);\n return "Sending data (idle)"; \n\n case STATE_AwaitingConnection:\n background(50,50,50);\n return "Awaiting connection";\n\n case STATE_ClientConnected: \n background(150,150,150);\n return "Client connected"; \n\n case STATE_ConnectedTerminated:\n background(20,20,20);\n return "** CONNECTION TERMINATED **";\n\n } \n\n return "Uh- check your code.. (" + state + ")" ;\n\n}\n\n\n// Generate a random message.\nString randomMessage(){\n // Send a String\n int r = random(7);\n String sMsg = "";\n\n switch(r){\n\n case 0:\n sMsg = "apple";\n break;\n\n case 1:\n sMsg = "orange";\n break;\n\n case 2:\n sMsg = "pear";\n break;\n\n case 3:\n sMsg = "grapefruit";\n break;\n\n case 4: \n sMsg = "kiwifruit";\n break;\n\n case 5:\n sMsg = "guava";\n break;\n\n case 6:\n sMsg = "lemon";\n break;\n\n case 7:\n sMsg = "banana"; \n break;\n } // switch for send strings\n\n sMsg = "Sending this: " + sMsg; \n\n return sMsg; \n\n}\n\n}}}
<HTML>\n<applet archive = "bubbleboids.jar" code="jcsim.PSim.class" width=1200 height=800>\n</applet>\n</HTML>
C++ is an [[object-oriented]] version of the popular C language.
<html>\n<iframe src="http://www.google.com/calendar/embed?src=e069rmvd1ku1fanaipo6e84cj4%40group.calendar.google.com&amp;epr=3&amp;wkst=2&amp;height=614" style=" border-width:0 " width="480" frameborder="0" height="614"></iframe>\n</html>
I'm helping Dr. [[Andy Dong|http://www.arch.usyd.edu.au/~adong]] in his research into the visualisation of the effectiveness of design based discussion within expert versus novice teams.\n\n<<tabs teamCollab\nDemo "Boids in action" JavaBoidsDemo\nDelta_Design "The Delta Design game" deltaDesign\nData "Data Sets used in our research" Data\nMethods "Visualisation methods used in our research" Methods\nPapers "Published Papers" publishedPapers\nReferences "Referenced Papers" refPapers\n>>
''AI2006''\n\nI presented a paper at AI06 in December of last year:\n//"Clustering and Visualising Data using Cellular Automata Ants"//\n\nHere is the [[presentation|AI 2006 presentation]]. (In Shockwave format)
[[''Bamberg 1102''|Bamberg1102.html]]\n\n[[''Bamberg 2202''|Bamberg2202.html]]\n\n[[''Bamberg 2302''|Bamberg2302.html]]\n\n[[''Delft''|Delft.html]]
About\nNews\nResearch\nTeaching\nConferences\nInteractives\n[[minied]]
"Delta Design" is a game that we use to gather information about the way in which novice versus expert designers collaborate (or don't) in a situation involving designing. There are four roles in the game:\n\n** Project Manager\n** Achitect\n** Structural Engineer\n** Thermal Engineer\n\nThe game is run for approximately two hours, and video and audio of the session is recorded and later transcribed.\n\nThe transcription is then piped into a natural language parser, which identifies the noun phrases that were uttered.\n\n
Be sure to check out http://www.coolfusion.com.au/Justy.html and http://www.coolfusion.com.au/cool.html. Feel free to subscribe to either, and preferably the latter.
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>\n<div class='title' macro='view title'></div>\n<div class='editor' macro='edit title'></div>\n<div class='editor' macro='edit text'></div>\n<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
"[[veloCITY|http://wwwfaculty.arch.usyd.edu.au/velocity/]]"\n12th October - 4th November\nTin Shed Gallery, at the University of Sydney.\n\nUberLingo will be one of the works shown at this exhibition. Here's what it will look a little bit like.\n\n[img[UberLingo exhibition|img/uberex.jpg]]
Here is a list of my best students //ever//, with links to their work.\n\nTODO
Here is a list of my worst students ever. Of course, i'm not going to name them, but let their work serve as a warning to you to not repeat their mistakes.\n\nTODO
<<saveChanges>>\n<<newTiddler>>\n[[SiteTitle]]\n[[SiteSubtitle]]\n[[MainMenu]]\n[[SideBarOptions]]\n[[SideBarTabs]]\n[[DefaultTiddlers]]\n[[StyleSheet]]\n[[ViewTemplate]]\n[[PageTemplate]]\n[[EditTemplate]]\nOptionsPanel\nHandyTags\n[[tagCloud plugin]]\n\n[[TabAll]]\n\n<<closeAll>><<permaview>><<newTiddler>><<newJournal 'DD MMM YYYY'>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>>\n\n[[Teaching2006]]\n[[Teaching2005]]\n[[Teaching2004]]\n[[Teaching2003]]\n[[Teaching2002]]\n[[Teaching2001]]\n\n
TiddlyWiki uses Wiki style markup, a way of lightly "tagging" plain text so it can be transformed into HTML. Edit this Tiddler to see samples.\n\n! Header Samples\n!Header 1\n!!Header 2\n!!!Header 3\n!!!!Header 4\n!!!!!Header 5\n\n! Unordered Lists:\n* Lists are where it's at\n* Just use an asterisk and you're set\n** To nest lists just add more asterisks...\n***...like this\n* The circle makes a great bullet because once you've printed a list you can mark off completed items\n* You can also nest mixed list types\n## Like this\n\n! Ordered Lists\n# Ordered lists are pretty neat too\n# If you're handy with HTML and CSS you could customize the [[numbering scheme|http://www.w3schools.com/css/pr_list-style-type.asp]]\n## To nest, just add more octothorpes (pound signs)...\n### Like this\n* You can also\n** Mix list types\n*** like this\n# Pretty neat don't you think?\n\n! Tiddler links\nTo create a Tiddler link, just use mixed-case WikiWord, or use [[brackets]] for NonWikiWordLinks. This is how the GTD style [[@Action]] lists are created. \n\nNote that existing Tiddlers are in bold and empty Tiddlers are in italics. See CreatingTiddlers for details.\n\n! External Links\nYou can link to [[external sites|http://google.com]] with brackets. You can also LinkToFolders on your machine or network shares.\n\n!Tables\n|!th1111111111|!th2222222222|\n|>| colspan |\n| rowspan |left|\n|~| right|\n|colored| center |\n|caption|c\n\nFor a complex table example, see PeriodicTable.\n\n! Horizontal Rules\nYou can divide a tiddler into\n----\nsections by typing four dashes on a line by themselves.\n\n! Blockquotes\n<<<\nThis is how you do an extended, wrapped blockquote so you don't have to put angle quotes on every line.\n<<<\n>level 1\n>level 1\n>>level 2\n>>level 2\n>>>level 3\n>>>level 3\n>>level 2\n>level 1\n\n! Other Formatting\n''Bold''\n==Strike==\n__Underline__\n//Italic//\nSuperscript: 2^^3^^=8\nSubscript: a~~ij~~ = -a~~ji~~\n@@highlight@@ Unfortunately highlighting is broken right now.\n@@color(green):green colored@@\n@@bgcolor(#ff0000):color(#ffffff):red colored@@ Hex colors are also broken right now.\n
''Interactive Works''\n\nInstallations\n\nHead over to [[Cool Fusion|http://www.coolfusion.com.au]] to check out an [[audio installation|http://www.coolfusion.com.au/sounds.html#an_past%20work]] I did for an exhibition called "In Living Memory".\n\n\n[img[Bogeyed Justy|img/bogeyes.jpg]]\n\n
If you have a Java enabled browser*, we have some demonstations of this approach as it applies to various datasets. Click the "data" tab above to head on over there.
Here are the languages that I have developed in during my stay at the [[University of Sydney|http://www.usyd.edu.au]].\n\n[[Lingo]]\n[[ActionScript]]\n[[C++]]\n[[C#]]\n[[Java]]\n[[JavaScript]]\n[[HTML]]\n
Lingo is Macromedia's Director's language.
Masters of Philoshophy in Architecture, obtained in 2000 from the University of Sydney, NSW.
[[Calendar]]\n\n[[News]]\n[[About]]\n[[Research]]\n[[Teaching]]\n[[deco2102|deco2102 S2 2007]]\n[[deco3200|tutor, deco3200]]\n\n[[Conferences]]\n[[AI2006 pres.|AI 2006 presentation]]\n[[Interactives]]\n[[Exhibitions]]\n\nUberLingo\nBubbleBoids!\n\n/%\n[[Hall of Fame]]\n%/\n
//A Framework for Representing Virtual Worlds// is the title of my Master's Thesis, and you can read the introduction [[here|http://www.arch.usyd.edu.au/~justin/part1.pdf]] and the bulk of it [[here|http://www.arch.usyd.edu.au/~justin/part2.pdf]].
There are two methods for visualising the data that I am assisting with in our research:\n\n''Artificial Ants''\nBased on principles of cellular automata, [[artifical ants|Visualising multidimensional data with artificial ants]] can be used to cluster multidimensional data. We are using this method to represent the noun phrases uttered by designers as they design. Each utterance is represented as a single ant. Utterence frequency data is sourced from a "word by document matrix", which is a representation of the number of times a word was uttered within a single utterance. This data, which is of a [[very high dimension]], is assigned to individual ants.\n\n\n''Boids''\nBoids are artificial birds that exhibit emergent flocking behaviour. Each Boid is predisposed to both move towards other Boids, and avoid colliding with them. Traditionally, a scalar can be assigned to each Boid, and a data distance between each pair of boids computed, which can then attenuate this behaviour. By assigning a scalar to each boid, and varying that scalar over time, a visualisation of the degree of collaboration that occurs with designing groups can be obtained.\n\n/%Here's an [[example|sim.html]].%/
In 2004 I developed an image processing Language called UberLingo, which the students used to build simple programs that manipulated images and generated a narrative, in tandem with the other students in the class. The final collaborative artwork was exhibited at the [[Faculty of Architecture's|http://www.arch.usyd.edu.au]] end of year exhibition.
//''26th July, 2007''//\nMy deco2102/1200 notes are available [[here|deco2102/1200]]\n\n---\n\n\n\n\n//''19th October, 2006''//\nToday's deco1200 studio is available [[here|http://www.arch.usyd.edu.au/~justin/deco/studio11.pdf]].\nLecture is [[here|http://www.arch.usyd.edu.au/~justin/deco/lecture11.pdf]].\n\n---\n\n//''10th October, 2006''//\n//A reminder about UberLingo//\nHave a look at [[this|Unrolling FOR loops]] for some advice that should help you when working with FOR loops and Jump statements.\n\n\n----\n\n//''7th October, 2006''//\n//UberLingo Update//\nwww.arch.usyd.edu.au/~justin/desc9068/UberExhibish.zip\n\nThis update fixes ink effect issues, as well as allowing a group test mode.\n----\n\n//''5th October, 2006''//\nIn case it's not on the official deco site, here is a link to today's [[tutorial|http://wwwpeople.arch.usyd.edu.au/~justin/deco/tute9.html]].\n\n----\n\n//''4th October, 2006''//\nThere is an [[update|UberLingoUpdate]] for Uberlingo.\n\n----\n\n//''14 September, 2006''//\n\n{{justyImportant{Finally}}}, a proper website for Justin's endeavours at the University of Sydney.\n\nThis site was made with [[TiddlyWiki|http://www.tiddlywiki.com]], which quite frankly, rocks.\n\n\n[img[Justy with Ruby|img/justyruby.jpg]]\n
<div class='header' macro='gradient vert #000000 #371080'>\n<div class='headerShadow'>\n<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;\n<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>\n</div>\n<div class='headerForeground'>\n<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;\n<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>\n</div>\n</div>\n<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>\n<div id='sidebar'>\n<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>\n<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>\n</div>\n<div id='displayArea'>\n<div id='messageArea'></div>\n<div id='tiddlerDisplay'></div>\n</div>
Here are the subjects I've taught over the years:\n\n<<tabs pastTeaching\n2006 "Teaching in 2006" Teaching2006\n2005 "Teaching in 2005" Teaching2005\n2004 "Teaching in 2004" Teaching2004\n2003 "Teaching in 2003" Teaching2003\n2002 "Teaching in 2002" Teaching2002\n2001 "Teaching in 2001" Teaching2001\n>>
\n[[Master's Thesis]]\n[[Collaboration within teams]] (With [[Dr. Andy Dong|http://www.arch.usyd.edu.au/~adong]])\n[[Visualising multidimensional data with artificial ants]] (With [[Dr. Andrew Vande Moere|http://www.arch.usyd.edu.au/~andrew]])\n[[Multiagent image processing]] (With [[Petra Gemeinboeck|http://www.arch.usyd.edu.au/~petra]])\n\nTODO pix
<<search>><<permaview>>
/%\n<<tabs txtMainTab Timeline Timeline TabTimeline All 'All tiddlers' TabAll Tags 'All tags' TabTags More 'More lists' TabMore>>\n%/
[[BInf.]], [[MPhil.]] (Arch.) University of Sydney homepage.
Justin James Clayden
http://www.aarch.usyd.edu.au/~justin/
/***\nPlace your custom CSS here\n***/\n/*{{{*/\n\n/* These selectors are in no particular order */\n\n.viewer pre{\n color: #202020;\n background: #E;\n font-family: Courier New, Courier;\n font-size: 9pt;\n}\n\n.title{\n color: #C03030;\n font-weight: bold;\n font-variant: small-caps;\n font-size:28pt;\n}\n\n.Q{\ncolor:#CCCCCC;\nfont-size:48pt;\n}\n\n\n.stylin{\nfont-family:Courier,Courier New, Arial, serif;\nfont-size: 48pt;\nfont-style:oblique;\ntext-align: right;\ncolor:#F0C020;\n}\n\n.orange {\ncolor:#F0C010;\n}\n\n.purple {\ncolor:#D010C0;\n}\n\n.gutsy{\nfont-weight:bold;\n}\n\n.wimpy{\nfont-weight:200;\nfont-size: 10pt;\n}\n\n\n.pullQuote{\n\nline-height: 115%;\nfont-family: futura, sans-serif;\ncolor: #F02010;\nfont-size: 32pt;\nwidth: 200px;\nmargin-right: 5px;\nfont-style: oblique; \npadding: 20px 5px 20px 20px;\npadding-right: 5px;\nfloat: left;\n}\n\n\n.pullQuote2{\ntext-align:right;\nline-height: 115%;\nfont-family: futura,sans-serif;\ncolor: #2010A0;\nfont-size: 16pt;\nwidth: 220px;\nmargin-left: 5px;\nfont-weight: bold; \npadding: 20px 0px 5px 20px;\npadding-left: 10px;\nfloat: right;\n}\n\n\n.justyReferenceQuote{\n\nfont-family: Verdana, sans-serif;\nfont-size: 10pt;\nfont-style: oblique;\ncolor: #202040;\nbackground:#FAFAFF;\nwidth: 80%;\ntext-align: center;\nline-height: 300%;\nmargin: 15px;\npadding: 15px;\nborder-style: solid;\nborder-color: #AAA;\nborder-width: 1px;\n\n}\n\n.BIG{\nfont-family: Courier, serif;\nfont-size: 300%;\n}\n\nbody {\n color: #202020;\n font-family: Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 12pt;\n letter-spacing: 0.075em;\n word-spacing: 0.10em;\n}\n\nLI {\nline-height: 200%;\ncolor:#222070;\n font-size: 11pt;\n}\n\n.cent{\n text-alight: center;\n}\n\n\n.topic {\ncolor: #202040;\n background-color: #FFFFFF;\n font-family: Verdana, Arial, Helvetica, sans-serif;\n font-weight: bold;\n font-variant: small-caps;\n font-size: 18pt;\n}\n\n.miniTopic {\ncolor: #2A2A3A;\n background-color: #FFFFFF;\n font-family: Verdana, Arial, Helvetica, sans-serif;\n font-weight: bold;\n font-size: 14pt;\n}\n\n.minitopic {\ncolor: #2A2A3A;\n background-color: #FFFFFF;\n font-family: Verdana, Arial, Helvetica, sans-serif;\n font-weight: bold;\n font-size: 14pt;\n}\n\n\nH1 {\n color: #101030;\n background-color: #FFFFFF;\n Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 16pt;\n}\n\nH2 {\n color: #101030;\n background-color: #FFFFFF;\n font-family: Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 14pt;\n}\n\n\nH3 {\n color: #101030;\n background-color: #FFFFFF;\n font-family: Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 12pt;\n}\n\nH4 {\n color: #101030;\n background-color: #FFFFFF;\n font-family: Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 10pt;\n}\n\nH5 {\n color: #101030;\n background-color: #FFFFFF;\n font-family: Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 9pt;\n}\n\nH6 {\n color: #101030;\n background-color: #FFFFFF;\n font-family: Futura, Verdana, Arial, Helvetica, sans-serif;\n font-size: 8pt;\n}\n\n.justyImportant{\n color: #9e2020;\n font-weight: bold;\nfont-style: italic;\n}\n\n.justySmall{\n color: #505050;\n font-size: 70%;\nfont-style: italic;\n}\n\n.justyQuestion{\n color: #705050;\nbackground: #E0E0E0;\n font-size: 10pt;\nfont-style: italic;\n}\n\n.justyWOW{\n color: #F020E0;\n font-size: 24pt;\n font-style: italic;\n font-family: Comic Sans, Courier New;\n\n}\n\n.justyGreen {\n color: #00FF00;\n}\n\n.justyCode {\n color: #202020;\n background: #E;\n font-family: Courier New, Courier;\n font-size: small;\n}\n\n#tiddlerNews .title {\nbackground-color: #e0e0ff;\n}\n\n\n/*}}}*/\n
<<list all>>
Semester Two, 2007\n[[Lecturer and tutor, deco2102|deco2102 S2 2007]]\n[[Tutor, infodevice]]\n[[tutor, deco3200]]\n[[Past semesters|Previous teaching]]
TODO\n
TODO
TODO
''2004, Semester One''\n\n\n''2004, Semester Two''\n\n[[3D Modelling and Photorealism|http://wwwpeople.arch.usyd.edu.au/~justin/desc9019/]]\n
''2005, Semester One''\n\n''2005, Semester Two''\n[[3D Modelling and Photorealism|http://wwwpeople.arch.usyd.edu.au/~justin/deco1008-2103/]]\n
''2006, Semester Two''\n\ndeco1200 : Tutor, [[Interaction Design Studio|http://www.arch.usyd.edu.au/~rob/DECO1200]]\ndesc9068 : Tutor, [[Interactive Multimedia Design|http://wwwpeople.arch.usyd.edu.au/%7Epetra/2006/DESC9068/]]
Here are 6 snapshots in time of a mosaic of interacting images that are driven by UberLingo.\n\n[img[UberLingo Exhibition example- it's a mosaic of 25 images, that have communicated with each other|img/ubersnap1.jpg]]\n[img[UberLingo Exhibition example- it's a mosaic of 25 images, that have communicated with each other|img/ubersnap4.jpg]]\n[img[UberLingo Exhibition example- it's a mosaic of 25 images, that have communicated with each other|img/ubersnap5.jpg]]\n[img[UberLingo Exhibition example- it's a mosaic of 25 images, that have communicated with each other|img/ubersnap6.jpg]]\n[img[UberLingo Exhibition example- it's a mosaic of 25 images, that have communicated with each other|img/ubersnap7.jpg]]\n[img[UberLingo Exhibition example- it's a mosaic of 25 images, that have communicated with each other|img/ubersnap8.jpg]]\n
\n[img[UberJusty|img/UberJusty.jpg]]\nUber Justy
UberLingo is an [[image|UberExamples]] processing language I developed, that's built on top of Director's [[Lingo]] language. It also draws from the idea of Logo's Turtle. UberLingo can perform basic image processing functions, such as:\n\n* Blending two images\n* Copying one part of an image into a part of another\n* Drawing lines and shapes with the Turtle\n* Copying pixels from a neighbour's image\n* Reacting to external triggers\n\n\nHere's an example of an UberLingo script:\n\n{{justyCode{\n-- UberLingo ACTIVE Script\n-\nONCE Turtle_SetAngle 0\nRND CopyImage 9 0\n-\n--DRAW IMAGES AROUND TILE\nTurtle_New\nN3 RND Turtle_SetAngle 45\nTurtle_MoveTo point(1,1)\nFOR 1 20 1\nN5 Turtle_CopyBlock 1 X\nN5 Turtle_Forward 10\nNEXT\n-\n}}}\n
There is a fix for UberLingo that you can add to your version, without having to download the whole thing.\n\n1. Open UberLingo in Director\n2. Find the cast member called "button refresh ro" (You can use Edit:Find:Cast Member)\n3. Open its script.\n4. Paste this in, replacing what's there:\n\n{{{\non mouseUp\n\n if the name of the member of sprite 3 = "editing inactive" then\n UberLingo_EditInActive\n else\n UberLingo_EditActive\n end if\n \nend\n}}}\n5. That's it. Now when you press the "refresh" button, the correct script will refresh.
''Something to bear in mind when using Jump statements with FOR loop statements''\n\nUberLingo "unrolls" the FOR loops you use, which means that a few lines of code can become many lines of code. Imagine that you wanted to use the zone checking to jump over some code. You'll need to bear in mind that this code:\n\n{{{\nM1 JumpForward 4\nFOR 1 5\nCopyMedia X 0\nNEXT\nCopyMedia 10 0\n}}}\n\nis transformed into\n\n{{{\nM1 JumpForward 4\nCopyMedia 1 0\nCopyMedia 2 0\nCopyMedia 3 0\nCopyMedia 4 0\nCopyMedia 5 0\nCopyMedia 10 0\n}}}\n\nWhich would jump (when zone 1 is activated) to the statement "CopyMedia 4 0", and not to the statement "CopyMedia 10 0", as you might have thought.\n\n
<div class='toolbar' macro='toolbar -closeTiddler closeOthers +editTiddler permalink references jump'></div>\n<div class='title' macro='view title'></div>\n<div class='viewer' macro='view text wikified'></div>\n<div class='tagClear'></div>
TODO Utilising techniques from [[cellular automata]] and
\nToday we'll continue to learn about ~JavaScript.\n\nWe'll cover:\n\n#More examples of ~JavaScript\n#Alternatives\n#Dynamically altering XHTML with ~JavaScript\n#Functions and reuse\n#Naming conventions\n#Testing/Debugging\n\nThroughout today's lecture I'll use an 'expanding text' technique. \n\n\n{{topic{More examples of ~JavaScript}}}\n\nhttp://www.coolfusion.com.au/menu.html\n\nNo doubt you've seen this effect before. Adobe's ~ImageReady is able to export ~JavaScript code that enables 'rollover effects' using either tables (boo!) or CSS (yay!). Look at the source for this page, and you'll see both ~JavaScript and CSS code produced by ~ImageReady. Note though, that there are ~CSS-only alternatives to using ~JavaScript for this purpose.\n\nWhy would we investigate these alternatives?\n\n\n{{Q{?}}}\n\n\n{{topic{Alternatives}}}\n\nAs we discussed last time, it's not always possible to count on the presence of ~JavaScript, so it's worth investigating how to achieve certain functionality with CSS alone. Here's a great site for such a requirement:\n\nhttp://www.cssplay.co.uk\n\n\n{{topic{Dynamically altering XHTML with ~JavaScript}}}\n\nHere's where things get interesting. The sky's the limit here, but let's look at a simple example of what we can do with this technique.\n\nA reminder- what is the DOM?\n\n\n{{Q{?}}}\n\n\n\n~JavaScript can dynamically add, alter or delete the content of an XHTML file; specifically the DOM. This could be the textual content, i.e actual text that the user sees, or indeed the references to CSS styles that are made by that text.\n\nOne simple trick we can use this for is 'expanding text'. {{justySmall{(and 'expanding menus', etc.)}}}\n\nThere are a number of ways one might do this, but a straightforward way is by the using DOM access methods to change the {{{className}}} property of a particular element.\n\nHere's an overview of what we want to achieve:\n\n#a link element, for example "show me more", that is initially visible.\n#a piece of text (the 'more') that is initially invisible.\n#when the link element is clicked:\n##the "show me more" text disappears\n##the 'more' text should is shown.\n\n\n{{Q{?}}}\n\nWhat CSS property(s) can we use to control whether an element appears on screen?\n\n\n{{Q{?}}}\n\nWhat implications for sight-impaired users do these properties have?\n\n\n#display:none;, display:block;, display:inline;, etc\n#left:-5000px;, etc.\n#visibility:hidden;\n\nhttp://www.alistapart.com/articles/fir/\n\n\n{{topic{Functions and reuse}}}\n\nLet's continue the 'expanding text' technique, and discuss the ~JavaScript required to make it work. What we wish to do here is hide the link that says "show me more", and show the text that this refers to.\n\nWe can do this by setting the style of the link to a style with a property that hides it, and similarly set the style of the referred text to a style that has a property that shows this text.\n\nIt helps us to be able to refer to elements within a page uniquely. Here's some XHTML that demonstrates this:\n\n{{{\n<!-- try using an href of '', or omitting the 'href' attribute altogether. -->\n<a href='#' id='106' class='more' onclick='et(106)';>\ntell me more\n</a>\n<span class='ux' id='107' >\n(approx. 200K compresses to approx. 25k) The content is first edited in Tiddlywiki, then an HTML export of the content is written to a file. My parser processes this file further, as well as integrating it into other HTML fragments.\n</span>\n}}}\n\nNotice that the link to expand the text has an ID of 106, and the span with the text has an ID of 107. {{justySmall{or stated generally, n and n+1)}}}\n\nHere's the ~JavaScript that works with the XHTML. It uses the {{{getElementById}}} function to retrieve the desired element, and then sets its {{{className}}} property accordingly.\n\n{{{\n// Expand text- one shot.\nfunction et(rID){\n if (document.getElementById){\n // Hide rID, and show rID+1\n var tID1 = document.getElementById(rID);\n tID1.className = "ux";\n var tID2 = document.getElementById(rID+1);\n tID2.className = "ex";\n } \n}\n}}}\n\nThe CSS is simple- all you really need to be aware of is that the style "ux" is my shorthand for "unexpanded", and has a {{{display:none}}}, whilst "ex" is short for "expanded", and has a {{{display:inline}}}.\n\nOho! We get to the 'reuse' part. Provided our ~IDs are set up correctly, the 'et' (expand text) function can be used over and over. By passing it the correct ID, we can use this function wherever we need to.\n\nThis technique relies on a property of numbers- that we can add 1 to them. However, numbers are very geeky- I've used them because:\n\n#I'm a geek.\n#The very geeky Java-based web builder I wrote can easily produce the correct numbers without me having to think about it.\n\nCan you think of another method that doesn't use numbers for ~IDs? {{justySmall{(remember one of the operators we covered last time.)}}}\n\n\n\n{{Q{?}}}\n\n\n{{topic{Naming conventions}}}\n\nOne possible answer lies in the use of naming conventions. A naming convention is simply an agreed set of standards for naming objects. {{justySmall{("things" to you non-programmers.)}}}\n\nLet's just say that we interested in naming ~IDs. Hey! We are! What a happy coincidence!\n\nUsing the expanding text example above, the "show me more" link needs an ID. We might decide to begin ~IDs for these links with a "et_", which tells us, the developers, that this is an expanding text link. It could also tell ~JavaScript this as well. So, in the example I showed above, the "show me more" link expands some text about how I build my [[cool fusion|http://www.coolfusion.com.au]] site, so I might name the ID {{{et_webBuild}}} or some such.\n\nWe could extend the naming convention further and agree that the ID for such a link will always end in a "_ex". Thus, the ID for the expanded text in our example would be {{{et_webBuild_ex}}}.\n\nSo, how could we alter the ~JavaScript code to work with this new convention? I'll give you a clue- instead of passing a number to the 'et' function, we would pass the ID of the link, i.e. "et_webBuild".\n\n\n{{Q{?}}}\n\n\n\nAnother clue? We'd use the 'concatenation' operator.\n\n\n\nStill stuck? Look at the original code, and notice how we're after two DOM elements- the element for the link, and the element for the expanded text. The 'et' function is given the ID of the link, and has to add one to the ID to obtain the ID of the expanded text. Well, this time, the function wouldn't be passed a number, but a string. {{justySmall{Be aware that it's possible to pass the string "1", i.e. {{{et("1")}}}. That's ''not'' the same as {{{et(1)}}}.}}}\n\nTo obtain the ID of the expanded text, we'd just do this:\n\n{{{\nvar tID2 = document.getElementById(rID + "_ex");\n}}}\n\nNote that the "+" operator in the first example was used to //add numbers//, and in this example it's used to //concatenate strings//. This approach would be better for situations where we're hand-naming our ~IDs.\n\n\n{{topic{Testing/Debugging}}}\n\nWriting code is hard at the best of times. At the worst of times it can be an absolute bloody nightmare. So, we attempt to improve our chances of success in the following ways:\n\n#Make the structure of syntax completely obvious.\n##Indenting\n##Syntax colouring\n##Code folds\n#Make no assumptions\n##Don't interpret ~JavaScript's 'silence' as success\n##Don't assume the value of variables is known\n##Don't assume anything!\n#Debugging\n##Use alert (or jAlert!) statements\n##Avoid 'one liners'\n##Use handy plug-ins, e.g. ~FireBug, ~WebDeveloper (both are for ~FireFox)\n##Develop modularly\n#Testing\n##Test modules individually before testing them as an ensemble\n##Provide testing 'modes'\n\nA final note- I've discussed the building of ~JavaScript functions from scratch, but of course that's not your only option. The expanding text example I showed you is very simple, and the effect is correspondingly simply too. Next week I'll talk a little bit more about using pre-written libraries in your pages. The kinds of effects you can achieve with the libraries from [[Scriptaculous|http://script.aculo.us/]] are more pleasing to the eye!\n\n\n{{topic{Tutorial}}}\n\nToday's tutorial will be brief, allowing you to concentrate on your assignments.\n\n#Implement the 'expandable text' feature we discussed today.\n#Expand it so that it may be collapsed again. How you do this is up to you, but here are two suggestions:\n##Provide a "tell me less" or similar link that:\n###Collapses the text\n###Hides the "tell me less" link\n###Shows the "tell me more" link again\n##Make the expandable text a link that:\n###Collapses the text\n###Shows the "tell me more" link again\n\nFor the next two weeks we'll be discussing the issues you've encountered in the development of your assignments. In the interests of being thorough, I'll be asking each and every one of you questions, so please- do come prepared. A response of "I don't have anything to discuss" will not be welcomed!\n\n\n\n
Usability Issues in Web Design\n\n{{topic{The 'problem'}}}\n\nSimply stated, we have some information we need to present to our users. Let's consider this for a minute.\n\nI like the idea of dimensionality here- 0D, 1D, 2D, 3D information.\n\n{{miniTopic{0D}}}\n\nImagine you ask the question "What's 21 plus 21?".\n\nThe answer you get is sort of zero dimensional- like a point: "42". There's no need to present the answer any other way- it can just be given in one burst/chunk/piece. \n\n{{miniTopic{1D}}}\n\nNow let's say the question is "What's the melody to 'Baa baa black sheep'?"\n\nNow the answer that's given is 1-dimensional; it's inherently linear. The answer must be presented in the right order. {{justySmall{We don't want to be accused of being Satanists, now do we?}}} And now it takes time to present the answer- it can't be given in one chunk.\n\n{{miniTopic{2D}}}\n\nNow things get interesting. "Show me a map of Sydney" is the request. An image is a 2D array of pixels; it's 2D, but in a sense when we present an image, it's like a 0D thing, in that the image can be thought of as a single chunk. However, it depends on the content of the image. If it is indeed a map, this is a different story- there's a 2D array of not only pixels, but information that needs to be presented.\n\nHow the user parses this information is completely user-centric. Some people are good at reading maps, some are bewildered by them.\n\nIf we think of a 2D array of information as a set of 1D information, the issue arises of in what order this information is read- top down and left to right, top-down and right to left, bottom-up and left to right, and bottom-up and right to left. There are of course a large number of more arbitrary orders.\n\nA web page (at least the way it's rendered on the screen) is 2-D, but the content of many pages is inherently 1-D: conversational, linear.\n\n{{miniTopic{3D}}}\n\nIf a web page can be thought of as 2-D, then surely a web''site'' is 3-D?\n\nNow we have an issue of order of presentation- what order to you present the pages in? Does there even have to be a prescribed order?\n\n\n{{miniTopic{Some things to ponder}}}\n\n*How do we give the user the best chance to absorb the information we wish to present?\n*When do we want to lead the user by the hand and present the information linearly?\n*When do we want to give the user the option to absorb the information in an arbitrary order.\n*How does the reality of screen size and information 'size' affect the need to scroll? \n\n\nIn a moment I'll go through a number of your mini-sites and we can discussed the issues that arise therein; let me just outline the issues I found, to give you some clues as to what you might look for. Please keep your mind open for other issues that you can identify.\n\n\n*Screen Sizes/Layout\n*Readability\n*Interactivity cues\n*Forcing Content\n*Cues to the user\n*Screen Real Estate\n*Metaphors\n*Domain cues/context\n*Splash Screens\n*Section cues\n*Emergent effects\n\n\n\n{{topic{Tutorial}}}\n\nAgain, there is no spoon. BUT- this is last chance 1/2 to pick your tutors' brains. Eww.\n
"And now... the end is near..."\n\nToday we'll continue reviewing your mini-sites, with a view to discussing the usability issues that arise.\n\nHere's one that you may not have considered:\n\n\nDo you know what "Daltonism" is?\n\n\n{{Q{?}}}\n\n\n\n\n\n\n\n\n\n\nDaltonism is colour-blindness, and there are many levels to this. Quite a high proportion of males have this condition, and of course, it affects our colour choices when designing. I'll show you a cool little sim that can shows you what visual perception is like for someone with Daltonism.\n\n\n
\n* CSS\n** Recap\n** The three forms of CSS\n** Inline styles\n** Syntax\n** Web colours\n** Layout\n** The DIV and SPAN tags\n** Classes versus Ids (and names)\n** Example of cascading\n** The 'Holy Grail' of page layout\n** Other CSS examples\n\nToday we'll continue our journey into the future (well the present, er, actually the recent past) and discuss the joys of CSS.\n\n\n{{justyWOW{WOW!}}}\n\nYou may have noticed that the style of this site has changed. This should come as no surprise in a lecture about Cascading Style Sheets. This is a Tiddlywiki site, but the style sheets I've defined are just normal CSS. This took a small amount of time, because all I had to do was redefine the styles I'd already put in place.\n\n\n{{topic{A brief recap}}}\n\nRemember, CSS stands for "cascading style sheets", and are an elegant, high-level means of styling web pages. A designer who uses CSS can employ a single external text file, or files (external to the HTML file that references it) to define how the styles are rendered.\n\nImportantly, the use of CSS allows us to separate structure from presentation, or if you like, code from content. (These two sets of ideas are not identical- it's worth thinking about this more deeply)\n\n\n{{topic{The three forms of CSS}}}\n\nThese three forms determine where styles are defined.\n\n1. Embedded: The styles are defined within the XHTML document itself (in the HEAD section).\n2. External: The styles are defined within their own document (ends in ".css", and no HEAD section is required.)\n3. Inline: Hissssss.... The dirty hackers' path. The styles are defined to apply to a single tag.\n\nInline styles are a method of defining a style within an individual tag. Contrast this to the normal use of CSS, which is to define a style by name, and then later refer to it by name. An inline style says "//this// tag is to have these style attributes. They are a 'dirty-hack', that is something you should avoid doing unless absolutely necessary. Even if you intend to style something uniquely, this only applies for the here and now- there's no way of knowing if you'll want to use the style again. It's really worth avoiding inlines altogether, for this reason. They can however be useful for quick experiments. For example, Tiddlywiki is useful for this purpose.\n\nHere's an example of an inline style. This tag:\n\n<p style="background: black; color: white; border: dotted;">A new background and font color and border with inline CSS</p>\n\nproduces:\n\n<html>\n<p style="background: black; color: white; border: dotted;">A new background and font color and boder with inline CSS</p>\n</html>\n\nCSS styles are defined in the following way:\n\n{{{\n.styleName {\n \nattribute : value ;\nattribute : value ;\netc.\n\n}\n}}}\n\nNote the dot in front of "styleName". Use this for styles that you name.\n\nA real power of CSS lies in being able to redefine 'standard' HTML tags, such as H1, body, p, etc. In this case, a period isn't used.\n\n{{{\nbody {\nattribute : value;\nattribute : value;\n}\n}}}\n\nI would suggest that you start with these tags, as you'll see results immediately. For example, redefining the body tag will get results in ''any'' page (unless //every// tag has another style applied to it).\n\n\n{{topic{Syntax}}}\n\nWe aren't going to hold your hand in this UOS when it comes to syntax; but I //will// give you some tips on avoiding hard to track down errors: keep an eye on your semicolons:\n\n{{{\n\nbody {\n color: #FF5050\n font-weight: bold;\n font-style: italic;\n}\n\n}}}\n\nA missing semicolon would mean that the rest of the style definition would be skipped. In fact, the example above might be interpreted as:\n\n{{{\nbody {\n color: #FF5050font-weight: bold;\n font-style: italic;\n}}}\n\nThese errors can be hard to spot!\n\n\nSo... what are attributes and values? An attribute is some facet of the style you're define, for example the colour of text, or the size of the text, the colour of the background, and so forth. The values are for example, the colour itself. There's simply no getting around learning what possibilities exist for these. That is, learning what attributes you can use, and what values are valid for those attributes.\n\n{{justySmall{Oh, and I should mention that you must use American spelling- eg "color"}}}\n\nThere's a good list [[here|http://www.tizag.com/cssT/reference.php]].\n\nDon't be disturbed by some of the bad spelling on this page, e.g:\n\n//"Font family's can be divided into two groups: serif and san serif."//\n\nOf course, they mean "families".\n\nLet's discuss one of the kinds of values you'll need to learn.\n\n\n{{topic{Web colours: Some geekery you //must// learn}}}\n\nFor times when a designer specifies colours for a style, they can make use of simple in-built colours, for example, 'black', 'white', 'blue', etc. However, if we were to try and specify //all// possible colours, we'd need 16.7 million names, and obviously this is impractical.\n\nMeet Hexadecimal.\n\nOnce upon a time a sadistic mathematician thought "Hey- our decimal counting system only has 10 digits- 0 to 9. What if I kept going, and used the letters A through to F? then I'd have 16 digits, and could express higher numbers with fewer digits." (He knew the correct use of "fewer" and "less"; what an awesome Human being.) \n\nThis number system is known as "Hexadecimal". With hex, the numbers that we use in computing (i.e. multiple bytes) are more easily expressed. Recall that a byte can be (in decimal) 0 to 255, or 256 possible values. In hex, this range is from 00 to FF. Note that when we 'speak' hex, we say "two three", and not "twenty three". Similarly we would say "eff eff" for "FF".\n\nHex is useful for specifying RGB colour values. If you know your Photoshop (and Bob help you if you don't) then you'll recall that a 24-bit colour can be specified with 3 bytes. Hence, when specifying web colours, you'll see colours like this:\n\n#402010\n#~FF00FF\n#~F050E0\n#124A5C\n\nFor example, the first example is four-oh red, two-oh green, and one-oh blue.\n\nFor designers who can't think this way, there are web pages that will help you, or else Photoshop will do the job, in its colour selector.\n\n\n{{topic{Layout}}}\n\nOne of the exciting aspects of CSS is its ability to lay out pages. In the bad old days, bad old web designers used tables for this purpose. You know better now, of course.\n\nIt's time you learned about positioning attributes. There are four kinds:\n\n* Static positioning: It's how pages are already laid out by a web browser.\n* Absolute positioning: Lets you position the top left corner of the object exactly, with respect to its parent.\n* Fixed positioning: Same as absolute positioning, but with respect to the window's top left. It will not move.\n* Relative positioning: Places an element with respect to where it would statically be positioned.\n\nplus:\n\nZ-index decides overlap order.\n\n\n{{topic{The DIV and SPAN tags}}}\n\nDIVs are logical divisions within a page. They may be used to style entire sections of HTML.\n\nTo return to the idea of deprecated tags, you should be aware that the <center> tag is now deprecated, so a DIV alternative would be:\n\n{{{\n<div style="text-align: center;">Centered element</div>\n}}}\n\n<HTML>\n<div style="text-align: center;">Centered element</div>\n</HTML>\n\n\nSPANs are similar to DIVs however they don't break paragraphs.\n\n\n{{topic{Classes versus Ids (and names)}}}\n\nAn ID is meant to be unique- a class is not. If the ID attribute of for example the DIV tag is used with the same value more than once on the same page, your page will not validate. You should use ID's for //unique// elements on a page- for example a header or footer. You should use the class attribute for elements that appear more than once. I don't mind admitting that I got this wrong when I first started! I can reveal to you that the CSS styles on my own website have been defined like this:\n\n{{{\n#topicBold { color:#101010; font-weight: bold; }\n}}}\n\nWhy? Quite simply because I'd integrated the CSS that was produced by ImageReady, the program I used to create my menus. I'd noticed that the styles were defined with a hash at the beginning. I ''should'' have researched further, and defined my style like this:\n\n{{{\n.topicBold { color:#101010; font-weight: bold; }\n}}}\n\nNote also that when redefining existing styles, for example the body tag:\n\nI'll be fixing this ASAP!\n\n\n{{topic{Example of cascading}}}\n\nHere's a simple example of cascading in action. Have a look at [[this file|deco2102/simple.html]] file, and of course, look at the source.\n\nThere's a style defined globally, which is overriden with another style, and finally an inline style (boo!) is used.\n\n\n{{topic{The Holy Grail of Page Layout}}}\n\nWe could all (including me) benefit from this very well-presented article:\n\nhttp://www.alistapart.com/articles/holygrail\n\n\n{{topic{Other CSS examples}}}\n\nThe CSS Zen garden.\n\n\n{{topic{CSS references}}}\n\nhttp://www.tizag.com/\n\nWestCiv complete CSS guide\nhttp://www.westciv.com/style_master/academy/css_tutorial/\n\nCSS CribSheet\nhttp://www.mezzoblue.com/css/cribsheet/\n\nwww.w3.org/TR/css3-roadmap \nwww.ddj.com/webreview/style\ntech.irt.org/articles/css.htm \nhttp://www.ilovejackdaniels.com/css_cheat_sheet.pdf\nhttp://www.ilovejackdaniels.com/html-cheat-sheet.pdf\nhttps://addons.mozilla.org/en-US/firefox/addon/60\n\n\n{{topic{Today's Tutorial}}}\n\nI've provided you with [[some text that I've written.|deco2102/conco.txt]] This is completely unformatted text. Your task is to:\n\n1. Create a valid XHTML document.\n2. Paste the text into that document.\n3. Create a collection of CSSstyles (either embedded or external).\n4. Apply those styles to the text.\n5. Include the [[graphic that Rob's created.|deco2102/conco.psd]]\nCreate at least these styles:\n\n- Major document heading.\n- Section heading.\n- Body text.\n- important words within the body text.\n\nRemember to use DIV and SPAN tags to apply your styles. Your tutor will be checking you've done this by the end of the tutorial.\n\n\n
This week we'll cover an introduction to the concept of information architecture.\n\n{{topic{Today's topics:}}}\n\n\n*Data, Information, Knowledge\n*Presentation and Content\n*Chunking and the 7+/-2 rule\n*One frame at a time\n*Designing for one frame\n*Human visual perception\n*Example of perceptually-cued design decisions\n*Domains of information design\n\nTutorial: Simplification, and letting things breathe\n\n\n\n\n{{topic{Data, Information, Knowledge}}}\n\nMake sure you understand this hierarchy correctly:\n\nData is unstructured, or at least less structured than information. Think bits and bytes.\n\nInformation is structured data; data that has been formatted to an expected structure. Think files- .txt, .jpg, etc. More importantly, think about information as data that a Human User absorbs and hopefully converts to knowledge.\n\nKnowledge is more structured again, and is more of a Human concept than a computer concept. {{justySmall{Of course, computer scientists are working on it!}}}\n\n\n{{topic{Presentation and Content}}}\n\nRecall last week we finished talking about CSS, and how one of the ideas there was the separation of presentation from content. It's in this vein that we introduce information architecture.\n\nThe way in which information on a webpage / website is presented is all too often not given the consideration it requires. At times, designers can become too focused on aesthetics and may ignore the need to structure information appropriately.\n\nOne of the goals of structuring information is to increase its effectiveness.\n\nThe separation of information from aesthetics is not straightforward- consider the symbol-supporting capacity of graphical imagery. These graphics:\n\n[img[three lines|img/deco2102_2007/broken_bits.png]]\n\n\n\n\nWhen correctly structured, produce this:\n\n\n\n\n[img[three lines|img/deco2102_2007/unbroken.png]]\n\nWhich most of us will recognise as the letter "A". Without the graphics, there would be no symbol. However, even though the //symbol// A is immutable, the graphics required to produce it can of course vary:\n\n\n[img[three lines|img/deco2102_2007/four_a.png]]\n\n\nAnd so we establish that aesthetics may be altered without //necessarily// altering the informational content of a design. But does that mean a web designer needn't pay any attention to information design?\n\nOf course not.. all I'm trying to is show you that there's a fuzzy grey area between information and aesthetics. With no aesthetics (ie graphics), there can be no information, and aesthetics without information lies within the realm of art; not web design.\n\n{{justySmall{Can you think of an example of visual information that can be achieved with no graphics?}}}\n\n\n\n{{topic{Chunking and the seven plus or minus 2 rule}}}\n\nLet's take an abstract view of information design. The task at hand is to present some number of objects to a User. Narrowing our scope, let's limit this discussion to visual objects. If too little information is presented, we've underutilised the User's cognitive faculties, and if too much information is presented, we've overtaxed the User's perceptual acuity.\n\n{{justySmall{A good place to start is re-writing your text. Good web text is //not// the same as good print text.}}}\n\nHence, balance is the key here. A hard and fast guide here is the 7 +/- 2 rule, which is a rule of thumb that states that the number of concepts/objects/thoughts that the average Human being can handle is between 5 and 9, inclusive. This rule can serve as a guide for how much information to present at any one time. Next week we'll talk more about rearranging your designs so that the rule is satisfied. Let's explore what I mean by "at any one time".\n\n\n\n{{topic{One frame at a time}}}\n\nIn web design, we think in terms of screen-fuls of information. So this gives rise to the following situations:\n\n* Information is presented over a series of screens {{justySmall{e.g: a slideshow}}}\n* Information is presented on a single, unscrollable^^*^^ screen {{justySmall{e.g: a slideshow}}}\n* Information is presented on a single large, scrollable screen {{justySmall{e.g: a links page}}}\n* Information is presented on a small, or a large screen. {{justySmall{e.g: PDA versions of sites}}}\n\n{{justySmall{* that is, there's no //need// to scroll}}}\n\nThese are consideration as web designers. Let's concentrate on the second one.\n\n\n\n{{topic{Designing for one Frame}}}\n\nUntil we can master information design for a single frame, there's little point in tackling any other more complex design tasks.\n\nBefore going any further, here's a concept from illustration that is useful, and often neglected. \n\n//Figure and Ground//\n\n[img[three lines|img/deco2102_2007/figure.png]]\n\n[img[three lines|img/deco2102_2007/ground.png]]\n\nStudy the two pictures above. Try and see the second picture not as a white "A" on a black background, but rather concentrate on the black parts of the image- do you now see a black, chunky "i" sitting in a square black frame? Try to exercise this perceptual muscle whenever you can. What you're doing is becoming aware of "figure and ground".\n\nThe other thing to be aware of here is whitespace. (Which can be any colour). Don't forget to consider the whitespace of your designs. A very silly example of a lack of whitespace can be laughed at [[here|http://www.milliondollarhomepage.com]].\n\nLet your designs breathe! Give the elements within the page space to actually be separate elements. Think about how a web page can be resized within the user's browser. Should more information, or more whitespace appear?\n\n\n\n{{topic{Human visual perception}}}\n\nEvery Human on this planet is unique, and therefore different. {{justySmall{(Don't concentrate on those differences; that's lame)}}} Despite this, we all share a number of common visual perceptual traits. Being aware of these is important for good information design. These include:\n\n* The number of items within a frame.\n* How items are thought to be related, or unrelated, based on their grouping on screen.\n* How items are coloured, and what inherent meaning is attributed to these colours. {{justyImportant{This is important!}}}\n* How colours can be combined within a frame for harmony / chaos.\n* The use of symbols, icons and images as items.\n* Consistency / inconsistency within a frame.\n* Horizontal / vertical layout\n* Perceptual "effects", for example Moire patterns, strobing, etc.\n* Eye tracking- how the User moves their eyes across your page. There's a good article [[here|http://www.useit.com/alertbox/reading_pattern.html]] on this.\n\n\n\n\n{{topic{Example of perceptually-cued design decisions}}}\n\nLet's take the example of numerals. You know, numbers. Take the number 16,777,215. Do you like it? Does it go with your shoes? Think of it as my gift to you. Now here's another number: 16,777,216. Let's express this in as many ways as possible:\n\nSixteen million, seven hundred and seventy seven thousand, two hundred and sixteen. {{justySmall{useful for cheques, but unweildy for web pages}}}\n16777216 {{justySmall{no commas make reading this one difficult}}}\nRoughly seventeen million {{justySmall{if accuracy isn't crucial this could work}}}\n16.7 million {{justySmall{ditto}}}\nA really big number!! {{justySmall{close to useless}}}\n\n\nHave a look at [[this article for more|http://www.useit.com/alertbox/writing-numbers.html]]\n\n\n\n{{topic{Domains of information design}}}\n\nDesigning a stock market analysis page is a very different undertaking to designing a children's clothes catalogue site. (Or indeed an adult underwear catalogue site). The domain from which the information is derived is a consideration of much importance for information designers.\n\nHere are some domains that I can think of:\n\n''General types''\n* abstract\n* conceptual\n* numeric\n* social\n\n''Sensory''\n* tactile\n* visual\n* auditory\n\n''Site types''\n* stock prices\n* on-line prints\n* used cars\n* course notes\n* astronomy site\n* news site\n* links site\n* tutorial site\n* music site\n\n\nHow can each of these be mapped to the purely visual?\nWhat special consideration needs to be given to a particular type?\n\n\n\n\n{{topic{References}}}\n\nhttp://www.useit.com/\nhttp://www.alistapart.com/\nhttp://www.boxesandarrows.com/\n\n''Tutorial: Simplification, and letting things breathe''\n\nStart with the "ConCo" redesign you did last week. Your task is to present the information in that page within a single screen. The screen must be 800*600. Yes, in normal circumstances we don't dictate the size of the User's browsing experience; in this case I'm deliberately imposing such a restriction in order to persuade you to think about how we can simplify a design.\n\nYour tasks:\n\n* Rewrite any redundant text- simplify the text without reducing the information content of the text\n* Swap information for whitespace. What information? Redundant information, of course.\n* Arrange the items effectively- assume the User will start reading from the top of the page.\n\n{{justySmall{Didn't save your file from last week? I barely know where to begin.. obviously that was.. unwise}}}\n
This week we'll continue talking about information architecture, from a more practical perspective.\n\nI'm going to present a general strategy for designing your site, that incorporates the following concepts:\n\n* Site design, and the navigation required to present it effectively.\n* Information design, in the sense we discussed last week.\n* Semantic design; an extension of what we discussed last week.\n* The use of CSS and class/id selectors to achieve layout, styling and information design.\n* Structuring your site and its pages so that it is easily navigated.\n\nI'll also give a real-world of example of the frustration of bad information design. {{justySmall{(and some solutions to the problems encountered.)}}}\n\n\n{{topic{Element Theory}}}\n\nSome people read the dictionary as a means of improving their vocabulary. This is a fairly daunting task, even for a small dictionary. Fortunately, learning all of the element tags in XHTML is no more than an evening's work. Go to your tag reference of choice (I went to w3schools) and start the absorption. Don't pay any attention to deprecated tags, other than ensuring you know which ones ''are'' deprecated. (Ensuring you //never// use them.)\n\nAs you learn the tags, start to think about which tags you'll use most often. I'd posit that you would use the <div> tag far more often than the <col> tag, for example.\n\nExercise your tag muscle and create a sandbox .html file in which you can play with these tags. Doing this will be of enormous value to you, trust me on this.\n\nSatisfy yourself that you understand how each of the XHTML tags work. Now it's time to talk about semantics.\n\n\n{{topic{Elements as semantics}}}\n\nIf we haven't got this idea across to you by now, here it is one more time: Good HTML design involves the separation of what?\n\n\n{{Q{?}}}\n\n\n''Semantics from presentation.\n\n\nCode from content. \n\n\nIntent from Implementation.''\n\nWith this in mind, a good place to start is with semantics. We're most interested in //conceptual semantics//, which is a study of the cognitive structure of meaning. The meaning of a web page relates to its intent. If a designer intends that a piece of text should be a quotation of somebody's speech, there are two major options:\n\n# Style the quotation so that it looks like a quotation- that is, what most people would recognise as such.\n# Use the <blockquote> tag to enclose the quotation, and create a CSS rule that selects the <blockquote> tag, and style it as in option 1.\n# Define a class- "blockQuote", or "~BlockQuote" or "blockquote" that can be used with any tag.\n\n\nWhich of these three options do you think is //undesirable?//\n\n\n{{Q{?}}}\n\n\nOf course, we'd much prefer to go with option 2 (or 3).\n\n\nThe idea with semantics is that you design to your intent. If you're listing a collection of items, you don't simply make it //look// like a list, you state your intent- "This is to be considered a list". The user's browser (and your CSS) will take of how that list is rendered to the canvas, thank you very much. For example, mobile phone browsers may offer the user the chance to select each of those list items with the simplified interface that phone affords.\n\nSimilarly, the use of the <div> tag states the designer's intent to divide sections of a web page. {{justySmall{Remember that the iPhone uses this tag as a semantic cue to this fact.}}}\n\nSo, good web design starts with semantics, and not with style. Ask yourself: "What is my intent"? You've already asked this question in relation to your intent for the site/page in general, but now I want you to think about this question again from a more specific level- not "What is the purpose of this page/site" as a whole, but rather "What is the purpose of the elements of my page/site?" Possible answers might include: \n\n* "To present an ordered collection of items."\n* "To divide my page into sections."\n* "To indicate that this text is an acronym."\n* "To indicate that this text is a quotation."\n* "To indicate that this text is important."\n* "To ask a question of the reader."\n* "To show that this text is computer code."\n\nUntil you've answered all of these questions (Not //these// ones, necessarily, of course!) there's little point in creating any styles. Once you //have// answered this question, you can get..\n\n\n{{stylin{stylin'.}}}\n\n\n\n\n\n{{topic{Extending semantics with CSS}}}\n\n{{pullQuote{"Exercise your tag muscle"}}} XHTML provides a number of tags for the purposes of semantic markup, but it's not called "Extensible HTML" for nothing. If there's an intent that isn't represented by the tags of XHTML, you can extend it by defining some semantic intent of your own.\n\nLet's say you want to emulate one aspect of print publishing, the "pull quote". A pull quote is a quotation from the text which is repeated in a much larger typeface within the body text. Its purpose is to draw the reader's attention and engage their interest. You might agree to use the word "pullQuote" to signify your intent to style a piece of text as such. \n{{pullQuote2{"Another designer might choose (and probably will) a completely different set of textual stylings to get this intent conveyed."}}}\nThe idea of a pull quote, the //intent// is not to be confused with the //style// that any given designer might used to portray this intent. Another designer might choose (and probably will) a completely different set of textual stylings to get this intent conveyed. A redesign of style in this case will be much less of a headache than having to change in-line styles.\n\n\n\n{{topic{Styling semantics with CSS}}}\n\nOnce we've established what possible semantic intents will be required for a site, it's time to think about how those intents will be realised- that is, how they will be styled to convey these intents.\n\nIntents can be split into two categories- layout and typography. Structural tags, for instance <div> map quite cleanly to layout, whereas classes that you define to convey semantic intent, for instance <p class="topicHeader"> map to typography. However, this is a general guide- the line between layout and typography (as //concepts//) can be quite fuzzy. In XHTML though, the distinction is syntactic.\n\n[[This document|http://www.w3.org/TR/REC-CSS1]] from the W3 consortium is an excellent next step- it gets quite geeky towards the end, but really is worth a slow read over a cup of tea and a chocolate biscuit. {{justySmall{(That's how I read it)}}}\n\nPop-quiz: What's the difference between an inline style and a display of inline?\n\n\n{{Q{?}}}\n\n\nCSS has a power beyond the simply one-to-one application of styles. For example, one isn't limited to assigning one class to an XHTML tag- you can use as many classes as you like. This saves on characters when it comes to defining CSS styles- we don't need to define as many styles as there are combinations of styles- we can use multiple classes to achieve those combinations.\n\nHere's some {{orange{orange}}} text.\nHere's some {{purple{purple}}} text.\nHere's some {{gutsy{gutsy}}} text.\nHere's some {{wimpy{wimpy}}} text.\n\nHere's some {{orange gutsy{orange gutsy}}} text.\nHere's some {{purple wimpy{purple wimpy}}} text.\n\nSo, if I'm not mistaken, a good idea at this point is to have a good hard think about what would be the minimum number of styles required to achieve the semantic as well as styling needs of a given web design endeavour. Fewer styles means less maintenance, and less redundancy.\n\nDo you have any thoughts?\n\n\n{{Q{?}}}\n\n\n{{topic{~Pseudo-Classes and ~Pseudo-Elements}}}\n\n(==Pinched from== Referencing [[w3c.org|http://www.w3.org/TR/REC-CSS1]])\n\n{{justyReferenceQuote{\n{{BIG{"}}}Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are "inserted" by the UA under certain conditions to be used for addressing in style sheets. They are referred to as "classes" and "elements" since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence.{{BIG{"}}}\n}}}\n\nDefining how links appear when visited, activated, etc. is the domain of the pseudo class.\n\n''Pseudo Elements'' are contextual- that is, they apply under certain conditions, related to the content they are referring. For example, the "first-line" and "first-letter" pseudo elements are used to apply styles to the first line, and the first letter, respectively of content enclosed by a given tag. Use a colon to specify them:\n\n{{{\nP:first-line {\n font-variant: small-caps;\n}\n}}}\n\n\n{{topic{Navigation as Information Design}}}\n\nHow your user navigates through your site will be a matter of their particular individuality, but it will also be a matter of how you as a web designer permit, encourage, discourage and deny them.\n\nI had a very frustrating time (in the real world) at a major furniture outlet, due to very poor information design. It's a story that I think is relevant to information design for web pages.\n\nHere's what I learned:\n\n*The best information design in the world is let down by inconsistency:\n**Of the 5 staff I asked for help, none of them could help me- they were either from another department, or were tradespeople. Why did I ask them in the first place? Because their uniform 'told' me I could. Solution? A customised uniform that indicates the 'state' of that person. Yes, they work there, but no, they are unable to help you right now.\n**A fancy multimedia touch-screen promised much, but delivered little. As I waited in line to use it, the gent in front of me finished his session by shaking his head and walking away. Clearly he didn't get what he needed. The product that I was after (which //was// a stocked item, and //was// in stock) did not appear in the touchscreen system.\n**At least one of the tags attached to a display item that said "see a staff member" was placed there erroneously. When I did seek a staff member, they said "No, that shouldn't be there." You said a mouthful, buddy.\n\n*Forcing your users to toil in order to establish informational connections within your site is lame:\n**There was no clear linkage between the stock items on display, and the 'bins' in which they were available for self service. I had to search laboriously to find them.\n**The numeric coding system used to identify products is a good idea, but stickers with this information were not always placed on products.\n\n*'Railroading' your users through a pre-determined path in your site is lame:\n**If you've been there before, you've seen everything, and don't need the "here's ''everything'' tour". Cookies are hard to implement in real life, though, it must be said. {{justySmall{Although RFID implants can't be //too// far away.}}}\n\n\nThe only redeeming piece of information design appeared at the checkout, where a sign declared that the trolleys and bags used in the store are coloured yellow, whereas the trolleys and bags available for purchase were coloured blue.\n\nDo you know where I'm talking about? Have you had any experiences like this yourself?\n\n\n{{Q{?}}}\n\n\nSo, think of your site as a store, even if it's not a site that hawks products. A store that your users must move through easily. Let's discuss now how this applies to web sites. {{justySmall{Yes, let us.}}}\n\nIn order for a site (and indeed a page) to be easy to use, it must be structured well, and that structure should be straightforward to navigate.\n\nWithout the former, it's difficult, if not impossible to achieve the latter.\n\nWhat do I mean by "structured well"? Is the default linear layout of a page a useful structuring? What types of structuring could there be?\n\n\n{{Q{?}}}\n\n\nWe started to talk last week about the 'seven +/- two' rule. Let's look now at how this might apply to the structuring of a web site.\n\n{{miniTopic{Site Structure}}}\nSuppose you're designing a site for a company that manufactures 'whoosits'. There are 1000's of whoosits in the product catalogue, and these fall into different categories; 12 categories, to be specific:\n\n#Office whoosits\n#Home whoosits\n#Beach whoosits\n#Travel whoosits\n#Emergency whoosits\n#Play whoosits\n#Adult whoosits\n#Alternative whoosits\n#Weird whoosits\n#Safety whoosits\n#Standard whoosits\n#Arty whoosits\n#Illegal whoosits\n\n{{justySmall{(#13 is of course not mentioned on the site.)}}}\n\nIn addition, the company needs:\n\n*To be contacted\n*To show testimonials for their whoosits\n*To show future whoosits\n*To show recalled whoosits\n*To demonstrate their whoosits online\n\nThat's 17 things! {{justySmall{("Illegal whoosits" will no longer be mentioned. We apologise for anything you saw that you should perhaps have not seen.)}}}\n\nFollowing our 7 +/- 2 rule, it's obvious that this is too much to present on a single page. When faced with too many instances within a single category, what are our options?\n\n\n{{Q{?}}}\n\n\nOne that springs to mind is to look for higher level categories. For instance, we could establish a continuum between 'fun' and 'work', and create divisions along it. We'll also need a category for the company-specific stuff. Let's design for those for whom 5 categories is the right number. We've used one category for the contact, testimonials, etc., so we need to define 4 meta-categories of whoosits, and assign each whoosit category to one of those.\n\nHow about this:\n\n#Work whoosits\n#Serious whoosits\n#Fun whoosits\n#Miscellaneous whoosits\n\nWhich whoosits categories would you assign to each of these?\n\n\n{{Q{?}}}\n\n\nHere's my answer:\n\n#Office whoosits - work\n#Home whoosits - fun\n#Beach whoosits - fun\n#Travel whoosits - fun\n#Emergency whoosits - serious\n#Play whoosits - fun\n#Adult whoosits - misc.\n#Alternative whoosits - misc.\n#Weird whoosits - misc.\n#Safety whoosits - serious\n#Standard whoosits - work\n#Arty whoosits - fun\n\nWe could argue for hours about which what go where {{justySmall{that's in 'adult' whoosits, btw.}}} but the point is that we're thinking about it. Human usability studies help us determine where users might expect to find them, but that's another story.\n\nSo now we have 5 top-level navigation items to play with, and a clue as to how we might want to structure our site:\n\n#Whoosicorp\n#Work whoosits\n#Serious whoosits\n#Fun whoosits\n#Misc. whoosits\n\nNow we have 5 categories, with no more than 5 sub-categories in any one of those. Our whoosit-buying guy or gal won't be bewildered by choice. They can 'drill down' to the whoosit they need. So, what do we do with these catagories?\n\n\n{{Q{?}}}\n\n\nSo, how does the user know where they are?\n\nLetting the user know where they are in a site can be an antidote to the crazymaking process. {{justySmall{That was another redeeming information design feature at the furniture retailer- there were lots of 'you are here' maps.}}} We don't have to be overtly blatant about this, nor do we want to be so subtle as to not be noticed. \nCan you think of any ways in which we could do this? \n\n\n{{Q{?}}}\n\n\n\n{{miniTopic{Breadcrumbs}}}\n\n[[Breadcrunbs|http://www.useit.com/alertbox/breadcrumbs.html]] are a means of letting the user know where they are in your site. For the amount of screen real estate they occupy, they provide good "bang for buck". A simple implementation of breadcrumbs involves text, but more subtle graphical means could be used. Can you think of a graphical, non-textual means of informing the user whereabouts they are in your site?\n\n\n{{Q{?}}}\n\n\n{{miniTopic{Menus as Lists}}}\n\nOne way to inform the user of their location is to use the navigation system as a semaphore to this fact. I've used images to do this on my site, but there are several CSS (and therefore lightweight) ways of [[doing this with CSS|http://www.cssplay.co.uk/menus/]]. An example of this can be found at http://www.apple.com. Can you work out whether images are used?\n\n\n\n{{topic{Tutorial}}}\n\nResearch and test a navigation system, for use in your second mini-site.\n\nThink about how you can keep your navigation system as modular (separable from the content) as possible. This is not completely possible, as the navigation must necessarily reference the content. However, just as we try to keep a wedge between semantics and style, the same applies here.\n\nOne suggestion I have is that you develop your navigation system independently of your content, whilst you're experimenting. Your next step will be actually incorporate it into your second mini-site.\n\nIn regards to the evolution of your mini-sites, one thing we'd like to see at each step is a complete redesign, rather than incremental additions. One tendency we have as designers is an unwillingness to change something once it's established. This tends to 'freeze' the design process, and I believe this is undesirable. It's tempting to give ourselves a pat on the back and think "This design is perfect; I'll just tweak it for now". It's tempting because it's easy. Please test yourselves a little and 'break apart' your design, re-evaluating your content and the way your site is structured.\n\nThis will be better for you in the long run!\n\n\n{{topic{References}}}\n\n''Tags:''\nhttp://www.w3.org/TR/xhtml1/\nhttp://www.w3schools.com/tags/default.asp\n\n''CSS:''\nhttp://www.w3.org/TR/REC-CSS1\nhttp://www.w3schools.com/css/default.asp\nhttp://www.cssplay.co.uk\nHere's the [[Style Sheet|StyleSheet]] that I've used for this site.\n\n''Breadcrumbs''\nhttp://www.useit.com/alertbox/breadcrumbs.html\n\n''Relocating Complexity:''\nhttp://www.boxesandarrows.com/view/simplicity-the\n{{justySmall{This doesn't relate directly to anything discussed today, but is recommended reading}}}\n\n''For the future:''\nhttp://www.w3schools.com/htmldom/default.asp\n{{justySmall{Start reading this now!}}}\n
\nToday we'll talk about rich media- what it is, how to embed it correctly, what consequences there are for your users, and finally discuss the Document Object Model, which is a bridge between HTML and Javascript.\n\n\n{{topic{What is rich media?}}}\n\nBeyond text, beyond images, lies the realm of rich media. We can consider rich media to fall into one of two major classes- audiovisual and interactive. Examples of audiovisual media include audio clips and movies. Examples of interactive media (which can in turn include rich media) include Director and Flash 'movies'. {{justySmall{The term "movie" is confusing here. The term "interactive movie" is an oxymoron. The term is a legacy from the original incarnation of Director, which used a theatrical/cinematic metaphor.}}}\n\n\n{{topic{Embedding rich media}}}\n\nLet's look at each of the two major types of rich media in turn.\n\n\n{{minitopic{Flash}}}\nThe challenge (as always) in getting Flash movies to play correctly in as many browsers as possible. Even if we use standards-compliant XHTML, issues still arise- particularly with Netscape, and shock of all shocks, Internet Explorer.\n\nOnce again, the good people at [[alistapart.com|http://www.alistapart.com]] have done the hard yards in [[researching this problem|http://www.alistapart.com/articles/flashsatay]]. (Also [[here.|http://www.alistapart.com/articles/flashembedcagematch/]] To summarise, the solution involves the creation of what I've known in the past as a 'jump movie'.\n\n\n{{minitopic{Movies}}}\n\nA "movie", as we'll define it for this class, is a non-interactive bundle of audiovisual media- you know, movies- Star Trek, ~YouTube clips, Ally ~McBeal; I've no idea what you kids are into these days. {{justySmall{nor do I care, for that matter- life's too short to sit in front of screens for too long.}}} Audio-only files are still considered movies- they are simple movies with no video component.\n\n''Terms, terms, terms''\n\nMovie, Clip, Video, Show.. there are a lot of terms that are not identical, but have a lot of overlap. For instance, "video" strictly means "visual", but is often used to refer to an audiovisual movie.\n\nHere's a review of terms with which you should already be familiar:\n\n* format: definition by examples: Quicktime, AVI, WMV, Real Player, .FLV\n* codec: short for "compression/decompression"- the algorithm used to encode and decode the video stream. Why are movies compressed for the Internet? If you need to ask that, you've obviously never done the math- a 1 minute 320*240 movie running at 25fps and 24bit colour would require 345,600,000 bytes- about 350 meg! {{justySmall{that's 1 minute * 60 sec * 25 frames * 320 pixels across * 240 pixels down * 3 bytes per pixel.}}}\n* fps: frames per second, duh.\n* streaming: if a movie (or any file) is streamed, then the playback computer doesn't need to wait until the movie is completely downloaded before playback can begin. YouTube movies are streaming movies.\n\n\n\n{{miniTopic{Major formats}}}\n\nHere are four major audiovisual formats:\n\n* Quicktime\n* Flash video\n* Real Player\n* Windows media\n\nYou've no doubt watched a shirtload of video in your time. What have you learned about these formats?\n\n\n{{Q{?}}}\n\n\n\n{{topic{Consequences of rich media}}}\n\nRich media is big- really big. You just won't believe how mind-numbingly big it really is. I mean, you might think it's a long way down the street to the chemist, but-\n\nRich media generally has a heavy footprint in terms of the number of bytes that are required to represent it. This is true of audiovisual media more so than it is of interactive media, if we discount the contribution of any audiovisual media within it.\n\nGood web design involves giving the user the best possible experience when using your site. A large part if this involves the impact caused by the size of the media involved.\n\n\nThe codecs used to compress audio and visual content have a vital role to play in keeping this impact a minimum. Some codecs are more suited for some kinds of content than others. For example, single colour graphics are very different in nature to full-colour (eg live action) video. A solid colour image can be very efficiently compressed with what is known as "run-length encoding". Live action is a different story; the compression solution is not straightforward, and depends on trade-offs between quality, file-size, decompression CPU bandwidth, etc.\n\nHas anyone discovered a soon-to-be released technology that supports adaptively-sized audiovisual files?\n\n\n{{Q{?}}}\n\n\n{{topic{Uses of rich media}}}\n\nBeing able to embed rich media is no justification for doing so. What reasons can you think of ''for'' embedding audiovisual content within a site?\n\n\n{{Q{?}}}\n\n\n\nThere's a good article [[here|http://www.useit.com/alertbox/video.html]] on reasons ''not'' to do so.\n\n\nWhat reasons can you think of to ''not'' use video on your site?\n\n\n{{Q{?}}}\n\n\n\n{{topic{The Document Object Model}}}\n\nThe DOM is a standard that defines how web pages are structured. Just as I can say that Fred lives at 35 Pacific drive, South Yarra, Melbourne, Australia, the DOM lets us reference parts of our XHTML pages.\n\nYou'd be aware by now that us computer scientists like to "think in trees". The Document Object Model (DOM) is no exception to this. The 'root' of this tree is the HTML tag itself. It shouldn't surprise you that the two branches from this root are the HEAD and BODY tags. Don't be confused here- in computer science we rip the tree from ground (there is no ground) and hang it upside down. Every valid XHTML document will have these tags. From there the situation is entirely content-dependent. The DOM allows us to refer to any and all parts of the document, by using the correct syntax. For example, the Javascript statement:\n\n{{{\ndocument.getElementsByName("FirstHeading");\n}}}\n\nis the way to refer to an //array// of all objects named "FirstHeading". An "Object" in this context is for example a DIV, SPAN, H1, etc. If you made one and only on div called "FirstHeading", then that div would be the first and only object in the array. Note that it's case-sensitive, so if you named it "firstheading", that would be a different story.\n\nWhat happens if you have a DIV with the name "FirstHeading", and also a SPAN with the name "FirstHeading"?\n\n\n{{Q{?}}}\n\n\nTo access any particular element in an array, use this syntax:\n\n{{{\ndocument.getElementsByName("FirstHeading")[0];\n}}}\n\nThis will return the first (which is the "zero'th") element).\n\nDoes anyone know how to find the length of an array in Javascript?\n\n\n{{Q{?}}}\n\n\nIf you wish to get at all the tags of a particular type, then use this syntax:\n\n{{{\ndocument.getElementsByTagName("div");\n}}}\n\n\n\n{{topic{Tutorial}}}\n\nYou need to achieve two technical milestones today: Embed either a Flash 'movie' or embed a audiovisual movie. The review criteria are that these must work in:\n\n* Internet Explorer 7 on a PC\n* Safari on a Mac\n* Firefox on either\n\nThe Flash file and audiovisual movie you use are up to you- but my advice is make them fairly small. Remember for the Flash file you'll need to create a 'jump movie', so you may as well use Flash to create a very simple main movie as well. If you've not used Flash before, I've provided a jump .swf file [[here|deco2102/jump.swf.zip]].\n\nPlease read through the entire "Flash Satay" article (and note that there are //other// solutions.) and follow the reasoning that leads up to the solution.\n\n{{justySmall{note that if you intend to create the jump movie yourself, you should be aware that there is a bug (at least from the perspective of the context in which I created it- Flash MX 2004) in the alistapart.com article. This:\n\n{{{\n_root.loadMovie(_root.path,0);\n}}}\n\nshould be replaced with this:\n\n{{{\n_root.loadMovie(_root.path,this);\n}}}\n\n}}}\n\n\n
\nNow that you've researched the Document Object Model, you're in a much better position to learn more about ~JavaScript.\n\nToday we'll cover:\n\n#Examples of ~JavaScript\n#Support for ~JavaScript\n#Integrating ~JavaScript\n#Language References\n#Variables: types and values\n#Accessing the DOM\n#Events\n#String concatenation\n#Introduction to code structures\n\n~JavaScript is an interpreted language- that is, it doesn't require pre-compilation. This means we can use the same text-based editing tools that we use for developing XHTML and CSS.\n\n~JavaScript is capable of dynamically (i.e as the user is browsing the page) adding, altering and removing elements within a page. This applies to XML as well as XHTML.\n\n\n{{topic{Examples of ~JavaScript}}}\n\n~JavaScript is pretty persuasive in professional websites these days. It can be used for rollover effects, (although it needn't be) as well as more sophisticated layout purposes.\n\nHere are a few sites that make use of ~JavaScript:\n\n*http://www.apple.com\n*http://script.aculo.us/\n\nOf course, there are many, many more, but these two are worth noting because the first makes use of the second. The ~JavaScript effects used by Apple are worth noting because they are put to good use- in clearly presenting the information within the site to the user. They aren't 'flashy', 'gimmicky' or 'lame'. {{justySmall{this is of course subjective.}}}\n\nScriptaculous is a site that I'd encourage you to check out, because they offer these effects free of charge, and well implemented.\n \n\n{{topic{Support for ~JavaScript}}}\n\nCast your mind back to an earlier lecture when we discussed how (unlike in the printed medium) the user has a great deal of choice in that way in which the content they view will be presented to them. Some users like to disable ~JavaScript in their browsers. The consequence of this fact web designers can't count on it being there to begin with. Can you think of what we might attempt to do to allow for this?\n\n\n{{Q{?}}}\n\n\n\n\nHere's a basic strategy:\n\n*Investigate alternatives to ~JavaScript for certain page functionality, eg rollovers. \n*For sites that ''must'' have ~JavaScript enabled to function, //gracefully// inform the user of this fact.\n*Encourage the user to enable ~JavaScript.\n\nA lot of more esoteric browsers (e.g those that run on mobile phones) have support for ~JavaScript. ~JavaScript is becoming more pervasive over time.\n\nAnother issue to be aware of is the varying support within ~JavaScript browsers for various events. Shock! Horror! Older versions of IE have retarded support for some events. {{justySmall{Before you jump up and down, the word "retarded" is perfectly appropriate here.}}}\n\n\n{{topic{Integrating ~JavaScript}}}\n\nRemember how we learned the methods of including CSS? We're faced with similar choices here. We can include ~JavaScript code in our XHTML documents in between a <script> tag and a </script> tag, or else we can define a separate file, put the ~JavaScript in there, and then include a //reference// to that code in our <script> tag.\n\n{{{<script src="javascripts/cfm.js" type="text/javascript"></script>}}}\n\nMy opinion is that for simple tests it can be expedient to include the ~JavaScript within the XHTML file, but for anything of serious scope, it's time to make a new file, babeola!\n\n~JavaScript files by convention end with a ".js".\n\nThey are plain text files, and thus may be edited as you would any other text file.\n\nThe integration of ~JavaScript within XHTML also takes place via ~JavaScript events, for example the 'onload' event. More on this later today.\n\nYou've already learned that it's possible to use multiple CSS files for a page. Is the same true for ~JavaScript?\n\n\n{{Q{?}}}\n\n\n{{topic{Language References}}}\n\nThere's no getting around the need to learn some syntax. Here are some places to start:\n\n*http://www.w3schools.com/jsref/default.asp (w3schools)\n*http://javascript-reference.info/ (lots of printables)\n*http://developer.mozilla.org/en/docs/JavaScript (Mozilla site)\n\nLearn about variable declarations, code structures (eg 'for' loops) and DOM access.\n\nIs it better to learn the syntax of a language, or a large number of 'stock phrases' in that language?\n\n\n{{Q{?}}}\n\n\n\n{{topic{Variables: types and values}}}\n\nEven if you're new to programming, I'd expect that you know what a variable is. The issue of 'typing' may be new to you, so I'll attempt to explain this now.\n\nIt's easy to understand a basic division of numbers and letters, yes? A number isn't a letter, and vice-versa. Numbers can be //converted// to letters, and vice-versa. Numbers can be further divided {{justySmall{(pardon the pun)}}} into whole numbers and fractional numbers. Similarly, we can think of individual letters, as well as strings of numbers. This is all there is to typing- if a language is strongly typed then it is quite 'fussy' about the definition of a variable of a certain type.\n\n~JavaScript is not very fussy about type, which to non-programmers might seem like a good thing, but programmers in the know will tell you that restrictions in this case are good- they minimise the chance of errors, in a similar way to how enforcing web standards might seem painful at first, but saves you a lot of hassle in the long run.\n\nThus, to declare a variable in ~JavaScript, we say:\n\n{{{var aVariable = "a value";}}}\n\nor\n\n{{{var aVariable = 100;}}}\n\nand so on. If we omit the "var" keyword, we're telling ~JavaScript: "There should already be a variable defined with this name- use its value.". This can be a common source of confusion, so be aware of it- that is, don't confuse the 'scope' of variables. {{justySmall{It can also be a common source of errors- ensure that your variables are properly defined.}}}\n\nThe most general type of variable is the type 'Object'. Object variables can refer to elements within the DOM.\n\nAnother type of variable to be aware of is the 'array'. Arrays are ordered collections of variables. For example, a common use of an array is to store an array of objects:\n\n{{{var divArray = document.getElementsByTagName("div");}}}\n\n\n{{topic{Accessing the DOM}}}\n\nAs you saw last week, we can use ~JavaScript to access parts of our pages via the DOM. Here's a list of ~JavaScript functions we can use to do this:\n\n*getElementsByTagName - returns an array of XHTML elements of a certain tag type, e.g "span".\n*getElementsByName - returns an array of XHTML elements of a certain name attribute, i.e those elements that have the same name attribute as the one we ask for e.g: <span name="aCertainName">\n*getElementByID - returns an object of an XHTML element of a certain name attribute, if such an element exists: <div id="aCertainUniqueName">\n\nIn the third example, what happens if no such elements exists?\n\n\n{{Q{?}}}\n\n\n{{topic{Functions}}}\n\nFunctions are a convenient way of keeping our code neat, modular, and re-usable. For you non-programmers out there, consider a function akin to an action- for example, if I ask you to "make me a cup of coffee", that is like a function. This function can be broken down into simpler functions, for example:\n\n#Boil the jug.\n#Get a cup.\n#Put one sugar in the cup.\n#Put some milk in the cup.\n#Prepare the plunger.\n#When the jug is boiled, pour boiling water into the plunger.\n#Wait 5 minutes.\n#Depress the plunger.\n#Pour the coffee into the cup.\n#Stir the cup.\n\nAnd so on- "Prepare the plunger" could break down into:\n\n#Clean the plunger.\n#Scoop the coffee into the plunger.\n\n{{justySmall{(We'd keep going in this way until we reached the lowest level (the syntax of the language itself.)}}}\n\nSo, a function is a piece of code that is referred to by name. A function is //passed// zero or more parameters, and //returns// zero or more parameters. The simplest function therefore takes no parameters and returns no parameters- it just does something. For example:\n\n{{{\nfunction stop(){\n// Stop something\n}\n}}}\n\nFunctions become more useful when they can be passed parameters. For example:\n\n{{{\nfunction setElementColour(rID, rColour){\n// Find all elements with a name of rID, \n// and set their CSS style colour to rColour\n}\n}}}\n\nYou'll notice that the two functions I've defined above don't yet do anything- almost! They actually:\n\n*Define a unique name for the function.\n*Define what parameters are passed to the function.\n*Provide an English statement as to what will happen in the function.\n\n\n{{topic{Introduction to Events}}}\n\nEvents trigger ~JavaScript functions. Examples of events are {{onload}}, {{onclick}}, etc. We'll talk more about these next time.\n\nIn the meantime, here's a special 'non-event event' that can be used to run ~JavaScript- when the ~JavaScript is first defined, outside a function. Consider this piece of XHTML: {{justySmall{you can tell it's XHTML because the <script> tag is used.}}}\n\n{{{\n<script type="text/javascript">\n\nalert ("This is being run");\n\nfunction doSomething(){\nalert ("Doing something..");\n}\n\n</script>\n}}}\n\nThe 'alert ("This is being run");' statement will run when the page is loaded, {{justySmall{(don't confuse this with the 'onload' event.)}}} but the 'alert ("Doing something..");' statement won't be run until the function 'doSomething' is called. (A function can be called (invoked, executed, run) by another function, or an event.) Lines of ~JavaScript that appear //outside// function declarations are executed as the ~JavaScript is embedded/included. This is a convenient place to test really small bits of ~JavaScript. Note too that if this occurs in <head> of the document, the DOM hasn't yet been built, so accessing it is meaningless at this time.\n\nAlert statements are a vital debugging tool, however they are a pain to remove. In these circumstances I usually define another function, eg {{{jAlert}}} (Justin Alert) which looks like this:\n{{{\nfunction jAlert(rAlert){\n// Comment/uncomment 'alert' line to \n// disable/enable all debugging alerts.\nalert(rAlert);\n}\n}}}\n\nAnd then I simply always use the {{{jAlert}}} function.\n\n{{topic{String concatenation}}}\n\nHere's a handy operator to learn- the string concatenate operator. You might also know it as the 'addition' operator, and indeed when we use it with numbers it does just that. However, when used with Strings it joins them together:\n\n{{{\nvar introString = "Hello and welcome to ";\nvar placeString = "";\nif (someVar > 5){\nplaceString = "Heaven";\n}\nelse {\nplaceString = "Hell";\n}\njAlert(introString + placeString);\n}}}\n\nA reminder about the {{{var}}} keyword: notice how in this example it does not appear before the {{{someVar}}} variable. ~JavaScript doesn't like undefined variables, and won't execute as \nexpected when it finds them. If you want to try the example above, set {{{someVar}}} to an integer value. The number you choose is up to you. ;)\n\nResearch ~JavaScript events for the next lecture.\n\n\n{{topic{Introduction to code structures}}}\n\nI'll leave you with something to think about before next week. Just as we need to learn our verbs in a spoken word context, so it is with ~JavaScript. By now you know doubt understand that the basic form of a program is:\n\n{{{\nstatement1;\nstatement2;\nstatement3;\nstatement4;\n... and so on\n}}}\n\nand it should come as no surprise that statement1 is executed ("performed" is a much nicer word.) followed by statement2 and so on. We can achieve a lot this way, but ultimately this is limiting. //Code Structures// allow us much greater control and flexibility, so I'll leave you with some to research in the tutorial and in the holidays:\n\n{{miniTopic{for loops}}}\nI have fond memories of learning this one a quarter of a century ago. {{justySmall{(Yikes!)}}}\n\nHere's a definition by example:\n{{{\nfor (var j = 0; j < 10; j++) {\nalert("j is: " + j);\n}\n}}}\n\nA variable {{{j}}} is defined as initially 0, and then a condition is checked: "is j less than 10?" If this condition is met, then all the statements inbetween the curly braces are executed. Then {{{j}}} is incremented. {{justySmall{(Which means "has one added to it.")}}}\n\nThe condition is checked again, and as long as it's true, the statements are executed. Note that we can do "j-dependent" things in those statements, such as forming a string on the basis of j.\n\n{{miniTopic{if statement}}}\nSo much power, and such a little statement.. without this guy, not much would happen in the way of non-pre-determinism.\n\n{{{\nif (condition){\nstatement1;\n}\nelse {\nstatement2;\n}\n}}}\n\n{{{condition}}} refers to something that eventually evaluates to either {{{true}}} or {{{false}}}. It could be as simple as a variable that has been defined as either {{{true}}} or {{{false}}}, or else a statement of comparison:\n\n{{{\nif (myVar > 5)\n}}}\n\nfor example.\n\nCan you think of a simple use of the {{{if}}} statement within a {{{for}}} loop?\n\n\n{{Q{?}}}\n\n\n\n{{topic{Tutorial}}}\n\nThere is no spoon. Today's the last day before the mid-semester break, so make use of your goodly tutors to help you with your sites. If you're a super-keen, mega-organised, extra-motivated student and you're ahead on your deliverables, then spend your time researching ~JavaScript code structures. Also, you might like to check out scriptaculous, and create some test pages to try the effects out.\n\nEnjoy the break!
What is the difference between a web site and a web log?\n\nA ''blog'' (web log) is a collection of articles that are added to over time.\n\nA ''web site'' is a collection of pages that have a sense of permanence, although of course they are also updated. The difference is that generally when a web site is updated, its content is replaced.\n\n{{justyImportant{A reminder: You will need both!\n\nYour web log = a documentation of the design and reasoning (and research) processes you underwent.\n\nYour web site = your 'student web site'. We'd expect that this unit of study would be a section within that site.}}}
<HTML>\n<applet archive = "PSim.jar" code="jcsim.PSim.class" width=1200 height=800>\n</applet>\n</HTML>
TODO
Tag tabs:\n\n<<tabs txtMainTab Timeline Timeline TabTimeline All 'All tiddlers' TabAll Tags 'All tags' TabTags More 'More lists' TabMore>>\n\n\n
[[Week 1: Intro and Brain Dump|deco2102 S2, 2007- Week 1: Introduction and brain dump]]\n[[Week 2: HTML the old fashioned way|deco2102 S2, 2007- Week 2: HTML the old fashioned way 1]]\n[[Week 3: HTML the old fashioned way 2|deco2102 S2 2007- Week 3: HTML the old fashioned way 2]]\n[[Week 4: HTML the new fashioned way|deco2102 S2 2007- Week 4: HTML the new fashioned way 1]]\n[[Week 5: HTML the new fashioned way 2]]\n[[Week 6: Information architecture]]\n[[Week 7: Information architecture 2]]\n[[Week 8: Rich media]]\n[[Week 9: Javascript]]\n[[Week 10: Javascript 2]]\n[[Week 11: Studio session 1]]\n[[Week 12: Studio session 2]]\n\n\n''Overview''\n\nThe goal for this UOS is for you to be skilled and confident in the use of HTML, XHTML, CSS, Javascript, blogging, information design, and the rapid prototyping and eventual professional completion of web sites.\n\nSome of you will gravitate more readily to the coding aspect; others will prefer the design aspect. This is a good thing, I'd just like you to keep this in mind: It's better to have a team made of coders who know a bit about design plus designers who know a bit about coding than a team made of exclusively coders and designers. Communication is important- specifically the conveying of briefs from the Client to the company, and then within the company to each of the roles. And of course, there's the hybrid person- someone who does enough of each to finish a job themselves. You have your entire professional career ahead of you to discover this!\n\nContent-wise, we'll start at a basic level and proceed slowly (but inexorably) towards topics of a greater complexity. We expect you to be able to 'plug modules together' rather than write code from scratch, when it comes to producing your mini sites and blogs.\n \n\nThe topics for this unit of study are listed below. To summarise, I'm going to teach you some basic HTML, intentionally restricting it to the way //it used to be done// in order to show you why it's done the way it is //now//. Then it's on to XHTML and CSS, in which you learn to create pages that can have their style altered without having to alter each page. Then we jump up a level and discuss the idea of information architecture, in which you'll learn how to structure pages and structure sites made of multiple pages. We'll then move on to rich media, and its appropriate use. Then it's a wee bit of Javascript, leaving us two weeks in which we can discuss how your projects are going and come to terms with any issues you've encountered. (We'll do this a little in each class from week 4 onwards, as well.)\n\n{{justyImportant{deco1200 students, ignore the text below:}}}\n\n''Student Pages''\n\nHere's a list of links to your student pages. Make sure you check them all out!\n\n[[CEGUERRA, ROMMEL VALLARTA|http://people.arch.usyd.edu.au/~rceg6533]]\n[[CUI, WEI VIVIEN|http://people.arch.usyd.edu.au/~wcui8743]]\n[[KHOURY, RAYMES JAMES|http://people.arch.usyd.edu.au/~rkho9564]]\n[[KIM, YOUNG HUN JOHN|http://people.arch.usyd.edu.au/~ykim0319]]\n[[KWAN, DAMIEN|http://people.arch.usyd.edu.au/~dkwa3735]]\n[[LU, PETER|http://people.arch.usyd.edu.au/~pelu9930]]\n[[NGUYEN, MICHAEL HOANGVIET|http://people.arch.usyd.edu.au/~mngu4544]]\n[[NOH, BUM HO|http://people.arch.usyd.edu.au/~bnoh9961]]\n[[QUINN, CHELSEA|http://people.arch.usyd.edu.au/~cqui7301]]\n[[SUH, BO RAM|http://people.arch.usyd.edu.au/~bsuh4219]]\n\n\n\n''Assessment Criteria''\n\nYou have the following deliverables for this unit of study. Next to each is the percentage for that deliverable. For each deliverable, it's broken down further, along criteria that I'll list.\n\n!Deliverables:\n|''Deliverable 0:'' A functioning deco2102 site, with clear links to your blog, and 3 mini sites.| 5% |\n|''Deliverable 1:'' minisite 1- Iteration 1 of the documentation for your product.| 10% |\n|''Deliverable 2:'' minisite 2- Iteration 2 of the documentation for your product.| 15% |\n|''Deliverable 3:'' minisite 3- Iteration 3 of the documentation for your product.| 30% |\n|''Deliverable 4:'' Your process blog | 40% |\n\n! Breakdown of each deliverable:\n|''Deliverable 0: 5%'' |no breakdown |\n|''Deliverable 1: 10%'' |Site structure: 5%, Site design: 5% |\n|''Deliverable 2: 15%'' |Site structure: 5%, Site design: 5%, Site content 5% |\n|''Deliverable 3: 30%'' |Site structure: 10%, Site Design: 10%, Site content 10% |\n|''Deliverable 4: 40%'' |Site structure: 15%, Research/Content 20%, Site Design 10% |\n\n!Due Dates:\n|''Deliverables 0 and 1'' |30th August, 2007, 5pm|\n|''Deliverable 2'' |20 September, 2007, 5pm |\n|''Deliverables 3 and 4'' |25 October, 2007, 5pm|\n\n\nStill confused about exactly what is required? Let's see if we can fix that- have a look at this [[simple example of the deliverables|A deco2102 example to help you grasp what's required]].\n\n\n\n
[>img[old|img/deco2102_2007/horus.jpg]]\n\nToday we'll finish talking about the basics of HTML, so that by the end of today you should be able to create an HTML page with:\n\n* the standard HTML, HEAD and BODY tags\n* a title\n* various levels of heading (H1, H2, etc)\n* links to other pages\n* tables for tabular data only\n* everything else we discuss today\n\n\n\nThis week, we'll round things off (a gymnastic metaphor) by learning about:\n\n* linking to a certain part of a page with anchors\n* META tags\n* inserting images\n* lists\n* line breaks\n* non-breaking spaces and other characters\n\nI'll also talk briefly about the idea of deprecation.\n\n''Delimiters Revisited''\n\nCan you think of delimiters that are used in ordinary Human speech? I can think of at least 4.\n\nThe issue I had with my notes in TW last week were delimiter-related. I tried to write the word < HTML >, without the spaces, but that tells TW "treat this as HTML". Interestingly, it's possible to use any HTML tag apart from the HTML tag itself, and TW won't complain.\n\n<BLINK> tags are a sign of noobism. See? It treated it just as normal text.\n\n''Let's get started!''\n\n{{justySmall{Which means 'it is', and so an apostrophe is added. (Just a friendly infomercial for correct usage.)}}}\n\nFor today's lecture and tutorial, I've provided [[this file.|deco2102/tutorial.html]] In the tutrial, save the file (by right-clicking and selecting 'save as') and then open the file in Notepad/TextEdit.\n\nI've included that very HTML below. Note that what Tiddlywiki (what I use to create these notes) does to this HTML and what a web browser does are entirely different! If you //left-click// the link above you'll see what I mean.\n\n{{justyImportant{This is a good example of how HTML can be interpreted differently under different conditions.}}}\n\nDon't be confused here- the HTML file you download to edit will look a little like this when you see it in the text editor:\n\n{{{\n\n<A name="tag_HEAD"><H2>HEAD tag</H2></A>\n&lt;HEAD&gt;\nThe head of an HTML document serves as a means to provide meta-information, and is not displayed in the browser.\n&lt;/HTML&gt;\n\n<A name="tag_TITLE"><H2>TITLE tag</H2></A>\n&lt;TITLE&gt;\nThe title tag allows a designer to place text in the browser's title bar.\n&lt;/TITLE&gt;\n\n}}}\n\n\nAnd looks like [[this|deco2102/tutorial.html]] when browsed.\n\nAnd it will look different again when viewed in Tiddlywiki: (I've done this to be able to present the notes here, within TW.)\n\n<HTML>\n\n<A name="tag_TITLE">\n<H1>The tags we need for basic HTML</H1>\n</A>\n\n<A href="#tag_HTML"><b>HTML tag</b></A><p>\n<A href="#tag_HEAD"><b>HEAD tag</b></A><p>\n<A href="#tag_TITLE"><b>TITLE tag</b></A><p>\n<A href="#tag_BODY"><b>BODY tag</b></A><p>\n<A href="#tag_META"><b>META tag</b></A><p>\n<A href="#tag_TABLE"><b>TABLE tag</b></A><p>\n<A href="#tag_HREF"><b>A HREF tag</b></A><p>\n<A href="#tag_IMG"><b>IMG tag</b></A><p>\n<A href="#tag_LI"><b>LI tag</b></A><p>\n<A href="#tag_Entities">Special Characters</A>\n\n<HR>\n<A name="tag_HTML"><H2>HTML tag</H2></A>\n\n<!-- Notice that to show characters that would otherwise be interpreted as HTML-->\n&lt;HTML&gt;\nEverything in an HTML document must lie between these two tags\n&lt;/HTML&gt;\n\n\n<A name="tag_HEAD"><H2>HEAD tag</H2></A>\n&lt;HEAD&gt;\nThe head of an HTML document serves as a means to provide meta-information, and is not displayed in the browser.\n&lt;/HTML&gt;\n\n<A name="tag_TITLE"><H2>TITLE tag</H2></A>\n&lt;TITLE&gt;\nThe title tag allows a designer to place text in the browser's title bar.\n&lt;/TITLE&gt;\n\n<PRE>TODO: Change the title of this document.</PRE>\n\n<A name="tag_BODY"><H2>BODY tag</H2></A>\n&lt;BODY&gt;\nThis tag delimits the content that <i>will</i> display in the browser.\n&lt;/BODY&gt;\n\n<A name="tag_META"><H2>META tag</H2></A>\n&lt;META&gt;\nThis tag can provide information about the document, for example, keywords.\n&lt;/META&gt;\n\n<PRE>TODO: Research the META tag and add one to this document. You may use any attribute(s) you wish.</PRE>\n\n<A name="tag_TABLE"><H2>TABLE tag</H2></A>\n&lt;TABLE&gt;\nThis tag can present tabular data\n&lt;/TABLE&gt;\n<p>\n<TABLE border="1">\n <TR>\n <TD>\n item: 0.24\n </TD>\n <TD>\n item: 0.27\n </TD>\n <TD>\n item: 0.29\n </TD>\n</TR>\n</TABLE>\n\n<PRE>TODO: Research the TABLE tags and add another one to this document. Make the table 3 rows by 3 columns. Give the table a border of 3 pixels.</PRE>\n\n<A name="tag_HREF"><H2>A HREF tag</H2></A>\n&lt;A HREF="link.html"&gt;\nWe use this tag to link between, and within documents. (Like this one)\n&lt;/A&gt;\n\n<PRE>TODO: Research linking within a document, and add a 'back to top' link at the end of each of these sections. Also, ensure that every piece of content defined here is linked from the contents above. (ie if there are topics here not linked at the top, create a link)</PRE>\n\n<A name="tag_IMG"><H2>IMG tag</H2></A>\n&lt;IMG&gt;\nThe IMG tag is used to add images.\n&lt;/IMG&gt;\n\n<PRE>TODO: Research the IMG tag and add an image immediately below this text.</PRE>\n\n<A name="tag_LI"><H2>LI tag</H2></A>\n&lt;LI&gt;\nThe list tag can be used to create ordered and unordered lists.\n&lt;/LI&gt;\n\n<PRE>TODO: Research the LI tag (and UL and OL) and add two simple ordered and unordered lists immediately below this text.</PRE>\n\n\n<A name="tag_P"><H2>P tag</H2>\n&lt;P&gt;\nThe paragraph tag.\n\n<A name="tag_BR"><H2>BR tag</H2>\n&lt;BR&gt;\nThe line break tag.\n\n\n<A name="tag_Entities"><H2>Special Characters (HTML Entities)</H2></A>\n\nIn order to represent certain characters, for example characters that are part of the HTML markup itself, or characters not available from your keyboard, we use HTML Entities. There's a complete list of these available on the web; a search for "HTML Entities" should sort you out.\n\n<PRE>TODO: Research the characters for:\n<UL>\n<LI>Non Breaking Space\n<LI>Trademark character\n<LI>Copyright character\n<LI>Less than character\n<LI>Greater than character\n<LI>A funky character of your choice\n</UL>\n<br>\n.. and include them immediately below this text.\n</PRE>\n<br>\n<b>Have this page ready to show your tutor at 4pm.</b>\n\n</HTML>\n\n\n''Deprecation''\n\nNot to be confused with "depreciation", deprecation is a term that refers to the process of making something obsolete, in the context of computer language development.\n\nWe've hinted, nay insisted, that whilst some practices are possible, it doesn't mean that they're //desirable//. For instance, tables shouldn't be used for layout of pages, even though they can. Similarly, there's also:\n\n\n\n<HTML><BLINK><FONT face="Times" color=#FF4000 size="5">\nHEY! HEY!!! Look at my heaps sick web p@gez lol! See how im attracting your attention wit bad grammar and deprecated tagz, y'all!\n</FONT></BLINK></HTML>\n\n\n\nUsing the <BLINK> tag is a gateway drug to much harder, much nastier stuff. For example, have a look at [[this page|img/deco2102_2007/incrediblybadwebdesign.png]]. Tacky, darling. Tacky. Wrong for all sorts of reasons. And not even 'so wrong it's right'. Just. Plain. Wrong.\n\nSimilarly, stay clear of the tag that places scrolling text in the bottom bar of the web page. I dare not even speak its name. What's it called?\n\nTags are also deprecated because web browsers will no longer support them. "No longer support them" can mean anything from them simply not working, to 'breaking' your page.\n\n----\n\n''Resources''\n\n[[W3Schools|www.w3schools.com]]\n[[HTML Goodies|http://www.htmlgoodies.com/]]\n\n\n''Further endeavours''\n\n''META''\nSince people started making money from the Internet, the <META> tag has been the subject of much scrutiny. It has been used to 'position' web pages by including keywords that are believed to improve a page's page rank, and its likelihood to be found in a web search. It's almost useless in this regard today, if one is to believe what one reads. Look up "Dublin Core Metadata" to find out more about where META tags are heading.\n\n''Google''\nEven though the idea of "Google-ing" something has become very common (much in the same way as a "Windsurfer" is a brand-name, but became synonymous with "Sail Board") it's only one option for searching. I was surprised the other day when Google didn't find what I wanted, but Yahoo did. Rotate your shield frequencies!\n\n{{justySmall{(This is a Star Trek thing- if you're not down, all I mean is "Use a variety of search engines"}}}\n\n----\n\n''Today's Tutorial, reiterated.''\n\n1. Download [[this file|deco2102/tutorial.html]] and open it Notepad / TextEdit.\n\n2. ''Also'' open it in the web browser of your choice. Size your windows so that you can see both at once.\n\n3. Do each of the 'TODO:' sections you see, for example ensuring that each section is 'wired up' to the menu at the top.\n\n4. Make the changes, save the .html file, then reload it in the browser.\n\n5. Repeat until finished, and let your tutor know when you're done. They'll have a quick glance at it to make sure all is well.
[>img[old|img/deco2102_2007/last_supper.jpg]]\n\n\nLast week an electron deficit caused things to go slow a little, and so I'll ''once again'' present //a little// of what you need to be able to do with basic HTML. Then we'll move on to XHTML and CSS.\n\nA little birdy (actually a glance at the HTML you're making) tells me that some of you don't know what you're doing, when it comes to the very basics of HTML. So, I'll summarise the endeavour right now:\n\n''The VERY basics''\n\nWeb pages are documents that contain special tags that inform the browser how to render the information within them, and display it to the User. These tags control how text is formatted and displayed, as well as many other aspects.\n\nRemember that web pages are ''not'' print pages, but they inherit concepts (and baggage) from this medium. In print media we have typefaces, variants on those typefaces (eg italic and bold), layout concepts (eg 1 versus 2 column layouts) and so forth. Being aware of the reasons that print design decisions are made, and how they relate (or don't) to web design is ''important''. \n\n\n{{justyImportant{question: Do you know where serifs come from? Do you know what a serif is?}}}\n\n\nA document without tags is just a load of text. Text files, when they are to be interpreted as simply text, end with the suffix ".txt". \n\n{{justyImportant{question: Can you think of another format of file, that is just text? (But is displayed as something a little more)}}}\n\n\n\n\nOne answer:\n\n.rtf files are "Rich Text Format". Like HTML, RTF files are rendered and displayed. If you read an RTF as plain text you'll see formatting markup, that's a lot harder to read than HTML. (Even though ultimately HTML can do so much more).\n\nFor example, an RTF that looks like this:\n\n//This// is an ''RTF''\n\nas markup (tagged text) looks like this:\n\n{{justyCode{\n{\srtf1\smac\sansicpg10000\scocoartf824\scocoasubrtf410\n{\sfonttbl\sf0\sfswiss\sfcharset77 Helvetica-Oblique;\sf1\sfswiss\sfcharset77 Helvetica;\sf2\sfswiss\sfcharset77 Helvetica-Bold\n;\n}\n{\scolortbl;\sred255\sgreen255\sblue255;}\n\spaperw11900\spaperh16840\smargl1440\smargr1440\svieww9000\sviewh8400\sviewkind0\n\spard\stx566\stx1133\stx1700\stx2267\stx2834\stx3401\stx3968\stx4535\stx5102\stx5669\stx6236\stx6803\sql\sqnatural\spardirnatural\n\n\sf0\si\sfs24 \scf0 This\n\sf1\si0 is a \n\sf2\sb RTF}\n}}}\n\n{{justyImportant{question: Can you think of another common file format (proprietary) that is based on text?}}}\n\n\n\nOne answer:\n\nAnother type of text file that contains markup is Microsoft's .doc format. In this case, the only way to render these files, is to use an application ([[like Word]]). If you look at a .doc as plain text (by forcing it to open in a text editor) you'll see yet another type of markup. You'll also see why it's probably not a good idea to rely on Word's HTML output function.\n\n\n''Now, back to the HTML.''\n\nHTML files are renderable by a large number of programs, called "browsers". The capabilities of browsers varies, but all are capable of rendering the most basic of HTML.\n\n''Tags''\n\nThe first tag we need is the HTML tag itself. Tags are delimited by <these two characters>. Almost all tags are opened, and then closed. (In XHTML ''all'' tags are closed)\n\n{{{\n<HTML>\n \nText goes here.\n\n</HTML>\n}}}\n\nOne tag you should be aware of is the comment tag.\n\n<!-- This is a comment -->\n\nYou may place this anywhere within your document (even in the BODY) and it will not be displayed in the browser. Viewing the source of the page will reveal these comments, and it's a good place to note anything to do with the development of the page, assumptions for the use of the page, etc.\n\nHere is the structure of a basic HTML page:\n\n{{{\n<HTML>\n <HEAD>\n <TITLE>\n Page Title\n </TITLE>\n </HEAD>\n <BODY>\n Some text\n </BODY>\n</HTML>\n}}}\n\nUse this as the starting point for creating HTML documents from scratch. \n\n''Debugging''\n\nThe best bit of advice I can give you in this regards is when you're developing HTML, and in particular when you're about to add some new feature to your page, is to trial it within a minimal HTML page. This is good //science//, let alone good HTML development.\n\nNow, check out [[last week's notes|deco2102 S2 2007- Week 3: HTML the old fashioned way 2]] if you haven't already.\n\nWelcome back!\n\n----\n\n''XHTML''\n\nWe're leaving the bad old days behind- XHTML is a stricter, cleaner, sexier version of HTML. All modern web browsers support it. It's designed to ''replace'' HTML. It's as if HTML was the mother, XML was the father, and XHTML is the offspring. (If you need that kind of a analogy.)\n\nHave a look at http://www.w3schools.com/xhtml/xhtml_intro.asp for an introduction.\n\n{{justyImportant{question: Why does this URL end in ".asp"?}}}\n\nThe important things to be aware of here is that XHTML ensures compatibility with browsers of the future, and indeed the past. The process of converting a document to XHTML is one of bringing it into compliance, and is ultimately as interesting as a well-structured tax return, so let's move on to CSS.\n\nFor the tutorial, you'll need to convert your deco2102/1200 pages to XHTML.\n\n----\n\n''Intro to CSS''\n\nCascading Style Sheets are a mechanism by which a web developer may specify a series of overlapping rules that determine how HTML is rendered. By 'overlapping' I mean that one rule might determine how ''all'' text will appear, but you might specify a second rule that specifies how text appears within a certain tag. More detail on this next week.\n\n''Why CSS?''\n\nTo answer this, let me explain the great nexus between 'hacking' and 'elegant programming'. To hack something is to do //whatever// it takes to produce a desired behaviour within a program. To program elegantly is to produce the desired behaviour in a way that makes the program\n\n* debuggable\n* modifiable\n* expandable\n\nProgramming elegantly requires more forethought, but pays off in the end. Now, to HTML:\n\n''Scenario One''\n\nLet's imagine (and this isn't hard, as it's what you'll be doing in this UOS anyway) that you need to produce a series of web pages for a web site.\n\nThe client has told you that they want the headings within the site to be Times New Roman 16pt bold, and the body text to be Arial 12pt plain.\n\nMeet "The Hacker" and "The elegant CSS Meister". (Please don't confuse "cracker" and "hacker". A cracker is a criminal. A hacker is a saint. Well, not a criminal anyway. These two types have different approaches when it comes to producing HTML:\n\n\n''The Hacker''\n"That's easy!" exclaims the hacker- "I'll use the FONT tag!". The hacker goes ahead and uses this tag to specify the headings and body text for each page of the site.\n\n{{{\n<FONT face="Times, serif" size="6">\n}}}\n\n''The Elegant CSS meister''\n\nThis person takes a different route. They use CSS to define two styles- the header and the body text. They use the DIV tag, end employ its class attribute to specify which of these styles applies to the text within the DIV.\n\n{{{\n<div class='header'>Heading</div>\n<div class='bodytext'>Here is the body text</div>\n}}}\n\n\nNow, the client wishes to make some changes. (They tend to do that a lot, so developing a strategy to cope with this is wise). They want to change the font in the headings from Times to Courier New. If they wanted to use 'Comic sans' you might have been able to talk them out of it on the basis that this font is incredibly tacky, and would devalue your services as a web developer, or even that this font isn't always available, but that excuse won't fly here.\n\nYou have to make the change.\n\n''The Hacker''\n"Crap!" says the Hacker. S/he realises that this will involve editing each and every instance of the <FONT> tag, and making that change. Search and replace might be an option, but it's always a risky one. There's nothing to it, but to do it. Hmmm.. that little job has turned into a big one. Plus, with every edit, there's a small but real chance of making a mistake somewhere, and 'breaking' the page.\n\n''The Elegant CSS meister''\n"No problem!" says this person. S/he realises how easy this change will be to make. They've already defined the styles for the site within a single file, "styles.css". (Any name would be OK). They spend 30 seconds editing the file (after backing it up, of course) and hey presto, Bob's your auntie's live in lover, the site will reflect these changes.\n\n\n\n''Scenario Two''\n\nThe client requests two versions of a site- a version that is web browsed, and a version designed to be printed. This is important because the site has a black background, which is an ink-hog when printed.\n\n''The Hacker''\n"That's easy!" exclaims the hacker- "I'll just use design two versions of the site". S/he goes ahead and creates two sets of pages for the entire site.\n\n\n''The Elegant CSS meister''\nThis guy/gal knows that CSS will help enormously in this situation. They go ahead and design two sets of markup- one for web browsing and one for printing. \n\n\nThe Hacker has double the work (and sometimes more). Every new page that needs to be developed is going to incur more work for the Hacker.\n\nThe ECSSM has done the job once, and even when new pages are required, they don't need to do double the amount of work.\n\n\n{{justyImportant{Grammar Corner}}}\nBy the way, it's correct to say "number of things" and "amount of stuff", e.g. "number of people", and "amount of coffee". (Or "number of "coffees") OK?\n\nWe'll cover more CSS next week- in the meantime, I want you to do the following:\n\n* Define (at least the name of) a range of styles that you'll be using in your page.\n* Where possible, //redefine// the built-in structural tags, <H1>, <H2>, etc.\n* Research how to use CSS to achieve this textual formatting.\n* Research how to use CSS to achieve layout of elements on a web page. Be aware of the issues that arise within certain browsers, e.g. Internet Explorer (in all its many incarnations)\n\nNext week we'll talk about what you've discovered, and share the knowledge.\n\n{{justyImportant{question: Under what conditions do you think it's OK to hack <FONT> tags?}}}\n\n----\n\n''Tutorial''\n\nToday's tutorial will involve you converting your student web site to XHTML. Leave the file extensions as they are, i.e. ".html" (because XHTML documents are still .html documents), but you'll need to alter the content of the page(s) (''not'' your blogs!) so that they are valid XHTML.\n\n{{justyImportant{question: Why wouldn't you try and make your blogs XHTML?}}}\n\nSpecifically:\n\n* Ensure that you have a correct DOCTYPE definition\n* Ensure that your tags and attributes are all lowercase.\n* Ensure that there are no open tags- eg replace <br> with <br />.\n* Ensure that all attributes of tags are quoted.\n\n* Test your page at http://validator.w3.org/ (the DOCTYPE definition tells this service that it should be validating XHTML, so double-check that you've added it.)\n\nRead through http://www.w3schools.com/xhtml/xhtml_intro.asp if you've not encountered XHTML before.\n\nAll the resources you need to check that your page is valid XHTML can be found at w3schools- make sure you've read about XHTML before you dive in and alter your pages. Make sure you backup your pages.\n\n\n\n
''"What is web 2.0?"''\n\nIt's our sincerest hope that the answer to this question will inspire and excite you. Today's lecture is hopefully designed to do exactly that.\n\nA nice two-part answer to this question is "Technology and society".. but that by itself is far too general, so let me explain what I mean.\n\nThere are technologies on the web (ie supported by modern browsers) that allow developers to achieve things they hitherto could not. A good example of this is AJAX, and an implementation of this is [[Google maps|maps.google.com]]. That's one aspect of Web 2.0- big technology shifts that mean that quite simply, more is possible.\n\nThe other aspect of Web 2.0 is social networking. Social networking on the web is nothing new- chat rooms have been around for ages now. But the degree to which it's happening now, and the kinds of people who engage in it is different these days. In the old days, only geeks used computers, and therefore only geeks would access chat rooms and the like.\n\nNow the web is everywhere, and non-geeks are far more likely to instant message, join social networking sites, and get involved with blogging.\n\nThe place at which the two domains of technology and social networking intersect is interesting too. There's a social networking site called "Facebook" that has (relatively) recently opened up its development environment, allowing the general public (who are able to program, of course) to develop FaceBook applications. One example of this is the "Friend Wheel". This is an application of technology to a social domain.\n\nWeb 2.0 is about the rich interlinking of sites to other sites. Technically this has always been possible, but now it's been made even easier to do it (through such activities as blogging, for example). Here's an example of this. (If you weren't physically here today, you've missed it.)\n\nIn the pre-Web 2.0 days, a web designer was someone who knew HTML, and dealt with FTP servers. This is still true today in many cases, but now it's possible to get your content on the web without uploading anything. An example of this is Wikipedia, where people may contribute to a Wikipedia entry, without uploading a thing. (Technically, an upload has occurred, but the user didn't have to move files around.)\n\nHere are some of the social networking sites that I'm aware of. (and I'm being quite general with my definition here) I certainly don't have an account on all of them.\n\nhttp://www.faceBook.com\nhttp://www.myspace.com\nhttp://www.flickr.com\nhttp://www.youtube.com\nhttp://www.digg.com\nhttp://sphere.com\nhttp://technorati.com\nhttp://www.ilike.com\nhttp://www.indie911.com\nhttp://www.garageband.com\n\nIf you've not heard of any one of these, make sure you spend a few minutes researching them. This leads me neatly to describe the major activities you'll need to engage in for this unit of study:\n\n''Researching''\nHow are you going to use the web if you don't use the web? There is so much information about the web on the web. There are no textbooks for this course- they would be obsolete at the time of printing (less of an exaggeration than you might think) and besides, let's save the trees and use the web. You'll need to research how to blog, for example.\n\n''Designing''\nOnce you've researched something (technologies, for example), it's time to apply that new information and design something. Whether it's designing how a web page will look, or designing how a web page that documents something else will look, you will of course remember what faculty you're sitting in now, and flex those design muscles.\n\n''Blogging''\nThis is the verb that means "To web-log". People blog about all kinds of stuff- their new child, their garden, their art projects, the blogging process itself, et cetera. You will need to start blogging straight away. You're going to need a personal weblog that you use to document the processes you go through in this unit of study, so if you don't have one already, you need to investigate setting up one ''today''. You'll also need a personal site that links to your blog, and vice-verse. [[What's the difference?]] You'll also need to set up an RSS feed to this blog. (Don't worry, it's pretty easy). As your assessors, it means we're able to subscribe to your blogs, and be informed when you post something there.\n\n''Documenting''\nThis is facilitated by blogging- you're going to become very good at documenting your processes. Documenting your processes forces you to think about your processes. Thinking about your processes encourages you to improve your processes. You can document your research, and you can document your design process. You can document the interaction between you, your fellow students, and anyone else in the world. For example, here's an entry you might post in your blog:\n\n"Last week I emailed the authors of Wordpress, and asked them if it was possible to install a plugin that would allow me to change the colours and layout of pages. Today, they've emailed back and told me.."\n\nThere is of course an overlap between blogging and documenting, simply because you're going to use blogging as a means to document.\n\nThe choice of blogging environment is up to you. The two that I'll mention here are [[WordPress|http://www.wordpress.org]] and [[TiddlyWiki|http://www.tiddlywiki.com]]. There are pros and cons to both- Wordpress is online which means you can access it from any web browser; the disadvantage is that it's online, meaning you have to have access to the Internet to use it. Tiddlywiki is client-side, which means that you //don't// have to be online to use it, but the disadvantage is that you need to upload it yourself. (That's no big deal here at uni, of course- you simply drag the file into the appropriate location in your student account.) All we ask is that on your personal //site// (ie your ~stud1234/ site) you provide an easy way to find your personal blog- in other words you hyperlink to it. (If you're going with WordPress, or any other blogging tool/service that requires registration, then create a username that suits you; it need not be your real name. Again, just make sure you link to it from your web site).\n\nThe choice of web development tools is also up to you. Whether you like to code HTML by hand in a text editor (don't knock it, a lot of people do it, and for good reason.) or use a weighty app such as Dreamweaver, the choice is entirely yours. Think about (and then document) your reasons for using the approach that you do.\n\n
''Business from last week''\n\nI feel it's my duty to reiterate (and clarify) a few things from last week.\n\nFirstly, WordPress, Tiddlywiki, ??\n\nWordPress and Tiddlywiki are just two options- feel free to explore others. I'm told that some of you actually looked at the source code for TW and had a near heart-attack! I'm not surprised; you were never meant to do this- the great benefit of TW (and apols. if I did'nae make this clear) is that you can edit the content without having to edit any HTML. You use the page itself to do the editing. The other advantage is that you don't need to be online to use it. Having said that, if you don't want to use it, don't! Sure, I know the author, but TW is free- there's no kickbacks in it for me!\n\nSo, on to further practicalities:\n\nWhat you'll need to produce, from ''our'' (Mine and Rob's) perspective.\n\nAs you may have seen, on Rob's deco1200 page, there is a list of student names, (I'll be doing something similar for deco2102 very soon). and these are hyperlinked to your student web pages, or more accurately, where we expect to find your student pages. This location is known as the 'root folder in your student UNIX home directory'. If there's nothing there yet, we get the message "You don't have permission to view BLAH". We'll show you in the tutorial how to put files there.\n\nSo, for next week, when we go there, we expect to find ''one'' of the following situations:\n\n1. A site dedicated to deco1200/2102 alone. (This is unlikely, because you'll almost certainly have a need to create pages/mini-sites for other units of study). Somewhere on this page will be a clear, easily discoverable link to your blog.\n\n2. A menu page with links to the mini-sites for each of the units of study you have there. One of those links will be to deco1200/2102, and when we click this link we'll be taken to a page/mini-site for deco1200/2102. A link to your blog will be found here, or optionally you could put that link back on the menu page.. as long as we have ''no trouble'' finding it. (Now is not the time to be arty and cryptic)\n\n3. A single hyperlink to another site (eg a privately hosted page or a myspace profile) that serves as your student homepage. This should be functionally identical to what I've described in 2. (Or 1., again in the unlikely event that you're only creating a web presence for deco1200/2102.)\n\n''Sites vs. Blogs''\n\nLet me make this clear, 'cos it's important! //A// blog is a temporal record of articles that grows over time, and //a// site is a (relatively) static page, or set of pages that is (generally) more professional than a blog, and has a 'finished' quality to it.\n\n//Your// ''blog'' for this unit of study is to be:\n\n''deco1200'' primarily a documentation (or diary even) of the process that you underwent in the development of the iPhone app, from conception through to delivery. The blog should reflect the three major phases in the development of the app, as well as the issues that arise in relation to web design in general (ie for both the blog an the site(s), as well as the effectiveness of the documentation itself, as evaluated by both your peers and your teachers.\n\n''deco2102'' primarily a documentation (or diary even) of the process that you underwent in the development of an already existing project, or one in progress. (Except this one, you nutty recursive programmers) from conception through to delivery. The blog should reflect the issues that arise in relation to web design in general (ie for both the blog an the site(s), as well as the effectiveness of the documentation itself, as evaluated by both your peers and your teachers.\n\n//Your// ''site'' for this unit of study is to be a documentation of the product itself, in three iterations. For product think 'site', and for process think 'blog'.\n\ndeco2101 students, hold thy tongues until the tutorial- I'll talk to you individually about your requirements for the site.\n\n\nI think a diagram will be of help here!\n\n[img[Sites and Blogs|img/deco2102_2007/sitesvblog.png]]\n\n\nWhen I went to the deco1200 page today and started clicking student names, I discovered that only a handful of you have set up web pages. Today's tutorial will remedy this. Once we've been through creating a bare-bones HTML document, you'll need to modify it so that it becomes the first iteration of your student site. Feel free to blog about the development of your site. The few pages I found, I've attempted to subscribe to when I could. Subscription to an RSS feed makes life a lot easier- it means I don't have to keep checking every day ''each'' of your pages for updates to your content. It's almost an expected Internet courtesy to provide one. It's also courtesy to [[subscribe to the blogs of your educators!|http://www.feedburner.com/fb/a/emailverifySubmit?feedId=959417&amp;loc=en_US%22%3E]]\n\n\nTake a deep breath...\n\n''HTML the old-fashioned way''\n\nThe goal for the next two weeks is for you to come to grips with the basics of HTML. Don't panic, it's really not too hard, but you need to come to terms with it at some point, so it may as well be now.\n\nThis will be a fairly low-level lecture today; and the goal of the tutorial will be to create a simple web page.\n\n{{justyImportant{When I want you to write something down for later, you'll see this:}}}\n\n{{justyImportant{notethis: }}}Google: bare bones HTML document\n\nBy the way, this is different to:\n\n{{justyImportant{notethis: }}}Google: "bare bones HTML document"\n\n\n\nThe tags you will learn about today are:\n\n{{{\n<HTML></HTML>\n<HEAD></HEAD>\n<TITLE></TITLE>\n<META></META>\n<BODY></BODY>\n<A HREF></A>\n<H1></H1>\n<H2></H2>\n<H3></H3>\n<H4></H4>\n<H5></H5>\n<TABLE><TR><TD></TD></TR></TABLE>\n}}}\n\nThese form the basis for a simple start in HTML coding. Today you'll use Notepad, yes, Notepad to create your pages. Later I'll get you to make the same page in Dreamweaver, and we'll compare the code.\n\n''What constitutes an HTML document?''\n\nLet's get our hands dirty now. HTML is a kind of text document (text/html) which means it may be readily edited by text editors. Whether ''you'' as the user can edit it is another story! You'll have no problems editing one today. We're going to start from scratch. What we'll do is I'll run through the basics with you now, discussing each tag as we go. Then in the tutorial, after I've discussed (deco2102) your projects with each of you, we'll trace the steps I traced here in the lecture, and the result will be a finished tutorial.\n\nAn HTML document is a collection of //tags.// A tag is a kind of //delimiter.// A delimiter is a //token// that separates pieces of information from other pieces of information. For example, if I told you that there will be three guests for dinner tonight: "James, John, Joe" then the comma serves as a delimiter- Of course, as Human Beings we could work that out without the commas, but computers aren't Human, and so they need a helping hand.\n\nWe delimit HTML text with tags. The first one we need is {{{<HTML>}}}\n\nLet's look at a bare-bones HTML document.\n\n{{justyImportant{notethis: }}}Google: bare bones HTML document\n\nYou'll find various definitions here, but we're mostly interested in \n\n{{{<HTML>, <HEAD>, <TITLE>, and <BODY>}}}\n\nThe only content you'll need for now is "Welcome to my homepage". (By the way, if you've already created a home page then you won't need to replace it obviously.)\n\nOne can make a new .HTML file in a text editor. I'm showing this to you on a Macintosh, but PC heads fear not, as Notepad will do the job. Kaz can help you with issues relating to showing file extensions and the like. This part of today's lecture will also serve as a briefing for the tutorial, so let's go:\n\n1. Create a new empty text document.\n\n2. Save it as 'index.html'.\n\n3. Type:\n\n{{{\n<HTML>\nWelcome to my homepage.\n</HTML>\n}}}\n\n4. Save the file, and open it in a web browser of your choice. You should see the text. There is however, more to a 'real' HTML document than just one tag. Let's add a title:\n\n{{{\n<HTML>\n<HEAD>\n<TITLE>Welcome to my homepage!</TITLE>\n</HEAD>\nWelcome to my homepage.\n</HTML>\n}}}\n\n5. Save again, and reload the page in the browser. Voila! A title is no longer the name of the document, but the text you specified.\n\n6. This document is missing its body! Let's add one:\n\n\n{{{\n<HTML>\n<HEAD>\n<TITLE>Welcome to my homepage!</TITLE>\n</HEAD>\n<BODY>\nWelcome to my homepage.\n</BODY>\n</HTML>\n}}}\n\n7. Save, reload. You won't notice a difference, but now your document is 'better' HTML. I shy away from the word 'valid'- more on this another time.\n\n8. Let's look now at some other basic tags: (Now's when you wish that you attended the lecture)\n\n* <a href> : hyperlinking\n* Heading tags, eg <H1>\n* Tables\n\n\n''Tutorial Goals''\n\n* Be able to upload files to your student directory.\n* Be able to create a basic HTML page (as defined above) from scratch, and upload it to your student directory.
This describes a person with a presence on the web. It applies to somebody who publishes, and isn't just a passive consumer of the world's media.
Hacking is a term used to describe a quick piece of programming or prototyping. It is often mis-used in place of the term "cracking". Crackers break into systems, hackers improve them.
Google "NeoOffice" for a Word alternative.
<<saveChanges>>\n<<newTiddler>>
Object-oriented design and programming are passions of mine. I have two approaches to programming- [[hacking]] and doing it elegantly.
config.options.chkHttpReadOnly = true;
version.extensions.tagCloud = {major: 1, minor: 0 , revision: 1, date: new Date(2005,8,16)};\n//Created by Clint Checketts, contributions by Jonny Leroy and Eric Shulman\n// Modified to support 8 sizes by Justy\n\nconfig.macros.tagCloud = {\n noTags: "No tag cloud created because there are no tags.",\n tooltip: "%1 tiddlers tagged with '%0'"\n};\n\nconfig.macros.tagCloud.handler = function(place,macroName,params) {\n \nvar tagCloudWrapper = createTiddlyElement(place,"div",null,"tagCloud",null);\n\nvar tags = store.getTags();\nfor (t=0; t<tags.length; t++) {\n for (p=0;p<params.length; p++) if (tags[t][0] == params[p]) tags[t][0] = "";\n}\n\n if(tags.length == 0) \n createTiddlyElement(tagCloudWrapper,"span",null,null,this.noTags);\n //Findout the maximum number of tags\n var mostTags = 0;\n for (t=0; t<tags.length; t++) if (tags[t][0].length > 0){\n if (tags[t][1] > mostTags) mostTags = tags[t][1];\n }\n //divide the mostTags into 8 segments for the 8 different tagCloud sizes\n var tagSegment = mostTags / 8;\n\n for (t=0; t<tags.length; t++) if (tags[t][0].length > 0){\n var tagCloudElement = createTiddlyElement(tagCloudWrapper,"span",null,null,null);\n tagCloudWrapper.appendChild(document.createTextNode(" "));\n var theTag = createTiddlyButton(tagCloudElement,tags[t][0],this.tooltip.format(tags[t]),onClickTag,"tagCloudtag tagCloud" + (Math.round(tags[t][1]/tagSegment)+1));\n theTag.setAttribute("tag",tags[t][0]);\n }\n\n};\n\nsetStylesheet(".tagCloud span{height: .4em;margin: 3px;}.tagCloud1{font-size: .5em;}.tagCloud2{font-size: .8em;}.tagCloud3{font-size: 1.0em;}.tagCloud4{font-size: 1.2em;}.tagCloud5{font-size: 1.3em;}.tagCloud6{font-size: 1.5em;}.tagCloud7{font-size: 1.5em;font-weight: bold;}.tagCloud5{font-size: 1.8em;font-weight: bold;}.tagCloud5{font-size: 2.0em;font-weight: bold;}","tagCloudsStyles");
TabAll
[[27.8.07]]\n[[3.9.07]]\n[[10.9.07]]\n[[17.9.07]]\n
Dimensions of 3000 or higher are commonplace with data sets of this type.