Web Forms for MAT 153 (Updated)

A SCRIPT generated by the Cinch-O-Matic will not work until you remove enctype= "text/plain" from the form tag that you created in class. This code snippet tells the browser to send the form data in plain text. The PHP script created by the Cinch-O-Matic requires that the transmitted text be URLencoded, which the browser will do by default when the user presses "send." enctype= "text/plain" overrides the default, so that the scripted process breaks.

The mailto process, on the other hand, requires plain text. One thing to keep in mind when creating a mailto form is that users without a mail client installed will press "send," without any result. Nor will they necessarily receive an error message. And if they do, they may not understand what they get, so that they will go on with their lives thinking that you are a boob for having ignored them.

URLENCODING EXPLAINED:

URLs can only be sent over the Internet using the ASCII character-set.

Since URLs often contains characters outside the ASCII set, the URL has to be converted. URL encoding converts the URL into a valid ASCII format.

URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set.

URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

--W3C Schools

A tutorial on using the script generator is here.

Tango Hosting requires that the "From" field contain your student name and the tangostudents.com domain. So, your "from" should read something like this: student100@tangostudents.com. Otherwise, your email will simply evaporate when the script is fired. The "Thank you" page will show, but the email--without any error message--will simply fizzle.

Online OCR

OCR Web Service has a trial license period of 30 days. You can upload scans or other image-based text, and receive the content in a number of different formats, including ascii text.

Testing provided excellent results.

Here is a PDF showing a test. The second page shows the GIF of the original used in the process. Here is the Indesign package, including the GIF file of the document. Some errors occurred, revealing the danger of using OCR. At the same time, you could have made these same errors typing in the text.

The absolutely best OCR I have ever seen resides in Acrobat Professional. If you have Acrobat, don't even fool with any of this other stuff.

See also:

• ABBYY FineReader. Not as good as OnlineOCR. See here.
• OCR Terminal, untested.
• Free-OCR. The return text had extra linefeeds where the text wrapped. I had to run the copy through eCleaner to get rid of them. If you're unlucky enough to find yourself on a Mac, you can achieve the same result in Indesign by doing a find-and-replace: ^p^p replaced by ^p.
• Cometdocs, free online document converter. This free service includes an OCR function.

The Bank Card Tutorial For GDP 111

Click to see the video.

You should never, under any circumstances, distort text. Ever. Except sometimes. Look. This is the real world. Suppose that you must imitate a piece that your boss has stolen away from another house by undercutting its price. This other house, located high on a pedestal, would never distort type. Instead, they would fork out the $35 to $75 to purchase the face, and eat the cost. Your boss, on the other hand just says, make it work. Don't even think of asking him to purchase the face. So there you have it it. By the way, another trick that you should never use in a case like this is to give the bold face a thin white outline centered on the edge. This will knock the weight back a smidge toward the semibold that is called for in the spec. All of this is visual, so use your judgment. That's what judgment is for, and why you have it.

Resources:

• The PDF
• The Package

Further reading:

• Setting Indents in CS4, on the Adobe site.
• Creating a Reverse Indent, by James Fritz, on Indesign Secrets.
  

Map Mashup

Here is a cool map mashup showing the location of what was once an expensive piece of real estate in Santa Barbara. It's less expensive now--the value of the property, that is. The mashup tool from Zoomify is free. The blue line is a motorbike route between the property and the DAC.



You can also use this tool in the form of a Flash component.

See also:

• Wayfaring.
• Mapalist.
• Adding Custom Google Maps to Your Website, by Peter Steen Høgenhaug.
  

The single text box Flash Web site

The basic idea here is to create a single page that swaps in content from an XML file. The text content populates into a single text box that resizes according to the amount of text, with a scroll bar popping in for extra-long text. Content sub-elements are linked from within the content text. When you close a sub-element, the text box goes back to the point from which you clicked on the sub-element.

This is sort of a super-template. Change the images and the XML content, and you have an entirely different site. I was going to build a content creator to write the XML, but I have become discouraged by the abysmal implementation of HTML/CSS that has persisted in Flash since at least version 6. When the Text Layout Framework is implemented, this may all become a moot point anyway.

Speaking of Flash HTML quirkiness, here's kind of an annoying little glitch:

Note that the bullets turn the same color as the link color. Here's the code: <li>Dysfunctional Managers....<a href="event:2">read more&gt;&gt;</a></li> There is no CSS on the UL. The CSS for the link provides the blue. Who knows why Flash gratuitously colors the bullets blue?

Here is the link. All content is external. The app reads in a variable from the XML to hide or show the info button in the upper right. This button always links to a PDF document named information.pdf.

The XML is here. An external CSS style sheet is here. There is also internal CSS for the menu. The commented source code in the FLA is here. You can also just snatch the SWF, then change the XML, and if you want, change the CSS. Put all of your images into an images directory under the directory where you put the HTML, CSS, XML, and the SWF. Then you can use the app as your own. As usual, you don't have to credit The Curmudgeon, who is too old to care, anyhow.


See also:

• asfunction (TextEvent.LINK) Tutorial for AS3 | Flash HTML Link to call actionscript function, by Evan Mullins. I haven't looked closely at this tutorial; but it seems to cover the topic of firing functions from HTML links from within an AS3 app.
• Add mousewheel functionality on Mac OS.
• ActionScript 3 XML Basics - This tutorial shows how to use the new XML features in AS3 by creating a simple RSS reader
• FlashReplace: HTML Flash implementation.
• XML Pages with ActionScript 3: Create multiple Flash pages using XML. In the Flash movie, all the content and image paths have been defined in a XML file. I will first give you a short intro to XML, then we set up the Flash movie and finally, we add some ActionScript 3 to provide the functionality.
  

The Web Forms Exercise For MAT 113

The Web form that we will be building on Monday is available here as an un-styled page, and here as a styled page. The HTML is identical.

Web forms typically generate emails containing the form results that might go, for instance, to a sales department. If you fill out the form, then click "Submit," the script will return the text that would appear in the body of an email generated. A representation of that code is here.

The script generator is here.

Here's a little sort-of glitch that I came across constructing this lesson: I have the first name and last name fields set up to be required fields. At the same time, I have values entered--"First name" and "Last name." So, if the user ignores those two fields, the SPRY validation will not betriggered when the user clicks the "Submit" button. If I were hand-coding this, I would write a script that did something like, If the value for fName is "First name," then trigger the SPRY widget thingie to throw an error. However, I can't figure out how to do this with DW. Yet.

This semester, I'm styling the form with CSS to give an indication of how CSS can be used with forms. Of course, if I were making an actual form, I'd do it in Flash, which has magnitudes more functionality and flexibility than a plain old HTML form ever will. Just ask Jill.

See also:

• Creating Forms in Dreamweaver CS4, an EZ-PZ starter-offer, on Best WebDesgnz. Be sure to click over to the next tutorial on form validation.
  
• Dreamweaver CS4 Widgets. A video tutorial from Layers Magazine.
• How to Create a feedback form in Dreamweaver CS4, by Christopher Heng, on thesitewizard.
• Fancy Form Design Using CSS, by Cameron Adams, on Site Point. This is a thorough discussion of the finer points of creating and implementing Web forms, including styling and accessibility issues.
  

Further reading:

• Validate e-mail addresses using PHP--a very thorough procedure, on Soaptray.
• Form Validation--Make Sure Your Forms are Filled In, by Jennifer Kyrnin, on About.com
• All kinds of CSS Stuff for Web forms, from Web Design Reference.
• The Web Forms section of the Curmudgeon's Archives.
• The HTML5 specification for Web forms--just when you thought that you had this all figured out, everything changes.
• The Definitive Guide to GET vs POST, by Fahed Bizzari.
  

Class resources:

• files used in the presentation on Web forms.
• A tutorial on using the script generator, on youTube
• The same tutorial on Screencast-O-Matic
• slices example
• Jaclyn's page.
  
• Web galleries that you can use.
• An invisible button (on the smiley face).
  
• CSS-styled links.
  

The Archives Are Moving

Google will shortly cease supporting the file types used in the Curmudgeon's archives. And so, the archive is being removed to Freehostia. Some interruption may occur when you click on the archives, until the porting process has been completed.

UPDATE:
The files have been moved. Some minor anomalies have occurred. Please report any oddities that you encounter.