Fairfax: Apple Technologies Used

[955] Fairfax at Atlanta, small

The backend was supplied and sponsored by IBM (they can’t promote this due to IOC contracts – and since their systems in Atlanta melted down, its a good thing for us!) It was an AIX 4.1 box running the Netscape Commerce server. The link to TelstraNet was 2Mbits – also provided by an IBM R&D; arm in Melbourne. The server only reached 20% utilisation which I found impressive as the hit count was extremely high (10K hits/hour) The fast server, sending out HTML (not heavy CGI munging) and a fast pipe resulted in a better site than the competition!

We were getting news (such as winning medals) posted to the site within a minute of the result occuring. In one case, where the Australian Women’s Hockey Team – the Hockeyroos – won a gold medal, we posted a story and picture within 10 seconds! Whilst not as “instant” as TV, people at work could keep up to date without losing their job! The site also had large amounts of background material that TV does not have the ‘time’ to usually show. Its interesting that newspapers are restricted to the size of the paper, TV restricted to time and the web is restricted to bandwidth.

We published an average of 20 pictures and 100 stories per day on this site – many of these stories are replaced and/or reprocessed; all within a 6 hour period. All stories and pictures were stored in a FileMaker Pro 3.0 database.

It was Frontier 4.0.1, however, that did all the hard HTML ‘munging’ work. It takes the data out of the FileMaker Pro 3.0 database and does some smart find-and-replacing from templates to generate the final HTML. Using Fetch, the results were sent to the Netscape-server via FTP. Frontier uses the AppleScript technology built into System 7.0 to get these other application to “do the job”. At last count, the ‘HTML-processing engine’ was Frontier is about 1000 lines of UserTalk; the database consists of 7 related tables.

The database system was built for flexibility. For instance, once it became clear that the IBM results service was, err, not as responsive as it could have been, we created our own “Australian Results” page. This was unplanned, but the database had the flexibility to build new parts of the overall web-structure within 10 minutes. I outlined the details of this Munge-machine at the ATS in Brisbane in August.

Brainwaave built all the HTML templates and did the design work. CGIs and Java were also supplied by Brainwaave. All I had to do was take the content from the database and process it into the correct templates. There are a couple of techniques I use; all rely on some nifty Frontier code to make work.

I have also scripted the picture-import and text-import process. Pictures are automatically uniquely named, sized (for WIDTH= & HEIGHT= commands) and thumbnails generated – again, from Frontier scripts.

As to the content; it come from Fairfax (Age and Sydney Morning Herald) journalists & photographers in Atlanta. The Photos were scanned and sent from 9500’s in Atlanta via ISDN to a set of Macintoshes in Sydney. These Macintoshes ran AppleScript scripts written by Fairfax to send them to Sun servers which run a series of picture databases. We pulled the pictures out of the database and processed them using Adobe Photoshop into an Internet-ready form (JPEG format) Some of the pictures were from Reuters and much of the ‘breaking news text’ is from Australia Associated Press wires. These pictures/stories are replaced with Fairfax content where possible.

Picture previews were stored in the FileMaker database so that when pictures were assigned to stories, we actually saw the picture. Saved on mistakes!

Text came out of Fairfax’s Tandem-mainframe running the SII INL newspaper publication system. A PC took a serial feed from the SII and ftp’d the text files to a Macintosh 8100/80 running Peter Lewis’s NetPresenz. Frontier read these files, stripped unwanted characters/formatting, and added them to the FileMaker database.

The Filemaker database stores the text and pictures in a way that allowed us to ‘assign’ them to locations within the web site. Frontier took the database and ‘mixed in’ the templates and generated the final HTML.

The search server was Starnine WebSTAR running on an Power Macintosh 8500/150 with the Apple eg ACGI. I wrote a Frontier script that took the raw .html from the main IBM server and ‘replicated’ it to the Macintosh 8500 for indexing. If a user found a story that matched their search, they were re-directed to the main IBM AIX server.

The ‘listserv’ – or Newsflash! as we called it, used Starnine ListSTAR/Apple Internet Mail Server on another Power Macintosh 8500/150 and a Quadra 650. At the end of the Games, we had 1017 subscribers on the list. I pushed for the listserv as a method of ‘pushing’ information out to people who were interested -and- a way of attracting people back to the site. The ListSTAR server was easy to create and manage and I would really recommend it.

The Macintosh 8100/80 was also running the VICOM Internet gateway; all the Macintoshes in Atlanta Web central were on a 10baseT Ethernet network; and the server had a 28.8K PPP connection to Brainwaave and subsequently TelstraNet. Using this gateway, all the Macs have access to the Internet.

So, could all of this be done with Windows? Probably, but not with the integration of multiple small applictions from different sources into a cohesive system – all within 2 person-weeks.

The Fairfax Experience

[951] Fairfax at Atlanta

Background

In June 1996 Apple Computer Australia, Fairfax Publications, Brainwaave Communications, IBM, Comtech, Netscape began the Fairfax@Atlanta (1996) project.

In Australia, sport is a national pastime. Our sporting heroes are more revered than movie stars or rock musicians. Therefore, the Olympics is a 4 year feast to all sporting-mad Australians. Boxing, Cycling, Diving – and the list goes on – present a smorgasboard of viewing to the sports fan.

Fairfax Publications, one of the companies in the Fairfax empire (which includes The Sydney Morning Herald, Financial Review, The Age, Sunday Age and the Sun Herald), decided to marry the Internet with the Olympics.

Fairfax@Atlanta

was one of four Australian-team focused web sites. The nearest competitor was Inside Atlanta run by News Interactive, a company in the Murdoch News Corp empire. Other web sites were much smaller, and usually later with the news and information. Basically, it was a two horse race. As reported in Australian PCWEEK, Fairfax@Atlanta (1996) won gold for the Australian Olympic site.

Apple’s role and positioning was to gain experience with web-publishing on a grand scale; that is, outside of the PageMill/SiteMill level. Apple sponsored the site with my time (Nick Hodge) over a 5 week period; along with a bevy of hardware and software technology.

Initial analysis of the requirements of a “web publishing system” -and the intended volumes scared the hell out of me. No off-the-shelf tools exist for web publishing in this volume within this time scale.

Statistically, we finished up publishing 1,300 documents and 700+ pictures. On our peak days we began at 4:00am and completed work at about 2:00pm. Within this period, about 100 text items and 20 pictures were posted to the site. All links and structure were automatically generated as part of the publishing process.

Neil Finn Questions

Background:

Jon Casimir, a respected journalist for the Sydney Morning Herald interviewed Neil Finn on May 19th.

As Jon is a friend of mine, I proposed the following: why not see what questions the member of the “Tongue in the Mail” maillist would like to ask Neil … Jon being very ‘net savvy agreed!


Results:

Jon Casimir’s first article appeared in Wednesday 20th May’s Sydney Morning Herald: Out of the house, Neil Finds a New Muse

There is an article slated for the “Metro” section of the Sydney Morning Herald in about 4 weeks time. Stay tuned.


My Question for Neil:

‘Try Whistling This’ marks a transition from the acoustic ‘Finn’ album to a more digital sound; how has the digital age altered your craftmanship?


Here are the Questions Submitted:

With Crowded House it often felt like attempts to be loud and rocky never quite came off, they sounded kind of self-conscious and polite, wheras on your new album it seems to happen much more easily and successfully – what changes have brought this about?

Though I’m sure everyone else will be asking this – why funky dancey grooves now when you’ve never used anything like that before in 20 yrs of making music? is it the radical development it sounds like with respect to your previous work or just a different feel to experiment with?


Why is Twisty Bass called Twisty Bass?

What event/s inspired the song Try Whistling This?


I’m a songwriter, and would like to ask Neil which instrument he composes on primarily, and what kind of acoustic guitar(s) he has in his home/studio (not looking for brand endorsement; I just know that there’s usually a single favorite guitar that’s usually close at hand for songwriters).


How do you see your writing abilities progressing now the new album has been released and was the split of Crowded House any inspiration to the writing of your new material ? How do you feel when you hear Split Enz come on the radio these days ?


One feature of all your work to date has been the banter at your live shows, either with Tim or with Paul or Nick. Is that changing now you’re solo, or have you already got a ‘banter groove’ happening with your band? And will you be encouraging paper planes?


The new album is really impressive. What Iâve found interesting is how much my 14 year-old daughter loves your new material. How do you feel about reaching such a young audience and how have you maintained this appeal over the last 20 years?

There are always a group of lines in your songs that, along with a goosebump inducing melody, really stand out, hit home and play on the mind. Do you start with these lines and build the song around them or do you start from the top and they follow naturally from the original idea?


How do you feel about the success and recognition you’ve earned?

Do you yearn for more high-profile, world-wide recognition (i.e. American success)?


John Lennon is supposed to have said (about music): “If it’s real, it’s simple usually. And if it’s simple, it’s true.” It is bound to be possible to achieve this no matter what technology you avail yourself of to make your recorded music. It is. It’s not the arrangements or approach or even structure of the song that makes this happen. So what is it? What makes something ring true? And something not? Even different projects by the same person. What do you think is the essence of this simplicity?

Can you have strong personal ambition for your musical career and still maintain integrity as an artist?


Each time we hear about the death of a celebrity, more recently Linda McCartney – and bearing in mind your contribution to the Princess Diana tribute album – do you ever feel inspired to write songs for the recently departed?

How do you react when a fellow musician/artist has played you a really good demo (or live version) of a new song of theirs and then when you hear the final version, it has been over produced – even ruined – in the studio? Do you tell them what you think?


When you are in the studio, how much of a perfectionist are you? i.e., do you find yourself recording vocals or other parts over and over again until you get it “just right”? Has your level of perfectionism changed over time in your career (are you more or less of a perfectionist now)?


How does the sound of the new album compare with Crowded House? Did you intentionally start out writing songs that would not sound like Crowded House, did the difference largely come out in the studio, or are there compelling similarities between your solo work and Crowded House albums?

Tim visited Burlington, Vermont in 1989/90, opening for 10,000 Manaics. Have you ever considered visiting or, better yet, playing here?


Do you wish to write an album with any other artists in the future?


In terms of Crowded House, would the songs ‘Black and White Boy’ and ‘In My Command’ and ‘Instinct’ best represent your new songs?

I can’t remember you having any one word titles for your songs. It is the kind of thing i’d expect to see on an REM, Pearl Jam or Radiohead album. Is this because you have focused more on the music and worried less about the lyrics?


From Split Enz, with songs like ‘Years Go By’ ‘Voices’ ‘History Never Repeats’ and through Crowded House with ‘Love This Life’ ‘Distant Sun’ ‘Private Universe’ ‘Everything Is Good For You’ and ‘Instinct’ for example, it seems you take life as it comes, always looking at the past while wondering what the future holds in a light-hearted manner, while cherishing those special places and moments in your life. Is this true in any way?

The songs ‘Kare Kare’ and ‘Private Universe’ could not have summed up better the place attachment I have to our families bach in the Marlborough Sounds, and the general scenery, memories and atmosphere present there. Is ‘Private Universe’ about place attachment to you?


Neil, even though you have been a solo songwriter for much of your career, you have always been a musical collaborator with your brother or with a band. How different was writing and recording this solo album from those experiences? Were you expecting to feel more liberated and able to carry through on your own vision, or did you miss the sounding boards that you used to work with?


Any plans for a few shows in the US?


How does the sound of the new album compare with Crowded House? Did you intentionally start out writing songs that would not sound like Crowded House, did the difference largely come out in the studio, or are there compelling similarities between your solo work and Crowded House albums?”

Tim visited Burlington, Vermont in 1989/90, opening for 10,000 Manaics. Have you ever considered visiting or, better yet, playing here?

Creating Animations


Step 1: Create the base composition with elements.

The first step is to create the base elements in the composition.

1. Create a new composition. Set the size to 760 pixels wide by 100 pixels high. [809] 01create/01_newcomp.jpg

2. Open the Color palette (Window>Color). Select the Document background color icon and set the color to R=0, G=153, B=153 (web color #009999)

[810] images/doc_bg_color.gif

[811] 01create/02_bkgndcol.jpg

3. File>Place the Adobe Illustrator file ‘extreme_flow.ai’.

The source files for this guide are available here: MacOS: sourcefiles.sit.hqx Windows: sourcefiles.zip

[812] 01create/03_placeai.jpg

4. Window>Transform. In the palette, change the width and height of the placed element to 1024 x 100 pixels. [813] 01create/04_changesize.jpg

5. Timeline>Show Timeline Window. Here you can see that the Adobe Illustrator file has been placed as a single encapsulated postscript file (EPS). As we would like to seperate the elements, select the element in the timeline [814] 01create/05_opentimeline.jpg

6. Object>Convert Layers Into>Objects. Now we have two layers created from the layered Illustrator file on our timeline. [815] 01create/06_layerobj.jpg

7. Timeline>Edit Name… Rename the layers to a name that will make life easier later on. You all name your layers in Illustrator, Photoshop and InDesign … don’t you

Layer 2 rename as extremetext

Layer 1 rename as waveflow

[816] 01create/07_rename.jpg

8. File> Place as Texture. Select the file face.psd. This will tile the Photoshop file as a texture in the black areas of the extremetext layer.

The source files for this guide are available here: MacOS: sourcefiles.sit.hqx Windows: sourcefiles.zip

[817] 01create/08_placetexture.jpg

Technical Web Links

Firstly, thanks for visiting!

My personal tips and tricks are listed to the left.

The Adobe Evangelist’s Photoshop Tips, Tricks and Techniques

Adobe Illustrator Illustrator Examples and Tips

Adobe Photoshop Photoshop Examples and Tips

Realworld GoLive 5.0 Dynamic Link

Lynn Grillo’s GoLive Tips of the Day

Jakob Neilsen’s Jakob Nielsen’s Usability Articles

A List Apart – a good commentary

Webmonkey – the best overview of all things web related.

Export Settings


Step 2: Export Settings.

Optimising our animation for the web is a critical part of generating Flash-SWF files.

1. View>Active Export Preview. In the Composition window, bottom left hand side you will now see a small icon. This tells us that the element currently selected will take approx 9.25Kb in the final .swf file, and it is a bitmap object.

[818] images/active_export_preview.gif

[819] 02exportsettings/09_activeexport.jpg

2. Window>Styles. Find the style ‘Drop Shadow 3’ Ensure that the ‘extremetext’ layer is selected in the Timeline window and apply this style. To apply a style, just click on the [820] images/apply_style.gif [821] 02exportsettings/10_styles.jpg

3. File>Export Settings. The palette is showing the document level settings. All bitmaps in the final .swf are optimised with these settings. To create object level settings, click on the [822] images/object_settings.gif. [823] 02exportsettings/11_exportsettings.jpg

4. You are now able to tweak the settings for this object (‘extremetext’) – by reducing the JPEG quality and the Opacity Resolution, the element will take less size in the resulting .swf. Set this to the smallest amount whilst not compromising image quality. [824] 02exportsettings/12_objlevelexport.jpg

Animation


Step 3: Animation & Time Independent Groups.

The next step is to create the Time Independent Group, and animate this ‘submovie’. Think Pulp Fiction – movie inside another movie.

1. Now to create the Time Independent group! Select the ‘waveform’ layer in the Timeline window, Timeline>Make Time Independent Group. Thelayer will jump to the top of the text. Just Object>Arrange>Send to Back. Rename the layer to ‘waveanimation’ by selecting Timeline>Edit Name [825] 03animation/13_createtig.jpg

2. If you now double-click on the ‘waveanimation’ layer, you drill down or jump into this seperate sub movie. Whatever we do inside this simple animation is completely divorced from the master composition. Move to Current Time Marker (CTM [826] images/ctm.gif) out to the 02s time on the timeline. [827] 03animation/14_timelinectm.jpg

3. Twirl the triangle next to the waveflow layer down, and twirl down the Transform, too. [828] images/animate.gif

You can now see the elements we can animate over time. Click on the stop watch next to Position. [829] images/stopwatch.gif We are now animating the position of the waveform over time.

Click on the well to the right of the Position stop watch: [830] images/well.gif

This will create a keyframe ([831] images/keyframe.gif) on the timeline indicating at this time, the position of this element will be where it lives in the composition.

Repeat this at 01s and exactly 1 frame in from the absolute beginning.

[832] 03animation/15_createkeyfr.jpg

4. Move to 0s6frames in and in the composition window move the waveform to the left. This will create another keyframe. So from 0s to 6f in, the waveform will move to this position, and then return to its resting position at 1s [833] 03animation/16_animate6f.jpg

5. Move to 1s6frames in and in the composition window, move the waveform to the right. This will create another keyframe.

You can preview this animation by clicking on the [834] images/play.gif icon in the Timeline window.

[835] 03animation/17_animate1s6f.jpg

Adding Behaviours


Step 4: Behaviors.

Now we have our animation created, we must create some behaviors to control the animation.

1. Move the Current Time Marker (CTM) to the absoluite beginning of the ‘waveanimation’ Time independent group.

Click on the [836] images/behaviors.gif Behaviors icon in the Timeline window.

[837] 04behaviours/18_ctmto0.jpg

2. At the beginning we are going to stop the submovie in its tracks. So label the behavior ‘stop-wave’ Select ‘Stop’ from the Add Behavior pop-up. [838] images/add_behavior.gif [839] 04behaviours/19_addbehaviour.jpg

3. Move ahead one frame (hopefully positioned to line up with your first key frame!) and add another behavior ([836] images/behaviors.gif) [841] 04behaviours/20_adv1frame.jpg

4. Label this animation ‘start-wave’ and add the behavior to play. From the Options area, set the target to our Time independent group, ‘waveanimation’

[842] images/target.gif

[843] 04behaviours/21_playbehav.jpg

5. Finally, move to the end of our timeline and add a final Behavior, this time a ‘Go to Label’

From the options area, select the target as the ‘waveanimation’ and the label as ‘stop-wave’ (created above!)

[844] images/label_target.gif

[845] 04behaviours/22_lastframebehav.jpg

6. We have created our animation and the behaviors. If we preview now, not much will happen. We have to trigger the Time Independent group externally through a rollover.

To jump out of our Time independent group, click on the left-pointing arrow in the Timeline window

[846] images/jump_out.gif

[847] 04behaviours/23_jumpouttig.jpg

Wiring Rollovers


Step 5 Rollovers.

To trigger the Animation, we need to create a Rollover with Behavior attached:

1. Open the Rollovers palette: Window>Rollovers. Click on the ‘extremetext’ layer in the Timeline window. Create another Rollover state by clicking on theNew Rollover State icon [848] images/add_rollover.gif [849] 05rollovers/24_rolloverstate.jpg

2. To trigger the behavior, click on the Behaviors icon ([850] images/behaviors.gif) and add a simple ‘Go to Label’ behavior. This time, go to the label ‘start-wave’ in the ‘waveanimation’ submovie/Time independent group.

[851] images/another_behav.gif

[852] 05rollovers/25_rolloverbeh.jpg

3. File>Preview In> (Choose your favourite browser where the Flash plugin is installed)

You can now see the end result of this work. The wave animation will only trigger when you mouse over the ‘extreme’ text.

Cool!

[853] 05rollovers/26_preview.jpg

PDF Forms and Javascript

Acrobat: Forms and Javascript

Don’t want to write CGI? Try this: Adobe Acrobat Reader and Forms Data without Custom CGI

Part 1: Insert into a database.

This note is largely based on the demonstration of Acrobat 5.0 Forms and Javascript I gave at the April 2001 Adobe PDF Days in India and South Asia.

The example Acrobat Forms Zipped FilesPDF and JavaScripts have been zipped here.

Creating the PDF

The first step is to create the base form. Here, the simple form is created in Microsoft Word 2000. Using the PDFMaker, covert the document into a PDF.

Adding the Form Fields

Adding the form fields is a matter of using the Form tool ( i[854] images/forms_tool.gif) to create four fields in the areas as indicated by the original Word areas.

Select form tool and drag out the form field filling to the area required.

You can copy and paste or ight click to copy, right click to paste to duplicate fields.

Double click on the field to edit the Field Properties. The scripts below nominate specific fields

[855] images/01_formfield.gif

Adding a Button

To create a button, use the same field tool as above and create it in the area required. Change the type to Button from the Type: popup menu.

[856] images/02_buttonfield.gif

In the Actions tab, select the Mouseup ‘when this happens…’ and click on the Add button. From the Type: popup, select ‘Javascript’

[857] images/03_javascript.gif

By clicking on the “Edit…” button you can insert the code into the Javascript section. This Javascript is executed when the ‘mouse goes up in the button’ – or in other words, when the mouse is clicked.

The Javascripts

// declare and fill local variables
var lAppName = this.getField("app.name").value;
var lAppAge = this.getField("app.age").value;
var lAppSkills = this.getField("app.skills").value;
var lAppYears = this.getField("app.years").value;

// save to ODBC database on local machine.
// this is named in Control Panels>Administrative Tools>Data Sources
var con = ADBC.newConnection("jobs");
var statement = con.newStatement();

//
var query = "INSERT INTO jobs ( name, age, skills, years) values ('" + lAppName + "','" + lAppAge + "','" + lAppSkills + "','" + lAppYears + "');";

// execute SQL statement on database
statement.execute(query);

Code example 1: Simple ODBC Insertion from a PDF form.

PlanetPDF on ADBC in Adobe PDF Forms

NB: Before this script will work, there needs to be an ODBC database source on your machine mapped to a database containing the table: ‘jobs’. This table will need at least 4 columns defined: ‘name’, ‘age’, ‘skills’ and ‘years’ I use Microsoft Access as my development database. Using Control Panels>Administrative Tools>Data Sources (ODBC) control panel, I have created an ODBC connection to the jobs.mdb file (Microsoft Access). This can be any ODBC datasouce.

[858] images/04_odbc.gif

var lAppName = this.getField("app.name").value;
var lAppAge = this.getField("app.age").value;
var lAppSkills = this.getField("app.skills").value;
var lAppYears = this.getField("app.years").value;

var lWeb = this.getField("web").value;

if (lWeb == "Yes") // we are submitting via a web server
{
var fieldsToSubmit = new Array("app.name","app.age","app.skills","app.years");
// change the http: URL to appropriate server name and/or address
this.submitForm("http://127.0.0.1/jobs.asp#FDF",true,false,fieldsToSubmit);
}
else
{
var con = ADBC.newConnection("jobs");
var statement = con.newStatement();
var query = "INSERT INTO jobs ( name, age, skills, years) values ('" + lAppName + "','" + lAppAge + "','" + lAppSkills + "','" + lAppYears + "');";
statement.execute(query);
}

Code example 2: Extending the example above, showing web submission alternative. The ASP referenced is in code example 3 below.

NB: This Javascript required the ASP in the next code example installed onto the server. The code above points to a server at “http://127.0.0.1/jobs.asp” This IP address is also known as the loopback address — its the same machine as the form is currently running on. Of course with real installations, this would point to a fully qualified domain name where the server-side script is residing. When sensitive information is involved, it is recommended to use a secure socket connection such as https://…

The Active Server Page (ASP)


<%Response.ContentType = "application/vnd.fdf"%>

<%

Set FdfAcx = Server.CreateObject("FdfApp.FdfApp")

Set FDF = FdfAcx.FDFCreate

Set FDFin = FdfAcx.FDFOpenFromBuf (Request.BinaryRead(Request.TotalBytes))

lName = FDFin.FDFGetValue("app.name")

lAge=FDFin.FDFGetValue("app.age")

lYears=FDFin.FDFGetValue("app.years")

lSkills=FDFin.FDFGetValue("app.skills")

set jobsConnection = Server.CreateObject("ADODB.Connection")

jobsConnection.Mode = adModeReadWrite

jobsConnection.Open "jobs"

set jobsRecordSet = Server.CreateObject("ADODB.RecordSet")

jobsRecordSet.LockType = 3

jobsRecordSet.Open "jobs",jobsConnection

jobsRecordSet.AddNew

jobsRecordSet.Fields("name") = lName

jobsRecordSet.Fields("age") = lAge

jobsRecordSet.Fields("years") = lYears

jobsRecordSet.Fields("skills") = lSkills

jobsRecordSet.Update

jobsRecordSet.Close

Response.BinaryWrite FDF.FDFSaveToBuf

FDF.FDFClose

%>

Code example 3: Active Server Page (ASP) using VBScript inserting the fields the form submits in code example 2.

NB: this code example requires an ODBC connection defined named ‘jobs’ This points to a database that contains the table ‘jobs’ with fields ‘name’, ‘age’, ‘years’, ‘skills’

Also installed is the Adobe FDFTK – Forms Data Format ToolKit. The Windows installer is available here.

For More Information

The best resouces for PDF and developer related information is PlanetPDF. More specifically, there is an Indepth Guide here. A fundamental requirement on the server-side is the Adobe FDF Toolkit

Adobe Systems’ information on the Forms feature of Acrobat is here.