Nancy Fusco » how to

How to add a button to jEdit for Infoviewer preview in browser

Nancy — Mon, 10 Oct 2011 15:48:28 +0000

Now that you’ve got jEdit and Infoviewer working together to use Firefox to preview your web pages or code, it gets tedious quite quickly to go all the way thru the menu’s just to load a page.

So, let’s setup a button on the toolbar in jEdit to launch our preview.

Open jEdit and go to Utilities | Global Options

Select Toolbar from the left menu and then click the Add button at the bottom.

You will now see all the options for this new button. Here is how I have mine setup:

click for fullsize image

Now, when I click the “Internet” or Globe icon, my current page will load in Firefox directly from jEdit!

How to launch Firefox preview from jEdit

Nancy — Sat, 08 Oct 2011 14:57:37 +0000

jEdit is my code editor of choice. I’m running it on Windows 7. Here’s some quick instructions for setting up the preview of your code or web pages to launch Firefox instead of jEdit’s own internal browser.

First, install the InfoViewer plugin from within jEdit.

Open jEdit choose Plugins | Plugin Options under InfoViewer | Choose Browser check the box “Use internal…”, then tick the box “External Browser” and set the path below:

c:\Program Files\Mozilla Firefox\firefox.exe $u

Apply it.

Now, when you want to load the current page/file into Firefox, choose Plugins | InfoViewer | Open current buffer with browser

Quick White Balance Correction in Gimp

Nancy — Sat, 19 Dec 2009 14:32:32 +0000

I notice that most of my winter, aka “snow”, pictures have this dull gray color to them. For quick white balance correction in Gimp, open the image. Now from the menu on the Image, choose COLOR | AUTO | WHITE BALANCE

click image for a larger version

Gimp’s auto white balance has been pretty reliable to quickly set the correct tones in my grayish photos. See the results here:

click image for a larger version

And there you go – one click white balance correction in Gimp!

How To Delete “undeletable” files from Linux Trash

Nancy — Sat, 28 Nov 2009 00:32:42 +0000

I’ve been cleaning up some junk files off my linux laptop and deleted files from various directories with no problem. Well, then I go to Empty the Trash Can when I get an error message – something about can’t delete those files due to permissions. Did some google searching and found this helpful tip from the Ubuntu Geek website about mid-way down in a post by Lopo.

Basically, I just opened Terminal in Super User mode (found this in my menu system at Applications | System Tools | Terminal Program – Super User Mode). You will need to enter your root (super user aka su) password before proceeding.

Next, I entered this at the command line:

sudo rm -rf /home/YOUR HOME DIRECTORY HERE/.local/share/Trash/files/*

note: there is a space after the -rf and mind the capital letters as they matter to linux.

**caution: this will really really really delete stuff so be careful**

GIMP – Working with layers and autocrop layers

Nancy — Wed, 01 Jul 2009 12:43:28 +0000

Once you start getting to work on a complex graphic, you’ll want to use layers. Here’s what I’ve found works best for me and seems to flow easily in GIMP. You can start with your own image, or download my classroom graphic here: classroom_small_zip.

To view the Layer’s dialog box, press CTRL-L or from the Dialog menu.

Create a new layer:

Notice that in the dialog box for a new layer you can select different options. I use the “Transparent” option most of the time, so my new layer will overlay the background layer. Also notice the size of the new layer. This is where it gets tricky in GIMP. Leave it at the size of the image right now.

Next, draw a new selection on this new layer and fill it with a color. When you click on a tool in GIMP, the dialog box below the tools area will change to allow for options with that tool. Experiment a bit with that and you’ll find some cool effects.

Once you have created a new shape on the layer:

Click to see a bigger version of this screenshot

Click on the Bucket tool and fill it.

Great! You’ve created a shape that’s on it’s own layer! Now if you move that graphic around it will float independant of the lower and upper layers. Oh, wait a minute – if you move it around you’re moving a layer the size of the entire graphic, not just the shape you made. This can really get you at the end of your design when you go to print or export – you’ll have a layer that is “over the edge” of the background layer. Trust me when I say, this is pure GIMP chaos.

So, just as soon as I’m happy with a shape for that layer I use the Autocrop Layer to resize the layer to just around my shape. Then, when I move the shape around, the layer won’t go over the edges of the main background layer.

Click for a bigger version of this screenshot

Choose, Layer and then Autocrop Layer. Voila! Now, the layer is exactly the size of your shape. What’s awesome about the Autocrop Layer is if you had multiple shapes and lines on a layer it would Autocrop to the edges of all the elements.

Experiment with this and you’ll soon see Autocrop Layer is your best friend when working with complex graphic layers.

Easy cropping in Gimp

Nancy — Tue, 23 Jun 2009 01:38:50 +0000

For an even easier way to crop images in GIMP, use the Selection Tool:

1) Click and drag a selection over the area that you want to remain as your image.

2) From the Image Menu, choose Crop To Selection

3)You now have a quickly cropped picture in GIMP!

How to install true type fonts in Linux Debian

Nancy — Sun, 05 Apr 2009 19:27:02 +0000

First download any True Type Font to your Desktop. If you download a zip file, use ARK to unzip/extract it. ARK is usually at Applications | Accessories. After extraction, you will have a file with the extension .ttf

If your extraction left you with file(s) that have multiple underscores or spaces, right-click the file choose Rename. Edit and remove extra spaces and underscores but leave the extension .ttf . This will make it a lot easier to copy these files from the command line as you’ll see in a moment.

Open up your Terminal as Super User (su). I usually just select Applications | System Tools | Terminal Program – Super User Mode

Enter your su password.

At the command prompt, path out to your Desktop directory by entering:

cd /home/name_of_your_homearea/Desktop

*Note: In Linux, case matters, so Desktop must have the capital D.

*Note: Enter the exact name of your home area after /home/

To copy the ttf files to your fonts area, enter this at the command line:

cp name_of_file_you_downloaded.ttf /usr/share/fonts/truetype/

If you are wanting to copy and entire folder to the fonts area, at the command prompt enter

cp /home/name_of_your_homearea/Desktop/folder_name /usr/share/fonts/truetype -r

*Note: There is a space after cp and after the folder name in the command line

You will have to restart your computer for the changes to go into effect but that’s it!

If you want to check and make sure the files are successfully copied over, open your file explorer and path up (usually it will default open in your home area, so you’ll need to use File | Open Parent a few times to get all the way to the top of the file structure. From the top (double-click Computer and choose Filesystem), path out to usr/share/fonts/truetype and you should see all your fonts including the newly copied ones.

*Note: If you can’t see certain directories, they may be hidden. To view hidden files and folders, select View | Show Hidden from your Explorer window.

Interested in installing the Microsoft fonts to your Linux system in one quick download? Check out this fab tutorial by Mark Sanborn.

PHP form to email tutorial – Part 3 – Javascript validation

Nancy — Wed, 18 Mar 2009 15:30:28 +0000

Here in Part 3 we will add Javascript to verify that a Contact Name was filled in before the form goes over to PHP to be processed. This is called client-side validation, since the checks are taking place within the same web page as the form.

Again, it’s just a quick check, so we’re not going to get too fancy with Javascript. If you want to learn serious detail about Javascript, go thru the tutorials at TiZag.

Let’s get started – Open up your html editor and then open up your php form page. You should have this code:



Contact Name:









Notes:

Add the script tag in the Head area to designate this will be a block of Javascript code:

Ok, so we got our Javascript set but how do we tell the Submit button to go check this script before processing it?

We add a line to our Form tag to have the Submit button run our function before “submitting” the form:

Sure, there are many ways to expand this validation process in Javascript – adding in an onFocus line to put the cursor back in the missing content field, for example. For this tutorial series, I just wanted to keep to the basics and give you a good foundation for how things are structured, where they go in the overall scheme of code, how the form relates to PHP, and then let you build from there.

For all you ever wanted to know about Javascript check out TiZag’s Javascript tutorials.

The full form page should now have this code:



Contact Name:





Notes:



PHP form to email tutorial – Part 2 – Setting up the PHP
Nancy — Tue, 17 Mar 2009 15:08:50 +0000
In Part 1 we setup the actual contact form using basic html form tags and form elements.
Here in Part 2, we are going to setup the PHP code to receive the data (or info) from that contact form. Open up your html editor and create a new PHP page. Enter the following code bits, in order, within PHP tags.
First thing, define the variables. These will be the names of the fields exactly as they are in your contact form. In our example, we had 1 text input box called cName and 1 text area box called notes.
Let’s also add a few variables that we will use to send our contact form via email. We don’t need these over on the contact form, but we want to define them here so our PHP script can use them later on.

// define our variables, the info that we will be gathering from the form and any variables we want to use later in the script

$EmailFrom = "youremail_here@where.com";

$EmailTo = "youremail_here@where.com";

$Subject = "Contact Form";

$cName = Trim(stripslashes($_POST['cName']));

$notes = Trim(stripslashes($_POST['notes'])); 
It’s often handy to have the user’s IP address passed along for troubleshooting if needed, so let’s add in a variable for that:

$user_ip = ($_SERVER['X_FORWARDED_FOR']) ? $_SERVER['X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
Ok, now that everything’s defined, let’s setup what the email message should look like when it’s received.  Here we are basically just formatting the look of the message body, making it more readable.

// formatting the data for the email message body

$Body .= "Contact Name: ";

$Body .= $cName;

$Body .= "\n";

$Body .= "Notes: ";

$Body .= $notes;

$Body .= "\n";

$Body .= "Users IP: ";

$Body .= $user_ip;

$Body .= "\n";
Here is a quick check to see if a spambot is adding emails to our form. This is just a basic check, so at some point your going to want to make sure your form isn’t being used by a spammer. I will talk more about this in Part 3 – validation.
For now, let’s just do a simple check to see if an extra line or breaking space is being inserted in either the Name text box.

if ( ereg( "[\r\n]", $cName )) ) {

	//if spambot send directly to error page
	print "" ;
Ok, so now that we’ve used an “if” statement to check and re-route to an error page if they are a spammer, what do we do if it’s ok to send the form? We use the “else” statement, like this:

// if all good then send our contact form via email and display the results

} else {
// send email to the address specified above and include the data

$success = mail($EmailTo, $Subject, $Body, "From:youremail_here@where.com");

And finally, we display the info that the user entered in the form as confirmation that it was sent and so they have a copy for their records. It also let’s us say “Thank you!” for sending the message:

// display results on page so the user has confirmation of their form details

echo "
Thank you! We have received your message!
";

echo "
";

echo "
";

echo "Hello ".$cName.", 
";

echo "
";

echo "Following are the details of your message:
";

echo "
";

echo "".$cName."
";

echo "
";

echo "Your message was: 
";

echo "".$notes."
";

echo "
";

}
So, that’s it! Not too bad right? Remember to type the code snippets above inside PHP tags and to save the file as adaction2.php before testing. If you want to change the name of this file, be sure and go back to your form and edit the form tag so it knows where to send this data:


To learn PHP in more detail, check out TiZag – many props to TiZag – I learned more from his tutorials than anywhere on the web.
And to get some additional code samples, check out Steve’s site here.



PHP form to email tutorial – Part 1 – Setting up the form
Nancy — Mon, 16 Mar 2009 17:47:43 +0000
This weekend I did some volunteer work for a local non-profit by constructing an online form in php that would email from their website. I’m going to simplify that form and walk thru a tutorial to help you build your own online php forms.
Part 1 will walk you thru setting up the actual form to get it ready to be processed by the PHP script. The form just gets the information to the PHP script. 
Part 2 will be the setup of the receiving PHP script, which will process the info from the form and email it.
Part 3 will look at client-side validation with Javascript.
Part 4 we will create a multiple choice input area for the user, and only emailing their selections in the form. We will do this by creating an Array.
Part 5 will create code to also email a confirmation to the user with the info they filled out.
A well designed form will set the stage for easy processing so, with that said, let’s dive into the form construction. 
Open your html editor, for most it will be Dreamweaver or similar. I use Quanta+, an open-source software for Linux. Create a new PHP document.
First, let’s add the form elements to our web page, take notice that we are defining the name, method, and action:










name = how we will refer to our form

method = POST – how we will send our data over to PHP – this is the transport

action = when a user clicks the Submit button, where the form should send it’s data.
Now, inside the form tags, let’s add just two items, keeping it simple for right now:



Contact Name:



Notes:




Notice again, we have to define the elements in our form so that in our PHP script we know how to refer to them.
All we need to do now is add in the Submit button and a few line breaks for spacing:






Contact Name:









Notes:














Preview your PHP page and you should see this basic form:

Contact Name:





Notes:








That’s it! Pretty easy right? Now if you click the Submit button above, it won’t actually do anything – yet – visit back for Part 2 where we will construct the actual PHP code that will take the info from the form we created and send it via email.