goffgrafix home resources website design hosting manage/register domain names about heather support contact
follow me on twitter Follow me on twitter

Distraction is not all bad

by Heather Goff on May 13, 2010

in Website design

Sometimes, as a free lance web designer, I have so much on my punch list that I put on blinders, put my nose to the grindstone and don’t feel I can look up from my computer. People are counting on me to get their work done, and it would be irresponsible to let myself be distracted by twitter posts, or emails from friends, right?

I have found, though, that often, the time I take being sidetracked to an interesting website, or looking at something fun that a friend or colleague has sent me, has a great benefit to my productivity and work. Why? Because creativity, like fire, needs oxygen from the surrounding environment. The stimulation and things that we discover by looking up and around can add to the quality of our work.

Here is an example: I just reprogrammed an artist’s website, Beldan K. Radcliffe (beldankradcliffe.com). We were keeping the graphic design pretty much the same as her original site, but programming it with SEO friendly code, and adding a shopping cart and tile section. The last thing on my “to do” list for Beldan was to figure out how to create a page where shoppers could “play” with her tiles and arrange them to figure out which ones they want to purchase. She sells a set of four tiles at a discounted rate, and she commented that at her artisan shows, people spend hours picking out tiles and arranging them together to decide which they want to purchase. I had absolutely no idea how I would program that for her. So this final task stuck in the back of my brain as something I needed to get done, but wasn’t sure how to tackle.

One day soon after I was busy working on numerous things, and my friend and colleague, Kathleen Forsythe, shot me an email with a link to a website that she thought was inspired.  The subject of the email was “how cool is this..” and the link was to this page: http://www.curiousgenerationgroup.com/

I went to the link, and finding it inspiring, I looked at the source code to see if I could figure out how it was created. I noticed that one of the scripts that they use was located in a folder named scriptaculous, and doing a google search on that, I found this site: http://wiki.github.com/madrobby/scriptaculous/. The site explains that  script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. (TRANSLATION:  free javascript code that, once installed on your server, lets you do all sorts of cool things)  AND one of those very cool functions was the ability to drag and drop items on a page. Suddenly I had a solution to my tile task for Beldan, and with the scriptaculous files, was able to get her new page up in under 1/2 hour.

I was rewarded for my exploration. Exploring is a way to self educate, to stimulate our creativity.

Not all distraction is bad. If I hadn’t taken 10 minutes to open that email, click on the link and look at the source code, I would still be stumped on how to create a page where customers can re-arrange items, and that unfinished task would still be rattling in the back of my brain.

Have you had similar experiences? Let me know by commenting below.

{ 2 comments }

Website programming is so different today compared to what it was even five years ago, that it is like comparing houses built of mud to houses built of brick, or a tricycle to a racing bike.

I am not talking about visual differences, though there are some – websites are designed for a higher screen resolution today than they were five years ago, for example. I am talking about the nuts and bolts programming of the site. The code that makes it work.

Today’s programming is designed to load faster, be easier to maintain and to be search engine friendly. Although each of my website projects  are programmed to the website standards and SEO standards of the time that they were built, and I take classes every year to stay at the top of the programming curve, I have been programming websites since 1997 and my portfolio contains some sites that are old school programming, because of their age.

I am mentioning this for several reasons, the first is that I had one of my favorite clients come to me, whose site I designed back in 2003 with a custom content management system, and they had hired an SEO consultant to look at it and give them suggestions. When the consultant looked at my code, I was embarrassed, and I felt like saying – wait, don’t judge my present skills on what I was programming seven years ago! It is like comparing the mud pies I was making at 10 to the apple pie that I cooked at 17.

I did agree with my client and the consultant that it was time to gut their site and reprogram it. It looks the same as before, but now it has SEO friendly code and URL’s, and the content management system has more SEO functionality programmed into it. The renovation was quickly done, because I knew the site inside and out and had programmed the custom content management system so was familiar with how to transition it for today’s needs.

This is a somewhat defensive and personal rant. I don’t want to eliminate my older sites from my portfolio, but the second reason I am writing about this topic, is that I’ve had them (my older sites) held up by my competition as examples of how I program today, and that is vastly unfair. I hope that when a potential client looks at examples of a web programmer’s work, they would ask to see the most current work that a programmer is doing. I want to reassure my clients and potential future clients that I do program as search engine friendly as any programmer available for hire.

I have gone back and re-programmed a handful of client sites this year, bringing the code up to date with today’s standards, and hopefully the majority of my clients will revisit my services so that we can renovate their sites as well.

After 5 years, it is really time to look at a site’s code and decide if it needs to be gutted, to look at the design and decide if it needs freshening up. To evaluate what was working and what isn’t working anymore. There is no reason why you can’t work with the original designer and programmer of your site to do this. They can probably do a more efficient renovation for you (translating to less money), because they already are familiar with your site and content management system (if you have one).

By the way, in my website portfolio, my most recent projects are at the top. : )

Are you a website programmer? Do you recommend removing old sites from one’s portfolio? Have you had old work held up by your competition as a reason not to hire you? Please share your experiences by commenting on this post.

{ 0 comments }

Here is some great geeky information given by network solutions customer service to one of my clients, who passed it on to me. Since my servers have similar security standards, I frequently refer to the code examples and solutions illustrated below.

For security reasons (to prevent “PHP include” hacker attacks),  some servers set the allow_url_fopen and allow_url_include PHP directives to off. If you see errors similar to the following on your website, then your website (or software you have installed on your website) uses insecure PHP calls.

Common Errors

Warning: fopen() [function.fopen]: URL file-access is disabled in the server configuration in /……../ on line (..)

Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in in /……../ on line (..)

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /……../ on line (..)

Warning: getimagesize() [function.getimagesize]: URL file-access is disabled in the server configuration in in /……../ on line (..)

Warning: readfile() [function.readfile]: URL file-access is disabled in the server configuration in in /……../ on line (..)

Solution

WordPress / Joomla / Drupal Software: These applications do not use functions that require allow_url_fopen or allow_url_include to be turned on. However, certain third party plugins may require changes. If you see any of the errors above, try to isolate which plugin is causing the issue and replace it with an alternative plugin. You should also consider reporting the issue to the plugin developer so that they may fix it in an upcoming release. Alternatively, you can check out some of the examples below and attempt to fix the errors yourself.

Note: Do not attempt to fix issues yourself if you do not have prior software development experience. If the below does not make sense, you should consult with your web professional.

The errors above manifest themselves when your website is attempting to retrieve outside web URLs. The solution is to use the PHP Curl library to do so instead, which is more secure. How you use PHP ‘s Curl library to circumvent this issue depends on which warning you’ve received.

Example 1: Warning: fopen() [function.fopen]:

$file = “http://news.google.com/news?ned=us&topic=h&output=rss”;

$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, “startElement”, “endElement”);
xml_set_character_data_handler($xml_parser, “characterData”);

if (!($fp = fopen($file, “r”))) {
die(“could not open XML input”);
}

while ($data = fread($fp, 4096)) {
if (!xml_parse($xml_parser, $data, feof($fp))) {
die(sprintf(“XML error: %s at line %d”,
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}

In the above example, an attempt to open a Google RSS feed is being made. The fopen() call will fail because $file is an outside web site, and the rest of the code will not be executed. To properly load the RSS feed and parse, this snipit of code would need to be rewritten as follows:

$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, “startElement”, “endElement”);
xml_set_character_data_handler($xml_parser, “characterData”);

$file = “http://news.google.com/news?ned=us&topic=h&output=rss”;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $file);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$xmldata = curl_exec($ch);
curl_close($ch);

$xmldata = split(“\n”,$xmldata);

foreach ($xmldata as $data) {
if (!xml_parse($xml_parser, $data)) {
die(sprintf(“XML error: %s at line %d”,
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}

Example 2: Warning: file_get_contents() [function.file-get-contents]:

<?php

$contents = file_get_contents(‘http://www.cnn.com/’);

echo $contents;

?>

In the above example, the file_get_contents function is used to retrieve the content of the CNN website. You can accomplish the same thing safely using CURL as follows:

<?php

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, ‘http://www.cnn.com’);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);
curl_close($ch);

// display file
echo $contents;
?>

Example 3: Warning: include() [function.include]:

Including files from web hosts is not allowed.

<? php include(“http://www.example.com/new.php”); ?>

If the file that you are trying to include is local, use relative paths instead , not the web URL. Otherwise, use the following:

<?php

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, ‘http://www.example.com/mew.php’);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);
curl_close($ch);

// display file
echo $file_contents;
?>

Example 4: Warning: getimagesize() [function.getimagesize]:

getimagesize() allows you to get the height, width and size of an image file. To use getimagesize() safely, CURL can be used to get the remote file, the data can be saved to a local temporary image file and getimagesize() can be used on the local version.

<php

$filename = “http://www.example.com/example.jpg”;

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, $filename);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

$contents = curl_exec($ch);
curl_close($ch);

$new_image = ImageCreateFromString($contents);
imagejpeg($new_image, “temp.jpg”,100);

$size = getimagesize(“temp.jpg”);

// width and height

$width = $size[0];
$height = $size[1];

Example 5: Warning: readfile() [function.readfile]:

<?php

$contents = readfile(‘http://www.example.com/some.txt’);

echo $contents;

?>

In the above example, the readfile function is used to retrieve the content of a remote text file. You can accomplish the same thing safely using CURL as follows:

<?php

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, ‘http://www.example.com/some.txt’);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);
curl_close($ch);

// display file
echo $contents;
?>

The above examples are not guaranteed to run without changes, they are strictly guidance to illustrate how to safely retrieve off-site content.

{ 1 comment }

Uploading a pdf file to your blog

by Heather Goff on April 10, 2010

in Blogging, Tutorials, useful info

Uploading a PDF file to your blog and linking to it is a very useful ability to have. PDF files can be opened by anyone who has the free acrobat reader software, and are a great way of formatting registration forms, contracts, event brochures etc..   You may want to add them in your Links or link to them from an image or text in a post.  Here is how I go about uploading and linking to PDF files.

LINKING TO A PDF FROM WITHIN A BLOG POST

To Link to a PDF from within a blog post, click on the add image icon.

Select the PDF file and upload.

Once it is uploaded, click on the “Insert into post” button to insert a link to it directly into your post.

LINKING TO A PDF FILE FROM A LINK OR FROM AN IMAGE IN A POST

If you want to create a link to it from an image, or from within your LINKS, then, instead of clicking on the “insert into post” button,  copy the LINK URL and then hit the “Save all changes” button.

You can then paste that URL into the web address of a link that you’ve created (see image below)..

Or, if you want to link to the PDF file from an image in a post, click on the image that you want to link the PDF to, and click on the insert link icon..

and add the LINK URL in the LINK URL field, clicking “Update” when you’re done.

ADDING A PDF FILE TO YOUR MEDIA LIBRARY

You can also add the PDF file directly to your media library by clicking on the “Add New” link under Media in your left hand navigation.

Select the PDF file from your computer.

Then click on the save changes.

Once a PDF file is in your library, to find out its URL so that you can link to it, click on the Library link under media.

Then click on the “View” link under the file that you want to get the URL of.

That will pull up the name of the PDF file, linked to the PDF file. Right click (if you don’t have a right click on your mouse, hold down the control key when you click) on the link and choose “Copy Link Location” from the contextual menu.

There are probably a slew of other ways to add PDF files to your blog posts. If you have your own version, please share by commenting on this post. Thanks!

{ 0 comments }

Adding an image with a link to your blog’s side bar is a great visual tool for promoting something within the blog, or for offering visual call outs to other websites. It is not quite as easy as a drag and drop tag cloud, however, it is not hard to do either, once you know a little bit of html code.

The first thing to do is to upload the image to your blog media library.

Make sure that the dimensions of the image will fit within your blog’s side bar dimensions. I would suggest keeping the image under 200 pixels wide. The image needs to be a png, jpg or gif image.
Click on the “Add New” under the Media bar in your wordpress dashboards left navigation (see image)

Once on the upload media page, click on the button to choose the files to upload, browsing for the image on your computer.

Once you’ve selected the file and upload it, copy the FILE URL. This is important. Select it, copy it, and paste it into a sticky note or a document so that you can retrieve it later. (see image below)

Now that you have the location of the image on the server, Save all changes and go to the Widgets area of your wordpress admin (under Appearance)

Then select the side bar that you want to place the image with link into – the left side bar (Sidebar 1), or the right side bar (Sidebar 2).

Find the text widget in your widget selections. click on the text widget, hold it down and drag it onto the side bar where you want the image to go.

Once you’ve dragged the widget to the side bar, click on the down arrow to open it up so that you can edit it.

Here is what you want to type:

(NOTE: When I say “image-location”, I am referring to the location of the image that you uploaded to your media library. You copied that location and saved it. When I say “link-url”, I am referring to the website address that you want to link to, be it a page on your blog or another website.)

<a href=”link-url“><img src=”image-location” border=”0″ /></a>

Tip 1: if you want the link to open in a new window, include  target=”_blank”   in the <a> tag.

For example, <a href=”link-url“  target=”_blank”><img src=”image-location” border=”0″ /></a>

Tip 2: Make sure to include the http:// at the beginning of your link-url. (see image below)

When you are done, hit the Save button.

Make sure to check it out on your blog to make sure it worked.

{ 1 comment }

Having a facebook business page is good for your business. In order to create one, you need to first have a personal facebook account. You log in to your personal facebook account and then click the link to create a business page. The person who creates the page is the administrator.

Let’s say you create a business page, and now you want to have someone else help you edit it. To avoid having them logging into your personal facebook account to do the editing, you need to add them as another administrator to the page.

Many of my clients have set up facebook business pages, and they then approach me to help them customize them – adding custom boxes, photos and banners. On other occasions, a client might ask me to set up a business page for them, and then I need to add them as an additional administrator, so that they can log in and make changes.

Here is the illustrated version of how to add additional administrators to your business page.

I am using my business page as an example.

Step 1: Go to facebook.com and, logged in as the person who created the page, browse to the business page.

Step 2. Click on the edit page link, found under the image on the left. (see image below)

facebook-createadmin1

Step 3: Once you get to the next page, in the right hand column, about halfway down, it lists the administrators of the page, and there is a link for adding a new administrator. Click on that link. (see image below)

facebook-createadmin2

Step 4: If the new administrator is already a facebook friend of yours, just type in their name and select them. If they are not your facebook friend, or don’t have a facebook account, then enter their email address in the field provided “Add Admins Via Email”.

Then click on the blue “Add Admins” button. (see image below)

facebook-createadmin3

The person you have chosen will receive an email notifying them that they have been selected to help administrate the facebook page.

The subject of the email will look like the picture below (but with their name instead of mine and the name of the business page they’ve been added to):

facebook-createadmin4

The body of the email will look similar to the one below (but with different names), and they should click on the link to view the page.

facebook-createadmin5

If they are not already a member of facebook, they will be prompted at that point to create a facebook account. They need to have a personal facebook account in order to administrate the business page. If your chosen administrator already has a facebook account, they can just log in to proceed. If they don’t have a facebook account, then they can click on the link provided to sign up for one.

facebook-createadmin6

And that concludes how to add additional administrators to your facebook business page.

Related Posts with Thumbnails

{ 1 comment }