Nick Hodge's Blog

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.
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)
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
4. Window>Transform. In the palette, change the width and height of the placed element to 1024 x 100 pixels.
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
6. Object>Convert Layers Into>Objects. Now we have two layers created from the layered Illustrator file on our timeline.
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
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

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.

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.

Problem. In the present version of Adobe GoLive 5.0, there is a nifty feature called Rollover buttons. This uses GoLive actions to automatically create Javascript rollover buttons as part of your page design. The rollover contains images for different states; and the Javascript switches the image inside the web browser. In the present version of Adobe GoLive, 5.0, the images must be GIF or JPEG images. There is a new GoLive 5.0 feature of SmartObjects, where you can directly place Adobe Photoshop “.psd” files onto your pages. Unfortunately in GoLive 5.0 there is no mechanism of using Photoshop images as part of Rollovers. But there is a workaround that has other side benefits. I call it “Farming” your .PSD files into one placeholder HTML page in your GoLive 5.0 site. You still obtain the benefit of SmartObjects: automatic updating and dynamic scaling, changing optimisation settings and output file management.
Solution. Workaround is to create a “Photoshop Farm File.” This is simply a .html file in your web site. 1. Create a new HTML file in your web site, and set the Publish to “Never” When this file is set to “Publish: Never” it ensures the HTML file is never sent to the web server, as there is no need to place it on the server. Click on the icon of the file in the site window, and in the Inspector you can set the status.
2. Open the new farm HTML file and drag and drop/place your Photoshop files into this document.
Set the appropriate settings, dimensions, compression using the Save for Web dialog box
Save resulting file to directory in your site. Now that the Photoshop files are SmartObjects, you get the benefits of resizing, editing the original Photoshop file.
3. In your HTML page that is going to contain the real rollover, create your smart rollovers as normal, but pointing to the JPEG/GIF output from the ranch file above.
There are some potential downsides to using Farm files: You need to open the ranch file to update if the psd updates (this also is potentially a time saver when designing) GoLive 5.0 cannot have more than 2 output files from the same source file (GoLive only updates the first smartobject of the file occurance) — send in request to golivewishlist@adobe.com! Extensions With a little more courage and time, you could write an extendscript to “corral” all SmartObjects into “farms” to one-stop editing This will also work with Adobe Illustrator 9 files, too! This module is © 2000 Adobe Systems, Inc and cannot be reproduced without the written consent of the author.

November 2001	Right Tools for the Job Roadshow, incorporating a special “Adobe for Developers Session”
June-August 2001	Assistance to ACP in evaluation of InDesign and Photoshop as a mechanism for changing internal design workflows. Resulted in ACP purchasing InDesign and other Adobe products. InDesign now implemented across all 50+ titles.
May 2001	PacPrint, Melbourne
April 2001	Paid-for events in Singapore, Malaysia and India
February 2001	Premiere 6.0 Roadshow, New Zealand and Australia

October-November 2000	Stay on the Edge (Photoshop 6) Roadshow. Incorporating special 1.5 hour indepth session
November 2000	Shred the Web Roadshow: South East Asia (Singapore, Malaysia & India) Appearred on CNBC “e” with Keith Lui. Live TV interview (not a prerecord)
August 2000	Adobe Tips, Tricks and Techniques Roadshow, Pacific
July 2000	Transition to Technical Resources Manager, Pacific and South East Asia for Adobe Systems
May 2000	Shred the Web Roadshow: Pacific
May 2000	Assistance to the 3DAP (PDF Guidelines for Magazine Advertising Delivery) in the creation of the “3DAP Guidelines for Digital Advertising Delivery”.
March 2000	Adobe Tips, Tricks and Techniques Roadshow: Pacific

May 1999	Implementation of Adobe Solutions Network, Service Provider Program
May 1999	Future of Publishing Roadshow (Adobe InDesign, Adobe PressReady, Adobe GoLive, Adobe Acrobat)
February 1999	Adobe Tech Summit, San Jose
January 1999	Adobe Sales Conference, San Francisco

October 1998	Art of Illustration Roadshow: Adobe Systems: Australia and New Zealand
August 1998	Transition to Adobe Systems Pacific as Applications Specialist
June 1998	Re-presentation of Programming WebObjects I Course, Sydney
May 1998-June 1998	WWDC 1998 Update Roadshow, Publishing Update Roadshow
May 1998	Attended WWDC’98, San Jose, California
February 1998	Attended Programming WebObjects I and II course, Cupertino, California. WebObjects is a piece of technology Apple inherited (and still seems to be the forgotten middle child) when it purchased Steve Job’s NeXT, Inc in 1997. WebObjects 3.0 and later uses Java extensively as its programming language. I still miss WebObjects at Adobe …

November 1997	End of Year Update Roadshow (tecjhnology update for Apple’s customers in Australia)
June 1997	WWDC Update Roadshow (representing the technologies and strategies of Apple to customers and developers in Australia)
May 1997	WWDC, San Jose
February to April 1997	EasyRider ’97 Roadshow (Internet and Intranet using Apple and Apple-related technology)
January 1997	San Francisco MacWorld