Category: mungenet

The Story Behind the Name

munging is a term describing processing things. Converting stuff. Or as the Munge Brothers said, turning data into information. Hey, and we said this wayyy before Uncle Bill started talking about Information at your Fingertips (now where has that gone?)

So, after the breakup of the Munge Brothers, I named my web site in honour of that time in my working career. There are a scant few times in your work-life where you mix and connect with a bunch of collegues and do some really cool stuff.

Anyway, the mungenetengine is just the latest incarnation of using the munge term and applying to something completely different. To make the URL shorter, I have renamed the mungenetengine into mne.

For further information on the Munge Brothers, please do not consult your local library:
Who are the Munge Brothers?

Why Write Your Own?

A Content Management System, in my definition anyway, is a piece of software that takes all the content: text, images, links etc and manages them. It also understands the relationship between items. It also has enough intelligence to be able to present the content to the end user.

Previously on mungenet I have used Userland Frontier – and specifically a piece of code I wrote myself for Fairfax@Atlanta. The main lesson I learnt from writing this was that “structure defines navigation” and that “structure should be described in the database”. Therefore, its easy to add to the structure of the site – and the navigation will follow. The central premise of this is that the relationship between items is key to the rendering of the navigational pieces on the site.

After moving away from my home grown Fairfax@Atlanta system, I transitioned to a combination of GoLive for the bulk of the content and a variety of systems for the “blogging” first page.

Initially, I used Blogger for easily adding notes on a daily basis. Followed by Radio Userland – a free piece of software based on Frontier. For about 2 months in late 2001 I used a combination of PHP and MySQL as my first foray into PHP coding.

The mungenetengine as you see it today is a full PHP and MySQL based content management system that also contains and serves binary elements (PDF, images, SWF) as well as the HTML snippets. It renders the navigation from the relationship hierachy in the system from templates, as well as permitting arbitary pieces of code to run server side.

The most recent additions to the server-side code is the ability to switch content snippets and templates based on the client’s browser environment. There are alternate templates for Netscape 4.7 and earlier.

Once the data is stored in a database, it becomes extremly easy to bolt on features that permit easier creation and editing of content. In May 2002, a SOAP interface was added for a VB client application. In July 2002 a RSS XML feed was added.

There are many, many other systems that manage content for web sites. Each has their own strengths and weaknesses. As I consider cutting code a hobby rather than a profession, its really cool to have something you have written working in production on a daily basis.

Exposing a Hidden Feature of InDesign 2.0

Does this describe you: Type is your thing. Ensuring that the baselines are consistent is causing a relationship breakdown between you and your partner, dog or manager. You wake up in a cold sweat thinking about bad hyphenation decisions you made during the day.

If so, its time to look at this little hidden feature of InDesign 2.0. It’s not as frivilous as zooming, zapping aliens – but it may change your life. At least a little.

Here’s the problem: you have two flows of text on a page; one master column contains the body copy; and there is also a second column that contains a pull quote, or margin notes that refer to the main body text.

To typeset the text to ensure readability, the appropriate process is to align the baseline of the first lines of each paragraph, with the main body paragraph flowing on the document-wide baseline; and the margin note starting on the same baseline, but the leading flowing appropriate to its smaller type size.

Setting this type manually is a chore. You have to exactly align the baselines of the two text frames. If the text reflows, or the margin quote needs to move – there is many minutes (to hours) of rework to realign your text.

InDesign 2.0 has what Tim Cole (Adobe’s InDesign Evangelist) calls a double-secret feature. Its a little hidden, but worth the effort to uncover to solve this problem and hopefully save the relationship with your pet.

Firstly, we need to ensure that the document has a baseline grid set. To do this, go to Edit>Preferences>Grids. The grouped area “Baseline Grid” contains the settings. Start is the starting position from the top of the document, Increment Every is the baseline setting.

Set the baseline to the appropriate baseline grid for your document.

And assign to a paragraph by using the Type>Paragraph palette. The “Align to Baseline Grid” button is in palette as shown.

I have also turned on View>Show Baseline Grid to see where the baselines are… it helps visualise what is going on in our document.

The second paragraph in this instance lies to the right of the body paragraph. Its Character settings are completely different: different point size, leading.

If you have not created a custom keyboard shortcut set, Click on the “New Set” button.

Now it is time to sneak up on the double secret feature. It is hidden in the Edit>Keyboard Shortcuts, specifically in the Text and Tables section. Scroll down until you see “Only Align First line to Grid” You will see that there is no keyboard shortcut assigned to this option.

We also need to assign a keyboard shortcut to this option. Click in the New Shortcut area, and type a new Shortcut. Press the keys for your new keyboard shortcut. If the key sequence is currently being used for another command, InDesign displays that command under Current Shortcuts.

The context here is important. The context ensures that the shortcut performs the way you intended. For example, you can assign Ctrl+G to group two cells together (Table context) and Ctrl+G to insert special characters (Text context).

To enable this feature, assign it to a keyboard shortcut.

Now, back in our original document, we have a right hand “hanging” paragraph. The first step is to set it to the document’s baseline grid. Of course, all of the lines are now aligned to the document’s baseline. We’re one step on the way.

Now we use the keyboard shortcut. In my keyboard set, they were assigned using the “Default” context. This means I have to select the text frame using the black arrow (Selection Tool) and type the new shortcut. Voila!

Please note as I move the right hand paragraph down the page, the baseline for the first line stays aligned to the baseline grid whilst the following lines follow the leading for the paragraph.

Note that the you doesn’t have to use the keyboard shortcut on each paragraph. Though there is no UI in the palettes for this feature, it can be saved/captured as part of a paragraph style…the create and redefine functions both ‘see’ this attribute on a paragraph level.

The Edit>Keyboard Shortcuts is worth serious investigation. Next time you wake in a cold sweat, just jump onto your InDesign and have a look. Hopefully it will not send you back to sleep…

Thanks to: Tim Cole, Sandee Cohen.

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
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 ) out to the 02s time on the timeline.
3. Twirl the triangle next to the waveflow layer down, and twirl down the Transform, too. You can now see the elements we can animate over time. Click on the stop watch next to Position. We are now animating the position of the waveform over time. Click on the well to the right of the Position stop watch: This will create a keyframe () 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.
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
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 icon in the Timeline window.

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 Behaviors icon in the Timeline window.
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.
3. Move ahead one frame (hopefully positioned to line up with your first key frame!) and add another behavior ()
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’
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!)
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

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
2. To trigger the behavior, click on the Behaviors icon () and add a simple ‘Go to Label’ behavior. This time, go to the label ‘start-wave’ in the ‘waveanimation’ submovie/Time independent group.
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!

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) 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

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.

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

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.

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.

Overprinting & Trapping in Adobe PDF Quick Note

version 1.2

As Acrobat 5.0 has this new cool “Overprint Preview” feature. And as Barney Kassabian has prompted me, this raises the whole issue of QuarkXpress and overprints/trapping.

Over the last 2 years, I was under the impression that overprints were retained in composite Quark Postscript files. I was only partly correct, or a bit wrong. You choose. To clarify, I have been experimenting.

Overprinting in QuarkXpress 3.32 to Adobe PDF

If you save out of QuarkXpress 3.32 as an EPS, Quark keeps the overprinting settings (as set in the View>Trap Information palette). Distilling this with Acrobat Distiller 4.05 or 5 results in a PDF where the overprint is retained. New in Acrobat 5.0 – you can view this on screen.

However, if you use the Adobe preferred method of “Printing” via AdobePS to the Distiller (Mac: Create Adobe PDF, PC: Acrobat Distiller printers) — the overprinting information is NOT retained in the Postscript.

If you are a Postscript jockey, you can see the simple command is just plain missing from the Printed .ps file:

What about QuarkXpress 4.x? Thankfully, QuarkXpress 4.x exports the “stovp” Postscript command when printing. Other trapping details are NOT retained in the composite Postscript output.

“T stovp‘ — set overprint on the next drawn object to true — in English. This particular command (stovp) is defined in both the EPS and the standard Postscript headers of a QuarkXpress 3.32 Postscript file; its a QuarkXpress specific command in their Postscript header. Its just that the Composite Postscript printed from Quark happens to be missing the appropriate overprint command.

If you are wise to the ways of Postscript, or willing to shoot off your own foot, you can insert this command into the Printed postscript file from the the EPS version and viola! you have overprinting in the Printed output. Be warned! This may result in a Postscript file that is no longer valid; it may not RIP; and the Distiller may ‘spit its cookies’ at you. You have been warned. Don’t try this at home. I am a trained professional. Your mileage may vary. Insert standard legal disclaimer here.

The good news in this is that overprint information IS LEFT in the EPS files; placed from Illustrator or Quark generated EPS.

So, what is the recommended workflow? Out of QuarkXpress 3.32, save each page as an EPS file. Place each of these EPS files BACK into a QuarkXpress document (or InDesign document ) and THEN follow the guidelines of Printing to the Distiller via AdobePS.

Please note: you should not nest EPS file inside EPS files inside EPS files. Why not? Each EPS saves a graphic state before srawing its contents; at least once. There is a limit of 15 of these in Postscript 3; and depending on the content in the EPS, the RIP may cause a ‘limitcheck’ Postscript error.

Also please note: When creating and Distilling EPS files from QuarkXpress, note that Quark does not embed the fonts. This restriction forces you to Distill on the creating machine. Otherwise, there is the risk that you create a PDF where the fonts are not embedded.

And the resulting PDF displayed in Acrobat 5.0 with Overprint Preview turned on:

Another method, albeit more prone to trouble, is taking the EPS files created above and Distilling these directly. The trouble that you might find in this method is that the Distillers “Default Page Size” is used, UNLESS you have “Resize Page and Center Artwork for EPS Files” checked in the Advanved Tab.

Evidendly, Quark’s Composite postscript output changed in QuarkXpress 4.0x — where the overprinting settings were retained. This is good news.

Trapping

In a slightly similar fashion, QuarkXpress only saves its choking/spreading information when it prints Separations (usually not the default PDF workflow) or if you export as a DCS file. Once you save as a DCS file, you have separated your work. The choking/spreading is not saved when you save as EPS.

How do you “recompose” the separated DCS file/separated QuarkXpress file into a composite PDF? Apart from using a Modern Prepress application like InDesign? Adobe InDesign: Prepress Techniques

Thankfully, CreoScitex have an Acrobat plugin called CreoScitex Seps2Comp You can download a trial version Windows and/or MacOS from their web site.

It takes a multiple page PDF and allows you to “recombine” them into a composite PDF. In theory, common elements will exist in exactly the same place across the different plates. Its a matter of then adding the images/graphics back together and generating a composite image on screen. To do this manually involves creating channels in a Photoshop file (one channel for each of C, M, Y and K) — but you are left with a purely bitmap image.

Here is a screen dump of Sep2Comp in action. Its just a simple matter of applying a certain ink to the page that contains that plate. In Pre-separated Postscript, there is a special command that details how the separation is composed; Seps2Comp reads this and automatically applies the appropriate plate to ink.

And the final result

Also good news is that PageMaker 6.x and InDesign 1.x saves composite Postscript with Trapping & Overprinting by default. There is no need for all this jumpling through hoops and funny business.

This is a screen dump of Acrobat 5.0 showing the effect of trapping using the default settings. As many of these traps have been set to overprint – you can see the traps live on screen. Cool.

InDesign 2.0: Generating Composite, Trapped PDFs has more info on how to do with with InDesign 2.0.

Adobe’s Support site on Trapping:

Trapping in InDesign 1.x

Trapping in PageMaker 6x

Quark’s Support site has good overviews of Trapping and Overprinting:

Trapping Overview from Quark

Thanks to Shane Stanley for suggesting the nested EPS change; Barney Kassabian for prompting this research & supplying test files; Grant Gittus for running his experienced eyes over my comments.

Rollover Styles in ImageReady 3.0 ImageReady 3.0 comes with Photoshop 6.0. One of the new features is the ability to create Styles that include Rollover states. There is a slight nuance, however. You must create the style from a Layer Based Slice. This module is © 2000 Adobe Systems, Inc and cannot be reproduced without the written consent of the author.
1. Select the layer that you wish to create the slice over. In this instance, I have created a shape that encompasses the rollover.
2. Menu Layer>New Layer Based Slice
3. From the Rollover palette, create a new rollover state by clicking on the button.
4. Change the Layer Style for the new rollover state. I have used an inner shadow in this example.
5. From the Styles palette, click on the new button. Ensure that “Include Rollover States” is checked.
6. Now the style is created, it is a simple matter of dragging this style over the other two layers where you wish to create the rollovers.
7. Now the three Layer based slices and rollover states are created.
8. You may need to optimise your slices as layer based slices are automatically sized to fit the content of the layer. This sometimes leaves “fringing” table cells and images, increasing the complexity of your slice. Just promote the layer based slices to user slices using the menu Slices>Promote to User Slice This will allow you to change the slice sizes to get an optimal table and images.