Weeks 6 - 7


D3

and a blog about colors

Assignment #4 - due Wednesday March 20th.

A: Using HTML, JavaScript and/or CSS, but not using the HTML <select> tag, make a "drop-down" object that behaves as much as possible like a <select>. When the user selects a particular option, append its value to an event log (a textarea or div tag).

B: Do the same thing in SVG. (Experiments with a menubar)

Assignment #5-- widgets (to be worked on individually and concurrently with other assignments)

Reminder --  final projects


SVG Basics

Overview

The very basics

More adventurous stuff

Dailey's book

W3C Course Week 1 Week 2

Simple templates

A standard template involving namespaces, script, tags, and DOM calls.

The simplest SVG document (working across browsers)

Using <object> in a way that works in IE

Other SVG topics

Scaling and translating

Disabling text selection

Handling keystrokes in SVG -- moving toward a textarea

another suggestion for a text area: lay the text along a dynamically defined path consisting of lines that fill a region.

Putting things along a bezier curve.

An example of radio buttons

Putting a bunch of rectangular click-things (button-like objects) across the bottom of the screen

Measuring things

Announcing source code of an SVG object

A 3D SVG interface

GetCTM -- finding the bounding box after transformations

creating and dragging (simplified code)

creating and dragging (manually or automatically)

Others at http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

2.5 dimensions:

XML oddity:

If you try to put the following in an SVG file:

<script> for (i=0;i<12;i++) {somecode()}</script>

then browsers will not be happy. 

 the preferred solution:

<script> <![CDATA[ for (i=0;i<12;i++) {somecode()} //]]> </script>

Id est, put CDATA descriptor around the material inside the script tag. It convinces the browser not to interpret the stuff in the middle.


HTML things (related to select?)

A menu with images instead of text (works fine in Opera, IE and Firefox -- extra credit if you can get it working in Chrome and Safari too)

Playing with doctype to enable hover in IE

Building your own kind of html objects

Paragraph menu hover

Paragraph menus onmouseover

A bit of experimentation done in class Monday Feb. 21


HTML things (odd or interesting)

An HTML table as an array of objects

Assigning a background image through script

Screen partitioner

Editing and displaying JavaScript, HTML, and SVG

More editing

Error handing