The Web Curmudgeon

Using The Pen Tool

2012-01-24T12:51:00.000-08:00

Here is a link to the old tutorial on the pen tool exercise for GDP 110.

Using SVG Images

2011-11-06T08:54:00.000-08:00

Clipart, logos, and letterforms in Scalable Vector Format can usually be imported into Illustrator, basically functioning the same way as AI files. Sometimes Illustrator will not recognize a particular SVG file for what could be a number of reasons, usually because of versioning issues. As time goes on and standards settle into place, this sort of problem should diminish.

Illustrator can also export to SVG format. This file format is primarily used on the Web. SVG is a text-based format derived from XML, interpreted by browser software to render an image. The XML literally describes the image to the interpreter. Another example of this sort of format is Postscript, which uses text and language to describe a page to be printed onto paper.

Because SVG is vector-based, it is resolution-independent. This means that images will not degrade at any screen size or magnification.

In searching for SVG clipart using Google, type in your search term this way: image: recycle logo svg. Then select "Images" from the context bar at the left of the page. Often, an image will be rendered in a raster format such as PNG. However, such raster images sometimes link to SVG versions. Not all browsers support SVG, although all so-called modern browsers do.

The "flower" logo shown above/left is a JPG rendering of the W3C logo for SVG. I originally obtained the SVG version of this logo from Wikipedia, creating the JPG version from that. JPG files contain text and binary data, meaning that they could, in theory, also be made to contain a hidden text-based vector version of the image being rendered. This is really only of academic interest to people with no lives. Speaking of which, the image here depicted does, in fact, have embedded text reading, "This is text hidden in a JPG file." If you open the file in a text editor, you will find that text at the end of line #1.

Embedding hidden text this way is a form of "steganography," but that is completely different subject.

The Postcard Exercise for GDP111

2011-10-11T22:51:00.000-07:00

The template for the postcard exercise is here.

A lot of students botch this exercise badly. You don't have to. Download the template and pay attention to the instructions/specifications. Then either place a PDF of your output onto the student layer of the template, or, if you haven't started yet, use the already set up layout to construct your card.

This exercise is to create a postcard for mass mailing. Chances are that you and most of the people that you know professionally will never use this skill. Junk mail is rapidly migrating to SPAM, and soon will become obsolete.

On the other hand, something about learning this process will imbue your soul with a kind of graphical awareness that will serve to enhance your creative dexterity. Or something.

The Squiggle Exercise for GDP111

2011-09-25T14:04:00.000-07:00

The finished template for the Squiggle exercise is here.

When you place this PDF over your own work, be sure to transparentize the layer down to about 67% to see your own work. By far the hardest part of this exercise is making the squiggle weave in and out of the shapes.

Long-story-short on the squiggle line: If you make your stroke 9pt, and click the attributes boxes the way they are done in the instructions, then when you use the scissors tool to cut the segments, they will snap into the same shape as those shown in the instructions. When you first select the wavy line, the periods of the waves will look wrong. Just ignore that and proceed. Then it will be a simple matter of using the arrange dialog to position the segments in front of and behind the shapes.

The "Lost Road" Exercise for GDP111

2011-09-25T13:30:00.000-07:00

The "Lost Road" template is here.

This template was created in Indesign according to the document setup instructions. The background image was placed onto the bottom layer, and the PDF from the instructions was then placed onto a layer above that, and then nudged into place. This is why you can see the drop shadow in the crop area.

And, BTW, disregard the border that shows at the finished edges. That also is from the PDF in the instructions.

Because this poster has a texture printed onto the background, you must necessarily export it with printer's marks and document bleed settings turned on.

Another hint: If the instructions do not include the text, you can extract the text from the PDF, usually just by copying and pasting. You should never ever ever re-type something that has been typed by someone else already. To do so is completely Medieval.

Chapter 6, The Bank Card for GDP111

2011-09-24T21:37:00.001-07:00

An old tutorial from 2009 on the bank card is here.

This tutorial contains a PDF, an Indesign file, and a step-by-step video. The video is a bit rambling, but the guy making it is actually doing the finished exercise.

Talk about spoon feeding.

o7 Raffle template for GDP111

2011-09-24T20:09:00.000-07:00

The template for the raffle tickets is here.

In the past, students have had more trouble with this exercise than any other.

After studying the instructions, pay close attention to the template. Notice, for instance, the perf line crop marks, and how none of the crop lines actually extend into the image area. Also. be sure to put the crops in registration color. The template may or may not have them displayed as such. But you will be graded down if you don't.

Note also that the fold line does not extend across the page, It must be in the bleed area, and not touch the image area. The instructions are misleading on this point, as they show a dotted line running across the page.

Ask questions as you go through this exercise.

And do not hand in something that looks different from the template.

Chapter 7 Firefighter Poster

2011-09-24T19:52:00.000-07:00

The finished template for the poster is here.

In this exercise, if you follow the instructions carefully, you should be OK. Be sure to bleed the axe handle off of the page.

Place the downloaded PDF over your own work. Line up the crop marks with the bleed and page. Then go to Options>Effects>Transparency, and drag the slider down to 67% opacity.

In this case, the elements may not line up exactly, as you will be making the piece from scratch. Your body copy, however should match exactly.

Be sure when exporting to show all printer's marks and to use document bleed settings.

The Beach Ball exercise for GDP111

2011-09-18T17:48:00.000-07:00

The beach Ball exercise is here.

The Family History Exercise for GDP111

2011-09-18T16:22:00.000-07:00

The template for the Family History exercise is here.

I did this exercise myself once. I put the PDF onto the second layer, with the text book's version on the top layer. You can compare the two. Mine is slightly off. I don't recall why. However it is well within the tolerance allowed for a piece of this nature. So, you can get an idea of how far off you can be.

The Lincoln Exercise For GDP111

2011-09-15T11:10:00.000-07:00

The finished template for the"Lincoln" exercise is here.

The text that accompanies your work files is contained within a .DOC file. If you can't open this file, upload it to Google Docs. Then copy and paste the text.

This template hasn't been transparentized. So, go to Object>Effects>Transparency, and run it down to about 65%.

The Anna Sanchez Exercise For GDP111

2011-09-15T10:33:00.000-07:00

The "Anna Sanchez" exercise finished template is here.

A couple of hints: Give your a page a bleed of about a quarter inch. This is where your fold lines should be. No part of the dashed line should extend onto the actual finished document. And it should be in registration color. You will have points deducted for putting them in black.

If the instructions are unclear, phrase a question in plain English about the problem and Google it. You will be surprised how many times doing this for such problems will yield explanations in the first return.

The text within the yellow bars got mangled when I extracted the piece from the student handout. So, you're on your own there.

The "Monster" Exercise For GDP111

2011-09-15T07:40:00.000-07:00

The finished template for the "Monster" exercise is here.

Follow the same procedure as for the "Teacups" exercise.

You can also use these templates while constructing your page. To do this, place the template onto a layer beneath your working layer. Then select "All" in your working layer, and run the transparency down to about 50%. You can then compare your work to the finished piece as you go along.

The Teacups Exercise For GDP111

2011-09-14T21:31:00.000-07:00

The template of the finished artwork for the Teacups exercise is here.

Create a new layer above your work. Place the PDF of the template onto this new layer. When placing the PDF, lock the other layers to insure that you don't accidentally place it onto another layer. Check "Show import options." Then click "Open."

A new dialog box will open. In this box, select "Media" for the "Crop to" selection, and check "Transparent background." Click "OK."

Your loaded cursor will show on the page. Click once anywhere. The full page will then pop in. In your positioning dialog--usually in the header section of the page, to the left--click 0n X-0 and Y-0. This should position the template directly over your work. And it should have 65% opacity so that you can see your work underneath.

If your work looks reasonably the same hand it in. Otherwise correct it.

The Wedding Invitation For GDP111

2011-09-09T06:57:00.000-07:00

If you have already started this assignment, you can download just the PDF of the finished piece here. Place this onto a new layer in your working Indesign document, above all of the other layers. Be sure to select "Media" as the cropping option. Then select for the top left position of the PDF X-0 and Y-0.

Otherwise, you can do this work from the full Indesign file provided here. The image is already in place, and the raw text has been placed onto a separate layer.

See the "Teacups" exercise above for a fuller explanation of placing the finished template.

The Desserts Menu For GDP111

2011-09-08T20:55:00.000-07:00

The Desserts Menu exercise template is here. Put your own work on the layer labeled "Student." You can reduce the opacity of the template layer to compare what you have done to the template. Do not hand in anything that is not exactly right.

I made a video of an exercise that you will do later this semester here. You may find watching this tutorial now useful, because it shows how to make a template yourself. Plus you'll be a step ahead when you have to do the exercise.

The Expert exercise for GDP111

2011-09-08T10:33:00.000-07:00

The template for the "Expert" exercise is here.

This template includes an Indesign file with some of the text filled in. You can do your work on the bottom layer, and then check the template which is at 50% transparency on the middle layer to see if your efforts are correct. On the top layer, you can check out the sample text to see what settings produce the correct results.

Do NOT enter the text by typing it in. Time spent typing is deducted directly from Happy Hour. Valuable cocktail hour time is forever lost when you enter text that someone else has already done. A sobering thought. Instead, copy the text from the PDF in your student handout, and then paste it into the text box that you have created in Indesign.

The Reedy Exercise for GDP 111

2011-09-05T21:25:00.000-07:00

Students often have difficulty sizing the border for the Reedy exercise. Here's a quick tip. The box is 2" by 3" with the dots aligned to the inside.

For Reedy, I have created the first of a number of templates for you to check your work. These will save you loads of time. I have uploaded the template here.

After you have downloaded the template, create a new layer in the Indesign document that you are preparing for the Reedy exercise. Put this layer below the layer holding your 2" by 3" box. Place the template, a PDF file, on this layer. Align your box with the outside of the dots in the template. Now when you work on the creation and fotmatting of the text, you can compare what you have to the template.

Do not hand in the file until your work matches the template. Be sure to hide the template when creating your finished PDF file.

The Illustrator Exercise in 110

2011-08-25T11:01:00.000-07:00

Here is a link to an old tutorial on the reversed arcs exercise for Illustrator. Learn this and you get the bonus of having learned the same thing in a number of other Adobe applications, including Indesign and Photoshop.

Solving The Caps Lock Problem

2011-07-28T14:24:00.000-07:00

See Also:

Neuter the Caps Lock Key with Handicapslock
This on Hak5

Doomsday

2011-07-25T13:47:00.000-07:00

My system died. Yours will too. This prompted me to seek cloud storage. I found one site that gives you 7GB free, with auto-backup, and another that gives you 50GB free, apparently w/o auto-backup.

UPDATE The auto-backup conflicted with WAMPP, giving me odd and misleading error messages. I've offloaded it rather than solve the conflict. If you don't use WAMPP, you will likely not have a conflict.

Here's my theory: I keep current work in a single subdirectory. I have an archive directory that contains everything that has been in the current work directory, but has been completed. This directory is about 9GB. I zipped this directory down to about 6GB, and stored it on the second site.

In the meantime, the first site does auto-backup of my current work directory. As I approach the 7GB limit of this site, I'll begin to remove work to the archive directory. Then I'll zip and store it on the second site.

When my machine died, I still had all of my data on two HDDs, but it took me a while to retrieve it. This is because both drives were in the same machine. Literally minutes after the failure, I needed access to the data on those drives, but I couldn't get it immediately. I might have stored the redundant backup on an external drive. But even that might fail in, for instance, the kind of disaster that brought a wildfire within two blocks of my residence last year.

One other hidden benefit of the failure of my machine besides the fact that the replacement is faster and more up-to-date is that I have replaced all of the programs that I use with the newest versions.

SEE ALSO:

These older posts on file management. Note that this posting is shown at the top.
EaseUS TODO Backup. This may be an even better solution. However, I have not tested it. I do not see a file size limitation listed. I wonder.
Symform. 100GB of free backup if you allocate 150GB of your local storage capacity to a distributed system of data storage. I didn't go for it because I did not want to take the time to discover what I might not like about such a system.
Cloud Experience. 10GB free.
uploadingit.com. 10GB free.
Drops, unlimited storage. No more limits on file storage, only 50 Mb limit per one file. Untested by The Curmudgeon, because who has time?

WARNING About HTML Email

2011-05-06T19:24:00.000-07:00

I have a number of Web forms that return emails via PHP scripts. In the case of an ecommerce site, the script puts the details of the order into an HTML table that the client can print out nicely.

A problem arose when orders came in with randomly placed bang (exclamation mark !) characters in the latter part of the message. I could never duplicate the problem, nor could I find a definitive explanation for it.

Today, I Googled the problem yet again, getting back an explanation in the first return.

It turns out that an email transmission cannot have a line exceeding 998 characters without a line break. My table quickly filled up that quota with <tr><td> kinds of things, until, when the table got down to the end (the part where I was having the problem), it had exceeded the 998 characters.

To solve the problem, I put a \n character somewhere in the middle of the string that creates the table. Of course, the HTML parser ignores this line break, but it apparently satisfies the email specification.

Orders are now coming in without the random bang characters.

PDF to Epub via Indesign

2011-04-17T22:54:00.000-07:00

In some cases, an EPUB will display better than a PDF--for instance, on an ereader. An EPUB is essentially an HTML document, and so it will reflow nicely at different window sizes.

You can make an instant conversion of PDF to EPUB using a number of different applications. A very good one is the Opensource program, Calibre.

A PDF is often formatted for a larger sized output. You may want a bit more control over the way in which the document displays at smaller sizes such as on a cell phone.So here's a step-by-step that worked for me. YMMV.

1. Export the PDF to a MS Word DOC file from Acrobat. This file will crash Indesign CS5, as will an RTF exported in the same way. So upload the file to Google Docs, then download it as a MS Word DOC file. The downloaded version will not crash Indesign. (Go figure.) If you don't have Indesign, you can open the document in Word directly from the PDF. You can probably get to EPUB from there, but I've never tried it.

2. In Indesign, create a document that is approximate to the size of your reader. Be sure to include as many pages as you will need, and click off of "Facing Pages."

3. Place the DOC file, selecting "Show Import Options." Hold down the Shift/Alt keys (PC) or Shift/Option on those funny computers.

4. Click in the upper left hand corner of the margin guide on the first page. The text will magically fill the document. Check to make certain that everything came in as expected, and make whatever adjustments that may be necessary.

That's it. You're done.
___________________________
SEE ALSO:

The Alkido Reader. This app works great for displaying EPUBs on my Android phone.

Creating A Directory on the Server

2011-04-15T14:00:00.000-07:00

This exercise takes a string that is an absolute path to a proposed directory structure, then (1) tests to see if the directories exist in the current path, and if they don't, (2) it creates them, setting the permissions to read/write. Otherwise, it moves on. I had to figure out this little bit in order to be able to make directories in the Creating a Grading Rubric Exercise. The script, fully commented, is here.

This exercise points out an important aspect of creating a Web application: Things should pretty much just work without requiring a lot of thought. No dialogs, and few, if any, instructions. In this case, you enter the path where you want the output to go, and the script either puts the stuff there, or it creates the directories, and then puts the stuff there.

And then there's the pitfall. What happens in unexpected cases, for instance, where the user doesn't have permission to create directories, or that other big one, the one that nobody ever thought of? This is why we have updates.

Hey! It works on my machine.

Table Data Creating Another Table--beta

2011-04-07T13:07:00.000-07:00

This exercise is a study in content management using JSON, jQuery, and PHP.

The best way to get a quick overview of the functionality is to click the example links below.

The idea is to create a grading rubric in the form of an HTML table on a Web page to be used by an instructor to grade individual student assignments. The new page containing the rubric, then, will output and write individual grading files to the server.

The first part creates the grading rubric. The data generated in this process is then written by PHP as a JSON file, and stored on the server

The working grading page uses jQuery to populate in the content data from the JSON file.

The page that creates the rubric is located here. This page has as subsidiary files, setupRubric.js, a jQuery fie, and grading111.css. When the instructor creating the rubric submits the form data, a PHP file, createJSONrubric.php, puts all of the form data into a JSON file, an example of which is located here.

The actual grading page is populated from the JSON file. The grading page is here. Subsidiary files include the same grading111.css used by the rubric creation page, and the jQuery file, grading111.js.

An example of the final output, what the student receiving the grade would see, is located here.

All of the code is commented. Please note that the deployed code that actually writes the JSON files has been commented out to prevent readers from creating files. The code is here.

The Postcard Template

2011-03-27T16:17:00.000-07:00

A template for the GDP 111 postcard exercise is here.

A Blinking Gallery

2011-03-10T19:18:00.000-08:00

No reasonable person would want a blinking thumbnail gallery. On the other hand, this example provides a great exercise in CSS positioning with jQuery.

The thumbnail images are contained within an unordered list, and then re-positioned by means of the script. The images in the example are placeholders in the form of GIF images of numbers.

A setInterval fires off a function that randomly transposes the images one at a time. It sort of looks as if images are being added, but the existing images are simply being shifted around.

All of the code is commented--JavaScript and CSS/HTML. Here's a zip containing everything.

Chapter 7 Exercises

2011-03-02T12:28:00.000-08:00

Here's a link to the Poster template. And here's one to the raffle ticket.

CH 6 The Bank Card and Squiggle Assignments

2011-02-23T15:03:00.000-08:00

Here's a link to an old tutorial on the bank card exercise. This link contains a video tutorial on creating the bank card, as well as a template for setting up the document, and an example finished PDF of the assignment.

Here's a link to the template for the Squiggle Assignment.

GDP 111 Woes UPDATED FOR CH 5

2011-02-17T12:12:00.000-08:00

Chapter 6, the bank card and Squiggle Assignment, is the next post up.

For some reason, nobody has used the Cheating With Indesign method, with the result that the work being turned in is something less than totally wonderful. So, I'm making another attempt. This time, I've zipped my Indesign grading template for Exercise #2 here, for #3 here, and for #4 here.

After you've finished the exercises, place your PDFs into these Indesign files. Move your work into place under the semi-transparent layers containing the examples. Then compare. If yours doesn't match up, you have dome something wrong.

For the "Expert" exercise, I have provided a couple of lines of text above the example layer to demonstrate using leading and space-after to achieve the proper vertical spacing. By the way, I was able to match the horizontal spacing by using tracking and kerning. Horizontal spacing is not critical to this exercise, so don't be concerned about it. But if you're interested, you can find a quick little video tutorial on the subject here.

Chapter 5b is now available here, 5c here, 5e is here, and 5f is here. The text for with the proper tabbing for 5b is contained in the folder. You can get the others by copy/paste from the PDF student handout. Do not type the text in. Time that you spend typing will be deducted directly from Happy Hour.

The 5b exercise is tricky. Be sure to use the template so that you can compare your work as you go along. I have included a layer with a version that I created myself. You will see that you can get pretty close to the example. If yours does not line up, you have done something wrong. Correct it before you submit it.

5d, located here, is not required. However it presents a number of interesting challenges, not the least of which is a set of vague instructions. Because 5d is optional, I have included in the package the full INDD document for the completed assignment so that you can see how it was done.

Cheating With Indesign

2011-01-26T19:21:00.000-08:00

A lot of the Indesign assignments that you will undertake come with embedded PDFs of the finished product in the student handouts. Even images and diagram can be helpful if they are to scale. You can usually right-click on images to save them to your computer's hard disk.

When setting up the Indesign document, you can place the PDF or image that you have captured on the bottom layer, and then use it as a template to construct your finished piece.

An example of using this method is located here.

For the most part, I have posted Indesign packages for the grading templates that I use for these assignments. Captures that I have made are contained in the packages.

Indesign Tabs and Tables

2010-09-15T14:22:00.000-07:00

NOTICE: The Tabs and Tables Assignment Due date has been postponed for a week, and will not be due until the week of September 27th.

Below are listed very good tutorials on using tabs and tables in Indesign.

Tabs:

If all else fails, RTFM.
A tabs tutorial on Indesign Secrets.Com.
A video tutorial on Creative Mentor.Com.
How to Create "Leader Dots" with InDesign, on Youtube.
Terry White, a great Adobe evangelist, on tabs.
Creating tabs on Creative Curio.

Tables:

If all else fails, RTFM.
An excellent video tutorial by Anne-Marie Concepción from Lynda.Com.
Table styles from Adobe's Terry White, the go-to guy on Indesign.
A step-by-step by Jacquelin Vanderwood on creating a table from tabbed text, on Designer Today.

Reversed Arcs in Illustrator

2010-09-05T11:41:00.000-07:00

Here is a quick little demo of the reversed arcs exercise, using the pen tool in Illustrator.

Quik 'n Dirty Tip of the Day
Getting artwork that you can use from the Net

Don't create artwork that already exists in a form that you can use. A lot of material that is in the public domain is available as vector artwork on the Net in SVG format. The best source for logos and symbols is The Wikimedia Commons.

Say, for instance that you must use a recycling symbol in a piece for print. Type "recycle SVG" into Google. The first return will be for Wikimedia Commons, having the title, "File:Recycling symbol.svg." The page will display the green circular arrow symbol. Right-click on the graphic, and select "save link as." (Your browser may do this in a slightly different way. This is how Firefox does it.)

Your saved file will be a SVG vector file that can be opened and saved in Illustrator. You can place the saved Illustrator file into Indesign. Avoid using JPGs, for line art, as these are almost always aliased, and will look fuzzy. Also, JPGs usually don't upsample well. Sometimes they do, but don't count on it.

If you can only get a bitmap, submit it to Vector Magic, the best raster-to-vector utility on the Web. For line art, this online tool is is magnitudes better than anything that you can do using Live Trace in Illustrator.

Remember: Time spent spinning your wheels is deducted every day from Happy Hour.

See also:

All Free Logo.com, a library of logos.

More on Backup

2010-08-23T14:12:00.000-07:00

This morning during class, I was able to work directly on my home machine via this nifty, free app. The app does a remarkably good job, and is worth a look. Here is a link to the quick start guide.

I also recently found a Web service, also free, called Home Pipe. This app allows you to access files directly from your home machine--handy in cases where you forgot your homework.

Otherwise, click here to display underneath of this post older posts on this topic . These posts contain other backup methods. And remember, never use a jump drive or any other external medium to transfer files. If nobody uses these devices this semester, perhaps this will become the first ever class in which a student didn't lose something important, or even all of his files, because of a lost device.

Never mind. Someone has already lost his jump drive.

Maybe next semester.

Quik 'n Dirty Tip of the Day
How I made the logmein logo shown above.

This sort of thing happens frequently: You have to reproduce a logo or letter face where you don't have either the font or the artwork.

I snagged the logo shown above by searching Google Images for the name. Unfortunately, none of the returns had the tag line, "Simply Connected." (Note that the tag line should show a SM.) I saved a selected image, then opened it in Photoshop.

For the tag line, I uploaded the logo to What The Font, a site that returns the names of fonts based on scanning images of characters--in this case the logo. The name, Info Disp Bold Tf-Roman was returned. A quick check for a corresponding knockoff font returned nothing.

What The Font has an input text box for creating sample text in the face. So I typed in the tag line, took a screen shot of that, and brought it into Photoshop. I put the image of the text onto a new layer, and then sized it down.

Finally, I exported the combined image to JPG, and uploaded it to the blog, where you see it now.

This method is not suitable for print, as the edges of the characters have been aliased. However, with the advent of HTML5 and vector @fonts, the method may have a future in print as well. Whether or not print for publication is still around when this happens is questionable.

jQuery

2010-07-13T10:33:00.000-07:00

jQuery is the foremost JavaScript framework on the Net today. It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Here is the best way to dive into jQuery:

Watch the video series, jQuery for absolute beginners on lost in the woods.
Watch Ben Nadel's intro video. And check out the awesome source code for the page.
Get the book, jQuery Fundamentals by Rebecca Murphy.
Get the book, jQuery From Novice To Ninja, from Sitepoint. It is a PDF.
Download the example files, then open them in Dreamweaver. Follow along with the book.
Keep a tab open in Firefox containing Visual jQuery, a visual reference for the framework.

See also:

Simplify Ajax development with jQuery: Discover how easy Ajax and DOM scripting can be, byJesse Skinner, Web Developer, on The IBM Technical Library.
jQuery in Action, by Bear Bibeault, Manning Publications; 1st edition (February 7, 2008), in PDF format.
The Curmudgeon's 1st JSON exercise. The code is commented.
The Curmudgeon's 2nd JSON exercise. The code is uncommented, but the JSON is interesting, because it carries a lot of markup that would have to be wrapped in CDATA in an XML file.
Either take university classes or follow CSS Tricks. Doing both would be overkill.
JSON Basics: What You Need to Know, by Matt Doyle, March 2011

Web Form Script Generator For MAT154

2010-04-18T17:49:00.000-07:00

New this semester is a script editor. With this application, you can modify an existing script that has been generated by the Cinch Generator. Formerly, you would have to create an entirely new script to modify even a small element.

Stay tuned for an advanced look at the tutorial for Thursday's class.

The script generator is here.

Text On A Path & Isolating Image Elements

2010-02-16T22:43:00.000-08:00

Two excellent resources to review text on a path:

Adobe's Creating Text On A Path.
A video tutorial by Deke McClelland.

Isolating parts of an image in Photoshop:

Improve the quality of your selections by first training the Quick Selection Tool. This simple technique shows you how to make better, more accurate selections in half the time, on Photoshop for Digital Photographers.
Create a temporary quick mask, on Photoshop Product Support.
Extract an object from its background, on Photoshop Product Support.
Change pixels to transparent with the Background Eraser tool, on Photoshop Product Support.

Preserving Class Work--OOPS!

2010-01-27T10:55:00.000-08:00

The best way to move files between school and home is to use a cloud-based application. Older, cloud-based resources for moving and storing files are referenced here.

But BE CAREFUL! This service, Startforce, suddenly cut me off, having moved from a freemium to a pay-only service. If I had counted on having access to my files, I would have been SOL.

NOTE: Do not use a jump drive to move your files. The best outcome that you can expect from this method is that you will not lose the drive. Every semester I find several of these left plugged into computers. Use one or more of the online applications--preferably two, giving you a redundant backup.

Indesign users should not forget to package their files.

Web Forms for MAT 153 (Updated)

2009-12-04T07:12:00.001-08:00

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

2009-10-16T10:53:00.000-07:00

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.
OCROnline.
Free Online OCR: performed well testing a jpg of a page at 300ppi.

The Bank Card Tutorial For GDP 111

2009-10-11T20:15:00.000-07:00

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. Be careful doing this. Some fonts work better than others. You may have to take the text into illustrator, create outlines, and then work on it there. Obviously this method would not be suitable for body text.

All of this is visual, so use your judgment. That's what judgment is for, and why you have it.

Resources:

Map Mashup

2009-10-01T15:11:00.000-07:00

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.
Scribble Maps is the quick and easy way to rapidly make and share maps! With Scribble Maps you can:
- Draw shapes and Scribble!
- Pace Markers and text
- Create a Custom Widget
- Save as KML/GPX
- Send maps to friends

The single text box Flash Web site

2009-08-17T16:42:00.000-07:00

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>></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. Another implementation is here.

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 H TML 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.
Loading XML Data Using ActionScript 3.0, on Republic of Code.
CSS styling a Flash dynamic website Actionscript 3.0 html Text tutorial CS3+4, on DevelopPHP.

The Web Forms Exercise For MAT 113

2009-07-09T11:58:00.000-07:00

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.

The Archives Are Moving

2009-06-27T08:04:00.000-07:00

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.

Preserving Class Work

2009-06-21T16:09:00.000-07:00

Two quick and simple Web-based file upload utilities provide good alternative methods to using a jump drive for transferring files back and forth from school to a home computer.

If you have properly defined your site at school, all of your work files will be contained within a root folder. Find this folder on your computer under "work." Right click on it, and then select the option to create an archive. A zip file will be created, having the same name as that of your root folder. You may then send this zip file to yourself over the Net.

The easiest of these file transfer sites is called mailbigfile. After the mailbigfile Web page opens, enter your email address, then upload your zip file, using the file picker. An email will be sent to you with a link to your stored zip file. Be sure to download the zip file as soon as you arrive home, because files are deleted after a couple of days.

Another good service is called Dropbox. This service provides up to 2GB of free online storage so that you can use it as a backup for your projects as well as a means to transfer files. Your Dropbox account is accessible from any computer connected to the Internet. These files are never deleted by the host. Dropbox acts as a virtual hard disk drive, but located on the Internet instead of on your local computer.

If you save your zip files after unarchiving them, you will have a good backup of older states of your project.

See also:

This older post.
filesovermiles, a p2p file transfer site.
TeamViewer, and LogMeIn, two outstanding commercial remote desktop applications that are free for non-commercial use.
Soonr.
File Dropper.
Badongo.
Mediafire.
WeTransfer.
A list of more on MakeUseOf.
filevo.

The SPAM-O-LATOR is now in Beta

2009-04-28T20:26:00.000-07:00

The SPAM-O-LATOR broadcast email generator is now in Beta. The first batch of emails was sent out, with a 50% rate of rejection--presumably by SPAM filters. The Web Curmudgeon Foundation, developer of the application, joins Craig's List and The Pirate Bay in taking no responsibility for the way in which the software they develop is used.

The SPAM-O-LATOR is being developed in Flash CS4, PHP, and MySQL. The application parses an LDIF file, pulling out the names and email addresses, then populates these into a table. Next, it uploads an HTML file to a server. This file comprises the message to be sent. Contained within this HTML file is a tag . The PHP script regexes out this tag, and looping over the database, replaces the tag with the first name of one of the entries in the database, thus creating the illusion of personalization. It next writes the headers, mails out the file, and then goes to the next name.

After the SPAM-O-LATOR got caught is a SPAM filter, it was modified to send out multiple mails within specific domains at intervals. The user enters a time interval. Multiple emails to that domain are stored in a list, then sent out one-by-one at the timed interval specified.

Beta testers are welcome. Please contact the Curmudgeon by using the form at the bottom of this page, or by IMing him using the chat badge in the upper right part of the page.

See also:

20 Email Design Best Practices and Resources for Beginners by Matthew Kirk, on net tutes+.

FormMail Script-Generator Update

2009-04-18T12:10:00.000-07:00

The Cinch-O-Matic PHP script generator for Web forms has been updated in Flash 10. Rather than using a clunky round trip to the server to generate the PHP script, the application now writes the file directly to the local hard disk.

Further reading:

A tutorial on youTube.

De-dforking a Mac Font

2009-01-27T20:45:00.000-08:00

UPDATE: I just got a dfont that Win7 won't recognize after the conversion described below. For now, I'm going to let this go, because I have too much to do. But the solution--a big hassle that involves installing FontForge and a Linux emulator on my machine (forget that)--is here.

I got an Indesign package from a client with a curious file in the fonts folder that had the extension .dfont. When I opened the INDD file, I got a missing font notice for that face. Whereas the OT fonts went right into my Windows font folder, the dfonts were thrown out faster than Rush Limbaugh getting ejected from an Earth Day celebration.

After scaring my dog with an outburst of invective about Macs, I went to Google to find out what a dfont is. Long story short: it's a tricked-up TrueType font put into a kind of file called a data fork. This I found after two or three clicks on the Google return for the query "dfont Mac." Regular computers can't use these fonts.

Next, I Googled "convert dfont to windows font," which yielded a lot of commercial font-conversion software. I recently gave all of the money I had to Adobe, with none left for any more commercial software. I clicked through a number of these returns until I came upon DfontSplitter, an open source application that converts Mac dfonts into normal TrueType fonts.

I downloaded the application, installed it, converted the offending font, re-opened the INDD file, and found no warning for that particular face. Of course, there were a lot of other issues, but nothing a few clicks around Google couldn't resolve.

WARNING

Just as Rush Limbaugh and the security guards at the Earth Day celebration might not see eye-to-eye about how things should be, so too with a converted font on a different operating system. Your best bet here is to make a PDF of the output for your client to examine to be certain that the font is behaving properly.

Transition To A New Machine

2008-12-31T19:35:00.000-08:00

EASIER THAN BEFORE

I have a new PC. All of my work files are on my old PC. The CS4 is on the new one. The old machine has Vista Home Premium; the new one has Ultimate. So, I've linked the two on a local network using my wireless Linksys.

This way, I can run the new machine from the old one as if it were a part of some sort of dual computer. The new machine shows up on the old one with very little latency or resolution degradation. I can tab back and forth between machines.

I am gradually moving directories over from the old to the new machine as I install more apps such as WordWeb, and all of the plugins for FireFox that I had been using .

This is proving to be the best and easiest transition that I have ever made.

The Image Gallery Updated

2008-12-28T14:33:00.000-08:00

ANOTHER UPGRADE COMING SOON
The image gallery has been updated with commented source code. Additionally, the gallery has been changed so as to allow for portrait and landscape formats. Also, a few bugs have been worked out, and the number of images allowed has been increased from 10 to unlimited.

I am constructing a utility that will allow the user to format, crop, caption and upload images as well as edit those previously created.

Downloading Free Fonts For The PC

2008-11-14T19:28:00.001-08:00

Here's a quick demo on how to find and download free fonts for the PC. The example font is Cicle, available for free download and use from daFont.

See also:

The CorelDraw Font Finder
Installing Fonts in Windows, on fonts.com.
50 Incredible Fonts for Professional Web & Print Design, on noupe.

Indesign Tutorial on PDF Separations on a PC

2008-11-10T20:06:00.000-08:00

The new tutorial on how to print out separations to PDF from Indesign on a PC is here.

See also:

A tutorial on printing fold and crop marks to PDF.

Get Free Vector Graphics From Google

2008-11-05T09:49:00.000-08:00

Steps:
1. In Google, select "Images," then enter a description to characterize the graphic that you seek.
2. After the description, enter the term vector.

3. For size, enter "All image sizes."
4. The results shown will be raster representations of the vector art. In some cases, the results will be irrelevant. Click on an image that you want. A Web page will pop up that has the image on it. In many cases, the page will contain a link to an EPS, AI, or SVG file of the art. Check the licensing. Usually the image will be free to use.
5. If you cannot find a link to a vector file for your image, try again with another.

See also:

Tutoring Schedule

2008-11-02T13:53:00.000-08:00

The Google Calendar for my tutoring schedule is located here.

YouTube tutorial on master pages.

Source Code For The MailForm Script Generator

2008-08-26T21:15:00.000-07:00

The Cinch-O-Matic is a Flash application that takes the URL for a Web page on the Net, pulls out the form elements for a mail form, and then writes a PHP script to process the form. The resultant script is then downloaded to the user's hard disk.

The source code for the Cinch-O-Matic is available here. An overview of how the program works is archived here. The program itself is deployed here.

Keep in mind that this is still in beta. Updates will replace the current files.

This application is probably more typical of how most software is written than of how it should be written. In other words, it is a hodgepodge.

The motivational idea was to write a simple mail form script generator for students first learning to use Web forms. Minimal knowledge of server-side scripting on the part of the students would be required, as well as minimal input on their part.

I believe that this original idea has been realized in the application. However, during development, I encountered a number of unanticipated situations that required patchwork fixing. For example, I forgot that elements such as checkboxes could have the same name, with a number of values returned in an array. Also, when I started out, I failed to account for the effect of non-PHP scripts on the application. The result is that I have patched in a series of widget-like functions, toggles, and whatnot to remedy these things.

The code is largely commented. Some of it nearly defies explanation. But, hey! It works.

You have been warned.

Fire a function from an HTML text link in Flash

2008-08-02T22:10:00.000-07:00

A new mini-tutorial is up here on firing a function from within an htmlText link in Actionscript 3.

Form Error Checking for MAT 113

2008-07-11T14:33:00.001-07:00

Besides embarrassing the Curmudgeon in front of the entire class, failure to implement error checking on a Web form can present serious problems for users as well as site owners.

In the fire alarm example we went over, the only error checking on the form was to compare the two entries for the phone number, issuing an error message if they were different. This meant that if both entries were left blank, no error message would be generated; indeed, the user would receive a thank you message.

Of course, the Curmudgeon immediately ran home after class and fixed the form. The process took a while, while at the same time offering a good example of the sorts of questions raised by a Web form. Here is a snippet of the corrected code as it pertains to error checking:

Skip over the code mumbo jumbo

if (nameBox.text=="") {
errorMessageIns.errorText.appendText("No name has been entered. \n\n");
}

if (phone1.text!=phone2.text&&phone1.text!="") {
errorMessageIns.errorText.appendText("The two numbers do not match. \n\n");
}
if (phone1.text==""&&phone2.text=="") {
errorMessageIns.errorText.appendText("Please enter a phone number. \n\n");
}

if (foneLen<=6&&phone2.text!="") {
errorMessageIns.errorText.appendText("Please enter an area code along with a valid phone number.");
}

if (foneLen>=6&&foneLen<8&&phone2.text!="")>
errorMessageIns.errorText.appendText("Please enter an area code.");
}

Five possible errors are addressed in the corrected form. The first, nameBox.text=="", covers a name space left blank. That's the most you can do with such a situation. You can't spell-check a name.

The second, phone1.text!=phone2.text&&phone1.text!="", covers a typo in one of the two fields for phone number. What this line of code covers is a case where, If the text in the two phone fields do not match and the text in the first field is not left blank. In this case, as error message is generated.

The third, phone1.text==""&&phone2.text=="" is a case where the two phone fields have been left blank, generating an error message.

The fourth, foneLen<=6&&phone2.text!="", says, if the length of the phone number is less than or equal to six characters, and the second phone number is not left blank, an error message is generated. foneLen is a variable from elsewhere within the code, holding the number of characters entered into the first phone number field. Anything less than six cannot be a valid number. At the same time, we don't want to present this error message if the user has not entered anything into the second phone number field, which error has been covered in the previous case. Having both error messages showing would look stupid.

The fifth, foneLen>=6&&foneLen<8&&phone2.text!="", says, that if the phone number is greater than or equal to six characters but less than eight characters, and the second phone field has not been left blank, an error message is generated. In this case, the area code would be missing from an otherwise valid phone number.

The most important function of error checking is to ensure that all of the pertinent information is collected. A thank you is not generated until a valid submission has been made. At the same time, and of slightly less importance, is avoiding awkward error messages. If one of the phone number entries is valid while the other is blank, then an error message saying that the two fields must match, while not wrong, implies a certain inelegance in the coding.

In the case of the fire alarm, error checking is done with Actionscript within the Flash form. Other kinds of error checking are done on the client side by Javascript, such as SPRY web forms created with Dreamweaver. Error checking can also be done by a server-side script such as PHP.

It would require a sophisticated code generator to create the kind of error checking necessary for a phone number. Perhaps someone out there has thought of one. Most code generators use regular expressions to check for things such as a missing @ symbol in an email address. It is, however, quite likely that a custom Web form will require a custom-tailored script with error-checking to process it.

See also:

The SPRY For Web Forms section of the archives.

Form Script Tutorial for MAT 113

2008-07-08T11:49:00.000-07:00

FORMS are a way for Web site visitors to send data other than requests for display to a Web server.

For the purposes of out tutorial, we are going to ignore Dreamweaver entirely, looking instead only at the code. We will be making an email form--that is a form that generates an email containing the information submitted by the user. This email will be sent to an address that is put into the script.

When the browser parses HTML and comes to this string of characters, <form action, it is configured to interpret the rest of the code as part of a Web form until it reaches this string of characters, /form>.

The first part of the form contains administrative information telling the browser where to send the information, and by what method. Unless the Web server is configured otherwise, the name of the script file that will process the data must be at the end of URL. Two methods are commonly used to encode the data: GET and POST. GET encodes the data within the URL string, and is good only for short amounts of data. The POST method sends data within the body of the request. Normally you would have to configure this part of the form. However the method used in this tutorial will do that for you. The code shown below demonstrates the way you would usually code the form.

As with images, the URL for a Web form may either be relative to the Web page or be an absolute, or full, URL. In the code shown below, the URL is for a script called, form_handler.php.

<html>
<body>
<form action="form_handler.php" method="post">
Your Name: <input name="user" type="text" />
<br />
Your Email: <input name="email" type="text" />
<br />
<input type="submit" />
</form>
</body>
</html>

The code above produces the following on the Web form (The script does not exist, so submitting this form will do nothing.):

Your Name

Your Email

Web forms have a number of input methods, including the single-line text, shown above in the two text boxes. Others include radio buttons, check boxes, text areas (multi-line text input), passwords, and drop-downs. Additionally, a Web form can be used to upload and download files, and to populate data into a database. Information on these things is contained within the references at the end of this post.

The element that sends the form, <input type="submit" />, sends the form data in much the same way as a clicked link sends data over the Internet. When the data arrives at the Web server, a script is called up, to processes the data. Many different computer languages can be used to accomplish this, the most common being PHP.

Configuring a script is not a trivial matter. At the same time, a customized script is necessary to process the data. The Computer Science Department conducts classes, most notably CS116, on how to write scripts to process Web forms.

Fortunately, programs exist that write computer code. For the purposes of this tutorial, we are going to use an online code generator called, The Web Form Factory. This utility takes the Web page containing your form, along with a Thank You page, and converts them into a PHP script. It is important to note here that the Form Factory script actually replaces the Web pages. The information contained within your two HTML pages is assimilated into the script, which generates the respective Web pages at the appropriate time. Usually, the script is kept separate from the HTML page.

The Web Form Factory does not work the same way it used to. Some elements are missing from the pagkage that is returned. Or perhaps I am confused about the way it works. In either case, I have come up with a work-around so that the scripts will will work.

The PHP script created in this process will analyze submissions made by users, returning error messages if the forms are improperly filled out. For instance, a user may enter an email address without the @ character. When the script encounters an error, it will generate an error message to the replace the Web page containing the form on the user's computer. In order to implement this feature, you must include the following code on your Web page in the place where you want the error message to appear:

<wff:validation_errors></wff:validation_errors>.

After you have entered this code, follow the instructions on The Web Form Factory site. Select Email Form in step#2. After you have submitted your two HTML files, you will be prompted to download a Zip file containing the scripts. For some reason, the package of scripts is incomplete. To correct this, add these files to those that you upload to your server.

The PHP file containing your form will have the name form.YourFileName.php. You may change this file name to work with your site, but you must retain the php extension on the end. Links to this page must also carry the .php extension. You do not have to upload the original two HTML files to your site.

At the top of this file are three lines of code:

include_once("configuration.php");
include_once("wff_misc.php");
include_once("class.phpmailer.php");

The text will be slightly different. Copy and paste the code shown here above in place of the code in your file. When you upload your script, be sure to include the three files referenced in the same directory as the PHP file containing your form. The total number of files to upload will be four.

On lines 10 and 11, you should replace the placeholder text with your own information.

$mail->From = 'johnrobertlemon@yahoo.com';
$mail->FromName = 'John Lemon';

On line 14, insert the text that you want to appear at the top of your email message. The characters \n\n are code that will force two line returns.

$message = "The following was submitted to the Web form:\n\n";

In the file configuration.php, replace the placeholder text with the email address that you want to receive the report.

To review:

Create the Web page containing your form with the additional line of code, <wff:validation_errors></wff:validation_errors>.
Create a Thank You page.
Follow the instructions on the Form Factory site.
Change the configuration.php file included in the files returned from the Form Factory to include the email address that will receive the emails.
Change the main script as shown above.
Upload the files to your server.

We will go over these steps in class. Additionally, as time permits, we will discuss creating forms with Dreamweaver.

Further reading:

The Web Form section of the archives.
The PHP section of the archives.

See also:

The files used in this tutorial.
A series of video tutorials on Dreamweaver, including one on form creation, and one on creating a PHP file.
Email Me Form, a free online form generator service for creating HTML forms, no programming required. It has a form wizard to design simple or complex forms to make a form mail script. After creating the Web form, you get HTML code to paste into your Web page. This process creates a script housed on their servers.

Points, Pixels, and EMs on Web Pages, for MAT 113

2008-07-04T15:42:00.000-07:00

A PIXEL is the smallest visual unit in a computer graphic. Pixels are arranged into a grid to make an image. A pixel is not a size unit, but rather is a measure of the number of discrete units in the graphic. Pixels take on the attribute of size when rendered by some sort of device such as a computer monitor. An image consisting of 72 pixels in height will appear smaller on a monitor set to 96 ppi (pixels per inch) than it does on a monitor having a resolution of 72 ppi. The number of pixels per inch is a function of the resolution setting of the monitor. A monitor set at 1024 by 768 will have a different number of pixels per inch than at a setting of 1600x1200 pixels. At the same time, a 17" monitor set at 1024 by 768 will have a different number of ppi than a 22" monitor at the same setting.

Points, on the other hand, are an immutable, resolution-independent measure of distance. An inch is comprised of 72 points. Einstein not withstanding, an inch is an absolute distance. At the same time, the actual rendering of a letter-form with a specified point size is problematic.

An EM is a measure relative to the configuration of a letter-form. As an heuristic rule, an EM unit of measure extends from the top of a capital letter to the bottom of a descender on a lower case letter. As the point size changes, so does that of the EM. This measure is sometimes defined as the width of a capital letter "M," possibly because of the inclusion of the "M" in the term, and because of the use of the terms EM dash and EN dash to define longer and shorter dashes respectively. In any case, the EM is an arbitrary unit defined by the type founder.

The way in which all of the above translates into the size of type rendered on a Web page varies according to device and browser. Measures such as the specification of a pixel size for a letter face may yield unexpected results on some browsers. The difference in appearance of a letter form at a specified size can vary significantly from browser to browser, and from system to system. Complete control over letter size is an impossibility.

See also:

The Image Resolution section of the archives.
Toward a standard font size interval system, by Todd Fahrner, on Agitprop.
The definition of a pixel, on SearchCIO-Midmarket.com Definitions.
Using Points, Pixels, Ems, or Percentages for CSS Fonts--Deciding on Font Sizing in CSS, by Jennifer Kyrnin, on About.com.
A little about the origin of 72 pixels per inch, by Artemy Lebedev on his site.
Pixels to Ems Conversion Table for CSS

Obfuscate Mailto For MAT 113

2008-06-30T09:56:00.000-07:00

Spambots harvest email addresses by parsing mailto elements in Web pages. Here is a nifty Javascript that you can use to convert a mailto into a Javascript that is invisible to spambots. Simply enter your email address into the form provided. Place the resulting text in your HTML code where you want the mailto to appear.

See also:

Contactify, the Web-based mailform used on this site.
Nine ways to obfuscate e-mail addresses compared, on techblog.

Online CSS From PSD Converter

2008-06-02T08:10:00.000-07:00

psd2css online converts PSD web page designs into strict XHTML compliant CSS web pages automatically. Use Photoshop or The Gimp to create designs , then upload the PSD files. This service returns valid XHTML, along with subsidiary CSS and image files.

See also:

Sitegrinder, a Photoshop plugin.
Fireworks CS4

Flash 10

2008-05-30T17:46:00.000-07:00

More new stuff, more deprecated stuff, more stuff to learn and unlearn. At least it's not so different as to require AS4. We can only hope. The important stuff is linked from here.

FontStruct, An Online Font Foundry

2008-04-22T22:17:00.000-07:00

FontStruct is a free font-building tool from FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. Once you're done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their "FontStructions". Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.

See also:
FontShop's Font Magazine.

CSS Levels Example For MAT 154

2008-03-20T22:06:00.000-07:00

Click on the icon to see the example page. This page demonstrates the use of CSS to position one image over another, and how to make an image link. When you go to the example page, you will find a text link to a video tutorial created in Screencast-O-Matic on how the page was made.

See also:

Creating a website design using Photoshop slices Creating Consistent bPages with Templates By Jiggy "Jigs" Gaton.

Issuu Online Publishing

2008-02-06T22:38:00.000-08:00

Below is a link to a Flash-based publication of a book in PDF format that I uploaded to Issuu, a new online publishing service. I copied and pasted the embed code provided by Issuu into this blog.

See also:

PDF Me Not, a new service that also converts PDF files to Flash files. In beta at this writing.

Buzzword: Watch This Space

2008-01-28T10:43:00.000-08:00

Adobe has eaten Buzzword, one of the many online wordprocessors that challenge Google's Writely.

Buzzword is nothing if it is not slick. Combining that with the power of Adobe can only result in a superior product. Currently, Buzzword does not write to PDF. The addition of that feature by Adobe will make Buzzword killer.

Buzzword is here.

Extract Content From Copy-Protected PDFs

2008-01-27T11:23:00.000-08:00

I've come to realize that I have no respect at all for copy-protection schemes. As soon as I see one, I wonder how I can get around it. Case in point: The Friends of Ed book, Foundation Flash CS3 for Designers by Tom Green and David Stiller.

Long story short, I wanted to copy a list from the PDF of an on-line sample chapter to put into a link in the section on Flash text in the Type section of Web Publishing. But the PDF is "locked." A bit of Googling turned up a little application called Text-Mining Tool, which extracts unformatted text from a number of sources, including "locked" PDFs.

The entry with the pirated text is here.

See also:

pdfpirate.net, free, online and no limits pdf restrictions remover.
FreeMyPDF.
Unlock-PDF.com, unlock password protected PDF files.
Free PDF Unlock Online Utility, a free online utility that allows you to upload a PDF, once uploaded, a version of the PDF without printing or copying/pasting restrictions is displayed in a new browser window--5MB limit. On Ensode.

Browser-Based Screencasting

2007-12-22T13:33:00.000-08:00

Screencast-o-Matic is a new browser-based screencast utility that includes free hosting. The heavy-iron commercial screencasting applications, Camtasia and Adobe's Captivate, contain more features. But the increasing number of free alternatives, including Screencast-o-Matic, may be all that a developer needs.

See also:

20+ Great Resources For Video Tutorials on Mashable.
Sketchcast--a sort-of, Web-based whiteboard.
Other free screencast utilities in the archives.

Yet Another Reason Not To Own Acrobat*

2007-12-18T10:27:00.000-08:00

Combine PDFs 3.0 is a free, open-source application to combine PDFs and to extract information from them.

See also:

PDF Editing & Creation: 50+ open source/free alternatives to Adobe Acrobat--on Codswallop.
See the Publication and design Page converted by the service on March 11, 2008. Note that the Flash menu at the top is going nuts, while the links in the body all seem to function.
PDF Form Designer is a free cross-platform alternative, for creating PDF forms in new and existing PDF files, on Techie Buzz.
FillAnyPDF.com is a website where you upload your PDF form and link to it so other people can fill it out and sign it online. No software is needed. Any PDF form can be used, even if it's not "interactive,"

*Why bother?

If you're doing serious work, you will not have time to fool with this stuff. But sometimes, you might want simply to accomplish a single task without having to purchase a large commercial application. That's when it might serve to look for a free alternative. Otherwise, it's good to know that free alternatives to all of the big commercial applications exist, if for no other purpose than to keep providers like Adobe on their toes.

A New Raster-To-Vector Application

2007-10-27T23:36:00.000-07:00

This Web-based application could be a breakthrough in producing clean, crisp vector images from raster art. In any case, it beats the live trace application contained within Adobe Illustrator. A brief discussion of the application is here.

Images For Print From Google

2007-10-20T10:55:00.000-07:00

Selecting images from the Web for print requires a basic knowledge of resolution. (See the Imaging page section on resolution here.)

Google remains the best source for everything on the Web, including high-resolution images. One thing to keep in mind in this regard is that images indexed on Google may not be free from DRM (copyright) restrictions. Just because Google indexes it does not mean that you may use it.

Unlimited-use (free from copyright restrictions) images are available from a number of sources indexed on the Imaging page here.

When using Google to find high-resolution images, be sure to use the drop-down menu shown in the screenshot above to select "Extra Large Images." Notice that the size in pixels for each image is displayed along with the image type--most often JPG. An image at 300 DPI that you want to display inside of a 5" wide box will have to be at least 1500 pixels wide (1500/300). The ferris wheel image shown above will fit into an 8 ½" box at 300DPI.

Keep in mind also that images from the Web are usually in RGB format, and must be converted to CMYK for print.

See also:

PhotoEverywhere--high-resolution travel photos.
Veezzle, a free stock-photo search engine.

On Line File Conversion

2007-10-12T18:15:00.000-07:00

File conversion has come a long way since I had to pay something like sixty 1990 dollars for a program that allowed a PC to read Mac-formatted disks. That cost went down to zero shortly thereafter-- although the application is still available, and about as useful today as a ferryboat in the Sahara. Now the cost of converting all sorts of application files has gone down to zero as well, and moved online in the bargain.

A bunch of them are out there. A list of the better services includes:

See also:

Conversion Centra l: 101 Tools to Convert Video, Music, Images, PDF and More, an exhaustive list of online conversion services on Codswallop.
Converters on makeuseof.com.
80 File Conversion Resources on Mashable
i2OCR.

Combine PDFs Without Acrobat

2007-09-17T15:37:00.000-07:00

No software required!

Here's an online service, Drawloop, (requires registration) that combines multiple PDFs into a single PDF document. I tested the service using two separate PDFs; it worked quickly and flawlessly.

See also:

PDF Editing & Creation: 50+ open source/free alternatives to Adobe Acrobat
65+ free tools for PDF files on Eureka Tips.

Flash/Illustrator CS3 Text Integration...Almost

2007-09-12T10:57:00.000-07:00

CS3 has a number of cool features for integrating Illustrator with Flash. This includes text. Unfortunately, the text rendering mechanism for Flash will override that of Illustrator. For instance, hyphenation will not carry over. If you convert text to outlines in Illustrator, the formatting will be preserved in the carryover, but you will not be able to edit the text.

Adobe promises significant improvements in this area with the next iteration of Flash.

Stay tuned...

Two Cool Tools

2007-08-30T20:08:00.000-07:00

The first is LinkChecker, a Firefox Add-on. It does just that--checks links. Good ones turn green; broken ones, red. It resides in the tools menu. With a single click, it works its magic on the current page.

A caveat: A few valid links turn red. This may be a result of forwarding or some other quirk. But only a few, and not enough to seriously degrade the utility of this add-on.

The second looks good, but I haven't tested it. It's called Denim, an application that turns the kinds of sketches that you make on napkins into flowcharts and diagrams. It's oriented toward Web design.

Both applications are free.

Free Webcast on Adobe Color Management

2007-08-29T08:25:00.000-07:00

Color Management in Print and Internet Workflows
A Free Educational Webcast

October 16, 2007 (2 p.m. EDT, 11 a.m PDT)

First, you'll learn how to set up all the applications in Adobe Creative Suite to utilize color management. Next, you'll discover how to view and print colors accurately across multiple creative workflows, and get acquainted with the relevant components of an ICC-based color management system (CMS) and where they're installed in your Macintosh or Windows system. Then, find out how to handle prompts and alerts when opening files with profiles and use profiles to soft-proof output to various media including internet publishing ... and save your file in the correct format for the final medium. We'll also cover an overview of PDF technology in a print workflow.

Presenter: Rita Amladi is the owner of Orion Arts & Communications, a digital imaging training and consulting company. She is a Certified Technical Trainer and an Adobe Certified Trainer for Photoshop. Visit her site at www.orionac.com.

This webcast relates to our October/November "Color Trends" issue, which ships to subscribers on September 14th and is available on newsstands on September 28th. E-mail servicedgm@dgusa.com to purchase a single copy or for subscription information.

Instantly Indexed by Google

2007-08-28T16:16:00.000-07:00

I was working on formatting some text in a blog similar to this one. The text was from a novel. I wasn't certain of the context of the excerpt. So I pasted a rather substantial chunk of it into the Google search terms box, hoping to snag a larger excerpt.

Instead I got this--a link to the posting of the same text I had made to the blog several minutes earlier. A day later, the same listing persists. Click the icon of the screenshot below to see the results.

Obviously, speed does not translate into ranking. Although in some cases it might. In any case this is interesting.

See also:

"How To Increase Targeted Web Site Traffic" on ezine @rticles
With the introduction of Google Blog Search, my blog traffic is increasing even more. Within minutes of posting to my blog - I am getting targeted traffic from Google. You are instantly indexed by Google Blog Search; it's reason enough for every webmaster to put at least one blog on their site.

Here is evidence for what this guy says:

One thing to note in this experiment is that the same result did not appear in the regular Google search results. After 10 pages of results, I quit looking. Putting the title in quotes didn't help either.

See also:

How to get listed in Google in 24hours Guaranteed

Send Files On The Net

2007-08-27T11:15:00.000-07:00

Here is an older post about transferring files on the Net.

In a related vein, G Space is a Firefox extension that allows you to use your Gmail Space (2.8 GB and growing) for file storage. It acts as an online drive. You upload files from your hard drive with an easy drag and drop action, and then access them from any computer connected to the Net.

FireFTP is a free, secure, cross-platform FTP client for Firefox, providing easy and intuitive access to FTP servers. This means simple drag and drop file transfer to your server, directly from the browser.

I just found a service that allows multiple file uploads for a total upload of 1gb at a time.

See also:

ONLINE STORAGE: 80+ File Hosting and Sharing Sites
Top Free Hosts To Store Your Files Online on makeuseof.com
PipeBytes
File Gunner
File Dropper up to 5GB, no registration.
wiki upload, free file hosting & sharing--5GB file size.
11 Free Websites To Send And Recieve Large Files Quickly, on Smashing.
SizableSend.com.
iSender, a web-based program that creates a link for you to send files directly to another computer without uploading it to a third party server.
JetBytes direct file transfer tool, creates a direct link between the sender and the receiver. It does not store files during the transfer.
Streaky.

Word HTML Cleaner

2007-08-25T14:43:00.000-07:00

Microsoft Word is worse for documents than NAMBLA is for the Cub Scouts. I found something to ease the pain of dealing with Word-generated HTML.

HTML Cleaner is an online application that strips proprietary Microsoft tags and other crud from Word HTML documents, leaving basic formatting intact. File sizes are greatly reduced, and the returned HTML is easier to read, revise, and employ.

Here is a step-by-step explanation of the process.

A caveat: apparently, the application works by stripping out most style information from the tags. Unfortunately, any useful styling is trashed as well. When the mob storms the walls of Redmond, I will, of course, feel sorrow for the pain of the families of the Microsoft employees so brutally put to death. But a part of me will be glad.

Really Good Video Lectures

2007-08-22T19:32:00.000-07:00

A number of very good audio and video lecture series are cropping up on the Net. These include full-blown courses, such as those available from MIT Courseware.

YUI Theater is a series of videos on programming available from Yahoo Videos. Many of these are on the topic of Web programming. The collection includes an excellent series on JavaScript by Yahoo's Douglas Crockford.

A number of video tutorial sites are listed on the Tutorials Page of the archive.

See also:

CSS Directly From Photoshop

2007-08-15T18:32:00.000-07:00

Sitegrinder 2 is a Photoshop plugin that creates CSS-styled Web pages directly from PSD files. It has what is perhaps the worst documentation I have ever seen for an application. That said, the application itself seems to work.

I created a page from it here.

Admittedly, I went back into the code to correct things that were likely the result of my lack of familiarity with the tool. The methods are less than intuitive. But it may well be that with a bit of practice, even I could whip off something sophisticated using it.

One thing that the tool cannot do is to replace a good foundation in CSS. If you don't know what CSS can do, this tool will be of limited use to you.

The trial version does not appear to have a time limit. Instead, it watermarks images. It watermarked the header in the page I created. I promptly opened the file that it created, and pasted in a non-watermarked version of the image. Hey! You can't watermark CSS.

But that's OK. The company should be paid for developing this nifty tool. It allows you to make finished pages during your evaluation. Then, when you get tired of removing the watermarks, you can pay them the money and get a key.

Stay tuned for a more in-depth evaluation to be posted at the CSS section of the archives.

Further reading:

"Photoshop Plugins--SiteGrinder--Web Design Tool" in PhotoshopSupport

A New WYSIWYG Authoring Tool

2007-08-14T10:23:00.000-07:00

Codetch is a new Firefox add-on designed to function as a Web authoring tool on the order of Dreamweaver. This application is still in development, and so it is too soon to pass judgment. A preliminary look is promising.

See also:
Nvu

Down and Dirty CMS

2007-08-12T08:35:00.000-07:00

Texty is a simple online text/html editor that will allow your client to make simple changes to content areas of his site. More on this service is located in the archives.

Note:
The link shown in the archives section does not function due to a bug in the texty.

See also:

A list of 80 opensource CMS tools on Mashable

Your Web Pages Could Be PDF...Almost

2007-08-09T08:43:00.000-07:00

Really, Web pages should look as good as magazine pages. HTML 4, the current standard, is not up to the task, no matter how much CSS gets piled onto the heap. Display is a crapshoot, requiring experts with computer science degrees to make Web pages look anywhere near what can be achieved with print. Even so, these experts with computer science degrees must consider "graceful degradation" of the rendering to accommodate browser quirkiness.

PDF pages could fit the bill. Almost. Here's an article in Boxes and Arrows about just how far you can go toward the magazine-page goal using PDF. Long story short: Not quite far enough, but close enough for prototyping.

The primary drawback to PDF is an extremely long load time, not suitable for the frenzy that constitutes the Web.

Speaking of HTML, here's an interesting article on HTML 5 from IBM

A number of interesting PDF applications are indexed on the Web Publishing and Design page.

Making A Web Form Without Programming

2007-08-08T15:49:00.000-07:00

If you google web form script generator, you will find a number of services that will, one way or another, produce a mailform that you can place in your Web page with a corresponding script to place on your server. It is generally a bad idea to undertake such a project if you are not familiar with scripting.

If you want to make a simple response form, you are better off with a mailto link. The use of this method will insure that you receive the correct email address, while allowing the sender to use a familiar tool to convey information to you.

Otherwise, you should hire a Web programmer to create a script for you.*

Here is a link to a site with detailed information about various configurations you may use in your mailto link.

*To ignore this advice, click here for a pretty good script generator.

See also:

I Knew How To Validate An Email Address Until I Read The RFC by Phil Haack. You know what? I quit.

The Source Code For The Menu

2007-08-06T15:56:00.000-07:00

Here is a link to the FLA file (Flash 9) for the menu of the archives portion of this blog. The archives are linked under the heading ENTRIES BY CATEGORY in the column to the right.

One real oddity that I encountered was in the construction of the rollout state of my buttons. If I used the syntax, this.prevFrame(), the code would not fire. Removing the this made it work. This is a real puzzlement to me. I'm not certain whether this is a bug in Flash or in my knowledge of the code.

Your Page in Different Browsers

2007-08-02T06:21:00.000-07:00

This image from a screenshot comes from a service called "Test your web design in different browsers." It shows a message put up by MSIE 4.01 / Windows 2000 for one of my pages.The page in question otherwise displays quite well in a number of browsers on a variety of systems. I'll have to track this down.

"Test your web design" is a great service to anyone who puts up a Web page, and wonders what others see.

What Bill Gates Did For Me Today

2007-08-01T15:05:00.000-07:00

So, I thought that I'd fool around on my pages with some CSS, and that I'd put a position: static box sitting at a fixed position at the bottom of each page, and to the right of the content table, and containing a link to <a href="#top">Top</a>. This is because my site is really just a long list in HTML, and having a bunch of Top links to the side looks funky. Click over to any of the "ENTRIES BY CATEGORY" and scroll the page if you wonder what I'm talking about.

Of course IE broke it, because IE breaks everything.

So I googled the problem, coming up with a workaround that basically makes the page static, and sticks all of the content into a <div> with a scrollbar that you can scroll up and down. Then IE thinks that the fixed box with the Top in it is a regular page element, and that everything else is inside of this scrolling <div>.

OK, so that actually works, and Firefox respects it, but now IE won't accept the link, and when you click on it, it just sits there, like Bill Gates contemplating how much nicer life would be, not to mention the extra money he'd make, if all of his competition and these irritating Web Standards would just disappear, leaving him head of of a single world monoply.

Which leaves a burning question in two parts: (1) Why would a loving God let a thing like IE happen? And (2) what are the mechanics of IE not respecting this anchor link? It must have something to do with IE thinking like, hey dude!--this is a static page, so I must already be at the top. In fact, a page refresh takes you back to the same y value of the scroll where you were when you did the refresh.

I hate it when IE calls me dude.

Wait. Don't get so put off that you miss the best part-- this gets even better. So, come to find out, the link to #top (or any link for that matter, contained within the <div> tag) only works within about a one pixel tall area below the linked text in Firefox. (Remember that the regular position: static worked fine in Firefox in the first place, and we had to resort to all of this trickery because of Bill Gates and his money.) So, there is probably a workaround for this workaround of a workaround, but where would it all end? I mean, would I google this monstrosity, and then re-google for all of the ensuing side issues created by whatever re-workaround I came up with?

Anyhow, what I did was--yes, I found a solution--was to use Flash. I made a tiny little Flash movie, linked a button the size of the whole SWF to the absolute value of the URL, and stuck that inside of the <div>. Now both IE and FF stand up and salute, and dutifully reload the page, taking the user to the top just as an anchor tag sitting in a static page element would--in spirit if not actually the way I had originally designed it to be in my Web Standards fantasy. Unfortunately, this whole business leaves a funny blank area on the page just above and below the content. I could probably create some sort of decoration to hide that, but all of this has made me very tired, and when I'm tired, I don't care.

Which leads me to ask the question that you have no doubt been asking all along: Why not just do the whole thing in Flash and be done with it? It would save a lot of messing around, and the thing would have a consistent look in every browser.

Web page speed analysis

2007-07-26T18:56:00.000-07:00

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you:

Performance report card
HTTP/HTML summary
List of components in the page
Tools including JSLint

Note:

Actually, if you're doing any kind of Web development and you don't use Firefox, you should just shoot yourself. Then you won't have to agonize over the fact that the world is passing you by

Free Web Form Hosting From Google et al.

2007-07-16T17:07:00.000-07:00

I have a page hosted by Google Page Creator that runs a Web form on a free PHP site called 111mb.net. Type in a name and email to test out the form. For more on the Google Page Creator, click on the "Web Publishing" link to the right.

Here's a link to a copy of the PHP script.

Here's a link to Mashable's Web Hosting Toolbox

CSS

2007-07-15T15:24:00.000-07:00

W3C Web Style Sheets CSS tips & tricks

Macloo's small set of pages provides basic examples of some of the most simple aspects of using CSS to control fonts, colors and spacing on Web pages. The page has listed some up-to-date links to helpful CSS resources on another page.

There are no lengthy explanations here, but the code is very brief. By comparing any example page to the previous page (linked to it), you can see what was changed to produce the new appearance.

Please feel free to copy the CSS here and use it on your own pages.

Visual C SS Creator is a helpful tool that will turn any style sheet (CSS) into a html page that will show the CSS visually for the developer to use to understand the styles better. To use enter the url where the CSS is located and hit the Create Visual CSS button, when the new page loads you can save the file as html and use it as a reference.

Watch For...[beta]

2007-07-14T14:38:00.000-07:00

Aviary is a platform ecosystem for people who create. It is organized around a suite of rich internet applications geared for artists of all genres. From image editing to typography to music to 3D to video, we have a tool for everything.

Big Flash News

2007-07-14T12:27:00.001-07:00

You can host a Flash site for free on the Google Page Creator. This mockup of a splash page is hosted on my Google page.

How to get your Flash site hosted by Google

Create a Google account. You must create a Gmail account.
Sign up for a Google Page Creator account. Opera and Safari may not be supported, so use Firefox anyway. What's the matter with you?
On the main page for the Google Page Creator, click on Site settings, just down from the top, to the right.
Find the "Experimental Features" button, and enable it.
Your main page will now have an upload section on the right side. This is titled "Uploaded Stuff." At the bottom of this section is a link that looks like: [upload]. You will click on this link to upload your files. As of July 14, 2007 you must upload files one at a time. This will likely change soon.
Upload your Flash files as you normally would. The link to your Flash site will be the URL for your Google pages plus a slash--/--plus the name of your HTML file--e.g., http://johnrobertlemon.googlepages.com/index.html.

Free Vector Images

2007-07-13T06:28:00.001-07:00

Use Bittbox files in posters, website designs, cd covers, postcards, annuals, flyers, business cards, branding, . . . DESIGN.

Use BittBox buttons as a part of a UI for a software you are developing.

Use BittBox files as a learning experience to grow and create your own excellent designs.

See more on the Web site

Getting your videos noticed

2007-07-12T07:27:00.001-07:00

WeShow brings an editorial approach to selecting and organizing the best online videos available from sites such as YouTube, DailyMotion, Metacafe, Google Video and others. The site also offers the monthly “WeShow Awards,” billed as the “world’s biggest online video contest” where users get to vote on content from each country WeShow has a local version for (US, UK and Brazil). WeShow TV rounds out the offering by providing a review style show featuring some “of the world’s best videos.”

See also:
TV Guide Online Video Guide
blinkx
OnVideo
Online Video Guide
The Daily Tube

Further reading:
Ultimate Guide to Online Video
Channel 101

And don't forget:
Google, search term, "online video."

Easy file Transfer

2007-07-11T09:51:00.000-07:00

You Send It is an easy online file transfer application. Students no longer have to use jump drives, external hard drives, or CDs to take files (up to 100MB) home. Follow the simple instructions on the home page. Upload your files at school; download them at home.

See also:

5 Simple Ways to Store Your Files Online.
FlyUpload This is a file sharing service that worked quickly and easily in a test.
ONLINE STORAGE: 80+ File Hosting and Sharing Sites
MailBigFile--no registration required.
7 Ways to Send Huge Files - Bigger than Gmail

Final Cut Pro 5 Free Tutorial

2007-07-08T11:05:00.000-07:00

From Expert Village

Summary: A working knowledge of Final Cut Pro is essential to any aspiring filmmaker. As the most widely used software program in video and film editing, Apple computer's Final Cut Pro can give a professional appearance to any film project from basic digital video to HD material. Because it's relatively affordable and easy to use, Final Cut Pro has become extremely popular with broadcast stations and independent filmmakers. It offers a wealth of effects and functions, like dissolve, iris, distortion, and ripple, rolling, slipping, sliding and other editing functions, as well as color correction filters and audio filters.

Flickr and Creative Commons

2007-07-07T21:34:00.000-07:00

Many Flickr users have chosen to offer their work under a Creative Commons license, and you can browse or search through photos under each type of license.

"Creative Commons is a non-profit that offers an alternative to full copyright."

creativecommons.org

Briefly...

Attribution means:
You let others copy, distribute, display, and perform your copyrighted work - and derivative works based upon it - but only if they give you credit.

Noncommercial means:
You let others copy, distribute, display, and perform your work - and derivative works based upon it - but for noncommercial purposes only.

No Derivative Works means:
You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.

Share Alike means:
You allow others to distribute derivative works only under a license identical to the license that governs your work.

Video Screen Capture

2007-07-07T16:06:00.000-07:00

Webinaria produced the video screen capture from which the youTube video, shown below, is made. The original video is full-screen, but has been reduced to the size shown by youTube.

Click on the icon to the left to get a full-resolution, still screen-shot (a snapshot) of the AVI movie playing in the Windows Media Player.

The Web Curmudgeon

Using The Pen Tool

Using SVG Images

The Postcard Exercise for GDP111

The Squiggle Exercise for GDP111

The "Lost Road" Exercise for GDP111

Chapter 6, The Bank Card for GDP111

o7 Raffle template for GDP111

Chapter 7 Firefighter Poster

The Beach Ball exercise for GDP111

The Family History Exercise for GDP111

The Lincoln Exercise For GDP111

The Anna Sanchez Exercise For GDP111

The "Monster" Exercise For GDP111

The Teacups Exercise For GDP111

The Wedding Invitation For GDP111

The Desserts Menu For GDP111

The Expert exercise for GDP111

The Reedy Exercise for GDP 111

The Illustrator Exercise in 110

Solving The Caps Lock Problem

Doomsday

WARNING About HTML Email

PDF to Epub via Indesign

Creating A Directory on the Server

Table Data Creating Another Table--beta

The Postcard Template

A Blinking Gallery

Chapter 7 Exercises

CH 6 The Bank Card and Squiggle Assignments

GDP 111 Woes UPDATED FOR CH 5

Cheating With Indesign

Indesign Tabs and Tables

Reversed Arcs in Illustrator

More on Backup

jQuery

Web Form Script Generator For MAT154

Text On A Path & Isolating Image Elements

Preserving Class Work--OOPS!

Web Forms for MAT 153 (Updated)

Online OCR

The Bank Card Tutorial For GDP 111

Map Mashup

The single text box Flash Web site

Loading XML Data Using ActionScript 3.0, on Republic of Code.

The Web Forms Exercise For MAT 113

The Archives Are Moving

Preserving Class Work

The SPAM-O-LATOR is now in Beta

FormMail Script-Generator Update

De-dforking a Mac Font

Transition To A New Machine

The Image Gallery Updated

Downloading Free Fonts For The PC

Indesign Tutorial on PDF Separations on a PC

Get Free Vector Graphics From Google

Tutoring Schedule

Source Code For The MailForm Script Generator

Fire a function from an HTML text link in Flash

Form Error Checking for MAT 113

Form Script Tutorial for MAT 113

Points, Pixels, and EMs on Web Pages, for MAT 113

Obfuscate Mailto For MAT 113

Online CSS From PSD Converter

Flash 10

FontStruct, An Online Font Foundry

CSS Levels Example For MAT 154

Issuu Online Publishing

Buzzword: Watch This Space

Extract Content From Copy-Protected PDFs

Browser-Based Screencasting

Yet Another Reason Not To Own Acrobat*

A New Raster-To-Vector Application

Images For Print From Google

On Line File Conversion

Combine PDFs Without Acrobat

Flash/Illustrator CS3 Text Integration...Almost

Two Cool Tools

Free Webcast on Adobe Color Management

Color Management in Print and Internet WorkflowsA Free Educational Webcast

Color Management in Print and Internet Workflows
A Free Educational Webcast